@studiometa/js-toolkit 2.0.0-alpha.4 → 2.0.0-alpha.8

package/README.md

@@ -1,8 +1,8 @@
 # JS Toolkit
 
 [![NPM Version](https://img.shields.io/npm/v/@studiometa/js-toolkit.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/js-toolkit/)
-[![Dependency Status](https://img.shields.io/david/studiometa/js-toolkit.svg?label=deps&style=flat-square)](https://david-dm.org/studiometa/js-toolkit)
-[![devDependency Status](https://img.shields.io/david/dev/studiometa/js-toolkit.svg?label=devDeps&style=flat-square)](https://david-dm.org/studiometa/js-toolkit?type=dev)
+[![Size](https://img.shields.io/bundlephobia/minzip/@studiometa/js-toolkit?label=size&style=flat-square)](https://bundlephobia.com/package/@studiometa/js-toolkit)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@studiometa/js-toolkit?style=flat-square)](https://david-dm.org/studiometa/js-toolkit)
 ![Codecov](https://img.shields.io/codecov/c/github/studiometa/js-toolkit?style=flat-square)
 
 > A set of useful little bits of JavaScript to boost your project! 🚀
@@ -15,29 +15,19 @@ Install the latest version via NPM:
 npm install @studiometa/js-toolkit
 ```
 
-The package can be used directly with the [Skypack CDN](https://www.skypack.dev) as follow:
-
-```html
-<script type="module">
-  // Import the Base class
-  import Base from 'https://cdn.skypack.dev/@studiometa/js-toolkit/';
-  // Import the full toolkit
-  import * as components from 'https://cdn.skypack.dev/@studiometa/js-toolkit/components';
-  import * as decorators from 'https://cdn.skypack.dev/@studiometa/js-toolkit/decorators';
-  import * as services from 'https://cdn.skypack.dev/@studiometa/js-toolkit/services';
-  import * as utils from 'https://cdn.skypack.dev/@studiometa/js-toolkit/utils';
-</script>
-```
-
 ## Usage
 
-### Modern JS with bundler
-
-Import the `Base` class to create your components from your `node_modules`:
+Import the `Base` class and extend it to create your components:
 
 ```js
-import Base from '@studiometa/js-toolkit';
-import Modal from '@studiometa/js-toolkit/components/Modal';
+import { Base } from '@studiometa/js-toolkit';
+import Modal from '@studiometa/ui/Modal';
+
+class Component {
+  static config = {
+    name: 'Component',
+  }
+}
 
 class App extends Base {
   static config = {
@@ -46,6 +36,7 @@ class App extends Base {
     debug: true,
     components: {
       Modal,
+      Component,
     },
     refs: ['btn', 'items[]'],
     options: {
@@ -90,53 +81,4 @@ export default new App(document.querySelector('#app'));
 
 Read the [documentation](https://js-toolkit.meta.fr/) to learn more.
 
-### Modern JS in browser
-
-Two modern builds are provided for prototyping purpose, they can be used as follow:
 
-```html
-<script type="module">
-  // Import the Base class
-  import Base from 'https://cdn.skypack.dev/@studiometa/js-toolkit/';
-  // Import the full toolkit
-  import Modal from 'https://cdn.skypack.dev/@studiometa/js-toolkit/components/Modal';
-</script>
-```
-
-### Legacy JS
-
-Two UMD builds are also provided to be used in legacy projects.
-
-```html
-<div id="app">
-  <button data-ref="btn">Add more</button>
-  <input data-ref="input" value="0" readonly />
-  <div data-component="Component"></div>
-</div>
-<script src="https://unpkg.com/@studiometa/js-toolkit/index.umd.js"></script>
-<script>
-  var Component = Base.defineComponent({
-    config: {
-      name: 'Component',
-    },
-  });
-
-  Base.createBase(document.querySelector('#app'), {
-    config: {
-      name: 'App',
-      log: true,
-      components: {
-        Component: Component,
-      },
-    },
-    mounted: function() {
-      this.$log('mounted');
-    },
-    methods: {
-      onBtnClick: function() {
-        this.$refs.input.value = Number(this.$refs.input.value) + 1;
-      },
-    },
-  });
-</script>
-```

package/decorators/index.js

@@ -4,5 +4,4 @@ import withDrag from './withDrag.js';
 import withExtraConfig from './withExtraConfig.js';
 import withIntersectionObserver from './withIntersectionObserver.js';
 import withMountWhenInView from './withMountWhenInView.js';
-export { withBreakpointManager, withBreakpointObserver, withDrag, withExtraConfig, withIntersectionObserver, withMountWhenInView };
-//# sourceMappingURL=index.js.map
+export { withBreakpointManager, withBreakpointObserver, withDrag, withExtraConfig, withIntersectionObserver, withMountWhenInView };

package/decorators/withBreakpointManager.d.ts

@@ -1,10 +1,10 @@
 /**
  * BreakpointManager class.
- * @template {BaseComponent} T
+ * @template {BaseConstructor} T
  * @param {T} BaseClass
- * @param {Array<[String, BaseComponent]>} breakpoints
+ * @param {Array<[String, BaseConstructor]>} breakpoints
  * @return {T}
  */
-export default function withBreakpointManager<T extends typeof import("../Base").default>(BaseClass: T, breakpoints: Array<[string, BaseComponent]>): T;
+export default function withBreakpointManager<T extends typeof import("../Base").default>(BaseClass: T, breakpoints: Array<[string, BaseConstructor]>): T;
 export type Base = import('../Base').default;
-export type BaseComponent = import('../Base').BaseComponent;
+export type BaseConstructor = import('../Base').BaseConstructor;

package/decorators/withBreakpointManager.js

@@ -78,5 +78,4 @@ export default function withBreakpointManager(BaseClass, breakpoints) {
     }
 
   };
-}
-//# sourceMappingURL=withBreakpointManager.js.map
+}

package/decorators/withBreakpointObserver.d.ts

@@ -1,13 +1,13 @@
 /**
  * BreakpointObserver class.
  *
- * @template {BaseComponent} T
+ * @template {BaseConstructor} T
  * @param {T} BaseClass The Base class to extend from.
  * @return {T}
  */
 export default function withBreakpointObserver<T extends typeof import("../Base").default>(BaseClass: T): T;
 export type Base = import('../Base').default;
-export type BaseComponent = import('../Base').BaseComponent;
+export type BaseConstructor = import('../Base').BaseConstructor;
 export type WithBreakpointObserverOptions = {
     activeBreakpoints?: string;
     inactiveBreakpoints?: string;

package/decorators/withBreakpointObserver.js

@@ -130,5 +130,4 @@ export default function withBreakpointObserver(BaseClass) {
       inactiveBreakpoints: String
     })
   })), _temp;
-}
-//# sourceMappingURL=withBreakpointObserver.js.map
+}

package/decorators/withDrag.d.ts

@@ -1,6 +1,6 @@
 /**
  * @typedef {import('../Base').default} Base
- * @typedef {import('../Base').BaseComponent} BaseComponent
+ * @typedef {import('../Base').BaseConstructor} BaseConstructor
  * @typedef {import('../services/drag').DragServiceOptions} DragServiceOptions
  */
 /**
@@ -9,14 +9,14 @@
 /**
  * Add dragging capabilities to a component.
  *
- * @template {BaseComponent} T
+ * @template {BaseConstructor} T
  * @param {T} BaseClass
  * @param {DragDecoratorOptions} options
  * @return {T}
  */
 export default function withDrag<T extends typeof import("../Base").default>(BaseClass: T, options?: DragDecoratorOptions): T;
 export type Base = import('../Base').default;
-export type BaseComponent = import('../Base').BaseComponent;
+export type BaseConstructor = import('../Base').BaseConstructor;
 export type DragServiceOptions = import('../services/drag').DragServiceOptions;
 export type DragDecoratorOptions = import("../services/drag.js").DragServiceOptions & {
     target: (this: Base) => HTMLElement;

package/decorators/withDrag.js

@@ -28,5 +28,4 @@ export default function withDrag(BaseClass) {
     }
 
   };
-}
-//# sourceMappingURL=withDrag.js.map
+}

package/decorators/withExtraConfig.d.ts

@@ -1,12 +1,12 @@
 /**
  * @typedef {import('deepmerge').Options} DeepmergeOptions
  * @typedef {import('../Base').BaseConfig} BaseConfig
- * @typedef {import('../Base').BaseComponent} BaseComponent
+ * @typedef {import('../Base').BaseConstructor} BaseConstructor
  */
 /**
  * Extends the configuration of an existing class.
  *
- * @template {BaseComponent} T
+ * @template {BaseConstructor} T
  * @param {T} BaseClass The Base class to extend.
  * @param {Partial<BaseConfig>} config Extra configuration to merge.
  * @param {DeepmergeOptions} options Options for the `deepmerge` function. {@link https://github.com/TehShrike/deepmerge#options}
@@ -15,4 +15,4 @@
 export default function withExtraConfig<T extends typeof import("../Base").default>(BaseClass: T, config: Partial<BaseConfig>, options?: DeepmergeOptions): T;
 export type DeepmergeOptions = import('deepmerge').Options;
 export type BaseConfig = import('../Base').BaseConfig;
-export type BaseComponent = import('../Base').BaseComponent;
+export type BaseConstructor = import('../Base').BaseConstructor;

package/decorators/withExtraConfig.js

@@ -11,5 +11,4 @@ export default function withExtraConfig(BaseClass, config) {
   }
 
   return _temp = _class = class extends BaseClass {}, _defineProperty(_class, "config", newConfig), _temp;
-}
-//# sourceMappingURL=withExtraConfig.js.map
+}

package/decorators/withIntersectionObserver.d.ts

@@ -1,7 +1,7 @@
 /**
  * IntersectionObserver decoration.
  *
- * @template {BaseComponent} T
+ * @template {BaseConstructor} T
  * @param {T} BaseClass The Base class to extend.
  * @param {Object} [defaultOptions] The options for the IntersectionObserver instance.
  * @return {T & { new: (element:HTMLElement) => { $observer: IntersectionObserver }}}
@@ -12,7 +12,7 @@ export default function withIntersectionObserver<T extends typeof import("../Bas
     };
 };
 export type Base = import('../Base').default;
-export type BaseComponent = import('../Base').BaseComponent;
+export type BaseConstructor = import('../Base').BaseConstructor;
 export type WithIntersectionObserverOptions = {
     intersectionObserver: any;
 };

package/decorators/withIntersectionObserver.js

@@ -15,10 +15,6 @@ export default function withIntersectionObserver(BaseClass) {
     threshold: createArrayOfNumber(100)
   };
   return _temp = _class = class extends BaseClass {
-    get __excludeFromAutoBind() {
-      return [...(super.__excludeFromAutoBind || []), 'intersected'];
-    }
-
     constructor(element) {
       super(element);
 
@@ -32,11 +28,6 @@ export default function withIntersectionObserver(BaseClass) {
         this.$emit('intersected', entries);
         this.intersected(entries);
       }, _objectSpread(_objectSpread({}, defaultOptions), this.$options.intersectionObserver || {}));
-
-      if (this.$isMounted) {
-        this.$observer.observe(this.$el);
-      }
-
       this.$on('mounted', () => {
         this.$observer.observe(this.$el);
       });
@@ -52,5 +43,4 @@ export default function withIntersectionObserver(BaseClass) {
       intersectionObserver: Object
     })
   })), _temp;
-}
-//# sourceMappingURL=withIntersectionObserver.js.map
+}

package/decorators/withMountWhenInView.d.ts

@@ -1,7 +1,7 @@
 /**
  * @typedef {import('../Base').default} Base
  * @typedef {import('../Base').BaseOptions} BaseOptions
- * @typedef {import('../Base').BaseComponent} BaseComponent
+ * @typedef {import('../Base').BaseConstructor} BaseConstructor
  */
 /**
  * @typedef {Object} WithMountWhenInViewOptions
@@ -15,7 +15,7 @@
 /**
  * IntersectionObserver decoration.
  *
- * @template {BaseComponent} T
+ * @template {BaseConstructor} T
  * @param {T} BaseClass The Base class to extend.
  * @param {Object} [defaultOptions] The options for the IntersectionObserver instance.
  * @return {T}
@@ -23,7 +23,7 @@
 export default function withMountWhenInView<T extends typeof import("../Base").default>(BaseClass: T, defaultOptions?: any): T;
 export type Base = import('../Base').default;
 export type BaseOptions = import('../Base').BaseOptions;
-export type BaseComponent = import('../Base').BaseComponent;
+export type BaseConstructor = import('../Base').BaseConstructor;
 export type WithMountWhenInViewOptions = {
     intersectionObserver: any;
 };

package/decorators/withMountWhenInView.js

@@ -59,5 +59,4 @@ export default function withMountWhenInView(BaseClass) {
       intersectionObserver: Object
     })
   })), _temp;
-}
-//# sourceMappingURL=withMountWhenInView.js.map
+}

package/helpers/createApp.d.ts

@@ -1,5 +1,5 @@
 /**
- * @typedef {import('../Base/index.js').BaseComponent} BaseComponent
+ * @typedef {import('../Base/index.js').BaseConstructor} BaseConstructor
  */
 /**
  * Instantiate and mount the given component on the given root element when the page has been loaded
@@ -26,7 +26,7 @@
  * console.log(app.$options.name); // 'App'
  * ```
  *
- * @template {BaseComponent} T
+ * @template {BaseConstructor} T
  * @param {T} App
  * @param {HTMLElement} rootElement
  *
@@ -34,4 +34,4 @@
  *
  */
 export default function createApp<T extends typeof import("../Base/index.js").default>(App: T, rootElement: HTMLElement): () => Promise<InstanceType<T>>;
-export type BaseComponent = import('../Base/index.js').BaseComponent;
+export type BaseConstructor = import('../Base/index.js').BaseConstructor;

package/helpers/createApp.js

@@ -13,18 +13,18 @@ export default function createApp(App, rootElement) {
     app = new App(rootElement).$mount();
   }
 
+  var promise = new Promise(resolve => {
+    document.addEventListener('readystatechange', () => {
+      if (document.readyState === 'complete') {
+        setTimeout(() => resolve(app), 0);
+      }
+    });
+  });
   return function useApp() {
     if (isLoaded) {
       return Promise.resolve(app);
     }
 
-    return new Promise(resolve => {
-      document.addEventListener('readystatechange', () => {
-        if (document.readyState === 'complete') {
-          setTimeout(() => resolve(app), 0);
-        }
-      });
-    });
+    return promise;
   };
-}
-//# sourceMappingURL=createApp.js.map
+}

package/helpers/importOnInteraction.d.ts

@@ -1,11 +1,11 @@
 /**
- * @typedef {import('../Base/index.js').BaseComponent} BaseComponent
+ * @typedef {import('../Base/index.js').BaseConstructor} BaseConstructor
  * @typedef {import('../Base/index.js').default} Base
  */
 /**
  * Import a component on an interaction.
  *
- * @template {BaseComponent} T
+ * @template {BaseConstructor} T
  *
  * @param {() => Promise<T|{default:T}>} fn
  *   The import function.
@@ -21,5 +21,5 @@
 export default function importOnInteraction<T extends typeof import("../Base/index.js").default>(fn: () => Promise<T | {
     default: T;
 }>, nameOrSelectorOrElement: string | HTMLElement | HTMLElement[], events: string | string[], parent?: Base | undefined): Promise<T>;
-export type BaseComponent = import('../Base/index.js').BaseComponent;
+export type BaseConstructor = import('../Base/index.js').BaseConstructor;
 export type Base = import('../Base/index.js').default;

package/helpers/importOnInteraction.js

@@ -28,5 +28,4 @@ export default function importOnInteraction(fn, nameOrSelectorOrElement, events,
       });
     });
   });
-}
-//# sourceMappingURL=importOnInteraction.js.map
+}

package/helpers/importWhenIdle.d.ts

@@ -1,11 +1,11 @@
 /**
- * @typedef {import('../Base/index.js').BaseComponent} BaseComponent
+ * @typedef {import('../Base/index.js').BaseConstructor} BaseConstructor
  * @typedef {{ timeout?: number }} ImportWhenIdleOptions
  */
 /**
  * Import a component when user is idle.
  *
- * @template {BaseComponent} T
+ * @template {BaseConstructor} T
  *
  * @param {() => Promise<T|{default:T}>} fn
  *   The import function.
@@ -17,7 +17,7 @@
 export default function importWhenIdle<T extends typeof import("../Base/index.js").default>(fn: () => Promise<T | {
     default: T;
 }>, options?: ImportWhenIdleOptions | undefined): Promise<T>;
-export type BaseComponent = import('../Base/index.js').BaseComponent;
+export type BaseConstructor = import('../Base/index.js').BaseConstructor;
 export type ImportWhenIdleOptions = {
     timeout?: number;
 };

package/helpers/importWhenIdle.js

@@ -27,5 +27,4 @@ export default function importWhenIdle(fn, options) {
       });
     }
   });
-}
-//# sourceMappingURL=importWhenIdle.js.map
+}

package/helpers/importWhenVisible.d.ts

@@ -1,11 +1,11 @@
 /**
  * @typedef {import('../Base/index.js').default} Base
- * @typedef {import('../Base/index.js').BaseComponent} BaseComponent
+ * @typedef {import('../Base/index.js').BaseConstructor} BaseConstructor
  */
 /**
  * Import a component when it is visible.
  *
- * @template {BaseComponent} T
+ * @template {BaseConstructor} T
  *
  * @param {() => Promise<T|{default:T}>} fn
  *   The import function.
@@ -22,4 +22,4 @@ export default function importWhenVisible<T extends typeof import("../Base/index
     default: T;
 }>, nameOrSelectorOrElement: string | HTMLElement | HTMLElement[], parent?: Base | undefined, observerOptions?: IntersectionObserverInit | undefined): Promise<T>;
 export type Base = import('../Base/index.js').default;
-export type BaseComponent = import('../Base/index.js').BaseComponent;
+export type BaseConstructor = import('../Base/index.js').BaseConstructor;

package/helpers/importWhenVisible.js

@@ -27,5 +27,4 @@ export default function importWhenVisible(fn, nameOrSelectorOrElement, parent) {
     var elements = getTargetElements(nameOrSelectorOrElement, parent === null || parent === void 0 ? void 0 : parent.$el);
     elements.forEach(element => observer.observe(element));
   });
-}
-//# sourceMappingURL=importWhenVisible.js.map
+}

package/helpers/index.js

@@ -2,5 +2,4 @@ import createApp from './createApp.js';
 import importOnInteraction from './importOnInteraction.js';
 import importWhenIdle from './importWhenIdle.js';
 import importWhenVisible from './importWhenVisible.js';
-export { createApp, importOnInteraction, importWhenIdle, importWhenVisible };
-//# sourceMappingURL=index.js.map
+export { createApp, importOnInteraction, importWhenIdle, importWhenVisible };

package/helpers/utils.js

@@ -9,5 +9,4 @@ export function getTargetElements(nameOrSelectorOrElement, context) {
   }
 
   return nameOrSelectorOrElement;
-}
-//# sourceMappingURL=utils.js.map
+}

package/index.d.ts

@@ -10,10 +10,10 @@ import { usePointer } from "./services/index.js";
 import { useRaf } from "./services/index.js";
 import { useResize } from "./services/index.js";
 import { useScroll } from "./services/index.js";
-import { withDrag } from "./decorators/index.js";
 import { withBreakpointManager } from "./decorators/index.js";
 import { withBreakpointObserver } from "./decorators/index.js";
+import { withDrag } from "./decorators/index.js";
 import { withExtraConfig } from "./decorators/index.js";
 import { withIntersectionObserver } from "./decorators/index.js";
 import { withMountWhenInView } from "./decorators/index.js";
-export { Base, createApp, importOnInteraction, importWhenIdle, importWhenVisible, useDrag, useKey, useLoad, usePointer, useRaf, useResize, useScroll, withDrag, withBreakpointManager, withBreakpointObserver, withExtraConfig, withIntersectionObserver, withMountWhenInView };
+export { Base, createApp, importOnInteraction, importWhenIdle, importWhenVisible, useDrag, useKey, useLoad, usePointer, useRaf, useResize, useScroll, withBreakpointManager, withBreakpointObserver, withDrag, withExtraConfig, withIntersectionObserver, withMountWhenInView };

package/index.js

@@ -2,5 +2,4 @@ import Base from './Base/index.js';
 import { withDrag, withBreakpointManager, withBreakpointObserver, withExtraConfig, withIntersectionObserver, withMountWhenInView } from './decorators/index.js';
 import { createApp, importOnInteraction, importWhenIdle, importWhenVisible } from './helpers/index.js';
 import { useDrag, useKey, useLoad, usePointer, useRaf, useResize, useScroll } from './services/index.js';
-export { Base, createApp, importOnInteraction, importWhenIdle, importWhenVisible, useDrag, useKey, useLoad, usePointer, useRaf, useResize, useScroll, withDrag, withBreakpointManager, withBreakpointObserver, withExtraConfig, withIntersectionObserver, withMountWhenInView };
-//# sourceMappingURL=index.js.map
+export { Base, createApp, importOnInteraction, importWhenIdle, importWhenVisible, useDrag, useKey, useLoad, usePointer, useRaf, useResize, useScroll, withBreakpointManager, withBreakpointObserver, withDrag, withExtraConfig, withIntersectionObserver, withMountWhenInView };