@openreceive/svelte 0.1.1 → 0.2.1

package/README.md

@@ -0,0 +1,30 @@
+# @openreceive/svelte
+
+Svelte wrapper for the OpenReceive checkout custom element. Requires Svelte 5.
+
+## Mount
+
+The component ships as a raw SFC on the `@openreceive/svelte/checkout.svelte`
+subpath (your bundler's Svelte plugin compiles it); import the checkout styles
+once.
+
+```svelte
+<script lang="ts">
+import Checkout from "@openreceive/svelte/checkout.svelte";
+import "@openreceive/svelte/styles.css";
+</script>
+
+<Checkout reference="order-123" onSettled={() => console.log("paid")} />
+```
+
+Pass `reference` to let the element create the checkout (create mode), or pass a
+`checkout` snapshot to render one your server already created. Prop names,
+defaults, and the full surface are shared across the wrappers — see
+`docs/internal/wrapper-parity.md` in the repository.
+
+Event handlers (`onCopy`, `onOpenWallet`, `onState`, `onSettled`,
+`onProviderCopy`, `onStartOver`, `onError`) are ordinary props, not
+framework-native events: pass them as props (`onSettled={handler}`), not with
+`on:settled`. Each receives the DOM `CustomEvent` the element dispatches.
+
+Part of [OpenReceive](https://openreceive.org). Start with the [Node quickstart](https://github.com/openreceive/openreceive/blob/master/docs/guides/quickstart-node.md); the full API is in the [API reference](https://github.com/openreceive/openreceive/blob/master/docs/guides/api-reference.md).

package/dist/Checkout.svelte

@@ -1,62 +1,133 @@
 <script lang="ts">
-  import {
-    createOpenReceiveSvelteCheckoutShellBinding,
-    defineOpenReceiveElements,
-    type CheckoutElementListeners,
-    type CheckoutShellOptions,
-    type CheckoutSnapshot
-  } from "./index.js";
-
-  export let snapshot: CheckoutSnapshot;
-  export let options: CheckoutShellOptions = {};
-
-  $: shell = createOpenReceiveSvelteCheckoutShellBinding(snapshot, options);
-
-  if (typeof window !== "undefined") {
-    defineOpenReceiveElements();
-  }
-
-  function checkoutListeners(node: HTMLElement, listeners: CheckoutElementListeners) {
-    let activeListeners = listeners;
-
-    const attach = () => {
-      for (const [name, listener] of Object.entries(activeListeners)) {
-        if (listener !== undefined) {
-          node.addEventListener(name, listener);
-        }
-      }
-    };
-    const detach = () => {
-      for (const [name, listener] of Object.entries(activeListeners)) {
-        if (listener !== undefined) {
-          node.removeEventListener(name, listener);
-        }
+import { onMount } from "svelte";
+import {
+  createWrapperCheckoutShellBinding,
+  defineElements,
+  validateCheckoutProps,
+  type CheckoutElementListeners,
+  type CheckoutShellOptions,
+  type CheckoutSnapshot,
+  type ThemePreference,
+} from "./index.js";
+
+// Prop names, defaults, and per-mode applicability are the shared contract in
+// docs/internal/wrapper-parity.md. This list RESTATES it because Svelte props
+// are declarations, not a type: `export let` (and `let { … } = $props()` under
+// runes) has to name every prop, so it cannot be derived from
+// WrapperCheckoutComponentProps the way Vue's defineProps and
+// React's CheckoutProps are. The duplication is forced, not neglected;
+// tests/wrapper-parity.test.mjs is what keeps it in step.
+// Snapshot mode: pass a `checkout` to render it directly.
+// Create mode: omit `checkout` and pass `reference` (+ optional `prefix`); the underlying
+// <openreceive-checkout> element creates the checkout, then renders and polls itself.
+export let checkout: CheckoutSnapshot | undefined = undefined;
+export let reference: string | undefined = undefined;
+export let prefix: string | undefined = undefined;
+export let paymentWizard: boolean | undefined = undefined;
+export let decodeLinkUrl: string | undefined = undefined;
+export let themeToggle: boolean | undefined = undefined;
+export let defaultTheme: ThemePreference | undefined = undefined;
+export let storageKey: string | undefined = undefined;
+// Create mode only.
+export let metadata: Record<string, unknown> | undefined = undefined;
+export let syncUrl: boolean | undefined = undefined;
+export let resumePathPrefix: string | undefined = undefined;
+export let routeReference: string | undefined = undefined;
+export let onCopy: ((event: Event) => void) | undefined = undefined;
+export let onOpenWallet: ((event: Event) => void) | undefined = undefined;
+export let onState: ((event: Event) => void) | undefined = undefined;
+export let onSettled: ((event: Event) => void) | undefined = undefined;
+export let onProviderCopy: ((event: Event) => void) | undefined = undefined;
+export let onStartOver: ((event: Event) => void) | undefined = undefined;
+export let onError: ((event: Event) => void) | undefined = undefined;
+export let options: CheckoutShellOptions = {};
+
+// Storage and matchMedia only exist in the browser: resolving the theme before mount
+// would make a server-rendered shell disagree with the first client render.
+let mounted = false;
+
+onMount(() => {
+  defineElements();
+  mounted = true;
+});
+
+$: validateCheckoutProps({
+  framework: "@openreceive/svelte",
+  checkout,
+  reference,
+  metadata,
+  syncUrl,
+  resumePathPrefix,
+  routeReference,
+});
+
+$: shell = createWrapperCheckoutShellBinding(checkout ?? null, {
+  ...options,
+  themeToggle: themeToggle ?? options.themeToggle ?? true,
+  deferThemeResolution: !mounted,
+  ...(reference === undefined ? {} : { reference }),
+  ...(prefix === undefined ? {} : { prefix }),
+  ...(paymentWizard === undefined ? {} : { paymentWizard }),
+  ...(decodeLinkUrl === undefined ? {} : { decodeLinkUrl }),
+  ...(defaultTheme === undefined ? {} : { defaultTheme }),
+  ...(storageKey === undefined ? {} : { storageKey }),
+  ...(metadata === undefined ? {} : { metadata }),
+  ...(syncUrl === undefined ? {} : { syncUrl }),
+  ...(resumePathPrefix === undefined ? {} : { resumePathPrefix }),
+  ...(routeReference === undefined ? {} : { routeReference }),
+  ...(onCopy === undefined ? {} : { onCopy }),
+  ...(onOpenWallet === undefined ? {} : { onOpenWallet }),
+  ...(onState === undefined ? {} : { onState }),
+  ...(onSettled === undefined ? {} : { onSettled }),
+  ...(onProviderCopy === undefined ? {} : { onProviderCopy }),
+  ...(onStartOver === undefined ? {} : { onStartOver }),
+  ...(onError === undefined ? {} : { onError }),
+});
+
+// biome-ignore lint/correctness/noUnusedVariables: applied by the use: directive below, which biome does not read.
+function checkoutListeners(node: HTMLElement, listeners: CheckoutElementListeners) {
+  let activeListeners = listeners;
+
+  const attach = () => {
+    for (const [name, listener] of Object.entries(activeListeners)) {
+      if (listener !== undefined) {
+        node.addEventListener(name, listener);
       }
-    };
-
-    attach();
-
-    return {
-      update(nextListeners: CheckoutElementListeners) {
-        detach();
-        activeListeners = nextListeners;
-        attach();
-      },
-      destroy() {
-        detach();
+    }
+  };
+  const detach = () => {
+    for (const [name, listener] of Object.entries(activeListeners)) {
+      if (listener !== undefined) {
+        node.removeEventListener(name, listener);
       }
-    };
-  }
+    }
+  };
+
+  attach();
+
+  return {
+    update(nextListeners: CheckoutElementListeners) {
+      detach();
+      activeListeners = nextListeners;
+      attach();
+    },
+    destroy() {
+      detach();
+    },
+  };
+}
 </script>
 
-<section {...shell.rootProps}>
-  <svelte:element
-    this={shell.themeToggle.tagName}
-    {...shell.themeToggle.props}
-  />
+<section {...shell.rootAttributes}>
+  {#if shell.themeToggle}
+    <svelte:element
+      this={shell.themeToggle.tagName}
+      {...shell.themeToggle.attributes}
+    />
+  {/if}
   <svelte:element
     this={shell.checkout.tagName}
-    {...shell.checkout.props}
-    use:checkoutListeners={shell.checkout.events}
+    {...shell.checkout.attributes}
+    use:checkoutListeners={shell.checkout.listeners}
   />
 </section>

package/dist/Checkout.svelte.d.ts

@@ -0,0 +1,14 @@
+// Hand-written module shape for the shipped SFC (the raw component is copied into dist
+// by the package build, so no compiler emits this). The props themselves come from the
+// shared wrapper type, so the surface exists in exactly one place.
+//
+// Typed as Svelte 5's `Component`, not a `SvelteComponent` subclass: the peer
+// is Svelte >= 5, where `new Checkout(...)` throws and `mount()` is the only
+// way in — a class typing advertised an instantiation that fails.
+import type { Component } from "svelte";
+import type { WrapperCheckoutComponentProps } from "./index.js";
+
+export type SvelteCheckoutProps = WrapperCheckoutComponentProps;
+
+declare const Checkout: Component<SvelteCheckoutProps>;
+export default Checkout;

package/dist/index.d.ts

@@ -1,42 +1 @@
-import { OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME, OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME, type CreateCheckoutShellOptions, type CheckoutElementAttributeOptions, type CheckoutElementAttributes, type CheckoutElementEventHandlers, type CheckoutElementListeners, type CheckoutController, type CheckoutControllerOptions, type CheckoutShellElements, type CheckoutShellOptions, type CheckoutSnapshot, type OpenReceiveStoredThemeModelOptions, type OpenReceiveThemeModel, type OpenReceiveThemeModelOptions, type OpenReceiveThemePreference, type OpenReceiveThemeToggleElementAttributeOptions, type OpenReceiveThemeToggleElementAttributes } from "@openreceive/browser/internal";
-import { defineOpenReceiveElements, type DefineOpenReceiveElementsOptions } from "@openreceive/elements";
-export { OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS, OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME, OPENRECEIVE_THEME_STORAGE_KEY, OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME, applyCheckoutThemeAttributes, applyOpenReceiveThemeAttributes, createCheckoutController, createCheckoutElement, createCheckoutElementAttributes, createCheckoutElementListeners, createCheckoutShell, createCheckoutShellModel, createOpenReceiveStoredThemeModel, createOpenReceiveThemeModel, createOpenReceiveThemeToggleElement, createOpenReceiveThemeToggleElementAttributes, readOpenReceiveThemePreference, syncOpenReceiveStoredThemeControls, toggleOpenReceiveStoredThemeControls, toggleOpenReceiveStoredThemePreference, writeOpenReceiveThemePreference } from "@openreceive/browser/internal";
-export type { CreateCheckoutElementOptions, CreateCheckoutShellOptions, CreateOpenReceiveThemeToggleElementOptions, CheckoutElementAttributeOptions, CheckoutElementAttributes, CheckoutElementDocument, CheckoutElementEventHandlers, CheckoutElementListeners, CheckoutController, CheckoutControllerOptions, CheckoutShellElements, CheckoutShellCheckoutBinding, CheckoutShellModel, CheckoutShellOptions, CheckoutShellThemeToggleBinding, CheckoutElementTarget, CheckoutSnapshot, OpenReceiveReadThemePreferenceOptions, OpenReceiveStoredThemeModelOptions, OpenReceiveThemeAttributeTarget, OpenReceiveThemeControlTargets, OpenReceiveThemeLabelTarget, OpenReceiveThemeModel, OpenReceiveThemeModelOptions, OpenReceiveThemePreference, OpenReceiveThemeStorageOptions, OpenReceiveThemeToggleElementAttributeOptions, OpenReceiveThemeToggleElementAttributes } from "@openreceive/browser/internal";
-export { defineOpenReceiveElements } from "@openreceive/elements";
-export type { DefineOpenReceiveElementsOptions } from "@openreceive/elements";
-export interface OpenReceiveSvelteCheckoutPropsOptions extends CheckoutElementAttributeOptions {
-}
-export interface OpenReceiveSvelteCheckoutBindingOptions extends OpenReceiveSvelteCheckoutPropsOptions, CheckoutElementEventHandlers {
-}
-export interface OpenReceiveSvelteCheckoutBinding {
-    readonly tagName: typeof OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME;
-    readonly props: CheckoutElementAttributes;
-    readonly events: CheckoutElementListeners;
-}
-export interface OpenReceiveSvelteThemeToggleBinding {
-    readonly tagName: typeof OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME;
-    readonly props: OpenReceiveThemeToggleElementAttributes;
-}
-export interface OpenReceiveSvelteCheckoutShellBinding {
-    readonly theme: OpenReceiveThemeModel;
-    readonly rootProps: OpenReceiveThemeModel["attributes"];
-    readonly checkout: OpenReceiveSvelteCheckoutBinding;
-    readonly themeToggle: OpenReceiveSvelteThemeToggleBinding;
-}
-export interface OpenReceiveSvelteCheckoutComponentOptions extends CheckoutShellOptions {
-    readonly defineElementsOptions?: DefineOpenReceiveElementsOptions;
-}
-export interface OpenReceiveSvelteCheckoutComponentModel extends OpenReceiveSvelteCheckoutShellBinding {
-    readonly componentName: "Checkout";
-    readonly defineElements: typeof defineOpenReceiveElements;
-    readonly defineElementsOptions?: DefineOpenReceiveElementsOptions;
-}
-export declare function createOpenReceiveSvelteCheckoutProps(snapshot: CheckoutSnapshot, options?: OpenReceiveSvelteCheckoutPropsOptions): CheckoutElementAttributes;
-export declare function createOpenReceiveSvelteCheckoutBinding(snapshot: CheckoutSnapshot, options?: OpenReceiveSvelteCheckoutBindingOptions): OpenReceiveSvelteCheckoutBinding;
-export declare function createOpenReceiveSvelteThemeBinding(theme: OpenReceiveThemePreference, options?: OpenReceiveThemeModelOptions): OpenReceiveThemeModel;
-export declare function createOpenReceiveSvelteStoredThemeBinding(options?: OpenReceiveStoredThemeModelOptions): OpenReceiveThemeModel;
-export declare function createOpenReceiveSvelteThemeToggleBinding(options?: OpenReceiveThemeToggleElementAttributeOptions): OpenReceiveSvelteThemeToggleBinding;
-export declare function createOpenReceiveSvelteCheckoutShellBinding(snapshot: CheckoutSnapshot, options?: CheckoutShellOptions): OpenReceiveSvelteCheckoutShellBinding;
-export declare function createOpenReceiveSvelteCheckoutComponentModel(snapshot: CheckoutSnapshot, options?: OpenReceiveSvelteCheckoutComponentOptions): OpenReceiveSvelteCheckoutComponentModel;
-export declare function createOpenReceiveSvelteCheckoutController(options: CheckoutControllerOptions): CheckoutController;
-export declare function createOpenReceiveSvelteCheckoutShell(snapshot: CheckoutSnapshot, options?: CreateCheckoutShellOptions): CheckoutShellElements;
+export * from '@openreceive/elements/wrapper-shared';

package/dist/index.js

@@ -1,58 +1,2 @@
-import { OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME, OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME, createCheckoutController, createCheckoutShell, createCheckoutShellModel, createCheckoutElementAttributes, createCheckoutElementListeners, createOpenReceiveStoredThemeModel, createOpenReceiveThemeModel, createOpenReceiveThemeToggleElementAttributes } from "@openreceive/browser/internal";
-import { defineOpenReceiveElements } from "@openreceive/elements";
-export { OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS, OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME, OPENRECEIVE_THEME_STORAGE_KEY, OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME, applyCheckoutThemeAttributes, applyOpenReceiveThemeAttributes, createCheckoutController, createCheckoutElement, createCheckoutElementAttributes, createCheckoutElementListeners, createCheckoutShell, createCheckoutShellModel, createOpenReceiveStoredThemeModel, createOpenReceiveThemeModel, createOpenReceiveThemeToggleElement, createOpenReceiveThemeToggleElementAttributes, readOpenReceiveThemePreference, syncOpenReceiveStoredThemeControls, toggleOpenReceiveStoredThemeControls, toggleOpenReceiveStoredThemePreference, writeOpenReceiveThemePreference } from "@openreceive/browser/internal";
-export { defineOpenReceiveElements } from "@openreceive/elements";
-export function createOpenReceiveSvelteCheckoutProps(snapshot, options = {}) {
-    return createCheckoutElementAttributes(snapshot, options);
-}
-export function createOpenReceiveSvelteCheckoutBinding(snapshot, options = {}) {
-    return {
-        tagName: OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME,
-        props: createOpenReceiveSvelteCheckoutProps(snapshot, options),
-        events: createCheckoutElementListeners(options)
-    };
-}
-export function createOpenReceiveSvelteThemeBinding(theme, options = {}) {
-    return createOpenReceiveThemeModel(theme, options);
-}
-export function createOpenReceiveSvelteStoredThemeBinding(options = {}) {
-    return createOpenReceiveStoredThemeModel(options);
-}
-export function createOpenReceiveSvelteThemeToggleBinding(options = {}) {
-    return {
-        tagName: OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME,
-        props: createOpenReceiveThemeToggleElementAttributes(options)
-    };
-}
-export function createOpenReceiveSvelteCheckoutShellBinding(snapshot, options = {}) {
-    const shell = createCheckoutShellModel(snapshot, options);
-    return {
-        theme: shell.theme,
-        rootProps: shell.rootAttributes,
-        checkout: {
-            tagName: shell.checkout.tagName,
-            props: shell.checkout.attributes,
-            events: shell.checkout.listeners
-        },
-        themeToggle: {
-            tagName: shell.themeToggle.tagName,
-            props: shell.themeToggle.attributes
-        }
-    };
-}
-export function createOpenReceiveSvelteCheckoutComponentModel(snapshot, options = {}) {
-    const { defineElementsOptions, ...shellOptions } = options;
-    const shell = createOpenReceiveSvelteCheckoutShellBinding(snapshot, shellOptions);
-    return {
-        componentName: "Checkout",
-        defineElements: defineOpenReceiveElements,
-        defineElementsOptions,
-        ...shell
-    };
-}
-export function createOpenReceiveSvelteCheckoutController(options) {
-    return createCheckoutController(options);
-}
-export function createOpenReceiveSvelteCheckoutShell(snapshot, options = {}) {
-    return createCheckoutShell(snapshot, options);
-}
+// src/index.ts
+export * from "@openreceive/elements/wrapper-shared";

package/package.json

@@ -1,28 +1,68 @@
 {
   "name": "@openreceive/svelte",
-  "version": "0.1.1",
+  "version": "0.2.1",
+  "description": "Svelte wrapper for the OpenReceive checkout custom element.",
+  "keywords": [
+    "bitcoin",
+    "lightning",
+    "payments",
+    "nwc",
+    "bolt11",
+    "openreceive",
+    "svelte",
+    "checkout"
+  ],
   "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
   "dependencies": {
-    "@openreceive/browser": "0.1.1",
-    "@openreceive/elements": "0.1.1"
+    "@openreceive/browser": "0.2.1",
+    "@openreceive/elements": "0.2.1"
   },
   "peerDependencies": {
-    "svelte": ">=4.0.0 || >=5.0.0"
-  },
-  "peerDependenciesMeta": {
-    "svelte": {
-      "optional": true
-    }
+    "svelte": ">=5.0.0"
   },
   "exports": {
-    ".": "./dist/index.js",
-    "./checkout.svelte": "./dist/Checkout.svelte",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    },
+    "./checkout.svelte": {
+      "types": "./dist/Checkout.svelte.d.ts",
+      "svelte": "./dist/Checkout.svelte",
+      "default": "./dist/Checkout.svelte"
+    },
     "./styles.css": "./dist/styles.css"
   },
-  "types": "./dist/index.d.ts",
   "files": [
     "dist",
     "README.md",
     "LICENSE"
-  ]
-}
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean --target es2022 --out-dir dist && node ../../../tools/package/copy-static.mjs src dist styles.css Checkout.svelte Checkout.svelte.d.ts",
+    "prepack": "npm run build"
+  },
+  "license": "MIT",
+  "author": "OpenReceive <info@openreceive.org>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openreceive/openreceive.git",
+    "directory": "packages/js/svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/openreceive/openreceive/issues"
+  },
+  "homepage": "https://openreceive.org",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}