@brytdesigns/web-component-parallax 1.1.1 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/esm/index.js +4 -2
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/main/components/parallax-animation/index.js.map +1 -1
  4. package/dist/main/components/parallax-container/index.js.map +1 -1
  5. package/dist/main/components/parallax-sticky-layer/index.js.map +1 -1
  6. package/dist/main/hooks/useParallax.js +3 -2
  7. package/dist/main/hooks/useParallax.js.map +1 -1
  8. package/dist/main/hooks/useParallaxStickyLayer.js +3 -2
  9. package/dist/main/hooks/useParallaxStickyLayer.js.map +1 -1
  10. package/dist/main/index.d.ts +15 -0
  11. package/dist/main/index.js +2 -2
  12. package/dist/main/index.js.map +1 -1
  13. package/package.json +2 -3
  14. package/dist/main/consts.js +0 -16
  15. package/dist/main/consts.js.map +0 -1
package/dist/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { customShadowlessElement, correctElementType, getContextFromProvider } from '@brytdesigns/web-component-utils';
1
+ import { createWithElementContext, customShadowlessElement, correctElementType, getContextFromProvider } from '@brytdesigns/web-component-core/utils';
2
2
  import { splitProps, createEffect, batch, onCleanup, mergeProps, createMemo } from 'solid-js';
3
3
  import { createStore } from 'solid-js/store';
4
4
  import { createContext, consume, provide } from 'component-register';
@@ -82,6 +82,7 @@ var useParallax = (element) => {
82
82
  }
83
83
  return useParallaxContext(context);
84
84
  };
85
+ var withParallaxElementContext = createWithElementContext(ParallaxContextState);
85
86
  var getParallaxContext = (element) => {
86
87
  const context = getContextFromProvider(
87
88
  ParallaxContextState,
@@ -220,6 +221,7 @@ var useParallaxStickyLayer = (element) => {
220
221
  }
221
222
  return useParallaxStickyLayerContext(context);
222
223
  };
224
+ var withParallaxStickyLayerContext = createWithElementContext(ParallaxStickyLayerContextState);
223
225
  var getParallaxStickyLayerContext = (element) => {
224
226
  const context = getContextFromProvider(
225
227
  ParallaxStickyLayerContextState,
@@ -489,6 +491,6 @@ customShadowlessElement(
489
491
  correctElementType(parallax_animation_exports.Component)
490
492
  );
491
493
 
492
- export { getParallaxContext, getParallaxStickyLayerContext, useParallax, useParallaxStickyLayer };
494
+ export { getParallaxContext, getParallaxStickyLayerContext, useParallax, useParallaxStickyLayer, withParallaxElementContext, withParallaxStickyLayerContext };
493
495
  //# sourceMappingURL=index.js.map
494
496
  //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/parallax-container/index.ts","../../src/hooks/useParallax.ts","../../src/utils.ts","../../src/hooks/useParallaxStickyLayer.ts","../../src/components/parallax-sticky-layer/index.ts","../../src/components/parallax-animation/index.ts","../../src/index.ts"],"names":["info","splitProps","motionValue","transform","isInRange","createEffect","mTransform","onCleanup","createContext","mergeProps","provide","consume","getContextFromProvider","Component","Name","messages","animate","createStore","active","props","unsub","transformValue","frame","_"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\nimport { provideParallaxContext } from \"../../hooks/index.js\";\n\ntype ParallaxContainerProps = {\n maxPages: number;\n};\n\nexport const Name = `parallax-container`;\n\nexport const Component: CorrectComponentType<ParallaxContainerProps> = (\n props,\n { element },\n) => {\n if (!props.maxPages)\n return console.warn(\n `${Name}: requires max-pages attribute to be set!`,\n element,\n );\n if (props.maxPages < 1)\n return console.warn(\n `${Name}: max-pages must be greater than or equal to 1!`,\n element,\n );\n provideParallaxContext(props, element);\n};\n","import {\n onCleanup,\n createEffect,\n splitProps,\n mergeProps,\n batch,\n} from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\nimport { getContextFromProvider } from \"@brytdesigns/web-component-utils\";\nimport {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport { scroll, motionValue } from \"motion\";\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n maxPages: number;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ParallaxContext = ReturnType<typeof initializeParallaxContext>;\n\nfunction initializeParallaxContext(props: CreateContextOptions) {\n const [_internal, _state] = splitProps(props, [\"root\"]);\n\n const scrollYProgress = motionValue(-1);\n const scrollY = motionValue(-1);\n const [info, setInfo] = createStore({\n offset: [-1, -1],\n scrollLength: -1,\n });\n\n createEffect(() => {\n const pages = _state.maxPages;\n\n _internal.root.style.height = `${pages * 100}vh`;\n _internal.root.style.width = `100%`;\n _internal.root.style.position = \"relative\";\n if (!_internal.root.style.display) {\n _internal.root.style.display = \"block\";\n }\n\n const remove = scroll(\n (_, info) => {\n const { y } = info;\n\n scrollYProgress.set(y.progress);\n scrollY.set(y.current);\n batch(() => {\n setInfo(\"offset\", 0, y.offset?.at(0) || 0);\n setInfo(\"offset\", 1, y.offset?.at(1) || 0);\n setInfo(\"scrollLength\", y.scrollLength);\n });\n },\n {\n target: _internal.root,\n axis: \"y\",\n offset: [\"start start\", \"end end\"],\n },\n );\n\n onCleanup(() => {\n if (remove) {\n remove();\n }\n scrollYProgress.destroy();\n scrollY.destroy();\n });\n });\n\n return mergeProps(_state, {\n scrollYProgress,\n scrollY,\n info,\n });\n}\n\nconst ParallaxContextState = createContext(initializeParallaxContext);\n\nexport const provideParallaxContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): ParallaxContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(ParallaxContextState, props, element);\n};\n\nexport const useParallaxContext = (context: ParallaxContext) => {\n return context;\n};\n\nexport const useParallax = (element: HTMLElement & ICustomElement) => {\n const context: ParallaxContext = consume(ParallaxContextState, element);\n\n if (!context) {\n throw console.error(\n \"ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.\",\n );\n }\n\n return useParallaxContext(context);\n};\n\nexport const getParallaxContext = (element: Element) => {\n const context = getContextFromProvider<ParallaxContext>(\n ParallaxContextState,\n element,\n );\n return useParallaxContext(context);\n};\n","export function normalizeTuple(range: [number, number], max: number) {\n if (max <= 1) {\n throw new Error(\"The maximum value must be greater than 1.\");\n }\n\n const [start, end] = range;\n const normalizedStart = (start - 1) / (max - 1);\n const normalizedEnd = (end - 1) / (max - 1);\n\n return [normalizedStart, normalizedEnd] as const;\n}\n\nexport function isInRange({\n range: [start, end],\n value,\n}: {\n range: [number, number];\n value: number;\n}) {\n return start <= value && end >= value;\n}\n\nexport function getLastMatchingMediaQueryIndex(queries: string[]): number {\n let lastMatchIndex = -1;\n\n for (let i = 0; i < queries.length; i++) {\n const query = queries[i];\n if (typeof query !== \"string\") continue;\n if (window.matchMedia(query).matches) {\n lastMatchIndex = i;\n }\n }\n\n return lastMatchIndex;\n}\n\nexport function getActiveBreakpoints(queries: string[]): boolean[] {\n return queries.map((query) => window.matchMedia(query).matches);\n}\n\nexport function getLastTruthyIndex(values: boolean[]): number {\n for (let i = values.length - 1; i >= 0; i--) {\n if (values[i]) return i;\n }\n return -1;\n}\nexport function getLastValidValue<T>(\n arr: (T | null)[],\n index: number,\n): T | null {\n if (arr[index] != null) return arr[index]!;\n\n for (let i = index - 1; i >= 0; i--) {\n if (arr[i] != null) return arr[i]!;\n }\n\n return null;\n}\n","import { onCleanup, createEffect, splitProps, mergeProps } from \"solid-js\";\nimport { getContextFromProvider } from \"@brytdesigns/web-component-utils\";\nimport {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport {\n motionValue,\n transformValue,\n transform as mTransform,\n frame,\n animate,\n type AnimationPlaybackControlsWithThen,\n} from \"motion\";\nimport { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\nimport { abortablePromise } from \"@brytdesigns/web-component-core/promise\";\nimport { useParallax } from \"./useParallax\";\nimport { normalizeTuple, isInRange } from \"../utils\";\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n start: number;\n end: number;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ParallaxStickyLayerContext = ReturnType<\n typeof initializeParallaxStickyLayerContext\n>;\n\nfunction initializeParallaxStickyLayerContext(props: CreateContextOptions) {\n const [_internal, _state] = splitProps(props, [\"root\", \"start\", \"end\"]);\n const parallax = useParallax(_internal.root);\n\n const progress = motionValue(-1);\n const inRange = motionValue(false);\n const belowRange = motionValue(false);\n const aboveRange = motionValue(false);\n\n const position = transformValue(() =>\n inRange.get() ? \"sticky\" : \"absolute\",\n );\n const transform = transformValue(() => {\n const isInRange = inRange.get();\n const isBelowRange = belowRange.get();\n const isAboveRange = aboveRange.get();\n if (isInRange) return \"none\";\n if (isBelowRange) return `translate(0px, ${(_internal.start - 1) * 100}%)`;\n if (isAboveRange) return `translate(0px, ${(_internal.end - 1) * 100}%)`;\n });\n const animations = motionValue<AnimationPlaybackControlsWithThen[]>([]);\n\n const styles = transformValue(() => ({\n position: position.get(),\n transform: transform.get(),\n }));\n\n _internal.root.style.top = \"0\";\n _internal.root.style.right = \"0\";\n _internal.root.style.bottom = \"0\";\n _internal.root.style.left = \"0\";\n _internal.root.style.height = \"100vh\";\n _internal.root.style.overflowX = \"hidden\";\n _internal.root.style.maxWidth = \"100%\";\n if (window.getComputedStyle(_internal.root).display === \"inline\") {\n _internal.root.style.display = \"block\";\n }\n\n createEffect(() => {\n const range = [_internal.start, _internal.end];\n const maxPages = parallax.maxPages;\n const normalizedRange = normalizeTuple(range as any, maxPages);\n const [normStart, normEnd] = normalizedRange;\n const transformer = mTransform(normalizedRange as any, [0, 1]);\n\n const unsubscribe = parallax.scrollYProgress.on(\"change\", (value) => {\n inRange.set(isInRange({ range: normalizedRange as any, value }));\n belowRange.set(value <= normStart);\n aboveRange.set(value >= normEnd);\n progress.set(transformer(value));\n });\n\n return onCleanup(() => {\n unsubscribe();\n });\n });\n\n function updateStyles() {\n const s = styles.get();\n _internal.root.style.position = s.position;\n _internal.root.style.transform = s.transform;\n }\n\n function renderStyles() {\n frame.render(updateStyles);\n }\n\n function waitForAnimations() {\n const a = animations.get();\n const controller = new AbortController();\n abortablePromise(awaitAllAnimations(a), controller.signal).then(() => {\n animations.set([]);\n renderStyles();\n });\n }\n\n const unsubStyles = styles.on(\"change\", (_) => {\n if (progress.get() === 1 || progress.get() === 0)\n return waitForAnimations();\n animations.set([]);\n renderStyles();\n });\n\n function _animate(...args: Parameters<typeof animate>) {\n const animation = animate(...args);\n animations.set([...animations.get(), animation]);\n return animation;\n }\n\n onCleanup(() => {\n unsubStyles();\n });\n\n return [progress, { animate: _animate }] as const;\n}\n\nconst ParallaxStickyLayerContextState = createContext(\n initializeParallaxStickyLayerContext,\n);\n\nexport const provideParallaxStickyLayerContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): ParallaxStickyLayerContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(ParallaxStickyLayerContextState, props, element);\n};\n\nexport const useParallaxStickyLayerContext = (\n context: ParallaxStickyLayerContext,\n) => {\n return context;\n};\n\nexport const useParallaxStickyLayer = (\n element: HTMLElement & ICustomElement,\n) => {\n const context: ParallaxStickyLayerContext = consume(\n ParallaxStickyLayerContextState,\n element,\n );\n\n if (!context) {\n throw console.error(\n \"ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.\",\n );\n }\n\n return useParallaxStickyLayerContext(context);\n};\n\nexport const getParallaxStickyLayerContext = (element: Element) => {\n const context = getContextFromProvider<ParallaxStickyLayerContext>(\n ParallaxStickyLayerContextState,\n element,\n );\n return useParallaxStickyLayerContext(context);\n};\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\nimport { provideParallaxStickyLayerContext } from \"../../hooks/index.js\";\n\ntype StickyParallaxLayerProps = {\n start: number;\n end: number;\n};\n\nexport const Name = `parallax-sticky-layer`;\n\nexport const Component: CorrectComponentType<StickyParallaxLayerProps> = (\n props,\n { element },\n) => {\n if (!props.start)\n return console.warn(\n `${Name}: requires start attribute to be set!`,\n element,\n );\n if (!props.end)\n return console.warn(`${Name}: requires end attribute to be set!`, element);\n if (props.end <= props.start)\n return console.warn(\n `${Name}: the start attribute must be less than the end attribute!`,\n element,\n );\n if (props.start < 1 || props.end < 1)\n return console.warn(\n `${Name}: The start and end attributes must be greater than or equal to 1!`,\n element,\n );\n provideParallaxStickyLayerContext(props, element);\n};\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\nimport {\n onCleanup,\n createEffect,\n createMemo,\n splitProps,\n mergeProps,\n} from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\nimport {\n motionValue,\n transformValue,\n transform as mTransform,\n styleEffect,\n frame,\n type MotionValue,\n} from \"motion\";\n\nimport { useParallaxStickyLayer } from \"../../hooks/index.js\";\nimport { getActiveBreakpoints, getLastTruthyIndex } from \"../../utils.js\";\n\ntype AnimatableArray = Array<string | number> | null;\n\ntype Props = {\n breakpoints: string[];\n range: number[] | number[][];\n y: AnimatableArray | AnimatableArray[];\n x: AnimatableArray | AnimatableArray[];\n scale: AnimatableArray | AnimatableArray[];\n rotate: AnimatableArray | AnimatableArray[];\n opacity: AnimatableArray | AnimatableArray[];\n backgroundColor: AnimatableArray | AnimatableArray[];\n borderRadius: AnimatableArray | AnimatableArray[];\n};\n\ntype ActiveProps = {\n range: number[];\n y: AnimatableArray;\n x: AnimatableArray;\n scale: AnimatableArray;\n rotate: AnimatableArray;\n opacity: AnimatableArray;\n backgroundColor: AnimatableArray;\n borderRadius: AnimatableArray;\n};\n\nfunction keysFromObject<T extends object>(object: T): (keyof T)[] {\n return Object.keys(object) as (keyof T)[];\n}\n\nexport const Name = `parallax-animation`;\n\nexport const PROPS = {\n breakpoints: [\"\"],\n range: [0, 1],\n y: null,\n x: null,\n scale: null,\n rotate: null,\n opacity: null,\n color: null,\n backgroundColor: null,\n borderRadius: null,\n};\n\nconst PROP_DEFAULTS = {\n y: \"0%\",\n x: \"0%\",\n scale: 1,\n rotate: 0,\n opacity: null,\n color: null,\n backgroundColor: null,\n borderRadius: null,\n};\n\nconst KEYS = Object.keys(PROPS);\n\nconst isNestedAnimatableArray = (\n values: AnimatableArray | AnimatableArray[],\n): values is AnimatableArray[] => {\n return (\n Array.isArray(values) && (Array.isArray(values[0]) || values[0] === null)\n );\n};\n\nconst isAnimatableArray = (\n values: AnimatableArray | AnimatableArray[],\n): values is AnimatableArray => {\n return Array.isArray(values) && !Array.isArray(values[0]);\n};\n\nconst flattenAnimatableArray = (\n value: AnimatableArray | AnimatableArray[],\n index: number = 0,\n) => {\n if (isNestedAnimatableArray(value)) {\n return value[index]!;\n }\n return value;\n};\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n if (\n Object.keys(props).some(\n (key) => KEYS.includes(key) && !Array.isArray(Reflect.get(props, key)),\n )\n )\n return console.warn(\n `parallax-animate: At least one of ${KEYS.join(\",\")} properties is required and must be an array of values!`,\n element,\n );\n\n const messages = Object.entries(props).reduce((messages, [key, value]) => {\n if (!KEYS.includes(key)) return messages;\n if (value && value.length !== props.range.length) {\n return messages.concat(\n `${key} attribute must have the same length as range attribute!`,\n );\n }\n return messages;\n }, [] as string[]);\n\n if (messages.length)\n return console.warn(\n element,\n `\\nparallax-animate: Please fix the following issues:\\n${messages.join(\"\\n\")}`,\n );\n\n const [progress, { animate }] = useParallaxStickyLayer(element);\n\n const [activeBreakpoints, setActiveBreakpoints] = createStore<boolean[]>(\n getActiveBreakpoints(props.breakpoints),\n );\n const activeBreakpointIndex = createMemo(() =>\n getLastTruthyIndex(activeBreakpoints),\n );\n\n const [_, importantProps] = splitProps(props, [\"breakpoints\"]);\n const animateableProps = mergeProps(importantProps, {});\n\n const activeProps = createMemo<ActiveProps>(() => {\n const index = activeBreakpointIndex();\n\n if (index === -1) {\n const { breakpoints, ...active } = PROPS;\n return active;\n }\n\n const keys = keysFromObject(animateableProps);\n\n const active = keys.reduce((active, key) => {\n const value = animateableProps[key];\n if (isNestedAnimatableArray(value)) {\n const flattenedValue = flattenAnimatableArray(value, index);\n return {\n ...active,\n [key]: flattenedValue,\n };\n }\n return {\n ...active,\n [key]: value,\n };\n }, {} as ActiveProps);\n\n return active;\n });\n\n createEffect(() => {\n const breakpoints = props.breakpoints;\n const controller = new AbortController();\n\n for (let i = 0; i < breakpoints.length; i++) {\n const query = breakpoints[i];\n if (!query) continue;\n const mediaQuery = window.matchMedia(query);\n mediaQuery.addEventListener(\n \"change\",\n (e) => setActiveBreakpoints(i, e.matches),\n { signal: controller.signal },\n );\n }\n\n return onCleanup(() => {\n controller.abort();\n });\n });\n\n element.style.willChange = \"transform\";\n if (\n window.getComputedStyle(element).getPropertyValue(\"display\") === \"inline\"\n ) {\n element.style.display = \"block\";\n }\n\n createEffect(() => {\n const active = activeProps();\n const { range, ...props } = active;\n const valueSubscribers: VoidFunction[] = [];\n\n const progressValue = Object.keys(PROP_DEFAULTS).reduce(\n (values, key) => {\n const fallback = Reflect.get(PROP_DEFAULTS, key);\n const valueRange = Reflect.get(props, key);\n if (valueRange?.length === range.length) {\n const transform = mTransform(range, valueRange);\n const value = motionValue(transform(progress.get()));\n const unsub = progress.on(\"change\", (latest) => {\n value.set(transform(latest));\n });\n valueSubscribers.push(unsub);\n values[key] = value;\n } else values[key] = fallback;\n return values;\n },\n {} as Record<string, any>,\n );\n\n const animated = Object.keys(progressValue).reduce(\n (obj, key) => {\n const v = progressValue[key];\n Reflect.set(\n obj,\n key,\n motionValue(typeof v === \"object\" && v !== null ? v.get() : v),\n );\n return obj;\n },\n {} as Record<string, MotionValue>,\n );\n\n const transform = transformValue(\n () =>\n `translate(${animated.x?.get()}, ${animated.y?.get()}) scale(${animated.scale?.get()}) rotate(${animated.rotate?.get()}deg)`,\n );\n\n function animateValues() {\n const sequence = Object.keys(animated)\n .map((key) => {\n let v = progressValue[key]?.get?.();\n if (typeof v === \"undefined\") return null;\n return [animated[key], v, { at: \"<\" }];\n })\n .filter((v) => v !== null);\n //@ts-ignore\n animate(sequence);\n }\n\n function scheduleAnimation() {\n frame.update(animateValues);\n }\n\n const unsub = progress.on(\"change\", (_) => {\n scheduleAnimation();\n });\n\n const styledValues = Object.keys(animated)\n .filter(\n (key) =>\n key !== \"y\" && key !== \"x\" && key !== \"rotate\" && key !== \"scale\",\n )\n .reduce((obj, key) => {\n Reflect.set(obj, key, animated[key]);\n return obj;\n }, {});\n\n const unstyle = styleEffect(element, {\n transform,\n ...styledValues,\n });\n\n return onCleanup(() => {\n unstyle();\n unsub();\n valueSubscribers.forEach((unsub) => unsub());\n Object.values(animated).forEach((value) => {\n value.destroy();\n });\n Object.values(progressValue).forEach((value) => {\n value?.destroy?.();\n });\n transform.destroy();\n });\n });\n};\n","import {\n customShadowlessElement,\n correctElementType,\n} from \"@brytdesigns/web-component-utils\";\n\nimport {\n ParallaxContainer,\n ParallaxStickyLayer,\n ParallaxAnimation,\n} from \"./components/index.js\";\n\ncustomShadowlessElement(\n ParallaxContainer.Name,\n {\n maxPages: 2,\n },\n correctElementType(ParallaxContainer.Component),\n);\n\ncustomShadowlessElement(\n ParallaxStickyLayer.Name,\n {\n start: 1,\n end: 2,\n },\n correctElementType(ParallaxStickyLayer.Component),\n);\n\ncustomShadowlessElement(\n ParallaxAnimation.Name,\n ParallaxAnimation.PROPS,\n correctElementType(ParallaxAnimation.Component),\n);\n\nexport {\n useParallax,\n getParallaxContext,\n useParallaxStickyLayer,\n getParallaxStickyLayerContext,\n} from \"./hooks/index.js\";\n"]}
1
+ {"version":3,"sources":["../../src/components/parallax-container/index.ts","../../src/hooks/useParallax.ts","../../src/utils.ts","../../src/hooks/useParallaxStickyLayer.ts","../../src/components/parallax-sticky-layer/index.ts","../../src/components/parallax-animation/index.ts","../../src/index.ts"],"names":["info","splitProps","motionValue","transform","isInRange","createEffect","mTransform","onCleanup","createContext","mergeProps","provide","consume","createWithElementContext","getContextFromProvider","Component","Name","messages","animate","createStore","active","props","unsub","transformValue","frame","_"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { provideParallaxContext } from \"../../hooks/index.js\";\n\ntype ParallaxContainerProps = {\n maxPages: number;\n};\n\nexport const Name = `parallax-container`;\n\nexport const Component: CorrectComponentType<ParallaxContainerProps> = (\n props,\n { element },\n) => {\n if (!props.maxPages)\n return console.warn(\n `${Name}: requires max-pages attribute to be set!`,\n element,\n );\n if (props.maxPages < 1)\n return console.warn(\n `${Name}: max-pages must be greater than or equal to 1!`,\n element,\n );\n provideParallaxContext(props, element);\n};\n","import {\n onCleanup,\n createEffect,\n splitProps,\n mergeProps,\n batch,\n} from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\nimport {\n getContextFromProvider,\n createWithElementContext,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport { scroll, motionValue } from \"motion\";\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n maxPages: number;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ParallaxContext = ReturnType<typeof initializeParallaxContext>;\n\nfunction initializeParallaxContext(props: CreateContextOptions) {\n const [_internal, _state] = splitProps(props, [\"root\"]);\n\n const scrollYProgress = motionValue(-1);\n const scrollY = motionValue(-1);\n const [info, setInfo] = createStore({\n offset: [-1, -1],\n scrollLength: -1,\n });\n\n createEffect(() => {\n const pages = _state.maxPages;\n\n _internal.root.style.height = `${pages * 100}vh`;\n _internal.root.style.width = `100%`;\n _internal.root.style.position = \"relative\";\n if (!_internal.root.style.display) {\n _internal.root.style.display = \"block\";\n }\n\n const remove = scroll(\n (_, info) => {\n const { y } = info;\n\n scrollYProgress.set(y.progress);\n scrollY.set(y.current);\n batch(() => {\n setInfo(\"offset\", 0, y.offset?.at(0) || 0);\n setInfo(\"offset\", 1, y.offset?.at(1) || 0);\n setInfo(\"scrollLength\", y.scrollLength);\n });\n },\n {\n target: _internal.root,\n axis: \"y\",\n offset: [\"start start\", \"end end\"],\n },\n );\n\n onCleanup(() => {\n if (remove) {\n remove();\n }\n scrollYProgress.destroy();\n scrollY.destroy();\n });\n });\n\n return mergeProps(_state, {\n scrollYProgress,\n scrollY,\n info,\n });\n}\n\nconst ParallaxContextState = createContext(initializeParallaxContext);\n\nexport const provideParallaxContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): ParallaxContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(ParallaxContextState, props, element);\n};\n\nexport const useParallaxContext = (context: ParallaxContext) => {\n return context;\n};\n\nexport const useParallax = (element: HTMLElement & ICustomElement) => {\n const context: ParallaxContext = consume(ParallaxContextState, element);\n\n if (!context) {\n throw console.error(\n \"ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.\",\n );\n }\n\n return useParallaxContext(context);\n};\n\nexport const withParallaxElementContext = createWithElementContext<\n typeof ParallaxContextState,\n ParallaxContext\n>(ParallaxContextState);\n\nexport const getParallaxContext = (element: Element) => {\n const context = getContextFromProvider<ParallaxContext>(\n ParallaxContextState,\n element,\n );\n return useParallaxContext(context);\n};\n","export function normalizeTuple(range: [number, number], max: number) {\n if (max <= 1) {\n throw new Error(\"The maximum value must be greater than 1.\");\n }\n\n const [start, end] = range;\n const normalizedStart = (start - 1) / (max - 1);\n const normalizedEnd = (end - 1) / (max - 1);\n\n return [normalizedStart, normalizedEnd] as const;\n}\n\nexport function isInRange({\n range: [start, end],\n value,\n}: {\n range: [number, number];\n value: number;\n}) {\n return start <= value && end >= value;\n}\n\nexport function getLastMatchingMediaQueryIndex(queries: string[]): number {\n let lastMatchIndex = -1;\n\n for (let i = 0; i < queries.length; i++) {\n const query = queries[i];\n if (typeof query !== \"string\") continue;\n if (window.matchMedia(query).matches) {\n lastMatchIndex = i;\n }\n }\n\n return lastMatchIndex;\n}\n\nexport function getActiveBreakpoints(queries: string[]): boolean[] {\n return queries.map((query) => window.matchMedia(query).matches);\n}\n\nexport function getLastTruthyIndex(values: boolean[]): number {\n for (let i = values.length - 1; i >= 0; i--) {\n if (values[i]) return i;\n }\n return -1;\n}\nexport function getLastValidValue<T>(\n arr: (T | null)[],\n index: number,\n): T | null {\n if (arr[index] != null) return arr[index]!;\n\n for (let i = index - 1; i >= 0; i--) {\n if (arr[i] != null) return arr[i]!;\n }\n\n return null;\n}\n","import { onCleanup, createEffect, splitProps, mergeProps } from \"solid-js\";\nimport {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport {\n motionValue,\n transformValue,\n transform as mTransform,\n frame,\n animate,\n type AnimationPlaybackControlsWithThen,\n} from \"motion\";\nimport { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\nimport { abortablePromise } from \"@brytdesigns/web-component-core/promise\";\nimport {\n getContextFromProvider,\n createWithElementContext,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport { useParallax } from \"./useParallax\";\nimport { normalizeTuple, isInRange } from \"../utils\";\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n start: number;\n end: number;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ParallaxStickyLayerContext = ReturnType<\n typeof initializeParallaxStickyLayerContext\n>;\n\nfunction initializeParallaxStickyLayerContext(props: CreateContextOptions) {\n const [_internal, _state] = splitProps(props, [\"root\", \"start\", \"end\"]);\n const parallax = useParallax(_internal.root);\n\n const progress = motionValue(-1);\n const inRange = motionValue(false);\n const belowRange = motionValue(false);\n const aboveRange = motionValue(false);\n\n const position = transformValue(() =>\n inRange.get() ? \"sticky\" : \"absolute\",\n );\n const transform = transformValue(() => {\n const isInRange = inRange.get();\n const isBelowRange = belowRange.get();\n const isAboveRange = aboveRange.get();\n if (isInRange) return \"none\";\n if (isBelowRange) return `translate(0px, ${(_internal.start - 1) * 100}%)`;\n if (isAboveRange) return `translate(0px, ${(_internal.end - 1) * 100}%)`;\n });\n const animations = motionValue<AnimationPlaybackControlsWithThen[]>([]);\n\n const styles = transformValue(() => ({\n position: position.get(),\n transform: transform.get(),\n }));\n\n _internal.root.style.top = \"0\";\n _internal.root.style.right = \"0\";\n _internal.root.style.bottom = \"0\";\n _internal.root.style.left = \"0\";\n _internal.root.style.height = \"100vh\";\n _internal.root.style.overflowX = \"hidden\";\n _internal.root.style.maxWidth = \"100%\";\n if (window.getComputedStyle(_internal.root).display === \"inline\") {\n _internal.root.style.display = \"block\";\n }\n\n createEffect(() => {\n const range = [_internal.start, _internal.end];\n const maxPages = parallax.maxPages;\n const normalizedRange = normalizeTuple(range as any, maxPages);\n const [normStart, normEnd] = normalizedRange;\n const transformer = mTransform(normalizedRange as any, [0, 1]);\n\n const unsubscribe = parallax.scrollYProgress.on(\"change\", (value) => {\n inRange.set(isInRange({ range: normalizedRange as any, value }));\n belowRange.set(value <= normStart);\n aboveRange.set(value >= normEnd);\n progress.set(transformer(value));\n });\n\n return onCleanup(() => {\n unsubscribe();\n });\n });\n\n function updateStyles() {\n const s = styles.get();\n _internal.root.style.position = s.position;\n _internal.root.style.transform = s.transform;\n }\n\n function renderStyles() {\n frame.render(updateStyles);\n }\n\n function waitForAnimations() {\n const a = animations.get();\n const controller = new AbortController();\n abortablePromise(awaitAllAnimations(a), controller.signal).then(() => {\n animations.set([]);\n renderStyles();\n });\n }\n\n const unsubStyles = styles.on(\"change\", (_) => {\n if (progress.get() === 1 || progress.get() === 0)\n return waitForAnimations();\n animations.set([]);\n renderStyles();\n });\n\n function _animate(...args: Parameters<typeof animate>) {\n const animation = animate(...args);\n animations.set([...animations.get(), animation]);\n return animation;\n }\n\n onCleanup(() => {\n unsubStyles();\n });\n\n return [progress, { animate: _animate }] as const;\n}\n\nconst ParallaxStickyLayerContextState = createContext(\n initializeParallaxStickyLayerContext,\n);\n\nexport const provideParallaxStickyLayerContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): ParallaxStickyLayerContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(ParallaxStickyLayerContextState, props, element);\n};\n\nexport const useParallaxStickyLayerContext = (\n context: ParallaxStickyLayerContext,\n) => {\n return context;\n};\n\nexport const useParallaxStickyLayer = (\n element: HTMLElement & ICustomElement,\n) => {\n const context: ParallaxStickyLayerContext = consume(\n ParallaxStickyLayerContextState,\n element,\n );\n\n if (!context) {\n throw console.error(\n \"ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.\",\n );\n }\n\n return useParallaxStickyLayerContext(context);\n};\n\nexport const withParallaxStickyLayerContext = createWithElementContext<\n typeof ParallaxStickyLayerContextState,\n ParallaxStickyLayerContext\n>(ParallaxStickyLayerContextState);\n\nexport const getParallaxStickyLayerContext = (element: Element) => {\n const context = getContextFromProvider<ParallaxStickyLayerContext>(\n ParallaxStickyLayerContextState,\n element,\n );\n return useParallaxStickyLayerContext(context);\n};\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { provideParallaxStickyLayerContext } from \"../../hooks/index.js\";\n\ntype StickyParallaxLayerProps = {\n start: number;\n end: number;\n};\n\nexport const Name = `parallax-sticky-layer`;\n\nexport const Component: CorrectComponentType<StickyParallaxLayerProps> = (\n props,\n { element },\n) => {\n if (!props.start)\n return console.warn(\n `${Name}: requires start attribute to be set!`,\n element,\n );\n if (!props.end)\n return console.warn(`${Name}: requires end attribute to be set!`, element);\n if (props.end <= props.start)\n return console.warn(\n `${Name}: the start attribute must be less than the end attribute!`,\n element,\n );\n if (props.start < 1 || props.end < 1)\n return console.warn(\n `${Name}: The start and end attributes must be greater than or equal to 1!`,\n element,\n );\n provideParallaxStickyLayerContext(props, element);\n};\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport {\n onCleanup,\n createEffect,\n createMemo,\n splitProps,\n mergeProps,\n} from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\nimport {\n motionValue,\n transformValue,\n transform as mTransform,\n styleEffect,\n frame,\n type MotionValue,\n} from \"motion\";\n\nimport { useParallaxStickyLayer } from \"../../hooks/index.js\";\nimport { getActiveBreakpoints, getLastTruthyIndex } from \"../../utils.js\";\n\ntype AnimatableArray = Array<string | number> | null;\n\ntype Props = {\n breakpoints: string[];\n range: number[] | number[][];\n y: AnimatableArray | AnimatableArray[];\n x: AnimatableArray | AnimatableArray[];\n scale: AnimatableArray | AnimatableArray[];\n rotate: AnimatableArray | AnimatableArray[];\n opacity: AnimatableArray | AnimatableArray[];\n backgroundColor: AnimatableArray | AnimatableArray[];\n borderRadius: AnimatableArray | AnimatableArray[];\n};\n\ntype ActiveProps = {\n range: number[];\n y: AnimatableArray;\n x: AnimatableArray;\n scale: AnimatableArray;\n rotate: AnimatableArray;\n opacity: AnimatableArray;\n backgroundColor: AnimatableArray;\n borderRadius: AnimatableArray;\n};\n\nfunction keysFromObject<T extends object>(object: T): (keyof T)[] {\n return Object.keys(object) as (keyof T)[];\n}\n\nexport const Name = `parallax-animation`;\n\nexport const PROPS = {\n breakpoints: [\"\"],\n range: [0, 1],\n y: null,\n x: null,\n scale: null,\n rotate: null,\n opacity: null,\n color: null,\n backgroundColor: null,\n borderRadius: null,\n};\n\nconst PROP_DEFAULTS = {\n y: \"0%\",\n x: \"0%\",\n scale: 1,\n rotate: 0,\n opacity: null,\n color: null,\n backgroundColor: null,\n borderRadius: null,\n};\n\nconst KEYS = Object.keys(PROPS);\n\nconst isNestedAnimatableArray = (\n values: AnimatableArray | AnimatableArray[],\n): values is AnimatableArray[] => {\n return (\n Array.isArray(values) && (Array.isArray(values[0]) || values[0] === null)\n );\n};\n\nconst isAnimatableArray = (\n values: AnimatableArray | AnimatableArray[],\n): values is AnimatableArray => {\n return Array.isArray(values) && !Array.isArray(values[0]);\n};\n\nconst flattenAnimatableArray = (\n value: AnimatableArray | AnimatableArray[],\n index: number = 0,\n) => {\n if (isNestedAnimatableArray(value)) {\n return value[index]!;\n }\n return value;\n};\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n if (\n Object.keys(props).some(\n (key) => KEYS.includes(key) && !Array.isArray(Reflect.get(props, key)),\n )\n )\n return console.warn(\n `parallax-animate: At least one of ${KEYS.join(\",\")} properties is required and must be an array of values!`,\n element,\n );\n\n const messages = Object.entries(props).reduce((messages, [key, value]) => {\n if (!KEYS.includes(key)) return messages;\n if (value && value.length !== props.range.length) {\n return messages.concat(\n `${key} attribute must have the same length as range attribute!`,\n );\n }\n return messages;\n }, [] as string[]);\n\n if (messages.length)\n return console.warn(\n element,\n `\\nparallax-animate: Please fix the following issues:\\n${messages.join(\"\\n\")}`,\n );\n\n const [progress, { animate }] = useParallaxStickyLayer(element);\n\n const [activeBreakpoints, setActiveBreakpoints] = createStore<boolean[]>(\n getActiveBreakpoints(props.breakpoints),\n );\n const activeBreakpointIndex = createMemo(() =>\n getLastTruthyIndex(activeBreakpoints),\n );\n\n const [_, importantProps] = splitProps(props, [\"breakpoints\"]);\n const animateableProps = mergeProps(importantProps, {});\n\n const activeProps = createMemo<ActiveProps>(() => {\n const index = activeBreakpointIndex();\n\n if (index === -1) {\n const { breakpoints, ...active } = PROPS;\n return active;\n }\n\n const keys = keysFromObject(animateableProps);\n\n const active = keys.reduce((active, key) => {\n const value = animateableProps[key];\n if (isNestedAnimatableArray(value)) {\n const flattenedValue = flattenAnimatableArray(value, index);\n return {\n ...active,\n [key]: flattenedValue,\n };\n }\n return {\n ...active,\n [key]: value,\n };\n }, {} as ActiveProps);\n\n return active;\n });\n\n createEffect(() => {\n const breakpoints = props.breakpoints;\n const controller = new AbortController();\n\n for (let i = 0; i < breakpoints.length; i++) {\n const query = breakpoints[i];\n if (!query) continue;\n const mediaQuery = window.matchMedia(query);\n mediaQuery.addEventListener(\n \"change\",\n (e) => setActiveBreakpoints(i, e.matches),\n { signal: controller.signal },\n );\n }\n\n return onCleanup(() => {\n controller.abort();\n });\n });\n\n element.style.willChange = \"transform\";\n if (\n window.getComputedStyle(element).getPropertyValue(\"display\") === \"inline\"\n ) {\n element.style.display = \"block\";\n }\n\n createEffect(() => {\n const active = activeProps();\n const { range, ...props } = active;\n const valueSubscribers: VoidFunction[] = [];\n\n const progressValue = Object.keys(PROP_DEFAULTS).reduce(\n (values, key) => {\n const fallback = Reflect.get(PROP_DEFAULTS, key);\n const valueRange = Reflect.get(props, key);\n if (valueRange?.length === range.length) {\n const transform = mTransform(range, valueRange);\n const value = motionValue(transform(progress.get()));\n const unsub = progress.on(\"change\", (latest) => {\n value.set(transform(latest));\n });\n valueSubscribers.push(unsub);\n values[key] = value;\n } else values[key] = fallback;\n return values;\n },\n {} as Record<string, any>,\n );\n\n const animated = Object.keys(progressValue).reduce(\n (obj, key) => {\n const v = progressValue[key];\n Reflect.set(\n obj,\n key,\n motionValue(typeof v === \"object\" && v !== null ? v.get() : v),\n );\n return obj;\n },\n {} as Record<string, MotionValue>,\n );\n\n const transform = transformValue(\n () =>\n `translate(${animated.x?.get()}, ${animated.y?.get()}) scale(${animated.scale?.get()}) rotate(${animated.rotate?.get()}deg)`,\n );\n\n function animateValues() {\n const sequence = Object.keys(animated)\n .map((key) => {\n let v = progressValue[key]?.get?.();\n if (typeof v === \"undefined\") return null;\n return [animated[key], v, { at: \"<\" }];\n })\n .filter((v) => v !== null);\n //@ts-ignore\n animate(sequence);\n }\n\n function scheduleAnimation() {\n frame.update(animateValues);\n }\n\n const unsub = progress.on(\"change\", (_) => {\n scheduleAnimation();\n });\n\n const styledValues = Object.keys(animated)\n .filter(\n (key) =>\n key !== \"y\" && key !== \"x\" && key !== \"rotate\" && key !== \"scale\",\n )\n .reduce((obj, key) => {\n Reflect.set(obj, key, animated[key]);\n return obj;\n }, {});\n\n const unstyle = styleEffect(element, {\n transform,\n ...styledValues,\n });\n\n return onCleanup(() => {\n unstyle();\n unsub();\n valueSubscribers.forEach((unsub) => unsub());\n Object.values(animated).forEach((value) => {\n value.destroy();\n });\n Object.values(progressValue).forEach((value) => {\n value?.destroy?.();\n });\n transform.destroy();\n });\n });\n};\n","import {\n customShadowlessElement,\n correctElementType,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport {\n ParallaxContainer,\n ParallaxStickyLayer,\n ParallaxAnimation,\n} from \"./components/index.js\";\n\ncustomShadowlessElement(\n ParallaxContainer.Name,\n {\n maxPages: 2,\n },\n correctElementType(ParallaxContainer.Component),\n);\n\ncustomShadowlessElement(\n ParallaxStickyLayer.Name,\n {\n start: 1,\n end: 2,\n },\n correctElementType(ParallaxStickyLayer.Component),\n);\n\ncustomShadowlessElement(\n ParallaxAnimation.Name,\n ParallaxAnimation.PROPS,\n correctElementType(ParallaxAnimation.Component),\n);\n\nexport {\n useParallax,\n getParallaxContext,\n useParallaxStickyLayer,\n getParallaxStickyLayerContext,\n withParallaxElementContext,\n withParallaxStickyLayerContext,\n} from \"./hooks/index.js\";\n"]}
package/dist/main/components/parallax-animation/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/parallax-animation/index.ts"],"names":["messages","active","props","transform","mTransform","unsub","_"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\nimport {\n onCleanup,\n createEffect,\n createMemo,\n splitProps,\n mergeProps,\n} from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\nimport {\n motionValue,\n transformValue,\n transform as mTransform,\n styleEffect,\n frame,\n type MotionValue,\n} from \"motion\";\n\nimport { useParallaxStickyLayer } from \"../../hooks/index.js\";\nimport { getActiveBreakpoints, getLastTruthyIndex } from \"../../utils.js\";\n\ntype AnimatableArray = Array<string | number> | null;\n\ntype Props = {\n breakpoints: string[];\n range: number[] | number[][];\n y: AnimatableArray | AnimatableArray[];\n x: AnimatableArray | AnimatableArray[];\n scale: AnimatableArray | AnimatableArray[];\n rotate: AnimatableArray | AnimatableArray[];\n opacity: AnimatableArray | AnimatableArray[];\n backgroundColor: AnimatableArray | AnimatableArray[];\n borderRadius: AnimatableArray | AnimatableArray[];\n};\n\ntype ActiveProps = {\n range: number[];\n y: AnimatableArray;\n x: AnimatableArray;\n scale: AnimatableArray;\n rotate: AnimatableArray;\n opacity: AnimatableArray;\n backgroundColor: AnimatableArray;\n borderRadius: AnimatableArray;\n};\n\nfunction keysFromObject<T extends object>(object: T): (keyof T)[] {\n return Object.keys(object) as (keyof T)[];\n}\n\nexport const Name = `parallax-animation`;\n\nexport const PROPS = {\n breakpoints: [\"\"],\n range: [0, 1],\n y: null,\n x: null,\n scale: null,\n rotate: null,\n opacity: null,\n color: null,\n backgroundColor: null,\n borderRadius: null,\n};\n\nconst PROP_DEFAULTS = {\n y: \"0%\",\n x: \"0%\",\n scale: 1,\n rotate: 0,\n opacity: null,\n color: null,\n backgroundColor: null,\n borderRadius: null,\n};\n\nconst KEYS = Object.keys(PROPS);\n\nconst isNestedAnimatableArray = (\n values: AnimatableArray | AnimatableArray[],\n): values is AnimatableArray[] => {\n return (\n Array.isArray(values) && (Array.isArray(values[0]) || values[0] === null)\n );\n};\n\nconst isAnimatableArray = (\n values: AnimatableArray | AnimatableArray[],\n): values is AnimatableArray => {\n return Array.isArray(values) && !Array.isArray(values[0]);\n};\n\nconst flattenAnimatableArray = (\n value: AnimatableArray | AnimatableArray[],\n index: number = 0,\n) => {\n if (isNestedAnimatableArray(value)) {\n return value[index]!;\n }\n return value;\n};\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n if (\n Object.keys(props).some(\n (key) => KEYS.includes(key) && !Array.isArray(Reflect.get(props, key)),\n )\n )\n return console.warn(\n `parallax-animate: At least one of ${KEYS.join(\",\")} properties is required and must be an array of values!`,\n element,\n );\n\n const messages = Object.entries(props).reduce((messages, [key, value]) => {\n if (!KEYS.includes(key)) return messages;\n if (value && value.length !== props.range.length) {\n return messages.concat(\n `${key} attribute must have the same length as range attribute!`,\n );\n }\n return messages;\n }, [] as string[]);\n\n if (messages.length)\n return console.warn(\n element,\n `\\nparallax-animate: Please fix the following issues:\\n${messages.join(\"\\n\")}`,\n );\n\n const [progress, { animate }] = useParallaxStickyLayer(element);\n\n const [activeBreakpoints, setActiveBreakpoints] = createStore<boolean[]>(\n getActiveBreakpoints(props.breakpoints),\n );\n const activeBreakpointIndex = createMemo(() =>\n getLastTruthyIndex(activeBreakpoints),\n );\n\n const [_, importantProps] = splitProps(props, [\"breakpoints\"]);\n const animateableProps = mergeProps(importantProps, {});\n\n const activeProps = createMemo<ActiveProps>(() => {\n const index = activeBreakpointIndex();\n\n if (index === -1) {\n const { breakpoints, ...active } = PROPS;\n return active;\n }\n\n const keys = keysFromObject(animateableProps);\n\n const active = keys.reduce((active, key) => {\n const value = animateableProps[key];\n if (isNestedAnimatableArray(value)) {\n const flattenedValue = flattenAnimatableArray(value, index);\n return {\n ...active,\n [key]: flattenedValue,\n };\n }\n return {\n ...active,\n [key]: value,\n };\n }, {} as ActiveProps);\n\n return active;\n });\n\n createEffect(() => {\n const breakpoints = props.breakpoints;\n const controller = new AbortController();\n\n for (let i = 0; i < breakpoints.length; i++) {\n const query = breakpoints[i];\n if (!query) continue;\n const mediaQuery = window.matchMedia(query);\n mediaQuery.addEventListener(\n \"change\",\n (e) => setActiveBreakpoints(i, e.matches),\n { signal: controller.signal },\n );\n }\n\n return onCleanup(() => {\n controller.abort();\n });\n });\n\n element.style.willChange = \"transform\";\n if (\n window.getComputedStyle(element).getPropertyValue(\"display\") === \"inline\"\n ) {\n element.style.display = \"block\";\n }\n\n createEffect(() => {\n const active = activeProps();\n const { range, ...props } = active;\n const valueSubscribers: VoidFunction[] = [];\n\n const progressValue = Object.keys(PROP_DEFAULTS).reduce(\n (values, key) => {\n const fallback = Reflect.get(PROP_DEFAULTS, key);\n const valueRange = Reflect.get(props, key);\n if (valueRange?.length === range.length) {\n const transform = mTransform(range, valueRange);\n const value = motionValue(transform(progress.get()));\n const unsub = progress.on(\"change\", (latest) => {\n value.set(transform(latest));\n });\n valueSubscribers.push(unsub);\n values[key] = value;\n } else values[key] = fallback;\n return values;\n },\n {} as Record<string, any>,\n );\n\n const animated = Object.keys(progressValue).reduce(\n (obj, key) => {\n const v = progressValue[key];\n Reflect.set(\n obj,\n key,\n motionValue(typeof v === \"object\" && v !== null ? v.get() : v),\n );\n return obj;\n },\n {} as Record<string, MotionValue>,\n );\n\n const transform = transformValue(\n () =>\n `translate(${animated.x?.get()}, ${animated.y?.get()}) scale(${animated.scale?.get()}) rotate(${animated.rotate?.get()}deg)`,\n );\n\n function animateValues() {\n const sequence = Object.keys(animated)\n .map((key) => {\n let v = progressValue[key]?.get?.();\n if (typeof v === \"undefined\") return null;\n return [animated[key], v, { at: \"<\" }];\n })\n .filter((v) => v !== null);\n //@ts-ignore\n animate(sequence);\n }\n\n function scheduleAnimation() {\n frame.update(animateValues);\n }\n\n const unsub = progress.on(\"change\", (_) => {\n scheduleAnimation();\n });\n\n const styledValues = Object.keys(animated)\n .filter(\n (key) =>\n key !== \"y\" && key !== \"x\" && key !== \"rotate\" && key !== \"scale\",\n )\n .reduce((obj, key) => {\n Reflect.set(obj, key, animated[key]);\n return obj;\n }, {});\n\n const unstyle = styleEffect(element, {\n transform,\n ...styledValues,\n });\n\n return onCleanup(() => {\n unstyle();\n unsub();\n valueSubscribers.forEach((unsub) => unsub());\n Object.values(animated).forEach((value) => {\n value.destroy();\n });\n Object.values(progressValue).forEach((value) => {\n value?.destroy?.();\n });\n transform.destroy();\n });\n });\n};\n"]}
1
+ {"version":3,"sources":["../../../../src/components/parallax-animation/index.ts"],"names":["messages","active","props","transform","mTransform","unsub","_"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport {\n onCleanup,\n createEffect,\n createMemo,\n splitProps,\n mergeProps,\n} from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\nimport {\n motionValue,\n transformValue,\n transform as mTransform,\n styleEffect,\n frame,\n type MotionValue,\n} from \"motion\";\n\nimport { useParallaxStickyLayer } from \"../../hooks/index.js\";\nimport { getActiveBreakpoints, getLastTruthyIndex } from \"../../utils.js\";\n\ntype AnimatableArray = Array<string | number> | null;\n\ntype Props = {\n breakpoints: string[];\n range: number[] | number[][];\n y: AnimatableArray | AnimatableArray[];\n x: AnimatableArray | AnimatableArray[];\n scale: AnimatableArray | AnimatableArray[];\n rotate: AnimatableArray | AnimatableArray[];\n opacity: AnimatableArray | AnimatableArray[];\n backgroundColor: AnimatableArray | AnimatableArray[];\n borderRadius: AnimatableArray | AnimatableArray[];\n};\n\ntype ActiveProps = {\n range: number[];\n y: AnimatableArray;\n x: AnimatableArray;\n scale: AnimatableArray;\n rotate: AnimatableArray;\n opacity: AnimatableArray;\n backgroundColor: AnimatableArray;\n borderRadius: AnimatableArray;\n};\n\nfunction keysFromObject<T extends object>(object: T): (keyof T)[] {\n return Object.keys(object) as (keyof T)[];\n}\n\nexport const Name = `parallax-animation`;\n\nexport const PROPS = {\n breakpoints: [\"\"],\n range: [0, 1],\n y: null,\n x: null,\n scale: null,\n rotate: null,\n opacity: null,\n color: null,\n backgroundColor: null,\n borderRadius: null,\n};\n\nconst PROP_DEFAULTS = {\n y: \"0%\",\n x: \"0%\",\n scale: 1,\n rotate: 0,\n opacity: null,\n color: null,\n backgroundColor: null,\n borderRadius: null,\n};\n\nconst KEYS = Object.keys(PROPS);\n\nconst isNestedAnimatableArray = (\n values: AnimatableArray | AnimatableArray[],\n): values is AnimatableArray[] => {\n return (\n Array.isArray(values) && (Array.isArray(values[0]) || values[0] === null)\n );\n};\n\nconst isAnimatableArray = (\n values: AnimatableArray | AnimatableArray[],\n): values is AnimatableArray => {\n return Array.isArray(values) && !Array.isArray(values[0]);\n};\n\nconst flattenAnimatableArray = (\n value: AnimatableArray | AnimatableArray[],\n index: number = 0,\n) => {\n if (isNestedAnimatableArray(value)) {\n return value[index]!;\n }\n return value;\n};\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n if (\n Object.keys(props).some(\n (key) => KEYS.includes(key) && !Array.isArray(Reflect.get(props, key)),\n )\n )\n return console.warn(\n `parallax-animate: At least one of ${KEYS.join(\",\")} properties is required and must be an array of values!`,\n element,\n );\n\n const messages = Object.entries(props).reduce((messages, [key, value]) => {\n if (!KEYS.includes(key)) return messages;\n if (value && value.length !== props.range.length) {\n return messages.concat(\n `${key} attribute must have the same length as range attribute!`,\n );\n }\n return messages;\n }, [] as string[]);\n\n if (messages.length)\n return console.warn(\n element,\n `\\nparallax-animate: Please fix the following issues:\\n${messages.join(\"\\n\")}`,\n );\n\n const [progress, { animate }] = useParallaxStickyLayer(element);\n\n const [activeBreakpoints, setActiveBreakpoints] = createStore<boolean[]>(\n getActiveBreakpoints(props.breakpoints),\n );\n const activeBreakpointIndex = createMemo(() =>\n getLastTruthyIndex(activeBreakpoints),\n );\n\n const [_, importantProps] = splitProps(props, [\"breakpoints\"]);\n const animateableProps = mergeProps(importantProps, {});\n\n const activeProps = createMemo<ActiveProps>(() => {\n const index = activeBreakpointIndex();\n\n if (index === -1) {\n const { breakpoints, ...active } = PROPS;\n return active;\n }\n\n const keys = keysFromObject(animateableProps);\n\n const active = keys.reduce((active, key) => {\n const value = animateableProps[key];\n if (isNestedAnimatableArray(value)) {\n const flattenedValue = flattenAnimatableArray(value, index);\n return {\n ...active,\n [key]: flattenedValue,\n };\n }\n return {\n ...active,\n [key]: value,\n };\n }, {} as ActiveProps);\n\n return active;\n });\n\n createEffect(() => {\n const breakpoints = props.breakpoints;\n const controller = new AbortController();\n\n for (let i = 0; i < breakpoints.length; i++) {\n const query = breakpoints[i];\n if (!query) continue;\n const mediaQuery = window.matchMedia(query);\n mediaQuery.addEventListener(\n \"change\",\n (e) => setActiveBreakpoints(i, e.matches),\n { signal: controller.signal },\n );\n }\n\n return onCleanup(() => {\n controller.abort();\n });\n });\n\n element.style.willChange = \"transform\";\n if (\n window.getComputedStyle(element).getPropertyValue(\"display\") === \"inline\"\n ) {\n element.style.display = \"block\";\n }\n\n createEffect(() => {\n const active = activeProps();\n const { range, ...props } = active;\n const valueSubscribers: VoidFunction[] = [];\n\n const progressValue = Object.keys(PROP_DEFAULTS).reduce(\n (values, key) => {\n const fallback = Reflect.get(PROP_DEFAULTS, key);\n const valueRange = Reflect.get(props, key);\n if (valueRange?.length === range.length) {\n const transform = mTransform(range, valueRange);\n const value = motionValue(transform(progress.get()));\n const unsub = progress.on(\"change\", (latest) => {\n value.set(transform(latest));\n });\n valueSubscribers.push(unsub);\n values[key] = value;\n } else values[key] = fallback;\n return values;\n },\n {} as Record<string, any>,\n );\n\n const animated = Object.keys(progressValue).reduce(\n (obj, key) => {\n const v = progressValue[key];\n Reflect.set(\n obj,\n key,\n motionValue(typeof v === \"object\" && v !== null ? v.get() : v),\n );\n return obj;\n },\n {} as Record<string, MotionValue>,\n );\n\n const transform = transformValue(\n () =>\n `translate(${animated.x?.get()}, ${animated.y?.get()}) scale(${animated.scale?.get()}) rotate(${animated.rotate?.get()}deg)`,\n );\n\n function animateValues() {\n const sequence = Object.keys(animated)\n .map((key) => {\n let v = progressValue[key]?.get?.();\n if (typeof v === \"undefined\") return null;\n return [animated[key], v, { at: \"<\" }];\n })\n .filter((v) => v !== null);\n //@ts-ignore\n animate(sequence);\n }\n\n function scheduleAnimation() {\n frame.update(animateValues);\n }\n\n const unsub = progress.on(\"change\", (_) => {\n scheduleAnimation();\n });\n\n const styledValues = Object.keys(animated)\n .filter(\n (key) =>\n key !== \"y\" && key !== \"x\" && key !== \"rotate\" && key !== \"scale\",\n )\n .reduce((obj, key) => {\n Reflect.set(obj, key, animated[key]);\n return obj;\n }, {});\n\n const unstyle = styleEffect(element, {\n transform,\n ...styledValues,\n });\n\n return onCleanup(() => {\n unstyle();\n unsub();\n valueSubscribers.forEach((unsub) => unsub());\n Object.values(animated).forEach((value) => {\n value.destroy();\n });\n Object.values(progressValue).forEach((value) => {\n value?.destroy?.();\n });\n transform.destroy();\n });\n });\n};\n"]}
package/dist/main/components/parallax-container/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/parallax-container/index.ts"],"names":[],"mappings":";;AAOO,MAAM,IAAO,GAAA,CAAA,kBAAA;AAEb,MAAM,SAA0D,GAAA,CACrE,KACA,EAAA,EAAE,SACC,KAAA;AACH,EAAA,IAAI,CAAC,KAAM,CAAA,QAAA;AACT,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb,GAAG,IAAI,CAAA,yCAAA,CAAA;AAAA,MACP;AAAA,KACF;AACF,EAAA,IAAI,MAAM,QAAW,GAAA,CAAA;AACnB,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb,GAAG,IAAI,CAAA,+CAAA,CAAA;AAAA,MACP;AAAA,KACF;AACF,EAAA,sBAAA,CAAuB,OAAO,OAAO,CAAA;AACvC","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\nimport { provideParallaxContext } from \"../../hooks/index.js\";\n\ntype ParallaxContainerProps = {\n maxPages: number;\n};\n\nexport const Name = `parallax-container`;\n\nexport const Component: CorrectComponentType<ParallaxContainerProps> = (\n props,\n { element },\n) => {\n if (!props.maxPages)\n return console.warn(\n `${Name}: requires max-pages attribute to be set!`,\n element,\n );\n if (props.maxPages < 1)\n return console.warn(\n `${Name}: max-pages must be greater than or equal to 1!`,\n element,\n );\n provideParallaxContext(props, element);\n};\n"]}
1
+ {"version":3,"sources":["../../../../src/components/parallax-container/index.ts"],"names":[],"mappings":";;AAOO,MAAM,IAAO,GAAA,CAAA,kBAAA;AAEb,MAAM,SAA0D,GAAA,CACrE,KACA,EAAA,EAAE,SACC,KAAA;AACH,EAAA,IAAI,CAAC,KAAM,CAAA,QAAA;AACT,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb,GAAG,IAAI,CAAA,yCAAA,CAAA;AAAA,MACP;AAAA,KACF;AACF,EAAA,IAAI,MAAM,QAAW,GAAA,CAAA;AACnB,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb,GAAG,IAAI,CAAA,+CAAA,CAAA;AAAA,MACP;AAAA,KACF;AACF,EAAA,sBAAA,CAAuB,OAAO,OAAO,CAAA;AACvC","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { provideParallaxContext } from \"../../hooks/index.js\";\n\ntype ParallaxContainerProps = {\n maxPages: number;\n};\n\nexport const Name = `parallax-container`;\n\nexport const Component: CorrectComponentType<ParallaxContainerProps> = (\n props,\n { element },\n) => {\n if (!props.maxPages)\n return console.warn(\n `${Name}: requires max-pages attribute to be set!`,\n element,\n );\n if (props.maxPages < 1)\n return console.warn(\n `${Name}: max-pages must be greater than or equal to 1!`,\n element,\n );\n provideParallaxContext(props, element);\n};\n"]}
package/dist/main/components/parallax-sticky-layer/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/parallax-sticky-layer/index.ts"],"names":[],"mappings":";;AAQO,MAAM,IAAO,GAAA,CAAA,qBAAA;AAEb,MAAM,SAA4D,GAAA,CACvE,KACA,EAAA,EAAE,SACC,KAAA;AACH,EAAA,IAAI,CAAC,KAAM,CAAA,KAAA;AACT,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb,GAAG,IAAI,CAAA,qCAAA,CAAA;AAAA,MACP;AAAA,KACF;AACF,EAAA,IAAI,CAAC,KAAM,CAAA,GAAA;AACT,IAAA,OAAO,OAAQ,CAAA,IAAA,CAAK,CAAG,EAAA,IAAI,uCAAuC,OAAO,CAAA;AAC3E,EAAI,IAAA,KAAA,CAAM,OAAO,KAAM,CAAA,KAAA;AACrB,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb,GAAG,IAAI,CAAA,0DAAA,CAAA;AAAA,MACP;AAAA,KACF;AACF,EAAA,IAAI,KAAM,CAAA,KAAA,GAAQ,CAAK,IAAA,KAAA,CAAM,GAAM,GAAA,CAAA;AACjC,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb,GAAG,IAAI,CAAA,kEAAA,CAAA;AAAA,MACP;AAAA,KACF;AACF,EAAA,iCAAA,CAAkC,OAAO,OAAO,CAAA;AAClD","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\nimport { provideParallaxStickyLayerContext } from \"../../hooks/index.js\";\n\ntype StickyParallaxLayerProps = {\n start: number;\n end: number;\n};\n\nexport const Name = `parallax-sticky-layer`;\n\nexport const Component: CorrectComponentType<StickyParallaxLayerProps> = (\n props,\n { element },\n) => {\n if (!props.start)\n return console.warn(\n `${Name}: requires start attribute to be set!`,\n element,\n );\n if (!props.end)\n return console.warn(`${Name}: requires end attribute to be set!`, element);\n if (props.end <= props.start)\n return console.warn(\n `${Name}: the start attribute must be less than the end attribute!`,\n element,\n );\n if (props.start < 1 || props.end < 1)\n return console.warn(\n `${Name}: The start and end attributes must be greater than or equal to 1!`,\n element,\n );\n provideParallaxStickyLayerContext(props, element);\n};\n"]}
1
+ {"version":3,"sources":["../../../../src/components/parallax-sticky-layer/index.ts"],"names":[],"mappings":";;AAQO,MAAM,IAAO,GAAA,CAAA,qBAAA;AAEb,MAAM,SAA4D,GAAA,CACvE,KACA,EAAA,EAAE,SACC,KAAA;AACH,EAAA,IAAI,CAAC,KAAM,CAAA,KAAA;AACT,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb,GAAG,IAAI,CAAA,qCAAA,CAAA;AAAA,MACP;AAAA,KACF;AACF,EAAA,IAAI,CAAC,KAAM,CAAA,GAAA;AACT,IAAA,OAAO,OAAQ,CAAA,IAAA,CAAK,CAAG,EAAA,IAAI,uCAAuC,OAAO,CAAA;AAC3E,EAAI,IAAA,KAAA,CAAM,OAAO,KAAM,CAAA,KAAA;AACrB,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb,GAAG,IAAI,CAAA,0DAAA,CAAA;AAAA,MACP;AAAA,KACF;AACF,EAAA,IAAI,KAAM,CAAA,KAAA,GAAQ,CAAK,IAAA,KAAA,CAAM,GAAM,GAAA,CAAA;AACjC,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb,GAAG,IAAI,CAAA,kEAAA,CAAA;AAAA,MACP;AAAA,KACF;AACF,EAAA,iCAAA,CAAkC,OAAO,OAAO,CAAA;AAClD","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { provideParallaxStickyLayerContext } from \"../../hooks/index.js\";\n\ntype StickyParallaxLayerProps = {\n start: number;\n end: number;\n};\n\nexport const Name = `parallax-sticky-layer`;\n\nexport const Component: CorrectComponentType<StickyParallaxLayerProps> = (\n props,\n { element },\n) => {\n if (!props.start)\n return console.warn(\n `${Name}: requires start attribute to be set!`,\n element,\n );\n if (!props.end)\n return console.warn(`${Name}: requires end attribute to be set!`, element);\n if (props.end <= props.start)\n return console.warn(\n `${Name}: the start attribute must be less than the end attribute!`,\n element,\n );\n if (props.start < 1 || props.end < 1)\n return console.warn(\n `${Name}: The start and end attributes must be greater than or equal to 1!`,\n element,\n );\n provideParallaxStickyLayerContext(props, element);\n};\n"]}
package/dist/main/hooks/useParallax.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { splitProps, createEffect, batch, onCleanup, mergeProps } from 'solid-js';
2
2
  import { createStore } from 'solid-js/store';
3
- import { getContextFromProvider } from '@brytdesigns/web-component-utils';
3
+ import { createWithElementContext, getContextFromProvider } from '@brytdesigns/web-component-core/utils';
4
4
  import { createContext, provide, consume } from 'component-register';
5
5
  import { motionValue, scroll } from 'motion';
6
6
 
@@ -68,6 +68,7 @@ const useParallax = (element) => {
68
68
  }
69
69
  return useParallaxContext(context);
70
70
  };
71
+ const withParallaxElementContext = createWithElementContext(ParallaxContextState);
71
72
  const getParallaxContext = (element) => {
72
73
  const context = getContextFromProvider(
73
74
  ParallaxContextState,
@@ -76,6 +77,6 @@ const getParallaxContext = (element) => {
76
77
  return useParallaxContext(context);
77
78
  };
78
79
 
79
- export { getParallaxContext, provideParallaxContext, useParallax, useParallaxContext };
80
+ export { getParallaxContext, provideParallaxContext, useParallax, useParallaxContext, withParallaxElementContext };
80
81
  //# sourceMappingURL=useParallax.js.map
81
82
  //# sourceMappingURL=useParallax.js.map
package/dist/main/hooks/useParallax.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/hooks/useParallax.ts"],"names":["info"],"mappings":"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","file":"useParallax.js","sourcesContent":["import {\n onCleanup,\n createEffect,\n splitProps,\n mergeProps,\n batch,\n} from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\nimport { getContextFromProvider } from \"@brytdesigns/web-component-utils\";\nimport {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport { scroll, motionValue } from \"motion\";\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n maxPages: number;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ParallaxContext = ReturnType<typeof initializeParallaxContext>;\n\nfunction initializeParallaxContext(props: CreateContextOptions) {\n const [_internal, _state] = splitProps(props, [\"root\"]);\n\n const scrollYProgress = motionValue(-1);\n const scrollY = motionValue(-1);\n const [info, setInfo] = createStore({\n offset: [-1, -1],\n scrollLength: -1,\n });\n\n createEffect(() => {\n const pages = _state.maxPages;\n\n _internal.root.style.height = `${pages * 100}vh`;\n _internal.root.style.width = `100%`;\n _internal.root.style.position = \"relative\";\n if (!_internal.root.style.display) {\n _internal.root.style.display = \"block\";\n }\n\n const remove = scroll(\n (_, info) => {\n const { y } = info;\n\n scrollYProgress.set(y.progress);\n scrollY.set(y.current);\n batch(() => {\n setInfo(\"offset\", 0, y.offset?.at(0) || 0);\n setInfo(\"offset\", 1, y.offset?.at(1) || 0);\n setInfo(\"scrollLength\", y.scrollLength);\n });\n },\n {\n target: _internal.root,\n axis: \"y\",\n offset: [\"start start\", \"end end\"],\n },\n );\n\n onCleanup(() => {\n if (remove) {\n remove();\n }\n scrollYProgress.destroy();\n scrollY.destroy();\n });\n });\n\n return mergeProps(_state, {\n scrollYProgress,\n scrollY,\n info,\n });\n}\n\nconst ParallaxContextState = createContext(initializeParallaxContext);\n\nexport const provideParallaxContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): ParallaxContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(ParallaxContextState, props, element);\n};\n\nexport const useParallaxContext = (context: ParallaxContext) => {\n return context;\n};\n\nexport const useParallax = (element: HTMLElement & ICustomElement) => {\n const context: ParallaxContext = consume(ParallaxContextState, element);\n\n if (!context) {\n throw console.error(\n \"ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.\",\n );\n }\n\n return useParallaxContext(context);\n};\n\nexport const getParallaxContext = (element: Element) => {\n const context = getContextFromProvider<ParallaxContext>(\n ParallaxContextState,\n element,\n );\n return useParallaxContext(context);\n};\n"]}
1
+ {"version":3,"sources":["../../../src/hooks/useParallax.ts"],"names":["info"],"mappings":"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","file":"useParallax.js","sourcesContent":["import {\n onCleanup,\n createEffect,\n splitProps,\n mergeProps,\n batch,\n} from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\nimport {\n getContextFromProvider,\n createWithElementContext,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport { scroll, motionValue } from \"motion\";\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n maxPages: number;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ParallaxContext = ReturnType<typeof initializeParallaxContext>;\n\nfunction initializeParallaxContext(props: CreateContextOptions) {\n const [_internal, _state] = splitProps(props, [\"root\"]);\n\n const scrollYProgress = motionValue(-1);\n const scrollY = motionValue(-1);\n const [info, setInfo] = createStore({\n offset: [-1, -1],\n scrollLength: -1,\n });\n\n createEffect(() => {\n const pages = _state.maxPages;\n\n _internal.root.style.height = `${pages * 100}vh`;\n _internal.root.style.width = `100%`;\n _internal.root.style.position = \"relative\";\n if (!_internal.root.style.display) {\n _internal.root.style.display = \"block\";\n }\n\n const remove = scroll(\n (_, info) => {\n const { y } = info;\n\n scrollYProgress.set(y.progress);\n scrollY.set(y.current);\n batch(() => {\n setInfo(\"offset\", 0, y.offset?.at(0) || 0);\n setInfo(\"offset\", 1, y.offset?.at(1) || 0);\n setInfo(\"scrollLength\", y.scrollLength);\n });\n },\n {\n target: _internal.root,\n axis: \"y\",\n offset: [\"start start\", \"end end\"],\n },\n );\n\n onCleanup(() => {\n if (remove) {\n remove();\n }\n scrollYProgress.destroy();\n scrollY.destroy();\n });\n });\n\n return mergeProps(_state, {\n scrollYProgress,\n scrollY,\n info,\n });\n}\n\nconst ParallaxContextState = createContext(initializeParallaxContext);\n\nexport const provideParallaxContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): ParallaxContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(ParallaxContextState, props, element);\n};\n\nexport const useParallaxContext = (context: ParallaxContext) => {\n return context;\n};\n\nexport const useParallax = (element: HTMLElement & ICustomElement) => {\n const context: ParallaxContext = consume(ParallaxContextState, element);\n\n if (!context) {\n throw console.error(\n \"ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.\",\n );\n }\n\n return useParallaxContext(context);\n};\n\nexport const withParallaxElementContext = createWithElementContext<\n typeof ParallaxContextState,\n ParallaxContext\n>(ParallaxContextState);\n\nexport const getParallaxContext = (element: Element) => {\n const context = getContextFromProvider<ParallaxContext>(\n ParallaxContextState,\n element,\n );\n return useParallaxContext(context);\n};\n"]}
package/dist/main/hooks/useParallaxStickyLayer.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { splitProps, createEffect, onCleanup, mergeProps } from 'solid-js';
2
- import { getContextFromProvider } from '@brytdesigns/web-component-utils';
3
2
  import { createContext, provide, consume } from 'component-register';
4
3
  import { motionValue, transformValue, transform, frame, animate } from 'motion';
5
4
  import { awaitAllAnimations } from '@brytdesigns/web-component-core/animation';
6
5
  import { abortablePromise } from '@brytdesigns/web-component-core/promise';
6
+ import { createWithElementContext, getContextFromProvider } from '@brytdesigns/web-component-core/utils';
7
7
  import { useParallax } from './useParallax';
8
8
  import { normalizeTuple, isInRange } from '../utils';
9
9
 
@@ -110,6 +110,7 @@ const useParallaxStickyLayer = (element) => {
110
110
  }
111
111
  return useParallaxStickyLayerContext(context);
112
112
  };
113
+ const withParallaxStickyLayerContext = createWithElementContext(ParallaxStickyLayerContextState);
113
114
  const getParallaxStickyLayerContext = (element) => {
114
115
  const context = getContextFromProvider(
115
116
  ParallaxStickyLayerContextState,
@@ -118,6 +119,6 @@ const getParallaxStickyLayerContext = (element) => {
118
119
  return useParallaxStickyLayerContext(context);
119
120
  };
120
121
 
121
- export { getParallaxStickyLayerContext, provideParallaxStickyLayerContext, useParallaxStickyLayer, useParallaxStickyLayerContext };
122
+ export { getParallaxStickyLayerContext, provideParallaxStickyLayerContext, useParallaxStickyLayer, useParallaxStickyLayerContext, withParallaxStickyLayerContext };
122
123
  //# sourceMappingURL=useParallaxStickyLayer.js.map
123
124
  //# sourceMappingURL=useParallaxStickyLayer.js.map
package/dist/main/hooks/useParallaxStickyLayer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/hooks/useParallaxStickyLayer.ts"],"names":["transform","isInRange","mTransform"],"mappings":"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","file":"useParallaxStickyLayer.js","sourcesContent":["import { onCleanup, createEffect, splitProps, mergeProps } from \"solid-js\";\nimport { getContextFromProvider } from \"@brytdesigns/web-component-utils\";\nimport {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport {\n motionValue,\n transformValue,\n transform as mTransform,\n frame,\n animate,\n type AnimationPlaybackControlsWithThen,\n} from \"motion\";\nimport { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\nimport { abortablePromise } from \"@brytdesigns/web-component-core/promise\";\nimport { useParallax } from \"./useParallax\";\nimport { normalizeTuple, isInRange } from \"../utils\";\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n start: number;\n end: number;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ParallaxStickyLayerContext = ReturnType<\n typeof initializeParallaxStickyLayerContext\n>;\n\nfunction initializeParallaxStickyLayerContext(props: CreateContextOptions) {\n const [_internal, _state] = splitProps(props, [\"root\", \"start\", \"end\"]);\n const parallax = useParallax(_internal.root);\n\n const progress = motionValue(-1);\n const inRange = motionValue(false);\n const belowRange = motionValue(false);\n const aboveRange = motionValue(false);\n\n const position = transformValue(() =>\n inRange.get() ? \"sticky\" : \"absolute\",\n );\n const transform = transformValue(() => {\n const isInRange = inRange.get();\n const isBelowRange = belowRange.get();\n const isAboveRange = aboveRange.get();\n if (isInRange) return \"none\";\n if (isBelowRange) return `translate(0px, ${(_internal.start - 1) * 100}%)`;\n if (isAboveRange) return `translate(0px, ${(_internal.end - 1) * 100}%)`;\n });\n const animations = motionValue<AnimationPlaybackControlsWithThen[]>([]);\n\n const styles = transformValue(() => ({\n position: position.get(),\n transform: transform.get(),\n }));\n\n _internal.root.style.top = \"0\";\n _internal.root.style.right = \"0\";\n _internal.root.style.bottom = \"0\";\n _internal.root.style.left = \"0\";\n _internal.root.style.height = \"100vh\";\n _internal.root.style.overflowX = \"hidden\";\n _internal.root.style.maxWidth = \"100%\";\n if (window.getComputedStyle(_internal.root).display === \"inline\") {\n _internal.root.style.display = \"block\";\n }\n\n createEffect(() => {\n const range = [_internal.start, _internal.end];\n const maxPages = parallax.maxPages;\n const normalizedRange = normalizeTuple(range as any, maxPages);\n const [normStart, normEnd] = normalizedRange;\n const transformer = mTransform(normalizedRange as any, [0, 1]);\n\n const unsubscribe = parallax.scrollYProgress.on(\"change\", (value) => {\n inRange.set(isInRange({ range: normalizedRange as any, value }));\n belowRange.set(value <= normStart);\n aboveRange.set(value >= normEnd);\n progress.set(transformer(value));\n });\n\n return onCleanup(() => {\n unsubscribe();\n });\n });\n\n function updateStyles() {\n const s = styles.get();\n _internal.root.style.position = s.position;\n _internal.root.style.transform = s.transform;\n }\n\n function renderStyles() {\n frame.render(updateStyles);\n }\n\n function waitForAnimations() {\n const a = animations.get();\n const controller = new AbortController();\n abortablePromise(awaitAllAnimations(a), controller.signal).then(() => {\n animations.set([]);\n renderStyles();\n });\n }\n\n const unsubStyles = styles.on(\"change\", (_) => {\n if (progress.get() === 1 || progress.get() === 0)\n return waitForAnimations();\n animations.set([]);\n renderStyles();\n });\n\n function _animate(...args: Parameters<typeof animate>) {\n const animation = animate(...args);\n animations.set([...animations.get(), animation]);\n return animation;\n }\n\n onCleanup(() => {\n unsubStyles();\n });\n\n return [progress, { animate: _animate }] as const;\n}\n\nconst ParallaxStickyLayerContextState = createContext(\n initializeParallaxStickyLayerContext,\n);\n\nexport const provideParallaxStickyLayerContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): ParallaxStickyLayerContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(ParallaxStickyLayerContextState, props, element);\n};\n\nexport const useParallaxStickyLayerContext = (\n context: ParallaxStickyLayerContext,\n) => {\n return context;\n};\n\nexport const useParallaxStickyLayer = (\n element: HTMLElement & ICustomElement,\n) => {\n const context: ParallaxStickyLayerContext = consume(\n ParallaxStickyLayerContextState,\n element,\n );\n\n if (!context) {\n throw console.error(\n \"ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.\",\n );\n }\n\n return useParallaxStickyLayerContext(context);\n};\n\nexport const getParallaxStickyLayerContext = (element: Element) => {\n const context = getContextFromProvider<ParallaxStickyLayerContext>(\n ParallaxStickyLayerContextState,\n element,\n );\n return useParallaxStickyLayerContext(context);\n};\n"]}
1
+ {"version":3,"sources":["../../../src/hooks/useParallaxStickyLayer.ts"],"names":["transform","isInRange","mTransform"],"mappings":"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","file":"useParallaxStickyLayer.js","sourcesContent":["import { onCleanup, createEffect, splitProps, mergeProps } from \"solid-js\";\nimport {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport {\n motionValue,\n transformValue,\n transform as mTransform,\n frame,\n animate,\n type AnimationPlaybackControlsWithThen,\n} from \"motion\";\nimport { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\nimport { abortablePromise } from \"@brytdesigns/web-component-core/promise\";\nimport {\n getContextFromProvider,\n createWithElementContext,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport { useParallax } from \"./useParallax\";\nimport { normalizeTuple, isInRange } from \"../utils\";\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n start: number;\n end: number;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ParallaxStickyLayerContext = ReturnType<\n typeof initializeParallaxStickyLayerContext\n>;\n\nfunction initializeParallaxStickyLayerContext(props: CreateContextOptions) {\n const [_internal, _state] = splitProps(props, [\"root\", \"start\", \"end\"]);\n const parallax = useParallax(_internal.root);\n\n const progress = motionValue(-1);\n const inRange = motionValue(false);\n const belowRange = motionValue(false);\n const aboveRange = motionValue(false);\n\n const position = transformValue(() =>\n inRange.get() ? \"sticky\" : \"absolute\",\n );\n const transform = transformValue(() => {\n const isInRange = inRange.get();\n const isBelowRange = belowRange.get();\n const isAboveRange = aboveRange.get();\n if (isInRange) return \"none\";\n if (isBelowRange) return `translate(0px, ${(_internal.start - 1) * 100}%)`;\n if (isAboveRange) return `translate(0px, ${(_internal.end - 1) * 100}%)`;\n });\n const animations = motionValue<AnimationPlaybackControlsWithThen[]>([]);\n\n const styles = transformValue(() => ({\n position: position.get(),\n transform: transform.get(),\n }));\n\n _internal.root.style.top = \"0\";\n _internal.root.style.right = \"0\";\n _internal.root.style.bottom = \"0\";\n _internal.root.style.left = \"0\";\n _internal.root.style.height = \"100vh\";\n _internal.root.style.overflowX = \"hidden\";\n _internal.root.style.maxWidth = \"100%\";\n if (window.getComputedStyle(_internal.root).display === \"inline\") {\n _internal.root.style.display = \"block\";\n }\n\n createEffect(() => {\n const range = [_internal.start, _internal.end];\n const maxPages = parallax.maxPages;\n const normalizedRange = normalizeTuple(range as any, maxPages);\n const [normStart, normEnd] = normalizedRange;\n const transformer = mTransform(normalizedRange as any, [0, 1]);\n\n const unsubscribe = parallax.scrollYProgress.on(\"change\", (value) => {\n inRange.set(isInRange({ range: normalizedRange as any, value }));\n belowRange.set(value <= normStart);\n aboveRange.set(value >= normEnd);\n progress.set(transformer(value));\n });\n\n return onCleanup(() => {\n unsubscribe();\n });\n });\n\n function updateStyles() {\n const s = styles.get();\n _internal.root.style.position = s.position;\n _internal.root.style.transform = s.transform;\n }\n\n function renderStyles() {\n frame.render(updateStyles);\n }\n\n function waitForAnimations() {\n const a = animations.get();\n const controller = new AbortController();\n abortablePromise(awaitAllAnimations(a), controller.signal).then(() => {\n animations.set([]);\n renderStyles();\n });\n }\n\n const unsubStyles = styles.on(\"change\", (_) => {\n if (progress.get() === 1 || progress.get() === 0)\n return waitForAnimations();\n animations.set([]);\n renderStyles();\n });\n\n function _animate(...args: Parameters<typeof animate>) {\n const animation = animate(...args);\n animations.set([...animations.get(), animation]);\n return animation;\n }\n\n onCleanup(() => {\n unsubStyles();\n });\n\n return [progress, { animate: _animate }] as const;\n}\n\nconst ParallaxStickyLayerContextState = createContext(\n initializeParallaxStickyLayerContext,\n);\n\nexport const provideParallaxStickyLayerContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): ParallaxStickyLayerContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(ParallaxStickyLayerContextState, props, element);\n};\n\nexport const useParallaxStickyLayerContext = (\n context: ParallaxStickyLayerContext,\n) => {\n return context;\n};\n\nexport const useParallaxStickyLayer = (\n element: HTMLElement & ICustomElement,\n) => {\n const context: ParallaxStickyLayerContext = consume(\n ParallaxStickyLayerContextState,\n element,\n );\n\n if (!context) {\n throw console.error(\n \"ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.\",\n );\n }\n\n return useParallaxStickyLayerContext(context);\n};\n\nexport const withParallaxStickyLayerContext = createWithElementContext<\n typeof ParallaxStickyLayerContextState,\n ParallaxStickyLayerContext\n>(ParallaxStickyLayerContextState);\n\nexport const getParallaxStickyLayerContext = (element: Element) => {\n const context = getContextFromProvider<ParallaxStickyLayerContext>(\n ParallaxStickyLayerContextState,\n element,\n );\n return useParallaxStickyLayerContext(context);\n};\n"]}
package/dist/main/index.d.ts CHANGED
@@ -12,6 +12,15 @@ export declare const useParallax: (element: HTMLElement & ICustomElement) => {
12
12
  scrollLength: number;
13
13
  };
14
14
  };
15
+ export declare const withParallaxElementContext: <D extends unknown>(selector: string | import("solid-js").Accessor<string>, dependencies: import("solid-js").Accessor<D> | undefined, cb: (context: {
16
+ maxPages: number;
17
+ scrollYProgress: import("motion").MotionValue<number>;
18
+ scrollY: import("motion").MotionValue<number>;
19
+ info: {
20
+ offset: number[];
21
+ scrollLength: number;
22
+ };
23
+ }, dependencies: D) => void | (() => void)) => void;
15
24
  export declare const getParallaxContext: (element: Element) => {
16
25
  maxPages: number;
17
26
  scrollYProgress: import("motion").MotionValue<number>;
@@ -27,6 +36,12 @@ export declare const useParallaxStickyLayer: (element: HTMLElement & ICustomElem
27
36
  readonly animate: (object: {} | {}[], keyframes: import("motion").ObjectTarget<{}>, options?: import("motion").AnimationOptions | undefined) => AnimationPlaybackControlsWithThen;
28
37
  }
29
38
  ];
39
+ export declare const withParallaxStickyLayerContext: <D extends unknown>(selector: string | import("solid-js").Accessor<string>, dependencies: import("solid-js").Accessor<D> | undefined, cb: (context: readonly [
40
+ import("motion").MotionValue<number>,
41
+ {
42
+ readonly animate: (object: {} | {}[], keyframes: import("motion").ObjectTarget<{}>, options?: import("motion").AnimationOptions | undefined) => AnimationPlaybackControlsWithThen;
43
+ }
44
+ ], dependencies: D) => void | (() => void)) => void;
30
45
  export declare const getParallaxStickyLayerContext: (element: Element) => readonly [
31
46
  import("motion").MotionValue<number>,
32
47
  {
package/dist/main/index.js CHANGED
@@ -1,6 +1,6 @@
1
- import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-utils';
1
+ import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
2
2
  import { ParallaxContainer, ParallaxStickyLayer, ParallaxAnimation } from './components/index.js';
3
- export { getParallaxContext, getParallaxStickyLayerContext, useParallax, useParallaxStickyLayer } from './hooks/index.js';
3
+ export { getParallaxContext, getParallaxStickyLayerContext, useParallax, useParallaxStickyLayer, withParallaxElementContext, withParallaxStickyLayerContext } from './hooks/index.js';
4
4
 
5
5
  customShadowlessElement(
6
6
  ParallaxContainer.Name,
package/dist/main/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAWA,uBAAA;AAAA,EACE,iBAAkB,CAAA,IAAA;AAAA,EAClB;AAAA,IACE,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,kBAAA,CAAmB,kBAAkB,SAAS;AAChD,CAAA;AAEA,uBAAA;AAAA,EACE,mBAAoB,CAAA,IAAA;AAAA,EACpB;AAAA,IACE,KAAO,EAAA,CAAA;AAAA,IACP,GAAK,EAAA;AAAA,GACP;AAAA,EACA,kBAAA,CAAmB,oBAAoB,SAAS;AAClD,CAAA;AAEA,uBAAA;AAAA,EACE,iBAAkB,CAAA,IAAA;AAAA,EAClB,iBAAkB,CAAA,KAAA;AAAA,EAClB,kBAAA,CAAmB,kBAAkB,SAAS;AAChD,CAAA","file":"index.js","sourcesContent":["import {\n customShadowlessElement,\n correctElementType,\n} from \"@brytdesigns/web-component-utils\";\n\nimport {\n ParallaxContainer,\n ParallaxStickyLayer,\n ParallaxAnimation,\n} from \"./components/index.js\";\n\ncustomShadowlessElement(\n ParallaxContainer.Name,\n {\n maxPages: 2,\n },\n correctElementType(ParallaxContainer.Component),\n);\n\ncustomShadowlessElement(\n ParallaxStickyLayer.Name,\n {\n start: 1,\n end: 2,\n },\n correctElementType(ParallaxStickyLayer.Component),\n);\n\ncustomShadowlessElement(\n ParallaxAnimation.Name,\n ParallaxAnimation.PROPS,\n correctElementType(ParallaxAnimation.Component),\n);\n\nexport {\n useParallax,\n getParallaxContext,\n useParallaxStickyLayer,\n getParallaxStickyLayerContext,\n} from \"./hooks/index.js\";\n"]}
1
+ {"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAWA,uBAAA;AAAA,EACE,iBAAkB,CAAA,IAAA;AAAA,EAClB;AAAA,IACE,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,kBAAA,CAAmB,kBAAkB,SAAS;AAChD,CAAA;AAEA,uBAAA;AAAA,EACE,mBAAoB,CAAA,IAAA;AAAA,EACpB;AAAA,IACE,KAAO,EAAA,CAAA;AAAA,IACP,GAAK,EAAA;AAAA,GACP;AAAA,EACA,kBAAA,CAAmB,oBAAoB,SAAS;AAClD,CAAA;AAEA,uBAAA;AAAA,EACE,iBAAkB,CAAA,IAAA;AAAA,EAClB,iBAAkB,CAAA,KAAA;AAAA,EAClB,kBAAA,CAAmB,kBAAkB,SAAS;AAChD,CAAA","file":"index.js","sourcesContent":["import {\n customShadowlessElement,\n correctElementType,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport {\n ParallaxContainer,\n ParallaxStickyLayer,\n ParallaxAnimation,\n} from \"./components/index.js\";\n\ncustomShadowlessElement(\n ParallaxContainer.Name,\n {\n maxPages: 2,\n },\n correctElementType(ParallaxContainer.Component),\n);\n\ncustomShadowlessElement(\n ParallaxStickyLayer.Name,\n {\n start: 1,\n end: 2,\n },\n correctElementType(ParallaxStickyLayer.Component),\n);\n\ncustomShadowlessElement(\n ParallaxAnimation.Name,\n ParallaxAnimation.PROPS,\n correctElementType(ParallaxAnimation.Component),\n);\n\nexport {\n useParallax,\n getParallaxContext,\n useParallaxStickyLayer,\n getParallaxStickyLayerContext,\n withParallaxElementContext,\n withParallaxStickyLayerContext,\n} from \"./hooks/index.js\";\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brytdesigns/web-component-parallax",
3
- "version": "1.1.1",
3
+ "version": "1.2.1",
4
4
  "description": "Headless parallax animation web component",
5
5
  "main": "./dist/main/index.js",
6
6
  "module": "./dist/main/index.js",
@@ -23,8 +23,7 @@
23
23
  "motion": "^12.18.1",
24
24
  "solid-element": "^1.9.1",
25
25
  "solid-js": "^1.9.7",
26
- "@brytdesigns/web-component-utils": "0.1.14",
27
- "@brytdesigns/web-component-core": "1.1.0"
26
+ "@brytdesigns/web-component-core": "1.1.1"
28
27
  },
29
28
  "devDependencies": {
30
29
  "dts-bundle-generator": "^9.5.1",
package/dist/main/consts.js DELETED
@@ -1,16 +0,0 @@
1
- const POSITION = {
2
- TOP: "top",
3
- BOTTOM: "bottom",
4
- LEFT: "left",
5
- RIGHT: "right"
6
- };
7
- const ACTION = {
8
- OPEN: "open",
9
- CLOSE: "close",
10
- TOGGLE: "toggle"
11
- };
12
- const EVENT_NAMESPACE = `bryt:drawer`;
13
-
14
- export { ACTION, EVENT_NAMESPACE, POSITION };
15
- //# sourceMappingURL=consts.js.map
16
- //# sourceMappingURL=consts.js.map
package/dist/main/consts.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/consts.ts"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA;AAAA,EACtB,GAAK,EAAA,KAAA;AAAA,EACL,MAAQ,EAAA,QAAA;AAAA,EACR,IAAM,EAAA,MAAA;AAAA,EACN,KAAO,EAAA;AACT;AAEO,MAAM,MAAS,GAAA;AAAA,EACpB,IAAM,EAAA,MAAA;AAAA,EACN,KAAO,EAAA,OAAA;AAAA,EACP,MAAQ,EAAA;AACV;AAEO,MAAM,eAAkB,GAAA,CAAA,WAAA","file":"consts.js","sourcesContent":["export type Position = (typeof POSITION)[keyof typeof POSITION];\nexport type Action = (typeof ACTION)[keyof typeof ACTION];\n\nexport const POSITION = {\n TOP: \"top\",\n BOTTOM: \"bottom\",\n LEFT: \"left\",\n RIGHT: \"right\",\n} as const;\n\nexport const ACTION = {\n OPEN: \"open\",\n CLOSE: \"close\",\n TOGGLE: \"toggle\",\n};\n\nexport const EVENT_NAMESPACE = `bryt:drawer` as const;\n"]}