💄 rename files to camel case and fix loader generation

Author: lehju

personalization-webcomponents/index-checklist-detail.html

@@ -30,7 +30,7 @@
 
     <!-- built files will be auto injected -->
     <script
-      src="src/checklist-detail-webcomponent.ts"
+      src="src/ChecklistDetailWebcomponent.ts"
       type="module"
     ></script>
   </head>

personalization-webcomponents/index-checklist-overview.html

@@ -30,7 +30,7 @@
 
     <!-- built files will be auto injected -->
     <script
-      src="src/checklist-overview-webcomponent.ts"
+      src="src/ChecklistOverviewWebcomponent.ts"
       type="module"
     ></script>
   </head>

personalization-webcomponents/index-checklist-preview.html

@@ -30,7 +30,7 @@
 
     <!-- built files will be auto injected -->
     <script
-      src="src/checklist-preview-webcomponent.ts"
+      src="src/ChecklistPreviewWebcomponent.ts"
       type="module"
     ></script>
   </head>

personalization-webcomponents/index-my-checklists.html

@@ -30,7 +30,7 @@
 
     <!-- built files will be auto injected -->
     <script
-      src="src/my-checklists-webcomponent.ts"
+      src="src/MyChecklistsWebcomponent.ts"
       type="module"
     ></script>
   </head>

personalization-webcomponents/processes/lib/fileGenerator.js

@@ -15,13 +15,20 @@ export function generateLoaderJs(filename, subdirectory, suffix) {
     "{{path}}",
     `../${subdirectory}/${filename}`
   );
+
+  const dirName = changeCamelToSnakeCase(suffix);
   // write script to the dist folder as loader.js.template
-  fs.mkdirSync(`./dist/${suffix}`, { recursive: true });
+  fs.mkdirSync(`./dist/${dirName}`, { recursive: true });
   fs.writeFileSync(
-    path.resolve(`./dist/${suffix}/loader.js`),
+    path.resolve(`./dist/${dirName}/loader.js`),
     loaderJsReplaced,
     {
       encoding: "utf-8",
     }
   );
 }
+
+function changeCamelToSnakeCase(camelCased) {
+  const snakeCased = camelCased.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
+  return snakeCased.startsWith('_') ? snakeCased.substring(1) : snakeCased;
+}

personalization-webcomponents/processes/post-build.js

@@ -27,7 +27,7 @@ import manifest from '../dist/src/.vite/manifest.json' with {type: 'json'};
 
 // Required filename content to be treated as webcomponent
 const REQUIRED_PREFIX = 'src/';
-const REQUIRED_SUFFIX = '-webcomponent.ts';
+const REQUIRED_SUFFIX = 'Webcomponent.ts';
 
 for (const key in manifest) {
     if (key.startsWith(REQUIRED_PREFIX) && key.endsWith(REQUIRED_SUFFIX)) {

personalization-webcomponents/src/checklist-detail.ce.vue renamed to personalization-webcomponents/src/ChecklistDetail.ce.vue

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "vue";
 
-import ChecklistDetailVueComponent from "@/checklist-detail.ce.vue";
+import ChecklistDetailVueComponent from "@/ChecklistDetail.ce.vue";
 
 // convert into custom element constructor
 const ChecklistDetailWebcomponent = defineCustomElement(

personalization-webcomponents/src/checklist-detail-webcomponent.ts renamed to personalization-webcomponents/src/ChecklistDetailWebcomponent.ts

@@ -1,6 +1,6 @@
 import { defineCustomElement } from "vue";
 
-import ChecklistOverviewVueComponent from "@/checklist-overview.ce.vue";
+import ChecklistOverviewVueComponent from "@/ChecklistOverview.ce.vue";
 
 // convert into custom element constructor
 const ChecklistOverviewWebcomponent = defineCustomElement(