@codespark/react 1.0.2 → 1.0.4

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { Framework, Output } from "@codespark/framework";
 import * as React$1 from "react";
 import { ComponentProps, ComponentType, JSX, ReactElement, ReactNode, RefObject } from "react";
 import { LoaderType } from "@codespark/framework/loaders";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Tabs } from "radix-ui";
 import { ReactCodeMirrorProps, ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import { EditorProps } from "@monaco-editor/react";
@@ -340,7 +340,7 @@ interface CodesparkContextValue extends ConfigContextValue, WorkspaceDerivedStat
 interface ConfigProviderProps extends ConfigContextValue {
   children?: ReactNode;
 }
-declare function ConfigProvider(props: ConfigProviderProps): react_jsx_runtime1.JSX.Element;
+declare function ConfigProvider(props: ConfigProviderProps): react_jsx_runtime0.JSX.Element;
 interface CodesparkProviderProps extends Omit<CodesparkContextValue, 'files' | 'currentFile' | keyof WorkspaceDerivedState> {
   children?: ReactNode;
 }
@@ -351,7 +351,7 @@ interface CodesparkProviderProps extends Omit<CodesparkContextValue, 'files' | '
  * Required when using CodesparkEditor, CodesparkPreview, or CodesparkFileExplorer independently.
  * Automatically manages workspace state synchronization across all child components.
  */
-declare function CodesparkProvider(props: CodesparkProviderProps): react_jsx_runtime1.JSX.Element;
+declare function CodesparkProvider(props: CodesparkProviderProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/editor/index.d.ts
 type ToolboxItemId = 'reset' | 'format' | 'copy';
@@ -500,13 +500,13 @@ interface CodesparkPreviewProps extends ConfigContextValue, Pick<WorkspaceInit,
  * Supports Tailwind CSS, custom scripts/styles injection, and console output capture.
  * Displays a loading indicator during code compilation and execution.
  */
-declare function CodesparkPreview(props: CodesparkPreviewProps): react_jsx_runtime1.JSX.Element;
+declare function CodesparkPreview(props: CodesparkPreviewProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/ui/tabs.d.ts
 declare function Tabs$1({
   className,
   ...props
-}: React$1.ComponentProps<typeof Tabs.Root>): react_jsx_runtime1.JSX.Element;
+}: React$1.ComponentProps<typeof Tabs.Root>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/file-explorer/index.d.ts
 interface FileExplorerItemRenderContext {
@@ -714,7 +714,7 @@ interface CodesparkProps extends Pick<ConfigContextValue, 'theme'>, Pick<Codespa
  * to provide a complete interactive code demonstration experience.
  * Supports both single-file mode (via `code` prop) and multi-file mode (via `files` prop).
  */
-declare function Codespark(props: CodesparkProps): react_jsx_runtime1.JSX.Element;
+declare function Codespark(props: CodesparkProps): react_jsx_runtime0.JSX.Element;
 declare const useMDXComponents: () => {
   Codespark: typeof Codespark;
   CodesparkEditor: typeof CodesparkEditor;

package/dist/index.js

@@ -57,16 +57,6 @@ function useLatest(value) {
 	ref.current = value;
 	return ref;
 }
-function useUpdateEffect(effect, deps) {
-	const mounted = useRef(false);
-	useEffect(() => {
-		if (!mounted.current) {
-			mounted.current = true;
-			return;
-		}
-		return effect();
-	}, deps);
-}
 function getLanguageFromFile(name) {
 	const ext = name.split(".").pop()?.toLowerCase();
 	return ext ? {
@@ -1317,8 +1307,6 @@ var PreviewProxy = class {
 		script.type = "importmap";
 		script.textContent = JSON.stringify({ imports: imports || {} });
 		doc.head.insertBefore(script, doc.head.firstChild);
-		console.log(doc.querySelector("html").outerHTML);
-		this.iframe.src = URL.createObjectURL(new Blob([doc.querySelector("html").outerHTML], { type: "text/html" }));
 	}
 };
 function usePreview(options) {
@@ -1327,7 +1315,6 @@ function usePreview(options) {
 	const proxyRef = useRef(void 0);
 	const iframeRef = useRef(null);
 	const readyRef = useRef(Promise.withResolvers());
-	const isFirst = useRef(true);
 	const preview = async (...code) => {
 		try {
 			setRunning(true);
@@ -1335,23 +1322,13 @@ function usePreview(options) {
 			await proxyRef.current?.eval(code);
 		} catch (error) {
 			onError?.(error);
-		} finally {
-			isFirst.current = false;
 		}
 	};
-	useUpdateEffect(() => {
-		if (isFirst.current) return;
-		readyRef.current.promise.then(() => {
-			proxyRef.current?.setImportMap(imports);
-		});
-	}, [JSON.stringify(imports)]);
 	useEffect(() => {
 		if (iframeRef.current) {
 			const proxy = new PreviewProxy({
 				root: iframeRef.current,
 				defaultTheme: theme,
-				defaultImports: imports,
-				defaultPresets: presets,
 				handlers: {
 					on_console: onConsole,
 					on_fetch_progress: onFetchProgress,
@@ -1385,6 +1362,11 @@ function usePreview(options) {
 			proxyRef.current?.injectTags(presets);
 		});
 	}, [presets?.join("\n")]);
+	useEffect(() => {
+		readyRef.current.promise.then(() => {
+			proxyRef.current?.setImportMap(imports);
+		});
+	}, [JSON.stringify(imports)]);
 	return {
 		iframeRef,
 		proxyRef,
@@ -1595,7 +1577,7 @@ function useTailwindCSS() {
 const PREFLIGHT_STYLE = `
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1.5;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -1618,6 +1600,7 @@ html {
 body {
   height: 100%;
   padding: 12px;
+  font-size: 14px;
   overflow: auto;
   box-sizing: border-box;
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codespark/react",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "description": "React components for codespark ecosystem",
   "keywords": [