browser-runtime-svelte 0.0.0-stage → 0.0.1

package/README.md

@@ -1,3 +1,26 @@
-# Temporary Holding Version
+# browser-runtime-svelte
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Svelte 5 compiler and renderer plugin for [`browser-module-runtime`](https://www.npmjs.com/package/browser-module-runtime).
+
+## Install
+
+```sh
+npm install browser-module-runtime@0.0.1 browser-runtime-svelte@0.0.1 svelte@5
+```
+
+## Usage
+
+```js
+import {createRuntime} from 'browser-module-runtime';
+import {svelte} from 'browser-runtime-svelte';
+
+const runtime = createRuntime({plugins:[svelte({version:'5.39.0'})]});
+runtime.define('/Counter.svelte', `<script>let count = $state(0);</script>
+  <button onclick={() => count++}>Count: {count}</button>`, {type:'svelte'});
+const handle = await runtime.mount({module:'/Counter.svelte',target:'#app'});
+// Later: await handle.dispose(); await runtime.dispose();
+```
+
+The adapter uses `svelte/compiler` and `svelte` runtime mounting. Generated stylesheet assets are registered and cleaned up with the mount. An exact `version` contributes a matching `svelte` package root to the runtime linker so compiled `svelte/internal/*` imports resolve consistently. Real browser CDN operation depends on the selected provider serving that version.
+
+For HTML declarations of complete `.svelte` files, prefer `type="svelte"` with `data-src`, since nested `<script>` text cannot safely be embedded in an outer HTML script element.

package/index.d.ts

@@ -0,0 +1,2 @@
+import type {RuntimePlugin} from 'browser-module-runtime';
+export declare function svelte(options?:Record<string,unknown>):RuntimePlugin;

package/package.json

@@ -1,6 +1,41 @@
 {
   "name": "browser-runtime-svelte",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.1",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./src/index.js"
+    }
+  },
+  "files": [
+    "src",
+    "index.d.ts",
+    "README.md"
+  ],
+  "peerDependenciesMeta": {
+    "svelte": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "peerDependencies": {
+    "browser-module-runtime": "0.0.1",
+    "svelte": "^5.0.0"
+  },
+  "description": "Svelte compiler and renderer adapter for browser-module-runtime.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "browser",
+    "esm",
+    "runtime",
+    "modules",
+    "compiler",
+    "adapter",
+    "svelte"
+  ]
+}

package/src/index.d.ts

@@ -0,0 +1 @@
+export * from '../index.js';

package/src/index.js

@@ -0,0 +1,31 @@
+/** Uses the official Svelte 5 compiler API and mount/unmount runtime. */
+export function svelte({compiler,renderer,version='5',provider='esm.sh',compileOptions={}}={}) {
+  let c=compiler;
+  let runtime=renderer;
+  let ownerRuntime;
+  const packageEntries=/^\d+\.\d+\.\d+(?:[-+][0-9A-Za-z.-]+)?$/.test(String(version))
+    ? {svelte:{provider,version:String(version)}} : {};
+  return {
+    name:'svelte',version:String(version),packageEntries,
+    configure({runtime}){ownerRuntime=runtime;},
+    compilers:[{
+      types:['svelte','svelte-module'],extensions:['.svelte'],
+      async compile(source,{id,type}) {
+        c ||= await (ownerRuntime ? ownerRuntime.import('svelte/compiler') : import('svelte/compiler'));
+        const options={filename:id,generate:'client',css:'external',...compileOptions};
+        const result=type==='svelte-module'&&typeof c.compileModule==='function'
+          ? await c.compileModule(source,options)
+          : await c.compile(source,options);
+        return {code:result.js.code,map:result.js.map&&String(result.js.map),assets:result.css?.code?[{type:'css',id:`${id}:svelte-css`,content:result.css.code}]:[],diagnostics:result.warnings||[]};
+      }
+    }],
+    renderers:[{
+      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)};
+      }
+    }]
+  };
+}