browser-runtime-vue 0.0.0-stage → 0.0.1

package/README.md

@@ -1,3 +1,25 @@
-# Temporary Holding Version
+# browser-runtime-vue
 
-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.
+Vue 3 SFC compilation and rendering adapter for `browser-module-runtime`.
+
+```js
+import {createRuntime} from 'browser-module-runtime';
+import {vue} from 'browser-runtime-vue';
+
+const runtime=createRuntime({plugins:[vue({version:'3.5.18'})]});
+runtime.define('/Counter.vue',`<script setup>
+import {ref} from 'vue';
+const count=ref(0);
+</script>
+<template><button @click="count++">Count: {{count}}</button></template>
+<style scoped>button { color: royalblue }</style>`,{type:'vue'});
+const mount=await runtime.mount({module:'/Counter.vue',target:'#app'});
+await mount.updateProps({initial:5});
+await mount.dispose();
+```
+
+The adapter loads `vue/compiler-sfc` lazily through the owning runtime's package resolver. Both compiler and renderer follow the same version pin. It supports normal JS `<script>`, `<script setup>`, `<template>`, ordinary and scoped CSS, and native reactive `updateProps()`. Stylesheet assets use the generic runtime's reference-counted style manager.
+
+**Declarative HTML:** `<script type="vue" module="/Counter.vue">` accepts `<$script setup> ... </$script>` to avoid premature HTML parser termination; `<runtime-render>` and `custom-element="my-counter"` use the existing generic controller. External `.vue` and `runtime.define()` source use regular `<script>`.
+
+Current limitations: TypeScript/preprocessor SFC blocks, CSS Modules, external `src` blocks, and Shadow DOM integration are not included in this first adapter. Vue CSS `v-bind()` and associated compiler options have not been browser-verified. CDN browser tests require network access and the package version to be published.

package/index.d.ts

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

package/package.json

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

package/src/index.d.ts

@@ -0,0 +1,13 @@
+import type {RuntimePlugin} from 'browser-module-runtime';
+export interface VueAdapterOptions {
+  compiler?: {parse(source:string,options?:Record<string,unknown>):any;compileScript(descriptor:any,options?:Record<string,unknown>):any;compileTemplate(options?:Record<string,unknown>):any;compileStyle(options?:Record<string,unknown>):any};
+  renderer?: {createApp(component:unknown):{mount(target:Element):unknown;unmount():unknown};h(component:unknown,props:Record<string,unknown>):unknown;reactive<T extends object>(value:T):T};
+  version?:string;
+  provider?:string;
+  scriptOptions?:Record<string,unknown>;
+  templateOptions?:Record<string,unknown>;
+  styleOptions?:Record<string,unknown>;
+}
+export declare function vue(options?:VueAdapterOptions):RuntimePlugin;
+export declare function normalizeInlineVue(source:string):string;
+export declare function compileVueSfc(compiler:NonNullable<VueAdapterOptions['compiler']>,source:string,filename:string,options?:Pick<VueAdapterOptions,'scriptOptions'|'templateOptions'|'styleOptions'>):{code:string;assets:Array<{type:'css';id:string;content:string}>;diagnostics:unknown[]};

package/src/index.js

@@ -0,0 +1,103 @@
+import {normalizeInlineVue} from './inline-source.js';
+export {normalizeInlineVue} from './inline-source.js';
+
+/** Vue 3 Single-File Component compiler and renderer adapter.
+ * Uses Vue's own compiler-sfc, pinned to the same release as the renderer.
+ */
+export function vue({compiler,renderer,version='3.5.18',provider='esm.sh',scriptOptions={},templateOptions={},styleOptions={}}={}) {
+  let sfcCompiler=compiler;
+  let vueRuntime=renderer;
+  let ownerRuntime;
+  const packageEntries=/^\d+\.\d+\.\d+(?:[-+][0-9A-Za-z.-]+)?$/.test(String(version))
+    ? {vue:{provider,version:String(version)}} : {};
+  return {
+    name:'vue',version:String(version),packageEntries,
+    html:{normalizeInlineSource:normalizeInlineVue},
+    configure({runtime}){ownerRuntime=runtime;},
+    compilers:[{
+      types:['vue'],extensions:['.vue'],
+      async compile(source,{id}){
+        sfcCompiler ||= await (ownerRuntime ? ownerRuntime.import('vue/compiler-sfc') : import('vue/compiler-sfc'));
+        return compileVueSfc(sfcCompiler,source,id,{scriptOptions,templateOptions,styleOptions});
+      }
+    }],
+    renderers:[{
+      name:'vue',types:['vue'],
+      async mount({component,target,props}){
+        vueRuntime ||= await (ownerRuntime ? ownerRuntime.import('vue') : import('vue'));
+        if(typeof vueRuntime.createApp!=='function'||typeof vueRuntime.h!=='function'||typeof vueRuntime.reactive!=='function')
+          throw new TypeError('Vue renderer requires createApp(), h(), and reactive().');
+        // Parent wrapper keeps the component mounted when props change.
+        // Spreading state inside render tracks every property and allows additions/removals.
+        const state=vueRuntime.reactive({...props});
+        const wrapper={name:'BrowserRuntimeVueHost',render(){return vueRuntime.h(component,{...state});}};
+        const app=vueRuntime.createApp(wrapper);
+        app.mount(target);
+        let disposed=false;
+        return {
+          updateProps(next){
+            if(disposed)throw new Error('Vue mount has been disposed');
+            if(!next||typeof next!=='object'||Array.isArray(next))throw new TypeError('Vue props must be a plain object');
+            for(const key of Object.keys(state))if(!Object.hasOwn(next,key))delete state[key];
+            Object.assign(state,next);
+          },
+          dispose(){if(!disposed){disposed=true;app.unmount();}}
+        };
+      }
+    }]
+  };
+}
+
+/** Pure transform. Public for deterministic tests and non-DOM build tooling. */
+export function compileVueSfc(compiler,source,filename,{scriptOptions={},templateOptions={},styleOptions={}}={}) {
+  if(!compiler||['parse','compileScript','compileTemplate','compileStyle'].some(key=>typeof compiler[key]!=='function'))
+    throw new TypeError('Vue compiler must expose parse(), compileScript(), compileTemplate() and compileStyle().');
+  const parsed=compiler.parse(source,{filename});
+  if(parsed.errors?.length)throw new Error(`Vue SFC parse failed: ${formatErrors(parsed.errors)}`);
+  const descriptor=parsed.descriptor;
+  if(!descriptor)throw new TypeError('Vue compiler parse() must return an SFC descriptor');
+  if(descriptor.template?.src||descriptor.script?.src||descriptor.scriptSetup?.src||descriptor.styles?.some(s=>s.src))
+    throw new Error(`External SFC block src attributes are not supported in ${filename}; use an inline block.`);
+  if(descriptor.styles?.some(s=>s.module))throw new Error(`Vue CSS Modules are not yet supported in ${filename}`);
+  if([descriptor.script,descriptor.scriptSetup].some(block=>block?.lang && !['js','javascript'].includes(block.lang)))
+    throw new Error(`Vue SFC script languages other than JavaScript require an additional transform: ${filename}`);
+  if(descriptor.template?.lang)throw new Error(`Vue SFC template preprocessors are not supported: ${filename}`);
+  if(descriptor.styles?.some(s=>s.lang && s.lang!=='css'))throw new Error(`Vue SFC style preprocessors are not supported: ${filename}`);
+  const hasScoped=Boolean(descriptor.styles?.some(s=>s.scoped));
+  const scope='data-v-'+shortHash(filename+'\0'+source);
+  const variable='__bmr_vue_sfc__';
+  const hasScript=Boolean(descriptor.script||descriptor.scriptSetup);
+  const inlineTemplate=Boolean(descriptor.scriptSetup&&descriptor.template);
+  const compiledScript=hasScript ? compiler.compileScript(descriptor,{
+    ...scriptOptions,id:scope,inlineTemplate,
+    genDefaultAs:variable,
+    ...(inlineTemplate?{templateOptions:{...templateOptions}}:{})
+  }) : null;
+  let code=compiledScript?.content||`const ${variable} = {};`;
+  if(!inlineTemplate && descriptor.template){
+    const compiledTemplate=compiler.compileTemplate({
+      filename,id:scope,source:descriptor.template.content,
+      scoped:hasScoped, ...templateOptions,
+      compilerOptions:{...(templateOptions.compilerOptions||{}),bindingMetadata:compiledScript?.bindings}
+    });
+    if(compiledTemplate.errors?.length)throw new Error(`Vue SFC template failed: ${formatErrors(compiledTemplate.errors)}`);
+    // compileTemplate emits `export function render` + imports from the Vue runtime.
+    code+='\n'+compiledTemplate.code+'\n'+variable+'.render = render;';
+  }
+  if(hasScoped)code+='\n'+variable+'.__scopeId = '+JSON.stringify(scope)+';';
+  code+='\nexport default '+variable+';';
+  const assets=[];
+  for(const [index,style] of (descriptor.styles||[]).entries()){
+    const result=compiler.compileStyle({filename,id:scope,source:style.content,scoped:Boolean(style.scoped),...styleOptions});
+    if(result.errors?.length)throw new Error(`Vue SFC style #${index} failed: ${formatErrors(result.errors)}`);
+    if(result.code)assets.push({type:'css',id:`${filename}:vue-css:${scope}:${index}`,content:result.code});
+  }
+  return {code,assets,diagnostics:[]};
+}
+
+function shortHash(value){
+  let hash=2166136261;
+  for(let i=0;i<value.length;i++){hash^=value.charCodeAt(i);hash=Math.imul(hash,16777619);}
+  return (hash>>>0).toString(36);
+}
+function formatErrors(errors){return errors.map(err=>typeof err==='string'?err:err.message||String(err)).join('; ');}

package/src/inline-source.js

@@ -0,0 +1,76 @@
+/** Normalize HTML-safe Vue <$script> delimiters without altering normal Vue 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 Vue source');
+}
+export function normalizeInlineVue(source) {
+  if (typeof source !== 'string') throw new TypeError('Inline Vue 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 Vue 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);
+}