@openreceive/vue 0.1.1 → 0.2.2

package/README.md

@@ -0,0 +1,31 @@
+# @openreceive/vue
+
+Vue wrapper for the OpenReceive checkout custom element.
+
+## Mount
+
+The component ships as a raw SFC on the `@openreceive/vue/checkout.vue` subpath
+(your bundler's Vue plugin compiles it); import the checkout styles once.
+
+```vue
+<script setup lang="ts">
+import Checkout from "@openreceive/vue/checkout.vue";
+import "@openreceive/vue/styles.css";
+</script>
+
+<template>
+  <Checkout reference="order-123" :onSettled="() => console.log('paid')" />
+</template>
+```
+
+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: bind them as props (`:onSettled="handler"`), not with
+`@settled`/`v-on`. 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.vue

@@ -1,40 +1,85 @@
 <script setup lang="ts">
-import { computed, onMounted } from "vue";
+import { computed, onMounted, ref } from "vue";
 import {
-  createOpenReceiveVueCheckoutShellBinding,
-  defineOpenReceiveElements,
-  type CheckoutShellOptions,
-  type CheckoutSnapshot
+  createWrapperCheckoutShellBinding,
+  defineElements,
+  validateCheckoutProps,
+  type WrapperCheckoutComponentProps,
 } from "./index.js";
 
-const props = withDefaults(
-  defineProps<{
-    snapshot: CheckoutSnapshot;
-    options?: CheckoutShellOptions;
-  }>(),
-  {
-    options: () => ({})
-  }
-);
+defineOptions({
+  name: "Checkout",
+});
+
+// The props are DERIVED from the shared wrapper surface, not restated: prop
+// names, types, and per-mode applicability live once in
+// @openreceive/elements/wrapper-shared (snapshot mode = `checkout`, create mode
+// = `reference` + optional `prefix`), and docs/internal/wrapper-parity.md is the
+// human-readable contract. `withDefaults` still spells the defaults out — a
+// type carries none.
+const props = withDefaults(defineProps<WrapperCheckoutComponentProps>(), {
+  options: () => ({}),
+  // Explicit undefined defaults suppress Vue's absent-Boolean-prop-to-false
+  // coercion: an unbound boolean prop must stay undefined so the
+  // `?? options.* ?? default` chains below see "not set", not "false".
+  paymentWizard: undefined,
+  themeToggle: undefined,
+  syncUrl: undefined,
+});
 
+// 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.
+const mounted = ref(false);
 onMounted(() => {
-  defineOpenReceiveElements();
+  mounted.value = true;
+  defineElements();
 });
 
-const shell = computed(() =>
-  createOpenReceiveVueCheckoutShellBinding(props.snapshot, props.options)
-);
+const shell = computed(() => {
+  validateCheckoutProps({
+    framework: "@openreceive/vue",
+    checkout: props.checkout,
+    reference: props.reference,
+    metadata: props.metadata,
+    syncUrl: props.syncUrl,
+    resumePathPrefix: props.resumePathPrefix,
+    routeReference: props.routeReference,
+  });
+  return createWrapperCheckoutShellBinding(props.checkout ?? null, {
+    ...props.options,
+    themeToggle: props.themeToggle ?? props.options.themeToggle ?? true,
+    deferThemeResolution: !mounted.value,
+    ...(props.reference === undefined ? {} : { reference: props.reference }),
+    ...(props.prefix === undefined ? {} : { prefix: props.prefix }),
+    ...(props.paymentWizard === undefined ? {} : { paymentWizard: props.paymentWizard }),
+    ...(props.decodeLinkUrl === undefined ? {} : { decodeLinkUrl: props.decodeLinkUrl }),
+    ...(props.defaultTheme === undefined ? {} : { defaultTheme: props.defaultTheme }),
+    ...(props.storageKey === undefined ? {} : { storageKey: props.storageKey }),
+    ...(props.metadata === undefined ? {} : { metadata: props.metadata }),
+    ...(props.syncUrl === undefined ? {} : { syncUrl: props.syncUrl }),
+    ...(props.resumePathPrefix === undefined ? {} : { resumePathPrefix: props.resumePathPrefix }),
+    ...(props.routeReference === undefined ? {} : { routeReference: props.routeReference }),
+    ...(props.onCopy === undefined ? {} : { onCopy: props.onCopy }),
+    ...(props.onOpenWallet === undefined ? {} : { onOpenWallet: props.onOpenWallet }),
+    ...(props.onState === undefined ? {} : { onState: props.onState }),
+    ...(props.onSettled === undefined ? {} : { onSettled: props.onSettled }),
+    ...(props.onProviderCopy === undefined ? {} : { onProviderCopy: props.onProviderCopy }),
+    ...(props.onStartOver === undefined ? {} : { onStartOver: props.onStartOver }),
+    ...(props.onError === undefined ? {} : { onError: props.onError }),
+  });
+});
 </script>
 
 <template>
-  <section v-bind="shell.rootAttrs">
+  <section v-bind="shell.rootAttributes">
     <component
+      v-if="shell.themeToggle"
       :is="shell.themeToggle.tagName"
-      v-bind="shell.themeToggle.attrs"
+      v-bind="shell.themeToggle.attributes"
     />
     <component
       :is="shell.checkout.tagName"
-      v-bind="shell.checkout.attrs"
+      v-bind="shell.checkout.attributes"
       v-on="shell.checkout.listeners"
     />
   </section>

package/dist/Checkout.vue.d.ts

@@ -0,0 +1,11 @@
+// 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.
+import type { DefineComponent } from "vue";
+import type { WrapperCheckoutComponentProps } from "./index.js";
+
+export type VueCheckoutProps = WrapperCheckoutComponentProps;
+
+declare const Checkout: DefineComponent<VueCheckoutProps>;
+
+export default Checkout;

package/dist/index.d.ts

@@ -1,39 +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 OpenReceiveVueCheckoutBindingOptions extends CheckoutElementAttributeOptions, CheckoutElementEventHandlers {
-}
-export interface OpenReceiveVueCheckoutBinding {
-    readonly tagName: typeof OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME;
-    readonly attrs: CheckoutElementAttributes;
-    readonly listeners: CheckoutElementListeners;
-}
-export interface OpenReceiveVueThemeToggleBinding {
-    readonly tagName: typeof OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME;
-    readonly attrs: OpenReceiveThemeToggleElementAttributes;
-}
-export interface OpenReceiveVueCheckoutShellBinding {
-    readonly theme: OpenReceiveThemeModel;
-    readonly rootAttrs: OpenReceiveThemeModel["attributes"];
-    readonly checkout: OpenReceiveVueCheckoutBinding;
-    readonly themeToggle: OpenReceiveVueThemeToggleBinding;
-}
-export interface OpenReceiveVueCheckoutComponentOptions extends CheckoutShellOptions {
-    readonly defineElementsOptions?: DefineOpenReceiveElementsOptions;
-}
-export interface OpenReceiveVueCheckoutComponentModel extends OpenReceiveVueCheckoutShellBinding {
-    readonly componentName: "Checkout";
-    readonly defineElements: typeof defineOpenReceiveElements;
-    readonly defineElementsOptions?: DefineOpenReceiveElementsOptions;
-}
-export declare function createOpenReceiveVueCheckoutBinding(snapshot: CheckoutSnapshot, options?: OpenReceiveVueCheckoutBindingOptions): OpenReceiveVueCheckoutBinding;
-export declare function createOpenReceiveVueThemeBinding(theme: OpenReceiveThemePreference, options?: OpenReceiveThemeModelOptions): OpenReceiveThemeModel;
-export declare function createOpenReceiveVueStoredThemeBinding(options?: OpenReceiveStoredThemeModelOptions): OpenReceiveThemeModel;
-export declare function createOpenReceiveVueThemeToggleBinding(options?: OpenReceiveThemeToggleElementAttributeOptions): OpenReceiveVueThemeToggleBinding;
-export declare function createOpenReceiveVueCheckoutShellBinding(snapshot: CheckoutSnapshot, options?: CheckoutShellOptions): OpenReceiveVueCheckoutShellBinding;
-export declare function createOpenReceiveVueCheckoutComponentModel(snapshot: CheckoutSnapshot, options?: OpenReceiveVueCheckoutComponentOptions): OpenReceiveVueCheckoutComponentModel;
-export declare function createOpenReceiveVueCheckoutController(options: CheckoutControllerOptions): CheckoutController;
-export declare function createOpenReceiveVueCheckoutShell(snapshot: CheckoutSnapshot, options?: CreateCheckoutShellOptions): CheckoutShellElements;
+export * from '@openreceive/elements/wrapper-shared';

package/dist/index.js

@@ -1,55 +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 createOpenReceiveVueCheckoutBinding(snapshot, options = {}) {
-    return {
-        tagName: OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME,
-        attrs: createCheckoutElementAttributes(snapshot, options),
-        listeners: createCheckoutElementListeners(options)
-    };
-}
-export function createOpenReceiveVueThemeBinding(theme, options = {}) {
-    return createOpenReceiveThemeModel(theme, options);
-}
-export function createOpenReceiveVueStoredThemeBinding(options = {}) {
-    return createOpenReceiveStoredThemeModel(options);
-}
-export function createOpenReceiveVueThemeToggleBinding(options = {}) {
-    return {
-        tagName: OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME,
-        attrs: createOpenReceiveThemeToggleElementAttributes(options)
-    };
-}
-export function createOpenReceiveVueCheckoutShellBinding(snapshot, options = {}) {
-    const shell = createCheckoutShellModel(snapshot, options);
-    return {
-        theme: shell.theme,
-        rootAttrs: shell.rootAttributes,
-        checkout: {
-            tagName: shell.checkout.tagName,
-            attrs: shell.checkout.attributes,
-            listeners: shell.checkout.listeners
-        },
-        themeToggle: {
-            tagName: shell.themeToggle.tagName,
-            attrs: shell.themeToggle.attributes
-        }
-    };
-}
-export function createOpenReceiveVueCheckoutComponentModel(snapshot, options = {}) {
-    const { defineElementsOptions, ...shellOptions } = options;
-    const shell = createOpenReceiveVueCheckoutShellBinding(snapshot, shellOptions);
-    return {
-        componentName: "Checkout",
-        defineElements: defineOpenReceiveElements,
-        defineElementsOptions,
-        ...shell
-    };
-}
-export function createOpenReceiveVueCheckoutController(options) {
-    return createCheckoutController(options);
-}
-export function createOpenReceiveVueCheckoutShell(snapshot, options = {}) {
-    return createCheckoutShell(snapshot, options);
-}
+// src/index.ts
+export * from "@openreceive/elements/wrapper-shared";

package/package.json

@@ -1,28 +1,71 @@
 {
   "name": "@openreceive/vue",
-  "version": "0.1.1",
+  "version": "0.2.2",
+  "description": "Vue wrapper for the OpenReceive checkout custom element.",
+  "keywords": [
+    "bitcoin",
+    "lightning",
+    "payments",
+    "nwc",
+    "bolt11",
+    "openreceive",
+    "vue",
+    "checkout"
+  ],
   "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "dependencies": {
-    "@openreceive/browser": "0.1.1",
-    "@openreceive/elements": "0.1.1"
+    "@openreceive/browser": "0.2.2",
+    "@openreceive/elements": "0.2.2"
   },
   "peerDependencies": {
+    "typescript": ">=5.0.0",
     "vue": ">=3.4.0"
   },
   "peerDependenciesMeta": {
-    "vue": {
+    "typescript": {
       "optional": true
     }
   },
   "exports": {
-    ".": "./dist/index.js",
-    "./checkout.vue": "./dist/Checkout.vue",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./checkout.vue": {
+      "types": "./dist/Checkout.vue.d.ts",
+      "default": "./dist/Checkout.vue"
+    },
     "./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.vue Checkout.vue.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/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/openreceive/openreceive/issues"
+  },
+  "homepage": "https://openreceive.org",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}