@yhwh-script/shadow-h4x 1.0.0

package/LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

package/README.md

@@ -0,0 +1,31 @@
+# shadow-h4x
+
+This is a lifecycle implementation of CustomElements for standard-conforming WebComponents.
+
+## Getting started
+
+To install shadow-h4x into your project, simply run
+
+```bash
+npm install @yhwh-script/shadow-h4x
+```
+
+## How-To
+
+Please stick to the following conventions! When working with Vite (recommended), put your components into `public/components` folder. Then add a `generate` script command to your `package.json`:
+
+```javascript
+  "scripts": {
+    "dev": "npm run generate && vite",
+    "build": "npm run generate && vite build",
+    "preview": "vite preview",
+    "generate": "node node_modules/@yhwh-script/shadow-h4x/generate.cjs"
+  }
+```
+
+This will autogenerate a map of your WebComponents inside the `public/components` folder and define each WebComponents in the CustemElements registry. This is a feature! You don't have to register your elements manually. Just put them into the right folder.
+
+Important:
+
+Each WebComponent must be located in a subfolder under `public/components`, for instance:
+`router/router-app.html`. 

package/generate.cjs

@@ -0,0 +1,48 @@
+const fs = require('fs')
+const path = require('path');
+
+process.chdir('.');
+
+const constants = {
+    COMPONENTS_DIR: path.join(path.resolve(__dirname, '../../'), 'public/components'),
+}
+
+const elements = [];
+try {
+    fs.readdirSync(constants.COMPONENTS_DIR, { withFileTypes: true })
+        .filter((dir) => dir.isDirectory())
+        .forEach((folder) => {
+            console.log(folder);
+            const fileNames = fs.readdirSync(
+                path.join(constants.COMPONENTS_DIR, folder.name)
+            );
+            fileNames.forEach((fileName) => {
+                if (fileName.indexOf("-") != -1) {
+                    const dashSplit = fileName.split('-');
+                    const prefix = dashSplit[0];
+                    const dotSplit = dashSplit[1].split('.');
+                    const suffix = dotSplit[0];
+                    // elements.push(join(constants.ELEMENTS_DIR, folder.name, prefix + '-' + suffix + '.html'))
+
+                    // Solution 1: Use path.posix.join for consistent forward slashes
+                    const elementPath = path.posix.join('components', folder.name, prefix + '-' + suffix + '.html');
+                    elements.push(elementPath);
+
+                    // Alternative Solution 2: Normalize path separators
+                    // const elementPath = join(constants.ELEMENTS_DIR, folder.name, prefix + '-' + suffix + '.html');
+                    // elements.push(elementPath.replace(/\\/g, '/'));
+                }
+            });
+        });
+} catch (e) {
+    if (e instanceof TypeError) {
+        console.error("WRONG GENERATION ERROR: Maybe there is a wrong filename? Use prefix/prefix-suffix.html in elements folder!")
+        // TODO should I ignore? maybe add a start option. Or prompt to move.
+    }
+    throw e;
+}
+
+fs.writeFileSync(
+    path.join('public/components', 'index.js'),
+    `export const htmlFiles=${JSON.stringify(elements, null, 2)};`
+)

package/index.js

@@ -0,0 +1,80 @@
+import { htmlFiles } from '/components';
+
+window.getShadowDocument = function magic(hostDataIDs) {
+    if (typeof hostDataIDs === 'string') { hostDataIDs = hostDataIDs.split(','); }
+    else if (Array.isArray(hostDataIDs)) { hostDataIDs = hostDataIDs.toReversed(); }
+    else return undefined;
+    if (hostDataIDs) {
+        let shadowDOM = document;
+        for (let hostDataID of hostDataIDs) {
+            let found = shadowDOM.querySelector('[data-id="' + hostDataID + '"]');
+            if (found) { shadowDOM = found.shadowRoot; } else {
+                console.error({hostDataID});
+                return null; }
+        }
+        return shadowDOM;
+    }
+    return null;
+}
+for (const filePath of htmlFiles) {
+    const fileName = filePath.split("/").pop();
+    const dashSplit = fileName.split('-');
+    const prefix = dashSplit[0];
+    const dotSplit = dashSplit[1].split('.'); // TODO accept three-fold-components
+    const suffix = dotSplit[0];
+    fetch(filePath)
+    .then(file => file.text())
+    .then(html => {
+        const fragment = document.createRange().createContextualFragment(html);
+        const scriptFragment = fragment.querySelector("script");
+        const styleFragment = fragment.querySelector("style");
+        const templateFragment = fragment.querySelector("template");
+        customElements.define(`${prefix}-${suffix}`, class extends HTMLElement {
+            constructor() {
+                super();
+                const shadowRoot = this.attachShadow({ mode: "open" });
+                console.log({scriptFragment})
+            }
+            connectedCallback() {
+                this.hostDataIDs = []; // used to find the nested shadowDocument
+                this.dataset.id = Math.random().toString(16).substring(2, 8); // should suffice
+                let hostElement = this;
+                while (hostElement && hostElement.dataset.id) { // +3 get parent.host data-id 's
+                    this.hostDataIDs.push(hostElement.dataset.id);
+                    hostElement = hostElement.getRootNode().host;
+                }
+                this.#render();
+            }
+            #render() {
+                this.shadowRoot.replaceChildren();
+                this.#appendTemplate();
+                this.#appendStyle();
+                this.#appendScript();
+            }
+            #appendScript() {
+                if (scriptFragment) {
+                    const scriptElement = document.createElement("script");
+                    scriptElement.setAttribute("type", "module");
+                    scriptElement.textContent = `
+const shadowDocument = getShadowDocument('${this.hostDataIDs.toReversed().toString()}');
+${scriptFragment ? scriptFragment.textContent : ''}
+`;
+                    console.log("appending", scriptFragment.textContent)
+                    this.shadowRoot.appendChild(scriptElement);
+                }
+            }
+            #appendStyle() {
+                if (styleFragment) {
+                    let clonedStyle = styleFragment.cloneNode(true);
+                    this.shadowRoot.appendChild(clonedStyle);
+                }
+            }
+            #appendTemplate() {
+                if (templateFragment) {
+                    const clonedFragment = templateFragment.content.cloneNode(true);
+                    this.shadowRoot.appendChild(clonedFragment);
+                }
+            }
+        });
+    });
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+    "author": "Jahrome <yhwhscript@gmail.com>",
+    "bugs": {
+        "url": "https://github.com/yhwh-script/shadow-h4x/issues"
+    },
+    "description": "This is a lifecycle implementation of CustomElements for standard-conforming WebComponents.",
+    "homepage": "https://github.com/yhwh-script/shadow-h4x#readme",
+    "keywords": [
+        "JavaScript",
+        "Hack",
+        "CustomElements",
+        "WebComponents",
+        "Vanilla"
+    ],
+    "license": "Unlicense",
+    "main": "index.js",
+    "name": "@yhwh-script/shadow-h4x",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/yhwh-script/shadow-h4x.git"
+    },
+    "type": "module",
+    "version": "1.0.0"
+}