@junnyontop-pixel/neo-app 1.1.16 → 1.2.0

package/compiler/NeoParser.js

@@ -22,6 +22,7 @@ export class NeoParser {
             tag: match[2],
             styles: {},
             events: {},
+            props: {},
             innerHtml: "",
             children: []
         };
@@ -39,21 +40,26 @@ 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]);
 
+        const propsMatch = blockContent.match(/Props\(([\s\S]*?)\)/i);
+        if (propsMatch) node.props = this.parseKV(propsMatch[1]);
+
         // 2. 자식 노드 재귀적 탐색
         // 본인의 속성 정의 부분을 제외한 나머지 텍스트에서 자식 탐색
         const remainingText = blockContent
-            .replace(/Innerhtml:\s*"[\s\S]*?"/i, "")
+            .replace(/innerHTML:\s*"[\s\S]*?"/i, "")
             .replace(/Style\(.*?\)/si, "")
             .replace(/Event\(.*?\)/si, "");
 

package/compiler/index.js

@@ -41,9 +41,16 @@ try {
             return `${propName}: () => { ${processedAction} }`;
         }).join(`,\n${indent}        `);
 
+        const mergedProps = {
+            id: node.id,
+            ...node.props
+        };
+
+        const propsContent = JSON.stringify(mergedProps).slice(1, -1);
+
         return `${indent}h('${node.tag}', {
-        ${indent}    id: '${node.id}',
-        ${indent}    style: ${JSON.stringify(node.styles)}${eventProps ? ',\n' + indent + '    ' + eventProps : ''}
+        ${indent}    style: ${JSON.stringify(node.styles)},
+        ${indent}    ${propsContent}${eventProps ? ',\n' + indent + '    ' + eventProps : ''}
         ${indent}}, [${allChildren ? '\n' + allChildren + '\n' + indent : ''}])`;
     }
 

package/core/NeoCore.js

@@ -33,6 +33,13 @@ export function h(tag, props, children = []) {
     // }
 
     Object.keys(props).forEach(key => {
+        const reserved = ['id', 'style', 'innerHTML', 'innerHtml'];
+
+        // 이벤트도 아니고, 예약어도 아닌 'type', 'placeholder' 같은 애들이라면?
+        if (!reserved.includes(key) && !key.startsWith('on')) {
+            el.setAttribute(key, props[key]);
+        }
+
         if (key.startsWith('on') && typeof props[key] === 'function') {
             const eventType = key.toLowerCase().substring(2); 
             el.addEventListener(eventType, props[key]);

package/package.json

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

package/src/App.js

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