feat: provide Web Components (StencilJS)

.config/.jscpd.json

@@ -3,6 +3,7 @@
 	"reporters": ["console"],
 	"minTokens": 65,
 	"ignore": [
+		"**/.angular/**",
 		".history/**",
 		"**/__snapshots__/**",
 		"**/.github/**",

.eslintignore

@@ -10,4 +10,4 @@
 /showcases/nuxt-showcase/**
 build-outputs/
 build-showcases/
-/output/vue/scripts/fix-any-types.ts
+/output/**

.github/workflows/default.yml

@@ -57,6 +57,12 @@ jobs:
     with:
       version: ${{ needs.get-playwright-version.outputs.version }}
 
+  build-showcase-stencil:
+    uses: ./.github/workflows/01-build-showcases.yml
+    needs: [build-packages]
+    with:
+      showcase: stencil-showcase
+
   build-showcase-angular:
     uses: ./.github/workflows/01-build-showcases.yml
     needs: [build-packages]
@@ -97,6 +103,13 @@ jobs:
     uses: ./.github/workflows/01-build-patternhub.yml
     needs: [build-packages]
 
+  test-showcase-stencil:
+    uses: ./.github/workflows/02-e2e-showcases.yml
+    needs: [build-showcase-stencil, get-playwright-version]
+    with:
+      version: ${{ needs.get-playwright-version.outputs.version }}
+      showcase: stencil-showcase
+
   test-showcase-angular:
     uses: ./.github/workflows/02-e2e-showcases.yml
     needs: [build-showcase-angular, get-playwright-version]
@@ -175,6 +188,7 @@ jobs:
     steps:
       - name: 🎉 Checks done
         run: |
+          resultBuildShowcaseStencil="${{ needs.build-showcase-stencil.result }}"
           resultBuildShowcaseAngular="${{ needs.build-showcase-angular.result }}"
           resultBuildShowcaseAngularSSR="${{ needs.build-showcase-angular-ssr.result }}"
           resultBuildShowcaseReact="${{ needs.build-showcase-react.result }}"
@@ -185,19 +199,22 @@ jobs:
           resultBuildOutputs="${{ needs.build-outputs.result }}"
           resultTestPackages="${{ needs.test-components.result }}"
           resultTestFoundations="${{ needs.test-foundations.result }}"
+          resultTestShowcaseStencil="${{ needs.test-showcase-stencil.result }}"
           resultTestShowcaseAngular="${{ needs.test-showcase-angular.result }}"
           resultTestShowcaseReact="${{ needs.test-showcase-react.result }}"
           resultTestShowcaseVue="${{ needs.test-showcase-vue.result }}"
           resultTestShowcasePatternhub="${{ needs.test-showcase-patternhub.result }}"
-          resultTestScreenReaders="${{ needs.test-screen-reader.result }}"
+          resultTestScreenReader="${{ needs.test-screen-reader.result }}"
           if [[ $resultTestFoundations == "success" ]] && \
-             [[ $resultTestScreenReaders == "success" ]] && \
+             [[ $resultTestScreenReader == "success" ]] && \
+             [[ $resultTestShowcaseStencil == "success" ]] && \
              [[ $resultTestShowcaseAngular == "success" ]] && \
              [[ $resultTestShowcaseReact == "success" ]] && \
              [[ $resultTestShowcaseVue == "success" ]] && \
              [[ $resultTestShowcasePatternhub == "success" ]] && \
              [[ $resultTestPackages == "success" ]] && \
              [[ $resultBuildOutputs == "success" ]] && \
+             [[ $resultBuildShowcaseStencil == "success" ]] && \
              [[ $resultBuildShowcaseAngular == "success" ]] && \
              [[ $resultBuildShowcaseAngularSSR == "success" ]] && \
              [[ $resultBuildShowcaseReact == "success" ]] && \
@@ -213,6 +230,7 @@ jobs:
           fi
     needs:
       [
+        build-showcase-stencil,
         build-showcase-angular,
         build-showcase-angular-ssr,
         build-showcase-react,
@@ -222,6 +240,7 @@ jobs:
         build-showcase-patternhub,
         build-outputs,
         test-components,
+        test-showcase-stencil,
         test-showcase-angular,
         test-showcase-react,
         test-showcase-vue,

.github/workflows/release.yml

@@ -51,6 +51,12 @@ jobs:
     with:
       version: ${{ needs.get-playwright-version.outputs.version }}
 
+  build-showcase-stencil:
+    uses: ./.github/workflows/01-build-showcases.yml
+    needs: [build-packages]
+    with:
+      showcase: stencil-showcase
+
   build-showcase-angular:
     uses: ./.github/workflows/01-build-showcases.yml
     needs: [build-packages]
@@ -94,6 +100,13 @@ jobs:
       release: ${{ needs.get-publish-version.outputs.release }}
       preRelease: ${{ needs.get-publish-version.outputs.preRelease }}
 
+  test-showcase-stencil:
+    uses: ./.github/workflows/02-e2e-showcases.yml
+    needs: [build-showcase-stencil, get-playwright-version]
+    with:
+      version: ${{ needs.get-playwright-version.outputs.version }}
+      showcase: stencil-showcase
+
   test-showcase-angular:
     uses: ./.github/workflows/02-e2e-showcases.yml
     needs: [build-showcase-angular, get-playwright-version]
@@ -134,6 +147,7 @@ jobs:
     steps:
       - name: 🎉 Checks done
         run: |
+          resultBuildShowcaseStencil="${{ needs.build-showcase-stencil.result }}"
           resultBuildShowcaseAngular="${{ needs.build-showcase-angular.result }}"
           resultBuildShowcaseAngularSSR="${{ needs.build-showcase-angular-ssr.result }}"
           resultBuildShowcaseReact="${{ needs.build-showcase-react.result }}"
@@ -144,19 +158,22 @@ jobs:
           resultBuildOutputs="${{ needs.build-outputs.result }}"
           resultTestPackages="${{ needs.test-components.result }}"
           resultTestFoundations="${{ needs.test-foundations.result }}"
+          resultTestShowcaseStencil="${{ needs.test-showcase-stencil.result }}"
           resultTestShowcaseAngular="${{ needs.test-showcase-angular.result }}"
           resultTestShowcaseReact="${{ needs.test-showcase-react.result }}"
           resultTestShowcaseVue="${{ needs.test-showcase-vue.result }}"
           resultTestShowcasePatternhub="${{ needs.test-showcase-patternhub.result }}"
           resultTestScreenReader="${{ needs.test-screen-reader.result }}"
           if [[ $resultTestFoundations == "success" ]] && \
              [[ $resultTestScreenReader == "success" ]] && \
+             [[ $resultTestShowcaseStencil == "success" ]] && \
              [[ $resultTestShowcaseAngular == "success" ]] && \
              [[ $resultTestShowcaseReact == "success" ]] && \
              [[ $resultTestShowcaseVue == "success" ]] && \
              [[ $resultTestShowcasePatternhub == "success" ]] && \
              [[ $resultTestPackages == "success" ]] && \
              [[ $resultBuildOutputs == "success" ]] && \
+             [[ $resultBuildShowcaseStencil == "success" ]] && \
              [[ $resultBuildShowcaseAngular == "success" ]] && \
              [[ $resultBuildShowcaseAngularSSR == "success" ]] && \
              [[ $resultBuildShowcaseReact == "success" ]] && \
@@ -172,6 +189,7 @@ jobs:
           fi
     needs:
       [
+        build-showcase-stencil,
         build-showcase-angular,
         build-showcase-angular-ssr,
         build-showcase-react,
@@ -181,6 +199,7 @@ jobs:
         build-showcase-patternhub,
         build-outputs,
         test-components,
+        test-showcase-stencil,
         test-showcase-angular,
         test-showcase-react,
         test-showcase-vue,

.gitignore

@@ -27,7 +27,6 @@ packages/components/src/**/*.css.map
 
 /output/**/src
 /output/**/dist
-/output/**/.angular
 /output/**/playwright*
 /output/**/test-results
 
@@ -58,3 +57,8 @@ showcases/patternhub/public/iframe-resizer/*
 /packages/foundations/assets/icons/functional/fonts/**/*.svg
 /packages/foundations/assets/icons/functional/fonts/**/*.ttf
 /packages/foundations/assets/icons/functional/fonts/**/*.woff
+
+/output/stencil/.stencil
+/output/stencil/loader
+/output/stencil/www
+**/.angular

.xo-config.cjs

@@ -20,11 +20,7 @@ module.exports = {
 			}
 		},
 		{
-			files: [
-				'./**/angular-**/**',
-				'./showcases/vanilla-showcase/**',
-				'./showcases/svelte-showcase/**'
-			],
+			files: ['./**/angular-**/**', './showcases/svelte-showcase/**'],
 			rules: {
 				'new-cap': 0, // fixes issue with @Component annotation
 				'import/no-unassigned-import': 0, // fixes issue with including zone.js or db-components

README.md

@@ -35,6 +35,7 @@ designers, and content authors build, maintain, and scale best of class digital
 | [ngx-components](https://github.com/db-ui/mono/tree/main/output/angular)    | Native Angular components           | [![@db-ui/ngx-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/ngx-components "DB UI – on NPM")     |
 | [react-components](https://github.com/db-ui/mono/tree/main/output/react)    | Native React components             | [![@db-ui/react-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/react-components "DB UI – on NPM") |
 | [v-components](https://github.com/db-ui/mono/tree/main/output/vue)          | Native Vue 3 components             | [![@db-ui/v-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/v-components "DB UI – on NPM")         |
+| [web-components](https://github.com/db-ui/mono/tree/main/output/vue)        | Web Components                      | [![@db-ui/web-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ui%2Fmono%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ui/web-components "DB UI – on NPM")     |
 
 ## How to use
 

output/webcomponent/README.md → output/stencil/README.md

@@ -9,38 +9,68 @@ A web-component library containing all components of [DB UX Design System (techn
 
 ## Install
 
-`npm i @db-ui/web-components`
+```shell
+npm i @db-ui/web-components
+```
 
-## Dependencies
+> **Note:** This will install [`@db-ui/foundations`](https://www.npmjs.com/package/@db-ui/foundations) and [`@db-ui/components`](https://www.npmjs.com/package/@db-ui/components) as well which contains the `css`/`scss` files
 
-```json
-# package.json
-"copy:assets": "cpr node_modules/@db-ui/foundations/assets ./public/assets  -o",
-"copy:styles": "cpr node_modules/@db-ui/components/build/styles/db-ui-42.css ./public/styles/db-ui-42.css  -o",
-"copy:components": "cpr node_modules/@db-ui/components/build/components ./public/components  -o",
+## Styling Dependencies
+
+Import the styles in scss or css. Based on your technology the file names could be different.
+
+-   Default (db-ui-42): points to `../assets`
+-   Rollup (db-ui-42-rollup): points to `@db-ui/foundations/assets`
+-   Webpack (db-ui-42-webpack): points to `~@db-ui/foundations/assets`
+
+<details>
+  <summary><strong>SCSS</strong></summary>
+
+```scss
+// index.scss
+@forward "@db-ui/components/build/styles/db-ui-42-rollup";
 ```
 
-```html
-# index.html
+</details>
+<details>
+  <summary><strong>CSS</strong></summary>
 
-<head>
-	...
-	<link rel="stylesheet" href="styles/db-ui-42.css" />
-	...
-</head>
+```js
+// main.js
+import "@db-ui/components/build/styles/db-ui-42-rollup.css";
 ```
 
+</details>
+
+> **Note:** The `db-ui-42` file contains optional and all components styles. If you consider performance issues see [@db-ui/components](https://www.npmjs.com/package/@db-ui/components) for more information.
+
 ## Usage
 
-```javascript
-import "node_modules/@db-ui/web-components/components/button/button.js";
+```js
+// main.js
+import { defineCustomElements } from "@db-ui/web-components";
+defineCustomElements();
+```
 
+```html
 ...
-<db-button variant="brand" icon="person">Test</db-button>
+<db-button icon="person">Test</db-button>
 ...
+```
 
+## VSCode autocomplete
+
+If you don't have it already, add a VS Code settings folder and file at the root of your project - `.vscode/settings.json`. Then add or append the following code:
+
+```json
+{
+	"html.customData": [
+		"./node_modules/@db-ui/web-components/dist/vscode.html-custom-data.json"
+	]
+}
 ```
 
+
 ## Deutsche Bahn brand
 
 As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even when being used with the code that we're provide with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UI products free to use and release it under the Apache 2.0 license.

output/stencil/custom-elements-manifest.config.js

@@ -0,0 +1,67 @@
+import { generateVsCodeCustomElementData } from 'custom-element-vs-code-integration';
+import { getTsProgram } from 'cem-plugin-expanded-types';
+import { resolveTypesPlugin } from './scripts/resolveTypes.js';
+import { generateJetBrainsWebTypes } from 'custom-element-jet-brains-integration';
+import { writeFileSync } from 'node:fs';
+import { customElementsManifestToMarkdown } from '@custom-elements-manifest/to-markdown';
+
+const outdir = './dist';
+
+const vsCodeOptions = {
+	outdir,
+	cssFileName: null
+};
+
+const intellijOptions = {
+	outdir,
+	excludeCss: true,
+	referenceTemplate: (name, tag) => ({
+		name: 'Documentation',
+		url: `https://db-ui.github.io/mono/review/main/components/${tag.replace('db-', '')}/properties`
+	})
+};
+
+export default {
+	globs: ['src'],
+	outdir,
+	stencil: true,
+	overrideModuleCreation: ({ ts, globs }) => {
+		const program = getTsProgram(ts, globs);
+		const sourceFiles = program.getSourceFiles();
+		const filteredFiles = [];
+
+		// Wired issue .filter() didn't work
+		sourceFiles.forEach((sf) => {
+			if (sf.fileName.includes('node_modules')) {
+				return false;
+			}
+			const foundGlob = globs.find((glob) => sf.fileName.includes(glob));
+			if (foundGlob) {
+				filteredFiles.push(sf);
+			}
+		});
+		return filteredFiles;
+	},
+	plugins: [
+		resolveTypesPlugin(({ customElementsManifest }) => {
+			writeFileSync(
+				`${outdir}/custom-elements.md`,
+				customElementsManifestToMarkdown(customElementsManifest, {
+					private: 'hidden',
+					omitDeclarations: [
+						'mixins',
+						'variables',
+						'functions',
+						'exports'
+					],
+					omitSections: ['attributes', 'methods']
+				})
+			);
+			generateVsCodeCustomElementData(
+				customElementsManifest,
+				vsCodeOptions
+			);
+			generateJetBrainsWebTypes(customElementsManifest, intellijOptions);
+		})
+	]
+};