Merge branch 'release/2.6.0'

studiometa · Sep 20, 2022 · fa3cc10 · fa3cc10
2 parents e9a74f9 + 86ddd70
commit fa3cc10
Show file tree

Hide file tree

Showing 42 changed files with 1,962 additions and 3,109 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-workspace",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "private": true,
   "workspaces": [
     "packages/*"
@@ -12,15 +12,16 @@
     "docs:build": "cd packages/docs && npm install && rm -rf node_modules/.vite && npm run build",
     "test": "npm run test --workspace=@studiometa/js-toolkit-tests",
     "lint": "npm run lint:eslint && npm run lint:types && npm run lint:docs",
-    "lint:eslint": "eslint packages/js-toolkit",
+    "lint:eslint": "eslint packages/js-toolkit --ext=.js,.ts",
     "lint:docs": "prettier --check 'packages/docs/**/*.{md,js,html,vue}'",
     "lint:types": "tsc --build tsconfig.lint.json",
     "fix:docs": "prettier --write 'packages/docs/**/*.{md,js,html,vue}'",
     "build": "rm -rf dist && npm run build:pkg && npm run build:types && npm run build:cp-files",
     "build:cp-files": "cp packages/js-toolkit/package.json dist/ && sed -i '' 's/index\\.ts/index\\.js/' dist/package.json && cat dist/package.json && cp LICENSE dist/ && cp README.md dist",
     "build:types": "tsc --build tsconfig.build.json",
     "build:pkg": "node scripts/build.js",
-    "build-for-export-size": "node scripts/add-utils-export.js && rm -rf dist && npm run build:pkg && npm run build:cp-files"
+    "build-for-export-size": "node scripts/add-utils-export.js && rm -rf dist && npm run build:pkg && npm run build:cp-files",
+    "postinstall": "patch-package"
   },
   "devDependencies": {
     "@studiometa/eslint-config": "^3.0.5",
@@ -39,6 +40,7 @@
   },
   "dependencies": {
     "esbuild": "^0.15.5",
-    "fast-glob": "^3.2.11"
+    "fast-glob": "^3.2.11",
+    "patch-package": "^6.4.7"
   }
 }
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-demo",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "private": true,
   "type": "commonjs",
   "scripts": {
@@ -12,7 +12,7 @@
     "@studiometa/stylelint-config": "^2.0.0",
     "@studiometa/tailwind-config": "^1.1.0",
     "@studiometa/ui": "^0.2.11",
-    "@studiometa/webpack-config": "^4.0.0",
+    "@studiometa/webpack-config": "^4.0.3",
     "eslint": "^8.22.0",
     "postcss": "^8.4.16",
     "prettier": "^2.7.1",

diff --git a/packages/docs/.vitepress/theme/components/App.vue b/packages/docs/.vitepress/theme/components/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-  import Theme from 'vitepress/client/theme-default';
+  import Theme from 'vitepress/theme';
   import { useKBarHandler } from '@bytebase/vue-kbar';
 
   const { Layout } = Theme;

diff --git a/packages/docs/.vitepress/theme/components/NavBarTitle.vue b/packages/docs/.vitepress/theme/components/NavBarTitle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
   import { useData } from 'vitepress';
-  import { useSidebar } from 'vitepress/client/theme-default/composables/sidebar.js';
-  import VPImage from 'vitepress/client/theme-default/components/VPImage.vue';
+  import { useSidebar } from 'vitepress/dist/client/theme-default/composables/sidebar.js';
+  import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue';
   import Badge from './Badge.vue';
 
   const { site, theme } = useData();

diff --git a/packages/docs/.vitepress/theme/index.js b/packages/docs/.vitepress/theme/index.js
@@ -1,4 +1,4 @@
-import DefaultTheme from 'vitepress/client/theme-default';
+import DefaultTheme from 'vitepress/theme';
 import Badge from './components/Badge.vue';
 import Tabs from './components/Tabs.vue';
 import PreviewIframe from './components/PreviewIframe.vue';

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-docs",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "type": "module",
   "private": true,
   "scripts": {
@@ -11,6 +11,6 @@
     "@bytebase/vue-kbar": "^0.1.7",
     "@studiometa/tailwind-config": "^1.1.0",
     "tailwindcss": "^3.1.6",
-    "vitepress": "^1.0.0-alpha.4"
+    "vitepress": "^1.0.0-alpha.15"
   }
 }
diff --git a/packages/docs/utils/css/addClass.md b/packages/docs/utils/css/addClass.md
@@ -8,12 +8,14 @@ This method will add one or more classes to an HTML element.
 import { addClass } from '@studiometa/js-toolkit/utils';
 
 addClass(document.body, 'is-locked');
+addClass([document.body, document.documentElement], 'is-locked');
+addClass(document.querySelectorAll('.should-be-locked'), 'is-locked');
 addClass(document.body, ['is-locked', 'has-pointer']);
 ```
 
 ### Parameters
 
-- `element` (`HTMLElement`): the target HTML element
+- `element` (`Element | Element[] | NodeListOf<Element>`): the target HTML element
 - `classes` (`string | string[]`): CSS classes to add
 
 ### Return value

diff --git a/packages/docs/utils/css/addStyle.md b/packages/docs/utils/css/addStyle.md
@@ -8,11 +8,13 @@ This method will add styles to an HTML element.
 import { addStyle } from '@studiometa/js-toolkit/utils';
 
 addStyle(document.body, { display: 'block' });
+addStyle([document.body, document.documentElement], { display: 'block' });
+addStyle(document.querySelectorAll('div'), { display: 'block' });
 ```
 
 ### Parameters
 
-- `element` (`HTMLElement`): the target HTML element
+- `element` (`HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>`): the target HTML element
 - `styles` (`Partial<CSSStyleDeclaration>`): CSS styles to add
 
 ### Return value

diff --git a/packages/docs/utils/css/animate.md b/packages/docs/utils/css/animate.md
@@ -25,7 +25,7 @@ animation.start();
 
 ### Parameters
 
-- `element` (`HTMLElement`): the target HTML element
+- `element` (`HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>`): the target HTML element
 - `keyframes` (`KeyFrame[]`): array of objects describing the key frames of the animation
   `options` (`Options`): options for the animation
 

diff --git a/packages/docs/utils/css/removeClass.md b/packages/docs/utils/css/removeClass.md
@@ -8,12 +8,14 @@ This method will remove one or more classes to an HTML element.
 import { removeClass } from '@studiometa/js-toolkit/utils';
 
 removeClass(document.body, 'is-locked');
+addClass([document.body, document.documentElement], 'is-locked');
+removeClass(document.querySelectorAll('.is-locked'), 'is-locked');
 removeClass(document.body, ['is-locked', 'has-pointer']);
 ```
 
 ### Parameters
 
-- `element` (`HTMLElement`): the target HTML element
+- `element` (`Element | Element | NodeListOf<Element>`): the target HTML element
 - `classes` (`string | string[]`): CSS classes to remove
 
 ### Return value

diff --git a/packages/docs/utils/css/removeStyle.md b/packages/docs/utils/css/removeStyle.md
@@ -8,11 +8,13 @@ This method will remove styles from an HTML element.
 import { removeStyle } from '@studiometa/js-toolkit/utils';
 
 removeStyle(document.body, { display: 'block' });
+addStyle([document.body, document.documentElement], { display: 'block' });
+addStyle(document.querySelectorAll('div'), { display: 'block' });
 ```
 
 ### Parameters
 
-- `element` (`HTMLElement`): the target HTML element
+- `element` (`HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>`): the target HTML element
 - `styles` (`Partial<CSSStyleDeclaration>`): CSS styles to remove
 
 ### Return value

diff --git a/packages/docs/utils/css/toggleClass.md b/packages/docs/utils/css/toggleClass.md
@@ -9,13 +9,15 @@ import { toggleClass } from '@studiometa/js-toolkit/utils';
 
 toggleClass(document.body, 'is-locked');
 toggleClass(document.body, 'is-locked', true);
+toggleClass([document.body, document.documentElement], 'is-locked', true);
+toggleClass(document.querySelectorAll('.should-be-locked'), 'is-locked', true);
 toggleClass(document.body, ['is-locked', 'has-pointer']);
 toggleClass(document.body, ['is-locked', 'has-pointer'], true);
 ```
 
 ### Parameters
 
-- `element` (`HTMLElement`): the target HTML element
+- `element` (`Element | Element | NodeListOf<Element>`): the target HTML element
 - `classes` (`string | string[]`): CSS classes to remove
 - `force` (`boolean`): turns the toggle into a one way-only operation, remove the classes when `false`, add the classes when `true`
 

diff --git a/packages/docs/utils/css/transform.md b/packages/docs/utils/css/transform.md
@@ -11,11 +11,21 @@ transform(document.body, {
   x: 100,
   scale: 0.5,
 });
+
+transform([document.body, document.documentElement], {
+  x: 100,
+  scale: 0.5,
+});
+
+transform(document.querySelectorAll('div'), {
+  x: 100,
+  scale: 0.5,
+});
 ```
 
 ### Parameters
 
-- `element` (`HTMLElement`): the target HTML element
+- `element` (`HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>`): the target HTML element
 - `props` ([`TransformProps`](#types)): an object describing the transformations to apply
 
 ### Return value

diff --git a/packages/docs/utils/css/transition.md b/packages/docs/utils/css/transition.md
@@ -45,11 +45,24 @@ transition(
   },
   'keep',
 );
+
+// Will apply a transition on multiple elements.
+// With an array of elements:
+transition(
+  [
+    document.querySelector('#one'),
+    document.querySelector('#two'),
+    document.querySelector('#three'),
+  ],
+  'fade',
+);
+// With a NodeList:
+transition(document.querySelectorAll('.should-fade'), 'fade');
 ```
 
 ### Parameters
 
-- `element` (`HTMLElement`): the target DOM element
+- `element` (`HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>`): the target DOM element
 - `name` (`String|Object`): the name of the transition or an object of classes or styles to apply
 - `endMode = 'remove'` (`String`): whether or not the transition keeps its final state or not, can be `remove` or `keep`, defaults to `remove`.
 

diff --git a/packages/docs/vite.config.js b/packages/docs/vite.config.js
@@ -19,9 +19,25 @@ export default defineConfig({
         }
       },
     },
+    {
+      name: 'try-ts-files',
+      resolveId(id, importer) {
+        if (importer.includes('packages/js-toolkit/utils/css/') && id === './utils.js') {
+          return path.join(path.dirname(importer), 'utils.ts');
+        }
+
+        if (importer.includes('packages/js-toolkit/services/') && id === '../utils/index.js') {
+          return path.resolve(path.dirname(importer), '../utils/index.ts');
+        }
+
+        return null;
+      },
+    },
   ],
   resolve: {
     alias: {
+      '@studiometa/js-toolkit/utils': path.resolve('../js-toolkit/utils/index.ts'),
+      '@studiometa/js-toolkit': path.resolve('../js-toolkit/index.ts'),
       './VPNavBarTitle.vue': path.resolve('.vitepress/theme/components/NavBarTitle.vue'),
       './VPNavBarSearch.vue': path.resolve('.vitepress/theme/components/SearchBtn.vue'),
     },

diff --git a/packages/js-toolkit/Base/index.ts b/packages/js-toolkit/Base/index.ts
@@ -1,10 +1,10 @@
 /* eslint-disable no-use-before-define */
 import { getComponentElements, getEventTarget } from './utils.js';
-import ChildrenManager from './managers/ChildrenManager.js';
-import RefsManager from './managers/RefsManager.js';
-import ServicesManager from './managers/ServicesManager.js';
-import EventsManager from './managers/EventsManager.js';
-import OptionsManager from './managers/OptionsManager.js';
+import { ChildrenManager } from './managers/ChildrenManager.js';
+import { RefsManager } from './managers/RefsManager.js';
+import { ServicesManager } from './managers/ServicesManager.js';
+import { EventsManager } from './managers/EventsManager.js';
+import { OptionsManager } from './managers/OptionsManager.js';
 import { noop, isDev, isFunction, isArray } from '../utils/index.js';
 
 let id = 0;

diff --git a/...-toolkit/Base/managers/AbstractManager.js → ...-toolkit/Base/managers/AbstractManager.ts b/...-toolkit/Base/managers/AbstractManager.js → ...-toolkit/Base/managers/AbstractManager.ts
@@ -1,50 +1,39 @@
-/**
- * @typedef {import('../index.js').Base} Base
- * @typedef {import('../index.js').BaseConfig} BaseConfig
- * @typedef {import('./EventsManager.js').default} EventsManager
- */
+import type { Base } from '../index.js';
 
 /**
  * AbstractManager class.
  */
-export default class AbstractManager {
+export class AbstractManager {
   /**
-   * @type {Base}
+   * Base instance.
    */
-  __base;
+  __base: Base;
 
   /**
    * Get the base instance root element.
-   * @returns {HTMLElement}
    */
   get __element() {
     return this.__base.$el;
   }
 
   /**
    * Get the base instance config.
-   * @returns {BaseConfig}
    */
   get __config() {
-    // @ts-ignore
     return this.__base.__config;
   }
 
   /**
    * Get the events manager.
-   * @returns {EventsManager}
    */
   get __eventsManager() {
-    // @ts-ignore
     return this.__base.__events;
   }
 
   /**
    * Class constructor.
-   *
-   * @param   {Base} base
    */
-  constructor(base) {
+  constructor(base: Base) {
     this.__base = base;
     this.__hideProperties(['__base']);
   }
@@ -54,7 +43,7 @@ export default class AbstractManager {
    * @param   {string[]} properties
    * @returns {void}
    */
-  __hideProperties(properties) {
+  __hideProperties(properties: string[]) {
     Object.defineProperties(
       this,
       Object.fromEntries(

diff --git a/packages/js-toolkit/Base/managers/ChildrenManager.ts b/packages/js-toolkit/Base/managers/ChildrenManager.ts
@@ -4,7 +4,7 @@ import type {
   BaseAsyncConstructor,
   BaseEl,
 } from '../index.js';
-import AbstractManager from './AbstractManager.js';
+import { AbstractManager } from './AbstractManager.js';
 import { getComponentElements } from '../utils.js';
 
 /**
@@ -170,7 +170,7 @@ function __triggerHookForAll(that: ChildrenManager, hook: '$mount' | '$update' |
 /**
  * Children manager.
  */
-export default class ChildrenManager extends AbstractManager {
+export class ChildrenManager extends AbstractManager {
   /**
    * Store async component promises to avoid calling them multiple times and
    * waiting for them when they are already resolved.

diff --git a/packages/js-toolkit/Base/managers/EventsManager.ts b/packages/js-toolkit/Base/managers/EventsManager.ts
@@ -2,7 +2,7 @@ import type { Base } from '../index.js';
 import getAllProperties from '../../utils/object/getAllProperties.js';
 import { isArray } from '../../utils/index.js';
 import { getEventTarget, eventIsNative, eventIsDefinedInConfig } from '../utils.js';
-import AbstractManager from './AbstractManager.js';
+import { AbstractManager } from './AbstractManager.js';
 import { normalizeRefName } from './RefsManager.js';
 
 const names = new Map();
@@ -228,8 +228,8 @@ function manageRootElement(that: EventsManager, mode: 'add' | 'remove' = 'add')
  * @todo Prevent binding of `onChildOrRefEvent` to the root element
  * @todo Use event delegation?
  */
-export default class EventsManager extends AbstractManager {
-  __methodsCache: Map<string, string[]> = new Map();
+export class EventsManager extends AbstractManager {
+  __methodsCache:Map<string, string[]> = new Map();
 
   /**
    * Event listener object for the root element.