Fixed Event Bubbling & innerHTML Rendering

Author: junnyontop-pixel

MyNeoApp/compiler/NeoParser.js

@@ -5,7 +5,7 @@ export class NeoParser {
         if (scriptMatch) scriptContent = scriptMatch[1].trim();
 
         // 태그 블록만 추출하기 위해 스크립트 제외
-        const cleanSource = source.replace(/@Script\s*\{[\s\S]*?\}/, "").trim();
+        const cleanSource = source.replace(/@Script\s*\{[\s\S]*?\}/, "").trim();    
 
         const root = this.parseRecursive(cleanSource);
         return { root, scriptContent };
@@ -39,21 +39,23 @@ export class NeoParser {
 
         const blockContent = text.substring(startIndex, endIndex - 1);
 
+        const contentWithoutChildren = blockContent.replace(/@\w+:\w+\s*\{[\s\S]*?\}/g, "");
+
         // 1. 블록 내부에서 속성 추출 (Innerhtml, Style, Event)
         // 줄바꿈과 대소문자를 무시하고 " " 사이의 값을 정확히 가져옴
-        const htmlMatch = blockContent.match(/Innerhtml:\s*"([\s\S]*?)"/i);
+        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]);
 
-        const eventMatch = blockContent.match(/Event\(([\s\S]*?)\)/i);
+        const eventMatch = contentWithoutChildren.match(/Event\(([\s\S]*?)\)/i);
         if (eventMatch) node.events = this.parseKV(eventMatch[1]);
 
         // 2. 자식 노드 재귀적 탐색
         // 본인의 속성 정의 부분을 제외한 나머지 텍스트에서 자식 탐색
         const remainingText = blockContent
-            .replace(/Innerhtml:\s*"[\s\S]*?"/i, "")
+            .replace(/innerHTML:\s*"[\s\S]*?"/i, "")
             .replace(/Style\(.*?\)/si, "")
             .replace(/Event\(.*?\)/si, "");
 
@@ -64,8 +66,19 @@ export class NeoParser {
             const childNode = this.parseRecursive(remainingText.substring(childMatch.index));
             if (childNode) {
                 node.children.push(childNode);
-                // 중복 탐색 방지를 위해 인덱스 건너뛰기 로직 생략 (현재 구조 최적화)
-                break; // 예시용 단일 자식 우선 처리, 실제론 루프 최적화 필요
+                
+                // 자식 노드의 끝 지점을 찾아서 다음 검색 위치를 조정
+                let braceCount = 1;
+                let i = remainingText.indexOf('{', childMatch.index) + 1;
+                
+                while (braceCount > 0 && i < remainingText.length) {
+                    if (remainingText[i] === '{') braceCount++;
+                    else if (remainingText[i] === '}') braceCount--;
+                    i++;
+                }
+                
+                // 정규식의 다음 검색 시작 위치를 자식 노드가 끝난 지점(i)으로 옮겨줘
+                childRegex.lastIndex = i;
             }
         }
 

MyNeoApp/compiler/index.js

@@ -22,24 +22,30 @@ try {
 
     // 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)}`;
-        // $count -> state.count로 치환
-        let processedAction = action.replace(/\$(\w+)/g, 'state.$1');
-        return `${propName}: () => { ${processedAction} }`;
-    }).join(`,\n${indent}        `);
-
-    return `${indent}h('${node.tag}', {
-${indent}    id: '${node.id}',
-${indent}    style: ${JSON.stringify(node.styles)},
-${indent}    innerHTML: \`${node.innerHtml.replace(/\$(\w+)/g, '${state.$1}')}\`${eventProps ? ',\n' + indent + '    ' + eventProps : ''}
-${indent}}, [${childrenCode ? '\n' + childrenCode + '\n' + indent : ''}])`;
-}
+
+        const textNode = node.innerHtml 
+            ? `\`${node.innerHtml.replace(/\$(\w+)/g, '${state.$1}')}\`` 
+            : null;
+
+        const childrenCode = node.children
+            .map(child => generateCode(child, indent + "    "))
+            .join(',\n');
+
+        const allChildren = [textNode, childrenCode].filter(Boolean).join(',\n');
+
+        // 이벤트들을 객체 문자열로 변환
+        const eventProps = Object.entries(node.events).map(([evt, action]) => {
+            const propName = `on${evt.charAt(0).toUpperCase() + evt.slice(1)}`;
+            // $count -> state.count로 치환
+            let processedAction = action.replace(/\$(\w+)/g, 'state.$1');
+            return `${propName}: () => { ${processedAction} }`;
+        }).join(`,\n${indent}        `);
+
+        return `${indent}h('${node.tag}', {
+        ${indent}    id: '${node.id}',
+        ${indent}    style: ${JSON.stringify(node.styles)}${eventProps ? ',\n' + indent + '    ' + eventProps : ''}
+        ${indent}}, [${allChildren ? '\n' + allChildren + '\n' + indent : ''}])`;
+    }
 
 // render 함수 생성 부분
 const finalJS = `

MyNeoApp/core/NeoCore.js

@@ -27,10 +27,10 @@ export function h(tag, props, children = []) {
     if (props.style) Object.assign(el.style, props.style);
 
     // 컴파일러가 주는 innerHTML과 파서가 주는 innerHtml 모두 대응
-    const content = props.innerHTML || props.innerHtml;
-    if (content !== undefined) {
-        el.innerHTML = content;
-    }
+    // const content = props.innerHTML || props.innerHtml;
+    // if (content !== undefined) {
+    //     el.innerHTML = content;
+    // }
 
     Object.keys(props).forEach(key => {
         if (key.startsWith('on') && typeof props[key] === 'function') {

MyNeoApp/package.json

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

MyNeoApp/src/App.js

@@ -6,9 +6,10 @@ export default function render(state) {
     if (state.title === undefined) state.title = "hello, neo";
 
     return h('button', {
-        id: 'Btn',
-        style: {},
-        innerHTML: `인사하기`,
+                id: 'Btn',
+                style: {},
         onClick: () => { sayHello( }
-    }, []);
+            }, [
+`인사하기`
+    ]);
 }