@package-verse/esmpack 1.0.6 → 1.0.7

package/.vscode/launch.json

@@ -1,13 +1,6 @@
 {
     "version": "0.2.0",
     "configurations": [
-    {
-        "name": "Launch Edge",
-        "request": "launch",
-        "type": "pwa-msedge",
-        "url": "http://127.0.0.1:8080/uiv/$CURRENT$/dist/c8-front-end",
-        "webRoot": "${workspaceFolder}"
-    },
         {
             "type": "node",
             "request": "launch",
@@ -16,6 +9,16 @@
             "outFiles": [
                 "${workspaceRoot}/out/**/*.js"
             ]
+        },
+         {
+            "name": "Attach to Process",
+            "type": "node",
+            "request": "attach",
+            "port": 9229,
+            "localRoot": "${workspaceRoot}",
+            "outFiles": [
+                "${workspaceFolder}/dist/**/*.js",
+            ]
         }
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@package-verse/esmpack",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "ESM Pack Packer and Web Server with PostCSS and ESM Loader",
   "homepage": "https://github.com/package-verse/esmpack#readme",
   "bugs": {
@@ -17,7 +17,7 @@
     "test": "exit 0",
     "push": "git add -A && git commit -m \"dep vb\" && npm version patch",
     "build-css-watch": "npx postcss \"./src/**/*.css\" --base src --dir dist --map --verbose -w",
-    "test-server": "node --enable-source-maps ./serve.js",
+    "test-server": "node --enable-source-maps --inspect=0.0.0.0:9229 ./serve.js",
     "postversion": "git push --follow-tags"
   },
   "devDependencies": {

package/src/ProcessArgs.ts

@@ -12,6 +12,9 @@ for(let i=0; i< length;i++) {
 }
 
 const last = argv[argv.length-1];
+
 export const fileArgument = last.startsWith("--") ? void 0 : last;
 
+
+
 ProcessOptions.cwd ||= process.cwd();

package/src/parser/babel.ts

@@ -1,16 +1,26 @@
-import { transform } from "@babel/core";
+import { transformSync  } from "@babel/core";
 import { readFileSync } from "fs";
+import { ProcessOptions } from "../ProcessArgs.js";
+import { parse } from "path";
 
 export class Babel {
 
-    static transform({ file, resolve }: { file: string, resolve: (url: string) => string }) {
+    static transform({ file, resolve }: { file: string, resolve: (url: string, sourceFile: string) => string }) {
+
+        const { base: name } = parse(file);
 
         const presets = {
             sourceType: "module",
             sourceMaps: true,
             inputSourceMap: true,
+            caller: {
+                name,
+                supportsDynamicImport: true,
+                supportsTopLevelAwait: true,
+            },
             compact: false,
             comments: false,
+            root: ProcessOptions.cwd,
             getModuleId: () => "v",
             "plugins": [
                 [
@@ -24,7 +34,8 @@ export class Babel {
                                     if (!source) {
                                         return node;
                                     }
-                                    source = resolve(source);
+                                    const sourceFile = node.hub?.file?.inputMap?.sourcemap?.sources?.[0];
+                                    source = resolve(source, sourceFile);
                                     e.source.value = source;
                                     return node;
                                 },
@@ -38,7 +49,7 @@ export class Babel {
 
         const p = { ... presets, filename: file };
         const code = readFileSync(file, "utf8");
-        const result = transform(code, p);
+        const result = transformSync(code, p);
         return result.code;
     }
 

package/src/serve/WebServer.ts

@@ -6,7 +6,7 @@ import sendLocalFile from "./send/sendLocalFile.js";
 import { createProxyMiddleware, fixRequestBody } from "http-proxy-middleware";
 import colors from "colors";
 import sendJSHost from "./send/sendJSHost.js";
-import sendCSSJS from "./send/sendCSSJS.js";
+import sendNonJSModule from "./send/sendNonJSModule.js";
 
 
 let middleware;
@@ -24,7 +24,7 @@ export default function WebServer(req: IncomingMessage, res: ServerResponse) {
 
     const css = fullPath.replace(/\.js$/, "");
     if (existsSync(css)) {
-        sendCSSJS(pathname.substring(0, pathname.length - 3), req, res);
+        sendNonJSModule(pathname.substring(0, pathname.length - 3), req, res);
         return;
     }
 
@@ -34,6 +34,12 @@ export default function WebServer(req: IncomingMessage, res: ServerResponse) {
         return;
     }
 
+    // if (!fileArgument) {
+    //     res.writeHead(404,{});
+    //     res.end("");
+    //     return;
+    // }
+
     // proxy...
     middleware ??= createProxyMiddleware({
         target: fileArgument,

package/src/serve/send/sendJS.ts

@@ -2,33 +2,76 @@ import { IncomingMessage, ServerResponse } from "node:http";
 import { Babel } from "../../parser/babel.js";
 import path, { parse } from "node:path";
 import { ProcessOptions } from "../../ProcessArgs.js";
-import { readFileSync } from "node:fs";
+import { existsSync, readFileSync } from "node:fs";
 
 export default function sendJS(filePath: string, req: IncomingMessage, res: ServerResponse) {
 
 
-    let text = Babel.transform({ file: filePath, resolve(url) {
-        if (url.endsWith(".css")) {
-            url += ".js";
-        }
+    let text = Babel.transform({ file: filePath, resolve(url, sourceFile) {
         // check if it has no extension...
         const { ext } = parse(url);
         if (!ext) {
+
+            // this is case for tslib, reflect_metadata
+            
             // fetch module...
             const tokens = url.split("/");
-            let [packageName] = tokens;
+            let packageName = tokens.shift();
             if (packageName.startsWith("@")) {
                 packageName += "/" + tokens.shift();
             }
             const packageJsonPath = path.resolve(ProcessOptions.cwd, "node_modules", packageName, "package.json");
-            const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
-            const start = packageJson["module"] || packageJson["main"];
-            return "/node_modules/" + url + "/" + start;
+            if (existsSync(packageJsonPath)) {
+                const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+                const start = packageJson["module"] || packageJson["main"];
+                return "/node_modules/" + url + "/" + start;
+            }
+
         }
+
+
         if (!url.startsWith(".")) {
-            url = "/node_modules/" + url;
+            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;
+            }
+
+            return "/" + url;
+        }
+
+        const jsFile = path.resolve(path.dirname(filePath), url);
+        if (existsSync(jsFile)) {
+            if (!jsFile.endsWith(".js")) {
+                url += ".js";
+            }
+            return url;
         }
-        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";
+        }
+        return "/" + localSourceFile;
+
     }});
 
     const { base } = parse(filePath);

package/src/serve/send/sendNonJSModule.ts

@@ -0,0 +1,39 @@
+import { readFileSync } from "node:fs";
+import { IncomingMessage, ServerResponse } from "node:http";
+import { fileURLToPath } from "node:url";
+
+export default function sendNonJSModule(path: string, req: IncomingMessage, res: ServerResponse) {
+
+
+    if (path.endsWith(".css")) {
+
+        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",
+            "cache-control": "no-cache"
+        });
+        res.end(text);
+        return;
+    }
+
+
+    // just send a path...
+    res.writeHead(200, {
+        "content-type": "text/javascript",
+        "cache-control": "no-cache"
+    });
+    res.end(`
+    const value = "/${path}";
+    export default value;
+    `);
+    
+}

package/src/tags.d.ts

@@ -0,0 +1,32 @@
+declare module "*.png" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.jpg" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.jpeg" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.gif" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.svg" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.css" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.json" {
+}

package/src/test/Clock.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

@@ -1,5 +1,7 @@
 import DateTime from "@web-atoms/date-time/dist/DateTime.js";
 
+import clock from "@package-verse/esmpack/src/test/Clock.svg";
+
 // irrespective of loading order
 // global must be loaded first and
 // local must override the global style
@@ -12,9 +14,15 @@ import LogDecorator from "./LogDecorator.js";
 export default class DateView extends HTMLElement {
 
     connectedCallback() {
+
+        const img = document.createElement("img");
+        img.src = clock;
+        const span = document.createElement("span");
+        this.appendChild(img);
+        this.appendChild(span);
         setInterval(() => {
             const now = DateTime.now;
-            this.textContent = now.toJSON();
+            span.textContent = now.toJSON();
         }, 1000);
     }
 

package/src/serve/send/sendCSSJS.ts

@@ -1,22 +0,0 @@
-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 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",
-        "cache-control": "no-cache"
-    });
-    res.end(text);
-}