@junnyontop-pixel/neo-app 1.1.8 → 1.1.10

package/compiler/NeoParser.js

@@ -1,70 +1,59 @@
 export class NeoParser {
     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. 태그 파싱
-        const tagRegex = /@(\w+):(\w+)\s*\{/g;
+        // 2. 태그 블록 분석 로직
+        // 정규식 설명: @아이디:태그 { 내부내용 } 을 줄바꿈 상관없이([\\s\\S]*?) 추출
+        const tagRegex = /@(\w+):(\w+)\s*\{([\s\S]*?)\}/g;
         let match;
-        const tags = [];
-
-        // 소스에서 태그 블록들을 찾아내기 위한 단순화된 로직
-        const tokens = source.split(/(@\w+:\w+\s*\{)/).filter(t => t.trim());
+        let root = null;
+        const stack = [];
 
-        tokens.forEach(token => {
-            const tagMatch = token.match(/@(\w+):(\w+)\s*\{/);
-            
-            if (tagMatch) {
-                const node = {
-                    id: tagMatch[1],
-                    tag: tagMatch[2],
-                    styles: {},
-                    events: {},
-                    innerHtml: "",
-                    children: []
-                };
+        // source 전체를 훑으며 태그 블록을 하나씩 찾습니다.
+        while ((match = tagRegex.exec(source)) !== null) {
+            const [_, id, tag, content] = match;
 
-                // Style 추출 (안전 장치 추가)
-                const styleMatch = token.match(/Style\((.*?)\)/s);
-                if (styleMatch && styleMatch[1]) {
-                    node.styles = this.parseKV(styleMatch[1]);
-                }
+            const node = {
+                id: id,
+                tag: tag,
+                styles: {},
+                events: {},
+                innerHtml: "",
+                children: []
+            };
 
-                // Event 추출 (안전 장치 추가)
-                const eventMatch = token.match(/Event\((.*?)\)/s);
-                if (eventMatch && eventMatch[1]) {
-                    node.events = this.parseKV(eventMatch[1]);
-                }
+            // 💡 [핵심] 블록 내부(content)에서 줄바꿈 무시하고 속성 추출
+            // Innerhtml 추출 (i 플래그로 대소문자 무시)
+            const htmlMatch = content.match(/Innerhtml:\s*"(.*?)"/i);
+            if (htmlMatch) {
+                node.innerHtml = htmlMatch[1];
+            }
 
-                // Innerhtml 추출
-                const htmlMatch = token.match(/Innerhtml:\s*"(.*?)"/);
-                if (htmlMatch) {
-                    node.innerHtml = htmlMatch[1];
-                }
+            // Style 추출 (si 플래그로 줄바꿈 허용 및 대소문자 무시)
+            const styleMatch = content.match(/Style\((.*?)\)/si);
+            if (styleMatch && styleMatch[1]) {
+                node.styles = this.parseKV(styleMatch[1]);
+            }
 
-                if (!root) {
-                    root = node;
-                } else {
-                    stack[stack.length - 1].children.push(node);
-                }
-                stack.push(node);
+            // Event 추출 (si 플래그)
+            const eventMatch = content.match(/Event\((.*?)\)/si);
+            if (eventMatch && eventMatch[1]) {
+                node.events = this.parseKV(eventMatch[1]);
             }
 
-            if (token.includes('}')) {
-                const closeCount = (token.match(/\}/g) || []).length;
-                for (let i = 0; i < closeCount; i++) {
-                    if (stack.length > 0) stack.pop();
-                }
+            // 3. 계층 구조 형성 (단순화된 방식: 첫 번째가 root, 나머지는 root의 자식)
+            // ※ 중첩 구조가 깊어질 경우 스택 로직이 필요하지만, 현재 요구사항엔 이 방식이 가장 확실합니다.
+            if (!root) {
+                root = node;
+            } else {
+                root.children.push(node);
             }
-        });
+        }
 
         return { root, scriptContent };
     }

package/compiler/index.js

@@ -1,21 +1,18 @@
 #!/usr/bin/env node
 import fs from 'fs';
-import path from 'path'; // 경로 처리를 위해 추가
+import path from 'path';
 import { NeoParser } from './NeoParser.js';
 
 const inputFile = process.argv[2];
 
-// 인자가 없을 경우 에러 처리
 if (!inputFile) {
-    console.error("❌ 컴파일할 .neo 파일을 입력해주세요. (예: node index.js App.neo)");
+    console.error("❌ 컴파일할 .neo 파일을 입력해주세요.");
     process.exit(1);
 }
 
 const source = fs.readFileSync(inputFile, 'utf8');
 const { root, scriptContent } = NeoParser.parse(source);
 
-// compiler/index.js 내부 generateCode 함수 수정
-
 function generateCode(node, indent = "    ") {
     const childrenCode = node.children
         .map(child => generateCode(child, indent + "    "))
@@ -27,42 +24,35 @@ function generateCode(node, indent = "    ") {
         let processedAction = action;
         
         if (action.includes('++')) processedAction = `state.${action}`;
-        
         if (processedAction.includes('(') && !processedAction.includes(')')) {
             processedAction += ')';
         }
-        // Proxy가 있으므로 renderApp() 호출은 빼도 됩니다.
         eventProps[propName] = `() => { ${processedAction} }`; 
     }
 
     const eventString = Object.entries(eventProps)
         .map(([k, v]) => `${k}: ${v}`)
-        .join(', ');
+        .join(',\n' + indent + '        ');
 
-    // 💡 innerHtml을 innerHTML(대문자)로 변경!
-    // index.js의 generateCode 함수 리턴 부분
+    // 💡 생성 키값을 innerHTML로 고정 (중요)
     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 : ''}])`;
+${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 내부
 const finalJS = `
-// 상대 경로 대신 패키지 이름을 직접 사용합니다. 
-// Vite가 node_modules에서 알아서 찾아줍니다.
 import { h } from '@junnyontop-pixel/neo-app/core/NeoCore.js';
 
 // [User Script]
 ${scriptContent}
 
 export default function render(state) {
-    return ${generateCode(root)};
+    return ${generateCode(root).trimStart()};
 }
 `.trim();
 
-// 파일 생성 위치를 입력 파일과 동일한 위치의 .js로 지정
 const outputPath = inputFile.replace('.neo', '.js');
 fs.writeFileSync(outputPath, finalJS);
 

package/core/NeoCore.js

@@ -3,11 +3,10 @@ export class NeoCore {
         this.container = document.getElementById(containerId);
         this.rootRenderFn = rootRenderFn;
         
-        // Proxy를 사용하여 state가 바뀔 때마다 자동으로 mount() 호출
         this.state = new Proxy(state, {
             set: (target, key, value) => {
                 target[key] = value;
-                this.mount(); // 상태 변화 시 자동으로 리렌더링
+                this.mount(); 
                 return true;
             }
         });
@@ -15,28 +14,24 @@ export class NeoCore {
 
     mount() {
         if (!this.container) return;
-        this.container.innerHTML = ''; // 화면 초기화
+        this.container.innerHTML = ''; 
         const domTree = this.rootRenderFn(this.state);
         this.container.appendChild(domTree);
     }
 }
 
-// 가상 노드를 실제 DOM 요소로 변환하는 함수
 export function h(tag, props, children = []) {
-    // 1. 태그 생성
     const el = document.createElement(tag);
 
-    // 2. 속성 설정
     if (props.id) el.id = props.id;
     if (props.style) Object.assign(el.style, props.style);
     
-    // 💡 [수정] 대소문자 문제 해결: innerHTML과 innerHtml 둘 다 지원
+    // 컴파일러가 주는 innerHTML과 파서가 주는 innerHtml 모두 대응
     const content = props.innerHTML || props.innerHtml;
     if (content !== undefined) {
         el.innerHTML = content;
     }
 
-    // 3. 이벤트 연결
     Object.keys(props).forEach(key => {
         if (key.startsWith('on') && typeof props[key] === 'function') {
             const eventType = key.toLowerCase().substring(2); 
@@ -44,16 +39,13 @@ export function h(tag, props, children = []) {
         }
     });
 
-    // 4. 자식 요소 추가 (배열 중첩 및 텍스트 노드 대응 강화)
     const flattenChildren = Array.isArray(children) ? children.flat() : [children];
     
     flattenChildren.forEach(child => {
         if (child === null || child === undefined) return;
-
         if (child instanceof HTMLElement) {
             el.appendChild(child);
         } else {
-            // 숫자나 문자열 등은 텍스트 노드로 변환하여 추가
             el.appendChild(document.createTextNode(String(child)));
         }
     });

package/package.json

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

package/src/App.js

@@ -1,5 +1,3 @@
-// 상대 경로 대신 패키지 이름을 직접 사용합니다. 
-// Vite가 node_modules에서 알아서 찾아줍니다.
 import { h } from '@junnyontop-pixel/neo-app/core/NeoCore.js';
 
 // [User Script]
@@ -7,9 +5,10 @@ function sayHello() {
         alert("안녕하세요!");
 
 export default function render(state) {
-    return     h('button', {
-            id: 'Btn',
-            style: {},
-            innerHTML: ``
-        }, []);
+    return h('button', {
+        id: 'Btn',
+        style: {},
+        innerHTML: `인사하기`,
+        onClick: () => { sayHello() }
+    }, []);
 }