browser-runtime-svelte 0.0.0-stage → 0.0.2

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 @@
+export * from './src/index.js';

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.2",
+  "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.2",
+    "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,9 @@
+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};
+ version?:string;provider?:string;compileOptions?:Record<string,unknown>;
+}
+export declare function svelte(options?:SvelteAdapterOptions):RuntimePlugin;
+/** Convert HTML-safe <$script> tags in inline Svelte source; preserves positions. */
+export declare function normalizeInlineSvelte(source:string):string;

package/src/index.js

@@ -0,0 +1,35 @@
+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={}}={}) {
+  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,
+    html:{normalizeInlineSource:normalizeInlineSvelte},
+    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)};
+      }
+    }]
+  };
+}

package/src/inline-source.js

@@ -0,0 +1,76 @@
+/** Normalize HTML-safe Svelte <$script> delimiters without altering normal Svelte source.
+ * Replacement is same-width (the '$' becomes a space), preserving source positions.
+ * Only call for inline HTML declarations, never for external files or runtime.define().
+ */
+function skipString(source, position) {
+  const quote = source[position];
+  let i = position + 1;
+  for (; i < source.length; i++) {
+    if (source[i] === '\\') { i++; continue; }
+    if (source[i] === quote) return i + 1;
+  }
+  return i;
+}
+function skipJsToken(source, i) {
+  if (source[i] === '"' || source[i] === "'" || source[i] === '`') return skipString(source, i);
+  if (source.startsWith('//', i)) { const end = source.indexOf('\n', i + 2); return end < 0 ? source.length : end; }
+  if (source.startsWith('/*', i)) { const end = source.indexOf('*/', i + 2); return end < 0 ? source.length : end + 2; }
+  return i;
+}
+function tagEnd(source, start) {
+  let i = start;
+  while (i < source.length) {
+    const skipped = skipJsToken(source, i);
+    if (skipped !== i) { i = skipped; continue; }
+    if (source[i] === '>') return i + 1;
+    i++;
+  }
+  throw new SyntaxError('Unclosed <$script> opening tag in inline Svelte source');
+}
+export function normalizeInlineSvelte(source) {
+  if (typeof source !== 'string') throw new TypeError('Inline Svelte source must be a string');
+  let result = '';
+  let cursor = 0;
+  let i = 0;
+  while (i < source.length) {
+    if (source.startsWith('<!--', i)) { const end = source.indexOf('-->', i + 4); i = end < 0 ? source.length : end + 3; continue; }
+    // An HTML tag's attribute string must not be mistaken for a script delimiter.
+    if (source.startsWith('<style', i) && /[\s>]/.test(source[i + 6] || '>')) {
+      const end = source.indexOf('</style>', tagEnd(source, i));
+      i = end < 0 ? source.length : end + '</style>'.length; continue;
+    }
+    if (source.startsWith('<$script', i) && /[\s>]/.test(source[i + 8] || '>')) {
+      const openingEnd = tagEnd(source, i + 8);
+      let closing = openingEnd;
+      while (closing < source.length) {
+        const skipped = skipJsToken(source, closing);
+        if (skipped !== closing) { closing = skipped; continue; }
+        if (source.startsWith('</$script', closing) && /[\s>]/.test(source[closing + 9] || '>')) break;
+        closing++;
+      }
+      if (closing >= source.length) throw new SyntaxError('Missing </$script> closing tag in inline Svelte source');
+      const closingEnd = tagEnd(source, closing + 9);
+      result += source.slice(cursor, i) + '<script ' + source.slice(i + 8, closing) + '</script ' + source.slice(closing + 9, closingEnd);
+      i = closingEnd;
+      cursor = i;
+      continue;
+    }
+    if (source[i] === '<') {
+      const maybeTag = /^<\/?[A-Za-z][\w:-]*/.exec(source.slice(i));
+      if (maybeTag) { i = tagEnd(source, i + maybeTag[0].length); continue; }
+    }
+    if (source[i] === '{') {
+      let depth = 1; let j = i + 1;
+      while (j < source.length && depth > 0) {
+        const skipped = skipJsToken(source, j);
+        if (skipped !== j) { j = skipped; continue; }
+        if (source[j] === '{') depth++;
+        if (source[j] === '}') depth--;
+        j++;
+      }
+      i = j; continue;
+    }
+    i++;
+  }
+  return result + source.slice(cursor);
+}