@sangwonl/pocato-react 0.4.0 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,15 +1,43 @@
1
1
  import * as react from 'react';
2
2
  import { ReactNode, CSSProperties } from 'react';
3
- import { LayerSource } from '@sangwonl/pocato-core';
3
+ import { EffectUniformValue, FaceFrameOptions, LayerSource } from '@sangwonl/pocato-core';
4
4
 
5
+ type EffectParamValue = string | number | boolean;
6
+ interface EffectParamSchema {
7
+ key: string;
8
+ label: string;
9
+ uniform: string;
10
+ type: 'number' | 'boolean' | 'color' | 'select';
11
+ defaultValue: EffectParamValue;
12
+ min?: number;
13
+ max?: number;
14
+ step?: number;
15
+ options?: Array<{
16
+ label: string;
17
+ value: EffectParamValue;
18
+ }>;
19
+ }
20
+ interface PocaCardEffectConfig {
21
+ id: string;
22
+ label: string;
23
+ shader: string;
24
+ minLayers: number;
25
+ params: Record<string, EffectParamValue>;
26
+ schema: EffectParamSchema[];
27
+ customizedShader?: boolean;
28
+ }
29
+ interface PocaCardFaceConfig extends Omit<FaceProps, 'content'> {
30
+ effect?: PocaCardEffectConfig;
31
+ html?: string;
32
+ }
5
33
  interface PocaCardConfig {
6
34
  cardSize?: {
7
35
  width: number;
8
36
  height: number;
9
37
  preset?: string;
10
38
  };
11
- front: Omit<FaceProps, 'content'>;
12
- back?: Omit<FaceProps, 'content'>;
39
+ front: PocaCardFaceConfig;
40
+ back?: PocaCardFaceConfig;
13
41
  flippable?: boolean;
14
42
  initialFlipped?: boolean;
15
43
  flipSpeed?: number;
@@ -19,6 +47,10 @@ interface PublishedConfigResponse {
19
47
  releaseId: string;
20
48
  config: PocaCardConfig;
21
49
  }
50
+ interface PocatoClientOptions {
51
+ apiBaseUrl?: string;
52
+ publishableKey: string;
53
+ }
22
54
 
23
55
  interface PocaCardHandle {
24
56
  flip(): void;
@@ -27,6 +59,8 @@ interface PocaCardHandle {
27
59
  }
28
60
  interface FaceProps {
29
61
  shader?: string;
62
+ uniforms?: Record<string, EffectUniformValue>;
63
+ frame?: FaceFrameOptions;
30
64
  layers: LayerSource[];
31
65
  content?: ReactNode;
32
66
  }
@@ -34,6 +68,8 @@ interface CommonPocaCardProps {
34
68
  flippable?: boolean;
35
69
  initialFlipped?: boolean;
36
70
  flipSpeed?: number;
71
+ interactive?: boolean;
72
+ preventTouchScroll?: boolean;
37
73
  onFlip?: (flipped: boolean) => void;
38
74
  onReady?: () => void;
39
75
  onError?: (error: Error) => void;
@@ -69,4 +105,16 @@ interface ConnectedPocaCardProps extends CommonPocaCardProps {
69
105
  type PocaCardProps = DirectPocaCardProps | ConfigPocaCardProps | ConnectedPocaCardProps;
70
106
  declare const PocaCard: react.ForwardRefExoticComponent<PocaCardProps & react.RefAttributes<PocaCardHandle>>;
71
107
 
72
- export { type FaceProps, PocaCard, type PocaCardConfig, type PocaCardHandle, type PocaCardProps, type PublishedConfigResponse };
108
+ interface UsePocatoConfigInput extends PocatoClientOptions {
109
+ cardId: string;
110
+ }
111
+ interface UsePocatoConfigResult {
112
+ data: PublishedConfigResponse | null;
113
+ config: PocaCardConfig | null;
114
+ loading: boolean;
115
+ error: Error | null;
116
+ refetch: () => Promise<PublishedConfigResponse | null>;
117
+ }
118
+ declare function usePocatoConfig(input: UsePocatoConfigInput): UsePocatoConfigResult;
119
+
120
+ export { type FaceProps, PocaCard, type PocaCardConfig, type PocaCardFaceConfig, type PocaCardHandle, type PocaCardProps, type PublishedConfigResponse, type UsePocatoConfigInput, type UsePocatoConfigResult, usePocatoConfig };
package/dist/index.js CHANGED
@@ -43,27 +43,59 @@ async function trackCardEvent(cardId, options) {
43
43
  }
44
44
 
45
45
  // src/use-pocato-config.ts
46
- import { useEffect, useState } from "react";
46
+ import { useCallback, useEffect, useMemo, useState } from "react";
47
47
  var cache = /* @__PURE__ */ new Map();
48
48
  function getPocatoConfigCacheKey(apiBaseUrl, publishableKey, cardId) {
49
49
  return `${apiBaseUrl ?? ""}:${publishableKey}:${cardId}`;
50
50
  }
51
51
  function usePocatoConfig(input) {
52
- const [config, setConfig] = useState(() => {
53
- return cache.get(getPocatoConfigCacheKey(input.apiBaseUrl, input.publishableKey, input.cardId)) ?? null;
52
+ const cacheKey = useMemo(() => {
53
+ return getPocatoConfigCacheKey(input.apiBaseUrl, input.publishableKey, input.cardId);
54
+ }, [input.apiBaseUrl, input.publishableKey, input.cardId]);
55
+ const [data, setData] = useState(() => {
56
+ return cache.get(cacheKey) ?? null;
54
57
  });
55
- const [loading, setLoading] = useState(!config);
58
+ const [loading, setLoading] = useState(!data);
56
59
  const [error, setError] = useState(null);
60
+ const load = useCallback(async (options) => {
61
+ if (!options?.force) {
62
+ const cached = cache.get(cacheKey);
63
+ if (cached) {
64
+ setData(cached);
65
+ setLoading(false);
66
+ setError(null);
67
+ return cached;
68
+ }
69
+ }
70
+ setData(null);
71
+ setLoading(true);
72
+ setError(null);
73
+ try {
74
+ const response = await fetchPublishedConfig(input.cardId, {
75
+ apiBaseUrl: input.apiBaseUrl,
76
+ publishableKey: input.publishableKey
77
+ });
78
+ cache.set(cacheKey, response);
79
+ setData(response);
80
+ setLoading(false);
81
+ return response;
82
+ } catch (err) {
83
+ const nextError = err instanceof Error ? err : new Error("Failed to load Pocato config");
84
+ setError(nextError);
85
+ setLoading(false);
86
+ return null;
87
+ }
88
+ }, [cacheKey, input.apiBaseUrl, input.cardId, input.publishableKey]);
57
89
  useEffect(() => {
58
90
  let cancelled = false;
59
- const cacheKey = getPocatoConfigCacheKey(input.apiBaseUrl, input.publishableKey, input.cardId);
60
91
  const cached = cache.get(cacheKey);
61
92
  if (cached) {
62
- setConfig(cached);
93
+ setData(cached);
63
94
  setLoading(false);
64
95
  setError(null);
65
96
  return;
66
97
  }
98
+ setData(null);
67
99
  setLoading(true);
68
100
  setError(null);
69
101
  fetchPublishedConfig(input.cardId, {
@@ -71,8 +103,8 @@ function usePocatoConfig(input) {
71
103
  publishableKey: input.publishableKey
72
104
  }).then((response) => {
73
105
  if (cancelled) return;
74
- cache.set(cacheKey, response.config);
75
- setConfig(response.config);
106
+ cache.set(cacheKey, response);
107
+ setData(response);
76
108
  setLoading(false);
77
109
  }).catch((err) => {
78
110
  if (cancelled) return;
@@ -82,8 +114,14 @@ function usePocatoConfig(input) {
82
114
  return () => {
83
115
  cancelled = true;
84
116
  };
85
- }, [input.apiBaseUrl, input.publishableKey, input.cardId]);
86
- return { config, loading, error };
117
+ }, [cacheKey, input.apiBaseUrl, input.publishableKey, input.cardId]);
118
+ return {
119
+ data,
120
+ config: data?.config ?? null,
121
+ loading,
122
+ error,
123
+ refetch: () => load({ force: true })
124
+ };
87
125
  }
88
126
 
89
127
  // src/PocaCard.tsx
@@ -99,10 +137,16 @@ function resolveConfigProps(config, props) {
99
137
  ...props,
100
138
  front: {
101
139
  ...config.front,
140
+ shader: config.front.effect?.shader ?? config.front.shader,
141
+ uniforms: config.front.uniforms ?? getEffectUniforms(config.front.effect),
142
+ frame: props.front?.frame ?? config.front.frame,
102
143
  content: props.front?.content
103
144
  },
104
145
  back: config.back ? {
105
146
  ...config.back,
147
+ shader: config.back.effect?.shader ?? config.back.shader,
148
+ uniforms: config.back.uniforms ?? getEffectUniforms(config.back.effect),
149
+ frame: props.back?.frame ?? config.back.frame,
106
150
  content: props.back?.content
107
151
  } : props.back?.layers ? props.back : void 0,
108
152
  flippable: props.flippable ?? config.flippable,
@@ -110,6 +154,15 @@ function resolveConfigProps(config, props) {
110
154
  flipSpeed: props.flipSpeed ?? config.flipSpeed
111
155
  };
112
156
  }
157
+ function getEffectUniforms(effect) {
158
+ if (!effect) return void 0;
159
+ return Object.fromEntries(
160
+ effect.schema.map((item) => [
161
+ item.uniform,
162
+ effect.params[item.key] ?? item.defaultValue
163
+ ])
164
+ );
165
+ }
113
166
  function renderErrorFallback(errorFallback, error) {
114
167
  if (typeof errorFallback === "function") return errorFallback(error);
115
168
  return errorFallback ?? null;
@@ -166,11 +219,13 @@ function PocaCardRenderer({
166
219
  useEffect2(() => {
167
220
  if (!containerRef.current) return;
168
221
  const card = new CorePocaCard(containerRef.current, {
169
- front: { shader: props.front.shader, layers: props.front.layers },
170
- back: props.back ? { shader: props.back.shader, layers: props.back.layers } : void 0,
222
+ front: { shader: props.front.shader, uniforms: props.front.uniforms, frame: props.front.frame, layers: props.front.layers },
223
+ back: props.back ? { shader: props.back.shader, uniforms: props.back.uniforms, frame: props.back.frame, layers: props.back.layers } : void 0,
171
224
  flippable: props.flippable,
172
225
  initialFlipped: props.initialFlipped,
173
- flipSpeed: props.flipSpeed
226
+ flipSpeed: props.flipSpeed,
227
+ interactive: props.interactive,
228
+ preventTouchScroll: props.preventTouchScroll
174
229
  });
175
230
  cardRef.current = card;
176
231
  setPortalTargets({
@@ -201,6 +256,22 @@ function PocaCardRenderer({
201
256
  cardRef.current?.updateOptions({ flipSpeed: props.flipSpeed });
202
257
  }
203
258
  }, [props.flipSpeed]);
259
+ const frontUniformsKey = JSON.stringify(props.front.uniforms ?? {});
260
+ const backUniformsKey = JSON.stringify(props.back?.uniforms ?? {});
261
+ useEffect2(() => {
262
+ cardRef.current?.updateOptions({
263
+ front: { uniforms: props.front.uniforms },
264
+ back: props.back ? { uniforms: props.back.uniforms } : void 0
265
+ });
266
+ }, [frontUniformsKey, backUniformsKey]);
267
+ const frontFrameKey = JSON.stringify(props.front.frame ?? {});
268
+ const backFrameKey = JSON.stringify(props.back?.frame ?? {});
269
+ useEffect2(() => {
270
+ cardRef.current?.updateOptions({
271
+ front: { frame: props.front.frame },
272
+ back: props.back ? { frame: props.back.frame } : void 0
273
+ });
274
+ }, [frontFrameKey, backFrameKey]);
204
275
  useEffect2(() => {
205
276
  const card = cardRef.current;
206
277
  if (!card) return;
@@ -245,6 +316,7 @@ var PocaCard = forwardRef(
245
316
  );
246
317
  PocaCard.displayName = "PocaCard";
247
318
  export {
248
- PocaCard
319
+ PocaCard,
320
+ usePocatoConfig
249
321
  };
250
322
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/PocaCard.tsx","../src/pocato-client.ts","../src/use-pocato-config.ts"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n type CSSProperties,\n type ForwardedRef,\n type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport {\n PocaCard as CorePocaCard,\n type LayerSource,\n} from '@sangwonl/pocato-core'\nimport { trackCardEvent, type PocaCardConfig } from './pocato-client'\nimport { usePocatoConfig } from './use-pocato-config'\n\nexport interface PocaCardHandle {\n flip(): void\n wiggle(): void\n reset(): void\n}\n\nexport interface FaceProps {\n shader?: string\n layers: LayerSource[]\n content?: ReactNode\n}\n\ninterface CommonPocaCardProps {\n flippable?: boolean\n initialFlipped?: boolean\n flipSpeed?: number\n onFlip?: (flipped: boolean) => void\n onReady?: () => void\n onError?: (error: Error) => void\n loadingFallback?: ReactNode\n errorFallback?: ReactNode | ((error: Error) => ReactNode)\n style?: CSSProperties\n className?: string\n}\n\ninterface DirectPocaCardProps extends CommonPocaCardProps {\n front: FaceProps\n back?: FaceProps\n config?: never\n cardId?: never\n publishableKey?: never\n apiBaseUrl?: never\n}\n\ninterface ConfigPocaCardProps extends CommonPocaCardProps {\n config: PocaCardConfig\n front?: Partial<FaceProps>\n back?: Partial<FaceProps>\n cardId?: never\n publishableKey?: never\n apiBaseUrl?: never\n}\n\ninterface ConnectedPocaCardProps extends CommonPocaCardProps {\n cardId: string\n publishableKey: string\n apiBaseUrl?: string\n front?: Partial<FaceProps>\n back?: Partial<FaceProps>\n config?: never\n}\n\nexport type PocaCardProps = DirectPocaCardProps | ConfigPocaCardProps | ConnectedPocaCardProps\n\ninterface ResolvedPocaCardProps extends CommonPocaCardProps {\n front: FaceProps\n back?: FaceProps\n}\n\nfunction isConnectedProps(props: PocaCardProps): props is ConnectedPocaCardProps {\n return typeof props.cardId === 'string' && typeof props.publishableKey === 'string'\n}\n\nfunction isConfigProps(props: PocaCardProps): props is ConfigPocaCardProps {\n return 'config' in props && props.config != null\n}\n\nfunction resolveConfigProps(\n config: PocaCardConfig,\n props: ConfigPocaCardProps | ConnectedPocaCardProps,\n): ResolvedPocaCardProps {\n return {\n ...props,\n front: {\n ...config.front,\n content: props.front?.content,\n },\n back: config.back\n ? {\n ...config.back,\n content: props.back?.content,\n }\n : props.back?.layers\n ? props.back as FaceProps\n : undefined,\n flippable: props.flippable ?? config.flippable,\n initialFlipped: props.initialFlipped ?? config.initialFlipped,\n flipSpeed: props.flipSpeed ?? config.flipSpeed,\n }\n}\n\nfunction renderErrorFallback(errorFallback: CommonPocaCardProps['errorFallback'], error: Error) {\n if (typeof errorFallback === 'function') return errorFallback(error)\n return errorFallback ?? null\n}\n\nfunction ConnectedPocaCard(\n props: ConnectedPocaCardProps,\n ref: ForwardedRef<PocaCardHandle>,\n) {\n const { config, loading, error } = usePocatoConfig({\n cardId: props.cardId,\n publishableKey: props.publishableKey,\n apiBaseUrl: props.apiBaseUrl,\n })\n const readyTracked = useRef(false)\n\n useEffect(() => {\n if (error && !props.errorFallback) {\n props.onError?.(error)\n }\n }, [error, props.errorFallback, props.onError])\n\n if (error) {\n return renderErrorFallback(props.errorFallback, error)\n }\n\n if (loading || !config) {\n return props.loadingFallback ?? null\n }\n\n const resolved = resolveConfigProps(config, {\n ...props,\n onReady: () => {\n if (!readyTracked.current) {\n readyTracked.current = true\n void trackCardEvent(props.cardId, {\n apiBaseUrl: props.apiBaseUrl,\n publishableKey: props.publishableKey,\n eventType: 'card_ready',\n })\n }\n props.onReady?.()\n },\n onError: (runtimeError) => {\n void trackCardEvent(props.cardId, {\n apiBaseUrl: props.apiBaseUrl,\n publishableKey: props.publishableKey,\n eventType: 'render_error',\n })\n props.onError?.(runtimeError)\n },\n })\n\n return <PocaCardRenderer props={resolved} refHandle={ref} />\n}\n\nfunction PocaCardRenderer({\n props,\n refHandle,\n}: {\n props: ResolvedPocaCardProps\n refHandle: ForwardedRef<PocaCardHandle>\n}) {\n const containerRef = useRef<HTMLDivElement>(null)\n const cardRef = useRef<CorePocaCard | null>(null)\n const [portalTargets, setPortalTargets] = useState<{\n front: HTMLElement | null\n back: HTMLElement | null\n }>({ front: null, back: null })\n\n useEffect(() => {\n if (!containerRef.current) return\n\n const card = new CorePocaCard(containerRef.current, {\n front: { shader: props.front.shader, layers: props.front.layers },\n back: props.back ? { shader: props.back.shader, layers: props.back.layers } : undefined,\n flippable: props.flippable,\n initialFlipped: props.initialFlipped,\n flipSpeed: props.flipSpeed,\n })\n\n cardRef.current = card\n setPortalTargets({\n front: card.getFrontContentEl(),\n back: card.getBackContentEl(),\n })\n\n return () => {\n card.destroy()\n cardRef.current = null\n setPortalTargets({ front: null, back: null })\n }\n // Re-create when shader config changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [props.front.shader, props.back?.shader])\n\n const frontLayersKey = JSON.stringify(props.front.layers)\n const backLayersKey = JSON.stringify(props.back?.layers)\n const layersMounted = useRef(false)\n useEffect(() => {\n if (!layersMounted.current) {\n layersMounted.current = true\n return\n }\n cardRef.current?.updateOptions({\n front: { layers: props.front.layers },\n back: props.back ? { layers: props.back.layers } : undefined,\n })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [frontLayersKey, backLayersKey])\n\n useEffect(() => {\n if (props.flipSpeed != null) {\n cardRef.current?.updateOptions({ flipSpeed: props.flipSpeed })\n }\n }, [props.flipSpeed])\n\n useEffect(() => {\n const card = cardRef.current\n if (!card) return\n\n const onFlip = props.onFlip\n const onReady = props.onReady\n const onError = props.onError\n\n if (onFlip) card.on('flip', onFlip)\n if (onReady) card.on('ready', onReady)\n if (onError) card.on('error', onError)\n\n return () => {\n if (onFlip) card.off('flip', onFlip)\n if (onReady) card.off('ready', onReady)\n if (onError) card.off('error', onError)\n }\n }, [props.onFlip, props.onReady, props.onError])\n\n useImperativeHandle(refHandle, () => ({\n flip: () => cardRef.current?.flip(),\n wiggle: () => cardRef.current?.wiggle(),\n reset: () => cardRef.current?.reset(),\n }))\n\n return (\n <div\n ref={containerRef}\n style={props.style}\n className={props.className}\n >\n {portalTargets.front && props.front.content && createPortal(props.front.content, portalTargets.front)}\n {portalTargets.back && props.back?.content && createPortal(props.back.content, portalTargets.back)}\n </div>\n )\n}\n\nexport const PocaCard = forwardRef<PocaCardHandle, PocaCardProps>(\n (props, ref) => {\n if (isConnectedProps(props)) {\n return ConnectedPocaCard(props, ref)\n }\n\n const resolved = isConfigProps(props) ? resolveConfigProps(props.config, props) : props\n return <PocaCardRenderer props={resolved} refHandle={ref} />\n },\n)\n\nPocaCard.displayName = 'PocaCard'\n","import type { FaceProps } from './PocaCard'\n\nconst DEFAULT_API_BASE_URL = 'https://pocato-api.gamzabaw.workers.dev'\n\nexport interface PocaCardConfig {\n cardSize?: {\n width: number\n height: number\n preset?: string\n }\n front: Omit<FaceProps, 'content'>\n back?: Omit<FaceProps, 'content'>\n flippable?: boolean\n initialFlipped?: boolean\n flipSpeed?: number\n}\n\nexport interface PublishedConfigResponse {\n cardId: string\n releaseId: string\n config: PocaCardConfig\n}\n\nexport interface PocatoClientOptions {\n apiBaseUrl?: string\n publishableKey: string\n}\n\nfunction getApiBaseUrl(apiBaseUrl?: string): string {\n return apiBaseUrl ?? DEFAULT_API_BASE_URL\n}\n\nexport async function fetchPublishedConfig(\n cardId: string,\n options: PocatoClientOptions,\n): Promise<PublishedConfigResponse> {\n const baseUrl = getApiBaseUrl(options.apiBaseUrl)\n const res = await fetch(`${baseUrl}/api/v1/public/cards/${cardId}/config`, {\n headers: {\n 'X-Pocato-Key': options.publishableKey,\n },\n })\n\n if (!res.ok) {\n throw new Error(`Failed to load Pocato card config: ${res.status}`)\n }\n\n return res.json()\n}\n\nexport async function trackCardEvent(\n cardId: string,\n options: PocatoClientOptions & { eventType: 'card_ready' | 'render_error' },\n): Promise<void> {\n const baseUrl = getApiBaseUrl(options.apiBaseUrl)\n await fetch(`${baseUrl}/api/v1/public/cards/${cardId}/events`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Pocato-Key': options.publishableKey,\n },\n body: JSON.stringify({ eventType: options.eventType }),\n keepalive: true,\n }).catch(() => {\n // Usage metering must not break customer rendering.\n })\n}\n","import { useEffect, useState } from 'react'\nimport { fetchPublishedConfig, type PocaCardConfig } from './pocato-client'\n\nconst cache = new Map<string, PocaCardConfig>()\n\nexport function getPocatoConfigCacheKey(\n apiBaseUrl: string | undefined,\n publishableKey: string,\n cardId: string,\n): string {\n return `${apiBaseUrl ?? ''}:${publishableKey}:${cardId}`\n}\n\nexport function usePocatoConfig(input: {\n cardId: string\n publishableKey: string\n apiBaseUrl?: string\n}) {\n const [config, setConfig] = useState<PocaCardConfig | null>(() => {\n return cache.get(getPocatoConfigCacheKey(input.apiBaseUrl, input.publishableKey, input.cardId)) ?? null\n })\n const [loading, setLoading] = useState(!config)\n const [error, setError] = useState<Error | null>(null)\n\n useEffect(() => {\n let cancelled = false\n const cacheKey = getPocatoConfigCacheKey(input.apiBaseUrl, input.publishableKey, input.cardId)\n const cached = cache.get(cacheKey)\n\n if (cached) {\n setConfig(cached)\n setLoading(false)\n setError(null)\n return\n }\n\n setLoading(true)\n setError(null)\n\n fetchPublishedConfig(input.cardId, {\n apiBaseUrl: input.apiBaseUrl,\n publishableKey: input.publishableKey,\n })\n .then((response) => {\n if (cancelled) return\n cache.set(cacheKey, response.config)\n setConfig(response.config)\n setLoading(false)\n })\n .catch((err) => {\n if (cancelled) return\n setError(err instanceof Error ? err : new Error('Failed to load Pocato config'))\n setLoading(false)\n })\n\n return () => {\n cancelled = true\n }\n }, [input.apiBaseUrl, input.publishableKey, input.cardId])\n\n return { config, loading, error }\n}\n"],"mappings":"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","names":["useEffect","useState","useEffect","useState"]}
1
+ {"version":3,"sources":["../src/PocaCard.tsx","../src/pocato-client.ts","../src/use-pocato-config.ts"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n type CSSProperties,\n type ForwardedRef,\n type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport {\n PocaCard as CorePocaCard,\n type EffectUniformValue,\n type FaceFrameOptions,\n type LayerSource,\n} from '@sangwonl/pocato-core'\nimport { trackCardEvent, type PocaCardConfig, type PocaCardEffectConfig } from './pocato-client'\nimport { usePocatoConfig } from './use-pocato-config'\n\nexport interface PocaCardHandle {\n flip(): void\n wiggle(): void\n reset(): void\n}\n\nexport interface FaceProps {\n shader?: string\n uniforms?: Record<string, EffectUniformValue>\n frame?: FaceFrameOptions\n layers: LayerSource[]\n content?: ReactNode\n}\n\ninterface CommonPocaCardProps {\n flippable?: boolean\n initialFlipped?: boolean\n flipSpeed?: number\n interactive?: boolean\n preventTouchScroll?: boolean\n onFlip?: (flipped: boolean) => void\n onReady?: () => void\n onError?: (error: Error) => void\n loadingFallback?: ReactNode\n errorFallback?: ReactNode | ((error: Error) => ReactNode)\n style?: CSSProperties\n className?: string\n}\n\ninterface DirectPocaCardProps extends CommonPocaCardProps {\n front: FaceProps\n back?: FaceProps\n config?: never\n cardId?: never\n publishableKey?: never\n apiBaseUrl?: never\n}\n\ninterface ConfigPocaCardProps extends CommonPocaCardProps {\n config: PocaCardConfig\n front?: Partial<FaceProps>\n back?: Partial<FaceProps>\n cardId?: never\n publishableKey?: never\n apiBaseUrl?: never\n}\n\ninterface ConnectedPocaCardProps extends CommonPocaCardProps {\n cardId: string\n publishableKey: string\n apiBaseUrl?: string\n front?: Partial<FaceProps>\n back?: Partial<FaceProps>\n config?: never\n}\n\nexport type PocaCardProps = DirectPocaCardProps | ConfigPocaCardProps | ConnectedPocaCardProps\n\ninterface ResolvedPocaCardProps extends CommonPocaCardProps {\n front: FaceProps\n back?: FaceProps\n}\n\nfunction isConnectedProps(props: PocaCardProps): props is ConnectedPocaCardProps {\n return typeof props.cardId === 'string' && typeof props.publishableKey === 'string'\n}\n\nfunction isConfigProps(props: PocaCardProps): props is ConfigPocaCardProps {\n return 'config' in props && props.config != null\n}\n\nfunction resolveConfigProps(\n config: PocaCardConfig,\n props: ConfigPocaCardProps | ConnectedPocaCardProps,\n): ResolvedPocaCardProps {\n return {\n ...props,\n front: {\n ...config.front,\n shader: config.front.effect?.shader ?? config.front.shader,\n uniforms: config.front.uniforms ?? getEffectUniforms(config.front.effect),\n frame: props.front?.frame ?? config.front.frame,\n content: props.front?.content,\n },\n back: config.back\n ? {\n ...config.back,\n shader: config.back.effect?.shader ?? config.back.shader,\n uniforms: config.back.uniforms ?? getEffectUniforms(config.back.effect),\n frame: props.back?.frame ?? config.back.frame,\n content: props.back?.content,\n }\n : props.back?.layers\n ? props.back as FaceProps\n : undefined,\n flippable: props.flippable ?? config.flippable,\n initialFlipped: props.initialFlipped ?? config.initialFlipped,\n flipSpeed: props.flipSpeed ?? config.flipSpeed,\n }\n}\n\nfunction getEffectUniforms(effect?: PocaCardEffectConfig) {\n if (!effect) return undefined\n return Object.fromEntries(\n effect.schema.map((item) => [\n item.uniform,\n effect.params[item.key] ?? item.defaultValue,\n ]),\n )\n}\n\nfunction renderErrorFallback(errorFallback: CommonPocaCardProps['errorFallback'], error: Error) {\n if (typeof errorFallback === 'function') return errorFallback(error)\n return errorFallback ?? null\n}\n\nfunction ConnectedPocaCard(\n props: ConnectedPocaCardProps,\n ref: ForwardedRef<PocaCardHandle>,\n) {\n const { config, loading, error } = usePocatoConfig({\n cardId: props.cardId,\n publishableKey: props.publishableKey,\n apiBaseUrl: props.apiBaseUrl,\n })\n const readyTracked = useRef(false)\n\n useEffect(() => {\n if (error && !props.errorFallback) {\n props.onError?.(error)\n }\n }, [error, props.errorFallback, props.onError])\n\n if (error) {\n return renderErrorFallback(props.errorFallback, error)\n }\n\n if (loading || !config) {\n return props.loadingFallback ?? null\n }\n\n const resolved = resolveConfigProps(config, {\n ...props,\n onReady: () => {\n if (!readyTracked.current) {\n readyTracked.current = true\n void trackCardEvent(props.cardId, {\n apiBaseUrl: props.apiBaseUrl,\n publishableKey: props.publishableKey,\n eventType: 'card_ready',\n })\n }\n props.onReady?.()\n },\n onError: (runtimeError) => {\n void trackCardEvent(props.cardId, {\n apiBaseUrl: props.apiBaseUrl,\n publishableKey: props.publishableKey,\n eventType: 'render_error',\n })\n props.onError?.(runtimeError)\n },\n })\n\n return <PocaCardRenderer props={resolved} refHandle={ref} />\n}\n\nfunction PocaCardRenderer({\n props,\n refHandle,\n}: {\n props: ResolvedPocaCardProps\n refHandle: ForwardedRef<PocaCardHandle>\n}) {\n const containerRef = useRef<HTMLDivElement>(null)\n const cardRef = useRef<CorePocaCard | null>(null)\n const [portalTargets, setPortalTargets] = useState<{\n front: HTMLElement | null\n back: HTMLElement | null\n }>({ front: null, back: null })\n\n useEffect(() => {\n if (!containerRef.current) return\n\n const card = new CorePocaCard(containerRef.current, {\n front: { shader: props.front.shader, uniforms: props.front.uniforms, frame: props.front.frame, layers: props.front.layers },\n back: props.back ? { shader: props.back.shader, uniforms: props.back.uniforms, frame: props.back.frame, layers: props.back.layers } : undefined,\n flippable: props.flippable,\n initialFlipped: props.initialFlipped,\n flipSpeed: props.flipSpeed,\n interactive: props.interactive,\n preventTouchScroll: props.preventTouchScroll,\n })\n\n cardRef.current = card\n setPortalTargets({\n front: card.getFrontContentEl(),\n back: card.getBackContentEl(),\n })\n\n return () => {\n card.destroy()\n cardRef.current = null\n setPortalTargets({ front: null, back: null })\n }\n // Re-create when shader config changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [props.front.shader, props.back?.shader])\n\n const frontLayersKey = JSON.stringify(props.front.layers)\n const backLayersKey = JSON.stringify(props.back?.layers)\n const layersMounted = useRef(false)\n useEffect(() => {\n if (!layersMounted.current) {\n layersMounted.current = true\n return\n }\n cardRef.current?.updateOptions({\n front: { layers: props.front.layers },\n back: props.back ? { layers: props.back.layers } : undefined,\n })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [frontLayersKey, backLayersKey])\n\n useEffect(() => {\n if (props.flipSpeed != null) {\n cardRef.current?.updateOptions({ flipSpeed: props.flipSpeed })\n }\n }, [props.flipSpeed])\n\n const frontUniformsKey = JSON.stringify(props.front.uniforms ?? {})\n const backUniformsKey = JSON.stringify(props.back?.uniforms ?? {})\n useEffect(() => {\n cardRef.current?.updateOptions({\n front: { uniforms: props.front.uniforms },\n back: props.back ? { uniforms: props.back.uniforms } : undefined,\n })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [frontUniformsKey, backUniformsKey])\n\n const frontFrameKey = JSON.stringify(props.front.frame ?? {})\n const backFrameKey = JSON.stringify(props.back?.frame ?? {})\n useEffect(() => {\n cardRef.current?.updateOptions({\n front: { frame: props.front.frame },\n back: props.back ? { frame: props.back.frame } : undefined,\n })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [frontFrameKey, backFrameKey])\n\n useEffect(() => {\n const card = cardRef.current\n if (!card) return\n\n const onFlip = props.onFlip\n const onReady = props.onReady\n const onError = props.onError\n\n if (onFlip) card.on('flip', onFlip)\n if (onReady) card.on('ready', onReady)\n if (onError) card.on('error', onError)\n\n return () => {\n if (onFlip) card.off('flip', onFlip)\n if (onReady) card.off('ready', onReady)\n if (onError) card.off('error', onError)\n }\n }, [props.onFlip, props.onReady, props.onError])\n\n useImperativeHandle(refHandle, () => ({\n flip: () => cardRef.current?.flip(),\n wiggle: () => cardRef.current?.wiggle(),\n reset: () => cardRef.current?.reset(),\n }))\n\n return (\n <div\n ref={containerRef}\n style={props.style}\n className={props.className}\n >\n {portalTargets.front && props.front.content && createPortal(props.front.content, portalTargets.front)}\n {portalTargets.back && props.back?.content && createPortal(props.back.content, portalTargets.back)}\n </div>\n )\n}\n\nexport const PocaCard = forwardRef<PocaCardHandle, PocaCardProps>(\n (props, ref) => {\n if (isConnectedProps(props)) {\n return ConnectedPocaCard(props, ref)\n }\n\n const resolved = isConfigProps(props) ? resolveConfigProps(props.config, props) : props\n return <PocaCardRenderer props={resolved} refHandle={ref} />\n },\n)\n\nPocaCard.displayName = 'PocaCard'\n","import type { FaceProps } from './PocaCard'\n\nconst DEFAULT_API_BASE_URL = 'https://pocato-api.gamzabaw.workers.dev'\n\nexport type EffectParamValue = string | number | boolean\n\nexport interface EffectParamSchema {\n key: string\n label: string\n uniform: string\n type: 'number' | 'boolean' | 'color' | 'select'\n defaultValue: EffectParamValue\n min?: number\n max?: number\n step?: number\n options?: Array<{ label: string; value: EffectParamValue }>\n}\n\nexport interface PocaCardEffectConfig {\n id: string\n label: string\n shader: string\n minLayers: number\n params: Record<string, EffectParamValue>\n schema: EffectParamSchema[]\n customizedShader?: boolean\n}\n\nexport interface PocaCardFaceConfig extends Omit<FaceProps, 'content'> {\n effect?: PocaCardEffectConfig\n html?: string\n}\n\nexport interface PocaCardConfig {\n cardSize?: {\n width: number\n height: number\n preset?: string\n }\n front: PocaCardFaceConfig\n back?: PocaCardFaceConfig\n flippable?: boolean\n initialFlipped?: boolean\n flipSpeed?: number\n}\n\nexport interface PublishedConfigResponse {\n cardId: string\n releaseId: string\n config: PocaCardConfig\n}\n\nexport interface PocatoClientOptions {\n apiBaseUrl?: string\n publishableKey: string\n}\n\nfunction getApiBaseUrl(apiBaseUrl?: string): string {\n return apiBaseUrl ?? DEFAULT_API_BASE_URL\n}\n\nexport async function fetchPublishedConfig(\n cardId: string,\n options: PocatoClientOptions,\n): Promise<PublishedConfigResponse> {\n const baseUrl = getApiBaseUrl(options.apiBaseUrl)\n const res = await fetch(`${baseUrl}/api/v1/public/cards/${cardId}/config`, {\n headers: {\n 'X-Pocato-Key': options.publishableKey,\n },\n })\n\n if (!res.ok) {\n throw new Error(`Failed to load Pocato card config: ${res.status}`)\n }\n\n return res.json()\n}\n\nexport async function trackCardEvent(\n cardId: string,\n options: PocatoClientOptions & { eventType: 'card_ready' | 'render_error' },\n): Promise<void> {\n const baseUrl = getApiBaseUrl(options.apiBaseUrl)\n await fetch(`${baseUrl}/api/v1/public/cards/${cardId}/events`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Pocato-Key': options.publishableKey,\n },\n body: JSON.stringify({ eventType: options.eventType }),\n keepalive: true,\n }).catch(() => {\n // Usage metering must not break customer rendering.\n })\n}\n","import { useCallback, useEffect, useMemo, useState } from 'react'\nimport {\n fetchPublishedConfig,\n type PocatoClientOptions,\n type PocaCardConfig,\n type PublishedConfigResponse,\n} from './pocato-client'\n\nconst cache = new Map<string, PublishedConfigResponse>()\n\nexport function getPocatoConfigCacheKey(\n apiBaseUrl: string | undefined,\n publishableKey: string,\n cardId: string,\n): string {\n return `${apiBaseUrl ?? ''}:${publishableKey}:${cardId}`\n}\n\nexport interface UsePocatoConfigInput extends PocatoClientOptions {\n cardId: string\n}\n\nexport interface UsePocatoConfigResult {\n data: PublishedConfigResponse | null\n config: PocaCardConfig | null\n loading: boolean\n error: Error | null\n refetch: () => Promise<PublishedConfigResponse | null>\n}\n\nexport function usePocatoConfig(input: UsePocatoConfigInput): UsePocatoConfigResult {\n const cacheKey = useMemo(() => {\n return getPocatoConfigCacheKey(input.apiBaseUrl, input.publishableKey, input.cardId)\n }, [input.apiBaseUrl, input.publishableKey, input.cardId])\n\n const [data, setData] = useState<PublishedConfigResponse | null>(() => {\n return cache.get(cacheKey) ?? null\n })\n const [loading, setLoading] = useState(!data)\n const [error, setError] = useState<Error | null>(null)\n\n const load = useCallback(async (options?: { force?: boolean }) => {\n if (!options?.force) {\n const cached = cache.get(cacheKey)\n if (cached) {\n setData(cached)\n setLoading(false)\n setError(null)\n return cached\n }\n }\n\n setData(null)\n setLoading(true)\n setError(null)\n\n try {\n const response = await fetchPublishedConfig(input.cardId, {\n apiBaseUrl: input.apiBaseUrl,\n publishableKey: input.publishableKey,\n })\n cache.set(cacheKey, response)\n setData(response)\n setLoading(false)\n return response\n } catch (err) {\n const nextError = err instanceof Error ? err : new Error('Failed to load Pocato config')\n setError(nextError)\n setLoading(false)\n return null\n }\n }, [cacheKey, input.apiBaseUrl, input.cardId, input.publishableKey])\n\n useEffect(() => {\n let cancelled = false\n const cached = cache.get(cacheKey)\n\n if (cached) {\n setData(cached)\n setLoading(false)\n setError(null)\n return\n }\n\n setData(null)\n setLoading(true)\n setError(null)\n\n fetchPublishedConfig(input.cardId, {\n apiBaseUrl: input.apiBaseUrl,\n publishableKey: input.publishableKey,\n })\n .then((response) => {\n if (cancelled) return\n cache.set(cacheKey, response)\n setData(response)\n setLoading(false)\n })\n .catch((err) => {\n if (cancelled) return\n setError(err instanceof Error ? err : new Error('Failed to load Pocato config'))\n setLoading(false)\n })\n\n return () => {\n cancelled = true\n }\n }, [cacheKey, input.apiBaseUrl, input.publishableKey, input.cardId])\n\n return {\n data,\n config: data?.config ?? null,\n loading,\n error,\n refetch: () => load({ force: true }),\n }\n}\n"],"mappings":"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","names":["useEffect","useState","useEffect","useState"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sangwonl/pocato-react",
3
- "version": "0.4.0",
3
+ "version": "0.4.2",
4
4
  "author": "Sangwon Lee <gamzabaw@gmail.com>",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -25,7 +25,7 @@
25
25
  "dev": "tsup --watch"
26
26
  },
27
27
  "dependencies": {
28
- "@sangwonl/pocato-core": "0.4.0"
28
+ "@sangwonl/pocato-core": "0.4.1"
29
29
  },
30
30
  "peerDependencies": {
31
31
  "react": "^18.0.0 || ^19.0.0",