@studiometa/js-toolkit 2.12.1 → 3.0.0-alpha.10

package/helpers/createApp.js

@@ -1,20 +1,30 @@
 import { features } from "../Base/features.js";
-import { isDefined } from "../utils/index.js";
-function createApp(App, rootElement = document.body) {
+import { isBoolean, isObject } from "../utils/index.js";
+function createApp(App, options = {}) {
   let app;
-  const options = rootElement instanceof HTMLElement ? { root: rootElement, features: void 0 } : { root: document.body, ...rootElement };
-  if (isDefined(options.features)) {
-    for (const [feature, value] of Object.entries(options.features)) {
-      features.set(feature, value);
-    }
+  const {
+    root = document.body,
+    breakpoints = null,
+    blocking = null,
+    attributes = null
+  } = options instanceof HTMLElement ? { root: options } : options;
+  if (isObject(breakpoints)) {
+    features.set("breakpoints", breakpoints);
   }
-  function init() {
-    app = new App(options.root).$mount();
+  if (isBoolean(blocking)) {
+    features.set("blocking", blocking);
+  }
+  if (isObject(attributes)) {
+    features.set("attributes", attributes);
+  }
+  async function init() {
+    app = new App(root);
+    await app.$mount();
     return app;
   }
   let p;
-  if (features.get("asyncChildren")) {
-    p = Promise.resolve(init());
+  if (features.get("blocking")) {
+    p = init();
   } else {
     p = new Promise((resolve) => {
       if (document.readyState === "complete") {

package/helpers/createApp.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/createApp.ts"],
-  "sourcesContent": ["import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport type { Features } from '../Base/features.js';\nimport { features } from '../Base/features.js';\nimport { isDefined } from '../utils/index.js';\n\nexport type CreateAppOptions = {\n  root: HTMLElement;\n  features: Features;\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  rootElement: HTMLElement | Partial<CreateAppOptions> = document.body,\n): () => Promise<S & Base<T>> {\n  let app: S & Base<T>;\n  const options =\n    rootElement instanceof HTMLElement\n      ? { root: rootElement, features: undefined }\n      : { root: document.body, ...rootElement };\n\n  if (isDefined(options.features)) {\n    for (const [feature, value] of Object.entries(options.features as Features)) {\n      features.set(feature as keyof Features, value);\n    }\n  }\n\n  function init() {\n    app = (new App(options.root) as S & Base<T>).$mount();\n    return app;\n  }\n\n  let p: Promise<S & Base<T>>;\n\n  if (features.get('asyncChildren')) {\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"],
-  "mappings": "AAEA,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAWX,SAAR,UACL,KACA,cAAuD,SAAS,MACpC;AAC5B,MAAI;AACJ,QAAM,UACJ,uBAAuB,cACnB,EAAE,MAAM,aAAa,UAAU,OAAU,IACzC,EAAE,MAAM,SAAS,MAAM,GAAG,YAAY;AAE5C,MAAI,UAAU,QAAQ,QAAQ,GAAG;AAC/B,eAAW,CAAC,SAAS,KAAK,KAAK,OAAO,QAAQ,QAAQ,QAAoB,GAAG;AAC3E,eAAS,IAAI,SAA2B,KAAK;AAAA,IAC/C;AAAA,EACF;AAEA,WAAS,OAAO;AACd,UAAO,IAAI,IAAI,QAAQ,IAAI,EAAkB,OAAO;AACpD,WAAO;AAAA,EACT;AAEA,MAAI;AAEJ,MAAI,SAAS,IAAI,eAAe,GAAG;AACjC,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;",
+  "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"],
+  "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;",
   "names": []
 }

package/helpers/getDirectChildren.js

@@ -8,12 +8,17 @@ function getDirectChildren(parentInstance, parentName, childrenName) {
   if (!isArray(nestedParents) || nestedParents.length <= 0) {
     return children;
   }
-  return [...children].filter(
-    (child) => [...nestedParents].every((nestedParent) => {
+  const directChildren = [];
+  for (const child of children) {
+    for (const nestedParent of nestedParents) {
       const nestedChildren = nestedParent.$children[childrenName];
-      return isArray(nestedChildren) ? !nestedChildren.includes(child) : true;
-    })
-  );
+      if (isArray(nestedChildren) && nestedChildren.includes(child)) {
+        continue;
+      }
+      directChildren.push(child);
+    }
+  }
+  return directChildren;
 }
 function isDirectChild(parentInstance, parentName, childrenName, childInstance) {
   return getDirectChildren(parentInstance, parentName, childrenName).includes(childInstance);

package/helpers/getDirectChildren.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/getDirectChildren.ts"],
-  "sourcesContent": ["import { Base, BaseProps } from '../Base/index.js';\nimport { isArray } from '../utils/index.js';\n\n/**\n * Get direct children from a parent when working with nested components.\n *\n * @template {Base} T\n * @param   {Base} parentInstance\n * @param   {string} parentName\n * @param   {string} childrenName\n * @returns {T[]}\n */\nexport function getDirectChildren<T extends Base = Base>(\n  parentInstance: Base,\n  parentName: string,\n  childrenName: string,\n): T[] {\n  const children = parentInstance.$children[childrenName] as Base<BaseProps>[];\n  const nestedParents = parentInstance.$children[parentName] as Base<BaseProps>[];\n\n  if (!isArray(children)) {\n    return [];\n  }\n\n  if (!isArray(nestedParents) || nestedParents.length <= 0) {\n    return children as T[];\n  }\n\n  return [...children].filter((child) =>\n    [...nestedParents].every((nestedParent) => {\n      const nestedChildren = nestedParent.$children[childrenName] as Base<BaseProps>[];\n      /* istanbul ignore next */\n      return isArray(nestedChildren) ? !nestedChildren.includes(child) : true;\n    }),\n  ) as T[];\n}\n\n/**\n * Test if a component instance is a direct child from the given component.\n *\n * @param   {Base}    parentInstance\n * @param   {string}  parentName\n * @param   {string}  childrenName\n * @param   {Base}    childInstance\n * @returns {boolean}\n */\nexport function isDirectChild(parentInstance, parentName, childrenName, childInstance) {\n  return getDirectChildren(parentInstance, parentName, childrenName).includes(childInstance);\n}\n"],
-  "mappings": "AACA,SAAS,eAAe;AAWjB,SAAS,kBACd,gBACA,YACA,cACK;AACL,QAAM,WAAW,eAAe,UAAU,YAAY;AACtD,QAAM,gBAAgB,eAAe,UAAU,UAAU;AAEzD,MAAI,CAAC,QAAQ,QAAQ,GAAG;AACtB,WAAO,CAAC;AAAA,EACV;AAEA,MAAI,CAAC,QAAQ,aAAa,KAAK,cAAc,UAAU,GAAG;AACxD,WAAO;AAAA,EACT;AAEA,SAAO,CAAC,GAAG,QAAQ,EAAE;AAAA,IAAO,CAAC,UAC3B,CAAC,GAAG,aAAa,EAAE,MAAM,CAAC,iBAAiB;AACzC,YAAM,iBAAiB,aAAa,UAAU,YAAY;AAE1D,aAAO,QAAQ,cAAc,IAAI,CAAC,eAAe,SAAS,KAAK,IAAI;AAAA,IACrE,CAAC;AAAA,EACH;AACF;AAWO,SAAS,cAAc,gBAAgB,YAAY,cAAc,eAAe;AACrF,SAAO,kBAAkB,gBAAgB,YAAY,YAAY,EAAE,SAAS,aAAa;AAC3F;",
+  "sourcesContent": ["import { Base, BaseProps } from '../Base/index.js';\nimport { isArray } from '../utils/index.js';\n\n/**\n * Get direct children from a parent when working with nested components.\n *\n * @template {Base} T\n * @param   {Base} parentInstance\n * @param   {string} parentName\n * @param   {string} childrenName\n * @returns {T[]}\n */\nexport function getDirectChildren<T extends Base = Base>(\n  parentInstance: Base,\n  parentName: string,\n  childrenName: string,\n): T[] {\n  const children = parentInstance.$children[childrenName] as Base<BaseProps>[];\n  const nestedParents = parentInstance.$children[parentName] as Base<BaseProps>[];\n\n  if (!isArray(children)) {\n    return [];\n  }\n\n  if (!isArray(nestedParents) || nestedParents.length <= 0) {\n    return children as T[];\n  }\n\n  const directChildren = [];\n\n  for (const child of children) {\n    for (const nestedParent of nestedParents) {\n      const nestedChildren = nestedParent.$children[childrenName] as Base<BaseProps>[];\n\n      if (isArray(nestedChildren) && nestedChildren.includes(child)) {\n        continue;\n      }\n\n      directChildren.push(child);\n    }\n  }\n\n  return directChildren;\n}\n\n/**\n * Test if a component instance is a direct child from the given component.\n *\n * @param   {Base}    parentInstance\n * @param   {string}  parentName\n * @param   {string}  childrenName\n * @param   {Base}    childInstance\n * @returns {boolean}\n */\nexport function isDirectChild(parentInstance, parentName, childrenName, childInstance) {\n  return getDirectChildren(parentInstance, parentName, childrenName).includes(childInstance);\n}\n"],
+  "mappings": "AACA,SAAS,eAAe;AAWjB,SAAS,kBACd,gBACA,YACA,cACK;AACL,QAAM,WAAW,eAAe,UAAU,YAAY;AACtD,QAAM,gBAAgB,eAAe,UAAU,UAAU;AAEzD,MAAI,CAAC,QAAQ,QAAQ,GAAG;AACtB,WAAO,CAAC;AAAA,EACV;AAEA,MAAI,CAAC,QAAQ,aAAa,KAAK,cAAc,UAAU,GAAG;AACxD,WAAO;AAAA,EACT;AAEA,QAAM,iBAAiB,CAAC;AAExB,aAAW,SAAS,UAAU;AAC5B,eAAW,gBAAgB,eAAe;AACxC,YAAM,iBAAiB,aAAa,UAAU,YAAY;AAE1D,UAAI,QAAQ,cAAc,KAAK,eAAe,SAAS,KAAK,GAAG;AAC7D;AAAA,MACF;AAEA,qBAAe,KAAK,KAAK;AAAA,IAC3B;AAAA,EACF;AAEA,SAAO;AACT;AAWO,SAAS,cAAc,gBAAgB,YAAY,cAAc,eAAe;AACrF,SAAO,kBAAkB,gBAAgB,YAAY,YAAY,EAAE,SAAS,aAAa;AAC3F;",
   "names": []
 }

package/helpers/importWhenVisible.js

@@ -12,8 +12,7 @@ function importWhenVisible(fn, nameOrSelectorOrElement, parent, observerOptions
       }
     }, observerOptions);
     const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);
-    for (const element of elements)
-      observer.observe(element);
+    for (const element of elements) observer.observe(element);
   });
 }
 export {

package/helpers/importWhenVisible.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/importWhenVisible.ts"],
   "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport { getTargetElements } from './utils.js';\nimport { getComponentResolver } from '../utils/index.js';\n\n/**\n * Import a component when it is visible.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement\n *   The name or selector for the component.\n * @param {Base} [parent]\n *   The parent component.\n * @param {IntersectionObserverInit} [observerOptions]\n *   Options for the `IntersectionObserver` instance.\n * @returns {Promise<T>}\n */\nexport default function importWhenVisible<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  nameOrSelectorOrElement: string | HTMLElement | HTMLElement[],\n  parent?: Base,\n  observerOptions: IntersectionObserverInit = {},\n): Promise<T> {\n  const resolver = getComponentResolver(fn);\n\n  return new Promise((resolve) => {\n    const observer = new IntersectionObserver((entries) => {\n      const someEntriesAreVisible = entries.some((entry) => entry.isIntersecting);\n      if (someEntriesAreVisible) {\n        setTimeout(() => {\n          resolver(resolve, () => observer.disconnect());\n        }, 0);\n      }\n    }, observerOptions);\n\n    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);\n    for (const element of elements) observer.observe(element);\n  });\n}\n"],
-  "mappings": "AACA,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AAgBtB,SAAR,kBACL,IACA,yBACA,QACA,kBAA4C,CAAC,GACjC;AACZ,QAAM,WAAW,qBAAqB,EAAE;AAExC,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,WAAW,IAAI,qBAAqB,CAAC,YAAY;AACrD,YAAM,wBAAwB,QAAQ,KAAK,CAAC,UAAU,MAAM,cAAc;AAC1E,UAAI,uBAAuB;AACzB,mBAAW,MAAM;AACf,mBAAS,SAAS,MAAM,SAAS,WAAW,CAAC;AAAA,QAC/C,GAAG,CAAC;AAAA,MACN;AAAA,IACF,GAAG,eAAe;AAElB,UAAM,WAAW,kBAAkB,yBAAyB,QAAQ,GAAG;AACvE,eAAW,WAAW;AAAU,eAAS,QAAQ,OAAO;AAAA,EAC1D,CAAC;AACH;",
+  "mappings": "AACA,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AAgBtB,SAAR,kBACL,IACA,yBACA,QACA,kBAA4C,CAAC,GACjC;AACZ,QAAM,WAAW,qBAAqB,EAAE;AAExC,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,WAAW,IAAI,qBAAqB,CAAC,YAAY;AACrD,YAAM,wBAAwB,QAAQ,KAAK,CAAC,UAAU,MAAM,cAAc;AAC1E,UAAI,uBAAuB;AACzB,mBAAW,MAAM;AACf,mBAAS,SAAS,MAAM,SAAS,WAAW,CAAC;AAAA,QAC/C,GAAG,CAAC;AAAA,MACN;AAAA,IACF,GAAG,eAAe;AAElB,UAAM,WAAW,kBAAkB,yBAAyB,QAAQ,GAAG;AACvE,eAAW,WAAW,SAAU,UAAS,QAAQ,OAAO;AAAA,EAC1D,CAAC;AACH;",
   "names": []
 }

package/index.d.ts

@@ -1,6 +1,5 @@
-export { Base } from './Base/index.js';
+export * from './Base/index.js';
+export * from './Base/types.js';
 export * from './decorators/index.js';
 export * from './helpers/index.js';
 export * from './services/index.js';
-export type { BaseProps, BaseConstructor, BaseAsyncConstructor, BaseConfig } from './Base/index.js';
-export type { BaseInterface, BaseDecorator } from './Base/types.js';

package/index.js

@@ -1,8 +1,6 @@
-import { Base } from "./Base/index.js";
+export * from "./Base/index.js";
+export * from "./Base/types.js";
 export * from "./decorators/index.js";
 export * from "./helpers/index.js";
 export * from "./services/index.js";
-export {
-  Base
-};
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../packages/js-toolkit/index.ts"],
-  "sourcesContent": ["export { Base } from './Base/index.js';\nexport * from './decorators/index.js';\nexport * from './helpers/index.js';\nexport * from './services/index.js';\n\nexport type { BaseProps, BaseConstructor, BaseAsyncConstructor, BaseConfig } from './Base/index.js';\n\nexport type { BaseInterface, BaseDecorator } from './Base/types.js';\n"],
-  "mappings": "AAAA,SAAS,YAAY;AACrB,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './Base/index.js';\nexport * from './Base/types.js';\nexport * from './decorators/index.js';\nexport * from './helpers/index.js';\nexport * from './services/index.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.12.1",
+  "version": "3.0.0-alpha.10",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"
@@ -23,13 +23,11 @@
   "exports": {
     ".": {
       "import": "./index.js",
-      "require": "./index.cjs",
       "types": "./index.d.ts",
       "default": "./index.js"
     },
     "./utils": {
       "import": "./utils/index.js",
-      "require": "./utils/index.cjs",
       "types": "./utils/index.d.ts",
       "default": "./utils/index.js"
     }
@@ -41,13 +39,7 @@
     "toolkit"
   ],
   "dependencies": {
-    "@motionone/easing": "^10.15.1",
+    "@motionone/easing": "^10.18.0",
     "deepmerge": "^4.3.1"
-  },
-  "devDependencies": {
-    "vue": "^2.6.0"
-  },
-  "peerDependencies": {
-    "vue": "^2.6.0 || ^3.0"
   }
 }

package/services/index.d.ts

@@ -28,7 +28,7 @@ export type KeyServiceInterface = ServiceInterface<KeyServiceProps>;
 export type LoadServiceInterface = ServiceInterface<LoadServiceProps>;
 export type PointerServiceInterface = ServiceInterface<PointerServiceProps>;
 export type RafServiceInterface = ServiceInterface<RafServiceProps>;
-export type ResizeServiceInterface = ServiceInterface<ResizeServiceProps>;
+export type ResizeServiceInterface<T extends Record<string, string> = Record<string, string>> = ServiceInterface<ResizeServiceProps<T>>;
 export type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;
 export type { DragServiceProps, KeyServiceProps, LoadServiceProps, PointerServiceProps, RafServiceProps, ResizeServiceProps, ScrollServiceProps, };
 export { default as useDrag } from './drag.js';

package/services/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/services/index.ts"],
-  "sourcesContent": ["import type { DragServiceProps } from './drag.js';\nimport type { KeyServiceProps } from './key.js';\nimport type { LoadServiceProps } from './load.js';\nimport type { PointerServiceProps } from './pointer.js';\nimport type { RafServiceProps } from './raf.js';\nimport type { ResizeServiceProps } from './resize.js';\nimport type { ScrollServiceProps } from './scroll.js';\n\nexport interface ServiceInterface<T> {\n  /**\n   * Remove a function from the resize service by its key.\n   */\n  remove(key: string): void;\n  /**\n   * Add a callback to the service. The callback will receive the current service props as parameter.\n   */\n  add(key: string, callback: (props: T) => void): void;\n  /**\n   * Test if the service has alreaydy a callback for the given key.\n   */\n  has(key: string): boolean;\n  /**\n   * Get the service's props.\n   */\n  props(): T;\n}\n\nexport type DragServiceInterface = ServiceInterface<DragServiceProps>;\nexport type KeyServiceInterface = ServiceInterface<KeyServiceProps>;\nexport type LoadServiceInterface = ServiceInterface<LoadServiceProps>;\nexport type PointerServiceInterface = ServiceInterface<PointerServiceProps>;\nexport type RafServiceInterface = ServiceInterface<RafServiceProps>;\nexport type ResizeServiceInterface = ServiceInterface<ResizeServiceProps>;\nexport type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;\n\nexport type {\n  DragServiceProps,\n  KeyServiceProps,\n  LoadServiceProps,\n  PointerServiceProps,\n  RafServiceProps,\n  ResizeServiceProps,\n  ScrollServiceProps,\n};\n\nexport { default as useDrag } from './drag.js';\nexport { default as useKey } from './key.js';\nexport { default as useLoad } from './load.js';\nexport { default as usePointer } from './pointer.js';\nexport { default as useRaf } from './raf.js';\nexport { default as useResize } from './resize.js';\nexport { default as useScroll } from './scroll.js';\nexport { useService } from './service.js';\n"],
-  "mappings": "AA6CA,SAAoB,WAAXA,gBAA0B;AACnC,SAAoB,WAAXA,gBAAyB;AAClC,SAAoB,WAAXA,gBAA0B;AACnC,SAAoB,WAAXA,gBAA6B;AACtC,SAAoB,WAAXA,gBAAyB;AAClC,SAAoB,WAAXA,gBAA4B;AACrC,SAAoB,WAAXA,gBAA4B;AACrC,SAAS,kBAAkB;",
+  "sourcesContent": ["import type { DragServiceProps } from './drag.js';\nimport type { KeyServiceProps } from './key.js';\nimport type { LoadServiceProps } from './load.js';\nimport type { PointerServiceProps } from './pointer.js';\nimport type { RafServiceProps } from './raf.js';\nimport type { ResizeServiceProps } from './resize.js';\nimport type { ScrollServiceProps } from './scroll.js';\n\nexport interface ServiceInterface<T> {\n  /**\n   * Remove a function from the resize service by its key.\n   */\n  remove(key: string): void;\n  /**\n   * Add a callback to the service. The callback will receive the current service props as parameter.\n   */\n  add(key: string, callback: (props: T) => void): void;\n  /**\n   * Test if the service has alreaydy a callback for the given key.\n   */\n  has(key: string): boolean;\n  /**\n   * Get the service's props.\n   */\n  props(): T;\n}\n\nexport type DragServiceInterface = ServiceInterface<DragServiceProps>;\nexport type KeyServiceInterface = ServiceInterface<KeyServiceProps>;\nexport type LoadServiceInterface = ServiceInterface<LoadServiceProps>;\nexport type PointerServiceInterface = ServiceInterface<PointerServiceProps>;\nexport type RafServiceInterface = ServiceInterface<RafServiceProps>;\nexport type ResizeServiceInterface<T extends Record<string, string> = Record<string, string>> =\n  ServiceInterface<ResizeServiceProps<T>>;\nexport type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;\n\nexport type {\n  DragServiceProps,\n  KeyServiceProps,\n  LoadServiceProps,\n  PointerServiceProps,\n  RafServiceProps,\n  ResizeServiceProps,\n  ScrollServiceProps,\n};\n\nexport { default as useDrag } from './drag.js';\nexport { default as useKey } from './key.js';\nexport { default as useLoad } from './load.js';\nexport { default as usePointer } from './pointer.js';\nexport { default as useRaf } from './raf.js';\nexport { default as useResize } from './resize.js';\nexport { default as useScroll } from './scroll.js';\nexport { useService } from './service.js';\n"],
+  "mappings": "AA8CA,SAAoB,WAAXA,gBAA0B;AACnC,SAAoB,WAAXA,gBAAyB;AAClC,SAAoB,WAAXA,gBAA0B;AACnC,SAAoB,WAAXA,gBAA6B;AACtC,SAAoB,WAAXA,gBAAyB;AAClC,SAAoB,WAAXA,gBAA4B;AACrC,SAAoB,WAAXA,gBAA4B;AACrC,SAAS,kBAAkB;",
   "names": ["default"]
 }

package/services/pointer.d.ts

@@ -29,4 +29,4 @@ export interface PointerServiceProps {
 /**
  * Use the pointer service.
  */
-export default function usePointer(target: HTMLElement | undefined): PointerService;
+export default function usePointer(target?: HTMLElement): PointerService;

package/services/pointer.js

@@ -112,10 +112,10 @@ function createPointerService(target) {
 }
 const instances = /* @__PURE__ */ new Map();
 function usePointer(target) {
-  if (!instances.has(target)) {
-    instances.set(target, createPointerService(target));
+  if (!instances.has(target ?? window)) {
+    instances.set(target ?? window, createPointerService(target));
   }
-  return instances.get(target);
+  return instances.get(target ?? window);
 }
 export {
   usePointer as default

package/services/pointer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/services/pointer.ts"],
-  "sourcesContent": ["/* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */\nimport { useService } from './service.js';\nimport type { ServiceInterface } from './index.js';\nimport { isDefined } from '../utils/index.js';\n\nexport type PointerService = ServiceInterface<PointerServiceProps>;\n\nexport interface PointerServiceProps {\n  event: MouseEvent | TouchEvent;\n  isDown: boolean;\n  x: number;\n  y: number;\n  changed: { x: boolean; y: boolean };\n  last: { x: number; y: number };\n  delta: { x: number; y: number };\n  progress: { x: number; y: number };\n  max: { x: number; y: number };\n}\n\n/**\n * Test if an event is an instance of TouchEvent.\n */\nfunction isTouchEvent(event: TouchEvent | MouseEvent): boolean {\n  return typeof TouchEvent !== 'undefined' && event instanceof TouchEvent;\n}\n\nconst events = ['mousemove', 'touchmove', 'mousedown', 'touchstart', 'mouseup', 'touchend'];\n\n/**\n * Get pointer service.\n */\nfunction createPointerService(target: HTMLElement | undefined): PointerService {\n  function getTargetSize() {\n    return isDefined(target)\n      ? target.getBoundingClientRect()\n      : {\n          width: window.innerWidth,\n          height: window.innerHeight,\n          x: 0,\n          y: 0,\n        };\n  }\n\n  /**\n   * Update the pointer positions.\n   */\n  function updateProps(event: MouseEvent | TouchEvent): PointerServiceProps {\n    props.event = event;\n    const yLast = props.y;\n    const xLast = props.x;\n\n    const targetSize = getTargetSize();\n\n    // Check pointer Y\n    // We either get data from a touch event `event.touches[0].clientY` or from\n    // a mouse event `event.clientY`.\n    let y = isTouchEvent(event)\n      ? (event as TouchEvent).touches[0]?.clientY\n      : (event as MouseEvent).clientY;\n    y -= targetSize.y;\n    if (y !== props.y) {\n      props.y = y;\n    }\n\n    // Check pointer X\n    // We either get data from a touch event `event.touches[0].clientX` or from\n    // a mouse event `event.clientX`.\n    let x = isTouchEvent(event)\n      ? (event as TouchEvent).touches[0]?.clientX\n      : (event as MouseEvent).clientX;\n    x -= targetSize.x;\n    if (x !== props.x) {\n      props.x = x;\n    }\n\n    props.changed.x = props.x !== xLast;\n    props.changed.y = props.y !== yLast;\n\n    props.last.x = xLast;\n    props.last.y = yLast;\n\n    props.delta.x = props.x - xLast;\n    props.delta.y = props.y - yLast;\n\n    props.max.x = targetSize.width;\n    props.max.y = targetSize.height;\n\n    props.progress.x = props.x / props.max.x;\n    props.progress.y = props.y / props.max.y;\n\n    return props;\n  }\n\n  /**\n   * Handle events.\n   *\n   * @todo handle scroll as well\n   */\n  function handleEvent(event: MouseEvent | TouchEvent) {\n    // eslint-disable-next-line default-case\n    switch (event.type) {\n      case 'mouseenter':\n      case 'mousemove':\n      case 'touchmove':\n        trigger(updateProps(event));\n        break;\n      case 'mousedown':\n      case 'touchstart':\n        props.isDown = true;\n        trigger(props);\n        break;\n      case 'mouseup':\n      case 'touchend':\n        props.isDown = false;\n        trigger(props);\n        break;\n    }\n  }\n\n  const targetSize = getTargetSize();\n  const { add, remove, has, trigger, props } = useService({\n    props: {\n      event: null,\n      isDown: false,\n      x: targetSize.x / 2,\n      y: targetSize.y / 2,\n      changed: {\n        x: false,\n        y: false,\n      },\n      last: {\n        x: targetSize.x / 2,\n        y: targetSize.y / 2,\n      },\n      delta: {\n        x: 0,\n        y: 0,\n      },\n      progress: {\n        x: 0.5,\n        y: 0.5,\n      },\n      max: {\n        x: targetSize.width,\n        y: targetSize.height,\n      },\n    } as PointerServiceProps,\n    init() {\n      document.documentElement.addEventListener('mouseenter', handleEvent, {\n        once: true,\n        capture: true,\n      });\n\n      const options = { passive: true, capture: true };\n      for (const event of events) {\n        document.addEventListener(event, handleEvent, options);\n      }\n    },\n    kill() {\n      for (const event of events) {\n        document.removeEventListener(event, handleEvent);\n      }\n    },\n  });\n\n  return {\n    add,\n    remove,\n    has,\n    props: () => props,\n  };\n}\n\nconst instances = new Map<HTMLElement | Window, PointerService>();\n\n/**\n * Use the pointer service.\n */\nexport default function usePointer(target: HTMLElement | undefined): PointerService {\n  if (!instances.has(target)) {\n    instances.set(target, createPointerService(target));\n  }\n  return instances.get(target);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */\nimport { useService } from './service.js';\nimport type { ServiceInterface } from './index.js';\nimport { isDefined } from '../utils/index.js';\n\nexport type PointerService = ServiceInterface<PointerServiceProps>;\n\nexport interface PointerServiceProps {\n  event: MouseEvent | TouchEvent;\n  isDown: boolean;\n  x: number;\n  y: number;\n  changed: { x: boolean; y: boolean };\n  last: { x: number; y: number };\n  delta: { x: number; y: number };\n  progress: { x: number; y: number };\n  max: { x: number; y: number };\n}\n\n/**\n * Test if an event is an instance of TouchEvent.\n */\nfunction isTouchEvent(event: TouchEvent | MouseEvent): boolean {\n  return typeof TouchEvent !== 'undefined' && event instanceof TouchEvent;\n}\n\nconst events = ['mousemove', 'touchmove', 'mousedown', 'touchstart', 'mouseup', 'touchend'];\n\n/**\n * Get pointer service.\n */\nfunction createPointerService(target: HTMLElement | undefined): PointerService {\n  function getTargetSize() {\n    return isDefined(target)\n      ? target.getBoundingClientRect()\n      : {\n          width: window.innerWidth,\n          height: window.innerHeight,\n          x: 0,\n          y: 0,\n        };\n  }\n\n  /**\n   * Update the pointer positions.\n   */\n  function updateProps(event: MouseEvent | TouchEvent): PointerServiceProps {\n    props.event = event;\n    const yLast = props.y;\n    const xLast = props.x;\n\n    const targetSize = getTargetSize();\n\n    // Check pointer Y\n    // We either get data from a touch event `event.touches[0].clientY` or from\n    // a mouse event `event.clientY`.\n    let y = isTouchEvent(event)\n      ? (event as TouchEvent).touches[0]?.clientY\n      : (event as MouseEvent).clientY;\n    y -= targetSize.y;\n    if (y !== props.y) {\n      props.y = y;\n    }\n\n    // Check pointer X\n    // We either get data from a touch event `event.touches[0].clientX` or from\n    // a mouse event `event.clientX`.\n    let x = isTouchEvent(event)\n      ? (event as TouchEvent).touches[0]?.clientX\n      : (event as MouseEvent).clientX;\n    x -= targetSize.x;\n    if (x !== props.x) {\n      props.x = x;\n    }\n\n    props.changed.x = props.x !== xLast;\n    props.changed.y = props.y !== yLast;\n\n    props.last.x = xLast;\n    props.last.y = yLast;\n\n    props.delta.x = props.x - xLast;\n    props.delta.y = props.y - yLast;\n\n    props.max.x = targetSize.width;\n    props.max.y = targetSize.height;\n\n    props.progress.x = props.x / props.max.x;\n    props.progress.y = props.y / props.max.y;\n\n    return props;\n  }\n\n  /**\n   * Handle events.\n   *\n   * @todo handle scroll as well\n   */\n  function handleEvent(event: MouseEvent | TouchEvent) {\n    // eslint-disable-next-line default-case\n    switch (event.type) {\n      case 'mouseenter':\n      case 'mousemove':\n      case 'touchmove':\n        trigger(updateProps(event));\n        break;\n      case 'mousedown':\n      case 'touchstart':\n        props.isDown = true;\n        trigger(props);\n        break;\n      case 'mouseup':\n      case 'touchend':\n        props.isDown = false;\n        trigger(props);\n        break;\n    }\n  }\n\n  const targetSize = getTargetSize();\n  const { add, remove, has, trigger, props } = useService({\n    props: {\n      event: null,\n      isDown: false,\n      x: targetSize.x / 2,\n      y: targetSize.y / 2,\n      changed: {\n        x: false,\n        y: false,\n      },\n      last: {\n        x: targetSize.x / 2,\n        y: targetSize.y / 2,\n      },\n      delta: {\n        x: 0,\n        y: 0,\n      },\n      progress: {\n        x: 0.5,\n        y: 0.5,\n      },\n      max: {\n        x: targetSize.width,\n        y: targetSize.height,\n      },\n    } as PointerServiceProps,\n    init() {\n      document.documentElement.addEventListener('mouseenter', handleEvent, {\n        once: true,\n        capture: true,\n      });\n\n      const options = { passive: true, capture: true };\n      for (const event of events) {\n        document.addEventListener(event, handleEvent, options);\n      }\n    },\n    kill() {\n      for (const event of events) {\n        document.removeEventListener(event, handleEvent);\n      }\n    },\n  });\n\n  return {\n    add,\n    remove,\n    has,\n    props: () => props,\n  };\n}\n\nconst instances = new Map<HTMLElement | Window, PointerService>();\n\n/**\n * Use the pointer service.\n */\nexport default function usePointer(target?: HTMLElement): PointerService {\n  if (!instances.has(target ?? window)) {\n    instances.set(target ?? window, createPointerService(target));\n  }\n  return instances.get(target ?? window) as PointerService;\n}\n"],
+  "mappings": "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",
   "names": ["targetSize"]
 }

package/services/raf.js

@@ -1,11 +1,9 @@
 import { useService } from "./service.js";
-import { getRaf as getRequestAnimationFrame } from "../utils/nextFrame.js";
 import { useScheduler } from "../utils/scheduler.js";
 import { isFunction } from "../utils/is.js";
 const scheduler = useScheduler(["update", "render"]);
 function createRafService() {
   let isTicking = false;
-  const RAF = getRequestAnimationFrame();
   function trigger(props2) {
     for (const callback of callbacks.values()) {
       scheduler.update(() => {
@@ -24,7 +22,7 @@ function createRafService() {
     if (!isTicking) {
       return;
     }
-    RAF(loop);
+    requestAnimationFrame(loop);
   }
   const { add, remove, has, props, callbacks } = useService({
     props: {
@@ -32,7 +30,7 @@ function createRafService() {
     },
     init() {
       isTicking = true;
-      RAF(loop);
+      requestAnimationFrame(loop);
     },
     kill() {
       isTicking = false;

package/services/raf.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/services/raf.ts"],
-  "sourcesContent": ["/* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */\nimport { useService } from './service.js';\nimport { getRaf as getRequestAnimationFrame } from '../utils/nextFrame.js';\nimport { useScheduler } from '../utils/scheduler.js';\nimport { isFunction } from '../utils/is.js';\nimport type { ServiceInterface } from './index.js';\n\nconst scheduler = useScheduler(['update', 'render']);\n\nexport type RafService = ServiceInterface<RafServiceProps>;\n\nexport interface RafServiceProps {\n  time: DOMHighResTimeStamp;\n}\n\n/**\n * Create raf service.\n */\nfunction createRafService(): RafService {\n  let isTicking = false;\n  const RAF = getRequestAnimationFrame();\n\n  /**\n   * Trigger callbacks.\n   */\n  function trigger(props: RafServiceProps) {\n    for (const callback of callbacks.values()) {\n      scheduler.update(() => {\n        const render = callback(props) as (() => unknown) | void;\n        if (isFunction(render)) {\n          scheduler.render(() => {\n            // @ts-ignore\n            render(props);\n          });\n        }\n      });\n    }\n  }\n\n  /**\n   * Loop.\n   */\n  function loop() {\n    // eslint-disable-next-line no-use-before-define\n    props.time = performance.now();\n    trigger(props);\n\n    if (!isTicking) {\n      return;\n    }\n\n    RAF(loop);\n  }\n\n  const { add, remove, has, props, callbacks } = useService({\n    props: {\n      time: performance.now(),\n    } as RafServiceProps,\n    init() {\n      isTicking = true;\n      RAF(loop);\n    },\n    kill() {\n      isTicking = false;\n    },\n  });\n\n  return {\n    add,\n    remove,\n    has,\n    props: () => props,\n  };\n}\n\nlet raf;\n\n/**\n * Use the RequestAnimationFrame (raf) service.\n */\nexport default function useRaf(): RafService {\n  if (!raf) {\n    raf = createRafService();\n  }\n\n  return raf;\n}\n"],
-  "mappings": "AACA,SAAS,kBAAkB;AAC3B,SAAS,UAAU,gCAAgC;AACnD,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAG3B,MAAM,YAAY,aAAa,CAAC,UAAU,QAAQ,CAAC;AAWnD,SAAS,mBAA+B;AACtC,MAAI,YAAY;AAChB,QAAM,MAAM,yBAAyB;AAKrC,WAAS,QAAQA,QAAwB;AACvC,eAAW,YAAY,UAAU,OAAO,GAAG;AACzC,gBAAU,OAAO,MAAM;AACrB,cAAM,SAAS,SAASA,MAAK;AAC7B,YAAI,WAAW,MAAM,GAAG;AACtB,oBAAU,OAAO,MAAM;AAErB,mBAAOA,MAAK;AAAA,UACd,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAKA,WAAS,OAAO;AAEd,UAAM,OAAO,YAAY,IAAI;AAC7B,YAAQ,KAAK;AAEb,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AAEA,QAAI,IAAI;AAAA,EACV;AAEA,QAAM,EAAE,KAAK,QAAQ,KAAK,OAAO,UAAU,IAAI,WAAW;AAAA,IACxD,OAAO;AAAA,MACL,MAAM,YAAY,IAAI;AAAA,IACxB;AAAA,IACA,OAAO;AACL,kBAAY;AACZ,UAAI,IAAI;AAAA,IACV;AAAA,IACA,OAAO;AACL,kBAAY;AAAA,IACd;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,IAAI;AAKW,SAAR,SAAsC;AAC3C,MAAI,CAAC,KAAK;AACR,UAAM,iBAAiB;AAAA,EACzB;AAEA,SAAO;AACT;",
+  "sourcesContent": ["/* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */\nimport { useService } from './service.js';\nimport { useScheduler } from '../utils/scheduler.js';\nimport { isFunction } from '../utils/is.js';\nimport type { ServiceInterface } from './index.js';\n\nconst scheduler = useScheduler(['update', 'render']);\n\nexport type RafService = ServiceInterface<RafServiceProps>;\n\nexport interface RafServiceProps {\n  time: DOMHighResTimeStamp;\n}\n\n/**\n * Create raf service.\n */\nfunction createRafService(): RafService {\n  let isTicking = false;\n\n  /**\n   * Trigger callbacks.\n   */\n  function trigger(props: RafServiceProps) {\n    for (const callback of callbacks.values()) {\n      scheduler.update(() => {\n        const render = callback(props) as (() => unknown) | void;\n        if (isFunction(render)) {\n          scheduler.render(() => {\n            // @ts-ignore\n            render(props);\n          });\n        }\n      });\n    }\n  }\n\n  /**\n   * Loop.\n   */\n  function loop() {\n    // eslint-disable-next-line no-use-before-define\n    props.time = performance.now();\n    trigger(props);\n\n    if (!isTicking) {\n      return;\n    }\n\n    requestAnimationFrame(loop);\n  }\n\n  const { add, remove, has, props, callbacks } = useService({\n    props: {\n      time: performance.now(),\n    } as RafServiceProps,\n    init() {\n      isTicking = true;\n      requestAnimationFrame(loop);\n    },\n    kill() {\n      isTicking = false;\n    },\n  });\n\n  return {\n    add,\n    remove,\n    has,\n    props: () => props,\n  };\n}\n\nlet raf;\n\n/**\n * Use the RequestAnimationFrame (raf) service.\n */\nexport default function useRaf(): RafService {\n  if (!raf) {\n    raf = createRafService();\n  }\n\n  return raf;\n}\n"],
+  "mappings": "AACA,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAG3B,MAAM,YAAY,aAAa,CAAC,UAAU,QAAQ,CAAC;AAWnD,SAAS,mBAA+B;AACtC,MAAI,YAAY;AAKhB,WAAS,QAAQA,QAAwB;AACvC,eAAW,YAAY,UAAU,OAAO,GAAG;AACzC,gBAAU,OAAO,MAAM;AACrB,cAAM,SAAS,SAASA,MAAK;AAC7B,YAAI,WAAW,MAAM,GAAG;AACtB,oBAAU,OAAO,MAAM;AAErB,mBAAOA,MAAK;AAAA,UACd,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAKA,WAAS,OAAO;AAEd,UAAM,OAAO,YAAY,IAAI;AAC7B,YAAQ,KAAK;AAEb,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AAEA,0BAAsB,IAAI;AAAA,EAC5B;AAEA,QAAM,EAAE,KAAK,QAAQ,KAAK,OAAO,UAAU,IAAI,WAAW;AAAA,IACxD,OAAO;AAAA,MACL,MAAM,YAAY,IAAI;AAAA,IACxB;AAAA,IACA,OAAO;AACL,kBAAY;AACZ,4BAAsB,IAAI;AAAA,IAC5B;AAAA,IACA,OAAO;AACL,kBAAY;AAAA,IACd;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,IAAI;AAKW,SAAR,SAAsC;AAC3C,MAAI,CAAC,KAAK;AACR,UAAM,iBAAiB;AAAA,EACzB;AAEA,SAAO;AACT;",
   "names": ["props"]
 }

package/services/resize.d.ts

@@ -1,14 +1,15 @@
-import type { ServiceInterface } from './index.js';
-export type ResizeService = ServiceInterface<ResizeServiceProps>;
-export interface ResizeServiceProps {
+import type { Features } from '../Base/features.js';
+import type { ResizeServiceInterface } from './index.js';
+export interface ResizeServiceProps<U extends Features['breakpoints'] = Features['breakpoints']> {
     width: number;
     height: number;
     ratio: number;
     orientation: 'square' | 'landscape' | 'portrait';
-    breakpoint?: string;
-    breakpoints?: string[];
+    breakpoint: string;
+    breakpoints: string[];
+    activeBreakpoints: Record<keyof U, boolean>;
 }
 /**
  * Use the resize service.
  */
-export default function useResize(): ResizeService;
+export default function useResize<T extends Features['breakpoints'] = Features['breakpoints']>(breakpoints?: T): ResizeServiceInterface<T>;

package/services/resize.js

@@ -1,24 +1,7 @@
 import { useService } from "./service.js";
+import { features } from "../Base/features.js";
 import debounce from "../utils/debounce.js";
-let breakpointElement;
-let breakpoints = [];
-function getBreakpointElement() {
-  if (!breakpointElement) {
-    breakpointElement = document.querySelector("[data-breakpoint]");
-  }
-  return breakpointElement;
-}
-function getBreakpoint() {
-  return getBreakpointElement() ? window.getComputedStyle(getBreakpointElement(), "::before").getPropertyValue("content").replaceAll('"', "") : void 0;
-}
-function getBreakpoints() {
-  if (!getBreakpointElement() || breakpoints.length) {
-    return breakpoints;
-  }
-  breakpoints = window.getComputedStyle(getBreakpointElement(), "::after").getPropertyValue("content").replaceAll('"', "").split(",");
-  return breakpoints;
-}
-function createResizeService() {
+function createResizeService(breakpoints) {
   function updateProps() {
     props.width = window.innerWidth;
     props.height = window.innerHeight;
@@ -42,10 +25,18 @@ function createResizeService() {
       ratio: window.innerWidth / window.innerHeight,
       orientation: "square",
       get breakpoint() {
-        return getBreakpoint();
+        return Object.keys(this.activeBreakpoints).toReversed().find((name) => this.activeBreakpoints[name]);
       },
       get breakpoints() {
-        return getBreakpoints();
+        return Object.keys(this.activeBreakpoints);
+      },
+      get activeBreakpoints() {
+        return Object.fromEntries(
+          Object.entries(breakpoints ?? features.get("breakpoints")).map(([name, breakpoint]) => [
+            name,
+            window.matchMedia(`(min-width: ${breakpoint})`).matches
+          ])
+        );
       }
     },
     init() {
@@ -62,12 +53,13 @@ function createResizeService() {
     props: () => props
   };
 }
-let resize;
-function useResize() {
-  if (!resize) {
-    resize = createResizeService();
+const instances = /* @__PURE__ */ new Map();
+function useResize(breakpoints) {
+  const key = JSON.stringify(breakpoints);
+  if (!instances.has(key)) {
+    instances.set(key, createResizeService(breakpoints));
   }
-  return resize;
+  return instances.get(key);
 }
 export {
   useResize as default

package/services/resize.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/services/resize.ts"],
-  "sourcesContent": ["/* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */\nimport { useService } from './service.js';\nimport debounce from '../utils/debounce.js';\nimport type { ServiceInterface } from './index.js';\n\nexport type ResizeService = ServiceInterface<ResizeServiceProps>;\n\nexport interface ResizeServiceProps {\n  width: number;\n  height: number;\n  ratio: number;\n  orientation: 'square' | 'landscape' | 'portrait';\n  breakpoint?: string;\n  breakpoints?: string[];\n}\n\nlet breakpointElement;\nlet breakpoints = [];\n\n/**\n * The element holding the breakpoints data.\n */\nfunction getBreakpointElement(): HTMLElement {\n  if (!breakpointElement) {\n    breakpointElement = document.querySelector('[data-breakpoint]');\n  }\n  return breakpointElement;\n}\n\n/**\n * Get the current breakpoint.\n */\nfunction getBreakpoint(): string | null {\n  return getBreakpointElement()\n    ? window\n        .getComputedStyle(getBreakpointElement(), '::before')\n        .getPropertyValue('content')\n        .replaceAll('\"', '')\n    : undefined;\n}\n\n/**\n * Get all breakpoints.\n */\nfunction getBreakpoints(): string[] {\n  if (!getBreakpointElement() || breakpoints.length) {\n    return breakpoints;\n  }\n  breakpoints = window\n    .getComputedStyle(getBreakpointElement(), '::after')\n    .getPropertyValue('content')\n    .replaceAll('\"', '')\n    .split(',');\n\n  return breakpoints;\n}\n\n/**\n * Get resize service.\n */\nfunction createResizeService(): ResizeService {\n  /**\n   * Update props.\n   */\n  function updateProps(): ResizeServiceProps {\n    props.width = window.innerWidth;\n    props.height = window.innerHeight;\n    props.ratio = window.innerWidth / window.innerHeight;\n    props.orientation = 'square';\n\n    if (props.ratio > 1) {\n      props.orientation = 'landscape';\n    }\n\n    if (props.ratio < 1) {\n      props.orientation = 'portrait';\n    }\n\n    return props;\n  }\n\n  const onResize = debounce(() => {\n    trigger(updateProps());\n  });\n\n  const { add, remove, has, trigger, props } = useService({\n    props: {\n      width: window.innerWidth,\n      height: window.innerHeight,\n      ratio: window.innerWidth / window.innerHeight,\n      orientation: 'square',\n      get breakpoint() {\n        return getBreakpoint();\n      },\n      get breakpoints() {\n        return getBreakpoints();\n      },\n    } as ResizeServiceProps,\n    init() {\n      window.addEventListener('resize', onResize);\n    },\n    kill() {\n      window.removeEventListener('resize', onResize);\n    },\n  });\n\n  return {\n    add,\n    remove,\n    has,\n    props: () => props,\n  };\n}\n\nlet resize;\n\n/**\n * Use the resize service.\n */\nexport default function useResize(): ResizeService {\n  if (!resize) {\n    resize = createResizeService();\n  }\n\n  return resize;\n}\n"],
-  "mappings": "AACA,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AAcrB,IAAI;AACJ,IAAI,cAAc,CAAC;AAKnB,SAAS,uBAAoC;AAC3C,MAAI,CAAC,mBAAmB;AACtB,wBAAoB,SAAS,cAAc,mBAAmB;AAAA,EAChE;AACA,SAAO;AACT;AAKA,SAAS,gBAA+B;AACtC,SAAO,qBAAqB,IACxB,OACG,iBAAiB,qBAAqB,GAAG,UAAU,EACnD,iBAAiB,SAAS,EAC1B,WAAW,KAAK,EAAE,IACrB;AACN;AAKA,SAAS,iBAA2B;AAClC,MAAI,CAAC,qBAAqB,KAAK,YAAY,QAAQ;AACjD,WAAO;AAAA,EACT;AACA,gBAAc,OACX,iBAAiB,qBAAqB,GAAG,SAAS,EAClD,iBAAiB,SAAS,EAC1B,WAAW,KAAK,EAAE,EAClB,MAAM,GAAG;AAEZ,SAAO;AACT;AAKA,SAAS,sBAAqC;AAI5C,WAAS,cAAkC;AACzC,UAAM,QAAQ,OAAO;AACrB,UAAM,SAAS,OAAO;AACtB,UAAM,QAAQ,OAAO,aAAa,OAAO;AACzC,UAAM,cAAc;AAEpB,QAAI,MAAM,QAAQ,GAAG;AACnB,YAAM,cAAc;AAAA,IACtB;AAEA,QAAI,MAAM,QAAQ,GAAG;AACnB,YAAM,cAAc;AAAA,IACtB;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,SAAS,MAAM;AAC9B,YAAQ,YAAY,CAAC;AAAA,EACvB,CAAC;AAED,QAAM,EAAE,KAAK,QAAQ,KAAK,SAAS,MAAM,IAAI,WAAW;AAAA,IACtD,OAAO;AAAA,MACL,OAAO,OAAO;AAAA,MACd,QAAQ,OAAO;AAAA,MACf,OAAO,OAAO,aAAa,OAAO;AAAA,MAClC,aAAa;AAAA,MACb,IAAI,aAAa;AACf,eAAO,cAAc;AAAA,MACvB;AAAA,MACA,IAAI,cAAc;AAChB,eAAO,eAAe;AAAA,MACxB;AAAA,IACF;AAAA,IACA,OAAO;AACL,aAAO,iBAAiB,UAAU,QAAQ;AAAA,IAC5C;AAAA,IACA,OAAO;AACL,aAAO,oBAAoB,UAAU,QAAQ;AAAA,IAC/C;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,IAAI;AAKW,SAAR,YAA4C;AACjD,MAAI,CAAC,QAAQ;AACX,aAAS,oBAAoB;AAAA,EAC/B;AAEA,SAAO;AACT;",
+  "sourcesContent": ["/* eslint-disable no-use-before-define, @typescript-eslint/no-use-before-define */\nimport { useService } from './service.js';\nimport { features } from '../Base/features.js';\nimport type { Features } from '../Base/features.js';\nimport debounce from '../utils/debounce.js';\nimport type { ResizeServiceInterface } from './index.js';\n\nexport interface ResizeServiceProps<U extends Features['breakpoints'] = Features['breakpoints']> {\n  width: number;\n  height: number;\n  ratio: number;\n  orientation: 'square' | 'landscape' | 'portrait';\n  breakpoint: string;\n  breakpoints: string[];\n  activeBreakpoints: Record<keyof U, boolean>;\n}\n\n/**\n * Get resize service.\n */\nfunction createResizeService<T extends Features['breakpoints'] = Features['breakpoints']>(\n  breakpoints?: T,\n): ResizeServiceInterface<T> {\n  /**\n   * Update props.\n   */\n  function updateProps(): ResizeServiceProps<T> {\n    props.width = window.innerWidth;\n    props.height = window.innerHeight;\n    props.ratio = window.innerWidth / window.innerHeight;\n    props.orientation = 'square';\n\n    if (props.ratio > 1) {\n      props.orientation = 'landscape';\n    }\n\n    if (props.ratio < 1) {\n      props.orientation = 'portrait';\n    }\n\n    return props;\n  }\n\n  const onResize = debounce(() => {\n    trigger(updateProps());\n  });\n\n  const { add, remove, has, trigger, props } = useService({\n    props: {\n      width: window.innerWidth,\n      height: window.innerHeight,\n      ratio: window.innerWidth / window.innerHeight,\n      orientation: 'square',\n      get breakpoint() {\n        return Object.keys(this.activeBreakpoints)\n          .toReversed()\n          .find((name) => this.activeBreakpoints[name]);\n      },\n      get breakpoints() {\n        return Object.keys(this.activeBreakpoints);\n      },\n      get activeBreakpoints() {\n        return Object.fromEntries(\n          Object.entries(breakpoints ?? features.get('breakpoints')).map(([name, breakpoint]) => [\n            name,\n            window.matchMedia(`(min-width: ${breakpoint})`).matches,\n          ]),\n        ) as Record<keyof T, boolean>;\n      },\n    } as ResizeServiceProps<T>,\n    init() {\n      window.addEventListener('resize', onResize);\n    },\n    kill() {\n      window.removeEventListener('resize', onResize);\n    },\n  });\n\n  return {\n    add,\n    remove,\n    has,\n    props: () => props,\n  };\n}\n\nconst instances: Map<string, ResizeServiceInterface | undefined> = new Map();\n\n/**\n * Use the resize service.\n */\nexport default function useResize<T extends Features['breakpoints'] = Features['breakpoints']>(\n  breakpoints?: T,\n): ResizeServiceInterface<T> {\n  const key = JSON.stringify(breakpoints);\n\n  if (!instances.has(key)) {\n    instances.set(key, createResizeService(breakpoints));\n  }\n\n  return (instances as Map<string, ResizeServiceInterface<T>>).get(key);\n}\n"],
+  "mappings": "AACA,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AAEzB,OAAO,cAAc;AAgBrB,SAAS,oBACP,aAC2B;AAI3B,WAAS,cAAqC;AAC5C,UAAM,QAAQ,OAAO;AACrB,UAAM,SAAS,OAAO;AACtB,UAAM,QAAQ,OAAO,aAAa,OAAO;AACzC,UAAM,cAAc;AAEpB,QAAI,MAAM,QAAQ,GAAG;AACnB,YAAM,cAAc;AAAA,IACtB;AAEA,QAAI,MAAM,QAAQ,GAAG;AACnB,YAAM,cAAc;AAAA,IACtB;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,SAAS,MAAM;AAC9B,YAAQ,YAAY,CAAC;AAAA,EACvB,CAAC;AAED,QAAM,EAAE,KAAK,QAAQ,KAAK,SAAS,MAAM,IAAI,WAAW;AAAA,IACtD,OAAO;AAAA,MACL,OAAO,OAAO;AAAA,MACd,QAAQ,OAAO;AAAA,MACf,OAAO,OAAO,aAAa,OAAO;AAAA,MAClC,aAAa;AAAA,MACb,IAAI,aAAa;AACf,eAAO,OAAO,KAAK,KAAK,iBAAiB,EACtC,WAAW,EACX,KAAK,CAAC,SAAS,KAAK,kBAAkB,IAAI,CAAC;AAAA,MAChD;AAAA,MACA,IAAI,cAAc;AAChB,eAAO,OAAO,KAAK,KAAK,iBAAiB;AAAA,MAC3C;AAAA,MACA,IAAI,oBAAoB;AACtB,eAAO,OAAO;AAAA,UACZ,OAAO,QAAQ,eAAe,SAAS,IAAI,aAAa,CAAC,EAAE,IAAI,CAAC,CAAC,MAAM,UAAU,MAAM;AAAA,YACrF;AAAA,YACA,OAAO,WAAW,eAAe,UAAU,GAAG,EAAE;AAAA,UAClD,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,IACA,OAAO;AACL,aAAO,iBAAiB,UAAU,QAAQ;AAAA,IAC5C;AAAA,IACA,OAAO;AACL,aAAO,oBAAoB,UAAU,QAAQ;AAAA,IAC/C;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,MAAM;AAAA,EACf;AACF;AAEA,MAAM,YAA6D,oBAAI,IAAI;AAK5D,SAAR,UACL,aAC2B;AAC3B,QAAM,MAAM,KAAK,UAAU,WAAW;AAEtC,MAAI,CAAC,UAAU,IAAI,GAAG,GAAG;AACvB,cAAU,IAAI,KAAK,oBAAoB,WAAW,CAAC;AAAA,EACrD;AAEA,SAAQ,UAAqD,IAAI,GAAG;AACtE;",
   "names": []
 }

package/services/scroll.d.ts

@@ -7,26 +7,40 @@ export interface ScrollServiceProps {
         x: boolean;
         y: boolean;
     };
+    changedX: boolean;
+    changedY: boolean;
     last: {
         x: number;
         y: number;
     };
+    lastX: number;
+    lastY: number;
     delta: {
         x: number;
         y: number;
     };
+    deltaX: number;
+    deltaY: number;
     progress: {
         x: number;
         y: number;
     };
+    progressX: number;
+    progressY: number;
     max: {
         x: number;
         y: number;
     };
+    maxX: number;
+    maxY: number;
     direction: {
         x: 'LEFT' | 'RIGHT' | 'NONE';
         y: 'UP' | 'DOWN' | 'NONE';
     };
+    isUp: boolean;
+    isRight: boolean;
+    isDown: boolean;
+    isLeft: boolean;
 }
 /**
  * Use the scroll service.

package/services/scroll.js

@@ -4,24 +4,28 @@ function createScrollService() {
   function updateProps() {
     const yLast = props.y;
     const xLast = props.x;
-    if (window.pageYOffset !== props.y) {
-      props.y = window.pageYOffset;
+    if (window.scrollY !== props.y) {
+      props.y = window.scrollY;
     }
-    if (window.pageXOffset !== props.x) {
-      props.x = window.pageXOffset;
+    if (window.scrollX !== props.x) {
+      props.x = window.scrollX;
     }
-    props.changed.x = props.x !== xLast;
-    props.changed.y = props.y !== yLast;
-    props.last.x = xLast;
-    props.last.y = yLast;
-    props.delta.x = props.x - xLast;
-    props.delta.y = props.y - yLast;
-    props.max.x = (document.scrollingElement || document.body).scrollWidth - window.innerWidth;
-    props.max.y = (document.scrollingElement || document.body).scrollHeight - window.innerHeight;
-    props.progress.x = props.max.x === 0 ? 1 : props.x / props.max.x;
-    props.progress.y = props.max.y === 0 ? 1 : props.y / props.max.y;
-    props.direction.x = props.x > xLast ? "RIGHT" : props.x < xLast ? "LEFT" : "NONE";
-    props.direction.y = props.y > yLast ? "DOWN" : props.y < yLast ? "UP" : "NONE";
+    props.changed.x = props.changedX = props.x !== xLast;
+    props.changed.y = props.changedY = props.y !== yLast;
+    props.last.x = props.lastX = xLast;
+    props.last.y = props.lastY = yLast;
+    props.delta.x = props.deltaX = props.x - xLast;
+    props.delta.y = props.deltaY = props.y - yLast;
+    props.max.x = props.maxX = (document.scrollingElement || document.body).scrollWidth - window.innerWidth;
+    props.max.y = props.maxY = (document.scrollingElement || document.body).scrollHeight - window.innerHeight;
+    props.progress.x = props.progressX = props.max.x === 0 ? 1 : props.x / props.max.x;
+    props.progress.y = props.progressY = props.max.y === 0 ? 1 : props.y / props.max.y;
+    props.isUp = props.y < yLast;
+    props.isRight = props.x > xLast;
+    props.isDown = props.y > yLast;
+    props.isLeft = props.x < xLast;
+    props.direction.x = props.isRight ? "RIGHT" : props.isLeft ? "LEFT" : "NONE";
+    props.direction.y = props.isDown ? "DOWN" : props.isUp ? "UP" : "NONE";
     return props;
   }
   const onScrollDebounced = debounce(() => {
@@ -33,32 +37,46 @@ function createScrollService() {
   }
   const { add, remove, has, props, trigger } = useService({
     props: {
-      x: window.pageXOffset,
-      y: window.pageYOffset,
+      x: window.scrollX,
+      y: window.scrollY,
       changed: {
         x: false,
         y: false
       },
+      changedX: false,
+      changedY: false,
       last: {
-        x: window.pageXOffset,
-        y: window.pageYOffset
+        x: window.scrollX,
+        y: window.scrollY
       },
+      lastX: window.scrollX,
+      lastY: window.scrollY,
       delta: {
         x: 0,
         y: 0
       },
+      deltaX: 0,
+      deltaY: 0,
       max: {
         x: (document.scrollingElement || document.body).scrollWidth - window.innerWidth,
         y: (document.scrollingElement || document.body).scrollHeight - window.innerHeight
       },
+      maxX: (document.scrollingElement || document.body).scrollWidth - window.innerWidth,
+      maxY: (document.scrollingElement || document.body).scrollHeight - window.innerHeight,
       progress: {
         x: 0,
         y: 0
       },
+      progressX: 0,
+      progressY: 0,
       direction: {
         x: "NONE",
         y: "NONE"
-      }
+      },
+      isUp: false,
+      isRight: false,
+      isDown: false,
+      isLeft: false
     },
     init() {
       document.addEventListener("scroll", onScroll, { passive: true, capture: true });