@junnyontop-pixel/neo-app 2.5.2 → 2.6.0

package/compiler/NeoParser.js

@@ -54,6 +54,29 @@ export class NeoParser {
         rest = rest.slice(0, start) + " ".repeat(nextIndex - start) + rest.slice(nextIndex);
       }
 
+      while (rest.includes('::for')) {
+        const start = rest.indexOf('::for');
+        
+        const forMatch = rest.slice(start).match(/::for\s*\((.*?)\s+in\s+(.*?)\)/);
+  
+        const itemName = forMatch ? forMatch[1].trim() : "item";   // "item" 추출
+        const listPath = forMatch ? forMatch[2].trim() : "[]";     // "Store.items" 추출
+
+        const { block, nextIndex } = extractBlock(rest, start);
+        const dummyParsed = this.parse(`@for-container:div { ${block} }`);
+
+        result.children.push({
+          type: "forBlock",
+          itemName: itemName,
+          listPath: listPath,
+          children: dummyParsed.children,
+          _pos: start
+        });
+
+        // rest = rest.slice(0, start) + rest.slice(nextIndex);
+        rest = rest.slice(0, start) + " ".repeat(nextIndex - start) + rest.slice(nextIndex);
+      }
+
       // ✅ 1) children 태그들 파싱
       while (rest.includes('@')) {
         const start = rest.indexOf('@');

package/core/NeoCore.js

@@ -1,23 +1,23 @@
 export class NeoCore {
-  static create(data) {
+  static create(data, loopContext = {}) {
     
     if (data.type === "ifBlock") {
       let isTrue = false;
       try {
         // "$Store.state" -> "false" 로 변환
-        const conditionStr = NeoCore.renderTemplate(data.condition);
+        const conditionStr = NeoCore.renderTemplate(data.condition, loopContext);
         // "return false" 를 자바스크립트로 실행해서 진짜 false로 만듦
         isTrue = new Function(`return ${conditionStr}`)();
       } catch (e) {
         console.warn("Neo if condition error:", e);
-      }
+      } 
 
       if (isTrue) {
         // 참일 때: 껍데기(div) 없이 알맹이만 DocumentFragment로 묶어서 반환
         const frag = document.createDocumentFragment();
         if (Array.isArray(data.children)) {
           data.children.forEach(child => {
-            frag.appendChild(NeoCore.create(child));
+            frag.appendChild(NeoCore.create(child, loopContext));
           });
         }
         return frag;
@@ -27,6 +27,29 @@ export class NeoCore {
       }
     }
 
+    if (data.type === "forBlock") {
+      let list = [];
+      try {
+        const listPath = data.listPath;
+        list = listPath
+          .split('.')
+          .reduce((obj, key) => obj?.[key], window) ?? [];
+      } catch (e) {
+        console.warn("Neo for list error:", e);
+      }
+
+      const frag = document.createDocumentFragment();
+      if (Array.isArray(list)) {
+        list.forEach((item, index) => {
+          data.children.forEach(child => {
+            const loopContext = { [data.itemName]: item, index: index };
+            frag.appendChild(NeoCore.create(child, loopContext)); 
+          });
+        });
+      }
+      return frag;
+    }
+
     const el = document.createElement(data.tag || 'div');
 
     if (data.id) el.id = data.id;
@@ -38,7 +61,7 @@ export class NeoCore {
       for (const [key, rawValue] of Object.entries(data.attrs)) {
 
         // ⭐ 핵심: 먼저 렌더링
-        const value = NeoCore.renderTemplate(String(rawValue));
+        const value = NeoCore.renderTemplate(String(rawValue), loopContext);
 
         // boolean attribute
         if (value === 'true' || value === 'false') {
@@ -65,27 +88,34 @@ export class NeoCore {
 
     // 1️⃣ 텍스트 먼저
     if (data.innerHTML) {
-      el.innerHTML = NeoCore.renderTemplate(data.innerHTML);
+      el.innerHTML = NeoCore.renderTemplate(data.innerHTML, loopContext);
     }
 
     // 2️⃣ ⭐ 자식 태그 렌더링 (이게 핵심)
     if (Array.isArray(data.children)) {
       data.children.forEach(child => {
-        const childEl = NeoCore.create(child);
+        const childEl = NeoCore.create(child, loopContext);
         el.appendChild(childEl);
       });
     }
     
     (data.events || []).forEach(evt => {
-      el.addEventListener(evt.type, () => {
+      el.addEventListener(evt.type, (e) => {
         try {
-          new Function(evt.action)();
+          const keys = Object.keys(loopContext);
+          const values = Object.values(loopContext);
+
+          // 1. 함수 생성
+          const runner = new Function(...keys, evt.action);
+
+          // 2. ⭐ 핵심: .call()을 사용해서 'this'를 현재 엘리먼트(el)로 고정!
+          runner.call(el, ...values); 
 
           if (window.__neoRender) {
             window.__neoRender();
           }
-        } catch (e) {
-          console.error("Neo Event Error:", e);
+        } catch (err) {
+          console.error("Neo Event Error:", err);
         }
       });
     });
@@ -93,11 +123,18 @@ export class NeoCore {
     return el;
   }
 
-  static renderTemplate(template = "") {
+  static renderTemplate(template = "", loopContext = {}) {
     return template.replace(/\$([\w.]+)/g, (_, path) => {
-      return path
-        .split('.')
-        .reduce((obj, key) => obj?.[key], window) ?? '';
+      const keys = path.split('.');
+      const firstKey = keys[0];
+
+      // 1. 만약 loopContext(예: todo)에 첫 번째 키가 있다면 거기서 찾기
+      if (loopContext.hasOwnProperty(firstKey)) {
+        return keys.reduce((obj, key) => obj?.[key], loopContext) ?? '';
+      }
+
+      // 2. 없다면 전역 window(Store)에서 찾기
+      return keys.reduce((obj, key) => obj?.[key], window) ?? '';
     });
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@junnyontop-pixel/neo-app",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "description": "나만의 커스텀 프레임워크 Neo",
   "main": "core/NeoCore.js",
   "type": "module",

package/src/App.neo

@@ -1,38 +1,36 @@
-@App:div [p-6, bg-gray-100] {
-
-  innerHTML: "Neo Nested Test"
-
-  @Header:div [mb-4, p-3, bg-white, rounded] {
-
-    @Title:h1 [text-2xl, font-bold] {
-      innerHTML: "Header Title"
-    }
-
-    @Sub:p [text-gray-500] {
-      innerHTML: "This is a nested paragraph"
-    }
+@TodoApp:div [p-6, bg-gray-50] {
+  @Header:h1 [text-2xl, font-bold, mb-4] {
+    innerHTML: "$Store.user.name 님의 오늘 할 일"
   }
-
-  @Content:div [p-4, bg-blue-50, rounded] {
-
-    @Counter:p [mb-2] {
-      innerHTML: "Count: $Store.count"
+  @ListContainer:div [bg-white, shadow, rounded-lg] {
+    ::attrs {
+      "data-version": "2.6.0"
     }
-
-    @Button:button [px-3, py-2, bg-blue-600, text-white, rounded] {
-      innerHTML: "Increase"
-      on:click: Store.add()
+    ::for(todo in Store.todoList) {
+      @Task:div [flex, items-center, p-4, border-b] {
+        @Checkbox:input {
+          ::attrs { 
+            type: "checkbox",
+            checked: "$todo.completed"
+          }
+
+          on:change: todo.completed = this.checked
+        }
+        @Title:span [ml-3, text-gray-700] {
+          innerHTML: "$todo.text"
+        }
+      }
     }
-
-    @input:input [hello] {
-      ::attrs: {
-        type: "text",
-        placeholder: $Store.count
+  }
+  @Footer:p [mt-4, text-sm, text-gray-400] {
+    ::if($Store.remainingCount > 0) {
+      @Status:span {
+        innerHTML: "아직 $Store.remainingCount개의 할 일이 남았습니다."
       }
     }
-    ::if($Store.count > 14){
-      @if_content:div[if_content]{
-        innerHTML: "NeoNeo"
+    ::if($Store.remainingCount === 0) {
+      @Status:span [text-green-500, font-bold] {
+        innerHTML: "🎉 모든 할 일을 끝냈습니다!"
       }
     }
   }

package/src/state.js

@@ -1,9 +1,29 @@
-let count = 0;
-
 export const Store = {
-  count,
+  // 1. 유저 정보 ($Store.user.name)
+  user: {
+    name: "안유준"
+  },
+
+  // 2. 할 일 목록 (::for(todo in Store.todoList) 에서 쓰임)
+  todoList: [
+    { text: "Neo 프레임워크 v2.6.0 파서 완성", completed: true },
+    { text: "::for 루프 데이터 바인딩 로직 구현", completed: false },
+    { text: "락토프리 간식 먹으면서 쉬기", completed: false }
+  ],
+
+  // 3. 할 일을 추가하는 기능 (나중에 버튼 만들면 쓸 수 있게!)
+  addTodo(text) {
+    this.todoList.push({ text, completed: false });
+    // 여기서 리렌더링 트리거를 해주면 최고!
+  },
+
+  get remainingCount() {
+    return this.todoList.filter(todo => !todo.completed).length;
+  },
 
-  add() {
-    Store.count++;
+  update() {
+    if (window.__neoRender) {
+      window.__neoRender();
+    }
   }
 };