From de7b2ae2993a3bd8b9bc1eef5d3e94ddba1ecd9c Mon Sep 17 00:00:00 2001 From: Felix Weber Date: Wed, 7 Sep 2022 09:41:31 +0200 Subject: [PATCH 1/4] docs: update docs for vue+vite --- .../setup_and_info/GettingStartedForDevelopers_en.md | 2 -- .../stories/setup_and_info/ScaleAndVue_de.md | 11 +++++++++++ .../stories/setup_and_info/ScaleAndVue_en.md | 11 +++++++++++ 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/storybook-vue/stories/setup_and_info/GettingStartedForDevelopers_en.md b/packages/storybook-vue/stories/setup_and_info/GettingStartedForDevelopers_en.md index 121698183e..fa6d2a0194 100644 --- a/packages/storybook-vue/stories/setup_and_info/GettingStartedForDevelopers_en.md +++ b/packages/storybook-vue/stories/setup_and_info/GettingStartedForDevelopers_en.md @@ -32,8 +32,6 @@ import { defineCustomElements } from "@telekom/scale-components/loader"; defineCustomElements(window); ``` -> As of July 2021, modern build tools like Vite or Snowpack will break with this lazy-loading mechanism ([see GitHub issue in Stencil's repo](https://github.com/ionic-team/stencil/issues/2827)). To work around this issue, please load the library via `link` and `script` tags as in the "Plain HTML" snippet above. - ### NPM Packages | Package Name | Description | diff --git a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md index dbc0f91ec7..d627f3384a 100644 --- a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md +++ b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md @@ -63,6 +63,17 @@ rules: [ // ... ]; +// in vite.config.js +defineConfig({ + plugins: [vue({ + template: { + compilerOptions: { + isCustomElement: tag => tag.startsWith('scale-') + } + } + })] +}) + // or in main.js (on-the-fly template compilation) const app = Vue.createApp({}); app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('scale-'); diff --git a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_en.md b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_en.md index b14af53c17..34b3f09856 100644 --- a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_en.md +++ b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_en.md @@ -63,6 +63,17 @@ rules: [ // ... ]; +// in vite.config.js +defineConfig({ + plugins: [vue({ + template: { + compilerOptions: { + isCustomElement: tag => tag.startsWith('scale-') + } + } + })] +}) + // or in main.js (on-the-fly template compilation) const app = Vue.createApp({}); app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('scale-'); From 58873d8df7a8a3ba48aa143c0d53da6930428956 Mon Sep 17 00:00:00 2001 From: Felix Weber Date: Thu, 8 Sep 2022 10:25:35 +0200 Subject: [PATCH 2/4] fix: format --- .../stories/setup_and_info/ScaleAndVue_de.md | 20 ++++++++++--------- .../stories/setup_and_info/ScaleAndVue_en.md | 20 ++++++++++--------- 2 files changed, 22 insertions(+), 18 deletions(-) diff --git a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md index d627f3384a..86d3882d8f 100644 --- a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md +++ b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md @@ -64,15 +64,17 @@ rules: [ ]; // in vite.config.js -defineConfig({ - plugins: [vue({ - template: { - compilerOptions: { - isCustomElement: tag => tag.startsWith('scale-') - } - } - })] -}) +defineConfig({ + plugins: [ + vue({ + template: { + compilerOptions: { + isCustomElement: (tag) => tag.startsWith('scale-'), + }, + }, + }), + ], +}); // or in main.js (on-the-fly template compilation) const app = Vue.createApp({}); diff --git a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_en.md b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_en.md index 34b3f09856..19bad55672 100644 --- a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_en.md +++ b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_en.md @@ -64,15 +64,17 @@ rules: [ ]; // in vite.config.js -defineConfig({ - plugins: [vue({ - template: { - compilerOptions: { - isCustomElement: tag => tag.startsWith('scale-') - } - } - })] -}) +defineConfig({ + plugins: [ + vue({ + template: { + compilerOptions: { + isCustomElement: (tag) => tag.startsWith('scale-'), + }, + }, + }), + ], +}); // or in main.js (on-the-fly template compilation) const app = Vue.createApp({}); From 9e5c3c36abe15dc932b9993cce77314c773f8880 Mon Sep 17 00:00:00 2001 From: Felix Weber Date: Thu, 8 Sep 2022 11:45:03 +0200 Subject: [PATCH 3/4] fix: make vue samples consisten with each other (styling) --- examples/vue3-boilerplate/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/vue3-boilerplate/package.json b/examples/vue3-boilerplate/package.json index db429da31c..af0f3e2fec 100644 --- a/examples/vue3-boilerplate/package.json +++ b/examples/vue3-boilerplate/package.json @@ -8,7 +8,7 @@ "lint": "vue-cli-service lint" }, "dependencies": { - "@telekom/scale-components-neutral": "^3.0.0-beta.16", + "@telekom/scale-components-neutral": "^3.0.0-beta.110", "core-js": "^3.6.5", "vue": "^3.0.0" }, From 1ebb570b75d0c7e23f8d621a28333eed48d44da2 Mon Sep 17 00:00:00 2001 From: Felix Weber Date: Thu, 8 Sep 2022 11:45:24 +0200 Subject: [PATCH 4/4] fix: make vue samples consisten with each other (styling) --- examples/vue3-vite-boilerplate/src/App.vue | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/examples/vue3-vite-boilerplate/src/App.vue b/examples/vue3-vite-boilerplate/src/App.vue index e4e3918ce3..f554eb09d2 100644 --- a/examples/vue3-vite-boilerplate/src/App.vue +++ b/examples/vue3-vite-boilerplate/src/App.vue @@ -1,4 +1,5 @@