fix: patch Vue.js output library to not lowercase event names

nl-design-system · Aug 15, 2021 · e3450da · e3450da
1 parent 630ffda
commit e3450da
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 5 deletions.
diff --git a/packages/web-component-library-stencil/patch-vue.ts b/packages/web-component-library-stencil/patch-vue.ts
@@ -0,0 +1,25 @@
+import { dirname, join } from 'path';
+import type { CompilerCtx, Config, OutputTargetCustom } from '@stencil/core/internal';
+
+export interface OutputTargetPatchVue {
+  proxiesFile: string;
+}
+
+export const patchVueOutputTarget = (outputTarget: OutputTargetPatchVue): OutputTargetCustom => ({
+  type: 'custom',
+  name: 'vue-library-patch',
+  validate() {
+    return true;
+  },
+  async generator(config: Config, compilerCtx: CompilerCtx, buildCtx) {
+    const timespan = buildCtx.createTimeSpan(`generate Vue.js patch started`, true);
+
+    const utilsFilePath = join(dirname(outputTarget.proxiesFile), './vue-component-lib/utils.ts');
+    const utilsFile = compilerCtx.fs.readFileSync(utilsFilePath).toString('utf8');
+    const patchedUtilsFile = utilsFile.replace('eventName.toLowerCase()', 'eventName');
+
+    await compilerCtx.fs.writeFile(utilsFilePath, patchedUtilsFile);
+
+    timespan.finish(`generate Vue.js patch finished`);
+  },
+});
diff --git a/packages/web-component-library-stencil/stencil.config.ts b/packages/web-component-library-stencil/stencil.config.ts
@@ -1,6 +1,7 @@
 import { Config } from '@stencil/core';
 import { angularOutputTarget, ValueAccessorConfig } from '@stencil/angular-output-target';
 import { patchAngularOutputTarget } from './patch-angular';
+import { patchVueOutputTarget } from './patch-vue';
 import { reactOutputTarget } from '@stencil/react-output-target';
 import { sequentialOutputTargets } from './sequential-output-targets';
 import { sass } from '@stencil/sass';
@@ -65,11 +66,16 @@ export const config: Config = {
       componentCorePackage: '@utrecht/web-component-library-stencil',
       proxiesFile: '../web-component-library-react/src/components.ts',
     }),
-    vueOutputTarget({
-      componentCorePackage: '@utrecht/web-component-library-stencil',
-      proxiesFile: '../web-component-library-vue/src/components.ts',
-      componentModels: vueComponentModels,
-    }),
+    sequentialOutputTargets(
+      vueOutputTarget({
+        componentCorePackage: '@utrecht/web-component-library-stencil',
+        proxiesFile: '../web-component-library-vue/src/components.ts',
+        componentModels: vueComponentModels,
+      }),
+      patchVueOutputTarget({
+        proxiesFile: '../web-component-library-vue/src/components.ts',
+      }),
+    ),
   ],
   plugins: [sass()],
 };