@stacksjs/stx 0.2.97 → 0.2.99

package/dist/component-library.js

@@ -197,6 +197,17 @@ const serialize = (value, type) => {
   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 || []; }
@@ -206,11 +217,13 @@ export class StxElement extends HTMLElementBase {
     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] = property.default ?? ({ string: '', number: 0, boolean: false, object: {}, array: [] })[property.type];
+      this._values[name] = defaultFor(property);
     }
     if (definition.shadowMode && this.attachShadow && !this.shadowRoot) {
       this._closedRoot = this.attachShadow({ mode: definition.shadowMode });
@@ -223,19 +236,28 @@ export class StxElement extends HTMLElementBase {
   connectedCallback() {
     if (this._connected) return;
     this._connected = true;
+    this._initializing = true;
     const definition = this.constructor.definition;
-    for (const name of Object.keys(definition.properties || {})) this._upgradeProperty(name);
     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, this._values[name]);
+      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());
-    if (!(definition.progressive && hasMarkup)) this._render();
+    const firstConnection = !this._hasConnected;
+    if (!(firstConnection && definition.progressive && hasMarkup)) this._render();
     else this._upgradeDeclarativeEvents();
     this._bindEvents();
-    this.setAttribute?.('hydrated', '');
-    this.dispatchEvent?.(new CustomEvent('stx:hydrated', { bubbles: true, composed: true }));
+    if (firstConnection) {
+      this._hasConnected = true;
+      this.setAttribute?.('hydrated', '');
+      this.dispatchEvent?.(new CustomEvent('stx:hydrated', { bubbles: true, composed: true }));
+    }
   }
 
   disconnectedCallback() {
@@ -250,7 +272,7 @@ export class StxElement extends HTMLElementBase {
     const name = definition.attributeToProperty?.[attribute];
     if (!name) return;
     const property = definition.properties[name];
-    const value = deserialize(newValue, property.type, property.default);
+    const value = deserialize(newValue, property.type, defaultFor(property));
     if (!Object.is(this._values[name], value)) {
       this._values[name] = value;
       this.requestUpdate();
@@ -258,7 +280,7 @@ export class StxElement extends HTMLElementBase {
   }
 
   requestUpdate() {
-    if (!this._connected || this._updatePending) return this.updateComplete;
+    if (!this._connected || this._initializing || this._updatePending) return this.updateComplete;
     this._updatePending = true;
     this._updateComplete = new Promise((resolve) => {
       queueMicrotask(() => {

package/dist/dev-server/crosswind.d.ts

@@ -15,8 +15,8 @@ export declare function resetCrosswindCache(): void;
  * `stx.config.ts` and other stacks configs — a single source of truth for
  * config loading across the stack.
  *
- * Pre-check: we only hand off to bunfig once we've confirmed a
- * `crosswind.config.*` file actually exists in the target directory. When
+ * Pre-check: bunfig's lightweight discovery entry point confirms a matching
+ * project-local config exists before we load its full configuration pipeline. When
  * stx is run from a parent repo root (e.g. running an example from the
  * monorepo root, or a page rendered before the app dir is known) bunfig's
  * built-in search would span 250+ paths up the tree and, on miss, log a
@@ -25,9 +25,9 @@ export declare function resetCrosswindCache(): void;
  */
 /**
  * Load the user's crosswind config via bunfig — our shared config loader.
- * bunfig's name-based search already covers `config/crosswind.ts`,
- * `.config/crosswind.ts`, and root-level `crosswind.config.{ts,js,mjs,cjs}`,
- * so we don't need to maintain a parallel list of paths here. Returns `null`
+ * `hasLocalConfig` uses the same filename, extension, alias, custom-directory,
+ * and resolution-priority rules as bunfig's loader, so this integration never
+ * maintains a parallel list of paths. Returns `null`
  * when no config file is present, so callers can fall through to defaults
  * without surfacing a "not found" warning to the user.
  */

package/dist/dev-server/crosswind.js

@@ -1,5 +1,5 @@
-import fs from "node:fs";
 import path from "node:path";
+import { hasLocalConfig } from "bunfig/discovery";
 import { colors } from "./terminal-colors.js";
 let crosswindModule = null, crosswindLoadAttempted = !1, cachedConfig = null, cachedCSS = "", isBuilding = !1;
 const MAX_CACHE = 256, cssByClassSet = new Map;
@@ -126,8 +126,7 @@ export function resetCrosswindCache() {
 }
 export async function loadCrosswindConfig(cwd) {
   try {
-    const configDirectories = ["", "config", ".config"], configNames = ["crosswind.config", "crosswind", ".crosswind.config", ".crosswind"], configExtensions = [".ts", ".js", ".mjs", ".cjs", ".json"];
-    if (!configDirectories.flatMap((directory) => configNames.flatMap((name) => configExtensions.map((extension) => path.join(directory, `${name}${extension}`)))).some((candidate) => fs.existsSync(path.join(cwd, candidate))))
+    if (!hasLocalConfig({ name: "crosswind", cwd }))
       return null;
     const { loadConfigWithResult } = await import("bunfig"), result = await loadConfigWithResult({
       name: "crosswind",