add docs for using SDK in Solid

README.md

@@ -119,7 +119,7 @@ Add this code to your page:
 - [Client-side!](https://livecodes.io/docs/why#client-side)
 - Very [configurable](https://livecodes.io/docs/configuration/)
 - Developer-friendly build-free environment
-- Powerful [SDK](https://livecodes.io/docs/sdk/) (available for [vanilla JavaScript, TypeScript](https://livecodes.io/docs/sdk/js-ts), [React](https://livecodes.io/docs/sdk/react), [Vue](https://livecodes.io/docs/sdk/vue) and [Svelte](https://livecodes.io/docs/sdk/svelte))
+- Powerful [SDK](https://livecodes.io/docs/sdk/) (available for [vanilla JavaScript, TypeScript](https://livecodes.io/docs/sdk/js-ts), [React](https://livecodes.io/docs/sdk/react), [Vue](https://livecodes.io/docs/sdk/vue), [Svelte](https://livecodes.io/docs/sdk/svelte) and [Solid](https://livecodes.io/docs/sdk/solid))
 - Comprehensive [Documentations](https://livecodes.io/docs/)
 - Focused on [privacy and security](https://livecodes.io/docs/features/security)
 - Free and [Open-Source](https://livecodes.io/docs/license)
@@ -156,7 +156,7 @@ createPlayground('#container', {
 });
 ```
 
-The [JavaScript SDK](https://livecodes.io/docs/sdk/js-ts) is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently [React](https://livecodes.io/docs/sdk/react) and [Vue](https://livecodes.io/docs/sdk/vue)). The SDK can be used in [Svelte](https://livecodes.io/docs/sdk/svelte) directly without wrappers. [TypeScript support](https://livecodes.io/docs/sdk/js-ts#typescript-types) provides type-safety and a great developer experience.
+The [JavaScript SDK](https://livecodes.io/docs/sdk/js-ts) is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently [React](https://livecodes.io/docs/sdk/react) and [Vue](https://livecodes.io/docs/sdk/vue)). The SDK can be used in [Svelte](https://livecodes.io/docs/sdk/svelte) and [Solid](https://livecodes.io/docs/sdk/solid) directly without wrappers. [TypeScript support](https://livecodes.io/docs/sdk/js-ts#typescript-types) provides type-safety and a great developer experience.
 
 React SDK example: ([open in LiveCodes](https://livecodes.io/?x=code/N4IgLglmA2CmIC4QBkIDdYGED2ATWAzgAQBKsAhgMZhEDKAIgNJH4C22IANCPgZQE4QADpGwA7RCC4gAFhVySAPK1hhyRSjPL8CqgLwAdEAFUAKgDEAtAA4jRAPQA+A2OWr1Y8isMg0EWADuQtj8YHaU4mCwYmA+ARC4YDJ6+H6UsJbxiTKcRBBiUBDk0JZ8xbB6AIwAdAAMdk7SMmCs0ACCYGA6ktDkYgDmPtHhvQQEPkbSav0EiADaALrcVJAYAKK4UCGSfIIi0qzaANYArkKIoL0DJ+T98EjNrdIRMdFgkiAAvtwEYACecAuICu-Rud0klDGz0ibw+3xAu2E7wQlz6oNu9xAACsCAAPaGvGKSCCsYKhIioDA4XhEABm-GwrCIAHJoOhYBFePZ+BRqMyANwGfguIUuF6-DTiWkQfpEPREYCisREIiHfinIQIBVKlUqkFg2Ba5lqo64bABMTMzg63UvKIxI0AYiIAAlYNBoNgiAB1ELQXAAQitNu+Ss+guFYnFNAACr0-v0GScxLg5UQABQASjljiIikpWDwhElYmlg2ALzLnyIfkCPh5BBO0DCIAcjgjLlguLJNHwtPITdj8cT2GTuA7EnhvwBhDkqlmCEWPwESIXS5AkIIMYbqg+3CEDPSYxCa6WG5Ov0ZtFUkAGC+A8JJPfv8P+QkIF1fhDA9+BaINkhvoQK77NwdqwkgXzcBgOgQOIkgAMwIVM2DYNAv7ROQABGcAKEgxTQNIKzshC4gEGh8A-GoYAXhCnq6AonyfEAA))
 

docs/docs/sdk/index.mdx

@@ -10,7 +10,7 @@ The Software Development Kit (SDK) provides an easy, yet powerful, interface to
 
 The SDK is provided as a light-weight ([less than 5kb gzipped](https://bundlephobia.com/package/livecodes)), zero-dependencies [npm package](#npm-package), that is also available from [CDNs](#cdn). It can be used to create playgrounds with a wide variety of [configurations](../configuration/configuration-object.mdx) and [embed options](js-ts.mdx#embed-options). In addition, [SDK methods](js-ts.mdx#sdk-methods) allow programmatic communication and control of the playgrounds during runtime.
 
-The [JavaScript SDK](js-ts.mdx) is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently [React](react.mdx) and [Vue](vue.mdx)). The SDK can be used in [Svelte](svelte.mdx) directly without wrappers. [TypeScript support](js-ts.mdx#typescript-types) provides type-safety and a great developer experience.
+The [JavaScript SDK](js-ts.mdx) is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently [React](react.mdx) and [Vue](vue.mdx)). The SDK can be used in [Svelte](svelte.mdx) and [Solid](solid.mdx) directly without wrappers. [TypeScript support](js-ts.mdx#typescript-types) provides type-safety and a great developer experience.
 
 ## SDK Demo
 
@@ -106,6 +106,8 @@ The SDK is currently provided in the following variations:
 
 - [Svelte](./svelte.mdx)
 
+- [Solid](./solid.mdx)
+
 ## Headless Mode
 
 The SDK also has a [headless mode](./headless.mdx). In this mode, no visible output is displayed in the embedding web page. However, all [SDK methods](../sdk/js-ts.mdx#sdk-methods) are accessible. This provides the power of leveraging the wide range of features and language support offered by LiveCodes, while retaining full control over the UI.

docs/docs/sdk/react.mdx

@@ -148,4 +148,5 @@ export const reactSDKDemo = {
 - [JS/TS SDK](./js-ts.mdx)
 - [Vue SDK](./vue.mdx)
 - [Using SDK in Svelte](./svelte.mdx)
+- [Using SDK in Solid](./solid.mdx)
 - [Embedded Playgrounds](../features/embeds.mdx)

docs/docs/sdk/solid.mdx

@@ -0,0 +1,86 @@
+# Solid
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
+
+The [JS/TS SDK](js-ts.mdx) can be used directly in [Solid](https://www.solidjs.com/) components without the need for any wrappers.
+
+## Installation
+
+Please refer to the [SDK installation](./index.mdx#installation) section.
+
+## Usage
+
+This is an example of using the LiveCodes TS SDK in a Solid component:
+
+```tsx title="App.tsx"
+import { onCleanup } from 'solid-js';
+import { createPlayground, type Playground, type EmbedOptions } from 'livecodes';
+
+export default function App() {
+  let playground: Playground | null = null;
+
+  const options: EmbedOptions = {
+    params: {
+      html: '<h1>Hello World!</h1>',
+      css: 'h1 {color: blue;}',
+      js: 'console.log("Hello, Solid!")',
+      console: 'open',
+    },
+  };
+
+  const onMounted = (container: HTMLElement) => {
+    createPlayground(container, options).then((sdk) => {
+      playground = sdk; // now the SDK is available
+    });
+  };
+  onCleanup(() => playground?.destroy());
+
+  return <div ref={onMounted}></div>;
+}
+```
+
+export const solidSDKDemo = {
+  "solid.tsx": `import { onCleanup } from 'solid-js';
+import { createPlayground, type Playground, type EmbedOptions } from 'livecodes';
+
+export default function App() {
+  let playground: Playground | null = null;
+
+  const options: EmbedOptions = {
+    params: {
+      html: '<h1>Hello World!</h1>',
+      css: 'h1 {color: blue;}',
+      js: 'console.log("Hello, Solid!")',
+      console: 'open',
+    },
+  };
+
+  const onMounted = (container: HTMLElement) => {
+    createPlayground(container, options).then((sdk) => {
+      playground = sdk; // now the SDK is available
+    });
+  };
+  onCleanup(() => playground?.destroy());
+
+  return <div ref={onMounted}></div>;
+}
+`,
+};
+
+<RunInLiveCodes params={solidSDKDemo}></RunInLiveCodes>
+
+[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).
+
+## Demo
+
+<LiveCodes params={solidSDKDemo} height="80vh" />
+
+## Related
+
+- [SDK Installation](./index.mdx#installation)
+- [JS/TS SDK](./js-ts.mdx)
+- [React SDK](./react.mdx)
+- [Vue SDK](./vue.mdx)
+- [Using SDK in Svelte](./svelte.mdx)
+- [Embedded Playgrounds](../features/embeds.mdx)

docs/docs/sdk/svelte.mdx

@@ -97,4 +97,5 @@ However, it is recommended to cleanup when the node is unmounted, like that:
 - [JS/TS SDK](./js-ts.mdx)
 - [React SDK](./react.mdx)
 - [Vue SDK](./vue.mdx)
+- [Using SDK in Solid](./solid.mdx)
 - [Embedded Playgrounds](../features/embeds.mdx)

docs/docs/sdk/vue.mdx

@@ -163,4 +163,5 @@ export const vueSDKDemo = {
 - [JS/TS SDK](./js-ts.mdx)
 - [React SDK](./react.mdx)
 - [Using SDK in Svelte](./svelte.mdx)
+- [Using SDK in Solid](./solid.mdx)
 - [Embedded Playgrounds](../features/embeds.mdx)

docs/sidebars.ts

@@ -85,7 +85,7 @@ const sidebars: SidebarsConfig = {
             type: 'doc',
             id: 'sdk/index',
           },
-          items: ['sdk/js-ts', 'sdk/react', 'sdk/vue', 'sdk/svelte', 'sdk/headless'],
+          items: ['sdk/js-ts', 'sdk/react', 'sdk/vue', 'sdk/svelte', 'sdk/solid', 'sdk/headless'],
         },
         {
           type: 'category',

docs/src/components/HomepageFeatures.tsx

@@ -151,9 +151,9 @@ const FeatureList3: FeatureItem[] = [
         <Link to="./sdk/">SDK</Link> facilitates <Link to="./features/embeds">embedding</Link>{' '}
         playgrounds and allows easy <Link to="./sdk/js-ts#sdk-methods">communication</Link> with
         them. The SDK is available for <Link to="./sdk/js-ts">vanilla JS/TS</Link>,{' '}
-        <Link to="./sdk/react">React</Link>, <Link to="./sdk/vue">Vue</Link> and{' '}
-        <Link to="./sdk/svelte">Svelte</Link>. There is also a{' '}
-        <Link to="./sdk/headless">headless mode</Link> for full control over the UI.
+        <Link to="./sdk/react">React</Link>, <Link to="./sdk/vue">Vue</Link>,{' '}
+        <Link to="./sdk/svelte">Svelte</Link> and <Link to="./sdk/solid">Solid</Link>. There is also
+        a <Link to="./sdk/headless">headless mode</Link> for full control over the UI.
       </>
     ),
   },

docs/src/components/LiveCodes.tsx

@@ -71,6 +71,20 @@ onMount(() => {
 
 <div bind:this="{container}"></div>
 
+`.trimStart();
+
+  const solidCode = `
+import { createPlayground, type EmbedOptions } from 'livecodes';
+
+export default function App() {
+  const options: EmbedOptions = ${stringify(options)};
+  const onMounted = (container: HTMLElement) => {
+    createPlayground(container, options);
+  };
+
+  return <div ref={onMounted}></div>;
+}
+
 `.trimStart();
 
   return (
@@ -96,6 +110,7 @@ onMount(() => {
           react={reactCode}
           vue={vueCode}
           svelte={svelteCode}
+          solid={solidCode}
         ></ShowCode>
       )}
     </>

docs/src/components/ShowCode.tsx

@@ -14,12 +14,14 @@ export default function ShowCode(props: {
   react: string;
   vue: string;
   svelte: string;
+  solid: string;
 }): ReactNode {
   const [jsCode, setJsCode] = useState(props.js);
   const [tsCode, setTsCode] = useState(props.ts);
   const [reactCode, setReactCode] = useState(props.react);
   const [vueCode, setVueCode] = useState(props.vue);
   const [svelteCode, setSvelteCode] = useState(props.svelte);
+  const [solidCode, setSolidCode] = useState(props.solid);
 
   const codeBlockTitleHeight = '3.7rem';
   const [codeCollapsed, setCodeCollapsed] = useState(true);
@@ -57,6 +59,7 @@ export default function ShowCode(props: {
       setReactCode(format(reactCode, 'jsx'));
       setVueCode(format(vueCode, 'html'));
       setSvelteCode(format(svelteCode, 'html'));
+      setSolidCode(format(solidCode, 'tsx'));
     }
   }, []);
 
@@ -97,6 +100,9 @@ export default function ShowCode(props: {
             <TabItem value="svelte" label="Svelte" attributes={{ onMouseDown: resize }}>
               <CodeBlock language="html">{svelteCode}</CodeBlock>
             </TabItem>
+            <TabItem value="solid" label="Solid" attributes={{ onMouseDown: resize }}>
+              <CodeBlock language="tsx">{solidCode}</CodeBlock>
+            </TabItem>
           </Tabs>
         </div>
       </div>