From fe3dcec171fb4e423f3d80b58ddd0a09947abf9a Mon Sep 17 00:00:00 2001 From: Oliver Flint Date: Mon, 30 Mar 2026 13:38:49 +0100 Subject: [PATCH 1/3] updated react template to include additional dev workflow scripts see #15 for further info --- generators/app/templates/react/README.md | 42 +++++++++++++----- generators/app/templates/react/package.json | 6 ++- generators/app/templates/react/vite.config.ts | 43 ++++++++++--------- 3 files changed, 59 insertions(+), 32 deletions(-) diff --git a/generators/app/templates/react/README.md b/generators/app/templates/react/README.md index 373e9c0..0e889cc 100644 --- a/generators/app/templates/react/README.md +++ b/generators/app/templates/react/README.md @@ -36,24 +36,44 @@ npm install ## Development -Start development server with HMR: +**Build the tool:** ```bash -npm run dev +npm run build ``` -Build the tool: +**Dev build with sourcemaps (watch mode):** ```bash -npm run build +npm run dev-watch +``` + +**Validate tool package:** + +```bash +npm run validate ``` -Preview production build: +**Shrinkwrap package:** ```bash -npm run preview +npm run finalize-package ``` +or; + +```bash +npm shrinkwrap +``` + +**Publish new version:** + +```bash +npm run publish-package +``` + +_Further tool development documentation is available @ https://docs.powerplatformtoolbox.com/tool-development_ + ## Usage in ToolBox 1. Build the tool using `npm run build` @@ -76,9 +96,9 @@ console.log(context.accessToken); ```typescript await window.toolboxAPI.showNotification({ - title: 'Success', - body: 'Operation completed', - type: 'success' + title: 'Success', + body: 'Operation completed', + type: 'success', }); ``` @@ -86,8 +106,8 @@ await window.toolboxAPI.showNotification({ ```typescript window.toolboxAPI.onToolboxEvent((event, payload) => { - console.log('Event:', payload.event); - console.log('Data:', payload.data); + console.log('Event:', payload.event); + console.log('Data:', payload.data); }); ``` diff --git a/generators/app/templates/react/package.json b/generators/app/templates/react/package.json index 774ab17..e19b6a7 100644 --- a/generators/app/templates/react/package.json +++ b/generators/app/templates/react/package.json @@ -13,8 +13,12 @@ "build": "tsc && vite build", "dev": "vite", "watch": "vite build --watch", + "dev-watch": "vite build --mode development --watch", "preview": "vite preview", - "finalize-package": "npm shrinkwrap" + "finalize-package": "npm shrinkwrap", + "validate": "pptb-validate", + "version-stable": "npm version patch --no-git-tag-version", + "publish-package": "npm run build && npm run version-stable && npm publish --access public" }, "dependencies": { "react": "^18.3.1", diff --git a/generators/app/templates/react/vite.config.ts b/generators/app/templates/react/vite.config.ts index caebc51..10b881d 100644 --- a/generators/app/templates/react/vite.config.ts +++ b/generators/app/templates/react/vite.config.ts @@ -18,46 +18,49 @@ function fixHtmlForPPTB(): Plugin { html = html.replace(/\s*crossorigin/g, ''); // Clean up extra spaces around attributes html = html.replace(/\s+>/g, '>'); - + // Move script tags from head to end of body // IIFE executes immediately, so DOM must be ready const scriptRegex = /(]*src="[^"]*"[^>]*><\/script>)/g; const scripts: string[] = []; - + // Extract all script tags html = html.replace(scriptRegex, (match) => { scripts.push(match); return ''; // Remove from current position }); - + // Insert scripts before closing body tag if (scripts.length > 0) { const scriptsHtml = '\n ' + scripts.join('\n '); html = html.replace('', scriptsHtml + '\n'); } - + return html; }, }; } // https://vitejs.dev/config/ -export default defineConfig({ - plugins: [react(), fixHtmlForPPTB()], - base: './', - build: { - outDir: 'dist', - assetsDir: 'assets', - rollupOptions: { - output: { - // Use IIFE format for compatibility with iframe srcdoc loading - // ES modules can have issues when loaded via file:// URLs in iframes - format: 'iife', - // Bundle everything into a single file to avoid module loading issues - inlineDynamicImports: true, - // Disable chunking since we're bundling everything - manualChunks: undefined, +export default defineConfig((configEnv) => { + return { + plugins: [react(), fixHtmlForPPTB()], + base: './', + build: { + outDir: 'dist', + assetsDir: 'assets', + sourcemap: configEnv.mode === 'development', + rollupOptions: { + output: { + // Use IIFE format for compatibility with iframe srcdoc loading + // ES modules can have issues when loaded via file:// URLs in iframes + format: 'iife', + // Bundle everything into a single file to avoid module loading issues + inlineDynamicImports: true, + // Disable chunking since we're bundling everything + manualChunks: undefined, + }, }, }, - }, + }; }); From 3798e986db87232dffca9d15e30fe9b9ecd76bcf Mon Sep 17 00:00:00 2001 From: Oliver Flint Date: Mon, 30 Mar 2026 16:15:46 +0100 Subject: [PATCH 2/3] updated reactant, reactfluent, reactmui, svelte, and vue templates to include additional dev workflow scripts see #15 for further info --- generators/app/templates/reactant/README.md | 42 ++++++++--- .../app/templates/reactant/package.json | 72 +++++++++--------- .../app/templates/reactant/vite.config.ts | 43 ++++++----- .../app/templates/reactfluent/README.md | 40 ++++++---- .../app/templates/reactfluent/package.json | 74 ++++++++++--------- .../app/templates/reactfluent/vite.config.ts | 43 ++++++----- generators/app/templates/reactmui/README.md | 40 ++++++---- .../app/templates/reactmui/package.json | 6 +- .../app/templates/reactmui/vite.config.ts | 43 ++++++----- generators/app/templates/svelte/README.md | 38 ++++++---- generators/app/templates/svelte/package.json | 70 +++++++++--------- .../app/templates/svelte/vite.config.js | 43 ++++++----- generators/app/templates/vue/README.md | 40 ++++++---- generators/app/templates/vue/package.json | 67 +++++++++-------- generators/app/templates/vue/vite.config.ts | 43 ++++++----- 15 files changed, 401 insertions(+), 303 deletions(-) diff --git a/generators/app/templates/reactant/README.md b/generators/app/templates/reactant/README.md index 373e9c0..0e889cc 100644 --- a/generators/app/templates/reactant/README.md +++ b/generators/app/templates/reactant/README.md @@ -36,24 +36,44 @@ npm install ## Development -Start development server with HMR: +**Build the tool:** ```bash -npm run dev +npm run build ``` -Build the tool: +**Dev build with sourcemaps (watch mode):** ```bash -npm run build +npm run dev-watch +``` + +**Validate tool package:** + +```bash +npm run validate ``` -Preview production build: +**Shrinkwrap package:** ```bash -npm run preview +npm run finalize-package ``` +or; + +```bash +npm shrinkwrap +``` + +**Publish new version:** + +```bash +npm run publish-package +``` + +_Further tool development documentation is available @ https://docs.powerplatformtoolbox.com/tool-development_ + ## Usage in ToolBox 1. Build the tool using `npm run build` @@ -76,9 +96,9 @@ console.log(context.accessToken); ```typescript await window.toolboxAPI.showNotification({ - title: 'Success', - body: 'Operation completed', - type: 'success' + title: 'Success', + body: 'Operation completed', + type: 'success', }); ``` @@ -86,8 +106,8 @@ await window.toolboxAPI.showNotification({ ```typescript window.toolboxAPI.onToolboxEvent((event, payload) => { - console.log('Event:', payload.event); - console.log('Data:', payload.data); + console.log('Event:', payload.event); + console.log('Data:', payload.data); }); ``` diff --git a/generators/app/templates/reactant/package.json b/generators/app/templates/reactant/package.json index 509551c..2abf0ec 100644 --- a/generators/app/templates/reactant/package.json +++ b/generators/app/templates/reactant/package.json @@ -1,36 +1,40 @@ { - "name": "<%= name %>", - "version": "0.1.0", - "displayName": "<%= displayName %>", - "description": "<%= description %>", - "main": "index.html", - "author": "Power Platform ToolBox", - "license": "MIT", - "engines": { - "node": ">=18.0.0" - }, - "scripts": { - "build": "tsc && vite build", - "dev": "vite", - "watch": "vite build --watch", - "preview": "vite preview", - "finalize-package": "npm shrinkwrap" - }, - "dependencies": { - "antd": "^6.0.0", - "react": "^18.3.1", - "react-dom": "^18.3.1" - }, - "devDependencies": { - "@pptb/types": "^1.2.0", - "@types/react": "^18.3.12", - "@types/react-dom": "^18.3.1", - "@vitejs/plugin-react": "^4.3.4", - "typescript": "^5.6.3", - "vite": "^7.1.11" - }, - "files": [ - "dist", - "npm-shrinkwrap.json" - ] + "name": "<%= name %>", + "version": "0.1.0", + "displayName": "<%= displayName %>", + "description": "<%= description %>", + "main": "index.html", + "author": "Power Platform ToolBox", + "license": "MIT", + "engines": { + "node": ">=18.0.0" + }, + "scripts": { + "build": "tsc && vite build", + "dev": "vite", + "watch": "vite build --watch", + "dev-watch": "vite build --mode development --watch", + "preview": "vite preview", + "finalize-package": "npm shrinkwrap", + "validate": "pptb-validate", + "version-stable": "npm version patch --no-git-tag-version", + "publish-package": "npm run build && npm run version-stable && npm publish --access public" + }, + "dependencies": { + "antd": "^6.0.0", + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "devDependencies": { + "@pptb/types": "^1.2.0", + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", + "@vitejs/plugin-react": "^4.3.4", + "typescript": "^5.6.3", + "vite": "^7.1.11" + }, + "files": [ + "dist", + "npm-shrinkwrap.json" + ] } diff --git a/generators/app/templates/reactant/vite.config.ts b/generators/app/templates/reactant/vite.config.ts index caebc51..10b881d 100644 --- a/generators/app/templates/reactant/vite.config.ts +++ b/generators/app/templates/reactant/vite.config.ts @@ -18,46 +18,49 @@ function fixHtmlForPPTB(): Plugin { html = html.replace(/\s*crossorigin/g, ''); // Clean up extra spaces around attributes html = html.replace(/\s+>/g, '>'); - + // Move script tags from head to end of body // IIFE executes immediately, so DOM must be ready const scriptRegex = /(]*src="[^"]*"[^>]*><\/script>)/g; const scripts: string[] = []; - + // Extract all script tags html = html.replace(scriptRegex, (match) => { scripts.push(match); return ''; // Remove from current position }); - + // Insert scripts before closing body tag if (scripts.length > 0) { const scriptsHtml = '\n ' + scripts.join('\n '); html = html.replace('', scriptsHtml + '\n'); } - + return html; }, }; } // https://vitejs.dev/config/ -export default defineConfig({ - plugins: [react(), fixHtmlForPPTB()], - base: './', - build: { - outDir: 'dist', - assetsDir: 'assets', - rollupOptions: { - output: { - // Use IIFE format for compatibility with iframe srcdoc loading - // ES modules can have issues when loaded via file:// URLs in iframes - format: 'iife', - // Bundle everything into a single file to avoid module loading issues - inlineDynamicImports: true, - // Disable chunking since we're bundling everything - manualChunks: undefined, +export default defineConfig((configEnv) => { + return { + plugins: [react(), fixHtmlForPPTB()], + base: './', + build: { + outDir: 'dist', + assetsDir: 'assets', + sourcemap: configEnv.mode === 'development', + rollupOptions: { + output: { + // Use IIFE format for compatibility with iframe srcdoc loading + // ES modules can have issues when loaded via file:// URLs in iframes + format: 'iife', + // Bundle everything into a single file to avoid module loading issues + inlineDynamicImports: true, + // Disable chunking since we're bundling everything + manualChunks: undefined, + }, }, }, - }, + }; }); diff --git a/generators/app/templates/reactfluent/README.md b/generators/app/templates/reactfluent/README.md index 373e9c0..cf61a7b 100644 --- a/generators/app/templates/reactfluent/README.md +++ b/generators/app/templates/reactfluent/README.md @@ -28,32 +28,44 @@ ## Installation -Install dependencies: +**Build the tool:** ```bash -npm install +npm run build ``` -## Development +**Dev build with sourcemaps (watch mode):** -Start development server with HMR: +```bash +npm run dev-watch +``` + +**Validate tool package:** ```bash -npm run dev +npm run validate ``` -Build the tool: +**Shrinkwrap package:** ```bash -npm run build +npm run finalize-package ``` -Preview production build: +or; ```bash -npm run preview +npm shrinkwrap ``` +**Publish new version:** + +```bash +npm run publish-package +``` + +_Further tool development documentation is available @ https://docs.powerplatformtoolbox.com/tool-development_ + ## Usage in ToolBox 1. Build the tool using `npm run build` @@ -76,9 +88,9 @@ console.log(context.accessToken); ```typescript await window.toolboxAPI.showNotification({ - title: 'Success', - body: 'Operation completed', - type: 'success' + title: 'Success', + body: 'Operation completed', + type: 'success', }); ``` @@ -86,8 +98,8 @@ await window.toolboxAPI.showNotification({ ```typescript window.toolboxAPI.onToolboxEvent((event, payload) => { - console.log('Event:', payload.event); - console.log('Data:', payload.data); + console.log('Event:', payload.event); + console.log('Data:', payload.data); }); ``` diff --git a/generators/app/templates/reactfluent/package.json b/generators/app/templates/reactfluent/package.json index d4d076d..717e482 100644 --- a/generators/app/templates/reactfluent/package.json +++ b/generators/app/templates/reactfluent/package.json @@ -1,37 +1,41 @@ { - "name": "<%= name %>", - "version": "0.1.0", - "displayName": "<%= displayName %>", - "description": "<%= description %>", - "main": "index.html", - "author": "Power Platform ToolBox", - "license": "MIT", - "engines": { - "node": ">=18.0.0" - }, - "scripts": { - "build": "tsc && vite build", - "dev": "vite", - "watch": "vite build --watch", - "preview": "vite preview", - "finalize-package": "npm shrinkwrap" - }, - "dependencies": { - "@fluentui/react-components": "^9.72.7", - "@fluentui/react-icons": "^2.0.314", - "react": "^18.3.1", - "react-dom": "^18.3.1" - }, - "devDependencies": { - "@pptb/types": "^1.2.0", - "@types/react": "^18.3.12", - "@types/react-dom": "^18.3.1", - "@vitejs/plugin-react": "^4.3.4", - "typescript": "^5.6.3", - "vite": "^7.1.11" - }, - "files": [ - "dist", - "npm-shrinkwrap.json" - ] + "name": "<%= name %>", + "version": "0.1.0", + "displayName": "<%= displayName %>", + "description": "<%= description %>", + "main": "index.html", + "author": "Power Platform ToolBox", + "license": "MIT", + "engines": { + "node": ">=18.0.0" + }, + "scripts": { + "build": "tsc && vite build", + "dev": "vite", + "watch": "vite build --watch", + "dev-watch": "vite build --mode development --watch", + "preview": "vite preview", + "finalize-package": "npm shrinkwrap", + "validate": "pptb-validate", + "version-stable": "npm version patch --no-git-tag-version", + "publish-package": "npm run build && npm run version-stable && npm publish --access public" + }, + "dependencies": { + "@fluentui/react-components": "^9.72.7", + "@fluentui/react-icons": "^2.0.314", + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "devDependencies": { + "@pptb/types": "^1.2.0", + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", + "@vitejs/plugin-react": "^4.3.4", + "typescript": "^5.6.3", + "vite": "^7.1.11" + }, + "files": [ + "dist", + "npm-shrinkwrap.json" + ] } diff --git a/generators/app/templates/reactfluent/vite.config.ts b/generators/app/templates/reactfluent/vite.config.ts index caebc51..10b881d 100644 --- a/generators/app/templates/reactfluent/vite.config.ts +++ b/generators/app/templates/reactfluent/vite.config.ts @@ -18,46 +18,49 @@ function fixHtmlForPPTB(): Plugin { html = html.replace(/\s*crossorigin/g, ''); // Clean up extra spaces around attributes html = html.replace(/\s+>/g, '>'); - + // Move script tags from head to end of body // IIFE executes immediately, so DOM must be ready const scriptRegex = /(]*src="[^"]*"[^>]*><\/script>)/g; const scripts: string[] = []; - + // Extract all script tags html = html.replace(scriptRegex, (match) => { scripts.push(match); return ''; // Remove from current position }); - + // Insert scripts before closing body tag if (scripts.length > 0) { const scriptsHtml = '\n ' + scripts.join('\n '); html = html.replace('', scriptsHtml + '\n'); } - + return html; }, }; } // https://vitejs.dev/config/ -export default defineConfig({ - plugins: [react(), fixHtmlForPPTB()], - base: './', - build: { - outDir: 'dist', - assetsDir: 'assets', - rollupOptions: { - output: { - // Use IIFE format for compatibility with iframe srcdoc loading - // ES modules can have issues when loaded via file:// URLs in iframes - format: 'iife', - // Bundle everything into a single file to avoid module loading issues - inlineDynamicImports: true, - // Disable chunking since we're bundling everything - manualChunks: undefined, +export default defineConfig((configEnv) => { + return { + plugins: [react(), fixHtmlForPPTB()], + base: './', + build: { + outDir: 'dist', + assetsDir: 'assets', + sourcemap: configEnv.mode === 'development', + rollupOptions: { + output: { + // Use IIFE format for compatibility with iframe srcdoc loading + // ES modules can have issues when loaded via file:// URLs in iframes + format: 'iife', + // Bundle everything into a single file to avoid module loading issues + inlineDynamicImports: true, + // Disable chunking since we're bundling everything + manualChunks: undefined, + }, }, }, - }, + }; }); diff --git a/generators/app/templates/reactmui/README.md b/generators/app/templates/reactmui/README.md index 373e9c0..cf61a7b 100644 --- a/generators/app/templates/reactmui/README.md +++ b/generators/app/templates/reactmui/README.md @@ -28,32 +28,44 @@ ## Installation -Install dependencies: +**Build the tool:** ```bash -npm install +npm run build ``` -## Development +**Dev build with sourcemaps (watch mode):** -Start development server with HMR: +```bash +npm run dev-watch +``` + +**Validate tool package:** ```bash -npm run dev +npm run validate ``` -Build the tool: +**Shrinkwrap package:** ```bash -npm run build +npm run finalize-package ``` -Preview production build: +or; ```bash -npm run preview +npm shrinkwrap ``` +**Publish new version:** + +```bash +npm run publish-package +``` + +_Further tool development documentation is available @ https://docs.powerplatformtoolbox.com/tool-development_ + ## Usage in ToolBox 1. Build the tool using `npm run build` @@ -76,9 +88,9 @@ console.log(context.accessToken); ```typescript await window.toolboxAPI.showNotification({ - title: 'Success', - body: 'Operation completed', - type: 'success' + title: 'Success', + body: 'Operation completed', + type: 'success', }); ``` @@ -86,8 +98,8 @@ await window.toolboxAPI.showNotification({ ```typescript window.toolboxAPI.onToolboxEvent((event, payload) => { - console.log('Event:', payload.event); - console.log('Data:', payload.data); + console.log('Event:', payload.event); + console.log('Data:', payload.data); }); ``` diff --git a/generators/app/templates/reactmui/package.json b/generators/app/templates/reactmui/package.json index 260be72..0d3e6fd 100644 --- a/generators/app/templates/reactmui/package.json +++ b/generators/app/templates/reactmui/package.json @@ -13,8 +13,12 @@ "build": "tsc && vite build", "dev": "vite", "watch": "vite build --watch", + "dev-watch": "vite build --mode development --watch", "preview": "vite preview", - "finalize-package": "npm shrinkwrap" + "finalize-package": "npm shrinkwrap", + "validate": "pptb-validate", + "version-stable": "npm version patch --no-git-tag-version", + "publish-package": "npm run build && npm run version-stable && npm publish --access public" }, "dependencies": { "@emotion/react": "^11.14.0", diff --git a/generators/app/templates/reactmui/vite.config.ts b/generators/app/templates/reactmui/vite.config.ts index caebc51..10b881d 100644 --- a/generators/app/templates/reactmui/vite.config.ts +++ b/generators/app/templates/reactmui/vite.config.ts @@ -18,46 +18,49 @@ function fixHtmlForPPTB(): Plugin { html = html.replace(/\s*crossorigin/g, ''); // Clean up extra spaces around attributes html = html.replace(/\s+>/g, '>'); - + // Move script tags from head to end of body // IIFE executes immediately, so DOM must be ready const scriptRegex = /(]*src="[^"]*"[^>]*><\/script>)/g; const scripts: string[] = []; - + // Extract all script tags html = html.replace(scriptRegex, (match) => { scripts.push(match); return ''; // Remove from current position }); - + // Insert scripts before closing body tag if (scripts.length > 0) { const scriptsHtml = '\n ' + scripts.join('\n '); html = html.replace('', scriptsHtml + '\n'); } - + return html; }, }; } // https://vitejs.dev/config/ -export default defineConfig({ - plugins: [react(), fixHtmlForPPTB()], - base: './', - build: { - outDir: 'dist', - assetsDir: 'assets', - rollupOptions: { - output: { - // Use IIFE format for compatibility with iframe srcdoc loading - // ES modules can have issues when loaded via file:// URLs in iframes - format: 'iife', - // Bundle everything into a single file to avoid module loading issues - inlineDynamicImports: true, - // Disable chunking since we're bundling everything - manualChunks: undefined, +export default defineConfig((configEnv) => { + return { + plugins: [react(), fixHtmlForPPTB()], + base: './', + build: { + outDir: 'dist', + assetsDir: 'assets', + sourcemap: configEnv.mode === 'development', + rollupOptions: { + output: { + // Use IIFE format for compatibility with iframe srcdoc loading + // ES modules can have issues when loaded via file:// URLs in iframes + format: 'iife', + // Bundle everything into a single file to avoid module loading issues + inlineDynamicImports: true, + // Disable chunking since we're bundling everything + manualChunks: undefined, + }, }, }, - }, + }; }); diff --git a/generators/app/templates/svelte/README.md b/generators/app/templates/svelte/README.md index dec36b9..1d9b234 100644 --- a/generators/app/templates/svelte/README.md +++ b/generators/app/templates/svelte/README.md @@ -30,38 +30,44 @@ ## Installation -Install dependencies: +**Build the tool:** ```bash -npm install +npm run build ``` -## Development +**Dev build with sourcemaps (watch mode):** + +```bash +npm run dev-watch +``` -Start development server with HMR: +**Validate tool package:** ```bash -npm run dev +npm run validate ``` -Build the tool: +**Shrinkwrap package:** ```bash -npm run build +npm run finalize-package ``` -Preview production build: +or; ```bash -npm run preview +npm shrinkwrap ``` -Check types: +**Publish new version:** ```bash -npm run check +npm run publish-package ``` +_Further tool development documentation is available @ https://docs.powerplatformtoolbox.com/tool-development_ + ## Usage in ToolBox 1. Build the tool using `npm run build` @@ -84,9 +90,9 @@ console.log(context.accessToken); ```typescript await window.toolboxAPI.showNotification({ - title: 'Success', - body: 'Operation completed', - type: 'success' + title: 'Success', + body: 'Operation completed', + type: 'success', }); ``` @@ -94,8 +100,8 @@ await window.toolboxAPI.showNotification({ ```typescript window.toolboxAPI.onToolboxEvent((event, payload) => { - console.log('Event:', payload.event); - console.log('Data:', payload.data); + console.log('Event:', payload.event); + console.log('Data:', payload.data); }); ``` diff --git a/generators/app/templates/svelte/package.json b/generators/app/templates/svelte/package.json index 91b48de..95660e0 100644 --- a/generators/app/templates/svelte/package.json +++ b/generators/app/templates/svelte/package.json @@ -1,35 +1,39 @@ { - "name": "<%= name %>", - "version": "0.1.0", - "displayName": "<%= displayName %>", - "description": "<%= description %>", - "main": "index.html", - "author": "Power Platform ToolBox", - "license": "MIT", - "type": "module", - "engines": { - "node": ">=18.0.0" - }, - "scripts": { - "build": "vite build", - "dev": "vite", - "preview": "vite preview", - "check": "svelte-check --tsconfig ./tsconfig.json", - "finalize-package": "npm shrinkwrap" - }, - "dependencies": { - "svelte": "^5.14.9" - }, - "devDependencies": { - "@pptb/types": "^1.2.0", - "@sveltejs/vite-plugin-svelte": "^4.0.3", - "@tsconfig/svelte": "^5.0.4", - "svelte-check": "^4.1.3", - "typescript": "^5.6.3", - "vite": "^5.4.11" - }, - "files": [ - "dist", - "npm-shrinkwrap.json" - ] + "name": "<%= name %>", + "version": "0.1.0", + "displayName": "<%= displayName %>", + "description": "<%= description %>", + "main": "index.html", + "author": "Power Platform ToolBox", + "license": "MIT", + "type": "module", + "engines": { + "node": ">=18.0.0" + }, + "scripts": { + "build": "tsc && vite build", + "dev": "vite", + "watch": "vite build --watch", + "dev-watch": "vite build --mode development --watch", + "preview": "vite preview", + "finalize-package": "npm shrinkwrap", + "validate": "pptb-validate", + "version-stable": "npm version patch --no-git-tag-version", + "publish-package": "npm run build && npm run version-stable && npm publish --access public" + }, + "dependencies": { + "svelte": "^5.14.9" + }, + "devDependencies": { + "@pptb/types": "^1.2.0", + "@sveltejs/vite-plugin-svelte": "^4.0.3", + "@tsconfig/svelte": "^5.0.4", + "svelte-check": "^4.1.3", + "typescript": "^5.6.3", + "vite": "^5.4.11" + }, + "files": [ + "dist", + "npm-shrinkwrap.json" + ] } diff --git a/generators/app/templates/svelte/vite.config.js b/generators/app/templates/svelte/vite.config.js index ddc2e6c..efd4e5c 100644 --- a/generators/app/templates/svelte/vite.config.js +++ b/generators/app/templates/svelte/vite.config.js @@ -17,46 +17,49 @@ function fixHtmlForPPTB() { html = html.replace(/\s*crossorigin/g, ''); // Clean up extra spaces around attributes html = html.replace(/\s+>/g, '>'); - + // Move script tags from head to end of body // IIFE executes immediately, so DOM must be ready const scriptRegex = /(]*src="[^"]*"[^>]*><\/script>)/g; const scripts = []; - + // Extract all script tags html = html.replace(scriptRegex, (match) => { scripts.push(match); return ''; // Remove from current position }); - + // Insert scripts before closing body tag if (scripts.length > 0) { const scriptsHtml = '\n ' + scripts.join('\n '); html = html.replace('', scriptsHtml + '\n'); } - + return html; }, }; } // https://vitejs.dev/config/ -export default defineConfig({ - plugins: [svelte(), fixHtmlForPPTB()], - base: './', - build: { - outDir: 'dist', - assetsDir: 'assets', - rollupOptions: { - output: { - // Use IIFE format for compatibility with iframe srcdoc loading - // ES modules can have issues when loaded via file:// URLs in iframes - format: 'iife', - // Bundle everything into a single file to avoid module loading issues - inlineDynamicImports: true, - // Disable chunking since we're bundling everything - manualChunks: undefined, +export default defineConfig((configEnv) => { + return { + plugins: [svelte(), fixHtmlForPPTB()], + base: './', + build: { + outDir: 'dist', + assetsDir: 'assets', + sourcemap: configEnv.mode === 'development', + rollupOptions: { + output: { + // Use IIFE format for compatibility with iframe srcdoc loading + // ES modules can have issues when loaded via file:// URLs in iframes + format: 'iife', + // Bundle everything into a single file to avoid module loading issues + inlineDynamicImports: true, + // Disable chunking since we're bundling everything + manualChunks: undefined, + }, }, }, - }, + }; }); diff --git a/generators/app/templates/vue/README.md b/generators/app/templates/vue/README.md index 5d7461d..4c995c6 100644 --- a/generators/app/templates/vue/README.md +++ b/generators/app/templates/vue/README.md @@ -29,32 +29,44 @@ ## Installation -Install dependencies: +**Build the tool:** ```bash -npm install +npm run build ``` -## Development +**Dev build with sourcemaps (watch mode):** -Start development server with HMR: +```bash +npm run dev-watch +``` + +**Validate tool package:** ```bash -npm run dev +npm run validate ``` -Build the tool: +**Shrinkwrap package:** ```bash -npm run build +npm run finalize-package ``` -Preview production build: +or; ```bash -npm run preview +npm shrinkwrap ``` +**Publish new version:** + +```bash +npm run publish-package +``` + +_Further tool development documentation is available @ https://docs.powerplatformtoolbox.com/tool-development_ + ## Usage in ToolBox 1. Build the tool using `npm run build` @@ -77,9 +89,9 @@ console.log(context.accessToken); ```typescript await window.toolboxAPI.showNotification({ - title: 'Success', - body: 'Operation completed', - type: 'success' + title: 'Success', + body: 'Operation completed', + type: 'success', }); ``` @@ -87,8 +99,8 @@ await window.toolboxAPI.showNotification({ ```typescript window.toolboxAPI.onToolboxEvent((event, payload) => { - console.log('Event:', payload.event); - console.log('Data:', payload.data); + console.log('Event:', payload.event); + console.log('Data:', payload.data); }); ``` diff --git a/generators/app/templates/vue/package.json b/generators/app/templates/vue/package.json index a8671fe..d64434c 100644 --- a/generators/app/templates/vue/package.json +++ b/generators/app/templates/vue/package.json @@ -1,33 +1,38 @@ { - "name": "<%= name %>", - "version": "0.1.0", - "displayName": "<%= displayName %>", - "description": "<%= description %>", - "main": "index.html", - "author": "Power Platform ToolBox", - "license": "MIT", - "type": "module", - "engines": { - "node": ">=18.0.0" - }, - "scripts": { - "build": "vue-tsc && vite build", - "dev": "vite", - "preview": "vite preview", - "finalize-package": "npm shrinkwrap" - }, - "dependencies": { - "vue": "^3.5.13" - }, - "devDependencies": { - "@pptb/types": "^1.2.0", - "@vitejs/plugin-vue": "^5.2.1", - "typescript": "^5.6.3", - "vite": "^5.4.11", - "vue-tsc": "^2.2.0" - }, - "files": [ - "dist", - "npm-shrinkwrap.json" - ] + "name": "<%= name %>", + "version": "0.1.0", + "displayName": "<%= displayName %>", + "description": "<%= description %>", + "main": "index.html", + "author": "Power Platform ToolBox", + "license": "MIT", + "type": "module", + "engines": { + "node": ">=18.0.0" + }, + "scripts": { + "build": "tsc && vite build", + "dev": "vite", + "watch": "vite build --watch", + "dev-watch": "vite build --mode development --watch", + "preview": "vite preview", + "finalize-package": "npm shrinkwrap", + "validate": "pptb-validate", + "version-stable": "npm version patch --no-git-tag-version", + "publish-package": "npm run build && npm run version-stable && npm publish --access public" + }, + "dependencies": { + "vue": "^3.5.13" + }, + "devDependencies": { + "@pptb/types": "^1.2.0", + "@vitejs/plugin-vue": "^5.2.1", + "typescript": "^5.6.3", + "vite": "^5.4.11", + "vue-tsc": "^2.2.0" + }, + "files": [ + "dist", + "npm-shrinkwrap.json" + ] } diff --git a/generators/app/templates/vue/vite.config.ts b/generators/app/templates/vue/vite.config.ts index faab69d..d588245 100644 --- a/generators/app/templates/vue/vite.config.ts +++ b/generators/app/templates/vue/vite.config.ts @@ -18,46 +18,49 @@ function fixHtmlForPPTB(): Plugin { html = html.replace(/\s*crossorigin/g, ''); // Clean up extra spaces around attributes html = html.replace(/\s+>/g, '>'); - + // Move script tags from head to end of body // IIFE executes immediately, so DOM must be ready const scriptRegex = /(]*src="[^"]*"[^>]*><\/script>)/g; const scripts: string[] = []; - + // Extract all script tags html = html.replace(scriptRegex, (match) => { scripts.push(match); return ''; // Remove from current position }); - + // Insert scripts before closing body tag if (scripts.length > 0) { const scriptsHtml = '\n ' + scripts.join('\n '); html = html.replace('', scriptsHtml + '\n'); } - + return html; }, }; } // https://vitejs.dev/config/ -export default defineConfig({ - plugins: [vue(), fixHtmlForPPTB()], - base: './', - build: { - outDir: 'dist', - assetsDir: 'assets', - rollupOptions: { - output: { - // Use IIFE format for compatibility with iframe srcdoc loading - // ES modules can have issues when loaded via file:// URLs in iframes - format: 'iife', - // Bundle everything into a single file to avoid module loading issues - inlineDynamicImports: true, - // Disable chunking since we're bundling everything - manualChunks: undefined, +export default defineConfig((configEnv) => { + return { + plugins: [vue(), fixHtmlForPPTB()], + base: './', + build: { + outDir: 'dist', + assetsDir: 'assets', + sourcemap: configEnv.mode === 'development', + rollupOptions: { + output: { + // Use IIFE format for compatibility with iframe srcdoc loading + // ES modules can have issues when loaded via file:// URLs in iframes + format: 'iife', + // Bundle everything into a single file to avoid module loading issues + inlineDynamicImports: true, + // Disable chunking since we're bundling everything + manualChunks: undefined, + }, }, }, - }, + }; }); From d2b43a007229b26b3e78b6dfcff6397a31f6224d Mon Sep 17 00:00:00 2001 From: Oliver Flint Date: Tue, 31 Mar 2026 00:51:54 +0100 Subject: [PATCH 3/3] updated html template to use vite and added and included additional dev workflow scripts see #15 for further info --- generators/app/generate-html.js | 59 ++++++----------- generators/app/templates/html/README.md | 49 ++++++++++---- generators/app/templates/html/package.json | 56 ++++++++-------- generators/app/templates/html/src/app.ts | 65 +++++++++---------- generators/app/templates/html/tsconfig.json | 26 ++++---- .../app/templates/html/tsconfig.node.json | 11 ++++ generators/app/templates/html/vite.config.ts | 25 +++++++ 7 files changed, 166 insertions(+), 125 deletions(-) create mode 100644 generators/app/templates/html/tsconfig.node.json create mode 100644 generators/app/templates/html/vite.config.ts diff --git a/generators/app/generate-html.js b/generators/app/generate-html.js index 2e19200..85cefb9 100644 --- a/generators/app/generate-html.js +++ b/generators/app/generate-html.js @@ -12,7 +12,7 @@ export default { id: 'tool-html', aliases: ['html', 'typescript', 'ts'], name: 'HTML with TypeScript', - + /** * @param {Generator} generator * @param {ToolConfig} toolConfig @@ -24,63 +24,46 @@ export default { await prompts.askForGit(generator, toolConfig); await prompts.askForPackageManager(generator, toolConfig); }, - + /** * @param {Generator} generator * @param {ToolConfig} toolConfig */ writing: (generator, toolConfig) => { // Copy package.json template - generator.fs.copyTpl( - generator.templatePath('html/package.json'), - generator.destinationPath('package.json'), - toolConfig - ); + generator.fs.copyTpl(generator.templatePath('html/package.json'), generator.destinationPath('package.json'), toolConfig); // Copy tsconfig.json - generator.fs.copy( - generator.templatePath('html/tsconfig.json'), - generator.destinationPath('tsconfig.json') - ); + generator.fs.copy(generator.templatePath('html/tsconfig.json'), generator.destinationPath('tsconfig.json')); + + // Copy tsconfig.node.json + generator.fs.copy(generator.templatePath('html/tsconfig.node.json'), generator.destinationPath('tsconfig.node.json')); + + // Copy tsconfig.node.json + generator.fs.copy(generator.templatePath('html/tsconfig.node.json'), generator.destinationPath('tsconfig.node.json')); + + // Copy vite.config.ts + generator.fs.copy(generator.templatePath('html/vite.config.ts'), generator.destinationPath('vite.config.ts')); // Copy .gitignore if git is initialized if (toolConfig.gitInit) { - generator.fs.copy( - generator.templatePath('html/gitignore'), - generator.destinationPath('.gitignore') - ); + generator.fs.copy(generator.templatePath('html/gitignore'), generator.destinationPath('.gitignore')); } // Copy .npmignore - generator.fs.copy( - generator.templatePath('html/npmignore'), - generator.destinationPath('.npmignore') - ); + generator.fs.copy(generator.templatePath('html/npmignore'), generator.destinationPath('.npmignore')); // Copy README - generator.fs.copyTpl( - generator.templatePath('html/README.md'), - generator.destinationPath('README.md'), - toolConfig - ); + generator.fs.copyTpl(generator.templatePath('html/README.md'), generator.destinationPath('README.md'), toolConfig); // Copy source files - generator.fs.copy( - generator.templatePath('html/src/index.html'), - generator.destinationPath('src/index.html') - ); + generator.fs.copy(generator.templatePath('html/src/index.html'), generator.destinationPath('src/index.html')); - generator.fs.copy( - generator.templatePath('html/src/app.ts'), - generator.destinationPath('src/app.ts') - ); + generator.fs.copy(generator.templatePath('html/src/app.ts'), generator.destinationPath('src/app.ts')); - generator.fs.copy( - generator.templatePath('html/src/styles.css'), - generator.destinationPath('src/styles.css') - ); + generator.fs.copy(generator.templatePath('html/src/styles.css'), generator.destinationPath('src/styles.css')); }, - + /** * @param {Generator} generator * @param {ToolConfig} toolConfig @@ -88,5 +71,5 @@ export default { endMessage: (generator, toolConfig) => { generator.log('Your HTML/TypeScript tool is ready!'); generator.log('Build your tool with: ' + (toolConfig.pkgManager === 'npm' ? 'npm run build' : toolConfig.pkgManager + ' build')); - } + }, }; diff --git a/generators/app/templates/html/README.md b/generators/app/templates/html/README.md index 5ce616d..02cb1cb 100644 --- a/generators/app/templates/html/README.md +++ b/generators/app/templates/html/README.md @@ -19,13 +19,10 @@ │ ├── index.ts # Tool logic (TypeScript) │ └── styles.css # Styling ├── dist/ # Compiled output (after build) -│ ├── index.html -│ ├── index.js -│ ├── index.js.map -│ └── styles.css ├── package.json +├── README.md ├── tsconfig.json -└── README.md +└── vite.config.ts ``` ## Installation @@ -38,18 +35,44 @@ npm install ## Development -Build the tool: +**Build the tool:** ```bash npm run build ``` -Watch mode for development: +**Dev build with sourcemaps (watch mode):** ```bash -npm run watch +npm run dev-watch ``` +**Validate tool package:** + +```bash +npm run validate +``` + +**Shrinkwrap package:** + +```bash +npm run finalize-package +``` + +or; + +```bash +npm shrinkwrap +``` + +**Publish new version:** + +```bash +npm run publish-package +``` + +_Further tool development documentation is available @ https://docs.powerplatformtoolbox.com/tool-development_ + ## Usage in ToolBox 1. Build the tool using `npm run build` @@ -72,9 +95,9 @@ console.log(context.accessToken); ```typescript await window.toolboxAPI.showNotification({ - title: 'Success', - body: 'Operation completed', - type: 'success' + title: 'Success', + body: 'Operation completed', + type: 'success', }); ``` @@ -82,8 +105,8 @@ await window.toolboxAPI.showNotification({ ```typescript window.toolboxAPI.onToolboxEvent((event, payload) => { - console.log('Event:', payload.event); - console.log('Data:', payload.data); + console.log('Event:', payload.event); + console.log('Data:', payload.data); }); ``` diff --git a/generators/app/templates/html/package.json b/generators/app/templates/html/package.json index f29e251..8826bec 100644 --- a/generators/app/templates/html/package.json +++ b/generators/app/templates/html/package.json @@ -1,28 +1,32 @@ { - "name": "<%= name %>", - "version": "0.1.0", - "displayName": "<%= displayName %>", - "description": "<%= description %>", - "main": "index.html", - "author": "Power Platform ToolBox", - "license": "MIT", - "engines": { - "node": ">=18.0.0" - }, - "scripts": { - "build": "tsc && npm run copy-html && npm run copy-css", - "copy-html": "shx cp src/index.html dist/", - "copy-css": "shx cp src/styles.css dist/", - "watch": "tsc --watch", - "finalize-package": "npm shrinkwrap" - }, - "devDependencies": { - "@pptb/types": "^1.0.1", - "typescript": "^5.0.0", - "shx": "^0.4.0" - }, - "files": [ - "dist", - "npm-shrinkwrap.json" - ] + "name": "<%= name %>", + "version": "0.1.0", + "displayName": "<%= displayName %>", + "description": "<%= description %>", + "main": "index.html", + "author": "Power Platform ToolBox", + "license": "MIT", + "engines": { + "node": ">=18.0.0" + }, + "scripts": { + "build": "tsc && vite build", + "dev": "vite", + "watch": "vite build --watch", + "dev-watch": "vite build --mode development --watch", + "preview": "vite preview", + "finalize-package": "npm shrinkwrap", + "validate": "pptb-validate", + "version-stable": "npm version patch --no-git-tag-version", + "publish-package": "npm run build && npm run version-stable && npm publish --access public" + }, + "devDependencies": { + "@pptb/types": "^1.2.0", + "typescript": "^5.0.0", + "vite": "^8.0.3" + }, + "files": [ + "dist", + "npm-shrinkwrap.json" + ] } diff --git a/generators/app/templates/html/src/app.ts b/generators/app/templates/html/src/app.ts index fb5f612..82bfacf 100644 --- a/generators/app/templates/html/src/app.ts +++ b/generators/app/templates/html/src/app.ts @@ -2,7 +2,7 @@ /** * HTML Sample Tool for Power Platform Tool Box - * + * * This sample demonstrates: * - ToolBox API usage (connections, utils, terminal, events) * - Dataverse API usage (CRUD, queries, metadata) @@ -127,17 +127,13 @@ function subscribeToEvents() { */ function setupEventHandlers() { // Notification buttons - document.getElementById('show-success-btn')?.addEventListener('click', () => - showNotification('Success!', 'Operation completed successfully', 'success')); - - document.getElementById('show-info-btn')?.addEventListener('click', () => - showNotification('Information', 'This is an informational message', 'info')); - - document.getElementById('show-warning-btn')?.addEventListener('click', () => - showNotification('Warning', 'Please review this warning', 'warning')); - - document.getElementById('show-error-btn')?.addEventListener('click', () => - showNotification('Error', 'An error has occurred', 'error')); + document.getElementById('show-success-btn')?.addEventListener('click', () => showNotification('Success!', 'Operation completed successfully', 'success')); + + document.getElementById('show-info-btn')?.addEventListener('click', () => showNotification('Information', 'This is an informational message', 'info')); + + document.getElementById('show-warning-btn')?.addEventListener('click', () => showNotification('Warning', 'Please review this warning', 'warning')); + + document.getElementById('show-error-btn')?.addEventListener('click', () => showNotification('Error', 'An error has occurred', 'error')); // Utility buttons document.getElementById('copy-clipboard-btn')?.addEventListener('click', copyToClipboard); @@ -173,7 +169,7 @@ async function showNotification(title: string, body: string, type: 'success' | ' title, body, type, - duration: 3000 + duration: 3000, }); log(`Notification shown: ${title} - ${body}`, type); } catch (error) { @@ -189,7 +185,7 @@ async function copyToClipboard() { const data = { timestamp: new Date().toISOString(), connection: currentConnection?.name || 'No connection', - message: 'This data was copied from the HTML Sample Tool' + message: 'This data was copied from the HTML Sample Tool', }; await toolbox.utils.copyToClipboard(JSON.stringify(data, null, 2)); @@ -219,18 +215,17 @@ async function saveDataToFile() { try { const data = { timestamp: new Date().toISOString(), - connection: currentConnection ? { - name: currentConnection.name, - url: currentConnection.url, - environment: currentConnection.environment - } : null, - message: 'Export from HTML Sample Tool' + connection: currentConnection + ? { + name: currentConnection.name, + url: currentConnection.url, + environment: currentConnection.environment, + } + : null, + message: 'Export from HTML Sample Tool', }; - const filePath = await toolbox.utils.saveFile( - 'sample-export.json', - JSON.stringify(data, null, 2) - ); + const filePath = await toolbox.fileSystem.saveFile('sample-export.json', JSON.stringify(data, null, 2)); if (filePath) { await showNotification('File Saved', `File saved to: ${filePath}`, 'success'); @@ -249,15 +244,15 @@ async function saveDataToFile() { async function createTerminal() { try { currentTerminal = await toolbox.terminal.create({ - name: 'HTML Sample Terminal' + name: 'HTML Sample Terminal', }); log(`Terminal created: ${currentTerminal.name} (${currentTerminal.id})`, 'success'); - + // Enable command buttons const executeBtn = document.getElementById('execute-command-btn') as HTMLButtonElement; const closeBtn = document.getElementById('close-terminal-btn') as HTMLButtonElement; - + if (executeBtn) executeBtn.disabled = false; if (closeBtn) closeBtn.disabled = false; @@ -306,7 +301,7 @@ async function closeTerminal() { // Disable command buttons const executeBtn = document.getElementById('execute-command-btn') as HTMLButtonElement; const closeBtn = document.getElementById('close-terminal-btn') as HTMLButtonElement; - + if (executeBtn) executeBtn.disabled = true; if (closeBtn) closeBtn.disabled = true; @@ -401,7 +396,7 @@ async function createContact() { try { const firstnameInput = document.getElementById('contact-firstname') as HTMLInputElement; const lastnameInput = document.getElementById('contact-lastname') as HTMLInputElement; - + const output = document.getElementById('crud-output'); if (output) output.textContent = 'Creating contact...\n'; @@ -409,7 +404,7 @@ async function createContact() { firstname: firstnameInput.value, lastname: lastnameInput.value, telephone1: '555-0100', - description: 'Created by HTML Sample Tool' + description: 'Created by HTML Sample Tool', }); createdId = result.id; @@ -450,7 +445,7 @@ async function updateContact() { await dataverse.update('contact', createdId, { description: 'Updated by HTML Sample Tool at ' + new Date().toISOString(), - telephone1: '555-0200' + telephone1: '555-0200', }); if (output) { @@ -556,20 +551,20 @@ function log(message: string, type: 'info' | 'success' | 'warning' | 'error' = ' const timestamp = new Date().toLocaleTimeString(); const logEntry = document.createElement('div'); logEntry.className = `log-entry ${type}`; - + const timestampSpan = document.createElement('span'); timestampSpan.className = 'log-timestamp'; timestampSpan.textContent = `[${timestamp}]`; - + const messageSpan = document.createElement('span'); messageSpan.textContent = message; - + logEntry.appendChild(timestampSpan); logEntry.appendChild(document.createTextNode(' ')); logEntry.appendChild(messageSpan); logDiv.insertBefore(logEntry, logDiv.firstChild); - + // Keep only last 50 entries while (logDiv.children.length > 50) { logDiv.removeChild(logDiv.lastChild!); diff --git a/generators/app/templates/html/tsconfig.json b/generators/app/templates/html/tsconfig.json index 914a0ee..bee0b71 100644 --- a/generators/app/templates/html/tsconfig.json +++ b/generators/app/templates/html/tsconfig.json @@ -1,25 +1,25 @@ { "compilerOptions": { "target": "ES2022", - "module": "ES2022", + "useDefineForClassFields": true, "lib": ["ES2022", "DOM", "DOM.Iterable"], - "outDir": "./dist", - "rootDir": "./src", - "strict": true, - "esModuleInterop": true, + "module": "ESNext", "skipLibCheck": true, - "forceConsistentCasingInFileNames": true, + "types": ["@pptb/types"], + + /* Bundler mode */ "moduleResolution": "bundler", - "declaration": false, - "sourceMap": true, - "allowSyntheticDefaultImports": true, + "allowImportingTsExtensions": true, + "resolveJsonModule": true, "isolatedModules": true, - "useDefineForClassFields": true, - "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, - "include": ["src/**/*"], - "exclude": ["node_modules", "dist"] + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/generators/app/templates/html/tsconfig.node.json b/generators/app/templates/html/tsconfig.node.json new file mode 100644 index 0000000..6675f46 --- /dev/null +++ b/generators/app/templates/html/tsconfig.node.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true, + "strict": true + }, + "include": ["vite.config.ts"] +} diff --git a/generators/app/templates/html/vite.config.ts b/generators/app/templates/html/vite.config.ts new file mode 100644 index 0000000..0af4139 --- /dev/null +++ b/generators/app/templates/html/vite.config.ts @@ -0,0 +1,25 @@ +import { defineConfig } from "vite"; + +export default defineConfig((configEnv) => { + return { + base: "./src", + root: "./src", + build: { + outDir: "../dist", + assetsDir: "assets", + cssCodeSplit: false, + sourcemap: configEnv.mode === "development", + rollupOptions: { + output: { + // Use IIFE format for compatibility with iframe srcdoc loading + // ES modules can have issues when loaded via file:// URLs in iframes + format: "iife", + // Bundle everything into a single file to avoid module loading issues + inlineDynamicImports: true, + // Disable chunking since we're bundling everything + manualChunks: undefined, + }, + }, + }, + }; +});