New canary release (0.1.2)

README.md

@@ -29,6 +29,49 @@ Second, replace pluggable-widgets-tools to hyper-pwt in widget's package.json.
 
 ## Custom build configurations
 
+### Web
+
+Create vite.config.mjs on your pwt root directory.
+
+```javascript
+import { definePWTConfig } from '@repixelcorp/hyper-pwt';
+
+export default definePWTConfig(() => {
+    return {
+      // Your custom configuration in here.
+    };
+});
+```
+
+hyper-pwt uses the [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc) plugin. The settings for this plugin can be changed as follows.
+
+```javascript
+import { definePWTConfig } from '@repixelcorp/hyper-pwt';
+
+export default definePWTConfig(() => {
+    return {
+        reactPluginOptions: {
+            tsDecorators: true,
+        }
+    };
+});
+```
+
+definePWTConfig also supports asynchronous mode. It can be used as follows.
+
+```javascript
+import { definePWTConfig } from '@repixelcorp/hyper-pwt';
+
+export default definePWTConfig(async () => {
+    const promise = await somethingPromise();
+
+    return {
+    };
+});
+```
+
+### Native
+
 TODO
 
 ## Performance compare with Mendix PWT

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repixelcorp/hyper-pwt",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A faster, more modern, superior alternative for Mendix PWT.",
   "repository": {
     "type": "git",
@@ -9,11 +9,21 @@
   "scripts": {
     "build": "rslib build",
     "watch": "rslib build --watch",
-    "start": "pnpm build && node ./dist/index.js",
+    "start": "pnpm build && node ./dist/cli.js",
     "link": "pnpm build && npm link --force"
   },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "bin": {
-    "hyper-pwt": "dist/index.js"
+    "hyper-pwt": "dist/cli.js"
   },
   "keywords": [
     "mendix",
@@ -27,7 +37,8 @@
   "devDependencies": {
     "@rslib/core": "0.12.2",
     "@types/node": "22.17.2",
-    "type-fest": "4.41.0"
+    "type-fest": "4.41.0",
+    "typescript": "^5.9.2"
   },
   "dependencies": {
     "@vitejs/plugin-react-swc": "4.0.1",

rslib.config.ts

@@ -4,14 +4,50 @@ export default defineConfig({
   lib: [
     {
       format: 'cjs',
-      bundle: true
+      bundle: true,
+      dts: true,
+      source: {
+        entry: {
+          cli: 'src/cli.ts'
+        }
+      },
+      output: {
+        filename: {
+          js: '[name].js'
+        }
+      }
+    },
+    {
+      format: 'esm',
+      bundle: true,
+      dts: true,
+      source: {
+        entry: {
+          index: 'src/index.ts'
+        }
+      },
+      output: {
+        filename: {
+          js: '[name].mjs'
+        }
+      }
+    },
+    {
+      format: 'cjs',
+      bundle: true,
+      dts: false,
+      source: {
+        entry: {
+          index: 'src/index.ts'
+        }
+      },
+      output: {
+        filename: {
+          js: '[name].cjs'
+        }
+      }
     }
   ],
-  source: {
-    entry: {
-      index: 'src/cli.ts'
-    }
-  },
   output: {
     minify: {
       js: true,

src/commands/build/web/index.ts

@@ -3,17 +3,18 @@ import path from 'path';
 import { InlineConfig, UserConfig, build as viteBuild } from 'vite';
 import { zip } from 'zip-a-folder';
 
-import { COLOR_ERROR, COLOR_GREEN, DIST_DIRECTORY_NAME, PROJECT_DIRECTORY, WEB_OUTPUT_DIRECTORY } from '../../../constants';
+import { COLOR_ERROR, COLOR_GREEN, DIST_DIRECTORY_NAME, PROJECT_DIRECTORY, VITE_CONFIGURATION_FILENAME, WEB_OUTPUT_DIRECTORY } from '../../../constants';
 import pathIsExists from '../../../utils/pathIsExists';
 import getWidgetVersion from '../../../utils/getWidgetVersion';
 import showMessage from '../../../utils/showMessage';
 import { getEditorConfigDefaultConfig, getEditorPreviewDefaultConfig, getViteDefaultConfig } from '../../../configurations/vite';
 import getWidgetName from '../../../utils/getWidgetName';
 import getWidgetPackageJson from '../../../utils/getWidgetPackageJson';
 import getMendixWidgetDirectory from '../../../utils/getMendixWidgetDirectory';
+import getViteUserConfiguration from '../../../utils/getViteUserConfiguration';
 
 const buildWebCommand = async (isProduction: boolean = false) => {
-  try {
+  // try {
     showMessage('Remove previous builds');
 
     const distDir = path.join(PROJECT_DIRECTORY, DIST_DIRECTORY_NAME);
@@ -33,16 +34,16 @@ const buildWebCommand = async (isProduction: boolean = false) => {
     await fs.mkdir(outputDir);
     await fs.mkdir(WEB_OUTPUT_DIRECTORY, { recursive: true });
 
-    const customViteConfigPath = path.join(PROJECT_DIRECTORY, 'vite.config.ts');
+    const customViteConfigPath = path.join(PROJECT_DIRECTORY, VITE_CONFIGURATION_FILENAME);
     const viteConfigIsExists = await pathIsExists(customViteConfigPath);
     let resultViteConfig: UserConfig;
 
     if (viteConfigIsExists) {
-      const userConfig: UserConfig = await import(customViteConfigPath);
+      const userConfig = await getViteUserConfiguration(customViteConfigPath);
 
-      resultViteConfig = await getViteDefaultConfig(isProduction, userConfig);
+      resultViteConfig = await getViteDefaultConfig(false, userConfig);
     } else {
-      resultViteConfig = await getViteDefaultConfig(isProduction);
+      resultViteConfig = await getViteDefaultConfig(false);
     }
 
     const widgetName = await getWidgetName();
@@ -93,9 +94,9 @@ const buildWebCommand = async (isProduction: boolean = false) => {
     await fs.copyFile(mpkFileDestPath, mendixMpkFileDestPath);
 
     showMessage(`${COLOR_GREEN('Build complete.')}`);
-  } catch (error) {
-    showMessage(`${COLOR_ERROR('Build failed.')}\nError occurred: ${COLOR_ERROR((error as Error).message)}`);
-  }
+  // } catch (error) {
+    // showMessage(`${COLOR_ERROR('Build failed.')}\nError occurred: ${COLOR_ERROR((error as Error).stack)}`);
+  // }
 };
 
 export default buildWebCommand;

src/commands/start/web/index.ts

@@ -1,26 +1,27 @@
 import fs from 'fs/promises';
 import path from 'path';
 import { UserConfig, createServer } from 'vite';
+import { PluginOption } from 'vite';
 
-import { CLI_DIRECTORY, COLOR_ERROR, COLOR_GREEN, PROJECT_DIRECTORY } from "../../../constants";
+import { CLI_DIRECTORY, COLOR_ERROR, COLOR_GREEN, PROJECT_DIRECTORY, VITE_CONFIGURATION_FILENAME } from "../../../constants";
 import showMessage from "../../../utils/showMessage";
 import getViteWatchOutputDirectory from "../../../utils/getViteWatchOutputDirectory";
 import pathIsExists from "../../../utils/pathIsExists";
 import { getViteDefaultConfig } from '../../../configurations/vite';
 import getWidgetName from '../../../utils/getWidgetName';
-import { PluginOption } from 'vite';
+import getViteUserConfiguration from '../../../utils/getViteUserConfiguration';
 
 const startWebCommand = async () => {
   try {
     showMessage('Start widget server');
 
-    const customViteConfigPath = path.join(PROJECT_DIRECTORY, 'vite.config.ts');
+    const customViteConfigPath = path.join(PROJECT_DIRECTORY, VITE_CONFIGURATION_FILENAME);
     const viteConfigIsExists = await pathIsExists(customViteConfigPath);
     let resultViteConfig: UserConfig;
     const widgetName = await getWidgetName();
 
     if (viteConfigIsExists) {
-      const userConfig: UserConfig = await import(customViteConfigPath);
+      const userConfig = await getViteUserConfiguration(customViteConfigPath);
 
       resultViteConfig = await getViteDefaultConfig(false, userConfig);
     } else {

src/configurations/vite/index.ts

@@ -5,6 +5,7 @@ import path from "path";
 import getWidgetName from "../../utils/getWidgetName";
 import { PROJECT_DIRECTORY, WEB_OUTPUT_DIRECTORY } from "../../constants";
 import getViteOutputDirectory from "../../utils/getViteOutputDirectory";
+import { PWTConfig } from "../..";
 
 export const getEditorConfigDefaultConfig = async (isProduction: boolean): Promise<UserConfig> => {
   const widgetName = await getWidgetName();
@@ -64,12 +65,12 @@ export const getEditorPreviewDefaultConfig = async (isProduction: boolean): Prom
   };
 };
 
-export const getViteDefaultConfig = async (isProduction: boolean, userCustomConfig?: UserConfig): Promise<UserConfig> => {
+export const getViteDefaultConfig = async (isProduction: boolean, userCustomConfig?: PWTConfig): Promise<UserConfig> => {
   const widgetName = await getWidgetName();
   const viteOutputDirectory = await getViteOutputDirectory();
 
   return {
-    plugins: [react()],
+    plugins: [react(userCustomConfig?.reactPluginOptions || undefined)],
     define: {
       'process.env': {},
       'process.env.NODE_ENV': isProduction ? '"production"' : '"development"'

src/constants/index.ts

@@ -9,6 +9,8 @@ export const DIST_DIRECTORY_NAME = 'dist';
 
 export const WEB_OUTPUT_DIRECTORY = path.join(PROJECT_DIRECTORY, `/${DIST_DIRECTORY_NAME}/tmp/widgets`);
 
+export const VITE_CONFIGURATION_FILENAME = 'vite.config.mjs';
+
 export const COLOR_NAME = chalk.bold.blueBright;
 
 export const COLOR_ERROR = chalk.bold.red;

src/index.ts

@@ -0,0 +1,13 @@
+import type { UserConfig } from "vite";
+import reactPlugin from "@vitejs/plugin-react-swc";
+
+export type PWTConfig = UserConfig & {
+  reactPluginOptions?: Parameters<typeof reactPlugin>[0];
+};
+
+export type PWTConfigFnPromise = () => Promise<PWTConfig>;
+export type PWTConfigFn = () => PWTConfig | Promise<PWTConfig>;
+
+export function definePWTConfig(config: PWTConfigFn | PWTConfigFnPromise): PWTConfigFn | PWTConfigFnPromise {
+  return config;
+}

src/utils/getViteUserConfiguration.ts

@@ -0,0 +1,17 @@
+import { PWTConfig, PWTConfigFn, PWTConfigFnPromise } from "..";
+
+const getViteUserConfiguration = async (path: string): Promise<PWTConfig> => {
+  const getUserConfig = await import(`file://${path}`);
+  const getUserConfigFn: PWTConfigFn | PWTConfigFnPromise = getUserConfig.default;
+  const userConfig = getUserConfigFn();
+
+  if (userConfig instanceof Promise) {
+    const userConfigValue = await userConfig;
+
+    return userConfigValue;
+  }
+
+  return userConfig;
+};
+
+export default getViteUserConfiguration;

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext"],
+    "module": "preserve",
+    "moduleResolution": "bundler"
+  },
+}