Merge branch 'release/2.10.0'

CHANGELOG.md

@@ -4,6 +4,26 @@ All notable changes to this project will be documented in this file. The format
 
 ## [Unreleased]
 
+## [v2.10.0](https://github.com/studiometa/js-toolkit/compare/2.9.1..2.10.0) (2023-04-17)
+
+### Added
+
+- Add an `importOnMediaQuery` helper function to import a component based on a provided media query ([#313](https://github.com/studiometa/js-toolkit/pull/313))
+- Add an `importWhenPrefersMotion` helper function to import a component when the user accepts motion ([#313](https://github.com/studiometa/js-toolkit/pull/313))
+- Add a `withMountOnMediaQuery` decorator that mounts a component based on a provided media query ([#313](https://github.com/studiometa/js-toolkit/pull/313))
+- Add a `withMountWhenPrefersMotion` decorator that mounts a component when the user accepts motion ([#313](https://github.com/studiometa/js-toolkit/pull/313))
+
+### Fixed
+
+- **easeInExpo**: fix the expo easing functions never reaching 0 or 1 ([#353](https://github.com/studiometa/js-toolkit/pull/353))
+- Fix doc layout being broken on some pages ([3c88cbc](https://github.com/studiometa/js-toolkit/commit/3c88cbc))
+
+### Changed
+
+- Use VitePress native local search ([84d3e44](https://github.com/studiometa/js-toolkit/commit/84d3e44))
+- Change Vue from a dev to a peer dependency ([ecffe63](https://github.com/studiometa/js-toolkit/commit/ecffe63))
+- Update NPM dependencies ([#355](https://github.com/studiometa/js-toolkit/pull/355), [#358](https://github.com/studiometa/js-toolkit/pull/358), [5701a4c](https://github.com/studiometa/js-toolkit/commit/5701a4c), [d0bfa0c](https://github.com/studiometa/js-toolkit/commit/d0bfa0c))
+
 ## [v2.9.1](https://github.com/studiometa/js-toolkit/compare/2.9.0..2.9.1) (2023-02-08)
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-workspace",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "private": true,
   "workspaces": [
     "packages/*"
@@ -10,7 +10,7 @@
     "demo:watch": "npm run watch --workspace=@studiometa/js-toolkit-demo",
     "demo:build": "npm run build --workspace=@studiometa/js-toolkit-demo",
     "docs:dev": "npm run dev --workspace=@studiometa/js-toolkit-docs",
-    "docs:build": "cd packages/docs && npm install && rm -rf node_modules/.vite && npm run build",
+    "docs:build": "npm run build --workspace=@studiometa/js-toolkit-docs",
     "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 --ext=.js,.ts",
@@ -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.1",
     "@studiometa/prettier-config": "^2.1.1",
     "@studiometa/stylelint-config": "^3.0.0",
     "@types/estree": "^1.0.0",
-    "@types/jest": "^29.4.0",
-    "@types/node": "^18.11.18",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
-    "eslint": "^8.32.0",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^18.15.11",
+    "@typescript-eslint/eslint-plugin": "^5.57.0",
+    "@typescript-eslint/parser": "^5.57.0",
+    "eslint": "^8.37.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-import-resolver-exports": "^1.0.0-beta.4",
+    "eslint-import-resolver-exports": "^1.0.0-beta.5",
     "eslint-plugin-jest": "^27.2.1",
-    "prettier": "^2.8.3",
-    "typescript": "^4.9.4"
+    "prettier": "^2.8.7",
+    "typescript": "^4.9.5"
   },
   "dependencies": {
     "esbuild": "^0.15.18",
-    "fast-glob": "^3.2.12",
-    "patch-package": "^6.5.1"
+    "fast-glob": "^3.2.12"
   }
 }

packages/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-demo",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "private": true,
   "type": "commonjs",
   "scripts": {
@@ -12,13 +12,13 @@
     "@studiometa/eslint-config": "^3.1.1",
     "@studiometa/stylelint-config": "^3.0.0",
     "@studiometa/tailwind-config": "^2.0.2",
-    "@studiometa/ui": "^0.2.23",
+    "@studiometa/ui": "^0.2.31",
     "@studiometa/webpack-config": "^4.1.2",
-    "eslint": "^8.32.0",
+    "eslint": "^8.37.0",
     "postcss": "^8.4.21",
-    "prettier": "^2.8.3",
+    "prettier": "^2.8.7",
     "stylefire": "^7.0.3",
-    "stylelint": "^14.16.1",
-    "tailwindcss": "^3.2.4"
+    "stylelint": "^15.5.0",
+    "tailwindcss": "^3.2.7"
   }
 }

packages/demo/src/js/app.ts

@@ -7,6 +7,7 @@ import {
   importOnInteraction,
   withBreakpointObserver,
   withExtraConfig,
+  importOnMediaQuery,
 } from '@studiometa/js-toolkit';
 import { matrix } from '@studiometa/js-toolkit/utils';
 import ScrollToDemo from './components/ScrollToDemo.js';
@@ -17,6 +18,7 @@ import AnimateScrollTest from './components/AnimateScrollTest.js';
 import AnimateTestMultiple from './components/AnimateTestMultiple.js';
 import ParentNativeEvent from './components/ParentNativeEvent/index.js';
 import ScrolledInViewOffset from './components/ScrolledInViewOffset.js';
+import MediaQueryDemo from './components/MediaQueryDemo.js';
 
 let numberOfTick = 0;
 let time = performance.now();
@@ -79,6 +81,14 @@ class App extends Base {
       ParentNativeEvent,
       AnimateTest,
       AnimateScrollTest,
+      AnimateScrollTestMedia: () =>
+        importOnMediaQuery(
+          async () => {
+            const AnimateScrollTest = await import('./components/AnimateScrollTest');
+            return AnimateScrollTest;
+          },
+          'not (prefers-reduced-motion)',
+        ),
       AnimateTestMultiple,
       ResponsiveOptions,
       ScrolledInViewOffset,
@@ -159,6 +169,7 @@ class App extends Base {
         ),
       ScrollToDemo,
       Parallax,
+      MediaQueryDemo,
     },
   };
 

packages/demo/src/js/components/MediaQueryDemo.js

@@ -0,0 +1,19 @@
+import { Base, withMountOnMediaQuery } from '@studiometa/js-toolkit';
+
+export default class MediaQueryDemo extends withMountOnMediaQuery(
+  Base,
+  'not (prefers-reduced-motion)',
+) {
+  static config = {
+    name: 'MediaQueryDemo',
+    log: true,
+  };
+
+  mounted() {
+    this.$log('Mounted! The user accepts motion.');
+  }
+
+  destroyed() {
+    this.$log('Destroyed! The user prefers reduced motion.');
+  }
+}

packages/demo/src/templates/pages/index.twig

@@ -46,6 +46,18 @@
           { scaleX: 0, transformOrigin: 'top right', '--red': 0 }
         ]
       } %}
+      <p>Imports the component only if the following media query is true:</p>
+      <code>not (prefers-reduced-motion)</code>
+      {% include '@components/animate-test.twig' with {
+        name: 'AnimateScrollTestMedia',
+        target_class: 'w-full',
+        container_class: 'overflow-hidden',
+        steps: [
+          { scaleX: 0 },
+          { scaleX: 1, transformOrigin: 'top left' },
+          { scaleX: 0, transformOrigin: 'top right' }
+        ]
+      } %}
       <!-- BEGIN BreakpointManagerDemo -->
       <div
         data-component="BreakpointManagerDemo"
@@ -486,6 +498,7 @@
       <hr class="my-10" />
 
       <div class="left-0 right-0 bottom-0 mb-10 p-10 bg-gray-200">Bottom</div>
+      <div data-component="MediaQueryDemo"></div>
     </main>
     <!-- BEGIN Cursor component -->
     <div

packages/docs/.vitepress/config.js

@@ -25,6 +25,9 @@ export default defineConfig({
       message: 'MIT Licensed',
       copyright: 'Copyright © 2020–present Studio Meta',
     },
+    search: {
+      provider: 'local',
+    },
     socialLinks: [{ icon: 'github', link: 'https://github.com/studiometa/js-toolkit' }],
     nav: [
       { text: 'Guide', link: '/guide/' },
@@ -217,6 +220,8 @@ function getDecoratorsSidebar() {
     { text: 'withResponsiveOptions', link: '/api/decorators/withResponsiveOptions.html' },
     { text: 'withScrolledInView', link: '/api/decorators/withScrolledInView.html' },
     { text: 'withVue2', link: '/api/decorators/withVue2.html' },
+    { text: 'withMountOnMediaQuery', link: '/api/decorators/withMountOnMediaQuery.html' },
+    { text: 'withMountWhenPrefersMotion', link: '/api/decorators/withMountWhenPrefersMotion.html' },
   ];
 }
 
@@ -229,6 +234,8 @@ function getHelpersSidebar() {
     { text: 'importOnInteraction', link: '/api/helpers/importOnInteraction.html' },
     { text: 'importWhenIdle', link: '/api/helpers/importWhenIdle.html' },
     { text: 'importWhenVisible', link: '/api/helpers/importWhenVisible.html' },
+    { text: 'importOnMediaQuery', link: '/api/helpers/importOnMediaQuery.html' },
+    { text: 'importWhenPrefersMotion', link: '/api/helpers/importWhenPrefersMotion.html' },
     { text: 'isDirectChild', link: '/api/helpers/isDirectChild.html' },
   ];
 }