Merge pull request writer#406 from FabienArcellier/54-custom-componen…

…ts-not-loading-with-cjs-extension

fix: custom components not loading with cjs extension

.gitignore

@@ -9,7 +9,6 @@
 docs/docs/.vitepress/cache/
 docs/docs/.vitepress/temp/
 ui/dist/
-ui/custom_components_dist/
 build/
 dist/
 src/streamsync.egg-info/

src/ui/.gitignore

@@ -6,3 +6,4 @@ node_modules/
 storybook-static/
 
 *storybook.log
+/custom_components_dist

src/ui/package.json

@@ -6,8 +6,8 @@
 		"dev": "vite",
 		"build": "vite build",
 		"preview": "vite preview --port 5050",
-		"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path ../../.gitignore",
-		"lint:ci": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --ignore-path ../../.gitignore",
+		"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path ../../.gitignore --ignore-path .gitignore",
+		"lint:ci": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --ignore-path ../../.gitignore --ignore-path .gitignore",
 		"codegen": "node tools/generator.mjs",
 		"custom.dev": "vite --config vite.config.custom.ts",
 		"custom.build": "vite build --config vite.config.custom.ts",

src/ui/vite.config.custom.ts

@@ -20,7 +20,16 @@ export default defineConfig({
 			entry: ["./src/custom_components"],
 			formats: ["umd"],
 			name: "StreamsyncCustomComponentTemplates",
-			fileName: "templates",
+			fileName: (format, entryalias: string): string => {
+				/*
+				The umd file is generated with a cjs extension since transforming the streamsync package into a module
+				(https://github.com/streamsync-cloud/streamsync/issues/405).
+
+				We use the generated file inside a browser, not a nodejs application.
+				The cjs extension is not adapted. We implement our own name builder.
+				 */
+				return "templates.umd.js";
+			},
 		},
 		rollupOptions: {
 			external: ["vue", "../injectionKeys"],