@junnyontop-pixel/neo-app 2.2.0 → 2.3.0

package/compiler/NeoParser.js

@@ -6,7 +6,8 @@ export class NeoParser {
       styles: [],
       innerHTML: "",
       events: [],
-      children: []
+      children: [],
+      attrs: {}
     };
 
     // @ID:Tag
@@ -28,9 +29,22 @@ export class NeoParser {
     // { content }
     const contentMatch = rawCode.match(/\{([\s\S]*?)\}$/);
     if (contentMatch) {
-      let content = contentMatch[1].trim(); // ⭐ 이게 content
-      let rest = content;                   // ⭐ 여기서 rest 생성
+      let rest = contentMatch[1].trim();
 
+      // // ✅ 0) ::attrs 먼저 처리 (메타 블록은 먼저 제거해야 함)
+      // while (rest.includes("::attrs")) {
+      //   const start = rest.indexOf("::attrs");
+      //   const { block, nextIndex } = extractBlock(rest, start);
+
+      //   // attrs 누적 (여러 ::attrs 지원 가능)
+      //   const parsed = parseAttrs(block);
+      //   result.attrs = { ...result.attrs, ...parsed };
+
+      //   // ::attrs 블록 제거
+      //   rest = rest.slice(0, start) + rest.slice(nextIndex);
+      // }
+
+      // ✅ 1) children 태그들 파싱
       while (rest.includes('@')) {
         const start = rest.indexOf('@');
         const { block, nextIndex } = extractTag(rest, start);
@@ -40,27 +54,42 @@ export class NeoParser {
         rest = rest.slice(0, start) + rest.slice(nextIndex);
       }
 
+      // ✅ 2) ::attrs 메타 블록 파싱
+      if (rest.includes('::attrs')) {
+        const start = rest.indexOf('::attrs');
+        const { block, nextIndex } = extractBlock(rest, start);
+
+        result.attrs = parseAttrs(block);
+
+        rest = rest.slice(0, start) + rest.slice(nextIndex);
+      }
+
+      // ✅ 2) 남은 것에서 innerHTML / on: 만 파싱
       const lines = rest.split('\n');
 
       lines.forEach(line => {
         const text = line.trim();
+        if (!text) return;
 
         if (text.startsWith('innerHTML:')) {
           let value = text.slice('innerHTML:'.length).trim();
+
+          // 문자열 리터럴이면 바깥 따옴표만 제거
           if (
             (value.startsWith('"') && value.endsWith('"')) ||
             (value.startsWith("'") && value.endsWith("'"))
           ) {
             value = value.slice(1, -1);
           }
+
           result.innerHTML = value;
         }
 
         if (text.startsWith('on:')) {
-          const [, type, ...rest] = text.split(':');
+          const [, type, ...restParts] = text.split(':');
           result.events.push({
             type: type.trim(),
-            action: rest.join(':').trim()
+            action: restParts.join(':').trim()
           });
         }
       });
@@ -93,4 +122,52 @@ function extractTag(code, startIndex) {
     block: code.slice(startIndex, i).trim(),
     nextIndex: i
   };
+}
+
+function extractBlock(code, startIndex) {
+  const open = code.indexOf('{', startIndex);
+  if (open === -1) {
+    return { block: "", nextIndex: startIndex };
+  }
+
+  let depth = 1;
+  let i = open + 1;
+
+  while (i < code.length && depth > 0) {
+    if (code[i] === '{') depth++;
+    if (code[i] === '}') depth--;
+    i++;
+  }
+
+  return {
+    block: code.slice(open + 1, i - 1),
+    nextIndex: i
+  };
+}
+
+function parseAttrs(block) {
+  const attrs = {};
+
+  block.split('\n').forEach(line => {
+    const text = line.trim();
+    if (!text) return;
+
+    // "type: "text"," 같은 마지막 콤마 제거
+    const cleaned = text.replace(/,\s*$/, '');
+    if (!cleaned.includes(':')) return;
+
+    const [key, ...rest] = cleaned.split(':');
+    let value = rest.join(':').trim();
+
+    if (
+      (value.startsWith('"') && value.endsWith('"')) ||
+      (value.startsWith("'") && value.endsWith("'"))
+    ) {
+      value = value.slice(1, -1);
+    }
+
+    attrs[key.trim()] = value;
+  });
+
+  return attrs;
 }

package/core/NeoCore.js

@@ -7,6 +7,32 @@ export class NeoCore {
       el.className = data.styles.join(' ');
     }
 
+    if (data.attrs && typeof data.attrs === 'object') {
+      for (const [key, value] of Object.entries(data.attrs)) {
+
+        // boolean attr
+        if (typeof value === 'boolean') {
+          el[key] = value;
+          continue;
+        }
+
+        // input 관련 핵심 property
+        if (
+          el instanceof HTMLInputElement ||
+          el instanceof HTMLTextAreaElement ||
+          el instanceof HTMLSelectElement
+        ) {
+          if (key in el) {
+            el[key] = value;
+            continue;
+          }
+        }
+
+        // fallback: 일반 attribute
+        el.setAttribute(key, String(value));
+      }
+    }
+
     // 1️⃣ 텍스트 먼저
     if (data.innerHTML) {
       el.innerHTML = NeoCore.renderTemplate(data.innerHTML);

package/package.json

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

package/src/App.neo

@@ -23,6 +23,12 @@
       innerHTML: "Increase"
       on:click: Store.add()
     }
-  }
 
+    @input:input [hello] {
+      ::attrs: {
+        type: "text",
+        placeholder: "Neo"
+      }
+    }
+  }
 }