Build demo app for distribution / preview

.gitignore

@@ -18,6 +18,7 @@ node_modules/
 
 # Build artifacts
 dist/
+dist-demo/
 examples/**/dist
 packages/**/dist
 

eslint.config.js

@@ -81,6 +81,7 @@ export default tseslint.config(
 			'packages/tree-sitter-xpath/grammar.js',
 			'packages/tree-sitter-xpath/bindings/**/*',
 			'packages/tree-sitter-xpath/types/**/*',
+			'packages/web-forms/dist-demo/**/*',
 			'packages/xforms-engine/api-docs/**/*',
 			'**/vendor',
 		],

packages/web-forms/package.json

@@ -28,7 +28,8 @@
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",
-    "build:clean": "rimraf dist/",
+    "build:clean": "rimraf dist/ dist-demo/",
+    "build:demo": "vite build --mode demo --outDir dist-demo",
     "build:js": "vite build",
     "build-preview": "yarn build && yarn vite serve build-preview --port 5174",
     "dev": "vite",

packages/web-forms/vite.config.ts

@@ -3,7 +3,7 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
 import { fileURLToPath, URL } from 'node:url';
 import { resolve } from 'path';
 import unpluginFonts from 'unplugin-fonts/vite';
-import { defineConfig } from 'vite';
+import { defineConfig, UserConfig } from 'vite';
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
 
 const bundleFonts = () =>
@@ -25,64 +25,74 @@ const bundleFonts = () =>
 		},
 	});
 
-export default defineConfig({
-	plugins: [vue(), vueJsx(), cssInjectedByJsPlugin(), bundleFonts()],
-	resolve: {
-		alias: {
-			'@': fileURLToPath(new URL('./src', import.meta.url)),
-			'primevue/menuitem': 'primevue/menu',
-			// With following lines, fonts byte array are copied into css file
-			// Roboto fonts - don't want to copy those in our repository
-			'./fonts': resolve(
-				'../../node_modules/primevue-sass-theme/themes/material/material-light/standard/indigo/fonts'
-			),
-			// Icomoon fonts
-			'/fonts': resolve('./src/assets/fonts'),
-		},
-	},
-	build: {
-		target: 'esnext',
-		lib: {
-			formats: ['es'],
-			entry: resolve(__dirname, 'src/index.ts'),
-			name: 'OdkWebForms',
-			fileName: 'index',
+export default defineConfig((env) => {
+	const config: UserConfig = {
+		base: './',
+		plugins: [vue(), vueJsx(), cssInjectedByJsPlugin(), bundleFonts()],
+		resolve: {
+			alias: {
+				'@': fileURLToPath(new URL('./src', import.meta.url)),
+				'primevue/menuitem': 'primevue/menu',
+				// With following lines, fonts byte array are copied into css file
+				// Roboto fonts - don't want to copy those in our repository
+				'./fonts': resolve(
+					'../../node_modules/primevue-sass-theme/themes/material/material-light/standard/indigo/fonts'
+				),
+				// Icomoon fonts
+				'/fonts': resolve('./src/assets/fonts'),
+			},
 		},
-		rollupOptions: {
-			external: ['vue'],
-			output: {
-				globals: {
-					vue: 'Vue',
+		build: {
+			target: 'esnext',
+			lib: {
+				formats: ['es'],
+				entry: resolve(__dirname, 'src/index.ts'),
+				name: 'OdkWebForms',
+				fileName: 'index',
+			},
+			rollupOptions: {
+				external: ['vue'],
+				output: {
+					globals: {
+						vue: 'Vue',
+					},
 				},
 			},
 		},
-	},
-	css: {
-		postcss: {
-			plugins: [
-				/**
-				 * primevue-sass-theme defines styles within a `@layer primevue { ...
-				 * }`. With that approach, host applications rules have higher
-				 * precedence, which could potentially override Web Forms styles in
-				 * unpredictable ways. This plugin unwraps that `@layer`, replacing it
-				 * with the style rules it contains.
-				 */
-				{
-					postcssPlugin: 'unwrap-at-layer-rules',
-					Once(root) {
-						root.walkAtRules((rule) => {
-							if (rule.name === 'layer') {
-								if (rule.parent == null) {
-									throw new Error('Failed to unwrap @layer: rule has no parent');
-								}
+		css: {
+			postcss: {
+				plugins: [
+					/**
+					 * primevue-sass-theme defines styles within a `@layer primevue { ...
+					 * }`. With that approach, host applications rules have higher
+					 * precedence, which could potentially override Web Forms styles in
+					 * unpredictable ways. This plugin unwraps that `@layer`, replacing it
+					 * with the style rules it contains.
+					 */
+					{
+						postcssPlugin: 'unwrap-at-layer-rules',
+						Once(root) {
+							root.walkAtRules((rule) => {
+								if (rule.name === 'layer') {
+									if (rule.parent == null) {
+										throw new Error('Failed to unwrap @layer: rule has no parent');
+									}
 
-								rule.parent.append(rule.nodes);
-								rule.remove();
-							}
-						});
+									rule.parent.append(rule.nodes);
+									rule.remove();
+								}
+							});
+						},
 					},
-				},
-			],
+				],
+			},
 		},
-	},
+	};
+
+	if (env.mode === 'demo') {
+		const { lib, rollupOptions, ...build } = config.build!;
+		config.build = build;
+	}
+
+	return config;
 });

packages/web-forms/vitest.config.ts

@@ -46,33 +46,35 @@ if (webkitFlakinessMitigations) {
 	globalSetup.push('./tests/globalSetup/mitigate-webkit-flakiness.ts');
 }
 
-export default mergeConfig(
-	viteConfig,
-	defineConfig({
-		test: {
-			browser: {
-				enabled: BROWSER_ENABLED,
-				name: BROWSER_NAME!,
-				provider: 'playwright',
-				fileParallelism: false,
-				headless: true,
-				screenshotFailures: false,
-			},
-			environment: TEST_ENVIRONMENT,
-			exclude: [...configDefaults.exclude, 'e2e/**'],
-			root: fileURLToPath(new URL('./', import.meta.url)),
+export default defineConfig((env) =>
+	mergeConfig(
+		viteConfig(env),
+		defineConfig({
+			test: {
+				browser: {
+					enabled: BROWSER_ENABLED,
+					name: BROWSER_NAME!,
+					provider: 'playwright',
+					fileParallelism: false,
+					headless: true,
+					screenshotFailures: false,
+				},
+				environment: TEST_ENVIRONMENT,
+				exclude: [...configDefaults.exclude, 'e2e/**'],
+				root: fileURLToPath(new URL('./', import.meta.url)),
 
-			/** @see {@link webkitFlakinessMitigations} */
-			globalSetup,
+				/** @see {@link webkitFlakinessMitigations} */
+				globalSetup,
 
-			// Suppress the console error log about parsing CSS stylesheet
-			// This is an open issue of jsdom
-			// see primefaces/primevue#4512 and jsdom/jsdom#2177
-			onConsoleLog(log: string, type: 'stderr' | 'stdout'): false | void {
-				if (log.includes('Error: Could not parse CSS stylesheet') && type === 'stderr') {
-					return false;
-				}
-			},
-		} satisfies VitestTestConfig,
-	})
+				// Suppress the console error log about parsing CSS stylesheet
+				// This is an open issue of jsdom
+				// see primefaces/primevue#4512 and jsdom/jsdom#2177
+				onConsoleLog(log: string, type: 'stderr' | 'stdout'): false | void {
+					if (log.includes('Error: Could not parse CSS stylesheet') && type === 'stderr') {
+						return false;
+					}
+				},
+			} satisfies VitestTestConfig,
+		})
+	)
 );