@lithent/lithent-template-parser 0.1.0

package/src/playground/main.ts

@@ -0,0 +1,206 @@
+import './style.css';
+
+import { compile, parse, tokenize } from '..';
+
+declare global {
+  interface Window {
+    compile: typeof compile;
+    parse: typeof parse;
+    tokenize: typeof tokenize;
+  }
+}
+
+const defaultTemplate = `<div class="todo-list">
+  <h2>Todos ({todos.length})</h2>
+  <div l-for={(todo, index) in todos} class="todo-item">
+    <span l-if={todo.done}>✓</span>
+    <span>{index + 1}. {todo.text}</span>
+  </div>
+  <>
+    <p l-else>No todos yet!</p>
+  </>
+</div>`;
+
+const app = document.getElementById('app');
+
+if (!app) {
+  throw new Error('Playground root element not found');
+}
+
+app.innerHTML = `
+  <h1>Lithent Template Parser Playground</h1>
+  <p class="info">
+    템플릿을 수정하면서 토큰, AST, 생성된 코드를 실시간으로 확인하세요. 브라우저 개발자 도구에서 <code>compile</code>, <code>parse</code>, <code>tokenize</code>를 활용해 추가 디버깅도 가능합니다.
+  </p>
+  <div class="playground">
+    <div class="panel">
+      <div class="panel-header">
+        <span>Template 입력</span>
+        <span class="badge">입력</span>
+      </div>
+      <div class="panel-body">
+        <textarea id="template-input" spellcheck="false"></textarea>
+        <div class="error" id="template-error"></div>
+      </div>
+    </div>
+    <div class="output-group">
+      <div class="panel">
+        <div class="panel-header">
+          <span>생성된 코드</span>
+          <div>
+            <span class="badge">결과</span>
+            <button class="copy" data-target="code-output">Copy</button>
+          </div>
+        </div>
+        <div class="panel-body">
+          <pre id="code-output">// 결과가 여기에 표시됩니다.</pre>
+        </div>
+      </div>
+      <div class="panel">
+        <div class="panel-header">
+          <span>토큰</span>
+          <div>
+            <span class="badge" id="token-count">0 tokens</span>
+            <button class="copy" data-target="tokens-output">Copy</button>
+          </div>
+        </div>
+        <div class="panel-body">
+          <pre id="tokens-output">[]</pre>
+        </div>
+      </div>
+      <div class="panel">
+        <div class="panel-header">
+          <span>AST</span>
+          <div>
+            <span class="badge">Transformed</span>
+            <button class="copy" data-target="ast-output">Copy</button>
+          </div>
+        </div>
+        <div class="panel-body">
+          <pre id="ast-output">{}</pre>
+        </div>
+      </div>
+    </div>
+  </div>
+`;
+
+const templateInput = document.getElementById(
+  'template-input'
+) as HTMLTextAreaElement | null;
+const tokenBadge = document.getElementById('token-count');
+const tokensOutput = document.getElementById('tokens-output');
+const astOutput = document.getElementById('ast-output');
+const codeOutput = document.getElementById('code-output');
+const errorOutput = document.getElementById('template-error');
+
+if (
+  !templateInput ||
+  !tokenBadge ||
+  !tokensOutput ||
+  !astOutput ||
+  !codeOutput ||
+  !errorOutput
+) {
+  throw new Error('Playground UI 초기화에 실패했습니다.');
+}
+
+templateInput.value = defaultTemplate.trim();
+
+const circularReplacer = () => {
+  const seen = new WeakSet();
+  return (key: string, value: unknown) => {
+    if (key === '__conditionalGroup') {
+      return undefined;
+    }
+    if (typeof value === 'object' && value !== null) {
+      if (seen.has(value as object)) {
+        return '[Circular]';
+      }
+      seen.add(value as object);
+    }
+    return value;
+  };
+};
+
+const formatJSON = (value: unknown) =>
+  JSON.stringify(value, circularReplacer(), 2);
+
+const copyButtons = Array.from(
+  document.querySelectorAll<HTMLButtonElement>('button.copy')
+);
+copyButtons.forEach(button => {
+  button.addEventListener('click', async () => {
+    const targetId = button.dataset.target;
+    if (!targetId) return;
+
+    const target = document.getElementById(targetId);
+    if (!target) return;
+
+    try {
+      await navigator.clipboard.writeText(target.textContent ?? '');
+      const original = button.textContent;
+      button.textContent = 'Copied!';
+      setTimeout(() => {
+        button.textContent = original ?? 'Copy';
+      }, 1200);
+    } catch {
+      button.textContent = 'Failed';
+      setTimeout(() => {
+        button.textContent = 'Copy';
+      }, 1200);
+    }
+  });
+});
+
+let debounceTimer: number | undefined;
+
+const runCompilation = () => {
+  const template = templateInput.value;
+  errorOutput.textContent = '';
+
+  try {
+    const tokens = tokenize(template);
+    tokenBadge.textContent = `${tokens.length} tokens`;
+    tokensOutput.textContent = formatJSON(tokens);
+
+    let ast;
+    try {
+      ast = parse(tokens);
+      console.log('AST', ast);
+    } catch (parseError) {
+      astOutput.textContent = '{}';
+      codeOutput.textContent = '// 파싱에 실패했습니다.';
+      throw parseError;
+    }
+
+    const result = compile(template);
+
+    console.log(' - RESULT - ', result);
+
+    if (result.errors.length > 0) {
+      const [firstError] = result.errors;
+      errorOutput.textContent = `⚠️ ${firstError.message}`;
+    }
+
+    codeOutput.textContent = result.code || '// 생성된 코드가 없습니다.';
+    astOutput.textContent = formatJSON(result.ast ?? ast);
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    errorOutput.textContent = `⚠️ ${message}`;
+  }
+};
+
+const scheduleCompilation = () => {
+  if (debounceTimer !== undefined) {
+    window.clearTimeout(debounceTimer);
+  }
+  debounceTimer = window.setTimeout(runCompilation, 160);
+};
+
+templateInput.addEventListener('input', scheduleCompilation);
+
+// 초기 실행
+runCompilation();
+
+// 전역 디버깅을 위해 노출
+Object.assign(window, { compile, parse, tokenize });

package/src/playground/style.css

@@ -0,0 +1,135 @@
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  color-scheme: dark light;
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: #111;
+  color: #f1f5f9;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 2rem 3rem;
+}
+
+h1 {
+  font-size: 1.75rem;
+  margin: 0;
+}
+
+.playground {
+  display: grid;
+  gap: 1.5rem;
+}
+
+@media (min-width: 1080px) {
+  .playground {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+}
+
+.panel {
+  background: rgba(15, 23, 42, 0.9);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 0.75rem;
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.4);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.panel-header {
+  padding: 0.75rem 1rem;
+  background: rgba(30, 41, 59, 0.9);
+  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.panel-body {
+  padding: 1rem;
+  flex: 1;
+  overflow: auto;
+}
+
+textarea {
+  width: 100%;
+  min-height: 360px;
+  font: 0.95rem/1.4 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
+  color: inherit;
+  background: rgba(15, 23, 42, 0.7);
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  border-radius: 0.5rem;
+  padding: 0.9rem 1rem;
+  resize: vertical;
+}
+
+textarea:focus {
+  outline: 2px solid rgba(59, 130, 246, 0.5);
+}
+
+pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font: 0.9rem/1.45 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
+}
+
+.error {
+  color: #f87171;
+  font-size: 0.9rem;
+  margin-top: 0.75rem;
+}
+
+.badge {
+  font-size: 0.75rem;
+  color: rgba(226, 232, 240, 0.8);
+  background: rgba(51, 65, 85, 0.8);
+  padding: 0.2rem 0.5rem;
+  border-radius: 999px;
+}
+
+.output-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-height: 0;
+}
+
+.output-group .panel {
+  min-height: 280px;
+}
+
+.info {
+  font-size: 0.85rem;
+  color: rgba(148, 163, 184, 0.8);
+  margin-bottom: 0.5rem;
+}
+
+button.copy {
+  font-size: 0.75rem;
+  padding: 0.35rem 0.7rem;
+  border-radius: 999px;
+  border: none;
+  background: rgba(59, 130, 246, 0.2);
+  color: rgba(191, 219, 254, 0.95);
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+button.copy:hover {
+  background: rgba(59, 130, 246, 0.35);
+}

package/src/shims/babel-env.ts

@@ -0,0 +1,17 @@
+/**
+ * Ensure minimal Node-like globals for Babel packages in browser environments.
+ * Babel checks process.env for feature flags, so we provide a stub when absent.
+ */
+const globalObject: any = globalThis as any;
+
+if (typeof globalObject.process === 'undefined') {
+  globalObject.process = { env: {} };
+} else if (typeof globalObject.process.env === 'undefined') {
+  globalObject.process.env = {};
+}
+
+if (typeof globalObject.process.env.NODE_ENV === 'undefined') {
+  globalObject.process.env.NODE_ENV = 'development';
+}
+
+export {};