@pnlight/sdk-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) PNLight
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,101 @@
+# `@pnlight/sdk-react`
+
+A thin React wrapper around the official DivKit Web renderer with PNLight
+Remote UI behavior installed automatically.
+
+## Install
+
+```sh
+npm install @pnlight/sdk-react
+```
+
+## Use
+
+```tsx
+import { RemoteUi } from "@pnlight/sdk-react";
+import "@pnlight/sdk-react/styles.css";
+
+export function Screen({ config }: { config: object }) {
+  return (
+    <RemoteUi
+      id="home"
+      json={config}
+      theme="system"
+      onCustomAction={(action) => {
+        console.log(action.url);
+      }}
+      onError={({ error }) => {
+        console.error(error);
+      }}
+    />
+  );
+}
+```
+
+Like the official `@divkitframework/react` package, the component accepts the
+DivKit client render options except `target` and `hydrate`. PNLight supplies its
+own target, custom components, global scaling/safe-area variables, Lottie
+extension, and protocol handlers.
+
+The package also exports `PNLightDivKit` as an alias for `RemoteUi`.
+
+The registered custom components include `pnlight.animated_prepend_list`. It
+uses the same props as the iOS component: increasing `count` by one smoothly
+prepends the next discovery-ordered item, while larger jumps or resets apply
+immediately. Rows use intrinsic content height, and `instance_id` preserves the
+displayed count if DivKit replaces the underlying custom element.
+
+On the web, DivKit does not make expressions inside `custom_props` reactive.
+For a variable-driven list, keep `count` as a literal initial value and pass
+the variable name through `count_variable`:
+
+```json
+{
+  "custom_props": {
+    "count": 0,
+    "count_variable": "visible_item_count",
+    "items": []
+  }
+}
+```
+
+The component subscribes to that DivKit variable and applies the same prepend
+animation for each increment.
+
+## PNLight actions
+
+Navigation, dialogs, and haptics are consumed inside the component for
+`schemaVersion: 2` documents. Observe them when needed:
+
+```tsx
+<RemoteUi
+  id="offer"
+  json={config}
+  onPNLightAction={({ kind, url, logId, message }) => {
+    console.log(kind, url, logId, message);
+  }}
+/>
+```
+
+Unconsumed custom URLs continue through DivKit's standard `onCustomAction`
+callback.
+
+## Styling
+
+Import `@pnlight/sdk-react/styles.css` once. Give the component or its parent an
+explicit height when the document uses `match_parent`:
+
+```tsx
+<RemoteUi id="full-screen" json={config} style={{ minHeight: "100dvh" }} />
+```
+
+## Compatibility
+
+- Missing `schemaVersion`, or version `1`, keeps legacy edge-to-edge behavior.
+- `schemaVersion: 2` enables PNLight flows, safe areas, scaling variables,
+  dialogs, and haptics.
+- CTA, icon button, circular loader, animated prepend list, and Lottie support
+  are additive.
+
+This initial package is client-side only. Use it from a client component in
+SSR frameworks.

package/dist/RemoteUi.d.ts

@@ -0,0 +1,16 @@
+import { type CSSProperties, type ReactElement } from "react";
+import { type RemoteUiRenderOptions } from "./runtime.js";
+export type RemoteUiProps = Omit<RemoteUiRenderOptions, "target"> & {
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * Declarative PNLight wrapper around DivKit's client renderer.
+ *
+ * PNLight-owned flow navigation, safe-area/scaling variables, dialogs,
+ * haptics, Lottie, and custom components are installed automatically.
+ */
+export declare function RemoteUi(props: RemoteUiProps): ReactElement;
+/** A descriptive alias for teams that want to distinguish it from host UI. */
+export declare const PNLightDivKit: typeof RemoteUi;
+//# sourceMappingURL=RemoteUi.d.ts.map

package/dist/RemoteUi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteUi.d.ts","sourceRoot":"","sources":["../src/RemoteUi.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,GAAG;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAiBF;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CAwC3D;AAED,8EAA8E;AAC9E,eAAO,MAAM,aAAa,iBAAW,CAAC"}

package/dist/RemoteUi.js

@@ -0,0 +1,48 @@
+import { createElement, useEffect, useRef } from "react";
+import { mountRemoteUi } from "./runtime.js";
+function shallowEqualOptions(left, right) {
+    const leftKeys = Object.keys(left);
+    const rightKeys = Object.keys(right);
+    return leftKeys.length === rightKeys.length
+        && leftKeys.every((key) => Object.is(left[key], right[key]));
+}
+/**
+ * Declarative PNLight wrapper around DivKit's client renderer.
+ *
+ * PNLight-owned flow navigation, safe-area/scaling variables, dialogs,
+ * haptics, Lottie, and custom components are installed automatically.
+ */
+export function RemoteUi(props) {
+    const targetRef = useRef(null);
+    const { className, style, onStat, onCustomAction, onError, onPNLightAction, ...renderOptions } = props;
+    const callbackRef = useRef({});
+    callbackRef.current = { onStat, onCustomAction, onError, onPNLightAction };
+    const stableOptionsRef = useRef(renderOptions);
+    if (!shallowEqualOptions(stableOptionsRef.current, renderOptions)) {
+        stableOptionsRef.current = renderOptions;
+    }
+    const stableRenderOptions = stableOptionsRef.current;
+    useEffect(() => {
+        const target = targetRef.current;
+        if (!target)
+            return;
+        const mounted = mountRemoteUi({
+            ...stableRenderOptions,
+            target,
+            onStat: (...args) => callbackRef.current.onStat?.(...args),
+            onCustomAction: (...args) => callbackRef.current.onCustomAction?.(...args),
+            onError: (...args) => callbackRef.current.onError?.(...args),
+            onPNLightAction: (...args) => callbackRef.current.onPNLightAction?.(...args)
+        });
+        return () => mounted.destroy();
+    }, [stableRenderOptions]);
+    return createElement("div", {
+        ref: targetRef,
+        className,
+        style,
+        suppressHydrationWarning: true
+    });
+}
+/** A descriptive alias for teams that want to distinguish it from host UI. */
+export const PNLightDivKit = RemoteUi;
+//# sourceMappingURL=RemoteUi.js.map

package/dist/RemoteUi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteUi.js","sourceRoot":"","sources":["../src/RemoteUi.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,SAAS,EACT,MAAM,EAGP,MAAM,OAAO,CAAC;AACf,OAAO,EACL,aAAa,EAEd,MAAM,cAAc,CAAC;AAYtB,SAAS,mBAAmB,CAC1B,IAA0E,EAC1E,KAA2E;IAE3E,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAA6B,CAAC;IAC/D,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAA8B,CAAC;IAClE,OAAO,QAAQ,CAAC,MAAM,KAAK,SAAS,CAAC,MAAM;WACtC,QAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACjE,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,EACJ,SAAS,EACT,KAAK,EACL,MAAM,EACN,cAAc,EACd,OAAO,EACP,eAAe,EACf,GAAG,aAAa,EACjB,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAG,MAAM,CAAoB,EAAE,CAAC,CAAC;IAClD,WAAW,CAAC,OAAO,GAAG,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC;IAE3E,MAAM,gBAAgB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IAC/C,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,EAAE,CAAC;QAClE,gBAAgB,CAAC,OAAO,GAAG,aAAa,CAAC;IAC3C,CAAC;IACD,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,OAAO,CAAC;IAErD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,MAAM,OAAO,GAAG,aAAa,CAAC;YAC5B,GAAG,mBAAmB;YACtB,MAAM;YACN,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;YAC1D,cAAc,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,IAAI,CAAC;YAC1E,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,GAAG,IAAI,CAAC;YAC5D,eAAe,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,eAAe,EAAE,CAAC,GAAG,IAAI,CAAC;SAC7E,CAAC,CAAC;QACH,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;IACjC,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAE1B,OAAO,aAAa,CAAC,KAAK,EAAE;QAC1B,GAAG,EAAE,SAAS;QACd,SAAS;QACT,KAAK;QACL,wBAAwB,EAAE,IAAI;KAC/B,CAAC,CAAC;AACL,CAAC;AAED,8EAA8E;AAC9E,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC"}

package/dist/custom-components.d.ts

@@ -0,0 +1,4 @@
+export declare function registerPNLightComponents(): Map<string, {
+    element: string;
+}>;
+//# sourceMappingURL=custom-components.d.ts.map

package/dist/custom-components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-components.d.ts","sourceRoot":"","sources":["../src/custom-components.ts"],"names":[],"mappings":"AAqgCA,wBAAgB,yBAAyB,IAAI,GAAG,CAAC,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAqB5E"}