Svelte

import LiveCodes from '../../src/components/LiveCodes.tsx'; import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';

The JS/TS SDK can be used directly in Svelte components without the need for any wrappers.

Installation

Please refer to the SDK installation#installation) section.

Usage

This is an example of using the LiveCodes JS SDK in a Svelte component:

<script>
  import { onMount } from 'svelte';
  import { createPlayground } from 'livecodes';

  // Embed Options
  const options = {
    params: {
      html: '<h1>Hello World!</h1>',
      css: 'h1 {color: blue;}',
      js: 'console.log("Hello, Svelte!")',
      console: 'open',
    },
  };

  let container;
  let playground = $state(null);
  onMount(() => {
    createPlayground(container, options).then((p) => {
      playground = p; // now the SDK is available
    });
    // cleanup when the component is destroyed
    return () => playground?.destroy();
  });
</script>

<div bind:this="{container}"></div>

export const svelteSDKDemo = { svelte: \x3Cscript>\n import { onMount } from 'svelte';\n import { createPlayground } from 'livecodes';\n\n // Embed Options\n const options = {\n params: {\n html: '<h1>Hello World!</h1>',\n css: 'h1 {color: blue;}',\n js: 'console.log("Hello, Svelte!")',\n console: 'open',\n },\n };\n\n let container;\n let playground = $state(null);\n onMount(() => {\n createPlayground(container, options).then((p) => {\n playground = p; // now the SDK is available\n });\n // cleanup when the component is destroyed\n return () => playground?.destroy();\n });\n\x3C/script>\n\n<div bind:this="{container}"></div>\n, };

Embed options#embed-options), SDK methods#sdk-methods) and TypeScript types#typescript-types) are available as described in the JS/TS SDK documentations.

Alternatively, the SDK function createPlayground#createplayground) can be used as an action.

Example:

<script>
  import { createPlayground } from 'livecodes';
  let options = {
    // embed options
  };
</script>

<div use:createPlayground="{options}"></div>

However, it is recommended to cleanup when the node is unmounted, like that:

<script>
  import { createPlayground } from 'livecodes';
  let options = {
    // embed options
  };

  const livecodes = (node, opts) => {
    let playground = $state(null);
    const ready = new Promise(async (res) => {
      playground = await createPlayground(node, opts);
      res();
    });
    return { destroy: () => ready.then(() => playground?.destroy()) };
  };
</script>

<div use:livecodes="{options}"></div>

3.2 KiB Raw Permalink Blame History

Svelte

Installation

Usage

Demo

Related

3.2 KiB

Raw Permalink Blame History