@whop/embedded-components-react-js 0.0.5-beta.5 → 0.0.5-beta.6

package/dist/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tWhopElements,\n\tWhopElementsOptions,\n} from \"@whop/embedded-components-vanilla-js/types\";\n\nimport React, { useSyncExternalStore } from \"react\";\nimport { createContext, useContext, useEffect, useMemo } from \"react\";\n\ninterface ContextState {\n\telements: WhopElements | null;\n}\n\nconst ElementsContext = createContext<ContextState | null>(null);\n\nexport function useElements() {\n\tconst ctx = useContext(ElementsContext);\n\tif (!ctx) {\n\t\tthrow new Error(\"useElements must be used within a ElementsProvider\");\n\t}\n\n\treturn ctx.elements;\n}\n\ntype ElementsProp = PromiseLike<WhopElements | null> | WhopElements | null;\n\nfunction normalizeElementsProp(\n\tprop: ElementsProp,\n): Promise<Awaited<ElementsProp>> {\n\tif (prop instanceof Promise) return prop;\n\treturn Promise.resolve(prop);\n}\n\nclass PromiseStore<T> {\n\tprivate subscribers: Set<() => void> = new Set();\n\tprivate value:\n\t\t| {\n\t\t\t\tstate: \"pending\";\n\t\t  }\n\t\t| {\n\t\t\t\tstate: \"fulfilled\";\n\t\t\t\tvalue: T;\n\t\t  }\n\t\t| {\n\t\t\t\tstate: \"rejected\";\n\t\t\t\terror: unknown;\n\t\t  } = { state: \"pending\" };\n\n\tconstructor(promise: Promise<T>) {\n\t\tpromise\n\t\t\t.then((value) => {\n\t\t\t\tthis.value = { state: \"fulfilled\", value };\n\t\t\t\tfor (const subscriber of this.subscribers) {\n\t\t\t\t\tsubscriber();\n\t\t\t\t}\n\t\t\t})\n\t\t\t.catch((err) => {\n\t\t\t\tthis.value = { state: \"rejected\", error: err };\n\t\t\t\tfor (const subscriber of this.subscribers) {\n\t\t\t\t\tsubscriber();\n\t\t\t\t}\n\t\t\t});\n\t}\n\n\tpublic getSnapshot() {\n\t\treturn this.value;\n\t}\n\n\tpublic subscribe = (listener: () => void) => {\n\t\tthis.subscribers.add(listener);\n\t\treturn () => {\n\t\t\tthis.subscribers.delete(listener);\n\t\t};\n\t};\n}\n\nfunction useAwaitElements(elements: ElementsProp | null) {\n\tconst store = useMemo(\n\t\t() => new PromiseStore(Promise.resolve(elements)),\n\t\t[elements],\n\t);\n\n\tconst state = useSyncExternalStore(\n\t\tstore.subscribe,\n\t\t() => {\n\t\t\tconst snapshot = store.getSnapshot();\n\t\t\tif (snapshot.state === \"fulfilled\") {\n\t\t\t\treturn snapshot.value;\n\t\t\t}\n\t\t\treturn null;\n\t\t},\n\t\t() => null,\n\t);\n\n\treturn state;\n}\n\nexport function Elements({\n\tchildren,\n\telements: elementsProp,\n\tappearance,\n\tlocale,\n}: {\n\tchildren: React.ReactNode;\n\telements: ElementsProp;\n} & WhopElementsOptions) {\n\tconst elementsPromise = normalizeElementsProp(elementsProp);\n\tconst elements = useAwaitElements(elementsPromise);\n\n\tuseEffect(() => {\n\t\tif (!elements) return;\n\t\telements.updateOptions({ appearance, locale });\n\t}, [elements, appearance, locale]);\n\n\tconst value: ContextState = useMemo(\n\t\t() => ({\n\t\t\telements,\n\t\t}),\n\t\t[elements],\n\t);\n\n\treturn (\n\t\t<ElementsContext.Provider value={value}>\n\t\t\t{children}\n\t\t</ElementsContext.Provider>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,mBAA4C;AAC5C,IAAAA,gBAA8D;AAM9D,MAAM,sBAAkB,6BAAmC,IAAI;AAExD,SAAS,cAAc;AAC7B,QAAM,UAAM,0BAAW,eAAe;AACtC,MAAI,CAAC,KAAK;AACT,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACrE;AAEA,SAAO,IAAI;AACZ;AAIA,SAAS,sBACR,MACiC;AACjC,MAAI,gBAAgB,QAAS,QAAO;AACpC,SAAO,QAAQ,QAAQ,IAAI;AAC5B;AAEA,MAAM,aAAgB;AAAA,EAerB,YAAY,SAAqB;AAdjC,wBAAQ,eAA+B,oBAAI,IAAI;AAC/C,wBAAQ,SAWD,EAAE,OAAO,UAAU;AAsB1B,wBAAO,aAAY,CAAC,aAAyB;AAC5C,WAAK,YAAY,IAAI,QAAQ;AAC7B,aAAO,MAAM;AACZ,aAAK,YAAY,OAAO,QAAQ;AAAA,MACjC;AAAA,IACD;AAxBC,YACE,KAAK,CAAC,UAAU;AAChB,WAAK,QAAQ,EAAE,OAAO,aAAa,MAAM;AACzC,iBAAW,cAAc,KAAK,aAAa;AAC1C,mBAAW;AAAA,MACZ;AAAA,IACD,CAAC,EACA,MAAM,CAAC,QAAQ;AACf,WAAK,QAAQ,EAAE,OAAO,YAAY,OAAO,IAAI;AAC7C,iBAAW,cAAc,KAAK,aAAa;AAC1C,mBAAW;AAAA,MACZ;AAAA,IACD,CAAC;AAAA,EACH;AAAA,EAEO,cAAc;AACpB,WAAO,KAAK;AAAA,EACb;AAQD;AAEA,SAAS,iBAAiB,UAA+B;AACxD,QAAM,YAAQ;AAAA,IACb,MAAM,IAAI,aAAa,QAAQ,QAAQ,QAAQ,CAAC;AAAA,IAChD,CAAC,QAAQ;AAAA,EACV;AAEA,QAAM,YAAQ;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AACL,YAAM,WAAW,MAAM,YAAY;AACnC,UAAI,SAAS,UAAU,aAAa;AACnC,eAAO,SAAS;AAAA,MACjB;AACA,aAAO;AAAA,IACR;AAAA,IACA,MAAM;AAAA,EACP;AAEA,SAAO;AACR;AAEO,SAAS,SAAS;AAAA,EACxB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AACD,GAGyB;AACxB,QAAM,kBAAkB,sBAAsB,YAAY;AAC1D,QAAM,WAAW,iBAAiB,eAAe;AAEjD,+BAAU,MAAM;AACf,QAAI,CAAC,SAAU;AACf,aAAS,cAAc,EAAE,YAAY,OAAO,CAAC;AAAA,EAC9C,GAAG,CAAC,UAAU,YAAY,MAAM,CAAC;AAEjC,QAAM,YAAsB;AAAA,IAC3B,OAAO;AAAA,MACN;AAAA,IACD;AAAA,IACA,CAAC,QAAQ;AAAA,EACV;AAEA,SACC,6BAAAC,QAAA,cAAC,gBAAgB,UAAhB,EAAyB,SACxB,QACF;AAEF;","names":["import_react","React"]}

package/dist/provider.mjs

@@ -0,0 +1,87 @@
+"use client";
+import { __publicField } from "./chunk-NSSMTXJJ.mjs";
+import React, { useSyncExternalStore } from "react";
+import { createContext, useContext, useEffect, useMemo } from "react";
+const ElementsContext = createContext(null);
+function useElements() {
+    const ctx = useContext(ElementsContext);
+    if (!ctx) {
+        throw new Error("useElements must be used within a ElementsProvider");
+    }
+    return ctx.elements;
+}
+function normalizeElementsProp(prop) {
+    if (prop instanceof Promise) return prop;
+    return Promise.resolve(prop);
+}
+class PromiseStore {
+    constructor(promise){
+        __publicField(this, "subscribers", new Set());
+        __publicField(this, "value", {
+            state: "pending"
+        });
+        __publicField(this, "subscribe", (listener)=>{
+            this.subscribers.add(listener);
+            return ()=>{
+                this.subscribers.delete(listener);
+            };
+        });
+        promise.then((value)=>{
+            this.value = {
+                state: "fulfilled",
+                value
+            };
+            for (const subscriber of this.subscribers){
+                subscriber();
+            }
+        }).catch((err)=>{
+            this.value = {
+                state: "rejected",
+                error: err
+            };
+            for (const subscriber of this.subscribers){
+                subscriber();
+            }
+        });
+    }
+    getSnapshot() {
+        return this.value;
+    }
+}
+function useAwaitElements(elements) {
+    const store = useMemo(()=>new PromiseStore(Promise.resolve(elements)), [
+        elements
+    ]);
+    const state = useSyncExternalStore(store.subscribe, ()=>{
+        const snapshot = store.getSnapshot();
+        if (snapshot.state === "fulfilled") {
+            return snapshot.value;
+        }
+        return null;
+    }, ()=>null);
+    return state;
+}
+function Elements({ children, elements: elementsProp, appearance, locale }) {
+    const elementsPromise = normalizeElementsProp(elementsProp);
+    const elements = useAwaitElements(elementsPromise);
+    useEffect(()=>{
+        if (!elements) return;
+        elements.updateOptions({
+            appearance,
+            locale
+        });
+    }, [
+        elements,
+        appearance,
+        locale
+    ]);
+    const value = useMemo(()=>({
+            elements
+        }), [
+        elements
+    ]);
+    return React.createElement(ElementsContext.Provider, {
+        value
+    }, children);
+}
+export { Elements, useElements };

package/dist/provider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tWhopElements,\n\tWhopElementsOptions,\n} from \"@whop/embedded-components-vanilla-js/types\";\n\nimport React, { useSyncExternalStore } from \"react\";\nimport { createContext, useContext, useEffect, useMemo } from \"react\";\n\ninterface ContextState {\n\telements: WhopElements | null;\n}\n\nconst ElementsContext = createContext<ContextState | null>(null);\n\nexport function useElements() {\n\tconst ctx = useContext(ElementsContext);\n\tif (!ctx) {\n\t\tthrow new Error(\"useElements must be used within a ElementsProvider\");\n\t}\n\n\treturn ctx.elements;\n}\n\ntype ElementsProp = PromiseLike<WhopElements | null> | WhopElements | null;\n\nfunction normalizeElementsProp(\n\tprop: ElementsProp,\n): Promise<Awaited<ElementsProp>> {\n\tif (prop instanceof Promise) return prop;\n\treturn Promise.resolve(prop);\n}\n\nclass PromiseStore<T> {\n\tprivate subscribers: Set<() => void> = new Set();\n\tprivate value:\n\t\t| {\n\t\t\t\tstate: \"pending\";\n\t\t  }\n\t\t| {\n\t\t\t\tstate: \"fulfilled\";\n\t\t\t\tvalue: T;\n\t\t  }\n\t\t| {\n\t\t\t\tstate: \"rejected\";\n\t\t\t\terror: unknown;\n\t\t  } = { state: \"pending\" };\n\n\tconstructor(promise: Promise<T>) {\n\t\tpromise\n\t\t\t.then((value) => {\n\t\t\t\tthis.value = { state: \"fulfilled\", value };\n\t\t\t\tfor (const subscriber of this.subscribers) {\n\t\t\t\t\tsubscriber();\n\t\t\t\t}\n\t\t\t})\n\t\t\t.catch((err) => {\n\t\t\t\tthis.value = { state: \"rejected\", error: err };\n\t\t\t\tfor (const subscriber of this.subscribers) {\n\t\t\t\t\tsubscriber();\n\t\t\t\t}\n\t\t\t});\n\t}\n\n\tpublic getSnapshot() {\n\t\treturn this.value;\n\t}\n\n\tpublic subscribe = (listener: () => void) => {\n\t\tthis.subscribers.add(listener);\n\t\treturn () => {\n\t\t\tthis.subscribers.delete(listener);\n\t\t};\n\t};\n}\n\nfunction useAwaitElements(elements: ElementsProp | null) {\n\tconst store = useMemo(\n\t\t() => new PromiseStore(Promise.resolve(elements)),\n\t\t[elements],\n\t);\n\n\tconst state = useSyncExternalStore(\n\t\tstore.subscribe,\n\t\t() => {\n\t\t\tconst snapshot = store.getSnapshot();\n\t\t\tif (snapshot.state === \"fulfilled\") {\n\t\t\t\treturn snapshot.value;\n\t\t\t}\n\t\t\treturn null;\n\t\t},\n\t\t() => null,\n\t);\n\n\treturn state;\n}\n\nexport function Elements({\n\tchildren,\n\telements: elementsProp,\n\tappearance,\n\tlocale,\n}: {\n\tchildren: React.ReactNode;\n\telements: ElementsProp;\n} & WhopElementsOptions) {\n\tconst elementsPromise = normalizeElementsProp(elementsProp);\n\tconst elements = useAwaitElements(elementsPromise);\n\n\tuseEffect(() => {\n\t\tif (!elements) return;\n\t\telements.updateOptions({ appearance, locale });\n\t}, [elements, appearance, locale]);\n\n\tconst value: ContextState = useMemo(\n\t\t() => ({\n\t\t\telements,\n\t\t}),\n\t\t[elements],\n\t);\n\n\treturn (\n\t\t<ElementsContext.Provider value={value}>\n\t\t\t{children}\n\t\t</ElementsContext.Provider>\n\t);\n}\n"],"mappings":";;;;AAOA,OAAO,SAAS,4BAA4B;AAC5C,SAAS,eAAe,YAAY,WAAW,eAAe;AAM9D,MAAM,kBAAkB,cAAmC,IAAI;AAExD,SAAS,cAAc;AAC7B,QAAM,MAAM,WAAW,eAAe;AACtC,MAAI,CAAC,KAAK;AACT,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACrE;AAEA,SAAO,IAAI;AACZ;AAIA,SAAS,sBACR,MACiC;AACjC,MAAI,gBAAgB,QAAS,QAAO;AACpC,SAAO,QAAQ,QAAQ,IAAI;AAC5B;AAEA,MAAM,aAAgB;AAAA,EAerB,YAAY,SAAqB;AAdjC,wBAAQ,eAA+B,oBAAI,IAAI;AAC/C,wBAAQ,SAWD,EAAE,OAAO,UAAU;AAsB1B,wBAAO,aAAY,CAAC,aAAyB;AAC5C,WAAK,YAAY,IAAI,QAAQ;AAC7B,aAAO,MAAM;AACZ,aAAK,YAAY,OAAO,QAAQ;AAAA,MACjC;AAAA,IACD;AAxBC,YACE,KAAK,CAAC,UAAU;AAChB,WAAK,QAAQ,EAAE,OAAO,aAAa,MAAM;AACzC,iBAAW,cAAc,KAAK,aAAa;AAC1C,mBAAW;AAAA,MACZ;AAAA,IACD,CAAC,EACA,MAAM,CAAC,QAAQ;AACf,WAAK,QAAQ,EAAE,OAAO,YAAY,OAAO,IAAI;AAC7C,iBAAW,cAAc,KAAK,aAAa;AAC1C,mBAAW;AAAA,MACZ;AAAA,IACD,CAAC;AAAA,EACH;AAAA,EAEO,cAAc;AACpB,WAAO,KAAK;AAAA,EACb;AAQD;AAEA,SAAS,iBAAiB,UAA+B;AACxD,QAAM,QAAQ;AAAA,IACb,MAAM,IAAI,aAAa,QAAQ,QAAQ,QAAQ,CAAC;AAAA,IAChD,CAAC,QAAQ;AAAA,EACV;AAEA,QAAM,QAAQ;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AACL,YAAM,WAAW,MAAM,YAAY;AACnC,UAAI,SAAS,UAAU,aAAa;AACnC,eAAO,SAAS;AAAA,MACjB;AACA,aAAO;AAAA,IACR;AAAA,IACA,MAAM;AAAA,EACP;AAEA,SAAO;AACR;AAEO,SAAS,SAAS;AAAA,EACxB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AACD,GAGyB;AACxB,QAAM,kBAAkB,sBAAsB,YAAY;AAC1D,QAAM,WAAW,iBAAiB,eAAe;AAEjD,YAAU,MAAM;AACf,QAAI,CAAC,SAAU;AACf,aAAS,cAAc,EAAE,YAAY,OAAO,CAAC;AAAA,EAC9C,GAAG,CAAC,UAAU,YAAY,MAAM,CAAC;AAEjC,QAAM,QAAsB;AAAA,IAC3B,OAAO;AAAA,MACN;AAAA,IACD;AAAA,IACA,CAAC,QAAQ;AAAA,EACV;AAEA,SACC,oCAAC,gBAAgB,UAAhB,EAAyB,SACxB,QACF;AAEF;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whop/embedded-components-react-js",
-  "version": "0.0.5-beta.5",
+  "version": "0.0.5-beta.6",
   "description": "React components for Whop.js",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -21,7 +21,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@whop/embedded-components-vanilla-js": "^0.0.5-beta.5",
+    "@whop/embedded-components-vanilla-js": "^0.0.5-beta.6",
     "react": ">=16.8.0 <20.0.0",
     "react-dom": ">=16.8.0 <20.0.0"
   }

package/package.json.temp

@@ -1,44 +0,0 @@
-{
-	"name": "@whop/embedded-components-react-js",
-	"private": true,
-	"version": "0.0.5-beta.5",
-	"description": "React components for Whop.js",
-	"main": "dist/index.js",
-	"module": "dist/index.mjs",
-	"jsnext:main": "dist/index.mjs",
-	"types": "dist/index.d.ts",
-	"typing": "dist/index.d.ts",
-	"scripts": {
-		"build": "rimraf dist && NODE_ENV=production tsup",
-		"dev": "NODE_ENV=development tsup --watch",
-		"prepublishOnly": "node ./scripts/pre-publish.mjs",
-		"postpublish": "node ./scripts/post-publish.mjs"
-	},
-	"keywords": ["Whop", "Whop.js", "React", "embedded", "payments", "payouts"],
-	"author": "Whop (https://whop.com)",
-	"license": "MIT",
-	"publishConfig": {
-		"access": "public"
-	},
-	"devDependencies": {
-		"@local/eslint-config": "workspace:*",
-		"@local/typescript-config": "workspace:*",
-		"@swc/core": "1.11.29",
-		"@types/node": "latest",
-		"@types/react": "^18.0.0",
-		"@types/react-dom": "^18.0.0",
-		"@whop/embedded-components-vanilla-js": "workspace:^",
-		"eslint": "latest",
-		"fast-glob": "^3.3.3",
-		"react": "18.1.0",
-		"react-dom": "18.1.0",
-		"rimraf": "^6.1.0",
-		"tsup": "latest",
-		"typescript": "latest"
-	},
-	"peerDependencies": {
-		"@whop/embedded-components-vanilla-js": "workspace:^",
-		"react": ">=16.8.0 <20.0.0",
-		"react-dom": ">=16.8.0 <20.0.0"
-	}
-}