@junnyontop-pixel/neo-app 2.1.0 → 2.2.0

package/compiler/NeoParser.js

@@ -5,7 +5,8 @@ export class NeoParser {
       tag: "",
       styles: [],
       innerHTML: "",
-      events: []
+      events: [],
+      children: []
     };
 
     // @ID:Tag
@@ -27,7 +28,19 @@ export class NeoParser {
     // { content }
     const contentMatch = rawCode.match(/\{([\s\S]*?)\}$/);
     if (contentMatch) {
-      const lines = contentMatch[1].trim().split('\n');
+      let content = contentMatch[1].trim(); // ⭐ 이게 content
+      let rest = content;                   // ⭐ 여기서 rest 생성
+
+      while (rest.includes('@')) {
+        const start = rest.indexOf('@');
+        const { block, nextIndex } = extractTag(rest, start);
+
+        result.children.push(this.parse(block));
+
+        rest = rest.slice(0, start) + rest.slice(nextIndex);
+      }
+
+      const lines = rest.split('\n');
 
       lines.forEach(line => {
         const text = line.trim();
@@ -55,4 +68,29 @@ export class NeoParser {
 
     return result;
   }
+}
+
+function extractTag(code, startIndex) {
+  let i = startIndex;
+  let depth = 0;
+  let opened = false;
+
+  while (i < code.length) {
+    if (code[i] === '{') {
+      depth++;
+      opened = true;
+    } else if (code[i] === '}') {
+      depth--;
+      if (opened && depth === 0) {
+        i++; // 닫는 } 포함
+        break;
+      }
+    }
+    i++;
+  }
+
+  return {
+    block: code.slice(startIndex, i).trim(),
+    nextIndex: i
+  };
 }

package/core/NeoCore.js

@@ -7,8 +7,19 @@ export class NeoCore {
       el.className = data.styles.join(' ');
     }
 
-    el.innerHTML = NeoCore.renderTemplate(data.innerHTML);
+    // 1️⃣ 텍스트 먼저
+    if (data.innerHTML) {
+      el.innerHTML = NeoCore.renderTemplate(data.innerHTML);
+    }
 
+    // 2️⃣ ⭐ 자식 태그 렌더링 (이게 핵심)
+    if (Array.isArray(data.children)) {
+      data.children.forEach(child => {
+        const childEl = NeoCore.create(child);
+        el.appendChild(childEl);
+      });
+    }
+    
     (data.events || []).forEach(evt => {
       el.addEventListener(evt.type, () => {
         try {

package/package.json

@@ -1,16 +1,12 @@
 {
   "name": "@junnyontop-pixel/neo-app",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "나만의 커스텀 프레임워크 Neo",
   "main": "core/NeoCore.js",
   "type": "module",
-  "bin": {
-    "neoc-init": "scripts/init.js"
-  },
   "files": [
     "compiler",
     "core",
-    "scripts",
     "index.html",
     "src",
     "README.md"

package/src/App.neo

@@ -1,4 +1,28 @@
-@Btn:button [px-4, py-2, bg-black, text-white, rounded] {
-  innerHTML: "현재 숫자: $Store.count"
-  on:click: Store.add()
+@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"
+    }
+  }
+
+  @Content:div [p-4, bg-blue-50, rounded] {
+
+    @Counter:p [mb-2] {
+      innerHTML: "Count: $Store.count"
+    }
+
+    @Button:button [px-3, py-2, bg-blue-600, text-white, rounded] {
+      innerHTML: "Increase"
+      on:click: Store.add()
+    }
+  }
+
 }

package/src/state.js

@@ -1,9 +1,7 @@
-const add = () => {
-  Store.count++;
-};
-
 export const Store = {
   count: 0,
 
-  add
+  add() {
+    Store.count++;
+  }
 };