@symbiote-native/system-ui 0.3.0 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -12
- package/package.json +26 -15
package/README.md
CHANGED
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
A wrapper package for [SymbioteNative](../../README.md) that makes
|
|
4
4
|
[`expo-system-ui`](https://github.com/expo/expo/tree/main/packages/expo-system-ui)
|
|
5
5
|
— setting and reading the root view's background color — usable from **every** adapter,
|
|
6
|
-
React, Vue, and Angular, not just React. Like
|
|
6
|
+
React, Vue, Svelte, Solid, and Angular, not just React. Like
|
|
7
7
|
[`@symbiote-native/device`](../device) and [`@symbiote-native/local-auth`](../local-auth) and
|
|
8
8
|
unlike this repo's stateful Expo wrapper ([`@symbiote-native/sensors`](../sensors), an
|
|
9
9
|
`EventEmitter` + live-subscription surface), both exports here are one-shot async calls with no
|
|
10
|
-
per-instance state, so there is no hook/composable/service to wrap — the React, Vue, and
|
|
11
|
-
|
|
10
|
+
per-instance state, so there is no hook/composable/service to wrap — the React, Vue, Svelte, and
|
|
11
|
+
Solid entry points are plain re-exports of the same `core`.
|
|
12
12
|
|
|
13
13
|
## Install
|
|
14
14
|
|
|
@@ -49,9 +49,10 @@ src/core/ setBackgroundColorAsync / getBackgroundColorAsync. native-module.t
|
|
|
49
49
|
src/angular/ @symbiote-native/system-ui/angular — export * from '../core'
|
|
50
50
|
```
|
|
51
51
|
|
|
52
|
-
`./react`, `./vue`, and `./
|
|
53
|
-
physical per-framework file, since there's nothing to subscribe to or clean up.
|
|
54
|
-
a physical file/subpath since Angular ships through a separate `ngc`/AOT build
|
|
52
|
+
`./react`, `./vue`, `./svelte`, and `./solid` are `exports`-map aliases straight onto
|
|
53
|
+
`src/core/` — no physical per-framework file, since there's nothing to subscribe to or clean up.
|
|
54
|
+
`./angular` stays a physical file/subpath since Angular ships through a separate `ngc`/AOT build
|
|
55
|
+
(`build-ngc/`).
|
|
55
56
|
|
|
56
57
|
## Use it
|
|
57
58
|
|
|
@@ -74,6 +75,27 @@ onMounted(() => {
|
|
|
74
75
|
</script>
|
|
75
76
|
```
|
|
76
77
|
|
|
78
|
+
```svelte
|
|
79
|
+
<!-- Svelte -->
|
|
80
|
+
<script lang="ts">
|
|
81
|
+
import { setBackgroundColorAsync } from '@symbiote-native/system-ui/svelte';
|
|
82
|
+
|
|
83
|
+
$effect(() => {
|
|
84
|
+
void setBackgroundColorAsync('black');
|
|
85
|
+
});
|
|
86
|
+
</script>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
// Solid
|
|
91
|
+
import { onMount } from 'solid-js';
|
|
92
|
+
import { setBackgroundColorAsync } from '@symbiote-native/system-ui/solid';
|
|
93
|
+
|
|
94
|
+
onMount(() => {
|
|
95
|
+
void setBackgroundColorAsync('black');
|
|
96
|
+
});
|
|
97
|
+
```
|
|
98
|
+
|
|
77
99
|
```ts
|
|
78
100
|
// Angular
|
|
79
101
|
import { Component } from '@angular/core';
|
|
@@ -91,7 +113,8 @@ There's no per-instance service to `inject()` in the Angular case — both funct
|
|
|
91
113
|
exports off the core package, called straight in the constructor or wherever the app's root is
|
|
92
114
|
set up. These snippets mirror the real canary demo screens —
|
|
93
115
|
`examples/expo-react/screens/SystemUiScreen.tsx`, `examples/expo-vue-sfc/screens/SystemUiScreen.vue`,
|
|
94
|
-
`examples/expo-vue-tsx/screens/SystemUiScreen.tsx`, `examples/expo-
|
|
116
|
+
`examples/expo-vue-tsx/screens/SystemUiScreen.tsx`, `examples/expo-svelte/screens/SystemUiScreen.svelte`,
|
|
117
|
+
`examples/expo-solid/screens/SystemUiScreen.tsx`, `examples/expo-angular/src/screens/SystemUiScreen.ts`.
|
|
95
118
|
|
|
96
119
|
## API
|
|
97
120
|
|
|
@@ -111,6 +134,8 @@ import {
|
|
|
111
134
|
// or the framework-scoped entry points — identical surface, re-exported verbatim:
|
|
112
135
|
import { setBackgroundColorAsync } from '@symbiote-native/system-ui/react';
|
|
113
136
|
import { setBackgroundColorAsync } from '@symbiote-native/system-ui/vue';
|
|
137
|
+
import { setBackgroundColorAsync } from '@symbiote-native/system-ui/svelte';
|
|
138
|
+
import { setBackgroundColorAsync } from '@symbiote-native/system-ui/solid';
|
|
114
139
|
import { setBackgroundColorAsync } from '@symbiote-native/system-ui/angular';
|
|
115
140
|
```
|
|
116
141
|
|
|
@@ -132,9 +157,10 @@ per-instance state. Tests inject a fake native-module object in place of the rea
|
|
|
132
157
|
no ViewConfig. Native rendering itself is verified on-device (see the parent
|
|
133
158
|
[README](../../README.md) for the project's testing model).
|
|
134
159
|
|
|
135
|
-
Native autolinking wiring for `expo-modules-core` packages is already done in
|
|
160
|
+
Native autolinking wiring for `expo-modules-core` packages is already done in all six Expo
|
|
136
161
|
canary apps (`examples/expo-react`, `examples/expo-vue-sfc`, `examples/expo-vue-tsx`,
|
|
137
|
-
`examples/expo-
|
|
138
|
-
package reuses that same wiring
|
|
139
|
-
|
|
140
|
-
`
|
|
162
|
+
`examples/expo-svelte`, `examples/expo-solid`, `examples/expo-angular`) via
|
|
163
|
+
`@symbiote-native/local-auth`/`@symbiote-native/sensors` — this package reuses that same wiring
|
|
164
|
+
with zero further app-side changes, since `expo-modules-autolinking` discovers any
|
|
165
|
+
`expo-modules-core` package already present in `node_modules`. Each canary carries its own
|
|
166
|
+
`SystemUiScreen` demo.
|
package/package.json
CHANGED
|
@@ -1,7 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@symbiote-native/system-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "expo-system-ui wrapped for SymbioteNative — one framework-agnostic core, built once and reachable from the React, Vue, Svelte, Solid, and Angular adapters. Sets and reads the root view's background color.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"react-native",
|
|
7
|
+
"symbiote-native",
|
|
8
|
+
"react",
|
|
9
|
+
"vue",
|
|
10
|
+
"svelte",
|
|
11
|
+
"solid",
|
|
12
|
+
"angular",
|
|
13
|
+
"system-ui",
|
|
14
|
+
"background-color"
|
|
15
|
+
],
|
|
5
16
|
"license": "MIT",
|
|
6
17
|
"repository": {
|
|
7
18
|
"type": "git",
|
|
@@ -61,19 +72,19 @@
|
|
|
61
72
|
"expo-modules-core": "57.0.5"
|
|
62
73
|
},
|
|
63
74
|
"peerDependencies": {
|
|
64
|
-
"@symbiote-native/angular": ">=0.6.2",
|
|
65
|
-
"@symbiote-native/engine": ">=0.1.7",
|
|
66
|
-
"@symbiote-native/react": ">=0.2.8",
|
|
67
|
-
"@symbiote-native/solid": ">=0.0.1",
|
|
68
|
-
"@symbiote-native/svelte": ">=0.1.0",
|
|
69
|
-
"@symbiote-native/vue": ">=0.3.8",
|
|
70
75
|
"@angular/core": ">=20",
|
|
71
76
|
"@vue/runtime-core": "^3.5.13",
|
|
72
77
|
"react": ">=19.0.0",
|
|
73
78
|
"react-native": ">=0.86",
|
|
74
79
|
"solid-js": ">=1.9.0",
|
|
75
80
|
"svelte": ">=5.56.0",
|
|
76
|
-
"vue": ">=3.5.0"
|
|
81
|
+
"vue": ">=3.5.0",
|
|
82
|
+
"@symbiote-native/angular": "^1.0.0",
|
|
83
|
+
"@symbiote-native/engine": "^0.4.0",
|
|
84
|
+
"@symbiote-native/react": "^1.0.0",
|
|
85
|
+
"@symbiote-native/solid": "^1.0.0",
|
|
86
|
+
"@symbiote-native/svelte": "^1.0.0",
|
|
87
|
+
"@symbiote-native/vue": "^1.0.0"
|
|
77
88
|
},
|
|
78
89
|
"peerDependenciesMeta": {
|
|
79
90
|
"@symbiote-native/angular": {
|
|
@@ -121,13 +132,13 @@
|
|
|
121
132
|
"solid-js": "^1.9.14",
|
|
122
133
|
"svelte": "^5.56.0",
|
|
123
134
|
"typescript": "~6.0.0",
|
|
124
|
-
"@symbiote-native/angular": "0.
|
|
125
|
-
"@symbiote-native/engine": "0.
|
|
126
|
-
"@symbiote-native/react": "0.
|
|
127
|
-
"@symbiote-native/solid": "
|
|
128
|
-
"@symbiote-native/svelte": "0.
|
|
129
|
-
"@symbiote-native/test-utils": "0.
|
|
130
|
-
"@symbiote-native/vue": "0.
|
|
135
|
+
"@symbiote-native/angular": "1.0.0",
|
|
136
|
+
"@symbiote-native/engine": "0.4.0",
|
|
137
|
+
"@symbiote-native/react": "1.0.0",
|
|
138
|
+
"@symbiote-native/solid": "1.0.0",
|
|
139
|
+
"@symbiote-native/svelte": "1.0.0",
|
|
140
|
+
"@symbiote-native/test-utils": "0.3.0",
|
|
141
|
+
"@symbiote-native/vue": "1.0.0"
|
|
131
142
|
},
|
|
132
143
|
"scripts": {
|
|
133
144
|
"typecheck": "tsc --build",
|