Merge branch 'release/2.0.0-beta.6'

Author: titouanmathis

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-workspace",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.6",
   "private": true,
   "workspaces": [
     "packages/*"
@@ -25,25 +25,25 @@
     "build:bundle:umd": "NODE_TARGET=bundle microbundle -i packages/js-toolkit/index.js -o dist/index.umd.js -f umd --no-sourcemap --name Base --no-pkg-main --external none"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.0",
-    "@babel/plugin-transform-runtime": "^7.16.4",
-    "@babel/preset-env": "^7.16.4",
+    "@babel/cli": "^7.16.7",
+    "@babel/core": "^7.16.5",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
     "@studiometa/browserslist-config": "^1.0.1",
     "@studiometa/eslint-config": "^2.1.3",
-    "@studiometa/prettier-config": "^2.0.1",
+    "@studiometa/prettier-config": "^2.1.1",
     "@studiometa/stylelint-config": "^2.0.0",
     "@types/estree": "^0.0.50",
-    "@types/jest": "^27.0.3",
-    "@types/node": "^16.11.11",
+    "@types/jest": "^27.4.0",
+    "@types/node": "^16.11.13",
     "@typescript-eslint/eslint-plugin": "^4.29.3",
     "@typescript-eslint/parser": "^4.29.3",
     "babel-plugin-add-import-extension": "^1.6.0",
     "eslint": "^7.32.0",
     "eslint-plugin-jest": "^24.4.0",
     "microbundle": "^0.13.3",
-    "prettier": "^2.5.0",
-    "typescript": "^4.5.2"
+    "prettier": "^2.5.1",
+    "typescript": "^4.5.4"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-demo",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.6",
   "private": true,
   "type": "commonjs",
   "scripts": {
@@ -16,6 +16,7 @@
     "eslint": "^7.32.0",
     "postcss": "^8.3.6",
     "prettier": "^2.3.2",
+    "stylefire": "^7.0.3",
     "stylelint": "^13.13.1",
     "tailwindcss": "^2.2.9",
     "vue": "^2.6.14"

packages/demo/package.json

@@ -1,5 +1,6 @@
 import { Base, withScrolledInView } from '@studiometa/js-toolkit';
 import { map } from '@studiometa/js-toolkit/utils';
+import stylefire from 'stylefire';
 
 export default class Parallax extends withScrolledInView(Base) {
   static config = {
@@ -10,9 +11,29 @@ export default class Parallax extends withScrolledInView(Base) {
     },
   };
 
+  /**
+   * @type {import('stylefire').Styler}
+   */
+  styler;
+
+  mounted() {
+    this.styler = stylefire(this.$refs.target);
+  }
+
+  get freezedOptions() {
+    const options = this.$options;
+    Object.defineProperty(this, 'freezeOptions', {
+      value: Object.freeze(options),
+      configurable: true,
+    });
+
+    return options;
+  }
+
   scrolledInView({ progress }) {
-    const y = map(progress.y, 0, 1, 100, -100) * this.$options.speed;
-    const scale = map(progress.x, 0, 1, 0.5, 2);
-    this.$refs.target.style.transform = `translateY(${y}px) scale(${scale})`;
+    this.styler.set({
+      y: map(progress.y, 0, 1, 100, -100) * this.freezedOptions.speed,
+      scale: map(progress.x, 0, 1, 0.5, 2),
+    });
   }
 }

packages/demo/src/js/components/Parallax.js

@@ -1,7 +1,26 @@
-import { Base } from '@studiometa/js-toolkit';
-import { matrix } from '@studiometa/js-toolkit/utils/css';
-import { damp, clamp } from '@studiometa/js-toolkit/utils/math';
-import { withMountWhenInView } from '@studiometa/js-toolkit/decorators';
+import { Base, withMountWhenInView, useScroll, useRaf } from '@studiometa/js-toolkit';
+import { damp, clamp } from '@studiometa/js-toolkit/utils';
+import stylefire from 'stylefire';
+
+const scroll = useScroll();
+const raf = useRaf();
+
+let skewY = 0;
+let dampedSkewY = 0;
+
+scroll.add('Skew.js', (props) => {
+  skewY = clamp(props.delta.y * -0.005, -0.1, 0.1) * 40;
+
+  if (!raf.has('Skew.js')) {
+    raf.add('Skew.js', () => {
+      dampedSkewY = damp(skewY, dampedSkewY, 0.1);
+
+      if (dampedSkewY === skewY) {
+        raf.remove('Skew.js');
+      }
+    });
+  }
+});
 
 export default class Skew extends withMountWhenInView(Base) {
   static config = {
@@ -12,19 +31,29 @@ export default class Skew extends withMountWhenInView(Base) {
 
   dampedSkewY = 0;
 
-  scrolled({ delta, changed }) {
+  /**
+   * @type {import('stylefire').Styler}
+   */
+  styler;
+
+  mounted() {
+    this.styler = stylefire(this.$el);
+  }
+
+  scrolled({ changed }) {
     if (changed.y && !this.$services.has('ticked')) {
       this.$services.enable('ticked');
     }
-
-    this.skewY = clamp(delta.y * -0.005, -0.1, 0.1);
   }
 
   ticked() {
-    this.dampedSkewY = damp(this.skewY, this.dampedSkewY, 0.1);
-    this.$el.style.transform = matrix({ skewY: this.dampedSkewY });
+    if (!this.styler) {
+      return;
+    }
+
+    this.styler.set('skewY', dampedSkewY);
 
-    if (Math.abs(this.dampedSkewY - this.skewY) < 0.01) {
+    if (dampedSkewY === skewY) {
       this.$services.disable('ticked');
     }
   }

packages/demo/src/js/components/Skew.js

@@ -1,8 +1,12 @@
-module.exports = {
+const { defineConfig } = require('vitepress');
+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! 🚀',
   themeConfig: {
+    version: pkg.version,
     repo: 'studiometa/js-toolkit',
     docsDir: 'packages/docs',
     lastUpdated: 'Last updated',
@@ -29,7 +33,7 @@ module.exports = {
       '/utils/': getUtilsSidebar(),
     },
   },
-};
+});
 
 function getGuideSidebar() {
   return [
@@ -58,7 +62,12 @@ function getGuideSidebar() {
     },
     {
       text: 'Recipes',
-      children: [{ text: 'todo' }],
+      children: [
+        {
+          text: 'Teleport refs',
+          link: '/guide/recipes/teleport-refs.html',
+        },
+      ],
     },
     {
       text: 'Migration guide',

packages/docs/.vitepress/config.js

@@ -1,16 +1,5 @@
-<script>
-  import { h } from 'vue';
-
-  const Badge = (props, { slots }) => {
-    return h('span', {
-      class: ['badge', props.type],
-      style: {
-        verticalAlign: props.vertical
-      }
-    }, props.text || slots().default)
-  }
-
-  Badge.props = {
+<script setup>
+  const { type, text, vertical } = defineProps({
     type: {
       type: String,
       default: 'tip'
@@ -20,23 +9,32 @@
       type: String,
       default: 'top'
     }
-  };
-
-  export default  Badge;
+  });
 </script>
 
+<template>
+  <span :class="type" class="badge" :style="{ verticalAlign: vertical }">
+    <slot>{{ text }}</slot>
+  </span>
+</template>
+
 <style scoped>
   .badge {
     display: inline-block;
     font-size: 14px;
+    font-weight: bold;
     height: 18px;
     line-height: 18px;
     border-radius: 3px;
     padding: 0 6px;
     color: #fff;
     background-color: #42b983;
   }
-  .badge.tip,
+
+  .badge.tip {
+    background-color: #3f9ee3;
+  }
+
   .badge.green {
     background-color: #42b983;
   }

packages/docs/.vitepress/theme/components/Badge.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+  import { withBase, useData } from 'vitepress';
+  import Badge from './Badge.vue';
+  const { site, theme, localePath } = useData();
+</script>
+
+<template>
+  <div class="flex">
+    <a class="nav-bar-title" :href="localePath" :aria-label="`${site.title}, back to home`">
+      <img v-if="theme.logo" class="logo" :src="withBase(theme.logo)" alt="Logo" />
+      {{ site.title }}
+    </a>
+    <Badge class="nav-bar-badge">v{{ theme.version }}</Badge>
+  </div>
+</template>
+
+<style scoped>
+  .flex {
+    display: flex;
+    align-items: center;
+  }
+
+  .nav-bar-title {
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: var(--c-text);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .nav-bar-title:hover {
+    text-decoration: none;
+  }
+
+  .logo {
+    margin-right: 0.75rem;
+    height: 1.3rem;
+    vertical-align: bottom;
+  }
+
+  .nav-bar-badge {
+    margin-left: 10px;
+  }
+</style>

packages/docs/.vitepress/theme/components/NavBarTitle.vue

@@ -131,6 +131,34 @@ class Component extends Base {
 }
 ```
 
+## `config.emits`
+
+- Type: `string[]`
+- Default: `undefined`
+
+Define the events emitted by the component by specifying their name.
+
+```js
+class Component extends Base {
+  static config = {
+    name: 'Component',
+    emits: ['open', 'close'],
+  };
+
+  open() {
+    this.$emit('open');
+  }
+
+  close() {
+    this.$emit('close');
+  }
+
+  toggle() {
+    this.$emit('toggle'); // will not be emitted and will trigger a warning
+  }
+}
+```
+
 ## `config.log`
 
 - Type: `Boolean`