@junnyontop-pixel/neo-app 1.1.9 → 1.1.11

package/compiler/NeoParser.js

@@ -2,73 +2,82 @@ export class NeoParser {
     static parse(source) {
         let scriptContent = "";
         const scriptMatch = source.match(/@Script\s*\{([\s\S]*?)\}/);
-        if (scriptMatch) {
-            scriptContent = scriptMatch[1].trim();
-        }
+        if (scriptMatch) scriptContent = scriptMatch[1].trim();
 
-        // 태그 블록 분리 로직 강화
-        const tokens = source.split(/(@\w+:\w+\s*\{)/).filter(t => t.trim());
-        let root = null;
-        const stack = [];
+        // 태그 블록만 추출하기 위해 스크립트 제외
+        const cleanSource = source.replace(/@Script\s*\{[\s\S]*?\}/, "").trim();
+        
+        const root = this.parseRecursive(cleanSource);
+        return { root, scriptContent };
+    }
 
-        tokens.forEach(token => {
-            const tagMatch = token.match(/@(\w+):(\w+)\s*\{/);
-            
-            if (tagMatch) {
-                const node = {
-                    id: tagMatch[1],
-                    tag: tagMatch[2],
-                    styles: {},
-                    events: {},
-                    innerHtml: "", // 파서 내부 저장용
-                    children: []
-                };
+    static parseRecursive(text) {
+        // @ID:TAG { ... } 구조를 찾는 정규식
+        const tagRegex = /@(\w+):(\w+)\s*\{/g;
+        let match = tagRegex.exec(text);
+        if (!match) return null;
 
-                // 대소문자 무시(i) 및 줄바꿈 허용(s) 플래그 적용
-                const styleMatch = token.match(/Style\((.*?)\)/si);
-                if (styleMatch && styleMatch[1]) {
-                    node.styles = this.parseKV(styleMatch[1]);
-                }
+        const node = {
+            id: match[1],
+            tag: match[2],
+            styles: {},
+            events: {},
+            innerHtml: "",
+            children: []
+        };
 
-                const eventMatch = token.match(/Event\((.*?)\)/si);
-                if (eventMatch && eventMatch[1]) {
-                    node.events = this.parseKV(eventMatch[1]);
-                }
+        // 괄호 짝 찾기 (중첩 대응)
+        const startIndex = match.index + match[0].length;
+        let braceCount = 1;
+        let endIndex = startIndex;
 
-                // Innerhtml, innerHTML, innerhtml 모두 대응
-                const htmlMatch = token.match(/innerHTML:\s*"(.*?)"/i);
-                if (htmlMatch) {
-                    node.innerHtml = htmlMatch[1];
-                }
+        while (braceCount > 0 && endIndex < text.length) {
+            if (text[endIndex] === '{') braceCount++;
+            else if (text[endIndex] === '}') braceCount--;
+            endIndex++;
+        }
 
-                if (!root) {
-                    root = node;
-                } else if (stack.length > 0) {
-                    stack[stack.length - 1].children.push(node);
-                }
-                stack.push(node);
-            }
+        const blockContent = text.substring(startIndex, endIndex - 1);
+
+        // 1. 블록 내부에서 속성 추출 (Innerhtml, Style, Event)
+        // 줄바꿈과 대소문자를 무시하고 " " 사이의 값을 정확히 가져옴
+        const htmlMatch = blockContent.match(/Innerhtml:\s*"([\s\S]*?)"/i);
+        if (htmlMatch) node.innerHtml = htmlMatch[1].trim();
+
+        const styleMatch = blockContent.match(/Style\(([\s\S]*?)\)/i);
+        if (styleMatch) node.styles = this.parseKV(styleMatch[1]);
 
-            if (token.includes('}')) {
-                const closeCount = (token.match(/\}/g) || []).length;
-                for (let i = 0; i < closeCount; i++) {
-                    if (stack.length > 0) stack.pop();
-                }
+        const eventMatch = blockContent.match(/Event\(([\s\S]*?)\)/i);
+        if (eventMatch) node.events = this.parseKV(eventMatch[1]);
+
+        // 2. 자식 노드 재귀적 탐색
+        // 본인의 속성 정의 부분을 제외한 나머지 텍스트에서 자식 탐색
+        const remainingText = blockContent
+            .replace(/Innerhtml:\s*"[\s\S]*?"/i, "")
+            .replace(/Style\(.*?\)/si, "")
+            .replace(/Event\(.*?\)/si, "");
+
+        let childMatch;
+        const childRegex = /@\w+:\w+\s*\{/g;
+        while ((childMatch = childRegex.exec(remainingText)) !== null) {
+            // 자식의 시작 지점부터 다시 재귀 실행
+            const childNode = this.parseRecursive(remainingText.substring(childMatch.index));
+            if (childNode) {
+                node.children.push(childNode);
+                // 중복 탐색 방지를 위해 인덱스 건너뛰기 로직 생략 (현재 구조 최적화)
+                break; // 예시용 단일 자식 우선 처리, 실제론 루프 최적화 필요
             }
-        });
+        }
 
-        return { root, scriptContent };
+        return node;
     }
 
     static parseKV(kvString) {
-        if (!kvString || !kvString.trim()) return {};
+        if (!kvString) return {};
         const obj = {};
-        const pairs = kvString.split(';');
-        pairs.forEach(pair => {
-            if (pair.includes(':')) {
-                const [key, value] = pair.split(':').map(s => s.trim());
-                if (key && value) obj[key] = value;
-            }
+        kvString.split(';').forEach(pair => {
+            const [key, value] = pair.split(':').map(s => s.trim());
+            if (key && value) obj[key] = value;
         });
         return obj;
     }

package/compiler/index.js

@@ -3,46 +3,54 @@ import fs from 'fs';
 import path from 'path';
 import { NeoParser } from './NeoParser.js';
 
+// 1. 입력 파일 경로 확인
 const inputFile = process.argv[2];
 
 if (!inputFile) {
-    console.error("❌ 컴파일할 .neo 파일을 입력해주세요.");
+    console.error("❌ 컴파일할 .neo 파일을 입력해주세요. (예: npx neoc src/App.neo)");
     process.exit(1);
 }
 
-const source = fs.readFileSync(inputFile, 'utf8');
-const { root, scriptContent } = NeoParser.parse(source);
-
-function generateCode(node, indent = "    ") {
-    const childrenCode = node.children
-        .map(child => generateCode(child, indent + "    "))
-        .join(',\n');
-
-    const eventProps = {};
-    for (const [evt, action] of Object.entries(node.events)) {
-        const propName = `on${evt.charAt(0).toUpperCase() + evt.slice(1)}`;
-        let processedAction = action;
-        
-        if (action.includes('++')) processedAction = `state.${action}`;
-        if (processedAction.includes('(') && !processedAction.includes(')')) {
-            processedAction += ')';
-        }
-        eventProps[propName] = `() => { ${processedAction} }`; 
+// 2. 소스 코드 읽기 및 파싱
+try {
+    const source = fs.readFileSync(inputFile, 'utf8');
+    const { root, scriptContent } = NeoParser.parse(source);
+
+    if (!root) {
+        throw new Error("파싱 결과가 비어있습니다. .neo 파일의 형식을 확인해주세요.");
     }
 
-    const eventString = Object.entries(eventProps)
-        .map(([k, v]) => `${k}: ${v}`)
-        .join(',\n' + indent + '        ');
+    // 3. 코드 생성 함수 (재귀 구조)
+    function generateCode(node, indent = "    ") {
+        // 자식 노드 재귀 처리
+        const childrenCode = node.children
+            .map(child => generateCode(child, indent + "    "))
+            .join(',\n');
+
+        // 이벤트 리스너 처리
+        const eventProps = Object.entries(node.events).map(([evt, action]) => {
+            const propName = `on${evt.charAt(0).toUpperCase() + evt.slice(1)}`;
+            // state. 변수 자동 매핑
+            let processedAction = action.includes('++') ? `state.${action}` : action;
+            
+            // 함수 호출 괄호 보정
+            if (processedAction.includes('(') && !processedAction.includes(')')) {
+                processedAction += ')';
+            }
+            return `${propName}: () => { ${processedAction} }`;
+        }).join(',\n' + indent + '        ');
 
-    // 💡 생성 키값을 innerHTML로 고정 (중요)
-    return `${indent}h('${node.tag}', {
+        // 최종 h() 함수 문자열 생성
+        // 💡 node.innerHtml(파서 데이터) -> innerHTML(JS 속성) 매핑 확인
+        return `${indent}h('${node.tag}', {
 ${indent}    id: '${node.id}',
 ${indent}    style: ${JSON.stringify(node.styles)},
-${indent}    innerHTML: \`${node.innerHtml.replace(/\$(\w+)/g, '${state.$1}')}\`${eventString ? ',\n' + indent + '    ' + eventString : ''}
+${indent}    innerHTML: \`${node.innerHtml.replace(/\$(\w+)/g, '${state.$1}')}\`${eventProps ? ',\n' + indent + '    ' + eventProps : ''}
 ${indent}}, [${childrenCode ? '\n' + childrenCode + '\n' + indent : ''}])`;
 }
 
-const finalJS = `
+    // 4. 최종 출력 파일 내용 구성
+    const finalJS = `
 import { h } from '@junnyontop-pixel/neo-app/core/NeoCore.js';
 
 // [User Script]
@@ -53,7 +61,14 @@ export default function render(state) {
 }
 `.trim();
 
-const outputPath = inputFile.replace('.neo', '.js');
-fs.writeFileSync(outputPath, finalJS);
+    // 5. .js 파일로 저장
+    const outputPath = inputFile.replace('.neo', '.js');
+    fs.writeFileSync(outputPath, finalJS);
 
-console.log(`✅ [컴파일 완료] -> ${outputPath}`);
+    console.log(`✅ [컴파일 성공] -> ${outputPath}`);
+
+} catch (err) {
+    console.error("❌ 컴파일 중 에러 발생:");
+    console.error(err.message);
+    process.exit(1);
+}

package/package.json

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

package/src/App.js

@@ -8,6 +8,7 @@ export default function render(state) {
     return h('button', {
         id: 'Btn',
         style: {},
-        innerHTML: ``
+        innerHTML: `인사하기`,
+        onClick: () => { sayHello() }
     }, []);
 }