@adaas/are-html 0.0.2

package/src/nodes/AreInterpolation.ts

@@ -0,0 +1,16 @@
+import { AreNodeNewProps } from "@adaas/are";
+import { AreHTMLNode } from "@adaas/are-html/node";
+
+
+export class AreInterpolation extends AreHTMLNode {
+
+        fromNew(newEntity: AreNodeNewProps): void {
+            super.fromNew({
+                ...newEntity,
+                payload:{
+                    ...(newEntity.payload || {}),
+                    entity: 'are-interpolation',
+                }
+            });
+        }
+}

package/src/nodes/AreRoot.ts

@@ -0,0 +1,29 @@
+import { A_FormatterHelper, } from "@adaas/a-concept";
+import { A_Frame } from "@adaas/a-frame";
+import { Are } from "@adaas/are";
+import { AreHTMLNode } from "@adaas/are-html/node";
+
+
+@A_Frame.Entity({
+    namespace: 'A-ARE',
+    name: 'AreRootNode',
+    description: 'AreRootNode represents the root node in the scene graph. It extends the base AreHTMLNode and includes additional properties and methods specific to the root node, such as handling the root element and its associated component.'
+})
+export class AreRootNode extends AreHTMLNode {
+    /**
+     * For the root node, we can default to a generic container element like <div> since it serves as the root of the component tree and does not correspond to a specific HTML tag defined in the markup. The actual content and structure of the root node will be determined by the child nodes and components that are rendered within it, allowing for flexibility in how the root node is used and what it contains.
+     */
+    get tag(): string {
+        return 'div';
+    }
+    /**
+     * A custom component associated with this node, which can be used to provide custom logic and behavior for the node. This component is typically defined in the context and can be resolved based on the node's type or other identifying information. The component can include its own template, markup, styles, and features that are specific to the functionality it provides.
+     * 
+     * Example: If the node type is "custom-component", the corresponding component would be resolved from the context and can be used to provide custom rendering and behavior for nodes of that type.
+     * 
+     * [!] Note: The component is optional and may not be defined for all nodes. If no component is associated with the node, it will be treated as a standard HTML element or a basic node without custom logic.
+     */
+    get component(): Are | undefined {
+        return this.scope.resolve<Are>(A_FormatterHelper.toPascalCase(this.aseid.entity)) as Are | undefined;
+    }
+}

package/src/nodes/AreText.ts

@@ -0,0 +1,17 @@
+import { AreNodeNewProps } from "@adaas/are";
+import { AreHTMLNode } from "@adaas/are-html/node";
+
+
+export class AreText extends AreHTMLNode {
+
+
+    fromNew(newEntity: AreNodeNewProps): void {
+        super.fromNew({
+            ...newEntity,
+            payload: {
+                ...(newEntity.payload || {}),
+                entity: 'are-text',
+            }
+        });
+    }
+}

package/src/signals/AreRoute.signal.ts

@@ -0,0 +1,27 @@
+import { A_Route } from "@adaas/a-utils/a-route";
+import { A_Signal } from "@adaas/a-utils/a-signal";
+import { AreSignal } from "@adaas/are";
+
+
+
+export class AreRoute extends AreSignal<A_Route> {
+
+    constructor(path: string | RegExp) {
+        super({
+            data: new A_Route(path)
+        });
+    }
+
+    get route(): A_Route {
+        return this.data;
+    }
+
+    static default(): AreRoute | undefined {
+        return new AreRoute(document.location.pathname || '/');
+    }
+
+
+    compare(other: A_Signal<A_Route>): boolean {
+        return this.route.toRegExp().test(other.data.toString());
+    }
+}

package/tests/AreTokenizer.test.ts

@@ -0,0 +1,260 @@
+import { AreHTMLTokenizer } from '@adaas/are-html/tokenizer';
+import { AreStaticAttribute } from '@adaas/are-html/attributes/AreStatic.attribute';
+import { AreBindingAttribute } from '@adaas/are-html/attributes/AreBinding.attribute';
+import { AreEventAttribute } from '@adaas/are-html/attributes/AreEvent.attribute';
+import { AreDirectiveAttribute } from '@adaas/are-html/attributes/AreDirective.attribute';
+import { AreHTMLEngine } from '@adaas/are-html/engine';
+import { AreSyntaxTokenMatch } from '@adaas/are';
+
+jest.retryTimes(0);
+
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── Helpers ───────────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Returns a bare AreHTMLTokenizer instance without registering it in any scope,
+ * sufficient for testing pure attribute-extraction logic.
+ */
+function makeTokenizer(): AreHTMLTokenizer {
+    // Object.create skips the constructor, so instance properties aren't set.
+    // Manually initialise ATTR_PATTERN (the only property extractAttributes needs).
+    const t = Object.create(AreHTMLTokenizer.prototype) as AreHTMLTokenizer;
+    t.ATTR_PATTERN = /([$:@]?[\w-]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>/"'=]+)))?/g;
+    return t;
+}
+
+/**
+ * Returns an AreHTMLEngine instance so we can call its protected matchers
+ * directly without spinning up a full container.
+ */
+function makeEngine(): AreHTMLEngine {
+    return Object.create(AreHTMLEngine.prototype) as AreHTMLEngine;
+}
+
+/** Minimal stub for the `build` callback required by the matcher methods. */
+function buildStub(
+    raw: string,
+    content: string,
+    position: number,
+    closing: string,
+): AreSyntaxTokenMatch {
+    return { raw, content, position, closing, opening: '<', payload: {} } as unknown as AreSyntaxTokenMatch;
+}
+
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── AreHTMLTokenizer — extractAttributes ─────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('AreHTMLTokenizer — extractAttributes', () => {
+
+    it('parses plain static attributes', () => {
+        const tokenizer = makeTokenizer();
+        const attrs = tokenizer.extractAttributes('<div class="dashboard" id="main">');
+
+        expect(attrs).toHaveLength(2);
+        expect(attrs[0]).toBeInstanceOf(AreStaticAttribute);
+        expect(attrs[0].name).toBe('class');
+        expect(attrs[0].content).toBe('dashboard');
+        expect(attrs[1]).toBeInstanceOf(AreStaticAttribute);
+        expect(attrs[1].name).toBe('id');
+        expect(attrs[1].content).toBe('main');
+    });
+
+    it('parses a binding attribute prefixed with ":"', () => {
+        const tokenizer = makeTokenizer();
+        const attrs = tokenizer.extractAttributes('<span :class="dynamicClass">');
+
+        expect(attrs).toHaveLength(1);
+        expect(attrs[0]).toBeInstanceOf(AreBindingAttribute);
+        expect(attrs[0].name).toBe('class');
+        expect(attrs[0].content).toBe('dynamicClass');
+    });
+
+    it('parses an event attribute prefixed with "@"', () => {
+        const tokenizer = makeTokenizer();
+        const attrs = tokenizer.extractAttributes('<button @click="onSubmit">');
+
+        expect(attrs).toHaveLength(1);
+        expect(attrs[0]).toBeInstanceOf(AreEventAttribute);
+        expect(attrs[0].name).toBe('click');
+        expect(attrs[0].content).toBe('onSubmit');
+    });
+
+    it('parses a directive attribute prefixed with "$"', () => {
+        const tokenizer = makeTokenizer();
+        const attrs = tokenizer.extractAttributes('<div $if="isVisible">');
+
+        expect(attrs).toHaveLength(1);
+        expect(attrs[0]).toBeInstanceOf(AreDirectiveAttribute);
+        expect(attrs[0].name).toBe('if');
+        expect(attrs[0].content).toBe('isVisible');
+    });
+
+    it('parses a "$for" directive from a dashboard-style template', () => {
+        const tokenizer = makeTokenizer();
+        const attrs = tokenizer.extractAttributes('<tr $for="item in items">');
+
+        expect(attrs).toHaveLength(1);
+        expect(attrs[0]).toBeInstanceOf(AreDirectiveAttribute);
+        expect(attrs[0].name).toBe('for');
+        expect(attrs[0].content).toBe('item in items');
+    });
+
+    it('handles mixed attribute types on the same element', () => {
+        const tokenizer = makeTokenizer();
+        // Resembles a real dashboard nav-item: static class, binding, event, directive
+        const attrs = tokenizer.extractAttributes(
+            '<span class="nav-item" :class="activeClass" @click="navigate" $if="isVisible">'
+        );
+
+        expect(attrs).toHaveLength(4);
+        expect(attrs[0]).toBeInstanceOf(AreStaticAttribute);
+        expect(attrs[1]).toBeInstanceOf(AreBindingAttribute);
+        expect(attrs[2]).toBeInstanceOf(AreEventAttribute);
+        expect(attrs[3]).toBeInstanceOf(AreDirectiveAttribute);
+    });
+
+    it('returns an empty array for a tag with no attributes', () => {
+        const tokenizer = makeTokenizer();
+        const attrs = tokenizer.extractAttributes('<div>');
+
+        expect(attrs).toHaveLength(0);
+    });
+
+    it('returns an empty array for a self-closing tag with no attributes', () => {
+        const tokenizer = makeTokenizer();
+        const attrs = tokenizer.extractAttributes('<br/>');
+
+        expect(attrs).toHaveLength(0);
+    });
+
+    it('handles attribute values with single quotes', () => {
+        const tokenizer = makeTokenizer();
+        const attrs = tokenizer.extractAttributes(`<div class='stat-card'>`);
+
+        expect(attrs).toHaveLength(1);
+        expect(attrs[0]).toBeInstanceOf(AreStaticAttribute);
+        expect(attrs[0].content).toBe('stat-card');
+    });
+});
+
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── AreHTMLEngine — htmlElementMatcher ───────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('AreHTMLEngine — htmlElementMatcher', () => {
+
+    it('matches a simple element and returns correct raw/content', () => {
+        const engine = makeEngine();
+        const source = '<div class="dashboard"></div>';
+        const match = (engine as any).htmlElementMatcher(source, 0, source.length, buildStub);
+
+        expect(match).not.toBeNull();
+        expect(match!.raw).toBe('<div class="dashboard"></div>');
+        expect(match!.content).toBe('');
+        expect(match!.payload.entity).toBe('div');
+        expect(match!.payload.selfClose).toBe(false);
+    });
+
+    it('matches nested elements and captures inner content', () => {
+        const engine = makeEngine();
+        const source = '<header class="header"><dashboard-logo></dashboard-logo></header>';
+        const match = (engine as any).htmlElementMatcher(source, 0, source.length, buildStub);
+
+        expect(match).not.toBeNull();
+        expect(match!.payload.entity).toBe('header');
+        expect(match!.content).toBe('<dashboard-logo></dashboard-logo>');
+    });
+
+    it('matches a self-closing element', () => {
+        const engine = makeEngine();
+        const source = '<br/>';
+        const match = (engine as any).htmlElementMatcher(source, 0, source.length, buildStub);
+
+        expect(match).not.toBeNull();
+        expect(match!.payload.entity).toBe('br');
+        expect(match!.payload.selfClose).toBe(true);
+    });
+
+    it('skips HTML comments and still finds the next element', () => {
+        const engine = makeEngine();
+        const source = '<!-- header comment --><div></div>';
+        const match = (engine as any).htmlElementMatcher(source, 0, source.length, buildStub);
+
+        expect(match).not.toBeNull();
+        expect(match!.payload.entity).toBe('div');
+    });
+
+    it('matches deeply nested same-tag elements (nesting counter)', () => {
+        const engine = makeEngine();
+        const source = '<div><div>inner</div></div>';
+        const match = (engine as any).htmlElementMatcher(source, 0, source.length, buildStub);
+
+        expect(match).not.toBeNull();
+        expect(match!.raw).toBe('<div><div>inner</div></div>');
+        expect(match!.content).toBe('<div>inner</div>');
+    });
+
+    it('matches a custom component tag (e.g. dashboard-header)', () => {
+        const engine = makeEngine();
+        const source = '<dashboard-header></dashboard-header>';
+        const match = (engine as any).htmlElementMatcher(source, 0, source.length, buildStub);
+
+        expect(match).not.toBeNull();
+        expect(match!.payload.entity).toBe('dashboard-header');
+    });
+
+    it('extracts the id attribute into the payload', () => {
+        const engine = makeEngine();
+        const source = '<section id="stats-section"></section>';
+        const match = (engine as any).htmlElementMatcher(source, 0, source.length, buildStub);
+
+        expect(match).not.toBeNull();
+        expect(match!.payload.id).toBe('stats-section');
+    });
+
+    it('returns null for an empty string', () => {
+        const engine = makeEngine();
+        const match = (engine as any).htmlElementMatcher('', 0, 0, buildStub);
+
+        expect(match).toBeNull();
+    });
+
+    it('returns null when the source contains only a closing tag', () => {
+        const engine = makeEngine();
+        const source = '</div>';
+        const match = (engine as any).htmlElementMatcher(source, 0, source.length, buildStub);
+
+        expect(match).toBeNull();
+    });
+});
+
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ── AreHTMLEngine — rootElementMatcher ───────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('AreHTMLEngine — rootElementMatcher', () => {
+
+    it('matches an <are-root> tag', () => {
+        const engine = makeEngine();
+        const source = '<are-root><div class="app"></div></are-root>';
+        const match = (engine as any).rootElementMatcher(source, 0, source.length, buildStub);
+
+        expect(match).not.toBeNull();
+        expect(match!.payload.entity).toBe('are-root');
+        expect(match!.content).toBe('<div class="app"></div>');
+    });
+
+    it('does not match a non-root tag', () => {
+        const engine = makeEngine();
+        const source = '<div class="dashboard"></div>';
+        const match = (engine as any).rootElementMatcher(source, 0, source.length, buildStub);
+
+        expect(match).toBeNull();
+    });
+});

package/tests/jest.setup.ts

@@ -0,0 +1,30 @@
+// import { A_Context } from '@adaas/a-concept/a-context';
+// import fs from 'fs';
+
+// /**
+//  * Base hooks for tests
+//  */
+// beforeAll(async () => {
+
+//     return Promise.resolve();
+// });
+
+// afterAll(async () => {
+//     try {
+//         fs.unlinkSync('a-concept.conf.json');
+
+//     } catch (error) {
+
+//     }
+//     return Promise.resolve();
+// });
+
+// beforeEach(async () => {
+//     A_Context.reset();
+//     return Promise.resolve();
+// });
+
+// afterEach(async () => {
+//     A_Context.reset();
+//     return Promise.resolve();
+// });

package/tsconfig.json

@@ -0,0 +1,60 @@
+{
+  "extends": "./.conf/tsconfig.base.json",
+
+  "compilerOptions": {
+    "rootDir": "./",
+    "baseUrl": ".",
+    /* ===============================
+       Internal aliases (DEV ONLY)
+       =============================== */
+    "paths": {
+      // Base ARE Entities
+      "@adaas/are-html/nodes/*": ["src/nodes/*"],
+      "@adaas/are-html/attributes/*": ["src/attributes/*"],
+      "@adaas/are-html/directives/*": ["src/directives/*"],
+      "@adaas/are-html/instructions/*": ["src/instructions/*"],
+      "@adaas/are-html/watchers/*": ["src/watchers/*"],
+      "@adaas/are-html/signals/*": ["src/signals/*"],
+      // Custom Lib Exports
+      "@adaas/are-html/style/*": ["src/lib/AreStyle/*"],
+      "@adaas/are-html/directive/*": ["src/lib/AreDirective/*"],
+      "@adaas/are-html/root/*": ["src/lib/AreRoot/*"],
+      "@adaas/are-html/node": ["src/lib/AreHTMLNode/AreHTMLNode"],
+      "@adaas/are-html/attribute": ["src/lib/AreHTMLAttribute/AreHTML.attribute"],
+      // HTML Engine Basics
+      "@adaas/are-html/compiler": ["src/engine/AreHTML.compiler"],
+      "@adaas/are-html/constants": ["src/engine/AreHTML.constants"],
+      "@adaas/are-html/context": ["src/engine/AreHTML.context"],
+      "@adaas/are-html/engine": ["src/engine/AreHTML.engine"],
+      "@adaas/are-html/interpreter": ["src/engine/AreHTML.interpreter.ts"],
+      "@adaas/are-html/lifecycle": ["src/engine/AreHTML.lifecycle"],
+      "@adaas/are-html/tokenizer": ["src/engine/AreHTML.tokenizer"],
+      "@adaas/are-html/transformer": ["src/engine/AreHTML.transformer"],
+      "@adaas/are-html/types": ["src/engine/AreHTML.types"],
+
+    },
+
+    /* ===============================
+       Types
+       =============================== */
+    "types": [
+      "node",
+      "jest",
+      "mocha",
+    ],
+    "typeRoots": ["node_modules/@types"]
+  },
+
+  "include": [
+    "src/**/*",
+    "tests/**/*",
+    "examples/**/*.ts",
+    "src/index.ts",
+    "src/env/global.browser.d.ts"
+  ],
+
+  "exclude": [
+    "node_modules",
+    "dist",
+  ]
+}

package/tslint.json

@@ -0,0 +1,98 @@
+{
+    "extends": [
+      "tslint-react",
+      "tslint-config-standard",
+      "tslint-microsoft-contrib",
+      "tslint-config-prettier"
+    ],
+    "rules": {
+      "array-bracket-spacing": [true, "never"],
+      "arrow-return-shorthand": true,
+      "no-backbone-get-set-outside-model": false,
+      "completed-docs": false,
+      "curly": [true, "ignore-same-line"],
+      "cyclomatic-complexity": [true, 24],
+      "eofline": true,
+      "export-name": false,
+      "function-name": false,
+      "import-name": false,
+      "import-spacing": true,
+      "interface-name": [true, "never-prefix"],
+      "jsx-alignment": false,
+      "jsx-boolean-value": false,
+      "jsx-curly-spacing": false,
+      "jsx-no-multiline-js": false,
+      "match-default-export-name": false,
+      "max-func-body-length": 200,
+      "member-access": [true, "no-public"],
+      "member-ordering": {"options": [{"order": "fields-first"}]},
+      "missing-jsdoc": false,
+      "mocha-no-side-effect-code": false,
+      "no-arg": true,
+      "no-bitwise": true,
+      "no-console": false,
+      "no-construct": true,
+      "no-default-export": false,
+      "no-duplicate-switch-case": true,
+      "no-duplicate-variable": true,
+      "no-empty-interface": false,
+      "no-eval": true,
+      "no-function-expression": false,
+      "no-http-string": false,
+      "no-implicit-dependencies": false,
+      "no-multiline-string": false,
+      "no-non-null-assertion": true,
+      "no-relative-imports": false,
+      "no-require-imports": {"severity": "warning"},
+      "no-reserved-keywords": false,
+      "no-return-await": true,
+      "no-single-line-block-comment": false,
+      "no-string-throw": true,
+      "no-submodule-imports": false,
+      "no-suspicious-comment": false,
+      "no-unsafe-any": false,
+      "no-unused-variable": false,
+      "no-var-requires": true,
+      "no-void-expression": false,
+      "object-curly-spacing": [true, "never"],
+      "ordered-imports": false,
+      "prefer-for-of": true,
+      "prefer-object-spread": true,
+      "prefer-type-cast": false,
+      "quotemark": [true, "single", "jsx-double", "avoid-escape"],
+      "semicolon": [true, "never"],
+      "strict-boolean-expressions": false,
+      "strict-type-predicates": false,
+      "ter-func-call-spacing": [true, "never"],
+      "trailing-comma": [true, "always"],
+      "type-literal-delimiter": false,
+      "typedef": false,
+      "typedef-whitespace": [
+        true,
+        {
+          "call-signature": "nospace",
+          "index-signature": "nospace",
+          "parameter": "nospace",
+          "property-declaration": "nospace",
+          "variable-declaration": "nospace"
+        },
+        {
+          "call-signature": "onespace",
+          "index-signature": "onespace",
+          "parameter": "onespace",
+          "property-declaration": "onespace",
+          "variable-declaration": "onespace"
+        }
+      ],
+      "unified-signatures": true,
+      "variable-name": false,
+      "whitespace": [
+        true,
+        "check-branch",
+        "check-operator",
+        "check-typecast",
+        "check-rest-spread",
+        "check-type-operator"
+      ]
+    }
+  }

package/tsup.config.ts

@@ -0,0 +1,108 @@
+import { defineConfig } from "tsup";
+import { resolve } from "path";
+import { existsSync } from "fs";
+import type { Plugin } from "esbuild";
+
+/**
+ * Custom esbuild plugin that prevents esbuild's built-in `native-node-modules`
+ * plugin from intercepting TypeScript source files that use `.node` in their
+ * filename convention (e.g. `AreComponent.node.ts`).
+ *
+ * Esbuild treats any import path ending in `.node` as a native binary addon.
+ * This plugin intercepts those paths first, checks if a matching `.ts` source
+ * file exists, and resolves it directly — leaving native binary imports
+ * (where no `.ts` counterpart exists) for the native-node-modules plugin.
+ */
+const tsNodeFilesPlugin: Plugin = {
+  name: "are-ts-node-files",
+  setup(build) {
+    build.onResolve({ filter: /\.node$/ }, (args) => {
+      const tsPath = resolve(args.resolveDir, args.path + ".ts");
+      if (existsSync(tsPath)) {
+        return { path: tsPath };
+      }
+      return null;
+    });
+  },
+};
+
+export default defineConfig([
+  /**
+   * ============================
+   * Browser build
+   * ============================
+   *
+   * Single bundled ESM output for browser consumers.
+   */
+  {
+    entry: [
+      "src/index.ts", // Main entry point for browser build
+    ],
+
+    // Output directory for browser bundle
+    outDir: "dist/browser",
+
+    tsconfig: ".conf/tsconfig.browser.json",
+
+    bundle: true, // Bundle all modules into one file
+
+    // Browser consumers expect ESM
+    format: ["esm"],
+
+    // Tells esbuild this is browser-safe code
+    platform: "browser",
+
+    // Reasonable baseline for modern browsers
+    target: "es2020",
+
+    // Smaller bundles
+    treeshake: true,
+
+    // Useful for debugging in bundlers
+    sourcemap: true,
+
+    // Emit .d.ts files
+    dts: true,
+
+    esbuildPlugins: [tsNodeFilesPlugin],
+  },
+
+  /**
+   * ============================
+   * Node build
+   * ============================
+   *
+   * Individual CJS + ESM files preserved for direct imports.
+   */
+  {
+    entry: [
+      "src/**/*.ts"
+    ],
+
+    // Output directory for node bundle
+    outDir: "dist/node",
+
+    tsconfig: ".conf/tsconfig.node.json",
+
+    bundle: false, // Don't bundle node build, keep imports as-is
+
+    clean: true,
+
+    // Support both module systems
+    format: ["cjs", "esm"],
+
+    // Enables Node globals and resolution
+    platform: "node",
+
+    // Node 16+ safe baseline
+    target: "es2020",
+
+    treeshake: true,
+    sourcemap: true,
+
+    // Emit .d.ts files (shared shape)
+    dts: true,
+
+    esbuildPlugins: [tsNodeFilesPlugin],
+  },
+]);