@brytdesigns/shopify-ajax-cart-components 3.3.3 → 3.4.0
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/main/components/cart-data-array-injection.js +4 -4
- package/dist/main/components/cart-data-array-injection.js.map +1 -1
- package/dist/main/components/cart-data-array.js +11 -6
- package/dist/main/components/cart-data-array.js.map +1 -1
- package/dist/main/components/cart-data-conditions.js +2 -1
- package/dist/main/components/cart-data-conditions.js.map +1 -1
- package/dist/main/components/cart-data-listener-status.js +2 -1
- package/dist/main/components/cart-data-listener-status.js.map +1 -1
- package/dist/main/components/cart-loading-state.js +2 -2
- package/dist/main/components/cart-loading-state.js.map +1 -1
- package/dist/main/components/cart-view-event.js +2 -2
- package/dist/main/components/cart-view-event.js.map +1 -1
- package/dist/main/hooks/useAjaxCart.js +3 -2
- package/dist/main/hooks/useAjaxCart.js.map +1 -1
- package/dist/main/hooks/useListenerStatus.js +3 -3
- package/dist/main/hooks/useListenerStatus.js.map +1 -1
- package/package.json +4 -4
- package/dist/esm/index.js +0 -883
- package/dist/esm/index.js.map +0 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { getTargetElement } from "../utils/getTargetElement.js";
|
|
2
2
|
import { getTemplateContent } from "../utils/getTemplateContent.js";
|
|
3
3
|
import { provideCartPathContext, useCartPath, useCartValue } from "../hooks/index.js";
|
|
4
|
-
import { createGuardedEffect } from "@brytdesigns/web-component-core/utils";
|
|
4
|
+
import { adoptOwner, createGuardedEffect } from "@brytdesigns/web-component-core/utils";
|
|
5
5
|
import { createMemo, mapArray, untrack } from "solid-js";
|
|
6
|
-
import { effect, getOwner, insert, setAttribute, template } from "@solidjs/web";
|
|
6
|
+
import { effect, getOwner as getOwner$1, insert, setAttribute, template } from "@solidjs/web";
|
|
7
7
|
//#region src/components/cart-data-array-injection.tsx
|
|
8
8
|
var _tmpl$ = /* @__PURE__ */ template(`<cart-data-array-item>`, 1);
|
|
9
9
|
var Name = "cart-data-array-injection";
|
|
@@ -44,7 +44,7 @@ var Component = (props, { element }) => {
|
|
|
44
44
|
if (!firstElement) return null;
|
|
45
45
|
const children = Array.from(firstElement.children);
|
|
46
46
|
var _el$ = _tmpl$();
|
|
47
|
-
_el$._$owner = getOwner();
|
|
47
|
+
_el$._$owner = getOwner$1();
|
|
48
48
|
insert(_el$, () => {
|
|
49
49
|
return Array.from(children);
|
|
50
50
|
});
|
|
@@ -53,7 +53,7 @@ var Component = (props, { element }) => {
|
|
|
53
53
|
});
|
|
54
54
|
const wrapper = _el$;
|
|
55
55
|
firstElement.replaceChildren(Array.isArray(wrapper) ? wrapper.at(0) : wrapper);
|
|
56
|
-
return firstElement;
|
|
56
|
+
return adoptOwner(firstElement);
|
|
57
57
|
}
|
|
58
58
|
}));
|
|
59
59
|
createGuardedEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cart-data-array-injection.js","names":["<cart-data-array-item item-index={`${idx()}`}>\n\t\t\t\t\t\t{Array.from(children)}\n\t\t\t\t\t</cart-data-array-item>"],"sources":["../../../src/components/cart-data-array-injection.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"cart-data-array-injection.js","names":["<cart-data-array-item item-index={`${idx()}`}>\n\t\t\t\t\t\t{Array.from(children)}\n\t\t\t\t\t</cart-data-array-item>"],"sources":["../../../src/components/cart-data-array-injection.tsx"],"sourcesContent":["import {\n\tadoptOwner,\n\ttype CorrectComponentType,\n\tcreateGuardedEffect,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { createMemo, mapArray, untrack } from \"solid-js\";\n\nimport {\n\ttype CartPath,\n\tprovideCartPathContext,\n\tuseCartPath,\n\tuseCartValue,\n} from \"../hooks/index.js\";\nimport {\n\ttype Format,\n\tgetTargetElement,\n\tgetTemplateContent,\n} from \"../utils/index.js\";\n\nexport type Props = {\n\tarrayPath: CartPath;\n\twrapInnerChild: boolean;\n\ttarget: string;\n\tformat?: Format;\n\treverse?: boolean;\n};\n\nexport const Name = \"cart-data-array-injection\";\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst itemTemplate = getTemplateContent(element, \"item\");\n\tif (!itemTemplate)\n\t\treturn console.warn(\n\t\t\t`${Name}: No template found with a property of 'item'.`,\n\t\t);\n\tif (untrack(() => !props.arrayPath))\n\t\treturn console.warn(`${Name}: No array path provided.`);\n\tconst mergedProps = {\n\t\telement,\n\t\tpath: () => props.arrayPath,\n\t};\n\tconst fullPath = useCartPath(mergedProps);\n\tprovideCartPathContext({\n\t\telement,\n\t\tpath: fullPath,\n\t});\n\n\tconst value = useCartValue({\n\t\tpath: fullPath,\n\t\telement,\n\t});\n\n\tconst arrayValue = createMemo(() => {\n\t\tconst v = value();\n\n\t\tif (!v) {\n\t\t\tconsole.warn(`${Name}: value is null or undefined at path ${fullPath()}`);\n\t\t\treturn null;\n\t\t}\n\n\t\tif (!Array.isArray(v)) {\n\t\t\tconsole.warn(`${Name}: value is not an array at path ${fullPath()}`);\n\t\t\treturn null;\n\t\t}\n\n\t\tif (props.reverse) {\n\t\t\treturn v.toReversed();\n\t\t}\n\n\t\treturn v;\n\t});\n\n\tconst children = createMemo(\n\t\tmapArray(arrayValue, (_, idx) => {\n\t\t\tconst fragment = itemTemplate.cloneNode(true);\n\t\t\tconst container = fragment instanceof DocumentFragment ? fragment : null;\n\t\t\tif (props.wrapInnerChild && container) {\n\t\t\t\tconst firstElement = container.firstElementChild;\n\t\t\t\tif (!firstElement) return null;\n\t\t\t\tconst children = Array.from(firstElement.children);\n\n\t\t\t\tconst wrapper = (\n\t\t\t\t\t<cart-data-array-item item-index={`${idx()}`}>\n\t\t\t\t\t\t{Array.from(children)}\n\t\t\t\t\t</cart-data-array-item>\n\t\t\t\t);\n\t\t\t\tfirstElement.replaceChildren(\n\t\t\t\t\t(Array.isArray(wrapper) ? wrapper.at(0) : wrapper) as Node,\n\t\t\t\t);\n\n\t\t\t\t// Inserted by the effect below, so stamped with this row's owner\n\t\t\t\t// for the `cart-data-array-item` and anything else inside it.\n\t\t\t\treturn adoptOwner(firstElement);\n\t\t\t}\n\t\t}),\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => {\n\t\t\tconst rootElement = element;\n\t\t\treturn {\n\t\t\t\ttarget: getTargetElement(rootElement, props.target),\n\t\t\t\tchildren: children(),\n\t\t\t};\n\t\t},\n\t\t({ children, target }) => {\n\t\t\tif (!target) return;\n\t\t\tconst filteredChildren = children.filter(\n\t\t\t\t(v) => v !== null && v !== undefined,\n\t\t\t);\n\t\t\ttarget.replaceChildren(...filteredChildren);\n\t\t},\n\t);\n};\n"],"mappings":";;;;;;;;AA2BA,IAAa,OAAO;AAEpB,IAAa,aAA0C,OAAO,EAAE,cAAc;CAC7E,MAAM,eAAe,mBAAmB,SAAS,MAAM;CACvD,IAAI,CAAC,cACJ,OAAO,QAAQ,KACd,GAAG,KAAK,+CACT;CACD,IAAI,cAAc,CAAC,MAAM,SAAS,GACjC,OAAO,QAAQ,KAAK,GAAG,KAAK,0BAA0B;CAKvD,MAAM,WAAW,YAAY;EAH5B;EACA,YAAY,MAAM;CAEU,CAAW;CACxC,uBAAuB;EACtB;EACA,MAAM;CACP,CAAC;CAED,MAAM,QAAQ,aAAa;EAC1B,MAAM;EACN;CACD,CAAC;CAED,MAAM,aAAa,iBAAiB;EACnC,MAAM,IAAI,MAAM;EAEhB,IAAI,CAAC,GAAG;GACP,QAAQ,KAAK,GAAG,KAAK,uCAAuC,SAAS,GAAG;GACxE,OAAO;EACR;EAEA,IAAI,CAAC,MAAM,QAAQ,CAAC,GAAG;GACtB,QAAQ,KAAK,GAAG,KAAK,kCAAkC,SAAS,GAAG;GACnE,OAAO;EACR;EAEA,IAAI,MAAM,SACT,OAAO,EAAE,WAAW;EAGrB,OAAO;CACR,CAAC;CAED,MAAM,WAAW,WAChB,SAAS,aAAa,GAAG,QAAQ;EAChC,MAAM,WAAW,aAAa,UAAU,IAAI;EAC5C,MAAM,YAAY,oBAAoB,mBAAmB,WAAW;EACpE,IAAI,MAAM,kBAAkB,WAAW;GACtC,MAAM,eAAe,UAAU;GAC/B,IAAI,CAAC,cAAc,OAAO;GAC1B,MAAM,WAAW,MAAM,KAAK,aAAa,QAAQ;GAGhD,IAAA,OAAA,OAEsB;GAFtB,KAAA,UAAA,WAEsB;GAFtB,OAAA,YACC;IAAC,OAAA,MAAM,KAAK,QAAQ;GAAC,CACA;GAFA,aAAY,GAAG,IAAI,MAAnB,QAAA;IAAsB,aAAA,MAAA,cAAA,GAAA;;GAD7C,MAAM,UACLA;GAID,aAAa,gBACX,MAAM,QAAQ,OAAO,IAAI,QAAQ,GAAG,CAAC,IAAI,OAC3C;GAIA,OAAO,WAAW,YAAY;EAC/B;CACD,CAAC,CACF;CAEA,0BACO;EAEL,OAAO;GACN,QAAQ,iBAAiB,SAAa,MAAM,MAAM;GAClD,UAAU,SAAS;EACpB;CACD,IACC,EAAE,UAAU,aAAa;EACzB,IAAI,CAAC,QAAQ;EACb,MAAM,mBAAmB,SAAS,QAChC,MAAM,MAAM,QAAQ,MAAM,KAAA,CAC5B;EACA,OAAO,gBAAgB,GAAG,gBAAgB;CAC3C,CACD;AACD"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { getTemplateContent } from "../utils/getTemplateContent.js";
|
|
2
2
|
import { provideCartPathContext, useCartPath, useCartValue } from "../hooks/index.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { adoptOwner, cloneTemplate } from "@brytdesigns/web-component-core/utils";
|
|
4
|
+
import { createMemo, getOwner, untrack } from "solid-js";
|
|
5
|
+
import { For, Show, className, createComponent, effect, getOwner as getOwner$1, insert, readShallow, ref, setAttribute, template } from "@solidjs/web";
|
|
5
6
|
//#region src/components/cart-data-array.tsx
|
|
6
7
|
var _tmpl$ = /* @__PURE__ */ template(`<cart-data-array-item>`, 1);
|
|
7
8
|
var Name = "cart-data-array";
|
|
@@ -45,18 +46,22 @@ var Component = (props, { element }) => {
|
|
|
45
46
|
return arrayValue() ?? [];
|
|
46
47
|
},
|
|
47
48
|
keyed: false,
|
|
48
|
-
children: (_, idx) =>
|
|
49
|
+
children: (_, idx) => {
|
|
50
|
+
const owner = getOwner();
|
|
49
51
|
var _el$ = _tmpl$();
|
|
50
52
|
setAttribute(_el$, "item-index", `${idx}`);
|
|
51
|
-
|
|
53
|
+
ref(() => {
|
|
54
|
+
return (el) => adoptOwner(el, owner);
|
|
55
|
+
}, _el$);
|
|
56
|
+
_el$._$owner = getOwner$1();
|
|
52
57
|
insert(_el$, () => {
|
|
53
|
-
return
|
|
58
|
+
return cloneTemplate(itemTemplate);
|
|
54
59
|
});
|
|
55
60
|
effect(() => readShallow(props.itemClass), (_v$, _$p) => {
|
|
56
61
|
className(_el$, _v$, _$p);
|
|
57
62
|
});
|
|
58
63
|
return _el$;
|
|
59
|
-
}
|
|
64
|
+
}
|
|
60
65
|
});
|
|
61
66
|
}
|
|
62
67
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cart-data-array.js","names":["<Show when={(arrayValue()?.length ?? 0) > 0}>\n\t\t\t{/* keyed={false}: the index is what identifies a row here. */}\n\t\t\t<For each={arrayValue() ?? []} keyed={false}>\n\t\t\t\t{(_, idx) => (\n\t\t\t\t\t<cart-data-array-item
|
|
1
|
+
{"version":3,"file":"cart-data-array.js","names":["<Show when={(arrayValue()?.length ?? 0) > 0}>\n\t\t\t{/* keyed={false}: the index is what identifies a row here. */}\n\t\t\t<For each={arrayValue() ?? []} keyed={false}>\n\t\t\t\t{(_, idx) => {\n\t\t\t\t\t// The row element is a custom element too, created here rather\n\t\t\t\t\t// than cloned, so it needs the row's owner stamped explicitly.\n\t\t\t\t\tconst owner = getOwner();\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<cart-data-array-item\n\t\t\t\t\t\t\tref={(el: HTMLElement) => adoptOwner(el, owner)}\n\t\t\t\t\t\t\titem-index={`${idx}`}\n\t\t\t\t\t\t\tclass={props.itemClass}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{cloneTemplate(itemTemplate)}\n\t\t\t\t\t\t</cart-data-array-item>\n\t\t\t\t\t);\n\t\t\t\t}}\n\t\t\t</For>\n\t\t</Show>","<For each={arrayValue() ?? []} keyed={false}>\n\t\t\t\t{(_, idx) => {\n\t\t\t\t\t// The row element is a custom element too, created here rather\n\t\t\t\t\t// than cloned, so it needs the row's owner stamped explicitly.\n\t\t\t\t\tconst owner = getOwner();\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<cart-data-array-item\n\t\t\t\t\t\t\tref={(el: HTMLElement) => adoptOwner(el, owner)}\n\t\t\t\t\t\t\titem-index={`${idx}`}\n\t\t\t\t\t\t\tclass={props.itemClass}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{cloneTemplate(itemTemplate)}\n\t\t\t\t\t\t</cart-data-array-item>\n\t\t\t\t\t);\n\t\t\t\t}}\n\t\t\t</For>","keyed={false}","ref={(el: HTMLElement) => adoptOwner(el, owner)}","<cart-data-array-item\n\t\t\t\t\t\t\tref={(el: HTMLElement) => adoptOwner(el, owner)}\n\t\t\t\t\t\t\titem-index={`${idx}`}\n\t\t\t\t\t\t\tclass={props.itemClass}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{cloneTemplate(itemTemplate)}\n\t\t\t\t\t\t</cart-data-array-item>"],"sources":["../../../src/components/cart-data-array.tsx"],"sourcesContent":["import {\n\tadoptOwner,\n\ttype CorrectComponentType,\n\tcloneTemplate,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { For, Show } from \"@solidjs/web\";\nimport { type Accessor, createMemo, getOwner, untrack } from \"solid-js\";\n\nimport {\n\ttype CartPath,\n\tprovideCartPathContext,\n\tuseCartPath,\n\tuseCartValue,\n} from \"../hooks/index.js\";\nimport { type Format, getTemplateContent } from \"../utils/index.js\";\n\nexport type Props = {\n\tarrayPath: CartPath;\n\tformat?: Format;\n\treverse?: boolean;\n\titemClass?: string;\n};\n\nexport const Name = \"cart-data-array\";\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst itemTemplate = getTemplateContent(element, \"item\");\n\tif (!itemTemplate)\n\t\treturn console.warn(\n\t\t\t`${Name}: No template found with a property of 'item'.`,\n\t\t);\n\tif (untrack(() => !props.arrayPath))\n\t\treturn console.warn(`${Name}: No array path provided.`);\n\tconst mergedProps = {\n\t\telement,\n\t\tpath: () => props.arrayPath,\n\t};\n\tconst fullPath = useCartPath(mergedProps);\n\tprovideCartPathContext({\n\t\telement,\n\t\tpath: fullPath,\n\t});\n\n\tconst value = useCartValue({\n\t\telement,\n\t\tpath: fullPath,\n\t});\n\n\tconst arrayValue = createMemo(() => {\n\t\tconst v = value();\n\n\t\tif (!v) {\n\t\t\tconsole.warn(`${Name}: value is null or undefined at path ${fullPath()}`);\n\t\t\treturn null;\n\t\t}\n\n\t\tif (!Array.isArray(v)) {\n\t\t\tconsole.warn(`${Name}: value is not an array at path ${fullPath()}`);\n\t\t\treturn null;\n\t\t}\n\n\t\tif (props.reverse) {\n\t\t\treturn v.toReversed();\n\t\t}\n\n\t\treturn v;\n\t});\n\n\telement.replaceChildren(...[]);\n\n\treturn (\n\t\t<Show when={(arrayValue()?.length ?? 0) > 0}>\n\t\t\t{/* keyed={false}: the index is what identifies a row here. */}\n\t\t\t<For each={arrayValue() ?? []} keyed={false}>\n\t\t\t\t{(_, idx) => {\n\t\t\t\t\t// The row element is a custom element too, created here rather\n\t\t\t\t\t// than cloned, so it needs the row's owner stamped explicitly.\n\t\t\t\t\tconst owner = getOwner();\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<cart-data-array-item\n\t\t\t\t\t\t\tref={(el: HTMLElement) => adoptOwner(el, owner)}\n\t\t\t\t\t\t\titem-index={`${idx}`}\n\t\t\t\t\t\t\tclass={props.itemClass}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{cloneTemplate(itemTemplate)}\n\t\t\t\t\t\t</cart-data-array-item>\n\t\t\t\t\t);\n\t\t\t\t}}\n\t\t\t</For>\n\t\t</Show>\n\t);\n};\n"],"mappings":";;;;;;;AAuBA,IAAa,OAAO;AAEpB,IAAa,aAA0C,OAAO,EAAE,cAAc;CAC7E,MAAM,eAAe,mBAAmB,SAAS,MAAM;CACvD,IAAI,CAAC,cACJ,OAAO,QAAQ,KACd,GAAG,KAAK,+CACT;CACD,IAAI,cAAc,CAAC,MAAM,SAAS,GACjC,OAAO,QAAQ,KAAK,GAAG,KAAK,0BAA0B;CAKvD,MAAM,WAAW,YAAY;EAH5B;EACA,YAAY,MAAM;CAEU,CAAW;CACxC,uBAAuB;EACtB;EACA,MAAM;CACP,CAAC;CAED,MAAM,QAAQ,aAAa;EAC1B;EACA,MAAM;CACP,CAAC;CAED,MAAM,aAAa,iBAAiB;EACnC,MAAM,IAAI,MAAM;EAEhB,IAAI,CAAC,GAAG;GACP,QAAQ,KAAK,GAAG,KAAK,uCAAuC,SAAS,GAAG;GACxE,OAAO;EACR;EAEA,IAAI,CAAC,MAAM,QAAQ,CAAC,GAAG;GACtB,QAAQ,KAAK,GAAG,KAAK,kCAAkC,SAAS,GAAG;GACnE,OAAO;EACR;EAEA,IAAI,MAAM,SACT,OAAO,EAAE,WAAW;EAGrB,OAAO;CACR,CAAC;CAED,QAAQ,gBAAgB,GAAG,CAAC,CAAC;CAE7B,OACCA,gBAAAA,MAAAA;EAAM,IAAA,OAAA;GAAO,QAAA,WAAW,CAAC,EAAE,UAAU,KAAK;EAAC;EAA3C,IAAA,WAAA;GAECC,OAAAA,gBAAAA,KAAAA;IAAK,IAAA,OAAA;KAAM,OAAA,WAAW,KAAK,CAAC;IAAC;IAAEC,OAAO;IAAtCD,WACG,GAAG,QAAQ;KAGZ,MAAM,QAAQ,SAAS;KAEtB,IAAA,OAAA,OAMsB;KAJrB,aAAA,MAAA,cAAY,GAAG,KAAK;KADpB,UAAA;MAAM,QAAA,OAAoB,WAAW,IAAI,KAAK;KAAC,GAA/CE,IAA+C;KADhD,KAAA,UAAA,WAMsB;KANtB,OAAA,YAKC;MAAC,OAAA,cAAc,YAAY;KAAC,CACP;KAHrB,aAAA,YAAO,MAAM,SAAS,IAAtB,KAAA,QAAA;MAAsB,UAAA,MAAA,KAAA,GAAA;;KAJxB,OACCC;IAQF;GACI,CAAA;EACA;;AAER"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { formatValue } from "../utils/formatValue.js";
|
|
2
2
|
import { getValueFromPath } from "../utils/getValueFromPath.js";
|
|
3
3
|
import { useCartPath, useCartValue } from "../hooks/index.js";
|
|
4
|
+
import { cloneTemplate } from "@brytdesigns/web-component-core/utils";
|
|
4
5
|
import { createMemo } from "solid-js";
|
|
5
6
|
import { For, Show, createComponent } from "@solidjs/web";
|
|
6
7
|
//#region src/components/cart-data-conditions.tsx
|
|
@@ -59,7 +60,7 @@ var Component = (_, { element }) => {
|
|
|
59
60
|
return validateConditions(allConditions()[idx], data());
|
|
60
61
|
},
|
|
61
62
|
get children() {
|
|
62
|
-
return
|
|
63
|
+
return cloneTemplate(tmpl());
|
|
63
64
|
}
|
|
64
65
|
})
|
|
65
66
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cart-data-conditions.js","names":["<For each={conditionTemplates} keyed={false}>\n\t\t\t{(tmpl, idx) => (\n\t\t\t\t<Show when={validateConditions(allConditions()[idx], data())}>\n\t\t\t\t\t{
|
|
1
|
+
{"version":3,"file":"cart-data-conditions.js","names":["<For each={conditionTemplates} keyed={false}>\n\t\t\t{(tmpl, idx) => (\n\t\t\t\t<Show when={validateConditions(allConditions()[idx], data())}>\n\t\t\t\t\t{cloneTemplate(tmpl() as HTMLTemplateElement)}\n\t\t\t\t</Show>\n\t\t\t)}\n\t\t</For>","each={conditionTemplates}","keyed={false}","<Show when={validateConditions(allConditions()[idx], data())}>\n\t\t\t\t\t{cloneTemplate(tmpl() as HTMLTemplateElement)}\n\t\t\t\t</Show>"],"sources":["../../../src/components/cart-data-conditions.tsx"],"sourcesContent":["import {\n\ttype CorrectComponentType,\n\tcloneTemplate,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { For, Show } from \"@solidjs/web\";\n\nimport { type Accessor, createMemo } from \"solid-js\";\n\nimport { useCartPath, useCartValue } from \"../hooks/index.js\";\nimport { type Format, formatValue, getValueFromPath } from \"../utils/index.js\";\n\nexport type Props = {};\n\ntype ConditionValue = {\n\ttype: \"primitive\" | \"property\";\n\tname?: string;\n\tvalue?: string | number | boolean | null;\n\tproperty_name?: string;\n};\n\ntype Condition = {\n\ttype:\n\t\t| \"typeof\"\n\t\t| \"includes\"\n\t\t| \"includes_property\"\n\t\t| \"equals\"\n\t\t| \"not_equals\"\n\t\t| \"starts_with\"\n\t\t| \"lt\"\n\t\t| \"lte\"\n\t\t| \"gt\"\n\t\t| \"gte\";\n\tformat?: Format;\n\tinvert?: boolean;\n\tvalueA: ConditionValue;\n\tvalueB: ConditionValue;\n};\n\nfunction getValue<T>(data: T, value: ConditionValue): any {\n\tif (typeof value === \"undefined\" || !data) return undefined;\n\n\tif (value.type === \"primitive\") {\n\t\treturn value.value;\n\t}\n\n\tif (value.type === \"property\" && value.name) {\n\t\t//@ts-expect-error\n\t\treturn getValueFromPath<T>(data, value.name);\n\t}\n\n\treturn null;\n}\n\nfunction invertResult(result: boolean, invert = false) {\n\tif (invert) return !result;\n\treturn result;\n}\n\nfunction validateConditions<T>(conditions: Condition[], data: T) {\n\tif (!data) return false;\n\tconst result = conditions.every((condition) => {\n\t\tlet valueA = getValue(data, condition.valueA),\n\t\t\tvalueB = getValue(data, condition.valueB),\n\t\t\tresult = false;\n\n\t\tif (typeof valueA === \"undefined\" && typeof valueB === \"undefined\")\n\t\t\treturn false;\n\n\t\tif (condition.type === \"typeof\") {\n\t\t\tresult = typeof valueA === valueB;\n\t\t}\n\n\t\tif (condition.type === \"includes\") {\n\t\t\tresult = formatValue(condition.format || \"\", valueA).includes(\n\t\t\t\tformatValue(condition.format || \"\", valueB),\n\t\t\t);\n\t\t}\n\n\t\tif (condition.type === \"includes_property\") {\n\t\t\tresult = valueA.some(\n\t\t\t\t(v: any) => v[condition.valueA?.property_name || \"\"] === valueB,\n\t\t\t);\n\t\t}\n\n\t\tif (condition.type === \"starts_with\") {\n\t\t\tresult = formatValue(\"string\", valueA).startsWith(\n\t\t\t\tformatValue(condition.format || \"\", valueB),\n\t\t\t);\n\t\t}\n\n\t\tif (condition.type === \"equals\") {\n\t\t\tresult =\n\t\t\t\tformatValue(condition.format || \"\", valueA) ===\n\t\t\t\tformatValue(condition.format || \"\", valueB);\n\t\t}\n\n\t\tif (condition.type === \"not_equals\") {\n\t\t\tresult =\n\t\t\t\tformatValue(condition.format || \"\", valueA) !==\n\t\t\t\tformatValue(condition.format || \"\", valueB);\n\t\t}\n\n\t\tif (condition.type === \"lt\") {\n\t\t\tresult =\n\t\t\t\tformatValue(condition.format || \"\", valueA) <\n\t\t\t\tformatValue(condition.format || \"\", valueB);\n\t\t}\n\n\t\tif (condition.type === \"lte\") {\n\t\t\tresult =\n\t\t\t\tformatValue(condition.format || \"\", valueA) <=\n\t\t\t\tformatValue(condition.format || \"\", valueB);\n\t\t}\n\n\t\tif (condition.type === \"gt\") {\n\t\t\tresult =\n\t\t\t\tformatValue(condition.format || \"\", valueA) >\n\t\t\t\tformatValue(condition.format || \"\", valueB);\n\t\t}\n\n\t\tif (condition.type === \"gte\") {\n\t\t\tresult =\n\t\t\t\tformatValue(condition.format || \"\", valueA) >=\n\t\t\t\tformatValue(condition.format || \"\", valueB);\n\t\t}\n\n\t\treturn invertResult(result, condition.invert);\n\t});\n\n\treturn result;\n}\n\nexport const Name = \"cart-data-conditions\";\n\nexport const Component: CorrectComponentType<Props> = (_, { element }) => {\n\tconst conditionTemplates = Array.from(element.children).filter(\n\t\t(child) => child.tagName === \"TEMPLATE\" && child.hasAttribute(\"conditions\"),\n\t);\n\tif (!conditionTemplates.length)\n\t\treturn console.error(\n\t\t\t`${Name}: no templates found with any conditions attribute!`,\n\t\t);\n\n\tconst allConditions = createMemo(() =>\n\t\tconditionTemplates.map((tmpl) => {\n\t\t\tconst conditions = tmpl.getAttribute(\"conditions\");\n\t\t\tif (!conditions)\n\t\t\t\tconsole.warn(`${Name}: conditions attribute is required!`);\n\n\t\t\ttry {\n\t\t\t\treturn JSON.parse(conditions!);\n\t\t\t} catch (e) {\n\t\t\t\treturn [];\n\t\t\t}\n\t\t}),\n\t);\n\n\tconst fullPath = useCartPath({ element });\n\tconst data = useCartValue({\n\t\tpath: fullPath,\n\t\telement,\n\t});\n\n\telement.replaceChildren(...[]);\n\n\treturn (\n\t\t// keyed={false} gives a stable numeric index, which is what pairs a\n\t\t// template with its condition set.\n\t\t<For each={conditionTemplates} keyed={false}>\n\t\t\t{(tmpl, idx) => (\n\t\t\t\t<Show when={validateConditions(allConditions()[idx], data())}>\n\t\t\t\t\t{cloneTemplate(tmpl() as HTMLTemplateElement)}\n\t\t\t\t</Show>\n\t\t\t)}\n\t\t</For>\n\t);\n};\n"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { getTemplateContent } from "../utils/getTemplateContent.js";
|
|
2
2
|
import { useListenerStatus } from "../hooks/useListenerStatus.js";
|
|
3
3
|
import "../hooks/index.js";
|
|
4
|
+
import { cloneTemplate } from "@brytdesigns/web-component-core/utils";
|
|
4
5
|
import { createMemo } from "solid-js";
|
|
5
6
|
//#region src/components/cart-data-listener-status.ts
|
|
6
7
|
var Name = "cart-data-listener-status";
|
|
@@ -26,7 +27,7 @@ var Component = (_, { element }) => {
|
|
|
26
27
|
if (!state) return null;
|
|
27
28
|
const template = templates[state];
|
|
28
29
|
if (!template) return null;
|
|
29
|
-
return
|
|
30
|
+
return cloneTemplate(template);
|
|
30
31
|
});
|
|
31
32
|
};
|
|
32
33
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cart-data-listener-status.js","names":[],"sources":["../../../src/components/cart-data-listener-status.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"cart-data-listener-status.js","names":[],"sources":["../../../src/components/cart-data-listener-status.ts"],"sourcesContent":["import {\n\ttype CorrectComponentType,\n\tcloneTemplate,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport { createMemo } from \"solid-js\";\n\nimport { type Status, useListenerStatus } from \"../hooks/index.js\";\nimport { getTemplateContent } from \"../utils/index.js\";\n\nexport const Name = \"cart-data-listener-status\";\n\nexport const Component: CorrectComponentType<{}> = (_, { element }) => {\n\tconst [status] = useListenerStatus(element);\n\tif (!status) return console.error(`${Name}: no listener context provided!`);\n\n\tconst templates = {\n\t\tdefault: getTemplateContent(element, \"default\"),\n\t\tloading: getTemplateContent(element, \"loading\"),\n\t\tsuccess: getTemplateContent(element, \"success\"),\n\t\terror: getTemplateContent(element, \"error\"),\n\t};\n\n\tlet previousState: Status | null = null;\n\n\tconst currentStatus = () => {\n\t\tconst s = status() as Status;\n\t\tif (!templates[s]) return previousState;\n\t\tpreviousState = s;\n\t\treturn s;\n\t};\n\n\telement.replaceChildren(...[]);\n\n\treturn createMemo(() => {\n\t\tconst state = currentStatus();\n\t\tif (!state) return null;\n\t\tconst template = templates[state];\n\t\tif (!template) return null;\n\t\treturn cloneTemplate(template);\n\t});\n};\n"],"mappings":";;;;;;AAUA,IAAa,OAAO;AAEpB,IAAa,aAAuC,GAAG,EAAE,cAAc;CACtE,MAAM,CAAC,UAAU,kBAAkB,OAAO;CAC1C,IAAI,CAAC,QAAQ,OAAO,QAAQ,MAAM,GAAG,KAAK,gCAAgC;CAE1E,MAAM,YAAY;EACjB,SAAS,mBAAmB,SAAS,SAAS;EAC9C,SAAS,mBAAmB,SAAS,SAAS;EAC9C,SAAS,mBAAmB,SAAS,SAAS;EAC9C,OAAO,mBAAmB,SAAS,OAAO;CAC3C;CAEA,IAAI,gBAA+B;CAEnC,MAAM,sBAAsB;EAC3B,MAAM,IAAI,OAAO;EACjB,IAAI,CAAC,UAAU,IAAI,OAAO;EAC1B,gBAAgB;EAChB,OAAO;CACR;CAEA,QAAQ,gBAAgB,GAAG,CAAC,CAAC;CAE7B,OAAO,iBAAiB;EACvB,MAAM,QAAQ,cAAc;EAC5B,IAAI,CAAC,OAAO,OAAO;EACnB,MAAM,WAAW,UAAU;EAC3B,IAAI,CAAC,UAAU,OAAO;EACtB,OAAO,cAAc,QAAQ;CAC9B,CAAC;AACF"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getTemplateContent } from "../utils/getTemplateContent.js";
|
|
2
|
-
import { createGuardedEffect } from "@brytdesigns/web-component-core/utils";
|
|
2
|
+
import { cloneTemplate, createGuardedEffect } from "@brytdesigns/web-component-core/utils";
|
|
3
3
|
import { createMemo } from "solid-js";
|
|
4
4
|
import AjaxCart from "@brytdesigns/shopify-ajax-cart";
|
|
5
5
|
import { Show, createComponent } from "@solidjs/web";
|
|
@@ -43,7 +43,7 @@ var Component = (props, { element }) => {
|
|
|
43
43
|
if (!state) return null;
|
|
44
44
|
const template = templates[state];
|
|
45
45
|
if (!template) return null;
|
|
46
|
-
return
|
|
46
|
+
return cloneTemplate(template);
|
|
47
47
|
})();
|
|
48
48
|
}
|
|
49
49
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cart-loading-state.js","names":["<Show when={cart}>\n\t\t\t{(() => {\n\t\t\t\tconst state = cartState();\n\t\t\t\tif (!state) return null;\n\t\t\t\tconst template = templates[state];\n\t\t\t\tif (!template) return null;\n\t\t\t\treturn
|
|
1
|
+
{"version":3,"file":"cart-loading-state.js","names":["<Show when={cart}>\n\t\t\t{(() => {\n\t\t\t\tconst state = cartState();\n\t\t\t\tif (!state) return null;\n\t\t\t\tconst template = templates[state];\n\t\t\t\tif (!template) return null;\n\t\t\t\treturn cloneTemplate(template);\n\t\t\t})()}\n\t\t</Show>","when={cart}"],"sources":["../../../src/components/cart-loading-state.tsx"],"sourcesContent":["import AjaxCart from \"@brytdesigns/shopify-ajax-cart\";\nimport {\n\ttype CorrectComponentType,\n\tcloneTemplate,\n\tcreateGuardedEffect,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { Show } from \"@solidjs/web\";\nimport { createMemo } from \"solid-js\";\nimport { getTemplateContent } from \"../utils/index.js\";\n\ntype Status = (typeof AjaxCart)[\"status\"];\n\nexport type Props = {\n\tignoredStates: Array<Status>;\n};\n\nexport const Name = \"cart-loading-state\";\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst cart = AjaxCart;\n\n\tconst templates = {\n\t\tpending: getTemplateContent(element, \"pending\"),\n\t\terror: getTemplateContent(element, \"error\"),\n\t\tsuccess: getTemplateContent(element, \"success\"),\n\t};\n\n\t/**\n\t * A live region has to be in the DOM *before* its content changes for the\n\t * change to be announced, so the role is set at mount rather than when the\n\t * first status arrives. Without this the whole point is lost: the element\n\t * swaps template content on every cart mutation, entirely silently.\n\t */\n\telement.setAttribute(\"role\", \"status\");\n\telement.setAttribute(\"aria-live\", \"polite\");\n\telement.setAttribute(\"aria-atomic\", \"true\");\n\n\tlet previousState: Status | null = null;\n\n\tconst cartState = createMemo(() => {\n\t\tconst state = cart?.status;\n\t\tif (!templates[state] || props.ignoredStates.includes(state))\n\t\t\treturn previousState;\n\t\tpreviousState = state;\n\t\treturn state;\n\t});\n\n\t// Driven off the memo, so it fires once per state change rather than once\n\t// per re-render — the memo already collapses a repeated status to the same\n\t// value, which is what keeps a busy cart from announcing on every tick.\n\tcreateGuardedEffect(cartState, (state) => {\n\t\tif (!state) return;\n\n\t\t// An error interrupts; success waits its turn. `alert` is assertive by\n\t\t// definition, so a shopper is told the thing failed rather than finding\n\t\t// out when they reach it.\n\t\t//\n\t\t// There is deliberately no `aria-busy` here: AjaxCart.status is only\n\t\t// \"error\" | \"success\", so nothing exposes an in-flight mutation. The\n\t\t// \"pending\" template this component reads is unreachable for the same\n\t\t// reason — `templates[state]` can never resolve to it. Announcing a busy\n\t\t// state that nothing can clear would be worse than announcing none.\n\t\tconst isError = state === \"error\";\n\t\telement.setAttribute(\"role\", isError ? \"alert\" : \"status\");\n\t\telement.setAttribute(\"aria-live\", isError ? \"assertive\" : \"polite\");\n\t});\n\n\telement.replaceChildren(...[]);\n\n\treturn (\n\t\t<Show when={cart}>\n\t\t\t{(() => {\n\t\t\t\tconst state = cartState();\n\t\t\t\tif (!state) return null;\n\t\t\t\tconst template = templates[state];\n\t\t\t\tif (!template) return null;\n\t\t\t\treturn cloneTemplate(template);\n\t\t\t})()}\n\t\t</Show>\n\t);\n};\n"],"mappings":";;;;;;AAgBA,IAAa,OAAO;AAEpB,IAAa,aAA0C,OAAO,EAAE,cAAc;CAC7E,MAAM,OAAO;CAEb,MAAM,YAAY;EACjB,SAAS,mBAAmB,SAAS,SAAS;EAC9C,OAAO,mBAAmB,SAAS,OAAO;EAC1C,SAAS,mBAAmB,SAAS,SAAS;CAC/C;;;;;;;CAQA,QAAQ,aAAa,QAAQ,QAAQ;CACrC,QAAQ,aAAa,aAAa,QAAQ;CAC1C,QAAQ,aAAa,eAAe,MAAM;CAE1C,IAAI,gBAA+B;CAEnC,MAAM,YAAY,iBAAiB;EAClC,MAAM,QAAQ,MAAM;EACpB,IAAI,CAAC,UAAU,UAAU,MAAM,cAAc,SAAS,KAAK,GAC1D,OAAO;EACR,gBAAgB;EAChB,OAAO;CACR,CAAC;CAKD,oBAAoB,YAAY,UAAU;EACzC,IAAI,CAAC,OAAO;EAWZ,MAAM,UAAU,UAAU;EAC1B,QAAQ,aAAa,QAAQ,UAAU,UAAU,QAAQ;EACzD,QAAQ,aAAa,aAAa,UAAU,cAAc,QAAQ;CACnE,CAAC;CAED,QAAQ,gBAAgB,GAAG,CAAC,CAAC;CAE7B,OACCA,gBAAAA,MAAAA;EAAMC,MAAM;EAAZ,IAAA,WAAA;GACS,cAAA;IACP,MAAM,QAAQ,UAAU;IACxB,IAAI,CAAC,OAAO,OAAO;IACnB,MAAM,WAAW,UAAU;IAC3B,IAAI,CAAC,UAAU,OAAO;IACtB,OAAO,cAAc,QAAQ;GAC9B,EAAA,CAAG;EACE;;AAER"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useAjaxCart } from "../hooks/useAjaxCart.js";
|
|
2
2
|
import "../hooks/index.js";
|
|
3
3
|
import { createGuardedEffect } from "@brytdesigns/web-component-core/utils";
|
|
4
|
-
import { untrack } from "solid-js";
|
|
4
|
+
import { snapshot, untrack } from "solid-js";
|
|
5
5
|
import { Events } from "@brytdesigns/shopify-utils";
|
|
6
6
|
//#region src/components/cart-view-event.ts
|
|
7
7
|
var Name = "cart-view-event";
|
|
@@ -21,7 +21,7 @@ var Name = "cart-view-event";
|
|
|
21
21
|
var Component = (props, { element }) => {
|
|
22
22
|
const cart = useAjaxCart(element);
|
|
23
23
|
const send = (context) => {
|
|
24
|
-
const current = untrack(() => cart());
|
|
24
|
+
const current = untrack(() => snapshot(cart()));
|
|
25
25
|
Events.cartView(element, (library) => ({
|
|
26
26
|
context,
|
|
27
27
|
cart: current?.token ? Events.cartFromAjax(library, current) : null
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cart-view-event.js","names":[],"sources":["../../../src/components/cart-view-event.ts"],"sourcesContent":["import type { CartData } from \"@brytdesigns/shopify-ajax-cart\";\nimport { Events } from \"@brytdesigns/shopify-utils\";\nimport type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { createGuardedEffect } from \"@brytdesigns/web-component-core/utils\";\nimport { untrack } from \"solid-js\";\n\nimport { useAjaxCart } from \"../hooks/index.js\";\n\nexport type Props = {\n\t/**\n\t * `\"page\"` for the cart page: sent once, when the element connects.\n\t * `\"dialog\"` for a cart drawer: sent every time the drawer opens.\n\t */\n\tcontext: \"page\" | \"dialog\";\n};\n\nexport const Name = \"cart-view-event\";\n\n/**\n * Sends Shopify's `shopify:cart:view` when the shopper sees the cart.\n *\n * Place it inside `cart-context` on the cart page and in the cart drawer. The\n * cart it reports is the live one from the context, so it is never the stale\n * copy a Liquid-rendered payload would be after an Ajax change.\n *\n * In a drawer it watches the surrounding `cart-context` come into view rather\n * than listening to any particular dialog component: a closed drawer is not\n * rendered, so becoming visible is what opening it means, whichever dialog\n * does the opening. Reopened before its closing animation has finished, the\n * drawer never left the screen, and that counts as the same view.\n */\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst cart = useAjaxCart(element);\n\n\tconst send = (context: Props[\"context\"]) => {\n\t\t// A snapshot of the cart as the shopper sees it now — called from an\n\t\t// effect's apply phase and an observer callback, neither of which\n\t\t// should subscribe. The accessor is typed by an empty path
|
|
1
|
+
{"version":3,"file":"cart-view-event.js","names":[],"sources":["../../../src/components/cart-view-event.ts"],"sourcesContent":["import type { CartData } from \"@brytdesigns/shopify-ajax-cart\";\nimport { Events } from \"@brytdesigns/shopify-utils\";\nimport type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { createGuardedEffect } from \"@brytdesigns/web-component-core/utils\";\nimport { snapshot, untrack } from \"solid-js\";\n\nimport { useAjaxCart } from \"../hooks/index.js\";\n\nexport type Props = {\n\t/**\n\t * `\"page\"` for the cart page: sent once, when the element connects.\n\t * `\"dialog\"` for a cart drawer: sent every time the drawer opens.\n\t */\n\tcontext: \"page\" | \"dialog\";\n};\n\nexport const Name = \"cart-view-event\";\n\n/**\n * Sends Shopify's `shopify:cart:view` when the shopper sees the cart.\n *\n * Place it inside `cart-context` on the cart page and in the cart drawer. The\n * cart it reports is the live one from the context, so it is never the stale\n * copy a Liquid-rendered payload would be after an Ajax change.\n *\n * In a drawer it watches the surrounding `cart-context` come into view rather\n * than listening to any particular dialog component: a closed drawer is not\n * rendered, so becoming visible is what opening it means, whichever dialog\n * does the opening. Reopened before its closing animation has finished, the\n * drawer never left the screen, and that counts as the same view.\n */\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst cart = useAjaxCart(element);\n\n\tconst send = (context: Props[\"context\"]) => {\n\t\t// A snapshot of the cart as the shopper sees it now — called from an\n\t\t// effect's apply phase and an observer callback, neither of which\n\t\t// should subscribe. Once the cart has been fetched it is a store, and\n\t\t// `untrack` only covers the call: reading the store's fields after it,\n\t\t// in the apply phase, is STRICT_READ_UNTRACKED. `snapshot` copies it\n\t\t// to a plain object inside. The accessor is typed by an empty path,\n\t\t// which resolves to `never`; what it returns is the whole cart.\n\t\tconst current = untrack(() => snapshot(cart())) as CartData | undefined;\n\t\tvoid Events.cartView(element, (library) => ({\n\t\t\tcontext,\n\t\t\t// An empty token is a cart that has not been created yet.\n\t\t\tcart: current?.token\n\t\t\t\t? Events.cartFromAjax(\n\t\t\t\t\t\tlibrary,\n\t\t\t\t\t\tcurrent as unknown as Events.CartAjaxResponse,\n\t\t\t\t\t)\n\t\t\t\t: null,\n\t\t})).catch(() => {});\n\t};\n\n\tEvents.preload();\n\n\tcreateGuardedEffect(\n\t\t() => props.context,\n\t\t(context) => {\n\t\t\tif (context !== \"dialog\") {\n\t\t\t\tsend(\"page\");\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst surface = element.closest(\"cart-context\") ?? element;\n\t\t\tlet visible = false;\n\t\t\tconst observer = new IntersectionObserver((entries) => {\n\t\t\t\tfor (const entry of entries) {\n\t\t\t\t\tif (entry.isIntersecting && !visible) send(\"dialog\");\n\t\t\t\t\tvisible = entry.isIntersecting;\n\t\t\t\t}\n\t\t\t});\n\t\t\tobserver.observe(surface);\n\n\t\t\treturn () => observer.disconnect();\n\t\t},\n\t\t{ name: `${Name}/observe` },\n\t);\n};\n"],"mappings":";;;;;;AAgBA,IAAa,OAAO;;;;;;;;;;;;;;AAepB,IAAa,aAA0C,OAAO,EAAE,cAAc;CAC7E,MAAM,OAAO,YAAY,OAAO;CAEhC,MAAM,QAAQ,YAA8B;EAQ3C,MAAM,UAAU,cAAc,SAAS,KAAK,CAAC,CAAC;EAC9C,OAAY,SAAS,UAAU,aAAa;GAC3C;GAEA,MAAM,SAAS,QACZ,OAAO,aACP,SACA,OACD,IACC;EACJ,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC;CACnB;CAEA,OAAO,QAAQ;CAEf,0BACO,MAAM,UACX,YAAY;EACZ,IAAI,YAAY,UAAU;GACzB,KAAK,MAAM;GACX;EACD;EAEA,MAAM,UAAU,QAAQ,QAAQ,cAAc,KAAK;EACnD,IAAI,UAAU;EACd,MAAM,WAAW,IAAI,sBAAsB,YAAY;GACtD,KAAK,MAAM,SAAS,SAAS;IAC5B,IAAI,MAAM,kBAAkB,CAAC,SAAS,KAAK,QAAQ;IACnD,UAAU,MAAM;GACjB;EACD,CAAC;EACD,SAAS,QAAQ,OAAO;EAExB,aAAa,SAAS,WAAW;CAClC,GACA,EAAE,MAAM,GAAG,KAAK,UAAU,CAC3B;AACD"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { consumeContext } from "@brytdesigns/web-component-core/utils";
|
|
1
2
|
import AjaxCart from "@brytdesigns/shopify-ajax-cart";
|
|
2
|
-
import {
|
|
3
|
+
import { createContext, provide } from "component-register";
|
|
3
4
|
//#region src/hooks/useAjaxCart.ts
|
|
4
5
|
var AjaxCartContext = createContext(() => () => AjaxCart.data);
|
|
5
6
|
var provideAjaxCartContext = (element) => {
|
|
@@ -9,7 +10,7 @@ var useAjaxCartContext = (context) => {
|
|
|
9
10
|
return context;
|
|
10
11
|
};
|
|
11
12
|
var useAjaxCart = (element) => {
|
|
12
|
-
const context =
|
|
13
|
+
const context = consumeContext(AjaxCartContext, element);
|
|
13
14
|
if (!context) throw new Error("CartContext not found! Please ensure to wrap your custom element with cart-context element.");
|
|
14
15
|
return useAjaxCartContext(context);
|
|
15
16
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAjaxCart.js","names":[],"sources":["../../../src/hooks/useAjaxCart.ts"],"sourcesContent":["import AjaxCart, { type CartData } from \"@brytdesigns/shopify-ajax-cart\";\nimport type { PathValue } from \"@brytdesigns/web-component-core\";\nimport {\
|
|
1
|
+
{"version":3,"file":"useAjaxCart.js","names":[],"sources":["../../../src/hooks/useAjaxCart.ts"],"sourcesContent":["import AjaxCart, { type CartData } from \"@brytdesigns/shopify-ajax-cart\";\nimport type { PathValue } from \"@brytdesigns/web-component-core\";\nimport { consumeContext } from \"@brytdesigns/web-component-core/utils\";\nimport {\n\tcreateContext,\n\ttype ICustomElement,\n\tprovide,\n} from \"component-register\";\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype AjaxCartContextType = () => PathValue<CartData, \"\">;\n\nconst AjaxCartContext = createContext(() => () => AjaxCart.data);\n\nexport const provideAjaxCartContext = (\n\telement: WalkableNode,\n): AjaxCartContextType => {\n\treturn provide(AjaxCartContext, {}, element);\n};\n\nexport const useAjaxCartContext = (context: AjaxCartContextType) => {\n\treturn context;\n};\n\nexport const useAjaxCart = (element: HTMLElement & ICustomElement) => {\n\tconst context = consumeContext<AjaxCartContextType>(AjaxCartContext, element);\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"CartContext not found! Please ensure to wrap your custom element with cart-context element.\",\n\t\t);\n\t}\n\n\treturn useAjaxCartContext(context);\n};\n"],"mappings":";;;;AAaA,IAAM,kBAAkB,0BAA0B,SAAS,IAAI;AAE/D,IAAa,0BACZ,YACyB;CACzB,OAAO,QAAQ,iBAAiB,CAAC,GAAG,OAAO;AAC5C;AAEA,IAAa,sBAAsB,YAAiC;CACnE,OAAO;AACR;AAEA,IAAa,eAAe,YAA0C;CACrE,MAAM,UAAU,eAAoC,iBAAiB,OAAO;CAE5E,IAAI,CAAC,SACJ,MAAM,IAAI,MACT,6FACD;CAGD,OAAO,mBAAmB,OAAO;AAClC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { createRemoteContext } from "@brytdesigns/web-component-core/utils";
|
|
1
|
+
import { consumeContext, createRemoteContext } from "@brytdesigns/web-component-core/utils";
|
|
2
2
|
import { omit } from "solid-js";
|
|
3
|
-
import {
|
|
3
|
+
import { createContext, provide } from "component-register";
|
|
4
4
|
//#region src/hooks/useListenerStatus.ts
|
|
5
5
|
function createListenerStatusContext(options) {
|
|
6
6
|
const publicProps = omit(options, "element");
|
|
@@ -19,7 +19,7 @@ var useListenerStatusContext = (context) => {
|
|
|
19
19
|
return context;
|
|
20
20
|
};
|
|
21
21
|
var useListenerStatus = (element) => {
|
|
22
|
-
const context =
|
|
22
|
+
const context = consumeContext(ListenerStatusContext, element);
|
|
23
23
|
if (!context) throw new Error("CartListenerContext not found! Please ensure to wrap your custom element with cart-data-listener element.");
|
|
24
24
|
return useListenerStatusContext(context);
|
|
25
25
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useListenerStatus.js","names":[],"sources":["../../../src/hooks/useListenerStatus.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useListenerStatus.js","names":[],"sources":["../../../src/hooks/useListenerStatus.ts"],"sourcesContent":["import {\n\tconsumeContext,\n\tcreateRemoteContext,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\tcreateContext,\n\ttype ICustomElement,\n\tprovide,\n} from \"component-register\";\nimport { omit } from \"solid-js\";\n\ntype WalkableNode = Parameters<typeof provide>[2];\nexport type Status = \"default\" | \"loading\" | \"success\" | \"error\";\n\ntype ListenerStatusContextType = ReturnType<typeof createListenerStatusContext>;\n\ntype Options = {\n\telement: HTMLElement & ICustomElement;\n\tstatus: Status;\n};\n\nfunction createListenerStatusContext(options: Options) {\n\t// `omit` returns only the rest; `element` is read straight off `options`.\n\tconst publicProps = omit(options, \"element\");\n\n\tfunction setStatus(status: Status) {\n\t\tconst currentStatus = options.element.getAttribute(\"status\");\n\t\tif (currentStatus === status) return;\n\t\toptions.element.setAttribute(\"status\", status);\n\t\treturn status;\n\t}\n\n\treturn [() => publicProps.status, setStatus] as const;\n}\n\nconst ListenerStatusContext = createContext(createListenerStatusContext);\n\nexport const provideListenerStatusContext = (options: {\n\telement: WalkableNode;\n\tstatus: Status;\n}): ListenerStatusContextType => {\n\treturn provide(ListenerStatusContext, options, options.element);\n};\n\nexport const useListenerStatusContext = (\n\tcontext: ListenerStatusContextType,\n) => {\n\treturn context;\n};\n\nexport const useListenerStatus = (element: HTMLElement & ICustomElement) => {\n\tconst context = consumeContext<ListenerStatusContextType>(\n\t\tListenerStatusContext,\n\t\telement,\n\t);\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"CartListenerContext not found! Please ensure to wrap your custom element with cart-data-listener element.\",\n\t\t);\n\t}\n\n\treturn useListenerStatusContext(context);\n};\n\nexport const useListenerStatusAt =\n\tcreateRemoteContext<ListenerStatusContextType>(ListenerStatusContext);\n"],"mappings":";;;;AAqBA,SAAS,4BAA4B,SAAkB;CAEtD,MAAM,cAAc,KAAK,SAAS,SAAS;CAE3C,SAAS,UAAU,QAAgB;EAElC,IADsB,QAAQ,QAAQ,aAAa,QAC/C,MAAkB,QAAQ;EAC9B,QAAQ,QAAQ,aAAa,UAAU,MAAM;EAC7C,OAAO;CACR;CAEA,OAAO,OAAO,YAAY,QAAQ,SAAS;AAC5C;AAEA,IAAM,wBAAwB,cAAc,2BAA2B;AAEvE,IAAa,gCAAgC,YAGZ;CAChC,OAAO,QAAQ,uBAAuB,SAAS,QAAQ,OAAO;AAC/D;AAEA,IAAa,4BACZ,YACI;CACJ,OAAO;AACR;AAEA,IAAa,qBAAqB,YAA0C;CAC3E,MAAM,UAAU,eACf,uBACA,OACD;CAEA,IAAI,CAAC,SACJ,MAAM,IAAI,MACT,2GACD;CAGD,OAAO,yBAAyB,OAAO;AACxC;AAEA,IAAa,sBACZ,oBAA+C,qBAAqB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brytdesigns/shopify-ajax-cart-components",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.4.0",
|
|
4
4
|
"description": "Headless web components for the Ajax Cart Library",
|
|
5
5
|
"main": "./dist/main/index.js",
|
|
6
6
|
"types": "./dist/main/index.d.ts",
|
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
],
|
|
17
17
|
"keywords": [],
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@brytdesigns/shopify-ajax-cart": "3.
|
|
20
|
-
"@brytdesigns/shopify-utils": "3.
|
|
21
|
-
"@brytdesigns/web-component-core": "3.
|
|
19
|
+
"@brytdesigns/shopify-ajax-cart": "3.4.0",
|
|
20
|
+
"@brytdesigns/shopify-utils": "3.4.0",
|
|
21
|
+
"@brytdesigns/web-component-core": "3.4.0",
|
|
22
22
|
"@solidjs/web": "2.0.0-rc.14",
|
|
23
23
|
"component-register": "0.8.7",
|
|
24
24
|
"lodash.debounce": "^4.0.8",
|