diff --git a/package.json b/package.json index 05208a9..33bda40 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "dependencies": { "@codesandbox/sandpack-react": "^2.20.0", "clsx": "^2.1.1", + "livecodes": "^0.11.1", "react": "^19.1.0", "react-dom": "^19.1.0" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 10381f1..8521d10 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,9 @@ importers: clsx: specifier: ^2.1.1 version: 2.1.1 + livecodes: + specifier: ^0.11.1 + version: 0.11.1 react: specifier: ^19.1.0 version: 19.1.0 @@ -832,6 +835,9 @@ packages: resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==} engines: {node: '>= 12.0.0'} + livecodes@0.11.1: + resolution: {integrity: sha512-v+TF4pD4wVk+7jYV7WD+PGMxU/zWlATZ80Y7ze6gAgPCJMdWNwbz5Y16+BSbwmfPjFeyMTSGWSYuiCEwEBkSzw==} + lru-cache@5.1.1: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} @@ -1747,6 +1753,8 @@ snapshots: lightningcss-win32-arm64-msvc: 1.30.1 lightningcss-win32-x64-msvc: 1.30.1 + livecodes@0.11.1: {} + lru-cache@5.1.1: dependencies: yallist: 3.1.1 diff --git a/src/App.tsx b/src/App.tsx index 1506867..d2cec15 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,62 +1,50 @@ -import { SandpackPreviewRef, useSandpack, SandpackPreview, SandpackFileExplorer, Sandpack } from '@codesandbox/sandpack-react'; -import { useEffect, useRef } from 'react'; -import { SandpackProvider, SandpackLayout, SandpackCodeEditor } from '@codesandbox/sandpack-react'; +// import LiveCodes from 'livecodes/react'; +import { createPlayground } from 'livecodes'; +import { useEffect } from 'react'; + +const config = { + markup: { + language: 'markdown', + content: '# Hello World!', + }, +}; +// const Playground = () => ( +// +// ); export const App = () => { + useEffect(() => { + init(); + }, []); + const init = async () => { + const playground = await createPlayground('#container', { + // template: 'react', + // other embed options + config: { + markup: { + language: 'markdown', + content: '# Hello World!', + }, + }, + }); + const config = await playground.getConfig(); + // @ts-ignore + window.playground = playground; + console.log(config, playground); + }; return ( -
-

Welcome to the App

-

This is a simple React application.

-
- {/* - - - - - */} - {/* */} - - Hello Sandpack!; }`, - './index.html': { - code: `12345`, - }, - }} - /> -
+
+

LiveCodes Playground

+ {/* */} +
); }; - -const SandpackPreviewClient: React.FC = () => { - const { sandpack } = useSandpack(); - const previewRef = useRef(null); - - useEffect(() => { - const client = previewRef.current?.getClient(); - const clientId = previewRef.current?.clientId; - - if (client && clientId) { - console.log(client); - console.log(sandpack.clients[clientId]); - } - /** - * NOTE: In order to make sure that the client will be available - * use the whole `sandpack` object as a dependency. - */ - }, [sandpack]); - - return ; -}; diff --git a/src/sanpack/App.tsx b/src/sanpack/App.tsx new file mode 100644 index 0000000..1506867 --- /dev/null +++ b/src/sanpack/App.tsx @@ -0,0 +1,62 @@ +import { SandpackPreviewRef, useSandpack, SandpackPreview, SandpackFileExplorer, Sandpack } from '@codesandbox/sandpack-react'; +import { useEffect, useRef } from 'react'; +import { SandpackProvider, SandpackLayout, SandpackCodeEditor } from '@codesandbox/sandpack-react'; + +export const App = () => { + return ( +
+

Welcome to the App

+

This is a simple React application.

+
+ {/* + + + + + */} + {/* */} + + Hello Sandpack!; }`, + './index.html': { + code: `12345`, + }, + }} + /> +
+
+ ); +}; + +const SandpackPreviewClient: React.FC = () => { + const { sandpack } = useSandpack(); + const previewRef = useRef(null); + + useEffect(() => { + const client = previewRef.current?.getClient(); + const clientId = previewRef.current?.clientId; + + if (client && clientId) { + console.log(client); + console.log(sandpack.clients[clientId]); + } + /** + * NOTE: In order to make sure that the client will be available + * use the whole `sandpack` object as a dependency. + */ + }, [sandpack]); + + return ; +};