@symbiote-native/device 0.3.0 → 2.0.0

package/README.md

@@ -4,7 +4,7 @@ A wrapper package for [SymbioteNative](../../README.md) that makes
 [`expo-device`](https://github.com/expo/expo/tree/main/packages/expo-device)
 — physical device information: brand/model/OS constants, uptime, max-memory,
 root/jailbreak detection, side-loading detection, and platform-feature queries — usable from
-**every** adapter, React, Vue, and Angular, not just React. Like
+**every** adapter, React, Vue, Svelte, Solid, and Angular, not just React. Like
 [`@symbiote-native/local-auth`](../local-auth) and unlike this repo's stateful Expo wrapper
 ([`@symbiote-native/sensors`](../sensors), an `EventEmitter` + live-subscription surface), every
 export here is either an eagerly-resolved constant or a one-shot async call with no per-instance
@@ -56,16 +56,16 @@ src/core/     Eager constants (isDevice, brand, manufacturer, modelId, modelName
 src/angular/  @symbiote-native/device/angular — export * from '../core'
 ```
 
-`./react`, `./vue`, and `./svelte` are `exports`-map aliases straight onto `src/core/` — no
-physical per-framework file, since there's nothing to subscribe to or clean up. `./angular` stays
-a physical file/subpath since Angular ships through a separate `ngc`/AOT build (`build-ngc/`).
+`./react`, `./vue`, `./svelte`, and `./solid` are `exports`-map aliases straight onto
+`src/core/` — no physical per-framework file, since there's nothing to subscribe to or clean up.
+`./angular` stays a physical file/subpath since Angular ships through a separate `ngc`/AOT build
+(`build-ngc/`).
 
 ## Use it
 
 ```tsx
 // React
 import { useEffect, useState } from 'react';
-import { Text, View } from '@symbiote-native/react';
 import {
   brand,
   deviceName,
@@ -87,20 +87,20 @@ function DeviceScreen() {
   }, []);
 
   return (
-    <View>
-      <Text>{isDevice ? 'Real device' : 'Simulator/emulator'}</Text>
-      <Text>{`${brand ?? 'unknown'} ${modelName ?? ''}`}</Text>
-      <Text>{`${osName ?? 'unknown OS'} ${osVersion ?? ''}`}</Text>
-      <Text>{deviceName ?? 'unnamed device'}</Text>
-      <Text>
+    <view>
+      <text>{isDevice ? 'Real device' : 'Simulator/emulator'}</text>
+      <text>{`${brand ?? 'unknown'} ${modelName ?? ''}`}</text>
+      <text>{`${osName ?? 'unknown OS'} ${osVersion ?? ''}`}</text>
+      <text>{deviceName ?? 'unnamed device'}</text>
+      <text>
         {uptime === null ? 'checking uptime…' : `Uptime: ${uptime}ms`}
-      </Text>
-      <Text>
+      </text>
+      <text>
         {maxMemory === null
           ? 'checking memory…'
           : `Max memory: ${maxMemory} bytes`}
-      </Text>
-    </View>
+      </text>
+    </view>
   );
 }
 ```
@@ -109,7 +109,6 @@ function DeviceScreen() {
 <!-- Vue -->
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { Text, View } from '@symbiote-native/vue';
 import {
   brand,
   deviceName,
@@ -131,25 +130,103 @@ onMounted(() => {
 </script>
 
 <template>
-  <View>
-    <Text>{{ isDevice ? 'Real device' : 'Simulator/emulator' }}</Text>
-    <Text>{{ `${brand ?? 'unknown'} ${modelName ?? ''}` }}</Text>
-    <Text>{{ `${osName ?? 'unknown OS'} ${osVersion ?? ''}` }}</Text>
-    <Text>{{ deviceName ?? 'unnamed device' }}</Text>
-    <Text>{{
+  <view>
+    <text>{{ isDevice ? 'Real device' : 'Simulator/emulator' }}</text>
+    <text>{{ `${brand ?? 'unknown'} ${modelName ?? ''}` }}</text>
+    <text>{{ `${osName ?? 'unknown OS'} ${osVersion ?? ''}` }}</text>
+    <text>{{ deviceName ?? 'unnamed device' }}</text>
+    <text>{{
       uptime === null ? 'checking uptime…' : `Uptime: ${uptime}ms`
-    }}</Text>
-    <Text>{{
+    }}</text>
+    <text>{{
       maxMemory === null ? 'checking memory…' : `Max memory: ${maxMemory} bytes`
-    }}</Text>
-  </View>
+    }}</text>
+  </view>
 </template>
 ```
 
+```svelte
+<!-- Svelte -->
+<script lang="ts">
+  import {
+    brand,
+    deviceName,
+    getMaxMemoryAsync,
+    getUptimeAsync,
+    isDevice,
+    modelName,
+    osName,
+    osVersion,
+  } from '@symbiote-native/device/svelte';
+
+  let uptime = $state<number | null>(null);
+  let maxMemory = $state<number | null>(null);
+
+  $effect(() => {
+    getUptimeAsync().then(value => (uptime = value));
+    getMaxMemoryAsync().then(value => (maxMemory = value));
+  });
+</script>
+
+<view>
+  <text>{isDevice ? 'Real device' : 'Simulator/emulator'}</text>
+  <text>{`${brand ?? 'unknown'} ${modelName ?? ''}`}</text>
+  <text>{`${osName ?? 'unknown OS'} ${osVersion ?? ''}`}</text>
+  <text>{deviceName ?? 'unnamed device'}</text>
+  <text>{uptime === null ? 'checking uptime…' : `Uptime: ${uptime}ms`}</text>
+  <text>
+    {maxMemory === null ? 'checking memory…' : `Max memory: ${maxMemory} bytes`}
+  </text>
+</view>
+```
+
+```tsx
+// Solid — a component body runs once, so the two async values need a signal; the eager
+// constants (brand, modelName, ...) are plain reads with nothing to subscribe to.
+import { createSignal, onMount } from 'solid-js';
+import {
+  brand,
+  deviceName,
+  getMaxMemoryAsync,
+  getUptimeAsync,
+  isDevice,
+  modelName,
+  osName,
+  osVersion,
+} from '@symbiote-native/device/solid';
+
+function DeviceScreen() {
+  const [uptime, setUptime] = createSignal<number | null>(null);
+  const [maxMemory, setMaxMemory] = createSignal<number | null>(null);
+
+  onMount(() => {
+    void getUptimeAsync().then(setUptime);
+    void getMaxMemoryAsync().then(setMaxMemory);
+  });
+
+  return (
+    <view>
+      <text>{isDevice ? 'Real device' : 'Simulator/emulator'}</text>
+      <text>{`${brand ?? 'unknown'} ${modelName ?? ''}`}</text>
+      <text>{`${osName ?? 'unknown OS'} ${osVersion ?? ''}`}</text>
+      <text>{deviceName ?? 'unnamed device'}</text>
+      <text>
+        {uptime() === null ? 'checking uptime…' : `Uptime: ${uptime()}ms`}
+      </text>
+      <text>
+        {maxMemory() === null
+          ? 'checking memory…'
+          : `Max memory: ${maxMemory()} bytes`}
+      </text>
+    </view>
+  );
+}
+```
+
 ```ts
 // Angular
 import { Component, signal } from '@angular/core';
-import { Text, View } from '@symbiote-native/angular';
+import { SYMBIOTE_ELEMENTS } from '@symbiote-native/angular';
 import {
   brand,
   deviceName,
@@ -163,22 +240,22 @@ import {
 
 @Component({
   standalone: true,
-  imports: [Text, View],
+  imports: [SYMBIOTE_ELEMENTS],
   template: `
-    <View>
-      <Text>{{ isDevice ? 'Real device' : 'Simulator/emulator' }}</Text>
-      <Text>{{ brand ?? 'unknown' }} {{ modelName ?? '' }}</Text>
-      <Text>{{ osName ?? 'unknown OS' }} {{ osVersion ?? '' }}</Text>
-      <Text>{{ deviceName ?? 'unnamed device' }}</Text>
-      <Text>{{
+    <view>
+      <text>{{ isDevice ? 'Real device' : 'Simulator/emulator' }}</text>
+      <text>{{ brand ?? 'unknown' }} {{ modelName ?? '' }}</text>
+      <text>{{ osName ?? 'unknown OS' }} {{ osVersion ?? '' }}</text>
+      <text>{{ deviceName ?? 'unnamed device' }}</text>
+      <text>{{
         uptime() === null ? 'checking uptime…' : 'Uptime: ' + uptime() + 'ms'
-      }}</Text>
-      <Text>{{
+      }}</text>
+      <text>{{
         maxMemory() === null
           ? 'checking memory…'
           : 'Max memory: ' + maxMemory() + ' bytes'
-      }}</Text>
-    </View>
+      }}</text>
+    </view>
   `,
 })
 export class DeviceScreen {
@@ -208,8 +285,8 @@ These snippets mirror the real canary demo screens — `examples/expo-react/scre
 ## API
 
 Eagerly-resolved constants, plus a handful of one-shot async functions — no event stream, no
-per-instance state — so the React/Vue/Angular entry points above are plain re-exports of `core`
-with nothing adapter-specific to add.
+per-instance state — so the React/Vue/Svelte/Solid/Angular entry points above are plain
+re-exports of `core` with nothing adapter-specific to add.
 
 ```ts
 // Constants — resolved once, at import time, straight off the native module:
@@ -250,6 +327,8 @@ import { getDeviceTypeAsync, isDevice } from '@symbiote-native/device';
 // or the framework-scoped entry points — identical surface, re-exported verbatim:
 import { getDeviceTypeAsync } from '@symbiote-native/device/react';
 import { getDeviceTypeAsync } from '@symbiote-native/device/vue';
+import { getDeviceTypeAsync } from '@symbiote-native/device/svelte';
+import { getDeviceTypeAsync } from '@symbiote-native/device/solid';
 import { getDeviceTypeAsync } from '@symbiote-native/device/angular';
 ```
 
@@ -273,9 +352,10 @@ the real `requireNativeModule` resolution (`src/core/device.test.ts`, `vitest`)
 `installFabric()`, no ViewConfig. Native rendering itself is verified on-device (see the parent
 [README](../../README.md) for the project's testing model).
 
-Native autolinking wiring for `expo-modules-core` packages is already done in the four Expo
+Native autolinking wiring for `expo-modules-core` packages is already done in all six Expo
 canary apps (`examples/expo-react`, `examples/expo-vue-sfc`, `examples/expo-vue-tsx`,
-`examples/expo-angular`) via `@symbiote-native/local-auth`/`@symbiote-native/sensors` — this
+`examples/expo-svelte`, `examples/expo-solid`, `examples/expo-angular`) via
+`@symbiote-native/local-auth`/`@symbiote-native/sensors` — this
 package reuses that same wiring with zero further app-side changes, since
 `expo-modules-autolinking` discovers any `expo-modules-core` package already present in
 `node_modules`. A dedicated `DeviceScreen` demo has not been wired into those canaries yet.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/device",
-  "version": "0.3.0",
+  "version": "2.0.0",
   "description": "expo-device wrapped for SymbioteNative — one framework-agnostic core, built once and reachable from the React, Vue, Svelte, Solid, and Angular adapters. Device brand/model/OS constants, uptime, max-memory, root/jailbreak detection, side-loading detection, and platform-feature queries.",
   "license": "MIT",
   "repository": {
@@ -13,6 +13,18 @@
     "url": "https://github.com/OneEyed1366/symbiote-native/issues"
   },
   "author": "Andrey Prokopenko <psevdoproger@gmail.com>",
+  "keywords": [
+    "react-native",
+    "symbiote-native",
+    "expo-device",
+    "react",
+    "vue",
+    "svelte",
+    "solid",
+    "angular",
+    "device-info",
+    "root-detection"
+  ],
   "type": "module",
   "main": "./build/core/index.js",
   "module": "./build/core/index.js",
@@ -61,19 +73,19 @@
     "expo-modules-core": "57.0.5"
   },
   "peerDependencies": {
-    "@symbiote-native/angular": ">=0.6.2",
-    "@symbiote-native/engine": ">=0.1.7",
-    "@symbiote-native/react": ">=0.2.8",
-    "@symbiote-native/solid": ">=0.0.1",
-    "@symbiote-native/svelte": ">=0.1.0",
-    "@symbiote-native/vue": ">=0.3.8",
     "@angular/core": ">=20",
     "@vue/runtime-core": "^3.5.13",
     "react": ">=19.0.0",
     "react-native": ">=0.86",
     "solid-js": ">=1.9.0",
     "svelte": ">=5.56.0",
-    "vue": ">=3.5.0"
+    "vue": ">=3.5.0",
+    "@symbiote-native/angular": "^2.0.0",
+    "@symbiote-native/engine": "^0.5.0",
+    "@symbiote-native/react": "^2.0.0",
+    "@symbiote-native/solid": "^2.0.0",
+    "@symbiote-native/svelte": "^2.0.0",
+    "@symbiote-native/vue": "^2.0.0"
   },
   "peerDependenciesMeta": {
     "@symbiote-native/angular": {
@@ -121,13 +133,13 @@
     "solid-js": "^1.9.14",
     "svelte": "^5.56.0",
     "typescript": "~6.0.0",
-    "@symbiote-native/angular": "0.8.0",
-    "@symbiote-native/engine": "0.3.0",
-    "@symbiote-native/react": "0.4.0",
-    "@symbiote-native/solid": "0.1.0",
-    "@symbiote-native/svelte": "0.3.0",
-    "@symbiote-native/test-utils": "0.2.0",
-    "@symbiote-native/vue": "0.5.0"
+    "@symbiote-native/angular": "2.0.0",
+    "@symbiote-native/engine": "0.5.0",
+    "@symbiote-native/react": "2.0.0",
+    "@symbiote-native/solid": "2.0.0",
+    "@symbiote-native/svelte": "2.0.0",
+    "@symbiote-native/test-utils": "0.3.0",
+    "@symbiote-native/vue": "2.0.0"
   },
   "scripts": {
     "typecheck": "tsc --build",