@symbiote-native/vue 0.3.8 → 0.4.0

package/metro-vue-transformer.cjs

@@ -1,37 +1,33 @@
-// Metro babel transformer that teaches the bundler to read Vue SFCs (.vue). Metro has no
-// Vue plugin (unplugin-vue ships vite/webpack/esbuild/rollup adapters, not Metro), so we do
-// the single-pass compile here: parse the SFC, compile <script setup> + <template> into one
-// component module, then hand the JS to RN's own babel transformer. This is the Metro twin
-// of what @vitejs/plugin-vue does for Vite; the 'vue'→runtime-core rewrite is needed because
-// a custom, non-DOM renderer needs the compiler helpers from @vue/runtime-core, not from
-// vue/runtime-dom.
+// Metro babel transformer that teaches the bundler to read Vue SFCs (.vue). Metro has no Vue
+// plugin (unplugin-vue only ships vite/webpack/esbuild/rollup adapters), so we do the
+// single-pass compile here: parse the SFC, compile <script setup> + <template> into one
+// component module, then hand the JS to RN's own babel transformer - the Metro twin of
+// @vitejs/plugin-vue. Imports get retargeted from 'vue' to @symbiote-native/vue/runtime-helpers
+// (not bare @vue/runtime-core) because that shim also supplies our own `vShow` - compiled
+// v-show imports it by name, and only @vue/runtime-dom's DOM-based version exists otherwise.
 //
-// Retargeted at @symbiote-native/vue/runtime-helpers rather than bare @vue/runtime-core: that shim
-// re-exports runtime-core verbatim PLUS supplies our own `vShow` (compiled v-show imports it by
-// name, and only @vue/runtime-dom's DOM-based version exists otherwise).
-//
-// Ships as a package-level export (`@symbiote-native/vue/metro-vue-transformer`) rather than living
-// in each consuming app: a consumer's own metro.config.js just points babelTransformerPath at it.
+// Ships as a package-level export (`@symbiote-native/vue/metro-vue-transformer`) rather than
+// living in each consuming app: a consumer's own metro.config.js just points
+// babelTransformerPath at it.
 
 const nodeFs = require('fs');
 const { parse, compileScript, registerTS } = require('@vue/compiler-sfc');
 const { createCompoundExpression } = require('@vue/compiler-core');
 
-// A bare-specifier type import (`import type { X } from '@symbiote-native/navigation/vue'`, as
-// opposed to a relative one) needs real node_modules resolution (package.json exports, pnpm
-// symlinks) to turn the specifier into a file path — compileScript's own `fs` option only reads
-// paths it's already given, it can't do that resolution. @vue/compiler-sfc's sanctioned hook for
-// this is `registerTS`, the same one @vitejs/plugin-vue and vue-tsc call: it hands the compiler a
-// lazy loader for the real `typescript` package, which resolves the specifier via
-// `ts.resolveModuleName` and self-supplies `ts.sys` as the fs fallback.
+// A bare-specifier type import (`import type { X } from '@symbiote-native/navigation/vue'`) needs
+// real node_modules resolution to turn the specifier into a file path - compileScript's own `fs`
+// option only reads paths it's already given, it can't resolve. registerTS (the same hook
+// @vitejs/plugin-vue and vue-tsc use) hands the compiler a lazy `typescript` loader that resolves
+// via `ts.resolveModuleName` and self-supplies `ts.sys` as the fs fallback.
 registerTS(() => require('typescript'));
-// @symbiote-native/css-parser is a real dependency of THIS package, so requiring it directly here
-// (rather than through the ./metro-css-parser public subpath, which exists for CONSUMERS) resolves
-// straight from this package's own node_modules under pnpm.
+// Required directly (not via the ./metro-css-parser public subpath, which exists for CONSUMERS)
+// so it resolves from this package's own node_modules under pnpm.
 const {
+  classTokensIn,
   compile: compilePreprocessor,
   compileCssFile,
   globalClassNamesIn,
+  globalClassTokensIn,
   hashFilePath,
   isStyleFile,
   kebabToCamel,
@@ -42,14 +38,13 @@ const {
 const upstreamTransformer = resolveUpstreamTransformer();
 
 // compileScript needs file system access to resolve a type-only `defineProps<ISomeProps>()`
-// where ISomeProps is imported from another file — without it, Metro's worker process (a real
-// Node process, but one @vue/compiler-sfc doesn't auto-detect as Node unless the consumer calls
-// its `registerTS` hook) throws "No fs option provided ... in non-Node environment". Wiring
-// Node's own `fs` module straight through is simpler than registering the `typescript` package
-// as a loader (registerTS), and this file already runs in Node at Metro build time.
+// imported from another file - without it, Metro's worker process (a real Node process, but one
+// @vue/compiler-sfc doesn't auto-detect without registerTS) throws "No fs option provided ...
+// in non-Node environment". Wiring Node's own `fs` straight through is simpler than a second
+// registerTS-style loader.
 const compileScriptFs = {
-  fileExists: (file) => nodeFs.existsSync(file),
-  readFile: (file) => {
+  fileExists: file => nodeFs.existsSync(file),
+  readFile: file => {
     try {
       return nodeFs.readFileSync(file, 'utf-8');
     } catch {
@@ -58,34 +53,23 @@ const compileScriptFs = {
   },
 };
 
-// Rewrites a Vue template AST so every `class`/`:class` binding on an element resolves
-// against this file's scoped class names at the compiled call site, via @symbiote-native/engine's
-// scopeClassName(value, localNames, scopeId). This runs at the AST level rather than as a
-// raw-text regex: Vue itself merges a static `class=`
-// and a dynamic `:class=` on the same element into ONE codegen entry, and text substitution
-// can't reproduce that merge safely; letting Vue's own transformElement do the merge on our
-// already-rewritten nodes reuses that logic instead of reimplementing it).
+// Rewrites a Vue template AST so every `class`/`:class` binding resolves against this file's
+// scoped class names via @symbiote-native/engine's scopeClassName(value, localNames, scopeId).
+// AST-level, not a raw-text regex: Vue merges a static class= and a dynamic :class= on the same
+// element into ONE codegen entry, and text substitution can't reproduce that merge safely -
+// letting Vue's own transformElement do the merge on our rewritten nodes reuses that logic.
 //
-// A static class="foo bar" attribute is a plain AttributeNode (prop.type === 6): its value is
-// resolved to the final string directly here, at compile time — no runtime call needed for the
-// purely-static case, since every token is already known. Each token is normalized kebab->camel
-// FIRST (kebabToCamel) — a template may write class="section-label" (idiomatic CSS) instead of
-// class="sectionLabel"; the css-parser always registers the CAMEL form, and localNames (built
-// from that same registration) is camelCase-keyed, so the scoping check below only recognizes a
-// token once it is in that form. The emitted string is always camelCase, suffixed or not.
+// A static class="foo bar" (AttributeNode, prop.type === 6) resolves to its final string here
+// at compile time - no runtime call needed. Each token is normalized kebab->camel FIRST since
+// css-parser always registers the camel form and localNames is camelCase-keyed.
 //
-// A dynamic :class="expr" is a `bind` DirectiveNode (prop.type === 7) targeting the `class`
-// arg. Vue's own transformExpression has ALREADY run by the time our transform sees it (node
-// transforms are appended after the built-in preset, per @vue/compiler-core's TransformOptions
-// merge order), so prop.exp is usually a COMPOUND_EXPRESSION (type 8, a `children` array mixing
-// literal source chunks with resolved identifier nodes), not a plain string — a bare identifier
-// binding (`:class="dynamicClass"`) is the one case that stays a SIMPLE_EXPRESSION (type 4).
-// Either way, `createCompoundExpression` wraps the ORIGINAL exp node (whichever shape it is) as
-// a single child inside `scopeClassName(<original>, __localScopedClassNames, __scopeId)`, so
-// codegen emits the call with the original expression source reproduced unchanged inside it —
-// this needs no per-shape branching, and correctly defers even a fully opaque runtime value
-// (`:class="dynamicClass"`) to scopeClassName's own runtime token-matching, so there is no
-// unresolved gap for dynamic scoped classes.
+// A dynamic :class="expr" (bind DirectiveNode, prop.type === 7) targeting `class`: by the time
+// our transform runs, Vue's own transformExpression has already turned prop.exp into either a
+// COMPOUND_EXPRESSION (type 8) or, for a bare identifier binding, a SIMPLE_EXPRESSION (type 4).
+// createCompoundExpression wraps the original exp node as-is inside
+// scopeClassName(<original>, __localScopedClassNames, __scopeId), so codegen reproduces the
+// original expression unchanged - no per-shape branching needed, and a fully opaque runtime
+// value (`:class="dynamicClass"`) still defers correctly to scopeClassName's own token matching.
 function createScopeClassNodeTransform(localNames, scopeId) {
   return function scopeClassNodeTransform(node) {
     if (node.type !== 1 /* NodeTypes.ELEMENT */) return;
@@ -95,7 +79,7 @@ function createScopeClassNodeTransform(localNames, scopeId) {
         prop.value.content = prop.value.content
           .split(/\s+/)
           .filter(Boolean)
-          .map((token) => {
+          .map(token => {
             const camelToken = kebabToCamel(token);
             return localNames.has(camelToken) ? `${camelToken}__${scopeId}` : camelToken;
           })
@@ -120,10 +104,9 @@ function createScopeClassNodeTransform(localNames, scopeId) {
   };
 }
 
-// A short, stable id per file, used as the SFC scope id (compileScript wants one regardless of
-// whether the file has scoped styles) — Vue's own `data-v-hash` naming convention, built on
-// @symbiote-native/css-parser's shared hashFilePath so the algorithm isn't duplicated against the
-// standalone .module.css compiler's identical need (metro-css-module.ts).
+// A short, stable id per file, used as the SFC scope id regardless of whether the file has
+// scoped styles - built on css-parser's shared hashFilePath so the algorithm isn't duplicated
+// against the standalone .module.css compiler's identical need.
 function scopeIdFor(filename) {
   return 'data-v-' + hashFilePath(filename);
 }
@@ -139,9 +122,7 @@ const SFC_STYLE_LANG_TO_PREPROCESSOR = new Map([
 ]);
 
 // Reduces one <style> block down to plain CSS text. A lang-less or lang="css" block passes
-// through unchanged, exactly as before. Anything outside the four recognized preprocessor langs
-// (a typo, or a genuinely unsupported lang) still throws, same message as before this feature
-// existed.
+// through unchanged. Anything outside the four recognized preprocessor langs throws.
 async function compileStyleBlockContent(style, filename) {
   if (style.lang == null || style.lang === 'css') return style.content;
 
@@ -170,54 +151,39 @@ async function compileSfc(src, filename) {
 
   const scopeId = scopeIdFor(filename);
 
-  // `descriptor.styles` is already parsed by @vue/compiler-sfc itself (one entry per <style>
-  // block, `.content` pre-trimmed, `.scoped` already a plain boolean flag), so there's no need
-  // to re-extract style blocks with a regex.
+  // descriptor.styles is already parsed by @vue/compiler-sfc (one entry per <style> block,
+  // content pre-trimmed, scoped as a plain boolean) - no need to re-extract with a regex.
   //
-  // A scoped block's classes get their key SUFFIXED with this file's scopeId before
-  // registration (`card` -> `card__data-v-xxxxxxxx`), so two components can each define their
-  // own `.card` without colliding in the shared global registry — mirroring what Vue's own
-  // `data-v-hash` attribute does for DOM targets, just as a name suffix instead of an attribute
-  // selector (we have neither DOM nor attribute-selector matching). An unscoped block's classes
-  // register exactly as before: no suffix, globally shared. `:global(...)` selectors inside a
-  // scoped block are the one exception — @symbiote-native/css-parser already unwraps them to their
-  // plain class name (`:global(.reset)` parses like `.reset`), so `globalClassNamesIn` re-scans
-  // the block's own raw text to find which specific keys should be exempted from suffixing.
+  // A scoped block's classes get their key SUFFIXED with this file's scopeId (`card` ->
+  // `card__data-v-xxxxxxxx`) so two components can each define `.card` without colliding in the
+  // shared global registry - our name-suffix equivalent of Vue's `data-v-hash` attribute (we
+  // have no DOM/attribute-selector matching). `:global(...)` selectors are exempted from
+  // suffixing; globalClassNamesIn re-walks the block's selectors to find which keys to exempt.
   //
-  // Cascade multiple blocks last-block-wins, same as CSS — this holds across scoped/unscoped
-  // blocks too: only each block's OWN css-parser output is scoped independently, then merged.
+  // Multiple blocks cascade last-block-wins, same as CSS, after each block is scoped independently.
   //
-  // <style module> (CSS Modules) reuses this exact suffixing machinery instead of a separate
-  // pipeline: `.card` still goes through parseCSS unchanged and still registers via the same
-  // registerStyles() call, just under a suffixed key — the only new output is a plain name->
-  // scopedName object (`$style` by default, or the block's `module="name"` value) emitted as a
-  // preamble const, so `:class="$style.card"` passes the already-scoped string straight to
-  // resolveClassName's existing exact-match path (no registry changes needed). Unlike `scoped`, a module block's classes are NEVER
-  // auto-applied to a literal class="..." attribute — CSS Modules is opt-in per usage via
-  // `$style.x`, so module classes are kept out of `localScopedNames` (the nodeTransform only
-  // rewrites literal class strings for `scoped` blocks). The registry key gets an extra
-  // `module` tag (`card__module__<scopeId>`, vs scoped's plain `card__<scopeId>`) so a file
-  // that happens to mix `<style scoped>` and `<style module>` with the same class name can't
-  // collide in the shared registry.
+  // <style module> (CSS Modules) reuses this same suffixing machinery: `.card` still goes
+  // through parseCSS and registerStyles unchanged, just under a suffixed key - the only new
+  // output is a name->scopedName object ($style by default) emitted as a preamble const, so
+  // `:class="$style.card"` passes the already-scoped string straight to resolveClassName's
+  // exact-match path. Unlike `scoped`, module classes are NEVER auto-applied to a literal
+  // class="..." (opt-in via $style.x only), so they're kept out of localScopedNames. The
+  // registry key gets an extra `module` tag (`card__module__<scopeId>` vs scoped's
+  // `card__<scopeId>`) so a file mixing both kinds can't collide.
   const styles = {};
   const localScopedNames = new Set();
   const cssModuleBindings = new Map();
 
   for (const style of descriptor.styles) {
-    // Reduces a preprocessor block down to plain CSS text BEFORE any of the scoping logic
-    // below runs — that logic is entirely language-agnostic, it only ever sees parseCSS's
-    // plain-CSS output, same as it always did for a lang-less/lang="css" block. Anything other
-    // than the four recognized preprocessor langs (a typo, or a genuinely unsupported lang)
-    // still throws, unchanged from before.
+    // Reduces a preprocessor block to plain CSS BEFORE the scoping logic below runs - that
+    // logic is language-agnostic, it only ever sees parseCSS's plain-CSS output.
     const content = await compileStyleBlockContent(style, filename);
     const parsed = parseCSS(content, { filename });
 
     if (style.module) {
       const bindingName = typeof style.module === 'string' ? style.module : '$style';
-      // Scanned against the COMPILED content, not style.content: :global(...) isn't native
-      // SCSS/Less/Stylus syntax (each preprocessor passes an unrecognized selector through
-      // unchanged), but scanning the compiler's actual output can't drift under nesting/
-      // interpolation the way assuming source-and-output stay textually identical could.
+      // Scanned against the COMPILED content, not style.content, so it can't drift under
+      // preprocessor nesting/interpolation.
       const exemptFromScope = globalClassNamesIn(content);
       const classMap = cssModuleBindings.get(bindingName) ?? {};
       for (const [className, props] of Object.entries(parsed)) {
@@ -229,10 +195,25 @@ async function compileSfc(src, filename) {
       cssModuleBindings.set(bindingName, classMap);
     } else if (style.scoped) {
       const exemptFromScope = globalClassNamesIn(content);
+      // A compound/descendant selector registers under ONE collapsed key (`.card.big` ->
+      // `cardBig`) that never appears in the template - the template writes
+      // `class="card big"` - so the nodeTransform must recognize the individual TOKENS, not
+      // just the collapsed key.
+      const tokensByName = classTokensIn(content, { filename });
+      // ...and a token out of a `:global(...)` payload is the one exception to that: in
+      // `.card :global(.reset)` the KEY (`cardReset`) is this file's own, because `.card` is,
+      // but `reset` was written precisely to name markup this file does not own. Suffixing it
+      // along with the rest of its chain scope-mangles the escape hatch into matching nothing.
+      const globalTokens = globalClassTokensIn(content, { filename });
       for (const [className, props] of Object.entries(parsed)) {
         const isExempt = exemptFromScope.has(className);
         const registeredName = isExempt ? className : `${className}__${scopeId}`;
-        if (!isExempt) localScopedNames.add(className);
+        if (!isExempt) {
+          localScopedNames.add(className);
+          for (const token of tokensByName.get(className) ?? []) {
+            if (!globalTokens.has(token)) localScopedNames.add(token);
+          }
+        }
         styles[registeredName] = { ...styles[registeredName], ...props };
       }
     } else {
@@ -242,10 +223,8 @@ async function compileSfc(src, filename) {
     }
   }
 
-  // The nodeTransform rewrites every class/:class binding's compiled output to route through
-  // scopeClassName() at the scoped names this file actually defines — skipped entirely (not
-  // even passed to the compiler) when nothing in this file is scoped, so a .vue with only
-  // unscoped/no styles compiles exactly as before, zero added runtime cost or behavior change.
+  // Skipped entirely (not even passed to the compiler) when nothing in this file is scoped, so
+  // a .vue with only unscoped/no styles compiles with zero added runtime cost.
   const templateOptions =
     localScopedNames.size > 0
       ? {
@@ -263,18 +242,17 @@ async function compileSfc(src, filename) {
     templateOptions,
     fs: compileScriptFs,
   });
-  // Point every Vue import (the compiler's injected helpers AND the user's own
-  // `import { ref } from 'vue'`) at the runtime-helpers shim, which re-exports the same
-  // @vue/runtime-core singleton the @symbiote-native/vue adapter builds its custom renderer on, plus
-  // our own directive implementations. No vue/runtime-dom in a native bundle.
-  const code = compiled.content.replace(/from\s*(['"])vue\1/g, 'from "@symbiote-native/vue/runtime-helpers"');
+  // Retargets every Vue import (compiler-injected helpers AND the user's own `from 'vue'`) at
+  // the runtime-helpers shim - no vue/runtime-dom in a native bundle.
+  const code = compiled.content.replace(
+    /from\s*(['"])vue\1/g,
+    'from "@symbiote-native/vue/runtime-helpers"',
+  );
 
   if (Object.keys(styles).length === 0) return code;
 
-  // Only a scoped file needs scopeClassName + its two per-file constants — the nodeTransform
-  // above only ever emits calls to `__scopeClass`/`__localScopedClassNames`/`__scopeId` when
-  // localScopedNames is non-empty, so these stay unimported/undeclared (and absent from the
-  // bundle) for every non-scoped .vue file.
+  // Only a scoped file needs scopeClassName + its two per-file constants, so these stay
+  // unimported for every non-scoped .vue file.
   const engineImports =
     localScopedNames.size > 0 ? 'registerStyles, scopeClassName as __scopeClass' : 'registerStyles';
 
@@ -285,49 +263,48 @@ async function compileSfc(src, filename) {
       `const __scopeId = ${JSON.stringify(scopeId)};`,
     );
   }
-  // Each <style module> binding becomes a plain top-level const holding its name->scopedName
-  // map. Placed before the compiled `export default {...}`, so it's just a closed-over module
-  // scope variable inside setup() — same trick registerStyles/__scopeId already rely on — and
-  // usable both from the inlined template (`:class="$style.card"`) and from <script setup> code
-  // itself (`$style.card`), no extra wiring needed on either side.
+  // Each <style module> binding becomes a top-level const holding its name->scopedName map,
+  // placed before the compiled `export default {...}` so it's a closed-over module-scope
+  // variable usable both from the inlined template and from <script setup> code itself.
   for (const [bindingName, classMap] of cssModuleBindings) {
     preamble.push(`const ${bindingName} = ${JSON.stringify(classMap)};`);
   }
 
-  return [`import { ${engineImports} } from '@symbiote-native/engine';`, ...preamble, code].join('\n') + '\n';
+  return (
+    [`import { ${engineImports} } from '@symbiote-native/engine';`, ...preamble, code].join('\n') +
+    '\n'
+  );
 }
 
 // Exported separately from `transform` so tests can assert on the compiled SFC output
 // (imports, injected `registerStyles` call) without driving the full upstream RN Babel preset.
 module.exports.compileSfc = compileSfc;
 
-// Async uniformly, including the `.vue` and plain-passthrough branches that never touch a
-// preprocessor: compileSfc() itself is async now (a scss/sass/less/stylus <style> block awaits
-// preprocessors.ts's compile()), and Metro's own metro-transform-worker already
-// `await transformer.transform(...)` before touching the result (confirmed by reading the
-// installed metro-transform-worker source), so returning a Promise here is a supported,
-// exercised shape, not a hack. A sync fast-path for
-// the no-preprocessor branches would fork this function into two shapes to save a single
-// microtask on a call that only ever runs at Metro build time, content-hash-cached — not worth
-// the duplication.
+// Async uniformly, including branches that never touch a preprocessor: compileSfc() itself is
+// async now (a scss/sass/less/stylus block awaits preprocessors.ts's compile()), and Metro's own
+// metro-transform-worker already awaits transformer.transform(...), so this is a supported
+// shape - not worth forking a sync fast-path to save one microtask on a build-time,
+// content-hash-cached call.
 module.exports.transform = async function transform(params) {
   if (params.filename.endsWith('.vue')) {
     const code = await compileSfc(params.src, params.filename);
-    // Re-label as .tsx so RN's transformer strips any TS from <script setup lang="ts"> and
-    // processes the module exactly like app source. Metro tracks the real path separately.
+    // Re-label as .tsx so RN's transformer strips TS from <script setup lang="ts">. Metro
+    // tracks the real path separately.
     return upstreamTransformer.transform({
       ...params,
       src: code,
       filename: params.filename + '.tsx',
     });
   }
-  // A standalone style file (as opposed to a `.vue` file's own inline <style> block above) —
-  // the framework-agnostic path (core/css-parser's compileCssFile), usable from this example's
-  // .vue files exactly like from any other adapter's example. isStyleFile recognizes
-  // .css/.scss/.sass/.less/.styl/.stylus (+ each .module.* twin).
+  // A standalone style file (not a .vue file's inline <style> block) via the framework-agnostic
+  // compileCssFile path. isStyleFile recognizes .css/.scss/.sass/.less/.styl/.stylus (+ .module.* twins).
   if (isStyleFile(params.filename)) {
     const { code } = await compileCssFile(params.src, params.filename);
-    return upstreamTransformer.transform({ ...params, src: code, filename: params.filename + '.js' });
+    return upstreamTransformer.transform({
+      ...params,
+      src: code,
+      filename: params.filename + '.js',
+    });
   }
   return upstreamTransformer.transform(params);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/vue",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "description": "SymbioteNative's Vue adapter — a @vue/runtime-core createRenderer driving real native iOS/Android views through the same engine as the React adapter.",
   "license": "MIT",
   "repository": {
@@ -46,8 +46,8 @@
     "@vue/compiler-sfc": "^3.5.13",
     "@vue/runtime-core": "^3.5.13",
     "typescript": "~6.0.0",
-    "@symbiote-native/components": "0.3.0",
-    "@symbiote-native/css-parser": "0.2.3"
+    "@symbiote-native/components": "0.4.0",
+    "@symbiote-native/css-parser": "0.3.0"
   },
   "peerDependencies": {
     "@symbiote-native/engine": ">=0.1.7",
@@ -55,7 +55,7 @@
     "react-native": ">=0.86"
   },
   "devDependencies": {
-    "@symbiote-native/engine": "0.1.7",
+    "@symbiote-native/engine": "0.2.0",
     "@symbiote-native/test-utils": "0.1.6"
   },
   "scripts": {