|
| 1 | +# Solid |
| 2 | + |
| 3 | +import LiveCodes from '../../src/components/LiveCodes.tsx'; |
| 4 | +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; |
| 5 | + |
| 6 | +The [JS/TS SDK](js-ts.mdx) can be used directly in [Solid](https://www.solidjs.com/) components without the need for any wrappers. |
| 7 | + |
| 8 | +## Installation |
| 9 | + |
| 10 | +Please refer to the [SDK installation](./index.mdx#installation) section. |
| 11 | + |
| 12 | +## Usage |
| 13 | + |
| 14 | +This is an example of using the LiveCodes TS SDK in a Solid component: |
| 15 | + |
| 16 | +```tsx title="App.tsx" |
| 17 | +import { onCleanup } from 'solid-js'; |
| 18 | +import { createPlayground, type Playground, type EmbedOptions } from 'livecodes'; |
| 19 | + |
| 20 | +export default function App() { |
| 21 | + let playground: Playground | null = null; |
| 22 | + |
| 23 | + const options: EmbedOptions = { |
| 24 | + params: { |
| 25 | + html: '<h1>Hello World!</h1>', |
| 26 | + css: 'h1 {color: blue;}', |
| 27 | + js: 'console.log("Hello, Solid!")', |
| 28 | + console: 'open', |
| 29 | + }, |
| 30 | + }; |
| 31 | + |
| 32 | + const onMounted = (container: HTMLElement) => { |
| 33 | + createPlayground(container, options).then((sdk) => { |
| 34 | + playground = sdk; // now the SDK is available |
| 35 | + }); |
| 36 | + }; |
| 37 | + onCleanup(() => playground?.destroy()); |
| 38 | + |
| 39 | + return <div ref={onMounted}></div>; |
| 40 | +} |
| 41 | +``` |
| 42 | + |
| 43 | +export const solidSDKDemo = { |
| 44 | + "solid.tsx": `import { onCleanup } from 'solid-js'; |
| 45 | +import { createPlayground, type Playground, type EmbedOptions } from 'livecodes'; |
| 46 | +
|
| 47 | +export default function App() { |
| 48 | + let playground: Playground | null = null; |
| 49 | +
|
| 50 | + const options: EmbedOptions = { |
| 51 | + params: { |
| 52 | + html: '<h1>Hello World!</h1>', |
| 53 | + css: 'h1 {color: blue;}', |
| 54 | + js: 'console.log("Hello, Solid!")', |
| 55 | + console: 'open', |
| 56 | + }, |
| 57 | + }; |
| 58 | +
|
| 59 | + const onMounted = (container: HTMLElement) => { |
| 60 | + createPlayground(container, options).then((sdk) => { |
| 61 | + playground = sdk; // now the SDK is available |
| 62 | + }); |
| 63 | + }; |
| 64 | + onCleanup(() => playground?.destroy()); |
| 65 | +
|
| 66 | + return <div ref={onMounted}></div>; |
| 67 | +} |
| 68 | +`, |
| 69 | +}; |
| 70 | + |
| 71 | +<RunInLiveCodes params={solidSDKDemo}></RunInLiveCodes> |
| 72 | + |
| 73 | +[Embed options](./js-ts.mdx#embed-options), [SDK methods](./js-ts.mdx#sdk-methods) and [TypeScript types](./js-ts.mdx#typescript-types) are available as described in the [JS/TS SDK documentations](./js-ts.mdx). |
| 74 | + |
| 75 | +## Demo |
| 76 | + |
| 77 | +<LiveCodes params={solidSDKDemo} height="80vh" /> |
| 78 | + |
| 79 | +## Related |
| 80 | + |
| 81 | +- [SDK Installation](./index.mdx#installation) |
| 82 | +- [JS/TS SDK](./js-ts.mdx) |
| 83 | +- [React SDK](./react.mdx) |
| 84 | +- [Vue SDK](./vue.mdx) |
| 85 | +- [Using SDK in Svelte](./svelte.mdx) |
| 86 | +- [Embedded Playgrounds](../features/embeds.mdx) |
0 commit comments