Merge branch 'release/2.9.1'

CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file. The format
 
 ## [Unreleased]
 
+## [v2.9.1](https://github.com/studiometa/js-toolkit/compare/2.9.0..2.9.1) (2023-02-08)
+
+### Fixed
+
+- **useDrag:** listen for drop events on the window instead of the target element ([#348](https://github.com/studiometa/js-toolkit/pull/348))
+- **getInstanceFromElement:** fix getting an instance from a falsy element ([#349](https://github.com/studiometa/js-toolkit/pull/349))
+- **withScrolledInView:** fix division by 0 resulting in `NaN` progress value ([#350](https://github.com/studiometa/js-toolkit/pull/350))
+
+### Changed
+
+- **createApp**: improve timing of app instanciation when using the `asyncChildren` feature ([#351](https://github.com/studiometa/js-toolkit/pull/351))
+
 ## [v2.9.0](https://github.com/studiometa/js-toolkit/compare/2.8.0..2.9.0) (2023-01-28)
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-workspace",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "private": true,
   "workspaces": [
     "packages/*"
@@ -32,20 +32,20 @@
     "@studiometa/prettier-config": "^2.1.1",
     "@studiometa/stylelint-config": "^3.0.0",
     "@types/estree": "^1.0.0",
-    "@types/jest": "^29.2.4",
+    "@types/jest": "^29.4.0",
     "@types/node": "^18.11.18",
-    "@typescript-eslint/eslint-plugin": "^5.45.1",
-    "@typescript-eslint/parser": "^5.45.1",
-    "eslint": "^8.30.0",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
+    "eslint": "^8.32.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-import-resolver-exports": "^1.0.0-beta.4",
-    "eslint-plugin-jest": "^27.1.7",
-    "prettier": "^2.8.1",
+    "eslint-plugin-jest": "^27.2.1",
+    "prettier": "^2.8.3",
     "typescript": "^4.9.4"
   },
   "dependencies": {
     "esbuild": "^0.15.18",
     "fast-glob": "^3.2.12",
-    "patch-package": "^6.5.0"
+    "patch-package": "^6.5.1"
   }
 }

packages/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-demo",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "private": true,
   "type": "commonjs",
   "scripts": {
@@ -14,9 +14,9 @@
     "@studiometa/tailwind-config": "^2.0.2",
     "@studiometa/ui": "^0.2.23",
     "@studiometa/webpack-config": "^4.1.2",
-    "eslint": "^8.30.0",
-    "postcss": "^8.4.19",
-    "prettier": "^2.8.1",
+    "eslint": "^8.32.0",
+    "postcss": "^8.4.21",
+    "prettier": "^2.8.3",
     "stylefire": "^7.0.3",
     "stylelint": "^14.16.1",
     "tailwindcss": "^3.2.4"

packages/demo/src/templates/pages/scrolled-in-view-nan.twig

@@ -0,0 +1,10 @@
+{% extends '@layouts/base.twig' %}
+
+{% block main %}
+  <div data-component="ScrolledInViewOffset" data-option-offset="start start / end end"
+    class="fixed inset-0">
+    <div data-ref="progress">
+      0
+    </div>
+  </div>
+{% endblock %}

packages/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-docs",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "type": "module",
   "private": true,
   "scripts": {

packages/js-toolkit/decorators/withScrolledInView/withScrolledInView.ts

@@ -57,6 +57,20 @@ export type WithScrolledInViewOptions = IntersectionObserverInit & {
   useOffsetSizes?: boolean;
 };
 
+function updateProgress(
+  props: ScrollInViewProps,
+  axis: 'x' | 'y',
+  progressKey: 'progress' | 'dampedProgress',
+  currentKey: 'current' | 'dampedCurrent',
+) {
+  props[progressKey][axis] =
+    props.start[axis] === props.end[axis]
+      ? 0
+      : clamp01(
+          (props[currentKey][axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),
+        );
+}
+
 /**
  * Update props on tick.
  */
@@ -77,12 +91,8 @@ function updateProps(
     dampFactor,
     dampPrecision,
   );
-  props.progress[axis] = clamp01(
-    (props.current[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),
-  );
-  props.dampedProgress[axis] = clamp01(
-    (props.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),
-  );
+  updateProgress(props, axis, 'progress', 'current');
+  updateProgress(props, axis, 'dampedProgress', 'dampedCurrent');
 }
 
 export interface WithScrolledInViewInterface extends BaseInterface {
@@ -186,11 +196,11 @@ export function withScrolledInView<S extends Base = Base>(
         // Y axis
         const [yStart, yEnd] = getEdges('y', targetSizes, containerSizes, offset);
         const yCurrent = clamp(window.pageYOffset, yStart, yEnd);
-        const yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));
+        const yProgress = yStart === yEnd ? 0 : clamp01((yCurrent - yStart) / (yEnd - yStart));
         // X axis
         const [xStart, xEnd] = getEdges('x', targetSizes, containerSizes, offset);
         const xCurrent = clamp(window.pageXOffset, xStart, xEnd);
-        const xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));
+        const xProgress = xStart === xEnd ? 0 : clamp01((xCurrent - xStart) / (xEnd - xStart));
 
         this.__props.start.x = xStart;
         this.__props.start.y = yStart;

packages/js-toolkit/helpers/createApp.ts

@@ -23,31 +23,33 @@ export default function createApp<S extends BaseConstructor<Base>, T extends Bas
       : { root: document.body, ...rootElement };
 
   if (isDefined(options.features)) {
-    Object.entries(options.features).forEach(([feature, value]) => {
+    Object.entries(options.features as Features).forEach(([feature, value]) => {
       features.set(feature as keyof Features, value);
     });
   }
 
-  const p: Promise<S & Base<T>> = new Promise((resolve) => {
-    const callback = () => {
-      setTimeout(() => {
-        app = (new App(options.root) as S & Base<T>).$mount();
-        resolve(app);
-      }, 0);
-    };
+  function init() {
+    app = (new App(options.root) as S & Base<T>).$mount();
+    return app;
+  }
+
+  let p: Promise<S & Base<T>>;
 
-    if (features.get('asyncChildren') || document.readyState === 'complete') {
-      callback();
-    } else {
-      document.addEventListener('readystatechange', () => {
-        if (document.readyState === 'complete') {
-          callback();
-        }
-      });
-    }
-  });
+  if (features.get('asyncChildren')) {
+    p = Promise.resolve(init());
+  } else {
+    p = new Promise<S & Base<T>>((resolve) => {
+      if (document.readyState === 'complete') {
+        resolve(init());
+      } else {
+        document.addEventListener('readystatechange', () => {
+          if (document.readyState === 'complete') {
+            resolve(init());
+          }
+        });
+      }
+    });
+  }
 
-  return function useApp() {
-    return p;
-  };
+  return () => p;
 }

packages/js-toolkit/helpers/getInstanceFromElement.ts

@@ -7,7 +7,7 @@ export default function getInstanceFromElement<T extends BaseConstructor>(
   element: BaseEl,
   Constructor: T,
 ): InstanceType<T> | null {
-  if (!element.__base__ || !element.__base__.has(Constructor)) {
+  if (!element || !element.__base__ || !element.__base__.has(Constructor)) {
     return null;
   }
 

packages/js-toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"

packages/js-toolkit/services/drag.ts

@@ -66,7 +66,8 @@ const MODES: Record<Uppercase<DragLifecycle>, DragLifecycle> = {
 };
 
 let count = 0;
-const events = ['pointerdown', 'pointerup', 'touchend'];
+const targetEvents = ['pointerdown'];
+const windowEvents = ['pointerup', 'touchend'];
 const passiveEventOptions = { passive: true };
 
 /**
@@ -276,16 +277,22 @@ function createDragService(
       },
     } as DragServiceProps,
     init() {
-      events.forEach((event) => {
+      targetEvents.forEach((event) => {
         target.addEventListener(event, handleEvent, passiveEventOptions);
       });
+      windowEvents.forEach((event) => {
+        window.addEventListener(event, handleEvent, passiveEventOptions);
+      });
       target.addEventListener('dragstart', handleEvent, { capture: true });
       target.addEventListener('click', handleEvent, { capture: true });
     },
     kill() {
-      events.forEach((event) => {
+      targetEvents.forEach((event) => {
         target.removeEventListener(event, handleEvent);
       });
+      windowEvents.forEach((event) => {
+        window.removeEventListener(event, handleEvent);
+      });
       target.removeEventListener('dragstart', handleEvent);
       target.removeEventListener('click', handleEvent);
     },

packages/tests/helpers/createApp.spec.js

@@ -6,18 +6,27 @@ import { features } from '@studiometa/js-toolkit/Base/features.js';
 
 describe('The `createApp` function', () => {
   const fn = jest.fn();
+  const ctorFn = jest.fn();
 
   class App extends Base {
     static config = {
       name: 'App',
     };
 
+    constructor(...args) {
+      super(...args);
+      ctorFn();
+    }
+
     mounted() {
       fn();
     }
   }
 
-  beforeEach(() => fn.mockRestore());
+  beforeEach(() => {
+    fn.mockRestore();
+    ctorFn.mockRestore();
+  });
 
   it('should instantiate the app directly if the page is alreay loaded', async () => {
     const useApp = createApp(App, document.createElement('div'));
@@ -68,4 +77,15 @@ describe('The `createApp` function', () => {
     });
     expect(features.get('asyncChildren')).toBe(true);
   });
+
+  it('should instantiate directly when the asynChildren feature is enabled', async () => {
+    const useApp = createApp(App, {
+      features: {
+        asyncChildren: true,
+      },
+    });
+    expect(ctorFn).toHaveBeenCalledTimes(1);
+    expect(useApp()).toBeInstanceOf(Promise);
+    expect(await useApp()).toBeInstanceOf(App);
+  });
 });

packages/tests/helpers/getInstanceFromElement.spec.js

@@ -7,6 +7,10 @@ describe('The `getInstanceFromElement` helper function', () => {
     };
   }
 
+  it('should return `null` if element not given', () => {
+    expect(getInstanceFromElement(null, Foo)).toBeNull();
+  });
+
   it('should return `null` when instance not found', () => {
     const div = document.createElement('div');
     expect(getInstanceFromElement(div, Foo)).toBeNull();

packages/tests/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@studiometa/js-toolkit-tests",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "private": true,
   "type": "module",
   "scripts": {
     "test": "NODE_NO_WARNINGS=1 NODE_OPTIONS=--experimental-vm-modules jest"
   },
   "dependencies": {
-    "@jest/globals": "^29.3.1",
-    "babel-jest": "^29.3.1",
+    "@jest/globals": "^29.4.1",
+    "babel-jest": "^29.4.1",
     "esbuild-jest": "^0.5.0",
     "htl": "^0.3.1",
     "html-loader-jest": "^0.2.1",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
+    "jest": "^29.4.1",
+    "jest-environment-jsdom": "^29.4.1",
     "ts-jest-resolver": "^2.0.0"
   },
   "devDependencies": {
-    "@jest/types": "^29.3.1",
+    "@jest/types": "^29.4.1",
     "vue": "2.6"
   }
 }

packages/tests/services/drag.spec.js

@@ -43,7 +43,7 @@ describe('The drag service', () => {
     // Test double start prevention
     div.dispatchEvent(createEvent('pointerdown', { x: 0, y: 0, button: 0 }));
     expect(props().mode).toBe('drag');
-    div.dispatchEvent(createEvent('pointerup'));
+    window.dispatchEvent(createEvent('pointerup'));
     expect(props().mode).toBe('drop');
   });