webpack -> Rollup (again)

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "svelte.svelte-vscode"
+  ]
+}

.vscode/tasks.json

@@ -2,14 +2,19 @@
   "version": "2.0.0",
   "tasks": [
     {
-      "label": "Run webpack for plugin assets",
+      "label": "Build plugin assets",
       "type": "process",
       "command": "yarn",
       "args": [
         "dev",
-        "-o",
+        "-d",
         "../blessing-skin-server/public/plugins"
       ],
+      "options": {
+        "env": {
+          "NODE_ENV": "development"
+        }
+      },
       "isBackground": true,
       "problemMatcher": []
     }

package.json

@@ -8,26 +8,26 @@
     "plugins/*"
   ],
   "scripts": {
-    "dev": "webpack -d -w",
+    "dev": "rollup -c -w",
-    "build": "webpack -p"
+    "build": "rollup -c"
   },
   "devDependencies": {
     "@gplane/tsconfig": "^1.1.0",
-    "@types/gulp": "^4.0.6",
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-typescript": "^5.0.2",
     "@types/node": "^14.0.13",
     "@types/react": "^16.9.32",
     "@types/react-dom": "^16.9.6",
-    "@types/webpack": "^4.41.17",
-    "css-loader": "^4.2.1",
     "fast-glob": "^3.2.4",
-    "sass": "^1.26.10",
+    "rollup": "^2.26.5",
-    "sass-loader": "^9.0.3",
+    "rollup-plugin-svelte": "^6.0.0",
-    "style-loader": "^1.2.1",
+    "rollup-plugin-terser": "^7.0.0",
-    "ts-loader": "^8.0.1",
+    "svelte": "^3.24.1",
-    "ts-node": "^8.10.2",
+    "svelte-check": "^1.0.26",
-    "typescript": "^4.0.2",
+    "svelte-preprocess": "^4.1.1",
-    "webpack": "^5.0.0-beta.18",
+    "tslib": "^2.0.1",
-    "webpack-cli": "^4.0.0-beta.8"
+    "typescript": "^4.0.2"
   },
   "prettier": {
     "printWidth": 80,

rollup.config.js

@@ -0,0 +1,55 @@
+// @ts-check
+import glob from 'fast-glob'
+import typescript from '@rollup/plugin-typescript'
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import { terser } from 'rollup-plugin-terser'
+import svelte from 'rollup-plugin-svelte'
+import sveltePreprocess from 'svelte-preprocess'
+
+const isDev = process.env.NODE_ENV === 'development'
+
+/**
+ * @param {string} name
+ * @param {string} path
+ *
+ * @returns {import('rollup').RollupOptions}
+ */
+function makeConfig(name, path) {
+  return {
+    input: { [name]: path },
+    output: {
+      dir: './plugins',
+      format: 'iife',
+      globals: {
+        'blessing-skin': 'blessing',
+        react: 'React',
+        'react-dom': 'ReactDOM',
+      },
+      indent: '  ',
+    },
+    external: ['react', 'react-dom', 'blessing-skin'],
+    plugins: [
+      typescript(),
+      svelte({
+        preprocess: sveltePreprocess(),
+      }),
+      resolve({ browser: true }),
+      commonjs(),
+      !isDev && terser(),
+    ],
+  }
+}
+
+export default glob([
+  'plugins/*/assets/**/*.ts',
+  'plugins/*/assets/**/*.tsx',
+  '!plugins/*/assets/**/*.test.ts',
+  '!**/*.d.ts',
+]).then((files) =>
+  files.map((file) => {
+    const name = file.replace('plugins/', '').replace(/\.tsx?$/g, '')
+
+    return makeConfig(name, file)
+  }),
+)

tsconfig.json

@@ -8,15 +8,11 @@
     "baseUrl": ".",
     "paths": {
       "blessing-skin": ["./types"]
-    }
+    },
+    "types": ["svelte"]
   },
   "include": [
     "plugins/*/assets",
     "types.ts"
-  ],
+  ]
-  "ts-node": {
-    "compilerOptions": {
-      "module": "commonjs"
-    }
-  }
 }