@junnyontop-pixel/neo-app 1.2.0 → 2.0.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,101 +1,98 @@
 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: "",
+      script: "",
+      styles: [],
+      innerHTML: "",
+      events: []
+    };
+
+    // 0. #Script 블록 분리 (depth 기반)
+    const extracted = NeoParser.extractScript(rawCode);
+    result.script = extracted.script;
+    rawCode = extracted.rest;
+
+    // 1. @ID:Tag
+    const tagMatch = rawCode.match(/@([\w-]+):([\w-]+)/);
+    if (tagMatch) {
+      result.id = tagMatch[1];
+      result.tag = tagMatch[2];
+    }
+
+    // 2. [style, style]
+    const styleMatch = rawCode.match(/\[(.*?)\]/);
+    if (styleMatch) {
+      result.styles = styleMatch[1]
+        .split(',')
+        .map(s => s.trim())
+        .filter(Boolean);
     }
 
-    static parseRecursive(text) {
-        // @ID:TAG { ... } 구조를 찾는 정규식
-        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;
-
-        while (braceCount > 0 && endIndex < text.length) {
-            if (text[endIndex] === '{') braceCount++;
-            else if (text[endIndex] === '}') braceCount--;
-            endIndex++;
+    // 3. { content } (UI 블록)
+    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);
-
-        const contentWithoutChildren = blockContent.replace(/@\w+:\w+\s*\{[\s\S]*?\}/g, "");
-
-        // 1. 블록 내부에서 속성 추출 (Innerhtml, Style, Event)
-        // 줄바꿈과 대소문자를 무시하고 " " 사이의 값을 정확히 가져옴
-        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 = 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(/Style\(.*?\)/si, "")
-            .replace(/Event\(.*?\)/si, "");
-
-        let childMatch;
-        const childRegex = /@\w+:\w+\s*\{/g;
-        while ((childMatch = childRegex.exec(remainingText)) !== null) {
-            // 자식의 시작 지점부터 다시 재귀 실행
-            const childNode = this.parseRecursive(remainingText.substring(childMatch.index));
-            if (childNode) {
-                node.children.push(childNode);
-                
-                // 자식 노드의 끝 지점을 찾아서 다음 검색 위치를 조정
-                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;
-            }
+        if (text.startsWith('on:')) {
+          const [, type, ...rest] = text.split(':');
+          result.events.push({
+            type: type.trim(),
+            action: rest.join(':').trim()
+          });
         }
+      });
+    }
+
+    return result;
+  }
 
-        return node;
+  // ⭐ 핵심: #Script depth 파서
+  static extractScript(rawCode) {
+    const start = rawCode.indexOf('#Script');
+    if (start === -1) {
+      return { script: '', rest: rawCode };
     }
 
-    static parseKV(kvString) {
-        if (!kvString) return {};
-        const obj = {};
-        kvString.split(';').forEach(pair => {
-            const [key, value] = pair.split(':').map(s => s.trim());
-            if (key && value) obj[key] = value;
-        });
-        return obj;
+    const open = rawCode.indexOf('{', start);
+    if (open === -1) {
+      return { script: '', rest: rawCode };
     }
+
+    let depth = 1;
+    let i = open + 1;
+
+    while (i < rawCode.length && depth > 0) {
+      if (rawCode[i] === '{') depth++;
+      if (rawCode[i] === '}') depth--;
+      i++;
+    }
+
+    const script = rawCode.slice(open + 1, i - 1);
+    const rest =
+      rawCode.slice(0, start) + rawCode.slice(i);
+
+    return {
+      script: script.trim(),
+      rest: rest.trim()
+    };
+  }
 }

package/compiler/main.js

@@ -0,0 +1,50 @@
+import { NeoParser } from './NeoParser.js';
+import { NeoCore } from '../core/NeoCore.js';
+
+// 현재 페이지
+let currentPath = 'App.neo';
+let pageCtx = null;   // ⭐ 추가
+
+async function render() {
+  const app = document.getElementById('app');
+
+  try {
+    const response = await fetch(`../src/${currentPath}`);
+    if (!response.ok) {
+      throw new Error(`Failed to load ${currentPath}`);
+    }
+
+    const rawCode = await response.text();
+
+    // Parser
+    const parsedData = NeoParser.parse(rawCode);
+
+    // ⭐ 최초 1회만 Script 실행
+    if (!pageCtx) {
+      pageCtx = NeoCore.createScriptContext(parsedData.script);
+      console.log("CTX (init):", pageCtx);
+    }
+
+    // UI 생성
+    const ui = NeoCore.create(parsedData, pageCtx);
+
+    // 화면 교체
+    app.replaceChildren(ui);
+
+    console.log(`🚀 ${currentPath} 렌더링 완료`);
+  } catch (err) {
+    console.error("렌더링 중 에러 발생:", err);
+    app.innerHTML = `<pre style="color:red">${err.message}</pre>`;
+  }
+}
+
+// 전역 네비게이션
+window.neoNavigate = (path) => {
+  if (path === currentPath) return;
+  currentPath = path;
+  render();
+};
+
+// 최초 렌더
+window.__neoRender = render;
+render();

package/core/NeoCore.js

@@ -1,61 +1,85 @@
 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;
-            }
-        });
-    }
+  static create(data, ctx) {
+    const tag = data.tag && data.tag.trim() ? data.tag : 'div';
+    const el = document.createElement(tag);
 
-    mount() {
-        if (!this.container) return;
-        this.container.innerHTML = ''; 
-        const domTree = this.rootRenderFn(this.state);
-        this.container.appendChild(domTree);
+    if (data.id) el.id = data.id;
+    if (Array.isArray(data.styles) && data.styles.length > 0) {
+      el.className = data.styles.join(" ");
     }
-}
 
-export function h(tag, props, children = []) {
-    const el = document.createElement(tag);
+    // ⭐ 상태 삽입 ($template)
+    el.innerHTML = NeoCore.renderTemplate(data.innerHTML, ctx);
 
-    if (props.id) el.id = props.id;
-    if (props.style) Object.assign(el.style, props.style);
-    
-    // 컴파일러가 주는 innerHTML과 파서가 주는 innerHtml 모두 대응
-    // const content = props.innerHTML || props.innerHtml;
-    // if (content !== undefined) {
-    //     el.innerHTML = content;
-    // }
-
-    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]);
-        }
-    });
+    (data.events || []).forEach(evt => {
+      el.addEventListener(evt.type, () => {
+        try {
+          // ctx 기준 실행
+          const run = new Function('ctx', `
+            with (ctx) {
+              ${evt.action}
+            }
+          `);
+          run(ctx);
 
-    const flattenChildren = Array.isArray(children) ? children.flat() : [children];
-    
-    flattenChildren.forEach(child => {
-        if (child === null || child === undefined) return;
-        if (child instanceof HTMLElement) {
-            el.appendChild(child);
-        } else {
-            el.appendChild(document.createTextNode(String(child)));
+          if (window.__neoRender) {
+            window.__neoRender();
+          }
+        } catch (e) {
+          console.error("이벤트 실행 에러:", e);
         }
+      });
     });
 
     return el;
+  }
+
+  static createScriptContext(scriptCode = "") {
+    const ctx = {};
+
+    try {
+      const transformed = NeoCore.transformScript(scriptCode);
+      console.log("🔁 transformed script:\n", transformed);
+
+      const runner = new Function('ctx', transformed);
+      runner(ctx);
+
+      console.log("🧠 ctx after script:", ctx);
+    } catch (e) {
+      console.error("Script 실행 에러:", e);
+    }
+
+    return ctx;
+  }
+
+  static renderTemplate(template, ctx) {
+    if (!template) return "";
+    if (!ctx) return template;
+
+    return template.replace(/\$([\w]+)/g, (_, key) =>
+      Object.prototype.hasOwnProperty.call(ctx, key)
+        ? ctx[key]
+        : ""
+    );
+  }
+
+  // ⭐ let / const → ctx.xxx 브리지
+  static transformScript(code = "") {
+    return code
+      // let / const → ctx.xxx
+      .replace(
+        /\b(let|const)\s+([a-zA-Z_$][\w$]*)\s*=/g,
+        'ctx.$2 ='
+      )
+      // function add() { → ctx.add = function () {
+      .replace(
+        /\bfunction\s+([a-zA-Z_$][\w$]*)\s*\(\)\s*\{/g,
+        'ctx.$1 = function () {'
+      )
+      // count++ → ctx.count++
+      .replace(
+        /\b([a-zA-Z_$][\w$]*)\s*\+\+/g,
+        'ctx.$1++'
+      );
+  }
 }

package/index.html

@@ -1,19 +1,13 @@
 <!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'; // 컴파일러가 만든 결과물!
-
-        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>
+    <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.0",
+  "version": "2.0.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/scripts/init.js

@@ -4,35 +4,38 @@ import path from 'path';
 
 // 1. 템플릿 정의
 const htmlContent = `<!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>My Neo App</title>
+    <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 '@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>
+    <script type="module" src="./compiler/main.js"></script>
 </body>
 </html>`;
 
-const neoContent = `@Script {
-    // Logic here
+const neoContent = `#Script {
+    let count = 0;
+    const add = () => count++;
 }
 
-@Main:div {
-    Innerhtml: "🚀 $title"
-    Style(padding: 20px; text-align: center; font-family: sans-serif)
+@Main:div [flex, flex-col, items-center, p-10, bg-white] {
+    
+    @Title:h1 [text-3xl, font-bold] { 
+        innerHTML: "Neo v2 New Syntax" 
+    }
+
+    @Counter:p [my-4, text-blue-500] { 
+        innerHTML: "현재 숫자: $count" 
+    }
 
-    @Counter:button {
-        Innerhtml: "클릭 수: $count"
-        Style(background: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer)
-        Event(click: $count++)
+    @UpBtn:button [px-4, py-2, bg-black, text-white, rounded] { 
+        innerHTML: "증가"
+        on:click: add()
+        on:mouseover: console.log('hovered!')
     }
 }`;
 
@@ -48,7 +51,7 @@ try {
     fs.writeFileSync(path.join(targetDir, 'src/App.neo'), neoContent);
     
     console.log("✅ [Neo] index.html 및 src/App.neo 생성이 완료되었습니다!");
-    console.log("👉 이제 'npx neoc src/App.neo'를 실행하여 첫 컴파일을 완료하세요.");
+    console.log("👉 Neo v2는 컴파일할 필요가 없습니다!");
 } catch (err) {
     console.error("❌ 초기화 중 에러 발생:", err.message);
 }

package/src/App.neo

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

package/compiler/index.js

@@ -1,80 +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 = "    ") {
-
-        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}        `);
-
-        const mergedProps = {
-            id: node.id,
-            ...node.props
-        };
-
-        const propsContent = JSON.stringify(mergedProps).slice(1, -1);
-
-        return `${indent}h('${node.tag}', {
-        ${indent}    style: ${JSON.stringify(node.styles)},
-        ${indent}    ${propsContent}${eventProps ? ',\n' + indent + '    ' + eventProps : ''}
-        ${indent}}, [${allChildren ? '\n' + allChildren + '\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/src/App.js

@@ -1,15 +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', {
-                style: {},
-                "id":"Btn",
-        onClick: () => { sayHello( }
-            }, [
-`인사하기`
-    ]);
-}