@pnlight/sdk-react 0.1.0 → 0.3.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 +39 -1
- package/dist/custom-components.d.ts +14 -1
- package/dist/custom-components.d.ts.map +1 -1
- package/dist/custom-components.js +622 -112
- package/dist/custom-components.js.map +1 -1
- package/dist/purchase.d.ts +22 -0
- package/dist/purchase.d.ts.map +1 -0
- package/dist/purchase.js +88 -0
- package/dist/purchase.js.map +1 -0
- package/dist/runtime.d.ts.map +1 -1
- package/dist/runtime.js +18 -2
- package/dist/runtime.js.map +1 -1
- package/dist/schema-version.d.ts +3 -1
- package/dist/schema-version.d.ts.map +1 -1
- package/dist/schema-version.js +5 -3
- package/dist/schema-version.js.map +1 -1
- package/dist/styles.css +4 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -62,10 +62,42 @@ the variable name through `count_variable`:
|
|
|
62
62
|
The component subscribes to that DivKit variable and applies the same prepend
|
|
63
63
|
animation for each increment.
|
|
64
64
|
|
|
65
|
+
### Progress bar and animated number
|
|
66
|
+
|
|
67
|
+
`schemaVersion: 3` documents can also use `pnlight.progress_bar` and
|
|
68
|
+
`pnlight.animated_number`, with the same props as the iOS components. The bar
|
|
69
|
+
animates from its current fill to a new `progress`, and the label counts
|
|
70
|
+
through every value between the displayed number and a new `value`, so markup
|
|
71
|
+
does not have to drive either with DivKit animations.
|
|
72
|
+
|
|
73
|
+
The same reactivity rule applies: keep `progress` / `value` as the literal
|
|
74
|
+
initial value and name the variable in `progress_variable` / `value_variable`.
|
|
75
|
+
|
|
76
|
+
```json
|
|
77
|
+
{
|
|
78
|
+
"type": "custom",
|
|
79
|
+
"custom_type": "pnlight.progress_bar",
|
|
80
|
+
"width": { "type": "match_parent" },
|
|
81
|
+
"height": { "type": "fixed", "value": 10 },
|
|
82
|
+
"custom_props": {
|
|
83
|
+
"instance_id": "scan",
|
|
84
|
+
"progress": 0,
|
|
85
|
+
"progress_variable": "scan_progress"
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
Numbers are formatted with `Intl.NumberFormat` for the browser's locale, the
|
|
91
|
+
web bar uses a CSS transition, and both components respect
|
|
92
|
+
`prefers-reduced-motion`. On the web `track_height` is also the bar's minimum
|
|
93
|
+
thickness, so give it the same value as any DivKit `height` thinner than its
|
|
94
|
+
`8` default. In a `schemaVersion` 1 or 2 document neither
|
|
95
|
+
`custom_type` is registered, matching the native version gate.
|
|
96
|
+
|
|
65
97
|
## PNLight actions
|
|
66
98
|
|
|
67
99
|
Navigation, dialogs, and haptics are consumed inside the component for
|
|
68
|
-
`schemaVersion: 2` documents. Observe them when needed:
|
|
100
|
+
`schemaVersion: 2` and `schemaVersion: 3` documents. Observe them when needed:
|
|
69
101
|
|
|
70
102
|
```tsx
|
|
71
103
|
<RemoteUi
|
|
@@ -94,6 +126,12 @@ explicit height when the document uses `match_parent`:
|
|
|
94
126
|
- Missing `schemaVersion`, or version `1`, keeps legacy edge-to-edge behavior.
|
|
95
127
|
- `schemaVersion: 2` enables PNLight flows, safe areas, scaling variables,
|
|
96
128
|
dialogs, and haptics.
|
|
129
|
+
- `schemaVersion: 3` preserves all v2 behavior, accepts SDK-owned typed
|
|
130
|
+
actions such as `pnlight.purchase`, and registers the `pnlight.progress_bar`
|
|
131
|
+
and `pnlight.animated_number` components. Web opens a simple purchase
|
|
132
|
+
simulator showing the product ID. `Success` executes `on_success`; `Fail`
|
|
133
|
+
closes the simulator without executing it. No real StoreKit transaction
|
|
134
|
+
occurs.
|
|
97
135
|
- CTA, icon button, circular loader, animated prepend list, and Lottie support
|
|
98
136
|
are additive.
|
|
99
137
|
|
|
@@ -1,4 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Discards state retained for a direct document mounted into a persistent host.
|
|
3
|
+
* Flow-route stores are keyed by their disposable route elements and become
|
|
4
|
+
* unreachable when the flow is destroyed.
|
|
5
|
+
*/
|
|
6
|
+
export declare function clearPNLightComponentSnapshots(host: Element): void;
|
|
7
|
+
/**
|
|
8
|
+
* Registers the PNLight custom elements and maps them to their `custom_type`.
|
|
9
|
+
*
|
|
10
|
+
* Components introduced in a later schema version stay unmapped in an older
|
|
11
|
+
* document, matching the native renderer's version gate.
|
|
12
|
+
*/
|
|
13
|
+
export declare function registerPNLightComponents(schemaVersion?: RemoteUiSchemaVersion): Map<string, {
|
|
2
14
|
element: string;
|
|
3
15
|
}>;
|
|
16
|
+
import { type RemoteUiSchemaVersion } from "./schema-version.js";
|
|
4
17
|
//# sourceMappingURL=custom-components.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"custom-components.d.ts","sourceRoot":"","sources":["../src/custom-components.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"custom-components.d.ts","sourceRoot":"","sources":["../src/custom-components.ts"],"names":[],"mappings":"AA2JA;;;;GAIG;AACH,wBAAgB,8BAA8B,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAIlE;AAy5CD;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,aAAa,GAAE,qBAA8C,GAC5D,GAAG,CAAC,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAqBlC;AAMD,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,qBAAqB,CAAC"}
|