@junnyontop-pixel/neo-app 1.1.4 → 1.1.6

package/compiler/NeoParser.js

@@ -1,52 +1,82 @@
 export class NeoParser {
-    static parse(code) {
-        // 1. @Script 블록 추출 로직 개선
-        // 괄호를 포함해서 캡처한 뒤, 앞뒤 껍데기만 날리는 방식이 가장 안전합니다.
-        const scriptMatch = code.match(/@Script\s*\{([\s\S]*?)\}(?=\s*@|$)/);
+    static parse(source) {
+        const lines = source.split('\n');
+        let root = null;
         let scriptContent = "";
-        
+        const stack = [];
+
+        // 1. 스크립트 영역 추출 (@Script { ... })
+        const scriptMatch = source.match(/@Script\s*\{([\s\S]*?)\}/);
         if (scriptMatch) {
             scriptContent = scriptMatch[1].trim();
-            // 만약 사용자가 적은 마지막 } 가 잘려 나갔다면 복구하거나, 
-            // 원본에서 블록 전체를 가져오는 로직으로 보강
         }
 
-        // 2. UI 요소 추출 (이 부분은 동일)
-        const uiCode = code.replace(/@Script\s*\{[\s\S]*?\}\s*/, "");
-        const tokenRegex = /(@\w+:\w+)|(Innerhtml:\s*".*?")|(Style\([\s\S]*?\))|(Event\([\s\S]*?\))|(\{)|(\})/g;
-        const tokens = uiCode.match(tokenRegex);
-        
-        const stack = [];
-        let root = null;
+        // 2. 태그 파싱
+        const tagRegex = /@(\w+):(\w+)\s*\{/g;
+        let match;
+        const tags = [];
+
+        // 소스에서 태그 블록들을 찾아내기 위한 단순화된 로직
+        const tokens = source.split(/(@\w+:\w+\s*\{)/).filter(t => t.trim());
 
         tokens.forEach(token => {
-            if (token.startsWith('@')) {
-                const [_, id, tag] = token.match(/@(\w+):(\w+)/);
-                const node = { id, tag, innerHtml: "", styles: {}, events: {}, children: [] };
-                if (stack.length > 0) stack[stack.length - 1].children.push(node);
-                else if (!root) root = node;
+            const tagMatch = token.match(/@(\w+):(\w+)\s*\{/);
+            
+            if (tagMatch) {
+                const node = {
+                    id: tagMatch[1],
+                    tag: tagMatch[2],
+                    styles: {},
+                    events: {},
+                    innerHtml: "",
+                    children: []
+                };
+
+                // Style 추출 (안전 장치 추가)
+                const styleMatch = token.match(/Style\((.*?)\)/s);
+                if (styleMatch && styleMatch[1]) {
+                    node.styles = this.parseKV(styleMatch[1]);
+                }
+
+                // Event 추출 (안전 장치 추가)
+                const eventMatch = token.match(/Event\((.*?)\)/s);
+                if (eventMatch && eventMatch[1]) {
+                    node.events = this.parseKV(eventMatch[1]);
+                }
+
+                // Innerhtml 추출
+                const htmlMatch = token.match(/Innerhtml:\s*"(.*?)"/);
+                if (htmlMatch) {
+                    node.innerHtml = htmlMatch[1];
+                }
+
+                if (!root) {
+                    root = node;
+                } else {
+                    stack[stack.length - 1].children.push(node);
+                }
                 stack.push(node);
-            } else if (token === '}') {
-                stack.pop();
-            } else if (token.startsWith('Innerhtml')) {
-                stack[stack.length - 1].innerHtml = token.match(/"(.*?)"/)[1];
-            } else if (token.startsWith('Style')) {
-                stack[stack.length - 1].styles = this.parseKV(token.match(/Style\((.*?)\)/)[1]);
-            } else if (token.startsWith('Event')) {
-                stack[stack.length - 1].events = this.parseKV(token.match(/Event\((.*?)\)/)[1]);
+            }
+
+            if (token.includes('}')) {
+                const closeCount = (token.match(/\}/g) || []).length;
+                for (let i = 0; i < closeCount; i++) {
+                    if (stack.length > 0) stack.pop();
+                }
             }
         });
 
         return { root, scriptContent };
     }
 
-    static parseKV(str) {
+    static parseKV(kvString) {
+        if (!kvString || !kvString.trim()) return {};
         const obj = {};
-        str.split(';').forEach(line => {
-            const [k, v] = line.split(':').map(s => s?.trim());
-            if (k && v) {
-                const camelK = k.replace(/-([a-z])/g, g => g[1].toUpperCase());
-                obj[camelK] = v;
+        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;
             }
         });
         return obj;

package/compiler/index.js

@@ -14,32 +14,38 @@ if (!inputFile) {
 const source = fs.readFileSync(inputFile, 'utf8');
 const { root, scriptContent } = NeoParser.parse(source);
 
-function generateCode(node) {
-    const childrenCode = node.children.map(child => generateCode(child)).join(', ');
-    
+function generateCode(node, indent = "    ") {
+    // 자식 노드들을 재귀적으로 호출하며 들여쓰기를 한 단계 더 깊게(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} }`; 
+        eventProps[propName] = `() => { ${processedAction}; renderApp(); }`; // renderApp() 호출 추가로 화면 갱신 유도
     }
 
     const eventString = Object.entries(eventProps)
         .map(([k, v]) => `${k}: ${v}`)
         .join(', ');
 
-    return `h('${node.tag}', {
-        id: '${node.id}',
-        style: ${JSON.stringify(node.styles)},
-        innerHtml: \`${node.innerHtml.replace(/\$(\w+)/g, '${state.$1}')}\`${eventString ? ', ' + eventString : ''}
-    }, [${childrenCode}])`;
+    // 템플릿 리터럴을 사용하여 들여쓰기가 적용된 문자열 생성
+    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}}, [${childrenCode ? '\n' + childrenCode + '\n' + indent : ''}])`;
 }
 
 // compiler/index.js 내부

package/package.json

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

package/src/App.js

@@ -4,13 +4,12 @@ import { h } from '@junnyontop-pixel/neo-app/core/NeoCore.js';
 
 // [User Script]
 function sayHello() {
-        alert("안녕하세요!");
-    }
+        alert("안녕하세요!");
 
 export default function render(state) {
-    return h('button', {
+    return     h('button', {
         id: 'Btn',
         style: {},
-        innerHtml: `인사하기`, onClick: () => { sayHello() }
+        innerHtml: ``
     }, []);
 }