@codespark/react 1.0.5 → 1.0.7

package/dist/index.js

@@ -131,10 +131,10 @@ var Workspace = class extends OPFS {
 	constructor(config) {
 		super();
 		this.config = config;
-		const { id, OPFS: OPFS$1 = false, files } = config;
+		const { id, OPFS = false, files } = config;
 		this.id = id || "";
 		this.initialFiles = { ...files };
-		if (OPFS$1) super.initOPFS(this.files);
+		if (OPFS) super.initOPFS(this.files);
 	}
 	notifyListeners() {
 		this.listeners.forEach((fn) => fn());
@@ -320,14 +320,14 @@ var Workspace = class extends OPFS {
 * @returns Workspace state including files, compiled code, and the workspace instance
 */
 function useWorkspace(init) {
-	const uid$1 = useId();
+	const uid = useId();
 	const context = useCodespark();
 	const workspace = useMemo(() => {
 		let ws;
 		if (init instanceof Workspace) ws = init;
 		else if (init) ws = new Workspace(init);
 		else ws = context?.workspace;
-		if (!ws?.id) ws?.[INTERNAL_SET_ID](`workspace${uid$1}`);
+		if (!ws?.id) ws?.[INTERNAL_SET_ID](`workspace${uid}`);
 		return ws;
 	}, []);
 	if (!workspace) throw Error("Can not find any workspace instance. Make sure provide a workspace during runtime.");
@@ -344,9 +344,9 @@ function useWorkspace(init) {
 	const currentFile = useSyncExternalStore(subscribe, () => workspace.currentFile, () => workspace.currentFile);
 	const derivedState = useMemo(() => {
 		if (context) {
-			const { fileTree: fileTree$1, vendor, compiled, compileError } = context;
+			const { fileTree, vendor, compiled, compileError } = context;
 			return {
-				fileTree: fileTree$1,
+				fileTree,
 				vendor,
 				compiled,
 				compileError
@@ -393,13 +393,13 @@ function useWorkspace(init) {
 			return root;
 		})();
 		try {
-			framework.analyze(workspace.entry, files);
-			const compiled = framework.compile();
+			framework.analyze(files);
+			const compiled = framework.compile(workspace.entry);
 			workspace[INTERNAL_EMIT]("compiled", compiled);
 			const modules = framework.getOutput(LoaderType.ESModule);
 			const styles = framework.getOutput(LoaderType.Style);
 			const scripts = framework.getOutput(LoaderType.Script);
-			const externals = modules.flatMap(({ externals: externals$1 }) => externals$1).reduce((acc, { name, imported }) => {
+			const externals = modules.flatMap(({ externals }) => externals).reduce((acc, { name, imported }) => {
 				if (!acc[name]) acc[name] = /* @__PURE__ */ new Set();
 				imported.forEach((i) => acc[name].add(i));
 				return acc;
@@ -542,10 +542,10 @@ function CodesparkProvider(props) {
 
 //#endregion
 //#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;
+let EditorEngine = /* @__PURE__ */ function(EditorEngine) {
+	EditorEngine[EditorEngine["Monaco"] = 0] = "Monaco";
+	EditorEngine[EditorEngine["CodeMirror"] = 1] = "CodeMirror";
+	return EditorEngine;
 }({});
 
 //#endregion
@@ -574,7 +574,7 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
 		size: "default"
 	}
 });
-const Button = React.forwardRef(function Button$1({ className, variant = "default", size = "default", asChild = false, ...props }, ref) {
+const Button = React.forwardRef(function Button({ className, variant = "default", size = "default", asChild = false, ...props }, ref) {
 	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "button", {
 		"data-slot": "button",
 		"data-variant": variant,
@@ -731,7 +731,7 @@ const LANGUAGE_EXTENSIONS = {
 };
 const CodeMirror = {
 	kind: EditorEngine.CodeMirror,
-	Component: memo(function CodeMirror$1(props) {
+	Component: memo(function CodeMirror(props) {
 		const { id, basicSetup, extensions = [], width, height, fontFamily, lang, onMount, ...rest } = props;
 		const [mounted, setMounted] = useState(false);
 		const editorRef = useRef(null);
@@ -794,8 +794,8 @@ function CodesparkEditor(props) {
 		entry: "./App.tsx",
 		files: { "./App.tsx": value }
 	}));
-	const uid$1 = useId();
-	const editorId = id ?? `editor${uid$1}`;
+	const uid = useId();
+	const editorId = id ?? `editor${uid}`;
 	const editorRef = useRef(null);
 	const currentFileRef = useLatest(currentFile);
 	const { copyToClipboard, isCopied } = useCopyToClipboard();
@@ -838,14 +838,14 @@ function CodesparkEditor(props) {
 		workspace[INTERNAL_REGISTER_EDITOR](editorId, adapter);
 	}, []);
 	const renderEditor = () => {
-		const id$1 = `${workspace.id}${editorId}`;
+		const id = `${workspace.id}${editorId}`;
 		if (editor.kind === EditorEngine.Monaco && propsTypeGuard(props, editor, EditorEngine.Monaco)) {
 			const { height, width, wrapperProps, options, onChange, onMount } = props;
 			const { fontFamily = globalFontFamily } = options || {};
 			return /* @__PURE__ */ jsx(editor.Component, {
-				id: id$1,
+				id,
 				value: value || currentFile.code,
-				path: `file:///${id$1}/${currentFile.path.replace(/^(\.\.?\/)+/, "")}`,
+				path: `file:///${id}/${currentFile.path.replace(/^(\.\.?\/)+/, "")}`,
 				theme: theme === "light" ? "vitesse-light" : "vitesse-dark",
 				files,
 				imports: vendor.imports,
@@ -876,7 +876,7 @@ function CodesparkEditor(props) {
 		if (editor.kind === EditorEngine.CodeMirror && propsTypeGuard(props, editor, EditorEngine.CodeMirror)) {
 			const { height, width, basicSetup, fontFamily, readOnly, onChange, onMount } = props;
 			return /* @__PURE__ */ jsx(editor.Component, {
-				id: id$1,
+				id,
 				className,
 				value: value || currentFile.code,
 				height: height ?? "200px",
@@ -1165,11 +1165,11 @@ function useInjections(children) {
 		Children.forEach(children, (child) => {
 			if (isValidElement(child)) {
 				if (child.type === Style) {
-					const { children: children$1, ...attrs } = child.props;
-					result.push(`<style${serializeAttributes(attrs)}>${children$1?.trim() || ""}</style>`);
+					const { children, ...attrs } = child.props;
+					result.push(`<style${serializeAttributes(attrs)}>${children?.trim() || ""}</style>`);
 				} else if (child.type === Script) {
-					const { children: children$1, ...attrs } = child.props;
-					result.push(`<script${serializeAttributes(attrs)}>${children$1?.trim() || ""}<\/script>`);
+					const { children, ...attrs } = child.props;
+					result.push(`<script${serializeAttributes(attrs)}>${children?.trim() || ""}<\/script>`);
 				} else if (child.type === Link) {
 					const attrs = child.props;
 					result.push(`<link${serializeAttributes(attrs)} />`);
@@ -1428,13 +1428,13 @@ var TailwindCSSJit = class TailwindCSSJit {
 		return this.env.querySelectorAll(`style[type="${TailwindCSSJit.STYLE_TYPE}"]`);
 	}
 	async createCompiler() {
-		let css$1 = "";
-		for (const sheet of this.stylesheets) css$1 += sheet.textContent + "\n";
-		if (!css$1.includes("@import")) css$1 = `@import "tailwindcss";${css$1}`;
-		if (this.lastCss === css$1) return;
-		this.lastCss = css$1;
+		let css = "";
+		for (const sheet of this.stylesheets) css += sheet.textContent + "\n";
+		if (!css.includes("@import")) css = `@import "tailwindcss";${css}`;
+		if (this.lastCss === css) return;
+		this.lastCss = css;
 		try {
-			this.compiler = await tailwindcss.compile(css$1, {
+			this.compiler = await tailwindcss.compile(css, {
 				base: "/",
 				loadStylesheet: this.loadStylesheet,
 				loadModule: this.loadModule
@@ -1522,8 +1522,8 @@ function useTailwindCSS() {
 		});
 	};
 	const rebuild = async (kind) => {
-		const css$1 = await jitRef.current?.rebuild(kind);
-		if (css$1 !== void 0 && sheetRef.current) sheetRef.current.textContent = css$1;
+		const css = await jitRef.current?.rebuild(kind);
+		if (css !== void 0 && sheetRef.current) sheetRef.current.textContent = css;
 	};
 	const mount = (doc) => {
 		jitRef.current ??= new TailwindCSSJit(doc);
@@ -1623,7 +1623,7 @@ body {
 function CodesparkPreview(props) {
 	const { imports: globalImports, theme: globalTheme } = useConfig();
 	const { workspace: contextWorkspace, imports: contextImports, theme: contextTheme, framework: contextFramework } = useCodespark() || {};
-	const { code = "", framework = contextFramework, className, tailwindcss: tailwindcss$1 = true, preflight = true, imports, theme = contextTheme ?? globalTheme ?? "light", children, height, onError, onLoad, onRendered, onConsole } = props;
+	const { code = "", framework = contextFramework, className, tailwindcss = true, preflight = true, imports, theme = contextTheme ?? globalTheme ?? "light", children, height, onError, onLoad, onRendered, onConsole } = props;
 	const { compiled, vendor, workspace } = useWorkspace(props.workspace ?? contextWorkspace ?? new Workspace({
 		entry: "./App.tsx",
 		files: { "./App.tsx": code },
@@ -1653,12 +1653,12 @@ function CodesparkPreview(props) {
 		onConsole
 	});
 	useEffect(() => {
-		if (!tailwindcss$1) unmountTailwind();
+		if (!tailwindcss) unmountTailwind();
 		else readyRef.current.promise.then((doc) => {
 			if (doc) mountTailwind(doc);
 		});
 		return unmountTailwind;
-	}, [tailwindcss$1]);
+	}, [tailwindcss]);
 	useEffect(() => {
 		if (typeof window === "undefined" || !code) return;
 		workspace.setFile(workspace.entry, code);
@@ -1704,7 +1704,7 @@ registerFramework(react);
 * Supports both single-file mode (via `code` prop) and multi-file mode (via `files` prop).
 */
 function Codespark(props) {
-	const { code, files, name = "./App.tsx", theme, editor, framework = "react", showEditor = true, showPreview = true, showFileExplorer = true, readonly: readOnly, className, toolbox, tailwindcss: tailwindcss$1, onConsole, onError, children, defaultExpanded, getWorkspace, editorHeight, previewHeight, orientation = "vertical", preflight } = props;
+	const { code, files, name = "./App.tsx", theme, editor, framework = "react", showEditor = true, showPreview = true, showFileExplorer = true, readonly: readOnly, className, toolbox, tailwindcss, onConsole, onError, children, defaultExpanded, getWorkspace, editorHeight, previewHeight, orientation = "vertical", preflight } = props;
 	const { workspace, fileTree, compileError } = useWorkspace({
 		entry: name,
 		files: files ?? { [name]: code || "" },
@@ -1757,7 +1757,7 @@ function Codespark(props) {
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: cn("border-border relative", showPreview && showEditor ? orientation === "vertical" ? "border-b" : "border-l" : "", orientation === "horizontal" && "order-2"),
 				children: [showPreview ? /* @__PURE__ */ jsx(CodesparkPreview, {
-					tailwindcss: tailwindcss$1,
+					tailwindcss,
 					onConsole,
 					onError: (error) => {
 						onError?.(error);