browser-runtime-svelte 0.0.7 → 0.0.9

package/README.md

@@ -5,7 +5,7 @@ Svelte 5 compiler and renderer plugin for [`browser-module-runtime`](https://www
 ## Install
 
 ```sh
-npm install browser-module-runtime@0.0.1 browser-runtime-svelte@0.0.1 svelte@5
+npm install browser-module-runtime@0.0.9 browser-runtime-svelte@0.0.9 svelte@5
 ```
 
 ## Usage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-runtime-svelte",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "exports": {
     ".": {
@@ -22,7 +22,7 @@
     "node": ">=20"
   },
   "peerDependencies": {
-    "browser-module-runtime": "0.0.7",
+    "browser-module-runtime": "0.0.9",
     "svelte": "^5.0.0"
   },
   "description": "Svelte compiler and renderer adapter for browser-module-runtime.",

package/src/index.d.ts

@@ -1,7 +1,8 @@
 import type {RuntimePlugin} from 'browser-module-runtime';
 export interface SvelteAdapterOptions {
  compiler?: {compile(source:string,options?:Record<string,unknown>):unknown;compileModule?(source:string,options?:Record<string,unknown>):unknown};
- renderer?: {mount(component:unknown,options:{target:Element;props:Record<string,unknown>}):unknown;unmount(instance:unknown):unknown};
+ reactivity?: {SvelteMap:new (entries?:Iterable<readonly [string,unknown]>)=>Map<string,unknown>};
+ renderer?: {tick?():Promise<void>;mount(component:unknown,options:{target:Element;props:Record<string,unknown>}):unknown;unmount(instance:unknown):unknown};
  version?:string;provider?:string;compileOptions?:Record<string,unknown>;
 }
 export declare function svelte(options?:SvelteAdapterOptions):RuntimePlugin;

package/src/index.js

@@ -1,10 +1,17 @@
+function snapshotProps(next){
+  if(next===null||typeof next!=='object'||Array.isArray(next)||
+    (Object.getPrototypeOf(next)!==Object.prototype&&Object.getPrototypeOf(next)!==null))
+    throw new TypeError('updateProps expects a plain object of next props');
+  return {...next};
+}
 import {normalizeInlineSvelte} from './inline-source.js';
 export {normalizeInlineSvelte} from './inline-source.js';
 
 /** Uses the official Svelte 5 compiler API and mount/unmount runtime. */
-export function svelte({compiler,renderer,version='5',provider='esm.sh',compileOptions={}}={}) {
+export function svelte({compiler,renderer,reactivity,version='5',provider='esm.sh',compileOptions={}}={}) {
   let c=compiler;
   let runtime=renderer;
+  let reactiveNamespace=reactivity;
   let ownerRuntime;
   const packageEntries=/^\d+\.\d+\.\d+(?:[-+][0-9A-Za-z.-]+)?$/.test(String(version))
     ? {svelte:{provider,version:String(version)}} : {};
@@ -27,8 +34,31 @@ export function svelte({compiler,renderer,version='5',provider='esm.sh',compileO
       name:'svelte',types:['svelte','svelte-module'],
       async mount({component,target,props}){
         runtime ||= await (ownerRuntime ? ownerRuntime.import('svelte') : import('svelte'));
-        const instance=runtime.mount(component,{target,props});
-        return {dispose:()=>runtime.unmount(instance)};
+        reactiveNamespace ||= await (ownerRuntime ? ownerRuntime.import('svelte/reactivity') : import('svelte/reactivity'));
+        const MapType=reactiveNamespace.SvelteMap;
+        if(typeof MapType!=='function')throw new TypeError('Svelte 5 renderer requires SvelteMap from svelte/reactivity');
+        const data=new MapType(Object.entries(snapshotProps(props)));
+        const state=new Proxy(Object.create(null),{
+          get(_target,key){return data.get(key);},
+          has(_target,key){return data.has(key);},
+          ownKeys(){return [...data.keys()];},
+          getOwnPropertyDescriptor(_target,key){
+            if(!data.has(key))return undefined;
+            return {configurable:true,enumerable:true,get(){return data.get(key);}};
+          }
+        });
+        const instance=runtime.mount(component,{target,props:state});
+        let closed=false;
+        return {
+          async updateProps(next){
+            if(closed)throw new Error('Svelte mount has been disposed');
+            const incoming=snapshotProps(next);
+            for(const key of [...data.keys()])if(!Object.hasOwn(incoming,key))data.delete(key);
+            for(const [key,value] of Object.entries(incoming))data.set(key,value);
+            await runtime.tick?.();
+          },
+          dispose(){if(!closed){closed=true;return runtime.unmount(instance);}}
+        };
       }
     }]
   };