Merge branch 'release/1.6.0'

studiometa · Aug 27, 2021 · 3e13dd8 · 3e13dd8
2 parents efb96c5 + 3be56ac
commit 3e13dd8
Show file tree

Hide file tree

Showing 43 changed files with 39,120 additions and 17,193 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": "1.5.1",
+  "version": "1.6.0",
   "private": true,
   "workspaces": [
     "packages/*"
@@ -28,21 +28,21 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.14.8",
-    "@babel/core": "^7.14.8",
+    "@babel/core": "^7.15.0",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-transform-runtime": "^7.14.5",
-    "@babel/preset-env": "^7.14.8",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
     "@studiometa/browserslist-config": "^1.0.1",
     "@studiometa/eslint-config": "^2.1.3",
     "@studiometa/prettier-config": "^2.0.1",
     "@studiometa/stylelint-config": "^2.0.0",
-    "@types/estree": "^0.0.47",
-    "@types/jest": "^26.0.24",
-    "@types/node": "^15.14.0",
-    "@typescript-eslint/eslint-plugin": "^4.28.4",
-    "@typescript-eslint/parser": "^4.28.5",
+    "@types/estree": "^0.0.50",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.2",
+    "@typescript-eslint/eslint-plugin": "^4.29.3",
+    "@typescript-eslint/parser": "^4.29.3",
     "babel-plugin-add-import-extension": "^1.6.0",
-    "eslint": "^7.31.0",
+    "eslint": "^7.32.0",
     "eslint-plugin-jest": "^24.4.0",
     "microbundle": "^0.13.3",
     "prettier": "^2.3.2",

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-demo",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "private": true,
   "type": "commonjs",
   "scripts": {
@@ -10,12 +10,12 @@
   "dependencies": {
     "@studiometa/eslint-config": "^2.1.3",
     "@studiometa/stylelint-config": "^2.0.0",
-    "@studiometa/tailwind-config": "^1.0.2",
-    "@studiometa/webpack-config": "^2.9.0",
-    "eslint": "^7.27.0",
-    "postcss": "^8.3.0",
-    "prettier": "^2.3.0",
+    "@studiometa/tailwind-config": "^1.0.4",
+    "@studiometa/webpack-config": "^2.9.3",
+    "eslint": "^7.32.0",
+    "postcss": "^8.3.6",
+    "prettier": "^2.3.2",
     "stylelint": "^13.13.1",
-    "tailwindcss": "^2.1.2"
+    "tailwindcss": "^2.2.7"
   }
 }
diff --git a/packages/demo/src/js/app.js b/packages/demo/src/js/app.js
@@ -1,46 +1,17 @@
 /* eslint-disable max-classes-per-file */
 import Base from '@studiometa/js-toolkit';
 import { Modal, Tabs, Accordion, Cursor, Draggable } from '@studiometa/js-toolkit/components';
+import {
+  importWhenIdle,
+  importWhenVisible,
+  importOnInteraction,
+} from '@studiometa/js-toolkit/helpers';
 import { matrix } from '@studiometa/js-toolkit/utils/css';
 import withBreakpointObserver from '@studiometa/js-toolkit/decorators/withBreakpointObserver.js';
-// import useDrag from '@studiometa/js-toolkit/services/drag';
-// import styler from 'stylefire';
-import BreakpointManagerDemo from './components/BreakPointManagerDemo/index.js';
 import BreakpointObserverDemo from './components/BreakpointObserverDemo.js';
 
-// window.addEventListener('load', () => {
-//   const el = document.querySelector('[data-component="DraggableElement"]');
-
-//   if (!el) {
-//     console.log('No el found.');
-//     return;
-//   }
-
-//   const elStyler = styler(el);
-//   const origins = { x: 0, y: 0 };
-
-//   const { add } = useDrag(el);
-//   add('one', (props) => {
-//     if (props.mode === 'drop') {
-//       console.log(props.final);
-//     }
-
-//     if (props.mode === 'stop') {
-//       console.log(props.x, props.y);
-//     }
-
-//     if (props.mode === 'start') {
-//       origins.x = elStyler.get('x');
-//       origins.y = elStyler.get('y');
-//       return;
-//     }
-
-//     elStyler.set({
-//       x: origins.x + props.distance.x,
-//       y: origins.y + props.distance.y,
-//     });
-//   });
-// });
+// Add the new icon ref
+Accordion.config.components.AccordionItem.config.refs.push('icon');
 
 /**
  * @typedef {import(@studiometa/js-toolkit/abstracts/Base/index).BaseConfig} BaseConfig
@@ -50,10 +21,16 @@ class App extends Base {
   static config = {
     name: 'App',
     refs: ['modal'],
-    log: true,
+    log: false,
     components: {
       Accordion,
-      BreakpointManagerDemo,
+      BreakpointManagerDemo: (app) =>
+        importOnInteraction(
+          () => import('./components/BreakPointManagerDemo/index.js'),
+          '#import-breakpoint-manager-demo',
+          'click',
+          app
+        ),
       BreakpointObserverDemo,
       Cursor: class extends Cursor {
         static config = {
@@ -70,8 +47,14 @@ class App extends Base {
         }
       },
       Draggable,
-      Skew: () => import(/* webpackChunkName: "Skew" */ './components/Skew.js'),
-      '[data-src]': () => import(/* webpackChunkName: "Lazyload" */ './components/Lazyload.js'),
+      Skew: () =>
+        importWhenIdle(() => import(/* webpackChunkName: "Skew" */ './components/Skew.js')),
+      '[data-src]': (app) =>
+        importWhenVisible(
+          () => import(/* webpackChunkName: "Lazyload" */ './components/Lazyload.js'),
+          '[data-src]',
+          app
+        ),
       Modal: withBreakpointObserver(Modal),
       Tabs,
     },
@@ -97,5 +80,7 @@ class App extends Base {
   }
 }
 
-const app = App.$factory('html');
-window.APP = app;
+window.addEventListener('load', () => {
+  const app = App.$factory('html');
+  window.APP = app;
+});
diff --git a/packages/demo/src/templates/pages/index.twig b/packages/demo/src/templates/pages/index.twig
@@ -17,6 +17,9 @@
         <div class="z-under absolute inset-0 opacity-75 bg-black rounded"></div>
         <span data-ref="content">BreakpointManagerDemo</span>
       </div>
+      <div class="mb-10 text-center">
+        <button type="button" id="import-breakpoint-manager-demo" class="py-4 px-8 text-white rounded bg-black focus:opacity-50">Import BreakpointManagerDemo</button>
+      </div>
       <!-- END BreakpointManagerDemo -->
 
       <!-- BEGIN BreakpointObserverDemo -->

diff --git a/packages/docs/.vitepress/config.js b/packages/docs/.vitepress/config.js
@@ -13,7 +13,14 @@ module.exports = {
     nav: [
       { text: 'Home', link: '/' },
       { text: 'Guide', link: '/guide/' },
-      { text: 'API', link: '/api/' },
+      {
+        text: 'API',
+        link: '/api/',
+        items: [
+          { text: 'Reference', link: '/api/' },
+          { text: 'Helpers', link: '/api/helpers/' },
+        ],
+      },
       {
         text: 'Decorators',
         link: '/decorators/',
@@ -66,8 +73,41 @@ module.exports = {
       },
       { text: 'Demo', link: 'https://studiometa-js-toolkit-demo.netlify.app/' },
     ],
+    sidebar: {
+      '/api/helpers/': getHelpersSidebar(),
+    },
   },
   markdown: {
-    toc: { includeLevel: [1,2] },
+    toc: { includeLevel: [1, 2] },
   },
 };
+
+
+function getHelpersSidebar() {
+  return [
+    {
+      text: 'App helper',
+      link: '#app-helper',
+      children: [
+        { text: 'createApp', link: '#createApp'}
+      ]
+    },
+    {
+      text: 'Lazy import helpers',
+      link: '#lazy-import-helpers',
+      children: [
+        { text: 'importOnInteraction', link: '#importOnInteraction' },
+        { text: 'importWhenIdle', link: '#importWhenIdle'},
+        { text: 'importWhenVisible', link: '#importWhenVisible'},
+      ]
+    },
+    {
+      text: 'Legacy helpers',
+      link: '#legacy-helpers',
+      children: [
+        { text: 'defineComponent', link: '#defineComponent' },
+        { text: 'createBase', link: '#createBase'},
+      ]
+    }
+  ]
+}