Merge pull request #36 from repixelcorp/feature/migrate-to-rolldown

New canary release (0.3.0)

Author: kentakang

README.md

@@ -4,9 +4,9 @@
 
 A faster, more modern, superior alternative for [Mendix PWT](https://github.com/mendix/widgets-tools).
 
-## How to use?
+## How to migration to hyper-pwt?
 
-It's simple.
+Bascially, hyper-pwt is a drop-in replacement for Mendix PWT.
 
 First, install hyper-pwt from npm.
 
@@ -29,6 +29,12 @@ Second, replace pluggable-widgets-tools to hyper-pwt in widget's package.json.
 }
 ```
 
+### I use custom rollup configuration.
+
+First, proceed with the basic replacement process.
+
+If the widget does not function properly after installing hyper-pwt, you can customize your Vite configuration by referring to the [“Custom build configurations”](#custom-build-configurations) section.
+
 ## Custom build configurations
 
 ### Web

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repixelcorp/hyper-pwt",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A faster, more modern, superior alternative for Mendix PWT.",
   "repository": {
     "type": "git",
@@ -38,17 +38,16 @@
   "devDependencies": {
     "@rslib/core": "0.12.2",
     "@types/node": "22.17.2",
-    "esbuild": "0.25.9",
     "type-fest": "4.41.0",
     "typescript": "5.9.2"
   },
   "dependencies": {
-    "@vitejs/plugin-react-swc": "4.0.1",
+    "@vitejs/plugin-react": "5.0.2",
     "chalk": "5.6.0",
     "commander": "14.0.0",
     "fast-xml-parser": "5.2.5",
     "mendix": "10.24.77222",
-    "vite": "7.1.3",
+    "vite": "npm:rolldown-vite@7.1.5",
     "zip-a-folder": "3.1.9"
   },
   "files": [

pnpm-lock.yaml

@@ -12,7 +12,6 @@ import getWidgetName from '../../../utils/getWidgetName';
 import getViteUserConfiguration from '../../../utils/getViteUserConfiguration';
 import { generateTypesFromFile } from '../../../type-generator';
 import { mendixHotreloadReactPlugin } from '../../../configurations/vite/plugins/mendix-hotreload-react-plugin';
-import { mendixHotreloadReactEsbuildPlugin } from '../../../configurations/vite/plugins/mendix-hotreload-react-esbuild-plugin';
 import { mendixPatchViteClientPlugin } from '../../../configurations/vite/plugins/mendix-patch-vite-client-plugin';
 
 const generateTyping = async () => {
@@ -71,13 +70,6 @@ const startWebCommand = async () => {
           interval: 100
         },
       },
-      optimizeDeps: {
-        esbuildOptions: {
-          plugins: [
-            mendixHotreloadReactEsbuildPlugin(),
-          ],
-        }
-      },
       plugins: [
         ...resultViteConfig.plugins as PluginOption[],
         mendixHotreloadReactPlugin(),

src/commands/start/web/index.ts

@@ -1,5 +1,5 @@
 import { UserConfig } from "vite";
-import react from '@vitejs/plugin-react-swc';
+import react from '@vitejs/plugin-react';
 import path from "path";
 
 import getWidgetName from "../../utils/getWidgetName";
@@ -14,7 +14,7 @@ export const getEditorConfigDefaultConfig = async (isProduction: boolean): Promi
     plugins: [],
     build: {
       outDir: WEB_OUTPUT_DIRECTORY,
-      minify: isProduction ? 'esbuild' : false,
+      minify: isProduction ? true : false,
       emptyOutDir: false,
       sourcemap: isProduction ? false : true,
       lib: {
@@ -33,14 +33,16 @@ export const getEditorPreviewDefaultConfig = async (isProduction: boolean): Prom
   const widgetName = await getWidgetName();
 
   return {
-    plugins: [react()],
+    plugins: [react({
+      jsxRuntime: 'classic'
+    })],
     define: {
       'process.env': {},
       'process.env.NODE_ENV': '"production"'
     },
     build: {
       outDir: WEB_OUTPUT_DIRECTORY,
-      minify: isProduction ? 'esbuild' : false,
+      minify: isProduction ? true : false,
       emptyOutDir: false,
       sourcemap: isProduction ? false : true,
       lib: {
@@ -51,8 +53,8 @@ export const getEditorPreviewDefaultConfig = async (isProduction: boolean): Prom
         },
         formats: ['umd']
       },
-      rollupOptions: {
-        external: ['react', 'react-dom', 'react-dom/client'],
+      rolldownOptions: {
+        external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime', 'react/jsx-dev-runtime'],
         output: {
           globals: {
             react: 'React',
@@ -70,15 +72,20 @@ export const getViteDefaultConfig = async (isProduction: boolean, userCustomConf
   const viteOutputDirectory = await getViteOutputDirectory();
 
   return {
-    plugins: [react(userCustomConfig?.reactPluginOptions || undefined)],
+    plugins: [
+      react({
+        ...userCustomConfig?.reactPluginOptions || {},
+        jsxRuntime: 'classic'
+      })
+    ],
     define: {
       'process.env': {},
       'process.env.NODE_ENV': isProduction ? '"production"' : '"development"'
     },
     build: {
       outDir: viteOutputDirectory,
-      minify: isProduction ? 'esbuild' : false,
-      cssMinify: isProduction ? 'esbuild' : false,
+      minify: isProduction ? true : false,
+      cssMinify: isProduction ? true : false,
       sourcemap: isProduction ? false : true,
       lib: {
         formats: isProduction ? ['umd'] : ['es', 'umd'],
@@ -97,8 +104,8 @@ export const getViteDefaultConfig = async (isProduction: boolean, userCustomConf
         },
         cssFileName: widgetName
       },
-      rollupOptions: {
-        external: ['react', 'react-dom', 'react-dom/client'],
+      rolldownOptions: {
+        external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime', 'react/jsx-dev-runtime'],
         output: {
           globals: {
             react: 'React',

src/configurations/vite/index.ts

@@ -1,5 +1,5 @@
 import type { UserConfig } from "vite";
-import reactPlugin from "@vitejs/plugin-react-swc";
+import reactPlugin from "@vitejs/plugin-react";
 
 export type PWTConfig = UserConfig & {
   reactPluginOptions?: Parameters<typeof reactPlugin>[0];

src/configurations/vite/plugins/mendix-hotreload-react-esbuild-plugin.ts

@@ -6,6 +6,7 @@
     "esModuleInterop": true,
     "lib": ["ESNext"],
     "module": "preserve",
-    "moduleResolution": "bundler"
+    "moduleResolution": "bundler",
+    "target": "esnext"
   },
 }