feat: enable two way prop bindings (#111)

.changeset/seven-papayas-jump.md

@@ -0,0 +1,7 @@
+---
+'@rekajs/parser': patch
+'@rekajs/types': patch
+'@rekajs/core': patch
+---
+
+Enable component prop bindings

packages/core/src/component.ts

@@ -20,6 +20,7 @@ export class ComponentViewEvaluator {
 
   private declare rekaComponentRootComputation: DisposableComputation<t.View> | null;
   private declare rekaComponentPropsComputation: IComputedValue<void> | null;
+  private declare rekaComponentPropsBindingComputation: IComputedValue<void> | null;
   private declare rekaComponentStateComputation: IComputedValue<void> | null;
 
   private readonly evaluator: Evaluator;
@@ -116,27 +117,29 @@ export class ComponentViewEvaluator {
                   });
 
                   component.props.forEach((prop) => {
-                    const getPropValue = () => {
-                      let propValue: any;
-
-                      if (this.template.props[prop.name]) {
-                        propValue = this.evaluator.computeExpr(
-                          this.template.props[prop.name],
-                          this.ctx.env
-                        );
-                      }
+                    let propValue: any;
+
+                    const tplPropValue = this.template.props[prop.name];
+
+                    if (tplPropValue) {
+                      let expr = tplPropValue;
 
-                      if (!propValue && prop.init) {
-                        propValue = this.evaluator.computeExpr(
-                          prop.init,
-                          this.ctx.env
-                        );
+                      if (t.is(tplPropValue, t.PropBinding)) {
+                        expr = tplPropValue.identifier;
                       }
 
-                      return propValue;
-                    };
+                      propValue = this.evaluator.computeExpr(
+                        expr,
+                        this.ctx.env
+                      );
+                    }
 
-                    let propValue = getPropValue();
+                    if (!propValue && prop.init) {
+                      propValue = this.evaluator.computeExpr(
+                        prop.init,
+                        this.ctx.env
+                      );
+                    }
 
                     const classListBinding =
                       this.ctx.env.getByName(ClassListBindingKey);
@@ -153,7 +156,7 @@ export class ComponentViewEvaluator {
 
                     this.env.set(prop.name, {
                       value: propValue,
-                      readonly: true,
+                      readonly: false,
                     });
                   });
                 },
@@ -163,6 +166,27 @@ export class ComponentViewEvaluator {
               );
             }
 
+            if (!this.rekaComponentPropsBindingComputation) {
+              this.rekaComponentPropsBindingComputation = computed(() => {
+                for (const [prop, value] of Object.entries(
+                  this.template.props
+                )) {
+                  if (!t.is(value, t.PropBinding)) {
+                    continue;
+                  }
+
+                  const currPropValue = this.env.getByName(prop, false, true);
+
+                  this.evaluator.reka.change(() => {
+                    this.ctx.env.reassign(
+                      t.assert(value, t.PropBinding).identifier,
+                      currPropValue
+                    );
+                  });
+                }
+              });
+            }
+
             if (!this.rekaComponentStateComputation) {
               this.rekaComponentStateComputation = computed(() => {
                 component.state.forEach((val) => {
@@ -173,6 +197,7 @@ export class ComponentViewEvaluator {
 
             try {
               this.rekaComponentPropsComputation.get();
+              this.rekaComponentPropsBindingComputation.get();
               this.rekaComponentStateComputation.get();
 
               render = this.evaluator.computeTemplate(component.template, {

packages/core/src/environment.ts

@@ -68,10 +68,7 @@ export class Environment {
       return;
     }
 
-    return env.bindings.set(identifier.name, {
-      ...binding,
-      value,
-    });
+    binding.value = value;
   }
 
   set(name: BindingKey, binding: Binding) {
@@ -87,17 +84,24 @@ export class Environment {
     this.bindings.delete(name);
   }
 
-  getByName(name: BindingKey, external?: boolean) {
+  getByName(
+    name: BindingKey,
+    external?: boolean,
+    getInCurrentEnvironmentOnly?: boolean
+  ) {
     if (external) {
       invariant(typeof name === 'string', 'Invalid external binding key');
 
       return this.reka.externals.get(name);
     }
 
-    const v = this.bindings.get(name)?.value;
+    const valueInCurrentEnvironment = this.bindings.get(name)?.value;
 
-    if (v !== undefined) {
-      return v;
+    if (
+      valueInCurrentEnvironment !== undefined ||
+      getInCurrentEnvironmentOnly
+    ) {
+      return valueInCurrentEnvironment;
     }
 
     if (!this.parent) {

packages/core/src/evaluator.ts

@@ -436,14 +436,35 @@ export class Evaluator {
       // TODO: currently props are re-evaluated any time a change occurs within the template tree
       // We should maybe cache the props evaluation as well
       const props = Object.keys(template.props).reduce((accum, key) => {
-        const value = this.computeExpr(template.props[key], ctx.env);
+        const prop = template.props[key];
+
+        let value: any;
+
+        if (t.is(prop, t.PropBinding)) {
+          value = this.computeExpr(prop.identifier, ctx.env);
+        } else {
+          value = this.computeExpr(prop, ctx.env);
+        }
 
         return {
           ...accum,
           [key]: value,
         };
       }, {});
 
+      const propBindings = Object.keys(template.props).reduce((accum, key) => {
+        const prop = template.props[key];
+
+        if (!t.is(prop, t.PropBinding)) {
+          return accum;
+        }
+
+        return {
+          ...accum,
+          [key]: this.computeExpr(prop, ctx.env),
+        };
+      }, {});
+
       const classListBinding = ctx.env.getByName(ClassListBindingKey);
 
       if (classListBinding && Object.keys(classListBinding).length > 0) {
@@ -456,6 +477,7 @@ export class Evaluator {
         tag: template.tag,
         children,
         props,
+        bindings: propBindings,
         key: createKey(ctx.path),
         template,
         frame: this.frame.id,

packages/core/src/expression.ts

@@ -222,6 +222,16 @@ export const computeExpression = (
     });
   }
 
+  if (expr instanceof t.PropBinding) {
+    return (value: any) => {
+      reka.change(() => {
+        updateLocalValue(expr.identifier, reka, env, ctx, () => {
+          return value;
+        });
+      });
+    };
+  }
+
   if (expr instanceof t.Block) {
     expr.statements.forEach((statement) => {
       computeExpression(statement, reka, env);

packages/core/src/reka.ts

@@ -7,6 +7,7 @@ import {
   makeObservable,
   observable,
   reaction,
+  runInAction,
 } from 'mobx';
 import { computedFn } from 'mobx-utils';
 
@@ -175,14 +176,16 @@ export class Reka {
    * Perform a mutation to the State
    */
   change(mutator: () => void) {
-    this.observer.change(mutator);
+    return runInAction(() => {
+      this.observer.change(mutator);
 
-    // Don't sync yet when we're still setting up (ie: creating the Extensions registry)
-    if (this.init) {
-      return;
-    }
+      // Don't sync yet when we're still setting up (ie: creating the Extensions registry)
+      if (this.init) {
+        return;
+      }
 
-    return this.sync();
+      return this.sync();
+    });
   }
 
   /**

packages/core/src/resolver.ts

@@ -186,6 +186,10 @@ export class Resolver {
       });
     }
 
+    if (expr instanceof t.PropBinding) {
+      this.resolveExpr(expr.identifier, scope);
+    }
+
     if (expr instanceof t.Func) {
       const funcScope = scope.inherit(expr);
 

packages/parser/src/parser.ts

@@ -527,19 +527,29 @@ class _Parser extends Lexer {
     ) {
       if (this.check(TokenType.ELEMENT_PROPERTY)) {
         const propName = this.consume(TokenType.ELEMENT_PROPERTY).value;
-        this.consume(TokenType.EQ);
 
-        let propValue;
-        if (this.check(TokenType.STRING)) {
-          const token = this.consume(TokenType.STRING);
-          propValue = t.literal({
-            value: token.value,
+        // Binding prop
+        if (this.match(TokenType.COLON)) {
+          this.consume(TokenType.EQ);
+
+          props[propName] = t.propBinding({
+            identifier: t.assert(this.parseElementExpr(), t.Identifier),
           });
         } else {
-          propValue = this.parseElementExpr();
-        }
+          this.consume(TokenType.EQ);
+
+          let propValue;
+          if (this.check(TokenType.STRING)) {
+            const token = this.consume(TokenType.STRING);
+            propValue = t.literal({
+              value: token.value,
+            });
+          } else {
+            propValue = this.parseElementExpr();
+          }
 
-        props[propName] = propValue;
+          props[propName] = propValue;
+        }
       } else {
         const directive = this.consume(TokenType.ELEMENT_DIRECTIVE).value;
         this.consume(TokenType.EQ);

packages/parser/src/stringifier.ts

@@ -281,6 +281,9 @@ class _Stringifier {
         });
         this.writer.write(')');
       },
+      PropBinding: (node) => {
+        this.stringify(node.identifier);
+      },
       Template: (node) => {
         const tag =
           node instanceof t.ComponentTemplate
@@ -308,8 +311,13 @@ class _Stringifier {
           props.push(
             this.writer.withTemp(() => {
               propKeys.forEach((prop, i, arr) => {
-                this.writer.write(`${prop}={`);
-                this.stringify(node.props[prop]);
+                const valueExpr = node.props[prop];
+                this.writer.write(`${prop}`);
+                if (t.is(valueExpr, t.PropBinding)) {
+                  this.writer.write(':');
+                }
+                this.writer.write(`={`);
+                this.stringify(valueExpr);
                 this.writer.write('}');
                 if (i !== arr.length - 1) {
                   this.writer.write('\n');

packages/parser/src/tests/parser.test.ts

@@ -212,4 +212,16 @@ describe('Parser', () => {
       },
     });
   });
+  it('should be able to parse directives', () => {
+    const parsed = Parser.parseProgram(`component Test(value) => (
+      <input type="text" value:={value} />
+    )`);
+
+    expect(parsed.components[0].template.props['value']).toMatchObject({
+      identifier: {
+        type: 'Identifier',
+        name: 'value',
+      },
+    });
+  });
 });

packages/parser/src/tests/stringifier.test.ts

@@ -230,4 +230,20 @@ describe('Stringifier', () => {
       )
     ).toEqual(`obj = {\n "foo": 1,\n "bar": 0\n}`);
   });
+  it('should be able to stringifiy prop binding', () => {
+    expect(
+      Stringifier.toString(
+        t.tagTemplate({
+          tag: 'input',
+          props: {
+            value: t.propBinding({
+              identifier: t.identifier({
+                name: 'value',
+              }),
+            }),
+          },
+        })
+      )
+    ).toEqual(`<input value:={value} />`);
+  });
 });

packages/types/src/generated/builder.generated.ts

@@ -60,6 +60,9 @@ export const rekaComponent = (
 export const externalComponent = (
   ...args: ConstructorParameters<typeof t.ExternalComponent>
 ) => new t.ExternalComponent(...args);
+export const propBinding = (
+  ...args: ConstructorParameters<typeof t.PropBinding>
+) => new t.PropBinding(...args);
 export const tagTemplate = (
   ...args: ConstructorParameters<typeof t.TagTemplate>
 ) => new t.TagTemplate(...args);