fix: add components to stencil dist outputtargets (#2152)

Co-authored-by: Loïc Fürhoff <[email protected]>
swisspost · Oct 31, 2023 · db9eebe · db9eebe
1 parent 454b534
commit db9eebe
Show file tree

Hide file tree

Showing 13 changed files with 88 additions and 50 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -3,9 +3,9 @@
   "version": "1.5.1",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
-  "main": "loader/index.cjs.js",
-  "module": "loader/index.js",
-  "es2017": "loader/index.2017.js",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2017": "dist/esm/index.js",
   "types": "dist/types/components.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",

diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -1 +1,10 @@
 export { Components, JSX } from './components';
+
+// Export every single component so it gets included in the dist output
+export { PostAlert } from './components/post-alert/post-alert';
+export { PostCollapsible } from './components/post-collapsible/post-collapsible';
+export { PostIcon } from './components/post-icon/post-icon';
+export { PostTabs } from './components/post-tabs/post-tabs';
+export { PostTabHeader } from './components/post-tab-header/post-tab-header';
+export { PostTabPanel } from './components/post-tab-panel/post-tab-panel';
+export { PostTooltip } from './components/post-tooltip/post-tooltip';
diff --git a/packages/components/stencil.config.ts b/packages/components/stencil.config.ts
@@ -20,10 +20,6 @@ export const config: Config = {
     {
       type: 'docs-readme',
     },
-    {
-      type: 'www',
-      serviceWorker: null, // disable service workers
-    },
     {
       type: 'docs-json',
       file: 'dist/docs.json',

diff --git a/packages/documentation/src/stories/getting-started/components/components-cdn-all.sample.html b/packages/documentation/src/stories/getting-started/components/components-cdn-all.sample.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/npm/@swisspost/design-system-components/dist/index.js"></script>
+  </head>
+  <body>
+    <post-icon name="1001"></post-icon>
+  </body>
+</html>
diff --git a/...s/documentation/src/stories/getting-started/components/components-cdn-esm-all.sample.html b/...s/documentation/src/stories/getting-started/components/components-cdn-esm-all.sample.html
@@ -0,0 +1,11 @@
+<html>
+  <head>
+    <script type="module">
+      import { defineCustomElements as definePostComponents } from 'https://cdn.jsdelivr.net/npm/@swisspost/design-system-components/loader/index.js';
+      definePostComponents();
+    </script>
+  </head>
+  <body>
+    <post-icon name="1001"></post-icon>
+  </body>
+</html>
diff --git a/...umentation/src/stories/getting-started/components/components-cdn-esm-specific.sample.html b/...umentation/src/stories/getting-started/components/components-cdn-esm-specific.sample.html
@@ -0,0 +1,11 @@
+<html>
+  <head>
+    <script type="module">
+      import { defineCustomElement as definePostIcon } from 'https://cdn.jsdelivr.net/npm/@swisspost/design-system-components/dist/components/post-icon.js';
+      definePostIcon();
+    </script>
+  </head>
+  <body>
+    <post-icon name="1001"></post-icon>
+  </body>
+</html>
diff --git a/packages/documentation/src/stories/getting-started/components/components-js-all.sample.js b/packages/documentation/src/stories/getting-started/components/components-js-all.sample.js
@@ -0,0 +1,2 @@
+import { defineCustomElements as definePostComponents } from '@swisspost/design-system-components/loader';
+definePostComponents();
diff --git a/...ponents/components-use-specific.sample.js → ...mponents/components-js-specific.sample.js b/...ponents/components-use-specific.sample.js → ...mponents/components-js-specific.sample.js
@@ -1,3 +1,2 @@
 import { defineCustomElement as definePostIcon } from '@swisspost/design-system-components/dist/components/post-icon';
-
 definePostIcon();
diff --git a/packages/documentation/src/stories/getting-started/components/components-use-all.sample.js b/packages/documentation/src/stories/getting-started/components/components-use-all.sample.js
diff --git a/packages/documentation/src/stories/getting-started/components/components.docs.mdx b/packages/documentation/src/stories/getting-started/components/components.docs.mdx
@@ -1,7 +1,10 @@
 import { Meta, Source } from '@storybook/blocks';
 import * as GettingStartedStories from './components.stories';
-import SampleUseAll from './components-use-all.sample?raw';
-import SampleUseSpecific from './components-use-specific.sample?raw';
+import SampleCdnAll from './components-cdn-all.sample.html?raw';
+import SampleCdnEsmAll from './components-cdn-esm-all.sample.html?raw';
+import SampleCdnEsmSpecific from './components-cdn-esm-specific.sample.html?raw';
+import SampleJsAll from './components-js-all.sample?raw';
+import SampleJsSpecific from './components-js-specific.sample?raw';
 
 <Meta of={GettingStartedStories} />
 
@@ -10,40 +13,35 @@ import SampleUseSpecific from './components-use-specific.sample?raw';
 [![npm version](https://badge.fury.io/js/@swisspost%2Fdesign-system-components.svg)](https://badge.fury.io/js/@swisspost%2Fdesign-system-components)
 
 A set of standard web components for easy integration with every framework or no framework at all.
+Depending on your project setup, there are different ways available to integrate our components.
 
-<ul>
-  <li><a href="#installation" target="_self">Installation</a></li>
-  <li><a href="#usage" target="_self">Usage</a></li>
-</ul>
+## Components without a framework
 
-## Installation
+If you're using a simple HTML page, you can add our components via a script tag.
 
-{/* https://stenciljs.com/docs/custom-elements#consuming-custom-elements */}
+<Source code={SampleCdnAll} language="html" />
+
+Alternatively, if you wanted to take advantage of ES Modules, you could include the components using an import statement.
+
+<Source code={SampleCdnEsmAll} language="html" />
 
-<Source
-  code={`npm install @swisspost/design-system-components`}
-  language="bash"
-/>
+This way, you can also include only specific components...
 
-## Usage
+<Source code={SampleCdnEsmSpecific} language="html" />
 
-Import all the available components into your project (for example into your `/src/main.ts` or `/src/index.js` file) and make them work:
+## Components with JavaScript bundler
 
-<Source
-  code={SampleUseAll}
-  language="javascript"
-/>
+If you're using a project setup which handels the bundling for you. You can simply import our components to your project.
+
+### Installation
+
+{/* https://stenciljs.com/docs/custom-elements#consuming-custom-elements */}
 
-Import specific components:
+<Source code={`npm install @swisspost/design-system-components`} language="bash" />
 
-<Source
-  code={SampleUseSpecific}
-  language="javascript"
-/>
+### Usage
 
-Use the imported components in your html:
+Import all or only specific components into your entry (e.g. `main.js`, `app.js`, ...) file.
 
-<Source
-  code={`<post-icon name="1000"></post-icon>`}
-  language="html"
-/>
+<Source code={SampleJsAll} language="javascript" />
+<Source code={SampleJsSpecific} language="javascript" />
diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json
@@ -12,15 +12,13 @@
   "bugs": {
     "url": "https://github.com/swisspost/design-system/issues"
   },
-  "main": "loader/index.cjs.js",
-  "module": "loader/index.js",
-  "es2015": "loader/index.es2017.js",
-  "es2017": "loader/index.es2017.js",
-  "jsnext:main": "loader/index.es2017.js",
-  "types": "loader/index.d.ts",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2017": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
-  "unpkg": "loader/cdn.js",
+  "unpkg": "dist/swisspost-internet-header/swisspost-internet-header.esm.js",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/internet-header/src/index.ts b/packages/internet-header/src/index.ts
@@ -1 +1,14 @@
 export { Components, JSX } from './components';
+
+// Export every single component so it gets included in the dist output
+export { PostInternetHeader } from './components/post-internet-header/post-internet-header';
+export { PostInternetBreadcrumbs } from './components/post-internet-breadcrumbs/post-internet-breadcrumbs';
+export { PostInternetFooter } from './components/post-internet-footer/post-internet-footer';
+
+export { PostSkiplinks } from './components/post-skiplinks/post-skiplinks';
+export { PostMetaNavigation } from './components/post-meta-navigation/post-meta-navigation';
+export { PostLanguageSwitch } from './components/post-language-switch/post-language-switch';
+export { PostLogo } from './components/post-logo/post-logo';
+export { PostMainNavigation } from './components/post-main-navigation/post-main-navigation';
+export { PostSearch } from './components/post-search/post-search';
+export { PostKlpLoginWidget } from './components/post-klp-login-widget/post-klp-login-widget';
diff --git a/packages/internet-header/stencil.config.ts b/packages/internet-header/stencil.config.ts
@@ -29,10 +29,6 @@ export const config: Config = {
     {
       type: 'docs-readme',
     },
-    {
-      type: 'www',
-      serviceWorker: null, // disable service workers,
-    },
     {
       type: 'docs-json',
       file: 'dist/docs.json',
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import { defineCustomElements as definePostComponents } from '@swisspost/design-system-components/loader';
		definePostComponents();
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,2 @@
		import { defineCustomElement as definePostIcon } from '@swisspost/design-system-components/dist/components/post-icon';

		definePostIcon();