@package-verse/esmpack 1.0.4 → 1.0.6

package/init.js

@@ -1,7 +1,9 @@
 const ESMPack = window.ESMPack ||= {};
 ESMPack.installed ||= new Set();
 
-ESMPack.markAsInstalled ||= (url) => ESMPack.installed.add(url);
+ESMPack.markAsInstalled ||= (urls) => Array.isArray(urls)
+    ? urls.forEach(url => ESMPack.installed.add(url))
+    : ESMPack.installed.add(urls);
 
 ESMPack.installStyleSheet ||= (url) => {
 

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.4",
+  "version": "1.0.6",
   "description": "ESM Pack Packer and Web Server with PostCSS and ESM Loader",
   "homepage": "https://github.com/package-verse/esmpack#readme",
   "bugs": {
@@ -34,11 +34,14 @@
     "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",
     "mime": "^4.1.0",
+    "node-forge": "^1.3.3",
     "portfinder": "^1.0.38",
+    "tslib": "^2.8.1",
     "ws": "^8.19.0"
   }
 }

package/src/pack/FilePacker.ts

@@ -3,12 +3,16 @@
  * 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
+ * 4. Packed file must set all css as installed.
  */
 export default class FilePacker {
 
+    globalCss = [];
+    localCss = [];
+
     constructor(
-        public readonly root: string
+        public readonly root: string,
+        public readonly src: string
     ) {
         // empty
     }

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/sendJS.ts

@@ -1,51 +1,83 @@
-import { readFileSync } from "node:fs";
 import { IncomingMessage, ServerResponse } from "node:http";
-import { RegExpExtra } from "../../core/RegExpExtra.js";
-
-export default function sendJS(path: string, req: IncomingMessage, res: ServerResponse) {
-    let text = readFileSync(path, "utf-8");
+import { Babel } from "../../parser/babel.js";
+import path, { parse } from "node:path";
+import { ProcessOptions } from "../../ProcessArgs.js";
+import { readFileSync } from "node:fs";
 
-    // change references....
-    // text = text.replace(/from\s*\"([^\.][^\"]+)\"/gm, `from "/node_modules/$1"`);
+export default function sendJS(filePath: string, req: IncomingMessage, res: ServerResponse) {
 
-    // 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;
+    let text = Babel.transform({ file: filePath, resolve(url) {
+        if (url.endsWith(".css")) {
+            url += ".js";
         }
-        const [matched, g] = match;
-        if (g.endsWith(".css")) {
-            // we need to find source...
-            let cssPath = g;
-            if (!cssPath.startsWith(".")) {
-                cssPath = "/node_modules/" + cssPath; 
+        // check if it has no extension...
+        const { ext } = parse(url);
+        if (!ext) {
+            // fetch module...
+            const tokens = url.split("/");
+            let [packageName] = tokens;
+            if (packageName.startsWith("@")) {
+                packageName += "/" + tokens.shift();
             }
-            return `import "${cssPath}.js"`;
+            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 (g.startsWith(".")) {
-            return matched;
+        if (!url.startsWith(".")) {
+            url = "/node_modules/" + url;
         }
-        return `import "/node_modules/${g}"`;
-    });
+        return url;
+    }});
+
+    const { base } = parse(filePath);
+
+    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",

package/src/serve/serve.ts

@@ -7,6 +7,8 @@ import https from "https";
 import url from 'url';
 import { WebSocketServer } from "ws";
 import fs from "fs";
+import forge from "node-forge";
+
 var netFaces = os.networkInterfaces();
 
 function createCert() {
@@ -17,7 +19,6 @@ function createCert() {
         return JSON.parse(fs.readFileSync(certPath, { encoding: "utf8", flag: "r" }));
     }
 
-    var forge = require('node-forge');
     var pki = forge.pki;
 
     // generate a key pair or use one you have already

package/src/test/LogDecorator.ts

@@ -0,0 +1,2 @@
+export default function LogDecorator(... a: any[]) {
+}

package/src/test/TestView.ts

@@ -6,7 +6,9 @@ import DateTime from "@web-atoms/date-time/dist/DateTime.js";
 import "./TestView.local.css";
 
 import "./TestView.global.css";
+import LogDecorator from "./LogDecorator.js";
 
+@LogDecorator
 export default class DateView extends HTMLElement {
 
     connectedCallback() {

package/tsconfig.json

@@ -11,6 +11,7 @@
         "experimentalDecorators": true,
         "emitDecoratorMetadata": true,
         "noUnusedLocals": true,
+        "importHelpers": true,
         "jsxFactory": "XNode.create",
         "lib": [
             "ES2018",