@junnyontop-pixel/neo-app 1.2.1 → 2.1.0

package/README.md

@@ -1,5 +1,11 @@
-# NeoVGC 사용법
+## Neo v2
 
-1. `.neo` 파일을 작성합니다.
-2. `npx neoc src/App.neo`를 실행하여 컴파일합니다.
-3. 생성된 `App.js`를 HTML에서 불러옵니다.
+Neo v2 is a runtime-first DSL framework.
+
+- No build step
+- No compiler
+- Runtime parsing
+- Script + UI separation
+- State-driven rendering (full rerender)
+
+Nested components and partial reactivity are planned for v2.x+.

package/compiler/NeoParser.js

@@ -1,103 +1,58 @@
 export class NeoParser {
-    static parse(source) {
-        let scriptContent = "";
-        const scriptMatch = source.match(/@Script\s*\{([\s\S]*?)\}/);
-        if (scriptMatch) scriptContent = scriptMatch[1].trim();
-
-        const cleanSource = source.replace(/@Script\s*\{[\s\S]*?\}/, "").trim();    
-        const root = this.parseRecursive(cleanSource);
-        return { root, scriptContent };
+  static parse(rawCode) {
+    const result = {
+      id: "",
+      tag: "",
+      styles: [],
+      innerHTML: "",
+      events: []
+    };
+
+    // @ID:Tag
+    const tagMatch = rawCode.match(/@([\w-]+):([\w-]+)/);
+    if (tagMatch) {
+      result.id = tagMatch[1];
+      result.tag = tagMatch[2];
     }
 
-    static parseRecursive(text) {
-        const tagRegex = /@(\w+):(\w+)\s*\{/g;
-        let match = tagRegex.exec(text);
-        if (!match) return null;
-
-        const node = {
-            id: match[1],
-            tag: match[2],
-            styles: {},
-            events: {},
-            props: {},
-            innerHtml: "",
-            children: []
-        };
-
-        const startIndex = match.index + match[0].length;
-        let braceCount = 1;
-        let endIndex = startIndex;
+    // [styles]
+    const styleMatch = rawCode.match(/\[(.*?)\]/);
+    if (styleMatch) {
+      result.styles = styleMatch[1]
+        .split(',')
+        .map(s => s.trim())
+        .filter(Boolean);
+    }
 
-        while (braceCount > 0 && endIndex < text.length) {
-            if (text[endIndex] === '{') braceCount++;
-            else if (text[endIndex] === '}') braceCount--;
-            endIndex++;
+    // { content }
+    const contentMatch = rawCode.match(/\{([\s\S]*?)\}$/);
+    if (contentMatch) {
+      const lines = contentMatch[1].trim().split('\n');
+
+      lines.forEach(line => {
+        const text = line.trim();
+
+        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;
         }
 
-        const blockContent = text.substring(startIndex, endIndex - 1);
-
-        // --- [여기서부터가 핵심 수정 부위!] ---
-
-        // 1. 자식 태그(@)가 시작되는 위치를 찾음
-        const firstChildIndex = blockContent.indexOf('@');
-        
-        // 2. 자식이 나오기 전까지만 "내 설정 구역"으로 정의 (자식 데이터 보호)
-        const settingsZone = firstChildIndex === -1 
-            ? blockContent 
-            : blockContent.substring(0, firstChildIndex);
-
-        // 3. 속성 추출은 오직 settingsZone에서만! (s 플래그 추가해서 줄바꿈 허용)
-        const htmlMatch = settingsZone.match(/innerHTML:\s*"([\s\S]*?)"/i);
-        if (htmlMatch) node.innerHtml = htmlMatch[1].trim();
-
-        const styleMatch = settingsZone.match(/Style\(([\s\S]*?)\)/si);
-        if (styleMatch) node.styles = this.parseKV(styleMatch[1]);
-
-        const eventMatch = settingsZone.match(/Event\(([\s\S]*?)\)/si);
-        if (eventMatch) node.events = this.parseKV(eventMatch[1]);
-
-        const propsMatch = settingsZone.match(/Props\(([\s\S]*?)\)/si);
-        if (propsMatch) node.props = this.parseKV(propsMatch[1]);
-
-        // 4. 자식 노드 탐색 (원본 blockContent에서 자식 구역만 탐색)
-        if (firstChildIndex !== -1) {
-            const childrenZone = blockContent.substring(firstChildIndex);
-            const childRegex = /@(\w+):(\w+)\s*\{/g;
-            let childMatch;
-
-            while ((childMatch = childRegex.exec(childrenZone)) !== null) {
-                // 자식의 전체 텍스트를 재귀적으로 파싱
-                const childNode = this.parseRecursive(childrenZone.substring(childMatch.index));
-                if (childNode) {
-                    node.children.push(childNode);
-                    
-                    // 자식의 중괄호가 끝나는 지점을 찾아서 다음 검색 위치 조정
-                    let bc = 1;
-                    let i = childrenZone.indexOf('{', childMatch.index) + 1;
-                    while (bc > 0 && i < childrenZone.length) {
-                        if (childrenZone[i] === '{') bc++;
-                        else if (childrenZone[i] === '}') bc--;
-                        i++;
-                    }
-                    childRegex.lastIndex = i; // 이 자식 이후부터 다음 자식 찾기
-                }
-            }
+        if (text.startsWith('on:')) {
+          const [, type, ...rest] = text.split(':');
+          result.events.push({
+            type: type.trim(),
+            action: rest.join(':').trim()
+          });
         }
-
-        return node;
+      });
     }
 
-    // 콜론(:)이 여러 개 들어있어도 안 깨지게 보강!
-    static parseKV(kvString) {
-        if (!kvString) return {};
-        const obj = {};
-        kvString.split(';').forEach(pair => {
-            const colonIndex = pair.indexOf(':');
-            if (colonIndex === -1) return;
-            const key = pair.substring(0, colonIndex).trim();
-            const value = pair.substring(colonIndex + 1).trim();
-            if (key && value) obj[key] = value;
-        });
-        return obj;
-    }
+    return result;
+  }
 }

package/compiler/main.js

@@ -0,0 +1,37 @@
+import { NeoParser } from './NeoParser.js';
+import { NeoCore } from '../core/NeoCore.js';
+
+let currentPath = 'App.neo';
+
+async function render() {
+  const app = document.getElementById('app');
+
+  try {
+    const response = await fetch(`../src/${currentPath}`);
+    const rawCode = await response.text();
+
+    const parsed = NeoParser.parse(rawCode);
+    const ui = NeoCore.create(parsed);
+
+    app.replaceChildren(ui);
+  } catch (e) {
+    app.innerHTML = `<pre style="color:red">${e.message}</pre>`;
+    console.error(e);
+  }
+}
+
+// async function loadUserCode(path) {
+//   const res = await fetch(path);
+//   const code = await res.text();
+
+//   // ⭐ window 스코프에서 실행
+//   new Function(`
+//     with (window) {
+//       ${code}
+//     }
+//   `)();
+// }
+
+window.__neoRender = render;
+// await loadUserCode('../src/actions.js');
+render();

package/core/NeoCore.js

@@ -1,71 +1,36 @@
 export class NeoCore {
-    constructor(state, rootRenderFn, containerId) {
-        this.container = document.getElementById(containerId);
-        this.rootRenderFn = rootRenderFn;
-        
-        this.state = new Proxy(state, {
-            set: (target, key, value) => {
-                target[key] = value;
-                this.mount(); 
-                return true;
-            }
-        });
-    }
-
-    mount() {
-        if (!this.container) return;
-        this.container.innerHTML = ''; 
-        const domTree = this.rootRenderFn(this.state);
-        if (domTree) this.container.appendChild(domTree); // domTree가 있을 때만 추가
-    }
-}
-
-export function h(tag, props, children = []) {
-    const el = document.createElement(tag);
+  static create(data) {
+    const el = document.createElement(data.tag || 'div');
 
-    // 1. 스타일은 Object.assign으로 안전하게 한 번에 넣기
-    if (props.style) Object.assign(el.style, props.style);
-    
-    // 2. [Neo 철학] innerHTML을 '먼저' 설정
-    // 이렇게 해야 나중에 appendChild로 들어오는 자식들이 이 텍스트 '뒤에' 붙을 수 있어
-    const content = props.innerHTML || props.innerHtml;
-    if (content !== undefined) {
-        el.innerHTML = content;
+    if (data.id) el.id = data.id;
+    if (Array.isArray(data.styles)) {
+      el.className = data.styles.join(' ');
     }
 
-    // 3. 속성 및 이벤트 처리
-    Object.keys(props).forEach(key => {
-        const reserved = ['id', 'style', 'innerHTML', 'innerHtml'];
-        
-        // 이미 처리한 예약어(id, style, html)는 건너뛰기
-        if (reserved.includes(key)) return;
+    el.innerHTML = NeoCore.renderTemplate(data.innerHTML);
 
-        // 이벤트 리스너 처리
-        if (key.startsWith('on') && typeof props[key] === 'function') {
-            const eventType = key.toLowerCase().substring(2); 
-            el.addEventListener(eventType, props[key]);
-        } 
-        // 일반 속성(type, placeholder, class 등) 처리
-        else {
-            el.setAttribute(key, props[key]);
-        }
-    });
+    (data.events || []).forEach(evt => {
+      el.addEventListener(evt.type, () => {
+        try {
+          new Function(evt.action)();
 
-    // 4. 자식 요소들 붙이기
-    const flattenChildren = Array.isArray(children) ? children.flat() : [children];
-    
-    flattenChildren.forEach(child => {
-        if (child === null || child === undefined) return;
-        
-        // 자식이 실제 DOM 노드(태그)인 경우에만 추가
-        if (child instanceof HTMLElement || child instanceof Node) {
-            el.appendChild(child);
-        } 
-        // 혹시나 문자열이 자식으로 들어왔을 때를 대비한 안전장치 (필요시)
-        else if (typeof child === 'string' || typeof child === 'number') {
-            el.appendChild(document.createTextNode(String(child)));
+          if (window.__neoRender) {
+            window.__neoRender();
+          }
+        } catch (e) {
+          console.error("Neo Event Error:", e);
         }
+      });
     });
 
     return el;
+  }
+
+  static renderTemplate(template = "") {
+    return template.replace(/\$([\w.]+)/g, (_, path) => {
+      return path
+        .split('.')
+        .reduce((obj, key) => obj?.[key], window) ?? '';
+    });
+  }
 }

package/index.html

@@ -1,19 +1,21 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Neo App</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
 <body>
-    <div id="app"></div>
-    <script type="module">
-        import { NeoCore } from './core/NeoCore.js';
-        import render from './src/App.js'; // 컴파일러가 만든 결과물!
+  <div id="app"></div>
 
-        const state = { count: 0, name: "NeoVGC" };
-        const neo = new NeoCore(state, render, 'app');
-        neo.mount();
+  <!-- 유저 로직 (ESM) -->
+  <script type="module">
+    import './src/state.js';
+    import './src/actions.js';
+  </script>
 
-        // 버튼 클릭 이벤트 (임시 연결)
-        document.addEventListener('click', (e) => {
-            if(e.target.id === 'Btn') neo.state.count++;
-        });
-    </script>
+  <!-- Neo 런타임 -->
+  <script type="module" src="./compiler/main.js"></script>
 </body>
 </html>

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@junnyontop-pixel/neo-app",
-  "version": "1.2.1",
+  "version": "2.1.0",
   "description": "나만의 커스텀 프레임워크 Neo",
   "main": "core/NeoCore.js",
   "type": "module",
   "bin": {
-    "neoc": "compiler/index.js",
     "neoc-init": "scripts/init.js"
   },
   "files": [
@@ -17,7 +16,6 @@
     "README.md"
   ],
   "scripts": {
-    "prepare": "node compiler/index.js src/App.neo",
     "build": "node compiler/index.js src/App.neo",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

package/src/App.neo

@@ -1,10 +1,4 @@
-@Script {
-    function sayHello() {
-        alert("안녕하세요!");
-    }
-}
-
-@Btn:button {
-    Innerhtml: "인사하기";
-    Event( click: sayHello() )
+@Btn:button [px-4, py-2, bg-black, text-white, rounded] {
+  innerHTML: "현재 숫자: $Store.count"
+  on:click: Store.add()
 }

package/src/actions.js

@@ -0,0 +1,3 @@
+import { Store } from './state.js';
+
+window.Store = Store;

package/src/state.js

@@ -0,0 +1,9 @@
+const add = () => {
+  Store.count++;
+};
+
+export const Store = {
+  count: 0,
+
+  add
+};

package/compiler/index.js

@@ -1,81 +0,0 @@
-#!/usr/bin/env node
-import fs from 'fs';
-import path from 'path';
-import { NeoParser } from './NeoParser.js';
-
-// 1. 입력 파일 경로 확인
-const inputFile = process.argv[2];
-
-if (!inputFile) {
-    console.error("❌ 컴파일할 .neo 파일을 입력해주세요. (예: npx neoc src/App.neo)");
-    process.exit(1);
-}
-
-// 2. 소스 코드 읽기 및 파싱
-try {
-    const source = fs.readFileSync(inputFile, 'utf8');
-    const { root, scriptContent } = NeoParser.parse(source);
-
-    if (!root) {
-        throw new Error("파싱 결과가 비어있습니다. .neo 파일의 형식을 확인해주세요.");
-    }
-
-    // 3. 코드 생성 함수 (재귀 구조)
-    function generateCode(node, indent = "    ") {
-        // 1. 자식들은 태그들만 (글자는 여기서 완전히 제외!)
-        const childrenCode = node.children
-            .map(child => generateCode(child, indent + "    "))
-            .join(',\n');
-
-        // 2. 속성 객체 만들기 (스타일도 여기에 포함!)
-        const mergedProps = {
-            id: node.id,
-            style: node.styles, // 스타일을 객체 안으로 넣음
-            ...node.props
-        };
-
-        // 3. innerHTML이 있으면 객체에 추가
-        if (node.innerHtml) {
-            const processedText = node.innerHtml.replace(/\$(\w+)/g, '${state.$1}');
-            mergedProps.innerHTML = `__BT__${processedText}__BT__`;
-        }
-
-        // 4. 이벤트 처리
-        const eventProps = Object.entries(node.events).map(([evt, action]) => {
-            const propName = `on${evt.charAt(0).toUpperCase() + evt.slice(1)}`;
-            let processedAction = action.replace(/\$(\w+)/g, 'state.$1');
-            return `"${propName}": () => { ${processedAction} }`;
-        }).join(`,\n${indent}        `);
-
-        // 5. Props 객체를 문자열로 바꾸고 백틱 마법 적용
-        let propsContent = JSON.stringify(mergedProps, null, 4)
-            .replace(/"__BT__(.*?)__BT__"/g, '`$1`');
-
-        // 6. 최종 h 함수 호출 (글자 노드 없이 childrenCode만 넣음)
-        return `${indent}h('${node.tag}', ${propsContent.replace(/\n/g, '\n' + indent)}${eventProps ? ',\n' + indent + '    ' + eventProps : ''}, [${childrenCode ? '\n' + childrenCode + '\n' + indent : ''}])`;
-    }
-
-// render 함수 생성 부분
-const finalJS = `
-import { h } from '@junnyontop-pixel/neo-app/core/NeoCore.js';
-
-export default function render(state) {
-    // 값이 없을 때만 초기화 (중요: 매번 0으로 덮어쓰지 않음)
-    if (state.count === undefined) state.count = 0;
-    if (state.title === undefined) state.title = "hello, neo";
-
-    return ${generateCode(root).trimStart()};
-}
-`.trim();
-
-    // 5. .js 파일로 저장
-    const outputPath = inputFile.replace('.neo', '.js');
-    fs.writeFileSync(outputPath, finalJS);
-
-    console.log(`✅ [컴파일 성공] -> ${outputPath}`);
-
-} catch (err) {
-    console.error("❌ 컴파일 중 에러 발생:");
-    console.error(err.message);
-    process.exit(1);
-}

package/scripts/init.js

@@ -1,54 +0,0 @@
-#!/usr/bin/env node
-import fs from 'fs';
-import path from 'path';
-
-// 1. 템플릿 정의
-const htmlContent = `<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>My Neo App</title>
-</head>
-<body>
-    <div id="app"></div>
-    <script type="module">
-        import { NeoCore } from '@junnyontop-pixel/neo-app/core/NeoCore.js';
-        import render from './src/App.js';
-
-        const state = { title: "Hello Neo!", count: 0 };
-        new NeoCore(state, render, 'app').mount();
-    </script>
-</body>
-</html>`;
-
-const neoContent = `@Script {
-    // Logic here
-}
-
-@Main:div {
-    Innerhtml: "🚀 $title"
-    Style(padding: 20px; text-align: center; font-family: sans-serif)
-
-    @Counter:button {
-        Innerhtml: "클릭 수: $count"
-        Style(background: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer)
-        Event(click: $count++)
-    }
-}`;
-
-// 2. 파일 생성 로직
-const targetDir = process.cwd(); // 명령어를 실행한 현재 폴더
-
-try {
-    if (!fs.existsSync(path.join(targetDir, 'src'))) {
-        fs.mkdirSync(path.join(targetDir, 'src'));
-    }
-    
-    fs.writeFileSync(path.join(targetDir, 'index.html'), htmlContent);
-    fs.writeFileSync(path.join(targetDir, 'src/App.neo'), neoContent);
-    
-    console.log("✅ [Neo] index.html 및 src/App.neo 생성이 완료되었습니다!");
-    console.log("👉 이제 'npx neoc src/App.neo'를 실행하여 첫 컴파일을 완료하세요.");
-} catch (err) {
-    console.error("❌ 초기화 중 에러 발생:", err.message);
-}

package/src/App.js

@@ -1,14 +0,0 @@
-import { h } from '@junnyontop-pixel/neo-app/core/NeoCore.js';
-
-export default function render(state) {
-    // 값이 없을 때만 초기화 (중요: 매번 0으로 덮어쓰지 않음)
-    if (state.count === undefined) state.count = 0;
-    if (state.title === undefined) state.title = "hello, neo";
-
-    return h('button', {
-        "id": "Btn",
-        "style": {},
-        "innerHTML": `인사하기`
-    },
-        "onClick": () => { sayHello( }, []);
-}