[Feature] Update dependencies

CHANGELOG.md

@@ -7,6 +7,7 @@ All notable changes to this project will be documented in this file. The format
 ### Changed
 
 - Improve performance by migrating from `forEach` to `for…of` for loops ([#391](https://github.com/studiometa/js-toolkit/pull/391))
+- Update NPM dependencies ([#392](https://github.com/studiometa/js-toolkit/pull/392))
 
 ## [v2.11.2](https://github.com/studiometa/js-toolkit/compare/2.11.1..2.11.2) (2023-07-13)
 

package.json

@@ -24,28 +24,26 @@
     "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",
-    "postinstall": "patch-package"
+    "build-for-export-size": "node scripts/add-utils-export.js && rm -rf dist && npm run build:pkg && npm run build:cp-files"
   },
   "devDependencies": {
     "@studiometa/eslint-config": "^3.1.3",
-    "@studiometa/prettier-config": "^2.1.1",
+    "@studiometa/prettier-config": "^3.0.0",
     "@studiometa/stylelint-config": "^3.0.2",
-    "@types/estree": "^1.0.1",
-    "@types/jest": "^29.5.3",
-    "@types/node": "^18.16.19",
+    "@types/estree": "^1.0.5",
+    "@types/jest": "^29.5.10",
+    "@types/node": "^20.10.1",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "eslint": "^8.44.0",
-    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint": "^8.54.0",
+    "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-import-resolver-exports": "^1.0.0-beta.5",
-    "eslint-plugin-jest": "^27.2.2",
-    "patch-package": "^7.0.1",
+    "eslint-plugin-jest": "^27.6.0",
     "prettier": "^2.8.8",
-    "typescript": "^4.9.5"
+    "typescript": "^5.3.2"
   },
   "dependencies": {
-    "esbuild": "^0.15.18",
-    "fast-glob": "^3.3.0"
+    "esbuild": "^0.19.8",
+    "fast-glob": "^3.3.2"
   }
 }

packages/demo/meta.config.mjs

@@ -1,6 +1,6 @@
 import { resolve, dirname } from 'node:path';
 import { defineConfig } from '@studiometa/webpack-config';
-import { prototyping } from '@studiometa/webpack-config/presets';
+import { prototyping } from '@studiometa/webpack-config-preset-prototyping';
 
 const { pathname } = new URL(import.meta.url);
 

packages/demo/package.json

@@ -12,13 +12,14 @@
     "@studiometa/eslint-config": "^3.1.3",
     "@studiometa/stylelint-config": "^3.0.2",
     "@studiometa/tailwind-config": "^2.0.2",
-    "@studiometa/ui": "^0.2.33",
-    "@studiometa/webpack-config": "^4.2.6",
-    "eslint": "^8.44.0",
+    "@studiometa/ui": "^0.2.40",
+    "@studiometa/webpack-config": "^5.3.0",
+    "@studiometa/webpack-config-preset-prototyping": "^5.3.0",
+    "eslint": "^8.54.0",
     "postcss": "^8.4.31",
     "prettier": "^2.8.8",
     "stylefire": "^7.0.3",
-    "stylelint": "^15.10.1",
-    "tailwindcss": "^3.3.2"
+    "stylelint": "^15.11.0",
+    "tailwindcss": "^3.3.5"
   }
 }

packages/docs/.vitepress/theme/components/Badge.vue

@@ -27,7 +27,7 @@
     border-radius: 0.25em;
     padding: 0.5em 0.75em;
     color: #fff;
-    background-color: var(--vp-c-brand);
+    background-color: var(--vp-button-brand-bg);
     white-space: nowrap;
   }
 

packages/docs/.vitepress/theme/index.js

@@ -1,14 +1,12 @@
 import DefaultTheme from 'vitepress/theme';
 import Badge from './components/Badge.vue';
-import Tabs from './components/Tabs.vue';
 import PreviewIframe from './components/PreviewIframe.vue';
 import './custom.scss';
 
 export default {
   ...DefaultTheme,
   enhanceApp({ app }) {
     app.component('Badge', Badge);
-    app.component('Tabs', Tabs);
     app.component('PreviewIframe', PreviewIframe);
   },
 };

packages/docs/guide/recipes/counter-component/index.md

@@ -30,20 +30,13 @@ Find below the JavaScript and HTML implementation of a counter component.
 
 <div class="my-4 p-10 rounded bg-vp-bg-alt text-center" v-html="CounterHtmlRaw"></div>
 
-<Tabs :items="tabs">
-  <template #content-1>
+::: code-group
 
-<<< ./guide/recipes/counter-component/Counter.js
+<<< ./Counter.js
 
-  </template>
-  <template #content-2>
+<<< ./Counter.html
 
-<<< ./guide/recipes/counter-component/Counter.html
-
-  </template>
-  <template #content-3>
-
-```js
+```js [app.js]
 import { Base, createApp } from '@studiometa/js-toolkit';
 import Counter from './Counter.js';
 
@@ -56,8 +49,7 @@ class App extends Base {
   };
 }
 
-export default createApp(App, document.body);
+export default createApp(App);
 ```
 
-  </template>
-</Tabs>
+:::

packages/docs/guide/recipes/scroll-linked-animation/index.md

@@ -34,20 +34,13 @@ This example demonstrate the usage of the [`scrolled` service](/api/methods-hook
   <p class="text-gray-400 text-xs text-center p-10 mt-10">Pictures from <a href="https://picsum.photos">picsum.photos</a></p>
 </div>
 
-<Tabs :items="tabs">
-  <template #content-1>
+::: code-group
 
-<<< ./guide/recipes/scroll-linked-animation/ScrollLinkedAnimation.js
+<<< ./ScrollLinkedAnimation.js
 
-  </template>
-  <template #content-2>
+<<< ./ScrollLinkedAnimation.html
 
-<<< ./guide/recipes/scroll-linked-animation/ScrollLinkedAnimation.html
-
-  </template>
-  <template #content-3>
-
-```js
+```js [app.js]
 import { Base, createApp } from '@studiometa/js-toolkit';
 import ScrollLinkedAnimation from './ScrollLinkedAnimation.js';
 
@@ -60,8 +53,7 @@ class App extends Base {
   };
 }
 
-export default createApp(App, document.body);
+export default createApp(App);
 ```
 
-  </template>
-</Tabs>
+:::

packages/docs/guide/recipes/teleport-refs/index.md

@@ -17,15 +17,10 @@ We can make sure that the moved refs are still accessible by saving the original
   ];
 </script>
 
-<Tabs :items="tabs">
-  <template #content-1>
+::: code-group
 
-<<< ./guide/recipes/teleport-refs/Modal.js
+<<< ./Modal.js
 
-  </template>
-  <template #content-2>
+<<< ./Modal.html
 
-<<< ./guide/recipes/teleport-refs/Modal.html
-
-  </template>
-</Tabs>
+:::

packages/docs/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@studiometa/tailwind-config": "^2.0.2",
-    "tailwindcss": "^3.3.1",
-    "vitepress": "^1.0.0-alpha.71"
+    "tailwindcss": "^3.3.5",
+    "vitepress": "^1.0.0-rc.31"
   }
 }

packages/js-toolkit/package.json

@@ -45,9 +45,9 @@
     "deepmerge": "^4.3.1"
   },
   "devDependencies": {
-    "vue": "^2.6"
+    "vue": "^2.6.0"
   },
   "peerDependencies": {
-    "vue": "^2.6 || ^3.0"
+    "vue": "^2.6.0 || ^3.0"
   }
 }

packages/js-toolkit/utils/history.ts

@@ -7,6 +7,8 @@ export interface HistoryOptions {
   hash?: string;
 }
 
+type SearchParamValue = string | number | boolean;
+
 /**
  * Set a param in a URLSearchParam instance.
  *
@@ -18,7 +20,7 @@ export interface HistoryOptions {
 function updateUrlSearchParam(
   params: URLSearchParams,
   name: string,
-  value: string | number | boolean | Array<unknown> | Record<string, unknown>,
+  value: SearchParamValue | Array<SearchParamValue> | Record<string, SearchParamValue>,
 ): URLSearchParams {
   if (value === '' || value === null || value === undefined) {
     if (params.has(name)) {

packages/tests/Base/index.spec.js

@@ -2,10 +2,10 @@
 import { jest } from '@jest/globals';
 import { Base } from '@studiometa/js-toolkit';
 import { html } from 'htl';
-import { ChildrenManager } from '@studiometa/js-toolkit/Base/managers/ChildrenManager';
-import { OptionsManager } from '@studiometa/js-toolkit/Base/managers/OptionsManager';
-import { RefsManager } from '@studiometa/js-toolkit/Base/managers/RefsManager';
-import wait from '../__utils__/wait';
+import { ChildrenManager } from '@studiometa/js-toolkit/Base/managers/ChildrenManager.js';
+import { OptionsManager } from '@studiometa/js-toolkit/Base/managers/OptionsManager.js';
+import { RefsManager } from '@studiometa/js-toolkit/Base/managers/RefsManager.js';
+import wait from '../__utils__/wait.js';
 
 describe('The abstract Base class', () => {
   it('must be extended', () => {

packages/tests/package.json

@@ -7,18 +7,18 @@
     "test": "NODE_NO_WARNINGS=1 NODE_OPTIONS=--experimental-vm-modules jest"
   },
   "dependencies": {
-    "@jest/globals": "^29.6.1",
-    "babel-jest": "^29.6.1",
+    "@jest/globals": "^29.7.0",
+    "babel-jest": "^29.7.0",
     "esbuild-jest": "^0.5.0",
     "htl": "^0.3.1",
     "html-loader-jest": "^0.2.1",
-    "jest": "^29.6.1",
-    "jest-environment-jsdom": "^29.6.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-matchmedia-mock": "^1.1.0",
     "ts-jest-resolver": "^2.0.1"
   },
   "devDependencies": {
-    "@jest/types": "^29.6.1",
-    "vue": "^2.6"
+    "@jest/types": "^29.6.3",
+    "vue": "^2.6.0"
   }
 }

packages/tests/services/key.spec.js

@@ -1,5 +1,5 @@
 import { jest } from '@jest/globals';
-import useKey from '@studiometa/js-toolkit/services/key';
+import { useKey } from '@studiometa/js-toolkit';
 
 describe('useKey', () => {
   const keydown = new KeyboardEvent('keydown', { keyCode: 27 });

packages/tests/services/pointer.spec.js

@@ -1,5 +1,5 @@
 import { jest } from '@jest/globals';
-import usePointer from '@studiometa/js-toolkit/services/pointer';
+import { usePointer } from '@studiometa/js-toolkit';
 
 describe('usePointer', () => {
   const { add, remove, props } = usePointer();

packages/tests/services/raf.spec.js

@@ -1,5 +1,5 @@
 import { jest } from '@jest/globals';
-import useRaf from '@studiometa/js-toolkit/services/raf';
+import { useRaf } from '@studiometa/js-toolkit';
 import wait from '../__utils__/wait.js';
 
 describe('useRaf', () => {

packages/tests/services/resize.spec.js

@@ -1,6 +1,6 @@
 import { jest } from '@jest/globals';
-import useResize from '@studiometa/js-toolkit/services/resize';
-import resizeWindow from '../__utils__/resizeWindow';
+import { useResize } from '@studiometa/js-toolkit';
+import resizeWindow from '../__utils__/resizeWindow.js';
 
 describe('useResize', () => {
   const { add, remove, props } = useResize();

packages/tests/services/scroll.spec.js

@@ -1,6 +1,5 @@
 import { jest } from '@jest/globals';
-import useScroll from '@studiometa/js-toolkit/services/scroll';
-import resizeWindow from '../__utils__/resizeWindow';
+import { useScroll } from '@studiometa/js-toolkit';
 
 describe('useScroll', () => {
   const { add, remove, props } = useScroll();

packages/tests/utils/collide/boundingRectToCircle.spec.js

@@ -1,4 +1,4 @@
-import { boundingRectToCircle } from '@studiometa/js-toolkit/utils/collide';
+import { boundingRectToCircle } from '@studiometa/js-toolkit/utils';
 
 describe('boundingRectToCircle method', () => {
   it('should be a circle object when a valid DOMRect is passed', () => {

packages/tests/utils/collide/collideCircleCircle.spec.js

@@ -1,4 +1,4 @@
-import { collideCircleCircle } from '@studiometa/js-toolkit/utils/collide';
+import { collideCircleCircle } from '@studiometa/js-toolkit/utils';
 
 describe('collideCircleCircle method', () => {
   it('should be true when circles are colliding', () => {

packages/tests/utils/collide/collideCircleRect.spec.js

@@ -1,4 +1,4 @@
-import { collideCircleRect } from '@studiometa/js-toolkit/utils/collide';
+import { collideCircleRect } from '@studiometa/js-toolkit/utils';
 
 describe('collideCircleRect method', () => {
   it('should be true when the circle and the rectangle are colliding from top left', () => {

packages/tests/utils/collide/collidePointCircle.spec.js

@@ -1,4 +1,4 @@
-import { collidePointCircle } from '@studiometa/js-toolkit/utils/collide';
+import { collidePointCircle } from '@studiometa/js-toolkit/utils';
 
 describe('collidePointCircle method', () => {
   it('should be true when the point is inside the circle', () => {

packages/tests/utils/collide/collidePointRect.spec.js

@@ -1,4 +1,4 @@
-import { collidePointRect } from '@studiometa/js-toolkit/utils/collide';
+import { collidePointRect } from '@studiometa/js-toolkit/utils';
 
 describe('collidePointRect method', () => {
   it('should be true when the point is inside the rectangle', () => {

packages/tests/utils/collide/collideRectRect.spec.js

@@ -1,4 +1,4 @@
-import { collideRectRect } from '@studiometa/js-toolkit/utils/collide';
+import { collideRectRect } from '@studiometa/js-toolkit/utils';
 
 describe('collideRectRect method', () => {
   it('should be true when the rectangle 1 has the same position as the rectangle 2', () => {