svelte-tiler 0.3.0 → 0.4.0

package/dist/context.d.ts

@@ -1,3 +1,4 @@
+import { SvelteMap } from 'svelte/reactivity';
 import { DndContext } from './shared/dnd.svelte.ts';
 import type { Tile, TileComponent, TileInsertData, Tiles, TileType } from './model.js';
 export declare const getTilerContext: () => TilerContext, setTilerContext: (context: TilerContext) => TilerContext;
@@ -10,40 +11,20 @@ export interface TileDefinition<T extends TileType> {
 export type TileDefinitions = {
     [T in TileType]: TileDefinition<T>;
 };
-export type TileEffects = {
-    [T in TileType]?: (tile: Tiles[T]) => void | (() => void);
-};
 export interface TilerContextOptions {
     definitions: TileDefinitions;
     dnd?: DndContext<Tile>;
-    effects?: TileEffects;
 }
 export declare class TilerContext {
     protected definitions: TileDefinitions;
-    protected effects: TileEffects;
     protected updateRootFn: ((tile: Tile) => void) | undefined;
     protected registry: FinalizationRegistry<string>;
-    protected tiles: Map<string, WeakRef<Tile>>;
+    protected tiles: SvelteMap<string, WeakRef<Tile>>;
     protected parents: WeakMap<Tile, Tile>;
     readonly dnd: DndContext<Tile>;
     constructor(options: TilerContextOptions);
-    registerTile(tile: Tile, parent: Tile | ((tile: Tile) => void)): void;
-    getTileEffect(tile: Tile): ((tile: import("./model.js").TileBase<"leaf"> & {
-        name: string;
-    }) => void | (() => void)) | ((tile: import("./model.js").TileBase<"split"> & {
-        constraints: Array<import("./shared/constraints.ts").Constraint[]>;
-        weights: number[];
-        direction: import("./shared/spatial.ts").Direction;
-        resizer?: string;
-        gapPx: number;
-    }) => void | (() => void)) | ((tile: import("./model.js").TileBase<"tabs"> & {
-        titles: string[];
-        selectedTab: number;
-        headersDirection: import("./tiles/tabs.svelte.ts").HeadersDirection;
-        actions?: string;
-        tabHeader?: string;
-        empty?: string;
-    }) => void | (() => void)) | undefined;
+    registerTile(tile: Tile, parent: Tile | ((tile: Tile) => void)): (() => void) | void;
+    getTileById(tileId: string): Tile | undefined;
     getTileComponent(tile: Tile): TileComponent<"leaf"> | TileComponent<"split"> | TileComponent<"tabs">;
     replace(tile: Tile | undefined, replace: Tile): void;
     replaceTile(tileId: string | undefined, replace: Tile): void;
@@ -53,5 +34,5 @@ export declare class TilerContext {
     removeChildFromTile(tileId: string, index: number): void;
     remove(tile: Tile): void;
     removeTile(tileId: string): void;
-    protected getTileById(tileId: string): Tile;
+    protected getTileByIdOrThrow(tileId: string): Tile;
 }

package/dist/context.js

@@ -1,20 +1,19 @@
 import { createContext } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
 import { DndContext } from "./shared/dnd.svelte.js";
 export const [getTilerContext, setTilerContext] = createContext();
 export class TilerContext {
     definitions;
-    effects;
     updateRootFn;
     registry = new FinalizationRegistry((id) => {
         this.tiles.delete(id);
     });
-    tiles = new Map();
+    tiles = new SvelteMap();
     parents = new WeakMap();
     dnd;
     constructor(options) {
         this.definitions = options.definitions;
         this.dnd = options.dnd ?? new DndContext();
-        this.effects = options.effects ?? {};
     }
     registerTile(tile, parent) {
         this.tiles.set(tile.id, new WeakRef(tile));
@@ -27,8 +26,8 @@ export class TilerContext {
             this.parents.set(tile, parent);
         }
     }
-    getTileEffect(tile) {
-        return this.effects[tile.type];
+    getTileById(tileId) {
+        return this.tiles.get(tileId)?.deref();
     }
     getTileComponent(tile) {
         return this.definitions[tile.type].default;
@@ -48,14 +47,14 @@ export class TilerContext {
         this.updateRootFn?.(replace);
     }
     replaceTile(tileId, replace) {
-        const tile = tileId && this.getTileById(tileId);
+        const tile = tileId && this.getTileByIdOrThrow(tileId);
         this.replace(tile || undefined, replace);
     }
     insertInto(tile, index, data) {
         this.definitions[tile.type].onInsert(this, tile, index, data);
     }
     insertIntoTile(tileId, type, index, data) {
-        const tile = this.getTileById(tileId);
+        const tile = this.getTileByIdOrThrow(tileId);
         if (tile.type !== type) {
             throw new Error(`Tile type mismatch: expected "${type}", but got "${tile.type}"`);
         }
@@ -65,7 +64,7 @@ export class TilerContext {
         this.definitions[tile.type].onRemoveChild(this, tile, index);
     }
     removeChildFromTile(tileId, index) {
-        this.removeChildFrom(this.getTileById(tileId), index);
+        this.removeChildFrom(this.getTileByIdOrThrow(tileId), index);
     }
     remove(tile) {
         const parent = this.parents.get(tile);
@@ -80,9 +79,9 @@ export class TilerContext {
         this.removeChildFrom(parent, index);
     }
     removeTile(tileId) {
-        this.remove(this.getTileById(tileId));
+        this.remove(this.getTileByIdOrThrow(tileId));
     }
-    getTileById(tileId) {
+    getTileByIdOrThrow(tileId) {
         const tile = this.tiles.get(tileId)?.deref();
         if (tile === undefined) {
             throw new Error(`Unable to find tile with "${tileId}" id`);

package/dist/debug.svelte

@@ -1,8 +1,5 @@
-<script lang="ts">
-  import type { Tile } from './model.js';
-  import Self from './debug.svelte';
-
-  const { tile, level = 0 }: { tile: Tile; level?: number } = $props();
+<script lang="ts">import Self from "./debug.svelte";
+const { tile, level = 0 } = $props();
 </script>
 
 <div style="padding-left: {level * 12}px;">{tile.type} ({tile.id})</div>

package/dist/index.d.ts

@@ -4,3 +4,4 @@ export * from './dnd.ts';
 export { default as Panel } from './panel.svelte';
 export { default as Tiler } from './tiler.svelte';
 export { default as Debug } from './debug.svelte';
+export { default as Provider } from './provider.svelte';

package/dist/index.js

@@ -4,3 +4,4 @@ export * from "./dnd.js";
 export { default as Panel } from './panel.svelte';
 export { default as Tiler } from './tiler.svelte';
 export { default as Debug } from './debug.svelte';
+export { default as Provider } from './provider.svelte';

package/dist/panel.svelte

@@ -1,8 +1,5 @@
-<script lang="ts">
-  import Render from './render.svelte';
-  import type { Tile } from './model.js';
-
-  let { layout = $bindable() }: { layout: Tile | undefined } = $props();
+<script lang="ts">import Render from "./render.svelte";
+let { layout = $bindable() } = $props();
 </script>
 
 {#if layout}

package/dist/provider.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">const {
+  setContext,
+  children
+} = $props();
+setContext();
+</script>
+
+{@render children()}

package/dist/provider.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    setContext: () => void;
+    children: Snippet;
+};
+declare const Provider: import("svelte").Component<$$ComponentProps, {}, "">;
+type Provider = ReturnType<typeof Provider>;
+export default Provider;

package/dist/render.svelte

@@ -1,25 +1,13 @@
-<script lang="ts">
-  import { getTilerContext } from './context.js';
-  import type { Tile } from './model.js';
-  import Self from './render.svelte';
-
-  let {
-    tile = $bindable(),
-    parent = $bindable(),
-    index,
-  }: {
-    tile: Tile;
-    parent: Tile | undefined;
-    index: number;
-  } = $props();
-
-  const ctx = getTilerContext();
-
-  $effect(() => ctx.registerTile(tile, parent ?? ((t) => (parent = t))));
-
-  $effect(() => ctx.getTileEffect(tile)?.(tile as never));
-
-  const TileComponent = $derived(ctx.getTileComponent(tile));
+<script lang="ts">import { getTilerContext } from "./context.js";
+import Self from "./render.svelte";
+let {
+  tile = $bindable(),
+  parent = $bindable(),
+  index
+} = $props();
+const ctx = getTilerContext();
+$effect(() => ctx.registerTile(tile, parent ?? ((t) => parent = t)));
+const TileComponent = $derived(ctx.getTileComponent(tile));
 </script>
 
 {#snippet child(index: number)}

package/dist/tiler.svelte

@@ -1,18 +1,13 @@
-<script lang="ts">
-  import {
-    setTilerContext,
-    TilerContext,
-    type TilerContextOptions,
-  } from './context.js';
-  import type { Tile } from './model.js';
-  import Panel from './panel.svelte';
-
-  let {
-    layout = $bindable(),
-    ...rest
-  }: { layout: Tile | undefined } & TilerContextOptions = $props();
-
-  setTilerContext(new TilerContext(rest));
+<script lang="ts">import {
+  setTilerContext,
+  TilerContext
+} from "./context.js";
+import Panel from "./panel.svelte";
+let {
+  layout = $bindable(),
+  ...rest
+} = $props();
+setTilerContext(new TilerContext(rest));
 </script>
 
 <Panel bind:layout />

package/dist/tiles/leaf.svelte

@@ -1,45 +1,24 @@
-<script lang="ts" module>
-  import { createContext, type Snippet } from 'svelte';
-
-  import type { Registry } from '../shared/registry.js';
-  import type { Tile, TileProps, Tiles } from '../model.js';
-
-  declare module '../model.js' {
-    interface TileRegistry {
-      leaf: {
-        name: string;
-      };
-    }
-  }
-
-  type LeafContext<N extends string = string> = Registry<
-    N,
-    Snippet<[Tiles['leaf'], number, Tile | undefined]> | undefined
-  >;
-
-  const [getContext, setContext] = createContext<LeafContext>();
-
-  export function setup<N extends string>(leafs: LeafContext<N>) {
-    setContext(leafs);
-    return (name: N): Tiles['leaf'] => ({
-      id: crypto.randomUUID(),
-      type: 'leaf',
-      name,
-      children: [],
-    });
-  }
-
-  export function onRemoveChild() {}
-
-  export function onClear() {}
-
-  export function onInsert() {}
+<script lang="ts" module>import { createContext } from "svelte";
+const [getContext, setContext] = createContext();
+export function setup(leafs) {
+  setContext(leafs);
+  return (name) => ({
+    id: crypto.randomUUID(),
+    type: "leaf",
+    name,
+    children: []
+  });
+}
+export function onRemoveChild() {
+}
+export function onClear() {
+}
+export function onInsert() {
+}
 </script>
 
-<script lang="ts">
-  const leafCtx = getContext();
-
-  let { tile = $bindable(), index, parent }: TileProps<'leaf'> = $props();
+<script lang="ts">const leafCtx = getContext();
+let { tile = $bindable(), index, parent } = $props();
 </script>
 
 {@render leafCtx.get(tile.name)?.(tile, index, parent)}