@package-verse/esmpack 1.0.3 → 1.0.4

package/init.js

@@ -0,0 +1,30 @@
+const ESMPack = window.ESMPack ||= {};
+ESMPack.installed ||= new Set();
+
+ESMPack.markAsInstalled ||= (url) => ESMPack.installed.add(url);
+
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@package-verse/esmpack",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "ESM Pack Packer and Web Server with PostCSS and ESM Loader",
   "homepage": "https://github.com/package-verse/esmpack#readme",
   "bugs": {

package/src/pack/FilePacker.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 ignore for all imported CSS so dynamically loaded CSS can still be imported
+ */
+export default class FilePacker {
+
+    constructor(
+        public readonly root: string
+    ) {
+        // empty
+    }
+
+    async pack() {
+
+    }
+
+}

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

@@ -47,6 +47,9 @@ export default function sendJS(path: string, req: IncomingMessage, res: ServerRe
         return `import "/node_modules/${g}"`;
     });
 
-    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/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 {