feat: convert to esm with cjs fallback, switch from default to named export (#54)

* feat: convert to esm with cjs fallback, switch from default to named export

* disable eslint on partial js in readme

* changeset

* chore: fix formatting

* use named export 'svelte' and provide deprecation warning in default export

* remove default export with deprecation warning, add note about named export to changelog

Author: dominikg

.changeset/happy-toys-boil.md

@@ -0,0 +1,22 @@
+---
+'@sveltejs/vite-plugin-svelte': major
+---
+
+feat: convert to es module with cjs fallback, use named export instead of default
+
+If you are using vite-plugin-svelte with require, you should switch to esm and import the named export "svelte".
+An example can be found in the usage section of the [readme](README.md)
+
+For existing esm configs update your import to use the new named export.
+
+```diff
+- import svelte from '@sveltejs/vite-plugin-svelte';
++ import { svelte } from '@sveltejs/vite-plugin-svelte';
+```
+
+continuing with cjs/require is discouraged but if you must use it, update your require statement to use the named export
+
+```diff
+- const svelte = require('@sveltejs/vite-plugin-svelte');
++ const { svelte } = require('@sveltejs/vite-plugin-svelte');
+```

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-# build and test on linux, windows, mac with node 12,14
+# build and test on linux, windows, mac with node 12, 14, 16
 name: CI
 
 env:
@@ -20,7 +20,7 @@ jobs:
       fail-fast: false
       matrix:
         os: [ ubuntu-latest, windows-latest, macos-latest ]
-        node: [ 12, 14 ]
+        node: [ 12, 14, 16 ]
 
     steps:
       - uses: actions/setup-node@v2
@@ -136,7 +136,7 @@ jobs:
       fail-fast: false
       matrix:
         os: [ ubuntu-latest, windows-latest, macos-latest ]
-        node: [ 12, 14 ]
+        node: [ 12, 14, 16 ]
     steps:
       - uses: actions/setup-node@v2
         with:

.gitignore

@@ -1,22 +1,45 @@
-.DS_Store
-node_modules
-dist
-dist-ssr
-build
-TODOs.md
+# logs and temp
 *.log
+**/*.log
+*.cpuprofile
+**/*.cpuprofile
 temp
-explorations
-.idea
+**/temp
+*.tmp
+**/*.tmp
+
+# build and dist
+build
+**/build
+dist
+**/dist
+.svelte
+.svelte-kit
+**/.svelte
+**/.svelte-kit
+
+# env and local
 *.local
-*.cpuprofile
+**/*.local
 .env
-packages/**/pnpm-lock.yaml
-packages/**/package-lock.json
-packages/**/yarn.lock
-packages/**/dist
-packages/**/dist-ssr
-packages/**/build
-packages/**/node_modules
-temp/**/*
+**/.env
+
+#node_modules and pnpm
+node_modules
+**/node_modules
+# only workspace root has a lock
+**/pnpm-lock.yaml
 .pnpm-store
+**/.pnpm-store
+
+#ide
+.idea
+**/.idea
+.vscode
+**/.vscode
+
+# macos
+.DS_Store
+._.DS_Store
+**/.DS_Store
+**/._.DS_Store

.pnpmfile.cjs

@@ -1,4 +1,5 @@
-const viteVersion = require('./package.json').devDependencies.vite;
+const {vite,esbuild} = require('./package.json').devDependencies;
+
 function readPackage(pkg) {
 	for (const section of [
 		'dependencies',
@@ -7,12 +8,20 @@ function readPackage(pkg) {
 		'optionalDependencies'
 	]) {
 		// enforce use of workspace vite-plugin-svelte
+		// integration testing with svelte-kit would test outdated version otherwise
 		if (pkg[section]['@sveltejs/vite-plugin-svelte']) {
 			pkg[section]['@sveltejs/vite-plugin-svelte'] = 'workspace:*';
 		}
 		// enforce use of workspace vite
+		// integration testing with svelte-kit would test outdated version otherwise
 		if(pkg[section]['vite']) {
-			pkg[section]['vite'] = viteVersion;
+			pkg[section]['vite'] = vite;
+		}
+
+		// enforce use of workspace esbuild
+		// to ensure a single version is used and
+		if(pkg[section]['esbuild']) {
+			pkg[section]['esbuild'] = esbuild;
 		}
 	}
 	return pkg;

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "dev": "pnpm --dir packages/vite-plugin-svelte dev",
-    "build:ci": "pnpm -r build-bundle --filter=./packages/vite-plugin-svelte",
+    "build:ci": "pnpm -r build:ci --filter=./packages/vite-plugin-svelte",
     "build": "pnpm -r build --filter=\\!./packages/playground",
     "build:vite-plugin-svelte": "pnpm --dir packages/vite-plugin-svelte build",
     "test": "run-s test:serve test:build",
@@ -15,9 +15,9 @@
     "test:ci:serve": "cross-env VITE_PRESERVE_BUILD_ARTIFACTS=1 jest --verbose --no-cache --runInBand --force-exit --ci --json --outputFile=\"temp/serve/jest-results.json\"",
     "test:ci:build": "cross-env VITE_TEST_BUILD=1 VITE_PRESERVE_BUILD_ARTIFACTS=1 jest --verbose --no-cache --runInBand --force-exit --ci --json --outputFile=\"temp/build/jest-results.json\"",
     "lint": "eslint --ignore-path .gitignore '**/*.{js,ts,svelte,html,svx,md}'",
-    "lint:fix": "pnpm lint -- --fix",
+    "lint:fix": "pnpm run lint -- --fix",
     "format": "prettier --ignore-path .gitignore '**/*.{css,scss,svelte,html,js,ts,svx,md}' --check",
-    "format:fix": "pnpm format -- --write",
+    "format:fix": "pnpm run format -- --write",
     "fixup": "run-s lint:fix format:fix",
     "update-deps": "ncu -u && ncu -f \"/^@sveltejs\\/(?:kit|adapter)/\" --target=greatest -u",
     "release": "pnpm run build && pnpx --no changeset publish",
@@ -26,26 +26,25 @@
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.0",
     "@changesets/cli": "^2.16.0",
-    "@microsoft/api-extractor": "^7.15.2",
     "@types/fs-extra": "^9.0.11",
     "@types/jest": "^26.0.23",
-    "@types/node": "^15.12.0",
+    "@types/node": "^15.12.2",
     "@types/semver": "^7.3.6",
-    "@typescript-eslint/eslint-plugin": "^4.26.0",
-    "@typescript-eslint/parser": "^4.26.0",
+    "@typescript-eslint/eslint-plugin": "^4.26.1",
+    "@typescript-eslint/parser": "^4.26.1",
     "chalk": "^4.1.1",
     "cross-env": "^7.0.3",
     "enquirer": "^2.3.6",
-    "esbuild": "~0.12.5",
-    "eslint": "^7.27.0",
+    "esbuild": "^0.12.8",
+    "eslint": "^7.28.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-html": "^6.1.2",
     "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-markdown": "^2.2.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-svelte3": "^3.2.0",
-    "execa": "^5.1.0",
+    "execa": "^5.1.1",
     "fs-extra": "^10.0.0",
     "husky": "^6.0.0",
     "jest": "^27.0.4",
@@ -56,17 +55,17 @@
     "node-fetch": "^2.6.1",
     "npm-check-updates": "^11.6.0",
     "npm-run-all": "^4.1.5",
-    "playwright-core": "^1.11.1",
-    "pnpm": "^6.6.2",
-    "prettier": "^2.3.0",
+    "playwright-core": "^1.12.0",
+    "pnpm": "^6.7.4",
+    "prettier": "^2.3.1",
     "prettier-plugin-svelte": "^2.3.0",
     "rimraf": "^3.0.2",
     "semver": "^7.3.5",
     "sirv": "^1.0.12",
     "svelte": "^3.38.2",
-    "ts-jest": "^27.0.2",
+    "ts-jest": "^27.0.3",
     "typescript": "^4.3.2",
-    "vite": "^2.3.6"
+    "vite": "^2.3.7"
   },
   "lint-staged": {
     "*.{js,ts,svelte,html,md,svx}": "eslint --fix",
@@ -75,9 +74,9 @@
     ]
   },
   "engines": {
-    "pnpm": ">=6",
+    "pnpm": "^6.7.0",
     "yarn": "forbidden, use pnpm",
     "npm": "forbidden, use pnpm",
-		"node": "^12.20 || ^14.13.1 || >= 16"
+    "node": "^12.20 || ^14.13.1 || >= 16"
   }
 }

packages/playground/autoprefixer-browerslist/.gitignore

@@ -17,6 +17,6 @@
     "svelte": "^3.38.2",
     "svelte-hmr": "^0.14.4",
     "svelte-preprocess": "^4.7.3",
-    "vite": "^2.3.6"
+    "vite": "^2.3.7"
   }
 }

packages/playground/autoprefixer-browerslist/package.json

@@ -1,4 +1,4 @@
-const svelte = require('@sveltejs/vite-plugin-svelte');
+const { svelte } = require('@sveltejs/vite-plugin-svelte');
 const { defineConfig } = require('vite');
 
 module.exports = defineConfig(({ command, mode }) => {

packages/playground/autoprefixer-browerslist/vite.config.js

@@ -13,6 +13,6 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.38.2",
     "svelte-hmr": "^0.14.4",
-    "vite": "^2.3.6"
+    "vite": "^2.3.7"
   }
 }

packages/playground/big/.gitignore

@@ -1,4 +1,4 @@
-const svelte = require('@sveltejs/vite-plugin-svelte');
+const { svelte } = require('@sveltejs/vite-plugin-svelte');
 const { defineConfig } = require('vite');
 
 module.exports = defineConfig(({ command, mode }) => {

packages/playground/big/package.json

@@ -14,6 +14,6 @@
     "svelte": "^3.38.2",
     "svelte-hmr": "^0.14.4",
     "svelte-preprocess": "^4.7.3",
-    "vite": "^2.3.6"
+    "vite": "^2.3.7"
   }
 }

packages/playground/big/vite.config.js

@@ -1,4 +1,4 @@
-const svelte = require('@sveltejs/vite-plugin-svelte');
+const { svelte } = require('@sveltejs/vite-plugin-svelte');
 const { defineConfig } = require('vite');
 
 module.exports = defineConfig(({ command, mode }) => {

packages/playground/configfile-custom/.gitignore

@@ -14,7 +14,7 @@
     "svelte": "^3.38.2",
     "svelte-hmr": "^0.14.4",
     "svelte-preprocess": "^4.7.3",
-    "vite": "^2.3.6"
+    "vite": "^2.3.7"
   },
 	"type": "module"
 }

packages/playground/configfile-custom/package.json

@@ -1,4 +1,4 @@
-import svelte from '@sveltejs/vite-plugin-svelte';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { defineConfig } from 'vite';
 
 export default defineConfig(({ command, mode }) => {

packages/playground/configfile-custom/vite.config.js

@@ -13,7 +13,7 @@
     "@tsconfig/svelte": "^2.0.1",
     "svelte": "^3.38.2",
     "svelte-hmr": "^0.14.4",
-    "vite": "^2.3.6",
+    "vite": "^2.3.7",
     "svelte-check": "^2.1.0",
     "svelte-preprocess": "^4.7.3",
     "typescript": "^4.3.2",

packages/playground/configfile-esm/.gitignore

@@ -1,4 +1,4 @@
-const svelte = require('@sveltejs/vite-plugin-svelte');
+const { svelte } = require('@sveltejs/vite-plugin-svelte');
 const { defineConfig } = require('vite');
 
 module.exports = defineConfig(({ command, mode }) => {

packages/playground/configfile-esm/package.json

@@ -10,6 +10,6 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.38.2",
     "svelte-hmr": "^0.14.4",
-    "vite": "^2.3.6"
+    "vite": "^2.3.7"
   }
 }

packages/playground/configfile-esm/vite.config.js

@@ -1,4 +1,4 @@
-const svelte = require('@sveltejs/vite-plugin-svelte');
+const { svelte } = require('@sveltejs/vite-plugin-svelte');
 const { defineConfig } = require('vite');
 
 module.exports = defineConfig(({ command, mode }) => {

packages/playground/default-svelte-template-ts/.gitignore

@@ -13,7 +13,7 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.38.2",
     "svelte-hmr": "^0.14.4",
-    "vite": "^2.3.6",
+    "vite": "^2.3.7",
     "node-fetch": "^2.6.1"
   }
 }

packages/playground/default-svelte-template-ts/.vscode/extensions.json

@@ -1,5 +1,5 @@
 const { defineConfig } = require('vite');
-const svelte = require('@sveltejs/vite-plugin-svelte');
+const { svelte } = require('@sveltejs/vite-plugin-svelte');
 
 module.exports = defineConfig(({ command, mode }) => {
 	const isProduction = mode === 'production';

packages/playground/default-svelte-template-ts/package.json

@@ -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

packages/playground/default-svelte-template-ts/vite.config.js

@@ -0,0 +1,5 @@
+import { getText } from '../../testUtils';
+
+test('should render component imported via svelte field in package.json', async () => {
+	expect(await getText('#test-id')).toBe('svelte field works');
+});