Merge branch 'release/2.2.2'

Author: titouanmathis

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-workspace",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "private": true,
   "workspaces": [
     "packages/*"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-demo",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "private": true,
   "type": "commonjs",
   "scripts": {

packages/demo/package.json

@@ -70,3 +70,40 @@ export default class MyVueComponent extends withVue2(Base, Vue) {
   };
 }
 ```
+
+### Advanced usage
+Use component `$options` as a props using `vueConfig`.
+
+```html
+<div data-component="MyVueComponent">
+  <div data-ref="vue"></div>
+</div>
+```
+
+```js
+import { withVue2, Base } from '@studiometa/js-toolkit';
+import Vue from 'vue';
+import App from './App.vue';
+
+export default class Component extends withVue2(Base, Vue) {
+  static config = {
+    options: {
+      property: {
+        type: String,
+        default: '',
+      },
+    },
+  };
+
+  get vueConfig() {
+    return {
+      render: (h) =>
+        h(App, {
+          props: {
+            property: this.$options.property,
+          },
+        }),
+    };
+  }
+}
+```

packages/docs/api/decorators/withVue2.md

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

packages/docs/package.json

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

packages/js-toolkit/package.json

@@ -7,7 +7,6 @@ import { domScheduler as scheduler } from '../scheduler.js';
 
 let id = 0;
 const running = new WeakMap();
-const raf = useRaf();
 const noop = () => {};
 const PROGRESS_PRECISION = 0.0001;
 
@@ -146,12 +145,6 @@ function render(element, from, to, progress) {
 /**
  * @typedef {import('./transform.js').TransformProps} TransformProps
  * @typedef {[number, number, number, number]} BezierCurve
- * @typedef {{
- *   duration?: number;
- *   easing?: import('../math/createEases.js').EasingFunction|BezierCurve;
- *   onProgress?: (progress: number, easedProgress: number) => void;
- *   onFinish?: (progress: number, easedProgress: number) => void;
- *  }} Options
  * @typedef {TransformProps & {
  *   opacity?: number;
  *   transformOrigin?: string;
@@ -175,10 +168,17 @@ function render(element, from, to, progress) {
  * Animate an element.
  * @param   {HTMLElement} element
  * @param   {Keyframe[]} keyframes
- * @param   {Options} options
+ * @param   {{
+ *   duration?: number;
+ *   easing?: import('../math/createEases.js').EasingFunction|BezierCurve;
+ *   onProgress?: (progress: number, easedProgress: number) => void;
+ *   onFinish?: (progress: number, easedProgress: number) => void;
+ *  }} [options]
  * @returns {Animate}
  */
 export function animate(element, keyframes, options = {}) {
+  const raf = useRaf();
+
   let progressValue = 0;
   let easedProgress = 0;
 

packages/js-toolkit/utils/css/animate.js

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit-tests",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "private": true,
   "type": "module",
   "scripts": {