feat: added static js bundle

parcelLab · Aug 24, 2023 · 6c42842 · 6c42842
1 parent 62702a1
commit 6c42842
Show file tree

Hide file tree

Showing 8 changed files with 1,285 additions and 81 deletions.
diff --git a/components-registry/cm-utils.js b/components-registry/cm-utils.js
@@ -0,0 +1,6 @@
+import {
+	PlCmBanner,
+	defineCustomElement,
+} from "../dist/components/pl-cm-banner.js";
+
+defineCustomElement(PlCmBanner);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,22 +32,21 @@
     "lint:prettier": "prettier --check --ignore-unknown .",
     "lint:staged": "lint-staged",
     "lint:types": "tsc --noEmit",
-    "lint": "npm run lint:types && npm run lint:eslint && npm run lint:prettier"
+    "lint": "npm run lint:types && npm run lint:eslint && npm run lint:prettier",
+    "bundle": "npm run build && npm run build-bundle",
+    "build-bundle": "webpack --mode production --config=webpack.components.config.js"
   },
   "dependencies": {
     "@stencil/core": "^3.0.0"
   },
   "devDependencies": {
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.11",
-    "jest": "^27.5.1",
-    "jest-cli": "^27.5.1",
-    "puppeteer": "^19.5.2",
     "@commitlint/cli": "17.4.2",
     "@commitlint/config-conventional": "17.4.2",
     "@parcellab/eslint-config": "^0.5.2",
     "@types/eslint": "^8.4.10",
     "@types/is-ci": "^3.0.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.11",
     "@typescript-eslint/eslint-plugin": "^5.49.0",
     "@typescript-eslint/parser": "^5.49.0",
     "c8": "^7.12.0",
@@ -57,8 +56,12 @@
     "eslint-plugin-unicorn": "^45.0.2",
     "husky": "^8.0.3",
     "is-ci": "^3.0.1",
+    "jest": "^27.5.1",
+    "jest-cli": "^27.5.1",
     "lint-staged": "^13.1.0",
-    "prettier": "^2.8.3"
+    "prettier": "^2.8.3",
+    "puppeteer": "^19.5.2",
+    "webpack-cli": "^5.1.4"
   },
   "license": "MIT",
   "c8": {

diff --git a/readme.md b/readme.md
@@ -12,6 +12,22 @@ For identifying what campaign to render you can pass either a parcelLab tracking
 
 For using the pl-cm-banner component, just import the es module somewhere in your website - and place the `<pl-cm-banner>` in your HTML, wherever you want to display the campaign manager banner:
 
+As static JS bundle from the parcelLab CDN:
+
+```html
+<!-- ... -->
+  <script src="https://cdn.parcellab.com/js/cm-utils/bundle.js"></script>
+</head>
+<body>
+
+  <div class="col">
+    <pl-cm-banner></pl-cm-banner>
+  <div/>
+  <!-- ... -->
+```
+
+Or as ESM Javascript Module, directly from unpkg package manager:
+
 ```html
 <!-- ... -->
   <script type="module" src="https://unpkg.com/@parcellab/cm-utils"></script>

diff --git a/stencil.config.ts b/stencil.config.ts
@@ -3,19 +3,9 @@ import { Config } from "@stencil/core";
 export const config: Config = {
 	namespace: "cm-utils",
 	outputTargets: [
-		{
-			type: "dist",
-			esmLoaderPath: "../loader",
-		},
 		{
 			type: "dist-custom-elements",
-		},
-		{
-			type: "docs-readme",
-		},
-		{
-			type: "www",
-			serviceWorker: null, // disable service workers
+			externalRuntime: false,
 		},
 	],
 };