Merge pull request #184 from sadiqkhoja/features/ui/build-demo-app

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/common/vitest.config.ts

@@ -4,8 +4,7 @@
 // TODO: much of this may be a good candidate for sharing from this internal package!
 
 import type { CollectionValues } from '@getodk/common/types/collections/CollectionValues.ts';
-import type { VitestTestConfig } from '@getodk/common/types/vitest-config.ts';
-import { defineConfig } from 'vite';
+import { defineConfig } from 'vitest/config';
 
 export default defineConfig(() => {
 	const supportedBrowsers = new Set(['chromium', 'firefox', 'webkit'] as const);
@@ -69,6 +68,6 @@ export default defineConfig(() => {
 
 			exclude: ['e2e/**/*'],
 			reporters: process.env.GITHUB_ACTIONS ? ['default', 'github-actions'] : 'default',
-		} satisfies VitestTestConfig,
+		},
 	};
 });

packages/scenario/vitest.config.ts

@@ -2,7 +2,6 @@
 /// <reference types="vite/client" />
 
 import type { CollectionValues } from '@getodk/common/types/collections/CollectionValues.ts';
-import type { VitestTestConfig } from '@getodk/common/types/vitest-config.ts';
 import { resolve } from 'path';
 import { defineConfig } from 'vitest/config';
 
@@ -94,6 +93,6 @@ export default defineConfig(({ mode }) => {
 			setupFiles: ['./src/vitest/setup.ts'],
 
 			reporters: process.env.GITHUB_ACTIONS ? ['default', 'github-actions'] : 'default',
-		} satisfies VitestTestConfig,
+		},
 	};
 });

packages/ui-solid/vite.config.ts

@@ -4,13 +4,12 @@
 // TODO: share Vite config where makes sense
 
 import type { CollectionValues } from '@getodk/common/types/collections/CollectionValues.ts';
-import type { VitestTestConfig } from '@getodk/common/types/vitest-config.ts';
 import suidPlugin from '@suid/vite-plugin';
 import { resolve as resolvePath } from 'node:path';
 import unpluginFonts from 'unplugin-fonts/vite';
-import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import solidPlugin from 'vite-plugin-solid';
+import { defineConfig } from 'vitest/config';
 
 export default defineConfig(({ mode }) => {
 	const isDev = mode === 'development';
@@ -179,6 +178,6 @@ export default defineConfig(({ mode }) => {
 			globals: false,
 			exclude: ['e2e/**/*'],
 			reporters: process.env.GITHUB_ACTIONS ? ['default', 'github-actions'] : 'default',
-		} satisfies VitestTestConfig,
+		},
 	};
 });

packages/web-forms/e2e/build/style.test.ts

@@ -4,7 +4,7 @@ test('Build includes component-defined styles', async ({ page }) => {
 	await page.goto('http://localhost:5174/');
 
 	// This ensures that the application is loaded before proceeding forward.
-	await expect(page.getByText('Calculate (simple)').first()).toBeVisible();
+	await expect(page.getByText('Demo Forms').first()).toBeVisible();
 
 	// Get the (Sass-defined) large breakpoint size
 	// [In theory, if we can get this and it's not a number, we've already validated styles. Below expands on that to leave some breadcrumbs]

packages/web-forms/package.json

@@ -28,10 +28,11 @@
   },
   "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",
+    "dist-demo": "yarn build && yarn vite serve dist-demo --port 5174",
     "test": "npm-run-all -nl test:*",
     "test:e2e": "playwright test",
     "test-node:jsdom": "vitest run",

packages/web-forms/playwright.config.ts

@@ -112,7 +112,7 @@ export default defineConfig({
 		 * aspects of build product we wish to validate.
 		 */
 		{
-			command: 'yarn vite build-preview',
+			command: 'yarn dist-demo',
 			port: 5174,
 			reuseExistingServer: false,
 		},