@package-verse/esmpack 1.0.7 → 1.0.9

package/.vscode/settings.json

@@ -49,6 +49,7 @@
 	"endregion",
 	"eqeqeq",
 	"Escrima",
+	"esmpack",
 	"Euohonium",
 	"faid",
 	"Flugel",
@@ -65,6 +66,7 @@
 	"imaim",
 	"IMDB",
 	"immsn",
+	"importmap",
 	"Improv",
 	"Intromercial",
 	"IPTR",

package/empty.js

@@ -0,0 +1 @@
+// this is just an empty module placeholder for CSS modules

package/init.js

@@ -1,12 +1,5 @@
 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");
@@ -17,11 +10,6 @@ ESMPack.installStyleSheet ||= (url) => {
             ? "afterbegin"
             : "beforeend", link);
     };
-
-    if (ESMPack.installed.has(url)) {
-        return;
-    }
-    ESMPack.installed.add(url);
     if(document.readyState === "complete") {
         installCss(url);
     } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@package-verse/esmpack",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "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

@@ -3,7 +3,23 @@
  * 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.
+ * 4. Packed file must set all css as installed. And other modules will simply return absolute paths.
+ *
+ * For App.js following packed scripts will be generated.
+ * 1. App.pack.js
+ *      Push Import Maps script tag
+ *      Add import map for non js modules as well, and for this
+ *         every nested dependency must be inspected.
+ *      Push empty module for CSS
+ *      Imports all nested dependencies of App.js that should not contain fully qualified path
+ *      Import dynamically loaded modules as well
+ *      Loads App.pack.global.css
+ *      Loads App.pack.local.css
+ *      Imports App.js dynamically so CSS can be ready before hosting the User interface
+ * 2. App.pack.global.css
+ * 3. App.pack.local.css
+ * 4. App.pack.{hash-of-absolute-module-path}.js <-- this will be a dependency for non js module such as image or json etc.
+ *      This will load an absolute path via resolve
  */
 export default class FilePacker {
 
@@ -12,7 +28,8 @@ export default class FilePacker {
 
     constructor(
         public readonly root: string,
-        public readonly src: string
+        public readonly src: string,
+        public readonly prefix: string
     ) {
         // empty
     }

package/src/serve/send/packageInfo.ts

@@ -5,3 +5,13 @@ import { join } from "path";
 const jsonText = readFileSync(join(ProcessOptions.cwd, "package.json"), "utf-8");
 
 export const packageInfo = JSON.parse(jsonText);
+
+const imports = {
+    [packageInfo.name + "/"]: "/"
+};
+
+for (const [key] of Object.entries(packageInfo.dependencies)) {
+    imports[key + "/"] = "/node_modules/" + key + "/";
+}
+
+export const importMap = { imports }; 

package/src/serve/send/sendJS.ts

@@ -8,6 +8,9 @@ export default function sendJS(filePath: string, req: IncomingMessage, res: Serv
 
 
     let text = Babel.transform({ file: filePath, resolve(url, sourceFile) {
+
+        const originalUrl = url;
+
         // check if it has no extension...
         const { ext } = parse(url);
         if (!ext) {
@@ -20,39 +23,24 @@ export default function sendJS(filePath: string, req: IncomingMessage, res: Serv
             if (packageName.startsWith("@")) {
                 packageName += "/" + tokens.shift();
             }
+
             const packageJsonPath = path.resolve(ProcessOptions.cwd, "node_modules", packageName, "package.json");
             if (existsSync(packageJsonPath)) {
                 const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
                 const start = packageJson["module"] || packageJson["main"];
-                return "/node_modules/" + url + "/" + start;
+                return url + "/" + start;
             }
 
         }
 
 
         if (!url.startsWith(".")) {
-            const resolved = path.resolve(ProcessOptions.cwd, "node_modules/" + url);
-            if (existsSync(resolved)) {
-                url = "/node_modules/" + url;
-                return url;
-            }
-
-            const tokens = url.split("/");
-            let packageName = tokens.shift();
-            if (packageName.startsWith("@")) {
-                packageName += "/" + tokens.shift();
-            }
 
-            const mainModuleFile = path.resolve(ProcessOptions.cwd, ... tokens);
-            if (existsSync(mainModuleFile)) {
-                url = tokens.join("/");
-                if (!url.endsWith(".js")) {
-                    return "/" + url + ".js";
-                }
-                return "/" + url;
+            if (!url.endsWith(".js")) {
+                url += ".js";
             }
 
-            return "/" + url;
+            return url;
         }
 
         const jsFile = path.resolve(path.dirname(filePath), url);
@@ -63,14 +51,23 @@ export default function sendJS(filePath: string, req: IncomingMessage, res: Serv
             return url;
         }
 
-        // is it refernced from source...
-        const absoluteSourcePath = path.join( path.dirname(filePath), sourceFile);
-        const localSourceFile = path.resolve( absoluteSourcePath, url);
-        const localFile = path.resolve(ProcessOptions.cwd, localSourceFile);
-        if (!localFile.endsWith(".js")) {
-            return "/" + localSourceFile + ".js";
+        if (url.endsWith(".js")) {
+            return url;
+        }
+
+        // is it referenced from source...
+        const dir = path.dirname(filePath);
+        const absoluteSourcePath = path.resolve( dir, path.dirname(sourceFile));
+        console.log(`Absolute Path is ${absoluteSourcePath}`);
+        const referencedAbsolutePath = path.join(absoluteSourcePath, url);
+        if (existsSync(referencedAbsolutePath)) {
+            const relative = path.relative(dir, referencedAbsolutePath).replaceAll("\\", "/");
+            if(!relative.endsWith(".js")) {
+                return relative + ".js";
+            }
+            return relative;
         }
-        return "/" + localSourceFile;
+        return originalUrl;
 
     }});
 

package/src/serve/send/sendJSHost.ts

@@ -1,6 +1,12 @@
 import { IncomingMessage, ServerResponse } from "node:http";
+import { importMap, packageInfo } from "./packageInfo.js";
 
 export default function sendJSHost(path: string, req: IncomingMessage, res: ServerResponse) {
+
+    // generate import maps
+    // for dynamic scripts
+    // this is to avoid path renaming and support dynamic module loading
+
     const text = `
 <!DOCTYPE html>
 <html lang="en">
@@ -10,9 +16,12 @@ export default function sendJSHost(path: string, req: IncomingMessage, res: Serv
     <title>Index of ${path}</title>
 </head>
 <body>
+    <script type="importmap">
+        ${JSON.stringify(importMap, void 0, 2)}
+    </script>
     <script>
         const cs = document.currentScript;
-        import("/${path}").then((r) => ESMPack.render(r, cs), (error) => cs.replaceWith(document.createTextNode(error.stack || error)));
+        import("${packageInfo.name}/${path}").then((r) => ESMPack.render(r, cs), (error) => cs.replaceWith(document.createTextNode(error.stack || error)));
     </script>
 </body>
 </html>

package/src/test/Clock2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path opacity=".4" d="M96 352C96 402.3 112.6 448.8 140.6 486.2L105.4 521.4C92.9 533.9 92.9 554.2 105.4 566.7C117.9 579.2 138.2 579.2 150.7 566.7L185.9 531.5C223.3 559.5 269.7 576.1 320 576.1C370.3 576.1 416.8 559.5 454.2 531.5L489.4 566.7C501.9 579.2 522.2 579.2 534.7 566.7C547.2 554.2 547.2 533.9 534.7 521.4L499.5 486.2C527.5 448.8 544.1 402.4 544.1 352C544.1 228.3 443.8 128 320.1 128C196.4 128 96 228.3 96 352zM296 248C296 234.7 306.7 224 320 224C333.3 224 344 234.7 344 248L344 342.1L393 391.1C402.4 400.5 402.4 415.7 393 425C383.6 434.3 368.4 434.4 359.1 425L303.1 369C298.6 364.5 296.1 358.4 296.1 352L296.1 248z"/><path d="M543.5 196.9C550 206.3 564 207 568.4 196.5C573.3 185 576 172.4 576 159.2C576 106.6 533.4 64 480.8 64C461.5 64 443.5 69.8 428.5 79.7C418.9 86 422.2 99.6 432.6 104.3C477.4 124.7 515.7 156.9 543.6 196.9zM71.6 196.5C76.1 207 90 206.3 96.5 196.9C124.3 156.9 162.6 124.7 207.5 104.3C217.9 99.6 221.2 86 211.6 79.7C196.6 69.8 178.6 64 159.3 64C106.7 64 64.1 106.6 64.1 159.2C64.1 172.4 66.8 185 71.7 196.5zM344 248C344 234.7 333.3 224 320 224C306.7 224 296 234.7 296 248L296 352C296 358.4 298.5 364.5 303 369L359 425C368.4 434.4 383.6 434.4 392.9 425C402.2 415.6 402.3 400.4 392.9 391.1L343.9 342.1L343.9 248z"/></svg>

package/src/test/TestView.ts

@@ -10,16 +10,21 @@ import "./TestView.local.css";
 import "./TestView.global.css";
 import LogDecorator from "./LogDecorator.js";
 
+import Clock2 from "./Clock2.svg";
+
 @LogDecorator
 export default class DateView extends HTMLElement {
 
     connectedCallback() {
 
-        const img = document.createElement("img");
+        let img = document.createElement("img");
         img.src = clock;
         const span = document.createElement("span");
         this.appendChild(img);
         this.appendChild(span);
+        img = document.createElement("img");
+        img.src = Clock2;
+        this.appendChild(img);
         setInterval(() => {
             const now = DateTime.now;
             span.textContent = now.toJSON();