init

codegram01 · codegram01 · commit dd4ed14533a8 · 2024-09-16T20:26:54.000+07:00
diff --git a/LISENCE b/LISENCE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 codegram01
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,79 @@
+# GramJs
+
+Smallest Javascript framework. The only Javascript Framework you can understand.
+GramJs only have 100 line code and 3 function.
+
+Check example at folder demo
+
+[Video when i create]()
+
+## Usage
+- Just copy file gram.js and add to your project 
+- import { e, range, ref } from "gram.js"
+
+## Docs
+Gramjs have 3 function
+
+### function e(tag, ops, ...childs) {}
+function e create and return new html element.
+e just like wrap of document.createElement and add more feature
+
+you can add element property in ops 
+ops:
+- text : it will do elm.innerText = value
+- html : it will do elm.innerHTML = value
+- value : it will do elm.value = value
+- show : element will display none or show when value true or false
+- default html attribute : like src, href, width, ...
+
+### function ref(value) {}
+ref create reactive value. 
+
+Create value: const myVal = ref("Hello World")
+Get value: myVal.value
+Change value: myVal.value = "Something"
+
+you bind ref value to html element like this
+```javascript
+e("h1", {text: title})
+e("input", {value: title})
+```
+when value change html element will update
+or when html update value will update
+
+### function range(arrItem, render) {}
+range to help you map array value to html
+
+range recevive
+- arrItem : array item
+- render : function e , logic for render 1 element of array
+range return html element like function e 
+
+like when you have 
+```javascript
+const fruits = ref(["apple", "banana", "orange"])
+```
+display array to html like this
+```javascript
+range(fruits, (fruit, index) => {
+      return e("li", {text: `${index}: ${fruit}`})
+    })
+```
+When you change array, you need call myArr.markChange() to update html
+
+## TODO 
+I keep Gramjs to a minimum so you can easy to understand.
+But if you want use it in real life, some feature need 
+
+What you can add to GramJs:
+- The syntax create element
+in gramjs we create element use e(), but it look different write in html syntax
+some people in react framework create jsx, and then jsx under the hood convert to e function, you can add jsx in your gramjs
+
+- Reactive value 
+GramJs can work good at basic data type like string, number, boolean
+But in Array and object reactive is hard to detect when value change and update html. I still haven't figured out how to do it effectively.
+
+## Contribute
+- fork, update, merge, open issue is happy
+- [Subscribe my Youtube](https://www.youtube.com/@WingramOrg)
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,9 @@
+<html>
+    <head>
+        <title>Demo GramJs</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script src="index.js" type="module"></script>
+    </body>
+</html>
diff --git a/demo/index.js b/demo/index.js
@@ -0,0 +1,46 @@
+import { e, range, ref } from "../gram.js"
+
+const app = document.getElementById("app")
+
+const title = ref("Fruits Manager")
+
+const fruits = ref(["apple", "banana", "orange"])
+const fruitInp = ref("")
+function addFruit(){
+  fruits.value.push(fruitInp.value);
+  fruits.markChange();
+  fruitInp.value = "";
+}
+function removeFruit(index) {
+  fruits.value.splice(index, 1);
+  fruits.markChange();
+}
+
+const showFruit = ref(true)
+function toggleShowFruit() {
+  showFruit.value = !showFruit.value
+}
+
+const ctn = e("div", {},
+  e("h1", {text: title}),
+  e("input", {value: title}),
+  e("hr"),
+
+  e("input", {type: "text", value: fruitInp, placeholder: "Enter fruit"}),
+  e("button", {text: "add fruit", onclick: addFruit}),
+  e("ul", { show: showFruit }, 
+    range(fruits, (fruit, index) => {
+      return e("li", {text: `${index}: ${fruit} - `}, 
+        e("button", {text: "x", onclick: ()=>{removeFruit(index)}})
+      )
+    })
+  ),
+  e("hr"),
+
+  e("div", {}, 
+    e("button", {text: "toggle show fruits", onclick: toggleShowFruit}),
+    e("span", {text: showFruit})
+  ),
+)
+
+app.appendChild(ctn);
diff --git a/gram.js b/gram.js
@@ -0,0 +1,128 @@
+export function e(tag, ops, ...childs) {
+  const elm = document.createElement(tag);
+
+  if (ops) {
+    for (const [key, op] of Object.entries(ops)) {
+      if (key.startsWith("on")) {
+        const event = key.slice(2);
+        elm.addEventListener(event, op);
+        continue;
+      }
+      if (op.isRef) {
+        switch (key) {
+          case "text":
+            elm.innerText = op.value;
+            op.subscribe(() => {
+              elm.innerText = op.value;
+            });
+            break;
+          case "html":
+            elm.innerHTML = op.value;
+            op.subscribe(() => {
+              elm.innerHTML = op.value;
+            });
+            break;
+          case "value":
+            elm.value = op.value;
+            elm.addEventListener("input", () => {
+              op.value = elm.value;
+            });
+            op.subscribe(() => {
+              elm.value = op.value;
+            });
+            break;
+          case "show":
+            elm.style.display = op.value ? "" : "none"
+            op.subscribe(() => {
+              elm.style.display = op.value ? "" : "none"
+            });
+            break;
+          default:
+            op.subscribe(() => {
+              elm[key] = op.value;
+            });
+        }
+        continue;
+      }
+
+      switch (key) {
+        case "text":
+          elm.innerText = op;
+          continue;
+        case "html":
+          elm.innerHTML = op;
+          continue;
+        default:
+          elm[key] = op;
+          continue;
+      }
+    }
+  }
+
+  if (childs) {
+    for (let i = 0; i < childs.length; i++) {
+      if (Array.isArray(childs[i])) {
+        for (const child of childs[i]) {
+          elm.appendChild(child);
+        }
+      } else {
+        elm.appendChild(childs[i]);
+      }
+    }
+  }
+
+  return elm;
+}
+
+export function ref(value) {
+  const subscribes = [];
+  const refObject = {
+    isRef: true,
+  
+    get value() {
+      return value;
+    },
+    set value(newValue) {
+      value = newValue;
+      this.callSubscribe()
+    },
+
+
+    subscribe(func) {
+      subscribes.push(func);
+    },
+    callSubscribe(){
+      for (const func of subscribes) {
+        func();
+      }
+    },
+    markChange(){
+      this.callSubscribe();
+    }
+  };
+  return refObject;
+}
+
+export function range(arrItem, render) {
+    const ctn = e("div");
+    
+    function callRender(){
+      const arrItemWrap = arrItem.value ? arrItem.value : arrItem
+      for(let i = 0; i < arrItemWrap.length; i++){
+        const itemElm = render(arrItemWrap[i], i);
+
+        ctn.appendChild(itemElm)
+      }
+
+      return ctn
+    }
+
+    if(arrItem.isRef){
+      arrItem.subscribe(()=> {
+        ctn.innerHTML = "";
+        callRender()
+      })
+    }
+
+    return callRender()
+}
