feat(component): new $ref reactive variables

src/core/modules/component/component-class.js

@@ -118,6 +118,24 @@ class Component {
     this.__onceEventHandlers.push({ eventName, handler });
   }
 
+  getComponentRef() {
+    const self = this;
+    return (initialValue) => {
+      let value = initialValue;
+      const obj = {};
+      Object.defineProperty(obj, 'value', {
+        get() {
+          return value;
+        },
+        set(v) {
+          value = v;
+          self.update();
+        },
+      });
+      return obj;
+    };
+  }
+
   getComponentStore() {
     const { state, _gettersPlain, dispatch } = this.f7.store;
     const $store = {
@@ -153,6 +171,7 @@ class Component {
       $update: this.update.bind(this),
       $emit: this.emit.bind(this),
       $store: this.getComponentStore(),
+      $ref: this.getComponentRef(),
       $el: {},
     };
     Object.defineProperty(ctx.$el, 'value', {

src/core/modules/component/component.d.ts

@@ -32,6 +32,8 @@ export interface ComponentContext {
   $el: {
     value: Dom7Array;
   };
+  /** Create reactive variable */
+  $ref: (initialValue: any) => { value: any };
 
   /** Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.  */
   $tick: (callback?: () => void) => Promise<any>;

src/core/modules/component/parse-component.js

@@ -60,6 +60,7 @@ function parseComponent(componentString) {
           var $theme = $$ctx.$theme;
           var $update = $$ctx.$update;
           var $store = $$ctx.$store;
+          var $ref = $$ctx.$ref;
 
           return $h\`${template}\`
         }