@junnyontop-pixel/neo-app 2.0.0 → 2.1.0

package/compiler/NeoParser.js

@@ -3,25 +3,19 @@ export class NeoParser {
     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
+    // @ID:Tag
     const tagMatch = rawCode.match(/@([\w-]+):([\w-]+)/);
     if (tagMatch) {
       result.id = tagMatch[1];
       result.tag = tagMatch[2];
     }
 
-    // 2. [style, style]
+    // [styles]
     const styleMatch = rawCode.match(/\[(.*?)\]/);
     if (styleMatch) {
       result.styles = styleMatch[1]
@@ -30,7 +24,7 @@ export class NeoParser {
         .filter(Boolean);
     }
 
-    // 3. { content } (UI 블록)
+    // { content }
     const contentMatch = rawCode.match(/\{([\s\S]*?)\}$/);
     if (contentMatch) {
       const lines = contentMatch[1].trim().split('\n');
@@ -40,15 +34,12 @@ export class NeoParser {
 
         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;
         }
 
@@ -64,35 +55,4 @@ export class NeoParser {
 
     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 };
-    }
-
-    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

@@ -1,50 +1,37 @@
 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);
+    const parsed = NeoParser.parse(rawCode);
+    const ui = NeoCore.create(parsed);
 
-    // 화면 교체
     app.replaceChildren(ui);
-
-    console.log(`🚀 ${currentPath} 렌더링 완료`);
-  } catch (err) {
-    console.error("렌더링 중 에러 발생:", err);
-    app.innerHTML = `<pre style="color:red">${err.message}</pre>`;
+  } catch (e) {
+    app.innerHTML = `<pre style="color:red">${e.message}</pre>`;
+    console.error(e);
   }
 }
 
-// 전역 네비게이션
-window.neoNavigate = (path) => {
-  if (path === currentPath) return;
-  currentPath = path;
-  render();
-};
+// 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,32 +1,24 @@
 export class NeoCore {
-  static create(data, ctx) {
-    const tag = data.tag && data.tag.trim() ? data.tag : 'div';
-    const el = document.createElement(tag);
+  static create(data) {
+    const el = document.createElement(data.tag || 'div');
 
     if (data.id) el.id = data.id;
-    if (Array.isArray(data.styles) && data.styles.length > 0) {
-      el.className = data.styles.join(" ");
+    if (Array.isArray(data.styles)) {
+      el.className = data.styles.join(' ');
     }
 
-    // ⭐ 상태 삽입 ($template)
-    el.innerHTML = NeoCore.renderTemplate(data.innerHTML, ctx);
+    el.innerHTML = NeoCore.renderTemplate(data.innerHTML);
 
     (data.events || []).forEach(evt => {
       el.addEventListener(evt.type, () => {
         try {
-          // ctx 기준 실행
-          const run = new Function('ctx', `
-            with (ctx) {
-              ${evt.action}
-            }
-          `);
-          run(ctx);
+          new Function(evt.action)();
 
           if (window.__neoRender) {
             window.__neoRender();
           }
         } catch (e) {
-          console.error("이벤트 실행 에러:", e);
+          console.error("Neo Event Error:", e);
         }
       });
     });
@@ -34,52 +26,11 @@ export class NeoCore {
     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++'
-      );
+  static renderTemplate(template = "") {
+    return template.replace(/\$([\w.]+)/g, (_, path) => {
+      return path
+        .split('.')
+        .reduce((obj, key) => obj?.[key], window) ?? '';
+    });
   }
 }

package/index.html

@@ -1,13 +1,21 @@
 <!DOCTYPE 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>
+  <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" src="./compiler/main.js"></script>
+  <div id="app"></div>
+
+  <!-- 유저 로직 (ESM) -->
+  <script type="module">
+    import './src/state.js';
+    import './src/actions.js';
+  </script>
+
+  <!-- Neo 런타임 -->
+  <script type="module" src="./compiler/main.js"></script>
 </body>
 </html>

package/package.json

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

package/src/App.neo

@@ -1,12 +1,4 @@
-#Script {
-    let count = 0
-
-    function add() {
-        count++
-    }
-}
-
-@Upbtn:button [px-4, py-2, bg-black, text-white, rounded]{
-    innerHTML: "현재 숫자: $count"
-    on:click: add()
+@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/scripts/init.js

@@ -1,57 +0,0 @@
-#!/usr/bin/env node
-import fs from 'fs';
-import path from 'path';
-
-// 1. 템플릿 정의
-const htmlContent = `<!DOCTYPE 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" src="./compiler/main.js"></script>
-</body>
-</html>`;
-
-const neoContent = `#Script {
-    let count = 0;
-    const add = () => count++;
-}
-
-@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" 
-    }
-
-    @UpBtn:button [px-4, py-2, bg-black, text-white, rounded] { 
-        innerHTML: "증가"
-        on:click: add()
-        on:mouseover: console.log('hovered!')
-    }
-}`;
-
-// 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("👉 Neo v2는 컴파일할 필요가 없습니다!");
-} catch (err) {
-    console.error("❌ 초기화 중 에러 발생:", err.message);
-}