@devera_se/bedrockjs 0.1.1

package/src/component.js

@@ -0,0 +1,357 @@
+/**
+ * Base Component class for creating web components
+ */
+
+import { render } from './render.js';
+import { watch } from './reactive.js';
+
+// Registry of defined components
+const componentRegistry = new Map();
+
+/**
+ * Base class for creating reactive web components
+ */
+export class Component extends HTMLElement {
+  // Override in subclass to set custom tag name
+  static tag = null;
+
+  // Set to true to use Shadow DOM
+  static shadow = false;
+
+  // Define reactive properties
+  static properties = {};
+
+  // Set to false to disable auto-registration
+  static autoRegister = true;
+
+  // Store for property values
+  #props = {};
+
+  // Watcher cleanup function
+  #stopWatch = null;
+
+  // Render root (shadow or light DOM)
+  #renderRoot = null;
+
+  // Whether component is connected
+  #connected = false;
+
+  // Pending render flag
+  #pendingRender = false;
+
+  // Route data from router
+  #routeData = null;
+
+  constructor() {
+    super();
+
+    // Initialize shadow DOM if enabled
+    if (this.constructor.shadow) {
+      this.#renderRoot = this.attachShadow({ mode: 'open' });
+    } else {
+      this.#renderRoot = this;
+    }
+
+    // Initialize reactive properties
+    this.#initializeProperties();
+  }
+
+  /**
+   * Initialize reactive properties from static definition
+   */
+  #initializeProperties() {
+    const properties = this.constructor.properties;
+
+    for (const [name, config] of Object.entries(properties)) {
+      const normalizedConfig = typeof config === 'function'
+        ? { type: config }
+        : config;
+
+      // Set default value
+      if (normalizedConfig.default !== undefined) {
+        this.#props[name] = typeof normalizedConfig.default === 'function'
+          ? normalizedConfig.default()
+          : normalizedConfig.default;
+      } else {
+        this.#props[name] = undefined;
+      }
+
+      // Define getter/setter
+      Object.defineProperty(this, name, {
+        get: () => this.#props[name],
+        set: (value) => {
+          const oldValue = this.#props[name];
+          const coerced = this.#coerceValue(value, normalizedConfig.type);
+
+          if (oldValue !== coerced) {
+            this.#props[name] = coerced;
+            this.#scheduleRender();
+          }
+        },
+        enumerable: true,
+        configurable: true
+      });
+    }
+  }
+
+  /**
+   * Coerce value to the specified type
+   */
+  #coerceValue(value, type) {
+    if (value === null || value === undefined) {
+      return value;
+    }
+
+    if (!type) return value;
+
+    switch (type) {
+      case String:
+        return String(value);
+      case Number:
+        return Number(value);
+      case Boolean:
+        return Boolean(value);
+      case Array:
+        return Array.isArray(value) ? value : [value];
+      case Object:
+        return typeof value === 'object' ? value : { value };
+      default:
+        return value;
+    }
+  }
+
+  /**
+   * Get the render root (shadow DOM or this element)
+   */
+  get renderRoot() {
+    return this.#renderRoot;
+  }
+
+  /**
+   * Get route data
+   */
+  get routeData() {
+    return this.#routeData;
+  }
+
+  /**
+   * Set route data (called by router)
+   */
+  set routeData(data) {
+    this.#routeData = data;
+    this.#scheduleRender();
+  }
+
+  /**
+   * Called when element is connected to DOM
+   */
+  connectedCallback() {
+    this.#connected = true;
+
+    // Read attributes into properties
+    this.#readAttributes();
+
+    // Initial render
+    this.#doRender();
+
+    // Set up reactive watching
+    this.#stopWatch = watch(() => {
+      this.#doRender();
+    }, { immediate: false });
+  }
+
+  /**
+   * Called when element is disconnected from DOM
+   */
+  disconnectedCallback() {
+    this.#connected = false;
+
+    if (this.#stopWatch) {
+      this.#stopWatch();
+      this.#stopWatch = null;
+    }
+  }
+
+  /**
+   * Read attributes into properties
+   */
+  #readAttributes() {
+    const properties = this.constructor.properties;
+
+    for (const [name, config] of Object.entries(properties)) {
+      const normalizedConfig = typeof config === 'function'
+        ? { type: config }
+        : config;
+
+      // Convert property name to attribute name (camelCase -> kebab-case)
+      const attrName = name.replace(/([A-Z])/g, '-$1').toLowerCase();
+
+      if (this.hasAttribute(attrName)) {
+        const attrValue = this.getAttribute(attrName);
+        this[name] = this.#parseAttributeValue(attrValue, normalizedConfig.type);
+      }
+    }
+  }
+
+  /**
+   * Parse attribute string value based on type
+   */
+  #parseAttributeValue(value, type) {
+    if (!type) return value;
+
+    switch (type) {
+      case Boolean:
+        return value !== null && value !== 'false';
+      case Number:
+        return Number(value);
+      case Array:
+      case Object:
+        try {
+          return JSON.parse(value);
+        } catch {
+          return value;
+        }
+      default:
+        return value;
+    }
+  }
+
+  /**
+   * Observe attribute changes
+   */
+  static get observedAttributes() {
+    const properties = this.properties || {};
+    return Object.keys(properties).map(name =>
+      name.replace(/([A-Z])/g, '-$1').toLowerCase()
+    );
+  }
+
+  /**
+   * Called when an observed attribute changes
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+
+    // Convert attribute name to property name (kebab-case -> camelCase)
+    const propName = name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+
+    if (propName in this.constructor.properties) {
+      const config = this.constructor.properties[propName];
+      const normalizedConfig = typeof config === 'function'
+        ? { type: config }
+        : config;
+
+      this[propName] = this.#parseAttributeValue(newValue, normalizedConfig.type);
+    }
+  }
+
+  /**
+   * Schedule a render on next microtask
+   */
+  #scheduleRender() {
+    if (!this.#connected || this.#pendingRender) return;
+
+    this.#pendingRender = true;
+    queueMicrotask(() => {
+      this.#pendingRender = false;
+      if (this.#connected) {
+        this.#doRender();
+      }
+    });
+  }
+
+  /**
+   * Perform the actual render
+   */
+  #doRender() {
+    const result = this.render();
+    if (result) {
+      render(result, this.#renderRoot);
+    }
+    this.updated();
+  }
+
+  /**
+   * Override to return template result
+   * @returns {TemplateResult|null}
+   */
+  render() {
+    return null;
+  }
+
+  /**
+   * Called after each render
+   */
+  updated() {
+    // Override in subclass
+  }
+
+  /**
+   * Manually trigger a re-render
+   */
+  requestUpdate() {
+    this.#scheduleRender();
+  }
+
+  /**
+   * Register this component with the custom elements registry
+   * @param {string} [tagName] - Optional tag name override
+   */
+  static register(tagName) {
+    const tag = tagName || this.tag;
+
+    if (!tag) {
+      throw new Error('Component must have a tag name');
+    }
+
+    if (!customElements.get(tag)) {
+      customElements.define(tag, this);
+      componentRegistry.set(tag, this);
+    }
+
+    return this;
+  }
+}
+
+/**
+ * Decorator/helper to define a component
+ * @param {string} tag - Tag name
+ * @param {Object} options - Component options
+ */
+export function defineComponent(tag, options = {}) {
+  return (ComponentClass) => {
+    ComponentClass.tag = tag;
+
+    if (options.shadow !== undefined) {
+      ComponentClass.shadow = options.shadow;
+    }
+
+    if (options.properties) {
+      ComponentClass.properties = {
+        ...ComponentClass.properties,
+        ...options.properties
+      };
+    }
+
+    if (options.autoRegister !== false) {
+      ComponentClass.register();
+    }
+
+    return ComponentClass;
+  };
+}
+
+/**
+ * Auto-register components when the class is defined
+ * Call this after defining your component class
+ */
+export function autoRegister(ComponentClass) {
+  if (ComponentClass.autoRegister && ComponentClass.tag) {
+    ComponentClass.register();
+  }
+  return ComponentClass;
+}
+
+// Hook into class definition to auto-register
+// This runs when the module is imported
+const originalDefine = Object.defineProperty;

package/src/html.d.ts

@@ -0,0 +1,12 @@
+export class TemplateResult {
+  strings: TemplateStringsArray;
+  values: any[];
+
+  constructor(strings: TemplateStringsArray, values: any[]);
+
+  getTemplate(): any;
+}
+
+export function html(strings: TemplateStringsArray, ...values: any[]): TemplateResult;
+
+export function isTemplateResult(value: any): value is TemplateResult;

package/src/html.js

@@ -0,0 +1,148 @@
+/**
+ * Template literal parser for creating efficient DOM templates
+ */
+
+// Unique marker for template parts
+const MARKER = `bedrock-${Math.random().toString(36).slice(2)}`;
+const COMMENT_MARKER = `<!--${MARKER}-`;
+const ATTR_MARKER = `${MARKER}-`;
+
+// Template cache for reusing parsed templates
+const templateCache = new WeakMap();
+
+/**
+ * Represents a parsed template with static parts and dynamic values
+ */
+export class TemplateResult {
+  constructor(strings, values) {
+    this.strings = strings;
+    this.values = values;
+    this._type = 'template-result';
+  }
+
+  /**
+   * Get cached template or create new one
+   */
+  getTemplate() {
+    let template = templateCache.get(this.strings);
+    if (!template) {
+      template = parseTemplate(this.strings);
+      templateCache.set(this.strings, template);
+    }
+    return template;
+  }
+}
+
+/**
+ * Tagged template literal function for creating templates
+ * @param {TemplateStringsArray} strings - Static parts
+ * @param {...any} values - Dynamic values
+ * @returns {TemplateResult}
+ */
+export function html(strings, ...values) {
+  return new TemplateResult(strings, values);
+}
+
+/**
+ * Check if we're inside an HTML tag (for attribute vs node detection)
+ */
+function isInsideTag(str) {
+  let inTag = false;
+  for (let i = str.length - 1; i >= 0; i--) {
+    if (str[i] === '>') return false;
+    if (str[i] === '<') return true;
+  }
+  return false;
+}
+
+/**
+ * Parse template strings into a reusable template structure
+ */
+function parseTemplate(strings) {
+  const parts = [];
+  let htmlStr = '';
+
+  for (let i = 0; i < strings.length; i++) {
+    htmlStr += strings[i];
+
+    if (i < strings.length - 1) {
+      // Check if this expression is inside a tag (attribute) or outside (node)
+      if (isInsideTag(htmlStr)) {
+        // Attribute position - use attribute marker
+        htmlStr += `${ATTR_MARKER}${i}`;
+        parts.push({ type: 'attr-pending', index: i });
+      } else {
+        // Node position - use comment marker
+        htmlStr += `${COMMENT_MARKER}${i}-->`;
+        parts.push({ type: 'node', index: i });
+      }
+    }
+  }
+
+  // Parse into template element
+  const template = document.createElement('template');
+  template.innerHTML = htmlStr;
+
+  // Walk the template to resolve part locations
+  const resolvedParts = new Array(strings.length - 1).fill(null);
+  walkTemplate(template.content, resolvedParts, []);
+
+  return { element: template, parts: resolvedParts };
+}
+
+/**
+ * Walk the template DOM to find marker positions
+ */
+function walkTemplate(node, parts, path) {
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    // Check attributes for markers
+    const attrsToRemove = [];
+    for (const attr of node.attributes) {
+      if (attr.value.includes(ATTR_MARKER) || attr.name.includes(ATTR_MARKER)) {
+        const match = (attr.value + attr.name).match(new RegExp(`${ATTR_MARKER}(\\d+)`));
+        if (match) {
+          const index = parseInt(match[1], 10);
+          const name = attr.name.replace(new RegExp(`${ATTR_MARKER}\\d+`), '');
+          const isEvent = name.startsWith('on-');
+          const isProperty = name.startsWith('.');
+
+          parts[index] = {
+            type: isEvent ? 'event' : isProperty ? 'property' : 'attribute',
+            path: [...path],
+            name: isEvent ? name.slice(3) : isProperty ? name.slice(1) : name,
+          };
+          attrsToRemove.push(attr.name);
+        }
+      }
+    }
+    // Remove marker attributes
+    for (const name of attrsToRemove) {
+      node.removeAttribute(name);
+    }
+  }
+
+  // Check comment nodes for markers
+  if (node.nodeType === Node.COMMENT_NODE) {
+    const text = node.textContent;
+    if (text.startsWith(MARKER + '-')) {
+      const index = parseInt(text.slice(MARKER.length + 1), 10);
+      parts[index] = {
+        type: 'node',
+        path: [...path]
+      };
+    }
+  }
+
+  // Recurse into children
+  const children = Array.from(node.childNodes);
+  for (let i = 0; i < children.length; i++) {
+    walkTemplate(children[i], parts, [...path, i]);
+  }
+}
+
+/**
+ * Check if a value is a TemplateResult
+ */
+export function isTemplateResult(value) {
+  return value && value._type === 'template-result';
+}

package/src/index.d.ts

@@ -0,0 +1,12 @@
+export { html, TemplateResult, isTemplateResult } from './html.js';
+export { render, keyed } from './render.js';
+export { Component, defineComponent, autoRegister } from './component.js';
+export { reactive, watch, computed, signal, batch } from './reactive.js';
+export {
+  Router,
+  RouterOutlet,
+  RouterLink,
+  createRouter,
+  navigate,
+  getParams
+} from './router.js';

package/src/index.js

@@ -0,0 +1,50 @@
+/**
+ * BedrockJS - A lightweight web framework built on web components
+ *
+ * @example
+ * import { html, Component, reactive, Router } from 'bedrockjs';
+ *
+ * class MyCounter extends Component {
+ *   static tag = 'my-counter';
+ *   static properties = {
+ *     count: { type: Number, default: 0 }
+ *   };
+ *
+ *   render() {
+ *     return html`
+ *       <button on-click=${() => this.count++}>
+ *         Count: ${this.count}
+ *       </button>
+ *     `;
+ *   }
+ * }
+ * MyCounter.register();
+ */
+
+// Template system
+export { html, TemplateResult, isTemplateResult } from './html.js';
+
+// Rendering
+export { render, keyed } from './render.js';
+
+// Component system
+export { Component, defineComponent, autoRegister } from './component.js';
+
+// Reactive state
+export {
+  reactive,
+  watch,
+  computed,
+  signal,
+  batch
+} from './reactive.js';
+
+// Router
+export {
+  Router,
+  RouterOutlet,
+  RouterLink,
+  createRouter,
+  navigate,
+  getParams
+} from './router.js';

package/src/reactive.d.ts

@@ -0,0 +1,20 @@
+export function reactive<T extends object>(target: T): T;
+
+export interface WatchOptions {
+  immediate?: boolean;
+}
+
+export function watch(fn: () => void, options?: WatchOptions): () => void;
+
+export interface Computed<T> {
+  readonly value: T;
+  stop(): void;
+}
+
+export function computed<T>(getter: () => T): Computed<T>;
+
+export type Signal<T> = [() => T, (value: T) => void];
+
+export function signal<T>(initialValue: T): Signal<T>;
+
+export function batch(fn: () => void): void;