tungsten 0.3.1 → 0.3.2

package/dist/hmr/applyHmrModule.sxyt.js

@@ -0,0 +1,182 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { expect } from 'chai';
+import { Window } from 'happy-dom';
+import { describe } from 'sxy-test-runner';
+import { TungstenSimpleComponent } from "../Components.js";
+import { createTestApp } from "../testing/index.js";
+import { WideRenderedContentNodeIsComponent } from "../RenderedContentNode.js";
+import { AnyComponentIsFunctionComponentStandIn } from "../AnyComponent.js";
+import { setCurrentInstance } from "./instanceRegistry.js";
+import { applyHmrModule } from "./applyHmrModule.js";
+import { jsxs as _jsxs, jsx as _jsx } from "tungsten/jsxRuntime.js";
+describe('applyHmrModule()', ({
+  it
+}) => {
+  it('matches and swaps a live component by name+kind', async () => {
+    const window = new Window();
+    const document = window.document; // eslint-disable-line no-type-assertion/no-type-assertion -- happy-dom's Document is structurally compatible
+    const Greeting = ({
+      name
+    }) => {
+      return _jsxs("div", {
+        className: "greeting",
+        children: ["Hello ", name]
+      });
+    };
+    class Root extends TungstenSimpleComponent {
+      constructor(...args) {
+        super(...args);
+        _defineProperty(this, "content", () => _jsx(Greeting, {
+          name: "Ada"
+        }));
+      }
+    }
+    const testApp = await createTestApp(Root, {
+      document
+    });
+    const wrapper = testApp.component.__currentContent;
+    if (!WideRenderedContentNodeIsComponent(wrapper) || !AnyComponentIsFunctionComponentStandIn(wrapper.element)) {
+      throw new Error('expected the root to directly render a single function component');
+    }
+    setCurrentInstance(wrapper.element.__instance);
+    const NewGreeting = ({
+      name
+    }) => {
+      return _jsxs("div", {
+        className: "greeting",
+        children: ["Hi there ", name]
+      });
+    };
+    Object.defineProperty(NewGreeting, 'name', {
+      value: 'Greeting'
+    });
+    const result = await applyHmrModule({
+      Greeting: NewGreeting
+    }, '/test/applyHmrModule-match.tsx');
+    expect(result.matched).to.equal(true);
+    expect(result.orphaned).to.equal(false);
+    await testApp.unmount();
+  });
+  it('reports orphaned when a still-live component export disappears from the same file', async () => {
+    const window = new Window();
+    const document = window.document; // eslint-disable-line no-type-assertion/no-type-assertion -- happy-dom's Document is structurally compatible
+    const Greeting = ({
+      name
+    }) => {
+      return _jsxs("div", {
+        className: "greeting",
+        children: ["Hello ", name]
+      });
+    };
+    class Root extends TungstenSimpleComponent {
+      constructor(...args) {
+        super(...args);
+        _defineProperty(this, "content", () => _jsx(Greeting, {
+          name: "Ada"
+        }));
+      }
+    }
+    const testApp = await createTestApp(Root, {
+      document
+    });
+    const wrapper = testApp.component.__currentContent;
+    if (!WideRenderedContentNodeIsComponent(wrapper) || !AnyComponentIsFunctionComponentStandIn(wrapper.element)) {
+      throw new Error('expected the root to directly render a single function component');
+    }
+    setCurrentInstance(wrapper.element.__instance);
+    const file = '/test/applyHmrModule-orphan.tsx';
+    // first edit: file still exports Greeting - establishes the "previously exported" baseline
+    const NewGreeting = ({
+      name
+    }) => {
+      return _jsxs("div", {
+        className: "greeting",
+        children: ["Hi there ", name]
+      });
+    };
+    Object.defineProperty(NewGreeting, 'name', {
+      value: 'Greeting'
+    });
+    const firstResult = await applyHmrModule({
+      Greeting: NewGreeting
+    }, file);
+    expect(firstResult.matched).to.equal(true);
+    expect(firstResult.orphaned).to.equal(false);
+    // second edit to the SAME file: Greeting has been renamed away - the live Greeting
+    // instance (now running NewGreeting's code) is still there, but nothing in the fresh
+    // module matches it any more
+    const Renamed = ({
+      name
+    }) => {
+      return _jsxs("div", {
+        className: "greeting",
+        children: ["Renamed ", name]
+      });
+    };
+    Object.defineProperty(Renamed, 'name', {
+      value: 'Renamed'
+    });
+    const secondResult = await applyHmrModule({
+      Renamed
+    }, file);
+    expect(secondResult.matched).to.equal(false);
+    expect(secondResult.orphaned).to.equal(true);
+    await testApp.unmount();
+  });
+  it('hot-swaps a component moved to a different file, since identity matching is name+kind based, not file-scoped', async () => {
+    const window = new Window();
+    const document = window.document; // eslint-disable-line no-type-assertion/no-type-assertion -- happy-dom's Document is structurally compatible
+    const Greeting = ({
+      name
+    }) => {
+      return _jsxs("div", {
+        className: "greeting",
+        children: ["Hello ", name]
+      });
+    };
+    class Root extends TungstenSimpleComponent {
+      constructor(...args) {
+        super(...args);
+        _defineProperty(this, "content", () => _jsx(Greeting, {
+          name: "Ada"
+        }));
+      }
+    }
+    const testApp = await createTestApp(Root, {
+      document
+    });
+    const wrapper = testApp.component.__currentContent;
+    if (!WideRenderedContentNodeIsComponent(wrapper) || !AnyComponentIsFunctionComponentStandIn(wrapper.element)) {
+      throw new Error('expected the root to directly render a single function component');
+    }
+    setCurrentInstance(wrapper.element.__instance);
+    // simulate a single edit that moves Greeting out of its original file into a brand new
+    // one - both calls happen on the FIRST ever edit to each file, so neither has a
+    // previously-exported baseline to compare against (previousFileExportIdentities starts
+    // empty per file either way)
+    const MovedGreeting = ({
+      name
+    }) => {
+      return _jsxs("div", {
+        className: "greeting",
+        children: ["Moved hello ", name]
+      });
+    };
+    Object.defineProperty(MovedGreeting, 'name', {
+      value: 'Greeting'
+    });
+    const oldFileResult = await applyHmrModule({}, '/test/applyHmrModule-move-old-file.tsx');
+    const newFileResult = await applyHmrModule({
+      Greeting: MovedGreeting
+    }, '/test/applyHmrModule-move-new-file.tsx');
+    // the old file's own result correctly sees nothing to do (it's genuinely empty now) and
+    // isn't where the swap happens - the new file's result is what should show the match,
+    // since applyHmrModule matches by identity across the whole live registry, not per file
+    expect(oldFileResult.matched).to.equal(false);
+    expect(newFileResult.matched).to.equal(true);
+    expect(newFileResult.orphaned).to.equal(false);
+    await testApp.unmount();
+  });
+});

package/dist/hmr/componentIdentity.d.ts

@@ -0,0 +1,9 @@
+import type { AnyComponent } from '../AnyComponent.js';
+import type { AnyComponentType } from '../AnyComponentType.js';
+export type ComponentKind = 'class' | 'function';
+export declare function componentTypeIdentityKey(Type: AnyComponentType): string;
+export declare function componentTypeKind(Type: AnyComponentType): ComponentKind;
+export declare function liveComponentType(component: AnyComponent): AnyComponentType;
+export declare function liveComponentKind(component: AnyComponent): ComponentKind;
+export declare function liveComponentIdentityKey(component: AnyComponent): string;
+//# sourceMappingURL=componentIdentity.d.ts.map

package/dist/hmr/componentIdentity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentIdentity.d.ts","sourceRoot":"","sources":["../../src/hmr/componentIdentity.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAO9D,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,UAAU,CAAA;AAEhD,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,gBAAgB,GAAG,MAAM,CAEvE;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,gBAAgB,GAAG,aAAa,CAEvE;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,YAAY,GAAG,gBAAgB,CAI3E;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,YAAY,GAAG,aAAa,CAExE;AAED,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,YAAY,GAAG,MAAM,CAExE"}

package/dist/hmr/componentIdentity.js

@@ -0,0 +1,17 @@
+import { AnyComponentIsFunctionComponentStandIn } from "../AnyComponent.js";
+import { AnyComponentTypeIsClassComponentType } from "../AnyComponentType.js";
+export function componentTypeIdentityKey(Type) {
+  return Type.tagName || Type.name || Type.displayName || '--unnamed--';
+}
+export function componentTypeKind(Type) {
+  return AnyComponentTypeIsClassComponentType(Type) ? 'class' : 'function';
+}
+export function liveComponentType(component) {
+  return AnyComponentIsFunctionComponentStandIn(component) ? component.func : component.constructor; // eslint-disable-line no-type-assertion/no-type-assertion -- constructor of a TungstenBaseComponent instance is its component type
+}
+export function liveComponentKind(component) {
+  return AnyComponentIsFunctionComponentStandIn(component) ? 'function' : 'class';
+}
+export function liveComponentIdentityKey(component) {
+  return componentTypeIdentityKey(liveComponentType(component));
+}

package/dist/hmr/instanceRegistry.d.ts

@@ -0,0 +1,4 @@
+import type { Instance } from '../Instance/Instance.js';
+export declare function setCurrentInstance(instance: Instance): void;
+export declare function getCurrentInstance(): Instance | undefined;
+//# sourceMappingURL=instanceRegistry.d.ts.map

package/dist/hmr/instanceRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"instanceRegistry.d.ts","sourceRoot":"","sources":["../../src/hmr/instanceRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAiBvD,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAE3D;AAED,wBAAgB,kBAAkB,IAAI,QAAQ,GAAG,SAAS,CAEzD"}

package/dist/hmr/instanceRegistry.js

@@ -0,0 +1,6 @@
+export function setCurrentInstance(instance) {
+  globalThis.__tungstenHmrInstance = instance; // eslint-disable-line no-type-assertion/no-type-assertion -- narrowing globalThis to add one optional dev-only field
+}
+export function getCurrentInstance() {
+  return globalThis.__tungstenHmrInstance; // eslint-disable-line no-type-assertion/no-type-assertion -- narrowing globalThis to add one optional dev-only field
+}

package/dist/hmr/instanceRegistry.sxyt.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=instanceRegistry.sxyt.d.ts.map

package/dist/hmr/instanceRegistry.sxyt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"instanceRegistry.sxyt.d.ts","sourceRoot":"","sources":["../../src/hmr/instanceRegistry.sxyt.ts"],"names":[],"mappings":""}

package/dist/hmr/instanceRegistry.sxyt.js

@@ -0,0 +1,24 @@
+import { expect } from 'chai';
+import { describe } from 'sxy-test-runner';
+describe('instanceRegistry() - cross module-graph visibility', ({
+  it
+}) => {
+  it('setCurrentInstance() is visible from a separately-instantiated copy of the module', async () => {
+    // In the real dev client, hydrate.tsx (and its call to setCurrentInstance) is baked into
+    // the rolled-up, single-file client.js bundle, while applyHmrModule.js (and whatever it
+    // imports, including this module) is loaded completely separately - as a plain, unbundled
+    // ES module fetched fresh from the package-copy location. Those are two distinct module
+    // instantiations of this same source file, each with their own copy of any module-scope
+    // state. A cache-busting query string reproduces exactly that split here: Node's ESM
+    // loader treats these two specifiers as separate module records, the same way the browser
+    // treats the bundle and the package-copy as unrelated.
+    const moduleA = await import("./instanceRegistry.js");
+    const copySpecifier = './instanceRegistry.js' + '?copy=1';
+    const moduleB = await import(copySpecifier);
+    const fakeInstance = {
+      marker: 'fake-instance-for-test'
+    }; // eslint-disable-line no-type-assertion/no-type-assertion, @typescript-eslint/no-explicit-any -- only the identity of this object matters for the test
+    moduleA.setCurrentInstance(fakeInstance);
+    expect(moduleB.getCurrentInstance()).to.equal(fakeInstance);
+  });
+});

package/dist/hmr/liveReloadHub.d.ts

@@ -0,0 +1,10 @@
+export type ReloadEventKind = 'js' | 'css';
+export type ReloadEventInfo = {
+    kind: ReloadEventKind;
+    file?: string;
+};
+type ReloadListener = (info: ReloadEventInfo) => void;
+export declare function onReloadEvent(listener: ReloadListener): () => void;
+export declare function emitReloadEvent(kind: ReloadEventKind, file?: string): void;
+export {};
+//# sourceMappingURL=liveReloadHub.d.ts.map

package/dist/hmr/liveReloadHub.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"liveReloadHub.d.ts","sourceRoot":"","sources":["../../src/hmr/liveReloadHub.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,KAAK,CAAA;AAE1C,MAAM,MAAM,eAAe,GAAG;IAC1B,IAAI,EAAE,eAAe,CAAA;IAGrB,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,KAAK,cAAc,GAAG,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;AAIrD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,cAAc,GAAG,MAAM,IAAI,CAGlE;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,eAAe,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAG1E"}

package/dist/{dev → hmr}/liveReloadHub.js

@@ -7,6 +7,12 @@ export function onReloadEvent(listener) {
   listeners.add(listener);
   return () => listeners.delete(listener);
 }
-export function emitReloadEvent(kind) {
-  for (const listener of listeners) listener(kind);
+export function emitReloadEvent(kind, file) {
+  const info = file !== undefined ? {
+    kind,
+    file
+  } : {
+    kind
+  };
+  for (const listener of listeners) listener(info);
 }

package/dist/hmr/refreshStylesheets.d.ts

@@ -0,0 +1,2 @@
+export declare function refreshStylesheets(doc?: Document): Promise<void>[];
+//# sourceMappingURL=refreshStylesheets.d.ts.map

package/dist/hmr/refreshStylesheets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"refreshStylesheets.d.ts","sourceRoot":"","sources":["../../src/hmr/refreshStylesheets.ts"],"names":[],"mappings":"AAMA,wBAAgB,kBAAkB,CAAC,GAAG,GAAE,QAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,CAY5E"}

package/dist/hmr/refreshStylesheets.js

@@ -0,0 +1,26 @@
+// dev-only: cache-bust every stylesheet link on a CSS (or style-affecting JS) change, without a
+// gap where no stylesheet is applied. Setting an existing <link>'s href directly can produce a
+// visible flash - the load timing isn't guaranteed the same way across browsers - so instead a
+// new <link> is inserted right after the old one and only removed once the new one has finished
+// loading (or errored, so a failed fetch doesn't leave two stylesheets applied forever). There's
+// a brief window where both are applied at once; that's harmless for a same-file edit.
+export function refreshStylesheets(doc = document) {
+  const oldLinks = [...doc.querySelectorAll('link[rel="stylesheet"]')];
+  return oldLinks.map(oldLink => new Promise(resolve => {
+    const url = oldLink.getAttribute('href')?.split('?')[0] ?? '';
+    const newLink = doc.createElement('link');
+    newLink.rel = 'stylesheet';
+    newLink.href = `${url}?t=${Date.now()}`;
+    const finish = () => {
+      oldLink.remove();
+      resolve();
+    };
+    newLink.addEventListener('load', finish, {
+      once: true
+    });
+    newLink.addEventListener('error', finish, {
+      once: true
+    });
+    oldLink.insertAdjacentElement('afterend', newLink);
+  }));
+}

package/dist/hmr/refreshStylesheets.sxyt.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=refreshStylesheets.sxyt.d.ts.map

package/dist/hmr/refreshStylesheets.sxyt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"refreshStylesheets.sxyt.d.ts","sourceRoot":"","sources":["../../src/hmr/refreshStylesheets.sxyt.ts"],"names":[],"mappings":""}

package/dist/hmr/refreshStylesheets.sxyt.js

@@ -0,0 +1,46 @@
+import { expect } from 'chai';
+import { Window } from 'happy-dom';
+import { describe } from 'sxy-test-runner';
+import { refreshStylesheets } from "./refreshStylesheets.js";
+describe('refreshStylesheets()', ({
+  it
+}) => {
+  it('adds the new stylesheet link and waits for it to load before removing the old one', async () => {
+    const window = new Window();
+    const document = window.document; // eslint-disable-line no-type-assertion/no-type-assertion -- happy-dom's Document is structurally compatible
+    const oldLink = document.createElement('link');
+    oldLink.rel = 'stylesheet';
+    oldLink.href = '/.componentCss/ccss.css';
+    document.head.appendChild(oldLink);
+    const donePromises = refreshStylesheets(document);
+    expect(donePromises).to.have.length(1);
+    // give the (synchronous, in this test) DOM mutation a tick to land
+    await Promise.resolve();
+    const links = document.querySelectorAll('link[rel="stylesheet"]');
+    expect(links.length).to.equal(2);
+    expect(document.contains(oldLink)).to.equal(true);
+    const newLink = [...links].find(link => link !== oldLink); // eslint-disable-line no-type-assertion/no-type-assertion -- narrowed by the length check above
+    expect(newLink).to.not.equal(undefined);
+    expect(newLink.getAttribute('href')).to.match(/^\/\.componentCss\/ccss\.css\?t=\d+$/);
+    // simulate the browser finishing the fetch+parse of the new stylesheet
+    newLink.dispatchEvent(new window.Event('load')); // eslint-disable-line no-type-assertion/no-type-assertion -- happy-dom's Event is structurally compatible
+    await donePromises[0];
+    expect(document.contains(oldLink)).to.equal(false);
+    expect(document.querySelectorAll('link[rel="stylesheet"]').length).to.equal(1);
+  });
+  it('removes the old link even if the new stylesheet fails to load, rather than leaving both forever', async () => {
+    const window = new Window();
+    const document = window.document; // eslint-disable-line no-type-assertion/no-type-assertion -- happy-dom's Document is structurally compatible
+    const oldLink = document.createElement('link');
+    oldLink.rel = 'stylesheet';
+    oldLink.href = '/.componentCss/ccss.css';
+    document.head.appendChild(oldLink);
+    const [done] = refreshStylesheets(document);
+    await Promise.resolve();
+    const newLink = [...document.querySelectorAll('link[rel="stylesheet"]')].find(link => link !== oldLink); // eslint-disable-line no-type-assertion/no-type-assertion -- there are exactly two links at this point, one of them is oldLink
+    expect(newLink).to.not.equal(undefined);
+    newLink.dispatchEvent(new window.Event('error')); // eslint-disable-line no-type-assertion/no-type-assertion -- happy-dom's Event is structurally compatible
+    await done;
+    expect(document.contains(oldLink)).to.equal(false);
+  });
+});

package/dist/hydrate/hydrate.d.ts

@@ -1,5 +1,13 @@
 import type { InstanceConfig } from '../Instance/InstanceConfig.js';
 import type { AppRoutes } from '../routing/AppRoutes.js';
-import { TungstenBaseComponentType } from '../Components.jsx';
+import { DomPointer } from '../DomPointer.js';
+import { TungstenBaseComponentType, TungstenBaseComponent } from '../Components.jsx';
+import { Instance } from '../Instance/Instance.js';
+import '../hmr/applyHmrModule.js';
+type HydrateMeta = {
+    insideForm: boolean;
+};
 export declare function hydrate(appRoutes: AppRoutes, RootComponent: TungstenBaseComponentType | null, instanceConfig: InstanceConfig): Promise<void>;
+export declare function hydrateRootComponent(instance: Instance, RootComponent: TungstenBaseComponentType, domPointer: DomPointer, meta: HydrateMeta): Promise<TungstenBaseComponent<object, undefined>>;
+export {};
 //# sourceMappingURL=hydrate.d.ts.map

package/dist/hydrate/hydrate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hydrate.d.ts","sourceRoot":"","sources":["../../src/hydrate/hydrate.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAQnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AA0BxD,OAAO,EAAE,yBAAyB,EAAoD,MAAM,mBAAmB,CAAA;AAoC/G,wBAAsB,OAAO,CACzB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,yBAAyB,GAAG,IAAI,EAC/C,cAAc,EAAE,cAAc,iBAyDjC"}
+{"version":3,"file":"hydrate.d.ts","sourceRoot":"","sources":["../../src/hydrate/hydrate.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAQnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAoBxD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAM7C,OAAO,EAAE,yBAAyB,EAAE,qBAAqB,EAA6B,MAAM,mBAAmB,CAAA;AAE/G,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AA0BlD,OAAO,0BAA0B,CAAA;AASjC,KAAK,WAAW,GAAG;IACf,UAAU,EAAE,OAAO,CAAA;CACtB,CAAA;AAKD,wBAAsB,OAAO,CACzB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,yBAAyB,GAAG,IAAI,EAC/C,cAAc,EAAE,cAAc,iBA0DjC;AAyBD,wBAAsB,oBAAoB,CACtC,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,yBAAyB,EACxC,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,WAAW,qDA4DpB"}

package/dist/hydrate/hydrate.js

@@ -7,7 +7,7 @@ import { DomPointer } from "../DomPointer.js";
 import { DomRegion } from "../DomRegion.js";
 //import { FunctionComponent } from '../FunctionComponent.js'
 import { FunctionElement } from "../FunctionComponentStandIn.js";
-import { getContentFromFunctionComponent } from "../getContentFromFunctionComponent.js";
+import { getStyledContentFromFunctionComponent } from "../getStyledContentFromFunctionComponent.js";
 import { StringIsHtmlEvent, htmlEvents } from "../htmlEvents.js";
 import { TungstenStatefulComponent } from "../Components.js";
 import { TungstenError } from "../TungstenError.js";
@@ -29,6 +29,14 @@ import { MatchedRoute } from "../routing/MatchedRoute.js";
 import { isDev } from "../isDev.js";
 import { warn } from "../appOutput.js";
 import { reconcileHydratedAttributes } from "./reconcileHydratedAttributes.js";
+import { setCurrentInstance } from "../hmr/instanceRegistry.js";
+// side-effect only: pulls applyHmrModule.js (and its clean, non-dynamic-import dependencies)
+// into the framework's traced dependency graph so it gets copied to .packages/ and is servable
+// to the browser. It is invoked from a raw, untraced inline script (processHead.ts) instead of
+// a real import here, because it does a computed-URL dynamic import() to fetch whichever file
+// just recompiled - and any dynamic import() with a non-literal argument anywhere in the traced
+// graph makes the framework's package-copying step throw. See tungsten/docs/hmr.md.
+import "../hmr/applyHmrModule.js";
 import { jsx as _jsx } from "tungsten/jsxRuntime.js";
 function debug(...texts) {
   console.log(...texts);
@@ -56,6 +64,7 @@ export async function hydrate(appRoutes, RootComponent, instanceConfig) {
   // const    stores: TrueStore<any>[] = createStores(null, matchedRouteInfo, globalData)
   //console.log('hydration instance config', instanceConfig)
   const instance = new Instance(location, instanceConfig, null, appRoutes, routes, internalStore, stores, storeSubscriptions, globalData, matchedRouteInfo);
+  if (isDev) setCurrentInstance(instance);
   //const routes = instance.getRoutes()
   // we know which route was matched
   // if (typeof __tungsten_router_data__ !== 'undefined') {
@@ -105,7 +114,7 @@ routes) {
     };
   }
 }
-async function hydrateRootComponent(instance, RootComponent, domPointer, meta) {
+export async function hydrateRootComponent(instance, RootComponent, domPointer, meta) {
   debug('hydrateRootComponent');
   const element = new RootComponent({
     props: {},
@@ -146,6 +155,7 @@ async function hydrateRootComponent(instance, RootComponent, domPointer, meta) {
   //     closingComment
   // )
   element.__didHydrate();
+  return element;
 }
 // if the root comp has a title, save it as the default title to use after navigation in the instance
 function handleRootTitle(rootElement) {
@@ -226,7 +236,12 @@ async function hydrateClassComponent(node, parentElement, domPointer, instance,
     const updateResult = await integrateElementUpdateVdom(element, initialContent);
     element.__currentContent = updateResult.renderedContent;
     element.__didHydrate();
-    return makeRenderedContentNodeClassComponent(node, element, openingComment, closingComment);
+    const wrapper = makeRenderedContentNodeClassComponent(node, element, openingComment, closingComment);
+    // the reconciler's own equivalents (integrateUpdateVdom.ts) set this back-reference so
+    // HMR can locate/replace a live component's wrapper node - hydration builds its own
+    // wrapper independently and has to set it too. See tungsten/docs/hmr.md.
+    element.__renderedNode = wrapper;
+    return wrapper;
   } else {
     const renderedContent = await hydrateNode(initialContent, element, domPointer, instance, meta);
     const closingNode = domPointer.get();
@@ -243,7 +258,12 @@ async function hydrateClassComponent(node, parentElement, domPointer, instance,
     //console.log('hydrated', element.constructor.name, 'with content', renderedContent)
     element.__currentContent = renderedContent;
     element.__didHydrate();
-    return makeRenderedContentNodeClassComponent(node, element, openingComment, closingComment);
+    const wrapper = makeRenderedContentNodeClassComponent(node, element, openingComment, closingComment);
+    // the reconciler's own equivalents (integrateUpdateVdom.ts) set this back-reference so
+    // HMR can locate/replace a live component's wrapper node - hydration builds its own
+    // wrapper independently and has to set it too. See tungsten/docs/hmr.md.
+    element.__renderedNode = wrapper;
+    return wrapper;
   }
 }
 async function renderClassComponent({
@@ -306,8 +326,7 @@ async function hydrateFunctionComponent(node, parentElement, domPointer, instanc
   //// InstantiateFunctionComponent???
   const functionComponentStandIn = new FunctionElement(Component, props, routeParams, routeData, instance, parentElement);
   setCurrentComponent(functionComponentStandIn);
-  const content = await getContentFromFunctionComponent(functionComponentStandIn);
-  //const content = await getContentFromFunctionComponent(Component, props)
+  const content = await getStyledContentFromFunctionComponent(functionComponentStandIn);
   clearCurrentComponent();
   //// Add to parent childNodes?
   const domIndexStart = domPointer.index;
@@ -328,7 +347,12 @@ async function hydrateFunctionComponent(node, parentElement, domPointer, instanc
   functionComponentStandIn.__domRegion = new DomRegion(domPointer.parent, domIndexStart, domIndexCount);
   functionComponentStandIn.__currentContent = renderedTree;
   //return functionComponentStandIn 
-  return makeRenderedContentNodeFunctionComponent(node, functionComponentStandIn, openingComment, closingComment);
+  const wrapper = makeRenderedContentNodeFunctionComponent(node, functionComponentStandIn, openingComment, closingComment);
+  // the reconciler's own equivalents (integrateUpdateVdom.ts) set this back-reference so HMR
+  // can locate/replace a live component's wrapper node - hydration builds its own wrapper
+  // independently and has to set it too. See tungsten/docs/hmr.md.
+  functionComponentStandIn.__renderedNode = wrapper;
+  return wrapper;
 }
 //// why don't we have html, nodes in here?
 async function hydrateNode(node, parentElement, domPointer, instance, meta) {

package/dist/hydrate/hydrate.sxyt.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=hydrate.sxyt.d.ts.map

package/dist/hydrate/hydrate.sxyt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hydrate.sxyt.d.ts","sourceRoot":"","sources":["../../src/hydrate/hydrate.sxyt.tsx"],"names":[],"mappings":""}