@wetransform/vue 1.0.0

package/README.md

@@ -0,0 +1,110 @@
+# @wetransform/vue
+
+Vue 3 wrapper around `@wetransform/core` with a composable API and a renderless integration component.
+
+## Installation
+
+```bash
+npm install @wetransform/vue
+```
+
+## Composable usage
+
+```ts
+import { useWeTransform } from '@wetransform/vue'
+
+const { open, close, destroy, isOpen, weTransformInstance, on } = useWeTransform({
+  organizationHandle: 'acme',
+  authentication: {
+    customerId: 'customer-id',
+    signature: 'signed-token',
+  },
+})
+
+on('successSubmit', ({ redirectUrl }) => {
+  window.location.href = redirectUrl
+})
+
+await open()
+await close()
+await destroy()
+
+console.log(isOpen.value)
+console.log(weTransformInstance.value)
+```
+
+`useWeTransform(config)` returns:
+
+- `weTransformInstance`: readonly `Ref<WeTransformInstance | null>`
+- `isOpen`: readonly `Ref<boolean>`
+- `open()`: opens the SDK
+- `close()`: closes the SDK
+- `destroy()`: destroys the SDK instance (idempotent)
+- `on(event, handler)`: subscribes to SDK events and returns an unsubscribe function
+
+## Component usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { WeTransformSdk, type WeTransformConfig } from '@wetransform/vue'
+
+const isSdkOpen = ref(false)
+
+const config: WeTransformConfig = {
+  organizationHandle: 'acme',
+  authentication: {
+    customerId: 'customer-id',
+    signature: 'signed-token',
+  },
+}
+
+const onSuccessSubmit = ({ redirectUrl }: { redirectUrl: string }) => {
+  window.location.href = redirectUrl
+}
+</script>
+
+<template>
+  <button type="button" @click="isSdkOpen = true">Open Sender</button>
+
+  <WeTransformSdk
+    :config="config"
+    v-model:open="isSdkOpen"
+    :autoOpen="false"
+    @successSubmit="onSuccessSubmit"
+  />
+</template>
+```
+
+`WeTransformSdk` is renderless except for its internal mount container and does not expose slots.
+
+Props:
+
+- `config` (required): SDK configuration
+- `open` (optional): controlled open state (for `v-model:open`)
+- `autoOpen` (optional, default `false`): opens on mount
+
+Emits:
+
+- `update:open`
+- `open`
+- `close`
+- `destroy`
+- `onReady`
+- `successSubmit`
+- `error`
+
+## Re-exports
+
+`@wetransform/vue` also re-exports these symbols from `@wetransform/core`:
+
+- `createWeTransform`
+- `WeTransformConfig`
+- `WeTransformEventMap`
+- `WeTransformInstance`
+
+## Notes
+
+- Wrapper lifecycle behavior forwards to core and does not modify core semantics.
+- `config` is used at instantiation time. For structural config changes, remount with a Vue `:key`.
+- The component forces the SDK `mountElement` to `weTransform_iframeContainer`.

package/dist/index.d.mts

@@ -0,0 +1,68 @@
+import { WeTransformConfig, WeTransformConfig as WeTransformConfig$1, WeTransformEventMap, WeTransformEventMap as WeTransformEventMap$1, WeTransformInstance, createWeTransform } from "@wetransform/core";
+import * as vue from "vue";
+import { PropType } from "vue";
+
+//#region src/composables.d.ts
+declare const useWeTransform: (config: WeTransformConfig$1) => {
+  weTransformInstance: Readonly<vue.Ref<{
+    readonly open: () => Promise<void>;
+    readonly close: () => Promise<void>;
+    readonly destroy: () => Promise<void>;
+    readonly on: <K extends keyof WeTransformEventMap$1>(event: K, handler: WeTransformEventMap$1[K]) => () => void;
+  } | null, {
+    readonly open: () => Promise<void>;
+    readonly close: () => Promise<void>;
+    readonly destroy: () => Promise<void>;
+    readonly on: <K extends keyof WeTransformEventMap$1>(event: K, handler: WeTransformEventMap$1[K]) => () => void;
+  } | null>>;
+  isOpen: Readonly<vue.Ref<boolean, boolean>>;
+  open: () => Promise<void>;
+  close: () => Promise<void>;
+  destroy: () => Promise<void>;
+  on: <K extends keyof WeTransformEventMap$1>(event: K, handler: WeTransformEventMap$1[K]) => (() => void);
+};
+//#endregion
+//#region src/components/WeTransformSdk.d.ts
+type WeTransformComponentConfig = Omit<WeTransformConfig$1, 'mountElement'>;
+declare const WeTransformSdk: vue.DefineComponent<vue.ExtractPropTypes<{
+  config: {
+    type: PropType<WeTransformComponentConfig>;
+    required: true;
+  };
+  open: {
+    type: BooleanConstructor;
+    required: false;
+  };
+  autoOpen: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:open" | "open" | "close" | "destroy" | "onReady" | "successSubmit" | "error")[], "update:open" | "open" | "close" | "destroy" | "onReady" | "successSubmit" | "error", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+  config: {
+    type: PropType<WeTransformComponentConfig>;
+    required: true;
+  };
+  open: {
+    type: BooleanConstructor;
+    required: false;
+  };
+  autoOpen: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+}>> & Readonly<{
+  "onUpdate:open"?: ((...args: any[]) => any) | undefined;
+  onOpen?: ((...args: any[]) => any) | undefined;
+  onClose?: ((...args: any[]) => any) | undefined;
+  onDestroy?: ((...args: any[]) => any) | undefined;
+  onOnReady?: ((...args: any[]) => any) | undefined;
+  onSuccessSubmit?: ((...args: any[]) => any) | undefined;
+  onError?: ((...args: any[]) => any) | undefined;
+}>, {
+  open: boolean;
+  autoOpen: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { type WeTransformConfig, type WeTransformEventMap, type WeTransformInstance, WeTransformSdk, createWeTransform, useWeTransform };

package/dist/index.mjs

@@ -0,0 +1,131 @@
+import { createWeTransform, createWeTransform as createWeTransform$1 } from "@wetransform/core";
+import { defineComponent, h, onMounted, onUnmounted, readonly, ref, shallowRef, watch } from "vue";
+//#region src/composables.ts
+const useWeTransform = (config) => {
+	const sdk = shallowRef(null);
+	const isOpen = ref(false);
+	let destroyPromise = null;
+	const internalEvents = [];
+	const externalEvents = /* @__PURE__ */ new Set();
+	const initSdk = () => {
+		if (sdk.value) return sdk.value;
+		const instance = createWeTransform$1(config);
+		internalEvents.push(instance.on("open", () => {
+			isOpen.value = true;
+		}), instance.on("close", () => {
+			isOpen.value = false;
+		}), instance.on("destroy", () => {
+			isOpen.value = false;
+			sdk.value = null;
+		}));
+		sdk.value = instance;
+		return instance;
+	};
+	initSdk();
+	const getActiveSdk = () => {
+		if (!sdk.value) throw new Error("WeTransform instance is not initialized");
+		return sdk.value;
+	};
+	const cleanupAllListeners = () => {
+		while (internalEvents.length) internalEvents.pop()?.();
+		externalEvents.forEach((unSub) => unSub());
+		externalEvents.clear();
+	};
+	const open = async () => {
+		await (sdk.value || initSdk()).open();
+	};
+	const close = async () => {
+		await getActiveSdk().close();
+	};
+	const destroy = async () => {
+		if (destroyPromise) return destroyPromise;
+		if (!sdk.value) return;
+		const activeSdk = sdk.value;
+		destroyPromise = (async () => {
+			await activeSdk.destroy();
+		})().finally(() => {
+			cleanupAllListeners();
+			sdk.value = null;
+			isOpen.value = false;
+			destroyPromise = null;
+		});
+		return destroyPromise;
+	};
+	const on = (event, handler) => {
+		const unsubscribe = (sdk.value || initSdk()).on(event, handler);
+		externalEvents.add(unsubscribe);
+		return () => {
+			unsubscribe();
+			externalEvents.delete(unsubscribe);
+		};
+	};
+	onUnmounted(() => {
+		destroy();
+	});
+	return {
+		weTransformInstance: readonly(sdk),
+		isOpen: readonly(isOpen),
+		open,
+		close,
+		destroy,
+		on
+	};
+};
+//#endregion
+//#region src/components/WeTransformSdk.ts
+const WeTransformSdk = defineComponent({
+	name: "WeTransformSdk",
+	props: {
+		config: {
+			type: Object,
+			required: true
+		},
+		open: {
+			type: Boolean,
+			required: false
+		},
+		autoOpen: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"update:open",
+		"open",
+		"close",
+		"destroy",
+		"onReady",
+		"successSubmit",
+		"error"
+	],
+	setup(props, { emit }) {
+		const { isOpen, open, close, on } = useWeTransform({
+			...props.config,
+			mountElement: "weTransform_iframeContainer"
+		});
+		const events = [
+			on("open", () => emit("open")),
+			on("close", () => emit("close")),
+			on("destroy", () => emit("destroy")),
+			on("onReady", () => emit("onReady")),
+			on("successSubmit", (payload) => emit("successSubmit", payload)),
+			on("error", (payload) => emit("error", payload))
+		];
+		onUnmounted(() => events.forEach((unSub) => unSub()));
+		watch(() => props.open, (nextOpen) => {
+			if (nextOpen === void 0 || nextOpen === isOpen.value) return;
+			if (nextOpen) {
+				open();
+				return;
+			}
+			close();
+		}, { immediate: true });
+		watch(isOpen, (next) => emit("update:open", next));
+		onMounted(() => {
+			if (props.autoOpen && !isOpen.value) open();
+		});
+		return () => h("div", { id: "weTransform_iframeContainer" });
+	}
+});
+//#endregion
+export { WeTransformSdk, createWeTransform, useWeTransform };

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@wetransform/vue",
+  "version": "1.0.0",
+  "license": "ISC",
+  "files": [
+    "dist/**"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "VITE_MODE=production vp pack",
+    "dev": "vp pack --watch",
+    "lint": "vp lint --type-aware --type-check .",
+    "test": "vp test run",
+    "publish": "vp run build && npm publish"
+  },
+  "dependencies": {
+    "@wetransform/core": "workspace:*",
+    "vue": "^3.5.30"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vite-plus": "catalog:",
+    "vitest": "catalog:"
+  }
+}