@junnyontop-pixel/neo-app 1.1.6 → 1.1.8

package/compiler/index.js

@@ -14,38 +14,38 @@ if (!inputFile) {
 const source = fs.readFileSync(inputFile, 'utf8');
 const { root, scriptContent } = NeoParser.parse(source);
 
+// compiler/index.js 내부 generateCode 함수 수정
+
 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}; renderApp(); }`; // renderApp() 호출 추가로 화면 갱신 유도
+        // Proxy가 있으므로 renderApp() 호출은 빼도 됩니다.
+        eventProps[propName] = `() => { ${processedAction} }`; 
     }
 
     const eventString = Object.entries(eventProps)
         .map(([k, v]) => `${k}: ${v}`)
         .join(', ');
 
-    // 템플릿 리터럴을 사용하여 들여쓰기가 적용된 문자열 생성
+    // 💡 innerHtml을 innerHTML(대문자)로 변경!
+    // index.js의 generateCode 함수 리턴 부분
     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 내부

package/core/NeoCore.js

@@ -2,10 +2,12 @@ export class NeoCore {
     constructor(state, rootRenderFn, containerId) {
         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;
             }
         });
@@ -13,38 +15,46 @@ 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 요소로 바꾸는 함수
+// 가상 노드를 실제 DOM 요소로 변환하는 함수
 export function h(tag, props, children = []) {
+    // 1. 태그 생성
     const el = document.createElement(tag);
 
-    // 1. ID 설정
+    // 2. 속성 설정
     if (props.id) el.id = props.id;
-
-    // 2. 스타일 설정
     if (props.style) Object.assign(el.style, props.style);
+    
+    // 💡 [수정] 대소문자 문제 해결: innerHTML과 innerHtml 둘 다 지원
+    const content = props.innerHTML || props.innerHtml;
+    if (content !== undefined) {
+        el.innerHTML = content;
+    }
 
-    // 3. 내용물 설정
-    if (props.innerHtml) el.innerHTML = props.innerHtml;
-
-    // 💡 4. 이벤트 연결 (이 부분이 빠져있을 거예요!)
-    // props에 on으로 시작하는 속성(onClick 등)이 있다면 이벤트를 등록합니다.
+    // 3. 이벤트 연결
     Object.keys(props).forEach(key => {
         if (key.startsWith('on') && typeof props[key] === 'function') {
-            const eventType = key.toLowerCase().substring(2); // 'onClick' -> 'click'
+            const eventType = key.toLowerCase().substring(2); 
             el.addEventListener(eventType, props[key]);
         }
     });
 
-    // 5. 자식 요소 추가
-    children.forEach(child => {
+    // 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.6",
+  "version": "1.1.8",
   "description": "나만의 커스텀 프레임워크 Neo",
   "main": "core/NeoCore.js",
   "type": "module",

package/src/App.js

@@ -8,8 +8,8 @@ function sayHello() {
 
 export default function render(state) {
     return     h('button', {
-        id: 'Btn',
-        style: {},
-        innerHtml: ``
-    }, []);
+            id: 'Btn',
+            style: {},
+            innerHTML: ``
+        }, []);
 }