@ttsc/playground 0.25.0 → 0.26.1

package/src/react/ResultViewer.tsx

@@ -1,75 +1,75 @@
-"use client";
-
-import Editor from "@monaco-editor/react";
-import { useEffect, useRef, useState } from "react";
-
-interface ResultViewerProps {
-  language: "typescript" | "javascript" | "json";
-  value: string;
-}
-
-/**
- * Read-only Monaco pane used to render the compiled / transformed output with a
- * copy button. Wraps `<Editor readOnly>` and adds the toast UI.
- */
-export function ResultViewer({ language, value }: ResultViewerProps) {
-  const [copied, setCopied] = useState(false);
-  const copiedTimer = useRef<number | null>(null);
-
-  useEffect(
-    () => () => {
-      if (copiedTimer.current !== null)
-        window.clearTimeout(copiedTimer.current);
-    },
-    [],
-  );
-
-  const onCopy = () => {
-    void navigator.clipboard.writeText(value);
-    setCopied(true);
-    if (copiedTimer.current !== null) window.clearTimeout(copiedTimer.current);
-    copiedTimer.current = window.setTimeout(() => {
-      setCopied(false);
-      copiedTimer.current = null;
-    }, 1500);
-  };
-
-  return (
-    <div className="relative h-full w-full">
-      {value && (
-        <button
-          onClick={onCopy}
-          className="absolute right-3 top-2 z-10 rounded-md border border-[#b9d5ee] bg-white/90 px-2 py-1 font-mono text-[10px] text-[#235a97] shadow-sm transition-colors hover:bg-[#eaf4ff]"
-        >
-          {copied ? "Copied ✓" : "Copy"}
-        </button>
-      )}
-      <Editor
-        height="100%"
-        language={language}
-        theme="vs"
-        value={value}
-        path={`output.${
-          language === "typescript"
-            ? "ts"
-            : language === "javascript"
-              ? "js"
-              : "json"
-        }`}
-        options={{
-          readOnly: true,
-          tabSize: 2,
-          minimap: { enabled: false },
-          padding: { top: 12, bottom: 12 },
-          fontSize: 13,
-          fontFamily:
-            "ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Fira Code', Consolas, monospace",
-          smoothScrolling: true,
-          scrollBeyondLastLine: false,
-          renderLineHighlight: "none",
-          wordWrap: "on",
-        }}
-      />
-    </div>
-  );
-}
+"use client";
+
+import Editor from "@monaco-editor/react";
+import { useEffect, useRef, useState } from "react";
+
+interface ResultViewerProps {
+  language: "typescript" | "javascript" | "json";
+  value: string;
+}
+
+/**
+ * Read-only Monaco pane used to render the compiled / transformed output with a
+ * copy button. Wraps `<Editor readOnly>` and adds the toast UI.
+ */
+export function ResultViewer({ language, value }: ResultViewerProps) {
+  const [copied, setCopied] = useState(false);
+  const copiedTimer = useRef<number | null>(null);
+
+  useEffect(
+    () => () => {
+      if (copiedTimer.current !== null)
+        window.clearTimeout(copiedTimer.current);
+    },
+    [],
+  );
+
+  const onCopy = () => {
+    void navigator.clipboard.writeText(value);
+    setCopied(true);
+    if (copiedTimer.current !== null) window.clearTimeout(copiedTimer.current);
+    copiedTimer.current = window.setTimeout(() => {
+      setCopied(false);
+      copiedTimer.current = null;
+    }, 1500);
+  };
+
+  return (
+    <div className="relative h-full w-full">
+      {value && (
+        <button
+          onClick={onCopy}
+          className="absolute right-3 top-2 z-10 rounded-md border border-[#b9d5ee] bg-white/90 px-2 py-1 font-mono text-[10px] text-[#235a97] shadow-sm transition-colors hover:bg-[#eaf4ff]"
+        >
+          {copied ? "Copied ✓" : "Copy"}
+        </button>
+      )}
+      <Editor
+        height="100%"
+        language={language}
+        theme="vs"
+        value={value}
+        path={`output.${
+          language === "typescript"
+            ? "ts"
+            : language === "javascript"
+              ? "js"
+              : "json"
+        }`}
+        options={{
+          readOnly: true,
+          tabSize: 2,
+          minimap: { enabled: false },
+          padding: { top: 12, bottom: 12 },
+          fontSize: 13,
+          fontFamily:
+            "ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Fira Code', Consolas, monospace",
+          smoothScrolling: true,
+          scrollBeyondLastLine: false,
+          renderLineHighlight: "none",
+          wordWrap: "on",
+        }}
+      />
+    </div>
+  );
+}

package/src/react/SourceEditor.tsx

@@ -1,95 +1,95 @@
-"use client";
-
-import Editor, { type Monaco } from "@monaco-editor/react";
-import { useCallback, useEffect, useMemo, useRef } from "react";
-
-import { DEFAULT_PLAYGROUND_COMPILER_OPTIONS } from "../compiler/DEFAULT_PLAYGROUND_COMPILER_OPTIONS";
-import type { ISourceEditorProps } from "../structures/ISourceEditorProps";
-
-export function SourceEditor({
-  value,
-  onChange,
-  extraLibs,
-  path = "file:///src/playground.ts",
-}: ISourceEditorProps) {
-  const monacoRef = useRef<Monaco | null>(null);
-  const libDisposables = useRef<{ dispose(): void }[]>([]);
-  const allExtraLibs = useMemo(
-    () => (extraLibs ? Object.entries(extraLibs) : []),
-    [extraLibs],
-  );
-
-  const installExtraLibs = useCallback(
-    (monaco: Monaco) => {
-      for (const disposable of libDisposables.current) disposable.dispose();
-      libDisposables.current = [];
-      const tsd = monaco.languages.typescript.typescriptDefaults;
-      for (const [file, content] of allExtraLibs) {
-        libDisposables.current.push(tsd.addExtraLib(content, file));
-      }
-    },
-    [allExtraLibs],
-  );
-
-  useEffect(() => {
-    if (monacoRef.current) installExtraLibs(monacoRef.current);
-    return () => {
-      for (const disposable of libDisposables.current) disposable.dispose();
-      libDisposables.current = [];
-    };
-  }, [installExtraLibs]);
-
-  const handleMount = (_editor: unknown, monaco: Monaco) => {
-    monacoRef.current = monaco;
-    const tsd = monaco.languages.typescript.typescriptDefaults;
-    tsd.setCompilerOptions({
-      target: monaco.languages.typescript.ScriptTarget.ESNext,
-      module: monaco.languages.typescript.ModuleKind.ESNext,
-      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-      esModuleInterop: DEFAULT_PLAYGROUND_COMPILER_OPTIONS.esModuleInterop,
-      strict: DEFAULT_PLAYGROUND_COMPILER_OPTIONS.strict,
-      experimentalDecorators:
-        DEFAULT_PLAYGROUND_COMPILER_OPTIONS.experimentalDecorators,
-      allowNonTsExtensions: true,
-      // External .d.ts packs (typia, etc.) routinely reference transitive types
-      // Monaco cannot reach (deep paths in JSDoc, optional peers). skipLibCheck
-      // keeps the editor lean by not type-checking the lib pack.
-      skipLibCheck: true,
-    });
-    tsd.setDiagnosticsOptions({
-      noSemanticValidation: false,
-      noSyntaxValidation: false,
-      diagnosticCodesToIgnore: [
-        // 2307: Cannot find module — JSDoc-only stubbed deps still occasionally
-        //       leak through Monaco's module resolution.
-        2307,
-      ],
-    });
-    installExtraLibs(monaco);
-  };
-
-  return (
-    <Editor
-      height="100%"
-      defaultLanguage="typescript"
-      theme="vs"
-      value={value}
-      onChange={(v) => onChange(v ?? "")}
-      onMount={handleMount}
-      path={path}
-      options={{
-        tabSize: 2,
-        minimap: { enabled: false },
-        padding: { top: 12, bottom: 12 },
-        fontSize: 13,
-        fontFamily:
-          "ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Fira Code', Consolas, monospace",
-        smoothScrolling: true,
-        cursorBlinking: "smooth",
-        scrollBeyondLastLine: false,
-        renderLineHighlight: "line",
-        wordWrap: "on",
-      }}
-    />
-  );
-}
+"use client";
+
+import Editor, { type Monaco } from "@monaco-editor/react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+
+import { DEFAULT_PLAYGROUND_COMPILER_OPTIONS } from "../compiler/DEFAULT_PLAYGROUND_COMPILER_OPTIONS";
+import type { ISourceEditorProps } from "../structures/ISourceEditorProps";
+
+export function SourceEditor({
+  value,
+  onChange,
+  extraLibs,
+  path = "file:///src/playground.ts",
+}: ISourceEditorProps) {
+  const monacoRef = useRef<Monaco | null>(null);
+  const libDisposables = useRef<{ dispose(): void }[]>([]);
+  const allExtraLibs = useMemo(
+    () => (extraLibs ? Object.entries(extraLibs) : []),
+    [extraLibs],
+  );
+
+  const installExtraLibs = useCallback(
+    (monaco: Monaco) => {
+      for (const disposable of libDisposables.current) disposable.dispose();
+      libDisposables.current = [];
+      const tsd = monaco.languages.typescript.typescriptDefaults;
+      for (const [file, content] of allExtraLibs) {
+        libDisposables.current.push(tsd.addExtraLib(content, file));
+      }
+    },
+    [allExtraLibs],
+  );
+
+  useEffect(() => {
+    if (monacoRef.current) installExtraLibs(monacoRef.current);
+    return () => {
+      for (const disposable of libDisposables.current) disposable.dispose();
+      libDisposables.current = [];
+    };
+  }, [installExtraLibs]);
+
+  const handleMount = (_editor: unknown, monaco: Monaco) => {
+    monacoRef.current = monaco;
+    const tsd = monaco.languages.typescript.typescriptDefaults;
+    tsd.setCompilerOptions({
+      target: monaco.languages.typescript.ScriptTarget.ESNext,
+      module: monaco.languages.typescript.ModuleKind.ESNext,
+      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+      esModuleInterop: DEFAULT_PLAYGROUND_COMPILER_OPTIONS.esModuleInterop,
+      strict: DEFAULT_PLAYGROUND_COMPILER_OPTIONS.strict,
+      experimentalDecorators:
+        DEFAULT_PLAYGROUND_COMPILER_OPTIONS.experimentalDecorators,
+      allowNonTsExtensions: true,
+      // External .d.ts packs (typia, etc.) routinely reference transitive types
+      // Monaco cannot reach (deep paths in JSDoc, optional peers). skipLibCheck
+      // keeps the editor lean by not type-checking the lib pack.
+      skipLibCheck: true,
+    });
+    tsd.setDiagnosticsOptions({
+      noSemanticValidation: false,
+      noSyntaxValidation: false,
+      diagnosticCodesToIgnore: [
+        // 2307: Cannot find module — JSDoc-only stubbed deps still occasionally
+        //       leak through Monaco's module resolution.
+        2307,
+      ],
+    });
+    installExtraLibs(monaco);
+  };
+
+  return (
+    <Editor
+      height="100%"
+      defaultLanguage="typescript"
+      theme="vs"
+      value={value}
+      onChange={(v) => onChange(v ?? "")}
+      onMount={handleMount}
+      path={path}
+      options={{
+        tabSize: 2,
+        minimap: { enabled: false },
+        padding: { top: 12, bottom: 12 },
+        fontSize: 13,
+        fontFamily:
+          "ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Fira Code', Consolas, monospace",
+        smoothScrolling: true,
+        cursorBlinking: "smooth",
+        scrollBeyondLastLine: false,
+        renderLineHighlight: "line",
+        wordWrap: "on",
+      }}
+    />
+  );
+}