@junnyontop-pixel/neo-app 2.5.0 → 2.5.2

package/compiler/NeoParser.js

@@ -34,27 +34,38 @@ export class NeoParser {
     if (contentMatch) {
       let rest = contentMatch[1].trim();
 
-      // // ✅ 0) ::attrs 먼저 처리 (메타 블록은 먼저 제거해야 함)
-      // while (rest.includes("::attrs")) {
-      //   const start = rest.indexOf("::attrs");
-      //   const { block, nextIndex } = extractBlock(rest, start);
+      while (rest.includes('::if')) {
+        const start = rest.indexOf('::if');
+        
+        const conditionMatch = rest.slice(start).match(/::if\s*\((.*?)\)/);
+        const condition = conditionMatch ? conditionMatch[1].trim() : "true";
+
+        const { block, nextIndex } = extractBlock(rest, start);
+        const dummyParsed = this.parse(`@if-container:div { ${block} }`);
 
-      //   // attrs 누적 (여러 ::attrs 지원 가능)
-      //   const parsed = parseAttrs(block);
-      //   result.attrs = { ...result.attrs, ...parsed };
+        result.children.push({
+          type: "ifBlock",
+          condition: condition,
+          children: dummyParsed.children,
+          _pos: start
+        });
 
-      //   // ::attrs 블록 제거
-      //   rest = rest.slice(0, start) + rest.slice(nextIndex);
-      // }
+        // 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('@');
         const { block, nextIndex } = extractTag(rest, start);
 
-        result.children.push(this.parse(block));
+        const childNode = this.parse(block);
+        childNode._pos = start;
 
-        rest = rest.slice(0, start) + rest.slice(nextIndex);
+        result.children.push(childNode);
+
+        // rest = rest.slice(0, start) + rest.slice(nextIndex);
+        rest = rest.slice(0, start) + " ".repeat(nextIndex - start) + rest.slice(nextIndex);
       }
 
       // ✅ 2) ::attrs 메타 블록 파싱
@@ -64,34 +75,36 @@ export class NeoParser {
 
         result.attrs = parseAttrs(block);
 
-        rest = rest.slice(0, start) + rest.slice(nextIndex);
+        rest = rest.slice(0, start) + " ".repeat(nextIndex - start) + rest.slice(nextIndex);
       }
 
-      // ✅ 3) ::if 조건 렌더링 파싱
-      while (rest.includes('::if')) {
-        const start = rest.indexOf('::if');
+      result.children.sort((a, b) => a._pos - b._pos);
+
+      // // ✅ 3) ::if 조건 렌더링 파싱        // 순서 옮기기
+      // while (rest.includes('::if')) {
+      //   const start = rest.indexOf('::if');
         
-        // 1. 조건식 파싱
-        const conditionMatch = rest.slice(start).match(/::if\s*\((.*?)\)/);
-        const condition = conditionMatch ? conditionMatch[1].trim() : "true";
+      //   // 1. 조건식 파싱
+      //   const conditionMatch = rest.slice(start).match(/::if\s*\((.*?)\)/);
+      //   const condition = conditionMatch ? conditionMatch[1].trim() : "true";
 
-        // 2. 블록 파싱
-        // startIndex를 주면 알아서 가장 가까운 { } 블록을 찾아줌
-        const { block, nextIndex } = extractBlock(rest, start);
+      //   // 2. 블록 파싱
+      //   // startIndex를 주면 알아서 가장 가까운 { } 블록을 찾아줌
+      //   const { block, nextIndex } = extractBlock(rest, start);
 
-        // 3. 재귀 파싱
-        const dummyParsed = this.parse(`@if-container:div { ${block} }`);
+      //   // 3. 재귀 파싱
+      //   const dummyParsed = this.parse(`@if-container:div { ${block} }`);
 
-        // 4. 결과 저장
-        result.children.push({
-          type: "ifBlock",
-          condition: condition,
-          children: dummyParsed.children
-        });
+      //   // 4. 결과 저장
+      //   result.children.push({
+      //     type: "ifBlock",
+      //     condition: condition,
+      //     children: dummyParsed.children
+      //   });
 
-        // 5. 처리한 문자열 잘라내기 (무한 루프 방지)
-        rest = rest.slice(0, start) + rest.slice(nextIndex);
-      }
+      //   // 5. 처리한 문자열 잘라내기 (무한 루프 방지)
+      //   rest = rest.slice(0, start) + rest.slice(nextIndex);
+      // }
 
       // ✅ 4) 남은 것에서 innerHTML / on: 만 파싱
       const lines = rest.split('\n');

package/core/NeoCore.js

@@ -1,5 +1,32 @@
 export class NeoCore {
   static create(data) {
+    
+    if (data.type === "ifBlock") {
+      let isTrue = false;
+      try {
+        // "$Store.state" -> "false" 로 변환
+        const conditionStr = NeoCore.renderTemplate(data.condition);
+        // "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));
+          });
+        }
+        return frag;
+      } else {
+        // 거짓일 때: 화면에 아무것도 안 그리는 '빈 텍스트 노드' 반환 ⭐ (이게 핵심!)
+        return document.createTextNode('');
+      }
+    }
+
     const el = document.createElement(data.tag || 'div');
 
     if (data.id) el.id = data.id;

package/package.json

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

package/src/App.neo

@@ -30,7 +30,7 @@
         placeholder: $Store.count
       }
     }
-    ::if(true){
+    ::if($Store.count > 14){
       @if_content:div[if_content]{
         innerHTML: "NeoNeo"
       }

package/src/state.js

@@ -1,5 +1,7 @@
+let count = 0;
+
 export const Store = {
-  count: 0,
+  count,
 
   add() {
     Store.count++;