migration to vite/playwright

packages/react-test/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "dist/index.js",
   "scripts": {
-    "build": "rollup -c",
+    "build": "vite build",
     "prebuild": "standard . && npm i",
     "prepublishOnly": "npm run build"
   },

packages/react-test/rollup.config.mjs

@@ -1,37 +0,0 @@
-/* eslint-env node */
-import { rimraf } from 'rimraf'
-import babel from '@rollup/plugin-babel'
-import { nodeResolve } from '@rollup/plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
-import replace from '@rollup/plugin-replace'
-
-// remove existing distribution
-// remove existing distribution
-await rimraf('./dist')
-console.info('recreating dist')
-
-export default {
-  input: 'src/index.js',
-  output: {
-    file: 'dist/react-test.js',
-    sourcemap: true
-  },
-  plugins: [
-    replace({
-      preventAssignment: true,
-      'process.env.NODE_ENV': '"production"'
-    }),
-    nodeResolve({
-      extensions: ['.js'],
-      browser: true
-    }),
-    babel({
-      babelHelpers: 'bundled',
-      presets: [['@babel/preset-react', { runtime: 'automatic' }]],
-      exclude: 'node_modules/**'
-    }),
-    commonjs({
-      transformMixedEsModules: true
-    })
-  ]
-}

packages/react-test/src/ReactTest.js

@@ -43,6 +43,11 @@ const ReactTest = ({ svgEdit }) => {
     svgCanvas.setMode('hello_world')
   }
 
-  return <se-button id='hello_world' title='Hello World' src='hello_world.svg' onClick={onClick} />
+  return React.createElement('se-button', {
+    id: 'hello_world',
+    title: 'Hello World',
+    src: 'hello_world.svg',
+    onClick
+  })
 }
 export default ReactTest

packages/react-test/src/index.js

@@ -16,7 +16,7 @@ export default {
       callback () {
         // position the div used by React in the left bar
         document.getElementById('tools_left').append(div)
-        root.render(<ReactTest svgEdit={this} trigger='callback' />)
+        root.render(React.createElement(ReactTest, { svgEdit: this, trigger: 'callback' }))
       }
     }
   }

packages/react-test/vite.config.mjs

@@ -0,0 +1,24 @@
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  define: {
+    'process.env.NODE_ENV': JSON.stringify('production')
+  },
+  esbuild: {
+    jsx: 'automatic',
+    jsxImportSource: 'react',
+    loader: 'jsx',
+    include: /src\/.*\.js$/
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    sourcemap: true,
+    lib: {
+      entry: resolve(__dirname, 'src/index.js'),
+      formats: ['es'],
+      fileName: () => 'react-test.js'
+    }
+  }
+})

packages/svgcanvas/package.json

@@ -51,7 +51,7 @@
         ]
     },
     "scripts": {
-        "build": "rollup -c",
+        "build": "vite build",
         "prebuild": "standard . && npm i",
         "prepublishOnly": "npm run build"
     }

packages/svgcanvas/rollup.config.mjs

@@ -1,38 +0,0 @@
-/* eslint-env node */
-// This rollup script is run by the command:
-// 'npm run build'
-
-import { rimraf } from 'rimraf'
-import babel from '@rollup/plugin-babel'
-import { nodeResolve } from '@rollup/plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
-
-// import progress from 'rollup-plugin-progress';
-import filesize from 'rollup-plugin-filesize'
-
-// remove existing distribution
-await rimraf('./dist')
-console.info('recreating dist')
-
-// config for svgedit core module
-const config = [{
-  input: ['./svgcanvas.js'],
-  output: [
-    {
-      format: 'es',
-      inlineDynamicImports: true,
-      sourcemap: true,
-      file: 'dist/svgcanvas.js'
-    }
-  ],
-  plugins: [
-    nodeResolve({
-      browser: true,
-      preferBuiltins: false
-    }),
-    commonjs(),
-    babel({ babelHelpers: 'bundled', exclude: [/\/core-js\//] }), // exclude core-js to avoid circular dependencies.
-    filesize()
-  ]
-}]
-export default config

packages/svgcanvas/vite.config.mjs

@@ -0,0 +1,20 @@
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    sourcemap: true,
+    lib: {
+      entry: resolve(__dirname, 'svgcanvas.js'),
+      formats: ['es'],
+      fileName: () => 'svgcanvas.js'
+    },
+    rollupOptions: {
+      output: {
+        inlineDynamicImports: true
+      }
+    }
+  }
+})