@noego/forge 0.1.18 → 0.1.19

package/src/components/RecursiveRender.svelte

@@ -20,9 +20,37 @@
         page?: any | null;
     }>();
 
+    // root is a writable store, so we need to subscribe to it
+    let rootValue = $state<any>(null);
+
+    // Subscribe to root store changes
+    $effect(() => {
+        if (root) {
+            const unsubscribe = root.subscribe((value: any) => {
+                rootValue = value;
+            });
+            return unsubscribe;
+        }
+    });
+
     // For recursive calls, root will be passed down
     // For top-level, root comes from hydrate
-    let active = $derived(root?.active ?? { layouts: [], view: null, data: { layout: [], view: {} }, params: {}, urlParams: {}, query: {} });
+    // page is also a store, so we need to get its value
+    let pageValue = $state<any>(null);
+    $effect(() => {
+        if (rootValue?.page) {
+            const unsubscribe = rootValue.page.subscribe((value: any) => {
+                pageValue = value;
+            });
+            return unsubscribe;
+        }
+    });
+
+    let active = $derived(rootValue?.active ?? { layouts: [], view: null, viewPath: null, layoutPaths: [], data: { layout: [], view: {} }, params: {}, urlParams: {}, query: {} });
+
+    // Get debug paths from root.active for error reporting
+    let viewPath = $derived(active.viewPath);
+    let layoutPaths = $derived(active.layoutPaths ?? []);
 
     // Use props if provided (recursive call), otherwise use root.active (top-level)
     let layouts = $derived(propsLayouts ?? active.layouts ?? []);
@@ -31,7 +59,7 @@
     let params = $derived(propsParams ?? active.params ?? {});
     let urlParams = $derived(propsUrlParams ?? active.urlParams ?? {});
     let query = $derived(propsQuery ?? active.query ?? {});
-    let page = $derived(propsPage ?? root?.page);
+    let page = $derived(propsPage ?? pageValue);
 
     // Layout-specific derivations
     let topLayout = $derived(layouts[0])
@@ -46,9 +74,14 @@
 
     // Debug logging
     $effect(() => {
-        console.log('[RecursiveRender] Data received:', { data, view_data, viewName: view?.name });
+        console.log('[RecursiveRender] Data received:', { data, view_data, viewName: view?.name, viewPath });
     })
 
+    // Compute a stable key for the {#key} block that changes when navigation occurs
+    // This forces Svelte to destroy the old component tree before rendering the new one,
+    // preventing the race condition where old components receive new props
+    let navigationKey = $derived(viewPath || view?.name || 'default');
+
     // Error state managed outside boundary for navigation reset capability
     let errorState = $state<{ error: any; context: any } | null>(null);
     let resetFn = $state<(() => void) | null>(null);
@@ -75,7 +108,9 @@
         const snapshotAllData = safeClone(data);
 
         const context = {
-            viewName: view?.name,
+            viewName: viewPath || view?.name || 'Unknown',  // Prefer viewPath (actual file path) over HMR-wrapped name
+            viewPath: viewPath,  // Actual file path like "pages/workflows/new/main.svelte"
+            layoutPaths: layoutPaths,  // Layout file paths for debugging
             layoutCount: layouts.length,
             hasData: !!data,
             viewDataKeys: Object.keys(view_data || {}),
@@ -118,7 +153,10 @@
     <!-- Error UI rendered outside the boundary so navigation can clear it -->
     <div style="padding: 2rem; background: #fee; border: 2px solid #c00; border-radius: 8px; margin: 1rem;">
         <h2 style="color: #c00; margin-top: 0;">Error Rendering Page</h2>
-        <p><strong>Component:</strong> {errorState.context.viewName || 'Unknown'}</p>
+        <p><strong>View:</strong> <code style="background: #fff; padding: 2px 6px; border-radius: 3px;">{errorState.context.viewPath || errorState.context.viewName || 'Unknown'}</code></p>
+        {#if errorState.context.layoutPaths?.length > 0}
+        <p><strong>Layouts:</strong> {errorState.context.layoutPaths.map((p: string) => p).join(' → ')}</p>
+        {/if}
         <p><strong>Error:</strong> {errorState.error?.message || String(errorState.error)}</p>
         <p style="font-size: 0.85em; color: #666;"><strong>Captured at:</strong> {errorState.context.timestamp}</p>
 
@@ -176,31 +214,55 @@
         </div>
     </div>
 {:else}
-    <svelte:boundary onerror={handleError}>
-        {#if childlayouts.length > 0}
-            {#snippet nested_child()}
-                <svelte:self
-                    root={root}
-                    layouts={childlayouts}
-                    view={view}
-                    data={recursive_child_data}
+    <!-- {#key} forces Svelte to destroy the entire component tree and recreate it when
+         navigationKey changes. This prevents the race condition where old components
+         receive props intended for new components during navigation. The key is based
+         on viewPath which changes on each navigation to a different page. -->
+    {#key navigationKey}
+        <svelte:boundary onerror={handleError}>
+            {#if childlayouts.length > 0}
+                {#snippet nested_child()}
+                    <svelte:self
+                        root={root}
+                        layouts={childlayouts}
+                        view={view}
+                        data={recursive_child_data}
+                        params={params}
+                        urlParams={urlParams}
+                        query={query}
+                        page={page}
+                    />
+                {/snippet}
+                <svelte:component
+                    this={topLayout}
+                    {...(top_data || {})}
+                    params={params}
+                    urlParams={urlParams}
+                    query={query}
+                    page={page}
+                    children={nested_child}
+                />
+            {:else if topLayout}
+                {#snippet view_child()}
+                    <svelte:component
+                        this={view}
+                        {...(view_data || {})}
+                        params={params}
+                        urlParams={urlParams}
+                        query={query}
+                        page={page}
+                    />
+                {/snippet}
+                <svelte:component
+                    this={topLayout}
+                    {...(top_data || {})}
                     params={params}
                     urlParams={urlParams}
                     query={query}
                     page={page}
+                    children={view_child}
                 />
-            {/snippet}
-            <svelte:component
-                this={topLayout}
-                {...(top_data || {})}
-                params={params}
-                urlParams={urlParams}
-                query={query}
-                page={page}
-                children={nested_child}
-            />
-        {:else if topLayout}
-            {#snippet view_child()}
+            {:else}
                 <svelte:component
                     this={view}
                     {...(view_data || {})}
@@ -209,26 +271,8 @@
                     query={query}
                     page={page}
                 />
-            {/snippet}
-            <svelte:component
-                this={topLayout}
-                {...(top_data || {})}
-                params={params}
-                urlParams={urlParams}
-                query={query}
-                page={page}
-                children={view_child}
-            />
-        {:else}
-            <svelte:component
-                this={view}
-                {...(view_data || {})}
-                params={params}
-                urlParams={urlParams}
-                query={query}
-                page={page}
-            />
-        {/if}
-    </svelte:boundary>
+            {/if}
+        </svelte:boundary>
+    {/key}
 {/if}
 

package/dist/page.svelte-Dvj7306U.cjs

@@ -1,2 +0,0 @@
-"use strict";const T=require("svelte/internal/client");function A(o){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const s in o)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(o,s);Object.defineProperty(a,s,e.get?e:{enumerable:!0,get:()=>o[s]})}}return a.default=o,Object.freeze(a)}const M=A(T);function U(o){return o&&o.__esModule&&Object.prototype.hasOwnProperty.call(o,"default")?o.default:o}var k,b;function D(){if(b)return k;b=1,k=s,typeof window<"u"&&(window.pathToRegex=s);const o=/([$.+*?=!:[\]{}(|)/\\])/g;function a(e,t){return typeof e<"u"?e:t}function s(e,t){return this.init(e,t),this}return s.prototype.init=function(e="/",t={}){this.options={case:typeof t.case=="boolean"?t.case:!0,separators:typeof t.separators=="string"?t.separators:"/",fromStart:typeof t.fromStart=="boolean"?t.fromStart:!0,toEnd:typeof t.toEnd=="boolean"?t.toEnd:!0},this.options.separator="["+this.escape(this.options.separators)+"]",e instanceof RegExp?this.restructureRegExp(e):typeof e=="string"&&this.restructurePath(e)},s.prototype.restructureRegExp=function(e){e=a(e,/.*/),this.keys=[],this.path=void 0,this.regstr=""+e,this.regstr=this.regstr.substr(1,this.regstr.length-2),this.regexp=new RegExp(this.regstr,this.options.case?"":"i")},s.prototype.restructurePath=function(e){e=a(e,"/"),this.keys=[],this.path=e,this.regstr="";const t=this.options.separator,f="[^"+this.escape(this.options.separators)+"]";let i=0,n=0;if(e=e.replace(new RegExp("^"+t+"*(.*?)"+t+"*$"),"$1"),e.replace(/:([a-z]\w*)(\((.*?)\))?([\?\*\+])?/gi,(r,c,g,u,h,l,B)=>{n++;const w=h==="*"||h==="+",x=!!/^(\[[^\[\]]+\]|\([^\(\)]+\)|\.|\\.)[\+\*]$/.test(u);let E=h!=="*"&&h!=="?";!h&&u&&/^(\[[^\[\]]+\]|\([^\(\)]+\)|\.|\\.)[\*\?]?$/.test(u)&&(E=!1);const d=h||"",P=l?this.separator(e.charAt(l-1)):!0,S=l+r.length>=e.length?!0:this.separator(e.charAt(l+r.length)),R=P&&S;if(l>i){const j=e.substring(i,l),v=this.escape(j);this.regstr+=v}R&&l&&(!w||!E)&&u&&!x&&(this.regstr+="?");const p=u||f+"+",_=w?R?x?"((?:"+t+"?"+p+")"+d+")":"((?:"+t+p+")"+d+")":"((?:"+f+"*"+p+")"+d+")":R&&x?"("+p+"?)"+d:"("+p+")"+d;this.regstr+=_;const m={key:c,multiple:w,required:E,index:n,pattern:p};return w&&(m.regexp=new RegExp(p,this.options.case?"g":"gi")),this.keys.push(m),i=l+r.length,r}),i<e.length-1){const r=e.substring(i),c=this.escape(r);this.regstr+=c}this.regexp=new RegExp((this.options.fromStart?"^":"")+t+"?"+this.regstr+(this.options.toEnd?t+"?$":"("+t+"|"+t+"?$)"),this.options.case?"":"i")},s.prototype.escape=function(e){return e.replace(o,t=>"\\"+t)},s.prototype.separator=function(e){return!!(this.options.separators.indexOf(e)+1)},s.prototype.match=function(e){if(typeof e!="string")return;const t=this.options.separator,f=this.options.separators[0];e=e.replace(new RegExp("^"+t+"*(.*?)"+t+"*$"),f+"$1"+f);const i=e.match(this.regexp);if(!i)return;const n={};return this.keys.forEach(r=>{let c=!1;n[r.key]&&(c=!0),n[r.key]&&!Array.isArray(n[r.key])&&(c=!0,n[r.key]=[n[r.key]]),r.multiple&&!n[r.key]&&(c=!0,n[r.key]=[]);let g=i[r.index]?i[r.index]:void 0;if(!c&&!r.multiple){n[r.key]=g;return}if(c&&!r.multiple&&i[r.index]){n[r.key].push(g);return}i[r.index]&&i[r.index].replace(r.regexp,u=>{u&&n[r.key].push(u.replace(new RegExp(t+"*$"),""))})}),n},k}var q=D();const O=U(q);function z(o){let a="",s=0;for(;s<o.length;)if(o[s]==="{"){let e=s;s++;let t=1;for(;s<o.length&&t>0;)o[s]==="\\"?s+=2:(o[s]==="{"?t++:o[s]==="}"&&t--,s++);if(t!==0)throw new Error(`Unmatched '{' in path: ${o}`);const f=o.slice(e+1,s-1),i=f.indexOf(":");let n,r,c;if(i===-1){const g=f.match(/^([^?*+]+)([?*+])?$/);if(!g)throw new Error(`Invalid parameter segment: {${f}}`);[,n,c]=g}else n=f.slice(0,i),r=f.slice(i+1);a+=`:${n}`,r&&(a+=`(${r})`),c&&(a+=c)}else a+=o[s++];return a}let y=M.proxy({url:"",pathname:"",params:{},query:{}});typeof window<"u"&&(y.url=window.location.href,y.pathname=window.location.pathname,Object.assign(y.query,Object.fromEntries(new URLSearchParams(window.location.search))),y.params={});const $={};function I(o,a){$[o]||($[o]=new O(z(o)));const s=$[o].match(a);return s||{}}exports.page=y;exports.path_to_regex=O;exports.shadowUrl=I;
-//# sourceMappingURL=page.svelte-Dvj7306U.cjs.map