@junnyontop-pixel/neo-app 1.0.1

package/README.md

@@ -0,0 +1,5 @@
+# NeoVGC 사용법
+
+1. `.neo` 파일을 작성합니다.
+2. `npx neoc src/App.neo`를 실행하여 컴파일합니다.
+3. 생성된 `App.js`를 HTML에서 불러옵니다.

package/compiler/NeoParser.js

@@ -0,0 +1,54 @@
+export class NeoParser {
+    static parse(code) {
+        // 1. @Script 블록 추출 로직 개선
+        // 괄호를 포함해서 캡처한 뒤, 앞뒤 껍데기만 날리는 방식이 가장 안전합니다.
+        const scriptMatch = code.match(/@Script\s*\{([\s\S]*?)\}(?=\s*@|$)/);
+        let scriptContent = "";
+        
+        if (scriptMatch) {
+            scriptContent = scriptMatch[1].trim();
+            // 만약 사용자가 적은 마지막 } 가 잘려 나갔다면 복구하거나, 
+            // 원본에서 블록 전체를 가져오는 로직으로 보강
+        }
+
+        // 2. UI 요소 추출 (이 부분은 동일)
+        const uiCode = code.replace(/@Script\s*\{[\s\S]*?\}\s*/, "");
+        const tokenRegex = /(@\w+:\w+)|(Innerhtml:\s*".*?")|(Style\([\s\S]*?\))|(Event\([\s\S]*?\))|(\{)|(\})/g;
+        const tokens = uiCode.match(tokenRegex);
+        
+        const stack = [];
+        let root = null;
+
+        tokens.forEach(token => {
+            if (token.startsWith('@')) {
+                const [_, id, tag] = token.match(/@(\w+):(\w+)/);
+                const node = { id, tag, innerHtml: "", styles: {}, events: {}, children: [] };
+                if (stack.length > 0) stack[stack.length - 1].children.push(node);
+                else if (!root) root = node;
+                stack.push(node);
+            } else if (token === '}') {
+                stack.pop();
+            } else if (token.startsWith('Innerhtml')) {
+                stack[stack.length - 1].innerHtml = token.match(/"(.*?)"/)[1];
+            } else if (token.startsWith('Style')) {
+                stack[stack.length - 1].styles = this.parseKV(token.match(/Style\((.*?)\)/)[1]);
+            } else if (token.startsWith('Event')) {
+                stack[stack.length - 1].events = this.parseKV(token.match(/Event\((.*?)\)/)[1]);
+            }
+        });
+
+        return { root, scriptContent };
+    }
+
+    static parseKV(str) {
+        const obj = {};
+        str.split(';').forEach(line => {
+            const [k, v] = line.split(':').map(s => s?.trim());
+            if (k && v) {
+                const camelK = k.replace(/-([a-z])/g, g => g[1].toUpperCase());
+                obj[camelK] = v;
+            }
+        });
+        return obj;
+    }
+}

package/compiler/index.js

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path'; // 경로 처리를 위해 추가
+import { NeoParser } from './NeoParser.js';
+
+const inputFile = process.argv[2];
+
+// 인자가 없을 경우 에러 처리
+if (!inputFile) {
+    console.error("❌ 컴파일할 .neo 파일을 입력해주세요. (예: node index.js App.neo)");
+    process.exit(1);
+}
+
+const source = fs.readFileSync(inputFile, 'utf8');
+const { root, scriptContent } = NeoParser.parse(source);
+
+function generateCode(node) {
+    const childrenCode = node.children.map(child => generateCode(child)).join(', ');
+    
+    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} }`; 
+    }
+
+    const eventString = Object.entries(eventProps)
+        .map(([k, v]) => `${k}: ${v}`)
+        .join(', ');
+
+    return `h('${node.tag}', {
+        id: '${node.id}',
+        style: ${JSON.stringify(node.styles)},
+        innerHtml: \`${node.innerHtml.replace(/\$(\w+)/g, '${state.$1}')}\`${eventString ? ', ' + eventString : ''}
+    }, [${childrenCode}])`;
+}
+
+// compiler/index.js 내부
+const finalJS = `
+import { h } from './node_modules/@junnyontop-pixel/neo-app/core/NeoCore.js';
+
+// [User Script]
+${scriptContent}
+
+export default function render(state) {
+    return ${generateCode(root)};
+}
+`.trim();
+
+// 파일 생성 위치를 입력 파일과 동일한 위치의 .js로 지정
+const outputPath = inputFile.replace('.neo', '.js');
+fs.writeFileSync(outputPath, finalJS);
+
+console.log(`✅ [컴파일 완료] -> ${outputPath}`);

package/core/NeoCore.js

@@ -0,0 +1,52 @@
+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);
+        this.container.appendChild(domTree);
+    }
+}
+
+// 가상 노드를 DOM 요소로 바꾸는 함수
+export function h(tag, props, children = []) {
+    const el = document.createElement(tag);
+
+    // 1. ID 설정
+    if (props.id) el.id = props.id;
+
+    // 2. 스타일 설정
+    if (props.style) Object.assign(el.style, props.style);
+
+    // 3. 내용물 설정
+    if (props.innerHtml) el.innerHTML = props.innerHtml;
+
+    // 💡 4. 이벤트 연결 (이 부분이 빠져있을 거예요!)
+    // props에 on으로 시작하는 속성(onClick 등)이 있다면 이벤트를 등록합니다.
+    Object.keys(props).forEach(key => {
+        if (key.startsWith('on') && typeof props[key] === 'function') {
+            const eventType = key.toLowerCase().substring(2); // 'onClick' -> 'click'
+            el.addEventListener(eventType, props[key]);
+        }
+    });
+
+    // 5. 자식 요소 추가
+    children.forEach(child => {
+        if (child instanceof HTMLElement) {
+            el.appendChild(child);
+        }
+    });
+
+    return el;
+}

package/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<body>
+    <div id="app"></div>
+    <script type="module">
+        import { NeoCore } from './core/NeoCore.js';
+        import render from './src/App.js'; // 컴파일러가 만든 결과물!
+
+        const state = { count: 0, name: "NeoVGC" };
+        const neo = new NeoCore(state, render, 'app');
+        neo.mount();
+
+        // 버튼 클릭 이벤트 (임시 연결)
+        document.addEventListener('click', (e) => {
+            if(e.target.id === 'Btn') neo.state.count++;
+        });
+    </script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@junnyontop-pixel/neo-app",
+  "version": "1.0.1",
+  "description": "나만의 커스텀 프레임워크 Neo",
+  "main": "core/NeoCore.js",
+  "type": "module",
+  "bin": {
+    "neoc": "./compiler/index.js"
+  },
+  "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"
+  },
+  "keywords": [
+    "framework",
+    "neo",
+    "dsl"
+  ],
+  "author": "junnyontop-pixel",
+  "license": "MIT"
+}

package/src/App.js

@@ -0,0 +1,14 @@
+import { h } from './node_modules/@junnyontop-pixel/neo-app/core/NeoCore.js';
+
+// [User Script]
+function sayHello() {
+        alert("안녕하세요!");
+    }
+
+export default function render(state) {
+    return h('button', {
+        id: 'Btn',
+        style: {},
+        innerHtml: `인사하기`, onClick: () => { sayHello() }
+    }, []);
+}

package/src/App.neo

@@ -0,0 +1,10 @@
+@Script {
+    function sayHello() {
+        alert("안녕하세요!");
+    }
+}
+
+@Btn:button {
+    Innerhtml: "인사하기";
+    Event( click: sayHello() )
+}