From ff7183e5fd6a588b0245c2ad52b392455f5a29c4 Mon Sep 17 00:00:00 2001 From: Sadiq Khoja Date: Mon, 12 Aug 2024 10:50:19 -0400 Subject: [PATCH] Build demo app for distribution / preview --- .gitignore | 1 + eslint.config.js | 1 + packages/web-forms/package.json | 3 +- packages/web-forms/vite.config.ts | 118 +++++++++++++++------------- packages/web-forms/vitest.config.ts | 56 ++++++------- 5 files changed, 97 insertions(+), 82 deletions(-) diff --git a/.gitignore b/.gitignore index cfec1b823..4c40a2fcc 100644 --- a/.gitignore +++ b/.gitignore @@ -18,6 +18,7 @@ node_modules/ # Build artifacts dist/ +dist-demo/ examples/**/dist packages/**/dist diff --git a/eslint.config.js b/eslint.config.js index f92ba0c3b..c6712a4db 100644 --- a/eslint.config.js +++ b/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', ], diff --git a/packages/web-forms/package.json b/packages/web-forms/package.json index dc32b10b6..9eb951e64 100644 --- a/packages/web-forms/package.json +++ b/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", diff --git a/packages/web-forms/vite.config.ts b/packages/web-forms/vite.config.ts index a4cbeed9e..12b85007b 100644 --- a/packages/web-forms/vite.config.ts +++ b/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; }); diff --git a/packages/web-forms/vitest.config.ts b/packages/web-forms/vitest.config.ts index 19eddf453..45e44332e 100644 --- a/packages/web-forms/vitest.config.ts +++ b/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, + }) + ) );