Merge branch 'release/2.0.0-beta.15'

titouanmathis · titouanmathis · commit efcb295635cf · 2022-01-24T17:06:39.000+01:00
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.0.0-beta.14",
+  "version": "2.0.0-beta.15",
   "private": true,
   "workspaces": [
     "packages/*"
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-demo",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.15",
   "private": true,
   "type": "commonjs",
   "scripts": {
diff --git a/packages/docs/.vitepress/config.js b/packages/docs/.vitepress/config.js
@@ -3,8 +3,9 @@ const pkg = require('../package.json');
 
 module.exports = defineConfig({
   lang: 'en-US',
-  title: `🔧 JS Toolkit`,
+  title: 'JS Toolkit',
   description: 'A set of useful little bits of JavaScript to boost your project! 🚀',
+  head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/logo.png' }]],
   themeConfig: {
     version: pkg.version,
     repo: 'studiometa/js-toolkit',
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-docs",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.15",
   "private": true,
   "scripts": {
     "dev": "vitepress dev .",
diff --git a/packages/js-toolkit/decorators/withBreakpointObserver.js b/packages/js-toolkit/decorators/withBreakpointObserver.js
@@ -97,10 +97,10 @@ export default function withBreakpointObserver(BaseClass) {
   // @ts-ignore
   return class extends BaseClass {
     static config = {
-      ...(BaseClass.config || {}),
-      name: `${BaseClass?.config?.name ?? ''}WithBreakpointObserver`,
+      ...BaseClass.config,
+      name: `${BaseClass.config.name}WithBreakpointObserver`,
       options: {
-        ...(BaseClass?.config?.options || {}),
+        ...(BaseClass.config?.options || {}),
         activeBreakpoints: String,
         inactiveBreakpoints: String,
       },
diff --git a/packages/js-toolkit/decorators/withIntersectionObserver.js b/packages/js-toolkit/decorators/withIntersectionObserver.js
@@ -39,10 +39,10 @@ export default function withIntersectionObserver(
   // @ts-ignore
   return class extends BaseClass {
     static config = {
-      ...(BaseClass.config || {}),
-      name: `${BaseClass?.config?.name ?? ''}WithIntersectionObserver`,
+      ...BaseClass.config,
+      name: `${BaseClass.config.name}WithIntersectionObserver`,
       options: {
-        ...(BaseClass?.config?.options || {}),
+        ...(BaseClass.config?.options || {}),
         intersectionObserver: Object,
       },
       emits: ['intersected'],
@@ -52,21 +52,20 @@ export default function withIntersectionObserver(
      * Create an observer when the class in instantiated.
      *
      * @this {Base & WithIntersectionObserverInterface}
-     * @param  {HTMLElement} element The component's root element.
+     * @param {HTMLElement} element The component's root element.
      */
     constructor(element) {
       super(element);
 
-      if (!this.intersected || typeof this.intersected !== 'function') {
-        throw new Error('[withIntersectionObserver] The `intersected` method must be defined.');
-      }
-
       this.$observer = new IntersectionObserver(
         (entries) => {
           // @ts-ignore
           this.__callMethod('intersected', entries);
         },
-        { ...defaultOptions, ...(this.$options.intersectionObserver || {}) }
+        {
+          ...defaultOptions,
+          ...this.$options.intersectionObserver,
+        }
       );
 
       this.$on('mounted', () => {
diff --git a/packages/js-toolkit/decorators/withMountWhenInView.js b/packages/js-toolkit/decorators/withMountWhenInView.js
@@ -31,25 +31,27 @@ export default function withMountWhenInView(BaseClass, defaultOptions = { thresh
      * @type {Object}
      */
     static config = {
-      ...(BaseClass.config || {}),
-      name: `${BaseClass?.config?.name ?? ''}WithMountWhenInView`,
+      ...BaseClass.config,
+      name: `${BaseClass.config.name}WithMountWhenInView`,
       options: {
-        ...(BaseClass?.config?.options || {}),
+        ...(BaseClass.config?.options || {}),
         intersectionObserver: Object,
       },
     };
 
     /**
      * Is the component visible?
+     * @private
      * @type {Boolean}
      */
-    #isVisible = false;
+    __isVisible = false;
 
     /**
      * The component's observer.
+     * @private
      * @type {IntersectionObserver}
      */
-    #observer;
+    __observer;
 
     /**
      * Create an observer when the class in instantiated.
@@ -59,11 +61,11 @@ export default function withMountWhenInView(BaseClass, defaultOptions = { thresh
     constructor(element) {
       super(element);
 
-      this.#observer = new IntersectionObserver(
+      this.__observer = new IntersectionObserver(
         (entries) => {
           const isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);
-          if (this.#isVisible !== isVisible) {
-            this.#isVisible = isVisible;
+          if (this.__isVisible !== isVisible) {
+            this.__isVisible = isVisible;
 
             if (isVisible) {
               this.$mount();
@@ -75,10 +77,10 @@ export default function withMountWhenInView(BaseClass, defaultOptions = { thresh
         { ...defaultOptions, ...this.$options.intersectionObserver }
       );
 
-      this.#observer.observe(this.$el);
+      this.__observer.observe(this.$el);
 
       this.$on('terminated', () => {
-        this.#observer.disconnect();
+        this.__observer.disconnect();
       });
 
       return this;
@@ -90,7 +92,7 @@ export default function withMountWhenInView(BaseClass, defaultOptions = { thresh
      * @return {this}
      */
     $mount() {
-      if (this.#isVisible) {
+      if (this.__isVisible) {
         super.$mount();
       }
 
diff --git a/packages/js-toolkit/decorators/withVue2.js b/packages/js-toolkit/decorators/withVue2.js
@@ -20,9 +20,9 @@ export default (BaseClass, Vue) => {
   // @ts-ignore
   return class WithVue2 extends BaseClass {
     static config = {
-      ...(BaseClass.config || {}),
-      name: `${BaseClass?.config?.name ?? ''}WithVue`,
-      refs: [...(BaseClass?.config?.refs ?? []), 'vue'],
+      ...BaseClass.config,
+      name: `${BaseClass.config.name}WithVue`,
+      refs: [...(BaseClass.config?.refs ?? []), 'vue'],
     };
 
     /**
diff --git a/packages/js-toolkit/package.json b/packages/js-toolkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.15",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"
@@ -39,7 +39,6 @@
     "toolkit"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.15.4",
     "deepmerge": "^4.2.2"
   }
 }
diff --git a/packages/tests/decorators/withIntersectionObserver.spec.js b/packages/tests/decorators/withIntersectionObserver.spec.js
@@ -38,16 +38,27 @@ describe('The withIntersectionObserver decorator', () => {
     expect(observer.observe).toHaveBeenCalledTimes(2);
   });
 
-  it('should not instantiate without `intersected` method', () => {
-    class Foo extends withIntersectionObserver(Base) {
+  it('should be able to be used without the `intersected` method', () => {
+    const fn = jest.fn();
+    class Foo extends Base {
       static config = {
         name: 'Foo',
+        components: {
+          Detector: withIntersectionObserver(Base),
+        },
       };
+
+      onDetectorIntersected(entries) {
+        fn(entries);
+      }
     }
+
     const div = document.createElement('div');
-    expect(() => {
-      // eslint-disable-next-line no-unused-vars
-      const foo = new Foo(div);
-    }).toThrow(/withIntersectionObserver/);
+    div.innerHTML = '<div data-component="Detector"></div>';
+    new Foo(div).$mount();
+    mockIsIntersecting(div.firstElementChild, true);
+    expect(fn).toHaveBeenCalledTimes(1);
+    mockIsIntersecting(div.firstElementChild, true);
+    expect(fn).toHaveBeenCalledTimes(2);
   });
 });
diff --git a/packages/tests/package.json b/packages/tests/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-tests",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.15",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/scripts/build.js b/scripts/build.js
@@ -12,6 +12,7 @@ const defaultOptions = {
   entryPoints,
   write: true,
   outdir,
+  target: 'es2019',
 };
 
 /**

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@studiometa/js-toolkit-workspace",`
`3`		`- "version": "2.0.0-beta.14",`
	`3`	`+ "version": "2.0.0-beta.15",`
`4`	`4`	`"private": true,`
`5`	`5`	`"workspaces": [`
`6`	`6`	`"packages/*"`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@studiometa/js-toolkit-demo",`
`3`		`- "version": "2.0.0-beta.14",`
	`3`	`+ "version": "2.0.0-beta.15",`
`4`	`4`	`"private": true,`
`5`	`5`	`"type": "commonjs",`
`6`	`6`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@studiometa/js-toolkit-docs",`
`3`		`- "version": "2.0.0-beta.14",`
	`3`	`+ "version": "2.0.0-beta.15",`
`4`	`4`	`"private": true,`
`5`	`5`	`"scripts": {`
`6`	`6`	`"dev": "vitepress dev .",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@studiometa/js-toolkit",`
`3`		`- "version": "2.0.0-beta.14",`
	`3`	`+ "version": "2.0.0-beta.15",`
`4`	`4`	`"description": "A set of useful little bits of JavaScript to boost your project! 🚀",`
`5`	`5`	`"publishConfig": {`
`6`	`6`	`"access": "public"`
`@@ -39,7 +39,6 @@`
`39`	`39`	`"toolkit"`
`40`	`40`	`],`
`41`	`41`	`"dependencies": {`
`42`		`- "@babel/runtime": "^7.15.4",`
`43`	`42`	`"deepmerge": "^4.2.2"`
`44`	`43`	`}`
`45`	`44`	`}`