@package-verse/esmpack 1.0.3 → 1.0.5

package/init.js

@@ -0,0 +1,32 @@
+const ESMPack = window.ESMPack ||= {};
+ESMPack.installed ||= new Set();
+
+ESMPack.markAsInstalled ||= (urls) => Array.isArray(urls)
+    ? urls.forEach(url => ESMPack.installed.add(url))
+    : ESMPack.installed.add(urls);
+
+ESMPack.installStyleSheet ||= (url) => {
+
+    const installCss = (url) => {
+
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = url;
+        document.head.insertAdjacentElement(
+            /\.global\./i.test(url)
+            ? "afterbegin"
+            : "beforeend", link);
+    };
+
+    if (ESMPack.installed.has(url)) {
+        return;
+    }
+    ESMPack.installed.add(url);
+    if(document.readyState === "complete") {
+        installCss(url);
+    } else {
+        document.addEventListener("DOMContentLoaded", () => {
+            installCss(url);
+        }, { once: true });
+    }
+};

package/pack.js

@@ -0,0 +1 @@
+import "./dist/pack/pack.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@package-verse/esmpack",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "ESM Pack Packer and Web Server with PostCSS and ESM Loader",
   "homepage": "https://github.com/package-verse/esmpack#readme",
   "bugs": {
@@ -34,6 +34,7 @@
     "postcss-url": "^10.1.3"
   },
   "dependencies": {
+    "@babel/core": "^7.29.0",
     "@web-atoms/date-time": "^3.0.3",
     "colors": "^1.4.0",
     "http-proxy-middleware": "^3.0.5",

package/src/pack/FilePacker.ts

@@ -0,0 +1,24 @@
+/**
+ * File Packer must do following tasks...
+ * 1. Visit every JavaScript file
+ * 2. Change all imports, redirect CSS imports as css.js file that will include CSS on the page ...
+ * 3. Create .pack.js with all nested imports if file imports `@web-atoms/core/dist/Pack`
+ * 4. Packed file must set all css as installed.
+ */
+export default class FilePacker {
+
+    globalCss = [];
+    localCss = [];
+
+    constructor(
+        public readonly root: string,
+        public readonly src: string
+    ) {
+        // empty
+    }
+
+    async pack() {
+
+    }
+
+}

package/src/parser/babel.ts

@@ -0,0 +1,45 @@
+import { transform } from "@babel/core";
+import { readFileSync } from "fs";
+
+export class Babel {
+
+    static transform({ file, resolve }: { file: string, resolve: (url: string) => string }) {
+
+        const presets = {
+            sourceType: "module",
+            sourceMaps: true,
+            inputSourceMap: true,
+            compact: false,
+            comments: false,
+            getModuleId: () => "v",
+            "plugins": [
+                [
+                    function(babel) {
+                        return {
+                            name: "Import Transformer",
+                            visitor: {
+                                ImportDeclaration(node) {
+                                    const e = node.node;
+                                    let source = e.source?.value;
+                                    if (!source) {
+                                        return node;
+                                    }
+                                    source = resolve(source);
+                                    e.source.value = source;
+                                    return node;
+                                },
+                            }
+                        };
+                    }
+                ]
+
+            ]
+        };
+
+        const p = { ... presets, filename: file };
+        const code = readFileSync(file, "utf8");
+        const result = transform(code, p);
+        return result.code;
+    }
+
+}

package/src/serve/send/sendCSSJS.ts

@@ -1,22 +1,22 @@
+import { readFileSync } from "node:fs";
 import { IncomingMessage, ServerResponse } from "node:http";
+import { fileURLToPath } from "node:url";
 
 export default function sendCSSJS(path: string, req: IncomingMessage, res: ServerResponse) {
-    const text = `
-(function () {
-
-    function loadCSS() {
-        if (typeof ESMPack === "undefined") {
-            setTimeout(loadCSS, 100);
-            return;
-        }
-        ESMPack.installStyleSheet("/${path}");
-    }
-    loadCSS();
 
+    const init = fileURLToPath(import.meta.resolve("../../../init.js"));
+    const initText = readFileSync(init, "utf-8");
 
-}())
+    const text = `
+(function (link) {
+    ${initText};
+    ESMPack.installStyleSheet(link);
+}("/${path}"))
 `;
 
-    res.writeHead(200, { "content-type": "text/javascript"});
+    res.writeHead(200, {
+        "content-type": "text/javascript",
+        "cache-control": "no-cache"
+    });
     res.end(text);
 }

package/src/serve/send/sendJS.ts

@@ -1,52 +1,71 @@
-import { readFileSync } from "node:fs";
 import { IncomingMessage, ServerResponse } from "node:http";
-import { RegExpExtra } from "../../core/RegExpExtra.js";
+import { Babel } from "../../parser/babel.js";
+import { parse } from "node:path";
 
 export default function sendJS(path: string, req: IncomingMessage, res: ServerResponse) {
-    let text = readFileSync(path, "utf-8");
 
-    // change references....
-    // text = text.replace(/from\s*\"([^\.][^\"]+)\"/gm, `from "/node_modules/$1"`);
 
-    // remap CSS
-    text = RegExpExtra.replaceAll(text, /from\s*\"([^\"]+)\"/gm, (
-        { text, match }
-    ) => {
-        if (text) {
-            return text;
+    let text = Babel.transform({ file: path, resolve(url) {
+        if (url.endsWith(".css")) {
+            url += ".js";
         }
-        const [matched, g] = match;
-        if (g.endsWith(".css")) {
-            // we need to find source...
-            return `from "/node_modules/${g}.js"`;
+        if (!url.startsWith(".")) {
+            url = "/node_modules/" + url;
         }
-        if (g.startsWith(".")) {
-            return matched;
-        }
-        return `from "/node_modules/${g}"`;
-    });
+        return url;
+    }});
 
-    text = RegExpExtra.replaceAll(text, /import\s*\"([^\"]+)\"/gm, (
-        { text, match }
-    ) => {
-        if (text) {
-            return text;
-        }
-        const [matched, g] = match;
-        if (g.endsWith(".css")) {
-            // we need to find source...
-            let cssPath = g;
-            if (!cssPath.startsWith(".")) {
-                cssPath = "/node_modules/" + cssPath; 
-            }
-            return `import "${cssPath}.js"`;
-        }
-        if (g.startsWith(".")) {
-            return matched;
-        }
-        return `import "/node_modules/${g}"`;
-    });
+    const { base } = parse(path);
 
-    res.writeHead(200, { "content-type": "text/javascript "});
+    text += `\n//# sourceMappingURL=${base}.map`;
+
+    // let text = readFileSync(path, "utf-8");
+
+    // // change references....
+    // // text = text.replace(/from\s*\"([^\.][^\"]+)\"/gm, `from "/node_modules/$1"`);
+
+    // // remap CSS
+    // text = RegExpExtra.replaceAll(text, /from\s*\"([^\"]+)\"/gm, (
+    //     { text, match }
+    // ) => {
+    //     if (text) {
+    //         return text;
+    //     }
+    //     const [matched, g] = match;
+    //     if (g.endsWith(".css")) {
+    //         // we need to find source...
+    //         return `from "/node_modules/${g}.js"`;
+    //     }
+    //     if (g.startsWith(".")) {
+    //         return matched;
+    //     }
+    //     return `from "/node_modules/${g}"`;
+    // });
+
+    // text = RegExpExtra.replaceAll(text, /import\s*\"([^\"]+)\"/gm, (
+    //     { text, match }
+    // ) => {
+    //     if (text) {
+    //         return text;
+    //     }
+    //     const [matched, g] = match;
+    //     if (g.endsWith(".css")) {
+    //         // we need to find source...
+    //         let cssPath = g;
+    //         if (!cssPath.startsWith(".")) {
+    //             cssPath = "/node_modules/" + cssPath; 
+    //         }
+    //         return `import "${cssPath}.js"`;
+    //     }
+    //     if (g.startsWith(".")) {
+    //         return matched;
+    //     }
+    //     return `import "/node_modules/${g}"`;
+    // });
+
+    res.writeHead(200, {
+        "content-type": "text/javascript",
+        "cache-control": "no-cache"
+    });
     res.end(text);
 }

package/src/serve/send/sendJSHost.ts

@@ -18,6 +18,9 @@ export default function sendJSHost(path: string, req: IncomingMessage, res: Serv
 </html>
 `;
 
-    res.writeHead(200, { "content-type": "text/html"});
+    res.writeHead(200, {
+        "content-type": "text/html",
+        "cache-control": "no-cache"
+    });
     res.end(text);
 }

package/src/serve/send/sendList.ts

@@ -24,7 +24,10 @@ export default function sendList(reqPath, path: string, req: IncomingMessage, re
 
     const text = renderDirectoryListing(reqPath, entries);
 
-    res.writeHead(200, {"Content-Type": "text/html"});
+    res.writeHead(200, {
+      "Content-Type": "text/html",
+      "cache-control": "no-cache"
+    });
     res.end(text);
 }
 

package/src/serve/send/sendLocalFile.ts

@@ -28,6 +28,9 @@ function sendFile(filePath, res) {
       res.end(`500 Internal Server Error\n\n${err.message}`);
     }
   });
-  res.writeHead(200, { "Content-Type": mime.getType(filePath) });
+  res.writeHead(200, {
+    "Content-Type": mime.getType(filePath),
+    "cache-control": "no-cache"
+  });
   stream.pipe(res);
 }

package/src/test/{TestView.css → TestView.global.css}

@@ -1,4 +1,4 @@
-date-view {
-    display: flex;
-    color: green;
+date-view {
+    display: flex;
+    color: green;
 }

package/src/test/TestView.local.css

@@ -0,0 +1,3 @@
+date-view {
+    color: red;
+}

package/src/test/TestView.ts

@@ -1,5 +1,11 @@
 import DateTime from "@web-atoms/date-time/dist/DateTime.js";
-import "./TestView.css";
+
+// irrespective of loading order
+// global must be loaded first and
+// local must override the global style
+import "./TestView.local.css";
+
+import "./TestView.global.css";
 
 export default class DateView extends HTMLElement {