@stacksjs/stx 0.2.115 → 0.2.116

package/dist/runtime-globals.d.ts

@@ -5,8 +5,10 @@
  * @param declaration `var` for scripts that reassign a binding (the `@include`
  * wrapper rebinds `onDestroy` to tee into its teardown channel — an assignment,
  * which `var` permits), `const` otherwise.
- * @param exclude names the call site declares itself; see
- * {@link COMPONENT_SCOPE_LOCAL_GLOBALS}.
+ * @param exclude names the generated wrapper or user script declares itself.
+ * A local declaration is intentionally allowed to shadow a runtime convenience
+ * global, just as an explicit import would. Omitting it from this destructure
+ * prevents duplicate-binding syntax errors.
  */
 export declare function buildRuntimeGlobalsDestructure(declaration?: 'const' | 'var', exclude?: readonly string[]): string;
 /**

package/dist/signal-processing.js

@@ -696,10 +696,10 @@ ${resolved}`);
 
 `);
   mergedContent = dedupeTopLevelDeclarations(mergedContent);
-  const mergedExports = extractExports(mergedContent), bridge = generateServerDataBridge(mergedContent, serverData), setupCode = `
+  const mergedExports = extractExports(mergedContent), mergedExportNames = mergedExports.split(",").map((name) => name.trim()).filter(Boolean), bridge = generateServerDataBridge(mergedContent, serverData), setupCode = `
 <script data-stx-scoped>
 function ${setupFnName}() {
-  ${buildRuntimeGlobalsDestructure("const")}
+  ${buildRuntimeGlobalsDestructure("const", mergedExportNames)}
 ${bridge}${mergedContent}
   return { ${mergedExports} };
 }

package/dist/signals.js

@@ -1969,6 +1969,7 @@ catch (e2) {
     Array.from(el.attributes).forEach(attr => {
       const name = attr.name;
       const value = attr.value;
+      if (!name) return;
 
       if (el.hasAttribute && (el.hasAttribute('x-class') || el.hasAttribute('@click'))) {
         console.log('[stx] attr iter:', el.tagName, 'name:', name);
@@ -2001,9 +2002,34 @@ catch (e2) {
               catch (e) { controlValue = String(v); }
             }
             controlValue = v === false || v === null || v === undefined ? '' : String(controlValue);
-            el.value = controlValue;
-            if (controlValue === '' && el.tagName !== 'OPTION') el.removeAttribute(attrName);
-            else el.setAttribute(attrName, controlValue);
+            el.__stx_bound_value = controlValue;
+            var applyControlValue = function() {
+              var desiredValue = el.__stx_bound_value == null ? '' : String(el.__stx_bound_value);
+              el.value = desiredValue;
+              if (desiredValue === '' && el.tagName !== 'OPTION') el.removeAttribute(attrName);
+              else if (el.getAttribute(attrName) !== desiredValue) el.setAttribute(attrName, desiredValue);
+            };
+            applyControlValue();
+
+            // A select's value binding is processed before its child
+            // directives. When a nested :for creates the matching options
+            // afterward, the browser otherwise leaves the first option
+            // selected. Keep the desired value and reapply it whenever the
+            // option tree changes, including later reactive list updates.
+            if (el.tagName === 'SELECT' && !el.__stx_value_observer && typeof window.MutationObserver !== 'undefined') {
+              el.__stx_value_observer = new window.MutationObserver(applyControlValue);
+              el.__stx_value_observer.observe(el, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['value'],
+              });
+              el.__stx_destroy = el.__stx_destroy || [];
+              el.__stx_destroy.push(function() {
+                if (el.__stx_value_observer) el.__stx_value_observer.disconnect();
+                el.__stx_value_observer = null;
+              });
+            }
             return;
           }
           if (v === false || v === null || v === undefined) {
@@ -3238,7 +3264,11 @@ catch (e2) {
       const content = el.content;
       currentNodes = Array.from(content.childNodes).map(n => n.cloneNode(true));
       // Insert cloned content initially
-      currentNodes.forEach(node => parent.insertBefore(node, placeholder.nextSibling));
+      // Capture the anchor once. Re-reading placeholder.nextSibling after
+      // every insertion points at the node just inserted and reverses a
+      // multi-root template branch.
+      const initialAnchor = placeholder.nextSibling;
+      currentNodes.forEach(node => parent.insertBefore(node, initialAnchor));
       el.remove(); // Remove the template element itself
     }
 
@@ -3319,7 +3349,8 @@ catch (e2) {
         if (value && !isInserted) {
           // Re-insert cloned content
           currentNodes = Array.from(el.content.childNodes).map(n => n.cloneNode(true));
-          currentNodes.forEach(node => parent.insertBefore(node, placeholder.nextSibling));
+          const insertionAnchor = placeholder.nextSibling;
+          currentNodes.forEach(node => parent.insertBefore(node, insertionAnchor));
           // Process the new nodes \u2014 use LIVE componentScope so all functions are available
           const childScope = { ...componentScope, ...(capturedElementScope || {}) };
           currentNodes.forEach(node => {
@@ -4462,7 +4493,8 @@ catch (e) {}
       var scopeId = el.getAttribute('data-stx-scope');
       var scopeVars = window.stx._scopes && window.stx._scopes[scopeId];
       if (!scopeVars) return;
-      el.__stx_parent_scope = { ...componentScope };
+      el.__stx_parent_scope = el.__stx_parent_scope
+        || resolveComponentCallerScope(el, componentScope);
       bindParentComponentProps(el, el.__stx_parent_scope);
       Object.assign(componentScope, scopeVars);
       el.__stx_disposers = trackEffects(function() { processElement(el, componentScope); });
@@ -5324,7 +5356,8 @@ else {
       // Forwarded props and events belong to the caller. Capture its scope
       // before this component's locals are merged, so identical child names
       // cannot shadow expressions such as :total-items="totalItems".
-      el.__stx_parent_scope = resolveComponentCallerScope(el, pageScopeSnapshot);
+      el.__stx_parent_scope = el.__stx_parent_scope
+        || resolveComponentCallerScope(el, pageScopeSnapshot);
       bindParentComponentProps(el, el.__stx_parent_scope);
 
       // Merge component scope vars into componentScope (don't restore - keep for head elements)
@@ -5705,7 +5738,8 @@ catch (e) { console.warn('[stx] destroy callback error:', e); }
         return;
       }
       if (!scopeVars) return;
-      el.__stx_parent_scope = resolveComponentCallerScope(el, spaPageScopeSnapshot);
+      el.__stx_parent_scope = el.__stx_parent_scope
+        || resolveComponentCallerScope(el, spaPageScopeSnapshot);
       bindParentComponentProps(el, el.__stx_parent_scope);
       Object.assign(componentScope, scopeVars);
       if (el.__stx_disposers) return;