remove cjs and register hook

Author: dummdidumm

CHANGELOG.md

@@ -7,6 +7,7 @@
 * **breaking** Bundlers must specify the `browser` condition when building a frontend bundle for the browser ([#8516](https://github.com/sveltejs/svelte/pull/8516))
 * **breaking** Minimum supported vite-plugin-svelte version is now 2.1.1. SvelteKit users can upgrade to 1.15.9 or newer to ensure a compatible version ([#8516](https://github.com/sveltejs/svelte/pull/8516))
 * **breaking** Minimum supported TypeScript version is now TypeScript 5 (it will likely work with lower versions, but we make no guarantees about that) ([#8488](https://github.com/sveltejs/svelte/pull/8488))
+* **breaking** Remove `svelte/register` hook, CJS runtime version and CJS compiler output ([#8613](https://github.com/sveltejs/svelte/pull/8613))
 * **breaking** Stricter types for `createEventDispatcher` (see PR for migration instructions) ([#7224](https://github.com/sveltejs/svelte/pull/7224))
 * **breaking** Stricter types for `Action` and `ActionReturn` (see PR for migration instructions) ([#7224](https://github.com/sveltejs/svelte/pull/7224))
 * **breaking** Stricter types for `onMount` - now throws a type error when returning a function asynchronously to catch potential mistakes around callback functions (see PR for migration instructions) ([#8136](https://github.com/sveltejs/svelte/pull/8136))

package.json

@@ -3,8 +3,8 @@
   "version": "4.0.0-next.0",
   "description": "Cybernetically enhanced web apps",
   "type": "module",
-  "module": "index.mjs",
-  "main": "index",
+  "module": "src/runtime/index.js",
+  "main": "src/runtime/index.js",
   "files": [
     "src",
     "types",
@@ -54,9 +54,6 @@
       "types": "./types/runtime/motion/index.d.ts",
       "import": "./src/runtime/motion/index.js"
     },
-    "./register": {
-      "require": "./register.js"
-    },
     "./store": {
       "types": "./types/runtime/store/index.d.ts",
       "import": "./src/runtime/store/index.js"

register.js

@@ -985,6 +985,8 @@ You can explore the various eases using the [ease visualiser](/examples/easing)
 
 ### `svelte/register`
 
+> This API is removed in Svelte 4. `require` hooks are deprecated and current Node versions understand ESM. Use a bundler like Vite or our full-stack framework [SvelteKit](https://kit.svelte.dev) instead to create JavaScript modules from Svelte components.
+
 To render Svelte components in Node.js without bundling, use `require('svelte/register')`. After that, you can use `require` to include any `.svelte` file.
 
 ```js

site/content/docs/04-run-time.md

@@ -39,7 +39,6 @@ The following options can be passed to the compiler. None are required:
 | --- | --- | --- |
 | `filename` | string | `null`
 | `name` | string | `"Component"`
-| `format` | `"esm"` or `"cjs"` | `"esm"`
 | `generate` | `"dom"` or `"ssr"` or `false` | `"dom"`
 | `errorMode` | `"throw"` or `"warn"` | `"throw"`
 | `varsReport` | `"strict"` or `"full"` or `false` | `"strict"`
@@ -62,7 +61,6 @@ The following options can be passed to the compiler. None are required:
 | --- | --- | --- |
 | `filename` | `null` | `string` used for debugging hints and sourcemaps. Your bundler plugin will set it automatically.
 | `name` | `"Component"` | `string` that sets the name of the resulting JavaScript class (though the compiler will rename it if it would otherwise conflict with other variables in scope). It will normally be inferred from `filename`.
-| `format` | `"esm"` | If `"esm"`, creates a JavaScript module (with `import` and `export`). If `"cjs"`, creates a CommonJS module (with `require` and `module.exports`), which is useful in some server-side rendering situations or for testing.
 | `generate` | `"dom"` | If `"dom"`, Svelte emits a JavaScript class for mounting to the DOM. If `"ssr"`, Svelte emits an object with a `render` method suitable for server-side rendering. If `false`, no JavaScript or CSS is returned; just metadata.
 | `errorMode` | `"throw"` | If `"throw"`, Svelte throws when a compilation error occurred. If `"warn"`, Svelte will treat errors as warnings and add them to the warning report.
 | `varsReport` | `"strict"` | If `"strict"`, Svelte returns a variables report with only variables that are not globals nor internals. If `"full"`, Svelte returns a variables report with all detected variables. If `false`, no variables report is returned.

site/content/docs/05-compile-time.md

@@ -320,7 +320,6 @@ export default class Component {
 		let css = null;
 		if (result) {
 			const { compile_options, name } = this;
-			const { format = 'esm' } = compile_options;
 			const banner = `${this.file ? `${this.file} ` : ''}generated by Svelte v${VERSION}`;
 
 			/** @type {any} */
@@ -388,7 +387,6 @@ export default class Component {
 			);
 			create_module(
 				program,
-				format,
 				name,
 				banner,
 				compile_options.sveltePath,

src/compiler/compile/Component.js

@@ -1,10 +1,7 @@
-import list from '../utils/list.js';
-import { b, x } from 'code-red';
-const wrappers = { esm, cjs };
+import { b } from 'code-red';
 
 /**
  * @param {any} program
- * @param {import('../interfaces.js').ModuleFormat} format
  * @param {import('estree').Identifier} name
  * @param {string} banner
  * @param {any} sveltePath
@@ -16,7 +13,6 @@ const wrappers = { esm, cjs };
  */
 export default function create_module(
 	program,
-	format,
 	name,
 	banner,
 	sveltePath = 'svelte',
@@ -39,11 +35,7 @@ export default function create_module(
 		 * @param {any} b
 		 */ (a, b) => (a.name < b.name ? -1 : 1)
 	);
-	const formatter = wrappers[format];
-	if (!formatter) {
-		throw new Error(`options.format is invalid (must be ${list(Object.keys(wrappers))})`);
-	}
-	return formatter(
+	return esm(
 		program,
 		name,
 		banner,
@@ -174,124 +166,7 @@ function esm(
 }
 
 /**
- * @param {any} program
- * @param {import('estree').Identifier} name
- * @param {string} banner
- * @param {string} sveltePath
- * @param {string} internal_path
- * @param {Array<{ name: string; alias: import('estree').Identifier }>} helpers
- * @param {Array<{ name: string; alias: import('estree').Identifier }>} globals
- * @param {import('estree').ImportDeclaration[]} imports
- * @param {Export[]} module_exports
- * @param {import('estree').ExportNamedDeclaration[]} exports_from
- */
-function cjs(
-	program,
-	name,
-	banner,
-	sveltePath,
-	internal_path,
-	helpers,
-	globals,
-	imports,
-	module_exports,
-	exports_from
-) {
-	const internal_requires = {
-		type: 'VariableDeclaration',
-		kind: 'const',
-		declarations: [
-			{
-				type: 'VariableDeclarator',
-				id: {
-					type: 'ObjectPattern',
-					properties: helpers.map(
-						/** @param {any} h */ (h) => ({
-							type: 'Property',
-							method: false,
-							shorthand: false,
-							computed: false,
-							key: { type: 'Identifier', name: h.name },
-							value: h.alias,
-							kind: 'init'
-						})
-					)
-				},
-				init: x`require("${internal_path}")`
-			}
-		]
-	};
-	const internal_globals = get_internal_globals(globals, helpers);
-	const user_requires = imports.map(
-		/** @param {any} node */ (node) => {
-			const init = x`require("${edit_source(node.source.value, sveltePath)}")`;
-			if (node.specifiers.length === 0) {
-				return b`${init};`;
-			}
-			return {
-				type: 'VariableDeclaration',
-				kind: 'const',
-				declarations: [
-					{
-						type: 'VariableDeclarator',
-						id:
-							node.specifiers[0].type === 'ImportNamespaceSpecifier'
-								? { type: 'Identifier', name: node.specifiers[0].local.name }
-								: {
-										type: 'ObjectPattern',
-										properties: node.specifiers.map(
-											/** @param {any} s */ (s) => ({
-												type: 'Property',
-												method: false,
-												shorthand: false,
-												computed: false,
-												key:
-													s.type === 'ImportSpecifier'
-														? s.imported
-														: { type: 'Identifier', name: 'default' },
-												value: s.local,
-												kind: 'init'
-											})
-										)
-								  },
-						init
-					}
-				]
-			};
-		}
-	);
-	const exports = module_exports.map(
-		/** @param {any} x */
-		(x) =>
-			b`exports.${{ type: 'Identifier', name: x.as }} = ${{ type: 'Identifier', name: x.name }};`
-	);
-	const user_exports_from = exports_from.map(
-		/** @param {any} node */ (node) => {
-			const init = x`require("${edit_source(node.source.value, sveltePath)}")`;
-			return node.specifiers.map(
-				/** @param {any} specifier */ (specifier) => {
-					return b`exports.${specifier.exported} = ${init}.${specifier.local};`;
-				}
-			);
-		}
-	);
-	program.body = b`
-		/* ${banner} */
-
-		"use strict";
-		${internal_requires}
-		${internal_globals}
-		${user_requires}
-		${user_exports_from}
-
-		${program.body}
-
-		exports.default = ${name};
-		${exports}
-	`;
-}
-
-/** @typedef {Object} Export
+ * @typedef {Object} Export
  * @property {string} name
  * @property {string} as
  */

src/compiler/compile/create_module.js

@@ -159,8 +159,6 @@ export interface Warning {
 	toString: () => string;
 }
 
-export type ModuleFormat = 'esm' | 'cjs';
-
 export type EnableSourcemap = boolean | { js: boolean; css: boolean };
 
 export type CssHashGetter = (args: {
@@ -171,7 +169,6 @@ export type CssHashGetter = (args: {
 }) => string;
 
 export interface CompileOptions {
-	format?: ModuleFormat;
 	name?: string;
 	filename?: string;
 	generate?: 'dom' | 'ssr' | false;

src/compiler/interfaces.d.ts

@@ -1,2 +1,2 @@
-export type { CompileOptions, ModuleFormat, EnableSourcemap, CssHashGetter } from './interfaces';
+export type { CompileOptions, EnableSourcemap, CssHashGetter } from './interfaces';
 export type * from './preprocess/public.js';

src/compiler/public.d.ts

@@ -21,7 +21,6 @@ describe('compiler-errors', () => {
 			const cwd = path.resolve(`${__dirname}/samples/${dir}`);
 
 			const compileOptions = Object.assign({}, config.compileOptions || {}, {
-				format: 'cjs',
 				immutable: config.immutable,
 				accessors: 'accessors' in config ? config.accessors : true,
 				generate: 'dom'