@symbiote-native/cli 0.0.1

package/templates/js/solid/README.md

@@ -0,0 +1,18 @@
+# `templates/js/solid`
+
+The Solid JS-level overlay for `@symbiote-native/cli new --framework solid`. Same seam as
+`templates/js/react` (see that folder's README for the full per-file rationale table and what's
+deliberately excluded — App content, `e2e/`, lockfiles, this file itself) — source of truth is
+`examples/solid`, root-level files only.
+
+`index.js` drops the example's `fabric-call-counter` benchmark instrumentation (canary-only, not
+part of the scaffold seam), same as every other framework's template.
+
+## `package.json.fragment.json`
+
+Lists only what `index.js`/`metro.config.js`/`babel.config.js` actually import/require:
+`@symbiote-native/solid`, `@symbiote-native/engine`, `solid-js`, `react`, `react-native`
+(deps); `@react-native/babel-preset`, `@react-native/metro-config` (devDeps). Versions pulled
+from `examples/solid/package.json` / the packages' own published versions. Same scope
+limitation as `templates/js/react`'s fragment — `tsconfig.json`'s `@symbiote-native/css-parser`
+and `eslint.config.js`'s `@react-native/eslint-config` aren't listed.

package/templates/js/solid/app.json

@@ -0,0 +1,4 @@
+{
+  "name": "Canary",
+  "displayName": "Canary"
+}

package/templates/js/solid/babel.config.js

@@ -0,0 +1,29 @@
+// Inline `process.env.DEBUG` at bundle time so the @symbiote diagnostic logs can
+// be toggled from the shell without a dependency:
+//   DEBUG=1 npx react-native start --reset-cache
+const debugFlag = process.env.DEBUG === '1' ? '1' : '0';
+
+function inlineDebugFlag({ types: t }) {
+  return {
+    name: 'inline-debug-flag',
+    visitor: {
+      MemberExpression(path) {
+        if (path.matchesPattern('process.env.DEBUG')) {
+          path.replaceWith(t.stringLiteral(debugFlag));
+        }
+      },
+    },
+  };
+}
+
+module.exports = {
+  presets: [
+    'module:@react-native/babel-preset',
+    // LISTED LAST, WHICH MAKES IT RUN FIRST — babel applies presets in reverse array order. It has
+    // to win the race for the JSX: it rewrites every element into calls imported from
+    // @symbiote-native/solid/renderer, and once it has, the RN preset's own React-JSX transform
+    // finds no JSX left and no-ops.
+    '@symbiote-native/solid/babel-preset',
+  ],
+  plugins: [inlineDebugFlag],
+};

package/templates/js/solid/css.d.ts

@@ -0,0 +1,20 @@
+// Ambient module for a plain, side-effect-only `.css` import (`import './App.css'`) —
+// @symbiote-native/css-parser compiles it at build time (Metro's babelTransformerPath, see
+// metro.config.js) into a registerRules() call; there's no runtime export to type.
+declare module '*.css';
+
+// Same shape for the three optional preprocessor sources — css-parser reduces each to plain CSS
+// before compiling, so a side-effect import of one is indistinguishable downstream from a `.css`
+// one.
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.less';
+declare module '*.styl';
+
+// Generic (non-literal) fallback for a `.module.css` import, used by a standalone `tsc` run. The
+// `@symbiote-native/css-parser/typescript-plugin` entry in tsconfig.json's `compilerOptions.plugins`
+// gives per-file literal-key typing live in the editor instead.
+declare module '*.module.css' {
+  const styles: Record<string, string>;
+  export default styles;
+}

package/templates/js/solid/eslint.config.js

@@ -0,0 +1,3 @@
+const reactNativeFlatConfig = require('@react-native/eslint-config/flat');
+
+module.exports = [...reactNativeFlatConfig];

package/templates/js/solid/index.js

@@ -0,0 +1,13 @@
+/**
+ * @format
+ *
+ * Symbiote Solid canary entry. createApp(App).mount(appName) wires the native-host seams and RN's
+ * own AppRegistry, then mounts via @symbiote-native/engine — RN's own renderer is never in the path.
+ * Same entry shape as every other canary, going through the shared AppRegistry seam.
+ */
+
+import { createApp } from '@symbiote-native/solid/bootstrap';
+import App from './App';
+import { name as appName } from './app.json';
+
+createApp(App).mount(appName);

package/templates/js/solid/metro.config.js

@@ -0,0 +1,50 @@
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+
+const projectRoot = __dirname;
+
+/**
+ * @symbiote-native/* and solid-js resolve as ordinary npm packages from this app's own
+ * node_modules. @react-native/babel-preset strips the types, and babel.config.js's
+ * @symbiote-native/solid/babel-preset compiles the JSX.
+ *
+ * @type {import('@react-native/metro-config').MetroConfig}
+ */
+const defaultConfig = getDefaultConfig(projectRoot);
+
+const config = {
+  transformer: {
+    // @symbiote-native/solid ships the standalone .css/.module.css transformer itself (the same
+    // framework-agnostic path the React, Vue-TSX and Angular apps use via their own adapter's
+    // ./metro-css-parser export), so no local wiring file is needed.
+    babelTransformerPath:
+      require.resolve('@symbiote-native/solid/metro-css-parser'),
+  },
+  resolver: {
+    // Teach Metro that a style file is a source file (the transformer turns it into a module).
+    // scss/sass/less/styl are optional SCSS/Sass/Less/Stylus preprocessor sources — see
+    // core/css-parser/src/preprocessors.ts.
+    sourceExts: [
+      ...defaultConfig.resolver.sourceExts,
+      'css',
+      'scss',
+      'sass',
+      'less',
+      'styl',
+    ],
+
+    // Solid compiles a component to `function App(props)` — a function with an uppercase name,
+    // which is exactly what react-refresh's isLikelyComponentType heuristic accepts as a React
+    // component. Metro's HMR runtime then hands the update to performReactRefresh, which walks
+    // React's Fiber tree for live instances to patch; this adapter never registers one (no
+    // react-reconciler in the path), so the update is silently swallowed — no error, no visible
+    // change. Forces every .tsx update straight to a full reload, skipping the boundary check.
+    unstable_forceFullRefreshPatterns: [/\.tsx$/],
+
+    // DELIBERATELY NOT setting `unstable_conditionNames` — verified against the installed Metro
+    // rather than assumed, because solid-js's export map DOES have a `node` branch pointing at
+    // its SSR build (dist/server.js). Metro's own condition set never includes `node`, so the
+    // top-level `import` condition (the client build) resolves correctly by default.
+  },
+};
+
+module.exports = mergeConfig(defaultConfig, config);

package/templates/js/solid/package.json.fragment.json

@@ -0,0 +1,23 @@
+{
+  "scripts": {
+    "android": "react-native run-android",
+    "android:release": "react-native run-android --mode Release",
+    "ios": "react-native run-ios",
+    "ios:release": "react-native run-ios --mode Release",
+    "lint": "eslint .",
+    "start": "react-native start",
+    "dev": "react-native start --reset-cache"
+  },
+  "dependencies": {
+    "@symbiote-native/android": "latest",
+    "@symbiote-native/solid": "latest",
+    "@symbiote-native/engine": "latest",
+    "react": "19.2.3",
+    "react-native": "0.86.0",
+    "solid-js": "^1.9.14"
+  },
+  "devDependencies": {
+    "@react-native/babel-preset": "0.86.0",
+    "@react-native/metro-config": "0.86.0"
+  }
+}

package/templates/js/solid/package.json.fragment.typescript.json

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "pretypecheck": "css-dts .",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@react-native/typescript-config": "0.86.0",
+    "@types/react": "^19.2.0",
+    "typescript": "~6.0.0"
+  }
+}

package/templates/js/solid/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@react-native/typescript-config",
+  "compilerOptions": {
+    "types": ["node"],
+    "jsx": "preserve",
+    "jsxImportSource": "@symbiote-native/solid",
+    "plugins": [{ "name": "@symbiote-native/css-parser/typescript-plugin" }]
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["**/node_modules", "**/Pods", "e2e"]
+}

package/templates/js/svelte/.prettierrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  arrowParens: 'avoid',
+  singleQuote: true,
+  trailingComma: 'all',
+  plugins: ['prettier-plugin-svelte'],
+  // htmlWhitespaceSensitivity:'ignore' keeps prettier from re-encoding a gap between siblings as
+  // a dangling `>` / split closing tag. Whitespace there is free — a whitespace-only text node
+  // under a non-text parent becomes an anchor.
+  overrides: [
+    {
+      files: '*.svelte',
+      options: { parser: 'svelte', htmlWhitespaceSensitivity: 'ignore' },
+    },
+  ],
+};

package/templates/js/svelte/.watchmanconfig

@@ -0,0 +1 @@
+{}

package/templates/js/svelte/App.svelte

@@ -0,0 +1,123 @@
+<script>
+  import { PLUS_ICON_URI, REACT_NATIVE_LOGO_URI, SVELTE_LOGO_URI } from './image-uris';
+
+  let count = $state(0);
+</script>
+
+<safe-area-view class="screen">
+  <view class="brand-row">
+    <image
+      class="brand-logo brand-logo-react"
+      resizeMode="contain"
+      source={{ uri: REACT_NATIVE_LOGO_URI }}
+    />
+    <image class="plus-icon" resizeMode="contain" source={{ uri: PLUS_ICON_URI }} />
+    <image
+      class="brand-logo brand-logo-svelte"
+      resizeMode="contain"
+      source={{ uri: SVELTE_LOGO_URI }}
+    />
+  </view>
+
+  <text class="title">Welcome to SymbioteNative!</text>
+  <text class="subtitle">Framework-agnostic React Native, driven by Svelte.</text>
+
+  <view class="counter-card">
+    <text class="counter-label">TAPS</text>
+    <text class="counter-value">{count}</text>
+  </view>
+
+  <pressable class="button-primary" onPress={() => count++}>
+    <text class="button-primary-text">Tap me</text>
+  </pressable>
+</safe-area-view>
+
+<style>
+  :root {
+    --ink: #0b1622;
+    --paper: #13243a;
+    --mist: #41506a;
+    --chalk: #cbd5e1;
+    --chalk-bright: #ffffff;
+    --brand: #ff3e00;
+  }
+
+  .screen {
+    flex: 1;
+    background-color: var(--ink);
+    align-items: center;
+    justify-content: center;
+    gap: 24px;
+    padding: 24px 32px;
+  }
+
+  .brand-row {
+    flex-direction: row;
+    align-items: center;
+    gap: 28px;
+  }
+
+  .brand-logo {
+    height: 64px;
+  }
+
+  .brand-logo-react {
+    aspect-ratio: 1.0977;
+  }
+
+  .brand-logo-svelte {
+    aspect-ratio: 0.8359;
+  }
+
+  .plus-icon {
+    width: 48px;
+    height: 48px;
+  }
+
+  .title {
+    color: var(--chalk-bright);
+    font-size: 22px;
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .subtitle {
+    color: var(--chalk);
+    font-size: 14px;
+    text-align: center;
+  }
+
+  .counter-card {
+    align-items: center;
+    gap: 4px;
+    padding: 20px 28px;
+    border-radius: 16px;
+    background-color: var(--paper);
+  }
+
+  .counter-label {
+    color: var(--mist);
+    font-size: 12px;
+    letter-spacing: 1px;
+  }
+
+  .counter-value {
+    color: var(--brand);
+    font-size: 32px;
+    font-weight: bold;
+  }
+
+  .button-primary {
+    align-items: center;
+    justify-content: center;
+    border-radius: 12px;
+    padding: 14px 22px;
+    background-color: var(--brand);
+  }
+
+  .button-primary-text {
+    color: var(--chalk-bright);
+    font-size: 15px;
+    font-weight: bold;
+  }
+</style>

package/templates/js/svelte/App.typescript.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import { PLUS_ICON_URI, REACT_NATIVE_LOGO_URI, SVELTE_LOGO_URI } from './image-uris';
+
+  let count = $state<number>(0);
+</script>
+
+<safe-area-view class="screen">
+  <view class="brand-row">
+    <image
+      class="brand-logo brand-logo-react"
+      resizeMode="contain"
+      source={{ uri: REACT_NATIVE_LOGO_URI }}
+    />
+    <image class="plus-icon" resizeMode="contain" source={{ uri: PLUS_ICON_URI }} />
+    <image
+      class="brand-logo brand-logo-svelte"
+      resizeMode="contain"
+      source={{ uri: SVELTE_LOGO_URI }}
+    />
+  </view>
+
+  <text class="title">Welcome to SymbioteNative!</text>
+  <text class="subtitle">Framework-agnostic React Native, driven by Svelte.</text>
+
+  <view class="counter-card">
+    <text class="counter-label">TAPS</text>
+    <text class="counter-value">{count}</text>
+  </view>
+
+  <pressable class="button-primary" onPress={() => count++}>
+    <text class="button-primary-text">Tap me</text>
+  </pressable>
+</safe-area-view>
+
+<style>
+  :root {
+    --ink: #0b1622;
+    --paper: #13243a;
+    --mist: #41506a;
+    --chalk: #cbd5e1;
+    --chalk-bright: #ffffff;
+    --brand: #ff3e00;
+  }
+
+  .screen {
+    flex: 1;
+    background-color: var(--ink);
+    align-items: center;
+    justify-content: center;
+    gap: 24px;
+    padding: 24px 32px;
+  }
+
+  .brand-row {
+    flex-direction: row;
+    align-items: center;
+    gap: 28px;
+  }
+
+  .brand-logo {
+    height: 64px;
+  }
+
+  .brand-logo-react {
+    aspect-ratio: 1.0977;
+  }
+
+  .brand-logo-svelte {
+    aspect-ratio: 0.8359;
+  }
+
+  .plus-icon {
+    width: 48px;
+    height: 48px;
+  }
+
+  .title {
+    color: var(--chalk-bright);
+    font-size: 22px;
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .subtitle {
+    color: var(--chalk);
+    font-size: 14px;
+    text-align: center;
+  }
+
+  .counter-card {
+    align-items: center;
+    gap: 4px;
+    padding: 20px 28px;
+    border-radius: 16px;
+    background-color: var(--paper);
+  }
+
+  .counter-label {
+    color: var(--mist);
+    font-size: 12px;
+    letter-spacing: 1px;
+  }
+
+  .counter-value {
+    color: var(--brand);
+    font-size: 32px;
+    font-weight: bold;
+  }
+
+  .button-primary {
+    align-items: center;
+    justify-content: center;
+    border-radius: 12px;
+    padding: 14px 22px;
+    background-color: var(--brand);
+  }
+
+  .button-primary-text {
+    color: var(--chalk-bright);
+    font-size: 15px;
+    font-weight: bold;
+  }
+</style>

package/templates/js/svelte/README.md

@@ -0,0 +1,18 @@
+# `templates/js/svelte`
+
+The Svelte JS-level overlay for `@symbiote-native/cli new --framework svelte`. Same seam as
+`templates/js/react` (see that folder's README for the full per-file rationale table and what's
+deliberately excluded) — source of truth is `examples/svelte`, root-level files only.
+
+`index.js` drops the example's `fabric-call-counter` benchmark instrumentation, same as every
+other framework's template. `metro.config.js` keeps every Svelte-specific Metro workaround
+verbatim (the `esm-env` DEV redirect, the `browser` condition, `inlineRequires: false`,
+`unstable_forceFullRefreshPatterns`) — none of it is canary-specific, all of it is required for
+Svelte 5's client runtime to boot under Metro at all.
+
+## `package.json.fragment.json`
+
+Lists only what `index.js`/`metro.config.js`/`babel.config.js` actually import/require:
+`@symbiote-native/svelte`, `@symbiote-native/engine`, `svelte`, `react`, `react-native` (deps);
+`@react-native/babel-preset`, `@react-native/metro-config` (devDeps). Same scope limitation as
+`templates/js/react`'s fragment.

package/templates/js/svelte/app.json

@@ -0,0 +1,4 @@
+{
+  "name": "Canary",
+  "displayName": "Canary"
+}

package/templates/js/svelte/babel.config.js

@@ -0,0 +1,22 @@
+// Inline `process.env.DEBUG` at bundle time so the @symbiote diagnostic logs can
+// be toggled from the shell without a dependency:
+//   DEBUG=1 npx react-native start --reset-cache
+const debugFlag = process.env.DEBUG === '1' ? '1' : '0';
+
+function inlineFlags({ types: t }) {
+  return {
+    name: 'inline-flags',
+    visitor: {
+      MemberExpression(path) {
+        if (path.matchesPattern('process.env.DEBUG')) {
+          path.replaceWith(t.stringLiteral(debugFlag));
+        }
+      },
+    },
+  };
+}
+
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [inlineFlags],
+};

package/templates/js/svelte/css.d.ts

@@ -0,0 +1,21 @@
+// Ambient module for a plain, side-effect-only `.css` import (`import './App.css'`) —
+// @symbiote-native/css-parser compiles it at build time (Metro's babelTransformerPath, see
+// metro.config.js) into a registerRules() call; there's no runtime export to type.
+declare module '*.css';
+
+// Same shape for the three optional preprocessor sources — css-parser reduces each to plain CSS
+// before compiling, so a side-effect import of one is indistinguishable downstream from a `.css`
+// one.
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.less';
+declare module '*.styl';
+
+// Generic (non-literal) fallback for a `.module.css` import — used by `svelte-check` outside a
+// file that already has its own generated `Card.module.css.d.ts`. The
+// `@symbiote-native/css-parser/typescript-plugin` entry in tsconfig.json's `compilerOptions.plugins`
+// gives the SAME per-file literal-key typing live in the editor.
+declare module '*.module.css' {
+  const styles: Record<string, string>;
+  export default styles;
+}

package/templates/js/svelte/eslint.config.js

@@ -0,0 +1,37 @@
+const reactNativeFlatConfig = require('@react-native/eslint-config/flat');
+const svelte = require('eslint-plugin-svelte');
+const tsParser = require('@typescript-eslint/parser');
+
+// `@react-native/eslint-config/flat` has no `files` pattern covering `.svelte` at all, so ESLint's
+// flat-config default (only recognized JS-like extensions unless a config explicitly opts a file
+// in) reports every `.svelte` file "ignored because of a matching ignore pattern" — same root
+// cause and fix as the monorepo root's own eslint.config.js block for adapters/svelte.
+module.exports = [
+  ...reactNativeFlatConfig,
+  ...svelte.configs['flat/recommended'],
+  {
+    // `<script lang="ts">` needs a real TS parser inside the component, or every type annotation
+    // is a syntax error to svelte-eslint-parser's own (JS-only) script sub-parser.
+    files: ['**/*.svelte'],
+    languageOptions: {
+      parserOptions: { parser: tsParser },
+    },
+    rules: {
+      // `@react-native/eslint-config`'s react-hooks plugin pattern-matches any `use*`-named call
+      // as a React Hook. Svelte composables (`useNavigation`, `useIsFocused`, …) share that naming
+      // convention by accident of both ecosystems' idiom, and are not React Hooks — the rule has
+      // no way to tell the two apart, so it is a standing false positive on every `.svelte` file.
+      'react-hooks/rules-of-hooks': 'off',
+      // The `**/*.ts`/`**/*.tsx` block in this same config turns `no-undef` off — typescript-eslint's
+      // own recommendation, since a plain (non-type-aware) ESLint rule cannot see ambient globals a
+      // `.d.ts` lib declares. `.svelte`'s `<script lang="ts">` isn't matched by that glob, so it
+      // needs the same override here.
+      'no-undef': 'off',
+      // The rule's fixer unwraps `{'<svelte:self> ...'}` into bare text, which is wrong whenever
+      // the string's own content contains `<...>` — measured: even HTML-entity-escaped
+      // (`&lt;svelte:self&gt;`) bare text still throws `element_invalid_closing_tag` from Svelte's
+      // OWN compiler, not just this linter, so the mustache is load-bearing, not "useless".
+      'svelte/no-useless-mustaches': 'off',
+    },
+  },
+];