@codespark/react 1.0.0

package/dist/monaco.d.ts

@@ -0,0 +1,36 @@
+import { ComponentType } from "react";
+import { EditorProps } from "@monaco-editor/react";
+import * as monaco from "monaco-editor";
+import { ReactCodeMirrorRef } from "@uiw/react-codemirror";
+
+//#region src/lib/editor-adapter/index.d.ts
+declare enum EditorEngine {
+  Monaco = 0,
+  CodeMirror = 1,
+}
+interface EditorInstance {
+  [EditorEngine.Monaco]: monaco.editor.IStandaloneCodeEditor;
+  [EditorEngine.CodeMirror]: ReactCodeMirrorRef;
+}
+interface EditorAdapter<E extends EditorEngine = any> {
+  kind: E;
+  instance: EditorInstance[E];
+  getValue(): string;
+  setValue(value: string, addToHistory?: boolean): void;
+  format(): Promise<void>;
+}
+interface EditorEngineComponent<E extends EditorEngine = any, P = object, I = unknown> {
+  kind: E;
+  Component: ComponentType<P>;
+  createAdapter: (instance: I) => EditorAdapter<E>;
+}
+//#endregion
+//#region src/components/editor/monaco/index.d.ts
+interface MonacoProps extends EditorProps {
+  readonly id?: string;
+  files?: Record<string, string>;
+  imports?: Record<string, string>;
+}
+declare const Monaco: EditorEngineComponent<EditorEngine.Monaco, MonacoProps, monaco.editor.IStandaloneCodeEditor>;
+//#endregion
+export { Monaco, MonacoProps };

package/dist/monaco.js

@@ -0,0 +1,323 @@
+import { shikiToMonaco } from "@shikijs/monaco";
+import parserEstree from "prettier/plugins/estree";
+import parserTypescript from "prettier/plugins/typescript";
+import prettier from "prettier/standalone";
+import { memo, useEffect, useRef, useState } from "react";
+import { createHighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/lib/editor-adapter/index.ts
+let EditorEngine = /* @__PURE__ */ function(EditorEngine$1) {
+	EditorEngine$1[EditorEngine$1["Monaco"] = 0] = "Monaco";
+	EditorEngine$1[EditorEngine$1["CodeMirror"] = 1] = "CodeMirror";
+	return EditorEngine$1;
+}({});
+
+//#endregion
+//#region src/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+//#region src/ui/skeleton.tsx
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		className: cn("bg-accent animate-pulse rounded-md", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/editor/monaco/adapter.ts
+var MonacoEditorAdapter = class {
+	constructor(kind, instance) {
+		this.kind = kind;
+		this.instance = instance;
+	}
+	getValue() {
+		return this.instance.getModel()?.getValue() ?? "";
+	}
+	setValue(value, _addToHistory) {
+		this.instance.getModel()?.setValue(value);
+	}
+	async format() {
+		await this.instance.getAction("editor.action.formatDocument")?.run();
+	}
+};
+
+//#endregion
+//#region src/components/editor/monaco/index.tsx
+const addedLibs = /* @__PURE__ */ new Set();
+const dtsCacheMap = /* @__PURE__ */ new Map();
+const setup = async () => {
+	if (typeof window === "undefined") return;
+	const [mod, highlighter] = await Promise.all([import("@monaco-editor/react"), createHighlighterCore({
+		themes: [import("shiki/themes/vitesse-light.mjs"), import("shiki/themes/vitesse-dark.mjs")],
+		langs: [
+			import("shiki/langs/typescript.mjs"),
+			import("shiki/langs/tsx.mjs"),
+			import("shiki/langs/javascript.mjs"),
+			import("shiki/langs/jsx.mjs"),
+			import("shiki/langs/json.mjs"),
+			import("shiki/langs/css.mjs"),
+			import("shiki/langs/html.mjs")
+		],
+		langAlias: {
+			typescript: "tsx",
+			javascript: "jsx"
+		},
+		engine: createJavaScriptRegexEngine()
+	})]);
+	return mod.loader.init().then((Monaco$1) => {
+		Monaco$1.languages.register({ id: "tsx" });
+		Monaco$1.languages.register({ id: "jsx" });
+		shikiToMonaco(highlighter, Monaco$1);
+		Monaco$1.typescript.typescriptDefaults.setEagerModelSync(true);
+		Monaco$1.typescript.typescriptDefaults.setDiagnosticsOptions({
+			noSemanticValidation: false,
+			noSyntaxValidation: false
+		});
+		Monaco$1.typescript.typescriptDefaults.setCompilerOptions({
+			strict: true,
+			noImplicitAny: false,
+			noUnusedLocals: false,
+			noUnusedParameters: false,
+			allowUnreachableCode: true,
+			allowUnusedLabels: true,
+			allowImportingTsExtensions: true,
+			target: Monaco$1.typescript.ScriptTarget.ESNext,
+			allowNonTsExtensions: true,
+			moduleResolution: Monaco$1.typescript.ModuleResolutionKind.NodeJs,
+			module: Monaco$1.typescript.ModuleKind.ESNext,
+			noEmit: true,
+			jsx: Monaco$1.typescript.JsxEmit.Preserve,
+			esModuleInterop: true
+		});
+		Monaco$1.languages.registerDocumentFormattingEditProvider("typescript", { async provideDocumentFormattingEdits(model, options) {
+			const text = model.getValue();
+			const formatted = await prettier.format(text, {
+				parser: "typescript",
+				plugins: [parserTypescript, parserEstree],
+				tabWidth: options.tabSize,
+				useTabs: !options.insertSpaces
+			});
+			return [{
+				range: model.getFullModelRange(),
+				text: formatted
+			}];
+		} });
+	}).then(() => mod.default);
+};
+const MONACO_DEFAULT_OPTIONS = {
+	fontSize: 14,
+	fontFamily: "Fira Code",
+	lineHeight: 24,
+	padding: {
+		top: 16,
+		bottom: 16
+	},
+	automaticLayout: true,
+	folding: false,
+	scrollBeyondLastLine: false,
+	find: { addExtraSpaceOnTop: false },
+	minimap: { enabled: false },
+	scrollbar: {
+		useShadows: false,
+		vertical: "auto",
+		horizontal: "auto",
+		verticalScrollbarSize: 0,
+		horizontalScrollbarSize: 0,
+		verticalSliderSize: 0,
+		horizontalSliderSize: 0
+	},
+	guides: { indentation: false },
+	cursorStyle: "line-thin",
+	overviewRulerBorder: false,
+	contextmenu: false,
+	renderLineHighlightOnlyWhenFocus: true,
+	formatOnPaste: true,
+	formatOnType: true,
+	tabSize: 2,
+	insertSpaces: true,
+	detectIndentation: false,
+	quickSuggestions: true,
+	suggestOnTriggerCharacters: true,
+	parameterHints: { enabled: true }
+};
+const Monaco = {
+	kind: EditorEngine.Monaco,
+	Component: memo(function Monaco$1(props) {
+		const { value = "", options = {}, onChange, onMount, width, height, id, language, files, imports, ...rest } = props;
+		const editorInstance = useRef(null);
+		const [monacoInstance, setMonacoInstance] = useState(null);
+		const [MonacoEditor, setMonacoEditor] = useState(null);
+		const mergedOptions = {
+			...MONACO_DEFAULT_OPTIONS,
+			...Object.fromEntries(Object.entries(options).filter(([, v]) => v !== void 0))
+		};
+		const handleEditorDidMount = (editor, monaco) => {
+			onMount?.(editor, monaco);
+			editorInstance.current = editor;
+			setMonacoInstance(monaco);
+		};
+		const handleEditorContentChange = (value$1, evt) => {
+			onChange?.(value$1, evt);
+		};
+		const addExtraLib = (dts = {}) => {
+			Object.entries(dts).forEach(([module, content]) => {
+				if (addedLibs.has(module)) return;
+				if (module.startsWith("http://") || module.startsWith("https://")) monacoInstance.typescript.typescriptDefaults.addExtraLib(`declare module '${module}' { ${content} }`, module);
+				else monacoInstance.typescript.typescriptDefaults.addExtraLib(content || `declare module '${module}'`, `file:///node_modules/${module}/index.d.ts`);
+				addedLibs.add(module);
+			});
+		};
+		const createModels = (files$1 = {}) => {
+			const prefix = `file:///${id}/`;
+			const filePaths = new Set(Object.keys(files$1).map((p) => p.replace(/^(\.\.?\/)+/, "")));
+			monacoInstance.editor.getModels().forEach((model) => {
+				const uriStr = model.uri.toString();
+				if (uriStr.startsWith(prefix)) {
+					const modelPath = uriStr.slice(prefix.length);
+					if (!filePaths.has(modelPath)) model.dispose();
+				}
+			});
+			Object.entries(files$1).forEach(([filePath, code]) => {
+				const normalizedPath = filePath.replace(/^(\.\.?\/)+/, "");
+				const uri = monacoInstance.Uri.parse(`${prefix}${normalizedPath}`);
+				if (!monacoInstance.editor.getModel(uri)) {
+					const ext = filePath.split(".").pop();
+					const lang = ["ts", "tsx"].includes(ext) ? "typescript" : ext === "css" ? "css" : ext === "json" ? "json" : "javascript";
+					monacoInstance.editor.createModel(code, lang, uri);
+				}
+			});
+		};
+		const addSuggestions = (paths) => {
+			const getRelativePath = (from, to) => {
+				const fromParts = from.replace(/^\.\//, "").split("/").slice(0, -1);
+				const toParts = to.replace(/^\.\//, "").split("/");
+				let commonLength = 0;
+				while (commonLength < fromParts.length && commonLength < toParts.length - 1 && fromParts[commonLength] === toParts[commonLength]) commonLength++;
+				const upCount = fromParts.length - commonLength;
+				return (upCount > 0 ? Array(upCount).fill("..") : ["."]).concat(toParts.slice(commonLength)).join("/");
+			};
+			return monacoInstance.languages.registerCompletionItemProvider([
+				"typescript",
+				"typescriptreact",
+				"javascript",
+				"javascriptreact"
+			], {
+				triggerCharacters: [
+					"/",
+					"'",
+					"\""
+				],
+				provideCompletionItems(model, position) {
+					const importMatch = model.getValueInRange({
+						startLineNumber: position.lineNumber,
+						startColumn: 1,
+						endLineNumber: position.lineNumber,
+						endColumn: position.column
+					}).match(/(?:import\s+.*?\s+from\s+|import\s+)(['"])(\.[^'"]*?)$/);
+					if (!importMatch) return { suggestions: [] };
+					const typedPath = importMatch[2];
+					const filePaths = paths.filter((p) => !p.endsWith("/"));
+					const suggestions = [];
+					const addedPaths = /* @__PURE__ */ new Set();
+					const currentPath = model.uri.path.replace(/^\/[^/]+\//, "./");
+					for (const filePath of filePaths) {
+						if (filePath === currentPath) continue;
+						const relativePath = getRelativePath(currentPath, filePath);
+						if (!relativePath.startsWith(typedPath)) continue;
+						let displayPath = relativePath;
+						if (/\.(tsx?|jsx?)$/.test(displayPath)) displayPath = displayPath.replace(/\.(tsx?|jsx?)$/, "");
+						if (!addedPaths.has(displayPath)) {
+							addedPaths.add(displayPath);
+							suggestions.push({
+								label: displayPath,
+								kind: monacoInstance.languages.CompletionItemKind.File,
+								insertText: displayPath.slice(typedPath.length),
+								range: {
+									startLineNumber: position.lineNumber,
+									startColumn: position.column,
+									endLineNumber: position.lineNumber,
+									endColumn: position.column
+								}
+							});
+						}
+					}
+					return { suggestions };
+				}
+			});
+		};
+		useEffect(() => {
+			(async () => {
+				const MonacoEditorReact = await setup();
+				setTimeout(() => {
+					if (MonacoEditorReact) setMonacoEditor(() => MonacoEditorReact);
+				}, 1e3);
+			})();
+		}, []);
+		useEffect(() => {
+			if (typeof window === "undefined" || !monacoInstance || !id) return;
+			createModels(files);
+			const provider = addSuggestions(Object.keys(files || {}));
+			return () => provider?.dispose();
+		}, [files, monacoInstance]);
+		useEffect(() => {
+			if (typeof window === "undefined" || !monacoInstance) return;
+			const controllers = /* @__PURE__ */ new Map();
+			Promise.all(Object.entries(imports || {}).map(async ([name, url]) => {
+				if (dtsCacheMap.has(name)) return [name, dtsCacheMap.get(name)];
+				const controller = new AbortController();
+				controllers.set(name, controller);
+				try {
+					const { headers } = await fetch(url, {
+						method: "HEAD",
+						signal: controller.signal
+					});
+					const dtsUrl = headers.get("X-TypeScript-Types");
+					if (dtsUrl) {
+						const dtsContent = await fetch(dtsUrl, { signal: controller.signal }).then((r) => r.text());
+						dtsCacheMap.set(name, dtsContent);
+						return [name, dtsContent];
+					}
+					return [name, ""];
+				} catch {
+					return [name, ""];
+				}
+			})).then((results) => Object.fromEntries(results)).then(addExtraLib);
+			return () => {
+				controllers.forEach((controller) => controller.abort());
+			};
+		}, [imports, monacoInstance]);
+		if (!MonacoEditor) return /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col space-y-3 p-5",
+			style: { height },
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "w-full flex-1 rounded-xl" }), /* @__PURE__ */ jsxs("div", {
+				className: "space-y-3",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[80%]" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[65%]" })]
+			})]
+		});
+		return /* @__PURE__ */ jsx(MonacoEditor, {
+			value,
+			language,
+			options: mergedOptions,
+			width: width ?? "100%",
+			height,
+			...rest,
+			onMount: handleEditorDidMount,
+			onChange: handleEditorContentChange
+		});
+	}),
+	createAdapter: (instance) => {
+		return new MonacoEditorAdapter(EditorEngine.Monaco, instance);
+	}
+};
+
+//#endregion
+export { Monaco };

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@codespark/react",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "React components for codespark ecosystem",
+  "keywords": [
+    "react-components",
+    "code-editor",
+    "live-preview",
+    "codespark"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./*": {
+      "import": "./dist/*.js",
+      "types": "./dist/*.d.ts"
+    },
+    "./index.css": {
+      "style": "./dist/index.css",
+      "import": "./dist/index.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown"
+  },
+  "author": "TonyL1u",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/codesparkjs/codespark.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://codesparkjs.com",
+  "dependencies": {
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/language-data": "^6.5.2",
+    "@codespark/framework": "^1.0.0",
+    "@monaco-editor/react": "^4.7.0",
+    "@shikijs/monaco": "^3.20.0",
+    "@uiw/react-codemirror": "^4.25.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lodash-es": "^4.17.23",
+    "lucide-react": "^0.562.0",
+    "prettier": "^3.7.4",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-is": "^19.2.3",
+    "shiki": "^3.20.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^22.19.2",
+    "@types/react": "^19.2.7",
+    "@types/react-is": "^19.2.0",
+    "monaco-editor": "^0.55.1",
+    "rollup-plugin-import-raw": "^1.0.2",
+    "tsdown": "^0.17.3"
+  }
+}