@brytdesigns/web-component-core 1.1.2 → 1.1.4

package/dist/esm/utils/index.js

@@ -184,6 +184,35 @@ function createWithElementContext(context) {
   };
 }
 
-export { checkLoaded, correctElementType, createWithElementContext, customElement, customShadowlessElement, getContextFromProvider, invokeOnLoaded, isCustomElement, toHyphenated };
+// src/utils/formatValue.ts
+function formatValue(format, value) {
+  switch (format) {
+    case "currency":
+      if (typeof value === "number") return window.Shopify.formatMoney(value);
+      if (typeof value === "string")
+        return window.Shopify.formatMoney(parseFloat(value));
+      console.warn("formatValue: Unsupported value type for currency format.");
+      return window.Shopify.formatMoney(0);
+    case "number":
+      return Number(value);
+    case "boolean":
+      return Boolean(value);
+    case "invert_boolean":
+      return !Boolean(value);
+    default:
+      return value;
+  }
+}
+
+// src/utils/getTemplateContent.ts
+function getTemplateContent(element, state) {
+  const tmpl = element.querySelector(
+    `template[${state}]`
+  );
+  if (!tmpl) return null;
+  return tmpl.content;
+}
+
+export { checkLoaded, correctElementType, createWithElementContext, customElement, customShadowlessElement, formatValue, getContextFromProvider, getTemplateContent, invokeOnLoaded, isCustomElement, toHyphenated };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/esm/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/toHyphenated.ts","../../../src/utils/solid-element.ts","../../../src/utils/isCustomElement.ts","../../../src/utils/getContextFromProvider.ts","../../../src/utils/checkLoaded.ts","../../../src/utils/invokeOnLoaded.ts","../../../src/utils/createWithElementContext.ts"],"names":["dependencies","target","createRoot","onCleanup"],"mappings":"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","file":"index.js","sourcesContent":["export function toHyphenated(str: string): string {\n  return str\n    .replace(/([A-Z])/g, \"-$1\") // Insert hyphen before uppercase letters\n    .toLowerCase(); // Convert the entire string to lowercase\n}\n","import {\n  register,\n  type ComponentType as mComponentType,\n  type ICustomElement,\n  type FunctionComponent,\n  type ComponentOptions,\n  noShadowDOM,\n  compose,\n} from \"component-register\";\nimport { createRoot, createSignal, onCleanup } from \"solid-js\";\nimport { insert } from \"solid-js/web\";\n\nexport type ComponentType<T> = mComponentType<T>;\n\ntype CorrectComponentOptions = { element: HTMLElement & ICustomElement };\n\nexport type CorrectComponentType<T> = (\n  props: T,\n  options: CorrectComponentOptions,\n) => unknown;\n\nfunction createProps<T extends object>(raw: T) {\n  const keys = Object.keys(raw) as (keyof T)[];\n  const props = {};\n  for (let i = 0; i < keys.length; i++) {\n    const key = keys[i];\n    if (typeof key === \"undefined\") continue;\n    const [get, set] = createSignal(Reflect.get(raw, key));\n    Object.defineProperty(props, key, {\n      get,\n      set(v) {\n        set(() => v);\n      },\n    });\n  }\n  return props as T;\n}\n\nfunction lookupContext(el: ICustomElement & { _$owner?: any }) {\n  if (el.assignedSlot && el.assignedSlot._$owner)\n    return el.assignedSlot._$owner;\n  let next: Element & { _$owner?: any } = el.parentNode;\n  while (\n    next &&\n    !next._$owner &&\n    !(\n      next.assignedSlot &&\n      (next.assignedSlot as Element & { _$owner?: any })._$owner\n    )\n  )\n    next = next.parentNode as Element;\n  return next && next.assignedSlot\n    ? (next.assignedSlot as Element & { _$owner?: any })._$owner\n    : el._$owner;\n}\n\nfunction withSolid<T extends object>(\n  ComponentType: ComponentType<T>,\n): ComponentType<T> {\n  return (rawProps: T, options: ComponentOptions) => {\n    const { element } = options as {\n      element: ICustomElement & { _$owner?: any };\n    };\n    return createRoot((dispose: Function) => {\n      const props = createProps<T>(rawProps);\n\n      element.addPropertyChangedCallback(\n        (key: string, val: any) => (props[key as keyof T] = val),\n      );\n      element.addReleaseCallback(() => {\n        element.renderRoot.textContent = \"\";\n        dispose();\n      });\n\n      const comp = (ComponentType as FunctionComponent<T>)(props as T, options);\n      return insert(element.renderRoot, comp);\n    }, lookupContext(element));\n  };\n}\n\nfunction withNoShadowDOM<T extends object>(\n  Component: ComponentType<T> = () => {},\n) {\n  return (props: T, options: ComponentOptions) => {\n    noShadowDOM();\n    const comp = (Component as FunctionComponent<T>)(props, options);\n    return comp;\n  };\n}\n\nexport function customElement<T extends object>(\n  tagName: string,\n  props: T,\n  Component: ComponentType<T> = () => {},\n  ...rest: ((C: ComponentType<T>) => ComponentType<T>)[]\n) {\n  return compose(register(tagName, props), withSolid, ...rest)(Component);\n}\n\nfunction isConstructable(fn: unknown): fn is new (...args: any[]) => any {\n  if (typeof fn !== \"function\") return false;\n\n  try {\n    Reflect.construct(String, [], fn as Function);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\nexport function customShadowlessElement<T extends object>(\n  tagName: string,\n  props: T,\n  Component: ComponentType<T> = () => {},\n  ...rest: ((C: ComponentType<T>) => ComponentType<T>)[]\n) {\n  return compose(\n    register(tagName, props),\n    withNoShadowDOM,\n    withSolid,\n    ...rest,\n  )((...args) => {\n    onCleanup(() => {\n      const [_, { element }] = args;\n      element.dispatchEvent(new CustomEvent(\"bryt-designs:element-destroyed\"));\n    });\n    if (isConstructable(Component)) {\n      return new Component(...args);\n    }\n    return Component(...args);\n  });\n}\n\nexport const correctElementType = <T>(\n  component: CorrectComponentType<T>,\n): ComponentType<T> => {\n  return (props: T, options) => {\n    return component(props, options as CorrectComponentOptions);\n  };\n};\n","import type { ICustomElement } from \"component-register\";\nexport function isCustomElement(\n  element: any,\n): element is ICustomElement & HTMLElement {\n  return Reflect.has(element, \"__initialized\");\n}\n","import type { createContext } from \"component-register\";\n\nexport function getContextFromProvider<T>(\n  context: ReturnType<typeof createContext>,\n  element: Element,\n) {\n  const ctxSymbol = Object.getOwnPropertySymbols(element).find(\n    (s) => s.description === \"element-context\",\n  );\n  if (!ctxSymbol) {\n    throw new Error(\"No context provider found for the provided element\");\n  }\n  // @ts-ignore\n  const contexts = element[ctxSymbol];\n  return contexts[context.id] as T;\n}\n","export function checkLoaded() {\n  return (\n    document.readyState === \"complete\" ||\n    //@ts-ignore\n    document.readyState === \"loaded\" ||\n    document.readyState === \"interactive\"\n  );\n}\n","import { checkLoaded } from \"./checkLoaded.js\";\n\nexport function invokeOnLoaded(\n  fn: () => void,\n  { signal }: { signal?: AbortSignal },\n) {\n  if (checkLoaded()) {\n    const id = setTimeout(() => fn());\n    signal?.addEventListener(\"abort\", () => clearTimeout(id), {\n      once: true,\n    });\n    return;\n  }\n  window.addEventListener(\"DOMContentLoaded\", fn, { signal, once: true });\n  return;\n}\n","import type { createContext } from \"component-register\";\nimport { getContextFromProvider } from \"./getContextFromProvider.js\";\nimport { invokeOnLoaded } from \"./invokeOnLoaded.js\";\nimport {\n  type Accessor,\n  createEffect,\n  createRoot,\n  on,\n  onCleanup,\n} from \"solid-js\";\n\n/**\n * Creates a HOF to ensure that a given callback is invoked only after the context for the element is ready.\n * */\n\nexport function createWithElementContext<\n  Context extends ReturnType<typeof createContext>,\n  ContextState = null,\n>(context: Context) {\n  return function <D extends any>(\n    target: string | Accessor<string> | Accessor<() => Element>,\n    dependencies: Accessor<D> = () => null as D,\n    cb: (context: ContextState, dependencies: D) => void | (() => void),\n  ) {\n    createEffect(\n      on(\n        () => {\n          const t = typeof target === \"string\" ? target : target();\n          return {\n            target: t,\n            dependencies: dependencies(),\n          };\n        },\n        ({ target: _target, dependencies }) => {\n          const controller = new AbortController();\n          invokeOnLoaded(\n            () => {\n              let target: Element | null =\n                _target instanceof Element ? _target : null;\n              try {\n                if (typeof _target === \"string\")\n                  target = document.querySelector(_target);\n                else if (typeof _target === \"function\") target = _target();\n              } catch (e) {\n                e;\n              }\n              if (!target && typeof _target === \"string\")\n                return console.warn(`Target element not found!`, {\n                  target: _target,\n                });\n              else if (!target)\n                return console.warn(`Target element not found!`);\n\n              target.addEventListener(\n                \"bryt-designs:element-destroyed\",\n                () => {\n                  controller.abort(\"Context element destroyed\");\n                },\n                { once: true },\n              );\n\n              createRoot((dispose) => {\n                const c = getContextFromProvider(context, target);\n\n                const unsub = cb(c as ContextState, dependencies);\n\n                onCleanup(() => {\n                  if (typeof unsub === \"function\") unsub();\n                });\n\n                controller.signal.addEventListener(\"abort\", dispose, {\n                  once: true,\n                });\n              });\n            },\n            { signal: controller.signal },\n          );\n\n          // abort controller when dependencies change\n          onCleanup(() => {\n            controller.abort(\"Dependencies changed!\");\n          });\n        },\n      ),\n    );\n  };\n}\n"]}
+{"version":3,"sources":["../../../src/utils/toHyphenated.ts","../../../src/utils/solid-element.ts","../../../src/utils/isCustomElement.ts","../../../src/utils/getContextFromProvider.ts","../../../src/utils/checkLoaded.ts","../../../src/utils/invokeOnLoaded.ts","../../../src/utils/createWithElementContext.ts","../../../src/utils/formatValue.ts","../../../src/utils/getTemplateContent.ts"],"names":["dependencies","target","createRoot","onCleanup"],"mappings":"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","file":"index.js","sourcesContent":["export function toHyphenated(str: string): string {\n  return str\n    .replace(/([A-Z])/g, \"-$1\") // Insert hyphen before uppercase letters\n    .toLowerCase(); // Convert the entire string to lowercase\n}\n","import {\n  register,\n  type ComponentType as mComponentType,\n  type ICustomElement,\n  type FunctionComponent,\n  type ComponentOptions,\n  noShadowDOM,\n  compose,\n} from \"component-register\";\nimport { createRoot, createSignal, onCleanup } from \"solid-js\";\nimport { insert } from \"solid-js/web\";\n\nexport type ComponentType<T> = mComponentType<T>;\n\ntype CorrectComponentOptions = { element: HTMLElement & ICustomElement };\n\nexport type CorrectComponentType<T> = (\n  props: T,\n  options: CorrectComponentOptions,\n) => unknown;\n\nfunction createProps<T extends object>(raw: T) {\n  const keys = Object.keys(raw) as (keyof T)[];\n  const props = {};\n  for (let i = 0; i < keys.length; i++) {\n    const key = keys[i];\n    if (typeof key === \"undefined\") continue;\n    const [get, set] = createSignal(Reflect.get(raw, key));\n    Object.defineProperty(props, key, {\n      get,\n      set(v) {\n        set(() => v);\n      },\n    });\n  }\n  return props as T;\n}\n\nfunction lookupContext(el: ICustomElement & { _$owner?: any }) {\n  if (el.assignedSlot && el.assignedSlot._$owner)\n    return el.assignedSlot._$owner;\n  let next: Element & { _$owner?: any } = el.parentNode;\n  while (\n    next &&\n    !next._$owner &&\n    !(\n      next.assignedSlot &&\n      (next.assignedSlot as Element & { _$owner?: any })._$owner\n    )\n  )\n    next = next.parentNode as Element;\n  return next && next.assignedSlot\n    ? (next.assignedSlot as Element & { _$owner?: any })._$owner\n    : el._$owner;\n}\n\nfunction withSolid<T extends object>(\n  ComponentType: ComponentType<T>,\n): ComponentType<T> {\n  return (rawProps: T, options: ComponentOptions) => {\n    const { element } = options as {\n      element: ICustomElement & { _$owner?: any };\n    };\n    return createRoot((dispose: Function) => {\n      const props = createProps<T>(rawProps);\n\n      element.addPropertyChangedCallback(\n        (key: string, val: any) => (props[key as keyof T] = val),\n      );\n      element.addReleaseCallback(() => {\n        element.renderRoot.textContent = \"\";\n        dispose();\n      });\n\n      const comp = (ComponentType as FunctionComponent<T>)(props as T, options);\n      return insert(element.renderRoot, comp);\n    }, lookupContext(element));\n  };\n}\n\nfunction withNoShadowDOM<T extends object>(\n  Component: ComponentType<T> = () => {},\n) {\n  return (props: T, options: ComponentOptions) => {\n    noShadowDOM();\n    const comp = (Component as FunctionComponent<T>)(props, options);\n    return comp;\n  };\n}\n\nexport function customElement<T extends object>(\n  tagName: string,\n  props: T,\n  Component: ComponentType<T> = () => {},\n  ...rest: ((C: ComponentType<T>) => ComponentType<T>)[]\n) {\n  return compose(register(tagName, props), withSolid, ...rest)(Component);\n}\n\nfunction isConstructable(fn: unknown): fn is new (...args: any[]) => any {\n  if (typeof fn !== \"function\") return false;\n\n  try {\n    Reflect.construct(String, [], fn as Function);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\nexport function customShadowlessElement<T extends object>(\n  tagName: string,\n  props: T,\n  Component: ComponentType<T> = () => {},\n  ...rest: ((C: ComponentType<T>) => ComponentType<T>)[]\n) {\n  return compose(\n    register(tagName, props),\n    withNoShadowDOM,\n    withSolid,\n    ...rest,\n  )((...args) => {\n    onCleanup(() => {\n      const [_, { element }] = args;\n      element.dispatchEvent(new CustomEvent(\"bryt-designs:element-destroyed\"));\n    });\n    if (isConstructable(Component)) {\n      return new Component(...args);\n    }\n    return Component(...args);\n  });\n}\n\nexport const correctElementType = <T>(\n  component: CorrectComponentType<T>,\n): ComponentType<T> => {\n  return (props: T, options) => {\n    return component(props, options as CorrectComponentOptions);\n  };\n};\n","import type { ICustomElement } from \"component-register\";\nexport function isCustomElement(\n  element: any,\n): element is ICustomElement & HTMLElement {\n  return Reflect.has(element, \"__initialized\");\n}\n","import type { createContext } from \"component-register\";\n\nexport function getContextFromProvider<T>(\n  context: ReturnType<typeof createContext>,\n  element: Element,\n) {\n  const ctxSymbol = Object.getOwnPropertySymbols(element).find(\n    (s) => s.description === \"element-context\",\n  );\n  if (!ctxSymbol) {\n    throw new Error(\"No context provider found for the provided element\");\n  }\n  // @ts-ignore\n  const contexts = element[ctxSymbol];\n  return contexts[context.id] as T;\n}\n","export function checkLoaded() {\n  return (\n    document.readyState === \"complete\" ||\n    //@ts-ignore\n    document.readyState === \"loaded\" ||\n    document.readyState === \"interactive\"\n  );\n}\n","import { checkLoaded } from \"./checkLoaded.js\";\n\nexport function invokeOnLoaded(\n  fn: () => void,\n  { signal }: { signal?: AbortSignal },\n) {\n  if (checkLoaded()) {\n    const id = setTimeout(() => fn());\n    signal?.addEventListener(\"abort\", () => clearTimeout(id), {\n      once: true,\n    });\n    return;\n  }\n  window.addEventListener(\"DOMContentLoaded\", fn, { signal, once: true });\n  return;\n}\n","import type { createContext } from \"component-register\";\nimport { getContextFromProvider } from \"./getContextFromProvider.js\";\nimport { invokeOnLoaded } from \"./invokeOnLoaded.js\";\nimport {\n  type Accessor,\n  createEffect,\n  createRoot,\n  on,\n  onCleanup,\n} from \"solid-js\";\n\n/**\n * Creates a HOF to ensure that a given callback is invoked only after the context for the element is ready.\n * */\n\nexport function createWithElementContext<\n  Context extends ReturnType<typeof createContext>,\n  ContextState = null,\n>(context: Context) {\n  return function <D extends any>(\n    target: string | Accessor<string> | Accessor<() => Element>,\n    dependencies: Accessor<D> = () => null as D,\n    cb: (context: ContextState, dependencies: D) => void | (() => void),\n  ) {\n    createEffect(\n      on(\n        () => {\n          const t = typeof target === \"string\" ? target : target();\n          return {\n            target: t,\n            dependencies: dependencies(),\n          };\n        },\n        ({ target: _target, dependencies }) => {\n          const controller = new AbortController();\n          invokeOnLoaded(\n            () => {\n              let target: Element | null =\n                _target instanceof Element ? _target : null;\n              try {\n                if (typeof _target === \"string\")\n                  target = document.querySelector(_target);\n                else if (typeof _target === \"function\") target = _target();\n              } catch (e) {\n                e;\n              }\n              if (!target && typeof _target === \"string\")\n                return console.warn(`Target element not found!`, {\n                  target: _target,\n                });\n              else if (!target)\n                return console.warn(`Target element not found!`);\n\n              target.addEventListener(\n                \"bryt-designs:element-destroyed\",\n                () => {\n                  controller.abort(\"Context element destroyed\");\n                },\n                { once: true },\n              );\n\n              createRoot((dispose) => {\n                const c = getContextFromProvider(context, target);\n\n                const unsub = cb(c as ContextState, dependencies);\n\n                onCleanup(() => {\n                  if (typeof unsub === \"function\") unsub();\n                });\n\n                controller.signal.addEventListener(\"abort\", dispose, {\n                  once: true,\n                });\n              });\n            },\n            { signal: controller.signal },\n          );\n\n          // abort controller when dependencies change\n          onCleanup(() => {\n            controller.abort(\"Dependencies changed!\");\n          });\n        },\n      ),\n    );\n  };\n}\n","export type Format =\n  | \"currency\"\n  | \"number\"\n  | \"boolean\"\n  | \"invert_boolean\"\n  | string;\n\nexport function formatValue(format: Format, value: unknown) {\n  switch (format) {\n    case \"currency\":\n      if (typeof value === \"number\") return window.Shopify.formatMoney(value);\n      if (typeof value === \"string\")\n        return window.Shopify.formatMoney(parseFloat(value));\n      console.warn(\"formatValue: Unsupported value type for currency format.\");\n      return window.Shopify.formatMoney(0);\n    case \"number\":\n      return Number(value);\n    case \"boolean\":\n      return Boolean(value);\n    case \"invert_boolean\":\n      return !Boolean(value);\n    default:\n      return value as any;\n  }\n}\n\ndeclare global {\n  interface Window {\n    Shopify: {\n      formatMoney(value: number, currency?: string): string;\n    };\n  }\n}\n","export function getTemplateContent(element: HTMLElement, state: string) {\n  const tmpl = element.querySelector(\n    `template[${state}]`,\n  ) as HTMLTemplateElement;\n  if (!tmpl) return null;\n  return tmpl.content;\n}\n"]}

package/dist/main/hooks/index.d.ts

@@ -0,0 +1,56 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import { ICustomElement, provide as _provide } from 'component-register';
+import { Accessor } from 'solid-js';
+
+export type Path<T> = T extends readonly (infer U)[] ? `${number}` | `${number}.${Path<U>}` : T extends object ? {
+	[K in keyof T & (string | number)]: T[K] extends object | any[] ? `${K}` | `${K}.${Path<T[K]>}` : `${K}`;
+}[keyof T & (string | number)] : never;
+export type PathValue<T, P extends string> = P extends `${infer Key}.${infer Rest}` ? Key extends keyof T ? PathValue<T[Key], Rest> : Key extends `${number}` ? T extends readonly (infer U)[] ? PathValue<U, Rest> : undefined : undefined : P extends keyof T ? T[P] : P extends `${number}` ? T extends readonly (infer U)[] ? U : undefined : undefined;
+export type CorrectComponentOptions = {
+	element: HTMLElement & ICustomElement;
+};
+export type CorrectComponentType<T> = (props: T, options: CorrectComponentOptions) => unknown;
+export type Format = "currency" | "number" | "boolean" | "invert_boolean" | string;
+export type WalkableNode = Parameters<typeof _provide>[2];
+export declare const makeFullPropertyPathContext: <RootData = any>() => {
+	provide: ({ element, path, }: {
+		element: WalkableNode;
+		path: Accessor<Path<RootData>>;
+	}) => Accessor<Path<RootData>>;
+	usePath: (props: {
+		element: HTMLElement & ICustomElement;
+		path?: Accessor<Path<RootData>>;
+	}) => Accessor<Path<RootData>>;
+	usePathValue: <P extends Path<RootData>>(options: {
+		path: Accessor<P>;
+		data: Accessor<PathValue<RootData, P>>;
+	}) => Accessor<PathValue<RootData, P>>;
+	useFormattedValue: <P extends Path<RootData>>(options: {
+		path: Accessor<P>;
+		format?: Format;
+		data: Accessor<PathValue<RootData, P>>;
+	}) => Accessor<PathValue<RootData, P>>;
+};
+export type ContextHooks<RootData = any> = ReturnType<typeof makeFullPropertyPathContext<RootData>>;
+export type BaseOptions<RootData = any, Props = any> = {
+	useRootData: (element: ICustomElement & HTMLElement) => Accessor<PathValue<RootData, any>>;
+	hooks: ContextHooks<RootData>;
+	name: string;
+	Component?: CorrectComponentType<Props>;
+};
+export declare const makePathDataComponent: <RootData = any, Props = any>({ useRootData, hooks, name, }: BaseOptions<RootData>) => CorrectComponentType<{
+	propertyName: Path<RootData>;
+	format?: Format;
+} & Props>;
+export declare const makePathDataArrayComponent: <RootData = any, Props = any>({ useRootData, hooks, name, arrayItemName, }: BaseOptions<RootData> & {
+	arrayItemName: string;
+}) => CorrectComponentType<{
+	arrayPath: Path<RootData>;
+	format?: Format;
+} & Props>;
+export declare const makePathDataArrayItemComponent: <RootData = any, Props extends {
+	itemIndex: Path<RootData>;
+} = any>({ hooks, name, }: BaseOptions<RootData, Props>) => CorrectComponentType<Props>;
+
+export {};

package/dist/main/hooks/index.js

@@ -0,0 +1,6 @@
+export * from './makePathContextHooks.js';
+export * from './makePathDataComponent.js';
+export * from './makePathDataArrayComponent.js';
+export * from './makePathDataArrayItemComponent.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/main/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/main/hooks/internal/getValueFromPath.js

@@ -0,0 +1,14 @@
+function getValueFromPath(obj, path) {
+  return path.split(".").reduce((acc, key) => {
+    if (acc === null || acc === void 0) return void 0;
+    const isArrayIndex = !isNaN(Number(key)) && key.trim() !== "";
+    if (Array.isArray(acc) && isArrayIndex) {
+      return acc[Number(key)];
+    }
+    return acc[key];
+  }, obj);
+}
+
+export { getValueFromPath };
+//# sourceMappingURL=getValueFromPath.js.map
+//# sourceMappingURL=getValueFromPath.js.map

package/dist/main/hooks/internal/getValueFromPath.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/internal/getValueFromPath.ts"],"names":[],"mappings":"AA6BO,SAAS,gBAAA,CACd,KACA,IACiB,EAAA;AACjB,EAAA,OAAO,KAAK,KAAM,CAAA,GAAG,EAAE,MAAY,CAAA,CAAC,KAAK,GAAQ,KAAA;AAC/C,IAAA,IAAI,GAAQ,KAAA,IAAA,IAAQ,GAAQ,KAAA,MAAA,EAAkB,OAAA,MAAA;AAE9C,IAAM,MAAA,YAAA,GAAe,CAAC,KAAM,CAAA,MAAA,CAAO,GAAG,CAAC,CAAA,IAAK,GAAI,CAAA,IAAA,EAAW,KAAA,EAAA;AAC3D,IAAA,IAAI,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA,IAAK,YAAc,EAAA;AACtC,MAAO,OAAA,GAAA,CAAI,MAAO,CAAA,GAAG,CAAC,CAAA;AAAA;AAGxB,IAAA,OAAO,IAAI,GAAG,CAAA;AAAA,KACb,GAAG,CAAA;AACR","file":"getValueFromPath.js","sourcesContent":["export type Path<T> = T extends readonly (infer U)[]\n  ? `${number}` | `${number}.${Path<U>}` // Allows indexing into readonly arrays\n  : T extends object\n    ? {\n        [K in keyof T & (string | number)]: T[K] extends object | any[]\n          ? `${K}` | `${K}.${Path<T[K]>}`\n          : `${K}`;\n      }[keyof T & (string | number)]\n    : never;\n\nexport type PathValue<\n  T,\n  P extends string,\n> = P extends `${infer Key}.${infer Rest}`\n  ? Key extends keyof T\n    ? PathValue<T[Key], Rest>\n    : Key extends `${number}`\n      ? T extends readonly (infer U)[]\n        ? PathValue<U, Rest>\n        : undefined\n      : undefined\n  : P extends keyof T\n    ? T[P]\n    : P extends `${number}`\n      ? T extends readonly (infer U)[]\n        ? U\n        : undefined\n      : undefined;\n\nexport function getValueFromPath<T, P extends Path<T>>(\n  obj: T,\n  path: P\n): PathValue<T, P> {\n  return path.split(\".\").reduce<any>((acc, key) => {\n    if (acc === null || acc === undefined) return undefined;\n\n    const isArrayIndex = !isNaN(Number(key)) && key.trim() !== \"\";\n    if (Array.isArray(acc) && isArrayIndex) {\n      return acc[Number(key)];\n    }\n\n    return acc[key];\n  }, obj) as PathValue<T, P>;\n}\n"]}

package/dist/main/hooks/internal/index.js

@@ -0,0 +1,3 @@
+export * from './getValueFromPath.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/main/hooks/internal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/main/hooks/internal/types.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package/dist/main/hooks/internal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}

package/dist/main/hooks/makePathContextHooks.js

@@ -0,0 +1,71 @@
+import { createMemo } from 'solid-js';
+import { createContext, provide, consume } from 'component-register';
+import { getValueFromPath } from './internal/index.js';
+import { formatValue } from '../utils/index.js';
+
+const makeFullPropertyPathContext = () => {
+  function createFullPathPropertyContext(options) {
+    return options.path;
+  }
+  const Context = createContext(createFullPathPropertyContext);
+  function provide$1({
+    element,
+    path
+  }) {
+    return provide(Context, { path }, element);
+  }
+  function useFullPropertyPathContext(context) {
+    return context;
+  }
+  function usePath(props) {
+    const context = consume(Context, props.element);
+    const basePath = useFullPropertyPathContext(context);
+    return createMemo(() => {
+      if (typeof basePath !== "function" && typeof props.path === "function") {
+        return props.path();
+      } else if (typeof basePath === "function" && typeof props.path !== "function") {
+        return basePath();
+      } else if (typeof basePath === "function" && typeof props.path === "function") {
+        return `${basePath()}.${props.path()}`;
+      }
+      return "";
+    });
+  }
+  function usePathValue(options) {
+    return createMemo(() => {
+      const data = options.data();
+      if (typeof options.path !== "function") return data;
+      const path = options.path();
+      if (!path) return data;
+      const v = getValueFromPath(data, path);
+      if (v === void 0 || v === null) return null;
+      return v;
+    });
+  }
+  function useFormattedValue(options) {
+    const value = usePathValue({ path: options.path, data: options.data });
+    const formattedValue = createMemo(() => {
+      const v = value();
+      if (v === null) return null;
+      if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
+        return formatValue(options.format || "", v);
+      }
+      console.warn(
+        `useFormattedValue: Unsupported value type. Expected string, number, or boolean. Received: ${typeof v}.`,
+        v
+      );
+      return null;
+    });
+    return formattedValue;
+  }
+  return {
+    provide: provide$1,
+    usePath,
+    usePathValue,
+    useFormattedValue
+  };
+};
+
+export { makeFullPropertyPathContext };
+//# sourceMappingURL=makePathContextHooks.js.map
+//# sourceMappingURL=makePathContextHooks.js.map

package/dist/main/hooks/makePathContextHooks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/makePathContextHooks.ts"],"names":["provide","_provide","_consume"],"mappings":";;;;;AAgBO,MAAM,8BAA8B,MAAsB;AAS/D,EAAA,SAAS,8BACP,OAC0B,EAAA;AAC1B,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA;AAGjB,EAAM,MAAA,OAAA,GAAU,cAAc,6BAA6B,CAAA;AAE3D,EAAA,SAASA,SAAQ,CAAA;AAAA,IACf,OAAA;AAAA,IACA;AAAA,GAI8B,EAAA;AAC9B,IAAA,OAAOC,OAAS,CAAA,OAAA,EAAS,EAAE,IAAA,IAAQ,OAAO,CAAA;AAAA;AAG5C,EAAA,SAAS,2BAA2B,OAAsC,EAAA;AACxE,IAAO,OAAA,OAAA;AAAA;AAGT,EAAA,SAAS,QAAQ,KAGY,EAAA;AAC3B,IAAA,MAAM,OAAU,GAAAC,OAAA,CAAS,OAAS,EAAA,KAAA,CAAM,OAAO,CAAA;AAC/C,IAAM,MAAA,QAAA,GAAW,2BAA2B,OAAO,CAAA;AACnD,IAAA,OAAO,WAAW,MAAM;AACtB,MAAA,IAAI,OAAO,QAAa,KAAA,UAAA,IAAc,OAAO,KAAA,CAAM,SAAS,UAAY,EAAA;AACtE,QAAA,OAAO,MAAM,IAAK,EAAA;AAAA,iBAElB,OAAO,QAAA,KAAa,cACpB,OAAO,KAAA,CAAM,SAAS,UACtB,EAAA;AACA,QAAA,OAAO,QAAS,EAAA;AAAA,iBAEhB,OAAO,QAAA,KAAa,cACpB,OAAO,KAAA,CAAM,SAAS,UACtB,EAAA;AACA,QAAA,OAAO,GAAG,QAAS,EAAC,CAAI,CAAA,EAAA,KAAA,CAAM,MAAM,CAAA,CAAA;AAAA;AAEtC,MAAO,OAAA,EAAA;AAAA,KACR,CAAA;AAAA;AAQH,EAAA,SAAS,aACP,OACkC,EAAA;AAClC,IAAA,OAAO,WAAW,MAAM;AACtB,MAAM,MAAA,IAAA,GAAO,QAAQ,IAAK,EAAA;AAC1B,MAAA,IAAI,OAAO,OAAA,CAAQ,IAAS,KAAA,UAAA,EAAmB,OAAA,IAAA;AAC/C,MAAM,MAAA,IAAA,GAAO,QAAQ,IAAK,EAAA;AAC1B,MAAI,IAAA,CAAC,MAAa,OAAA,IAAA;AAClB,MAAM,MAAA,CAAA,GAAI,gBAAiB,CAAA,IAAA,EAAM,IAAW,CAAA;AAC5C,MAAA,IAAI,CAAM,KAAA,MAAA,IAAa,CAAM,KAAA,IAAA,EAAa,OAAA,IAAA;AAC1C,MAAO,OAAA,CAAA;AAAA,KACR,CAAA;AAAA;AASH,EAAA,SAAS,kBACP,OACkC,EAAA;AAClC,IAAM,MAAA,KAAA,GAAQ,aAAa,EAAE,IAAA,EAAM,QAAQ,IAAM,EAAA,IAAA,EAAM,OAAQ,CAAA,IAAA,EAAM,CAAA;AAErE,IAAM,MAAA,cAAA,GAAiB,WAAW,MAAM;AACtC,MAAA,MAAM,IAAI,KAAM,EAAA;AAChB,MAAI,IAAA,CAAA,KAAM,MAAa,OAAA,IAAA;AACvB,MACE,IAAA,OAAO,MAAM,QACb,IAAA,OAAO,MAAM,QACb,IAAA,OAAO,MAAM,SACb,EAAA;AACA,QAAA,OAAO,WAAY,CAAA,OAAA,CAAQ,MAAU,IAAA,EAAA,EAAI,CAAC,CAAA;AAAA;AAE5C,MAAQ,OAAA,CAAA,IAAA;AAAA,QACN,CAAA,0FAAA,EAA6F,OAAO,CAAC,CAAA,CAAA,CAAA;AAAA,QACrG;AAAA,OACF;AACA,MAAO,OAAA,IAAA;AAAA,KACR,CAAA;AAED,IAAO,OAAA,cAAA;AAAA;AAGT,EAAO,OAAA;AAAA,aACLF,SAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACF;AACF","file":"makePathContextHooks.js","sourcesContent":["import type { Path, PathValue } from \"./internal\";\nimport { createMemo, type Accessor } from \"solid-js\";\nimport {\n  createContext,\n  consume as _consume,\n  provide as _provide,\n  type ICustomElement,\n} from \"component-register\";\n\nimport { getValueFromPath } from \"./internal/index.js\";\nimport { formatValue, type Format } from \"../utils/index.js\";\n\ntype WalkableNode = Parameters<typeof _provide>[2];\n\nexport type { Path, PathValue };\n\nexport const makeFullPropertyPathContext = <RootData = any>() => {\n  type FullPropertyPathContextType = ReturnType<\n    typeof createFullPathPropertyContext\n  >;\n\n  type Options = {\n    path: Accessor<Path<RootData>>;\n    element: HTMLElement & ICustomElement;\n  };\n  function createFullPathPropertyContext(\n    options: Options,\n  ): Accessor<Path<RootData>> {\n    return options.path;\n  }\n\n  const Context = createContext(createFullPathPropertyContext);\n\n  function provide({\n    element,\n    path,\n  }: {\n    element: WalkableNode;\n    path: Accessor<Path<RootData>>;\n  }): FullPropertyPathContextType {\n    return _provide(Context, { path }, element);\n  }\n\n  function useFullPropertyPathContext(context: FullPropertyPathContextType) {\n    return context;\n  }\n\n  function usePath(props: {\n    element: HTMLElement & ICustomElement;\n    path?: Accessor<Path<RootData>>;\n  }): Accessor<Path<RootData>> {\n    const context = _consume(Context, props.element);\n    const basePath = useFullPropertyPathContext(context);\n    return createMemo(() => {\n      if (typeof basePath !== \"function\" && typeof props.path === \"function\") {\n        return props.path();\n      } else if (\n        typeof basePath === \"function\" &&\n        typeof props.path !== \"function\"\n      ) {\n        return basePath();\n      } else if (\n        typeof basePath === \"function\" &&\n        typeof props.path === \"function\"\n      ) {\n        return `${basePath()}.${props.path()}`;\n      }\n      return \"\";\n    }) as Accessor<Path<RootData>>;\n  }\n\n  type PathValueOptions<P extends Path<RootData>> = {\n    path: Accessor<P>;\n    data: Accessor<PathValue<RootData, P>>;\n  };\n\n  function usePathValue<P extends Path<RootData>>(\n    options: PathValueOptions<P>,\n  ): Accessor<PathValue<RootData, P>> {\n    return createMemo(() => {\n      const data = options.data();\n      if (typeof options.path !== \"function\") return data;\n      const path = options.path();\n      if (!path) return data;\n      const v = getValueFromPath(data, path as any);\n      if (v === undefined || v === null) return null;\n      return v;\n    }) as Accessor<PathValue<RootData, P>>;\n  }\n\n  type FormmatedValueOptions<P extends Path<RootData>> = {\n    path: Accessor<P>;\n    format?: Format;\n    data: Accessor<PathValue<RootData, P>>;\n  };\n\n  function useFormattedValue<P extends Path<RootData>>(\n    options: FormmatedValueOptions<P>,\n  ): Accessor<PathValue<RootData, P>> {\n    const value = usePathValue({ path: options.path, data: options.data });\n\n    const formattedValue = createMemo(() => {\n      const v = value();\n      if (v === null) return null;\n      if (\n        typeof v === \"string\" ||\n        typeof v === \"number\" ||\n        typeof v === \"boolean\"\n      ) {\n        return formatValue(options.format || \"\", v);\n      }\n      console.warn(\n        `useFormattedValue: Unsupported value type. Expected string, number, or boolean. Received: ${typeof v}.`,\n        v,\n      );\n      return null;\n    });\n\n    return formattedValue as Accessor<PathValue<RootData, P>>;\n  }\n\n  return {\n    provide,\n    usePath,\n    usePathValue,\n    useFormattedValue,\n  };\n};\n"]}

package/dist/main/hooks/makePathDataArrayComponent.js

@@ -0,0 +1,70 @@
+import './makePathContextHooks';
+import html from 'solid-js/html';
+import { createMemo, Show, For } from 'solid-js';
+import { getTemplateContent } from '../utils/index.js';
+
+const makePathDataArrayComponent = ({
+  useRootData,
+  hooks,
+  name,
+  arrayItemName
+}) => {
+  const { usePath, provide, usePathValue } = hooks;
+  return (props, { element }) => {
+    const itemTemplate = getTemplateContent(element, "item");
+    if (!itemTemplate)
+      return console.warn(
+        `${name}: No template found with a property of 'item'.`,
+        element
+      );
+    if (!props.arrayPath)
+      return console.warn(`${name}: No array path provided.`, element);
+    const data = useRootData(element);
+    const fullPath = usePath({
+      element,
+      path: () => props.arrayPath
+    });
+    provide({
+      element,
+      path: fullPath
+    });
+    const value = usePathValue({
+      path: fullPath,
+      data
+    });
+    const arrayValue = createMemo(() => {
+      const v = value();
+      if (!v) {
+        console.warn(
+          `${name}: value is null or undefined at path ${fullPath()}`,
+          element
+        );
+        return null;
+      }
+      if (!Array.isArray(v)) {
+        console.warn(
+          `${name}: value is not an array at path ${fullPath()}`,
+          element
+        );
+        return null;
+      }
+      return v;
+    });
+    element.replaceChildren(...[]);
+    return html`
+      <${Show} when=${() => arrayValue() && arrayValue().length > 0}>
+        <${For} each=${arrayValue}>
+          ${(_, idx) => html`
+            <${arrayItemName} item-index=${() => `${idx()}`}>
+              ${() => Array.from(itemTemplate.cloneNode(true).childNodes)}
+            </${arrayItemName}>
+          `}
+        <//>
+      <//>
+    `;
+  };
+};
+
+export { makePathDataArrayComponent };
+//# sourceMappingURL=makePathDataArrayComponent.js.map
+//# sourceMappingURL=makePathDataArrayComponent.js.map

package/dist/main/hooks/makePathDataArrayComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/makePathDataArrayComponent.ts"],"names":[],"mappings":";;;;;AAQO,MAAM,6BAA6B,CAA8B;AAAA,EACtE,WAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAKK,KAAA;AACH,EAAA,MAAM,EAAE,OAAA,EAAS,OAAS,EAAA,YAAA,EAAiB,GAAA,KAAA;AAC3C,EAAA,OAAO,CAAC,KAAA,EAAO,EAAE,OAAA,EAAc,KAAA;AAC7B,IAAM,MAAA,YAAA,GAAe,kBAAmB,CAAA,OAAA,EAAS,MAAM,CAAA;AACvD,IAAA,IAAI,CAAC,YAAA;AACH,MAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,QACb,GAAG,IAAI,CAAA,8CAAA,CAAA;AAAA,QACP;AAAA,OACF;AACF,IAAA,IAAI,CAAC,KAAM,CAAA,SAAA;AACT,MAAA,OAAO,OAAQ,CAAA,IAAA,CAAK,CAAG,EAAA,IAAI,6BAA6B,OAAO,CAAA;AAEjE,IAAM,MAAA,IAAA,GAAO,YAAY,OAAO,CAAA;AAEhC,IAAA,MAAM,WAAW,OAAQ,CAAA;AAAA,MACvB,OAAA;AAAA,MACA,IAAA,EAAM,MAAM,KAAM,CAAA;AAAA,KACnB,CAAA;AAED,IAAQ,OAAA,CAAA;AAAA,MACN,OAAA;AAAA,MACA,IAAM,EAAA;AAAA,KACP,CAAA;AAED,IAAA,MAAM,QAAQ,YAAa,CAAA;AAAA,MACzB,IAAM,EAAA,QAAA;AAAA,MACN;AAAA,KACD,CAAA;AAED,IAAM,MAAA,UAAA,GAAa,WAAW,MAAM;AAClC,MAAA,MAAM,IAAI,KAAM,EAAA;AAEhB,MAAA,IAAI,CAAC,CAAG,EAAA;AACN,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN,CAAG,EAAA,IAAI,CAAwC,qCAAA,EAAA,QAAA,EAAU,CAAA,CAAA;AAAA,UACzD;AAAA,SACF;AACA,QAAO,OAAA,IAAA;AAAA;AAGT,MAAA,IAAI,CAAC,KAAA,CAAM,OAAQ,CAAA,CAAC,CAAG,EAAA;AACrB,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN,CAAG,EAAA,IAAI,CAAmC,gCAAA,EAAA,QAAA,EAAU,CAAA,CAAA;AAAA,UACpD;AAAA,SACF;AACA,QAAO,OAAA,IAAA;AAAA;AAGT,MAAO,OAAA,CAAA;AAAA,KACR,CAAA;AACD,IAAQ,OAAA,CAAA,eAAA,CAAgB,GAAG,EAAE,CAAA;AAE7B,IAAO,OAAA,IAAA;AAAA,OACF,EAAA,IAAI,SAAS,MAAM,UAAA,MAAgB,UAAW,EAAA,CAAG,SAAS,CAAC,CAAA;AAAA,SACzD,EAAA,GAAG,SAAS,UAAU,CAAA;AAAA,UACrB,EAAA,CAAC,GAAQ,GAA0B,KAAA,IAAA;AAAA,aAAA,EAChC,aAAa,CAAe,YAAA,EAAA,MAAM,CAAG,EAAA,GAAA,EAAK,CAAE,CAAA,CAAA;AAAA,cAC3C,EAAA,MAAM,MAAM,IAAK,CAAA,YAAA,CAAa,UAAU,IAAI,CAAA,CAAE,UAAU,CAAC;AAAA,cAAA,EACzD,aAAa,CAAA;AAAA,UAClB,CAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,GAIT;AACF","file":"makePathDataArrayComponent.js","sourcesContent":["import type { CorrectComponentType, Format } from \"../utils/index\";\nimport { type Path } from \"./makePathContextHooks\";\nimport type { BaseOptions } from \"./internal/types\";\n\nimport html from \"solid-js/html\";\nimport { Show, For, createMemo, type Accessor } from \"solid-js\";\nimport { getTemplateContent } from \"../utils/index.js\";\n\nexport const makePathDataArrayComponent = <RootData = any, Props = any>({\n  useRootData,\n  hooks,\n  name,\n  arrayItemName,\n}: BaseOptions<RootData> & { arrayItemName: string }): CorrectComponentType<\n  {\n    arrayPath: Path<RootData>;\n    format?: Format;\n  } & Props\n> => {\n  const { usePath, provide, usePathValue } = hooks;\n  return (props, { element }) => {\n    const itemTemplate = getTemplateContent(element, \"item\");\n    if (!itemTemplate)\n      return console.warn(\n        `${name}: No template found with a property of 'item'.`,\n        element,\n      );\n    if (!props.arrayPath)\n      return console.warn(`${name}: No array path provided.`, element);\n\n    const data = useRootData(element);\n\n    const fullPath = usePath({\n      element,\n      path: () => props.arrayPath,\n    });\n\n    provide({\n      element,\n      path: fullPath,\n    });\n\n    const value = usePathValue({\n      path: fullPath,\n      data: data as any,\n    });\n\n    const arrayValue = createMemo(() => {\n      const v = value();\n\n      if (!v) {\n        console.warn(\n          `${name}: value is null or undefined at path ${fullPath()}`,\n          element,\n        );\n        return null;\n      }\n\n      if (!Array.isArray(v)) {\n        console.warn(\n          `${name}: value is not an array at path ${fullPath()}`,\n          element,\n        );\n        return null;\n      }\n\n      return v;\n    });\n    element.replaceChildren(...[]);\n\n    return html`\n      <${Show} when=${() => arrayValue() && arrayValue()!.length > 0}>\n        <${For} each=${arrayValue}>\n          ${(_: any, idx: Accessor<number>) => html`\n            <${arrayItemName} item-index=${() => `${idx()}`}>\n              ${() => Array.from(itemTemplate.cloneNode(true).childNodes)}\n            </${arrayItemName}>\n          `}\n        <//>\n      <//>\n    `;\n  };\n};\n"]}

package/dist/main/hooks/makePathDataArrayItemComponent.js

@@ -0,0 +1,24 @@
+import './makePathContextHooks';
+
+const makePathDataArrayItemComponent = ({
+  hooks,
+  name
+}) => {
+  const { usePath, provide } = hooks;
+  return (props, { element }) => {
+    if (!props.itemIndex)
+      return console.warn(`${name}: No path attribute provided.`);
+    const fullPath = usePath({
+      path: () => props.itemIndex,
+      element
+    });
+    provide({
+      element,
+      path: fullPath
+    });
+  };
+};
+
+export { makePathDataArrayItemComponent };
+//# sourceMappingURL=makePathDataArrayItemComponent.js.map
+//# sourceMappingURL=makePathDataArrayItemComponent.js.map

package/dist/main/hooks/makePathDataArrayItemComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/makePathDataArrayItemComponent.ts"],"names":[],"mappings":";;AAIO,MAAM,iCAAiC,CAG5C;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAiE,KAAA;AAC/D,EAAM,MAAA,EAAE,OAAS,EAAA,OAAA,EAAY,GAAA,KAAA;AAC7B,EAAA,OAAO,CAAC,KAAA,EAAO,EAAE,OAAA,EAAc,KAAA;AAC7B,IAAA,IAAI,CAAC,KAAM,CAAA,SAAA;AACT,MAAA,OAAO,OAAQ,CAAA,IAAA,CAAK,CAAG,EAAA,IAAI,CAA+B,6BAAA,CAAA,CAAA;AAE5D,IAAA,MAAM,WAAW,OAAQ,CAAA;AAAA,MACvB,IAAA,EAAM,MAAM,KAAM,CAAA,SAAA;AAAA,MAClB;AAAA,KACD,CAAA;AAED,IAAQ,OAAA,CAAA;AAAA,MACN,OAAA;AAAA,MACA,IAAM,EAAA;AAAA,KACP,CAAA;AAAA,GACH;AACF","file":"makePathDataArrayItemComponent.js","sourcesContent":["import type { CorrectComponentType } from \"../utils/index\";\nimport { type Path } from \"./makePathContextHooks\";\nimport type { BaseOptions } from \"./internal/types\";\n\nexport const makePathDataArrayItemComponent = <\n  RootData = any,\n  Props extends { itemIndex: Path<RootData> } = any,\n>({\n  hooks,\n  name,\n}: BaseOptions<RootData, Props>): CorrectComponentType<Props> => {\n  const { usePath, provide } = hooks;\n  return (props, { element }) => {\n    if (!props.itemIndex)\n      return console.warn(`${name}: No path attribute provided.`);\n\n    const fullPath = usePath({\n      path: () => props.itemIndex,\n      element,\n    });\n\n    provide({\n      element,\n      path: fullPath,\n    });\n  };\n};\n"]}

package/dist/main/hooks/makePathDataComponent.js

@@ -0,0 +1,36 @@
+import html from 'solid-js/html';
+import { Show } from 'solid-js';
+
+const makePathDataComponent = ({
+  useRootData,
+  hooks,
+  name
+}) => {
+  const { usePath, useFormattedValue } = hooks;
+  return (props, { element }) => {
+    if (!props.propertyName)
+      return console.warn(
+        `${name}: No property-name attribute provided.`,
+        element
+      );
+    const data = useRootData(element);
+    const fullPath = usePath({
+      element,
+      path: () => props.propertyName
+    });
+    const formattedValue = useFormattedValue({
+      get format() {
+        return props.format;
+      },
+      path: fullPath,
+      data
+    });
+    return html`
+      <${Show} when=${() => formattedValue() !== null}> ${formattedValue} <//>
+    `;
+  };
+};
+
+export { makePathDataComponent };
+//# sourceMappingURL=makePathDataComponent.js.map
+//# sourceMappingURL=makePathDataComponent.js.map

package/dist/main/hooks/makePathDataComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/makePathDataComponent.ts"],"names":[],"mappings":";;;AAOO,MAAM,wBAAwB,CAA8B;AAAA,EACjE,WAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAEK,KAAA;AACH,EAAM,MAAA,EAAE,OAAS,EAAA,iBAAA,EAAsB,GAAA,KAAA;AACvC,EAAA,OAAO,CAAC,KAAA,EAAO,EAAE,OAAA,EAAc,KAAA;AAC7B,IAAA,IAAI,CAAC,KAAM,CAAA,YAAA;AACT,MAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,QACb,GAAG,IAAI,CAAA,sCAAA,CAAA;AAAA,QACP;AAAA,OACF;AACF,IAAM,MAAA,IAAA,GAAO,YAAY,OAAO,CAAA;AAChC,IAAA,MAAM,WAAW,OAAQ,CAAA;AAAA,MACvB,OAAA;AAAA,MACA,IAAA,EAAM,MAAM,KAAM,CAAA;AAAA,KACnB,CAAA;AACD,IAAA,MAAM,iBAAiB,iBAAkB,CAAA;AAAA,MACvC,IAAI,MAAS,GAAA;AACX,QAAA,OAAO,KAAM,CAAA,MAAA;AAAA,OACf;AAAA,MACA,IAAM,EAAA,QAAA;AAAA,MACN;AAAA,KACD,CAAA;AACD,IAAO,OAAA,IAAA;AAAA,OAAA,EACF,IAAI,CAAS,MAAA,EAAA,MAAM,gBAAqB,KAAA,IAAI,KAAK,cAAc,CAAA;AAAA,IAAA,CAAA;AAAA,GAEtE;AACF","file":"makePathDataComponent.js","sourcesContent":["import type { BaseOptions } from \"./internal/types\";\nimport type { CorrectComponentType, Format } from \"../utils/index\";\nimport type { Path } from \"./internal\";\n\nimport html from \"solid-js/html\";\nimport { Show } from \"solid-js\";\n\nexport const makePathDataComponent = <RootData = any, Props = any>({\n  useRootData,\n  hooks,\n  name,\n}: BaseOptions<RootData>): CorrectComponentType<\n  { propertyName: Path<RootData>; format?: Format } & Props\n> => {\n  const { usePath, useFormattedValue } = hooks;\n  return (props, { element }) => {\n    if (!props.propertyName)\n      return console.warn(\n        `${name}: No property-name attribute provided.`,\n        element,\n      );\n    const data = useRootData(element);\n    const fullPath = usePath({\n      element,\n      path: () => props.propertyName,\n    });\n    const formattedValue = useFormattedValue({\n      get format() {\n        return props.format;\n      },\n      path: fullPath,\n      data: data as any,\n    });\n    return html`\n      <${Show} when=${() => formattedValue() !== null}> ${formattedValue} <//>\n    `;\n  };\n};\n"]}

package/dist/main/index.d.ts

@@ -1,6 +1,6 @@
 // Generated by dts-bundle-generator v9.5.1
 
-import { ComponentType as mComponentType, ICustomElement, createContext } from 'component-register';
+import { ComponentType as mComponentType, ICustomElement, createContext, provide as _provide } from 'component-register';
 import { FocusTrap, Options } from 'focus-trap';
 import { AnimationGeneratorType, AnimationPlaybackControlsWithThen, Easing, RepeatType } from 'motion';
 import { Accessor } from 'solid-js';
@@ -52,5 +52,52 @@ export declare function invokeOnLoaded(fn: () => void, { signal }: {
  * Creates a HOF to ensure that a given callback is invoked only after the context for the element is ready.
  * */
 export declare function createWithElementContext<Context extends ReturnType<typeof createContext>, ContextState = null>(context: Context): <D extends any>(target: string | Accessor<string> | Accessor<() => Element>, dependencies: Accessor<D> | undefined, cb: (context: ContextState, dependencies: D) => void | (() => void)) => void;
+export type Format = "currency" | "number" | "boolean" | "invert_boolean" | string;
+export declare function formatValue(format: Format, value: unknown): any;
+export declare function getTemplateContent(element: HTMLElement, state: string): DocumentFragment | null;
+export type Path<T> = T extends readonly (infer U)[] ? `${number}` | `${number}.${Path<U>}` : T extends object ? {
+	[K in keyof T & (string | number)]: T[K] extends object | any[] ? `${K}` | `${K}.${Path<T[K]>}` : `${K}`;
+}[keyof T & (string | number)] : never;
+export type PathValue<T, P extends string> = P extends `${infer Key}.${infer Rest}` ? Key extends keyof T ? PathValue<T[Key], Rest> : Key extends `${number}` ? T extends readonly (infer U)[] ? PathValue<U, Rest> : undefined : undefined : P extends keyof T ? T[P] : P extends `${number}` ? T extends readonly (infer U)[] ? U : undefined : undefined;
+export type WalkableNode = Parameters<typeof _provide>[2];
+export declare const makeFullPropertyPathContext: <RootData = any>() => {
+	provide: ({ element, path, }: {
+		element: WalkableNode;
+		path: Accessor<Path<RootData>>;
+	}) => Accessor<Path<RootData>>;
+	usePath: (props: {
+		element: HTMLElement & ICustomElement;
+		path?: Accessor<Path<RootData>>;
+	}) => Accessor<Path<RootData>>;
+	usePathValue: <P extends Path<RootData>>(options: {
+		path: Accessor<P>;
+		data: Accessor<PathValue<RootData, P>>;
+	}) => Accessor<PathValue<RootData, P>>;
+	useFormattedValue: <P extends Path<RootData>>(options: {
+		path: Accessor<P>;
+		format?: Format;
+		data: Accessor<PathValue<RootData, P>>;
+	}) => Accessor<PathValue<RootData, P>>;
+};
+export type ContextHooks<RootData = any> = ReturnType<typeof makeFullPropertyPathContext<RootData>>;
+export type BaseOptions<RootData = any, Props = any> = {
+	useRootData: (element: ICustomElement & HTMLElement) => Accessor<PathValue<RootData, any>>;
+	hooks: ContextHooks<RootData>;
+	name: string;
+	Component?: CorrectComponentType<Props>;
+};
+export declare const makePathDataComponent: <RootData = any, Props = any>({ useRootData, hooks, name, }: BaseOptions<RootData>) => CorrectComponentType<{
+	propertyName: Path<RootData>;
+	format?: Format;
+} & Props>;
+export declare const makePathDataArrayComponent: <RootData = any, Props = any>({ useRootData, hooks, name, arrayItemName, }: BaseOptions<RootData> & {
+	arrayItemName: string;
+}) => CorrectComponentType<{
+	arrayPath: Path<RootData>;
+	format?: Format;
+} & Props>;
+export declare const makePathDataArrayItemComponent: <RootData = any, Props extends {
+	itemIndex: Path<RootData>;
+} = any>({ hooks, name, }: BaseOptions<RootData, Props>) => CorrectComponentType<Props>;
 
 export {};

package/dist/main/index.js

@@ -2,5 +2,6 @@ export * from './focusTrap/index.js';
 export * from './promise/index.js';
 export * from './animation/index.js';
 export * from './utils/index.js';
+export * from './hooks/index.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/main/utils/formatValue.js

@@ -0,0 +1,22 @@
+function formatValue(format, value) {
+  switch (format) {
+    case "currency":
+      if (typeof value === "number") return window.Shopify.formatMoney(value);
+      if (typeof value === "string")
+        return window.Shopify.formatMoney(parseFloat(value));
+      console.warn("formatValue: Unsupported value type for currency format.");
+      return window.Shopify.formatMoney(0);
+    case "number":
+      return Number(value);
+    case "boolean":
+      return Boolean(value);
+    case "invert_boolean":
+      return !Boolean(value);
+    default:
+      return value;
+  }
+}
+
+export { formatValue };
+//# sourceMappingURL=formatValue.js.map
+//# sourceMappingURL=formatValue.js.map

package/dist/main/utils/formatValue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/formatValue.ts"],"names":[],"mappings":"AAOO,SAAS,WAAA,CAAY,QAAgB,KAAgB,EAAA;AAC1D,EAAA,QAAQ,MAAQ;AAAA,IACd,KAAK,UAAA;AACH,MAAA,IAAI,OAAO,KAAU,KAAA,QAAA,SAAiB,MAAO,CAAA,OAAA,CAAQ,YAAY,KAAK,CAAA;AACtE,MAAA,IAAI,OAAO,KAAU,KAAA,QAAA;AACnB,QAAA,OAAO,MAAO,CAAA,OAAA,CAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CAAC,CAAA;AACrD,MAAA,OAAA,CAAQ,KAAK,0DAA0D,CAAA;AACvE,MAAO,OAAA,MAAA,CAAO,OAAQ,CAAA,WAAA,CAAY,CAAC,CAAA;AAAA,IACrC,KAAK,QAAA;AACH,MAAA,OAAO,OAAO,KAAK,CAAA;AAAA,IACrB,KAAK,SAAA;AACH,MAAA,OAAO,QAAQ,KAAK,CAAA;AAAA,IACtB,KAAK,gBAAA;AACH,MAAO,OAAA,CAAC,QAAQ,KAAK,CAAA;AAAA,IACvB;AACE,MAAO,OAAA,KAAA;AAAA;AAEb","file":"formatValue.js","sourcesContent":["export type Format =\n  | \"currency\"\n  | \"number\"\n  | \"boolean\"\n  | \"invert_boolean\"\n  | string;\n\nexport function formatValue(format: Format, value: unknown) {\n  switch (format) {\n    case \"currency\":\n      if (typeof value === \"number\") return window.Shopify.formatMoney(value);\n      if (typeof value === \"string\")\n        return window.Shopify.formatMoney(parseFloat(value));\n      console.warn(\"formatValue: Unsupported value type for currency format.\");\n      return window.Shopify.formatMoney(0);\n    case \"number\":\n      return Number(value);\n    case \"boolean\":\n      return Boolean(value);\n    case \"invert_boolean\":\n      return !Boolean(value);\n    default:\n      return value as any;\n  }\n}\n\ndeclare global {\n  interface Window {\n    Shopify: {\n      formatMoney(value: number, currency?: string): string;\n    };\n  }\n}\n"]}

package/dist/main/utils/getTemplateContent.js

@@ -0,0 +1,11 @@
+function getTemplateContent(element, state) {
+  const tmpl = element.querySelector(
+    `template[${state}]`
+  );
+  if (!tmpl) return null;
+  return tmpl.content;
+}
+
+export { getTemplateContent };
+//# sourceMappingURL=getTemplateContent.js.map
+//# sourceMappingURL=getTemplateContent.js.map

package/dist/main/utils/getTemplateContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/getTemplateContent.ts"],"names":[],"mappings":"AAAO,SAAS,kBAAA,CAAmB,SAAsB,KAAe,EAAA;AACtE,EAAA,MAAM,OAAO,OAAQ,CAAA,aAAA;AAAA,IACnB,YAAY,KAAK,CAAA,CAAA;AAAA,GACnB;AACA,EAAI,IAAA,CAAC,MAAa,OAAA,IAAA;AAClB,EAAA,OAAO,IAAK,CAAA,OAAA;AACd","file":"getTemplateContent.js","sourcesContent":["export function getTemplateContent(element: HTMLElement, state: string) {\n  const tmpl = element.querySelector(\n    `template[${state}]`,\n  ) as HTMLTemplateElement;\n  if (!tmpl) return null;\n  return tmpl.content;\n}\n"]}

package/dist/main/utils/index.d.ts

@@ -22,5 +22,8 @@ export declare function invokeOnLoaded(fn: () => void, { signal }: {
  * Creates a HOF to ensure that a given callback is invoked only after the context for the element is ready.
  * */
 export declare function createWithElementContext<Context extends ReturnType<typeof createContext>, ContextState = null>(context: Context): <D extends any>(target: string | Accessor<string> | Accessor<() => Element>, dependencies: Accessor<D> | undefined, cb: (context: ContextState, dependencies: D) => void | (() => void)) => void;
+export type Format = "currency" | "number" | "boolean" | "invert_boolean" | string;
+export declare function formatValue(format: Format, value: unknown): any;
+export declare function getTemplateContent(element: HTMLElement, state: string): DocumentFragment | null;
 
 export {};

package/dist/main/utils/index.js

@@ -5,5 +5,7 @@ export * from './getContextFromProvider.js';
 export * from './checkLoaded.js';
 export * from './invokeOnLoaded.js';
 export * from './createWithElementContext.js';
+export * from './formatValue.js';
+export * from './getTemplateContent.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brytdesigns/web-component-core",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Web component core utilities for building solid based web components",
   "main": "./dist/main/index.js",
   "module": "./dist/main/index.js",
@@ -26,6 +26,10 @@
     "./utils": {
       "types": "./dist/main/utils/index.d.ts",
       "module": "./dist/main/utils/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/main/hooks/index.d.ts",
+      "module": "./dist/main/hooks/index.js"
     }
   },
   "files": [
@@ -38,7 +42,7 @@
     "component-register": "^0.8.7",
     "focus-trap": "^7.6.4",
     "motion": "^12.18.1",
-    "solid-js": "^1.9.7"
+    "solid-js": "^1.9.9"
   },
   "devDependencies": {
     "dts-bundle-generator": "^9.5.1",