@stacksjs/hello-world-stx 0.75.329 → 0.75.334

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export * from './stacks-context-menu.js'
+export * from './stacks-context-menu-item.js'
+export * from './stacks-desktop-icon.js'
+export * from './stacks-feature-button.js'
+export * from './stacks-input-group.js'
+export * from './stacks-login-form.js'
+export * from './stacks-login-screen.js'
+export * from './stacks-notification-popup.js'
+export * from './stacks-package-item.js'
+export * from './stacks-start-menu.js'
+export * from './stacks-start-menu-item.js'
+export * from './stacks-taskbar.js'
+export * from './stacks-window.js'

package/dist/index.js

@@ -0,0 +1,13 @@
+export { ContextMenu, default as ContextMenuElement } from './stacks-context-menu.js';
+export { ContextMenuItem, default as ContextMenuItemElement } from './stacks-context-menu-item.js';
+export { DesktopIcon, default as DesktopIconElement } from './stacks-desktop-icon.js';
+export { FeatureButton, default as FeatureButtonElement } from './stacks-feature-button.js';
+export { InputGroup, default as InputGroupElement } from './stacks-input-group.js';
+export { LoginForm, default as LoginFormElement } from './stacks-login-form.js';
+export { LoginScreen, default as LoginScreenElement } from './stacks-login-screen.js';
+export { NotificationPopup, default as NotificationPopupElement } from './stacks-notification-popup.js';
+export { PackageItem, default as PackageItemElement } from './stacks-package-item.js';
+export { StartMenu, default as StartMenuElement } from './stacks-start-menu.js';
+export { StartMenuItem, default as StartMenuItemElement } from './stacks-start-menu-item.js';
+export { Taskbar, default as TaskbarElement } from './stacks-taskbar.js';
+export { Window, default as WindowElement } from './stacks-window.js';

package/dist/runtime.js

@@ -0,0 +1,309 @@
+const HTMLElementBase = globalThis.HTMLElement || class {};
+
+const escapeHTML = (value) => String(value ?? '')
+  .replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
+  .replaceAll('"', '&quot;').replaceAll("'", '&#039;');
+
+const valueAt = (host, path) => {
+  const parts = path.trim().split('.');
+  const first = parts.shift();
+  // Render bindings read declared props, including attributes whose names
+  // also belong to the native DOM API. The public element keeps that API.
+  let value = host._values && Object.prototype.hasOwnProperty.call(host._values, first)
+    ? host._values[first]
+    : host[first];
+  for (const part of parts) value = value?.[part];
+  return typeof value === 'function' ? value.call(host) : value;
+};
+
+const deserialize = (value, type, fallback) => {
+  if (value === null) return type === 'boolean' ? false : fallback;
+  if (type === 'boolean') return value !== 'false' && value !== '0';
+  if (type === 'number') return Number(value);
+  if (type === 'object' || type === 'array') {
+    try { return JSON.parse(value); }
+    catch { return fallback; }
+  }
+  return value;
+};
+
+const serialize = (value, type) => {
+  if (value == null || value === false) return null;
+  if (type === 'boolean') return '';
+  if (type === 'object' || type === 'array') return JSON.stringify(value);
+  return String(value);
+};
+
+const cloneDefault = (value, type) => {
+  if (value == null || (type !== 'object' && type !== 'array')) return value;
+  if (typeof structuredClone === 'function') return structuredClone(value);
+  return JSON.parse(JSON.stringify(value));
+};
+
+const defaultFor = property => cloneDefault(
+  property.default ?? ({ string: '', number: 0, boolean: false, object: {}, array: [] })[property.type],
+  property.type,
+);
+
+export class StxElement extends HTMLElementBase {
+  static definition = {};
+  static get observedAttributes() { return this.definition.observedAttributes || []; }
+
+  constructor() {
+    super();
+    this._values = Object.create(null);
+    this._reflecting = false;
+    this._connected = false;
+    this._hasConnected = false;
+    this._initializing = false;
+    this._updatePending = false;
+    this._listeners = new Map();
+    const definition = this.constructor.definition;
+    for (const [name, property] of Object.entries(definition.properties || {})) {
+      this._values[name] = defaultFor(property);
+    }
+    if (definition.shadowMode && this.attachShadow && !this.shadowRoot) {
+      this._closedRoot = this.attachShadow({ mode: definition.shadowMode });
+    }
+  }
+
+  get updateComplete() { return this._updateComplete || Promise.resolve(); }
+  get renderRoot() { return this._closedRoot || this.shadowRoot || this; }
+
+  connectedCallback() {
+    if (this._connected) return;
+    this._connected = true;
+    this._initializing = true;
+    const definition = this.constructor.definition;
+    for (const [name, property] of Object.entries(definition.properties || {})) {
+      const attribute = property.attribute === false ? null : (property.attribute || name.replace(/[A-Z]/g, letter => '-' + letter.toLowerCase()));
+      if (attribute && this.hasAttribute?.(attribute)) this._values[name] = deserialize(this.getAttribute(attribute), property.type, defaultFor(property));
+    }
+    // Properties assigned before customElements.define() become own properties.
+    // Upgrade them after attributes so imperative state wins, matching the
+    // platform's property-first custom-element initialization convention.
+    for (const name of Object.keys(definition.properties || {})) this._upgradeProperty(name);
+    this._initializing = false;
+    const root = this.renderRoot;
+    const hasMarkup = [...(root.childNodes || [])].some(node => node.nodeType !== 3 || node.textContent.trim());
+    const firstConnection = !this._hasConnected;
+    if (!(firstConnection && definition.progressive && hasMarkup)) this._render();
+    else this._upgradeDeclarativeEvents();
+    this._bindEvents();
+    if (firstConnection) {
+      this._hasConnected = true;
+      this.setAttribute?.('hydrated', '');
+      this.dispatchEvent?.(new CustomEvent('stx:hydrated', { bubbles: true, composed: true }));
+    }
+    // Called last, so a component that acquires something sees its own rendered
+    // markup and its events already bound. Reported rather than rethrown: a
+    // component that fails to set up must not take the element down with it.
+    try { this.onConnect?.(); }
+    catch (error) { console.error('[stx] onConnect failed', error); }
+  }
+
+  disconnectedCallback() {
+    this._connected = false;
+    // Called before the framework releases anything, so the element is still
+    // intact for a component that needs to read it on the way out, and inside
+    // try/finally so a throwing hook cannot leak the framework's own listeners.
+    try { this.onDisconnect?.(); }
+    catch (error) { console.error('[stx] onDisconnect failed', error); }
+    finally {
+      for (const [event, listener] of this._listeners) this.renderRoot.removeEventListener(event, listener);
+      this._listeners.clear();
+    }
+  }
+
+  attributeChangedCallback(attribute, oldValue, newValue) {
+    if (oldValue === newValue || this._reflecting) return;
+    const definition = this.constructor.definition;
+    const name = definition.attributeToProperty?.[attribute];
+    if (!name) return;
+    const property = definition.properties[name];
+    const value = deserialize(newValue, property.type, defaultFor(property));
+    if (!Object.is(this._values[name], value)) {
+      this._values[name] = value;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * The props a compiled render reads.
+   *
+   * Its own method rather than _values directly, so a component that sets a
+   * property before upgrade still sees it, and so the generated code has one
+   * name to depend on rather than a private field's shape.
+   */
+  _props() {
+    return this._values;
+  }
+
+  requestUpdate() {
+    if (!this._connected || this._initializing || this._updatePending) return this.updateComplete;
+    this._updatePending = true;
+    this._updateComplete = new Promise((resolve) => {
+      queueMicrotask(() => {
+        this._updatePending = false;
+        if (this._connected) this._render();
+        resolve();
+      });
+    });
+    return this._updateComplete;
+  }
+
+  emit(name, detail, options = {}) {
+    return this.dispatchEvent(new CustomEvent(name, {
+      detail, bubbles: true, composed: true, ...options,
+    }));
+  }
+
+  _upgradeProperty(name) {
+    if (!Object.prototype.hasOwnProperty.call(this, name)) return;
+    const value = this[name];
+    delete this[name];
+    this[name] = value;
+  }
+
+  _upgradeDeclarativeEvents() {
+    for (const element of this.renderRoot.querySelectorAll?.('*') || []) {
+      const names = element.getAttributeNames?.() || [...(element.attributes || [])].filter(Boolean).map(attribute => attribute.name);
+      for (const attributeName of names) {
+        if (!attributeName?.startsWith('@')) continue;
+        const [event, ...modifiers] = attributeName.slice(1).split('.');
+        element.setAttribute('data-stx-on-' + event, element.getAttribute(attributeName));
+        if (modifiers.length) element.setAttribute('data-stx-mod-' + event, modifiers.join(' '));
+        element.removeAttribute(attributeName);
+      }
+    }
+  }
+
+  _bindEvents() {
+    for (const event of this.constructor.definition.eventTypes || []) {
+      if (this._listeners.has(event)) continue;
+      const listener = ($event) => {
+        const selector = '[data-stx-on-' + event + ']';
+        const target = $event.target?.closest?.(selector);
+        if (!target || !this.renderRoot.contains(target)) return;
+        const modifiers = (target.getAttribute('data-stx-mod-' + event) || '').split(' ');
+        if (modifiers.includes('prevent')) $event.preventDefault();
+        if (modifiers.includes('stop')) $event.stopPropagation();
+        const method = target.getAttribute('data-stx-on-' + event);
+        if (typeof this[method] === 'function') this[method]($event);
+      };
+      this.renderRoot.addEventListener(event, listener);
+      this._listeners.set(event, listener);
+    }
+  }
+
+  _render() {
+    const definition = this.constructor.definition;
+    const root = this.renderRoot;
+    const active = root.activeElement || (root.contains?.(globalThis.document?.activeElement) ? globalThis.document.activeElement : null);
+    const focusKey = active && (active.getAttribute?.('data-key') || active.id || active.getAttribute?.('name'));
+    const selection = active && 'selectionStart' in active ? [active.selectionStart, active.selectionEnd] : null;
+    // A compiled component renders itself: the control flow and the derived
+    // values were turned into JavaScript at build time, so there is nothing to
+    // interpret here and nothing that needs an eval the page's CSP forbids.
+    // The string template remains for components that carry no logic.
+    let html = typeof this.render === 'function'
+      ? this.render(RENDER_HELPERS)
+      : definition.template
+        .replace(new RegExp("\\{!!\\s*([\\w$.]+)\\s*!!\\}", 'g'), (_match, expression) => String(valueAt(this, expression) ?? ''))
+        .replace(new RegExp("\\{\\{\\s*([\\w$.]+)\\s*\\}\\}", 'g'), (_match, expression) => escapeHTML(valueAt(this, expression)));
+    if (definition.shadowMode && definition.styles) html = '<style>' + definition.styles + '</style>' + html;
+    root.innerHTML = html;
+    this._applyBindings();
+    this._bindEvents();
+    if (focusKey) {
+      const escaped = globalThis.CSS?.escape ? globalThis.CSS.escape(focusKey) : focusKey.replace(/["\\]/g, '\$&');
+      const next = root.querySelector('[data-key="' + escaped + '"],#' + escaped + ',[name="' + escaped + '"]');
+      next?.focus?.();
+      if (selection && next?.setSelectionRange) next.setSelectionRange(selection[0], selection[1]);
+    }
+    this.dispatchEvent?.(new CustomEvent('stx:updated', { bubbles: false }));
+  }
+
+  _applyBindings() {
+    for (const binding of this.constructor.definition.bindings || []) {
+      const element = this.renderRoot.querySelector('[data-stx-bind-' + binding.id + ']');
+      if (!element) continue;
+      const value = valueAt(this, binding.expression);
+      if (binding.name === 'class') element.className = value || '';
+      else if (binding.name === 'style' && typeof value === 'object') {
+        Object.assign(element.style, value);
+      }
+      else if (typeof value === 'boolean') {
+        element.toggleAttribute(binding.name, value);
+        if (binding.name in element) element[binding.name] = value;
+      }
+      else if (value == null || value === false) element.removeAttribute(binding.name);
+      else element.setAttribute(binding.name, String(value));
+    }
+  }
+}
+
+/**
+ * What a compiled render is handed.
+ *
+ * Passed in rather than closed over so the generated code names no globals, and
+ * a component module stays readable on its own: __escape is visibly a
+ * parameter, not something the bundler happened to leave in scope.
+ */
+const RENDER_HELPERS = {
+  escape: escapeHTML,
+  // The raw form is the author declaring the value is markup. Null becomes an
+  // empty string rather than the word "null", which is the only sensible
+  // reading of a missing fragment.
+  raw: (value) => String(value ?? ''),
+  // A loop over something absent runs zero times. Throwing here would fail a
+  // whole page over one empty list, which is never what the author meant.
+  values: (value) => value == null ? [] : (value[Symbol.iterator] ? value : Object.values(value)),
+  entries: (value) => value == null ? [] : (Array.isArray(value) ? value.entries() : Object.entries(value)),
+};
+
+export function defineComponent(Component, definition) {
+  const properties = definition.properties || {};
+  const attributeToProperty = {};
+  const observedAttributes = [];
+  for (const [name, property] of Object.entries(properties)) {
+    const attribute = property.attribute === false ? null : (property.attribute || name.replace(/[A-Z]/g, letter => '-' + letter.toLowerCase()));
+    if (attribute) {
+      attributeToProperty[attribute] = name;
+      observedAttributes.push(attribute);
+    }
+    // A style prop is an attribute value, not a replacement for the browser's
+    // CSSStyleDeclaration. Native event handler accessors must survive too.
+    if (name in HTMLElementBase.prototype) {
+      if (!attribute) throw new TypeError('STX prop "' + name + '" overlaps the native DOM API and needs an attribute binding');
+      continue;
+    }
+    Object.defineProperty(Component.prototype, name, {
+      configurable: true,
+      enumerable: true,
+      get() { return this._values[name]; },
+      set(value) {
+        const oldValue = this._values[name];
+        if (Object.is(oldValue, value)) return;
+        this._values[name] = value;
+        if (property.reflect && attribute && !this._reflecting) {
+          const serialized = serialize(value, property.type);
+          this._reflecting = true;
+          if (serialized === null) this.removeAttribute(attribute);
+          else this.setAttribute(attribute, serialized);
+          this._reflecting = false;
+        }
+        this.requestUpdate();
+        this.dispatchEvent?.(new CustomEvent(name + '-changed', {
+          detail: { value, oldValue }, bubbles: true, composed: true,
+        }));
+      },
+    });
+  }
+  Component.definition = { ...definition, attributeToProperty, observedAttributes };
+  const registry = globalThis.customElements || globalThis.window?.customElements;
+  if (registry && !registry.get(definition.tag)) {
+    registry.define(definition.tag, Component);
+  }
+  return Component;
+}

package/dist/ssr.d.ts

@@ -0,0 +1,27 @@
+export declare const renderContextMenu: (props?: ContextMenuProps, slots?: Record<string, string>) => string
+export declare const renderContextMenuItem: (props?: ContextMenuItemProps, slots?: Record<string, string>) => string
+export declare const renderDesktopIcon: (props?: DesktopIconProps, slots?: Record<string, string>) => string
+export declare const renderFeatureButton: (props?: FeatureButtonProps, slots?: Record<string, string>) => string
+export declare const renderInputGroup: (props?: InputGroupProps, slots?: Record<string, string>) => string
+export declare const renderLoginForm: (props?: LoginFormProps, slots?: Record<string, string>) => string
+export declare const renderLoginScreen: (props?: LoginScreenProps, slots?: Record<string, string>) => string
+export declare const renderNotificationPopup: (props?: NotificationPopupProps, slots?: Record<string, string>) => string
+export declare const renderPackageItem: (props?: PackageItemProps, slots?: Record<string, string>) => string
+export declare const renderStartMenu: (props?: StartMenuProps, slots?: Record<string, string>) => string
+export declare const renderStartMenuItem: (props?: StartMenuItemProps, slots?: Record<string, string>) => string
+export declare const renderTaskbar: (props?: TaskbarProps, slots?: Record<string, string>) => string
+export declare const renderWindow: (props?: WindowProps, slots?: Record<string, string>) => string
+export declare function renderComponent(tag: string, props?: Record<string, unknown>, slots?: Record<string, string>): string
+import type { ContextMenuProps } from './stacks-context-menu.js'
+import type { ContextMenuItemProps } from './stacks-context-menu-item.js'
+import type { DesktopIconProps } from './stacks-desktop-icon.js'
+import type { FeatureButtonProps } from './stacks-feature-button.js'
+import type { InputGroupProps } from './stacks-input-group.js'
+import type { LoginFormProps } from './stacks-login-form.js'
+import type { LoginScreenProps } from './stacks-login-screen.js'
+import type { NotificationPopupProps } from './stacks-notification-popup.js'
+import type { PackageItemProps } from './stacks-package-item.js'
+import type { StartMenuProps } from './stacks-start-menu.js'
+import type { StartMenuItemProps } from './stacks-start-menu-item.js'
+import type { TaskbarProps } from './stacks-taskbar.js'
+import type { WindowProps } from './stacks-window.js'