@symbiote-native/vue 3.4.0 → 3.6.0

package/build/composables/use-root-tag.d.ts

@@ -0,0 +1,4 @@
+import { type InjectionKey } from '@vue/runtime-core';
+import type { IRootTag } from '@symbiote-native/engine';
+export declare const ROOT_TAG_KEY: InjectionKey<IRootTag>;
+export declare function useRootTag(): IRootTag;

package/build/composables/use-root-tag.js

@@ -0,0 +1,11 @@
+// The tag of the surface a component is rendered into, the Vue twin of RN's `RootTagContext`:
+// `mount` provides it on the app, a composable reads it back in `setup()`
+import { inject } from '@vue/runtime-core';
+export const ROOT_TAG_KEY = Symbol('symbiote-root-tag');
+export function useRootTag() {
+    const rootTag = inject(ROOT_TAG_KEY, undefined);
+    if (rootTag === undefined) {
+        throw new Error('useRootTag() needs a component mounted by mount()');
+    }
+    return rootTag;
+}

package/build/index.d.ts

@@ -60,12 +60,13 @@ export type { IComponentProvider, IAppConfig, IAppParameters, IRunnable, IHostRe
 export { useColorScheme } from './composables/use-color-scheme';
 export { useAnimatedColor, useAnimatedValue, useAnimatedValueXY, } from './composables/use-animated-value';
 export { useWindowDimensions } from './composables/use-window-dimensions';
+export { useRootTag } from './composables/use-root-tag';
 export { createPermissionHook } from './composables/create-permission-hook';
 export { createResourceHook } from './composables/create-resource-hook';
 export { defineNativeViewComponent } from './composables/define-native-view-component';
 export { createEventValueHook } from './composables/create-event-value-hook';
 export { useEvent, useEventListener } from './composables/use-event';
-export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Settings, I18nManager, Dimensions, Appearance, AppState, Keyboard, KEYBOARD_EVENT, TextInputState, BackHandler, PermissionsAndroid, PERMISSIONS, RESULTS, AccessibilityInfo, LayoutAnimation, } from '@symbiote-native/engine';
+export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Settings, I18nManager, Dimensions, Appearance, matchMedia, MediaQueryList, MediaQueryListEvent, setVariable, getComputedVariable, registerProperty, AppState, Keyboard, KEYBOARD_EVENT, TextInputState, BackHandler, PermissionsAndroid, PERMISSIONS, RESULTS, AccessibilityInfo, LayoutAnimation, } from '@symbiote-native/engine';
 export type { IAlertType, IAlertButtonStyle, IAlertButton, IAlertButtons, IAlertOptions, IShareContent, IShareOptions, IShareAction, IActionSheetIOSOptions, IShareActionSheetIOSOptions, IShareActionSheetError, IUrlEvent, II18nManagerConstants, IDisplayMetrics, IDisplayMetricsAndroid, IDimensionsPayload, IDimensionsSet, IDimensionsKey, IDimensionsChangeListener, IDimensionsStatic, IColorSchemeName, IColorSchemePreference, IAppStateStatus, IAppStateEvent, IKeyboardEventName, IKeyboardEvent, IKeyboardMetrics, IBackPressEventName, IBackPressHandler, IPermission, IPermissionStatus, IRationale, IAccessibilityChangeEvent, IAccessibilityChangeEventName, IAccessibilityChangeEventHandler, IAccessibilityAnnouncementFinishedEvent, IAnnounceForAccessibilityOptions, IAccessibilityEventType, ILayoutAnimationType, ILayoutAnimationProperty, ILayoutAnimationConfig, ILayoutAnimationAnim, } from '@symbiote-native/engine';
 export { Platform, StyleSheet, processColor, setColorProcessor, dlog, isDebug, } from '@symbiote-native/engine';
 export type { ISymbioteEvent, ISymbioteNode, IRootTag, } from '@symbiote-native/engine';

package/build/index.js

@@ -54,13 +54,14 @@ export { AppRegistry, HeadlessJsTaskError, setHostRegistrar, } from './modules/a
 export { useColorScheme } from './composables/use-color-scheme.js';
 export { useAnimatedColor, useAnimatedValue, useAnimatedValueXY, } from './composables/use-animated-value.js';
 export { useWindowDimensions } from './composables/use-window-dimensions.js';
+export { useRootTag } from './composables/use-root-tag.js';
 export { createPermissionHook } from './composables/create-permission-hook.js';
 export { createResourceHook } from './composables/create-resource-hook.js';
 export { defineNativeViewComponent } from './composables/define-native-view-component.js';
 export { createEventValueHook } from './composables/create-event-value-hook.js';
 export { useEvent, useEventListener } from './composables/use-event.js';
 // Imperative runtime modules: the SAME module both adapters share, re-exported from @symbiote-native/engine.
-export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Settings, I18nManager, Dimensions, Appearance, AppState, Keyboard, KEYBOARD_EVENT, TextInputState, BackHandler, PermissionsAndroid, PERMISSIONS, RESULTS, AccessibilityInfo, LayoutAnimation, } from '@symbiote-native/engine';
+export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Settings, I18nManager, Dimensions, Appearance, matchMedia, MediaQueryList, MediaQueryListEvent, setVariable, getComputedVariable, registerProperty, AppState, Keyboard, KEYBOARD_EVENT, TextInputState, BackHandler, PermissionsAndroid, PERMISSIONS, RESULTS, AccessibilityInfo, LayoutAnimation, } from '@symbiote-native/engine';
 // Re-export the framework-agnostic engine surface (pure utilities + diagnostics).
 export { Platform, StyleSheet, processColor, setColorProcessor, dlog, isDebug, } from '@symbiote-native/engine';
 // Wired once by the app entry on a real host (like setColorProcessor): hands the engine

package/build/render.js

@@ -3,6 +3,7 @@
 // nativeFabricUIManager; RN's own renderer never in the path.
 import { createSurface, disposeRoot, dlog, reportUncaughtError, } from '@symbiote-native/engine';
 import { createSymbioteRenderer } from './renderer/index.js';
+import { ROOT_TAG_KEY } from './composables/use-root-tag.js';
 // One Vue app per surface, so a surface can be torn down (unmount) or cleanly
 // re-mounted on the same rootTag: the bridgeless host stops and restarts a surface on
 // Fast Refresh and on lifecycle/focus changes, reusing the rootTag.
@@ -34,25 +35,9 @@ function componentStack(instance) {
     }
     return frames.length === 0 ? null : frames.join('');
 }
-// The app-level error seam. Without it, an unclaimed error fell through to Vue's own `logError`
-// (runtime-core errorHandling.ts), which does neither useful thing: in a dev bundle it RE-THROWS
-// out of `app.mount()`, so it escapes this function, aborts the AppRegistry runnable and leaves
-// the surface half-brought-up; in a release bundle it console.errors a bare error with no origin
-// and no component context, never touching `global.ErrorUtils`, so nothing reaches the host.
-// Setting a handler suppresses both branches and routes to the engine's shared channel instead —
-// the native redbox on a device, console.error off one.
-//
-// CAUGHT vs UNCAUGHT — the asymmetry is Vue's own, and it costs us no code. `handleError` walks
-// the `onErrorCaptured` chain BEFORE consulting `config.errorHandler`, and a hook returning
-// `false` stops propagation and returns early (runtime-core 3.5 errorHandling.ts), so a boundary
-// that claims the error never reaches this function at all. That is the behaviour we want and
-// the same split the React adapter makes by hand: writing a boundary IS the developer saying
-// "I am handling this", and answering it with a full-screen redbox over the fallback the app
-// just rendered contradicts what the app asked for.
-//
-// So do NOT "fix" this to report from inside an `onErrorCaptured` of our own — that would
-// re-report exactly the errors a boundary claimed. A hook that returns undefined instead of
-// `false` still lands here, and correctly: Vue treats that error as still propagating.
+// Without it Vue's `logError` re-throws from `app.mount()` in dev and hides the error in release
+// A boundary that claims an error never gets here: `onErrorCaptured` runs before `errorHandler`
+// Do not report from `onErrorCaptured`, it would re-report the errors a boundary claimed
 function reportToHost(error, instance, info) {
     // `info` is Vue's own phase label ('render function', 'setup function', 'native event
     // handler'), which is the closest thing it has to React's "no error boundary" / "recovered"
@@ -82,6 +67,7 @@ export function mount(rootTag, rootComponent) {
     const renderer = createSymbioteRenderer(surface);
     const app = renderer.createApp(rootComponent);
     app.config.errorHandler = reportToHost;
+    app.provide(ROOT_TAG_KEY, rootTag);
     configurator?.(app);
     apps.set(rootTag, app);
     // The surface IS the Vue container: a top-level mutation routes to surface.appendChild

package/metro-vue-transformer.cjs

@@ -30,10 +30,13 @@ const {
   compileCssModule,
   compileCssToRules,
   compileScopedCss,
+  conditionsArgument,
   createCssMetroTransformer,
   hashFilePath,
+  propertiesCall,
   relabelForUpstream,
   resolveUpstreamTransformer,
+  serializeRules,
 } = require('@symbiote-native/css-parser');
 
 const upstreamTransformer = resolveUpstreamTransformer();
@@ -134,7 +137,8 @@ function trimReflowedTextNodeTransform(node) {
   }
 }
 
-const SYMBIOTE_SOURCE_PREFIX = '@symbiote-native/';
+// The scope of this package's own name, `@symbiote-native/`, so the prefix has one source
+const SYMBIOTE_SOURCE_PREFIX = `${require('./package.json').name.split('/')[0]}/`;
 
 // Local names the file imports from any `@symbiote-native/*` package (`FlatList`, `Animated`)
 function symbioteImportsOf(descriptor) {
@@ -190,23 +194,27 @@ const SFC_COMPONENT_VAR = '__sfc__';
 
 // Each block restarts its rules at order 0, so a later one would tie an earlier one
 // Renumbering on append gives the file one monotonic sequence, as one stylesheet would
-function appendRules(target, rules) {
-  for (const rule of rules) {
-    target.push({ ...rule, order: target.length });
+// Conditions join the file's table, so a block's condition indexes shift by the ones already there
+function appendRules(sink, compiled) {
+  const offset = sink.conditions.length;
+  sink.conditions.push(...compiled.conditions);
+  for (const rule of compiled.rules) {
+    sink.rules.push({
+      ...withOffsetCond(rule, offset),
+      order: sink.rules.length,
+    });
+  }
+  // A `:root` block cascades in append order, the way one stylesheet would
+  for (const variable of compiled.rootVariables) {
+    sink.rootVariables.push(withOffsetCond(variable, offset));
+  }
+  for (const property of compiled.properties) {
+    sink.properties.push(withOffsetCond(property, offset));
   }
 }
 
-// `combinators` is compile-time-only, as the registry matches by token subset, so it is not shipped
-// Twin of css-parser's `serializeRules` (metro-css-module/index.ts) for a standalone style file
-function serializeRules(rules) {
-  return JSON.stringify(
-    rules.map(({ tokens, specificity, order, style }) => ({
-      tokens,
-      specificity,
-      order,
-      style,
-    })),
-  );
+function withOffsetCond(item, offset) {
+  return item.cond === undefined ? item : { ...item, cond: item.cond + offset };
 }
 
 // A style block's `lang` names a preprocessor (`lang="scss"`), where a file has an extension
@@ -251,12 +259,19 @@ function parseDescriptor(src, filename) {
       `Vue SFC parse error in ${filename}:\n${errors.map(String).join('\n')}`,
     );
   }
-  if (descriptor.scriptSetup == null && descriptor.script == null) {
-    throw new Error(
-      `Vue SFC ${filename} has no <script> / <script setup> block`,
-    );
+  if (descriptor.scriptSetup != null || descriptor.script != null) {
+    return descriptor;
+  }
+  if (descriptor.template == null) {
+    throw new Error(`Vue SFC ${filename} has no <template> / <script> block`);
   }
-  return descriptor;
+  // `compileScript` refuses a file without a script, yet a static template is a valid component
+  // A `<script setup>` appended after the source keeps every line number of the file
+  // It carries a comment since the parser drops a blank block, which would recurse forever
+  return parseDescriptor(
+    `${src}\n<script setup>/* static template */</script>\n`,
+    filename,
+  );
 }
 
 // `<style scoped>` and `<style module>` are one mechanism, lightningcss' CSS-Modules renaming
@@ -268,16 +283,15 @@ function compileSfcStyleBlock({ style, content, filename, scopeId }) {
   if (style.module) {
     const compiled = compileCssModule(content, filename);
     const bindingName = typeof style.module === 'string' ? style.module : '$style';
-    return { rules: compiled.rules, binding: [bindingName, compiled.classMap] };
+    return { ...compiled, binding: [bindingName, compiled.classMap] };
   }
   if (style.scoped) {
-    const compiled = compileScopedCss(content, {
+    return compileScopedCss(content, {
       filename,
       pattern: `[local]__${scopeId}`,
     });
-    return { rules: compiled.rules, names: compiled.names };
   }
-  return { rules: compileCssToRules(content, { filename }).rules };
+  return compileCssToRules(content, { filename });
 }
 
 // Blocks cascade last-wins like CSS, carried by the rules' `order` that `appendRules` renumbers
@@ -287,9 +301,14 @@ async function compileStyles(descriptor, filename, scopeId) {
   const contents = await Promise.all(
     descriptor.styles.map(style => compileStyleBlockContent(style, filename)),
   );
-  const rules = [];
-  const scopedClassNames = new Map();
-  const cssModuleBindings = new Map();
+  const sink = {
+    rules: [],
+    conditions: [],
+    rootVariables: [],
+    properties: [],
+    scopedClassNames: new Map(),
+    cssModuleBindings: new Map(),
+  };
   descriptor.styles.forEach((style, index) => {
     const block = compileSfcStyleBlock({
       style,
@@ -297,18 +316,18 @@ async function compileStyles(descriptor, filename, scopeId) {
       filename,
       scopeId,
     });
-    appendRules(rules, block.rules);
+    appendRules(sink, block);
     for (const [name, renamed] of block.names ?? [])
-      scopedClassNames.set(name, renamed);
+      sink.scopedClassNames.set(name, renamed);
     if (block.binding) {
       const [bindingName, classMap] = block.binding;
-      cssModuleBindings.set(bindingName, {
-        ...cssModuleBindings.get(bindingName),
+      sink.cssModuleBindings.set(bindingName, {
+        ...sink.cssModuleBindings.get(bindingName),
         ...classMap,
       });
     }
   });
-  return { rules, scopedClassNames, cssModuleBindings };
+  return sink;
 }
 
 // Scoped-class rewriting is skipped when nothing in the file is scoped, so it adds no runtime cost
@@ -342,20 +361,37 @@ function compileComponentScript(descriptor, scopeId, styles) {
   );
 }
 
-function withStyleRegistration(code, { rules, scopedClassNames, cssModuleBindings }) {
-  const hasCssModules = cssModuleBindings.size > 0;
-  if (rules.length === 0 && !hasCssModules) return code;
-
-  // Only a scoped file needs the runtime rename helper and its per-file map
+// The module text ahead of the component: the registration, the scope map and the module maps
+// Only a scoped file imports the rename helper, so other files leave it out
+function buildPreamble(styles) {
+  const {
+    rules,
+    conditions,
+    rootVariables,
+    properties,
+    scopedClassNames,
+    cssModuleBindings,
+  } = styles;
   const isScoped = scopedClassNames.size > 0;
-  const engineImports = isScoped
-    ? 'registerRules, renameClassTokens as __scopeClass'
-    : 'registerRules';
-
+  const hasRoot = rootVariables.length > 0;
+  const hasProperties = properties.length > 0;
+  const engineImports = [
+    'registerRules',
+    ...(hasRoot ? ['registerRootVariables'] : []),
+    ...(hasProperties ? ['registerProperties'] : []),
+    ...(isScoped ? ['renameClassTokens as __scopeClass'] : []),
+  ].join(', ');
+  const table = conditionsArgument(conditions);
   const preamble = [
     `import { ${engineImports} } from '@symbiote-native/engine';`,
-    `registerRules(${serializeRules(rules)});`,
+    `registerRules(${serializeRules(rules)}${table});`,
   ];
+  if (hasRoot) {
+    preamble.push(
+      `registerRootVariables(${JSON.stringify(rootVariables)}${table});`,
+    );
+  }
+  if (hasProperties) preamble.push(propertiesCall(properties, conditions));
   if (isScoped) {
     preamble.push(
       `const __scopedClassNames = ${JSON.stringify(Object.fromEntries(scopedClassNames))};`,
@@ -366,8 +402,19 @@ function withStyleRegistration(code, { rules, scopedClassNames, cssModuleBinding
   for (const [bindingName, classMap] of cssModuleBindings) {
     preamble.push(`const ${bindingName} = ${JSON.stringify(classMap)};`);
   }
+  return preamble.join('\n');
+}
+
+function withStyleRegistration(code, styles) {
+  const { cssModuleBindings } = styles;
+  const hasCssModules = cssModuleBindings.size > 0;
+  const hasRegistrations =
+    styles.rules.length > 0 ||
+    styles.rootVariables.length > 0 ||
+    styles.properties.length > 0;
+  if (!hasRegistrations && !hasCssModules) return code;
 
-  const parts = [preamble.join('\n'), code];
+  const parts = [buildPreamble(styles), code];
   if (hasCssModules) {
     const bindings = [...cssModuleBindings.keys()]
       .map(name => `${JSON.stringify(name)}: ${name}`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/vue",
-  "version": "3.4.0",
+  "version": "3.6.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": {
@@ -76,12 +76,12 @@
   "peerDependencies": {
     "vue": ">=3.5.0",
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^1.7.0"
+    "@symbiote-native/engine": "^1.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@symbiote-native/engine": "1.7.0",
-    "@symbiote-native/test-utils": "0.5.0"
+    "@symbiote-native/engine": "1.8.0",
+    "@symbiote-native/test-utils": "0.5.1"
   },
   "scripts": {
     "typecheck": "tsc --build",