@junnyontop-pixel/neo-app 1.2.1 → 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,103 +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];
     }
 
-    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;
-
-        while (braceCount > 0 && endIndex < text.length) {
-            if (text[endIndex] === '{') braceCount++;
-            else if (text[endIndex] === '}') braceCount--;
-            endIndex++;
+    // 2. [style, style]
+    const styleMatch = rawCode.match(/\[(.*?)\]/);
+    if (styleMatch) {
+      result.styles = styleMatch[1]
+        .split(',')
+        .map(s => s.trim())
+        .filter(Boolean);
+    }
+
+    // 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);
-
-        // --- [여기서부터가 핵심 수정 부위!] ---
-
-        // 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;
+    return result;
+  }
+
+  // ⭐ 핵심: #Script depth 파서
+  static extractScript(rawCode) {
+    const start = rawCode.indexOf('#Script');
+    if (start === -1) {
+      return { script: '', rest: rawCode };
+    }
+
+    const open = rawCode.indexOf('{', start);
+    if (open === -1) {
+      return { script: '', rest: rawCode };
     }
 
-    // 콜론(:)이 여러 개 들어있어도 안 깨지게 보강!
-    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;
+    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,71 +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;
-            }
-        });
-    }
-
-    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 = []) {
+  static create(data, ctx) {
+    const tag = data.tag && data.tag.trim() ? data.tag : 'div';
     const el = document.createElement(tag);
 
-    // 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) && data.styles.length > 0) {
+      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;
+    // ⭐ 상태 삽입 ($template)
+    el.innerHTML = NeoCore.renderTemplate(data.innerHTML, ctx);
 
-        // 이벤트 리스너 처리
-        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 {
+          // ctx 기준 실행
+          const run = new Function('ctx', `
+            with (ctx) {
+              ${evt.action}
+            }
+          `);
+          run(ctx);
 
-    // 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("이벤트 실행 에러:", 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.1",
+  "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,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/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( }, []);
-}