Merge branch 'release/2.3.0'

studiometa · Jul 14, 2022 · aabd60d · aabd60d
2 parents c8ee987 + aeab252
commit aabd60d
Show file tree

Hide file tree

Showing 90 changed files with 8,446 additions and 8,795 deletions.
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -69,4 +69,4 @@ jobs:
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           build_script: npm run build-for-export-size
-          paths: dist
+          paths: ./dist
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.2.3",
+  "version": "2.3.0",
   "private": true,
   "workspaces": [
     "packages/*"
@@ -27,15 +27,15 @@
     "@studiometa/prettier-config": "^2.1.1",
     "@studiometa/stylelint-config": "^2.0.0",
     "@types/estree": "^0.0.51",
-    "@types/jest": "^27.5.1",
-    "@types/node": "^17.0.35",
-    "@typescript-eslint/eslint-plugin": "^5.26.0",
-    "@typescript-eslint/parser": "^5.26.0",
-    "esbuild": "^0.14.39",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^17.0.42",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
+    "@typescript-eslint/parser": "^5.27.1",
+    "esbuild": "^0.14.43",
     "eslint": "^8.16.0",
-    "eslint-plugin-jest": "^26.2.2",
+    "eslint-plugin-jest": "^26.5.3",
     "fast-glob": "^3.2.11",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.1",
     "typescript": "^4.7.2"
   }
 }
diff --git a/packages/demo/meta.config.js b/packages/demo/meta.config.js
@@ -6,10 +6,17 @@ module.exports = {
   webpack(config, isDev) {
     config.resolve.alias = {
       ...(config.resolve.alias || {}),
-      vue$: 'vue/dist/vue.esm.js',
       '@studiometa/js-toolkit': path.resolve(__dirname, '../js-toolkit'),
     };
 
+    // Remove Vue loader and plugin.
+    config.plugins = config.plugins.filter((plugin) => {
+      return plugin.constructor.name !== 'VueLoaderPlugin';
+    });
+    config.module.rules = config.module.rules.filter((rule) => {
+      return !(rule.use && rule.use.includes('vue-loader'));
+    });
+
     config.plugins.push(
       new webpack.DefinePlugin({
         __DEV__: JSON.stringify(isDev),

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-demo",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "private": true,
   "type": "commonjs",
   "scripts": {
@@ -15,10 +15,9 @@
     "@studiometa/webpack-config": "^3.1.2",
     "eslint": "^8.16.0",
     "postcss": "^8.4.14",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.1",
     "stylefire": "^7.0.3",
-    "stylelint": "^14.8.5",
-    "tailwindcss": "^3.0.24",
-    "vue": "^2.6.14"
+    "stylelint": "^13.13.1",
+    "tailwindcss": "^3.1.3"
   }
 }
diff --git a/packages/demo/src/js/app.js b/packages/demo/src/js/app.js
@@ -9,12 +9,12 @@ import {
 } from '@studiometa/js-toolkit';
 import { matrix } from '@studiometa/js-toolkit/utils/css';
 import ScrollToDemo from './components/ScrollToDemo.js';
-import MyVueComponent from './components/MyVueComponent.js';
 import Parallax from './components/Parallax.js';
 import ResponsiveOptions from './components/ResponsiveOptions.js';
 import AnimateTest from './components/AnimateTest.js';
 import AnimateScrollTest from './components/AnimateScrollTest.js';
 import AnimateTestMultiple from './components/AnimateTestMultiple.js';
+import ParentNativeEvent from './components/ParentNativeEvent/index.js';
 
 /**
  * App class.
@@ -28,6 +28,7 @@ class App extends Base {
     refs: ['modal'],
     log: false,
     components: {
+      ParentNativeEvent,
       AnimateTest,
       AnimateScrollTest,
       AnimateTestMultiple,
@@ -106,7 +107,6 @@ class App extends Base {
           app
         ),
       ScrollToDemo,
-      MyVueComponent,
       Parallax,
     },
   };

diff --git a/packages/demo/src/js/components/AnimateTest.js b/packages/demo/src/js/components/AnimateTest.js
@@ -1,5 +1,5 @@
 import { Base } from '@studiometa/js-toolkit';
-import { animate, ease } from '@studiometa/js-toolkit/utils';
+import { animate, ease, domScheduler } from '@studiometa/js-toolkit/utils';
 
 /**
  * AnimateTest class.
@@ -35,7 +35,9 @@ export default class AnimateTest extends Base {
         duration: this.$options.duration,
         easing: ease[this.$options.easing],
         onProgress: (progress) => {
-          this.$refs.progress.value = progress;
+          domScheduler.write(() => {
+            this.$refs.progress.value = progress;
+          });
         },
       }
     );

diff --git a/packages/demo/src/js/components/CustomComponent.vue b/packages/demo/src/js/components/CustomComponent.vue
diff --git a/packages/demo/src/js/components/MyVueComponent.js b/packages/demo/src/js/components/MyVueComponent.js
diff --git a/packages/demo/src/js/components/ParentNativeEvent/Child.js b/packages/demo/src/js/components/ParentNativeEvent/Child.js
@@ -0,0 +1,13 @@
+import { Base } from '@studiometa/js-toolkit';
+
+/**
+ * Child class.
+ */
+export default class Child extends Base {
+  /**
+   * Config.
+   */
+  static config = {
+    name: 'Child',
+  };
+}
diff --git a/packages/demo/src/js/components/ParentNativeEvent/index.js b/packages/demo/src/js/components/ParentNativeEvent/index.js
@@ -0,0 +1,26 @@
+import { Base } from '@studiometa/js-toolkit';
+import Child from './Child.js';
+
+/**
+ * ParentNativeEvent class.
+ */
+export default class ParentNativeEvent extends Base {
+  /**
+   * Config.
+   */
+  static config = {
+    name: 'ParentNativeEvent',
+    log: true,
+    components: {
+      Child,
+    },
+  };
+
+  onChildClick(...args) {
+    this.$log(this.$id, 'onChildClick', ...args);
+  }
+
+  onChildDede(...args) {
+    this.$log(this.$id, 'onChildDede', ...args);
+  }
+}
diff --git a/packages/demo/src/templates/pages/child-native-event.twig b/packages/demo/src/templates/pages/child-native-event.twig
@@ -0,0 +1,7 @@
+{% extends '@layouts/base.twig' %}
+{% block main %}
+  <div data-component="ParentNativeEvent">
+    <button data-component="Child">Click me</button>
+    <button data-component="Child">Click me</button>
+  </div>
+{% endblock %}
diff --git a/packages/demo/src/templates/pages/index.twig b/packages/demo/src/templates/pages/index.twig
@@ -472,15 +472,6 @@
 
       <hr class="my-10" />
 
-      <!-- BEGIN withVue component-->
-      <div data-component="MyVueComponent">
-        <div data-ref="vue">
-        </div>
-      </div>
-      <!-- END withVue component-->
-
-      <hr class="my-10" />
-
       <!--- BEGIN ScrollToDemo component -->
       <div data-component="ScrollToDemo">
         <h2 class="text-lg mb-4">Scroll to</h2>

diff --git a/packages/docs/.vitepress/config.js b/packages/docs/.vitepress/config.js
@@ -9,21 +9,33 @@ export default defineConfig({
   lang: 'en-US',
   title: 'JS Toolkit',
   description: 'A set of useful little bits of JavaScript to boost your project! 🚀',
+  lastUpdated: true,
   head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/logo.png' }]],
   themeConfig: {
+    logo: '/logo.png',
     version: pkg.version,
     repo: 'studiometa/js-toolkit',
     docsDir: 'packages/docs',
     lastUpdated: 'Last updated',
     editLinks: true,
     editLinkText: 'Edit this page on GitHub',
     sidebarDepth: 3,
+    footer: {
+      message: 'MIT Licensed',
+      copyright: 'Copyright © 2020–present Studio Meta',
+    },
+    socialLinks: [{ icon: 'github', link: 'https://github.com/studiometa/js-toolkit' }],
     nav: [
       { text: 'Guide', link: '/guide/' },
       { text: 'API Reference', link: '/api/' },
       { text: 'Utils Reference', link: '/utils/' },
-      { text: 'Demo', link: 'https://studiometa-js-toolkit-demo.netlify.app/' },
-      { text: 'Release Notes', link: 'https://github.com/studiometa/js-toolkit/releases' },
+      {
+        text: `v${pkg.version}`,
+        items: [
+          { text: 'Release Notes', link: 'https://github.com/studiometa/js-toolkit/releases' },
+          { text: 'Demo', link: 'https://studiometa-js-toolkit-demo.netlify.app/' },
+        ],
+      },
     ],
     sidebar: {
       '/guide/': getGuideSidebar(),
@@ -40,7 +52,7 @@ function getGuideSidebar() {
   return [
     {
       text: 'Introduction',
-      children: [
+      items: [
         { text: 'Getting started', link: '/guide/' },
         { text: 'Managing components', link: '/guide/introduction/managing-components.html' },
         { text: 'Managing refs', link: '/guide/introduction/managing-refs.html' },
@@ -52,7 +64,7 @@ function getGuideSidebar() {
     },
     {
       text: 'Going further',
-      children: [
+      items: [
         { text: 'Using decorators', link: '/guide/going-further/using-decorators.html' },
         { text: 'Lazy imports', link: '/guide/going-further/lazy-imports.html' },
         {
@@ -63,7 +75,7 @@ function getGuideSidebar() {
     },
     {
       text: 'Recipes',
-      children: [
+      items: [
         {
           text: 'Counter component',
           link: '/guide/recipes/counter-component/',
@@ -80,7 +92,7 @@ function getGuideSidebar() {
     },
     {
       text: 'Migration guide',
-      children: [
+      items: [
         {
           text: 'v1 → v2',
           link: '/guide/migration/v1-to-v2.html',
@@ -95,22 +107,22 @@ function getApiSidebar({ expanded = 'api' } = {}) {
     {
       text: 'Base class',
       link: '/api/',
-      children: expanded === 'api' ? getBaseSidebar() : getBaseSidebar(),
+      items: expanded === 'api' ? getBaseSidebar() : getBaseSidebar(),
     },
     {
       text: 'Helpers',
       link: '/api/helpers/',
-      children: expanded === 'helpers' ? getHelpersSidebar() : getHelpersSidebar(),
+      items: expanded === 'helpers' ? getHelpersSidebar() : getHelpersSidebar(),
     },
     {
       text: 'Services',
       link: '/api/services/',
-      children: expanded === 'services' ? getServicesSidebar() : getServicesSidebar(),
+      items: expanded === 'services' ? getServicesSidebar() : getServicesSidebar(),
     },
     {
       text: 'Decorators',
       link: '/api/decorators/',
-      children: expanded === 'decorators' ? getDecoratorsSidebar() : getDecoratorsSidebar(),
+      items: expanded === 'decorators' ? getDecoratorsSidebar() : getDecoratorsSidebar(),
     },
   ];
 }
@@ -198,7 +210,7 @@ function getUtilsSidebar() {
     {
       text: 'Utils',
       link: '/utils/',
-      children: [
+      items: [
         { text: 'debounce', link: '/utils/debounce.html' },
         { text: 'focusTrap', link: '/utils/focusTrap.html' },
         { text: 'keyCodes', link: '/utils/keyCodes.html' },
@@ -208,13 +220,14 @@ function getUtilsSidebar() {
         { text: 'nextTick', link: '/utils/nextTick.html' },
         { text: 'scrollTo', link: '/utils/scrollTo.html' },
         { text: 'throttle', link: '/utils/throttle.html' },
+        { text: 'tween', link: '/utils/tween.html' },
         { text: 'useScheduler', link: '/utils/useScheduler.html' },
       ],
     },
     {
       text: 'Collision utils',
       link: '/utils/collision/',
-      children: [
+      items: [
         { text: 'boundingRectToCircle', link: '/utils/collision/boundingRectToCircle.html' },
         { text: 'collideCircleCircle', link: '/utils/collision/collideCircleCircle.html' },
         { text: 'collideCircleRect', link: '/utils/collision/collideCircleRect.html' },
@@ -226,7 +239,7 @@ function getUtilsSidebar() {
     {
       text: 'CSS utils',
       // link: '/utils/css/',
-      children: [
+      items: [
         { text: 'addClass', link: '/utils/css/addClass.html' },
         { text: 'addStyle', link: '/utils/css/addStyle.html' },
         { text: 'animate', link: '/utils/css/animate.html' },
@@ -242,7 +255,7 @@ function getUtilsSidebar() {
     {
       text: 'History utils',
       link: '/utils/history/',
-      children: [
+      items: [
         { text: 'historyPush', link: '/utils/history/historyPush.html' },
         { text: 'historyReplace', link: '/utils/history/historyReplace.html' },
         { text: 'objectToURLSearchParams', link: '/utils/history/objectToURLSearchParams.html' },
@@ -251,7 +264,7 @@ function getUtilsSidebar() {
     {
       text: 'Math utils',
       // link: '/utils/math/',
-      children: [
+      items: [
         { text: 'clamp', link: '/utils/math/clamp.html' },
         { text: 'clamp01', link: '/utils/math/clamp01.html' },
         { text: 'createEaseInOut', link: '/utils/math/createEaseInOut.html' },
@@ -267,7 +280,7 @@ function getUtilsSidebar() {
     {
       text: 'String utils',
       link: '/utils/string/',
-      children: [
+      items: [
         { text: 'withLeadingCharacters', link: '/utils/string/withLeadingCharacters.html' },
         { text: 'withLeadingSlash', link: '/utils/string/withLeadingSlash.html' },
         { text: 'withoutLeadingCharacters', link: '/utils/string/withoutLeadingCharacters.html' },