@vamidicreations/arc-ui 0.1.0

package/dist/src/compiler/template-component.compiler.js

@@ -0,0 +1,292 @@
+/**
+ * Tiny template compiler (rewritten for View.buildNodeTree)
+ *
+ * Instead of generating a standalone render function,
+ * we now generate code that overrides `Component.prototype.view.buildNodeTree`.
+ */
+import * as parse5 from "parse5";
+// small HTML tag whitelist (add more as needed)
+const HTML_TAGS = new Set([
+    "a", "abbr", "address", "area", "article", "aside", "audio",
+    "b", "base", "bdi", "bdo", "blockquote", "body", "br", "button",
+    "canvas", "caption", "cite", "code", "col", "colgroup",
+    "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt",
+    "em", "embed",
+    "fieldset", "figcaption", "figure", "footer", "form",
+    "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hr", "html",
+    "i", "iframe", "img", "input", "ins",
+    "kbd", "label", "legend", "li", "link",
+    "main", "map", "mark", "meta", "meter",
+    "nav", "noscript",
+    "object", "ol", "optgroup", "option", "output",
+    "p", "picture", "pre", "progress",
+    "q",
+    "rp", "rt", "ruby",
+    "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup",
+    "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track",
+    "u", "ul",
+    "var", "video", "wbr"
+]);
+class TemplateComponentCompiler {
+    idCounter = 0;
+    generated = [];
+    rootVar = "root";
+    ctxVar = "ctx";
+    compileHtmlToRender(html, /* compName: string, */ selector) {
+        this.resetCounter();
+        this.resetGeneratedHtml();
+        const fragment = this.parseHtml(html);
+        // Build the node tree from the app to all the elements and components
+        this.generateNodeTree(fragment, selector);
+        return this.generated.join("\n");
+    }
+    id(name) {
+        return `${name}_${++this.idCounter}`;
+    }
+    isNativeHtmlTag(tagName) {
+        // custom elements per spec must contain a hyphen => treat as custom
+        const tag = String(tagName).toLowerCase();
+        if (tag.includes('-')) {
+            return false;
+        }
+        // otherwise, if it's a known HTML tag, it's native
+        return HTML_TAGS.has(tag);
+    }
+    resetCounter() {
+        this.idCounter = 0;
+    }
+    resetGeneratedHtml() {
+        this.generated = [];
+    }
+    parseHtml(html) {
+        return parse5.parseFragment(html);
+    }
+    generateNodeTree(fragment, selector) {
+        // buildNodeTree override
+        // Instead of attaching to prototype, register in central registry
+        this.generated.push(`registry.registerBuildTree("${selector}", function() {`);
+        this.generated.push(`  const ${this.rootVar} = [];`);
+        this.generated.push(`  const ${this.ctxVar} = this;`);
+        this.generateChildNodes(fragment);
+        this.generated.push(`  return ${this.rootVar};`);
+        this.generated.push(`});`);
+    }
+    generateChildNodes(fragment) {
+        for (const node of fragment.childNodes) {
+            this.walkNodes([node], null, "  ");
+        }
+    }
+    walkNodes(nodes, parentVar, indent = "  ") {
+        for (const node of nodes) {
+            if (node.nodeName === "#text") {
+                const raw = node.value;
+                if (!raw || !raw.trim())
+                    continue;
+                this.processTextNode(raw, parentVar, indent);
+                continue;
+            }
+            this.walkElement(node, parentVar, indent);
+        }
+    }
+    walkElement(node, parentVar, indent = "  ") {
+        const tagName = node.tagName;
+        const customComponent = this.detectCustomComponentAndGenerate(tagName, parentVar, indent);
+        if (customComponent) {
+            return;
+        }
+        const routerComponent = this.detectRouterOutletComponent(tagName, parentVar, indent);
+        if (routerComponent) {
+            return;
+        }
+        const element = this.createElement(node, indent);
+        this.createStylesForElement(node, element, indent);
+        this.generateFunctions(node, element, indent);
+        this.addToParentOrRoot(element, parentVar, indent);
+        if (node.childNodes && node.childNodes.length) {
+            this.walkNodes(node.childNodes, element, indent + "  ");
+        }
+    }
+    createElement(node, indent) {
+        const element = this.id("el");
+        this.generated.push(`${indent}const ${element} = onejsDocument.createElement(${JSON.stringify(node.tagName)});`);
+        (node.attrs || []).forEach((attr) => {
+            if (attr.name.startsWith("("))
+                return;
+            if (attr.name === "style")
+                return;
+            // support element refs
+            if (attr.name.startsWith('#')) {
+                const refName = attr.name.slice(1);
+                this.generated.push(`viewRegistry.add('${refName}', ${element});`);
+            }
+            this.generated.push(`${indent}${element}.setAttribute(${JSON.stringify(attr.name)}, ${JSON.stringify(attr.value)});`);
+        });
+        return element;
+    }
+    createStylesForElement(node, element, indent) {
+        const styleAttr = this.getAttr(node, "style");
+        if (styleAttr) {
+            const stylePairs = this.parseStyleString(styleAttr);
+            stylePairs.forEach((pair) => {
+                this.generated.push(`${indent}${element}.style.setProperty(${JSON.stringify(pair.prop)}, ${JSON.stringify(pair.val)});`);
+            });
+        }
+    }
+    createTextNode(id, text, indent) {
+        const textVar = this.id(id);
+        this.generated.push(`${indent}const ${textVar} = onejsDocument.createTextNode(${text});`);
+        return textVar;
+    }
+    generateFunctions(node, element, indent) {
+        (node.attrs || []).forEach((attr) => {
+            if (!attr.name.startsWith("("))
+                return;
+            const ev = attr.name.slice(1, -1);
+            const handlerCode = attr.value.trim();
+            const generateButtonEvt = `
+        ${indent}${element}.addEventListener(${JSON.stringify(ev)}, function(ev){ ${this.ctxVar}.${handlerCode} });
+      `;
+            this.generated.push(generateButtonEvt);
+        });
+    }
+    addToParentOrRoot(element, parentVar, indent) {
+        if (parentVar) {
+            this.generated.push(`${indent}${parentVar}.appendChild(${element});`);
+        }
+        else {
+            this.generated.push(`  ${this.rootVar}.push(${element});`);
+        }
+    }
+    /**
+     * 🔹 Detect custom component tags (PascalCase convention, or however you decide)
+     * @param tagName
+     * @param parentVar
+     * @param indent
+     * @private
+     */
+    detectCustomComponentAndGenerate(tagName, parentVar, indent) {
+        if (this.isNativeHtmlTag(tagName)) {
+            return false;
+        }
+        const compTypeVar = this.id("compType");
+        const compVar = this.id("comp");
+        const treeVar = this.id("tree");
+        const componentGeneration = `
+        ${indent}// component <${tagName}>
+        ${indent}const ${compTypeVar} = registry.getComponentFromRegistry("${tagName}");
+        
+        if(!${compTypeVar}) {
+           throw new Error(\`${tagName} can't be found!\`)
+        }
+        
+        ${indent}const ${compVar} = new ${compTypeVar}();
+        ${indent}const ${treeVar} = ${compVar}.buildNodeTree();
+      `;
+        this.generated.push(componentGeneration);
+        // Add the children to the component
+        this.generated.push(`${indent}${treeVar}.forEach(n => {`);
+        this.addToParentOrRoot('n', parentVar, indent);
+        this.generated.push(`${indent}});`);
+        return true;
+    }
+    detectRouterOutletComponent(tagName, parentVar, indent) {
+        if (tagName !== "router-outlet") {
+            return false;
+        }
+        const outletVar = this.id("outlet");
+        this.generated.push(`
+      const ${outletVar} = onejsDocument.createElement("div");
+      root.push(${outletVar});
+
+      privateEffect(async () => {
+        const compType = await router.getComponent();
+        if (compType) {
+          const comp = new compType();
+          const tree = comp.buildNodeTree();
+          ${outletVar}.innerHTML = ""; // clear old view
+          tree.forEach(n => ${outletVar}.appendChild(n));
+        }
+      }, [router.currentPath]);
+    `);
+        this.addToParentOrRoot(outletVar, parentVar, indent);
+        return true;
+    }
+    processTextNode(rawValue, parentVar, indent) {
+        // Detect {{ expr }}
+        const regex = /\{\{([^}]+)}}/g;
+        let match;
+        let lastIndex = 0;
+        let hasInterpolation = false;
+        while ((match = regex.exec(rawValue))) {
+            hasInterpolation = true;
+            const staticText = rawValue.slice(lastIndex, match.index);
+            // we first have to check if the value is a signal, because
+            // then we need to attach them together immediately instead of making to text nodes.
+            if (match[1]) {
+                const expr = match[1].trim();
+                const dynTextVar = this.createTextNode("dynText", "\"\"", indent);
+                this.addToParentOrRoot(dynTextVar, parentVar, indent);
+                const isFunctionExpr = /\(\s*\)$/.test(expr); // true if expr ends with ()
+                const cleanExpr = expr.replace(/\(\s*\)$/, ""); // remove () for deps if present
+                if (isFunctionExpr) {
+                    this.generated.push(`
+            ${indent}// listen to signal change
+            ${indent}privateEffect(() => {
+              ${indent}try {
+                ${indent}${dynTextVar}.nodeValue = String(${JSON.stringify(staticText)} + ${this.ctxVar}.${expr});
+              ${indent}} catch (e) {
+                ${indent}console.error(e);
+              ${indent}}
+            ${indent}}, [${this.ctxVar}.${cleanExpr}]);
+          `);
+                }
+                else {
+                    this.generated.push(`
+              ${indent}try {
+                ${indent}${dynTextVar}.nodeValue = String(${JSON.stringify(staticText)} + ${this.ctxVar}.${expr});
+              ${indent}} catch (e) {
+                ${indent}console.error(e);
+              ${indent}}
+            `);
+                }
+            }
+            else {
+                if (staticText.trim()) {
+                    console.log('parentVar', parentVar);
+                    console.log('staticText', staticText);
+                    const textVar = this.createTextNode("text", JSON.stringify(staticText), indent);
+                    this.addToParentOrRoot(textVar, parentVar, indent);
+                }
+            }
+            lastIndex = regex.lastIndex;
+        }
+        if (!hasInterpolation) {
+            // plain text
+            const textVar = this.createTextNode("text", JSON.stringify(rawValue), indent);
+            this.addToParentOrRoot(textVar, parentVar, indent);
+        }
+        else if (lastIndex < rawValue.length) {
+            // leftover static text
+            const leftover = rawValue.slice(lastIndex);
+            const textVar = this.createTextNode("text", JSON.stringify(leftover), indent);
+            this.addToParentOrRoot(textVar, parentVar, indent);
+        }
+    }
+    parseStyleString(style) {
+        const out = [];
+        style.split(";").forEach((pair) => {
+            const [k, v] = pair.split(":");
+            if (!k || !v)
+                return;
+            out.push({ prop: k.trim(), val: v.trim() });
+        });
+        return out;
+    }
+    getAttr(node, name) {
+        if (!node.attrs)
+            return null;
+        const a = node.attrs.find((x) => x.name === name);
+        return a ? a.value : null;
+    }
+}
+export const templateComponentCompiler = new TemplateComponentCompiler();

package/dist/src/component-plugin.js

@@ -0,0 +1,45 @@
+/* component-plugin.ts
+ * tiny-compiler.js should export a function that takes (html, compName) and returns JS code
+*/
+import { promises as fs } from 'fs';
+import { resolve, dirname } from 'path';
+import { templateComponentCompiler } from "./compiler/template-component.compiler";
+const TS_EXT_PATTERN = /\.(ts|mts|cts|tsx)/;
+export function componentPlugin() {
+    return {
+        name: "component-plugin",
+        setup(build) {
+            build.onLoad({ filter: TS_EXT_PATTERN }, async (args) => {
+                console.log("PLUGIN onLoad:", args.path);
+                let source = await fs.readFile(args.path, { encoding: "utf8" });
+                // Look for @Component with templateUrl
+                const match = source.match(/@Component\s*\(\s*{[^}]*templateUrl\s*:\s*['"](.+?)['"]/);
+                if (!match) {
+                    return { contents: source, loader: "ts" };
+                }
+                if (!match[1]) {
+                    return { contents: source, loader: "ts" };
+                }
+                const htmlPath = resolve(dirname(args.path), match[1]);
+                const html = await fs.readFile(htmlPath, "utf8");
+                const compNameMatch = source.match(/export\s+class\s+(\w+)/);
+                const compName = compNameMatch ? compNameMatch[1] : null; // "AnonymousComponent";
+                const selectorMatch = source.match(/selector\s*:\s*["'`](.*?)["'`]/);
+                const selector = selectorMatch ? selectorMatch[1] : null;
+                if (!compName || !selector) {
+                    return { contents: source, loader: "ts" };
+                }
+                // Compile HTML → render fn
+                const renderFnCode = templateComponentCompiler.compileHtmlToRender(html, selector);
+                // Inject
+                const newSource = source +
+                    "\n\n// --- generated render fn ---\n" +
+                    renderFnCode;
+                return {
+                    contents: newSource,
+                    loader: "ts", // 👈 important: hand it back as TypeScript
+                };
+            });
+        }
+    };
+}

package/dist/src/include-effect-plugin.js

@@ -0,0 +1,48 @@
+import { promises as fs } from 'fs';
+const privateEffectText = `
+"use strict";
+function privateEffect(effectFn, deps) {
+  let node = createViewEffect(effectFn, deps);
+  const effectRef = new EffectRefImpl(node);
+  effectFn();
+  return effectRef;
+}
+`;
+const effectText = `
+"use strict";
+${privateEffectText}
+function createViewEffect(effectFn, deps) {
+  const node = alienEffect(effectFn);
+
+  const effectNode = node as unknown as EffectNode;
+  effectNode.fn = effectFn;
+  if (/* ngDevMode */ true) {
+    effectNode.toString = () => \`[Effect: router}]\`;
+    // @ts-ignore
+    effectNode.debugName = options?.debugName;
+  }
+
+  return effectNode;
+}
+`;
+export function injectEffectPlugin() {
+    return {
+        name: "inject-effect",
+        setup(build) {
+            build.onEnd(async (result) => {
+                for (const out of result.outputFiles || []) {
+                    let text = out.text;
+                    if (!text.includes("function effect(")) {
+                        text = effectText + '\n' + text;
+                        console.log(`[effectPlugin] Injected effect() into ${out.path}`);
+                    }
+                    else {
+                        text = privateEffectText + '\n' + text;
+                    }
+                    // ✅ Always write, even if unmodified (prevents missing file issue)
+                    await fs.writeFile(out.path, text);
+                }
+            });
+        }
+    };
+}

package/dist/src/index.js

@@ -0,0 +1,3 @@
+export * from './onejs';
+export * from './component-plugin';
+export * from './include-effect-plugin';

package/dist/src/onejs/copy-assets.js

@@ -0,0 +1,79 @@
+import { cpSync, existsSync, readdirSync, readFileSync, statSync } from 'fs';
+import { join } from 'path';
+import { createHash } from 'crypto';
+function getPackagesWithAssets() {
+    let packagesWithAssets = [];
+    const nodeModulesPath = join(process.cwd(), 'node_modules');
+    const packages = readdirSync(nodeModulesPath);
+    // console.log("There are " + packages.length + " packages in node_modules");
+    for (const packageName of packages) {
+        const packagePath = join(nodeModulesPath, packageName);
+        if (!statSync(packagePath).isDirectory())
+            continue;
+        const pkgJsonPath = join(packagePath, 'package.json');
+        try {
+            const pkgJsonContent = readFileSync(pkgJsonPath, 'utf8');
+            const pkgJson = JSON.parse(pkgJsonContent);
+            if (pkgJson.onejs && pkgJson.onejs['assets-path']) {
+                packagesWithAssets.push({
+                    name: packageName,
+                    src: join("node_modules", packageName, pkgJson.onejs['assets-path'])
+                });
+            }
+        }
+        catch (error) {
+            if (error.code !== 'ENOENT') {
+                console.error(`Error processing ${packageName}:`, error);
+            }
+        }
+    }
+    // console.log("Found " + packagesWithAssets.length + " packages with assets");
+    return packagesWithAssets;
+}
+const getDigest = (string) => {
+    const hash = createHash('md5');
+    const data = hash.update(string, 'utf-8');
+    return data.digest('hex');
+};
+const getFileDigest = (path) => {
+    if (!existsSync(path)) {
+        return null;
+    }
+    if (statSync(path).isDirectory()) {
+        return null;
+    }
+    return getDigest(readFileSync(path));
+};
+function filter(src, dest) {
+    if (!existsSync(dest)) {
+        return true;
+    }
+    if (statSync(dest).isDirectory()) {
+        return true;
+    }
+    return getFileDigest(src) !== getFileDigest(dest);
+}
+export function copyAssetsPlugin(options = {}) {
+    let dest = options.dest || 'assets';
+    return {
+        name: "onejs-copy-assets",
+        setup(build) {
+            build.onEnd(async () => {
+                const packagesWithAssets = getPackagesWithAssets();
+                console.log(`[esbuild] syncing assets from:`);
+                for (const pkg of packagesWithAssets) {
+                    const destPath = join(dest, "@" + pkg.name);
+                    cpSync(pkg.src, destPath, {
+                        dereference: options.dereference || true,
+                        errorOnExist: options.errorOnExist || false,
+                        filter: options.filter || filter,
+                        force: options.force || true,
+                        preserveTimestamps: options.preserveTimestamps || true,
+                        recursive: options.recursive || true,
+                    });
+                    console.log(`[esbuild] > ${pkg.name}`);
+                }
+            });
+        }
+    };
+}

package/dist/src/onejs/decorator-fix.js

@@ -0,0 +1,14 @@
+import { readFileSync, writeFileSync } from 'fs';
+export function decoratorFixPlugin(options = {}) {
+    const outfile = options.outfile || "@outputs/esbuild/app.js";
+    return {
+        name: "decorator-fix-plugin",
+        setup(build) {
+            build.onEnd(() => {
+                let content = readFileSync(outfile, "utf8");
+                content = content.replace(/exports\s*&&\s*exports\.__decorate/g, 'typeof exports !== "undefined" && exports.__decorate');
+                writeFileSync(outfile, content, "utf8");
+            });
+        }
+    };
+}

package/dist/src/onejs/import-transform.js

@@ -0,0 +1,86 @@
+import { promises as fs } from 'fs';
+import { extname } from 'path';
+/**
+ * Copied from OneJs
+ * An esbuild plugin that transforms imports from modules starting with a capital letter.
+ *
+ * ## Functionality:
+ * 1. **Externalizing Capitalized Module Imports**:
+ *    - Marks imports from modules with names starting with a capital letter as external
+ *      during the resolution phase.
+ *
+ * 2. **Transforming Import Statements**:
+ *    - Rewrites ES module import statements to reference a global `CS` object.
+ *    - Converts:
+ *      ```js
+ *      import { Foo, Bar } from "MyModule";
+ *      ```
+ *      Into:
+ *      ```js
+ *      const { Foo, Bar } = CS.MyModule;
+ *      ```
+ *    - If the import is a default import or namespace import:
+ *      ```js
+ *      import MyModule from "MyModule";
+ *      ```
+ *      Becomes:
+ *      ```js
+ *      const MyModule = CS.MyModule;
+ *      ```
+ *
+ * 3. **Handling `require` Statements**:
+ *    - Transforms `__require("MyModule")` into `CS.MyModule`.
+ *
+ * ## Parameters:
+ * @param {Object} options - Configuration options.
+ * @param {Function} [options.moduleFilter] - A filter function that determines if a module should be transformed.
+ *
+ * ## Returns:
+ * @returns {Object} An esbuild plugin object.
+ *
+ * ## Example Usage:
+ *
+ * ```js
+ * importTransformation({
+ *     moduleFilter: (moduleName) => moduleName.startsWith("MyLib")
+ * });
+ * ```
+ *
+ */
+export function importTransformationPlugin(options = {}) {
+    const moduleFilter = options.moduleFilter || (() => true);
+    return {
+        name: "onejs-import-transform",
+        setup(build) {
+            // First pass: Mark imports from modules starting with a capital letter as external
+            build.onResolve({ filter: /^[A-Z]/ }, (args) => {
+                return { path: args.path, external: true };
+            });
+            // Second pass: Transform all JS and TSX files
+            build.onLoad({ filter: /\.(js|jsx|ts|tsx)$/ }, async (args) => {
+                let contents = await fs.readFile(args.path, "utf8");
+                // Transform imports from modules starting with a capital letter
+                contents = contents.replace(/import\s+(?:{([^}]+)})?\s*from\s*["']([A-Z][^"']*)["'];?/g, (match, imports, moduleName) => {
+                    if (!moduleFilter(moduleName))
+                        return match;
+                    moduleName = moduleName.replace(/\//g, ".");
+                    if (imports) {
+                        const importItems = imports.split(",").map((item) => item.trim());
+                        return `const { ${importItems.join(", ")} } = CS.${moduleName};`;
+                    }
+                    else {
+                        const namespaceName = moduleName.split(".").pop();
+                        return `const ${namespaceName} = CS.${moduleName};`;
+                    }
+                });
+                // Transform any remaining require statements for such modules
+                contents = contents.replace(/__require\(["']([A-Z][^"']*)["']\)/g, (match, moduleName) => {
+                    if (!moduleFilter(moduleName))
+                        return match;
+                    return `CS.${moduleName.replace(/\//g, ".")}`;
+                });
+                return { contents, loader: extname(args.path).slice(1) };
+            });
+        },
+    };
+}

package/dist/src/onejs/index.js

@@ -0,0 +1,3 @@
+export * from './import-transform';
+export * from './copy-assets';
+export * from './decorator-fix';

package/jest.config.js

@@ -0,0 +1,13 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} **/
+module.exports = {
+    testEnvironment: "node",
+    transform: {
+        "^.+\\.(js|jsx|ts|tsx)$": "ts-jest",
+    },
+    transformIgnorePatterns: [
+        "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)"
+    ],
+    testPathIgnorePatterns: [
+        "<rootDir>/node_modules/",
+    ],
+}

package/main.mjs

@@ -0,0 +1,48 @@
+/**
+ * Default OneJS ESbuild Config
+ */
+import { context } from "esbuild";
+import { componentPlugin, injectEffectPlugin, importTransformationPlugin, copyAssetsPlugin, decoratorFixPlugin } from "./src";
+// @ts-ignore
+const once = process.argv.includes("--once");
+// !once && outputWatcherPlugin(),
+const ctx = await context({
+    entryPoints: ["./src/main.ts"],
+    bundle: true,
+    plugins: [
+        componentPlugin(),
+        importTransformationPlugin(),
+        copyAssetsPlugin(),
+        decoratorFixPlugin(),
+        {
+            name: 'add-mjs',
+            setup(build) {
+                build.onResolve({ filter: /.*/ }, args => {
+                    if (args.importer)
+                        return { path: args.path + '.mjs', external: true };
+                });
+            }
+        },
+        injectEffectPlugin(),
+    ],
+    inject: ["onejs-core/dist/index.js"],
+    platform: "node",
+    sourcemap: true,
+    sourceRoot: process.cwd() + "/index",
+    alias: {
+        "onejs": "onejs-core",
+        "esbuild": "esbuild",
+    },
+    outfile: "@outputs/esbuild/app.js",
+    write: false, // override
+});
+if (once) {
+    await ctx.rebuild();
+    await ctx.dispose();
+    console.log("Build finished.");
+    process.exit(0);
+}
+else {
+    await ctx.watch();
+    console.log("Watching for changes…");
+}