@vio-live/web-sdk 0.21.0 → 0.23.1
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/README.md +177 -0
- package/dist/chunk-45YKS5UG.js +3 -0
- package/dist/{chunk-PZUOMOLF.js.map → chunk-45YKS5UG.js.map} +1 -1
- package/dist/{chunk-WTVGVDZX.js → chunk-BRJMT7P4.js} +1053 -80
- package/dist/chunk-BRJMT7P4.js.map +1 -0
- package/dist/{chunk-MRJR6DG5.js → chunk-UVDOKFGD.js} +403 -34
- package/dist/chunk-UVDOKFGD.js.map +1 -0
- package/dist/core/index.d.ts +431 -16
- package/dist/core/index.js +2 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +3 -3
- package/dist/react/index.js.map +1 -1
- package/dist/{tokens-Dkbfcd1L.d.ts → tokens-DDfZuHF6.d.ts} +108 -0
- package/dist/ui/index.d.ts +1 -1
- package/dist/ui/index.js +3 -3
- package/package.json +1 -1
- package/dist/chunk-MRJR6DG5.js.map +0 -1
- package/dist/chunk-PZUOMOLF.js +0 -3
- package/dist/chunk-WTVGVDZX.js.map +0 -1
package/dist/react/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as _lit_react from '@lit/react';
|
|
2
|
-
import { V as VioCart$1, a as VioCheckout$1, b as VioProduct$1, c as VioProductCarousel$1, d as VioProductDetail$1 } from '../tokens-
|
|
3
|
-
export { e as VioThemeOverrides, f as VioTokens, g as applyVioTheme } from '../tokens-
|
|
2
|
+
import { V as VioCart$1, a as VioCheckout$1, b as VioProduct$1, c as VioProductCarousel$1, d as VioProductDetail$1 } from '../tokens-DDfZuHF6.js';
|
|
3
|
+
export { e as VioThemeOverrides, f as VioTokens, g as applyVioTheme } from '../tokens-DDfZuHF6.js';
|
|
4
4
|
import 'lit-html';
|
|
5
5
|
import 'lit';
|
|
6
6
|
|
package/dist/react/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { registerVioElements, VioProduct, VioProductCarousel, VioProductDetail, VioCart, VioCheckout } from '../chunk-
|
|
2
|
-
export { VioTokens, applyVioTheme } from '../chunk-
|
|
3
|
-
import '../chunk-
|
|
1
|
+
import { registerVioElements, VioProduct, VioProductCarousel, VioProductDetail, VioCart, VioCheckout } from '../chunk-UVDOKFGD.js';
|
|
2
|
+
export { VioTokens, applyVioTheme } from '../chunk-UVDOKFGD.js';
|
|
3
|
+
import '../chunk-BRJMT7P4.js';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
|
|
6
6
|
// node_modules/@lit/react/node/create-component.js
|
package/dist/react/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../node_modules/@lit/react/src/create-component.ts","../../src/react/index.ts"],"names":["reservedReactProperties","Set","createComponent","react","React","tagName","elementClass","events","displayName","eventProps","Object","keys","ReactComponent","forwardRef","props","ref","useRef","Map","elementRef","reactProps","elementProps","k","v","entries","has","prototype","createElement","name","globalThis","litSsrReactEnabled","length","useCallback","node","current","VioProduct","VioProductCarousel","VioProductDetail","VioCart","VioCheckout"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport type React from 'react';\n\nconst NODE_MODE = false;\nconst DEV_MODE = true;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DistributiveOmit<T, K extends string | number | symbol> = T extends any\n ? K extends keyof T\n ? Omit<T, K>\n : T\n : T;\ntype PropsWithoutRef<T> = DistributiveOmit<T, 'ref'>;\n\n/**\n * Creates a type to be used for the props of a web component used directly in\n * React JSX.\n *\n * Example:\n *\n * ```ts\n * declare module \"react\" {\n * namespace JSX {\n * interface IntrinsicElements {\n * 'x-foo': WebComponentProps<XFoo>;\n * }\n * }\n * }\n * ```\n */\nexport type WebComponentProps<I extends HTMLElement> = React.DetailedHTMLProps<\n React.HTMLAttributes<I>,\n I\n> &\n ElementProps<I>;\n\n/**\n * Type of the React component wrapping the web component. This is the return\n * type of `createComponent`.\n */\nexport type ReactWebComponent<\n I extends HTMLElement,\n E extends EventNames = {},\n> = React.ForwardRefExoticComponent<\n // TODO(augustjk): Remove and use `React.PropsWithoutRef` when\n // https://github.com/preactjs/preact/issues/4124 is fixed.\n PropsWithoutRef<ComponentProps<I, E>> & React.RefAttributes<I>\n>;\n\n// Props derived from custom element class. Currently has limitations of making\n// all properties optional and also surfaces life cycle methods in autocomplete.\n// TODO(augustjk) Consider omitting keyof LitElement to remove \"internal\"\n// lifecycle methods or allow user to explicitly provide props.\ntype ElementProps<I> = Partial<Omit<I, keyof HTMLElement>>;\n\n// Acceptable props to the React component.\ntype ComponentProps<I, E extends EventNames = {}> = Omit<\n React.HTMLAttributes<I>,\n // Prefer type of provided event handler props or those on element over\n // built-in HTMLAttributes\n keyof E | keyof ElementProps<I>\n> &\n EventListeners<E> &\n ElementProps<I>;\n\n/**\n * Type used to cast an event name with an event type when providing the\n * `events` option to `createComponent` for better typing of the event handler\n * prop.\n *\n * Example:\n *\n * ```ts\n * const FooComponent = createComponent({\n * ...\n * events: {\n * onfoo: 'foo' as EventName<FooEvent>,\n * }\n * });\n * ```\n *\n * `onfoo` prop will have the type `(e: FooEvent) => void`.\n */\nexport type EventName<T extends Event = Event> = string & {\n __eventType: T;\n};\n\n// A key value map matching React prop names to event names.\ntype EventNames = Record<string, EventName | string>;\n\n// A map of expected event listener types based on EventNames.\ntype EventListeners<R extends EventNames> = {\n [K in keyof R]?: R[K] extends EventName\n ? (e: R[K]['__eventType']) => void\n : (e: Event) => void;\n};\n\nexport interface Options<I extends HTMLElement, E extends EventNames = {}> {\n react: typeof React;\n tagName: string;\n elementClass: Constructor<I>;\n events?: E;\n displayName?: string;\n}\n\ntype Constructor<T> = {new (): T};\n\nconst reservedReactProperties = new Set([\n 'children',\n 'localName',\n 'ref',\n 'style',\n 'className',\n]);\n\nconst listenedEvents = new WeakMap<Element, Map<string, EventListenerObject>>();\n\n/**\n * Adds an event listener for the specified event to the given node. In the\n * React setup, there should only ever be one event listener. Thus, for\n * efficiency only one listener is added and the handler for that listener is\n * updated to point to the given listener function.\n */\nconst addOrUpdateEventListener = (\n node: Element,\n event: string,\n listener: (event?: Event) => void\n) => {\n let events = listenedEvents.get(node);\n if (events === undefined) {\n listenedEvents.set(node, (events = new Map()));\n }\n let handler = events.get(event);\n if (listener !== undefined) {\n // If necessary, add listener and track handler\n if (handler === undefined) {\n events.set(event, (handler = {handleEvent: listener}));\n node.addEventListener(event, handler);\n // Otherwise just update the listener with new value\n } else {\n handler.handleEvent = listener;\n }\n // Remove listener if one exists and value is undefined\n } else if (handler !== undefined) {\n events.delete(event);\n node.removeEventListener(event, handler);\n }\n};\n\n/**\n * Sets properties and events on custom elements. These properties and events\n * have been pre-filtered so we know they should apply to the custom element.\n */\nconst setProperty = <E extends Element>(\n node: E,\n name: string,\n value: unknown,\n old: unknown,\n events?: EventNames\n) => {\n const event = events?.[name];\n // Dirty check event value.\n if (event !== undefined) {\n if (value !== old) {\n addOrUpdateEventListener(node, event, value as (e?: Event) => void);\n }\n return;\n }\n // But don't dirty check properties; elements are assumed to do this.\n node[name as keyof E] = value as E[keyof E];\n\n // This block is to replicate React's behavior for attributes of native\n // elements where `undefined` or `null` values result in attributes being\n // removed.\n // https://github.com/facebook/react/blob/899cb95f52cc83ab5ca1eb1e268c909d3f0961e7/packages/react-dom-bindings/src/client/DOMPropertyOperations.js#L107-L141\n //\n // It's only needed here for native HTMLElement properties that reflect\n // attributes of the same name but don't have that behavior like \"id\" or\n // \"draggable\".\n if (\n (value === undefined || value === null) &&\n name in HTMLElement.prototype\n ) {\n node.removeAttribute(name);\n }\n};\n\n/**\n * Creates a React component for a custom element. Properties are distinguished\n * from attributes automatically, and events can be configured so they are added\n * to the custom element as event listeners.\n *\n * @param options An options bag containing the parameters needed to generate a\n * wrapped web component.\n *\n * @param options.react The React module, typically imported from the `react`\n * npm package.\n * @param options.tagName The custom element tag name registered via\n * `customElements.define`.\n * @param options.elementClass The custom element class registered via\n * `customElements.define`.\n * @param options.events An object listing events to which the component can\n * listen. The object keys are the event property names passed in via React\n * props and the object values are the names of the corresponding events\n * generated by the custom element. For example, given `{onactivate:\n * 'activate'}` an event function may be passed via the component's `onactivate`\n * prop and will be called when the custom element fires its `activate` event.\n * @param options.displayName A React component display name, used in debugging\n * messages. Default value is inferred from the name of custom element class\n * registered via `customElements.define`.\n */\nexport const createComponent = <\n I extends HTMLElement,\n E extends EventNames = {},\n>({\n react: React,\n tagName,\n elementClass,\n events,\n displayName,\n}: Options<I, E>): ReactWebComponent<I, E> => {\n const eventProps = new Set(Object.keys(events ?? {}));\n\n if (DEV_MODE && !NODE_MODE) {\n for (const p of reservedReactProperties) {\n if (p in elementClass.prototype && !(p in HTMLElement.prototype)) {\n // Note, this effectively warns only for `ref` since the other\n // reserved props are on HTMLElement.prototype. To address this\n // would require crawling down the prototype, which doesn't feel worth\n // it since implementing these properties on an element is extremely\n // rare.\n console.warn(\n `${tagName} contains property ${p} which is a React reserved ` +\n `property. It will be used by React and not set on the element.`\n );\n }\n }\n }\n\n type Props = ComponentProps<I, E>;\n\n const ReactComponent = React.forwardRef<I, Props>((props, ref) => {\n const prevElemPropsRef = React.useRef(new Map());\n const elementRef = React.useRef<I | null>(null);\n\n // Props to be passed to React.createElement\n const reactProps: Record<string, unknown> = {};\n // Props to be set on element with setProperty\n const elementProps: Record<string, unknown> = {};\n\n for (const [k, v] of Object.entries(props)) {\n if (reservedReactProperties.has(k)) {\n // React does *not* handle `className` for custom elements so\n // coerce it to `class` so it's handled correctly.\n reactProps[k === 'className' ? 'class' : k] = v;\n continue;\n }\n\n if (eventProps.has(k) || k in elementClass.prototype) {\n elementProps[k] = v;\n continue;\n }\n\n reactProps[k] = v;\n }\n\n // useLayoutEffect produces warnings during server rendering.\n if (!NODE_MODE) {\n // This one has no dependency array so it'll run on every re-render.\n React.useLayoutEffect(() => {\n if (elementRef.current === null) {\n return;\n }\n const newElemProps = new Map();\n for (const key in elementProps) {\n setProperty(\n elementRef.current,\n key,\n props[key],\n prevElemPropsRef.current.get(key),\n events\n );\n prevElemPropsRef.current.delete(key);\n newElemProps.set(key, props[key]);\n }\n // \"Unset\" any props from previous render that no longer exist.\n // Setting to `undefined` seems like the correct thing to \"unset\"\n // but currently React will set it as `null`.\n // See https://github.com/facebook/react/issues/28203\n for (const [key, value] of prevElemPropsRef.current) {\n setProperty(elementRef.current, key, undefined, value, events);\n }\n prevElemPropsRef.current = newElemProps;\n });\n\n // Empty dependency array so this will only run once after first render.\n React.useLayoutEffect(() => {\n elementRef.current?.removeAttribute('defer-hydration');\n }, []);\n }\n\n if (NODE_MODE) {\n // If component is to be server rendered with `@lit/ssr-react`, pass\n // element properties in a special bag to be set by the server-side\n // element renderer.\n if (\n (React.createElement.name === 'litPatchedCreateElement' ||\n globalThis.litSsrReactEnabled) &&\n Object.keys(elementProps).length\n ) {\n // This property needs to remain unminified.\n reactProps['_$litProps$'] = elementProps;\n }\n } else {\n // Suppress hydration warning for server-rendered attributes.\n // This property needs to remain unminified.\n reactProps['suppressHydrationWarning'] = true;\n }\n\n return React.createElement(tagName, {\n ...reactProps,\n ref: React.useCallback(\n (node: I) => {\n elementRef.current = node;\n if (typeof ref === 'function') {\n ref(node);\n } else if (ref !== null) {\n ref.current = node;\n }\n },\n [ref]\n ),\n });\n });\n\n ReactComponent.displayName = displayName ?? elementClass.name;\n\n return ReactComponent;\n};\n","/**\n * Vio React adapter — typed React wrappers for the `<vio-*>` web components.\n *\n * Built on `@lit/react`'s `createComponent`, which gives each wrapper:\n * - typed props derived from the element's reactive properties, and\n * - typed event props (the `vio:*` CustomEvents below) as `onX` callbacks.\n *\n * Importing this entry also REGISTERS the custom elements (via the\n * `registerVioElements()` call below), so you do NOT need a separate\n * `import '@vio-live/web-sdk/ui'` when you use these.\n *\n * React 18+ is an (optional) peer dependency — only required if you import this\n * entry. `@lit/react` is bundled in, so consumers install nothing extra.\n *\n * import { Vio } from '@vio-live/web-sdk'\n * import { VioProductCarousel } from '@vio-live/web-sdk/react'\n * Vio.init({ apiKey, apiBase, graphqlBase, stripePublishableKey })\n * <VioProductCarousel onProductAdd={(e) => console.log(e.detail)} />\n */\n\nimport * as React from 'react'\nimport { createComponent } from '@lit/react'\nimport {\n registerVioElements,\n VioProduct as VioProductEl,\n VioProductCarousel as VioProductCarouselEl,\n VioProductDetail as VioProductDetailEl,\n VioCart as VioCartEl,\n VioCheckout as VioCheckoutEl,\n} from '../ui/elements.js'\n// Not just for the re-export below — the import itself injects the default\n// design tokens as CSS custom properties on `:root` (see tokens.ts). Without\n// it, `elements.js` alone never pulls tokens.ts in, so this entry (the one\n// the Vev bundle actually goes through) never ran that injection.\nimport '../ui/tokens.js'\n\n// Register the underlying custom elements when this entry is imported.\nregisterVioElements()\n\nexport const VioProduct = createComponent({\n react: React,\n tagName: 'vio-product',\n elementClass: VioProductEl,\n events: {\n onProductClick: 'vio:product-click',\n onProductAdd: 'vio:product-add',\n },\n})\n\nexport const VioProductCarousel = createComponent({\n react: React,\n tagName: 'vio-product-carousel',\n elementClass: VioProductCarouselEl,\n events: {},\n})\n\nexport const VioProductDetail = createComponent({\n react: React,\n tagName: 'vio-product-detail',\n elementClass: VioProductDetailEl,\n events: {\n onAddedToCart: 'vio:added-to-cart',\n onCheckoutOpen: 'vio:checkout-open',\n },\n})\n\nexport const VioCart = createComponent({\n react: React,\n tagName: 'vio-cart',\n elementClass: VioCartEl,\n events: {\n onPaymentSuccess: 'vio:payment-success',\n onCheckoutOpen: 'vio:checkout-open',\n },\n})\n\nexport const VioCheckout = createComponent({\n react: React,\n tagName: 'vio-checkout',\n elementClass: VioCheckoutEl,\n events: {\n onPaymentSuccess: 'vio:payment-success',\n },\n})\n\nexport { VioTokens, applyVioTheme, type VioThemeOverrides } from '../ui/tokens.js'\n"]}
|
|
1
|
+
{"version":3,"sources":["../../node_modules/@lit/react/src/create-component.ts","../../src/react/index.ts"],"names":["reservedReactProperties","Set","createComponent","react","React","tagName","elementClass","events","displayName","eventProps","Object","keys","ReactComponent","forwardRef","props","ref","useRef","Map","elementRef","reactProps","elementProps","k","v","entries","has","prototype","createElement","name","globalThis","litSsrReactEnabled","length","useCallback","node","current","VioProduct","VioProductCarousel","VioProductDetail","VioCart","VioCheckout"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport type React from 'react';\n\nconst NODE_MODE = false;\nconst DEV_MODE = true;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DistributiveOmit<T, K extends string | number | symbol> = T extends any\n ? K extends keyof T\n ? Omit<T, K>\n : T\n : T;\ntype PropsWithoutRef<T> = DistributiveOmit<T, 'ref'>;\n\n/**\n * Creates a type to be used for the props of a web component used directly in\n * React JSX.\n *\n * Example:\n *\n * ```ts\n * declare module \"react\" {\n * namespace JSX {\n * interface IntrinsicElements {\n * 'x-foo': WebComponentProps<XFoo>;\n * }\n * }\n * }\n * ```\n */\nexport type WebComponentProps<I extends HTMLElement> = React.DetailedHTMLProps<\n React.HTMLAttributes<I>,\n I\n> &\n ElementProps<I>;\n\n/**\n * Type of the React component wrapping the web component. This is the return\n * type of `createComponent`.\n */\nexport type ReactWebComponent<\n I extends HTMLElement,\n E extends EventNames = {},\n> = React.ForwardRefExoticComponent<\n // TODO(augustjk): Remove and use `React.PropsWithoutRef` when\n // https://github.com/preactjs/preact/issues/4124 is fixed.\n PropsWithoutRef<ComponentProps<I, E>> & React.RefAttributes<I>\n>;\n\n// Props derived from custom element class. Currently has limitations of making\n// all properties optional and also surfaces life cycle methods in autocomplete.\n// TODO(augustjk) Consider omitting keyof LitElement to remove \"internal\"\n// lifecycle methods or allow user to explicitly provide props.\ntype ElementProps<I> = Partial<Omit<I, keyof HTMLElement>>;\n\n// Acceptable props to the React component.\ntype ComponentProps<I, E extends EventNames = {}> = Omit<\n React.HTMLAttributes<I>,\n // Prefer type of provided event handler props or those on element over\n // built-in HTMLAttributes\n keyof E | keyof ElementProps<I>\n> &\n EventListeners<E> &\n ElementProps<I>;\n\n/**\n * Type used to cast an event name with an event type when providing the\n * `events` option to `createComponent` for better typing of the event handler\n * prop.\n *\n * Example:\n *\n * ```ts\n * const FooComponent = createComponent({\n * ...\n * events: {\n * onfoo: 'foo' as EventName<FooEvent>,\n * }\n * });\n * ```\n *\n * `onfoo` prop will have the type `(e: FooEvent) => void`.\n */\nexport type EventName<T extends Event = Event> = string & {\n __eventType: T;\n};\n\n// A key value map matching React prop names to event names.\ntype EventNames = Record<string, EventName | string>;\n\n// A map of expected event listener types based on EventNames.\ntype EventListeners<R extends EventNames> = {\n [K in keyof R]?: R[K] extends EventName\n ? (e: R[K]['__eventType']) => void\n : (e: Event) => void;\n};\n\nexport interface Options<I extends HTMLElement, E extends EventNames = {}> {\n react: typeof React;\n tagName: string;\n elementClass: Constructor<I>;\n events?: E;\n displayName?: string;\n}\n\ntype Constructor<T> = {new (): T};\n\nconst reservedReactProperties = new Set([\n 'children',\n 'localName',\n 'ref',\n 'style',\n 'className',\n]);\n\nconst listenedEvents = new WeakMap<Element, Map<string, EventListenerObject>>();\n\n/**\n * Adds an event listener for the specified event to the given node. In the\n * React setup, there should only ever be one event listener. Thus, for\n * efficiency only one listener is added and the handler for that listener is\n * updated to point to the given listener function.\n */\nconst addOrUpdateEventListener = (\n node: Element,\n event: string,\n listener: (event?: Event) => void\n) => {\n let events = listenedEvents.get(node);\n if (events === undefined) {\n listenedEvents.set(node, (events = new Map()));\n }\n let handler = events.get(event);\n if (listener !== undefined) {\n // If necessary, add listener and track handler\n if (handler === undefined) {\n events.set(event, (handler = {handleEvent: listener}));\n node.addEventListener(event, handler);\n // Otherwise just update the listener with new value\n } else {\n handler.handleEvent = listener;\n }\n // Remove listener if one exists and value is undefined\n } else if (handler !== undefined) {\n events.delete(event);\n node.removeEventListener(event, handler);\n }\n};\n\n/**\n * Sets properties and events on custom elements. These properties and events\n * have been pre-filtered so we know they should apply to the custom element.\n */\nconst setProperty = <E extends Element>(\n node: E,\n name: string,\n value: unknown,\n old: unknown,\n events?: EventNames\n) => {\n const event = events?.[name];\n // Dirty check event value.\n if (event !== undefined) {\n if (value !== old) {\n addOrUpdateEventListener(node, event, value as (e?: Event) => void);\n }\n return;\n }\n // But don't dirty check properties; elements are assumed to do this.\n node[name as keyof E] = value as E[keyof E];\n\n // This block is to replicate React's behavior for attributes of native\n // elements where `undefined` or `null` values result in attributes being\n // removed.\n // https://github.com/facebook/react/blob/899cb95f52cc83ab5ca1eb1e268c909d3f0961e7/packages/react-dom-bindings/src/client/DOMPropertyOperations.js#L107-L141\n //\n // It's only needed here for native HTMLElement properties that reflect\n // attributes of the same name but don't have that behavior like \"id\" or\n // \"draggable\".\n if (\n (value === undefined || value === null) &&\n name in HTMLElement.prototype\n ) {\n node.removeAttribute(name);\n }\n};\n\n/**\n * Creates a React component for a custom element. Properties are distinguished\n * from attributes automatically, and events can be configured so they are added\n * to the custom element as event listeners.\n *\n * @param options An options bag containing the parameters needed to generate a\n * wrapped web component.\n *\n * @param options.react The React module, typically imported from the `react`\n * npm package.\n * @param options.tagName The custom element tag name registered via\n * `customElements.define`.\n * @param options.elementClass The custom element class registered via\n * `customElements.define`.\n * @param options.events An object listing events to which the component can\n * listen. The object keys are the event property names passed in via React\n * props and the object values are the names of the corresponding events\n * generated by the custom element. For example, given `{onactivate:\n * 'activate'}` an event function may be passed via the component's `onactivate`\n * prop and will be called when the custom element fires its `activate` event.\n * @param options.displayName A React component display name, used in debugging\n * messages. Default value is inferred from the name of custom element class\n * registered via `customElements.define`.\n */\nexport const createComponent = <\n I extends HTMLElement,\n E extends EventNames = {},\n>({\n react: React,\n tagName,\n elementClass,\n events,\n displayName,\n}: Options<I, E>): ReactWebComponent<I, E> => {\n const eventProps = new Set(Object.keys(events ?? {}));\n\n if (DEV_MODE && !NODE_MODE) {\n for (const p of reservedReactProperties) {\n if (p in elementClass.prototype && !(p in HTMLElement.prototype)) {\n // Note, this effectively warns only for `ref` since the other\n // reserved props are on HTMLElement.prototype. To address this\n // would require crawling down the prototype, which doesn't feel worth\n // it since implementing these properties on an element is extremely\n // rare.\n console.warn(\n `${tagName} contains property ${p} which is a React reserved ` +\n `property. It will be used by React and not set on the element.`\n );\n }\n }\n }\n\n type Props = ComponentProps<I, E>;\n\n const ReactComponent = React.forwardRef<I, Props>((props, ref) => {\n const prevElemPropsRef = React.useRef(new Map());\n const elementRef = React.useRef<I | null>(null);\n\n // Props to be passed to React.createElement\n const reactProps: Record<string, unknown> = {};\n // Props to be set on element with setProperty\n const elementProps: Record<string, unknown> = {};\n\n for (const [k, v] of Object.entries(props)) {\n if (reservedReactProperties.has(k)) {\n // React does *not* handle `className` for custom elements so\n // coerce it to `class` so it's handled correctly.\n reactProps[k === 'className' ? 'class' : k] = v;\n continue;\n }\n\n if (eventProps.has(k) || k in elementClass.prototype) {\n elementProps[k] = v;\n continue;\n }\n\n reactProps[k] = v;\n }\n\n // useLayoutEffect produces warnings during server rendering.\n if (!NODE_MODE) {\n // This one has no dependency array so it'll run on every re-render.\n React.useLayoutEffect(() => {\n if (elementRef.current === null) {\n return;\n }\n const newElemProps = new Map();\n for (const key in elementProps) {\n setProperty(\n elementRef.current,\n key,\n props[key],\n prevElemPropsRef.current.get(key),\n events\n );\n prevElemPropsRef.current.delete(key);\n newElemProps.set(key, props[key]);\n }\n // \"Unset\" any props from previous render that no longer exist.\n // Setting to `undefined` seems like the correct thing to \"unset\"\n // but currently React will set it as `null`.\n // See https://github.com/facebook/react/issues/28203\n for (const [key, value] of prevElemPropsRef.current) {\n setProperty(elementRef.current, key, undefined, value, events);\n }\n prevElemPropsRef.current = newElemProps;\n });\n\n // Empty dependency array so this will only run once after first render.\n React.useLayoutEffect(() => {\n elementRef.current?.removeAttribute('defer-hydration');\n }, []);\n }\n\n if (NODE_MODE) {\n // If component is to be server rendered with `@lit/ssr-react`, pass\n // element properties in a special bag to be set by the server-side\n // element renderer.\n if (\n (React.createElement.name === 'litPatchedCreateElement' ||\n globalThis.litSsrReactEnabled) &&\n Object.keys(elementProps).length\n ) {\n // This property needs to remain unminified.\n reactProps['_$litProps$'] = elementProps;\n }\n } else {\n // Suppress hydration warning for server-rendered attributes.\n // This property needs to remain unminified.\n reactProps['suppressHydrationWarning'] = true;\n }\n\n return React.createElement(tagName, {\n ...reactProps,\n ref: React.useCallback(\n (node: I) => {\n elementRef.current = node;\n if (typeof ref === 'function') {\n ref(node);\n } else if (ref !== null) {\n ref.current = node;\n }\n },\n [ref]\n ),\n });\n });\n\n ReactComponent.displayName = displayName ?? elementClass.name;\n\n return ReactComponent;\n};\n","/**\n * Vio React adapter — typed React wrappers for the `<vio-*>` web components.\n *\n * Built on `@lit/react`'s `createComponent`, which gives each wrapper:\n * - typed props derived from the element's reactive properties, and\n * - typed event props (the `vio:*` CustomEvents below) as `onX` callbacks.\n *\n * Importing this entry also REGISTERS the custom elements (via the\n * `registerVioElements()` call below), so you do NOT need a separate\n * `import '@vio-live/web-sdk/ui'` when you use these.\n *\n * React 18+ is an (optional) peer dependency — only required if you import this\n * entry. `@lit/react` is bundled in, so consumers install nothing extra.\n *\n * import { Vio } from '@vio-live/web-sdk'\n * import { VioProductCarousel } from '@vio-live/web-sdk/react'\n * Vio.init({ apiKey, apiBase, graphqlBase, stripePublishableKey })\n * <VioProductCarousel onProductAdd={(e) => console.log(e.detail)} />\n *\n * Slots (ADR-0027): the element property is `vioSlot` (attribute `vio-slot`),\n * so in React it is `<VioProductCarousel vioSlot=\"hero\" />`. `@lit/react`\n * passes every reactive property of the element class through as a prop and\n * sets it on the element after mount — the elements re-register the slot from\n * `updated()`, so the late set is fine. `slot` itself is React's/HTML's own\n * attribute (shadow DOM slotting) — do not use it for this.\n * Typed in `index.props.test.ts` (compile-time, checked by `npm run typecheck`).\n */\n\nimport * as React from 'react'\nimport { createComponent } from '@lit/react'\nimport {\n registerVioElements,\n VioProduct as VioProductEl,\n VioProductCarousel as VioProductCarouselEl,\n VioProductDetail as VioProductDetailEl,\n VioCart as VioCartEl,\n VioCheckout as VioCheckoutEl,\n} from '../ui/elements.js'\n// Not just for the re-export below — the import itself injects the default\n// design tokens as CSS custom properties on `:root` (see tokens.ts). Without\n// it, `elements.js` alone never pulls tokens.ts in, so this entry (the one\n// the Vev bundle actually goes through) never ran that injection.\nimport '../ui/tokens.js'\n\n// Register the underlying custom elements when this entry is imported.\nregisterVioElements()\n\nexport const VioProduct = createComponent({\n react: React,\n tagName: 'vio-product',\n elementClass: VioProductEl,\n events: {\n onProductClick: 'vio:product-click',\n onProductAdd: 'vio:product-add',\n },\n})\n\nexport const VioProductCarousel = createComponent({\n react: React,\n tagName: 'vio-product-carousel',\n elementClass: VioProductCarouselEl,\n events: {},\n})\n\nexport const VioProductDetail = createComponent({\n react: React,\n tagName: 'vio-product-detail',\n elementClass: VioProductDetailEl,\n events: {\n onAddedToCart: 'vio:added-to-cart',\n onCheckoutOpen: 'vio:checkout-open',\n },\n})\n\nexport const VioCart = createComponent({\n react: React,\n tagName: 'vio-cart',\n elementClass: VioCartEl,\n events: {\n onPaymentSuccess: 'vio:payment-success',\n onCheckoutOpen: 'vio:checkout-open',\n },\n})\n\nexport const VioCheckout = createComponent({\n react: React,\n tagName: 'vio-checkout',\n elementClass: VioCheckoutEl,\n events: {\n onPaymentSuccess: 'vio:payment-success',\n },\n})\n\nexport { VioTokens, applyVioTheme, type VioThemeOverrides } from '../ui/tokens.js'\n"]}
|
|
@@ -17,6 +17,41 @@ declare class VioProduct extends LitElement {
|
|
|
17
17
|
productId: string;
|
|
18
18
|
/** Vio sponsor id, propagated to click event. */
|
|
19
19
|
sponsorId: string;
|
|
20
|
+
/**
|
|
21
|
+
* Slot this card sits in (ADR-0027). Optional: without it the card registers
|
|
22
|
+
* itself as `card-N` (its position among the cards on the page). Set it to
|
|
23
|
+
* name the place yourself or to make several elements share one slot. It is
|
|
24
|
+
* carried by every event the card emits, so attribution goes to the campaign
|
|
25
|
+
* assigned to the slot. The attribute is `vio-slot`, not `slot` — that one
|
|
26
|
+
* is HTML's own (shadow DOM slotting).
|
|
27
|
+
*/
|
|
28
|
+
vioSlot: string;
|
|
29
|
+
/** Human name of the slot for the dashboard (`vio-slot-name`). Optional. */
|
|
30
|
+
vioSlotName: string;
|
|
31
|
+
/**
|
|
32
|
+
* Scope of the auto id (`article-123-card-1`). Inherited: this attribute,
|
|
33
|
+
* else the nearest ancestor's `data-vio-scope` (a page sets it ONCE on
|
|
34
|
+
* `<body>` and every block gets a per-page slot). Optional.
|
|
35
|
+
*/
|
|
36
|
+
vioScope: string;
|
|
37
|
+
/** Human label of the scope (` · Title` in the slot name); inherited from `data-vio-scope-name`. */
|
|
38
|
+
vioScopeName: string;
|
|
39
|
+
/** Per-element override of the content (article) id the events carry; see `Vio.content()`. */
|
|
40
|
+
vioContentId: string;
|
|
41
|
+
/** Per-element override of the content title. */
|
|
42
|
+
vioContentTitle: string;
|
|
43
|
+
private readonly slotRegistration;
|
|
44
|
+
/** The slot id in effect: `vio-slot`, else the auto id (`card-N`). Read-only. */
|
|
45
|
+
get effectiveSlot(): string;
|
|
46
|
+
/** The slot campaign's sponsor as the string the attributes use ('' when unknown). */
|
|
47
|
+
private sponsorFromAttribution;
|
|
48
|
+
private slotAttributes;
|
|
49
|
+
/**
|
|
50
|
+
* What every event carries for attribution (`Vio.attribution`): the place,
|
|
51
|
+
* its campaign and sponsor, and the content — overridden here when the host
|
|
52
|
+
* set `vio-content-id` / `vio-content-title` on this card.
|
|
53
|
+
*/
|
|
54
|
+
private attribution;
|
|
20
55
|
/** Whether the product has selectable variants — the quick-add button then
|
|
21
56
|
* opens the detail to pick one instead of adding directly. */
|
|
22
57
|
hasVariants: boolean;
|
|
@@ -84,6 +119,36 @@ declare class VioProductCarousel extends LitElement {
|
|
|
84
119
|
productRefs: string;
|
|
85
120
|
/** Currency for product prices. */
|
|
86
121
|
currency: string;
|
|
122
|
+
/**
|
|
123
|
+
* Slot this carousel sits in (ADR-0027). Optional: without it the carousel
|
|
124
|
+
* registers itself as `carousel-N` (its position among the carousels on the
|
|
125
|
+
* page). Set it to name the place yourself or to share one slot between
|
|
126
|
+
* elements. Passed to every card it renders, carried by its analytics, and
|
|
127
|
+
* — without a `sponsor-id` — the source of the sponsor (the primary of the
|
|
128
|
+
* campaign assigned to the slot). The attribute is `vio-slot`, not `slot`
|
|
129
|
+
* (that one is HTML's own, shadow DOM slotting).
|
|
130
|
+
*/
|
|
131
|
+
vioSlot: string;
|
|
132
|
+
/** Human name of the slot for the dashboard (`vio-slot-name`). Optional. */
|
|
133
|
+
vioSlotName: string;
|
|
134
|
+
/**
|
|
135
|
+
* Scope of the auto id (`article-123-carousel-1`). Inherited: this attribute,
|
|
136
|
+
* else the nearest ancestor's `data-vio-scope` (a page sets it ONCE on
|
|
137
|
+
* `<body>` and every block gets a per-page slot). Optional.
|
|
138
|
+
*/
|
|
139
|
+
vioScope: string;
|
|
140
|
+
/** Human label of the scope (` · Title` in the slot name); inherited from `data-vio-scope-name`. */
|
|
141
|
+
vioScopeName: string;
|
|
142
|
+
/** Per-element override of the content (article) id the events carry; see `Vio.content()`. */
|
|
143
|
+
vioContentId: string;
|
|
144
|
+
/** Per-element override of the content title. */
|
|
145
|
+
vioContentTitle: string;
|
|
146
|
+
private readonly slotRegistration;
|
|
147
|
+
/** The slot id in effect: `vio-slot`, else the auto id (`carousel-N`). Read-only. */
|
|
148
|
+
get effectiveSlot(): string;
|
|
149
|
+
private slotAttributes;
|
|
150
|
+
/** Attribution every analytics event of this carousel carries (`Vio.attribution` + the content overrides). */
|
|
151
|
+
private attribution;
|
|
87
152
|
private scroller;
|
|
88
153
|
private fetched;
|
|
89
154
|
private isLoading;
|
|
@@ -92,6 +157,12 @@ declare class VioProductCarousel extends LitElement {
|
|
|
92
157
|
connectedCallback(): void;
|
|
93
158
|
disconnectedCallback(): void;
|
|
94
159
|
updated(changed: Map<string, unknown>): void;
|
|
160
|
+
/**
|
|
161
|
+
* The sponsor of this carousel: the host's `sponsor-id`, else the primary
|
|
162
|
+
* sponsor of the campaign the slot shows (ADR-0034 — "the campaign of the
|
|
163
|
+
* block is its sponsor"), else 0 (unknown).
|
|
164
|
+
*/
|
|
165
|
+
private effectiveSponsorId;
|
|
95
166
|
private autoFetch;
|
|
96
167
|
private unobserveImpression;
|
|
97
168
|
private impressed;
|
|
@@ -118,6 +189,43 @@ declare class VioProductDetail extends LitElement {
|
|
|
118
189
|
/** Subscribe to `vio:product-click` on the document and auto-open. */
|
|
119
190
|
autoOpen: boolean;
|
|
120
191
|
currency: string;
|
|
192
|
+
/**
|
|
193
|
+
* Slot this detail belongs to (ADR-0027). Optional: without it the detail
|
|
194
|
+
* registers itself as `detail-N`. Carried by every event it emits. A
|
|
195
|
+
* `vio:product-click` that names a slot (every card does — its own or the
|
|
196
|
+
* carousel's) takes precedence while that product is open. The attribute is
|
|
197
|
+
* `vio-slot`, not `slot` (HTML's own).
|
|
198
|
+
*/
|
|
199
|
+
vioSlot: string;
|
|
200
|
+
/** Human name of the slot for the dashboard (`vio-slot-name`). Optional. */
|
|
201
|
+
vioSlotName: string;
|
|
202
|
+
/**
|
|
203
|
+
* Scope of the auto id (`article-123-detail-1`). Inherited: this attribute,
|
|
204
|
+
* else the nearest ancestor's `data-vio-scope` (a page sets it ONCE on
|
|
205
|
+
* `<body>` and every block gets a per-page slot). Optional.
|
|
206
|
+
*/
|
|
207
|
+
vioScope: string;
|
|
208
|
+
/** Human label of the scope (` · Title` in the slot name); inherited from `data-vio-scope-name`. */
|
|
209
|
+
vioScopeName: string;
|
|
210
|
+
/** Per-element override of the content (article) id the events carry; see `Vio.content()`. */
|
|
211
|
+
vioContentId: string;
|
|
212
|
+
/** Per-element override of the content title. */
|
|
213
|
+
vioContentTitle: string;
|
|
214
|
+
private readonly slotRegistration;
|
|
215
|
+
/** What the click that opened the detail carried ('' when nothing), and for which product. */
|
|
216
|
+
private eventSlot;
|
|
217
|
+
private eventContentId;
|
|
218
|
+
private eventContentTitle;
|
|
219
|
+
private eventProductId;
|
|
220
|
+
/** The card's context applies to the product it opened — not to one the host opened by hand later. */
|
|
221
|
+
private get fromCard();
|
|
222
|
+
/** The slot id in effect for this element: `vio-slot`, else the auto id (`detail-N`). Read-only. */
|
|
223
|
+
get effectiveSlot(): string;
|
|
224
|
+
/** The slot the open product is attributed to: the opening card's, else this element's. */
|
|
225
|
+
private get activeSlot();
|
|
226
|
+
private slotAttributes;
|
|
227
|
+
/** Attribution every event of the open product carries (`Vio.attribution` of the opening card's slot, else this element's). */
|
|
228
|
+
private attribution;
|
|
121
229
|
private product;
|
|
122
230
|
/**
|
|
123
231
|
* The header: the seller's Company name (Settings → Company), not the
|
package/dist/ui/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { V as VioCart, a as VioCheckout, b as VioProduct, c as VioProductCarousel, d as VioProductDetail, e as VioThemeOverrides, f as VioTokens, g as applyVioTheme } from '../tokens-
|
|
1
|
+
export { V as VioCart, a as VioCheckout, b as VioProduct, c as VioProductCarousel, d as VioProductDetail, e as VioThemeOverrides, f as VioTokens, g as applyVioTheme } from '../tokens-DDfZuHF6.js';
|
|
2
2
|
import 'lit-html';
|
|
3
3
|
import 'lit';
|
|
4
4
|
|
package/dist/ui/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { registerVioElements } from '../chunk-
|
|
2
|
-
export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements } from '../chunk-
|
|
3
|
-
import '../chunk-
|
|
1
|
+
import { registerVioElements } from '../chunk-UVDOKFGD.js';
|
|
2
|
+
export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements } from '../chunk-UVDOKFGD.js';
|
|
3
|
+
import '../chunk-BRJMT7P4.js';
|
|
4
4
|
|
|
5
5
|
// src/ui/index.ts
|
|
6
6
|
registerVioElements();
|