Feat: async load config esm (#35)

dominikg · web-flow · commit 4018ce621b4d · 2021-04-27T20:42:54.000+02:00
* feat(vite-plugin-svelte): support esm in svelte.config.js (see #29) * update vite to 2.2.1 and update other dependencies * chore: update dependencies * test: improve stability * feat: add configFile option; use require to load cjs config * also try to load svelte.config.mjs * chore: update dependencies * improve changesets
diff --git a/.changeset/blue-schools-bake.md b/.changeset/blue-schools-bake.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+Feature: Support esm in svelte.config.js and svelte.config.mjs
diff --git a/.changeset/little-plums-grab.md b/.changeset/little-plums-grab.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+Feature: add configFile option
diff --git a/.ncurc.js b/.ncurc.js
@@ -1,4 +1,4 @@
 module.exports = {
 	packageFile: ['package.json', 'packages/**/package.json'],
-	reject: ['husky']
+	reject: ['husky', 'esbuild', 'slash']
 };
diff --git a/package.json b/package.json
@@ -27,27 +27,27 @@
     "release": "pnpm run build && pnpx --no changeset publish"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "^0.3.0",
-    "@changesets/cli": "^2.15.0",
-    "@microsoft/api-extractor": "^7.13.2",
-    "@types/fs-extra": "^9.0.10",
+    "@changesets/changelog-github": "^0.4.0",
+    "@changesets/cli": "^2.16.0",
+    "@microsoft/api-extractor": "^7.14.0",
+    "@types/fs-extra": "^9.0.11",
     "@types/jest": "^26.0.22",
-    "@types/node": "^14.14.37",
-    "@types/semver": "^7.3.4",
-    "@typescript-eslint/eslint-plugin": "^4.20.0",
-    "@typescript-eslint/parser": "^4.20.0",
-    "chalk": "^4.1.0",
+    "@types/node": "^14.14.41",
+    "@types/semver": "^7.3.5",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
+    "chalk": "^4.1.1",
     "cross-env": "^7.0.3",
     "enquirer": "^2.3.6",
     "esbuild": "~0.9.7",
-    "eslint": "^7.23.0",
-    "eslint-config-prettier": "^8.1.0",
+    "eslint": "^7.25.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-html": "^6.1.2",
-    "eslint-plugin-jest": "^24.3.3",
-    "eslint-plugin-markdown": "^2.0.0",
+    "eslint-plugin-jest": "^24.3.6",
+    "eslint-plugin-markdown": "^2.1.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-svelte3": "^3.1.2",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-svelte3": "^3.2.0",
     "execa": "^5.0.0",
     "fs-extra": "^9.1.0",
     "husky": "^4.3.8",
@@ -57,23 +57,23 @@
     "lint-staged": "^10.5.4",
     "minimist": "^1.2.5",
     "node-fetch": "^2.6.1",
-    "npm-check-updates": "^11.3.0",
+    "npm-check-updates": "^11.5.1",
     "npm-run-all": "^4.1.5",
     "playwright-core": "^1.10.0",
-    "pnpm": "^6.0.1",
+    "pnpm": "^6.2.1",
     "prettier": "^2.2.1",
     "prettier-plugin-svelte": "^2.2.0",
     "rimraf": "^3.0.2",
     "semver": "^7.3.5",
     "sirv": "^1.0.11",
     "slash": "^3.0.0",
-    "stylelint": "^13.12.0",
+    "stylelint": "^13.13.0",
     "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-recommended": "^4.0.0",
+    "stylelint-config-recommended": "^5.0.0",
     "svelte": "^3.37.0",
-    "ts-jest": "^26.5.4",
-    "typescript": "^4.2.3",
-    "vite": "^2.1.5"
+    "ts-jest": "^26.5.5",
+    "typescript": "^4.2.4",
+    "vite": "^2.2.3"
   },
   "husky": {
     "hooks": {
diff --git a/packages/playground/autoprefixer-browerslist/package.json b/packages/playground/autoprefixer-browerslist/package.json
@@ -12,11 +12,11 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "autoprefixer": "^10.2.5",
-    "postcss": "^8.2.9",
+    "postcss": "^8.2.12",
     "postcss-load-config": "^3.0.1",
     "svelte": "^3.37.0",
-    "svelte-hmr": "^0.14.0",
-    "svelte-preprocess": "^4.7.0",
-    "vite": "^2.1.5"
+    "svelte-hmr": "^0.14.2",
+    "svelte-preprocess": "^4.7.2",
+    "vite": "^2.2.3"
   }
 }
diff --git a/packages/playground/autoprefixer-browerslist/svelte.config.cjs b/packages/playground/autoprefixer-browerslist/svelte.config.cjs
diff --git a/packages/playground/big/package.json b/packages/playground/big/package.json
@@ -12,7 +12,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.37.0",
-    "svelte-hmr": "^0.14.0",
-    "vite": "^2.1.5"
+    "svelte-hmr": "^0.14.2",
+    "vite": "^2.2.3"
   }
 }
diff --git a/packages/playground/configfile-custom/.gitignore b/packages/playground/configfile-custom/.gitignore
@@ -0,0 +1,4 @@
+/node_modules/
+/public/build/
+
+.DS_Store
diff --git a/packages/playground/configfile-custom/README.md b/packages/playground/configfile-custom/README.md
@@ -0,0 +1,10 @@
+# default svelte app template
+
+Created with `npx degit sveltejs/template`
+
+adapted to vite by moving index.html to root and replacing rollup config with vite
+
+use pnpm
+
+`pnpm dev` starts dev server
+`pnpm build` builds for production
diff --git a/packages/playground/configfile-custom/__tests__/configfile-custom.spec.ts b/packages/playground/configfile-custom/__tests__/configfile-custom.spec.ts
@@ -0,0 +1,3 @@
+it('should load config and work', async () => {
+	expect(await page.textContent('h1')).toMatch('Hello world!');
+});
diff --git a/packages/playground/configfile-custom/index.html b/packages/playground/configfile-custom/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width,initial-scale=1" />
+
+		<title>Svelte app</title>
+
+		<script type="module" src="/src/main.js"></script>
+	</head>
+
+	<body></body>
+</html>
diff --git a/packages/playground/configfile-custom/package.json b/packages/playground/configfile-custom/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "playground-configfile-custom",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
+  },
+	"dependencies": {
+		"playground-hmr-test-dependency": "workspace:*"
+	},
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "workspace:*",
+    "svelte": "^3.37.0",
+    "svelte-hmr": "^0.14.2",
+    "svelte-preprocess": "^4.7.2",
+    "vite": "^2.2.3"
+  }
+}
diff --git a/packages/playground/configfile-custom/src/App.svelte b/packages/playground/configfile-custom/src/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Dependency from 'playground-hmr-test-dependency';
+</script>
+
+<h1>Hello world!</h1>
+<Dependency />
+
+<style>
+	h1 {
+		color: #ff3e00;
+	}
+</style>
diff --git a/packages/playground/configfile-custom/src/main.js b/packages/playground/configfile-custom/src/main.js
@@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body
+});
+
+export default app;
diff --git a/packages/playground/configfile-custom/svelte.config.custom.cjs b/packages/playground/configfile-custom/svelte.config.custom.cjs
@@ -0,0 +1,5 @@
+const sveltePreprocess = require('svelte-preprocess');
+
+module.exports = {
+	preprocess: sveltePreprocess()
+};
diff --git a/packages/playground/configfile-custom/svelte.config.custom.mjs b/packages/playground/configfile-custom/svelte.config.custom.mjs
@@ -0,0 +1,10 @@
+/*
+const sveltePreprocess = require('svelte-preprocess');
+
+module.exports = {
+	preprocess: sveltePreprocess()
+};
+*/
+export default {
+	emitCss: true
+}
diff --git a/packages/playground/configfile-custom/vite.config.js b/packages/playground/configfile-custom/vite.config.js
@@ -0,0 +1,12 @@
+const svelte = require('@sveltejs/vite-plugin-svelte');
+const { defineConfig } = require('vite');
+
+module.exports = defineConfig(({ command, mode }) => {
+	const isProduction = mode === 'production';
+	return {
+		plugins: [svelte({ configFile: 'svelte.config.custom.cjs' })],
+		build: {
+			minify: isProduction
+		}
+	};
+});
diff --git a/packages/playground/configfile-esm/.gitignore b/packages/playground/configfile-esm/.gitignore
@@ -0,0 +1,4 @@
+/node_modules/
+/public/build/
+
+.DS_Store
diff --git a/packages/playground/configfile-esm/README.md b/packages/playground/configfile-esm/README.md
@@ -0,0 +1,10 @@
+# default svelte app template
+
+Created with `npx degit sveltejs/template`
+
+adapted to vite by moving index.html to root and replacing rollup config with vite
+
+use pnpm
+
+`pnpm dev` starts dev server
+`pnpm build` builds for production
diff --git a/packages/playground/configfile-esm/__tests__/configfile-esm.spec.disabled.ts b/packages/playground/configfile-esm/__tests__/configfile-esm.spec.disabled.ts
@@ -0,0 +1,5 @@
+// unfortunately this test does not work as jest is not fully compatible with esm
+// wait for jest 27 and see https://github.com/facebook/jest/issues/9430
+it('should load config and work', async () => {
+	expect(await page.textContent('h1')).toMatch('Hello world!');
+});
diff --git a/packages/playground/configfile-esm/index.html b/packages/playground/configfile-esm/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width,initial-scale=1" />
+
+		<title>Svelte app</title>
+
+		<script type="module" src="/src/main.js"></script>
+	</head>
+
+	<body></body>
+</html>
diff --git a/packages/playground/configfile-esm/package.json b/packages/playground/configfile-esm/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "playground-configfile-esm",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
+  },
+	"dependencies": {
+		"playground-hmr-test-dependency": "workspace:*"
+	},
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "workspace:*",
+    "svelte": "^3.37.0",
+    "svelte-hmr": "^0.14.2",
+    "svelte-preprocess": "^4.7.2",
+    "vite": "^2.2.3"
+  },
+	"type": "module"
+}
diff --git a/packages/playground/configfile-esm/src/App.svelte b/packages/playground/configfile-esm/src/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Dependency from 'playground-hmr-test-dependency';
+</script>
+
+<h1>Hello world!</h1>
+<Dependency />
+
+<style>
+	h1 {
+		color: #ff3e00;
+	}
+</style>
diff --git a/packages/playground/configfile-esm/src/main.js b/packages/playground/configfile-esm/src/main.js
@@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body
+});
+
+export default app;
diff --git a/packages/playground/configfile-esm/svelte.config.js b/packages/playground/configfile-esm/svelte.config.js
@@ -0,0 +1,5 @@
+import sveltePreprocess from 'svelte-preprocess';
+
+export default {
+	preprocess: sveltePreprocess()
+};
diff --git a/packages/playground/configfile-esm/vite.config.js b/packages/playground/configfile-esm/vite.config.js
@@ -0,0 +1,12 @@
+import svelte from '@sveltejs/vite-plugin-svelte';
+import { defineConfig } from 'vite';
+
+export default defineConfig(({ command, mode }) => {
+	const isProduction = mode === 'production';
+	return {
+		plugins: [svelte()],
+		build: {
+			minify: isProduction
+		}
+	};
+});
diff --git a/packages/playground/default-svelte-template-ts/package.json b/packages/playground/default-svelte-template-ts/package.json
@@ -12,11 +12,11 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "@tsconfig/svelte": "^1.0.10",
     "svelte": "^3.37.0",
-    "svelte-hmr": "^0.14.0",
-    "vite": "^2.1.5",
-    "svelte-check": "^1.3.0",
-    "svelte-preprocess": "^4.7.0",
-    "typescript": "^4.2.3",
-    "tslib": "^2.1.0"
+    "svelte-hmr": "^0.14.2",
+    "vite": "^2.2.3",
+    "svelte-check": "^1.5.1",
+    "svelte-preprocess": "^4.7.2",
+    "typescript": "^4.2.4",
+    "tslib": "^2.2.0"
   }
 }
diff --git a/packages/playground/default-svelte-template/package.json b/packages/playground/default-svelte-template/package.json
@@ -9,7 +9,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.37.0",
-    "svelte-hmr": "^0.14.0",
-    "vite": "^2.1.5"
+    "svelte-hmr": "^0.14.2",
+    "vite": "^2.2.3"
   }
 }
diff --git a/packages/playground/hmr/package.json b/packages/playground/hmr/package.json
@@ -12,8 +12,8 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.37.0",
-    "svelte-hmr": "^0.14.0",
-    "vite": "^2.1.5",
+    "svelte-hmr": "^0.14.2",
+    "vite": "^2.2.3",
     "node-fetch": "^2.6.1"
   }
 }
diff --git a/packages/playground/kit-node/__tests__/serve.js b/packages/playground/kit-node/__tests__/serve.js
@@ -17,7 +17,7 @@ exports.serve = async function serve(root, isProd) {
 		try {
 			const serverProcess = execa(
 				'svelte-kit',
-				[isProd ? 'start' : 'dev', '--port', isProd ? '3200' : '3201'],
+				[isProd ? 'preview' : 'dev', '--port', isProd ? '3200' : '3201'],
 				{
 					preferLocal: true,
 					cwd: root,
diff --git a/packages/playground/kit-node/package.json b/packages/playground/kit-node/package.json
@@ -5,13 +5,13 @@
 	"scripts": {
 		"dev": "svelte-kit dev",
 		"build": "svelte-kit build",
-		"start": "svelte-kit start"
+		"preview": "svelte-kit preview"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-node": "^1.0.0-next.12",
-		"@sveltejs/kit": "^1.0.0-next.71",
-		"svelte": "^3.29.0",
-		"vite": "^2.1.0"
+		"@sveltejs/adapter-node": "^1.0.0-next.16",
+		"@sveltejs/kit": "^1.0.0-next.88",
+		"svelte": "^3.37.0",
+		"vite": "^2.2.3"
 	},
 	"type": "module",
 	"engines": {
diff --git a/packages/playground/preprocess-with-vite/package.json b/packages/playground/preprocess-with-vite/package.json
diff --git a/packages/playground/ts-type-import/package.json b/packages/playground/ts-type-import/package.json
diff --git a/packages/playground/ts-type-import/svelte.config.cjs b/packages/playground/ts-type-import/svelte.config.cjs
diff --git a/packages/playground/vite-ssr/__tests__/serve.js b/packages/playground/vite-ssr/__tests__/serve.js
diff --git a/packages/playground/vite-ssr/package.json b/packages/playground/vite-ssr/package.json
diff --git a/packages/playground/windicss/package.json b/packages/playground/windicss/package.json
diff --git a/packages/vite-plugin-svelte/package.json b/packages/vite-plugin-svelte/package.json
diff --git a/packages/vite-plugin-svelte/src/index.ts b/packages/vite-plugin-svelte/src/index.ts
diff --git a/packages/vite-plugin-svelte/src/utils/compile.ts b/packages/vite-plugin-svelte/src/utils/compile.ts
diff --git a/packages/vite-plugin-svelte/src/utils/loadSvelteConfig.ts b/packages/vite-plugin-svelte/src/utils/loadSvelteConfig.ts
diff --git a/packages/vite-plugin-svelte/src/utils/options.ts b/packages/vite-plugin-svelte/src/utils/options.ts
diff --git a/packages/vite-plugin-svelte/src/utils/preprocess.ts b/packages/vite-plugin-svelte/src/utils/preprocess.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/scripts/jestPerTestSetup.ts b/scripts/jestPerTestSetup.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@sveltejs/vite-plugin-svelte': minor
 +---
++
 +Feature: Support esm in svelte.config.js and svelte.config.mjs
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`"devDependencies": {`
`13`	`13`	`"@sveltejs/vite-plugin-svelte": "workspace:*",`
`14`	`14`	`"svelte": "^3.37.0",`
`15`		`- "svelte-hmr": "^0.14.0",`
`16`		`- "vite": "^2.1.5"`
	`15`	`+ "svelte-hmr": "^0.14.2",`
	`16`	`+ "vite": "^2.2.3"`
`17`	`17`	`}`
`18`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+it('should load config and work', async () => {`
	`2`	`+ expect(await page.textContent('h1')).toMatch('Hello world!');`
	`3`	`+});`