@symbiote-native/glass-effect 0.0.0 → 0.1.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 +180 -21
- package/build/angular/glass/index.android.js +6 -2
- package/build/angular/glass/index.ios.js +6 -2
- package/build-ngc/angular/glass/index.android.js +12 -4
- package/build-ngc/angular/glass/index.android.js.map +1 -1
- package/build-ngc/angular/glass/index.ios.js +12 -4
- package/build-ngc/angular/glass/index.ios.js.map +1 -1
- package/package.json +15 -15
- package/src/angular/glass/index.android.ts +6 -2
- package/src/angular/glass/index.ios.ts +6 -2
package/README.md
CHANGED
|
@@ -4,24 +4,75 @@
|
|
|
4
4
|
[SymbioteNative](../../README.md) adapter: React, Vue, Svelte, Solid and Angular. Liquid Glass
|
|
5
5
|
native views on iOS 26, a plain `View` everywhere else.
|
|
6
6
|
|
|
7
|
+
Built the same way as [`@symbiote-native/clipboard`](../clipboard)'s `ClipboardPasteButton`, an
|
|
8
|
+
`expo-modules-core` native view reached through `requireNativeViewManager` (see the
|
|
9
|
+
`symbiote-expo-native-module` project skill: why `expo-modules-core` is depended on directly and never
|
|
10
|
+
the `expo` meta-package, why the upstream JS is hand-ported into `core/`, and how autolinking finds the
|
|
11
|
+
native module). One render function in `core/` returns a descriptor and every adapter only turns it into
|
|
12
|
+
its own element.
|
|
13
|
+
|
|
7
14
|
## Install
|
|
8
15
|
|
|
16
|
+
**New app:**
|
|
17
|
+
|
|
9
18
|
```bash
|
|
10
|
-
npx @symbiote-native/cli new my-app --glass-effect
|
|
11
|
-
npx @symbiote-native/cli add --glass-effect # existing app
|
|
19
|
+
npx @symbiote-native/cli new my-app --glass-effect
|
|
12
20
|
```
|
|
13
21
|
|
|
14
|
-
|
|
15
|
-
|
|
22
|
+
**Existing SymbioteNative app:**
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npx @symbiote-native/cli add --glass-effect
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Either way: installs `@symbiote-native/glass-effect` and wires the native autolinking automatically,
|
|
29
|
+
see [`@symbiote-native/cli`](../cli).
|
|
30
|
+
|
|
31
|
+
<details>
|
|
32
|
+
<summary>Manual install (no CLI - installing and wiring native autolinking by hand)</summary>
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm install @symbiote-native/glass-effect
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Depends on `expo-glass-effect` and `expo-modules-core` directly (regular dependencies, pinned to exact
|
|
39
|
+
versions, since this package's `core/` is hand-ported against one specific native API shape).
|
|
40
|
+
Never install `expo-glass-effect` yourself, and never add the `expo` package to this project: it bundles
|
|
41
|
+
its own Metro/Babel pipeline that conflicts with this project's own.
|
|
42
|
+
|
|
43
|
+
### Required one-time step: native autolinking wiring
|
|
44
|
+
|
|
45
|
+
`expo-glass-effect`'s native code is discovered by `expo-modules-autolinking`, not by RN's own
|
|
46
|
+
`react-native.config.cjs` mechanism. Wire it into the native host app **once**, it covers this package
|
|
47
|
+
and every other `expo-modules-core` package with zero further changes. The steps and the
|
|
48
|
+
mechanics behind them are in the `symbiote-expo-native-module` skill and in
|
|
49
|
+
[`@symbiote-native/network`](../network)'s README; the reference app is `examples/expo-react`.
|
|
16
50
|
|
|
17
|
-
|
|
51
|
+
</details>
|
|
52
|
+
|
|
53
|
+
## Shape
|
|
54
|
+
|
|
55
|
+
```
|
|
56
|
+
src/core/ glass-effect.ts - props, isLiquidGlassAvailable, isGlassEffectAPIAvailable,
|
|
57
|
+
renderGlassView / renderGlassContainer (native root on iOS, a plain View
|
|
58
|
+
without the glass props elsewhere).
|
|
59
|
+
src/react/ @symbiote-native/glass-effect/react - GlassView, GlassContainer
|
|
60
|
+
src/vue/ @symbiote-native/glass-effect/vue - GlassView, GlassContainer
|
|
61
|
+
src/svelte/ @symbiote-native/glass-effect/svelte - GlassView, GlassContainer (.svelte)
|
|
62
|
+
src/solid/ @symbiote-native/glass-effect/solid - GlassView, GlassContainer
|
|
63
|
+
src/angular/glass/ @symbiote-native/glass-effect/angular - GlassView, GlassContainer
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Angular keeps one file set per platform (`index.ios.ts`, `index.android.ts`) because a template spells
|
|
67
|
+
the native tag statically, so an `__expo_app_identifier__` suffix makes it warn instead of render.
|
|
68
|
+
`native-link.json` declares `android.modules: []`, upstream has no Android folder.
|
|
69
|
+
|
|
70
|
+
## Use it
|
|
71
|
+
|
|
72
|
+
### React
|
|
18
73
|
|
|
19
74
|
```tsx
|
|
20
|
-
import {
|
|
21
|
-
GlassContainer,
|
|
22
|
-
GlassView,
|
|
23
|
-
isLiquidGlassAvailable,
|
|
24
|
-
} from '@symbiote-native/glass-effect/react';
|
|
75
|
+
import { GlassContainer, GlassView } from '@symbiote-native/glass-effect/react';
|
|
25
76
|
|
|
26
77
|
<GlassContainer spacing={8}>
|
|
27
78
|
<GlassView glassEffectStyle="clear" tintColor="rgba(255, 59, 48, 0.7)" isInteractive>
|
|
@@ -30,18 +81,126 @@ import {
|
|
|
30
81
|
</GlassContainer>;
|
|
31
82
|
```
|
|
32
83
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
84
|
+
### Vue
|
|
85
|
+
|
|
86
|
+
```vue
|
|
87
|
+
<script setup lang="ts">
|
|
88
|
+
import { GlassContainer, GlassView } from '@symbiote-native/glass-effect/vue';
|
|
89
|
+
</script>
|
|
90
|
+
|
|
91
|
+
<template>
|
|
92
|
+
<GlassContainer :spacing="8">
|
|
93
|
+
<GlassView glass-effect-style="clear" tint-color="rgba(255, 59, 48, 0.7)" is-interactive>
|
|
94
|
+
<text>Glass</text>
|
|
95
|
+
</GlassView>
|
|
96
|
+
</GlassContainer>
|
|
97
|
+
</template>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Angular
|
|
101
|
+
|
|
102
|
+
```ts
|
|
103
|
+
import { GlassContainer, GlassView } from '@symbiote-native/glass-effect/angular';
|
|
104
|
+
|
|
105
|
+
@Component({
|
|
106
|
+
imports: [GlassContainer, GlassView],
|
|
107
|
+
template: `
|
|
108
|
+
<GlassContainer [spacing]="8">
|
|
109
|
+
<GlassView glassEffectStyle="clear" tintColor="rgba(255, 59, 48, 0.7)" [isInteractive]="true">
|
|
110
|
+
<text>Glass</text>
|
|
111
|
+
</GlassView>
|
|
112
|
+
</GlassContainer>
|
|
113
|
+
`,
|
|
114
|
+
})
|
|
115
|
+
export class Card {}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Svelte
|
|
119
|
+
|
|
120
|
+
```svelte
|
|
121
|
+
<script lang="ts">
|
|
122
|
+
import { GlassContainer, GlassView } from '@symbiote-native/glass-effect/svelte';
|
|
123
|
+
</script>
|
|
124
|
+
|
|
125
|
+
<GlassContainer spacing={8}>
|
|
126
|
+
<GlassView glassEffectStyle="clear" tintColor="rgba(255, 59, 48, 0.7)" isInteractive={true}>
|
|
127
|
+
<text>Glass</text>
|
|
128
|
+
</GlassView>
|
|
129
|
+
</GlassContainer>
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### Solid
|
|
133
|
+
|
|
134
|
+
```tsx
|
|
135
|
+
import { GlassContainer, GlassView } from '@symbiote-native/glass-effect/solid';
|
|
136
|
+
|
|
137
|
+
<GlassContainer spacing={8}>
|
|
138
|
+
<GlassView glassEffectStyle="clear" tintColor="rgba(255, 59, 48, 0.7)" isInteractive>
|
|
139
|
+
<text>Glass</text>
|
|
140
|
+
</GlassView>
|
|
141
|
+
</GlassContainer>;
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
## API
|
|
145
|
+
|
|
146
|
+
```ts
|
|
147
|
+
<GlassView
|
|
148
|
+
glassEffectStyle?={'regular' | 'clear' | 'none' | { style, animate, animationDuration }}
|
|
149
|
+
tintColor?={ColorValue | PlatformColor | DynamicColorIOS}
|
|
150
|
+
isInteractive?={boolean} // default false
|
|
151
|
+
colorScheme?={'auto' | 'light' | 'dark'}
|
|
152
|
+
style? testID? nativeID? onLayout? ...View accessibility and responder props
|
|
153
|
+
/>
|
|
154
|
+
<GlassContainer spacing?={number} ...> // views inside blend when closer than `spacing`
|
|
155
|
+
|
|
156
|
+
isLiquidGlassAvailable(): boolean // system, compiler and Info.plist checks, false off iOS
|
|
157
|
+
isGlassEffectAPIAvailable(): boolean // the API exists at runtime, some iOS 26 betas lack it
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
Ported from upstream's `GlassView.tsx` and `GlassContainer.tsx`.
|
|
161
|
+
|
|
162
|
+
## Notes
|
|
163
|
+
|
|
164
|
+
- **iOS 26 and later only.** Older iOS, Android and the fallback render a plain `View` without the
|
|
165
|
+
glass props, and `isLiquidGlassAvailable()` reports `false` there.
|
|
166
|
+
- **`isLiquidGlassAvailable()` checks the build, not only the phone.** It validates the system
|
|
167
|
+
version, the compiler version the app was built with and the `UIDesignRequiresCompatibility`
|
|
168
|
+
setting in `Info.plist`. `isGlassEffectAPIAvailable()` checks the API at runtime, because some iOS
|
|
169
|
+
26 betas lack it and crash.
|
|
170
|
+
- **Glass does not survive an opacity of 0.** Setting `opacity` to `0` on a `GlassView` or on any
|
|
171
|
+
parent stops the glass from rendering at all. Fade it with the `animate` and `animationDuration`
|
|
172
|
+
fields of `glassEffectStyle` instead.
|
|
173
|
+
- **Merge glass views with `GlassContainer`.** Views inside one container blend into each other when
|
|
174
|
+
they come within `spacing` of each other.
|
|
175
|
+
- **The native view is the root and the children sit inside it**, so what you put in a `GlassView`
|
|
176
|
+
is laid out and touched like the content of any `View`.
|
|
177
|
+
- **Not ported.** Nothing: the upstream package has no web or Android variant beyond the plain `View`.
|
|
178
|
+
|
|
179
|
+
## Common questions
|
|
37
180
|
|
|
38
|
-
|
|
181
|
+
- **A plain view, no glass.** Needs iOS 26 or later, an app built with the iOS 26 SDK (Xcode 26) and
|
|
182
|
+
no `UIDesignRequiresCompatibility = true` in `Info.plist`. Log `isLiquidGlassAvailable()`.
|
|
183
|
+
- **The glass disappears when its parent fades.** An opacity of 0 on the view or any ancestor stops
|
|
184
|
+
it rendering (an iOS 26.1 bug). Fade with `glassEffectStyle={{ style, animate: true,
|
|
185
|
+
animationDuration }}` or toggle the style to `none` while a wrapper is invisible.
|
|
186
|
+
- **`colorScheme` does not update.** Fixed upstream in `expo-glass-effect` 55.0.8, update.
|
|
187
|
+
- **One corner radius is ignored.** Fixed upstream before the SDK 55 release, update.
|
|
188
|
+
- **Merging two shapes.** Put them in one `GlassContainer` and set `spacing`.
|
|
189
|
+
- **Android.** No upstream implementation, both components render a plain `View`.
|
|
39
190
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
(
|
|
43
|
-
|
|
191
|
+
Sources: [Expo docs: GlassEffect](https://docs.expo.dev/versions/latest/sdk/glass-effect/),
|
|
192
|
+
[expo/expo#41024](https://github.com/expo/expo/issues/41024),
|
|
193
|
+
[expo/expo#50097](https://github.com/expo/expo/issues/50097),
|
|
194
|
+
[expo/expo#43743](https://github.com/expo/expo/issues/43743),
|
|
195
|
+
[expo/expo#40778](https://github.com/expo/expo/issues/40778).
|
|
44
196
|
|
|
45
|
-
##
|
|
197
|
+
## Test it
|
|
46
198
|
|
|
47
|
-
|
|
199
|
+
No device is needed for the logic. The core tests (`src/core/*.test.ts`) replace `expo-modules-core`
|
|
200
|
+
(`requireNativeViewManager`, `Platform`) and assert the descriptor a render function returns. The
|
|
201
|
+
adapter tests (`src/{react,vue,solid,angular}/**/*.test.*`, `vitest`) render the real component over the
|
|
202
|
+
recording Fabric with an injected view config and assert the committed payload, and Svelte's
|
|
203
|
+
`*.smoke.test.ts` compile the `.svelte` files and mount them. Painting itself is verified on a device in
|
|
204
|
+
the six `examples/expo-*` canary apps (`examples/expo-react`, `examples/expo-vue-sfc`,
|
|
205
|
+
`examples/expo-vue-tsx`, `examples/expo-svelte`, `examples/expo-solid`, `examples/expo-angular`), see the
|
|
206
|
+
parent [README](../../README.md).
|
|
@@ -43,7 +43,9 @@ let GlassView = (() => {
|
|
|
43
43
|
imports: [DescriptorHost],
|
|
44
44
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
45
45
|
template: `@if (descriptor; as node) {
|
|
46
|
-
<symbiote-descriptor-host [node]="node"
|
|
46
|
+
<symbiote-descriptor-host [node]="node"
|
|
47
|
+
><ng-content
|
|
48
|
+
/></symbiote-descriptor-host>
|
|
47
49
|
}`,
|
|
48
50
|
})];
|
|
49
51
|
let _classDescriptor;
|
|
@@ -71,7 +73,9 @@ let GlassContainer = (() => {
|
|
|
71
73
|
imports: [DescriptorHost],
|
|
72
74
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
73
75
|
template: `@if (descriptor; as node) {
|
|
74
|
-
<symbiote-descriptor-host [node]="node"
|
|
76
|
+
<symbiote-descriptor-host [node]="node"
|
|
77
|
+
><ng-content
|
|
78
|
+
/></symbiote-descriptor-host>
|
|
75
79
|
}`,
|
|
76
80
|
})];
|
|
77
81
|
let _classDescriptor;
|
|
@@ -49,7 +49,9 @@ let GlassView = (() => {
|
|
|
49
49
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
50
50
|
// Имя тега это нативное имя view, его нельзя собрать динамически
|
|
51
51
|
template: `@if (descriptor; as node) {
|
|
52
|
-
<ViewManagerAdapter_ExpoGlassEffect_GlassView
|
|
52
|
+
<ViewManagerAdapter_ExpoGlassEffect_GlassView
|
|
53
|
+
[symbioteHostProps]="node.props"
|
|
54
|
+
>
|
|
53
55
|
<ng-content />
|
|
54
56
|
</ViewManagerAdapter_ExpoGlassEffect_GlassView>
|
|
55
57
|
}`,
|
|
@@ -84,7 +86,9 @@ let GlassContainer = (() => {
|
|
|
84
86
|
schemas: [NO_ERRORS_SCHEMA],
|
|
85
87
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
86
88
|
template: `@if (descriptor; as node) {
|
|
87
|
-
<ViewManagerAdapter_ExpoGlassEffect_GlassContainer
|
|
89
|
+
<ViewManagerAdapter_ExpoGlassEffect_GlassContainer
|
|
90
|
+
[symbioteHostProps]="node.props"
|
|
91
|
+
>
|
|
88
92
|
<ng-content />
|
|
89
93
|
</ViewManagerAdapter_ExpoGlassEffect_GlassContainer>
|
|
90
94
|
}`,
|
|
@@ -6,7 +6,9 @@ import * as i0 from "@angular/core";
|
|
|
6
6
|
export class GlassView extends GlassViewBase {
|
|
7
7
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GlassView, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
8
8
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: GlassView, isStandalone: true, selector: "GlassView", usesInheritance: true, ngImport: i0, template: `@if (descriptor; as node) {
|
|
9
|
-
<symbiote-descriptor-host [node]="node"
|
|
9
|
+
<symbiote-descriptor-host [node]="node"
|
|
10
|
+
><ng-content
|
|
11
|
+
/></symbiote-descriptor-host>
|
|
10
12
|
}`, isInline: true, dependencies: [{ kind: "component", type: DescriptorHost, selector: "symbiote-descriptor-host", inputs: ["node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11
13
|
}
|
|
12
14
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GlassView, decorators: [{
|
|
@@ -17,7 +19,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
17
19
|
imports: [DescriptorHost],
|
|
18
20
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
19
21
|
template: `@if (descriptor; as node) {
|
|
20
|
-
<symbiote-descriptor-host [node]="node"
|
|
22
|
+
<symbiote-descriptor-host [node]="node"
|
|
23
|
+
><ng-content
|
|
24
|
+
/></symbiote-descriptor-host>
|
|
21
25
|
}`,
|
|
22
26
|
}]
|
|
23
27
|
}] });
|
|
@@ -25,7 +29,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
25
29
|
export class GlassContainer extends GlassContainerBase {
|
|
26
30
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GlassContainer, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
27
31
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: GlassContainer, isStandalone: true, selector: "GlassContainer", usesInheritance: true, ngImport: i0, template: `@if (descriptor; as node) {
|
|
28
|
-
<symbiote-descriptor-host [node]="node"
|
|
32
|
+
<symbiote-descriptor-host [node]="node"
|
|
33
|
+
><ng-content
|
|
34
|
+
/></symbiote-descriptor-host>
|
|
29
35
|
}`, isInline: true, dependencies: [{ kind: "component", type: DescriptorHost, selector: "symbiote-descriptor-host", inputs: ["node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
30
36
|
}
|
|
31
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GlassContainer, decorators: [{
|
|
@@ -36,7 +42,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
36
42
|
imports: [DescriptorHost],
|
|
37
43
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
38
44
|
template: `@if (descriptor; as node) {
|
|
39
|
-
<symbiote-descriptor-host [node]="node"
|
|
45
|
+
<symbiote-descriptor-host [node]="node"
|
|
46
|
+
><ng-content
|
|
47
|
+
/></symbiote-descriptor-host>
|
|
40
48
|
}`,
|
|
41
49
|
}]
|
|
42
50
|
}] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.android.js","sourceRoot":"","sources":["../../../src/angular/glass/index.android.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;;AAE7D,8EAA8E;
|
|
1
|
+
{"version":3,"file":"index.android.js","sourceRoot":"","sources":["../../../src/angular/glass/index.android.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;;AAE7D,8EAA8E;AAY9E,MAAM,OAAO,SAAU,SAAQ,aAAa;uGAA/B,SAAS;2FAAT,SAAS,4FANV;;;;IAIR,4DANQ,cAAc;;2FAQb,SAAS;kBAXrB,SAAS;mBAAC;oBACT,QAAQ,EAAE,WAAW;oBACrB,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,cAAc,CAAC;oBACzB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,QAAQ,EAAE;;;;IAIR;iBACH;;AAGD,mFAAmF;AAYnF,MAAM,OAAO,cAAe,SAAQ,kBAAkB;uGAAzC,cAAc;2FAAd,cAAc,iGANf;;;;IAIR,4DANQ,cAAc;;2FAQb,cAAc;kBAX1B,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,cAAc,CAAC;oBACzB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,QAAQ,EAAE;;;;IAIR;iBACH"}
|
|
@@ -14,7 +14,9 @@ export class GlassView extends GlassViewBase {
|
|
|
14
14
|
}
|
|
15
15
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GlassView, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16
16
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: GlassView, isStandalone: true, selector: "GlassView", usesInheritance: true, ngImport: i0, template: `@if (descriptor; as node) {
|
|
17
|
-
<ViewManagerAdapter_ExpoGlassEffect_GlassView
|
|
17
|
+
<ViewManagerAdapter_ExpoGlassEffect_GlassView
|
|
18
|
+
[symbioteHostProps]="node.props"
|
|
19
|
+
>
|
|
18
20
|
<ng-content />
|
|
19
21
|
</ViewManagerAdapter_ExpoGlassEffect_GlassView>
|
|
20
22
|
}`, isInline: true, dependencies: [{ kind: "directive", type: SymbioteHostPropsDirective, selector: "[symbioteHostProps]", inputs: ["symbioteHostProps"], exportAs: ["symbioteHost"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
@@ -29,7 +31,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
29
31
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
30
32
|
// Имя тега это нативное имя view, его нельзя собрать динамически
|
|
31
33
|
template: `@if (descriptor; as node) {
|
|
32
|
-
<ViewManagerAdapter_ExpoGlassEffect_GlassView
|
|
34
|
+
<ViewManagerAdapter_ExpoGlassEffect_GlassView
|
|
35
|
+
[symbioteHostProps]="node.props"
|
|
36
|
+
>
|
|
33
37
|
<ng-content />
|
|
34
38
|
</ViewManagerAdapter_ExpoGlassEffect_GlassView>
|
|
35
39
|
}`,
|
|
@@ -43,7 +47,9 @@ export class GlassContainer extends GlassContainerBase {
|
|
|
43
47
|
}
|
|
44
48
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GlassContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
45
49
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: GlassContainer, isStandalone: true, selector: "GlassContainer", usesInheritance: true, ngImport: i0, template: `@if (descriptor; as node) {
|
|
46
|
-
<ViewManagerAdapter_ExpoGlassEffect_GlassContainer
|
|
50
|
+
<ViewManagerAdapter_ExpoGlassEffect_GlassContainer
|
|
51
|
+
[symbioteHostProps]="node.props"
|
|
52
|
+
>
|
|
47
53
|
<ng-content />
|
|
48
54
|
</ViewManagerAdapter_ExpoGlassEffect_GlassContainer>
|
|
49
55
|
}`, isInline: true, dependencies: [{ kind: "directive", type: SymbioteHostPropsDirective, selector: "[symbioteHostProps]", inputs: ["symbioteHostProps"], exportAs: ["symbioteHost"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
@@ -57,7 +63,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
57
63
|
schemas: [NO_ERRORS_SCHEMA],
|
|
58
64
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
59
65
|
template: `@if (descriptor; as node) {
|
|
60
|
-
<ViewManagerAdapter_ExpoGlassEffect_GlassContainer
|
|
66
|
+
<ViewManagerAdapter_ExpoGlassEffect_GlassContainer
|
|
67
|
+
[symbioteHostProps]="node.props"
|
|
68
|
+
>
|
|
61
69
|
<ng-content />
|
|
62
70
|
</ViewManagerAdapter_ExpoGlassEffect_GlassContainer>
|
|
63
71
|
}`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.ios.js","sourceRoot":"","sources":["../../../src/angular/glass/index.ios.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;;AAE7D,MAAM,QAAQ,GAAG,8CAA8C,CAAC;AAChE,MAAM,aAAa,GAAG,mDAAmD,CAAC;AAE1E,6FAA6F;
|
|
1
|
+
{"version":3,"file":"index.ios.js","sourceRoot":"","sources":["../../../src/angular/glass/index.ios.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;;AAE7D,MAAM,QAAQ,GAAG,8CAA8C,CAAC;AAChE,MAAM,aAAa,GAAG,mDAAmD,CAAC;AAE1E,6FAA6F;AAgB7F,MAAM,OAAO,SAAU,SAAQ,aAAa;IAC1C;QACE,KAAK,EAAE,CAAC;QACR,uBAAuB,CAAC,QAAQ,EAAE,wBAAwB,EAAE,WAAW,CAAC,CAAC;IAC3E,CAAC;uGAJU,SAAS;2FAAT,SAAS,4FARV;;;;;;IAMR,4DAVQ,0BAA0B;;2FAYzB,SAAS;kBAfrB,SAAS;mBAAC;oBACT,QAAQ,EAAE,WAAW;oBACrB,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,0BAA0B,CAAC;oBACrC,OAAO,EAAE,CAAC,gBAAgB,CAAC;oBAC3B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,iEAAiE;oBACjE,QAAQ,EAAE;;;;;;IAMR;iBACH;;AAQD,8FAA8F;AAe9F,MAAM,OAAO,cAAe,SAAQ,kBAAkB;IACpD;QACE,KAAK,EAAE,CAAC;QACR,uBAAuB,CACrB,aAAa,EACb,wBAAwB,EACxB,gBAAgB,CACjB,CAAC;IACJ,CAAC;uGARU,cAAc;2FAAd,cAAc,iGARf;;;;;;IAMR,4DATQ,0BAA0B;;2FAWzB,cAAc;kBAd1B,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,0BAA0B,CAAC;oBACrC,OAAO,EAAE,CAAC,gBAAgB,CAAC;oBAC3B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,QAAQ,EAAE;;;;;;IAMR;iBACH"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@symbiote-native/glass-effect",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "expo-glass-effect wrapped for SymbioteNative — one framework-agnostic core, built once and reachable from the React, Vue, Svelte, Solid, and Angular adapters. Liquid Glass native views for iOS 26 and a plain View elsewhere.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"dependencies": {
|
|
69
69
|
"expo-glass-effect": "57.0.4",
|
|
70
70
|
"expo-modules-core": "57.0.20",
|
|
71
|
-
"@symbiote-native/components": "3.
|
|
71
|
+
"@symbiote-native/components": "3.2.0"
|
|
72
72
|
},
|
|
73
73
|
"peerDependencies": {
|
|
74
74
|
"@angular/core": ">=20",
|
|
@@ -78,12 +78,12 @@
|
|
|
78
78
|
"solid-js": ">=1.9.0",
|
|
79
79
|
"svelte": ">=5.56.0",
|
|
80
80
|
"vue": ">=3.5.0",
|
|
81
|
-
"@symbiote-native/angular": "^3.
|
|
82
|
-
"@symbiote-native/engine": "^1.
|
|
83
|
-
"@symbiote-native/react": "^3.
|
|
84
|
-
"@symbiote-native/
|
|
85
|
-
"@symbiote-native/
|
|
86
|
-
"@symbiote-native/vue": "^3.
|
|
81
|
+
"@symbiote-native/angular": "^3.3.0",
|
|
82
|
+
"@symbiote-native/engine": "^1.6.0",
|
|
83
|
+
"@symbiote-native/react": "^3.3.0",
|
|
84
|
+
"@symbiote-native/solid": "^3.2.0",
|
|
85
|
+
"@symbiote-native/svelte": "^3.2.0",
|
|
86
|
+
"@symbiote-native/vue": "^3.3.0"
|
|
87
87
|
},
|
|
88
88
|
"peerDependenciesMeta": {
|
|
89
89
|
"@symbiote-native/angular": {
|
|
@@ -131,13 +131,13 @@
|
|
|
131
131
|
"solid-js": "^1.9.14",
|
|
132
132
|
"svelte": "^5.56.0",
|
|
133
133
|
"typescript": "~6.0.0",
|
|
134
|
-
"@symbiote-native/angular": "3.
|
|
135
|
-
"@symbiote-native/
|
|
136
|
-
"@symbiote-native/
|
|
137
|
-
"@symbiote-native/
|
|
138
|
-
"@symbiote-native/
|
|
139
|
-
"@symbiote-native/test-utils": "0.4.
|
|
140
|
-
"@symbiote-native/vue": "3.
|
|
134
|
+
"@symbiote-native/angular": "3.3.0",
|
|
135
|
+
"@symbiote-native/engine": "1.6.0",
|
|
136
|
+
"@symbiote-native/react": "3.3.0",
|
|
137
|
+
"@symbiote-native/solid": "3.2.0",
|
|
138
|
+
"@symbiote-native/svelte": "3.2.0",
|
|
139
|
+
"@symbiote-native/test-utils": "0.4.7",
|
|
140
|
+
"@symbiote-native/vue": "3.3.0"
|
|
141
141
|
},
|
|
142
142
|
"scripts": {
|
|
143
143
|
"typecheck": "tsc --build",
|
|
@@ -9,7 +9,9 @@ import { GlassContainerBase, GlassViewBase } from './shared';
|
|
|
9
9
|
imports: [DescriptorHost],
|
|
10
10
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
11
11
|
template: `@if (descriptor; as node) {
|
|
12
|
-
<symbiote-descriptor-host [node]="node"
|
|
12
|
+
<symbiote-descriptor-host [node]="node"
|
|
13
|
+
><ng-content
|
|
14
|
+
/></symbiote-descriptor-host>
|
|
13
15
|
}`,
|
|
14
16
|
})
|
|
15
17
|
export class GlassView extends GlassViewBase {}
|
|
@@ -21,7 +23,9 @@ export class GlassView extends GlassViewBase {}
|
|
|
21
23
|
imports: [DescriptorHost],
|
|
22
24
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
23
25
|
template: `@if (descriptor; as node) {
|
|
24
|
-
<symbiote-descriptor-host [node]="node"
|
|
26
|
+
<symbiote-descriptor-host [node]="node"
|
|
27
|
+
><ng-content
|
|
28
|
+
/></symbiote-descriptor-host>
|
|
25
29
|
}`,
|
|
26
30
|
})
|
|
27
31
|
export class GlassContainer extends GlassContainerBase {}
|
|
@@ -20,7 +20,9 @@ const CONTAINER_TAG = 'ViewManagerAdapter_ExpoGlassEffect_GlassContainer';
|
|
|
20
20
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
21
21
|
// Имя тега это нативное имя view, его нельзя собрать динамически
|
|
22
22
|
template: `@if (descriptor; as node) {
|
|
23
|
-
<ViewManagerAdapter_ExpoGlassEffect_GlassView
|
|
23
|
+
<ViewManagerAdapter_ExpoGlassEffect_GlassView
|
|
24
|
+
[symbioteHostProps]="node.props"
|
|
25
|
+
>
|
|
24
26
|
<ng-content />
|
|
25
27
|
</ViewManagerAdapter_ExpoGlassEffect_GlassView>
|
|
26
28
|
}`,
|
|
@@ -40,7 +42,9 @@ export class GlassView extends GlassViewBase {
|
|
|
40
42
|
schemas: [NO_ERRORS_SCHEMA],
|
|
41
43
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
42
44
|
template: `@if (descriptor; as node) {
|
|
43
|
-
<ViewManagerAdapter_ExpoGlassEffect_GlassContainer
|
|
45
|
+
<ViewManagerAdapter_ExpoGlassEffect_GlassContainer
|
|
46
|
+
[symbioteHostProps]="node.props"
|
|
47
|
+
>
|
|
44
48
|
<ng-content />
|
|
45
49
|
</ViewManagerAdapter_ExpoGlassEffect_GlassContainer>
|
|
46
50
|
}`,
|