@ttsc/playground 0.23.0 → 0.25.0

package/src/react/ConsoleViewer.tsx

@@ -1,121 +1,121 @@
-"use client";
-
-import type { JSX } from "react";
-
-import type { IConsoleMessage } from "../structures/IConsoleMessage";
-
-interface ConsoleViewerProps {
-  messages: IConsoleMessage[];
-  empty?: string;
-}
-
-export function ConsoleViewer({
-  messages,
-  empty = "No output yet. Click Execute to run the compiled JavaScript.",
-}: ConsoleViewerProps) {
-  if (messages.length === 0)
-    return (
-      <div className="flex h-full w-full items-center justify-center px-4 text-center font-mono text-[11px] text-slate-400">
-        {empty}
-      </div>
-    );
-  return (
-    <div className="h-full w-full overflow-auto p-3 font-mono text-[12px] leading-snug">
-      {messages.map((msg, i) => (
-        <div
-          key={i}
-          className="flex gap-2 border-b border-[#d8e7f4] py-1 last:border-b-0"
-        >
-          <span
-            className={`shrink-0 text-[10px] uppercase tracking-wider w-12 ${typeColor(
-              msg.type,
-            )}`}
-          >
-            {msg.type}
-          </span>
-          <span className="flex-1 whitespace-pre-wrap break-words text-slate-700">
-            {(Array.isArray(msg.value) ? msg.value : [msg.value]).map(
-              (arg, idx) => (
-                <span key={idx}>
-                  {idx > 0 ? " " : ""}
-                  {formatValue(arg)}
-                </span>
-              ),
-            )}
-          </span>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function typeColor(type: IConsoleMessage["type"]): string {
-  switch (type) {
-    case "error":
-      return "text-red-600";
-    case "warn":
-      return "text-amber-600";
-    case "info":
-      return "text-sky-700";
-    case "debug":
-      return "text-fuchsia-700";
-    case "dir":
-    case "table":
-      return "text-cyan-700";
-    default:
-      return "text-emerald-700";
-  }
-}
-
-function formatValue(value: unknown, depth = 0): JSX.Element {
-  if (typeof value === "string")
-    return <span className="text-amber-700">{JSON.stringify(value)}</span>;
-  if (typeof value === "number")
-    return <span className="text-purple-700">{String(value)}</span>;
-  if (typeof value === "boolean")
-    return <span className="text-sky-700">{String(value)}</span>;
-  if (value === null) return <span className="text-slate-500">null</span>;
-  if (value === undefined)
-    return <span className="text-slate-500">undefined</span>;
-  if (typeof value === "function")
-    return <span className="text-slate-500">[Function]</span>;
-  if (Array.isArray(value))
-    return (
-      <span>
-        [
-        {value.map((item, idx) => (
-          <span key={idx}>
-            {idx > 0 ? ", " : ""}
-            {formatValue(item, depth + 1)}
-          </span>
-        ))}
-        ]
-      </span>
-    );
-  if (value instanceof Error)
-    return (
-      <span className="text-red-700">
-        {value.name}: {value.message}
-      </span>
-    );
-  try {
-    const entries = Object.entries(value as Record<string, unknown>);
-    if (entries.length === 0) return <span>{"{}"}</span>;
-    if (depth > 4) return <span className="text-slate-500">[...]</span>;
-    return (
-      <span>
-        {"{"}
-        {entries.map(([k, v], idx) => (
-          <span key={k}>
-            {idx > 0 ? ", " : " "}
-            <span className="text-[#3178c6]">{k}</span>:{" "}
-            {formatValue(v, depth + 1)}
-          </span>
-        ))}
-        {" }"}
-      </span>
-    );
-  } catch {
-    return <span>{String(value)}</span>;
-  }
-}
+"use client";
+
+import type { JSX } from "react";
+
+import type { IConsoleMessage } from "../structures/IConsoleMessage";
+
+interface ConsoleViewerProps {
+  messages: IConsoleMessage[];
+  empty?: string;
+}
+
+export function ConsoleViewer({
+  messages,
+  empty = "No output yet. Click Execute to run the compiled JavaScript.",
+}: ConsoleViewerProps) {
+  if (messages.length === 0)
+    return (
+      <div className="flex h-full w-full items-center justify-center px-4 text-center font-mono text-[11px] text-slate-400">
+        {empty}
+      </div>
+    );
+  return (
+    <div className="h-full w-full overflow-auto p-3 font-mono text-[12px] leading-snug">
+      {messages.map((msg, i) => (
+        <div
+          key={i}
+          className="flex gap-2 border-b border-[#d8e7f4] py-1 last:border-b-0"
+        >
+          <span
+            className={`shrink-0 text-[10px] uppercase tracking-wider w-12 ${typeColor(
+              msg.type,
+            )}`}
+          >
+            {msg.type}
+          </span>
+          <span className="flex-1 whitespace-pre-wrap break-words text-slate-700">
+            {(Array.isArray(msg.value) ? msg.value : [msg.value]).map(
+              (arg, idx) => (
+                <span key={idx}>
+                  {idx > 0 ? " " : ""}
+                  {formatValue(arg)}
+                </span>
+              ),
+            )}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function typeColor(type: IConsoleMessage["type"]): string {
+  switch (type) {
+    case "error":
+      return "text-red-600";
+    case "warn":
+      return "text-amber-600";
+    case "info":
+      return "text-sky-700";
+    case "debug":
+      return "text-fuchsia-700";
+    case "dir":
+    case "table":
+      return "text-cyan-700";
+    default:
+      return "text-emerald-700";
+  }
+}
+
+function formatValue(value: unknown, depth = 0): JSX.Element {
+  if (typeof value === "string")
+    return <span className="text-amber-700">{JSON.stringify(value)}</span>;
+  if (typeof value === "number")
+    return <span className="text-purple-700">{String(value)}</span>;
+  if (typeof value === "boolean")
+    return <span className="text-sky-700">{String(value)}</span>;
+  if (value === null) return <span className="text-slate-500">null</span>;
+  if (value === undefined)
+    return <span className="text-slate-500">undefined</span>;
+  if (typeof value === "function")
+    return <span className="text-slate-500">[Function]</span>;
+  if (Array.isArray(value))
+    return (
+      <span>
+        [
+        {value.map((item, idx) => (
+          <span key={idx}>
+            {idx > 0 ? ", " : ""}
+            {formatValue(item, depth + 1)}
+          </span>
+        ))}
+        ]
+      </span>
+    );
+  if (value instanceof Error)
+    return (
+      <span className="text-red-700">
+        {value.name}: {value.message}
+      </span>
+    );
+  try {
+    const entries = Object.entries(value as Record<string, unknown>);
+    if (entries.length === 0) return <span>{"{}"}</span>;
+    if (depth > 4) return <span className="text-slate-500">[...]</span>;
+    return (
+      <span>
+        {"{"}
+        {entries.map(([k, v], idx) => (
+          <span key={k}>
+            {idx > 0 ? ", " : " "}
+            <span className="text-[#3178c6]">{k}</span>:{" "}
+            {formatValue(v, depth + 1)}
+          </span>
+        ))}
+        {" }"}
+      </span>
+    );
+  } catch {
+    return <span>{String(value)}</span>;
+  }
+}

package/src/react/DependencyProgressModal.tsx

@@ -1,73 +1,73 @@
-"use client";
-
-import type { IPlaygroundDependencyProgress } from "../structures/IPlaygroundDependencyProgress";
-
-interface DependencyProgressModalProps {
-  progress: IPlaygroundDependencyProgress | null;
-  packages: readonly string[];
-}
-
-export function DependencyProgressModal({
-  progress,
-  packages,
-}: DependencyProgressModalProps) {
-  if (!progress) return null;
-  const total = Math.max(progress.total, 1);
-  const ratio = Math.min(1, Math.max(0, progress.completed / total));
-  const activePackage =
-    progress.packageName && progress.version
-      ? `${progress.packageName}@${progress.version}`
-      : progress.packageName;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#102a43]/35 px-4 backdrop-blur-sm">
-      <div className="w-full max-w-md rounded-2xl border border-[#b9d5ee] bg-white p-5 shadow-[0_28px_70px_rgba(35,90,151,0.25)]">
-        <div className="flex items-start justify-between gap-4">
-          <div>
-            <div className="font-mono text-[11px] uppercase text-[#3178c6]">
-              Dependencies
-            </div>
-            <h2 className="mt-1 font-mono text-base text-[#102a43]">
-              Installing npm packages
-            </h2>
-          </div>
-          <div className="font-mono text-[11px] text-slate-500">
-            {progress.completed}/{total}
-          </div>
-        </div>
-
-        <div className="mt-4 h-2 overflow-hidden rounded-full bg-[#e7f0f8]">
-          <div
-            className="h-full bg-[#3178c6] transition-[width]"
-            style={{ width: `${Math.max(8, ratio * 100)}%` }}
-          />
-        </div>
-
-        <div className="mt-4 space-y-1 font-mono">
-          {activePackage && (
-            <div className="text-[12px] text-slate-700">{activePackage}</div>
-          )}
-          <div className="text-[11px] text-slate-500">{progress.message}</div>
-        </div>
-
-        {packages.length > 0 && (
-          <div className="mt-4 flex flex-wrap gap-1.5">
-            {packages.slice(0, 8).map((name) => (
-              <span
-                key={name}
-                className="rounded border border-[#d2e4f4] bg-[#f7fbff] px-2 py-1 font-mono text-[10px] text-slate-600"
-              >
-                {name}
-              </span>
-            ))}
-            {packages.length > 8 && (
-              <span className="rounded border border-[#d2e4f4] bg-[#f7fbff] px-2 py-1 font-mono text-[10px] text-slate-500">
-                +{packages.length - 8}
-              </span>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import type { IPlaygroundDependencyProgress } from "../structures/IPlaygroundDependencyProgress";
+
+interface DependencyProgressModalProps {
+  progress: IPlaygroundDependencyProgress | null;
+  packages: readonly string[];
+}
+
+export function DependencyProgressModal({
+  progress,
+  packages,
+}: DependencyProgressModalProps) {
+  if (!progress) return null;
+  const total = Math.max(progress.total, 1);
+  const ratio = Math.min(1, Math.max(0, progress.completed / total));
+  const activePackage =
+    progress.packageName && progress.version
+      ? `${progress.packageName}@${progress.version}`
+      : progress.packageName;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#102a43]/35 px-4 backdrop-blur-sm">
+      <div className="w-full max-w-md rounded-2xl border border-[#b9d5ee] bg-white p-5 shadow-[0_28px_70px_rgba(35,90,151,0.25)]">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <div className="font-mono text-[11px] uppercase text-[#3178c6]">
+              Dependencies
+            </div>
+            <h2 className="mt-1 font-mono text-base text-[#102a43]">
+              Installing npm packages
+            </h2>
+          </div>
+          <div className="font-mono text-[11px] text-slate-500">
+            {progress.completed}/{total}
+          </div>
+        </div>
+
+        <div className="mt-4 h-2 overflow-hidden rounded-full bg-[#e7f0f8]">
+          <div
+            className="h-full bg-[#3178c6] transition-[width]"
+            style={{ width: `${Math.max(8, ratio * 100)}%` }}
+          />
+        </div>
+
+        <div className="mt-4 space-y-1 font-mono">
+          {activePackage && (
+            <div className="text-[12px] text-slate-700">{activePackage}</div>
+          )}
+          <div className="text-[11px] text-slate-500">{progress.message}</div>
+        </div>
+
+        {packages.length > 0 && (
+          <div className="mt-4 flex flex-wrap gap-1.5">
+            {packages.slice(0, 8).map((name) => (
+              <span
+                key={name}
+                className="rounded border border-[#d2e4f4] bg-[#f7fbff] px-2 py-1 font-mono text-[10px] text-slate-600"
+              >
+                {name}
+              </span>
+            ))}
+            {packages.length > 8 && (
+              <span className="rounded border border-[#d2e4f4] bg-[#f7fbff] px-2 py-1 font-mono text-[10px] text-slate-500">
+                +{packages.length - 8}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/react/DiagnosticsPanel.tsx

@@ -1,74 +1,74 @@
-"use client";
-
-import { useState } from "react";
-
-import type { ICompilerService } from "../structures/ICompilerService";
-
-export function DiagnosticsPanel({
-  diagnostics,
-}: {
-  diagnostics: ICompilerService.IDiagnostic[];
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const errorCount = diagnostics.filter((d) => d.severity === "error").length;
-  const warnCount = diagnostics.filter((d) => d.severity === "warning").length;
-
-  if (diagnostics.length === 0)
-    return (
-      <div className="flex shrink-0 items-center gap-3 border-t border-[#c7dff4] bg-[#eef6ff] px-4 py-2">
-        <span className="text-emerald-400 text-xs">●</span>
-        <span className="font-mono text-[12px] text-slate-600">
-          0 errors · 0 warnings
-        </span>
-      </div>
-    );
-
-  return (
-    <div className="shrink-0 border-t border-[#c7dff4] bg-[#eef6ff]">
-      <button
-        onClick={() => setExpanded((v) => !v)}
-        className="flex w-full items-center gap-3 px-4 py-2 text-left transition-colors hover:bg-[#e1effc]"
-      >
-        <span
-          className={`text-xs ${
-            errorCount > 0 ? "text-red-400" : "text-yellow-400"
-          }`}
-        >
-          ●
-        </span>
-        <span className="font-mono text-[12px] text-slate-700">
-          {errorCount} error{errorCount === 1 ? "" : "s"} · {warnCount} warning
-          {warnCount === 1 ? "" : "s"}
-        </span>
-        <span className="ml-auto font-mono text-[10px] text-slate-400">
-          {expanded ? "▲ collapse" : "▼ expand"}
-        </span>
-      </button>
-      {expanded && (
-        <div className="max-h-48 overflow-auto border-t border-[#c7dff4]">
-          {diagnostics.map((d, i) => (
-            <div
-              key={i}
-              className="flex gap-3 border-b border-[#d8e7f4] px-4 py-2 font-mono text-[12px] last:border-b-0"
-            >
-              <span
-                className={`shrink-0 ${
-                  d.severity === "error" ? "text-red-400" : "text-yellow-400"
-                }`}
-              >
-                {d.severity === "error" ? "✗" : "!"}
-              </span>
-              <span className="w-16 shrink-0 text-slate-500">
-                {d.line}:{d.column}
-              </span>
-              <span className="w-16 shrink-0 text-slate-400">
-                {d.code ?? ""}
-              </span>
-              <span className="text-slate-700">{d.message}</span>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
+"use client";
+
+import { useState } from "react";
+
+import type { ICompilerService } from "../structures/ICompilerService";
+
+export function DiagnosticsPanel({
+  diagnostics,
+}: {
+  diagnostics: ICompilerService.IDiagnostic[];
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const errorCount = diagnostics.filter((d) => d.severity === "error").length;
+  const warnCount = diagnostics.filter((d) => d.severity === "warning").length;
+
+  if (diagnostics.length === 0)
+    return (
+      <div className="flex shrink-0 items-center gap-3 border-t border-[#c7dff4] bg-[#eef6ff] px-4 py-2">
+        <span className="text-emerald-400 text-xs">●</span>
+        <span className="font-mono text-[12px] text-slate-600">
+          0 errors · 0 warnings
+        </span>
+      </div>
+    );
+
+  return (
+    <div className="shrink-0 border-t border-[#c7dff4] bg-[#eef6ff]">
+      <button
+        onClick={() => setExpanded((v) => !v)}
+        className="flex w-full items-center gap-3 px-4 py-2 text-left transition-colors hover:bg-[#e1effc]"
+      >
+        <span
+          className={`text-xs ${
+            errorCount > 0 ? "text-red-400" : "text-yellow-400"
+          }`}
+        >
+          ●
+        </span>
+        <span className="font-mono text-[12px] text-slate-700">
+          {errorCount} error{errorCount === 1 ? "" : "s"} · {warnCount} warning
+          {warnCount === 1 ? "" : "s"}
+        </span>
+        <span className="ml-auto font-mono text-[10px] text-slate-400">
+          {expanded ? "▲ collapse" : "▼ expand"}
+        </span>
+      </button>
+      {expanded && (
+        <div className="max-h-48 overflow-auto border-t border-[#c7dff4]">
+          {diagnostics.map((d, i) => (
+            <div
+              key={i}
+              className="flex gap-3 border-b border-[#d8e7f4] px-4 py-2 font-mono text-[12px] last:border-b-0"
+            >
+              <span
+                className={`shrink-0 ${
+                  d.severity === "error" ? "text-red-400" : "text-yellow-400"
+                }`}
+              >
+                {d.severity === "error" ? "✗" : "!"}
+              </span>
+              <span className="w-16 shrink-0 text-slate-500">
+                {d.line}:{d.column}
+              </span>
+              <span className="w-16 shrink-0 text-slate-400">
+                {d.code ?? ""}
+              </span>
+              <span className="text-slate-700">{d.message}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}