@studiometa/js-toolkit 3.0.0-alpha.5 → 3.0.0-alpha.6

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 (36) hide show
  1. package/Base/Base.d.ts +5 -5
  2. package/Base/Base.js +41 -27
  3. package/Base/Base.js.map +2 -2
  4. package/Base/features.d.ts +5 -0
  5. package/Base/features.js +8 -0
  6. package/Base/features.js.map +2 -2
  7. package/Base/managers/ChildrenManager.d.ts +5 -5
  8. package/Base/managers/ChildrenManager.js +24 -17
  9. package/Base/managers/ChildrenManager.js.map +2 -2
  10. package/Base/managers/EventsManager.d.ts +6 -0
  11. package/Base/managers/EventsManager.js +24 -10
  12. package/Base/managers/EventsManager.js.map +2 -2
  13. package/Base/managers/OptionsManager.js +15 -11
  14. package/Base/managers/OptionsManager.js.map +2 -2
  15. package/Base/managers/RefsManager.js +9 -17
  16. package/Base/managers/RefsManager.js.map +2 -2
  17. package/Base/managers/ResponsiveOptionsManager.js +5 -2
  18. package/Base/managers/ResponsiveOptionsManager.js.map +2 -2
  19. package/Base/utils.d.ts +1 -1
  20. package/Base/utils.js +10 -8
  21. package/Base/utils.js.map +2 -2
  22. package/decorators/withBreakpointManager.js +6 -4
  23. package/decorators/withBreakpointManager.js.map +2 -2
  24. package/decorators/withBreakpointObserver.d.ts +0 -1
  25. package/decorators/withBreakpointObserver.js +4 -2
  26. package/decorators/withBreakpointObserver.js.map +2 -2
  27. package/decorators/withMountOnMediaQuery.js +2 -2
  28. package/decorators/withMountOnMediaQuery.js.map +2 -2
  29. package/decorators/withMountWhenInView.js +2 -2
  30. package/decorators/withMountWhenInView.js.map +2 -2
  31. package/helpers/createApp.js +9 -4
  32. package/helpers/createApp.js.map +2 -2
  33. package/package.json +1 -1
  34. package/Base/managers/ActionManager.d.ts +0 -4
  35. package/Base/managers/ActionManager.js +0 -10
  36. package/Base/managers/ActionManager.js.map +0 -7
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../packages/js-toolkit/decorators/withBreakpointObserver.ts"],
4
- "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport { isDev, startsWith } from '../utils/index.js';\n\nexport interface WithBreakpointObserverProps extends BaseProps {\n $options: {\n activeBreakpoints?: string;\n inactiveBreakpoints?: string;\n };\n}\n\nexport interface WithBreakpointObserverInterface extends BaseInterface {\n $mount(): this;\n}\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n *\n * @param {Base<WithBreakpointObserverProps>} instance The component's instance.\n * @param {string} [breakpoint] The breakpoint to test.\n * @returns {string} The action to trigger.\n */\nfunction testBreakpoints(\n instance: Base<WithBreakpointObserverProps>,\n breakpoint: string = useResize().props().breakpoint,\n): string {\n const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n const isInActiveBreakpoint =\n activeBreakpoints && activeBreakpoints.split(' ').includes(breakpoint);\n const isInInactiveBreakpoint =\n inactiveBreakpoints && inactiveBreakpoints.split(' ').includes(breakpoint);\n\n if (\n (activeBreakpoints && isInActiveBreakpoint) ||\n (inactiveBreakpoints && !isInInactiveBreakpoint)\n ) {\n return '$mount';\n }\n\n return '$destroy';\n}\n\n/**\n * Test if the given instance is configured for breakpoints.\n *\n * @param {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {boolean} True if configured correctly, false otherwise.\n */\nfunction hasBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): boolean {\n const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n return Boolean(activeBreakpoints || inactiveBreakpoints);\n}\n\n/**\n * Test if the given instance has a conflicting configuration for breakpoints.\n *\n * @param {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {void}\n */\nfunction testConflictingBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): void {\n const { activeBreakpoints, inactiveBreakpoints, name } = instance.$options;\n if (activeBreakpoints && inactiveBreakpoints) {\n throw new Error(\n `[${name}] Incorrect configuration: the \\`activeBreakpoints\\` and \\`inactiveBreakpoints\\` are not compatible.`,\n );\n }\n}\n\n/**\n * Add the current instance to the resize service.\n *\n * @param {string} key The key for the resize service callback.\n * @param {Base} instance The instance to observe.\n */\nfunction addToResize(key, instance) {\n if (isDev) {\n testConflictingBreakpointConfiguration(instance);\n }\n\n const { add, has } = useResize();\n\n if (!has(key)) {\n add(key, ({ breakpoint }) => {\n const action = testBreakpoints(instance, breakpoint);\n\n // Always destroy before mounting\n if (action === '$destroy' && instance.$isMounted) {\n instance[action]();\n } else if (action === '$mount' && !instance.$isMounted) {\n setTimeout(() => instance[action](), 0);\n }\n });\n }\n}\n\n/**\n * BreakpointObserver class.\n */\nexport function withBreakpointObserver<S extends Base>(\n BaseClass: typeof Base,\n): BaseDecorator<WithBreakpointObserverInterface, S, WithBreakpointObserverProps> {\n /**\n * Class.\n */\n class WithBreakpointObserver<T extends BaseProps = BaseProps> extends BaseClass<\n T & WithBreakpointObserverProps\n > {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...BaseClass.config,\n name: `${BaseClass.config.name}WithBreakpointObserver`,\n options: {\n ...BaseClass.config?.options,\n activeBreakpoints: String,\n inactiveBreakpoints: String,\n },\n };\n\n /**\n * Watch for the document resize to test the breakpoints.\n */\n constructor(element: HTMLElement) {\n super(element);\n\n const { remove, props } = useResize();\n const { name } = this.$options;\n\n // Do nothing if no breakpoint has been defined.\n // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n if (!props().breakpoint) {\n if (isDev) {\n throw new Error(\n `[${name}] The \\`BreakpointObserver\\` class requires breakpoints to be defined.`,\n );\n }\n return;\n }\n\n const key = `BreakpointObserver-${this.$id}`;\n\n // Watch change on the `data-options` attribute to emit the `set:options` event.\n const mutationObserver = new MutationObserver(([mutation]) => {\n if (\n mutation.type === 'attributes' &&\n (mutation.attributeName === 'data-options' ||\n startsWith(mutation.attributeName, 'data-option-'))\n ) {\n // Stop here silently when no breakpoint configuration given.\n if (!hasBreakpointConfiguration(this)) {\n this.$mount();\n remove(key);\n return;\n }\n\n addToResize(key, this);\n }\n });\n mutationObserver.observe(this.$el, { attributes: true });\n\n // Stop here silently when no breakpoint configuration given.\n if (!hasBreakpointConfiguration(this)) {\n return;\n }\n\n addToResize(key, this);\n }\n\n /**\n * Override the default $mount method to prevent component's from being\n * mounted when they should not.\n */\n $mount(): this {\n // Execute normal behavior when no breakpoint configuration given.\n if (!hasBreakpointConfiguration(this)) {\n return super.$mount();\n }\n\n const action = testBreakpoints(this);\n if (action === '$mount') {\n return super.$mount();\n }\n\n return this;\n }\n }\n\n // @ts-ignore\n return WithBreakpointObserver;\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport { isDev, startsWith } from '../utils/index.js';\nimport { features } from '../Base/features.js';\n\nexport interface WithBreakpointObserverProps extends BaseProps {\n $options: {\n activeBreakpoints?: string;\n inactiveBreakpoints?: string;\n };\n}\n\nexport interface WithBreakpointObserverInterface extends BaseInterface {}\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n *\n * @param {Base<WithBreakpointObserverProps>} instance The component's instance.\n * @param {string} [breakpoint] The breakpoint to test.\n * @returns {string} The action to trigger.\n */\nfunction testBreakpoints(\n instance: Base<WithBreakpointObserverProps>,\n breakpoint: string = useResize().props().breakpoint,\n): string {\n const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n const isInActiveBreakpoint =\n activeBreakpoints && activeBreakpoints.split(' ').includes(breakpoint);\n const isInInactiveBreakpoint =\n inactiveBreakpoints && inactiveBreakpoints.split(' ').includes(breakpoint);\n\n if (\n (activeBreakpoints && isInActiveBreakpoint) ||\n (inactiveBreakpoints && !isInInactiveBreakpoint)\n ) {\n return '$mount';\n }\n\n return '$destroy';\n}\n\n/**\n * Test if the given instance is configured for breakpoints.\n *\n * @param {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {boolean} True if configured correctly, false otherwise.\n */\nfunction hasBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): boolean {\n const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n return Boolean(activeBreakpoints || inactiveBreakpoints);\n}\n\n/**\n * Test if the given instance has a conflicting configuration for breakpoints.\n *\n * @param {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {void}\n */\nfunction testConflictingBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): void {\n const { activeBreakpoints, inactiveBreakpoints, name } = instance.$options;\n if (activeBreakpoints && inactiveBreakpoints) {\n throw new Error(\n `[${name}] Incorrect configuration: the \\`activeBreakpoints\\` and \\`inactiveBreakpoints\\` are not compatible.`,\n );\n }\n}\n\n/**\n * Add the current instance to the resize service.\n *\n * @param {string} key The key for the resize service callback.\n * @param {Base} instance The instance to observe.\n */\nfunction addToResize(key, instance) {\n if (isDev) {\n testConflictingBreakpointConfiguration(instance);\n }\n\n const { add, has } = useResize();\n\n if (!has(key)) {\n add(key, ({ breakpoint }) => {\n const action = testBreakpoints(instance, breakpoint);\n\n // Always destroy before mounting\n if (action === '$destroy' && instance.$isMounted) {\n instance[action]();\n } else if (action === '$mount' && !instance.$isMounted) {\n setTimeout(() => instance[action](), 0);\n }\n });\n }\n}\n\n/**\n * BreakpointObserver class.\n */\nexport function withBreakpointObserver<S extends Base>(\n BaseClass: typeof Base,\n): BaseDecorator<WithBreakpointObserverInterface, S, WithBreakpointObserverProps> {\n /**\n * Class.\n */\n class WithBreakpointObserver<T extends BaseProps = BaseProps> extends BaseClass<\n T & WithBreakpointObserverProps\n > {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...BaseClass.config,\n name: `${BaseClass.config.name}WithBreakpointObserver`,\n options: {\n ...BaseClass.config?.options,\n activeBreakpoints: String,\n inactiveBreakpoints: String,\n },\n };\n\n /**\n * Watch for the document resize to test the breakpoints.\n */\n constructor(element: HTMLElement) {\n super(element);\n\n const { remove, props } = useResize();\n const { name } = this.$options;\n\n // Do nothing if no breakpoint has been defined.\n // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n if (!props().breakpoint) {\n if (isDev) {\n throw new Error(\n `[${name}] The \\`BreakpointObserver\\` class requires breakpoints to be defined.`,\n );\n }\n return;\n }\n\n const key = `BreakpointObserver-${this.$id}`;\n const attributes = features.get('attributes');\n\n // Watch change on the `data-options` attribute to emit the `set:options` event.\n const mutationObserver = new MutationObserver(([mutation]) => {\n if (\n mutation.type === 'attributes' &&\n startsWith(mutation.attributeName, `${attributes.option}-`)\n ) {\n // Stop here silently when no breakpoint configuration given.\n if (!hasBreakpointConfiguration(this)) {\n this.$mount();\n remove(key);\n return;\n }\n\n addToResize(key, this);\n }\n });\n mutationObserver.observe(this.$el, { attributes: true });\n\n // Stop here silently when no breakpoint configuration given.\n if (!hasBreakpointConfiguration(this)) {\n return;\n }\n\n addToResize(key, this);\n }\n\n /**\n * Override the default $mount method to prevent component's from being\n * mounted when they should not.\n */\n async $mount() {\n // Execute normal behavior when no breakpoint configuration given.\n if (!hasBreakpointConfiguration(this)) {\n return super.$mount();\n }\n\n const action = testBreakpoints(this);\n if (action === '$mount') {\n return super.$mount();\n }\n\n return this;\n }\n }\n\n // @ts-ignore\n return WithBreakpointObserver;\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -49,9 +49,9 @@ function withMountOnMediaQuery(BaseClass, media) {
49
49
  /**
50
50
  * Override the mounting of the component.
51
51
  */
52
- $mount() {
52
+ async $mount() {
53
53
  if (this.__matches) {
54
- super.$mount();
54
+ return super.$mount();
55
55
  }
56
56
  return this;
57
57
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../packages/js-toolkit/decorators/withMountOnMediaQuery.ts"],
4
- "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { isDev } from '../utils/is.js';\n\nexport interface withMountOnMediaQueryProps extends BaseProps {\n $options: {\n media: string;\n };\n}\n\nexport interface withMountOnMediaQueryInterface extends BaseInterface {\n /**\n * @private\n */\n __matches: boolean;\n $mount(): this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountOnMediaQuery<S extends Base = Base>(\n BaseClass: typeof Base,\n media,\n): BaseDecorator<withMountOnMediaQueryInterface, S, withMountOnMediaQueryProps> {\n /**\n * Class.\n */\n class WithMountOnMediaQuery<T extends BaseProps = BaseProps> extends BaseClass<\n T & withMountOnMediaQueryProps\n > {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...BaseClass.config,\n name: `${BaseClass.config.name}withMountOnMediaQuery`,\n options: {\n ...BaseClass.config?.options,\n media: String,\n },\n };\n\n /**\n * Is the media query matches?\n *\n * @private\n */\n __matches = false;\n\n /**\n * Listen for media query changes when the class in instantiated.\n *\n * @param {HTMLElement} element The component's root element.\n */\n constructor(element: HTMLElement) {\n super(element);\n\n if (isDev && !this.$options.media && !media) {\n this.$warn(\n 'Missing either \"$options.media\" or \"media\" argument in withMountOnMediaQuery decorator.',\n );\n return;\n }\n\n const mediaQueryList = window.matchMedia(this.$options.media || media);\n\n // Set initial value\n this.__matches = mediaQueryList.matches;\n\n const changeHandler = (event: MediaQueryListEvent) => {\n this.__matches = event.matches;\n\n if (event.matches && !this.$isMounted) {\n this.$mount();\n } else if (this.$isMounted) {\n setTimeout(() => this.$destroy());\n }\n };\n\n // Start listening for changes\n mediaQueryList.addEventListener('change', changeHandler);\n\n this.$on('terminated', () => {\n mediaQueryList.removeEventListener('change', changeHandler);\n });\n }\n\n /**\n * Override the mounting of the component.\n */\n $mount() {\n if (this.__matches) {\n super.$mount();\n }\n\n return this;\n }\n }\n\n // @ts-ignore\n return WithMountOnMediaQuery;\n}\n"],
5
- "mappings": "AAEA,SAAS,aAAa;AAmBf,SAAS,sBACd,WACA,OAC8E;AAAA,EAI9E,MAAM,8BAA+D,UAEnE;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO,IAAI;AAAA,MAC9B,SAAS;AAAA,QACP,GAAG,UAAU,QAAQ;AAAA,QACrB,OAAO;AAAA,MACT;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOZ,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,SAAS,CAAC,KAAK,SAAS,SAAS,CAAC,OAAO;AAC3C,aAAK;AAAA,UACH;AAAA,QACF;AACA;AAAA,MACF;AAEA,YAAM,iBAAiB,OAAO,WAAW,KAAK,SAAS,SAAS,KAAK;AAGrE,WAAK,YAAY,eAAe;AAEhC,YAAM,gBAAgB,CAAC,UAA+B;AACpD,aAAK,YAAY,MAAM;AAEvB,YAAI,MAAM,WAAW,CAAC,KAAK,YAAY;AACrC,eAAK,OAAO;AAAA,QACd,WAAW,KAAK,YAAY;AAC1B,qBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,QAClC;AAAA,MACF;AAGA,qBAAe,iBAAiB,UAAU,aAAa;AAEvD,WAAK,IAAI,cAAc,MAAM;AAC3B,uBAAe,oBAAoB,UAAU,aAAa;AAAA,MAC5D,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA,IAKA,SAAS;AACP,UAAI,KAAK,WAAW;AAClB,cAAM,OAAO;AAAA,MACf;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
4
+ "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { isDev } from '../utils/is.js';\n\nexport interface withMountOnMediaQueryProps extends BaseProps {\n $options: {\n media: string;\n };\n}\n\nexport interface withMountOnMediaQueryInterface extends BaseInterface {\n /**\n * @private\n */\n __matches: boolean;\n $mount(): this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountOnMediaQuery<S extends Base = Base>(\n BaseClass: typeof Base,\n media,\n): BaseDecorator<withMountOnMediaQueryInterface, S, withMountOnMediaQueryProps> {\n /**\n * Class.\n */\n class WithMountOnMediaQuery<T extends BaseProps = BaseProps> extends BaseClass<\n T & withMountOnMediaQueryProps\n > {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...BaseClass.config,\n name: `${BaseClass.config.name}withMountOnMediaQuery`,\n options: {\n ...BaseClass.config?.options,\n media: String,\n },\n };\n\n /**\n * Is the media query matches?\n *\n * @private\n */\n __matches = false;\n\n /**\n * Listen for media query changes when the class in instantiated.\n *\n * @param {HTMLElement} element The component's root element.\n */\n constructor(element: HTMLElement) {\n super(element);\n\n if (isDev && !this.$options.media && !media) {\n this.$warn(\n 'Missing either \"$options.media\" or \"media\" argument in withMountOnMediaQuery decorator.',\n );\n return;\n }\n\n const mediaQueryList = window.matchMedia(this.$options.media || media);\n\n // Set initial value\n this.__matches = mediaQueryList.matches;\n\n const changeHandler = (event: MediaQueryListEvent) => {\n this.__matches = event.matches;\n\n if (event.matches && !this.$isMounted) {\n this.$mount();\n } else if (this.$isMounted) {\n setTimeout(() => this.$destroy());\n }\n };\n\n // Start listening for changes\n mediaQueryList.addEventListener('change', changeHandler);\n\n this.$on('terminated', () => {\n mediaQueryList.removeEventListener('change', changeHandler);\n });\n }\n\n /**\n * Override the mounting of the component.\n */\n async $mount() {\n if (this.__matches) {\n return super.$mount();\n }\n\n return this;\n }\n }\n\n // @ts-ignore\n return WithMountOnMediaQuery;\n}\n"],
5
+ "mappings": "AAEA,SAAS,aAAa;AAmBf,SAAS,sBACd,WACA,OAC8E;AAAA,EAI9E,MAAM,8BAA+D,UAEnE;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO,IAAI;AAAA,MAC9B,SAAS;AAAA,QACP,GAAG,UAAU,QAAQ;AAAA,QACrB,OAAO;AAAA,MACT;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOZ,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,SAAS,CAAC,KAAK,SAAS,SAAS,CAAC,OAAO;AAC3C,aAAK;AAAA,UACH;AAAA,QACF;AACA;AAAA,MACF;AAEA,YAAM,iBAAiB,OAAO,WAAW,KAAK,SAAS,SAAS,KAAK;AAGrE,WAAK,YAAY,eAAe;AAEhC,YAAM,gBAAgB,CAAC,UAA+B;AACpD,aAAK,YAAY,MAAM;AAEvB,YAAI,MAAM,WAAW,CAAC,KAAK,YAAY;AACrC,eAAK,OAAO;AAAA,QACd,WAAW,KAAK,YAAY;AAC1B,qBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,QAClC;AAAA,MACF;AAGA,qBAAe,iBAAiB,UAAU,aAAa;AAEvD,WAAK,IAAI,cAAc,MAAM;AAC3B,uBAAe,oBAAoB,UAAU,aAAa;AAAA,MAC5D,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,SAAS;AACb,UAAI,KAAK,WAAW;AAClB,eAAO,MAAM,OAAO;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
6
6
  "names": []
7
7
  }
@@ -55,9 +55,9 @@ function withMountWhenInView(BaseClass, defaultOptions = { threshold: [0, 1] })
55
55
  /**
56
56
  * Override the mounting of the component.
57
57
  */
58
- $mount() {
58
+ async $mount() {
59
59
  if (this.__isVisible) {
60
- super.$mount();
60
+ return super.$mount();
61
61
  }
62
62
  return this;
63
63
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../packages/js-toolkit/decorators/withMountWhenInView.ts"],
4
- "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\n\nexport interface WithMountWhenInViewProps extends BaseProps {\n $options: {\n intersectionObserver: IntersectionObserverInit;\n };\n}\n\nexport interface WithMountWhenInViewInterface extends BaseInterface {\n /**\n * @private\n */\n __isVisible: boolean;\n /**\n * @private\n */\n __observer: IntersectionObserver;\n $mount(): this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountWhenInView<S extends Base = Base>(\n BaseClass: typeof Base,\n // eslint-disable-next-line unicorn/no-object-as-default-parameter\n defaultOptions: IntersectionObserverInit = { threshold: [0, 1] },\n): BaseDecorator<WithMountWhenInViewInterface, S, WithMountWhenInViewProps> {\n /**\n * Class.\n */\n class WithMountWhenInView<T extends BaseProps = BaseProps> extends BaseClass<\n T & WithMountWhenInViewProps\n > {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...BaseClass.config,\n name: `${BaseClass.config.name}WithMountWhenInView`,\n options: {\n ...BaseClass.config?.options,\n intersectionObserver: Object,\n },\n };\n\n /**\n * Is the component visible?\n *\n * @private\n */\n __isVisible = false;\n\n /**\n * The component's observer.\n *\n * @private\n */\n __observer: IntersectionObserver;\n\n /**\n * Create an observer when the class in instantiated.\n *\n * @param {HTMLElement} element The component's root element.\n */\n constructor(element: HTMLElement) {\n super(element);\n\n this.__observer = new IntersectionObserver(\n (entries) => {\n const isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);\n if (this.__isVisible !== isVisible) {\n this.__isVisible = isVisible;\n\n if (isVisible) {\n this.$mount();\n } else {\n setTimeout(() => this.$destroy());\n }\n }\n },\n {\n ...defaultOptions,\n ...(this.$options as typeof this.$options & WithMountWhenInViewProps['$options'])\n .intersectionObserver,\n },\n );\n\n this.__observer.observe(this.$el);\n\n this.$on('terminated', () => {\n this.__observer.disconnect();\n });\n }\n\n /**\n * Override the mounting of the component.\n */\n $mount() {\n if (this.__isVisible) {\n super.$mount();\n }\n\n return this;\n }\n }\n\n // @ts-ignore\n return WithMountWhenInView;\n}\n"],
5
- "mappings": "AAwBO,SAAS,oBACd,WAEA,iBAA2C,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,GACW;AAAA,EAI1E,MAAM,4BAA6D,UAEjE;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO,IAAI;AAAA,MAC9B,SAAS;AAAA,QACP,GAAG,UAAU,QAAQ;AAAA,QACrB,sBAAsB;AAAA,MACxB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,aAAa,IAAI;AAAA,QACpB,CAAC,YAAY;AACX,gBAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,UAAU,OAAO,MAAM,gBAAgB,KAAK;AACnF,cAAI,KAAK,gBAAgB,WAAW;AAClC,iBAAK,cAAc;AAEnB,gBAAI,WAAW;AACb,mBAAK,OAAO;AAAA,YACd,OAAO;AACL,yBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,YAClC;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,KAAK,SACN;AAAA,QACL;AAAA,MACF;AAEA,WAAK,WAAW,QAAQ,KAAK,GAAG;AAEhC,WAAK,IAAI,cAAc,MAAM;AAC3B,aAAK,WAAW,WAAW;AAAA,MAC7B,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA,IAKA,SAAS;AACP,UAAI,KAAK,aAAa;AACpB,cAAM,OAAO;AAAA,MACf;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
4
+ "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\n\nexport interface WithMountWhenInViewProps extends BaseProps {\n $options: {\n intersectionObserver: IntersectionObserverInit;\n };\n}\n\nexport interface WithMountWhenInViewInterface extends BaseInterface {\n /**\n * @private\n */\n __isVisible: boolean;\n /**\n * @private\n */\n __observer: IntersectionObserver;\n $mount(): this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountWhenInView<S extends Base = Base>(\n BaseClass: typeof Base,\n // eslint-disable-next-line unicorn/no-object-as-default-parameter\n defaultOptions: IntersectionObserverInit = { threshold: [0, 1] },\n): BaseDecorator<WithMountWhenInViewInterface, S, WithMountWhenInViewProps> {\n /**\n * Class.\n */\n class WithMountWhenInView<T extends BaseProps = BaseProps> extends BaseClass<\n T & WithMountWhenInViewProps\n > {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...BaseClass.config,\n name: `${BaseClass.config.name}WithMountWhenInView`,\n options: {\n ...BaseClass.config?.options,\n intersectionObserver: Object,\n },\n };\n\n /**\n * Is the component visible?\n *\n * @private\n */\n __isVisible = false;\n\n /**\n * The component's observer.\n *\n * @private\n */\n __observer: IntersectionObserver;\n\n /**\n * Create an observer when the class in instantiated.\n *\n * @param {HTMLElement} element The component's root element.\n */\n constructor(element: HTMLElement) {\n super(element);\n\n this.__observer = new IntersectionObserver(\n (entries) => {\n const isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);\n if (this.__isVisible !== isVisible) {\n this.__isVisible = isVisible;\n\n if (isVisible) {\n this.$mount();\n } else {\n setTimeout(() => this.$destroy());\n }\n }\n },\n {\n ...defaultOptions,\n ...(this.$options as typeof this.$options & WithMountWhenInViewProps['$options'])\n .intersectionObserver,\n },\n );\n\n this.__observer.observe(this.$el);\n\n this.$on('terminated', () => {\n this.__observer.disconnect();\n });\n }\n\n /**\n * Override the mounting of the component.\n */\n async $mount() {\n if (this.__isVisible) {\n return super.$mount();\n }\n\n return this;\n }\n }\n\n // @ts-ignore\n return WithMountWhenInView;\n}\n"],
5
+ "mappings": "AAwBO,SAAS,oBACd,WAEA,iBAA2C,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,GACW;AAAA,EAI1E,MAAM,4BAA6D,UAEjE;AAAA;AAAA;AAAA;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO,IAAI;AAAA,MAC9B,SAAS;AAAA,QACP,GAAG,UAAU,QAAQ;AAAA,QACrB,sBAAsB;AAAA,MACxB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,aAAa,IAAI;AAAA,QACpB,CAAC,YAAY;AACX,gBAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,UAAU,OAAO,MAAM,gBAAgB,KAAK;AACnF,cAAI,KAAK,gBAAgB,WAAW;AAClC,iBAAK,cAAc;AAEnB,gBAAI,WAAW;AACb,mBAAK,OAAO;AAAA,YACd,OAAO;AACL,yBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,YAClC;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,KAAK,SACN;AAAA,QACL;AAAA,MACF;AAEA,WAAK,WAAW,QAAQ,KAAK,GAAG;AAEhC,WAAK,IAAI,cAAc,MAAM;AAC3B,aAAK,WAAW,WAAW;AAAA,MAC7B,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,SAAS;AACb,UAAI,KAAK,aAAa;AACpB,eAAO,MAAM,OAAO;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
6
6
  "names": []
7
7
  }
@@ -5,7 +5,8 @@ function createApp(App, options = {}) {
5
5
  const {
6
6
  root = document.body,
7
7
  breakpoints = null,
8
- blocking = null
8
+ blocking = null,
9
+ attributes = null
9
10
  } = options instanceof HTMLElement ? { root: options } : options;
10
11
  if (isObject(breakpoints)) {
11
12
  features.set("breakpoints", breakpoints);
@@ -13,13 +14,17 @@ function createApp(App, options = {}) {
13
14
  if (isBoolean(blocking)) {
14
15
  features.set("blocking", blocking);
15
16
  }
16
- function init() {
17
- app = new App(root).$mount();
17
+ if (isObject(attributes)) {
18
+ features.set("attributes", attributes);
19
+ }
20
+ async function init() {
21
+ app = new App(root);
22
+ await app.$mount();
18
23
  return app;
19
24
  }
20
25
  let p;
21
26
  if (features.get("blocking")) {
22
- p = Promise.resolve(init());
27
+ p = init();
23
28
  } else {
24
29
  p = new Promise((resolve) => {
25
30
  if (document.readyState === "complete") {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../packages/js-toolkit/helpers/createApp.ts"],
4
- "sourcesContent": ["import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport type { Features } from '../Base/features.js';\nimport { features } from '../Base/features.js';\nimport { isBoolean, isObject } from '../utils/index.js';\n\nexport type CreateAppOptions = Partial<Features> & {\n root?: HTMLElement;\n};\n\n/**\n * Instantiate and mount the given component on the given root element when the page has been loaded\n * and return a function to use the app instance when it is ready.\n */\nexport default function createApp<S extends BaseConstructor<Base>, T extends BaseProps = BaseProps>(\n App: S,\n options: HTMLElement | CreateAppOptions = {},\n): () => Promise<S & Base<T>> {\n let app: S & Base<T>;\n const {\n root = document.body,\n breakpoints = null,\n blocking = null,\n } = options instanceof HTMLElement ? { root: options } : options;\n\n if (isObject(breakpoints)) {\n features.set('breakpoints', breakpoints);\n }\n\n if (isBoolean(blocking)) {\n features.set('blocking', blocking);\n }\n\n function init() {\n app = (new App(root) as S & Base<T>).$mount();\n return app;\n }\n\n let p: Promise<S & Base<T>>;\n\n if (features.get('blocking')) {\n p = Promise.resolve(init());\n } else {\n p = new Promise<S & Base<T>>((resolve) => {\n if (document.readyState === 'complete') {\n resolve(init());\n } else {\n document.addEventListener('readystatechange', () => {\n if (document.readyState === 'complete') {\n resolve(init());\n }\n });\n }\n });\n }\n\n return () => p;\n}\n"],
5
- "mappings": "AAEA,SAAS,gBAAgB;AACzB,SAAS,WAAW,gBAAgB;AAUrB,SAAR,UACL,KACA,UAA0C,CAAC,GACf;AAC5B,MAAI;AACJ,QAAM;AAAA,IACJ,OAAO,SAAS;AAAA,IAChB,cAAc;AAAA,IACd,WAAW;AAAA,EACb,IAAI,mBAAmB,cAAc,EAAE,MAAM,QAAQ,IAAI;AAEzD,MAAI,SAAS,WAAW,GAAG;AACzB,aAAS,IAAI,eAAe,WAAW;AAAA,EACzC;AAEA,MAAI,UAAU,QAAQ,GAAG;AACvB,aAAS,IAAI,YAAY,QAAQ;AAAA,EACnC;AAEA,WAAS,OAAO;AACd,UAAO,IAAI,IAAI,IAAI,EAAkB,OAAO;AAC5C,WAAO;AAAA,EACT;AAEA,MAAI;AAEJ,MAAI,SAAS,IAAI,UAAU,GAAG;AAC5B,QAAI,QAAQ,QAAQ,KAAK,CAAC;AAAA,EAC5B,OAAO;AACL,QAAI,IAAI,QAAqB,CAAC,YAAY;AACxC,UAAI,SAAS,eAAe,YAAY;AACtC,gBAAQ,KAAK,CAAC;AAAA,MAChB,OAAO;AACL,iBAAS,iBAAiB,oBAAoB,MAAM;AAClD,cAAI,SAAS,eAAe,YAAY;AACtC,oBAAQ,KAAK,CAAC;AAAA,UAChB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,MAAM;AACf;",
4
+ "sourcesContent": ["import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport type { Features } from '../Base/features.js';\nimport { features } from '../Base/features.js';\nimport { isBoolean, isObject } from '../utils/index.js';\n\nexport type CreateAppOptions = Partial<Features> & {\n root?: HTMLElement;\n};\n\n/**\n * Instantiate and mount the given component on the given root element when the page has been loaded\n * and return a function to use the app instance when it is ready.\n */\nexport default function createApp<S extends BaseConstructor<Base>, T extends BaseProps = BaseProps>(\n App: S,\n options: HTMLElement | CreateAppOptions = {},\n): () => Promise<S & Base<T>> {\n let app: S & Base<T>;\n const {\n root = document.body,\n breakpoints = null,\n blocking = null,\n attributes = null,\n } = options instanceof HTMLElement ? { root: options } : options;\n\n if (isObject(breakpoints)) {\n features.set('breakpoints', breakpoints);\n }\n\n if (isBoolean(blocking)) {\n features.set('blocking', blocking);\n }\n\n if (isObject(attributes)) {\n features.set('attributes', attributes);\n }\n\n async function init() {\n app = (new App(root) as S & Base<T>)\n await app.$mount();\n return app;\n }\n\n let p: Promise<S & Base<T>>;\n\n if (features.get('blocking')) {\n p = init();\n } else {\n p = new Promise<S & Base<T>>((resolve) => {\n if (document.readyState === 'complete') {\n resolve(init());\n } else {\n document.addEventListener('readystatechange', () => {\n if (document.readyState === 'complete') {\n resolve(init());\n }\n });\n }\n });\n }\n\n return () => p;\n}\n"],
5
+ "mappings": "AAEA,SAAS,gBAAgB;AACzB,SAAS,WAAW,gBAAgB;AAUrB,SAAR,UACL,KACA,UAA0C,CAAC,GACf;AAC5B,MAAI;AACJ,QAAM;AAAA,IACJ,OAAO,SAAS;AAAA,IAChB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,aAAa;AAAA,EACf,IAAI,mBAAmB,cAAc,EAAE,MAAM,QAAQ,IAAI;AAEzD,MAAI,SAAS,WAAW,GAAG;AACzB,aAAS,IAAI,eAAe,WAAW;AAAA,EACzC;AAEA,MAAI,UAAU,QAAQ,GAAG;AACvB,aAAS,IAAI,YAAY,QAAQ;AAAA,EACnC;AAEA,MAAI,SAAS,UAAU,GAAG;AACxB,aAAS,IAAI,cAAc,UAAU;AAAA,EACvC;AAEA,iBAAe,OAAO;AACpB,UAAO,IAAI,IAAI,IAAI;AACnB,UAAM,IAAI,OAAO;AACjB,WAAO;AAAA,EACT;AAEA,MAAI;AAEJ,MAAI,SAAS,IAAI,UAAU,GAAG;AAC5B,QAAI,KAAK;AAAA,EACX,OAAO;AACL,QAAI,IAAI,QAAqB,CAAC,YAAY;AACxC,UAAI,SAAS,eAAe,YAAY;AACtC,gBAAQ,KAAK,CAAC;AAAA,MAChB,OAAO;AACL,iBAAS,iBAAiB,oBAAoB,MAAM;AAClD,cAAI,SAAS,eAAe,YAAY;AACtC,oBAAQ,KAAK,CAAC;AAAA,UAChB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,MAAM;AACf;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@studiometa/js-toolkit",
3
- "version": "3.0.0-alpha.5",
3
+ "version": "3.0.0-alpha.6",
4
4
  "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -1,4 +0,0 @@
1
- import { AbstractManager } from './AbstractManager.js';
2
- export declare class ActionManager extends AbstractManager {
3
- registerAll(): void;
4
- }
@@ -1,10 +0,0 @@
1
- import { AbstractManager } from "./AbstractManager.js";
2
- class ActionManager extends AbstractManager {
3
- registerAll() {
4
- this.__element.querySelectorAll("[data-on]");
5
- }
6
- }
7
- export {
8
- ActionManager
9
- };
10
- //# sourceMappingURL=ActionManager.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../packages/js-toolkit/Base/managers/ActionManager.ts"],
4
- "sourcesContent": ["import { AbstractManager } from './AbstractManager.js';\n\nexport class ActionManager extends AbstractManager {\n registerAll() {\n this.__element.querySelectorAll('[data-on]');\n }\n}\n"],
5
- "mappings": "AAAA,SAAS,uBAAuB;AAEzB,MAAM,sBAAsB,gBAAgB;AAAA,EACjD,cAAc;AACZ,SAAK,UAAU,iBAAiB,WAAW;AAAA,EAC7C;AACF;",
6
- "names": []
7
- }