@package-verse/esmpack 1.0.2 → 1.0.3

package/.vscode/settings.json

@@ -32,6 +32,7 @@
 	"cloner",
 	"Coogan",
 	"Couuntry",
+	"CSSJS",
 	"Da'uli",
 	"Daiko",
 	"Darabukka",

package/.vscode/tasks.json

@@ -34,15 +34,11 @@
         {
             "label": "Web Atoms Dev Server",
             "type": "shell",
-            "command": "wads",
+            "command": "npm",
             "args": [
-                // "https://v2018-beta.tas800.com",
-                // "https://v2018.tas800.com",
-                // "https://v2025-test.800casting.com"
-                "https://v2025-test.tas800.com"
-                //"http://localhost:9991"
-            ],
-            "problemMatcher": []
+                "run",
+                "test-server"
+            ]
         }
     ]
 }

package/README.md

@@ -8,3 +8,16 @@ Because, there is no simple packer that just rewrites module paths. After ES6 an
 1. Creates a single pack JS file which only has import definition of all the imports.
 2. Packed file strips css and delivers separate css as combined CSS.
 3. Retains ESM source code as it is except import path, import path is rewritten to fully qualified CDN url. So caching is preserved over different main module versions but same dependencies.
+
+
+## Dev Packer
+
+1. Development time packer will generate HTML file along with the pack that will generate import maps along with the loading of control and hosting it.
+2. Dev Packer will generate `let cs = document.currentScript;import("imported-path").then((r) => ESMPack.render(r, cs))` script inside html for every JS's corresponding html.
+3. Library author must implement `ESMPack.render` method which will accept exports from imported method and `currentScript`.
+4. Every `js` file's imports will be changed to fully qualified references for external imports.
+
+## Release Packer
+
+1. A single script with `.pack.js` will be generated that will import every nested imports along with fully qualified path for every nested imported external references.
+2. Every `js` file's imports will be changed to fully qualified references for external imports.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@package-verse/esmpack",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "ESM Pack Packer and Web Server with PostCSS and ESM Loader",
   "homepage": "https://github.com/package-verse/esmpack#readme",
   "bugs": {
@@ -16,9 +16,29 @@
   "scripts": {
     "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",
     "postversion": "git push --follow-tags"
   },
   "devDependencies": {
-    "@types/node": "^25.5.0"
+    "@types/node": "^25.5.0",
+    "@types/ws": "^8.18.1",
+    "cssnano": "^7.0.6",
+    "postcss": "^8.5.3",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.0",
+    "postcss-import-ext-glob": "^2.1.1",
+    "postcss-import-styled-js": "^1.0.23",
+    "postcss-nested": "^7.0.2",
+    "postcss-preset-env": "^10.1.5",
+    "postcss-url": "^10.1.3"
+  },
+  "dependencies": {
+    "@web-atoms/date-time": "^3.0.3",
+    "colors": "^1.4.0",
+    "http-proxy-middleware": "^3.0.5",
+    "mime": "^4.1.0",
+    "portfinder": "^1.0.38",
+    "ws": "^8.19.0"
   }
 }

package/postcss.config.cjs

@@ -0,0 +1,18 @@
+module.exports = (ctx) => ({
+  map: { ... ctx.options.map, sourcesContent: false },
+  plugins: [
+      require("postcss-import-styled-js")(),
+      require('postcss-preset-env')({
+        stage: 4
+      }),
+      require("postcss-import-ext-glob")(),
+      require("postcss-import")(),
+      require("postcss-url")({
+        url: "rebase",
+        basePath: ctx.options.base,
+        assetsPath: ctx.options.dist
+      }),
+      require("postcss-nested")(),
+      require("cssnano")()
+  ]
+});

package/serve.js

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

package/src/ProcessArgs.ts

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

package/src/core/RegExpExtra.ts

@@ -0,0 +1,14 @@
+import { tokenizeRegexAll } from "./tokenizeAll.js";
+
+export type regExpTokens = { text: string, match: RegExpMatchArray };
+
+export const RegExpExtra = {
+
+    replaceAll(text: string, regExp: RegExp, transformer: (item: regExpTokens) => string) {
+        let r = "";
+        for(const token of tokenizeRegexAll(text, regExp)) {
+            r += transformer(token as any);
+        }
+        return r;
+    },
+};

package/src/core/tokenizeAll.ts

@@ -0,0 +1,40 @@
+export function *tokenizeRegexAll(text: string, regex: RegExp) {
+    if (!text) {
+        return;
+    }
+    regex.lastIndex = 0;
+    let start = 0;
+    for(const m of text.matchAll(regex)) {
+        if (start < m.index) {
+            yield { text: text.substring(start, m.index)};
+        }
+        yield { match: m };
+        start = m.index + m[0].length;
+    }
+    if (start < text.length) {
+        if (start) {
+            yield { text: text.substring(start) };
+        } else {
+            yield { text };
+        }
+    }
+    // let m;
+    // let start = 0;
+    // while((m = regex.exec(text)) !== null) {
+    //     const { lastIndex } = regex;
+    //     if (m.index === lastIndex) {
+    //         regex.lastIndex++;
+    //     }
+    //     if (!m?.length) {
+    //         break;
+    //     }
+    //     if (start < m.index) {
+    //         yield { text: text.substring(start, m.index)};
+    //     }
+    //     yield { match: m as RegExpExecArray };
+    //     start = m.index + m[0].length;
+    // }
+    // if (start < text.length) {
+    //     yield { text: text.substring(start) };
+    // }
+}

package/src/serve/WebServer.ts

@@ -0,0 +1,63 @@
+import { IncomingMessage, ServerResponse } from "http";
+import path from "path";
+import { fileArgument, ProcessOptions } from "../ProcessArgs.js";
+import { existsSync } from "fs";
+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";
+
+
+let middleware;
+
+export default function WebServer(req: IncomingMessage, res: ServerResponse) {
+    const pathname = new URL(req.url, "http://a").pathname.substring(1);
+
+    // check if path exists...
+    const fullPath = path.resolve(ProcessOptions.cwd, pathname);
+    if (existsSync(fullPath)) {
+        // server local..
+        sendLocalFile(pathname, fullPath, req, res);
+        return;
+    }
+
+    const css = fullPath.replace(/\.js$/, "");
+    if (existsSync(css)) {
+        sendCSSJS(pathname.substring(0, pathname.length - 3), req, res);
+        return;
+    }
+
+    const js = fullPath.replace(/\.html$/,".js");
+    if(existsSync(js)) {
+        sendJSHost(pathname.replace(/\.html$/, ".js"), req, res);
+        return;
+    }
+
+    // proxy...
+    middleware ??= createProxyMiddleware({
+        target: fileArgument,
+        changeOrigin: true,
+        ws: true,
+        secure: false,
+        cookieDomainRewrite: "",
+        on: {
+            proxyReq: fixRequestBody,
+            proxyRes:(proxyReq, req, res) => {
+                if (proxyReq.statusCode >= 400) {
+                        console.error(colors.red(`HTTP STATUS ${proxyReq.statusCode} for ${fileArgument}${req.url}`));
+                    } else if (proxyReq.statusCode >= 300) {
+                        console.warn(colors.yellow(
+                            `HTTP STATUS ${proxyReq.statusCode} for ${fileArgument}${req.url}`));
+                    }
+                    let cookie = proxyReq.headers["set-cookie"];
+                    if (cookie) {
+                        cookie = cookie.map((s) => s.split(";").filter((c) => c.trim().toLocaleLowerCase() !== "secure").join(";"));
+                        proxyReq.headers["set-cookie"] = cookie;
+                    }
+            }
+        }
+    });
+
+    middleware(req, res);
+}

package/src/serve/send/packageInfo.ts

@@ -0,0 +1,7 @@
+import { readFileSync } from "fs";
+import { ProcessOptions } from "../../ProcessArgs.js";
+import { join } from "path";
+
+const jsonText = readFileSync(join(ProcessOptions.cwd, "package.json"), "utf-8");
+
+export const packageInfo = JSON.parse(jsonText);

package/src/serve/send/sendCSSJS.ts

@@ -0,0 +1,22 @@
+import { IncomingMessage, ServerResponse } from "node:http";
+
+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();
+
+
+}())
+`;
+
+    res.writeHead(200, { "content-type": "text/javascript"});
+    res.end(text);
+}

package/src/serve/send/sendJS.ts

@@ -0,0 +1,52 @@
+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");
+
+    // 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 "});
+    res.end(text);
+}

package/src/serve/send/sendJSHost.ts

@@ -0,0 +1,23 @@
+import { IncomingMessage, ServerResponse } from "node:http";
+
+export default function sendJSHost(path: string, req: IncomingMessage, res: ServerResponse) {
+    const text = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Index of ${path}</title>
+</head>
+<body>
+    <script>
+        const cs = document.currentScript;
+        import("/${path}").then((r) => ESMPack.render(r, cs), (error) => cs.replaceWith(document.createTextNode(error.stack || error)));
+    </script>
+</body>
+</html>
+`;
+
+    res.writeHead(200, { "content-type": "text/html"});
+    res.end(text);
+}

package/src/serve/send/sendList.ts

@@ -0,0 +1,96 @@
+import { readdirSync, statSync } from "node:fs";
+import { IncomingMessage, ServerResponse } from "node:http";
+import { join } from "node:path";
+
+export default function sendList(reqPath, path: string, req: IncomingMessage, res: ServerResponse) {
+
+    const entries = readdirSync(path, { withFileTypes: true})
+        .filter((d) => !d.name.startsWith(".") && d.name !== "node_modules")
+        .map((d) => {
+            const fullPath = join(d.parentPath, d.name);
+            let size = 0, mtime = new Date();
+            try {
+                const s = statSync(fullPath);
+                size = s.size;
+                mtime = s.mtime;
+            } catch {}
+            return { name: d.name, isDir: d.isDirectory(), size, mtime };
+        })
+        .sort((a, b) => {
+            if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+            return a.name.localeCompare(b.name);
+        });
+
+
+    const text = renderDirectoryListing(reqPath, entries);
+
+    res.writeHead(200, {"Content-Type": "text/html"});
+    res.end(text);
+}
+
+function formatSize(bytes) {
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+}
+
+function renderDirectoryListing(reqPath, entries: { isDir: boolean, name: string, size: number, mtime: Date } []) {
+
+
+  const isRoot = reqPath === "/";
+  const rows = entries
+    .map((e) => {
+      let href = reqPath.replace(/\/$/, "") + "/" + encodeURIComponent(e.name) + (e.isDir ? "/" : "");
+      const icon = e.isDir ? "📁" : (/\.(js|html)$/i.test(e.name) ? "🌐" : "📄");
+      const size = e.isDir ? "—" : formatSize(e.size);
+      const modified = e.mtime.toISOString().replace("T", " ").slice(0, 19);
+
+      if (e.name.endsWith(".js")) {
+        href = href.replace(/\.js$/, ".html");
+      }
+
+      return `<tr>
+        <td>${icon} <a href="${href.startsWith("/") ? href : "/" + href}">${e.name}${e.isDir ? "/" : ""}</a></td>
+        <td>${size}</td>
+        <td>${modified}</td>
+      </tr>`;
+    })
+    .join("\n");
+ 
+  const parentRow = isRoot
+    ? ""
+    : `<tr><td>⬆️  <a href="../">../</a></td><td>—</td><td>—</td></tr>`;
+ 
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Index of ${reqPath}</title>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: ui-monospace, 'Cascadia Code', monospace; background: #0f1117; color: #e2e8f0; min-height: 100vh; padding: 2rem; }
+  h1 { font-size: 1.25rem; color: #7dd3fc; margin-bottom: 1.5rem; border-bottom: 1px solid #1e293b; padding-bottom: .75rem; }
+  table { width: 100%; border-collapse: collapse; }
+  th { text-align: left; padding: .5rem .75rem; color: #94a3b8; font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid #1e293b; }
+  td { padding: .45rem .75rem; font-size: .9rem; border-bottom: 1px solid #0d1520; }
+  td:nth-child(2), td:nth-child(3) { color: #64748b; font-size: .8rem; white-space: nowrap; }
+  tr:hover td { background: #1e293b; }
+  a { color: #7dd3fc; text-decoration: none; }
+  a:hover { color: #bae6fd; text-decoration: underline; }
+  footer { margin-top: 2rem; color: #334155; font-size: .75rem; }
+</style>
+</head>
+<body>
+<h1>📂 Index of ${reqPath}</h1>
+<table>
+  <thead><tr><th>Name</th><th>Size</th><th>Modified</th></tr></thead>
+  <tbody>
+    ${parentRow}
+    ${rows}
+  </tbody>
+</table>
+</body>
+</html>`;
+}

package/src/serve/send/sendLocalFile.ts

@@ -0,0 +1,33 @@
+import { createReadStream, statSync } from "node:fs";
+import { IncomingMessage, ServerResponse } from "node:http";
+import mime from "mime";
+import sendList from "./sendList.js";
+import sendJS from "./sendJS.js";
+export default function sendLocalFile(reqPath: string, path: string, req: IncomingMessage, res: ServerResponse) {
+
+    if (path.endsWith(".js")) {
+        // send JS
+        return sendJS(path, req, res);
+    }
+
+    // check if it is a folder...
+    const stat = statSync(path);
+    if (stat.isDirectory()) {
+        // list...
+        return sendList(reqPath, path, req, res);
+    }
+    // just pipe the file...
+    sendFile(path, res);
+}
+
+function sendFile(filePath, res) {
+  const stream = createReadStream(filePath);
+  stream.on("error", (err) => {
+    if (!res.headersSent) {
+      res.writeHead(500, { "Content-Type": "text/plain" });
+      res.end(`500 Internal Server Error\n\n${err.message}`);
+    }
+  });
+  res.writeHead(200, { "Content-Type": mime.getType(filePath) });
+  stream.pipe(res);
+}

package/src/serve/serve.ts

@@ -0,0 +1,146 @@
+import app from "./WebServer.js";
+import portfinder from "portfinder";
+import os from "os";
+import colors from "colors";
+import http from "http";
+import https from "https";
+import url from 'url';
+import { WebSocketServer } from "ws";
+import fs from "fs";
+var netFaces = os.networkInterfaces();
+
+function createCert() {
+
+    var certPath = "./generated-cert-1";
+
+    if(fs.existsSync(certPath)) {
+        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
+    var keys = pki.rsa.generateKeyPair(2048);
+
+    // create a new certificate
+    var cert = pki.createCertificate();
+
+    // fill the required fields
+    cert.publicKey = keys.publicKey;
+    cert.serialNumber = '01';
+    cert.validity.notBefore = new Date();
+    cert.validity.notAfter = new Date();
+    cert.validity.notAfter.setFullYear(cert.validity.notBefore.getFullYear() + 20);    
+
+    const altNames = [{ type: 7, ip: "127.0.0.1"}];
+
+    for(let i=1;i<255;i++) {
+        altNames.push({ type: 7, ip: `192.168.0.${i}`});
+        altNames.push({ type: 7, ip: `192.168.1.${i}`});
+    }
+
+    // use your own attributes here, or supply a csr (check the docs)
+    var attrs = [{
+    name: 'commonName',
+    value: 'dev.web-atoms.in'
+    },
+    {
+    name: 'countryName',
+    value: 'IN'
+    }, {
+    shortName: 'ST',
+    value: 'Maharashtra'
+    }, {
+    name: 'localityName',
+    value: 'Navi Mumbai'
+    }, {
+    name: 'organizationName',
+    value: 'NeuroSpeech Technologies Pvt Ltd'
+    }, {
+    shortName: 'OU',
+    value: 'Test'
+    }];
+
+    // here we set subject and issuer as the same one
+    cert.setSubject(attrs);
+    cert.setIssuer(attrs);
+    cert.setExtensions([{
+        name: "subjectAltName",
+        altNames
+    }]);
+
+    // the actual certificate signing
+    cert.sign(keys.privateKey);
+
+    // now convert the Forge certificate to PEM format
+    var pem = pki.certificateToPem(cert);
+    var pkey = pki.privateKeyToPem(keys.privateKey)
+    var c = { key: pkey, cert: pem };
+
+    fs.writeFileSync( certPath, JSON.stringify(c), "utf8");
+    return c;
+}
+
+function listen(port, ssl?) {
+
+    var server = ssl ? https.createServer(createCert(), app) : http.createServer(app);
+
+    var wss = new WebSocketServer({ noServer: true });
+
+    const dss = new WebSocketServer({ noServer: true });
+
+    server.on("error", (error) => {
+        console.error(error);
+    })
+
+    server.on("upgrade", function upgrade(request, socket, head) {
+        const pathname = url.parse(request.url).pathname;
+
+        if (pathname === "/__debug" || pathname.startsWith('/__debug/')) {
+            dss.handleUpgrade(request, socket, head, function done(ws) {
+                dss.emit('connection', ws, request);
+            });
+        } else if (pathname === '/__listen') {
+            wss.handleUpgrade(request, socket, head, function done(ws) {
+                wss.emit('connection', ws, request);
+            });
+        } else {
+            console.error("Forwarding further.. " + pathname);
+            // socket.destroy();
+            socket.on("error", (error) => console.error(error));
+        }
+    });
+
+    server.listen(port,() => {
+        Object.keys(netFaces).forEach(function (dev) {
+            netFaces[dev].forEach(function (details) {
+              if (details.family === 'IPv4') {
+                  if (ssl) {
+                    console.log(('  https://' + details.address + ':' + colors.cyan(port.toString())));
+                  } else {
+                    console.log(('  http://' + details.address + ':' + colors.cyan(port.toString())));
+                  }
+              }
+            });
+          });
+        
+        
+        return console.log(colors.green("Server has started "));
+    });
+}
+
+portfinder.basePort = 8080;
+portfinder.getPort(function (err, port) {
+    if (err) { 
+        throw err; 
+    }
+    listen(port);
+});
+portfinder.getPort(function (err, port) {
+    if (err) { 
+        throw err; 
+    }
+    listen(port, true);
+});
+

package/src/test/TestView.css

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

package/src/test/TestView.ts

@@ -0,0 +1,29 @@
+import DateTime from "@web-atoms/date-time/dist/DateTime.js";
+import "./TestView.css";
+
+export default class DateView extends HTMLElement {
+
+    connectedCallback() {
+        setInterval(() => {
+            const now = DateTime.now;
+            this.textContent = now.toJSON();
+        }, 1000);
+    }
+
+}
+
+customElements.define("date-view", DateView);
+
+
+(window as any).ESMPack = {
+    async render(imports: { default: any }, cs: HTMLScriptElement) {
+        const view = new imports.default();
+        cs.replaceWith(view);
+    },
+    installStyleSheet(src) {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = src;
+        document.head.appendChild(link);
+    }
+};

package/tsconfig.json

@@ -16,7 +16,8 @@
             "ES2018",
             "ES2021.WeakRef",
             "esnext.disposable",
-            "ES2021.String"
+            "ES2021.String",
+            "DOM"
         ]
     },
     "include": [