@package-verse/esmpack 1.0.2 → 1.0.4

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/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.2",
+  "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": {
@@ -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/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/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 { 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);
+}

package/src/serve/send/sendJS.ts

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

package/src/serve/send/sendJSHost.ts

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

package/src/serve/send/sendList.ts

@@ -0,0 +1,99 @@
+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",
+      "cache-control": "no-cache"
+    });
+    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,36 @@
+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),
+    "cache-control": "no-cache"
+  });
+  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.global.css

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,35 @@
+import DateTime from "@web-atoms/date-time/dist/DateTime.js";
+
+// 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 {
+
+    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": [