chore(vue): change location of stencil components

.changeset/plenty-ducks-wonder.md

@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+**vue**: change location of stencil components

packages/components-vue/src/components/BalApp.ts

@@ -1,5 +1,5 @@
 import { h, defineComponent, shallowRef, VNode } from 'vue'
-import { defineCustomElement } from '@baloise/design-system-components/dist/components/bal-app'
+import { defineCustomElement } from '@baloise/design-system-components/components/bal-app'
 
 const userComponents = shallowRef<any[]>([]) // eslint-disable-line
 

packages/components/config/stencil.bindings.vue.ts

@@ -25,30 +25,24 @@ export const vueComponentModels: any[] = [
   },
 ]
 
-export const VueGenerator = (
-  componentCorePackage = '@baloise/design-system-components',
-  proxiesFile = '../components-vue/src/generated/proxies.ts',
-): any =>
+export const VueGenerator = (): any =>
   vueOutputTarget({
     includeImportCustomElements: true,
     includeDefineCustomElements: false,
     includeInternalComponents: false,
-    proxiesFile,
-    componentCorePackage,
+    proxiesFile: '../components-vue/src/generated/proxies.ts',
+    componentCorePackage: '@baloise/design-system-components',
     componentModels: vueComponentModels,
-    customElementsDir: 'dist/components',
+    customElementsDir: 'components',
   })
 
-export const VueTestGenerator = (
-  componentCorePackage = '@baloise/design-system-components',
-  proxiesFile = '../components-vue/src/generated/proxies.ts',
-): any =>
+export const VueTestGenerator = (): any =>
   vueOutputTarget({
     includeImportCustomElements: true,
     includeDefineCustomElements: false,
     includeInternalComponents: true,
-    proxiesFile,
-    componentCorePackage,
+    proxiesFile: '../../test/generated/vue-components/index.ts',
+    componentCorePackage: '../',
     componentModels: vueComponentModels,
-    customElementsDir: 'dist/components',
+    customElementsDir: 'components',
   })

packages/components/package.json

@@ -26,8 +26,8 @@
   ],
   "scripts": {
     "==================== START =========================": "================================",
-    "serve": "stencil build --dev --serve --watch",
-    "dev": "stencil build --watch",
+    "serve": "BAL_DEVELOPMENT=true stencil build --dev --serve --watch",
+    "dev": "BAL_DOCUMENTATION=true stencil build --watch",
     "==================== BUILD =========================": "================================",
     "build": "node scripts/pre-build.mjs && stencil build && node scripts/post-build.mjs",
     "==================== UNIT TEST =====================": "================================",

packages/components/stencil.config.ts

@@ -10,6 +10,7 @@ import { CustomDocumentationGenerator } from './config/doc-output-target'
 
 const IS_BAL_DS_RELEASE = process.env.BAL_DS_RELEASE === 'true'
 const IS_BAL_DOCUMENTATION = process.env.BAL_DOCUMENTATION === 'true'
+const IS_BAL_DEVELOPMENT = process.env.BAL_DEVELOPMENT === 'true'
 
 if (IS_BAL_DS_RELEASE) {
   console.log('')
@@ -23,6 +24,12 @@ if (IS_BAL_DOCUMENTATION) {
   console.log('')
 }
 
+if (IS_BAL_DEVELOPMENT) {
+  console.log('')
+  console.log('👷 Build is set to development 👷')
+  console.log('')
+}
+
 export const config: Config = {
   autoprefixCss: true,
   sourceMap: false,
@@ -50,26 +57,26 @@ export const config: Config = {
       type: 'dist',
       esmLoaderPath: '../loader',
     },
-    {
-      type: 'dist-custom-elements',
-      includeGlobalScripts: false,
-      generateTypeDeclarations: false,
-    },
-    {
-      type: 'dist-custom-elements',
-      dir: 'components',
-      copy: [
-        {
-          src: '../config/custom-elements',
-          dest: 'components',
-          warn: true,
-        },
-      ],
-      includeGlobalScripts: false,
-    },
-    // {
-    //   type: 'dist-hydrate-script',
-    // },
+    ...(!IS_BAL_DEVELOPMENT
+      ? [
+          CustomDocumentationGenerator,
+          {
+            type: 'dist-custom-elements',
+            dir: 'components',
+            copy: [
+              {
+                src: '../config/custom-elements',
+                dest: 'components',
+                warn: true,
+              },
+            ],
+            includeGlobalScripts: false,
+          },
+          // {
+          //   type: 'dist-hydrate-script',
+          // },
+        ]
+      : []),
     {
       type: 'www',
       dir: 'www',
@@ -90,7 +97,6 @@ export const config: Config = {
         { src: '../../fonts/lib', dest: 'assets/fonts', warn: true },
       ],
     },
-    CustomDocumentationGenerator,
     /**
      * Skip those outputs for documentation releases on vercel
      */
@@ -102,7 +108,7 @@ export const config: Config = {
             sourceCodeBaseUrl: 'https://github.com/baloise/design-system',
           },
           VueGenerator(),
-          VueTestGenerator('../', '../../test/generated/components/index.ts'),
+          VueTestGenerator(),
           AngularGenerator(),
           AngularStandaloneGenerator(),
           AngularLegacyGenerator(),

test/cypress/component/bal-accordion.vue

@@ -7,7 +7,7 @@ import {
   BalStack,
   BalContent,
   BalLabel,
-} from '../../generated/components'
+} from '../support/utils'
 
 defineProps({
   active: Boolean,

test/cypress/support/utils.ts

@@ -6,4 +6,4 @@ export { newBalTabOption } from '../../../packages/components/src/components/bal
 export { newBalStepOption } from '../../../packages/components/src/components/bal-steps/bal-step.util'
 export { i18nBalDate } from '../../../packages/components/src/components/bal-date/bal-date.i18n'
 
-export * from '../../generated/components'
+export * from '../../generated/vue-components'

test/scripts/build.mjs

@@ -16,8 +16,10 @@ const run = async () => {
     await makeDir(__generated)
     shell.rm('-rf', 'generated/www')
     shell.rm('-rf', 'generated/dist')
+    shell.rm('-rf', 'generated/components')
     await copy(path.join(__root, 'packages/components/www'), path.join(__generated, 'www'))
     await copy(path.join(__root, 'packages/components/dist'), path.join(__generated, 'dist'))
+    await copy(path.join(__root, 'packages/components/components'), path.join(__generated, 'components'))
     await writeFile(path.join(__generated, 'index.d.ts'), `export * from './dist/types';`)
     log.succeed()
   } catch (error) {