Merge pull request #36 from tomhazledine/web-component

Web component
tomhazledine · Feb 9, 2024 · ccb6382 · ccb6382
2 parents f7a68d8 + 7a25d39
commit ccb6382
Show file tree

Hide file tree

Showing 12 changed files with 220 additions and 15 deletions.
diff --git a/build.js b/build.js
@@ -13,12 +13,32 @@ const globalConfig = {
     sourcemap: args.mode === "development"
 };
 
+const stylesheets = [
+    "all",
+    "main",
+    "default",
+    "skeleton",
+    "bbc",
+    "eatenbymonsters",
+    "itunes",
+    "pitchfork",
+    "soundcloud"
+];
+const components = ["default", "skeleton"];
+
 const config = {
     js: {
         ...globalConfig,
         format: "esm",
-        entryPoints: ["src/js/index.js"],
-        entryNames: "picobel"
+        entryPoints: [
+            { out: "picobel", in: "src/js/index.js" },
+            { out: "picobel-component", in: "src/js/web-component.js" },
+            ...components.map(theme => ({
+                out: `picobel-component-${theme}`,
+                in: `src/js/web-component.${theme}.js`
+            }))
+        ],
+        loader: { ".css": "text" }
     },
     legacy: {
         ...globalConfig,
@@ -28,24 +48,14 @@ const config = {
     },
     css: {
         ...globalConfig,
-        entryPoints: [
-            "src/css/picobel.all.css",
-            "src/css/picobel.main.css",
-            "src/css/picobel.default.css",
-            "src/css/picobel.skeleton.css",
-            "src/css/picobel.bbc.css",
-            "src/css/picobel.eatenbymonsters.css",
-            "src/css/picobel.itunes.css",
-            "src/css/picobel.pitchfork.css",
-            "src/css/picobel.soundcloud.css"
-        ]
+        entryPoints: stylesheets.map(theme => `src/css/picobel.${theme}.css`)
     }
 };
 
 const build = async config => {
     try {
-        await esbuild.build(config.js);
         await esbuild.build(config.css);
+        await esbuild.build(config.js);
         await esbuild.build(config.legacy);
     } catch (e) {
         if (e.errors && e.errors[0].location) {

diff --git a/build/picobel-component-default.js b/build/picobel-component-default.js
diff --git a/build/picobel-component-skeleton.js b/build/picobel-component-skeleton.js
diff --git a/build/picobel-component.js b/build/picobel-component.js
diff --git a/demo/component.html b/demo/component.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Picobel.js Test Page</title>
+
+        <!-- Load the Picobel CSS -->
+        <link
+            rel="stylesheet"
+            href="../src/css/picobel.all.css"
+            type="text/css"
+        />
+    </head>
+    <body style="font-family: sans-serif">
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li>
+                    <a href="composable.html">Composable</a>
+                </li>
+                <li><a href="types.html">Types</a></li>
+                <li><a href="types.html">Manual</a></li>
+                <li>Web Component</li>
+            </ul>
+        </nav>
+
+        <div class="generic-wrapper">
+            <h1>Testing Picobel: web component</h1>
+            <h2>
+                <code>&lt;picobel-player&gt;</code> loaded with no inbuilt
+                styles
+            </h2>
+
+            <picobel-player class="foo">
+                <audio
+                    src="https://eatenbymonsters.com/audio/christmas/web/MasterSlashSlave_AllIWantForChristmas.mp3"
+                    title="All I Want for Christmas"
+                    data-artist="Master Slash Slave"
+                    controls
+                >
+                    Your browser does not support the
+                    <code>audio</code> element.
+                </audio>
+            </picobel-player>
+
+            <h2>
+                <code>&lt;picobel-player-default&gt;</code> loaded (the
+                "default" theme)
+            </h2>
+
+            <picobel-player-default>
+                <audio
+                    src="https://eatenbymonsters.com/audio/christmas/web/MasterSlashSlave_AllIWantForChristmas.mp3"
+                    title="All I Want for Christmas"
+                    data-artist="Master Slash Slave"
+                    controls
+                >
+                    Your browser does not support the
+                    <code>audio</code> element.
+                </audio>
+            </picobel-player-default>
+
+            <h2>
+                <code>&lt;picobel-player&gt;</code> loaded with
+                <code>data-theme="skeleton"</code> and external stylesheet
+            </h2>
+
+            <picobel-player data-theme="skeleton">
+                <audio
+                    src="https://eatenbymonsters.com/audio/christmas/web/MasterSlashSlave_AllIWantForChristmas.mp3"
+                    title="All I Want for Christmas"
+                    data-artist="Master Slash Slave"
+                    controls
+                >
+                    Your browser does not support the
+                    <code>audio</code> element.
+                </audio>
+            </picobel-player>
+        </div>
+
+        <script
+            type="text/javascript"
+            src="../build/picobel-component.js"
+        ></script>
+        <script
+            type="text/javascript"
+            src="../build/picobel-component-default.js"
+        ></script>
+    </body>
+</html>
diff --git a/demo/composable.html b/demo/composable.html
@@ -20,6 +20,7 @@
                 <li>Composable</li>
                 <li><a href="types.html">Types</a></li>
                 <li><a href="manual.html">Manual</a></li>
+                <li><a href="component.html">Web Component</a></li>
             </ul>
         </nav>
         <div class="generic-wrapper">

diff --git a/demo/index.html b/demo/index.html
@@ -20,6 +20,7 @@
                 </li>
                 <li><a href="types.html">Types</a></li>
                 <li><a href="manual.html">Manual</a></li>
+                <li><a href="component.html">Web Component</a></li>
             </ul>
         </nav>
 

diff --git a/demo/manual.html b/demo/manual.html
@@ -14,12 +14,13 @@
     <body style="font-family: sans-serif">
         <nav>
             <ul>
-                <li><a href="/">Home</a></li>
+                <li><a href="index.html">Home</a></li>
                 <li>
                     <a href="composable.html">Composable</a>
                 </li>
                 <li><a href="types.html">Types</a></li>
                 <li>Manual</li>
+                <li><a href="component.html">Web Component</a></li>
             </ul>
         </nav>
 

diff --git a/demo/types.html b/demo/types.html
@@ -20,6 +20,7 @@
                 <li><a href="composable.html">Composable</a></li>
                 <li>Types</li>
                 <li><a href="manual.html">Manual</a></li>
+                <li><a href="component.html">Web Component</a></li>
             </ul>
         </nav>
         <h1>Testing Picobel: source types</h1>

diff --git a/src/js/web-component.default.js b/src/js/web-component.default.js
@@ -0,0 +1,36 @@
+import { picobel } from "./Picobel.js";
+
+import styles from "../../build/picobel.default.css";
+
+// Create a class for the element
+class PicobelWC extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    mountStyles(theme = "default") {
+        const styleId = `picobel-styles-${theme}`;
+        if (!document.getElementById(styleId)) {
+            const styleEl = document.createElement("style");
+            styleEl.id = styleId;
+            // styleEl.textContent = styles[theme];
+            styleEl.textContent = styles;
+            document.head.appendChild(styleEl);
+        }
+    }
+
+    connectedCallback() {
+        const theme = this.getAttribute("data-theme") || "default";
+        const options = { theme, context: this };
+        const components = this.getAttribute("data-components");
+        if (components) {
+            options.components = JSON.parse(components);
+        }
+        picobel(options);
+        this.mountStyles(theme);
+    }
+}
+
+if (typeof window !== "undefined" && "customElements" in window) {
+    window.customElements.define("picobel-player-default", PicobelWC);
+}
diff --git a/src/js/web-component.js b/src/js/web-component.js
@@ -0,0 +1,24 @@
+import { picobel } from "./Picobel.js";
+
+// Create a class for the element
+class PicobelWC extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        const className = this.classList[0] || "default";
+        const theme = this.getAttribute("data-theme") || className;
+        console.log({ theme });
+        const options = { theme, context: this };
+        const components = this.getAttribute("data-components");
+        if (components) {
+            options.components = JSON.parse(components);
+        }
+        picobel(options);
+    }
+}
+
+if (typeof window !== "undefined" && "customElements" in window) {
+    window.customElements.define("picobel-player", PicobelWC);
+}
diff --git a/src/js/web-component.skeleton.js b/src/js/web-component.skeleton.js
@@ -0,0 +1,36 @@
+import { picobel } from "./Picobel.js";
+
+import styles from "../../build/picobel.skeleton.css";
+
+// Create a class for the element
+class PicobelWC extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    mountStyles(theme = "skeleton") {
+        const styleId = `picobel-styles-${theme}`;
+        if (!document.getElementById(styleId)) {
+            const styleEl = document.createElement("style");
+            styleEl.id = styleId;
+            // styleEl.textContent = styles[theme];
+            styleEl.textContent = styles;
+            document.head.appendChild(styleEl);
+        }
+    }
+
+    connectedCallback() {
+        const theme = this.getAttribute("data-theme") || "skeleton";
+        const options = { theme, context: this };
+        const components = this.getAttribute("data-components");
+        if (components) {
+            options.components = JSON.parse(components);
+        }
+        picobel(options);
+        this.mountStyles(theme);
+    }
+}
+
+if (typeof window !== "undefined" && "customElements" in window) {
+    window.customElements.define("picobel-player-skeleton", PicobelWC);
+}