feat(component): new $ref reactive variables

nolimits4web · nolimits4web · commit 108b63b5bcd4 · 2021-09-30T10:16:25.000+03:00
diff --git a/src/core/modules/component/component-class.js b/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', {
diff --git a/src/core/modules/component/component.d.ts b/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>;
diff --git a/src/core/modules/component/parse-component.js b/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}\`
         }

Original file line number	Diff line number	Diff line change
`@@ -60,6 +60,7 @@ function parseComponent(componentString) {`
`60`	`60`	`var $theme = $$ctx.$theme;`
`61`	`61`	`var $update = $$ctx.$update;`
`62`	`62`	`var $store = $$ctx.$store;`
	`63`	`+ var $ref = $$ctx.$ref;`
`63`	`64`
`64`	`65`	return $h\`${template}\`
`65`	`66`	`}`