updated vue and added web component build to dist-web-component/odk-w…

…eb-form.js Signed-off-by: Daniel J. Dufour <[email protected]>
getodk · Jan 20, 2025 · aa7c996 · aa7c996
1 parent c0a409b
commit aa7c996
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -64,7 +64,7 @@
     "turbo": "^2.3.3",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.18.1",
-    "vue": "3.3.4",
+    "vue": "3.5.13",
     "vue-tsc": "^2.1.10"
   },
   "resolutions": {

diff --git a/packages/web-forms/package.json b/packages/web-forms/package.json
@@ -31,6 +31,7 @@
     "build:clean": "rimraf dist/ dist-demo/",
     "build:demo": "vite build --mode demo --outDir dist-demo",
     "build:js": "vite build",
+    "build:wc": "vite build --mode web-component --outDir dist-web-component",
     "dev": "vite",
     "dist-demo": "yarn build && yarn vite serve dist-demo --port 5174",
     "test": "npm-run-all -nl test:*",
@@ -68,10 +69,10 @@
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-static-copy": "^2.2.0",
     "vitest": "^2.1.8",
-    "vue": "3.3.4",
+    "vue": "3.5.13",
     "vue-router": "^4.5.0"
   },
   "peerDependencies": {
-    "vue": "^3.3.4"
+    "vue": "^3.5.13"
   }
 }
diff --git a/packages/web-forms/src/index.wc.ts b/packages/web-forms/src/index.wc.ts
@@ -0,0 +1,11 @@
+import { defineCustomElement } from 'vue';
+import { OdkWebForm, webFormsPlugin } from '.';
+
+const WebFormElement = defineCustomElement(OdkWebForm, {
+  configureApp(app) {
+    app.use(webFormsPlugin);
+  },
+  shadowRoot: false
+});
+
+customElements.define('odk-web-form', WebFormElement);
diff --git a/packages/web-forms/vite.config.ts b/packages/web-forms/vite.config.ts
@@ -68,16 +68,26 @@ const copyConfigFile = viteStaticCopy({
 export default defineConfig(({ mode }) => {
 	const isVueBundled = mode === 'demo';
 	const isDev = mode === 'development';
+	const isWebComponent = mode === 'web-component';
 
 	let lib: LibraryOptions | undefined;
 	let external: string[];
 	let globals: Record<string, string>;
+	let publicDir: string | false = "public";
 	const extraPlugins: PluginOption[] = [];
 
 	if (isVueBundled) {
 		external = [];
 		globals = {};
 		extraPlugins.push(copyConfigFile);
+	} else if (isWebComponent) {
+		lib = {
+			formats: ['es'],
+			entry: resolve(__dirname, 'src/index.wc.ts'),
+			name: 'OdkWebForms',
+			fileName: 'odk-web-form',
+		};
+		publicDir = false;
 	} else {
 		external = ['vue'];
 		globals = { vue: 'Vue' };
@@ -97,6 +107,7 @@ export default defineConfig(({ mode }) => {
 	return {
 		define: {
 			__WEB_FORMS_VERSION__: `"v${currentVersion}"`,
+			'process.env': {},
 		},
 		base: './',
 		plugins: [vue(), vueJsx(), cssInjectedByJsPlugin(), ...extraPlugins],
@@ -180,6 +191,7 @@ export default defineConfig(({ mode }) => {
 		optimizeDeps: {
 			force: true,
 		},
+		publicDir,
 		test: {
 			browser: {
 				enabled: BROWSER_ENABLED,