eugenioenko · eugenioenko · Apr 24, 2024 · Apr 13, 2024 · Apr 24, 2024 · Apr 24, 2024
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/debug.html b/live/debug.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Debug KasperJs</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="../dist/kasper.js"></script>
+  </head>
+  <body>
+    <template id="kasper-app">
+      <h1 class="title" data-title="{{attr}}-something-{{appTitle}}">
+        {{appTitle}}
+      </h1>
+      <app-menu>{{menuTitle}}</app-menu>
+      <app-content @:title="hello">
+        <app-template-only></app-template-only>
+      </app-content>
+    </template>
+    <template id="app-menu"> app menu </template>
+    <template id="app-content">
+      <h2>{{args.title}}</h2>
+      <div>{{"app-content"}}</div>
+      <button @on:click="onClick()">click me</button><span>{{counter}}</span>
+    </template>
+    <template id="app-template-only">
+      <div>template only</div>
+      template only no class {{22 + 33}}
+    </template>
+    <script>
+      class AppMain extends Component {
+        appTitle = "Title of the App";
+        attr = "attrib";
+      }
+
+      class AppMenu extends Component {
+        menuTitle = "Title of the Menu";
+      }
+
+      class AppContent extends Component {
+        counter = $state(1);
+        constructor({ args, ref }) {
+          super({ args, ref });
+          console.log(args, ref);
+        }
+        onClick = () => {
+          this.counter.set(this.counter.value + 1);
+        };
+      }
+
+      const registry = {
+        "kasper-app": {
+          selector: "template#kasper-app",
+          component: AppMain,
+        },
+        "app-menu": {
+          selector: "template#app-menu",
+          component: AppMenu,
+        },
+        "app-content": {
+          selector: "template#app-content",
+          component: AppContent,
+        },
+        "app-template-only": {
+          selector: "template#app-template-only",
+        },
+      };
+      kasper.App({
+        registry,
+        root: "body",
+      });
+    </script>
+  </body>
+</html>
diff --git a/live/demo.html b/live/demo.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Blog with KasperJs</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script src="../dist/kasper.min.js"></script>
+    <script src="../dist/kasper.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
       tailwind.config = {
@@ -23,7 +23,8 @@
     </script>
   </head>
   <body>
-    <template>
+    <kasper-app></kasper-app>
+    <template id="kasper-app">
       <div class="w-dvw h-dvh flex text-gray-50">
         <div class="w-96 flex-none bg-gray-900 p-6 h-full overflow-y-scroll">
           <div class="flex flex-col gap-4">
@@ -43,17 +44,17 @@
         </div>
         <div class="flex-grow bg-gray-700 p-6">
           <div @if="post.value && user.value">
-            <kvoid @let="u = user.value">
+            <void @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 @let="p = post.value">
+            </void>
+            <void @let="p = post.value">
               <div class="text-2xl font-bold">{{p.title}}</div>
               <div class="text-sm text-gray-400">{{p.body}}</div>
-            </kvoid>
+            </void>
           </div>
         </div>
       </div>
@@ -80,14 +81,15 @@
         return await response.json();
       }
 
-      class MyTodoApp extends KasperApp {
+      class TodoApp extends Component {
         posts = $state([]);
         user = $state(null);
         post = $state(null);
 
         $onInit = async () => {
           const posts = await fetchPosts();
           this.posts.set(posts);
+          console.log(this.posts);
         };
 
         onOpenPost = async (post) => {
@@ -96,7 +98,8 @@
           this.user.set(user);
         };
       }
-      Kasper(MyTodoApp);
+
+      Kasper(TodoApp);
     </script>
   </body>
 </html>
diff --git a/live/index.html b/live/index.html
@@ -9,7 +9,7 @@
       href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap"
       rel="stylesheet"
     />
-    <script src="../dist/kasper.js"></script>
+    <script src="../dist/kasper.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.9/ace.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
@@ -41,7 +41,7 @@ <h4>{{person.profession}}</h4>
 <!-- iterating over arrays -->
 <h4>Hobbies ({{person.hobbies.length}}):</h4>
 <ul class="list-disc">
-  <li @each="const hobby with index of person.hobbies" class="text-red">
+  <li @each="hobby with index of person.hobbies" class="text-red">
     {{index + 1}}: {{hobby}}
   </li>
 </ul>
@@ -62,7 +62,7 @@ <h4>Hobbies ({{person.hobbies.length}}):</h4>
 </div>
 
 <!-- foreach loop with objects -->
-<span @each="const item of Object.entries({a: 1, b: 2, c: 3 })">
+<span @each="item of Object.entries({a: 1, b: 2, c: 3 })">
   {{item[0]}}:{{item[1]}},
 </span>
 
@@ -75,11 +75,11 @@ <h4>Hobbies ({{person.hobbies.length}}):</h4>
 
 <!-- void elements -->
 <div>
-  <kvoid @let="index = 0">
-    <kvoid @while="index < 3">
+  <void @let="index = 0">
+    <void @while="index < 3">
       {{index = index + 1}}
-    </kvoid>
-  </kvoid>
+    </void>
+  </void>
 </div>
 
 <!-- complex expressions -->
@@ -205,11 +205,11 @@ <h3>Try it out!</h3>
         entries.alert = function (value) {
           alert(value);
         };
-        const node = kasper.transpile(source, entries);
-        document.getElementById("render").innerHTML = "";
-        document.getElementById("render").appendChild(node);
-
-        // output.setValue(result.split("},{").join("},\n{"));
+        const node = kasper.transpile(
+          source,
+          entries,
+          document.getElementById("render")
+        );
       });
     </script>
   </body>

diff --git a/demo/template.html → live/template.html b/demo/template.html → live/template.html
@@ -52,9 +52,9 @@ <h1>{{this.user.firstName + this.user.lastName}}</h1>
   <input type="email" @on:input="{{(email) => this.email = $args[0]" />
 
   <!-- rendering child content -->
-  <kvoid @inlet />
+  <void @inlet />
 
   <!-- templates -->
-  <kvoid @outlet="my-template" />
-  <kvoid @template="my-template"> template content </kvoid>
+  <void @outlet="my-template" />
+  <void @template="my-template"> template content </void>
 </void>
diff --git a/readme.md b/readme.md
@@ -136,3 +136,7 @@ text + list[0] * dict.value;
 ```
 console.log('something');
 ```
+
+## Todo
+
+- fix state re-render
diff --git a/src/component.ts b/src/component.ts
@@ -0,0 +1,53 @@
+import { Transpiler } from "./transpiler";
+import { KNode } from "./types/nodes";
+
+interface ComponentArgs {
+  args: Record<string, any>;
+  ref?: Node;
+  transpiler?: Transpiler;
+}
+
+export class Component {
+  args: Record<string, any> = {};
+  ref?: Node;
+  transpiler?: Transpiler;
+  $onInit = () => {};
+  $onRender = () => {};
+  $onChanges = () => {};
+  $onDestroy = () => {};
+
+  constructor(props?: ComponentArgs) {
+    if (!props) {
+      this.args = {};
+      return;
+    }
+    if (props.args) {
+      this.args = props.args || {};
+    }
+    if (props.ref) {
+      this.ref = props.ref;
+    }
+    if (props.transpiler) {
+      this.transpiler = props.transpiler;
+    }
+  }
+
+  $doRender() {
+    if (!this.transpiler) {
+      return;
+    }
+    //this.transpiler?.createComponent(this);
+  }
+}
+
+export type KasperEntity = Component | Record<string, any> | null | undefined;
+
+export type ComponentClass = { new (args?: ComponentArgs): Component };
+export interface ComponentRegistry {
+  [tagName: string]: {
+    selector: string;
+    component: ComponentClass;
+    template: Element;
+    nodes: KNode[];
+  };
+}