tungsten 0.3.1 → 0.3.3

package/dist/frameworkConfigSchema.js

@@ -50,7 +50,8 @@ const frameworkConfigBaseValidator = arkType({
   'skipPackageCompilation?': 'string | string[]',
   'serverMiddleware?': ['string', 'string', 'string'],
   'apiRoutes?': 'string',
-  'apiPath?': 'string'
+  'apiPath?': 'string',
+  'csr?': 'boolean'
 });
 const frameworkConfigWithRootComponentValidator = arkType({
   '...': frameworkConfigBaseValidator,

package/dist/getComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getComponent.d.ts","sourceRoot":"","sources":["../src/getComponent.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAG7D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAMhC,wBAAsB,YAAY,CAC9B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAEhB,SAAS,GAAE,MAAM,GAAG,IAAW,EAC/B,IAAI,GAAE,IAAa,GACpB,OAAO,CAAC,gBAAgB,CAAC,CA6B3B"}
+{"version":3,"file":"getComponent.d.ts","sourceRoot":"","sources":["../src/getComponent.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAG7D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAOhC,wBAAsB,YAAY,CAC9B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAEhB,SAAS,GAAE,MAAM,GAAG,IAAW,EAC/B,IAAI,GAAE,IAAa,GACpB,OAAO,CAAC,gBAAgB,CAAC,CA6B3B"}

package/dist/getComponent.js

@@ -2,6 +2,7 @@ import { fixExtension } from "./fixExtension.js";
 import { TungstenError } from "./TungstenError.js";
 import { throwError } from "./throwError.js";
 import { iterationQueryString } from "./iterationQueryString.js";
+import { importDevModuleWithRetry } from "./importDevModuleWithRetry.js";
 //let load //// !! future improvement
 export async function getComponent(filePath, filename,
 //load: Load | null = null,
@@ -16,7 +17,7 @@ iteration = null, mode = 'prod') {
     //const load = await createLoad(import.meta.url, sxyLoaderConfig)
     //console.log('load', filePath)
     //module = await load(filePath)
-    module = await import(iterationQueryString(filePath, iteration));
+    module = await importDevModuleWithRetry(iterationQueryString(filePath, iteration));
   } else {
     //console.log('import', filePath)
     module = await import(filePath); // import the module

package/dist/getRoutes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getRoutes.d.ts","sourceRoot":"","sources":["../src/getRoutes.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAGrC,OAAO,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AAE9D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAK5D,wBAAsB,SAAS,CAC3B,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,uBAAuB,EAE/B,SAAS,GAAE,MAAM,GAAG,IAAW,EAC/B,IAAI,GAAE,IAAa,GACnB,OAAO,CAAC,SAAS,CAAC,CAmCrB"}
+{"version":3,"file":"getRoutes.d.ts","sourceRoot":"","sources":["../src/getRoutes.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAGrC,OAAO,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AAE9D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAM5D,wBAAsB,SAAS,CAC3B,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,uBAAuB,EAE/B,SAAS,GAAE,MAAM,GAAG,IAAW,EAC/B,IAAI,GAAE,IAAa,GACnB,OAAO,CAAC,SAAS,CAAC,CAmCrB"}

package/dist/getRoutes.js

@@ -3,6 +3,7 @@ import { fixExtension } from "./fixExtension.js";
 import { TungstenError } from "./TungstenError.js";
 import { iterationQueryString } from "./iterationQueryString.js";
 import { throwError } from "./throwError.js";
+import { importDevModuleWithRetry } from "./importDevModuleWithRetry.js";
 export async function getRoutes(compilationInfo, config,
 //load: Load | null = null,
 iteration = null, mode = 'prod') {
@@ -22,7 +23,7 @@ iteration = null, mode = 'prod') {
       // can we share load across the render?
       //const load = await createLoad(import.meta.url, sxyLoaderConfig)
       //module = await load(filePath)
-      module = await import(iterationQueryString(filePath, iteration));
+      module = await importDevModuleWithRetry(iterationQueryString(filePath, iteration));
     } else {
       module = await import(filePath); // import the module
     }

package/dist/hmr/applyHmrModule.d.ts

@@ -0,0 +1,11 @@
+export { refreshStylesheets } from './refreshStylesheets.js';
+export type ApplyHmrModuleResult = {
+    matched: true;
+    count: number;
+    orphaned: boolean;
+} | {
+    matched: false;
+    orphaned: boolean;
+};
+export declare function applyHmrModule(moduleExports: Record<string, unknown>, file?: string): Promise<ApplyHmrModuleResult>;
+//# sourceMappingURL=applyHmrModule.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"applyHmrModule.d.ts","sourceRoot":"","sources":["../../src/hmr/applyHmrModule.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAE5D,MAAM,MAAM,oBAAoB,GAC1B;IAAE,OAAO,EAAE,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,GACnD;IAAE,OAAO,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAA;AAsB3C,wBAAsB,cAAc,CAChC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,MAAM,GACtD,OAAO,CAAC,oBAAoB,CAAC,CAkD/B"}

package/dist/hmr/applyHmrModule.js

@@ -0,0 +1,78 @@
+import { AnyComponentIsFunctionComponentStandIn } from "../AnyComponent.js";
+import { hotSwapClassComponent, hotSwapFunctionComponent } from "../update/integrateUpdateVdom.js";
+import { componentTypeIdentityKey, componentTypeKind, liveComponentIdentityKey, liveComponentKind } from "./componentIdentity.js";
+import { getCurrentInstance } from "./instanceRegistry.js";
+export { refreshStylesheets } from "./refreshStylesheets.js";
+function identityToken(kind, key) {
+  return `${kind}:${key}`;
+}
+function tokenKind(token) {
+  return token.startsWith('function:') ? 'function' : 'class';
+}
+function tokenKey(token) {
+  return token.slice(token.indexOf(':') + 1);
+}
+// Per source file, the set of component identity tokens ('kind:key') it exported the last time
+// this ran. Lets a later edit to the same file detect "this used to export a component that's
+// still live, and doesn't anymore" (a rename or delete) - see tungsten/docs/hmr.md's "orphaned
+// components" note. Cleared naturally on a real page load, since this module state doesn't
+// survive a full reload.
+const previousFileExportIdentities = new Map();
+// Given the freshly re-imported exports of one recompiled file, find every live component
+// instance that came from a same-named, same-kind definition and rebuild it in place. See
+// tungsten/docs/hmr.md for the full design and the reasoning behind the identity key.
+export async function applyHmrModule(moduleExports, file) {
+  const instance = getCurrentInstance();
+  if (instance === undefined) return {
+    matched: false,
+    orphaned: false
+  };
+  let matchedCount = 0;
+  const currentIdentities = new Set();
+  for (const exportName in moduleExports) {
+    const exported = moduleExports[exportName];
+    if (typeof exported !== 'function') continue;
+    const NewType = exported; // eslint-disable-line no-type-assertion/no-type-assertion -- narrowed by typeof above, definitively a function/class value
+    const newKind = componentTypeKind(NewType);
+    const newKey = componentTypeIdentityKey(NewType);
+    currentIdentities.add(identityToken(newKind, newKey));
+    // snapshot: hot-swapping unregisters the old instance and registers its replacement,
+    // mutating registeredComponents mid-loop otherwise
+    for (const component of [...instance.registeredComponents]) {
+      const anyComponent = component; // eslint-disable-line no-type-assertion/no-type-assertion -- every registered component is actually a class instance or FunctionElement stand-in
+      if (liveComponentKind(anyComponent) !== newKind) continue;
+      if (liveComponentIdentityKey(anyComponent) !== newKey) continue;
+      const swapped = AnyComponentIsFunctionComponentStandIn(anyComponent) ? await hotSwapFunctionComponent(anyComponent, NewType) // eslint-disable-line no-type-assertion/no-type-assertion -- newKind === 'function' guaranteed by the kind check above
+      : await hotSwapClassComponent(anyComponent, NewType); // eslint-disable-line no-type-assertion/no-type-assertion -- newKind === 'class' guaranteed by the kind check above
+      if (swapped !== null) matchedCount++;
+    }
+  }
+  let orphaned = false;
+  if (file !== undefined) {
+    const previousIdentities = previousFileExportIdentities.get(file);
+    if (previousIdentities !== undefined) {
+      for (const previousToken of previousIdentities) {
+        if (currentIdentities.has(previousToken)) continue;
+        const kind = tokenKind(previousToken);
+        const key = tokenKey(previousToken);
+        const stillLive = [...instance.registeredComponents].some(component => {
+          const anyComponent = component; // eslint-disable-line no-type-assertion/no-type-assertion -- every registered component is actually a class instance or FunctionElement stand-in
+          return liveComponentKind(anyComponent) === kind && liveComponentIdentityKey(anyComponent) === key;
+        });
+        if (stillLive) {
+          orphaned = true;
+          break;
+        }
+      }
+    }
+    previousFileExportIdentities.set(file, currentIdentities);
+  }
+  return matchedCount > 0 ? {
+    matched: true,
+    count: matchedCount,
+    orphaned
+  } : {
+    matched: false,
+    orphaned
+  };
+}

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/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/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './useCallback.js';
+export * from './useInstance.js';
 export * from './useMemo.js';
 export * from './useRef.js';
 export * from './useState.js';

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AACA,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AACA,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA"}

package/dist/hooks/index.js

@@ -1,4 +1,5 @@
 export * from "./useCallback.js";
+export * from "./useInstance.js";
 export * from "./useMemo.js";
 export * from "./useRef.js";
 export * from "./useState.js";

package/dist/hooks/useInstance.d.ts

@@ -0,0 +1,3 @@
+import type { Instance } from '../Instance/Instance.js';
+export declare function useInstance(): Instance;
+//# sourceMappingURL=useInstance.d.ts.map

package/dist/hooks/useInstance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInstance.d.ts","sourceRoot":"","sources":["../../src/hooks/useInstance.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAEvD,wBAAgB,WAAW,IAAI,QAAQ,CAEtC"}

package/dist/hooks/useInstance.js

@@ -0,0 +1,4 @@
+import { getCurrentComponent } from "./getCurrentComponent.js";
+export function useInstance() {
+  return getCurrentComponent().__instance;
+}

package/dist/hydrate/hydrate.d.ts

@@ -1,5 +1,15 @@
 import type { InstanceConfig } from '../Instance/InstanceConfig.js';
 import type { AppRoutes } from '../routing/AppRoutes.js';
+import { DomPointer } from '../DomPointer.js';
 import { TungstenBaseComponentType } from '../Components.jsx';
+import { Instance } from '../Instance/Instance.js';
+import { type TaggedAttributeMismatch } from './renderHydrationMismatchBanner.js';
+import '../hmr/applyHmrModule.js';
+export type HydrateMeta = {
+    insideForm: boolean;
+    mismatches: TaggedAttributeMismatch[];
+};
 export declare function hydrate(appRoutes: AppRoutes, RootComponent: TungstenBaseComponentType | null, instanceConfig: InstanceConfig): Promise<void>;
+export declare function hydrateRootComponent<ComponentType extends TungstenBaseComponentType<any, any>>(instance: Instance, RootComponent: ComponentType, domPointer: DomPointer, meta: HydrateMeta, props?: InstanceType<ComponentType>['props'], // eslint-disable-line no-type-assertion/no-type-assertion -- default only reached when Props is empty, same as the hardcoded {} this replaces
+routeParams?: Record<string, string>, routeData?: unknown): Promise<InstanceType<ComponentType>>;
 //# 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,EAAoD,MAAM,mBAAmB,CAAA;AAE/G,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAmBlD,OAAO,EAC4B,KAAK,uBAAuB,EAC9D,MAAM,oCAAoC,CAAA;AAQ3C,OAAO,0BAA0B,CAAA;AASjC,MAAM,MAAM,WAAW,GAAG;IACtB,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,uBAAuB,EAAE,CAAA;CACxC,CAAA;AAKD,wBAAsB,OAAO,CACzB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,yBAAyB,GAAG,IAAI,EAC/C,cAAc,EAAE,cAAc,iBA2DjC;AAyBD,wBAAsB,oBAAoB,CACtC,aAAa,SAAS,yBAAyB,CAAC,GAAG,EAAE,GAAG,CAAC,EAEzD,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,WAAW,EAIjB,KAAK,GAAE,YAAY,CAAC,aAAa,CAAC,CAAC,OAAO,CAA8C,EAAE,8IAA8I;AACxO,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACpC,SAAS,CAAC,EAAE,OAAO,GACpB,OAAO,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,CA6DtC"}

package/dist/hydrate/hydrate.js

@@ -1,4 +1,4 @@
-import { integrateElementUpdateVdom } from "../update/integrateUpdateVdom.js";
+import { applyUpdate, integrateElementUpdateVdom } from "../update/integrateUpdateVdom.js";
 //import type { RouteType } from '../routing/RouteType.js'
 import { $number, $string, makeRenderedContentNodeNonRendered, makeRenderedContentNodeClassComponent, makeRenderedContentNodeFunctionComponent } from "../RenderedContentNode.js";
 import { ContentNodeElementIsHtml, ContentNodeIsHtml, ContentNodeIsComponent, ContentNodeComponentIsClassComponent, ContentNodeIsElement } from "../ContentNode.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,14 +29,24 @@ import { MatchedRoute } from "../routing/MatchedRoute.js";
 import { isDev } from "../isDev.js";
 import { warn } from "../appOutput.js";
 import { reconcileHydratedAttributes } from "./reconcileHydratedAttributes.js";
+import { renderHydrationMismatchBanner } from "./renderHydrationMismatchBanner.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);
+  //console.log(...texts)
   //console.log(getStackTrace().split('\n')[2])
 }
 function makeDefaultHydrateMeta() {
   return {
-    insideForm: false
+    insideForm: false,
+    mismatches: []
   };
 } // can we opto this out in production?
 export async function hydrate(appRoutes, RootComponent, instanceConfig) {
@@ -56,6 +66,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') {
@@ -80,6 +91,7 @@ export async function hydrate(appRoutes, RootComponent, instanceConfig) {
     // hydrateNode(content, null, domPointer, instance, meta)
   }
   instance.hydrationComplete = true;
+  if (isDev) renderHydrationMismatchBanner(meta.mismatches);
   //// Can components update while hydrating is still taking place
   //// -- probably yes
   //// Can we pause any further update until hydration completes, to retain coherency?
@@ -105,12 +117,20 @@ routes) {
     };
   }
 }
-async function hydrateRootComponent(instance, RootComponent, domPointer, meta) {
+export async function hydrateRootComponent(instance, RootComponent, domPointer, meta,
+// Real app hydration (hydrate(), above) always hydrates a root with no props of its own -
+// route data comes through the store instead - so the default reproduces that. A test
+// harness hydrating an arbitrary component (see testing/hydrateTestApp.ts) passes its own.
+props = {},
+// eslint-disable-line no-type-assertion/no-type-assertion -- default only reached when Props is empty, same as the hardcoded {} this replaces
+routeParams, routeData) {
   debug('hydrateRootComponent');
+  // matches createTungstenRootComponent's identical cast, the create-path equivalent of this function
+  // eslint-disable-next-line no-type-assertion/no-type-assertion
   const element = new RootComponent({
-    props: {},
-    routeParams: undefined,
-    routeData: undefined,
+    props,
+    routeParams,
+    routeData,
     instance,
     parentElement: null
   });
@@ -146,6 +166,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 +247,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 +269,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 +337,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 +358,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) {
@@ -465,7 +500,7 @@ async function hydrateNodeSingle(node, parentElement, domPointer, instance, meta
     //     node[$props].ref.current = domNode
     // }
     debug('hydarating atts');
-    hydrateAttributes(node, domNode);
+    hydrateAttributes(node, domNode, meta);
     //!!! node.domElement = domNode
     const props = node[$props];
     if (node[$type] === 'textarea') {
@@ -501,7 +536,22 @@ async function hydrateNodeSingle(node, parentElement, domPointer, instance, meta
     debug('valid children', validChildren(node[$props].children), node[$props].children);
     const children = node[$props].children;
     let renderedChildren = $contentNull;
-    if (node[$props].__opaque !== true && validChildren(children)) {
+    if (node[$type] === 'body' && instance.config.csr) {
+      // CSR: body shipped empty on purpose, nothing to hydrate against - create fresh.
+      if (parentElement === null) {
+        throwError('hydrateNodeSingle', 'CSR hydration reached <body> with no owning component');
+      }
+      const childDomPointer = new DomPointer(domNode);
+      renderedChildren = await applyUpdate({
+        tungstenElement: parentElement,
+        instance,
+        newNode: children,
+        oldNode: $contentNull,
+        domRegion: null,
+        domPointer: childDomPointer,
+        parentNode: null
+      });
+    } else if (node[$props].__opaque !== true && validChildren(children)) {
       debug('node.props.children', children);
       const childDomPointer = new DomPointer(domNode);
       renderedChildren = await hydrateNode(children, parentElement, childDomPointer, instance, meta);
@@ -546,17 +596,27 @@ async function hydrateNodeComponent(node, parentElement, domPointer, instance, m
 }
 // export type HTMLBindableElement = HTMLButtonElement | HTMLDataElement | HTMLInputElement | HTMLLIElement
 // | HTMLMeterElement | HTMLOptionElement | HTMLParamElement | HTMLProgressElement | HTMLSelectElement | HTMLTextAreaElement
-function hydrateAttributes(node, domNode) {
+function hydrateAttributes(node, domNode, meta) {
   // handle bind attributes and merge together event handlers
   processAttributes(node);
   // Bring the server's attributes into line with what this render produced.
   // Runs in production as well as development: leaving a known-wrong value in
   // place is not better in production, it is only quieter. Only genuine
   // differences are written, so a page that matches costs reads and no
-  // writes. The report is dev-only, because a mismatch is a bug in the
-  // application's rendering rather than something a user can act on.
+  // writes. Collection always runs (it is what a hydration-test harness reads
+  // to assert on - see testing/hydrateTestApp.ts); only the console report and
+  // the on-page banner (hydrate(), below) are dev-only, because a mismatch is
+  // a bug in the application's rendering rather than something a user can act on.
   if (ContentNodeElementIsHtml(node)) {
-    reconcileHydratedAttributes(node, domNode, isDev ? mismatch => warn(`hydration mismatch on <${node[$type]}>:` + ` ${mismatch.name} rendered as ${JSON.stringify(mismatch.expected)}` + ` but the server sent ${JSON.stringify(mismatch.actual)}.` + ` The rendered value has been applied.`) : undefined);
+    reconcileHydratedAttributes(node, domNode, mismatch => {
+      meta.mismatches.push({
+        tagName: node[$type],
+        ...mismatch
+      });
+      if (isDev) {
+        warn(`hydration mismatch on <${node[$type]}>:` + ` ${mismatch.name} rendered as ${JSON.stringify(mismatch.expected)}` + ` but the server sent ${JSON.stringify(mismatch.actual)}.` + ` The rendered value has been applied.`);
+      }
+    });
   }
   debug('--\nhydrateAttributes', domNode);
   for (const key in node[$props]) {
@@ -674,6 +734,8 @@ function hydrateAttributes(node, domNode) {
 function processAttributes(node) {
   const props = node[$props];
   debug('--\nprocessAttributes', node);
+  // set a button without specified type to button, so buttons don't submit forms unless instructed to
+  if (node[$type] === 'button' && !('type' in props)) props.type = 'button';
   for (const key in node[$props]) {
     if (key === 'bind' && ContentNodeElementIsHtml(node)) {
       const eventName = 'onInput';

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

@@ -1 +1 @@
-{"version":3,"file":"reconcileHydratedAttributes.d.ts","sourceRoot":"","sources":["../../src/hydrate/reconcileHydratedAttributes.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAIxD,MAAM,MAAM,iBAAiB,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,gFAAgF;IAChF,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,2EAA2E;IAC3E,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;CACxB,CAAA;AA6BD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,2BAA2B,CACvC,IAAI,EAAE,eAAe,EACrB,OAAO,EAAE,WAAW,EACpB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,KAAK,IAAI,GACnD,IAAI,CAkCN"}
+{"version":3,"file":"reconcileHydratedAttributes.d.ts","sourceRoot":"","sources":["../../src/hydrate/reconcileHydratedAttributes.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAKxD,MAAM,MAAM,iBAAiB,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,gFAAgF;IAChF,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,2EAA2E;IAC3E,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;CACxB,CAAA;AA6BD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,2BAA2B,CACvC,IAAI,EAAE,eAAe,EACrB,OAAO,EAAE,WAAW,EACpB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,KAAK,IAAI,GACnD,IAAI,CAuCN"}

package/dist/hydrate/reconcileHydratedAttributes.js

@@ -1,5 +1,6 @@
 import { $props } from "../contentNodeSymbols.js";
 import { processProps } from "../render/processProps.js";
+import { booleanAttributeValue } from "../booleanAttributeValue.js";
 /**
  * The attribute value a render produces for a prop, or null for "no attribute".
  *
@@ -7,8 +8,8 @@ import { processProps } from "../render/processProps.js";
  * the server and `addAttributes()` on the client — so that a value which
  * round-trips unchanged compares equal here.
  */
-function attributeValue(value) {
-  if (typeof value === 'boolean') return value ? '' : null;
+function attributeValue(name, value) {
+  if (typeof value === 'boolean') return booleanAttributeValue(name, value);
   if (value === undefined || value === null) return null;
   return String(value);
 }
@@ -40,14 +41,22 @@ function setAttribute(domNode, name, value) {
  */
 export function reconcileHydratedAttributes(node, domNode, onMismatch) {
   // A copy: processProps() rewrites what it is given, and these props stay in
-  // the content tree for the next update to diff against.
+  // the content tree for the next update to diff against. children is pulled out
+  // first, same as the server renderer (renderingTreeToHtml.ts) and the client
+  // update path (integrateUpdateVdom.ts's processAttributes()) both do - it is
+  // rendered content, not an HTML attribute, and processProps() was never meant
+  // to receive it.
+  const {
+    children: _children,
+    ...restProps
+  } = node[$props]; // eslint-disable-line @typescript-eslint/no-unused-vars
   const expected = processProps({
-    ...node[$props]
+    ...restProps
   });
   const handled = new Set();
   for (const name in expected) {
     handled.add(name.toLowerCase());
-    const value = attributeValue(expected[name]);
+    const value = attributeValue(name, expected[name]);
     const actual = domNode.getAttribute(name);
     if (value === actual) continue;
     if (value === null) removeAttribute(domNode, name);else setAttribute(domNode, name, value);

package/dist/hydrate/renderHydrationMismatchBanner.d.ts

@@ -0,0 +1,7 @@
+import type { AttributeMismatch } from './reconcileHydratedAttributes.js';
+export type TaggedAttributeMismatch = AttributeMismatch & {
+    tagName: string;
+};
+export declare const hydrationMismatchAttribute = "data-tungsten-hydration-mismatches";
+export declare function renderHydrationMismatchBanner(mismatches: readonly TaggedAttributeMismatch[], doc?: Document): void;
+//# sourceMappingURL=renderHydrationMismatchBanner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderHydrationMismatchBanner.d.ts","sourceRoot":"","sources":["../../src/hydrate/renderHydrationMismatchBanner.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AAEzE,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GAAG;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAA;AAI7E,eAAO,MAAM,0BAA0B,uCAAuC,CAAA;AA2C9E,wBAAgB,6BAA6B,CACzC,UAAU,EAAE,SAAS,uBAAuB,EAAE,EAC9C,GAAG,GAAE,QAAmB,GACzB,IAAI,CA4BN"}