refactor: rename @init to @let (#16)

eugenioenko · web-flow · commit 06a20c2b444d · 2024-04-12T11:47:36.000-07:00
diff --git a/dist/kasper.js b/dist/kasper.js
diff --git a/dist/kasper.min.js b/dist/kasper.min.js
diff --git a/live/demo.html b/live/demo.html
@@ -43,14 +43,14 @@
         </div>
         <div class="flex-grow bg-gray-700 p-6">
           <div @if="post.value && user.value">
-            <kvoid @init="u = user.value">
+            <kvoid @let="u = user.value">
               <div class="text-lg">Author</div>
               <div class="flex flex-col pb-4">
                 <div class="text-lg font-bold">{{u.name}}</div>
                 <div class="text-sm text-gray-400">{{u.email}}</div>
               </div>
             </kvoid>
-            <kvoid @init="p = post.value">
+            <kvoid @let="p = post.value">
               <div class="text-2xl font-bold">{{p.title}}</div>
               <div class="text-sm text-gray-400">{{p.body}}</div>
             </kvoid>
diff --git a/live/index.html b/live/index.html
@@ -57,7 +57,7 @@ <h4>Hobbies ({{person.hobbies.length}}):</h4>
 </div>
 
 <!-- evaluating code on element creation -->
-<div @init="student = {name: person.name, degree: 'Masters'}; console.log(student.name)">
+<div @let="student = {name: person.name, degree: 'Masters'}; console.log(student.name)">
     {{student.name}}
 </div>
 
@@ -67,15 +67,15 @@ <h4>Hobbies ({{person.hobbies.length}}):</h4>
 </span>
 
 <!-- while loop -->
-<span @init="index = 0">
+<span @let="index = 0">
    <span @while="index < 3">
      {{index = index + 1}},
    </span>
 </span>
 
 <!-- void elements -->
 <div>
-  <kvoid @init="index = 0">
+  <kvoid @let="index = 0">
     <kvoid @while="index < 3">
       {{index = index + 1}}
     </kvoid>
diff --git a/readme.md b/readme.md
@@ -22,6 +22,35 @@ The template language should be cohesive and clean, ideally with no compromises
 - html parser
 - javascript like syntax parser and interpreter
 - template renderer
+- re-render on state update
+
+## Getting started
+
+To use kasper you will need to:
+
+- Include the `kasper.js`.
+- Add a `<template>` element
+- Add a class that extends from `KasperApp`
+- Render the app by calling `Kasper`
+
+```
+<html>
+  <head>
+    <script src="kasper.min.js"></script>
+  </head>
+  <body>
+    <template>
+      <div>{{myAppName}}</div>
+    </template>
+    <script>
+      class MyApp extends KasperApp {
+        myAppName = "MyAppName"
+      }
+      Kasper(MyApp);
+    </script>
+  </body>
+</html>
+```
 
 ## Conditional expression
 
@@ -41,12 +70,12 @@ The template language should be cohesive and clean, ideally with no compromises
 </ul>
 ```
 
-## Init expression
+## Let expression
 
 Evaluated during element creation
 
 ```
-<div @init="student = {name: person.name, degree: 'Masters'}; console.log(student.name)">
+<div @let="student = {name: person.name, degree: 'Masters'}; console.log(student.name)">
     {{student.name}}
 </div>
 ```
diff --git a/src/transpiler.ts b/src/transpiler.ts
@@ -159,7 +159,7 @@ export class Transpiler implements KNode.KNodeVisitor<void> {
     this.interpreter.scope = originalScope;
   }
 
-  private doInit(init: KNode.Attribute, node: KNode.Element, parent: Node) {
+  private doLet(init: KNode.Attribute, node: KNode.Element, parent: Node) {
     const originalScope = this.interpreter.scope;
     this.interpreter.scope = new Scope(originalScope);
     this.execute(init.value);
@@ -210,9 +210,9 @@ export class Transpiler implements KNode.KNodeVisitor<void> {
           continue;
         }
 
-        const $init = this.findAttr(node as KNode.Element, ["@init"]);
-        if ($init) {
-          this.doInit($init, node as KNode.Element, parent);
+        const $let = this.findAttr(node as KNode.Element, ["@let"]);
+        if ($let) {
+          this.doLet($let, node as KNode.Element, parent);
           continue;
         }
       }

Original file line number	Diff line number	Diff line change
`@@ -159,7 +159,7 @@ export class Transpiler implements KNode.KNodeVisitor<void> {`
`159`	`159`	`this.interpreter.scope = originalScope;`
`160`	`160`	`}`
`161`	`161`
`162`		`- private doInit(init: KNode.Attribute, node: KNode.Element, parent: Node) {`
	`162`	`+ private doLet(init: KNode.Attribute, node: KNode.Element, parent: Node) {`
`163`	`163`	`const originalScope = this.interpreter.scope;`
`164`	`164`	`this.interpreter.scope = new Scope(originalScope);`
`165`	`165`	`this.execute(init.value);`
`@@ -210,9 +210,9 @@ export class Transpiler implements KNode.KNodeVisitor<void> {`
`210`	`210`	`continue;`
`211`	`211`	`}`
`212`	`212`
`213`		`- const $init = this.findAttr(node as KNode.Element, ["@init"]);`
`214`		`- if ($init) {`
`215`		`- this.doInit($init, node as KNode.Element, parent);`
	`213`	`+ const $let = this.findAttr(node as KNode.Element, ["@let"]);`
	`214`	`+ if ($let) {`
	`215`	`+ this.doLet($let, node as KNode.Element, parent);`
`216`	`216`	`continue;`
`217`	`217`	`}`
`218`	`218`	`}`