@typed/svelte 1.0.0-beta.7 → 1.0.0-beta.8

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present The Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -2,9 +2,12 @@
 
 Svelte 5 components inside Typed templates, and Typed renderables inside Svelte. Both directions create their own `display: contents` hosts, preserve SSR node identity during hydration, and release subscriptions with their rendering scope. The caller keeps ownership of its runtime.
 
+`view` requires `RandomValues` from `@typed/id/RandomValues` for automatic IDs. This service stays in the returned `Fx` requirements. Provide `RandomValues.Default` (or your own implementation) alongside the renderer at the application boundary; the integration does not choose an entropy source.
+
 ## Svelte in Typed
 
 ```ts
+import { RandomValues } from "@typed/id/RandomValues";
 import { Fx, RefSubject } from "@typed/fx";
 import { html } from "@typed/template/RenderTemplate";
 import { DomRenderTemplate, render } from "@typed/template/Render";
@@ -14,15 +17,15 @@ import Counter from "./Counter.svelte";
 
 const application = Fx.gen(function* () {
   const props = yield* RefSubject.make({ label: "Count" });
-  const content = html`<main>${view(Counter, props, { id: "counter" })}</main>`;
+  const content = html`<main>${view(Counter, props)}</main>`;
 
   return render(content, document.body);
-}).pipe(Fx.drainLayer, Layer.provide(DomRenderTemplate));
+}).pipe(Fx.drainLayer, Layer.provide(Layer.merge(DomRenderTemplate, RandomValues.Default)));
 
 const program = Layer.launch(application);
 ```
 
-`view(component, props, { id, ...options })` accepts a props object, `Effect`, `Stream`, or `Fx` (including `RefSubject`). Component props determine the required shape; the source's errors and required services remain in the returned `Fx`. It mounts once and updates a Svelte store, preserving component state. Once the first render event is published, the ambient Scope keeps the component live even if a consumer takes only that event. Cancellation before the first output releases pending acquisition. Nested published islands remain owned by their rendering Scope even when a sibling prevents the parent from publishing. A finite props source leaves the component mounted until cleanup. `context`, `intro`, `outro`, `recover`, `idPrefix`, `csp`, and `transformError` forward to the corresponding Svelte API.
+`view(component, props, options?)` accepts a props object, `Effect`, `Stream`, or `Fx` (including `RefSubject`). Component props determine the required shape; the source's errors and required services remain in the returned `Fx`. It mounts once and updates a Svelte store, preserving component state. Once the first render event is published, the ambient Scope keeps the component live even if a consumer takes only that event. Cancellation before the first output releases pending acquisition. Nested published islands remain owned by their rendering Scope even when a sibling prevents the parent from publishing. A finite props source leaves the component mounted until cleanup. `context`, `intro`, `outro`, `recover`, `idPrefix`, `csp`, and `transformError` forward to the corresponding Svelte API.
 
 Typed supplies the host through a native element ref. Svelte mounts at that ref and schedules its own commit. For a nested island, refs can run before Typed places the surrounding parent; `onMount` is not a guarantee that the parent is attached. The first Typed output describes the host, and subsequent props update the same component.
 
@@ -31,17 +34,24 @@ Typed supplies the host through a native element ref. Svelte mounts at that ref
 ## Server rendering and hydration
 
 ```ts
+import * as Layer from "effect/Layer";
+import { RandomValues } from "@typed/id/RandomValues";
 import { view } from "@typed/svelte";
 import { Fx } from "@typed/fx";
 import { HtmlRenderTemplate, renderToHtml, renderToHtmlString } from "@typed/template/Html";
 import { Effect } from "effect";
 
-const page = view(Counter, { label: "Count" }, { id: "counter" });
-const chunks = renderToHtml(page).pipe(Fx.provide(HtmlRenderTemplate));
+const page = view(Counter, { label: "Count" });
+const chunks = renderToHtml(page).pipe(
+  Fx.provide(Layer.merge(HtmlRenderTemplate, RandomValues.Default)),
+);
 
 // Collect a complete string when needed, including static generation.
 const body = await Effect.runPromise(
-  renderToHtmlString(page).pipe(Effect.provide(HtmlRenderTemplate), Effect.scoped),
+  renderToHtmlString(page).pipe(
+    Effect.provide(Layer.merge(HtmlRenderTemplate, RandomValues.Default)),
+    Effect.scoped,
+  ),
 );
 ```
 
@@ -49,7 +59,7 @@ Prefer `renderToHtml` when the response can consume chunks. The application obse
 
 The surrounding Typed template and Svelte host stream before the component is ready. Svelte's public server renderer returns a complete `body` and `head`, so the component body arrives together after its first props value and asynchronous rendering finish. Application service requirements and source errors stay in the Effect type. `onHead` is optional and receives application `<svelte:head>` output; omit it when the component has no head content.
 
-On the client, pass the same Typed template and its server root to `render`. Hydration is automatic. Typed creates an ordinary `div` host through its native template path. The host template has no child parts. The HTML backend includes Svelte's serialized body inside that host, and Svelte owns those children during hydration. Client and server need matching initial props, component structure, and the same required `id`. Supply nonempty, deterministic ids unique across the page; the id also defaults Svelte's server `idPrefix`.
+On the client, pass the same Typed template and its server root to `render`. Hydration is automatic. Typed creates an ordinary `div` host and a child range through its native template path. The HTML backend renders Svelte's serialized body into that range; the DOM backend hands its children to Svelte for mounting or hydration. Client and server need matching initial props and component structure. Host identity is generated automatically and restored from server markup during hydration; `options.id` remains an explicit override. Explicit ids must be nonempty and unique across the page; the host id also defaults Svelte's server `idPrefix`.
 
 `@typed/svelte` and `@typed/svelte/Typed.svelte` import in Node without `document` or a `.svelte` loader. The package publishes separate compiled client and server components selected through native package conditions. Application Svelte components use their normal Svelte compilation.
 
@@ -67,10 +77,10 @@ On the client, pass the same Typed template and its server root to `render`. Hyd
   </button>`;
 </script>
 
-<Typed view={content} />
+<Typed value={content} />
 ```
 
-`Typed` accepts any Typed `Renderable` as its `view`, including primitive values, templates, `Effect`, `Stream`, and `Fx`. Its automatically created `div` host has `display: contents`. The optional `id` prop defaults to Svelte's `$props.id()`, stable across SSR and hydration. Views without application services need no runtime. The optional `runtime` prop or nearest `provideRuntime` context supplies application services when needed. Runtime changes or view replacements close the previous rendering scope before starting the next.
+`Typed` accepts any Typed `Renderable` as its `value`, including primitive values, templates, `Effect`, `Stream`, and `Fx`. Its automatically created `div` host has `display: contents`. The optional `id` prop defaults to Svelte's `$props.id()`, stable across SSR and hydration. Views without application services need no runtime. The optional `runtime` prop or nearest `provideRuntime` context supplies application services when needed. Runtime changes or view replacements close the previous rendering scope before starting the next.
 
 Use Svelte's own APIs for SSR, static generation, and hydration:
 
@@ -86,7 +96,7 @@ const app = hydrate(App, { target, props: { count: 0 } });
 
 The component supplies `HtmlRenderTemplate` and Scope during native Svelte SSR, then supplies `DomRenderTemplate` through its Svelte attachment in the browser. It awaits Typed's HTML rendering. Each response closes its observation scope while leaving a supplied runtime owned by the caller. Svelte retains the server HTML at the opaque boundary, and Typed hydrates its original nodes. Client-only `mount` starts the live view normally. No manually prepared HTML or integration rendering helper is needed. The package compiles its asynchronous component, so consumers do not need to enable Svelte's experimental async compiler option. As with other asynchronous Svelte components, use `await render(...)` on the server.
 
-`onReady` fires after the first Typed output attaches; `onError` receives typed failures or renderer defects as an Effect `Cause`. Without `onError`, the host dispatches `typed:error`. Normal interruption is silent. Updating these callbacks or `stopPropagation` preserves the current Typed render; replacing `runtime` or `view` closes and replaces it. Component cleanup never calls `runtime.dispose()`.
+`onReady` fires after the first Typed output attaches; `onError` receives typed failures or renderer defects as an Effect `Cause`. Without `onError`, the host dispatches `typed:error`. Normal interruption is silent. Updating these callbacks or `stopPropagation` preserves the current Typed render; replacing `runtime` or `value` closes and replaces it. Component cleanup never calls `runtime.dispose()`.
 
 For an existing element, the lower-level `attachment(runtime, view, options?)` from `@typed/svelte/Attachment` works with Svelte's `{@attach}` syntax. The component is the usual choice when you want automatic hosting and SSR.
 
@@ -97,8 +107,8 @@ For an existing element, the lower-level `attachment(runtime, view, options?)` f
 - `fromReadable(store)` returns an `Fx` that subscribes when observed and unsubscribes on interruption.
 - These store conversions accept non-failing sources because Svelte stores have no error channel. `useSource` and `useAsyncData` expose failures and pending states through Typed's `AsyncData` model.
 - `provideRuntime`, `provideServices`, `useRuntime`, and `useService` use Svelte context and borrowed runtime facades. Reactive runtime stores propagate provider replacements.
-- `useSource`, `useAsyncData`, and `useRefSubject` own work for the Svelte component lifetime. Server rendering reads the provided `initial` snapshot; browser observation starts after mount.
-- `useRefSubject(ref, initial)` accepts failing refs, including hydrated state. Its native writable `set` and `update` methods return `Promise<Exit>` and use the RefSubject's serialized transactions. Read and write failures remain visible in `.state` when native bindings ignore those results. Runtime replacement and unmount interrupt pending writes.
+- `useSource`, `useAsyncData`, and `useRefSubject` own work for the Svelte component lifetime. Browser observation starts after mount; server rendering never starts source effects. `useSource` and `useAsyncData` render the provided `initial` snapshot.
+- `useRefSubject(ref, options?)` observes through `useSource` after mount and starts with `undefined` and `NoData`. Values and failures arrive through the normal RefSubject subscription; it does not inspect or execute the ref during component setup. Pass `{ initial: snapshot }` on both server and client when hydration needs an explicit first value; this also narrows the store value from `A | undefined` to `A`. Its `set` and `update` methods accept `A`, return `Promise<Exit>`, and publish after the RefSubject's serialized transaction settles. Read and write failures remain visible in `.state` when native bindings ignore those results. Runtime replacement and unmount interrupt pending writes.
 - `useNavigation`, `useLocation`, `useCurrentPath`, `useCurrentRoute`, `useRoute`, and `provideCurrentRoute` use Typed's actual Navigation, Matcher, decoded params, and structural CurrentRoute services.
 
 `useRoute(route, { currentRoute })` accepts a `CurrentRouteTree` or native Svelte readable store. Omission matches relative to the ambient mount and returns `None` outside it. An explicit tree replaces that mount and applies its prefix once; unmatched paths inside it return `None`, while paths outside it retain Typed's `RouteNotFound` failure. Updating the root store restarts observation with the new context. `provideCurrentRoute` continues to set the structural context inherited by descendants.

package/dist/Reactive.d.ts

@@ -4,7 +4,7 @@ import type * as Context from "effect/Context";
 import * as Effect from "effect/Effect";
 import * as Exit from "effect/Exit";
 import * as Scope from "effect/Scope";
-import { type Readable, type Writable } from "svelte/store";
+import { type Readable } from "svelte/store";
 import { type AsyncState } from "./AsyncData.js";
 import { type RuntimeSource } from "./Runtime.js";
 import { type Source } from "./Source.js";
@@ -30,15 +30,25 @@ export declare function useAsyncData<A, E, E2 = never, R = never, ER = never>(so
 /** Reads any Effect service using the same runtime, SSR, and failure contract. */
 export declare function useService<I, A, ER = never>(service: Context.Service<I, A>, options?: SourceOptions<A, never, I, ER>): AsyncState<A, ER>;
 /** A native writable whose transactional writes settle with typed Exit results. */
-export interface RefSubjectStore<A, E> extends Writable<A> {
+export interface RefSubjectStore<A, E, Initial = undefined> extends Readable<A | Initial> {
     readonly state: AsyncState<A, E>;
     readonly set: (value: A) => Promise<Exit.Exit<A, E>>;
     readonly update: (f: (value: A) => A) => Promise<Exit.Exit<A, E>>;
 }
+export interface RefSubjectOptions<A, E, R, ER = never> extends Omit<SourceOptions<A, E, R, ER>, "initial"> {
+    /** Overrides the first server/client snapshot, including for an uninitialized ref. */
+    readonly initial?: A;
+}
 /**
  * Observes any RefSubject, including hydrated refs with typed failures. Writes
  * use its serialized transactions; failures also reach `state` when a native
  * binding ignores the returned Exit. Unmount/runtime replacement cancels writes.
+ * The first subscription receives the optional initial value or `undefined`.
+ * Lazy initializers only start after mount; `initial` can seed matching SSR and
+ * hydration values without executing application effects during rendering.
  */
-export declare function useRefSubject<A, E = never, R = never, ER = never>(ref: RefSubject.RefSubject<A, E, R>, initial: A, options?: Omit<SourceOptions<A, E, R, ER>, "initial">): RefSubjectStore<A, E | ER>;
+export declare function useRefSubject<A, E = never, R = never, ER = never>(ref: RefSubject.RefSubject<A, E, R>, options: RefSubjectOptions<A, E, R, ER> & {
+    readonly initial: A;
+}): RefSubjectStore<A, E | ER, never>;
+export declare function useRefSubject<A, E = never, R = never, ER = never>(ref: RefSubject.RefSubject<A, E, R>, options?: RefSubjectOptions<A, E, R, ER>): RefSubjectStore<A, E | ER>;
 //# sourceMappingURL=Reactive.d.ts.map

package/dist/Reactive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Reactive.d.ts","sourceRoot":"","sources":["../src/Reactive.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Reactive.d.ts","sourceRoot":"","sources":["../src/Reactive.ts"],"names":[],"mappings":"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"}

package/dist/Reactive.js

@@ -109,17 +109,13 @@ export function useAsyncData(source, options = {}) {
 export function useService(service, options = {}) {
     return useSource(Effect.service(service), options);
 }
-/**
- * Observes any RefSubject, including hydrated refs with typed failures. Writes
- * use its serialized transactions; failures also reach `state` when a native
- * binding ignores the returned Exit. Unmount/runtime replacement cancels writes.
- */
-export function useRefSubject(ref, initial, options = {}) {
+export function useRefSubject(ref, options = {}) {
     const runtime = options.runtime
         ? asReadable(options.runtime)
         : useRuntime();
-    const observed = useSource(ref, { runtime, initial: AsyncData.success(initial) });
-    const values = writable(initial);
+    const initial = "initial" in options ? AsyncData.success(options.initial) : AsyncData.NoData;
+    const observed = useSource(ref, { runtime, initial });
+    const values = writable(Option.getOrUndefined(AsyncData.getSuccess(initial)));
     const result = writable(undefined);
     let writes = Scope.makeUnsafe("parallel");
     let active = false;

package/dist/Typed.client.js

@@ -27,7 +27,7 @@ export default function Typed($$anchor, $$props) {
 
 	const render = $.derived(() => {
 		const selected = $.get(selectedRuntime);
-		const current = $$props.view;
+		const current = $$props.value;
 
 		return (root) => attachment(selected, current, {
 			stopPropagation: false,
@@ -57,7 +57,7 @@ export default function Typed($$anchor, $$props) {
 	initialHtml;
 
 	var $$promises = $.run([
-		async () => initialHtml = await renderSnapshot($.get(selectedRuntime), $$props.view)
+		async () => initialHtml = await renderSnapshot($.get(selectedRuntime), $$props.value)
 	]);
 
 	var div = root_1();

package/dist/Typed.d.ts

@@ -6,7 +6,7 @@ import type { AttachmentOptions } from "./Attachment.js";
 /** Props for the Svelte component that embeds a Typed renderable. */
 export interface TypedProps<V extends Renderable.Any, ER = never> extends AttachmentOptions<Renderable.Error<V> | ER> {
     readonly runtime?: Runtime<Exclude<Exclude<Renderable.Services<V>, RenderTemplate>, Scope.Scope>, ER>;
-    readonly view: V;
+    readonly value: V;
     /** Optional host id; defaults to Svelte $props.id(), stable during SSR and hydration. */
     readonly id?: string;
 }

package/dist/Typed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typed.d.ts","sourceRoot":"","sources":["../src/Typed.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,KAAK,KAAK,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,qEAAqE;AACrE,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,UAAU,CAAC,GAAG,EAAE,EAAE,GAAG,KAAK,CAAE,SAAQ,iBAAiB,CACzF,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,CACzB;IACC,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CACxB,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,EACrE,EAAE,CACH,CAAC;IACF,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;IAEjB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"Typed.d.ts","sourceRoot":"","sources":["../src/Typed.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,KAAK,KAAK,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,qEAAqE;AACrE,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,UAAU,CAAC,GAAG,EAAE,EAAE,GAAG,KAAK,CAAE,SAAQ,iBAAiB,CACzF,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,CACzB;IACC,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CACxB,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,EACrE,EAAE,CACH,CAAC;IACF,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;IAElB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/Typed.server.js

@@ -10,7 +10,7 @@ export default function Typed($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
 		const componentId = $.props_id($$renderer);
 		var $$store_subs;
-		let { runtime, view, id, onError, onReady, stopPropagation } = $$props;
+		let { runtime, value, id, onError, onReady, stopPropagation } = $$props;
 		const inherited = useRuntime();
 
 		// $inherited subscribes to the runtime store and follows provider replacements.
@@ -22,7 +22,7 @@ export default function Typed($$renderer, $$props) {
 
 		const render = $.derived(() => {
 			const selected = selectedRuntime();
-			const current = view;
+			const current = value;
 
 			return (root) => attachment(selected, current, {
 				stopPropagation: false,
@@ -52,7 +52,7 @@ export default function Typed($$renderer, $$props) {
 		initialHtml;
 
 		var $$promises = $$renderer.run([
-			async () => initialHtml = await renderSnapshot(selectedRuntime(), view)
+			async () => initialHtml = await renderSnapshot(selectedRuntime(), value)
 		]);
 
 		$$renderer.push(`<div${$.attr('id', id ?? componentId)} style="display: contents">`);

package/dist/ViewOptions.d.ts

@@ -1,8 +1,8 @@
 import type { RootEventOptions } from "@typed/template/RootEvents";
 /** Svelte mount, hydration and SSR options for one island. */
 export interface ViewOptions {
-    /** Stable, nonempty host id, unique among islands in the rendered page. Use the same id on server and client. */
-    readonly id: string;
+    /** Optional host identity override. Generated per render and restored during hydration by default. */
+    readonly id?: string;
     /** Per-event bubbling policy at the automatic host. Inherits CurrentRootEvents when omitted. */
     readonly stopPropagation?: RootEventOptions;
     readonly context?: Map<any, any>;

package/dist/ViewOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewOptions.d.ts","sourceRoot":"","sources":["../src/ViewOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,8DAA8D;AAC9D,MAAM,WAAW,WAAW;IAC1B,iHAAiH;IACjH,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,gGAAgG;IAChG,QAAQ,CAAC,eAAe,CAAC,EAAE,gBAAgB,CAAC;IAC5C,QAAQ,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC;IACtD,gFAAgF;IAChF,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,GAAG,CAAC,EAAE;QACb,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;KACzB,CAAC;CACH"}
+{"version":3,"file":"ViewOptions.d.ts","sourceRoot":"","sources":["../src/ViewOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,8DAA8D;AAC9D,MAAM,WAAW,WAAW;IAC1B,sGAAsG;IACtG,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IACrB,gGAAgG;IAChG,QAAQ,CAAC,eAAe,CAAC,EAAE,gBAAgB,CAAC;IAC5C,QAAQ,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC;IACtD,gFAAgF;IAChF,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,GAAG,CAAC,EAAE;QACb,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;KACzB,CAAC;CACH"}

package/dist/internal/Dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dom.d.ts","sourceRoot":"","sources":["../../src/internal/Dom.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,QAAQ,MAAM,iBAAiB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AACtC,OAAO,KAAK,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAqD,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAI3F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,eAAO,MAAM,cAAc,GAAwB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,yOAwDnE,CAAC"}
+{"version":3,"file":"Dom.d.ts","sourceRoot":"","sources":["../../src/internal/Dom.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,QAAQ,MAAM,iBAAiB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AACtC,OAAO,KAAK,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAqD,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAI3F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,eAAO,MAAM,cAAc,GAAwB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,yOAqDnE,CAAC"}

package/dist/internal/Dom.js

@@ -33,12 +33,9 @@ export const mountComponent = Effect.fn(function* (element, component, props, op
             context,
             intro: options.intro,
             transformError: options.transformError,
+            recover: options.recover,
         };
-        yield* Effect.sync(() => {
-            instance = hydrate
-                ? hydrateComponent(Bridge, { ...common, recover: options.recover })
-                : mount(Bridge, common);
-        });
+        instance = hydrate ? hydrateComponent(Bridge, common) : mount(Bridge, common);
         // Publication follows native Typed ref timing; Svelte schedules its own commit.
         yield* Deferred.succeed(ready, undefined);
         yield* Effect.promise(tick).pipe(Effect.onExit((exit) => Deferred.done(committed, exit)));

package/dist/view.d.ts

@@ -1,3 +1,4 @@
+import type { RandomValues } from "@typed/id/RandomValues";
 import * as Scope from "effect/Scope";
 import * as Fx from "@typed/fx/Fx";
 import { type RenderEvent } from "@typed/template/RenderEvent";
@@ -7,5 +8,5 @@ import { type Source } from "./Source.js";
 import type { ViewOptions } from "./ViewOptions.js";
 export type { ViewOptions } from "./ViewOptions.js";
 /** A native Typed template that mounts or serializes a Svelte component. */
-export declare function view<Props extends Record<string, any>, E = never, R = never>(component: Component<Props>, props: Source<NoInfer<Props>, E, R>, options: ViewOptions): Fx.Fx<RenderEvent, E, R | Scope.Scope | RenderTemplate>;
+export declare function view<Props extends Record<string, any>, E = never, R = never>(component: Component<Props>, props: Source<NoInfer<Props>, E, R>, options?: ViewOptions): Fx.Fx<RenderEvent, E, R | Scope.Scope | RenderTemplate | RandomValues>;
 //# sourceMappingURL=view.d.ts.map

package/dist/view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../src/view.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AACtC,OAAO,KAAK,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAQ,KAAK,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,4EAA4E;AAC5E,wBAAgB,IAAI,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,GAAG,KAAK,EAC1E,SAAS,EAAE,SAAS,CAAC,KAAK,CAAC,EAC3B,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACnC,OAAO,EAAE,WAAW,GACnB,EAAE,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,KAAK,GAAG,cAAc,CAAC,CAgEzD"}
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../src/view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAO3D,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AACtC,OAAO,KAAK,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAQ,KAAK,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,4EAA4E;AAC5E,wBAAgB,IAAI,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,GAAG,KAAK,EAC1E,SAAS,EAAE,SAAS,CAAC,KAAK,CAAC,EAC3B,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACnC,OAAO,GAAE,WAAgB,GACxB,EAAE,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,KAAK,GAAG,cAAc,GAAG,YAAY,CAAC,CAqExE"}

package/dist/view.js

@@ -7,15 +7,14 @@ import * as Option from "effect/Option";
 import * as Scope from "effect/Scope";
 import * as Fx from "@typed/fx/Fx";
 import { DomRenderEvent, HtmlRenderEvent, isDomRenderEvent, } from "@typed/template/RenderEvent";
+import { rootIdentity } from "@typed/template/RootIdentity";
 import { HydrateContext } from "@typed/template/HydrateContext";
 import { html } from "@typed/template/RenderTemplate";
 import { toFx } from "./Source.js";
 /** A native Typed template that mounts or serializes a Svelte component. */
-export function view(component, props, options) {
+export function view(component, props, options = {}) {
     return Fx.gen(function* () {
-        if (typeof options?.id !== "string" || options.id.trim() === "") {
-            throw new TypeError("Svelte view requires a nonempty id, unique within the rendered page");
-        }
+        const identity = yield* rootIdentity(options.id);
         const source = toFx(props);
         const scope = yield* Scope.fork(yield* Effect.scope);
         const ready = yield* Deferred.make();
@@ -25,9 +24,10 @@ export function view(component, props, options) {
             target = element;
         };
         const content = Fx.gen(function* () {
+            const settings = { ...options, id: yield* identity.id };
             if (target === undefined) {
                 const { render } = yield* Effect.promise(() => import("./internal/Html.js"));
-                return Fx.fromEffect(render(component, source, options)).pipe(Fx.map((html) => HtmlRenderEvent(html, true)));
+                return Fx.fromEffect(render(component, source, settings)).pipe(Fx.map((html) => HtmlRenderEvent(html, true)));
             }
             const hydration = yield* Effect.serviceOption(HydrateContext);
             const hydrate = Option.isSome(hydration) && hydration.value.where._tag === "hole";
@@ -37,10 +37,17 @@ export function view(component, props, options) {
                 hydration.value.where.endComment.remove();
             }
             const element = target;
-            const mount = Effect.promise(() => import("./internal/Dom.js")).pipe(Effect.flatMap(({ mountComponent }) => Layer.launch(mountComponent(element, component, source, options, ready, hydrate))), Effect.onExit((exit) => Deferred.done(ready, exit)));
+            const mount = Effect.promise(() => import("./internal/Dom.js")).pipe(Effect.flatMap(({ mountComponent }) => Layer.launch(mountComponent(element, component, source, settings, ready, hydrate))), Effect.onExit((exit) => Deferred.done(ready, exit)));
             return Fx.fromEffect(mount).pipe(Fx.prepend(DomRenderEvent([])));
         });
-        return html `<div id=${options.id} style="display: contents" ref=${ref}>${content}</div>`.pipe(Fx.provideService(Scope.Scope, scope), Fx.concatMap((event) => isDomRenderEvent(event)
+        return html `<div
+      ...${{ ref: identity.ref }}
+      id=${identity.id}
+      style="display: contents"
+      ref=${ref}
+    >
+      ${content}
+    </div>`.pipe(Fx.provideService(Scope.Scope, scope), Fx.concatMap((event) => isDomRenderEvent(event)
             ? Fx.fromEffect(Deferred.await(ready)).pipe(Fx.map(() => {
                 published = true;
                 return event;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@typed/svelte",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.8",
   "description": "Bidirectional Svelte integration for Typed templates.",
-  "homepage": "https://github.com/TylorS/typed-smol/tree/main/packages/svelte#readme",
-  "bugs": "https://github.com/TylorS/typed-smol/issues",
+  "homepage": "https://github.com/TylorS/typed/tree/development/packages/svelte#readme",
+  "bugs": "https://github.com/TylorS/typed/issues",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/TylorS/typed-smol.git",
+    "url": "git+https://github.com/TylorS/typed.git",
     "directory": "packages/svelte"
   },
   "files": [
@@ -66,18 +66,19 @@
     "access": "public"
   },
   "dependencies": {
-    "@typed/async-data": "1.0.0-beta.7",
-    "@typed/fx": "2.0.0-beta.7",
-    "@typed/navigation": "1.0.0-beta.7",
-    "@typed/router": "1.0.0-beta.7",
-    "@typed/template": "1.0.0-beta.7",
+    "@typed/async-data": "1.0.0-beta.8",
+    "@typed/fx": "2.0.0-beta.8",
+    "@typed/id": "1.0.0-beta.8",
+    "@typed/navigation": "1.0.0-beta.8",
+    "@typed/router": "1.0.0-beta.8",
+    "@typed/template": "1.0.0-beta.8",
     "effect": "4.0.0-rc.112"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "7.3.0",
     "@typescript/native": "npm:typescript@7.0.2",
     "@vitest/browser-playwright": "5.0.0",
-    "playwright": "^1.62.1",
+    "playwright": "^1.63.0",
     "svelte": "5.57.0",
     "svelte-check": "4.7.6",
     "typescript": "npm:@typescript/typescript6@6.0.2",