feat: require component props to be bindable (#113)

.changeset/olive-sloths-search.md

@@ -0,0 +1,7 @@
+---
+'@rekajs/parser': patch
+'@rekajs/types': patch
+'@rekajs/core': patch
+---
+
+Requires component props to explicitly specify that they can be bindable

packages/core/src/component.ts

@@ -83,10 +83,10 @@ export class ComponentViewEvaluator {
         propValue = [propValue, ...classListBinding].filter(Boolean).join(' ');
       }
 
-      accum.push([prop.name, propValue]);
+      accum.push([prop, propValue]);
 
       return accum;
-    }, [] as Array<[string, any]>);
+    }, [] as Array<[t.ComponentProp, any]>);
   }
 
   private computeViewTreeForComponent(component: t.Component) {
@@ -105,9 +105,9 @@ export class ComponentViewEvaluator {
 
       const props = this.computeProps(component).reduce(
         (accum, [prop, value]) => {
-          accum.push([prop, value]);
+          accum.push([prop.name, value]);
 
-          const tplPropValue = this.template.props[prop];
+          const tplPropValue = this.template.props[prop.name];
 
           /**
            * External components should expose a `on{Prop}Change` prop in order to
@@ -118,9 +118,9 @@ export class ComponentViewEvaluator {
            * }
            *
            */
-          if (t.is(tplPropValue, t.PropBinding)) {
+          if (t.is(tplPropValue, t.PropBinding) && prop.bindable) {
             accum.push([
-              `on${capitalize(prop)}Change`,
+              `on${capitalize(prop.name)}Change`,
               (updatedValue: any) => {
                 this.evaluator.reka.change(() => {
                   this.ctx.env.reassign(tplPropValue.identifier, updatedValue);
@@ -181,9 +181,9 @@ export class ComponentViewEvaluator {
                   });
 
                   this.computeProps(component).forEach(([prop, value]) => {
-                    this.env.set(prop, {
+                    this.env.set(prop.name, {
                       value,
-                      readonly: false,
+                      readonly: !prop.bindable,
                     });
                   });
                 },
@@ -195,22 +195,30 @@ 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;
+                component.props.forEach((prop) => {
+                  if (!prop.bindable) {
+                    return;
                   }
 
-                  const currPropValue = this.env.getByName(prop, false, true);
+                  const tplProPValue = this.template.props[prop.name];
+
+                  if (!tplProPValue || !t.is(tplProPValue, t.PropBinding)) {
+                    return;
+                  }
+
+                  const currPropValue = this.env.getByName(
+                    prop.name,
+                    false,
+                    true
+                  );
 
                   this.evaluator.reka.change(() => {
                     this.ctx.env.reassign(
-                      t.assert(value, t.PropBinding).identifier,
+                      t.assert(tplProPValue, t.PropBinding).identifier,
                       currPropValue
                     );
                   });
-                }
+                });
               });
             }
 

packages/parser/src/lexer.ts

@@ -184,7 +184,8 @@ export class Lexer {
 
           return this.tokenize(TokenType.ELEMENT_DIRECTIVE);
         }
-        break;
+
+        return this.tokenize(TokenType.AMPERSAND);
       }
       case '$': {
         return this.tokenize(TokenType.DOLLAR);

packages/parser/src/parser.ts

@@ -416,9 +416,14 @@ class _Parser extends Lexer {
     this.consume(TokenType.LPAREN);
 
     const props: t.ComponentProp[] = [];
+    let bindable = false;
 
     while (!this.match(TokenType.RPAREN)) {
-      const propName = this.consume(TokenType.IDENTIFIER).value;
+      if (this.match(TokenType.AMPERSAND)) {
+        bindable = true;
+      }
+
+      let propName = this.consume(TokenType.IDENTIFIER).value;
 
       const kind = this.parseKind();
 
@@ -463,6 +468,7 @@ class _Parser extends Lexer {
           name: propName,
           init,
           kind,
+          bindable,
         })
       );
 

packages/parser/src/stringifier.ts

@@ -232,6 +232,22 @@ class _Stringifier {
           this.stringify(node.init);
         }
       },
+      ComponentProp: (node) => {
+        if (node.bindable) {
+          this.writer.write(`@`);
+        }
+
+        this.writer.write(node.name);
+
+        if (node.kind) {
+          this.stringifyInput(node.kind);
+        }
+
+        if (node.init) {
+          this.writer.write(`=`);
+          this.stringify(node.init);
+        }
+      },
       RekaComponent: (node) => {
         this.writer.write(`component ${node.name}(`);
 

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

@@ -224,4 +224,15 @@ describe('Parser', () => {
       },
     });
   });
+  it('should be able to parse identifier component props', () => {
+    const parsed = Parser.parseProgram(
+      `component Test(@value: string) => (<text />)`
+    );
+
+    expect(parsed.components[0].props[0]).toMatchObject({
+      type: 'ComponentProp',
+      name: 'value',
+      identifier: true,
+    });
+  });
 });

packages/parser/src/tokens.ts

@@ -14,6 +14,7 @@ export enum TokenType {
   SLASH = '/',
   STAR = '*',
   DOLLAR = '$',
+  AMPERSAND = '@',
 
   NOT = '!',
   NEQ = '!=',

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

@@ -407,9 +407,11 @@ type ComponentPropParameters = {
   name: string;
   kind?: Kind;
   init?: Expression | null;
+  bindable?: boolean;
 };
 
 export class ComponentProp extends Variable {
+  declare bindable: boolean;
   constructor(value: ComponentPropParameters) {
     super('ComponentProp', value);
   }

packages/types/src/types.definition.ts

@@ -211,6 +211,9 @@ Schema.define('MemberExpression', {
 
 Schema.define('ComponentProp', {
   extends: 'Variable',
+  fields: (t) => ({
+    bindable: t.defaultValue(t.boolean, false),
+  }),
 });
 
 Schema.define('Component', {

site/constants/dummy-program.ts

@@ -276,7 +276,7 @@ component PropBinding() {
     </div>
 )
 
-component Input(value = "") => (
+component Input(@value = "") => (
     <div className={"w-full mt-8 p-5 bg-neutral-100"}>
         <text value={"Input prop value: " + value} />
         <input className="w-full mt-6" type="text" value:={value} />