commit 12142583791bb4c571b442dc367063e0c369a56f Author: yangxin Date: Wed Jun 11 22:23:49 2025 +0800 打包好的livecode,版本v-46 diff --git a/404.html b/404.html new file mode 100644 index 0000000..849045d --- /dev/null +++ b/404.html @@ -0,0 +1 @@ +404
The bad news

The page you requested is not found!

The good news

You can have some fun with this interactive playground 🎉

LiveCodes with 404 stamp \ No newline at end of file diff --git a/app.html b/app.html new file mode 100644 index 0000000..d09950f --- /dev/null +++ b/app.html @@ -0,0 +1 @@ +LiveCodes \ No newline at end of file diff --git a/docs/.nojekyll b/docs/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/docs/404.html b/docs/404.html new file mode 100644 index 0000000..9af4ad3 --- /dev/null +++ b/docs/404.html @@ -0,0 +1,3 @@ +LiveCodes
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

\ No newline at end of file diff --git a/docs/about.html.md b/docs/about.html.md new file mode 100644 index 0000000..92cfec2 --- /dev/null +++ b/docs/about.html.md @@ -0,0 +1,11 @@ +# About us + +LiveCodes is built and maintained by [Hatem Hosny](https://github.com/hatemhosny), and wonderful [contributors](https://github.com/live-codes/livecodes/graphs/contributors). + +Feature requests and bug reports are received on the [GitHub repo](https://github.com/live-codes/livecodes/issues). + +Contributions are most welcome. Please open an issue on the GitHub repo to discuss your potential contribution before submitting a pull request. + +Reach out to us using this [contact form](./contact.html.md). + +Please consider [sponsoring LiveCodes](./sponsor.html.md) to support its maintenance and continued development. \ No newline at end of file diff --git a/docs/about/index.html b/docs/about/index.html new file mode 100644 index 0000000..b23f33c --- /dev/null +++ b/docs/about/index.html @@ -0,0 +1,16 @@ +About us | LiveCodes
Skip to main content

About us

+

LiveCodes is built and maintained by Hatem Hosny, and wonderful contributors.

+

Feature requests and bug reports are received on the GitHub repo.

+

Contributions are most welcome. Please open an issue on the GitHub repo to discuss your potential contribution before submitting a pull request.

+

Reach out to us using this contact form.

+

Please consider sponsoring LiveCodes to support its maintenance and continued development.

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/advanced/custom-settings.html.md b/docs/advanced/custom-settings.html.md new file mode 100644 index 0000000..4184c20 --- /dev/null +++ b/docs/advanced/custom-settings.html.md @@ -0,0 +1 @@ +# Custom Settings \ No newline at end of file diff --git a/docs/advanced/custom-settings/index.html b/docs/advanced/custom-settings/index.html new file mode 100644 index 0000000..e250387 --- /dev/null +++ b/docs/advanced/custom-settings/index.html @@ -0,0 +1,11 @@ +Custom Settings | LiveCodes
Skip to main content
+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/advanced/index.html b/docs/advanced/index.html new file mode 100644 index 0000000..dee6eec --- /dev/null +++ b/docs/advanced/index.html @@ -0,0 +1,13 @@ +Advanced Topics | LiveCodes
Skip to main content
+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/advanced/index.html.md b/docs/advanced/index.html.md new file mode 100644 index 0000000..bcee2ce --- /dev/null +++ b/docs/advanced/index.html.md @@ -0,0 +1,8 @@ +# Advanced Topics {#advanced-topics-custom-content-top} + +```mdx-code-block +import DocCardList from '@theme/DocCardList'; +import {useCurrentSidebarCategory} from '@docusaurus/theme-common'; + + item.docId !== 'languages/index')}/> +``` \ No newline at end of file diff --git a/docs/advanced/services.html.md b/docs/advanced/services.html.md new file mode 100644 index 0000000..24a7cd1 --- /dev/null +++ b/docs/advanced/services.html.md @@ -0,0 +1,30 @@ +# Services + +LiveCodes (being a client-side app) uses multiple services (for example for authentication, sharing, module resolution, etc). + +These services are [defined here](https://github.com/live-codes/livecodes/tree/develop/src/livecodes/services). + +Some of the services are not supported on [self-hosted](../features/self-hosting.html.md) deploys and are either replaced by other compatible services or require you to provide an alternative service. + +Examples: + +- The [share](../features/share.html.md) service in [self-hosted](../features/self-hosting.html.md) apps uses [dpaste](https://dpaste.com/) for short URLs, which are [**deleted after 365 days**](https://dpaste.com/help). +- [Firebase configuration](https://github.com/live-codes/livecodes/tree/develop/src/livecodes/services/firebase.ts) for authentication. + +:::info + +LiveCodes [sponsors](../sponsor.html.md) (Bronze sponsors and above) get access to managed custom services. + +::: + +If you [self-host](../features/self-hosting.html.md) your app and need to change any of these services, start by following the [guide described there](../features/self-hosting.html.md). + +Then, edit the services you want (in [`src/livecodes/services`](https://github.com/live-codes/livecodes/tree/develop/src/livecodes/services)). The used services need to have the same interface. + +The app then needs to be re-built using the command: + +```shell +npm run build +``` + +The built app is in `build` directory. This can be hosted on any static file server. \ No newline at end of file diff --git a/docs/advanced/services/index.html b/docs/advanced/services/index.html new file mode 100644 index 0000000..be82def --- /dev/null +++ b/docs/advanced/services/index.html @@ -0,0 +1,25 @@ +Services | LiveCodes
Skip to main content

Services

+

LiveCodes (being a client-side app) uses multiple services (for example for authentication, sharing, module resolution, etc).

+

These services are defined here.

+

Some of the services are not supported on self-hosted deploys and are either replaced by other compatible services or require you to provide an alternative service.

+

Examples:

+ +
info

LiveCodes sponsors (Bronze sponsors and above) get access to managed custom services.

+

If you self-host your app and need to change any of these services, start by following the guide described there.

+

Then, edit the services you want (in src/livecodes/services). The used services need to have the same interface.

+

The app then needs to be re-built using the command:

+
npm run build
+

The built app is in build directory. This can be hosted on any static file server.

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/functions/createPlayground.html.md b/docs/api/functions/createPlayground.html.md new file mode 100644 index 0000000..2df532b --- /dev/null +++ b/docs/api/functions/createPlayground.html.md @@ -0,0 +1,44 @@ +# Function: createPlayground() + +## createPlayground(container, options) + +> **createPlayground**(`container`, `options`?): `Promise`\<[`Playground`](../interfaces/Playground.md)\> + +Creates a LiveCodes playground. + +### Parameters + +• **container**: `string` \| `HTMLElement` + +`HTMLElement` or a string representing a CSS selector. This is the container where the playground is rendered. + If not found, an error is thrown (except in [headless mode](https://livecodes.io/docs/sdk/headless), in which this parameter is optional and can be omitted). + +• **options?**: [`EmbedOptions`](../interfaces/EmbedOptions.md) + +The [embed options](https://livecodes.io/docs/sdk/js-ts#embed-options) for the playground (optional). + +### Returns + +`Promise`\<[`Playground`](../interfaces/Playground.md)\> + +- A promise that resolves to a [`Playground`](https://livecodes.io/docs/api/interfaces/Playground/) object which exposes many [SDK methods](https://livecodes.io/docs/sdk/js-ts/#sdk-methods) that can be used to interact with the playground. + +### Defined in + +[index.ts:26](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/index.ts#L26) + +## createPlayground(options) + +> **createPlayground**(`options`): `Promise`\<[`Playground`](../interfaces/Playground.md)\> + +### Parameters + +• **options**: [`EmbedOptions`](../interfaces/EmbedOptions.md) & `object` + +### Returns + +`Promise`\<[`Playground`](../interfaces/Playground.md)\> + +### Defined in + +[index.ts:30](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/index.ts#L30) \ No newline at end of file diff --git a/docs/api/functions/createPlayground/index.html b/docs/api/functions/createPlayground/index.html new file mode 100644 index 0000000..8e00f7f --- /dev/null +++ b/docs/api/functions/createPlayground/index.html @@ -0,0 +1,39 @@ +Function: createPlayground() | LiveCodes
Skip to main content

Function: createPlayground()

+

createPlayground(container, options)​

+
+

createPlayground(container, options?): Promise<Playground>

+
+

Creates a LiveCodes playground.

+

Parameters​

+

• container: string | HTMLElement

+

HTMLElement or a string representing a CSS selector. This is the container where the playground is rendered. +If not found, an error is thrown (except in headless mode, in which this parameter is optional and can be omitted).

+

• options?: EmbedOptions

+

The embed options for the playground (optional).

+

Returns​

+

Promise<Playground>

+
    +
  • A promise that resolves to a Playground object which exposes many SDK methods that can be used to interact with the playground.
    • +
+

Defined in​

+

index.ts:26

+

createPlayground(options)​

+
+

createPlayground(options): Promise<Playground>

+
+

Parameters​

+

• options: EmbedOptions & object

+

Returns​

+

Promise<Playground>

+

Defined in​

+

index.ts:30

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/functions/getPlaygroundUrl.html.md b/docs/api/functions/getPlaygroundUrl.html.md new file mode 100644 index 0000000..a384ce9 --- /dev/null +++ b/docs/api/functions/getPlaygroundUrl.html.md @@ -0,0 +1,25 @@ +# Function: getPlaygroundUrl() + +> **getPlaygroundUrl**(`options`): `string` + +Gets the URL to a LiveCodes playground (as a string) from the provided [options](https://livecodes.io/docs/sdk/js-ts#embed-options). +This can be useful for providing links to run code in playgrounds. + +## Parameters + +• **options**: [`EmbedOptions`](../interfaces/EmbedOptions.md) = `{}` + +The [options](https://livecodes.io/docs/sdk/js-ts#embed-options) for the playground. + +## Returns + +`string` + +- The URL of the playground (as a string). + +large objects like config and params are store in the url hash params while the rest are in the search params +unless config is a string in which case it is stored in searchParams + +## Defined in + +[index.ts:391](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/index.ts#L391) \ No newline at end of file diff --git a/docs/api/functions/getPlaygroundUrl/index.html b/docs/api/functions/getPlaygroundUrl/index.html new file mode 100644 index 0000000..afb652d --- /dev/null +++ b/docs/api/functions/getPlaygroundUrl/index.html @@ -0,0 +1,28 @@ +Function: getPlaygroundUrl() | LiveCodes
Skip to main content

Function: getPlaygroundUrl()

+
+

getPlaygroundUrl(options): string

+
+

Gets the URL to a LiveCodes playground (as a string) from the provided options. +This can be useful for providing links to run code in playgrounds.

+

Parameters​

+

• options: EmbedOptions = {}

+

The options for the playground.

+

Returns​

+

string

+
    +
  • The URL of the playground (as a string).
    • +
+

large objects like config and params are store in the url hash params while the rest are in the search params +unless config is a string in which case it is stored in searchParams

+

Defined in​

+

index.ts:391

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/globals/index.html b/docs/api/globals/index.html new file mode 100644 index 0000000..f70e2f3 --- /dev/null +++ b/docs/api/globals/index.html @@ -0,0 +1,31 @@ +livecodes | LiveCodes
Skip to main content
+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/index.html b/docs/api/index.html new file mode 100644 index 0000000..5b6030b --- /dev/null +++ b/docs/api/index.html @@ -0,0 +1,167 @@ +LiveCodes | LiveCodes
Skip to main content

LiveCodes

+

A Code Playground That Just Works!

+

+

A feature-rich, open-source, client-side code playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and 90+ languages/frameworks.

+

LiveCodes: uptime status +LiveCodes: app version +LiveCodes: npm version +LiveCodes: npm downloads +LiveCodes: jsdelivr downloads +LiveCodes: languages +LiveCodes: docs +LiveCodes: llms.txt +LiveCodes: llms-full.txt +Codacy Badge +Lokalise: translated +Lokalise: UI languages +license - MIT +LiveCodes: GitHub repo +LiveCodes: GitHub repo +Follow us on X (formerly Twitter)

+

Try it now on livecodes.io

+

Documentations

+

What makes LiveCodes different?

+

LiveCodes list of languages screenshot

+

A Code Playground That Just Works!​

+
    +
  • No servers to configure (or pay for!)
    • +
  • No databases to maintain (or pay for!)
    • +
  • No installs
    • +
  • No configuration files
    • +
  • No build steps
    • +
  • No subscription fees (free and open-source)
    • +
  • No account required *
    • +
  • No limits for usage (unlimited private projects)
    • +
  • 90+ languages/frameworks/processors
    • +
  • Large set of features and integrations
    • +
  • Import code from a wide variety of sources
    • +
  • Use modules from npm, deno.land/x, jsr, GitHub, and others
    • +
  • Easily embed it in your web pages
    • +
  • It runs in the browser (client-side)
    • +
+* GitHub account is required only for features that use GitHub Integration. +

Quick Start​

+

Standalone App​

+
    +
  1. Go to livecodes.io
    2. +
+

... and enjoy all the features!

+

Embedded Playground​

+

Add this code to your page:

+
<div id="container"></div>
<script type="module">
  import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes';

  createPlayground('#container', {
    params: {
      markdown: '# Hello LiveCodes!',
      css: 'h1 {color: dodgerblue;}',
      js: 'console.log("Hello, from JS!");',
      console: 'open',
    },
  });
</script>
+Check documentations for Embedded Playgrounds. +

Self-hosted​

+
    +
  1. +

    Download a release

    +
    2. +
  2. +

    Put it on a static file server (for free!) 1, 2, 3, 4, 5

    +Check the guide for self-hosting (including the built-in setup to deploy to GitHub Pages). +
    3. +
+

... and it just works!

+

Feature Summary​

+ +

For details check the full list of features.

+

LiveCodes SDK​

+

The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds.

+

The SDK is provided as a light-weight (less than 5kb gzipped), zero-dependencies npm package, that is also available from CDNs. It can be used to create playgrounds with a wide variety of configurations and embed options. In addition, SDK methods allow programmatic communication and control of the playgrounds during runtime.

+

Installation​

+
npm i livecodes
+

Usage​

+

Example: (open in LiveCodes)

+
import { createPlayground } from 'livecodes';

createPlayground('#container', {
  config: {
    markup: {
      language: 'markdown',
      content: '# Hello World!',
    },
  },
  view: 'result',
});
+

The JavaScript SDK is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently React and Vue). The SDK can be used in Svelte directly without wrappers. TypeScript support provides type-safety and a great developer experience.

+

React SDK example: (open in LiveCodes)

+
import LiveCodes from 'livecodes/react';

const config = {
  markup: {
    language: 'markdown',
    content: '# Hello World!',
  },
};
const Playground = () => <LiveCodes config={config} view="result" />;
export default Playground;
+

Vue SDK example: (open in LiveCodes)

+
<script setup>
  import LiveCodes from 'livecodes/vue';

  const config = {
    markup: {
      language: 'markdown',
      content: '# Hello World!',
    },
  };
</script>

<template>
  <LiveCodes :config="config" view="result" />
</template>
+

In addition, the SDK allows creating links to playgrounds:

+
import { getPlaygroundUrl } from 'livecodes';

const url = getPlaygroundUrl({
  config: {
    markup: {
      language: 'markdown',
      content: '# Hello World!',
    },
  },
});

console.log(url);
+

See SDK docs for more details.

+

Documentations​

+

Comprehensive documentations for features, getting started, configuration and SDK are available on:

+

https://livecodes.io/docs/

+

The documentations include demos, code samples, screenshots, Storybook and TypeScript types.

+

Updates​

+

Keep up with the latest changes:

+ +

Feedback​

+

We welcome feedback!

+

Please start a new issue or discussion.

+

For security reports please refer to SECURITY.md.

+

You may also reach out to us using the contact form.

+

Contribution​

+

Contributions are welcome and highly appreciated.

+

A huge shout-out to our wonderful contributors! Your hard work makes all the difference!

+

Please refer to the contribution guide.

+

Credits​

+

LiveCodes uses services that are generously provided by:

+

Cloudflare Pages

+

jsDelivr

+

esm.sh

+

unpkg

+

Codeium

+

bundlejs

+

dpaste

+

GitHub

+

Netlify

+

SonarCloud

+

Codacy

+

BundleWatch

+

BrowserStack

+

Lokalise

+

Third Party Packages​

+

Packages used by LiveCodes and their licenses are listed here.

+

License​

+

MIT License © Hatem Hosny

+ +

LiveCodes is free and open-source. The app does not contain ads or require subscription. It allows unlimited usage without any restrictions.

+

By sponsoring LiveCodes, you will be supporting the ongoing development and maintenance of the project, as well as helping to ensure that it remains a valuable resource for the developer community.

+

Please consider becoming a sponsor.

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/interfaces/Code.html.md b/docs/api/interfaces/Code.html.md new file mode 100644 index 0000000..f1067d3 --- /dev/null +++ b/docs/api/interfaces/Code.html.md @@ -0,0 +1,82 @@ +# Interface: Code + +An object that contains the language, content and compiled code for each of the 3 [code editors](https://livecodes.io/docs/features/projects) +and the [result page](https://livecodes.io/docs/features/result) HTML. + +See [docs](https://livecodes.io/docs/api/interfaces/Code) for details. + +## Properties + +### markup + +> **markup**: `object` + +#### compiled + +> **compiled**: `string` + +#### content + +> **content**: `string` + +#### language + +> **language**: [`Language`](../type-aliases/Language.md) + +#### Defined in + +[models.ts:1908](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1908) + +*** + +### result + +> **result**: `string` + +#### Defined in + +[models.ts:1923](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1923) + +*** + +### script + +> **script**: `object` + +#### compiled + +> **compiled**: `string` + +#### content + +> **content**: `string` + +#### language + +> **language**: [`Language`](../type-aliases/Language.md) + +#### Defined in + +[models.ts:1918](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1918) + +*** + +### style + +> **style**: `object` + +#### compiled + +> **compiled**: `string` + +#### content + +> **content**: `string` + +#### language + +> **language**: [`Language`](../type-aliases/Language.md) + +#### Defined in + +[models.ts:1913](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1913) \ No newline at end of file diff --git a/docs/api/interfaces/Code/index.html b/docs/api/interfaces/Code/index.html new file mode 100644 index 0000000..3bb278d --- /dev/null +++ b/docs/api/interfaces/Code/index.html @@ -0,0 +1,78 @@ +Interface: Code | LiveCodes
Skip to main content

Interface: Code

+

An object that contains the language, content and compiled code for each of the 3 code editors +and the result page HTML.

+

See docs for details.

+

Properties​

+

markup​

+
+

markup: object

+
+

compiled​

+
+

compiled: string

+
+

content​

+
+

content: string

+
+

language​

+
+

language: Language

+
+

Defined in​

+

models.ts:1908

+
+

result​

+
+

result: string

+
+

Defined in​

+

models.ts:1923

+
+

script​

+
+

script: object

+
+

compiled​

+
+

compiled: string

+
+

content​

+
+

content: string

+
+

language​

+
+

language: Language

+
+

Defined in​

+

models.ts:1918

+
+

style​

+
+

style: object

+
+

compiled​

+
+

compiled: string

+
+

content​

+
+

content: string

+
+

language​

+
+

language: Language

+
+

Defined in​

+

models.ts:1913

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/interfaces/Config.html.md b/docs/api/interfaces/Config.html.md new file mode 100644 index 0000000..5d2d6f5 --- /dev/null +++ b/docs/api/interfaces/Config.html.md @@ -0,0 +1,2420 @@ +# Interface: Config + +The playground [configuration object](https://livecodes.io/docs/configuration/configuration-object). + +It is an object that holds the configuration and state of the playground. + +See [docs](https://livecodes.io/docs/configuration/configuration-object) for details. + +## Extends + +- [`ContentConfig`](../internal/interfaces/ContentConfig.md).[`AppConfig`](../internal/interfaces/AppConfig.md).[`UserConfig`](../internal/interfaces/UserConfig.md) + +## Properties + +### activeEditor + +> **activeEditor**: `undefined` \| [`EditorId`](../internal/type-aliases/EditorId.md) + +Selects the active editor to show. + +Defaults to the last used editor for user, otherwise `"markup"` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`activeEditor`](../internal/interfaces/ContentConfig.md#activeeditor) + +#### Defined in + +[models.ts:455](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L455) + +*** + +### allowLangChange + +> **allowLangChange**: `boolean` + +If `false`, the UI will not show the menu that allows changing editor language. + +#### Default + +```ts +true +``` + +#### Inherited from + +[`AppConfig`](../internal/interfaces/AppConfig.md).[`allowLangChange`](../internal/interfaces/AppConfig.md#allowlangchange) + +#### Defined in + +[models.ts:603](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L603) + +*** + +### appLanguage + +> **appLanguage**: `undefined` \| [`AppLanguage`](../internal/type-aliases/AppLanguage.md) + +Sets the app UI language used. + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`appLanguage`](../internal/interfaces/UserConfig.md#applanguage) + +#### Defined in + +[models.ts:707](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L707) + +*** + +### autosave + +> **autosave**: `boolean` + +If `true`, the project is automatically saved on code change, +after time [delay](https://livecodes.io/docs/configuration/configuration-object#delay). + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`autosave`](../internal/interfaces/UserConfig.md#autosave) + +#### Defined in + +[models.ts:656](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L656) + +*** + +### autotest + +> **autotest**: `boolean` + +If `true`, the project is watched for code changes which trigger tests to auto-run. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`autotest`](../internal/interfaces/UserConfig.md#autotest) + +#### Defined in + +[models.ts:662](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L662) + +*** + +### autoupdate + +> **autoupdate**: `boolean` + +If `true`, the result page is automatically updated on code change, +after time [delay](https://livecodes.io/docs/configuration/configuration-object#delay). + +#### Default + +```ts +true +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`autoupdate`](../internal/interfaces/UserConfig.md#autoupdate) + +#### Defined in + +[models.ts:649](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L649) + +*** + +### closeBrackets + +> **closeBrackets**: `boolean` + +Use auto-complete to close brackets and quotes. + +#### Default + +```ts +true +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`closeBrackets`](../internal/interfaces/UserConfig.md#closebrackets) + +#### Defined in + +[models.ts:801](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L801) + +*** + +### cssPreset + +> **cssPreset**: [`CssPresetId`](../internal/type-aliases/CssPresetId.md) + +[CSS Preset](https://livecodes.io/docs/features/external-resources#css-presets) to use. + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`cssPreset`](../internal/interfaces/ContentConfig.md#csspreset) + +#### Defined in + +[models.ts:502](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L502) + +*** + +### customSettings + +> **customSettings**: `object` + +Defines [custom settings](https://livecodes.io/docs/advanced/custom-settings) for the current project. + +#### adoc + +> **adoc**: `any` + +#### app.svelte + +> **svelte**: `any` + +#### app.vue + +> **vue**: `any` + +#### art + +> **art**: `any` + +#### art-template + +> **art-template**: `any` + +#### as + +> **as**: `any` + +#### asc + +> **asc**: `any` + +#### asciidoc + +> **asciidoc**: `any` + +#### assemblyscript + +> **assemblyscript**: `any` + +#### astro + +> **astro**: `any` + +#### autoprefixer + +> **autoprefixer**: `any` + +#### babel + +> **babel**: `any` + +#### bb + +> **bb**: `any` + +#### bbcode + +> **bbcode**: `any` + +#### Binary + +> **Binary**: `any` + +#### blockly + +> **blockly**: `any` + +#### blockly.xml + +> **xml**: `any` + +#### c + +> **c**: `any` + +#### C + +> **C**: `any` + +#### c++ + +> **c++**: `any` + +#### civet + +> **civet**: `any` + +#### clang + +> **clang**: `any` + +#### clang.cpp + +> **cpp**: `any` + +#### clio + +> **clio**: `any` + +#### clj + +> **clj**: `any` + +#### cljc + +> **cljc**: `any` + +#### cljs + +> **cljs**: `any` + +#### clojure + +> **clojure**: `any` + +#### clojurescript + +> **clojurescript**: `any` + +#### coffee + +> **coffee**: `any` + +#### coffeescript + +> **coffeescript**: `any` + +#### common-lisp + +> **common-lisp**: `any` + +#### commonlisp + +> **commonlisp**: `any` + +#### convertCommonjs? + +> `optional` **convertCommonjs**: `boolean` + +#### cp + +> **cp**: `any` + +#### cpp + +> **cpp**: `any` + +#### cpp-wasm + +> **cpp-wasm**: `any` + +#### cppm + +> **cppm**: `any` + +#### cppwasm + +> **cppwasm**: `any` + +#### cs + +> **cs**: `any` + +#### cs-wasm + +> **cs-wasm**: `any` + +#### csharp + +> **csharp**: `any` + +#### csharp-wasm + +> **csharp-wasm**: `any` + +#### css + +> **css**: `any` + +#### cssmodules + +> **cssmodules**: `any` + +#### cssnano + +> **cssnano**: `any` + +#### cwasm + +> **cwasm**: `any` + +#### cxx + +> **cxx**: `any` + +#### defaultCDN? + +> `optional` **defaultCDN**: [`CDN`](../internal/type-aliases/CDN.md) + +#### diagram + +> **diagram**: `any` + +#### diagrams + +> **diagrams**: `any` + +#### dot + +> **dot**: `any` + +#### edn + +> **edn**: `any` + +#### ejs + +> **ejs**: `any` + +#### es + +> **es**: `any` + +#### eta + +> **eta**: `any` + +#### fennel + +> **fennel**: `any` + +#### flow + +> **flow**: `any` + +#### fnl + +> **fnl**: `any` + +#### gleam + +> **gleam**: `any` + +#### go + +> **go**: `any` + +#### golang + +> **golang**: `any` + +#### graph + +> **graph**: `any` + +#### h + +> **h**: `any` + +#### haml + +> **haml**: `any` + +#### handlebars + +> **handlebars**: `any` + +#### hbs + +> **hbs**: `any` + +#### hpp + +> **hpp**: `any` + +#### htm + +> **htm**: `any` + +#### html + +> **html**: `any` + +#### ii + +> **ii**: `any` + +#### imba + +> **imba**: `any` + +#### imports? + +> `optional` **imports**: `Record`\<`string`, `string`\> + +#### ixx + +> **ixx**: `any` + +#### jade + +> **jade**: `any` + +#### java + +> **java**: `any` + +#### javascript + +> **javascript**: `any` + +#### jinja + +> **jinja**: `any` + +#### jl + +> **jl**: `any` + +#### js + +> **js**: `any` + +#### json + +> **json**: `any` + +#### jsx + +> **jsx**: `any` + +#### julia + +> **julia**: `any` + +#### less + +> **less**: `any` + +#### lightningcss + +> **lightningcss**: `any` + +#### liquid + +> **liquid**: `any` + +#### liquidjs + +> **liquidjs**: `any` + +#### lisp + +> **lisp**: `any` + +#### livescript + +> **livescript**: `any` + +#### ls + +> **ls**: `any` + +#### lua + +> **lua**: `any` + +#### lua-wasm + +> **lua-wasm**: `any` + +#### luawasm + +> **luawasm**: `any` + +#### malina + +> **malina**: `any` + +#### malinajs + +> **malinajs**: `any` + +#### mapImports? + +> `optional` **mapImports**: `boolean` + +#### markdown + +> **markdown**: `any` + +#### md + +> **md**: `any` + +#### mdown + +> **mdown**: `any` + +#### mdx + +> **mdx**: `any` + +#### mjml + +> **mjml**: `any` + +#### mkdn + +> **mkdn**: `any` + +#### ml + +> **ml**: `any` + +#### mli + +> **mli**: `any` + +#### mustache + +> **mustache**: `any` + +#### njk + +> **njk**: `any` + +#### nunjucks + +> **nunjucks**: `any` + +#### ocaml + +> **ocaml**: `any` + +#### perl + +> **perl**: `any` + +#### pg + +> **pg**: `any` + +#### pg.sql + +> **sql**: `any` + +#### pglite + +> **pglite**: `any` + +#### pglite.sql + +> **sql**: `any` + +#### pgsql + +> **pgsql**: `any` + +#### pgsql.sql + +> **sql**: `any` + +#### php + +> **php**: `any` + +#### php-wasm + +> **php-wasm**: `any` + +#### phpwasm + +> **phpwasm**: `any` + +#### pintora + +> **pintora**: `any` + +#### pl + +> **pl**: `any` + +#### plt + +> **plt**: `any` + +#### pm + +> **pm**: `any` + +#### postcss + +> **postcss**: `any` + +#### postcssImportUrl + +> **postcssImportUrl**: `any` + +#### postcssPresetEnv + +> **postcssPresetEnv**: `any` + +#### postgre.sql + +> **sql**: `any` + +#### postgres + +> **postgres**: `any` + +#### postgresql + +> **postgresql**: `any` + +#### postgresql.sql + +> **sql**: `any` + +#### prolog + +> **prolog**: `any` + +#### prolog.pl + +> **pl**: `any` + +#### pug + +> **pug**: `any` + +#### purgecss + +> **purgecss**: `any` + +#### py + +> **py**: `any` + +#### py-wasm + +> **py-wasm**: `any` + +#### py3 + +> **py3**: `any` + +#### pyodide + +> **pyodide**: `any` + +#### python + +> **python**: `any` + +#### python-wasm + +> **python-wasm**: `any` + +#### pythonwasm + +> **pythonwasm**: `any` + +#### pywasm + +> **pywasm**: `any` + +#### r + +> **r**: `any` + +#### r-wasm + +> **r-wasm**: `any` + +#### rb + +> **rb**: `any` + +#### re + +> **re**: `any` + +#### react + +> **react**: `any` + +#### react-jsx + +> **react-jsx**: `any` + +#### react-native + +> **react-native**: `any` + +#### react-native-tsx + +> **react-native-tsx**: `any` + +#### react-native.jsx + +> **jsx**: `any` + +#### react-native.tsx + +> **tsx**: `any` + +#### react-tsx + +> **react-tsx**: `any` + +#### react.jsx + +> **jsx**: `any` + +#### react.tsx + +> **tsx**: `any` + +#### reason + +> **reason**: `any` + +#### rei + +> **rei**: `any` + +#### res + +> **res**: `any` + +#### rescript + +> **rescript**: `any` + +#### resi + +> **resi**: `any` + +#### rich + +> **rich**: `any` + +#### richtext + +> **richtext**: `any` + +#### riot + +> **riot**: `any` + +#### riotjs + +> **riotjs**: `any` + +#### rlang + +> **rlang**: `any` + +#### rstats + +> **rstats**: `any` + +#### rte + +> **rte**: `any` + +#### rte.html + +> **html**: `any` + +#### ruby + +> **ruby**: `any` + +#### ruby-wasm + +> **ruby-wasm**: `any` + +#### rubywasm + +> **rubywasm**: `any` + +#### sass + +> **sass**: `any` + +#### scheme + +> **scheme**: `any` + +#### scm + +> **scm**: `any` + +#### scriptType? + +> `optional` **scriptType**: `""` \| `"module"` \| `"text/liquid"` \| `"text/python"` \| `"text/r"` \| `"text/ruby-wasm"` \| `"text/x-uniter-php"` \| `"text/php-wasm"` \| `"text/cpp"` \| `"text/java"` \| `"text/csharp-wasm"` \| `"text/perl"` \| `"text/julia"` \| `"text/biwascheme"` \| `"text/commonlisp"` \| `"text/tcl"` \| `"text/prolog"` \| `"application/json"` \| `"application/lua"` \| `"text/fennel"` \| `"application/wasm-uint8"` \| `"application/javascript"` \| `"application/ecmascript"` \| `"text/javascript"` \| `"text/ecmascript"` + +#### scss + +> **scss**: `any` + +#### solid + +> **solid**: `any` + +#### solid.jsx + +> **jsx**: `any` + +#### solid.tsx + +> **tsx**: `any` + +#### sql + +> **sql**: `any` + +#### sqlite + +> **sqlite**: `any` + +#### sqlite3 + +> **sqlite3**: `any` + +#### stencil + +> **stencil**: `any` + +#### stencil.tsx + +> **tsx**: `any` + +#### styl + +> **styl**: `any` + +#### stylis + +> **stylis**: `any` + +#### stylus + +> **stylus**: `any` + +#### sucrase + +> **sucrase**: `any` + +#### svelte + +> **svelte**: `any` + +#### svelte-app + +> **svelte-app**: `any` + +#### tailwindcss + +> **tailwindcss**: `any` + +#### tcl + +> **tcl**: `any` + +#### teal + +> **teal**: `any` + +#### template? + +> `optional` **template**: `object` + +#### template.data? + +> `optional` **data**: `any` + +#### template.prerender? + +> `optional` **prerender**: `boolean` + +#### tl + +> **tl**: `any` + +#### tokencss + +> **tokencss**: `any` + +#### ts + +> **ts**: `any` + +#### tsx + +> **tsx**: `any` + +#### twig + +> **twig**: `any` + +#### types? + +> `optional` **types**: [`Types`](../internal/interfaces/Types.md) + +#### typescript + +> **typescript**: `any` + +#### unocss + +> **unocss**: `any` + +#### vento + +> **vento**: `any` + +#### vto + +> **vto**: `any` + +#### vue + +> **vue**: `any` + +#### vue-app + +> **vue-app**: `any` + +#### vue2 + +> **vue2**: `any` + +#### vue3 + +> **vue3**: `any` + +#### wasm + +> **wasm**: `any` + +#### wasm.cpp + +> **cpp**: `any` + +#### wasm.cs + +> **cs**: `any` + +#### wasm.lua + +> **lua**: `any` + +#### wasm.php + +> **php**: `any` + +#### wasm.py + +> **py**: `any` + +#### wasm.rb + +> **rb**: `any` + +#### wast + +> **wast**: `any` + +#### wat + +> **wat**: `any` + +#### webassembly + +> **webassembly**: `any` + +#### windicss + +> **windicss**: `any` + +#### xht + +> **xht**: `any` + +#### xml + +> **xml**: `any` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`customSettings`](../internal/interfaces/ContentConfig.md#customsettings) + +#### Defined in + +[models.ts:514](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L514) + +*** + +### delay + +> **delay**: `number` + +Time delay (in milliseconds) following code change, +after which the result page is updated (if [`autoupdate`](https://livecodes.io/docs/configuration/configuration-object#autoupdate) is `true`) +and/or the project is saved (if [`autosave`](https://livecodes.io/docs/configuration/configuration-object#autosave) is `true`). + +#### Default + +```ts +1500 +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`delay`](../internal/interfaces/UserConfig.md#delay) + +#### Defined in + +[models.ts:670](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L670) + +*** + +### description + +> **description**: `string` + +Project description. Used in [project](https://livecodes.io/docs/features/projects) search +and [result page](https://livecodes.io/docs/features/result) description meta tag. + +#### Default + +```ts +"" +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`description`](../internal/interfaces/ContentConfig.md#description) + +#### Defined in + +[models.ts:425](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L425) + +*** + +### editor + +> **editor**: `undefined` \| `"auto"` \| `"monaco"` \| `"codemirror"` \| `"codejar"` + +Selects the [code editor](https://livecodes.io/docs/features/editor-settings#code-editor) to use. + +If `undefined` (the default), Monaco editor is used on desktop, +CodeMirror is used on mobile and in `simple` mode, +while CodeJar is used in `codeblock` mode, in `lite` mode and in `readonly` playgrounds. + +If set to `auto`, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings. + +#### Default + +```ts +undefined +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`editor`](../internal/interfaces/UserConfig.md#editor) + +#### Defined in + +[models.ts:722](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L722) + +*** + +### editorMode + +> **editorMode**: `undefined` \| `"vim"` \| `"emacs"` + +Sets [editor mode](https://livecodes.io/docs/features/editor-settings#editor-modes). + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`editorMode`](../internal/interfaces/UserConfig.md#editormode) + +#### Defined in + +[models.ts:812](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L812) + +*** + +### editorTheme + +> **editorTheme**: `undefined` \| `string` \| [`EditorTheme`](../internal/type-aliases/EditorTheme.md)[] + +Sets the [code editor](https://livecodes.io/docs/features/editor-settings) themes. + +See docs for [editor themes](https://livecodes.io/docs/configuration/configuration-object#editortheme) for details. + +#### Examples + +```ts +"vs" +``` + +```ts +"monaco:twilight, codemirror:one-dark" +``` + +```ts +["vs@light"] +``` + +```ts +["vs@light", "vs-dark@dark"] +``` + +```ts +["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"] +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`editorTheme`](../internal/interfaces/UserConfig.md#editortheme) + +#### Defined in + +[models.ts:748](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L748) + +*** + +### emmet + +> **emmet**: `boolean` + +Enables [Emmet](https://livecodes.io/docs/features/editor-settings#emmet). + +#### Default + +```ts +true +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`emmet`](../internal/interfaces/UserConfig.md#emmet) + +#### Defined in + +[models.ts:807](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L807) + +*** + +### enableAI + +> **enableAI**: `boolean` + +If `true`, [AI code assistant](https://livecodes.io/docs/features/ai) is enabled. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`enableAI`](../internal/interfaces/UserConfig.md#enableai) + +#### Defined in + +[models.ts:818](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L818) + +*** + +### foldRegions + +> **foldRegions**: `boolean` + +When set to `true`, regions marked by `#region` and `#endregion` comments are folded when the project is loaded. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`foldRegions`](../internal/interfaces/UserConfig.md#foldregions) + +#### Defined in + +[models.ts:795](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L795) + +*** + +### fontFamily + +> **fontFamily**: `undefined` \| `string` + +Sets the [code editor](https://livecodes.io/docs/features/editor-settings) font family. + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`fontFamily`](../internal/interfaces/UserConfig.md#fontfamily) + +#### Defined in + +[models.ts:753](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L753) + +*** + +### fontSize + +> **fontSize**: `undefined` \| `number` + +Sets the font size. + +If `undefined` (the default), the font size is set to 14 for the full app and 12 for [embeds](https://livecodes.io/docs/features/embeds). + +#### Default + +```ts +undefined +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`fontSize`](../internal/interfaces/UserConfig.md#fontsize) + +#### Defined in + +[models.ts:761](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L761) + +*** + +### formatOnsave + +> **formatOnsave**: `boolean` + +If `true`, the code is automatically [formatted](https://livecodes.io/docs/features/code-format) on saving the project. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`formatOnsave`](../internal/interfaces/UserConfig.md#formatonsave) + +#### Defined in + +[models.ts:676](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L676) + +*** + +### head + +> **head**: `string` + +Content added to the [result page](https://livecodes.io/docs/features/result) `` element. + +#### Default + +```ts +'\n' +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`head`](../internal/interfaces/ContentConfig.md#head) + +#### Defined in + +[models.ts:431](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L431) + +*** + +### htmlAttrs + +> **htmlAttrs**: `string` \| `Record`\<`string`, `string`\> + +Attributes added to the [result page](https://livecodes.io/docs/features/result) `` element. +It can be an object or a string. + +#### Example + +```ts +{ lang: "en", class: "dark" } +'lang="en" class="dark"' +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`htmlAttrs`](../internal/interfaces/ContentConfig.md#htmlattrs) + +#### Defined in + +[models.ts:440](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L440) + +*** + +### imports + +> **imports**: `object` + +Allows specifying custom [import maps](https://github.com/WICG/import-maps) for [module imports](https://livecodes.io/docs/features/module-resolution#custom-module-resolution). + +**Example** + +Setting `imports` like this: +```js +"imports": { + "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js" +} +``` +results in the following import map: +```html + +``` +See docs for [Imports](https://livecodes.io/docs/configuration/configuration-object#imports) +and [Custom Module Resolution](https://livecodes.io/docs/features/module-resolution/#custom-module-resolution) + +#### Index Signature + + \[`key`: `string`\]: `string` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`imports`](../internal/interfaces/ContentConfig.md#imports-1) + +#### Defined in + +[models.ts:540](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L540) + +*** + +### languages + +> **languages**: `undefined` \| (`"reason"` \| `"stylus"` \| `"r"` \| `"html"` \| `"ruby"` \| `"rb"` \| `"json"` \| `"teal"` \| `"solid"` \| `"flow"` \| `"dot"` \| `"as"` \| `"go"` \| `"htm"` \| `"markdown"` \| `"md"` \| `"mdown"` \| `"mkdn"` \| `"mdx"` \| `"astro"` \| `"pug"` \| `"jade"` \| `"haml"` \| `"asciidoc"` \| `"adoc"` \| `"asc"` \| `"mustache"` \| `"handlebars"` \| `"hbs"` \| `"ejs"` \| `"eta"` \| `"nunjucks"` \| `"njk"` \| `"liquid"` \| `"liquidjs"` \| `"twig"` \| `"vento"` \| `"vto"` \| `"art-template"` \| `"art"` \| `"jinja"` \| `"bbcode"` \| `"bb"` \| `"mjml"` \| `"diagrams"` \| `"diagram"` \| `"graph"` \| `"plt"` \| `"richtext"` \| `"rte"` \| `"rich"` \| `"rte.html"` \| `"css"` \| `"scss"` \| `"sass"` \| `"less"` \| `"styl"` \| `"stylis"` \| `"postcss"` \| `"javascript"` \| `"js"` \| `"babel"` \| `"es"` \| `"sucrase"` \| `"typescript"` \| `"ts"` \| `"jsx"` \| `"tsx"` \| `"react"` \| `"react-jsx"` \| `"react.jsx"` \| `"react-tsx"` \| `"react.tsx"` \| `"react-native"` \| `"react-native.jsx"` \| `"react-native-tsx"` \| `"react-native.tsx"` \| `"vue"` \| `"vue3"` \| `"vue2"` \| `"vue-app"` \| `"app.vue"` \| `"svelte"` \| `"svelte-app"` \| `"app.svelte"` \| `"stencil"` \| `"stencil.tsx"` \| `"solid.jsx"` \| `"solid.tsx"` \| `"riot"` \| `"riotjs"` \| `"malina"` \| `"malinajs"` \| `"xht"` \| `"coffeescript"` \| `"coffee"` \| `"livescript"` \| `"ls"` \| `"civet"` \| `"clio"` \| `"imba"` \| `"assemblyscript"` \| `"python"` \| `"py"` \| `"pyodide"` \| `"python-wasm"` \| `"py-wasm"` \| `"pythonwasm"` \| `"pywasm"` \| `"py3"` \| `"wasm.py"` \| `"rlang"` \| `"rstats"` \| `"r-wasm"` \| `"ruby-wasm"` \| `"wasm.rb"` \| `"rubywasm"` \| `"golang"` \| `"php"` \| `"php-wasm"` \| `"phpwasm"` \| `"wasm.php"` \| `"cpp"` \| `"c"` \| `"C"` \| `"cp"` \| `"cxx"` \| `"c++"` \| `"cppm"` \| `"ixx"` \| `"ii"` \| `"hpp"` \| `"h"` \| `"cpp-wasm"` \| `"cppwasm"` \| `"cwasm"` \| `"wasm.cpp"` \| `"clang"` \| `"clang.cpp"` \| `"java"` \| `"csharp"` \| `"csharp-wasm"` \| `"cs"` \| `"cs-wasm"` \| `"wasm.cs"` \| `"perl"` \| `"pl"` \| `"pm"` \| `"lua"` \| `"lua-wasm"` \| `"luawasm"` \| `"wasm.lua"` \| `"tl"` \| `"fennel"` \| `"fnl"` \| `"julia"` \| `"jl"` \| `"scheme"` \| `"scm"` \| `"commonlisp"` \| `"common-lisp"` \| `"lisp"` \| `"clojurescript"` \| `"clojure"` \| `"cljs"` \| `"clj"` \| `"cljc"` \| `"edn"` \| `"gleam"` \| `"rescript"` \| `"res"` \| `"resi"` \| `"re"` \| `"rei"` \| `"ocaml"` \| `"ml"` \| `"mli"` \| `"tcl"` \| `"wat"` \| `"wast"` \| `"webassembly"` \| `"wasm"` \| `"Binary"` \| `"sql"` \| `"sqlite"` \| `"sqlite3"` \| `"pg.sql"` \| `"pgsql.sql"` \| `"pgsql"` \| `"pg"` \| `"pglite"` \| `"pglite.sql"` \| `"postgresql"` \| `"postgres"` \| `"postgre.sql"` \| `"postgresql.sql"` \| `"prolog.pl"` \| `"prolog"` \| `"blockly"` \| `"blockly.xml"` \| `"xml"` \| `"pintora"` \| `"tailwindcss"` \| `"postcssImportUrl"` \| `"windicss"` \| `"unocss"` \| `"tokencss"` \| `"lightningcss"` \| `"autoprefixer"` \| `"postcssPresetEnv"` \| `"cssmodules"` \| `"purgecss"` \| `"cssnano"`)[] + +List of enabled languages. + +Defaults to all supported languages in full app and only current editor languages in [embeds](https://livecodes.io/docs/features/embeds). + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`languages`](../internal/interfaces/ContentConfig.md#languages) + +#### Defined in + +[models.ts:462](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L462) + +*** + +### layout + +> **layout**: `undefined` \| `"horizontal"` \| `"vertical"` \| `"responsive"` + +Sets the app layout to horizontal or vertical. +If set to `"responsive"` (the default) or `undefined`, +the layout is vertical in small screens when the playground height is larger than its width, +otherwise horizontal. + +#### Default + +```ts +"responsive" +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`layout`](../internal/interfaces/UserConfig.md#layout) + +#### Defined in + +[models.ts:685](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L685) + +*** + +### lineNumbers + +> **lineNumbers**: `boolean` \| `"relative"` + +Show line numbers in [code editor](https://livecodes.io/docs/features/editor-settings). + +#### Default + +```ts +true +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`lineNumbers`](../internal/interfaces/UserConfig.md#linenumbers) + +#### Defined in + +[models.ts:783](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L783) + +*** + +### markup + +> **markup**: `object` + +An object that configures the language and content of the markup editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +#### content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### language + +> **language**: [`Language`](../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### position? + +> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### Default + +```ts +{ language: "html", content: "" } +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`markup`](../internal/interfaces/ContentConfig.md#markup) + +#### Defined in + +[models.ts:470](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L470) + +*** + +### mode + +> **mode**: `"focus"` \| `"full"` \| `"result"` \| `"editor"` \| `"lite"` \| `"simple"` \| `"codeblock"` + +Sets the [display mode](https://livecodes.io/docs/features/display-modes). + +#### Default + +```ts +"full" +``` + +#### Inherited from + +[`AppConfig`](../internal/interfaces/AppConfig.md).[`mode`](../internal/interfaces/AppConfig.md#mode) + +#### Defined in + +[models.ts:615](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L615) + +*** + +### processors + +> **processors**: [`Processor`](../internal/type-aliases/Processor.md)[] + +List of enabled [CSS processors](https://livecodes.io/docs/features/css/#css-processors). + +For the list of available processors, see [Processor](https://livecodes.io/docs/api/internal/type-aliases/Processor) + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`processors`](../internal/interfaces/ContentConfig.md#processors) + +#### Defined in + +[models.ts:509](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L509) + +*** + +### readonly + +> **readonly**: `boolean` + +If `true`, editors are loaded in read-only mode, where the user is not allowed to change the code. + +By default, when readonly is set to true, the light-weight code editor [CodeJar](https://livecodes.io/docs/features/editor-settings#code-editor) is used. +If you wish to use another editor, set the [editor](https://livecodes.io/docs/configuration/configuration-object#editor) property. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`AppConfig`](../internal/interfaces/AppConfig.md).[`readonly`](../internal/interfaces/AppConfig.md#readonly) + +#### Defined in + +[models.ts:597](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L597) + +*** + +### recoverUnsaved + +> **recoverUnsaved**: `boolean` + +Enables [recovering last unsaved project](https://livecodes.io/docs/features/recover) when the app is reopened. + +#### Default + +```ts +true +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`recoverUnsaved`](../internal/interfaces/UserConfig.md#recoverunsaved) + +#### Defined in + +[models.ts:691](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L691) + +*** + +### script + +> **script**: `object` + +An object that configures the language and content of the script editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +#### content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### language + +> **language**: [`Language`](../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### position? + +> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### Default + +```ts +{ language: "javascript", content: "" } +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`script`](../internal/interfaces/ContentConfig.md#script) + +#### Defined in + +[models.ts:486](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L486) + +*** + +### scripts + +> **scripts**: `string`[] + +List of URLs for [external scripts](https://livecodes.io/docs/features/external-resources) to add to the [result page](https://livecodes.io/docs/features/result). + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`scripts`](../internal/interfaces/ContentConfig.md#scripts) + +#### Defined in + +[models.ts:496](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L496) + +*** + +### semicolons + +> **semicolons**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use semi-colons. + +#### Default + +```ts +true +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`semicolons`](../internal/interfaces/UserConfig.md#semicolons) + +#### Defined in + +[models.ts:838](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L838) + +*** + +### showSpacing + +> **showSpacing**: `boolean` + +Enables [showing element spacing](https://livecodes.io/docs/features/result#show-spacings) in the result page. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`showSpacing`](../internal/interfaces/UserConfig.md#showspacing) + +#### Defined in + +[models.ts:697](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L697) + +*** + +### singleQuote + +> **singleQuote**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use single quotes instead of double quotes. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`singleQuote`](../internal/interfaces/UserConfig.md#singlequote) + +#### Defined in + +[models.ts:843](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L843) + +*** + +### style + +> **style**: `object` + +An object that configures the language and content of the style editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +#### content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### language + +> **language**: [`Language`](../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### position? + +> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### Default + +```ts +{ language: "css", content: "" } +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`style`](../internal/interfaces/ContentConfig.md#style) + +#### Defined in + +[models.ts:478](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L478) + +*** + +### stylesheets + +> **stylesheets**: `string`[] + +List of URLs for [external stylesheets](https://livecodes.io/docs/features/external-resources) to add to the [result page](https://livecodes.io/docs/features/result). + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`stylesheets`](../internal/interfaces/ContentConfig.md#stylesheets) + +#### Defined in + +[models.ts:491](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L491) + +*** + +### tabSize + +> **tabSize**: `number` + +The number of spaces per indentation-level. + +Also used in [code formatting](https://livecodes.io/docs/features/code-format). + +#### Default + +```ts +2 +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`tabSize`](../internal/interfaces/UserConfig.md#tabsize) + +#### Defined in + +[models.ts:777](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L777) + +*** + +### tags + +> **tags**: `string`[] + +Project tags. +Used in [project](https://livecodes.io/docs/features/projects) filter and search. + +#### Default + +```ts +[] +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`tags`](../internal/interfaces/ContentConfig.md#tags) + +#### Defined in + +[models.ts:447](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L447) + +*** + +### tests + +> **tests**: `undefined` \| `object` + +Configures the [language](https://livecodes.io/docs/features/tests#supported-languages) +and content of [tests](https://livecodes.io/docs/features/tests). + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`tests`](../internal/interfaces/ContentConfig.md#tests) + +#### Defined in + +[models.ts:576](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L576) + +*** + +### theme + +> **theme**: [`Theme`](../internal/type-aliases/Theme.md) + +Sets the app [theme](https://livecodes.io/docs/features/themes) to light/dark mode. + +#### Default + +```ts +"dark" +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`theme`](../internal/interfaces/UserConfig.md#theme) + +#### Defined in + +[models.ts:728](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L728) + +*** + +### themeColor + +> **themeColor**: `undefined` \| `string` + +Sets the app theme color. +If `undefined`, it is set to `"hsl(214, 40%, 50%)"`. + +#### Default + +```ts +undefined +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`themeColor`](../internal/interfaces/UserConfig.md#themecolor) + +#### Defined in + +[models.ts:735](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L735) + +*** + +### title + +> **title**: `string` + +Project title. +This is used as [result page](https://livecodes.io/docs/features/result) title and title meta tag. +Also used in project search. + +#### Default + +```ts +"Untitled Project" +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`title`](../internal/interfaces/ContentConfig.md#title-3) + +#### Defined in + +[models.ts:418](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L418) + +*** + +### tools + +> **tools**: `Partial`\<`object`\> + +Sets enabled and active tools and status of [tools pane](https://livecodes.io/docs/features/tools-pane). + +#### Type declaration + +##### active + +> **active**: `""` \| `"console"` \| `"compiled"` \| `"tests"` + +##### enabled + +> **enabled**: `"all"` \| (`"console"` \| `"compiled"` \| `"tests"`)[] + +##### status + +> **status**: [`ToolsPaneStatus`](../internal/type-aliases/ToolsPaneStatus.md) + +#### Default + +```ts +{ enabled: "all", active: "", status: "" } +``` + +#### Example + +```js +{ + "tools": { + "enabled": ["console", "compiled"], + "active": "console", + "status": "open" + } +} +``` + +#### Inherited from + +[`AppConfig`](../internal/interfaces/AppConfig.md).[`tools`](../internal/interfaces/AppConfig.md#tools) + +#### Defined in + +[models.ts:631](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L631) + +*** + +### trailingComma + +> **trailingComma**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use [trailing commas](https://prettier.io/docs/en/options.html#trailing-commas). + +#### Default + +```ts +true +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`trailingComma`](../internal/interfaces/UserConfig.md#trailingcomma) + +#### Defined in + +[models.ts:849](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L849) + +*** + +### types + +> **types**: `object` + +Allows providing custom TypeScript type declarations for better [editor intellisense](https://livecodes.io/docs/features/intellisense). + +It is an object where each key represents module name and value represents the types. + +See docs for [Types](https://livecodes.io/docs/configuration/configuration-object#types) +and [Custom Types](https://livecodes.io/docs/features/intellisense#custom-types) + +#### Examples + +```js +{ + "types": { + "my-demo-lib": "https://my-custom-domain/my-type-declarations.d.ts" + } +} +``` + +``` +{ + "types": { + "my-demo-lib": { + "url": "https://my-custom-domain/types.d.ts", + "autoload": true, + "declareAsModule": true + } +} +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`types`](../internal/interfaces/ContentConfig.md#types-1) + +#### Defined in + +[models.ts:570](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L570) + +*** + +### useTabs + +> **useTabs**: `boolean` + +If `true`, lines are indented with tabs instead of spaces. + +Also used in [code formatting](https://livecodes.io/docs/features/code-format). + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`useTabs`](../internal/interfaces/UserConfig.md#usetabs) + +#### Defined in + +[models.ts:769](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L769) + +*** + +### version + +> `readonly` **version**: `string` + +This is a read-only property which specifies the current LiveCodes version. + +Version specified in [exported](https://livecodes.io/docs/features/export) projects allows automatically upgrading the project configuration when imported by an app with a newer version. + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`version`](../internal/interfaces/ContentConfig.md#version) + +#### Defined in + +[models.ts:583](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L583) + +*** + +### view? + +> `optional` **view**: `"split"` \| `"result"` \| `"editor"` + +Sets the [default view](https://livecodes.io/docs/features/default-view) for the playground. + +#### Default + +```ts +"split" +``` + +#### Inherited from + +[`AppConfig`](../internal/interfaces/AppConfig.md).[`view`](../internal/interfaces/AppConfig.md#view) + +#### Defined in + +[models.ts:609](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L609) + +*** + +### welcome + +> **welcome**: `boolean` + +If `true`, the [welcome screen](https://livecodes.io/docs/features/welcome) is displayed when the app loads. + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`welcome`](../internal/interfaces/UserConfig.md#welcome) + +#### Defined in + +[models.ts:702](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L702) + +*** + +### wordWrap + +> **wordWrap**: `boolean` + +Enables word-wrap for long lines. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`wordWrap`](../internal/interfaces/UserConfig.md#wordwrap) + +#### Defined in + +[models.ts:789](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L789) + +*** + +### zoom + +> **zoom**: `0.25` \| `0.5` \| `1` + +Sets result page [zoom level](https://livecodes.io/docs/features/result#result-page-zoom). + +#### Inherited from + +[`AppConfig`](../internal/interfaces/AppConfig.md).[`zoom`](../internal/interfaces/AppConfig.md#zoom) + +#### Defined in + +[models.ts:640](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L640) \ No newline at end of file diff --git a/docs/api/interfaces/Config/index.html b/docs/api/interfaces/Config/index.html new file mode 100644 index 0000000..32255be --- /dev/null +++ b/docs/api/interfaces/Config/index.html @@ -0,0 +1,1788 @@ +Interface: Config | LiveCodes
Skip to main content

Interface: Config

+

The playground configuration object.

+

It is an object that holds the configuration and state of the playground.

+

See docs for details.

+

Extends​

+ +

Properties​

+

activeEditor​

+
+

activeEditor: undefined | EditorId

+
+

Selects the active editor to show.

+

Defaults to the last used editor for user, otherwise "markup"

+

Inherited from​

+

ContentConfig.activeEditor

+

Defined in​

+

models.ts:455

+
+

allowLangChange​

+
+

allowLangChange: boolean

+
+

If false, the UI will not show the menu that allows changing editor language.

+

Default​

+
true
+

Inherited from​

+

AppConfig.allowLangChange

+

Defined in​

+

models.ts:603

+
+

appLanguage​

+
+

appLanguage: undefined | AppLanguage

+
+

Sets the app UI language used.

+

Inherited from​

+

UserConfig.appLanguage

+

Defined in​

+

models.ts:707

+
+

autosave​

+
+

autosave: boolean

+
+

If true, the project is automatically saved on code change, +after time delay.

+

Default​

+
false
+

Inherited from​

+

UserConfig.autosave

+

Defined in​

+

models.ts:656

+
+

autotest​

+
+

autotest: boolean

+
+

If true, the project is watched for code changes which trigger tests to auto-run.

+

Default​

+
false
+

Inherited from​

+

UserConfig.autotest

+

Defined in​

+

models.ts:662

+
+

autoupdate​

+
+

autoupdate: boolean

+
+

If true, the result page is automatically updated on code change, +after time delay.

+

Default​

+
true
+

Inherited from​

+

UserConfig.autoupdate

+

Defined in​

+

models.ts:649

+
+

closeBrackets​

+
+

closeBrackets: boolean

+
+

Use auto-complete to close brackets and quotes.

+

Default​

+
true
+

Inherited from​

+

UserConfig.closeBrackets

+

Defined in​

+

models.ts:801

+
+

cssPreset​

+
+

cssPreset: CssPresetId

+
+

CSS Preset to use.

+

Inherited from​

+

ContentConfig.cssPreset

+

Defined in​

+

models.ts:502

+
+

customSettings​

+
+

customSettings: object

+
+

Defines custom settings for the current project.

+

adoc​

+
+

adoc: any

+
+

app.svelte​

+
+

svelte: any

+
+

app.vue​

+
+

vue: any

+
+

art​

+
+

art: any

+
+

art-template​

+
+

art-template: any

+
+

as​

+
+

as: any

+
+

asc​

+
+

asc: any

+
+

asciidoc​

+
+

asciidoc: any

+
+

assemblyscript​

+
+

assemblyscript: any

+
+

astro​

+
+

astro: any

+
+

autoprefixer​

+
+

autoprefixer: any

+
+

babel​

+
+

babel: any

+
+

bb​

+
+

bb: any

+
+

bbcode​

+
+

bbcode: any

+
+

Binary​

+
+

Binary: any

+
+

blockly​

+
+

blockly: any

+
+

blockly.xml​

+
+

xml: any

+
+

c​

+
+

c: any

+
+

C​

+
+

C: any

+
+

c++​

+
+

c++: any

+
+

civet​

+
+

civet: any

+
+

clang​

+
+

clang: any

+
+

clang.cpp​

+
+

cpp: any

+
+

clio​

+
+

clio: any

+
+

clj​

+
+

clj: any

+
+

cljc​

+
+

cljc: any

+
+

cljs​

+
+

cljs: any

+
+

clojure​

+
+

clojure: any

+
+

clojurescript​

+
+

clojurescript: any

+
+

coffee​

+
+

coffee: any

+
+

coffeescript​

+
+

coffeescript: any

+
+

common-lisp​

+
+

common-lisp: any

+
+

commonlisp​

+
+

commonlisp: any

+
+

convertCommonjs?​

+
+

optional convertCommonjs: boolean

+
+

cp​

+
+

cp: any

+
+

cpp​

+
+

cpp: any

+
+

cpp-wasm​

+
+

cpp-wasm: any

+
+

cppm​

+
+

cppm: any

+
+

cppwasm​

+
+

cppwasm: any

+
+

cs​

+
+

cs: any

+
+

cs-wasm​

+
+

cs-wasm: any

+
+

csharp​

+
+

csharp: any

+
+

csharp-wasm​

+
+

csharp-wasm: any

+
+

css​

+
+

css: any

+
+

cssmodules​

+
+

cssmodules: any

+
+

cssnano​

+
+

cssnano: any

+
+

cwasm​

+
+

cwasm: any

+
+

cxx​

+
+

cxx: any

+
+

defaultCDN?​

+
+

optional defaultCDN: CDN

+
+

diagram​

+
+

diagram: any

+
+

diagrams​

+
+

diagrams: any

+
+

dot​

+
+

dot: any

+
+

edn​

+
+

edn: any

+
+

ejs​

+
+

ejs: any

+
+

es​

+
+

es: any

+
+

eta​

+
+

eta: any

+
+

fennel​

+
+

fennel: any

+
+

flow​

+
+

flow: any

+
+

fnl​

+
+

fnl: any

+
+

gleam​

+
+

gleam: any

+
+

go​

+
+

go: any

+
+

golang​

+
+

golang: any

+
+

graph​

+
+

graph: any

+
+

h​

+
+

h: any

+
+

haml​

+
+

haml: any

+
+

handlebars​

+
+

handlebars: any

+
+

hbs​

+
+

hbs: any

+
+

hpp​

+
+

hpp: any

+
+

htm​

+
+

htm: any

+
+

html​

+
+

html: any

+
+

ii​

+
+

ii: any

+
+

imba​

+
+

imba: any

+
+

imports?​

+
+

optional imports: Record<string, string>

+
+

ixx​

+
+

ixx: any

+
+

jade​

+
+

jade: any

+
+

java​

+
+

java: any

+
+

javascript​

+
+

javascript: any

+
+

jinja​

+
+

jinja: any

+
+

jl​

+
+

jl: any

+
+

js​

+
+

js: any

+
+

json​

+
+

json: any

+
+

jsx​

+
+

jsx: any

+
+

julia​

+
+

julia: any

+
+

less​

+
+

less: any

+
+

lightningcss​

+
+

lightningcss: any

+
+

liquid​

+
+

liquid: any

+
+

liquidjs​

+
+

liquidjs: any

+
+

lisp​

+
+

lisp: any

+
+

livescript​

+
+

livescript: any

+
+

ls​

+
+

ls: any

+
+

lua​

+
+

lua: any

+
+

lua-wasm​

+
+

lua-wasm: any

+
+

luawasm​

+
+

luawasm: any

+
+

malina​

+
+

malina: any

+
+

malinajs​

+
+

malinajs: any

+
+

mapImports?​

+
+

optional mapImports: boolean

+
+

markdown​

+
+

markdown: any

+
+

md​

+
+

md: any

+
+

mdown​

+
+

mdown: any

+
+

mdx​

+
+

mdx: any

+
+

mjml​

+
+

mjml: any

+
+

mkdn​

+
+

mkdn: any

+
+

ml​

+
+

ml: any

+
+

mli​

+
+

mli: any

+
+

mustache​

+
+

mustache: any

+
+

njk​

+
+

njk: any

+
+

nunjucks​

+
+

nunjucks: any

+
+

ocaml​

+
+

ocaml: any

+
+

perl​

+
+

perl: any

+
+

pg​

+
+

pg: any

+
+

pg.sql​

+
+

sql: any

+
+

pglite​

+
+

pglite: any

+
+

pglite.sql​

+
+

sql: any

+
+

pgsql​

+
+

pgsql: any

+
+

pgsql.sql​

+
+

sql: any

+
+

php​

+
+

php: any

+
+

php-wasm​

+
+

php-wasm: any

+
+

phpwasm​

+
+

phpwasm: any

+
+

pintora​

+
+

pintora: any

+
+

pl​

+
+

pl: any

+
+

plt​

+
+

plt: any

+
+

pm​

+
+

pm: any

+
+

postcss​

+
+

postcss: any

+
+

postcssImportUrl​

+
+

postcssImportUrl: any

+
+

postcssPresetEnv​

+
+

postcssPresetEnv: any

+
+

postgre.sql​

+
+

sql: any

+
+

postgres​

+
+

postgres: any

+
+

postgresql​

+
+

postgresql: any

+
+

postgresql.sql​

+
+

sql: any

+
+

prolog​

+
+

prolog: any

+
+

prolog.pl​

+
+

pl: any

+
+

pug​

+
+

pug: any

+
+

purgecss​

+
+

purgecss: any

+
+

py​

+
+

py: any

+
+

py-wasm​

+
+

py-wasm: any

+
+

py3​

+
+

py3: any

+
+

pyodide​

+
+

pyodide: any

+
+

python​

+
+

python: any

+
+

python-wasm​

+
+

python-wasm: any

+
+

pythonwasm​

+
+

pythonwasm: any

+
+

pywasm​

+
+

pywasm: any

+
+

r​

+
+

r: any

+
+

r-wasm​

+
+

r-wasm: any

+
+

rb​

+
+

rb: any

+
+

re​

+
+

re: any

+
+

react​

+
+

react: any

+
+

react-jsx​

+
+

react-jsx: any

+
+

react-native​

+
+

react-native: any

+
+

react-native-tsx​

+
+

react-native-tsx: any

+
+

react-native.jsx​

+
+

jsx: any

+
+

react-native.tsx​

+
+

tsx: any

+
+

react-tsx​

+
+

react-tsx: any

+
+

react.jsx​

+
+

jsx: any

+
+

react.tsx​

+
+

tsx: any

+
+

reason​

+
+

reason: any

+
+

rei​

+
+

rei: any

+
+

res​

+
+

res: any

+
+

rescript​

+
+

rescript: any

+
+

resi​

+
+

resi: any

+
+

rich​

+
+

rich: any

+
+

richtext​

+
+

richtext: any

+
+

riot​

+
+

riot: any

+
+

riotjs​

+
+

riotjs: any

+
+

rlang​

+
+

rlang: any

+
+

rstats​

+
+

rstats: any

+
+

rte​

+
+

rte: any

+
+

rte.html​

+
+

html: any

+
+

ruby​

+
+

ruby: any

+
+

ruby-wasm​

+
+

ruby-wasm: any

+
+

rubywasm​

+
+

rubywasm: any

+
+

sass​

+
+

sass: any

+
+

scheme​

+
+

scheme: any

+
+

scm​

+
+

scm: any

+
+

scriptType?​

+
+

optional scriptType: "" | "module" | "text/liquid" | "text/python" | "text/r" | "text/ruby-wasm" | "text/x-uniter-php" | "text/php-wasm" | "text/cpp" | "text/java" | "text/csharp-wasm" | "text/perl" | "text/julia" | "text/biwascheme" | "text/commonlisp" | "text/tcl" | "text/prolog" | "application/json" | "application/lua" | "text/fennel" | "application/wasm-uint8" | "application/javascript" | "application/ecmascript" | "text/javascript" | "text/ecmascript"

+
+

scss​

+
+

scss: any

+
+

solid​

+
+

solid: any

+
+

solid.jsx​

+
+

jsx: any

+
+

solid.tsx​

+
+

tsx: any

+
+

sql​

+
+

sql: any

+
+

sqlite​

+
+

sqlite: any

+
+

sqlite3​

+
+

sqlite3: any

+
+

stencil​

+
+

stencil: any

+
+

stencil.tsx​

+
+

tsx: any

+
+

styl​

+
+

styl: any

+
+

stylis​

+
+

stylis: any

+
+

stylus​

+
+

stylus: any

+
+

sucrase​

+
+

sucrase: any

+
+

svelte​

+
+

svelte: any

+
+

svelte-app​

+
+

svelte-app: any

+
+

tailwindcss​

+
+

tailwindcss: any

+
+

tcl​

+
+

tcl: any

+
+

teal​

+
+

teal: any

+
+

template?​

+
+

optional template: object

+
+

template.data?​

+
+

optional data: any

+
+

template.prerender?​

+
+

optional prerender: boolean

+
+

tl​

+
+

tl: any

+
+

tokencss​

+
+

tokencss: any

+
+

ts​

+
+

ts: any

+
+

tsx​

+
+

tsx: any

+
+

twig​

+
+

twig: any

+
+

types?​

+
+

optional types: Types

+
+

typescript​

+
+

typescript: any

+
+

unocss​

+
+

unocss: any

+
+

vento​

+
+

vento: any

+
+

vto​

+
+

vto: any

+
+

vue​

+
+

vue: any

+
+

vue-app​

+
+

vue-app: any

+
+

vue2​

+
+

vue2: any

+
+

vue3​

+
+

vue3: any

+
+

wasm​

+
+

wasm: any

+
+

wasm.cpp​

+
+

cpp: any

+
+

wasm.cs​

+
+

cs: any

+
+

wasm.lua​

+
+

lua: any

+
+

wasm.php​

+
+

php: any

+
+

wasm.py​

+
+

py: any

+
+

wasm.rb​

+
+

rb: any

+
+

wast​

+
+

wast: any

+
+

wat​

+
+

wat: any

+
+

webassembly​

+
+

webassembly: any

+
+

windicss​

+
+

windicss: any

+
+

xht​

+
+

xht: any

+
+

xml​

+
+

xml: any

+
+

Inherited from​

+

ContentConfig.customSettings

+

Defined in​

+

models.ts:514

+
+

delay​

+
+

delay: number

+
+

Time delay (in milliseconds) following code change, +after which the result page is updated (if autoupdate is true) +and/or the project is saved (if autosave is true).

+

Default​

+
1500
+

Inherited from​

+

UserConfig.delay

+

Defined in​

+

models.ts:670

+
+

description​

+
+

description: string

+
+

Project description. Used in project search +and result page description meta tag.

+

Default​

+
""
+

Inherited from​

+

ContentConfig.description

+

Defined in​

+

models.ts:425

+
+

editor​

+
+

editor: undefined | "auto" | "monaco" | "codemirror" | "codejar"

+
+

Selects the code editor to use.

+

If undefined (the default), Monaco editor is used on desktop, +CodeMirror is used on mobile and in simple mode, +while CodeJar is used in codeblock mode, in lite mode and in readonly playgrounds.

+

If set to auto, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings.

+

Default​

+
undefined
+

Inherited from​

+

UserConfig.editor

+

Defined in​

+

models.ts:722

+
+

editorMode​

+
+

editorMode: undefined | "vim" | "emacs"

+
+

Sets editor mode.

+

Inherited from​

+

UserConfig.editorMode

+

Defined in​

+

models.ts:812

+
+

editorTheme​

+
+

editorTheme: undefined | string | EditorTheme[]

+
+

Sets the code editor themes.

+

See docs for editor themes for details.

+

Examples​

+
"vs"
+
"monaco:twilight, codemirror:one-dark"
+
["vs@light"]
+
["vs@light", "vs-dark@dark"]
+
["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]
+

Inherited from​

+

UserConfig.editorTheme

+

Defined in​

+

models.ts:748

+
+

emmet​

+
+

emmet: boolean

+
+

Enables Emmet.

+

Default​

+
true
+

Inherited from​

+

UserConfig.emmet

+

Defined in​

+

models.ts:807

+
+

enableAI​

+
+

enableAI: boolean

+
+

If true, AI code assistant is enabled.

+

Default​

+
false
+

Inherited from​

+

UserConfig.enableAI

+

Defined in​

+

models.ts:818

+
+

foldRegions​

+
+

foldRegions: boolean

+
+

When set to true, regions marked by #region and #endregion comments are folded when the project is loaded.

+

Default​

+
false
+

Inherited from​

+

UserConfig.foldRegions

+

Defined in​

+

models.ts:795

+
+

fontFamily​

+
+

fontFamily: undefined | string

+
+

Sets the code editor font family.

+

Inherited from​

+

UserConfig.fontFamily

+

Defined in​

+

models.ts:753

+
+

fontSize​

+
+

fontSize: undefined | number

+
+

Sets the font size.

+

If undefined (the default), the font size is set to 14 for the full app and 12 for embeds.

+

Default​

+
undefined
+

Inherited from​

+

UserConfig.fontSize

+

Defined in​

+

models.ts:761

+
+

formatOnsave​

+
+

formatOnsave: boolean

+
+

If true, the code is automatically formatted on saving the project.

+

Default​

+
false
+

Inherited from​

+

UserConfig.formatOnsave

+

Defined in​

+

models.ts:676

+
+ +
+

head: string

+
+

Content added to the result page <head> element.

+

Default​

+
'<meta charset="UTF-8" />\n<meta name="viewport" content="width=device-width, initial-scale=1.0" />'
+

Inherited from​

+

ContentConfig.head

+

Defined in​

+

models.ts:431

+
+

htmlAttrs​

+
+

htmlAttrs: string | Record<string, string>

+
+

Attributes added to the result page <html> element. +It can be an object or a string.

+

Example​

+
{ lang: "en", class: "dark" }
'lang="en" class="dark"'
+

Inherited from​

+

ContentConfig.htmlAttrs

+

Defined in​

+

models.ts:440

+
+

imports​

+
+

imports: object

+
+

Allows specifying custom import maps for module imports.

+

Example

+

Setting imports like this:

+
"imports": {
  "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"
}
+

results in the following import map:

+
<script type="importmap">
  {
    "imports": {
      "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"
    }
  }
</script>
+

See docs for Imports +and Custom Module Resolution

+

Index Signature​

+

[key: string]: string

+

Inherited from​

+

ContentConfig.imports

+

Defined in​

+

models.ts:540

+
+

languages​

+
+

languages: undefined | ("reason" | "stylus" | "r" | "html" | "ruby" | "rb" | "json" | "teal" | "solid" | "flow" | "dot" | "as" | "go" | "htm" | "markdown" | "md" | "mdown" | "mkdn" | "mdx" | "astro" | "pug" | "jade" | "haml" | "asciidoc" | "adoc" | "asc" | "mustache" | "handlebars" | "hbs" | "ejs" | "eta" | "nunjucks" | "njk" | "liquid" | "liquidjs" | "twig" | "vento" | "vto" | "art-template" | "art" | "jinja" | "bbcode" | "bb" | "mjml" | "diagrams" | "diagram" | "graph" | "plt" | "richtext" | "rte" | "rich" | "rte.html" | "css" | "scss" | "sass" | "less" | "styl" | "stylis" | "postcss" | "javascript" | "js" | "babel" | "es" | "sucrase" | "typescript" | "ts" | "jsx" | "tsx" | "react" | "react-jsx" | "react.jsx" | "react-tsx" | "react.tsx" | "react-native" | "react-native.jsx" | "react-native-tsx" | "react-native.tsx" | "vue" | "vue3" | "vue2" | "vue-app" | "app.vue" | "svelte" | "svelte-app" | "app.svelte" | "stencil" | "stencil.tsx" | "solid.jsx" | "solid.tsx" | "riot" | "riotjs" | "malina" | "malinajs" | "xht" | "coffeescript" | "coffee" | "livescript" | "ls" | "civet" | "clio" | "imba" | "assemblyscript" | "python" | "py" | "pyodide" | "python-wasm" | "py-wasm" | "pythonwasm" | "pywasm" | "py3" | "wasm.py" | "rlang" | "rstats" | "r-wasm" | "ruby-wasm" | "wasm.rb" | "rubywasm" | "golang" | "php" | "php-wasm" | "phpwasm" | "wasm.php" | "cpp" | "c" | "C" | "cp" | "cxx" | "c++" | "cppm" | "ixx" | "ii" | "hpp" | "h" | "cpp-wasm" | "cppwasm" | "cwasm" | "wasm.cpp" | "clang" | "clang.cpp" | "java" | "csharp" | "csharp-wasm" | "cs" | "cs-wasm" | "wasm.cs" | "perl" | "pl" | "pm" | "lua" | "lua-wasm" | "luawasm" | "wasm.lua" | "tl" | "fennel" | "fnl" | "julia" | "jl" | "scheme" | "scm" | "commonlisp" | "common-lisp" | "lisp" | "clojurescript" | "clojure" | "cljs" | "clj" | "cljc" | "edn" | "gleam" | "rescript" | "res" | "resi" | "re" | "rei" | "ocaml" | "ml" | "mli" | "tcl" | "wat" | "wast" | "webassembly" | "wasm" | "Binary" | "sql" | "sqlite" | "sqlite3" | "pg.sql" | "pgsql.sql" | "pgsql" | "pg" | "pglite" | "pglite.sql" | "postgresql" | "postgres" | "postgre.sql" | "postgresql.sql" | "prolog.pl" | "prolog" | "blockly" | "blockly.xml" | "xml" | "pintora" | "tailwindcss" | "postcssImportUrl" | "windicss" | "unocss" | "tokencss" | "lightningcss" | "autoprefixer" | "postcssPresetEnv" | "cssmodules" | "purgecss" | "cssnano")[]

+
+

List of enabled languages.

+

Defaults to all supported languages in full app and only current editor languages in embeds.

+

Inherited from​

+

ContentConfig.languages

+

Defined in​

+

models.ts:462

+
+

layout​

+
+

layout: undefined | "horizontal" | "vertical" | "responsive"

+
+

Sets the app layout to horizontal or vertical. +If set to "responsive" (the default) or undefined, +the layout is vertical in small screens when the playground height is larger than its width, +otherwise horizontal.

+

Default​

+
"responsive"
+

Inherited from​

+

UserConfig.layout

+

Defined in​

+

models.ts:685

+
+

lineNumbers​

+
+

lineNumbers: boolean | "relative"

+
+

Show line numbers in code editor.

+

Default​

+
true
+

Inherited from​

+

UserConfig.lineNumbers

+

Defined in​

+

models.ts:783

+
+

markup​

+
+

markup: object

+
+

An object that configures the language and content of the markup editor.

+

See docs for details.

+

content?​

+
+

optional content: string

+
+

The initial content of the code editor.

+
Default​
+
""
+

contentUrl?​

+
+

optional contentUrl: string

+
+

A URL to load content from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if content property had no value.

+

foldedLines?​

+
+

optional foldedLines: object[]

+
+

Lines that get folded when the editor loads.

+

This can be used for less relevant content.

+
Example​
+
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
+

hiddenContent?​

+
+

optional hiddenContent: string

+
+

Hidden content that gets evaluated without being visible in the code editor.

+

This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)

+

hiddenContentUrl?​

+
+

optional hiddenContentUrl: string

+
+

A URL to load hiddenContent from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if hiddenContent property had no value.

+

hideTitle?​

+
+

optional hideTitle: boolean

+
+

If true, the title of the code editor is hidden, however its code is still evaluated.

+

This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).

+

language​

+
+

language: Language

+
+

A language name, extension or alias (as defined in language documentations).

+

For the list of supported values, see Language

+

order?​

+
+

optional order: number

+
+

The order of the editor in the UI.

+
Default​
+
0
+

position?​

+
+

optional position: EditorPosition

+
+

The initial position of the cursor in the code editor.

+
Example​
+
{lineNumber: 5, column: 10}
+

selector?​

+
+

optional selector: string

+
+

A CSS selector to load content from DOM import.

+

title?​

+
+

optional title: string

+
+

If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. "Python" can be used instead of "Py (Wasm)").

+

Default​

+
{ language: "html", content: "" }
+

Inherited from​

+

ContentConfig.markup

+

Defined in​

+

models.ts:470

+
+

mode​

+
+

mode: "focus" | "full" | "result" | "editor" | "lite" | "simple" | "codeblock"

+
+

Sets the display mode.

+

Default​

+
"full"
+

Inherited from​

+

AppConfig.mode

+

Defined in​

+

models.ts:615

+
+

processors​

+
+

processors: Processor[]

+
+

List of enabled CSS processors.

+

For the list of available processors, see Processor

+

Inherited from​

+

ContentConfig.processors

+

Defined in​

+

models.ts:509

+
+

readonly​

+
+

readonly: boolean

+
+

If true, editors are loaded in read-only mode, where the user is not allowed to change the code.

+

By default, when readonly is set to true, the light-weight code editor CodeJar is used. +If you wish to use another editor, set the editor property.

+

Default​

+
false
+

Inherited from​

+

AppConfig.readonly

+

Defined in​

+

models.ts:597

+
+

recoverUnsaved​

+
+

recoverUnsaved: boolean

+
+

Enables recovering last unsaved project when the app is reopened.

+

Default​

+
true
+

Inherited from​

+

UserConfig.recoverUnsaved

+

Defined in​

+

models.ts:691

+
+

script​

+
+

script: object

+
+

An object that configures the language and content of the script editor.

+

See docs for details.

+

content?​

+
+

optional content: string

+
+

The initial content of the code editor.

+
Default​
+
""
+

contentUrl?​

+
+

optional contentUrl: string

+
+

A URL to load content from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if content property had no value.

+

foldedLines?​

+
+

optional foldedLines: object[]

+
+

Lines that get folded when the editor loads.

+

This can be used for less relevant content.

+
Example​
+
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
+

hiddenContent?​

+
+

optional hiddenContent: string

+
+

Hidden content that gets evaluated without being visible in the code editor.

+

This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)

+

hiddenContentUrl?​

+
+

optional hiddenContentUrl: string

+
+

A URL to load hiddenContent from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if hiddenContent property had no value.

+

hideTitle?​

+
+

optional hideTitle: boolean

+
+

If true, the title of the code editor is hidden, however its code is still evaluated.

+

This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).

+

language​

+
+

language: Language

+
+

A language name, extension or alias (as defined in language documentations).

+

For the list of supported values, see Language

+

order?​

+
+

optional order: number

+
+

The order of the editor in the UI.

+
Default​
+
0
+

position?​

+
+

optional position: EditorPosition

+
+

The initial position of the cursor in the code editor.

+
Example​
+
{lineNumber: 5, column: 10}
+

selector?​

+
+

optional selector: string

+
+

A CSS selector to load content from DOM import.

+

title?​

+
+

optional title: string

+
+

If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. "Python" can be used instead of "Py (Wasm)").

+

Default​

+
{ language: "javascript", content: "" }
+

Inherited from​

+

ContentConfig.script

+

Defined in​

+

models.ts:486

+
+

scripts​

+
+

scripts: string[]

+
+

List of URLs for external scripts to add to the result page.

+

Inherited from​

+

ContentConfig.scripts

+

Defined in​

+

models.ts:496

+
+

semicolons​

+
+

semicolons: boolean

+
+

Configures Prettier code formatter to use semi-colons.

+

Default​

+
true
+

Inherited from​

+

UserConfig.semicolons

+

Defined in​

+

models.ts:838

+
+

showSpacing​

+
+

showSpacing: boolean

+
+

Enables showing element spacing in the result page.

+

Default​

+
false
+

Inherited from​

+

UserConfig.showSpacing

+

Defined in​

+

models.ts:697

+
+

singleQuote​

+
+

singleQuote: boolean

+
+

Configures Prettier code formatter to use single quotes instead of double quotes.

+

Default​

+
false
+

Inherited from​

+

UserConfig.singleQuote

+

Defined in​

+

models.ts:843

+
+

style​

+
+

style: object

+
+

An object that configures the language and content of the style editor.

+

See docs for details.

+

content?​

+
+

optional content: string

+
+

The initial content of the code editor.

+
Default​
+
""
+

contentUrl?​

+
+

optional contentUrl: string

+
+

A URL to load content from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if content property had no value.

+

foldedLines?​

+
+

optional foldedLines: object[]

+
+

Lines that get folded when the editor loads.

+

This can be used for less relevant content.

+
Example​
+
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
+

hiddenContent?​

+
+

optional hiddenContent: string

+
+

Hidden content that gets evaluated without being visible in the code editor.

+

This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)

+

hiddenContentUrl?​

+
+

optional hiddenContentUrl: string

+
+

A URL to load hiddenContent from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if hiddenContent property had no value.

+

hideTitle?​

+
+

optional hideTitle: boolean

+
+

If true, the title of the code editor is hidden, however its code is still evaluated.

+

This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).

+

language​

+
+

language: Language

+
+

A language name, extension or alias (as defined in language documentations).

+

For the list of supported values, see Language

+

order?​

+
+

optional order: number

+
+

The order of the editor in the UI.

+
Default​
+
0
+

position?​

+
+

optional position: EditorPosition

+
+

The initial position of the cursor in the code editor.

+
Example​
+
{lineNumber: 5, column: 10}
+

selector?​

+
+

optional selector: string

+
+

A CSS selector to load content from DOM import.

+

title?​

+
+

optional title: string

+
+

If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. "Python" can be used instead of "Py (Wasm)").

+

Default​

+
{ language: "css", content: "" }
+

Inherited from​

+

ContentConfig.style

+

Defined in​

+

models.ts:478

+
+

stylesheets​

+
+

stylesheets: string[]

+
+

List of URLs for external stylesheets to add to the result page.

+

Inherited from​

+

ContentConfig.stylesheets

+

Defined in​

+

models.ts:491

+
+

tabSize​

+
+

tabSize: number

+
+

The number of spaces per indentation-level.

+

Also used in code formatting.

+

Default​

+
2
+

Inherited from​

+

UserConfig.tabSize

+

Defined in​

+

models.ts:777

+
+

tags​

+
+

tags: string[]

+
+

Project tags. +Used in project filter and search.

+

Default​

+
[]
+

Inherited from​

+

ContentConfig.tags

+

Defined in​

+

models.ts:447

+
+

tests​

+
+

tests: undefined | object

+
+

Configures the language +and content of tests.

+

Inherited from​

+

ContentConfig.tests

+

Defined in​

+

models.ts:576

+
+

theme​

+
+

theme: Theme

+
+

Sets the app theme to light/dark mode.

+

Default​

+
"dark"
+

Inherited from​

+

UserConfig.theme

+

Defined in​

+

models.ts:728

+
+

themeColor​

+
+

themeColor: undefined | string

+
+

Sets the app theme color. +If undefined, it is set to "hsl(214, 40%, 50%)".

+

Default​

+
undefined
+

Inherited from​

+

UserConfig.themeColor

+

Defined in​

+

models.ts:735

+
+

title​

+
+

title: string

+
+

Project title. +This is used as result page title and title meta tag. +Also used in project search.

+

Default​

+
"Untitled Project"
+

Inherited from​

+

ContentConfig.title

+

Defined in​

+

models.ts:418

+
+

tools​

+
+

tools: Partial<object>

+
+

Sets enabled and active tools and status of tools pane.

+

Type declaration​

+
active​
+
+

active: "" | "console" | "compiled" | "tests"

+
+
enabled​
+
+

enabled: "all" | ("console" | "compiled" | "tests")[]

+
+
status​
+
+

status: ToolsPaneStatus

+
+

Default​

+
{ enabled: "all", active: "", status: "" }
+

Example​

+
{
  "tools": {
    "enabled": ["console", "compiled"],
    "active": "console",
    "status": "open"
  }
}
+

Inherited from​

+

AppConfig.tools

+

Defined in​

+

models.ts:631

+
+

trailingComma​

+
+

trailingComma: boolean

+
+

Configures Prettier code formatter to use trailing commas.

+

Default​

+
true
+

Inherited from​

+

UserConfig.trailingComma

+

Defined in​

+

models.ts:849

+
+

types​

+
+

types: object

+
+

Allows providing custom TypeScript type declarations for better editor intellisense.

+

It is an object where each key represents module name and value represents the types.

+

See docs for Types +and Custom Types

+

Examples​

+
{
  "types": {
    "my-demo-lib": "https://my-custom-domain/my-type-declarations.d.ts"
  }
}
+
{
  "types": {
    "my-demo-lib": {
      "url": "https://my-custom-domain/types.d.ts",
      "autoload": true,
      "declareAsModule": true
    }
}
+

Inherited from​

+

ContentConfig.types

+

Defined in​

+

models.ts:570

+
+

useTabs​

+
+

useTabs: boolean

+
+

If true, lines are indented with tabs instead of spaces.

+

Also used in code formatting.

+

Default​

+
false
+

Inherited from​

+

UserConfig.useTabs

+

Defined in​

+

models.ts:769

+
+

version​

+
+

readonly version: string

+
+

This is a read-only property which specifies the current LiveCodes version.

+

Version specified in exported projects allows automatically upgrading the project configuration when imported by an app with a newer version.

+

Inherited from​

+

ContentConfig.version

+

Defined in​

+

models.ts:583

+
+

view?​

+
+

optional view: "split" | "result" | "editor"

+
+

Sets the default view for the playground.

+

Default​

+
"split"
+

Inherited from​

+

AppConfig.view

+

Defined in​

+

models.ts:609

+
+

welcome​

+
+

welcome: boolean

+
+

If true, the welcome screen is displayed when the app loads.

+

Inherited from​

+

UserConfig.welcome

+

Defined in​

+

models.ts:702

+
+

wordWrap​

+
+

wordWrap: boolean

+
+

Enables word-wrap for long lines.

+

Default​

+
false
+

Inherited from​

+

UserConfig.wordWrap

+

Defined in​

+

models.ts:789

+
+

zoom​

+
+

zoom: 0.25 | 0.5 | 1

+
+

Sets result page zoom level.

+

Inherited from​

+

AppConfig.zoom

+

Defined in​

+

models.ts:640

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/interfaces/EmbedOptions.html.md b/docs/api/interfaces/EmbedOptions.html.md new file mode 100644 index 0000000..a4f65b4 --- /dev/null +++ b/docs/api/interfaces/EmbedOptions.html.md @@ -0,0 +1,3807 @@ +# Interface: EmbedOptions + +An object that represents the playground embed options. + +See [docs](https://livecodes.io/docs/sdk/js-ts/#embed-options) for details. + +## Properties + +### appUrl? + +> `optional` **appUrl**: `string` + +Allows loading the playground from a custom URL +(e.g. a [self-hosted app](https://livecodes.io/docs/features/self-hosting) or a [permanent URL](https://livecodes.io/docs/features/permanent-url)). + +If supplied with an invalid URL, an error is thrown. + +#### Default + +```ts +'https://livecodes.io' +``` + +#### Defined in + +[models.ts:314](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L314) + +*** + +### config? + +> `optional` **config**: `string` \| `Partial`\<[`Config`](Config.md)\> + +A [configuration object](https://livecodes.io/docs/configuration/configuration-object) or a URL to a JSON file representing a configuration object to load. + +If supplied and is not an object or a valid URL, an error is thrown. + +#### Default + +```ts +{} +``` + +#### Defined in + +[models.ts:346](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L346) + +*** + +### headless? + +> `optional` **headless**: `boolean` + +If `true`, the playground is loaded in [headless mode](https://livecodes.io/docs/sdk/headless). + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:352](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L352) + +*** + +### import? + +> `optional` **import**: `string` + +A resource to [import](https://livecodes.io/docs/features/import) (from any of the supported [sources](https://livecodes.io/docs/features/import#sources)). + +#### Defined in + +[models.ts:357](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L357) + +*** + +### ~~lite?~~ + +> `optional` **lite**: `boolean` + +#### Deprecated + +Use `{ config: { mode: "lite" } }` instead + +If `true`, the playground is loaded in [lite mode](https://livecodes.io/docs/features/lite). + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:367](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L367) + +*** + +### loading? + +> `optional` **loading**: `"click"` \| `"eager"` \| `"lazy"` + +Sets how the playground loads: + +- `"eager"`: The playground loads immediately. +- `"lazy"`: A playground embedded low down in the page will not load until the user scrolls so that it approaches the viewport. +- `"click"`: The playground does not load automatically. Instead, a "Click-to-load" screen is shown. + +#### Default + +```ts +"lazy" +``` + +#### Defined in + +[models.ts:377](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L377) + +*** + +### params? + +> `optional` **params**: `object` + +An object that represents the [URL Query parameters](https://livecodes.io/docs/configuration/query-params), that can be used to configure the playground. + +These 2 snippets produce similar output: + +```js +import { createPlayground } from 'livecodes'; + +// use config +createPlayground('#container', { + config: { + markup: { + language: 'markdown', + content: '# Hello World!', + }, + }, +}); + +// use params +createPlayground('#container', { params: { md: '# Hello World!' } }); +``` + +#### active? + +> `optional` **active**: `0` \| `2` \| `1` \| [`EditorId`](../internal/type-aliases/EditorId.md) + +#### activeEditor? + +> `optional` **activeEditor**: `0` \| `2` \| `1` \| [`EditorId`](../internal/type-aliases/EditorId.md) + +#### adoc + +> **adoc**: `undefined` \| `string` + +#### adoc-selector + +> **adoc-selector**: `undefined` \| `string` + +#### allowLangChange? + +> `optional` **allowLangChange**: `boolean` + +If `false`, the UI will not show the menu that allows changing editor language. + +##### Default + +```ts +true +``` + +#### app.svelte + +> **svelte**: `undefined` \| `string` + +#### app.svelte-selector + +> **svelte-selector**: `undefined` \| `string` + +#### app.vue + +> **vue**: `undefined` \| `string` + +#### app.vue-selector + +> **vue-selector**: `undefined` \| `string` + +#### appLanguage? + +> `optional` **appLanguage**: [`AppLanguage`](../internal/type-aliases/AppLanguage.md) + +Sets the app UI language used. + +#### appUrl? + +> `optional` **appUrl**: `string` + +Allows loading the playground from a custom URL +(e.g. a [self-hosted app](https://livecodes.io/docs/features/self-hosting) or a [permanent URL](https://livecodes.io/docs/features/permanent-url)). + +If supplied with an invalid URL, an error is thrown. + +##### Default + +```ts +'https://livecodes.io' +``` + +#### art + +> **art**: `undefined` \| `string` + +#### art-selector + +> **art-selector**: `undefined` \| `string` + +#### art-template + +> **art-template**: `undefined` \| `string` + +#### art-template-selector + +> **art-template-selector**: `undefined` \| `string` + +#### as + +> **as**: `undefined` \| `string` + +#### as-selector + +> **as-selector**: `undefined` \| `string` + +#### asc + +> **asc**: `undefined` \| `string` + +#### asc-selector + +> **asc-selector**: `undefined` \| `string` + +#### asciidoc + +> **asciidoc**: `undefined` \| `string` + +#### asciidoc-selector + +> **asciidoc-selector**: `undefined` \| `string` + +#### assemblyscript + +> **assemblyscript**: `undefined` \| `string` + +#### assemblyscript-selector + +> **assemblyscript-selector**: `undefined` \| `string` + +#### astro + +> **astro**: `undefined` \| `string` + +#### astro-selector + +> **astro-selector**: `undefined` \| `string` + +#### autosave? + +> `optional` **autosave**: `boolean` + +If `true`, the project is automatically saved on code change, +after time [delay](https://livecodes.io/docs/configuration/configuration-object#delay). + +##### Default + +```ts +false +``` + +#### autotest? + +> `optional` **autotest**: `boolean` + +If `true`, the project is watched for code changes which trigger tests to auto-run. + +##### Default + +```ts +false +``` + +#### autoupdate? + +> `optional` **autoupdate**: `boolean` + +If `true`, the result page is automatically updated on code change, +after time [delay](https://livecodes.io/docs/configuration/configuration-object#delay). + +##### Default + +```ts +true +``` + +#### babel + +> **babel**: `undefined` \| `string` + +#### babel-selector + +> **babel-selector**: `undefined` \| `string` + +#### bb + +> **bb**: `undefined` \| `string` + +#### bb-selector + +> **bb-selector**: `undefined` \| `string` + +#### bbcode + +> **bbcode**: `undefined` \| `string` + +#### bbcode-selector + +> **bbcode-selector**: `undefined` \| `string` + +#### Binary + +> **Binary**: `undefined` \| `string` + +#### Binary-selector + +> **Binary-selector**: `undefined` \| `string` + +#### blockly + +> **blockly**: `undefined` \| `string` + +#### blockly-selector + +> **blockly-selector**: `undefined` \| `string` + +#### blockly.xml + +> **xml**: `undefined` \| `string` + +#### blockly.xml-selector + +> **xml-selector**: `undefined` \| `string` + +#### c + +> **c**: `undefined` \| `string` + +#### C + +> **C**: `undefined` \| `string` + +#### c-selector + +> **c-selector**: `undefined` \| `string` + +#### C-selector + +> **C-selector**: `undefined` \| `string` + +#### c++ + +> **c++**: `undefined` \| `string` + +#### c++-selector + +> **c++-selector**: `undefined` \| `string` + +#### civet + +> **civet**: `undefined` \| `string` + +#### civet-selector + +> **civet-selector**: `undefined` \| `string` + +#### clang + +> **clang**: `undefined` \| `string` + +#### clang-selector + +> **clang-selector**: `undefined` \| `string` + +#### clang.cpp + +> **cpp**: `undefined` \| `string` + +#### clang.cpp-selector + +> **cpp-selector**: `undefined` \| `string` + +#### clio + +> **clio**: `undefined` \| `string` + +#### clio-selector + +> **clio-selector**: `undefined` \| `string` + +#### clj + +> **clj**: `undefined` \| `string` + +#### clj-selector + +> **clj-selector**: `undefined` \| `string` + +#### cljc + +> **cljc**: `undefined` \| `string` + +#### cljc-selector + +> **cljc-selector**: `undefined` \| `string` + +#### cljs + +> **cljs**: `undefined` \| `string` + +#### cljs-selector + +> **cljs-selector**: `undefined` \| `string` + +#### clojure + +> **clojure**: `undefined` \| `string` + +#### clojure-selector + +> **clojure-selector**: `undefined` \| `string` + +#### clojurescript + +> **clojurescript**: `undefined` \| `string` + +#### clojurescript-selector + +> **clojurescript-selector**: `undefined` \| `string` + +#### closeBrackets? + +> `optional` **closeBrackets**: `boolean` + +Use auto-complete to close brackets and quotes. + +##### Default + +```ts +true +``` + +#### coffee + +> **coffee**: `undefined` \| `string` + +#### coffee-selector + +> **coffee-selector**: `undefined` \| `string` + +#### coffeescript + +> **coffeescript**: `undefined` \| `string` + +#### coffeescript-selector + +> **coffeescript-selector**: `undefined` \| `string` + +#### common-lisp + +> **common-lisp**: `undefined` \| `string` + +#### common-lisp-selector + +> **common-lisp-selector**: `undefined` \| `string` + +#### commonlisp + +> **commonlisp**: `undefined` \| `string` + +#### commonlisp-selector + +> **commonlisp-selector**: `undefined` \| `string` + +#### compiled + +> **compiled**: `undefined` \| `""` \| `"true"` \| `"none"` \| `"closed"` \| `"open"` \| `"full"` + +#### config? + +> `optional` **config**: `string` \| `Partial`\<[`Config`](Config.md)\> & `string` + +A [configuration object](https://livecodes.io/docs/configuration/configuration-object) or a URL to a JSON file representing a configuration object to load. + +If supplied and is not an object or a valid URL, an error is thrown. + +##### Default + +```ts +{} +``` + +#### console + +> **console**: `undefined` \| `""` \| `"true"` \| `"none"` \| `"closed"` \| `"open"` \| `"full"` + +#### cp + +> **cp**: `undefined` \| `string` + +#### cp-selector + +> **cp-selector**: `undefined` \| `string` + +#### cpp + +> **cpp**: `undefined` \| `string` + +#### cpp-selector + +> **cpp-selector**: `undefined` \| `string` + +#### cpp-wasm + +> **cpp-wasm**: `undefined` \| `string` + +#### cpp-wasm-selector + +> **cpp-wasm-selector**: `undefined` \| `string` + +#### cppm + +> **cppm**: `undefined` \| `string` + +#### cppm-selector + +> **cppm-selector**: `undefined` \| `string` + +#### cppwasm + +> **cppwasm**: `undefined` \| `string` + +#### cppwasm-selector + +> **cppwasm-selector**: `undefined` \| `string` + +#### cs + +> **cs**: `undefined` \| `string` + +#### cs-selector + +> **cs-selector**: `undefined` \| `string` + +#### cs-wasm + +> **cs-wasm**: `undefined` \| `string` + +#### cs-wasm-selector + +> **cs-wasm-selector**: `undefined` \| `string` + +#### csharp + +> **csharp**: `undefined` \| `string` + +#### csharp-selector + +> **csharp-selector**: `undefined` \| `string` + +#### csharp-wasm + +> **csharp-wasm**: `undefined` \| `string` + +#### csharp-wasm-selector + +> **csharp-wasm-selector**: `undefined` \| `string` + +#### css + +> **css**: `undefined` \| `string` + +#### css-selector + +> **css-selector**: `undefined` \| `string` + +#### cssPreset? + +> `optional` **cssPreset**: [`CssPresetId`](../internal/type-aliases/CssPresetId.md) + +[CSS Preset](https://livecodes.io/docs/features/external-resources#css-presets) to use. + +#### customSettings? + +> `optional` **customSettings**: `object` + +Defines [custom settings](https://livecodes.io/docs/advanced/custom-settings) for the current project. + +#### customSettings.adoc + +> **adoc**: `any` + +#### customSettings.app.svelte + +> **svelte**: `any` + +#### customSettings.app.vue + +> **vue**: `any` + +#### customSettings.art + +> **art**: `any` + +#### customSettings.art-template + +> **art-template**: `any` + +#### customSettings.as + +> **as**: `any` + +#### customSettings.asc + +> **asc**: `any` + +#### customSettings.asciidoc + +> **asciidoc**: `any` + +#### customSettings.assemblyscript + +> **assemblyscript**: `any` + +#### customSettings.astro + +> **astro**: `any` + +#### customSettings.autoprefixer + +> **autoprefixer**: `any` + +#### customSettings.babel + +> **babel**: `any` + +#### customSettings.bb + +> **bb**: `any` + +#### customSettings.bbcode + +> **bbcode**: `any` + +#### customSettings.Binary + +> **Binary**: `any` + +#### customSettings.blockly + +> **blockly**: `any` + +#### customSettings.blockly.xml + +> **xml**: `any` + +#### customSettings.c + +> **c**: `any` + +#### customSettings.C + +> **C**: `any` + +#### customSettings.c++ + +> **c++**: `any` + +#### customSettings.civet + +> **civet**: `any` + +#### customSettings.clang + +> **clang**: `any` + +#### customSettings.clang.cpp + +> **cpp**: `any` + +#### customSettings.clio + +> **clio**: `any` + +#### customSettings.clj + +> **clj**: `any` + +#### customSettings.cljc + +> **cljc**: `any` + +#### customSettings.cljs + +> **cljs**: `any` + +#### customSettings.clojure + +> **clojure**: `any` + +#### customSettings.clojurescript + +> **clojurescript**: `any` + +#### customSettings.coffee + +> **coffee**: `any` + +#### customSettings.coffeescript + +> **coffeescript**: `any` + +#### customSettings.common-lisp + +> **common-lisp**: `any` + +#### customSettings.commonlisp + +> **commonlisp**: `any` + +#### customSettings.convertCommonjs? + +> `optional` **convertCommonjs**: `boolean` + +#### customSettings.cp + +> **cp**: `any` + +#### customSettings.cpp + +> **cpp**: `any` + +#### customSettings.cpp-wasm + +> **cpp-wasm**: `any` + +#### customSettings.cppm + +> **cppm**: `any` + +#### customSettings.cppwasm + +> **cppwasm**: `any` + +#### customSettings.cs + +> **cs**: `any` + +#### customSettings.cs-wasm + +> **cs-wasm**: `any` + +#### customSettings.csharp + +> **csharp**: `any` + +#### customSettings.csharp-wasm + +> **csharp-wasm**: `any` + +#### customSettings.css + +> **css**: `any` + +#### customSettings.cssmodules + +> **cssmodules**: `any` + +#### customSettings.cssnano + +> **cssnano**: `any` + +#### customSettings.cwasm + +> **cwasm**: `any` + +#### customSettings.cxx + +> **cxx**: `any` + +#### customSettings.defaultCDN? + +> `optional` **defaultCDN**: [`CDN`](../internal/type-aliases/CDN.md) + +#### customSettings.diagram + +> **diagram**: `any` + +#### customSettings.diagrams + +> **diagrams**: `any` + +#### customSettings.dot + +> **dot**: `any` + +#### customSettings.edn + +> **edn**: `any` + +#### customSettings.ejs + +> **ejs**: `any` + +#### customSettings.es + +> **es**: `any` + +#### customSettings.eta + +> **eta**: `any` + +#### customSettings.fennel + +> **fennel**: `any` + +#### customSettings.flow + +> **flow**: `any` + +#### customSettings.fnl + +> **fnl**: `any` + +#### customSettings.gleam + +> **gleam**: `any` + +#### customSettings.go + +> **go**: `any` + +#### customSettings.golang + +> **golang**: `any` + +#### customSettings.graph + +> **graph**: `any` + +#### customSettings.h + +> **h**: `any` + +#### customSettings.haml + +> **haml**: `any` + +#### customSettings.handlebars + +> **handlebars**: `any` + +#### customSettings.hbs + +> **hbs**: `any` + +#### customSettings.hpp + +> **hpp**: `any` + +#### customSettings.htm + +> **htm**: `any` + +#### customSettings.html + +> **html**: `any` + +#### customSettings.ii + +> **ii**: `any` + +#### customSettings.imba + +> **imba**: `any` + +#### customSettings.imports? + +> `optional` **imports**: `Record`\<`string`, `string`\> + +#### customSettings.ixx + +> **ixx**: `any` + +#### customSettings.jade + +> **jade**: `any` + +#### customSettings.java + +> **java**: `any` + +#### customSettings.javascript + +> **javascript**: `any` + +#### customSettings.jinja + +> **jinja**: `any` + +#### customSettings.jl + +> **jl**: `any` + +#### customSettings.js + +> **js**: `any` + +#### customSettings.json + +> **json**: `any` + +#### customSettings.jsx + +> **jsx**: `any` + +#### customSettings.julia + +> **julia**: `any` + +#### customSettings.less + +> **less**: `any` + +#### customSettings.lightningcss + +> **lightningcss**: `any` + +#### customSettings.liquid + +> **liquid**: `any` + +#### customSettings.liquidjs + +> **liquidjs**: `any` + +#### customSettings.lisp + +> **lisp**: `any` + +#### customSettings.livescript + +> **livescript**: `any` + +#### customSettings.ls + +> **ls**: `any` + +#### customSettings.lua + +> **lua**: `any` + +#### customSettings.lua-wasm + +> **lua-wasm**: `any` + +#### customSettings.luawasm + +> **luawasm**: `any` + +#### customSettings.malina + +> **malina**: `any` + +#### customSettings.malinajs + +> **malinajs**: `any` + +#### customSettings.mapImports? + +> `optional` **mapImports**: `boolean` + +#### customSettings.markdown + +> **markdown**: `any` + +#### customSettings.md + +> **md**: `any` + +#### customSettings.mdown + +> **mdown**: `any` + +#### customSettings.html.md) + +> **mdx**: `any` + +#### customSettings.mjml + +> **mjml**: `any` + +#### customSettings.mkdn + +> **mkdn**: `any` + +#### customSettings.ml + +> **ml**: `any` + +#### customSettings.mli + +> **mli**: `any` + +#### customSettings.mustache + +> **mustache**: `any` + +#### customSettings.njk + +> **njk**: `any` + +#### customSettings.nunjucks + +> **nunjucks**: `any` + +#### customSettings.ocaml + +> **ocaml**: `any` + +#### customSettings.perl + +> **perl**: `any` + +#### customSettings.pg + +> **pg**: `any` + +#### customSettings.pg.sql + +> **sql**: `any` + +#### customSettings.pglite + +> **pglite**: `any` + +#### customSettings.pglite.sql + +> **sql**: `any` + +#### customSettings.pgsql + +> **pgsql**: `any` + +#### customSettings.pgsql.sql + +> **sql**: `any` + +#### customSettings.php + +> **php**: `any` + +#### customSettings.php-wasm + +> **php-wasm**: `any` + +#### customSettings.phpwasm + +> **phpwasm**: `any` + +#### customSettings.pintora + +> **pintora**: `any` + +#### customSettings.pl + +> **pl**: `any` + +#### customSettings.plt + +> **plt**: `any` + +#### customSettings.pm + +> **pm**: `any` + +#### customSettings.postcss + +> **postcss**: `any` + +#### customSettings.postcssImportUrl + +> **postcssImportUrl**: `any` + +#### customSettings.postcssPresetEnv + +> **postcssPresetEnv**: `any` + +#### customSettings.postgre.sql + +> **sql**: `any` + +#### customSettings.postgres + +> **postgres**: `any` + +#### customSettings.postgresql + +> **postgresql**: `any` + +#### customSettings.postgresql.sql + +> **sql**: `any` + +#### customSettings.prolog + +> **prolog**: `any` + +#### customSettings.prolog.pl + +> **pl**: `any` + +#### customSettings.pug + +> **pug**: `any` + +#### customSettings.purgecss + +> **purgecss**: `any` + +#### customSettings.py + +> **py**: `any` + +#### customSettings.py-wasm + +> **py-wasm**: `any` + +#### customSettings.py3 + +> **py3**: `any` + +#### customSettings.pyodide + +> **pyodide**: `any` + +#### customSettings.python + +> **python**: `any` + +#### customSettings.python-wasm + +> **python-wasm**: `any` + +#### customSettings.pythonwasm + +> **pythonwasm**: `any` + +#### customSettings.pywasm + +> **pywasm**: `any` + +#### customSettings.r + +> **r**: `any` + +#### customSettings.r-wasm + +> **r-wasm**: `any` + +#### customSettings.rb + +> **rb**: `any` + +#### customSettings.re + +> **re**: `any` + +#### customSettings.react + +> **react**: `any` + +#### customSettings.react-jsx + +> **react-jsx**: `any` + +#### customSettings.react-native + +> **react-native**: `any` + +#### customSettings.react-native-tsx + +> **react-native-tsx**: `any` + +#### customSettings.react-native.jsx + +> **jsx**: `any` + +#### customSettings.react-native.tsx + +> **tsx**: `any` + +#### customSettings.react-tsx + +> **react-tsx**: `any` + +#### customSettings.react.jsx + +> **jsx**: `any` + +#### customSettings.react.tsx + +> **tsx**: `any` + +#### customSettings.reason + +> **reason**: `any` + +#### customSettings.rei + +> **rei**: `any` + +#### customSettings.res + +> **res**: `any` + +#### customSettings.rescript + +> **rescript**: `any` + +#### customSettings.resi + +> **resi**: `any` + +#### customSettings.rich + +> **rich**: `any` + +#### customSettings.richtext + +> **richtext**: `any` + +#### customSettings.riot + +> **riot**: `any` + +#### customSettings.riotjs + +> **riotjs**: `any` + +#### customSettings.rlang + +> **rlang**: `any` + +#### customSettings.rstats + +> **rstats**: `any` + +#### customSettings.rte + +> **rte**: `any` + +#### customSettings.rte.html + +> **html**: `any` + +#### customSettings.ruby + +> **ruby**: `any` + +#### customSettings.ruby-wasm + +> **ruby-wasm**: `any` + +#### customSettings.rubywasm + +> **rubywasm**: `any` + +#### customSettings.sass + +> **sass**: `any` + +#### customSettings.scheme + +> **scheme**: `any` + +#### customSettings.scm + +> **scm**: `any` + +#### customSettings.scriptType? + +> `optional` **scriptType**: `""` \| `"module"` \| `"text/liquid"` \| `"text/python"` \| `"text/r"` \| `"text/ruby-wasm"` \| `"text/x-uniter-php"` \| `"text/php-wasm"` \| `"text/cpp"` \| `"text/java"` \| `"text/csharp-wasm"` \| `"text/perl"` \| `"text/julia"` \| `"text/biwascheme"` \| `"text/commonlisp"` \| `"text/tcl"` \| `"text/prolog"` \| `"application/json"` \| `"application/lua"` \| `"text/fennel"` \| `"application/wasm-uint8"` \| `"application/javascript"` \| `"application/ecmascript"` \| `"text/javascript"` \| `"text/ecmascript"` + +#### customSettings.scss + +> **scss**: `any` + +#### customSettings.solid + +> **solid**: `any` + +#### customSettings.solid.jsx + +> **jsx**: `any` + +#### customSettings.solid.tsx + +> **tsx**: `any` + +#### customSettings.sql + +> **sql**: `any` + +#### customSettings.sqlite + +> **sqlite**: `any` + +#### customSettings.sqlite3 + +> **sqlite3**: `any` + +#### customSettings.stencil + +> **stencil**: `any` + +#### customSettings.stencil.tsx + +> **tsx**: `any` + +#### customSettings.styl + +> **styl**: `any` + +#### customSettings.stylis + +> **stylis**: `any` + +#### customSettings.stylus + +> **stylus**: `any` + +#### customSettings.sucrase + +> **sucrase**: `any` + +#### customSettings.svelte + +> **svelte**: `any` + +#### customSettings.svelte-app + +> **svelte-app**: `any` + +#### customSettings.tailwindcss + +> **tailwindcss**: `any` + +#### customSettings.tcl + +> **tcl**: `any` + +#### customSettings.teal + +> **teal**: `any` + +#### customSettings.template? + +> `optional` **template**: `object` + +#### customSettings.template.data? + +> `optional` **data**: `any` + +#### customSettings.template.prerender? + +> `optional` **prerender**: `boolean` + +#### customSettings.tl + +> **tl**: `any` + +#### customSettings.tokencss + +> **tokencss**: `any` + +#### customSettings.ts + +> **ts**: `any` + +#### customSettings.tsx + +> **tsx**: `any` + +#### customSettings.twig + +> **twig**: `any` + +#### customSettings.types? + +> `optional` **types**: [`Types`](../internal/interfaces/Types.md) + +#### customSettings.typescript + +> **typescript**: `any` + +#### customSettings.unocss + +> **unocss**: `any` + +#### customSettings.vento + +> **vento**: `any` + +#### customSettings.vto + +> **vto**: `any` + +#### customSettings.vue + +> **vue**: `any` + +#### customSettings.vue-app + +> **vue-app**: `any` + +#### customSettings.vue2 + +> **vue2**: `any` + +#### customSettings.vue3 + +> **vue3**: `any` + +#### customSettings.wasm + +> **wasm**: `any` + +#### customSettings.wasm.cpp + +> **cpp**: `any` + +#### customSettings.wasm.cs + +> **cs**: `any` + +#### customSettings.wasm.lua + +> **lua**: `any` + +#### customSettings.wasm.php + +> **php**: `any` + +#### customSettings.wasm.py + +> **py**: `any` + +#### customSettings.wasm.rb + +> **rb**: `any` + +#### customSettings.wast + +> **wast**: `any` + +#### customSettings.wat + +> **wat**: `any` + +#### customSettings.webassembly + +> **webassembly**: `any` + +#### customSettings.windicss + +> **windicss**: `any` + +#### customSettings.xht + +> **xht**: `any` + +#### customSettings.xml + +> **xml**: `any` + +#### cwasm + +> **cwasm**: `undefined` \| `string` + +#### cwasm-selector + +> **cwasm-selector**: `undefined` \| `string` + +#### cxx + +> **cxx**: `undefined` \| `string` + +#### cxx-selector + +> **cxx-selector**: `undefined` \| `string` + +#### delay? + +> `optional` **delay**: `number` + +Time delay (in milliseconds) following code change, +after which the result page is updated (if [`autoupdate`](https://livecodes.io/docs/configuration/configuration-object#autoupdate) is `true`) +and/or the project is saved (if [`autosave`](https://livecodes.io/docs/configuration/configuration-object#autosave) is `true`). + +##### Default + +```ts +1500 +``` + +#### description? + +> `optional` **description**: `string` + +Project description. Used in [project](https://livecodes.io/docs/features/projects) search +and [result page](https://livecodes.io/docs/features/result) description meta tag. + +##### Default + +```ts +"" +``` + +#### diagram + +> **diagram**: `undefined` \| `string` + +#### diagram-selector + +> **diagram-selector**: `undefined` \| `string` + +#### diagrams + +> **diagrams**: `undefined` \| `string` + +#### diagrams-selector + +> **diagrams-selector**: `undefined` \| `string` + +#### disableAI? + +> `optional` **disableAI**: `boolean` + +#### dot + +> **dot**: `undefined` \| `string` + +#### dot-selector + +> **dot-selector**: `undefined` \| `string` + +#### editor? + +> `optional` **editor**: `"auto"` \| `"monaco"` \| `"codemirror"` \| `"codejar"` + +Selects the [code editor](https://livecodes.io/docs/features/editor-settings#code-editor) to use. + +If `undefined` (the default), Monaco editor is used on desktop, +CodeMirror is used on mobile and in `simple` mode, +while CodeJar is used in `codeblock` mode, in `lite` mode and in `readonly` playgrounds. + +If set to `auto`, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings. + +##### Default + +```ts +undefined +``` + +#### editorMode? + +> `optional` **editorMode**: `"vim"` \| `"emacs"` + +Sets [editor mode](https://livecodes.io/docs/features/editor-settings#editor-modes). + +#### editorTheme? + +> `optional` **editorTheme**: `string` \| [`EditorTheme`](../internal/type-aliases/EditorTheme.md)[] + +Sets the [code editor](https://livecodes.io/docs/features/editor-settings) themes. + +See docs for [editor themes](https://livecodes.io/docs/configuration/configuration-object#editortheme) for details. + +##### Examples + +```ts +"vs" +``` + +```ts +"monaco:twilight, codemirror:one-dark" +``` + +```ts +["vs@light"] +``` + +```ts +["vs@light", "vs-dark@dark"] +``` + +```ts +["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"] +``` + +#### edn + +> **edn**: `undefined` \| `string` + +#### edn-selector + +> **edn-selector**: `undefined` \| `string` + +#### ejs + +> **ejs**: `undefined` \| `string` + +#### ejs-selector + +> **ejs-selector**: `undefined` \| `string` + +#### embed? + +> `optional` **embed**: `boolean` + +#### emmet? + +> `optional` **emmet**: `boolean` + +Enables [Emmet](https://livecodes.io/docs/features/editor-settings#emmet). + +##### Default + +```ts +true +``` + +#### enableAI? + +> `optional` **enableAI**: `boolean` + +If `true`, [AI code assistant](https://livecodes.io/docs/features/ai) is enabled. + +##### Default + +```ts +false +``` + +#### es + +> **es**: `undefined` \| `string` + +#### es-selector + +> **es-selector**: `undefined` \| `string` + +#### eta + +> **eta**: `undefined` \| `string` + +#### eta-selector + +> **eta-selector**: `undefined` \| `string` + +#### fennel + +> **fennel**: `undefined` \| `string` + +#### fennel-selector + +> **fennel-selector**: `undefined` \| `string` + +#### files? + +> `optional` **files**: `string` + +#### flow + +> **flow**: `undefined` \| `string` + +#### flow-selector + +> **flow-selector**: `undefined` \| `string` + +#### fnl + +> **fnl**: `undefined` \| `string` + +#### fnl-selector + +> **fnl-selector**: `undefined` \| `string` + +#### foldRegions? + +> `optional` **foldRegions**: `boolean` + +When set to `true`, regions marked by `#region` and `#endregion` comments are folded when the project is loaded. + +##### Default + +```ts +false +``` + +#### fontFamily? + +> `optional` **fontFamily**: `string` + +Sets the [code editor](https://livecodes.io/docs/features/editor-settings) font family. + +#### fontSize? + +> `optional` **fontSize**: `number` + +Sets the font size. + +If `undefined` (the default), the font size is set to 14 for the full app and 12 for [embeds](https://livecodes.io/docs/features/embeds). + +##### Default + +```ts +undefined +``` + +#### formatOnsave? + +> `optional` **formatOnsave**: `boolean` + +If `true`, the code is automatically [formatted](https://livecodes.io/docs/features/code-format) on saving the project. + +##### Default + +```ts +false +``` + +#### gleam + +> **gleam**: `undefined` \| `string` + +#### gleam-selector + +> **gleam-selector**: `undefined` \| `string` + +#### go + +> **go**: `undefined` \| `string` + +#### go-selector + +> **go-selector**: `undefined` \| `string` + +#### golang + +> **golang**: `undefined` \| `string` + +#### golang-selector + +> **golang-selector**: `undefined` \| `string` + +#### graph + +> **graph**: `undefined` \| `string` + +#### graph-selector + +> **graph-selector**: `undefined` \| `string` + +#### h + +> **h**: `undefined` \| `string` + +#### h-selector + +> **h-selector**: `undefined` \| `string` + +#### haml + +> **haml**: `undefined` \| `string` + +#### haml-selector + +> **haml-selector**: `undefined` \| `string` + +#### handlebars + +> **handlebars**: `undefined` \| `string` + +#### handlebars-selector + +> **handlebars-selector**: `undefined` \| `string` + +#### hbs + +> **hbs**: `undefined` \| `string` + +#### hbs-selector + +> **hbs-selector**: `undefined` \| `string` + +#### head? + +> `optional` **head**: `string` + +Content added to the [result page](https://livecodes.io/docs/features/result) `` element. + +##### Default + +```ts +'\n' +``` + +#### headless? + +> `optional` **headless**: `boolean` + +If `true`, the playground is loaded in [headless mode](https://livecodes.io/docs/sdk/headless). + +##### Default + +```ts +false +``` + +#### hpp + +> **hpp**: `undefined` \| `string` + +#### hpp-selector + +> **hpp-selector**: `undefined` \| `string` + +#### htm + +> **htm**: `undefined` \| `string` + +#### htm-selector + +> **htm-selector**: `undefined` \| `string` + +#### html + +> **html**: `undefined` \| `string` + +#### html-selector + +> **html-selector**: `undefined` \| `string` + +#### htmlAttrs? + +> `optional` **htmlAttrs**: `string` \| `Record`\<`string`, `string`\> + +Attributes added to the [result page](https://livecodes.io/docs/features/result) `` element. +It can be an object or a string. + +##### Example + +```ts +{ lang: "en", class: "dark" } +'lang="en" class="dark"' +``` + +#### ii + +> **ii**: `undefined` \| `string` + +#### ii-selector + +> **ii-selector**: `undefined` \| `string` + +#### imba + +> **imba**: `undefined` \| `string` + +#### imba-selector + +> **imba-selector**: `undefined` \| `string` + +#### import? + +> `optional` **import**: `string` + +A resource to [import](https://livecodes.io/docs/features/import) (from any of the supported [sources](https://livecodes.io/docs/features/import#sources)). + +#### imports? + +> `optional` **imports**: `object` + +Allows specifying custom [import maps](https://github.com/WICG/import-maps) for [module imports](https://livecodes.io/docs/features/module-resolution#custom-module-resolution). + +**Example** + +Setting `imports` like this: +```js +"imports": { + "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js" +} +``` +results in the following import map: +```html + +``` +See docs for [Imports](https://livecodes.io/docs/configuration/configuration-object#imports) +and [Custom Module Resolution](https://livecodes.io/docs/features/module-resolution/#custom-module-resolution) + +##### Index Signature + + \[`key`: `string`\]: `string` + +#### ixx + +> **ixx**: `undefined` \| `string` + +#### ixx-selector + +> **ixx-selector**: `undefined` \| `string` + +#### jade + +> **jade**: `undefined` \| `string` + +#### jade-selector + +> **jade-selector**: `undefined` \| `string` + +#### java + +> **java**: `undefined` \| `string` + +#### java-selector + +> **java-selector**: `undefined` \| `string` + +#### javascript + +> **javascript**: `undefined` \| `string` + +#### javascript-selector + +> **javascript-selector**: `undefined` \| `string` + +#### jinja + +> **jinja**: `undefined` \| `string` + +#### jinja-selector + +> **jinja-selector**: `undefined` \| `string` + +#### jl + +> **jl**: `undefined` \| `string` + +#### jl-selector + +> **jl-selector**: `undefined` \| `string` + +#### js + +> **js**: `undefined` \| `string` + +#### js-selector + +> **js-selector**: `undefined` \| `string` + +#### json + +> **json**: `undefined` \| `string` + +#### json-selector + +> **json-selector**: `undefined` \| `string` + +#### jsx + +> **jsx**: `undefined` \| `string` + +#### jsx-selector + +> **jsx-selector**: `undefined` \| `string` + +#### julia + +> **julia**: `undefined` \| `string` + +#### julia-selector + +> **julia-selector**: `undefined` \| `string` + +#### lang? + +> `optional` **lang**: [`Language`](../type-aliases/Language.md) + +#### language? + +> `optional` **language**: [`Language`](../type-aliases/Language.md) + +#### languages? + +> `optional` **languages**: `string` + +#### layout? + +> `optional` **layout**: `"horizontal"` \| `"vertical"` \| `"responsive"` + +Sets the app layout to horizontal or vertical. +If set to `"responsive"` (the default) or `undefined`, +the layout is vertical in small screens when the playground height is larger than its width, +otherwise horizontal. + +##### Default + +```ts +"responsive" +``` + +#### less + +> **less**: `undefined` \| `string` + +#### less-selector + +> **less-selector**: `undefined` \| `string` + +#### lineNumbers? + +> `optional` **lineNumbers**: `boolean` \| `"relative"` + +Show line numbers in [code editor](https://livecodes.io/docs/features/editor-settings). + +##### Default + +```ts +true +``` + +#### liquid + +> **liquid**: `undefined` \| `string` + +#### liquid-selector + +> **liquid-selector**: `undefined` \| `string` + +#### liquidjs + +> **liquidjs**: `undefined` \| `string` + +#### liquidjs-selector + +> **liquidjs-selector**: `undefined` \| `string` + +#### lisp + +> **lisp**: `undefined` \| `string` + +#### lisp-selector + +> **lisp-selector**: `undefined` \| `string` + +#### ~~lite?~~ + +> `optional` **lite**: `boolean` + +##### Deprecated + +Use `{ config: { mode: "lite" } }` instead + +If `true`, the playground is loaded in [lite mode](https://livecodes.io/docs/features/lite). + +##### Default + +```ts +false +``` + +#### livescript + +> **livescript**: `undefined` \| `string` + +#### livescript-selector + +> **livescript-selector**: `undefined` \| `string` + +#### loading? + +> `optional` **loading**: `"click"` \| `"eager"` \| `"lazy"` + +Sets how the playground loads: + +- `"eager"`: The playground loads immediately. +- `"lazy"`: A playground embedded low down in the page will not load until the user scrolls so that it approaches the viewport. +- `"click"`: The playground does not load automatically. Instead, a "Click-to-load" screen is shown. + +##### Default + +```ts +"lazy" +``` + +#### ls + +> **ls**: `undefined` \| `string` + +#### ls-selector + +> **ls-selector**: `undefined` \| `string` + +#### lua + +> **lua**: `undefined` \| `string` + +#### lua-selector + +> **lua-selector**: `undefined` \| `string` + +#### lua-wasm + +> **lua-wasm**: `undefined` \| `string` + +#### lua-wasm-selector + +> **lua-wasm-selector**: `undefined` \| `string` + +#### luawasm + +> **luawasm**: `undefined` \| `string` + +#### luawasm-selector + +> **luawasm-selector**: `undefined` \| `string` + +#### malina + +> **malina**: `undefined` \| `string` + +#### malina-selector + +> **malina-selector**: `undefined` \| `string` + +#### malinajs + +> **malinajs**: `undefined` \| `string` + +#### malinajs-selector + +> **malinajs-selector**: `undefined` \| `string` + +#### markdown + +> **markdown**: `undefined` \| `string` + +#### markdown-selector + +> **markdown-selector**: `undefined` \| `string` + +#### markup? + +> `optional` **markup**: `object` + +An object that configures the language and content of the markup editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +##### Default + +```ts +{ language: "html", content: "" } +``` + +#### markup.content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### markup.contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### markup.foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### markup.hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### markup.hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### markup.hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### markup.language + +> **language**: [`Language`](../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### markup.order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### markup.position? + +> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### markup.selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### markup.title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### md + +> **md**: `undefined` \| `string` + +#### md-selector + +> **md-selector**: `undefined` \| `string` + +#### mdown + +> **mdown**: `undefined` \| `string` + +#### mdown-selector + +> **mdown-selector**: `undefined` \| `string` + +#### mdx + +> **mdx**: `undefined` \| `string` + +#### mdx-selector + +> **mdx-selector**: `undefined` \| `string` + +#### mjml + +> **mjml**: `undefined` \| `string` + +#### mjml-selector + +> **mjml-selector**: `undefined` \| `string` + +#### mkdn + +> **mkdn**: `undefined` \| `string` + +#### mkdn-selector + +> **mkdn-selector**: `undefined` \| `string` + +#### ml + +> **ml**: `undefined` \| `string` + +#### ml-selector + +> **ml-selector**: `undefined` \| `string` + +#### mli + +> **mli**: `undefined` \| `string` + +#### mli-selector + +> **mli-selector**: `undefined` \| `string` + +#### mode? + +> `optional` **mode**: `"focus"` \| `"full"` \| `"result"` \| `"editor"` \| `"lite"` \| `"simple"` \| `"codeblock"` + +Sets the [display mode](https://livecodes.io/docs/features/display-modes). + +##### Default + +```ts +"full" +``` + +#### mustache + +> **mustache**: `undefined` \| `string` + +#### mustache-selector + +> **mustache-selector**: `undefined` \| `string` + +#### new? + +> `optional` **new**: `""` + +#### njk + +> **njk**: `undefined` \| `string` + +#### njk-selector + +> **njk-selector**: `undefined` \| `string` + +#### no-defaults? + +> `optional` **no-defaults**: `boolean` + +#### nunjucks + +> **nunjucks**: `undefined` \| `string` + +#### nunjucks-selector + +> **nunjucks-selector**: `undefined` \| `string` + +#### ocaml + +> **ocaml**: `undefined` \| `string` + +#### ocaml-selector + +> **ocaml-selector**: `undefined` \| `string` + +#### params? + +> `optional` **params**: \{ appUrl?: string \| undefined; params?: ... \| undefined; config?: string \| (Partial\ & string) \| undefined; headless?: boolean \| undefined; import?: string \| undefined; ... 475 more ...; compiled?: "" \| ... 5 more ... \| undefined; \} \| undefined + +An object that represents the [URL Query parameters](https://livecodes.io/docs/configuration/query-params), that can be used to configure the playground. + +These 2 snippets produce similar output: + +```js +import { createPlayground } from 'livecodes'; + +// use config +createPlayground('#container', { + config: { + markup: { + language: 'markdown', + content: '# Hello World!', + }, + }, +}); + +// use params +createPlayground('#container', { params: { md: '# Hello World!' } }); +``` + +#### perl + +> **perl**: `undefined` \| `string` + +#### perl-selector + +> **perl-selector**: `undefined` \| `string` + +#### pg + +> **pg**: `undefined` \| `string` + +#### pg-selector + +> **pg-selector**: `undefined` \| `string` + +#### pg.sql + +> **sql**: `undefined` \| `string` + +#### pg.sql-selector + +> **sql-selector**: `undefined` \| `string` + +#### pglite + +> **pglite**: `undefined` \| `string` + +#### pglite-selector + +> **pglite-selector**: `undefined` \| `string` + +#### pglite.sql + +> **sql**: `undefined` \| `string` + +#### pglite.sql-selector + +> **sql-selector**: `undefined` \| `string` + +#### pgsql + +> **pgsql**: `undefined` \| `string` + +#### pgsql-selector + +> **pgsql-selector**: `undefined` \| `string` + +#### pgsql.sql + +> **sql**: `undefined` \| `string` + +#### pgsql.sql-selector + +> **sql-selector**: `undefined` \| `string` + +#### php + +> **php**: `undefined` \| `string` + +#### php-selector + +> **php-selector**: `undefined` \| `string` + +#### php-wasm + +> **php-wasm**: `undefined` \| `string` + +#### php-wasm-selector + +> **php-wasm-selector**: `undefined` \| `string` + +#### phpwasm + +> **phpwasm**: `undefined` \| `string` + +#### phpwasm-selector + +> **phpwasm-selector**: `undefined` \| `string` + +#### pintora + +> **pintora**: `undefined` \| `string` + +#### pintora-selector + +> **pintora-selector**: `undefined` \| `string` + +#### pl + +> **pl**: `undefined` \| `string` + +#### pl-selector + +> **pl-selector**: `undefined` \| `string` + +#### plt + +> **plt**: `undefined` \| `string` + +#### plt-selector + +> **plt-selector**: `undefined` \| `string` + +#### pm + +> **pm**: `undefined` \| `string` + +#### pm-selector + +> **pm-selector**: `undefined` \| `string` + +#### postcss + +> **postcss**: `undefined` \| `string` + +#### postcss-selector + +> **postcss-selector**: `undefined` \| `string` + +#### postgre.sql + +> **sql**: `undefined` \| `string` + +#### postgre.sql-selector + +> **sql-selector**: `undefined` \| `string` + +#### postgres + +> **postgres**: `undefined` \| `string` + +#### postgres-selector + +> **postgres-selector**: `undefined` \| `string` + +#### postgresql + +> **postgresql**: `undefined` \| `string` + +#### postgresql-selector + +> **postgresql-selector**: `undefined` \| `string` + +#### postgresql.sql + +> **sql**: `undefined` \| `string` + +#### postgresql.sql-selector + +> **sql-selector**: `undefined` \| `string` + +#### preview? + +> `optional` **preview**: `boolean` + +#### processors? + +> `optional` **processors**: `string` + +#### prolog + +> **prolog**: `undefined` \| `string` + +#### prolog-selector + +> **prolog-selector**: `undefined` \| `string` + +#### prolog.pl + +> **pl**: `undefined` \| `string` + +#### prolog.pl-selector + +> **pl-selector**: `undefined` \| `string` + +#### pug + +> **pug**: `undefined` \| `string` + +#### pug-selector + +> **pug-selector**: `undefined` \| `string` + +#### py + +> **py**: `undefined` \| `string` + +#### py-selector + +> **py-selector**: `undefined` \| `string` + +#### py-wasm + +> **py-wasm**: `undefined` \| `string` + +#### py-wasm-selector + +> **py-wasm-selector**: `undefined` \| `string` + +#### py3 + +> **py3**: `undefined` \| `string` + +#### py3-selector + +> **py3-selector**: `undefined` \| `string` + +#### pyodide + +> **pyodide**: `undefined` \| `string` + +#### pyodide-selector + +> **pyodide-selector**: `undefined` \| `string` + +#### python + +> **python**: `undefined` \| `string` + +#### python-selector + +> **python-selector**: `undefined` \| `string` + +#### python-wasm + +> **python-wasm**: `undefined` \| `string` + +#### python-wasm-selector + +> **python-wasm-selector**: `undefined` \| `string` + +#### pythonwasm + +> **pythonwasm**: `undefined` \| `string` + +#### pythonwasm-selector + +> **pythonwasm-selector**: `undefined` \| `string` + +#### pywasm + +> **pywasm**: `undefined` \| `string` + +#### pywasm-selector + +> **pywasm-selector**: `undefined` \| `string` + +#### r + +> **r**: `undefined` \| `string` + +#### r-selector + +> **r-selector**: `undefined` \| `string` + +#### r-wasm + +> **r-wasm**: `undefined` \| `string` + +#### r-wasm-selector + +> **r-wasm-selector**: `undefined` \| `string` + +#### raw? + +> `optional` **raw**: [`Language`](../type-aliases/Language.md) + +#### rb + +> **rb**: `undefined` \| `string` + +#### rb-selector + +> **rb-selector**: `undefined` \| `string` + +#### re + +> **re**: `undefined` \| `string` + +#### re-selector + +> **re-selector**: `undefined` \| `string` + +#### react + +> **react**: `undefined` \| `string` + +#### react-jsx + +> **react-jsx**: `undefined` \| `string` + +#### react-jsx-selector + +> **react-jsx-selector**: `undefined` \| `string` + +#### react-native + +> **react-native**: `undefined` \| `string` + +#### react-native-selector + +> **react-native-selector**: `undefined` \| `string` + +#### react-native-tsx + +> **react-native-tsx**: `undefined` \| `string` + +#### react-native-tsx-selector + +> **react-native-tsx-selector**: `undefined` \| `string` + +#### react-native.jsx + +> **jsx**: `undefined` \| `string` + +#### react-native.jsx-selector + +> **jsx-selector**: `undefined` \| `string` + +#### react-native.tsx + +> **tsx**: `undefined` \| `string` + +#### react-native.tsx-selector + +> **tsx-selector**: `undefined` \| `string` + +#### react-selector + +> **react-selector**: `undefined` \| `string` + +#### react-tsx + +> **react-tsx**: `undefined` \| `string` + +#### react-tsx-selector + +> **react-tsx-selector**: `undefined` \| `string` + +#### react.jsx + +> **jsx**: `undefined` \| `string` + +#### react.jsx-selector + +> **jsx-selector**: `undefined` \| `string` + +#### react.tsx + +> **tsx**: `undefined` \| `string` + +#### react.tsx-selector + +> **tsx-selector**: `undefined` \| `string` + +#### readonly? + +> `optional` **readonly**: `boolean` + +If `true`, editors are loaded in read-only mode, where the user is not allowed to change the code. + +By default, when readonly is set to true, the light-weight code editor [CodeJar](https://livecodes.io/docs/features/editor-settings#code-editor) is used. +If you wish to use another editor, set the [editor](https://livecodes.io/docs/configuration/configuration-object#editor) property. + +##### Default + +```ts +false +``` + +#### reason + +> **reason**: `undefined` \| `string` + +#### reason-selector + +> **reason-selector**: `undefined` \| `string` + +#### recoverUnsaved? + +> `optional` **recoverUnsaved**: `boolean` + +Enables [recovering last unsaved project](https://livecodes.io/docs/features/recover) when the app is reopened. + +##### Default + +```ts +true +``` + +#### rei + +> **rei**: `undefined` \| `string` + +#### rei-selector + +> **rei-selector**: `undefined` \| `string` + +#### res + +> **res**: `undefined` \| `string` + +#### res-selector + +> **res-selector**: `undefined` \| `string` + +#### rescript + +> **rescript**: `undefined` \| `string` + +#### rescript-selector + +> **rescript-selector**: `undefined` \| `string` + +#### resi + +> **resi**: `undefined` \| `string` + +#### resi-selector + +> **resi-selector**: `undefined` \| `string` + +#### rich + +> **rich**: `undefined` \| `string` + +#### rich-selector + +> **rich-selector**: `undefined` \| `string` + +#### richtext + +> **richtext**: `undefined` \| `string` + +#### richtext-selector + +> **richtext-selector**: `undefined` \| `string` + +#### riot + +> **riot**: `undefined` \| `string` + +#### riot-selector + +> **riot-selector**: `undefined` \| `string` + +#### riotjs + +> **riotjs**: `undefined` \| `string` + +#### riotjs-selector + +> **riotjs-selector**: `undefined` \| `string` + +#### rlang + +> **rlang**: `undefined` \| `string` + +#### rlang-selector + +> **rlang-selector**: `undefined` \| `string` + +#### rstats + +> **rstats**: `undefined` \| `string` + +#### rstats-selector + +> **rstats-selector**: `undefined` \| `string` + +#### rte + +> **rte**: `undefined` \| `string` + +#### rte-selector + +> **rte-selector**: `undefined` \| `string` + +#### rte.html + +> **html**: `undefined` \| `string` + +#### rte.html-selector + +> **html-selector**: `undefined` \| `string` + +#### ruby + +> **ruby**: `undefined` \| `string` + +#### ruby-selector + +> **ruby-selector**: `undefined` \| `string` + +#### ruby-wasm + +> **ruby-wasm**: `undefined` \| `string` + +#### ruby-wasm-selector + +> **ruby-wasm-selector**: `undefined` \| `string` + +#### rubywasm + +> **rubywasm**: `undefined` \| `string` + +#### rubywasm-selector + +> **rubywasm-selector**: `undefined` \| `string` + +#### sass + +> **sass**: `undefined` \| `string` + +#### sass-selector + +> **sass-selector**: `undefined` \| `string` + +#### scheme + +> **scheme**: `undefined` \| `string` + +#### scheme-selector + +> **scheme-selector**: `undefined` \| `string` + +#### scm + +> **scm**: `undefined` \| `string` + +#### scm-selector + +> **scm-selector**: `undefined` \| `string` + +#### screen? + +> `optional` **screen**: `"new"` \| `"open"` \| `"embed"` \| `"sync"` \| `"about"` \| `"welcome"` \| `"add-snippet"` \| `"login"` \| `"info"` \| `"assets"` \| `"add-asset"` \| `"snippets"` \| `"import"` \| `"resources"` \| `"share"` \| `"deploy"` \| `"backup"` \| `"broadcast"` \| `"custom-settings"` \| `"editor-settings"` \| `"code-to-image"` \| `"test-editor"` \| `"keyboard-shortcuts"` + +#### script? + +> `optional` **script**: `object` + +An object that configures the language and content of the script editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +##### Default + +```ts +{ language: "javascript", content: "" } +``` + +#### script.content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### script.contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### script.foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### script.hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### script.hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### script.hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### script.language + +> **language**: [`Language`](../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### script.order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### script.position? + +> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### script.selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### script.title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### scripts? + +> `optional` **scripts**: `string` + +#### scrollPosition? + +> `optional` **scrollPosition**: `boolean` + +#### scss + +> **scss**: `undefined` \| `string` + +#### scss-selector + +> **scss-selector**: `undefined` \| `string` + +#### sdkVersion? + +> `optional` **sdkVersion**: `string` + +#### semicolons? + +> `optional` **semicolons**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use semi-colons. + +##### Default + +```ts +true +``` + +#### showSpacing? + +> `optional` **showSpacing**: `boolean` + +Enables [showing element spacing](https://livecodes.io/docs/features/result#show-spacings) in the result page. + +##### Default + +```ts +false +``` + +#### singleQuote? + +> `optional` **singleQuote**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use single quotes instead of double quotes. + +##### Default + +```ts +false +``` + +#### solid + +> **solid**: `undefined` \| `string` + +#### solid-selector + +> **solid-selector**: `undefined` \| `string` + +#### solid.jsx + +> **jsx**: `undefined` \| `string` + +#### solid.jsx-selector + +> **jsx-selector**: `undefined` \| `string` + +#### solid.tsx + +> **tsx**: `undefined` \| `string` + +#### solid.tsx-selector + +> **tsx-selector**: `undefined` \| `string` + +#### sql + +> **sql**: `undefined` \| `string` + +#### sql-selector + +> **sql-selector**: `undefined` \| `string` + +#### sqlite + +> **sqlite**: `undefined` \| `string` + +#### sqlite-selector + +> **sqlite-selector**: `undefined` \| `string` + +#### sqlite3 + +> **sqlite3**: `undefined` \| `string` + +#### sqlite3-selector + +> **sqlite3-selector**: `undefined` \| `string` + +#### stencil + +> **stencil**: `undefined` \| `string` + +#### stencil-selector + +> **stencil-selector**: `undefined` \| `string` + +#### stencil.tsx + +> **tsx**: `undefined` \| `string` + +#### stencil.tsx-selector + +> **tsx-selector**: `undefined` \| `string` + +#### styl + +> **styl**: `undefined` \| `string` + +#### styl-selector + +> **styl-selector**: `undefined` \| `string` + +#### style? + +> `optional` **style**: `object` + +An object that configures the language and content of the style editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +##### Default + +```ts +{ language: "css", content: "" } +``` + +#### style.content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### style.contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### style.foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### style.hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### style.hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### style.hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### style.language + +> **language**: [`Language`](../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### style.order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### style.position? + +> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### style.selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### style.title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### stylesheets? + +> `optional` **stylesheets**: `string` + +#### stylis + +> **stylis**: `undefined` \| `string` + +#### stylis-selector + +> **stylis-selector**: `undefined` \| `string` + +#### stylus + +> **stylus**: `undefined` \| `string` + +#### stylus-selector + +> **stylus-selector**: `undefined` \| `string` + +#### sucrase + +> **sucrase**: `undefined` \| `string` + +#### sucrase-selector + +> **sucrase-selector**: `undefined` \| `string` + +#### svelte + +> **svelte**: `undefined` \| `string` + +#### svelte-app + +> **svelte-app**: `undefined` \| `string` + +#### svelte-app-selector + +> **svelte-app-selector**: `undefined` \| `string` + +#### svelte-selector + +> **svelte-selector**: `undefined` \| `string` + +#### tabSize? + +> `optional` **tabSize**: `number` + +The number of spaces per indentation-level. + +Also used in [code formatting](https://livecodes.io/docs/features/code-format). + +##### Default + +```ts +2 +``` + +#### tags? + +> `optional` **tags**: `string` \| `string`[] + +#### tcl + +> **tcl**: `undefined` \| `string` + +#### tcl-selector + +> **tcl-selector**: `undefined` \| `string` + +#### teal + +> **teal**: `undefined` \| `string` + +#### teal-selector + +> **teal-selector**: `undefined` \| `string` + +#### template? + +> `optional` **template**: [`TemplateName`](../internal/type-aliases/TemplateName.md) + +A [starter template](https://livecodes.io/docs/features/templates) to load. +Allowed valued can be found [here](https://livecodes.io/docs/api/internal/type-aliases/TemplateName). + +#### tests? + +> `optional` **tests**: (\{ language?: Language \| undefined; content?: string \| undefined; contentUrl?: string \| undefined; hiddenContent?: string \| undefined; hiddenContentUrl?: string \| undefined; ... 5 more ...; position?: EditorPosition \| undefined; \} \| undefined) & ("" \| ... 4 more ... \| "full") + +Configures the [language](https://livecodes.io/docs/features/tests#supported-languages) +and content of [tests](https://livecodes.io/docs/features/tests). + +#### theme? + +> `optional` **theme**: [`Theme`](../internal/type-aliases/Theme.md) + +Sets the app [theme](https://livecodes.io/docs/features/themes) to light/dark mode. + +##### Default + +```ts +"dark" +``` + +#### themeColor? + +> `optional` **themeColor**: `string` + +Sets the app theme color. +If `undefined`, it is set to `"hsl(214, 40%, 50%)"`. + +##### Default + +```ts +undefined +``` + +#### title? + +> `optional` **title**: `string` + +Project title. +This is used as [result page](https://livecodes.io/docs/features/result) title and title meta tag. +Also used in project search. + +##### Default + +```ts +"Untitled Project" +``` + +#### tl + +> **tl**: `undefined` \| `string` + +#### tl-selector + +> **tl-selector**: `undefined` \| `string` + +#### tools? + +> `optional` **tools**: `"none"` \| `"closed"` \| `"open"` \| `"full"` \| `"console"` \| `"compiled"` \| `"tests"` \| "console\|undefined" \| "console\|" \| "console\|none" \| "console\|closed" \| "console\|open" \| "console\|full" \| "compiled\|undefined" \| "compiled\|" \| "compiled\|none" \| "compiled\|closed" \| "compiled\|open" \| "compiled\|full" \| "tests\|undefined" \| "tests\|" \| "tests\|none" \| "tests\|closed" \| "tests\|open" \| "tests\|full" \| "console,console\|undefined" \| "console,console\|" \| "console,console\|none" \| "console,console\|closed" \| "console,console\|open" \| "console,console\|full" \| "console,compiled\|undefined" \| "console,compiled\|" \| "console,compiled\|none" \| "console,compiled\|closed" \| "console,compiled\|open" \| "console,compiled\|full" \| "console,tests\|undefined" \| "console,tests\|" \| "console,tests\|none" \| "console,tests\|closed" \| "console,tests\|open" \| "console,tests\|full" \| "compiled,console\|undefined" \| "compiled,console\|" \| "compiled,console\|none" \| "compiled,console\|closed" \| "compiled,console\|open" \| "compiled,console\|full" \| "compiled,compiled\|undefined" \| "compiled,compiled\|" \| "compiled,compiled\|none" \| "compiled,compiled\|closed" \| "compiled,compiled\|open" \| "compiled,compiled\|full" \| "compiled,tests\|undefined" \| "compiled,tests\|" \| "compiled,tests\|none" \| "compiled,tests\|closed" \| "compiled,tests\|open" \| "compiled,tests\|full" \| "tests,console\|undefined" \| "tests,console\|" \| "tests,console\|none" \| "tests,console\|closed" \| "tests,console\|open" \| "tests,console\|full" \| "tests,compiled\|undefined" \| "tests,compiled\|" \| "tests,compiled\|none" \| "tests,compiled\|closed" \| "tests,compiled\|open" \| "tests,compiled\|full" \| "tests,tests\|undefined" \| "tests,tests\|" \| "tests,tests\|none" \| "tests,tests\|closed" \| "tests,tests\|open" \| "tests,tests\|full" \| "console,console,console\|undefined" \| "console,console,console\|" \| "console,console,console\|none" \| "console,console,console\|closed" \| "console,console,console\|open" \| "console,console,console\|full" \| "console,console,compiled\|undefined" \| "console,console,compiled\|" \| "console,console,compiled\|none" \| "console,console,compiled\|closed" \| "console,console,compiled\|open" \| "console,console,compiled\|full" \| "console,console,tests\|undefined" \| "console,console,tests\|" \| "console,console,tests\|none" \| "console,console,tests\|closed" \| "console,console,tests\|open" \| "console,console,tests\|full" \| "console,compiled,console\|undefined" \| "console,compiled,console\|" \| "console,compiled,console\|none" \| "console,compiled,console\|closed" \| "console,compiled,console\|open" \| "console,compiled,console\|full" \| "console,compiled,compiled\|undefined" \| "console,compiled,compiled\|" \| "console,compiled,compiled\|none" \| "console,compiled,compiled\|closed" \| "console,compiled,compiled\|open" \| "console,compiled,compiled\|full" \| "console,compiled,tests\|undefined" \| "console,compiled,tests\|" \| "console,compiled,tests\|none" \| "console,compiled,tests\|closed" \| "console,compiled,tests\|open" \| "console,compiled,tests\|full" \| "console,tests,console\|undefined" \| "console,tests,console\|" \| "console,tests,console\|none" \| "console,tests,console\|closed" \| "console,tests,console\|open" \| "console,tests,console\|full" \| "console,tests,compiled\|undefined" \| "console,tests,compiled\|" \| "console,tests,compiled\|none" \| "console,tests,compiled\|closed" \| "console,tests,compiled\|open" \| "console,tests,compiled\|full" \| "console,tests,tests\|undefined" \| "console,tests,tests\|" \| "console,tests,tests\|none" \| "console,tests,tests\|closed" \| "console,tests,tests\|open" \| "console,tests,tests\|full" \| "compiled,console,console\|undefined" \| "compiled,console,console\|" \| "compiled,console,console\|none" \| "compiled,console,console\|closed" \| "compiled,console,console\|open" \| "compiled,console,console\|full" \| "compiled,console,compiled\|undefined" \| "compiled,console,compiled\|" \| "compiled,console,compiled\|none" \| "compiled,console,compiled\|closed" \| "compiled,console,compiled\|open" \| "compiled,console,compiled\|full" \| "compiled,console,tests\|undefined" \| "compiled,console,tests\|" \| "compiled,console,tests\|none" \| "compiled,console,tests\|closed" \| "compiled,console,tests\|open" \| "compiled,console,tests\|full" \| "compiled,compiled,console\|undefined" \| "compiled,compiled,console\|" \| "compiled,compiled,console\|none" \| "compiled,compiled,console\|closed" \| "compiled,compiled,console\|open" \| "compiled,compiled,console\|full" \| "compiled,compiled,compiled\|undefined" \| "compiled,compiled,compiled\|" \| "compiled,compiled,compiled\|none" \| "compiled,compiled,compiled\|closed" \| "compiled,compiled,compiled\|open" \| "compiled,compiled,compiled\|full" \| "compiled,compiled,tests\|undefined" \| "compiled,compiled,tests\|" \| "compiled,compiled,tests\|none" \| "compiled,compiled,tests\|closed" \| "compiled,compiled,tests\|open" \| "compiled,compiled,tests\|full" \| "compiled,tests,console\|undefined" \| "compiled,tests,console\|" \| "compiled,tests,console\|none" \| "compiled,tests,console\|closed" \| "compiled,tests,console\|open" \| "compiled,tests,console\|full" \| "compiled,tests,compiled\|undefined" \| "compiled,tests,compiled\|" \| "compiled,tests,compiled\|none" \| "compiled,tests,compiled\|closed" \| "compiled,tests,compiled\|open" \| "compiled,tests,compiled\|full" \| "compiled,tests,tests\|undefined" \| "compiled,tests,tests\|" \| "compiled,tests,tests\|none" \| "compiled,tests,tests\|closed" \| "compiled,tests,tests\|open" \| "compiled,tests,tests\|full" \| "tests,console,console\|undefined" \| "tests,console,console\|" \| "tests,console,console\|none" \| "tests,console,console\|closed" \| "tests,console,console\|open" \| "tests,console,console\|full" \| "tests,console,compiled\|undefined" \| "tests,console,compiled\|" \| "tests,console,compiled\|none" \| "tests,console,compiled\|closed" \| "tests,console,compiled\|open" \| "tests,console,compiled\|full" \| "tests,console,tests\|undefined" \| "tests,console,tests\|" \| "tests,console,tests\|none" \| "tests,console,tests\|closed" \| "tests,console,tests\|open" \| "tests,console,tests\|full" \| "tests,compiled,console\|undefined" \| "tests,compiled,console\|" \| "tests,compiled,console\|none" \| "tests,compiled,console\|closed" \| "tests,compiled,console\|open" \| "tests,compiled,console\|full" \| "tests,compiled,compiled\|undefined" \| "tests,compiled,compiled\|" \| "tests,compiled,compiled\|none" \| "tests,compiled,compiled\|closed" \| "tests,compiled,compiled\|open" \| "tests,compiled,compiled\|full" \| "tests,compiled,tests\|undefined" \| "tests,compiled,tests\|" \| "tests,compiled,tests\|none" \| "tests,compiled,tests\|closed" \| "tests,compiled,tests\|open" \| "tests,compiled,tests\|full" \| "tests,tests,console\|undefined" \| "tests,tests,console\|" \| "tests,tests,console\|none" \| "tests,tests,console\|closed" \| "tests,tests,console\|open" \| "tests,tests,console\|full" \| "tests,tests,compiled\|undefined" \| "tests,tests,compiled\|" \| "tests,tests,compiled\|none" \| "tests,tests,compiled\|closed" \| "tests,tests,compiled\|open" \| "tests,tests,compiled\|full" \| "tests,tests,tests\|undefined" \| "tests,tests,tests\|" \| "tests,tests,tests\|none" \| "tests,tests,tests\|closed" \| "tests,tests,tests\|open" \| "tests,tests,tests\|full" + +#### trailingComma? + +> `optional` **trailingComma**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use [trailing commas](https://prettier.io/docs/en/options.html#trailing-commas). + +##### Default + +```ts +true +``` + +#### ts + +> **ts**: `undefined` \| `string` + +#### ts-selector + +> **ts-selector**: `undefined` \| `string` + +#### tsx + +> **tsx**: `undefined` \| `string` + +#### tsx-selector + +> **tsx-selector**: `undefined` \| `string` + +#### twig + +> **twig**: `undefined` \| `string` + +#### twig-selector + +> **twig-selector**: `undefined` \| `string` + +#### types? + +> `optional` **types**: `object` + +Allows providing custom TypeScript type declarations for better [editor intellisense](https://livecodes.io/docs/features/intellisense). + +It is an object where each key represents module name and value represents the types. + +See docs for [Types](https://livecodes.io/docs/configuration/configuration-object#types) +and [Custom Types](https://livecodes.io/docs/features/intellisense#custom-types) + +##### Examples + +```js +{ + "types": { + "my-demo-lib": "https://my-custom-domain/my-type-declarations.d.ts" + } +} +``` + +``` +{ + "types": { + "my-demo-lib": { + "url": "https://my-custom-domain/types.d.ts", + "autoload": true, + "declareAsModule": true + } +} +``` + +#### typescript + +> **typescript**: `undefined` \| `string` + +#### typescript-selector + +> **typescript-selector**: `undefined` \| `string` + +#### useTabs? + +> `optional` **useTabs**: `boolean` + +If `true`, lines are indented with tabs instead of spaces. + +Also used in [code formatting](https://livecodes.io/docs/features/code-format). + +##### Default + +```ts +false +``` + +#### vento + +> **vento**: `undefined` \| `string` + +#### vento-selector + +> **vento-selector**: `undefined` \| `string` + +#### version? + +> `readonly` `optional` **version**: `string` + +This is a read-only property which specifies the current LiveCodes version. + +Version specified in [exported](https://livecodes.io/docs/features/export) projects allows automatically upgrading the project configuration when imported by an app with a newer version. + +#### ~~view?~~ + +> `optional` **view**: `"split"` \| `"result"` \| `"editor"` + +##### Deprecated + +The `view` option has been moved to `config.view`. +For headless mode use `headless: true`. + +The [default view](https://livecodes.io/docs/features/default-view) for the playground. + +When set to `"headless"`, the playground is loaded in [headless mode](https://livecodes.io/docs/sdk/headless). + +##### Default + +```ts +"split" +``` + +#### vto + +> **vto**: `undefined` \| `string` + +#### vto-selector + +> **vto-selector**: `undefined` \| `string` + +#### vue + +> **vue**: `undefined` \| `string` + +#### vue-app + +> **vue-app**: `undefined` \| `string` + +#### vue-app-selector + +> **vue-app-selector**: `undefined` \| `string` + +#### vue-selector + +> **vue-selector**: `undefined` \| `string` + +#### vue2 + +> **vue2**: `undefined` \| `string` + +#### vue2-selector + +> **vue2-selector**: `undefined` \| `string` + +#### vue3 + +> **vue3**: `undefined` \| `string` + +#### vue3-selector + +> **vue3-selector**: `undefined` \| `string` + +#### wasm + +> **wasm**: `undefined` \| `string` + +#### wasm-selector + +> **wasm-selector**: `undefined` \| `string` + +#### wasm.cpp + +> **cpp**: `undefined` \| `string` + +#### wasm.cpp-selector + +> **cpp-selector**: `undefined` \| `string` + +#### wasm.cs + +> **cs**: `undefined` \| `string` + +#### wasm.cs-selector + +> **cs-selector**: `undefined` \| `string` + +#### wasm.lua + +> **lua**: `undefined` \| `string` + +#### wasm.lua-selector + +> **lua-selector**: `undefined` \| `string` + +#### wasm.php + +> **php**: `undefined` \| `string` + +#### wasm.php-selector + +> **php-selector**: `undefined` \| `string` + +#### wasm.py + +> **py**: `undefined` \| `string` + +#### wasm.py-selector + +> **py-selector**: `undefined` \| `string` + +#### wasm.rb + +> **rb**: `undefined` \| `string` + +#### wasm.rb-selector + +> **rb-selector**: `undefined` \| `string` + +#### wast + +> **wast**: `undefined` \| `string` + +#### wast-selector + +> **wast-selector**: `undefined` \| `string` + +#### wat + +> **wat**: `undefined` \| `string` + +#### wat-selector + +> **wat-selector**: `undefined` \| `string` + +#### webassembly + +> **webassembly**: `undefined` \| `string` + +#### webassembly-selector + +> **webassembly-selector**: `undefined` \| `string` + +#### welcome? + +> `optional` **welcome**: `boolean` + +If `true`, the [welcome screen](https://livecodes.io/docs/features/welcome) is displayed when the app loads. + +#### wordWrap? + +> `optional` **wordWrap**: `boolean` + +Enables word-wrap for long lines. + +##### Default + +```ts +false +``` + +#### x? + +> `optional` **x**: `string` + +#### xht + +> **xht**: `undefined` \| `string` + +#### xht-selector + +> **xht-selector**: `undefined` \| `string` + +#### xml + +> **xml**: `undefined` \| `string` + +#### xml-selector + +> **xml-selector**: `undefined` \| `string` + +#### zoom? + +> `optional` **zoom**: `1` \| `0.5` \| `0.25` + +Sets result page [zoom level](https://livecodes.io/docs/features/result#result-page-zoom). + +#### Defined in + +[models.ts:338](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L338) + +*** + +### template? + +> `optional` **template**: [`TemplateName`](../internal/type-aliases/TemplateName.md) + +A [starter template](https://livecodes.io/docs/features/templates) to load. +Allowed valued can be found [here](https://livecodes.io/docs/api/internal/type-aliases/TemplateName). + +#### Defined in + +[models.ts:383](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L383) + +*** + +### ~~view?~~ + +> `optional` **view**: `"split"` \| `"result"` \| `"editor"` \| `"headless"` + +#### Deprecated + +The `view` option has been moved to `config.view`. +For headless mode use `headless: true`. + +The [default view](https://livecodes.io/docs/features/default-view) for the playground. + +When set to `"headless"`, the playground is loaded in [headless mode](https://livecodes.io/docs/sdk/headless). + +#### Default + +```ts +"split" +``` + +#### Defined in + +[models.ts:396](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L396) \ No newline at end of file diff --git a/docs/api/interfaces/EmbedOptions/index.html b/docs/api/interfaces/EmbedOptions/index.html new file mode 100644 index 0000000..ad9be24 --- /dev/null +++ b/docs/api/interfaces/EmbedOptions/index.html @@ -0,0 +1,3336 @@ +Interface: EmbedOptions | LiveCodes
Skip to main content

Interface: EmbedOptions

+

An object that represents the playground embed options.

+

See docs for details.

+

Properties​

+

appUrl?​

+
+

optional appUrl: string

+
+

Allows loading the playground from a custom URL +(e.g. a self-hosted app or a permanent URL).

+

If supplied with an invalid URL, an error is thrown.

+

Default​

+
'https://livecodes.io'
+

Defined in​

+

models.ts:314

+
+

config?​

+
+

optional config: string | Partial<Config>

+
+

A configuration object or a URL to a JSON file representing a configuration object to load.

+

If supplied and is not an object or a valid URL, an error is thrown.

+

Default​

+
{}
+

Defined in​

+

models.ts:346

+
+

headless?​

+
+

optional headless: boolean

+
+

If true, the playground is loaded in headless mode.

+

Default​

+
false
+

Defined in​

+

models.ts:352

+
+

import?​

+
+

optional import: string

+
+

A resource to import (from any of the supported sources).

+

Defined in​

+

models.ts:357

+
+

lite?​

+
+

optional lite: boolean

+
+

Deprecated​

+

Use { config: { mode: "lite" } } instead

+

If true, the playground is loaded in lite mode.

+

Default​

+
false
+

Defined in​

+

models.ts:367

+
+

loading?​

+
+

optional loading: "click" | "eager" | "lazy"

+
+

Sets how the playground loads:

+
    +
  • "eager": The playground loads immediately.
    • +
  • "lazy": A playground embedded low down in the page will not load until the user scrolls so that it approaches the viewport.
    • +
  • "click": The playground does not load automatically. Instead, a "Click-to-load" screen is shown.
    • +
+

Default​

+
"lazy"
+

Defined in​

+

models.ts:377

+
+

params?​

+
+

optional params: object

+
+

An object that represents the URL Query parameters, that can be used to configure the playground.

+

These 2 snippets produce similar output:

+
import { createPlayground } from 'livecodes';

// use config
createPlayground('#container', {
  config: {
    markup: {
      language: 'markdown',
      content: '# Hello World!',
    },
  },
});

// use params
createPlayground('#container', { params: { md: '# Hello World!' } });
+

active?​

+
+

optional active: 0 | 2 | 1 | EditorId

+
+

activeEditor?​

+
+

optional activeEditor: 0 | 2 | 1 | EditorId

+
+

adoc​

+
+

adoc: undefined | string

+
+

adoc-selector​

+
+

adoc-selector: undefined | string

+
+

allowLangChange?​

+
+

optional allowLangChange: boolean

+
+

If false, the UI will not show the menu that allows changing editor language.

+
Default​
+
true
+

app.svelte​

+
+

svelte: undefined | string

+
+

app.svelte-selector​

+
+

svelte-selector: undefined | string

+
+

app.vue​

+
+

vue: undefined | string

+
+

app.vue-selector​

+
+

vue-selector: undefined | string

+
+

appLanguage?​

+
+

optional appLanguage: AppLanguage

+
+

Sets the app UI language used.

+

appUrl?​

+
+

optional appUrl: string

+
+

Allows loading the playground from a custom URL +(e.g. a self-hosted app or a permanent URL).

+

If supplied with an invalid URL, an error is thrown.

+
Default​
+
'https://livecodes.io'
+

art​

+
+

art: undefined | string

+
+

art-selector​

+
+

art-selector: undefined | string

+
+

art-template​

+
+

art-template: undefined | string

+
+

art-template-selector​

+
+

art-template-selector: undefined | string

+
+

as​

+
+

as: undefined | string

+
+

as-selector​

+
+

as-selector: undefined | string

+
+

asc​

+
+

asc: undefined | string

+
+

asc-selector​

+
+

asc-selector: undefined | string

+
+

asciidoc​

+
+

asciidoc: undefined | string

+
+

asciidoc-selector​

+
+

asciidoc-selector: undefined | string

+
+

assemblyscript​

+
+

assemblyscript: undefined | string

+
+

assemblyscript-selector​

+
+

assemblyscript-selector: undefined | string

+
+

astro​

+
+

astro: undefined | string

+
+

astro-selector​

+
+

astro-selector: undefined | string

+
+

autosave?​

+
+

optional autosave: boolean

+
+

If true, the project is automatically saved on code change, +after time delay.

+
Default​
+
false
+

autotest?​

+
+

optional autotest: boolean

+
+

If true, the project is watched for code changes which trigger tests to auto-run.

+
Default​
+
false
+

autoupdate?​

+
+

optional autoupdate: boolean

+
+

If true, the result page is automatically updated on code change, +after time delay.

+
Default​
+
true
+

babel​

+
+

babel: undefined | string

+
+

babel-selector​

+
+

babel-selector: undefined | string

+
+

bb​

+
+

bb: undefined | string

+
+

bb-selector​

+
+

bb-selector: undefined | string

+
+

bbcode​

+
+

bbcode: undefined | string

+
+

bbcode-selector​

+
+

bbcode-selector: undefined | string

+
+

Binary​

+
+

Binary: undefined | string

+
+

Binary-selector​

+
+

Binary-selector: undefined | string

+
+

blockly​

+
+

blockly: undefined | string

+
+

blockly-selector​

+
+

blockly-selector: undefined | string

+
+

blockly.xml​

+
+

xml: undefined | string

+
+

blockly.xml-selector​

+
+

xml-selector: undefined | string

+
+

c​

+
+

c: undefined | string

+
+

C​

+
+

C: undefined | string

+
+

c-selector​

+
+

c-selector: undefined | string

+
+

C-selector​

+
+

C-selector: undefined | string

+
+

c++​

+
+

c++: undefined | string

+
+

c++-selector​

+
+

c++-selector: undefined | string

+
+

civet​

+
+

civet: undefined | string

+
+

civet-selector​

+
+

civet-selector: undefined | string

+
+

clang​

+
+

clang: undefined | string

+
+

clang-selector​

+
+

clang-selector: undefined | string

+
+

clang.cpp​

+
+

cpp: undefined | string

+
+

clang.cpp-selector​

+
+

cpp-selector: undefined | string

+
+

clio​

+
+

clio: undefined | string

+
+

clio-selector​

+
+

clio-selector: undefined | string

+
+

clj​

+
+

clj: undefined | string

+
+

clj-selector​

+
+

clj-selector: undefined | string

+
+

cljc​

+
+

cljc: undefined | string

+
+

cljc-selector​

+
+

cljc-selector: undefined | string

+
+

cljs​

+
+

cljs: undefined | string

+
+

cljs-selector​

+
+

cljs-selector: undefined | string

+
+

clojure​

+
+

clojure: undefined | string

+
+

clojure-selector​

+
+

clojure-selector: undefined | string

+
+

clojurescript​

+
+

clojurescript: undefined | string

+
+

clojurescript-selector​

+
+

clojurescript-selector: undefined | string

+
+

closeBrackets?​

+
+

optional closeBrackets: boolean

+
+

Use auto-complete to close brackets and quotes.

+
Default​
+
true
+

coffee​

+
+

coffee: undefined | string

+
+

coffee-selector​

+
+

coffee-selector: undefined | string

+
+

coffeescript​

+
+

coffeescript: undefined | string

+
+

coffeescript-selector​

+
+

coffeescript-selector: undefined | string

+
+

common-lisp​

+
+

common-lisp: undefined | string

+
+

common-lisp-selector​

+
+

common-lisp-selector: undefined | string

+
+

commonlisp​

+
+

commonlisp: undefined | string

+
+

commonlisp-selector​

+
+

commonlisp-selector: undefined | string

+
+

compiled​

+
+

compiled: undefined | "" | "true" | "none" | "closed" | "open" | "full"

+
+

config?​

+
+

optional config: string | Partial<Config> & string

+
+

A configuration object or a URL to a JSON file representing a configuration object to load.

+

If supplied and is not an object or a valid URL, an error is thrown.

+
Default​
+
{}
+

console​

+
+

console: undefined | "" | "true" | "none" | "closed" | "open" | "full"

+
+

cp​

+
+

cp: undefined | string

+
+

cp-selector​

+
+

cp-selector: undefined | string

+
+

cpp​

+
+

cpp: undefined | string

+
+

cpp-selector​

+
+

cpp-selector: undefined | string

+
+

cpp-wasm​

+
+

cpp-wasm: undefined | string

+
+

cpp-wasm-selector​

+
+

cpp-wasm-selector: undefined | string

+
+

cppm​

+
+

cppm: undefined | string

+
+

cppm-selector​

+
+

cppm-selector: undefined | string

+
+

cppwasm​

+
+

cppwasm: undefined | string

+
+

cppwasm-selector​

+
+

cppwasm-selector: undefined | string

+
+

cs​

+
+

cs: undefined | string

+
+

cs-selector​

+
+

cs-selector: undefined | string

+
+

cs-wasm​

+
+

cs-wasm: undefined | string

+
+

cs-wasm-selector​

+
+

cs-wasm-selector: undefined | string

+
+

csharp​

+
+

csharp: undefined | string

+
+

csharp-selector​

+
+

csharp-selector: undefined | string

+
+

csharp-wasm​

+
+

csharp-wasm: undefined | string

+
+

csharp-wasm-selector​

+
+

csharp-wasm-selector: undefined | string

+
+

css​

+
+

css: undefined | string

+
+

css-selector​

+
+

css-selector: undefined | string

+
+

cssPreset?​

+
+

optional cssPreset: CssPresetId

+
+

CSS Preset to use.

+

customSettings?​

+
+

optional customSettings: object

+
+

Defines custom settings for the current project.

+

customSettings.adoc​

+
+

adoc: any

+
+

customSettings.app.svelte​

+
+

svelte: any

+
+

customSettings.app.vue​

+
+

vue: any

+
+

customSettings.art​

+
+

art: any

+
+

customSettings.art-template​

+
+

art-template: any

+
+

customSettings.as​

+
+

as: any

+
+

customSettings.asc​

+
+

asc: any

+
+

customSettings.asciidoc​

+
+

asciidoc: any

+
+

customSettings.assemblyscript​

+
+

assemblyscript: any

+
+

customSettings.astro​

+
+

astro: any

+
+

customSettings.autoprefixer​

+
+

autoprefixer: any

+
+

customSettings.babel​

+
+

babel: any

+
+

customSettings.bb​

+
+

bb: any

+
+

customSettings.bbcode​

+
+

bbcode: any

+
+

customSettings.Binary​

+
+

Binary: any

+
+

customSettings.blockly​

+
+

blockly: any

+
+

customSettings.blockly.xml​

+
+

xml: any

+
+

customSettings.c​

+
+

c: any

+
+

customSettings.C​

+
+

C: any

+
+

customSettings.c++​

+
+

c++: any

+
+

customSettings.civet​

+
+

civet: any

+
+

customSettings.clang​

+
+

clang: any

+
+

customSettings.clang.cpp​

+
+

cpp: any

+
+

customSettings.clio​

+
+

clio: any

+
+

customSettings.clj​

+
+

clj: any

+
+

customSettings.cljc​

+
+

cljc: any

+
+

customSettings.cljs​

+
+

cljs: any

+
+

customSettings.clojure​

+
+

clojure: any

+
+

customSettings.clojurescript​

+
+

clojurescript: any

+
+

customSettings.coffee​

+
+

coffee: any

+
+

customSettings.coffeescript​

+
+

coffeescript: any

+
+

customSettings.common-lisp​

+
+

common-lisp: any

+
+

customSettings.commonlisp​

+
+

commonlisp: any

+
+

customSettings.convertCommonjs?​

+
+

optional convertCommonjs: boolean

+
+

customSettings.cp​

+
+

cp: any

+
+

customSettings.cpp​

+
+

cpp: any

+
+

customSettings.cpp-wasm​

+
+

cpp-wasm: any

+
+

customSettings.cppm​

+
+

cppm: any

+
+

customSettings.cppwasm​

+
+

cppwasm: any

+
+

customSettings.cs​

+
+

cs: any

+
+

customSettings.cs-wasm​

+
+

cs-wasm: any

+
+

customSettings.csharp​

+
+

csharp: any

+
+

customSettings.csharp-wasm​

+
+

csharp-wasm: any

+
+

customSettings.css​

+
+

css: any

+
+

customSettings.cssmodules​

+
+

cssmodules: any

+
+

customSettings.cssnano​

+
+

cssnano: any

+
+

customSettings.cwasm​

+
+

cwasm: any

+
+

customSettings.cxx​

+
+

cxx: any

+
+

customSettings.defaultCDN?​

+
+

optional defaultCDN: CDN

+
+

customSettings.diagram​

+
+

diagram: any

+
+

customSettings.diagrams​

+
+

diagrams: any

+
+

customSettings.dot​

+
+

dot: any

+
+

customSettings.edn​

+
+

edn: any

+
+

customSettings.ejs​

+
+

ejs: any

+
+

customSettings.es​

+
+

es: any

+
+

customSettings.eta​

+
+

eta: any

+
+

customSettings.fennel​

+
+

fennel: any

+
+

customSettings.flow​

+
+

flow: any

+
+

customSettings.fnl​

+
+

fnl: any

+
+

customSettings.gleam​

+
+

gleam: any

+
+

customSettings.go​

+
+

go: any

+
+

customSettings.golang​

+
+

golang: any

+
+

customSettings.graph​

+
+

graph: any

+
+

customSettings.h​

+
+

h: any

+
+

customSettings.haml​

+
+

haml: any

+
+

customSettings.handlebars​

+
+

handlebars: any

+
+

customSettings.hbs​

+
+

hbs: any

+
+

customSettings.hpp​

+
+

hpp: any

+
+

customSettings.htm​

+
+

htm: any

+
+

customSettings.html​

+
+

html: any

+
+

customSettings.ii​

+
+

ii: any

+
+

customSettings.imba​

+
+

imba: any

+
+

customSettings.imports?​

+
+

optional imports: Record<string, string>

+
+

customSettings.ixx​

+
+

ixx: any

+
+

customSettings.jade​

+
+

jade: any

+
+

customSettings.java​

+
+

java: any

+
+

customSettings.javascript​

+
+

javascript: any

+
+

customSettings.jinja​

+
+

jinja: any

+
+

customSettings.jl​

+
+

jl: any

+
+

customSettings.js​

+
+

js: any

+
+

customSettings.json​

+
+

json: any

+
+

customSettings.jsx​

+
+

jsx: any

+
+

customSettings.julia​

+
+

julia: any

+
+

customSettings.less​

+
+

less: any

+
+

customSettings.lightningcss​

+
+

lightningcss: any

+
+

customSettings.liquid​

+
+

liquid: any

+
+

customSettings.liquidjs​

+
+

liquidjs: any

+
+

customSettings.lisp​

+
+

lisp: any

+
+

customSettings.livescript​

+
+

livescript: any

+
+

customSettings.ls​

+
+

ls: any

+
+

customSettings.lua​

+
+

lua: any

+
+

customSettings.lua-wasm​

+
+

lua-wasm: any

+
+

customSettings.luawasm​

+
+

luawasm: any

+
+

customSettings.malina​

+
+

malina: any

+
+

customSettings.malinajs​

+
+

malinajs: any

+
+

customSettings.mapImports?​

+
+

optional mapImports: boolean

+
+

customSettings.markdown​

+
+

markdown: any

+
+

customSettings.md​

+
+

md: any

+
+

customSettings.mdown​

+
+

mdown: any

+
+

customSettings.mdx​

+
+

mdx: any

+
+

customSettings.mjml​

+
+

mjml: any

+
+

customSettings.mkdn​

+
+

mkdn: any

+
+

customSettings.ml​

+
+

ml: any

+
+

customSettings.mli​

+
+

mli: any

+
+

customSettings.mustache​

+
+

mustache: any

+
+

customSettings.njk​

+
+

njk: any

+
+

customSettings.nunjucks​

+
+

nunjucks: any

+
+

customSettings.ocaml​

+
+

ocaml: any

+
+

customSettings.perl​

+
+

perl: any

+
+

customSettings.pg​

+
+

pg: any

+
+

customSettings.pg.sql​

+
+

sql: any

+
+

customSettings.pglite​

+
+

pglite: any

+
+

customSettings.pglite.sql​

+
+

sql: any

+
+

customSettings.pgsql​

+
+

pgsql: any

+
+

customSettings.pgsql.sql​

+
+

sql: any

+
+

customSettings.php​

+
+

php: any

+
+

customSettings.php-wasm​

+
+

php-wasm: any

+
+

customSettings.phpwasm​

+
+

phpwasm: any

+
+

customSettings.pintora​

+
+

pintora: any

+
+

customSettings.pl​

+
+

pl: any

+
+

customSettings.plt​

+
+

plt: any

+
+

customSettings.pm​

+
+

pm: any

+
+

customSettings.postcss​

+
+

postcss: any

+
+

customSettings.postcssImportUrl​

+
+

postcssImportUrl: any

+
+

customSettings.postcssPresetEnv​

+
+

postcssPresetEnv: any

+
+

customSettings.postgre.sql​

+
+

sql: any

+
+

customSettings.postgres​

+
+

postgres: any

+
+

customSettings.postgresql​

+
+

postgresql: any

+
+

customSettings.postgresql.sql​

+
+

sql: any

+
+

customSettings.prolog​

+
+

prolog: any

+
+

customSettings.prolog.pl​

+
+

pl: any

+
+

customSettings.pug​

+
+

pug: any

+
+

customSettings.purgecss​

+
+

purgecss: any

+
+

customSettings.py​

+
+

py: any

+
+

customSettings.py-wasm​

+
+

py-wasm: any

+
+

customSettings.py3​

+
+

py3: any

+
+

customSettings.pyodide​

+
+

pyodide: any

+
+

customSettings.python​

+
+

python: any

+
+

customSettings.python-wasm​

+
+

python-wasm: any

+
+

customSettings.pythonwasm​

+
+

pythonwasm: any

+
+

customSettings.pywasm​

+
+

pywasm: any

+
+

customSettings.r​

+
+

r: any

+
+

customSettings.r-wasm​

+
+

r-wasm: any

+
+

customSettings.rb​

+
+

rb: any

+
+

customSettings.re​

+
+

re: any

+
+

customSettings.react​

+
+

react: any

+
+

customSettings.react-jsx​

+
+

react-jsx: any

+
+

customSettings.react-native​

+
+

react-native: any

+
+

customSettings.react-native-tsx​

+
+

react-native-tsx: any

+
+

customSettings.react-native.jsx​

+
+

jsx: any

+
+

customSettings.react-native.tsx​

+
+

tsx: any

+
+

customSettings.react-tsx​

+
+

react-tsx: any

+
+

customSettings.react.jsx​

+
+

jsx: any

+
+

customSettings.react.tsx​

+
+

tsx: any

+
+

customSettings.reason​

+
+

reason: any

+
+

customSettings.rei​

+
+

rei: any

+
+

customSettings.res​

+
+

res: any

+
+

customSettings.rescript​

+
+

rescript: any

+
+

customSettings.resi​

+
+

resi: any

+
+

customSettings.rich​

+
+

rich: any

+
+

customSettings.richtext​

+
+

richtext: any

+
+

customSettings.riot​

+
+

riot: any

+
+

customSettings.riotjs​

+
+

riotjs: any

+
+

customSettings.rlang​

+
+

rlang: any

+
+

customSettings.rstats​

+
+

rstats: any

+
+

customSettings.rte​

+
+

rte: any

+
+

customSettings.rte.html​

+
+

html: any

+
+

customSettings.ruby​

+
+

ruby: any

+
+

customSettings.ruby-wasm​

+
+

ruby-wasm: any

+
+

customSettings.rubywasm​

+
+

rubywasm: any

+
+

customSettings.sass​

+
+

sass: any

+
+

customSettings.scheme​

+
+

scheme: any

+
+

customSettings.scm​

+
+

scm: any

+
+

customSettings.scriptType?​

+
+

optional scriptType: "" | "module" | "text/liquid" | "text/python" | "text/r" | "text/ruby-wasm" | "text/x-uniter-php" | "text/php-wasm" | "text/cpp" | "text/java" | "text/csharp-wasm" | "text/perl" | "text/julia" | "text/biwascheme" | "text/commonlisp" | "text/tcl" | "text/prolog" | "application/json" | "application/lua" | "text/fennel" | "application/wasm-uint8" | "application/javascript" | "application/ecmascript" | "text/javascript" | "text/ecmascript"

+
+

customSettings.scss​

+
+

scss: any

+
+

customSettings.solid​

+
+

solid: any

+
+

customSettings.solid.jsx​

+
+

jsx: any

+
+

customSettings.solid.tsx​

+
+

tsx: any

+
+

customSettings.sql​

+
+

sql: any

+
+

customSettings.sqlite​

+
+

sqlite: any

+
+

customSettings.sqlite3​

+
+

sqlite3: any

+
+

customSettings.stencil​

+
+

stencil: any

+
+

customSettings.stencil.tsx​

+
+

tsx: any

+
+

customSettings.styl​

+
+

styl: any

+
+

customSettings.stylis​

+
+

stylis: any

+
+

customSettings.stylus​

+
+

stylus: any

+
+

customSettings.sucrase​

+
+

sucrase: any

+
+

customSettings.svelte​

+
+

svelte: any

+
+

customSettings.svelte-app​

+
+

svelte-app: any

+
+

customSettings.tailwindcss​

+
+

tailwindcss: any

+
+

customSettings.tcl​

+
+

tcl: any

+
+

customSettings.teal​

+
+

teal: any

+
+

customSettings.template?​

+
+

optional template: object

+
+

customSettings.template.data?​

+
+

optional data: any

+
+

customSettings.template.prerender?​

+
+

optional prerender: boolean

+
+

customSettings.tl​

+
+

tl: any

+
+

customSettings.tokencss​

+
+

tokencss: any

+
+

customSettings.ts​

+
+

ts: any

+
+

customSettings.tsx​

+
+

tsx: any

+
+

customSettings.twig​

+
+

twig: any

+
+

customSettings.types?​

+
+

optional types: Types

+
+

customSettings.typescript​

+
+

typescript: any

+
+

customSettings.unocss​

+
+

unocss: any

+
+

customSettings.vento​

+
+

vento: any

+
+

customSettings.vto​

+
+

vto: any

+
+

customSettings.vue​

+
+

vue: any

+
+

customSettings.vue-app​

+
+

vue-app: any

+
+

customSettings.vue2​

+
+

vue2: any

+
+

customSettings.vue3​

+
+

vue3: any

+
+

customSettings.wasm​

+
+

wasm: any

+
+

customSettings.wasm.cpp​

+
+

cpp: any

+
+

customSettings.wasm.cs​

+
+

cs: any

+
+

customSettings.wasm.lua​

+
+

lua: any

+
+

customSettings.wasm.php​

+
+

php: any

+
+

customSettings.wasm.py​

+
+

py: any

+
+

customSettings.wasm.rb​

+
+

rb: any

+
+

customSettings.wast​

+
+

wast: any

+
+

customSettings.wat​

+
+

wat: any

+
+

customSettings.webassembly​

+
+

webassembly: any

+
+

customSettings.windicss​

+
+

windicss: any

+
+

customSettings.xht​

+
+

xht: any

+
+

customSettings.xml​

+
+

xml: any

+
+

cwasm​

+
+

cwasm: undefined | string

+
+

cwasm-selector​

+
+

cwasm-selector: undefined | string

+
+

cxx​

+
+

cxx: undefined | string

+
+

cxx-selector​

+
+

cxx-selector: undefined | string

+
+

delay?​

+
+

optional delay: number

+
+

Time delay (in milliseconds) following code change, +after which the result page is updated (if autoupdate is true) +and/or the project is saved (if autosave is true).

+
Default​
+
1500
+

description?​

+
+

optional description: string

+
+

Project description. Used in project search +and result page description meta tag.

+
Default​
+
""
+

diagram​

+
+

diagram: undefined | string

+
+

diagram-selector​

+
+

diagram-selector: undefined | string

+
+

diagrams​

+
+

diagrams: undefined | string

+
+

diagrams-selector​

+
+

diagrams-selector: undefined | string

+
+

disableAI?​

+
+

optional disableAI: boolean

+
+

dot​

+
+

dot: undefined | string

+
+

dot-selector​

+
+

dot-selector: undefined | string

+
+

editor?​

+
+

optional editor: "auto" | "monaco" | "codemirror" | "codejar"

+
+

Selects the code editor to use.

+

If undefined (the default), Monaco editor is used on desktop, +CodeMirror is used on mobile and in simple mode, +while CodeJar is used in codeblock mode, in lite mode and in readonly playgrounds.

+

If set to auto, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings.

+
Default​
+
undefined
+

editorMode?​

+
+

optional editorMode: "vim" | "emacs"

+
+

Sets editor mode.

+

editorTheme?​

+
+

optional editorTheme: string | EditorTheme[]

+
+

Sets the code editor themes.

+

See docs for editor themes for details.

+
Examples​
+
"vs"
+
"monaco:twilight, codemirror:one-dark"
+
["vs@light"]
+
["vs@light", "vs-dark@dark"]
+
["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]
+

edn​

+
+

edn: undefined | string

+
+

edn-selector​

+
+

edn-selector: undefined | string

+
+

ejs​

+
+

ejs: undefined | string

+
+

ejs-selector​

+
+

ejs-selector: undefined | string

+
+

embed?​

+
+

optional embed: boolean

+
+

emmet?​

+
+

optional emmet: boolean

+
+

Enables Emmet.

+
Default​
+
true
+

enableAI?​

+
+

optional enableAI: boolean

+
+

If true, AI code assistant is enabled.

+
Default​
+
false
+

es​

+
+

es: undefined | string

+
+

es-selector​

+
+

es-selector: undefined | string

+
+

eta​

+
+

eta: undefined | string

+
+

eta-selector​

+
+

eta-selector: undefined | string

+
+

fennel​

+
+

fennel: undefined | string

+
+

fennel-selector​

+
+

fennel-selector: undefined | string

+
+

files?​

+
+

optional files: string

+
+

flow​

+
+

flow: undefined | string

+
+

flow-selector​

+
+

flow-selector: undefined | string

+
+

fnl​

+
+

fnl: undefined | string

+
+

fnl-selector​

+
+

fnl-selector: undefined | string

+
+

foldRegions?​

+
+

optional foldRegions: boolean

+
+

When set to true, regions marked by #region and #endregion comments are folded when the project is loaded.

+
Default​
+
false
+

fontFamily?​

+
+

optional fontFamily: string

+
+

Sets the code editor font family.

+

fontSize?​

+
+

optional fontSize: number

+
+

Sets the font size.

+

If undefined (the default), the font size is set to 14 for the full app and 12 for embeds.

+
Default​
+
undefined
+

formatOnsave?​

+
+

optional formatOnsave: boolean

+
+

If true, the code is automatically formatted on saving the project.

+
Default​
+
false
+

gleam​

+
+

gleam: undefined | string

+
+

gleam-selector​

+
+

gleam-selector: undefined | string

+
+

go​

+
+

go: undefined | string

+
+

go-selector​

+
+

go-selector: undefined | string

+
+

golang​

+
+

golang: undefined | string

+
+

golang-selector​

+
+

golang-selector: undefined | string

+
+

graph​

+
+

graph: undefined | string

+
+

graph-selector​

+
+

graph-selector: undefined | string

+
+

h​

+
+

h: undefined | string

+
+

h-selector​

+
+

h-selector: undefined | string

+
+

haml​

+
+

haml: undefined | string

+
+

haml-selector​

+
+

haml-selector: undefined | string

+
+

handlebars​

+
+

handlebars: undefined | string

+
+

handlebars-selector​

+
+

handlebars-selector: undefined | string

+
+

hbs​

+
+

hbs: undefined | string

+
+

hbs-selector​

+
+

hbs-selector: undefined | string

+
+ +
+

optional head: string

+
+

Content added to the result page <head> element.

+
Default​
+
'<meta charset="UTF-8" />\n<meta name="viewport" content="width=device-width, initial-scale=1.0" />'
+

headless?​

+
+

optional headless: boolean

+
+

If true, the playground is loaded in headless mode.

+
Default​
+
false
+

hpp​

+
+

hpp: undefined | string

+
+

hpp-selector​

+
+

hpp-selector: undefined | string

+
+

htm​

+
+

htm: undefined | string

+
+

htm-selector​

+
+

htm-selector: undefined | string

+
+

html​

+
+

html: undefined | string

+
+

html-selector​

+
+

html-selector: undefined | string

+
+

htmlAttrs?​

+
+

optional htmlAttrs: string | Record<string, string>

+
+

Attributes added to the result page <html> element. +It can be an object or a string.

+
Example​
+
{ lang: "en", class: "dark" }
'lang="en" class="dark"'
+

ii​

+
+

ii: undefined | string

+
+

ii-selector​

+
+

ii-selector: undefined | string

+
+

imba​

+
+

imba: undefined | string

+
+

imba-selector​

+
+

imba-selector: undefined | string

+
+

import?​

+
+

optional import: string

+
+

A resource to import (from any of the supported sources).

+

imports?​

+
+

optional imports: object

+
+

Allows specifying custom import maps for module imports.

+

Example

+

Setting imports like this:

+
"imports": {
  "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"
}
+

results in the following import map:

+
<script type="importmap">
  {
    "imports": {
      "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"
    }
  }
</script>
+

See docs for Imports +and Custom Module Resolution

+
Index Signature​
+

[key: string]: string

+

ixx​

+
+

ixx: undefined | string

+
+

ixx-selector​

+
+

ixx-selector: undefined | string

+
+

jade​

+
+

jade: undefined | string

+
+

jade-selector​

+
+

jade-selector: undefined | string

+
+

java​

+
+

java: undefined | string

+
+

java-selector​

+
+

java-selector: undefined | string

+
+

javascript​

+
+

javascript: undefined | string

+
+

javascript-selector​

+
+

javascript-selector: undefined | string

+
+

jinja​

+
+

jinja: undefined | string

+
+

jinja-selector​

+
+

jinja-selector: undefined | string

+
+

jl​

+
+

jl: undefined | string

+
+

jl-selector​

+
+

jl-selector: undefined | string

+
+

js​

+
+

js: undefined | string

+
+

js-selector​

+
+

js-selector: undefined | string

+
+

json​

+
+

json: undefined | string

+
+

json-selector​

+
+

json-selector: undefined | string

+
+

jsx​

+
+

jsx: undefined | string

+
+

jsx-selector​

+
+

jsx-selector: undefined | string

+
+

julia​

+
+

julia: undefined | string

+
+

julia-selector​

+
+

julia-selector: undefined | string

+
+

lang?​

+
+

optional lang: Language

+
+

language?​

+
+

optional language: Language

+
+

languages?​

+
+

optional languages: string

+
+

layout?​

+
+

optional layout: "horizontal" | "vertical" | "responsive"

+
+

Sets the app layout to horizontal or vertical. +If set to "responsive" (the default) or undefined, +the layout is vertical in small screens when the playground height is larger than its width, +otherwise horizontal.

+
Default​
+
"responsive"
+

less​

+
+

less: undefined | string

+
+

less-selector​

+
+

less-selector: undefined | string

+
+

lineNumbers?​

+
+

optional lineNumbers: boolean | "relative"

+
+

Show line numbers in code editor.

+
Default​
+
true
+

liquid​

+
+

liquid: undefined | string

+
+

liquid-selector​

+
+

liquid-selector: undefined | string

+
+

liquidjs​

+
+

liquidjs: undefined | string

+
+

liquidjs-selector​

+
+

liquidjs-selector: undefined | string

+
+

lisp​

+
+

lisp: undefined | string

+
+

lisp-selector​

+
+

lisp-selector: undefined | string

+
+

lite?​

+
+

optional lite: boolean

+
+
Deprecated​
+

Use { config: { mode: "lite" } } instead

+

If true, the playground is loaded in lite mode.

+
Default​
+
false
+

livescript​

+
+

livescript: undefined | string

+
+

livescript-selector​

+
+

livescript-selector: undefined | string

+
+

loading?​

+
+

optional loading: "click" | "eager" | "lazy"

+
+

Sets how the playground loads:

+
    +
  • "eager": The playground loads immediately.
    • +
  • "lazy": A playground embedded low down in the page will not load until the user scrolls so that it approaches the viewport.
    • +
  • "click": The playground does not load automatically. Instead, a "Click-to-load" screen is shown.
    • +
+
Default​
+
"lazy"
+

ls​

+
+

ls: undefined | string

+
+

ls-selector​

+
+

ls-selector: undefined | string

+
+

lua​

+
+

lua: undefined | string

+
+

lua-selector​

+
+

lua-selector: undefined | string

+
+

lua-wasm​

+
+

lua-wasm: undefined | string

+
+

lua-wasm-selector​

+
+

lua-wasm-selector: undefined | string

+
+

luawasm​

+
+

luawasm: undefined | string

+
+

luawasm-selector​

+
+

luawasm-selector: undefined | string

+
+

malina​

+
+

malina: undefined | string

+
+

malina-selector​

+
+

malina-selector: undefined | string

+
+

malinajs​

+
+

malinajs: undefined | string

+
+

malinajs-selector​

+
+

malinajs-selector: undefined | string

+
+

markdown​

+
+

markdown: undefined | string

+
+

markdown-selector​

+
+

markdown-selector: undefined | string

+
+

markup?​

+
+

optional markup: object

+
+

An object that configures the language and content of the markup editor.

+

See docs for details.

+
Default​
+
{ language: "html", content: "" }
+

markup.content?​

+
+

optional content: string

+
+

The initial content of the code editor.

+
Default​
+
""
+

markup.contentUrl?​

+
+

optional contentUrl: string

+
+

A URL to load content from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if content property had no value.

+

markup.foldedLines?​

+
+

optional foldedLines: object[]

+
+

Lines that get folded when the editor loads.

+

This can be used for less relevant content.

+
Example​
+
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
+

markup.hiddenContent?​

+
+

optional hiddenContent: string

+
+

Hidden content that gets evaluated without being visible in the code editor.

+

This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)

+

markup.hiddenContentUrl?​

+
+

optional hiddenContentUrl: string

+
+

A URL to load hiddenContent from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if hiddenContent property had no value.

+

markup.hideTitle?​

+
+

optional hideTitle: boolean

+
+

If true, the title of the code editor is hidden, however its code is still evaluated.

+

This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).

+

markup.language​

+
+

language: Language

+
+

A language name, extension or alias (as defined in language documentations).

+

For the list of supported values, see Language

+

markup.order?​

+
+

optional order: number

+
+

The order of the editor in the UI.

+
Default​
+
0
+

markup.position?​

+
+

optional position: EditorPosition

+
+

The initial position of the cursor in the code editor.

+
Example​
+
{lineNumber: 5, column: 10}
+

markup.selector?​

+
+

optional selector: string

+
+

A CSS selector to load content from DOM import.

+

markup.title?​

+
+

optional title: string

+
+

If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. "Python" can be used instead of "Py (Wasm)").

+

md​

+
+

md: undefined | string

+
+

md-selector​

+
+

md-selector: undefined | string

+
+

mdown​

+
+

mdown: undefined | string

+
+

mdown-selector​

+
+

mdown-selector: undefined | string

+
+

mdx​

+
+

mdx: undefined | string

+
+

mdx-selector​

+
+

mdx-selector: undefined | string

+
+

mjml​

+
+

mjml: undefined | string

+
+

mjml-selector​

+
+

mjml-selector: undefined | string

+
+

mkdn​

+
+

mkdn: undefined | string

+
+

mkdn-selector​

+
+

mkdn-selector: undefined | string

+
+

ml​

+
+

ml: undefined | string

+
+

ml-selector​

+
+

ml-selector: undefined | string

+
+

mli​

+
+

mli: undefined | string

+
+

mli-selector​

+
+

mli-selector: undefined | string

+
+

mode?​

+
+

optional mode: "focus" | "full" | "result" | "editor" | "lite" | "simple" | "codeblock"

+
+

Sets the display mode.

+
Default​
+
"full"
+

mustache​

+
+

mustache: undefined | string

+
+

mustache-selector​

+
+

mustache-selector: undefined | string

+
+

new?​

+
+

optional new: ""

+
+

njk​

+
+

njk: undefined | string

+
+

njk-selector​

+
+

njk-selector: undefined | string

+
+

no-defaults?​

+
+

optional no-defaults: boolean

+
+

nunjucks​

+
+

nunjucks: undefined | string

+
+

nunjucks-selector​

+
+

nunjucks-selector: undefined | string

+
+

ocaml​

+
+

ocaml: undefined | string

+
+

ocaml-selector​

+
+

ocaml-selector: undefined | string

+
+

params?​

+
+

optional params: { appUrl?: string | undefined; params?: ... | undefined; config?: string | (Partial<Config> & string) | undefined; headless?: boolean | undefined; import?: string | undefined; ... 475 more ...; compiled?: "" | ... 5 more ... | undefined; } | undefined

+
+

An object that represents the URL Query parameters, that can be used to configure the playground.

+

These 2 snippets produce similar output:

+
import { createPlayground } from 'livecodes';

// use config
createPlayground('#container', {
  config: {
    markup: {
      language: 'markdown',
      content: '# Hello World!',
    },
  },
});

// use params
createPlayground('#container', { params: { md: '# Hello World!' } });
+

perl​

+
+

perl: undefined | string

+
+

perl-selector​

+
+

perl-selector: undefined | string

+
+

pg​

+
+

pg: undefined | string

+
+

pg-selector​

+
+

pg-selector: undefined | string

+
+

pg.sql​

+
+

sql: undefined | string

+
+

pg.sql-selector​

+
+

sql-selector: undefined | string

+
+

pglite​

+
+

pglite: undefined | string

+
+

pglite-selector​

+
+

pglite-selector: undefined | string

+
+

pglite.sql​

+
+

sql: undefined | string

+
+

pglite.sql-selector​

+
+

sql-selector: undefined | string

+
+

pgsql​

+
+

pgsql: undefined | string

+
+

pgsql-selector​

+
+

pgsql-selector: undefined | string

+
+

pgsql.sql​

+
+

sql: undefined | string

+
+

pgsql.sql-selector​

+
+

sql-selector: undefined | string

+
+

php​

+
+

php: undefined | string

+
+

php-selector​

+
+

php-selector: undefined | string

+
+

php-wasm​

+
+

php-wasm: undefined | string

+
+

php-wasm-selector​

+
+

php-wasm-selector: undefined | string

+
+

phpwasm​

+
+

phpwasm: undefined | string

+
+

phpwasm-selector​

+
+

phpwasm-selector: undefined | string

+
+

pintora​

+
+

pintora: undefined | string

+
+

pintora-selector​

+
+

pintora-selector: undefined | string

+
+

pl​

+
+

pl: undefined | string

+
+

pl-selector​

+
+

pl-selector: undefined | string

+
+

plt​

+
+

plt: undefined | string

+
+

plt-selector​

+
+

plt-selector: undefined | string

+
+

pm​

+
+

pm: undefined | string

+
+

pm-selector​

+
+

pm-selector: undefined | string

+
+

postcss​

+
+

postcss: undefined | string

+
+

postcss-selector​

+
+

postcss-selector: undefined | string

+
+

postgre.sql​

+
+

sql: undefined | string

+
+

postgre.sql-selector​

+
+

sql-selector: undefined | string

+
+

postgres​

+
+

postgres: undefined | string

+
+

postgres-selector​

+
+

postgres-selector: undefined | string

+
+

postgresql​

+
+

postgresql: undefined | string

+
+

postgresql-selector​

+
+

postgresql-selector: undefined | string

+
+

postgresql.sql​

+
+

sql: undefined | string

+
+

postgresql.sql-selector​

+
+

sql-selector: undefined | string

+
+

preview?​

+
+

optional preview: boolean

+
+

processors?​

+
+

optional processors: string

+
+

prolog​

+
+

prolog: undefined | string

+
+

prolog-selector​

+
+

prolog-selector: undefined | string

+
+

prolog.pl​

+
+

pl: undefined | string

+
+

prolog.pl-selector​

+
+

pl-selector: undefined | string

+
+

pug​

+
+

pug: undefined | string

+
+

pug-selector​

+
+

pug-selector: undefined | string

+
+

py​

+
+

py: undefined | string

+
+

py-selector​

+
+

py-selector: undefined | string

+
+

py-wasm​

+
+

py-wasm: undefined | string

+
+

py-wasm-selector​

+
+

py-wasm-selector: undefined | string

+
+

py3​

+
+

py3: undefined | string

+
+

py3-selector​

+
+

py3-selector: undefined | string

+
+

pyodide​

+
+

pyodide: undefined | string

+
+

pyodide-selector​

+
+

pyodide-selector: undefined | string

+
+

python​

+
+

python: undefined | string

+
+

python-selector​

+
+

python-selector: undefined | string

+
+

python-wasm​

+
+

python-wasm: undefined | string

+
+

python-wasm-selector​

+
+

python-wasm-selector: undefined | string

+
+

pythonwasm​

+
+

pythonwasm: undefined | string

+
+

pythonwasm-selector​

+
+

pythonwasm-selector: undefined | string

+
+

pywasm​

+
+

pywasm: undefined | string

+
+

pywasm-selector​

+
+

pywasm-selector: undefined | string

+
+

r​

+
+

r: undefined | string

+
+

r-selector​

+
+

r-selector: undefined | string

+
+

r-wasm​

+
+

r-wasm: undefined | string

+
+

r-wasm-selector​

+
+

r-wasm-selector: undefined | string

+
+

raw?​

+
+

optional raw: Language

+
+

rb​

+
+

rb: undefined | string

+
+

rb-selector​

+
+

rb-selector: undefined | string

+
+

re​

+
+

re: undefined | string

+
+

re-selector​

+
+

re-selector: undefined | string

+
+

react​

+
+

react: undefined | string

+
+

react-jsx​

+
+

react-jsx: undefined | string

+
+

react-jsx-selector​

+
+

react-jsx-selector: undefined | string

+
+

react-native​

+
+

react-native: undefined | string

+
+

react-native-selector​

+
+

react-native-selector: undefined | string

+
+

react-native-tsx​

+
+

react-native-tsx: undefined | string

+
+

react-native-tsx-selector​

+
+

react-native-tsx-selector: undefined | string

+
+

react-native.jsx​

+
+

jsx: undefined | string

+
+

react-native.jsx-selector​

+
+

jsx-selector: undefined | string

+
+

react-native.tsx​

+
+

tsx: undefined | string

+
+

react-native.tsx-selector​

+
+

tsx-selector: undefined | string

+
+

react-selector​

+
+

react-selector: undefined | string

+
+

react-tsx​

+
+

react-tsx: undefined | string

+
+

react-tsx-selector​

+
+

react-tsx-selector: undefined | string

+
+

react.jsx​

+
+

jsx: undefined | string

+
+

react.jsx-selector​

+
+

jsx-selector: undefined | string

+
+

react.tsx​

+
+

tsx: undefined | string

+
+

react.tsx-selector​

+
+

tsx-selector: undefined | string

+
+

readonly?​

+
+

optional readonly: boolean

+
+

If true, editors are loaded in read-only mode, where the user is not allowed to change the code.

+

By default, when readonly is set to true, the light-weight code editor CodeJar is used. +If you wish to use another editor, set the editor property.

+
Default​
+
false
+

reason​

+
+

reason: undefined | string

+
+

reason-selector​

+
+

reason-selector: undefined | string

+
+

recoverUnsaved?​

+
+

optional recoverUnsaved: boolean

+
+

Enables recovering last unsaved project when the app is reopened.

+
Default​
+
true
+

rei​

+
+

rei: undefined | string

+
+

rei-selector​

+
+

rei-selector: undefined | string

+
+

res​

+
+

res: undefined | string

+
+

res-selector​

+
+

res-selector: undefined | string

+
+

rescript​

+
+

rescript: undefined | string

+
+

rescript-selector​

+
+

rescript-selector: undefined | string

+
+

resi​

+
+

resi: undefined | string

+
+

resi-selector​

+
+

resi-selector: undefined | string

+
+

rich​

+
+

rich: undefined | string

+
+

rich-selector​

+
+

rich-selector: undefined | string

+
+

richtext​

+
+

richtext: undefined | string

+
+

richtext-selector​

+
+

richtext-selector: undefined | string

+
+

riot​

+
+

riot: undefined | string

+
+

riot-selector​

+
+

riot-selector: undefined | string

+
+

riotjs​

+
+

riotjs: undefined | string

+
+

riotjs-selector​

+
+

riotjs-selector: undefined | string

+
+

rlang​

+
+

rlang: undefined | string

+
+

rlang-selector​

+
+

rlang-selector: undefined | string

+
+

rstats​

+
+

rstats: undefined | string

+
+

rstats-selector​

+
+

rstats-selector: undefined | string

+
+

rte​

+
+

rte: undefined | string

+
+

rte-selector​

+
+

rte-selector: undefined | string

+
+

rte.html​

+
+

html: undefined | string

+
+

rte.html-selector​

+
+

html-selector: undefined | string

+
+

ruby​

+
+

ruby: undefined | string

+
+

ruby-selector​

+
+

ruby-selector: undefined | string

+
+

ruby-wasm​

+
+

ruby-wasm: undefined | string

+
+

ruby-wasm-selector​

+
+

ruby-wasm-selector: undefined | string

+
+

rubywasm​

+
+

rubywasm: undefined | string

+
+

rubywasm-selector​

+
+

rubywasm-selector: undefined | string

+
+

sass​

+
+

sass: undefined | string

+
+

sass-selector​

+
+

sass-selector: undefined | string

+
+

scheme​

+
+

scheme: undefined | string

+
+

scheme-selector​

+
+

scheme-selector: undefined | string

+
+

scm​

+
+

scm: undefined | string

+
+

scm-selector​

+
+

scm-selector: undefined | string

+
+

screen?​

+
+

optional screen: "new" | "open" | "embed" | "sync" | "about" | "welcome" | "add-snippet" | "login" | "info" | "assets" | "add-asset" | "snippets" | "import" | "resources" | "share" | "deploy" | "backup" | "broadcast" | "custom-settings" | "editor-settings" | "code-to-image" | "test-editor" | "keyboard-shortcuts"

+
+

script?​

+
+

optional script: object

+
+

An object that configures the language and content of the script editor.

+

See docs for details.

+
Default​
+
{ language: "javascript", content: "" }
+

script.content?​

+
+

optional content: string

+
+

The initial content of the code editor.

+
Default​
+
""
+

script.contentUrl?​

+
+

optional contentUrl: string

+
+

A URL to load content from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if content property had no value.

+

script.foldedLines?​

+
+

optional foldedLines: object[]

+
+

Lines that get folded when the editor loads.

+

This can be used for less relevant content.

+
Example​
+
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
+

script.hiddenContent?​

+
+

optional hiddenContent: string

+
+

Hidden content that gets evaluated without being visible in the code editor.

+

This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)

+

script.hiddenContentUrl?​

+
+

optional hiddenContentUrl: string

+
+

A URL to load hiddenContent from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if hiddenContent property had no value.

+

script.hideTitle?​

+
+

optional hideTitle: boolean

+
+

If true, the title of the code editor is hidden, however its code is still evaluated.

+

This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).

+

script.language​

+
+

language: Language

+
+

A language name, extension or alias (as defined in language documentations).

+

For the list of supported values, see Language

+

script.order?​

+
+

optional order: number

+
+

The order of the editor in the UI.

+
Default​
+
0
+

script.position?​

+
+

optional position: EditorPosition

+
+

The initial position of the cursor in the code editor.

+
Example​
+
{lineNumber: 5, column: 10}
+

script.selector?​

+
+

optional selector: string

+
+

A CSS selector to load content from DOM import.

+

script.title?​

+
+

optional title: string

+
+

If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. "Python" can be used instead of "Py (Wasm)").

+

scripts?​

+
+

optional scripts: string

+
+

scrollPosition?​

+
+

optional scrollPosition: boolean

+
+

scss​

+
+

scss: undefined | string

+
+

scss-selector​

+
+

scss-selector: undefined | string

+
+

sdkVersion?​

+
+

optional sdkVersion: string

+
+

semicolons?​

+
+

optional semicolons: boolean

+
+

Configures Prettier code formatter to use semi-colons.

+
Default​
+
true
+

showSpacing?​

+
+

optional showSpacing: boolean

+
+

Enables showing element spacing in the result page.

+
Default​
+
false
+

singleQuote?​

+
+

optional singleQuote: boolean

+
+

Configures Prettier code formatter to use single quotes instead of double quotes.

+
Default​
+
false
+

solid​

+
+

solid: undefined | string

+
+

solid-selector​

+
+

solid-selector: undefined | string

+
+

solid.jsx​

+
+

jsx: undefined | string

+
+

solid.jsx-selector​

+
+

jsx-selector: undefined | string

+
+

solid.tsx​

+
+

tsx: undefined | string

+
+

solid.tsx-selector​

+
+

tsx-selector: undefined | string

+
+

sql​

+
+

sql: undefined | string

+
+

sql-selector​

+
+

sql-selector: undefined | string

+
+

sqlite​

+
+

sqlite: undefined | string

+
+

sqlite-selector​

+
+

sqlite-selector: undefined | string

+
+

sqlite3​

+
+

sqlite3: undefined | string

+
+

sqlite3-selector​

+
+

sqlite3-selector: undefined | string

+
+

stencil​

+
+

stencil: undefined | string

+
+

stencil-selector​

+
+

stencil-selector: undefined | string

+
+

stencil.tsx​

+
+

tsx: undefined | string

+
+

stencil.tsx-selector​

+
+

tsx-selector: undefined | string

+
+

styl​

+
+

styl: undefined | string

+
+

styl-selector​

+
+

styl-selector: undefined | string

+
+

style?​

+
+

optional style: object

+
+

An object that configures the language and content of the style editor.

+

See docs for details.

+
Default​
+
{ language: "css", content: "" }
+

style.content?​

+
+

optional content: string

+
+

The initial content of the code editor.

+
Default​
+
""
+

style.contentUrl?​

+
+

optional contentUrl: string

+
+

A URL to load content from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if content property had no value.

+

style.foldedLines?​

+
+

optional foldedLines: object[]

+
+

Lines that get folded when the editor loads.

+

This can be used for less relevant content.

+
Example​
+
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
+

style.hiddenContent?​

+
+

optional hiddenContent: string

+
+

Hidden content that gets evaluated without being visible in the code editor.

+

This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)

+

style.hiddenContentUrl?​

+
+

optional hiddenContentUrl: string

+
+

A URL to load hiddenContent from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if hiddenContent property had no value.

+

style.hideTitle?​

+
+

optional hideTitle: boolean

+
+

If true, the title of the code editor is hidden, however its code is still evaluated.

+

This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).

+

style.language​

+
+

language: Language

+
+

A language name, extension or alias (as defined in language documentations).

+

For the list of supported values, see Language

+

style.order?​

+
+

optional order: number

+
+

The order of the editor in the UI.

+
Default​
+
0
+

style.position?​

+
+

optional position: EditorPosition

+
+

The initial position of the cursor in the code editor.

+
Example​
+
{lineNumber: 5, column: 10}
+

style.selector?​

+
+

optional selector: string

+
+

A CSS selector to load content from DOM import.

+

style.title?​

+
+

optional title: string

+
+

If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. "Python" can be used instead of "Py (Wasm)").

+

stylesheets?​

+
+

optional stylesheets: string

+
+

stylis​

+
+

stylis: undefined | string

+
+

stylis-selector​

+
+

stylis-selector: undefined | string

+
+

stylus​

+
+

stylus: undefined | string

+
+

stylus-selector​

+
+

stylus-selector: undefined | string

+
+

sucrase​

+
+

sucrase: undefined | string

+
+

sucrase-selector​

+
+

sucrase-selector: undefined | string

+
+

svelte​

+
+

svelte: undefined | string

+
+

svelte-app​

+
+

svelte-app: undefined | string

+
+

svelte-app-selector​

+
+

svelte-app-selector: undefined | string

+
+

svelte-selector​

+
+

svelte-selector: undefined | string

+
+

tabSize?​

+
+

optional tabSize: number

+
+

The number of spaces per indentation-level.

+

Also used in code formatting.

+
Default​
+
2
+

tags?​

+
+

optional tags: string | string[]

+
+

tcl​

+
+

tcl: undefined | string

+
+

tcl-selector​

+
+

tcl-selector: undefined | string

+
+

teal​

+
+

teal: undefined | string

+
+

teal-selector​

+
+

teal-selector: undefined | string

+
+

template?​

+
+

optional template: TemplateName

+
+

A starter template to load. +Allowed valued can be found here.

+

tests?​

+
+

optional tests: ({ language?: Language | undefined; content?: string | undefined; contentUrl?: string | undefined; hiddenContent?: string | undefined; hiddenContentUrl?: string | undefined; ... 5 more ...; position?: EditorPosition | undefined; } | undefined) & ("" | ... 4 more ... | "full")

+
+

Configures the language +and content of tests.

+

theme?​

+
+

optional theme: Theme

+
+

Sets the app theme to light/dark mode.

+
Default​
+
"dark"
+

themeColor?​

+
+

optional themeColor: string

+
+

Sets the app theme color. +If undefined, it is set to "hsl(214, 40%, 50%)".

+
Default​
+
undefined
+

title?​

+
+

optional title: string

+
+

Project title. +This is used as result page title and title meta tag. +Also used in project search.

+
Default​
+
"Untitled Project"
+

tl​

+
+

tl: undefined | string

+
+

tl-selector​

+
+

tl-selector: undefined | string

+
+

tools?​

+
+

optional tools: "none" | "closed" | "open" | "full" | "console" | "compiled" | "tests" | "console|undefined" | "console|" | "console|none" | "console|closed" | "console|open" | "console|full" | "compiled|undefined" | "compiled|" | "compiled|none" | "compiled|closed" | "compiled|open" | "compiled|full" | "tests|undefined" | "tests|" | "tests|none" | "tests|closed" | "tests|open" | "tests|full" | "console,console|undefined" | "console,console|" | "console,console|none" | "console,console|closed" | "console,console|open" | "console,console|full" | "console,compiled|undefined" | "console,compiled|" | "console,compiled|none" | "console,compiled|closed" | "console,compiled|open" | "console,compiled|full" | "console,tests|undefined" | "console,tests|" | "console,tests|none" | "console,tests|closed" | "console,tests|open" | "console,tests|full" | "compiled,console|undefined" | "compiled,console|" | "compiled,console|none" | "compiled,console|closed" | "compiled,console|open" | "compiled,console|full" | "compiled,compiled|undefined" | "compiled,compiled|" | "compiled,compiled|none" | "compiled,compiled|closed" | "compiled,compiled|open" | "compiled,compiled|full" | "compiled,tests|undefined" | "compiled,tests|" | "compiled,tests|none" | "compiled,tests|closed" | "compiled,tests|open" | "compiled,tests|full" | "tests,console|undefined" | "tests,console|" | "tests,console|none" | "tests,console|closed" | "tests,console|open" | "tests,console|full" | "tests,compiled|undefined" | "tests,compiled|" | "tests,compiled|none" | "tests,compiled|closed" | "tests,compiled|open" | "tests,compiled|full" | "tests,tests|undefined" | "tests,tests|" | "tests,tests|none" | "tests,tests|closed" | "tests,tests|open" | "tests,tests|full" | "console,console,console|undefined" | "console,console,console|" | "console,console,console|none" | "console,console,console|closed" | "console,console,console|open" | "console,console,console|full" | "console,console,compiled|undefined" | "console,console,compiled|" | "console,console,compiled|none" | "console,console,compiled|closed" | "console,console,compiled|open" | "console,console,compiled|full" | "console,console,tests|undefined" | "console,console,tests|" | "console,console,tests|none" | "console,console,tests|closed" | "console,console,tests|open" | "console,console,tests|full" | "console,compiled,console|undefined" | "console,compiled,console|" | "console,compiled,console|none" | "console,compiled,console|closed" | "console,compiled,console|open" | "console,compiled,console|full" | "console,compiled,compiled|undefined" | "console,compiled,compiled|" | "console,compiled,compiled|none" | "console,compiled,compiled|closed" | "console,compiled,compiled|open" | "console,compiled,compiled|full" | "console,compiled,tests|undefined" | "console,compiled,tests|" | "console,compiled,tests|none" | "console,compiled,tests|closed" | "console,compiled,tests|open" | "console,compiled,tests|full" | "console,tests,console|undefined" | "console,tests,console|" | "console,tests,console|none" | "console,tests,console|closed" | "console,tests,console|open" | "console,tests,console|full" | "console,tests,compiled|undefined" | "console,tests,compiled|" | "console,tests,compiled|none" | "console,tests,compiled|closed" | "console,tests,compiled|open" | "console,tests,compiled|full" | "console,tests,tests|undefined" | "console,tests,tests|" | "console,tests,tests|none" | "console,tests,tests|closed" | "console,tests,tests|open" | "console,tests,tests|full" | "compiled,console,console|undefined" | "compiled,console,console|" | "compiled,console,console|none" | "compiled,console,console|closed" | "compiled,console,console|open" | "compiled,console,console|full" | "compiled,console,compiled|undefined" | "compiled,console,compiled|" | "compiled,console,compiled|none" | "compiled,console,compiled|closed" | "compiled,console,compiled|open" | "compiled,console,compiled|full" | "compiled,console,tests|undefined" | "compiled,console,tests|" | "compiled,console,tests|none" | "compiled,console,tests|closed" | "compiled,console,tests|open" | "compiled,console,tests|full" | "compiled,compiled,console|undefined" | "compiled,compiled,console|" | "compiled,compiled,console|none" | "compiled,compiled,console|closed" | "compiled,compiled,console|open" | "compiled,compiled,console|full" | "compiled,compiled,compiled|undefined" | "compiled,compiled,compiled|" | "compiled,compiled,compiled|none" | "compiled,compiled,compiled|closed" | "compiled,compiled,compiled|open" | "compiled,compiled,compiled|full" | "compiled,compiled,tests|undefined" | "compiled,compiled,tests|" | "compiled,compiled,tests|none" | "compiled,compiled,tests|closed" | "compiled,compiled,tests|open" | "compiled,compiled,tests|full" | "compiled,tests,console|undefined" | "compiled,tests,console|" | "compiled,tests,console|none" | "compiled,tests,console|closed" | "compiled,tests,console|open" | "compiled,tests,console|full" | "compiled,tests,compiled|undefined" | "compiled,tests,compiled|" | "compiled,tests,compiled|none" | "compiled,tests,compiled|closed" | "compiled,tests,compiled|open" | "compiled,tests,compiled|full" | "compiled,tests,tests|undefined" | "compiled,tests,tests|" | "compiled,tests,tests|none" | "compiled,tests,tests|closed" | "compiled,tests,tests|open" | "compiled,tests,tests|full" | "tests,console,console|undefined" | "tests,console,console|" | "tests,console,console|none" | "tests,console,console|closed" | "tests,console,console|open" | "tests,console,console|full" | "tests,console,compiled|undefined" | "tests,console,compiled|" | "tests,console,compiled|none" | "tests,console,compiled|closed" | "tests,console,compiled|open" | "tests,console,compiled|full" | "tests,console,tests|undefined" | "tests,console,tests|" | "tests,console,tests|none" | "tests,console,tests|closed" | "tests,console,tests|open" | "tests,console,tests|full" | "tests,compiled,console|undefined" | "tests,compiled,console|" | "tests,compiled,console|none" | "tests,compiled,console|closed" | "tests,compiled,console|open" | "tests,compiled,console|full" | "tests,compiled,compiled|undefined" | "tests,compiled,compiled|" | "tests,compiled,compiled|none" | "tests,compiled,compiled|closed" | "tests,compiled,compiled|open" | "tests,compiled,compiled|full" | "tests,compiled,tests|undefined" | "tests,compiled,tests|" | "tests,compiled,tests|none" | "tests,compiled,tests|closed" | "tests,compiled,tests|open" | "tests,compiled,tests|full" | "tests,tests,console|undefined" | "tests,tests,console|" | "tests,tests,console|none" | "tests,tests,console|closed" | "tests,tests,console|open" | "tests,tests,console|full" | "tests,tests,compiled|undefined" | "tests,tests,compiled|" | "tests,tests,compiled|none" | "tests,tests,compiled|closed" | "tests,tests,compiled|open" | "tests,tests,compiled|full" | "tests,tests,tests|undefined" | "tests,tests,tests|" | "tests,tests,tests|none" | "tests,tests,tests|closed" | "tests,tests,tests|open" | "tests,tests,tests|full"

+
+

trailingComma?​

+
+

optional trailingComma: boolean

+
+

Configures Prettier code formatter to use trailing commas.

+
Default​
+
true
+

ts​

+
+

ts: undefined | string

+
+

ts-selector​

+
+

ts-selector: undefined | string

+
+

tsx​

+
+

tsx: undefined | string

+
+

tsx-selector​

+
+

tsx-selector: undefined | string

+
+

twig​

+
+

twig: undefined | string

+
+

twig-selector​

+
+

twig-selector: undefined | string

+
+

types?​

+
+

optional types: object

+
+

Allows providing custom TypeScript type declarations for better editor intellisense.

+

It is an object where each key represents module name and value represents the types.

+

See docs for Types +and Custom Types

+
Examples​
+
{
  "types": {
    "my-demo-lib": "https://my-custom-domain/my-type-declarations.d.ts"
  }
}
+
{
  "types": {
    "my-demo-lib": {
      "url": "https://my-custom-domain/types.d.ts",
      "autoload": true,
      "declareAsModule": true
    }
}
+

typescript​

+
+

typescript: undefined | string

+
+

typescript-selector​

+
+

typescript-selector: undefined | string

+
+

useTabs?​

+
+

optional useTabs: boolean

+
+

If true, lines are indented with tabs instead of spaces.

+

Also used in code formatting.

+
Default​
+
false
+

vento​

+
+

vento: undefined | string

+
+

vento-selector​

+
+

vento-selector: undefined | string

+
+

version?​

+
+

readonly optional version: string

+
+

This is a read-only property which specifies the current LiveCodes version.

+

Version specified in exported projects allows automatically upgrading the project configuration when imported by an app with a newer version.

+

view?​

+
+

optional view: "split" | "result" | "editor"

+
+
Deprecated​
+

The view option has been moved to config.view. +For headless mode use headless: true.

+

The default view for the playground.

+

When set to "headless", the playground is loaded in headless mode.

+
Default​
+
"split"
+

vto​

+
+

vto: undefined | string

+
+

vto-selector​

+
+

vto-selector: undefined | string

+
+

vue​

+
+

vue: undefined | string

+
+

vue-app​

+
+

vue-app: undefined | string

+
+

vue-app-selector​

+
+

vue-app-selector: undefined | string

+
+

vue-selector​

+
+

vue-selector: undefined | string

+
+

vue2​

+
+

vue2: undefined | string

+
+

vue2-selector​

+
+

vue2-selector: undefined | string

+
+

vue3​

+
+

vue3: undefined | string

+
+

vue3-selector​

+
+

vue3-selector: undefined | string

+
+

wasm​

+
+

wasm: undefined | string

+
+

wasm-selector​

+
+

wasm-selector: undefined | string

+
+

wasm.cpp​

+
+

cpp: undefined | string

+
+

wasm.cpp-selector​

+
+

cpp-selector: undefined | string

+
+

wasm.cs​

+
+

cs: undefined | string

+
+

wasm.cs-selector​

+
+

cs-selector: undefined | string

+
+

wasm.lua​

+
+

lua: undefined | string

+
+

wasm.lua-selector​

+
+

lua-selector: undefined | string

+
+

wasm.php​

+
+

php: undefined | string

+
+

wasm.php-selector​

+
+

php-selector: undefined | string

+
+

wasm.py​

+
+

py: undefined | string

+
+

wasm.py-selector​

+
+

py-selector: undefined | string

+
+

wasm.rb​

+
+

rb: undefined | string

+
+

wasm.rb-selector​

+
+

rb-selector: undefined | string

+
+

wast​

+
+

wast: undefined | string

+
+

wast-selector​

+
+

wast-selector: undefined | string

+
+

wat​

+
+

wat: undefined | string

+
+

wat-selector​

+
+

wat-selector: undefined | string

+
+

webassembly​

+
+

webassembly: undefined | string

+
+

webassembly-selector​

+
+

webassembly-selector: undefined | string

+
+

welcome?​

+
+

optional welcome: boolean

+
+

If true, the welcome screen is displayed when the app loads.

+

wordWrap?​

+
+

optional wordWrap: boolean

+
+

Enables word-wrap for long lines.

+
Default​
+
false
+

x?​

+
+

optional x: string

+
+

xht​

+
+

xht: undefined | string

+
+

xht-selector​

+
+

xht-selector: undefined | string

+
+

xml​

+
+

xml: undefined | string

+
+

xml-selector​

+
+

xml-selector: undefined | string

+
+

zoom?​

+
+

optional zoom: 1 | 0.5 | 0.25

+
+

Sets result page zoom level.

+

Defined in​

+

models.ts:338

+
+

template?​

+
+

optional template: TemplateName

+
+

A starter template to load. +Allowed valued can be found here.

+

Defined in​

+

models.ts:383

+
+

view?​

+
+

optional view: "split" | "result" | "editor" | "headless"

+
+

Deprecated​

+

The view option has been moved to config.view. +For headless mode use headless: true.

+

The default view for the playground.

+

When set to "headless", the playground is loaded in headless mode.

+

Default​

+
"split"
+

Defined in​

+

models.ts:396

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/interfaces/Playground.html.md b/docs/api/interfaces/Playground.html.md new file mode 100644 index 0000000..2903662 --- /dev/null +++ b/docs/api/interfaces/Playground.html.md @@ -0,0 +1,492 @@ +# Interface: Playground + +An object that represents the LiveCodes playground instance. + +The object exposes multiple [methods](https://livecodes.io/docs/sdk/js-ts/#sdk-methods) that can be used to interact with the playground. + +See [docs](https://livecodes.io/docs/sdk/js-ts) for details. + +## Extends + +- [`API`](../internal/interfaces/API.md) + +## Properties + +### destroy() + +> **destroy**: () => `Promise`\<`void`\> + +Destroys the playground instance, and removes event listeners. + +Further call to any SDK methods throws an error. + +#### Returns + +`Promise`\<`void`\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + await playground.destroy(); + // playground destroyed + // any further SDK call throws an error +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`destroy`](../internal/interfaces/API.md#destroy) + +#### Defined in + +[models.ts:211](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L211) + +*** + +### exec() + +> **exec**: (`command`, ...`args`) => `Promise`\<`object` \| `object`\> + +Executes custom commands, including: `"setBroadcastToken"` and `"showVersion"`. + +See [docs](https://livecodes.io/docs/sdk/js-ts#exec) for details. + +#### Parameters + +• **command**: [`APICommands`](../internal/type-aliases/APICommands.md) + +• ...**args**: `any`[] + +#### Returns + +`Promise`\<`object` \| `object`\> + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`exec`](../internal/interfaces/API.md#exec) + +#### Defined in + +[models.ts:194](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L194) + +*** + +### format() + +> **format**: (`allEditors`?) => `Promise`\<`void`\> + +Formats the code. + +By default, the code in all editors (markup, style and script) is formatted. +To format only the active editor, the value `false` should be passed as an argument. + +#### Parameters + +• **allEditors?**: `boolean` + +#### Returns + +`Promise`\<`void`\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + await playground.format(); + // code in editors is formatted +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`format`](../internal/interfaces/API.md#format) + +#### Defined in + +[models.ts:31](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L31) + +*** + +### getCode() + +> **getCode**: () => `Promise`\<[`Code`](Code.md)\> + +Gets the playground code (including source code, source language and compiled code) for each editor (markup, style, script), in addition to result page HTML. + +See [Code](https://livecodes.io/docs/api/interfaces/Code) for the structure of the returned object. + +#### Returns + +`Promise`\<[`Code`](Code.md)\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const code = await playground.getCode(); + + // source code, language and compiled code for the script editor + const { content, language, compiled } = code.script; + + // result page HTML + const result = code.result; +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`getCode`](../internal/interfaces/API.md#getcode) + +#### Defined in + +[models.ts:105](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L105) + +*** + +### getConfig() + +> **getConfig**: (`contentOnly`?) => `Promise`\<[`Config`](Config.md)\> + +Gets a [configuration object](https://livecodes.io/docs/configuration/configuration-object) representing the playground state. + +This can be used to restore state if passed as an [EmbedOptions](https://livecodes.io/docs/sdk/js-ts#embed-options) property when [creating playgrounds](https://livecodes.io/docs/sdk/js-ts/#createplayground), +or can be manipulated and loaded in run-time using [`setConfig`](https://livecodes.io/docs/sdk/js-ts#setconfig) method. + +#### Parameters + +• **contentOnly?**: `boolean` + +#### Returns + +`Promise`\<[`Config`](Config.md)\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const config = await playground.getConfig(); +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`getConfig`](../internal/interfaces/API.md#getconfig) + +#### Defined in + +[models.ts:64](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L64) + +*** + +### getShareUrl() + +> **getShareUrl**: (`shortUrl`?) => `Promise`\<`string`\> + +Gets a [share url](https://livecodes.io/docs/features/share) for the current project. + +By default, the url has a long query string representing the compressed encoded config object. +If the argument `shortUrl` was set to `true`, a short url is generated. + +#### Parameters + +• **shortUrl?**: `boolean` + +#### Returns + +`Promise`\<`string`\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const longUrl = await playground.getShareUrl(); + const shortUrl = await playground.getShareUrl(true); +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`getShareUrl`](../internal/interfaces/API.md#getshareurl) + +#### Defined in + +[models.ts:48](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L48) + +*** + +### load() + +> **load**: () => `Promise`\<`void`\> + +Loads the playground, if not already loaded. + +When the embed option [loading](https://livecodes.io/docs/sdk/js-ts#loading) is set to `"click"`, the playground is not loaded automatically. +Instead, a screen is shown with "Click to load" button. Calling the SDK method `load()` allows loading the playground. + +If the playground was not loaded, calling any other method will load the playground first before executing. + +#### Returns + +`Promise`\<`void`\> + +#### Defined in + +[models.ts:298](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L298) + +*** + +### ~~onChange()~~ + +> **onChange**: (`fn`) => `object` + +Runs a callback function when code changes. + +#### Parameters + +• **fn** + +#### Returns + +`object` + +##### ~~remove()~~ + +> **remove**: () => `void` + +###### Returns + +`void` + +#### Deprecated + +Use [`watch`](https://livecodes.io/docs/sdk/js-ts#watch) method instead. + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`onChange`](../internal/interfaces/API.md#onchange) + +#### Defined in + +[models.ts:142](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L142) + +*** + +### run() + +> **run**: () => `Promise`\<`void`\> + +Runs the [result page](https://livecodes.io/docs/features/result) (after any required compilation for code). + +#### Returns + +`Promise`\<`void`\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + await playground.run(); + // new result page is displayed +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`run`](../internal/interfaces/API.md#run) + +#### Defined in + +[models.ts:14](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L14) + +*** + +### runTests() + +> **runTests**: () => `Promise`\<`object`\> + +Runs project [tests](https://livecodes.io/docs/features/tests) (if present) and gets test results. + +#### Returns + +`Promise`\<`object`\> + +##### results + +> **results**: [`TestResult`](../internal/interfaces/TestResult.md)[] + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const { results } = await playground.runTests(); +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`runTests`](../internal/interfaces/API.md#runtests) + +#### Defined in + +[models.ts:135](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L135) + +*** + +### setConfig() + +> **setConfig**: (`config`) => `Promise`\<[`Config`](Config.md)\> + +Loads a new project using the passed configuration object. + +#### Parameters + +• **config**: `Partial`\<[`Config`](Config.md)\> + +#### Returns + +`Promise`\<[`Config`](Config.md)\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const config = { + markup: { + language: "html", + content: "Hello World!", + }, + }; + const newConfig = await playground.setConfig(config); + // new project loaded +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`setConfig`](../internal/interfaces/API.md#setconfig) + +#### Defined in + +[models.ts:84](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L84) + +*** + +### show() + +> **show**: (`panel`, `options`?) => `Promise`\<`void`\> + +Shows the selected panel. + +See [docs](https://livecodes.io/docs/sdk/js-ts#show) for details. + +#### Parameters + +• **panel**: `"result"` \| [`EditorId`](../internal/type-aliases/EditorId.md) \| `"console"` \| `"compiled"` \| `"tests"` \| `"editor"` \| `"toggle-result"` + +• **options?** + +• **options.column?**: `number` + +• **options.full?**: `boolean` + +• **options.line?**: `number` + +• **options.zoom?**: `1` \| `0.5` \| `0.25` + +#### Returns + +`Promise`\<`void`\> + +#### Example + +```ts +await playground.show("style"); +await playground.show("toggle-result"); +await playground.show("result", { full: true }); +await playground.show("script"); +await playground.show("result", { zoom: 0.5 }); +await playground.show("console", { full: true }); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`show`](../internal/interfaces/API.md#show) + +#### Defined in + +[models.ts:119](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L119) + +*** + +### watch + +> **watch**: [`WatchLoad`](../internal/type-aliases/WatchLoad.md) & [`WatchReady`](../internal/type-aliases/WatchReady.md) & [`WatchCode`](../internal/type-aliases/WatchCode.md) & [`WatchConsole`](../internal/type-aliases/WatchConsole.md) & [`WatchTests`](../internal/type-aliases/WatchTests.md) & [`WatchDestroy`](../internal/type-aliases/WatchDestroy.md) + +Allows to watch for various playground events. +It takes 2 arguments: event name and a callback function that will be called on every event. + +event name can be one of: `"load" | "ready" | "code" | "console" | "tests" | "destroy"` + +In some events, the callback function will be called with an object that supplies relevant data to the callback function (e.g. code, console output, test results). + +The watch method returns an object with a single method (`remove`), which when called will remove the callback from watching further events. + +See [docs](https://livecodes.io/docs/sdk/js-ts#watch) for details. + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then((playground) => { + const codeWatcher = playground.watch("code", ({ code, config }) => { + // this will run on every code change + console.log("code:", code); + console.log("config:", config); + }); + + const consoleWatcher = playground.watch("console", ({ method, args }) => { + // this will run on every console output + console[method](...args); + }); + + const testsWatcher = playground.watch("tests", ({ results }) => { + // this will run when tests run + results.forEach((testResult) => { + console.log("status:", testResult.status); // "pass", "fail" or "skip" + console.log(testResult.errors); // array of errors as strings + }); + }); + + // then later + codeWatcher.remove(); + consoleWatcher.remove(); + testsWatcher.remove(); + // events are no longer watched +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`watch`](../internal/interfaces/API.md#watch) + +#### Defined in + +[models.ts:187](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L187) \ No newline at end of file diff --git a/docs/api/interfaces/Playground/index.html b/docs/api/interfaces/Playground/index.html new file mode 100644 index 0000000..6a916a0 --- /dev/null +++ b/docs/api/interfaces/Playground/index.html @@ -0,0 +1,240 @@ +Interface: Playground | LiveCodes
Skip to main content

Interface: Playground

+

An object that represents the LiveCodes playground instance.

+

The object exposes multiple methods that can be used to interact with the playground.

+

See docs for details.

+

Extends​

+ +

Properties​

+

destroy()​

+
+

destroy: () => Promise<void>

+
+

Destroys the playground instance, and removes event listeners.

+

Further call to any SDK methods throws an error.

+

Returns​

+

Promise<void>

+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  await playground.destroy();
  // playground destroyed
  // any further SDK call throws an error
});
+

Inherited from​

+

API.destroy

+

Defined in​

+

models.ts:211

+
+

exec()​

+
+

exec: (command, ...args) => Promise<object | object>

+
+

Executes custom commands, including: "setBroadcastToken" and "showVersion".

+

See docs for details.

+

Parameters​

+

• command: APICommands

+

• ...args: any[]

+

Returns​

+

Promise<object | object>

+

Inherited from​

+

API.exec

+

Defined in​

+

models.ts:194

+
+

format()​

+
+

format: (allEditors?) => Promise<void>

+
+

Formats the code.

+

By default, the code in all editors (markup, style and script) is formatted. +To format only the active editor, the value false should be passed as an argument.

+

Parameters​

+

• allEditors?: boolean

+

Returns​

+

Promise<void>

+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  await playground.format();
  // code in editors is formatted
});
+

Inherited from​

+

API.format

+

Defined in​

+

models.ts:31

+
+

getCode()​

+
+

getCode: () => Promise<Code>

+
+

Gets the playground code (including source code, source language and compiled code) for each editor (markup, style, script), in addition to result page HTML.

+

See Code for the structure of the returned object.

+

Returns​

+

Promise<Code>

+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const code = await playground.getCode();

  // source code, language and compiled code for the script editor
  const { content, language, compiled } = code.script;

  // result page HTML
  const result = code.result;
});
+

Inherited from​

+

API.getCode

+

Defined in​

+

models.ts:105

+
+

getConfig()​

+
+

getConfig: (contentOnly?) => Promise<Config>

+
+

Gets a configuration object representing the playground state.

+

This can be used to restore state if passed as an EmbedOptions property when creating playgrounds, +or can be manipulated and loaded in run-time using setConfig method.

+

Parameters​

+

• contentOnly?: boolean

+

Returns​

+

Promise<Config>

+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const config = await playground.getConfig();
});
+

Inherited from​

+

API.getConfig

+

Defined in​

+

models.ts:64

+
+

getShareUrl()​

+
+

getShareUrl: (shortUrl?) => Promise<string>

+
+

Gets a share url for the current project.

+

By default, the url has a long query string representing the compressed encoded config object. +If the argument shortUrl was set to true, a short url is generated.

+

Parameters​

+

• shortUrl?: boolean

+

Returns​

+

Promise<string>

+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const longUrl = await playground.getShareUrl();
  const shortUrl = await playground.getShareUrl(true);
});
+

Inherited from​

+

API.getShareUrl

+

Defined in​

+

models.ts:48

+
+

load()​

+
+

load: () => Promise<void>

+
+

Loads the playground, if not already loaded.

+

When the embed option loading is set to "click", the playground is not loaded automatically. +Instead, a screen is shown with "Click to load" button. Calling the SDK method load() allows loading the playground.

+

If the playground was not loaded, calling any other method will load the playground first before executing.

+

Returns​

+

Promise<void>

+

Defined in​

+

models.ts:298

+
+

onChange()​

+
+

onChange: (fn) => object

+
+

Runs a callback function when code changes.

+

Parameters​

+

• fn

+

Returns​

+

object

+
remove()​
+
+

remove: () => void

+
+
Returns​
+

void

+

Deprecated​

+

Use watch method instead.

+

Inherited from​

+

API.onChange

+

Defined in​

+

models.ts:142

+
+

run()​

+
+

run: () => Promise<void>

+
+

Runs the result page (after any required compilation for code).

+

Returns​

+

Promise<void>

+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  await playground.run();
  // new result page is displayed
});
+

Inherited from​

+

API.run

+

Defined in​

+

models.ts:14

+
+

runTests()​

+
+

runTests: () => Promise<object>

+
+

Runs project tests (if present) and gets test results.

+

Returns​

+

Promise<object>

+
results​
+
+

results: TestResult[]

+
+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const { results } = await playground.runTests();
});
+

Inherited from​

+

API.runTests

+

Defined in​

+

models.ts:135

+
+

setConfig()​

+
+

setConfig: (config) => Promise<Config>

+
+

Loads a new project using the passed configuration object.

+

Parameters​

+

• config: Partial<Config>

+

Returns​

+

Promise<Config>

+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const config = {
    markup: {
      language: "html",
      content: "Hello World!",
    },
  };
  const newConfig = await playground.setConfig(config);
  // new project loaded
});
+

Inherited from​

+

API.setConfig

+

Defined in​

+

models.ts:84

+
+

show()​

+
+

show: (panel, options?) => Promise<void>

+
+

Shows the selected panel.

+

See docs for details.

+

Parameters​

+

• panel: "result" | EditorId | "console" | "compiled" | "tests" | "editor" | "toggle-result"

+

• options?

+

• options.column?: number

+

• options.full?: boolean

+

• options.line?: number

+

• options.zoom?: 1 | 0.5 | 0.25

+

Returns​

+

Promise<void>

+

Example​

+
await playground.show("style");
await playground.show("toggle-result");
await playground.show("result", { full: true });
await playground.show("script");
await playground.show("result", { zoom: 0.5 });
await playground.show("console", { full: true });
+

Inherited from​

+

API.show

+

Defined in​

+

models.ts:119

+
+

watch​

+
+

watch: WatchLoad & WatchReady & WatchCode & WatchConsole & WatchTests & WatchDestroy

+
+

Allows to watch for various playground events. +It takes 2 arguments: event name and a callback function that will be called on every event.

+

event name can be one of: "load" | "ready" | "code" | "console" | "tests" | "destroy"

+

In some events, the callback function will be called with an object that supplies relevant data to the callback function (e.g. code, console output, test results).

+

The watch method returns an object with a single method (remove), which when called will remove the callback from watching further events.

+

See docs for details.

+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then((playground) => {
  const codeWatcher = playground.watch("code", ({ code, config }) => {
    // this will run on every code change
    console.log("code:", code);
    console.log("config:", config);
  });

  const consoleWatcher = playground.watch("console", ({ method, args }) => {
    // this will run on every console output
    console[method](...args);
  });

  const testsWatcher = playground.watch("tests", ({ results }) => {
    // this will run when tests run
    results.forEach((testResult) => {
      console.log("status:", testResult.status); // "pass", "fail" or "skip"
      console.log(testResult.errors); // array of errors as strings
    });
  });

  // then later
  codeWatcher.remove();
  consoleWatcher.remove();
  testsWatcher.remove();
  // events are no longer watched
});
+

Inherited from​

+

API.watch

+

Defined in​

+

models.ts:187

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/index.html b/docs/api/internal/index.html new file mode 100644 index 0000000..609e906 --- /dev/null +++ b/docs/api/internal/index.html @@ -0,0 +1,46 @@ +\_internal | LiveCodes
Skip to main content
+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/index.html.md b/docs/api/internal/index.html.md new file mode 100644 index 0000000..b64901e --- /dev/null +++ b/docs/api/internal/index.html.md @@ -0,0 +1,37 @@ +# \_internal + +## Index + +### Interfaces + +- [API](interfaces/API.md) +- [AppConfig](interfaces/AppConfig.md) +- [ContentConfig](interfaces/ContentConfig.md) +- [EditorConfig](interfaces/EditorConfig.md) +- [EditorPosition](interfaces/EditorPosition.md) +- [FormatterConfig](interfaces/FormatterConfig.md) +- [TestResult](interfaces/TestResult.md) +- [Types](interfaces/Types.md) +- [UserConfig](interfaces/UserConfig.md) + +### Type Aliases + +- [APICommands](type-aliases/APICommands.md) +- [AppLanguage](type-aliases/AppLanguage.md) +- [CDN](type-aliases/CDN.md) +- [CodejarTheme](type-aliases/CodejarTheme.md) +- [CodemirrorTheme](type-aliases/CodemirrorTheme.md) +- [CssPresetId](type-aliases/CssPresetId.md) +- [EditorId](type-aliases/EditorId.md) +- [EditorTheme](type-aliases/EditorTheme.md) +- [MonacoTheme](type-aliases/MonacoTheme.md) +- [Processor](type-aliases/Processor.md) +- [TemplateName](type-aliases/TemplateName.md) +- [Theme](type-aliases/Theme.md) +- [ToolsPaneStatus](type-aliases/ToolsPaneStatus.md) +- [WatchCode](type-aliases/WatchCode.md) +- [WatchConsole](type-aliases/WatchConsole.md) +- [WatchDestroy](type-aliases/WatchDestroy.md) +- [WatchLoad](type-aliases/WatchLoad.md) +- [WatchReady](type-aliases/WatchReady.md) +- [WatchTests](type-aliases/WatchTests.md) \ No newline at end of file diff --git a/docs/api/internal/interfaces/API.html.md b/docs/api/internal/interfaces/API.html.md new file mode 100644 index 0000000..79a1fc2 --- /dev/null +++ b/docs/api/internal/interfaces/API.html.md @@ -0,0 +1,417 @@ +# Interface: API + +## Extended by + +- [`Playground`](../../interfaces/Playground.md) + +## Properties + +### destroy() + +> **destroy**: () => `Promise`\<`void`\> + +Destroys the playground instance, and removes event listeners. + +Further call to any SDK methods throws an error. + +#### Returns + +`Promise`\<`void`\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + await playground.destroy(); + // playground destroyed + // any further SDK call throws an error +}); +``` + +#### Defined in + +[models.ts:211](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L211) + +*** + +### exec() + +> **exec**: (`command`, ...`args`) => `Promise`\<`object` \| `object`\> + +Executes custom commands, including: `"setBroadcastToken"` and `"showVersion"`. + +See [docs](https://livecodes.io/docs/sdk/js-ts#exec) for details. + +#### Parameters + +• **command**: [`APICommands`](../type-aliases/APICommands.md) + +• ...**args**: `any`[] + +#### Returns + +`Promise`\<`object` \| `object`\> + +#### Defined in + +[models.ts:194](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L194) + +*** + +### format() + +> **format**: (`allEditors`?) => `Promise`\<`void`\> + +Formats the code. + +By default, the code in all editors (markup, style and script) is formatted. +To format only the active editor, the value `false` should be passed as an argument. + +#### Parameters + +• **allEditors?**: `boolean` + +#### Returns + +`Promise`\<`void`\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + await playground.format(); + // code in editors is formatted +}); +``` + +#### Defined in + +[models.ts:31](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L31) + +*** + +### getCode() + +> **getCode**: () => `Promise`\<[`Code`](../../interfaces/Code.md)\> + +Gets the playground code (including source code, source language and compiled code) for each editor (markup, style, script), in addition to result page HTML. + +See [Code](https://livecodes.io/docs/api/interfaces/Code) for the structure of the returned object. + +#### Returns + +`Promise`\<[`Code`](../../interfaces/Code.md)\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const code = await playground.getCode(); + + // source code, language and compiled code for the script editor + const { content, language, compiled } = code.script; + + // result page HTML + const result = code.result; +}); +``` + +#### Defined in + +[models.ts:105](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L105) + +*** + +### getConfig() + +> **getConfig**: (`contentOnly`?) => `Promise`\<[`Config`](../../interfaces/Config.md)\> + +Gets a [configuration object](https://livecodes.io/docs/configuration/configuration-object) representing the playground state. + +This can be used to restore state if passed as an [EmbedOptions](https://livecodes.io/docs/sdk/js-ts#embed-options) property when [creating playgrounds](https://livecodes.io/docs/sdk/js-ts/#createplayground), +or can be manipulated and loaded in run-time using [`setConfig`](https://livecodes.io/docs/sdk/js-ts#setconfig) method. + +#### Parameters + +• **contentOnly?**: `boolean` + +#### Returns + +`Promise`\<[`Config`](../../interfaces/Config.md)\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const config = await playground.getConfig(); +}); +``` + +#### Defined in + +[models.ts:64](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L64) + +*** + +### getShareUrl() + +> **getShareUrl**: (`shortUrl`?) => `Promise`\<`string`\> + +Gets a [share url](https://livecodes.io/docs/features/share) for the current project. + +By default, the url has a long query string representing the compressed encoded config object. +If the argument `shortUrl` was set to `true`, a short url is generated. + +#### Parameters + +• **shortUrl?**: `boolean` + +#### Returns + +`Promise`\<`string`\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const longUrl = await playground.getShareUrl(); + const shortUrl = await playground.getShareUrl(true); +}); +``` + +#### Defined in + +[models.ts:48](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L48) + +*** + +### ~~onChange()~~ + +> **onChange**: (`fn`) => `object` + +Runs a callback function when code changes. + +#### Parameters + +• **fn** + +#### Returns + +`object` + +##### ~~remove()~~ + +> **remove**: () => `void` + +###### Returns + +`void` + +#### Deprecated + +Use [`watch`](https://livecodes.io/docs/sdk/js-ts#watch) method instead. + +#### Defined in + +[models.ts:142](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L142) + +*** + +### run() + +> **run**: () => `Promise`\<`void`\> + +Runs the [result page](https://livecodes.io/docs/features/result) (after any required compilation for code). + +#### Returns + +`Promise`\<`void`\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + await playground.run(); + // new result page is displayed +}); +``` + +#### Defined in + +[models.ts:14](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L14) + +*** + +### runTests() + +> **runTests**: () => `Promise`\<`object`\> + +Runs project [tests](https://livecodes.io/docs/features/tests) (if present) and gets test results. + +#### Returns + +`Promise`\<`object`\> + +##### results + +> **results**: [`TestResult`](TestResult.md)[] + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const { results } = await playground.runTests(); +}); +``` + +#### Defined in + +[models.ts:135](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L135) + +*** + +### setConfig() + +> **setConfig**: (`config`) => `Promise`\<[`Config`](../../interfaces/Config.md)\> + +Loads a new project using the passed configuration object. + +#### Parameters + +• **config**: `Partial`\<[`Config`](../../interfaces/Config.md)\> + +#### Returns + +`Promise`\<[`Config`](../../interfaces/Config.md)\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const config = { + markup: { + language: "html", + content: "Hello World!", + }, + }; + const newConfig = await playground.setConfig(config); + // new project loaded +}); +``` + +#### Defined in + +[models.ts:84](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L84) + +*** + +### show() + +> **show**: (`panel`, `options`?) => `Promise`\<`void`\> + +Shows the selected panel. + +See [docs](https://livecodes.io/docs/sdk/js-ts#show) for details. + +#### Parameters + +• **panel**: `"result"` \| [`EditorId`](../type-aliases/EditorId.md) \| `"console"` \| `"compiled"` \| `"tests"` \| `"editor"` \| `"toggle-result"` + +• **options?** + +• **options.column?**: `number` + +• **options.full?**: `boolean` + +• **options.line?**: `number` + +• **options.zoom?**: `1` \| `0.5` \| `0.25` + +#### Returns + +`Promise`\<`void`\> + +#### Example + +```ts +await playground.show("style"); +await playground.show("toggle-result"); +await playground.show("result", { full: true }); +await playground.show("script"); +await playground.show("result", { zoom: 0.5 }); +await playground.show("console", { full: true }); +``` + +#### Defined in + +[models.ts:119](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L119) + +*** + +### watch + +> **watch**: [`WatchLoad`](../type-aliases/WatchLoad.md) & [`WatchReady`](../type-aliases/WatchReady.md) & [`WatchCode`](../type-aliases/WatchCode.md) & [`WatchConsole`](../type-aliases/WatchConsole.md) & [`WatchTests`](../type-aliases/WatchTests.md) & [`WatchDestroy`](../type-aliases/WatchDestroy.md) + +Allows to watch for various playground events. +It takes 2 arguments: event name and a callback function that will be called on every event. + +event name can be one of: `"load" | "ready" | "code" | "console" | "tests" | "destroy"` + +In some events, the callback function will be called with an object that supplies relevant data to the callback function (e.g. code, console output, test results). + +The watch method returns an object with a single method (`remove`), which when called will remove the callback from watching further events. + +See [docs](https://livecodes.io/docs/sdk/js-ts#watch) for details. + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then((playground) => { + const codeWatcher = playground.watch("code", ({ code, config }) => { + // this will run on every code change + console.log("code:", code); + console.log("config:", config); + }); + + const consoleWatcher = playground.watch("console", ({ method, args }) => { + // this will run on every console output + console[method](...args); + }); + + const testsWatcher = playground.watch("tests", ({ results }) => { + // this will run when tests run + results.forEach((testResult) => { + console.log("status:", testResult.status); // "pass", "fail" or "skip" + console.log(testResult.errors); // array of errors as strings + }); + }); + + // then later + codeWatcher.remove(); + consoleWatcher.remove(); + testsWatcher.remove(); + // events are no longer watched +}); +``` + +#### Defined in + +[models.ts:187](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L187) \ No newline at end of file diff --git a/docs/api/internal/interfaces/API/index.html b/docs/api/internal/interfaces/API/index.html new file mode 100644 index 0000000..d8018ca --- /dev/null +++ b/docs/api/internal/interfaces/API/index.html @@ -0,0 +1,200 @@ +Interface: API | LiveCodes
Skip to main content

Interface: API

+

Extended by​

+ +

Properties​

+

destroy()​

+
+

destroy: () => Promise<void>

+
+

Destroys the playground instance, and removes event listeners.

+

Further call to any SDK methods throws an error.

+

Returns​

+

Promise<void>

+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  await playground.destroy();
  // playground destroyed
  // any further SDK call throws an error
});
+

Defined in​

+

models.ts:211

+
+

exec()​

+
+

exec: (command, ...args) => Promise<object | object>

+
+

Executes custom commands, including: "setBroadcastToken" and "showVersion".

+

See docs for details.

+

Parameters​

+

• command: APICommands

+

• ...args: any[]

+

Returns​

+

Promise<object | object>

+

Defined in​

+

models.ts:194

+
+

format()​

+
+

format: (allEditors?) => Promise<void>

+
+

Formats the code.

+

By default, the code in all editors (markup, style and script) is formatted. +To format only the active editor, the value false should be passed as an argument.

+

Parameters​

+

• allEditors?: boolean

+

Returns​

+

Promise<void>

+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  await playground.format();
  // code in editors is formatted
});
+

Defined in​

+

models.ts:31

+
+

getCode()​

+
+

getCode: () => Promise<Code>

+
+

Gets the playground code (including source code, source language and compiled code) for each editor (markup, style, script), in addition to result page HTML.

+

See Code for the structure of the returned object.

+

Returns​

+

Promise<Code>

+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const code = await playground.getCode();

  // source code, language and compiled code for the script editor
  const { content, language, compiled } = code.script;

  // result page HTML
  const result = code.result;
});
+

Defined in​

+

models.ts:105

+
+

getConfig()​

+
+

getConfig: (contentOnly?) => Promise<Config>

+
+

Gets a configuration object representing the playground state.

+

This can be used to restore state if passed as an EmbedOptions property when creating playgrounds, +or can be manipulated and loaded in run-time using setConfig method.

+

Parameters​

+

• contentOnly?: boolean

+

Returns​

+

Promise<Config>

+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const config = await playground.getConfig();
});
+

Defined in​

+

models.ts:64

+
+

getShareUrl()​

+
+

getShareUrl: (shortUrl?) => Promise<string>

+
+

Gets a share url for the current project.

+

By default, the url has a long query string representing the compressed encoded config object. +If the argument shortUrl was set to true, a short url is generated.

+

Parameters​

+

• shortUrl?: boolean

+

Returns​

+

Promise<string>

+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const longUrl = await playground.getShareUrl();
  const shortUrl = await playground.getShareUrl(true);
});
+

Defined in​

+

models.ts:48

+
+

onChange()​

+
+

onChange: (fn) => object

+
+

Runs a callback function when code changes.

+

Parameters​

+

• fn

+

Returns​

+

object

+
remove()​
+
+

remove: () => void

+
+
Returns​
+

void

+

Deprecated​

+

Use watch method instead.

+

Defined in​

+

models.ts:142

+
+

run()​

+
+

run: () => Promise<void>

+
+

Runs the result page (after any required compilation for code).

+

Returns​

+

Promise<void>

+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  await playground.run();
  // new result page is displayed
});
+

Defined in​

+

models.ts:14

+
+

runTests()​

+
+

runTests: () => Promise<object>

+
+

Runs project tests (if present) and gets test results.

+

Returns​

+

Promise<object>

+
results​
+
+

results: TestResult[]

+
+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const { results } = await playground.runTests();
});
+

Defined in​

+

models.ts:135

+
+

setConfig()​

+
+

setConfig: (config) => Promise<Config>

+
+

Loads a new project using the passed configuration object.

+

Parameters​

+

• config: Partial<Config>

+

Returns​

+

Promise<Config>

+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const config = {
    markup: {
      language: "html",
      content: "Hello World!",
    },
  };
  const newConfig = await playground.setConfig(config);
  // new project loaded
});
+

Defined in​

+

models.ts:84

+
+

show()​

+
+

show: (panel, options?) => Promise<void>

+
+

Shows the selected panel.

+

See docs for details.

+

Parameters​

+

• panel: "result" | EditorId | "console" | "compiled" | "tests" | "editor" | "toggle-result"

+

• options?

+

• options.column?: number

+

• options.full?: boolean

+

• options.line?: number

+

• options.zoom?: 1 | 0.5 | 0.25

+

Returns​

+

Promise<void>

+

Example​

+
await playground.show("style");
await playground.show("toggle-result");
await playground.show("result", { full: true });
await playground.show("script");
await playground.show("result", { zoom: 0.5 });
await playground.show("console", { full: true });
+

Defined in​

+

models.ts:119

+
+

watch​

+
+

watch: WatchLoad & WatchReady & WatchCode & WatchConsole & WatchTests & WatchDestroy

+
+

Allows to watch for various playground events. +It takes 2 arguments: event name and a callback function that will be called on every event.

+

event name can be one of: "load" | "ready" | "code" | "console" | "tests" | "destroy"

+

In some events, the callback function will be called with an object that supplies relevant data to the callback function (e.g. code, console output, test results).

+

The watch method returns an object with a single method (remove), which when called will remove the callback from watching further events.

+

See docs for details.

+

Example​

+
import { createPlayground } from "livecodes";

createPlayground("#container").then((playground) => {
  const codeWatcher = playground.watch("code", ({ code, config }) => {
    // this will run on every code change
    console.log("code:", code);
    console.log("config:", config);
  });

  const consoleWatcher = playground.watch("console", ({ method, args }) => {
    // this will run on every console output
    console[method](...args);
  });

  const testsWatcher = playground.watch("tests", ({ results }) => {
    // this will run when tests run
    results.forEach((testResult) => {
      console.log("status:", testResult.status); // "pass", "fail" or "skip"
      console.log(testResult.errors); // array of errors as strings
    });
  });

  // then later
  codeWatcher.remove();
  consoleWatcher.remove();
  testsWatcher.remove();
  // events are no longer watched
});
+

Defined in​

+

models.ts:187

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/interfaces/AppConfig.html.md b/docs/api/internal/interfaces/AppConfig.html.md new file mode 100644 index 0000000..00bd931 --- /dev/null +++ b/docs/api/internal/interfaces/AppConfig.html.md @@ -0,0 +1,138 @@ +# Interface: AppConfig + +These are properties that define how the app behaves. + +## Extended by + +- [`Config`](../../interfaces/Config.md) + +## Properties + +### allowLangChange + +> **allowLangChange**: `boolean` + +If `false`, the UI will not show the menu that allows changing editor language. + +#### Default + +```ts +true +``` + +#### Defined in + +[models.ts:603](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L603) + +*** + +### mode + +> **mode**: `"focus"` \| `"full"` \| `"result"` \| `"editor"` \| `"lite"` \| `"simple"` \| `"codeblock"` + +Sets the [display mode](https://livecodes.io/docs/features/display-modes). + +#### Default + +```ts +"full" +``` + +#### Defined in + +[models.ts:615](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L615) + +*** + +### readonly + +> **readonly**: `boolean` + +If `true`, editors are loaded in read-only mode, where the user is not allowed to change the code. + +By default, when readonly is set to true, the light-weight code editor [CodeJar](https://livecodes.io/docs/features/editor-settings#code-editor) is used. +If you wish to use another editor, set the [editor](https://livecodes.io/docs/configuration/configuration-object#editor) property. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:597](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L597) + +*** + +### tools + +> **tools**: `Partial`\<`object`\> + +Sets enabled and active tools and status of [tools pane](https://livecodes.io/docs/features/tools-pane). + +#### Type declaration + +##### active + +> **active**: `""` \| `"console"` \| `"compiled"` \| `"tests"` + +##### enabled + +> **enabled**: `"all"` \| (`"console"` \| `"compiled"` \| `"tests"`)[] + +##### status + +> **status**: [`ToolsPaneStatus`](../type-aliases/ToolsPaneStatus.md) + +#### Default + +```ts +{ enabled: "all", active: "", status: "" } +``` + +#### Example + +```js +{ + "tools": { + "enabled": ["console", "compiled"], + "active": "console", + "status": "open" + } +} +``` + +#### Defined in + +[models.ts:631](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L631) + +*** + +### view? + +> `optional` **view**: `"split"` \| `"result"` \| `"editor"` + +Sets the [default view](https://livecodes.io/docs/features/default-view) for the playground. + +#### Default + +```ts +"split" +``` + +#### Defined in + +[models.ts:609](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L609) + +*** + +### zoom + +> **zoom**: `0.25` \| `0.5` \| `1` + +Sets result page [zoom level](https://livecodes.io/docs/features/result#result-page-zoom). + +#### Defined in + +[models.ts:640](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L640) \ No newline at end of file diff --git a/docs/api/internal/interfaces/AppConfig/index.html b/docs/api/internal/interfaces/AppConfig/index.html new file mode 100644 index 0000000..054b058 --- /dev/null +++ b/docs/api/internal/interfaces/AppConfig/index.html @@ -0,0 +1,91 @@ +Interface: AppConfig | LiveCodes
Skip to main content

Interface: AppConfig

+

These are properties that define how the app behaves.

+

Extended by​

+ +

Properties​

+

allowLangChange​

+
+

allowLangChange: boolean

+
+

If false, the UI will not show the menu that allows changing editor language.

+

Default​

+
true
+

Defined in​

+

models.ts:603

+
+

mode​

+
+

mode: "focus" | "full" | "result" | "editor" | "lite" | "simple" | "codeblock"

+
+

Sets the display mode.

+

Default​

+
"full"
+

Defined in​

+

models.ts:615

+
+

readonly​

+
+

readonly: boolean

+
+

If true, editors are loaded in read-only mode, where the user is not allowed to change the code.

+

By default, when readonly is set to true, the light-weight code editor CodeJar is used. +If you wish to use another editor, set the editor property.

+

Default​

+
false
+

Defined in​

+

models.ts:597

+
+

tools​

+
+

tools: Partial<object>

+
+

Sets enabled and active tools and status of tools pane.

+

Type declaration​

+
active​
+
+

active: "" | "console" | "compiled" | "tests"

+
+
enabled​
+
+

enabled: "all" | ("console" | "compiled" | "tests")[]

+
+
status​
+
+

status: ToolsPaneStatus

+
+

Default​

+
{ enabled: "all", active: "", status: "" }
+

Example​

+
{
  "tools": {
    "enabled": ["console", "compiled"],
    "active": "console",
    "status": "open"
  }
}
+

Defined in​

+

models.ts:631

+
+

view?​

+
+

optional view: "split" | "result" | "editor"

+
+

Sets the default view for the playground.

+

Default​

+
"split"
+

Defined in​

+

models.ts:609

+
+

zoom​

+
+

zoom: 0.25 | 0.5 | 1

+
+

Sets result page zoom level.

+

Defined in​

+

models.ts:640

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/interfaces/ContentConfig.html.md b/docs/api/internal/interfaces/ContentConfig.html.md new file mode 100644 index 0000000..5734de0 --- /dev/null +++ b/docs/api/internal/interfaces/ContentConfig.html.md @@ -0,0 +1,1555 @@ +# Interface: ContentConfig + +The properties that define the content of the current [project](https://livecodes.io/docs/features/projects). + +## Extended by + +- [`Config`](../../interfaces/Config.md) + +## Properties + +### activeEditor + +> **activeEditor**: `undefined` \| [`EditorId`](../type-aliases/EditorId.md) + +Selects the active editor to show. + +Defaults to the last used editor for user, otherwise `"markup"` + +#### Defined in + +[models.ts:455](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L455) + +*** + +### cssPreset + +> **cssPreset**: [`CssPresetId`](../type-aliases/CssPresetId.md) + +[CSS Preset](https://livecodes.io/docs/features/external-resources#css-presets) to use. + +#### Defined in + +[models.ts:502](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L502) + +*** + +### customSettings + +> **customSettings**: `object` + +Defines [custom settings](https://livecodes.io/docs/advanced/custom-settings) for the current project. + +#### adoc + +> **adoc**: `any` + +#### app.svelte + +> **svelte**: `any` + +#### app.vue + +> **vue**: `any` + +#### art + +> **art**: `any` + +#### art-template + +> **art-template**: `any` + +#### as + +> **as**: `any` + +#### asc + +> **asc**: `any` + +#### asciidoc + +> **asciidoc**: `any` + +#### assemblyscript + +> **assemblyscript**: `any` + +#### astro + +> **astro**: `any` + +#### autoprefixer + +> **autoprefixer**: `any` + +#### babel + +> **babel**: `any` + +#### bb + +> **bb**: `any` + +#### bbcode + +> **bbcode**: `any` + +#### Binary + +> **Binary**: `any` + +#### blockly + +> **blockly**: `any` + +#### blockly.xml + +> **xml**: `any` + +#### c + +> **c**: `any` + +#### C + +> **C**: `any` + +#### c++ + +> **c++**: `any` + +#### civet + +> **civet**: `any` + +#### clang + +> **clang**: `any` + +#### clang.cpp + +> **cpp**: `any` + +#### clio + +> **clio**: `any` + +#### clj + +> **clj**: `any` + +#### cljc + +> **cljc**: `any` + +#### cljs + +> **cljs**: `any` + +#### clojure + +> **clojure**: `any` + +#### clojurescript + +> **clojurescript**: `any` + +#### coffee + +> **coffee**: `any` + +#### coffeescript + +> **coffeescript**: `any` + +#### common-lisp + +> **common-lisp**: `any` + +#### commonlisp + +> **commonlisp**: `any` + +#### convertCommonjs? + +> `optional` **convertCommonjs**: `boolean` + +#### cp + +> **cp**: `any` + +#### cpp + +> **cpp**: `any` + +#### cpp-wasm + +> **cpp-wasm**: `any` + +#### cppm + +> **cppm**: `any` + +#### cppwasm + +> **cppwasm**: `any` + +#### cs + +> **cs**: `any` + +#### cs-wasm + +> **cs-wasm**: `any` + +#### csharp + +> **csharp**: `any` + +#### csharp-wasm + +> **csharp-wasm**: `any` + +#### css + +> **css**: `any` + +#### cssmodules + +> **cssmodules**: `any` + +#### cssnano + +> **cssnano**: `any` + +#### cwasm + +> **cwasm**: `any` + +#### cxx + +> **cxx**: `any` + +#### defaultCDN? + +> `optional` **defaultCDN**: [`CDN`](../type-aliases/CDN.md) + +#### diagram + +> **diagram**: `any` + +#### diagrams + +> **diagrams**: `any` + +#### dot + +> **dot**: `any` + +#### edn + +> **edn**: `any` + +#### ejs + +> **ejs**: `any` + +#### es + +> **es**: `any` + +#### eta + +> **eta**: `any` + +#### fennel + +> **fennel**: `any` + +#### flow + +> **flow**: `any` + +#### fnl + +> **fnl**: `any` + +#### gleam + +> **gleam**: `any` + +#### go + +> **go**: `any` + +#### golang + +> **golang**: `any` + +#### graph + +> **graph**: `any` + +#### h + +> **h**: `any` + +#### haml + +> **haml**: `any` + +#### handlebars + +> **handlebars**: `any` + +#### hbs + +> **hbs**: `any` + +#### hpp + +> **hpp**: `any` + +#### htm + +> **htm**: `any` + +#### html + +> **html**: `any` + +#### ii + +> **ii**: `any` + +#### imba + +> **imba**: `any` + +#### imports? + +> `optional` **imports**: `Record`\<`string`, `string`\> + +#### ixx + +> **ixx**: `any` + +#### jade + +> **jade**: `any` + +#### java + +> **java**: `any` + +#### javascript + +> **javascript**: `any` + +#### jinja + +> **jinja**: `any` + +#### jl + +> **jl**: `any` + +#### js + +> **js**: `any` + +#### json + +> **json**: `any` + +#### jsx + +> **jsx**: `any` + +#### julia + +> **julia**: `any` + +#### less + +> **less**: `any` + +#### lightningcss + +> **lightningcss**: `any` + +#### liquid + +> **liquid**: `any` + +#### liquidjs + +> **liquidjs**: `any` + +#### lisp + +> **lisp**: `any` + +#### livescript + +> **livescript**: `any` + +#### ls + +> **ls**: `any` + +#### lua + +> **lua**: `any` + +#### lua-wasm + +> **lua-wasm**: `any` + +#### luawasm + +> **luawasm**: `any` + +#### malina + +> **malina**: `any` + +#### malinajs + +> **malinajs**: `any` + +#### mapImports? + +> `optional` **mapImports**: `boolean` + +#### markdown + +> **markdown**: `any` + +#### md + +> **md**: `any` + +#### mdown + +> **mdown**: `any` + +#### mdx + +> **mdx**: `any` + +#### mjml + +> **mjml**: `any` + +#### mkdn + +> **mkdn**: `any` + +#### ml + +> **ml**: `any` + +#### mli + +> **mli**: `any` + +#### mustache + +> **mustache**: `any` + +#### njk + +> **njk**: `any` + +#### nunjucks + +> **nunjucks**: `any` + +#### ocaml + +> **ocaml**: `any` + +#### perl + +> **perl**: `any` + +#### pg + +> **pg**: `any` + +#### pg.sql + +> **sql**: `any` + +#### pglite + +> **pglite**: `any` + +#### pglite.sql + +> **sql**: `any` + +#### pgsql + +> **pgsql**: `any` + +#### pgsql.sql + +> **sql**: `any` + +#### php + +> **php**: `any` + +#### php-wasm + +> **php-wasm**: `any` + +#### phpwasm + +> **phpwasm**: `any` + +#### pintora + +> **pintora**: `any` + +#### pl + +> **pl**: `any` + +#### plt + +> **plt**: `any` + +#### pm + +> **pm**: `any` + +#### postcss + +> **postcss**: `any` + +#### postcssImportUrl + +> **postcssImportUrl**: `any` + +#### postcssPresetEnv + +> **postcssPresetEnv**: `any` + +#### postgre.sql + +> **sql**: `any` + +#### postgres + +> **postgres**: `any` + +#### postgresql + +> **postgresql**: `any` + +#### postgresql.sql + +> **sql**: `any` + +#### prolog + +> **prolog**: `any` + +#### prolog.pl + +> **pl**: `any` + +#### pug + +> **pug**: `any` + +#### purgecss + +> **purgecss**: `any` + +#### py + +> **py**: `any` + +#### py-wasm + +> **py-wasm**: `any` + +#### py3 + +> **py3**: `any` + +#### pyodide + +> **pyodide**: `any` + +#### python + +> **python**: `any` + +#### python-wasm + +> **python-wasm**: `any` + +#### pythonwasm + +> **pythonwasm**: `any` + +#### pywasm + +> **pywasm**: `any` + +#### r + +> **r**: `any` + +#### r-wasm + +> **r-wasm**: `any` + +#### rb + +> **rb**: `any` + +#### re + +> **re**: `any` + +#### react + +> **react**: `any` + +#### react-jsx + +> **react-jsx**: `any` + +#### react-native + +> **react-native**: `any` + +#### react-native-tsx + +> **react-native-tsx**: `any` + +#### react-native.jsx + +> **jsx**: `any` + +#### react-native.tsx + +> **tsx**: `any` + +#### react-tsx + +> **react-tsx**: `any` + +#### react.jsx + +> **jsx**: `any` + +#### react.tsx + +> **tsx**: `any` + +#### reason + +> **reason**: `any` + +#### rei + +> **rei**: `any` + +#### res + +> **res**: `any` + +#### rescript + +> **rescript**: `any` + +#### resi + +> **resi**: `any` + +#### rich + +> **rich**: `any` + +#### richtext + +> **richtext**: `any` + +#### riot + +> **riot**: `any` + +#### riotjs + +> **riotjs**: `any` + +#### rlang + +> **rlang**: `any` + +#### rstats + +> **rstats**: `any` + +#### rte + +> **rte**: `any` + +#### rte.html + +> **html**: `any` + +#### ruby + +> **ruby**: `any` + +#### ruby-wasm + +> **ruby-wasm**: `any` + +#### rubywasm + +> **rubywasm**: `any` + +#### sass + +> **sass**: `any` + +#### scheme + +> **scheme**: `any` + +#### scm + +> **scm**: `any` + +#### scriptType? + +> `optional` **scriptType**: `""` \| `"module"` \| `"text/liquid"` \| `"text/python"` \| `"text/r"` \| `"text/ruby-wasm"` \| `"text/x-uniter-php"` \| `"text/php-wasm"` \| `"text/cpp"` \| `"text/java"` \| `"text/csharp-wasm"` \| `"text/perl"` \| `"text/julia"` \| `"text/biwascheme"` \| `"text/commonlisp"` \| `"text/tcl"` \| `"text/prolog"` \| `"application/json"` \| `"application/lua"` \| `"text/fennel"` \| `"application/wasm-uint8"` \| `"application/javascript"` \| `"application/ecmascript"` \| `"text/javascript"` \| `"text/ecmascript"` + +#### scss + +> **scss**: `any` + +#### solid + +> **solid**: `any` + +#### solid.jsx + +> **jsx**: `any` + +#### solid.tsx + +> **tsx**: `any` + +#### sql + +> **sql**: `any` + +#### sqlite + +> **sqlite**: `any` + +#### sqlite3 + +> **sqlite3**: `any` + +#### stencil + +> **stencil**: `any` + +#### stencil.tsx + +> **tsx**: `any` + +#### styl + +> **styl**: `any` + +#### stylis + +> **stylis**: `any` + +#### stylus + +> **stylus**: `any` + +#### sucrase + +> **sucrase**: `any` + +#### svelte + +> **svelte**: `any` + +#### svelte-app + +> **svelte-app**: `any` + +#### tailwindcss + +> **tailwindcss**: `any` + +#### tcl + +> **tcl**: `any` + +#### teal + +> **teal**: `any` + +#### template? + +> `optional` **template**: `object` + +#### template.data? + +> `optional` **data**: `any` + +#### template.prerender? + +> `optional` **prerender**: `boolean` + +#### tl + +> **tl**: `any` + +#### tokencss + +> **tokencss**: `any` + +#### ts + +> **ts**: `any` + +#### tsx + +> **tsx**: `any` + +#### twig + +> **twig**: `any` + +#### types? + +> `optional` **types**: [`Types`](Types.md) + +#### typescript + +> **typescript**: `any` + +#### unocss + +> **unocss**: `any` + +#### vento + +> **vento**: `any` + +#### vto + +> **vto**: `any` + +#### vue + +> **vue**: `any` + +#### vue-app + +> **vue-app**: `any` + +#### vue2 + +> **vue2**: `any` + +#### vue3 + +> **vue3**: `any` + +#### wasm + +> **wasm**: `any` + +#### wasm.cpp + +> **cpp**: `any` + +#### wasm.cs + +> **cs**: `any` + +#### wasm.lua + +> **lua**: `any` + +#### wasm.php + +> **php**: `any` + +#### wasm.py + +> **py**: `any` + +#### wasm.rb + +> **rb**: `any` + +#### wast + +> **wast**: `any` + +#### wat + +> **wat**: `any` + +#### webassembly + +> **webassembly**: `any` + +#### windicss + +> **windicss**: `any` + +#### xht + +> **xht**: `any` + +#### xml + +> **xml**: `any` + +#### Defined in + +[models.ts:514](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L514) + +*** + +### description + +> **description**: `string` + +Project description. Used in [project](https://livecodes.io/docs/features/projects) search +and [result page](https://livecodes.io/docs/features/result) description meta tag. + +#### Default + +```ts +"" +``` + +#### Defined in + +[models.ts:425](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L425) + +*** + +### head + +> **head**: `string` + +Content added to the [result page](https://livecodes.io/docs/features/result) `` element. + +#### Default + +```ts +'\n' +``` + +#### Defined in + +[models.ts:431](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L431) + +*** + +### htmlAttrs + +> **htmlAttrs**: `string` \| `Record`\<`string`, `string`\> + +Attributes added to the [result page](https://livecodes.io/docs/features/result) `` element. +It can be an object or a string. + +#### Example + +```ts +{ lang: "en", class: "dark" } +'lang="en" class="dark"' +``` + +#### Defined in + +[models.ts:440](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L440) + +*** + +### imports + +> **imports**: `object` + +Allows specifying custom [import maps](https://github.com/WICG/import-maps) for [module imports](https://livecodes.io/docs/features/module-resolution#custom-module-resolution). + +**Example** + +Setting `imports` like this: +```js +"imports": { + "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js" +} +``` +results in the following import map: +```html + +``` +See docs for [Imports](https://livecodes.io/docs/configuration/configuration-object#imports) +and [Custom Module Resolution](https://livecodes.io/docs/features/module-resolution/#custom-module-resolution) + +#### Index Signature + + \[`key`: `string`\]: `string` + +#### Defined in + +[models.ts:540](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L540) + +*** + +### languages + +> **languages**: `undefined` \| (`"reason"` \| `"stylus"` \| `"r"` \| `"html"` \| `"ruby"` \| `"rb"` \| `"json"` \| `"teal"` \| `"solid"` \| `"flow"` \| `"dot"` \| `"as"` \| `"go"` \| `"htm"` \| `"markdown"` \| `"md"` \| `"mdown"` \| `"mkdn"` \| `"mdx"` \| `"astro"` \| `"pug"` \| `"jade"` \| `"haml"` \| `"asciidoc"` \| `"adoc"` \| `"asc"` \| `"mustache"` \| `"handlebars"` \| `"hbs"` \| `"ejs"` \| `"eta"` \| `"nunjucks"` \| `"njk"` \| `"liquid"` \| `"liquidjs"` \| `"twig"` \| `"vento"` \| `"vto"` \| `"art-template"` \| `"art"` \| `"jinja"` \| `"bbcode"` \| `"bb"` \| `"mjml"` \| `"diagrams"` \| `"diagram"` \| `"graph"` \| `"plt"` \| `"richtext"` \| `"rte"` \| `"rich"` \| `"rte.html"` \| `"css"` \| `"scss"` \| `"sass"` \| `"less"` \| `"styl"` \| `"stylis"` \| `"postcss"` \| `"javascript"` \| `"js"` \| `"babel"` \| `"es"` \| `"sucrase"` \| `"typescript"` \| `"ts"` \| `"jsx"` \| `"tsx"` \| `"react"` \| `"react-jsx"` \| `"react.jsx"` \| `"react-tsx"` \| `"react.tsx"` \| `"react-native"` \| `"react-native.jsx"` \| `"react-native-tsx"` \| `"react-native.tsx"` \| `"vue"` \| `"vue3"` \| `"vue2"` \| `"vue-app"` \| `"app.vue"` \| `"svelte"` \| `"svelte-app"` \| `"app.svelte"` \| `"stencil"` \| `"stencil.tsx"` \| `"solid.jsx"` \| `"solid.tsx"` \| `"riot"` \| `"riotjs"` \| `"malina"` \| `"malinajs"` \| `"xht"` \| `"coffeescript"` \| `"coffee"` \| `"livescript"` \| `"ls"` \| `"civet"` \| `"clio"` \| `"imba"` \| `"assemblyscript"` \| `"python"` \| `"py"` \| `"pyodide"` \| `"python-wasm"` \| `"py-wasm"` \| `"pythonwasm"` \| `"pywasm"` \| `"py3"` \| `"wasm.py"` \| `"rlang"` \| `"rstats"` \| `"r-wasm"` \| `"ruby-wasm"` \| `"wasm.rb"` \| `"rubywasm"` \| `"golang"` \| `"php"` \| `"php-wasm"` \| `"phpwasm"` \| `"wasm.php"` \| `"cpp"` \| `"c"` \| `"C"` \| `"cp"` \| `"cxx"` \| `"c++"` \| `"cppm"` \| `"ixx"` \| `"ii"` \| `"hpp"` \| `"h"` \| `"cpp-wasm"` \| `"cppwasm"` \| `"cwasm"` \| `"wasm.cpp"` \| `"clang"` \| `"clang.cpp"` \| `"java"` \| `"csharp"` \| `"csharp-wasm"` \| `"cs"` \| `"cs-wasm"` \| `"wasm.cs"` \| `"perl"` \| `"pl"` \| `"pm"` \| `"lua"` \| `"lua-wasm"` \| `"luawasm"` \| `"wasm.lua"` \| `"tl"` \| `"fennel"` \| `"fnl"` \| `"julia"` \| `"jl"` \| `"scheme"` \| `"scm"` \| `"commonlisp"` \| `"common-lisp"` \| `"lisp"` \| `"clojurescript"` \| `"clojure"` \| `"cljs"` \| `"clj"` \| `"cljc"` \| `"edn"` \| `"gleam"` \| `"rescript"` \| `"res"` \| `"resi"` \| `"re"` \| `"rei"` \| `"ocaml"` \| `"ml"` \| `"mli"` \| `"tcl"` \| `"wat"` \| `"wast"` \| `"webassembly"` \| `"wasm"` \| `"Binary"` \| `"sql"` \| `"sqlite"` \| `"sqlite3"` \| `"pg.sql"` \| `"pgsql.sql"` \| `"pgsql"` \| `"pg"` \| `"pglite"` \| `"pglite.sql"` \| `"postgresql"` \| `"postgres"` \| `"postgre.sql"` \| `"postgresql.sql"` \| `"prolog.pl"` \| `"prolog"` \| `"blockly"` \| `"blockly.xml"` \| `"xml"` \| `"pintora"` \| `"tailwindcss"` \| `"postcssImportUrl"` \| `"windicss"` \| `"unocss"` \| `"tokencss"` \| `"lightningcss"` \| `"autoprefixer"` \| `"postcssPresetEnv"` \| `"cssmodules"` \| `"purgecss"` \| `"cssnano"`)[] + +List of enabled languages. + +Defaults to all supported languages in full app and only current editor languages in [embeds](https://livecodes.io/docs/features/embeds). + +#### Defined in + +[models.ts:462](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L462) + +*** + +### markup + +> **markup**: `object` + +An object that configures the language and content of the markup editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +#### content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### language + +> **language**: [`Language`](../../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### position? + +> `optional` **position**: [`EditorPosition`](EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### Default + +```ts +{ language: "html", content: "" } +``` + +#### Defined in + +[models.ts:470](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L470) + +*** + +### processors + +> **processors**: [`Processor`](../type-aliases/Processor.md)[] + +List of enabled [CSS processors](https://livecodes.io/docs/features/css/#css-processors). + +For the list of available processors, see [Processor](https://livecodes.io/docs/api/internal/type-aliases/Processor) + +#### Defined in + +[models.ts:509](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L509) + +*** + +### script + +> **script**: `object` + +An object that configures the language and content of the script editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +#### content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### language + +> **language**: [`Language`](../../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### position? + +> `optional` **position**: [`EditorPosition`](EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### Default + +```ts +{ language: "javascript", content: "" } +``` + +#### Defined in + +[models.ts:486](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L486) + +*** + +### scripts + +> **scripts**: `string`[] + +List of URLs for [external scripts](https://livecodes.io/docs/features/external-resources) to add to the [result page](https://livecodes.io/docs/features/result). + +#### Defined in + +[models.ts:496](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L496) + +*** + +### style + +> **style**: `object` + +An object that configures the language and content of the style editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +#### content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### language + +> **language**: [`Language`](../../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### position? + +> `optional` **position**: [`EditorPosition`](EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### Default + +```ts +{ language: "css", content: "" } +``` + +#### Defined in + +[models.ts:478](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L478) + +*** + +### stylesheets + +> **stylesheets**: `string`[] + +List of URLs for [external stylesheets](https://livecodes.io/docs/features/external-resources) to add to the [result page](https://livecodes.io/docs/features/result). + +#### Defined in + +[models.ts:491](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L491) + +*** + +### tags + +> **tags**: `string`[] + +Project tags. +Used in [project](https://livecodes.io/docs/features/projects) filter and search. + +#### Default + +```ts +[] +``` + +#### Defined in + +[models.ts:447](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L447) + +*** + +### tests + +> **tests**: `undefined` \| `object` + +Configures the [language](https://livecodes.io/docs/features/tests#supported-languages) +and content of [tests](https://livecodes.io/docs/features/tests). + +#### Defined in + +[models.ts:576](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L576) + +*** + +### title + +> **title**: `string` + +Project title. +This is used as [result page](https://livecodes.io/docs/features/result) title and title meta tag. +Also used in project search. + +#### Default + +```ts +"Untitled Project" +``` + +#### Defined in + +[models.ts:418](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L418) + +*** + +### types + +> **types**: `object` + +Allows providing custom TypeScript type declarations for better [editor intellisense](https://livecodes.io/docs/features/intellisense). + +It is an object where each key represents module name and value represents the types. + +See docs for [Types](https://livecodes.io/docs/configuration/configuration-object#types) +and [Custom Types](https://livecodes.io/docs/features/intellisense#custom-types) + +#### Examples + +```js +{ + "types": { + "my-demo-lib": "https://my-custom-domain/my-type-declarations.d.ts" + } +} +``` + +``` +{ + "types": { + "my-demo-lib": { + "url": "https://my-custom-domain/types.d.ts", + "autoload": true, + "declareAsModule": true + } +} +``` + +#### Defined in + +[models.ts:570](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L570) + +*** + +### version + +> `readonly` **version**: `string` + +This is a read-only property which specifies the current LiveCodes version. + +Version specified in [exported](https://livecodes.io/docs/features/export) projects allows automatically upgrading the project configuration when imported by an app with a newer version. + +#### Defined in + +[models.ts:583](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L583) \ No newline at end of file diff --git a/docs/api/internal/interfaces/ContentConfig/index.html b/docs/api/internal/interfaces/ContentConfig/index.html new file mode 100644 index 0000000..c692b3a --- /dev/null +++ b/docs/api/internal/interfaces/ContentConfig/index.html @@ -0,0 +1,1313 @@ +Interface: ContentConfig | LiveCodes
Skip to main content

Interface: ContentConfig

+

The properties that define the content of the current project.

+

Extended by​

+ +

Properties​

+

activeEditor​

+
+

activeEditor: undefined | EditorId

+
+

Selects the active editor to show.

+

Defaults to the last used editor for user, otherwise "markup"

+

Defined in​

+

models.ts:455

+
+

cssPreset​

+
+

cssPreset: CssPresetId

+
+

CSS Preset to use.

+

Defined in​

+

models.ts:502

+
+

customSettings​

+
+

customSettings: object

+
+

Defines custom settings for the current project.

+

adoc​

+
+

adoc: any

+
+

app.svelte​

+
+

svelte: any

+
+

app.vue​

+
+

vue: any

+
+

art​

+
+

art: any

+
+

art-template​

+
+

art-template: any

+
+

as​

+
+

as: any

+
+

asc​

+
+

asc: any

+
+

asciidoc​

+
+

asciidoc: any

+
+

assemblyscript​

+
+

assemblyscript: any

+
+

astro​

+
+

astro: any

+
+

autoprefixer​

+
+

autoprefixer: any

+
+

babel​

+
+

babel: any

+
+

bb​

+
+

bb: any

+
+

bbcode​

+
+

bbcode: any

+
+

Binary​

+
+

Binary: any

+
+

blockly​

+
+

blockly: any

+
+

blockly.xml​

+
+

xml: any

+
+

c​

+
+

c: any

+
+

C​

+
+

C: any

+
+

c++​

+
+

c++: any

+
+

civet​

+
+

civet: any

+
+

clang​

+
+

clang: any

+
+

clang.cpp​

+
+

cpp: any

+
+

clio​

+
+

clio: any

+
+

clj​

+
+

clj: any

+
+

cljc​

+
+

cljc: any

+
+

cljs​

+
+

cljs: any

+
+

clojure​

+
+

clojure: any

+
+

clojurescript​

+
+

clojurescript: any

+
+

coffee​

+
+

coffee: any

+
+

coffeescript​

+
+

coffeescript: any

+
+

common-lisp​

+
+

common-lisp: any

+
+

commonlisp​

+
+

commonlisp: any

+
+

convertCommonjs?​

+
+

optional convertCommonjs: boolean

+
+

cp​

+
+

cp: any

+
+

cpp​

+
+

cpp: any

+
+

cpp-wasm​

+
+

cpp-wasm: any

+
+

cppm​

+
+

cppm: any

+
+

cppwasm​

+
+

cppwasm: any

+
+

cs​

+
+

cs: any

+
+

cs-wasm​

+
+

cs-wasm: any

+
+

csharp​

+
+

csharp: any

+
+

csharp-wasm​

+
+

csharp-wasm: any

+
+

css​

+
+

css: any

+
+

cssmodules​

+
+

cssmodules: any

+
+

cssnano​

+
+

cssnano: any

+
+

cwasm​

+
+

cwasm: any

+
+

cxx​

+
+

cxx: any

+
+

defaultCDN?​

+
+

optional defaultCDN: CDN

+
+

diagram​

+
+

diagram: any

+
+

diagrams​

+
+

diagrams: any

+
+

dot​

+
+

dot: any

+
+

edn​

+
+

edn: any

+
+

ejs​

+
+

ejs: any

+
+

es​

+
+

es: any

+
+

eta​

+
+

eta: any

+
+

fennel​

+
+

fennel: any

+
+

flow​

+
+

flow: any

+
+

fnl​

+
+

fnl: any

+
+

gleam​

+
+

gleam: any

+
+

go​

+
+

go: any

+
+

golang​

+
+

golang: any

+
+

graph​

+
+

graph: any

+
+

h​

+
+

h: any

+
+

haml​

+
+

haml: any

+
+

handlebars​

+
+

handlebars: any

+
+

hbs​

+
+

hbs: any

+
+

hpp​

+
+

hpp: any

+
+

htm​

+
+

htm: any

+
+

html​

+
+

html: any

+
+

ii​

+
+

ii: any

+
+

imba​

+
+

imba: any

+
+

imports?​

+
+

optional imports: Record<string, string>

+
+

ixx​

+
+

ixx: any

+
+

jade​

+
+

jade: any

+
+

java​

+
+

java: any

+
+

javascript​

+
+

javascript: any

+
+

jinja​

+
+

jinja: any

+
+

jl​

+
+

jl: any

+
+

js​

+
+

js: any

+
+

json​

+
+

json: any

+
+

jsx​

+
+

jsx: any

+
+

julia​

+
+

julia: any

+
+

less​

+
+

less: any

+
+

lightningcss​

+
+

lightningcss: any

+
+

liquid​

+
+

liquid: any

+
+

liquidjs​

+
+

liquidjs: any

+
+

lisp​

+
+

lisp: any

+
+

livescript​

+
+

livescript: any

+
+

ls​

+
+

ls: any

+
+

lua​

+
+

lua: any

+
+

lua-wasm​

+
+

lua-wasm: any

+
+

luawasm​

+
+

luawasm: any

+
+

malina​

+
+

malina: any

+
+

malinajs​

+
+

malinajs: any

+
+

mapImports?​

+
+

optional mapImports: boolean

+
+

markdown​

+
+

markdown: any

+
+

md​

+
+

md: any

+
+

mdown​

+
+

mdown: any

+
+

mdx​

+
+

mdx: any

+
+

mjml​

+
+

mjml: any

+
+

mkdn​

+
+

mkdn: any

+
+

ml​

+
+

ml: any

+
+

mli​

+
+

mli: any

+
+

mustache​

+
+

mustache: any

+
+

njk​

+
+

njk: any

+
+

nunjucks​

+
+

nunjucks: any

+
+

ocaml​

+
+

ocaml: any

+
+

perl​

+
+

perl: any

+
+

pg​

+
+

pg: any

+
+

pg.sql​

+
+

sql: any

+
+

pglite​

+
+

pglite: any

+
+

pglite.sql​

+
+

sql: any

+
+

pgsql​

+
+

pgsql: any

+
+

pgsql.sql​

+
+

sql: any

+
+

php​

+
+

php: any

+
+

php-wasm​

+
+

php-wasm: any

+
+

phpwasm​

+
+

phpwasm: any

+
+

pintora​

+
+

pintora: any

+
+

pl​

+
+

pl: any

+
+

plt​

+
+

plt: any

+
+

pm​

+
+

pm: any

+
+

postcss​

+
+

postcss: any

+
+

postcssImportUrl​

+
+

postcssImportUrl: any

+
+

postcssPresetEnv​

+
+

postcssPresetEnv: any

+
+

postgre.sql​

+
+

sql: any

+
+

postgres​

+
+

postgres: any

+
+

postgresql​

+
+

postgresql: any

+
+

postgresql.sql​

+
+

sql: any

+
+

prolog​

+
+

prolog: any

+
+

prolog.pl​

+
+

pl: any

+
+

pug​

+
+

pug: any

+
+

purgecss​

+
+

purgecss: any

+
+

py​

+
+

py: any

+
+

py-wasm​

+
+

py-wasm: any

+
+

py3​

+
+

py3: any

+
+

pyodide​

+
+

pyodide: any

+
+

python​

+
+

python: any

+
+

python-wasm​

+
+

python-wasm: any

+
+

pythonwasm​

+
+

pythonwasm: any

+
+

pywasm​

+
+

pywasm: any

+
+

r​

+
+

r: any

+
+

r-wasm​

+
+

r-wasm: any

+
+

rb​

+
+

rb: any

+
+

re​

+
+

re: any

+
+

react​

+
+

react: any

+
+

react-jsx​

+
+

react-jsx: any

+
+

react-native​

+
+

react-native: any

+
+

react-native-tsx​

+
+

react-native-tsx: any

+
+

react-native.jsx​

+
+

jsx: any

+
+

react-native.tsx​

+
+

tsx: any

+
+

react-tsx​

+
+

react-tsx: any

+
+

react.jsx​

+
+

jsx: any

+
+

react.tsx​

+
+

tsx: any

+
+

reason​

+
+

reason: any

+
+

rei​

+
+

rei: any

+
+

res​

+
+

res: any

+
+

rescript​

+
+

rescript: any

+
+

resi​

+
+

resi: any

+
+

rich​

+
+

rich: any

+
+

richtext​

+
+

richtext: any

+
+

riot​

+
+

riot: any

+
+

riotjs​

+
+

riotjs: any

+
+

rlang​

+
+

rlang: any

+
+

rstats​

+
+

rstats: any

+
+

rte​

+
+

rte: any

+
+

rte.html​

+
+

html: any

+
+

ruby​

+
+

ruby: any

+
+

ruby-wasm​

+
+

ruby-wasm: any

+
+

rubywasm​

+
+

rubywasm: any

+
+

sass​

+
+

sass: any

+
+

scheme​

+
+

scheme: any

+
+

scm​

+
+

scm: any

+
+

scriptType?​

+
+

optional scriptType: "" | "module" | "text/liquid" | "text/python" | "text/r" | "text/ruby-wasm" | "text/x-uniter-php" | "text/php-wasm" | "text/cpp" | "text/java" | "text/csharp-wasm" | "text/perl" | "text/julia" | "text/biwascheme" | "text/commonlisp" | "text/tcl" | "text/prolog" | "application/json" | "application/lua" | "text/fennel" | "application/wasm-uint8" | "application/javascript" | "application/ecmascript" | "text/javascript" | "text/ecmascript"

+
+

scss​

+
+

scss: any

+
+

solid​

+
+

solid: any

+
+

solid.jsx​

+
+

jsx: any

+
+

solid.tsx​

+
+

tsx: any

+
+

sql​

+
+

sql: any

+
+

sqlite​

+
+

sqlite: any

+
+

sqlite3​

+
+

sqlite3: any

+
+

stencil​

+
+

stencil: any

+
+

stencil.tsx​

+
+

tsx: any

+
+

styl​

+
+

styl: any

+
+

stylis​

+
+

stylis: any

+
+

stylus​

+
+

stylus: any

+
+

sucrase​

+
+

sucrase: any

+
+

svelte​

+
+

svelte: any

+
+

svelte-app​

+
+

svelte-app: any

+
+

tailwindcss​

+
+

tailwindcss: any

+
+

tcl​

+
+

tcl: any

+
+

teal​

+
+

teal: any

+
+

template?​

+
+

optional template: object

+
+

template.data?​

+
+

optional data: any

+
+

template.prerender?​

+
+

optional prerender: boolean

+
+

tl​

+
+

tl: any

+
+

tokencss​

+
+

tokencss: any

+
+

ts​

+
+

ts: any

+
+

tsx​

+
+

tsx: any

+
+

twig​

+
+

twig: any

+
+

types?​

+
+

optional types: Types

+
+

typescript​

+
+

typescript: any

+
+

unocss​

+
+

unocss: any

+
+

vento​

+
+

vento: any

+
+

vto​

+
+

vto: any

+
+

vue​

+
+

vue: any

+
+

vue-app​

+
+

vue-app: any

+
+

vue2​

+
+

vue2: any

+
+

vue3​

+
+

vue3: any

+
+

wasm​

+
+

wasm: any

+
+

wasm.cpp​

+
+

cpp: any

+
+

wasm.cs​

+
+

cs: any

+
+

wasm.lua​

+
+

lua: any

+
+

wasm.php​

+
+

php: any

+
+

wasm.py​

+
+

py: any

+
+

wasm.rb​

+
+

rb: any

+
+

wast​

+
+

wast: any

+
+

wat​

+
+

wat: any

+
+

webassembly​

+
+

webassembly: any

+
+

windicss​

+
+

windicss: any

+
+

xht​

+
+

xht: any

+
+

xml​

+
+

xml: any

+
+

Defined in​

+

models.ts:514

+
+

description​

+
+

description: string

+
+

Project description. Used in project search +and result page description meta tag.

+

Default​

+
""
+

Defined in​

+

models.ts:425

+
+ +
+

head: string

+
+

Content added to the result page <head> element.

+

Default​

+
'<meta charset="UTF-8" />\n<meta name="viewport" content="width=device-width, initial-scale=1.0" />'
+

Defined in​

+

models.ts:431

+
+

htmlAttrs​

+
+

htmlAttrs: string | Record<string, string>

+
+

Attributes added to the result page <html> element. +It can be an object or a string.

+

Example​

+
{ lang: "en", class: "dark" }
'lang="en" class="dark"'
+

Defined in​

+

models.ts:440

+
+

imports​

+
+

imports: object

+
+

Allows specifying custom import maps for module imports.

+

Example

+

Setting imports like this:

+
"imports": {
  "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"
}
+

results in the following import map:

+
<script type="importmap">
  {
    "imports": {
      "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"
    }
  }
</script>
+

See docs for Imports +and Custom Module Resolution

+

Index Signature​

+

[key: string]: string

+

Defined in​

+

models.ts:540

+
+

languages​

+
+

languages: undefined | ("reason" | "stylus" | "r" | "html" | "ruby" | "rb" | "json" | "teal" | "solid" | "flow" | "dot" | "as" | "go" | "htm" | "markdown" | "md" | "mdown" | "mkdn" | "mdx" | "astro" | "pug" | "jade" | "haml" | "asciidoc" | "adoc" | "asc" | "mustache" | "handlebars" | "hbs" | "ejs" | "eta" | "nunjucks" | "njk" | "liquid" | "liquidjs" | "twig" | "vento" | "vto" | "art-template" | "art" | "jinja" | "bbcode" | "bb" | "mjml" | "diagrams" | "diagram" | "graph" | "plt" | "richtext" | "rte" | "rich" | "rte.html" | "css" | "scss" | "sass" | "less" | "styl" | "stylis" | "postcss" | "javascript" | "js" | "babel" | "es" | "sucrase" | "typescript" | "ts" | "jsx" | "tsx" | "react" | "react-jsx" | "react.jsx" | "react-tsx" | "react.tsx" | "react-native" | "react-native.jsx" | "react-native-tsx" | "react-native.tsx" | "vue" | "vue3" | "vue2" | "vue-app" | "app.vue" | "svelte" | "svelte-app" | "app.svelte" | "stencil" | "stencil.tsx" | "solid.jsx" | "solid.tsx" | "riot" | "riotjs" | "malina" | "malinajs" | "xht" | "coffeescript" | "coffee" | "livescript" | "ls" | "civet" | "clio" | "imba" | "assemblyscript" | "python" | "py" | "pyodide" | "python-wasm" | "py-wasm" | "pythonwasm" | "pywasm" | "py3" | "wasm.py" | "rlang" | "rstats" | "r-wasm" | "ruby-wasm" | "wasm.rb" | "rubywasm" | "golang" | "php" | "php-wasm" | "phpwasm" | "wasm.php" | "cpp" | "c" | "C" | "cp" | "cxx" | "c++" | "cppm" | "ixx" | "ii" | "hpp" | "h" | "cpp-wasm" | "cppwasm" | "cwasm" | "wasm.cpp" | "clang" | "clang.cpp" | "java" | "csharp" | "csharp-wasm" | "cs" | "cs-wasm" | "wasm.cs" | "perl" | "pl" | "pm" | "lua" | "lua-wasm" | "luawasm" | "wasm.lua" | "tl" | "fennel" | "fnl" | "julia" | "jl" | "scheme" | "scm" | "commonlisp" | "common-lisp" | "lisp" | "clojurescript" | "clojure" | "cljs" | "clj" | "cljc" | "edn" | "gleam" | "rescript" | "res" | "resi" | "re" | "rei" | "ocaml" | "ml" | "mli" | "tcl" | "wat" | "wast" | "webassembly" | "wasm" | "Binary" | "sql" | "sqlite" | "sqlite3" | "pg.sql" | "pgsql.sql" | "pgsql" | "pg" | "pglite" | "pglite.sql" | "postgresql" | "postgres" | "postgre.sql" | "postgresql.sql" | "prolog.pl" | "prolog" | "blockly" | "blockly.xml" | "xml" | "pintora" | "tailwindcss" | "postcssImportUrl" | "windicss" | "unocss" | "tokencss" | "lightningcss" | "autoprefixer" | "postcssPresetEnv" | "cssmodules" | "purgecss" | "cssnano")[]

+
+

List of enabled languages.

+

Defaults to all supported languages in full app and only current editor languages in embeds.

+

Defined in​

+

models.ts:462

+
+

markup​

+
+

markup: object

+
+

An object that configures the language and content of the markup editor.

+

See docs for details.

+

content?​

+
+

optional content: string

+
+

The initial content of the code editor.

+
Default​
+
""
+

contentUrl?​

+
+

optional contentUrl: string

+
+

A URL to load content from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if content property had no value.

+

foldedLines?​

+
+

optional foldedLines: object[]

+
+

Lines that get folded when the editor loads.

+

This can be used for less relevant content.

+
Example​
+
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
+

hiddenContent?​

+
+

optional hiddenContent: string

+
+

Hidden content that gets evaluated without being visible in the code editor.

+

This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)

+

hiddenContentUrl?​

+
+

optional hiddenContentUrl: string

+
+

A URL to load hiddenContent from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if hiddenContent property had no value.

+

hideTitle?​

+
+

optional hideTitle: boolean

+
+

If true, the title of the code editor is hidden, however its code is still evaluated.

+

This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).

+

language​

+
+

language: Language

+
+

A language name, extension or alias (as defined in language documentations).

+

For the list of supported values, see Language

+

order?​

+
+

optional order: number

+
+

The order of the editor in the UI.

+
Default​
+
0
+

position?​

+
+

optional position: EditorPosition

+
+

The initial position of the cursor in the code editor.

+
Example​
+
{lineNumber: 5, column: 10}
+

selector?​

+
+

optional selector: string

+
+

A CSS selector to load content from DOM import.

+

title?​

+
+

optional title: string

+
+

If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. "Python" can be used instead of "Py (Wasm)").

+

Default​

+
{ language: "html", content: "" }
+

Defined in​

+

models.ts:470

+
+

processors​

+
+

processors: Processor[]

+
+

List of enabled CSS processors.

+

For the list of available processors, see Processor

+

Defined in​

+

models.ts:509

+
+

script​

+
+

script: object

+
+

An object that configures the language and content of the script editor.

+

See docs for details.

+

content?​

+
+

optional content: string

+
+

The initial content of the code editor.

+
Default​
+
""
+

contentUrl?​

+
+

optional contentUrl: string

+
+

A URL to load content from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if content property had no value.

+

foldedLines?​

+
+

optional foldedLines: object[]

+
+

Lines that get folded when the editor loads.

+

This can be used for less relevant content.

+
Example​
+
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
+

hiddenContent?​

+
+

optional hiddenContent: string

+
+

Hidden content that gets evaluated without being visible in the code editor.

+

This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)

+

hiddenContentUrl?​

+
+

optional hiddenContentUrl: string

+
+

A URL to load hiddenContent from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if hiddenContent property had no value.

+

hideTitle?​

+
+

optional hideTitle: boolean

+
+

If true, the title of the code editor is hidden, however its code is still evaluated.

+

This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).

+

language​

+
+

language: Language

+
+

A language name, extension or alias (as defined in language documentations).

+

For the list of supported values, see Language

+

order?​

+
+

optional order: number

+
+

The order of the editor in the UI.

+
Default​
+
0
+

position?​

+
+

optional position: EditorPosition

+
+

The initial position of the cursor in the code editor.

+
Example​
+
{lineNumber: 5, column: 10}
+

selector?​

+
+

optional selector: string

+
+

A CSS selector to load content from DOM import.

+

title?​

+
+

optional title: string

+
+

If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. "Python" can be used instead of "Py (Wasm)").

+

Default​

+
{ language: "javascript", content: "" }
+

Defined in​

+

models.ts:486

+
+

scripts​

+
+

scripts: string[]

+
+

List of URLs for external scripts to add to the result page.

+

Defined in​

+

models.ts:496

+
+

style​

+
+

style: object

+
+

An object that configures the language and content of the style editor.

+

See docs for details.

+

content?​

+
+

optional content: string

+
+

The initial content of the code editor.

+
Default​
+
""
+

contentUrl?​

+
+

optional contentUrl: string

+
+

A URL to load content from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if content property had no value.

+

foldedLines?​

+
+

optional foldedLines: object[]

+
+

Lines that get folded when the editor loads.

+

This can be used for less relevant content.

+
Example​
+
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
+

hiddenContent?​

+
+

optional hiddenContent: string

+
+

Hidden content that gets evaluated without being visible in the code editor.

+

This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)

+

hiddenContentUrl?​

+
+

optional hiddenContentUrl: string

+
+

A URL to load hiddenContent from. It has to be a valid URL that is CORS-enabled.

+

The URL is only fetched if hiddenContent property had no value.

+

hideTitle?​

+
+

optional hideTitle: boolean

+
+

If true, the title of the code editor is hidden, however its code is still evaluated.

+

This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).

+

language​

+
+

language: Language

+
+

A language name, extension or alias (as defined in language documentations).

+

For the list of supported values, see Language

+

order?​

+
+

optional order: number

+
+

The order of the editor in the UI.

+
Default​
+
0
+

position?​

+
+

optional position: EditorPosition

+
+

The initial position of the cursor in the code editor.

+
Example​
+
{lineNumber: 5, column: 10}
+

selector?​

+
+

optional selector: string

+
+

A CSS selector to load content from DOM import.

+

title?​

+
+

optional title: string

+
+

If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. "Python" can be used instead of "Py (Wasm)").

+

Default​

+
{ language: "css", content: "" }
+

Defined in​

+

models.ts:478

+
+

stylesheets​

+
+

stylesheets: string[]

+
+

List of URLs for external stylesheets to add to the result page.

+

Defined in​

+

models.ts:491

+
+

tags​

+
+

tags: string[]

+
+

Project tags. +Used in project filter and search.

+

Default​

+
[]
+

Defined in​

+

models.ts:447

+
+

tests​

+
+

tests: undefined | object

+
+

Configures the language +and content of tests.

+

Defined in​

+

models.ts:576

+
+

title​

+
+

title: string

+
+

Project title. +This is used as result page title and title meta tag. +Also used in project search.

+

Default​

+
"Untitled Project"
+

Defined in​

+

models.ts:418

+
+

types​

+
+

types: object

+
+

Allows providing custom TypeScript type declarations for better editor intellisense.

+

It is an object where each key represents module name and value represents the types.

+

See docs for Types +and Custom Types

+

Examples​

+
{
  "types": {
    "my-demo-lib": "https://my-custom-domain/my-type-declarations.d.ts"
  }
}
+
{
  "types": {
    "my-demo-lib": {
      "url": "https://my-custom-domain/types.d.ts",
      "autoload": true,
      "declareAsModule": true
    }
}
+

Defined in​

+

models.ts:570

+
+

version​

+
+

readonly version: string

+
+

This is a read-only property which specifies the current LiveCodes version.

+

Version specified in exported projects allows automatically upgrading the project configuration when imported by an app with a newer version.

+

Defined in​

+

models.ts:583

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/interfaces/EditorConfig.html.md b/docs/api/internal/interfaces/EditorConfig.html.md new file mode 100644 index 0000000..ad1a555 --- /dev/null +++ b/docs/api/internal/interfaces/EditorConfig.html.md @@ -0,0 +1,294 @@ +# Interface: EditorConfig + +## Extended by + +- [`UserConfig`](UserConfig.md) + +## Properties + +### closeBrackets + +> **closeBrackets**: `boolean` + +Use auto-complete to close brackets and quotes. + +#### Default + +```ts +true +``` + +#### Defined in + +[models.ts:801](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L801) + +*** + +### editor + +> **editor**: `undefined` \| `"auto"` \| `"monaco"` \| `"codemirror"` \| `"codejar"` + +Selects the [code editor](https://livecodes.io/docs/features/editor-settings#code-editor) to use. + +If `undefined` (the default), Monaco editor is used on desktop, +CodeMirror is used on mobile and in `simple` mode, +while CodeJar is used in `codeblock` mode, in `lite` mode and in `readonly` playgrounds. + +If set to `auto`, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings. + +#### Default + +```ts +undefined +``` + +#### Defined in + +[models.ts:722](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L722) + +*** + +### editorMode + +> **editorMode**: `undefined` \| `"vim"` \| `"emacs"` + +Sets [editor mode](https://livecodes.io/docs/features/editor-settings#editor-modes). + +#### Defined in + +[models.ts:812](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L812) + +*** + +### editorTheme + +> **editorTheme**: `undefined` \| `string` \| [`EditorTheme`](../type-aliases/EditorTheme.md)[] + +Sets the [code editor](https://livecodes.io/docs/features/editor-settings) themes. + +See docs for [editor themes](https://livecodes.io/docs/configuration/configuration-object#editortheme) for details. + +#### Examples + +```ts +"vs" +``` + +```ts +"monaco:twilight, codemirror:one-dark" +``` + +```ts +["vs@light"] +``` + +```ts +["vs@light", "vs-dark@dark"] +``` + +```ts +["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"] +``` + +#### Defined in + +[models.ts:748](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L748) + +*** + +### emmet + +> **emmet**: `boolean` + +Enables [Emmet](https://livecodes.io/docs/features/editor-settings#emmet). + +#### Default + +```ts +true +``` + +#### Defined in + +[models.ts:807](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L807) + +*** + +### enableAI + +> **enableAI**: `boolean` + +If `true`, [AI code assistant](https://livecodes.io/docs/features/ai) is enabled. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:818](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L818) + +*** + +### foldRegions + +> **foldRegions**: `boolean` + +When set to `true`, regions marked by `#region` and `#endregion` comments are folded when the project is loaded. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:795](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L795) + +*** + +### fontFamily + +> **fontFamily**: `undefined` \| `string` + +Sets the [code editor](https://livecodes.io/docs/features/editor-settings) font family. + +#### Defined in + +[models.ts:753](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L753) + +*** + +### fontSize + +> **fontSize**: `undefined` \| `number` + +Sets the font size. + +If `undefined` (the default), the font size is set to 14 for the full app and 12 for [embeds](https://livecodes.io/docs/features/embeds). + +#### Default + +```ts +undefined +``` + +#### Defined in + +[models.ts:761](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L761) + +*** + +### lineNumbers + +> **lineNumbers**: `boolean` \| `"relative"` + +Show line numbers in [code editor](https://livecodes.io/docs/features/editor-settings). + +#### Default + +```ts +true +``` + +#### Defined in + +[models.ts:783](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L783) + +*** + +### tabSize + +> **tabSize**: `number` + +The number of spaces per indentation-level. + +Also used in [code formatting](https://livecodes.io/docs/features/code-format). + +#### Default + +```ts +2 +``` + +#### Defined in + +[models.ts:777](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L777) + +*** + +### theme + +> **theme**: [`Theme`](../type-aliases/Theme.md) + +Sets the app [theme](https://livecodes.io/docs/features/themes) to light/dark mode. + +#### Default + +```ts +"dark" +``` + +#### Defined in + +[models.ts:728](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L728) + +*** + +### themeColor + +> **themeColor**: `undefined` \| `string` + +Sets the app theme color. +If `undefined`, it is set to `"hsl(214, 40%, 50%)"`. + +#### Default + +```ts +undefined +``` + +#### Defined in + +[models.ts:735](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L735) + +*** + +### useTabs + +> **useTabs**: `boolean` + +If `true`, lines are indented with tabs instead of spaces. + +Also used in [code formatting](https://livecodes.io/docs/features/code-format). + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:769](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L769) + +*** + +### wordWrap + +> **wordWrap**: `boolean` + +Enables word-wrap for long lines. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:789](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L789) \ No newline at end of file diff --git a/docs/api/internal/interfaces/EditorConfig/index.html b/docs/api/internal/interfaces/EditorConfig/index.html new file mode 100644 index 0000000..94c957f --- /dev/null +++ b/docs/api/internal/interfaces/EditorConfig/index.html @@ -0,0 +1,174 @@ +Interface: EditorConfig | LiveCodes
Skip to main content

Interface: EditorConfig

+

Extended by​

+ +

Properties​

+

closeBrackets​

+
+

closeBrackets: boolean

+
+

Use auto-complete to close brackets and quotes.

+

Default​

+
true
+

Defined in​

+

models.ts:801

+
+

editor​

+
+

editor: undefined | "auto" | "monaco" | "codemirror" | "codejar"

+
+

Selects the code editor to use.

+

If undefined (the default), Monaco editor is used on desktop, +CodeMirror is used on mobile and in simple mode, +while CodeJar is used in codeblock mode, in lite mode and in readonly playgrounds.

+

If set to auto, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings.

+

Default​

+
undefined
+

Defined in​

+

models.ts:722

+
+

editorMode​

+
+

editorMode: undefined | "vim" | "emacs"

+
+

Sets editor mode.

+

Defined in​

+

models.ts:812

+
+

editorTheme​

+
+

editorTheme: undefined | string | EditorTheme[]

+
+

Sets the code editor themes.

+

See docs for editor themes for details.

+

Examples​

+
"vs"
+
"monaco:twilight, codemirror:one-dark"
+
["vs@light"]
+
["vs@light", "vs-dark@dark"]
+
["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]
+

Defined in​

+

models.ts:748

+
+

emmet​

+
+

emmet: boolean

+
+

Enables Emmet.

+

Default​

+
true
+

Defined in​

+

models.ts:807

+
+

enableAI​

+
+

enableAI: boolean

+
+

If true, AI code assistant is enabled.

+

Default​

+
false
+

Defined in​

+

models.ts:818

+
+

foldRegions​

+
+

foldRegions: boolean

+
+

When set to true, regions marked by #region and #endregion comments are folded when the project is loaded.

+

Default​

+
false
+

Defined in​

+

models.ts:795

+
+

fontFamily​

+
+

fontFamily: undefined | string

+
+

Sets the code editor font family.

+

Defined in​

+

models.ts:753

+
+

fontSize​

+
+

fontSize: undefined | number

+
+

Sets the font size.

+

If undefined (the default), the font size is set to 14 for the full app and 12 for embeds.

+

Default​

+
undefined
+

Defined in​

+

models.ts:761

+
+

lineNumbers​

+
+

lineNumbers: boolean | "relative"

+
+

Show line numbers in code editor.

+

Default​

+
true
+

Defined in​

+

models.ts:783

+
+

tabSize​

+
+

tabSize: number

+
+

The number of spaces per indentation-level.

+

Also used in code formatting.

+

Default​

+
2
+

Defined in​

+

models.ts:777

+
+

theme​

+
+

theme: Theme

+
+

Sets the app theme to light/dark mode.

+

Default​

+
"dark"
+

Defined in​

+

models.ts:728

+
+

themeColor​

+
+

themeColor: undefined | string

+
+

Sets the app theme color. +If undefined, it is set to "hsl(214, 40%, 50%)".

+

Default​

+
undefined
+

Defined in​

+

models.ts:735

+
+

useTabs​

+
+

useTabs: boolean

+
+

If true, lines are indented with tabs instead of spaces.

+

Also used in code formatting.

+

Default​

+
false
+

Defined in​

+

models.ts:769

+
+

wordWrap​

+
+

wordWrap: boolean

+
+

Enables word-wrap for long lines.

+

Default​

+
false
+

Defined in​

+

models.ts:789

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/interfaces/EditorPosition.html.md b/docs/api/internal/interfaces/EditorPosition.html.md new file mode 100644 index 0000000..a9c092c --- /dev/null +++ b/docs/api/internal/interfaces/EditorPosition.html.md @@ -0,0 +1,21 @@ +# Interface: EditorPosition + +## Properties + +### column? + +> `optional` **column**: `number` + +#### Defined in + +[models.ts:1165](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1165) + +*** + +### lineNumber + +> **lineNumber**: `number` + +#### Defined in + +[models.ts:1164](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1164) \ No newline at end of file diff --git a/docs/api/internal/interfaces/EditorPosition/index.html b/docs/api/internal/interfaces/EditorPosition/index.html new file mode 100644 index 0000000..0a3830f --- /dev/null +++ b/docs/api/internal/interfaces/EditorPosition/index.html @@ -0,0 +1,25 @@ +Interface: EditorPosition | LiveCodes
Skip to main content
+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/interfaces/FormatterConfig.html.md b/docs/api/internal/interfaces/FormatterConfig.html.md new file mode 100644 index 0000000..3f80216 --- /dev/null +++ b/docs/api/internal/interfaces/FormatterConfig.html.md @@ -0,0 +1,95 @@ +# Interface: FormatterConfig + +## Extended by + +- [`UserConfig`](UserConfig.md) + +## Properties + +### semicolons + +> **semicolons**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use semi-colons. + +#### Default + +```ts +true +``` + +#### Defined in + +[models.ts:838](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L838) + +*** + +### singleQuote + +> **singleQuote**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use single quotes instead of double quotes. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:843](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L843) + +*** + +### tabSize + +> **tabSize**: `number` + +The number of spaces per indentation-level. + +#### Default + +```ts +2 +``` + +#### Defined in + +[models.ts:832](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L832) + +*** + +### trailingComma + +> **trailingComma**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use [trailing commas](https://prettier.io/docs/en/options.html#trailing-commas). + +#### Default + +```ts +true +``` + +#### Defined in + +[models.ts:849](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L849) + +*** + +### useTabs + +> **useTabs**: `boolean` + +If `true`, lines are indented with tabs instead of spaces. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:826](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L826) \ No newline at end of file diff --git a/docs/api/internal/interfaces/FormatterConfig/index.html b/docs/api/internal/interfaces/FormatterConfig/index.html new file mode 100644 index 0000000..fe03e2f --- /dev/null +++ b/docs/api/internal/interfaces/FormatterConfig/index.html @@ -0,0 +1,65 @@ +Interface: FormatterConfig | LiveCodes
Skip to main content

Interface: FormatterConfig

+

Extended by​

+ +

Properties​

+

semicolons​

+
+

semicolons: boolean

+
+

Configures Prettier code formatter to use semi-colons.

+

Default​

+
true
+

Defined in​

+

models.ts:838

+
+

singleQuote​

+
+

singleQuote: boolean

+
+

Configures Prettier code formatter to use single quotes instead of double quotes.

+

Default​

+
false
+

Defined in​

+

models.ts:843

+
+

tabSize​

+
+

tabSize: number

+
+

The number of spaces per indentation-level.

+

Default​

+
2
+

Defined in​

+

models.ts:832

+
+

trailingComma​

+
+

trailingComma: boolean

+
+

Configures Prettier code formatter to use trailing commas.

+

Default​

+
true
+

Defined in​

+

models.ts:849

+
+

useTabs​

+
+

useTabs: boolean

+
+

If true, lines are indented with tabs instead of spaces.

+

Default​

+
false
+

Defined in​

+

models.ts:826

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/interfaces/TestResult.html.md b/docs/api/internal/interfaces/TestResult.html.md new file mode 100644 index 0000000..f28a221 --- /dev/null +++ b/docs/api/internal/interfaces/TestResult.html.md @@ -0,0 +1,41 @@ +# Interface: TestResult + +## Properties + +### duration + +> **duration**: `number` + +#### Defined in + +[models.ts:1979](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1979) + +*** + +### errors + +> **errors**: `string`[] + +#### Defined in + +[models.ts:1980](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1980) + +*** + +### status + +> **status**: `"fail"` \| `"pass"` \| `"skip"` + +#### Defined in + +[models.ts:1981](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1981) + +*** + +### testPath + +> **testPath**: `string`[] + +#### Defined in + +[models.ts:1982](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1982) \ No newline at end of file diff --git a/docs/api/internal/interfaces/TestResult/index.html b/docs/api/internal/interfaces/TestResult/index.html new file mode 100644 index 0000000..c53dbc2 --- /dev/null +++ b/docs/api/internal/interfaces/TestResult/index.html @@ -0,0 +1,39 @@ +Interface: TestResult | LiveCodes
Skip to main content
+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/interfaces/Types.html.md b/docs/api/internal/interfaces/Types.html.md new file mode 100644 index 0000000..b5764ae --- /dev/null +++ b/docs/api/internal/interfaces/Types.html.md @@ -0,0 +1,5 @@ +# Interface: Types + +## Indexable + + \[`key`: `string`\]: `string` \| `object` \ No newline at end of file diff --git a/docs/api/internal/interfaces/Types/index.html b/docs/api/internal/interfaces/Types/index.html new file mode 100644 index 0000000..089b369 --- /dev/null +++ b/docs/api/internal/interfaces/Types/index.html @@ -0,0 +1,13 @@ +Interface: Types | LiveCodes
Skip to main content

Interface: Types

+

Indexable​

+

[key: string]: string | object

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/interfaces/UserConfig.html.md b/docs/api/internal/interfaces/UserConfig.html.md new file mode 100644 index 0000000..c83c700 --- /dev/null +++ b/docs/api/internal/interfaces/UserConfig.html.md @@ -0,0 +1,599 @@ +# Interface: UserConfig + +## Extends + +- [`EditorConfig`](EditorConfig.md).[`FormatterConfig`](FormatterConfig.md) + +## Extended by + +- [`Config`](../../interfaces/Config.md) + +## Properties + +### appLanguage + +> **appLanguage**: `undefined` \| [`AppLanguage`](../type-aliases/AppLanguage.md) + +Sets the app UI language used. + +#### Defined in + +[models.ts:707](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L707) + +*** + +### autosave + +> **autosave**: `boolean` + +If `true`, the project is automatically saved on code change, +after time [delay](https://livecodes.io/docs/configuration/configuration-object#delay). + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:656](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L656) + +*** + +### autotest + +> **autotest**: `boolean` + +If `true`, the project is watched for code changes which trigger tests to auto-run. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:662](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L662) + +*** + +### autoupdate + +> **autoupdate**: `boolean` + +If `true`, the result page is automatically updated on code change, +after time [delay](https://livecodes.io/docs/configuration/configuration-object#delay). + +#### Default + +```ts +true +``` + +#### Defined in + +[models.ts:649](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L649) + +*** + +### closeBrackets + +> **closeBrackets**: `boolean` + +Use auto-complete to close brackets and quotes. + +#### Default + +```ts +true +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`closeBrackets`](EditorConfig.md#closebrackets) + +#### Defined in + +[models.ts:801](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L801) + +*** + +### delay + +> **delay**: `number` + +Time delay (in milliseconds) following code change, +after which the result page is updated (if [`autoupdate`](https://livecodes.io/docs/configuration/configuration-object#autoupdate) is `true`) +and/or the project is saved (if [`autosave`](https://livecodes.io/docs/configuration/configuration-object#autosave) is `true`). + +#### Default + +```ts +1500 +``` + +#### Defined in + +[models.ts:670](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L670) + +*** + +### editor + +> **editor**: `undefined` \| `"auto"` \| `"monaco"` \| `"codemirror"` \| `"codejar"` + +Selects the [code editor](https://livecodes.io/docs/features/editor-settings#code-editor) to use. + +If `undefined` (the default), Monaco editor is used on desktop, +CodeMirror is used on mobile and in `simple` mode, +while CodeJar is used in `codeblock` mode, in `lite` mode and in `readonly` playgrounds. + +If set to `auto`, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings. + +#### Default + +```ts +undefined +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`editor`](EditorConfig.md#editor) + +#### Defined in + +[models.ts:722](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L722) + +*** + +### editorMode + +> **editorMode**: `undefined` \| `"vim"` \| `"emacs"` + +Sets [editor mode](https://livecodes.io/docs/features/editor-settings#editor-modes). + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`editorMode`](EditorConfig.md#editormode) + +#### Defined in + +[models.ts:812](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L812) + +*** + +### editorTheme + +> **editorTheme**: `undefined` \| `string` \| [`EditorTheme`](../type-aliases/EditorTheme.md)[] + +Sets the [code editor](https://livecodes.io/docs/features/editor-settings) themes. + +See docs for [editor themes](https://livecodes.io/docs/configuration/configuration-object#editortheme) for details. + +#### Examples + +```ts +"vs" +``` + +```ts +"monaco:twilight, codemirror:one-dark" +``` + +```ts +["vs@light"] +``` + +```ts +["vs@light", "vs-dark@dark"] +``` + +```ts +["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"] +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`editorTheme`](EditorConfig.md#editortheme) + +#### Defined in + +[models.ts:748](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L748) + +*** + +### emmet + +> **emmet**: `boolean` + +Enables [Emmet](https://livecodes.io/docs/features/editor-settings#emmet). + +#### Default + +```ts +true +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`emmet`](EditorConfig.md#emmet) + +#### Defined in + +[models.ts:807](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L807) + +*** + +### enableAI + +> **enableAI**: `boolean` + +If `true`, [AI code assistant](https://livecodes.io/docs/features/ai) is enabled. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`enableAI`](EditorConfig.md#enableai) + +#### Defined in + +[models.ts:818](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L818) + +*** + +### foldRegions + +> **foldRegions**: `boolean` + +When set to `true`, regions marked by `#region` and `#endregion` comments are folded when the project is loaded. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`foldRegions`](EditorConfig.md#foldregions) + +#### Defined in + +[models.ts:795](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L795) + +*** + +### fontFamily + +> **fontFamily**: `undefined` \| `string` + +Sets the [code editor](https://livecodes.io/docs/features/editor-settings) font family. + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`fontFamily`](EditorConfig.md#fontfamily) + +#### Defined in + +[models.ts:753](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L753) + +*** + +### fontSize + +> **fontSize**: `undefined` \| `number` + +Sets the font size. + +If `undefined` (the default), the font size is set to 14 for the full app and 12 for [embeds](https://livecodes.io/docs/features/embeds). + +#### Default + +```ts +undefined +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`fontSize`](EditorConfig.md#fontsize) + +#### Defined in + +[models.ts:761](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L761) + +*** + +### formatOnsave + +> **formatOnsave**: `boolean` + +If `true`, the code is automatically [formatted](https://livecodes.io/docs/features/code-format) on saving the project. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:676](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L676) + +*** + +### layout + +> **layout**: `undefined` \| `"horizontal"` \| `"vertical"` \| `"responsive"` + +Sets the app layout to horizontal or vertical. +If set to `"responsive"` (the default) or `undefined`, +the layout is vertical in small screens when the playground height is larger than its width, +otherwise horizontal. + +#### Default + +```ts +"responsive" +``` + +#### Defined in + +[models.ts:685](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L685) + +*** + +### lineNumbers + +> **lineNumbers**: `boolean` \| `"relative"` + +Show line numbers in [code editor](https://livecodes.io/docs/features/editor-settings). + +#### Default + +```ts +true +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`lineNumbers`](EditorConfig.md#linenumbers) + +#### Defined in + +[models.ts:783](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L783) + +*** + +### recoverUnsaved + +> **recoverUnsaved**: `boolean` + +Enables [recovering last unsaved project](https://livecodes.io/docs/features/recover) when the app is reopened. + +#### Default + +```ts +true +``` + +#### Defined in + +[models.ts:691](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L691) + +*** + +### semicolons + +> **semicolons**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use semi-colons. + +#### Default + +```ts +true +``` + +#### Inherited from + +[`FormatterConfig`](FormatterConfig.md).[`semicolons`](FormatterConfig.md#semicolons) + +#### Defined in + +[models.ts:838](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L838) + +*** + +### showSpacing + +> **showSpacing**: `boolean` + +Enables [showing element spacing](https://livecodes.io/docs/features/result#show-spacings) in the result page. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:697](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L697) + +*** + +### singleQuote + +> **singleQuote**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use single quotes instead of double quotes. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`FormatterConfig`](FormatterConfig.md).[`singleQuote`](FormatterConfig.md#singlequote) + +#### Defined in + +[models.ts:843](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L843) + +*** + +### tabSize + +> **tabSize**: `number` + +The number of spaces per indentation-level. + +Also used in [code formatting](https://livecodes.io/docs/features/code-format). + +#### Default + +```ts +2 +``` + +#### Inherited from + +[`FormatterConfig`](FormatterConfig.md).[`tabSize`](FormatterConfig.md#tabsize) + +#### Defined in + +[models.ts:777](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L777) + +*** + +### theme + +> **theme**: [`Theme`](../type-aliases/Theme.md) + +Sets the app [theme](https://livecodes.io/docs/features/themes) to light/dark mode. + +#### Default + +```ts +"dark" +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`theme`](EditorConfig.md#theme) + +#### Defined in + +[models.ts:728](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L728) + +*** + +### themeColor + +> **themeColor**: `undefined` \| `string` + +Sets the app theme color. +If `undefined`, it is set to `"hsl(214, 40%, 50%)"`. + +#### Default + +```ts +undefined +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`themeColor`](EditorConfig.md#themecolor) + +#### Defined in + +[models.ts:735](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L735) + +*** + +### trailingComma + +> **trailingComma**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use [trailing commas](https://prettier.io/docs/en/options.html#trailing-commas). + +#### Default + +```ts +true +``` + +#### Inherited from + +[`FormatterConfig`](FormatterConfig.md).[`trailingComma`](FormatterConfig.md#trailingcomma) + +#### Defined in + +[models.ts:849](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L849) + +*** + +### useTabs + +> **useTabs**: `boolean` + +If `true`, lines are indented with tabs instead of spaces. + +Also used in [code formatting](https://livecodes.io/docs/features/code-format). + +#### Default + +```ts +false +``` + +#### Inherited from + +[`FormatterConfig`](FormatterConfig.md).[`useTabs`](FormatterConfig.md#usetabs) + +#### Defined in + +[models.ts:769](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L769) + +*** + +### welcome + +> **welcome**: `boolean` + +If `true`, the [welcome screen](https://livecodes.io/docs/features/welcome) is displayed when the app loads. + +#### Defined in + +[models.ts:702](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L702) + +*** + +### wordWrap + +> **wordWrap**: `boolean` + +Enables word-wrap for long lines. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`wordWrap`](EditorConfig.md#wordwrap) + +#### Defined in + +[models.ts:789](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L789) \ No newline at end of file diff --git a/docs/api/internal/interfaces/UserConfig/index.html b/docs/api/internal/interfaces/UserConfig/index.html new file mode 100644 index 0000000..9143f38 --- /dev/null +++ b/docs/api/internal/interfaces/UserConfig/index.html @@ -0,0 +1,347 @@ +Interface: UserConfig | LiveCodes
Skip to main content

Interface: UserConfig

+

Extends​

+ +

Extended by​

+ +

Properties​

+

appLanguage​

+
+

appLanguage: undefined | AppLanguage

+
+

Sets the app UI language used.

+

Defined in​

+

models.ts:707

+
+

autosave​

+
+

autosave: boolean

+
+

If true, the project is automatically saved on code change, +after time delay.

+

Default​

+
false
+

Defined in​

+

models.ts:656

+
+

autotest​

+
+

autotest: boolean

+
+

If true, the project is watched for code changes which trigger tests to auto-run.

+

Default​

+
false
+

Defined in​

+

models.ts:662

+
+

autoupdate​

+
+

autoupdate: boolean

+
+

If true, the result page is automatically updated on code change, +after time delay.

+

Default​

+
true
+

Defined in​

+

models.ts:649

+
+

closeBrackets​

+
+

closeBrackets: boolean

+
+

Use auto-complete to close brackets and quotes.

+

Default​

+
true
+

Inherited from​

+

EditorConfig.closeBrackets

+

Defined in​

+

models.ts:801

+
+

delay​

+
+

delay: number

+
+

Time delay (in milliseconds) following code change, +after which the result page is updated (if autoupdate is true) +and/or the project is saved (if autosave is true).

+

Default​

+
1500
+

Defined in​

+

models.ts:670

+
+

editor​

+
+

editor: undefined | "auto" | "monaco" | "codemirror" | "codejar"

+
+

Selects the code editor to use.

+

If undefined (the default), Monaco editor is used on desktop, +CodeMirror is used on mobile and in simple mode, +while CodeJar is used in codeblock mode, in lite mode and in readonly playgrounds.

+

If set to auto, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings.

+

Default​

+
undefined
+

Inherited from​

+

EditorConfig.editor

+

Defined in​

+

models.ts:722

+
+

editorMode​

+
+

editorMode: undefined | "vim" | "emacs"

+
+

Sets editor mode.

+

Inherited from​

+

EditorConfig.editorMode

+

Defined in​

+

models.ts:812

+
+

editorTheme​

+
+

editorTheme: undefined | string | EditorTheme[]

+
+

Sets the code editor themes.

+

See docs for editor themes for details.

+

Examples​

+
"vs"
+
"monaco:twilight, codemirror:one-dark"
+
["vs@light"]
+
["vs@light", "vs-dark@dark"]
+
["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]
+

Inherited from​

+

EditorConfig.editorTheme

+

Defined in​

+

models.ts:748

+
+

emmet​

+
+

emmet: boolean

+
+

Enables Emmet.

+

Default​

+
true
+

Inherited from​

+

EditorConfig.emmet

+

Defined in​

+

models.ts:807

+
+

enableAI​

+
+

enableAI: boolean

+
+

If true, AI code assistant is enabled.

+

Default​

+
false
+

Inherited from​

+

EditorConfig.enableAI

+

Defined in​

+

models.ts:818

+
+

foldRegions​

+
+

foldRegions: boolean

+
+

When set to true, regions marked by #region and #endregion comments are folded when the project is loaded.

+

Default​

+
false
+

Inherited from​

+

EditorConfig.foldRegions

+

Defined in​

+

models.ts:795

+
+

fontFamily​

+
+

fontFamily: undefined | string

+
+

Sets the code editor font family.

+

Inherited from​

+

EditorConfig.fontFamily

+

Defined in​

+

models.ts:753

+
+

fontSize​

+
+

fontSize: undefined | number

+
+

Sets the font size.

+

If undefined (the default), the font size is set to 14 for the full app and 12 for embeds.

+

Default​

+
undefined
+

Inherited from​

+

EditorConfig.fontSize

+

Defined in​

+

models.ts:761

+
+

formatOnsave​

+
+

formatOnsave: boolean

+
+

If true, the code is automatically formatted on saving the project.

+

Default​

+
false
+

Defined in​

+

models.ts:676

+
+

layout​

+
+

layout: undefined | "horizontal" | "vertical" | "responsive"

+
+

Sets the app layout to horizontal or vertical. +If set to "responsive" (the default) or undefined, +the layout is vertical in small screens when the playground height is larger than its width, +otherwise horizontal.

+

Default​

+
"responsive"
+

Defined in​

+

models.ts:685

+
+

lineNumbers​

+
+

lineNumbers: boolean | "relative"

+
+

Show line numbers in code editor.

+

Default​

+
true
+

Inherited from​

+

EditorConfig.lineNumbers

+

Defined in​

+

models.ts:783

+
+

recoverUnsaved​

+
+

recoverUnsaved: boolean

+
+

Enables recovering last unsaved project when the app is reopened.

+

Default​

+
true
+

Defined in​

+

models.ts:691

+
+

semicolons​

+
+

semicolons: boolean

+
+

Configures Prettier code formatter to use semi-colons.

+

Default​

+
true
+

Inherited from​

+

FormatterConfig.semicolons

+

Defined in​

+

models.ts:838

+
+

showSpacing​

+
+

showSpacing: boolean

+
+

Enables showing element spacing in the result page.

+

Default​

+
false
+

Defined in​

+

models.ts:697

+
+

singleQuote​

+
+

singleQuote: boolean

+
+

Configures Prettier code formatter to use single quotes instead of double quotes.

+

Default​

+
false
+

Inherited from​

+

FormatterConfig.singleQuote

+

Defined in​

+

models.ts:843

+
+

tabSize​

+
+

tabSize: number

+
+

The number of spaces per indentation-level.

+

Also used in code formatting.

+

Default​

+
2
+

Inherited from​

+

FormatterConfig.tabSize

+

Defined in​

+

models.ts:777

+
+

theme​

+
+

theme: Theme

+
+

Sets the app theme to light/dark mode.

+

Default​

+
"dark"
+

Inherited from​

+

EditorConfig.theme

+

Defined in​

+

models.ts:728

+
+

themeColor​

+
+

themeColor: undefined | string

+
+

Sets the app theme color. +If undefined, it is set to "hsl(214, 40%, 50%)".

+

Default​

+
undefined
+

Inherited from​

+

EditorConfig.themeColor

+

Defined in​

+

models.ts:735

+
+

trailingComma​

+
+

trailingComma: boolean

+
+

Configures Prettier code formatter to use trailing commas.

+

Default​

+
true
+

Inherited from​

+

FormatterConfig.trailingComma

+

Defined in​

+

models.ts:849

+
+

useTabs​

+
+

useTabs: boolean

+
+

If true, lines are indented with tabs instead of spaces.

+

Also used in code formatting.

+

Default​

+
false
+

Inherited from​

+

FormatterConfig.useTabs

+

Defined in​

+

models.ts:769

+
+

welcome​

+
+

welcome: boolean

+
+

If true, the welcome screen is displayed when the app loads.

+

Defined in​

+

models.ts:702

+
+

wordWrap​

+
+

wordWrap: boolean

+
+

Enables word-wrap for long lines.

+

Default​

+
false
+

Inherited from​

+

EditorConfig.wordWrap

+

Defined in​

+

models.ts:789

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/APICommands.html.md b/docs/api/internal/type-aliases/APICommands.html.md new file mode 100644 index 0000000..7b9a780 --- /dev/null +++ b/docs/api/internal/type-aliases/APICommands.html.md @@ -0,0 +1,7 @@ +# Type Alias: APICommands + +> **APICommands**: `"setBroadcastToken"` \| `"showVersion"` + +## Defined in + +[models.ts:280](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L280) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/APICommands/index.html b/docs/api/internal/type-aliases/APICommands/index.html new file mode 100644 index 0000000..72c4bb1 --- /dev/null +++ b/docs/api/internal/type-aliases/APICommands/index.html @@ -0,0 +1,16 @@ +Type Alias: APICommands | LiveCodes
Skip to main content
+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/AppLanguage.html.md b/docs/api/internal/type-aliases/AppLanguage.html.md new file mode 100644 index 0000000..fec69e5 --- /dev/null +++ b/docs/api/internal/type-aliases/AppLanguage.html.md @@ -0,0 +1,7 @@ +# Type Alias: AppLanguage + +> **AppLanguage**: `"auto"` \| `"ar"` \| `"de"` \| `"en"` \| `"es"` \| `"fr"` \| `"hi"` \| `"it"` \| `"ja"` \| `"pt"` \| `"ru"` \| `"ur"` \| `"zh-CN"` + +## Defined in + +[models.ts:1778](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1778) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/AppLanguage/index.html b/docs/api/internal/type-aliases/AppLanguage/index.html new file mode 100644 index 0000000..264aa07 --- /dev/null +++ b/docs/api/internal/type-aliases/AppLanguage/index.html @@ -0,0 +1,16 @@ +Type Alias: AppLanguage | LiveCodes
Skip to main content

Type Alias: AppLanguage

+
+

AppLanguage: "auto" | "ar" | "de" | "en" | "es" | "fr" | "hi" | "it" | "ja" | "pt" | "ru" | "ur" | "zh-CN"

+
+

Defined in​

+

models.ts:1778

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/CDN.html.md b/docs/api/internal/type-aliases/CDN.html.md new file mode 100644 index 0000000..386decb --- /dev/null +++ b/docs/api/internal/type-aliases/CDN.html.md @@ -0,0 +1,7 @@ +# Type Alias: CDN + +> **CDN**: `"jspm"` \| `"skypack"` \| `"jsdelivr"` \| `"fastly.jsdelivr"` \| `"gcore.jsdelivr"` \| `"testingcf.jsdelivr"` \| `"jsdelivr.b-cdn"` \| `"jsdelivr.gh"` \| `"fastly.jsdelivr.gh"` \| `"gcore.jsdelivr.gh"` \| `"testingcf.jsdelivr.gh"` \| `"jsdelivr.b-cdn.gh"` \| `"jsdelivr.esm"` \| `"fastly.jsdelivr.esm"` \| `"gcore.jsdelivr.esm"` \| `"testingcf.jsdelivr.esm"` \| `"jsdelivr.b-cdn.esm"` \| `"esm.run"` \| `"esm.sh"` \| `"esbuild"` \| `"bundle.run"` \| `"unpkg"` \| `"npmcdn"` \| `"statically"` + +## Defined in + +[models.ts:1861](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1861) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/CDN/index.html b/docs/api/internal/type-aliases/CDN/index.html new file mode 100644 index 0000000..27600bf --- /dev/null +++ b/docs/api/internal/type-aliases/CDN/index.html @@ -0,0 +1,16 @@ +Type Alias: CDN | LiveCodes
Skip to main content

Type Alias: CDN

+
+

CDN: "jspm" | "skypack" | "jsdelivr" | "fastly.jsdelivr" | "gcore.jsdelivr" | "testingcf.jsdelivr" | "jsdelivr.b-cdn" | "jsdelivr.gh" | "fastly.jsdelivr.gh" | "gcore.jsdelivr.gh" | "testingcf.jsdelivr.gh" | "jsdelivr.b-cdn.gh" | "jsdelivr.esm" | "fastly.jsdelivr.esm" | "gcore.jsdelivr.esm" | "testingcf.jsdelivr.esm" | "jsdelivr.b-cdn.esm" | "esm.run" | "esm.sh" | "esbuild" | "bundle.run" | "unpkg" | "npmcdn" | "statically"

+
+

Defined in​

+

models.ts:1861

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/CodejarTheme.html.md b/docs/api/internal/type-aliases/CodejarTheme.html.md new file mode 100644 index 0000000..81f8484 --- /dev/null +++ b/docs/api/internal/type-aliases/CodejarTheme.html.md @@ -0,0 +1,7 @@ +# Type Alias: CodejarTheme + +> **CodejarTheme**: `"a11y-dark"` \| `"atom-dark"` \| `"base16-ateliersulphurpool-light"` \| `"catppuccin-latte"` \| `"catppuccin-frappe"` \| `"catppuccin-macchiato"` \| `"catppuccin-mocha"` \| `"cb"` \| `"coldark-cold"` \| `"coldark-dark"` \| `"coy"` \| `"coy-without-shadows"` \| `"darcula"` \| `"dark"` \| `"dracula"` \| `"duotone-dark"` \| `"duotone-earth"` \| `"duotone-forest"` \| `"duotone-light"` \| `"duotone-sea"` \| `"duotone-space"` \| `"funky"` \| `"ghcolors"` \| `"gruvbox-dark"` \| `"gruvbox-light"` \| `"holi-theme"` \| `"hopscotch"` \| `"laserwave"` \| `"lucario"` \| `"material-dark"` \| `"material-light"` \| `"material-oceanic"` \| `"monochrome"` \| `"monochrome-dark"` \| `"night-owl"` \| `"nord"` \| `"nord-2"` \| `"okaidia"` \| `"one-dark"` \| `"one-light"` \| `"pojoaque"` \| `"shades-of-purple"` \| `"solarized-dark-atom"` \| `"solarized-light"` \| `"synthwave84"` \| `"tomorrow"` \| `"twilight"` \| `"vs"` \| `"vsc-dark-plus"` \| `"xonokai"` \| `"z-touchs"` + +## Defined in + +[models.ts:1687](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1687) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/CodejarTheme/index.html b/docs/api/internal/type-aliases/CodejarTheme/index.html new file mode 100644 index 0000000..b434f82 --- /dev/null +++ b/docs/api/internal/type-aliases/CodejarTheme/index.html @@ -0,0 +1,16 @@ +Type Alias: CodejarTheme | LiveCodes
Skip to main content

Type Alias: CodejarTheme

+
+

CodejarTheme: "a11y-dark" | "atom-dark" | "base16-ateliersulphurpool-light" | "catppuccin-latte" | "catppuccin-frappe" | "catppuccin-macchiato" | "catppuccin-mocha" | "cb" | "coldark-cold" | "coldark-dark" | "coy" | "coy-without-shadows" | "darcula" | "dark" | "dracula" | "duotone-dark" | "duotone-earth" | "duotone-forest" | "duotone-light" | "duotone-sea" | "duotone-space" | "funky" | "ghcolors" | "gruvbox-dark" | "gruvbox-light" | "holi-theme" | "hopscotch" | "laserwave" | "lucario" | "material-dark" | "material-light" | "material-oceanic" | "monochrome" | "monochrome-dark" | "night-owl" | "nord" | "nord-2" | "okaidia" | "one-dark" | "one-light" | "pojoaque" | "shades-of-purple" | "solarized-dark-atom" | "solarized-light" | "synthwave84" | "tomorrow" | "twilight" | "vs" | "vsc-dark-plus" | "xonokai" | "z-touchs"

+
+

Defined in​

+

models.ts:1687

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/CodemirrorTheme.html.md b/docs/api/internal/type-aliases/CodemirrorTheme.html.md new file mode 100644 index 0000000..c05dc57 --- /dev/null +++ b/docs/api/internal/type-aliases/CodemirrorTheme.html.md @@ -0,0 +1,7 @@ +# Type Alias: CodemirrorTheme + +> **CodemirrorTheme**: `"amy"` \| `"aura"` \| `"ayu-light"` \| `"barf"` \| `"basic-light"` \| `"basic-dark"` \| `"bespin"` \| `"birds-of-paradise"` \| `"boys-and-girls"` \| `"catppuccin-latte"` \| `"catppuccin-frappe"` \| `"catppuccin-macchiato"` \| `"catppuccin-mocha"` \| `"clouds"` \| `"cm-light"` \| `"cobalt"` \| `"cool-glow"` \| `"dracula"` \| `"espresso"` \| `"github-dark"` \| `"github-light"` \| `"gruvbox-dark"` \| `"gruvbox-light"` \| `"material-dark"` \| `"material-light"` \| `"monochrome"` \| `"monochrome-dark"` \| `"noctis-lilac"` \| `"nord"` \| `"one-dark"` \| `"rose-pine-dawn"` \| `"smoothy"` \| `"solarized-light"` \| `"solarized-dark"` \| `"tokyo-night"` \| `"tokyo-night-day"` \| `"tokyo-night-storm"` \| `"tomorrow"` + +## Defined in + +[models.ts:1647](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1647) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/CodemirrorTheme/index.html b/docs/api/internal/type-aliases/CodemirrorTheme/index.html new file mode 100644 index 0000000..5f93e2e --- /dev/null +++ b/docs/api/internal/type-aliases/CodemirrorTheme/index.html @@ -0,0 +1,16 @@ +Type Alias: CodemirrorTheme | LiveCodes
Skip to main content

Type Alias: CodemirrorTheme

+
+

CodemirrorTheme: "amy" | "aura" | "ayu-light" | "barf" | "basic-light" | "basic-dark" | "bespin" | "birds-of-paradise" | "boys-and-girls" | "catppuccin-latte" | "catppuccin-frappe" | "catppuccin-macchiato" | "catppuccin-mocha" | "clouds" | "cm-light" | "cobalt" | "cool-glow" | "dracula" | "espresso" | "github-dark" | "github-light" | "gruvbox-dark" | "gruvbox-light" | "material-dark" | "material-light" | "monochrome" | "monochrome-dark" | "noctis-lilac" | "nord" | "one-dark" | "rose-pine-dawn" | "smoothy" | "solarized-light" | "solarized-dark" | "tokyo-night" | "tokyo-night-day" | "tokyo-night-storm" | "tomorrow"

+
+

Defined in​

+

models.ts:1647

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/CssPresetId.html.md b/docs/api/internal/type-aliases/CssPresetId.html.md new file mode 100644 index 0000000..540fc69 --- /dev/null +++ b/docs/api/internal/type-aliases/CssPresetId.html.md @@ -0,0 +1,7 @@ +# Type Alias: CssPresetId + +> **CssPresetId**: `""` \| `"normalize.css"` \| `"reset-css"` + +## Defined in + +[models.ts:1269](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1269) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/CssPresetId/index.html b/docs/api/internal/type-aliases/CssPresetId/index.html new file mode 100644 index 0000000..c2582ae --- /dev/null +++ b/docs/api/internal/type-aliases/CssPresetId/index.html @@ -0,0 +1,16 @@ +Type Alias: CssPresetId | LiveCodes
Skip to main content
+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/EditorId.html.md b/docs/api/internal/type-aliases/EditorId.html.md new file mode 100644 index 0000000..72ef317 --- /dev/null +++ b/docs/api/internal/type-aliases/EditorId.html.md @@ -0,0 +1,7 @@ +# Type Alias: EditorId + +> **EditorId**: `"markup"` \| `"style"` \| `"script"` + +## Defined in + +[models.ts:1168](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1168) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/EditorId/index.html b/docs/api/internal/type-aliases/EditorId/index.html new file mode 100644 index 0000000..d47a451 --- /dev/null +++ b/docs/api/internal/type-aliases/EditorId/index.html @@ -0,0 +1,16 @@ +Type Alias: EditorId | LiveCodes
Skip to main content
+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/EditorTheme.html.md b/docs/api/internal/type-aliases/EditorTheme.html.md new file mode 100644 index 0000000..eac1409 --- /dev/null +++ b/docs/api/internal/type-aliases/EditorTheme.html.md @@ -0,0 +1,7 @@ +# Type Alias: EditorTheme + +> **EditorTheme**: [`MonacoTheme`](MonacoTheme.md) \| [`CodemirrorTheme`](CodemirrorTheme.md) \| [`CodejarTheme`](CodejarTheme.md) \| \`$\{MonacoTheme\}@$\{Theme\}\` \| \`$\{CodemirrorTheme\}@$\{Theme\}\` \| \`$\{CodejarTheme\}@$\{Theme\}\` \| \`monaco:$\{MonacoTheme\}\` \| \`codemirror:$\{CodemirrorTheme\}\` \| \`codejar:$\{CodejarTheme\}\` \| \`monaco:$\{MonacoTheme\}@$\{Theme\}\` \| \`codemirror:$\{CodemirrorTheme\}@$\{Theme\}\` \| \`codejar:$\{CodejarTheme\}@$\{Theme\}\` + +## Defined in + +[models.ts:1740](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1740) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/EditorTheme/index.html b/docs/api/internal/type-aliases/EditorTheme/index.html new file mode 100644 index 0000000..5e71e16 --- /dev/null +++ b/docs/api/internal/type-aliases/EditorTheme/index.html @@ -0,0 +1,16 @@ +Type Alias: EditorTheme | LiveCodes
Skip to main content

Type Alias: EditorTheme

+
+

EditorTheme: MonacoTheme | CodemirrorTheme | CodejarTheme | `${MonacoTheme}@${Theme}` | `${CodemirrorTheme}@${Theme}` | `${CodejarTheme}@${Theme}` | `monaco:${MonacoTheme}` | `codemirror:${CodemirrorTheme}` | `codejar:${CodejarTheme}` | `monaco:${MonacoTheme}@${Theme}` | `codemirror:${CodemirrorTheme}@${Theme}` | `codejar:${CodejarTheme}@${Theme}`

+
+

Defined in​

+

models.ts:1740

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/MonacoTheme.html.md b/docs/api/internal/type-aliases/MonacoTheme.html.md new file mode 100644 index 0000000..db229f1 --- /dev/null +++ b/docs/api/internal/type-aliases/MonacoTheme.html.md @@ -0,0 +1,7 @@ +# Type Alias: MonacoTheme + +> **MonacoTheme**: `"active4d"` \| `"all-hallows-eve"` \| `"amy"` \| `"birds-of-paradise"` \| `"blackboard"` \| `"brilliance-black"` \| `"brilliance-dull"` \| `"catppuccin-latte"` \| `"catppuccin-frappe"` \| `"catppuccin-macchiato"` \| `"catppuccin-mocha"` \| `"chrome-devtools"` \| `"clouds-midnight"` \| `"clouds"` \| `"cobalt"` \| `"cobalt2"` \| `"custom-vs-light"` \| `"custom-vs-dark"` \| `"dawn"` \| `"dracula"` \| `"dreamweaver"` \| `"eiffel"` \| `"espresso-libre"` \| `"github"` \| `"github-dark"` \| `"github-light"` \| `"hc-black"` \| `"hc-light"` \| `"idle"` \| `"idlefingers"` \| `"iplastic"` \| `"katzenmilch"` \| `"krtheme"` \| `"kuroir"` \| `"lazy"` \| `"magicwb-amiga"` \| `"merbivore-soft"` \| `"merbivore"` \| `"monochrome"` \| `"monochrome-dark"` \| `"monokai"` \| `"monokai-bright"` \| `"monoindustrial"` \| `"night-owl"` \| `"nord"` \| `"oceanic-next"` \| `"pastels-on-dark"` \| `"slush-and-poppies"` \| `"solarized-dark"` \| `"solarized-light"` \| `"spacecadet"` \| `"sunburst"` \| `"textmate-mac-classic"` \| `"tomorrow"` \| `"tomorrow-night"` \| `"tomorrow-night-blue"` \| `"tomorrow-night-bright"` \| `"tomorrow-night-eighties"` \| `"twilight"` \| `"upstream-sunburst"` \| `"vibrant-ink"` \| `"vs"` \| `"vs-dark"` \| `"xcode-default"` \| `"zenburnesque"` + +## Defined in + +[models.ts:1580](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1580) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/MonacoTheme/index.html b/docs/api/internal/type-aliases/MonacoTheme/index.html new file mode 100644 index 0000000..4f877e4 --- /dev/null +++ b/docs/api/internal/type-aliases/MonacoTheme/index.html @@ -0,0 +1,16 @@ +Type Alias: MonacoTheme | LiveCodes
Skip to main content

Type Alias: MonacoTheme

+
+

MonacoTheme: "active4d" | "all-hallows-eve" | "amy" | "birds-of-paradise" | "blackboard" | "brilliance-black" | "brilliance-dull" | "catppuccin-latte" | "catppuccin-frappe" | "catppuccin-macchiato" | "catppuccin-mocha" | "chrome-devtools" | "clouds-midnight" | "clouds" | "cobalt" | "cobalt2" | "custom-vs-light" | "custom-vs-dark" | "dawn" | "dracula" | "dreamweaver" | "eiffel" | "espresso-libre" | "github" | "github-dark" | "github-light" | "hc-black" | "hc-light" | "idle" | "idlefingers" | "iplastic" | "katzenmilch" | "krtheme" | "kuroir" | "lazy" | "magicwb-amiga" | "merbivore-soft" | "merbivore" | "monochrome" | "monochrome-dark" | "monokai" | "monokai-bright" | "monoindustrial" | "night-owl" | "nord" | "oceanic-next" | "pastels-on-dark" | "slush-and-poppies" | "solarized-dark" | "solarized-light" | "spacecadet" | "sunburst" | "textmate-mac-classic" | "tomorrow" | "tomorrow-night" | "tomorrow-night-blue" | "tomorrow-night-bright" | "tomorrow-night-eighties" | "twilight" | "upstream-sunburst" | "vibrant-ink" | "vs" | "vs-dark" | "xcode-default" | "zenburnesque"

+
+

Defined in​

+

models.ts:1580

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/Processor.html.md b/docs/api/internal/type-aliases/Processor.html.md new file mode 100644 index 0000000..8e826e8 --- /dev/null +++ b/docs/api/internal/type-aliases/Processor.html.md @@ -0,0 +1,7 @@ +# Type Alias: Processor + +> **Processor**: `"postcss"` \| `"postcssImportUrl"` \| `"tailwindcss"` \| `"windicss"` \| `"unocss"` \| `"tokencss"` \| `"lightningcss"` \| `"autoprefixer"` \| `"postcssPresetEnv"` \| `"cssmodules"` \| `"purgecss"` \| `"cssnano"` + +## Defined in + +[models.ts:1226](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1226) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/Processor/index.html b/docs/api/internal/type-aliases/Processor/index.html new file mode 100644 index 0000000..a9b660e --- /dev/null +++ b/docs/api/internal/type-aliases/Processor/index.html @@ -0,0 +1,16 @@ +Type Alias: Processor | LiveCodes
Skip to main content

Type Alias: Processor

+
+

Processor: "postcss" | "postcssImportUrl" | "tailwindcss" | "windicss" | "unocss" | "tokencss" | "lightningcss" | "autoprefixer" | "postcssPresetEnv" | "cssmodules" | "purgecss" | "cssnano"

+
+

Defined in​

+

models.ts:1226

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/TemplateName.html.md b/docs/api/internal/type-aliases/TemplateName.html.md new file mode 100644 index 0000000..b96ca3e --- /dev/null +++ b/docs/api/internal/type-aliases/TemplateName.html.md @@ -0,0 +1,7 @@ +# Type Alias: TemplateName + +> **TemplateName**: `"blank"` \| `"javascript"` \| `"typescript"` \| `"react"` \| `"react-native"` \| `"vue2"` \| `"vue"` \| `"angular"` \| `"preact"` \| `"svelte"` \| `"solid"` \| `"lit"` \| `"stencil"` \| `"mdx"` \| `"astro"` \| `"riot"` \| `"malina"` \| `"jquery"` \| `"backbone"` \| `"knockout"` \| `"jest"` \| `"jest-react"` \| `"bootstrap"` \| `"tailwindcss"` \| `"shadcn-ui"` \| `"daisyui"` \| `"d3"` \| `"phaser"` \| `"coffeescript"` \| `"livescript"` \| `"civet"` \| `"clio"` \| `"imba"` \| `"rescript"` \| `"reason"` \| `"ocaml"` \| `"python"` \| `"pyodide"` \| `"python-wasm"` \| `"r"` \| `"ruby"` \| `"ruby-wasm"` \| `"go"` \| `"php"` \| `"php-wasm"` \| `"cpp"` \| `"clang"` \| `"cpp-wasm"` \| `"java"` \| `"csharp-wasm"` \| `"perl"` \| `"lua"` \| `"lua-wasm"` \| `"teal"` \| `"fennel"` \| `"julia"` \| `"scheme"` \| `"commonlisp"` \| `"clojurescript"` \| `"gleam"` \| `"tcl"` \| `"markdown"` \| `"assemblyscript"` \| `"wat"` \| `"sql"` \| `"postgresql"` \| `"prolog"` \| `"blockly"` \| `"diagrams"` + +## Defined in + +[models.ts:1376](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1376) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/TemplateName/index.html b/docs/api/internal/type-aliases/TemplateName/index.html new file mode 100644 index 0000000..85f4d25 --- /dev/null +++ b/docs/api/internal/type-aliases/TemplateName/index.html @@ -0,0 +1,16 @@ +Type Alias: TemplateName | LiveCodes
Skip to main content

Type Alias: TemplateName

+
+

TemplateName: "blank" | "javascript" | "typescript" | "react" | "react-native" | "vue2" | "vue" | "angular" | "preact" | "svelte" | "solid" | "lit" | "stencil" | "mdx" | "astro" | "riot" | "malina" | "jquery" | "backbone" | "knockout" | "jest" | "jest-react" | "bootstrap" | "tailwindcss" | "shadcn-ui" | "daisyui" | "d3" | "phaser" | "coffeescript" | "livescript" | "civet" | "clio" | "imba" | "rescript" | "reason" | "ocaml" | "python" | "pyodide" | "python-wasm" | "r" | "ruby" | "ruby-wasm" | "go" | "php" | "php-wasm" | "cpp" | "clang" | "cpp-wasm" | "java" | "csharp-wasm" | "perl" | "lua" | "lua-wasm" | "teal" | "fennel" | "julia" | "scheme" | "commonlisp" | "clojurescript" | "gleam" | "tcl" | "markdown" | "assemblyscript" | "wat" | "sql" | "postgresql" | "prolog" | "blockly" | "diagrams"

+
+

Defined in​

+

models.ts:1376

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/Theme.html.md b/docs/api/internal/type-aliases/Theme.html.md new file mode 100644 index 0000000..25b5a97 --- /dev/null +++ b/docs/api/internal/type-aliases/Theme.html.md @@ -0,0 +1,7 @@ +# Type Alias: Theme + +> **Theme**: `"light"` \| `"dark"` + +## Defined in + +[models.ts:1926](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1926) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/Theme/index.html b/docs/api/internal/type-aliases/Theme/index.html new file mode 100644 index 0000000..3ad7aec --- /dev/null +++ b/docs/api/internal/type-aliases/Theme/index.html @@ -0,0 +1,16 @@ +Type Alias: Theme | LiveCodes
Skip to main content
+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/ToolsPaneStatus.html.md b/docs/api/internal/type-aliases/ToolsPaneStatus.html.md new file mode 100644 index 0000000..c924cf4 --- /dev/null +++ b/docs/api/internal/type-aliases/ToolsPaneStatus.html.md @@ -0,0 +1,7 @@ +# Type Alias: ToolsPaneStatus + +> **ToolsPaneStatus**: `"closed"` \| `"open"` \| `"full"` \| `"none"` \| `""` + +## Defined in + +[models.ts:1456](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1456) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/ToolsPaneStatus/index.html b/docs/api/internal/type-aliases/ToolsPaneStatus/index.html new file mode 100644 index 0000000..89fa800 --- /dev/null +++ b/docs/api/internal/type-aliases/ToolsPaneStatus/index.html @@ -0,0 +1,16 @@ +Type Alias: ToolsPaneStatus | LiveCodes
Skip to main content
+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/WatchCode.html.md b/docs/api/internal/type-aliases/WatchCode.html.md new file mode 100644 index 0000000..02a0156 --- /dev/null +++ b/docs/api/internal/type-aliases/WatchCode.html.md @@ -0,0 +1,37 @@ +# Type Alias: WatchCode() + +> **WatchCode**: (`event`, `fn`) => `object` + +Called when the playground "content" is changed (see [`getCode`](https://livecodes.io/docs/sdk/js-ts#getcode) and [`getConfig`](https://livecodes.io/docs/sdk/js-ts#getcode)). + +This includes changes in: +- Code (in editors) +- Editor [languages](https://livecodes.io/docs/languages/) +- [CSS processors](https://livecodes.io/docs/features/css#css-processors) +- [External resources](https://livecodes.io/docs/features/external-resources) +- Project info (e.g. allows adding content in page head and attributes to `` element) +- [Custom settings](https://livecodes.io/docs/advanced/custom-settings) (e.g. allows changing [import maps](https://livecodes.io/docs/features/module-resolution#custom-module-resolution)) +- Project title +- [Test](https://livecodes.io/docs/features/tests) code + +## Parameters + +• **event**: `"code"` + +• **fn** + +## Returns + +`object` + +### remove() + +> **remove**: () => `void` + +#### Returns + +`void` + +## Defined in + +[models.ts:248](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L248) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/WatchCode/index.html b/docs/api/internal/type-aliases/WatchCode/index.html new file mode 100644 index 0000000..6bd47aa --- /dev/null +++ b/docs/api/internal/type-aliases/WatchCode/index.html @@ -0,0 +1,39 @@ +Type Alias: WatchCode() | LiveCodes
Skip to main content

Type Alias: WatchCode()

+
+

WatchCode: (event, fn) => object

+
+

Called when the playground "content" is changed (see getCode and getConfig).

+

This includes changes in:

+ +

Parameters​

+

• event: "code"

+

• fn

+

Returns​

+

object

+

remove()​

+
+

remove: () => void

+
+

Returns​

+

void

+

Defined in​

+

models.ts:248

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/WatchConsole.html.md b/docs/api/internal/type-aliases/WatchConsole.html.md new file mode 100644 index 0000000..4f5ea04 --- /dev/null +++ b/docs/api/internal/type-aliases/WatchConsole.html.md @@ -0,0 +1,25 @@ +# Type Alias: WatchConsole() + +> **WatchConsole**: (`event`, `fn`) => `object` + +## Parameters + +• **event**: `"console"` + +• **fn** + +## Returns + +`object` + +### remove() + +> **remove**: () => `void` + +#### Returns + +`void` + +## Defined in + +[models.ts:253](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L253) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/WatchConsole/index.html b/docs/api/internal/type-aliases/WatchConsole/index.html new file mode 100644 index 0000000..3d0a454 --- /dev/null +++ b/docs/api/internal/type-aliases/WatchConsole/index.html @@ -0,0 +1,27 @@ +Type Alias: WatchConsole() | LiveCodes
Skip to main content

Type Alias: WatchConsole()

+
+

WatchConsole: (event, fn) => object

+
+

Parameters​

+

• event: "console"

+

• fn

+

Returns​

+

object

+

remove()​

+
+

remove: () => void

+
+

Returns​

+

void

+

Defined in​

+

models.ts:253

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/WatchDestroy.html.md b/docs/api/internal/type-aliases/WatchDestroy.html.md new file mode 100644 index 0000000..c5d68a7 --- /dev/null +++ b/docs/api/internal/type-aliases/WatchDestroy.html.md @@ -0,0 +1,25 @@ +# Type Alias: WatchDestroy() + +> **WatchDestroy**: (`event`, `fn`) => `object` + +## Parameters + +• **event**: `"destroy"` + +• **fn** + +## Returns + +`object` + +### remove() + +> **remove**: () => `void` + +#### Returns + +`void` + +## Defined in + +[models.ts:263](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L263) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/WatchDestroy/index.html b/docs/api/internal/type-aliases/WatchDestroy/index.html new file mode 100644 index 0000000..f6801b5 --- /dev/null +++ b/docs/api/internal/type-aliases/WatchDestroy/index.html @@ -0,0 +1,27 @@ +Type Alias: WatchDestroy() | LiveCodes
Skip to main content

Type Alias: WatchDestroy()

+
+

WatchDestroy: (event, fn) => object

+
+

Parameters​

+

• event: "destroy"

+

• fn

+

Returns​

+

object

+

remove()​

+
+

remove: () => void

+
+

Returns​

+

void

+

Defined in​

+

models.ts:263

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/WatchLoad.html.md b/docs/api/internal/type-aliases/WatchLoad.html.md new file mode 100644 index 0000000..3db26fd --- /dev/null +++ b/docs/api/internal/type-aliases/WatchLoad.html.md @@ -0,0 +1,27 @@ +# Type Alias: WatchLoad() + +> **WatchLoad**: (`event`, `fn`) => `object` + +Called when the playground first loads. + +## Parameters + +• **event**: `"load"` + +• **fn** + +## Returns + +`object` + +### remove() + +> **remove**: () => `void` + +#### Returns + +`void` + +## Defined in + +[models.ts:225](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L225) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/WatchLoad/index.html b/docs/api/internal/type-aliases/WatchLoad/index.html new file mode 100644 index 0000000..4ad1804 --- /dev/null +++ b/docs/api/internal/type-aliases/WatchLoad/index.html @@ -0,0 +1,28 @@ +Type Alias: WatchLoad() | LiveCodes
Skip to main content

Type Alias: WatchLoad()

+
+

WatchLoad: (event, fn) => object

+
+

Called when the playground first loads.

+

Parameters​

+

• event: "load"

+

• fn

+

Returns​

+

object

+

remove()​

+
+

remove: () => void

+
+

Returns​

+

void

+

Defined in​

+

models.ts:225

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/WatchReady.html.md b/docs/api/internal/type-aliases/WatchReady.html.md new file mode 100644 index 0000000..54f9f93 --- /dev/null +++ b/docs/api/internal/type-aliases/WatchReady.html.md @@ -0,0 +1,27 @@ +# Type Alias: WatchReady() + +> **WatchReady**: (`event`, `fn`) => `object` + +Called when a new project is loaded (including when [imported](https://livecodes.io/docs/features/import)) and the playground is ready to run. + +## Parameters + +• **event**: `"ready"` + +• **fn** + +## Returns + +`object` + +### remove() + +> **remove**: () => `void` + +#### Returns + +`void` + +## Defined in + +[models.ts:230](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L230) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/WatchReady/index.html b/docs/api/internal/type-aliases/WatchReady/index.html new file mode 100644 index 0000000..37f6b8c --- /dev/null +++ b/docs/api/internal/type-aliases/WatchReady/index.html @@ -0,0 +1,28 @@ +Type Alias: WatchReady() | LiveCodes
Skip to main content

Type Alias: WatchReady()

+
+

WatchReady: (event, fn) => object

+
+

Called when a new project is loaded (including when imported) and the playground is ready to run.

+

Parameters​

+

• event: "ready"

+

• fn

+

Returns​

+

object

+

remove()​

+
+

remove: () => void

+
+

Returns​

+

void

+

Defined in​

+

models.ts:230

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/internal/type-aliases/WatchTests.html.md b/docs/api/internal/type-aliases/WatchTests.html.md new file mode 100644 index 0000000..77b4e6f --- /dev/null +++ b/docs/api/internal/type-aliases/WatchTests.html.md @@ -0,0 +1,25 @@ +# Type Alias: WatchTests() + +> **WatchTests**: (`event`, `fn`) => `object` + +## Parameters + +• **event**: `"tests"` + +• **fn** + +## Returns + +`object` + +### remove() + +> **remove**: () => `void` + +#### Returns + +`void` + +## Defined in + +[models.ts:258](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L258) \ No newline at end of file diff --git a/docs/api/internal/type-aliases/WatchTests/index.html b/docs/api/internal/type-aliases/WatchTests/index.html new file mode 100644 index 0000000..59ecfaa --- /dev/null +++ b/docs/api/internal/type-aliases/WatchTests/index.html @@ -0,0 +1,27 @@ +Type Alias: WatchTests() | LiveCodes
Skip to main content

Type Alias: WatchTests()

+
+

WatchTests: (event, fn) => object

+
+

Parameters​

+

• event: "tests"

+

• fn

+

Returns​

+

object

+

remove()​

+
+

remove: () => void

+
+

Returns​

+

void

+

Defined in​

+

models.ts:258

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/api/type-aliases/Language.html.md b/docs/api/type-aliases/Language.html.md new file mode 100644 index 0000000..a90e13c --- /dev/null +++ b/docs/api/type-aliases/Language.html.md @@ -0,0 +1,9 @@ +# Type Alias: Language + +> **Language**: `"html"` \| `"htm"` \| `"markdown"` \| `"md"` \| `"mdown"` \| `"mkdn"` \| `"mdx"` \| `"astro"` \| `"pug"` \| `"jade"` \| `"haml"` \| `"asciidoc"` \| `"adoc"` \| `"asc"` \| `"mustache"` \| `"handlebars"` \| `"hbs"` \| `"ejs"` \| `"eta"` \| `"nunjucks"` \| `"njk"` \| `"liquid"` \| `"liquidjs"` \| `"dot"` \| `"twig"` \| `"vento"` \| `"vto"` \| `"art-template"` \| `"art"` \| `"jinja"` \| `"bbcode"` \| `"bb"` \| `"mjml"` \| `"diagrams"` \| `"diagram"` \| `"graph"` \| `"plt"` \| `"richtext"` \| `"rte"` \| `"rich"` \| `"rte.html"` \| `"css"` \| `"scss"` \| `"sass"` \| `"less"` \| `"stylus"` \| `"styl"` \| `"stylis"` \| `"postcss"` \| `"javascript"` \| `"js"` \| `"json"` \| `"babel"` \| `"es"` \| `"sucrase"` \| `"typescript"` \| `"flow"` \| `"ts"` \| `"jsx"` \| `"tsx"` \| `"react"` \| `"react-jsx"` \| `"react.jsx"` \| `"react-tsx"` \| `"react.tsx"` \| `"react-native"` \| `"react-native.jsx"` \| `"react-native-tsx"` \| `"react-native.tsx"` \| `"vue"` \| `"vue3"` \| `"vue2"` \| `"vue-app"` \| `"app.vue"` \| `"svelte"` \| `"svelte-app"` \| `"app.svelte"` \| `"stencil"` \| `"stencil.tsx"` \| `"solid"` \| `"solid.jsx"` \| `"solid.tsx"` \| `"riot"` \| `"riotjs"` \| `"malina"` \| `"malinajs"` \| `"xht"` \| `"coffeescript"` \| `"coffee"` \| `"livescript"` \| `"ls"` \| `"civet"` \| `"clio"` \| `"imba"` \| `"assemblyscript"` \| `"as"` \| `"python"` \| `"py"` \| `"pyodide"` \| `"python-wasm"` \| `"py-wasm"` \| `"pythonwasm"` \| `"pywasm"` \| `"py3"` \| `"wasm.py"` \| `"r"` \| `"rlang"` \| `"rstats"` \| `"r-wasm"` \| `"ruby"` \| `"rb"` \| `"ruby-wasm"` \| `"wasm.rb"` \| `"rubywasm"` \| `"go"` \| `"golang"` \| `"php"` \| `"php-wasm"` \| `"phpwasm"` \| `"wasm.php"` \| `"cpp"` \| `"c"` \| `"C"` \| `"cp"` \| `"cxx"` \| `"c++"` \| `"cppm"` \| `"ixx"` \| `"ii"` \| `"hpp"` \| `"h"` \| `"cpp-wasm"` \| `"cppwasm"` \| `"cwasm"` \| `"wasm.cpp"` \| `"clang"` \| `"clang.cpp"` \| `"java"` \| `"csharp"` \| `"csharp-wasm"` \| `"cs"` \| `"cs-wasm"` \| `"wasm.cs"` \| `"perl"` \| `"pl"` \| `"pm"` \| `"lua"` \| `"lua-wasm"` \| `"luawasm"` \| `"wasm.lua"` \| `"teal"` \| `"tl"` \| `"fennel"` \| `"fnl"` \| `"julia"` \| `"jl"` \| `"scheme"` \| `"scm"` \| `"commonlisp"` \| `"common-lisp"` \| `"lisp"` \| `"clojurescript"` \| `"clojure"` \| `"cljs"` \| `"clj"` \| `"cljc"` \| `"edn"` \| `"gleam"` \| `"rescript"` \| `"res"` \| `"resi"` \| `"reason"` \| `"re"` \| `"rei"` \| `"ocaml"` \| `"ml"` \| `"mli"` \| `"tcl"` \| `"wat"` \| `"wast"` \| `"webassembly"` \| `"wasm"` \| `"Binary"` \| `"sql"` \| `"sqlite"` \| `"sqlite3"` \| `"pg.sql"` \| `"pgsql.sql"` \| `"pgsql"` \| `"pg"` \| `"pglite"` \| `"pglite.sql"` \| `"postgresql"` \| `"postgres"` \| `"postgre.sql"` \| `"postgresql.sql"` \| `"prolog.pl"` \| `"prolog"` \| `"blockly"` \| `"blockly.xml"` \| `"xml"` \| `"pintora"` + +Language name, alias or extension. + +## Defined in + +[models.ts:884](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L884) \ No newline at end of file diff --git a/docs/api/type-aliases/Language/index.html b/docs/api/type-aliases/Language/index.html new file mode 100644 index 0000000..8504025 --- /dev/null +++ b/docs/api/type-aliases/Language/index.html @@ -0,0 +1,17 @@ +Type Alias: Language | LiveCodes
Skip to main content

Type Alias: Language

+
+

Language: "html" | "htm" | "markdown" | "md" | "mdown" | "mkdn" | "mdx" | "astro" | "pug" | "jade" | "haml" | "asciidoc" | "adoc" | "asc" | "mustache" | "handlebars" | "hbs" | "ejs" | "eta" | "nunjucks" | "njk" | "liquid" | "liquidjs" | "dot" | "twig" | "vento" | "vto" | "art-template" | "art" | "jinja" | "bbcode" | "bb" | "mjml" | "diagrams" | "diagram" | "graph" | "plt" | "richtext" | "rte" | "rich" | "rte.html" | "css" | "scss" | "sass" | "less" | "stylus" | "styl" | "stylis" | "postcss" | "javascript" | "js" | "json" | "babel" | "es" | "sucrase" | "typescript" | "flow" | "ts" | "jsx" | "tsx" | "react" | "react-jsx" | "react.jsx" | "react-tsx" | "react.tsx" | "react-native" | "react-native.jsx" | "react-native-tsx" | "react-native.tsx" | "vue" | "vue3" | "vue2" | "vue-app" | "app.vue" | "svelte" | "svelte-app" | "app.svelte" | "stencil" | "stencil.tsx" | "solid" | "solid.jsx" | "solid.tsx" | "riot" | "riotjs" | "malina" | "malinajs" | "xht" | "coffeescript" | "coffee" | "livescript" | "ls" | "civet" | "clio" | "imba" | "assemblyscript" | "as" | "python" | "py" | "pyodide" | "python-wasm" | "py-wasm" | "pythonwasm" | "pywasm" | "py3" | "wasm.py" | "r" | "rlang" | "rstats" | "r-wasm" | "ruby" | "rb" | "ruby-wasm" | "wasm.rb" | "rubywasm" | "go" | "golang" | "php" | "php-wasm" | "phpwasm" | "wasm.php" | "cpp" | "c" | "C" | "cp" | "cxx" | "c++" | "cppm" | "ixx" | "ii" | "hpp" | "h" | "cpp-wasm" | "cppwasm" | "cwasm" | "wasm.cpp" | "clang" | "clang.cpp" | "java" | "csharp" | "csharp-wasm" | "cs" | "cs-wasm" | "wasm.cs" | "perl" | "pl" | "pm" | "lua" | "lua-wasm" | "luawasm" | "wasm.lua" | "teal" | "tl" | "fennel" | "fnl" | "julia" | "jl" | "scheme" | "scm" | "commonlisp" | "common-lisp" | "lisp" | "clojurescript" | "clojure" | "cljs" | "clj" | "cljc" | "edn" | "gleam" | "rescript" | "res" | "resi" | "reason" | "re" | "rei" | "ocaml" | "ml" | "mli" | "tcl" | "wat" | "wast" | "webassembly" | "wasm" | "Binary" | "sql" | "sqlite" | "sqlite3" | "pg.sql" | "pgsql.sql" | "pgsql" | "pg" | "pglite" | "pglite.sql" | "postgresql" | "postgres" | "postgre.sql" | "postgresql.sql" | "prolog.pl" | "prolog" | "blockly" | "blockly.xml" | "xml" | "pintora"

+
+

Language name, alias or extension.

+

Defined in​

+

models.ts:884

+
+
Sponsors
+ +
+
\ No newline at end of file diff --git a/docs/assets/css/styles.61e3dfbf.css b/docs/assets/css/styles.61e3dfbf.css new file mode 100644 index 0000000..fceed04 --- /dev/null +++ b/docs/assets/css/styles.61e3dfbf.css @@ -0,0 +1 @@ +:root{--ifm-color-scheme:light;--ifm-dark-value:10%;--ifm-darker-value:15%;--ifm-darkest-value:30%;--ifm-light-value:15%;--ifm-lighter-value:30%;--ifm-lightest-value:50%;--ifm-contrast-background-value:90%;--ifm-contrast-foreground-value:70%;--ifm-contrast-background-dark-value:70%;--ifm-contrast-foreground-dark-value:90%;--ifm-color-primary:#3578e5;--ifm-color-secondary:#ebedf0;--ifm-color-success:#00a400;--ifm-color-info:#54c7ec;--ifm-color-warning:#ffba00;--ifm-color-danger:#fa383e;--ifm-color-primary-dark:#306cce;--ifm-color-primary-darker:#2d66c3;--ifm-color-primary-darkest:#2554a0;--ifm-color-primary-light:#538ce9;--ifm-color-primary-lighter:#72a1ed;--ifm-color-primary-lightest:#9abcf2;--ifm-color-primary-contrast-background:#ebf2fc;--ifm-color-primary-contrast-foreground:#102445;--ifm-color-secondary-dark:#d4d5d8;--ifm-color-secondary-darker:#c8c9cc;--ifm-color-secondary-darkest:#a4a6a8;--ifm-color-secondary-light:#eef0f2;--ifm-color-secondary-lighter:#f1f2f5;--ifm-color-secondary-lightest:#f5f6f8;--ifm-color-secondary-contrast-background:#fdfdfe;--ifm-color-secondary-contrast-foreground:#474748;--ifm-color-success-dark:#009400;--ifm-color-success-darker:#008b00;--ifm-color-success-darkest:#007300;--ifm-color-success-light:#26b226;--ifm-color-success-lighter:#4dbf4d;--ifm-color-success-lightest:#80d280;--ifm-color-success-contrast-background:#e6f6e6;--ifm-color-success-contrast-foreground:#003100;--ifm-color-info-dark:#4cb3d4;--ifm-color-info-darker:#47a9c9;--ifm-color-info-darkest:#3b8ba5;--ifm-color-info-light:#6ecfef;--ifm-color-info-lighter:#87d8f2;--ifm-color-info-lightest:#aae3f6;--ifm-color-info-contrast-background:#eef9fd;--ifm-color-info-contrast-foreground:#193c47;--ifm-color-warning-dark:#e6a700;--ifm-color-warning-darker:#d99e00;--ifm-color-warning-darkest:#b38200;--ifm-color-warning-light:#ffc426;--ifm-color-warning-lighter:#ffcf4d;--ifm-color-warning-lightest:#ffdd80;--ifm-color-warning-contrast-background:#fff8e6;--ifm-color-warning-contrast-foreground:#4d3800;--ifm-color-danger-dark:#e13238;--ifm-color-danger-darker:#d53035;--ifm-color-danger-darkest:#af272b;--ifm-color-danger-light:#fb565b;--ifm-color-danger-lighter:#fb7478;--ifm-color-danger-lightest:#fd9c9f;--ifm-color-danger-contrast-background:#ffebec;--ifm-color-danger-contrast-foreground:#4b1113;--ifm-color-white:#fff;--ifm-color-black:#000;--ifm-color-gray-0:var(--ifm-color-white);--ifm-color-gray-100:#f5f6f7;--ifm-color-gray-200:#ebedf0;--ifm-color-gray-300:#dadde1;--ifm-color-gray-400:#ccd0d5;--ifm-color-gray-500:#bec3c9;--ifm-color-gray-600:#8d949e;--ifm-color-gray-700:#606770;--ifm-color-gray-800:#444950;--ifm-color-gray-900:#1c1e21;--ifm-color-gray-1000:var(--ifm-color-black);--ifm-color-emphasis-0:var(--ifm-color-gray-0);--ifm-color-emphasis-100:var(--ifm-color-gray-100);--ifm-color-emphasis-200:var(--ifm-color-gray-200);--ifm-color-emphasis-300:var(--ifm-color-gray-300);--ifm-color-emphasis-400:var(--ifm-color-gray-400);--ifm-color-emphasis-500:var(--ifm-color-gray-500);--ifm-color-emphasis-600:var(--ifm-color-gray-600);--ifm-color-emphasis-700:var(--ifm-color-gray-700);--ifm-color-emphasis-800:var(--ifm-color-gray-800);--ifm-color-emphasis-900:var(--ifm-color-gray-900);--ifm-color-emphasis-1000:var(--ifm-color-gray-1000);--ifm-color-content:var(--ifm-color-emphasis-900);--ifm-color-content-inverse:var(--ifm-color-emphasis-0);--ifm-color-content-secondary:#525860;--ifm-background-color:transparent;--ifm-background-surface-color:var(--ifm-color-content-inverse);--ifm-global-border-width:1px;--ifm-global-radius:.4rem;--ifm-hover-overlay:rgba(0,0,0,.05);--ifm-font-color-base:var(--ifm-color-content);--ifm-font-color-base-inverse:var(--ifm-color-content-inverse);--ifm-font-color-secondary:var(--ifm-color-content-secondary);--ifm-font-family-base:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--ifm-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--ifm-font-size-base:100%;--ifm-font-weight-light:300;--ifm-font-weight-normal:400;--ifm-font-weight-semibold:500;--ifm-font-weight-bold:700;--ifm-font-weight-base:var(--ifm-font-weight-normal);--ifm-line-height-base:1.65;--ifm-global-spacing:1rem;--ifm-spacing-vertical:var(--ifm-global-spacing);--ifm-spacing-horizontal:var(--ifm-global-spacing);--ifm-transition-fast:.2s;--ifm-transition-slow:.4s;--ifm-transition-timing-default:cubic-bezier(.08,.52,.52,1);--ifm-global-shadow-lw:0 1px 2px 0 rgba(0,0,0,.1);--ifm-global-shadow-md:0 5px 40px rgba(0,0,0,.2);--ifm-global-shadow-tl:0 12px 28px 0 rgba(0,0,0,.2),0 2px 4px 0 rgba(0,0,0,.1);--ifm-z-index-dropdown:100;--ifm-z-index-fixed:200;--ifm-z-index-overlay:400;--ifm-container-width:1140px;--ifm-container-width-xl:1320px;--ifm-code-background:#f6f7f8;--ifm-code-border-radius:var(--ifm-global-radius);--ifm-code-font-size:90%;--ifm-code-padding-horizontal:.1rem;--ifm-code-padding-vertical:.1rem;--ifm-pre-background:var(--ifm-code-background);--ifm-pre-border-radius:var(--ifm-code-border-radius);--ifm-pre-color:inherit;--ifm-pre-line-height:1.45;--ifm-pre-padding:1rem;--ifm-heading-color:inherit;--ifm-heading-margin-top:0;--ifm-heading-margin-bottom:var(--ifm-spacing-vertical);--ifm-heading-font-family:var(--ifm-font-family-base);--ifm-heading-font-weight:var(--ifm-font-weight-bold);--ifm-heading-line-height:1.25;--ifm-h1-font-size:2rem;--ifm-h2-font-size:1.5rem;--ifm-h3-font-size:1.25rem;--ifm-h4-font-size:1rem;--ifm-h5-font-size:.875rem;--ifm-h6-font-size:.85rem;--ifm-image-alignment-padding:1.25rem;--ifm-leading-desktop:1.25;--ifm-leading:calc(var(--ifm-leading-desktop)*1rem);--ifm-list-left-padding:2rem;--ifm-list-margin:1rem;--ifm-list-item-margin:.25rem;--ifm-list-paragraph-margin:1rem;--ifm-table-cell-padding:.75rem;--ifm-table-background:transparent;--ifm-table-stripe-background:rgba(0,0,0,.03);--ifm-table-border-width:1px;--ifm-table-border-color:var(--ifm-color-emphasis-300);--ifm-table-head-background:inherit;--ifm-table-head-color:inherit;--ifm-table-head-font-weight:var(--ifm-font-weight-bold);--ifm-table-cell-color:inherit;--ifm-link-color:var(--ifm-color-primary);--ifm-link-decoration:none;--ifm-link-hover-color:var(--ifm-link-color);--ifm-link-hover-decoration:underline;--ifm-paragraph-margin-bottom:var(--ifm-leading);--ifm-blockquote-font-size:var(--ifm-font-size-base);--ifm-blockquote-border-left-width:2px;--ifm-blockquote-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-blockquote-padding-vertical:0;--ifm-blockquote-shadow:none;--ifm-blockquote-color:var(--ifm-color-emphasis-800);--ifm-blockquote-border-color:var(--ifm-color-emphasis-300);--ifm-hr-background-color:var(--ifm-color-emphasis-500);--ifm-hr-height:1px;--ifm-hr-margin-vertical:1.5rem;--ifm-scrollbar-size:7px;--ifm-scrollbar-track-background-color:#f1f1f1;--ifm-scrollbar-thumb-background-color:silver;--ifm-scrollbar-thumb-hover-background-color:#a7a7a7;--ifm-alert-background-color:inherit;--ifm-alert-border-color:inherit;--ifm-alert-border-radius:var(--ifm-global-radius);--ifm-alert-border-width:0px;--ifm-alert-border-left-width:5px;--ifm-alert-color:var(--ifm-font-color-base);--ifm-alert-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-alert-padding-vertical:var(--ifm-spacing-vertical);--ifm-alert-shadow:var(--ifm-global-shadow-lw);--ifm-avatar-intro-margin:1rem;--ifm-avatar-intro-alignment:inherit;--ifm-avatar-photo-size:3rem;--ifm-badge-background-color:inherit;--ifm-badge-border-color:inherit;--ifm-badge-border-radius:var(--ifm-global-radius);--ifm-badge-border-width:var(--ifm-global-border-width);--ifm-badge-color:var(--ifm-color-white);--ifm-badge-padding-horizontal:calc(var(--ifm-spacing-horizontal)*.5);--ifm-badge-padding-vertical:calc(var(--ifm-spacing-vertical)*.25);--ifm-breadcrumb-border-radius:1.5rem;--ifm-breadcrumb-spacing:.5rem;--ifm-breadcrumb-color-active:var(--ifm-color-primary);--ifm-breadcrumb-item-background-active:var(--ifm-hover-overlay);--ifm-breadcrumb-padding-horizontal:.8rem;--ifm-breadcrumb-padding-vertical:.4rem;--ifm-breadcrumb-size-multiplier:1;--ifm-breadcrumb-separator:url("data:image/svg+xml;utf8,");--ifm-breadcrumb-separator-filter:none;--ifm-breadcrumb-separator-size:.5rem;--ifm-breadcrumb-separator-size-multiplier:1.25;--ifm-button-background-color:inherit;--ifm-button-border-color:var(--ifm-button-background-color);--ifm-button-border-width:var(--ifm-global-border-width);--ifm-button-color:var(--ifm-font-color-base-inverse);--ifm-button-font-weight:var(--ifm-font-weight-bold);--ifm-button-padding-horizontal:1.5rem;--ifm-button-padding-vertical:.375rem;--ifm-button-size-multiplier:1;--ifm-button-transition-duration:var(--ifm-transition-fast);--ifm-button-border-radius:calc(var(--ifm-global-radius)*var(--ifm-button-size-multiplier));--ifm-button-group-spacing:2px;--ifm-card-background-color:var(--ifm-background-surface-color);--ifm-card-border-radius:calc(var(--ifm-global-radius)*2);--ifm-card-horizontal-spacing:var(--ifm-global-spacing);--ifm-card-vertical-spacing:var(--ifm-global-spacing);--ifm-toc-border-color:var(--ifm-color-emphasis-300);--ifm-toc-link-color:var(--ifm-color-content-secondary);--ifm-toc-padding-vertical:.5rem;--ifm-toc-padding-horizontal:.5rem;--ifm-dropdown-background-color:var(--ifm-background-surface-color);--ifm-dropdown-font-weight:var(--ifm-font-weight-semibold);--ifm-dropdown-link-color:var(--ifm-font-color-base);--ifm-dropdown-hover-background-color:var(--ifm-hover-overlay);--ifm-footer-background-color:var(--ifm-color-emphasis-100);--ifm-footer-color:inherit;--ifm-footer-link-color:var(--ifm-color-emphasis-700);--ifm-footer-link-hover-color:var(--ifm-color-primary);--ifm-footer-link-horizontal-spacing:.5rem;--ifm-footer-padding-horizontal:calc(var(--ifm-spacing-horizontal)*2);--ifm-footer-padding-vertical:calc(var(--ifm-spacing-vertical)*2);--ifm-footer-title-color:inherit;--ifm-footer-logo-max-width:min(30rem,90vw);--ifm-hero-background-color:var(--ifm-background-surface-color);--ifm-hero-text-color:var(--ifm-color-emphasis-800);--ifm-menu-color:var(--ifm-color-emphasis-700);--ifm-menu-color-active:var(--ifm-color-primary);--ifm-menu-color-background-active:var(--ifm-hover-overlay);--ifm-menu-color-background-hover:var(--ifm-hover-overlay);--ifm-menu-link-padding-horizontal:.75rem;--ifm-menu-link-padding-vertical:.375rem;--ifm-menu-link-sublist-icon:url("data:image/svg+xml;utf8,");--ifm-menu-link-sublist-icon-filter:none;--ifm-navbar-background-color:var(--ifm-background-surface-color);--ifm-navbar-height:3.75rem;--ifm-navbar-item-padding-horizontal:.75rem;--ifm-navbar-item-padding-vertical:.25rem;--ifm-navbar-link-color:var(--ifm-font-color-base);--ifm-navbar-link-hover-color:var(--ifm-color-primary);--ifm-navbar-link-active-color:var(--ifm-link-color);--ifm-navbar-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-navbar-padding-vertical:calc(var(--ifm-spacing-vertical)*.5);--ifm-navbar-shadow:var(--ifm-global-shadow-lw);--ifm-navbar-search-input-background-color:var(--ifm-color-emphasis-200);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-800);--ifm-navbar-search-input-placeholder-color:var(--ifm-color-emphasis-500);--ifm-navbar-search-input-icon:url("data:image/svg+xml;utf8,");--ifm-navbar-sidebar-width:83vw;--ifm-pagination-border-radius:var(--ifm-global-radius);--ifm-pagination-color-active:var(--ifm-color-primary);--ifm-pagination-font-size:1rem;--ifm-pagination-item-active-background:var(--ifm-hover-overlay);--ifm-pagination-page-spacing:.2em;--ifm-pagination-padding-horizontal:calc(var(--ifm-spacing-horizontal)*1);--ifm-pagination-padding-vertical:calc(var(--ifm-spacing-vertical)*.25);--ifm-pagination-nav-border-radius:var(--ifm-global-radius);--ifm-pagination-nav-color-hover:var(--ifm-color-primary);--ifm-pills-color-active:var(--ifm-color-primary);--ifm-pills-color-background-active:var(--ifm-hover-overlay);--ifm-pills-spacing:.125rem;--ifm-tabs-color:var(--ifm-font-color-secondary);--ifm-tabs-color-active:var(--ifm-color-primary);--ifm-tabs-color-active-border:var(--ifm-tabs-color-active);--ifm-tabs-padding-horizontal:1rem;--ifm-tabs-padding-vertical:1rem}*{box-sizing:border-box}html{background-color:var(--ifm-background-color);color:var(--ifm-font-color-base);color-scheme:var(--ifm-color-scheme);font:var(--ifm-font-size-base)/var(--ifm-line-height-base)var(--ifm-font-family-base);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;text-rendering:optimizelegibility;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{word-wrap:break-word;margin:0}iframe{color-scheme:normal;border:0}.container{max-width:var(--ifm-container-width);padding:0 var(--ifm-spacing-horizontal);width:100%;margin:0 auto}.container--fluid{max-width:inherit}.row{margin:0 calc(var(--ifm-spacing-horizontal)*-1);flex-wrap:wrap;display:flex}.row--no-gutters{margin-left:0;margin-right:0}.row--no-gutters>.col{padding-left:0;padding-right:0}.row--align-top{align-items:flex-start}.row--align-bottom{align-items:flex-end}.row--align-center{align-items:center}.row--align-stretch{align-items:stretch}.row--align-baseline{align-items:baseline}.col{--ifm-col-width:100%;max-width:var(--ifm-col-width);padding:0 var(--ifm-spacing-horizontal);flex:1 0;width:100%;margin-left:0}.col[class*=col--]{flex:0 0 var(--ifm-col-width)}.col--1{--ifm-col-width:calc(1/12*100%)}.col--offset-1{margin-left:8.33333%}.col--2{--ifm-col-width:calc(2/12*100%)}.col--offset-2{margin-left:16.6667%}.col--3{--ifm-col-width:calc(3/12*100%)}.col--offset-3{margin-left:25%}.col--4{--ifm-col-width:calc(4/12*100%)}.col--offset-4{margin-left:33.3333%}.col--5{--ifm-col-width:calc(5/12*100%)}.col--offset-5{margin-left:41.6667%}.col--6{--ifm-col-width:calc(6/12*100%)}.col--offset-6{margin-left:50%}.col--7{--ifm-col-width:calc(7/12*100%)}.col--offset-7{margin-left:58.3333%}.col--8{--ifm-col-width:calc(8/12*100%)}.col--offset-8{margin-left:66.6667%}.col--9{--ifm-col-width:calc(9/12*100%)}.col--offset-9{margin-left:75%}.col--10{--ifm-col-width:calc(10/12*100%)}.col--offset-10{margin-left:83.3333%}.col--11{--ifm-col-width:calc(11/12*100%)}.col--offset-11{margin-left:91.6667%}.col--12{--ifm-col-width:calc(12/12*100%)}.col--offset-12{margin-left:100%}.margin--none{margin:0!important}.margin-top--none{margin-top:0!important}.margin-left--none{margin-left:0!important}.margin-bottom--none{margin-bottom:0!important}.margin-right--none{margin-right:0!important}.margin-vert--none{margin-top:0!important;margin-bottom:0!important}.margin-horiz--none{margin-left:0!important;margin-right:0!important}.margin--xs{margin:.25rem!important}.margin-top--xs{margin-top:.25rem!important}.margin-left--xs{margin-left:.25rem!important}.margin-bottom--xs{margin-bottom:.25rem!important}.margin-right--xs{margin-right:.25rem!important}.margin-vert--xs{margin-top:.25rem!important;margin-bottom:.25rem!important}.margin-horiz--xs{margin-left:.25rem!important;margin-right:.25rem!important}.margin--sm{margin:.5rem!important}.margin-top--sm{margin-top:.5rem!important}.margin-left--sm{margin-left:.5rem!important}.margin-bottom--sm{margin-bottom:.5rem!important}.margin-right--sm{margin-right:.5rem!important}.margin-vert--sm{margin-top:.5rem!important;margin-bottom:.5rem!important}.margin-horiz--sm{margin-left:.5rem!important;margin-right:.5rem!important}.margin--md{margin:1rem!important}.margin-top--md{margin-top:1rem!important}.margin-left--md{margin-left:1rem!important}.margin-bottom--md{margin-bottom:1rem!important}.margin-right--md{margin-right:1rem!important}.margin-vert--md{margin-top:1rem!important;margin-bottom:1rem!important}.margin-horiz--md{margin-left:1rem!important;margin-right:1rem!important}.margin--lg{margin:2rem!important}.margin-top--lg{margin-top:2rem!important}.margin-left--lg{margin-left:2rem!important}.margin-bottom--lg{margin-bottom:2rem!important}.margin-right--lg{margin-right:2rem!important}.margin-vert--lg{margin-top:2rem!important;margin-bottom:2rem!important}.margin-horiz--lg{margin-left:2rem!important;margin-right:2rem!important}.margin--xl{margin:5rem!important}.margin-top--xl{margin-top:5rem!important}.margin-left--xl{margin-left:5rem!important}.margin-bottom--xl{margin-bottom:5rem!important}.margin-right--xl{margin-right:5rem!important}.margin-vert--xl{margin-top:5rem!important;margin-bottom:5rem!important}.margin-horiz--xl{margin-left:5rem!important;margin-right:5rem!important}.padding--none{padding:0!important}.padding-top--none{padding-top:0!important}.padding-left--none{padding-left:0!important}.padding-bottom--none{padding-bottom:0!important}.padding-right--none{padding-right:0!important}.padding-vert--none{padding-top:0!important;padding-bottom:0!important}.padding-horiz--none{padding-left:0!important;padding-right:0!important}.padding--xs{padding:.25rem!important}.padding-top--xs{padding-top:.25rem!important}.padding-left--xs{padding-left:.25rem!important}.padding-bottom--xs{padding-bottom:.25rem!important}.padding-right--xs{padding-right:.25rem!important}.padding-vert--xs{padding-top:.25rem!important;padding-bottom:.25rem!important}.padding-horiz--xs{padding-left:.25rem!important;padding-right:.25rem!important}.padding--sm{padding:.5rem!important}.padding-top--sm{padding-top:.5rem!important}.padding-left--sm{padding-left:.5rem!important}.padding-bottom--sm{padding-bottom:.5rem!important}.padding-right--sm{padding-right:.5rem!important}.padding-vert--sm{padding-top:.5rem!important;padding-bottom:.5rem!important}.padding-horiz--sm{padding-left:.5rem!important;padding-right:.5rem!important}.padding--md{padding:1rem!important}.padding-top--md{padding-top:1rem!important}.padding-left--md{padding-left:1rem!important}.padding-bottom--md{padding-bottom:1rem!important}.padding-right--md{padding-right:1rem!important}.padding-vert--md{padding-top:1rem!important;padding-bottom:1rem!important}.padding-horiz--md{padding-left:1rem!important;padding-right:1rem!important}.padding--lg{padding:2rem!important}.padding-top--lg{padding-top:2rem!important}.padding-left--lg{padding-left:2rem!important}.padding-bottom--lg{padding-bottom:2rem!important}.padding-right--lg{padding-right:2rem!important}.padding-vert--lg{padding-top:2rem!important;padding-bottom:2rem!important}.padding-horiz--lg{padding-left:2rem!important;padding-right:2rem!important}.padding--xl{padding:5rem!important}.padding-top--xl{padding-top:5rem!important}.padding-left--xl{padding-left:5rem!important}.padding-bottom--xl{padding-bottom:5rem!important}.padding-right--xl{padding-right:5rem!important}.padding-vert--xl{padding-top:5rem!important;padding-bottom:5rem!important}.padding-horiz--xl{padding-left:5rem!important;padding-right:5rem!important}code{background-color:var(--ifm-code-background);border-radius:var(--ifm-code-border-radius);font-family:var(--ifm-font-family-monospace);font-size:var(--ifm-code-font-size);padding:var(--ifm-code-padding-vertical)var(--ifm-code-padding-horizontal);vertical-align:middle;border:.1rem solid rgba(0,0,0,.1)}a code{color:inherit}pre{background-color:var(--ifm-pre-background);border-radius:var(--ifm-pre-border-radius);color:var(--ifm-pre-color);font:var(--ifm-code-font-size)/var(--ifm-pre-line-height)var(--ifm-font-family-monospace);margin:0 0 var(--ifm-spacing-vertical);padding:var(--ifm-pre-padding);overflow:auto}pre code{font-size:100%;line-height:inherit;background-color:transparent;border:none;padding:0}kbd{background-color:var(--ifm-color-emphasis-0);border:1px solid var(--ifm-color-emphasis-400);box-shadow:inset 0 -1px 0 var(--ifm-color-emphasis-400);color:var(--ifm-color-emphasis-800);font:80% var(--ifm-font-family-monospace);border-radius:.2rem;padding:.15rem .3rem}h1,h2,h3,h4,h5,h6{color:var(--ifm-heading-color);font-family:var(--ifm-heading-font-family);font-weight:var(--ifm-heading-font-weight);line-height:var(--ifm-heading-line-height);margin:var(--ifm-heading-margin-top)0 var(--ifm-heading-margin-bottom)0}h1{font-size:var(--ifm-h1-font-size)}h2{font-size:var(--ifm-h2-font-size)}h3{font-size:var(--ifm-h3-font-size)}h4{font-size:var(--ifm-h4-font-size)}h5{font-size:var(--ifm-h5-font-size)}h6{font-size:var(--ifm-h6-font-size)}img{max-width:100%}img[align=right]{padding-left:var(--image-alignment-padding)}img[align=left]{padding-right:var(--image-alignment-padding)}.markdown{--ifm-h1-vertical-rhythm-top:3;--ifm-h2-vertical-rhythm-top:2;--ifm-h3-vertical-rhythm-top:1.5;--ifm-heading-vertical-rhythm-top:1.25;--ifm-h1-vertical-rhythm-bottom:1.25;--ifm-heading-vertical-rhythm-bottom:1}.markdown:before{content:"";display:table}.markdown:after{clear:both;content:"";display:table}.markdown>:last-child{margin-bottom:0!important}.markdown h1:first-child{--ifm-h1-font-size:3rem;margin-bottom:calc(var(--ifm-h1-vertical-rhythm-bottom)*var(--ifm-leading))}.markdown>h2{--ifm-h2-font-size:2rem;margin-bottom:calc(var(--ifm-heading-vertical-rhythm-bottom)*var(--ifm-leading));margin-top:calc(var(--ifm-h2-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h3{--ifm-h3-font-size:1.5rem;margin-bottom:calc(var(--ifm-heading-vertical-rhythm-bottom)*var(--ifm-leading));margin-top:calc(var(--ifm-h3-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h4,.markdown>h5,.markdown>h6{margin-bottom:calc(var(--ifm-heading-vertical-rhythm-bottom)*var(--ifm-leading));margin-top:calc(var(--ifm-heading-vertical-rhythm-top)*var(--ifm-leading))}.markdown>pre,.markdown>ul,.markdown>p{margin-bottom:var(--ifm-leading)}.markdown li{word-wrap:break-word}.markdown li>p{margin-top:var(--ifm-list-paragraph-margin)}.markdown li+li{margin-top:var(--ifm-list-item-margin)}ul,ol{margin:0 0 var(--ifm-list-margin);padding-left:var(--ifm-list-left-padding)}ol ol,ul ol{list-style-type:lower-roman}ul ul,ul ol,ol ol,ol ul{margin:0}ul ul ol,ul ol ol,ol ul ol,ol ol ol{list-style-type:lower-alpha}table{border-collapse:collapse;margin-bottom:var(--ifm-spacing-vertical);display:block;overflow:auto}table thead tr{border-bottom:2px solid var(--ifm-table-border-color)}table thead{background-color:var(--ifm-table-stripe-background)}table tr{background-color:var(--ifm-table-background);border-top:var(--ifm-table-border-width)solid var(--ifm-table-border-color)}table tr:nth-child(2n){background-color:var(--ifm-table-stripe-background)}table th,table td{border:var(--ifm-table-border-width)solid var(--ifm-table-border-color);padding:var(--ifm-table-cell-padding)}table th{background-color:var(--ifm-table-head-background);color:var(--ifm-table-head-color);font-weight:var(--ifm-table-head-font-weight)}table td{color:var(--ifm-table-cell-color)}strong{font-weight:var(--ifm-font-weight-bold)}a{color:var(--ifm-link-color);-webkit-text-decoration:var(--ifm-link-decoration);text-decoration:var(--ifm-link-decoration);transition:color var(--ifm-transition-fast)var(--ifm-transition-timing-default)}a:hover{color:var(--ifm-link-hover-color);-webkit-text-decoration:var(--ifm-link-hover-decoration);text-decoration:var(--ifm-link-hover-decoration)}a:not([href]){-webkit-text-decoration:none;text-decoration:none}p{margin:0 0 var(--ifm-paragraph-margin-bottom)}blockquote{border-left:var(--ifm-blockquote-border-left-width)solid var(--ifm-blockquote-border-color);box-shadow:var(--ifm-blockquote-shadow);color:var(--ifm-blockquote-color);font-size:var(--ifm-blockquote-font-size);margin:0 0 var(--ifm-spacing-vertical);padding:var(--ifm-blockquote-padding-vertical)var(--ifm-blockquote-padding-horizontal)}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}hr{background-color:var(--ifm-hr-background-color);height:var(--ifm-hr-height);margin:var(--ifm-hr-margin-vertical)0;border:0}.shadow--lw{box-shadow:var(--ifm-global-shadow-lw)!important}.shadow--md{box-shadow:var(--ifm-global-shadow-md)!important}.shadow--tl{box-shadow:var(--ifm-global-shadow-tl)!important}.text--primary{color:var(--ifm-color-primary)}.text--secondary{color:var(--ifm-color-secondary)}.text--success{color:var(--ifm-color-success)}.text--info{color:var(--ifm-color-info)}.text--warning{color:var(--ifm-color-warning)}.text--danger{color:var(--ifm-color-danger)}.text--center{text-align:center}.text--left{text-align:left}.text--justify{text-align:justify}.text--right{text-align:right}.text--capitalize{text-transform:capitalize}.text--lowercase{text-transform:lowercase}.text--uppercase{text-transform:uppercase}.text--light{font-weight:var(--ifm-font-weight-light)}.text--normal{font-weight:var(--ifm-font-weight-normal)}.text--semibold{font-weight:var(--ifm-font-weight-semibold)}.text--bold{font-weight:var(--ifm-font-weight-bold)}.text--italic{font-style:italic}.text--truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.text--break{word-wrap:break-word!important;word-break:break-word!important}.text--no-decoration,.text--no-decoration:hover{-webkit-text-decoration:none;text-decoration:none}.clean-btn{color:inherit;cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit}.clean-list{padding-left:0;list-style:none}.alert--primary{--ifm-alert-background-color:var(--ifm-color-primary-contrast-background);--ifm-alert-background-color-highlight:rgba(53,120,229,.15);--ifm-alert-foreground-color:var(--ifm-color-primary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-primary-dark)}.alert--secondary{--ifm-alert-background-color:var(--ifm-color-secondary-contrast-background);--ifm-alert-background-color-highlight:rgba(235,237,240,.15);--ifm-alert-foreground-color:var(--ifm-color-secondary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-secondary-dark)}.alert--success{--ifm-alert-background-color:var(--ifm-color-success-contrast-background);--ifm-alert-background-color-highlight:rgba(0,164,0,.15);--ifm-alert-foreground-color:var(--ifm-color-success-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-success-dark)}.alert--info{--ifm-alert-background-color:var(--ifm-color-info-contrast-background);--ifm-alert-background-color-highlight:rgba(84,199,236,.15);--ifm-alert-foreground-color:var(--ifm-color-info-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-info-dark)}.alert--warning{--ifm-alert-background-color:var(--ifm-color-warning-contrast-background);--ifm-alert-background-color-highlight:rgba(255,186,0,.15);--ifm-alert-foreground-color:var(--ifm-color-warning-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-warning-dark)}.alert--danger{--ifm-alert-background-color:var(--ifm-color-danger-contrast-background);--ifm-alert-background-color-highlight:rgba(250,56,62,.15);--ifm-alert-foreground-color:var(--ifm-color-danger-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-danger-dark)}.alert{--ifm-code-background:var(--ifm-alert-background-color-highlight);--ifm-link-color:var(--ifm-alert-foreground-color);--ifm-link-hover-color:var(--ifm-alert-foreground-color);--ifm-link-decoration:underline;--ifm-tabs-color:var(--ifm-alert-foreground-color);--ifm-tabs-color-active:var(--ifm-alert-foreground-color);--ifm-tabs-color-active-border:var(--ifm-alert-border-color);background-color:var(--ifm-alert-background-color);border:var(--ifm-alert-border-width)solid var(--ifm-alert-border-color);border-left-width:var(--ifm-alert-border-left-width);border-radius:var(--ifm-alert-border-radius);box-shadow:var(--ifm-alert-shadow);color:var(--ifm-alert-foreground-color);padding:var(--ifm-alert-padding-vertical)var(--ifm-alert-padding-horizontal)}.alert__heading{font:bold var(--ifm-h5-font-size)/var(--ifm-heading-line-height)var(--ifm-heading-font-family);text-transform:uppercase;align-items:center;margin-bottom:.5rem;display:flex}.alert__icon{margin-right:.4em;display:inline-flex}.alert__icon svg{fill:var(--ifm-alert-foreground-color);stroke:var(--ifm-alert-foreground-color);stroke-width:0}.alert .close{color:var(--ifm-alert-foreground-color);margin:calc(var(--ifm-alert-padding-vertical)*-1)calc(var(--ifm-alert-padding-horizontal)*-1)0 0;opacity:.75}.alert .close:hover,.alert .close:focus{opacity:1}.alert a{-webkit-text-decoration-color:var(--ifm-alert-border-color);text-decoration-color:var(--ifm-alert-border-color)}.alert a:hover{text-decoration-thickness:2px}.avatar{column-gap:var(--ifm-avatar-intro-margin);display:flex}.avatar__photo{height:var(--ifm-avatar-photo-size);width:var(--ifm-avatar-photo-size);border-radius:50%;display:block;overflow:hidden}.avatar__photo--sm{--ifm-avatar-photo-size:2rem}.avatar__photo--lg{--ifm-avatar-photo-size:4rem}.avatar__photo--xl{--ifm-avatar-photo-size:6rem}.avatar__intro{text-align:var(--ifm-avatar-intro-alignment);flex-direction:column;flex:1;justify-content:center;display:flex}.avatar__name{font:bold var(--ifm-h4-font-size)/var(--ifm-heading-line-height)var(--ifm-font-family-base)}.avatar__subtitle{margin-top:.25rem}.avatar--vertical{--ifm-avatar-intro-alignment:center;--ifm-avatar-intro-margin:.5rem;flex-direction:column;align-items:center}.badge{background-color:var(--ifm-badge-background-color);border:var(--ifm-badge-border-width)solid var(--ifm-badge-border-color);border-radius:var(--ifm-badge-border-radius);color:var(--ifm-badge-color);font-size:75%;font-weight:var(--ifm-font-weight-bold);padding:var(--ifm-badge-padding-vertical)var(--ifm-badge-padding-horizontal);line-height:1;display:inline-block}.badge--primary{--ifm-badge-background-color:var(--ifm-color-primary);--ifm-badge-border-color:var(--ifm-badge-background-color)}.badge--secondary{--ifm-badge-background-color:var(--ifm-color-secondary);--ifm-badge-border-color:var(--ifm-badge-background-color);color:var(--ifm-color-black)}.badge--success{--ifm-badge-background-color:var(--ifm-color-success);--ifm-badge-border-color:var(--ifm-badge-background-color)}.badge--info{--ifm-badge-background-color:var(--ifm-color-info);--ifm-badge-border-color:var(--ifm-badge-background-color)}.badge--warning{--ifm-badge-background-color:var(--ifm-color-warning);--ifm-badge-border-color:var(--ifm-badge-background-color)}.badge--danger{--ifm-badge-background-color:var(--ifm-color-danger);--ifm-badge-border-color:var(--ifm-badge-background-color)}.breadcrumbs{margin-bottom:0;padding-left:0}.breadcrumbs__item{display:inline-block}.breadcrumbs__item:not(:last-child):after{background:var(--ifm-breadcrumb-separator)center;content:" ";filter:var(--ifm-breadcrumb-separator-filter);height:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier));margin:0 var(--ifm-breadcrumb-spacing);opacity:.5;width:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier));display:inline-block}.breadcrumbs__item--active .breadcrumbs__link{background:var(--ifm-breadcrumb-item-background-active);color:var(--ifm-breadcrumb-color-active)}.breadcrumbs__link{border-radius:var(--ifm-breadcrumb-border-radius);color:var(--ifm-font-color-base);font-size:calc(1rem*var(--ifm-breadcrumb-size-multiplier));padding:calc(var(--ifm-breadcrumb-padding-vertical)*var(--ifm-breadcrumb-size-multiplier))calc(var(--ifm-breadcrumb-padding-horizontal)*var(--ifm-breadcrumb-size-multiplier));transition-property:background,color;transition-duration:var(--ifm-transition-fast);transition-timing-function:var(--ifm-transition-timing-default);display:inline-block}.breadcrumbs__link:link:hover,.breadcrumbs__link:visited:hover,area[href].breadcrumbs__link:hover{background:var(--ifm-breadcrumb-item-background-active);-webkit-text-decoration:none;text-decoration:none}.breadcrumbs__link:any-link:hover{background:var(--ifm-breadcrumb-item-background-active);-webkit-text-decoration:none;text-decoration:none}.breadcrumbs--sm{--ifm-breadcrumb-size-multiplier:.8}.breadcrumbs--lg{--ifm-breadcrumb-size-multiplier:1.2}.button{background-color:var(--ifm-button-background-color);border:var(--ifm-button-border-width)solid var(--ifm-button-border-color);border-radius:var(--ifm-button-border-radius);color:var(--ifm-button-color);cursor:pointer;font-size:calc(.875rem*var(--ifm-button-size-multiplier));font-weight:var(--ifm-button-font-weight);padding:calc(var(--ifm-button-padding-vertical)*var(--ifm-button-size-multiplier))calc(var(--ifm-button-padding-horizontal)*var(--ifm-button-size-multiplier));text-align:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;transition-property:color,background,border-color;transition-duration:var(--ifm-button-transition-duration);transition-timing-function:var(--ifm-transition-timing-default);line-height:1.5;display:inline-block}.button:hover{color:var(--ifm-button-color);-webkit-text-decoration:none;text-decoration:none}.button--outline{--ifm-button-background-color:transparent;--ifm-button-color:var(--ifm-button-border-color)}.button--outline:hover{--ifm-button-background-color:var(--ifm-button-border-color)}.button--outline:hover,.button--outline:active,.button--outline.button--active{--ifm-button-color:var(--ifm-font-color-base-inverse)}.button--link{--ifm-button-background-color:transparent;--ifm-button-border-color:transparent;color:var(--ifm-link-color);-webkit-text-decoration:var(--ifm-link-decoration);text-decoration:var(--ifm-link-decoration)}.button--link:hover,.button--link:active,.button--link.button--active{color:var(--ifm-link-hover-color);-webkit-text-decoration:var(--ifm-link-hover-decoration);text-decoration:var(--ifm-link-hover-decoration)}.button.disabled,.button:disabled,.button[disabled]{opacity:.65;pointer-events:none}.button--sm{--ifm-button-size-multiplier:.8}.button--lg{--ifm-button-size-multiplier:1.35}.button--block{width:100%;display:block}.button.button--secondary{color:var(--ifm-color-gray-900)}.button.button--secondary.button--outline:not(.button--active):not(:hover){color:var(--ifm-font-color-base)}:where(.button--primary){--ifm-button-background-color:var(--ifm-color-primary);--ifm-button-border-color:var(--ifm-color-primary)}:where(.button--primary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-primary-dark);--ifm-button-border-color:var(--ifm-color-primary-dark)}.button--primary:active,.button--primary.button--active{--ifm-button-background-color:var(--ifm-color-primary-darker);--ifm-button-border-color:var(--ifm-color-primary-darker)}:where(.button--secondary){--ifm-button-background-color:var(--ifm-color-secondary);--ifm-button-border-color:var(--ifm-color-secondary)}:where(.button--secondary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-secondary-dark);--ifm-button-border-color:var(--ifm-color-secondary-dark)}.button--secondary:active,.button--secondary.button--active{--ifm-button-background-color:var(--ifm-color-secondary-darker);--ifm-button-border-color:var(--ifm-color-secondary-darker)}:where(.button--success){--ifm-button-background-color:var(--ifm-color-success);--ifm-button-border-color:var(--ifm-color-success)}:where(.button--success):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-success-dark);--ifm-button-border-color:var(--ifm-color-success-dark)}.button--success:active,.button--success.button--active{--ifm-button-background-color:var(--ifm-color-success-darker);--ifm-button-border-color:var(--ifm-color-success-darker)}:where(.button--info){--ifm-button-background-color:var(--ifm-color-info);--ifm-button-border-color:var(--ifm-color-info)}:where(.button--info):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-info-dark);--ifm-button-border-color:var(--ifm-color-info-dark)}.button--info:active,.button--info.button--active{--ifm-button-background-color:var(--ifm-color-info-darker);--ifm-button-border-color:var(--ifm-color-info-darker)}:where(.button--warning){--ifm-button-background-color:var(--ifm-color-warning);--ifm-button-border-color:var(--ifm-color-warning)}:where(.button--warning):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-warning-dark);--ifm-button-border-color:var(--ifm-color-warning-dark)}.button--warning:active,.button--warning.button--active{--ifm-button-background-color:var(--ifm-color-warning-darker);--ifm-button-border-color:var(--ifm-color-warning-darker)}:where(.button--danger){--ifm-button-background-color:var(--ifm-color-danger);--ifm-button-border-color:var(--ifm-color-danger)}:where(.button--danger):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-danger-dark);--ifm-button-border-color:var(--ifm-color-danger-dark)}.button--danger:active,.button--danger.button--active{--ifm-button-background-color:var(--ifm-color-danger-darker);--ifm-button-border-color:var(--ifm-color-danger-darker)}.button-group{gap:var(--ifm-button-group-spacing);display:inline-flex}.button-group>.button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.button-group>.button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.button-group--block{justify-content:stretch;display:flex}.button-group--block>.button{flex-grow:1}.card{background-color:var(--ifm-card-background-color);border-radius:var(--ifm-card-border-radius);box-shadow:var(--ifm-global-shadow-lw);flex-direction:column;display:flex;overflow:hidden}.card--full-height{height:100%}.card__image{padding-top:var(--ifm-card-vertical-spacing)}.card__image:first-child{padding-top:0}.card__header,.card__body,.card__footer{padding:var(--ifm-card-vertical-spacing)var(--ifm-card-horizontal-spacing)}.card__header:not(:last-child),.card__body:not(:last-child),.card__footer:not(:last-child){padding-bottom:0}.card__header>:last-child,.card__body>:last-child,.card__footer>:last-child{margin-bottom:0}.card__footer{margin-top:auto}.table-of-contents{padding:var(--ifm-toc-padding-vertical)0;margin-bottom:0;font-size:.8rem}.table-of-contents,.table-of-contents ul{padding-left:var(--ifm-toc-padding-horizontal);list-style:none}.table-of-contents li{margin:var(--ifm-toc-padding-vertical)var(--ifm-toc-padding-horizontal)}.table-of-contents__left-border{border-left:1px solid var(--ifm-toc-border-color)}.table-of-contents__link{color:var(--ifm-toc-link-color);display:block}.table-of-contents__link:hover,.table-of-contents__link:hover code,.table-of-contents__link--active,.table-of-contents__link--active code{color:var(--ifm-color-primary);-webkit-text-decoration:none;text-decoration:none}.close{color:var(--ifm-color-black);float:right;font-size:1.5rem;font-weight:var(--ifm-font-weight-bold);opacity:.5;transition:opacity var(--ifm-transition-fast)var(--ifm-transition-timing-default);padding:1rem;line-height:1}.close:hover{opacity:.7}.close:focus{opacity:.8}.dropdown{font-weight:var(--ifm-dropdown-font-weight);vertical-align:top;display:inline-flex;position:relative}.dropdown--hoverable:hover .dropdown__menu,.dropdown--show .dropdown__menu{opacity:1;pointer-events:all;visibility:visible;transform:translateY(-1px)}.dropdown--right .dropdown__menu{left:inherit;right:0}.dropdown--nocaret .navbar__link:after{content:none!important}.dropdown__menu{background-color:var(--ifm-dropdown-background-color);border-radius:var(--ifm-global-radius);box-shadow:var(--ifm-global-shadow-md);opacity:0;pointer-events:none;min-width:10rem;max-height:80vh;left:0;top:calc(100% - var(--ifm-navbar-item-padding-vertical) + .3rem);visibility:hidden;z-index:var(--ifm-z-index-dropdown);transition-property:opacity,transform,visibility;transition-duration:var(--ifm-transition-fast);transition-timing-function:var(--ifm-transition-timing-default);padding:.5rem;list-style:none;position:absolute;overflow-y:auto;transform:translateY(-.625rem)}.dropdown__link{color:var(--ifm-dropdown-link-color);white-space:nowrap;border-radius:.25rem;margin-top:.2rem;padding:.25rem .5rem;font-size:.875rem;display:block}.dropdown__link:hover,.dropdown__link--active{background-color:var(--ifm-dropdown-hover-background-color);color:var(--ifm-dropdown-link-color);-webkit-text-decoration:none;text-decoration:none}.dropdown__link--active,.dropdown__link--active:hover{--ifm-dropdown-link-color:var(--ifm-link-color)}.dropdown>.navbar__link:after{content:"";border:.4em solid transparent;border-top-color:currentColor;border-bottom:0 solid;margin-left:.3em;display:inline-block;position:relative;top:2px;transform:translateY(-50%)}.footer{background-color:var(--ifm-footer-background-color);color:var(--ifm-footer-color);padding:var(--ifm-footer-padding-vertical)var(--ifm-footer-padding-horizontal)}.footer--dark{--ifm-footer-background-color:#303846;--ifm-footer-color:var(--ifm-footer-link-color);--ifm-footer-link-color:var(--ifm-color-secondary);--ifm-footer-title-color:var(--ifm-color-white)}.footer__links{margin-bottom:1rem}.footer__link-item{color:var(--ifm-footer-link-color);line-height:2}.footer__link-item:hover{color:var(--ifm-footer-link-hover-color)}.footer__link-separator{margin:0 var(--ifm-footer-link-horizontal-spacing)}.footer__logo{max-width:var(--ifm-footer-logo-max-width);margin-top:1rem}.footer__title{color:var(--ifm-footer-title-color);font:bold var(--ifm-h4-font-size)/var(--ifm-heading-line-height)var(--ifm-font-family-base);margin-bottom:var(--ifm-heading-margin-bottom)}.footer__item{margin-top:0}.footer__items{margin-bottom:0}[type=checkbox]{padding:0}.hero{background-color:var(--ifm-hero-background-color);color:var(--ifm-hero-text-color);align-items:center;padding:4rem 2rem;display:flex}.hero--primary{--ifm-hero-background-color:var(--ifm-color-primary);--ifm-hero-text-color:var(--ifm-font-color-base-inverse)}.hero--dark{--ifm-hero-background-color:#303846;--ifm-hero-text-color:var(--ifm-color-white)}.hero__title{font-size:3rem}.hero__subtitle{font-size:1.5rem}.menu{font-weight:var(--ifm-font-weight-semibold);overflow-x:hidden}.menu__list{margin:0;padding-left:0;list-style:none}.menu__list .menu__list{padding-left:var(--ifm-menu-link-padding-horizontal);flex:0 0 100%;margin-top:.25rem}.menu__list-item:not(:first-child){margin-top:.25rem}.menu__list-item--collapsed .menu__list{height:0;overflow:hidden}.menu__list-item--collapsed .menu__link--sublist:after,.menu__list-item--collapsed .menu__caret:before{transform:rotate(90deg)}.menu__list-item-collapsible{transition:background var(--ifm-transition-fast)var(--ifm-transition-timing-default);border-radius:.25rem;flex-wrap:wrap;display:flex;position:relative}.menu__list-item-collapsible:hover,.menu__list-item-collapsible--active{background:var(--ifm-menu-color-background-hover)}.menu__list-item-collapsible .menu__link:hover,.menu__list-item-collapsible .menu__link--active{background:0 0!important}.menu__link,.menu__caret{transition:background var(--ifm-transition-fast)var(--ifm-transition-timing-default);border-radius:.25rem;align-items:center;display:flex}.menu__link:hover,.menu__caret:hover{background:var(--ifm-menu-color-background-hover)}.menu__link{color:var(--ifm-menu-color);padding:var(--ifm-menu-link-padding-vertical)var(--ifm-menu-link-padding-horizontal);flex:1;line-height:1.25}.menu__link:hover{color:var(--ifm-menu-color);transition:color var(--ifm-transition-fast)var(--ifm-transition-timing-default);-webkit-text-decoration:none;text-decoration:none}.menu__link--sublist-caret:after{content:"";background:var(--ifm-menu-link-sublist-icon)50%/2rem 2rem;min-width:1.25rem;filter:var(--ifm-menu-link-sublist-icon-filter);width:1.25rem;height:1.25rem;transition:transform var(--ifm-transition-fast)linear;margin-left:auto;transform:rotate(180deg)}.menu__link--active,.menu__link--active:hover{color:var(--ifm-menu-color-active)}.menu__link--active:not(.menu__link--sublist){background-color:var(--ifm-menu-color-background-active)}.menu__caret{padding:var(--ifm-menu-link-padding-vertical)var(--ifm-menu-link-padding-horizontal)}.menu__caret:before{content:"";background:var(--ifm-menu-link-sublist-icon)50%/2rem 2rem;filter:var(--ifm-menu-link-sublist-icon-filter);width:1.25rem;height:1.25rem;transition:transform var(--ifm-transition-fast)linear;transform:rotate(180deg)}html[data-theme=dark],.navbar--dark{--ifm-menu-link-sublist-icon-filter:invert(100%)sepia(94%)saturate(17%)hue-rotate(223deg)brightness(104%)contrast(98%)}.navbar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-navbar-shadow);height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical)var(--ifm-navbar-padding-horizontal);display:flex}.navbar>.container,.navbar>.container-fluid{display:flex}.navbar--fixed-top{z-index:var(--ifm-z-index-fixed);position:sticky;top:0}.navbar__inner{flex-wrap:wrap;justify-content:space-between;width:100%;display:flex}.navbar__brand{color:var(--ifm-navbar-link-color);align-items:center;min-width:0;margin-right:1rem;display:flex}.navbar__brand:hover{color:var(--ifm-navbar-link-hover-color);-webkit-text-decoration:none;text-decoration:none}.navbar__title{flex:auto}.navbar__toggle{margin-right:.5rem;display:none}.navbar__logo{flex:none;height:2rem;margin-right:.5rem}.navbar__logo img{height:100%}.navbar__items{flex:1;align-items:center;min-width:0;display:flex}.navbar__items--center{flex:none}.navbar__items--center .navbar__brand{margin:0}.navbar__items--center+.navbar__items--right{flex:1}.navbar__items--right{flex:none;justify-content:flex-end}.navbar__items--right>:last-child{padding-right:0}.navbar__item{padding:var(--ifm-navbar-item-padding-vertical)var(--ifm-navbar-item-padding-horizontal);display:inline-block}.navbar__item.dropdown .navbar__link:not([href]){pointer-events:none}.navbar__link{color:var(--ifm-navbar-link-color);font-weight:var(--ifm-font-weight-semibold)}.navbar__link:hover,.navbar__link--active{color:var(--ifm-navbar-link-hover-color);-webkit-text-decoration:none;text-decoration:none}.navbar--dark,.navbar--primary{--ifm-menu-color:var(--ifm-color-gray-300);--ifm-navbar-link-color:var(--ifm-color-gray-100);--ifm-navbar-search-input-background-color:rgba(255,255,255,.1);--ifm-navbar-search-input-placeholder-color:rgba(255,255,255,.5);color:var(--ifm-color-white)}.navbar--dark{--ifm-navbar-background-color:#242526;--ifm-navbar-link-hover-color:var(--ifm-color-primary);--ifm-menu-color-background-active:rgba(255,255,255,.05);--ifm-navbar-search-input-color:var(--ifm-color-white)}.navbar--primary{--ifm-navbar-background-color:var(--ifm-color-primary);--ifm-navbar-link-hover-color:var(--ifm-color-white);--ifm-menu-color-active:var(--ifm-color-white);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-500)}.navbar__search-input{appearance:none;background:var(--ifm-navbar-search-input-background-color)var(--ifm-navbar-search-input-icon)no-repeat .75rem center/1rem 1rem;color:var(--ifm-navbar-search-input-color);cursor:text;border:none;border-radius:2rem;width:12.5rem;height:2rem;padding:0 .5rem 0 2.25rem;font-size:1rem;display:inline-block}.navbar__search-input::placeholder{color:var(--ifm-navbar-search-input-placeholder-color)}.navbar-sidebar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-global-shadow-md);opacity:0;visibility:hidden;width:var(--ifm-navbar-sidebar-width);transition-property:opacity,visibility,transform;transition-duration:var(--ifm-transition-fast);transition-timing-function:ease-in-out;position:fixed;top:0;bottom:0;left:0;overflow-x:hidden;transform:translate(-100%)}.navbar-sidebar--show .navbar-sidebar,.navbar-sidebar--show .navbar-sidebar__backdrop{opacity:1;visibility:visible}.navbar-sidebar--show .navbar-sidebar{transform:translate(0,0)}.navbar-sidebar__backdrop{opacity:0;visibility:hidden;transition-property:opacity,visibility;transition-duration:var(--ifm-transition-fast);background-color:rgba(0,0,0,.6);transition-timing-function:ease-in-out;position:fixed;inset:0}.navbar-sidebar__brand{box-shadow:var(--ifm-navbar-shadow);height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical)var(--ifm-navbar-padding-horizontal);flex:1;align-items:center;display:flex}.navbar-sidebar__items{height:calc(100% - var(--ifm-navbar-height));transition:transform var(--ifm-transition-fast)ease-in-out;display:flex;transform:translateZ(0)}.navbar-sidebar__items--show-secondary{transform:translate3d(calc((var(--ifm-navbar-sidebar-width))*-1),0,0)}.navbar-sidebar__item{width:calc(var(--ifm-navbar-sidebar-width));flex-shrink:0;padding:.5rem}.navbar-sidebar__back{background:var(--ifm-menu-color-background-active);font-size:15px;font-weight:var(--ifm-button-font-weight);text-align:left;width:calc(100% + 1rem);margin:0 0 .2rem -.5rem;padding:.6rem 1.5rem;position:relative;top:-.5rem}.navbar-sidebar__close{margin-left:auto;display:flex}.pagination{column-gap:var(--ifm-pagination-page-spacing);font-size:var(--ifm-pagination-font-size);padding-left:0;display:flex}.pagination--sm{--ifm-pagination-font-size:.8rem;--ifm-pagination-padding-horizontal:.8rem;--ifm-pagination-padding-vertical:.2rem}.pagination--lg{--ifm-pagination-font-size:1.2rem;--ifm-pagination-padding-horizontal:1.2rem;--ifm-pagination-padding-vertical:.3rem}.pagination__item{display:inline-flex}.pagination__item>span{padding:var(--ifm-pagination-padding-vertical)}.pagination__item--active .pagination__link{background:var(--ifm-pagination-item-active-background);color:var(--ifm-pagination-color-active)}.pagination__item:not(.pagination__item--active):hover .pagination__link{background:var(--ifm-pagination-item-active-background)}.pagination__item--disabled,.pagination__item[disabled]{opacity:.25;pointer-events:none}.pagination__link{border-radius:var(--ifm-pagination-border-radius);color:var(--ifm-font-color-base);padding:var(--ifm-pagination-padding-vertical)var(--ifm-pagination-padding-horizontal);transition:background var(--ifm-transition-fast)var(--ifm-transition-timing-default);display:inline-block}.pagination__link:hover{-webkit-text-decoration:none;text-decoration:none}.pagination-nav{grid-gap:var(--ifm-spacing-horizontal);gap:var(--ifm-spacing-horizontal);grid-template-columns:repeat(2,1fr);display:grid}.pagination-nav__link{border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-pagination-nav-border-radius);height:100%;line-height:var(--ifm-heading-line-height);padding:var(--ifm-global-spacing);transition:border-color var(--ifm-transition-fast)var(--ifm-transition-timing-default);display:block}.pagination-nav__link:hover{border-color:var(--ifm-pagination-nav-color-hover);-webkit-text-decoration:none;text-decoration:none}.pagination-nav__link--next{text-align:right;grid-column:2/3}.pagination-nav__label{font-size:var(--ifm-h4-font-size);font-weight:var(--ifm-heading-font-weight);word-break:break-word}.pagination-nav__link--prev .pagination-nav__label:before{content:"« "}.pagination-nav__link--next .pagination-nav__label:after{content:" »"}.pagination-nav__sublabel{color:var(--ifm-color-content-secondary);font-size:var(--ifm-h5-font-size);font-weight:var(--ifm-font-weight-semibold);margin-bottom:.25rem}.pills{gap:var(--ifm-pills-spacing);padding-left:0;display:flex}.pills__item{cursor:pointer;font-weight:var(--ifm-font-weight-bold);transition:background var(--ifm-transition-fast)var(--ifm-transition-timing-default);border-radius:.5rem;padding:.25rem 1rem;display:inline-block}.pills__item--active{background:var(--ifm-pills-color-background-active);color:var(--ifm-pills-color-active)}.pills__item:not(.pills__item--active):hover{background:var(--ifm-pills-color-background-active)}.pills--block{justify-content:stretch}.pills--block .pills__item{text-align:center;flex-grow:1}.tabs{color:var(--ifm-tabs-color);font-weight:var(--ifm-font-weight-bold);margin-bottom:0;padding-left:0;display:flex;overflow-x:auto}.tabs__item{border-radius:var(--ifm-global-radius);cursor:pointer;padding:var(--ifm-tabs-padding-vertical)var(--ifm-tabs-padding-horizontal);transition:background-color var(--ifm-transition-fast)var(--ifm-transition-timing-default);border-bottom:3px solid transparent;display:inline-flex}.tabs__item--active{border-bottom-color:var(--ifm-tabs-color-active-border);color:var(--ifm-tabs-color-active);border-bottom-right-radius:0;border-bottom-left-radius:0}.tabs__item:hover{background-color:var(--ifm-hover-overlay)}.tabs--block{justify-content:stretch}.tabs--block .tabs__item{flex-grow:1;justify-content:center}html[data-theme=dark]{--ifm-color-scheme:dark;--ifm-color-emphasis-0:var(--ifm-color-gray-1000);--ifm-color-emphasis-100:var(--ifm-color-gray-900);--ifm-color-emphasis-200:var(--ifm-color-gray-800);--ifm-color-emphasis-300:var(--ifm-color-gray-700);--ifm-color-emphasis-400:var(--ifm-color-gray-600);--ifm-color-emphasis-500:var(--ifm-color-gray-500);--ifm-color-emphasis-600:var(--ifm-color-gray-400);--ifm-color-emphasis-700:var(--ifm-color-gray-300);--ifm-color-emphasis-800:var(--ifm-color-gray-200);--ifm-color-emphasis-900:var(--ifm-color-gray-100);--ifm-color-emphasis-1000:var(--ifm-color-gray-0);--ifm-background-color:#1b1b1d;--ifm-background-surface-color:#242526;--ifm-hover-overlay:rgba(255,255,255,.05);--ifm-color-content:#e3e3e3;--ifm-color-content-secondary:#fff;--ifm-breadcrumb-separator-filter:invert(64%)sepia(11%)saturate(0%)hue-rotate(149deg)brightness(99%)contrast(95%);--ifm-code-background:rgba(255,255,255,.1);--ifm-scrollbar-track-background-color:#444;--ifm-scrollbar-thumb-background-color:#686868;--ifm-scrollbar-thumb-hover-background-color:#7a7a7a;--ifm-table-stripe-background:rgba(255,255,255,.07);--ifm-toc-border-color:var(--ifm-color-emphasis-200);--ifm-color-primary-contrast-background:#102445;--ifm-color-primary-contrast-foreground:#ebf2fc;--ifm-color-secondary-contrast-background:#474748;--ifm-color-secondary-contrast-foreground:#fdfdfe;--ifm-color-success-contrast-background:#003100;--ifm-color-success-contrast-foreground:#e6f6e6;--ifm-color-info-contrast-background:#193c47;--ifm-color-info-contrast-foreground:#eef9fd;--ifm-color-warning-contrast-background:#4d3800;--ifm-color-warning-contrast-foreground:#fff8e6;--ifm-color-danger-contrast-background:#4b1113;--ifm-color-danger-contrast-foreground:#ffebec}@media (min-width:1440px){.container{max-width:var(--ifm-container-width-xl)}}@media (max-width:996px){.col{--ifm-col-width:100%;flex-basis:var(--ifm-col-width);margin-left:0}.footer{--ifm-footer-padding-horizontal:0}.footer__link-separator{display:none}.footer__col{margin-bottom:calc(var(--ifm-spacing-vertical)*3)}.footer__link-item{width:max-content;display:block}.hero{padding-left:0;padding-right:0}.navbar>.container,.navbar>.container-fluid{padding:0}.navbar__toggle{display:inherit}.navbar__item{display:none}.navbar__search-input{width:9rem}.pills--block,.tabs--block{flex-direction:column}}@media (max-width:576px){.markdown h1:first-child{--ifm-h1-font-size:2rem}.markdown>h2{--ifm-h2-font-size:1.5rem}.markdown>h3{--ifm-h3-font-size:1.25rem}}@media (pointer:fine){.thin-scrollbar{scrollbar-width:thin}.thin-scrollbar::-webkit-scrollbar{height:var(--ifm-scrollbar-size);width:var(--ifm-scrollbar-size)}.thin-scrollbar::-webkit-scrollbar-track{background:var(--ifm-scrollbar-track-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb{background:var(--ifm-scrollbar-thumb-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--ifm-scrollbar-thumb-hover-background-color)}}@media (prefers-reduced-motion:reduce){:root{--ifm-transition-fast:0s;--ifm-transition-slow:0s}}@media print{.table-of-contents,.footer,.menu,.navbar,.pagination-nav{display:none}.tabs{page-break-inside:avoid}}:root{--docusaurus-progress-bar-color:var(--ifm-color-primary)}#nprogress{pointer-events:none}#nprogress .bar{background:var(--docusaurus-progress-bar-color);z-index:1031;width:100%;height:2px;position:fixed;top:0;left:0}#nprogress .peg{width:100px;height:100%;box-shadow:0 0 10px var(--docusaurus-progress-bar-color),0 0 5px var(--docusaurus-progress-bar-color);opacity:1;position:absolute;right:0;transform:rotate(3deg)translateY(-4px)}:root{--ifm-color-primary:#25c2a0;--ifm-color-primary-dark:#21af90;--ifm-color-primary-darker:#1fa588;--ifm-color-primary-darkest:#1a8870;--ifm-color-primary-light:#46cbae;--ifm-color-primary-lighter:#66d4bd;--ifm-color-primary-lightest:#92e0d0;--ifm-code-font-size:95%;--docusaurus-highlighted-code-line-bg:rgba(0,0,0,.1)}html[data-theme=dark] .docusaurus-highlight-code-line{background-color:rgba(0,0,0,.3)}[target=_self] svg{display:none}.caption{color:var(--ifm-font-color-secondary);text-align:center;margin:-1em 0 2em}.border{border:1px solid #000;border-radius:5px;padding:0;overflow:hidden}.status-link>span:after{content:"";background-color:#20bf6b;border-radius:50%;width:10px;height:10px;margin-left:.3rem;display:inline-block}.status-link svg{margin-left:.4rem}body[data-origin-not-allowed=true] #kapa-widget-container{display:none!important}.carousel .control-arrow,.carousel.carousel-slider .control-arrow{opacity:.4;filter:alpha(opacity=40);z-index:2;cursor:pointer;background:0 0;border:0;font-size:32px;transition:all .25s ease-in;position:absolute;top:20px}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{content:"";border-top:8px solid transparent;border-bottom:8px solid transparent;margin:0 5px;display:inline-block}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{width:100%;position:relative}.carousel *{box-sizing:border-box}.carousel img{pointer-events:none;width:100%;display:inline-block}.carousel .carousel{position:relative}.carousel .control-arrow{background:0 0;border:0;outline:0;margin-top:-13px;font-size:18px;top:50%}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{white-space:nowrap;list-style:none;transition:all .15s ease-in;position:relative;transform:translate(0,0)}.carousel .thumb{white-space:nowrap;border:3px solid #fff;margin-right:6px;padding:2px;transition:border .15s ease-in;display:inline-block;overflow:hidden}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{margin:0;position:relative;overflow:hidden}.carousel.carousel-slider .control-arrow{color:#fff;margin-top:0;padding:5px;font-size:26px;top:0;bottom:0}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,.2)}.carousel .slider-wrapper{width:100%;margin:auto;transition:height .15s ease-in;overflow:hidden}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-moz-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-moz-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{flex-direction:column}.carousel .slider{width:100%;margin:0;padding:0;list-style:none;position:relative}.carousel .slider.animated{transition:all .35s ease-in-out}.carousel .slide{text-align:center;min-width:100%;margin:0;position:relative}.carousel .slide img{vertical-align:top;border:0;width:100%}.carousel .slide iframe{border:0;width:calc(100% - 80px);margin:0 40px 40px;display:inline-block}.carousel .slide .legend{color:#fff;text-align:center;opacity:.25;background:#000;border-radius:10px;width:90%;margin-left:-45%;padding:10px;font-size:12px;transition:opacity .35s ease-in-out;position:absolute;bottom:40px;left:50%}.carousel .control-dots{text-align:center;z-index:1;width:100%;margin:10px 0;padding:0;position:absolute;bottom:0}@media (min-width:960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{opacity:.3;filter:alpha(opacity=30);cursor:pointer;background:#fff;border-radius:50%;width:8px;height:8px;margin:0 8px;transition:opacity .25s ease-in;display:inline-block;box-shadow:1px 1px 2px rgba(0,0,0,.9)}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{text-shadow:1px 1px 1px rgba(0,0,0,.9);color:#fff;padding:5px;font-size:10px;position:absolute;top:0;right:0}.carousel:hover .slide .legend{opacity:1}body:not(.navigation-with-keyboard) :not(input):focus{outline:none}#__docusaurus-base-url-issue-banner-container{display:none}.skipToContent_fXgn{z-index:calc(var(--ifm-z-index-fixed) + 1);padding:calc(var(--ifm-global-spacing)/2)var(--ifm-global-spacing);color:var(--ifm-color-emphasis-900);background-color:var(--ifm-background-surface-color);position:fixed;top:1rem;left:100%}.skipToContent_fXgn:focus{box-shadow:var(--ifm-global-shadow-md);left:1rem}.closeButton_CVFx{padding:0;line-height:0}.content_knG7{text-align:center;padding:5px 0;font-size:85%}.content_knG7 a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}:root{--docusaurus-announcement-bar-height:auto}.announcementBar_mb4j{height:var(--docusaurus-announcement-bar-height);background-color:var(--ifm-color-white);color:var(--ifm-color-black);border-bottom:1px solid var(--ifm-color-emphasis-100);align-items:center;display:flex}html[data-announcement-bar-initially-dismissed=true] .announcementBar_mb4j{display:none}.announcementBarPlaceholder_vyr4{flex:0 0 10px}.announcementBarClose_gvF7{flex:0 0 30px;align-self:stretch}.announcementBarContent_xLdY{flex:auto}@media print{.announcementBar_mb4j{display:none}}@media (min-width:997px){:root{--docusaurus-announcement-bar-height:30px}.announcementBarPlaceholder_vyr4,.announcementBarClose_gvF7{flex-basis:50px}}.toggle_vylO{width:2rem;height:2rem}.toggleButton_gllP{-webkit-tap-highlight-color:transparent;width:100%;height:100%;transition:background var(--ifm-transition-fast);border-radius:50%;justify-content:center;align-items:center;display:flex}.toggleButton_gllP:hover{background:var(--ifm-color-emphasis-200)}[data-theme=light] .darkToggleIcon_wfgR,[data-theme=dark] .lightToggleIcon_pyhR{display:none}.toggleButtonDisabled_aARS{cursor:not-allowed}.darkNavbarColorModeToggle_X3D1:hover{background:var(--ifm-color-gray-800)}.themedComponent_mlkZ{display:none}[data-theme=light] .themedComponent--light_NVdE,[data-theme=dark] .themedComponent--dark_xIcU,html:not([data-theme]) .themedComponent--light_NVdE{display:initial}.iconExternalLink_nPIU{margin-left:.3rem}.dropdownNavbarItemMobile_S0Fm{cursor:pointer}.iconLanguage_nlXk{vertical-align:text-bottom;margin-right:5px}.navbarSearchContainer_Bca1:empty{display:none}@media (max-width:996px){.navbarSearchContainer_Bca1{right:var(--ifm-navbar-padding-horizontal);position:absolute}}@media (min-width:997px){.navbarSearchContainer_Bca1{padding:var(--ifm-navbar-item-padding-vertical)var(--ifm-navbar-item-padding-horizontal)}}.navbarHideable_m1mJ{transition:transform var(--ifm-transition-fast)ease}.navbarHidden_jGov{transform:translateY(calc(-100% - 2px))}@media (max-width:996px){.colorModeToggle_DEke{display:none}}.errorBoundaryError_a6uf{white-space:pre-wrap;color:red}.errorBoundaryFallback_VBag{color:red;padding:.55rem}.footerLogoLink_BH7S{opacity:.5;transition:opacity var(--ifm-transition-fast)var(--ifm-transition-timing-default)}.footerLogoLink_BH7S:hover{opacity:1}.anchorWithStickyNavbar_LWe7{scroll-margin-top:calc(var(--ifm-navbar-height) + .5rem)}.anchorWithHideOnScrollNavbar_WYt5{scroll-margin-top:.5rem}.hash-link{opacity:0;transition:opacity var(--ifm-transition-fast);-webkit-user-select:none;user-select:none;padding-left:.5rem}.hash-link:before{content:"#"}.hash-link:focus,:hover>.hash-link{opacity:1}.content_lMOZ{float:right;justify-content:center;align-items:center;width:300px;height:200px;margin:10px 0 20px 20px;display:flex}@media (max-width:576px){.content_lMOZ{float:none;margin:10px auto 20px}}.top_MrQY{float:none;margin:10px auto 20px}.none_qEfi{display:none!important}html,body{height:100%}.mainWrapper_z2l0{flex-direction:column;flex:1 0 auto;display:flex}.docusaurus-mt-lg{margin-top:3rem}#__docusaurus{flex-direction:column;min-height:100%;display:flex}.admonition_xJq3{margin-bottom:1em}.admonitionHeading_Gvgb{font:var(--ifm-heading-font-weight)var(--ifm-h5-font-size)/var(--ifm-heading-line-height)var(--ifm-heading-font-family);text-transform:uppercase}.admonitionHeading_Gvgb:not(:last-child){margin-bottom:.3rem}.admonitionHeading_Gvgb code{text-transform:none}.admonitionIcon_Rf37{vertical-align:middle;margin-right:.4em;display:inline-block}.admonitionIcon_Rf37 svg{width:1.6em;height:1.6em;fill:var(--ifm-alert-foreground-color);display:inline-block}.admonitionContent_BuS1>:last-child{margin-bottom:0}.breadcrumbHomeIcon_YNFT{vertical-align:top;width:1.1rem;height:1.1rem;position:relative;top:1px}.breadcrumbsContainer_Z_bl{--ifm-breadcrumb-size-multiplier:.8;margin-bottom:.8rem}.cardContainer_fWXF{--ifm-link-color:var(--ifm-color-emphasis-800);--ifm-link-hover-color:var(--ifm-color-emphasis-700);--ifm-link-hover-decoration:none;border:1px solid var(--ifm-color-emphasis-200);transition:all var(--ifm-transition-fast)ease;transition-property:border,box-shadow;box-shadow:0 1.5px 3px rgba(0,0,0,.15)}.cardContainer_fWXF:hover{border-color:var(--ifm-color-primary);box-shadow:0 3px 6px rgba(0,0,0,.2)}.cardContainer_fWXF :last-child{margin-bottom:0}.cardTitle_rnsV{font-size:1.2rem}.cardDescription_PWke{font-size:.8rem}.searchQueryInput_u2C7,.searchVersionInput_m0Ui{border-radius:var(--ifm-global-radius);border:2px solid var(--ifm-toc-border-color);font:var(--ifm-font-size-base)var(--ifm-font-family-base);background:var(--docsearch-searchbox-focus-background);width:100%;color:var(--docsearch-text-color);transition:border var(--ifm-transition-fast)ease;margin-bottom:.5rem;padding:.8rem}.searchQueryInput_u2C7:focus,.searchVersionInput_m0Ui:focus{border-color:var(--docsearch-primary-color);outline:none}.searchQueryInput_u2C7::placeholder{color:var(--docsearch-muted-color)}.searchResultsColumn_JPFH{font-size:.9rem;font-weight:700}.algoliaLogo_rT1R{max-width:150px}.algoliaLogoPathFill_WdUC{fill:var(--ifm-font-color-base)}.searchResultItem_Tv2o{border-bottom:1px solid var(--ifm-toc-border-color);padding:1rem 0}.searchResultItemHeading_KbCB{margin-bottom:0;font-weight:400}.searchResultItemPath_lhe1{color:var(--ifm-color-content-secondary);--ifm-breadcrumb-separator-size-multiplier:1;font-size:.8rem}.searchResultItemSummary_AEaO{margin:.5rem 0 0;font-style:italic}@media only screen and (max-width:996px){.searchQueryColumn_RTkw{max-width:60%!important}.searchVersionColumn_ypXd{max-width:40%!important}.searchResultsColumn_JPFH{max-width:60%!important}.searchLogoColumn_rJIA{max-width:40%!important;padding-left:0!important}}@media screen and (max-width:576px){.searchQueryColumn_RTkw{max-width:100%!important}.searchVersionColumn_ypXd{max-width:100%!important;padding-left:var(--ifm-spacing-horizontal)!important}}.loadingSpinner_XVxU{border:.4em solid #eee;border-top-color:var(--ifm-color-primary);border-radius:50%;width:3rem;height:3rem;margin:0 auto;animation:1s linear infinite loading-spin_vzvp}@keyframes loading-spin_vzvp{to{transform:rotate(360deg)}}.loader_vvXV{margin-top:2rem}.search-result-match{color:var(--docsearch-hit-color);background:rgba(255,215,142,.25);padding:.09em 0}.backToTopButton_sjWU{background-color:var(--ifm-color-emphasis-200);width:3rem;height:3rem;z-index:calc(var(--ifm-z-index-fixed) - 1);box-shadow:var(--ifm-global-shadow-lw);transition:all var(--ifm-transition-fast)var(--ifm-transition-timing-default);opacity:0;visibility:hidden;border-radius:50%;position:fixed;bottom:1.3rem;right:1.3rem;transform:scale(0)}.backToTopButton_sjWU:after{content:" ";-webkit-mask:var(--ifm-menu-link-sublist-icon)50%/2rem 2rem no-repeat;-webkit-mask:var(--ifm-menu-link-sublist-icon)50%/2rem 2rem no-repeat;mask:var(--ifm-menu-link-sublist-icon)50%/2rem 2rem no-repeat;background-color:var(--ifm-color-emphasis-1000);width:100%;height:100%;display:inline-block}@media (hover:hover){.backToTopButton_sjWU:hover{background-color:var(--ifm-color-emphasis-300)}}.backToTopButtonShow_xfvO{opacity:1;visibility:visible;transform:scale(1)}:root{--docusaurus-collapse-button-bg:transparent;--docusaurus-collapse-button-bg-hover:rgba(0,0,0,.1)}[data-theme=dark]:root{--docusaurus-collapse-button-bg:rgba(255,255,255,.05);--docusaurus-collapse-button-bg-hover:rgba(255,255,255,.1)}@media (min-width:997px){.collapseSidebarButton_PEFL{background-color:var(--docusaurus-collapse-button-bg);border:1px solid var(--ifm-toc-border-color);border-radius:0;height:40px;position:sticky;bottom:0;display:block!important}.collapseSidebarButtonIcon_kv0_{margin-top:4px;transform:rotate(180deg)}[dir=rtl] .collapseSidebarButtonIcon_kv0_{transform:rotate(0)}.collapseSidebarButton_PEFL:hover,.collapseSidebarButton_PEFL:focus{background-color:var(--docusaurus-collapse-button-bg-hover)}}.collapseSidebarButton_PEFL{margin:0;display:none}.menuExternalLink_NmtK{align-items:center}@media (min-width:997px){.menuHtmlItem_M9Kj{padding:var(--ifm-menu-link-padding-vertical)var(--ifm-menu-link-padding-horizontal)}.menu_SIkG{flex-grow:1;padding:.5rem}@supports (scrollbar-gutter:stable){.menu_SIkG{scrollbar-gutter:stable;padding:.5rem 0 .5rem .5rem}}.menuWithAnnouncementBar_GW3s{margin-bottom:var(--docusaurus-announcement-bar-height)}.sidebar_njMd{height:100%;padding-top:var(--ifm-navbar-height);width:var(--doc-sidebar-width);flex-direction:column;display:flex}.sidebarWithHideableNavbar_wUlq{padding-top:0}.sidebarHidden_VK0M{opacity:0;visibility:hidden}.sidebarLogo_isFc{margin:0 var(--ifm-navbar-padding-horizontal);min-height:var(--ifm-navbar-height);max-height:var(--ifm-navbar-height);align-items:center;color:inherit!important;-webkit-text-decoration:none!important;text-decoration:none!important;display:flex!important}.sidebarLogo_isFc img{height:2rem;margin-right:.5rem}}.sidebarLogo_isFc{display:none}@media (min-width:997px){.expandButton_TmdG{width:100%;height:100%;transition:background-color var(--ifm-transition-fast)ease;background-color:var(--docusaurus-collapse-button-bg);justify-content:center;align-items:center;display:flex;position:absolute;top:0;right:0}.expandButton_TmdG:hover,.expandButton_TmdG:focus{background-color:var(--docusaurus-collapse-button-bg-hover)}.expandButtonIcon_i1dp{transform:rotate(0)}[dir=rtl] .expandButtonIcon_i1dp{transform:rotate(180deg)}}:root{--doc-sidebar-width:300px;--doc-sidebar-hidden-width:30px}.docSidebarContainer_YfHR{display:none}@media (min-width:997px){.docSidebarContainer_YfHR{width:var(--doc-sidebar-width);margin-top:calc(-1*var(--ifm-navbar-height));border-right:1px solid var(--ifm-toc-border-color);will-change:width;transition:width var(--ifm-transition-fast)ease;clip-path:inset(0);display:block}.docSidebarContainerHidden_DPk8{width:var(--doc-sidebar-hidden-width);cursor:pointer}.sidebarViewport_aRkj{height:100%;max-height:100vh;position:sticky;top:0}}.docMainContainer_TBSr{width:100%;display:flex}@media (min-width:997px){.docMainContainer_TBSr{max-width:calc(100% - var(--doc-sidebar-width));flex-grow:1}.docMainContainerEnhanced_lQrH{max-width:calc(100% - var(--doc-sidebar-hidden-width))}.docItemWrapperEnhanced_JWYK{max-width:calc(var(--ifm-container-width) + var(--doc-sidebar-width))!important}}.docRoot_UBD9{width:100%;display:flex}.docsWrapper_hBAB{flex:1 0 auto;display:flex}.list_XWVl{background-color:var(--ifm-card-background-color);text-align:center;flex-wrap:wrap;justify-content:space-evenly;align-items:baseline;width:100%;margin:0;padding:0;list-style:none;display:flex}.list_XWVl li{width:120px;margin:20px}.list_XWVl img{width:120px;height:120px}.form-container_QXOg{border:1px solid var(--ifm-table-border-color);border-radius:.5rem;margin:1.5rem;padding:1.5rem;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}html[data-theme=dark] .form-container_QXOg{box-shadow:0 10px 15px -3px rgba(255,255,255,.1),0 4px 6px -2px rgba(255,255,255,.05)}.form-container_QXOg>div{margin-bottom:1.5rem}.form-container_QXOg label,.sent_JiIp{margin:1em;font-size:.875rem;font-weight:500;line-height:1.25rem;display:block}.form-container_QXOg input{background-color:var(--ifm-code-background);border:solid 1px var(--ifm-table-border-color);color:var(--ifm-color-emphasis-700);border-radius:5px;width:calc(100% - 2em);margin:auto;padding:.625rem;font-size:.875rem;line-height:1.25rem;display:block}.form-container_QXOg textarea{background-color:var(--ifm-code-background);border-color:var(--ifm-table-border-color);color:var(--ifm-color-emphasis-700);resize:vertical;border-width:1px;border-radius:5px;width:calc(100% - 2em);height:8rem;margin:auto;padding:.625rem;font-size:.875rem;line-height:1.25rem;display:block}.form-container_QXOg button[type=submit]{background-color:var(--ifm-color-primary);color:#fff;cursor:pointer;text-align:center;border:0;border-radius:5px;width:calc(100% - 2em);max-width:500px;margin:2em auto;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;line-height:1.25rem;display:block}@media (min-width:640px){.form-container_QXOg button[type=submit]{width:auto}}.form-container_QXOg button[type=submit]:hover{background-color:var(--ifm-color-primary-darker)}.form-container_QXOg button[type=submit]:disabled{background-color:var(--ifm-color-primary-lightest)!important;cursor:default!important}.info_tJPF{margin-left:1em;font-size:.9em}.error_mTyF{color:var(--ifm-color-danger);text-align:center}:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 rgba(255,255,255,.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 1px 0 rgba(30,35,90,.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 1px 1px 0 rgba(3,4,9,.3);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{background:var(--docsearch-searchbox-background);color:var(--docsearch-muted-color);cursor:pointer;-webkit-user-select:none;user-select:none;border:0;border-radius:40px;justify-content:space-between;align-items:center;height:36px;margin:0 0 0 16px;padding:0 8px;font-weight:500;display:flex}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6px}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{padding:0 12px 0 6px;font-size:1rem}.DocSearch-Button-Keys{min-width:calc(40px + .8em);display:flex}.DocSearch-Button-Key{background:var(--docsearch-key-gradient);box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);border:0;border-radius:3px;justify-content:center;align-items:center;width:20px;height:18px;margin-right:.4em;padding:0 0 2px;transition-property:all;transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex;position:relative;top:-1px}@media (prefers-reduced-motion){.DocSearch-Button-Key{transition:none}}.DocSearch-Button-Key--pressed{box-shadow:var(--docsearch-key-pressed-shadow);transform:translateY(1px)}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);z-index:200;width:100vw;height:100vh;position:fixed;top:0;left:0}.DocSearch-Container a{-webkit-text-decoration:none;text-decoration:none}.DocSearch-Link{appearance:none;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;background:0 0;border:0;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);box-shadow:var(--docsearch-modal-shadow);max-width:var(--docsearch-modal-width);border-radius:6px;flex-direction:column;margin:60px auto auto;position:relative}.DocSearch-SearchBar{padding:var(--docsearch-spacing)var(--docsearch-spacing)0;display:flex}.DocSearch-Form{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);height:var(--docsearch-searchbox-height);padding:0 var(--docsearch-spacing);border-radius:4px;align-items:center;width:100%;margin:0;display:flex;position:relative}.DocSearch-Input{appearance:none;color:var(--docsearch-text-color);font:inherit;background:0 0;border:0;outline:none;flex:1;width:80%;height:100%;padding:0 0 0 8px;font-size:1.2em}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button{display:none}.DocSearch-Input::-webkit-search-decoration{display:none}.DocSearch-Input::-webkit-search-results-button{display:none}.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{color:var(--docsearch-highlight-color);justify-content:center;align-items:center;display:flex}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{color:var(--docsearch-highlight-color);justify-content:center;align-items:center;display:flex}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{appearance:none;color:var(--docsearch-icon-color);cursor:pointer;stroke-width:var(--docsearch-icon-stroke-width);background:0 0;border:0;border-radius:50%;animation:none;right:0}}.DocSearch-Reset{appearance:none;color:var(--docsearch-icon-color);cursor:pointer;stroke-width:var(--docsearch-icon-stroke-width);background:0 0;border:0;border-radius:50%;padding:2px;animation:.1s ease-in forwards fade-in;right:0}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{width:24px;height:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color)var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:0 0}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{margin:0;padding:0;list-style:none}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{-webkit-user-select:none;user-select:none;margin:0;font-size:.9em}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{color:var(--docsearch-highlight-color);background:0 0}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing);justify-content:center;font-size:.85em;display:flex}.DocSearch-HitsFooter a{color:inherit;border-bottom:1px solid}.DocSearch-Hit{border-radius:4px;padding-bottom:4px;scroll-margin-top:40px;display:flex;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform-origin:top;transition:all .25s linear .25s;transform:scale(0)}.DocSearch-Hit a{background:var(--docsearch-hit-background);box-shadow:var(--docsearch-hit-shadow);padding-left:var(--docsearch-spacing);border-radius:4px;width:100%;display:block}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);z-index:10;margin:0 -4px;padding:8px 4px 0;font-size:.85em;font-weight:600;line-height:32px;position:sticky;top:0}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{-webkit-text-decoration:underline;text-decoration:underline}.DocSearch-Hit-Container{color:var(--docsearch-hit-color);height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing)0 0;flex-direction:row;align-items:center;display:flex}.DocSearch-Hit-icon{width:20px;height:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;width:22px;height:22px;display:flex}.DocSearch-Hit-action svg{width:18px;height:18px;display:block}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{appearance:none;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:50%;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{text-overflow:ellipsis;white-space:nowrap;flex-direction:column;flex:auto;justify-content:center;width:80%;margin:0 8px;font-weight:500;line-height:1.2em;display:flex;position:relative;overflow-x:hidden}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{text-align:center;width:80%;margin:0 auto;padding:36px 0;font-size:.9em}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{text-align:left;padding-bottom:24px;display:inline-block}.DocSearch-NoResults-Prefill-List ul{padding:8px 0 0;display:inline-block}.DocSearch-NoResults-Prefill-List li{list-style-type:"» ";list-style-position:inside}.DocSearch-Prefill{appearance:none;color:var(--docsearch-highlight-color);cursor:pointer;background:0 0;border:0;border-radius:1em;padding:0;font-size:1em;font-weight:700;display:inline-block}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;-webkit-text-decoration:underline;text-decoration:underline}.DocSearch-Footer{background:var(--docsearch-footer-background);box-shadow:var(--docsearch-footer-shadow);height:var(--docsearch-footer-height);padding:0 var(--docsearch-spacing);-webkit-user-select:none;user-select:none;z-index:300;border-radius:0 0 8px 8px;flex-direction:row-reverse;flex-shrink:0;justify-content:space-between;align-items:center;width:100%;display:flex;position:relative}.DocSearch-Commands{color:var(--docsearch-muted-color);margin:0;padding:0;list-style:none;display:flex}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{background:var(--docsearch-key-gradient);box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);border:0;border-radius:2px;justify-content:center;align-items:center;width:20px;height:18px;margin-right:.4em;padding:0 0 1px;display:flex}.DocSearch-VisuallyHiddenForAccessibility{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh,1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;position:absolute;bottom:0}.DocSearch-Hit-content-wrapper{width:80%;display:flex;position:relative}.DocSearch-Modal{box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh,1vh)*100);border-radius:0;width:100%;max-width:100%;margin:0}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh,1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{appearance:none;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin-left:var(--docsearch-spacing);-webkit-user-select:none;user-select:none;white-space:nowrap;background:0 0;border:0;outline:none;flex:none;padding:0;font-size:1em;font-weight:500;display:inline-block;overflow:hidden}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}:root{--docsearch-primary-color:var(--ifm-color-primary);--docsearch-text-color:var(--ifm-font-color-base)}.DocSearch-Button{transition:all var(--ifm-transition-fast)var(--ifm-transition-timing-default);margin:0}.DocSearch-Container{z-index:calc(var(--ifm-z-index-fixed) + 1)}.codeBlockContainer_Ckt0{background:var(--prism-background-color);color:var(--prism-color);margin-bottom:var(--ifm-leading);box-shadow:var(--ifm-global-shadow-lw);border-radius:var(--ifm-code-border-radius)}.codeBlockContent_biex{border-radius:inherit;direction:ltr;position:relative}.codeBlockTitle_Ktv7{border-bottom:1px solid var(--ifm-color-emphasis-300);font-size:var(--ifm-code-font-size);padding:.75rem var(--ifm-pre-padding);border-top-left-radius:inherit;border-top-right-radius:inherit;font-weight:500}.codeBlock_bY9V{--ifm-pre-background:var(--prism-background-color);margin:0;padding:0}.codeBlockTitle_Ktv7+.codeBlockContent_biex .codeBlock_bY9V{border-top-left-radius:0;border-top-right-radius:0}.codeBlockStandalone_MEMb{padding:0}.codeBlockLines_e6Vv{font:inherit;float:left;min-width:100%;padding:var(--ifm-pre-padding)}.codeBlockLinesWithNumbering_o6Pm{padding:var(--ifm-pre-padding)0;display:table}@media print{.codeBlockLines_e6Vv{white-space:pre-wrap}}.buttonGroup__atx{right:calc(var(--ifm-pre-padding)/2);top:calc(var(--ifm-pre-padding)/2);column-gap:.2rem;display:flex;position:absolute}.buttonGroup__atx button{background:var(--prism-background-color);color:var(--prism-color);border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-global-radius);transition:opacity var(--ifm-transition-fast)ease-in-out;opacity:0;align-items:center;padding:.4rem;line-height:0;display:flex}.buttonGroup__atx button:hover{opacity:1!important}.buttonGroup__atx button:focus-visible{opacity:1!important}.theme-code-block:hover .buttonGroup__atx button{opacity:.4}:where(:root){--docusaurus-highlighted-code-line-bg:#484d5b}:where([data-theme=dark]){--docusaurus-highlighted-code-line-bg:#646464}.theme-code-block-highlighted-line{background-color:var(--docusaurus-highlighted-code-line-bg);margin:0 calc(-1*var(--ifm-pre-padding));padding:0 var(--ifm-pre-padding);display:block}.codeLine_lJS_{counter-increment:line-count;display:table-row}.codeLineNumber_Tfdd{text-align:right;width:1%;padding:0 var(--ifm-pre-padding);background:var(--ifm-pre-background);overflow-wrap:normal;display:table-cell;position:sticky;left:0}.codeLineNumber_Tfdd:before{content:counter(line-count);opacity:.4}.theme-code-block-highlighted-line .codeLineNumber_Tfdd:before{opacity:.8}.codeLineContent_feaV{padding-right:var(--ifm-pre-padding)}.theme-code-block:hover .copyButtonCopied_obH4{opacity:1!important}.copyButtonIcons_eSgA{width:1.125rem;height:1.125rem;position:relative}.copyButtonIcon_y97N,.copyButtonSuccessIcon_LjdS{fill:currentColor;opacity:inherit;width:inherit;height:inherit;transition:all var(--ifm-transition-fast)ease;position:absolute;top:0;left:0}.copyButtonSuccessIcon_LjdS{opacity:0;color:#00d600;top:50%;left:50%;transform:translate(-50%,-50%)scale(.33)}.copyButtonCopied_obH4 .copyButtonIcon_y97N{opacity:0;transform:scale(.33)}.copyButtonCopied_obH4 .copyButtonSuccessIcon_LjdS{opacity:1;transition-delay:75ms;transform:translate(-50%,-50%)scale(1)}.wordWrapButtonIcon_Bwma{width:1.2rem;height:1.2rem}.wordWrapButtonEnabled_EoeP .wordWrapButtonIcon_Bwma{color:var(--ifm-color-primary)}.details_lb9f{--docusaurus-details-summary-arrow-size:.38rem;--docusaurus-details-transition:transform .2s ease;--docusaurus-details-decoration-color:grey}.details_lb9f>summary{cursor:pointer;padding-left:1rem;list-style:none;position:relative}.details_lb9f>summary::-webkit-details-marker{display:none}.details_lb9f>summary:before{content:"";border-width:var(--docusaurus-details-summary-arrow-size);border-style:solid;border-color:transparent transparent transparent var(--docusaurus-details-decoration-color);transition:var(--docusaurus-details-transition);transform-origin:calc(var(--docusaurus-details-summary-arrow-size)/2)50%;position:absolute;top:.45rem;left:0;transform:rotate(0)}.details_lb9f[open]:not(.isBrowser_bmU9)>summary:before,.details_lb9f[data-collapsed=false].isBrowser_bmU9>summary:before{transform:rotate(90deg)}.collapsibleContent_i85q{border-top:1px solid var(--docusaurus-details-decoration-color);margin-top:1rem;padding-top:1rem}.collapsibleContent_i85q p:last-child,.details_lb9f>summary>p:last-child{margin-bottom:0}.details_b_Ee{--docusaurus-details-decoration-color:var(--ifm-alert-border-color);--docusaurus-details-transition:transform var(--ifm-transition-fast)ease;margin:0 0 var(--ifm-spacing-vertical);border:1px solid var(--ifm-alert-border-color)}.containsTaskList_mC6p{list-style:none}:not(.containsTaskList_mC6p>li)>.containsTaskList_mC6p{padding-left:0}.img_ev3q{height:auto}:root{--docusaurus-tag-list-border:var(--ifm-color-emphasis-300)}.tag_zVej{border:1px solid var(--docusaurus-tag-list-border);transition:border var(--ifm-transition-fast)}.tag_zVej:hover{--docusaurus-tag-list-border:var(--ifm-link-color);-webkit-text-decoration:none;text-decoration:none}.tagRegular_sFm0{border-radius:var(--ifm-global-radius);padding:.2rem .5rem .3rem;font-size:90%}.tagWithCount_h2kH{border-left:0;align-items:center;padding:0 .5rem 0 1rem;display:flex;position:relative}.tagWithCount_h2kH:before,.tagWithCount_h2kH:after{content:"";border:1px solid var(--docusaurus-tag-list-border);transition:inherit;position:absolute;top:50%}.tagWithCount_h2kH:before{border-bottom:0;border-right:0;width:1.18rem;height:1.18rem;right:100%;transform:translate(50%,-50%)rotate(-45deg)}.tagWithCount_h2kH:after{border-radius:50%;width:.5rem;height:.5rem;left:0;transform:translateY(-50%)}.tagWithCount_h2kH span{background:var(--ifm-color-secondary);color:var(--ifm-color-black);border-radius:var(--ifm-global-radius);margin-left:.3rem;padding:.1rem .4rem;font-size:.7rem;line-height:1.2}.tags_jXut{display:inline}.tag_QGVx{margin:0 .4rem .5rem 0;display:inline-block}.iconEdit_Z9Sw{vertical-align:sub;margin-right:.3em}.lastUpdated_JAkA{margin-top:.2rem;font-size:smaller;font-style:italic}@media (min-width:997px){.lastUpdated_JAkA{text-align:right}}.content_kfNa{color:var(--ifm-color-content-secondary);justify-content:center;align-items:center;display:flex}.sponsors{text-align:left;align-self:start;width:100%;padding:1em}.sponsors .sponsors-title{font-weight:700}.sponsors ul{margin:0;padding:0;list-style:none}.sponsors a{background-color:var(--ifm-color-emphasis-100);border:1px solid var(--ifm-table-border-color);color:var(--ifm-color-content-secondary);border-radius:2px;justify-content:center;align-items:center;height:60px;margin:.5em 0;-webkit-text-decoration:none;text-decoration:none;display:flex}.sponsors img{max-width:100%;max-height:60px}.tableOfContents_bqdL{max-height:calc(100vh - (var(--ifm-navbar-height) + 2rem));top:calc(var(--ifm-navbar-height) + 1rem);position:sticky;overflow-y:auto}@media (max-width:996px){.tableOfContents_bqdL{display:none}.docItemContainer_F8PC{padding:0 .3rem}}.tocCollapsibleButton_TO0P{font-size:inherit;justify-content:space-between;align-items:center;width:100%;padding:.4rem .8rem;display:flex}.tocCollapsibleButton_TO0P:after{content:"";background:var(--ifm-menu-link-sublist-icon)50% 50%/2rem 2rem no-repeat;filter:var(--ifm-menu-link-sublist-icon-filter);width:1.25rem;height:1.25rem;transition:transform var(--ifm-transition-fast);transform:rotate(180deg)}.tocCollapsibleButtonExpanded_MG3E:after{transform:none}.tocCollapsible_ETCw{background-color:var(--ifm-menu-color-background-active);border-radius:var(--ifm-global-radius);margin:1rem 0}.tocCollapsibleContent_vkbj>ul{border-left:none;border-top:1px solid var(--ifm-color-emphasis-300);padding:.2rem 0;font-size:15px}.tocCollapsibleContent_vkbj ul li{margin:.4rem .8rem}.tocCollapsibleContent_vkbj a{display:block}.tocCollapsibleExpanded_sAul{transform:none}@media (min-width:997px){.tocMobile_ITEo{display:none}}@media print{.tocMobile_ITEo{display:none}}.docItemContainer_c0TR header+*,.docItemContainer_c0TR article>:first-child{margin-top:0}@media (min-width:997px){.docItemCol_z5aJ{max-width:75%!important}}.docItemContainer_c0TR .custom-content-toc{display:none}.carousel_dVSv{box-shadow:0 0 20px var(--ifm-color-secondary-darkest);border:1px solid #000;border-radius:5px;overflow:hidden}.carousel_dVSv [class~=carousel-slider]{overflow:visible!important}.carousel_dVSv [class~=control-dots]{bottom:-50px!important}.carousel_dVSv [class~=dot]{background-color:#616060!important}.carousel_dVSv [class~=legend]{bottom:10px!important}.features_xdhU{align-items:center;width:100%;padding:1rem 0;display:flex}.center_LOKI{text-align:center;justify-content:center;display:flex}.left_Y8za{text-align:left}.editorHint_eaPQ{text-align:start;justify-self:flex-start;width:90%;margin:1em}.padding_OUuT{padding-bottom:1em}.steps_x5R3{background-color:var(--ifm-pre-background);border:1px solid gray;border-radius:3px;margin-bottom:2em;padding:.5em .5em .5em 2em}.border_yjIZ{border:1px solid gray;border-radius:3px;padding:0;overflow:hidden}.border_yjIZ>*{margin:0!important}.featureSvg__8YW{width:100px;height:100px;margin:1em}.rowLight_gCoF{background-color:#fafafa}.rowDark_XdIb{background-color:var(--ifm-color-secondary-lighter)}html[data-theme=dark] .rowLight_gCoF{background-color:var(--ifm-background-color)}html[data-theme=dark] .rowDark_XdIb{background-color:var(--ifm-background-surface-color)}html[data-theme=dark] .features_xdhU img[src$=\.svg]{filter:invert(.9)}.carousel_oYf_{max-width:800px}.buttons_CYIY>*{width:13em;margin:1em}.finePrint_YKYp{text-align:center;margin-top:2em;margin-bottom:-2em;font-size:.7em}.sliders_tEds{text-align:center;width:100%;max-width:40em;margin:1em auto;font:1.2em sans-serif;position:relative}.sliders_tEds>span{display:inline-block;position:relative;bottom:.2em}.sliders_tEds .buttons_NJZT>*{width:13em;margin:1em}.slider_ZiNZ{text-align:center;width:30%;height:1.4em;display:inline-block;position:relative;overflow-y:hidden}.slider_ZiNZ>div{background-color:var(--ifm-background-color);white-space:nowrap;width:calc(100% - .4em);margin:.2em;transition:all .5s;position:absolute;top:-1.4em;overflow:hidden}.slider_ZiNZ .current_jjur{top:0}.slider_ZiNZ .hidden_OdSS{top:1.4em}.container_Egsj{border:1px solid #000;border-radius:5px;width:100%;height:50vh;min-height:250px}.container_Egsj iframe{border-radius:5px;width:100%;height:100%}.tabItem_Ymn6>:last-child{margin-bottom:0}.tabList__CuJ{margin-bottom:var(--ifm-leading)}.tabItem_LNqP{margin-top:0!important}.details_sGeq{--docusaurus-details-decoration-color:var(--ifm-alert-border-color);--docusaurus-details-transition:transform var(--ifm-transition-fast)ease;margin:0 0 var(--ifm-spacing-vertical);border:1px solid var(--ifm-alert-border-color)}.details_iMJ2{--docusaurus-details-summary-arrow-size:.38rem;--docusaurus-details-transition:transform .2s ease;--docusaurus-details-decoration-color:grey}.details_iMJ2>summary{cursor:pointer;padding-left:1rem;list-style:none;position:relative}.details_iMJ2>summary::-webkit-details-marker{display:none}.details_iMJ2>summary:before{content:"";border-width:var(--docusaurus-details-summary-arrow-size);border-style:solid;border-color:transparent transparent transparent var(--docusaurus-details-decoration-color);transition:var(--docusaurus-details-transition);transform-origin:calc(var(--docusaurus-details-summary-arrow-size)/2)50%;position:absolute;top:.45rem;left:0;transform:rotate(0)}.details_iMJ2[open]:not(.isBrowser_HA_8)>summary:before,.details_iMJ2[data-collapsed=false].isBrowser_HA_8>summary:before{transform:rotate(90deg)}.collapsibleContent_AEyV{border-top:1px solid var(--docusaurus-details-decoration-color);margin-top:1rem;padding-top:1rem}.collapsibleContent_AEyV p:last-child,.details_iMJ2>summary>p:last-child{margin-bottom:0}.heroBanner_qdFl{text-align:center;padding:2rem 0 0;position:relative;overflow:hidden}html[data-theme=light] .heroBanner_qdFl{background-color:var(--ifm-color-secondary)}.eaHomepage_CKX0{min-height:90px;margin:2.5em auto 0}@media (max-width:997px){.eaHomepage_CKX0{min-height:110px!important}}.buttons_AeoN{justify-content:center;align-items:center;display:flex}.tryButton_B7Kd{background-color:var(--ifm-color-secondary-dark)}.tryButton_B7Kd:hover{background-color:var(--ifm-color-secondary-darkest)}.description_meEo{margin-top:2em;margin-bottom:-1em}.form_bM8e{margin-bottom:3em}.form_bM8e input,.form_bM8e select{margin-left:1em}.colorValue_LfXD{color:var(--ifm-color-content-secondary);margin-left:1em;font-size:smaller} \ No newline at end of file diff --git a/docs/assets/files/hash-9dd0148ddb2f39842f39f389ec4236cc.js b/docs/assets/files/hash-9dd0148ddb2f39842f39f389ec4236cc.js new file mode 100644 index 0000000..a51a71d --- /dev/null +++ b/docs/assets/files/hash-9dd0148ddb2f39842f39f389ec4236cc.js @@ -0,0 +1 @@ +const e=require("fs"),t=require("crypto"),i=async({devMode:i=!1,buildDir:r="build/livecodes/",entryPoint:a="index.js",patchFiles:l=["build/index.html"],hashPattern:s=/{{hash:([\w\.-]+)}}/g}={})=>{let n=["js","css","html","svg","ico","png","json"],o=async t=>(await e.promises.readdir(t)).filter(i=>!e.statSync(t+i).isDirectory()).filter(e=>n.some(t=>e.endsWith("."+t))),f=async e=>{let t=[];for(let i of e)(await o(i)).forEach(e=>{t.push(i+e)});return t},w=async()=>{for(let t of[...l,...await f([r])]){let i=(await e.promises.readFile(t,"utf8")).replace(new RegExp(s),(e,t)=>t);await e.promises.writeFile(t,i,"utf8")}};if(i)return w();let c=(e,t)=>{let i=n.find(t=>e.endsWith("."+t));return i&&(e=u(e).replace(`.${i}`,`.${t}.${i}`)),e},u=e=>{let t=e.split(".");return e.length<35||t.length<3?e:t.filter((e,t)=>32!==e.length||0===t).join(".")},p=e=>t.createHash("md5").update(e).digest("hex"),d={},h=async t=>{if(d[t])return;d[t]="waiting";let a=await e.promises.readFile(r+t,"utf8").catch(e=>{if(i)return"";throw e});for(let e of a.matchAll(new RegExp(s))){let t=e[1];t&&!d[t]&&await h(t)}let l=a.replace(new RegExp(s),(e,t)=>d[t]);if(i){d[t]=t,await e.promises.writeFile(r+t,l,"utf8");return}let n=c(t,p(l));d[t]=n,await e.promises.writeFile(r+n,l,"utf8")};for(let t of(await h(a),Object.keys(d)))d[t]!==t&&await e.promises.unlink(r+t).catch(e=>{if(!i)throw e});for(let t of l){let i=(await e.promises.readFile(t,"utf8")).replace(new RegExp(s),(e,t)=>d[t]);await e.promises.writeFile(t,i,"utf8")}};module.exports={applyHash:i},require.main===module&&i(); \ No newline at end of file diff --git a/docs/assets/files/i18n-exclude-e5d517ec6b92591b6019979892ee8d93.js b/docs/assets/files/i18n-exclude-e5d517ec6b92591b6019979892ee8d93.js new file mode 100644 index 0000000..6cf5cda --- /dev/null +++ b/docs/assets/files/i18n-exclude-e5d517ec6b92591b6019979892ee8d93.js @@ -0,0 +1,5 @@ +const e=require("fs"),i=require("path"),r=`// @ts-nocheck +// This comment is added by i18n-exclude script and should be automatically removed after build. +// If you see this comment in the file, it means there is something wrong during the build process. + +`,t=i.resolve("src/livecodes/i18n/locales");require.main===module&&(()=>{if("true"===process.env.BUILD_INCLUDE_LOCALES)return;let s=process.argv[2];console.log(`Running i18n-exclude in ${s} phase`),e.readdirSync(t,{withFileTypes:!0}).filter(e=>e.isDirectory()&&"en"!==e.name).map(e=>i.join(t,e.name)).forEach(t=>{for(let n of e.readdirSync(t).filter(e=>e.endsWith(".ts")).map(e=>i.join(t,e))){let i=e.readFileSync(n,"utf8");"pre"===s?i.startsWith(r)||(i=r+i):"post"===s&&(i=i.replace(r,"")),e.writeFileSync(n,i,"utf8")}})})(),module.exports={TS_NOCHECK:r}; \ No newline at end of file diff --git a/docs/assets/files/i18n-export-83977ebfdbe21c25c30819abc6321af1.js b/docs/assets/files/i18n-export-83977ebfdbe21c25c30819abc6321af1.js new file mode 100644 index 0000000..2b8121e --- /dev/null +++ b/docs/assets/files/i18n-export-83977ebfdbe21c25c30819abc6321af1.js @@ -0,0 +1,18 @@ +const e=require("fs"),t=require("path"),a=require("jsdom"),r=require("prettier"),n=require("@babel/core"),s=require("@babel/parser"),i=require("../package.json"),o=t.resolve("src/livecodes/i18n/locales/tmp"),l=t.resolve("src/livecodes/i18n/locales/en"),u=t.resolve("src/livecodes"),c=i.prettier,p="// ATTENTION: This file is auto-generated from source code. Do not edit manually!",d={translation:{},"language-info":{}},m={translation:{},"language-info":{}},g=(e,t=2)=>JSON.stringify(e,(e,t)=>t instanceof Object&&!(t instanceof Array)?Object.keys(t).sort().reduce((e,a)=>(e[a]=t[a],e),{}):t,t),h=async(a,n)=>{let s="translation"===a?"translation":"languageInfo",i=`${p} + + import type { I18nTranslationTemplate } from '../models'; + + // This is used as a template for other translations. + // Other translations should be typed like this: + // const ${s}: ${"translation"===a?"I18nTranslation":"I18nLangInfoTranslation"} = { /* translation here */ }; + + // Since we allow nested objects, it is important to distinguish I18nTranslationTemplate from I18nAttributes. + // In view of this, properties declared in I18nAttributes (and those attributes might be used in future) shall not be used as a nested key. + + const ${s} = ${g(d[a])} as const satisfies I18nTranslationTemplate; + + export default ${s}; + `,u=await r.format(i,{parser:"typescript",...c});m[a].$comment=p.substring(3);let h=n?o:l;e.existsSync(h)||e.mkdirSync(h,{recursive:!0}),await Promise.all([e.promises.writeFile(t.join(h,a+".ts"),u),e.promises.writeFile(t.join(h,a+".lokalise.json"),await r.format(g(m[a]).replace(/<(\/?)(\d+)>/g,"<$1tag-$2>"),{parser:"json",...c}))]),console.log(`Generated namespace ${a} in ${h}.`)},f=(e,t,a,r)=>{let n=(e=e.split(":")).pop(),s=1===e.length?e.pop():"translation",i=n.split("."),o=d[s];i.forEach((e,a)=>{o[e]?a===i.length-1&&o[e]!==t&&console.error(`Duplicate key: ${n}`):o[e]=a===i.length-1?t:{},o=o[e]}),r&&1!==r.length?r.forEach(e=>{m[s][n+`#${e}`]={translation:t[e],notes:a[e]}}):m[s][n]={translation:t,notes:a}},y=e=>{let t=new a.JSDOM(e).window.document,r=[],n=0,s=e=>{if(e.nodeType!==t.ELEMENT_NODE)return;e.childNodes.forEach(e=>{s(e)});let a=e.tagName.toLowerCase();if("body"===a)return;let i=0===e.attributes.length?void 0:Array.from(e.attributes).reduce((e,t)=>(e[t.name]=t.value,e),{});r.push({name:a,attributes:i});let o=t.createElement(`tag-${n}`);for(;e.firstChild;)o.appendChild(e.firstChild);e.parentNode.replaceChild(o,e),n++};s(t.body);let i=1,o=[],l=t.body.innerHTML.replace(/tag-/g,""),u=[];return l=l.replace(/<(\d+)>/g,(e,t)=>(u.push(r[t]),o.push({from:RegExp(``,"g"),to:`<*/${i}>`}),`<${i++}>`)),o.forEach(({from:e,to:t})=>{l=l.replace(e,t)}),{html:l=l.replace(/<\*\//g,"e.map((e,t)=>`### <${t+1}> ### +<${e.name} ${e.attributes?Object.keys(e.attributes).map(t=>`${t}="${e.attributes[t]}"`).join(" "):""} /> + +`).join(""),b=async t=>{let r=(e,t)=>{if("innerHTML"===t){let{html:t,elements:a}=y(e.innerHTML);return{value:t.trim(),desc:v(a)}}return{value:(t.startsWith("data-")?e.dataset[t.slice(5)]:e[t]||e.getAttribute(t)).trim(),desc:""}};f("translation:splash.loading","Loading LiveCodes\u2026","",["textContent"]),await Promise.all(t.map(async t=>{try{let n=(await e.promises.readFile(t,"utf8")).replace(/\s+/g," ").trim();new a.JSDOM(n).window.document.querySelectorAll("[data-i18n]").forEach(e=>{let t=e.getAttribute("data-i18n"),a=(e.getAttribute("data-i18n-prop")??"textContent").split(" "),{value:n,desc:s}=1===a.length?r(e,a[0]):a.reduce((t,a)=>{let n=r(e,a);return t.value[a]=n.value,t.desc[a]=n.desc,t},{value:{},desc:{}});f(t,n,s,a)})}catch(e){console.error(e)}}))},$=async t=>{await Promise.all(t.map(async t=>{try{let a=await e.promises.readFile(t,"utf8"),r=s.parse(a,{sourceType:"module",plugins:["typescript"]});n.traverse(r,{CallExpression(e){if("MemberExpression"===e.node.callee.type&&"Identifier"===e.node.callee.property.type&&"translateString"===e.node.callee.property.name&&e.node.arguments.length>=2&&"StringLiteral"===e.node.arguments[0].type&&"StringLiteral"===e.node.arguments[1].type){if(!e.node.arguments[2]||e.node.arguments[2].properties.every(e=>!e.key||!e.value||"isHTML"!==e.key.name||"isHTML"===e.key.name&&!0!==e.value.value))f(e.node.arguments[0].value,e.node.arguments[1].value,"",void 0);else{let{html:t,elements:a}=y(e.node.arguments[1].value);f(e.node.arguments[0].value,t.trim(),v(a),void 0)}}}})}catch(e){console.error(e)}}))},w=function(a,r=[]){return e.readdirSync(a).forEach(function(n){let s=a+t.sep+n;e.statSync(s).isDirectory()?r=w(s,r):r.push(s)}),r},T=async()=>{let e=process.argv.slice(2).filter(e=>!e.startsWith("-")),a=process.argv.includes("--save-temp"),r=[],n=[];e.length||e.push(...w(u)),r.push(...e.filter(e=>e.endsWith(".html")&&e.startsWith(t.resolve(u,`html${t.sep}`))).map(e=>t.resolve(u,e))),n.push(...e.filter(e=>e.endsWith(".ts")).map(e=>t.resolve(u,e))),await b(r),await $(n),h("translation",a),Object.keys(d["language-info"]).length>0&&h("language-info",a)};module.exports={generateTranslation:T,sortedJSONify:g,prettierConfig:c,autoGeneratedWarning:p},require.main===module&&T(); \ No newline at end of file diff --git a/docs/assets/files/i18n-import-28359d2898f8ffcd1048c32f5d6a3401.mjs b/docs/assets/files/i18n-import-28359d2898f8ffcd1048c32f5d6a3401.mjs new file mode 100644 index 0000000..8c344c6 --- /dev/null +++ b/docs/assets/files/i18n-import-28359d2898f8ffcd1048c32f5d6a3401.mjs @@ -0,0 +1,8 @@ +import{LokaliseApi as e}from"@lokalise/node-api";import{execSync as o}from"child_process";import i from"fs";import r from"path";import a from"prettier";import{exit as s}from"process";import{autoGeneratedWarning as t,prettierConfig as n,sortedJSONify as l}from"./i18n-export.js";let p=r.resolve("src/livecodes/i18n/locales"),c=r.join(p,"tmp"),f=new e({apiKey:process.env.LOKALISE_API_TOKEN}),d=process.env.LOKALISE_PROJECT_ID,m=async(e,o)=>{let r=JSON.parse(await i.promises.readFile(e,"utf-8")),a={};for(let e in r){if(!o.has(e))continue;let i=e.split("."),s=i.pop(),t=a;i.forEach(e=>{t[e]||(t[e]={}),t=t[e]}),t[s]=r[e].replace(/tag-/g,"")}return a};(async()=>{let e="true"===process.env.CI,u=process.argv.slice(2).includes("--force"),g=process.argv.slice(2).includes("--local");e||u||(console.error("This script is intended to be run in CI mode or with --force flag."),s(1));let w=process.argv[2];w||(console.error("Branch name is required"),s(1));let $=r.resolve(process.env.LOKALISE_TEMP);if(!g){let e;console.log("Fetching translations from Lokalise...");let a=`${d}:${w}`,t=await f.files().async_download(a,{format:"json",original_filenames:!0,json_unescaped_slashes:!0,replace_breaks:!1,placeholder_format:"i18n"}),n=Date.now();for(;;){let o=await f.queuedProcesses().get(t.process_id,{project_id:a});if("finished"===o.status){e=o.details;break}Date.now()-n>6e4&&(console.error("Timeout exceeded. Aborting..."),s(1)),await new Promise(e=>setTimeout(e,2500))}console.log(`Downloading zip file from ${e.download_url}`);let l=r.join($,"locales.zip"),p=await fetch(e.download_url);await i.promises.writeFile(l,Buffer.from(await p.arrayBuffer())),console.log(`Extracting zip file to ${$}...`),o(`unzip -o ${l} -d ${$}`),await i.promises.unlink(l)}let _=await i.promises.readdir($);console.log(`Extracted languages to tmp directory, ${_.length} languages (including English) found.`),console.log("Checking if translation keys are outdated...");let h={},j={};for(let e of(o("npm run i18n-export -- --save-temp",{stdio:"pipe"}),(await i.promises.readdir(c)).filter(e=>e.endsWith(".lokalise.json")))){let o=e.split(".")[0],a=r.join(c,e),s=JSON.parse(await i.promises.readFile(a,"utf-8"));for(let e in h[o]={},s)h[o][e]=s[e].translation}let y=r.join($,"en");for(let e of(await i.promises.readdir(y))){let o=e.split(".")[0],a=r.join(y,e),s=JSON.parse(await i.promises.readFile(a,"utf-8"));for(let e in j[o]=new Set,s){if(h[o][e]){if(h[o][e]!==s[e]){console.warn(`Skipping: Key ${e} in namespace ${o} is outdated.`);continue}}else{console.warn(`Skipping: Key ${e} in namespace ${o} is missing in local translation.`);continue}j[o].add(e)}}for(let e of _){let o=r.join($,e);if(!(await i.promises.stat(o)).isDirectory()||"en"===e)continue;e=e.replace(/_/g,"-");let s=r.join(p,e);console.log(`Importing language ${e}...`),await i.promises.mkdir(s,{recursive:!0});let c=(await i.promises.readdir(o)).map(async e=>{let p=r.join(o,e),c=r.join(s,e.replace(".lokalise.json",".ts")),f=e.split(".")[0],d="translation"===f?"translation":"languageInfo",u="translation"===f?"I18nTranslation":"I18nLangInfoTranslation",g=l(await m(p,j[f])),w=`${t} + + import type { ${u} } from '../models'; + + const ${d}: ${u} = ${g}; + + export default ${d}; + `,$=await a.format(w,{parser:"typescript",...n});return i.promises.writeFile(c,$)});await Promise.all(c)}})(); \ No newline at end of file diff --git a/docs/assets/files/i18n-lokalise-json-331642ee9c64647d271c8928cd4d8880.mjs b/docs/assets/files/i18n-lokalise-json-331642ee9c64647d271c8928cd4d8880.mjs new file mode 100644 index 0000000..c9e7f96 --- /dev/null +++ b/docs/assets/files/i18n-lokalise-json-331642ee9c64647d271c8928cd4d8880.mjs @@ -0,0 +1 @@ +import e from"@babel/core";import r from"@babel/parser";import t from"fs";import s from"path";import{autoGeneratedWarning as o,sortedJSONify as l}from"./i18n-export.js";let a=(e,r="")=>Object.keys(e).reduce((t,s)=>{let o=e[s];return"object"==typeof o?{...t,...a(o,`${r}${s}.`)}:{...t,[`${r}${s}`]:o}},{}),n=e=>{if(!e)throw Error("Node is undefined or null");let r={};return e.properties.forEach(e=>{r[e.key.name||e.key.value]=i(e.value)}),r},i=e=>{switch(e.type){case"ObjectExpression":return n(e);case"ArrayExpression":return e.elements.map(i);case"StringLiteral":case"NumericLiteral":case"BooleanLiteral":return e.value;case"NullLiteral":return null;default:throw Error(`Unsupported node type: ${e.type}`)}},c=async i=>{let c=s.resolve("src/livecodes/i18n/locales/"+i);if(t.existsSync(c)){if("en"===i){console.warn("This script is not intended to be run for English language.\nPlease use `npm run i18n-export` instead.");return}}else{console.error(`Language ${c} does not exist.`);return}return Promise.all(t.readdirSync(c).filter(e=>e.endsWith(".ts")).map(e=>s.resolve(c,e)).map(async p=>{try{let u;console.log(`Generating Lokalise JSON for ${p} in language ${i}...`);let m=await t.promises.readFile(p,"utf8"),d=r.parse(m,{sourceType:"module",plugins:["typescript"]});e.traverse(d,{ObjectExpression(e){u=n(e.node),e.stop()}});let f={$comment:o.substring(3)};for(let[e,r]of Object.entries(a(u)))f[e]={translation:r};let y=s.resolve(c,p.replace(".ts",".lokalise.json"));await t.promises.writeFile(y,l(f).replace(/<(\/?)(\d+)>/g,"<$1tag-$2>"))}catch(e){console.error(e)}}))};(async()=>{let e=new Set(process.argv.slice(2));if(e.has("all")){e.delete("all");let r=s.resolve("src/livecodes/i18n/locales");t.readdirSync(r).filter(e=>t.statSync(s.resolve(r,e)).isDirectory()&&"en"!==e&&"tmp"!==e).forEach(r=>e.add(r))}await Promise.all([...e].map(c))})(); \ No newline at end of file diff --git a/docs/assets/files/i18n-update-notify-a3777449a43532d607ba41185a4d7760.yml b/docs/assets/files/i18n-update-notify-a3777449a43532d607ba41185a4d7760.yml new file mode 100644 index 0000000..908d3e5 --- /dev/null +++ b/docs/assets/files/i18n-update-notify-a3777449a43532d607ba41185a4d7760.yml @@ -0,0 +1,38 @@ +name: i18n-update-notify + +on: + pull_request_target: + branches: [develop] + types: [closed] + paths: ['src/livecodes/i18n/locales/**'] + +jobs: + notify: + name: Notify + runs-on: ubuntu-latest + if: github.event.pull_request.merged && github.event.sender.login != 'github-actions[bot]' && !startsWith(github.head_ref, 'i18n/') + steps: + - name: Generate Github Token for CI Bot + uses: actions/create-github-app-token@v1 + id: generate-token + with: + app-id: ${{ secrets.CI_APP_ID }} + private-key: ${{ secrets.CI_APP_PRIVATE_KEY }} + + - name: Create comment on PR + uses: actions/github-script@v6 + with: + github-token: ${{ steps.generate-token.outputs.token }} + script: | + const commentBody = `## i18n Actions + Source PR has been merged into the default branch. + + Maintainers can comment \`.i18n-update-push\` to trigger the i18n update workflow and push the changes to Lokalise. + `; + + github.rest.issues.createComment({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + body: commentBody + }) diff --git a/docs/assets/files/i18n-update-pull-d89075850c83dbf05af9b0d6b67c1d1e.yml b/docs/assets/files/i18n-update-pull-d89075850c83dbf05af9b0d6b67c1d1e.yml new file mode 100644 index 0000000..2e78760 --- /dev/null +++ b/docs/assets/files/i18n-update-pull-d89075850c83dbf05af9b0d6b67c1d1e.yml @@ -0,0 +1,235 @@ +name: i18n-update-pull + +on: + issue_comment: + types: [created] + +env: + LOKALISE_PROJECT_ID: ${{ vars.LOKALISE_PROJECT_ID }} + LOKALISE_API_TOKEN: ${{ secrets.LOKALISE_API_TOKEN }} + NODE_VERSION: 18.x + CI: true + +jobs: + precheck: + name: Pre-check + runs-on: ubuntu-latest + if: github.event.issue.pull_request && github.event.issue.pull_request.merged_at && github.event.issue.state == 'closed' && github.event.comment.body == '.i18n-update-pull' && (github.event.comment.author_association == 'COLLABORATOR' || github.event.comment.author_association == 'MEMBER' || github.event.comment.author_association == 'OWNER') + outputs: + skip: ${{ steps.fetch-pr.outputs.skip }} + skipReason: ${{ steps.fetch-pr.outputs.skipReason }} + newBranch: ${{ steps.fetch-pr.outputs.newBranch }} + branch: ${{ steps.fetch-pr.outputs.branch }} + + steps: + - name: Generate Github Token for CI Bot + uses: actions/create-github-app-token@v1 + id: generate-token + with: + app-id: ${{ secrets.CI_APP_ID }} + private-key: ${{ secrets.CI_APP_PRIVATE_KEY }} + + - name: Check out repository + uses: actions/checkout@v4 + with: + token: ${{ steps.generate-token.outputs.token }} + + - name: Fetch PR details + id: fetch-pr + run: | + PR_DETAILS=$(curl -s -H "Authorization: token $GITHUB_TOKEN" "${{ github.event.issue.pull_request.url }}") + PR_BRANCH=$(echo "$PR_DETAILS" | jq -r '.head.ref') + + skip () { + echo "$1 Exiting..." + echo "skip=true" >> $GITHUB_OUTPUT + echo "skipReason=$1" >> $GITHUB_OUTPUT + } + + if [[ $PR_BRANCH == "i18n/"* ]]; then + skip "Branch \`$PR_BRANCH\` is a i18n branch." + fi + + PR_BRANCH=$(echo "$PR_DETAILS" | jq -r '.head.label' | sed 's/:/\//g') + NEW_BRANCH="i18n/$PR_BRANCH" + echo "newBranch=$NEW_BRANCH" >> $GITHUB_OUTPUT + echo "branch=$PR_BRANCH" >> $GITHUB_OUTPUT + + git config --global user.name "livecodes-ci[bot]" + git config --global user.email "186997172+livecodes-ci[bot]@users.noreply.github.com" + + if [[ ! $(git ls-remote --heads origin $NEW_BRANCH) ]]; then + skip "Branch \`$NEW_BRANCH\` does not exist." + fi + env: + GITHUB_TOKEN: ${{ steps.generate-token.outputs.token }} + + runner: + name: Runner + runs-on: ubuntu-latest + needs: precheck + if: needs.precheck.outputs.skip != 'true' + env: + NEW_BRANCH: ${{ needs.precheck.outputs.newBranch }} + PR_BRANCH: ${{ needs.precheck.outputs.branch }} + + steps: + - name: Generate Github Token for CI Bot + uses: actions/create-github-app-token@v1 + id: generate-token + with: + app-id: ${{ secrets.CI_APP_ID }} + private-key: ${{ secrets.CI_APP_PRIVATE_KEY }} + + - name: Check out repository + uses: actions/checkout@v4 + with: + ref: ${{ needs.precheck.outputs.newBranch }} + token: ${{ steps.generate-token.outputs.token }} + + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: ${{ env.NODE_VERSION }} + cache: 'npm' + cache-dependency-path: '**/package-lock.json' + + - name: Install dependencies + run: npm ci + + - name: Import from Lokalise + run: | + mkdir -p $LOKALISE_TEMP && touch $LOKALISE_TEMP/locales.zip && npm run i18n-update-pull -- $PR_BRANCH && rm -rf $LOKALISE_TEMP + env: + LOKALISE_TEMP: lokalise_tmp + + - name: Generate Lokalise JSON files + run: npm run i18n-lokalise-json all + + - name: Linting and fixing + run: npm run fix + + - name: Commit changes + run: | + git config --global user.name "livecodes-ci[bot]" + git config --global user.email "186997172+livecodes-ci[bot]@users.noreply.github.com" + git add . + + # Only commit if there are changes + git diff-index --quiet HEAD || git commit -m "i18n: pull translation from Lokalise" + + # Save SHA of the latest commit to locale + echo "LAST_COMMIT_SHA=$(git log -n 1 --format="%H" -- src/livecodes/i18n/locales)" >> $GITHUB_ENV + + - name: Push changes + run: git push origin $NEW_BRANCH + + - name: Create a new i18n PR, comment on source PR and reaction + uses: actions/github-script@v7 + with: + github-token: ${{ steps.generate-token.outputs.token }} + script: | + const repoURL = context.payload.repository.html_url; + const branchURL = `${repoURL}/tree/${process.env.NEW_BRANCH}`; + const prTitle = `i18n: ${{ github.event.issue.title }}`; + const prBody = `## What type of PR is this? (check all applicable) + + - [ ] ✨ Feature + - [ ] 🐛 Bug Fix + - [ ] 📝 Documentation Update + - [ ] 🎨 Style + - [ ] ♻️ Code Refactor + - [ ] 🔥 Performance Improvements + - [ ] ✅ Test + - [ ] 🤖 Build + - [ ] 🔁 CI + - [ ] 📦 Chore (Release) + - [ ] ⏩ Revert + - [x] 🌐 Internationalization / Translation + + ## Description + ### i18n Actions: \`.i18n-update-pull\` + Localization pulled from Lokalise. + + | Name | Description | + | --- | --- | + | **i18n Branch** | [\`${process.env.NEW_BRANCH}\`](${branchURL}) | + | **Last Commit SHA** | ${process.env.LAST_COMMIT_SHA} | + + ## Related Tickets & Documents + - **Source PR**: #${{ github.event.issue.number }} + `; + + const prInfo = await github.rest.pulls.create({ + owner: context.repo.owner, + repo: context.repo.repo, + title: prTitle, + body: prBody, + head: process.env.NEW_BRANCH, + base: '${{ github.event.repository.default_branch }}' + }); + + const commentBody = `## i18n Actions: \`.i18n-update-pull\` + Localization pulled from Lokalise. + + | Name | Description | + | --- | --- | + | **i18n Branch** | [\`${process.env.NEW_BRANCH}\`](${branchURL}) | + | **Last Commit SHA** | ${process.env.LAST_COMMIT_SHA} | + | **i18n PR** | #${prInfo.data.number} | + `; + + github.rest.issues.createComment({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + body: commentBody + }) + + github.rest.reactions.createForIssueComment({ + owner: context.repo.owner, + repo: context.repo.repo, + comment_id: ${{ github.event.comment.id }}, + content: 'rocket' + }); + + exception: + name: Exception + runs-on: ubuntu-latest + needs: precheck + if: needs.precheck.outputs.skip == 'true' + env: + SKIP_REASON: ${{ needs.precheck.outputs.skipReason }} + + steps: + - name: Generate Github Token for CI Bot + uses: actions/create-github-app-token@v1 + id: generate-token + with: + app-id: ${{ secrets.CI_APP_ID }} + private-key: ${{ secrets.CI_APP_PRIVATE_KEY }} + + - name: Create reaction on PR + uses: actions/github-script@v7 + with: + github-token: ${{ steps.generate-token.outputs.token }} + script: | + const runURL = `${context.payload.repository.html_url}/actions/runs/${process.env.GITHUB_RUN_ID}`; + const commentBody = `## i18n Actions: \`.i18n-update-pull\` + Failed to perform action due to following reason: **${process.env.SKIP_REASON}** + + Please check [action logs](${runURL}) for more details. + `; + github.rest.issues.createComment({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + body: commentBody + }) + + github.rest.reactions.createForIssueComment({ + owner: context.repo.owner, + repo: context.repo.repo, + comment_id: ${{ github.event.comment.id }}, + content: 'confused' + }); diff --git a/docs/assets/files/i18n-update-push-0ccaf936f8b7727f7a8e5c8a4a944707.yml b/docs/assets/files/i18n-update-push-0ccaf936f8b7727f7a8e5c8a4a944707.yml new file mode 100644 index 0000000..fcbf516 --- /dev/null +++ b/docs/assets/files/i18n-update-push-0ccaf936f8b7727f7a8e5c8a4a944707.yml @@ -0,0 +1,195 @@ +name: i18n-update-push + +on: + issue_comment: + types: [created] + +env: + LOKALISE_PROJECT_ID: ${{ vars.LOKALISE_PROJECT_ID }} + LOKALISE_API_TOKEN: ${{ secrets.LOKALISE_API_TOKEN }} + NODE_VERSION: 18.x + CI: true + +jobs: + precheck: + name: Pre-check + runs-on: ubuntu-latest + if: github.event.issue.pull_request && github.event.issue.pull_request.merged_at && github.event.issue.state == 'closed' && github.event.comment.body == '.i18n-update-push' && (github.event.comment.author_association == 'COLLABORATOR' || github.event.comment.author_association == 'MEMBER' || github.event.comment.author_association == 'OWNER') + outputs: + skip: ${{ steps.fetch-pr.outputs.skip }} + skipReason: ${{ steps.fetch-pr.outputs.skipReason }} + newBranch: ${{ steps.fetch-pr.outputs.newBranch }} + branch: ${{ steps.fetch-pr.outputs.branch }} + + steps: + - name: Generate Github Token for CI Bot + uses: actions/create-github-app-token@v1 + id: generate-token + with: + app-id: ${{ secrets.CI_APP_ID }} + private-key: ${{ secrets.CI_APP_PRIVATE_KEY }} + + - name: Check out repository + uses: actions/checkout@v4 + with: + token: ${{ steps.generate-token.outputs.token }} + + - name: Fetch PR details + id: fetch-pr + run: | + PR_DETAILS=$(curl -s -H "Authorization: token $GITHUB_TOKEN" "${{ github.event.issue.pull_request.url }}") + PR_BRANCH=$(echo "$PR_DETAILS" | jq -r '.head.ref') + + if [[ $PR_BRANCH == "i18n/"* ]]; then + SKIP_REASON="Branch \`$PR_BRANCH\` is a i18n branch." + echo "$SKIP_REASON Exiting..." + echo "skip=true" >> $GITHUB_OUTPUT + echo "skipReason=$SKIP_REASON" >> $GITHUB_OUTPUT + fi + + # Use branch name prefixed with owner name + PR_BRANCH=$(echo "$PR_DETAILS" | jq -r '.head.label' | sed 's/:/\//g') + NEW_BRANCH="i18n/$PR_BRANCH" + echo "newBranch=$NEW_BRANCH" >> $GITHUB_OUTPUT + echo "branch=$PR_BRANCH" >> $GITHUB_OUTPUT + + git config --global user.name "livecodes-ci[bot]" + git config --global user.email "186997172+livecodes-ci[bot]@users.noreply.github.com" + + if [[ $(git ls-remote --heads origin $NEW_BRANCH) ]]; then + SKIP_REASON="Branch \`$NEW_BRANCH\` already exists." + echo "$SKIP_REASON Exiting..." + echo "skip=true" >> $GITHUB_OUTPUT + echo "skipReason=$SKIP_REASON" >> $GITHUB_OUTPUT + fi + env: + GITHUB_TOKEN: ${{ steps.generate-token.outputs.token }} + + runner: + name: Runner + runs-on: ubuntu-latest + needs: precheck + if: needs.precheck.outputs.skip != 'true' + env: + NEW_BRANCH: ${{ needs.precheck.outputs.newBranch }} + PR_BRANCH: ${{ needs.precheck.outputs.branch }} + + steps: + - name: Generate Github Token for CI Bot + uses: actions/create-github-app-token@v1 + id: generate-token + with: + app-id: ${{ secrets.CI_APP_ID }} + private-key: ${{ secrets.CI_APP_PRIVATE_KEY }} + + - name: Check out repository + uses: actions/checkout@v4 + with: + token: ${{ steps.generate-token.outputs.token }} + + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: ${{ env.NODE_VERSION }} + cache: 'npm' + cache-dependency-path: '**/package-lock.json' + + - name: Install dependencies + run: npm ci + + - name: Create new branch + run: git checkout -b $NEW_BRANCH + + - name: Linting and fixing + run: npm run fix + + - name: Commit changes + run: | + git config --global user.name "livecodes-ci[bot]" + git config --global user.email "186997172+livecodes-ci[bot]@users.noreply.github.com" + git add . + + # Only commit if there are changes + git diff-index --quiet HEAD || git commit -m "i18n: update source texts" + + # Save SHA of the latest commit to English locale + echo "LAST_COMMIT_SHA=$(git log -n 1 --format="%H" -- src/livecodes/i18n/locales/en)" >> $GITHUB_ENV + + - name: Push changes + run: git push origin $NEW_BRANCH + + - name: Push source texts to Lokalise + run: npm run i18n-update-push -- $PR_BRANCH + + - name: Create comment and reaction on PR + uses: actions/github-script@v7 + with: + github-token: ${{ steps.generate-token.outputs.token }} + script: | + const repoURL = context.payload.repository.html_url; + const branchURL = `${repoURL}/tree/${process.env.NEW_BRANCH}`; + const commentBody = `## i18n Actions: \`.i18n-update-push\` + Localization updated and pushed to [Lokalise](https://app.lokalise.com/project/${process.env.LOKALISE_PROJECT_ID}/?branch=${process.env.PR_BRANCH}). + + | Name | Description | + | --- | --- | + | **New Branch for i18n** | [\`${process.env.NEW_BRANCH}\`](${branchURL}) | + | **Last Commit SHA** | ${process.env.LAST_COMMIT_SHA} | + + Maintainers can comment \`.i18n-update-pull\` after translation is done to trigger the i18n pull workflow and pull the changes back to Github. + `; + + github.rest.issues.createComment({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + body: commentBody + }) + + github.rest.reactions.createForIssueComment({ + owner: context.repo.owner, + repo: context.repo.repo, + comment_id: ${{ github.event.comment.id }}, + content: 'rocket' + }); + + exception: + name: Exception + runs-on: ubuntu-latest + needs: precheck + if: needs.precheck.outputs.skip == 'true' + env: + SKIP_REASON: ${{ needs.precheck.outputs.skipReason }} + + steps: + - name: Generate Github Token for CI Bot + uses: actions/create-github-app-token@v1 + id: generate-token + with: + app-id: ${{ secrets.CI_APP_ID }} + private-key: ${{ secrets.CI_APP_PRIVATE_KEY }} + + - name: Create comment and reaction on PR + uses: actions/github-script@v7 + with: + github-token: ${{ steps.generate-token.outputs.token }} + script: | + const runURL = `${context.payload.repository.html_url}/actions/runs/${process.env.GITHUB_RUN_ID}`; + const commentBody = `## i18n Actions: \`.i18n-update-push\` + Failed to perform action due to following reason: **${process.env.SKIP_REASON}** + + Please check [action logs](${runURL}) for more details. + `; + github.rest.issues.createComment({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + body: commentBody + }) + + github.rest.reactions.createForIssueComment({ + owner: context.repo.owner, + repo: context.repo.repo, + comment_id: ${{ github.event.comment.id }}, + content: 'confused' + }); diff --git a/docs/assets/files/i18n-update-scheduled-fc9b46482ca124aee2d68a17c3a1b69f.yml b/docs/assets/files/i18n-update-scheduled-fc9b46482ca124aee2d68a17c3a1b69f.yml new file mode 100644 index 0000000..be2b5ac --- /dev/null +++ b/docs/assets/files/i18n-update-scheduled-fc9b46482ca124aee2d68a17c3a1b69f.yml @@ -0,0 +1,179 @@ +name: i18n-update-scheduled + +# Triggered weekly to update source texts and push them to Lokalise, then pull the translations back to Github. +# Work on i18n/develop branch. + +on: + schedule: + - cron: '0 0 * * 0' + push: + branches: + - develop + workflow_dispatch: + +env: + LOKALISE_PROJECT_ID: ${{ vars.LOKALISE_PROJECT_ID }} + LOKALISE_API_TOKEN: ${{ secrets.LOKALISE_API_TOKEN }} + BRANCH: i18n/develop + LOKALISE_BRANCH: master + NODE_VERSION: 18.x + CI: true + +jobs: + update: + name: Push and Pull + runs-on: ubuntu-latest + + steps: + - name: Generate Github Token for CI Bot + uses: actions/create-github-app-token@v1 + id: generate-token + with: + app-id: ${{ secrets.CI_APP_ID }} + private-key: ${{ secrets.CI_APP_PRIVATE_KEY }} + + - name: Check out repository + uses: actions/checkout@v4 + with: + fetch-depth: 0 + token: ${{ steps.generate-token.outputs.token }} + + - name: Switch to i18n branch + run: | + git config --global user.name "livecodes-ci[bot]" + git config --global user.email "186997172+livecodes-ci[bot]@users.noreply.github.com" + + if [[ $(git ls-remote --heads origin $BRANCH) ]]; then + git config pull.rebase false + git fetch origin $BRANCH:$BRANCH + git checkout $BRANCH + else + git checkout -b $BRANCH + fi + + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: ${{ env.NODE_VERSION }} + cache: 'npm' + cache-dependency-path: '**/package-lock.json' + + - name: Install dependencies + run: npm ci + + # - name: Linting and fixing + # run: npm run fix + + # - name: Commit changes + # run: | + # git add . + + # # Only commit if there are changes + # git diff-index --quiet HEAD || git commit -m "i18n: update source texts" + + # # Save SHA of the latest commit to English locale + # echo "LAST_COMMIT_SHA_PUSH=$(git log -n 1 --format="%H" -- src/livecodes/i18n/locales/en)" >> $GITHUB_ENV + + # - name: Push changes + # run: git push origin $BRANCH + + # - name: Push source texts to Lokalise + # run: npm run i18n-update-push -- $LOKALISE_BRANCH + + - name: Import from Lokalise + run: | + mkdir -p $LOKALISE_TEMP && touch $LOKALISE_TEMP/locales.zip && npm run i18n-update-pull -- $LOKALISE_BRANCH && rm -rf $LOKALISE_TEMP + env: + LOKALISE_TEMP: lokalise_tmp + + - name: Linting and fixing + run: npm run fix + + - name: Commit changes + run: | + git add . + + # Only commit if there are changes + git diff-index --quiet HEAD || git commit -m "i18n: pull translation from Lokalise" + + # Save SHA of the latest commit to locale + echo "LAST_COMMIT_SHA_PULL=$(git log -n 1 --format="%H" -- src/livecodes/i18n/locales)" >> $GITHUB_ENV + + - name: Push changes + run: | + + git pull origin ${{ github.event.repository.default_branch }} || { + echo "Failed to pull from ${{ github.event.repository.default_branch }}." + echo "Please manually pull the changes, solve potential conflicts, and re-run the workflow." + echo "::error title=Pull failed::Failed to pull from ${{ github.event.repository.default_branch }}." + exit 1 + } + + git push origin $BRANCH + + - name: Check if has differences between ${{ env.BRANCH }} and ${{ github.event.repository.default_branch }} + id: check-diff + run: | + DIFF=$(git diff --name-only $BRANCH origin/${{ github.event.repository.default_branch }}) + if [[ -z $DIFF ]]; then + echo "No difference between $BRANCH and ${{ github.event.repository.default_branch }}." + echo "SKIP=true" >> $GITHUB_OUTPUT + fi + + echo "LAST_COMMIT_SHA_PUSH=$(git log -n 1 --format="%H" -- src/livecodes/i18n/locales/en)" >> $GITHUB_ENV + + - name: Create a new i18n PR if not exists + uses: actions/github-script@v7 + if: steps.check-diff.outputs.SKIP != 'true' + with: + github-token: ${{ steps.generate-token.outputs.token }} + script: | + const prInfo = await github.rest.pulls.list({ + owner: context.repo.owner, + repo: context.repo.repo, + state: 'open', + head: process.env.BRANCH + }); + + if (prInfo.data.length > 0) { + return; + } + + console.log(`Creating a new i18n PR from ${process.env.BRANCH}...`); + + const repoURL = context.payload.repository.html_url; + const branchURL = `${repoURL}/tree/${process.env.BRANCH}`; + const prTitle = `i18n: scheduled update from ${process.env.BRANCH}`; + const prBody = `## What type of PR is this? (check all applicable) + + - [ ] ✨ Feature + - [ ] 🐛 Bug Fix + - [ ] 📝 Documentation Update + - [ ] 🎨 Style + - [ ] ♻️ Code Refactor + - [ ] 🔥 Performance Improvements + - [ ] ✅ Test + - [ ] 🤖 Build + - [ ] 🔁 CI + - [ ] 📦 Chore (Release) + - [ ] ⏩ Revert + - [x] 🌐 Internationalization / Translation + + ## Description + ### i18n Actions: \`.i18n-update-scheduled\` + Scheduled update of source texts and translations. + + | Name | Description | + | --- | --- | + | **Last Commit SHA (Push)** | ${process.env.LAST_COMMIT_SHA_PUSH} | + | **Last Commit SHA (Pull)** | ${process.env.LAST_COMMIT_SHA_PULL} | + `; + + github.rest.pulls.create({ + owner: context.repo.owner, + repo: context.repo.repo, + title: prTitle, + body: prBody, + head: process.env.BRANCH, + base: '${{ github.event.repository.default_branch }}' + }); diff --git a/docs/assets/files/i18n-upload-6d83a823535487ee2d3034a686d86062.mjs b/docs/assets/files/i18n-upload-6d83a823535487ee2d3034a686d86062.mjs new file mode 100644 index 0000000..6111e38 --- /dev/null +++ b/docs/assets/files/i18n-upload-6d83a823535487ee2d3034a686d86062.mjs @@ -0,0 +1,2 @@ +import{LokaliseApi as e}from"@lokalise/node-api";import o from"fs";import r from"path";import{exit as s}from"process";let i=r.resolve("src/livecodes/i18n/locales/en"),a=new e({apiKey:process.env.LOKALISE_API_TOKEN}),n=process.env.LOKALISE_PROJECT_ID,t={cleanup_mode:!0,replace_modified:!0,convert_placeholders:!1};(()=>{let e="true"===process.env.CI,l=process.argv.slice(2).includes("--force");e||l||(console.error("This script is intended to be run in CI mode or with --force flag."),s(1));let c=process.argv[2];c||(console.error("Branch name is required"),s(1)),o.existsSync(i)||(console.error(`Directory ${i} doesn't exist, please run i18n-export first`),s(1)),o.readdir(i,async(e,l)=>{e&&(console.error(e),s(1));let p=l.filter(e=>e.endsWith(".lokalise.json")).map(e=>({data:o.readFileSync(r.join(i,e)).toString("base64"),filename:e,lang_iso:"en"}));console.log(`Following files will be uploaded to Lokalise: +${p.map(e=>e.filename).join("\n")}`),(await a.branches().list({project_id:n})).items.some(e=>e.name===c)||(console.log(`Branch ${c} doesn't exist. Creating...`),await a.branches().create({name:c},{project_id:n}));let d=(await Promise.all(p.map(e=>a.files().upload(`${n}:${c}`,{...e,...t})))).map(e=>e.process_id);console.log("Waiting for files to be processed...");let m=Date.now();for(;!(await Promise.all(d.map(e=>a.queuedProcesses().get(e,{project_id:`${n}:${c}`})))).every(e=>"finished"===e.status);)Date.now()-m>6e4&&(console.error("Timeout exceeded. Aborting..."),s(1)),await new Promise(e=>setTimeout(e,2500))})})(); \ No newline at end of file diff --git a/docs/assets/files/vscode-intellisense-9573a05c29631b61eab8c1ea3da9c50d.js b/docs/assets/files/vscode-intellisense-9573a05c29631b61eab8c1ea3da9c50d.js new file mode 100644 index 0000000..1b39b7b --- /dev/null +++ b/docs/assets/files/vscode-intellisense-9573a05c29631b61eab8c1ea3da9c50d.js @@ -0,0 +1 @@ +const e=require("fs"),t=require("path"),a={version:1.1,globalAttributes:[{name:"data-i18n",description:"The key of the translation for current element."},{name:"data-i18n-prop",description:"Attributes of the element that should be translated, separated by space.",valueSet:"i18nProps"},{name:"data-hint",description:"The tooltip of the element."}],valueSets:[]},l=async()=>{await new Promise((t,l)=>{e.readFile("src/livecodes/i18n/locales/models.ts","utf8",(e,s)=>{if(e)console.error(e),l(e);else{let e=s.match(/I18nAttributes.+?{([\s\S]*?)}/)[1].split("\n").map(e=>e.trim().replace(/['|;?]/g,"").split(":")[0]).filter(e=>""!==e);a.valueSets.push({name:a.globalAttributes[1].valueSet,values:e.map(e=>({name:e}))}),t()}})});let l=t.resolve(__dirname,"../.vscode/html.html-data.json");e.writeFileSync(l,JSON.stringify(a,null,2)),console.log(`HTML Intellisense schema generated at ${l}`)};module.exports={generateHTMLIntellisense:l},require.main===module&&l(); \ No newline at end of file diff --git a/docs/assets/images/assets-1-bc942edb19a81002953065dc3fa29544.jpg b/docs/assets/images/assets-1-bc942edb19a81002953065dc3fa29544.jpg new file mode 100644 index 0000000..88d6989 Binary files /dev/null and b/docs/assets/images/assets-1-bc942edb19a81002953065dc3fa29544.jpg differ diff --git a/docs/assets/images/assets-2-8312924d50bae171b9875269d3945b7b.jpg b/docs/assets/images/assets-2-8312924d50bae171b9875269d3945b7b.jpg new file mode 100644 index 0000000..d6e90ba Binary files /dev/null and b/docs/assets/images/assets-2-8312924d50bae171b9875269d3945b7b.jpg differ diff --git a/docs/assets/images/autocomplete-54ec86de500afd076e2948246f4bf434.jpg b/docs/assets/images/autocomplete-54ec86de500afd076e2948246f4bf434.jpg new file mode 100644 index 0000000..51dc9e8 Binary files /dev/null and b/docs/assets/images/autocomplete-54ec86de500afd076e2948246f4bf434.jpg differ diff --git a/docs/assets/images/backup-restore-1-b032913c8d4f028bd6bfd4bb68f099fb.jpg b/docs/assets/images/backup-restore-1-b032913c8d4f028bd6bfd4bb68f099fb.jpg new file mode 100644 index 0000000..ed2ea9f Binary files /dev/null and b/docs/assets/images/backup-restore-1-b032913c8d4f028bd6bfd4bb68f099fb.jpg differ diff --git a/docs/assets/images/backup-restore-2-896b0a37dbb7c963ba344dbf0858deeb.jpg b/docs/assets/images/backup-restore-2-896b0a37dbb7c963ba344dbf0858deeb.jpg new file mode 100644 index 0000000..e4d0fec Binary files /dev/null and b/docs/assets/images/backup-restore-2-896b0a37dbb7c963ba344dbf0858deeb.jpg differ diff --git a/docs/assets/images/broadcast-1-c4cbf92ea7dd67ebf5f2bde4a69260e7.jpg b/docs/assets/images/broadcast-1-c4cbf92ea7dd67ebf5f2bde4a69260e7.jpg new file mode 100644 index 0000000..a81bb37 Binary files /dev/null and b/docs/assets/images/broadcast-1-c4cbf92ea7dd67ebf5f2bde4a69260e7.jpg differ diff --git a/docs/assets/images/broadcast-2-63b02f7fb51c653fe0282c80fad19f34.jpg b/docs/assets/images/broadcast-2-63b02f7fb51c653fe0282c80fad19f34.jpg new file mode 100644 index 0000000..a326fe0 Binary files /dev/null and b/docs/assets/images/broadcast-2-63b02f7fb51c653fe0282c80fad19f34.jpg differ diff --git a/docs/assets/images/broadcast-3-5307656200f0ffc75d10763429e470e8.jpg b/docs/assets/images/broadcast-3-5307656200f0ffc75d10763429e470e8.jpg new file mode 100644 index 0000000..96aecca Binary files /dev/null and b/docs/assets/images/broadcast-3-5307656200f0ffc75d10763429e470e8.jpg differ diff --git a/docs/assets/images/broadcast-4-1b7f8cf8a70b6eec75eb706db2adfe5d.jpg b/docs/assets/images/broadcast-4-1b7f8cf8a70b6eec75eb706db2adfe5d.jpg new file mode 100644 index 0000000..1efb0b9 Binary files /dev/null and b/docs/assets/images/broadcast-4-1b7f8cf8a70b6eec75eb706db2adfe5d.jpg differ diff --git a/docs/assets/images/broadcast-5-48f5b56e3638aac1b9d5774aacb9037c.jpg b/docs/assets/images/broadcast-5-48f5b56e3638aac1b9d5774aacb9037c.jpg new file mode 100644 index 0000000..18bf694 Binary files /dev/null and b/docs/assets/images/broadcast-5-48f5b56e3638aac1b9d5774aacb9037c.jpg differ diff --git a/docs/assets/images/code-to-image-1-84eb108f3d1ad47e3513918095d99939.jpg b/docs/assets/images/code-to-image-1-84eb108f3d1ad47e3513918095d99939.jpg new file mode 100644 index 0000000..901c99a Binary files /dev/null and b/docs/assets/images/code-to-image-1-84eb108f3d1ad47e3513918095d99939.jpg differ diff --git a/docs/assets/images/code-to-image-2-4b27b60f3f469687239f81b89173133f.jpg b/docs/assets/images/code-to-image-2-4b27b60f3f469687239f81b89173133f.jpg new file mode 100644 index 0000000..bcd0802 Binary files /dev/null and b/docs/assets/images/code-to-image-2-4b27b60f3f469687239f81b89173133f.jpg differ diff --git a/docs/assets/images/code-to-image-3-fcbfd59e92db9c5bfa8eb5e01575a2b4.jpg b/docs/assets/images/code-to-image-3-fcbfd59e92db9c5bfa8eb5e01575a2b4.jpg new file mode 100644 index 0000000..67ed560 Binary files /dev/null and b/docs/assets/images/code-to-image-3-fcbfd59e92db9c5bfa8eb5e01575a2b4.jpg differ diff --git a/docs/assets/images/code-to-image-4-6f6a13131eb1f8d7240daff5a5fac1e6.jpg b/docs/assets/images/code-to-image-4-6f6a13131eb1f8d7240daff5a5fac1e6.jpg new file mode 100644 index 0000000..ff9f6a4 Binary files /dev/null and b/docs/assets/images/code-to-image-4-6f6a13131eb1f8d7240daff5a5fac1e6.jpg differ diff --git a/docs/assets/images/code-to-image-5-a2e4b5939711203f3a10468909e730d6.jpg b/docs/assets/images/code-to-image-5-a2e4b5939711203f3a10468909e730d6.jpg new file mode 100644 index 0000000..b98bff0 Binary files /dev/null and b/docs/assets/images/code-to-image-5-a2e4b5939711203f3a10468909e730d6.jpg differ diff --git a/docs/assets/images/code-to-image-6-2fbdf9db8047fea6de68db6804dbf96e.jpg b/docs/assets/images/code-to-image-6-2fbdf9db8047fea6de68db6804dbf96e.jpg new file mode 100644 index 0000000..13695fa Binary files /dev/null and b/docs/assets/images/code-to-image-6-2fbdf9db8047fea6de68db6804dbf96e.jpg differ diff --git a/docs/assets/images/command-menu-1-9615cfd905b81e9239c845a65817c456.jpg b/docs/assets/images/command-menu-1-9615cfd905b81e9239c845a65817c456.jpg new file mode 100644 index 0000000..26bf33a Binary files /dev/null and b/docs/assets/images/command-menu-1-9615cfd905b81e9239c845a65817c456.jpg differ diff --git a/docs/assets/images/command-menu-2-eab7bd92c43517f9dc3a780054cec43b.jpg b/docs/assets/images/command-menu-2-eab7bd92c43517f9dc3a780054cec43b.jpg new file mode 100644 index 0000000..c26817c Binary files /dev/null and b/docs/assets/images/command-menu-2-eab7bd92c43517f9dc3a780054cec43b.jpg differ diff --git a/docs/assets/images/command-menu-3-7f55b3742e75415102d126c483b136ea.jpg b/docs/assets/images/command-menu-3-7f55b3742e75415102d126c483b136ea.jpg new file mode 100644 index 0000000..ba719ed Binary files /dev/null and b/docs/assets/images/command-menu-3-7f55b3742e75415102d126c483b136ea.jpg differ diff --git a/docs/assets/images/command-menu-4-1baba58dee0327ec984be1ebd859ef72.jpg b/docs/assets/images/command-menu-4-1baba58dee0327ec984be1ebd859ef72.jpg new file mode 100644 index 0000000..a11fcf0 Binary files /dev/null and b/docs/assets/images/command-menu-4-1baba58dee0327ec984be1ebd859ef72.jpg differ diff --git a/docs/assets/images/command-menu-5-35e9ed4d907baa9e407203cd3b7259d5.jpg b/docs/assets/images/command-menu-5-35e9ed4d907baa9e407203cd3b7259d5.jpg new file mode 100644 index 0000000..42591a5 Binary files /dev/null and b/docs/assets/images/command-menu-5-35e9ed4d907baa9e407203cd3b7259d5.jpg differ diff --git a/docs/assets/images/command-menu-6-c24403565a26eaa0df88f7b2f3cf74cc.jpg b/docs/assets/images/command-menu-6-c24403565a26eaa0df88f7b2f3cf74cc.jpg new file mode 100644 index 0000000..965f34c Binary files /dev/null and b/docs/assets/images/command-menu-6-c24403565a26eaa0df88f7b2f3cf74cc.jpg differ diff --git a/docs/assets/images/compiled-code-1-bf18468708e8da3bb486780bdc5310b0.jpg b/docs/assets/images/compiled-code-1-bf18468708e8da3bb486780bdc5310b0.jpg new file mode 100644 index 0000000..a9afead Binary files /dev/null and b/docs/assets/images/compiled-code-1-bf18468708e8da3bb486780bdc5310b0.jpg differ diff --git a/docs/assets/images/css-processors-832dad3e4809409f2d12e9d8109f0962.jpg b/docs/assets/images/css-processors-832dad3e4809409f2d12e9d8109f0962.jpg new file mode 100644 index 0000000..8d5af43 Binary files /dev/null and b/docs/assets/images/css-processors-832dad3e4809409f2d12e9d8109f0962.jpg differ diff --git a/docs/assets/images/deploy-1-cfc621da21b4b525ba8776492d128e08.jpg b/docs/assets/images/deploy-1-cfc621da21b4b525ba8776492d128e08.jpg new file mode 100644 index 0000000..a00c78a Binary files /dev/null and b/docs/assets/images/deploy-1-cfc621da21b4b525ba8776492d128e08.jpg differ diff --git a/docs/assets/images/editor-settings-1-f401ae77e35e8e11b6427b4f1eb67bb9.jpg b/docs/assets/images/editor-settings-1-f401ae77e35e8e11b6427b4f1eb67bb9.jpg new file mode 100644 index 0000000..281b6a6 Binary files /dev/null and b/docs/assets/images/editor-settings-1-f401ae77e35e8e11b6427b4f1eb67bb9.jpg differ diff --git a/docs/assets/images/editor-settings-2-dcbfd00bb00d3759e59daec48d1dc905.jpg b/docs/assets/images/editor-settings-2-dcbfd00bb00d3759e59daec48d1dc905.jpg new file mode 100644 index 0000000..c35c7e4 Binary files /dev/null and b/docs/assets/images/editor-settings-2-dcbfd00bb00d3759e59daec48d1dc905.jpg differ diff --git a/docs/assets/images/editor-settings-3-33c11e13b5bd21a710703dc0dd6bebb6.jpg b/docs/assets/images/editor-settings-3-33c11e13b5bd21a710703dc0dd6bebb6.jpg new file mode 100644 index 0000000..5f4fd90 Binary files /dev/null and b/docs/assets/images/editor-settings-3-33c11e13b5bd21a710703dc0dd6bebb6.jpg differ diff --git a/docs/assets/images/embed-1-408ede1485d4bc08a9d49ae7c79dd077.jpg b/docs/assets/images/embed-1-408ede1485d4bc08a9d49ae7c79dd077.jpg new file mode 100644 index 0000000..99b9a1f Binary files /dev/null and b/docs/assets/images/embed-1-408ede1485d4bc08a9d49ae7c79dd077.jpg differ diff --git a/docs/assets/images/embed-2-1a99c4db9d201fd7d7a928cccc31b1b6.jpg b/docs/assets/images/embed-2-1a99c4db9d201fd7d7a928cccc31b1b6.jpg new file mode 100644 index 0000000..fe4b86e Binary files /dev/null and b/docs/assets/images/embed-2-1a99c4db9d201fd7d7a928cccc31b1b6.jpg differ diff --git a/docs/assets/images/embed-3-c90eef02803a8609e7c39ccb48bbe5a6.jpg b/docs/assets/images/embed-3-c90eef02803a8609e7c39ccb48bbe5a6.jpg new file mode 100644 index 0000000..f2ebf98 Binary files /dev/null and b/docs/assets/images/embed-3-c90eef02803a8609e7c39ccb48bbe5a6.jpg differ diff --git a/docs/assets/images/export-1-242db411ba39b47325d40698ba5a146c.jpg b/docs/assets/images/export-1-242db411ba39b47325d40698ba5a146c.jpg new file mode 100644 index 0000000..98f363c Binary files /dev/null and b/docs/assets/images/export-1-242db411ba39b47325d40698ba5a146c.jpg differ diff --git a/docs/assets/images/export-2-3fa7b6dcd7e853a988e95730893ee356.jpg b/docs/assets/images/export-2-3fa7b6dcd7e853a988e95730893ee356.jpg new file mode 100644 index 0000000..c00d2f6 Binary files /dev/null and b/docs/assets/images/export-2-3fa7b6dcd7e853a988e95730893ee356.jpg differ diff --git a/docs/assets/images/features-1-f0a88a6b8dbdafd398f3836d88c00448.jpg b/docs/assets/images/features-1-f0a88a6b8dbdafd398f3836d88c00448.jpg new file mode 100644 index 0000000..167e8ba Binary files /dev/null and b/docs/assets/images/features-1-f0a88a6b8dbdafd398f3836d88c00448.jpg differ diff --git a/docs/assets/images/features-2-4573aa166bdd7acd2bb1dd6c6bb87574.jpg b/docs/assets/images/features-2-4573aa166bdd7acd2bb1dd6c6bb87574.jpg new file mode 100644 index 0000000..5dbd702 Binary files /dev/null and b/docs/assets/images/features-2-4573aa166bdd7acd2bb1dd6c6bb87574.jpg differ diff --git a/docs/assets/images/features-3-d7d9e6fc098e74420ac3e29fe91db6ea.jpg b/docs/assets/images/features-3-d7d9e6fc098e74420ac3e29fe91db6ea.jpg new file mode 100644 index 0000000..aeb4efa Binary files /dev/null and b/docs/assets/images/features-3-d7d9e6fc098e74420ac3e29fe91db6ea.jpg differ diff --git a/docs/assets/images/format-1-caf806af001854376b50db95f544bdf0.jpg b/docs/assets/images/format-1-caf806af001854376b50db95f544bdf0.jpg new file mode 100644 index 0000000..4b66ba7 Binary files /dev/null and b/docs/assets/images/format-1-caf806af001854376b50db95f544bdf0.jpg differ diff --git a/docs/assets/images/i18n-1-d9c22be743b90d798d670b9ea63fa811.jpg b/docs/assets/images/i18n-1-d9c22be743b90d798d670b9ea63fa811.jpg new file mode 100644 index 0000000..0996e05 Binary files /dev/null and b/docs/assets/images/i18n-1-d9c22be743b90d798d670b9ea63fa811.jpg differ diff --git a/docs/assets/images/i18n-2-fa2bf00ef12a8e4df2ee40ba7a7a9e8d.jpg b/docs/assets/images/i18n-2-fa2bf00ef12a8e4df2ee40ba7a7a9e8d.jpg new file mode 100644 index 0000000..47129c1 Binary files /dev/null and b/docs/assets/images/i18n-2-fa2bf00ef12a8e4df2ee40ba7a7a9e8d.jpg differ diff --git a/docs/assets/images/import-1-173c6698c44150c58b6d341db09435ad.jpg b/docs/assets/images/import-1-173c6698c44150c58b6d341db09435ad.jpg new file mode 100644 index 0000000..e3abdb4 Binary files /dev/null and b/docs/assets/images/import-1-173c6698c44150c58b6d341db09435ad.jpg differ diff --git a/docs/assets/images/import-2-d2b754e8fc74fcad61a5e7d2932be5d5.jpg b/docs/assets/images/import-2-d2b754e8fc74fcad61a5e7d2932be5d5.jpg new file mode 100644 index 0000000..26d10ba Binary files /dev/null and b/docs/assets/images/import-2-d2b754e8fc74fcad61a5e7d2932be5d5.jpg differ diff --git a/docs/assets/images/intellisense-1-bbc692078d1b88aaf8d2be72beb49849.jpg b/docs/assets/images/intellisense-1-bbc692078d1b88aaf8d2be72beb49849.jpg new file mode 100644 index 0000000..af38b12 Binary files /dev/null and b/docs/assets/images/intellisense-1-bbc692078d1b88aaf8d2be72beb49849.jpg differ diff --git a/docs/assets/images/intellisense-2-ffdab70d10948aa165e3332a58d37827.jpg b/docs/assets/images/intellisense-2-ffdab70d10948aa165e3332a58d37827.jpg new file mode 100644 index 0000000..0c05b62 Binary files /dev/null and b/docs/assets/images/intellisense-2-ffdab70d10948aa165e3332a58d37827.jpg differ diff --git a/docs/assets/images/keyboard-shortcuts-708a9ca16ed79cd65ab100291a7e946a.jpg b/docs/assets/images/keyboard-shortcuts-708a9ca16ed79cd65ab100291a7e946a.jpg new file mode 100644 index 0000000..4e05a6b Binary files /dev/null and b/docs/assets/images/keyboard-shortcuts-708a9ca16ed79cd65ab100291a7e946a.jpg differ diff --git a/docs/assets/images/languages-3-2c8a7784b440c557ef4bf1f7da60e5a3.jpg b/docs/assets/images/languages-3-2c8a7784b440c557ef4bf1f7da60e5a3.jpg new file mode 100644 index 0000000..8f86e6a Binary files /dev/null and b/docs/assets/images/languages-3-2c8a7784b440c557ef4bf1f7da60e5a3.jpg differ diff --git a/docs/assets/images/mode-focus-cfaa1455bdd069375859aa7cefbbc82d.jpg b/docs/assets/images/mode-focus-cfaa1455bdd069375859aa7cefbbc82d.jpg new file mode 100644 index 0000000..2837341 Binary files /dev/null and b/docs/assets/images/mode-focus-cfaa1455bdd069375859aa7cefbbc82d.jpg differ diff --git a/docs/assets/images/mode-full-25f311a4ee364ffd5331c99c03160894.jpg b/docs/assets/images/mode-full-25f311a4ee364ffd5331c99c03160894.jpg new file mode 100644 index 0000000..a707909 Binary files /dev/null and b/docs/assets/images/mode-full-25f311a4ee364ffd5331c99c03160894.jpg differ diff --git a/docs/assets/images/new-window-cd70a363844414d3ee937eed20e93e22.jpg b/docs/assets/images/new-window-cd70a363844414d3ee937eed20e93e22.jpg new file mode 100644 index 0000000..48f3f15 Binary files /dev/null and b/docs/assets/images/new-window-cd70a363844414d3ee937eed20e93e22.jpg differ diff --git a/docs/assets/images/preview-in-livecodes-gh-action-b5fb7b1cb63d1e5bfbce956185166e10.png b/docs/assets/images/preview-in-livecodes-gh-action-b5fb7b1cb63d1e5bfbce956185166e10.png new file mode 100644 index 0000000..4419dcb Binary files /dev/null and b/docs/assets/images/preview-in-livecodes-gh-action-b5fb7b1cb63d1e5bfbce956185166e10.png differ diff --git a/docs/assets/images/resources-5c3f57e775f433671928dd9025a1e8e1.jpg b/docs/assets/images/resources-5c3f57e775f433671928dd9025a1e8e1.jpg new file mode 100644 index 0000000..eb37563 Binary files /dev/null and b/docs/assets/images/resources-5c3f57e775f433671928dd9025a1e8e1.jpg differ diff --git a/docs/assets/images/resources-search-682ed2f25e65a5b5688ca2e1a36bb55e.jpg b/docs/assets/images/resources-search-682ed2f25e65a5b5688ca2e1a36bb55e.jpg new file mode 100644 index 0000000..0ad8d70 Binary files /dev/null and b/docs/assets/images/resources-search-682ed2f25e65a5b5688ca2e1a36bb55e.jpg differ diff --git a/docs/assets/images/responsive-4e35ef63d01b7e8e64b254560ef5bdf7.jpg b/docs/assets/images/responsive-4e35ef63d01b7e8e64b254560ef5bdf7.jpg new file mode 100644 index 0000000..76f1eae Binary files /dev/null and b/docs/assets/images/responsive-4e35ef63d01b7e8e64b254560ef5bdf7.jpg differ diff --git a/docs/assets/images/saved-projects-1-31010fb8ad45e76e319ab98bc16f6812.jpg b/docs/assets/images/saved-projects-1-31010fb8ad45e76e319ab98bc16f6812.jpg new file mode 100644 index 0000000..2def047 Binary files /dev/null and b/docs/assets/images/saved-projects-1-31010fb8ad45e76e319ab98bc16f6812.jpg differ diff --git a/docs/assets/images/share-1-54eaa244303460e2ee83ea321f36999c.jpg b/docs/assets/images/share-1-54eaa244303460e2ee83ea321f36999c.jpg new file mode 100644 index 0000000..bbbc23d Binary files /dev/null and b/docs/assets/images/share-1-54eaa244303460e2ee83ea321f36999c.jpg differ diff --git a/docs/assets/images/share-2-2d193cbc2368a1e78e6890a0e647b2be.jpg b/docs/assets/images/share-2-2d193cbc2368a1e78e6890a0e647b2be.jpg new file mode 100644 index 0000000..db83b8e Binary files /dev/null and b/docs/assets/images/share-2-2d193cbc2368a1e78e6890a0e647b2be.jpg differ diff --git a/docs/assets/images/share-3-6f99db0f4ace4e10f950b8cc1df50ff0.jpg b/docs/assets/images/share-3-6f99db0f4ace4e10f950b8cc1df50ff0.jpg new file mode 100644 index 0000000..5045421 Binary files /dev/null and b/docs/assets/images/share-3-6f99db0f4ace4e10f950b8cc1df50ff0.jpg differ diff --git a/docs/assets/images/snippets-1-d0ec1b73d1effe6e3a8f71e1de7974f2.jpg b/docs/assets/images/snippets-1-d0ec1b73d1effe6e3a8f71e1de7974f2.jpg new file mode 100644 index 0000000..23d446f Binary files /dev/null and b/docs/assets/images/snippets-1-d0ec1b73d1effe6e3a8f71e1de7974f2.jpg differ diff --git a/docs/assets/images/snippets-add-cbb29a5991e12bc4e64f65d0a3f08b17.jpg b/docs/assets/images/snippets-add-cbb29a5991e12bc4e64f65d0a3f08b17.jpg new file mode 100644 index 0000000..6cc8340 Binary files /dev/null and b/docs/assets/images/snippets-add-cbb29a5991e12bc4e64f65d0a3f08b17.jpg differ diff --git a/docs/assets/images/snippets-list-533f9ab8a9a39913fc9c91bf92570635.jpg b/docs/assets/images/snippets-list-533f9ab8a9a39913fc9c91bf92570635.jpg new file mode 100644 index 0000000..c4a37ae Binary files /dev/null and b/docs/assets/images/snippets-list-533f9ab8a9a39913fc9c91bf92570635.jpg differ diff --git a/docs/assets/images/spacing-05e1a59a21c8781758c12d8841027655.jpg b/docs/assets/images/spacing-05e1a59a21c8781758c12d8841027655.jpg new file mode 100644 index 0000000..c887eb6 Binary files /dev/null and b/docs/assets/images/spacing-05e1a59a21c8781758c12d8841027655.jpg differ diff --git a/docs/assets/images/sync-42a064ad4a4a9cca908a83f32aef3e51.jpg b/docs/assets/images/sync-42a064ad4a4a9cca908a83f32aef3e51.jpg new file mode 100644 index 0000000..e746a71 Binary files /dev/null and b/docs/assets/images/sync-42a064ad4a4a9cca908a83f32aef3e51.jpg differ diff --git a/docs/assets/images/templates-1-b2516a4c1fc6b41e0488300a36a50254.jpg b/docs/assets/images/templates-1-b2516a4c1fc6b41e0488300a36a50254.jpg new file mode 100644 index 0000000..310159d Binary files /dev/null and b/docs/assets/images/templates-1-b2516a4c1fc6b41e0488300a36a50254.jpg differ diff --git a/docs/assets/images/test-editor-0186c1c97faf3bf597fea218a63fdb0e.jpg b/docs/assets/images/test-editor-0186c1c97faf3bf597fea218a63fdb0e.jpg new file mode 100644 index 0000000..af3b8a6 Binary files /dev/null and b/docs/assets/images/test-editor-0186c1c97faf3bf597fea218a63fdb0e.jpg differ diff --git a/docs/assets/images/tests-99a062bb017d23a722610e968fbfca2a.jpg b/docs/assets/images/tests-99a062bb017d23a722610e968fbfca2a.jpg new file mode 100644 index 0000000..7c91f16 Binary files /dev/null and b/docs/assets/images/tests-99a062bb017d23a722610e968fbfca2a.jpg differ diff --git a/docs/assets/images/themes-1-c184a5ea8687727b1a0e690c8a465e02.jpg b/docs/assets/images/themes-1-c184a5ea8687727b1a0e690c8a465e02.jpg new file mode 100644 index 0000000..437b5e0 Binary files /dev/null and b/docs/assets/images/themes-1-c184a5ea8687727b1a0e690c8a465e02.jpg differ diff --git a/docs/assets/images/themes-2-c08826d8eea2d618912b9b65e4898833.jpg b/docs/assets/images/themes-2-c08826d8eea2d618912b9b65e4898833.jpg new file mode 100644 index 0000000..5f76a70 Binary files /dev/null and b/docs/assets/images/themes-2-c08826d8eea2d618912b9b65e4898833.jpg differ diff --git a/docs/assets/images/themes-3-75f2639c1c01a2a3db35cd2f86721d42.jpg b/docs/assets/images/themes-3-75f2639c1c01a2a3db35cd2f86721d42.jpg new file mode 100644 index 0000000..c7ecbdf Binary files /dev/null and b/docs/assets/images/themes-3-75f2639c1c01a2a3db35cd2f86721d42.jpg differ diff --git a/docs/assets/images/themes-4-18b621d69d0ddf788b1cb33d87885cae.jpg b/docs/assets/images/themes-4-18b621d69d0ddf788b1cb33d87885cae.jpg new file mode 100644 index 0000000..26816ea Binary files /dev/null and b/docs/assets/images/themes-4-18b621d69d0ddf788b1cb33d87885cae.jpg differ diff --git a/docs/assets/images/twoslash-129fce4a76fef85f9c655b3d0278c216.jpg b/docs/assets/images/twoslash-129fce4a76fef85f9c655b3d0278c216.jpg new file mode 100644 index 0000000..e72f914 Binary files /dev/null and b/docs/assets/images/twoslash-129fce4a76fef85f9c655b3d0278c216.jpg differ diff --git a/docs/assets/images/twoslash-jsx-dce9c452f6f57be25c0145a3471c25d9.jpg b/docs/assets/images/twoslash-jsx-dce9c452f6f57be25c0145a3471c25d9.jpg new file mode 100644 index 0000000..1a76793 Binary files /dev/null and b/docs/assets/images/twoslash-jsx-dce9c452f6f57be25c0145a3471c25d9.jpg differ diff --git a/docs/assets/images/zoom-439a6d440a32d8eeba41dbe6426d3b9c.jpg b/docs/assets/images/zoom-439a6d440a32d8eeba41dbe6426d3b9c.jpg new file mode 100644 index 0000000..74b3cc0 Binary files /dev/null and b/docs/assets/images/zoom-439a6d440a32d8eeba41dbe6426d3b9c.jpg differ diff --git a/docs/assets/js/00111de7.7793751e.js b/docs/assets/js/00111de7.7793751e.js new file mode 100644 index 0000000..5a431c3 --- /dev/null +++ b/docs/assets/js/00111de7.7793751e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1024"],{327:function(e,t,n){n.r(t),n.d(t,{default:()=>u,frontMatter:()=>r,metadata:()=>o,assets:()=>a,toc:()=>d,contentTitle:()=>c});var o=JSON.parse('{"id":"gh-action","title":"GitHub Action \u26A1","description":"The Preview in LiveCodes GitHub Action generates preview links to playgrounds for code changes in pull requests and posts them as pull request comments.","source":"@site/docs/gh-action.mdx","sourceDirName":".","slug":"/gh-action","permalink":"/docs/gh-action","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/gh-action.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Bookmarklet","permalink":"/docs/bookmarklet"},"next":{"title":"Markdown to LiveCodes","permalink":"/docs/markdown-to-livecodes"}}'),i=n("5893"),s=n("65");let r={},c="GitHub Action \u26A1",a={},d=[];function l(e){let t={a:"a",h1:"h1",header:"header",img:"img",p:"p",strong:"strong",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"github-action-",children:"GitHub Action \u26A1"})}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.a,{href:"https://github.com/live-codes/preview-in-livecodes",children:"Preview in LiveCodes"})," GitHub Action generates preview links to playgrounds for code changes in pull requests and posts them as pull request comments."]}),"\n",(0,i.jsx)(t.p,{children:"Once added to a repo, it runs when a pull request is created or updated. The new code is optionally built. The action posts in a pull request comment links to playgrounds that can use the new code."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.strong,{children:"Screenshot:"})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"Screenshot of the action",src:n(4926).Z+"",width:"1603",height:"931"})}),"\n",(0,i.jsxs)(t.p,{children:["For usage and more information, see the ",(0,i.jsx)(t.a,{href:"https://github.com/live-codes/preview-in-livecodes",children:"action docs"})," on GitHub. Also check the ",(0,i.jsx)(t.a,{href:"https://github.com/hatemhosny/preview-in-livecodes-demo",children:"example repo"})," for a working demo."]})]})}function u(e={}){let{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},4926:function(e,t,n){n.d(t,{Z:function(){return o}});let o=n.p+"assets/images/preview-in-livecodes-gh-action-b5fb7b1cb63d1e5bfbce956185166e10.png"},65:function(e,t,n){n.d(t,{Z:function(){return c},a:function(){return r}});var o=n(7294);let i={},s=o.createContext(i);function r(e){let t=o.useContext(s);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/03035cd7.ae684652.js b/docs/assets/js/03035cd7.ae684652.js new file mode 100644 index 0000000..4329d32 --- /dev/null +++ b/docs/assets/js/03035cd7.ae684652.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4878"],{3322:function(e,n,t){t.r(n),t.d(n,{default:()=>h,frontMatter:()=>c,metadata:()=>s,assets:()=>d,toc:()=>l,contentTitle:()=>o});var s=JSON.parse('{"id":"api/internal/type-aliases/WatchDestroy","title":"Type Alias: WatchDestroy()","description":"WatchDestroy: (event, fn) => object","source":"@site/docs/api/internal/type-aliases/WatchDestroy.md","sourceDirName":"api/internal/type-aliases","slug":"/api/internal/type-aliases/WatchDestroy","permalink":"/docs/api/internal/type-aliases/WatchDestroy","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/type-aliases/WatchDestroy.md","tags":[],"version":"current","frontMatter":{}}'),r=t("5893"),i=t("65");let c={},o="Type Alias: WatchDestroy()",d={},l=[{value:"Parameters",id:"parameters",level:2},{value:"Returns",id:"returns",level:2},{value:"remove()",id:"remove",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Defined in",id:"defined-in",level:2}];function a(e){let n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",p:"p",strong:"strong",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"type-alias-watchdestroy",children:"Type Alias: WatchDestroy()"})}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"WatchDestroy"}),": (",(0,r.jsx)(n.code,{children:"event"}),", ",(0,r.jsx)(n.code,{children:"fn"}),") => ",(0,r.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"event"}),": ",(0,r.jsx)(n.code,{children:'"destroy"'})]}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"fn"})]}),"\n",(0,r.jsx)(n.h2,{id:"returns",children:"Returns"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"object"})}),"\n",(0,r.jsx)(n.h3,{id:"remove",children:"remove()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"remove"}),": () => ",(0,r.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,r.jsx)(n.h4,{id:"returns-1",children:"Returns"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"void"})}),"\n",(0,r.jsx)(n.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L263",children:"models.ts:263"})})]})}function h(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},65:function(e,n,t){t.d(n,{Z:function(){return o},a:function(){return c}});var s=t(7294);let r={},i=s.createContext(r);function c(e){let n=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/04448f85.a66ae227.js b/docs/assets/js/04448f85.a66ae227.js new file mode 100644 index 0000000..a72ce79 --- /dev/null +++ b/docs/assets/js/04448f85.a66ae227.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4054"],{9827:function(e,n,t){t.r(n),t.d(n,{default:()=>u,frontMatter:()=>s,metadata:()=>r,assets:()=>c,toc:()=>i,contentTitle:()=>d});var r=JSON.parse('{"id":"languages/markdown","title":"Markdown","description":"TODO...","source":"@site/docs/languages/markdown.mdx","sourceDirName":"languages","slug":"/languages/markdown","permalink":"/docs/languages/markdown","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/markdown.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Malina.js","permalink":"/docs/languages/malina"},"next":{"title":"MDX","permalink":"/docs/languages/mdx"}}'),a=t("5893"),o=t("65");let s={},d="Markdown",c={},i=[];function l(e){let n={h1:"h1",header:"header",p:"p",...(0,o.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.header,{children:(0,a.jsx)(n.h1,{id:"markdown",children:"Markdown"})}),"\n",(0,a.jsx)(n.p,{children:"TODO..."})]})}function u(e={}){let{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(l,{...e})}):l(e)}},65:function(e,n,t){t.d(n,{Z:function(){return d},a:function(){return s}});var r=t(7294);let a={},o=r.createContext(a);function s(e){let n=r.useContext(o);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:s(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/06e19a77.81e8a532.js b/docs/assets/js/06e19a77.81e8a532.js new file mode 100644 index 0000000..380bbba --- /dev/null +++ b/docs/assets/js/06e19a77.81e8a532.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5951"],{8607:function(e,n,t){t.r(n),t.d(n,{default:()=>u,frontMatter:()=>a,metadata:()=>o,assets:()=>l,toc:()=>d,contentTitle:()=>c});var o=JSON.parse('{"id":"configuration/query-params","title":"Query Parameters","description":"A flexible and convenient way to configure the app is to use URL query parameters.","source":"@site/docs/configuration/query-params.mdx","sourceDirName":"configuration","slug":"/configuration/query-params","permalink":"/docs/configuration/query-params","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/configuration/query-params.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Configuration Object","permalink":"/docs/configuration/configuration-object"},"next":{"title":"LiveCodes SDK","permalink":"/docs/sdk/"}}'),s=t("5893"),i=t("65"),r=t("3365");let a={},c="Query Parameters",l={},d=[{value:"Usage",id:"usage",level:2}];function h(e){let n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"query-parameters",children:"Query Parameters"})}),"\n","\n",(0,s.jsxs)(n.p,{children:["A flexible and convenient way to configure the app is to use URL query parameters.\nIt allows configuration of a wide range of options, including those of the ",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object",children:"configuration object"})," and ",(0,s.jsx)(n.a,{href:"/docs/sdk/js-ts#embed-options",children:"embed options"}),"."]}),"\n",(0,s.jsx)("div",{style:{clear:"both"}}),"\n",(0,s.jsx)(n.p,{children:"Example:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"https://livecodes.io?js=console.log('Hello World!')&console=open\n"})}),"\n",(0,s.jsx)(r.Z,{params:{js:"console.log('Hello World!')",console:"open"}}),"\n",(0,s.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["All properties of ",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object",children:"configuration object"})," and ",(0,s.jsx)(n.a,{href:"/docs/sdk/js-ts#embed-options",children:"embed options"})," that have values of primitive types (e.g. string, number, boolean) can be assigned to a query parameter with the same name."]}),"\n",(0,s.jsxs)(n.p,{children:["These include:\n",(0,s.jsx)(n.a,{href:"/docs/sdk/js-ts#config",children:"config"}),",\n",(0,s.jsx)(n.a,{href:"/docs/sdk/js-ts#import",children:"import"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#mode",children:"lite"}),",\n",(0,s.jsx)(n.a,{href:"/docs/sdk/js-ts#loading",children:"loading"}),",\n",(0,s.jsx)(n.a,{href:"/docs/sdk/js-ts#template",children:"template"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#view",children:"view"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#title",children:"title"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#description",children:"description"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#activeeditor",children:"activeEditor"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#csspreset",children:"cssPreset"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#readonly",children:"readonly"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#allowlangchange",children:"allowLangChange"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#mode",children:"mode"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#autoupdate",children:"autoupdate"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#autosave",children:"autosave"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#delay",children:"delay"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#formatonsave",children:"formatOnsave"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#theme",children:"theme"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#themecolor",children:"themeColor"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#applanguage",children:"appLanguage"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#recoverunsaved",children:"recoverUnsaved"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#welcome",children:"welcome"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#showspacing",children:"showSpacing"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#layout",children:"layout"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#editor",children:"editor"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#editortheme",children:"editorTheme"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#fontfamily",children:"fontFamily"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#fontsize",children:"fontSize"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#usetabs",children:"useTabs"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#tabsize",children:"tabSize"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#linenumbers",children:"lineNumbers"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#wordwrap",children:"wordWrap"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#closebrackets",children:"closeBrackets"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#emmet",children:"emmet"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#editormode",children:"editorMode"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#semicolons",children:"semicolons"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#singlequote",children:"singleQuote"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#trailingcomma",children:"trailingComma"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"Example:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"?theme=light&delay=500&lineNumbers=false\n"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Any value given for booleans except ",(0,s.jsx)(n.code,{children:'"false"'})," (including no value) will be considered ",(0,s.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Example: all these are considered ",(0,s.jsx)(n.code,{children:"true"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"?lite=true\n?lite=1\n?lite=any\n?lite\n"})}),"\n",(0,s.jsxs)(n.p,{children:["while this is considered ",(0,s.jsx)(n.code,{children:"false"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"?lite=false\n"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Parameters that expect array of values can be supplied with comma separated values. These include:\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#tags",children:"tags"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#languages",children:"languages"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#processors",children:"processors"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#stylesheets",children:"stylesheets"}),",\n",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#scripts",children:"scripts"}),"."]}),"\n",(0,s.jsx)(n.p,{children:"Example:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"?languages=html,md,css,ts\n"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Values set in the URL query parameters override those set in ",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object",children:"configuration object"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Unlike ",(0,s.jsx)(n.a,{href:"/docs/features/user-settings",children:"user settings"})," that are set in the UI which are saved and subsequently used, those that are set in query parameters are not automatically saved."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Additional query parameters include:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"no-defaults"}),": ",(0,s.jsx)(n.code,{children:"boolean"})," (Default: ",(0,s.jsx)(n.code,{children:"false"}),")."]}),"\n",(0,s.jsxs)(n.p,{children:["If ",(0,s.jsx)(n.code,{children:"true"}),", the app will not load the ",(0,s.jsx)(n.a,{href:"/docs/features/default-template-language",children:"default template/language"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"x"}),": ",(0,s.jsx)(n.code,{children:"string"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Alias to ",(0,s.jsx)(n.a,{href:"/docs/sdk/js-ts#import",children:(0,s.jsx)(n.code,{children:"import"})})," (a URL to ",(0,s.jsx)(n.a,{href:"/docs/features/import",children:"import"}),")."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"files"}),": ",(0,s.jsx)(n.code,{children:"string"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["A comma-separated ",(0,s.jsx)(n.a,{href:"/docs/features/import#file-selection",children:"list of files to import"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"raw"}),": ",(0,s.jsx)(n.a,{href:"/docs/api/type-aliases/Language",children:(0,s.jsx)(n.code,{children:"Language"})}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["When used with ",(0,s.jsx)(n.code,{children:"import"})," or ",(0,s.jsx)(n.code,{children:"x"}),", imports the URL as code of the provided language."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"language"}),": ",(0,s.jsx)(n.a,{href:"/docs/api/type-aliases/Language",children:(0,s.jsx)(n.code,{children:"Language"})}),"."]}),"\n",(0,s.jsx)(n.p,{children:"The language to load by default in the editor."}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"lang"}),": ",(0,s.jsx)(n.a,{href:"/docs/api/type-aliases/Language",children:(0,s.jsx)(n.code,{children:"Language"})}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Alias to ",(0,s.jsx)(n.code,{children:"language"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"active"}),": ",(0,s.jsx)(n.code,{children:'"markup" | "style" | "script" | 0 | 1 | 2'}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Alias to ",(0,s.jsx)(n.a,{href:"/docs/configuration/configuration-object#activeeditor",children:(0,s.jsx)(n.code,{children:"activeEditor"})}),"."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"tools"}),": ",(0,s.jsx)(n.code,{children:'"open" | "full" | "closed" | "console" | "compiled" | "tests" | "none"'})]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.a,{href:"/docs/features/tools-pane",children:"tools pane"})," status."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"console"}),": ",(0,s.jsx)(n.code,{children:'"open" | "full" | "closed" | "none"'})]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.a,{href:"/docs/features/console",children:"console"})," status."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"compiled"}),": ",(0,s.jsx)(n.code,{children:'"open" | "full" | "closed" | "none"'})]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.a,{href:"/docs/features/compiled-code",children:"compiled code viewer"})," status."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"tests"}),": ",(0,s.jsx)(n.code,{children:'"open" | "full" | "closed" | "none"'})]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.a,{href:"/docs/features/tests",children:"tests panel"})," status."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"scrollPosition"}),": ",(0,s.jsx)(n.code,{children:"boolean"})," (Default: ",(0,s.jsx)(n.code,{children:"true"}),")."]}),"\n",(0,s.jsxs)(n.p,{children:["If ",(0,s.jsx)(n.code,{children:"false"}),", the ",(0,s.jsx)(n.a,{href:"/docs/features/result",children:"result page"})," ",(0,s.jsx)(n.a,{href:"/docs/features/result#scroll-position",children:"scroll position"})," will not be maintained after reload."]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Any ",(0,s.jsx)(n.a,{href:"/docs/api/type-aliases/Language",children:(0,s.jsx)(n.code,{children:"Language"})})," can used as a query parameter, and the value will be used as its code."]}),"\n",(0,s.jsx)(n.p,{children:"Example:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"https://livecodes.io?js=console.log('Hello World!')\n"})}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.admonition,{title:"Examples",type:"info",children:(0,s.jsxs)(n.p,{children:["For usage examples, check ",(0,s.jsx)(n.a,{href:"pathname:///../stories/?path=/story/embed-options-params--select-language",children:"storybook"})," and ",(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/develop/src/livecodes/config/__tests__/build-config.spec.ts",children:"unit tests"}),"."]})})]})}function u(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},3365:function(e,n,t){t.d(n,{Z:()=>j});var o=t("5893"),s=t("4200"),i=t("7294"),r=t("8294");function a(e){let n=(0,i.useRef)(null),[t,s]=(0,i.useState)(e.className||""),[a,c]=(0,i.useState)(e.style||{}),[l,d]=(0,i.useState)(e.height),[h,u]=(0,i.useState)(),[f,g]=(0,i.useState)(JSON.stringify(e.config||"")),[p,j]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!n.current)return;let{className:t,style:o,height:i,sdkReady:a,config:l,...m}=e;if(s(t||""),c(o||{}),d(i),h&&p===JSON.stringify(m)){if(f===JSON.stringify(l))return;g(JSON.stringify(l)),"string"==typeof l?fetch(l).then(e=>e.json()).then(e=>{h?.setConfig(e)}):l&&h.setConfig(l)}else j(JSON.stringify(m)),h?.destroy(),(0,r.T)(n.current,{config:l,...m}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,i.useEffect)(()=>()=>{h?.destroy()},[]),(0,o.jsx)("div",{ref:n,className:t,style:a,"data-height":l})}var c=t("1858"),l=t("3262"),d=t("1705"),h=t("7645"),u=t("8168"),f=t("8228"),g=t("5050");function p(e){let[n,t]=(0,i.useState)(e.js),[s,r]=(0,i.useState)(e.ts),[a,c]=(0,i.useState)(e.react),[p,j]=(0,i.useState)(e.vue),[m,x]=(0,i.useState)(e.svelte),y="3.7rem",[b,v]=(0,i.useState)(!0),[w,S]=(0,i.useState)(y),E=(0,i.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${y})`)},255)};return(0,i.useEffect)(()=>{if(l.Z.canUseDOM){let e=function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===n?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};t(e(n,"js")),r(e(s,"ts")),c(e(a,"jsx")),j(e(p,"html")),x(e(m,"html"))}},[]),(0,o.jsxs)("details",{className:`alert alert--info ${g.Z.details} ${f.Z.details}`,"data-collapsed":b,style:{height:b?y:w,overflow:"hidden",willChange:"height",transition:`height ${b?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,o.jsx)("summary",{onClick:()=>{v(!b),C()},children:"show code"}),(0,o.jsx)("div",{ref:E,style:{display:"block",overflow:"hidden"},children:(0,o.jsx)("div",{className:g.Z.collapsibleContent,children:(0,o.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,o.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,o.jsx)(d.Z,{language:"js",children:n})}),(0,o.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,o.jsx)(d.Z,{language:"ts",children:s})}),(0,o.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,o.jsx)(d.Z,{language:"jsx",children:a})}),(0,o.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,o.jsx)(d.Z,{language:"html",children:p})}),(0,o.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,o.jsx)(d.Z,{language:"html",children:m})})]})})})]})}function j(e){let{className:n,style:t,showCode:i,height:r,...l}=e,{colorMode:d}=(0,s.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(l)}; +createPlayground('#container', options); + +`.trimStart(),f=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(l)}; +createPlayground('#container', options); + +`.trimStart(),g=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(l)}; + return (); +} + +`.trimStart(),j=` + + + +`,m=` + + +
+ +`.trimStart();return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:r||"50vh",...e.style},appUrl:c.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,o.jsx)(p,{js:u,ts:f,react:g,vue:j,svelte:m})]})}},8294:function(e,n,t){t.d(n,{T:function(){return s},r:function(){return i}});var o=t(7728);async function s(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(n=e,e=null);let{config:t={},headless:o,loading:s="lazy",view:r}=n,a=o||"headless"===r,c=null,l=null;if("string"==typeof e)c=document.querySelector(e);else if(e instanceof HTMLElement)c=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!c){if(a)C(c=document.createElement("div")),document.body.appendChild(c);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(i(n)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":s);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof t&&Object.keys(t).length>0&&d.searchParams.set("config","sdk");let f=n.params;"object"==typeof f&&Object.keys(f).length>0&&JSON.stringify(f).length<1800&&Object.keys(f).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(f[e])))});let g=!1,p="Cannot call API methods after calling `destroy()`.",j=await new Promise(e=>{if(!c)return;let n=c.dataset.height||c.style.height;if(n&&!a){let e=isNaN(Number(n))?n:n+"px";c.style.height=e}"false"===c.dataset.defaultStyles||a||(c.style.backgroundColor||="#fff",c.style.border||="1px solid black",c.style.borderRadius||="8px",c.style.boxSizing||="border-box",c.style.padding||="0",c.style.width||="100%",c.style.height||=c.style.height||"300px",c.style.minHeight="200px",c.style.flexGrow="1",c.style.overflow||="hidden",c.style.resize||="vertical");let o="livecodes",i=c.querySelector(`iframe.${o}`),r=i||document.createElement("iframe");r.classList.add(o),r.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),r.setAttribute("allowtransparency","true"),r.setAttribute("allowpaymentrequest","true"),r.setAttribute("allowfullscreen","true"),r.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),r.setAttribute("loading","eager"===s?"eager":"lazy"),a?C(r):(r.style.height="100%",r.style.minHeight="200px",r.style.width="100%",r.style.margin="0",r.style.border="0",r.style.borderRadius=c.style.borderRadius),addEventListener("message",function e(n){n.source===r.contentWindow&&n.origin===h&&n.data?.type==="livecodes-init"&&(removeEventListener("message",e),l=Number(n.data.payload.appVersion.replace(/^v/,"")))}),(!l||l<46)&&addEventListener("message",function e(n){n.source===r.contentWindow&&n.origin===h&&n.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),r.contentWindow?.postMessage({type:"livecodes-config",payload:t},h))}),r.onload=()=>{e(r)},r.src=d.href,i||c.appendChild(r)}),m=new Promise(e=>{addEventListener("message",function n(t){t.source===j.contentWindow&&t.origin===h&&t.data?.type==="livecodes-ready"&&(removeEventListener("message",n),e(),m.settled=!0)})}),x=()=>g?Promise.reject(p):new Promise(async e=>{m.settled&&e(),j.contentWindow?.postMessage({type:"livecodes-load"},h),await m,e()}),y=(e,n)=>new Promise(async(t,o)=>{if(g)return o(p);await x();let s=L();addEventListener("message",function n(i){if(i.source===j.contentWindow&&i.origin===h&&i.data?.type==="livecodes-api-response"&&i.data?.id===s&&i.data.method===e){removeEventListener("message",n);let e=i.data.payload;e?.error?o(e.error):t(e)}}),j.contentWindow?.postMessage({method:e,id:s,args:n},h)}),b={},v=["load","ready","code","console","tests","destroy"],w=(e,n)=>{if(g)throw Error(p);return v.includes(e)?(y("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(n),{remove:()=>{b[e]=b[e]?.filter(e=>e!==n),b[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let n=S(e.data?.type??"");if(e.source!==j.contentWindow||e.origin!==h||!n||!b[n])return;let t=e.data?.payload;b[n]?.forEach(e=>{e(t)})});let E=()=>{Object.values(b).forEach(e=>{e.length=0}),j?.remove?.(),g=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===s&&"IntersectionObserver"in window&&new IntersectionObserver((e,n)=>{e.forEach(async e=>{e.isIntersecting&&(await x(),n.unobserve(c))})},{rootMargin:"150px"}).observe(c);let L=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>x(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,n)=>y("show",[e,n]),runTests:()=>y("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var n=arguments.length,t=Array(n>1?n-1:0),o=1;om.settled?y("destroy").then(E):g?Promise.reject(p):(E(),Promise.resolve())}}function i(){let e,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:t="https://livecodes.io",params:s={},config:i={},headless:r,import:a,lite:c,view:l,...d}=n;try{e=new URL(t)}catch{throw Error(`${t} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(n=>{let[t,o]=n;void 0!==o&&e.searchParams.set(t,String(o))});let u="headless"===n.view||r;if(c&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),l&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==l?i.view=l:e.searchParams.set("view",l)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),h.set("config","code/"+(0,o.compressToEncodedURIComponent)(JSON.stringify(i))));if(s&&"object"==typeof s&&Object.keys(s).length>0)try{h.set("params",(0,o.compressToEncodedURIComponent)(JSON.stringify(s)))}catch{Object.keys(s).forEach(n=>{e.searchParams.set(n,encodeURIComponent(String(s[n])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,n,t){t.d(n,{Z:function(){return a},a:function(){return r}});var o=t(7294);let s={},i=o.createContext(s);function r(e){let n=o.useContext(i);return o.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),o.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/077d6723.9c3747cf.js b/docs/assets/js/077d6723.9c3747cf.js new file mode 100644 index 0000000..89a44d5 --- /dev/null +++ b/docs/assets/js/077d6723.9c3747cf.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7801"],{3161:function(e,n,t){t.r(n),t.d(n,{default:()=>d,frontMatter:()=>o,metadata:()=>a,assets:()=>l,toc:()=>c,contentTitle:()=>i});var a=JSON.parse('{"id":"languages/malina","title":"Malina.js","description":"TODO...","source":"@site/docs/languages/malina.mdx","sourceDirName":"languages","slug":"/languages/malina","permalink":"/docs/languages/malina","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/malina.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Lua","permalink":"/docs/languages/lua"},"next":{"title":"Markdown","permalink":"/docs/languages/markdown"}}'),s=t("5893"),r=t("65");let o={},i="Malina.js",l={},c=[];function u(e){let n={h1:"h1",header:"header",p:"p",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"malinajs",children:"Malina.js"})}),"\n",(0,s.jsx)(n.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},65:function(e,n,t){t.d(n,{Z:function(){return i},a:function(){return o}});var a=t(7294);let s={},r=a.createContext(s);function o(e){let n=a.useContext(r);return a.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),a.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/085be8cd.25fd0c8f.js b/docs/assets/js/085be8cd.25fd0c8f.js new file mode 100644 index 0000000..19f77c2 --- /dev/null +++ b/docs/assets/js/085be8cd.25fd0c8f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3142"],{4609:function(e,n,s){s.r(n),s.d(n,{default:()=>u,frontMatter:()=>o,metadata:()=>t,assets:()=>l,toc:()=>c,contentTitle:()=>d});var t=JSON.parse('{"id":"api/functions/getPlaygroundUrl","title":"Function: getPlaygroundUrl()","description":"getPlaygroundUrl(options): string","source":"@site/docs/api/functions/getPlaygroundUrl.md","sourceDirName":"api/functions","slug":"/api/functions/getPlaygroundUrl","permalink":"/docs/api/functions/getPlaygroundUrl","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/functions/getPlaygroundUrl.md","tags":[],"version":"current","frontMatter":{}}'),r=s("5893"),i=s("65");let o={},d="Function: getPlaygroundUrl()",l={},c=[{value:"Parameters",id:"parameters",level:2},{value:"Returns",id:"returns",level:2},{value:"Defined in",id:"defined-in",level:2}];function a(e){let n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"function-getplaygroundurl",children:"Function: getPlaygroundUrl()"})}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"getPlaygroundUrl"}),"(",(0,r.jsx)(n.code,{children:"options"}),"): ",(0,r.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Gets the URL to a LiveCodes playground (as a string) from the provided ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#embed-options",children:"options"}),".\nThis can be useful for providing links to run code in playgrounds."]}),"\n",(0,r.jsx)(n.h2,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"options"}),": ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/EmbedOptions",children:(0,r.jsx)(n.code,{children:"EmbedOptions"})})," = ",(0,r.jsx)(n.code,{children:"{}"})]}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#embed-options",children:"options"})," for the playground."]}),"\n",(0,r.jsx)(n.h2,{id:"returns",children:"Returns"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"string"})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"The URL of the playground (as a string)."}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"large objects like config and params are store in the url hash params while the rest are in the search params\nunless config is a string in which case it is stored in searchParams"}),"\n",(0,r.jsx)(n.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/index.ts#L391",children:"index.ts:391"})})]})}function u(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},65:function(e,n,s){s.d(n,{Z:function(){return d},a:function(){return o}});var t=s(7294);let r={},i=t.createContext(r);function o(e){let n=t.useContext(i);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),t.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/08a453f6.ee4957c7.js b/docs/assets/js/08a453f6.ee4957c7.js new file mode 100644 index 0000000..9cdd3b7 --- /dev/null +++ b/docs/assets/js/08a453f6.ee4957c7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2976"],{4544:function(e,n,i){i.r(n),i.d(n,{default:()=>u,frontMatter:()=>s,metadata:()=>t,assets:()=>c,toc:()=>l,contentTitle:()=>d});var t=JSON.parse('{"id":"api/internal/interfaces/EditorPosition","title":"Interface: EditorPosition","description":"Properties","source":"@site/docs/api/internal/interfaces/EditorPosition.md","sourceDirName":"api/internal/interfaces","slug":"/api/internal/interfaces/EditorPosition","permalink":"/docs/api/internal/interfaces/EditorPosition","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/interfaces/EditorPosition.md","tags":[],"version":"current","frontMatter":{}}'),r=i("5893"),o=i("65");let s={},d="Interface: EditorPosition",c={},l=[{value:"Properties",id:"properties",level:2},{value:"column?",id:"column",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"lineNumber",id:"linenumber",level:3},{value:"Defined in",id:"defined-in-1",level:4}];function a(e){let n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",hr:"hr",p:"p",strong:"strong",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"interface-editorposition",children:"Interface: EditorPosition"})}),"\n",(0,r.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,r.jsx)(n.h3,{id:"column",children:"column?"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"optional"})," ",(0,r.jsx)(n.strong,{children:"column"}),": ",(0,r.jsx)(n.code,{children:"number"})]}),"\n"]}),"\n",(0,r.jsx)(n.h4,{id:"defined-in",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1165",children:"models.ts:1165"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"linenumber",children:"lineNumber"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"lineNumber"}),": ",(0,r.jsx)(n.code,{children:"number"})]}),"\n"]}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-1",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1164",children:"models.ts:1164"})})]})}function u(e={}){let{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},65:function(e,n,i){i.d(n,{Z:function(){return d},a:function(){return s}});var t=i(7294);let r={},o=t.createContext(r);function s(e){let n=t.useContext(o);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/096873fa.5130dc55.js b/docs/assets/js/096873fa.5130dc55.js new file mode 100644 index 0000000..e011940 --- /dev/null +++ b/docs/assets/js/096873fa.5130dc55.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6053"],{3325:function(e,s,r){r.r(s),r.d(s,{default:()=>h,frontMatter:()=>n,metadata:()=>i,assets:()=>d,toc:()=>l,contentTitle:()=>a});var i=JSON.parse('{"id":"features/index","title":"Features","description":"Overview","source":"@site/docs/features/index.mdx","sourceDirName":"features","slug":"/features/","permalink":"/docs/features/","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/index.mdx","tags":[],"version":"current","frontMatter":{"sidebar_class_name":"exclude_from_sidebar"},"sidebar":"docsSidebar","previous":{"title":"Getting Started","permalink":"/docs/getting-started"},"next":{"title":"Projects","permalink":"/docs/features/projects"}}'),t=r("5893"),o=r("65");let n={sidebar_class_name:"exclude_from_sidebar"},a="Features",d={},l=[{value:"Overview",id:"overview",level:2},{value:"Powerful Editor",id:"powerful-editor",level:2},{value:"AI Code Assistant",id:"ai-code-assistant",level:2},{value:"Mobile-friendly",id:"mobile-friendly",level:2},{value:"External Code/Libraries",id:"external-codelibraries",level:2},{value:"Import and Code Pre-fill",id:"import-and-code-pre-fill",level:2},{value:"Share/Export",id:"shareexport",level:2},{value:"Embed",id:"embed",level:2},{value:"Deploy",id:"deploy",level:2},{value:"Starter Templates",id:"starter-templates",level:2},{value:"Assets",id:"assets",level:2},{value:"Dev Tools",id:"dev-tools",level:2},{value:"Broadcast",id:"broadcast",level:2},{value:"Sync/Backup/Restore",id:"syncbackuprestore",level:2},{value:"Themes",id:"themes",level:2},{value:"i18n",id:"i18n",level:2},{value:"Client-side!",id:"client-side",level:2},{value:"Developer-friendly",id:"developer-friendly",level:2},{value:"Comprehensive Documentations",id:"comprehensive-documentations",level:2},{value:"Focused on Privacy",id:"focused-on-privacy",level:2},{value:"Free and Open-Source",id:"free-and-open-source",level:2}];function c(e){let s={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",header:"header",img:"img",p:"p",strong:"strong",...(0,o.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.header,{children:(0,t.jsx)(s.h1,{id:"features",children:"Features"})}),"\n",(0,t.jsx)(s.h2,{id:"overview",children:"Overview"}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.em,{children:"LiveCodes"})," is an open-source, client-side, code playground that runs in the browser. It enables quick prototyping and experimenting with a wide variety of ",(0,t.jsx)(s.a,{href:"/docs/languages/",children:"technologies"})," (including 90+ languages, frameworks and processors) without having to manually setup a development environment for each. The ",(0,t.jsx)(s.a,{href:"/docs/features/result",children:"result"})," is displayed as a regular web page. The rapid feedback of previewing the result page without waiting for build steps significantly boosts productivity."]}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{alt:"LiveCodes screenshot",src:r(186).Z+"",width:"2240",height:"1400"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{alt:"LiveCodes screenshot",src:r(5809).Z+"",width:"2240",height:"1400"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{alt:"LiveCodes screenshot",src:r(894).Z+"",width:"2240",height:"1400"})}),"\n",(0,t.jsx)(s.p,{children:"In this page, a quick overview of the important features are presented. A more detailed description of each feature is described in the following sections."}),"\n",(0,t.jsx)(s.h2,{id:"powerful-editor",children:"Powerful Editor"}),"\n",(0,t.jsxs)(s.p,{children:["The default code editor is the powerful editor that powers ",(0,t.jsx)(s.a,{href:"https://code.visualstudio.com/",children:"VS Code"}),", featuring code-completion, go-to-definition, multi-cursor support and other powerful features you got used to. The editor is very ",(0,t.jsx)(s.a,{href:"/docs/features/editor-settings",children:"customizable"}),". It supports ",(0,t.jsx)(s.a,{href:"/docs/features/keyboard-shortcuts",children:"keyboard shortcuts"}),", ",(0,t.jsx)(s.a,{href:"/docs/features/code-format",children:"code formatting"}),", ",(0,t.jsx)(s.a,{href:"/docs/features/editor-settings#emmet",children:"Emmet abbreviations"})," and even ",(0,t.jsx)(s.a,{href:"/docs/features/editor-settings#editor-modes",children:"Vim and Emacs bindings"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"ai-code-assistant",children:"AI Code Assistant"}),"\n",(0,t.jsxs)(s.p,{children:["LiveCodes supports AI-powered code completion, totally for ",(0,t.jsx)(s.strong,{children:"free"}),", using ",(0,t.jsx)(s.a,{href:"https://codeium.com/",children:"Codeium"}),", the ultrafast Copilot alternative. Install the ",(0,t.jsx)(s.a,{href:"https://codeium.com/chrome_tutorial",children:"Codeium chrome extension"})," and enjoy the magic!"]}),"\n",(0,t.jsx)(s.h2,{id:"mobile-friendly",children:"Mobile-friendly"}),"\n",(0,t.jsx)(s.p,{children:"The responsive layout allows working on devices with different screen sizes. On mobile, a lighter-weight touch-friendly code editor (CodeMirror 6) is used, so that you can experiment your ideas on the go."}),"\n",(0,t.jsx)(s.h2,{id:"external-codelibraries",children:"External Code/Libraries"}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.a,{href:"/docs/features/external-resources",children:"External scripts/stylesheets"})," can be added to the web page. There is a UI screen that helps you search for and add NPM libraries and google fonts. Moreover, ",(0,t.jsx)(s.a,{href:"/docs/features/module-resolution",children:"NPM modules can be imported"})," without the need for any ",(0,t.jsx)(s.code,{children:"npm install"}),"s."]}),"\n",(0,t.jsx)(s.h2,{id:"import-and-code-pre-fill",children:"Import and Code Pre-fill"}),"\n",(0,t.jsxs)(s.p,{children:["Code can be ",(0,t.jsx)(s.a,{href:"/docs/features/import",children:"imported"})," from a variety of sources including GitHub gist, GitHub file, directory in a GitHub repo, Gitlab snippet, Gitlab file, directory in a Gitlab repo, JS Bin, raw code, code in web page DOM and code in zip file. You can also ",(0,t.jsx)(s.a,{href:"/docs/features/code-prefill",children:"pre-fill code"})," using various ways."]}),"\n",(0,t.jsx)(s.h2,{id:"shareexport",children:"Share/Export"}),"\n",(0,t.jsxs)(s.p,{children:["Projects can be easily ",(0,t.jsx)(s.a,{href:"/docs/features/share",children:"shared"})," as URLs or QR codes. In addition, you may ",(0,t.jsx)(s.a,{href:"/docs/features/export",children:"export"})," any project as HTML, JSON or zip file containing source code files. You may also export to other services like GitHub gists, CodePen or JSFiddle."]}),"\n",(0,t.jsx)(s.h2,{id:"embed",children:"Embed"}),"\n",(0,t.jsxs)(s.p,{children:["Projects can be ",(0,t.jsx)(s.a,{href:"/docs/features/embeds",children:"embedded"})," in any web page. The embed screen allows you to customize the embed options and preview the resulting playground. An easy-to-use, yet powerful, ",(0,t.jsx)(s.a,{href:"/docs/sdk/",children:"SDK"}),", that allows ",(0,t.jsx)(s.a,{href:"/docs/sdk/js-ts#sdk-methods",children:"communication"})," between the embedding page and the playground."]}),"\n",(0,t.jsx)(s.h2,{id:"deploy",children:"Deploy"}),"\n",(0,t.jsxs)(s.p,{children:["Projects can be ",(0,t.jsx)(s.a,{href:"/docs/features/deploy",children:"deployed"})," to public URLs that can be shared with others. This is hosted for free on GitHub Pages."]}),"\n",(0,t.jsx)(s.h2,{id:"starter-templates",children:"Starter Templates"}),"\n",(0,t.jsxs)(s.p,{children:["A large number of ",(0,t.jsx)(s.a,{href:"/docs/features/templates",children:"starter templates"})," are available. They can be used to get you started with most of the supported technologies."]}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{alt:"Starter templates",src:r(8237).Z+"",width:"2240",height:"1400"})}),"\n",(0,t.jsx)(s.h2,{id:"assets",children:"Assets"}),"\n",(0,t.jsx)(s.p,{children:"Your own local assets (e.g. images, icons, fonts, local scripts and stylesheets) can be added to the app and then used in any project. The assets are made available even when the projects are shared, exported or deployed."}),"\n",(0,t.jsx)(s.h2,{id:"dev-tools",children:"Dev Tools"}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.a,{href:"/docs/features/tools-pane",children:"Tools"})," like ",(0,t.jsx)(s.a,{href:"/docs/features/console",children:"console"}),", ",(0,t.jsx)(s.a,{href:"/docs/features/compiled-code",children:"compiled code viewer"})," and ",(0,t.jsx)(s.a,{href:"/docs/features/tests",children:"test runner"})," can significantly improve your development experience."]}),"\n",(0,t.jsx)(s.h2,{id:"broadcast",children:"Broadcast"}),"\n",(0,t.jsxs)(s.p,{children:["You can ",(0,t.jsx)(s.a,{href:"/docs/features/broadcast",children:"broadcast"})," source code or result in real-time to others. This can be of great value as an educational tool and for demo purposes."]}),"\n",(0,t.jsx)(s.h2,{id:"syncbackuprestore",children:"Sync/Backup/Restore"}),"\n",(0,t.jsxs)(s.p,{children:["Do you work on multiple devices? No Problem! You may ",(0,t.jsx)(s.a,{href:"/docs/features/sync",children:"sync"}),", ",(0,t.jsx)(s.a,{href:"/docs/features/backup-restore",children:"backup and restore"})," your data any time on any device."]}),"\n",(0,t.jsx)(s.h2,{id:"themes",children:"Themes"}),"\n",(0,t.jsx)(s.p,{children:"LiveCodes comes with dark and light themes. In addition, a theme color can be set to change the app color."}),"\n",(0,t.jsx)(s.h2,{id:"i18n",children:"i18n"}),"\n",(0,t.jsxs)(s.p,{children:["LiveCodes supports ",(0,t.jsx)(s.a,{href:"/docs/features/i18n",children:"internationalization"})," for multiple languages."]}),"\n",(0,t.jsx)(s.h2,{id:"client-side",children:"Client-side!"}),"\n",(0,t.jsxs)(s.p,{children:["LiveCodes runs in the browser, where all the processing/transpilation occurs, with no server rounds required. So, after the initial load, it becomes pretty fast. It can be hosted on any static file server or CDN. No ",(0,t.jsx)(s.code,{children:"npm install"}),"s. Just the browser!"]}),"\n",(0,t.jsx)(s.h2,{id:"developer-friendly",children:"Developer-friendly"}),"\n",(0,t.jsxs)(s.p,{children:["LiveCodes makes it easy to ",(0,t.jsx)(s.a,{href:"/docs/getting-started",children:"get started"}),". It is highly ",(0,t.jsx)(s.a,{href:"/docs/configuration/",children:"configurable"}),". Lots of features can be configured by URL ",(0,t.jsx)(s.a,{href:"/docs/configuration/query-params",children:"query params"}),". The ",(0,t.jsx)(s.a,{href:"/docs/sdk/",children:"SDK"})," facilitates ",(0,t.jsx)(s.a,{href:"/docs/features/embeds",children:"embedding"})," playgrounds and allows easy ",(0,t.jsx)(s.a,{href:"/docs/sdk/js-ts#sdk-methods",children:"communication"})," with them. The SDK is available for use in ",(0,t.jsx)(s.a,{href:"/docs/sdk/js-ts",children:"JS/TS"}),", ",(0,t.jsx)(s.a,{href:"/docs/sdk/react",children:"React"})," ",(0,t.jsx)(s.a,{href:"/docs/sdk/vue",children:"Vue"})," and ",(0,t.jsx)(s.a,{href:"/docs/sdk/svelte",children:"Svelte"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"comprehensive-documentations",children:"Comprehensive Documentations"}),"\n",(0,t.jsxs)(s.p,{children:["Rich documentations with screenshots, code samples and live demos are available. They cover the app ",(0,t.jsx)(s.a,{href:"/docs/features/",children:"features"}),", ",(0,t.jsx)(s.a,{href:"/docs/configuration/",children:"configuration"}),", ",(0,t.jsx)(s.a,{href:"/docs/languages/",children:"supported languages"})," and ",(0,t.jsx)(s.a,{href:"/docs/sdk/",children:"SDK"})," (including ",(0,t.jsx)(s.a,{href:"/docs/api/globals",children:"TypeScript Types"}),"). A gallery of usage examples is provided as a ",(0,t.jsx)(s.a,{href:"pathname:///../stories",children:"storybook"}),"."]}),"\n",(0,t.jsx)(s.h2,{id:"focused-on-privacy",children:"Focused on Privacy"}),"\n",(0,t.jsxs)(s.p,{children:["Projects are private by default. The code you write in LiveCodes never leaves your computer, unless you choose to ",(0,t.jsx)(s.a,{href:"/docs/features/share",children:"share"}),", ",(0,t.jsx)(s.a,{href:"/docs/features/export",children:"export"}),", ",(0,t.jsx)(s.a,{href:"/docs/features/broadcast",children:"broadcast"})," or ",(0,t.jsx)(s.a,{href:"/docs/features/sync",children:"sync"})," it. User data is stored in the browser."]}),"\n",(0,t.jsx)(s.h2,{id:"free-and-open-source",children:"Free and Open-Source"}),"\n",(0,t.jsxs)(s.p,{children:["LiveCodes is free, with no limits for use and no ads.\nNo account is even required (unless ",(0,t.jsx)(s.a,{href:"/docs/features/github-integration",children:"GitHub integration"})," is needed).\nDo you want to ",(0,t.jsx)(s.a,{href:"/docs/features/self-hosting",children:"self-host"})," it for commercial use? No problem! It is ",(0,t.jsx)(s.a,{href:"/docs/license",children:"MIT-licensed"})," \uD83C\uDF89. Please consider ",(0,t.jsx)(s.a,{href:"/docs/sponsor",children:"sponsoring LiveCodes"})," \u2764."]}),"\n",(0,t.jsx)(s.p,{children:"This was a quick overview of the important features of LiveCodes. A more detailed description of each feature is described in the following sections."})]})}function h(e={}){let{wrapper:s}={...(0,o.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}},186:function(e,s,r){r.d(s,{Z:function(){return i}});let i=r.p+"assets/images/features-1-f0a88a6b8dbdafd398f3836d88c00448.jpg"},5809:function(e,s,r){r.d(s,{Z:function(){return i}});let i=r.p+"assets/images/features-2-4573aa166bdd7acd2bb1dd6c6bb87574.jpg"},894:function(e,s,r){r.d(s,{Z:function(){return i}});let i=r.p+"assets/images/features-3-d7d9e6fc098e74420ac3e29fe91db6ea.jpg"},8237:function(e,s,r){r.d(s,{Z:function(){return i}});let i=r.p+"assets/images/templates-1-b2516a4c1fc6b41e0488300a36a50254.jpg"},65:function(e,s,r){r.d(s,{Z:function(){return a},a:function(){return n}});var i=r(7294);let t={},o=i.createContext(t);function n(e){let s=i.useContext(o);return i.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:n(e.components),i.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/0a831b7f.e2c1b5e4.js b/docs/assets/js/0a831b7f.e2c1b5e4.js new file mode 100644 index 0000000..a98f08c --- /dev/null +++ b/docs/assets/js/0a831b7f.e2c1b5e4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8076"],{9661:function(e,t,s){s.r(t),s.d(t,{default:()=>d,frontMatter:()=>c,metadata:()=>n,assets:()=>l,toc:()=>i,contentTitle:()=>a});var n=JSON.parse('{"id":"languages/postcssPresetEnv","title":"Preset Env","description":"TODO...","source":"@site/docs/languages/postcssPresetEnv.mdx","sourceDirName":"languages","slug":"/languages/postcssPresetEnv","permalink":"/docs/languages/postcssPresetEnv","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/postcssPresetEnv.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Import Url","permalink":"/docs/languages/postcssImportUrl"},"next":{"title":"PostgreSQL","permalink":"/docs/languages/postgresql"}}'),r=s("5893"),o=s("65");let c={},a="Preset Env",l={},i=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"preset-env",children:"Preset Env"})}),"\n",(0,r.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return c}});var n=s(7294);let r={},o=n.createContext(r);function c(e){let t=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/0b8d8c22.7e64a394.js b/docs/assets/js/0b8d8c22.7e64a394.js new file mode 100644 index 0000000..6570825 --- /dev/null +++ b/docs/assets/js/0b8d8c22.7e64a394.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6456"],{496:function(e,t,n){n.r(t),n.d(t,{config:()=>c,config2:()=>u,default:()=>g,frontMatter:()=>o,metadata:()=>s,assets:()=>d,params:()=>h,toc:()=>p,contentTitle:()=>l});var s=JSON.parse('{"id":"languages/art-template","title":"art-template","description":"art-template is a high performance JavaScript templating engine.","source":"@site/docs/languages/art-template.mdx","sourceDirName":"languages","slug":"/languages/art-template","permalink":"/docs/languages/art-template","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/art-template.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Languages","permalink":"/docs/languages/"},"next":{"title":"AsciiDoc","permalink":"/docs/languages/asciidoc"}}'),a=n("5893"),r=n("65"),i=n("3365");let o={},l="art-template",d={},c={markup:{language:"art-template",content:"Hello {{name}}!"},customSettings:{template:{data:{name:"LiveCodes"}}}},h={compiled:"open"},u={markup:{language:"art-template",content:"Hello {{name}}!"},script:{language:"javascript",content:'window.livecodes.templateData = { name: "LiveCodes" };'},customSettings:{template:{prerender:!1}},activeEditor:"script"},p=[{value:"Usage",id:"usage",level:2},{value:"Pre-rendered (Default)",id:"pre-rendered-default",level:3},{value:"Dynamic",id:"dynamic",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Pre-rendered",id:"pre-rendered",level:3},{value:"Dynamic",id:"dynamic-1",level:3},{value:"Links",id:"links",level:2}];function m(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.header,{children:(0,a.jsx)(t.h1,{id:"art-template",children:"art-template"})}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.a,{href:"https://aui.github.io/art-template/",children:"art-template"})," is a high performance JavaScript templating engine."]}),"\n",(0,a.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,a.jsx)(t.p,{children:"There are 2 modes for rendering:"}),"\n",(0,a.jsx)(t.h3,{id:"pre-rendered-default",children:"Pre-rendered (Default)"}),"\n",(0,a.jsxs)(t.p,{children:["The values of the expressions are evaluated and added to the template during compilation of the ",(0,a.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,a.jsxs)(t.p,{children:["The values of all expressions should be supplied in advance using ",(0,a.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," to the property ",(0,a.jsx)(t.code,{children:"template.data"})," which accepts an object of key-value pairs."]}),"\n",(0,a.jsxs)(t.p,{children:["Example: This provides the value of the expression ",(0,a.jsx)(t.code,{children:"name"})]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "data": {\n "name": "LiveCodes"\n }\n }\n}\n'})}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.a,{href:"#pre-rendered",children:"Full example below"})}),"\n",(0,a.jsx)(t.h3,{id:"dynamic",children:"Dynamic"}),"\n",(0,a.jsxs)(t.p,{children:["To use this mode, the property ",(0,a.jsx)(t.code,{children:"template.prerender"})," in ",(0,a.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," should be set to ",(0,a.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,a.jsx)(t.p,{children:"Example:"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "prerender": false\n }\n}\n'})}),"\n",(0,a.jsxs)(t.p,{children:["In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the ",(0,a.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," runtime."]}),"\n",(0,a.jsxs)(t.p,{children:["This can be achieved in JavaScript (or any ",(0,a.jsx)(t.a,{href:"/docs/languages/",children:"language"})," that compiles to it) by assigning ",(0,a.jsx)(t.code,{children:"window.livecodes.templateData"})," to an object with the data."]}),"\n",(0,a.jsxs)(t.p,{children:["Please note that template rendering occurs on ",(0,a.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event",children:"page load"}),", so the assignment must occur before that."]}),"\n",(0,a.jsx)(t.p,{children:"Example:"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-js",metastring:'title="Script Editor (JS)"',children:"window.livecodes.templateData = { name: 'LiveCodes' };\n"})}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.a,{href:"#dynamic-1",children:"Full example below"})}),"\n",(0,a.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,a.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.code,{children:"art-template"})}),"\n",(0,a.jsx)(t.h3,{id:"extensions",children:"Extensions"}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.code,{children:".art"}),", ",(0,a.jsx)(t.code,{children:".art-template"})]}),"\n",(0,a.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.code,{children:"markup"})}),"\n",(0,a.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,a.jsxs)(t.p,{children:["The official ",(0,a.jsx)(t.a,{href:"https://www.npmjs.com/package/art-template",children:"art-template compiler"}),"."]}),"\n",(0,a.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.code,{children:"art-template"}),": v4.13.2"]}),"\n",(0,a.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,a.jsxs)(t.p,{children:["Using ",(0,a.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,a.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,a.jsx)(t.code,{children:"art-template"})," are passed as a JSON object to the ",(0,a.jsx)(t.a,{href:"https://aui.github.io/art-template/docs/api.html#compile-source-options",children:(0,a.jsx)(t.code,{children:"compile"})})," method during compile. Please check the ",(0,a.jsx)(t.a,{href:"https://aui.github.io/art-template/docs/options.html",children:"documentation"})," for full reference."]}),"\n",(0,a.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.strong,{children:"Example:"})}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "art-template": {\n "minimize": false\n }\n}\n'})}),"\n",(0,a.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n",(0,a.jsx)(t.h3,{id:"pre-rendered",children:"Pre-rendered"}),"\n","\n","\n",(0,a.jsx)(i.Z,{config:c,params:h}),"\n",(0,a.jsx)(t.h3,{id:"dynamic-1",children:"Dynamic"}),"\n","\n",(0,a.jsx)(i.Z,{config:u}),"\n",(0,a.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://aui.github.io/art-template/",children:"Official website"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://aui.github.io/art-template/docs/",children:"Documentation"})}),"\n"]})]})}function g(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(m,{...e})}):m(e)}},3365:function(e,t,n){n.d(t,{Z:()=>f});var s=n("5893"),a=n("4200"),r=n("7294"),i=n("8294");function o(e){let t=(0,r.useRef)(null),[n,a]=(0,r.useState)(e.className||""),[o,l]=(0,r.useState)(e.style||{}),[d,c]=(0,r.useState)(e.height),[h,u]=(0,r.useState)(),[p,m]=(0,r.useState)(JSON.stringify(e.config||"")),[g,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:n,style:s,height:r,sdkReady:o,config:d,...v}=e;if(a(n||""),l(s||{}),c(r),h&&g===JSON.stringify(v)){if(p===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(v)),h?.destroy(),(0,i.T)(t.current,{config:d,...v}).then(e=>{u(e),"function"==typeof o&&o(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:n,style:o,"data-height":d})}var l=n("1858"),d=n("3262"),c=n("1705"),h=n("7645"),u=n("8168"),p=n("8228"),m=n("5050");function g(e){let[t,n]=(0,r.useState)(e.js),[a,i]=(0,r.useState)(e.ts),[o,l]=(0,r.useState)(e.react),[g,f]=(0,r.useState)(e.vue),[v,x]=(0,r.useState)(e.svelte),j="3.7rem",[y,b]=(0,r.useState)(!0),[w,S]=(0,r.useState)(j),C=(0,r.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${j})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${j})`)},255)};return(0,r.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};n(e(t,"js")),i(e(a,"ts")),l(e(o,"jsx")),f(e(g,"html")),x(e(v,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":y,style:{height:y?j:w,overflow:"hidden",willChange:"height",transition:`height ${y?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{b(!y),E()},children:"show code"}),(0,s.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:m.Z.collapsibleContent,children:(0,s.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,s.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"js",children:t})}),(0,s.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"ts",children:a})}),(0,s.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"jsx",children:o})}),(0,s.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"html",children:g})}),(0,s.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:n,showCode:r,height:i,...d}=e,{colorMode:c}=(0,a.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (); +} + +`.trimStart(),f=` + + + +`,v=` + + +
+ +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(o,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(g,{js:u,ts:p,react:m,vue:f,svelte:v})]})}},8294:function(e,t,n){n.d(t,{T:function(){return a},r:function(){return r}});var s=n(7728);async function a(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:s,loading:a="lazy",view:i}=t,o=s||"headless"===i,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(o&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(o)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(r(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",o?"eager":a);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!o){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||o||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",r=l.querySelector(`iframe.${s}`),i=r||document.createElement("iframe");i.classList.add(s),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===a?"eager":"lazy"),o?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),i.onload=()=>{e(i)},i.src=c.href,r||l.appendChild(i)}),v=new Promise(e=>{addEventListener("message",function t(n){n.source===f.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),x=()=>m?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),j=(e,t)=>new Promise(async(n,s)=>{if(m)return s(g);await x();let a=P();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===a&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?s(e.error):n(e)}}),f.contentWindow?.postMessage({method:e,id:a,args:t},h)}),y={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return b.includes(e)?(j("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!y[t])return;let n=e.data?.payload;y[t]?.forEach(e=>{e(n)})});let C=()=>{Object.values(y).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===a&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await x(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>x(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,t)=>j("show",[e,t]),runTests:()=>j("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;sv.settled?j("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:a={},config:r={},headless:i,import:o,lite:l,view:d,...c}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let u="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==d?r.view=d:e.searchParams.set("view",d)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(r))));if(a&&"object"==typeof a&&Object.keys(a).length>0)try{h.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(a)))}catch{Object.keys(a).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(a[t])))})}return o&&e.searchParams.set("x",encodeURIComponent(o)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return o},a:function(){return i}});var s=n(7294);let a={},r=s.createContext(a);function i(e){let t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/0d1dd3d3.29ebef43.js b/docs/assets/js/0d1dd3d3.29ebef43.js new file mode 100644 index 0000000..d66b39e --- /dev/null +++ b/docs/assets/js/0d1dd3d3.29ebef43.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9472"],{1764:function(e,t,n){n.r(t),n.d(t,{config:()=>d,config2:()=>h,default:()=>g,frontMatter:()=>o,metadata:()=>s,assets:()=>c,params:()=>u,toc:()=>p,contentTitle:()=>l});var s=JSON.parse('{"id":"languages/nunjucks","title":"Nunjucks","description":"Nunjucks is a rich and powerful templating language for JavaScript.","source":"@site/docs/languages/nunjucks.mdx","sourceDirName":"languages","slug":"/languages/nunjucks","permalink":"/docs/languages/nunjucks","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/nunjucks.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Mustache","permalink":"/docs/languages/mustache"},"next":{"title":"OCaml","permalink":"/docs/languages/ocaml"}}'),r=n("5893"),i=n("65"),a=n("3365");let o={},l="Nunjucks",c={},d={markup:{language:"nunjucks",content:"Hello {{name}}!"},customSettings:{template:{data:{name:"LiveCodes"}}}},u={compiled:"open"},h={markup:{language:"nunjucks",content:"Hello {{name}}!"},script:{language:"javascript",content:'window.livecodes.templateData = { name: "LiveCodes" };'},customSettings:{template:{prerender:!1}},activeEditor:"script"},p=[{value:"Usage",id:"usage",level:2},{value:"Pre-rendered (Default)",id:"pre-rendered-default",level:3},{value:"Dynamic",id:"dynamic",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Pre-rendered",id:"pre-rendered",level:3},{value:"Dynamic",id:"dynamic-1",level:3},{value:"Links",id:"links",level:2}];function m(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"nunjucks",children:"Nunjucks"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://mozilla.github.io/nunjucks/",children:"Nunjucks"})," is a rich and powerful templating language for JavaScript."]}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.p,{children:"There are 2 modes for rendering:"}),"\n",(0,r.jsx)(t.h3,{id:"pre-rendered-default",children:"Pre-rendered (Default)"}),"\n",(0,r.jsxs)(t.p,{children:["The values of the expressions are evaluated and added to the template during compilation of the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["The values of all expressions should be supplied in advance using ",(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," to the property ",(0,r.jsx)(t.code,{children:"template.data"})," which accepts an object of key-value pairs."]}),"\n",(0,r.jsxs)(t.p,{children:["Example: This provides the value of the expression ",(0,r.jsx)(t.code,{children:"name"})]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "data": {\n "name": "LiveCodes"\n }\n }\n}\n'})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"#pre-rendered",children:"Full example below"})}),"\n",(0,r.jsx)(t.h3,{id:"dynamic",children:"Dynamic"}),"\n",(0,r.jsxs)(t.p,{children:["To use this mode, the property ",(0,r.jsx)(t.code,{children:"template.prerender"})," in ",(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," should be set to ",(0,r.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "prerender": false\n }\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," runtime."]}),"\n",(0,r.jsxs)(t.p,{children:["This can be achieved in JavaScript (or any ",(0,r.jsx)(t.a,{href:"/docs/languages/",children:"language"})," that compiles to it) by assigning ",(0,r.jsx)(t.code,{children:"window.livecodes.templateData"})," to an object with the data."]}),"\n",(0,r.jsxs)(t.p,{children:["Please note that template rendering occurs on ",(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event",children:"page load"}),", so the assignment must occur before that."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:'title="Script Editor (JS)"',children:"window.livecodes.templateData = { name: 'LiveCodes' };\n"})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"#dynamic-1",children:"Full example below"})}),"\n",(0,r.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"nunjucks"})}),"\n",(0,r.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:".njk"}),", ",(0,r.jsx)(t.code,{children:".nunjucks"})]}),"\n",(0,r.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"markup"})}),"\n",(0,r.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsxs)(t.p,{children:["The official ",(0,r.jsx)(t.a,{href:"https://www.npmjs.com/package/nunjucks",children:"Nunjucks compiler"}),"."]}),"\n",(0,r.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"nunjucks"}),": v3.2.3"]}),"\n",(0,r.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsxs)(t.p,{children:["Using ",(0,r.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,r.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n",(0,r.jsx)(t.h3,{id:"pre-rendered",children:"Pre-rendered"}),"\n","\n","\n",(0,r.jsx)(a.Z,{config:d,params:u}),"\n",(0,r.jsx)(t.h3,{id:"dynamic-1",children:"Dynamic"}),"\n","\n",(0,r.jsx)(a.Z,{config:h}),"\n",(0,r.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://mozilla.github.io/nunjucks/",children:"Official website"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://mozilla.github.io/nunjucks/templating.html",children:"Documentation"})}),"\n"]})]})}function g(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},3365:function(e,t,n){n.d(t,{Z:()=>f});var s=n("5893"),r=n("4200"),i=n("7294"),a=n("8294");function o(e){let t=(0,i.useRef)(null),[n,r]=(0,i.useState)(e.className||""),[o,l]=(0,i.useState)(e.style||{}),[c,d]=(0,i.useState)(e.height),[u,h]=(0,i.useState)(),[p,m]=(0,i.useState)(JSON.stringify(e.config||"")),[g,f]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!t.current)return;let{className:n,style:s,height:i,sdkReady:o,config:c,...v}=e;if(r(n||""),l(s||{}),d(i),u&&g===JSON.stringify(v)){if(p===JSON.stringify(c))return;m(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else f(JSON.stringify(v)),u?.destroy(),(0,a.T)(t.current,{config:c,...v}).then(e=>{h(e),"function"==typeof o&&o(e)})},[e]),(0,i.useEffect)(()=>()=>{u?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:n,style:o,"data-height":c})}var l=n("1858"),c=n("3262"),d=n("1705"),u=n("7645"),h=n("8168"),p=n("8228"),m=n("5050");function g(e){let[t,n]=(0,i.useState)(e.js),[r,a]=(0,i.useState)(e.ts),[o,l]=(0,i.useState)(e.react),[g,f]=(0,i.useState)(e.vue),[v,j]=(0,i.useState)(e.svelte),x="3.7rem",[y,w]=(0,i.useState)(!0),[b,S]=(0,i.useState)(x),k=(0,i.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${k.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${k.current.offsetHeight}px + ${x})`)},255)};return(0,i.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};n(e(t,"js")),a(e(r,"ts")),l(e(o,"jsx")),f(e(g,"html")),j(e(v,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":y,style:{height:y?x:b,overflow:"hidden",willChange:"height",transition:`height ${y?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{w(!y),C()},children:"show code"}),(0,s.jsx)("div",{ref:k,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:m.Z.collapsibleContent,children:(0,s.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,s.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,s.jsx)(d.Z,{language:"js",children:t})}),(0,s.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,s.jsx)(d.Z,{language:"ts",children:r})}),(0,s.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,s.jsx)(d.Z,{language:"jsx",children:o})}),(0,s.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,s.jsx)(d.Z,{language:"html",children:g})}),(0,s.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,s.jsx)(d.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:n,showCode:i,height:a,...c}=e,{colorMode:d}=(0,r.I)(),u=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (); +} + +`.trimStart(),f=` + + + +`,v=` + + +
+ +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(o,{className:`container_Egsj ${e.className}`,style:{height:a||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(g,{js:h,ts:p,react:m,vue:f,svelte:v})]})}},8294:function(e,t,n){n.d(t,{T:function(){return r},r:function(){return i}});var s=n(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:s,loading:r="lazy",view:a}=t,o=s||"headless"===a,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(o&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(o)C(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(i(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",o?"eager":r);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!o){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||o||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",i=l.querySelector(`iframe.${s}`),a=i||document.createElement("iframe");a.classList.add(s),a.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),a.setAttribute("allowtransparency","true"),a.setAttribute("allowpaymentrequest","true"),a.setAttribute("allowfullscreen","true"),a.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),a.setAttribute("loading","eager"===r?"eager":"lazy"),o?C(a):(a.style.height="100%",a.style.minHeight="200px",a.style.width="100%",a.style.margin="0",a.style.border="0",a.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===a.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===a.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),a.contentWindow?.postMessage({type:"livecodes-config",payload:n},u))}),a.onload=()=>{e(a)},a.src=d.href,i||l.appendChild(a)}),v=new Promise(e=>{addEventListener("message",function t(n){n.source===f.contentWindow&&n.origin===u&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),j=()=>m?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},u),await v,e()}),x=(e,t)=>new Promise(async(n,s)=>{if(m)return s(g);await j();let r=E();addEventListener("message",function t(i){if(i.source===f.contentWindow&&i.origin===u&&i.data?.type==="livecodes-api-response"&&i.data?.id===r&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?s(e.error):n(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},u)}),y={},w=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(m)throw Error(g);return w.includes(e)?(x("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==u||!t||!y[t])return;let n=e.data?.payload;y[t]?.forEach(e=>{e(n)})});let k=()=>{Object.values(y).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;sv.settled?x("destroy").then(k):m?Promise.reject(g):(k(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:r={},config:i={},headless:a,import:o,lite:l,view:c,...d}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let h="headless"===t.view||a;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==c?i.view=c:e.searchParams.set("view",c)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),u.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(i))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{u.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return o&&e.searchParams.set("x",encodeURIComponent(o)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return o},a:function(){return a}});var s=n(7294);let r={},i=s.createContext(r);function a(e){let t=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/0e11b820.c57cf92b.js b/docs/assets/js/0e11b820.c57cf92b.js new file mode 100644 index 0000000..69e6aea --- /dev/null +++ b/docs/assets/js/0e11b820.c57cf92b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4001"],{5361:function(e,n,s){s.r(n),s.d(n,{default:()=>h,frontMatter:()=>l,metadata:()=>d,assets:()=>o,toc:()=>t,contentTitle:()=>c});var d=JSON.parse('{"id":"api/interfaces/Playground","title":"Interface: Playground","description":"An object that represents the LiveCodes playground instance.","source":"@site/docs/api/interfaces/Playground.md","sourceDirName":"api/interfaces","slug":"/api/interfaces/Playground","permalink":"/docs/api/interfaces/Playground","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/interfaces/Playground.md","tags":[],"version":"current","frontMatter":{}}'),r=s("5893"),i=s("65");let l={},c="Interface: Playground",o={},t=[{value:"Extends",id:"extends",level:2},{value:"Properties",id:"properties",level:2},{value:"destroy()",id:"destroy",level:3},{value:"Returns",id:"returns",level:4},{value:"Example",id:"example",level:4},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"exec()",id:"exec",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"format()",id:"format",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-2",level:4},{value:"Example",id:"example-1",level:4},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"getCode()",id:"getcode",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Example",id:"example-2",level:4},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"getConfig()",id:"getconfig",level:3},{value:"Parameters",id:"parameters-2",level:4},{value:"Returns",id:"returns-4",level:4},{value:"Example",id:"example-3",level:4},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"getShareUrl()",id:"getshareurl",level:3},{value:"Parameters",id:"parameters-3",level:4},{value:"Returns",id:"returns-5",level:4},{value:"Example",id:"example-4",level:4},{value:"Inherited from",id:"inherited-from-5",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"load()",id:"load",level:3},{value:"Returns",id:"returns-6",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"onChange()",id:"onchange",level:3},{value:"Parameters",id:"parameters-4",level:4},{value:"Returns",id:"returns-7",level:4},{value:"remove()",id:"remove",level:5},{value:"Returns",id:"returns-8",level:6},{value:"Deprecated",id:"deprecated",level:4},{value:"Inherited from",id:"inherited-from-6",level:4},{value:"Defined in",id:"defined-in-7",level:4},{value:"run()",id:"run",level:3},{value:"Returns",id:"returns-9",level:4},{value:"Example",id:"example-5",level:4},{value:"Inherited from",id:"inherited-from-7",level:4},{value:"Defined in",id:"defined-in-8",level:4},{value:"runTests()",id:"runtests",level:3},{value:"Returns",id:"returns-10",level:4},{value:"results",id:"results",level:5},{value:"Example",id:"example-6",level:4},{value:"Inherited from",id:"inherited-from-8",level:4},{value:"Defined in",id:"defined-in-9",level:4},{value:"setConfig()",id:"setconfig",level:3},{value:"Parameters",id:"parameters-5",level:4},{value:"Returns",id:"returns-11",level:4},{value:"Example",id:"example-7",level:4},{value:"Inherited from",id:"inherited-from-9",level:4},{value:"Defined in",id:"defined-in-10",level:4},{value:"show()",id:"show",level:3},{value:"Parameters",id:"parameters-6",level:4},{value:"Returns",id:"returns-12",level:4},{value:"Example",id:"example-8",level:4},{value:"Inherited from",id:"inherited-from-10",level:4},{value:"Defined in",id:"defined-in-11",level:4},{value:"watch",id:"watch",level:3},{value:"Example",id:"example-9",level:4},{value:"Inherited from",id:"inherited-from-11",level:4},{value:"Defined in",id:"defined-in-12",level:4}];function a(e){let n={a:"a",blockquote:"blockquote",code:"code",del:"del",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"interface-playground",children:"Interface: Playground"})}),"\n",(0,r.jsx)(n.p,{children:"An object that represents the LiveCodes playground instance."}),"\n",(0,r.jsxs)(n.p,{children:["The object exposes multiple ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts/#sdk-methods",children:"methods"})," that can be used to interact with the playground."]}),"\n",(0,r.jsxs)(n.p,{children:["See ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts",children:"docs"})," for details."]}),"\n",(0,r.jsx)(n.h2,{id:"extends",children:"Extends"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,r.jsx)(n.code,{children:"API"})})}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,r.jsx)(n.h3,{id:"destroy",children:"destroy()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"destroy"}),": () => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Destroys the playground instance, and removes event listeners."}),"\n",(0,r.jsx)(n.p,{children:"Further call to any SDK methods throws an error."}),"\n",(0,r.jsx)(n.h4,{id:"returns",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"example",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n await playground.destroy();\n // playground destroyed\n // any further SDK call throws an error\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from",children:"Inherited from"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,r.jsx)(n.code,{children:"API"})}),".",(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#destroy",children:(0,r.jsx)(n.code,{children:"destroy"})})]}),"\n",(0,r.jsx)(n.h4,{id:"defined-in",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L211",children:"models.ts:211"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"exec",children:"exec()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"exec"}),": (",(0,r.jsx)(n.code,{children:"command"}),", ...",(0,r.jsx)(n.code,{children:"args"}),") => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"object"})," | ",(0,r.jsx)(n.code,{children:"object"}),">"]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Executes custom commands, including: ",(0,r.jsx)(n.code,{children:'"setBroadcastToken"'})," and ",(0,r.jsx)(n.code,{children:'"showVersion"'}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["See ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#exec",children:"docs"})," for details."]}),"\n",(0,r.jsx)(n.h4,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"command"}),": ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/APICommands",children:(0,r.jsx)(n.code,{children:"APICommands"})})]}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ...",(0,r.jsx)(n.strong,{children:"args"}),": ",(0,r.jsx)(n.code,{children:"any"}),"[]"]}),"\n",(0,r.jsx)(n.h4,{id:"returns-1",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"object"})," | ",(0,r.jsx)(n.code,{children:"object"}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-1",children:"Inherited from"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,r.jsx)(n.code,{children:"API"})}),".",(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#exec",children:(0,r.jsx)(n.code,{children:"exec"})})]}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-1",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L194",children:"models.ts:194"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"format",children:"format()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"format"}),": (",(0,r.jsx)(n.code,{children:"allEditors"}),"?) => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Formats the code."}),"\n",(0,r.jsxs)(n.p,{children:["By default, the code in all editors (markup, style and script) is formatted.\nTo format only the active editor, the value ",(0,r.jsx)(n.code,{children:"false"})," should be passed as an argument."]}),"\n",(0,r.jsx)(n.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"allEditors?"}),": ",(0,r.jsx)(n.code,{children:"boolean"})]}),"\n",(0,r.jsx)(n.h4,{id:"returns-2",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"example-1",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n await playground.format();\n // code in editors is formatted\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-2",children:"Inherited from"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,r.jsx)(n.code,{children:"API"})}),".",(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#format",children:(0,r.jsx)(n.code,{children:"format"})})]}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-2",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L31",children:"models.ts:31"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"getcode",children:"getCode()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"getCode"}),": () => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Code",children:(0,r.jsx)(n.code,{children:"Code"})}),">"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Gets the playground code (including source code, source language and compiled code) for each editor (markup, style, script), in addition to result page HTML."}),"\n",(0,r.jsxs)(n.p,{children:["See ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/api/interfaces/Code",children:"Code"})," for the structure of the returned object."]}),"\n",(0,r.jsx)(n.h4,{id:"returns-3",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Code",children:(0,r.jsx)(n.code,{children:"Code"})}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"example-2",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n const code = await playground.getCode();\n\n // source code, language and compiled code for the script editor\n const { content, language, compiled } = code.script;\n\n // result page HTML\n const result = code.result;\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-3",children:"Inherited from"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,r.jsx)(n.code,{children:"API"})}),".",(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#getcode",children:(0,r.jsx)(n.code,{children:"getCode"})})]}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-3",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L105",children:"models.ts:105"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"getconfig",children:"getConfig()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"getConfig"}),": (",(0,r.jsx)(n.code,{children:"contentOnly"}),"?) => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,r.jsx)(n.code,{children:"Config"})}),">"]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Gets a ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/configuration/configuration-object",children:"configuration object"})," representing the playground state."]}),"\n",(0,r.jsxs)(n.p,{children:["This can be used to restore state if passed as an ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#embed-options",children:"EmbedOptions"})," property when ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts/#createplayground",children:"creating playgrounds"}),",\nor can be manipulated and loaded in run-time using ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#setconfig",children:(0,r.jsx)(n.code,{children:"setConfig"})})," method."]}),"\n",(0,r.jsx)(n.h4,{id:"parameters-2",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"contentOnly?"}),": ",(0,r.jsx)(n.code,{children:"boolean"})]}),"\n",(0,r.jsx)(n.h4,{id:"returns-4",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,r.jsx)(n.code,{children:"Config"})}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"example-3",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n const config = await playground.getConfig();\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-4",children:"Inherited from"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,r.jsx)(n.code,{children:"API"})}),".",(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#getconfig",children:(0,r.jsx)(n.code,{children:"getConfig"})})]}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-4",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L64",children:"models.ts:64"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"getshareurl",children:"getShareUrl()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"getShareUrl"}),": (",(0,r.jsx)(n.code,{children:"shortUrl"}),"?) => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"string"}),">"]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Gets a ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/features/share",children:"share url"})," for the current project."]}),"\n",(0,r.jsxs)(n.p,{children:["By default, the url has a long query string representing the compressed encoded config object.\nIf the argument ",(0,r.jsx)(n.code,{children:"shortUrl"})," was set to ",(0,r.jsx)(n.code,{children:"true"}),", a short url is generated."]}),"\n",(0,r.jsx)(n.h4,{id:"parameters-3",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"shortUrl?"}),": ",(0,r.jsx)(n.code,{children:"boolean"})]}),"\n",(0,r.jsx)(n.h4,{id:"returns-5",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"string"}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"example-4",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n const longUrl = await playground.getShareUrl();\n const shortUrl = await playground.getShareUrl(true);\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-5",children:"Inherited from"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,r.jsx)(n.code,{children:"API"})}),".",(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#getshareurl",children:(0,r.jsx)(n.code,{children:"getShareUrl"})})]}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-5",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L48",children:"models.ts:48"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"load",children:"load()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"load"}),": () => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Loads the playground, if not already loaded."}),"\n",(0,r.jsxs)(n.p,{children:["When the embed option ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#loading",children:"loading"})," is set to ",(0,r.jsx)(n.code,{children:'"click"'}),', the playground is not loaded automatically.\nInstead, a screen is shown with "Click to load" button. Calling the SDK method ',(0,r.jsx)(n.code,{children:"load()"})," allows loading the playground."]}),"\n",(0,r.jsx)(n.p,{children:"If the playground was not loaded, calling any other method will load the playground first before executing."}),"\n",(0,r.jsx)(n.h4,{id:"returns-6",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-6",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L298",children:"models.ts:298"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"onchange",children:(0,r.jsx)(n.del,{children:"onChange()"})}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"onChange"}),": (",(0,r.jsx)(n.code,{children:"fn"}),") => ",(0,r.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Runs a callback function when code changes."}),"\n",(0,r.jsx)(n.h4,{id:"parameters-4",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"fn"})]}),"\n",(0,r.jsx)(n.h4,{id:"returns-7",children:"Returns"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"object"})}),"\n",(0,r.jsx)(n.h5,{id:"remove",children:(0,r.jsx)(n.del,{children:"remove()"})}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"remove"}),": () => ",(0,r.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,r.jsx)(n.h6,{id:"returns-8",children:"Returns"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"void"})}),"\n",(0,r.jsx)(n.h4,{id:"deprecated",children:"Deprecated"}),"\n",(0,r.jsxs)(n.p,{children:["Use ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#watch",children:(0,r.jsx)(n.code,{children:"watch"})})," method instead."]}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-6",children:"Inherited from"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,r.jsx)(n.code,{children:"API"})}),".",(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#onchange",children:(0,r.jsx)(n.code,{children:"onChange"})})]}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-7",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L142",children:"models.ts:142"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"run",children:"run()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"run"}),": () => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Runs the ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/features/result",children:"result page"})," (after any required compilation for code)."]}),"\n",(0,r.jsx)(n.h4,{id:"returns-9",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"example-5",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n await playground.run();\n // new result page is displayed\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-7",children:"Inherited from"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,r.jsx)(n.code,{children:"API"})}),".",(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#run",children:(0,r.jsx)(n.code,{children:"run"})})]}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-8",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L14",children:"models.ts:14"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"runtests",children:"runTests()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"runTests"}),": () => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"object"}),">"]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Runs project ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/features/tests",children:"tests"})," (if present) and gets test results."]}),"\n",(0,r.jsx)(n.h4,{id:"returns-10",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"object"}),">"]}),"\n",(0,r.jsx)(n.h5,{id:"results",children:"results"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"results"}),": ",(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/TestResult",children:(0,r.jsx)(n.code,{children:"TestResult"})}),"[]"]}),"\n"]}),"\n",(0,r.jsx)(n.h4,{id:"example-6",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n const { results } = await playground.runTests();\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-8",children:"Inherited from"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,r.jsx)(n.code,{children:"API"})}),".",(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#runtests",children:(0,r.jsx)(n.code,{children:"runTests"})})]}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-9",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L135",children:"models.ts:135"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"setconfig",children:"setConfig()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"setConfig"}),": (",(0,r.jsx)(n.code,{children:"config"}),") => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,r.jsx)(n.code,{children:"Config"})}),">"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Loads a new project using the passed configuration object."}),"\n",(0,r.jsx)(n.h4,{id:"parameters-5",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"config"}),": ",(0,r.jsx)(n.code,{children:"Partial"}),"<",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,r.jsx)(n.code,{children:"Config"})}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"returns-11",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,r.jsx)(n.code,{children:"Config"})}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"example-7",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n const config = {\n markup: {\n language: "html",\n content: "Hello World!",\n },\n };\n const newConfig = await playground.setConfig(config);\n // new project loaded\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-9",children:"Inherited from"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,r.jsx)(n.code,{children:"API"})}),".",(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#setconfig",children:(0,r.jsx)(n.code,{children:"setConfig"})})]}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-10",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L84",children:"models.ts:84"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"show",children:"show()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"show"}),": (",(0,r.jsx)(n.code,{children:"panel"}),", ",(0,r.jsx)(n.code,{children:"options"}),"?) => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Shows the selected panel."}),"\n",(0,r.jsxs)(n.p,{children:["See ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#show",children:"docs"})," for details."]}),"\n",(0,r.jsx)(n.h4,{id:"parameters-6",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"panel"}),": ",(0,r.jsx)(n.code,{children:'"result"'})," | ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/EditorId",children:(0,r.jsx)(n.code,{children:"EditorId"})})," | ",(0,r.jsx)(n.code,{children:'"console"'})," | ",(0,r.jsx)(n.code,{children:'"compiled"'})," | ",(0,r.jsx)(n.code,{children:'"tests"'})," | ",(0,r.jsx)(n.code,{children:'"editor"'})," | ",(0,r.jsx)(n.code,{children:'"toggle-result"'})]}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"options?"})]}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"options.column?"}),": ",(0,r.jsx)(n.code,{children:"number"})]}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"options.full?"}),": ",(0,r.jsx)(n.code,{children:"boolean"})]}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"options.line?"}),": ",(0,r.jsx)(n.code,{children:"number"})]}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"options.zoom?"}),": ",(0,r.jsx)(n.code,{children:"1"})," | ",(0,r.jsx)(n.code,{children:"0.5"})," | ",(0,r.jsx)(n.code,{children:"0.25"})]}),"\n",(0,r.jsx)(n.h4,{id:"returns-12",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"example-8",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'await playground.show("style");\nawait playground.show("toggle-result");\nawait playground.show("result", { full: true });\nawait playground.show("script");\nawait playground.show("result", { zoom: 0.5 });\nawait playground.show("console", { full: true });\n'})}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-10",children:"Inherited from"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,r.jsx)(n.code,{children:"API"})}),".",(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#show",children:(0,r.jsx)(n.code,{children:"show"})})]}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-11",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L119",children:"models.ts:119"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"watch",children:"watch"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"watch"}),": ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchLoad",children:(0,r.jsx)(n.code,{children:"WatchLoad"})})," & ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchReady",children:(0,r.jsx)(n.code,{children:"WatchReady"})})," & ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchCode",children:(0,r.jsx)(n.code,{children:"WatchCode"})})," & ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchConsole",children:(0,r.jsx)(n.code,{children:"WatchConsole"})})," & ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchTests",children:(0,r.jsx)(n.code,{children:"WatchTests"})})," & ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchDestroy",children:(0,r.jsx)(n.code,{children:"WatchDestroy"})})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Allows to watch for various playground events.\nIt takes 2 arguments: event name and a callback function that will be called on every event."}),"\n",(0,r.jsxs)(n.p,{children:["event name can be one of: ",(0,r.jsx)(n.code,{children:'"load" | "ready" | "code" | "console" | "tests" | "destroy"'})]}),"\n",(0,r.jsx)(n.p,{children:"In some events, the callback function will be called with an object that supplies relevant data to the callback function (e.g. code, console output, test results)."}),"\n",(0,r.jsxs)(n.p,{children:["The watch method returns an object with a single method (",(0,r.jsx)(n.code,{children:"remove"}),"), which when called will remove the callback from watching further events."]}),"\n",(0,r.jsxs)(n.p,{children:["See ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#watch",children:"docs"})," for details."]}),"\n",(0,r.jsx)(n.h4,{id:"example-9",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then((playground) => {\n const codeWatcher = playground.watch("code", ({ code, config }) => {\n // this will run on every code change\n console.log("code:", code);\n console.log("config:", config);\n });\n\n const consoleWatcher = playground.watch("console", ({ method, args }) => {\n // this will run on every console output\n console[method](...args);\n });\n\n const testsWatcher = playground.watch("tests", ({ results }) => {\n // this will run when tests run\n results.forEach((testResult) => {\n console.log("status:", testResult.status); // "pass", "fail" or "skip"\n console.log(testResult.errors); // array of errors as strings\n });\n });\n\n // then later\n codeWatcher.remove();\n consoleWatcher.remove();\n testsWatcher.remove();\n // events are no longer watched\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"inherited-from-11",children:"Inherited from"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:(0,r.jsx)(n.code,{children:"API"})}),".",(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/API#watch",children:(0,r.jsx)(n.code,{children:"watch"})})]}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-12",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L187",children:"models.ts:187"})})]})}function h(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},65:function(e,n,s){s.d(n,{Z:function(){return c},a:function(){return l}});var d=s(7294);let r={},i=d.createContext(r);function l(e){let n=d.useContext(i);return d.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),d.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/0eb8b304.49c6fc4c.js b/docs/assets/js/0eb8b304.49c6fc4c.js new file mode 100644 index 0000000..d7caa01 --- /dev/null +++ b/docs/assets/js/0eb8b304.49c6fc4c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9259"],{5862:function(e,o,n){n.r(o),n.d(o,{default:()=>h,frontMatter:()=>s,metadata:()=>r,assets:()=>c,toc:()=>d,contentTitle:()=>a});var r=JSON.parse('{"id":"features/code-format","title":"Code Format","description":"Code formatting is supported for most languages.","source":"@site/docs/features/code-format.mdx","sourceDirName":"features","slug":"/features/code-format","permalink":"/docs/features/code-format","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/code-format.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"AI Code Assistant \uD83E\uDE84","permalink":"/docs/features/ai"},"next":{"title":"Command Menu","permalink":"/docs/features/command-menu"}}'),t=n("5893"),i=n("65");let s={},a="Code Format",c={},d=[{value:"Code Formatters",id:"code-formatters",level:2},{value:"Format Button",id:"format-button",level:2},{value:"Keyboard Shortcut",id:"keyboard-shortcut",level:2},{value:"Format on-save",id:"format-on-save",level:2},{value:"Format Options",id:"format-options",level:2},{value:"Configuration",id:"configuration",level:2},{value:"SDK Method: format",id:"sdk-method-format",level:2}];function l(e){let o={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(o.header,{children:(0,t.jsx)(o.h1,{id:"code-format",children:"Code Format"})}),"\n",(0,t.jsxs)(o.p,{children:["Code formatting is supported for most ",(0,t.jsx)(o.a,{href:"/docs/languages/",children:"languages"}),"."]}),"\n",(0,t.jsx)(o.h2,{id:"code-formatters",children:"Code Formatters"}),"\n",(0,t.jsxs)(o.p,{children:["The code formatter used for each language is specified in the ",(0,t.jsx)(o.a,{href:"/docs/languages/",children:"language documentation"})," page."]}),"\n",(0,t.jsx)(o.p,{children:"For example:"}),"\n",(0,t.jsxs)(o.ul,{children:["\n",(0,t.jsxs)(o.li,{children:[(0,t.jsx)(o.a,{href:"https://prettier.io/",children:"Prettier"})," is used for many languages including HTML, CSS, JavaScript, TypeScript, JSX, TSX."]}),"\n",(0,t.jsxs)(o.li,{children:[(0,t.jsx)(o.a,{href:"https://pkg.go.dev/cmd/gofmt",children:"gofmt"})," (via ",(0,t.jsx)(o.a,{href:"https://github.com/gopherjs/gopherjs",children:"GopherJS"}),") is used for Go."]}),"\n",(0,t.jsxs)(o.li,{children:[(0,t.jsx)(o.a,{href:"https://shaunlebron.github.io/parinfer/",children:"Parinfer"})," is used for Scheme, Common Lisp and ClojureScript."]}),"\n"]}),"\n",(0,t.jsx)(o.h2,{id:"format-button",children:"Format Button"}),"\n",(0,t.jsxs)(o.p,{children:["Code formatting for the code in the active editor can be triggered by the ",(0,t.jsx)(o.code,{children:"Format"})," button below the editor."]}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.img,{alt:"code format",src:n(6947).Z+"",width:"2240",height:"1400"})}),"\n",(0,t.jsx)(o.h2,{id:"keyboard-shortcut",children:"Keyboard Shortcut"}),"\n",(0,t.jsxs)(o.p,{children:["Code formatting can also be trigger by the keyboard shortcut ",(0,t.jsx)("kbd",{children:"Alt"})," + ",(0,t.jsx)("kbd",{children:"Shift"})," + ",(0,t.jsx)("kbd",{children:"F"}),"."]}),"\n",(0,t.jsx)(o.h2,{id:"format-on-save",children:"Format on-save"}),"\n",(0,t.jsx)(o.p,{children:"Format on-save can be enabled from the Settings menu \u2192 Format on-save."}),"\n",(0,t.jsx)(o.h2,{id:"format-options",children:"Format Options"}),"\n",(0,t.jsxs)(o.p,{children:["Some format options can be configured from ",(0,t.jsx)(o.a,{href:"/docs/features/editor-settings",children:"Editor Settings"})," screen. These include ",(0,t.jsx)(o.a,{href:"https://prettier.io/",children:"Prettier"})," ",(0,t.jsx)(o.a,{href:"https://prettier.io/docs/en/options.html",children:"configuration options"})," for:"]}),"\n",(0,t.jsxs)(o.ul,{children:["\n",(0,t.jsx)(o.li,{children:"Indentation (Spaces/Tabs)"}),"\n",(0,t.jsx)(o.li,{children:"Tab size"}),"\n",(0,t.jsx)(o.li,{children:"Use Semicolons"}),"\n",(0,t.jsx)(o.li,{children:"Use Single Quotes"}),"\n",(0,t.jsx)(o.li,{children:"Use Trailing Commas"}),"\n"]}),"\n",(0,t.jsx)(o.h2,{id:"configuration",children:"Configuration"}),"\n",(0,t.jsxs)(o.p,{children:["Code format can be configured using the ",(0,t.jsx)(o.a,{href:"/docs/configuration/configuration-object",children:"configuration object"})," properties:"]}),"\n",(0,t.jsxs)(o.ul,{children:["\n",(0,t.jsx)(o.li,{children:(0,t.jsx)(o.a,{href:"/docs/configuration/configuration-object#formatonsave",children:(0,t.jsx)(o.code,{children:"formatOnsave"})})}),"\n",(0,t.jsx)(o.li,{children:(0,t.jsx)(o.a,{href:"/docs/configuration/configuration-object#usetabs",children:(0,t.jsx)(o.code,{children:"useTabs"})})}),"\n",(0,t.jsx)(o.li,{children:(0,t.jsx)(o.a,{href:"/docs/configuration/configuration-object#tabsize",children:(0,t.jsx)(o.code,{children:"tabSize"})})}),"\n",(0,t.jsx)(o.li,{children:(0,t.jsx)(o.a,{href:"/docs/configuration/configuration-object#semicolons",children:(0,t.jsx)(o.code,{children:"semicolons"})})}),"\n",(0,t.jsx)(o.li,{children:(0,t.jsx)(o.a,{href:"/docs/configuration/configuration-object#singlequote",children:(0,t.jsx)(o.code,{children:"singleQuote"})})}),"\n",(0,t.jsx)(o.li,{children:(0,t.jsx)(o.a,{href:"/docs/configuration/configuration-object#trailingcomma",children:(0,t.jsx)(o.code,{children:"trailingComma"})})}),"\n"]}),"\n",(0,t.jsxs)(o.h2,{id:"sdk-method-format",children:["SDK Method: ",(0,t.jsx)(o.code,{children:"format"})]}),"\n",(0,t.jsxs)(o.p,{children:["The code format can be programmatically triggered by the ",(0,t.jsx)(o.a,{href:"/docs/sdk/",children:"SDK"})," method ",(0,t.jsx)(o.a,{href:"/docs/sdk/js-ts#format",children:(0,t.jsx)(o.code,{children:"format"})}),"."]})]})}function h(e={}){let{wrapper:o}={...(0,i.a)(),...e.components};return o?(0,t.jsx)(o,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}},6947:function(e,o,n){n.d(o,{Z:function(){return r}});let r=n.p+"assets/images/format-1-caf806af001854376b50db95f544bdf0.jpg"},65:function(e,o,n){n.d(o,{Z:function(){return a},a:function(){return s}});var r=n(7294);let t={},i=r.createContext(t);function s(e){let o=r.useContext(i);return r.useMemo(function(){return"function"==typeof e?e(o):{...o,...e}},[o,e])}function a(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:s(e.components),r.createElement(i.Provider,{value:o},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/0ee03d4e.d8268cb4.js b/docs/assets/js/0ee03d4e.d8268cb4.js new file mode 100644 index 0000000..201afb6 --- /dev/null +++ b/docs/assets/js/0ee03d4e.d8268cb4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3550"],{4619:function(e,t,s){s.r(t),s.d(t,{default:()=>c,frontMatter:()=>o,metadata:()=>n,assets:()=>l,toc:()=>d,contentTitle:()=>a});var n=JSON.parse('{"id":"why","title":"Why Another Playground?","description":"There are great products like CodePen, JSFiddle, JS Bin, CodeSandbox, Replit and many others, which LiveCodes does not aim to replace or compete with. On the contrary, it aims to integrate with as many of these services as their APIs allow.","source":"@site/docs/why.mdx","sourceDirName":".","slug":"/why","permalink":"/docs/why","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/why.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Overview","permalink":"/docs/overview"},"next":{"title":"Getting Started","permalink":"/docs/getting-started"}}'),r=s("5893"),i=s("65");let o={},a="Why Another Playground?",l={},d=[{value:"What makes LiveCodes different?",id:"what-makes-livecodes-different",level:2},{value:"Language Support",id:"language-support",level:3},{value:"Client-Side!",id:"client-side",level:3},{value:"Developer Tool",id:"developer-tool",level:3},{value:"Build-Free Development Environment",id:"build-free-development-environment",level:3},{value:"Web Platform",id:"web-platform",level:3},{value:"Powerful SDK",id:"powerful-sdk",level:3},{value:"Free and Open-Source",id:"free-and-open-source",level:3}];function h(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"why-another-playground",children:"Why Another Playground?"})}),"\n",(0,r.jsxs)(t.p,{children:["There are great products like ",(0,r.jsx)(t.a,{href:"https://codepen.io/",children:"CodePen"}),", ",(0,r.jsx)(t.a,{href:"https://jsfiddle.net/",children:"JSFiddle"}),", ",(0,r.jsx)(t.a,{href:"https://jsbin.com/",children:"JS Bin"}),", ",(0,r.jsx)(t.a,{href:"https://codesandbox.io/",children:"CodeSandbox"}),", ",(0,r.jsx)(t.a,{href:"https://replit.com/",children:"Replit"})," and many others, which LiveCodes does not aim to replace or compete with. On the contrary, it aims to ",(0,r.jsx)(t.a,{href:"/docs/features/integrations",children:"integrate"})," with as many of these services as their APIs allow."]}),"\n",(0,r.jsx)(t.h2,{id:"what-makes-livecodes-different",children:"What makes LiveCodes different?"}),"\n",(0,r.jsx)(t.h3,{id:"language-support",children:"Language Support"}),"\n",(0,r.jsx)(t.p,{children:"Currently, there are 90+ languages/frameworks supported. These include:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Web languages (HTML, CSS & JavaScript)."}),"\n",(0,r.jsx)(t.li,{children:"Web frameworks/libraries (e.g. React JSX/TSX, Vue SFC, Svelte SFC, Solid, MDX, Astro)."}),"\n",(0,r.jsx)(t.li,{children:"Languages that transpile to JavaScript (e.g. TypeScript, CoffeeScript, LiveScript, ReScript)."}),"\n",(0,r.jsx)(t.li,{children:"Languages/frameworks that generate CSS (e.g. SCSS, Less, Stylus, Tailwind CSS, UnoCSS)."}),"\n",(0,r.jsx)(t.li,{children:"CSS processors (e.g. PostCSS, Autoprefixer, Lightning CSS, CSS Modules, cssnano)."}),"\n",(0,r.jsx)(t.li,{children:"Traditional programming languages (e.g. Python, Ruby, Go, PHP, C++, R, Lua, Scheme, Perl)."}),"\n",(0,r.jsx)(t.li,{children:"Data manipulation/logic languages (e.g. SQL, Prolog)."}),"\n",(0,r.jsx)(t.li,{children:"Authoring/templating languages (e.g Markdown, AsciiDoc, Pug, Handlebars, Haml)."}),"\n",(0,r.jsx)(t.li,{children:"Low-code/visual editors (e.g. blockly, rich text editor)."}),"\n",(0,r.jsx)(t.li,{children:"Modeling languages/diagram-as-code (e.g. Gnuplot, Graphviz, Mermaid, Vega, Plotly)."}),"\n",(0,r.jsx)(t.li,{children:"Languages that target WebAssembly (e.g. AssemblyScript, WebAssembly Text Format)."}),"\n",(0,r.jsx)(t.li,{children:"... and many more."}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["For a full list check the ",(0,r.jsx)(t.a,{href:"/docs/languages/",children:"Languages"})," section."]}),"\n",(0,r.jsx)(t.p,{children:"Generally, if you are a developer (or want to be one), there is a big chance you will find something interesting to do with LiveCodes."}),"\n",(0,r.jsx)(t.h3,{id:"client-side",children:"Client-Side!"}),"\n",(0,r.jsx)(t.p,{children:"All processing and code transformations run in the browser on the client-side. After the initial load, the app gets significantly faster without having to wait for server rounds. Lazy-loading is heavily used. Only parts of the app required for the selected languages/features are downloaded."}),"\n",(0,r.jsx)(t.p,{children:"The code you write in LiveCodes does not leave your computer. All projects are private unless you choose to share/export/deploy them."}),"\n",(0,r.jsx)(t.p,{children:"Being a client-side app allows it to be hosted on any static file server or CDN, which removes the high requirements needed by other alternatives (like server storage or memory). This makes LiveCodes available for a large number of developers without requiring them to pay for servers, so it can stay free with unlimited usage \uD83D\uDE0A."}),"\n",(0,r.jsx)(t.h3,{id:"developer-tool",children:"Developer Tool"}),"\n",(0,r.jsxs)(t.p,{children:["LiveCodes aims to be a feature-rich, easy to use playground that can be used for prototyping and education. The other main goal (in fact, that was the motive for its development), is to allow library developers to use it for documentation of their libraries and showcase their products. This can be achieved by ",(0,r.jsx)(t.a,{href:"/docs/features/embeds",children:"embedding playgrounds"})," in blogs, tutorials, documentation and educational websites. In addition, private (unpublished) modules can be imported with editor auto-completion and ",(0,r.jsx)(t.a,{href:"/docs/features/intellisense",children:"IntelliSense"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["That can be done using the official app (",(0,r.jsx)(t.a,{href:"https://livecodes.io",children:"livecodes.io"}),"), or as a ",(0,r.jsx)(t.a,{href:"/docs/features/self-hosting",children:"self-hosted"})," option. Again, being a client-side-only app, LiveCodes becomes more convenient for not needing special server requirements, while features like export and deploy are provided by APIs of external services."]}),"\n",(0,r.jsx)(t.p,{children:"LiveCodes does NOT aim to be a social coding platform. It will stay as a backendless developer tool. Other platforms are already doing a great job in this regards."}),"\n",(0,r.jsx)(t.h3,{id:"build-free-development-environment",children:"Build-Free Development Environment"}),"\n",(0,r.jsxs)(t.p,{children:["LiveCodes provides many of the tools you may already be using. These include Monaco editor (that powers ",(0,r.jsx)(t.a,{href:"https://code.visualstudio.com/",children:"VS Code"}),"), ",(0,r.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),", ",(0,r.jsx)(t.a,{href:"https://emmet.io/",children:"Emmet"}),", ",(0,r.jsx)(t.a,{href:"https://babeljs.io/",children:"Babel"}),", ",(0,r.jsx)(t.a,{href:"https://www.typescriptlang.org/",children:"TypeScript"}),", ",(0,r.jsx)(t.a,{href:"https://sass-lang.com/",children:"SCSS"}),", ",(0,r.jsx)(t.a,{href:"https://lesscss.org/",children:"Less"}),", ",(0,r.jsx)(t.a,{href:"https://postcss.org/",children:"PostCSS"}),", ",(0,r.jsx)(t.a,{href:"https://jestjs.io/",children:"Jest"})," and ",(0,r.jsx)(t.a,{href:"https://testing-library.com/",children:"Testing Library"}),", among others. ",(0,r.jsx)(t.a,{href:"/docs/features/module-resolution",children:"NPM modules"})," can be imported as usual. All these tools run seamlessly in the browser without any explicit build step. It feels like a very light-weight version of your own local development environment with the keyboard shortcuts, IntelliSense and code navigation features."]}),"\n",(0,r.jsxs)(t.p,{children:["It just works\u2122 without having to ",(0,r.jsx)(t.code,{children:"npm install"})," anything. Not even on the server (because there is no server!)."]}),"\n",(0,r.jsx)(t.p,{children:"This can markedly improve productivity, reduce the mental load required for all the traditional setup and can significantly decrease the barrier to entry for learning new technologies."}),"\n",(0,r.jsx)(t.h3,{id:"web-platform",children:"Web Platform"}),"\n",(0,r.jsxs)(t.p,{children:["The output of code written in LiveCodes is a ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"web page"}),". Whatever language/syntax you use, the result can ultimately be viewed as a web page which you can interact with, ",(0,r.jsx)(t.a,{href:"/docs/features/tests",children:"test"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/share",children:"share"})," or ",(0,r.jsx)(t.a,{href:"/docs/features/deploy",children:"deploy"}),". Check the ",(0,r.jsx)(t.a,{href:"https://livecodes.io?screen=new",children:"starter templates"})," for examples."]}),"\n",(0,r.jsxs)(t.p,{children:["Of course, the app can be still used as a REPL with the output seen in the integrated ",(0,r.jsx)(t.a,{href:"/docs/features/console",children:"console"}),"."]}),"\n",(0,r.jsx)(t.h3,{id:"powerful-sdk",children:"Powerful SDK"}),"\n",(0,r.jsxs)(t.p,{children:["The LiveCodes app (",(0,r.jsx)(t.a,{href:"/docs/getting-started#standalone-app",children:"standalone"})," or ",(0,r.jsx)(t.a,{href:"/docs/features/self-hosting",children:"self-hosted"}),") can be ",(0,r.jsx)(t.a,{href:"/docs/features/embeds",children:"embedded"})," in any web page. A powerful ",(0,r.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," allows the embedding page to interact with the playground (e.g. run, get/set source code, format, get result page or compiled code, get share URL, listen to changes, run tests, get test results, change layout, etc.). This enables other apps to be built on top of LiveCodes."]}),"\n",(0,r.jsx)(t.p,{children:"Your imagination is the limit!"}),"\n",(0,r.jsx)(t.h3,{id:"free-and-open-source",children:"Free and Open-Source"}),"\n",(0,r.jsxs)(t.p,{children:["LiveCodes is a free product that allows unrestricted use for the hosted app and for the self-hosted option. It is licensed under the permissive ",(0,r.jsx)(t.a,{href:"/docs/license",children:"MIT license"})," which allows free commercial use."]}),"\n",(0,r.jsxs)(t.p,{children:["Please consider ",(0,r.jsx)(t.a,{href:"/docs/sponsor",children:"sponsoring LiveCodes"})," if you find it useful, to support its maintenance and continued development."]}),"\n",(0,r.jsx)(t.admonition,{title:"Under Development",type:"caution",children:(0,r.jsxs)(t.p,{children:["LiveCodes is currently in ",(0,r.jsx)(t.strong,{children:"public beta"}),". It is in active development. However, please take the time to try it. Use ",(0,r.jsx)(t.a,{href:"/docs/features/permanent-url",children:"permanent URL"})," and pinned ",(0,r.jsx)(t.a,{href:"/docs/sdk/",children:"library version"})," to avoid breaking changes. Your feedback and contribution are highly appreciated."]})}),"\n",(0,r.jsx)(t.p,{children:"Enough talk, let's get started."})]})}function c(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return o}});var n=s(7294);let r={},i=n.createContext(r);function o(e){let t=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/0fd6ac79.9d41049c.js b/docs/assets/js/0fd6ac79.9d41049c.js new file mode 100644 index 0000000..7838267 --- /dev/null +++ b/docs/assets/js/0fd6ac79.9d41049c.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4361"],{2543:function(e,t,s){s.r(t),s.d(t,{default:()=>u,frontMatter:()=>l,metadata:()=>n,assets:()=>c,toc:()=>d,contentTitle:()=>a});var n=JSON.parse('{"id":"languages/postgresql","title":"PostgreSQL","description":"PostgreSQL is a powerful, open source object-relational database system. LiveCodes runs PostgreSQL in the browser using PGlite (lightweight Postgres packaged as Wasm).","source":"@site/docs/languages/postgresql.mdx","sourceDirName":"languages","slug":"/languages/postgresql","permalink":"/docs/languages/postgresql","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/postgresql.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Preset Env","permalink":"/docs/languages/postcssPresetEnv"},"next":{"title":"Prolog","permalink":"/docs/languages/prolog"}}'),r=s("5893"),o=s("65"),i=s("3365");let l={},a="PostgreSQL",c={},d=[{value:"Usage",id:"usage",level:2},{value:"Helper Methods",id:"helper-methods",level:3},{value:"Limitations",id:"limitations",level:3},{value:"Example Usage",id:"example-usage",level:3},{value:"Custom Settings",id:"custom-settings",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Aliases/Extensions",id:"aliasesextensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"postgresql",children:"PostgreSQL"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://www.postgresql.org/",children:"PostgreSQL"})," is a powerful, open source object-relational database system. LiveCodes runs PostgreSQL in the browser using ",(0,r.jsx)(t.a,{href:"https://github.com/electric-sql/pglite",children:"PGlite"})," (lightweight Postgres packaged as ",(0,r.jsx)(t.a,{href:"https://webassembly.org/",children:"Wasm"}),")."]}),"\n",(0,r.jsx)(t.admonition,{title:"Note",type:"info",children:(0,r.jsxs)(t.p,{children:["Please note that LiveCodes also supports ",(0,r.jsx)(t.a,{href:"/docs/languages/sql",children:"SQL using SQLite"}),"."]})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(t.p,{children:["The SQL code runs (in the browser) and the output is produced as a JSON object. This JSON object is added to the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," in a ",(0,r.jsx)(t.code,{children:"script"})," block with type ",(0,r.jsx)(t.code,{children:"application/json"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"#helper-methods",children:"Helper methods"})," are provided for easy access/rendering of the JSON object (see below)."]}),"\n",(0,r.jsx)(t.h3,{id:"helper-methods",children:"Helper Methods"}),"\n",(0,r.jsxs)(t.p,{children:["The JavaScript object ",(0,r.jsx)(t.code,{children:"livecodes.sql"})," is globally available in the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),". This can be used in ",(0,r.jsx)(t.code,{children:"script"})," blocks in the ",(0,r.jsx)(t.a,{href:"/docs/features/projects",children:"markup editor"})," (page HTML - see HTML editor is ",(0,r.jsx)(t.a,{href:"#example-usage",children:"example usage"}),"). It provides the following methods for easy access/rendering of the JSON object:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"livecodes.sql.getResult"})}),"\n",(0,r.jsxs)(t.p,{children:["Type: ",(0,r.jsx)(t.code,{children:"() => Promise<{ data: Array<{ columns: string[]; values: unknown[][]; }>}>"}),":"]}),"\n",(0,r.jsxs)(t.p,{children:["Returns a promise that resolves to the JSON object. The object has a single property ",(0,r.jsx)(t.code,{children:"data"})," which is an array of objects, each representing the output of a query (e.g. ",(0,r.jsx)(t.code,{children:"SELECT * FROM table"}),"). Each object has two properties ",(0,r.jsx)(t.code,{children:"columns"})," (an array of column names) and ",(0,r.jsx)(t.code,{children:"values"})," (an array of arrays of values)."]}),"\n",(0,r.jsx)(t.p,{children:"In case of errors, the promise rejects with the error message."}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-html",metastring:'title="HTML"',children:" + + +`,j=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:a.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(m,{js:u,ts:p,react:g,vue:f,svelte:j})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return o}});var n=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:r="lazy",view:i}=t,l=n||"headless"===i,a=null,c=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)P(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(o(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",l?"eager":r);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let g=!1,m="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let n="livecodes",o=a.querySelector(`iframe.${n}`),i=o||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===r?"eager":"lazy"),l?P(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),i.onload=()=>{e(i)},i.src=d.href,o||a.appendChild(i)}),j=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),j.settled=!0)})}),x=()=>g?Promise.reject(m):new Promise(async e=>{j.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await j,e()}),v=(e,t)=>new Promise(async(s,n)=>{if(g)return n(m);await x();let r=q();addEventListener("message",function t(o){if(o.source===f.contentWindow&&o.origin===h&&o.data?.type==="livecodes-api-response"&&o.data?.id===r&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},h)}),y={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(g)throw Error(m);return b.includes(e)?(v("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&v("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!y[t])return;let s=e.data?.payload;y[t]?.forEach(e=>{e(s)})});let L=()=>{Object.values(y).forEach(e=>{e.length=0}),f?.remove?.(),g=!0};function P(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await x(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let q=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>x(),run:()=>v("run"),format:e=>v("format",[e]),getShareUrl:e=>v("getShareUrl",[e]),getConfig:e=>v("getConfig",[e]),setConfig:e=>v("setConfig",[e]),getCode:()=>v("getCode"),show:(e,t)=>v("show",[e,t]),runTests:()=>v("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nj.settled?v("destroy").then(L):g?Promise.reject(m):(L(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:o={},headless:i,import:l,lite:a,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||i;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==c?o.view=c:e.searchParams.set("view",c)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(o))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return l},a:function(){return i}});var n=s(7294);let r={},o=n.createContext(r);function i(e){let t=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/10414591.76ea106e.js b/docs/assets/js/10414591.76ea106e.js new file mode 100644 index 0000000..53bce40 --- /dev/null +++ b/docs/assets/js/10414591.76ea106e.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7297"],{6962:function(e,t,s){s.r(t),s.d(t,{default:()=>p,frontMatter:()=>a,metadata:()=>n,assets:()=>d,toc:()=>c,contentTitle:()=>l});var n=JSON.parse('{"id":"features/tests","title":"Tests","description":"Overview","source":"@site/docs/features/tests.mdx","sourceDirName":"features","slug":"/features/tests","permalink":"/docs/features/tests","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/tests.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Compiled Code","permalink":"/docs/features/compiled-code"},"next":{"title":"Module Resolution","permalink":"/docs/features/module-resolution"}}'),r=s("5893"),i=s("65"),o=s("3365");let a={},l="Tests",d={},c=[{value:"Overview",id:"overview",level:2},{value:"Use Cases",id:"use-cases",level:2},{value:"Demos",id:"demos",level:2},{value:"Tests Panel",id:"tests-panel",level:2},{value:"Supported Languages",id:"supported-languages",level:2},{value:"Importing Code",id:"importing-code",level:2},{value:"Supported Jest features",id:"supported-jest-features",level:2},{value:"Supported testing libraries",id:"supported-testing-libraries",level:2},{value:"Testing library",id:"testing-library",level:3},{value:"Chai",id:"chai",level:3},{value:"Examples",id:"examples",level:2},{value:"SDK",id:"sdk",level:2}];function h(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"tests",children:"Tests"})}),"\n","\n",(0,r.jsx)(t.h2,{id:"overview",children:"Overview"}),"\n",(0,r.jsx)(t.p,{children:"Automated tests can be added for projects. The tests are run in the context of the result web page."}),"\n",(0,r.jsxs)(t.p,{children:["The automated tests are run by the ",(0,r.jsx)("a",{href:"https://jestjs.io/",target:"_blank",children:"Jest testing framework"}),", which runs totally in the browser. In addition, other ",(0,r.jsx)(t.a,{href:"#supported-testing-libraries",children:"testing libraries"})," are also supported."]}),"\n",(0,r.jsx)(t.p,{children:"Screenshots:"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"Livecodes Tests",src:s(9361).Z+"",width:"2240",height:"1400"})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"Livecodes Tests",src:s(9006).Z+"",width:"2240",height:"1400"})}),"\n",(0,r.jsx)(t.h2,{id:"use-cases",children:"Use Cases"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Automated tests increase the confidence in the code and can improve the quality of projects."}),"\n",(0,r.jsxs)(t.li,{children:["Allows ",(0,r.jsx)("a",{href:"https://en.wikipedia.org/wiki/Test-driven_development",target:"_blank",children:"Test-driven development (TDD)"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:["Can be used for education and training by preparing projects with tests that are required to pass by the students' implementation (similar to ",(0,r.jsx)("a",{href:"https://www.freecodecamp.org/learn",target:"_blank",children:"freeCodeCamp"}),")."]}),"\n",(0,r.jsxs)(t.li,{children:["Can be used by wesites that offer coding challenges (similar to ",(0,r.jsx)("a",{href:"https://www.codewars.com/",target:"_blank",children:"Codewars"}),")."]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"demos",children:"Demos"}),"\n",(0,r.jsx)(t.p,{children:"Demo: (template=jest)"}),"\n",(0,r.jsx)(o.Z,{template:"jest",params:{tests:"open"}}),"\n",(0,r.jsx)("p",{children:"\xa0"}),"\n",(0,r.jsx)(t.p,{children:"Demo: (template=jest-react)"}),"\n",(0,r.jsx)(o.Z,{template:"jest-react",params:{tests:"open"}}),"\n",(0,r.jsx)(t.h2,{id:"tests-panel",children:"Tests Panel"}),"\n",(0,r.jsxs)(t.p,{children:['The "Tests" panel is located in the "',(0,r.jsx)(t.a,{href:"/docs/features/tools-pane",children:"Tools pane"}),'" below the result page.']}),"\n",(0,r.jsx)(t.p,{children:"In the tests panel, you can find:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:'"Run" button: To run tests (keyboard shortcut: Ctrl/Cmd + Alt + t).'}),"\n",(0,r.jsx)(t.li,{children:'"Watch" button toggle: To watch the project and re-run tests automatically when code changes.'}),"\n",(0,r.jsx)(t.li,{children:'"Reset" button: Resets test results.'}),"\n",(0,r.jsx)(t.li,{children:'"Edit" button: Opens a code editor to edit tests (not in embeds).'}),"\n",(0,r.jsx)(t.li,{children:"Test results."}),"\n"]}),"\n",(0,r.jsxs)(t.admonition,{title:"Note",type:"info",children:[(0,r.jsxs)(t.p,{children:["Please note that the tests panel are hidden by default in ",(0,r.jsx)(t.a,{href:"/docs/features/embeds",children:"embedded playgrounds"})," unless the ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#tests",children:"project has tests"}),". In such case, the panel is added to the ",(0,r.jsx)(t.a,{href:"/docs/features/tools-pane",children:"tools pane"}),". However, the test editor is not shown."]}),(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," can control the visibility of the different tools in the tools pane (see ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#tools",children:(0,r.jsx)(t.code,{children:"tools"})})," property of the ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configuration object"}),")."]}),(0,r.jsxs)(t.p,{children:["The tests panel and the test editor are always shown in the ",(0,r.jsx)(t.a,{href:"/docs/getting-started#standalone-app",children:"full standalone app"}),"."]})]}),"\n",(0,r.jsx)(t.h2,{id:"supported-languages",children:"Supported Languages"}),"\n",(0,r.jsx)(t.p,{children:"The testing code can be written using JavaScript, TypeScript, JSX or TSX.\nHowever, since the tests run against the result web page, they can test projects that use any language/framework."}),"\n",(0,r.jsxs)(t.p,{children:["This is ",(0,r.jsx)(t.a,{href:"https://livecodes.io/?x=id/xyi6usem2sf&tests",children:"a demo"})," for running tests against a Ruby project."]}),"\n",(0,r.jsx)(o.Z,{import:"id/xyi6usem2sf",params:{tests:"open"},height:"80vh"}),"\n",(0,r.jsxs)(t.p,{children:["Languages may have test modules. This is ",(0,r.jsx)(t.a,{href:"https://livecodes.io/?x=id/665ar3bpqka&console=full",children:"an example"})," of running ",(0,r.jsx)(t.a,{href:"https://docs.python.org/3/library/doctest.html",children:"Python doctest"})," tests:"]}),"\n",(0,r.jsx)(o.Z,{import:"id/665ar3bpqka",params:{console:"full"},height:"80vh"}),"\n",(0,r.jsx)(t.h2,{id:"importing-code",children:"Importing Code"}),"\n",(0,r.jsxs)(t.p,{children:["Functions, objects or values can be exported from the ",(0,r.jsx)(t.code,{children:"script"})," code like a regular ES module.\nThese can then be imported in the test code for usage. This is only available for code in the ",(0,r.jsx)(t.code,{children:"script"})," editor. The testing code also have access to global objects like ",(0,r.jsx)(t.code,{children:"window"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// in the script editor\nexport default function greet() {\n return 'Hello, World!';\n}\n\nexport const add = (x, y) => x + y;\n\nwindow.multiply = (x, y) => x * y;\n"})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"// in the test editor\nimport greet, { add } from './script'; // relative import without extension\n\ndescribe('test imported', () => {\n test('greet', () => {\n expect(greet()).toBe('Hello, World!');\n });\n\n test('add', () => {\n expect(add(1, 2)).toBe(3);\n });\n});\n\ndescribe('test global', () => {\n test('multiply', () => {\n expect(window.multiply(2, 3)).toBe(6);\n });\n});\n"})}),"\n",(0,r.jsx)(t.h2,{id:"supported-jest-features",children:"Supported Jest features"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://jestjs.io/docs/api",children:"Jest globals"}),": ",(0,r.jsx)(t.code,{children:"expect"}),", ",(0,r.jsx)(t.code,{children:"test"}),", ",(0,r.jsx)(t.code,{children:"xtest"}),", ",(0,r.jsx)(t.code,{children:"it"}),", ",(0,r.jsx)(t.code,{children:"fit"}),", ",(0,r.jsx)(t.code,{children:"xit"}),", ",(0,r.jsx)(t.code,{children:"describe"}),", ",(0,r.jsx)(t.code,{children:"fdescribe"}),", ",(0,r.jsx)(t.code,{children:"xdescribe"}),", ",(0,r.jsx)(t.code,{children:"beforeAll"}),", ",(0,r.jsx)(t.code,{children:"afterAll"}),", ",(0,r.jsx)(t.code,{children:"beforeEach"}),", ",(0,r.jsx)(t.code,{children:"afterEach"})]}),"\n",(0,r.jsxs)(t.li,{children:["Jest function mocks: ",(0,r.jsx)(t.code,{children:"jest.fn"}),", ",(0,r.jsx)(t.code,{children:"jest.mocked"}),", ",(0,r.jsx)(t.code,{children:"jest.replaceProperty"}),", ",(0,r.jsx)(t.code,{children:"jest.spyOn"})]}),"\n"]}),"\n",(0,r.jsx)(t.p,{children:"These can be directly used in the test editor, without the need for any imports.\nAutocomplete is available in Monaco editor for Jest API."}),"\n",(0,r.jsx)(t.h2,{id:"supported-testing-libraries",children:"Supported testing libraries"}),"\n",(0,r.jsx)(t.p,{children:"In addition to Jest, you may wish to use other supported testing libraries. These have to be explicitly imported to the testing code."}),"\n",(0,r.jsx)(t.h3,{id:"testing-library",children:"Testing library"}),"\n",(0,r.jsx)(t.p,{children:"Simple and complete testing utilities that encourage good testing practices."}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)("a",{href:"https://testing-library.com/docs/dom-testing-library/intro",target:"_blank",children:"DOM Testing Library"}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import {\n getByLabelText,\n getByText,\n getByTestId,\n queryByTestId,\n waitFor,\n} from '@testing-library/dom';\n"})}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)("a",{href:"https://testing-library.com/docs/react-testing-library/intro",target:"_blank",children:"React Testing Library"}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { render, fireEvent, waitFor, screen } from '@testing-library/react';\n"})}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)("a",{href:"https://testing-library.com/docs/ecosystem-jest-dom",target:"_blank",children:"jest-dom"}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import '@testing-library/jest-dom';\n"})}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)("a",{href:"https://testing-library.com/docs/user-event/intro",target:"_blank",children:"user-event"}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import userEvent from '@testing-library/user-event';\n"})}),"\n",(0,r.jsx)(t.h3,{id:"chai",children:"Chai"}),"\n",(0,r.jsx)(t.p,{children:"Jest assertions can be used in the tests. However, if you prefer Chai, it can be easily used.\nAutocomplete is also available in Monaco editor for Chai API."}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { assert } from 'chai';\n"})}),"\n",(0,r.jsx)(t.h2,{id:"examples",children:"Examples"}),"\n",(0,r.jsxs)(t.p,{children:["Usage examples are provided in the starter templates (",(0,r.jsx)("a",{href:"pathname:///../?template=jest",target:"_blank",children:"Jest Starter"})," and ",(0,r.jsx)("a",{href:"pathname:///../?template=jest-react",target:"_blank",children:"Jest/React Starter"}),")."]}),"\n",(0,r.jsx)(t.admonition,{type:"caution",children:(0,r.jsx)(t.p,{children:"The test code is added to the result page and runs in its context. Please note that script errors (e.g. import or syntax errors) may prevent the tests from loading."})}),"\n",(0,r.jsx)(t.h2,{id:"sdk",children:"SDK"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," allows ",(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#runtests",children:"running tests"})," and collecting results."]})]})}function p(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9006:function(e,t,s){s.d(t,{Z:function(){return n}});let n=s.p+"assets/images/test-editor-0186c1c97faf3bf597fea218a63fdb0e.jpg"},9361:function(e,t,s){s.d(t,{Z:function(){return n}});let n=s.p+"assets/images/tests-99a062bb017d23a722610e968fbfca2a.jpg"},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),r=s("4200"),i=s("7294"),o=s("8294");function a(e){let t=(0,i.useRef)(null),[s,r]=(0,i.useState)(e.className||""),[a,l]=(0,i.useState)(e.style||{}),[d,c]=(0,i.useState)(e.height),[h,p]=(0,i.useState)(),[u,m]=(0,i.useState)(JSON.stringify(e.config||"")),[g,f]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:i,sdkReady:a,config:d,...j}=e;if(r(s||""),l(n||{}),c(i),h&&g===JSON.stringify(j)){if(u===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(j)),h?.destroy(),(0,o.T)(t.current,{config:d,...j}).then(e=>{p(e),"function"==typeof a&&a(e)})},[e]),(0,i.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":d})}var l=s("1858"),d=s("3262"),c=s("1705"),h=s("7645"),p=s("8168"),u=s("8228"),m=s("5050");function g(e){let[t,s]=(0,i.useState)(e.js),[r,o]=(0,i.useState)(e.ts),[a,l]=(0,i.useState)(e.react),[g,f]=(0,i.useState)(e.vue),[j,x]=(0,i.useState)(e.svelte),y="3.7rem",[v,b]=(0,i.useState)(!0),[w,S]=(0,i.useState)(y),T=(0,i.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${T.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{S(`calc(${T.current.offsetHeight}px + ${y})`)},255)};return(0,i.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),o(e(r,"ts")),l(e(a,"jsx")),f(e(g,"html")),x(e(j,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${u.Z.details}`,"data-collapsed":v,style:{height:v?y:w,overflow:"hidden",willChange:"height",transition:`height ${v?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!v),C()},children:"show code"}),(0,n.jsx)("div",{ref:T,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(p.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"ts",children:r})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"jsx",children:a})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"html",children:j})})]})})})]})}function f(e){let{className:t,style:s,showCode:i,height:o,...d}=e,{colorMode:c}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),p=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),u=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (); +} + +`.trimStart(),f=` + + + +`,j=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:p,ts:u,react:m,vue:f,svelte:j})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return i}});var n=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:r="lazy",view:o}=t,a=n||"headless"===o,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)C(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(i(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":r);let p=globalThis.process;c.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(u[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",i=l.querySelector(`iframe.${n}`),o=i||document.createElement("iframe");o.classList.add(n),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===r?"eager":"lazy"),a?C(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),o.onload=()=>{e(o)},o.src=c.href,i||l.appendChild(o)}),j=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),j.settled=!0)})}),x=()=>m?Promise.reject(g):new Promise(async e=>{j.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await j,e()}),y=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await x();let r=k();addEventListener("message",function t(i){if(i.source===f.contentWindow&&i.origin===h&&i.data?.type==="livecodes-api-response"&&i.data?.id===r&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},h)}),v={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return b.includes(e)?(y("watch",[e]),v[e]||(v[e]=[]),v[e]?.push(t),{remove:()=>{v[e]=v[e]?.filter(e=>e!==t),v[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!v[t])return;let s=e.data?.payload;v[t]?.forEach(e=>{e(s)})});let T=()=>{Object.values(v).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await x(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let k=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>x(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,t)=>y("show",[e,t]),runTests:()=>y("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nj.settled?y("destroy").then(T):m?Promise.reject(g):(T(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:i={},headless:o,import:a,lite:l,view:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let p="headless"===t.view||o;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==d?i.view=d:e.searchParams.set("view",d)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(i))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),p&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return o}});var n=s(7294);let r={},i=n.createContext(r);function o(e){let t=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/11b43341.680d3de9.js b/docs/assets/js/11b43341.680d3de9.js new file mode 100644 index 0000000..87b52cd --- /dev/null +++ b/docs/assets/js/11b43341.680d3de9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4467"],{9989:function(e){e.exports=JSON.parse('{"version":{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"docsSidebar":[{"type":"category","label":"Docs","collapsible":false,"items":[{"type":"link","label":"Why Another Playground?","href":"/docs/why","docId":"why","unlisted":false},{"type":"link","label":"Getting Started","href":"/docs/getting-started","docId":"getting-started","unlisted":false},{"type":"category","label":"Features","items":[{"type":"link","label":"Projects","href":"/docs/features/projects","docId":"features/projects","unlisted":false},{"type":"link","label":"Templates","href":"/docs/features/templates","docId":"features/templates","unlisted":false},{"type":"link","label":"CSS","href":"/docs/features/css","docId":"features/css","unlisted":false},{"type":"link","label":"Result Page","href":"/docs/features/result","docId":"features/result","unlisted":false},{"type":"link","label":"External Resources","href":"/docs/features/external-resources","docId":"features/external-resources","unlisted":false},{"type":"link","label":"Tools Pane","href":"/docs/features/tools-pane","docId":"features/tools-pane","unlisted":false},{"type":"link","label":"Console","href":"/docs/features/console","docId":"features/console","unlisted":false},{"type":"link","label":"Compiled Code","href":"/docs/features/compiled-code","docId":"features/compiled-code","unlisted":false},{"type":"link","label":"Tests","href":"/docs/features/tests","docId":"features/tests","unlisted":false},{"type":"link","label":"Module Resolution","href":"/docs/features/module-resolution","docId":"features/module-resolution","unlisted":false},{"type":"link","label":"IntelliSense","href":"/docs/features/intellisense","docId":"features/intellisense","unlisted":false},{"type":"link","label":"AI Code Assistant \uD83E\uDE84","href":"/docs/features/ai","docId":"features/ai","unlisted":false},{"type":"link","label":"Code Format","href":"/docs/features/code-format","docId":"features/code-format","unlisted":false},{"type":"link","label":"Command Menu","href":"/docs/features/command-menu","docId":"features/command-menu","unlisted":false},{"type":"link","label":"Keyboard Shortcuts","href":"/docs/features/keyboard-shortcuts","docId":"features/keyboard-shortcuts","unlisted":false},{"type":"link","label":"User Settings","href":"/docs/features/user-settings","docId":"features/user-settings","unlisted":false},{"type":"link","label":"Editor Settings","href":"/docs/features/editor-settings","docId":"features/editor-settings","unlisted":false},{"type":"link","label":"Internationalization (i18n)","href":"/docs/features/i18n","docId":"features/i18n","unlisted":false},{"type":"link","label":"Default Template/Language","href":"/docs/features/default-template-language","docId":"features/default-template-language","unlisted":false},{"type":"link","label":"Assets","href":"/docs/features/assets","docId":"features/assets","unlisted":false},{"type":"link","label":"Code Snippets","href":"/docs/features/snippets","docId":"features/snippets","unlisted":false},{"type":"link","label":"Import","href":"/docs/features/import","docId":"features/import","unlisted":false},{"type":"link","label":"Export","href":"/docs/features/export","docId":"features/export","unlisted":false},{"type":"link","label":"Share","href":"/docs/features/share","docId":"features/share","unlisted":false},{"type":"link","label":"Welcome Screen","href":"/docs/features/welcome","docId":"features/welcome","unlisted":false},{"type":"link","label":"Recover Unsaved","href":"/docs/features/recover","docId":"features/recover","unlisted":false},{"type":"link","label":"Code to Image","href":"/docs/features/code-to-image","docId":"features/code-to-image","unlisted":false},{"type":"link","label":"Display Modes","href":"/docs/features/display-modes","docId":"features/display-modes","unlisted":false},{"type":"link","label":"Default View","href":"/docs/features/default-view","docId":"features/default-view","unlisted":false},{"type":"link","label":"Themes","href":"/docs/features/themes","docId":"features/themes","unlisted":false},{"type":"link","label":"Mobile Support","href":"/docs/features/mobile","docId":"features/mobile","unlisted":false},{"type":"link","label":"Embedded Playgrounds","href":"/docs/features/embeds","docId":"features/embeds","unlisted":false},{"type":"link","label":"Lite Mode","href":"/docs/features/lite","docId":"features/lite","unlisted":false},{"type":"link","label":"Read-Only","href":"/docs/features/read-only","docId":"features/read-only","unlisted":false},{"type":"link","label":"Permanent URL","href":"/docs/features/permanent-url","docId":"features/permanent-url","unlisted":false},{"type":"link","label":"Code Prefill","href":"/docs/features/code-prefill","docId":"features/code-prefill","unlisted":false},{"type":"link","label":"Data URLs","href":"/docs/features/data-urls","docId":"features/data-urls","unlisted":false},{"type":"link","label":"Deploy","href":"/docs/features/deploy","docId":"features/deploy","unlisted":false},{"type":"link","label":"Sync","href":"/docs/features/sync","docId":"features/sync","unlisted":false},{"type":"link","label":"Broadcast","href":"/docs/features/broadcast","docId":"features/broadcast","unlisted":false},{"type":"link","label":"Backup / Restore","href":"/docs/features/backup-restore","docId":"features/backup-restore","unlisted":false},{"type":"link","label":"GitHub Integration","href":"/docs/features/github-integration","docId":"features/github-integration","unlisted":false},{"type":"link","label":"Integrations","href":"/docs/features/integrations","docId":"features/integrations","unlisted":false},{"type":"link","label":"User Management","href":"/docs/features/user-management","docId":"features/user-management","unlisted":false},{"type":"link","label":"Security","href":"/docs/features/security","docId":"features/security","unlisted":false},{"type":"link","label":"Self-Hosting","href":"/docs/features/self-hosting","docId":"features/self-hosting","unlisted":false}],"collapsed":true,"collapsible":true,"href":"/docs/features/"},{"type":"category","label":"Configuration","items":[{"type":"link","label":"Configuration Object","href":"/docs/configuration/configuration-object","docId":"configuration/configuration-object","unlisted":false},{"type":"link","label":"Query Parameters","href":"/docs/configuration/query-params","docId":"configuration/query-params","unlisted":false}],"collapsed":true,"collapsible":true,"href":"/docs/configuration/"},{"type":"category","label":"SDK","items":[{"type":"link","label":"JS/TS SDK","href":"/docs/sdk/js-ts","docId":"sdk/js-ts","unlisted":false},{"type":"link","label":"React SDK","href":"/docs/sdk/react","docId":"sdk/react","unlisted":false},{"type":"link","label":"Vue SDK","href":"/docs/sdk/vue","docId":"sdk/vue","unlisted":false},{"type":"link","label":"Svelte","href":"/docs/sdk/svelte","docId":"sdk/svelte","unlisted":false},{"type":"link","label":"Headless Mode","href":"/docs/sdk/headless","docId":"sdk/headless","unlisted":false}],"collapsed":true,"collapsible":true,"href":"/docs/sdk/"},{"type":"category","label":"Advanced","items":[{"type":"link","label":"Custom Settings","href":"/docs/advanced/custom-settings","docId":"advanced/custom-settings","unlisted":false},{"type":"link","label":"Services","href":"/docs/advanced/services","docId":"advanced/services","unlisted":false}],"collapsed":true,"collapsible":true,"href":"/docs/advanced/"},{"type":"category","label":"Languages","items":[{"type":"link","label":"art-template","href":"/docs/languages/art-template","docId":"languages/art-template","unlisted":false},{"type":"link","label":"AsciiDoc","href":"/docs/languages/asciidoc","docId":"languages/asciidoc","unlisted":false},{"type":"link","label":"AssemblyScript","href":"/docs/languages/assemblyscript","docId":"languages/assemblyscript","unlisted":false},{"type":"link","label":"Astro","href":"/docs/languages/astro","docId":"languages/astro","unlisted":false},{"type":"link","label":"Autoprefixer","href":"/docs/languages/autoprefixer","docId":"languages/autoprefixer","unlisted":false},{"type":"link","label":"Babel","href":"/docs/languages/babel","docId":"languages/babel","unlisted":false},{"type":"link","label":"BBCode","href":"/docs/languages/bbcode","docId":"languages/bbcode","unlisted":false},{"type":"link","label":"Blockly","href":"/docs/languages/blockly","docId":"languages/blockly","unlisted":false},{"type":"link","label":"Civet","href":"/docs/languages/civet","docId":"languages/civet","unlisted":false},{"type":"link","label":"Clio","href":"/docs/languages/clio","docId":"languages/clio","unlisted":false},{"type":"link","label":"ClojureScript","href":"/docs/languages/clojurescript","docId":"languages/clojurescript","unlisted":false},{"type":"link","label":"CoffeeScript","href":"/docs/languages/coffeescript","docId":"languages/coffeescript","unlisted":false},{"type":"link","label":"Common Lisp","href":"/docs/languages/commonlisp","docId":"languages/commonlisp","unlisted":false},{"type":"link","label":"C/C++ (Wasm)","href":"/docs/languages/cpp-wasm","docId":"languages/cpp-wasm","unlisted":false},{"type":"link","label":"C++","href":"/docs/languages/cpp","docId":"languages/cpp","unlisted":false},{"type":"link","label":"C# (Wasm)","href":"/docs/languages/csharp-wasm","docId":"languages/csharp-wasm","unlisted":false},{"type":"link","label":"CSS","href":"/docs/languages/css","docId":"languages/css","unlisted":false},{"type":"link","label":"CSS Modules","href":"/docs/languages/cssmodules","docId":"languages/cssmodules","unlisted":false},{"type":"link","label":"cssnano","href":"/docs/languages/cssnano","docId":"languages/cssnano","unlisted":false},{"type":"link","label":"Diagrams","href":"/docs/languages/diagrams","docId":"languages/diagrams","unlisted":false},{"type":"link","label":"doT","href":"/docs/languages/dot","docId":"languages/dot","unlisted":false},{"type":"link","label":"EJS","href":"/docs/languages/ejs","docId":"languages/ejs","unlisted":false},{"type":"link","label":"Eta","href":"/docs/languages/eta","docId":"languages/eta","unlisted":false},{"type":"link","label":"Fennel","href":"/docs/languages/fennel","docId":"languages/fennel","unlisted":false},{"type":"link","label":"Flow","href":"/docs/languages/flow","docId":"languages/flow","unlisted":false},{"type":"link","label":"Gleam","href":"/docs/languages/gleam","docId":"languages/gleam","unlisted":false},{"type":"link","label":"Go (Golang)","href":"/docs/languages/go","docId":"languages/go","unlisted":false},{"type":"link","label":"Haml","href":"/docs/languages/haml","docId":"languages/haml","unlisted":false},{"type":"link","label":"Handlebars","href":"/docs/languages/handlebars","docId":"languages/handlebars","unlisted":false},{"type":"link","label":"HTML","href":"/docs/languages/html","docId":"languages/html","unlisted":false},{"type":"link","label":"Imba","href":"/docs/languages/imba","docId":"languages/imba","unlisted":false},{"type":"link","label":"Java","href":"/docs/languages/java","docId":"languages/java","unlisted":false},{"type":"link","label":"JavaScript","href":"/docs/languages/javascript","docId":"languages/javascript","unlisted":false},{"type":"link","label":"Jinja","href":"/docs/languages/jinja","docId":"languages/jinja","unlisted":false},{"type":"link","label":"JSX","href":"/docs/languages/jsx","docId":"languages/jsx","unlisted":false},{"type":"link","label":"Julia","href":"/docs/languages/julia","docId":"languages/julia","unlisted":false},{"type":"link","label":"Less","href":"/docs/languages/less","docId":"languages/less","unlisted":false},{"type":"link","label":"Lightning CSS","href":"/docs/languages/lightningcss","docId":"languages/lightningcss","unlisted":false},{"type":"link","label":"Liquid","href":"/docs/languages/liquid","docId":"languages/liquid","unlisted":false},{"type":"link","label":"LiveScript","href":"/docs/languages/livescript","docId":"languages/livescript","unlisted":false},{"type":"link","label":"Lua (Wasm)","href":"/docs/languages/lua-wasm","docId":"languages/lua-wasm","unlisted":false},{"type":"link","label":"Lua","href":"/docs/languages/lua","docId":"languages/lua","unlisted":false},{"type":"link","label":"Malina.js","href":"/docs/languages/malina","docId":"languages/malina","unlisted":false},{"type":"link","label":"Markdown","href":"/docs/languages/markdown","docId":"languages/markdown","unlisted":false},{"type":"link","label":"MDX","href":"/docs/languages/mdx","docId":"languages/mdx","unlisted":false},{"type":"link","label":"MJML","href":"/docs/languages/mjml","docId":"languages/mjml","unlisted":false},{"type":"link","label":"Mustache","href":"/docs/languages/mustache","docId":"languages/mustache","unlisted":false},{"type":"link","label":"Nunjucks","href":"/docs/languages/nunjucks","docId":"languages/nunjucks","unlisted":false},{"type":"link","label":"OCaml","href":"/docs/languages/ocaml","docId":"languages/ocaml","unlisted":false},{"type":"link","label":"Perl","href":"/docs/languages/perl","docId":"languages/perl","unlisted":false},{"type":"link","label":"PHP (Wasm)","href":"/docs/languages/php-wasm","docId":"languages/php-wasm","unlisted":false},{"type":"link","label":"PHP","href":"/docs/languages/php","docId":"languages/php","unlisted":false},{"type":"link","label":"PostCSS","href":"/docs/languages/postcss","docId":"languages/postcss","unlisted":false},{"type":"link","label":"Import Url","href":"/docs/languages/postcssImportUrl","docId":"languages/postcssImportUrl","unlisted":false},{"type":"link","label":"Preset Env","href":"/docs/languages/postcssPresetEnv","docId":"languages/postcssPresetEnv","unlisted":false},{"type":"link","label":"PostgreSQL","href":"/docs/languages/postgresql","docId":"languages/postgresql","unlisted":false},{"type":"link","label":"Prolog","href":"/docs/languages/prolog","docId":"languages/prolog","unlisted":false},{"type":"link","label":"Pug","href":"/docs/languages/pug","docId":"languages/pug","unlisted":false},{"type":"link","label":"PurgeCSS","href":"/docs/languages/purgecss","docId":"languages/purgecss","unlisted":false},{"type":"link","label":"Python (Wasm)","href":"/docs/languages/python-wasm","docId":"languages/python-wasm","unlisted":false},{"type":"link","label":"Python","href":"/docs/languages/python","docId":"languages/python","unlisted":false},{"type":"link","label":"R","href":"/docs/languages/r","docId":"languages/r","unlisted":false},{"type":"link","label":"React Native (TSX)","href":"/docs/languages/react-native-tsx","docId":"languages/react-native-tsx","unlisted":false},{"type":"link","label":"React Native","href":"/docs/languages/react-native","docId":"languages/react-native","unlisted":false},{"type":"link","label":"React (TSX)","href":"/docs/languages/react-tsx","docId":"languages/react-tsx","unlisted":false},{"type":"link","label":"React","href":"/docs/languages/react","docId":"languages/react","unlisted":false},{"type":"link","label":"Reason","href":"/docs/languages/reason","docId":"languages/reason","unlisted":false},{"type":"link","label":"ReScript","href":"/docs/languages/rescript","docId":"languages/rescript","unlisted":false},{"type":"link","label":"Rich Text Editor","href":"/docs/languages/richtext","docId":"languages/richtext","unlisted":false},{"type":"link","label":"Riot.js","href":"/docs/languages/riot","docId":"languages/riot","unlisted":false},{"type":"link","label":"Ruby (Wasm)","href":"/docs/languages/ruby-wasm","docId":"languages/ruby-wasm","unlisted":false},{"type":"link","label":"Ruby","href":"/docs/languages/ruby","docId":"languages/ruby","unlisted":false},{"type":"link","label":"Sass","href":"/docs/languages/sass","docId":"languages/sass","unlisted":false},{"type":"link","label":"Scheme","href":"/docs/languages/scheme","docId":"languages/scheme","unlisted":false},{"type":"link","label":"SCSS","href":"/docs/languages/scss","docId":"languages/scss","unlisted":false},{"type":"link","label":"Solid","href":"/docs/languages/solid","docId":"languages/solid","unlisted":false},{"type":"link","label":"Solid (TS)","href":"/docs/languages/solid.tsx","docId":"languages/solid.tsx","unlisted":false},{"type":"link","label":"SQL (SQLite)","href":"/docs/languages/sql","docId":"languages/sql","unlisted":false},{"type":"link","label":"Stencil","href":"/docs/languages/stencil","docId":"languages/stencil","unlisted":false},{"type":"link","label":"Stylis","href":"/docs/languages/stylis","docId":"languages/stylis","unlisted":false},{"type":"link","label":"Stylus","href":"/docs/languages/stylus","docId":"languages/stylus","unlisted":false},{"type":"link","label":"Sucrase","href":"/docs/languages/sucrase","docId":"languages/sucrase","unlisted":false},{"type":"link","label":"Svelte","href":"/docs/languages/svelte","docId":"languages/svelte","unlisted":false},{"type":"link","label":"Tailwind CSS","href":"/docs/languages/tailwindcss","docId":"languages/tailwindcss","unlisted":false},{"type":"link","label":"Tcl","href":"/docs/languages/tcl","docId":"languages/tcl","unlisted":false},{"type":"link","label":"Teal","href":"/docs/languages/teal","docId":"languages/teal","unlisted":false},{"type":"link","label":"Token CSS","href":"/docs/languages/tokencss","docId":"languages/tokencss","unlisted":false},{"type":"link","label":"TSX","href":"/docs/languages/tsx","docId":"languages/tsx","unlisted":false},{"type":"link","label":"Twig","href":"/docs/languages/twig","docId":"languages/twig","unlisted":false},{"type":"link","label":"TypeScript","href":"/docs/languages/typescript","docId":"languages/typescript","unlisted":false},{"type":"link","label":"UnoCSS","href":"/docs/languages/unocss","docId":"languages/unocss","unlisted":false},{"type":"link","label":"Vento","href":"/docs/languages/vento","docId":"languages/vento","unlisted":false},{"type":"link","label":"Vue SFC","href":"/docs/languages/vue","docId":"languages/vue","unlisted":false},{"type":"link","label":"Vue 2 SFC","href":"/docs/languages/vue2","docId":"languages/vue2","unlisted":false},{"type":"link","label":"WebAssembly Text","href":"/docs/languages/wat","docId":"languages/wat","unlisted":false},{"type":"link","label":"Windi CSS","href":"/docs/languages/windicss","docId":"languages/windicss","unlisted":false}],"collapsed":true,"collapsible":true,"href":"/docs/languages/"},{"type":"link","label":"Bookmarklet","href":"/docs/bookmarklet","docId":"bookmarklet","unlisted":false},{"type":"link","label":"GitHub Action \u26A1","href":"/docs/gh-action","docId":"gh-action","unlisted":false},{"type":"link","label":"Markdown to LiveCodes","href":"/docs/markdown-to-livecodes","docId":"markdown-to-livecodes","unlisted":false},{"type":"link","label":"Contribution","href":"/docs/contribution","docId":"contribution","unlisted":false},{"type":"link","label":"Credits","href":"/docs/credits","docId":"credits","unlisted":false},{"type":"link","label":"License","href":"/docs/license","docId":"license","unlisted":false},{"type":"link","label":"Sponsor","href":"/docs/sponsor","docId":"sponsor","unlisted":false},{"type":"link","label":"Contact","href":"/docs/contact","docId":"contact","unlisted":false},{"type":"link","label":"About us","href":"/docs/about","docId":"about","unlisted":false}],"collapsed":false,"href":"/docs/overview"}],"examplesSidebar":[{"type":"category","label":"Display Modes","items":[{"type":"link","label":"full","href":"/docs/examples/display-modes/full","docId":"examples/display-modes/full","unlisted":false},{"type":"link","label":"editor","href":"/docs/examples/display-modes/editor","docId":"examples/display-modes/editor","unlisted":false},{"type":"link","label":"codeblock","href":"/docs/examples/display-modes/codeblock","docId":"examples/display-modes/codeblock","unlisted":false},{"type":"link","label":"result","href":"/docs/examples/display-modes/result","docId":"examples/display-modes/result","unlisted":false}],"collapsed":true,"collapsible":true,"href":"/docs/examples/display-modes/"}]},"docs":{"about":{"id":"about","title":"About us","description":"LiveCodes is built and maintained by Hatem Hosny, and wonderful contributors.","sidebar":"docsSidebar"},"advanced/custom-settings":{"id":"advanced/custom-settings","title":"Custom Settings","description":"","sidebar":"docsSidebar"},"advanced/index":{"id":"advanced/index","title":"Advanced Topics","description":"advanced-topics-custom-content-top}","sidebar":"docsSidebar"},"advanced/services":{"id":"advanced/services","title":"Services","description":"LiveCodes (being a client-side app) uses multiple services (for example for authentication, sharing, module resolution, etc).","sidebar":"docsSidebar"},"api/functions/createPlayground":{"id":"api/functions/createPlayground","title":"Function: createPlayground()","description":"createPlayground(container, options)"},"api/functions/getPlaygroundUrl":{"id":"api/functions/getPlaygroundUrl","title":"Function: getPlaygroundUrl()","description":"getPlaygroundUrl(options): string"},"api/globals":{"id":"api/globals","title":"livecodes","description":"Modules"},"api/index":{"id":"api/index","title":"LiveCodes","description":"A Code Playground That Just Works!"},"api/interfaces/Code":{"id":"api/interfaces/Code","title":"Interface: Code","description":"An object that contains the language, content and compiled code for each of the 3 code editors"},"api/interfaces/Config":{"id":"api/interfaces/Config","title":"Interface: Config","description":"The playground configuration object."},"api/interfaces/EmbedOptions":{"id":"api/interfaces/EmbedOptions","title":"Interface: EmbedOptions","description":"An object that represents the playground embed options."},"api/interfaces/Playground":{"id":"api/interfaces/Playground","title":"Interface: Playground","description":"An object that represents the LiveCodes playground instance."},"api/internal/index":{"id":"api/internal/index","title":"\\\\_internal","description":"Index"},"api/internal/interfaces/API":{"id":"api/internal/interfaces/API","title":"Interface: API","description":"Extended by"},"api/internal/interfaces/AppConfig":{"id":"api/internal/interfaces/AppConfig","title":"Interface: AppConfig","description":"These are properties that define how the app behaves."},"api/internal/interfaces/ContentConfig":{"id":"api/internal/interfaces/ContentConfig","title":"Interface: ContentConfig","description":"The properties that define the content of the current project."},"api/internal/interfaces/EditorConfig":{"id":"api/internal/interfaces/EditorConfig","title":"Interface: EditorConfig","description":"Extended by"},"api/internal/interfaces/EditorPosition":{"id":"api/internal/interfaces/EditorPosition","title":"Interface: EditorPosition","description":"Properties"},"api/internal/interfaces/FormatterConfig":{"id":"api/internal/interfaces/FormatterConfig","title":"Interface: FormatterConfig","description":"Extended by"},"api/internal/interfaces/TestResult":{"id":"api/internal/interfaces/TestResult","title":"Interface: TestResult","description":"Properties"},"api/internal/interfaces/Types":{"id":"api/internal/interfaces/Types","title":"Interface: Types","description":"Indexable"},"api/internal/interfaces/UserConfig":{"id":"api/internal/interfaces/UserConfig","title":"Interface: UserConfig","description":"Extends"},"api/internal/type-aliases/APICommands":{"id":"api/internal/type-aliases/APICommands","title":"Type Alias: APICommands","description":"APICommands: \\"setBroadcastToken\\" \\\\| \\"showVersion\\""},"api/internal/type-aliases/AppLanguage":{"id":"api/internal/type-aliases/AppLanguage","title":"Type Alias: AppLanguage","description":"AppLanguage: \\"auto\\" \\\\| \\"ar\\" \\\\| \\"de\\" \\\\| \\"en\\" \\\\| \\"es\\" \\\\| \\"fr\\" \\\\| \\"hi\\" \\\\| \\"it\\" \\\\| \\"ja\\" \\\\| \\"pt\\" \\\\| \\"ru\\" \\\\| \\"ur\\" \\\\| \\"zh-CN\\""},"api/internal/type-aliases/CDN":{"id":"api/internal/type-aliases/CDN","title":"Type Alias: CDN","description":"CDN: \\"jspm\\" \\\\| \\"skypack\\" \\\\| \\"jsdelivr\\" \\\\| \\"fastly.jsdelivr\\" \\\\| \\"gcore.jsdelivr\\" \\\\| \\"testingcf.jsdelivr\\" \\\\| \\"jsdelivr.b-cdn\\" \\\\| \\"jsdelivr.gh\\" \\\\| \\"fastly.jsdelivr.gh\\" \\\\| \\"gcore.jsdelivr.gh\\" \\\\| \\"testingcf.jsdelivr.gh\\" \\\\| \\"jsdelivr.b-cdn.gh\\" \\\\| \\"jsdelivr.esm\\" \\\\| \\"fastly.jsdelivr.esm\\" \\\\| \\"gcore.jsdelivr.esm\\" \\\\| \\"testingcf.jsdelivr.esm\\" \\\\| \\"jsdelivr.b-cdn.esm\\" \\\\| \\"esm.run\\" \\\\| \\"esm.sh\\" \\\\| \\"esbuild\\" \\\\| \\"bundle.run\\" \\\\| \\"unpkg\\" \\\\| \\"npmcdn\\" \\\\| \\"statically\\""},"api/internal/type-aliases/CodejarTheme":{"id":"api/internal/type-aliases/CodejarTheme","title":"Type Alias: CodejarTheme","description":"CodejarTheme: \\"a11y-dark\\" \\\\| \\"atom-dark\\" \\\\| \\"base16-ateliersulphurpool-light\\" \\\\| \\"catppuccin-latte\\" \\\\| \\"catppuccin-frappe\\" \\\\| \\"catppuccin-macchiato\\" \\\\| \\"catppuccin-mocha\\" \\\\| \\"cb\\" \\\\| \\"coldark-cold\\" \\\\| \\"coldark-dark\\" \\\\| \\"coy\\" \\\\| \\"coy-without-shadows\\" \\\\| \\"darcula\\" \\\\| \\"dark\\" \\\\| \\"dracula\\" \\\\| \\"duotone-dark\\" \\\\| \\"duotone-earth\\" \\\\| \\"duotone-forest\\" \\\\| \\"duotone-light\\" \\\\| \\"duotone-sea\\" \\\\| \\"duotone-space\\" \\\\| \\"funky\\" \\\\| \\"ghcolors\\" \\\\| \\"gruvbox-dark\\" \\\\| \\"gruvbox-light\\" \\\\| \\"holi-theme\\" \\\\| \\"hopscotch\\" \\\\| \\"laserwave\\" \\\\| \\"lucario\\" \\\\| \\"material-dark\\" \\\\| \\"material-light\\" \\\\| \\"material-oceanic\\" \\\\| \\"monochrome\\" \\\\| \\"monochrome-dark\\" \\\\| \\"night-owl\\" \\\\| \\"nord\\" \\\\| \\"nord-2\\" \\\\| \\"okaidia\\" \\\\| \\"one-dark\\" \\\\| \\"one-light\\" \\\\| \\"pojoaque\\" \\\\| \\"shades-of-purple\\" \\\\| \\"solarized-dark-atom\\" \\\\| \\"solarized-light\\" \\\\| \\"synthwave84\\" \\\\| \\"tomorrow\\" \\\\| \\"twilight\\" \\\\| \\"vs\\" \\\\| \\"vsc-dark-plus\\" \\\\| \\"xonokai\\" \\\\| \\"z-touchs\\""},"api/internal/type-aliases/CodemirrorTheme":{"id":"api/internal/type-aliases/CodemirrorTheme","title":"Type Alias: CodemirrorTheme","description":"CodemirrorTheme: \\"amy\\" \\\\| \\"aura\\" \\\\| \\"ayu-light\\" \\\\| \\"barf\\" \\\\| \\"basic-light\\" \\\\| \\"basic-dark\\" \\\\| \\"bespin\\" \\\\| \\"birds-of-paradise\\" \\\\| \\"boys-and-girls\\" \\\\| \\"catppuccin-latte\\" \\\\| \\"catppuccin-frappe\\" \\\\| \\"catppuccin-macchiato\\" \\\\| \\"catppuccin-mocha\\" \\\\| \\"clouds\\" \\\\| \\"cm-light\\" \\\\| \\"cobalt\\" \\\\| \\"cool-glow\\" \\\\| \\"dracula\\" \\\\| \\"espresso\\" \\\\| \\"github-dark\\" \\\\| \\"github-light\\" \\\\| \\"gruvbox-dark\\" \\\\| \\"gruvbox-light\\" \\\\| \\"material-dark\\" \\\\| \\"material-light\\" \\\\| \\"monochrome\\" \\\\| \\"monochrome-dark\\" \\\\| \\"noctis-lilac\\" \\\\| \\"nord\\" \\\\| \\"one-dark\\" \\\\| \\"rose-pine-dawn\\" \\\\| \\"smoothy\\" \\\\| \\"solarized-light\\" \\\\| \\"solarized-dark\\" \\\\| \\"tokyo-night\\" \\\\| \\"tokyo-night-day\\" \\\\| \\"tokyo-night-storm\\" \\\\| \\"tomorrow\\""},"api/internal/type-aliases/CssPresetId":{"id":"api/internal/type-aliases/CssPresetId","title":"Type Alias: CssPresetId","description":"CssPresetId: \\"\\" \\\\| \\"normalize.css\\" \\\\| \\"reset-css\\""},"api/internal/type-aliases/EditorId":{"id":"api/internal/type-aliases/EditorId","title":"Type Alias: EditorId","description":"EditorId: \\"markup\\" \\\\| \\"style\\" \\\\| \\"script\\""},"api/internal/type-aliases/EditorTheme":{"id":"api/internal/type-aliases/EditorTheme","title":"Type Alias: EditorTheme","description":"EditorTheme$\\\\{MonacoTheme\\\\}\\\\ \\\\| \\\\codemirror$\\\\{CodejarTheme\\\\}\\\\ \\\\| \\\\monaco$\\\\{CodemirrorTheme\\\\}@$\\\\{Theme\\\\}\\\\ \\\\| \\\\codejar:$\\\\{CodejarTheme\\\\}@$\\\\{Theme\\\\}\\\\"},"api/internal/type-aliases/MonacoTheme":{"id":"api/internal/type-aliases/MonacoTheme","title":"Type Alias: MonacoTheme","description":"MonacoTheme: \\"active4d\\" \\\\| \\"all-hallows-eve\\" \\\\| \\"amy\\" \\\\| \\"birds-of-paradise\\" \\\\| \\"blackboard\\" \\\\| \\"brilliance-black\\" \\\\| \\"brilliance-dull\\" \\\\| \\"catppuccin-latte\\" \\\\| \\"catppuccin-frappe\\" \\\\| \\"catppuccin-macchiato\\" \\\\| \\"catppuccin-mocha\\" \\\\| \\"chrome-devtools\\" \\\\| \\"clouds-midnight\\" \\\\| \\"clouds\\" \\\\| \\"cobalt\\" \\\\| \\"cobalt2\\" \\\\| \\"custom-vs-light\\" \\\\| \\"custom-vs-dark\\" \\\\| \\"dawn\\" \\\\| \\"dracula\\" \\\\| \\"dreamweaver\\" \\\\| \\"eiffel\\" \\\\| \\"espresso-libre\\" \\\\| \\"github\\" \\\\| \\"github-dark\\" \\\\| \\"github-light\\" \\\\| \\"hc-black\\" \\\\| \\"hc-light\\" \\\\| \\"idle\\" \\\\| \\"idlefingers\\" \\\\| \\"iplastic\\" \\\\| \\"katzenmilch\\" \\\\| \\"krtheme\\" \\\\| \\"kuroir\\" \\\\| \\"lazy\\" \\\\| \\"magicwb-amiga\\" \\\\| \\"merbivore-soft\\" \\\\| \\"merbivore\\" \\\\| \\"monochrome\\" \\\\| \\"monochrome-dark\\" \\\\| \\"monokai\\" \\\\| \\"monokai-bright\\" \\\\| \\"monoindustrial\\" \\\\| \\"night-owl\\" \\\\| \\"nord\\" \\\\| \\"oceanic-next\\" \\\\| \\"pastels-on-dark\\" \\\\| \\"slush-and-poppies\\" \\\\| \\"solarized-dark\\" \\\\| \\"solarized-light\\" \\\\| \\"spacecadet\\" \\\\| \\"sunburst\\" \\\\| \\"textmate-mac-classic\\" \\\\| \\"tomorrow\\" \\\\| \\"tomorrow-night\\" \\\\| \\"tomorrow-night-blue\\" \\\\| \\"tomorrow-night-bright\\" \\\\| \\"tomorrow-night-eighties\\" \\\\| \\"twilight\\" \\\\| \\"upstream-sunburst\\" \\\\| \\"vibrant-ink\\" \\\\| \\"vs\\" \\\\| \\"vs-dark\\" \\\\| \\"xcode-default\\" \\\\| \\"zenburnesque\\""},"api/internal/type-aliases/Processor":{"id":"api/internal/type-aliases/Processor","title":"Type Alias: Processor","description":"Processor: \\"postcss\\" \\\\| \\"postcssImportUrl\\" \\\\| \\"tailwindcss\\" \\\\| \\"windicss\\" \\\\| \\"unocss\\" \\\\| \\"tokencss\\" \\\\| \\"lightningcss\\" \\\\| \\"autoprefixer\\" \\\\| \\"postcssPresetEnv\\" \\\\| \\"cssmodules\\" \\\\| \\"purgecss\\" \\\\| \\"cssnano\\""},"api/internal/type-aliases/TemplateName":{"id":"api/internal/type-aliases/TemplateName","title":"Type Alias: TemplateName","description":"TemplateName: \\"blank\\" \\\\| \\"javascript\\" \\\\| \\"typescript\\" \\\\| \\"react\\" \\\\| \\"react-native\\" \\\\| \\"vue2\\" \\\\| \\"vue\\" \\\\| \\"angular\\" \\\\| \\"preact\\" \\\\| \\"svelte\\" \\\\| \\"solid\\" \\\\| \\"lit\\" \\\\| \\"stencil\\" \\\\| \\"mdx\\" \\\\| \\"astro\\" \\\\| \\"riot\\" \\\\| \\"malina\\" \\\\| \\"jquery\\" \\\\| \\"backbone\\" \\\\| \\"knockout\\" \\\\| \\"jest\\" \\\\| \\"jest-react\\" \\\\| \\"bootstrap\\" \\\\| \\"tailwindcss\\" \\\\| \\"shadcn-ui\\" \\\\| \\"daisyui\\" \\\\| \\"d3\\" \\\\| \\"phaser\\" \\\\| \\"coffeescript\\" \\\\| \\"livescript\\" \\\\| \\"civet\\" \\\\| \\"clio\\" \\\\| \\"imba\\" \\\\| \\"rescript\\" \\\\| \\"reason\\" \\\\| \\"ocaml\\" \\\\| \\"python\\" \\\\| \\"pyodide\\" \\\\| \\"python-wasm\\" \\\\| \\"r\\" \\\\| \\"ruby\\" \\\\| \\"ruby-wasm\\" \\\\| \\"go\\" \\\\| \\"php\\" \\\\| \\"php-wasm\\" \\\\| \\"cpp\\" \\\\| \\"clang\\" \\\\| \\"cpp-wasm\\" \\\\| \\"java\\" \\\\| \\"csharp-wasm\\" \\\\| \\"perl\\" \\\\| \\"lua\\" \\\\| \\"lua-wasm\\" \\\\| \\"teal\\" \\\\| \\"fennel\\" \\\\| \\"julia\\" \\\\| \\"scheme\\" \\\\| \\"commonlisp\\" \\\\| \\"clojurescript\\" \\\\| \\"gleam\\" \\\\| \\"tcl\\" \\\\| \\"markdown\\" \\\\| \\"assemblyscript\\" \\\\| \\"wat\\" \\\\| \\"sql\\" \\\\| \\"postgresql\\" \\\\| \\"prolog\\" \\\\| \\"blockly\\" \\\\| \\"diagrams\\""},"api/internal/type-aliases/Theme":{"id":"api/internal/type-aliases/Theme","title":"Type Alias: Theme","description":"Theme: \\"light\\" \\\\| \\"dark\\""},"api/internal/type-aliases/ToolsPaneStatus":{"id":"api/internal/type-aliases/ToolsPaneStatus","title":"Type Alias: ToolsPaneStatus","description":"ToolsPaneStatus: \\"closed\\" \\\\| \\"open\\" \\\\| \\"full\\" \\\\| \\"none\\" \\\\| \\"\\""},"api/internal/type-aliases/WatchCode":{"id":"api/internal/type-aliases/WatchCode","title":"Type Alias: WatchCode()","description":"WatchCode: (event, fn) => object"},"api/internal/type-aliases/WatchConsole":{"id":"api/internal/type-aliases/WatchConsole","title":"Type Alias: WatchConsole()","description":"WatchConsole: (event, fn) => object"},"api/internal/type-aliases/WatchDestroy":{"id":"api/internal/type-aliases/WatchDestroy","title":"Type Alias: WatchDestroy()","description":"WatchDestroy: (event, fn) => object"},"api/internal/type-aliases/WatchLoad":{"id":"api/internal/type-aliases/WatchLoad","title":"Type Alias: WatchLoad()","description":"WatchLoad: (event, fn) => object"},"api/internal/type-aliases/WatchReady":{"id":"api/internal/type-aliases/WatchReady","title":"Type Alias: WatchReady()","description":"WatchReady: (event, fn) => object"},"api/internal/type-aliases/WatchTests":{"id":"api/internal/type-aliases/WatchTests","title":"Type Alias: WatchTests()","description":"WatchTests: (event, fn) => object"},"api/type-aliases/Language":{"id":"api/type-aliases/Language","title":"Type Alias: Language","description":"Language: \\"html\\" \\\\| \\"htm\\" \\\\| \\"markdown\\" \\\\| \\"md\\" \\\\| \\"mdown\\" \\\\| \\"mkdn\\" \\\\| \\"mdx\\" \\\\| \\"astro\\" \\\\| \\"pug\\" \\\\| \\"jade\\" \\\\| \\"haml\\" \\\\| \\"asciidoc\\" \\\\| \\"adoc\\" \\\\| \\"asc\\" \\\\| \\"mustache\\" \\\\| \\"handlebars\\" \\\\| \\"hbs\\" \\\\| \\"ejs\\" \\\\| \\"eta\\" \\\\| \\"nunjucks\\" \\\\| \\"njk\\" \\\\| \\"liquid\\" \\\\| \\"liquidjs\\" \\\\| \\"dot\\" \\\\| \\"twig\\" \\\\| \\"vento\\" \\\\| \\"vto\\" \\\\| \\"art-template\\" \\\\| \\"art\\" \\\\| \\"jinja\\" \\\\| \\"bbcode\\" \\\\| \\"bb\\" \\\\| \\"mjml\\" \\\\| \\"diagrams\\" \\\\| \\"diagram\\" \\\\| \\"graph\\" \\\\| \\"plt\\" \\\\| \\"richtext\\" \\\\| \\"rte\\" \\\\| \\"rich\\" \\\\| \\"rte.html\\" \\\\| \\"css\\" \\\\| \\"scss\\" \\\\| \\"sass\\" \\\\| \\"less\\" \\\\| \\"stylus\\" \\\\| \\"styl\\" \\\\| \\"stylis\\" \\\\| \\"postcss\\" \\\\| \\"javascript\\" \\\\| \\"js\\" \\\\| \\"json\\" \\\\| \\"babel\\" \\\\| \\"es\\" \\\\| \\"sucrase\\" \\\\| \\"typescript\\" \\\\| \\"flow\\" \\\\| \\"ts\\" \\\\| \\"jsx\\" \\\\| \\"tsx\\" \\\\| \\"react\\" \\\\| \\"react-jsx\\" \\\\| \\"react.jsx\\" \\\\| \\"react-tsx\\" \\\\| \\"react.tsx\\" \\\\| \\"react-native\\" \\\\| \\"react-native.jsx\\" \\\\| \\"react-native-tsx\\" \\\\| \\"react-native.tsx\\" \\\\| \\"vue\\" \\\\| \\"vue3\\" \\\\| \\"vue2\\" \\\\| \\"vue-app\\" \\\\| \\"app.vue\\" \\\\| \\"svelte\\" \\\\| \\"svelte-app\\" \\\\| \\"app.svelte\\" \\\\| \\"stencil\\" \\\\| \\"stencil.tsx\\" \\\\| \\"solid\\" \\\\| \\"solid.jsx\\" \\\\| \\"solid.tsx\\" \\\\| \\"riot\\" \\\\| \\"riotjs\\" \\\\| \\"malina\\" \\\\| \\"malinajs\\" \\\\| \\"xht\\" \\\\| \\"coffeescript\\" \\\\| \\"coffee\\" \\\\| \\"livescript\\" \\\\| \\"ls\\" \\\\| \\"civet\\" \\\\| \\"clio\\" \\\\| \\"imba\\" \\\\| \\"assemblyscript\\" \\\\| \\"as\\" \\\\| \\"python\\" \\\\| \\"py\\" \\\\| \\"pyodide\\" \\\\| \\"python-wasm\\" \\\\| \\"py-wasm\\" \\\\| \\"pythonwasm\\" \\\\| \\"pywasm\\" \\\\| \\"py3\\" \\\\| \\"wasm.py\\" \\\\| \\"r\\" \\\\| \\"rlang\\" \\\\| \\"rstats\\" \\\\| \\"r-wasm\\" \\\\| \\"ruby\\" \\\\| \\"rb\\" \\\\| \\"ruby-wasm\\" \\\\| \\"wasm.rb\\" \\\\| \\"rubywasm\\" \\\\| \\"go\\" \\\\| \\"golang\\" \\\\| \\"php\\" \\\\| \\"php-wasm\\" \\\\| \\"phpwasm\\" \\\\| \\"wasm.php\\" \\\\| \\"cpp\\" \\\\| \\"c\\" \\\\| \\"C\\" \\\\| \\"cp\\" \\\\| \\"cxx\\" \\\\| \\"c++\\" \\\\| \\"cppm\\" \\\\| \\"ixx\\" \\\\| \\"ii\\" \\\\| \\"hpp\\" \\\\| \\"h\\" \\\\| \\"cpp-wasm\\" \\\\| \\"cppwasm\\" \\\\| \\"cwasm\\" \\\\| \\"wasm.cpp\\" \\\\| \\"clang\\" \\\\| \\"clang.cpp\\" \\\\| \\"java\\" \\\\| \\"csharp\\" \\\\| \\"csharp-wasm\\" \\\\| \\"cs\\" \\\\| \\"cs-wasm\\" \\\\| \\"wasm.cs\\" \\\\| \\"perl\\" \\\\| \\"pl\\" \\\\| \\"pm\\" \\\\| \\"lua\\" \\\\| \\"lua-wasm\\" \\\\| \\"luawasm\\" \\\\| \\"wasm.lua\\" \\\\| \\"teal\\" \\\\| \\"tl\\" \\\\| \\"fennel\\" \\\\| \\"fnl\\" \\\\| \\"julia\\" \\\\| \\"jl\\" \\\\| \\"scheme\\" \\\\| \\"scm\\" \\\\| \\"commonlisp\\" \\\\| \\"common-lisp\\" \\\\| \\"lisp\\" \\\\| \\"clojurescript\\" \\\\| \\"clojure\\" \\\\| \\"cljs\\" \\\\| \\"clj\\" \\\\| \\"cljc\\" \\\\| \\"edn\\" \\\\| \\"gleam\\" \\\\| \\"rescript\\" \\\\| \\"res\\" \\\\| \\"resi\\" \\\\| \\"reason\\" \\\\| \\"re\\" \\\\| \\"rei\\" \\\\| \\"ocaml\\" \\\\| \\"ml\\" \\\\| \\"mli\\" \\\\| \\"tcl\\" \\\\| \\"wat\\" \\\\| \\"wast\\" \\\\| \\"webassembly\\" \\\\| \\"wasm\\" \\\\| \\"Binary\\" \\\\| \\"sql\\" \\\\| \\"sqlite\\" \\\\| \\"sqlite3\\" \\\\| \\"pg.sql\\" \\\\| \\"pgsql.sql\\" \\\\| \\"pgsql\\" \\\\| \\"pg\\" \\\\| \\"pglite\\" \\\\| \\"pglite.sql\\" \\\\| \\"postgresql\\" \\\\| \\"postgres\\" \\\\| \\"postgre.sql\\" \\\\| \\"postgresql.sql\\" \\\\| \\"prolog.pl\\" \\\\| \\"prolog\\" \\\\| \\"blockly\\" \\\\| \\"blockly.xml\\" \\\\| \\"xml\\" \\\\| \\"pintora\\""},"bookmarklet":{"id":"bookmarklet","title":"Bookmarklet","description":"LiveCodes allows importing code from a wide variety of sources.","sidebar":"docsSidebar"},"configuration/configuration-object":{"id":"configuration/configuration-object","title":"Configuration Object","description":"LiveCodes is very flexible and provides a wide range of configuration options.","sidebar":"docsSidebar"},"configuration/index":{"id":"configuration/index","title":"Configuration","description":"LiveCodes is very flexible and provides a wide range of configuration options.","sidebar":"docsSidebar"},"configuration/query-params":{"id":"configuration/query-params","title":"Query Parameters","description":"A flexible and convenient way to configure the app is to use URL query parameters.","sidebar":"docsSidebar"},"contact":{"id":"contact","title":"Contact","description":"contact-custom-content-none}","sidebar":"docsSidebar"},"contribution":{"id":"contribution","title":"Contribution","description":"Contributions are always welcome, no matter how large or small. Before contributing,","sidebar":"docsSidebar"},"contribution/adding-languages":{"id":"contribution/adding-languages","title":"Adding Languages","description":"Criteria for a new language"},"contribution/i18n":{"id":"contribution/i18n","title":"i18n","description":"This document provides a guide on how to contribute to the translation of the app."},"contribution/release":{"id":"contribution/release","title":"Release","description":"To start a new release:"},"credits":{"id":"credits","title":"Credits","description":"Services","sidebar":"docsSidebar"},"examples/display-modes/codeblock":{"id":"examples/display-modes/codeblock","title":"codeblock","description":"","sidebar":"examplesSidebar"},"examples/display-modes/editor":{"id":"examples/display-modes/editor","title":"editor","description":"","sidebar":"examplesSidebar"},"examples/display-modes/full":{"id":"examples/display-modes/full","title":"full","description":"","sidebar":"examplesSidebar"},"examples/display-modes/index":{"id":"examples/display-modes/index","title":"Display Modes","description":"","sidebar":"examplesSidebar"},"examples/display-modes/result":{"id":"examples/display-modes/result","title":"result","description":"","sidebar":"examplesSidebar"},"features/ai":{"id":"features/ai","title":"AI Code Assistant \uD83E\uDE84","description":"LiveCodes supports AI-powered code completion, totally for free with no account or API token required, using Codeium, the ultrafast Copilot alternative. This can be easily enabled from the UI (as easy as flipping a switch!)","sidebar":"docsSidebar"},"features/assets":{"id":"features/assets","title":"Assets","description":"Adding local assets (e.g. images, fonts, stylesheets, scripts) that are not hosted online is such a common need that a UI was developed to allow easily adding them.","sidebar":"docsSidebar"},"features/backup-restore":{"id":"features/backup-restore","title":"Backup / Restore","description":"LiveCodes data can be backed-up, so that it can be later restored on the same or different device.","sidebar":"docsSidebar"},"features/broadcast":{"id":"features/broadcast","title":"Broadcast","description":"Overview","sidebar":"docsSidebar"},"features/code-format":{"id":"features/code-format","title":"Code Format","description":"Code formatting is supported for most languages.","sidebar":"docsSidebar"},"features/code-prefill":{"id":"features/code-prefill","title":"Code Prefill","description":"There are many ways to pre-fill code into playgrounds. This is generally achieved either by the SDK or using query params.","sidebar":"docsSidebar"},"features/code-to-image":{"id":"features/code-to-image","title":"Code to Image","description":"LiveCodes has a feature called \\"Code to Image\\" that allows converting the code in the code editor into nice-looking images (or code screenshots), that can be downloaded or shared.","sidebar":"docsSidebar"},"features/command-menu":{"id":"features/command-menu","title":"Command Menu","description":"The command menu allows running a large set of commands from the UI. It is keyboard-friendly and allows for searching and selecting commands. Most of the functionality of LiveCodes can be achieved using the command menu, which can really improve productivity and DX.","sidebar":"docsSidebar"},"features/compiled-code":{"id":"features/compiled-code","title":"Compiled Code","description":"The resulting compiled/transpiled code can be seen in the compiled code viewer (in the tools pane) in real-time, as you type. This works for all compiled code (e.g. Markdown, Pug, SCSS, Less, Stylus, Typescript, CoffeeScript, ...etc.).","sidebar":"docsSidebar"},"features/console":{"id":"features/console","title":"Console","description":"Console messages are shown in the integrated console (in the tools pane, below the result page), without having to open the native browser console.","sidebar":"docsSidebar"},"features/css":{"id":"features/css","title":"CSS","description":"The result page can be styled with CSS using various methods, including:","sidebar":"docsSidebar"},"features/data-urls":{"id":"features/data-urls","title":"Data URLs","description":"Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents.","sidebar":"docsSidebar"},"features/default-template-language":{"id":"features/default-template-language","title":"Default Template/Language","description":"When the app is loaded, by default, the last used language is selected.","sidebar":"docsSidebar"},"features/default-view":{"id":"features/default-view","title":"Default View","description":"The playground can be loaded in one of the following views:","sidebar":"docsSidebar"},"features/deploy":{"id":"features/deploy","title":"Deploy","description":"The result page (of any number of projects) can be deployed and hosted at GitHub Pages (a free service from GitHub for hosting static websites). This requires login with a GitHub account.","sidebar":"docsSidebar"},"features/display-modes":{"id":"features/display-modes","title":"Display Modes","description":"The configuration option mode, also available as query param, can be used to select different display modes.","sidebar":"docsSidebar"},"features/editor-settings":{"id":"features/editor-settings","title":"Editor Settings","description":"LiveCodes allows a lot of flexibility for configuring which code editor to use and its settings.","sidebar":"docsSidebar"},"features/embeds":{"id":"features/embeds","title":"Embedded Playgrounds","description":"Overview","sidebar":"docsSidebar"},"features/emmet":{"id":"features/emmet","title":"Emmet Support","description":""},"features/export":{"id":"features/export","title":"Export","description":"Exporting A Single Project","sidebar":"docsSidebar"},"features/external-resources":{"id":"features/external-resources","title":"External Resources","description":"Stylesheets and Scripts","sidebar":"docsSidebar"},"features/github-integration":{"id":"features/github-integration","title":"GitHub Integration","description":"Generally, LiveCodes can be used anonymously without any accounts. This includes importing code from GitHub gists or public repos.","sidebar":"docsSidebar"},"features/i18n":{"id":"features/i18n","title":"Internationalization (i18n)","description":"LiveCodes currently supports UI internationalization. By default, the UI language will be automatically detected based on your browser settings.","sidebar":"docsSidebar"},"features/import":{"id":"features/import","title":"Import","description":"Overview","sidebar":"docsSidebar"},"features/index":{"id":"features/index","title":"Features","description":"Overview","sidebar":"docsSidebar"},"features/integrations":{"id":"features/integrations","title":"Integrations","description":"","sidebar":"docsSidebar"},"features/intellisense":{"id":"features/intellisense","title":"IntelliSense","description":"The code editor provides a rich experience with intellisense and autocompletion. Many of the features required for this are based on TypeScript types that are either inferred by the editor or supplied as data definition files.","sidebar":"docsSidebar"},"features/keyboard-shortcuts":{"id":"features/keyboard-shortcuts","title":"Keyboard Shortcuts","description":"Many commands can be executed from the keyboard using keyboard shortcuts. The full list can be found in the Keyboard Shortcuts screen, which can be accessed from the Help Menu or from the command menu by pressing Ctrl + K (or \u2318 + K on Mac) and searching for \\"Keyboard Shortcuts\\".","sidebar":"docsSidebar"},"features/lite":{"id":"features/lite","title":"Lite Mode","description":"In case you need to embed a playground in your web page to show case some code and expect users to mainly read through the code and to have just minor edits, it would be an overkill to load full-blown code editors with auto-complete and code formatting, specially if you want to embed more than one playground in the same page. That\'s why the LiveCodes playground has a lite mode.","sidebar":"docsSidebar"},"features/mobile":{"id":"features/mobile","title":"Mobile Support","description":"LiveCodes provides a responsive layout that adapts to different screen sizes. Don\'t wait to be on your desk. Try your ideas on the go!","sidebar":"docsSidebar"},"features/module-resolution":{"id":"features/module-resolution","title":"Module Resolution","description":"NPM Modules","sidebar":"docsSidebar"},"features/permanent-url":{"id":"features/permanent-url","title":"Permanent URL","description":"Any specific version of LiveCodes app can be accessed through the permanent unique URL:","sidebar":"docsSidebar"},"features/projects":{"id":"features/projects","title":"Projects","description":"A LiveCodes project is a combination of markup, styles & scripts that result in a single web page. Check the section about the Result Page to have more details about how this page is constructed.","sidebar":"docsSidebar"},"features/read-only":{"id":"features/read-only","title":"Read-Only","description":"In case you need to embed a playground in your web page to show case some code and want users to read through the code and not allow edits, you may use the readonly setting.","sidebar":"docsSidebar"},"features/recover":{"id":"features/recover","title":"Recover Unsaved","description":"","sidebar":"docsSidebar"},"features/result":{"id":"features/result","title":"Result Page","description":"The output of a LiveCodes project is a single HTML page. This includes the (compiled) code from editors (markup + style + script) and external resources (CSS + JS), in addition to customizations specified in custom settings.","sidebar":"docsSidebar"},"features/security":{"id":"features/security","title":"Security","description":"User privacy and security are taken seriously.","sidebar":"docsSidebar"},"features/self-hosting":{"id":"features/self-hosting","title":"Self-Hosting","description":"The LiveCodes app can be self-hosted on any static file server or CDN.","sidebar":"docsSidebar"},"features/share":{"id":"features/share","title":"Share","description":"It is easy to share LiveCodes projects!","sidebar":"docsSidebar"},"features/snippets":{"id":"features/snippets","title":"Code Snippets","description":"LiveCodes supports saving and organizing code snippets in different languages.","sidebar":"docsSidebar"},"features/sync":{"id":"features/sync","title":"Sync","description":"LiveCodes local data can be synchronized to a GitHub repo. This can be used as a cloud backup, and to synchronize multiple devices.","sidebar":"docsSidebar"},"features/templates":{"id":"features/templates","title":"Templates","description":"A new project can be based on any of the provided starter templates or user templates.","sidebar":"docsSidebar"},"features/tests":{"id":"features/tests","title":"Tests","description":"Overview","sidebar":"docsSidebar"},"features/themes":{"id":"features/themes","title":"Themes","description":"LiveCodes comes with dark and light themes. In addition, a theme color can be set to change the app color.","sidebar":"docsSidebar"},"features/tools-pane":{"id":"features/tools-pane","title":"Tools Pane","description":"The resizeable tools pane (below the result page) provides an area for developer tools. This currently includes:","sidebar":"docsSidebar"},"features/user-management":{"id":"features/user-management","title":"User Management","description":"Generally, LiveCodes can be used anonymously without any accounts. This includes creating/saving projects and importing code from GitHub gists or public repos.","sidebar":"docsSidebar"},"features/user-settings":{"id":"features/user-settings","title":"User Settings","description":"A user can select various settings that are stored locally in the browser and are subsequently used.","sidebar":"docsSidebar"},"features/welcome":{"id":"features/welcome","title":"Welcome Screen","description":"","sidebar":"docsSidebar"},"getting-started":{"id":"getting-started","title":"Getting Started","description":"There are multiple options:","sidebar":"docsSidebar"},"gh-action":{"id":"gh-action","title":"GitHub Action \u26A1","description":"The Preview in LiveCodes GitHub Action generates preview links to playgrounds for code changes in pull requests and posts them as pull request comments.","sidebar":"docsSidebar"},"languages/art-template":{"id":"languages/art-template","title":"art-template","description":"art-template is a high performance JavaScript templating engine.","sidebar":"docsSidebar"},"languages/asciidoc":{"id":"languages/asciidoc","title":"AsciiDoc","description":"AsciiDoc is a plain text markup language for writing technical content. It\u2019s packed with semantic elements and equipped with features to modularize and reuse content. AsciiDoc content can be composed using a text editor, managed in a version control system, and published to multiple output formats.","sidebar":"docsSidebar"},"languages/assemblyscript":{"id":"languages/assemblyscript","title":"AssemblyScript","description":"TODO...","sidebar":"docsSidebar"},"languages/astro":{"id":"languages/astro","title":"Astro","description":"TODO...","sidebar":"docsSidebar"},"languages/autoprefixer":{"id":"languages/autoprefixer","title":"Autoprefixer","description":"TODO...","sidebar":"docsSidebar"},"languages/babel":{"id":"languages/babel","title":"Babel","description":"Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.","sidebar":"docsSidebar"},"languages/bbcode":{"id":"languages/bbcode","title":"BBCode","description":"BBCode (\\"Bulletin Board Code\\") is a lightweight markup language used to format messages in many Internet forum software.","sidebar":"docsSidebar"},"languages/blockly":{"id":"languages/blockly","title":"Blockly","description":"TODO...","sidebar":"docsSidebar"},"languages/civet":{"id":"languages/civet","title":"Civet","description":"TODO...","sidebar":"docsSidebar"},"languages/clio":{"id":"languages/clio","title":"Clio","description":"TODO...","sidebar":"docsSidebar"},"languages/clojurescript":{"id":"languages/clojurescript","title":"ClojureScript","description":"ClojureScript is a robust, practical, and fast programming language with a set of useful features that together form a simple, coherent, and powerful tool.","sidebar":"docsSidebar"},"languages/coffeescript":{"id":"languages/coffeescript","title":"CoffeeScript","description":"CoffeeScript is a little language that compiles into JavaScript.","sidebar":"docsSidebar"},"languages/commonlisp":{"id":"languages/commonlisp","title":"Common Lisp","description":"Common Lisp is a dialect of the Lisp programming language.","sidebar":"docsSidebar"},"languages/cpp":{"id":"languages/cpp","title":"C++","description":"TODO...","sidebar":"docsSidebar"},"languages/cpp-wasm":{"id":"languages/cpp-wasm","title":"C/C++ (Wasm)","description":"TODO...","sidebar":"docsSidebar"},"languages/csharp-wasm":{"id":"languages/csharp-wasm","title":"C# (Wasm)","description":"(Wasm)","sidebar":"docsSidebar"},"languages/css":{"id":"languages/css","title":"CSS","description":"TODO...","sidebar":"docsSidebar"},"languages/cssmodules":{"id":"languages/cssmodules","title":"CSS Modules","description":"A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.","sidebar":"docsSidebar"},"languages/cssnano":{"id":"languages/cssnano","title":"cssnano","description":"TODO...","sidebar":"docsSidebar"},"languages/diagrams":{"id":"languages/diagrams","title":"Diagrams","description":"Overview","sidebar":"docsSidebar"},"languages/dot":{"id":"languages/dot","title":"doT","description":"doT: The fastest + concise javascript template engine for Node.js and browsers.","sidebar":"docsSidebar"},"languages/ejs":{"id":"languages/ejs","title":"EJS","description":"Embedded JavaScript templating.","sidebar":"docsSidebar"},"languages/eta":{"id":"languages/eta","title":"Eta","description":"Eta is an embedded JS template engine for Node, Deno, and the browser. Lighweight, fast, and pluggable. Written in TypeScript.","sidebar":"docsSidebar"},"languages/fennel":{"id":"languages/fennel","title":"Fennel","description":"Fennel is a programming language that brings together the speed, simplicity, and reach of Lua with the flexibility of a lisp syntax and macro system.","sidebar":"docsSidebar"},"languages/flow":{"id":"languages/flow","title":"Flow","description":"TODO...","sidebar":"docsSidebar"},"languages/gleam":{"id":"languages/gleam","title":"Gleam","description":"Gleam is a friendly language for building type-safe systems that scale!","sidebar":"docsSidebar"},"languages/go":{"id":"languages/go","title":"Go (Golang)","description":"TODO...","sidebar":"docsSidebar"},"languages/haml":{"id":"languages/haml","title":"Haml","description":"Haml compiler for client side javascript view templates using clientside-haml-js.","sidebar":"docsSidebar"},"languages/handlebars":{"id":"languages/handlebars","title":"Handlebars","description":"Handlebars: Minimal templating on steroids.","sidebar":"docsSidebar"},"languages/html":{"id":"languages/html","title":"HTML","description":"HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It defines the structure and content of web pages.","sidebar":"docsSidebar"},"languages/imba":{"id":"languages/imba","title":"Imba","description":"TODO...","sidebar":"docsSidebar"},"languages/index":{"id":"languages/index","title":"Languages","description":"Overview","sidebar":"docsSidebar"},"languages/java":{"id":"languages/java","title":"Java","description":"Java is a high-level, general-purpose, memory-safe, object-oriented programming language.","sidebar":"docsSidebar"},"languages/javascript":{"id":"languages/javascript","title":"JavaScript","description":"TODO...","sidebar":"docsSidebar"},"languages/jinja":{"id":"languages/jinja","title":"Jinja","description":"Jinja is a fast, expressive, extensible templating engine. Special placeholders in the template allow writing code similar to Python syntax. Then the template is passed data to render the final document.","sidebar":"docsSidebar"},"languages/jsx":{"id":"languages/jsx","title":"JSX","description":"JSX is a syntax extension for JavaScript that allows writing HTML-like markup inside JavaScript.","sidebar":"docsSidebar"},"languages/julia":{"id":"languages/julia","title":"Julia","description":"TODO...","sidebar":"docsSidebar"},"languages/less":{"id":"languages/less","title":"Less","description":"TODO...","sidebar":"docsSidebar"},"languages/lightningcss":{"id":"languages/lightningcss","title":"Lightning CSS","description":"TODO...","sidebar":"docsSidebar"},"languages/liquid":{"id":"languages/liquid","title":"Liquid","description":"LiquidJS: A simple, expressive and safe template engine.","sidebar":"docsSidebar"},"languages/livescript":{"id":"languages/livescript","title":"LiveScript","description":"TODO...","sidebar":"docsSidebar"},"languages/lua":{"id":"languages/lua","title":"Lua","description":"Lua is a powerful, efficient, lightweight, embeddable scripting language. It supports procedural programming, object-oriented programming, functional programming, data-driven programming, and data description.","sidebar":"docsSidebar"},"languages/lua-wasm":{"id":"languages/lua-wasm","title":"Lua (Wasm)","description":"Lua is a powerful, efficient, lightweight, embeddable scripting language. It supports procedural programming, object-oriented programming, functional programming, data-driven programming, and data description.","sidebar":"docsSidebar"},"languages/malina":{"id":"languages/malina","title":"Malina.js","description":"TODO...","sidebar":"docsSidebar"},"languages/markdown":{"id":"languages/markdown","title":"Markdown","description":"TODO...","sidebar":"docsSidebar"},"languages/mdx":{"id":"languages/mdx","title":"MDX","description":"TODO...","sidebar":"docsSidebar"},"languages/mjml":{"id":"languages/mjml","title":"MJML","description":"MJML is a markup language designed to reduce the pain of coding a responsive email.","sidebar":"docsSidebar"},"languages/mustache":{"id":"languages/mustache","title":"Mustache","description":"Mustache: Logic-less templates.","sidebar":"docsSidebar"},"languages/nunjucks":{"id":"languages/nunjucks","title":"Nunjucks","description":"Nunjucks is a rich and powerful templating language for JavaScript.","sidebar":"docsSidebar"},"languages/ocaml":{"id":"languages/ocaml","title":"OCaml","description":"TODO...","sidebar":"docsSidebar"},"languages/perl":{"id":"languages/perl","title":"Perl","description":"TODO...","sidebar":"docsSidebar"},"languages/php":{"id":"languages/php","title":"PHP","description":"PHP running client-side in the browser using Uniter.","sidebar":"docsSidebar"},"languages/php-wasm":{"id":"languages/php-wasm","title":"PHP (Wasm)","description":"PHP in Browser, powered by WebAssembly (using php-wasm).","sidebar":"docsSidebar"},"languages/postcss":{"id":"languages/postcss","title":"PostCSS","description":"TODO...","sidebar":"docsSidebar"},"languages/postcssImportUrl":{"id":"languages/postcssImportUrl","title":"Import Url","description":"TODO...","sidebar":"docsSidebar"},"languages/postcssPresetEnv":{"id":"languages/postcssPresetEnv","title":"Preset Env","description":"TODO...","sidebar":"docsSidebar"},"languages/postgresql":{"id":"languages/postgresql","title":"PostgreSQL","description":"PostgreSQL is a powerful, open source object-relational database system. LiveCodes runs PostgreSQL in the browser using PGlite (lightweight Postgres packaged as Wasm).","sidebar":"docsSidebar"},"languages/prolog":{"id":"languages/prolog","title":"Prolog","description":"TODO...","sidebar":"docsSidebar"},"languages/pug":{"id":"languages/pug","title":"Pug","description":"Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. It was formerly known as \\"Jade\\".","sidebar":"docsSidebar"},"languages/purgecss":{"id":"languages/purgecss","title":"PurgeCSS","description":"TODO...","sidebar":"docsSidebar"},"languages/python":{"id":"languages/python","title":"Python","description":"LiveCodes can run Python in the browser using Brython, a Python 3 implementation for client-side web programming.","sidebar":"docsSidebar"},"languages/python-wasm":{"id":"languages/python-wasm","title":"Python (Wasm)","description":"Pyodide is a Python distribution for the browser and Node.js based on WebAssembly.","sidebar":"docsSidebar"},"languages/r":{"id":"languages/r","title":"R","description":"LiveCodes runs R statistical programming language in the browser using WebR.","sidebar":"docsSidebar"},"languages/react":{"id":"languages/react","title":"React","description":"React Compiler is a build-time only tool that automatically optimizes React apps.","sidebar":"docsSidebar"},"languages/react-native":{"id":"languages/react-native","title":"React Native","description":"React Native is a framework for building mobile apps using React and React Native. React Native support in LiveCodes is achieved by using React Native for Web (an accessible implementation of React Native\'s Components and APIs that is interoperable with React DOM).","sidebar":"docsSidebar"},"languages/react-native-tsx":{"id":"languages/react-native-tsx","title":"React Native (TSX)","description":"React Native is a framework for building mobile apps using React and React Native. React Native support in LiveCodes is achieved by using React Native for Web (an accessible implementation of React Native\'s Components and APIs that is interoperable with React DOM).","sidebar":"docsSidebar"},"languages/react-tsx":{"id":"languages/react-tsx","title":"React (TSX)","description":"TSX is a syntax that allows using TypeScript in JSX.","sidebar":"docsSidebar"},"languages/reason":{"id":"languages/reason","title":"Reason","description":"TODO...","sidebar":"docsSidebar"},"languages/rescript":{"id":"languages/rescript","title":"ReScript","description":"TODO...","sidebar":"docsSidebar"},"languages/richtext":{"id":"languages/richtext","title":"Rich Text Editor","description":"TODO...","sidebar":"docsSidebar"},"languages/riot":{"id":"languages/riot","title":"Riot.js","description":"TODO...","sidebar":"docsSidebar"},"languages/ruby":{"id":"languages/ruby","title":"Ruby","description":"Ruby is a dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.","sidebar":"docsSidebar"},"languages/ruby-wasm":{"id":"languages/ruby-wasm","title":"Ruby (Wasm)","description":"Ruby is a dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.","sidebar":"docsSidebar"},"languages/sass":{"id":"languages/sass","title":"Sass","description":"TODO...","sidebar":"docsSidebar"},"languages/scheme":{"id":"languages/scheme","title":"Scheme","description":"Scheme is a classic programming language in the Lisp family. It emphasizes functional programming and domain-specific languages but adapts to other styles.","sidebar":"docsSidebar"},"languages/scss":{"id":"languages/scss","title":"SCSS","description":"TODO...","sidebar":"docsSidebar"},"languages/solid":{"id":"languages/solid","title":"Solid","description":"Solid is a JavaScript framework for making interactive web applications.","sidebar":"docsSidebar"},"languages/solid.tsx":{"id":"languages/solid.tsx","title":"Solid (TS)","description":"Solid is a JavaScript framework for making interactive web applications.","sidebar":"docsSidebar"},"languages/sql":{"id":"languages/sql","title":"SQL (SQLite)","description":"SQLite is a small, fast, self-contained, high-reliability, full-featured, SQL database engine. LiveCodes runs SQLite (compiled to Wasm) in the browser using SQL.js.","sidebar":"docsSidebar"},"languages/stencil":{"id":"languages/stencil","title":"Stencil","description":"TODO...","sidebar":"docsSidebar"},"languages/stylis":{"id":"languages/stylis","title":"Stylis","description":"TODO...","sidebar":"docsSidebar"},"languages/stylus":{"id":"languages/stylus","title":"Stylus","description":"TODO...","sidebar":"docsSidebar"},"languages/sucrase":{"id":"languages/sucrase","title":"Sucrase","description":"Sucrase is a super-fast alternative to Babel for when you can target modern JS runtimes.","sidebar":"docsSidebar"},"languages/svelte":{"id":"languages/svelte","title":"Svelte","description":"Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript.","sidebar":"docsSidebar"},"languages/tailwindcss":{"id":"languages/tailwindcss","title":"Tailwind CSS","description":"TODO...","sidebar":"docsSidebar"},"languages/tcl":{"id":"languages/tcl","title":"Tcl","description":"TODO...","sidebar":"docsSidebar"},"languages/teal":{"id":"languages/teal","title":"Teal","description":"Teal is a typed dialect of Lua.","sidebar":"docsSidebar"},"languages/tokencss":{"id":"languages/tokencss","title":"Token CSS","description":"TODO...","sidebar":"docsSidebar"},"languages/tsx":{"id":"languages/tsx","title":"TSX","description":"TSX is a syntax that allows using TypeScript in JSX.","sidebar":"docsSidebar"},"languages/twig":{"id":"languages/twig","title":"Twig","description":"Twig.js is a pure JavaScript implementation of the Twig PHP templating language.","sidebar":"docsSidebar"},"languages/typescript":{"id":"languages/typescript","title":"TypeScript","description":"TODO...","sidebar":"docsSidebar"},"languages/unocss":{"id":"languages/unocss","title":"UnoCSS","description":"TODO...","sidebar":"docsSidebar"},"languages/vento":{"id":"languages/vento","title":"Vento","description":"Vento is a template engine for Deno. It\'s inspired by other engines, such as Nunjucks, Liquid, Eta, and Mustache.","sidebar":"docsSidebar"},"languages/vue":{"id":"languages/vue","title":"Vue SFC","description":"Vue.js, The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces.","sidebar":"docsSidebar"},"languages/vue2":{"id":"languages/vue2","title":"Vue 2 SFC","description":"Vue.js, The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces.","sidebar":"docsSidebar"},"languages/wat":{"id":"languages/wat","title":"WebAssembly Text","description":"TODO...","sidebar":"docsSidebar"},"languages/windicss":{"id":"languages/windicss","title":"Windi CSS","description":"TODO...","sidebar":"docsSidebar"},"license":{"id":"license","title":"License","description":"LiveCodes is released under the permissive MIT License \xa9 Hatem Hosny.","sidebar":"docsSidebar"},"markdown-to-livecodes":{"id":"markdown-to-livecodes","title":"Markdown to LiveCodes","description":"Markdown and MDX code blocks can be easily converted to interactive LiveCodes playgrounds.","sidebar":"docsSidebar"},"overview":{"id":"overview","title":"Overview","description":"LiveCodes is an open-source client-side code playground. It is feature-rich with support for 90+ languages/frameworks. It can be used as a standalone app or embedded in any web page. A powerful SDK is available to facilitate embedding and communication with embedded playgrounds.","sidebar":"docsSidebar"},"sdk/headless":{"id":"sdk/headless","title":"Headless Mode","description":"The LiveCodes SDK can be used to create playgrounds in headless mode. In this mode, no visible output is displayed in the embedding web page. However, all SDK methods are accessible (e.g. for updating code, getting compiled code, console output, result HTML, shareable URLs, formatting code, running tests, etc).","sidebar":"docsSidebar"},"sdk/index":{"id":"sdk/index","title":"LiveCodes SDK","description":"The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds.","sidebar":"docsSidebar"},"sdk/js-ts":{"id":"sdk/js-ts","title":"JS/TS SDK","description":"This is the core SDK on which others (React, Vue, and Svelte SDKs) are build on top. It is a light-weight (less than 5kb gzipped), zero-dependencies library that allows creating, embedding and communication with LiveCodes playgrounds. It also allows easily creating links to playgrounds.","sidebar":"docsSidebar"},"sdk/react":{"id":"sdk/react","title":"React SDK","description":"The react SDK is a thin wrapper around the JavaScript SDK to provide an easy to use react component, yet retaining the full power, by having access to the SDK methods.","sidebar":"docsSidebar"},"sdk/svelte":{"id":"sdk/svelte","title":"Svelte","description":"The JS/TS SDK can be used directly in Svelte components without the need for any wrappers.","sidebar":"docsSidebar"},"sdk/vue":{"id":"sdk/vue","title":"Vue SDK","description":"The vue SDK is a thin wrapper around the JavaScript SDK to provide an easy to use vue component, yet retaining the full power, by having access to the SDK methods.","sidebar":"docsSidebar"},"sponsor":{"id":"sponsor","title":"Sponsor","description":"Thank you for considering becoming a sponsor of LiveCodes! \uD83D\uDC9A","sidebar":"docsSidebar"},"why":{"id":"why","title":"Why Another Playground?","description":"There are great products like CodePen, JSFiddle, JS Bin, CodeSandbox, Replit and many others, which LiveCodes does not aim to replace or compete with. On the contrary, it aims to integrate with as many of these services as their APIs allow.","sidebar":"docsSidebar"}}}}')}}]); \ No newline at end of file diff --git a/docs/assets/js/136fbf92.6ba3382b.js b/docs/assets/js/136fbf92.6ba3382b.js new file mode 100644 index 0000000..707d16b --- /dev/null +++ b/docs/assets/js/136fbf92.6ba3382b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1551"],{2782:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>c,metadata:()=>s,assets:()=>i,toc:()=>l,contentTitle:()=>o});var s=JSON.parse('{"id":"languages/cpp","title":"C++","description":"TODO...","source":"@site/docs/languages/cpp.mdx","sourceDirName":"languages","slug":"/languages/cpp","permalink":"/docs/languages/cpp","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/cpp.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"C/C++ (Wasm)","permalink":"/docs/languages/cpp-wasm"},"next":{"title":"C# (Wasm)","permalink":"/docs/languages/csharp-wasm"}}'),r=n("5893"),a=n("65");let c={},o="C++",i={},l=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,a.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"c",children:"C++"})}),"\n",(0,r.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},65:function(e,t,n){n.d(t,{Z:function(){return o},a:function(){return c}});var s=n(7294);let r={},a=s.createContext(r);function c(e){let t=s.useContext(a);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/1381.6be3256d.js b/docs/assets/js/1381.6be3256d.js new file mode 100644 index 0000000..36c2c17 --- /dev/null +++ b/docs/assets/js/1381.6be3256d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1381"],{4483:function(c,e,n){n.r(e),n.d(e,{DocSearchModal:function(){return s.He}});var s=n(4443)}}]); \ No newline at end of file diff --git a/docs/assets/js/13e6e9d6.14e76d8d.js b/docs/assets/js/13e6e9d6.14e76d8d.js new file mode 100644 index 0000000..945cdea --- /dev/null +++ b/docs/assets/js/13e6e9d6.14e76d8d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4684"],{6191:function(e,t,s){s.r(t),s.d(t,{default:()=>d,frontMatter:()=>c,metadata:()=>n,assets:()=>l,toc:()=>i,contentTitle:()=>a});var n=JSON.parse('{"id":"languages/postcss","title":"PostCSS","description":"TODO...","source":"@site/docs/languages/postcss.mdx","sourceDirName":"languages","slug":"/languages/postcss","permalink":"/docs/languages/postcss","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/postcss.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"PHP","permalink":"/docs/languages/php"},"next":{"title":"Import Url","permalink":"/docs/languages/postcssImportUrl"}}'),o=s("5893"),r=s("65");let c={},a="PostCSS",l={},i=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"postcss",children:"PostCSS"})}),"\n",(0,o.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return c}});var n=s(7294);let o={},r=n.createContext(o);function c(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/146d8c91.80c1ed7a.js b/docs/assets/js/146d8c91.80c1ed7a.js new file mode 100644 index 0000000..89a386d --- /dev/null +++ b/docs/assets/js/146d8c91.80c1ed7a.js @@ -0,0 +1 @@ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5621"],{8315:function(e,t,o){"use strict";o.r(t),o.d(t,{default:()=>u,frontMatter:()=>a,metadata:()=>n,assets:()=>d,toc:()=>l,contentTitle:()=>c});var n=JSON.parse('{"id":"features/editor-settings","title":"Editor Settings","description":"LiveCodes allows a lot of flexibility for configuring which code editor to use and its settings.","source":"@site/docs/features/editor-settings.mdx","sourceDirName":"features","slug":"/features/editor-settings","permalink":"/docs/features/editor-settings","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/editor-settings.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"User Settings","permalink":"/docs/features/user-settings"},"next":{"title":"Internationalization (i18n)","permalink":"/docs/features/i18n"}}'),r=o("5893"),i=o("65"),s=o("8500");let a={},c="Editor Settings",d={},l=[{value:"Enable AI Code Assistant",id:"enable-ai-code-assistant",level:3},{value:"Code Editor",id:"code-editor",level:3},{value:"Editor Options",id:"editor-options",level:3},{value:"Emmet",id:"emmet",level:3},{value:"Editor Modes",id:"editor-modes",level:3},{value:"Format Options",id:"format-options",level:3}];function h(e){let t={a:"a",code:"code",h1:"h1",h3:"h3",header:"header",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"editor-settings",children:"Editor Settings"})}),"\n",(0,r.jsx)(t.p,{children:"LiveCodes allows a lot of flexibility for configuring which code editor to use and its settings."}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"Editor Settings"})," screen can be accessed from Settings menu \u2192 Editor Settings."]}),"\n","\n",(0,r.jsx)(s.Z,{params:{screen:"editor-settings"},linkText:"direct link"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"LiveCodes Editor Settings",src:o(9947).Z+"",width:"2240",height:"1400"})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"LiveCodes Editor Settings",src:o(516).Z+"",width:"2240",height:"1400"})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"LiveCodes Editor Settings",src:o(8423).Z+"",width:"2240",height:"1400"})}),"\n",(0,r.jsx)(t.p,{children:"A preview code editor is displayed to preview the settings in real time."}),"\n",(0,r.jsxs)(t.p,{children:["The settings selected in the ",(0,r.jsx)(t.code,{children:"Editor Settings"})," screen are saved locally to ",(0,r.jsx)(t.a,{href:"/docs/features/user-settings",children:"user settings"})," and are used subsequently. These include:"]}),"\n",(0,r.jsx)(t.h3,{id:"enable-ai-code-assistant",children:"Enable AI Code Assistant"}),"\n",(0,r.jsxs)(t.p,{children:["Enables the ",(0,r.jsx)(t.a,{href:"/docs/features/ai",children:"AI code assistant"}),". (Free and no account required)"]}),"\n",(0,r.jsx)(t.h3,{id:"code-editor",children:"Code Editor"}),"\n",(0,r.jsx)(t.p,{children:"The following code editors are supported:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://microsoft.github.io/monaco-editor/",children:(0,r.jsx)(t.strong,{children:"Monaco Editor"})}),": This is the code editor that powers ",(0,r.jsx)(t.a,{href:"https://code.visualstudio.com/",children:(0,r.jsx)(t.strong,{children:"VS Code"})}),". It is ",(0,r.jsx)(t.a,{href:"https://code.visualstudio.com/docs/editor/codebasics",children:"feature-rich"})," and supports autocomplete with ",(0,r.jsx)(t.a,{href:"https://code.visualstudio.com/docs/editor/intellisense",children:(0,r.jsx)(t.strong,{children:"IntelliSense"})})," (including ",(0,r.jsx)(t.a,{href:"/docs/features/intellisense",children:"types for custom libraries"}),"). However, it requires a relatively large download and is not supported in mobile browsers."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://codemirror.net/",children:(0,r.jsx)(t.strong,{children:"CodeMirror"})}),": Has ",(0,r.jsx)(t.a,{href:"https://codemirror.net/docs/extensions/",children:"many editing features"}),", including autocomplete, with good ",(0,r.jsx)(t.strong,{children:"mobile support"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://medv.io/codejar/",children:(0,r.jsx)(t.strong,{children:"CodeJar"})}),": A ",(0,r.jsx)(t.strong,{children:"lightweight"})," code editor with very basic editing features. ",(0,r.jsx)(t.a,{href:"https://prismjs.com/",children:"PrismJs"})," is used for syntax highlighting. Please note that some editor settings are not supported in CodeJar (see below)."]}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["This can be configured using the ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#editor",children:(0,r.jsx)(t.code,{children:"editor"})})," configuration option."]}),"\n",(0,r.jsxs)(t.p,{children:["By default, Monaco editor is used on desktop, CodeMirror is used on mobile and CodeJar is used in ",(0,r.jsx)(t.a,{href:"/docs/features/display-modes#codeblock",children:"codeblocks"}),", in ",(0,r.jsx)(t.a,{href:"/docs/features/lite",children:"lite mode"})," and in ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#readonly",children:"readonly"})," playgrounds."]}),"\n",(0,r.jsx)(t.h3,{id:"editor-options",children:"Editor Options"}),"\n",(0,r.jsx)(t.p,{children:"These include:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#editortheme",children:"Editor theme"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#fontfamily",children:"Font family"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#fontsize",children:"Font size"})}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#usetabs",children:"Indentation"})," (Spaces/Tabs)"]}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#tabsize",children:"Tab size"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#linenumbers",children:"Line numbers"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#wordwrap",children:"Word-wrap"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#closebrackets",children:"Auto-close brackets and quotes"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#foldregions",children:"Fold (collapse) regions"})}),"\n"]}),"\n",(0,r.jsx)(t.h3,{id:"emmet",children:"Emmet"}),"\n",(0,r.jsxs)(t.p,{children:["Allows using ",(0,r.jsx)(t.a,{href:"https://emmet.io/",children:(0,r.jsx)(t.strong,{children:"Emmet"})})," ",(0,r.jsx)(t.a,{href:"https://docs.emmet.io/",children:"abbreviations and actions"}),". See ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#emmet",children:(0,r.jsx)(t.code,{children:"emmet"})})," configuration option."]}),"\n",(0,r.jsx)(t.p,{children:"(Not supported in CodeJar)"}),"\n",(0,r.jsx)(t.h3,{id:"editor-modes",children:"Editor Modes"}),"\n",(0,r.jsxs)(t.p,{children:["Allows using ",(0,r.jsx)(t.a,{href:"https://vimhelp.org/",children:(0,r.jsx)(t.strong,{children:"Vim"})})," and ",(0,r.jsx)(t.a,{href:"https://www.gnu.org/software/emacs/manual/html_node/emacs/Basic.html",children:(0,r.jsx)(t.strong,{children:"Emacs"})})," keyboard bindings. See ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#editormode",children:(0,r.jsx)(t.code,{children:"editorMode"})})," configuration option."]}),"\n",(0,r.jsx)(t.p,{children:"(Not supported in CodeJar)"}),"\n",(0,r.jsx)(t.h3,{id:"format-options",children:"Format Options"}),"\n",(0,r.jsxs)(t.p,{children:["These are ",(0,r.jsx)(t.a,{href:"https://prettier.io/",children:(0,r.jsx)(t.strong,{children:"Prettier"})})," ",(0,r.jsx)(t.a,{href:"https://prettier.io/docs/en/options.html",children:"configuration options"})," used for code formatting."]}),"\n",(0,r.jsxs)(t.p,{children:["In addition to those specified in ",(0,r.jsx)(t.a,{href:"#editor-options",children:"Editor Options"}),", the following options are available:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#semicolons",children:"Use Semicolons"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#singlequote",children:"Use Single Quotes"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#trailingcomma",children:"Use Trailing Commas"})}),"\n"]})]})}function u(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9947:function(e,t,o){"use strict";o.d(t,{Z:function(){return n}});let n=o.p+"assets/images/editor-settings-1-f401ae77e35e8e11b6427b4f1eb67bb9.jpg"},516:function(e,t,o){"use strict";o.d(t,{Z:function(){return n}});let n=o.p+"assets/images/editor-settings-2-dcbfd00bb00d3759e59daec48d1dc905.jpg"},8423:function(e,t,o){"use strict";o.d(t,{Z:function(){return n}});let n=o.p+"assets/images/editor-settings-3-33c11e13b5bd21a710703dc0dd6bebb6.jpg"},7728:function(e,t,o){e=o.nmd(e);var n=function(){var e=String.fromCharCode,t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",n={};function r(e,t){if(!n[e]){n[e]={};for(var o=0;o>>8,o[2*n+1]=s%256}return o},decompressFromUint8Array:function(t){if(null==t)return i.decompress(t);for(var o=Array(t.length/2),n=0,r=o.length;nl.charCodeAt(0)){for(n=0;n>=1}else{for(n=0,r=1;n>=1}0==--h&&(h=Math.pow(2,f),f++),delete a[l]}else for(n=0,r=s[l];n>=1;0==--h&&(h=Math.pow(2,f),f++),s[d]=u++,l=String(c)}if(""!==l){if(Object.prototype.hasOwnProperty.call(a,l)){if(256>l.charCodeAt(0)){for(n=0;n>=1}else{for(n=0,r=1;n>=1}0==--h&&(h=Math.pow(2,f),f++),delete a[l]}else for(n=0,r=s[l];n>=1;0==--h&&(h=Math.pow(2,f),f++)}for(n=0,r=2;n>=1;for(;;){if(g<<=1,m==t-1){p.push(o(g));break}m++}return p.join("")},decompress:function(e){return null==e?"":""==e?null:i._decompress(e.length,32768,function(t){return e.charCodeAt(t)})},_decompress:function(t,o,n){var r,i,s,a,c,d,l,h=[],u=4,f=4,p=3,g="",m=[],j={val:n(0),position:o,index:1};for(r=0;r<3;r+=1)h[r]=r;for(s=0,c=4,d=1;d!=c;)a=j.val&j.position,j.position>>=1,0==j.position&&(j.position=o,j.val=n(j.index++)),s|=(a>0?1:0)*d,d<<=1;switch(s){case 0:for(s=0,c=256,d=1;d!=c;)a=j.val&j.position,j.position>>=1,0==j.position&&(j.position=o,j.val=n(j.index++)),s|=(a>0?1:0)*d,d<<=1;l=e(s);break;case 1:for(s=0,c=65536,d=1;d!=c;)a=j.val&j.position,j.position>>=1,0==j.position&&(j.position=o,j.val=n(j.index++)),s|=(a>0?1:0)*d,d<<=1;l=e(s);break;case 2:return""}for(h[3]=l,i=l,m.push(l);;){if(j.index>t)return"";for(s=0,c=Math.pow(2,p),d=1;d!=c;)a=j.val&j.position,j.position>>=1,0==j.position&&(j.position=o,j.val=n(j.index++)),s|=(a>0?1:0)*d,d<<=1;switch(l=s){case 0:for(s=0,c=256,d=1;d!=c;)a=j.val&j.position,j.position>>=1,0==j.position&&(j.position=o,j.val=n(j.index++)),s|=(a>0?1:0)*d,d<<=1;h[f++]=e(s),l=f-1,u--;break;case 1:for(s=0,c=65536,d=1;d!=c;)a=j.val&j.position,j.position>>=1,0==j.position&&(j.position=o,j.val=n(j.index++)),s|=(a>0?1:0)*d,d<<=1;h[f++]=e(s),l=f-1,u--;break;case 2:return m.join("")}if(0==u&&(u=Math.pow(2,p),p++),h[l])g=h[l];else{if(l!==f)return null;g=i+i.charAt(0)}m.push(g),h[f++]=i+g.charAt(0),u--,i=g,0==u&&(u=Math.pow(2,p),p++)}}};return i}();"function"==typeof define&&define.amd?define(function(){return n}):null!=e&&(e.exports=n)},8500:function(e,t,o){"use strict";o.d(t,{Z:()=>d});var n=o("5893");o("7294");var r=o("6735");function i(e){let{children:t,fallback:o}=e;return(0,r.Z)()?(0,n.jsx)(n.Fragment,{children:t?.()}):o??null}var s=o("1705"),a=o("8294"),c=o("1858");function d(e){let{params:t,config:o,code:r,language:d="js",codeTitle:l="",showLineNumbers:h=!1,formatCode:u=!0,linkText:f="Run in LiveCodes",style:p={},className:g=""}=e,m=(0,a.r)({appUrl:c.G,params:t,config:o});return(0,n.jsxs)("div",{style:{marginBottom:"30px",...p},className:g,children:[r&&(0,n.jsx)(i,{children:()=>(0,n.jsx)(s.Z,{language:d,title:l,showLineNumbers:h,children:u?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(r,d):r})}),(0,n.jsxs)("a",{href:m,target:"_blank",rel:"noreferrer",children:[f,(0,n.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,n.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,o){"use strict";o.d(t,{T:function(){return r},r:function(){return i}});var n=o(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:o={},headless:n,loading:r="lazy",view:s}=t,a=n||"headless"===s,c=null,d=null;if("string"==typeof e)c=document.querySelector(e);else if(e instanceof HTMLElement)c=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!c){if(a)A(c=document.createElement("div")),document.body.appendChild(c);else throw Error(`Cannot find element: "${e}"`)}let l=new URL(i(t)),h=l.origin;l.searchParams.set("embed","true"),l.searchParams.set("loading",a?"eager":r);let u=globalThis.process;l.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof o&&Object.keys(o).length>0&&l.searchParams.set("config","sdk");let f=t.params;"object"==typeof f&&Object.keys(f).length>0&&JSON.stringify(f).length<1800&&Object.keys(f).forEach(e=>{l.searchParams.set(e,encodeURIComponent(String(f[e])))});let p=!1,g="Cannot call API methods after calling `destroy()`.",m=await new Promise(e=>{if(!c)return;let t=c.dataset.height||c.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";c.style.height=e}"false"===c.dataset.defaultStyles||a||(c.style.backgroundColor||="#fff",c.style.border||="1px solid black",c.style.borderRadius||="8px",c.style.boxSizing||="border-box",c.style.padding||="0",c.style.width||="100%",c.style.height||=c.style.height||"300px",c.style.minHeight="200px",c.style.flexGrow="1",c.style.overflow||="hidden",c.style.resize||="vertical");let n="livecodes",i=c.querySelector(`iframe.${n}`),s=i||document.createElement("iframe");s.classList.add(n),s.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),s.setAttribute("allowtransparency","true"),s.setAttribute("allowpaymentrequest","true"),s.setAttribute("allowfullscreen","true"),s.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),s.setAttribute("loading","eager"===r?"eager":"lazy"),a?A(s):(s.style.height="100%",s.style.minHeight="200px",s.style.width="100%",s.style.margin="0",s.style.border="0",s.style.borderRadius=c.style.borderRadius),addEventListener("message",function e(t){t.source===s.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===s.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),s.contentWindow?.postMessage({type:"livecodes-config",payload:o},h))}),s.onload=()=>{e(s)},s.src=l.href,i||c.appendChild(s)}),j=new Promise(e=>{addEventListener("message",function t(o){o.source===m.contentWindow&&o.origin===h&&o.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),j.settled=!0)})}),x=()=>p?Promise.reject(g):new Promise(async e=>{j.settled&&e(),m.contentWindow?.postMessage({type:"livecodes-load"},h),await j,e()}),v=(e,t)=>new Promise(async(o,n)=>{if(p)return n(g);await x();let r=S();addEventListener("message",function t(i){if(i.source===m.contentWindow&&i.origin===h&&i.data?.type==="livecodes-api-response"&&i.data?.id===r&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?n(e.error):o(e)}}),m.contentWindow?.postMessage({method:e,id:r,args:t},h)}),b={},y=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(p)throw Error(g);return y.includes(e)?(v("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&v("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},E=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=E(e.data?.type??"");if(e.source!==m.contentWindow||e.origin!==h||!t||!b[t])return;let o=e.data?.payload;b[t]?.forEach(e=>{e(o)})});let C=()=>{Object.values(b).forEach(e=>{e.length=0}),m?.remove?.(),p=!0};function A(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await x(),t.unobserve(c))})},{rootMargin:"150px"}).observe(c);let S=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>x(),run:()=>v("run"),format:e=>v("format",[e]),getShareUrl:e=>v("getShareUrl",[e]),getConfig:e=>v("getConfig",[e]),setConfig:e=>v("setConfig",[e]),getCode:()=>v("getCode"),show:(e,t)=>v("show",[e,t]),runTests:()=>v("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,o=Array(t>1?t-1:0),n=1;nj.settled?v("destroy").then(C):p?Promise.reject(g):(C(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:o="https://livecodes.io",params:r={},config:i={},headless:s,import:a,lite:c,view:d,...l}=t;try{e=new URL(o)}catch{throw Error(`${o} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(l).forEach(t=>{let[o,n]=t;void 0!==n&&e.searchParams.set(o,String(n))});let u="headless"===t.view||s;if(c&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==d?i.view=d:e.searchParams.set("view",d)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(i))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,o){"use strict";o.d(t,{Z:function(){return a},a:function(){return s}});var n=o(7294);let r={},i=n.createContext(r);function s(e){let t=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/1698.4ba74ff4.js b/docs/assets/js/1698.4ba74ff4.js new file mode 100644 index 0000000..d90c8a2 --- /dev/null +++ b/docs/assets/js/1698.4ba74ff4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1698"],{9177:function(s,c,e){e.r(c)}}]); \ No newline at end of file diff --git a/docs/assets/js/17896441.889dc0be.js b/docs/assets/js/17896441.889dc0be.js new file mode 100644 index 0000000..da74dd9 --- /dev/null +++ b/docs/assets/js/17896441.889dc0be.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7048"],{2688:function(e,t,s){s.d(t,{Z:()=>k});var n=s("5893"),o=s("7097"),c=s("7550"),d=s("7624"),l=s("5872"),i=s("113"),a=s("2540"),r=s("4813"),m=s("5445"),x=s("3288"),j=s("1987"),u=s("9548"),h=s("7026");let Z={docItemContainer:"docItemContainer_c0TR",docItemCol:"docItemCol_z5aJ"};function k(e){let{children:t}=e,s=function(){let{frontMatter:e}=(0,o.k)(),t=(0,c.i)(),s=e.hide_table_of_contents,d=!s;return{hidden:s,mobile:d?(0,n.jsx)(x.Z,{}):void 0,desktop:d&&("desktop"===t||"ssr"===t)?(0,n.jsx)(m.Z,{}):void 0}}(),{metadata:k}=(0,o.k)();return(0,n.jsxs)("div",{className:"row",children:[(0,n.jsxs)("div",{className:(0,h.Z)("col",!s.hidden&&Z.docItemCol),children:[(0,n.jsx)(d.Z,{metadata:k}),(0,n.jsx)(u.Z,{}),(0,n.jsxs)("div",{className:Z.docItemContainer,children:[(0,n.jsxs)("article",{children:[(0,n.jsx)(l.Z,{}),(0,n.jsx)(j.Z,{}),s.mobile,(0,n.jsx)(i.Z,{children:t}),(0,n.jsx)(a.Z,{})]}),(0,n.jsx)(r.Z,{})]})]}),s.desktop&&(0,n.jsx)("div",{className:"col col--3",children:s.desktop})]})}},659:function(e,t,s){s.d(t,{Z:()=>i});var n=s("5893"),o=s("7294"),c=s("6643"),d=s("2188");let l={content:"content_kfNa"};function i(e){let{tocContent:t}=(0,o.useContext)(d.Bi);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(c.Z,{...e}),t&&(0,n.jsx)("div",{className:`custom-content custom-content-toc ${l.content}`,dangerouslySetInnerHTML:{__html:t}})]})}}}]); \ No newline at end of file diff --git a/docs/assets/js/18670763.cc8ea2b7.js b/docs/assets/js/18670763.cc8ea2b7.js new file mode 100644 index 0000000..842cc55 --- /dev/null +++ b/docs/assets/js/18670763.cc8ea2b7.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9723"],{8663:function(e,t,n){n.r(t),n.d(t,{default:()=>p,frontMatter:()=>a,customModules:()=>c,assets:()=>d,metadata:()=>s,toc:()=>h,contentTitle:()=>l});var s=JSON.parse('{"id":"features/intellisense","title":"IntelliSense","description":"The code editor provides a rich experience with intellisense and autocompletion. Many of the features required for this are based on TypeScript types that are either inferred by the editor or supplied as data definition files.","source":"@site/docs/features/intellisense.mdx","sourceDirName":"features","slug":"/features/intellisense","permalink":"/docs/features/intellisense","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/intellisense.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Module Resolution","permalink":"/docs/features/module-resolution"},"next":{"title":"AI Code Assistant \uD83E\uDE84","permalink":"/docs/features/ai"}}'),r=n("5893"),o=n("65"),i=n("3365");let a={},l="IntelliSense",d={},c={editor:"monaco",activeEditor:"script",script:{language:"typescript",content:"import { Greeter } from 'my-greeter';\n\nconst greeter = new Greeter();\n// now `greeter` has autocomplete\n\ndocument.body.innerText = greeter.morning();\n\n// this should show error in the editor\n// Property 'morningGreetings' is private and only accessible within class 'Greeter'\nconsole.log(greeter.morningGreetings);"},imports:{"my-greeter":"data:text/javascript;charset=UTF-8;base64,ZXhwb3J0IGNsYXNzIEdyZWV0ZXIgew0KICAgIGNvbnN0cnVjdG9yKCkgew0KICAgICAgICB0aGlzLm1vcm5pbmdHcmVldGluZ3MgPSBbJ0dvb2QgbW9ybmluZycsICdIYXZlIGEgZ29vZCBkYXknLCAnSG93IGFyZSB5b3UgdG9kYXk/J107DQogICAgICAgIHRoaXMuZXZlbmluZ0dyZWV0aW5ncyA9IFsnR29vZCBldmVuaW5nJywgJ0dvb2QgbmlnaHQnLCAnU2xlZXAgd2VsbCddOw0KICAgIH0NCiAgICByYW5kb21TZWxlY3RvcihhcnJheSkgew0KICAgICAgICByZXR1cm4gYXJyYXlbTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogYXJyYXkubGVuZ3RoKV07DQogICAgfQ0KICAgIG1vcm5pbmcoKSB7DQogICAgICAgIHJldHVybiB0aGlzLnJhbmRvbVNlbGVjdG9yKHRoaXMubW9ybmluZ0dyZWV0aW5ncyk7DQogICAgfQ0KICAgIGV2ZW5pbmcoKSB7DQogICAgICAgIHJldHVybiB0aGlzLnJhbmRvbVNlbGVjdG9yKHRoaXMuZXZlbmluZ0dyZWV0aW5ncyk7DQogICAgfQ0KfQ0K"},types:{"my-greeter":"data:text/typescript;charset=UTF-8;base64,ZXhwb3J0IGRlY2xhcmUgY2xhc3MgR3JlZXRlciB7DQogIHByaXZhdGUgbW9ybmluZ0dyZWV0aW5nczsNCiAgcHJpdmF0ZSBldmVuaW5nR3JlZXRpbmdzOw0KICBwcml2YXRlIHJhbmRvbVNlbGVjdG9yOw0KICBtb3JuaW5nKCk6IHN0cmluZzsNCiAgZXZlbmluZygpOiBzdHJpbmc7DQp9DQo="}},h=[{value:"Types for imported npm packages",id:"types-for-imported-npm-packages",level:2},{value:"TypeScript TwoSlash",id:"typescript-twoslash",level:2},{value:"Custom Types",id:"custom-types",level:2},{value:"Demo",id:"demo",level:2},{value:"Related",id:"related",level:2}];function u(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"intellisense",children:"IntelliSense"})}),"\n","\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.a,{href:"/docs/features/editor-settings#code-editor",children:"code editor"})," provides a rich experience with ",(0,r.jsx)(t.a,{href:"https://code.visualstudio.com/docs/editor/intellisense",children:"intellisense"})," and autocompletion. Many of the features required for this are based on TypeScript types that are either inferred by the editor or supplied as data definition files."]}),"\n",(0,r.jsx)(t.p,{children:"This not only works when the editor language is TypeScript, but also works with others like JavaScript and JSX."}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"LiveCodes Autocomplete",src:n(6368).Z+"",width:"1127",height:"621"})}),"\n",(0,r.jsx)(t.h2,{id:"types-for-imported-npm-packages",children:"Types for imported npm packages"}),"\n",(0,r.jsx)(t.p,{children:"LiveCodes will try to automatically find type definitions for npm modules imported in the editor."}),"\n",(0,r.jsx)(t.p,{children:"These are examples for automatically loading React types with autocomplete and hover info:"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"LiveCodes Intellisense",src:n(9203).Z+"",width:"1128",height:"754"})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"LiveCodes Intellisense",src:n(313).Z+"",width:"1126",height:"713"})}),"\n",(0,r.jsx)(t.h2,{id:"typescript-twoslash",children:"TypeScript TwoSlash"}),"\n",(0,r.jsxs)(t.p,{children:["The code editor supports ",(0,r.jsx)(t.a,{href:"https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ts-twoslasher",children:"TypeScript TwoSlash"}),". This can be very useful for debugging, sharing and teaching TypeScript."]}),"\n",(0,r.jsxs)(t.p,{children:["This is supported in ",(0,r.jsx)(t.a,{href:"/docs/languages/javascript",children:"JavaScript"}),", ",(0,r.jsx)(t.a,{href:"/docs/languages/typescript",children:"TypeScript"}),", ",(0,r.jsx)(t.a,{href:"/docs/languages/jsx",children:"JSX"})," and ",(0,r.jsx)(t.a,{href:"/docs/languages/tsx",children:"TSX"}),". This also includes ",(0,r.jsx)(t.a,{href:"/docs/languages/babel",children:"Babel"}),", ",(0,r.jsx)(t.a,{href:"/docs/languages/sucrase",children:"Sucrase"}),", ",(0,r.jsx)(t.a,{href:"/docs/languages/solid",children:"Solid"}),", ",(0,r.jsx)(t.a,{href:"/docs/languages/react-native",children:"React Native"}),", etc."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.img,{alt:"TypeScript TwoSlash",src:n(258).Z+"",width:"1150",height:"878"})," "]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.img,{alt:"TwoSlash in JSX",src:n(9481).Z+"",width:"1147",height:"939"})," "]}),"\n",(0,r.jsx)(t.h2,{id:"custom-types",children:"Custom Types"}),"\n",(0,r.jsx)(t.p,{children:"If no type definitions are found, or if you want to provide your own (e.g. for a module that is not hosted on npm), custom type definition files can be used."}),"\n",(0,r.jsxs)(t.p,{children:["In the standalone app, these can be provided in ",(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," using the ",(0,r.jsx)(t.code,{children:"types"})," property. This takes an object with the key representing the module name and the value representing the URL of the file."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "types": {\n "my-module": "https://cdn.jsdelivr.net/npm/my-module@1.0.0/types/my-module.d.ts",\n "my-other-module": "https://my-website.com/my-other-module/my-other-module.d.ts"\n }\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["For embedded playgrounds, these can be provided in the ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configuration object"})," using the ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#types",children:(0,r.jsx)(t.code,{children:"types"})})," property."]}),"\n",(0,r.jsxs)(t.p,{children:["This can be combined with the ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#imports",children:(0,r.jsx)(t.code,{children:"imports"})})," property to provide ",(0,r.jsx)(t.a,{href:"/docs/features/module-resolution#custom-module-resolution",children:"importmap"})," for runtime implementation of your custom modules."]}),"\n",(0,r.jsxs)(t.p,{children:["This is an example of how to create a playground that provides the implementation of the custom module: ",(0,r.jsx)(t.code,{children:"my-module"})," and its type definition to provide editor intellisense:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\nconst config = {\n activeEditor: 'script',\n script: {\n language: 'javascript',\n content: `import { foo } from 'my-module';\\n\\nconsole.log(foo());`\n };\n imports: {\n 'my-module': 'https://my-website.com/my-module/index.js',\n },\n types: {\n 'my-module': 'https://my-website.com/my-module/my-module.d.ts',\n },\n};\n\ncreatePlayground('#container', {config});\n"})}),"\n",(0,r.jsxs)(t.p,{children:["Please note that the URLs used for ",(0,r.jsx)(t.code,{children:"types"})," and ",(0,r.jsx)(t.code,{children:"imports"})," properties may be full URLs or ",(0,r.jsx)(t.a,{href:"/docs/features/data-urls",children:"data URLs"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"This can be of great use for library authors who want to provide playgrounds for documenting their libraries that are not (yet) published to npm."}),"\n",(0,r.jsx)(t.h2,{id:"demo",children:"Demo"}),"\n",(0,r.jsx)(t.p,{children:"Let's assume we have this TypeScript module:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="Greeter.ts"',children:"export class Greeter {\n private morningGreetings = ['Good morning', 'Have a good day', 'How are you today?'];\n private eveningGreetings = ['Good evening', 'Good night', 'Sleep well'];\n\n private randomSelector(array: string[]) {\n return array[Math.floor(Math.random() * array.length)];\n }\n\n public morning() {\n return this.randomSelector(this.morningGreetings);\n }\n\n public evening() {\n return this.randomSelector(this.eveningGreetings);\n }\n}\n"})}),"\n",(0,r.jsx)(t.p,{children:"which compiles to this JavaScript:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:'title="Greeter.js"',children:"export class Greeter {\n constructor() {\n this.morningGreetings = ['Good morning', 'Have a good day', 'How are you today?'];\n this.eveningGreetings = ['Good evening', 'Good night', 'Sleep well'];\n }\n randomSelector(array) {\n return array[Math.floor(Math.random() * array.length)];\n }\n morning() {\n return this.randomSelector(this.morningGreetings);\n }\n evening() {\n return this.randomSelector(this.eveningGreetings);\n }\n}\n"})}),"\n",(0,r.jsx)(t.p,{children:"and this type definition:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="Greeter.d.ts"',children:"export declare class Greeter {\n private morningGreetings;\n private eveningGreetings;\n private randomSelector;\n morning(): string;\n evening(): string;\n}\n"})}),"\n",(0,r.jsxs)(t.p,{children:["The JavaScript output (Greeter.js) and the data definition file (Greeter.d.ts) should be hosted online or converted to data URLs (see ",(0,r.jsx)(t.a,{href:"/docs/features/assets",children:"assets"})," and ",(0,r.jsx)(t.a,{href:"/docs/features/data-urls",children:"data URLs"}),")."]}),"\n",(0,r.jsx)(t.p,{children:"Then, they can be used like that:"}),"\n","\n",(0,r.jsx)(i.Z,{config:c,height:"80vh"}),"\n",(0,r.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/features/module-resolution",children:"Module Resolution"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/features/data-urls",children:"Data Urls"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/features/assets",children:"Assets"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom Settings"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"Configuration Object"})}),"\n"]})]})}function p(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},6368:function(e,t,n){n.d(t,{Z:function(){return s}});let s=n.p+"assets/images/autocomplete-54ec86de500afd076e2948246f4bf434.jpg"},9203:function(e,t,n){n.d(t,{Z:function(){return s}});let s=n.p+"assets/images/intellisense-1-bbc692078d1b88aaf8d2be72beb49849.jpg"},313:function(e,t,n){n.d(t,{Z:function(){return s}});let s=n.p+"assets/images/intellisense-2-ffdab70d10948aa165e3332a58d37827.jpg"},9481:function(e,t,n){n.d(t,{Z:function(){return s}});let s=n.p+"assets/images/twoslash-jsx-dce9c452f6f57be25c0145a3471c25d9.jpg"},258:function(e,t,n){n.d(t,{Z:function(){return s}});let s=n.p+"assets/images/twoslash-129fce4a76fef85f9c655b3d0278c216.jpg"},3365:function(e,t,n){n.d(t,{Z:()=>f});var s=n("5893"),r=n("4200"),o=n("7294"),i=n("8294");function a(e){let t=(0,o.useRef)(null),[n,r]=(0,o.useState)(e.className||""),[a,l]=(0,o.useState)(e.style||{}),[d,c]=(0,o.useState)(e.height),[h,u]=(0,o.useState)(),[p,m]=(0,o.useState)(JSON.stringify(e.config||"")),[g,f]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!t.current)return;let{className:n,style:s,height:o,sdkReady:a,config:d,...y}=e;if(r(n||""),l(s||{}),c(o),h&&g===JSON.stringify(y)){if(p===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(y)),h?.destroy(),(0,i.T)(t.current,{config:d,...y}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,o.useEffect)(()=>()=>{h?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:n,style:a,"data-height":d})}var l=n("1858"),d=n("3262"),c=n("1705"),h=n("7645"),u=n("8168"),p=n("8228"),m=n("5050");function g(e){let[t,n]=(0,o.useState)(e.js),[r,i]=(0,o.useState)(e.ts),[a,l]=(0,o.useState)(e.react),[g,f]=(0,o.useState)(e.vue),[y,v]=(0,o.useState)(e.svelte),b="3.7rem",[j,x]=(0,o.useState)(!0),[w,S]=(0,o.useState)(b),C=(0,o.useRef)(null),Z=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${b})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${b})`)},255)};return(0,o.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};n(e(t,"js")),i(e(r,"ts")),l(e(a,"jsx")),f(e(g,"html")),v(e(y,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":j,style:{height:j?b:w,overflow:"hidden",willChange:"height",transition:`height ${j?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{x(!j),Z()},children:"show code"}),(0,s.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:m.Z.collapsibleContent,children:(0,s.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,s.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:Z},children:(0,s.jsx)(c.Z,{language:"js",children:t})}),(0,s.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:Z},children:(0,s.jsx)(c.Z,{language:"ts",children:r})}),(0,s.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:Z},children:(0,s.jsx)(c.Z,{language:"jsx",children:a})}),(0,s.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:Z},children:(0,s.jsx)(c.Z,{language:"html",children:g})}),(0,s.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:Z},children:(0,s.jsx)(c.Z,{language:"html",children:y})})]})})})]})}function f(e){let{className:t,style:n,showCode:o,height:i,...d}=e,{colorMode:c}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (); +} + +`.trimStart(),f=` + + + +`,y=` + + +
+ +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(g,{js:u,ts:p,react:m,vue:f,svelte:y})]})}},8294:function(e,t,n){n.d(t,{T:function(){return r},r:function(){return o}});var s=n(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:s,loading:r="lazy",view:i}=t,a=s||"headless"===i,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)Z(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(o(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":r);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",o=l.querySelector(`iframe.${s}`),i=o||document.createElement("iframe");i.classList.add(s),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===r?"eager":"lazy"),a?Z(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),i.onload=()=>{e(i)},i.src=c.href,o||l.appendChild(i)}),y=new Promise(e=>{addEventListener("message",function t(n){n.source===f.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>m?Promise.reject(g):new Promise(async e=>{y.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await y,e()}),b=(e,t)=>new Promise(async(n,s)=>{if(m)return s(g);await v();let r=I();addEventListener("message",function t(o){if(o.source===f.contentWindow&&o.origin===h&&o.data?.type==="livecodes-api-response"&&o.data?.id===r&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?s(e.error):n(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},h)}),j={},x=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return x.includes(e)?(b("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[e]?.length===0&&b("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!j[t])return;let n=e.data?.payload;j[t]?.forEach(e=>{e(n)})});let C=()=>{Object.values(j).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function Z(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let I=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>b("run"),format:e=>b("format",[e]),getShareUrl:e=>b("getShareUrl",[e]),getConfig:e=>b("getConfig",[e]),setConfig:e=>b("setConfig",[e]),getCode:()=>b("getCode"),show:(e,t)=>b("show",[e,t]),runTests:()=>b("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;sy.settled?b("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:r={},config:o={},headless:i,import:a,lite:l,view:d,...c}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let u="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==d?o.view=d:e.searchParams.set("view",d)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(o))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return a},a:function(){return i}});var s=n(7294);let r={},o=s.createContext(r);function i(e){let t=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/18891827.40f30d6e.js b/docs/assets/js/18891827.40f30d6e.js new file mode 100644 index 0000000..6038f4f --- /dev/null +++ b/docs/assets/js/18891827.40f30d6e.js @@ -0,0 +1,4 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7694"],{5764:function(e,t,n){n.r(t),n.d(t,{default:()=>h,frontMatter:()=>l,metadata:()=>r,assets:()=>d,toc:()=>u,contentTitle:()=>c});var r=JSON.parse('{"id":"overview","title":"Overview","description":"LiveCodes is an open-source client-side code playground. It is feature-rich with support for 90+ languages/frameworks. It can be used as a standalone app or embedded in any web page. A powerful SDK is available to facilitate embedding and communication with embedded playgrounds.","source":"@site/docs/overview.mdx","sourceDirName":".","slug":"/overview","permalink":"/docs/overview","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/overview.mdx","tags":[],"version":"current","frontMatter":{"slug":"/overview"},"sidebar":"docsSidebar","next":{"title":"Why Another Playground?","permalink":"/docs/why"}}'),i=n("5893"),o=n("65"),s=n("8399"),a=n("7378");let l={slug:"/overview"},c="Overview",d={},u=[];function f(e){let t={a:"a",h1:"h1",header:"header",p:"p",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"overview",children:"Overview"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://livecodes.io",children:"LiveCodes"})," is an ",(0,i.jsx)(t.a,{href:"/docs/license",children:"open-source"})," client-side code playground. It is ",(0,i.jsx)(t.a,{href:"/docs/features/",children:"feature-rich"})," with support for ",(0,i.jsx)(t.a,{href:"/docs/languages/",children:"90+ languages/frameworks"}),". It can be used as a ",(0,i.jsx)(t.a,{href:"/docs/getting-started#standalone-app",children:"standalone app"})," or ",(0,i.jsx)(t.a,{href:"/docs/features/embeds",children:"embedded"})," in any web page. A powerful ",(0,i.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," is available to facilitate embedding and communication with embedded playgrounds."]}),"\n",(0,i.jsx)(t.p,{children:"The sections below include the documentation details:"}),"\n","\n",(0,i.jsx)(s.Z,{items:(0,a.jA)().items})]})}function h(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},8399:function(e,t,n){n.d(t,{Z:()=>x});var r=n("5893");n("7294");var i=n("7026"),o=n("6563"),s=n("3367"),a=n("1107"),l=n("9999"),c=n("7670"),d=n("9386");let u={cardContainer:"cardContainer_fWXF",cardTitle:"cardTitle_rnsV",cardDescription:"cardDescription_PWke"};function f(e){let{href:t,children:n}=e;return(0,r.jsx)(s.Z,{href:t,className:(0,i.Z)("card padding--lg",u.cardContainer),children:n})}function h(e){let{href:t,icon:n,title:o,description:s}=e;return(0,r.jsxs)(f,{href:t,children:[(0,r.jsxs)(d.Z,{as:"h2",className:(0,i.Z)("text--truncate",u.cardTitle),title:o,children:[n," ",o]}),s&&(0,r.jsx)("p",{className:(0,i.Z)("text--truncate",u.cardDescription),title:s,children:s})]})}function p(e){let{item:t}=e,n=(0,o.LM)(t),i=function(){let{selectMessage:e}=(0,a.c)();return t=>e(t,(0,c.I)({message:"1 item|{count} items",id:"theme.docs.DocCard.categoryDescription.plurals",description:"The default description for a category card in the generated index about how many items this category includes"},{count:t}))}();return n?(0,r.jsx)(h,{href:n,icon:"\uD83D\uDDC3\uFE0F",title:t.label,description:t.description??i(t.items.length)}):null}function m(e){let{item:t}=e,n=(0,l.Z)(t.href)?"\uD83D\uDCC4\uFE0F":"\uD83D\uDD17",i=(0,o.xz)(t.docId??void 0);return(0,r.jsx)(h,{href:t.href,icon:n,title:t.label,description:t.description??i?.description})}function g(e){let{item:t}=e;switch(t.type){case"link":return(0,r.jsx)(m,{item:t});case"category":return(0,r.jsx)(p,{item:t});default:throw Error(`unknown item type ${JSON.stringify(t)}`)}}function v(e){let{className:t}=e,n=(0,o.jA)();return(0,r.jsx)(x,{items:n.items,className:t})}function x(e){let{items:t,className:n}=e;if(!t)return(0,r.jsx)(v,{...e});let s=(0,o.MN)(t);return(0,r.jsx)("section",{className:(0,i.Z)("row",n),children:s.map((e,t)=>(0,r.jsx)("article",{className:"col col--6 margin-bottom--lg",children:(0,r.jsx)(g,{item:e})},t))})}},7378:function(e,t,n){function r(){for(var e=arguments.length,t=Array(e),r=0;re.includes(t))}let a={locale:"en",pluralForms:s(["one","other"]),select:e=>1===e?"one":"other"};function l(){let e=function(){let{i18n:{currentLocale:e}}=(0,i.Z)();return(0,r.useMemo)(()=>{try{return function(e){let t=new Intl.PluralRules(e);return{locale:e,pluralForms:s(t.resolvedOptions().pluralCategories),select:e=>t.select(e)}}(e)}catch(t){return console.error(`Failed to use Intl.PluralRules for locale "${e}". +Docusaurus will fallback to the default (English) implementation. +Error: ${t.message} +`),a}},[e])}();return{selectMessage:(t,n)=>(function(e,t,n){let r=e.split("|");if(1===r.length)return r[0];r.length>n.pluralForms.length&&console.error(`For locale=${n.locale}, a maximum of ${n.pluralForms.length} plural forms are expected (${n.pluralForms.join(",")}), but the message contains ${r.length}: ${e}`);let i=n.select(t);return r[Math.min(n.pluralForms.indexOf(i),r.length-1)]})(n,t,e)}}},65:function(e,t,n){n.d(t,{Z:function(){return a},a:function(){return s}});var r=n(7294);let i={},o=r.createContext(i);function s(e){let t=r.useContext(o);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/1a4e3797.7ba59418.js b/docs/assets/js/1a4e3797.7ba59418.js new file mode 100644 index 0000000..7ef321b --- /dev/null +++ b/docs/assets/js/1a4e3797.7ba59418.js @@ -0,0 +1,4 @@ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5230"],{7331:function(e){function t(){this._events=this._events||{},this._maxListeners=this._maxListeners||void 0}function r(e){return"function"==typeof e}function i(e){return"object"==typeof e&&null!==e}e.exports=t,t.prototype._events=void 0,t.prototype._maxListeners=void 0,t.defaultMaxListeners=10,t.prototype.setMaxListeners=function(e){if("number"!=typeof e||e<0||isNaN(e))throw TypeError("n must be a positive number");return this._maxListeners=e,this},t.prototype.emit=function(e){var t,n,s,a,c,o;if(this._events||(this._events={}),"error"===e&&(!this._events.error||i(this._events.error)&&!this._events.error.length)){if(t=arguments[1],t instanceof Error)throw t;var u=Error('Uncaught, unspecified "error" event. ('+t+")");throw u.context=t,u}if(void 0===(n=this._events[e]))return!1;if(r(n))switch(arguments.length){case 1:n.call(this);break;case 2:n.call(this,arguments[1]);break;case 3:n.call(this,arguments[1],arguments[2]);break;default:a=Array.prototype.slice.call(arguments,1),n.apply(this,a)}else if(i(n))for(c=0,a=Array.prototype.slice.call(arguments,1),s=(o=n.slice()).length;c0&&this._events[e].length>s&&(this._events[e].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[e].length),"function"==typeof console.trace&&console.trace()),this},t.prototype.on=t.prototype.addListener,t.prototype.once=function(e,t){if(!r(t))throw TypeError("listener must be a function");var i=!1;function n(){this.removeListener(e,n),i||(i=!0,t.apply(this,arguments))}return n.listener=t,this.on(e,n),this},t.prototype.removeListener=function(e,t){var n,s,a,c;if(!r(t))throw TypeError("listener must be a function");if(!this._events||!this._events[e])return this;if(a=(n=this._events[e]).length,s=-1,n===t||r(n.listener)&&n.listener===t)delete this._events[e],this._events.removeListener&&this.emit("removeListener",e,t);else if(i(n)){for(c=a;c-- >0;)if(n[c]===t||n[c].listener&&n[c].listener===t){s=c;break}if(s<0)return this;1===n.length?(n.length=0,delete this._events[e]):n.splice(s,1),this._events.removeListener&&this.emit("removeListener",e,t)}return this},t.prototype.removeAllListeners=function(e){var t,i;if(!this._events)return this;if(!this._events.removeListener)return 0==arguments.length?this._events={}:this._events[e]&&delete this._events[e],this;if(0==arguments.length){for(t in this._events)"removeListener"!==t&&this.removeAllListeners(t);return this.removeAllListeners("removeListener"),this._events={},this}if(r(i=this._events[e]))this.removeListener(e,i);else if(i)for(;i.length;)this.removeListener(e,i[i.length-1]);return delete this._events[e],this},t.prototype.listeners=function(e){var t;return this._events&&this._events[e]?r(this._events[e])?[this._events[e]]:this._events[e].slice():[]},t.prototype.listenerCount=function(e){if(this._events){var t=this._events[e];if(r(t))return 1;if(t)return t.length}return 0},t.listenerCount=function(e,t){return e.listenerCount(t)}},8131:function(e,t,r){"use strict";var i=r(9374),n=r(7450),s=r(3650),a=r(7775),c=r(3076);function o(e,t,r,n){return new i(e,t,r,n)}o.version=r(4336),o.AlgoliaSearchHelper=i,o.SearchParameters=a,o.RecommendParameters=n,o.SearchResults=c,o.RecommendResults=s,e.exports=o},8078:function(e,t,r){"use strict";var i=r(7331);function n(e,t,r){this.main=e,this.fn=t,this.recommendFn=r,this.lastResults=null,this.lastRecommendResults=null}r(4853)(n,i),n.prototype.detach=function(){this.removeAllListeners(),this.main.detachDerivedHelper(this)},n.prototype.getModifiedState=function(e){return this.fn(e)},n.prototype.getModifiedRecommendState=function(e){return this.recommendFn(e)},e.exports=n},7450:function(e){"use strict";function t(e){e=e||{},this.params=e.params||[]}t.prototype={constructor:t,addParams:function(e){var r=this.params.slice();return r.push(e),new t({params:r})},removeParams:function(e){return new t({params:this.params.filter(function(t){return t.$$id!==e})})},addFrequentlyBoughtTogether:function(e){return this.addParams(Object.assign({},e,{model:"bought-together"}))},addRelatedProducts:function(e){return this.addParams(Object.assign({},e,{model:"related-products"}))},addTrendingItems:function(e){return this.addParams(Object.assign({},e,{model:"trending-items"}))},addTrendingFacets:function(e){return this.addParams(Object.assign({},e,{model:"trending-facets"}))},addLookingSimilar:function(e){return this.addParams(Object.assign({},e,{model:"looking-similar"}))},_buildQueries:function(e,t){return this.params.filter(function(e){return void 0===t[e.$$id]}).map(function(t){var r=Object.assign({},t,{indexName:e,threshold:t.threshold||0});return delete r.$$id,r})}},e.exports=t},3650:function(e){"use strict";function t(e,t){this._state=e,this._rawResults={};var r=this;e.params.forEach(function(e){var i=e.$$id;r[i]=t[i],r._rawResults[i]=t[i]})}t.prototype={constructor:t},e.exports=t},2437:function(e,t,r){"use strict";var i=r(2344),n=r(116),s=r(9803),a={addRefinement:function(e,t,r){if(a.isRefined(e,t,r))return e;var n=""+r,s=e[t]?e[t].concat(n):[n],c={};return c[t]=s,i(c,e)},removeRefinement:function(e,t,r){if(void 0===r)return a.clearRefinement(e,function(e,r){return t===r});var i=""+r;return a.clearRefinement(e,function(e,r){return t===r&&i===e})},toggleRefinement:function(e,t,r){if(void 0===r)throw Error("toggleRefinement should be used with a value");return a.isRefined(e,t,r)?a.removeRefinement(e,t,r):a.addRefinement(e,t,r)},clearRefinement:function(e,t,r){if(void 0===t)return n(e)?{}:e;if("string"==typeof t)return s(e,[t]);if("function"==typeof t){var i=!1,a=Object.keys(e).reduce(function(n,s){var a=e[s]||[],c=a.filter(function(e){return!t(e,s,r)});return c.length!==a.length&&(i=!0),n[s]=c,n},{});return i?a:e}},isRefined:function(e,t,r){var i=!!e[t]&&e[t].length>0;return void 0!==r&&i?-1!==e[t].indexOf(""+r):i}};e.exports=a},7775:function(e,t,r){"use strict";var i=r(2344),n=r(7888),s=r(2686),a=r(185),c=r(116),o=r(9803),u=r(8023),h=r(6801),l=r(2437);function f(e,t){return Array.isArray(e)&&Array.isArray(t)?e.length===t.length&&e.every(function(e,r){return f(t[r],e)}):e===t}function m(e){var t=e?m._parseNumbers(e):{};void 0===t.userToken||h(t.userToken)||console.warn("[algoliasearch-helper] The `userToken` parameter is invalid. This can lead to wrong analytics.\n - Format: [a-zA-Z0-9_-]{1,64}"),this.facets=t.facets||[],this.disjunctiveFacets=t.disjunctiveFacets||[],this.hierarchicalFacets=t.hierarchicalFacets||[],this.facetsRefinements=t.facetsRefinements||{},this.facetsExcludes=t.facetsExcludes||{},this.disjunctiveFacetsRefinements=t.disjunctiveFacetsRefinements||{},this.numericRefinements=t.numericRefinements||{},this.tagRefinements=t.tagRefinements||[],this.hierarchicalFacetsRefinements=t.hierarchicalFacetsRefinements||{};var r=this;Object.keys(t).forEach(function(e){var i=-1!==m.PARAMETERS.indexOf(e),n=void 0!==t[e];!i&&n&&(r[e]=t[e])})}m.PARAMETERS=Object.keys(new m),m._parseNumbers=function(e){if(e instanceof m)return e;var t={};if(["aroundPrecision","aroundRadius","getRankingInfo","minWordSizefor2Typos","minWordSizefor1Typo","page","maxValuesPerFacet","distinct","minimumAroundRadius","hitsPerPage","minProximity"].forEach(function(r){var i=e[r];if("string"==typeof i){var n=parseFloat(i);t[r]=isNaN(n)?i:n}}),Array.isArray(e.insideBoundingBox)&&(t.insideBoundingBox=e.insideBoundingBox.map(function(e){return Array.isArray(e)?e.map(function(e){return parseFloat(e)}):e})),e.numericRefinements){var r={};Object.keys(e.numericRefinements).forEach(function(t){var i=e.numericRefinements[t]||{};r[t]={},Object.keys(i).forEach(function(e){var n=i[e].map(function(e){return Array.isArray(e)?e.map(function(e){return"string"==typeof e?parseFloat(e):e}):"string"==typeof e?parseFloat(e):e});r[t][e]=n})}),t.numericRefinements=r}return a(e,t)},m.make=function(e){var t=new m(e);return(e.hierarchicalFacets||[]).forEach(function(e){if(e.rootPath){var r=t.getHierarchicalRefinement(e.name);r.length>0&&0!==r[0].indexOf(e.rootPath)&&(t=t.clearRefinements(e.name)),0===(r=t.getHierarchicalRefinement(e.name)).length&&(t=t.toggleHierarchicalFacetRefinement(e.name,e.rootPath))}}),t},m.validate=function(e,t){var r=t||{};return e.tagFilters&&r.tagRefinements&&r.tagRefinements.length>0?Error("[Tags] Cannot switch from the managed tag API to the advanced API. It is probably an error, if it is really what you want, you should first clear the tags with clearTags method."):e.tagRefinements.length>0&&r.tagFilters?Error("[Tags] Cannot switch from the advanced tag API to the managed API. It is probably an error, if it is not, you should first clear the tags with clearTags method."):e.numericFilters&&r.numericRefinements&&c(r.numericRefinements)?Error("[Numeric filters] Can't switch from the advanced to the managed API. It is probably an error, if this is really what you want, you have to first clear the numeric filters."):c(e.numericRefinements)&&r.numericFilters?Error("[Numeric filters] Can't switch from the managed API to the advanced. It is probably an error, if this is really what you want, you have to first clear the numeric filters."):null},m.prototype={constructor:m,clearRefinements:function(e){var t={numericRefinements:this._clearNumericRefinements(e),facetsRefinements:l.clearRefinement(this.facetsRefinements,e,"conjunctiveFacet"),facetsExcludes:l.clearRefinement(this.facetsExcludes,e,"exclude"),disjunctiveFacetsRefinements:l.clearRefinement(this.disjunctiveFacetsRefinements,e,"disjunctiveFacet"),hierarchicalFacetsRefinements:l.clearRefinement(this.hierarchicalFacetsRefinements,e,"hierarchicalFacet")};return t.numericRefinements===this.numericRefinements&&t.facetsRefinements===this.facetsRefinements&&t.facetsExcludes===this.facetsExcludes&&t.disjunctiveFacetsRefinements===this.disjunctiveFacetsRefinements&&t.hierarchicalFacetsRefinements===this.hierarchicalFacetsRefinements?this:this.setQueryParameters(t)},clearTags:function(){return void 0===this.tagFilters&&0===this.tagRefinements.length?this:this.setQueryParameters({tagFilters:void 0,tagRefinements:[]})},setIndex:function(e){return e===this.index?this:this.setQueryParameters({index:e})},setQuery:function(e){return e===this.query?this:this.setQueryParameters({query:e})},setPage:function(e){return e===this.page?this:this.setQueryParameters({page:e})},setFacets:function(e){return this.setQueryParameters({facets:e})},setDisjunctiveFacets:function(e){return this.setQueryParameters({disjunctiveFacets:e})},setHitsPerPage:function(e){return this.hitsPerPage===e?this:this.setQueryParameters({hitsPerPage:e})},setTypoTolerance:function(e){return this.typoTolerance===e?this:this.setQueryParameters({typoTolerance:e})},addNumericRefinement:function(e,t,r){var i=u(r);if(this.isNumericRefined(e,t,i))return this;var n=a({},this.numericRefinements);return n[e]=a({},n[e]),n[e][t]?(n[e][t]=n[e][t].slice(),n[e][t].push(i)):n[e][t]=[i],this.setQueryParameters({numericRefinements:n})},getConjunctiveRefinements:function(e){return this.isConjunctiveFacet(e)&&this.facetsRefinements[e]||[]},getDisjunctiveRefinements:function(e){return this.isDisjunctiveFacet(e)&&this.disjunctiveFacetsRefinements[e]||[]},getHierarchicalRefinement:function(e){return this.hierarchicalFacetsRefinements[e]||[]},getExcludeRefinements:function(e){return this.isConjunctiveFacet(e)&&this.facetsExcludes[e]||[]},removeNumericRefinement:function(e,t,r){return void 0!==r?this.isNumericRefined(e,t,r)?this.setQueryParameters({numericRefinements:this._clearNumericRefinements(function(i,n){return n===e&&i.op===t&&f(i.val,u(r))})}):this:void 0!==t?this.isNumericRefined(e,t)?this.setQueryParameters({numericRefinements:this._clearNumericRefinements(function(r,i){return i===e&&r.op===t})}):this:this.isNumericRefined(e)?this.setQueryParameters({numericRefinements:this._clearNumericRefinements(function(t,r){return r===e})}):this},getNumericRefinements:function(e){return this.numericRefinements[e]||{}},getNumericRefinement:function(e,t){return this.numericRefinements[e]&&this.numericRefinements[e][t]},_clearNumericRefinements:function(e){if(void 0===e)return c(this.numericRefinements)?{}:this.numericRefinements;if("string"==typeof e)return o(this.numericRefinements,[e]);if("function"==typeof e){var t=!1,r=this.numericRefinements,i=Object.keys(r).reduce(function(i,n){var s=r[n],a={};return Object.keys(s=s||{}).forEach(function(r){var i=s[r]||[],c=[];i.forEach(function(t){e({val:t,op:r},n,"numeric")||c.push(t)}),c.length!==i.length&&(t=!0),a[r]=c}),i[n]=a,i},{});return t?i:this.numericRefinements}},addFacet:function(e){return this.isConjunctiveFacet(e)?this:this.setQueryParameters({facets:this.facets.concat([e])})},addDisjunctiveFacet:function(e){return this.isDisjunctiveFacet(e)?this:this.setQueryParameters({disjunctiveFacets:this.disjunctiveFacets.concat([e])})},addHierarchicalFacet:function(e){if(this.isHierarchicalFacet(e.name))throw Error("Cannot declare two hierarchical facets with the same name: `"+e.name+"`");return this.setQueryParameters({hierarchicalFacets:this.hierarchicalFacets.concat([e])})},addFacetRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw Error(e+" is not defined in the facets attribute of the helper configuration");return l.isRefined(this.facetsRefinements,e,t)?this:this.setQueryParameters({facetsRefinements:l.addRefinement(this.facetsRefinements,e,t)})},addExcludeRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw Error(e+" is not defined in the facets attribute of the helper configuration");return l.isRefined(this.facetsExcludes,e,t)?this:this.setQueryParameters({facetsExcludes:l.addRefinement(this.facetsExcludes,e,t)})},addDisjunctiveFacetRefinement:function(e,t){if(!this.isDisjunctiveFacet(e))throw Error(e+" is not defined in the disjunctiveFacets attribute of the helper configuration");return l.isRefined(this.disjunctiveFacetsRefinements,e,t)?this:this.setQueryParameters({disjunctiveFacetsRefinements:l.addRefinement(this.disjunctiveFacetsRefinements,e,t)})},addTagRefinement:function(e){if(this.isTagRefined(e))return this;var t={tagRefinements:this.tagRefinements.concat(e)};return this.setQueryParameters(t)},removeFacet:function(e){return this.isConjunctiveFacet(e)?this.clearRefinements(e).setQueryParameters({facets:this.facets.filter(function(t){return t!==e})}):this},removeDisjunctiveFacet:function(e){return this.isDisjunctiveFacet(e)?this.clearRefinements(e).setQueryParameters({disjunctiveFacets:this.disjunctiveFacets.filter(function(t){return t!==e})}):this},removeHierarchicalFacet:function(e){return this.isHierarchicalFacet(e)?this.clearRefinements(e).setQueryParameters({hierarchicalFacets:this.hierarchicalFacets.filter(function(t){return t.name!==e})}):this},removeFacetRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw Error(e+" is not defined in the facets attribute of the helper configuration");return l.isRefined(this.facetsRefinements,e,t)?this.setQueryParameters({facetsRefinements:l.removeRefinement(this.facetsRefinements,e,t)}):this},removeExcludeRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw Error(e+" is not defined in the facets attribute of the helper configuration");return l.isRefined(this.facetsExcludes,e,t)?this.setQueryParameters({facetsExcludes:l.removeRefinement(this.facetsExcludes,e,t)}):this},removeDisjunctiveFacetRefinement:function(e,t){if(!this.isDisjunctiveFacet(e))throw Error(e+" is not defined in the disjunctiveFacets attribute of the helper configuration");return l.isRefined(this.disjunctiveFacetsRefinements,e,t)?this.setQueryParameters({disjunctiveFacetsRefinements:l.removeRefinement(this.disjunctiveFacetsRefinements,e,t)}):this},removeTagRefinement:function(e){if(!this.isTagRefined(e))return this;var t={tagRefinements:this.tagRefinements.filter(function(t){return t!==e})};return this.setQueryParameters(t)},toggleRefinement:function(e,t){return this.toggleFacetRefinement(e,t)},toggleFacetRefinement:function(e,t){if(this.isHierarchicalFacet(e))return this.toggleHierarchicalFacetRefinement(e,t);if(this.isConjunctiveFacet(e))return this.toggleConjunctiveFacetRefinement(e,t);if(this.isDisjunctiveFacet(e))return this.toggleDisjunctiveFacetRefinement(e,t);throw Error("Cannot refine the undeclared facet "+e+"; it should be added to the helper options facets, disjunctiveFacets or hierarchicalFacets")},toggleConjunctiveFacetRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw Error(e+" is not defined in the facets attribute of the helper configuration");return this.setQueryParameters({facetsRefinements:l.toggleRefinement(this.facetsRefinements,e,t)})},toggleExcludeFacetRefinement:function(e,t){if(!this.isConjunctiveFacet(e))throw Error(e+" is not defined in the facets attribute of the helper configuration");return this.setQueryParameters({facetsExcludes:l.toggleRefinement(this.facetsExcludes,e,t)})},toggleDisjunctiveFacetRefinement:function(e,t){if(!this.isDisjunctiveFacet(e))throw Error(e+" is not defined in the disjunctiveFacets attribute of the helper configuration");return this.setQueryParameters({disjunctiveFacetsRefinements:l.toggleRefinement(this.disjunctiveFacetsRefinements,e,t)})},toggleHierarchicalFacetRefinement:function(e,t){if(!this.isHierarchicalFacet(e))throw Error(e+" is not defined in the hierarchicalFacets attribute of the helper configuration");var r=this._getHierarchicalFacetSeparator(this.getHierarchicalFacetByName(e)),n={};return void 0!==this.hierarchicalFacetsRefinements[e]&&this.hierarchicalFacetsRefinements[e].length>0&&(this.hierarchicalFacetsRefinements[e][0]===t||0===this.hierarchicalFacetsRefinements[e][0].indexOf(t+r))?-1===t.indexOf(r)?n[e]=[]:n[e]=[t.slice(0,t.lastIndexOf(r))]:n[e]=[t],this.setQueryParameters({hierarchicalFacetsRefinements:i(n,this.hierarchicalFacetsRefinements)})},addHierarchicalFacetRefinement:function(e,t){if(this.isHierarchicalFacetRefined(e))throw Error(e+" is already refined.");if(!this.isHierarchicalFacet(e))throw Error(e+" is not defined in the hierarchicalFacets attribute of the helper configuration.");var r={};return r[e]=[t],this.setQueryParameters({hierarchicalFacetsRefinements:i(r,this.hierarchicalFacetsRefinements)})},removeHierarchicalFacetRefinement:function(e){if(!this.isHierarchicalFacetRefined(e))return this;var t={};return t[e]=[],this.setQueryParameters({hierarchicalFacetsRefinements:i(t,this.hierarchicalFacetsRefinements)})},toggleTagRefinement:function(e){return this.isTagRefined(e)?this.removeTagRefinement(e):this.addTagRefinement(e)},isDisjunctiveFacet:function(e){return this.disjunctiveFacets.indexOf(e)>-1},isHierarchicalFacet:function(e){return void 0!==this.getHierarchicalFacetByName(e)},isConjunctiveFacet:function(e){return this.facets.indexOf(e)>-1},isFacetRefined:function(e,t){return!!this.isConjunctiveFacet(e)&&l.isRefined(this.facetsRefinements,e,t)},isExcludeRefined:function(e,t){return!!this.isConjunctiveFacet(e)&&l.isRefined(this.facetsExcludes,e,t)},isDisjunctiveFacetRefined:function(e,t){return!!this.isDisjunctiveFacet(e)&&l.isRefined(this.disjunctiveFacetsRefinements,e,t)},isHierarchicalFacetRefined:function(e,t){if(!this.isHierarchicalFacet(e))return!1;var r=this.getHierarchicalRefinement(e);return t?-1!==r.indexOf(t):r.length>0},isNumericRefined:function(e,t,r){if(void 0===r&&void 0===t)return!!this.numericRefinements[e];var i=this.numericRefinements[e]&&void 0!==this.numericRefinements[e][t];if(void 0===r||!i)return i;var s=u(r),a=void 0!==n(this.numericRefinements[e][t],function(e){return f(e,s)});return i&&a},isTagRefined:function(e){return -1!==this.tagRefinements.indexOf(e)},getRefinedDisjunctiveFacets:function(){var e=this,t=s(Object.keys(this.numericRefinements).filter(function(t){return Object.keys(e.numericRefinements[t]).length>0}),this.disjunctiveFacets);return Object.keys(this.disjunctiveFacetsRefinements).filter(function(t){return e.disjunctiveFacetsRefinements[t].length>0}).concat(t).concat(this.getRefinedHierarchicalFacets()).sort()},getRefinedHierarchicalFacets:function(){var e=this;return s(this.hierarchicalFacets.map(function(e){return e.name}),Object.keys(this.hierarchicalFacetsRefinements).filter(function(t){return e.hierarchicalFacetsRefinements[t].length>0})).sort()},getUnrefinedDisjunctiveFacets:function(){var e=this.getRefinedDisjunctiveFacets();return this.disjunctiveFacets.filter(function(t){return -1===e.indexOf(t)})},managedParameters:["index","facets","disjunctiveFacets","facetsRefinements","hierarchicalFacets","facetsExcludes","disjunctiveFacetsRefinements","numericRefinements","tagRefinements","hierarchicalFacetsRefinements"],getQueryParams:function(){var e=this.managedParameters,t={},r=this;return Object.keys(this).forEach(function(i){var n=r[i];-1===e.indexOf(i)&&void 0!==n&&(t[i]=n)}),t},setQueryParameter:function(e,t){if(this[e]===t)return this;var r={};return r[e]=t,this.setQueryParameters(r)},setQueryParameters:function(e){if(!e)return this;var t=m.validate(this,e);if(t)throw t;var r=this,i=m._parseNumbers(e),n=Object.keys(this).reduce(function(e,t){return e[t]=r[t],e},{}),s=Object.keys(i).reduce(function(e,t){var r=void 0!==e[t],n=void 0!==i[t];return r&&!n?o(e,[t]):(n&&(e[t]=i[t]),e)},n);return new this.constructor(s)},resetPage:function(){return void 0===this.page?this:this.setPage(0)},_getHierarchicalFacetSortBy:function(e){return e.sortBy||["isRefined:desc","name:asc"]},_getHierarchicalFacetSeparator:function(e){return e.separator||" > "},_getHierarchicalRootPath:function(e){return e.rootPath||null},_getHierarchicalShowParentLevel:function(e){return"boolean"!=typeof e.showParentLevel||e.showParentLevel},getHierarchicalFacetByName:function(e){return n(this.hierarchicalFacets,function(t){return t.name===e})},getHierarchicalFacetBreadcrumb:function(e){if(!this.isHierarchicalFacet(e))return[];var t=this.getHierarchicalRefinement(e)[0];if(!t)return[];var r=this._getHierarchicalFacetSeparator(this.getHierarchicalFacetByName(e));return t.split(r).map(function(e){return e.trim()})},toString:function(){return JSON.stringify(this,null,2)}},e.exports=m},210:function(e,t,r){"use strict";e.exports=function(e){return function(t,r){var i,u,h,l,f,m=e.hierarchicalFacets[r],d=e.hierarchicalFacetsRefinements[m.name]&&e.hierarchicalFacetsRefinements[m.name][0]||"",p=e._getHierarchicalFacetSeparator(m),g=e._getHierarchicalRootPath(m),v=e._getHierarchicalShowParentLevel(m),y=s(e._getHierarchicalFacetSortBy(m)),R=t.every(function(e){return e.exhaustive}),F=(i=y,u=p,h=g,l=v,f=d,function(e,t,r){var s=e;if(r>0){var m=0;for(s=e;m-1});if(i){var n=i.attributes.indexOf(t),u=c(e.hierarchicalFacets,function(e){return e.name===i.name});o.hierarchicalFacets[u][n]={attribute:t,data:r,exhaustive:s.exhaustiveFacetsCount}}else{var h,l=-1!==e.disjunctiveFacets.indexOf(t),f=-1!==e.facets.indexOf(t);l&&(h=v[t],o.disjunctiveFacets[h]={name:t,data:r,exhaustive:s.exhaustiveFacetsCount},p(o.disjunctiveFacets[h],s.facets_stats,t)),f&&(h=g[t],o.facets[h]={name:t,data:r,exhaustive:s.exhaustiveFacetsCount},p(o.facets[h],s.facets_stats,t))}}),this.hierarchicalFacets=i(this.hierarchicalFacets),l.forEach(function(r){var i=t[y],a=i&&i.facets?i.facets:{},h=e.getHierarchicalFacetByName(r);Object.keys(a).forEach(function(t){var r,l=a[t];if(h){r=c(e.hierarchicalFacets,function(e){return e.name===h.name});var m=c(o.hierarchicalFacets[r],function(e){return e.attribute===t});if(-1===m)return;o.hierarchicalFacets[r][m].data=o.persistHierarchicalRootCount?u(o.hierarchicalFacets[r][m].data,l):n(l,o.hierarchicalFacets[r][m].data)}else{r=v[t];var d=s.facets&&s.facets[t]||{};o.disjunctiveFacets[r]={name:t,data:u(d,l),exhaustive:i.exhaustiveFacetsCount},p(o.disjunctiveFacets[r],i.facets_stats,t),e.disjunctiveFacetsRefinements[t]&&e.disjunctiveFacetsRefinements[t].forEach(function(i){!o.disjunctiveFacets[r].data[i]&&e.disjunctiveFacetsRefinements[t].indexOf(f(i))>-1&&(o.disjunctiveFacets[r].data[i]=0)})}}),y++}),e.getRefinedHierarchicalFacets().forEach(function(r){var i=e.getHierarchicalFacetByName(r),s=e._getHierarchicalFacetSeparator(i),a=e.getHierarchicalRefinement(r);0!==a.length&&!(a[0].split(s).length<2)&&t.slice(y).forEach(function(t){var r=t&&t.facets?t.facets:{};Object.keys(r).forEach(function(t){var u=r[t],h=c(e.hierarchicalFacets,function(e){return e.name===i.name}),l=c(o.hierarchicalFacets[h],function(e){return e.attribute===t});if(-1!==l){var f={};if(a.length>0&&!o.persistHierarchicalRootCount){var m=a[0].split(s)[0];f[m]=o.hierarchicalFacets[h][l].data[m]}o.hierarchicalFacets[h][l].data=n(f,u,o.hierarchicalFacets[h][l].data)}}),y++})}),Object.keys(e.facetsExcludes).forEach(function(t){var r=e.facetsExcludes[t],i=g[t];o.facets[i]={name:t,data:R[t],exhaustive:s.exhaustiveFacetsCount},r.forEach(function(e){o.facets[i]=o.facets[i]||{name:t},o.facets[i].data=o.facets[i].data||{},o.facets[i].data[e]=0})}),this.hierarchicalFacets=this.hierarchicalFacets.map(m(e)),this.facets=i(this.facets),this.disjunctiveFacets=i(this.disjunctiveFacets),this._state=e}function v(e,t){var r=a(e,function(e){return e.name===t});return r&&r.stats}function y(e,t,r,i,n){var s=a(n,function(e){return e.name===r}),c=s&&s.data&&s.data[i]?s.data[i]:0;return{type:t,attributeName:r,name:i,count:c,exhaustive:s&&s.exhaustive||!1}}g.prototype.getFacetByName=function(e){function t(t){return t.name===e}return a(this.facets,t)||a(this.disjunctiveFacets,t)||a(this.hierarchicalFacets,t)},g.DEFAULT_SORT=["isRefined:desc","count:desc","name:asc"],g.prototype.getFacetValues=function(e,t){var r,i=function(e,t){function r(e){return e.name===t}if(e._state.isConjunctiveFacet(t)){var i=a(e.facets,r);return i?Object.keys(i.data).map(function(r){var n=l(r);return{name:r,escapedValue:n,count:i.data[r],isRefined:e._state.isFacetRefined(t,n),isExcluded:e._state.isExcludeRefined(t,r)}}):[]}if(e._state.isDisjunctiveFacet(t)){var n=a(e.disjunctiveFacets,r);return n?Object.keys(n.data).map(function(r){var i=l(r);return{name:r,escapedValue:i,count:n.data[r],isRefined:e._state.isDisjunctiveFacetRefined(t,i)}}):[]}if(e._state.isHierarchicalFacet(t)){var s=a(e.hierarchicalFacets,r);if(!s)return s;var c=e._state.getHierarchicalFacetByName(t),o=e._state._getHierarchicalFacetSeparator(c),u=f(e._state.getHierarchicalRefinement(t)[0]||"");0===u.indexOf(c.rootPath)&&(u=u.replace(c.rootPath+o,""));var h=u.split(o);return h.unshift(t),function e(t,r,i){t.isRefined=t.name===(r[i]&&r[i].trim()),t.data&&t.data.forEach(function(t){e(t,r,i+1)})}(s,h,0),s}}(this,e);if(i){var s=n(t,{sortBy:g.DEFAULT_SORT,facetOrdering:!(t&&t.sortBy)}),c=this;return r=Array.isArray(i)?[e]:c._state.getHierarchicalFacetByName(i.name).attributes,function e(t,r,i,s){if(s=s||0,Array.isArray(r))return t(r,i[s]);if(!r.data||0===r.data.length)return r;var a=r.data.map(function(r){return e(t,r,i,s+1)});return n({data:t(a,i[s])},r)}(function(e,t){if(s.facetOrdering){var r,i,n,a,u,l,f,m=c.renderingContent&&c.renderingContent.facetOrdering&&c.renderingContent.facetOrdering.values&&c.renderingContent.facetOrdering.values[t];if(m)return n=[],a=[],u=m.hide||[],l=(m.order||[]).reduce(function(e,t,r){return e[t]=r,e},{}),e.forEach(function(e){var t=e.path||e.name,r=u.indexOf(t)>-1;r||void 0===l[t]?r||a.push(e):n[l[t]]=e}),n=n.filter(function(e){return e}),"hidden"===(f=m.sortRemainingBy)?n:(i="alpha"===f?[["path","name"],["asc","asc"]]:[["count"],["desc"]],n.concat(h(a,i[0],i[1])))}if(Array.isArray(s.sortBy)){var d=o(s.sortBy,g.DEFAULT_SORT);return h(e,d[0],d[1])}if("function"==typeof s.sortBy)return r=s.sortBy,e.sort(r);throw Error("options.sortBy is optional but if defined it must be either an array of string (predicates) or a sorting function")},i,r)}},g.prototype.getFacetStats=function(e){return this._state.isConjunctiveFacet(e)?v(this.facets,e):this._state.isDisjunctiveFacet(e)?v(this.disjunctiveFacets,e):void 0},g.prototype.getRefinements=function(){var e=this._state,t=this,r=[];return Object.keys(e.facetsRefinements).forEach(function(i){e.facetsRefinements[i].forEach(function(n){r.push(y(e,"facet",i,n,t.facets))})}),Object.keys(e.facetsExcludes).forEach(function(i){e.facetsExcludes[i].forEach(function(n){r.push(y(e,"exclude",i,n,t.facets))})}),Object.keys(e.disjunctiveFacetsRefinements).forEach(function(i){e.disjunctiveFacetsRefinements[i].forEach(function(n){r.push(y(e,"disjunctive",i,n,t.disjunctiveFacets))})}),Object.keys(e.hierarchicalFacetsRefinements).forEach(function(i){e.hierarchicalFacetsRefinements[i].forEach(function(n){var s,c,o,u,h,l,f,m,d,p,g;r.push((s=e,c=i,o=n,u=t.hierarchicalFacets,h=s.getHierarchicalFacetByName(c),l=s._getHierarchicalFacetSeparator(h),f=o.split(l),m=a(u,function(e){return e.name===c}),p=(d=f.reduce(function(e,t){var r=e&&a(e.data,function(e){return e.name===t});return void 0!==r?r:e},m))&&d.count||0,g=d&&d.exhaustive||!1,{type:"hierarchical",attributeName:c,name:d&&d.path||"",count:p,exhaustive:g}))})}),Object.keys(e.numericRefinements).forEach(function(t){var i=e.numericRefinements[t];Object.keys(i).forEach(function(e){i[e].forEach(function(i){r.push({type:"numeric",attributeName:t,name:i,numericValue:i,operator:e})})})}),e.tagRefinements.forEach(function(e){r.push({type:"tag",attributeName:"_tags",name:e})}),r},e.exports=g},9374:function(e,t,r){"use strict";var i=r(7331),n=r(8078),s=r(4039).escapeFacetValue,a=r(4853),c=r(185),o=r(116),u=r(9803),h=r(7450),l=r(3650),f=r(6394),m=r(7775),d=r(3076),p=r(7878),g=r(4336);function v(e,t,r,i){"function"==typeof e.addAlgoliaAgent&&e.addAlgoliaAgent("JS Helper ("+g+")"),this.setClient(e);var n=r||{};n.index=t,this.state=m.make(n),this.recommendState=new h({params:n.recommendState}),this.lastResults=null,this.lastRecommendResults=null,this._queryId=0,this._recommendQueryId=0,this._lastQueryIdReceived=-1,this._lastRecommendQueryIdReceived=-1,this.derivedHelpers=[],this._currentNbQueries=0,this._currentNbRecommendQueries=0,this._searchResultsOptions=i,this._recommendCache={}}function y(e){if(e<0)throw Error("Page requested below 0.");return this._change({state:this.state.setPage(e),isPageReset:!1}),this}function R(){return this.state.page}a(v,i),v.prototype.search=function(){return this._search({onlyWithDerivedHelpers:!1}),this},v.prototype.searchOnlyWithDerivedHelpers=function(){return this._search({onlyWithDerivedHelpers:!0}),this},v.prototype.searchWithComposition=function(){return this._runComposition({onlyWithDerivedHelpers:!0}),this},v.prototype.recommend=function(){return this._recommend(),this},v.prototype.getQuery=function(){var e=this.state;return f._getHitsSearchParams(e)},v.prototype.searchOnce=function(e,t){var r=e?this.state.setQueryParameters(e):this.state,i=f._getQueries(r.index,r),n=this;if(this._currentNbQueries++,this.emit("searchOnce",{state:r}),t){this.client.search(i).then(function(e){n._currentNbQueries--,0===n._currentNbQueries&&n.emit("searchQueueEmpty"),t(null,new d(r,e.results),r)}).catch(function(e){n._currentNbQueries--,0===n._currentNbQueries&&n.emit("searchQueueEmpty"),t(e,null,r)});return}return this.client.search(i).then(function(e){return n._currentNbQueries--,0===n._currentNbQueries&&n.emit("searchQueueEmpty"),{content:new d(r,e.results),state:r,_originalResponse:e}},function(e){throw n._currentNbQueries--,0===n._currentNbQueries&&n.emit("searchQueueEmpty"),e})},v.prototype.findAnswers=function(e){console.warn("[algoliasearch-helper] answers is no longer supported");var t=this.state,r=this.derivedHelpers[0];if(!r)return Promise.resolve([]);var i=r.getModifiedState(t),n=c({attributesForPrediction:e.attributesForPrediction,nbHits:e.nbHits},{params:u(f._getHitsSearchParams(i),["attributesToSnippet","hitsPerPage","restrictSearchableAttributes","snippetEllipsisText"])}),s="search for answers was called, but this client does not have a function client.initIndex(index).findAnswers";if("function"!=typeof this.client.initIndex)throw Error(s);var a=this.client.initIndex(i.index);if("function"!=typeof a.findAnswers)throw Error(s);return a.findAnswers(i.query,e.queryLanguages,n)},v.prototype.searchForFacetValues=function(e,t,r,i){var n,a="function"==typeof this.client.searchForFacetValues&&"function"!=typeof this.client.searchForFacets,c="function"==typeof this.client.initIndex;if(!a&&!c&&"function"!=typeof this.client.search)throw Error("search for facet values (searchable) was called, but this client does not have a function client.searchForFacetValues or client.initIndex(index).searchForFacetValues");var o=this.state.setQueryParameters(i||{}),u=o.isDisjunctiveFacet(e),h=f.getSearchForFacetQuery(e,t,r,o);this._currentNbQueries++;var l=this;return a?n=this.client.searchForFacetValues([{indexName:o.index,params:h}]):c?n=this.client.initIndex(o.index).searchForFacetValues(h):(delete h.facetName,n=this.client.search([{type:"facet",facet:e,indexName:o.index,params:h}]).then(function(e){return e.results[0]})),this.emit("searchForFacetValues",{state:o,facet:e,query:t}),n.then(function(t){return l._currentNbQueries--,0===l._currentNbQueries&&l.emit("searchQueueEmpty"),(t=Array.isArray(t)?t[0]:t).facetHits.forEach(function(t){t.escapedValue=s(t.value),t.isRefined=u?o.isDisjunctiveFacetRefined(e,t.escapedValue):o.isFacetRefined(e,t.escapedValue)}),t},function(e){throw l._currentNbQueries--,0===l._currentNbQueries&&l.emit("searchQueueEmpty"),e})},v.prototype.searchForCompositionFacetValues=function(e,t,r,i){if("function"!=typeof this.client.searchForFacetValues)throw Error("search for facet values (searchable) was called, but this client does not have a function client.searchForFacetValues");var n,a=this.state.setQueryParameters(i||{}),c=a.isDisjunctiveFacet(e);this._currentNbQueries++;var o=this;return n=this.client.searchForFacetValues({compositionID:a.index,facetName:e,searchForFacetValuesRequest:{params:{query:t,maxFacetHits:r,searchQuery:f._getCompositionHitsSearchParams(a)}}}),this.emit("searchForFacetValues",{state:a,facet:e,query:t}),n.then(function(t){return o._currentNbQueries--,0===o._currentNbQueries&&o.emit("searchQueueEmpty"),(t=t.results[0]).facetHits.forEach(function(t){t.escapedValue=s(t.value),t.isRefined=c?a.isDisjunctiveFacetRefined(e,t.escapedValue):a.isFacetRefined(e,t.escapedValue)}),t},function(e){throw o._currentNbQueries--,0===o._currentNbQueries&&o.emit("searchQueueEmpty"),e})},v.prototype.setQuery=function(e){return this._change({state:this.state.resetPage().setQuery(e),isPageReset:!0}),this},v.prototype.clearRefinements=function(e){return this._change({state:this.state.resetPage().clearRefinements(e),isPageReset:!0}),this},v.prototype.clearTags=function(){return this._change({state:this.state.resetPage().clearTags(),isPageReset:!0}),this},v.prototype.addDisjunctiveFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().addDisjunctiveFacetRefinement(e,t),isPageReset:!0}),this},v.prototype.addDisjunctiveRefine=function(){return this.addDisjunctiveFacetRefinement.apply(this,arguments)},v.prototype.addHierarchicalFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().addHierarchicalFacetRefinement(e,t),isPageReset:!0}),this},v.prototype.addNumericRefinement=function(e,t,r){return this._change({state:this.state.resetPage().addNumericRefinement(e,t,r),isPageReset:!0}),this},v.prototype.addFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().addFacetRefinement(e,t),isPageReset:!0}),this},v.prototype.addRefine=function(){return this.addFacetRefinement.apply(this,arguments)},v.prototype.addFacetExclusion=function(e,t){return this._change({state:this.state.resetPage().addExcludeRefinement(e,t),isPageReset:!0}),this},v.prototype.addExclude=function(){return this.addFacetExclusion.apply(this,arguments)},v.prototype.addTag=function(e){return this._change({state:this.state.resetPage().addTagRefinement(e),isPageReset:!0}),this},v.prototype.addFrequentlyBoughtTogether=function(e){return this._recommendChange({state:this.recommendState.addFrequentlyBoughtTogether(e)}),this},v.prototype.addRelatedProducts=function(e){return this._recommendChange({state:this.recommendState.addRelatedProducts(e)}),this},v.prototype.addTrendingItems=function(e){return this._recommendChange({state:this.recommendState.addTrendingItems(e)}),this},v.prototype.addTrendingFacets=function(e){return this._recommendChange({state:this.recommendState.addTrendingFacets(e)}),this},v.prototype.addLookingSimilar=function(e){return this._recommendChange({state:this.recommendState.addLookingSimilar(e)}),this},v.prototype.removeNumericRefinement=function(e,t,r){return this._change({state:this.state.resetPage().removeNumericRefinement(e,t,r),isPageReset:!0}),this},v.prototype.removeDisjunctiveFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().removeDisjunctiveFacetRefinement(e,t),isPageReset:!0}),this},v.prototype.removeDisjunctiveRefine=function(){return this.removeDisjunctiveFacetRefinement.apply(this,arguments)},v.prototype.removeHierarchicalFacetRefinement=function(e){return this._change({state:this.state.resetPage().removeHierarchicalFacetRefinement(e),isPageReset:!0}),this},v.prototype.removeFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().removeFacetRefinement(e,t),isPageReset:!0}),this},v.prototype.removeRefine=function(){return this.removeFacetRefinement.apply(this,arguments)},v.prototype.removeFacetExclusion=function(e,t){return this._change({state:this.state.resetPage().removeExcludeRefinement(e,t),isPageReset:!0}),this},v.prototype.removeExclude=function(){return this.removeFacetExclusion.apply(this,arguments)},v.prototype.removeTag=function(e){return this._change({state:this.state.resetPage().removeTagRefinement(e),isPageReset:!0}),this},v.prototype.removeFrequentlyBoughtTogether=function(e){return this._recommendChange({state:this.recommendState.removeParams(e)}),this},v.prototype.removeRelatedProducts=function(e){return this._recommendChange({state:this.recommendState.removeParams(e)}),this},v.prototype.removeTrendingItems=function(e){return this._recommendChange({state:this.recommendState.removeParams(e)}),this},v.prototype.removeTrendingFacets=function(e){return this._recommendChange({state:this.recommendState.removeParams(e)}),this},v.prototype.removeLookingSimilar=function(e){return this._recommendChange({state:this.recommendState.removeParams(e)}),this},v.prototype.toggleFacetExclusion=function(e,t){return this._change({state:this.state.resetPage().toggleExcludeFacetRefinement(e,t),isPageReset:!0}),this},v.prototype.toggleExclude=function(){return this.toggleFacetExclusion.apply(this,arguments)},v.prototype.toggleRefinement=function(e,t){return this.toggleFacetRefinement(e,t)},v.prototype.toggleFacetRefinement=function(e,t){return this._change({state:this.state.resetPage().toggleFacetRefinement(e,t),isPageReset:!0}),this},v.prototype.toggleRefine=function(){return this.toggleFacetRefinement.apply(this,arguments)},v.prototype.toggleTag=function(e){return this._change({state:this.state.resetPage().toggleTagRefinement(e),isPageReset:!0}),this},v.prototype.nextPage=function(){var e=this.state.page||0;return this.setPage(e+1)},v.prototype.previousPage=function(){var e=this.state.page||0;return this.setPage(e-1)},v.prototype.setCurrentPage=y,v.prototype.setPage=y,v.prototype.setIndex=function(e){return this._change({state:this.state.resetPage().setIndex(e),isPageReset:!0}),this},v.prototype.setQueryParameter=function(e,t){return this._change({state:this.state.resetPage().setQueryParameter(e,t),isPageReset:!0}),this},v.prototype.setState=function(e){return this._change({state:m.make(e),isPageReset:!1}),this},v.prototype.overrideStateWithoutTriggeringChangeEvent=function(e){return this.state=new m(e),this},v.prototype.hasRefinements=function(e){return!!o(this.state.getNumericRefinements(e))||(this.state.isConjunctiveFacet(e)?this.state.isFacetRefined(e):this.state.isDisjunctiveFacet(e)?this.state.isDisjunctiveFacetRefined(e):!!this.state.isHierarchicalFacet(e)&&this.state.isHierarchicalFacetRefined(e))},v.prototype.isExcluded=function(e,t){return this.state.isExcludeRefined(e,t)},v.prototype.isDisjunctiveRefined=function(e,t){return this.state.isDisjunctiveFacetRefined(e,t)},v.prototype.hasTag=function(e){return this.state.isTagRefined(e)},v.prototype.isTagRefined=function(){return this.hasTagRefinements.apply(this,arguments)},v.prototype.getIndex=function(){return this.state.index},v.prototype.getCurrentPage=R,v.prototype.getPage=R,v.prototype.getTags=function(){return this.state.tagRefinements},v.prototype.getRefinements=function(e){var t=[];this.state.isConjunctiveFacet(e)?(this.state.getConjunctiveRefinements(e).forEach(function(e){t.push({value:e,type:"conjunctive"})}),this.state.getExcludeRefinements(e).forEach(function(e){t.push({value:e,type:"exclude"})})):this.state.isDisjunctiveFacet(e)&&this.state.getDisjunctiveRefinements(e).forEach(function(e){t.push({value:e,type:"disjunctive"})});var r=this.state.getNumericRefinements(e);return Object.keys(r).forEach(function(e){var i=r[e];t.push({value:i,operator:e,type:"numeric"})}),t},v.prototype.getNumericRefinement=function(e,t){return this.state.getNumericRefinement(e,t)},v.prototype.getHierarchicalFacetBreadcrumb=function(e){return this.state.getHierarchicalFacetBreadcrumb(e)},v.prototype._search=function(e){var t=this.state,r=[],i=[];e.onlyWithDerivedHelpers||(i=f._getQueries(t.index,t),r.push({state:t,queriesCount:i.length,helper:this}),this.emit("search",{state:t,results:this.lastResults}));var n=this.derivedHelpers.map(function(e){var i=e.getModifiedState(t),n=i.index?f._getQueries(i.index,i):[];return r.push({state:i,queriesCount:n.length,helper:e}),e.emit("search",{state:i,results:e.lastResults}),n}),s=Array.prototype.concat.apply(i,n),a=this._queryId++;if(this._currentNbQueries++,!s.length)return Promise.resolve({results:[]}).then(this._dispatchAlgoliaResponse.bind(this,r,a));try{this.client.search(s).then(this._dispatchAlgoliaResponse.bind(this,r,a)).catch(this._dispatchAlgoliaError.bind(this,a))}catch(e){this.emit("error",{error:e})}},v.prototype._runComposition=function(){var e=this.state,t=[],r=this.derivedHelpers.map(function(r){var i=r.getModifiedState(e),n=f._getCompositionQueries(i);return t.push({state:i,queriesCount:n.length,helper:r}),r.emit("search",{state:i,results:r.lastResults}),n}),i=Array.prototype.concat.apply([],r),n=this._queryId++;if(this._currentNbQueries++,!i.length)return Promise.resolve({results:[]}).then(this._dispatchAlgoliaResponse.bind(this,t,n));if(i.length>1)throw Error("Only one query is allowed when using a composition.");var s=i[0];try{this.client.search(s).then(this._dispatchAlgoliaResponse.bind(this,t,n)).catch(this._dispatchAlgoliaError.bind(this,n))}catch(e){this.emit("error",{error:e})}},v.prototype._recommend=function(){var e=this.state,t=this.recommendState,r=this.getIndex(),i=[{state:t,index:r,helper:this}],n=t.params.map(function(e){return e.$$id});this.emit("fetch",{recommend:{state:t,results:this.lastRecommendResults}});var s=this._recommendCache,a=this.derivedHelpers.map(function(t){var r=t.getModifiedState(e).index;if(!r)return[];var a=t.getModifiedRecommendState(new h);return i.push({state:a,index:r,helper:t}),n=Array.prototype.concat.apply(n,a.params.map(function(e){return e.$$id})),t.emit("fetch",{recommend:{state:a,results:t.lastRecommendResults}}),a._buildQueries(r,s)}),c=Array.prototype.concat.apply(this.recommendState._buildQueries(r,s),a);if(0!==c.length){if(c.length>0&&void 0===this.client.getRecommendations){console.warn("Please update algoliasearch/lite to the latest version in order to use recommend widgets.");return}var o=this._recommendQueryId++;this._currentNbRecommendQueries++;try{this.client.getRecommendations(c).then(this._dispatchRecommendResponse.bind(this,o,i,n)).catch(this._dispatchRecommendError.bind(this,o))}catch(e){this.emit("error",{error:e})}}},v.prototype._dispatchAlgoliaResponse=function(e,t,r){var i=this;if(!(t0},v.prototype._change=function(e){var t=e.state,r=e.isPageReset;t!==this.state&&(this.state=t,this.emit("change",{state:this.state,results:this.lastResults,isPageReset:r}))},v.prototype._recommendChange=function(e){var t=e.state;t!==this.recommendState&&(this.recommendState=t,this.emit("recommend:change",{search:{results:this.lastResults,state:this.state},recommend:{results:this.lastRecommendResults,state:this.recommendState}}))},v.prototype.clearCache=function(){return this.client.clearCache&&this.client.clearCache(),this},v.prototype.setClient=function(e){return this.client===e||("function"==typeof e.addAlgoliaAgent&&e.addAlgoliaAgent("JS Helper ("+g+")"),this.client=e),this},v.prototype.getClient=function(){return this.client},v.prototype.derive=function(e,t){var r=new n(this,e,t);return this.derivedHelpers.push(r),r},v.prototype.detachDerivedHelper=function(e){var t=this.derivedHelpers.indexOf(e);if(-1===t)throw Error("Derived helper already detached");this.derivedHelpers.splice(t,1)},v.prototype.hasPendingRequests=function(){return this._currentNbQueries>0},e.exports=v},4587:function(e){"use strict";e.exports=function(e){return Array.isArray(e)?e.filter(Boolean):[]}},2344:function(e){"use strict";e.exports=function(){var e=Array.prototype.slice.call(arguments);return e.reduceRight(function(e,t){return Object.keys(Object(t)).forEach(function(r){void 0!==t[r]&&(void 0!==e[r]&&delete e[r],e[r]=t[r])}),e},{})}},4039:function(e){"use strict";e.exports={escapeFacetValue:function(e){return"string"!=typeof e?e:String(e).replace(/^-/,"\\-")},unescapeFacetValue:function(e){return"string"!=typeof e?e:e.replace(/^\\-/,"-")}}},7888:function(e){"use strict";e.exports=function(e,t){if(Array.isArray(e)){for(var r=0;r1||!s?(e[0].push(n[0]),e[1].push(n[1])):(e[0].push(s[0]),e[1].push(s[1])),e},[[],[]])}},4853:function(e){"use strict";e.exports=function(e,t){e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}})}},2686:function(e){"use strict";e.exports=function(e,t){return e.filter(function(r,i){return t.indexOf(r)>-1&&e.indexOf(r)===i})}},185:function(e){"use strict";function t(e){return"function"==typeof e||Array.isArray(e)||"[object Object]"===Object.prototype.toString.call(e)}e.exports=function(e){t(e)||(e={});for(var r=1,i=arguments.length;r=i&&(void 0!==e[r]&&delete e[r],e[r]=n)}),e},{})}},116:function(e){"use strict";e.exports=function(e){return e&&Object.keys(e).length>0}},9803:function(e){"use strict";e.exports=function(e,t){if(null===e)return{};var r,i,n={},s=Object.keys(e);for(i=0;i=0||(n[r]=e[r]);return n}},2148:function(e){"use strict";e.exports=function(e,t,r){if(!Array.isArray(e))return[];Array.isArray(r)||(r=[]);var i=e.map(function(e,r){return{criteria:t.map(function(t){return e[t]}),index:r,value:e}});return i.sort(function(e,t){for(var i=-1;++it||i&&n||!r)return 1;if(!i&&e=r.length)return n;if("desc"===r[i])return-n;return n}}return e.index-t.index}),i.map(function(e){return e.value})}},8023:function(e){"use strict";e.exports=function e(t){if("number"==typeof t)return t;if("string"==typeof t)return parseFloat(t);if(Array.isArray(t))return t.map(e);throw Error("The value should be a number, a parsable string or an array of those.")}},6394:function(e,t,r){"use strict";var i=r(185);function n(e){return Object.keys(e).sort().reduce(function(t,r){return t[r]=e[r],t},{})}var s={_getQueries:function(e,t){var r=[];return r.push({indexName:e,params:s._getHitsSearchParams(t)}),t.getRefinedDisjunctiveFacets().forEach(function(i){r.push({indexName:e,params:s._getDisjunctiveFacetSearchParams(t,i)})}),t.getRefinedHierarchicalFacets().forEach(function(i){var n=t.getHierarchicalFacetByName(i),a=t.getHierarchicalRefinement(i),c=t._getHierarchicalFacetSeparator(n);if(a.length>0&&a[0].split(c).length>1){var o=a[0].split(c).slice(0,-1).reduce(function(e,t,r){return e.concat({attribute:n.attributes[r],value:0===r?t:[e[e.length-1].value,t].join(c)})},[]);o.forEach(function(i,a){var c=s._getDisjunctiveFacetSearchParams(t,i.attribute,0===a);function u(e){return n.attributes.some(function(t){return t===e.split(":")[0]})}var h=(c.facetFilters||[]).reduce(function(e,t){if(Array.isArray(t)){var r=t.filter(function(e){return!u(e)});r.length>0&&e.push(r)}return"string"!=typeof t||u(t)||e.push(t),e},[]),l=o[a-1];a>0?c.facetFilters=h.concat(l.attribute+":"+l.value):h.length>0?c.facetFilters=h:delete c.facetFilters,r.push({indexName:e,params:c})})}}),r},_getCompositionQueries:function(e){return[{compositionID:e.index,requestBody:{params:s._getCompositionHitsSearchParams(e)}}]},_getHitsSearchParams:function(e){var t=e.facets.concat(e.disjunctiveFacets).concat(s._getHitsHierarchicalFacetsAttributes(e)).sort(),r=s._getFacetFilters(e),a=s._getNumericFilters(e),c=s._getTagFilters(e),o={};return t.length>0&&(o.facets=t.indexOf("*")>-1?["*"]:t),c.length>0&&(o.tagFilters=c),r.length>0&&(o.facetFilters=r),a.length>0&&(o.numericFilters=a),n(i({},e.getQueryParams(),o))},_getCompositionHitsSearchParams:function(e){var t=e.facets.concat(e.disjunctiveFacets.map(function(e){return"disjunctive("+e+")"})).concat(s._getHitsHierarchicalFacetsAttributes(e)).sort(),r=s._getFacetFilters(e),a=s._getNumericFilters(e),c=s._getTagFilters(e),o={};t.length>0&&(o.facets=t.indexOf("*")>-1?["*"]:t),c.length>0&&(o.tagFilters=c),r.length>0&&(o.facetFilters=r),a.length>0&&(o.numericFilters=a);var u=e.getQueryParams();return delete u.highlightPreTag,delete u.highlightPostTag,delete u.index,n(i({},u,o))},_getDisjunctiveFacetSearchParams:function(e,t,r){var a=s._getFacetFilters(e,t,r),c=s._getNumericFilters(e,t),o=s._getTagFilters(e),u={hitsPerPage:0,page:0,analytics:!1,clickAnalytics:!1};o.length>0&&(u.tagFilters=o);var h=e.getHierarchicalFacetByName(t);return h?u.facets=s._getDisjunctiveHierarchicalFacetAttribute(e,h,r):u.facets=t,c.length>0&&(u.numericFilters=c),a.length>0&&(u.facetFilters=a),n(i({},e.getQueryParams(),u))},_getNumericFilters:function(e,t){if(e.numericFilters)return e.numericFilters;var r=[];return Object.keys(e.numericRefinements).forEach(function(i){var n=e.numericRefinements[i]||{};Object.keys(n).forEach(function(e){var s=n[e]||[];t!==i&&s.forEach(function(t){if(Array.isArray(t)){var n=t.map(function(t){return i+e+t});r.push(n)}else r.push(i+e+t)})})}),r},_getTagFilters:function(e){return e.tagFilters?e.tagFilters:e.tagRefinements.join(",")},_getFacetFilters:function(e,t,r){var i=[],n=e.facetsRefinements||{};Object.keys(n).sort().forEach(function(e){(n[e]||[]).slice().sort().forEach(function(t){i.push(e+":"+t)})});var s=e.facetsExcludes||{};Object.keys(s).sort().forEach(function(e){(s[e]||[]).sort().forEach(function(t){i.push(e+":-"+t)})});var a=e.disjunctiveFacetsRefinements||{};Object.keys(a).sort().forEach(function(e){var r=a[e]||[];if(e!==t&&r&&0!==r.length){var n=[];r.slice().sort().forEach(function(t){n.push(e+":"+t)}),i.push(n)}});var c=e.hierarchicalFacetsRefinements||{};return Object.keys(c).sort().forEach(function(n){var s,a,o=(c[n]||[])[0];if(void 0!==o){var u=e.getHierarchicalFacetByName(n),h=e._getHierarchicalFacetSeparator(u),l=e._getHierarchicalRootPath(u);if(t===n){if(-1===o.indexOf(h)||!l&&!0===r||l&&l.split(h).length===o.split(h).length)return;l?(a=l.split(h).length-1,o=l):(a=o.split(h).length-2,o=o.slice(0,o.lastIndexOf(h))),s=u.attributes[a]}else a=o.split(h).length-1,s=u.attributes[a];s&&i.push([s+":"+o])}}),i},_getHitsHierarchicalFacetsAttributes:function(e){return e.hierarchicalFacets.reduce(function(t,r){var i=e.getHierarchicalRefinement(r.name)[0];if(!i)return t.push(r.attributes[0]),t;var n=e._getHierarchicalFacetSeparator(r),s=i.split(n).length,a=r.attributes.slice(0,s+1);return t.concat(a)},[])},_getDisjunctiveHierarchicalFacetAttribute:function(e,t,r){var i=e._getHierarchicalFacetSeparator(t);if(!0===r){var n=e._getHierarchicalRootPath(t),s=0;return n&&(s=n.split(i).length),[t.attributes[s]]}var a=(e.getHierarchicalRefinement(t.name)[0]||"").split(i).length-1;return t.attributes.slice(0,a+1)},getSearchForFacetQuery:function(e,t,r,a){var c=a.isDisjunctiveFacet(e)?a.clearRefinements(e):a,o={facetQuery:t,facetName:e};return"number"==typeof r&&(o.maxFacetHits=r),n(i({},s._getHitsSearchParams(c),o))}};e.exports=s},6801:function(e){"use strict";e.exports=function(e){return null!==e&&/^[a-zA-Z0-9_-]{1,64}$/.test(e)}},7878:function(e,t,r){"use strict";var i=r(7888),n=r(7948);e.exports=function(e){var t,r,s={};return e.forEach(function(e){e.forEach(function(e,t){s[e.objectID]?s[e.objectID]={indexSum:s[e.objectID].indexSum+t,count:s[e.objectID].count+1}:s[e.objectID]={indexSum:t,count:1}})}),(t=e.length,r=[],Object.keys(s).forEach(function(e){s[e].count<2&&(s[e].indexSum+=100),r.push({objectID:e,avgOfIndices:s[e].indexSum/t})}),r.sort(function(e,t){return e.avgOfIndices>t.avgOfIndices?1:-1})).reduce(function(t,r){var s=i(n(e),function(e){return e.objectID===r.objectID});return s?t.concat(s):t},[])}},4336:function(e){"use strict";e.exports="3.24.1"},1107:function(e,t,r){"use strict";r.d(t,{c:function(){return o}});var i=r(7294),n=r(7262);let s=["zero","one","two","few","many","other"];function a(e){return s.filter(t=>e.includes(t))}let c={locale:"en",pluralForms:a(["one","other"]),select:e=>1===e?"one":"other"};function o(){let e=function(){let{i18n:{currentLocale:e}}=(0,n.Z)();return(0,i.useMemo)(()=>{try{return function(e){let t=new Intl.PluralRules(e);return{locale:e,pluralForms:a(t.resolvedOptions().pluralCategories),select:e=>t.select(e)}}(e)}catch(t){return console.error(`Failed to use Intl.PluralRules for locale "${e}". +Docusaurus will fallback to the default (English) implementation. +Error: ${t.message} +`),c}},[e])}();return{selectMessage:(t,r)=>(function(e,t,r){let i=e.split("|");if(1===i.length)return i[0];i.length>r.pluralForms.length&&console.error(`For locale=${r.locale}, a maximum of ${r.pluralForms.length} plural forms are expected (${r.pluralForms.join(",")}), but the message contains ${i.length}: ${e}`);let n=r.select(t);return i[Math.min(r.pluralForms.indexOf(n),i.length-1)]})(r,t,e)}}},150:function(e,t,r){"use strict";r.r(t),r.d(t,{default:()=>I});var i=r("5893"),n=r("7294"),s=r("7026"),a=r("8131"),c=r.n(a);function o(e={serializable:!0}){let t={};return{get(r,i,n={miss:()=>Promise.resolve()}){let s=JSON.stringify(r);if(s in t)return Promise.resolve(e.serializable?JSON.parse(t[s]):t[s]);let a=i();return a.then(e=>n.miss(e)).then(()=>a)},set:(r,i)=>(t[JSON.stringify(r)]=e.serializable?JSON.stringify(i):i,Promise.resolve(i)),delete:e=>(delete t[JSON.stringify(e)],Promise.resolve()),clear:()=>(t={},Promise.resolve())}}function u(e,t="up"){let r=Date.now();return{...e,status:t,lastUpdate:r,isUp:function(){return"up"===t||Date.now()-r>12e4},isTimedOut:function(){return"timed out"===t&&Date.now()-r<=12e4}}}var h=class extends Error{name="AlgoliaError";constructor(e,t){super(e),t&&(this.name=t)}},l=class extends h{stackTrace;constructor(e,t,r){super(e,r),this.stackTrace=t}},f=class extends l{constructor(e){super("Unreachable hosts - your application id may be incorrect. If the error persists, please reach out to the Algolia Support team: https://alg.li/support.",e,"RetryError")}},m=class extends l{status;constructor(e,t,r,i="ApiError"){super(e,r,i),this.status=t}},d=class extends h{response;constructor(e,t){super(e,"DeserializationError"),this.response=t}},p=class extends m{error;constructor(e,t,r,i){super(e,t,i,"DetailedApiError"),this.error=r}};function g(e){let t=e.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return{...e,request:{...e.request,headers:{...e.request.headers,...t}}}}var v="5.20.3",y=r("3262"),R=r("1199"),F=r("3367"),_=r("8854"),P=r("1107"),b=r("2814"),j=r("1934"),x=r("5231"),E=r("1297"),w=r("7670"),O=r("7262"),S=r("6799"),H=r("7598"),Q=r("3687"),N=r("9386");let T={searchQueryInput:"searchQueryInput_u2C7",searchVersionInput:"searchVersionInput_m0Ui",searchResultsColumn:"searchResultsColumn_JPFH",algoliaLogo:"algoliaLogo_rT1R",algoliaLogoPathFill:"algoliaLogoPathFill_WdUC",searchResultItem:"searchResultItem_Tv2o",searchResultItemHeading:"searchResultItemHeading_KbCB",searchResultItemPath:"searchResultItemPath_lhe1",searchResultItemSummary:"searchResultItemSummary_AEaO",searchQueryColumn:"searchQueryColumn_RTkw",searchVersionColumn:"searchVersionColumn_ypXd",searchLogoColumn:"searchLogoColumn_rJIA",loadingSpinner:"loadingSpinner_XVxU",loader:"loader_vvXV"};function A(e){let{docsSearchVersionsHelpers:t}=e,r=Object.entries(t.allDocsData).filter(e=>{let[,t]=e;return t.versions.length>1});return(0,i.jsx)("div",{className:(0,s.Z)("col","col--3","padding-left--none",T.searchVersionColumn),children:r.map(e=>{let[n,s]=e,a=r.length>1?`${n}: `:"";return(0,i.jsx)("select",{onChange:e=>t.setSearchVersion(n,e.target.value),defaultValue:t.searchVersions[n],className:T.searchVersionInput,children:s.versions.map((e,t)=>(0,i.jsx)("option",{label:`${a}${e.label}`,value:e.name},t))},n)})})}function C(){let{i18n:{currentLocale:e}}=(0,O.Z)(),{algolia:{appId:t,apiKey:r,indexName:a,contextualSearch:h}}=(0,S.L)(),l=(0,H.l)(),x=function(){let{selectMessage:e}=(0,P.c)();return t=>e(t,(0,w.I)({id:"theme.SearchPage.documentsFound.plurals",description:'Pluralized label for "{count} documents found". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',message:"One document found|{count} documents found"},{count:t}))}(),C=function(){let e=(0,_._r)(),[t,r]=(0,n.useState)(()=>Object.entries(e).reduce((e,t)=>{let[r,i]=t;return{...e,[r]:i.versions[0].name}},{})),i=Object.values(e).some(e=>e.versions.length>1);return{allDocsData:e,versioningEnabled:i,searchVersions:t,setSearchVersion:(e,t)=>r(r=>({...r,[e]:t}))}}(),[I,D]=(0,b.K)(),k={items:[],query:null,totalResults:null,totalPages:null,lastPage:null,hasMore:null,loading:null},[q,V]=(0,n.useReducer)((e,t)=>{switch(t.type){case"reset":return k;case"loading":return{...e,loading:!0};case"update":if(I!==t.value.query)return e;return{...t.value,items:0===t.value.lastPage?t.value.items:e.items.concat(t.value.items)};case"advance":{let t=e.totalPages>e.lastPage+1;return{...e,lastPage:t?e.lastPage+1:e.lastPage,hasMore:t}}default:return e}},k),L=h?["language","docusaurus_tag"]:[],$=function(e,t,r){if(!e||"string"!=typeof e)throw Error("`appId` is missing.");if(!t||"string"!=typeof t)throw Error("`apiKey` is missing.");return function({appId:e,apiKey:t,authMode:r,algoliaAgents:i,...n}){let s=function(e,t,r="WithinHeaders"){let i={"x-algolia-api-key":t,"x-algolia-application-id":e};return{headers:()=>"WithinHeaders"===r?i:{},queryParameters:()=>"WithinQueryParameters"===r?i:{}}}(e,t,r),a=function({hosts:e,hostsCache:t,baseHeaders:r,logger:i,baseQueryParameters:n,algoliaAgent:s,timeouts:a,requester:c,requestsCache:o,responsesCache:h}){async function l(e){let r=await Promise.all(e.map(e=>t.get(e,()=>Promise.resolve(u(e))))),i=r.filter(e=>e.isUp()),n=r.filter(e=>e.isTimedOut()),s=[...i,...n];return{hosts:s.length>0?s:e,getTimeout:(e,t)=>(0===n.length&&0===e?1:n.length+3+e)*t}}async function v(o,h,y=!0){let R=[],F=function(e,t){if("GET"!==e.method&&(void 0!==e.data||void 0!==t.data))return JSON.stringify(Array.isArray(e.data)?e.data:{...e.data,...t.data})}(o,h),_=function(e,t,r){let i={Accept:"application/json",...e,...t,...r},n={};return Object.keys(i).forEach(e=>{let t=i[e];n[e.toLowerCase()]=t}),n}(r,o.headers,h.headers),P="GET"===o.method?{...o.data,...h.data}:{},b={...n,...o.queryParameters,...P};if(s.value&&(b["x-algolia-agent"]=s.value),h&&h.queryParameters)for(let e of Object.keys(h.queryParameters))h.queryParameters[e]&&"[object Object]"!==Object.prototype.toString.call(h.queryParameters[e])?b[e]=h.queryParameters[e].toString():b[e]=h.queryParameters[e];let j=0,x=async(e,r)=>{let n=e.pop();if(void 0===n)throw new f(R.map(e=>g(e)));let s={...a,...h.timeouts},l={data:F,headers:_,method:o.method,url:function(e,t,r){var i;let n=Object.keys(i=r).filter(e=>void 0!==i[e]).sort().map(e=>`${e}=${encodeURIComponent("[object Array]"===Object.prototype.toString.call(i[e])?i[e].join(","):i[e]).replace(/\+/g,"%20")}`).join("&"),s=`${e.protocol}://${e.url}${e.port?`:${e.port}`:""}/${"/"===t.charAt(0)?t.substring(1):t}`;return n.length&&(s+=`?${n}`),s}(n,o.path,b),connectTimeout:r(j,s.connect),responseTimeout:r(j,y?s.read:s.write)},v=t=>{let r={request:l,response:t,host:n,triesLeft:e.length};return R.push(r),r},P=await c.send(l);if(function({isTimedOut:e,status:t}){return e||function({isTimedOut:e,status:t}){return!e&&0==~~t}({isTimedOut:e,status:t})||2!=~~(t/100)&&4!=~~(t/100)}(P)){let s=v(P);return P.isTimedOut&&j++,i.info("Retryable failure",g(s)),await t.set(n,u(n,P.isTimedOut?"timed out":"down")),x(e,r)}if(function({status:e}){return 2==~~(e/100)}(P))return function(e){try{return JSON.parse(e.content)}catch(t){throw new d(t.message,e)}}(P);throw v(P),function({content:e,status:t},r){try{let i=JSON.parse(e);if("error"in i)return new p(i.message,t,i.error,r);return new m(i.message,t,r)}catch{}return new m(e,t,r)}(P,R)},E=e.filter(e=>"readWrite"===e.accept||(y?"read"===e.accept:"write"===e.accept)),w=await l(E);return x([...w.hosts].reverse(),w.getTimeout)}return{hostsCache:t,requester:c,timeouts:a,logger:i,algoliaAgent:s,baseHeaders:r,baseQueryParameters:n,hosts:e,request:function(e,t={}){let i=e.useReadTransporter||"GET"===e.method;if(!i)return v(e,t,i);let s=()=>v(e,t);if(!0!==(t.cacheable||e.cacheable))return s();let a={request:e,requestOptions:t,transporter:{queryParameters:n,headers:r}};return h.get(a,()=>o.get(a,()=>o.set(a,s()).then(e=>Promise.all([o.delete(a),e]),e=>Promise.all([o.delete(a),Promise.reject(e)])).then(([e,t])=>t)),{miss:e=>h.set(a,e)})},requestsCache:o,responsesCache:h}}({hosts:[{url:`${e}-dsn.algolia.net`,accept:"read",protocol:"https"},{url:`${e}.algolia.net`,accept:"write",protocol:"https"}].concat(function(e){for(let t=e.length-1;t>0;t--){let r=Math.floor(Math.random()*(t+1)),i=e[t];e[t]=e[r],e[r]=i}return e}([{url:`${e}-1.algolianet.com`,accept:"readWrite",protocol:"https"},{url:`${e}-2.algolianet.com`,accept:"readWrite",protocol:"https"},{url:`${e}-3.algolianet.com`,accept:"readWrite",protocol:"https"}])),...n,algoliaAgent:function({algoliaAgents:e,client:t,version:r}){let i=(function(e){let t={value:`Algolia for JavaScript (${e})`,add(e){let r=`; ${e.segment}${void 0!==e.version?` (${e.version})`:""}`;return -1===t.value.indexOf(r)&&(t.value=`${t.value}${r}`),t}};return t})(r).add({segment:t,version:r});return e.forEach(e=>i.add(e)),i}({algoliaAgents:i,client:"Lite",version:v}),baseHeaders:{"content-type":"text/plain",...s.headers(),...n.baseHeaders},baseQueryParameters:{...s.queryParameters(),...n.baseQueryParameters}});return{transporter:a,appId:e,apiKey:t,clearCache:()=>Promise.all([a.requestsCache.clear(),a.responsesCache.clear()]).then(()=>void 0),get _ua(){return a.algoliaAgent.value},addAlgoliaAgent(e,t){a.algoliaAgent.add({segment:e,version:t})},setClientApiKey({apiKey:e}){r&&"WithinHeaders"!==r?a.baseQueryParameters["x-algolia-api-key"]=e:a.baseHeaders["x-algolia-api-key"]=e},searchForHits(e,t){return this.search(e,t)},searchForFacets(e,t){return this.search(e,t)},customPost({path:e,parameters:t,body:r},i){if(!e)throw Error("Parameter `path` is required when calling `customPost`.");let n="/{path}".replace("{path}",e);return a.request({method:"POST",path:n,queryParameters:t||{},headers:{},data:r||{}},i)},getRecommendations(e,t){if(e&&Array.isArray(e)&&(e={requests:e}),!e)throw Error("Parameter `getRecommendationsParams` is required when calling `getRecommendations`.");if(!e.requests)throw Error("Parameter `getRecommendationsParams.requests` is required when calling `getRecommendations`.");let r={method:"POST",path:"/1/indexes/*/recommendations",queryParameters:{},headers:{},data:e,useReadTransporter:!0,cacheable:!0};return a.request(r,t)},search(e,t){if(e&&Array.isArray(e)&&(e={requests:e.map(({params:e,...t})=>"facet"===t.type?{...t,...e,type:"facet"}:{...t,...e,facet:void 0,maxFacetHits:void 0,facetQuery:void 0})}),!e)throw Error("Parameter `searchMethodParams` is required when calling `search`.");if(!e.requests)throw Error("Parameter `searchMethodParams.requests` is required when calling `search`.");let r={method:"POST",path:"/1/indexes/*/queries",queryParameters:{},headers:{},data:e,useReadTransporter:!0,cacheable:!0};return a.request(r,t)}}}({appId:e,apiKey:t,timeouts:{connect:1e3,read:2e3,write:3e4},logger:{debug:(e,t)=>Promise.resolve(),info:(e,t)=>Promise.resolve(),error:(e,t)=>Promise.resolve()},requester:{send:function(e){return new Promise(t=>{let r=new XMLHttpRequest;r.open(e.method,e.url,!0),Object.keys(e.headers).forEach(t=>r.setRequestHeader(t,e.headers[t]));let i=(e,i)=>setTimeout(()=>{r.abort(),t({status:0,content:i,isTimedOut:!0})},e),n=i(e.connectTimeout,"Connection timeout"),s;r.onreadystatechange=()=>{r.readyState>r.OPENED&&void 0===s&&(clearTimeout(n),s=i(e.responseTimeout,"Socket timeout"))},r.onerror=()=>{0===r.status&&(clearTimeout(n),clearTimeout(s),t({content:r.responseText||"Network request failed",status:r.status,isTimedOut:!1}))},r.onload=()=>{clearTimeout(n),clearTimeout(s),t({content:r.responseText,status:r.status,isTimedOut:!1})},r.send(e.data)})}},algoliaAgents:[{segment:"Browser"}],authMode:"WithinQueryParameters",responsesCache:o(),requestsCache:o({serializable:!1}),hostsCache:function e(t){let r=[...t.caches],i=r.shift();return void 0===i?{get:(e,t,r={miss:()=>Promise.resolve()})=>t().then(e=>Promise.all([e,r.miss(e)])).then(([e])=>e),set:(e,t)=>Promise.resolve(t),delete:e=>Promise.resolve(),clear:()=>Promise.resolve()}:{get:(t,n,s={miss:()=>Promise.resolve()})=>i.get(t,n,s).catch(()=>e({caches:r}).get(t,n,s)),set:(t,n)=>i.set(t,n).catch(()=>e({caches:r}).set(t,n)),delete:t=>i.delete(t).catch(()=>e({caches:r}).delete(t)),clear:()=>i.clear().catch(()=>e({caches:r}).clear())}}({caches:[function(e){let t;let r=`algolia-client-js-${e.key}`;function i(){return void 0===t&&(t=e.localStorage||window.localStorage),t}function n(){return JSON.parse(i().getItem(r)||"{}")}function s(e){i().setItem(r,JSON.stringify(e))}return{get:(t,r,i={miss:()=>Promise.resolve()})=>Promise.resolve().then(()=>(!function(){let t=e.timeToLive?1e3*e.timeToLive:null,r=Object.fromEntries(Object.entries(n()).filter(([,e])=>void 0!==e.timestamp));s(r),t&&s(Object.fromEntries(Object.entries(r).filter(([,e])=>{let r=new Date().getTime();return!(e.timestamp+tPromise.all([e?e.value:r(),void 0!==e])).then(([e,t])=>Promise.all([e,t||i.miss(e)])).then(([e])=>e),set:(e,t)=>Promise.resolve().then(()=>{let s=n();return s[JSON.stringify(e)]={timestamp:new Date().getTime(),value:t},i().setItem(r,JSON.stringify(s)),t}),delete:e=>Promise.resolve().then(()=>{let t=n();delete t[JSON.stringify(e)],i().setItem(r,JSON.stringify(t))}),clear:()=>Promise.resolve().then(()=>{i().removeItem(r)})}}({key:`${v}-${e}`}),o()]})})}(t,r),B=c()($,a,{hitsPerPage:15,advancedSyntax:!0,disjunctiveFacets:L});B.on("result",e=>{let{results:{query:t,hits:r,page:i,nbHits:n,nbPages:s}}=e;if(""===t||!Array.isArray(r)){V({type:"reset"});return}let a=e=>e.replace(/algolia-docsearch-suggestion--highlight/g,"search-result-match");V({type:"update",value:{items:r.map(e=>{let{url:t,_highlightResult:{hierarchy:r},_snippetResult:i={}}=e,n=Object.keys(r).map(e=>a(r[e].value));return{title:n.pop(),url:l(t),summary:i.content?`${a(i.content.value)}...`:"",breadcrumbs:n}}),query:t,totalResults:n,totalPages:s,lastPage:i,hasMore:s>i+1,loading:!1}})});let[M,z]=(0,n.useState)(null),J=(0,n.useRef)(0),W=(0,n.useRef)(y.Z.canUseIntersectionObserver&&new IntersectionObserver(e=>{let{isIntersecting:t,boundingClientRect:{y:r}}=e[0];t&&J.current>r&&V({type:"advance"}),J.current=r},{threshold:1})),Z=()=>I?(0,w.I)({id:"theme.SearchPage.existingResultsTitle",message:'Search results for "{query}"',description:"The search page title for non-empty query"},{query:I}):(0,w.I)({id:"theme.SearchPage.emptyResultsTitle",message:"Search the documentation",description:"The search page title for empty query"}),U=(0,j.zX)(function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;h&&(B.addDisjunctiveFacetRefinement("docusaurus_tag","default"),B.addDisjunctiveFacetRefinement("language",e),Object.entries(C.searchVersions).forEach(e=>{let[t,r]=e;B.addDisjunctiveFacetRefinement("docusaurus_tag",`docs-${t}-${r}`)})),B.setQuery(I).setPage(t).search()});return(0,n.useEffect)(()=>{if(!M)return;let e=W.current;return e?(e.observe(M),()=>e.unobserve(M)):()=>!0},[M]),(0,n.useEffect)(()=>{V({type:"reset"}),I&&(V({type:"loading"}),setTimeout(()=>{U()},300))},[I,C.searchVersions,U]),(0,n.useEffect)(()=>{q.lastPage&&0!==q.lastPage&&U(q.lastPage)},[U,q.lastPage]),(0,i.jsxs)(Q.Z,{children:[(0,i.jsxs)(R.Z,{children:[(0,i.jsx)("title",{children:(0,E.p)(Z())}),(0,i.jsx)("meta",{property:"robots",content:"noindex, follow"})]}),(0,i.jsxs)("div",{className:"container margin-vert--lg",children:[(0,i.jsx)(N.Z,{as:"h1",children:Z()}),(0,i.jsxs)("form",{className:"row",onSubmit:e=>e.preventDefault(),children:[(0,i.jsx)("div",{className:(0,s.Z)("col",T.searchQueryColumn,{"col--9":C.versioningEnabled,"col--12":!C.versioningEnabled}),children:(0,i.jsx)("input",{type:"search",name:"q",className:T.searchQueryInput,placeholder:(0,w.I)({id:"theme.SearchPage.inputPlaceholder",message:"Type your search here",description:"The placeholder for search page input"}),"aria-label":(0,w.I)({id:"theme.SearchPage.inputLabel",message:"Search",description:"The ARIA label for search page input"}),onChange:e=>D(e.target.value),value:I,autoComplete:"off",autoFocus:!0})}),h&&C.versioningEnabled&&(0,i.jsx)(A,{docsSearchVersionsHelpers:C})]}),(0,i.jsxs)("div",{className:"row",children:[(0,i.jsx)("div",{className:(0,s.Z)("col","col--8",T.searchResultsColumn),children:!!q.totalResults&&x(q.totalResults)}),(0,i.jsx)("div",{className:(0,s.Z)("col","col--4","text--right",T.searchLogoColumn),children:(0,i.jsx)(F.Z,{to:"https://www.algolia.com/","aria-label":(0,w.I)({id:"theme.SearchPage.algoliaLabel",message:"Search by Algolia",description:"The ARIA label for Algolia mention"}),children:(0,i.jsx)("svg",{viewBox:"0 0 168 24",className:T.algoliaLogo,children:(0,i.jsxs)("g",{fill:"none",children:[(0,i.jsx)("path",{className:T.algoliaLogoPathFill,d:"M120.925 18.804c-4.386.02-4.386-3.54-4.386-4.106l-.007-13.336 2.675-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-10.846-2.18c.821 0 1.43-.047 1.855-.129v-2.719a6.334 6.334 0 0 0-1.574-.199 5.7 5.7 0 0 0-.897.069 2.699 2.699 0 0 0-.814.24c-.24.116-.439.28-.582.491-.15.212-.219.335-.219.656 0 .628.219.991.616 1.23s.938.362 1.615.362zm-.233-9.7c.883 0 1.629.109 2.231.328.602.218 1.088.525 1.444.915.363.396.609.922.76 1.483.157.56.232 1.175.232 1.85v6.874a32.5 32.5 0 0 1-1.868.314c-.834.123-1.772.185-2.813.185-.69 0-1.327-.069-1.895-.198a4.001 4.001 0 0 1-1.471-.636 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.803 0-.656.13-1.073.384-1.525a3.24 3.24 0 0 1 1.047-1.106c.445-.287.95-.492 1.532-.615a8.8 8.8 0 0 1 1.82-.185 8.404 8.404 0 0 1 1.972.24v-.438c0-.307-.035-.6-.11-.874a1.88 1.88 0 0 0-.384-.73 1.784 1.784 0 0 0-.724-.493 3.164 3.164 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.735 7.735 0 0 0-1.26.307l-.321-2.192c.335-.117.834-.233 1.478-.349a10.98 10.98 0 0 1 2.073-.178zm52.842 9.626c.822 0 1.43-.048 1.854-.13V13.7a6.347 6.347 0 0 0-1.574-.199c-.294 0-.595.021-.896.069a2.7 2.7 0 0 0-.814.24 1.46 1.46 0 0 0-.582.491c-.15.212-.218.335-.218.656 0 .628.218.991.615 1.23.404.245.938.362 1.615.362zm-.226-9.694c.883 0 1.629.108 2.231.327.602.219 1.088.526 1.444.915.355.39.609.923.759 1.483a6.8 6.8 0 0 1 .233 1.852v6.873c-.41.088-1.034.19-1.868.314-.834.123-1.772.184-2.813.184-.69 0-1.327-.068-1.895-.198a4.001 4.001 0 0 1-1.471-.635 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.804 0-.656.13-1.073.384-1.524.26-.45.608-.82 1.047-1.107.445-.286.95-.491 1.532-.614a8.803 8.803 0 0 1 2.751-.13c.329.034.671.096 1.04.185v-.437a3.3 3.3 0 0 0-.109-.875 1.873 1.873 0 0 0-.384-.731 1.784 1.784 0 0 0-.724-.492 3.165 3.165 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.75 7.75 0 0 0-1.26.307l-.321-2.193c.335-.116.834-.232 1.478-.348a11.633 11.633 0 0 1 2.073-.177zm-8.034-1.271a1.626 1.626 0 0 1-1.628-1.62c0-.895.725-1.62 1.628-1.62.904 0 1.63.725 1.63 1.62 0 .895-.733 1.62-1.63 1.62zm1.348 13.22h-2.689V7.27l2.69-.423v11.956zm-4.714 0c-4.386.02-4.386-3.54-4.386-4.107l-.008-13.336 2.676-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-8.698-5.903c0-1.156-.253-2.119-.746-2.788-.493-.677-1.183-1.01-2.067-1.01-.882 0-1.574.333-2.065 1.01-.493.676-.733 1.632-.733 2.788 0 1.168.246 1.953.74 2.63.492.683 1.183 1.018 2.066 1.018.882 0 1.574-.342 2.067-1.019.492-.683.738-1.46.738-2.63zm2.737-.007c0 .902-.13 1.584-.397 2.33a5.52 5.52 0 0 1-1.128 1.906 4.986 4.986 0 0 1-1.752 1.223c-.685.286-1.739.45-2.265.45-.528-.006-1.574-.157-2.252-.45a5.096 5.096 0 0 1-1.744-1.223c-.487-.527-.863-1.162-1.137-1.906a6.345 6.345 0 0 1-.41-2.33c0-.902.123-1.77.397-2.508a5.554 5.554 0 0 1 1.15-1.892 5.133 5.133 0 0 1 1.75-1.216c.679-.287 1.425-.423 2.232-.423.808 0 1.553.142 2.237.423a4.88 4.88 0 0 1 1.753 1.216 5.644 5.644 0 0 1 1.135 1.892c.287.738.431 1.606.431 2.508zm-20.138 0c0 1.12.246 2.363.738 2.882.493.52 1.13.78 1.91.78.424 0 .828-.062 1.204-.178.377-.116.677-.253.917-.417V9.33a10.476 10.476 0 0 0-1.766-.226c-.971-.028-1.71.37-2.23 1.004-.513.636-.773 1.75-.773 2.788zm7.438 5.274c0 1.824-.466 3.156-1.404 4.004-.936.846-2.367 1.27-4.296 1.27-.705 0-2.17-.137-3.34-.396l.431-2.118c.98.205 2.272.26 2.95.26 1.074 0 1.84-.219 2.299-.656.459-.437.684-1.086.684-1.948v-.437a8.07 8.07 0 0 1-1.047.397c-.43.13-.93.198-1.492.198-.739 0-1.41-.116-2.018-.349a4.206 4.206 0 0 1-1.567-1.025c-.431-.45-.774-1.017-1.013-1.694-.24-.677-.363-1.885-.363-2.773 0-.834.13-1.88.384-2.577.26-.696.629-1.298 1.129-1.796.493-.498 1.095-.881 1.8-1.162a6.605 6.605 0 0 1 2.428-.457c.87 0 1.67.109 2.45.24.78.129 1.444.265 1.985.415V18.17zM6.972 6.677v1.627c-.712-.446-1.52-.67-2.425-.67-.585 0-1.045.13-1.38.391a1.24 1.24 0 0 0-.502 1.03c0 .425.164.765.494 1.02.33.256.835.532 1.516.83.447.192.795.356 1.045.495.25.138.537.332.862.582.324.25.563.548.718.894.154.345.23.741.23 1.188 0 .947-.334 1.691-1.004 2.234-.67.542-1.537.814-2.601.814-1.18 0-2.16-.229-2.936-.686v-1.708c.84.628 1.814.942 2.92.942.585 0 1.048-.136 1.388-.407.34-.271.51-.646.51-1.125 0-.287-.1-.55-.302-.79-.203-.24-.42-.42-.655-.542-.234-.123-.585-.29-1.053-.503a61.27 61.27 0 0 1-.582-.271 13.67 13.67 0 0 1-.55-.287 4.275 4.275 0 0 1-.567-.351 6.92 6.92 0 0 1-.455-.4c-.18-.17-.31-.34-.39-.51-.08-.17-.155-.37-.224-.598a2.553 2.553 0 0 1-.104-.742c0-.915.333-1.638.998-2.17.664-.532 1.523-.798 2.576-.798.968 0 1.793.17 2.473.51zm7.468 5.696v-.287c-.022-.607-.187-1.088-.495-1.444-.309-.357-.75-.535-1.324-.535-.532 0-.99.194-1.373.583-.382.388-.622.949-.717 1.683h3.909zm1.005 2.792v1.404c-.596.34-1.383.51-2.362.51-1.255 0-2.255-.377-3-1.132-.744-.755-1.116-1.744-1.116-2.968 0-1.297.34-2.316 1.021-3.055.68-.74 1.548-1.11 2.6-1.11 1.033 0 1.852.323 2.458.966.606.644.91 1.572.91 2.784 0 .33-.033.676-.096 1.038h-5.314c.107.702.405 1.239.894 1.611.49.372 1.106.558 1.85.558.862 0 1.58-.202 2.155-.606zm6.605-1.77h-1.212c-.596 0-1.045.116-1.349.35-.303.234-.454.532-.454.894 0 .372.117.664.35.877.235.213.575.32 1.022.32.51 0 .912-.142 1.204-.424.293-.281.44-.651.44-1.108v-.91zm-4.068-2.554V9.325c.627-.361 1.457-.542 2.489-.542 2.116 0 3.175 1.026 3.175 3.08V17h-1.548v-.957c-.415.68-1.143 1.02-2.186 1.02-.766 0-1.38-.22-1.843-.661-.462-.442-.694-1.003-.694-1.684 0-.776.293-1.38.878-1.81.585-.431 1.404-.647 2.457-.647h1.34V11.8c0-.554-.133-.971-.399-1.253-.266-.282-.707-.423-1.324-.423a4.07 4.07 0 0 0-2.345.718zm9.333-1.93v1.42c.394-1 1.101-1.5 2.123-1.5.148 0 .313.016.494.048v1.531a1.885 1.885 0 0 0-.75-.143c-.542 0-.989.24-1.34.718-.351.479-.527 1.048-.527 1.707V17h-1.563V8.91h1.563zm5.01 4.084c.022.82.272 1.492.75 2.019.479.526 1.15.79 2.01.79.639 0 1.235-.176 1.788-.527v1.404c-.521.319-1.186.479-1.995.479-1.265 0-2.276-.4-3.031-1.197-.755-.798-1.133-1.792-1.133-2.984 0-1.16.38-2.151 1.14-2.975.761-.825 1.79-1.237 3.088-1.237.702 0 1.346.149 1.93.447v1.436a3.242 3.242 0 0 0-1.77-.495c-.84 0-1.513.266-2.019.798-.505.532-.758 1.213-.758 2.042zM40.24 5.72v4.579c.458-1 1.293-1.5 2.505-1.5.787 0 1.42.245 1.899.734.479.49.718 1.17.718 2.042V17h-1.564v-5.106c0-.553-.14-.98-.422-1.284-.282-.303-.652-.455-1.11-.455-.531 0-1.002.202-1.411.606-.41.405-.615 1.022-.615 1.851V17h-1.563V5.72h1.563zm14.966 10.02c.596 0 1.096-.253 1.5-.758.404-.506.606-1.157.606-1.955 0-.915-.202-1.62-.606-2.114-.404-.495-.92-.742-1.548-.742-.553 0-1.05.224-1.491.67-.442.447-.662 1.133-.662 2.058 0 .958.212 1.67.638 2.138.425.469.946.703 1.563.703zM53.004 5.72v4.42c.574-.894 1.388-1.341 2.44-1.341 1.022 0 1.857.383 2.506 1.149.649.766.973 1.781.973 3.047 0 1.138-.309 2.109-.925 2.912-.617.803-1.463 1.205-2.537 1.205-1.075 0-1.894-.447-2.457-1.34V17h-1.58V5.72h1.58zm9.908 11.104l-3.223-7.913h1.739l1.005 2.632 1.26 3.415c.096-.32.48-1.458 1.15-3.415l.909-2.632h1.66l-2.92 7.866c-.777 2.074-1.963 3.11-3.559 3.11a2.92 2.92 0 0 1-.734-.079v-1.34c.17.042.351.064.543.064 1.032 0 1.755-.57 2.17-1.708z"}),(0,i.jsx)("path",{fill:"#5468FF",d:"M78.988.938h16.594a2.968 2.968 0 0 1 2.966 2.966V20.5a2.967 2.967 0 0 1-2.966 2.964H78.988a2.967 2.967 0 0 1-2.966-2.964V3.897A2.961 2.961 0 0 1 78.988.938z"}),(0,i.jsx)("path",{fill:"white",d:"M89.632 5.967v-.772a.978.978 0 0 0-.978-.977h-2.28a.978.978 0 0 0-.978.977v.793c0 .088.082.15.171.13a7.127 7.127 0 0 1 1.984-.28c.65 0 1.295.088 1.917.259.082.02.164-.04.164-.13m-6.248 1.01l-.39-.389a.977.977 0 0 0-1.382 0l-.465.465a.973.973 0 0 0 0 1.38l.383.383c.062.061.15.047.205-.014.226-.307.472-.601.746-.874.281-.28.568-.526.883-.751.068-.042.075-.137.02-.2m4.16 2.453v3.341c0 .096.104.165.192.117l2.97-1.537c.068-.034.089-.117.055-.184a3.695 3.695 0 0 0-3.08-1.866c-.068 0-.136.054-.136.13m0 8.048a4.489 4.489 0 0 1-4.49-4.482 4.488 4.488 0 0 1 4.49-4.482 4.488 4.488 0 0 1 4.489 4.482 4.484 4.484 0 0 1-4.49 4.482m0-10.85a6.363 6.363 0 1 0 0 12.729 6.37 6.37 0 0 0 6.372-6.368 6.358 6.358 0 0 0-6.371-6.36"})]})})})})]}),q.items.length>0?(0,i.jsx)("main",{children:q.items.map((e,t)=>{let{title:r,url:n,summary:a,breadcrumbs:c}=e;return(0,i.jsxs)("article",{className:T.searchResultItem,children:[(0,i.jsx)(N.Z,{as:"h2",className:T.searchResultItemHeading,children:(0,i.jsx)(F.Z,{to:n,dangerouslySetInnerHTML:{__html:r}})}),c.length>0&&(0,i.jsx)("nav",{"aria-label":"breadcrumbs",children:(0,i.jsx)("ul",{className:(0,s.Z)("breadcrumbs",T.searchResultItemPath),children:c.map((e,t)=>(0,i.jsx)("li",{className:"breadcrumbs__item",dangerouslySetInnerHTML:{__html:e}},t))})}),a&&(0,i.jsx)("p",{className:T.searchResultItemSummary,dangerouslySetInnerHTML:{__html:a}})]},t)})}):[I&&!q.loading&&(0,i.jsx)("p",{children:(0,i.jsx)(w.Z,{id:"theme.SearchPage.noResultsText",description:"The paragraph for empty search result",children:"No results were found"})},"no-results"),!!q.loading&&(0,i.jsx)("div",{className:T.loadingSpinner},"spinner")],q.hasMore&&(0,i.jsx)("div",{className:T.loader,ref:z,children:(0,i.jsx)(w.Z,{id:"theme.SearchPage.fetchingNewResults",description:"The paragraph for fetching new search results",children:"Fetching new results..."})})]})]})}function I(){return(0,i.jsx)(x.FG,{className:"search-page-wrapper",children:(0,i.jsx)(C,{})})}}}]); \ No newline at end of file diff --git a/docs/assets/js/1abc4ae6.9624a1fe.js b/docs/assets/js/1abc4ae6.9624a1fe.js new file mode 100644 index 0000000..b286ddc --- /dev/null +++ b/docs/assets/js/1abc4ae6.9624a1fe.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2828"],{3690:function(e,n,r){r.r(n),r.d(n,{default:()=>u,frontMatter:()=>o,metadata:()=>s,assets:()=>a,toc:()=>c,contentTitle:()=>l});var s=JSON.parse('{"id":"languages/vue2","title":"Vue 2 SFC","description":"Vue.js, The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces.","source":"@site/docs/languages/vue2.mdx","sourceDirName":"languages","slug":"/languages/vue2","permalink":"/docs/languages/vue2","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/vue2.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Vue SFC","permalink":"/docs/languages/vue"},"next":{"title":"WebAssembly Text","permalink":"/docs/languages/wat"}}'),i=r("5893"),t=r("65");let o={},l="Vue 2 SFC",a={},c=[{value:"Important Note",id:"important-note",level:2},{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Links",id:"links",level:2}];function d(e){let n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",strong:"strong",ul:"ul",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"vue-2-sfc",children:"Vue 2 SFC"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://vuejs.org/",children:"Vue.js"}),", The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces."]}),"\n",(0,i.jsxs)(n.p,{children:["This is the documentation for LiveCodes language support for the older ",(0,i.jsx)(n.strong,{children:"Vue 2"})," ",(0,i.jsx)(n.a,{href:"https://v2.vuejs.org/v2/guide/single-file-components.html",children:"Single-File Component (SFC)"}),". For the latest Vue SFC head to ",(0,i.jsx)(n.a,{href:"/docs/languages/vue",children:"Vue 3 SFC documentations"}),"."]}),"\n",(0,i.jsx)(n.admonition,{type:"caution",children:(0,i.jsxs)(n.p,{children:["Please note that, officially, Vue 2 has reached ",(0,i.jsx)(n.a,{href:"https://v2.vuejs.org/eol/",children:"End of Life (EOL)"})," on December 31st, 2023."]})}),"\n",(0,i.jsx)(n.h2,{id:"important-note",children:"Important Note"}),"\n",(0,i.jsx)(n.p,{children:"Vue 2 SFC language support in LiveCodes is different from that for Vue 3."}),"\n",(0,i.jsxs)(n.p,{children:["Unlike Vue 3, which uses the official SFC compiler (",(0,i.jsx)(n.a,{href:"https://github.com/vuejs/core/tree/main/packages/compiler-sfc",children:"@vue/compiler-sfc"}),") to compile SFC to regular JavaScript which is then sent to the result page, Vue 2 SFC support uses ",(0,i.jsx)(n.a,{href:"https://github.com/FranckFreiburger/vue3-sfc-loader",children:"vue3-sfc-loader"}),", which is loaded in the result page and the SFC is compiled on the fly in the end user's browser. This has a significant performance impact."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://github.com/FranckFreiburger/vue3-sfc-loader",children:"vue3-sfc-loader"})," is currently at version 0.8.4, which is compatible with Vue 2 version 2.6.14.\nVue 2.7 is not supported."]}),"\n",(0,i.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsxs)(n.p,{children:["Vue 2 SFC support includes Scoped CSS, pre-processors, JSX and ",(0,i.jsx)(n.code,{children:"src"})," imports."]}),"\n",(0,i.jsx)(n.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(n.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.code,{children:"vue2"})}),"\n",(0,i.jsx)(n.h3,{id:"extensions",children:"Extensions"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.code,{children:".vue2"})}),"\n",(0,i.jsx)(n.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.code,{children:"script"})}),"\n",(0,i.jsx)(n.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://github.com/FranckFreiburger/vue3-sfc-loader",children:"vue3-sfc-loader"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"version",children:"Version"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"vue3-sfc-loader"}),": v0.9.5, which is compatible with Vue v2.6.14"]}),"\n",(0,i.jsx)(n.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(n.p,{children:["Using ",(0,i.jsx)(n.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://v2.vuejs.org/",children:"Vue 2 docs"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://v2.vuejs.org/v2/guide/single-file-components.html",children:"Vue 2 SFC"})}),"\n"]})]})}function u(e={}){let{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},65:function(e,n,r){r.d(n,{Z:function(){return l},a:function(){return o}});var s=r(7294);let i={},t=s.createContext(i);function o(e){let n=s.useContext(t);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(t.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/1b2ea3a7.70448ae1.js b/docs/assets/js/1b2ea3a7.70448ae1.js new file mode 100644 index 0000000..b31b3b2 --- /dev/null +++ b/docs/assets/js/1b2ea3a7.70448ae1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5866"],{3007:function(e,s,r){r.r(s),r.d(s,{default:()=>u,frontMatter:()=>c,metadata:()=>t,assets:()=>d,toc:()=>l,contentTitle:()=>i});var t=JSON.parse('{"id":"features/user-settings","title":"User Settings","description":"A user can select various settings that are stored locally in the browser and are subsequently used.","source":"@site/docs/features/user-settings.mdx","sourceDirName":"features","slug":"/features/user-settings","permalink":"/docs/features/user-settings","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/user-settings.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Keyboard Shortcuts","permalink":"/docs/features/keyboard-shortcuts"},"next":{"title":"Editor Settings","permalink":"/docs/features/editor-settings"}}'),n=r("5893"),a=r("65");let c={},i="User Settings",d={},l=[{value:"Related",id:"related",level:2}];function o(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",ul:"ul",...(0,a.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.header,{children:(0,n.jsx)(s.h1,{id:"user-settings",children:"User Settings"})}),"\n",(0,n.jsx)(s.p,{children:"A user can select various settings that are stored locally in the browser and are subsequently used."}),"\n",(0,n.jsx)(s.p,{children:"User settings can be configured in Settings menu. These include settings like:"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:"Auto-update"}),"\n",(0,n.jsx)(s.li,{children:"Auto-save"}),"\n",(0,n.jsx)(s.li,{children:"Delay (before auto-update and auto-save)"}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/code-format#format-on-save",children:"Format on-save"})}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.a,{href:"/docs/features/themes",children:"Theme"})," (light/dark)"]}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/themes#theme-color",children:"Theme color"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/recover",children:"Recover unsaved projects"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/result#show-spacings",children:"Show spacing"})}),"\n",(0,n.jsx)(s.li,{children:"Layout (responsive/vertical/horizontal)"}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/sync",children:"Sync"})}),"\n",(0,n.jsxs)(s.li,{children:["Show ",(0,n.jsx)(s.a,{href:"/docs/features/welcome",children:"welcome screen"})]}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/i18n",children:"App language"})}),"\n"]}),"\n",(0,n.jsxs)(s.p,{children:["The settings selected in the ",(0,n.jsx)(s.a,{href:"/docs/features/editor-settings",children:(0,n.jsx)(s.code,{children:"Editor Settings"})})," screen are also saved locally as user settings."]}),"\n",(0,n.jsxs)(s.p,{children:["User settings are scoped to the currently ",(0,n.jsx)(s.a,{href:"/docs/features/user-management",children:"logged-in user"}),". They can be ",(0,n.jsx)(s.a,{href:"/docs/features/backup-restore",children:"backed up/restored"})," and ",(0,n.jsx)(s.a,{href:"/docs/features/sync",children:"synced"})," the same as other user data (",(0,n.jsx)(s.a,{href:"/docs/features/projects",children:"projects"}),", ",(0,n.jsx)(s.a,{href:"/docs/features/templates#user-templates",children:"user templates"}),", ",(0,n.jsx)(s.a,{href:"/docs/features/assets",children:"assets"}),", ",(0,n.jsx)(s.a,{href:"/docs/features/snippets",children:"code snippets"}),")."]}),"\n",(0,n.jsx)(s.h2,{id:"related",children:"Related"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/user-management",children:"User management"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/projects",children:"Project"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/templates",children:"Templates"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/backup-restore",children:"Backup/Restore"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/sync",children:"Sync"})}),"\n"]})]})}function u(e={}){let{wrapper:s}={...(0,a.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(o,{...e})}):o(e)}},65:function(e,s,r){r.d(s,{Z:function(){return i},a:function(){return c}});var t=r(7294);let n={},a=t.createContext(n);function c(e){let s=t.useContext(a);return t.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function i(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:c(e.components),t.createElement(a.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/1c4ba544.3ea617fa.js b/docs/assets/js/1c4ba544.3ea617fa.js new file mode 100644 index 0000000..12fbc7a --- /dev/null +++ b/docs/assets/js/1c4ba544.3ea617fa.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2812"],{4593:function(e,t,s){s.r(t),s.d(t,{default:()=>u,frontMatter:()=>a,metadata:()=>n,assets:()=>c,toc:()=>d,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/coffeescript","title":"CoffeeScript","description":"CoffeeScript is a little language that compiles into JavaScript.","source":"@site/docs/languages/coffeescript.mdx","sourceDirName":"languages","slug":"/languages/coffeescript","permalink":"/docs/languages/coffeescript","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/coffeescript.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"ClojureScript","permalink":"/docs/languages/clojurescript"},"next":{"title":"Common Lisp","permalink":"/docs/languages/commonlisp"}}'),o=s("5893"),i=s("65"),r=s("3365");let a={},l="CoffeeScript",c={},d=[{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Aliases",id:"aliases",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"coffeescript",children:"CoffeeScript"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"https://coffeescript.org/",children:"CoffeeScript"})," is a little language that compiles into JavaScript."]}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n","\n",(0,o.jsx)(t.p,{children:"This example demonstrates usage in LiveCodes:"}),"\n",(0,o.jsx)(r.Z,{template:"coffeescript",height:"80vh"}),"\n",(0,o.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,o.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"coffeescript"})}),"\n",(0,o.jsx)(t.h3,{id:"extensions",children:"Extensions"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:".coffee"})}),"\n",(0,o.jsx)(t.h3,{id:"aliases",children:"Aliases"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"coffee"}),", ",(0,o.jsx)(t.code,{children:"coffeescript"})]}),"\n",(0,o.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"script"})}),"\n",(0,o.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,o.jsxs)(t.p,{children:["The official ",(0,o.jsx)(t.a,{href:"https://www.npmjs.com/package/coffeescript",children:"CoffeeScript compiler"}),"."]}),"\n",(0,o.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"coffeescript"}),": v2.7.0"]}),"\n",(0,o.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://livecodes.io/?template=coffeescript",children:"https://livecodes.io/?template=coffeescript"})}),"\n",(0,o.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://coffeescript.org/",children:"Official website"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://coffeescript.org/#language",children:"Language Reference"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://github.com/jashkenas/coffeescript",children:"CoffeeScript on GitHub"})}),"\n"]})]})}function u(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>m});var n=s("5893"),o=s("4200"),i=s("7294"),r=s("8294");function a(e){let t=(0,i.useRef)(null),[s,o]=(0,i.useState)(e.className||""),[a,l]=(0,i.useState)(e.style||{}),[c,d]=(0,i.useState)(e.height),[h,u]=(0,i.useState)(),[f,p]=(0,i.useState)(JSON.stringify(e.config||"")),[g,m]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:i,sdkReady:a,config:c,...v}=e;if(o(s||""),l(n||{}),d(i),h&&g===JSON.stringify(v)){if(f===JSON.stringify(c))return;p(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else m(JSON.stringify(v)),h?.destroy(),(0,r.T)(t.current,{config:c,...v}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,i.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),h=s("7645"),u=s("8168"),f=s("8228"),p=s("5050");function g(e){let[t,s]=(0,i.useState)(e.js),[o,r]=(0,i.useState)(e.ts),[a,l]=(0,i.useState)(e.react),[g,m]=(0,i.useState)(e.vue),[v,y]=(0,i.useState)(e.svelte),j="3.7rem",[x,w]=(0,i.useState)(!0),[b,S]=(0,i.useState)(j),C=(0,i.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${j})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${j})`)},255)};return(0,i.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),r(e(o,"ts")),l(e(a,"jsx")),m(e(g,"html")),y(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${f.Z.details}`,"data-collapsed":x,style:{height:x?j:b,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{w(!x),E()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:p.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"ts",children:o})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"jsx",children:a})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:v})})]})})})]})}function m(e){let{className:t,style:s,showCode:i,height:r,...c}=e,{colorMode:d}=(0,o.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),f=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(c)}; + return (); +} + +`.trimStart(),m=` + + + +`,v=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:r||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:u,ts:f,react:p,vue:m,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return o},r:function(){return i}});var n=s(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:o="lazy",view:r}=t,a=n||"headless"===r,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(i(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":o);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let f=t.params;"object"==typeof f&&Object.keys(f).length>0&&JSON.stringify(f).length<1800&&Object.keys(f).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(f[e])))});let p=!1,g="Cannot call API methods after calling `destroy()`.",m=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",i=l.querySelector(`iframe.${n}`),r=i||document.createElement("iframe");r.classList.add(n),r.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),r.setAttribute("allowtransparency","true"),r.setAttribute("allowpaymentrequest","true"),r.setAttribute("allowfullscreen","true"),r.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),r.setAttribute("loading","eager"===o?"eager":"lazy"),a?E(r):(r.style.height="100%",r.style.minHeight="200px",r.style.width="100%",r.style.margin="0",r.style.border="0",r.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),r.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),r.onload=()=>{e(r)},r.src=d.href,i||l.appendChild(r)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===m.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>p?Promise.reject(g):new Promise(async e=>{v.settled&&e(),m.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),j=(e,t)=>new Promise(async(s,n)=>{if(p)return n(g);await y();let o=P();addEventListener("message",function t(i){if(i.source===m.contentWindow&&i.origin===h&&i.data?.type==="livecodes-api-response"&&i.data?.id===o&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?n(e.error):s(e)}}),m.contentWindow?.postMessage({method:e,id:o,args:t},h)}),x={},w=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(p)throw Error(g);return w.includes(e)?(j("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==m.contentWindow||e.origin!==h||!t||!x[t])return;let s=e.data?.payload;x[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(x).forEach(e=>{e.length=0}),m?.remove?.(),p=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,t)=>j("show",[e,t]),runTests:()=>j("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nv.settled?j("destroy").then(C):p?Promise.reject(g):(C(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:o={},config:i={},headless:r,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||r;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==c?i.view=c:e.searchParams.set("view",c)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(i))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return r}});var n=s(7294);let o={},i=n.createContext(o);function r(e){let t=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/1ca5e944.5b79f0ba.js b/docs/assets/js/1ca5e944.5b79f0ba.js new file mode 100644 index 0000000..bb3de9a --- /dev/null +++ b/docs/assets/js/1ca5e944.5b79f0ba.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["677"],{2107:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>o,metadata:()=>a,assets:()=>c,toc:()=>l,contentTitle:()=>i});var a=JSON.parse('{"id":"languages/imba","title":"Imba","description":"TODO...","source":"@site/docs/languages/imba.mdx","sourceDirName":"languages","slug":"/languages/imba","permalink":"/docs/languages/imba","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/imba.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"HTML","permalink":"/docs/languages/html"},"next":{"title":"Java","permalink":"/docs/languages/java"}}'),s=n("5893"),r=n("65");let o={},i="Imba",c={},l=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"imba",children:"Imba"})}),"\n",(0,s.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},65:function(e,t,n){n.d(t,{Z:function(){return i},a:function(){return o}});var a=n(7294);let s={},r=a.createContext(s);function o(e){let t=a.useContext(r);return a.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),a.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/1dd8878c.4d2c4c89.js b/docs/assets/js/1dd8878c.4d2c4c89.js new file mode 100644 index 0000000..a594645 --- /dev/null +++ b/docs/assets/js/1dd8878c.4d2c4c89.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7106"],{9222:function(e,t,s){s.r(t),s.d(t,{config:()=>c,config2:()=>u,default:()=>m,frontMatter:()=>a,metadata:()=>n,assets:()=>d,params:()=>h,toc:()=>g,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/twig","title":"Twig","description":"Twig.js is a pure JavaScript implementation of the Twig PHP templating language.","source":"@site/docs/languages/twig.mdx","sourceDirName":"languages","slug":"/languages/twig","permalink":"/docs/languages/twig","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/twig.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"TSX","permalink":"/docs/languages/tsx"},"next":{"title":"TypeScript","permalink":"/docs/languages/typescript"}}'),i=s("5893"),r=s("65"),o=s("3365");let a={},l="Twig",d={},c={markup:{language:"twig",content:"Hello, {{ name }}!"},customSettings:{template:{data:{name:"LiveCodes"}}}},h={compiled:"open"},u={markup:{language:"twig",content:"Hello, {{ name }}!"},script:{language:"javascript",content:'window.livecodes.templateData = { name: "LiveCodes" };'},customSettings:{template:{prerender:!1}},activeEditor:"script"},g=[{value:"Usage",id:"usage",level:2},{value:"Pre-rendered (Default)",id:"pre-rendered-default",level:3},{value:"Dynamic",id:"dynamic",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Pre-rendered",id:"pre-rendered",level:3},{value:"Dynamic",id:"dynamic-1",level:3},{value:"Links",id:"links",level:2}];function p(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"twig",children:"Twig"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://github.com/twigjs/twig.js/",children:"Twig.js"})," is a pure JavaScript implementation of the ",(0,i.jsx)(t.a,{href:"https://twig.symfony.com/",children:"Twig"})," PHP templating language."]}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.p,{children:"There are 2 modes for rendering:"}),"\n",(0,i.jsx)(t.h3,{id:"pre-rendered-default",children:"Pre-rendered (Default)"}),"\n",(0,i.jsxs)(t.p,{children:["The values of the expressions are evaluated and added to the template during compilation of the ",(0,i.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["The values of all expressions should be supplied in advance using ",(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," to the property ",(0,i.jsx)(t.code,{children:"template.data"})," which accepts an object of key-value pairs."]}),"\n",(0,i.jsxs)(t.p,{children:["Example: This provides the value of the expression ",(0,i.jsx)(t.code,{children:"name"})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "data": {\n "name": "LiveCodes"\n }\n }\n}\n'})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"#pre-rendered",children:"Full example below"})}),"\n",(0,i.jsx)(t.h3,{id:"dynamic",children:"Dynamic"}),"\n",(0,i.jsxs)(t.p,{children:["To use this mode, the property ",(0,i.jsx)(t.code,{children:"template.prerender"})," in ",(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," should be set to ",(0,i.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "prerender": false\n }\n}\n'})}),"\n",(0,i.jsxs)(t.p,{children:["In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the ",(0,i.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," runtime."]}),"\n",(0,i.jsxs)(t.p,{children:["This can be achieved in JavaScript (or any ",(0,i.jsx)(t.a,{href:"/docs/languages/",children:"language"})," that compiles to it) by assigning ",(0,i.jsx)(t.code,{children:"window.livecodes.templateData"})," to an object with the data."]}),"\n",(0,i.jsxs)(t.p,{children:["Please note that template rendering occurs on ",(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event",children:"page load"}),", so the assignment must occur before that."]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",metastring:'title="Script Editor (JS)"',children:"window.livecodes.templateData = { name: 'LiveCodes' };\n"})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"#dynamic-1",children:"Full example below"})}),"\n",(0,i.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"twig"})}),"\n",(0,i.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:".twig"})}),"\n",(0,i.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"markup"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://www.npmjs.com/package/twig",children:"Twig.js"}),"."]}),"\n",(0,i.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"twig"}),": v1.15.4"]}),"\n",(0,i.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(t.p,{children:["Using ",(0,i.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,i.jsx)(t.code,{children:"twig"})," are passed as a JSON object to the ",(0,i.jsx)(t.a,{href:"https://github.com/twigjs/twig.js/wiki#browser-usage",children:(0,i.jsx)(t.code,{children:"twig"})})," method during compile. Please check the ",(0,i.jsx)(t.a,{href:"https://github.com/twigjs/twig.js/wiki#browser-usage",children:"documentation"})," for full reference."]}),"\n",(0,i.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,i.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n",(0,i.jsx)(t.h3,{id:"pre-rendered",children:"Pre-rendered"}),"\n","\n","\n",(0,i.jsx)(o.Z,{config:c,params:h}),"\n",(0,i.jsx)(t.h3,{id:"dynamic-1",children:"Dynamic"}),"\n","\n",(0,i.jsx)(o.Z,{config:u}),"\n",(0,i.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://twig.symfony.com/",children:"Twig"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://twig.symfony.com/doc/3.x/",children:"Twig documentation"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://github.com/twigjs/twig.js/",children:"Twig.js"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://github.com/twigjs/twig.js/wiki",children:"Twig.js documentation"})}),"\n"]})]})}function m(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),i=s("4200"),r=s("7294"),o=s("8294");function a(e){let t=(0,r.useRef)(null),[s,i]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[d,c]=(0,r.useState)(e.height),[h,u]=(0,r.useState)(),[g,p]=(0,r.useState)(JSON.stringify(e.config||"")),[m,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:r,sdkReady:a,config:d,...v}=e;if(i(s||""),l(n||{}),c(r),h&&m===JSON.stringify(v)){if(g===JSON.stringify(d))return;p(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(v)),h?.destroy(),(0,o.T)(t.current,{config:d,...v}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":d})}var l=s("1858"),d=s("3262"),c=s("1705"),h=s("7645"),u=s("8168"),g=s("8228"),p=s("5050");function m(e){let[t,s]=(0,r.useState)(e.js),[i,o]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[m,f]=(0,r.useState)(e.vue),[v,j]=(0,r.useState)(e.svelte),x="3.7rem",[y,w]=(0,r.useState)(!0),[b,S]=(0,r.useState)(x),C=(0,r.useRef)(null),P=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},255)};return(0,r.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),o(e(i,"ts")),l(e(a,"jsx")),f(e(m,"html")),j(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${g.Z.details}`,"data-collapsed":y,style:{height:y?x:b,overflow:"hidden",willChange:"height",transition:`height ${y?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{w(!y),P()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:p.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:P},children:(0,n.jsx)(c.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:P},children:(0,n.jsx)(c.Z,{language:"ts",children:i})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:P},children:(0,n.jsx)(c.Z,{language:"jsx",children:a})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:P},children:(0,n.jsx)(c.Z,{language:"html",children:m})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:P},children:(0,n.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:r,height:o,...d}=e,{colorMode:c}=(0,i.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),g=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (); +} + +`.trimStart(),f=` + + + +`,v=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(m,{js:u,ts:g,react:p,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return r}});var n=s(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:i="lazy",view:o}=t,a=n||"headless"===o,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)P(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(r(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":i);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let g=t.params;"object"==typeof g&&Object.keys(g).length>0&&JSON.stringify(g).length<1800&&Object.keys(g).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(g[e])))});let p=!1,m="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",r=l.querySelector(`iframe.${n}`),o=r||document.createElement("iframe");o.classList.add(n),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===i?"eager":"lazy"),a?P(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),o.onload=()=>{e(o)},o.src=c.href,r||l.appendChild(o)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),j=()=>p?Promise.reject(m):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),x=(e,t)=>new Promise(async(s,n)=>{if(p)return n(m);await j();let i=E();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===i&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:i,args:t},h)}),y={},w=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(p)throw Error(m);return w.includes(e)?(x("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!y[t])return;let s=e.data?.payload;y[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(y).forEach(e=>{e.length=0}),f?.remove?.(),p=!0};function P(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nv.settled?x("destroy").then(C):p?Promise.reject(m):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:r={},headless:o,import:a,lite:l,view:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||o;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==d?r.view=d:e.searchParams.set("view",d)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(r))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return o}});var n=s(7294);let i={},r=n.createContext(i);function o(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/1df93b7f.0bb20414.js b/docs/assets/js/1df93b7f.0bb20414.js new file mode 100644 index 0000000..576c93b --- /dev/null +++ b/docs/assets/js/1df93b7f.0bb20414.js @@ -0,0 +1,62 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8706"],{3365:function(e,t,s){s.d(t,{Z:()=>j});var r=s("5893"),i=s("4200"),n=s("7294"),o=s("8294");function a(e){let t=(0,n.useRef)(null),[s,i]=(0,n.useState)(e.className||""),[a,l]=(0,n.useState)(e.style||{}),[c,d]=(0,n.useState)(e.height),[m,u]=(0,n.useState)(),[h,g]=(0,n.useState)(JSON.stringify(e.config||"")),[p,j]=(0,n.useState)("");return(0,n.useEffect)(()=>{if(!t.current)return;let{className:s,style:r,height:n,sdkReady:a,config:c,...f}=e;if(i(s||""),l(r||{}),d(n),m&&p===JSON.stringify(f)){if(h===JSON.stringify(c))return;g(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{m?.setConfig(e)}):c&&m.setConfig(c)}else j(JSON.stringify(f)),m?.destroy(),(0,o.T)(t.current,{config:c,...f}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,n.useEffect)(()=>()=>{m?.destroy()},[]),(0,r.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),m=s("7645"),u=s("8168"),h=s("8228"),g=s("5050");function p(e){let[t,s]=(0,n.useState)(e.js),[i,o]=(0,n.useState)(e.ts),[a,l]=(0,n.useState)(e.react),[p,j]=(0,n.useState)(e.vue),[f,x]=(0,n.useState)(e.svelte),b="3.7rem",[v,y]=(0,n.useState)(!0),[w,S]=(0,n.useState)(b),Z=(0,n.useRef)(null),N=()=>{setTimeout(()=>{S(`calc(${Z.current.offsetHeight}px + ${b})`)},5),setTimeout(()=>{S(`calc(${Z.current.offsetHeight}px + ${b})`)},255)};return(0,n.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),o(e(i,"ts")),l(e(a,"jsx")),j(e(p,"html")),x(e(f,"html"))}},[]),(0,r.jsxs)("details",{className:`alert alert--info ${g.Z.details} ${h.Z.details}`,"data-collapsed":v,style:{height:v?b:w,overflow:"hidden",willChange:"height",transition:`height ${v?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,r.jsx)("summary",{onClick:()=>{y(!v),N()},children:"show code"}),(0,r.jsx)("div",{ref:Z,style:{display:"block",overflow:"hidden"},children:(0,r.jsx)("div",{className:g.Z.collapsibleContent,children:(0,r.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,r.jsx)(m.Z,{value:"js",label:"JS",attributes:{onMouseDown:N},children:(0,r.jsx)(d.Z,{language:"js",children:t})}),(0,r.jsx)(m.Z,{value:"ts",label:"TS",attributes:{onMouseDown:N},children:(0,r.jsx)(d.Z,{language:"ts",children:i})}),(0,r.jsx)(m.Z,{value:"react",label:"React",attributes:{onMouseDown:N},children:(0,r.jsx)(d.Z,{language:"jsx",children:a})}),(0,r.jsx)(m.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:N},children:(0,r.jsx)(d.Z,{language:"html",children:p})}),(0,r.jsx)(m.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:N},children:(0,r.jsx)(d.Z,{language:"html",children:f})})]})})})]})}function j(e){let{className:t,style:s,showCode:n,height:o,...c}=e,{colorMode:d}=(0,i.I)(),m=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${m(c)}; +createPlayground('#container', options); + +`.trimStart(),h=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${m(c)}; +createPlayground('#container', options); + +`.trimStart(),g=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${m(c)}; + return (); +} + +`.trimStart(),j=` + + + +`,f=` + + +
+ +`.trimStart();return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,r.jsx)(p,{js:u,ts:h,react:g,vue:j,svelte:f})]})}},4978:function(e,t,s){s.r(t),s.d(t,{default:()=>D});var r=s("5893"),i=s("3367"),n=s("7262"),o=s("3687"),a=s("7026"),l=s("7294"),c=s("1705"),d=s("615");let m=[{label:"A large collection of languages",url:"./img/screenshots/languages-3.jpg"},{label:"Lots of features",url:"./img/screenshots/export-1.jpg"},{label:"Even more features",url:"./img/screenshots/snippets-1.jpg"},{label:"Starter templates for new projects",url:"./img/screenshots/templates-1.jpg"},{label:"... many starter templates",url:"./img/screenshots/templates-2.jpg"},{label:"Welcome screen - for a quick start",url:"./img/screenshots/welcome-1.jpg"},{label:"Keep your projects organized",url:"./img/screenshots/saved-projects-1.jpg"},{label:"Add external resources",url:"./img/screenshots/resources.jpg"},{label:"CSS Processors",url:"./img/screenshots/css-processors.jpg"},{label:"IntelliSense (autocomplete)",url:"./img/screenshots/intellisense-3.jpg"},{label:"AI Code Assistant",url:"./img/screenshots/ai-1.jpg"},{label:"Console for quick inspection",url:"./img/screenshots/console-1.jpg"},{label:"View compiled code",url:"./img/screenshots/compiled-code-1.jpg"},{label:"Import code from many sources",url:"./img/screenshots/import-2.jpg"},{label:"Embed projects into your web pages",url:"./img/screenshots/embed-1.jpg"},{label:"Share your projects with others",url:"./img/screenshots/share-1.jpg"},{label:"Deploy to GitHub Pages",url:"./img/screenshots/deploy-1.jpg"},{label:"Broadcast real-time code changes",url:"./img/screenshots/broadcast-1.jpg"},{label:"Project info",url:"./img/screenshots/project-info.jpg"},{label:"Assets manager",url:"./img/screenshots/assets-2.jpg"},{label:"Code snippets",url:"./img/screenshots/snippets-list.jpg"},{label:"Run automated tests!",url:"./img/screenshots/tests.jpg"},{label:"Sync with your other devices",url:"./img/screenshots/sync.jpg"},{label:"Backup and restore your data",url:"./img/screenshots/backup-restore-1.jpg"},{label:"Fine-tune your editor settings",url:"./img/screenshots/editor-settings-1.jpg"},{label:"Emmet support and Vim/Emacs modes",url:"./img/screenshots/editor-settings-3.jpg"},{label:"Select your favorite theme/color",url:"./img/screenshots/themes-5.jpg"},{label:"Change UI language to your preferred one",url:"./img/screenshots/i18n-1.jpg"},{label:"Responsive layout",url:"./img/screenshots/responsive.jpg"}];function u(e){let{label:t,url:s}=e;return(0,r.jsxs)("div",{children:[(0,r.jsx)("img",{src:s,alt:t}),(0,r.jsx)("p",{className:"legend",children:t})]})}function h(){return(0,r.jsx)(d.Carousel,{showStatus:!1,showThumbs:!1,infiniteLoop:!0,className:"carousel_dVSv",children:m.map((e,t)=>(0,r.jsx)(u,{...e},t))})}let g={features:"features_xdhU",center:"center_LOKI",left:"left_Y8za",padding:"padding_OUuT",steps:"steps_x5R3",border:"border_yjIZ",featureSvg:"featureSvg__8YW",rowLight:"rowLight_gCoF",rowDark:"rowDark_XdIb",carousel:"carousel_oYf_",buttons:"buttons_CYIY",finePrint:"finePrint_YKYp"};var p=s("3262");let j={sliders:"sliders_tEds",buttons:"buttons_NJZT",slider:"slider_ZiNZ",current:"current_jjur",hidden:"hidden_OdSS"},f=e=>({...e[Math.floor(Math.random()*e.length)],id:Math.random()});function x(){let e={markup:[{name:"html",title:"HTML"},{name:"markdown",title:"Markdown"},{name:"mdx",title:"MDX"},{name:"astro",title:"Astro"},{name:"pug",title:"Pug"},{name:"asciidoc",title:"AsciiDoc"},{name:"haml",title:"Haml"},{name:"mustache",title:"Mustache"},{name:"handlebars",title:"Handlebars"},{name:"ejs",title:"EJS"},{name:"eta",title:"Eta"},{name:"nunjucks",title:"Nunjucks"},{name:"liquid",title:"Liquid"},{name:"dot",title:"doT"},{name:"twig",title:"Twig"},{name:"vento",title:"Vento"},{name:"art-template",title:"art-template"},{name:"jinja",title:"Jinja"},{name:"bbcode",title:"BBCode"},{name:"mjml",title:"MJML"},{name:"diagrams",title:"Diagrams"},{name:"richtext",title:"Rich Text"}],style:[{name:"css",title:"CSS"},{name:"scss",title:"SCSS"},{name:"sass",title:"Sass"},{name:"less",title:"Less"},{name:"stylus",title:"Stylus"},{name:"stylis",title:"Stylis"},{name:"tailwindcss",title:"Tailwind CSS",processor:!0},{name:"windicss",title:"Windi CSS",processor:!0},{name:"unocss",title:"UnoCSS",processor:!0},{name:"tokencss",title:"Token CSS",processor:!0},{name:"lightningcss",title:"Lightning CSS",processor:!0},{name:"cssmodules",title:"CSS Modules",processor:!0}],script:[{name:"javascript",title:"JS"},{name:"typescript",title:"Typescript"},{name:"flow",title:"Flow"},{name:"babel",title:"Babel"},{name:"sucrase",title:"Sucrase"},{name:"jsx",title:"JSX"},{name:"tsx",title:"TSX"},{name:"react",title:"React"},{name:"react-tsx",title:"React (TSX)"},{name:"react-native",title:"React Native"},{name:"react-native-tsx",title:"React Native (TSX)"},{name:"vue",title:"Vue 3"},{name:"vue2",title:"Vue 2"},{name:"svelte",title:"Svelte"},{name:"stencil",title:"Stencil"},{name:"solid",title:"Solid"},{name:"solid.tsx",title:"Solid (TS)"},{name:"riot",title:"Riot.js"},{name:"malina",title:"Malina.js"},{name:"coffeescript",title:"CoffeeScript"},{name:"livescript",title:"LiveScript"},{name:"civet",title:"Civet"},{name:"clio",title:"Clio"},{name:"imba",title:"Imba"},{name:"rescript",title:"ReScript"},{name:"reason",title:"Reason"},{name:"ocaml",title:"OCaml"},{name:"python",title:"Python"},{name:"python-wasm",title:"Python (Wasm)"},{name:"r",title:"R"},{name:"ruby",title:"Ruby"},{name:"ruby-wasm",title:"Ruby (Wasm)"},{name:"go",title:"Go"},{name:"php",title:"PHP"},{name:"php-wasm",title:"PHP (Wasm)"},{name:"cpp",title:"C++"},{name:"cpp-wasm",title:"C++ (Wasm)"},{name:"java",title:"Java"},{name:"csharp-wasm",title:"C# (Wasm)"},{name:"perl",title:"Perl"},{name:"lua",title:"Lua"},{name:"lua-wasm",title:"Lua (Wasm)"},{name:"teal",title:"Teal"},{name:"fennel",title:"Fennel"},{name:"julia",title:"Julia"},{name:"scheme",title:"Scheme"},{name:"commonlisp",title:"Lisp"},{name:"clojurescript",title:"CLJS"},{name:"gleam",title:"Gleam"},{name:"tcl",title:"Tcl"},{name:"assemblyscript",title:"AssemblyScript"},{name:"wat",title:"WAT"},{name:"sql",title:"SQL"},{name:"postgresql",title:"PostgreSQL"},{name:"prolog",title:"Prolog"},{name:"blockly",title:"Blockly"}]},t=["markup","style","script"],s={},n={markup:"html",style:"css",script:"js"},o=(e,t)=>{n[e]=t},a=t=>{let s=t?f(e.style).name:n.style,r=e.style.find(e=>e.name===s).processor,i=t?f(e.markup).name+"&"+(r?"css":s)+"&"+f(e.script).name:n.markup+"&"+(r?"css":s)+"&"+n.script;window.open(location.origin+"?"+i+(r?"&processors="+s:""),"_blank")};return p.Z.canUseDOM&&setInterval(()=>{let e=t[Math.floor(Math.random()*t.length)];"function"==typeof s[e]&&s[e]()},2e3),(0,r.jsxs)("div",{className:j.sliders,children:[(0,r.jsx)(b,{slide:"markup",lists:e,cb:o,flipper:s}),(0,r.jsx)("span",{children:"+"}),(0,r.jsx)(b,{slide:"style",lists:e,cb:o,flipper:s}),(0,r.jsx)("span",{children:"+"}),(0,r.jsx)(b,{slide:"script",lists:e,cb:o,flipper:s}),(0,r.jsxs)("div",{className:j.buttons,children:[(0,r.jsx)(i.Z,{className:"button button--outline button--primary button--lg",onClick:()=>a(!1),children:"Looks Good \uD83D\uDE80"}),(0,r.jsx)(i.Z,{className:"button button--outline button--warning button--lg",onClick:()=>a(!0),children:"Surprise me \uD83C\uDF81"})]})]})}function b(e){let{lists:t,slide:s,cb:i,flipper:n}=e,o=t[s],[a,c]=(0,l.useState)([f(o.slice(1)),{...o[0],id:Math.random()},f(o.slice(1))]);return(0,l.useEffect)(()=>()=>{c([])},[]),n[s]=()=>{c([...a.slice(-2),f(o.filter(e=>e.name!==a[2].name))]),i(s,a[2].name)},(0,r.jsx)("div",{className:j.slider,children:a.map((e,t)=>(0,r.jsx)("div",{className:t===a.length-1?j.hidden:t===a.length-2?j.current:"",children:e.title},e.id))})}var v=s("3365");let y=[{title:"Feature-Rich",image:"./img/light-bulb.svg",description:(0,r.jsxs)(r.Fragment,{children:["Supports"," ",(0,r.jsx)(i.Z,{to:"./languages",children:(0,r.jsx)("strong",{children:"90+ languages/frameworks"})}),". TypeScript Support, npm Modules, Console, Compiled code viewer, Tests, Starter Templates, Save, Import, Export, Share, Deploy, Assets, Snippets, Backup/Restore, Sync, Broadcast and a lot more"," ",(0,r.jsx)(i.Z,{to:"./features",children:(0,r.jsx)("strong",{children:"features"})}),". Features are downloaded only when used."]})},{title:"Client-Side!",image:"./img/clients.svg",description:(0,r.jsxs)(r.Fragment,{children:["LiveCodes ",(0,r.jsx)("strong",{children:"runs in the browser"}),", where all the processing/transpilation occurs, with ",(0,r.jsx)("strong",{children:"no server rounds"})," required. So, after the initial load, it becomes pretty ",(0,r.jsx)("strong",{children:"fast"}),". It can be hosted on any"," ",(0,r.jsx)("strong",{children:"static file server or CDN"}),". No ",(0,r.jsx)("code",{children:"npm\xa0install"}),"s. Just the browser!"]})},{title:"Integrations",image:"./img/integrations.svg",description:(0,r.jsxs)(r.Fragment,{children:["Rich set of integrations. ",(0,r.jsx)(i.Z,{to:"./features/import",children:"Import"})," code from"," ",(0,r.jsx)("strong",{children:"GitHub"})," files/repos/gists, Gitlab files/repos/snippets, JsBin or web pages."," ",(0,r.jsx)(i.Z,{to:"./features/export",children:"Export"})," to GitHub gists, CodePen or JsFiddle."," ",(0,r.jsx)(i.Z,{to:"./features/deploy",children:"Deploy"})," to GitHub Pages."," ",(0,r.jsx)(i.Z,{to:"./features/sync",children:"Sync"})," to GitHub Repo."]})}],w=[{title:"Powerful Editor",image:"./img/feather.svg",description:(0,r.jsxs)(r.Fragment,{children:["The code editor offers ",(0,r.jsx)("strong",{children:"auto-complete"}),", intellisense, code",(0,r.jsx)("strong",{children:" format"}),", multi-cursor editing, ",(0,r.jsx)("strong",{children:"Emmet"})," support,"," ",(0,r.jsx)("strong",{children:"Vim and Emacs"})," modes, editor themes, customizable"," ",(0,r.jsx)(i.Z,{to:"./features/editor-settings",children:"editor settings"})," and more. The powerful Monaco editor (that powers ",(0,r.jsx)("strong",{children:"VS\xa0Code"}),") is used on desktop, and a touch-friendly editor is used on mobile."]})},{title:"AI Code Assistant",image:"./img/magic-wand.svg",description:(0,r.jsxs)(r.Fragment,{children:["Leverage the ",(0,r.jsx)(i.Z,{to:"./features/ai",children:"power of AI"})," to help you write/learn code, using the ",(0,r.jsx)("strong",{children:"free"})," Copilot alternative. It understands the context of your code and comments to generate suggestions. It has a wide range of language support, and it works everywhere (in the ",(0,r.jsx)(i.Z,{to:"./getting-started#standalone-app",children:"standalone app"}),","," ",(0,r.jsx)(i.Z,{to:"./features/embeds",children:"embedded playgrounds"})," and"," ",(0,r.jsx)(i.Z,{to:"./features/self-hosting",children:"self-hosted"})," apps)."]})},{title:"Mobile-Friendly",image:"./img/responsive.svg",description:(0,r.jsxs)(r.Fragment,{children:["LiveCodes offers a great ",(0,r.jsx)(i.Z,{to:"./features/mobile",children:"mobile"})," experience. The"," ",(0,r.jsx)("strong",{children:"responsive"})," layout allows working on devices with different screen sizes. The ",(0,r.jsx)("strong",{children:"touch-friendly"})," CodeMirror 6 editor is used on mobile. Don't wait to be on your desk. Try your ideas on the go! And then ",(0,r.jsx)(i.Z,{to:"./features/share",children:"share"})," or"," ",(0,r.jsx)(i.Z,{to:"./features/sync",children:"sync"})," your work across devices. You can even share using"," ",(0,r.jsx)("strong",{children:"QR code"}),"."]})}],S=[{title:"Standalone App",image:"./img/star.svg",description:(0,r.jsxs)(r.Fragment,{children:["Use the ",(0,r.jsx)(i.Z,{to:"./getting-started#standalone-app",children:"standalone app"})," for quick prototyping, testing new ideas or learning a new framework/language. The app remembers your"," ",(0,r.jsx)(i.Z,{to:"./features/user-settings",children:"settings"}),". Organize your"," ",(0,r.jsx)(i.Z,{to:"./features/projects",children:"projects"})," and"," ",(0,r.jsx)(i.Z,{to:"./features/assets",children:"assets"}),". ",(0,r.jsx)(i.Z,{to:"./features/share",children:"Share"})," code with friends. ",(0,r.jsx)(i.Z,{to:"./features/deploy",children:"Deploy"})," projects to public URLs."]})},{title:"Embedded Playgrounds",image:"./img/add-frame.svg",description:(0,r.jsxs)(r.Fragment,{children:["LiveCodes can be ",(0,r.jsx)(i.Z,{to:"./features/embeds",children:"embedded"})," in your web pages. Code can be easily ",(0,r.jsx)(i.Z,{to:"./features/code-prefill",children:"prefilled"}),". This is particularly useful for educational websites and for library documentations. It is"," ",(0,r.jsx)(i.Z,{to:"./features/security",children:"secure"})," and highly"," ",(0,r.jsx)(i.Z,{to:"./configuration",children:"configurable"}),"."," ",(0,r.jsx)(i.Z,{to:"./features/intellisense",children:"Intellisense"})," is available even for custom libraries!"]})},{title:"Developer-Friendly",image:"./img/code.svg",description:(0,r.jsxs)(r.Fragment,{children:["It is easy to ",(0,r.jsx)(i.Z,{to:"./getting-started",children:"get started"}),". LiveCodes is highly"," ",(0,r.jsx)(i.Z,{to:"./configuration/configuration-object",children:"configurable"})," (even by URL"," ",(0,r.jsx)(i.Z,{to:"./configuration/query-params",children:"query params"}),"). The"," ",(0,r.jsx)(i.Z,{to:"./sdk/",children:"SDK"})," facilitates ",(0,r.jsx)(i.Z,{to:"./features/embeds",children:"embedding"})," ","playgrounds and allows easy ",(0,r.jsx)(i.Z,{to:"./sdk/js-ts#sdk-methods",children:"communication"})," with them. The SDK is available for ",(0,r.jsx)(i.Z,{to:"./sdk/js-ts",children:"vanilla JS/TS"}),","," ",(0,r.jsx)(i.Z,{to:"./sdk/react",children:"React"}),", ",(0,r.jsx)(i.Z,{to:"./sdk/vue",children:"Vue"})," and"," ",(0,r.jsx)(i.Z,{to:"./sdk/svelte",children:"Svelte"}),". There is also a"," ",(0,r.jsx)(i.Z,{to:"./sdk/headless",children:"headless mode"})," for full control over the UI."]})}],Z=[{title:"Documentations",image:"./img/docs.svg",description:(0,r.jsxs)(r.Fragment,{children:["Comprehensive ",(0,r.jsx)(i.Z,{to:"./overview",children:"documentations"})," for"," ",(0,r.jsx)(i.Z,{to:"./features",children:"features"}),", ",(0,r.jsx)(i.Z,{to:"./configuration",children:"configuration"})," and"," ",(0,r.jsx)(i.Z,{to:"./sdk",children:"SDK"})," (including ",(0,r.jsx)(i.Z,{to:"./api/globals",children:"TypeScript types"}),"). Documentations are rich with code samples, live demos and screenshots. A gallery of usage examples is provided as a ",(0,r.jsx)(i.Z,{to:"pathname:///../stories",children:"storybook"}),"."]})},{title:"Focused on Privacy",image:"./img/data-privacy.svg",description:(0,r.jsxs)(r.Fragment,{children:["Projects are private by default. The code you write in LiveCodes never leaves your device, unless you choose to share, export or sync it. User data is stored in the browser. User code runs in a sandboxed environment. ",(0,r.jsx)(i.Z,{to:"./features/security",children:"Security"})," is taken seriously."]})},{title:"Free and Open-Source",image:"./img/oss.svg",description:(0,r.jsxs)(r.Fragment,{children:["LiveCodes is ",(0,r.jsx)("strong",{children:"free"}),", with ",(0,r.jsx)("strong",{children:"no\xa0limits"})," for use,"," ",(0,r.jsx)("strong",{children:"no\xa0ads"})," and no\xa0account required*.",(0,r.jsx)("br",{}),"Do you want to ",(0,r.jsx)(i.Z,{to:"./features/self-hosting",children:"self-host"})," it for commercial use? No problem! It is"," ",(0,r.jsxs)("span",{style:{whiteSpace:"nowrap"},children:[(0,r.jsx)(i.Z,{to:"./license",children:(0,r.jsx)("strong",{children:"MIT-licensed"})})," ","\uD83C\uDF89"]}),(0,r.jsx)("br",{}),"Please consider ",(0,r.jsx)(i.Z,{to:"./sponsor",children:"sponsoring LiveCodes"})," \u2764"]})}];function N(e){let{title:t,image:s,description:i}=e;return(0,r.jsxs)("div",{className:(0,a.Z)("col col--4"),children:[s&&(0,r.jsx)("div",{className:"text--center",children:(0,r.jsx)("img",{className:g.featureSvg,alt:t,src:s})}),(0,r.jsxs)("div",{className:"text--center padding-horiz--md",children:[(0,r.jsx)("h3",{children:t}),(0,r.jsx)("p",{children:i})]})]})}let k=` +import { createPlayground } from "livecodes"; + +createPlayground("#container", { template: "react" }); +`.trimStart(),C=()=>{let{siteConfig:e}=(0,n.Z)();return(0,r.jsx)(c.Z,{language:"html",showLineNumbers:!0,children:` +
+`.trimStart()})};function P(){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("section",{className:g.features,children:(0,r.jsxs)("div",{className:"container",children:[(0,r.jsx)("div",{className:"row",children:(0,r.jsx)(x,{})}),(0,r.jsxs)("div",{className:"row "+g.center,children:[(0,r.jsx)(v.Z,{template:"react",style:{height:"70vh",width:"95%",boxShadow:"0 0 20px var(--ifm-color-secondary-darkest)"},showCode:!1,loading:"eager"}),(0,r.jsx)("div",{className:"margin-vert--md",children:(0,r.jsxs)("p",{children:["Psst. This is an interactive playground!",(0,r.jsx)("img",{src:"./img/arrow.svg",alt:"arrow-up",style:{height:"2em",verticalAlign:"middle",marginLeft:"0.5em",marginBottom:"0.7em"}}),(0,r.jsx)("br",{}),"Try editing the code above and see the changes reflected in the result page."]})})]}),(0,r.jsx)("div",{className:"row "+g.center,children:(0,r.jsx)("p",{children:"Want a similar playground for your website?"})}),(0,r.jsx)("div",{style:{maxWidth:"35em",margin:"auto"},children:(0,r.jsx)(c.Z,{language:"js",children:k})}),(0,r.jsxs)("div",{className:`row ${g.center} ${g.buttons}`,children:[(0,r.jsx)(i.Z,{className:" button button--info button--outline button--lg",to:"./getting-started",children:"Get Started \u2708\uFE0F"}),(0,r.jsx)(i.Z,{className:"button button--primary button--outline button--lg",to:"./overview",children:"Documentations \uD83D\uDCD6"})]})]})}),(0,r.jsx)("section",{className:(0,a.Z)(g.features,g.rowDark),children:(0,r.jsx)("div",{className:"container padding-vert--lg",children:(0,r.jsxs)("div",{className:"text--center padding-horiz--md",children:[(0,r.jsx)("h2",{className:g.padding,children:"Code Playground That Just Works!"}),(0,r.jsxs)("div",{className:"row "+g.center,children:[(0,r.jsx)("div",{className:(0,a.Z)("col col--6",g.left),children:(0,r.jsxs)("ul",{children:[(0,r.jsx)("li",{children:"No servers to configure (or pay for!)"}),(0,r.jsx)("li",{children:"No databases to maintain (or pay for!)"}),(0,r.jsx)("li",{children:"No installs"}),(0,r.jsx)("li",{children:"No configuration files"}),(0,r.jsx)("li",{children:"No build steps"}),(0,r.jsxs)("li",{children:["No subscription fees (free and ",(0,r.jsx)(i.Z,{to:"./license/",children:"open-source"}),")"]}),(0,r.jsx)("li",{children:"No account required *"}),(0,r.jsx)("li",{children:"No limits for usage (unlimited private projects)"}),(0,r.jsx)("li",{children:(0,r.jsx)(i.Z,{to:"./languages/",children:"90+ languages/frameworks/processors"})}),(0,r.jsxs)("li",{children:["Large set of ",(0,r.jsx)(i.Z,{to:"./features/",children:"features"})," and integrations"]}),(0,r.jsxs)("li",{children:[(0,r.jsx)(i.Z,{to:"./features/import",children:"Import"})," code from a wide variety of sources"]}),(0,r.jsxs)("li",{children:["Use modules from ",(0,r.jsx)(i.Z,{to:"./features/module-resolution",children:"npm"}),","," ",(0,r.jsx)(i.Z,{to:"./features/module-resolution#deno-modules",children:"deno.land/x"}),","," ",(0,r.jsx)(i.Z,{to:"./features/module-resolution#jsr-modules",children:"jsr"}),","," ",(0,r.jsx)(i.Z,{to:"./features/module-resolution#githubgitlabbitbucket",children:"GitHub"}),", and others"]}),(0,r.jsxs)("li",{children:["Easily ",(0,r.jsx)(i.Z,{to:"./features/embeds",children:"embed"})," it in your web pages"]}),(0,r.jsx)("li",{children:"It runs in the browser (client-side)"})]})}),(0,r.jsxs)("div",{className:(0,a.Z)("col col--6",g.left),children:[(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{children:(0,r.jsx)("strong",{children:"Steps:"})}),(0,r.jsx)("ol",{className:g.steps,children:(0,r.jsxs)("li",{children:["Go to"," ",(0,r.jsx)("a",{href:"https://livecodes.io/",target:"_blank",children:"livecodes.io"})]})}),"... and enjoy all the ",(0,r.jsx)(i.Z,{to:"./features/",children:"features"}),"!"]}),(0,r.jsx)("hr",{}),(0,r.jsxs)("div",{children:[(0,r.jsxs)("p",{children:["Do you want to ",(0,r.jsx)(i.Z,{to:"./features/embeds",children:"embed"})," it in a web page?"]}),(0,r.jsx)("p",{children:"Add this code to your page:"}),(0,r.jsx)("div",{className:g.border,children:(0,r.jsx)(C,{})})]}),(0,r.jsx)("hr",{}),(0,r.jsxs)("div",{children:[(0,r.jsxs)("p",{children:["Ok, do you want to ",(0,r.jsx)(i.Z,{to:"./features/self-hosting",children:"self-host"})," it?"]}),(0,r.jsxs)("ol",{className:g.steps,children:[(0,r.jsxs)("li",{children:["Download a"," ",(0,r.jsx)("a",{href:"https://github.com/live-codes/livecodes/releases",target:"_blank",children:"release"})]}),(0,r.jsxs)("li",{children:["Put it on a static file server (for free!)",(0,r.jsxs)("sup",{children:[" ",(0,r.jsx)("a",{href:"https://pages.cloudflare.com/",target:"_blank",rel:"noopener",children:"1"}),","," ",(0,r.jsx)("a",{href:"https://vercel.com/",target:"_blank",rel:"noopener",children:"2"}),","," ",(0,r.jsx)("a",{href:"https://www.netlify.com/",target:"_blank",rel:"noopener",children:"3"}),","," ",(0,r.jsx)("a",{href:"https://firebase.google.com/",target:"_blank",rel:"noopener",children:"4"}),","," ",(0,r.jsx)("a",{href:"https://pages.github.com/",target:"_blank",rel:"noopener",children:"5"})]})]})]}),"... and it just works!"]})]})]}),(0,r.jsxs)("p",{className:g.finePrint,children:["* GitHub account is required only for features that use"," ",(0,r.jsx)(i.Z,{to:"./features/github-integration",children:"GitHub Integration"}),"."]})]})})}),(0,r.jsx)("section",{className:(0,a.Z)(g.features,g.rowLight),children:(0,r.jsx)("div",{className:"container padding-vert--lg",children:(0,r.jsx)("div",{className:"row "+g.center,children:y.map((e,t)=>(0,r.jsx)(N,{...e},t))})})}),(0,r.jsx)("section",{className:(0,a.Z)(g.features,g.rowDark),children:(0,r.jsx)("div",{className:"container padding-vert--lg",children:(0,r.jsx)("div",{className:"row "+g.center,children:w.map((e,t)=>(0,r.jsx)(N,{...e,idx:t},t))})})}),(0,r.jsx)("section",{className:(0,a.Z)(g.features,g.rowLight),children:(0,r.jsx)("div",{className:"container padding-vert--lg",children:(0,r.jsx)("div",{className:"row "+g.center,children:S.map((e,t)=>(0,r.jsx)(N,{...e},t))})})}),(0,r.jsx)("section",{className:(0,a.Z)(g.features,g.rowDark),children:(0,r.jsxs)("div",{className:"container padding-vert--lg",children:[(0,r.jsx)("div",{className:"row "+g.center,children:Z.map((e,t)=>(0,r.jsx)(N,{...e},t))}),(0,r.jsxs)("p",{className:g.finePrint,children:["The OSI logo trademark is the trademark of Open Source Initiative.",(0,r.jsx)("br",{}),"* GitHub account is required only for features that use"," ",(0,r.jsx)(i.Z,{to:"./features/github-integration",children:"GitHub Integration"}),"."]})]})}),(0,r.jsx)("section",{children:(0,r.jsx)("div",{className:"container padding-vert--lg "+g.center,children:(0,r.jsxs)("div",{className:["row",g.carousel,g.center].join(" "),children:[(0,r.jsx)("h3",{children:"Screenshots"}),(0,r.jsx)(h,{})]})})}),(0,r.jsx)("section",{children:(0,r.jsx)("div",{className:"container padding-vert--lg "+g.center,children:(0,r.jsx)("div",{className:["row",g.carousel,g.center].join(" "),children:(0,r.jsxs)("div",{className:g.buttons,children:[(0,r.jsx)(i.Z,{className:"button button--primary button--outline button--lg",to:"./overview",children:"Documentations \uD83D\uDCD6"}),(0,r.jsx)(i.Z,{className:" button button--info button--outline button--lg",href:"pathname:///../?new",target:"_blank",children:"New Project \u2728"})]})})})})]})}var L=s("2188");function T(){let{siteConfig:e}=(0,n.Z)();return(0,r.jsx)("header",{className:(0,a.Z)("hero","heroBanner_qdFl"),children:(0,r.jsxs)("div",{className:"container",children:[(0,r.jsx)("h1",{className:"hero__title",children:e.title}),(0,r.jsx)("p",{className:"hero__subtitle",children:e.tagline}),(0,r.jsx)("div",{className:"buttons_AeoN",children:(0,r.jsx)(i.Z,{className:"tryButton_B7Kd button button--secondary button--lg",href:"pathname:///../",children:"Start Coding \u26A1"})}),(0,r.jsxs)("div",{className:"description_meEo",children:["An open-source ",(0,r.jsx)("strong",{children:"client-side"})," playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and"," ",(0,r.jsx)(i.Z,{to:"./languages",children:(0,r.jsx)("strong",{children:"90+ languages/frameworks"})}),"."]}),(0,r.jsx)("div",{className:"eaHomepage_CKX0",children:(0,r.jsx)("div",{className:"flat","data-ea-publisher":"livecodesio","data-ea-type":"text","data-ea-manual":"true"})})]})})}function D(){let{siteConfig:e}=(0,n.Z)();return(0,l.useEffect)(()=>{(0,L.kA)()},[]),(0,r.jsxs)(o.Z,{description:e.tagline,children:[(0,r.jsx)(T,{}),(0,r.jsx)("main",{children:(0,r.jsx)(P,{})})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return n}});var r=s(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:r,loading:i="lazy",view:o}=t,a=r||"headless"===o,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)N(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(n(t)),m=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":i);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let h=t.params;"object"==typeof h&&Object.keys(h).length>0&&JSON.stringify(h).length<1800&&Object.keys(h).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(h[e])))});let g=!1,p="Cannot call API methods after calling `destroy()`.",j=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let r="livecodes",n=l.querySelector(`iframe.${r}`),o=n||document.createElement("iframe");o.classList.add(r),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===i?"eager":"lazy"),a?N(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===m&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===m&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:s},m))}),o.onload=()=>{e(o)},o.src=d.href,n||l.appendChild(o)}),f=new Promise(e=>{addEventListener("message",function t(s){s.source===j.contentWindow&&s.origin===m&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),f.settled=!0)})}),x=()=>g?Promise.reject(p):new Promise(async e=>{f.settled&&e(),j.contentWindow?.postMessage({type:"livecodes-load"},m),await f,e()}),b=(e,t)=>new Promise(async(s,r)=>{if(g)return r(p);await x();let i=k();addEventListener("message",function t(n){if(n.source===j.contentWindow&&n.origin===m&&n.data?.type==="livecodes-api-response"&&n.data?.id===i&&n.data.method===e){removeEventListener("message",t);let e=n.data.payload;e?.error?r(e.error):s(e)}}),j.contentWindow?.postMessage({method:e,id:i,args:t},m)}),v={},y=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(g)throw Error(p);return y.includes(e)?(b("watch",[e]),v[e]||(v[e]=[]),v[e]?.push(t),{remove:()=>{v[e]=v[e]?.filter(e=>e!==t),v[e]?.length===0&&b("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==j.contentWindow||e.origin!==m||!t||!v[t])return;let s=e.data?.payload;v[t]?.forEach(e=>{e(s)})});let Z=()=>{Object.values(v).forEach(e=>{e.length=0}),j?.remove?.(),g=!0};function N(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await x(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let k=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>x(),run:()=>b("run"),format:e=>b("format",[e]),getShareUrl:e=>b("getShareUrl",[e]),getConfig:e=>b("getConfig",[e]),setConfig:e=>b("setConfig",[e]),getCode:()=>b("getCode"),show:(e,t)=>b("show",[e,t]),runTests:()=>b("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),r=1;rf.settled?b("destroy").then(Z):g?Promise.reject(p):(Z(),Promise.resolve())}}function n(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:n={},headless:o,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let m=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,r]=t;void 0!==r&&e.searchParams.set(s,String(r))});let u="headless"===t.view||o;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof n&&null==n.mode?n.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof n&&null==n.view&&"headless"!==c?n.view=c:e.searchParams.set("view",c)),"string"==typeof n)try{new URL(n),e.searchParams.set("config",encodeURIComponent(n))}catch{throw Error('"config" is not a valid URL or configuration object.')}else n&&"object"==typeof n&&Object.keys(n).length>0&&(n.title&&"Untitled Project"!==n.title&&e.searchParams.set("title",n.title),n.description&&n.description.length>0&&e.searchParams.set("description",n.description),m.set("config","code/"+(0,r.compressToEncodedURIComponent)(JSON.stringify(n))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{m.set("params",(0,r.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=m.toString(),e.href}}}]); \ No newline at end of file diff --git a/docs/assets/js/2154.9e1a3fbb.js b/docs/assets/js/2154.9e1a3fbb.js new file mode 100644 index 0000000..cd767cd --- /dev/null +++ b/docs/assets/js/2154.9e1a3fbb.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2154"],{6945:function(s,c,e){e.r(c)}}]); \ No newline at end of file diff --git a/docs/assets/js/220a2203.c1b0258f.js b/docs/assets/js/220a2203.c1b0258f.js new file mode 100644 index 0000000..ab1a4d3 --- /dev/null +++ b/docs/assets/js/220a2203.c1b0258f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4020"],{208:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>i,metadata:()=>r,assets:()=>c,toc:()=>u,contentTitle:()=>a});var r=JSON.parse('{"id":"languages/riot","title":"Riot.js","description":"TODO...","source":"@site/docs/languages/riot.mdx","sourceDirName":"languages","slug":"/languages/riot","permalink":"/docs/languages/riot","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/riot.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Rich Text Editor","permalink":"/docs/languages/richtext"},"next":{"title":"Ruby (Wasm)","permalink":"/docs/languages/ruby-wasm"}}'),s=n("5893"),o=n("65");let i={},a="Riot.js",c={},u=[];function l(e){let t={h1:"h1",header:"header",p:"p",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"riotjs",children:"Riot.js"})}),"\n",(0,s.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},65:function(e,t,n){n.d(t,{Z:function(){return a},a:function(){return i}});var r=n(7294);let s={},o=r.createContext(s);function i(e){let t=r.useContext(o);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/263a0f1d.1dde1e7f.js b/docs/assets/js/263a0f1d.1dde1e7f.js new file mode 100644 index 0000000..2c9efbd --- /dev/null +++ b/docs/assets/js/263a0f1d.1dde1e7f.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5136"],{8181:function(e,t,s){s.r(t),s.d(t,{default:()=>p,frontMatter:()=>a,metadata:()=>n,assets:()=>c,params:()=>d,toc:()=>u,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/sucrase","title":"Sucrase","description":"Sucrase is a super-fast alternative to Babel for when you can target modern JS runtimes.","source":"@site/docs/languages/sucrase.mdx","sourceDirName":"languages","slug":"/languages/sucrase","permalink":"/docs/languages/sucrase","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/sucrase.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Stylus","permalink":"/docs/languages/stylus"},"next":{"title":"Svelte","permalink":"/docs/languages/svelte"}}'),r=s("5893"),o=s("65"),i=s("3365");let a={},l="Sucrase",c={},d={sucrase:"export const Greet = (name: string) => <>Hello {name}!;",compiled:"open"},u=[{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"sucrase",children:"Sucrase"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://sucrase.io/",children:"Sucrase"})," is a super-fast alternative to ",(0,r.jsx)(t.a,{href:"/docs/languages/babel",children:"Babel"})," for when you can target modern JS runtimes."]}),"\n",(0,r.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"sucrase"})}),"\n",(0,r.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:".sucrase"})}),"\n",(0,r.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"script"})}),"\n",(0,r.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsxs)(t.p,{children:["The official ",(0,r.jsx)(t.a,{href:"https://github.com/alangpierce/sucrase",children:"Sucrase compiler"}),"."]}),"\n",(0,r.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"sucrase"}),": v3.32.0"]}),"\n",(0,r.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,r.jsx)(t.code,{children:"sucrase"})," are passed as a JSON object to the ",(0,r.jsxs)(t.a,{href:"https://github.com/alangpierce/sucrase#usage-from-code",children:[(0,r.jsx)(t.code,{children:"transform"})," function"]})," during compile. Please check the ",(0,r.jsx)(t.a,{href:"https://github.com/alangpierce/sucrase",children:"documentation"})," for full reference."]}),"\n",(0,r.jsxs)(t.p,{children:["By default, the following transforms are enabled: ",(0,r.jsx)(t.code,{children:"['jsx', 'typescript']"})]}),"\n",(0,r.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Example:"})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",children:'{\n "sucrase": { "transforms": ["typescript", "imports"] }\n}\n'})}),"\n",(0,r.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n","\n",(0,r.jsx)(i.Z,{params:d}),"\n",(0,r.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://sucrase.io/",children:"Sucrase official website"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://github.com/alangpierce/sucrase",children:"Sucrase GitHub Repo"})}),"\n"]})]})}function p(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),r=s("4200"),o=s("7294"),i=s("8294");function a(e){let t=(0,o.useRef)(null),[s,r]=(0,o.useState)(e.className||""),[a,l]=(0,o.useState)(e.style||{}),[c,d]=(0,o.useState)(e.height),[u,h]=(0,o.useState)(),[p,g]=(0,o.useState)(JSON.stringify(e.config||"")),[m,f]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:o,sdkReady:a,config:c,...v}=e;if(r(s||""),l(n||{}),d(o),u&&m===JSON.stringify(v)){if(p===JSON.stringify(c))return;g(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else f(JSON.stringify(v)),u?.destroy(),(0,i.T)(t.current,{config:c,...v}).then(e=>{h(e),"function"==typeof a&&a(e)})},[e]),(0,o.useEffect)(()=>()=>{u?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),u=s("7645"),h=s("8168"),p=s("8228"),g=s("5050");function m(e){let[t,s]=(0,o.useState)(e.js),[r,i]=(0,o.useState)(e.ts),[a,l]=(0,o.useState)(e.react),[m,f]=(0,o.useState)(e.vue),[v,y]=(0,o.useState)(e.svelte),x="3.7rem",[j,b]=(0,o.useState)(!0),[w,S]=(0,o.useState)(x),E=(0,o.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${x})`)},255)};return(0,o.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(r,"ts")),l(e(a,"jsx")),f(e(m,"html")),y(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${g.Z.details} ${p.Z.details}`,"data-collapsed":j,style:{height:j?x:w,overflow:"hidden",willChange:"height",transition:`height ${j?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!j),C()},children:"show code"}),(0,n.jsx)("div",{ref:E,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:g.Z.collapsibleContent,children:(0,n.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,n.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"ts",children:r})}),(0,n.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"jsx",children:a})}),(0,n.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"html",children:m})}),(0,n.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:o,height:i,...c}=e,{colorMode:d}=(0,r.I)(),u=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),g=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (); +} + +`.trimStart(),f=` + + + +`,v=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(m,{js:h,ts:p,react:g,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return o}});var n=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:r="lazy",view:i}=t,a=n||"headless"===i,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)C(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(o(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":r);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let g=!1,m="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",o=l.querySelector(`iframe.${n}`),i=o||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===r?"eager":"lazy"),a?C(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),i.onload=()=>{e(i)},i.src=d.href,o||l.appendChild(i)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>g?Promise.reject(m):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},u),await v,e()}),x=(e,t)=>new Promise(async(s,n)=>{if(g)return n(m);await y();let r=P();addEventListener("message",function t(o){if(o.source===f.contentWindow&&o.origin===u&&o.data?.type==="livecodes-api-response"&&o.data?.id===r&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},u)}),j={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(g)throw Error(m);return b.includes(e)?(x("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==u||!t||!j[t])return;let s=e.data?.payload;j[t]?.forEach(e=>{e(s)})});let E=()=>{Object.values(j).forEach(e=>{e.length=0}),f?.remove?.(),g=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nv.settled?x("destroy").then(E):g?Promise.reject(m):(E(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:o={},headless:i,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let h="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==c?o.view=c:e.searchParams.set("view",c)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),u.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(o))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{u.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return i}});var n=s(7294);let r={},o=n.createContext(r);function i(e){let t=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/27544590.2bfa0ff0.js b/docs/assets/js/27544590.2bfa0ff0.js new file mode 100644 index 0000000..7b25375 --- /dev/null +++ b/docs/assets/js/27544590.2bfa0ff0.js @@ -0,0 +1,68 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8875"],{7240:function(e,t,o){o.r(t),o.d(t,{default:()=>p,frontMatter:()=>l,metadata:()=>s,assets:()=>d,simpleConfig:()=>c,toc:()=>h,contentTitle:()=>a});var s=JSON.parse('{"id":"features/display-modes","title":"Display Modes","description":"The configuration option mode, also available as query param, can be used to select different display modes.","source":"@site/docs/features/display-modes.mdx","sourceDirName":"features","slug":"/features/display-modes","permalink":"/docs/features/display-modes","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/display-modes.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Code to Image","permalink":"/docs/features/code-to-image"},"next":{"title":"Default View","permalink":"/docs/features/default-view"}}'),n=o("5893"),i=o("65"),r=o("3365");let l={},a="Display Modes",d={},c={mode:"simple",layout:"vertical",activeEditor:"script",editor:"monaco",tools:{status:"none"},script:{language:"jsx",content:`import { atom, useAtom } from 'jotai'; + +const countAtom = atom(0); + +const Counter = () => { + const [count, setCount] = useAtom(countAtom); + const inc = () => setCount((c) => c + 1); + return ( + <> + {count} + + ); +}; + +const App = () => ( +
+

Hello Jotai

+

Enjoy coding!

+ +
+); + +export default App; +`},style:{language:"css",content:".App {\n font-family: sans-serif;\n text-align: center;\n}\n".trimStart()}},h=[{value:"full",id:"full",level:2},{value:"focus",id:"focus",level:2},{value:"simple",id:"simple",level:2},{value:"lite",id:"lite",level:2},{value:"editor",id:"editor",level:2},{value:"codeblock",id:"codeblock",level:2},{value:"result",id:"result",level:2},{value:"Display Mode vs Default View",id:"display-mode-vs-default-view",level:2}];function u(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",p:"p",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"display-modes",children:"Display Modes"})}),"\n","\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configuration"})," option ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object#mode",children:(0,n.jsx)(t.code,{children:"mode"})}),", also available as ",(0,n.jsx)(t.a,{href:"/docs/configuration/query-params",children:"query param"}),", can be used to select different display modes.\nThe following display modes are supported:"]}),"\n",(0,n.jsx)(t.h2,{id:"full",children:(0,n.jsx)(t.code,{children:"full"})}),"\n",(0,n.jsx)(t.p,{children:"This is the default mode with toolbars, editor and result panes."}),"\n",(0,n.jsxs)(t.p,{children:["Example: ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?template=react",children:"https://livecodes.io/?template=react"})]}),"\n",(0,n.jsx)(t.p,{children:"Screenshot: (App in full mode)"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"full-mode",src:o(9912).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)(t.p,{children:"Demo: (Embedded playground in full mode)"}),"\n",(0,n.jsx)(r.Z,{template:"react"}),"\n",(0,n.jsx)(t.h2,{id:"focus",children:(0,n.jsx)(t.code,{children:"focus"})}),"\n",(0,n.jsxs)(t.p,{children:["This hides most of UI buttons and menus and keeps only the essential elements: editors, editor titles, result page, console, and run and share buttons. It can be toggled during runtime from the full mode through the UI from a button in the lower left corner. Also the query param ",(0,n.jsx)(t.code,{children:"?mode=focus"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["Example: ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?template=react&mode=focus",children:"https://livecodes.io/?template=react&mode=focus"})]}),"\n",(0,n.jsx)(t.p,{children:"Screenshot: (focus mode)"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"focus-mode",src:o(6038).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)(t.h2,{id:"simple",children:(0,n.jsx)(t.code,{children:"simple"})}),"\n",(0,n.jsxs)(t.p,{children:["This mode is mainly useful for embedded playgrounds.\nIt shows only 1 editor with the output (result page +/- console). The content of other editors can be set using ",(0,n.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"config"})," even though the editors are not shown.\nBy default, ",(0,n.jsx)(t.code,{children:"codemirror"})," editor is used, however, this can be changed by the ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object#editor",children:(0,n.jsx)(t.code,{children:"editor"})})," option.\nBy default, the layout is ",(0,n.jsx)(t.code,{children:"responsive"})," but can also be overridden by the ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object#layout",children:(0,n.jsx)(t.code,{children:"layout"})})," option to ",(0,n.jsx)(t.code,{children:"vertical"})," or ",(0,n.jsx)(t.code,{children:"horizontal"}),"."]}),"\n",(0,n.jsx)(t.p,{children:"Demo: JS with console"}),"\n",(0,n.jsx)(r.Z,{params:{mode:"simple",js:'console.log("hello world")',layout:"vertical",console:"full"}}),"\n",(0,n.jsx)(t.p,{children:"Demo: JSX & Result page (Monaco editor, add CSS)"}),"\n","\n",(0,n.jsx)(r.Z,{config:c,height:"400px"}),"\n",(0,n.jsx)(t.h2,{id:"lite",children:(0,n.jsx)(t.code,{children:"lite"})}),"\n",(0,n.jsxs)(t.p,{children:["Loads a light-weight, minimal code editor, with limited playground features.\nSee the section about ",(0,n.jsx)(t.a,{href:"/docs/features/lite",children:"lite mode"})," for details"]}),"\n",(0,n.jsxs)(t.p,{children:["Example: ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?mode=lite&template=react",children:"https://livecodes.io/?mode=lite&template=react"})]}),"\n",(0,n.jsx)(t.p,{children:"Demo:"}),"\n",(0,n.jsx)(r.Z,{config:{mode:"lite"},template:"react"}),"\n",(0,n.jsx)(t.h2,{id:"editor",children:(0,n.jsx)(t.code,{children:"editor"})}),"\n",(0,n.jsx)(t.p,{children:"Hides the results pane and works as editor only."}),"\n",(0,n.jsxs)(t.p,{children:["Example: ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?mode=editor&template=react",children:"https://livecodes.io/?mode=editor&template=react"})]}),"\n",(0,n.jsx)(t.p,{children:"Demo:"}),"\n",(0,n.jsx)(r.Z,{config:{mode:"editor"},template:"react"}),"\n",(0,n.jsx)(t.h2,{id:"codeblock",children:(0,n.jsx)(t.code,{children:"codeblock"})}),"\n",(0,n.jsx)(t.p,{children:"A read-only mode showing only the code block without editor interface. On mouse-over a copy button appears that allows to copy the code. This is specially useful when embedded."}),"\n",(0,n.jsxs)(t.p,{children:["Example: ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?mode=codeblock&template=react",children:"https://livecodes.io/?mode=codeblock&template=react"})]}),"\n",(0,n.jsx)(t.p,{children:"Demo:"}),"\n",(0,n.jsx)(r.Z,{config:{mode:"codeblock"},template:"react"}),"\n",(0,n.jsxs)(t.p,{children:["By default, in ",(0,n.jsx)(t.code,{children:"codeblock"})," mode, the light-weight ",(0,n.jsx)(t.code,{children:"CodeJar"})," editor is used (in read-only mode). You can override this by setting the ",(0,n.jsx)(t.code,{children:"editor"})," option. Refer to ",(0,n.jsx)(t.a,{href:"/docs/features/editor-settings#code-editor",children:"Editor Settings"})," for details."]}),"\n",(0,n.jsxs)(t.p,{children:["Example: ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?mode=codeblock&editor=monaco&template=react",children:"https://livecodes.io/?mode=codeblock&editor=monaco&template=react"})]}),"\n",(0,n.jsx)(t.p,{children:"Demo:"}),"\n",(0,n.jsx)(r.Z,{config:{mode:"codeblock",editor:"monaco"},template:"react"}),"\n",(0,n.jsx)(t.h2,{id:"result",children:(0,n.jsx)(t.code,{children:"result"})}),"\n",(0,n.jsx)(t.p,{children:"Shows the result page only, with a drawer at the bottom (which can be closed) that allows opening the project in the full playground."}),"\n",(0,n.jsxs)(t.p,{children:["Example: ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?mode=result&template=react",children:"https://livecodes.io/?mode=result&template=react"})]}),"\n",(0,n.jsx)(t.p,{children:"Demo:"}),"\n",(0,n.jsx)(r.Z,{params:{mode:"result",template:"react"}}),"\n",(0,n.jsxs)(t.p,{children:["The tools pane (e.g. console/compiled code viewer) is hidden by default in ",(0,n.jsx)(t.code,{children:"result"})," mode. It can be shown if set to ",(0,n.jsx)(t.code,{children:"open"})," or ",(0,n.jsx)(t.code,{children:"full"}),". Refer to ",(0,n.jsx)(t.a,{href:"/docs/features/tools-pane",children:"Tools pane"})," documentation for details."]}),"\n",(0,n.jsxs)(t.p,{children:["Example: ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?mode=result&tools=console%7Cfull&&js=console.log(%22Hello%20World",children:'https://livecodes.io/?mode=result&tools=console|full&&js=console.log("Hello%20World'}),'!")']}),"\n",(0,n.jsx)(t.p,{children:"Demo:"}),"\n",(0,n.jsx)(r.Z,{params:{mode:"result",tools:"console|full",js:'console.log("Hello World!")'}}),"\n",(0,n.jsx)(t.h2,{id:"display-mode-vs-default-view",children:"Display Mode vs Default View"}),"\n",(0,n.jsxs)(t.admonition,{type:"info",children:[(0,n.jsxs)(t.p,{children:['"Display Mode" is different from "',(0,n.jsx)(t.a,{href:"/docs/features/default-view",children:"Default View"}),'".']}),(0,n.jsxs)(t.p,{children:["In ",(0,n.jsx)(t.code,{children:"editor"})," display mode, only the editor is loaded and the result page is not available. While ",(0,n.jsx)(t.code,{children:"editor"})," default view shows the editor by default, and the result page can be shown by dragging the split gutter."]}),(0,n.jsxs)(t.p,{children:["The same applies for ",(0,n.jsx)(t.code,{children:"result"})," display mode and default view."]})]})]})}function p(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},6038:function(e,t,o){o.d(t,{Z:function(){return s}});let s=o.p+"assets/images/mode-focus-cfaa1455bdd069375859aa7cefbbc82d.jpg"},9912:function(e,t,o){o.d(t,{Z:function(){return s}});let s=o.p+"assets/images/mode-full-25f311a4ee364ffd5331c99c03160894.jpg"},3365:function(e,t,o){o.d(t,{Z:()=>g});var s=o("5893"),n=o("4200"),i=o("7294"),r=o("8294");function l(e){let t=(0,i.useRef)(null),[o,n]=(0,i.useState)(e.className||""),[l,a]=(0,i.useState)(e.style||{}),[d,c]=(0,i.useState)(e.height),[h,u]=(0,i.useState)(),[p,m]=(0,i.useState)(JSON.stringify(e.config||"")),[f,g]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!t.current)return;let{className:o,style:s,height:i,sdkReady:l,config:d,...y}=e;if(n(o||""),a(s||{}),c(i),h&&f===JSON.stringify(y)){if(p===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else g(JSON.stringify(y)),h?.destroy(),(0,r.T)(t.current,{config:d,...y}).then(e=>{u(e),"function"==typeof l&&l(e)})},[e]),(0,i.useEffect)(()=>()=>{h?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:o,style:l,"data-height":d})}var a=o("1858"),d=o("3262"),c=o("1705"),h=o("7645"),u=o("8168"),p=o("8228"),m=o("5050");function f(e){let[t,o]=(0,i.useState)(e.js),[n,r]=(0,i.useState)(e.ts),[l,a]=(0,i.useState)(e.react),[f,g]=(0,i.useState)(e.vue),[y,j]=(0,i.useState)(e.svelte),v="3.7rem",[x,b]=(0,i.useState)(!0),[w,S]=(0,i.useState)(v),E=(0,i.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${v})`)},5),setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${v})`)},255)};return(0,i.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};o(e(t,"js")),r(e(n,"ts")),a(e(l,"jsx")),g(e(f,"html")),j(e(y,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":x,style:{height:x?v:w,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{b(!x),C()},children:"show code"}),(0,s.jsx)("div",{ref:E,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:m.Z.collapsibleContent,children:(0,s.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,s.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"js",children:t})}),(0,s.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"ts",children:n})}),(0,s.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"jsx",children:l})}),(0,s.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"html",children:f})}),(0,s.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"html",children:y})})]})})})]})}function g(e){let{className:t,style:o,showCode:i,height:r,...d}=e,{colorMode:c}=(0,n.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (); +} + +`.trimStart(),g=` + + + +`,y=` + + +
+ +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:r||"50vh",...e.style},appUrl:a.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(f,{js:u,ts:p,react:m,vue:g,svelte:y})]})}},8294:function(e,t,o){o.d(t,{T:function(){return n},r:function(){return i}});var s=o(7728);async function n(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:o={},headless:s,loading:n="lazy",view:r}=t,l=s||"headless"===r,a=null,d=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)C(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(i(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",l?"eager":n);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof o&&Object.keys(o).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,f="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let s="livecodes",i=a.querySelector(`iframe.${s}`),r=i||document.createElement("iframe");r.classList.add(s),r.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),r.setAttribute("allowtransparency","true"),r.setAttribute("allowpaymentrequest","true"),r.setAttribute("allowfullscreen","true"),r.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),r.setAttribute("loading","eager"===n?"eager":"lazy"),l?C(r):(r.style.height="100%",r.style.minHeight="200px",r.style.width="100%",r.style.margin="0",r.style.border="0",r.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),r.contentWindow?.postMessage({type:"livecodes-config",payload:o},h))}),r.onload=()=>{e(r)},r.src=c.href,i||a.appendChild(r)}),y=new Promise(e=>{addEventListener("message",function t(o){o.source===g.contentWindow&&o.origin===h&&o.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),j=()=>m?Promise.reject(f):new Promise(async e=>{y.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},h),await y,e()}),v=(e,t)=>new Promise(async(o,s)=>{if(m)return s(f);await j();let n=k();addEventListener("message",function t(i){if(i.source===g.contentWindow&&i.origin===h&&i.data?.type==="livecodes-api-response"&&i.data?.id===n&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?s(e.error):o(e)}}),g.contentWindow?.postMessage({method:e,id:n,args:t},h)}),x={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(f);return b.includes(e)?(v("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&v("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==h||!t||!x[t])return;let o=e.data?.payload;x[t]?.forEach(e=>{e(o)})});let E=()=>{Object.values(x).forEach(e=>{e.length=0}),g?.remove?.(),m=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let k=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>v("run"),format:e=>v("format",[e]),getShareUrl:e=>v("getShareUrl",[e]),getConfig:e=>v("getConfig",[e]),setConfig:e=>v("setConfig",[e]),getCode:()=>v("getCode"),show:(e,t)=>v("show",[e,t]),runTests:()=>v("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,o=Array(t>1?t-1:0),s=1;sy.settled?v("destroy").then(E):m?Promise.reject(f):(E(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:o="https://livecodes.io",params:n={},config:i={},headless:r,import:l,lite:a,view:d,...c}=t;try{e=new URL(o)}catch{throw Error(`${o} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[o,s]=t;void 0!==s&&e.searchParams.set(o,String(s))});let u="headless"===t.view||r;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==d?i.view=d:e.searchParams.set("view",d)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(i))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{h.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(n[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,o){o.d(t,{Z:function(){return l},a:function(){return r}});var s=o(7294);let n={},i=s.createContext(n);function r(e){let t=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:r(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/2932.f3227ebd.js b/docs/assets/js/2932.f3227ebd.js new file mode 100644 index 0000000..2f3a7b9 --- /dev/null +++ b/docs/assets/js/2932.f3227ebd.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2932"],{7097:function(e,n,t){t.d(n,{b:function(){return r},k:function(){return o}});var i=t(5893),s=t(7294),a=t(1934);let l=s.createContext(null);function r(e){let{children:n,content:t}=e,a=(0,s.useMemo)(()=>({metadata:t.metadata,frontMatter:t.frontMatter,assets:t.assets,contentTitle:t.contentTitle,toc:t.toc}),[t]);return(0,i.jsx)(l.Provider,{value:a,children:n})}function o(){let e=(0,s.useContext)(l);if(null===e)throw new a.i6("DocProvider");return e}},7905:function(e,n,t){t.d(n,{Z:()=>C});var i=t("5893"),s=t("7294"),a=t("7026"),l=t("7670"),r=t("6171");let o={admonition:"admonition_xJq3",admonitionHeading:"admonitionHeading_Gvgb",admonitionIcon:"admonitionIcon_Rf37",admonitionContent:"admonitionContent_BuS1"};function c(e){let{type:n,className:t,children:s}=e;return(0,i.jsx)("div",{className:(0,a.Z)(r.k.common.admonition,r.k.common.admonitionType(n),o.admonition,t),children:s})}function d(e){let{icon:n,title:t}=e;return(0,i.jsxs)("div",{className:o.admonitionHeading,children:[(0,i.jsx)("span",{className:o.admonitionIcon,children:n}),t]})}function u(e){let{children:n}=e;return n?(0,i.jsx)("div",{className:o.admonitionContent,children:n}):null}function h(e){let{type:n,icon:t,title:s,children:a,className:l}=e;return(0,i.jsxs)(c,{type:n,className:l,children:[s||t?(0,i.jsx)(d,{title:s,icon:t}):null,(0,i.jsx)(u,{children:a})]})}let m={icon:(0,i.jsx)(function(e){return(0,i.jsx)("svg",{viewBox:"0 0 14 16",...e,children:(0,i.jsx)("path",{fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"})})},{}),title:(0,i.jsx)(l.Z,{id:"theme.admonition.note",description:"The default label used for the Note admonition (:::note)",children:"note"})};function f(e){return(0,i.jsx)(h,{...m,...e,className:(0,a.Z)("alert alert--secondary",e.className),children:e.children})}let x={icon:(0,i.jsx)(function(e){return(0,i.jsx)("svg",{viewBox:"0 0 12 16",...e,children:(0,i.jsx)("path",{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})})},{}),title:(0,i.jsx)(l.Z,{id:"theme.admonition.tip",description:"The default label used for the Tip admonition (:::tip)",children:"tip"})};function p(e){return(0,i.jsx)(h,{...x,...e,className:(0,a.Z)("alert alert--success",e.className),children:e.children})}let j={icon:(0,i.jsx)(function(e){return(0,i.jsx)("svg",{viewBox:"0 0 14 16",...e,children:(0,i.jsx)("path",{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"})})},{}),title:(0,i.jsx)(l.Z,{id:"theme.admonition.info",description:"The default label used for the Info admonition (:::info)",children:"info"})};function v(e){return(0,i.jsx)(h,{...j,...e,className:(0,a.Z)("alert alert--info",e.className),children:e.children})}function b(e){return(0,i.jsx)("svg",{viewBox:"0 0 16 16",...e,children:(0,i.jsx)("path",{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})})}let g={icon:(0,i.jsx)(b,{}),title:(0,i.jsx)(l.Z,{id:"theme.admonition.warning",description:"The default label used for the Warning admonition (:::warning)",children:"warning"})},Z={icon:(0,i.jsx)(function(e){return(0,i.jsx)("svg",{viewBox:"0 0 12 16",...e,children:(0,i.jsx)("path",{fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"})})},{}),title:(0,i.jsx)(l.Z,{id:"theme.admonition.danger",description:"The default label used for the Danger admonition (:::danger)",children:"danger"})},N={icon:(0,i.jsx)(b,{}),title:(0,i.jsx)(l.Z,{id:"theme.admonition.caution",description:"The default label used for the Caution admonition (:::caution)",children:"caution"})},_={note:f,tip:p,info:v,warning:function(e){return(0,i.jsx)(h,{...g,...e,className:(0,a.Z)("alert alert--warning",e.className),children:e.children})},danger:function(e){return(0,i.jsx)(h,{...Z,...e,className:(0,a.Z)("alert alert--danger",e.className),children:e.children})},secondary:e=>(0,i.jsx)(f,{title:"secondary",...e}),important:e=>(0,i.jsx)(v,{title:"important",...e}),success:e=>(0,i.jsx)(p,{title:"success",...e}),caution:function(e){return(0,i.jsx)(h,{...N,...e,className:(0,a.Z)("alert alert--warning",e.className),children:e.children})}};function C(e){let n=function(e){let{mdxAdmonitionTitle:n,rest:t}=function(e){let n=s.Children.toArray(e),t=n.find(e=>s.isValidElement(e)&&"mdxAdmonitionTitle"===e.type),a=n.filter(e=>e!==t);return{mdxAdmonitionTitle:t?.props.children,rest:a.length>0?(0,i.jsx)(i.Fragment,{children:a}):null}}(e.children),a=e.title??n;return{...e,...a&&{title:a},children:t}}(e),t=function(e){let n=_[e];return n||(console.warn(`No admonition component found for admonition type "${e}". Using Info as fallback.`),_.info)}(n.type);return(0,i.jsx)(t,{...n})}},7624:function(e,n,t){t.d(n,{Z:()=>j});var i=t("5893");t("7294");var s=t("7026"),a=t("7670"),l=t("1199");function r(){return(0,i.jsx)(a.Z,{id:"theme.contentVisibility.unlistedBanner.title",description:"The unlisted content banner title",children:"Unlisted page"})}function o(){return(0,i.jsx)(a.Z,{id:"theme.contentVisibility.unlistedBanner.message",description:"The unlisted content banner message",children:"This page is unlisted. Search engines will not index it, and only users having a direct link can access it."})}function c(){return(0,i.jsx)(l.Z,{children:(0,i.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})}function d(){return(0,i.jsx)(a.Z,{id:"theme.contentVisibility.draftBanner.title",description:"The draft content banner title",children:"Draft page"})}function u(){return(0,i.jsx)(a.Z,{id:"theme.contentVisibility.draftBanner.message",description:"The draft content banner message",children:"This page is a draft. It will only be visible in dev and be excluded from the production build."})}var h=t("6171"),m=t("7905");function f(e){let{className:n}=e;return(0,i.jsx)(m.Z,{type:"caution",title:(0,i.jsx)(d,{}),className:(0,s.Z)(n,h.k.common.draftBanner),children:(0,i.jsx)(u,{})})}function x(e){let{className:n}=e;return(0,i.jsx)(m.Z,{type:"caution",title:(0,i.jsx)(r,{}),className:(0,s.Z)(n,h.k.common.unlistedBanner),children:(0,i.jsx)(o,{})})}function p(e){return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(c,{}),(0,i.jsx)(x,{...e})]})}function j(e){let{metadata:n}=e,{unlisted:t,frontMatter:s}=n;return(0,i.jsxs)(i.Fragment,{children:[(t||s.unlisted)&&(0,i.jsx)(p,{}),s.draft&&(0,i.jsx)(f,{})]})}},5872:function(e,n,t){t.d(n,{Z:()=>x});var i=t("5893");t("7294");var s=t("7026"),a=t("6171"),l=t("6563"),r=t("3868"),o=t("3367"),c=t("7670"),d=t("3187");function u(e){return(0,i.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,i.jsx)("path",{d:"M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z",fill:"currentColor"})})}function h(){let e=(0,d.ZP)("/");return(0,i.jsx)("li",{className:"breadcrumbs__item",children:(0,i.jsx)(o.Z,{"aria-label":(0,c.I)({id:"theme.docs.breadcrumbs.home",message:"Home page",description:"The ARIA label for the home page in the breadcrumbs"}),className:"breadcrumbs__link",href:e,children:(0,i.jsx)(u,{className:"breadcrumbHomeIcon_YNFT"})})})}function m(e){let{children:n,href:t,isLast:s}=e,a="breadcrumbs__link";return s?(0,i.jsx)("span",{className:a,itemProp:"name",children:n}):t?(0,i.jsx)(o.Z,{className:a,href:t,itemProp:"item",children:(0,i.jsx)("span",{itemProp:"name",children:n})}):(0,i.jsx)("span",{className:a,children:n})}function f(e){let{children:n,active:t,index:a,addMicrodata:l}=e;return(0,i.jsxs)("li",{...l&&{itemScope:!0,itemProp:"itemListElement",itemType:"https://schema.org/ListItem"},className:(0,s.Z)("breadcrumbs__item",{"breadcrumbs__item--active":t}),children:[n,(0,i.jsx)("meta",{itemProp:"position",content:String(a+1)})]})}function x(){let e=(0,l.s1)(),n=(0,r.Ns)();return e?(0,i.jsx)("nav",{className:(0,s.Z)(a.k.docs.docBreadcrumbs,"breadcrumbsContainer_Z_bl"),"aria-label":(0,c.I)({id:"theme.docs.breadcrumbs.navAriaLabel",message:"Breadcrumbs",description:"The ARIA label for the breadcrumbs"}),children:(0,i.jsxs)("ul",{className:"breadcrumbs",itemScope:!0,itemType:"https://schema.org/BreadcrumbList",children:[n&&(0,i.jsx)(h,{}),e.map((n,t)=>{let s=t===e.length-1,a="category"===n.type&&n.linkUnlisted?void 0:n.href;return(0,i.jsx)(f,{active:s,index:t,addMicrodata:!!a,children:(0,i.jsx)(m,{href:a,isLast:s,children:n.label})},t)})]})}):null}},113:function(e,n,t){t.d(n,{Z:()=>T});var i=t("5893"),s=t("7294"),a=t("7026"),l=t("6171"),r=t("7097"),o=t("9386"),c=t("65"),d=t("1199"),u=t("1705");function h(e){return(0,i.jsx)("code",{...e})}var m=t("3367"),f=t("4961"),x=t("6735"),p=t("6850");let j={details:"details_lb9f",isBrowser:"isBrowser_bmU9",collapsibleContent:"collapsibleContent_i85q"};function v(e){return!!e&&("SUMMARY"===e.tagName||v(e.parentElement))}function b(e){let{summary:n,children:t,...l}=e;(0,f.Z)().collectAnchor(l.id);let r=(0,x.Z)(),o=(0,s.useRef)(null),{collapsed:c,setCollapsed:d}=(0,p.u)({initialState:!l.open}),[u,h]=(0,s.useState)(l.open),m=s.isValidElement(n)?n:(0,i.jsx)("summary",{children:n??"Details"});return(0,i.jsxs)("details",{...l,ref:o,open:u,"data-collapsed":c,className:(0,a.Z)(j.details,r&&j.isBrowser,l.className),onMouseDown:e=>{v(e.target)&&e.detail>1&&e.preventDefault()},onClick:e=>{e.stopPropagation();let n=e.target;v(n)&&function e(n,t){return!!n&&(n===t||e(n.parentElement,t))}(n,o.current)&&(e.preventDefault(),c?(d(!1),h(!0)):d(!0))},children:[m,(0,i.jsx)(p.z,{lazy:!1,collapsed:c,disableSSRStyle:!0,onCollapseTransitionEnd:e=>{d(e),h(!e)},children:(0,i.jsx)("div",{className:j.collapsibleContent,children:t})})]})}function g(e){let{...n}=e;return(0,i.jsx)(b,{...n,className:(0,a.Z)("alert alert--info","details_b_Ee",n.className)})}function Z(e){let n=s.Children.toArray(e.children),t=n.find(e=>s.isValidElement(e)&&"summary"===e.type),a=(0,i.jsx)(i.Fragment,{children:n.filter(e=>e!==t)});return(0,i.jsx)(g,{...e,summary:t,children:a})}function N(e){return(0,i.jsx)(o.Z,{...e})}let _={containsTaskList:"containsTaskList_mC6p"};var C=t("7905");let k={Head:d.Z,details:Z,Details:Z,code:function(e){return void 0!==e.children&&s.Children.toArray(e.children).every(e=>"string"==typeof e&&!e.includes("\n"))?(0,i.jsx)(h,{...e}):(0,i.jsx)(u.Z,{...e})},a:function(e){return(0,i.jsx)(m.Z,{...e})},pre:function(e){return(0,i.jsx)(i.Fragment,{children:e.children})},ul:function(e){return(0,i.jsx)("ul",{...e,className:function(e){if(void 0!==e)return(0,a.Z)(e,e?.includes("contains-task-list")&&_.containsTaskList)}(e.className)})},li:function(e){return(0,f.Z)().collectAnchor(e.id),(0,i.jsx)("li",{...e})},img:function(e){var n;return(0,i.jsx)("img",{decoding:"async",loading:"lazy",...e,className:(n=e.className,(0,a.Z)(n,"img_ev3q"))})},h1:e=>(0,i.jsx)(N,{as:"h1",...e}),h2:e=>(0,i.jsx)(N,{as:"h2",...e}),h3:e=>(0,i.jsx)(N,{as:"h3",...e}),h4:e=>(0,i.jsx)(N,{as:"h4",...e}),h5:e=>(0,i.jsx)(N,{as:"h5",...e}),h6:e=>(0,i.jsx)(N,{as:"h6",...e}),admonition:C.Z,mermaid:()=>null};function y(e){let{children:n}=e;return(0,i.jsx)(c.Z,{components:k,children:n})}function T(e){let{children:n}=e,t=function(){let{metadata:e,frontMatter:n,contentTitle:t}=(0,r.k)();return n.hide_title||void 0!==t?null:e.title}();return(0,i.jsxs)("div",{className:(0,a.Z)(l.k.docs.docMarkdown,"markdown"),children:[t&&(0,i.jsx)("header",{children:(0,i.jsx)(o.Z,{as:"h1",children:t})}),(0,i.jsx)(y,{children:n})]})}},2540:function(e,n,t){t.d(n,{Z:()=>b});var i=t("5893");t("7294");var s=t("7026"),a=t("6171"),l=t("7097"),r=t("7670"),o=t("3367");let c={tag:"tag_zVej",tagRegular:"tagRegular_sFm0",tagWithCount:"tagWithCount_h2kH"};function d(e){let{permalink:n,label:t,count:a,description:l}=e;return(0,i.jsxs)(o.Z,{href:n,title:l,className:(0,s.Z)(c.tag,a?c.tagWithCount:c.tagRegular),children:[t,a&&(0,i.jsx)("span",{children:a})]})}function u(e){let{tags:n}=e;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("b",{children:(0,i.jsx)(r.Z,{id:"theme.tags.tagsListLabel",description:"The label alongside a tag list",children:"Tags:"})}),(0,i.jsx)("ul",{className:(0,s.Z)("tags_jXut","padding--none","margin-left--sm"),children:n.map(e=>(0,i.jsx)("li",{className:"tag_QGVx",children:(0,i.jsx)(d,{...e})},e.permalink))})]})}function h(e){let{className:n,...t}=e;return(0,i.jsx)("svg",{fill:"currentColor",height:"20",width:"20",viewBox:"0 0 40 40",className:(0,s.Z)("iconEdit_Z9Sw",n),"aria-hidden":"true",...t,children:(0,i.jsx)("g",{children:(0,i.jsx)("path",{d:"m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"})})})}function m(e){let{editUrl:n}=e;return(0,i.jsxs)(o.Z,{to:n,className:a.k.common.editThisPage,children:[(0,i.jsx)(h,{}),(0,i.jsx)(r.Z,{id:"theme.common.editThisPage",description:"The link label to edit the current page",children:"Edit this page"})]})}var f=t("7262");function x(e){let{lastUpdatedAt:n}=e,t=new Date(n),s=(function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{i18n:{currentLocale:n}}=(0,f.Z)(),t=function(){let{i18n:{currentLocale:e,localeConfigs:n}}=(0,f.Z)();return n[e].calendar}();return new Intl.DateTimeFormat(n,{calendar:t,...e})})({day:"numeric",month:"short",year:"numeric",timeZone:"UTC"}).format(t);return(0,i.jsx)(r.Z,{id:"theme.lastUpdated.atDate",description:"The words used to describe on which date a page has been last updated",values:{date:(0,i.jsx)("b",{children:(0,i.jsx)("time",{dateTime:t.toISOString(),itemProp:"dateModified",children:s})})},children:" on {date}"})}function p(e){let{lastUpdatedBy:n}=e;return(0,i.jsx)(r.Z,{id:"theme.lastUpdated.byUser",description:"The words used to describe by who the page has been last updated",values:{user:(0,i.jsx)("b",{children:n})},children:" by {user}"})}function j(e){let{lastUpdatedAt:n,lastUpdatedBy:t}=e;return(0,i.jsxs)("span",{className:a.k.common.lastUpdated,children:[(0,i.jsx)(r.Z,{id:"theme.lastUpdated.lastUpdatedAtBy",description:"The sentence used to display when a page has been last updated, and by who",values:{atDate:n?(0,i.jsx)(x,{lastUpdatedAt:n}):"",byUser:t?(0,i.jsx)(p,{lastUpdatedBy:t}):""},children:"Last updated{atDate}{byUser}"}),!1]})}function v(e){let{className:n,editUrl:t,lastUpdatedAt:a,lastUpdatedBy:l}=e;return(0,i.jsxs)("div",{className:(0,s.Z)("row",n),children:[(0,i.jsx)("div",{className:"col",children:t&&(0,i.jsx)(m,{editUrl:t})}),(0,i.jsx)("div",{className:(0,s.Z)("col","lastUpdated_JAkA"),children:(a||l)&&(0,i.jsx)(j,{lastUpdatedAt:a,lastUpdatedBy:l})})]})}function b(){let{metadata:e}=(0,l.k)(),{editUrl:n,lastUpdatedAt:t,lastUpdatedBy:r,tags:o}=e,c=o.length>0,d=!!(n||t||r);return c||d?(0,i.jsxs)("footer",{className:(0,s.Z)(a.k.docs.docFooter,"docusaurus-mt-lg"),children:[c&&(0,i.jsx)("div",{className:(0,s.Z)("row margin-top--sm",a.k.docs.docFooterTagsRow),children:(0,i.jsx)("div",{className:"col",children:(0,i.jsx)(u,{tags:o})})}),d&&(0,i.jsx)(v,{className:(0,s.Z)("margin-top--sm",a.k.docs.docFooterEditMetaRow),editUrl:n,lastUpdatedAt:t,lastUpdatedBy:r})]}):null}},4813:function(e,n,t){t.d(n,{Z:()=>d});var i=t("5893");t("7294");var s=t("7097"),a=t("7670"),l=t("7026"),r=t("3367");function o(e){let{permalink:n,title:t,subLabel:s,isNext:a}=e;return(0,i.jsxs)(r.Z,{className:(0,l.Z)("pagination-nav__link",a?"pagination-nav__link--next":"pagination-nav__link--prev"),to:n,children:[s&&(0,i.jsx)("div",{className:"pagination-nav__sublabel",children:s}),(0,i.jsx)("div",{className:"pagination-nav__label",children:t})]})}function c(e){let{previous:n,next:t}=e;return(0,i.jsxs)("nav",{className:"pagination-nav docusaurus-mt-lg","aria-label":(0,a.I)({id:"theme.docs.paginator.navAriaLabel",message:"Docs pages",description:"The ARIA label for the docs pagination"}),children:[n&&(0,i.jsx)(o,{...n,subLabel:(0,i.jsx)(a.Z,{id:"theme.docs.paginator.previous",description:"The label used to navigate to the previous doc",children:"Previous"})}),t&&(0,i.jsx)(o,{...t,subLabel:(0,i.jsx)(a.Z,{id:"theme.docs.paginator.next",description:"The label used to navigate to the next doc",children:"Next"}),isNext:!0})]})}function d(){let{metadata:e}=(0,s.k)();return(0,i.jsx)(c,{previous:e.previous,next:e.next})}},5445:function(e,n,t){t.d(n,{Z:()=>c});var i=t("5893");t("7294");var s=t("6171"),a=t("7097"),l=t("7026"),r=t("659");function o(e){let{className:n,...t}=e;return(0,i.jsx)("div",{className:(0,l.Z)("tableOfContents_bqdL","thin-scrollbar",n),children:(0,i.jsx)(r.Z,{...t,linkClassName:"table-of-contents__link toc-highlight",linkActiveClassName:"table-of-contents__link--active"})})}function c(){let{toc:e,frontMatter:n}=(0,a.k)();return(0,i.jsx)(o,{toc:e,minHeadingLevel:n.toc_min_heading_level,maxHeadingLevel:n.toc_max_heading_level,className:s.k.docs.docTocDesktop})}},3288:function(e,n,t){t.d(n,{Z:()=>f});var i=t("5893");t("7294");var s=t("7026"),a=t("6171"),l=t("7097"),r=t("6850"),o=t("659"),c=t("7670");let d={tocCollapsibleButton:"tocCollapsibleButton_TO0P",tocCollapsibleButtonExpanded:"tocCollapsibleButtonExpanded_MG3E"};function u(e){let{collapsed:n,...t}=e;return(0,i.jsx)("button",{type:"button",...t,className:(0,s.Z)("clean-btn",d.tocCollapsibleButton,!n&&d.tocCollapsibleButtonExpanded,t.className),children:(0,i.jsx)(c.Z,{id:"theme.TOCCollapsible.toggleButtonLabel",description:"The label used by the button on the collapsible TOC component",children:"On this page"})})}let h={tocCollapsible:"tocCollapsible_ETCw",tocCollapsibleContent:"tocCollapsibleContent_vkbj",tocCollapsibleExpanded:"tocCollapsibleExpanded_sAul"};function m(e){let{toc:n,className:t,minHeadingLevel:a,maxHeadingLevel:l}=e,{collapsed:c,toggleCollapsed:d}=(0,r.u)({initialState:!0});return(0,i.jsxs)("div",{className:(0,s.Z)(h.tocCollapsible,!c&&h.tocCollapsibleExpanded,t),children:[(0,i.jsx)(u,{collapsed:c,onClick:d}),(0,i.jsx)(r.z,{lazy:!0,className:h.tocCollapsibleContent,collapsed:c,children:(0,i.jsx)(o.Z,{toc:n,minHeadingLevel:a,maxHeadingLevel:l})})]})}function f(){let{toc:e,frontMatter:n}=(0,l.k)();return(0,i.jsx)(m,{toc:e,minHeadingLevel:n.toc_min_heading_level,maxHeadingLevel:n.toc_max_heading_level,className:(0,s.Z)(a.k.docs.docTocMobile,"tocMobile_ITEo")})}},7509:function(e,n,t){t.r(n),t.d(n,{default:()=>o});var i=t("5893");t("7294");var s=t("5231"),a=t("7097");function l(){let{metadata:e,frontMatter:n,assets:t}=(0,a.k)();return(0,i.jsx)(s.d,{title:e.title,description:e.description,keywords:n.keywords,image:t.image??n.image})}var r=t("2688");function o(e){let n=`docs-doc-id-${e.content.metadata.id}`,t=e.content;return(0,i.jsx)(a.b,{content:e.content,children:(0,i.jsxs)(s.FG,{className:n,children:[(0,i.jsx)(l,{}),(0,i.jsx)(r.Z,{children:(0,i.jsx)(t,{})})]})})}},1987:function(e,n,t){t.d(n,{Z:function(){return o}});var i=t(5893);t(7294);var s=t(7026),a=t(7670),l=t(6171),r=t(9873);function o(e){let{className:n}=e,t=(0,r.E)();return t.badge?(0,i.jsx)("span",{className:(0,s.Z)(n,l.k.docs.docVersionBadge,"badge badge--secondary"),children:(0,i.jsx)(a.Z,{id:"theme.docs.versionBadge.label",values:{versionLabel:t.label},children:"Version: {versionLabel}"})}):null}},9548:function(e,n,t){t.d(n,{Z:function(){return p}});var i=t(5893);t(7294);var s=t(7026),a=t(7262),l=t(3367),r=t(7670),o=t(8854),c=t(6171),d=t(7137),u=t(9873);let h={unreleased:function(e){let{siteTitle:n,versionMetadata:t}=e;return(0,i.jsx)(r.Z,{id:"theme.docs.versions.unreleasedVersionLabel",description:"The label used to tell the user that he's browsing an unreleased doc version",values:{siteTitle:n,versionLabel:(0,i.jsx)("b",{children:t.label})},children:"This is unreleased documentation for {siteTitle} {versionLabel} version."})},unmaintained:function(e){let{siteTitle:n,versionMetadata:t}=e;return(0,i.jsx)(r.Z,{id:"theme.docs.versions.unmaintainedVersionLabel",description:"The label used to tell the user that he's browsing an unmaintained doc version",values:{siteTitle:n,versionLabel:(0,i.jsx)("b",{children:t.label})},children:"This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained."})}};function m(e){let n=h[e.versionMetadata.banner];return(0,i.jsx)(n,{...e})}function f(e){let{versionLabel:n,to:t,onClick:s}=e;return(0,i.jsx)(r.Z,{id:"theme.docs.versions.latestVersionSuggestionLabel",description:"The label used to tell the user to check the latest version",values:{versionLabel:n,latestVersionLink:(0,i.jsx)("b",{children:(0,i.jsx)(l.Z,{to:t,onClick:s,children:(0,i.jsx)(r.Z,{id:"theme.docs.versions.latestVersionLinkLabel",description:"The label used for the latest version suggestion link label",children:"latest version"})})})},children:"For up-to-date documentation, see the {latestVersionLink} ({versionLabel})."})}function x(e){let{className:n,versionMetadata:t}=e,{siteConfig:{title:l}}=(0,a.Z)(),{pluginId:r}=(0,o.gA)({failfast:!0}),{savePreferredVersionName:u}=(0,d.J)(r),{latestDocSuggestion:h,latestVersionSuggestion:x}=(0,o.Jo)(r),p=h??x.docs.find(e=>e.id===x.mainDocId);return(0,i.jsxs)("div",{className:(0,s.Z)(n,c.k.docs.docVersionBanner,"alert alert--warning margin-bottom--md"),role:"alert",children:[(0,i.jsx)("div",{children:(0,i.jsx)(m,{siteTitle:l,versionMetadata:t})}),(0,i.jsx)("div",{className:"margin-top--md",children:(0,i.jsx)(f,{versionLabel:x.label,to:p.path,onClick:()=>u(x.name)})})]})}function p(e){let{className:n}=e,t=(0,u.E)();return t.banner?(0,i.jsx)(x,{className:n,versionMetadata:t}):null}},6643:function(e,n,t){t.d(n,{Z:()=>c});var i=t("5893"),s=t("7294"),a=t("6009");function l(e){let n=e.getBoundingClientRect();return n.top===n.bottom?l(e.parentNode):n}var r=t("3367");let o=s.memo(function e(n){let{toc:t,className:s,linkClassName:a,isChild:l}=n;return t.length?(0,i.jsx)("ul",{className:l?void 0:s,children:t.map(n=>(0,i.jsxs)("li",{children:[(0,i.jsx)(r.Z,{to:`#${n.id}`,className:a??void 0,dangerouslySetInnerHTML:{__html:n.value}}),(0,i.jsx)(e,{isChild:!0,toc:n.children,className:s,linkClassName:a})]},n.id))}):null});function c(e){let{toc:n,className:t="table-of-contents table-of-contents__left-border",linkClassName:r="table-of-contents__link",linkActiveClassName:c,minHeadingLevel:d,maxHeadingLevel:u,...h}=e,m=(0,a.L)(),f=d??m.tableOfContents.minHeadingLevel,x=u??m.tableOfContents.maxHeadingLevel,p=function(e){let{toc:n,minHeadingLevel:t,maxHeadingLevel:i}=e;return(0,s.useMemo)(()=>(function e(n){let{toc:t,minHeadingLevel:i,maxHeadingLevel:s}=n;return t.flatMap(n=>{let t=e({toc:n.children,minHeadingLevel:i,maxHeadingLevel:s});return n.level>=i&&n.level<=s?[{...n,children:t}]:t})})({toc:function(e){let n=e.map(e=>({...e,parentIndex:-1,children:[]})),t=Array(7).fill(-1);n.forEach((e,n)=>{let i=t.slice(2,e.level);e.parentIndex=Math.max(...i),t[e.level]=n});let i=[];return n.forEach(e=>{let{parentIndex:t,...s}=e;t>=0?n[t].children.push(s):i.push(s)}),i}(n),minHeadingLevel:t,maxHeadingLevel:i}),[n,t,i])}({toc:n,minHeadingLevel:f,maxHeadingLevel:x});return!function(e){let n=(0,s.useRef)(void 0),t=function(){let e=(0,s.useRef)(0),{navbar:{hideOnScroll:n}}=(0,a.L)();return(0,s.useEffect)(()=>{e.current=n?0:document.querySelector(".navbar").clientHeight},[n]),e}();(0,s.useEffect)(()=>{if(!e)return()=>{};let{linkClassName:i,linkActiveClassName:s,minHeadingLevel:a,maxHeadingLevel:r}=e;function o(){let e=Array.from(document.getElementsByClassName(i)),o=function(e,n){let{anchorTopOffset:t}=n,i=e.find(e=>l(e).top>=t);if(i){var s;return(s=l(i)).top>0&&s.bottomo&&o.id===decodeURIComponent(e.href.substring(e.href.indexOf("#")+1)));e.forEach(e=>{e===c?(n.current&&n.current!==e&&n.current.classList.remove(s),e.classList.add(s),n.current=e):e.classList.remove(s)})}return document.addEventListener("scroll",o),document.addEventListener("resize",o),o(),()=>{document.removeEventListener("scroll",o),document.removeEventListener("resize",o)}},[e,t])}((0,s.useMemo)(()=>{if(r&&c)return{linkClassName:r,linkActiveClassName:c,minHeadingLevel:f,maxHeadingLevel:x}},[r,c,f,x])),(0,i.jsx)(o,{toc:p,className:t,linkClassName:r,...h})}},65:function(e,n,t){t.d(n,{Z:function(){return r},a:function(){return l}});var i=t(7294);let s={},a=i.createContext(s);function l(e){let n=i.useContext(a);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),i.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/29cc5b7b.18953d38.js b/docs/assets/js/29cc5b7b.18953d38.js new file mode 100644 index 0000000..03ec68c --- /dev/null +++ b/docs/assets/js/29cc5b7b.18953d38.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3119"],{1733:function(e,t,n){n.r(t),n.d(t,{default:()=>u,frontMatter:()=>a,metadata:()=>s,assets:()=>d,toc:()=>c,contentTitle:()=>l});var s=JSON.parse('{"id":"languages/python","title":"Python","description":"LiveCodes can run Python in the browser using Brython, a Python 3 implementation for client-side web programming.","source":"@site/docs/languages/python.mdx","sourceDirName":"languages","slug":"/languages/python","permalink":"/docs/languages/python","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/python.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Python (Wasm)","permalink":"/docs/languages/python-wasm"},"next":{"title":"R","permalink":"/docs/languages/r"}}'),r=n("5893"),i=n("65");n("8500");var o=n("3365");let a={},l="Python",d={},c=[{value:"Usage",id:"usage",level:2},{value:"Standard Library",id:"standard-library",level:3},{value:"JavaScript Interoperability",id:"javascript-interoperability",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"python",children:"Python"})}),"\n","\n",(0,r.jsxs)(t.p,{children:["LiveCodes can run Python in the browser using ",(0,r.jsx)(t.a,{href:"https://brython.info/",children:"Brython"}),", a Python 3 implementation for client-side web programming."]}),"\n",(0,r.jsxs)(t.admonition,{title:"Note",type:"info",children:[(0,r.jsx)(t.p,{children:"Brython is a light-weight Python interpreter written in JavaScript. However, It does not allow loading external packages from PyPI."}),(0,r.jsxs)(t.p,{children:["If you need to import external packages including scientific Python packages like numpy, pandas, scipy, matplotlib, and scikit-learn, you may want to use ",(0,r.jsx)(t.a,{href:"/docs/languages/python-wasm",children:"Python (Wasm)"}),", which uses Pyodide the ",(0,r.jsx)(t.a,{href:"https://github.com/python/cpython",children:"CPython"})," port to WebAssembly."]})]}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.p,{children:"LiveCodes runs Python code in the browser. There is no server required to run the code and no need to install Python."}),"\n",(0,r.jsxs)(t.p,{children:["In addition, since the Python code is running on the client-side, it has access to the ",(0,r.jsx)(t.a,{href:"#javascript-interoperability",children:"JavaScript scope"}),", including the page DOM and browser APIs. See the ",(0,r.jsx)(t.a,{href:"#starter-template",children:"starter template"})," for an example."]}),"\n",(0,r.jsx)(t.h3,{id:"standard-library",children:"Standard Library"}),"\n",(0,r.jsxs)(t.p,{children:["Many modules of the Python standard library are functional. See ",(0,r.jsx)(t.a,{href:"https://brython.info/static_doc/en/stdlib.html",children:"Brython distribution"})," for details."]}),"\n",(0,r.jsx)(t.h3,{id:"javascript-interoperability",children:"JavaScript Interoperability"}),"\n",(0,r.jsxs)(t.p,{children:["Interaction with the page DOM and JavaScript can be achieved using ",(0,r.jsx)(t.a,{href:"https://brython.info/static_doc/en/browser.html",children:(0,r.jsx)(t.code,{children:"browser"})})," and ",(0,r.jsx)(t.a,{href:"https://brython.info/static_doc/en/javascript.html",children:(0,r.jsx)(t.code,{children:"javascript"})})," modules. See ",(0,r.jsx)(t.a,{href:"https://brython.info/static_doc/en/dom_api.html",children:"this guide"})," for using the DOM API."]}),"\n",(0,r.jsxs)(t.p,{children:["Check the ",(0,r.jsx)(t.a,{href:"#starter-template",children:"starter template"})," for an example."]}),"\n",(0,r.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"python"})}),"\n",(0,r.jsx)(t.h3,{id:"extensions",children:"Extensions"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:".py"})}),"\n",(0,r.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"script"})}),"\n",(0,r.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://brython.info/",children:"Brython"})}),"\n",(0,r.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,r.jsx)(t.p,{children:"Brython v3.12.3, running Python v3.12"}),"\n",(0,r.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsx)(t.p,{children:"Not supported."}),"\n",(0,r.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n",(0,r.jsx)(o.Z,{template:"python",height:"80vh"}),"\n",(0,r.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://livecodes.io/?template=python",children:"https://livecodes.io/?template=python"})}),"\n",(0,r.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://www.python.org/",children:"Python"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://brython.info/",children:"Brython"})}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/languages/python-wasm",children:"Python (Wasm)"})," in LiveCodes"]}),"\n"]})]})}function u(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},3365:function(e,t,n){n.d(t,{Z:()=>f});var s=n("5893"),r=n("4200"),i=n("7294"),o=n("8294");function a(e){let t=(0,i.useRef)(null),[n,r]=(0,i.useState)(e.className||""),[a,l]=(0,i.useState)(e.style||{}),[d,c]=(0,i.useState)(e.height),[h,u]=(0,i.useState)(),[p,m]=(0,i.useState)(JSON.stringify(e.config||"")),[g,f]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!t.current)return;let{className:n,style:s,height:i,sdkReady:a,config:d,...y}=e;if(r(n||""),l(s||{}),c(i),h&&g===JSON.stringify(y)){if(p===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(y)),h?.destroy(),(0,o.T)(t.current,{config:d,...y}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,i.useEffect)(()=>()=>{h?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:n,style:a,"data-height":d})}var l=n("1858"),d=n("3262"),c=n("1705"),h=n("7645"),u=n("8168"),p=n("8228"),m=n("5050");function g(e){let[t,n]=(0,i.useState)(e.js),[r,o]=(0,i.useState)(e.ts),[a,l]=(0,i.useState)(e.react),[g,f]=(0,i.useState)(e.vue),[y,v]=(0,i.useState)(e.svelte),x="3.7rem",[j,b]=(0,i.useState)(!0),[w,P]=(0,i.useState)(x),S=(0,i.useRef)(null),C=()=>{setTimeout(()=>{P(`calc(${S.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{P(`calc(${S.current.offsetHeight}px + ${x})`)},255)};return(0,i.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};n(e(t,"js")),o(e(r,"ts")),l(e(a,"jsx")),f(e(g,"html")),v(e(y,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":j,style:{height:j?x:w,overflow:"hidden",willChange:"height",transition:`height ${j?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{b(!j),C()},children:"show code"}),(0,s.jsx)("div",{ref:S,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:m.Z.collapsibleContent,children:(0,s.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,s.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"js",children:t})}),(0,s.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"ts",children:r})}),(0,s.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"jsx",children:a})}),(0,s.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"html",children:g})}),(0,s.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"html",children:y})})]})})})]})}function f(e){let{className:t,style:n,showCode:i,height:o,...d}=e,{colorMode:c}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (); +} + +`.trimStart(),f=` + + + +`,y=` + + +
+ +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(g,{js:u,ts:p,react:m,vue:f,svelte:y})]})}},8500:function(e,t,n){n.d(t,{Z:()=>d});var s=n("5893");n("7294");var r=n("6735");function i(e){let{children:t,fallback:n}=e;return(0,r.Z)()?(0,s.jsx)(s.Fragment,{children:t?.()}):n??null}var o=n("1705"),a=n("8294"),l=n("1858");function d(e){let{params:t,config:n,code:r,language:d="js",codeTitle:c="",showLineNumbers:h=!1,formatCode:u=!0,linkText:p="Run in LiveCodes",style:m={},className:g=""}=e,f=(0,a.r)({appUrl:l.G,params:t,config:n});return(0,s.jsxs)("div",{style:{marginBottom:"30px",...m},className:g,children:[r&&(0,s.jsx)(i,{children:()=>(0,s.jsx)(o.Z,{language:d,title:c,showLineNumbers:h,children:u?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(r,d):r})}),(0,s.jsxs)("a",{href:f,target:"_blank",rel:"noreferrer",children:[p,(0,s.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,s.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,n){n.d(t,{T:function(){return r},r:function(){return i}});var s=n(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:s,loading:r="lazy",view:o}=t,a=s||"headless"===o,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)C(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(i(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":r);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",i=l.querySelector(`iframe.${s}`),o=i||document.createElement("iframe");o.classList.add(s),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===r?"eager":"lazy"),a?C(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),o.onload=()=>{e(o)},o.src=c.href,i||l.appendChild(o)}),y=new Promise(e=>{addEventListener("message",function t(n){n.source===f.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>m?Promise.reject(g):new Promise(async e=>{y.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await y,e()}),x=(e,t)=>new Promise(async(n,s)=>{if(m)return s(g);await v();let r=E();addEventListener("message",function t(i){if(i.source===f.contentWindow&&i.origin===h&&i.data?.type==="livecodes-api-response"&&i.data?.id===r&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?s(e.error):n(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},h)}),j={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return b.includes(e)?(x("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},P=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=P(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!j[t])return;let n=e.data?.payload;j[t]?.forEach(e=>{e(n)})});let S=()=>{Object.values(j).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;sy.settled?x("destroy").then(S):m?Promise.reject(g):(S(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:r={},config:i={},headless:o,import:a,lite:l,view:d,...c}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let u="headless"===t.view||o;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==d?i.view=d:e.searchParams.set("view",d)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(i))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return a},a:function(){return o}});var s=n(7294);let r={},i=s.createContext(r);function o(e){let t=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/29e1e855.975bf4bf.js b/docs/assets/js/29e1e855.975bf4bf.js new file mode 100644 index 0000000..9d96fb7 --- /dev/null +++ b/docs/assets/js/29e1e855.975bf4bf.js @@ -0,0 +1,102 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9932"],{4520:function(e,t,s){s.r(t),s.d(t,{importsDemo:()=>u,multi:()=>p,multiFiles:()=>m,processorsDemo:()=>h,default:()=>x,frontMatter:()=>a,customRoot:()=>g,metadata:()=>n,assets:()=>d,toc:()=>v,contentTitle:()=>c});var n=JSON.parse('{"id":"languages/svelte","title":"Svelte","description":"Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript.","source":"@site/docs/languages/svelte.mdx","sourceDirName":"languages","slug":"/languages/svelte","permalink":"/docs/languages/svelte","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/svelte.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Sucrase","permalink":"/docs/languages/sucrase"},"next":{"title":"Tailwind CSS","permalink":"/docs/languages/tailwindcss"}}'),o=s("5893"),r=s("65"),i=s("3365"),l=s("8500");let a={},c="Svelte",d={},h={svelte:` + + + + +`},u={svelte:` + +
+

You clicked {count} times.

+ +
+`},p={markup:{language:"svelte",content:` + + +`},script:{language:"svelte",content:` + +
+ {count} +
+
+ + +
+
+ +
+`},style:{language:"css",content:'@import "tailwindcss";\n'},processors:["tailwindcss"]},m={...p,markup:{...p.markup,title:"App.svelte"},script:{...p.script,title:"Counter.svelte"},style:{...p.style,title:"styles.css",order:3}},g={markup:{language:"html",content:`

Custom Root Element

+
+

...other page content

+`},script:{language:"svelte",content:` + +
I'm a {name} component
+`}},v=[{value:"Usage",id:"usage",level:2},{value:"Demo",id:"demo",level:3},{value:"CSS Frameworks",id:"css-frameworks",level:3},{value:"Languages and Pre-Processors",id:"languages-and-pre-processors",level:3},{value:"Module Imports",id:"module-imports",level:3},{value:"Multiple Components",id:"multiple-components",level:3},{value:"Importing External Components",id:"importing-external-components",level:3},{value:"Root Element",id:"root-element",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function f(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"svelte",children:"Svelte"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"https://svelte.dev/docs/svelte/overview",children:"Svelte"})," is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript."]}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsxs)(t.p,{children:["Svelte components can be used as documented in the ",(0,o.jsx)(t.a,{href:"https://svelte.dev/docs/svelte/svelte-files",children:"docs"}),". See below for usage."]}),"\n",(0,o.jsx)(t.h3,{id:"demo",children:"Demo"}),"\n","\n",(0,o.jsx)(i.Z,{template:"svelte",height:"400"}),"\n",(0,o.jsx)(t.h3,{id:"css-frameworks",children:"CSS Frameworks"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"/docs/features/css#css-processors",children:"CSS Frameworks"})," supported in LiveCodes (e.g. ",(0,o.jsx)(t.a,{href:"/docs/languages/tailwindcss",children:"Tailwind CSS"}),", ",(0,o.jsx)(t.a,{href:"/docs/languages/unocss",children:"UnoCSS"}),", ",(0,o.jsx)(t.a,{href:"/docs/languages/windicss",children:"WindiCSS"}),") can detect class names added in Svelte components.\nMake sure that the required utility is enabled (from style editor menu or in ",(0,o.jsx)(t.code,{children:"processors"})," property of ",(0,o.jsx)(t.a,{href:"/docs/configuration/configuration-object#processors",children:"configuration object"}),")."]}),"\n",(0,o.jsxs)(t.p,{children:["See ",(0,o.jsx)(t.a,{href:"#multiple-components",children:"example below"}),"."]}),"\n",(0,o.jsx)(t.h3,{id:"languages-and-pre-processors",children:"Languages and Pre-Processors"}),"\n",(0,o.jsxs)(t.p,{children:["Many of the ",(0,o.jsx)(t.a,{href:"/docs/languages/",children:"languages supported in LiveCodes"})," can be used. The value of ",(0,o.jsx)(t.code,{children:"lang"})," attribute can be the language name (specified in its documentation page) or any of its aliases (extensions)."]}),"\n",(0,o.jsxs)(t.p,{children:["You may wrap the markup in a ",(0,o.jsx)(t.code,{children:"template"})," element if you want to specify the ",(0,o.jsx)(t.code,{children:"lang"})," attribute."]}),"\n","\n",(0,o.jsx)(l.Z,{params:h,code:h.svelte,language:"html",formatCode:!1}),"\n",(0,o.jsx)(t.h3,{id:"module-imports",children:"Module Imports"}),"\n",(0,o.jsxs)(t.p,{children:["npm modules can be imported as described in the section about ",(0,o.jsx)(t.a,{href:"/docs/features/module-resolution",children:"module resolution"}),", including bare module imports and importing from different CDNs. Stylesheets imported in the ",(0,o.jsx)(t.code,{children:"script"})," block are added as ",(0,o.jsx)(t.code,{children:''})," tags in the page ",(0,o.jsx)(t.code,{children:"head"}),"."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n","\n",(0,o.jsx)(l.Z,{params:u,code:u.svelte,language:"html",formatCode:!1}),"\n",(0,o.jsxs)(t.p,{children:["Module imports can be customized using import maps as described in ",(0,o.jsx)(t.a,{href:"/docs/features/module-resolution#custom-module-resolution",children:"module resolution"})," documentations."]}),"\n",(0,o.jsx)(t.h3,{id:"multiple-components",children:"Multiple Components"}),"\n",(0,o.jsxs)(t.p,{children:["Svelte is supported in both ",(0,o.jsx)(t.a,{href:"/docs/features/projects#markup-editor",children:"markup"})," and ",(0,o.jsx)(t.a,{href:"/docs/features/projects#script-editor",children:"script"})," editors."]}),"\n",(0,o.jsx)(t.p,{children:"This allows having a component in the markup editor that imports (and passes props to) a component in the script editor. The opposite is not supported."}),"\n",(0,o.jsxs)(t.p,{children:["This can be done using relative import of a file name in the same directory. Any file name will resolve to the component in the script editor,\ne.g. ",(0,o.jsx)(t.code,{children:"./script.svelte"}),", ",(0,o.jsx)(t.code,{children:"./Component.svelte"}),", ",(0,o.jsx)(t.code,{children:"./Counter.svelte"}),", etc."]}),"\n","\n",(0,o.jsx)(i.Z,{config:p}),"\n",(0,o.jsxs)(t.p,{children:["Please note that LiveCodes ",(0,o.jsx)(t.a,{href:"/docs/features/projects",children:"does not have the concept of a file system"}),". However, you can configure ",(0,o.jsx)(t.a,{href:"/docs/configuration/configuration-object#markup",children:"editor options"})," like ",(0,o.jsx)(t.code,{children:"title"}),", ",(0,o.jsx)(t.code,{children:"order"})," and ",(0,o.jsx)(t.code,{children:"hideTitle"})," to simulate multiple files, change editor order or even hide editors."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n","\n",(0,o.jsx)(i.Z,{config:m}),"\n",(0,o.jsxs)(t.p,{children:["When both markup and script editors use Svelte, the component in the markup editor is used as the main component rendered in the ",(0,o.jsx)(t.a,{href:"#root-element",children:"root element"}),".\nTo render the component in the script editor, it has to be imported and used by the main component."]}),"\n",(0,o.jsx)(t.h3,{id:"importing-external-components",children:"Importing External Components"}),"\n",(0,o.jsxs)(t.p,{children:["External Svelte components can be imported. The import URL has to be an absolute URL ending with ",(0,o.jsx)(t.code,{children:".svelte"})," extension. Any bare or relative imports in the imported files are resolved and compiled recursively."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-html",children:" + + +`,f=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:a.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:u,ts:p,react:m,vue:v,svelte:f})]})}},8500:function(e,t,s){s.d(t,{Z:()=>c});var n=s("5893");s("7294");var o=s("6735");function r(e){let{children:t,fallback:s}=e;return(0,o.Z)()?(0,n.jsx)(n.Fragment,{children:t?.()}):s??null}var i=s("1705"),l=s("8294"),a=s("1858");function c(e){let{params:t,config:s,code:o,language:c="js",codeTitle:d="",showLineNumbers:h=!1,formatCode:u=!0,linkText:p="Run in LiveCodes",style:m={},className:g=""}=e,v=(0,l.r)({appUrl:a.G,params:t,config:s});return(0,n.jsxs)("div",{style:{marginBottom:"30px",...m},className:g,children:[o&&(0,n.jsx)(r,{children:()=>(0,n.jsx)(i.Z,{language:c,title:d,showLineNumbers:h,children:u?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(o,c):o})}),(0,n.jsxs)("a",{href:v,target:"_blank",rel:"noreferrer",children:[p,(0,n.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,n.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,s){s.d(t,{T:function(){return o},r:function(){return r}});var n=s(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:o="lazy",view:i}=t,l=n||"headless"===i,a=null,c=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)k(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",l?"eager":o);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",v=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let n="livecodes",r=a.querySelector(`iframe.${n}`),i=r||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===o?"eager":"lazy"),l?k(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),i.onload=()=>{e(i)},i.src=d.href,r||a.appendChild(i)}),f=new Promise(e=>{addEventListener("message",function t(s){s.source===v.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),f.settled=!0)})}),x=()=>m?Promise.reject(g):new Promise(async e=>{f.settled&&e(),v.contentWindow?.postMessage({type:"livecodes-load"},h),await f,e()}),j=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await x();let o=E();addEventListener("message",function t(r){if(r.source===v.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===o&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?n(e.error):s(e)}}),v.contentWindow?.postMessage({method:e,id:o,args:t},h)}),y={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return b.includes(e)?(j("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==v.contentWindow||e.origin!==h||!t||!y[t])return;let s=e.data?.payload;y[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(y).forEach(e=>{e.length=0}),v?.remove?.(),m=!0};function k(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await x(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>x(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,t)=>j("show",[e,t]),runTests:()=>j("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nf.settled?j("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:o={},config:r={},headless:i,import:l,lite:a,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||i;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(r))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return l},a:function(){return i}});var n=s(7294);let o={},r=n.createContext(o);function i(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/2a7a6c71.8e3a9ca3.js b/docs/assets/js/2a7a6c71.8e3a9ca3.js new file mode 100644 index 0000000..1633396 --- /dev/null +++ b/docs/assets/js/2a7a6c71.8e3a9ca3.js @@ -0,0 +1,61 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9476"],{2389:function(e,t,s){s.r(t),s.d(t,{infoConfig:()=>c,jsOpParams:()=>h,default:()=>m,frontMatter:()=>o,metadata:()=>n,assets:()=>d,toc:()=>p,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/php-wasm","title":"PHP (Wasm)","description":"PHP in Browser, powered by WebAssembly (using php-wasm).","source":"@site/docs/languages/php-wasm.mdx","sourceDirName":"languages","slug":"/languages/php-wasm","permalink":"/docs/languages/php-wasm","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/php-wasm.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Perl","permalink":"/docs/languages/perl"},"next":{"title":"PHP","permalink":"/docs/languages/php"}}'),r=s("5893"),i=s("65"),a=s("3365");let o={},l="PHP (Wasm)",d={},c={script:{language:"php-wasm",content:`Hello, PHP! +`,console:"open"},p=[{value:"Usage",id:"usage",level:2},{value:"Standard Library",id:"standard-library",level:3},{value:"JavaScript Interoperability",id:"javascript-interoperability",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Alias",id:"alias",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function u(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"php-wasm",children:"PHP (Wasm)"})}),"\n","\n",(0,r.jsxs)(t.p,{children:["PHP in Browser, powered by WebAssembly (using ",(0,r.jsx)(t.a,{href:"https://github.com/seanmorris/php-wasm",children:"php-wasm"}),")."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"php-wasm"})," runs PHP in the browser using ",(0,r.jsx)(t.a,{href:"https://webassembly.org/",children:"WebAssembly"}),". This matches the behavior of the official PHP interpreter and allows using PHP's standard library. However, it requires relatively large download and has limited capabilities for client-side DOM manipulation."]}),"\n",(0,r.jsx)(t.admonition,{title:"Note",type:"info",children:(0,r.jsxs)(t.p,{children:["If you need a lighter-weight interpreter with more capable client-side DOM manipulation in PHP and do not need to use PHP's standard library, you may want to use the ",(0,r.jsx)(t.a,{href:"/docs/languages/php",children:"PHP interpreter written in JavaScript"}),"."]})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.h3,{id:"standard-library",children:"Standard Library"}),"\n",(0,r.jsx)(t.p,{children:"The PHP standard library is supported."}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-php",children:"f});var n=s("5893"),r=s("4200"),i=s("7294"),a=s("8294");function o(e){let t=(0,i.useRef)(null),[s,r]=(0,i.useState)(e.className||""),[o,l]=(0,i.useState)(e.style||{}),[d,c]=(0,i.useState)(e.height),[h,p]=(0,i.useState)(),[u,m]=(0,i.useState)(JSON.stringify(e.config||"")),[g,f]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:i,sdkReady:o,config:d,...v}=e;if(r(s||""),l(n||{}),c(i),h&&g===JSON.stringify(v)){if(u===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(v)),h?.destroy(),(0,a.T)(t.current,{config:d,...v}).then(e=>{p(e),"function"==typeof o&&o(e)})},[e]),(0,i.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:o,"data-height":d})}var l=s("1858"),d=s("3262"),c=s("1705"),h=s("7645"),p=s("8168"),u=s("8228"),m=s("5050");function g(e){let[t,s]=(0,i.useState)(e.js),[r,a]=(0,i.useState)(e.ts),[o,l]=(0,i.useState)(e.react),[g,f]=(0,i.useState)(e.vue),[v,y]=(0,i.useState)(e.svelte),x="3.7rem",[w,j]=(0,i.useState)(!0),[b,P]=(0,i.useState)(x),S=(0,i.useRef)(null),C=()=>{setTimeout(()=>{P(`calc(${S.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{P(`calc(${S.current.offsetHeight}px + ${x})`)},255)};return(0,i.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),a(e(r,"ts")),l(e(o,"jsx")),f(e(g,"html")),y(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${u.Z.details}`,"data-collapsed":w,style:{height:w?x:b,overflow:"hidden",willChange:"height",transition:`height ${w?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{j(!w),C()},children:"show code"}),(0,n.jsx)("div",{ref:S,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(p.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"ts",children:r})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"jsx",children:o})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:i,height:a,...d}=e,{colorMode:c}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),p=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),u=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (); +} + +`.trimStart(),f=` + + + +`,v=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o,{className:`container_Egsj ${e.className}`,style:{height:a||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:p,ts:u,react:m,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return i}});var n=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:r="lazy",view:a}=t,o=n||"headless"===a,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(o&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(o)C(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(i(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",o?"eager":r);let p=globalThis.process;c.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(u[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!o){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||o||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",i=l.querySelector(`iframe.${n}`),a=i||document.createElement("iframe");a.classList.add(n),a.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),a.setAttribute("allowtransparency","true"),a.setAttribute("allowpaymentrequest","true"),a.setAttribute("allowfullscreen","true"),a.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),a.setAttribute("loading","eager"===r?"eager":"lazy"),o?C(a):(a.style.height="100%",a.style.minHeight="200px",a.style.width="100%",a.style.margin="0",a.style.border="0",a.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===a.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===a.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),a.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),a.onload=()=>{e(a)},a.src=c.href,i||l.appendChild(a)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>m?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),x=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await y();let r=E();addEventListener("message",function t(i){if(i.source===f.contentWindow&&i.origin===h&&i.data?.type==="livecodes-api-response"&&i.data?.id===r&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},h)}),w={},j=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(m)throw Error(g);return j.includes(e)?(x("watch",[e]),w[e]||(w[e]=[]),w[e]?.push(t),{remove:()=>{w[e]=w[e]?.filter(e=>e!==t),w[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},P=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=P(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!w[t])return;let s=e.data?.payload;w[t]?.forEach(e=>{e(s)})});let S=()=>{Object.values(w).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nv.settled?x("destroy").then(S):m?Promise.reject(g):(S(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:i={},headless:a,import:o,lite:l,view:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let p="headless"===t.view||a;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==d?i.view=d:e.searchParams.set("view",d)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(i))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return o&&e.searchParams.set("x",encodeURIComponent(o)),p&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return o},a:function(){return a}});var n=s(7294);let r={},i=n.createContext(r);function a(e){let t=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/2b3d6869.f28a6fd4.js b/docs/assets/js/2b3d6869.f28a6fd4.js new file mode 100644 index 0000000..c32479e --- /dev/null +++ b/docs/assets/js/2b3d6869.f28a6fd4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3953"],{5605:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>o,metadata:()=>s,assets:()=>l,toc:()=>u,contentTitle:()=>i});var s=JSON.parse('{"id":"languages/julia","title":"Julia","description":"TODO...","source":"@site/docs/languages/julia.mdx","sourceDirName":"languages","slug":"/languages/julia","permalink":"/docs/languages/julia","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/julia.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"JSX","permalink":"/docs/languages/jsx"},"next":{"title":"Less","permalink":"/docs/languages/less"}}'),a=n("5893"),r=n("65");let o={},i="Julia",l={},u=[];function c(e){let t={h1:"h1",header:"header",p:"p",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.header,{children:(0,a.jsx)(t.h1,{id:"julia",children:"Julia"})}),"\n",(0,a.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(c,{...e})}):c(e)}},65:function(e,t,n){n.d(t,{Z:function(){return i},a:function(){return o}});var s=n(7294);let a={},r=s.createContext(a);function o(e){let t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/2b9e9ebb.a2aa4a74.js b/docs/assets/js/2b9e9ebb.a2aa4a74.js new file mode 100644 index 0000000..15092cd --- /dev/null +++ b/docs/assets/js/2b9e9ebb.a2aa4a74.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3208"],{7357:function(e,n,s){s.r(n),s.d(n,{default:()=>u,frontMatter:()=>t,metadata:()=>i,assets:()=>c,toc:()=>d,contentTitle:()=>a});var i=JSON.parse('{"id":"api/globals","title":"livecodes","description":"Modules","source":"@site/docs/api/globals.md","sourceDirName":"api","slug":"/api/globals","permalink":"/docs/api/globals","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/globals.md","tags":[],"version":"current","frontMatter":{}}'),l=s("5893"),r=s("65");let t={},a="livecodes",c={},d=[{value:"Modules",id:"modules",level:2},{value:"Interfaces",id:"interfaces",level:2},{value:"Type Aliases",id:"type-aliases",level:2},{value:"Functions",id:"functions",level:2}];function o(e){let n={a:"a",h1:"h1",h2:"h2",header:"header",li:"li",ul:"ul",...(0,r.a)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.header,{children:(0,l.jsx)(n.h1,{id:"livecodes",children:"livecodes"})}),"\n",(0,l.jsx)(n.h2,{id:"modules",children:"Modules"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"/docs/api/internal/",children:"_internal"})}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"interfaces",children:"Interfaces"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"/docs/api/interfaces/Code",children:"Code"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:"Config"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"/docs/api/interfaces/EmbedOptions",children:"EmbedOptions"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"/docs/api/interfaces/Playground",children:"Playground"})}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"type-aliases",children:"Type Aliases"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"/docs/api/type-aliases/Language",children:"Language"})}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"functions",children:"Functions"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"/docs/api/functions/createPlayground",children:"createPlayground"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"/docs/api/functions/getPlaygroundUrl",children:"getPlaygroundUrl"})}),"\n"]})]})}function u(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(o,{...e})}):o(e)}},65:function(e,n,s){s.d(n,{Z:function(){return a},a:function(){return t}});var i=s(7294);let l={},r=i.createContext(l);function t(e){let n=i.useContext(r);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:t(e.components),i.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/2c6c2717.cc814b20.js b/docs/assets/js/2c6c2717.cc814b20.js new file mode 100644 index 0000000..4342824 --- /dev/null +++ b/docs/assets/js/2c6c2717.cc814b20.js @@ -0,0 +1 @@ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1750"],{2729:function(e,t,r){"use strict";r.r(t),r.d(t,{default:()=>h,frontMatter:()=>a,metadata:()=>n,assets:()=>l,toc:()=>d,contentTitle:()=>c});var n=JSON.parse('{"id":"features/backup-restore","title":"Backup / Restore","description":"LiveCodes data can be backed-up, so that it can be later restored on the same or different device.","source":"@site/docs/features/backup-restore.mdx","sourceDirName":"features","slug":"/features/backup-restore","permalink":"/docs/features/backup-restore","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/backup-restore.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Broadcast","permalink":"/docs/features/broadcast"},"next":{"title":"GitHub Integration","permalink":"/docs/features/github-integration"}}'),o=r("5893"),s=r("65"),i=r("8500");let a={},c="Backup / Restore",l={},d=[{value:"Backup",id:"backup",level:2},{value:"Restore",id:"restore",level:2},{value:"Related",id:"related",level:2}];function u(e){let t={a:"a",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",ol:"ol",p:"p",ul:"ul",...(0,s.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"backup--restore",children:"Backup / Restore"})}),"\n",(0,o.jsx)(t.p,{children:"LiveCodes data can be backed-up, so that it can be later restored on the same or different device."}),"\n",(0,o.jsx)(t.p,{children:"The Backup/Restore screen can be accessed from the Settings menu \u2192 Backup / Restore."}),"\n","\n",(0,o.jsx)(i.Z,{params:{screen:"backup"},linkText:"direct link"}),"\n",(0,o.jsx)(t.h2,{id:"backup",children:"Backup"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.img,{alt:"LiveCode Backup",src:r(6621).Z+"",width:"2240",height:"1400"})}),"\n",(0,o.jsx)(t.p,{children:"The backup can include one or more of the following:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/features/projects",children:"Projects"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/features/templates",children:"User Templates"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/features/snippets",children:"Code Snippets"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/features/assets",children:"Assets"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/features/user-settings",children:"User Settings"})}),"\n"]}),"\n",(0,o.jsx)(t.p,{children:"A zip file containing the (base64-encoded binary) backup data is downloaded. This file can be restored later on the same or different device."}),"\n",(0,o.jsx)(t.h2,{id:"restore",children:"Restore"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.img,{alt:"LiveCode Restore",src:r(4563).Z+"",width:"2240",height:"1400"})}),"\n",(0,o.jsx)(t.p,{children:"When restoring a backup, there are 2 options for managing the current data:"}),"\n",(0,o.jsxs)(t.ol,{children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsx)(t.p,{children:"The current data can be deleted and replaced by the backup data. It cannot then be retrieved, so you may want to back it up first."}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsx)(t.p,{children:"The backup data can be merged with the current data with best effort to preserve both."}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/features/sync",children:"Sync"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/features/export",children:"Export"})}),"\n"]})]})}function h(e={}){let{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}},6621:function(e,t,r){"use strict";r.d(t,{Z:function(){return n}});let n=r.p+"assets/images/backup-restore-1-b032913c8d4f028bd6bfd4bb68f099fb.jpg"},4563:function(e,t,r){"use strict";r.d(t,{Z:function(){return n}});let n=r.p+"assets/images/backup-restore-2-896b0a37dbb7c963ba344dbf0858deeb.jpg"},7728:function(e,t,r){e=r.nmd(e);var n=function(){var e=String.fromCharCode,t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",n={};function o(e,t){if(!n[e]){n[e]={};for(var r=0;r>>8,r[2*n+1]=i%256}return r},decompressFromUint8Array:function(t){if(null==t)return s.decompress(t);for(var r=Array(t.length/2),n=0,o=r.length;nd.charCodeAt(0)){for(n=0;n>=1}else{for(n=0,o=1;n>=1}0==--u&&(u=Math.pow(2,p),p++),delete a[d]}else for(n=0,o=i[d];n>=1;0==--u&&(u=Math.pow(2,p),p++),i[l]=h++,d=String(c)}if(""!==d){if(Object.prototype.hasOwnProperty.call(a,d)){if(256>d.charCodeAt(0)){for(n=0;n>=1}else{for(n=0,o=1;n>=1}0==--u&&(u=Math.pow(2,p),p++),delete a[d]}else for(n=0,o=i[d];n>=1;0==--u&&(u=Math.pow(2,p),p++)}for(n=0,o=2;n>=1;for(;;){if(m<<=1,g==t-1){f.push(r(m));break}g++}return f.join("")},decompress:function(e){return null==e?"":""==e?null:s._decompress(e.length,32768,function(t){return e.charCodeAt(t)})},_decompress:function(t,r,n){var o,s,i,a,c,l,d,u=[],h=4,p=4,f=3,m="",g=[],v={val:n(0),position:r,index:1};for(o=0;o<3;o+=1)u[o]=o;for(i=0,c=4,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=n(v.index++)),i|=(a>0?1:0)*l,l<<=1;switch(i){case 0:for(i=0,c=256,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=n(v.index++)),i|=(a>0?1:0)*l,l<<=1;d=e(i);break;case 1:for(i=0,c=65536,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=n(v.index++)),i|=(a>0?1:0)*l,l<<=1;d=e(i);break;case 2:return""}for(u[3]=d,s=d,g.push(d);;){if(v.index>t)return"";for(i=0,c=Math.pow(2,f),l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=n(v.index++)),i|=(a>0?1:0)*l,l<<=1;switch(d=i){case 0:for(i=0,c=256,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=n(v.index++)),i|=(a>0?1:0)*l,l<<=1;u[p++]=e(i),d=p-1,h--;break;case 1:for(i=0,c=65536,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=n(v.index++)),i|=(a>0?1:0)*l,l<<=1;u[p++]=e(i),d=p-1,h--;break;case 2:return g.join("")}if(0==h&&(h=Math.pow(2,f),f++),u[d])m=u[d];else{if(d!==p)return null;m=s+s.charAt(0)}g.push(m),u[p++]=s+m.charAt(0),h--,s=m,0==h&&(h=Math.pow(2,f),f++)}}};return s}();"function"==typeof define&&define.amd?define(function(){return n}):null!=e&&(e.exports=n)},8500:function(e,t,r){"use strict";r.d(t,{Z:()=>l});var n=r("5893");r("7294");var o=r("6735");function s(e){let{children:t,fallback:r}=e;return(0,o.Z)()?(0,n.jsx)(n.Fragment,{children:t?.()}):r??null}var i=r("1705"),a=r("8294"),c=r("1858");function l(e){let{params:t,config:r,code:o,language:l="js",codeTitle:d="",showLineNumbers:u=!1,formatCode:h=!0,linkText:p="Run in LiveCodes",style:f={},className:m=""}=e,g=(0,a.r)({appUrl:c.G,params:t,config:r});return(0,n.jsxs)("div",{style:{marginBottom:"30px",...f},className:m,children:[o&&(0,n.jsx)(s,{children:()=>(0,n.jsx)(i.Z,{language:l,title:d,showLineNumbers:u,children:h?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(o,l):o})}),(0,n.jsxs)("a",{href:g,target:"_blank",rel:"noreferrer",children:[p,(0,n.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,n.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,r){"use strict";r.d(t,{T:function(){return o},r:function(){return s}});var n=r(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:r={},headless:n,loading:o="lazy",view:i}=t,a=n||"headless"===i,c=null,l=null;if("string"==typeof e)c=document.querySelector(e);else if(e instanceof HTMLElement)c=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!c){if(a)E(c=document.createElement("div")),document.body.appendChild(c);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(s(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":o);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof r&&Object.keys(r).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let f=!1,m="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!c)return;let t=c.dataset.height||c.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";c.style.height=e}"false"===c.dataset.defaultStyles||a||(c.style.backgroundColor||="#fff",c.style.border||="1px solid black",c.style.borderRadius||="8px",c.style.boxSizing||="border-box",c.style.padding||="0",c.style.width||="100%",c.style.height||=c.style.height||"300px",c.style.minHeight="200px",c.style.flexGrow="1",c.style.overflow||="hidden",c.style.resize||="vertical");let n="livecodes",s=c.querySelector(`iframe.${n}`),i=s||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===o?"eager":"lazy"),a?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=c.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),l=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!l||l<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:r},u))}),i.onload=()=>{e(i)},i.src=d.href,s||c.appendChild(i)}),v=new Promise(e=>{addEventListener("message",function t(r){r.source===g.contentWindow&&r.origin===u&&r.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),b=()=>f?Promise.reject(m):new Promise(async e=>{v.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},u),await v,e()}),y=(e,t)=>new Promise(async(r,n)=>{if(f)return n(m);await b();let o=A();addEventListener("message",function t(s){if(s.source===g.contentWindow&&s.origin===u&&s.data?.type==="livecodes-api-response"&&s.data?.id===o&&s.data.method===e){removeEventListener("message",t);let e=s.data.payload;e?.error?n(e.error):r(e)}}),g.contentWindow?.postMessage({method:e,id:o,args:t},u)}),w={},x=["load","ready","code","console","tests","destroy"],j=(e,t)=>{if(f)throw Error(m);return x.includes(e)?(y("watch",[e]),w[e]||(w[e]=[]),w[e]?.push(t),{remove:()=>{w[e]=w[e]?.filter(e=>e!==t),w[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},k=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=k(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==u||!t||!w[t])return;let r=e.data?.payload;w[t]?.forEach(e=>{e(r)})});let C=()=>{Object.values(w).forEach(e=>{e.length=0}),g?.remove?.(),f=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await b(),t.unobserve(c))})},{rootMargin:"150px"}).observe(c);let A=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>b(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,t)=>y("show",[e,t]),runTests:()=>y("runTests"),onChange:e=>j("code",e),watch:j,exec:function(e){for(var t=arguments.length,r=Array(t>1?t-1:0),n=1;nv.settled?y("destroy").then(C):f?Promise.reject(m):(C(),Promise.resolve())}}function s(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:r="https://livecodes.io",params:o={},config:s={},headless:i,import:a,lite:c,view:l,...d}=t;try{e=new URL(r)}catch{throw Error(`${r} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[r,n]=t;void 0!==n&&e.searchParams.set(r,String(n))});let h="headless"===t.view||i;if(c&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof s&&null==s.mode?s.mode="lite":e.searchParams.set("lite","true")),l&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof s&&null==s.view&&"headless"!==l?s.view=l:e.searchParams.set("view",l)),"string"==typeof s)try{new URL(s),e.searchParams.set("config",encodeURIComponent(s))}catch{throw Error('"config" is not a valid URL or configuration object.')}else s&&"object"==typeof s&&Object.keys(s).length>0&&(s.title&&"Untitled Project"!==s.title&&e.searchParams.set("title",s.title),s.description&&s.description.length>0&&e.searchParams.set("description",s.description),u.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(s))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{u.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,r){"use strict";r.d(t,{Z:function(){return a},a:function(){return i}});var n=r(7294);let o={},s=n.createContext(o);function i(e){let t=n.useContext(s);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/2dfd45fd.65c1279c.js b/docs/assets/js/2dfd45fd.65c1279c.js new file mode 100644 index 0000000..85895f6 --- /dev/null +++ b/docs/assets/js/2dfd45fd.65c1279c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7459"],{4354:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>s,metadata:()=>r,assets:()=>u,toc:()=>c,contentTitle:()=>i});var r=JSON.parse('{"id":"languages/autoprefixer","title":"Autoprefixer","description":"TODO...","source":"@site/docs/languages/autoprefixer.mdx","sourceDirName":"languages","slug":"/languages/autoprefixer","permalink":"/docs/languages/autoprefixer","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/autoprefixer.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Astro","permalink":"/docs/languages/astro"},"next":{"title":"Babel","permalink":"/docs/languages/babel"}}'),o=n("5893"),a=n("65");let s={},i="Autoprefixer",u={},c=[];function l(e){let t={h1:"h1",header:"header",p:"p",...(0,a.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"autoprefixer",children:"Autoprefixer"})}),"\n",(0,o.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},65:function(e,t,n){n.d(t,{Z:function(){return i},a:function(){return s}});var r=n(7294);let o={},a=r.createContext(o);function s(e){let t=r.useContext(a);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/301472d1.4027959a.js b/docs/assets/js/301472d1.4027959a.js new file mode 100644 index 0000000..876b0fe --- /dev/null +++ b/docs/assets/js/301472d1.4027959a.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7516"],{7635:function(e,s,t){t.r(s),t.d(s,{default:()=>g,frontMatter:()=>c,metadata:()=>n,assets:()=>h,params:()=>u,toc:()=>m,contentTitle:()=>d});var n=JSON.parse('{"id":"languages/cssmodules","title":"CSS Modules","description":"A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.","source":"@site/docs/languages/cssmodules.mdx","sourceDirName":"languages","slug":"/languages/cssmodules","permalink":"/docs/languages/cssmodules","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/cssmodules.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"CSS","permalink":"/docs/languages/css"},"next":{"title":"cssnano","permalink":"/docs/languages/cssnano"}}'),l=t("5893"),o=t("65"),i=t("8168"),r=t("7645"),a=t("3365");let c={},d="CSS Modules",h={},u={activeEditor:"style",html:'
\n

Page Title

\n

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur similique facere facilis minima tempora.

\n
\n',css:":global .page {\n padding: 20px;\n}\n\n.text {\n color: black;\n font-family: sans-serif;\n}\n\n.small-text {\n composes: text;\n font-size: 20px;\n}\n\n.large-text {\n composes: text;\n font-size: 40px;\n}\n\n.large-text:hover {\n color: red;\n}\n\n.title {\n composes: large-text;\n color: green;\n}\n",js:"import classes from './style.module.css';\n\ndocument.querySelector('h1').className = classes.title;\nconsole.log(classes);\n",processors:"cssmodules",compiled:"open"},m=[{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Type",id:"type",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Limitations",id:"limitations",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Links",id:"links",level:2}];function p(e){let s={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(s.header,{children:(0,l.jsx)(s.h1,{id:"css-modules",children:"CSS Modules"})}),"\n",(0,l.jsxs)(s.p,{children:["A ",(0,l.jsx)(s.a,{href:"https://github.com/css-modules/css-modules",children:"CSS Module"})," is a CSS file in which all class names and animation names are scoped locally by default."]}),"\n",(0,l.jsx)(s.p,{children:"The selector names are unique to avoid naming collision. They can then be imported as a JavaScript object."}),"\n",(0,l.jsx)(s.h2,{id:"usage",children:"Usage"}),"\n",(0,l.jsx)(s.p,{children:"CSS Modules can be enabled from the style editor menu."}),"\n",(0,l.jsx)(s.p,{children:"Selectors added to the style editor (using any language e.g. CSS, SCSS, Less, etc.) are transformed to unique selectors. The transformed classes are then accessible in the script editor as a JSON object, and are injected into the HTML elements."}),"\n",(0,l.jsx)(s.p,{children:(0,l.jsx)(s.strong,{children:"Example:"})}),"\n","\n",(0,l.jsxs)(i.Z,{children:[(0,l.jsx)(r.Z,{value:"src-css",label:"Source CSS",default:!0,children:(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-css",children:":global .page {\n padding: 20px;\n}\n\n.text {\n color: black;\n font-family: sans-serif;\n}\n\n.small-text {\n composes: text;\n font-size: 20px;\n}\n\n.large-text {\n composes: text;\n font-size: 40px;\n}\n\n.large-text:hover {\n color: red;\n}\n\n.title {\n composes: large-text;\n color: green;\n}\n"})})}),(0,l.jsx)(r.Z,{value:"compiled-css",label:"Compiled CSS",children:(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-css",children:".page {\n padding: 20px;\n}\n\n._text_1ygro_9 {\n color: black;\n font-family: sans-serif;\n}\n\n._small-text_1ygro_19 {\n font-size: 20px;\n}\n\n._large-text_1ygro_29 {\n font-size: 40px;\n}\n\n._large-text_1ygro_29:hover {\n color: red;\n}\n\n._title_1ygro_47 {\n color: green;\n}\n"})})}),(0,l.jsx)(r.Z,{value:"json",label:"JSON Object",children:(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-json",children:'{\n "text": "_text_1ygro_9",\n "small-text": "_small-text_1ygro_19 _text_1ygro_9",\n "large-text": "_large-text_1ygro_29 _text_1ygro_9",\n "title": "_title_1ygro_47 _large-text_1ygro_29 _text_1ygro_9",\n "smallText": "_small-text_1ygro_19 _text_1ygro_9",\n "largeText": "_large-text_1ygro_29 _text_1ygro_9"\n}\n'})})}),(0,l.jsx)(r.Z,{value:"src-html",label:"Source HTML",children:(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-html",children:'
\n

Page Title

\n

\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non\n beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur\n similique facere facilis minima tempora.\n

\n
\n'})})}),(0,l.jsx)(r.Z,{value:"compiled-html",label:"Compiled HTML",children:(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-html",children:'
\n

Page Title

\n

\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non\n beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur\n similique facere facilis minima tempora.\n

\n
\n'})})})]}),"\n",(0,l.jsxs)(s.p,{children:["In the script editor, the JSON object representing the transformed classes can be imported from the relative URLs ",(0,l.jsx)(s.code,{children:"'./style.module.css'"})," or ",(0,l.jsx)(s.code,{children:"'./styles.module.css'"}),"."]}),"\n",(0,l.jsxs)(s.p,{children:[(0,l.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#default_import",children:"Default"}),", ",(0,l.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#named_import",children:"named"})," and ",(0,l.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#namespace_import",children:"namespace"})," imports are supported. Class names are also available in camelCase (e.g ",(0,l.jsx)(s.code,{children:".large-text"})," becomes ",(0,l.jsx)(s.code,{children:"largeText"}),"). This can be changed by setting ",(0,l.jsx)(s.a,{href:"https://github.com/madyankin/postcss-modules#localsconvention",children:(0,l.jsx)(s.code,{children:"localsConvention"})})," in ",(0,l.jsx)(s.a,{href:"#custom-settings",children:"custom settings"}),"."]}),"\n",(0,l.jsx)(s.p,{children:(0,l.jsx)(s.strong,{children:"Example:"})}),"\n",(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-js",metastring:'title="In script editor (using JS in this case):"',children:"import classes from './style.module.css';\nimport { smallText } from './styles.module.css';\nimport * as allClasses from './styles.module.css';\n\nconsole.log(classes.title);\n\n// .small-text -> smallText\nconsole.log(smallText);\n\n// .large-text -> largeText\nconsole.log(allClasses.largeText);\n\n// bracket notation for class with dash\nconsole.log(allClasses['large-text']);\n"})}),"\n",(0,l.jsxs)(s.p,{children:["For full example, see ",(0,l.jsx)(s.a,{href:"#example-usage",children:"example usage"})," below."]}),"\n",(0,l.jsxs)(s.admonition,{type:"info",children:[(0,l.jsx)(s.p,{children:"CSS Modules has to be enabled (from style editor menu), to be able to import classes in the script editor."}),(0,l.jsxs)(s.p,{children:["Importing a URL that does not include ",(0,l.jsx)(s.code,{children:".module"})," (e.g. ",(0,l.jsx)(s.code,{children:"./style.css"}),") gets the processed CSS ",(0,l.jsx)(s.strong,{children:"string"})," as the module's default export."]}),(0,l.jsxs)(s.p,{children:["The extension of the style editor language can also be used, in addition to ",(0,l.jsx)(s.code,{children:".css"}),". For example, when using SCSS, importing from any of the following URLs is the same:"]}),(0,l.jsxs)(s.ul,{children:["\n",(0,l.jsx)(s.li,{children:(0,l.jsx)(s.code,{children:"./style.module.css"})}),"\n",(0,l.jsx)(s.li,{children:(0,l.jsx)(s.code,{children:"./styles.module.css"})}),"\n",(0,l.jsx)(s.li,{children:(0,l.jsx)(s.code,{children:"./style.module.scss"})}),"\n",(0,l.jsx)(s.li,{children:(0,l.jsx)(s.code,{children:"./styles.module.scss"})}),"\n"]})]}),"\n",(0,l.jsx)(s.h2,{id:"language-info",children:"Language Info"}),"\n",(0,l.jsx)(s.h3,{id:"name",children:"Name"}),"\n",(0,l.jsx)(s.p,{children:(0,l.jsx)(s.code,{children:"cssmodules"})}),"\n",(0,l.jsx)(s.h3,{id:"type",children:"Type"}),"\n",(0,l.jsx)(s.p,{children:(0,l.jsx)(s.a,{href:"/docs/features/css#css-processors",children:"Processor"})}),"\n",(0,l.jsx)(s.h3,{id:"editor",children:"Editor"}),"\n",(0,l.jsx)(s.p,{children:(0,l.jsx)(s.code,{children:"style"})}),"\n",(0,l.jsx)(s.h2,{id:"compiler",children:"Compiler"}),"\n",(0,l.jsxs)(s.p,{children:["The CSS Modules processor is provided using ",(0,l.jsx)(s.a,{href:"https://github.com/madyankin/postcss-modules",children:"postcss-modules"})," as a ",(0,l.jsx)(s.a,{href:"/docs/languages/postcss",children:"PostCSS"})," plugin."]}),"\n",(0,l.jsx)(s.h3,{id:"version",children:"Version"}),"\n",(0,l.jsxs)(s.p,{children:[(0,l.jsx)(s.code,{children:"postcss-modules"}),": v6.0.1"]}),"\n",(0,l.jsx)(s.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,l.jsxs)(s.p,{children:[(0,l.jsx)(s.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,l.jsx)(s.code,{children:"cssmodules"})," are passed as a JSON object to the ",(0,l.jsx)(s.code,{children:"postcss-modules"})," plugin during compile. Please check the ",(0,l.jsx)(s.a,{href:"https://github.com/madyankin/postcss-modules#usage",children:"documentation"})," for full reference."]}),"\n",(0,l.jsx)(s.p,{children:"In addition, the following settings are available:"}),"\n",(0,l.jsxs)(s.ul,{children:["\n",(0,l.jsxs)(s.li,{children:["\n",(0,l.jsx)(s.p,{children:(0,l.jsx)(s.code,{children:"addClassesToHTML"})}),"\n",(0,l.jsxs)(s.p,{children:["Type: ",(0,l.jsx)(s.code,{children:"boolean"}),". Default: ",(0,l.jsx)(s.code,{children:"true"}),"."]}),"\n",(0,l.jsx)(s.p,{children:"The generated classes are injected into the HTML elements, so the styles are applied without having to assign them using JavaScript."}),"\n"]}),"\n",(0,l.jsxs)(s.li,{children:["\n",(0,l.jsx)(s.p,{children:(0,l.jsx)(s.code,{children:"removeOriginalClasses"})}),"\n",(0,l.jsxs)(s.p,{children:["Type: ",(0,l.jsx)(s.code,{children:"boolean"}),". Default: ",(0,l.jsx)(s.code,{children:"false"}),"."]}),"\n",(0,l.jsxs)(s.p,{children:["When enabled, the original classes are removed from HTML, keeping only the generated classes. Only applies if ",(0,l.jsx)(s.code,{children:"addClassesToHTML"})," is enabled."]}),"\n"]}),"\n"]}),"\n",(0,l.jsx)(s.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,l.jsx)(s.p,{children:(0,l.jsx)(s.strong,{children:"Example:"})}),"\n",(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-json",children:'{\n "cssmodules": {\n "exportGlobals": true,\n "localsConvention": "camelCaseOnly",\n "addClassesToHTML": false\n }\n}\n'})}),"\n",(0,l.jsx)(s.h2,{id:"limitations",children:"Limitations"}),"\n",(0,l.jsxs)(s.p,{children:["Currently, loading external sources in ",(0,l.jsx)(s.a,{href:"https://github.com/css-modules/css-modules#composing-from-other-files",children:(0,l.jsx)(s.code,{children:"composes"})})," is not supported."]}),"\n",(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-css",children:"/* you cannot do this */\n.title {\n composes: title from 'https://example.com/styles.css';\n}\n"})}),"\n",(0,l.jsxs)(s.p,{children:["If you get this working, ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/pulls",children:"please create a pull request"}),"."]}),"\n",(0,l.jsx)(s.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n","\n",(0,l.jsx)(a.Z,{params:u,height:"400"}),"\n",(0,l.jsx)(s.h2,{id:"links",children:"Links"}),"\n",(0,l.jsxs)(s.ul,{children:["\n",(0,l.jsx)(s.li,{children:(0,l.jsx)(s.a,{href:"https://github.com/css-modules/css-modules",children:"CSS Modules"})}),"\n",(0,l.jsx)(s.li,{children:(0,l.jsx)(s.a,{href:"https://github.com/madyankin/postcss-modules",children:"postcss-modules"})}),"\n",(0,l.jsx)(s.li,{children:(0,l.jsx)(s.a,{href:"https://postcss.org/",children:"PostCSS"})}),"\n"]})]})}function g(e={}){let{wrapper:s}={...(0,o.a)(),...e.components};return s?(0,l.jsx)(s,{...e,children:(0,l.jsx)(p,{...e})}):p(e)}},3365:function(e,s,t){t.d(s,{Z:()=>x});var n=t("5893"),l=t("4200"),o=t("7294"),i=t("8294");function r(e){let s=(0,o.useRef)(null),[t,l]=(0,o.useState)(e.className||""),[r,a]=(0,o.useState)(e.style||{}),[c,d]=(0,o.useState)(e.height),[h,u]=(0,o.useState)(),[m,p]=(0,o.useState)(JSON.stringify(e.config||"")),[g,x]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!s.current)return;let{className:t,style:n,height:o,sdkReady:r,config:c,...f}=e;if(l(t||""),a(n||{}),d(o),h&&g===JSON.stringify(f)){if(m===JSON.stringify(c))return;p(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else x(JSON.stringify(f)),h?.destroy(),(0,i.T)(s.current,{config:c,...f}).then(e=>{u(e),"function"==typeof r&&r(e)})},[e]),(0,o.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:s,className:t,style:r,"data-height":c})}var a=t("1858"),c=t("3262"),d=t("1705"),h=t("7645"),u=t("8168"),m=t("8228"),p=t("5050");function g(e){let[s,t]=(0,o.useState)(e.js),[l,i]=(0,o.useState)(e.ts),[r,a]=(0,o.useState)(e.react),[g,x]=(0,o.useState)(e.vue),[f,j]=(0,o.useState)(e.svelte),y="3.7rem",[v,b]=(0,o.useState)(!0),[S,w]=(0,o.useState)(y),C=(0,o.useRef)(null),_=()=>{setTimeout(()=>{w(`calc(${C.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{w(`calc(${C.current.offsetHeight}px + ${y})`)},255)};return(0,o.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===s?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};t(e(s,"js")),i(e(l,"ts")),a(e(r,"jsx")),x(e(g,"html")),j(e(f,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${m.Z.details}`,"data-collapsed":v,style:{height:v?y:S,overflow:"hidden",willChange:"height",transition:`height ${v?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!v),_()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:p.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:_},children:(0,n.jsx)(d.Z,{language:"js",children:s})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:_},children:(0,n.jsx)(d.Z,{language:"ts",children:l})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:_},children:(0,n.jsx)(d.Z,{language:"jsx",children:r})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:_},children:(0,n.jsx)(d.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:_},children:(0,n.jsx)(d.Z,{language:"html",children:f})})]})})})]})}function x(e){let{className:s,style:t,showCode:o,height:i,...c}=e,{colorMode:d}=(0,l.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(c)}; + return (); +} + +`.trimStart(),x=` + + + +`,f=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:a.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:u,ts:m,react:p,vue:x,svelte:f})]})}},8294:function(e,s,t){t.d(s,{T:function(){return l},r:function(){return o}});var n=t(7728);async function l(e){let s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(s=e,e=null);let{config:t={},headless:n,loading:l="lazy",view:i}=s,r=n||"headless"===i,a=null,c=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(r&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(r)_(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(o(s)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",r?"eager":l);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof t&&Object.keys(t).length>0&&d.searchParams.set("config","sdk");let m=s.params;"object"==typeof m&&Object.keys(m).length>0&&JSON.stringify(m).length<1800&&Object.keys(m).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(m[e])))});let p=!1,g="Cannot call API methods after calling `destroy()`.",x=await new Promise(e=>{if(!a)return;let s=a.dataset.height||a.style.height;if(s&&!r){let e=isNaN(Number(s))?s:s+"px";a.style.height=e}"false"===a.dataset.defaultStyles||r||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let n="livecodes",o=a.querySelector(`iframe.${n}`),i=o||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===l?"eager":"lazy"),r?_(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(s){s.source===i.contentWindow&&s.origin===h&&s.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(s.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(s){s.source===i.contentWindow&&s.origin===h&&s.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:t},h))}),i.onload=()=>{e(i)},i.src=d.href,o||a.appendChild(i)}),f=new Promise(e=>{addEventListener("message",function s(t){t.source===x.contentWindow&&t.origin===h&&t.data?.type==="livecodes-ready"&&(removeEventListener("message",s),e(),f.settled=!0)})}),j=()=>p?Promise.reject(g):new Promise(async e=>{f.settled&&e(),x.contentWindow?.postMessage({type:"livecodes-load"},h),await f,e()}),y=(e,s)=>new Promise(async(t,n)=>{if(p)return n(g);await j();let l=T();addEventListener("message",function s(o){if(o.source===x.contentWindow&&o.origin===h&&o.data?.type==="livecodes-api-response"&&o.data?.id===l&&o.data.method===e){removeEventListener("message",s);let e=o.data.payload;e?.error?n(e.error):t(e)}}),x.contentWindow?.postMessage({method:e,id:l,args:s},h)}),v={},b=["load","ready","code","console","tests","destroy"],S=(e,s)=>{if(p)throw Error(g);return b.includes(e)?(y("watch",[e]),v[e]||(v[e]=[]),v[e]?.push(s),{remove:()=>{v[e]=v[e]?.filter(e=>e!==s),v[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},w=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let s=w(e.data?.type??"");if(e.source!==x.contentWindow||e.origin!==h||!s||!v[s])return;let t=e.data?.payload;v[s]?.forEach(e=>{e(t)})});let C=()=>{Object.values(v).forEach(e=>{e.length=0}),x?.remove?.(),p=!0};function _(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===l&&"IntersectionObserver"in window&&new IntersectionObserver((e,s)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),s.unobserve(a))})},{rootMargin:"150px"}).observe(a);let T=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,s)=>y("show",[e,s]),runTests:()=>y("runTests"),onChange:e=>S("code",e),watch:S,exec:function(e){for(var s=arguments.length,t=Array(s>1?s-1:0),n=1;nf.settled?y("destroy").then(C):p?Promise.reject(g):(C(),Promise.resolve())}}function o(){let e,s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:t="https://livecodes.io",params:l={},config:o={},headless:i,import:r,lite:a,view:c,...d}=s;try{e=new URL(t)}catch{throw Error(`${t} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(s=>{let[t,n]=s;void 0!==n&&e.searchParams.set(t,String(n))});let u="headless"===s.view||i;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==c?o.view=c:e.searchParams.set("view",c)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(o))));if(l&&"object"==typeof l&&Object.keys(l).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(l)))}catch{Object.keys(l).forEach(s=>{e.searchParams.set(s,encodeURIComponent(String(l[s])))})}return r&&e.searchParams.set("x",encodeURIComponent(r)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,s,t){t.d(s,{Z:function(){return r},a:function(){return i}});var n=t(7294);let l={},o=n.createContext(l);function i(e){let s=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function r(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:i(e.components),n.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/3021cf83.3891a269.js b/docs/assets/js/3021cf83.3891a269.js new file mode 100644 index 0000000..2d8b17f --- /dev/null +++ b/docs/assets/js/3021cf83.3891a269.js @@ -0,0 +1,62 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["804"],{4791:function(e,t,n){n.r(t),n.d(t,{config:()=>f,UMDCode:()=>g,default:()=>b,frontMatter:()=>h,metadata:()=>s,assets:()=>u,ESMCode:()=>m,toc:()=>v,contentTitle:()=>p});var s=JSON.parse('{"id":"getting-started","title":"Getting Started","description":"There are multiple options:","source":"@site/docs/getting-started.mdx","sourceDirName":".","slug":"/getting-started","permalink":"/docs/getting-started","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/getting-started.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Why Another Playground?","permalink":"/docs/why"},"next":{"title":"Features","permalink":"/docs/features/"}}'),o=n("5893"),r=n("65"),i=n("8168"),a=n("7645"),l=n("3365"),d=n("7262"),c=n("1705");let h={},p="Getting Started",u={},m=()=>{let{siteConfig:e}=(0,d.Z)();return(0,o.jsx)(c.Z,{title:"index.html",language:"html",children:`
+`})},g=()=>{let{siteConfig:e}=(0,d.Z)();return(0,o.jsx)(c.Z,{title:"index.html",language:"html",children:`
+ + +`})},f={markup:{language:"markdown",content:"# Hello LiveCodes!"},style:{language:"css",content:"body { color: blue; }"},script:{language:"javascript",content:'console.log("hello from JavaScript!");'},activeEditor:"script"},v=[{value:"Standalone App",id:"standalone-app",level:2},{value:"Embedded Playgrounds",id:"embedded-playgrounds",level:2},{value:"App Embed Screen",id:"app-embed-screen",level:3},{value:"SDK",id:"sdk",level:3},{value:"Option 1: Using a bundler",id:"option-1-using-a-bundler",level:4},{value:"Option 2: Load from CDN",id:"option-2-load-from-cdn",level:4},{value:"Add your own content",id:"add-your-own-content",level:4},{value:"Self-Hosting",id:"self-hosting",level:2}];function y(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"getting-started",children:"Getting Started"})}),"\n","\n",(0,o.jsx)(t.p,{children:"There are multiple options:"}),"\n",(0,o.jsx)(t.h2,{id:"standalone-app",children:"Standalone App"}),"\n",(0,o.jsxs)(t.p,{children:["The easiest way to get started with LiveCodes is to just use the app (",(0,o.jsx)(t.a,{href:"https://livecodes.io",children:"https://livecodes.io"}),")."]}),"\n",(0,o.jsxs)(t.p,{children:["It is packed with ",(0,o.jsx)(t.a,{href:"/docs/features/",children:"features"})," and offers various ways to ",(0,o.jsx)(t.a,{href:"/docs/features/import",children:"import code"}),"."]}),"\n",(0,o.jsx)(t.h2,{id:"embedded-playgrounds",children:"Embedded Playgrounds"}),"\n",(0,o.jsxs)(t.p,{children:["LiveCodes playgrounds can be easily ",(0,o.jsx)(t.a,{href:"/docs/features/embeds",children:"embedded"})," into any web page. This can be achieved using:"]}),"\n",(0,o.jsx)(t.h3,{id:"app-embed-screen",children:"App Embed Screen"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.a,{href:"#standalone-app",children:"standalone app"})," allows you to embed any project from the ",(0,o.jsx)(t.a,{href:"/docs/features/embeds",children:"embed screen"}),". The UI allows setting embed options and shows a preview of the embedded playground.\nCopy the generated code snippet (at the bottom of the screen) and add it to the web page that you want to embed the playground in."]}),"\n",(0,o.jsx)(t.h3,{id:"sdk",children:"SDK"}),"\n",(0,o.jsxs)(t.p,{children:["LiveCodes ",(0,o.jsx)(t.a,{href:"/docs/sdk/",children:(0,o.jsx)("abbr",{title:"Software Development Kit",children:"SDK"})})," is available as ",(0,o.jsx)(t.a,{href:"https://www.npmjs.com/package/livecodes",children:"npm package"})," to allow easy embedding and communication with playgrounds."]}),"\n",(0,o.jsx)(t.h4,{id:"option-1-using-a-bundler",children:"Option 1: Using a bundler"}),"\n",(0,o.jsx)(t.p,{children:"Install from npm."}),"\n",(0,o.jsxs)(i.Z,{groupId:"npm2yarn",children:[(0,o.jsx)(a.Z,{value:"npm",children:(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-bash",children:"npm install livecodes\n"})})}),(0,o.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-bash",children:"yarn add livecodes\n"})})}),(0,o.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-bash",children:"pnpm add livecodes\n"})})}),(0,o.jsx)(a.Z,{value:"bun",label:"Bun",children:(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-bash",children:"bun add livecodes\n"})})})]}),"\n",(0,o.jsx)(t.p,{children:"then you can use it like that:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",metastring:'title="index.js"',children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container', {\n template: 'react',\n // other embed options\n});\n"})}),"\n",(0,o.jsx)(t.h4,{id:"option-2-load-from-cdn",children:"Option 2: Load from CDN"}),"\n",(0,o.jsx)(t.p,{children:"ESM:"}),"\n","\n","\n",(0,o.jsx)(m,{}),"\n",(0,o.jsx)(t.p,{children:"UMD:"}),"\n","\n",(0,o.jsx)(g,{}),"\n",(0,o.jsx)(t.h4,{id:"add-your-own-content",children:"Add your own content"}),"\n",(0,o.jsxs)(t.p,{children:["You may use any of the methods to ",(0,o.jsx)(t.a,{href:"/docs/features/code-prefill",children:"prefill the playground"})," with your own code."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",metastring:'title="index.js"',children:"import { createPlayground } from 'livecodes';\n\nconst config = {\n markup: {\n language: 'markdown',\n content: '# Hello LiveCodes!',\n },\n style: {\n language: 'css',\n content: 'body { color: blue; }',\n },\n script: {\n language: 'javascript',\n content: 'console.log(\"hello from JavaScript!\");',\n },\n activeEditor: 'script',\n};\n\ncreatePlayground('#container', { config, params: { console: 'open' } });\n"})}),"\n","\n",(0,o.jsx)(t.p,{children:"Live demo:\n(this is an interactive playground - try editing the code!)"}),"\n",(0,o.jsx)(l.Z,{config:f,params:{console:"open"}}),"\n",(0,o.jsxs)(t.p,{children:["Please refer to the section on ",(0,o.jsx)(t.a,{href:"/docs/features/embeds",children:"Embedded Playgrounds"})," for more details."]}),"\n",(0,o.jsx)(t.h2,{id:"self-hosting",children:"Self-Hosting"}),"\n",(0,o.jsx)(t.p,{children:"LiveCodes can be hosted on any static file server or CDN."}),"\n",(0,o.jsxs)(t.p,{children:["The easiest way is to download the app from ",(0,o.jsx)(t.a,{href:"https://github.com/live-codes/livecodes/releases",children:"releases"}),", extract the folder and add it to your website."]}),"\n",(0,o.jsxs)(t.p,{children:["Please check the section on ",(0,o.jsx)(t.a,{href:"/docs/features/self-hosting",children:"self-hosting"})," for other methods of self-hosting, including the built-in setup to deploy to GitHub pages and how to use the SDK with the self-hosted app."]})]})}function b(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(y,{...e})}):y(e)}},3365:function(e,t,n){n.d(t,{Z:()=>f});var s=n("5893"),o=n("4200"),r=n("7294"),i=n("8294");function a(e){let t=(0,r.useRef)(null),[n,o]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[d,c]=(0,r.useState)(e.height),[h,p]=(0,r.useState)(),[u,m]=(0,r.useState)(JSON.stringify(e.config||"")),[g,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:n,style:s,height:r,sdkReady:a,config:d,...v}=e;if(o(n||""),l(s||{}),c(r),h&&g===JSON.stringify(v)){if(u===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(v)),h?.destroy(),(0,i.T)(t.current,{config:d,...v}).then(e=>{p(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:n,style:a,"data-height":d})}var l=n("1858"),d=n("3262"),c=n("1705"),h=n("7645"),p=n("8168"),u=n("8228"),m=n("5050");function g(e){let[t,n]=(0,r.useState)(e.js),[o,i]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[g,f]=(0,r.useState)(e.vue),[v,y]=(0,r.useState)(e.svelte),b="3.7rem",[j,x]=(0,r.useState)(!0),[w,S]=(0,r.useState)(b),C=(0,r.useRef)(null),P=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${b})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${b})`)},255)};return(0,r.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};n(e(t,"js")),i(e(o,"ts")),l(e(a,"jsx")),f(e(g,"html")),y(e(v,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${u.Z.details}`,"data-collapsed":j,style:{height:j?b:w,overflow:"hidden",willChange:"height",transition:`height ${j?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{x(!j),P()},children:"show code"}),(0,s.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:m.Z.collapsibleContent,children:(0,s.jsxs)(p.Z,{groupId:"sdk-code",children:[(0,s.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:P},children:(0,s.jsx)(c.Z,{language:"js",children:t})}),(0,s.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:P},children:(0,s.jsx)(c.Z,{language:"ts",children:o})}),(0,s.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:P},children:(0,s.jsx)(c.Z,{language:"jsx",children:a})}),(0,s.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:P},children:(0,s.jsx)(c.Z,{language:"html",children:g})}),(0,s.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:P},children:(0,s.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:n,showCode:r,height:i,...d}=e,{colorMode:c}=(0,o.I)(),h=e=>JSON.stringify(e,null,2),p=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),u=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (); +} + +`.trimStart(),f=` + + + +`,v=` + + +
+ +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(g,{js:p,ts:u,react:m,vue:f,svelte:v})]})}},8294:function(e,t,n){n.d(t,{T:function(){return o},r:function(){return r}});var s=n(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:s,loading:o="lazy",view:i}=t,a=s||"headless"===i,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)P(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(r(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":o);let p=globalThis.process;c.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&c.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(u[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",r=l.querySelector(`iframe.${s}`),i=r||document.createElement("iframe");i.classList.add(s),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===o?"eager":"lazy"),a?P(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),i.onload=()=>{e(i)},i.src=c.href,r||l.appendChild(i)}),v=new Promise(e=>{addEventListener("message",function t(n){n.source===f.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>m?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),b=(e,t)=>new Promise(async(n,s)=>{if(m)return s(g);await y();let o=E();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===o&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?s(e.error):n(e)}}),f.contentWindow?.postMessage({method:e,id:o,args:t},h)}),j={},x=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return x.includes(e)?(b("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[e]?.length===0&&b("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!j[t])return;let n=e.data?.payload;j[t]?.forEach(e=>{e(n)})});let C=()=>{Object.values(j).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function P(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>b("run"),format:e=>b("format",[e]),getShareUrl:e=>b("getShareUrl",[e]),getConfig:e=>b("getConfig",[e]),setConfig:e=>b("setConfig",[e]),getCode:()=>b("getCode"),show:(e,t)=>b("show",[e,t]),runTests:()=>b("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;sv.settled?b("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:o={},config:r={},headless:i,import:a,lite:l,view:d,...c}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let p="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==d?r.view=d:e.searchParams.set("view",d)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(r))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{h.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),p&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return a},a:function(){return i}});var s=n(7294);let o={},r=s.createContext(o);function i(e){let t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/31219cfd.634dcc6a.js b/docs/assets/js/31219cfd.634dcc6a.js new file mode 100644 index 0000000..9f234a3 --- /dev/null +++ b/docs/assets/js/31219cfd.634dcc6a.js @@ -0,0 +1 @@ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7306"],{5140:function(e,t,n){"use strict";n.r(t),n.d(t,{default:()=>u,frontMatter:()=>a,metadata:()=>r,assets:()=>l,toc:()=>d,contentTitle:()=>c});var r=JSON.parse('{"id":"features/snippets","title":"Code Snippets","description":"LiveCodes supports saving and organizing code snippets in different languages.","source":"@site/docs/features/snippets.mdx","sourceDirName":"features","slug":"/features/snippets","permalink":"/docs/features/snippets","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/snippets.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Assets","permalink":"/docs/features/assets"},"next":{"title":"Import","permalink":"/docs/features/import"}}'),s=n("5893"),o=n("65"),i=n("8500");let a={},c="Code Snippets",l={},d=[{value:"Related",id:"related",level:2}];function p(e){let t={a:"a",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"code-snippets",children:"Code Snippets"})}),"\n",(0,s.jsx)(t.p,{children:"LiveCodes supports saving and organizing code snippets in different languages."}),"\n",(0,s.jsxs)(t.p,{children:["Code snippets are saved locally on user's device. However, they are supported in ",(0,s.jsx)(t.a,{href:"/docs/features/sync",children:"sync"}),", ",(0,s.jsx)(t.a,{href:"/docs/features/backup-restore#backup",children:"backup"})," and ",(0,s.jsx)(t.a,{href:"/docs/features/backup-restore#restore",children:"restore"}),"."]}),"\n",(0,s.jsx)(t.p,{children:"Code snippets screen can be accessed from Settings menu \u2192 Code Snippets."}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"Code Snippets",src:n(4989).Z+"",width:"2240",height:"1400"})}),"\n","\n",(0,s.jsx)(i.Z,{params:{screen:"snippets"},linkText:"direct link"}),"\n",(0,s.jsx)(t.p,{children:"Each snippet has a title, description, language and code."}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"Code Snippets",src:n(8794).Z+"",width:"2240",height:"1400"})}),"\n",(0,s.jsx)(t.p,{children:"After adding snippets they can be sorted (by date modified or title), filtered (by language) or searched."}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"Code Snippets",src:n(8418).Z+"",width:"2240",height:"1400"})}),"\n",(0,s.jsx)(t.p,{children:"Code snippets can then be copied to clipboard and pasted in projects."}),"\n",(0,s.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"/docs/features/projects",children:"Projects"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"/docs/features/assets",children:"Assets"})}),"\n"]})]})}function u(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},4989:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});let r=n.p+"assets/images/snippets-1-d0ec1b73d1effe6e3a8f71e1de7974f2.jpg"},8794:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});let r=n.p+"assets/images/snippets-add-cbb29a5991e12bc4e64f65d0a3f08b17.jpg"},8418:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});let r=n.p+"assets/images/snippets-list-533f9ab8a9a39913fc9c91bf92570635.jpg"},7728:function(e,t,n){e=n.nmd(e);var r=function(){var e=String.fromCharCode,t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",r={};function s(e,t){if(!r[e]){r[e]={};for(var n=0;n>>8,n[2*r+1]=i%256}return n},decompressFromUint8Array:function(t){if(null==t)return o.decompress(t);for(var n=Array(t.length/2),r=0,s=n.length;rd.charCodeAt(0)){for(r=0;r>=1}else{for(r=0,s=1;r>=1}0==--p&&(p=Math.pow(2,h),h++),delete a[d]}else for(r=0,s=i[d];r>=1;0==--p&&(p=Math.pow(2,h),h++),i[l]=u++,d=String(c)}if(""!==d){if(Object.prototype.hasOwnProperty.call(a,d)){if(256>d.charCodeAt(0)){for(r=0;r>=1}else{for(r=0,s=1;r>=1}0==--p&&(p=Math.pow(2,h),h++),delete a[d]}else for(r=0,s=i[d];r>=1;0==--p&&(p=Math.pow(2,h),h++)}for(r=0,s=2;r>=1;for(;;){if(m<<=1,g==t-1){f.push(n(m));break}g++}return f.join("")},decompress:function(e){return null==e?"":""==e?null:o._decompress(e.length,32768,function(t){return e.charCodeAt(t)})},_decompress:function(t,n,r){var s,o,i,a,c,l,d,p=[],u=4,h=4,f=3,m="",g=[],v={val:r(0),position:n,index:1};for(s=0;s<3;s+=1)p[s]=s;for(i=0,c=4,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=r(v.index++)),i|=(a>0?1:0)*l,l<<=1;switch(i){case 0:for(i=0,c=256,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=r(v.index++)),i|=(a>0?1:0)*l,l<<=1;d=e(i);break;case 1:for(i=0,c=65536,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=r(v.index++)),i|=(a>0?1:0)*l,l<<=1;d=e(i);break;case 2:return""}for(p[3]=d,o=d,g.push(d);;){if(v.index>t)return"";for(i=0,c=Math.pow(2,f),l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=r(v.index++)),i|=(a>0?1:0)*l,l<<=1;switch(d=i){case 0:for(i=0,c=256,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=r(v.index++)),i|=(a>0?1:0)*l,l<<=1;p[h++]=e(i),d=h-1,u--;break;case 1:for(i=0,c=65536,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=r(v.index++)),i|=(a>0?1:0)*l,l<<=1;p[h++]=e(i),d=h-1,u--;break;case 2:return g.join("")}if(0==u&&(u=Math.pow(2,f),f++),p[d])m=p[d];else{if(d!==h)return null;m=o+o.charAt(0)}g.push(m),p[h++]=o+m.charAt(0),u--,o=m,0==u&&(u=Math.pow(2,f),f++)}}};return o}();"function"==typeof define&&define.amd?define(function(){return r}):null!=e&&(e.exports=r)},8500:function(e,t,n){"use strict";n.d(t,{Z:()=>l});var r=n("5893");n("7294");var s=n("6735");function o(e){let{children:t,fallback:n}=e;return(0,s.Z)()?(0,r.jsx)(r.Fragment,{children:t?.()}):n??null}var i=n("1705"),a=n("8294"),c=n("1858");function l(e){let{params:t,config:n,code:s,language:l="js",codeTitle:d="",showLineNumbers:p=!1,formatCode:u=!0,linkText:h="Run in LiveCodes",style:f={},className:m=""}=e,g=(0,a.r)({appUrl:c.G,params:t,config:n});return(0,r.jsxs)("div",{style:{marginBottom:"30px",...f},className:m,children:[s&&(0,r.jsx)(o,{children:()=>(0,r.jsx)(i.Z,{language:l,title:d,showLineNumbers:p,children:u?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(s,l):s})}),(0,r.jsxs)("a",{href:g,target:"_blank",rel:"noreferrer",children:[h,(0,r.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,r.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,n){"use strict";n.d(t,{T:function(){return s},r:function(){return o}});var r=n(7728);async function s(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:r,loading:s="lazy",view:i}=t,a=r||"headless"===i,c=null,l=null;if("string"==typeof e)c=document.querySelector(e);else if(e instanceof HTMLElement)c=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!c){if(a)k(c=document.createElement("div")),document.body.appendChild(c);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(o(t)),p=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":s);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&d.searchParams.set("config","sdk");let h=t.params;"object"==typeof h&&Object.keys(h).length>0&&JSON.stringify(h).length<1800&&Object.keys(h).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(h[e])))});let f=!1,m="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!c)return;let t=c.dataset.height||c.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";c.style.height=e}"false"===c.dataset.defaultStyles||a||(c.style.backgroundColor||="#fff",c.style.border||="1px solid black",c.style.borderRadius||="8px",c.style.boxSizing||="border-box",c.style.padding||="0",c.style.width||="100%",c.style.height||=c.style.height||"300px",c.style.minHeight="200px",c.style.flexGrow="1",c.style.overflow||="hidden",c.style.resize||="vertical");let r="livecodes",o=c.querySelector(`iframe.${r}`),i=o||document.createElement("iframe");i.classList.add(r),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===s?"eager":"lazy"),a?k(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=c.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===p&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),l=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!l||l<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===p&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:n},p))}),i.onload=()=>{e(i)},i.src=d.href,o||c.appendChild(i)}),v=new Promise(e=>{addEventListener("message",function t(n){n.source===g.contentWindow&&n.origin===p&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>f?Promise.reject(m):new Promise(async e=>{v.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},p),await v,e()}),w=(e,t)=>new Promise(async(n,r)=>{if(f)return r(m);await y();let s=A();addEventListener("message",function t(o){if(o.source===g.contentWindow&&o.origin===p&&o.data?.type==="livecodes-api-response"&&o.data?.id===s&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?r(e.error):n(e)}}),g.contentWindow?.postMessage({method:e,id:s,args:t},p)}),b={},x=["load","ready","code","console","tests","destroy"],j=(e,t)=>{if(f)throw Error(m);return x.includes(e)?(w("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&w("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},C=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=C(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==p||!t||!b[t])return;let n=e.data?.payload;b[t]?.forEach(e=>{e(n)})});let E=()=>{Object.values(b).forEach(e=>{e.length=0}),g?.remove?.(),f=!0};function k(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===s&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(c))})},{rootMargin:"150px"}).observe(c);let A=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>w("run"),format:e=>w("format",[e]),getShareUrl:e=>w("getShareUrl",[e]),getConfig:e=>w("getConfig",[e]),setConfig:e=>w("setConfig",[e]),getCode:()=>w("getCode"),show:(e,t)=>w("show",[e,t]),runTests:()=>w("runTests"),onChange:e=>j("code",e),watch:j,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;rv.settled?w("destroy").then(E):f?Promise.reject(m):(E(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:s={},config:o={},headless:i,import:a,lite:c,view:l,...d}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let p=new URLSearchParams;Object.entries(d).forEach(t=>{let[n,r]=t;void 0!==r&&e.searchParams.set(n,String(r))});let u="headless"===t.view||i;if(c&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),l&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==l?o.view=l:e.searchParams.set("view",l)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),p.set("config","code/"+(0,r.compressToEncodedURIComponent)(JSON.stringify(o))));if(s&&"object"==typeof s&&Object.keys(s).length>0)try{p.set("params",(0,r.compressToEncodedURIComponent)(JSON.stringify(s)))}catch{Object.keys(s).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(s[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=p.toString(),e.href}},65:function(e,t,n){"use strict";n.d(t,{Z:function(){return a},a:function(){return i}});var r=n(7294);let s={},o=r.createContext(s);function i(e){let t=r.useContext(o);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/316a85b5.a405c0dc.js b/docs/assets/js/316a85b5.a405c0dc.js new file mode 100644 index 0000000..c21518f --- /dev/null +++ b/docs/assets/js/316a85b5.a405c0dc.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5345"],{6186:function(e,n,s){s.r(n),s.d(n,{default:()=>h,frontMatter:()=>i,metadata:()=>d,assets:()=>o,toc:()=>t,contentTitle:()=>c});var d=JSON.parse('{"id":"api/internal/interfaces/API","title":"Interface: API","description":"Extended by","source":"@site/docs/api/internal/interfaces/API.md","sourceDirName":"api/internal/interfaces","slug":"/api/internal/interfaces/API","permalink":"/docs/api/internal/interfaces/API","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/interfaces/API.md","tags":[],"version":"current","frontMatter":{}}'),r=s("5893"),l=s("65");let i={},c="Interface: API",o={},t=[{value:"Extended by",id:"extended-by",level:2},{value:"Properties",id:"properties",level:2},{value:"destroy()",id:"destroy",level:3},{value:"Returns",id:"returns",level:4},{value:"Example",id:"example",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"exec()",id:"exec",level:3},{value:"Parameters",id:"parameters",level:4},{value:"Returns",id:"returns-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"format()",id:"format",level:3},{value:"Parameters",id:"parameters-1",level:4},{value:"Returns",id:"returns-2",level:4},{value:"Example",id:"example-1",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"getCode()",id:"getcode",level:3},{value:"Returns",id:"returns-3",level:4},{value:"Example",id:"example-2",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"getConfig()",id:"getconfig",level:3},{value:"Parameters",id:"parameters-2",level:4},{value:"Returns",id:"returns-4",level:4},{value:"Example",id:"example-3",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"getShareUrl()",id:"getshareurl",level:3},{value:"Parameters",id:"parameters-3",level:4},{value:"Returns",id:"returns-5",level:4},{value:"Example",id:"example-4",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"onChange()",id:"onchange",level:3},{value:"Parameters",id:"parameters-4",level:4},{value:"Returns",id:"returns-6",level:4},{value:"remove()",id:"remove",level:5},{value:"Returns",id:"returns-7",level:6},{value:"Deprecated",id:"deprecated",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"run()",id:"run",level:3},{value:"Returns",id:"returns-8",level:4},{value:"Example",id:"example-5",level:4},{value:"Defined in",id:"defined-in-7",level:4},{value:"runTests()",id:"runtests",level:3},{value:"Returns",id:"returns-9",level:4},{value:"results",id:"results",level:5},{value:"Example",id:"example-6",level:4},{value:"Defined in",id:"defined-in-8",level:4},{value:"setConfig()",id:"setconfig",level:3},{value:"Parameters",id:"parameters-5",level:4},{value:"Returns",id:"returns-10",level:4},{value:"Example",id:"example-7",level:4},{value:"Defined in",id:"defined-in-9",level:4},{value:"show()",id:"show",level:3},{value:"Parameters",id:"parameters-6",level:4},{value:"Returns",id:"returns-11",level:4},{value:"Example",id:"example-8",level:4},{value:"Defined in",id:"defined-in-10",level:4},{value:"watch",id:"watch",level:3},{value:"Example",id:"example-9",level:4},{value:"Defined in",id:"defined-in-11",level:4}];function a(e){let n={a:"a",blockquote:"blockquote",code:"code",del:"del",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"interface-api",children:"Interface: API"})}),"\n",(0,r.jsx)(n.h2,{id:"extended-by",children:"Extended by"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Playground",children:(0,r.jsx)(n.code,{children:"Playground"})})}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,r.jsx)(n.h3,{id:"destroy",children:"destroy()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"destroy"}),": () => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Destroys the playground instance, and removes event listeners."}),"\n",(0,r.jsx)(n.p,{children:"Further call to any SDK methods throws an error."}),"\n",(0,r.jsx)(n.h4,{id:"returns",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"example",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n await playground.destroy();\n // playground destroyed\n // any further SDK call throws an error\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"defined-in",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L211",children:"models.ts:211"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"exec",children:"exec()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"exec"}),": (",(0,r.jsx)(n.code,{children:"command"}),", ...",(0,r.jsx)(n.code,{children:"args"}),") => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"object"})," | ",(0,r.jsx)(n.code,{children:"object"}),">"]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Executes custom commands, including: ",(0,r.jsx)(n.code,{children:'"setBroadcastToken"'})," and ",(0,r.jsx)(n.code,{children:'"showVersion"'}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["See ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#exec",children:"docs"})," for details."]}),"\n",(0,r.jsx)(n.h4,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"command"}),": ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/APICommands",children:(0,r.jsx)(n.code,{children:"APICommands"})})]}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ...",(0,r.jsx)(n.strong,{children:"args"}),": ",(0,r.jsx)(n.code,{children:"any"}),"[]"]}),"\n",(0,r.jsx)(n.h4,{id:"returns-1",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"object"})," | ",(0,r.jsx)(n.code,{children:"object"}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-1",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L194",children:"models.ts:194"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"format",children:"format()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"format"}),": (",(0,r.jsx)(n.code,{children:"allEditors"}),"?) => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Formats the code."}),"\n",(0,r.jsxs)(n.p,{children:["By default, the code in all editors (markup, style and script) is formatted.\nTo format only the active editor, the value ",(0,r.jsx)(n.code,{children:"false"})," should be passed as an argument."]}),"\n",(0,r.jsx)(n.h4,{id:"parameters-1",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"allEditors?"}),": ",(0,r.jsx)(n.code,{children:"boolean"})]}),"\n",(0,r.jsx)(n.h4,{id:"returns-2",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"example-1",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n await playground.format();\n // code in editors is formatted\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-2",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L31",children:"models.ts:31"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"getcode",children:"getCode()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"getCode"}),": () => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Code",children:(0,r.jsx)(n.code,{children:"Code"})}),">"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Gets the playground code (including source code, source language and compiled code) for each editor (markup, style, script), in addition to result page HTML."}),"\n",(0,r.jsxs)(n.p,{children:["See ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/api/interfaces/Code",children:"Code"})," for the structure of the returned object."]}),"\n",(0,r.jsx)(n.h4,{id:"returns-3",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Code",children:(0,r.jsx)(n.code,{children:"Code"})}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"example-2",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n const code = await playground.getCode();\n\n // source code, language and compiled code for the script editor\n const { content, language, compiled } = code.script;\n\n // result page HTML\n const result = code.result;\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-3",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L105",children:"models.ts:105"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"getconfig",children:"getConfig()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"getConfig"}),": (",(0,r.jsx)(n.code,{children:"contentOnly"}),"?) => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,r.jsx)(n.code,{children:"Config"})}),">"]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Gets a ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/configuration/configuration-object",children:"configuration object"})," representing the playground state."]}),"\n",(0,r.jsxs)(n.p,{children:["This can be used to restore state if passed as an ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#embed-options",children:"EmbedOptions"})," property when ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts/#createplayground",children:"creating playgrounds"}),",\nor can be manipulated and loaded in run-time using ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#setconfig",children:(0,r.jsx)(n.code,{children:"setConfig"})})," method."]}),"\n",(0,r.jsx)(n.h4,{id:"parameters-2",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"contentOnly?"}),": ",(0,r.jsx)(n.code,{children:"boolean"})]}),"\n",(0,r.jsx)(n.h4,{id:"returns-4",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,r.jsx)(n.code,{children:"Config"})}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"example-3",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n const config = await playground.getConfig();\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-4",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L64",children:"models.ts:64"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"getshareurl",children:"getShareUrl()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"getShareUrl"}),": (",(0,r.jsx)(n.code,{children:"shortUrl"}),"?) => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"string"}),">"]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Gets a ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/features/share",children:"share url"})," for the current project."]}),"\n",(0,r.jsxs)(n.p,{children:["By default, the url has a long query string representing the compressed encoded config object.\nIf the argument ",(0,r.jsx)(n.code,{children:"shortUrl"})," was set to ",(0,r.jsx)(n.code,{children:"true"}),", a short url is generated."]}),"\n",(0,r.jsx)(n.h4,{id:"parameters-3",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"shortUrl?"}),": ",(0,r.jsx)(n.code,{children:"boolean"})]}),"\n",(0,r.jsx)(n.h4,{id:"returns-5",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"string"}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"example-4",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n const longUrl = await playground.getShareUrl();\n const shortUrl = await playground.getShareUrl(true);\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-5",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L48",children:"models.ts:48"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"onchange",children:(0,r.jsx)(n.del,{children:"onChange()"})}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"onChange"}),": (",(0,r.jsx)(n.code,{children:"fn"}),") => ",(0,r.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Runs a callback function when code changes."}),"\n",(0,r.jsx)(n.h4,{id:"parameters-4",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"fn"})]}),"\n",(0,r.jsx)(n.h4,{id:"returns-6",children:"Returns"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"object"})}),"\n",(0,r.jsx)(n.h5,{id:"remove",children:(0,r.jsx)(n.del,{children:"remove()"})}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"remove"}),": () => ",(0,r.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,r.jsx)(n.h6,{id:"returns-7",children:"Returns"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"void"})}),"\n",(0,r.jsx)(n.h4,{id:"deprecated",children:"Deprecated"}),"\n",(0,r.jsxs)(n.p,{children:["Use ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#watch",children:(0,r.jsx)(n.code,{children:"watch"})})," method instead."]}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-6",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L142",children:"models.ts:142"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"run",children:"run()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"run"}),": () => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Runs the ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/features/result",children:"result page"})," (after any required compilation for code)."]}),"\n",(0,r.jsx)(n.h4,{id:"returns-8",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"example-5",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n await playground.run();\n // new result page is displayed\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-7",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L14",children:"models.ts:14"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"runtests",children:"runTests()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"runTests"}),": () => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"object"}),">"]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Runs project ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/features/tests",children:"tests"})," (if present) and gets test results."]}),"\n",(0,r.jsx)(n.h4,{id:"returns-9",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"object"}),">"]}),"\n",(0,r.jsx)(n.h5,{id:"results",children:"results"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"results"}),": ",(0,r.jsx)(n.a,{href:"/docs/api/internal/interfaces/TestResult",children:(0,r.jsx)(n.code,{children:"TestResult"})}),"[]"]}),"\n"]}),"\n",(0,r.jsx)(n.h4,{id:"example-6",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n const { results } = await playground.runTests();\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-8",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L135",children:"models.ts:135"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"setconfig",children:"setConfig()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"setConfig"}),": (",(0,r.jsx)(n.code,{children:"config"}),") => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,r.jsx)(n.code,{children:"Config"})}),">"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Loads a new project using the passed configuration object."}),"\n",(0,r.jsx)(n.h4,{id:"parameters-5",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"config"}),": ",(0,r.jsx)(n.code,{children:"Partial"}),"<",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,r.jsx)(n.code,{children:"Config"})}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"returns-10",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,r.jsx)(n.code,{children:"Config"})}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"example-7",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then(async (playground) => {\n const config = {\n markup: {\n language: "html",\n content: "Hello World!",\n },\n };\n const newConfig = await playground.setConfig(config);\n // new project loaded\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-9",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L84",children:"models.ts:84"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"show",children:"show()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"show"}),": (",(0,r.jsx)(n.code,{children:"panel"}),", ",(0,r.jsx)(n.code,{children:"options"}),"?) => ",(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Shows the selected panel."}),"\n",(0,r.jsxs)(n.p,{children:["See ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#show",children:"docs"})," for details."]}),"\n",(0,r.jsx)(n.h4,{id:"parameters-6",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"panel"}),": ",(0,r.jsx)(n.code,{children:'"result"'})," | ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/EditorId",children:(0,r.jsx)(n.code,{children:"EditorId"})})," | ",(0,r.jsx)(n.code,{children:'"console"'})," | ",(0,r.jsx)(n.code,{children:'"compiled"'})," | ",(0,r.jsx)(n.code,{children:'"tests"'})," | ",(0,r.jsx)(n.code,{children:'"editor"'})," | ",(0,r.jsx)(n.code,{children:'"toggle-result"'})]}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"options?"})]}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"options.column?"}),": ",(0,r.jsx)(n.code,{children:"number"})]}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"options.full?"}),": ",(0,r.jsx)(n.code,{children:"boolean"})]}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"options.line?"}),": ",(0,r.jsx)(n.code,{children:"number"})]}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"options.zoom?"}),": ",(0,r.jsx)(n.code,{children:"1"})," | ",(0,r.jsx)(n.code,{children:"0.5"})," | ",(0,r.jsx)(n.code,{children:"0.25"})]}),"\n",(0,r.jsx)(n.h4,{id:"returns-11",children:"Returns"}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"Promise"}),"<",(0,r.jsx)(n.code,{children:"void"}),">"]}),"\n",(0,r.jsx)(n.h4,{id:"example-8",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'await playground.show("style");\nawait playground.show("toggle-result");\nawait playground.show("result", { full: true });\nawait playground.show("script");\nawait playground.show("result", { zoom: 0.5 });\nawait playground.show("console", { full: true });\n'})}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-10",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L119",children:"models.ts:119"})}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsx)(n.h3,{id:"watch",children:"watch"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"watch"}),": ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchLoad",children:(0,r.jsx)(n.code,{children:"WatchLoad"})})," & ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchReady",children:(0,r.jsx)(n.code,{children:"WatchReady"})})," & ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchCode",children:(0,r.jsx)(n.code,{children:"WatchCode"})})," & ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchConsole",children:(0,r.jsx)(n.code,{children:"WatchConsole"})})," & ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchTests",children:(0,r.jsx)(n.code,{children:"WatchTests"})})," & ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchDestroy",children:(0,r.jsx)(n.code,{children:"WatchDestroy"})})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Allows to watch for various playground events.\nIt takes 2 arguments: event name and a callback function that will be called on every event."}),"\n",(0,r.jsxs)(n.p,{children:["event name can be one of: ",(0,r.jsx)(n.code,{children:'"load" | "ready" | "code" | "console" | "tests" | "destroy"'})]}),"\n",(0,r.jsx)(n.p,{children:"In some events, the callback function will be called with an object that supplies relevant data to the callback function (e.g. code, console output, test results)."}),"\n",(0,r.jsxs)(n.p,{children:["The watch method returns an object with a single method (",(0,r.jsx)(n.code,{children:"remove"}),"), which when called will remove the callback from watching further events."]}),"\n",(0,r.jsxs)(n.p,{children:["See ",(0,r.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#watch",children:"docs"})," for details."]}),"\n",(0,r.jsx)(n.h4,{id:"example-9",children:"Example"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:'import { createPlayground } from "livecodes";\n\ncreatePlayground("#container").then((playground) => {\n const codeWatcher = playground.watch("code", ({ code, config }) => {\n // this will run on every code change\n console.log("code:", code);\n console.log("config:", config);\n });\n\n const consoleWatcher = playground.watch("console", ({ method, args }) => {\n // this will run on every console output\n console[method](...args);\n });\n\n const testsWatcher = playground.watch("tests", ({ results }) => {\n // this will run when tests run\n results.forEach((testResult) => {\n console.log("status:", testResult.status); // "pass", "fail" or "skip"\n console.log(testResult.errors); // array of errors as strings\n });\n });\n\n // then later\n codeWatcher.remove();\n consoleWatcher.remove();\n testsWatcher.remove();\n // events are no longer watched\n});\n'})}),"\n",(0,r.jsx)(n.h4,{id:"defined-in-11",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L187",children:"models.ts:187"})})]})}function h(e={}){let{wrapper:n}={...(0,l.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},65:function(e,n,s){s.d(n,{Z:function(){return c},a:function(){return i}});var d=s(7294);let r={},l=d.createContext(r);function i(e){let n=d.useContext(l);return d.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),d.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/3213d97d.22ef9d00.js b/docs/assets/js/3213d97d.22ef9d00.js new file mode 100644 index 0000000..80079c0 --- /dev/null +++ b/docs/assets/js/3213d97d.22ef9d00.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6763"],{3201:function(e,t,s){s.r(t),s.d(t,{default:()=>p,frontMatter:()=>a,metadata:()=>o,assets:()=>c,toc:()=>d,contentTitle:()=>l});var o=JSON.parse('{"id":"examples/display-modes/full","title":"full","description":"","source":"@site/docs/examples/display-modes/full.mdx","sourceDirName":"examples/display-modes","slug":"/examples/display-modes/full","permalink":"/docs/examples/display-modes/full","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/examples/display-modes/full.mdx","tags":[],"version":"current","frontMatter":{"title":"full"},"sidebar":"examplesSidebar","previous":{"title":"Display Modes","permalink":"/docs/examples/display-modes/"},"next":{"title":"editor","permalink":"/docs/examples/display-modes/editor"}}'),n=s("5893"),r=s("65"),i=s("3365");let a={title:"full"},l="Display Mode: full",c={},d=[];function u(e){let t={h1:"h1",header:"header",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"display-mode-full",children:"Display Mode: full"})}),"\n","\n",(0,n.jsx)(i.Z,{template:"react"})]})}function p(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},3365:function(e,t,s){s.d(t,{Z:()=>g});var o=s("5893"),n=s("4200"),r=s("7294"),i=s("8294");function a(e){let t=(0,r.useRef)(null),[s,n]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[c,d]=(0,r.useState)(e.height),[u,p]=(0,r.useState)(),[m,f]=(0,r.useState)(JSON.stringify(e.config||"")),[h,g]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:o,height:r,sdkReady:a,config:c,...y}=e;if(n(s||""),l(o||{}),d(r),u&&h===JSON.stringify(y)){if(m===JSON.stringify(c))return;f(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else g(JSON.stringify(y)),u?.destroy(),(0,i.T)(t.current,{config:c,...y}).then(e=>{p(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{u?.destroy()},[]),(0,o.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),u=s("7645"),p=s("8168"),m=s("8228"),f=s("5050");function h(e){let[t,s]=(0,r.useState)(e.js),[n,i]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[h,g]=(0,r.useState)(e.vue),[y,v]=(0,r.useState)(e.svelte),w="3.7rem",[b,x]=(0,r.useState)(!0),[j,S]=(0,r.useState)(w),C=(0,r.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},255)};return(0,r.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(n,"ts")),l(e(a,"jsx")),g(e(h,"html")),v(e(y,"html"))}},[]),(0,o.jsxs)("details",{className:`alert alert--info ${f.Z.details} ${m.Z.details}`,"data-collapsed":b,style:{height:b?w:j,overflow:"hidden",willChange:"height",transition:`height ${b?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,o.jsx)("summary",{onClick:()=>{x(!b),E()},children:"show code"}),(0,o.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,o.jsx)("div",{className:f.Z.collapsibleContent,children:(0,o.jsxs)(p.Z,{groupId:"sdk-code",children:[(0,o.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"js",children:t})}),(0,o.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"ts",children:n})}),(0,o.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"jsx",children:a})}),(0,o.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"html",children:h})}),(0,o.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"html",children:y})})]})})})]})}function g(e){let{className:t,style:s,showCode:r,height:i,...c}=e,{colorMode:d}=(0,n.I)(),u=e=>JSON.stringify(e,null,2),p=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),f=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (); +} + +`.trimStart(),g=` + + + +`,y=` + + +
+ +`.trimStart();return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,o.jsx)(h,{js:p,ts:m,react:f,vue:g,svelte:y})]})}},8294:function(e,t,s){s.d(t,{T:function(){return n},r:function(){return r}});var o=s(7728);async function n(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:o,loading:n="lazy",view:i}=t,a=o||"headless"===i,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":n);let p=globalThis.process;d.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let m=t.params;"object"==typeof m&&Object.keys(m).length>0&&JSON.stringify(m).length<1800&&Object.keys(m).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(m[e])))});let f=!1,h="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let o="livecodes",r=l.querySelector(`iframe.${o}`),i=r||document.createElement("iframe");i.classList.add(o),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===n?"eager":"lazy"),a?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),i.onload=()=>{e(i)},i.src=d.href,r||l.appendChild(i)}),y=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>f?Promise.reject(h):new Promise(async e=>{y.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},u),await y,e()}),w=(e,t)=>new Promise(async(s,o)=>{if(f)return o(h);await v();let n=P();addEventListener("message",function t(r){if(r.source===g.contentWindow&&r.origin===u&&r.data?.type==="livecodes-api-response"&&r.data?.id===n&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?o(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:n,args:t},u)}),b={},x=["load","ready","code","console","tests","destroy"],j=(e,t)=>{if(f)throw Error(h);return x.includes(e)?(w("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&w("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==u||!t||!b[t])return;let s=e.data?.payload;b[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(b).forEach(e=>{e.length=0}),g?.remove?.(),f=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>w("run"),format:e=>w("format",[e]),getShareUrl:e=>w("getShareUrl",[e]),getConfig:e=>w("getConfig",[e]),setConfig:e=>w("setConfig",[e]),getCode:()=>w("getCode"),show:(e,t)=>w("show",[e,t]),runTests:()=>w("runTests"),onChange:e=>j("code",e),watch:j,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),o=1;oy.settled?w("destroy").then(C):f?Promise.reject(h):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:n={},config:r={},headless:i,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,o]=t;void 0!==o&&e.searchParams.set(s,String(o))});let p="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),u.set("config","code/"+(0,o.compressToEncodedURIComponent)(JSON.stringify(r))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{u.set("params",(0,o.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(n[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),p&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return i}});var o=s(7294);let n={},r=o.createContext(n);function i(e){let t=o.useContext(r);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/3362462b.93a01213.js b/docs/assets/js/3362462b.93a01213.js new file mode 100644 index 0000000..dfc3728 --- /dev/null +++ b/docs/assets/js/3362462b.93a01213.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1939"],{8249:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>c,metadata:()=>a,assets:()=>o,toc:()=>l,contentTitle:()=>i});var a=JSON.parse('{"id":"languages/javascript","title":"JavaScript","description":"TODO...","source":"@site/docs/languages/javascript.mdx","sourceDirName":"languages","slug":"/languages/javascript","permalink":"/docs/languages/javascript","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/javascript.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Java","permalink":"/docs/languages/java"},"next":{"title":"Jinja","permalink":"/docs/languages/jinja"}}'),r=n("5893"),s=n("65");let c={},i="JavaScript",o={},l=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"javascript",children:"JavaScript"})}),"\n",(0,r.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},65:function(e,t,n){n.d(t,{Z:function(){return i},a:function(){return c}});var a=n(7294);let r={},s=a.createContext(r);function c(e){let t=a.useContext(s);return a.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),a.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/346aed81.44e97499.js b/docs/assets/js/346aed81.44e97499.js new file mode 100644 index 0000000..d8c5075 --- /dev/null +++ b/docs/assets/js/346aed81.44e97499.js @@ -0,0 +1 @@ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6111"],{2982:function(e,t,s){"use strict";s.r(t),s.d(t,{default:()=>p,frontMatter:()=>a,metadata:()=>r,assets:()=>l,toc:()=>d,contentTitle:()=>c});var r=JSON.parse('{"id":"features/broadcast","title":"Broadcast","description":"Overview","source":"@site/docs/features/broadcast.mdx","sourceDirName":"features","slug":"/features/broadcast","permalink":"/docs/features/broadcast","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/broadcast.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Sync","permalink":"/docs/features/sync"},"next":{"title":"Backup / Restore","permalink":"/docs/features/backup-restore"}}'),n=s("5893"),o=s("65"),i=s("8500");let a={},c="Broadcast",l={},d=[{value:"Overview",id:"overview",level:2},{value:"Technical Details",id:"technical-details",level:2}];function h(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"broadcast",children:"Broadcast"})}),"\n",(0,n.jsx)(t.h2,{id:"overview",children:"Overview"}),"\n",(0,n.jsxs)(t.p,{children:["LiveCodes Broadcast allows sending the ",(0,n.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," (and optionally source & compiled code and project configuration) to custom API. This can be used to live-view result page updates on different browsers/devices in real-time or broadcast live-coding sessions."]}),"\n",(0,n.jsx)(t.admonition,{type:"note",children:(0,n.jsx)(t.p,{children:"Broadcast can only be performed from the full app, and not from embedded playgrounds."})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"Broadcast"})," screen can be accessed from the Broadcast icon in the ",(0,n.jsx)(t.a,{href:"/docs/features/tools-pane",children:"tools pane"})," (below the result page), or from the Project menu \u2192 Broadcast."]}),"\n","\n",(0,n.jsx)(i.Z,{params:{screen:"broadcast"},linkText:"direct link"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Broadcast UI",src:s(9687).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)(t.p,{children:"On connecting to the server, the channel URL returned by the server is displayed. The channel URL can be shared to different clients (browsers on same or different devices) to view result page or code updates in real-time."}),"\n",(0,n.jsxs)(t.p,{children:["If the option ",(0,n.jsx)(t.code,{children:"Include source code"})," is enabled, the source and compiled code together with the current project configuration are also posted to the server with each update."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Broadcast UI - broadcasting",src:s(8421).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)(t.p,{children:"The Broadcast icon (in tools pane), shows the broadcast status. Clicking the icon, opens the broadcast UI, where the channel URL is displayed and the broadcast can be stopped."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Broadcast icon - broadcasting",src:s(746).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsxs)(t.admonition,{title:"Server",type:"info",children:[(0,n.jsxs)(t.p,{children:["An open-source example implementation of an API server is available on: ",(0,n.jsx)(t.a,{href:"https://github.com/live-codes/broadcast",children:"live-codes/broadcast"}),"."]}),(0,n.jsxs)(t.p,{children:["It is a ",(0,n.jsx)(t.a,{href:"https://github.com/live-codes/broadcast/blob/main/index.js",children:"simple implementation"}),", which you can use or extend. It makes use of LiveCodes ",(0,n.jsx)(t.a,{href:"/docs/features/embeds",children:"Embeds"})," and ",(0,n.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," for code broadcasting."]}),(0,n.jsxs)(t.p,{children:["A demo, free-to-test, instance is hosted on:\n",(0,n.jsx)(t.a,{href:"https://livecodes-broadcast.onrender.com/",children:"https://livecodes-broadcast.onrender.com/"})," (low resources - sleeps after 15 minutes of inactivity)"]}),(0,n.jsx)(t.p,{children:"You can use one of these links to self-host it:"}),(0,n.jsx)("a",{href:"https://render.com/deploy?repo=https://github.com/live-codes/broadcast",children:(0,n.jsx)("img",{src:"https://render.com/images/deploy-to-render-button.svg",alt:"Deploy to Render",width:"150"})}),(0,n.jsx)(t.p,{children:"\xa0\xa0\xa0"}),(0,n.jsx)("a",{href:"https://heroku.com/deploy?template=https://github.com/live-codes/broadcast/tree/main",children:(0,n.jsx)("img",{src:"https://www.herokucdn.com/deploy/button.svg",alt:"Deploy to Heroku",width:"150"})})]}),"\n",(0,n.jsx)(t.admonition,{title:"Hosted API",type:"tip",children:(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.a,{href:"/docs/sponsor",children:"LiveCodes sponsors"})," (bronze sponsors and above) get access to a hosted (always-on) API, which they can use without having to manage their own server."]})}),"\n",(0,n.jsx)(t.p,{children:"These are screenshots for the live-updated result page and code:"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Broadcasting result",src:s(9564).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Broadcasting code",src:s(5855).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)(t.h2,{id:"technical-details",children:"Technical Details"}),"\n",(0,n.jsxs)(t.p,{children:["When starting a broadcast, the app sends a ",(0,n.jsx)(t.code,{children:"POST"})," request to the specified server with a body that has the following properties:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"result"}),": a string with the result page html."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"data"})," (Only if ",(0,n.jsx)(t.code,{children:"Include source code"})," option is enabled): an object containing source and compiled code together with the current project configuration."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"userToken"})," (Optional): Can be used by the server to authorize users who can broadcast (see below how to set it)."]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"When the server successfully creates a channel, it should respond by sending a JSON object with the following properties:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"channel"}),": a string representing the channel Id."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"channelUrl"}),": a string with the URL of the channel that can be shared to the clients who want to connect to it."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"channelToken"}),": a string representing a secret token for this channel, to prevent others from sending to the same channel. This is only sent once (in response to the request that created the channel)."]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"channel"})," and ",(0,n.jsx)(t.code,{children:"channelToken"})," are remembered by the app, and are sent in subsequent requests for the same channel (with every result page update). They are deleted when stopping broadcast or when the app reloads."]}),"\n",(0,n.jsxs)(t.admonition,{type:"note",children:[(0,n.jsxs)(t.p,{children:["To set a ",(0,n.jsx)(t.code,{children:"userToken"})," for authorization with a broadcast server, run the following in the browser console:"]}),(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"await livecodes.exec('setBroadcastToken', 'my-token');\n"})}),(0,n.jsxs)(t.p,{children:["The supplied value (in this case ",(0,n.jsx)(t.code,{children:"my-token"}),") will be posted to the server with every update as the value for the property ",(0,n.jsx)(t.code,{children:"userToken"}),"."]}),(0,n.jsx)(t.p,{children:"This value is saved for the current user across app reloads."})]})]})}function p(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}},9687:function(e,t,s){"use strict";s.d(t,{Z:function(){return r}});let r=s.p+"assets/images/broadcast-1-c4cbf92ea7dd67ebf5f2bde4a69260e7.jpg"},8421:function(e,t,s){"use strict";s.d(t,{Z:function(){return r}});let r=s.p+"assets/images/broadcast-2-63b02f7fb51c653fe0282c80fad19f34.jpg"},746:function(e,t,s){"use strict";s.d(t,{Z:function(){return r}});let r=s.p+"assets/images/broadcast-3-5307656200f0ffc75d10763429e470e8.jpg"},9564:function(e,t,s){"use strict";s.d(t,{Z:function(){return r}});let r=s.p+"assets/images/broadcast-4-1b7f8cf8a70b6eec75eb706db2adfe5d.jpg"},5855:function(e,t,s){"use strict";s.d(t,{Z:function(){return r}});let r=s.p+"assets/images/broadcast-5-48f5b56e3638aac1b9d5774aacb9037c.jpg"},7728:function(e,t,s){e=s.nmd(e);var r=function(){var e=String.fromCharCode,t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",s="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",r={};function n(e,t){if(!r[e]){r[e]={};for(var s=0;s>>8,s[2*r+1]=i%256}return s},decompressFromUint8Array:function(t){if(null==t)return o.decompress(t);for(var s=Array(t.length/2),r=0,n=s.length;rd.charCodeAt(0)){for(r=0;r>=1}else{for(r=0,n=1;r>=1}0==--h&&(h=Math.pow(2,u),u++),delete a[d]}else for(r=0,n=i[d];r>=1;0==--h&&(h=Math.pow(2,u),u++),i[l]=p++,d=String(c)}if(""!==d){if(Object.prototype.hasOwnProperty.call(a,d)){if(256>d.charCodeAt(0)){for(r=0;r>=1}else{for(r=0,n=1;r>=1}0==--h&&(h=Math.pow(2,u),u++),delete a[d]}else for(r=0,n=i[d];r>=1;0==--h&&(h=Math.pow(2,u),u++)}for(r=0,n=2;r>=1;for(;;){if(m<<=1,g==t-1){f.push(s(m));break}g++}return f.join("")},decompress:function(e){return null==e?"":""==e?null:o._decompress(e.length,32768,function(t){return e.charCodeAt(t)})},_decompress:function(t,s,r){var n,o,i,a,c,l,d,h=[],p=4,u=4,f=3,m="",g=[],v={val:r(0),position:s,index:1};for(n=0;n<3;n+=1)h[n]=n;for(i=0,c=4,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=s,v.val=r(v.index++)),i|=(a>0?1:0)*l,l<<=1;switch(i){case 0:for(i=0,c=256,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=s,v.val=r(v.index++)),i|=(a>0?1:0)*l,l<<=1;d=e(i);break;case 1:for(i=0,c=65536,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=s,v.val=r(v.index++)),i|=(a>0?1:0)*l,l<<=1;d=e(i);break;case 2:return""}for(h[3]=d,o=d,g.push(d);;){if(v.index>t)return"";for(i=0,c=Math.pow(2,f),l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=s,v.val=r(v.index++)),i|=(a>0?1:0)*l,l<<=1;switch(d=i){case 0:for(i=0,c=256,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=s,v.val=r(v.index++)),i|=(a>0?1:0)*l,l<<=1;h[u++]=e(i),d=u-1,p--;break;case 1:for(i=0,c=65536,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=s,v.val=r(v.index++)),i|=(a>0?1:0)*l,l<<=1;h[u++]=e(i),d=u-1,p--;break;case 2:return g.join("")}if(0==p&&(p=Math.pow(2,f),f++),h[d])m=h[d];else{if(d!==u)return null;m=o+o.charAt(0)}g.push(m),h[u++]=o+m.charAt(0),p--,o=m,0==p&&(p=Math.pow(2,f),f++)}}};return o}();"function"==typeof define&&define.amd?define(function(){return r}):null!=e&&(e.exports=r)},8500:function(e,t,s){"use strict";s.d(t,{Z:()=>l});var r=s("5893");s("7294");var n=s("6735");function o(e){let{children:t,fallback:s}=e;return(0,n.Z)()?(0,r.jsx)(r.Fragment,{children:t?.()}):s??null}var i=s("1705"),a=s("8294"),c=s("1858");function l(e){let{params:t,config:s,code:n,language:l="js",codeTitle:d="",showLineNumbers:h=!1,formatCode:p=!0,linkText:u="Run in LiveCodes",style:f={},className:m=""}=e,g=(0,a.r)({appUrl:c.G,params:t,config:s});return(0,r.jsxs)("div",{style:{marginBottom:"30px",...f},className:m,children:[n&&(0,r.jsx)(o,{children:()=>(0,r.jsx)(i.Z,{language:l,title:d,showLineNumbers:h,children:p?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(n,l):n})}),(0,r.jsxs)("a",{href:g,target:"_blank",rel:"noreferrer",children:[u,(0,r.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,r.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,s){"use strict";s.d(t,{T:function(){return n},r:function(){return o}});var r=s(7728);async function n(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:r,loading:n="lazy",view:i}=t,a=r||"headless"===i,c=null,l=null;if("string"==typeof e)c=document.querySelector(e);else if(e instanceof HTMLElement)c=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!c){if(a)P(c=document.createElement("div")),document.body.appendChild(c);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(o(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":n);let p=globalThis.process;d.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(u[e])))});let f=!1,m="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!c)return;let t=c.dataset.height||c.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";c.style.height=e}"false"===c.dataset.defaultStyles||a||(c.style.backgroundColor||="#fff",c.style.border||="1px solid black",c.style.borderRadius||="8px",c.style.boxSizing||="border-box",c.style.padding||="0",c.style.width||="100%",c.style.height||=c.style.height||"300px",c.style.minHeight="200px",c.style.flexGrow="1",c.style.overflow||="hidden",c.style.resize||="vertical");let r="livecodes",o=c.querySelector(`iframe.${r}`),i=o||document.createElement("iframe");i.classList.add(r),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===n?"eager":"lazy"),a?P(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=c.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),l=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!l||l<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),i.onload=()=>{e(i)},i.src=d.href,o||c.appendChild(i)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),b=()=>f?Promise.reject(m):new Promise(async e=>{v.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),y=(e,t)=>new Promise(async(s,r)=>{if(f)return r(m);await b();let n=T();addEventListener("message",function t(o){if(o.source===g.contentWindow&&o.origin===h&&o.data?.type==="livecodes-api-response"&&o.data?.id===n&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?r(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:n,args:t},h)}),w={},j=["load","ready","code","console","tests","destroy"],x=(e,t)=>{if(f)throw Error(m);return j.includes(e)?(y("watch",[e]),w[e]||(w[e]=[]),w[e]?.push(t),{remove:()=>{w[e]=w[e]?.filter(e=>e!==t),w[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},k=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=k(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==h||!t||!w[t])return;let s=e.data?.payload;w[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(w).forEach(e=>{e.length=0}),g?.remove?.(),f=!0};function P(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await b(),t.unobserve(c))})},{rootMargin:"150px"}).observe(c);let T=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>b(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,t)=>y("show",[e,t]),runTests:()=>y("runTests"),onChange:e=>x("code",e),watch:x,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),r=1;rv.settled?y("destroy").then(C):f?Promise.reject(m):(C(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:n={},config:o={},headless:i,import:a,lite:c,view:l,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,r]=t;void 0!==r&&e.searchParams.set(s,String(r))});let p="headless"===t.view||i;if(c&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),l&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==l?o.view=l:e.searchParams.set("view",l)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),h.set("config","code/"+(0,r.compressToEncodedURIComponent)(JSON.stringify(o))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{h.set("params",(0,r.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(n[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),p&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){"use strict";s.d(t,{Z:function(){return a},a:function(){return i}});var r=s(7294);let n={},o=r.createContext(n);function i(e){let t=r.useContext(o);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/3510475c.2d976459.js b/docs/assets/js/3510475c.2d976459.js new file mode 100644 index 0000000..3cf56cd --- /dev/null +++ b/docs/assets/js/3510475c.2d976459.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6122"],{9580:function(e,s,r){r.r(s),r.d(s,{default:()=>l,frontMatter:()=>i,metadata:()=>t,assets:()=>c,toc:()=>d,contentTitle:()=>a});var t=JSON.parse('{"id":"features/share","title":"Share","description":"It is easy to share LiveCodes projects!","source":"@site/docs/features/share.mdx","sourceDirName":"features","slug":"/features/share","permalink":"/docs/features/share","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/share.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Export","permalink":"/docs/features/export"},"next":{"title":"Welcome Screen","permalink":"/docs/features/welcome"}}'),n=r("5893"),o=r("65");let i={},a="Share",c={},d=[{value:"Related",id:"related",level:2}];function h(e){let s={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.header,{children:(0,n.jsx)(s.h1,{id:"share",children:"Share"})}),"\n",(0,n.jsx)(s.p,{children:"It is easy to share LiveCodes projects!"}),"\n",(0,n.jsx)(s.p,{children:"A URL is generated to load the shared project. This URL can be copied or shared to different social media."}),"\n",(0,n.jsx)(s.p,{children:"The share screen can be accessed from the share icon at the top right or from the Project menu \u2192 Share."}),"\n",(0,n.jsx)(s.p,{children:(0,n.jsx)(s.img,{alt:"LiveCodes Share",src:r(8910).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsxs)(s.p,{children:["By default, the generated URL encodes the project configuration in a base-64-encoded compressed query string. This step is generated locally in the browser without sending the code to any server. However, depending on the size of the project, the URL can be very long. The length of the URL is indicated in the share screen. ",(0,n.jsx)(s.a,{href:"https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers",children:"Try not to use very long URLs"})," to ensure cross-browser compatibility."]}),"\n",(0,n.jsxs)(s.p,{children:["When requested by the user, short URLs can be generated. This requires sending the project configuration (",(0,n.jsx)(s.strong,{children:"including source code"}),") to a server that saves the code and provides a short Id which can be used to retrieve the project."]}),"\n",(0,n.jsx)(s.p,{children:(0,n.jsx)(s.img,{alt:"LiveCodes Share - short URL",src:r(6120).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)(s.admonition,{type:"caution",children:(0,n.jsxs)(s.p,{children:["Generating a short URL for sharing requires sending the project configuration (",(0,n.jsx)(s.strong,{children:"including source code"}),") to LiveCodes share service. ",(0,n.jsx)(s.strong,{children:"It cannot then be deleted"}),"."]})}),"\n",(0,n.jsxs)(s.admonition,{title:"Note",type:"info",children:[(0,n.jsxs)(s.p,{children:["The app hosted on ",(0,n.jsx)(s.a,{href:"https://livecodes.io",children:(0,n.jsx)(s.code,{children:"https://livecodes.io"})})," uses an API endpoint specifically provided to generate short URLs for LiveCodes share service. We will make every effort to keep that online and available for free use, so long as it is not abused. Please help keep it available by not abusing it and by ",(0,n.jsx)(s.a,{href:"/docs/sponsor",children:"sponsoring the project"}),"."]}),(0,n.jsxs)(s.p,{children:["Short URLs generated by LiveCodes share service are ",(0,n.jsx)(s.strong,{children:"private"})," by default and are not listed or indexed."]}),(0,n.jsxs)(s.p,{children:["However, ",(0,n.jsx)(s.a,{href:"/docs/features/self-hosting",children:(0,n.jsx)(s.strong,{children:"self-hosted apps"})})," use the free service ",(0,n.jsx)(s.a,{href:"https://dpaste.com/",children:"dpaste"})," for short URLs which are ",(0,n.jsx)(s.a,{href:"https://dpaste.com/help",children:(0,n.jsx)(s.strong,{children:"deleted after 365 days"})}),". You may want to use a ",(0,n.jsx)(s.a,{href:"/docs/advanced/services",children:"custom service"})," instead. LiveCodes ",(0,n.jsx)(s.a,{href:"/docs/sponsor",children:"sponsors"})," (Bronze sponsors and above) get access to managed custom services."]})]}),"\n",(0,n.jsx)(s.p,{children:"QR code can be generated for the share URL. This can then be scanned by any QR code scanner (e.g. mobile/tablet camera) to load the project on other devices without having to send the link. Please note that generating QR code also requires generating a short URL (code is sent to the share service - see above)."}),"\n",(0,n.jsx)(s.p,{children:(0,n.jsx)(s.img,{alt:"LiveCodes Share - QR code",src:r(6298).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)(s.h2,{id:"related",children:"Related"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/export",children:"Export"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/import",children:"Import"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/deploy",children:"Deploy"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/broadcast",children:"Broadcast"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/backup-restore",children:"Backup / Restore"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/sync",children:"Sync"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/permanent-url",children:"Permanent URL"})}),"\n"]})]})}function l(e={}){let{wrapper:s}={...(0,o.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}},8910:function(e,s,r){r.d(s,{Z:function(){return t}});let t=r.p+"assets/images/share-1-54eaa244303460e2ee83ea321f36999c.jpg"},6120:function(e,s,r){r.d(s,{Z:function(){return t}});let t=r.p+"assets/images/share-2-2d193cbc2368a1e78e6890a0e647b2be.jpg"},6298:function(e,s,r){r.d(s,{Z:function(){return t}});let t=r.p+"assets/images/share-3-6f99db0f4ace4e10f950b8cc1df50ff0.jpg"},65:function(e,s,r){r.d(s,{Z:function(){return a},a:function(){return i}});var t=r(7294);let n={},o=t.createContext(n);function i(e){let s=t.useContext(o);return t.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/3595c30f.810cdf38.js b/docs/assets/js/3595c30f.810cdf38.js new file mode 100644 index 0000000..ca00fe0 --- /dev/null +++ b/docs/assets/js/3595c30f.810cdf38.js @@ -0,0 +1,236 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7805"],{5955:function(e,t,s){s.r(t),s.d(t,{toc:()=>m,default:()=>g,frontMatter:()=>l,metadata:()=>n,assets:()=>c,libParams:()=>p,params:()=>u,micropipParams:()=>h,contentTitle:()=>d});var n=JSON.parse('{"id":"languages/python-wasm","title":"Python (Wasm)","description":"Pyodide is a Python distribution for the browser and Node.js based on WebAssembly.","source":"@site/docs/languages/python-wasm.mdx","sourceDirName":"languages","slug":"/languages/python-wasm","permalink":"/docs/languages/python-wasm","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/python-wasm.mdx","tags":[],"version":"current","frontMatter":{"toc_max_heading_level":4},"sidebar":"docsSidebar","previous":{"title":"PurgeCSS","permalink":"/docs/languages/purgecss"},"next":{"title":"Python","permalink":"/docs/languages/python"}}'),r=s("5893"),i=s("65"),o=s("8500"),a=s("3365");let l={toc_max_heading_level:4},d="Python (Wasm)",c={},p={pyodide:`import snowballstemmer +stemmer = snowballstemmer.stemmer('english') +print(stemmer.stemWords('go goes going gone'.split())) +`,languages:"pyodide",console:"full",compiled:"none"},h={pyodide:`import micropip +await micropip.install("setuptools") + +import pkg_resources +print(pkg_resources.get_distribution("setuptools").version) +`,languages:"pyodide",console:"full",compiled:"none"},u={"python-wasm":`# From: https://github.com/TheAlgorithms/Python +# License: https://github.com/TheAlgorithms/Python/blob/master/LICENSE.mdx + +""" +Implementation of a basic regression decision tree. +Input data set: The input data set must be 1-dimensional with continuous labels. +Output: The decision tree maps a real number input to a real number output. +""" +import numpy as np + + +class DecisionTree: + def __init__(self, depth=5, min_leaf_size=5): + self.depth = depth + self.decision_boundary = 0 + self.left = None + self.right = None + self.min_leaf_size = min_leaf_size + self.prediction = None + + def mean_squared_error(self, labels, prediction): + """ + mean_squared_error: + @param labels: a one dimensional numpy array + @param prediction: a floating point value + return value: mean_squared_error calculates the error if prediction is used to + estimate the labels + >>> tester = DecisionTree() + >>> test_labels = np.array([1,2,3,4,5,6,7,8,9,10]) + >>> test_prediction = float(6) + >>> tester.mean_squared_error(test_labels, test_prediction) == ( + ... TestDecisionTree.helper_mean_squared_error_test(test_labels, + ... test_prediction)) + True + >>> test_labels = np.array([1,2,3]) + >>> test_prediction = float(2) + >>> tester.mean_squared_error(test_labels, test_prediction) == ( + ... TestDecisionTree.helper_mean_squared_error_test(test_labels, + ... test_prediction)) + True + """ + if labels.ndim != 1: + print("Error: Input labels must be one dimensional") + + return np.mean((labels - prediction) ** 2) + + def train(self, x, y): + """ + train: + @param x: a one dimensional numpy array + @param y: a one dimensional numpy array. + The contents of y are the labels for the corresponding X values + + train does not have a return value + """ + + """ + this section is to check that the inputs conform to our dimensionality + constraints + """ + if x.ndim != 1: + print("Error: Input data set must be one dimensional") + return + if len(x) != len(y): + print("Error: X and y have different lengths") + return + if y.ndim != 1: + print("Error: Data set labels must be one dimensional") + return + + if len(x) < 2 * self.min_leaf_size: + self.prediction = np.mean(y) + return + + if self.depth == 1: + self.prediction = np.mean(y) + return + + best_split = 0 + min_error = self.mean_squared_error(x, np.mean(y)) * 2 + + """ + loop over all possible splits for the decision tree. find the best split. + if no split exists that is less than 2 * error for the entire array + then the data set is not split and the average for the entire array is used as + the predictor + """ + for i in range(len(x)): + if len(x[:i]) < self.min_leaf_size: + continue + elif len(x[i:]) < self.min_leaf_size: + continue + else: + error_left = self.mean_squared_error(x[:i], np.mean(y[:i])) + error_right = self.mean_squared_error(x[i:], np.mean(y[i:])) + error = error_left + error_right + if error < min_error: + best_split = i + min_error = error + + if best_split != 0: + left_x = x[:best_split] + left_y = y[:best_split] + right_x = x[best_split:] + right_y = y[best_split:] + + self.decision_boundary = x[best_split] + self.left = DecisionTree( + depth=self.depth - 1, min_leaf_size=self.min_leaf_size + ) + self.right = DecisionTree( + depth=self.depth - 1, min_leaf_size=self.min_leaf_size + ) + self.left.train(left_x, left_y) + self.right.train(right_x, right_y) + else: + self.prediction = np.mean(y) + + return + + def predict(self, x): + """ + predict: + @param x: a floating point value to predict the label of + the prediction function works by recursively calling the predict function + of the appropriate subtrees based on the tree's decision boundary + """ + if self.prediction is not None: + return self.prediction + elif self.left or self.right is not None: + if x >= self.decision_boundary: + return self.right.predict(x) + else: + return self.left.predict(x) + else: + print("Error: Decision tree not yet trained") + return None + + +class TestDecisionTree: + """Decision Tres test class""" + + @staticmethod + def helper_mean_squared_error_test(labels, prediction): + """ + helper_mean_squared_error_test: + @param labels: a one dimensional numpy array + @param prediction: a floating point value + return value: helper_mean_squared_error_test calculates the mean squared error + """ + squared_error_sum = float(0) + for label in labels: + squared_error_sum += (label - prediction) ** 2 + + return float(squared_error_sum / labels.size) + + +def main(): + """ + In this demonstration we're generating a sample data set from the sin function in + numpy. We then train a decision tree on the data set and use the decision tree to + predict the label of 10 different test values. Then the mean squared error over + this test is displayed. + """ + x = np.arange(-1.0, 1.0, 0.005) + y = np.sin(x) + + tree = DecisionTree(depth=10, min_leaf_size=10) + tree.train(x, y) + + test_cases = (np.random.rand(10) * 2) - 1 + predictions = np.array([tree.predict(x) for x in test_cases]) + avg_error = np.mean((predictions - test_cases) ** 2) + + print("Test values: " + str(test_cases)) + print("Predictions: " + str(predictions)) + print("Average error: " + str(avg_error)) + + +if __name__ == "__main__": + main() + import doctest + doctest.testmod(name="mean_squarred_error", verbose=True) +`,languages:"pyodide",console:"full",compiled:"none"},m=[{value:"Usage",id:"usage",level:2},{value:"Loading Modules",id:"loading-modules",level:3},{value:"Standard Library",id:"standard-library",level:4},{value:"External Packages",id:"external-packages",level:4},{value:"JavaScript Interoperability",id:"javascript-interoperability",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Aliases",id:"aliases",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Live Reload",id:"live-reload",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function f(e){let t={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"python-wasm",children:"Python (Wasm)"})}),"\n","\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://pyodide.org",children:"Pyodide"})," is a ",(0,r.jsx)(t.a,{href:"https://www.python.org/",children:"Python"})," distribution for the browser and Node.js based on ",(0,r.jsx)(t.a,{href:"https://webassembly.org/",children:"WebAssembly"}),"."]}),"\n",(0,r.jsxs)(t.blockquote,{children:["\n",(0,r.jsxs)(t.p,{children:["Pyodide makes it possible to install and run Python packages in the browser with ",(0,r.jsx)(t.a,{href:"https://micropip.pyodide.org",children:"micropip"}),". Any pure Python package with a wheel available on PyPI is supported. Many packages with C extensions have also been ported for use with Pyodide. These include many general-purpose packages such as regex, pyyaml, lxml and scientific Python packages including numpy, pandas, scipy, matplotlib, and scikit-learn."]}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://pyodide.org",children:"https://pyodide.org"})}),"\n"]}),"\n",(0,r.jsxs)(t.admonition,{title:"Note",type:"info",children:[(0,r.jsxs)(t.p,{children:["Pyodide is a port of ",(0,r.jsx)(t.a,{href:"https://github.com/python/cpython",children:"CPython"})," to WebAssembly/Emscripten. This matches the behavior of the official Python interpreter and allows importing many Python packages. However, the full Python interpreter compiled to WebAssembly needs to be downloaded in the result page."]}),(0,r.jsxs)(t.p,{children:["If you do not need to import external packages, you may want to use the lighter-weight ",(0,r.jsx)(t.a,{href:"/docs/languages/python",children:"Python interpreter written in JavaScript"}),"."]})]}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(t.p,{children:["Using Pyodide allows running Python code in the browser. There is no server required to run the code and no need to install Python or explicitly install packages. Packages imported in code are automatically loaded using ",(0,r.jsx)(t.a,{href:"https://micropip.pyodide.org",children:"micropip"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["In addition, since the Python code is running on the client-side, it has access to the ",(0,r.jsx)(t.a,{href:"#javascript-interoperability",children:"JavaScript scope"}),", including the page DOM and browser APIs. See the ",(0,r.jsx)(t.a,{href:"#starter-template",children:"starter template"})," for an example."]}),"\n",(0,r.jsx)(t.h3,{id:"loading-modules",children:"Loading Modules"}),"\n",(0,r.jsx)(t.p,{children:"Most of the modules in the Python standard library and many external packages can be used directly without explicit installs."}),"\n",(0,r.jsx)(t.h4,{id:"standard-library",children:"Standard Library"}),"\n",(0,r.jsxs)(t.p,{children:["Most of the Python standard library is functional, except for the modules ",(0,r.jsx)(t.a,{href:"https://pyodide.org/en/stable/usage/wasm-constraints.html",children:"listed here"}),"."]}),"\n",(0,r.jsx)(t.h4,{id:"external-packages",children:"External Packages"}),"\n",(0,r.jsxs)(t.p,{children:["Pyodide allows using many external packages (all pure Python packages on PyPI and many general-purpose and scientific ",(0,r.jsx)(t.a,{href:"https://pyodide.org/en/stable/usage/packages-in-pyodide.html",children:"packages built in Pyodide"}),")."]}),"\n",(0,r.jsxs)(t.p,{children:["Most of the time, a ",(0,r.jsx)(t.a,{href:"https://packaging.python.org/en/latest/discussions/distribution-package-vs-import-package/",children:"distribution package provides one single import package"})," (or non-package module), with a matching name. For example, ",(0,r.jsx)(t.code,{children:"pip install numpy"})," lets you ",(0,r.jsx)(t.code,{children:"import numpy"}),". In these cases, modules can just be imported in code without the need for any explicit installs. The modules are automatically loaded using ",(0,r.jsx)(t.a,{href:"https://micropip.pyodide.org",children:"micropip"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n","\n",(0,r.jsx)(o.Z,{params:p,code:p.pyodide,language:"python",formatCode:!1}),"\n",(0,r.jsxs)(t.p,{children:["However, modules with different import names (e.g. ",(0,r.jsx)(t.code,{children:"pkg_resources"})," module from ",(0,r.jsx)(t.code,{children:"setuptools"})," package) need to be explicitly installed using ",(0,r.jsx)(t.a,{href:"https://micropip.pyodide.org",children:"micropip"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n","\n",(0,r.jsx)(o.Z,{params:h,code:h.pyodide,language:"python",formatCode:!1}),"\n",(0,r.jsxs)(t.p,{children:["In addition, ",(0,r.jsx)(t.a,{href:"https://micropip.pyodide.org",children:"micropip"})," can be used to load external packages from custom URLs. See ",(0,r.jsx)(t.a,{href:"https://micropip.pyodide.org/en/stable/project/usage.html#examples",children:"examples"}),"."]}),"\n",(0,r.jsx)(t.h3,{id:"javascript-interoperability",children:"JavaScript Interoperability"}),"\n",(0,r.jsxs)(t.p,{children:["The JavaScript scope can be accessed from Python using the ",(0,r.jsx)(t.code,{children:"js"})," module."]}),"\n",(0,r.jsxs)(t.p,{children:["See Pyodide documentations about ",(0,r.jsx)(t.a,{href:"https://pyodide.org/en/stable/usage/quickstart.html#accessing-javascript-scope-from-python",children:"accessing JavaScript scope from Python"})," and ",(0,r.jsx)(t.a,{href:"https://pyodide.org/en/stable/usage/type-conversions.html",children:"type translations"})," for more information."]}),"\n",(0,r.jsxs)(t.p,{children:["Check the ",(0,r.jsx)(t.a,{href:"#starter-template",children:"starter template"})," for an example."]}),"\n",(0,r.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"python-wasm"})}),"\n",(0,r.jsx)(t.h3,{id:"extensions",children:"Extensions"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:".py3"}),", ",(0,r.jsx)(t.code,{children:".wasm.py"})]}),"\n",(0,r.jsx)(t.h3,{id:"aliases",children:"Aliases"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"pyodide"}),", ",(0,r.jsx)(t.code,{children:"py-wasm"}),", ",(0,r.jsx)(t.code,{children:"pythonwasm"}),", ",(0,r.jsx)(t.code,{children:"pywasm"})]}),"\n",(0,r.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"script"})}),"\n",(0,r.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://pyodide.org",children:"Pyodide"})}),"\n",(0,r.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,r.jsx)(t.p,{children:"Pyodide v0.25.1, running Python v3.11.3"}),"\n",(0,r.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsx)(t.p,{children:"Not supported."}),"\n",(0,r.jsx)(t.h2,{id:"live-reload",children:"Live Reload"}),"\n",(0,r.jsx)(t.p,{children:"By default, when code is updated, the Pyodide environment is re-used while the global variables are reset. This behavior is used for performance reasons. However, in order to fully reload Pyodide and start a new environment, insert this comment in the code:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-python",children:"# __livecodes_reload__\n"})}),"\n",(0,r.jsx)(t.p,{children:"Think of this like restarting the kernel in Jupyter notebooks."}),"\n",(0,r.jsxs)(t.p,{children:["This comment can be added in the ",(0,r.jsxs)(t.a,{href:"/docs/configuration/configuration-object#markup",children:[(0,r.jsx)(t.code,{children:"hiddenContent"})," property of the editor"]})," for embedded playgrounds."]}),"\n",(0,r.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n",(0,r.jsx)(a.Z,{params:u,height:"80vh"}),"\n",(0,r.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://livecodes.io/?template=python-wasm",children:"https://livecodes.io/?template=python-wasm"})}),"\n",(0,r.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://www.python.org/",children:"Python"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://pyodide.org",children:"Pyodide"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://micropip.pyodide.org",children:"micropip"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/languages/python",children:"Brython in LiveCodes"})}),"\n"]})]})}function g(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(f,{...e})}):f(e)}},3365:function(e,t,s){s.d(t,{Z:()=>g});var n=s("5893"),r=s("4200"),i=s("7294"),o=s("8294");function a(e){let t=(0,i.useRef)(null),[s,r]=(0,i.useState)(e.className||""),[a,l]=(0,i.useState)(e.style||{}),[d,c]=(0,i.useState)(e.height),[p,h]=(0,i.useState)(),[u,m]=(0,i.useState)(JSON.stringify(e.config||"")),[f,g]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:i,sdkReady:a,config:d,...y}=e;if(r(s||""),l(n||{}),c(i),p&&f===JSON.stringify(y)){if(u===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{p?.setConfig(e)}):d&&p.setConfig(d)}else g(JSON.stringify(y)),p?.destroy(),(0,o.T)(t.current,{config:d,...y}).then(e=>{h(e),"function"==typeof a&&a(e)})},[e]),(0,i.useEffect)(()=>()=>{p?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":d})}var l=s("1858"),d=s("3262"),c=s("1705"),p=s("7645"),h=s("8168"),u=s("8228"),m=s("5050");function f(e){let[t,s]=(0,i.useState)(e.js),[r,o]=(0,i.useState)(e.ts),[a,l]=(0,i.useState)(e.react),[f,g]=(0,i.useState)(e.vue),[y,x]=(0,i.useState)(e.svelte),v="3.7rem",[b,j]=(0,i.useState)(!0),[_,w]=(0,i.useState)(v),P=(0,i.useRef)(null),k=()=>{setTimeout(()=>{w(`calc(${P.current.offsetHeight}px + ${v})`)},5),setTimeout(()=>{w(`calc(${P.current.offsetHeight}px + ${v})`)},255)};return(0,i.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),o(e(r,"ts")),l(e(a,"jsx")),g(e(f,"html")),x(e(y,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${u.Z.details}`,"data-collapsed":b,style:{height:b?v:_,overflow:"hidden",willChange:"height",transition:`height ${b?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{j(!b),k()},children:"show code"}),(0,n.jsx)("div",{ref:P,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,n.jsx)(p.Z,{value:"js",label:"JS",attributes:{onMouseDown:k},children:(0,n.jsx)(c.Z,{language:"js",children:t})}),(0,n.jsx)(p.Z,{value:"ts",label:"TS",attributes:{onMouseDown:k},children:(0,n.jsx)(c.Z,{language:"ts",children:r})}),(0,n.jsx)(p.Z,{value:"react",label:"React",attributes:{onMouseDown:k},children:(0,n.jsx)(c.Z,{language:"jsx",children:a})}),(0,n.jsx)(p.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:k},children:(0,n.jsx)(c.Z,{language:"html",children:f})}),(0,n.jsx)(p.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:k},children:(0,n.jsx)(c.Z,{language:"html",children:y})})]})})})]})}function g(e){let{className:t,style:s,showCode:i,height:o,...d}=e,{colorMode:c}=(0,r.I)(),p=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${p(d)}; +createPlayground('#container', options); + +`.trimStart(),u=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${p(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${p(d)}; + return (); +} + +`.trimStart(),g=` + + + +`,y=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(f,{js:h,ts:u,react:m,vue:g,svelte:y})]})}},8500:function(e,t,s){s.d(t,{Z:()=>d});var n=s("5893");s("7294");var r=s("6735");function i(e){let{children:t,fallback:s}=e;return(0,r.Z)()?(0,n.jsx)(n.Fragment,{children:t?.()}):s??null}var o=s("1705"),a=s("8294"),l=s("1858");function d(e){let{params:t,config:s,code:r,language:d="js",codeTitle:c="",showLineNumbers:p=!1,formatCode:h=!0,linkText:u="Run in LiveCodes",style:m={},className:f=""}=e,g=(0,a.r)({appUrl:l.G,params:t,config:s});return(0,n.jsxs)("div",{style:{marginBottom:"30px",...m},className:f,children:[r&&(0,n.jsx)(i,{children:()=>(0,n.jsx)(o.Z,{language:d,title:c,showLineNumbers:p,children:h?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(r,d):r})}),(0,n.jsxs)("a",{href:g,target:"_blank",rel:"noreferrer",children:[u,(0,n.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,n.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return i}});var n=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:r="lazy",view:o}=t,a=n||"headless"===o,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)k(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(i(t)),p=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":r);let h=globalThis.process;c.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(u[e])))});let m=!1,f="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",i=l.querySelector(`iframe.${n}`),o=i||document.createElement("iframe");o.classList.add(n),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===r?"eager":"lazy"),a?k(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===p&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===p&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:s},p))}),o.onload=()=>{e(o)},o.src=c.href,i||l.appendChild(o)}),y=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===p&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),x=()=>m?Promise.reject(f):new Promise(async e=>{y.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},p),await y,e()}),v=(e,t)=>new Promise(async(s,n)=>{if(m)return n(f);await x();let r=S();addEventListener("message",function t(i){if(i.source===g.contentWindow&&i.origin===p&&i.data?.type==="livecodes-api-response"&&i.data?.id===r&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?n(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:r,args:t},p)}),b={},j=["load","ready","code","console","tests","destroy"],_=(e,t)=>{if(m)throw Error(f);return j.includes(e)?(v("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&v("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},w=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=w(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==p||!t||!b[t])return;let s=e.data?.payload;b[t]?.forEach(e=>{e(s)})});let P=()=>{Object.values(b).forEach(e=>{e.length=0}),g?.remove?.(),m=!0};function k(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await x(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let S=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>x(),run:()=>v("run"),format:e=>v("format",[e]),getShareUrl:e=>v("getShareUrl",[e]),getConfig:e=>v("getConfig",[e]),setConfig:e=>v("setConfig",[e]),getCode:()=>v("getCode"),show:(e,t)=>v("show",[e,t]),runTests:()=>v("runTests"),onChange:e=>_("code",e),watch:_,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;ny.settled?v("destroy").then(P):m?Promise.reject(f):(P(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:i={},headless:o,import:a,lite:l,view:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let p=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let h="headless"===t.view||o;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==d?i.view=d:e.searchParams.set("view",d)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),p.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(i))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{p.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=p.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return o}});var n=s(7294);let r={},i=n.createContext(r);function o(e){let t=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/35998477.9e8c0c16.js b/docs/assets/js/35998477.9e8c0c16.js new file mode 100644 index 0000000..cc99b89 --- /dev/null +++ b/docs/assets/js/35998477.9e8c0c16.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2719"],{1613:function(e,t,s){s.r(t),s.d(t,{config:()=>d,config2:()=>u,default:()=>g,frontMatter:()=>o,metadata:()=>n,assets:()=>c,params:()=>h,toc:()=>p,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/mustache","title":"Mustache","description":"Mustache: Logic-less templates.","source":"@site/docs/languages/mustache.mdx","sourceDirName":"languages","slug":"/languages/mustache","permalink":"/docs/languages/mustache","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/mustache.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"MJML","permalink":"/docs/languages/mjml"},"next":{"title":"Nunjucks","permalink":"/docs/languages/nunjucks"}}'),r=s("5893"),a=s("65"),i=s("3365");let o={},l="Mustache",c={},d={markup:{language:"mustache",content:"Hello {{name}}!"},customSettings:{template:{data:{name:"LiveCodes"}}}},h={compiled:"open"},u={markup:{language:"mustache",content:"Hello {{name}}!"},script:{language:"javascript",content:'window.livecodes.templateData = { name: "LiveCodes" };'},customSettings:{template:{prerender:!1}},activeEditor:"script"},p=[{value:"Usage",id:"usage",level:2},{value:"Pre-rendered (Default)",id:"pre-rendered-default",level:3},{value:"Dynamic",id:"dynamic",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Pre-rendered",id:"pre-rendered",level:3},{value:"Dynamic",id:"dynamic-1",level:3},{value:"Links",id:"links",level:2}];function m(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"mustache",children:"Mustache"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://mustache.github.io/",children:"Mustache"}),": Logic-less templates."]}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.p,{children:"There are 2 modes for rendering:"}),"\n",(0,r.jsx)(t.h3,{id:"pre-rendered-default",children:"Pre-rendered (Default)"}),"\n",(0,r.jsxs)(t.p,{children:["The values of the expressions are evaluated and added to the template during compilation of the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["The values of all expressions should be supplied in advance using ",(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," to the property ",(0,r.jsx)(t.code,{children:"template.data"})," which accepts an object of key-value pairs."]}),"\n",(0,r.jsxs)(t.p,{children:["Example: This provides the value of the expression ",(0,r.jsx)(t.code,{children:"name"})]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "data": {\n "name": "LiveCodes"\n }\n }\n}\n'})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"#pre-rendered",children:"Full example below"})}),"\n",(0,r.jsx)(t.h3,{id:"dynamic",children:"Dynamic"}),"\n",(0,r.jsxs)(t.p,{children:["To use this mode, the property ",(0,r.jsx)(t.code,{children:"template.prerender"})," in ",(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," should be set to ",(0,r.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "prerender": false\n }\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," runtime."]}),"\n",(0,r.jsxs)(t.p,{children:["This can be achieved in JavaScript (or any ",(0,r.jsx)(t.a,{href:"/docs/languages/",children:"language"})," that compiles to it) by assigning ",(0,r.jsx)(t.code,{children:"window.livecodes.templateData"})," to an object with the data."]}),"\n",(0,r.jsxs)(t.p,{children:["Please note that template rendering occurs on ",(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event",children:"page load"}),", so the assignment must occur before that."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:'title="Script Editor (JS)"',children:"window.livecodes.templateData = { name: 'LiveCodes' };\n"})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"#dynamic-1",children:"Full example below"})}),"\n",(0,r.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"mustache"})}),"\n",(0,r.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:".mustache"})}),"\n",(0,r.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"markup"})}),"\n",(0,r.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://github.com/janl/mustache.js/",children:"mustache.js"}),"."]}),"\n",(0,r.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"mustache"}),": v4.2.0"]}),"\n",(0,r.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsxs)(t.p,{children:["Using ",(0,r.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,r.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n",(0,r.jsx)(t.h3,{id:"pre-rendered",children:"Pre-rendered"}),"\n","\n","\n",(0,r.jsx)(i.Z,{config:d,params:h}),"\n",(0,r.jsx)(t.h3,{id:"dynamic-1",children:"Dynamic"}),"\n","\n",(0,r.jsx)(i.Z,{config:u}),"\n",(0,r.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://mustache.github.io/",children:"Mustache"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://github.com/janl/mustache.js",children:"mustache.js"})}),"\n"]})]})}function g(e={}){let{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),r=s("4200"),a=s("7294"),i=s("8294");function o(e){let t=(0,a.useRef)(null),[s,r]=(0,a.useState)(e.className||""),[o,l]=(0,a.useState)(e.style||{}),[c,d]=(0,a.useState)(e.height),[h,u]=(0,a.useState)(),[p,m]=(0,a.useState)(JSON.stringify(e.config||"")),[g,f]=(0,a.useState)("");return(0,a.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:a,sdkReady:o,config:c,...v}=e;if(r(s||""),l(n||{}),d(a),h&&g===JSON.stringify(v)){if(p===JSON.stringify(c))return;m(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else f(JSON.stringify(v)),h?.destroy(),(0,i.T)(t.current,{config:c,...v}).then(e=>{u(e),"function"==typeof o&&o(e)})},[e]),(0,a.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:o,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),h=s("7645"),u=s("8168"),p=s("8228"),m=s("5050");function g(e){let[t,s]=(0,a.useState)(e.js),[r,i]=(0,a.useState)(e.ts),[o,l]=(0,a.useState)(e.react),[g,f]=(0,a.useState)(e.vue),[v,j]=(0,a.useState)(e.svelte),x="3.7rem",[y,b]=(0,a.useState)(!0),[w,S]=(0,a.useState)(x),C=(0,a.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},255)};return(0,a.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(r,"ts")),l(e(o,"jsx")),f(e(g,"html")),j(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":y,style:{height:y?x:w,overflow:"hidden",willChange:"height",transition:`height ${y?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!y),E()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"ts",children:r})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"jsx",children:o})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:a,height:i,...c}=e,{colorMode:d}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(c)}; + return (); +} + +`.trimStart(),f=` + + + +`,v=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:u,ts:p,react:m,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return a}});var n=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:r="lazy",view:i}=t,o=n||"headless"===i,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(o&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(o)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(a(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",o?"eager":r);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!o){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||o||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",a=l.querySelector(`iframe.${n}`),i=a||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===r?"eager":"lazy"),o?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),i.onload=()=>{e(i)},i.src=d.href,a||l.appendChild(i)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),j=()=>m?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),x=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await j();let r=P();addEventListener("message",function t(a){if(a.source===f.contentWindow&&a.origin===h&&a.data?.type==="livecodes-api-response"&&a.data?.id===r&&a.data.method===e){removeEventListener("message",t);let e=a.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},h)}),y={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return b.includes(e)?(x("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!y[t])return;let s=e.data?.payload;y[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(y).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nv.settled?x("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function a(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:a={},headless:i,import:o,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof a&&null==a.mode?a.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof a&&null==a.view&&"headless"!==c?a.view=c:e.searchParams.set("view",c)),"string"==typeof a)try{new URL(a),e.searchParams.set("config",encodeURIComponent(a))}catch{throw Error('"config" is not a valid URL or configuration object.')}else a&&"object"==typeof a&&Object.keys(a).length>0&&(a.title&&"Untitled Project"!==a.title&&e.searchParams.set("title",a.title),a.description&&a.description.length>0&&e.searchParams.set("description",a.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(a))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return o&&e.searchParams.set("x",encodeURIComponent(o)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return o},a:function(){return i}});var n=s(7294);let r={},a=n.createContext(r);function i(e){let t=n.useContext(a);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/35f01bb6.4cdb9277.js b/docs/assets/js/35f01bb6.4cdb9277.js new file mode 100644 index 0000000..c5ec63e --- /dev/null +++ b/docs/assets/js/35f01bb6.4cdb9277.js @@ -0,0 +1,4 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5172"],{5604:function(e,t,n){n.r(t),n.d(t,{default:()=>p,frontMatter:()=>a,metadata:()=>r,assets:()=>u,toc:()=>d,contentTitle:()=>c});var r=JSON.parse('{"id":"examples/display-modes/index","title":"Display Modes","description":"","source":"@site/docs/examples/display-modes/index.mdx","sourceDirName":"examples/display-modes","slug":"/examples/display-modes/","permalink":"/docs/examples/display-modes/","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/examples/display-modes/index.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"examplesSidebar","next":{"title":"full","permalink":"/docs/examples/display-modes/full"}}'),s=n("5893"),l=n("65"),o=n("8399"),i=n("7378");let a={},c="Display Modes",u={},d=[];function m(e){let t={h1:"h1",header:"header",...(0,l.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"display-modes",children:"Display Modes"})}),"\n","\n",(0,s.jsx)(o.Z,{items:(0,i.jA)().items})]})}function p(e={}){let{wrapper:t}={...(0,l.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}},8399:function(e,t,n){n.d(t,{Z:()=>j});var r=n("5893");n("7294");var s=n("7026"),l=n("6563"),o=n("3367"),i=n("1107"),a=n("9999"),c=n("7670"),u=n("9386");let d={cardContainer:"cardContainer_fWXF",cardTitle:"cardTitle_rnsV",cardDescription:"cardDescription_PWke"};function m(e){let{href:t,children:n}=e;return(0,r.jsx)(o.Z,{href:t,className:(0,s.Z)("card padding--lg",d.cardContainer),children:n})}function p(e){let{href:t,icon:n,title:l,description:o}=e;return(0,r.jsxs)(m,{href:t,children:[(0,r.jsxs)(u.Z,{as:"h2",className:(0,s.Z)("text--truncate",d.cardTitle),title:l,children:[n," ",l]}),o&&(0,r.jsx)("p",{className:(0,s.Z)("text--truncate",d.cardDescription),title:o,children:o})]})}function f(e){let{item:t}=e,n=(0,l.LM)(t),s=function(){let{selectMessage:e}=(0,i.c)();return t=>e(t,(0,c.I)({message:"1 item|{count} items",id:"theme.docs.DocCard.categoryDescription.plurals",description:"The default description for a category card in the generated index about how many items this category includes"},{count:t}))}();return n?(0,r.jsx)(p,{href:n,icon:"\uD83D\uDDC3\uFE0F",title:t.label,description:t.description??s(t.items.length)}):null}function h(e){let{item:t}=e,n=(0,a.Z)(t.href)?"\uD83D\uDCC4\uFE0F":"\uD83D\uDD17",s=(0,l.xz)(t.docId??void 0);return(0,r.jsx)(p,{href:t.href,icon:n,title:t.label,description:t.description??s?.description})}function x(e){let{item:t}=e;switch(t.type){case"link":return(0,r.jsx)(h,{item:t});case"category":return(0,r.jsx)(f,{item:t});default:throw Error(`unknown item type ${JSON.stringify(t)}`)}}function g(e){let{className:t}=e,n=(0,l.jA)();return(0,r.jsx)(j,{items:n.items,className:t})}function j(e){let{items:t,className:n}=e;if(!t)return(0,r.jsx)(g,{...e});let o=(0,l.MN)(t);return(0,r.jsx)("section",{className:(0,s.Z)("row",n),children:o.map((e,t)=>(0,r.jsx)("article",{className:"col col--6 margin-bottom--lg",children:(0,r.jsx)(x,{item:e})},t))})}},7378:function(e,t,n){function r(){for(var e=arguments.length,t=Array(e),r=0;re.includes(t))}let i={locale:"en",pluralForms:o(["one","other"]),select:e=>1===e?"one":"other"};function a(){let e=function(){let{i18n:{currentLocale:e}}=(0,s.Z)();return(0,r.useMemo)(()=>{try{return function(e){let t=new Intl.PluralRules(e);return{locale:e,pluralForms:o(t.resolvedOptions().pluralCategories),select:e=>t.select(e)}}(e)}catch(t){return console.error(`Failed to use Intl.PluralRules for locale "${e}". +Docusaurus will fallback to the default (English) implementation. +Error: ${t.message} +`),i}},[e])}();return{selectMessage:(t,n)=>(function(e,t,n){let r=e.split("|");if(1===r.length)return r[0];r.length>n.pluralForms.length&&console.error(`For locale=${n.locale}, a maximum of ${n.pluralForms.length} plural forms are expected (${n.pluralForms.join(",")}), but the message contains ${r.length}: ${e}`);let s=n.select(t);return r[Math.min(n.pluralForms.indexOf(s),r.length-1)]})(n,t,e)}}},65:function(e,t,n){n.d(t,{Z:function(){return i},a:function(){return o}});var r=n(7294);let s={},l=r.createContext(s);function o(e){let t=r.useContext(l);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(l.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/36041992.92c4a406.js b/docs/assets/js/36041992.92c4a406.js new file mode 100644 index 0000000..0783d6e --- /dev/null +++ b/docs/assets/js/36041992.92c4a406.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2642"],{3151:function(e,t,n){n.r(t),n.d(t,{default:()=>l,frontMatter:()=>i,metadata:()=>o,assets:()=>a,toc:()=>u,contentTitle:()=>c});var o=JSON.parse('{"id":"about","title":"About us","description":"LiveCodes is built and maintained by Hatem Hosny, and wonderful contributors.","source":"@site/docs/about.mdx","sourceDirName":".","slug":"/about","permalink":"/docs/about","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/about.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Contact","permalink":"/docs/contact"}}'),s=n("5893"),r=n("65");let i={},c="About us",a={},u=[];function d(e){let t={a:"a",h1:"h1",header:"header",p:"p",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"about-us",children:"About us"})}),"\n",(0,s.jsxs)(t.p,{children:["LiveCodes is built and maintained by ",(0,s.jsx)(t.a,{href:"https://github.com/hatemhosny",children:"Hatem Hosny"}),", and wonderful ",(0,s.jsx)(t.a,{href:"https://github.com/live-codes/livecodes/graphs/contributors",children:"contributors"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Feature requests and bug reports are received on the ",(0,s.jsx)(t.a,{href:"https://github.com/live-codes/livecodes/issues",children:"GitHub repo"}),"."]}),"\n",(0,s.jsx)(t.p,{children:"Contributions are most welcome. Please open an issue on the GitHub repo to discuss your potential contribution before submitting a pull request."}),"\n",(0,s.jsxs)(t.p,{children:["Reach out to us using this ",(0,s.jsx)(t.a,{href:"/docs/contact",children:"contact form"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Please consider ",(0,s.jsx)(t.a,{href:"/docs/sponsor",children:"sponsoring LiveCodes"})," to support its maintenance and continued development."]})]})}function l(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},65:function(e,t,n){n.d(t,{Z:function(){return c},a:function(){return i}});var o=n(7294);let s={},r=o.createContext(s);function i(e){let t=o.useContext(r);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/37b920e3.11de4f56.js b/docs/assets/js/37b920e3.11de4f56.js new file mode 100644 index 0000000..aae1797 --- /dev/null +++ b/docs/assets/js/37b920e3.11de4f56.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5825"],{5895:function(e,c,o){o.r(c),o.d(c,{default:()=>h,frontMatter:()=>r,metadata:()=>i,assets:()=>l,toc:()=>t,contentTitle:()=>s});var i=JSON.parse('{"id":"api/internal/type-aliases/MonacoTheme","title":"Type Alias: MonacoTheme","description":"MonacoTheme: \\"active4d\\" \\\\| \\"all-hallows-eve\\" \\\\| \\"amy\\" \\\\| \\"birds-of-paradise\\" \\\\| \\"blackboard\\" \\\\| \\"brilliance-black\\" \\\\| \\"brilliance-dull\\" \\\\| \\"catppuccin-latte\\" \\\\| \\"catppuccin-frappe\\" \\\\| \\"catppuccin-macchiato\\" \\\\| \\"catppuccin-mocha\\" \\\\| \\"chrome-devtools\\" \\\\| \\"clouds-midnight\\" \\\\| \\"clouds\\" \\\\| \\"cobalt\\" \\\\| \\"cobalt2\\" \\\\| \\"custom-vs-light\\" \\\\| \\"custom-vs-dark\\" \\\\| \\"dawn\\" \\\\| \\"dracula\\" \\\\| \\"dreamweaver\\" \\\\| \\"eiffel\\" \\\\| \\"espresso-libre\\" \\\\| \\"github\\" \\\\| \\"github-dark\\" \\\\| \\"github-light\\" \\\\| \\"hc-black\\" \\\\| \\"hc-light\\" \\\\| \\"idle\\" \\\\| \\"idlefingers\\" \\\\| \\"iplastic\\" \\\\| \\"katzenmilch\\" \\\\| \\"krtheme\\" \\\\| \\"kuroir\\" \\\\| \\"lazy\\" \\\\| \\"magicwb-amiga\\" \\\\| \\"merbivore-soft\\" \\\\| \\"merbivore\\" \\\\| \\"monochrome\\" \\\\| \\"monochrome-dark\\" \\\\| \\"monokai\\" \\\\| \\"monokai-bright\\" \\\\| \\"monoindustrial\\" \\\\| \\"night-owl\\" \\\\| \\"nord\\" \\\\| \\"oceanic-next\\" \\\\| \\"pastels-on-dark\\" \\\\| \\"slush-and-poppies\\" \\\\| \\"solarized-dark\\" \\\\| \\"solarized-light\\" \\\\| \\"spacecadet\\" \\\\| \\"sunburst\\" \\\\| \\"textmate-mac-classic\\" \\\\| \\"tomorrow\\" \\\\| \\"tomorrow-night\\" \\\\| \\"tomorrow-night-blue\\" \\\\| \\"tomorrow-night-bright\\" \\\\| \\"tomorrow-night-eighties\\" \\\\| \\"twilight\\" \\\\| \\"upstream-sunburst\\" \\\\| \\"vibrant-ink\\" \\\\| \\"vs\\" \\\\| \\"vs-dark\\" \\\\| \\"xcode-default\\" \\\\| \\"zenburnesque\\"","source":"@site/docs/api/internal/type-aliases/MonacoTheme.md","sourceDirName":"api/internal/type-aliases","slug":"/api/internal/type-aliases/MonacoTheme","permalink":"/docs/api/internal/type-aliases/MonacoTheme","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/type-aliases/MonacoTheme.md","tags":[],"version":"current","frontMatter":{}}'),d=o("5893"),n=o("65");let r={},s="Type Alias: MonacoTheme",l={},t=[{value:"Defined in",id:"defined-in",level:2}];function a(e){let c={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",strong:"strong",...(0,n.a)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(c.header,{children:(0,d.jsx)(c.h1,{id:"type-alias-monacotheme",children:"Type Alias: MonacoTheme"})}),"\n",(0,d.jsxs)(c.blockquote,{children:["\n",(0,d.jsxs)(c.p,{children:[(0,d.jsx)(c.strong,{children:"MonacoTheme"}),": ",(0,d.jsx)(c.code,{children:'"active4d"'})," | ",(0,d.jsx)(c.code,{children:'"all-hallows-eve"'})," | ",(0,d.jsx)(c.code,{children:'"amy"'})," | ",(0,d.jsx)(c.code,{children:'"birds-of-paradise"'})," | ",(0,d.jsx)(c.code,{children:'"blackboard"'})," | ",(0,d.jsx)(c.code,{children:'"brilliance-black"'})," | ",(0,d.jsx)(c.code,{children:'"brilliance-dull"'})," | ",(0,d.jsx)(c.code,{children:'"catppuccin-latte"'})," | ",(0,d.jsx)(c.code,{children:'"catppuccin-frappe"'})," | ",(0,d.jsx)(c.code,{children:'"catppuccin-macchiato"'})," | ",(0,d.jsx)(c.code,{children:'"catppuccin-mocha"'})," | ",(0,d.jsx)(c.code,{children:'"chrome-devtools"'})," | ",(0,d.jsx)(c.code,{children:'"clouds-midnight"'})," | ",(0,d.jsx)(c.code,{children:'"clouds"'})," | ",(0,d.jsx)(c.code,{children:'"cobalt"'})," | ",(0,d.jsx)(c.code,{children:'"cobalt2"'})," | ",(0,d.jsx)(c.code,{children:'"custom-vs-light"'})," | ",(0,d.jsx)(c.code,{children:'"custom-vs-dark"'})," | ",(0,d.jsx)(c.code,{children:'"dawn"'})," | ",(0,d.jsx)(c.code,{children:'"dracula"'})," | ",(0,d.jsx)(c.code,{children:'"dreamweaver"'})," | ",(0,d.jsx)(c.code,{children:'"eiffel"'})," | ",(0,d.jsx)(c.code,{children:'"espresso-libre"'})," | ",(0,d.jsx)(c.code,{children:'"github"'})," | ",(0,d.jsx)(c.code,{children:'"github-dark"'})," | ",(0,d.jsx)(c.code,{children:'"github-light"'})," | ",(0,d.jsx)(c.code,{children:'"hc-black"'})," | ",(0,d.jsx)(c.code,{children:'"hc-light"'})," | ",(0,d.jsx)(c.code,{children:'"idle"'})," | ",(0,d.jsx)(c.code,{children:'"idlefingers"'})," | ",(0,d.jsx)(c.code,{children:'"iplastic"'})," | ",(0,d.jsx)(c.code,{children:'"katzenmilch"'})," | ",(0,d.jsx)(c.code,{children:'"krtheme"'})," | ",(0,d.jsx)(c.code,{children:'"kuroir"'})," | ",(0,d.jsx)(c.code,{children:'"lazy"'})," | ",(0,d.jsx)(c.code,{children:'"magicwb-amiga"'})," | ",(0,d.jsx)(c.code,{children:'"merbivore-soft"'})," | ",(0,d.jsx)(c.code,{children:'"merbivore"'})," | ",(0,d.jsx)(c.code,{children:'"monochrome"'})," | ",(0,d.jsx)(c.code,{children:'"monochrome-dark"'})," | ",(0,d.jsx)(c.code,{children:'"monokai"'})," | ",(0,d.jsx)(c.code,{children:'"monokai-bright"'})," | ",(0,d.jsx)(c.code,{children:'"monoindustrial"'})," | ",(0,d.jsx)(c.code,{children:'"night-owl"'})," | ",(0,d.jsx)(c.code,{children:'"nord"'})," | ",(0,d.jsx)(c.code,{children:'"oceanic-next"'})," | ",(0,d.jsx)(c.code,{children:'"pastels-on-dark"'})," | ",(0,d.jsx)(c.code,{children:'"slush-and-poppies"'})," | ",(0,d.jsx)(c.code,{children:'"solarized-dark"'})," | ",(0,d.jsx)(c.code,{children:'"solarized-light"'})," | ",(0,d.jsx)(c.code,{children:'"spacecadet"'})," | ",(0,d.jsx)(c.code,{children:'"sunburst"'})," | ",(0,d.jsx)(c.code,{children:'"textmate-mac-classic"'})," | ",(0,d.jsx)(c.code,{children:'"tomorrow"'})," | ",(0,d.jsx)(c.code,{children:'"tomorrow-night"'})," | ",(0,d.jsx)(c.code,{children:'"tomorrow-night-blue"'})," | ",(0,d.jsx)(c.code,{children:'"tomorrow-night-bright"'})," | ",(0,d.jsx)(c.code,{children:'"tomorrow-night-eighties"'})," | ",(0,d.jsx)(c.code,{children:'"twilight"'})," | ",(0,d.jsx)(c.code,{children:'"upstream-sunburst"'})," | ",(0,d.jsx)(c.code,{children:'"vibrant-ink"'})," | ",(0,d.jsx)(c.code,{children:'"vs"'})," | ",(0,d.jsx)(c.code,{children:'"vs-dark"'})," | ",(0,d.jsx)(c.code,{children:'"xcode-default"'})," | ",(0,d.jsx)(c.code,{children:'"zenburnesque"'})]}),"\n"]}),"\n",(0,d.jsx)(c.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,d.jsx)(c.p,{children:(0,d.jsx)(c.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1580",children:"models.ts:1580"})})]})}function h(e={}){let{wrapper:c}={...(0,n.a)(),...e.components};return c?(0,d.jsx)(c,{...e,children:(0,d.jsx)(a,{...e})}):a(e)}},65:function(e,c,o){o.d(c,{Z:function(){return s},a:function(){return r}});var i=o(7294);let d={},n=i.createContext(d);function r(e){let c=i.useContext(n);return i.useMemo(function(){return"function"==typeof e?e(c):{...c,...e}},[c,e])}function s(e){let c;return c=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:r(e.components),i.createElement(n.Provider,{value:c},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/380ab2e5.099204ed.js b/docs/assets/js/380ab2e5.099204ed.js new file mode 100644 index 0000000..0a4a01a --- /dev/null +++ b/docs/assets/js/380ab2e5.099204ed.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7671"],{1671:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>a,metadata:()=>r,assets:()=>i,toc:()=>l,contentTitle:()=>c});var r=JSON.parse('{"id":"languages/astro","title":"Astro","description":"TODO...","source":"@site/docs/languages/astro.mdx","sourceDirName":"languages","slug":"/languages/astro","permalink":"/docs/languages/astro","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/astro.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"AssemblyScript","permalink":"/docs/languages/assemblyscript"},"next":{"title":"Autoprefixer","permalink":"/docs/languages/autoprefixer"}}'),s=n("5893"),o=n("65");let a={},c="Astro",i={},l=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"astro",children:"Astro"})}),"\n",(0,s.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},65:function(e,t,n){n.d(t,{Z:function(){return c},a:function(){return a}});var r=n(7294);let s={},o=r.createContext(s);function a(e){let t=r.useContext(o);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/3849.e13b4314.js b/docs/assets/js/3849.e13b4314.js new file mode 100644 index 0000000..a110123 --- /dev/null +++ b/docs/assets/js/3849.e13b4314.js @@ -0,0 +1 @@ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3849"],{6995:function(e,t,n){var i;i=function(e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n,i=(n=t)&&n.__esModule?n:{default:n};e.default=i.default},"function"==typeof define&&define.amd?define(["exports","./react-swipe"],i):i(t,n(8532))},8532:function(e,t,n){var i;i=function(e,t,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.setHasSupportToCaptureOption=function(e){u=e};var i=o(t),r=o(n);function o(e){return e&&e.__esModule?e:{default:e}}var s=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:{capture:!0};return u?e:e.capture}function c(e){if("touches"in e){var t=e.touches[0];return{x:t.pageX,y:t.pageY}}return{x:e.screenX,y:e.screenY}}var p=function(e){function t(){!function(e,t){if(!(e instanceof t))throw TypeError("Cannot call a class as a function")}(this,t);for(var e,n=arguments.length,i=Array(n),r=0;rt&&this.props.onSwipeRight(1,e),this.movePosition.deltaY<-t?this.props.onSwipeUp(1,e):this.movePosition.deltaY>t&&this.props.onSwipeDown(1,e)),this.moveStart=null,this.moving=!1,this.movePosition=null}},{key:"_setSwiperRef",value:function(e){this.swiper=e,this.props.innerRef(e)}},{key:"render",value:function(){var e=this.props,t=(e.tagName,e.className),n=e.style,r=e.children,o=(e.allowMouseEvents,e.onSwipeUp,e.onSwipeDown,e.onSwipeLeft,e.onSwipeRight,e.onSwipeStart,e.onSwipeMove,e.onSwipeEnd,e.innerRef,e.tolerance,function(e,t){var n={};for(var i in e)!(t.indexOf(i)>=0)&&Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}(e,["tagName","className","style","children","allowMouseEvents","onSwipeUp","onSwipeDown","onSwipeLeft","onSwipeRight","onSwipeStart","onSwipeMove","onSwipeEnd","innerRef","tolerance"]));return i.default.createElement(this.props.tagName,s({ref:this._setSwiperRef,onMouseDown:this._onMouseDown,onTouchStart:this._handleSwipeStart,onTouchEnd:this._handleSwipeEnd,className:t,style:n},o),r)}}]),t}(t.Component);p.displayName="ReactSwipe",p.propTypes={tagName:r.default.string,className:r.default.string,style:r.default.object,children:r.default.node,allowMouseEvents:r.default.bool,onSwipeUp:r.default.func,onSwipeDown:r.default.func,onSwipeLeft:r.default.func,onSwipeRight:r.default.func,onSwipeStart:r.default.func,onSwipeMove:r.default.func,onSwipeEnd:r.default.func,innerRef:r.default.func,tolerance:r.default.number.isRequired},p.defaultProps={tagName:"div",allowMouseEvents:!1,onSwipeUp:function(){},onSwipeDown:function(){},onSwipeLeft:function(){},onSwipeRight:function(){},onSwipeStart:function(){},onSwipeMove:function(){},onSwipeEnd:function(){},innerRef:function(){},tolerance:0},e.default=p},"function"==typeof define&&define.amd?define(["exports","react","prop-types"],i):i(t,n(7294),n(5697))},2751:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0,t.default=function(e,t,n){var i=0===e?e:e+t;return"translate3d("+("horizontal"===n?[i,0,0]:[0,i,0]).join(",")+")"}},4954:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.fadeAnimationHandler=t.slideStopSwipingHandler=t.slideSwipeAnimationHandler=t.slideAnimationHandler=void 0;var i,r=n(7294),o=(i=n(2751))&&i.__esModule?i:{default:i},s=n(8918);function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,i)}return n}function u(e){for(var t=1;ta))return i<0?e.centerMode&&e.centerSlidePercentage&&"horizontal"===e.axis?n.itemListStyle=(0,s.setPosition)(-(a+2)*e.centerSlidePercentage-(100-e.centerSlidePercentage)/2,e.axis):n.itemListStyle=(0,s.setPosition)(-(100*(a+2)),e.axis):i>a&&(n.itemListStyle=(0,s.setPosition)(0,e.axis)),n;var l=(0,s.getPosition)(i,e),c=(0,o.default)(l,"%",e.axis),p=e.transitionTime+"ms";return n.itemListStyle={WebkitTransform:c,msTransform:c,OTransform:c,transform:c},t.swiping||(n.itemListStyle=u(u({},n.itemListStyle),{},{WebkitTransitionDuration:p,MozTransitionDuration:p,OTransitionDuration:p,transitionDuration:p,msTransitionDuration:p})),n},t.slideSwipeAnimationHandler=function(e,t,n,i){var o={},a="horizontal"===t.axis,u=r.Children.count(t.children),l=(0,s.getPosition)(n.selectedItem,t),c=t.infiniteLoop?(0,s.getPosition)(u-1,t)-100:(0,s.getPosition)(u-1,t),p=a?e.x:e.y,f=p;0===l&&p>0&&(f=0),l===c&&p<0&&(f=0);var d=l+100/(n.itemSize/f),h=Math.abs(p)>t.swipeScrollTolerance;return t.infiniteLoop&&h&&(0===n.selectedItem&&d>-100?d-=100*u:n.selectedItem===u-1&&d<-(100*u)&&(d+=100*u)),(!t.preventMovementUntilSwipeScrollTolerance||h||n.swipeMovementStarted)&&(n.swipeMovementStarted||i({swipeMovementStarted:!0}),o.itemListStyle=(0,s.setPosition)(d,t.axis)),h&&!n.cancelClick&&i({cancelClick:!0}),o},t.slideStopSwipingHandler=function(e,t){var n=(0,s.getPosition)(t.selectedItem,e);return{itemListStyle:(0,s.setPosition)(n,e.axis)}},t.fadeAnimationHandler=function(e,t){var n=e.transitionTime+"ms",i="ease-in-out",r={position:"absolute",display:"block",zIndex:-2,minHeight:"100%",opacity:0,top:0,right:0,left:0,bottom:0,transitionTimingFunction:i,msTransitionTimingFunction:i,MozTransitionTimingFunction:i,WebkitTransitionTimingFunction:i,OTransitionTimingFunction:i};return t.swiping||(r=u(u({},r),{},{WebkitTransitionDuration:n,MozTransitionDuration:n,OTransitionDuration:n,transitionDuration:n,msTransitionDuration:n})),{slideStyle:r,selectedStyle:u(u({},r),{},{opacity:1,position:"relative"}),prevStyle:u({},r)}}},8684:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==d(e)&&"function"!=typeof e)return{default:e};var t=f();if(t&&t.has(e))return t.get(e);var n={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var r in e)if(Object.prototype.hasOwnProperty.call(e,r)){var o=i?Object.getOwnPropertyDescriptor(e,r):null;o&&(o.get||o.set)?Object.defineProperty(n,r,o):n[r]=e[r]}return n.default=e,t&&t.set(e,n),n}(n(7294)),r=p(n(6995)),o=p(n(5702)),s=p(n(5040)),a=p(n(6513)),u=p(n(885)),l=n(8918),c=n(4954);function p(e){return e&&e.__esModule?e:{default:e}}function f(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return f=function(){return e},e}function d(e){return(d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function h(){return(h=Object.assign||function(e){for(var t=1;t=i.Children.count(t.props.children)))t.clearAutoPlay(),t.props.autoPlay&&(t.timer=setTimeout(function(){t.increment()},t.props.interval))}),S(b(t),"clearAutoPlay",function(){t.timer&&clearTimeout(t.timer)}),S(b(t),"resetAutoPlay",function(){t.clearAutoPlay(),t.autoPlay()}),S(b(t),"stopOnHover",function(){t.setState({isMouseEntered:!0},t.clearAutoPlay)}),S(b(t),"startOnLeave",function(){t.setState({isMouseEntered:!1},t.autoPlay)}),S(b(t),"isFocusWithinTheCarousel",function(){return!!t.carouselWrapperRef&&!!((0,a.default)().activeElement===t.carouselWrapperRef||t.carouselWrapperRef.contains((0,a.default)().activeElement))}),S(b(t),"navigateWithKeyboard",function(e){if(t.isFocusWithinTheCarousel()){var n="horizontal"===t.props.axis,i={ArrowUp:38,ArrowRight:39,ArrowDown:40,ArrowLeft:37},r=n?i.ArrowRight:i.ArrowDown,o=n?i.ArrowLeft:i.ArrowUp;r===e.keyCode?t.increment():o===e.keyCode&&t.decrement()}}),S(b(t),"updateSizes",function(){if(t.state.initialized&&t.itemsRef&&0!==t.itemsRef.length){var e="horizontal"===t.props.axis,n=t.itemsRef[0];if(n){var i=e?n.clientWidth:n.clientHeight;t.setState({itemSize:i}),t.thumbsRef&&t.thumbsRef.updateSizes()}}}),S(b(t),"setMountState",function(){t.setState({hasMount:!0}),t.updateSizes()}),S(b(t),"handleClickItem",function(e,n){if(0!==i.Children.count(t.props.children)){if(t.state.cancelClick){t.setState({cancelClick:!1});return}t.props.onClickItem(e,n),e!==t.state.selectedItem&&t.setState({selectedItem:e})}}),S(b(t),"handleOnChange",function(e,n){!(1>=i.Children.count(t.props.children))&&t.props.onChange(e,n)}),S(b(t),"handleClickThumb",function(e,n){t.props.onClickThumb(e,n),t.moveTo(e)}),S(b(t),"onSwipeStart",function(e){t.setState({swiping:!0}),t.props.onSwipeStart(e)}),S(b(t),"onSwipeEnd",function(e){t.setState({swiping:!1,cancelClick:!1,swipeMovementStarted:!1}),t.props.onSwipeEnd(e),t.clearAutoPlay(),t.state.autoPlay&&t.autoPlay()}),S(b(t),"onSwipeMove",function(e,n){t.props.onSwipeMove(n);var i=t.props.swipeAnimationHandler(e,t.props,t.state,t.setState.bind(b(t)));return t.setState(v({},i)),!!Object.keys(i).length}),S(b(t),"decrement",function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;t.moveTo(t.state.selectedItem-("number"==typeof e?e:1))}),S(b(t),"increment",function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;t.moveTo(t.state.selectedItem+("number"==typeof e?e:1))}),S(b(t),"moveTo",function(e){if("number"==typeof e){var n=i.Children.count(t.props.children)-1;e<0&&(e=t.props.infiniteLoop?n:0),e>n&&(e=t.props.infiniteLoop?0:n),t.selectItem({selectedItem:e}),t.state.autoPlay&&!1===t.state.isMouseEntered&&t.resetAutoPlay()}}),S(b(t),"onClickNext",function(){t.increment(1)}),S(b(t),"onClickPrev",function(){t.decrement(1)}),S(b(t),"onSwipeForward",function(){t.increment(1),t.props.emulateTouch&&t.setState({cancelClick:!0})}),S(b(t),"onSwipeBackwards",function(){t.decrement(1),t.props.emulateTouch&&t.setState({cancelClick:!0})}),S(b(t),"changeItem",function(e){return function(n){(0,l.isKeyboardEvent)(n)&&"Enter"!==n.key||t.moveTo(e)}}),S(b(t),"selectItem",function(e){t.setState(v({previousItem:t.state.selectedItem},e),function(){t.setState(t.animationHandler(t.props,t.state))}),t.handleOnChange(e.selectedItem,i.Children.toArray(t.props.children)[e.selectedItem])}),S(b(t),"getInitialImage",function(){var e=t.props.selectedItem,n=t.itemsRef&&t.itemsRef[e];return(n&&n.getElementsByTagName("img")||[])[0]}),S(b(t),"getVariableItemHeight",function(e){var n=t.itemsRef&&t.itemsRef[e];if(t.state.hasMount&&n&&n.children.length){var i=n.children[0].getElementsByTagName("img")||[];if(i.length>0){var r=i[0];r.complete||r.addEventListener("load",function e(){t.forceUpdate(),r.removeEventListener("load",e)})}var o=(i[0]||n.children[0]).clientHeight;return o>0?o:null}return null});var t,n={initialized:!1,previousItem:e.selectedItem,selectedItem:e.selectedItem,hasMount:!1,isMouseEntered:!1,autoPlay:e.autoPlay,swiping:!1,swipeMovementStarted:!1,cancelClick:!1,itemSize:1,itemListStyle:{},slideStyle:{},selectedStyle:{},prevStyle:{}};return t.animationHandler="function"==typeof e.animationHandler&&e.animationHandler||"fade"===e.animationHandler&&c.fadeAnimationHandler||c.slideAnimationHandler,t.state=v(v({},n),t.animationHandler(e,n)),t}return n=[{key:"componentDidMount",value:function(){this.props.children&&this.setupCarousel()}},{key:"componentDidUpdate",value:function(e,t){e.children||!this.props.children||this.state.initialized||this.setupCarousel(),!e.autoFocus&&this.props.autoFocus&&this.forceFocus(),t.swiping&&!this.state.swiping&&this.setState(v({},this.props.stopSwipingHandler(this.props,this.state))),(e.selectedItem!==this.props.selectedItem||e.centerMode!==this.props.centerMode)&&(this.updateSizes(),this.moveTo(this.props.selectedItem)),e.autoPlay!==this.props.autoPlay&&(this.props.autoPlay?this.setupAutoPlay():this.destroyAutoPlay(),this.setState({autoPlay:this.props.autoPlay}))}},{key:"componentWillUnmount",value:function(){this.destroyCarousel()}},{key:"setupCarousel",value:function(){var e=this;this.bindEvents(),this.state.autoPlay&&i.Children.count(this.props.children)>1&&this.setupAutoPlay(),this.props.autoFocus&&this.forceFocus(),this.setState({initialized:!0},function(){var t=e.getInitialImage();t&&!t.complete?t.addEventListener("load",e.setMountState):e.setMountState()})}},{key:"destroyCarousel",value:function(){this.state.initialized&&(this.unbindEvents(),this.destroyAutoPlay())}},{key:"setupAutoPlay",value:function(){this.autoPlay();var e=this.carouselWrapperRef;this.props.stopOnHover&&e&&(e.addEventListener("mouseenter",this.stopOnHover),e.addEventListener("mouseleave",this.startOnLeave))}},{key:"destroyAutoPlay",value:function(){this.clearAutoPlay();var e=this.carouselWrapperRef;this.props.stopOnHover&&e&&(e.removeEventListener("mouseenter",this.stopOnHover),e.removeEventListener("mouseleave",this.startOnLeave))}},{key:"bindEvents",value:function(){(0,u.default)().addEventListener("resize",this.updateSizes),(0,u.default)().addEventListener("DOMContentLoaded",this.updateSizes),this.props.useKeyboardArrows&&(0,a.default)().addEventListener("keydown",this.navigateWithKeyboard)}},{key:"unbindEvents",value:function(){(0,u.default)().removeEventListener("resize",this.updateSizes),(0,u.default)().removeEventListener("DOMContentLoaded",this.updateSizes);var e=this.getInitialImage();e&&e.removeEventListener("load",this.setMountState),this.props.useKeyboardArrows&&(0,a.default)().removeEventListener("keydown",this.navigateWithKeyboard)}},{key:"forceFocus",value:function(){var e;null===(e=this.carouselWrapperRef)||void 0===e||e.focus()}},{key:"renderItems",value:function(e){var t=this;return this.props.children?i.Children.map(this.props.children,function(n,r){var s=r===t.state.selectedItem,a=r===t.state.previousItem,u=s&&t.state.selectedStyle||a&&t.state.prevStyle||t.state.slideStyle||{};t.props.centerMode&&"horizontal"===t.props.axis&&(u=v(v({},u),{},{minWidth:t.props.centerSlidePercentage+"%"})),t.state.swiping&&t.state.swipeMovementStarted&&(u=v(v({},u),{},{pointerEvents:"none"}));var l={ref:function(e){return t.setItemsRef(e,r)},key:"itemKey"+r+(e?"clone":""),className:o.default.ITEM(!0,r===t.state.selectedItem,r===t.state.previousItem),onClick:t.handleClickItem.bind(t,r,n),style:u};return i.default.createElement("li",l,t.props.renderItem(n,{isSelected:r===t.state.selectedItem,isPrevious:r===t.state.previousItem}))}):[]}},{key:"renderControls",value:function(){var e=this,t=this.props,n=t.showIndicators,r=t.labels,o=t.renderIndicator,s=t.children;return n?i.default.createElement("ul",{className:"control-dots"},i.Children.map(s,function(t,n){return o&&o(e.changeItem(n),n===e.state.selectedItem,n,r.item)})):null}},{key:"renderStatus",value:function(){return this.props.showStatus?i.default.createElement("p",{className:"carousel-status"},this.props.statusFormatter(this.state.selectedItem+1,i.Children.count(this.props.children))):null}},{key:"renderThumbs",value:function(){return this.props.showThumbs&&this.props.children&&0!==i.Children.count(this.props.children)?i.default.createElement(s.default,{ref:this.setThumbsRef,onSelectItem:this.handleClickThumb,selectedItem:this.state.selectedItem,transitionTime:this.props.transitionTime,thumbWidth:this.props.thumbWidth,labels:this.props.labels,emulateTouch:this.props.emulateTouch},this.props.renderThumbs(this.props.children)):null}},{key:"render",value:function(){var e=this;if(!this.props.children||0===i.Children.count(this.props.children))return null;var t=this.props.swipeable&&i.Children.count(this.props.children)>1,n="horizontal"===this.props.axis,s=this.props.showArrows&&i.Children.count(this.props.children)>1,a=s&&(this.state.selectedItem>0||this.props.infiniteLoop)||!1,u=s&&(this.state.selectedItem0&&(n=0),o===-(100*Math.max(r-t.state.visibleItems,0))/t.state.visibleItems&&n<0&&(n=0);var a=o+100/(t.itemsWrapperRef.clientWidth/n);return t.itemsListRef&&["WebkitTransform","MozTransform","MsTransform","OTransform","transform","msTransform"].forEach(function(e){t.itemsListRef.style[e]=(0,s.default)(a,"%",t.props.axis)}),!0}),v(h(t),"slideRight",function(e){t.moveTo(t.state.firstItem-("number"==typeof e?e:1))}),v(h(t),"slideLeft",function(e){t.moveTo(t.state.firstItem+("number"==typeof e?e:1))}),v(h(t),"moveTo",function(e){e=(e=e<0?0:e)>=t.state.lastPosition?t.state.lastPosition:e,t.setState({firstItem:e})}),t.state={selectedItem:e.selectedItem,swiping:!1,showArrows:!1,firstItem:0,visibleItems:0,lastPosition:0},t}return n=[{key:"componentDidMount",value:function(){this.setupThumbs()}},{key:"UNSAFE_componentWillReceiveProps",value:function(e){e.selectedItem!==this.state.selectedItem&&this.setState({selectedItem:e.selectedItem,firstItem:this.getFirstItem(e.selectedItem)})}},{key:"componentDidUpdate",value:function(e){this.props.children!==e.children&&this.updateSizes()}},{key:"componentWillUnmount",value:function(){this.destroyThumbs()}},{key:"setupThumbs",value:function(){(0,u.default)().addEventListener("resize",this.updateSizes),(0,u.default)().addEventListener("DOMContentLoaded",this.updateSizes),this.updateSizes()}},{key:"destroyThumbs",value:function(){(0,u.default)().removeEventListener("resize",this.updateSizes),(0,u.default)().removeEventListener("DOMContentLoaded",this.updateSizes)}},{key:"getFirstItem",value:function(e){var t=e;return e>=this.state.lastPosition&&(t=this.state.lastPosition),e1,n=this.state.showArrows&&this.state.firstItem>0,o=this.state.showArrows&&this.state.firstItemh,pyDemo:()=>u,default:()=>g,frontMatter:()=>a,mdDemo:()=>c,metadata:()=>s,assets:()=>l,toc:()=>p,contentTitle:()=>d});var s=JSON.parse('{"id":"sdk/headless","title":"Headless Mode","description":"The LiveCodes SDK can be used to create playgrounds in headless mode. In this mode, no visible output is displayed in the embedding web page. However, all SDK methods are accessible (e.g. for updating code, getting compiled code, console output, result HTML, shareable URLs, formatting code, running tests, etc).","source":"@site/docs/sdk/headless.mdx","sourceDirName":"sdk","slug":"/sdk/headless","permalink":"/docs/sdk/headless","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/sdk/headless.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Svelte","permalink":"/docs/sdk/svelte"},"next":{"title":"Advanced Topics","permalink":"/docs/advanced/"}}'),n=o("5893"),r=o("65"),i=o("3365");let a={},d="Headless Mode",l={},c={markup:{language:"html",content:` +
Loading...
+ + + + + + + + +`}},h={markup:{language:"html",content:` +
Loading...
+ + + + + + + + +`}},u={markup:{language:"html",content:` +
Loading...
+ + + + + + + + +`}},p=[{value:"Usage",id:"usage",level:2},{value:"Examples",id:"examples",level:2},{value:"Markdown Editor",id:"markdown-editor",level:3},{value:"MDX Editor",id:"mdx-editor",level:3},{value:"Python Interpreter",id:"python-interpreter",level:3}];function m(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"headless-mode",children:"Headless Mode"})}),"\n","\n",(0,n.jsxs)(t.p,{children:["The LiveCodes ",(0,n.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," can be used to create playgrounds in headless mode. In this mode, no visible output is displayed in the embedding web page. However, all ",(0,n.jsx)(t.a,{href:"/docs/sdk/js-ts#sdk-methods",children:"SDK methods"})," are accessible (e.g. for ",(0,n.jsx)(t.a,{href:"/docs/sdk/js-ts#setconfig",children:"updating code"}),", ",(0,n.jsx)(t.a,{href:"/docs/sdk/js-ts#getcode",children:"getting compiled code"}),", console output, ",(0,n.jsx)(t.a,{href:"/docs/sdk/js-ts#getcode",children:"result HTML"}),", ",(0,n.jsx)(t.a,{href:"/docs/sdk/js-ts#getshareurl",children:"shareable URLs"}),", ",(0,n.jsx)(t.a,{href:"/docs/sdk/js-ts#format",children:"formatting code"}),", ",(0,n.jsx)(t.a,{href:"/docs/sdk/js-ts#runtests",children:"running tests"}),", etc)."]}),"\n",(0,n.jsx)(t.p,{children:"This provides the power of leveraging the wide range of features and language support offered by LiveCodes, while retaining full control over the UI."}),"\n",(0,n.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,n.jsxs)(t.p,{children:["To create a headless playground, set the ",(0,n.jsx)(t.a,{href:"/docs/sdk/js-ts#embed-options",children:"embed option"})," ",(0,n.jsx)(t.a,{href:"/docs/sdk/js-ts#headless",children:(0,n.jsx)(t.code,{children:"headless"})})," to ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["Please note that in headless mode, the first parameter (",(0,n.jsx)(t.code,{children:"container"}),") of the function ",(0,n.jsx)(t.a,{href:"/docs/sdk/js-ts#createplayground",children:(0,n.jsx)(t.code,{children:"createPlayground"})})," is optional and can be omitted."]}),"\n",(0,n.jsx)("div",{style:{clear:"both"}}),"\n",(0,n.jsx)(t.p,{children:"Example:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground({\n view: 'headless',\n config: {\n markup: {\n language: 'markdown',\n content: '# Hello World!',\n },\n },\n}).then(async (playground) => {\n const code = await playground.getCode();\n console.log(code.markup.compiled); // \"

Hello World!

\"\n console.log(code.result); // (result page HTML)\n});\n"})}),"\n",(0,n.jsx)(t.h2,{id:"examples",children:"Examples"}),"\n",(0,n.jsx)(t.p,{children:"The following examples show how to use the headless mode to make a Markdown editor, an MDX editor and a Python interpreter."}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsx)(t.p,{children:"You may want to view the following playgrounds in full screen (using the full screen button in the top right of each playground)."})}),"\n",(0,n.jsx)(t.h3,{id:"markdown-editor",children:"Markdown Editor"}),"\n",(0,n.jsxs)(t.p,{children:["In this demo, code changes are watched using the SDK method ",(0,n.jsx)(t.a,{href:"/docs/sdk/js-ts#watch",children:(0,n.jsx)(t.code,{children:"watch('code', callback)"})}),". The callback function accepts an argument which is an object with the properties ",(0,n.jsx)(t.code,{children:"code"})," and ",(0,n.jsx)(t.code,{children:"config"})," (see ",(0,n.jsx)(t.a,{href:"/docs/sdk/js-ts#getcode",children:(0,n.jsx)(t.code,{children:"getCode"})})," and ",(0,n.jsx)(t.a,{href:"/docs/sdk/js-ts#getconfig",children:(0,n.jsx)(t.code,{children:"getConfig"})}),"). The compiled code is obtained as ",(0,n.jsx)(t.code,{children:"code.markup.compiled"}),"."]}),"\n","\n",(0,n.jsx)(i.Z,{config:c,height:"80vh"}),"\n",(0,n.jsx)(t.h3,{id:"mdx-editor",children:"MDX Editor"}),"\n",(0,n.jsxs)(t.p,{children:["In this demo, code changes are watched using the SDK method ",(0,n.jsx)(t.a,{href:"/docs/sdk/js-ts#watch",children:(0,n.jsx)(t.code,{children:"watch('code', callback)"})}),". The callback function accepts an argument which is an object with the properties ",(0,n.jsx)(t.code,{children:"code"})," and ",(0,n.jsx)(t.code,{children:"config"})," (see ",(0,n.jsx)(t.a,{href:"/docs/sdk/js-ts#getcode",children:(0,n.jsx)(t.code,{children:"getCode"})})," and ",(0,n.jsx)(t.a,{href:"/docs/sdk/js-ts#getconfig",children:(0,n.jsx)(t.code,{children:"getConfig"})}),"). The result HTML is obtained as ",(0,n.jsx)(t.code,{children:"code.result"}),"."]}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsxs)(t.p,{children:["If you do not want to run the result page in the headless playground and only want to get the generated result HTML, you can set the configuration option [",(0,n.jsx)(t.code,{children:"autoupdate](../configuration/configuration-object.mdx#autoupdate) to "}),"false`."]})}),"\n","\n",(0,n.jsx)(i.Z,{config:h,height:"80vh"}),"\n",(0,n.jsx)(t.h3,{id:"python-interpreter",children:"Python Interpreter"}),"\n",(0,n.jsxs)(t.p,{children:["In this demo, console output is obtained using the SDK method ",(0,n.jsx)(t.a,{href:"/docs/sdk/js-ts#watch",children:(0,n.jsx)(t.code,{children:"watch('code', callback)"})}),". The callback function accepts an argument which is an object with the properties ",(0,n.jsx)(t.code,{children:"method"})," and ",(0,n.jsx)(t.code,{children:"args"})," indicating the console method and the arguments that were passed (as an array)."]}),"\n","\n",(0,n.jsx)(i.Z,{config:u,height:"80vh"})]})}function g(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(m,{...e})}):m(e)}},3365:function(e,t,o){o.d(t,{Z:()=>f});var s=o("5893"),n=o("4200"),r=o("7294"),i=o("8294");function a(e){let t=(0,r.useRef)(null),[o,n]=(0,r.useState)(e.className||""),[a,d]=(0,r.useState)(e.style||{}),[l,c]=(0,r.useState)(e.height),[h,u]=(0,r.useState)(),[p,m]=(0,r.useState)(JSON.stringify(e.config||"")),[g,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:o,style:s,height:r,sdkReady:a,config:l,...y}=e;if(n(o||""),d(s||{}),c(r),h&&g===JSON.stringify(y)){if(p===JSON.stringify(l))return;m(JSON.stringify(l)),"string"==typeof l?fetch(l).then(e=>e.json()).then(e=>{h?.setConfig(e)}):l&&h.setConfig(l)}else f(JSON.stringify(y)),h?.destroy(),(0,i.T)(t.current,{config:l,...y}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:o,style:a,"data-height":l})}var d=o("1858"),l=o("3262"),c=o("1705"),h=o("7645"),u=o("8168"),p=o("8228"),m=o("5050");function g(e){let[t,o]=(0,r.useState)(e.js),[n,i]=(0,r.useState)(e.ts),[a,d]=(0,r.useState)(e.react),[g,f]=(0,r.useState)(e.vue),[y,v]=(0,r.useState)(e.svelte),w="3.7rem",[x,j]=(0,r.useState)(!0),[b,k]=(0,r.useState)(w),C=(0,r.useRef)(null),S=()=>{setTimeout(()=>{k(`calc(${C.current.offsetHeight}px + ${w})`)},5),setTimeout(()=>{k(`calc(${C.current.offsetHeight}px + ${w})`)},255)};return(0,r.useEffect)(()=>{if(l.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};o(e(t,"js")),i(e(n,"ts")),d(e(a,"jsx")),f(e(g,"html")),v(e(y,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":x,style:{height:x?w:b,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{j(!x),S()},children:"show code"}),(0,s.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:m.Z.collapsibleContent,children:(0,s.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,s.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:S},children:(0,s.jsx)(c.Z,{language:"js",children:t})}),(0,s.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:S},children:(0,s.jsx)(c.Z,{language:"ts",children:n})}),(0,s.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:S},children:(0,s.jsx)(c.Z,{language:"jsx",children:a})}),(0,s.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:S},children:(0,s.jsx)(c.Z,{language:"html",children:g})}),(0,s.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:S},children:(0,s.jsx)(c.Z,{language:"html",children:y})})]})})})]})}function f(e){let{className:t,style:o,showCode:r,height:i,...l}=e,{colorMode:c}=(0,n.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(l)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(l)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(l)}; + return (); +} + +`.trimStart(),f=` + + + +`,y=` + + +
+ +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:d.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(g,{js:u,ts:p,react:m,vue:f,svelte:y})]})}},8294:function(e,t,o){o.d(t,{T:function(){return n},r:function(){return r}});var s=o(7728);async function n(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:o={},headless:s,loading:n="lazy",view:i}=t,a=s||"headless"===i,d=null,l=null;if("string"==typeof e)d=document.querySelector(e);else if(e instanceof HTMLElement)d=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!d){if(a)S(d=document.createElement("div")),document.body.appendChild(d);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(r(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":n);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof o&&Object.keys(o).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!d)return;let t=d.dataset.height||d.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";d.style.height=e}"false"===d.dataset.defaultStyles||a||(d.style.backgroundColor||="#fff",d.style.border||="1px solid black",d.style.borderRadius||="8px",d.style.boxSizing||="border-box",d.style.padding||="0",d.style.width||="100%",d.style.height||=d.style.height||"300px",d.style.minHeight="200px",d.style.flexGrow="1",d.style.overflow||="hidden",d.style.resize||="vertical");let s="livecodes",r=d.querySelector(`iframe.${s}`),i=r||document.createElement("iframe");i.classList.add(s),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===n?"eager":"lazy"),a?S(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=d.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),l=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!l||l<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:o},h))}),i.onload=()=>{e(i)},i.src=c.href,r||d.appendChild(i)}),y=new Promise(e=>{addEventListener("message",function t(o){o.source===f.contentWindow&&o.origin===h&&o.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>m?Promise.reject(g):new Promise(async e=>{y.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await y,e()}),w=(e,t)=>new Promise(async(o,s)=>{if(m)return s(g);await v();let n=E();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===n&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?s(e.error):o(e)}}),f.contentWindow?.postMessage({method:e,id:n,args:t},h)}),x={},j=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(m)throw Error(g);return j.includes(e)?(w("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&w("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},k=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=k(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!x[t])return;let o=e.data?.payload;x[t]?.forEach(e=>{e(o)})});let C=()=>{Object.values(x).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function S(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(d))})},{rootMargin:"150px"}).observe(d);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>w("run"),format:e=>w("format",[e]),getShareUrl:e=>w("getShareUrl",[e]),getConfig:e=>w("getConfig",[e]),setConfig:e=>w("setConfig",[e]),getCode:()=>w("getCode"),show:(e,t)=>w("show",[e,t]),runTests:()=>w("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,o=Array(t>1?t-1:0),s=1;sy.settled?w("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:o="https://livecodes.io",params:n={},config:r={},headless:i,import:a,lite:d,view:l,...c}=t;try{e=new URL(o)}catch{throw Error(`${o} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[o,s]=t;void 0!==s&&e.searchParams.set(o,String(s))});let u="headless"===t.view||i;if(d&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),l&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==l?r.view=l:e.searchParams.set("view",l)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(r))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{h.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(n[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,o){o.d(t,{Z:function(){return a},a:function(){return i}});var s=o(7294);let n={},r=s.createContext(n);function i(e){let t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/3c1570ec.4b6838c4.js b/docs/assets/js/3c1570ec.4b6838c4.js new file mode 100644 index 0000000..1726364 --- /dev/null +++ b/docs/assets/js/3c1570ec.4b6838c4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6360"],{2414:function(e,s,n){n.r(s),n.d(s,{default:()=>p,frontMatter:()=>r,metadata:()=>o,assets:()=>d,toc:()=>l,contentTitle:()=>i});var o=JSON.parse('{"id":"api/internal/type-aliases/Processor","title":"Type Alias: Processor","description":"Processor: \\"postcss\\" \\\\| \\"postcssImportUrl\\" \\\\| \\"tailwindcss\\" \\\\| \\"windicss\\" \\\\| \\"unocss\\" \\\\| \\"tokencss\\" \\\\| \\"lightningcss\\" \\\\| \\"autoprefixer\\" \\\\| \\"postcssPresetEnv\\" \\\\| \\"cssmodules\\" \\\\| \\"purgecss\\" \\\\| \\"cssnano\\"","source":"@site/docs/api/internal/type-aliases/Processor.md","sourceDirName":"api/internal/type-aliases","slug":"/api/internal/type-aliases/Processor","permalink":"/docs/api/internal/type-aliases/Processor","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/type-aliases/Processor.md","tags":[],"version":"current","frontMatter":{}}'),c=n("5893"),t=n("65");let r={},i="Type Alias: Processor",d={},l=[{value:"Defined in",id:"defined-in",level:2}];function a(e){let s={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",strong:"strong",...(0,t.a)(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(s.header,{children:(0,c.jsx)(s.h1,{id:"type-alias-processor",children:"Type Alias: Processor"})}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"Processor"}),": ",(0,c.jsx)(s.code,{children:'"postcss"'})," | ",(0,c.jsx)(s.code,{children:'"postcssImportUrl"'})," | ",(0,c.jsx)(s.code,{children:'"tailwindcss"'})," | ",(0,c.jsx)(s.code,{children:'"windicss"'})," | ",(0,c.jsx)(s.code,{children:'"unocss"'})," | ",(0,c.jsx)(s.code,{children:'"tokencss"'})," | ",(0,c.jsx)(s.code,{children:'"lightningcss"'})," | ",(0,c.jsx)(s.code,{children:'"autoprefixer"'})," | ",(0,c.jsx)(s.code,{children:'"postcssPresetEnv"'})," | ",(0,c.jsx)(s.code,{children:'"cssmodules"'})," | ",(0,c.jsx)(s.code,{children:'"purgecss"'})," | ",(0,c.jsx)(s.code,{children:'"cssnano"'})]}),"\n"]}),"\n",(0,c.jsx)(s.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,c.jsx)(s.p,{children:(0,c.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1226",children:"models.ts:1226"})})]})}function p(e={}){let{wrapper:s}={...(0,t.a)(),...e.components};return s?(0,c.jsx)(s,{...e,children:(0,c.jsx)(a,{...e})}):a(e)}},65:function(e,s,n){n.d(s,{Z:function(){return i},a:function(){return r}});var o=n(7294);let c={},t=o.createContext(c);function r(e){let s=o.useContext(t);return o.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function i(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:r(e.components),o.createElement(t.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/3c778e3c.9d566116.js b/docs/assets/js/3c778e3c.9d566116.js new file mode 100644 index 0000000..3f42208 --- /dev/null +++ b/docs/assets/js/3c778e3c.9d566116.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4119"],{1437:function(e,n,d){d.r(n),d.d(n,{default:()=>a,frontMatter:()=>r,metadata:()=>i,assets:()=>o,toc:()=>t,contentTitle:()=>c});var i=JSON.parse('{"id":"api/internal/interfaces/UserConfig","title":"Interface: UserConfig","description":"Extends","source":"@site/docs/api/internal/interfaces/UserConfig.md","sourceDirName":"api/internal/interfaces","slug":"/api/internal/interfaces/UserConfig","permalink":"/docs/api/internal/interfaces/UserConfig","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/interfaces/UserConfig.md","tags":[],"version":"current","frontMatter":{}}'),s=d("5893"),l=d("65");let r={},c="Interface: UserConfig",o={},t=[{value:"Extends",id:"extends",level:2},{value:"Extended by",id:"extended-by",level:2},{value:"Properties",id:"properties",level:2},{value:"appLanguage",id:"applanguage",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"autosave",id:"autosave",level:3},{value:"Default",id:"default",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"autotest",id:"autotest",level:3},{value:"Default",id:"default-1",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"autoupdate",id:"autoupdate",level:3},{value:"Default",id:"default-2",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"closeBrackets",id:"closebrackets",level:3},{value:"Default",id:"default-3",level:4},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"delay",id:"delay",level:3},{value:"Default",id:"default-4",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"editor",id:"editor",level:3},{value:"Default",id:"default-5",level:4},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"editorMode",id:"editormode",level:3},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-7",level:4},{value:"editorTheme",id:"editortheme",level:3},{value:"Examples",id:"examples",level:4},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-8",level:4},{value:"emmet",id:"emmet",level:3},{value:"Default",id:"default-6",level:4},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-9",level:4},{value:"enableAI",id:"enableai",level:3},{value:"Default",id:"default-7",level:4},{value:"Inherited from",id:"inherited-from-5",level:4},{value:"Defined in",id:"defined-in-10",level:4},{value:"foldRegions",id:"foldregions",level:3},{value:"Default",id:"default-8",level:4},{value:"Inherited from",id:"inherited-from-6",level:4},{value:"Defined in",id:"defined-in-11",level:4},{value:"fontFamily",id:"fontfamily",level:3},{value:"Inherited from",id:"inherited-from-7",level:4},{value:"Defined in",id:"defined-in-12",level:4},{value:"fontSize",id:"fontsize",level:3},{value:"Default",id:"default-9",level:4},{value:"Inherited from",id:"inherited-from-8",level:4},{value:"Defined in",id:"defined-in-13",level:4},{value:"formatOnsave",id:"formatonsave",level:3},{value:"Default",id:"default-10",level:4},{value:"Defined in",id:"defined-in-14",level:4},{value:"layout",id:"layout",level:3},{value:"Default",id:"default-11",level:4},{value:"Defined in",id:"defined-in-15",level:4},{value:"lineNumbers",id:"linenumbers",level:3},{value:"Default",id:"default-12",level:4},{value:"Inherited from",id:"inherited-from-9",level:4},{value:"Defined in",id:"defined-in-16",level:4},{value:"recoverUnsaved",id:"recoverunsaved",level:3},{value:"Default",id:"default-13",level:4},{value:"Defined in",id:"defined-in-17",level:4},{value:"semicolons",id:"semicolons",level:3},{value:"Default",id:"default-14",level:4},{value:"Inherited from",id:"inherited-from-10",level:4},{value:"Defined in",id:"defined-in-18",level:4},{value:"showSpacing",id:"showspacing",level:3},{value:"Default",id:"default-15",level:4},{value:"Defined in",id:"defined-in-19",level:4},{value:"singleQuote",id:"singlequote",level:3},{value:"Default",id:"default-16",level:4},{value:"Inherited from",id:"inherited-from-11",level:4},{value:"Defined in",id:"defined-in-20",level:4},{value:"tabSize",id:"tabsize",level:3},{value:"Default",id:"default-17",level:4},{value:"Inherited from",id:"inherited-from-12",level:4},{value:"Defined in",id:"defined-in-21",level:4},{value:"theme",id:"theme",level:3},{value:"Default",id:"default-18",level:4},{value:"Inherited from",id:"inherited-from-13",level:4},{value:"Defined in",id:"defined-in-22",level:4},{value:"themeColor",id:"themecolor",level:3},{value:"Default",id:"default-19",level:4},{value:"Inherited from",id:"inherited-from-14",level:4},{value:"Defined in",id:"defined-in-23",level:4},{value:"trailingComma",id:"trailingcomma",level:3},{value:"Default",id:"default-20",level:4},{value:"Inherited from",id:"inherited-from-15",level:4},{value:"Defined in",id:"defined-in-24",level:4},{value:"useTabs",id:"usetabs",level:3},{value:"Default",id:"default-21",level:4},{value:"Inherited from",id:"inherited-from-16",level:4},{value:"Defined in",id:"defined-in-25",level:4},{value:"welcome",id:"welcome",level:3},{value:"Defined in",id:"defined-in-26",level:4},{value:"wordWrap",id:"wordwrap",level:3},{value:"Default",id:"default-22",level:4},{value:"Inherited from",id:"inherited-from-17",level:4},{value:"Defined in",id:"defined-in-27",level:4}];function h(e){let n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"interface-userconfig",children:"Interface: UserConfig"})}),"\n",(0,s.jsx)(n.h2,{id:"extends",children:"Extends"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig",children:(0,s.jsx)(n.code,{children:"EditorConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/FormatterConfig",children:(0,s.jsx)(n.code,{children:"FormatterConfig"})})]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"extended-by",children:"Extended by"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,s.jsx)(n.code,{children:"Config"})})}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,s.jsx)(n.h3,{id:"applanguage",children:"appLanguage"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"appLanguage"}),": ",(0,s.jsx)(n.code,{children:"undefined"})," | ",(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/AppLanguage",children:(0,s.jsx)(n.code,{children:"AppLanguage"})})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Sets the app UI language used."}),"\n",(0,s.jsx)(n.h4,{id:"defined-in",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L707",children:"models.ts:707"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"autosave",children:"autosave"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"autosave"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["If ",(0,s.jsx)(n.code,{children:"true"}),", the project is automatically saved on code change,\nafter time ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/configuration/configuration-object#delay",children:"delay"}),"."]}),"\n",(0,s.jsx)(n.h4,{id:"default",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"false\n"})}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-1",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L656",children:"models.ts:656"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"autotest",children:"autotest"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"autotest"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["If ",(0,s.jsx)(n.code,{children:"true"}),", the project is watched for code changes which trigger tests to auto-run."]}),"\n",(0,s.jsx)(n.h4,{id:"default-1",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"false\n"})}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-2",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L662",children:"models.ts:662"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"autoupdate",children:"autoupdate"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"autoupdate"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["If ",(0,s.jsx)(n.code,{children:"true"}),", the result page is automatically updated on code change,\nafter time ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/configuration/configuration-object#delay",children:"delay"}),"."]}),"\n",(0,s.jsx)(n.h4,{id:"default-2",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"true\n"})}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-3",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L649",children:"models.ts:649"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"closebrackets",children:"closeBrackets"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"closeBrackets"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Use auto-complete to close brackets and quotes."}),"\n",(0,s.jsx)(n.h4,{id:"default-3",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"true\n"})}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig",children:(0,s.jsx)(n.code,{children:"EditorConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig#closebrackets",children:(0,s.jsx)(n.code,{children:"closeBrackets"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-4",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L801",children:"models.ts:801"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"delay",children:"delay"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"delay"}),": ",(0,s.jsx)(n.code,{children:"number"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Time delay (in milliseconds) following code change,\nafter which the result page is updated (if ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/configuration/configuration-object#autoupdate",children:(0,s.jsx)(n.code,{children:"autoupdate"})})," is ",(0,s.jsx)(n.code,{children:"true"}),")\nand/or the project is saved (if ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/configuration/configuration-object#autosave",children:(0,s.jsx)(n.code,{children:"autosave"})})," is ",(0,s.jsx)(n.code,{children:"true"}),")."]}),"\n",(0,s.jsx)(n.h4,{id:"default-4",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"1500\n"})}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-5",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L670",children:"models.ts:670"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"editor",children:"editor"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"editor"}),": ",(0,s.jsx)(n.code,{children:"undefined"})," | ",(0,s.jsx)(n.code,{children:'"auto"'})," | ",(0,s.jsx)(n.code,{children:'"monaco"'})," | ",(0,s.jsx)(n.code,{children:'"codemirror"'})," | ",(0,s.jsx)(n.code,{children:'"codejar"'})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Selects the ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/editor-settings#code-editor",children:"code editor"})," to use."]}),"\n",(0,s.jsxs)(n.p,{children:["If ",(0,s.jsx)(n.code,{children:"undefined"})," (the default), Monaco editor is used on desktop,\nCodeMirror is used on mobile and in ",(0,s.jsx)(n.code,{children:"simple"})," mode,\nwhile CodeJar is used in ",(0,s.jsx)(n.code,{children:"codeblock"})," mode, in ",(0,s.jsx)(n.code,{children:"lite"})," mode and in ",(0,s.jsx)(n.code,{children:"readonly"})," playgrounds."]}),"\n",(0,s.jsxs)(n.p,{children:["If set to ",(0,s.jsx)(n.code,{children:"auto"}),", Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings."]}),"\n",(0,s.jsx)(n.h4,{id:"default-5",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"undefined\n"})}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from-1",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig",children:(0,s.jsx)(n.code,{children:"EditorConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig#editor",children:(0,s.jsx)(n.code,{children:"editor"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-6",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L722",children:"models.ts:722"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"editormode",children:"editorMode"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"editorMode"}),": ",(0,s.jsx)(n.code,{children:"undefined"})," | ",(0,s.jsx)(n.code,{children:'"vim"'})," | ",(0,s.jsx)(n.code,{children:'"emacs"'})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Sets ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/editor-settings#editor-modes",children:"editor mode"}),"."]}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from-2",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig",children:(0,s.jsx)(n.code,{children:"EditorConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig#editormode",children:(0,s.jsx)(n.code,{children:"editorMode"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-7",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L812",children:"models.ts:812"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"editortheme",children:"editorTheme"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"editorTheme"}),": ",(0,s.jsx)(n.code,{children:"undefined"})," | ",(0,s.jsx)(n.code,{children:"string"})," | ",(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/EditorTheme",children:(0,s.jsx)(n.code,{children:"EditorTheme"})}),"[]"]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Sets the ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/editor-settings",children:"code editor"})," themes."]}),"\n",(0,s.jsxs)(n.p,{children:["See docs for ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/configuration/configuration-object#editortheme",children:"editor themes"})," for details."]}),"\n",(0,s.jsx)(n.h4,{id:"examples",children:"Examples"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:'"vs"\n'})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:'"monaco:twilight, codemirror:one-dark"\n'})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:'["vs@light"]\n'})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:'["vs@light", "vs-dark@dark"]\n'})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:'["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]\n'})}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from-3",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig",children:(0,s.jsx)(n.code,{children:"EditorConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig#editortheme",children:(0,s.jsx)(n.code,{children:"editorTheme"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-8",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L748",children:"models.ts:748"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"emmet",children:"emmet"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"emmet"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Enables ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/editor-settings#emmet",children:"Emmet"}),"."]}),"\n",(0,s.jsx)(n.h4,{id:"default-6",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"true\n"})}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from-4",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig",children:(0,s.jsx)(n.code,{children:"EditorConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig#emmet",children:(0,s.jsx)(n.code,{children:"emmet"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-9",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L807",children:"models.ts:807"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"enableai",children:"enableAI"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"enableAI"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["If ",(0,s.jsx)(n.code,{children:"true"}),", ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/ai",children:"AI code assistant"})," is enabled."]}),"\n",(0,s.jsx)(n.h4,{id:"default-7",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"false\n"})}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from-5",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig",children:(0,s.jsx)(n.code,{children:"EditorConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig#enableai",children:(0,s.jsx)(n.code,{children:"enableAI"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-10",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L818",children:"models.ts:818"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"foldregions",children:"foldRegions"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"foldRegions"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["When set to ",(0,s.jsx)(n.code,{children:"true"}),", regions marked by ",(0,s.jsx)(n.code,{children:"#region"})," and ",(0,s.jsx)(n.code,{children:"#endregion"})," comments are folded when the project is loaded."]}),"\n",(0,s.jsx)(n.h4,{id:"default-8",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"false\n"})}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from-6",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig",children:(0,s.jsx)(n.code,{children:"EditorConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig#foldregions",children:(0,s.jsx)(n.code,{children:"foldRegions"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-11",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L795",children:"models.ts:795"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"fontfamily",children:"fontFamily"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"fontFamily"}),": ",(0,s.jsx)(n.code,{children:"undefined"})," | ",(0,s.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Sets the ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/editor-settings",children:"code editor"})," font family."]}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from-7",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig",children:(0,s.jsx)(n.code,{children:"EditorConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig#fontfamily",children:(0,s.jsx)(n.code,{children:"fontFamily"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-12",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L753",children:"models.ts:753"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"fontsize",children:"fontSize"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"fontSize"}),": ",(0,s.jsx)(n.code,{children:"undefined"})," | ",(0,s.jsx)(n.code,{children:"number"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Sets the font size."}),"\n",(0,s.jsxs)(n.p,{children:["If ",(0,s.jsx)(n.code,{children:"undefined"})," (the default), the font size is set to 14 for the full app and 12 for ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/embeds",children:"embeds"}),"."]}),"\n",(0,s.jsx)(n.h4,{id:"default-9",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"undefined\n"})}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from-8",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig",children:(0,s.jsx)(n.code,{children:"EditorConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig#fontsize",children:(0,s.jsx)(n.code,{children:"fontSize"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-13",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L761",children:"models.ts:761"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"formatonsave",children:"formatOnsave"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"formatOnsave"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["If ",(0,s.jsx)(n.code,{children:"true"}),", the code is automatically ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/code-format",children:"formatted"})," on saving the project."]}),"\n",(0,s.jsx)(n.h4,{id:"default-10",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"false\n"})}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-14",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L676",children:"models.ts:676"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"layout",children:"layout"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"layout"}),": ",(0,s.jsx)(n.code,{children:"undefined"})," | ",(0,s.jsx)(n.code,{children:'"horizontal"'})," | ",(0,s.jsx)(n.code,{children:'"vertical"'})," | ",(0,s.jsx)(n.code,{children:'"responsive"'})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Sets the app layout to horizontal or vertical.\nIf set to ",(0,s.jsx)(n.code,{children:'"responsive"'})," (the default) or ",(0,s.jsx)(n.code,{children:"undefined"}),",\nthe layout is vertical in small screens when the playground height is larger than its width,\notherwise horizontal."]}),"\n",(0,s.jsx)(n.h4,{id:"default-11",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:'"responsive"\n'})}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-15",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L685",children:"models.ts:685"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"linenumbers",children:"lineNumbers"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"lineNumbers"}),": ",(0,s.jsx)(n.code,{children:"boolean"})," | ",(0,s.jsx)(n.code,{children:'"relative"'})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Show line numbers in ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/editor-settings",children:"code editor"}),"."]}),"\n",(0,s.jsx)(n.h4,{id:"default-12",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"true\n"})}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from-9",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig",children:(0,s.jsx)(n.code,{children:"EditorConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig#linenumbers",children:(0,s.jsx)(n.code,{children:"lineNumbers"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-16",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L783",children:"models.ts:783"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"recoverunsaved",children:"recoverUnsaved"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"recoverUnsaved"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Enables ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/recover",children:"recovering last unsaved project"})," when the app is reopened."]}),"\n",(0,s.jsx)(n.h4,{id:"default-13",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"true\n"})}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-17",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L691",children:"models.ts:691"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"semicolons",children:"semicolons"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"semicolons"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Configures Prettier ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/code-format",children:"code formatter"})," to use semi-colons."]}),"\n",(0,s.jsx)(n.h4,{id:"default-14",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"true\n"})}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from-10",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/FormatterConfig",children:(0,s.jsx)(n.code,{children:"FormatterConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/FormatterConfig#semicolons",children:(0,s.jsx)(n.code,{children:"semicolons"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-18",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L838",children:"models.ts:838"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"showspacing",children:"showSpacing"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"showSpacing"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Enables ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/result#show-spacings",children:"showing element spacing"})," in the result page."]}),"\n",(0,s.jsx)(n.h4,{id:"default-15",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"false\n"})}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-19",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L697",children:"models.ts:697"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"singlequote",children:"singleQuote"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"singleQuote"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Configures Prettier ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/code-format",children:"code formatter"})," to use single quotes instead of double quotes."]}),"\n",(0,s.jsx)(n.h4,{id:"default-16",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"false\n"})}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from-11",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/FormatterConfig",children:(0,s.jsx)(n.code,{children:"FormatterConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/FormatterConfig#singlequote",children:(0,s.jsx)(n.code,{children:"singleQuote"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-20",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L843",children:"models.ts:843"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"tabsize",children:"tabSize"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"tabSize"}),": ",(0,s.jsx)(n.code,{children:"number"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"The number of spaces per indentation-level."}),"\n",(0,s.jsxs)(n.p,{children:["Also used in ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/code-format",children:"code formatting"}),"."]}),"\n",(0,s.jsx)(n.h4,{id:"default-17",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"2\n"})}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from-12",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/FormatterConfig",children:(0,s.jsx)(n.code,{children:"FormatterConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/FormatterConfig#tabsize",children:(0,s.jsx)(n.code,{children:"tabSize"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-21",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L777",children:"models.ts:777"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"theme",children:"theme"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"theme"}),": ",(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/Theme",children:(0,s.jsx)(n.code,{children:"Theme"})})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Sets the app ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/themes",children:"theme"})," to light/dark mode."]}),"\n",(0,s.jsx)(n.h4,{id:"default-18",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:'"dark"\n'})}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from-13",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig",children:(0,s.jsx)(n.code,{children:"EditorConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig#theme",children:(0,s.jsx)(n.code,{children:"theme"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-22",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L728",children:"models.ts:728"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"themecolor",children:"themeColor"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"themeColor"}),": ",(0,s.jsx)(n.code,{children:"undefined"})," | ",(0,s.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Sets the app theme color.\nIf ",(0,s.jsx)(n.code,{children:"undefined"}),", it is set to ",(0,s.jsx)(n.code,{children:'"hsl(214, 40%, 50%)"'}),"."]}),"\n",(0,s.jsx)(n.h4,{id:"default-19",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"undefined\n"})}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from-14",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig",children:(0,s.jsx)(n.code,{children:"EditorConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig#themecolor",children:(0,s.jsx)(n.code,{children:"themeColor"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-23",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L735",children:"models.ts:735"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"trailingcomma",children:"trailingComma"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"trailingComma"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Configures Prettier ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/code-format",children:"code formatter"})," to use ",(0,s.jsx)(n.a,{href:"https://prettier.io/docs/en/options.html#trailing-commas",children:"trailing commas"}),"."]}),"\n",(0,s.jsx)(n.h4,{id:"default-20",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"true\n"})}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from-15",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/FormatterConfig",children:(0,s.jsx)(n.code,{children:"FormatterConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/FormatterConfig#trailingcomma",children:(0,s.jsx)(n.code,{children:"trailingComma"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-24",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L849",children:"models.ts:849"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"usetabs",children:"useTabs"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"useTabs"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["If ",(0,s.jsx)(n.code,{children:"true"}),", lines are indented with tabs instead of spaces."]}),"\n",(0,s.jsxs)(n.p,{children:["Also used in ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/code-format",children:"code formatting"}),"."]}),"\n",(0,s.jsx)(n.h4,{id:"default-21",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"false\n"})}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from-16",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/FormatterConfig",children:(0,s.jsx)(n.code,{children:"FormatterConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/FormatterConfig#usetabs",children:(0,s.jsx)(n.code,{children:"useTabs"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-25",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L769",children:"models.ts:769"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"welcome",children:"welcome"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"welcome"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["If ",(0,s.jsx)(n.code,{children:"true"}),", the ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/welcome",children:"welcome screen"})," is displayed when the app loads."]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-26",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L702",children:"models.ts:702"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"wordwrap",children:"wordWrap"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"wordWrap"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"Enables word-wrap for long lines."}),"\n",(0,s.jsx)(n.h4,{id:"default-22",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"false\n"})}),"\n",(0,s.jsx)(n.h4,{id:"inherited-from-17",children:"Inherited from"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig",children:(0,s.jsx)(n.code,{children:"EditorConfig"})}),".",(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig#wordwrap",children:(0,s.jsx)(n.code,{children:"wordWrap"})})]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-27",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L789",children:"models.ts:789"})})]})}function a(e={}){let{wrapper:n}={...(0,l.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},65:function(e,n,d){d.d(n,{Z:function(){return c},a:function(){return r}});var i=d(7294);let s={},l=i.createContext(s);function r(e){let n=i.useContext(l);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/3ca596c0.442dc857.js b/docs/assets/js/3ca596c0.442dc857.js new file mode 100644 index 0000000..d5aa850 --- /dev/null +++ b/docs/assets/js/3ca596c0.442dc857.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1850"],{9889:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>a,metadata:()=>s,assets:()=>u,toc:()=>i,contentTitle:()=>c});var s=JSON.parse('{"id":"languages/purgecss","title":"PurgeCSS","description":"TODO...","source":"@site/docs/languages/purgecss.mdx","sourceDirName":"languages","slug":"/languages/purgecss","permalink":"/docs/languages/purgecss","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/purgecss.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Pug","permalink":"/docs/languages/pug"},"next":{"title":"Python (Wasm)","permalink":"/docs/languages/python-wasm"}}'),r=n("5893"),o=n("65");let a={},c="PurgeCSS",u={},i=[];function l(e){let t={h1:"h1",header:"header",p:"p",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"purgecss",children:"PurgeCSS"})}),"\n",(0,r.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},65:function(e,t,n){n.d(t,{Z:function(){return c},a:function(){return a}});var s=n(7294);let r={},o=s.createContext(r);function a(e){let t=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/3d26dfea.3281863e.js b/docs/assets/js/3d26dfea.3281863e.js new file mode 100644 index 0000000..e066fb2 --- /dev/null +++ b/docs/assets/js/3d26dfea.3281863e.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4775"],{7341:function(e,t,n){n.r(t),n.d(t,{default:()=>u,frontMatter:()=>a,metadata:()=>s,assets:()=>c,toc:()=>d,contentTitle:()=>l});var s=JSON.parse('{"id":"languages/fennel","title":"Fennel","description":"Fennel is a programming language that brings together the speed, simplicity, and reach of Lua with the flexibility of a lisp syntax and macro system.","source":"@site/docs/languages/fennel.mdx","sourceDirName":"languages","slug":"/languages/fennel","permalink":"/docs/languages/fennel","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/fennel.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Eta","permalink":"/docs/languages/eta"},"next":{"title":"Flow","permalink":"/docs/languages/flow"}}'),i=n("5893"),r=n("65"),o=n("3365");let a={},l="Fennel",c={},d=[{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"fennel",children:"Fennel"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://fennel-lang.org/",children:"Fennel"})," is a programming language that brings together the speed, simplicity, and reach of ",(0,i.jsx)(t.a,{href:"https://www.lua.org/",children:"Lua"})," with the flexibility of a ",(0,i.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Lisp_(programming_language)",children:"lisp syntax and macro system"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["Fennel code is compiled to Lua, which then runs in the browser using ",(0,i.jsx)(t.a,{href:"https://fengari.io/",children:"Fengari"}),". See documentation for Lua language support in LiveCodes ",(0,i.jsx)(t.a,{href:"/docs/languages/lua",children:"here"}),"."]}),"\n",(0,i.jsx)(t.admonition,{title:"Note",type:"info",children:(0,i.jsxs)(t.p,{children:["Lisp language family supported in LiveCodes includes ",(0,i.jsx)(t.a,{href:"/docs/languages/commonlisp",children:"Common Lisp"}),", ",(0,i.jsx)(t.a,{href:"/docs/languages/scheme",children:"Scheme"}),", ",(0,i.jsx)(t.a,{href:"/docs/languages/clojurescript",children:"ClojureScript"})," and ",(0,i.jsx)(t.a,{href:"/docs/languages/fennel",children:"Fennel"}),"."]})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsxs)(t.p,{children:["JavaScript interoperability and DOM access is achieved using ",(0,i.jsxs)(t.a,{href:"https://github.com/fengari-lua/fengari-interop",children:[(0,i.jsx)(t.code,{children:'"js"'})," module"]}),"."]}),"\n","\n",(0,i.jsx)(t.p,{children:"This example demonstrates usage, JavaScript interoperability and DOM access:"}),"\n",(0,i.jsx)(o.Z,{template:"fennel",height:"80vh"}),"\n",(0,i.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"fennel"})}),"\n",(0,i.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:".fnl"})}),"\n",(0,i.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"script"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://fennel-lang.org/",children:"Fennel"})}),"\n",(0,i.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,i.jsx)(t.p,{children:"Fennel v1.3.0"}),"\n",(0,i.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(t.p,{children:["Using ",(0,i.jsx)(t.a,{href:"https://shaunlebron.github.io/parinfer/",children:"Parinfer"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?template=fennel",children:"https://livecodes.io/?template=fennel"})}),"\n",(0,i.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://fennel-lang.org/",children:"Fennel"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://fennel-lang.org/tutorial",children:"Fennel tutorial"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.lua.org/",children:"Lua"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://fengari.io/",children:"Fengari"})}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"/docs/languages/lua",children:"lua"})," in LiveCodes"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"/docs/languages/commonlisp",children:"Common Lisp"})," in LiveCodes"]}),"\n"]})]})}function u(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},3365:function(e,t,n){n.d(t,{Z:()=>m});var s=n("5893"),i=n("4200"),r=n("7294"),o=n("8294");function a(e){let t=(0,r.useRef)(null),[n,i]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[c,d]=(0,r.useState)(e.height),[h,u]=(0,r.useState)(),[g,p]=(0,r.useState)(JSON.stringify(e.config||"")),[f,m]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:n,style:s,height:r,sdkReady:a,config:c,...v}=e;if(i(n||""),l(s||{}),d(r),h&&f===JSON.stringify(v)){if(g===JSON.stringify(c))return;p(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else m(JSON.stringify(v)),h?.destroy(),(0,o.T)(t.current,{config:c,...v}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:n,style:a,"data-height":c})}var l=n("1858"),c=n("3262"),d=n("1705"),h=n("7645"),u=n("8168"),g=n("8228"),p=n("5050");function f(e){let[t,n]=(0,r.useState)(e.js),[i,o]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[f,m]=(0,r.useState)(e.vue),[v,y]=(0,r.useState)(e.svelte),x="3.7rem",[j,w]=(0,r.useState)(!0),[b,S]=(0,r.useState)(x),C=(0,r.useRef)(null),L=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},255)};return(0,r.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};n(e(t,"js")),o(e(i,"ts")),l(e(a,"jsx")),m(e(f,"html")),y(e(v,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${g.Z.details}`,"data-collapsed":j,style:{height:j?x:b,overflow:"hidden",willChange:"height",transition:`height ${j?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{w(!j),L()},children:"show code"}),(0,s.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:p.Z.collapsibleContent,children:(0,s.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,s.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:L},children:(0,s.jsx)(d.Z,{language:"js",children:t})}),(0,s.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:L},children:(0,s.jsx)(d.Z,{language:"ts",children:i})}),(0,s.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:L},children:(0,s.jsx)(d.Z,{language:"jsx",children:a})}),(0,s.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:L},children:(0,s.jsx)(d.Z,{language:"html",children:f})}),(0,s.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:L},children:(0,s.jsx)(d.Z,{language:"html",children:v})})]})})})]})}function m(e){let{className:t,style:n,showCode:r,height:o,...c}=e,{colorMode:d}=(0,i.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),g=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(c)}; + return (); +} + +`.trimStart(),m=` + + + +`,v=` + + +
+ +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(f,{js:u,ts:g,react:p,vue:m,svelte:v})]})}},8294:function(e,t,n){n.d(t,{T:function(){return i},r:function(){return r}});var s=n(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:s,loading:i="lazy",view:o}=t,a=s||"headless"===o,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)L(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":i);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&d.searchParams.set("config","sdk");let g=t.params;"object"==typeof g&&Object.keys(g).length>0&&JSON.stringify(g).length<1800&&Object.keys(g).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(g[e])))});let p=!1,f="Cannot call API methods after calling `destroy()`.",m=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",r=l.querySelector(`iframe.${s}`),o=r||document.createElement("iframe");o.classList.add(s),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===i?"eager":"lazy"),a?L(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),o.onload=()=>{e(o)},o.src=d.href,r||l.appendChild(o)}),v=new Promise(e=>{addEventListener("message",function t(n){n.source===m.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>p?Promise.reject(f):new Promise(async e=>{v.settled&&e(),m.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),x=(e,t)=>new Promise(async(n,s)=>{if(p)return s(f);await y();let i=E();addEventListener("message",function t(r){if(r.source===m.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===i&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?s(e.error):n(e)}}),m.contentWindow?.postMessage({method:e,id:i,args:t},h)}),j={},w=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(p)throw Error(f);return w.includes(e)?(x("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==m.contentWindow||e.origin!==h||!t||!j[t])return;let n=e.data?.payload;j[t]?.forEach(e=>{e(n)})});let C=()=>{Object.values(j).forEach(e=>{e.length=0}),m?.remove?.(),p=!0};function L(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;sv.settled?x("destroy").then(C):p?Promise.reject(f):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:i={},config:r={},headless:o,import:a,lite:l,view:c,...d}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let u="headless"===t.view||o;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(r))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{h.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return a},a:function(){return o}});var s=n(7294);let i={},r=s.createContext(i);function o(e){let t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/3d306dde.ce2cac09.js b/docs/assets/js/3d306dde.ce2cac09.js new file mode 100644 index 0000000..efcdb9a --- /dev/null +++ b/docs/assets/js/3d306dde.ce2cac09.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2907"],{5963:function(e,n,t){t.r(n),t.d(n,{default:()=>h,frontMatter:()=>i,metadata:()=>s,assets:()=>c,toc:()=>l,contentTitle:()=>a});var s=JSON.parse('{"id":"api/internal/type-aliases/WatchLoad","title":"Type Alias: WatchLoad()","description":"WatchLoad: (event, fn) => object","source":"@site/docs/api/internal/type-aliases/WatchLoad.md","sourceDirName":"api/internal/type-aliases","slug":"/api/internal/type-aliases/WatchLoad","permalink":"/docs/api/internal/type-aliases/WatchLoad","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/type-aliases/WatchLoad.md","tags":[],"version":"current","frontMatter":{}}'),r=t("5893"),d=t("65");let i={},a="Type Alias: WatchLoad()",c={},l=[{value:"Parameters",id:"parameters",level:2},{value:"Returns",id:"returns",level:2},{value:"remove()",id:"remove",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Defined in",id:"defined-in",level:2}];function o(e){let n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",p:"p",strong:"strong",...(0,d.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"type-alias-watchload",children:"Type Alias: WatchLoad()"})}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"WatchLoad"}),": (",(0,r.jsx)(n.code,{children:"event"}),", ",(0,r.jsx)(n.code,{children:"fn"}),") => ",(0,r.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Called when the playground first loads."}),"\n",(0,r.jsx)(n.h2,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"event"}),": ",(0,r.jsx)(n.code,{children:'"load"'})]}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"fn"})]}),"\n",(0,r.jsx)(n.h2,{id:"returns",children:"Returns"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"object"})}),"\n",(0,r.jsx)(n.h3,{id:"remove",children:"remove()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"remove"}),": () => ",(0,r.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,r.jsx)(n.h4,{id:"returns-1",children:"Returns"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"void"})}),"\n",(0,r.jsx)(n.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L225",children:"models.ts:225"})})]})}function h(e={}){let{wrapper:n}={...(0,d.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}},65:function(e,n,t){t.d(n,{Z:function(){return a},a:function(){return i}});var s=t(7294);let r={},d=s.createContext(r);function i(e){let n=s.useContext(d);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(d.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/3ec64a7f.de1f5642.js b/docs/assets/js/3ec64a7f.de1f5642.js new file mode 100644 index 0000000..63b3d49 --- /dev/null +++ b/docs/assets/js/3ec64a7f.de1f5642.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7649"],{3782:function(e,n,d){d.r(n),d.d(n,{default:()=>h,frontMatter:()=>o,metadata:()=>l,assets:()=>t,toc:()=>r,contentTitle:()=>c});var l=JSON.parse('{"id":"api/internal/interfaces/AppConfig","title":"Interface: AppConfig","description":"These are properties that define how the app behaves.","source":"@site/docs/api/internal/interfaces/AppConfig.md","sourceDirName":"api/internal/interfaces","slug":"/api/internal/interfaces/AppConfig","permalink":"/docs/api/internal/interfaces/AppConfig","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/interfaces/AppConfig.md","tags":[],"version":"current","frontMatter":{}}'),s=d("5893"),i=d("65");let o={},c="Interface: AppConfig",t={},r=[{value:"Extended by",id:"extended-by",level:2},{value:"Properties",id:"properties",level:2},{value:"allowLangChange",id:"allowlangchange",level:3},{value:"Default",id:"default",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"mode",id:"mode",level:3},{value:"Default",id:"default-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"readonly",id:"readonly",level:3},{value:"Default",id:"default-2",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"tools",id:"tools",level:3},{value:"Type declaration",id:"type-declaration",level:4},{value:"active",id:"active",level:5},{value:"enabled",id:"enabled",level:5},{value:"status",id:"status",level:5},{value:"Default",id:"default-3",level:4},{value:"Example",id:"example",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"view?",id:"view",level:3},{value:"Default",id:"default-4",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"zoom",id:"zoom",level:3},{value:"Defined in",id:"defined-in-5",level:4}];function a(e){let n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"interface-appconfig",children:"Interface: AppConfig"})}),"\n",(0,s.jsx)(n.p,{children:"These are properties that define how the app behaves."}),"\n",(0,s.jsx)(n.h2,{id:"extended-by",children:"Extended by"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,s.jsx)(n.code,{children:"Config"})})}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,s.jsx)(n.h3,{id:"allowlangchange",children:"allowLangChange"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"allowLangChange"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["If ",(0,s.jsx)(n.code,{children:"false"}),", the UI will not show the menu that allows changing editor language."]}),"\n",(0,s.jsx)(n.h4,{id:"default",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"true\n"})}),"\n",(0,s.jsx)(n.h4,{id:"defined-in",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L603",children:"models.ts:603"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"mode",children:"mode"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"mode"}),": ",(0,s.jsx)(n.code,{children:'"focus"'})," | ",(0,s.jsx)(n.code,{children:'"full"'})," | ",(0,s.jsx)(n.code,{children:'"result"'})," | ",(0,s.jsx)(n.code,{children:'"editor"'})," | ",(0,s.jsx)(n.code,{children:'"lite"'})," | ",(0,s.jsx)(n.code,{children:'"simple"'})," | ",(0,s.jsx)(n.code,{children:'"codeblock"'})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Sets the ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/display-modes",children:"display mode"}),"."]}),"\n",(0,s.jsx)(n.h4,{id:"default-1",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:'"full"\n'})}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-1",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L615",children:"models.ts:615"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"readonly",children:"readonly"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"readonly"}),": ",(0,s.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["If ",(0,s.jsx)(n.code,{children:"true"}),", editors are loaded in read-only mode, where the user is not allowed to change the code."]}),"\n",(0,s.jsxs)(n.p,{children:["By default, when readonly is set to true, the light-weight code editor ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/editor-settings#code-editor",children:"CodeJar"})," is used.\nIf you wish to use another editor, set the ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/configuration/configuration-object#editor",children:"editor"})," property."]}),"\n",(0,s.jsx)(n.h4,{id:"default-2",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:"false\n"})}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-2",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L597",children:"models.ts:597"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"tools",children:"tools"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"tools"}),": ",(0,s.jsx)(n.code,{children:"Partial"}),"<",(0,s.jsx)(n.code,{children:"object"}),">"]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Sets enabled and active tools and status of ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/tools-pane",children:"tools pane"}),"."]}),"\n",(0,s.jsx)(n.h4,{id:"type-declaration",children:"Type declaration"}),"\n",(0,s.jsx)(n.h5,{id:"active",children:"active"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"active"}),": ",(0,s.jsx)(n.code,{children:'""'})," | ",(0,s.jsx)(n.code,{children:'"console"'})," | ",(0,s.jsx)(n.code,{children:'"compiled"'})," | ",(0,s.jsx)(n.code,{children:'"tests"'})]}),"\n"]}),"\n",(0,s.jsx)(n.h5,{id:"enabled",children:"enabled"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"enabled"}),": ",(0,s.jsx)(n.code,{children:'"all"'})," | (",(0,s.jsx)(n.code,{children:'"console"'})," | ",(0,s.jsx)(n.code,{children:'"compiled"'})," | ",(0,s.jsx)(n.code,{children:'"tests"'}),")[]"]}),"\n"]}),"\n",(0,s.jsx)(n.h5,{id:"status",children:"status"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"status"}),": ",(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/ToolsPaneStatus",children:(0,s.jsx)(n.code,{children:"ToolsPaneStatus"})})]}),"\n"]}),"\n",(0,s.jsx)(n.h4,{id:"default-3",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:'{ enabled: "all", active: "", status: "" }\n'})}),"\n",(0,s.jsx)(n.h4,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-js",children:'{\n "tools": {\n "enabled": ["console", "compiled"],\n "active": "console",\n "status": "open"\n }\n}\n'})}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-3",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L631",children:"models.ts:631"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"view",children:"view?"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"optional"})," ",(0,s.jsx)(n.strong,{children:"view"}),": ",(0,s.jsx)(n.code,{children:'"split"'})," | ",(0,s.jsx)(n.code,{children:'"result"'})," | ",(0,s.jsx)(n.code,{children:'"editor"'})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Sets the ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/default-view",children:"default view"})," for the playground."]}),"\n",(0,s.jsx)(n.h4,{id:"default-4",children:"Default"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-ts",children:'"split"\n'})}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-4",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L609",children:"models.ts:609"})}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h3,{id:"zoom",children:"zoom"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"zoom"}),": ",(0,s.jsx)(n.code,{children:"0.25"})," | ",(0,s.jsx)(n.code,{children:"0.5"})," | ",(0,s.jsx)(n.code,{children:"1"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Sets result page ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/result#result-page-zoom",children:"zoom level"}),"."]}),"\n",(0,s.jsx)(n.h4,{id:"defined-in-5",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L640",children:"models.ts:640"})})]})}function h(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},65:function(e,n,d){d.d(n,{Z:function(){return c},a:function(){return o}});var l=d(7294);let s={},i=l.createContext(s);function o(e){let n=l.useContext(i);return l.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),l.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/3f03fa75.9b91af19.js b/docs/assets/js/3f03fa75.9b91af19.js new file mode 100644 index 0000000..0e98223 --- /dev/null +++ b/docs/assets/js/3f03fa75.9b91af19.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4330"],{7753:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>u,metadata:()=>r,assets:()=>a,toc:()=>i,contentTitle:()=>c});var r=JSON.parse('{"id":"features/emmet","title":"Emmet Support","description":"","source":"@site/docs/features/emmet.mdx","sourceDirName":"features","slug":"/features/emmet","permalink":"/docs/features/emmet","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/emmet.mdx","tags":[],"version":"current","frontMatter":{}}'),o=n("5893"),s=n("65");let u={},c="Emmet Support",a={},i=[];function m(e){let t={h1:"h1",header:"header",...(0,s.a)(),...e.components};return(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"emmet-support",children:"Emmet Support"})})}function d(e={}){let{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},65:function(e,t,n){n.d(t,{Z:function(){return c},a:function(){return u}});var r=n(7294);let o={},s=r.createContext(o);function u(e){let t=r.useContext(s);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:u(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/3f6b491d.08f5ca6a.js b/docs/assets/js/3f6b491d.08f5ca6a.js new file mode 100644 index 0000000..35025f2 --- /dev/null +++ b/docs/assets/js/3f6b491d.08f5ca6a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2936"],{7505:function(e,t,s){s.r(t),s.d(t,{default:()=>d,frontMatter:()=>c,metadata:()=>n,assets:()=>i,toc:()=>l,contentTitle:()=>o});var n=JSON.parse('{"id":"languages/assemblyscript","title":"AssemblyScript","description":"TODO...","source":"@site/docs/languages/assemblyscript.mdx","sourceDirName":"languages","slug":"/languages/assemblyscript","permalink":"/docs/languages/assemblyscript","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/assemblyscript.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"AsciiDoc","permalink":"/docs/languages/asciidoc"},"next":{"title":"Astro","permalink":"/docs/languages/astro"}}'),r=s("5893"),a=s("65");let c={},o="AssemblyScript",i={},l=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,a.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"assemblyscript",children:"AssemblyScript"})}),"\n",(0,r.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},65:function(e,t,s){s.d(t,{Z:function(){return o},a:function(){return c}});var n=s(7294);let r={},a=n.createContext(r);function c(e){let t=n.useContext(a);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/3f86c49b.4d5b3a26.js b/docs/assets/js/3f86c49b.4d5b3a26.js new file mode 100644 index 0000000..5b504c3 --- /dev/null +++ b/docs/assets/js/3f86c49b.4d5b3a26.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1647"],{6715:function(e,t,s){s.r(t),s.d(t,{config:()=>c,config2:()=>u,default:()=>g,frontMatter:()=>a,metadata:()=>n,assets:()=>d,params:()=>h,toc:()=>p,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/ejs","title":"EJS","description":"Embedded JavaScript templating.","source":"@site/docs/languages/ejs.mdx","sourceDirName":"languages","slug":"/languages/ejs","permalink":"/docs/languages/ejs","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/ejs.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"doT","permalink":"/docs/languages/dot"},"next":{"title":"Eta","permalink":"/docs/languages/eta"}}'),r=s("5893"),i=s("65"),o=s("3365");let a={},l="EJS",d={},c={markup:{language:"ejs",content:"Hello <%= name %>!"},customSettings:{template:{data:{name:"LiveCodes"}}}},h={compiled:"open"},u={markup:{language:"ejs",content:"Hello <%= name %>!"},script:{language:"javascript",content:'window.livecodes.templateData = { name: "LiveCodes" };'},customSettings:{template:{prerender:!1}},activeEditor:"script"},p=[{value:"Usage",id:"usage",level:2},{value:"Pre-rendered (Default)",id:"pre-rendered-default",level:3},{value:"Dynamic",id:"dynamic",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Pre-rendered",id:"pre-rendered",level:3},{value:"Dynamic",id:"dynamic-1",level:3},{value:"Links",id:"links",level:2}];function m(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"ejs",children:"EJS"})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://ejs.co/",children:"Embedded JavaScript templating."})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.p,{children:"There are 2 modes for rendering:"}),"\n",(0,r.jsx)(t.h3,{id:"pre-rendered-default",children:"Pre-rendered (Default)"}),"\n",(0,r.jsxs)(t.p,{children:["The values of the expressions are evaluated and added to the template during compilation of the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["The values of all expressions should be supplied in advance using ",(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," to the property ",(0,r.jsx)(t.code,{children:"template.data"})," which accepts an object of key-value pairs."]}),"\n",(0,r.jsxs)(t.p,{children:["Example: This provides the value of the expression ",(0,r.jsx)(t.code,{children:"name"})]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "data": {\n "name": "LiveCodes"\n }\n }\n}\n'})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"#pre-rendered",children:"Full example below"})}),"\n",(0,r.jsx)(t.h3,{id:"dynamic",children:"Dynamic"}),"\n",(0,r.jsxs)(t.p,{children:["To use this mode, the property ",(0,r.jsx)(t.code,{children:"template.prerender"})," in ",(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," should be set to ",(0,r.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "prerender": false\n }\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," runtime."]}),"\n",(0,r.jsxs)(t.p,{children:["This can be achieved in JavaScript (or any ",(0,r.jsx)(t.a,{href:"/docs/languages/",children:"language"})," that compiles to it) by assigning ",(0,r.jsx)(t.code,{children:"window.livecodes.templateData"})," to an object with the data."]}),"\n",(0,r.jsxs)(t.p,{children:["Please note that template rendering occurs on ",(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event",children:"page load"}),", so the assignment must occur before that."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:'title="Script Editor (JS)"',children:"window.livecodes.templateData = { name: 'LiveCodes' };\n"})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"#dynamic-1",children:"Full example below"})}),"\n",(0,r.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"ejs"})}),"\n",(0,r.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:".ejs"})}),"\n",(0,r.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"markup"})}),"\n",(0,r.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsxs)(t.p,{children:["The official ",(0,r.jsx)(t.a,{href:"https://www.npmjs.com/package/ejs",children:"EJS compiler"}),"."]}),"\n",(0,r.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"ejs"}),": v3.1.10"]}),"\n",(0,r.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsxs)(t.p,{children:["Using ",(0,r.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,r.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,r.jsx)(t.code,{children:"ejs"})," are passed as a JSON object to the ",(0,r.jsx)(t.a,{href:"https://ejs.co/#docs",children:(0,r.jsx)(t.code,{children:"compile"})})," method during compile. Please check the ",(0,r.jsx)(t.a,{href:"https://ejs.co/#docs",children:"documentation"})," for full reference."]}),"\n",(0,r.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Example:"})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "ejs": {\n "delimiter": "%"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n",(0,r.jsx)(t.h3,{id:"pre-rendered",children:"Pre-rendered"}),"\n","\n","\n",(0,r.jsx)(o.Z,{config:c,params:h}),"\n",(0,r.jsx)(t.h3,{id:"dynamic-1",children:"Dynamic"}),"\n","\n",(0,r.jsx)(o.Z,{config:u}),"\n",(0,r.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://ejs.co/",children:"Official website"})}),"\n"]})]})}function g(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),r=s("4200"),i=s("7294"),o=s("8294");function a(e){let t=(0,i.useRef)(null),[s,r]=(0,i.useState)(e.className||""),[a,l]=(0,i.useState)(e.style||{}),[d,c]=(0,i.useState)(e.height),[h,u]=(0,i.useState)(),[p,m]=(0,i.useState)(JSON.stringify(e.config||"")),[g,f]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:i,sdkReady:a,config:d,...v}=e;if(r(s||""),l(n||{}),c(i),h&&g===JSON.stringify(v)){if(p===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(v)),h?.destroy(),(0,o.T)(t.current,{config:d,...v}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,i.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":d})}var l=s("1858"),d=s("3262"),c=s("1705"),h=s("7645"),u=s("8168"),p=s("8228"),m=s("5050");function g(e){let[t,s]=(0,i.useState)(e.js),[r,o]=(0,i.useState)(e.ts),[a,l]=(0,i.useState)(e.react),[g,f]=(0,i.useState)(e.vue),[v,j]=(0,i.useState)(e.svelte),x="3.7rem",[y,w]=(0,i.useState)(!0),[b,S]=(0,i.useState)(x),E=(0,i.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${x})`)},255)};return(0,i.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),o(e(r,"ts")),l(e(a,"jsx")),f(e(g,"html")),j(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":y,style:{height:y?x:b,overflow:"hidden",willChange:"height",transition:`height ${y?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{w(!y),C()},children:"show code"}),(0,n.jsx)("div",{ref:E,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"ts",children:r})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"jsx",children:a})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:i,height:o,...d}=e,{colorMode:c}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (); +} + +`.trimStart(),f=` + + + +`,v=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:u,ts:p,react:m,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return i}});var n=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:r="lazy",view:o}=t,a=n||"headless"===o,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)C(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(i(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":r);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",i=l.querySelector(`iframe.${n}`),o=i||document.createElement("iframe");o.classList.add(n),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===r?"eager":"lazy"),a?C(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),o.onload=()=>{e(o)},o.src=c.href,i||l.appendChild(o)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),j=()=>m?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),x=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await j();let r=P();addEventListener("message",function t(i){if(i.source===f.contentWindow&&i.origin===h&&i.data?.type==="livecodes-api-response"&&i.data?.id===r&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},h)}),y={},w=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(m)throw Error(g);return w.includes(e)?(x("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!y[t])return;let s=e.data?.payload;y[t]?.forEach(e=>{e(s)})});let E=()=>{Object.values(y).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nv.settled?x("destroy").then(E):m?Promise.reject(g):(E(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:i={},headless:o,import:a,lite:l,view:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||o;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==d?i.view=d:e.searchParams.set("view",d)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(i))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return o}});var n=s(7294);let r={},i=n.createContext(r);function o(e){let t=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/403159e4.8887f14b.js b/docs/assets/js/403159e4.8887f14b.js new file mode 100644 index 0000000..e3fc68e --- /dev/null +++ b/docs/assets/js/403159e4.8887f14b.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1197"],{6807:function(e,t,s){s.r(t),s.d(t,{default:()=>h,frontMatter:()=>l,metadata:()=>r,assets:()=>c,toc:()=>d,contentTitle:()=>a});var r=JSON.parse('{"id":"features/code-prefill","title":"Code Prefill","description":"There are many ways to pre-fill code into playgrounds. This is generally achieved either by the SDK or using query params.","source":"@site/docs/features/code-prefill.mdx","sourceDirName":"features","slug":"/features/code-prefill","permalink":"/docs/features/code-prefill","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/code-prefill.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Permanent URL","permalink":"/docs/features/permanent-url"},"next":{"title":"Data URLs","permalink":"/docs/features/data-urls"}}'),o=s("5893"),n=s("65"),i=s("3365");let l={},a="Code Prefill",c={},d=[{value:"Prefill using SDK",id:"prefill-using-sdk",level:2},{value:"config",id:"config",level:3},{value:"import",id:"import",level:3},{value:"template",id:"template",level:3},{value:"Prefill using query params",id:"prefill-using-query-params",level:2},{value:"Auto-Prefill from page DOM",id:"auto-prefill-from-page-dom",level:2},{value:"Related",id:"related",level:2}];function u(e){let t={a:"a",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,n.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"code-prefill",children:"Code Prefill"})}),"\n","\n",(0,o.jsxs)(t.p,{children:["There are many ways to pre-fill code into playgrounds. This is generally achieved either by the ",(0,o.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," or using ",(0,o.jsx)(t.a,{href:"/docs/configuration/query-params",children:"query params"}),"."]}),"\n",(0,o.jsx)(t.h2,{id:"prefill-using-sdk",children:"Prefill using SDK"}),"\n",(0,o.jsxs)(t.p,{children:["When creating an embedded playground, the following ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#embed-options",children:"embed options"})," allow prefill with code:"]}),"\n",(0,o.jsx)(t.h3,{id:"config",children:"config"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#config",children:"EmbedOptions.config"})}),"\n",(0,o.jsxs)(t.p,{children:["loads a ",(0,o.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configuration object"})," (or a URL to JSON file representing the configuration object)"]}),"\n",(0,o.jsx)(i.Z,{config:{markup:{language:"html",content:"

Hello World!

"},style:{language:"css",content:"h1 { color: blue; }"}}}),"\n",(0,o.jsx)(t.h3,{id:"import",children:"import"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#import",children:"EmbedOptions.import"})}),"\n",(0,o.jsxs)(t.p,{children:["allows ",(0,o.jsx)(t.a,{href:"/docs/features/import",children:"importing"})," from many sources."]}),"\n",(0,o.jsx)(t.p,{children:"Examples:"}),"\n",(0,o.jsx)(t.p,{children:"Import GitHub directory:"}),"\n",(0,o.jsx)(i.Z,{import:"https://github.com/bradtraversy/50projects50days/tree/master/progress-steps"}),"\n",(0,o.jsx)(t.p,{children:"Import shared project:"}),"\n",(0,o.jsx)(i.Z,{import:"id/6ys2b8txf33"}),"\n",(0,o.jsx)(t.h3,{id:"template",children:"template"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#template",children:"EmbedOptions.template"})}),"\n",(0,o.jsxs)(t.p,{children:["loads one of the ",(0,o.jsx)(t.a,{href:"/docs/features/templates",children:"starter templates"}),"."]}),"\n",(0,o.jsx)(i.Z,{template:"react"}),"\n",(0,o.jsx)(t.h2,{id:"prefill-using-query-params",children:"Prefill using query params"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"/docs/configuration/query-params",children:"Query parameters"})," can provide easy and powerful ways for configuring the playground."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n",(0,o.jsx)("a",{href:"https://livecodes.io/?md=**Hello World!**",target:"_blank",children:"https://livecodes.io/?md=**Hello World!**"}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(i.Z,{params:{md:"**Hello World!**"}}),"\n",(0,o.jsx)(t.h2,{id:"auto-prefill-from-page-dom",children:"Auto-Prefill from page DOM"}),"\n",(0,o.jsx)(t.p,{children:"TODO..."}),"\n",(0,o.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/features/import",children:"Import"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/features/templates",children:"Templates"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/configuration/",children:"Configuration"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})}),"\n"]})]})}function h(e={}){let{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}},3365:function(e,t,s){s.d(t,{Z:()=>g});var r=s("5893"),o=s("4200"),n=s("7294"),i=s("8294");function l(e){let t=(0,n.useRef)(null),[s,o]=(0,n.useState)(e.className||""),[l,a]=(0,n.useState)(e.style||{}),[c,d]=(0,n.useState)(e.height),[u,h]=(0,n.useState)(),[p,f]=(0,n.useState)(JSON.stringify(e.config||"")),[m,g]=(0,n.useState)("");return(0,n.useEffect)(()=>{if(!t.current)return;let{className:s,style:r,height:n,sdkReady:l,config:c,...y}=e;if(o(s||""),a(r||{}),d(n),u&&m===JSON.stringify(y)){if(p===JSON.stringify(c))return;f(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else g(JSON.stringify(y)),u?.destroy(),(0,i.T)(t.current,{config:c,...y}).then(e=>{h(e),"function"==typeof l&&l(e)})},[e]),(0,n.useEffect)(()=>()=>{u?.destroy()},[]),(0,r.jsx)("div",{ref:t,className:s,style:l,"data-height":c})}var a=s("1858"),c=s("3262"),d=s("1705"),u=s("7645"),h=s("8168"),p=s("8228"),f=s("5050");function m(e){let[t,s]=(0,n.useState)(e.js),[o,i]=(0,n.useState)(e.ts),[l,a]=(0,n.useState)(e.react),[m,g]=(0,n.useState)(e.vue),[y,v]=(0,n.useState)(e.svelte),j="3.7rem",[x,b]=(0,n.useState)(!0),[w,S]=(0,n.useState)(j),P=(0,n.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${P.current.offsetHeight}px + ${j})`)},5),setTimeout(()=>{S(`calc(${P.current.offsetHeight}px + ${j})`)},255)};return(0,n.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(o,"ts")),a(e(l,"jsx")),g(e(m,"html")),v(e(y,"html"))}},[]),(0,r.jsxs)("details",{className:`alert alert--info ${f.Z.details} ${p.Z.details}`,"data-collapsed":x,style:{height:x?j:w,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,r.jsx)("summary",{onClick:()=>{b(!x),C()},children:"show code"}),(0,r.jsx)("div",{ref:P,style:{display:"block",overflow:"hidden"},children:(0,r.jsx)("div",{className:f.Z.collapsibleContent,children:(0,r.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,r.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,r.jsx)(d.Z,{language:"js",children:t})}),(0,r.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,r.jsx)(d.Z,{language:"ts",children:o})}),(0,r.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,r.jsx)(d.Z,{language:"jsx",children:l})}),(0,r.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,r.jsx)(d.Z,{language:"html",children:m})}),(0,r.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,r.jsx)(d.Z,{language:"html",children:y})})]})})})]})}function g(e){let{className:t,style:s,showCode:n,height:i,...c}=e,{colorMode:d}=(0,o.I)(),u=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),f=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (); +} + +`.trimStart(),g=` + + + +`,y=` + + +
+ +`.trimStart();return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:a.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,r.jsx)(m,{js:h,ts:p,react:f,vue:g,svelte:y})]})}},8294:function(e,t,s){s.d(t,{T:function(){return o},r:function(){return n}});var r=s(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:r,loading:o="lazy",view:i}=t,l=r||"headless"===i,a=null,c=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)C(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(n(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",l?"eager":o);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let f=!1,m="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let r="livecodes",n=a.querySelector(`iframe.${r}`),i=n||document.createElement("iframe");i.classList.add(r),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===o?"eager":"lazy"),l?C(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),i.onload=()=>{e(i)},i.src=d.href,n||a.appendChild(i)}),y=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>f?Promise.reject(m):new Promise(async e=>{y.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},u),await y,e()}),j=(e,t)=>new Promise(async(s,r)=>{if(f)return r(m);await v();let o=E();addEventListener("message",function t(n){if(n.source===g.contentWindow&&n.origin===u&&n.data?.type==="livecodes-api-response"&&n.data?.id===o&&n.data.method===e){removeEventListener("message",t);let e=n.data.payload;e?.error?r(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:o,args:t},u)}),x={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(f)throw Error(m);return b.includes(e)?(j("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==u||!t||!x[t])return;let s=e.data?.payload;x[t]?.forEach(e=>{e(s)})});let P=()=>{Object.values(x).forEach(e=>{e.length=0}),g?.remove?.(),f=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,t)=>j("show",[e,t]),runTests:()=>j("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),r=1;ry.settled?j("destroy").then(P):f?Promise.reject(m):(P(),Promise.resolve())}}function n(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:o={},config:n={},headless:i,import:l,lite:a,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,r]=t;void 0!==r&&e.searchParams.set(s,String(r))});let h="headless"===t.view||i;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof n&&null==n.mode?n.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof n&&null==n.view&&"headless"!==c?n.view=c:e.searchParams.set("view",c)),"string"==typeof n)try{new URL(n),e.searchParams.set("config",encodeURIComponent(n))}catch{throw Error('"config" is not a valid URL or configuration object.')}else n&&"object"==typeof n&&Object.keys(n).length>0&&(n.title&&"Untitled Project"!==n.title&&e.searchParams.set("title",n.title),n.description&&n.description.length>0&&e.searchParams.set("description",n.description),u.set("config","code/"+(0,r.compressToEncodedURIComponent)(JSON.stringify(n))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{u.set("params",(0,r.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return l},a:function(){return i}});var r=s(7294);let o={},n=r.createContext(o);function i(e){let t=r.useContext(n);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),r.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/4086122b.3af81480.js b/docs/assets/js/4086122b.3af81480.js new file mode 100644 index 0000000..3133d65 --- /dev/null +++ b/docs/assets/js/4086122b.3af81480.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4472"],{3612:function(e,r,s){s.r(r),s.d(r,{default:()=>h,frontMatter:()=>a,metadata:()=>t,assets:()=>c,toc:()=>d,contentTitle:()=>o});var t=JSON.parse('{"id":"features/projects","title":"Projects","description":"A LiveCodes project is a combination of markup, styles & scripts that result in a single web page. Check the section about the Result Page to have more details about how this page is constructed.","source":"@site/docs/features/projects.mdx","sourceDirName":"features","slug":"/features/projects","permalink":"/docs/features/projects","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/projects.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Features","permalink":"/docs/features/"},"next":{"title":"Templates","permalink":"/docs/features/templates"}}'),n=s("5893"),i=s("65");let a={},o="Projects",c={},d=[{value:"Markup Editor",id:"markup-editor",level:2},{value:"Style Editor",id:"style-editor",level:2},{value:"Script Editor",id:"script-editor",level:2},{value:"Organizing Projects",id:"organizing-projects",level:2},{value:"Related",id:"related",level:2}];function l(e){let r={a:"a",admonition:"admonition",em:"em",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r.header,{children:(0,n.jsx)(r.h1,{id:"projects",children:"Projects"})}),"\n",(0,n.jsxs)(r.p,{children:["A ",(0,n.jsx)(r.em,{children:"LiveCodes"})," project is a combination of markup, styles & scripts that result in a ",(0,n.jsx)(r.strong,{children:"single web page"}),". Check the section about the ",(0,n.jsx)(r.a,{href:"/docs/features/result",children:"Result Page"})," to have more details about how this page is constructed."]}),"\n",(0,n.jsx)(r.p,{children:"There is no concept of file system or, for example, organizing multiple files in a directory structure of a single project."}),"\n",(0,n.jsx)(r.admonition,{title:"Simple Concept",type:"info",children:(0,n.jsxs)(r.p,{children:["code in ",(0,n.jsx)(r.a,{href:"#markup-editor",children:"markup editor"})," + code in ",(0,n.jsx)(r.a,{href:"#style-editor",children:"style editor"})," + code in ",(0,n.jsx)(r.a,{href:"#script-editor",children:"script editor"})," + ",(0,n.jsx)(r.a,{href:"/docs/features/external-resources",children:"external resources"})," => ",(0,n.jsx)(r.a,{href:"/docs/features/result",children:"result page"})]})}),"\n",(0,n.jsx)(r.h2,{id:"markup-editor",children:"Markup Editor"}),"\n",(0,n.jsx)(r.p,{children:"Code added in this editor eventually represents the page markup (HTML)."}),"\n",(0,n.jsx)(r.p,{children:"Examples for languages supported include HTML, Markdown, Pug, Haml."}),"\n",(0,n.jsx)(r.h2,{id:"style-editor",children:"Style Editor"}),"\n",(0,n.jsx)(r.p,{children:"Code added in this editor eventually represents the page styles (CSS)."}),"\n",(0,n.jsx)(r.p,{children:"Examples for languages supported include CSS, SCSS, SASS, Less, Stylus. In addition, many CSS processors are supported (e.g. Autoprefixer, postcss-preset-env, postcss-import-url, PurgeCSS, Tailwind CSS)."}),"\n",(0,n.jsx)(r.h2,{id:"script-editor",children:"Script Editor"}),"\n",(0,n.jsx)(r.p,{children:"Code added in this editor eventually represents the page scripts."}),"\n",(0,n.jsx)(r.p,{children:"These are either:"}),"\n",(0,n.jsxs)(r.ul,{children:["\n",(0,n.jsx)(r.li,{children:"Languages compiled to JavaScript (e.g TypeScript, JSX, CoffeeScript)"}),"\n",(0,n.jsxs)(r.li,{children:["Languages that are interpreted by a JavaScript runtime (e.g. PHP - interpreted by ",(0,n.jsx)(r.a,{href:"https://github.com/asmblah/uniter",children:"Uniter runtime"}),", Scheme - interpreted by ",(0,n.jsx)(r.a,{href:"https://www.biwascheme.org",children:"BiwaScheme"}),")"]}),"\n",(0,n.jsxs)(r.li,{children:["Languages running in WASM (e.g. Python - ",(0,n.jsx)(r.a,{href:"https://pyodide.org/",children:"Pyodide"}),", AssemblyScript)."]}),"\n"]}),"\n",(0,n.jsxs)(r.p,{children:["For the full list of supported languages, check the ",(0,n.jsx)(r.a,{href:"/docs/languages/",children:"Languages section"}),"."]}),"\n",(0,n.jsx)(r.h2,{id:"organizing-projects",children:"Organizing Projects"}),"\n",(0,n.jsxs)(r.p,{children:["Projects can be saved to the local device browser storage from Project menu \u2192 Save / Project menu \u2192 Save as \u2192 Fork (New Project) or using the keyboard shortcut ",(0,n.jsx)("kbd",{children:"Ctrl"})," + ",(0,n.jsx)("kbd",{children:"S"}),"."]}),"\n",(0,n.jsx)(r.p,{children:"The list of saved projects can be accessed from Project menu \u2192 Open."}),"\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.img,{alt:"LiveCodes Projects",src:s(7077).Z+"",width:"2240",height:"1400"}),"."]}),"\n",(0,n.jsx)(r.p,{children:"Saved projects can be sorted by title or date (asc/desc). They can also be filtered by language and/or tags. You may, as well, search for a project by title or description."}),"\n",(0,n.jsx)(r.p,{children:"Project title, description and tags can be edited from Project menu \u2192 Project Info."}),"\n",(0,n.jsxs)(r.p,{children:["Projects can be ",(0,n.jsx)(r.a,{href:"/docs/features/import",children:"imported"}),", ",(0,n.jsx)(r.a,{href:"/docs/features/export",children:"exported"}),", ",(0,n.jsx)(r.a,{href:"/docs/features/sync",children:"synchronized"}),", ",(0,n.jsx)(r.a,{href:"/docs/features/backup-restore",children:"backed up and restored"}),"."]}),"\n",(0,n.jsxs)(r.p,{children:[(0,n.jsx)(r.a,{href:"/docs/features/assets",children:"Assets"})," and ",(0,n.jsx)(r.a,{href:"/docs/features/snippets",children:"code snippets"})," are stored in the browser storage and can be used across projects."]}),"\n",(0,n.jsx)(r.h2,{id:"related",children:"Related"}),"\n",(0,n.jsxs)(r.ul,{children:["\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/docs/features/result",children:"Result Page"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/docs/features/templates",children:"Templates"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/docs/features/snippets",children:"Code Snippets"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/docs/features/assets",children:"Assets"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/docs/features/external-resources",children:"External Resources"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/docs/features/import",children:"Import"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/docs/features/export",children:"Export"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/docs/features/backup-restore",children:"Backup/Restore"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/docs/features/sync",children:"Sync"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/docs/features/share",children:"Share"})}),"\n",(0,n.jsx)(r.li,{children:(0,n.jsx)(r.a,{href:"/docs/features/broadcast",children:"Broadcast"})}),"\n"]})]})}function h(e={}){let{wrapper:r}={...(0,i.a)(),...e.components};return r?(0,n.jsx)(r,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},7077:function(e,r,s){s.d(r,{Z:function(){return t}});let t=s.p+"assets/images/saved-projects-1-31010fb8ad45e76e319ab98bc16f6812.jpg"},65:function(e,r,s){s.d(r,{Z:function(){return o},a:function(){return a}});var t=s(7294);let n={},i=t.createContext(n);function a(e){let r=t.useContext(i);return t.useMemo(function(){return"function"==typeof e?e(r):{...r,...e}},[r,e])}function o(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:a(e.components),t.createElement(i.Provider,{value:r},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/41907e12.9ac3df6c.js b/docs/assets/js/41907e12.9ac3df6c.js new file mode 100644 index 0000000..52d6b8a --- /dev/null +++ b/docs/assets/js/41907e12.9ac3df6c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1706"],{395:function(e,n,t){t.r(n),t.d(n,{default:()=>p,frontMatter:()=>i,metadata:()=>r,assets:()=>o,toc:()=>d,contentTitle:()=>a});var r=JSON.parse('{"id":"api/internal/interfaces/Types","title":"Interface: Types","description":"Indexable","source":"@site/docs/api/internal/interfaces/Types.md","sourceDirName":"api/internal/interfaces","slug":"/api/internal/interfaces/Types","permalink":"/docs/api/internal/interfaces/Types","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/interfaces/Types.md","tags":[],"version":"current","frontMatter":{}}'),s=t("5893"),c=t("65");let i={},a="Interface: Types",o={},d=[{value:"Indexable",id:"indexable",level:2}];function l(e){let n={code:"code",h1:"h1",h2:"h2",header:"header",p:"p",...(0,c.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"interface-types",children:"Interface: Types"})}),"\n",(0,s.jsx)(n.h2,{id:"indexable",children:"Indexable"}),"\n",(0,s.jsxs)(n.p,{children:["[",(0,s.jsx)(n.code,{children:"key"}),": ",(0,s.jsx)(n.code,{children:"string"}),"]: ",(0,s.jsx)(n.code,{children:"string"})," | ",(0,s.jsx)(n.code,{children:"object"})]})]})}function p(e={}){let{wrapper:n}={...(0,c.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},65:function(e,n,t){t.d(n,{Z:function(){return a},a:function(){return i}});var r=t(7294);let s={},c=r.createContext(s);function i(e){let n=r.useContext(c);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),r.createElement(c.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/41e10070.63b8adfa.js b/docs/assets/js/41e10070.63b8adfa.js new file mode 100644 index 0000000..e0dfb6e --- /dev/null +++ b/docs/assets/js/41e10070.63b8adfa.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5031"],{4883:function(e,s,n){n.r(s),n.d(s,{default:()=>h,frontMatter:()=>o,metadata:()=>t,assets:()=>l,toc:()=>c,contentTitle:()=>a});var t=JSON.parse('{"id":"features/result","title":"Result Page","description":"The output of a LiveCodes project is a single HTML page. This includes the (compiled) code from editors (markup + style + script) and external resources (CSS + JS), in addition to customizations specified in custom settings.","source":"@site/docs/features/result.mdx","sourceDirName":"features","slug":"/features/result","permalink":"/docs/features/result","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/result.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"CSS","permalink":"/docs/features/css"},"next":{"title":"External Resources","permalink":"/docs/features/external-resources"}}'),r=n("5893"),i=n("65");let o={},a="Result Page",l={},c=[{value:"Result page structure",id:"result-page-structure",level:2},{value:"Result page zoom",id:"result-page-zoom",level:2},{value:"Open in new window",id:"open-in-new-window",level:2},{value:"Show Spacings",id:"show-spacings",level:2},{value:"Scroll Position",id:"scroll-position",level:2}];function d(e){let s={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.header,{children:(0,r.jsx)(s.h1,{id:"result-page",children:"Result Page"})}),"\n",(0,r.jsxs)(s.p,{children:["The output of a LiveCodes project is a single HTML page. This includes the (compiled) code from editors (markup + style + script) and ",(0,r.jsx)(s.a,{href:"/docs/features/external-resources",children:"external resources"})," (CSS + JS), in addition to customizations specified in ",(0,r.jsx)(s.a,{href:"/docs/advanced/custom-settings",children:"custom settings"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["This page is loaded in a ",(0,r.jsx)(s.a,{href:"https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/",children:"sandboxed iframe"})," with a unique origin to enforce ",(0,r.jsx)(s.a,{href:"/docs/features/security",children:"security"}),". The page code is sent to the iframe in the browser (no code is sent to the server)."]}),"\n",(0,r.jsx)(s.h2,{id:"result-page-structure",children:"Result page structure"}),"\n",(0,r.jsxs)(s.p,{children:["This is the pseudo-code for the structure of the result page (inspired by ",(0,r.jsx)(s.a,{href:"https://blog.codepen.io/documentation/preview-template/",children:"CodePen docs"}),")."]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-html",children:'\n\n \n { Config.title }*\n \n \n\n { Config.head }*\n\n { CSS preset }**\n\n { External CSS }**\n\n { Editor CSS }\n\n { Language(s) run-time CSS }***\n\n { Language(s) run-time JS }***\n\n { Import map }****\n\n \n \n\n { Editor HTML }\n\n { External JS }**\n\n { Editor JS }\n\n { Spacing script (if enabled) }*****\n\n { Test scripts (if enabled) }******\n\n \n\n'})}),"\n",(0,r.jsxs)(s.p,{children:["* See ",(0,r.jsx)(s.a,{href:"/docs/configuration/configuration-object",children:"Configuration Object"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["** See ",(0,r.jsx)(s.a,{href:"/docs/features/external-resources",children:"External Resources"}),"."]}),"\n",(0,r.jsx)(s.p,{children:"*** Although most languages are compiled and then the compiled code is used, some languages require run-time scripts or styles to run in the result page."}),"\n",(0,r.jsxs)(s.p,{children:["**** See ",(0,r.jsx)(s.a,{href:"/docs/features/module-resolution",children:"Module Resolution"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["***** See ",(0,r.jsx)(s.a,{href:"#show-spacings",children:"Show Sapcings"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["****** See ",(0,r.jsx)(s.a,{href:"/docs/features/tests",children:"Tests"}),"."]}),"\n",(0,r.jsx)(s.h2,{id:"result-page-zoom",children:"Result page zoom"}),"\n",(0,r.jsxs)(s.p,{children:["The zoom button in the ",(0,r.jsx)(s.a,{href:"/docs/features/tools-pane",children:"tools pane"})," below result page, allows you to toggle result page zoom (1x/0.5x/0.25x)."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{alt:"Result page zoom",src:n(8811).Z+"",width:"1010",height:"390"})}),"\n",(0,r.jsx)(s.h2,{id:"open-in-new-window",children:"Open in new window"}),"\n",(0,r.jsxs)(s.p,{children:["From the ",(0,r.jsx)(s.a,{href:"/docs/features/tools-pane",children:"tools pane"}),", the result page can be viewed in a separate window."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{alt:"Open in new window",src:n(6508).Z+"",width:"994",height:"399"})}),"\n",(0,r.jsxs)(s.admonition,{type:"caution",children:[(0,r.jsxs)(s.p,{children:["Please note that the URL of the result page shown in the new window is a ",(0,r.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#parameters",children:"temporary URL"}),", for local preview. Sharing this URL will not work."]}),(0,r.jsxs)(s.p,{children:["If you need to share a project, use the ",(0,r.jsx)(s.a,{href:"/docs/features/share",children:"Share screen"}),". While, if you need to share the result page use the ",(0,r.jsx)(s.code,{children:"result"})," ",(0,r.jsx)(s.a,{href:"/docs/features/display-modes",children:"display mode"})," or the ",(0,r.jsx)(s.a,{href:"/docs/features/broadcast",children:"broadcast"})," feature."]})]}),"\n",(0,r.jsx)(s.h2,{id:"show-spacings",children:"Show Spacings"}),"\n",(0,r.jsxs)(s.p,{children:["The spacing between elements on the result page can be measured by adding ",(0,r.jsx)(s.a,{href:"https://spacingjs.com/",children:"Spacing.js"})," to the result page."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.img,{alt:"Show Spacings",src:n(1593).Z+"",width:"1102",height:"553"})}),"\n",(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:["Enable ",(0,r.jsx)(s.code,{children:"Show Spacing"})," setting in the Settings menu."]}),"\n",(0,r.jsx)(s.li,{children:"Move your cursor to an element and press Alt on Windows, or Option on a Mac."}),"\n",(0,r.jsx)(s.li,{children:"Move your cursor to another element, the measurement results will be there."}),"\n"]}),"\n",(0,r.jsx)(s.admonition,{type:"note",children:(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"Show Spacing"})," is only available when viewing the result page in the app. It is not added to the result page for example when ",(0,r.jsx)(s.a,{href:"/docs/features/export",children:"exported"})," or ",(0,r.jsx)(s.a,{href:"/docs/features/deploy",children:"deployed"}),"."]})}),"\n",(0,r.jsx)(s.h2,{id:"scroll-position",children:"Scroll Position"}),"\n",(0,r.jsx)(s.p,{children:"By default, the result page scroll position is maintained after reloads."}),"\n",(0,r.jsxs)(s.p,{children:["To disable this behavior, set the ",(0,r.jsx)(s.a,{href:"/docs/configuration/query-params",children:"query param"})," ",(0,r.jsx)(s.code,{children:"scrollPosition"})," to ",(0,r.jsx)(s.code,{children:"false"}),"."]}),"\n",(0,r.jsx)(s.p,{children:"Example:"}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"https://livecodes.io?scrollPosition=false",children:"https://livecodes.io?scrollPosition=false"})})]})}function h(e={}){let{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},6508:function(e,s,n){n.d(s,{Z:function(){return t}});let t=n.p+"assets/images/new-window-cd70a363844414d3ee937eed20e93e22.jpg"},1593:function(e,s,n){n.d(s,{Z:function(){return t}});let t=n.p+"assets/images/spacing-05e1a59a21c8781758c12d8841027655.jpg"},8811:function(e,s,n){n.d(s,{Z:function(){return t}});let t=n.p+"assets/images/zoom-439a6d440a32d8eeba41dbe6426d3b9c.jpg"},65:function(e,s,n){n.d(s,{Z:function(){return a},a:function(){return o}});var t=n(7294);let r={},i=t.createContext(r);function o(e){let s=t.useContext(i);return t.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),t.createElement(i.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/43b319d5.2d830fe9.js b/docs/assets/js/43b319d5.2d830fe9.js new file mode 100644 index 0000000..1886142 --- /dev/null +++ b/docs/assets/js/43b319d5.2d830fe9.js @@ -0,0 +1,4 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6322"],{790:function(e,t,n){n.r(t),n.d(t,{default:()=>h,frontMatter:()=>o,metadata:()=>r,assets:()=>u,toc:()=>d,contentTitle:()=>c});var r=JSON.parse('{"id":"languages/index","title":"Languages","description":"Overview","source":"@site/docs/languages/index.mdx","sourceDirName":"languages","slug":"/languages/","permalink":"/docs/languages/","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/index.mdx","tags":[],"version":"current","frontMatter":{"sidebar_class_name":"exclude_from_sidebar"},"sidebar":"docsSidebar","previous":{"title":"Services","permalink":"/docs/advanced/services"},"next":{"title":"art-template","permalink":"/docs/languages/art-template"}}'),i=n("5893"),l=n("65"),a=n("8399"),s=n("7378");let o={sidebar_class_name:"exclude_from_sidebar"},c="Languages",u={},d=[{value:"Overview",id:"overview",level:2},{value:"Language List",id:"language-list",level:2}];function g(e){let t={h1:"h1",h2:"h2",header:"header",li:"li",p:"p",ul:"ul",...(0,l.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"languages",children:"Languages"})}),"\n",(0,i.jsx)(t.h2,{id:"overview",children:"Overview"}),"\n",(0,i.jsx)(t.p,{children:'The term "language" used in these documentations refer to any technology (in addition to web languages: HTML, CSS and JavaScript), that needs some form of transformation/compilation to run in the browser.'}),"\n",(0,i.jsx)(t.p,{children:"LiveCodes provides support for a wide range of languages, which include (but not limited to):"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Syntax used by web libraries/frameworks (e.g. JSX, TSX, Vue SFC, Svelte SFC, MDX, Astro)."}),"\n",(0,i.jsx)(t.li,{children:"Languages that transpile to JavaScript (e.g. TypeScript, CoffeeScript, LiveScript, ReScript)."}),"\n",(0,i.jsx)(t.li,{children:"Languages/frameworks that generate CSS (e.g. SCSS, Less, Stylus, Tailwind CSS, UnoCSS)."}),"\n",(0,i.jsx)(t.li,{children:"CSS processors (e.g. PostCSS, Autoprefixer, Lightning CSS, CSS Modules, cssnano)"}),"\n",(0,i.jsx)(t.li,{children:"Traditional programming languages (e.g. Python, Ruby, Go, PHP, C++, R, Lua, Scheme, Perl)."}),"\n",(0,i.jsx)(t.li,{children:"Data manipulation/logic languages (e.g. SQL, Prolog)."}),"\n",(0,i.jsx)(t.li,{children:"Authoring/templating languages (e.g Markdown, AsciiDoc, Pug, Handlebars, Haml)."}),"\n",(0,i.jsx)(t.li,{children:"Low-code/visual editors (e.g. blockly, rich text editor)."}),"\n",(0,i.jsx)(t.li,{children:"Modeling languages/diagram-as-code (e.g. Gnuplot, Graphviz, Mermaid, Vega, Plotly)."}),"\n",(0,i.jsx)(t.li,{children:"Languages that target WebAssembly (e.g. AssemblyScript, WebAssembly Text Format)"}),"\n",(0,i.jsx)(t.li,{children:"... and others."}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Below is the full list of supported languages with documentations for usage in LiveCodes."}),"\n",(0,i.jsx)(t.h2,{id:"language-list",children:"Language List"}),"\n","\n",(0,i.jsx)(a.Z,{items:(0,s.jA)().items.filter(e=>"languages/index"!==e.docId)})]})}function h(e={}){let{wrapper:t}={...(0,l.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(g,{...e})}):g(e)}},8399:function(e,t,n){n.d(t,{Z:()=>j});var r=n("5893");n("7294");var i=n("7026"),l=n("6563"),a=n("3367"),s=n("1107"),o=n("9999"),c=n("7670"),u=n("9386");let d={cardContainer:"cardContainer_fWXF",cardTitle:"cardTitle_rnsV",cardDescription:"cardDescription_PWke"};function g(e){let{href:t,children:n}=e;return(0,r.jsx)(a.Z,{href:t,className:(0,i.Z)("card padding--lg",d.cardContainer),children:n})}function h(e){let{href:t,icon:n,title:l,description:a}=e;return(0,r.jsxs)(g,{href:t,children:[(0,r.jsxs)(u.Z,{as:"h2",className:(0,i.Z)("text--truncate",d.cardTitle),title:l,children:[n," ",l]}),a&&(0,r.jsx)("p",{className:(0,i.Z)("text--truncate",d.cardDescription),title:a,children:a})]})}function m(e){let{item:t}=e,n=(0,l.LM)(t),i=function(){let{selectMessage:e}=(0,s.c)();return t=>e(t,(0,c.I)({message:"1 item|{count} items",id:"theme.docs.DocCard.categoryDescription.plurals",description:"The default description for a category card in the generated index about how many items this category includes"},{count:t}))}();return n?(0,r.jsx)(h,{href:n,icon:"\uD83D\uDDC3\uFE0F",title:t.label,description:t.description??i(t.items.length)}):null}function f(e){let{item:t}=e,n=(0,o.Z)(t.href)?"\uD83D\uDCC4\uFE0F":"\uD83D\uDD17",i=(0,l.xz)(t.docId??void 0);return(0,r.jsx)(h,{href:t.href,icon:n,title:t.label,description:t.description??i?.description})}function p(e){let{item:t}=e;switch(t.type){case"link":return(0,r.jsx)(f,{item:t});case"category":return(0,r.jsx)(m,{item:t});default:throw Error(`unknown item type ${JSON.stringify(t)}`)}}function x(e){let{className:t}=e,n=(0,l.jA)();return(0,r.jsx)(j,{items:n.items,className:t})}function j(e){let{items:t,className:n}=e;if(!t)return(0,r.jsx)(x,{...e});let a=(0,l.MN)(t);return(0,r.jsx)("section",{className:(0,i.Z)("row",n),children:a.map((e,t)=>(0,r.jsx)("article",{className:"col col--6 margin-bottom--lg",children:(0,r.jsx)(p,{item:e})},t))})}},7378:function(e,t,n){function r(){for(var e=arguments.length,t=Array(e),r=0;re.includes(t))}let s={locale:"en",pluralForms:a(["one","other"]),select:e=>1===e?"one":"other"};function o(){let e=function(){let{i18n:{currentLocale:e}}=(0,i.Z)();return(0,r.useMemo)(()=>{try{return function(e){let t=new Intl.PluralRules(e);return{locale:e,pluralForms:a(t.resolvedOptions().pluralCategories),select:e=>t.select(e)}}(e)}catch(t){return console.error(`Failed to use Intl.PluralRules for locale "${e}". +Docusaurus will fallback to the default (English) implementation. +Error: ${t.message} +`),s}},[e])}();return{selectMessage:(t,n)=>(function(e,t,n){let r=e.split("|");if(1===r.length)return r[0];r.length>n.pluralForms.length&&console.error(`For locale=${n.locale}, a maximum of ${n.pluralForms.length} plural forms are expected (${n.pluralForms.join(",")}), but the message contains ${r.length}: ${e}`);let i=n.select(t);return r[Math.min(n.pluralForms.indexOf(i),r.length-1)]})(n,t,e)}}},65:function(e,t,n){n.d(t,{Z:function(){return s},a:function(){return a}});var r=n(7294);let i={},l=r.createContext(i);function a(e){let t=r.useContext(l);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),r.createElement(l.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/450bd883.be884bd7.js b/docs/assets/js/450bd883.be884bd7.js new file mode 100644 index 0000000..7f3240b --- /dev/null +++ b/docs/assets/js/450bd883.be884bd7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3966"],{7843:function(e,t,n){n.r(t),n.d(t,{default:()=>l,frontMatter:()=>o,metadata:()=>r,assets:()=>a,toc:()=>p,contentTitle:()=>i});var r=JSON.parse('{"id":"languages/typescript","title":"TypeScript","description":"TODO...","source":"@site/docs/languages/typescript.mdx","sourceDirName":"languages","slug":"/languages/typescript","permalink":"/docs/languages/typescript","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/typescript.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Twig","permalink":"/docs/languages/twig"},"next":{"title":"UnoCSS","permalink":"/docs/languages/unocss"}}'),s=n("5893"),c=n("65");let o={},i="TypeScript",a={},p=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,c.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"typescript",children:"TypeScript"})}),"\n",(0,s.jsx)(t.p,{children:"TODO..."})]})}function l(e={}){let{wrapper:t}={...(0,c.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},65:function(e,t,n){n.d(t,{Z:function(){return i},a:function(){return o}});var r=n(7294);let s={},c=r.createContext(s);function o(e){let t=r.useContext(c);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(c.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/45901fe2.488cb176.js b/docs/assets/js/45901fe2.488cb176.js new file mode 100644 index 0000000..00dc831 --- /dev/null +++ b/docs/assets/js/45901fe2.488cb176.js @@ -0,0 +1,71 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1576"],{9976:function(e,t,n){n.r(t),n.d(t,{default:()=>m,frontMatter:()=>a,metadata:()=>s,assets:()=>c,svelteSDKDemo:()=>h,toc:()=>u,contentTitle:()=>d});var s=JSON.parse('{"id":"sdk/svelte","title":"Svelte","description":"The JS/TS SDK can be used directly in Svelte components without the need for any wrappers.","source":"@site/docs/sdk/svelte.mdx","sourceDirName":"sdk","slug":"/sdk/svelte","permalink":"/docs/sdk/svelte","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/sdk/svelte.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Vue SDK","permalink":"/docs/sdk/vue"},"next":{"title":"Headless Mode","permalink":"/docs/sdk/headless"}}'),o=n("5893"),r=n("65"),i=n("3365"),l=n("8500");let a={},d="Svelte",c={},h={svelte:` + +
+`},u=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2},{value:"Demo",id:"demo",level:2},{value:"Related",id:"related",level:2}];function p(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"svelte",children:"Svelte"})}),"\n","\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts",children:"JS/TS SDK"})," can be used directly in Svelte components without the need for any wrappers."]}),"\n",(0,o.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,o.jsxs)(t.p,{children:["Please refer to the ",(0,o.jsx)(t.a,{href:"/docs/sdk/#installation",children:"SDK installation"})," section."]}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.p,{children:"This is an example of using the LiveCodes JS SDK in a Svelte component:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-html",metastring:'title="Component.svelte"',children:" + + +`,v=` + + +
+ +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:a.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(f,{js:u,ts:p,react:m,vue:g,svelte:v})]})}},8500:function(e,t,n){n.d(t,{Z:()=>d});var s=n("5893");n("7294");var o=n("6735");function r(e){let{children:t,fallback:n}=e;return(0,o.Z)()?(0,s.jsx)(s.Fragment,{children:t?.()}):n??null}var i=n("1705"),l=n("8294"),a=n("1858");function d(e){let{params:t,config:n,code:o,language:d="js",codeTitle:c="",showLineNumbers:h=!1,formatCode:u=!0,linkText:p="Run in LiveCodes",style:m={},className:f=""}=e,g=(0,l.r)({appUrl:a.G,params:t,config:n});return(0,s.jsxs)("div",{style:{marginBottom:"30px",...m},className:f,children:[o&&(0,s.jsx)(r,{children:()=>(0,s.jsx)(i.Z,{language:d,title:c,showLineNumbers:h,children:u?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(o,d):o})}),(0,s.jsxs)("a",{href:g,target:"_blank",rel:"noreferrer",children:[p,(0,s.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,s.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,n){n.d(t,{T:function(){return o},r:function(){return r}});var s=n(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:s,loading:o="lazy",view:i}=t,l=s||"headless"===i,a=null,d=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)P(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(r(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",l?"eager":o);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,f="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let s="livecodes",r=a.querySelector(`iframe.${s}`),i=r||document.createElement("iframe");i.classList.add(s),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===o?"eager":"lazy"),l?P(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),i.onload=()=>{e(i)},i.src=c.href,r||a.appendChild(i)}),v=new Promise(e=>{addEventListener("message",function t(n){n.source===g.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>m?Promise.reject(f):new Promise(async e=>{v.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),j=(e,t)=>new Promise(async(n,s)=>{if(m)return s(f);await y();let o=C();addEventListener("message",function t(r){if(r.source===g.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===o&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?s(e.error):n(e)}}),g.contentWindow?.postMessage({method:e,id:o,args:t},h)}),x={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(f);return b.includes(e)?(j("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==h||!t||!x[t])return;let n=e.data?.payload;x[t]?.forEach(e=>{e(n)})});let k=()=>{Object.values(x).forEach(e=>{e.length=0}),g?.remove?.(),m=!0};function P(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let C=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,t)=>j("show",[e,t]),runTests:()=>j("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;sv.settled?j("destroy").then(k):m?Promise.reject(f):(k(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:o={},config:r={},headless:i,import:l,lite:a,view:d,...c}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let u="headless"===t.view||i;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==d?r.view=d:e.searchParams.set("view",d)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(r))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{h.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return l},a:function(){return i}});var s=n(7294);let o={},r=s.createContext(o);function i(e){let t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/4738667a.ee192daa.js b/docs/assets/js/4738667a.ee192daa.js new file mode 100644 index 0000000..484f8cb --- /dev/null +++ b/docs/assets/js/4738667a.ee192daa.js @@ -0,0 +1,83 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9826"],{6183:function(e,t,n){n.r(t),n.d(t,{default:()=>p,frontMatter:()=>o,javaConfig:()=>c,assets:()=>d,metadata:()=>i,toc:()=>h,contentTitle:()=>l});var i=JSON.parse('{"id":"languages/java","title":"Java","description":"Java is a high-level, general-purpose, memory-safe, object-oriented programming language.","source":"@site/docs/languages/java.mdx","sourceDirName":"languages","slug":"/languages/java","permalink":"/docs/languages/java","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/java.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Imba","permalink":"/docs/languages/imba"},"next":{"title":"JavaScript","permalink":"/docs/languages/javascript"}}'),r=n("5893"),s=n("65"),a=n("3365");let o={},l="Java",d={},c={activeEditor:"script",script:{language:"java",content:`public class BinarySearchSnippet { + /** + * Search an item with binarySearch algorithm. + * + * @param arr sorted array to search + * @param item an item to search + * @return if item is found, return the index position of the array item otherwise return -1 + */ + + public static int binarySearch(int[] arr, int left, int right, int item) { + if (right >= left) { + int mid = left + (right - left) / 2; + if (arr[mid] == item) { + return mid; + } + + if (arr[mid] > item) { + return binarySearch(arr, left, mid - 1, item); + } + + return binarySearch(arr, mid + 1, right, item); + } + return -1; + } + + public static void main(String[] args) { + int[] sortedArray = {1, 3, 5, 7, 9, 11, 13, 15}; + int itemToSearch = 7; + + int result = binarySearch(sortedArray, 0, sortedArray.length - 1, itemToSearch); + + if (result == -1) { + System.out.println("Result: Item not found in the array."); + } else { + System.out.println("Result: Item found at index -> " + result); + } + } +} +`},mode:"simple",editor:"auto",tools:{status:"full"}},h=[{value:"Usage",id:"usage",level:2},{value:"Communication with JavaScript",id:"communication-with-javascript",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Live Reload",id:"live-reload",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function u(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"java",children:"Java"})}),"\n",(0,r.jsx)(t.p,{children:"Java is a high-level, general-purpose, memory-safe, object-oriented programming language."}),"\n",(0,r.jsxs)(t.p,{children:["In LiveCodes, Java runs in the browser using ",(0,r.jsx)(t.a,{href:"https://github.com/plasma-umass/doppio",children:"DoppioJVM"}),"."]}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.p,{children:"Demo:"}),"\n","\n","\n",(0,r.jsx)(a.Z,{config:c}),"\n",(0,r.jsx)(t.h3,{id:"communication-with-javascript",children:"Communication with JavaScript"}),"\n",(0,r.jsxs)(t.p,{children:["The Java code runs in the context of the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),".\nA few helper properties and methods are available in the browser global ",(0,r.jsx)(t.code,{children:"livecodes.java"})," object:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"livecodes.java.input"}),": the initial standard input that is passed to the Java code."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"livecodes.java.loaded"}),": A promise that resolves when the Java environment is loaded. Any other helpers should be used after this promise resolves."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"livecodes.java.output"}),": the standard output."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"livecodes.java.error"}),": the standard error."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"livecodes.java.exitCode"}),": the exit code."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"livecodes.java.run"}),": a function that runs the Java code with new input. This function takes a string as input and returns a promise that resolves when the Java code is done running. The promise resolves with an object containing the ",(0,r.jsx)(t.code,{children:"input"}),", ",(0,r.jsx)(t.code,{children:"output"}),", ",(0,r.jsx)(t.code,{children:"error"}),", and ",(0,r.jsx)(t.code,{children:"exitCode"})," properties."]}),"\n"]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(a.Z,{template:"java",params:{activeEditor:"markup"},height:"80vh"}),"\n",(0,r.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"java"})}),"\n",(0,r.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:".java"})}),"\n",(0,r.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"script"})}),"\n",(0,r.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://github.com/plasma-umass/doppio",children:"DoppioJVM"})}),"\n",(0,r.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"DoppioJVM"}),": v0.5.0, which runs Java 8 JDK."]}),"\n",(0,r.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsxs)(t.p,{children:["Using ",(0,r.jsx)(t.a,{href:"https://prettier.io",children:"Prettier"})," with the ",(0,r.jsx)(t.a,{href:"https://github.com/jhipster/prettier-java",children:"Prettier Java plugin"}),"."]}),"\n",(0,r.jsx)(t.h2,{id:"live-reload",children:"Live Reload"}),"\n",(0,r.jsx)(t.p,{children:"By default, new code changes are sent to the result page for re-evaluation without a full page reload, to avoid the need to reload the Java environment."}),"\n",(0,r.jsxs)(t.p,{children:["This behavior can be disabled by adding the code comment ",(0,r.jsx)(t.code,{children:"// __livecodes_reload__"})," to the code, which will force a full page reload.\nThis comment can be added in the ",(0,r.jsxs)(t.a,{href:"/docs/configuration/configuration-object#markup",children:[(0,r.jsx)(t.code,{children:"hiddenContent"})," property of the editor"]})," for embedded playgrounds."]}),"\n",(0,r.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://livecodes.io/?template=java",children:"https://livecodes.io/?template=java"})}),"\n",(0,r.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://www.java.com/",children:"Java"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://github.com/plasma-umass/doppio",children:"DoppioJVM"})}),"\n"]})]})}function p(e={}){let{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},3365:function(e,t,n){n.d(t,{Z:()=>v});var i=n("5893"),r=n("4200"),s=n("7294"),a=n("8294");function o(e){let t=(0,s.useRef)(null),[n,r]=(0,s.useState)(e.className||""),[o,l]=(0,s.useState)(e.style||{}),[d,c]=(0,s.useState)(e.height),[h,u]=(0,s.useState)(),[p,m]=(0,s.useState)(JSON.stringify(e.config||"")),[g,v]=(0,s.useState)("");return(0,s.useEffect)(()=>{if(!t.current)return;let{className:n,style:i,height:s,sdkReady:o,config:d,...f}=e;if(r(n||""),l(i||{}),c(s),h&&g===JSON.stringify(f)){if(p===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else v(JSON.stringify(f)),h?.destroy(),(0,a.T)(t.current,{config:d,...f}).then(e=>{u(e),"function"==typeof o&&o(e)})},[e]),(0,s.useEffect)(()=>()=>{h?.destroy()},[]),(0,i.jsx)("div",{ref:t,className:n,style:o,"data-height":d})}var l=n("1858"),d=n("3262"),c=n("1705"),h=n("7645"),u=n("8168"),p=n("8228"),m=n("5050");function g(e){let[t,n]=(0,s.useState)(e.js),[r,a]=(0,s.useState)(e.ts),[o,l]=(0,s.useState)(e.react),[g,v]=(0,s.useState)(e.vue),[f,j]=(0,s.useState)(e.svelte),y="3.7rem",[x,b]=(0,s.useState)(!0),[w,S]=(0,s.useState)(y),C=(0,s.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${y})`)},255)};return(0,s.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};n(e(t,"js")),a(e(r,"ts")),l(e(o,"jsx")),v(e(g,"html")),j(e(f,"html"))}},[]),(0,i.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":x,style:{height:x?y:w,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,i.jsx)("summary",{onClick:()=>{b(!x),E()},children:"show code"}),(0,i.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,i.jsx)("div",{className:m.Z.collapsibleContent,children:(0,i.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,i.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,i.jsx)(c.Z,{language:"js",children:t})}),(0,i.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,i.jsx)(c.Z,{language:"ts",children:r})}),(0,i.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,i.jsx)(c.Z,{language:"jsx",children:o})}),(0,i.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,i.jsx)(c.Z,{language:"html",children:g})}),(0,i.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,i.jsx)(c.Z,{language:"html",children:f})})]})})})]})}function v(e){let{className:t,style:n,showCode:s,height:a,...d}=e,{colorMode:c}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (); +} + +`.trimStart(),v=` + + + +`,f=` + + +
+ +`.trimStart();return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(o,{className:`container_Egsj ${e.className}`,style:{height:a||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,i.jsx)(g,{js:u,ts:p,react:m,vue:v,svelte:f})]})}},8294:function(e,t,n){n.d(t,{T:function(){return r},r:function(){return s}});var i=n(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:i,loading:r="lazy",view:a}=t,o=i||"headless"===a,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(o&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(o)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(s(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",o?"eager":r);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",v=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!o){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||o||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let i="livecodes",s=l.querySelector(`iframe.${i}`),a=s||document.createElement("iframe");a.classList.add(i),a.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),a.setAttribute("allowtransparency","true"),a.setAttribute("allowpaymentrequest","true"),a.setAttribute("allowfullscreen","true"),a.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),a.setAttribute("loading","eager"===r?"eager":"lazy"),o?E(a):(a.style.height="100%",a.style.minHeight="200px",a.style.width="100%",a.style.margin="0",a.style.border="0",a.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===a.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===a.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),a.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),a.onload=()=>{e(a)},a.src=c.href,s||l.appendChild(a)}),f=new Promise(e=>{addEventListener("message",function t(n){n.source===v.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),f.settled=!0)})}),j=()=>m?Promise.reject(g):new Promise(async e=>{f.settled&&e(),v.contentWindow?.postMessage({type:"livecodes-load"},h),await f,e()}),y=(e,t)=>new Promise(async(n,i)=>{if(m)return i(g);await j();let r=P();addEventListener("message",function t(s){if(s.source===v.contentWindow&&s.origin===h&&s.data?.type==="livecodes-api-response"&&s.data?.id===r&&s.data.method===e){removeEventListener("message",t);let e=s.data.payload;e?.error?i(e.error):n(e)}}),v.contentWindow?.postMessage({method:e,id:r,args:t},h)}),x={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return b.includes(e)?(y("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==v.contentWindow||e.origin!==h||!t||!x[t])return;let n=e.data?.payload;x[t]?.forEach(e=>{e(n)})});let C=()=>{Object.values(x).forEach(e=>{e.length=0}),v?.remove?.(),m=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,t)=>y("show",[e,t]),runTests:()=>y("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),i=1;if.settled?y("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function s(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:r={},config:s={},headless:a,import:o,lite:l,view:d,...c}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[n,i]=t;void 0!==i&&e.searchParams.set(n,String(i))});let u="headless"===t.view||a;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof s&&null==s.mode?s.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof s&&null==s.view&&"headless"!==d?s.view=d:e.searchParams.set("view",d)),"string"==typeof s)try{new URL(s),e.searchParams.set("config",encodeURIComponent(s))}catch{throw Error('"config" is not a valid URL or configuration object.')}else s&&"object"==typeof s&&Object.keys(s).length>0&&(s.title&&"Untitled Project"!==s.title&&e.searchParams.set("title",s.title),s.description&&s.description.length>0&&e.searchParams.set("description",s.description),h.set("config","code/"+(0,i.compressToEncodedURIComponent)(JSON.stringify(s))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,i.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return o&&e.searchParams.set("x",encodeURIComponent(o)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return o},a:function(){return a}});var i=n(7294);let r={},s=i.createContext(r);function a(e){let t=i.useContext(s);return i.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/47aff71f.0541f3af.js b/docs/assets/js/47aff71f.0541f3af.js new file mode 100644 index 0000000..0eead42 --- /dev/null +++ b/docs/assets/js/47aff71f.0541f3af.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1220"],{2327:function(e,t,s){s.r(t),s.d(t,{default:()=>p,frontMatter:()=>a,metadata:()=>o,assets:()=>c,toc:()=>d,contentTitle:()=>l});var o=JSON.parse('{"id":"features/compiled-code","title":"Compiled Code","description":"The resulting compiled/transpiled code can be seen in the compiled code viewer (in the tools pane) in real-time, as you type. This works for all compiled code (e.g. Markdown, Pug, SCSS, Less, Stylus, Typescript, CoffeeScript, ...etc.).","source":"@site/docs/features/compiled-code.mdx","sourceDirName":"features","slug":"/features/compiled-code","permalink":"/docs/features/compiled-code","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/compiled-code.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Console","permalink":"/docs/features/console"},"next":{"title":"Tests","permalink":"/docs/features/tests"}}'),r=s("5893"),i=s("65"),n=s("3365");let a={},l="Compiled Code",c={},d=[];function u(e){let t={a:"a",h1:"h1",header:"header",img:"img",p:"p",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"compiled-code",children:"Compiled Code"})}),"\n","\n",(0,r.jsxs)(t.p,{children:["The resulting compiled/transpiled code can be seen in the compiled code viewer (in the ",(0,r.jsx)(t.a,{href:"/docs/features/tools-pane",children:"tools pane"}),") in real-time, as you type. This works for all compiled code (e.g. Markdown, Pug, SCSS, Less, Stylus, Typescript, CoffeeScript, ...etc.)."]}),"\n",(0,r.jsx)(t.p,{children:"This can be a great tool for learning. As you write code, you see the compiled code and the resulting page at the same time. The compiled code viewer shows the code compiled from the currently active editor (markup/style/script). This includes the CSS produced by CSS processors (e.g. Autoprefixer), if enabled."}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"Compiled Code Viewer",src:s(4270).Z+"",width:"2240",height:"1400"})}),"\n",(0,r.jsxs)(t.p,{children:["e.g. ",(0,r.jsx)(t.a,{href:"https://livecodes.io/?ts&compiled=full",children:"https://livecodes.io/?ts&compiled=full"})," ",(0,r.jsx)("br",{}),"\nsets TypeScript as the active editor and shows compiled code viewer maximized."]}),"\n",(0,r.jsxs)(t.p,{children:["This demo shows TypeScript code along with the compiled Javascript code, similar to the ",(0,r.jsx)(t.a,{href:"https://www.typescriptlang.org/play",children:"official TypeScript Playground"}),":"]}),"\n",(0,r.jsx)(n.Z,{import:"https://gist.github.com/hatemhosny/4bed283ef9757a6a541aee685c710dc7",params:{"ts-selector":"playground.ts",activeEditor:"script",compiled:"full"}})]})}function p(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},4270:function(e,t,s){s.d(t,{Z:function(){return o}});let o=s.p+"assets/images/compiled-code-1-bf18468708e8da3bb486780bdc5310b0.jpg"},3365:function(e,t,s){s.d(t,{Z:()=>g});var o=s("5893"),r=s("4200"),i=s("7294"),n=s("8294");function a(e){let t=(0,i.useRef)(null),[s,r]=(0,i.useState)(e.className||""),[a,l]=(0,i.useState)(e.style||{}),[c,d]=(0,i.useState)(e.height),[u,p]=(0,i.useState)(),[h,m]=(0,i.useState)(JSON.stringify(e.config||"")),[f,g]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!t.current)return;let{className:s,style:o,height:i,sdkReady:a,config:c,...y}=e;if(r(s||""),l(o||{}),d(i),u&&f===JSON.stringify(y)){if(h===JSON.stringify(c))return;m(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else g(JSON.stringify(y)),u?.destroy(),(0,n.T)(t.current,{config:c,...y}).then(e=>{p(e),"function"==typeof a&&a(e)})},[e]),(0,i.useEffect)(()=>()=>{u?.destroy()},[]),(0,o.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),u=s("7645"),p=s("8168"),h=s("8228"),m=s("5050");function f(e){let[t,s]=(0,i.useState)(e.js),[r,n]=(0,i.useState)(e.ts),[a,l]=(0,i.useState)(e.react),[f,g]=(0,i.useState)(e.vue),[y,v]=(0,i.useState)(e.svelte),w="3.7rem",[b,j]=(0,i.useState)(!0),[x,S]=(0,i.useState)(w),C=(0,i.useRef)(null),P=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},255)};return(0,i.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),n(e(r,"ts")),l(e(a,"jsx")),g(e(f,"html")),v(e(y,"html"))}},[]),(0,o.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${h.Z.details}`,"data-collapsed":b,style:{height:b?w:x,overflow:"hidden",willChange:"height",transition:`height ${b?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,o.jsx)("summary",{onClick:()=>{j(!b),P()},children:"show code"}),(0,o.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,o.jsx)("div",{className:m.Z.collapsibleContent,children:(0,o.jsxs)(p.Z,{groupId:"sdk-code",children:[(0,o.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"js",children:t})}),(0,o.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"ts",children:r})}),(0,o.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"jsx",children:a})}),(0,o.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"html",children:f})}),(0,o.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"html",children:y})})]})})})]})}function g(e){let{className:t,style:s,showCode:i,height:n,...c}=e,{colorMode:d}=(0,r.I)(),u=e=>JSON.stringify(e,null,2),p=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),h=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (); +} + +`.trimStart(),g=` + + + +`,y=` + + +
+ +`.trimStart();return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:n||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,o.jsx)(f,{js:p,ts:h,react:m,vue:g,svelte:y})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return i}});var o=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:o,loading:r="lazy",view:n}=t,a=o||"headless"===n,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)P(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(i(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":r);let p=globalThis.process;d.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let h=t.params;"object"==typeof h&&Object.keys(h).length>0&&JSON.stringify(h).length<1800&&Object.keys(h).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(h[e])))});let m=!1,f="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let o="livecodes",i=l.querySelector(`iframe.${o}`),n=i||document.createElement("iframe");n.classList.add(o),n.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),n.setAttribute("allowtransparency","true"),n.setAttribute("allowpaymentrequest","true"),n.setAttribute("allowfullscreen","true"),n.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),n.setAttribute("loading","eager"===r?"eager":"lazy"),a?P(n):(n.style.height="100%",n.style.minHeight="200px",n.style.width="100%",n.style.margin="0",n.style.border="0",n.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===n.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===n.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),n.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),n.onload=()=>{e(n)},n.src=d.href,i||l.appendChild(n)}),y=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>m?Promise.reject(f):new Promise(async e=>{y.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},u),await y,e()}),w=(e,t)=>new Promise(async(s,o)=>{if(m)return o(f);await v();let r=E();addEventListener("message",function t(i){if(i.source===g.contentWindow&&i.origin===u&&i.data?.type==="livecodes-api-response"&&i.data?.id===r&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?o(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:r,args:t},u)}),b={},j=["load","ready","code","console","tests","destroy"],x=(e,t)=>{if(m)throw Error(f);return j.includes(e)?(w("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&w("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==u||!t||!b[t])return;let s=e.data?.payload;b[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(b).forEach(e=>{e.length=0}),g?.remove?.(),m=!0};function P(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>w("run"),format:e=>w("format",[e]),getShareUrl:e=>w("getShareUrl",[e]),getConfig:e=>w("getConfig",[e]),setConfig:e=>w("setConfig",[e]),getCode:()=>w("getCode"),show:(e,t)=>w("show",[e,t]),runTests:()=>w("runTests"),onChange:e=>x("code",e),watch:x,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),o=1;oy.settled?w("destroy").then(C):m?Promise.reject(f):(C(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:i={},headless:n,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,o]=t;void 0!==o&&e.searchParams.set(s,String(o))});let p="headless"===t.view||n;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==c?i.view=c:e.searchParams.set("view",c)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),u.set("config","code/"+(0,o.compressToEncodedURIComponent)(JSON.stringify(i))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{u.set("params",(0,o.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),p&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return n}});var o=s(7294);let r={},i=o.createContext(r);function n(e){let t=o.useContext(i);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:n(e.components),o.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/48943d06.37d05acc.js b/docs/assets/js/48943d06.37d05acc.js new file mode 100644 index 0000000..ce67c4f --- /dev/null +++ b/docs/assets/js/48943d06.37d05acc.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1974"],{9097:function(e,s,t){t.r(s),t.d(s,{default:()=>d,frontMatter:()=>o,metadata:()=>n,assets:()=>u,toc:()=>i,contentTitle:()=>c});var n=JSON.parse('{"id":"languages/sass","title":"Sass","description":"TODO...","source":"@site/docs/languages/sass.mdx","sourceDirName":"languages","slug":"/languages/sass","permalink":"/docs/languages/sass","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/sass.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Ruby","permalink":"/docs/languages/ruby"},"next":{"title":"Scheme","permalink":"/docs/languages/scheme"}}'),a=t("5893"),r=t("65");let o={},c="Sass",u={},i=[];function l(e){let s={h1:"h1",header:"header",p:"p",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(s.header,{children:(0,a.jsx)(s.h1,{id:"sass",children:"Sass"})}),"\n",(0,a.jsx)(s.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:s}={...(0,r.a)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(l,{...e})}):l(e)}},65:function(e,s,t){t.d(s,{Z:function(){return c},a:function(){return o}});var n=t(7294);let a={},r=n.createContext(a);function o(e){let s=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),n.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/4a7038fa.6cb71156.js b/docs/assets/js/4a7038fa.6cb71156.js new file mode 100644 index 0000000..c0783a7 --- /dev/null +++ b/docs/assets/js/4a7038fa.6cb71156.js @@ -0,0 +1,85 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6834"],{906:function(e,t,s){s.r(t),s.d(t,{default:()=>p,frontMatter:()=>a,csharpConfig:()=>d,assets:()=>c,metadata:()=>n,toc:()=>h,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/csharp-wasm","title":"C# (Wasm)","description":"(Wasm)","source":"@site/docs/languages/csharp-wasm.mdx","sourceDirName":"languages","slug":"/languages/csharp-wasm","permalink":"/docs/languages/csharp-wasm","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/csharp-wasm.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"C++","permalink":"/docs/languages/cpp"},"next":{"title":"CSS","permalink":"/docs/languages/css"}}'),r=s("5893"),i=s("65"),o=s("3365");let a={},l="C# (Wasm)",c={},d={activeEditor:"script",script:{language:"csharp-wasm",content:`using System; + +public class Program +{ + public static void Main() + { + int[] sortedArray = { 1, 3, 5, 7, 9, 11, 13, 15 }; + int itemToSearch = 7; + + int result = BinarySearch(sortedArray, 0, sortedArray.Length - 1, itemToSearch); + + if (result == -1) + { + Console.WriteLine("Result: Item not found in the array."); + } + else + { + Console.WriteLine($"Result: Item found at index -> {result}"); + } + } + + public static int BinarySearch(int[] arr, int left, int right, int item) + { + if (right >= left) + { + int mid = left + (right - left) / 2; + if (arr[mid] == item) + { + return mid; + } + + if (arr[mid] > item) + { + return BinarySearch(arr, left, mid - 1, item); + } + + return BinarySearch(arr, mid + 1, right, item); + } + return -1; + } +}`},mode:"simple",editor:"auto",tools:{status:"full"}},h=[{value:"Usage",id:"usage",level:2},{value:"Communication with JavaScript",id:"communication-with-javascript",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Aliases / Extensions",id:"aliases--extensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Live Reload",id:"live-reload",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function u(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"c-wasm",children:"C# (Wasm)"})}),"\n",(0,r.jsx)(t.p,{children:"C# is a high-level, general-purpose, object-oriented programming language developed by Microsoft."}),"\n",(0,r.jsx)(t.p,{children:"In LiveCodes, C# runs in the browser using Blazor WebAssembly with a WebAssembly-based .NET runtime."}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.p,{children:"Demo:"}),"\n","\n",(0,r.jsx)(o.Z,{config:d}),"\n",(0,r.jsx)(t.h3,{id:"communication-with-javascript",children:"Communication with JavaScript"}),"\n",(0,r.jsxs)(t.p,{children:["The C# code runs in the context of the result page. A few helper properties and methods are available in the browser global ",(0,r.jsx)(t.code,{children:"livecodes.csharp"})," object:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"livecodes.csharp.input"}),": The initial standard input passed to the C# code."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"livecodes.csharp.loaded"}),": A promise that resolves when the C# environment (Blazor WebAssembly) is fully loaded. Other helpers should be used after this promise resolves."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"livecodes.csharp.output"}),": The standard output from the C# code execution."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"livecodes.csharp.run"}),": A function that runs the C# code with new input. This function takes a string as input and returns a promise that resolves with an object containing the ",(0,r.jsx)(t.code,{children:"output"}),", ",(0,r.jsx)(t.code,{children:"error"}),", and ",(0,r.jsx)(t.code,{children:"exitCode"})," properties."]}),"\n"]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(o.Z,{template:"csharp-wasm",params:{activeEditor:"markup"},height:"80vh"}),"\n",(0,r.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"csharp-wasm"})}),"\n",(0,r.jsx)(t.h3,{id:"aliases--extensions",children:"Aliases / Extensions"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"cs"}),", ",(0,r.jsx)(t.code,{children:"csharp"}),", ",(0,r.jsx)(t.code,{children:"wasm.cs"}),", ",(0,r.jsx)(t.code,{children:"cs-wasm"})]}),"\n",(0,r.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"script"})}),"\n",(0,r.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsx)(t.p,{children:"Blazor WebAssembly with .NET WebAssembly runtime."}),"\n",(0,r.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,r.jsx)(t.p,{children:".NET 9.0"}),"\n",(0,r.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsxs)(t.p,{children:["using ",(0,r.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"})]}),"\n",(0,r.jsx)(t.h2,{id:"live-reload",children:"Live Reload"}),"\n",(0,r.jsxs)(t.p,{children:["By default, new code changes are sent to the result page for re-evaluation without a full page reload, avoiding the need to reinitialize the Blazor environment. This behavior can be disabled by adding the code comment ",(0,r.jsx)(t.code,{children:"// __livecodes_reload__"})," to the C# code, which forces a full page reload."]}),"\n",(0,r.jsxs)(t.p,{children:["This comment can be added in the ",(0,r.jsx)(t.code,{children:"hiddenContent"})," property of the editor for embedded playgrounds."]}),"\n",(0,r.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-csharp",children:'using System;\n\npublic class Program\n{\n public static void Main()\n {\n Console.WriteLine("Hello, LiveCodes C#!");\n }\n}\n'})}),"\n",(0,r.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://livecodes.io/?template=csharp-wasm",children:"https://livecodes.io/?template=csharp-wasm"})}),"\n",(0,r.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://learn.microsoft.com/en-us/dotnet/csharp/",children:"C#"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor",children:"Blazor WebAssembly"})}),"\n"]})]})}function p(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),r=s("4200"),i=s("7294"),o=s("8294");function a(e){let t=(0,i.useRef)(null),[s,r]=(0,i.useState)(e.className||""),[a,l]=(0,i.useState)(e.style||{}),[c,d]=(0,i.useState)(e.height),[h,u]=(0,i.useState)(),[p,m]=(0,i.useState)(JSON.stringify(e.config||"")),[g,f]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:i,sdkReady:a,config:c,...v}=e;if(r(s||""),l(n||{}),d(i),h&&g===JSON.stringify(v)){if(p===JSON.stringify(c))return;m(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else f(JSON.stringify(v)),h?.destroy(),(0,o.T)(t.current,{config:c,...v}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,i.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),h=s("7645"),u=s("8168"),p=s("8228"),m=s("5050");function g(e){let[t,s]=(0,i.useState)(e.js),[r,o]=(0,i.useState)(e.ts),[a,l]=(0,i.useState)(e.react),[g,f]=(0,i.useState)(e.vue),[v,y]=(0,i.useState)(e.svelte),x="3.7rem",[j,b]=(0,i.useState)(!0),[w,C]=(0,i.useState)(x),S=(0,i.useRef)(null),E=()=>{setTimeout(()=>{C(`calc(${S.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{C(`calc(${S.current.offsetHeight}px + ${x})`)},255)};return(0,i.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),o(e(r,"ts")),l(e(a,"jsx")),f(e(g,"html")),y(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":j,style:{height:j?x:w,overflow:"hidden",willChange:"height",transition:`height ${j?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!j),E()},children:"show code"}),(0,n.jsx)("div",{ref:S,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"ts",children:r})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"jsx",children:a})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:i,height:o,...c}=e,{colorMode:d}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(c)}; + return (); +} + +`.trimStart(),f=` + + + +`,v=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:u,ts:p,react:m,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return i}});var n=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:r="lazy",view:o}=t,a=n||"headless"===o,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(i(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":r);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",i=l.querySelector(`iframe.${n}`),o=i||document.createElement("iframe");o.classList.add(n),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===r?"eager":"lazy"),a?E(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),o.onload=()=>{e(o)},o.src=d.href,i||l.appendChild(o)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>m?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),x=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await y();let r=P();addEventListener("message",function t(i){if(i.source===f.contentWindow&&i.origin===h&&i.data?.type==="livecodes-api-response"&&i.data?.id===r&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},h)}),j={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return b.includes(e)?(x("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},C=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=C(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!j[t])return;let s=e.data?.payload;j[t]?.forEach(e=>{e(s)})});let S=()=>{Object.values(j).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nv.settled?x("destroy").then(S):m?Promise.reject(g):(S(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:i={},headless:o,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||o;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==c?i.view=c:e.searchParams.set("view",c)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(i))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return o}});var n=s(7294);let r={},i=n.createContext(r);function o(e){let t=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/4cb8f9f4.e1e1ca94.js b/docs/assets/js/4cb8f9f4.e1e1ca94.js new file mode 100644 index 0000000..446fc47 --- /dev/null +++ b/docs/assets/js/4cb8f9f4.e1e1ca94.js @@ -0,0 +1 @@ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9834"],{422:function(e,t,r){"use strict";r.r(t),r.d(t,{default:()=>p,frontMatter:()=>l,metadata:()=>s,assets:()=>a,toc:()=>c,contentTitle:()=>d});var s=JSON.parse('{"id":"features/import","title":"Import","description":"Overview","source":"@site/docs/features/import.mdx","sourceDirName":"features","slug":"/features/import","permalink":"/docs/features/import","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/import.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Code Snippets","permalink":"/docs/features/snippets"},"next":{"title":"Export","permalink":"/docs/features/export"}}'),i=r("5893"),o=r("65"),n=r("8500");let l={},d="Import",a={},c=[{value:"Overview",id:"overview",level:2},{value:"UI",id:"ui",level:3},{value:"Query Param",id:"query-param",level:3},{value:"Bookmarklet",id:"bookmarklet",level:3},{value:"SDK",id:"sdk",level:3},{value:"Examples",id:"examples",level:2},{value:"Sources",id:"sources",level:2},{value:"File Selection",id:"file-selection",level:2},{value:"Import Shared Projects",id:"import-shared-projects",level:2},{value:"Import Code from DOM",id:"import-code-from-dom",level:2},{value:"Import Raw Code",id:"import-raw-code",level:2},{value:"Import from CodePen",id:"import-from-codepen",level:2},{value:"Import Exported LiveCodes Projects",id:"import-exported-livecodes-projects",level:2},{value:"Related",id:"related",level:2}];function h(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"import",children:"Import"})}),"\n",(0,i.jsx)(t.h2,{id:"overview",children:"Overview"}),"\n",(0,i.jsxs)(t.p,{children:["LiveCodes supports importing code from a wide variety of ",(0,i.jsx)(t.a,{href:"#sources",children:"sources"}),". This can be achieved using one of the following methods:"]}),"\n",(0,i.jsx)(t.h3,{id:"ui",children:"UI"}),"\n",(0,i.jsx)(t.p,{children:"The Import screen can be accessed from the Project menu \u2192 Import."}),"\n","\n",(0,i.jsx)(n.Z,{params:{screen:"import"},linkText:"direct link"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"LiveCodes Import",src:r(4862).Z+"",width:"2240",height:"1400"})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.img,{alt:"LiveCodes Import",src:r(6249).Z+"",width:"2240",height:"1400"})}),"\n",(0,i.jsx)(t.h3,{id:"query-param",children:"Query Param"}),"\n",(0,i.jsxs)(t.p,{children:["A URL of any of the ",(0,i.jsx)(t.a,{href:"#sources",children:"sources"})," can be imported by adding it as a value to ",(0,i.jsx)(t.a,{href:"/docs/configuration/query-params",children:"query param"})," key: ",(0,i.jsx)(t.code,{children:"x"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?x=https://gist.github.com/f01deb828a42f363502fbae7964d48e9",children:"https://livecodes.io/?x=https://gist.github.com/f01deb828a42f363502fbae7964d48e9"})}),"\n",(0,i.jsx)(t.h3,{id:"bookmarklet",children:"Bookmarklet"}),"\n",(0,i.jsxs)(t.p,{children:["Instead of manually copy/pasting URLs to import, adding ",(0,i.jsxs)(t.a,{href:"/docs/bookmarklet",children:[(0,i.jsx)(t.strong,{children:'"Edit in LiveCodes"'})," bookmarklet"]})," to the browser bookmarks bar can be a more convenient way. It opens LiveCodes in a new window and imports the current webpage URL."]}),"\n",(0,i.jsx)(t.h3,{id:"sdk",children:"SDK"}),"\n",(0,i.jsxs)(t.p,{children:["For ",(0,i.jsx)(t.a,{href:"/docs/features/embeds",children:"embedded playgrounds"}),", use the ",(0,i.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," property ",(0,i.jsx)(t.a,{href:"/docs/sdk/js-ts#import",children:(0,i.jsx)(t.code,{children:"EmbedOptions.import"})}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"examples",children:"Examples"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsx)(t.p,{children:"GitHub File:"}),"\n",(0,i.jsxs)(t.p,{children:["URL: ",(0,i.jsx)(t.a,{href:"https://github.com/lodash/lodash/blob/master/isObject.js",children:"https://github.com/lodash/lodash/blob/master/isObject.js"})]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?x=https://github.com/lodash/lodash/blob/master/isObject.js",children:"Open in LiveCodes"})}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsx)(t.p,{children:"GitHub Directory:"}),"\n",(0,i.jsxs)(t.p,{children:["URL: ",(0,i.jsx)(t.a,{href:"https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards",children:"https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards"})]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?x=https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards",children:"Open in LiveCodes"})}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsx)(t.p,{children:"GitHub Gist:"}),"\n",(0,i.jsxs)(t.p,{children:["URL: ",(0,i.jsx)(t.a,{href:"https://gist.github.com/f01deb828a42f363502fbae7964d48e9",children:"https://gist.github.com/f01deb828a42f363502fbae7964d48e9"})]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?x=https://gist.github.com/f01deb828a42f363502fbae7964d48e9",children:"Open in LiveCodes"})}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsx)(t.p,{children:"JS Bin:"}),"\n",(0,i.jsxs)(t.p,{children:["URL: ",(0,i.jsx)(t.a,{href:"https://jsbin.com/iwovaj/73/embed?html,js,output",children:"https://jsbin.com/iwovaj/73/embed?html,js,output"})]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?x=https://jsbin.com/iwovaj/73/embed?html,js,output",children:"Open in LiveCodes"})}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsx)(t.p,{children:"Vue Playground:"}),"\n",(0,i.jsxs)(t.p,{children:["URL: ",(0,i.jsx)(t.a,{href:"https://play.vuejs.org/#eNp9kUFKAzEUhq/yyKYKtUW6K9OCli4UUVFxlU2Zvk5TM0lIXsbCMGdw7QG8g+fxAl7Bl5RWF9Jd3v//7+cLrxUXzg2aiGIsilB65QgCUnRTaVTtrCdoweMKOlh5W0OPoz1ppCmtCQR1qGCS/JPejWpwZpcY4Ov94/vzDZ45eSpNMdzVciEPhLXTC0KeAIr1+bRtc0nXFUOesqqMiwTNWc1teiIF+1KwVQwP26IvKDDCSlWDTbCG6du0K0Vpa6c0+jtHihGlGEN2krfQ2r5eZ418xP5eL9dYvvyjb8I2aVLcewzoG5Ti4NHCV0g7e/54i1t+H0wmj5rTR8wHDFbHxLiLXUazZOw/uUx7lW+gTPUU5ltCE/afSqAp2eW8FHyX2ZGv/+KOBqO8J00nuh/8Wasi",children:"https://play.vuejs.org/#eNp9kUFKAzEUhq/yyKYKtUW6K9OCli4UUVFxlU2Z..."})]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?x=https%3A%2F%2Fplay.vuejs.org%2F%23eNp9kUFKAzEUhq%2FyyKYKtUW6K9OCli4UUVFxlU2Zvk5TM0lIXsbCMGdw7QG8g%2BfxAl7Bl5RWF9Jd3v%2F%2F7%2BcLrxUXzg2aiGIsilB65QgCUnRTaVTtrCdoweMKOlh5W0OPoz1ppCmtCQR1qGCS%2FJPejWpwZpcY4Ov94%2FvzDZ45eSpNMdzVciEPhLXTC0KeAIr1%2BbRtc0nXFUOesqqMiwTNWc1teiIF%2B1KwVQwP26IvKDDCSlWDTbCG6du0K0Vpa6c0%2BjtHihGlGEN2krfQ2r5eZ418xP5eL9dYvvyjb8I2aVLcewzoG5Ti4NHCV0g7e%2F54i1t%2BH0wmj5rTR8wHDFbHxLiLXUazZOw%2FuUx7lW%2BgTPUU5ltCE%2FafSqAp2eW8FHyX2ZGv%2F%2BKOBqO8J00nuh%2F8Wasi",children:"Open in LiveCodes"})}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(t.h2,{id:"sources",children:"Sources"}),"\n",(0,i.jsx)(t.p,{children:"Import is supported from any of the following:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"GitHub gist"}),"\n",(0,i.jsx)(t.li,{children:"GitHub file"}),"\n",(0,i.jsx)(t.li,{children:"Directory in a GitHub repo"}),"\n",(0,i.jsx)(t.li,{children:"Gitlab snippet"}),"\n",(0,i.jsx)(t.li,{children:"Gitlab file"}),"\n",(0,i.jsx)(t.li,{children:"Directory in a Gitlab repo"}),"\n",(0,i.jsx)(t.li,{children:"JS Bin"}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"/docs/features/share",children:"Shared projects"})}),"\n",(0,i.jsx)(t.li,{children:"Raw code"}),"\n",(0,i.jsx)(t.li,{children:"Code in web page DOM"}),"\n",(0,i.jsxs)(t.li,{children:["Projects shared in official playgrounds of ",(0,i.jsx)(t.a,{href:"https://www.typescriptlang.org/play",children:"TypeScript"})," and ",(0,i.jsx)(t.a,{href:"https://play.vuejs.org/",children:"Vue"})]}),"\n",(0,i.jsx)(t.li,{children:"Local file(s)"}),"\n",(0,i.jsx)(t.li,{children:"Code in zip file (Local or URL)"}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"/docs/features/export",children:"Exported project JSON"})," (single project and bulk import)"]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Import sources are identified by URL patterns (e.g. origin, pathname and extension)."}),"\n",(0,i.jsx)(t.admonition,{type:"tip",children:(0,i.jsx)(t.p,{children:'Local files can be imported from the "Import Screen" or by dragging and dropping the file(s) in the editor.'})}),"\n",(0,i.jsx)(t.h2,{id:"file-selection",children:"File Selection"}),"\n",(0,i.jsx)(t.p,{children:"For sources that provide multiple files (e.g. GitHub/GitLab directories, GitHub gists, GitLab snippets and local files), a best guess is tried to load files in respective editors. Best results are when there are 3 files and each file is in a language (identified by file extension) that can be loaded to a different editor, for example:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"index.html, style.css, script.js"}),"\n",(0,i.jsx)(t.li,{children:"default.pug, app.scss, main.ts"}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"The following file names are given higher priority:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["Markup files starting with ",(0,i.jsx)(t.code,{children:"index."})," or ",(0,i.jsx)(t.code,{children:"default."})]}),"\n",(0,i.jsxs)(t.li,{children:["Style files starting with ",(0,i.jsx)(t.code,{children:"style."})," or ",(0,i.jsx)(t.code,{children:"styles."})]}),"\n",(0,i.jsxs)(t.li,{children:["Script files starting with ",(0,i.jsx)(t.code,{children:"script."}),", ",(0,i.jsx)(t.code,{children:"app."}),", ",(0,i.jsx)(t.code,{children:"main."})," or ",(0,i.jsx)(t.code,{children:"index."})]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"While README, markdown files and files with no extension are given lower priority."}),"\n",(0,i.jsxs)(t.p,{children:["Alternatively, files can be specified using the ",(0,i.jsx)(t.code,{children:"files"})," ",(0,i.jsx)(t.a,{href:"/docs/configuration/query-params",children:"query param"}),". It takes a ",(0,i.jsx)(t.strong,{children:"comma-separated list"})," of filenames. The first 3 found files are loaded. If 1 or 2 files are specified, only these will be loaded. The first matching file is shown by default in the active editor."]}),"\n",(0,i.jsxs)(t.p,{children:["The query params should have the following format:\n",(0,i.jsx)(t.code,{children:"?x={url}&files={file1},{file2},{file3}"})]}),"\n",(0,i.jsxs)(t.p,{children:["Example:\n",(0,i.jsx)(t.code,{children:"?x={url}&files=Counter.tsx,counter.scss,counter.html"})]}),"\n",(0,i.jsxs)(t.p,{children:["The active editor can be specified using the ",(0,i.jsx)(t.a,{href:"/docs/configuration/configuration-object#activeeditor",children:(0,i.jsx)(t.code,{children:"activeEditor"})})," (or its alias ",(0,i.jsx)(t.code,{children:"active"}),") ",(0,i.jsx)(t.a,{href:"/docs/configuration/query-params",children:"query param"}),". It takes the name of the editor (",(0,i.jsx)(t.code,{children:"markup"}),", ",(0,i.jsx)(t.code,{children:"style"})," or ",(0,i.jsx)(t.code,{children:"script"}),") or its ID (",(0,i.jsx)(t.code,{children:"0"}),", ",(0,i.jsx)(t.code,{children:"1"})," or ",(0,i.jsx)(t.code,{children:"2"}),") to be shown by default."]}),"\n",(0,i.jsxs)(t.p,{children:["Example:\n",(0,i.jsx)(t.code,{children:"?x={url}&activeEditor=style"})," or ",(0,i.jsx)(t.code,{children:"?x={url}&active=1"})]}),"\n",(0,i.jsx)(t.h2,{id:"import-shared-projects",children:"Import Shared Projects"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"/docs/features/share",children:"Shared Projects"})," can be imported using the value of the query param ",(0,i.jsx)(t.code,{children:"x"})," generated by the Share screen. This starts with either:"]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"code/"}),": for compressed base64-encoded project config"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"id/"}),": for short URLs recognized by shared project id."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?x=id/bi9qszw86w3",children:"https://livecodes.io/?x=id/bi9qszw86w3"})}),"\n",(0,i.jsx)(t.h2,{id:"import-code-from-dom",children:"Import Code from DOM"}),"\n",(0,i.jsxs)(t.p,{children:["If the source URL does not match one of the supported origins (GitHub, GitLab and JS Bin), the URL is fetched, its response text is parsed as ",(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model",children:"DOM"})," and code is extracted from elements that match specific CSS selectors.\n(By default: ",(0,i.jsx)(t.code,{children:'.livecodes [data-lang="{language}"]'}),")"]}),"\n",(0,i.jsxs)(t.admonition,{title:"Example",type:"info",children:[(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-html",children:'\n 
This is identified as <strong>HTML</strong> code
\n\n'})}),(0,i.jsxs)(t.p,{children:["The HTML editor is prefilled with: ",(0,i.jsx)(t.code,{children:"This is identified as HTML code"})]}),(0,i.jsx)(t.p,{children:"Please note that the code should be html-encoded to avoid interference with the HTML of the page."})]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?x=https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html",children:"https://livecodes.io/?x=https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html"})}),"\n",(0,i.jsxs)(t.p,{children:["Alternatively, custom CSS selectors can be specified using ",(0,i.jsx)(t.a,{href:"/docs/configuration/query-params",children:"query params"}),":\n",(0,i.jsx)(t.code,{children:"?x={url}&{language}-selector={selector}"})]}),"\n",(0,i.jsxs)(t.p,{children:["The following example loads the content of the first element that matches the CSS selector ",(0,i.jsx)(t.code,{children:"h3"})," as ",(0,i.jsx)(t.code,{children:"html"}),":"]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?html-selector=h3&x=https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html",children:"https://livecodes.io/?html-selector=h3&x=https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html"})}),"\n",(0,i.jsxs)(t.p,{children:["Of course, ",(0,i.jsx)(t.a,{href:"/docs/features/embeds",children:"embedded playgrounds"})," can be prefilled with code from the same embedding page. This works well for documentation and educational websites."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html",children:"This is a demo"}),' for automatic extraction of code blocks to prefill editors by creating "Edit in LiveCodes" links. Also embedded editors are prefilled from the code blocks. (',(0,i.jsx)(t.a,{href:"https://github.com/live-codes/livecodes-examples/blob/master/prefill-from-code-blocks.html",children:"View source"}),")"]}),"\n",(0,i.jsx)(t.h2,{id:"import-raw-code",children:"Import Raw Code"}),"\n",(0,i.jsxs)(t.p,{children:["If the response text could not be parsed as DOM or no elements matched the CSS selectors, it is assumed to be raw code and the response text is loaded to editor. If the URL ends with an extension it is used to identify the language, otherwise it is assumed to be ",(0,i.jsx)(t.code,{children:"html"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["Alternatively, the language of raw code can be specified using ",(0,i.jsx)(t.a,{href:"/docs/configuration/query-params",children:"query params"}),":\n",(0,i.jsx)(t.code,{children:"?x={url}&raw={language}"})]}),"\n",(0,i.jsx)(t.h2,{id:"import-from-codepen",children:"Import from CodePen"}),"\n",(0,i.jsxs)(t.p,{children:["Currently, CodePen API does not allow directly importing code from Pens. However, you can export any saved Pen as a ",(0,i.jsx)(t.a,{href:"https://blog.codepen.io/documentation/exporting-pens/#export-zip-1",children:"zip file"})," or ",(0,i.jsx)(t.a,{href:"https://blog.codepen.io/documentation/exporting-pens/#save-as-github-gist-2",children:"Github gist"})," and then import it to LiveCodes. The format that Codepen exports is well understood by LiveCodes. Most Pens can be imported with no or minimal changes."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Note:"})," External resources (styles/scripts) are not exported with source code in zip file export of CodePen. However, export to GitHub gist does export these. So if a Pen with external resources exported as zip file is not imported properly, try exporting to GitHub gist or manually add the ",(0,i.jsx)(t.a,{href:"/docs/features/external-resources",children:"external resources"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"import-exported-livecodes-projects",children:"Import Exported LiveCodes Projects"}),"\n",(0,i.jsxs)(t.p,{children:["A ",(0,i.jsx)(t.a,{href:"/docs/features/export#exporting-a-single-project",children:"single project exported as JSON"}),' can be imported in the same or a different device from the import screen under the tab "Import Project JSON". The JSON file can be supplied as a local file upload or from a URL.']}),"\n",(0,i.jsxs)(t.p,{children:["Similarly, ",(0,i.jsx)(t.a,{href:"/docs/features/export#exporting-multiple-projects",children:"multiple projects exported in bulk"}),' can be imported from the tab "Bulk Import".']}),"\n",(0,i.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"/docs/features/code-prefill",children:"Code prefill"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"/docs/features/export",children:"Export"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"/docs/features/external-resources",children:"External resources"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"/docs/features/module-resolution",children:"Module resolution"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"/docs/features/projects",children:"Projects"})}),"\n"]})]})}function p(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},4862:function(e,t,r){"use strict";r.d(t,{Z:function(){return s}});let s=r.p+"assets/images/import-1-173c6698c44150c58b6d341db09435ad.jpg"},6249:function(e,t,r){"use strict";r.d(t,{Z:function(){return s}});let s=r.p+"assets/images/import-2-d2b754e8fc74fcad61a5e7d2932be5d5.jpg"},7728:function(e,t,r){e=r.nmd(e);var s=function(){var e=String.fromCharCode,t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",s={};function i(e,t){if(!s[e]){s[e]={};for(var r=0;r>>8,r[2*s+1]=n%256}return r},decompressFromUint8Array:function(t){if(null==t)return o.decompress(t);for(var r=Array(t.length/2),s=0,i=r.length;sc.charCodeAt(0)){for(s=0;s>=1}else{for(s=0,i=1;s>=1}0==--h&&(h=Math.pow(2,u),u++),delete l[c]}else for(s=0,i=n[c];s>=1;0==--h&&(h=Math.pow(2,u),u++),n[a]=p++,c=String(d)}if(""!==c){if(Object.prototype.hasOwnProperty.call(l,c)){if(256>c.charCodeAt(0)){for(s=0;s>=1}else{for(s=0,i=1;s>=1}0==--h&&(h=Math.pow(2,u),u++),delete l[c]}else for(s=0,i=n[c];s>=1;0==--h&&(h=Math.pow(2,u),u++)}for(s=0,i=2;s>=1;for(;;){if(m<<=1,x==t-1){f.push(r(m));break}x++}return f.join("")},decompress:function(e){return null==e?"":""==e?null:o._decompress(e.length,32768,function(t){return e.charCodeAt(t)})},_decompress:function(t,r,s){var i,o,n,l,d,a,c,h=[],p=4,u=4,f=3,m="",x=[],j={val:s(0),position:r,index:1};for(i=0;i<3;i+=1)h[i]=i;for(n=0,d=4,a=1;a!=d;)l=j.val&j.position,j.position>>=1,0==j.position&&(j.position=r,j.val=s(j.index++)),n|=(l>0?1:0)*a,a<<=1;switch(n){case 0:for(n=0,d=256,a=1;a!=d;)l=j.val&j.position,j.position>>=1,0==j.position&&(j.position=r,j.val=s(j.index++)),n|=(l>0?1:0)*a,a<<=1;c=e(n);break;case 1:for(n=0,d=65536,a=1;a!=d;)l=j.val&j.position,j.position>>=1,0==j.position&&(j.position=r,j.val=s(j.index++)),n|=(l>0?1:0)*a,a<<=1;c=e(n);break;case 2:return""}for(h[3]=c,o=c,x.push(c);;){if(j.index>t)return"";for(n=0,d=Math.pow(2,f),a=1;a!=d;)l=j.val&j.position,j.position>>=1,0==j.position&&(j.position=r,j.val=s(j.index++)),n|=(l>0?1:0)*a,a<<=1;switch(c=n){case 0:for(n=0,d=256,a=1;a!=d;)l=j.val&j.position,j.position>>=1,0==j.position&&(j.position=r,j.val=s(j.index++)),n|=(l>0?1:0)*a,a<<=1;h[u++]=e(n),c=u-1,p--;break;case 1:for(n=0,d=65536,a=1;a!=d;)l=j.val&j.position,j.position>>=1,0==j.position&&(j.position=r,j.val=s(j.index++)),n|=(l>0?1:0)*a,a<<=1;h[u++]=e(n),c=u-1,p--;break;case 2:return x.join("")}if(0==p&&(p=Math.pow(2,f),f++),h[c])m=h[c];else{if(c!==u)return null;m=o+o.charAt(0)}x.push(m),h[u++]=o+m.charAt(0),p--,o=m,0==p&&(p=Math.pow(2,f),f++)}}};return o}();"function"==typeof define&&define.amd?define(function(){return s}):null!=e&&(e.exports=s)},8500:function(e,t,r){"use strict";r.d(t,{Z:()=>a});var s=r("5893");r("7294");var i=r("6735");function o(e){let{children:t,fallback:r}=e;return(0,i.Z)()?(0,s.jsx)(s.Fragment,{children:t?.()}):r??null}var n=r("1705"),l=r("8294"),d=r("1858");function a(e){let{params:t,config:r,code:i,language:a="js",codeTitle:c="",showLineNumbers:h=!1,formatCode:p=!0,linkText:u="Run in LiveCodes",style:f={},className:m=""}=e,x=(0,l.r)({appUrl:d.G,params:t,config:r});return(0,s.jsxs)("div",{style:{marginBottom:"30px",...f},className:m,children:[i&&(0,s.jsx)(o,{children:()=>(0,s.jsx)(n.Z,{language:a,title:c,showLineNumbers:h,children:p?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(i,a):i})}),(0,s.jsxs)("a",{href:x,target:"_blank",rel:"noreferrer",children:[u,(0,s.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,s.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,r){"use strict";r.d(t,{T:function(){return i},r:function(){return o}});var s=r(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:r={},headless:s,loading:i="lazy",view:n}=t,l=s||"headless"===n,d=null,a=null;if("string"==typeof e)d=document.querySelector(e);else if(e instanceof HTMLElement)d=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!d){if(l)U(d=document.createElement("div")),document.body.appendChild(d);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(o(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",l?"eager":i);let p=globalThis.process;c.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof r&&Object.keys(r).length>0&&c.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(u[e])))});let f=!1,m="Cannot call API methods after calling `destroy()`.",x=await new Promise(e=>{if(!d)return;let t=d.dataset.height||d.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";d.style.height=e}"false"===d.dataset.defaultStyles||l||(d.style.backgroundColor||="#fff",d.style.border||="1px solid black",d.style.borderRadius||="8px",d.style.boxSizing||="border-box",d.style.padding||="0",d.style.width||="100%",d.style.height||=d.style.height||"300px",d.style.minHeight="200px",d.style.flexGrow="1",d.style.overflow||="hidden",d.style.resize||="vertical");let s="livecodes",o=d.querySelector(`iframe.${s}`),n=o||document.createElement("iframe");n.classList.add(s),n.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),n.setAttribute("allowtransparency","true"),n.setAttribute("allowpaymentrequest","true"),n.setAttribute("allowfullscreen","true"),n.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),n.setAttribute("loading","eager"===i?"eager":"lazy"),l?U(n):(n.style.height="100%",n.style.minHeight="200px",n.style.width="100%",n.style.margin="0",n.style.border="0",n.style.borderRadius=d.style.borderRadius),addEventListener("message",function e(t){t.source===n.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),a=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!a||a<46)&&addEventListener("message",function e(t){t.source===n.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),n.contentWindow?.postMessage({type:"livecodes-config",payload:r},h))}),n.onload=()=>{e(n)},n.src=c.href,o||d.appendChild(n)}),j=new Promise(e=>{addEventListener("message",function t(r){r.source===x.contentWindow&&r.origin===h&&r.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),j.settled=!0)})}),g=()=>f?Promise.reject(m):new Promise(async e=>{j.settled&&e(),x.contentWindow?.postMessage({type:"livecodes-load"},h),await j,e()}),v=(e,t)=>new Promise(async(r,s)=>{if(f)return s(m);await g();let i=k();addEventListener("message",function t(o){if(o.source===x.contentWindow&&o.origin===h&&o.data?.type==="livecodes-api-response"&&o.data?.id===i&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?s(e.error):r(e)}}),x.contentWindow?.postMessage({method:e,id:i,args:t},h)}),b={},y=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(f)throw Error(m);return y.includes(e)?(v("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&v("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},C=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=C(e.data?.type??"");if(e.source!==x.contentWindow||e.origin!==h||!t||!b[t])return;let r=e.data?.payload;b[t]?.forEach(e=>{e(r)})});let L=()=>{Object.values(b).forEach(e=>{e.length=0}),x?.remove?.(),f=!0};function U(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await g(),t.unobserve(d))})},{rootMargin:"150px"}).observe(d);let k=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>g(),run:()=>v("run"),format:e=>v("format",[e]),getShareUrl:e=>v("getShareUrl",[e]),getConfig:e=>v("getConfig",[e]),setConfig:e=>v("setConfig",[e]),getCode:()=>v("getCode"),show:(e,t)=>v("show",[e,t]),runTests:()=>v("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,r=Array(t>1?t-1:0),s=1;sj.settled?v("destroy").then(L):f?Promise.reject(m):(L(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:r="https://livecodes.io",params:i={},config:o={},headless:n,import:l,lite:d,view:a,...c}=t;try{e=new URL(r)}catch{throw Error(`${r} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[r,s]=t;void 0!==s&&e.searchParams.set(r,String(s))});let p="headless"===t.view||n;if(d&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),a&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==a?o.view=a:e.searchParams.set("view",a)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(o))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{h.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),p&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,r){"use strict";r.d(t,{Z:function(){return l},a:function(){return n}});var s=r(7294);let i={},o=s.createContext(i);function n(e){let t=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:n(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/4e9ccd91.a1d83ab3.js b/docs/assets/js/4e9ccd91.a1d83ab3.js new file mode 100644 index 0000000..de01815 --- /dev/null +++ b/docs/assets/js/4e9ccd91.a1d83ab3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1713"],{1676:function(e,n,t){t.r(n),t.d(n,{default:()=>d,frontMatter:()=>l,metadata:()=>o,assets:()=>c,toc:()=>i,contentTitle:()=>a});var o=JSON.parse('{"id":"languages/flow","title":"Flow","description":"TODO...","source":"@site/docs/languages/flow.mdx","sourceDirName":"languages","slug":"/languages/flow","permalink":"/docs/languages/flow","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/flow.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Fennel","permalink":"/docs/languages/fennel"},"next":{"title":"Gleam","permalink":"/docs/languages/gleam"}}'),s=t("5893"),r=t("65");let l={},a="Flow",c={},i=[];function u(e){let n={h1:"h1",header:"header",p:"p",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"flow",children:"Flow"})}),"\n",(0,s.jsx)(n.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},65:function(e,n,t){t.d(n,{Z:function(){return a},a:function(){return l}});var o=t(7294);let s={},r=o.createContext(s);function l(e){let n=o.useContext(r);return o.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),o.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/51386caf.4aed8be6.js b/docs/assets/js/51386caf.4aed8be6.js new file mode 100644 index 0000000..9f5efd5 --- /dev/null +++ b/docs/assets/js/51386caf.4aed8be6.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5839"],{3943:function(e,s,t){t.r(s),t.d(s,{default:()=>u,frontMatter:()=>l,metadata:()=>r,assets:()=>d,toc:()=>c,contentTitle:()=>a});var r=JSON.parse('{"id":"features/css","title":"CSS","description":"The result page can be styled with CSS using various methods, including:","source":"@site/docs/features/css.mdx","sourceDirName":"features","slug":"/features/css","permalink":"/docs/features/css","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/css.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Templates","permalink":"/docs/features/templates"},"next":{"title":"Result Page","permalink":"/docs/features/result"}}'),n=t("5893"),o=t("65"),i=t("3365");let l={},a="CSS",d={},c=[{value:"Style Editor",id:"style-editor",level:2},{value:"Languages",id:"languages",level:3},{value:"CSS Processors",id:"css-processors",level:3},{value:"Style Imports",id:"style-imports",level:3},{value:"Example",id:"example",level:4},{value:"Compiled CSS",id:"compiled-css",level:3},{value:"Auto-update",id:"auto-update",level:3},{value:"External Resources",id:"external-resources",level:2},{value:"CSS Presets",id:"css-presets",level:2},{value:"Stylesheets Imported in Script Editor",id:"stylesheets-imported-in-script-editor",level:2},{value:"External Stylesheets",id:"external-stylesheets",level:3},{value:"./style.css",id:"stylecss",level:3},{value:"CSS Modules",id:"css-modules",level:2},{value:"CSS Frameworks",id:"css-frameworks",level:2},{value:"Styles in Markup & Script",id:"styles-in-markup--script",level:2},{value:"Related",id:"related",level:2}];function h(e){let s={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.header,{children:(0,n.jsx)(s.h1,{id:"css",children:"CSS"})}),"\n","\n",(0,n.jsxs)(s.p,{children:["The ",(0,n.jsx)(s.a,{href:"/docs/features/result",children:"result page"})," can be styled with CSS using various methods, including:"]}),"\n",(0,n.jsx)(s.h2,{id:"style-editor",children:"Style Editor"}),"\n",(0,n.jsxs)(s.p,{children:["Code added to ",(0,n.jsx)(s.a,{href:"/docs/features/projects#style-editor",children:"style editor"})," is ",(0,n.jsx)(s.a,{href:"#languages",children:"compiled"})," and ",(0,n.jsx)(s.a,{href:"#css-processors",children:"processed"}),", then added as CSS to the ",(0,n.jsx)(s.a,{href:"/docs/features/result",children:"result page"})," ",(0,n.jsx)(s.code,{children:"head"})," element."]}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.img,{alt:"LiveCodes styles",src:t(6290).Z+"",width:"2240",height:"1400"})," "]}),"\n",(0,n.jsx)(s.h3,{id:"languages",children:"Languages"}),"\n",(0,n.jsxs)(s.p,{children:["LiveCodes supports multiple languages that compile to CSS, including ",(0,n.jsx)(s.a,{href:"/docs/languages/scss",children:"SCSS"}),", ",(0,n.jsx)(s.a,{href:"/docs/languages/sass",children:"Sass"}),", ",(0,n.jsx)(s.a,{href:"/docs/languages/less",children:"Less"})," and ",(0,n.jsx)(s.a,{href:"/docs/languages/stylus",children:"Stylus"}),". Code authored in any of these languages is compiled to CSS before being added to the ",(0,n.jsx)(s.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:["The style language can be selected from the style editor menu. In embedded playgrounds, the language can be configured via the configuration object property ",(0,n.jsx)(s.a,{href:"/docs/configuration/configuration-object#style",children:(0,n.jsx)(s.code,{children:"style.language"})})]}),"\n",(0,n.jsx)(s.h3,{id:"css-processors",children:"CSS Processors"}),"\n",(0,n.jsxs)(s.p,{children:["The (compiled) CSS code can be processed by one or more of the supported CSS processors. Examples of these include: ",(0,n.jsx)(s.a,{href:"/docs/languages/autoprefixer",children:"Autoprefixer"}),", ",(0,n.jsx)(s.a,{href:"/docs/languages/postcssPresetEnv",children:"postcss-preset-env"}),", ",(0,n.jsx)(s.a,{href:"/docs/languages/lightningcss",children:"Lightning CSS"}),", ",(0,n.jsx)(s.a,{href:"/docs/languages/cssmodules",children:"CSS Modules"}),", ",(0,n.jsx)(s.a,{href:"/docs/languages/cssnano",children:"cssnano"}),", ...etc."]}),"\n",(0,n.jsx)(s.p,{children:"Multiple CSS processors can be enabled at the same time. The code is processed in the order of processors placed in the style editor menu of the app."}),"\n",(0,n.jsxs)(s.p,{children:["Processors are enabled in the ",(0,n.jsx)(s.a,{href:"/docs/getting-started#standalone-app",children:"standalone app"})," from the style editor menu, by switching on the toggles of the required processors."]}),"\n",(0,n.jsxs)(s.p,{children:["In embedded playgrounds, processors are enabled via the ",(0,n.jsx)(s.a,{href:"/docs/configuration/configuration-object#processors",children:(0,n.jsx)(s.code,{children:"processors"})})," property of the ",(0,n.jsx)(s.a,{href:"/docs/configuration/configuration-object",children:"configuration object"}),"."]}),"\n",(0,n.jsx)(s.h3,{id:"style-imports",children:"Style Imports"}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.a,{href:"/docs/features/module-resolution#bare-module-imports",children:"Bare modules"})," used with ",(0,n.jsx)(s.code,{children:"@import"})," rules are supposed to be npm modules. These are converted to ",(0,n.jsx)(s.a,{href:"/docs/features/module-resolution#cdn-providers",children:"full URLs from CDN"}),"."]}),"\n",(0,n.jsx)(s.h4,{id:"example",children:"Example"}),"\n",(0,n.jsx)(s.p,{children:"This code:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:"@import 'github-markdown-css/github-markdown.css';\n"})}),"\n",(0,n.jsx)(s.p,{children:"becomes:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:"@import 'https://unpkg.com/github-markdown-css/github-markdown.css';\n"})}),"\n",(0,n.jsx)(s.p,{children:"Packages that specify a stylesheet as the main module can be imported like that:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:"@import 'github-markdown-css';\n"})}),"\n",(0,n.jsx)(s.p,{children:"demo:"}),"\n",(0,n.jsx)(i.Z,{template:"markdown",params:{activeEditor:"style",compiled:"open"}}),"\n",(0,n.jsxs)(s.p,{children:["The content can be inlined in the compiled CSS by enabling the processor ",(0,n.jsx)(s.a,{href:"/docs/languages/postcssImportUrl",children:"postcss-import-url"}),"."]}),"\n",(0,n.jsx)(s.h3,{id:"compiled-css",children:"Compiled CSS"}),"\n",(0,n.jsxs)(s.p,{children:["Compiled CSS (following compilation of style language, and all enabled processors) is added to the ",(0,n.jsx)(s.a,{href:"/docs/features/result",children:"result page"})," ",(0,n.jsx)(s.code,{children:"head"})," element."]}),"\n",(0,n.jsxs)(s.p,{children:["The compiled code can be inspected in the ",(0,n.jsx)(s.a,{href:"/docs/features/compiled-code",children:"compiled code viewer"})," in the ",(0,n.jsx)(s.a,{href:"/docs/features/tools-pane",children:"tools pane"}),"."]}),"\n",(0,n.jsx)(s.h3,{id:"auto-update",children:"Auto-update"}),"\n",(0,n.jsxs)(s.p,{children:["When ",(0,n.jsx)(s.a,{href:"/docs/configuration/configuration-object#autoupdate",children:(0,n.jsx)(s.code,{children:"autoupdate"})})," is enabled (default), in contrast to ",(0,n.jsx)(s.a,{href:"/docs/features/projects#markup-editor",children:"markup editor"})," and ",(0,n.jsx)(s.a,{href:"/docs/features/projects#script-editor",children:"script editor"}),", changes in style editor code does NOT trigger a full reload of the ",(0,n.jsx)(s.a,{href:"/docs/features/result",children:"result page"}),". The updated CSS code is sent to the page and applied without a reload."]}),"\n",(0,n.jsxs)(s.p,{children:["The page can be force-reloaded by clicking the run button or using the keyboard shortcut: ",(0,n.jsx)("kbd",{children:"Shift"}),"\xa0+\xa0",(0,n.jsx)("kbd",{children:"Enter"}),"."]}),"\n",(0,n.jsx)(s.h2,{id:"external-resources",children:"External Resources"}),"\n",(0,n.jsxs)(s.p,{children:["External stylesheets can be added in ",(0,n.jsx)(s.a,{href:"/docs/features/external-resources",children:"external resources"})," screen. These are added to the ",(0,n.jsx)(s.a,{href:"/docs/features/result",children:"result page"})," before the compiled style editor code. This allows code in style editor to override CSS properties in external stylesheets."]}),"\n",(0,n.jsxs)(s.p,{children:["External stylesheets can be added to embedded playgrounds using the ",(0,n.jsx)(s.a,{href:"/docs/configuration/configuration-object",children:"configuration object"})," property ",(0,n.jsx)(s.a,{href:"/docs/configuration/configuration-object#stylesheets",children:(0,n.jsx)(s.code,{children:"stylesheets"})}),"."]}),"\n",(0,n.jsx)(s.h2,{id:"css-presets",children:"CSS Presets"}),"\n",(0,n.jsxs)(s.p,{children:["CSS presets like ",(0,n.jsx)(s.a,{href:"https://necolas.github.io/normalize.css/",children:"Normalize.css"})," and ",(0,n.jsx)(s.a,{href:"https://meyerweb.com/eric/tools/css/reset/",children:"Reset CSS"})," can be selected in ",(0,n.jsx)(s.a,{href:"/docs/features/external-resources#css-presets",children:"external resources"})," screen."]}),"\n",(0,n.jsx)(s.h2,{id:"stylesheets-imported-in-script-editor",children:"Stylesheets Imported in Script Editor"}),"\n",(0,n.jsx)(s.h3,{id:"external-stylesheets",children:"External Stylesheets"}),"\n",(0,n.jsxs)(s.p,{children:["CSS stylesheets imported in the script editor are added to the ",(0,n.jsx)(s.a,{href:"/docs/features/result",children:"result page"})," ",(0,n.jsx)(s.code,{children:"head"})," element. ",(0,n.jsxs)(s.em,{children:["The URL has to end with ",(0,n.jsxs)(s.strong,{children:[(0,n.jsx)(s.code,{children:".css"})," extension"]})]}),"."]}),"\n",(0,n.jsx)(s.p,{children:"For example, adding this in the script editor (JavaScript):"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-js",children:"import 'https://unpkg.com/github-markdown-css/github-markdown.css';\n"})}),"\n",(0,n.jsxs)(s.p,{children:["adds this to the page ",(0,n.jsx)(s.code,{children:"head"}),":"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-html",children:'\n'})}),"\n",(0,n.jsx)(s.p,{children:"Currently, compiling imported stylesheets (e.g. SCSS) is not supported."}),"\n",(0,n.jsxs)(s.p,{children:["Similar to ",(0,n.jsx)(s.a,{href:"#style-imports",children:"imports in style editor"}),", bare imports are converted to full URLs from CDN."]}),"\n",(0,n.jsx)(s.p,{children:"For example:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-js",children:"import 'github-markdown-css/github-markdown.css';\n"})}),"\n",(0,n.jsx)(s.p,{children:"becomes:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-html",children:'\n'})}),"\n",(0,n.jsx)(s.h3,{id:"stylecss",children:(0,n.jsx)(s.code,{children:"./style.css"})}),"\n",(0,n.jsxs)(s.p,{children:["Importing the URLs (",(0,n.jsx)(s.code,{children:"./style.css"})," or ",(0,n.jsx)(s.code,{children:"./styles.css"}),") gets the style editor compiled/processed CSS ",(0,n.jsx)(s.strong,{children:"string"})," as the module's default export."]}),"\n",(0,n.jsx)(s.p,{children:"Example:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-js",children:"import styles from './style.css';\n\nconsole.log(styles); // => compiled CSS as string\n"})}),"\n",(0,n.jsx)(s.h2,{id:"css-modules",children:"CSS Modules"}),"\n",(0,n.jsxs)(s.p,{children:["CSS modules are supported and are ",(0,n.jsx)(s.a,{href:"/docs/languages/cssmodules",children:"documented separately"}),"."]}),"\n",(0,n.jsx)(s.h2,{id:"css-frameworks",children:"CSS Frameworks"}),"\n",(0,n.jsxs)(s.p,{children:["Multiple CSS frameworks are supported including ",(0,n.jsx)(s.a,{href:"/docs/languages/tailwindcss",children:"Tailwind CSS"}),", ",(0,n.jsx)(s.a,{href:"/docs/languages/unocss",children:"UnoCSS"})," and ",(0,n.jsx)(s.a,{href:"/docs/languages/windicss",children:"WindiCSS"}),"."]}),"\n",(0,n.jsx)(s.h2,{id:"styles-in-markup--script",children:"Styles in Markup & Script"}),"\n",(0,n.jsx)(s.p,{children:"Of course, styles and stylesheets can still be added as usual in markup and script editors (via HTML elements and/or DOM)."}),"\n",(0,n.jsx)(s.h2,{id:"related",children:"Related"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/projects",children:"Projects"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/external-resources",children:"External resources"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/module-resolution",children:"Module resolution"})}),"\n"]})]})}function u(e={}){let{wrapper:s}={...(0,o.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}},6290:function(e,s,t){t.d(s,{Z:function(){return r}});let r=t.p+"assets/images/css-processors-832dad3e4809409f2d12e9d8109f0962.jpg"},3365:function(e,s,t){t.d(s,{Z:()=>f});var r=t("5893"),n=t("4200"),o=t("7294"),i=t("8294");function l(e){let s=(0,o.useRef)(null),[t,n]=(0,o.useState)(e.className||""),[l,a]=(0,o.useState)(e.style||{}),[d,c]=(0,o.useState)(e.height),[h,u]=(0,o.useState)(),[p,m]=(0,o.useState)(JSON.stringify(e.config||"")),[g,f]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!s.current)return;let{className:t,style:r,height:o,sdkReady:l,config:d,...x}=e;if(n(t||""),a(r||{}),c(o),h&&g===JSON.stringify(x)){if(p===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(x)),h?.destroy(),(0,i.T)(s.current,{config:d,...x}).then(e=>{u(e),"function"==typeof l&&l(e)})},[e]),(0,o.useEffect)(()=>()=>{h?.destroy()},[]),(0,r.jsx)("div",{ref:s,className:t,style:l,"data-height":d})}var a=t("1858"),d=t("3262"),c=t("1705"),h=t("7645"),u=t("8168"),p=t("8228"),m=t("5050");function g(e){let[s,t]=(0,o.useState)(e.js),[n,i]=(0,o.useState)(e.ts),[l,a]=(0,o.useState)(e.react),[g,f]=(0,o.useState)(e.vue),[x,j]=(0,o.useState)(e.svelte),y="3.7rem",[v,S]=(0,o.useState)(!0),[b,w]=(0,o.useState)(y),C=(0,o.useRef)(null),k=()=>{setTimeout(()=>{w(`calc(${C.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{w(`calc(${C.current.offsetHeight}px + ${y})`)},255)};return(0,o.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===s?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};t(e(s,"js")),i(e(n,"ts")),a(e(l,"jsx")),f(e(g,"html")),j(e(x,"html"))}},[]),(0,r.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":v,style:{height:v?y:b,overflow:"hidden",willChange:"height",transition:`height ${v?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,r.jsx)("summary",{onClick:()=>{S(!v),k()},children:"show code"}),(0,r.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,r.jsx)("div",{className:m.Z.collapsibleContent,children:(0,r.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,r.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:k},children:(0,r.jsx)(c.Z,{language:"js",children:s})}),(0,r.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:k},children:(0,r.jsx)(c.Z,{language:"ts",children:n})}),(0,r.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:k},children:(0,r.jsx)(c.Z,{language:"jsx",children:l})}),(0,r.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:k},children:(0,r.jsx)(c.Z,{language:"html",children:g})}),(0,r.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:k},children:(0,r.jsx)(c.Z,{language:"html",children:x})})]})})})]})}function f(e){let{className:s,style:t,showCode:o,height:i,...d}=e,{colorMode:c}=(0,n.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (); +} + +`.trimStart(),f=` + + + +`,x=` + + +
+ +`.trimStart();return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:a.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,r.jsx)(g,{js:u,ts:p,react:m,vue:f,svelte:x})]})}},8294:function(e,s,t){t.d(s,{T:function(){return n},r:function(){return o}});var r=t(7728);async function n(e){let s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(s=e,e=null);let{config:t={},headless:r,loading:n="lazy",view:i}=s,l=r||"headless"===i,a=null,d=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)k(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(o(s)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",l?"eager":n);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof t&&Object.keys(t).length>0&&c.searchParams.set("config","sdk");let p=s.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!a)return;let s=a.dataset.height||a.style.height;if(s&&!l){let e=isNaN(Number(s))?s:s+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let r="livecodes",o=a.querySelector(`iframe.${r}`),i=o||document.createElement("iframe");i.classList.add(r),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===n?"eager":"lazy"),l?k(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(s){s.source===i.contentWindow&&s.origin===h&&s.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(s.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(s){s.source===i.contentWindow&&s.origin===h&&s.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:t},h))}),i.onload=()=>{e(i)},i.src=c.href,o||a.appendChild(i)}),x=new Promise(e=>{addEventListener("message",function s(t){t.source===f.contentWindow&&t.origin===h&&t.data?.type==="livecodes-ready"&&(removeEventListener("message",s),e(),x.settled=!0)})}),j=()=>m?Promise.reject(g):new Promise(async e=>{x.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await x,e()}),y=(e,s)=>new Promise(async(t,r)=>{if(m)return r(g);await j();let n=E();addEventListener("message",function s(o){if(o.source===f.contentWindow&&o.origin===h&&o.data?.type==="livecodes-api-response"&&o.data?.id===n&&o.data.method===e){removeEventListener("message",s);let e=o.data.payload;e?.error?r(e.error):t(e)}}),f.contentWindow?.postMessage({method:e,id:n,args:s},h)}),v={},S=["load","ready","code","console","tests","destroy"],b=(e,s)=>{if(m)throw Error(g);return S.includes(e)?(y("watch",[e]),v[e]||(v[e]=[]),v[e]?.push(s),{remove:()=>{v[e]=v[e]?.filter(e=>e!==s),v[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},w=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let s=w(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!s||!v[s])return;let t=e.data?.payload;v[s]?.forEach(e=>{e(t)})});let C=()=>{Object.values(v).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function k(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,s)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),s.unobserve(a))})},{rootMargin:"150px"}).observe(a);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,s)=>y("show",[e,s]),runTests:()=>y("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var s=arguments.length,t=Array(s>1?s-1:0),r=1;rx.settled?y("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function o(){let e,s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:t="https://livecodes.io",params:n={},config:o={},headless:i,import:l,lite:a,view:d,...c}=s;try{e=new URL(t)}catch{throw Error(`${t} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(s=>{let[t,r]=s;void 0!==r&&e.searchParams.set(t,String(r))});let u="headless"===s.view||i;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==d?o.view=d:e.searchParams.set("view",d)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),h.set("config","code/"+(0,r.compressToEncodedURIComponent)(JSON.stringify(o))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{h.set("params",(0,r.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(s=>{e.searchParams.set(s,encodeURIComponent(String(n[s])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,s,t){t.d(s,{Z:function(){return l},a:function(){return i}});var r=t(7294);let n={},o=r.createContext(n);function i(e){let s=r.useContext(o);return r.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),r.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/51eed215.b82d8c0c.js b/docs/assets/js/51eed215.b82d8c0c.js new file mode 100644 index 0000000..ed0d668 --- /dev/null +++ b/docs/assets/js/51eed215.b82d8c0c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3305"],{3011:function(e,s,t){t.r(s),t.d(s,{default:()=>h,frontMatter:()=>a,metadata:()=>n,assets:()=>c,toc:()=>d,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/react-tsx","title":"React (TSX)","description":"TSX is a syntax that allows using TypeScript in JSX.","source":"@site/docs/languages/react-tsx.mdx","sourceDirName":"languages","slug":"/languages/react-tsx","permalink":"/docs/languages/react-tsx","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/react-tsx.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"React Native","permalink":"/docs/languages/react-native"},"next":{"title":"React","permalink":"/docs/languages/react"}}'),r=t("5893"),i=t("65");let a={},l="React (TSX)",c={},d=[{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Links",id:"links",level:2}];function o(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.header,{children:(0,r.jsx)(s.h1,{id:"react-tsx",children:"React (TSX)"})}),"\n",(0,r.jsx)(s.p,{children:"TSX is a syntax that allows using TypeScript in JSX."}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.a,{href:"https://react.dev/learn/react-compiler",children:"React Compiler"})," is a build-time only tool that automatically optimizes ",(0,r.jsx)(s.a,{href:"https://react.dev/",children:"React"})," apps."]}),"\n",(0,r.jsxs)(s.p,{children:["Please note that LiveCodes supports running ",(0,r.jsx)(s.a,{href:"/docs/languages/jsx",children:"JSX"})," and ",(0,r.jsx)(s.a,{href:"/docs/languages/tsx",children:"TSX"})," which are compiled to JavaScript using the ",(0,r.jsx)(s.a,{href:"/docs/languages/typescript",children:"TypeScript compiler"}),". This was the traditional way of running React and other JSX/TSX apps in LiveCodes before React compiler support was added."]}),"\n",(0,r.jsx)(s.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(s.p,{children:["For usage and examples, see documentation for ",(0,r.jsx)(s.a,{href:"/docs/languages/react",children:"React"})," and ",(0,r.jsx)(s.a,{href:"/docs/languages/typescript",children:"TypeScript"})," support in LiveCodes."]}),"\n",(0,r.jsx)(s.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(s.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.code,{children:"react-tsx"})}),"\n",(0,r.jsx)(s.h3,{id:"extension",children:"Extension"}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.code,{children:".react.tsx"})}),"\n",(0,r.jsx)(s.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.code,{children:"script"})}),"\n",(0,r.jsx)(s.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.a,{href:"https://react.dev/learn/react-compiler",children:"React compiler"}),", which is a ",(0,r.jsx)(s.a,{href:"/docs/languages/babel",children:"babel"})," plugin (",(0,r.jsx)(s.a,{href:"https://www.npmjs.com/package/babel-plugin-react-compiler",children:"babel-plugin-react-compiler"}),")."]}),"\n",(0,r.jsx)(s.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsxs)(s.p,{children:["Using ",(0,r.jsx)(s.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,r.jsx)(s.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,r.jsxs)(s.p,{children:["React compiler is implemented as a babel plugin (",(0,r.jsx)(s.a,{href:"https://www.npmjs.com/package/babel-plugin-react-compiler",children:"babel-plugin-react-compiler"}),"). In addition the following babel presets are used:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://babeljs.io/docs/en/babel-preset-env",children:"@babel/preset-env"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://babeljs.io/docs/en/babel-preset-react",children:"@babel/preset-react"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://babeljs.io/docs/en/babel-preset-typescript",children:"@babel/preset-typescript"})}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," can be used to add configuration under the following keys:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"react-tsx"}),": the option ",(0,r.jsx)(s.code,{children:"disableAutoRender"})," can be set to ",(0,r.jsx)(s.code,{children:"true"})," to disable ",(0,r.jsx)(s.a,{href:"/docs/languages/react#auto-rendering",children:"auto-rendering"}),"."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"babel"}),": custom settings for ",(0,r.jsx)(s.a,{href:"https://babeljs.io/docs/options",children:"babel"}),"."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"babel-plugin-react-compiler"}),": custom settings for ",(0,r.jsx)(s.a,{href:"https://www.npmjs.com/package/babel-plugin-react-compiler",children:"babel-plugin-react-compiler"}),"."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"@babel/preset-env"}),": custom settings for ",(0,r.jsx)(s.a,{href:"https://babeljs.io/docs/en/babel-preset-env",children:"@babel/preset-env"}),"."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"@babel/preset-react"}),": custom settings for ",(0,r.jsx)(s.a,{href:"https://babeljs.io/docs/en/babel-preset-react",children:"@babel/preset-react"}),"."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"@babel/preset-typescript"}),": custom settings for ",(0,r.jsx)(s.a,{href:"https://babeljs.io/docs/en/babel-preset-typescript",children:"@babel/preset-typescript"}),"."]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Example:"})}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "react-tsx": {\n "disableAutoRender": true\n }\n}\n'})}),"\n",(0,r.jsx)(s.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://react.dev/",children:"React"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://react.dev/learn/writing-markup-with-jsx",children:"JSX"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"https://www.typescriptlang.org/",children:"TypeScript"})}),"\n"]})]})}function h(e={}){let{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}},65:function(e,s,t){t.d(s,{Z:function(){return l},a:function(){return a}});var n=t(7294);let r={},i=n.createContext(r);function a(e){let s=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),n.createElement(i.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/52e7b168.ddb9099c.js b/docs/assets/js/52e7b168.ddb9099c.js new file mode 100644 index 0000000..5caab9b --- /dev/null +++ b/docs/assets/js/52e7b168.ddb9099c.js @@ -0,0 +1,60 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["823"],{4944:function(e,t,s){s.r(t),s.d(t,{UMDCode:()=>g,default:()=>y,frontMatter:()=>h,metadata:()=>n,assets:()=>u,ESMCode:()=>m,toc:()=>f,contentTitle:()=>p});var n=JSON.parse('{"id":"sdk/index","title":"LiveCodes SDK","description":"The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds.","source":"@site/docs/sdk/index.mdx","sourceDirName":"sdk","slug":"/sdk/","permalink":"/docs/sdk/","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/sdk/index.mdx","tags":[],"version":"current","frontMatter":{"sidebar_class_name":"exclude_from_sidebar"},"sidebar":"docsSidebar","previous":{"title":"Query Parameters","permalink":"/docs/configuration/query-params"},"next":{"title":"JS/TS SDK","permalink":"/docs/sdk/js-ts"}}'),o=s("5893"),r=s("65"),i=s("8168"),a=s("7645"),l=s("3365"),d=s("7262"),c=s("1705");let h={sidebar_class_name:"exclude_from_sidebar"},p="LiveCodes SDK",u={},m=()=>{let{siteConfig:e}=(0,d.Z)();return(0,o.jsx)(c.Z,{title:"index.html",language:"html",children:`
+`})},g=()=>{let{siteConfig:e}=(0,d.Z)();return(0,o.jsx)(c.Z,{title:"index.html",language:"html",children:`
+ + +`})},f=[{value:"SDK Demo",id:"sdk-demo",level:2},{value:"Installation",id:"installation",level:2},{value:"NPM Package",id:"npm-package",level:3},{value:"CDN",id:"cdn",level:3},{value:"Usage",id:"usage",level:2},{value:"Headless Mode",id:"headless-mode",level:2},{value:"SDK Playground!",id:"sdk-playground",level:2}];function v(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"livecodes-sdk",children:"LiveCodes SDK"})}),"\n","\n",(0,o.jsx)(t.p,{children:"The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds."}),"\n",(0,o.jsxs)(t.p,{children:["The SDK is provided as a light-weight (",(0,o.jsx)(t.a,{href:"https://bundlephobia.com/package/livecodes",children:"less than 5kb gzipped"}),"), zero-dependencies ",(0,o.jsx)(t.a,{href:"#npm-package",children:"npm package"}),", that is also available from ",(0,o.jsx)(t.a,{href:"#cdn",children:"CDNs"}),". It can be used to create playgrounds with a wide variety of ",(0,o.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configurations"})," and ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#embed-options",children:"embed options"}),". In addition, ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#sdk-methods",children:"SDK methods"})," allow programmatic communication and control of the playgrounds during runtime."]}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts",children:"JavaScript SDK"})," is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently ",(0,o.jsx)(t.a,{href:"/docs/sdk/react",children:"React"})," and ",(0,o.jsx)(t.a,{href:"/docs/sdk/vue",children:"Vue"}),"). The SDK can be used in ",(0,o.jsx)(t.a,{href:"/docs/sdk/svelte",children:"Svelte"})," directly without wrappers. ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#typescript-types",children:"TypeScript support"})," provides type-safety and a great developer experience."]}),"\n",(0,o.jsx)(t.h2,{id:"sdk-demo",children:"SDK Demo"}),"\n",(0,o.jsx)(t.p,{children:"This is an example of an editable embedded playground using the SDK."}),"\n",(0,o.jsx)(l.Z,{config:{markup:{language:"markdown",content:"# Hello World!"},script:{language:"javascript",content:'console.log("Hello, from JS!");'},tools:{active:"console",status:"open"}}}),"\n",(0,o.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,o.jsx)(t.h3,{id:"npm-package",children:"NPM Package"}),"\n",(0,o.jsx)(t.p,{children:"This is a single npm package for the SDK which supports JavaScript/TypeScript, React, Vue and Svelte.\nInstall the library from npm:"}),"\n",(0,o.jsxs)(i.Z,{groupId:"npm2yarn",children:[(0,o.jsx)(a.Z,{value:"npm",children:(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-bash",children:"npm install livecodes\n"})})}),(0,o.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-bash",children:"yarn add livecodes\n"})})}),(0,o.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-bash",children:"pnpm add livecodes\n"})})}),(0,o.jsx)(a.Z,{value:"bun",label:"Bun",children:(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-bash",children:"bun add livecodes\n"})})})]}),"\n",(0,o.jsx)(t.p,{children:"then it can be used like that:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",metastring:'title="index.js"',children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container', {\n // embed options\n});\n"})}),"\n",(0,o.jsx)(t.h3,{id:"cdn",children:"CDN"}),"\n",(0,o.jsx)(t.p,{children:"Alternatively, it can just be loaded from a CDN."}),"\n",(0,o.jsx)(t.p,{children:"ESM:"}),"\n","\n","\n",(0,o.jsx)(m,{}),"\n",(0,o.jsx)(t.p,{children:"UMD:"}),"\n","\n",(0,o.jsx)(g,{}),"\n",(0,o.jsx)(t.admonition,{type:"info",children:(0,o.jsxs)(t.p,{children:["In the full ",(0,o.jsx)(t.a,{href:"/docs/getting-started#standalone-app",children:"standalone app"}),", the JavaScript SDK is accessible via the global variable ",(0,o.jsx)(t.code,{children:"livecodes"}),", which can be interacted with in the browser console."]})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.p,{children:"The SDK is currently provided in the following variations:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts",children:"JavaScript/TypeScript"})}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"/docs/sdk/react",children:"React"})}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"/docs/sdk/vue",children:"Vue"})}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"/docs/sdk/svelte",children:"Svelte"})}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(t.h2,{id:"headless-mode",children:"Headless Mode"}),"\n",(0,o.jsxs)(t.p,{children:["The SDK also has a ",(0,o.jsx)(t.a,{href:"/docs/sdk/headless",children:"headless mode"}),". In this mode, no visible output is displayed in the embedding web page. However, all ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#sdk-methods",children:"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."]}),"\n",(0,o.jsx)(t.h2,{id:"sdk-playground",children:"SDK Playground!"}),"\n",(0,o.jsxs)(t.p,{children:["A demo page that shows the usage of the SDK can be ",(0,o.jsx)(t.a,{href:"https://live-codes.github.io/livecodes-examples/sdk-demo.html",children:"found here"})," (",(0,o.jsx)(t.a,{href:"https://github.com/live-codes/livecodes-examples/blob/gh-pages/sdk-demo.html",children:"source"}),")."]}),"\n",(0,o.jsx)(t.p,{children:"Or edit the SDK playground in LiveCodes. How meta! :)"}),"\n",(0,o.jsx)(l.Z,{import:"id/8k6vbxitvb9",config:{view:"result"},height:"80vh",showCode:!1}),"\n",(0,o.jsx)(t.p,{children:'P.S. You may want to use the "Full Screen" button!'})]})}function y(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(v,{...e})}):v(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),o=s("4200"),r=s("7294"),i=s("8294");function a(e){let t=(0,r.useRef)(null),[s,o]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[d,c]=(0,r.useState)(e.height),[h,p]=(0,r.useState)(),[u,m]=(0,r.useState)(JSON.stringify(e.config||"")),[g,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:r,sdkReady:a,config:d,...v}=e;if(o(s||""),l(n||{}),c(r),h&&g===JSON.stringify(v)){if(u===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(v)),h?.destroy(),(0,i.T)(t.current,{config:d,...v}).then(e=>{p(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":d})}var l=s("1858"),d=s("3262"),c=s("1705"),h=s("7645"),p=s("8168"),u=s("8228"),m=s("5050");function g(e){let[t,s]=(0,r.useState)(e.js),[o,i]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[g,f]=(0,r.useState)(e.vue),[v,y]=(0,r.useState)(e.svelte),j="3.7rem",[x,b]=(0,r.useState)(!0),[w,S]=(0,r.useState)(j),k=(0,r.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${k.current.offsetHeight}px + ${j})`)},5),setTimeout(()=>{S(`calc(${k.current.offsetHeight}px + ${j})`)},255)};return(0,r.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(o,"ts")),l(e(a,"jsx")),f(e(g,"html")),y(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${u.Z.details}`,"data-collapsed":x,style:{height:x?j:w,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!x),C()},children:"show code"}),(0,n.jsx)("div",{ref:k,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(p.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"ts",children:o})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"jsx",children:a})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:r,height:i,...d}=e,{colorMode:c}=(0,o.I)(),h=e=>JSON.stringify(e,null,2),p=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),u=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (); +} + +`.trimStart(),f=` + + + +`,v=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:p,ts:u,react:m,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return o},r:function(){return r}});var n=s(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:o="lazy",view:i}=t,a=n||"headless"===i,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)C(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(r(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":o);let p=globalThis.process;c.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(u[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",r=l.querySelector(`iframe.${n}`),i=r||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===o?"eager":"lazy"),a?C(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),i.onload=()=>{e(i)},i.src=c.href,r||l.appendChild(i)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>m?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),j=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await y();let o=P();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===o&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:o,args:t},h)}),x={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return b.includes(e)?(j("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!x[t])return;let s=e.data?.payload;x[t]?.forEach(e=>{e(s)})});let k=()=>{Object.values(x).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,t)=>j("show",[e,t]),runTests:()=>j("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nv.settled?j("destroy").then(k):m?Promise.reject(g):(k(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:o={},config:r={},headless:i,import:a,lite:l,view:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let p="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==d?r.view=d:e.searchParams.set("view",d)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(r))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),p&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return i}});var n=s(7294);let o={},r=n.createContext(o);function i(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/52e7ca68.6739e6a7.js b/docs/assets/js/52e7ca68.6739e6a7.js new file mode 100644 index 0000000..f81c2a2 --- /dev/null +++ b/docs/assets/js/52e7ca68.6739e6a7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5824"],{673:function(e,o,c){c.r(o),c.d(o,{default:()=>h,frontMatter:()=>a,metadata:()=>d,assets:()=>t,toc:()=>l,contentTitle:()=>i});var d=JSON.parse('{"id":"api/internal/type-aliases/CodejarTheme","title":"Type Alias: CodejarTheme","description":"CodejarTheme: \\"a11y-dark\\" \\\\| \\"atom-dark\\" \\\\| \\"base16-ateliersulphurpool-light\\" \\\\| \\"catppuccin-latte\\" \\\\| \\"catppuccin-frappe\\" \\\\| \\"catppuccin-macchiato\\" \\\\| \\"catppuccin-mocha\\" \\\\| \\"cb\\" \\\\| \\"coldark-cold\\" \\\\| \\"coldark-dark\\" \\\\| \\"coy\\" \\\\| \\"coy-without-shadows\\" \\\\| \\"darcula\\" \\\\| \\"dark\\" \\\\| \\"dracula\\" \\\\| \\"duotone-dark\\" \\\\| \\"duotone-earth\\" \\\\| \\"duotone-forest\\" \\\\| \\"duotone-light\\" \\\\| \\"duotone-sea\\" \\\\| \\"duotone-space\\" \\\\| \\"funky\\" \\\\| \\"ghcolors\\" \\\\| \\"gruvbox-dark\\" \\\\| \\"gruvbox-light\\" \\\\| \\"holi-theme\\" \\\\| \\"hopscotch\\" \\\\| \\"laserwave\\" \\\\| \\"lucario\\" \\\\| \\"material-dark\\" \\\\| \\"material-light\\" \\\\| \\"material-oceanic\\" \\\\| \\"monochrome\\" \\\\| \\"monochrome-dark\\" \\\\| \\"night-owl\\" \\\\| \\"nord\\" \\\\| \\"nord-2\\" \\\\| \\"okaidia\\" \\\\| \\"one-dark\\" \\\\| \\"one-light\\" \\\\| \\"pojoaque\\" \\\\| \\"shades-of-purple\\" \\\\| \\"solarized-dark-atom\\" \\\\| \\"solarized-light\\" \\\\| \\"synthwave84\\" \\\\| \\"tomorrow\\" \\\\| \\"twilight\\" \\\\| \\"vs\\" \\\\| \\"vsc-dark-plus\\" \\\\| \\"xonokai\\" \\\\| \\"z-touchs\\"","source":"@site/docs/api/internal/type-aliases/CodejarTheme.md","sourceDirName":"api/internal/type-aliases","slug":"/api/internal/type-aliases/CodejarTheme","permalink":"/docs/api/internal/type-aliases/CodejarTheme","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/type-aliases/CodejarTheme.md","tags":[],"version":"current","frontMatter":{}}'),r=c("5893"),n=c("65");let a={},i="Type Alias: CodejarTheme",t={},l=[{value:"Defined in",id:"defined-in",level:2}];function s(e){let o={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",strong:"strong",...(0,n.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(o.header,{children:(0,r.jsx)(o.h1,{id:"type-alias-codejartheme",children:"Type Alias: CodejarTheme"})}),"\n",(0,r.jsxs)(o.blockquote,{children:["\n",(0,r.jsxs)(o.p,{children:[(0,r.jsx)(o.strong,{children:"CodejarTheme"}),": ",(0,r.jsx)(o.code,{children:'"a11y-dark"'})," | ",(0,r.jsx)(o.code,{children:'"atom-dark"'})," | ",(0,r.jsx)(o.code,{children:'"base16-ateliersulphurpool-light"'})," | ",(0,r.jsx)(o.code,{children:'"catppuccin-latte"'})," | ",(0,r.jsx)(o.code,{children:'"catppuccin-frappe"'})," | ",(0,r.jsx)(o.code,{children:'"catppuccin-macchiato"'})," | ",(0,r.jsx)(o.code,{children:'"catppuccin-mocha"'})," | ",(0,r.jsx)(o.code,{children:'"cb"'})," | ",(0,r.jsx)(o.code,{children:'"coldark-cold"'})," | ",(0,r.jsx)(o.code,{children:'"coldark-dark"'})," | ",(0,r.jsx)(o.code,{children:'"coy"'})," | ",(0,r.jsx)(o.code,{children:'"coy-without-shadows"'})," | ",(0,r.jsx)(o.code,{children:'"darcula"'})," | ",(0,r.jsx)(o.code,{children:'"dark"'})," | ",(0,r.jsx)(o.code,{children:'"dracula"'})," | ",(0,r.jsx)(o.code,{children:'"duotone-dark"'})," | ",(0,r.jsx)(o.code,{children:'"duotone-earth"'})," | ",(0,r.jsx)(o.code,{children:'"duotone-forest"'})," | ",(0,r.jsx)(o.code,{children:'"duotone-light"'})," | ",(0,r.jsx)(o.code,{children:'"duotone-sea"'})," | ",(0,r.jsx)(o.code,{children:'"duotone-space"'})," | ",(0,r.jsx)(o.code,{children:'"funky"'})," | ",(0,r.jsx)(o.code,{children:'"ghcolors"'})," | ",(0,r.jsx)(o.code,{children:'"gruvbox-dark"'})," | ",(0,r.jsx)(o.code,{children:'"gruvbox-light"'})," | ",(0,r.jsx)(o.code,{children:'"holi-theme"'})," | ",(0,r.jsx)(o.code,{children:'"hopscotch"'})," | ",(0,r.jsx)(o.code,{children:'"laserwave"'})," | ",(0,r.jsx)(o.code,{children:'"lucario"'})," | ",(0,r.jsx)(o.code,{children:'"material-dark"'})," | ",(0,r.jsx)(o.code,{children:'"material-light"'})," | ",(0,r.jsx)(o.code,{children:'"material-oceanic"'})," | ",(0,r.jsx)(o.code,{children:'"monochrome"'})," | ",(0,r.jsx)(o.code,{children:'"monochrome-dark"'})," | ",(0,r.jsx)(o.code,{children:'"night-owl"'})," | ",(0,r.jsx)(o.code,{children:'"nord"'})," | ",(0,r.jsx)(o.code,{children:'"nord-2"'})," | ",(0,r.jsx)(o.code,{children:'"okaidia"'})," | ",(0,r.jsx)(o.code,{children:'"one-dark"'})," | ",(0,r.jsx)(o.code,{children:'"one-light"'})," | ",(0,r.jsx)(o.code,{children:'"pojoaque"'})," | ",(0,r.jsx)(o.code,{children:'"shades-of-purple"'})," | ",(0,r.jsx)(o.code,{children:'"solarized-dark-atom"'})," | ",(0,r.jsx)(o.code,{children:'"solarized-light"'})," | ",(0,r.jsx)(o.code,{children:'"synthwave84"'})," | ",(0,r.jsx)(o.code,{children:'"tomorrow"'})," | ",(0,r.jsx)(o.code,{children:'"twilight"'})," | ",(0,r.jsx)(o.code,{children:'"vs"'})," | ",(0,r.jsx)(o.code,{children:'"vsc-dark-plus"'})," | ",(0,r.jsx)(o.code,{children:'"xonokai"'})," | ",(0,r.jsx)(o.code,{children:'"z-touchs"'})]}),"\n"]}),"\n",(0,r.jsx)(o.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,r.jsx)(o.p,{children:(0,r.jsx)(o.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1687",children:"models.ts:1687"})})]})}function h(e={}){let{wrapper:o}={...(0,n.a)(),...e.components};return o?(0,r.jsx)(o,{...e,children:(0,r.jsx)(s,{...e})}):s(e)}},65:function(e,o,c){c.d(o,{Z:function(){return i},a:function(){return a}});var d=c(7294);let r={},n=d.createContext(r);function a(e){let o=d.useContext(n);return d.useMemo(function(){return"function"==typeof e?e(o):{...o,...e}},[o,e])}function i(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),d.createElement(n.Provider,{value:o},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/54771f43.b54bb755.js b/docs/assets/js/54771f43.b54bb755.js new file mode 100644 index 0000000..9897c16 --- /dev/null +++ b/docs/assets/js/54771f43.b54bb755.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6892"],{3813:function(e,n,s){s.r(n),s.d(n,{default:()=>j,frontMatter:()=>c,metadata:()=>l,assets:()=>h,toc:()=>o,contentTitle:()=>r});var l=JSON.parse('{"id":"api/internal/interfaces/ContentConfig","title":"Interface: ContentConfig","description":"The properties that define the content of the current project.","source":"@site/docs/api/internal/interfaces/ContentConfig.md","sourceDirName":"api/internal/interfaces","slug":"/api/internal/interfaces/ContentConfig","permalink":"/docs/api/internal/interfaces/ContentConfig","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/interfaces/ContentConfig.md","tags":[],"version":"current","frontMatter":{}}'),d=s("5893"),i=s("65");let c={},r="Interface: ContentConfig",h={},o=[{value:"Extended by",id:"extended-by",level:2},{value:"Properties",id:"properties",level:2},{value:"activeEditor",id:"activeeditor",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"cssPreset",id:"csspreset",level:3},{value:"Defined in",id:"defined-in-1",level:4},{value:"customSettings",id:"customsettings",level:3},{value:"adoc",id:"adoc",level:4},{value:"app.svelte",id:"appsvelte",level:4},{value:"app.vue",id:"appvue",level:4},{value:"art",id:"art",level:4},{value:"art-template",id:"art-template",level:4},{value:"as",id:"as",level:4},{value:"asc",id:"asc",level:4},{value:"asciidoc",id:"asciidoc",level:4},{value:"assemblyscript",id:"assemblyscript",level:4},{value:"astro",id:"astro",level:4},{value:"autoprefixer",id:"autoprefixer",level:4},{value:"babel",id:"babel",level:4},{value:"bb",id:"bb",level:4},{value:"bbcode",id:"bbcode",level:4},{value:"Binary",id:"binary",level:4},{value:"blockly",id:"blockly",level:4},{value:"blockly.xml",id:"blocklyxml",level:4},{value:"c",id:"c",level:4},{value:"C",id:"c-1",level:4},{value:"c++",id:"c-2",level:4},{value:"civet",id:"civet",level:4},{value:"clang",id:"clang",level:4},{value:"clang.cpp",id:"clangcpp",level:4},{value:"clio",id:"clio",level:4},{value:"clj",id:"clj",level:4},{value:"cljc",id:"cljc",level:4},{value:"cljs",id:"cljs",level:4},{value:"clojure",id:"clojure",level:4},{value:"clojurescript",id:"clojurescript",level:4},{value:"coffee",id:"coffee",level:4},{value:"coffeescript",id:"coffeescript",level:4},{value:"common-lisp",id:"common-lisp",level:4},{value:"commonlisp",id:"commonlisp",level:4},{value:"convertCommonjs?",id:"convertcommonjs",level:4},{value:"cp",id:"cp",level:4},{value:"cpp",id:"cpp",level:4},{value:"cpp-wasm",id:"cpp-wasm",level:4},{value:"cppm",id:"cppm",level:4},{value:"cppwasm",id:"cppwasm",level:4},{value:"cs",id:"cs",level:4},{value:"cs-wasm",id:"cs-wasm",level:4},{value:"csharp",id:"csharp",level:4},{value:"csharp-wasm",id:"csharp-wasm",level:4},{value:"css",id:"css",level:4},{value:"cssmodules",id:"cssmodules",level:4},{value:"cssnano",id:"cssnano",level:4},{value:"cwasm",id:"cwasm",level:4},{value:"cxx",id:"cxx",level:4},{value:"defaultCDN?",id:"defaultcdn",level:4},{value:"diagram",id:"diagram",level:4},{value:"diagrams",id:"diagrams",level:4},{value:"dot",id:"dot",level:4},{value:"edn",id:"edn",level:4},{value:"ejs",id:"ejs",level:4},{value:"es",id:"es",level:4},{value:"eta",id:"eta",level:4},{value:"fennel",id:"fennel",level:4},{value:"flow",id:"flow",level:4},{value:"fnl",id:"fnl",level:4},{value:"gleam",id:"gleam",level:4},{value:"go",id:"go",level:4},{value:"golang",id:"golang",level:4},{value:"graph",id:"graph",level:4},{value:"h",id:"h",level:4},{value:"haml",id:"haml",level:4},{value:"handlebars",id:"handlebars",level:4},{value:"hbs",id:"hbs",level:4},{value:"hpp",id:"hpp",level:4},{value:"htm",id:"htm",level:4},{value:"html",id:"html",level:4},{value:"ii",id:"ii",level:4},{value:"imba",id:"imba",level:4},{value:"imports?",id:"imports",level:4},{value:"ixx",id:"ixx",level:4},{value:"jade",id:"jade",level:4},{value:"java",id:"java",level:4},{value:"javascript",id:"javascript",level:4},{value:"jinja",id:"jinja",level:4},{value:"jl",id:"jl",level:4},{value:"js",id:"js",level:4},{value:"json",id:"json",level:4},{value:"jsx",id:"jsx",level:4},{value:"julia",id:"julia",level:4},{value:"less",id:"less",level:4},{value:"lightningcss",id:"lightningcss",level:4},{value:"liquid",id:"liquid",level:4},{value:"liquidjs",id:"liquidjs",level:4},{value:"lisp",id:"lisp",level:4},{value:"livescript",id:"livescript",level:4},{value:"ls",id:"ls",level:4},{value:"lua",id:"lua",level:4},{value:"lua-wasm",id:"lua-wasm",level:4},{value:"luawasm",id:"luawasm",level:4},{value:"malina",id:"malina",level:4},{value:"malinajs",id:"malinajs",level:4},{value:"mapImports?",id:"mapimports",level:4},{value:"markdown",id:"markdown",level:4},{value:"md",id:"md",level:4},{value:"mdown",id:"mdown",level:4},{value:"mdx",id:"mdx",level:4},{value:"mjml",id:"mjml",level:4},{value:"mkdn",id:"mkdn",level:4},{value:"ml",id:"ml",level:4},{value:"mli",id:"mli",level:4},{value:"mustache",id:"mustache",level:4},{value:"njk",id:"njk",level:4},{value:"nunjucks",id:"nunjucks",level:4},{value:"ocaml",id:"ocaml",level:4},{value:"perl",id:"perl",level:4},{value:"pg",id:"pg",level:4},{value:"pg.sql",id:"pgsql",level:4},{value:"pglite",id:"pglite",level:4},{value:"pglite.sql",id:"pglitesql",level:4},{value:"pgsql",id:"pgsql-1",level:4},{value:"pgsql.sql",id:"pgsqlsql",level:4},{value:"php",id:"php",level:4},{value:"php-wasm",id:"php-wasm",level:4},{value:"phpwasm",id:"phpwasm",level:4},{value:"pintora",id:"pintora",level:4},{value:"pl",id:"pl",level:4},{value:"plt",id:"plt",level:4},{value:"pm",id:"pm",level:4},{value:"postcss",id:"postcss",level:4},{value:"postcssImportUrl",id:"postcssimporturl",level:4},{value:"postcssPresetEnv",id:"postcsspresetenv",level:4},{value:"postgre.sql",id:"postgresql",level:4},{value:"postgres",id:"postgres",level:4},{value:"postgresql",id:"postgresql-1",level:4},{value:"postgresql.sql",id:"postgresqlsql",level:4},{value:"prolog",id:"prolog",level:4},{value:"prolog.pl",id:"prologpl",level:4},{value:"pug",id:"pug",level:4},{value:"purgecss",id:"purgecss",level:4},{value:"py",id:"py",level:4},{value:"py-wasm",id:"py-wasm",level:4},{value:"py3",id:"py3",level:4},{value:"pyodide",id:"pyodide",level:4},{value:"python",id:"python",level:4},{value:"python-wasm",id:"python-wasm",level:4},{value:"pythonwasm",id:"pythonwasm",level:4},{value:"pywasm",id:"pywasm",level:4},{value:"r",id:"r",level:4},{value:"r-wasm",id:"r-wasm",level:4},{value:"rb",id:"rb",level:4},{value:"re",id:"re",level:4},{value:"react",id:"react",level:4},{value:"react-jsx",id:"react-jsx",level:4},{value:"react-native",id:"react-native",level:4},{value:"react-native-tsx",id:"react-native-tsx",level:4},{value:"react-native.jsx",id:"react-nativejsx",level:4},{value:"react-native.tsx",id:"react-nativetsx",level:4},{value:"react-tsx",id:"react-tsx",level:4},{value:"react.jsx",id:"reactjsx",level:4},{value:"react.tsx",id:"reacttsx",level:4},{value:"reason",id:"reason",level:4},{value:"rei",id:"rei",level:4},{value:"res",id:"res",level:4},{value:"rescript",id:"rescript",level:4},{value:"resi",id:"resi",level:4},{value:"rich",id:"rich",level:4},{value:"richtext",id:"richtext",level:4},{value:"riot",id:"riot",level:4},{value:"riotjs",id:"riotjs",level:4},{value:"rlang",id:"rlang",level:4},{value:"rstats",id:"rstats",level:4},{value:"rte",id:"rte",level:4},{value:"rte.html",id:"rtehtml",level:4},{value:"ruby",id:"ruby",level:4},{value:"ruby-wasm",id:"ruby-wasm",level:4},{value:"rubywasm",id:"rubywasm",level:4},{value:"sass",id:"sass",level:4},{value:"scheme",id:"scheme",level:4},{value:"scm",id:"scm",level:4},{value:"scriptType?",id:"scripttype",level:4},{value:"scss",id:"scss",level:4},{value:"solid",id:"solid",level:4},{value:"solid.jsx",id:"solidjsx",level:4},{value:"solid.tsx",id:"solidtsx",level:4},{value:"sql",id:"sql",level:4},{value:"sqlite",id:"sqlite",level:4},{value:"sqlite3",id:"sqlite3",level:4},{value:"stencil",id:"stencil",level:4},{value:"stencil.tsx",id:"stenciltsx",level:4},{value:"styl",id:"styl",level:4},{value:"stylis",id:"stylis",level:4},{value:"stylus",id:"stylus",level:4},{value:"sucrase",id:"sucrase",level:4},{value:"svelte",id:"svelte",level:4},{value:"svelte-app",id:"svelte-app",level:4},{value:"tailwindcss",id:"tailwindcss",level:4},{value:"tcl",id:"tcl",level:4},{value:"teal",id:"teal",level:4},{value:"template?",id:"template",level:4},{value:"template.data?",id:"templatedata",level:4},{value:"template.prerender?",id:"templateprerender",level:4},{value:"tl",id:"tl",level:4},{value:"tokencss",id:"tokencss",level:4},{value:"ts",id:"ts",level:4},{value:"tsx",id:"tsx",level:4},{value:"twig",id:"twig",level:4},{value:"types?",id:"types",level:4},{value:"typescript",id:"typescript",level:4},{value:"unocss",id:"unocss",level:4},{value:"vento",id:"vento",level:4},{value:"vto",id:"vto",level:4},{value:"vue",id:"vue",level:4},{value:"vue-app",id:"vue-app",level:4},{value:"vue2",id:"vue2",level:4},{value:"vue3",id:"vue3",level:4},{value:"wasm",id:"wasm",level:4},{value:"wasm.cpp",id:"wasmcpp",level:4},{value:"wasm.cs",id:"wasmcs",level:4},{value:"wasm.lua",id:"wasmlua",level:4},{value:"wasm.php",id:"wasmphp",level:4},{value:"wasm.py",id:"wasmpy",level:4},{value:"wasm.rb",id:"wasmrb",level:4},{value:"wast",id:"wast",level:4},{value:"wat",id:"wat",level:4},{value:"webassembly",id:"webassembly",level:4},{value:"windicss",id:"windicss",level:4},{value:"xht",id:"xht",level:4},{value:"xml",id:"xml",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"description",id:"description",level:3},{value:"Default",id:"default",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"head",id:"head",level:3},{value:"Default",id:"default-1",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"htmlAttrs",id:"htmlattrs",level:3},{value:"Example",id:"example",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"imports",id:"imports-1",level:3},{value:"Index Signature",id:"index-signature",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"languages",id:"languages",level:3},{value:"Defined in",id:"defined-in-7",level:4},{value:"markup",id:"markup",level:3},{value:"content?",id:"content",level:4},{value:"Default",id:"default-2",level:5},{value:"contentUrl?",id:"contenturl",level:4},{value:"foldedLines?",id:"foldedlines",level:4},{value:"Example",id:"example-1",level:5},{value:"hiddenContent?",id:"hiddencontent",level:4},{value:"hiddenContentUrl?",id:"hiddencontenturl",level:4},{value:"hideTitle?",id:"hidetitle",level:4},{value:"language",id:"language",level:4},{value:"order?",id:"order",level:4},{value:"Default",id:"default-3",level:5},{value:"position?",id:"position",level:4},{value:"Example",id:"example-2",level:5},{value:"selector?",id:"selector",level:4},{value:"title?",id:"title",level:4},{value:"Default",id:"default-4",level:4},{value:"Defined in",id:"defined-in-8",level:4},{value:"processors",id:"processors",level:3},{value:"Defined in",id:"defined-in-9",level:4},{value:"script",id:"script",level:3},{value:"content?",id:"content-1",level:4},{value:"Default",id:"default-5",level:5},{value:"contentUrl?",id:"contenturl-1",level:4},{value:"foldedLines?",id:"foldedlines-1",level:4},{value:"Example",id:"example-3",level:5},{value:"hiddenContent?",id:"hiddencontent-1",level:4},{value:"hiddenContentUrl?",id:"hiddencontenturl-1",level:4},{value:"hideTitle?",id:"hidetitle-1",level:4},{value:"language",id:"language-1",level:4},{value:"order?",id:"order-1",level:4},{value:"Default",id:"default-6",level:5},{value:"position?",id:"position-1",level:4},{value:"Example",id:"example-4",level:5},{value:"selector?",id:"selector-1",level:4},{value:"title?",id:"title-1",level:4},{value:"Default",id:"default-7",level:4},{value:"Defined in",id:"defined-in-10",level:4},{value:"scripts",id:"scripts",level:3},{value:"Defined in",id:"defined-in-11",level:4},{value:"style",id:"style",level:3},{value:"content?",id:"content-2",level:4},{value:"Default",id:"default-8",level:5},{value:"contentUrl?",id:"contenturl-2",level:4},{value:"foldedLines?",id:"foldedlines-2",level:4},{value:"Example",id:"example-5",level:5},{value:"hiddenContent?",id:"hiddencontent-2",level:4},{value:"hiddenContentUrl?",id:"hiddencontenturl-2",level:4},{value:"hideTitle?",id:"hidetitle-2",level:4},{value:"language",id:"language-2",level:4},{value:"order?",id:"order-2",level:4},{value:"Default",id:"default-9",level:5},{value:"position?",id:"position-2",level:4},{value:"Example",id:"example-6",level:5},{value:"selector?",id:"selector-2",level:4},{value:"title?",id:"title-2",level:4},{value:"Default",id:"default-10",level:4},{value:"Defined in",id:"defined-in-12",level:4},{value:"stylesheets",id:"stylesheets",level:3},{value:"Defined in",id:"defined-in-13",level:4},{value:"tags",id:"tags",level:3},{value:"Default",id:"default-11",level:4},{value:"Defined in",id:"defined-in-14",level:4},{value:"tests",id:"tests",level:3},{value:"Defined in",id:"defined-in-15",level:4},{value:"title",id:"title-3",level:3},{value:"Default",id:"default-12",level:4},{value:"Defined in",id:"defined-in-16",level:4},{value:"types",id:"types-1",level:3},{value:"Examples",id:"examples",level:4},{value:"Defined in",id:"defined-in-17",level:4},{value:"version",id:"version",level:3},{value:"Defined in",id:"defined-in-18",level:4}];function t(e){let n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(n.header,{children:(0,d.jsx)(n.h1,{id:"interface-contentconfig",children:"Interface: ContentConfig"})}),"\n",(0,d.jsxs)(n.p,{children:["The properties that define the content of the current ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/features/projects",children:"project"}),"."]}),"\n",(0,d.jsx)(n.h2,{id:"extended-by",children:"Extended by"}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:(0,d.jsx)(n.code,{children:"Config"})})}),"\n"]}),"\n",(0,d.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,d.jsx)(n.h3,{id:"activeeditor",children:"activeEditor"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"activeEditor"}),": ",(0,d.jsx)(n.code,{children:"undefined"})," | ",(0,d.jsx)(n.a,{href:"/docs/api/internal/type-aliases/EditorId",children:(0,d.jsx)(n.code,{children:"EditorId"})})]}),"\n"]}),"\n",(0,d.jsx)(n.p,{children:"Selects the active editor to show."}),"\n",(0,d.jsxs)(n.p,{children:["Defaults to the last used editor for user, otherwise ",(0,d.jsx)(n.code,{children:'"markup"'})]}),"\n",(0,d.jsx)(n.h4,{id:"defined-in",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L455",children:"models.ts:455"})}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"csspreset",children:"cssPreset"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"cssPreset"}),": ",(0,d.jsx)(n.a,{href:"/docs/api/internal/type-aliases/CssPresetId",children:(0,d.jsx)(n.code,{children:"CssPresetId"})})]}),"\n"]}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/features/external-resources#css-presets",children:"CSS Preset"})," to use."]}),"\n",(0,d.jsx)(n.h4,{id:"defined-in-1",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L502",children:"models.ts:502"})}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"customsettings",children:"customSettings"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"customSettings"}),": ",(0,d.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,d.jsxs)(n.p,{children:["Defines ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/advanced/custom-settings",children:"custom settings"})," for the current project."]}),"\n",(0,d.jsx)(n.h4,{id:"adoc",children:"adoc"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"adoc"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"appsvelte",children:"app.svelte"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"svelte"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"appvue",children:"app.vue"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"vue"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"art",children:"art"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"art"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"art-template",children:"art-template"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"art-template"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"as",children:"as"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"as"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"asc",children:"asc"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"asc"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"asciidoc",children:"asciidoc"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"asciidoc"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"assemblyscript",children:"assemblyscript"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"assemblyscript"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"astro",children:"astro"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"astro"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"autoprefixer",children:"autoprefixer"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"autoprefixer"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"babel",children:"babel"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"babel"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"bb",children:"bb"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"bb"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"bbcode",children:"bbcode"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"bbcode"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"binary",children:"Binary"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"Binary"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"blockly",children:"blockly"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"blockly"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"blocklyxml",children:"blockly.xml"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"xml"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"c",children:"c"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"c"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"c-1",children:"C"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"C"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"c-2",children:"c++"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"c++"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"civet",children:"civet"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"civet"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"clang",children:"clang"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"clang"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"clangcpp",children:"clang.cpp"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"cpp"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"clio",children:"clio"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"clio"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"clj",children:"clj"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"clj"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"cljc",children:"cljc"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"cljc"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"cljs",children:"cljs"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"cljs"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"clojure",children:"clojure"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"clojure"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"clojurescript",children:"clojurescript"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"clojurescript"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"coffee",children:"coffee"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"coffee"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"coffeescript",children:"coffeescript"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"coffeescript"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"common-lisp",children:"common-lisp"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"common-lisp"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"commonlisp",children:"commonlisp"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"commonlisp"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"convertcommonjs",children:"convertCommonjs?"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"optional"})," ",(0,d.jsx)(n.strong,{children:"convertCommonjs"}),": ",(0,d.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"cp",children:"cp"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"cp"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"cpp",children:"cpp"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"cpp"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"cpp-wasm",children:"cpp-wasm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"cpp-wasm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"cppm",children:"cppm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"cppm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"cppwasm",children:"cppwasm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"cppwasm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"cs",children:"cs"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"cs"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"cs-wasm",children:"cs-wasm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"cs-wasm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"csharp",children:"csharp"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"csharp"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"csharp-wasm",children:"csharp-wasm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"csharp-wasm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"css",children:"css"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"css"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"cssmodules",children:"cssmodules"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"cssmodules"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"cssnano",children:"cssnano"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"cssnano"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"cwasm",children:"cwasm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"cwasm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"cxx",children:"cxx"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"cxx"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"defaultcdn",children:"defaultCDN?"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"optional"})," ",(0,d.jsx)(n.strong,{children:"defaultCDN"}),": ",(0,d.jsx)(n.a,{href:"/docs/api/internal/type-aliases/CDN",children:(0,d.jsx)(n.code,{children:"CDN"})})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"diagram",children:"diagram"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"diagram"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"diagrams",children:"diagrams"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"diagrams"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"dot",children:"dot"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"dot"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"edn",children:"edn"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"edn"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"ejs",children:"ejs"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"ejs"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"es",children:"es"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"es"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"eta",children:"eta"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"eta"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"fennel",children:"fennel"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"fennel"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"flow",children:"flow"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"flow"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"fnl",children:"fnl"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"fnl"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"gleam",children:"gleam"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"gleam"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"go",children:"go"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"go"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"golang",children:"golang"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"golang"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"graph",children:"graph"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"graph"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"h",children:"h"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"h"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"haml",children:"haml"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"haml"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"handlebars",children:"handlebars"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"handlebars"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"hbs",children:"hbs"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"hbs"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"hpp",children:"hpp"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"hpp"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"htm",children:"htm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"htm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"html",children:"html"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"html"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"ii",children:"ii"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"ii"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"imba",children:"imba"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"imba"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"imports",children:"imports?"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"optional"})," ",(0,d.jsx)(n.strong,{children:"imports"}),": ",(0,d.jsx)(n.code,{children:"Record"}),"<",(0,d.jsx)(n.code,{children:"string"}),", ",(0,d.jsx)(n.code,{children:"string"}),">"]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"ixx",children:"ixx"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"ixx"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"jade",children:"jade"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"jade"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"java",children:"java"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"java"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"javascript",children:"javascript"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"javascript"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"jinja",children:"jinja"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"jinja"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"jl",children:"jl"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"jl"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"js",children:"js"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"js"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"json",children:"json"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"json"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"jsx",children:"jsx"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"jsx"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"julia",children:"julia"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"julia"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"less",children:"less"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"less"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"lightningcss",children:"lightningcss"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"lightningcss"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"liquid",children:"liquid"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"liquid"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"liquidjs",children:"liquidjs"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"liquidjs"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"lisp",children:"lisp"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"lisp"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"livescript",children:"livescript"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"livescript"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"ls",children:"ls"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"ls"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"lua",children:"lua"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"lua"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"lua-wasm",children:"lua-wasm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"lua-wasm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"luawasm",children:"luawasm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"luawasm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"malina",children:"malina"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"malina"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"malinajs",children:"malinajs"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"malinajs"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"mapimports",children:"mapImports?"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"optional"})," ",(0,d.jsx)(n.strong,{children:"mapImports"}),": ",(0,d.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"markdown",children:"markdown"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"markdown"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"md",children:"md"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"md"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"mdown",children:"mdown"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"mdown"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"mdx",children:"mdx"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"mdx"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"mjml",children:"mjml"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"mjml"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"mkdn",children:"mkdn"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"mkdn"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"ml",children:"ml"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"ml"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"mli",children:"mli"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"mli"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"mustache",children:"mustache"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"mustache"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"njk",children:"njk"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"njk"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"nunjucks",children:"nunjucks"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"nunjucks"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"ocaml",children:"ocaml"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"ocaml"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"perl",children:"perl"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"perl"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"pg",children:"pg"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"pg"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"pgsql",children:"pg.sql"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"sql"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"pglite",children:"pglite"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"pglite"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"pglitesql",children:"pglite.sql"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"sql"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"pgsql-1",children:"pgsql"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"pgsql"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"pgsqlsql",children:"pgsql.sql"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"sql"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"php",children:"php"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"php"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"php-wasm",children:"php-wasm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"php-wasm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"phpwasm",children:"phpwasm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"phpwasm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"pintora",children:"pintora"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"pintora"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"pl",children:"pl"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"pl"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"plt",children:"plt"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"plt"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"pm",children:"pm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"pm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"postcss",children:"postcss"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"postcss"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"postcssimporturl",children:"postcssImportUrl"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"postcssImportUrl"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"postcsspresetenv",children:"postcssPresetEnv"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"postcssPresetEnv"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"postgresql",children:"postgre.sql"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"sql"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"postgres",children:"postgres"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"postgres"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"postgresql-1",children:"postgresql"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"postgresql"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"postgresqlsql",children:"postgresql.sql"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"sql"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"prolog",children:"prolog"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"prolog"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"prologpl",children:"prolog.pl"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"pl"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"pug",children:"pug"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"pug"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"purgecss",children:"purgecss"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"purgecss"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"py",children:"py"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"py"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"py-wasm",children:"py-wasm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"py-wasm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"py3",children:"py3"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"py3"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"pyodide",children:"pyodide"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"pyodide"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"python",children:"python"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"python"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"python-wasm",children:"python-wasm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"python-wasm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"pythonwasm",children:"pythonwasm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"pythonwasm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"pywasm",children:"pywasm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"pywasm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"r",children:"r"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"r"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"r-wasm",children:"r-wasm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"r-wasm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"rb",children:"rb"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"rb"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"re",children:"re"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"re"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"react",children:"react"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"react"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"react-jsx",children:"react-jsx"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"react-jsx"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"react-native",children:"react-native"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"react-native"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"react-native-tsx",children:"react-native-tsx"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"react-native-tsx"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"react-nativejsx",children:"react-native.jsx"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"jsx"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"react-nativetsx",children:"react-native.tsx"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"tsx"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"react-tsx",children:"react-tsx"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"react-tsx"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"reactjsx",children:"react.jsx"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"jsx"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"reacttsx",children:"react.tsx"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"tsx"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"reason",children:"reason"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"reason"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"rei",children:"rei"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"rei"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"res",children:"res"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"res"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"rescript",children:"rescript"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"rescript"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"resi",children:"resi"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"resi"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"rich",children:"rich"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"rich"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"richtext",children:"richtext"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"richtext"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"riot",children:"riot"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"riot"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"riotjs",children:"riotjs"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"riotjs"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"rlang",children:"rlang"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"rlang"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"rstats",children:"rstats"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"rstats"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"rte",children:"rte"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"rte"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"rtehtml",children:"rte.html"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"html"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"ruby",children:"ruby"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"ruby"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"ruby-wasm",children:"ruby-wasm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"ruby-wasm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"rubywasm",children:"rubywasm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"rubywasm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"sass",children:"sass"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"sass"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"scheme",children:"scheme"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"scheme"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"scm",children:"scm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"scm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"scripttype",children:"scriptType?"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"optional"})," ",(0,d.jsx)(n.strong,{children:"scriptType"}),": ",(0,d.jsx)(n.code,{children:'""'})," | ",(0,d.jsx)(n.code,{children:'"module"'})," | ",(0,d.jsx)(n.code,{children:'"text/liquid"'})," | ",(0,d.jsx)(n.code,{children:'"text/python"'})," | ",(0,d.jsx)(n.code,{children:'"text/r"'})," | ",(0,d.jsx)(n.code,{children:'"text/ruby-wasm"'})," | ",(0,d.jsx)(n.code,{children:'"text/x-uniter-php"'})," | ",(0,d.jsx)(n.code,{children:'"text/php-wasm"'})," | ",(0,d.jsx)(n.code,{children:'"text/cpp"'})," | ",(0,d.jsx)(n.code,{children:'"text/java"'})," | ",(0,d.jsx)(n.code,{children:'"text/csharp-wasm"'})," | ",(0,d.jsx)(n.code,{children:'"text/perl"'})," | ",(0,d.jsx)(n.code,{children:'"text/julia"'})," | ",(0,d.jsx)(n.code,{children:'"text/biwascheme"'})," | ",(0,d.jsx)(n.code,{children:'"text/commonlisp"'})," | ",(0,d.jsx)(n.code,{children:'"text/tcl"'})," | ",(0,d.jsx)(n.code,{children:'"text/prolog"'})," | ",(0,d.jsx)(n.code,{children:'"application/json"'})," | ",(0,d.jsx)(n.code,{children:'"application/lua"'})," | ",(0,d.jsx)(n.code,{children:'"text/fennel"'})," | ",(0,d.jsx)(n.code,{children:'"application/wasm-uint8"'})," | ",(0,d.jsx)(n.code,{children:'"application/javascript"'})," | ",(0,d.jsx)(n.code,{children:'"application/ecmascript"'})," | ",(0,d.jsx)(n.code,{children:'"text/javascript"'})," | ",(0,d.jsx)(n.code,{children:'"text/ecmascript"'})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"scss",children:"scss"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"scss"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"solid",children:"solid"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"solid"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"solidjsx",children:"solid.jsx"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"jsx"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"solidtsx",children:"solid.tsx"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"tsx"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"sql",children:"sql"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"sql"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"sqlite",children:"sqlite"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"sqlite"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"sqlite3",children:"sqlite3"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"sqlite3"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"stencil",children:"stencil"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"stencil"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"stenciltsx",children:"stencil.tsx"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"tsx"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"styl",children:"styl"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"styl"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"stylis",children:"stylis"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"stylis"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"stylus",children:"stylus"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"stylus"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"sucrase",children:"sucrase"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"sucrase"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"svelte",children:"svelte"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"svelte"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"svelte-app",children:"svelte-app"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"svelte-app"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"tailwindcss",children:"tailwindcss"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"tailwindcss"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"tcl",children:"tcl"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"tcl"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"teal",children:"teal"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"teal"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"template",children:"template?"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"optional"})," ",(0,d.jsx)(n.strong,{children:"template"}),": ",(0,d.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"templatedata",children:"template.data?"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"optional"})," ",(0,d.jsx)(n.strong,{children:"data"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"templateprerender",children:"template.prerender?"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"optional"})," ",(0,d.jsx)(n.strong,{children:"prerender"}),": ",(0,d.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"tl",children:"tl"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"tl"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"tokencss",children:"tokencss"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"tokencss"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"ts",children:"ts"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"ts"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"tsx",children:"tsx"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"tsx"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"twig",children:"twig"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"twig"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"types",children:"types?"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"optional"})," ",(0,d.jsx)(n.strong,{children:"types"}),": ",(0,d.jsx)(n.a,{href:"/docs/api/internal/interfaces/Types",children:(0,d.jsx)(n.code,{children:"Types"})})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"typescript",children:"typescript"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"typescript"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"unocss",children:"unocss"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"unocss"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"vento",children:"vento"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"vento"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"vto",children:"vto"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"vto"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"vue",children:"vue"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"vue"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"vue-app",children:"vue-app"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"vue-app"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"vue2",children:"vue2"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"vue2"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"vue3",children:"vue3"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"vue3"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"wasm",children:"wasm"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"wasm"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"wasmcpp",children:"wasm.cpp"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"cpp"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"wasmcs",children:"wasm.cs"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"cs"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"wasmlua",children:"wasm.lua"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"lua"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"wasmphp",children:"wasm.php"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"php"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"wasmpy",children:"wasm.py"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"py"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"wasmrb",children:"wasm.rb"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"rb"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"wast",children:"wast"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"wast"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"wat",children:"wat"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"wat"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"webassembly",children:"webassembly"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"webassembly"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"windicss",children:"windicss"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"windicss"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"xht",children:"xht"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"xht"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"xml",children:"xml"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"xml"}),": ",(0,d.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,d.jsx)(n.h4,{id:"defined-in-2",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L514",children:"models.ts:514"})}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"description",children:"description"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"description"}),": ",(0,d.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,d.jsxs)(n.p,{children:["Project description. Used in ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/features/projects",children:"project"})," search\nand ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/features/result",children:"result page"})," description meta tag."]}),"\n",(0,d.jsx)(n.h4,{id:"default",children:"Default"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-ts",children:'""\n'})}),"\n",(0,d.jsx)(n.h4,{id:"defined-in-3",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L425",children:"models.ts:425"})}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"head",children:"head"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"head"}),": ",(0,d.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,d.jsxs)(n.p,{children:["Content added to the ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/features/result",children:"result page"})," ",(0,d.jsx)(n.code,{children:""})," element."]}),"\n",(0,d.jsx)(n.h4,{id:"default-1",children:"Default"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-ts",children:'\'\\n\'\n'})}),"\n",(0,d.jsx)(n.h4,{id:"defined-in-4",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L431",children:"models.ts:431"})}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"htmlattrs",children:"htmlAttrs"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"htmlAttrs"}),": ",(0,d.jsx)(n.code,{children:"string"})," | ",(0,d.jsx)(n.code,{children:"Record"}),"<",(0,d.jsx)(n.code,{children:"string"}),", ",(0,d.jsx)(n.code,{children:"string"}),">"]}),"\n"]}),"\n",(0,d.jsxs)(n.p,{children:["Attributes added to the ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/features/result",children:"result page"})," ",(0,d.jsx)(n.code,{children:""})," element.\nIt can be an object or a string."]}),"\n",(0,d.jsx)(n.h4,{id:"example",children:"Example"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-ts",children:'{ lang: "en", class: "dark" }\n\'lang="en" class="dark"\'\n'})}),"\n",(0,d.jsx)(n.h4,{id:"defined-in-5",children:"Defined in"}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L440",children:"models.ts:440"})}),"\n",(0,d.jsx)(n.hr,{}),"\n",(0,d.jsx)(n.h3,{id:"imports-1",children:"imports"}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.strong,{children:"imports"}),": ",(0,d.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,d.jsxs)(n.p,{children:["Allows specifying custom ",(0,d.jsx)(n.a,{href:"https://github.com/WICG/import-maps",children:"import maps"})," for ",(0,d.jsx)(n.a,{href:"https://livecodes.io/docs/features/module-resolution#custom-module-resolution",children:"module imports"}),"."]}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.strong,{children:"Example"})}),"\n",(0,d.jsxs)(n.p,{children:["Setting ",(0,d.jsx)(n.code,{children:"imports"})," like this:"]}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-js",children:'"imports": {\n "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"\n}\n'})}),"\n",(0,d.jsx)(n.p,{children:"results in the following import map:"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-html",children:' + + +`,y=` + + +
+ +`.trimStart();return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,o.jsx)(f,{js:p,ts:m,react:h,vue:g,svelte:y})]})}},8294:function(e,t,s){s.d(t,{T:function(){return n},r:function(){return r}});var o=s(7728);async function n(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:o,loading:n="lazy",view:i}=t,a=o||"headless"===i,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)k(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":n);let p=globalThis.process;d.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let m=t.params;"object"==typeof m&&Object.keys(m).length>0&&JSON.stringify(m).length<1800&&Object.keys(m).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(m[e])))});let h=!1,f="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let o="livecodes",r=l.querySelector(`iframe.${o}`),i=r||document.createElement("iframe");i.classList.add(o),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===n?"eager":"lazy"),a?k(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),i.onload=()=>{e(i)},i.src=d.href,r||l.appendChild(i)}),y=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>h?Promise.reject(f):new Promise(async e=>{y.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},u),await y,e()}),b=(e,t)=>new Promise(async(s,o)=>{if(h)return o(f);await v();let n=E();addEventListener("message",function t(r){if(r.source===g.contentWindow&&r.origin===u&&r.data?.type==="livecodes-api-response"&&r.data?.id===n&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?o(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:n,args:t},u)}),w={},x=["load","ready","code","console","tests","destroy"],j=(e,t)=>{if(h)throw Error(f);return x.includes(e)?(b("watch",[e]),w[e]||(w[e]=[]),w[e]?.push(t),{remove:()=>{w[e]=w[e]?.filter(e=>e!==t),w[e]?.length===0&&b("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==u||!t||!w[t])return;let s=e.data?.payload;w[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(w).forEach(e=>{e.length=0}),g?.remove?.(),h=!0};function k(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>b("run"),format:e=>b("format",[e]),getShareUrl:e=>b("getShareUrl",[e]),getConfig:e=>b("getConfig",[e]),setConfig:e=>b("setConfig",[e]),getCode:()=>b("getCode"),show:(e,t)=>b("show",[e,t]),runTests:()=>b("runTests"),onChange:e=>j("code",e),watch:j,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),o=1;oy.settled?b("destroy").then(C):h?Promise.reject(f):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:n={},config:r={},headless:i,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,o]=t;void 0!==o&&e.searchParams.set(s,String(o))});let p="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),u.set("config","code/"+(0,o.compressToEncodedURIComponent)(JSON.stringify(r))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{u.set("params",(0,o.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(n[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),p&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return i}});var o=s(7294);let n={},r=o.createContext(n);function i(e){let t=o.useContext(r);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/59cfba1b.3bdc869b.js b/docs/assets/js/59cfba1b.3bdc869b.js new file mode 100644 index 0000000..827d66e --- /dev/null +++ b/docs/assets/js/59cfba1b.3bdc869b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4004"],{726:function(e,n,s){s.r(n),s.d(n,{default:()=>h,frontMatter:()=>l,metadata:()=>r,assets:()=>c,toc:()=>a,contentTitle:()=>o});var r=JSON.parse('{"id":"contribution/release","title":"Release","description":"To start a new release:","source":"@site/docs/contribution/release.mdx","sourceDirName":"contribution","slug":"/contribution/release","permalink":"/docs/contribution/release","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/contribution/release.mdx","tags":[],"version":"current","frontMatter":{}}'),i=s("5893"),t=s("65");let l={},o="Release",c={},a=[];function d(e){let n={admonition:"admonition",br:"br",code:"code",h1:"h1",header:"header",li:"li",p:"p",ul:"ul",...(0,t.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"release",children:"Release"})}),"\n",(0,i.jsx)(n.p,{children:"To start a new release:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Checkout the branch ",(0,i.jsx)(n.code,{children:"develop"}),"."]}),"\n",(0,i.jsx)(n.li,{children:"Make sure there are no uncommitted changes."}),"\n",(0,i.jsxs)(n.li,{children:["Run ",(0,i.jsx)(n.code,{children:"npm run start-release"})," and answer the prompts. This will:","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Increment the version number:",(0,i.jsx)(n.br,{}),"\n",'App -> "./package.json" (',(0,i.jsx)(n.code,{children:"appVersion"}),")",(0,i.jsx)(n.br,{}),"\n",'SDK -> "./src/sdk/package.sdk.json" (',(0,i.jsx)(n.code,{children:"version"}),")"]}),"\n",(0,i.jsx)(n.li,{children:"Generate changelog."}),"\n",(0,i.jsxs)(n.li,{children:["Create a release branch (",(0,i.jsx)(n.code,{children:"releases/v{version}"})," | ",(0,i.jsx)(n.code,{children:"releases/sdk-v{version}"}),") and commit changes."]}),"\n",(0,i.jsx)(n.li,{children:"Push the branch to GitHub (which triggers a preview deploy)."}),"\n",(0,i.jsxs)(n.li,{children:["Create a pull request to ",(0,i.jsx)(n.code,{children:"develop"}),"."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["Once the pull request is merged a GitHub action workflow runs, which will:","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Build the app."}),"\n",(0,i.jsxs)(n.li,{children:["Create and push a release tag:",(0,i.jsx)(n.br,{}),"\n","App -> v{version}",(0,i.jsx)(n.br,{}),"\n","SDK -> sdk-v{version}"]}),"\n",(0,i.jsx)(n.li,{children:"Compress the build directory to zip and tar files."}),"\n",(0,i.jsxs)(n.li,{children:["Create a release:","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Use changelog as release notes."}),"\n",(0,i.jsx)(n.li,{children:"Upload compressed files as release artifacts."}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["Create a pull request to ",(0,i.jsx)(n.code,{children:"main"}),"."]}),"\n",(0,i.jsx)(n.li,{children:"If App release -> create a permanent URL (v{version}.livecodes.io) which is a proxy to preview deploy."}),"\n",(0,i.jsx)(n.li,{children:"If SDK release -> publish to npm."}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.admonition,{type:"info",children:(0,i.jsxs)(n.p,{children:["App versions are numeric e.g. ",(0,i.jsx)(n.code,{children:"v20"}),(0,i.jsx)(n.br,{}),"\n","SDK versions are semver e.g. ",(0,i.jsx)(n.code,{children:"v1.2.3"})]})})]})}function h(e={}){let{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},65:function(e,n,s){s.d(n,{Z:function(){return o},a:function(){return l}});var r=s(7294);let i={},t=r.createContext(i);function l(e){let n=r.useContext(t);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),r.createElement(t.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/59d3e69b.d541e35f.js b/docs/assets/js/59d3e69b.d541e35f.js new file mode 100644 index 0000000..722925b --- /dev/null +++ b/docs/assets/js/59d3e69b.d541e35f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6484"],{9342:function(e,n,s){s.r(n),s.d(n,{default:()=>h,frontMatter:()=>a,metadata:()=>t,assets:()=>o,toc:()=>d,contentTitle:()=>l});var t=JSON.parse('{"id":"contribution/i18n","title":"i18n","description":"This document provides a guide on how to contribute to the translation of the app.","source":"@site/docs/contribution/i18n.mdx","sourceDirName":"contribution","slug":"/contribution/i18n","permalink":"/docs/contribution/i18n","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/contribution/i18n.mdx","tags":[],"version":"current","frontMatter":{}}'),i=s("5893"),r=s("65");let a={},l="i18n",o={},d=[{value:"For Translators",id:"for-translators",level:2},{value:"Contribute to Translation",id:"contribute-to-translation",level:3},{value:"Add a New Language",id:"add-a-new-language",level:3},{value:"Technical Overview",id:"technical-overview",level:2},{value:"For Developers",id:"for-developers",level:2},{value:"Strings",id:"strings",level:3},{value:"Element-level Translation (HTML Files)",id:"element-level-translation-html-files",level:4},{value:"Keys",id:"keys",level:5},{value:"Value",id:"value",level:5},{value:"Props",id:"props",level:5},{value:"Abstract HTML Tags",id:"abstract-html-tags",level:6},{value:"Interpolation",id:"interpolation",level:5},{value:"String-level Translation (TypeScript Files)",id:"string-level-translation-typescript-files",level:4},{value:"Scripts",id:"scripts",level:3},{value:"For Maintainers",id:"for-maintainers",level:2},{value:"Workflow",id:"workflow",level:3},{value:"No-Source Update",id:"no-source-update",level:4},{value:"Source Update",id:"source-update",level:4},{value:"Minor Fixes / Updates",id:"minor-fixes--updates",level:4},{value:"Github Actions (CI)",id:"github-actions-ci",level:3},{value:"Hashing and Cache",id:"hashing-and-cache",level:3},{value:"For Those Who Forked the Repo",id:"for-those-who-forked-the-repo",level:2},{value:"Secrets and Variables Checklist",id:"secrets-and-variables-checklist",level:3},{value:"Repository Secrets",id:"repository-secrets",level:4},{value:"Repository Variables",id:"repository-variables",level:4}];function c(e){let n={a:"a",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"i18n",children:"i18n"})}),"\n",(0,i.jsx)(n.p,{children:"This document provides a guide on how to contribute to the translation of the app."}),"\n",(0,i.jsx)(n.h2,{id:"for-translators",children:"For Translators"}),"\n",(0,i.jsx)(n.p,{children:"Translators are responsible for translating the source texts on Lokalise."}),"\n",(0,i.jsx)(n.h3,{id:"contribute-to-translation",children:"Contribute to Translation"}),"\n",(0,i.jsxs)(n.p,{children:["Please visit the ",(0,i.jsx)(n.a,{href:"https://app.lokalise.com/public/34958094667a72e9454592.95108106/",children:"Lokalise project page"})," to contribute to the translation of LiveCodes. You might find the ",(0,i.jsx)(n.a,{href:"https://docs.lokalise.com/en/articles/2967175-onboarding-guide-for-translators",children:"Onboarding Guide for Translators"})," on Lokalise helpful."]}),"\n",(0,i.jsx)(n.h3,{id:"add-a-new-language",children:"Add a New Language"}),"\n",(0,i.jsxs)(n.p,{children:["If you find that the language you want to translate to is not available on Lokalise, please kindly ",(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/issues/new?template=i18n_request.yml",children:"raise an issue"})," in the repository with further details about the language you want to add."]}),"\n",(0,i.jsx)(n.h2,{id:"technical-overview",children:"Technical Overview"}),"\n",(0,i.jsxs)(n.p,{children:["The i18n framework ",(0,i.jsx)(n.a,{href:"https://www.i18next.com/",children:(0,i.jsx)(n.code,{children:"i18next"})})," and the online translation collaboration platform ",(0,i.jsx)(n.a,{href:"https://lokalise.com/",children:"Lokalise"})," are used to manage the i18n of LiveCodes."]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsx)(n.p,{children:"It is recommended to read the related documentation of the above tools before continuing."}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["The i18n workflow is designed to be ",(0,i.jsx)(n.strong,{children:"source-based"}),", which means that the source texts are extracted from the codebase and uploaded to Lokalise for translation. After the translation is complete, the translated texts are integrated back into the codebase. For more details, please refer to the ",(0,i.jsx)(n.a,{href:"#workflow",children:"Workflow"})," section."]}),"\n",(0,i.jsxs)(n.p,{children:["Two types of strings mentioned in the ",(0,i.jsx)(n.a,{href:"#strings",children:"Strings"})," section are considered as the ",(0,i.jsx)(n.strong,{children:"source texts"}),", and English is the ",(0,i.jsx)(n.strong,{children:"source language"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["Extracted source texts are stored in two forms under ",(0,i.jsx)(n.code,{children:"src/livecodes/i18n/locales/en"}),":"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:".ts"})," files: used by the app to load the source texts and provide type-safety for TypeScript"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:".lokalise.json"})," files: used to upload the source texts to Lokalise"]}),"\n"]}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:["These files are generated and kept in sync with each other by the ",(0,i.jsx)(n.code,{children:"i18n-export"})," npm script. See the ",(0,i.jsx)(n.a,{href:"#scripts",children:"Scripts"})," section for more details."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Other directories under ",(0,i.jsx)(n.code,{children:"src/livecodes/i18n/locales"})," are used to store the translated texts in other target languages, which only contain ",(0,i.jsx)(n.code,{children:".ts"})," files."]}),"\n",(0,i.jsx)(n.h2,{id:"for-developers",children:"For Developers"}),"\n",(0,i.jsx)(n.p,{children:"Developers are responsible for implementing new features or making changes to the existing codebase. When adding new strings or modifying existing strings, developers should ensure that the newly-edited strings are properly extracted and saved."}),"\n",(0,i.jsx)(n.h3,{id:"strings",children:"Strings"}),"\n",(0,i.jsxs)(n.p,{children:["Strings that need to be translated are located in both ",(0,i.jsx)(n.code,{children:"src/livecodes/html/*.html"})," and other ",(0,i.jsx)(n.code,{children:".ts"})," files in ",(0,i.jsx)(n.code,{children:"src/livecodes"})," (mostly in ",(0,i.jsx)(n.code,{children:"src/livecodes/UI/"}),"). These two different types of files, which also represent two types of translation methods, are handled differently in the i18n workflow:"]}),"\n",(0,i.jsx)(n.h4,{id:"element-level-translation-html-files",children:"Element-level Translation (HTML Files)"}),"\n",(0,i.jsxs)(n.p,{children:["In these files, strings are wrapped inside HTML elements with ",(0,i.jsx)(n.code,{children:"data-i18n"})," attribute and two optional attributes (",(0,i.jsx)(n.code,{children:"data-i18n-prop"}),", ",(0,i.jsx)(n.code,{children:"data-i18n-interpolation"}),"). For example:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-html",children:'
Assets
\n\n\n\n
\n Backup LiveCodes data, so that it can be later restored on this or other devices.
\n Please visit the\n documentations\n for details.\n
\n'})}),"\n",(0,i.jsx)(n.h5,{id:"keys",children:"Keys"}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"data-i18n"})," attribute is used to specify the ",(0,i.jsx)(n.strong,{children:"key"})," of the string and is a ",(0,i.jsx)(n.strong,{children:"period-separated"})," string with each part being a ",(0,i.jsx)(n.strong,{children:"lowerCamelCase"})," word."]}),"\n",(0,i.jsx)(n.h5,{id:"value",children:"Value"}),"\n",(0,i.jsxs)(n.p,{children:["The value of the corresponding attribute of the element is used as the ",(0,i.jsx)(n.strong,{children:"default / fallback value"})," of the string."]}),"\n",(0,i.jsx)(n.h5,{id:"props",children:"Props"}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"data-i18n-prop"})," attribute is a ",(0,i.jsx)(n.strong,{children:"space-separated list"})," of properties that should be translated. If it is not present, the string will be translated as the ",(0,i.jsx)(n.code,{children:"textContent"}),' of the element. When two or more properties are specified, a "full key" (',(0,i.jsx)(n.code,{children:"."}),", or ",(0,i.jsx)(n.code,{children:"#"})," on Lokalise) will be used to identify the string. For example, for the following element:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-html",children:'
\n This is a content\n
\n'})}),"\n",(0,i.jsxs)(n.p,{children:["The string will be identified as ",(0,i.jsx)(n.code,{children:"key.to.title#title"})," and ",(0,i.jsx)(n.code,{children:"key.to.title#textContent"})," on Lokalise."]}),"\n",(0,i.jsx)(n.h6,{id:"abstract-html-tags",children:"Abstract HTML Tags"}),"\n",(0,i.jsxs)(n.p,{children:["When the ",(0,i.jsx)(n.code,{children:"data-i18n-prop"})," attribute is ",(0,i.jsx)(n.code,{children:"innerHTML"}),", HTML tags inside the value will be abstracted during exporting, making the final source texts more readable. For example, the following value:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-html",children:'
\n Backup LiveCodes data, so that it can be later restored on this or other devices.
\n Please visit the\n documentations\n for details.\n
\n'})}),"\n",(0,i.jsx)(n.p,{children:"will be abstracted to:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-html",children:"Backup LiveCodes data, so that it can be later restored on this or other devices. <1> Please visit the <2>documentations for details.\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Although overriding specified attributes or adding new ones to the corresponding element is supported (",(0,i.jsx)(n.code,{children:'<2 href="https://example.org">documentations'}),"), it is not recommended to do so unless necessary (e.g., docs link for different languages)."]}),"\n",(0,i.jsx)(n.h5,{id:"interpolation",children:"Interpolation"}),"\n",(0,i.jsxs)(n.p,{children:["Interpolation is used to insert dynamic content into the string. The ",(0,i.jsx)(n.code,{children:"data-i18n-interpolation"})," attribute is a ",(0,i.jsx)(n.strong,{children:"JSON object string"})," that contains the key-value pairs of the dynamic content. For example:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-html",children:'\n'})}),"\n",(0,i.jsxs)(n.p,{children:["In related TypeScript files, the ",(0,i.jsx)(n.code,{children:"data-i18n-interpolation"})," attribute should be set as follows:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"charactersSpan.dataset.i18nInterpolation = JSON.stringify({ urlLength });\n"})}),"\n",(0,i.jsx)(n.h4,{id:"string-level-translation-typescript-files",children:"String-level Translation (TypeScript Files)"}),"\n",(0,i.jsxs)(n.p,{children:["In these files, strings are wrapped inside ",(0,i.jsx)(n.code,{children:"window.deps.translateString(key, value, interpolation)"})," function calls. For example:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"window.deps.translateString(\n 'namespace:file.key1.subkey1',\n 'default value, {{interpol}}',\n {\n isHTML: true,\n interpol: 'abc',\n },\n);\n\nwindow.deps.translateString('core.login.successWithName', 'Logged in as: {{name}}', {\n name: displayName,\n});\n"})}),"\n",(0,i.jsx)(n.p,{children:"The function is completely type-safe:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["The first argument is ",(0,i.jsx)(n.code,{children:"key"}),", which is validated with valid keys in ",(0,i.jsx)(n.code,{children:"i18n/locales/en/"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:["The second argument is ",(0,i.jsx)(n.code,{children:"value"}),". With the ",(0,i.jsx)(n.code,{children:"key"})," provided, the type of ",(0,i.jsx)(n.code,{children:"value"})," will be narrowed down to the value in the translation file to ensure all occurrences of the key have the same value. If this is an HTML string (with the ",(0,i.jsx)(n.code,{children:"isHTML"})," attribute set to ",(0,i.jsx)(n.code,{children:"true"}),"), the value will automatically be abstracted when exporting the translation."]}),"\n",(0,i.jsxs)(n.li,{children:["The third argument is ",(0,i.jsx)(n.code,{children:"interpolation"}),", which could be omitted when the value doesn't contain any interpolation. Otherwise, it should be an object whose attributes are inferred from the ",(0,i.jsx)(n.code,{children:"value"}),". Moreover, an additional ",(0,i.jsx)(n.code,{children:"isHTML"})," boolean attribute is added to indicate whether the ",(0,i.jsx)(n.code,{children:"value"})," contains HTML tags and should be abstracted when exporting the translation."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"To provide better readability and maintainability, only string-level translation will be used in .ts files when it comes to dynamic content. For static content, element-level translation is still the best choice."}),"\n",(0,i.jsx)(n.h3,{id:"scripts",children:"Scripts"}),"\n",(0,i.jsx)(n.p,{children:"Several npm scripts are available to facilitate the i18n workflow:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:s(7413).Z+"",children:(0,i.jsx)(n.code,{children:"vscode-intellisense"})}),": Generates the ",(0,i.jsx)(n.code,{children:"html.html-data.json"})," file in the ",(0,i.jsx)(n.code,{children:".vscode"})," folder to enhance intellisense for the ",(0,i.jsx)(n.code,{children:"data-i18n"})," attribute in HTML files in VSCode."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:s(2565).Z+"",children:(0,i.jsx)(n.code,{children:"i18n-export"})}),": Extracts source texts from the codebase and generates ",(0,i.jsx)(n.code,{children:".ts"})," and ",(0,i.jsx)(n.code,{children:".lokalise.json"})," files under ",(0,i.jsx)(n.code,{children:"src/livecodes/i18n/locales/en"}),".","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["The ",(0,i.jsx)(n.code,{children:"--save-tmp"})," flag can be used to save the extracted source texts to ",(0,i.jsx)(n.code,{children:"i18n/locales/tmp"})," instead of ",(0,i.jsx)(n.code,{children:"en"})," for debugging purposes."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:s(6114).Z+"",children:[(0,i.jsx)(n.code,{children:"i18n-update-push"})," / ",(0,i.jsx)(n.code,{children:"i18n-upload.mjs"})]}),": ",(0,i.jsx)(n.strong,{children:"(Only used in CI and should not be run locally)"})," Pushes the source texts in ",(0,i.jsx)(n.code,{children:".lokasile.json"})," files to Lokalise.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["The ",(0,i.jsx)(n.code,{children:""})," argument is required to specify the branch to push to."]}),"\n",(0,i.jsxs)(n.li,{children:["The ",(0,i.jsx)(n.code,{children:"--force"})," flag can be used to skip the check for environment variable ",(0,i.jsx)(n.code,{children:"CI"})," and allow running the script locally."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsxs)(n.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:s(2379).Z+"",children:[(0,i.jsx)(n.code,{children:"i18n-update-pull"})," / ",(0,i.jsx)(n.code,{children:"i18n-import.mjs"})]}),": ",(0,i.jsx)(n.strong,{children:"(Only used in CI and should not be run locally)"})," Pulls the translated texts from Lokalise and updates the ",(0,i.jsx)(n.code,{children:".ts"})," files under ",(0,i.jsx)(n.code,{children:"src/livecodes/i18n/locales"}),". ",(0,i.jsx)(n.em,{children:"Outdated translation will be deprecated during import."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["The ",(0,i.jsx)(n.code,{children:""})," argument is required to specify the branch to pull from."]}),"\n",(0,i.jsxs)(n.li,{children:["The ",(0,i.jsx)(n.code,{children:"--force"})," flag can be used to skip the check for environment variable ",(0,i.jsx)(n.code,{children:"CI"})," and allow running the script locally."]}),"\n",(0,i.jsxs)(n.li,{children:["The ",(0,i.jsx)(n.code,{children:"--local"})," flag can be used to let the script use local resources in the directory defined by the ",(0,i.jsx)(n.code,{children:"LOKALISE_TEMP"})," environment variable instead of fetching from Lokalise."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:s(64).Z+"",children:(0,i.jsx)(n.code,{children:"i18n-exclude"})}),": ",(0,i.jsx)(n.strong,{children:"(Only used in other scripts and should not be run locally)"})," Excludes all other i18n locales except for English from type checking, as they might stay outdated and cause errors.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["The ",(0,i.jsx)(n.code,{children:""})," argument is required to specify whether the script is to exclude files or revert the exclusion. Valid values are ",(0,i.jsx)(n.code,{children:"pre"})," and ",(0,i.jsx)(n.code,{children:"post"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:["This script only works when environment variable ",(0,i.jsx)(n.code,{children:"BUILD_INCLUDE_LOCALES"})," is ",(0,i.jsx)(n.strong,{children:"NOT"})," set to ",(0,i.jsx)(n.code,{children:"true"}),"."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:s(9173).Z+"",children:(0,i.jsx)(n.code,{children:"i18n-lokalise-json"})}),": Generates ",(0,i.jsx)(n.code,{children:".lokalise.json"})," files from codebase for manually authoring translations on Lokalise.","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Arguments to the script are required to specify the languages that the ",(0,i.jsx)(n.code,{children:".lokalise.json"})," files are generated from."]}),"\n",(0,i.jsxs)(n.li,{children:["You can also use ",(0,i.jsx)(n.code,{children:"all"})," to generate ",(0,i.jsx)(n.code,{children:".lokalise.json"})," files for all languages."]}),"\n",(0,i.jsxs)(n.li,{children:["This script ",(0,i.jsx)(n.strong,{children:"should not"})," be used for the source language English. Use ",(0,i.jsx)(n.code,{children:"i18n-export"})," instead."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Please run ",(0,i.jsx)(n.code,{children:"i18n-export"})," before pushing changes to the codebase to ensure that the source texts are up-to-date."]}),"\n",(0,i.jsx)(n.h2,{id:"for-maintainers",children:"For Maintainers"}),"\n",(0,i.jsx)(n.p,{children:"Maintainers are responsible for managing the i18n workflow and ensuring the quality of translations."}),"\n",(0,i.jsx)(n.h3,{id:"workflow",children:"Workflow"}),"\n",(0,i.jsx)(n.p,{children:"We consider the i18n process to consist of two parts:"}),"\n",(0,i.jsx)(n.h4,{id:"no-source-update",children:"No-Source Update"}),"\n",(0,i.jsx)(n.p,{children:"This means there are no changes to the source code/texts, only translations are updated. Adding new languages or updating existing translations are examples of this part."}),"\n",(0,i.jsxs)(n.p,{children:["In such cases, there is a scheduled workflow ",(0,i.jsx)(n.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:s(4346).Z+"",children:(0,i.jsx)(n.code,{children:"i18n-update-scheduled"})})," to handle this. The workflow will sync from the ",(0,i.jsx)(n.code,{children:"master"})," branch on Lokalise to the ",(0,i.jsx)(n.code,{children:"i18n/develop"})," branch on the codebase, then automatically create a PR if there are any changes."]}),"\n",(0,i.jsx)(n.p,{children:"Basically, maintainers only need to focus on the following for this part:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Reviewing PRs created by the ",(0,i.jsx)(n.code,{children:"i18n-update-scheduled"})," workflow"]}),"\n",(0,i.jsxs)(n.li,{children:["Do merging on Lokalise after they consider the translation for a specific feature is ready, before commenting ",(0,i.jsx)(n.code,{children:".i18n-update-pull"})," to trigger the ",(0,i.jsx)(n.code,{children:"i18n-update-pull"})," workflow"]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"source-update",children:"Source Update"}),"\n",(0,i.jsx)(n.p,{children:"This means new changes are made to the source code/texts. In this case, maintainers should follow the steps below:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["Developers work on the source code, developing new features or modifying existing ones. They use ",(0,i.jsx)(n.code,{children:"data-i18n"})," and ",(0,i.jsx)(n.code,{children:"window.deps.translateString"})," to mark the strings that need to be translated."]}),"\n",(0,i.jsxs)(n.li,{children:["Once a new feature or version is ready, developers run ",(0,i.jsx)(n.code,{children:"npm run i18n-export"})," to extract and update all marked strings, then export them to ",(0,i.jsx)(n.code,{children:".lokalise.json"})," and ",(0,i.jsx)(n.code,{children:".ts"})," files."]}),"\n",(0,i.jsx)(n.li,{children:"Developers commit and push the changes to the repository. A feature PR is created and reviewed, and related tests, checks, and manual review could be carried out."}),"\n",(0,i.jsxs)(n.li,{children:["After the PR is merged, an auto-generated comment will notify maintainers to comment ",(0,i.jsx)(n.code,{children:".i18n-update-push"})," to trigger the ",(0,i.jsx)(n.code,{children:"i18n-update-push"})," workflow when they think it is ready."]}),"\n",(0,i.jsxs)(n.li,{children:["Maintainers comment ",(0,i.jsx)(n.code,{children:".i18n-update-push"})," to trigger the ",(0,i.jsx)(n.code,{children:"i18n-update-push"})," workflow. The workflow will create a new branch named ",(0,i.jsx)(n.code,{children:"i18n//"}),", run ",(0,i.jsx)(n.code,{children:"npm run i18n-export"})," again to ensure the source texts are up-to-date, and push the changes. Then, it will push the changes to the ",(0,i.jsx)(n.code,{children:"i18n//"})," branch on Lokalise."]}),"\n",(0,i.jsx)(n.li,{children:"Translators can start translating the texts on Lokalise."}),"\n",(0,i.jsxs)(n.li,{children:["Once the translation is complete, maintainers can comment ",(0,i.jsx)(n.code,{children:".i18n-update-pull"})," to trigger the ",(0,i.jsx)(n.code,{children:"i18n-update-pull"})," workflow. The workflow will pull the translated texts from Lokalise, update the ",(0,i.jsx)(n.code,{children:".ts"})," files under ",(0,i.jsx)(n.code,{children:"src/livecodes/i18n/locales"}),", and commit the changes to the ",(0,i.jsx)(n.code,{children:"i18n//"})," branch. Then, it will create a PR to merge the changes back to the default branch ",(0,i.jsx)(n.code,{children:"develop"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:["Maintainers should perform a final review on the i18n PR and merge it if everything is fine. Meanwhile, a merging from the ",(0,i.jsx)(n.code,{children:"i18n//"})," to ",(0,i.jsx)(n.code,{children:"master"})," should also be done to keep the ",(0,i.jsx)(n.code,{children:"master"})," branch on Lokalise up-to-date."]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"minor-fixes--updates",children:"Minor Fixes / Updates"}),"\n",(0,i.jsx)(n.p,{children:"Sometimes there is already an ongoing main prerelease branch with many features being developed and translated on Lokalise, and a minor fix or update to the prerelease branch is needed. In this case, maintainers should follow the steps below:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["Switch to ",(0,i.jsx)(n.code,{children:"develop"})," branch."]}),"\n",(0,i.jsxs)(n.li,{children:["Do ",(0,i.jsx)(n.code,{children:"i18n-export"})," and upload corresponding ",(0,i.jsx)(n.code,{children:".lokalise.json"})," to the prerelease branch of the Lokalise project through web UI."]}),"\n",(0,i.jsxs)(n.li,{children:["Affected entries will be updated and ",(0,i.jsxs)(n.a,{href:"https://docs.lokalise.com/en/articles/3684557-translation-statuses-translated-verified-reviewed-and-completed#verified-and-unverified",children:["marked as ",(0,i.jsx)(n.code,{children:"unverified"})]}),"."]}),"\n",(0,i.jsx)(n.li,{children:"Provide correct translations in other languages on Lokalise."}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Here we do not want an extra i18n branch for simplicity, nor need to pull from Lokalise as we always consider English source strings from codebase as the latest version and do not recommend modifying them on Lokalise directly."}),"\n",(0,i.jsx)(n.h3,{id:"github-actions-ci",children:"Github Actions (CI)"}),"\n",(0,i.jsx)(n.p,{children:"Four i18n-related workflows are set up in the repository:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:s(3601).Z+"",children:(0,i.jsx)(n.code,{children:"i18n-update-notify"})}),": Creates a comment on merged PRs to notify maintainers to trigger the ",(0,i.jsx)(n.code,{children:"i18n-update-push"})," workflow."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:s(5207).Z+"",children:(0,i.jsx)(n.code,{children:"i18n-update-push"})}),": Creates a new branch named ",(0,i.jsx)(n.code,{children:"i18n//"}),", runs ",(0,i.jsx)(n.code,{children:"npm run i18n-export"})," again to ensure the source texts are up-to-date, pushes the changes on git, then pushes the changes to the ",(0,i.jsx)(n.code,{children:"i18n//"})," branch on Lokalise."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:s(3529).Z+"",children:(0,i.jsx)(n.code,{children:"i18n-update-pull"})}),": Pulls the translated texts from Lokalise, updates the ",(0,i.jsx)(n.code,{children:".ts"})," files under ",(0,i.jsx)(n.code,{children:"src/livecodes/i18n/locales"}),", commits the changes to the ",(0,i.jsx)(n.code,{children:"i18n//"})," branch, then creates a PR to merge the changes back to the default branch ",(0,i.jsx)(n.code,{children:"develop"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:s(4346).Z+"",children:(0,i.jsx)(n.code,{children:"i18n-update-scheduled"})}),": Syncs between the ",(0,i.jsx)(n.code,{children:"master"})," branch on Lokalise and the ",(0,i.jsx)(n.code,{children:"i18n/develop"})," branch on the codebase, then automatically creates a PR if there are any changes."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"hashing-and-cache",children:"Hashing and Cache"}),"\n",(0,i.jsxs)(n.p,{children:["After production build, ",(0,i.jsx)(n.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:s(8802).Z+"",children:"file hashes are added"})," to all files in ",(0,i.jsx)(n.code,{children:"build/livecodes/"})," directory. The hash is the checksum of the file content. So if the file content does not change, it will get the same hash across builds."]}),"\n",(0,i.jsxs)(n.p,{children:["This assumes that all files to be hashed are in that directory (without nesting), and that they are referenced in code using placeholders like ",(0,i.jsx)(n.code,{children:"{{hash:file-name.js}}"}),":"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"const mod = await import(baseUrl + '{{hash:file-name.js}}');\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Then, these files are ",(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/tree/develop/src/_headers",children:"aggressively cached"})," (for 1 year)."]}),"\n",(0,i.jsx)(n.p,{children:"So, any file that has not changed will continue to be served from cache even for later releases."}),"\n",(0,i.jsx)(n.p,{children:"File hashing is also applied to translation files during build, by auto-generating a path loader file that contains hard-coded hash placeholders for each translation file."}),"\n",(0,i.jsx)(n.h2,{id:"for-those-who-forked-the-repo",children:"For Those Who Forked the Repo"}),"\n",(0,i.jsxs)(n.p,{children:["This repository is utilizing ",(0,i.jsx)(n.a,{href:"https://github.com/apps/livecodes-ci",children:"LiveCodes CI"})," Github App to ensure the i18n workflow functions properly."]}),"\n",(0,i.jsxs)(n.p,{children:["For forked repositories, maintainers should set up their own Lokalise project and Github App (see ",(0,i.jsx)(n.a,{href:"https://github.com/peter-evans/create-pull-request/blob/main/docs/concepts-guidelines.mdx#authenticating-with-github-app-generated-tokens",children:"here"}),") to handle the i18n workflow. Changes to related workflow files are necessary."]}),"\n",(0,i.jsx)(n.h3,{id:"secrets-and-variables-checklist",children:"Secrets and Variables Checklist"}),"\n",(0,i.jsx)(n.h4,{id:"repository-secrets",children:"Repository Secrets"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"LOKALISE_API_TOKEN"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"CI_APP_ID"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"CI_APP_PRIVATE_KEY"})}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"repository-variables",children:"Repository Variables"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.code,{children:"LOKALISE_PROJECT_ID"})}),"\n"]})]})}function h(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},3601:function(e,n,s){s.d(n,{Z:function(){return t}});let t=s.p+"assets/files/i18n-update-notify-a3777449a43532d607ba41185a4d7760.yml"},3529:function(e,n,s){s.d(n,{Z:function(){return t}});let t=s.p+"assets/files/i18n-update-pull-d89075850c83dbf05af9b0d6b67c1d1e.yml"},5207:function(e,n,s){s.d(n,{Z:function(){return t}});let t=s.p+"assets/files/i18n-update-push-0ccaf936f8b7727f7a8e5c8a4a944707.yml"},4346:function(e,n,s){s.d(n,{Z:function(){return t}});let t=s.p+"assets/files/i18n-update-scheduled-fc9b46482ca124aee2d68a17c3a1b69f.yml"},8802:function(e,n,s){s.d(n,{Z:function(){return t}});let t=s.p+"assets/files/hash-9dd0148ddb2f39842f39f389ec4236cc.js"},64:function(e,n,s){s.d(n,{Z:function(){return t}});let t=s.p+"assets/files/i18n-exclude-e5d517ec6b92591b6019979892ee8d93.js"},2565:function(e,n,s){s.d(n,{Z:function(){return t}});let t=s.p+"assets/files/i18n-export-83977ebfdbe21c25c30819abc6321af1.js"},7413:function(e,n,s){s.d(n,{Z:function(){return t}});let t=s.p+"assets/files/vscode-intellisense-9573a05c29631b61eab8c1ea3da9c50d.js"},65:function(e,n,s){s.d(n,{Z:function(){return l},a:function(){return a}});var t=s(7294);let i={},r=t.createContext(i);function a(e){let n=t.useContext(r);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),t.createElement(r.Provider,{value:n},e.children)}},2379:function(e,n,s){s.d(n,{Z:function(){return t}});let t=s.p+"assets/files/i18n-import-28359d2898f8ffcd1048c32f5d6a3401.mjs"},9173:function(e,n,s){s.d(n,{Z:function(){return t}});let t=s.p+"assets/files/i18n-lokalise-json-331642ee9c64647d271c8928cd4d8880.mjs"},6114:function(e,n,s){s.d(n,{Z:function(){return t}});let t=s.p+"assets/files/i18n-upload-6d83a823535487ee2d3034a686d86062.mjs"}}]); \ No newline at end of file diff --git a/docs/assets/js/5a090f4d.3927f2f2.js b/docs/assets/js/5a090f4d.3927f2f2.js new file mode 100644 index 0000000..6e801ab --- /dev/null +++ b/docs/assets/js/5a090f4d.3927f2f2.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["328"],{2961:function(e,s,t){t.r(s),t.d(s,{default:()=>u,frontMatter:()=>d,metadata:()=>n,assets:()=>a,toc:()=>c,contentTitle:()=>l});var n=JSON.parse('{"id":"features/module-resolution","title":"Module Resolution","description":"NPM Modules","source":"@site/docs/features/module-resolution.mdx","sourceDirName":"features","slug":"/features/module-resolution","permalink":"/docs/features/module-resolution","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/module-resolution.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Tests","permalink":"/docs/features/tests"},"next":{"title":"IntelliSense","permalink":"/docs/features/intellisense"}}'),r=t("5893"),o=t("65"),i=t("3365");let d={},l="Module Resolution",a={},c=[{value:"NPM Modules",id:"npm-modules",level:2},{value:"Bare Module Imports",id:"bare-module-imports",level:3},{value:"CommonJS Modules",id:"commonjs-modules",level:3},{value:"NPM Package Search",id:"npm-package-search",level:3},{value:"Deno Modules",id:"deno-modules",level:2},{value:"JSR Modules",id:"jsr-modules",level:2},{value:"GitHub/GitLab/Bitbucket",id:"githubgitlabbitbucket",level:2},{value:"CDN Providers",id:"cdn-providers",level:2},{value:"Change Default CDN",id:"change-default-cdn",level:3},{value:"Package Version",id:"package-version",level:3},{value:"Custom Module Resolution",id:"custom-module-resolution",level:2},{value:"Custom Settings",id:"custom-settings",level:4},{value:"SDK",id:"sdk",level:4},{value:"Related",id:"related",level:2}];function h(e){let s={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.header,{children:(0,r.jsx)(s.h1,{id:"module-resolution",children:"Module Resolution"})}),"\n","\n",(0,r.jsx)(s.h2,{id:"npm-modules",children:"NPM Modules"}),"\n",(0,r.jsx)(s.h3,{id:"bare-module-imports",children:"Bare Module Imports"}),"\n",(0,r.jsx)(s.p,{children:"In LiveCodes you can use node-style bare module imports for npm modules like you do in your local development. However, there are no installation or build steps required."}),"\n",(0,r.jsx)(s.p,{children:"e.g. consider the following code:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",children:"import { v4 } from 'uuid';\n\ndocument.body.innerHTML = v4();\n"})}),"\n",(0,r.jsx)(s.p,{children:"If you run it directly in the browser, you get this error:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{children:'Uncaught TypeError: Failed to resolve module specifier "uuid". Relative references must start with either "/", "./", or "../".\n'})}),"\n",(0,r.jsxs)(s.p,{children:["However, in LiveCodes, bare module imports are transformed to full URLs that are imported from CDN (by default: ",(0,r.jsx)(s.a,{href:"https://esm.sh/",children:"esm.sh"}),") which provides ESM versions of NPM packages."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"import { v4 } from 'uuid';"})," ",(0,r.jsx)("br",{})," becomes ",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(s.code,{children:"import { v4 } from 'https://esm.sh/uuid';"})]}),"\n",(0,r.jsxs)(s.p,{children:["This is made possible by using ",(0,r.jsx)(s.a,{href:"https://github.com/WICG/import-maps",children:"import maps"}),"."]}),"\n",(0,r.jsx)("p",{id:"npm-modules-demo1",children:"Demo:"}),"\n",(0,r.jsx)(i.Z,{params:{js:"import { v4 } from 'uuid';\n\ndocument.body.innerHTML = v4();"}}),"\n",(0,r.jsx)("p",{children:"\xa0"}),"\n",(0,r.jsx)(s.p,{children:"You can import from React like that:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",children:"import { useState } from 'react';\n"})}),"\n",(0,r.jsx)(s.p,{children:"Demo:"}),"\n",(0,r.jsx)(i.Z,{template:"react"}),"\n",(0,r.jsxs)(s.p,{children:["It just works without a build step and without you having to worry about. And when you ",(0,r.jsx)(s.a,{href:"/docs/features/export",children:"export your project"})," to another service (e.g. CodePen) or as HTML, the full URL imports are used, so your code continues to work."]}),"\n",(0,r.jsx)(s.admonition,{type:"tip",children:(0,r.jsxs)(s.p,{children:["It is recommended to use this method for dependencies over using ",(0,r.jsx)(s.a,{href:"/docs/features/external-resources",children:"external scripts"}),". The dependencies are explicitly stated in the code. And if you move to a local development environment, your bundler will take care of importing them and doing other optimizations like ",(0,r.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking",children:"tree-shaking"}),"."]})}),"\n",(0,r.jsx)(s.h3,{id:"commonjs-modules",children:"CommonJS Modules"}),"\n",(0,r.jsxs)(s.p,{children:["CommonJS module ",(0,r.jsx)(s.code,{children:"require"}),"s are also supported (they are converted to ESM imports)."]}),"\n",(0,r.jsx)(s.p,{children:"So this also works (although not recommended - use ESM imports instead):"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",children:"const { v4 } = require('uuid');\n\ndocument.body.innerHTML = v4();\n"})}),"\n",(0,r.jsx)(s.p,{children:"Exercise:"}),"\n",(0,r.jsx)(s.p,{children:"Copy the previous code snippet and paste it in the playground below. Check the generated code in the compiled code viewer."}),"\n",(0,r.jsx)(i.Z,{params:{activeEditor:"script",compiled:"open"}}),"\n",(0,r.jsx)(s.admonition,{type:"info",children:(0,r.jsxs)(s.p,{children:["Script code that contains ",(0,r.jsx)(s.code,{children:"import"}),", ",(0,r.jsx)(s.code,{children:"export"})," or ",(0,r.jsx)(s.code,{children:"require"})," gets served in a script tag with ",(0,r.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules",children:(0,r.jsx)(s.code,{children:'type="module"'})}),"."]})}),"\n",(0,r.jsx)(s.h3,{id:"npm-package-search",children:"NPM Package Search"}),"\n",(0,r.jsxs)(s.p,{children:["NPM packages can be searched and added as script tags from the ",(0,r.jsx)(s.a,{href:"/docs/features/external-resources",children:"External Resources"})," screen."]}),"\n",(0,r.jsx)(s.h2,{id:"deno-modules",children:"Deno Modules"}),"\n",(0,r.jsxs)(s.p,{children:["Modules imported from ",(0,r.jsx)(s.a,{href:"https://deno.land/x",children:"deno.land/x"})," (or any other URL ending in ",(0,r.jsx)(s.code,{children:".ts"}),", ",(0,r.jsx)(s.code,{children:".jsx"})," or ",(0,r.jsx)(s.code,{children:".tsx"}),") are automatically transpiled (ts -> js) and bundled by ",(0,r.jsx)(s.a,{href:"https://bundlejs.com/",children:"bundlejs"})," (using ",(0,r.jsx)(s.a,{href:"https://esbuild.github.io/",children:"esbuild"}),"), including their relative imports. The project on LiveCodes that imports these modules does not need to be using TypeScript."]}),"\n",(0,r.jsx)(s.p,{children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",children:"import { uuid } from 'https://deno.land/x/uuid/mod.ts';\n\ndocument.body.innerHTML = uuid();\n"})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"https://livecodes.io/?js=import%20%7B%20uuid%20%7D%20from%20'https%3A%2F%2Fdeno.land%2Fx%2Fuuid%2Fmod.ts'%3B%0A%0Adocument.body.innerHTML%20%3D%20uuid()%3B",children:"Open in LiveCodes"})}),"\n",(0,r.jsx)(s.h2,{id:"jsr-modules",children:"JSR Modules"}),"\n",(0,r.jsxs)(s.p,{children:["Modules can be imported from ",(0,r.jsx)(s.a,{href:"https://jsr.io/",children:"jsr.io"})," using the prefix ",(0,r.jsx)(s.code,{children:"jsr:"}),". The project on LiveCodes that imports these modules does not need to be using TypeScript."]}),"\n",(0,r.jsx)(s.p,{children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",children:"import { yassify } from 'jsr:@kwhinnery/yassify';\n\ndocument.body.innerHTML = yassify('Hello, World!');\n"})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"https://livecodes.io/?js=import%20%7B%20yassify%20%7D%20from%20'jsr%3A%40kwhinnery%2Fyassify'%3B%0A%0Adocument.body.innerHTML%20%3D%20yassify('Hello%2C%20World!')%3B",children:"Open in LiveCodes"})}),"\n",(0,r.jsx)(s.h2,{id:"githubgitlabbitbucket",children:"GitHub/GitLab/Bitbucket"}),"\n",(0,r.jsxs)(s.p,{children:["Modules can also be similarly imported from GitHub, Gitlab or Bitbucket. Also these imports are transpiled and bundled (see ",(0,r.jsx)(s.a,{href:"#deno-modules",children:"Deno Modules"}),")."]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",children:"import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts';\n\nconsole.log(flatten([[1, 2], [3], [4, 5]])); // -> [1, 2, 3, 4, 5]\n"})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"https://livecodes.io/?console=open&js=import%20%7B%20flatten%20%7D%20from%20'https%3A%2F%2Fgithub.com%2Fremeda%2Fremeda%2Fblob%2Fmaster%2Fsrc%2Fflatten.ts'%3B%0A%0Aconsole.log(flatten(%5B%5B1%2C%202%5D%2C%20%5B3%5D%2C%20%5B4%2C%205%5D%5D))%3B",children:"Open in LiveCodes"})}),"\n",(0,r.jsxs)(s.admonition,{type:"tip",children:[(0,r.jsxs)(s.p,{children:["If you do not want the import URL to be bundled (e.g. in Deno or GitHub imports), add ",(0,r.jsx)(s.code,{children:"#nobundle"})," to the end of URL."]}),(0,r.jsx)(s.p,{children:"Example:"}),(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",children:"import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts#nobundle';\n"})}),(0,r.jsxs)(s.p,{children:["If you want to bundle (and transpile) any import URL, prefix it with ",(0,r.jsx)(s.code,{children:"bundle:"})," (see below)."]})]}),"\n",(0,r.jsx)(s.h2,{id:"cdn-providers",children:"CDN Providers"}),"\n",(0,r.jsxs)(s.p,{children:["By default, npm modules are imported from ",(0,r.jsx)(s.a,{href:"https://esm.sh/",children:"esm.sh"}),". You may choose another provider by using a CDN prefix. These are examples of importing the library ",(0,r.jsx)(s.code,{children:"uuid"}),":"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"uuid"})," \u2192 ",(0,r.jsx)(s.a,{href:"https://esm.sh/uuid",children:"https://esm.sh/uuid"})," (",(0,r.jsx)(s.a,{href:"https://esm.sh",children:"info"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"esm.sh:uuid"})," \u2192 ",(0,r.jsx)(s.a,{href:"https://esm.sh/uuid",children:"https://esm.sh/uuid"})," (",(0,r.jsx)(s.a,{href:"https://esm.sh/",children:"info"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"skypack:uuid"})," \u2192 ",(0,r.jsx)(s.a,{href:"https://cdn.skypack.dev/uuid",children:"https://cdn.skypack.dev/uuid"})," (",(0,r.jsx)(s.a,{href:"https://www.skypack.dev/",children:"info"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jsdelivr:uuid"})," \u2192 ",(0,r.jsx)(s.a,{href:"https://cdn.jsdelivr.net/npm/uuid",children:"https://cdn.jsdelivr.net/npm/uuid"})," (",(0,r.jsx)(s.a,{href:"https://www.jsdelivr.com/",children:"info"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"esm.run:uuid"})," \u2192 ",(0,r.jsx)(s.a,{href:"https://esm.run/uuid",children:"https://esm.run/uuid"})," (",(0,r.jsx)(s.a,{href:"https://esm.run/",children:"info"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"unpkg:uuid"})," \u2192 ",(0,r.jsx)(s.a,{href:"https://unpkg.com/uuid?module",children:"https://unpkg.com/uuid?module"})," (",(0,r.jsx)(s.a,{href:"https://unpkg.com/",children:"info"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"esbuild:uuid"})," \u2192 ",(0,r.jsx)(s.a,{href:"https://esbuild.vercel.app/uuid",children:"https://esbuild.vercel.app/uuid"})," (",(0,r.jsx)(s.a,{href:"https://esbuild.vercel.app/",children:"info"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"bundlejs:uuid"})," \u2192 ",(0,r.jsx)(s.a,{href:"https://deno.bundlejs.com/?file&q=uuid",children:"https://deno.bundlejs.com/?file&q=uuid"})," (",(0,r.jsx)(s.a,{href:"https://bundlejs.com/",children:"info"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"bundle:uuid"})," \u2192 ",(0,r.jsx)(s.a,{href:"https://deno.bundlejs.com/?file&q=uuid",children:"https://deno.bundlejs.com/?file&q=uuid"})," (",(0,r.jsx)(s.a,{href:"https://bundlejs.com/",children:"info"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"deno:uuid"})," \u2192 ",(0,r.jsx)(s.a,{href:"https://deno.bundlejs.com/?file&q=https://deno.land/x/uuid/mod.ts",children:"https://deno.bundlejs.com/?file&q=https://deno.land/x/uuid/mod.ts"})," (",(0,r.jsx)(s.a,{href:"https://bundlejs.com/",children:"info"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"npm:uuid"})," \u2192 ",(0,r.jsx)(s.a,{href:"https://esm.sh/uuid",children:"https://esm.sh/uuid"})," (",(0,r.jsx)(s.a,{href:"https://esm.sh",children:"info"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"node:uuid"})," \u2192 ",(0,r.jsx)(s.a,{href:"https://esm.sh/uuid",children:"https://esm.sh/uuid"})," (",(0,r.jsx)(s.a,{href:"https://esm.sh",children:"info"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jsr:@std/uuid"})," \u2192 ",(0,r.jsx)(s.a,{href:"https://esm.sh/jsr/@std/uuid",children:"https://esm.sh/jsr/@std/uuid"})," (",(0,r.jsx)(s.a,{href:"https://esm.sh",children:"info"}),")"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"jspm:uuid"})," \u2192 ",(0,r.jsx)(s.a,{href:"https://jspm.dev/uuid",children:"https://jspm.dev/uuid"})," (",(0,r.jsx)(s.a,{href:"https://jspm.org",children:"info"})," - ",(0,r.jsx)(s.a,{href:"https://jspm.org/jspm-dev-deprecation",children:"DEPRECATED"}),")"]}),"\n",(0,r.jsx)(s.p,{children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",children:"import { useState } from 'esm.sh:react';\n"})}),"\n",(0,r.jsxs)(s.admonition,{type:"caution",children:[(0,r.jsx)(s.p,{children:"Please note that importing the same module (even for dependencies) from different CDNs may cause conflicts."}),(0,r.jsx)(s.p,{children:"Example:"}),(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",children:"// this will NOT work!\nimport React, { useState } from 'esm.sh:react'; // React from esm.sh\nimport { createRoot } from 'skypack:react-dom/client'; // React from skypack.dev\n"})})]}),"\n",(0,r.jsx)(s.h3,{id:"change-default-cdn",children:"Change Default CDN"}),"\n",(0,r.jsxs)(s.p,{children:["Default CDN can be changed on project-level using the ",(0,r.jsx)(s.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," property ",(0,r.jsx)(s.code,{children:"defaultCDN"})," which accepts a string representing one of the CDN aliases listed above."]}),"\n",(0,r.jsxs)(s.p,{children:["Example: This assigns ",(0,r.jsx)(s.a,{href:"https://www.skypack.dev/",children:"Skypack"})," as the default CDN for all imports of the project"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-json",children:'{\n "defaultCDN": "skypack"\n}\n'})}),"\n",(0,r.jsx)(s.h3,{id:"package-version",children:"Package Version"}),"\n",(0,r.jsxs)(s.p,{children:["Most CDN providers allow specifying package version using the format: ",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(s.code,{children:"{pkgName}@{version}/{path}"}),"."]}),"\n",(0,r.jsx)(s.p,{children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",children:"import latest from 'lodash';\nimport v3 from 'lodash@3';\n\nconsole.log(latest.VERSION); // -> 4.17.21\nconsole.log(v3.VERSION); // -> 3.10.1\n"})}),"\n",(0,r.jsx)(s.h2,{id:"custom-module-resolution",children:"Custom Module Resolution"}),"\n",(0,r.jsxs)(s.p,{children:["Module resolution described in this page mainly depends on ",(0,r.jsx)(s.a,{href:"https://github.com/WICG/import-maps",children:"import maps"}),". The generated import map is added to the ",(0,r.jsx)(s.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["You may wish to override or customize module resolution behavior (e.g. change URL, CDN, specify version, import custom unpublished library, ...etc. ), however you cannot add another import map script because ",(0,r.jsx)(s.a,{href:"https://github.com/WICG/import-maps#multiple-import-map-support",children:"currently multiple import maps are not yet supported"}),"."]}),"\n",(0,r.jsx)(s.p,{children:"LiveCodes allows you to add your custom import map by one of the following methods:"}),"\n",(0,r.jsx)(s.h4,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,r.jsxs)(s.p,{children:["In the standalone app, via the ",(0,r.jsx)(s.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," property ",(0,r.jsx)(s.code,{children:"imports"}),"."]}),"\n",(0,r.jsx)(s.p,{children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "imports": {\n "my-lib": "https://my-server.com/path/to/library.js"\n }\n}\n'})}),"\n",(0,r.jsx)(s.h4,{id:"sdk",children:"SDK"}),"\n",(0,r.jsxs)(s.p,{children:["For embedded playgrounds, use the ",(0,r.jsx)(s.a,{href:"/docs/sdk/",children:"SDK"})," embed option ",(0,r.jsx)(s.a,{href:"/docs/configuration/configuration-object#imports",children:(0,r.jsx)(s.code,{children:"config.imports"})}),"."]}),"\n",(0,r.jsx)(s.p,{children:"Example:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",metastring:'title="index.js"',children:"import { createPlayground } from 'livecodes';\n\nconst config = {\n imports: {\n 'my-lib': 'https://my-server.com/path/to/library.js',\n },\n // other configurations ...\n};\n\ncreatePlayground('#container', { config });\n"})}),"\n",(0,r.jsxs)(s.p,{children:["Please note that you may also provide ",(0,r.jsx)(s.a,{href:"/docs/features/intellisense#custom-types",children:"custom type definitions"})," for your custom modules for editor intellisense and better development experience."]}),"\n",(0,r.jsx)(s.h2,{id:"related",children:"Related"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/docs/features/import",children:"Import"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/docs/features/external-resources",children:"External Resources"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/docs/features/projects",children:"Projects"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/docs/features/intellisense",children:"Intellisense"})}),"\n"]})]})}function u(e={}){let{wrapper:s}={...(0,o.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},3365:function(e,s,t){t.d(s,{Z:()=>j});var n=t("5893"),r=t("4200"),o=t("7294"),i=t("8294");function d(e){let s=(0,o.useRef)(null),[t,r]=(0,o.useState)(e.className||""),[d,l]=(0,o.useState)(e.style||{}),[a,c]=(0,o.useState)(e.height),[h,u]=(0,o.useState)(),[p,m]=(0,o.useState)(JSON.stringify(e.config||"")),[f,j]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!s.current)return;let{className:t,style:n,height:o,sdkReady:d,config:a,...x}=e;if(r(t||""),l(n||{}),c(o),h&&f===JSON.stringify(x)){if(p===JSON.stringify(a))return;m(JSON.stringify(a)),"string"==typeof a?fetch(a).then(e=>e.json()).then(e=>{h?.setConfig(e)}):a&&h.setConfig(a)}else j(JSON.stringify(x)),h?.destroy(),(0,i.T)(s.current,{config:a,...x}).then(e=>{u(e),"function"==typeof d&&d(e)})},[e]),(0,o.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:s,className:t,style:d,"data-height":a})}var l=t("1858"),a=t("3262"),c=t("1705"),h=t("7645"),u=t("8168"),p=t("8228"),m=t("5050");function f(e){let[s,t]=(0,o.useState)(e.js),[r,i]=(0,o.useState)(e.ts),[d,l]=(0,o.useState)(e.react),[f,j]=(0,o.useState)(e.vue),[x,g]=(0,o.useState)(e.svelte),v="3.7rem",[y,b]=(0,o.useState)(!0),[w,C]=(0,o.useState)(v),k=(0,o.useRef)(null),S=()=>{setTimeout(()=>{C(`calc(${k.current.offsetHeight}px + ${v})`)},5),setTimeout(()=>{C(`calc(${k.current.offsetHeight}px + ${v})`)},255)};return(0,o.useEffect)(()=>{if(a.Z.canUseDOM){let e=function(e){let s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===s?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};t(e(s,"js")),i(e(r,"ts")),l(e(d,"jsx")),j(e(f,"html")),g(e(x,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":y,style:{height:y?v:w,overflow:"hidden",willChange:"height",transition:`height ${y?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!y),S()},children:"show code"}),(0,n.jsx)("div",{ref:k,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:S},children:(0,n.jsx)(c.Z,{language:"js",children:s})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:S},children:(0,n.jsx)(c.Z,{language:"ts",children:r})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:S},children:(0,n.jsx)(c.Z,{language:"jsx",children:d})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:S},children:(0,n.jsx)(c.Z,{language:"html",children:f})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:S},children:(0,n.jsx)(c.Z,{language:"html",children:x})})]})})})]})}function j(e){let{className:s,style:t,showCode:o,height:i,...a}=e,{colorMode:c}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(a)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(a)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(a)}; + return (); +} + +`.trimStart(),j=` + + + +`,x=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(d,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(f,{js:u,ts:p,react:m,vue:j,svelte:x})]})}},8294:function(e,s,t){t.d(s,{T:function(){return r},r:function(){return o}});var n=t(7728);async function r(e){let s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(s=e,e=null);let{config:t={},headless:n,loading:r="lazy",view:i}=s,d=n||"headless"===i,l=null,a=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(d&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(d)S(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(o(s)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",d?"eager":r);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof t&&Object.keys(t).length>0&&c.searchParams.set("config","sdk");let p=s.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,f="Cannot call API methods after calling `destroy()`.",j=await new Promise(e=>{if(!l)return;let s=l.dataset.height||l.style.height;if(s&&!d){let e=isNaN(Number(s))?s:s+"px";l.style.height=e}"false"===l.dataset.defaultStyles||d||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",o=l.querySelector(`iframe.${n}`),i=o||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===r?"eager":"lazy"),d?S(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(s){s.source===i.contentWindow&&s.origin===h&&s.data?.type==="livecodes-init"&&(removeEventListener("message",e),a=Number(s.data.payload.appVersion.replace(/^v/,"")))}),(!a||a<46)&&addEventListener("message",function e(s){s.source===i.contentWindow&&s.origin===h&&s.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:t},h))}),i.onload=()=>{e(i)},i.src=c.href,o||l.appendChild(i)}),x=new Promise(e=>{addEventListener("message",function s(t){t.source===j.contentWindow&&t.origin===h&&t.data?.type==="livecodes-ready"&&(removeEventListener("message",s),e(),x.settled=!0)})}),g=()=>m?Promise.reject(f):new Promise(async e=>{x.settled&&e(),j.contentWindow?.postMessage({type:"livecodes-load"},h),await x,e()}),v=(e,s)=>new Promise(async(t,n)=>{if(m)return n(f);await g();let r=N();addEventListener("message",function s(o){if(o.source===j.contentWindow&&o.origin===h&&o.data?.type==="livecodes-api-response"&&o.data?.id===r&&o.data.method===e){removeEventListener("message",s);let e=o.data.payload;e?.error?n(e.error):t(e)}}),j.contentWindow?.postMessage({method:e,id:r,args:s},h)}),y={},b=["load","ready","code","console","tests","destroy"],w=(e,s)=>{if(m)throw Error(f);return b.includes(e)?(v("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(s),{remove:()=>{y[e]=y[e]?.filter(e=>e!==s),y[e]?.length===0&&v("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},C=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let s=C(e.data?.type??"");if(e.source!==j.contentWindow||e.origin!==h||!s||!y[s])return;let t=e.data?.payload;y[s]?.forEach(e=>{e(t)})});let k=()=>{Object.values(y).forEach(e=>{e.length=0}),j?.remove?.(),m=!0};function S(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,s)=>{e.forEach(async e=>{e.isIntersecting&&(await g(),s.unobserve(l))})},{rootMargin:"150px"}).observe(l);let N=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>g(),run:()=>v("run"),format:e=>v("format",[e]),getShareUrl:e=>v("getShareUrl",[e]),getConfig:e=>v("getConfig",[e]),setConfig:e=>v("setConfig",[e]),getCode:()=>v("getCode"),show:(e,s)=>v("show",[e,s]),runTests:()=>v("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var s=arguments.length,t=Array(s>1?s-1:0),n=1;nx.settled?v("destroy").then(k):m?Promise.reject(f):(k(),Promise.resolve())}}function o(){let e,s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:t="https://livecodes.io",params:r={},config:o={},headless:i,import:d,lite:l,view:a,...c}=s;try{e=new URL(t)}catch{throw Error(`${t} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(s=>{let[t,n]=s;void 0!==n&&e.searchParams.set(t,String(n))});let u="headless"===s.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),a&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==a?o.view=a:e.searchParams.set("view",a)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(o))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(s=>{e.searchParams.set(s,encodeURIComponent(String(r[s])))})}return d&&e.searchParams.set("x",encodeURIComponent(d)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,s,t){t.d(s,{Z:function(){return d},a:function(){return i}});var n=t(7294);let r={},o=n.createContext(r);function i(e){let s=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function d(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/5a7c91e2.1087e16d.js b/docs/assets/js/5a7c91e2.1087e16d.js new file mode 100644 index 0000000..759f386 --- /dev/null +++ b/docs/assets/js/5a7c91e2.1087e16d.js @@ -0,0 +1,68 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5961"],{8930:function(e,n,s){s.r(n),s.d(n,{getPlaygroundUrlDemo:()=>h,sdkDemo:()=>p,default:()=>j,frontMatter:()=>d,metadata:()=>r,assets:()=>c,toc:()=>u,contentTitle:()=>a});var r=JSON.parse('{"id":"sdk/js-ts","title":"JS/TS SDK","description":"This is the core SDK on which others (React, Vue, and Svelte SDKs) are build on top. It is a light-weight (less than 5kb gzipped), zero-dependencies library that allows creating, embedding and communication with LiveCodes playgrounds. It also allows easily creating links to playgrounds.","source":"@site/docs/sdk/js-ts.mdx","sourceDirName":"sdk","slug":"/sdk/js-ts","permalink":"/docs/sdk/js-ts","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/sdk/js-ts.mdx","tags":[],"version":"current","frontMatter":{"title":"JS/TS SDK"},"sidebar":"docsSidebar","previous":{"title":"LiveCodes SDK","permalink":"/docs/sdk/"},"next":{"title":"React SDK","permalink":"/docs/sdk/react"}}'),o=s("5893"),t=s("65"),l=s("3365"),i=s("8500");let d={title:"JS/TS SDK"},a="JavaScript/TypeScript SDK",c={},h={html:`
# Hello World!
+Open in playground +`},p={js:`import { createPlayground } from "livecodes"; + +const params = { + html: "

Hello World!

", + css: "h1 {color: blue;}", + js: 'console.log("Hello, LiveCodes!")', + console: "open", +}; + +createPlayground('#container', { params }); +`,html:'
'},u=[{value:"Installation",id:"installation",level:2},{value:"TypeScript Types",id:"typescript-types",level:2},{value:"createPlayground",id:"createplayground",level:2},{value:"Multiple Sources",id:"multiple-sources",level:3},{value:"getPlaygroundUrl",id:"getplaygroundurl",level:2},{value:"Embed Options",id:"embed-options",level:2},{value:"appUrl",id:"appurl",level:3},{value:"config",id:"config",level:3},{value:"headless",id:"headless",level:3},{value:"import",id:"import",level:3},{value:"loading",id:"loading",level:3},{value:"params",id:"params",level:3},{value:"template",id:"template",level:3},{value:"SDK Methods",id:"sdk-methods",level:2},{value:"load",id:"load",level:3},{value:"run",id:"run",level:3},{value:"format",id:"format",level:3},{value:"getShareUrl",id:"getshareurl",level:3},{value:"getConfig",id:"getconfig",level:3},{value:"setConfig",id:"setconfig",level:3},{value:"getCode",id:"getcode",level:3},{value:"show",id:"show",level:3},{value:"runTests",id:"runtests",level:3},{value:"watch",id:"watch",level:3},{value:"onChange",id:"onchange",level:3},{value:"exec",id:"exec",level:3},{value:"destroy",id:"destroy",level:3},{value:"Styles",id:"styles",level:2},{value:"Default Styles",id:"default-styles",level:3},{value:"Height",id:"height",level:3},{value:"Demo",id:"demo",level:2},{value:"Related",id:"related",level:2}];function g(e){let n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,t.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsxs)(n.h1,{id:"javascripttypescript-sdk",children:["JavaScript/",(0,o.jsx)("wbr",{}),"TypeScript SDK"]})}),"\n","\n",(0,o.jsxs)(n.p,{children:["This is the core SDK on which others (",(0,o.jsx)(n.a,{href:"/docs/sdk/react",children:"React"}),", ",(0,o.jsx)(n.a,{href:"/docs/sdk/vue",children:"Vue"}),", and ",(0,o.jsx)(n.a,{href:"/docs/sdk/svelte",children:"Svelte"})," SDKs) are build on top. It is a light-weight (",(0,o.jsx)(n.a,{href:"https://bundlephobia.com/package/livecodes",children:"less than 5kb gzipped"}),"), zero-dependencies library that allows creating, embedding and communication with LiveCodes playgrounds. It also allows easily creating links to playgrounds."]}),"\n",(0,o.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,o.jsxs)(n.p,{children:["Please refer to the ",(0,o.jsx)(n.a,{href:"/docs/sdk/#installation",children:"SDK installation"})," section."]}),"\n",(0,o.jsx)(n.admonition,{type:"info",children:(0,o.jsxs)(n.p,{children:["In the full ",(0,o.jsx)(n.a,{href:"/docs/getting-started#standalone-app",children:"standalone app"}),", the JavaScript SDK is accessible via the global variable ",(0,o.jsx)(n.code,{children:"livecodes"}),", which can be interacted with in the browser console."]})}),"\n",(0,o.jsx)(n.h2,{id:"typescript-types",children:"TypeScript Types"}),"\n",(0,o.jsxs)(n.p,{children:["TypeScript types are ",(0,o.jsx)(n.a,{href:"/docs/api/globals",children:"documented here"})," and can be imported from the library."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:"import type { EmbedOptions, Playground } from 'livecodes';\n"})}),"\n",(0,o.jsx)(n.p,{children:"The following 2 functions are exported by the library:"}),"\n",(0,o.jsx)(n.h2,{id:"createplayground",children:(0,o.jsx)(n.code,{children:"createPlayground"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/functions/createPlayground",children:(0,o.jsx)(n.code,{children:"(container: string | Element, options?: EmbedOptions) => Promise"})})]}),"\n",(0,o.jsxs)(n.p,{children:["The library exports the function ",(0,o.jsx)(n.code,{children:"createPlayground"})," which has 2 parameters:"]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"container"})," (required): ",(0,o.jsx)(n.code,{children:"HTMLElement"})," or a string representing a CSS selector. This is the container where the playground is rendered.\nIf not found, an error is thrown (except in ",(0,o.jsx)(n.a,{href:"/docs/sdk/headless",children:"headless mode"}),", in which this parameter is optional and can be omitted)."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"options"})," (optional): an object with embed options (",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/EmbedOptions",children:"EmbedOptions"}),")."]}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"createPlayground"})," function returns a promise which resolves to an object that exposes the SDK methods (",(0,o.jsx)(n.a,{href:"/docs/api/interfaces/Playground",children:"Playground"}),")."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-ts",children:"import { createPlayground, type EmbedOptions } from 'livecodes';\n\nconst options: EmbedOptions = {\n // appUrl: ...\n // config: ...\n // headless: ...\n // import: ...\n // loading: ...\n // params: ...\n // template: ...\n};\n\ncreatePlayground('#container', options).then((playground) => {\n // the `playground` object exposes the SDK methods\n // e.g. playground.run()\n});\n"})}),"\n",(0,o.jsxs)(n.admonition,{title:"Throws",type:"caution",children:[(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"createPlayground"})," function throws an error (promise is rejected) in any of the following conditions:"]}),(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["The first parameter (",(0,o.jsx)(n.a,{href:"#createplayground",children:(0,o.jsx)(n.code,{children:"container"})}),") is not an element or not found (by CSS selector), except in ",(0,o.jsx)(n.a,{href:"/docs/sdk/headless",children:"headless mode"}),"."]}),"\n",(0,o.jsxs)(n.li,{children:["The embed option ",(0,o.jsx)(n.a,{href:"#appurl",children:(0,o.jsx)(n.code,{children:"appUrl"})})," is supplied and is not a valid URL."]}),"\n",(0,o.jsxs)(n.li,{children:["The embed option ",(0,o.jsx)(n.a,{href:"#config",children:(0,o.jsx)(n.code,{children:"config"})})," is supplied and is not an object or a valid URL."]}),"\n",(0,o.jsxs)(n.li,{children:["Any of the ",(0,o.jsx)(n.a,{href:"#sdk-methods",children:"SDK methods"})," was called after calling the ",(0,o.jsx)(n.a,{href:"#destroy",children:(0,o.jsx)(n.code,{children:"destroy"})})," method."]}),"\n"]})]}),"\n",(0,o.jsx)(n.h3,{id:"multiple-sources",children:"Multiple Sources"}),"\n",(0,o.jsxs)(n.p,{children:["When multiple sources are provided in the ",(0,o.jsx)(n.a,{href:"#embed-options",children:"embed options"}),", each is converted to a ",(0,o.jsx)(n.a,{href:"/docs/configuration/configuration-object",children:"configuration object"})," and the properties are merged.\nIn case there are conflicts between the properties of the configurations, they are overridden in the following order:"]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.a,{href:"#template",children:(0,o.jsx)(n.code,{children:"template"})})," (lowest precedence)"]}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"#import",children:(0,o.jsx)(n.code,{children:"import"})})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"#config",children:(0,o.jsx)(n.code,{children:"config"})})}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.a,{href:"#params",children:(0,o.jsx)(n.code,{children:"params"})})," (highest precedence)"]}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"getplaygroundurl",children:(0,o.jsx)(n.code,{children:"getPlaygroundUrl"})}),"\n",(0,o.jsxs)(n.p,{children:["Type: ",(0,o.jsx)(n.a,{href:"/docs/api/functions/getPlaygroundUrl",children:(0,o.jsx)(n.code,{children:"(options?: EmbedOptions) => string"})})]}),"\n",(0,o.jsxs)(n.p,{children:["Gets the URL to playground (as a string) from the provided ",(0,o.jsx)(n.a,{href:"#embed-options",children:"options"}),". This can be useful for providing links to run code in playgrounds."]}),"\n",(0,o.jsx)(n.p,{children:"Example:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:'
# Hello World!
\nOpen in playground\n + + +`,m=` + + +
+ +`.trimStart();return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(i,{className:`container_Egsj ${e.className}`,style:{height:l||"50vh",...e.style},appUrl:d.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,r.jsx)(j,{js:p,ts:u,react:g,vue:x,svelte:m})]})}},8500:function(e,n,s){s.d(n,{Z:()=>a});var r=s("5893");s("7294");var o=s("6735");function t(e){let{children:n,fallback:s}=e;return(0,o.Z)()?(0,r.jsx)(r.Fragment,{children:n?.()}):s??null}var l=s("1705"),i=s("8294"),d=s("1858");function a(e){let{params:n,config:s,code:o,language:a="js",codeTitle:c="",showLineNumbers:h=!1,formatCode:p=!0,linkText:u="Run in LiveCodes",style:g={},className:j=""}=e,x=(0,i.r)({appUrl:d.G,params:n,config:s});return(0,r.jsxs)("div",{style:{marginBottom:"30px",...g},className:j,children:[o&&(0,r.jsx)(t,{children:()=>(0,r.jsx)(l.Z,{language:a,title:c,showLineNumbers:h,children:p?function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===n?"html":"babel",plugins:window.prettierPlugins})}(o,a):o})}),(0,r.jsxs)("a",{href:x,target:"_blank",rel:"noreferrer",children:[u,(0,r.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,r.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,n,s){s.d(n,{T:function(){return o},r:function(){return t}});var r=s(7728);async function o(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(n=e,e=null);let{config:s={},headless:r,loading:o="lazy",view:l}=n,i=r||"headless"===l,d=null,a=null;if("string"==typeof e)d=document.querySelector(e);else if(e instanceof HTMLElement)d=e;else if(!(i&&"object"==typeof e))throw Error("A valid container element is required.");if(!d){if(i)k(d=document.createElement("div")),document.body.appendChild(d);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(t(n)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",i?"eager":o);let p=globalThis.process;c.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let u=n.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(u[e])))});let g=!1,j="Cannot call API methods after calling `destroy()`.",x=await new Promise(e=>{if(!d)return;let n=d.dataset.height||d.style.height;if(n&&!i){let e=isNaN(Number(n))?n:n+"px";d.style.height=e}"false"===d.dataset.defaultStyles||i||(d.style.backgroundColor||="#fff",d.style.border||="1px solid black",d.style.borderRadius||="8px",d.style.boxSizing||="border-box",d.style.padding||="0",d.style.width||="100%",d.style.height||=d.style.height||"300px",d.style.minHeight="200px",d.style.flexGrow="1",d.style.overflow||="hidden",d.style.resize||="vertical");let r="livecodes",t=d.querySelector(`iframe.${r}`),l=t||document.createElement("iframe");l.classList.add(r),l.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),l.setAttribute("allowtransparency","true"),l.setAttribute("allowpaymentrequest","true"),l.setAttribute("allowfullscreen","true"),l.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),l.setAttribute("loading","eager"===o?"eager":"lazy"),i?k(l):(l.style.height="100%",l.style.minHeight="200px",l.style.width="100%",l.style.margin="0",l.style.border="0",l.style.borderRadius=d.style.borderRadius),addEventListener("message",function e(n){n.source===l.contentWindow&&n.origin===h&&n.data?.type==="livecodes-init"&&(removeEventListener("message",e),a=Number(n.data.payload.appVersion.replace(/^v/,"")))}),(!a||a<46)&&addEventListener("message",function e(n){n.source===l.contentWindow&&n.origin===h&&n.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),l.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),l.onload=()=>{e(l)},l.src=c.href,t||d.appendChild(l)}),m=new Promise(e=>{addEventListener("message",function n(s){s.source===x.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",n),e(),m.settled=!0)})}),f=()=>g?Promise.reject(j):new Promise(async e=>{m.settled&&e(),x.contentWindow?.postMessage({type:"livecodes-load"},h),await m,e()}),y=(e,n)=>new Promise(async(s,r)=>{if(g)return r(j);await f();let o=T();addEventListener("message",function n(t){if(t.source===x.contentWindow&&t.origin===h&&t.data?.type==="livecodes-api-response"&&t.data?.id===o&&t.data.method===e){removeEventListener("message",n);let e=t.data.payload;e?.error?r(e.error):s(e)}}),x.contentWindow?.postMessage({method:e,id:o,args:n},h)}),v={},w=["load","ready","code","console","tests","destroy"],b=(e,n)=>{if(g)throw Error(j);return w.includes(e)?(y("watch",[e]),v[e]||(v[e]=[]),v[e]?.push(n),{remove:()=>{v[e]=v[e]?.filter(e=>e!==n),v[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},P=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let n=P(e.data?.type??"");if(e.source!==x.contentWindow||e.origin!==h||!n||!v[n])return;let s=e.data?.payload;v[n]?.forEach(e=>{e(s)})});let S=()=>{Object.values(v).forEach(e=>{e.length=0}),x?.remove?.(),g=!0};function k(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,n)=>{e.forEach(async e=>{e.isIntersecting&&(await f(),n.unobserve(d))})},{rootMargin:"150px"}).observe(d);let T=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>f(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,n)=>y("show",[e,n]),runTests:()=>y("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var n=arguments.length,s=Array(n>1?n-1:0),r=1;rm.settled?y("destroy").then(S):g?Promise.reject(j):(S(),Promise.resolve())}}function t(){let e,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:o={},config:t={},headless:l,import:i,lite:d,view:a,...c}=n;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(n=>{let[s,r]=n;void 0!==r&&e.searchParams.set(s,String(r))});let p="headless"===n.view||l;if(d&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof t&&null==t.mode?t.mode="lite":e.searchParams.set("lite","true")),a&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof t&&null==t.view&&"headless"!==a?t.view=a:e.searchParams.set("view",a)),"string"==typeof t)try{new URL(t),e.searchParams.set("config",encodeURIComponent(t))}catch{throw Error('"config" is not a valid URL or configuration object.')}else t&&"object"==typeof t&&Object.keys(t).length>0&&(t.title&&"Untitled Project"!==t.title&&e.searchParams.set("title",t.title),t.description&&t.description.length>0&&e.searchParams.set("description",t.description),h.set("config","code/"+(0,r.compressToEncodedURIComponent)(JSON.stringify(t))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{h.set("params",(0,r.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(n=>{e.searchParams.set(n,encodeURIComponent(String(o[n])))})}return i&&e.searchParams.set("x",encodeURIComponent(i)),p&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,n,s){s.d(n,{Z:function(){return i},a:function(){return l}});var r=s(7294);let o={},t=r.createContext(o);function l(e){let n=r.useContext(t);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),r.createElement(t.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/5ab9470d.5bfc76fd.js b/docs/assets/js/5ab9470d.5bfc76fd.js new file mode 100644 index 0000000..69f4ae9 --- /dev/null +++ b/docs/assets/js/5ab9470d.5bfc76fd.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3200"],{1900:function(e,n,t){t.r(n),t.d(n,{default:()=>h,frontMatter:()=>o,metadata:()=>s,assets:()=>c,toc:()=>i,contentTitle:()=>d});var s=JSON.parse('{"id":"features/command-menu","title":"Command Menu","description":"The command menu allows running a large set of commands from the UI. It is keyboard-friendly and allows for searching and selecting commands. Most of the functionality of LiveCodes can be achieved using the command menu, which can really improve productivity and DX.","source":"@site/docs/features/command-menu.mdx","sourceDirName":"features","slug":"/features/command-menu","permalink":"/docs/features/command-menu","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/command-menu.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Code Format","permalink":"/docs/features/code-format"},"next":{"title":"Keyboard Shortcuts","permalink":"/docs/features/keyboard-shortcuts"}}'),a=t("5893"),r=t("65");let o={},d="Command Menu",c={},i=[{value:"Using the Command Menu",id:"using-the-command-menu",level:2},{value:"Keyboard Shortcuts",id:"keyboard-shortcuts",level:2}];function m(e){let n={a:"a",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.header,{children:(0,a.jsx)(n.h1,{id:"command-menu",children:"Command Menu"})}),"\n",(0,a.jsx)(n.p,{children:"The command menu allows running a large set of commands from the UI. It is keyboard-friendly and allows for searching and selecting commands. Most of the functionality of LiveCodes can be achieved using the command menu, which can really improve productivity and DX."}),"\n",(0,a.jsxs)(n.p,{children:["It can be triggered from the keyboard by pressing ",(0,a.jsx)("kbd",{children:"Ctrl"})," + ",(0,a.jsx)("kbd",{children:"K"})," (or ",(0,a.jsx)("kbd",{children:"\u2318"})," + ",(0,a.jsx)("kbd",{children:"K"})," on Mac), or from the Help Menu."]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"Open Command Menu from UI",src:t(1639).Z+"",width:"1124",height:"855"})}),"\n",(0,a.jsxs)(n.p,{children:["The available commands cover a wide range of functionality, like showing and hiding UI elements (e.g. different editors, the ",(0,a.jsx)(n.a,{href:"/docs/features/result",children:"result page"}),", ",(0,a.jsx)(n.a,{href:"/docs/features/console",children:"console"}),", ",(0,a.jsx)(n.a,{href:"/docs/features/compiled-code",children:"compiled code viewer"}),", and ",(0,a.jsx)(n.a,{href:"/docs/features/tests",children:"tests"}),"), changing ",(0,a.jsx)(n.a,{href:"../languages",children:"languages"}),", loading ",(0,a.jsx)(n.a,{href:"/docs/features/templates",children:"starter templates"}),", opening different screens (e.g. new project, opening saved projects, ",(0,a.jsx)(n.a,{href:"/docs/features/import",children:"import"}),", ",(0,a.jsx)(n.a,{href:"/docs/features/embeds",children:"embeds"}),", ",(0,a.jsx)(n.a,{href:"/docs/features/deploy",children:"deploy"}),", ",(0,a.jsx)(n.a,{href:"/docs/features/share",children:"share"})," and more).\nIn addition many commands can be executed from the command menu, such as running code, formatting code, changing settings (e.g. autorun, autosave, ",(0,a.jsx)(n.a,{href:"/docs/features/ai",children:"AI code assistant"}),", changing ",(0,a.jsx)(n.a,{href:"/docs/features/themes",children:"themes"}),", ",(0,a.jsx)(n.a,{href:"/docs/features/editor-settings",children:"editor settings"}),", and more)."]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"LiveCodes Command Menu",src:t(3295).Z+"",width:"2240",height:"1400"})}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"LiveCodes Command Menu",src:t(3100).Z+"",width:"2240",height:"1400"})}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"LiveCodes Command Menu",src:t(144).Z+"",width:"2240",height:"1400"})}),"\n",(0,a.jsx)(n.h2,{id:"using-the-command-menu",children:"Using the Command Menu"}),"\n",(0,a.jsx)(n.p,{children:"Commands can be navigated and selected by:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"The mouse: scrolling and clicking"}),"\n",(0,a.jsxs)(n.li,{children:["The keyboard: using the up and down arrow keys to navigate, pressing ",(0,a.jsx)("kbd",{children:"Enter"})," to select, ",(0,a.jsx)("kbd",{children:"Backspace"})," to move to parent category and ",(0,a.jsx)("kbd",{children:"Esc"})," to close the command menu."]}),"\n",(0,a.jsx)(n.li,{children:"Searching: typing in the search box for fuzzy search."}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"LiveCodes Command Menu",src:t(553).Z+"",width:"2240",height:"1400"})}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"LiveCodes Command Menu",src:t(4386).Z+"",width:"2240",height:"1400"})}),"\n",(0,a.jsx)(n.h2,{id:"keyboard-shortcuts",children:"Keyboard Shortcuts"}),"\n",(0,a.jsx)(n.p,{children:'If a command has a keyboard shortcut, it will be shown in the command menu. In addition, the whole list of keyboard shortcuts can be opened from the command menu (by searching for "Keyboard Shortcuts") or from the UI from the Help Menu.'}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"Keyboard Shortcuts",src:t(715).Z+"",width:"2240",height:"1400"})})]})}function h(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(m,{...e})}):m(e)}},1639:function(e,n,t){t.d(n,{Z:function(){return s}});let s=t.p+"assets/images/command-menu-1-9615cfd905b81e9239c845a65817c456.jpg"},3295:function(e,n,t){t.d(n,{Z:function(){return s}});let s=t.p+"assets/images/command-menu-2-eab7bd92c43517f9dc3a780054cec43b.jpg"},3100:function(e,n,t){t.d(n,{Z:function(){return s}});let s=t.p+"assets/images/command-menu-3-7f55b3742e75415102d126c483b136ea.jpg"},144:function(e,n,t){t.d(n,{Z:function(){return s}});let s=t.p+"assets/images/command-menu-4-1baba58dee0327ec984be1ebd859ef72.jpg"},553:function(e,n,t){t.d(n,{Z:function(){return s}});let s=t.p+"assets/images/command-menu-5-35e9ed4d907baa9e407203cd3b7259d5.jpg"},4386:function(e,n,t){t.d(n,{Z:function(){return s}});let s=t.p+"assets/images/command-menu-6-c24403565a26eaa0df88f7b2f3cf74cc.jpg"},715:function(e,n,t){t.d(n,{Z:function(){return s}});let s=t.p+"assets/images/keyboard-shortcuts-708a9ca16ed79cd65ab100291a7e946a.jpg"},65:function(e,n,t){t.d(n,{Z:function(){return d},a:function(){return o}});var s=t(7294);let a={},r=s.createContext(a);function o(e){let n=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/5ade636b.c55a5e89.js b/docs/assets/js/5ade636b.c55a5e89.js new file mode 100644 index 0000000..59986d7 --- /dev/null +++ b/docs/assets/js/5ade636b.c55a5e89.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4311"],{314:function(e,t,n){n.r(t),n.d(t,{default:()=>l,frontMatter:()=>i,metadata:()=>r,assets:()=>c,toc:()=>u,contentTitle:()=>a});var r=JSON.parse('{"id":"features/integrations","title":"Integrations","description":"","source":"@site/docs/features/integrations.mdx","sourceDirName":"features","slug":"/features/integrations","permalink":"/docs/features/integrations","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/integrations.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"GitHub Integration","permalink":"/docs/features/github-integration"},"next":{"title":"User Management","permalink":"/docs/features/user-management"}}'),s=n("5893"),o=n("65");let i={},a="Integrations",c={},u=[];function d(e){let t={h1:"h1",header:"header",...(0,o.a)(),...e.components};return(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"integrations",children:"Integrations"})})}function l(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},65:function(e,t,n){n.d(t,{Z:function(){return a},a:function(){return i}});var r=n(7294);let s={},o=r.createContext(s);function i(e){let t=r.useContext(o);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/5b239f4f.7503141f.js b/docs/assets/js/5b239f4f.7503141f.js new file mode 100644 index 0000000..23214e7 --- /dev/null +++ b/docs/assets/js/5b239f4f.7503141f.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1899"],{6373:function(e,t,n){n.r(t),n.d(t,{config:()=>c,config2:()=>u,default:()=>g,frontMatter:()=>o,metadata:()=>s,assets:()=>d,params:()=>h,toc:()=>p,contentTitle:()=>l});var s=JSON.parse('{"id":"languages/handlebars","title":"Handlebars","description":"Handlebars: Minimal templating on steroids.","source":"@site/docs/languages/handlebars.mdx","sourceDirName":"languages","slug":"/languages/handlebars","permalink":"/docs/languages/handlebars","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/handlebars.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Haml","permalink":"/docs/languages/haml"},"next":{"title":"HTML","permalink":"/docs/languages/html"}}'),r=n("5893"),a=n("65"),i=n("3365");let o={},l="Handlebars",d={},c={markup:{language:"handlebars",content:"Hello {{name}}!"},customSettings:{template:{data:{name:"LiveCodes"}}}},h={compiled:"open"},u={markup:{language:"handlebars",content:"Hello {{name}}!"},script:{language:"javascript",content:'window.livecodes.templateData = { name: "LiveCodes" };'},customSettings:{template:{prerender:!1}},activeEditor:"script"},p=[{value:"Usage",id:"usage",level:2},{value:"Pre-rendered (Default)",id:"pre-rendered-default",level:3},{value:"Dynamic",id:"dynamic",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Pre-rendered",id:"pre-rendered",level:3},{value:"Dynamic",id:"dynamic-1",level:3},{value:"Links",id:"links",level:2}];function m(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"handlebars",children:"Handlebars"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://handlebarsjs.com/",children:"Handlebars"}),": Minimal templating on steroids."]}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.p,{children:"There are 2 modes for rendering:"}),"\n",(0,r.jsx)(t.h3,{id:"pre-rendered-default",children:"Pre-rendered (Default)"}),"\n",(0,r.jsxs)(t.p,{children:["The values of the expressions are evaluated and added to the template during compilation of the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["The values of all expressions should be supplied in advance using ",(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," to the property ",(0,r.jsx)(t.code,{children:"template.data"})," which accepts an object of key-value pairs."]}),"\n",(0,r.jsxs)(t.p,{children:["Example: This provides the value of the expression ",(0,r.jsx)(t.code,{children:"name"})]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "data": {\n "name": "LiveCodes"\n }\n }\n}\n'})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"#pre-rendered",children:"Full example below"})}),"\n",(0,r.jsx)(t.h3,{id:"dynamic",children:"Dynamic"}),"\n",(0,r.jsxs)(t.p,{children:["To use this mode, the property ",(0,r.jsx)(t.code,{children:"template.prerender"})," in ",(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," should be set to ",(0,r.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "prerender": false\n }\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," runtime."]}),"\n",(0,r.jsxs)(t.p,{children:["This can be achieved in JavaScript (or any ",(0,r.jsx)(t.a,{href:"/docs/languages/",children:"language"})," that compiles to it) by assigning ",(0,r.jsx)(t.code,{children:"window.livecodes.templateData"})," to an object with the data."]}),"\n",(0,r.jsxs)(t.p,{children:["Please note that template rendering occurs on ",(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event",children:"page load"}),", so the assignment must occur before that."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:'title="Script Editor (JS)"',children:"window.livecodes.templateData = { name: 'LiveCodes' };\n"})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"#dynamic-1",children:"Full example below"})}),"\n",(0,r.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"handlebars"})}),"\n",(0,r.jsx)(t.h3,{id:"extensions",children:"Extensions"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:".hbs"}),", ",(0,r.jsx)(t.code,{children:".handlebars"})]}),"\n",(0,r.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"markup"})}),"\n",(0,r.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsxs)(t.p,{children:["The official ",(0,r.jsx)(t.a,{href:"https://www.npmjs.com/package/handlebars",children:"handlebars compiler"}),"."]}),"\n",(0,r.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"handlebars"}),": v4.7.8"]}),"\n",(0,r.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsxs)(t.p,{children:["Using ",(0,r.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,r.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,r.jsx)(t.code,{children:"handlebars"})," are passed as a JSON object to the ",(0,r.jsx)(t.a,{href:"https://handlebarsjs.com/api-reference/compilation.html#handlebars-compile-template-options",children:(0,r.jsx)(t.code,{children:"compile"})})," method during compile. Please check the ",(0,r.jsx)(t.a,{href:"https://handlebarsjs.com/api-reference/compilation.html#handlebars-compile-template-options",children:"documentation"})," for full reference."]}),"\n",(0,r.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Example:"})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "handlebars": {\n "preventIndent": true\n }\n}\n'})}),"\n",(0,r.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n",(0,r.jsx)(t.h3,{id:"pre-rendered",children:"Pre-rendered"}),"\n","\n","\n",(0,r.jsx)(i.Z,{config:c,params:h}),"\n",(0,r.jsx)(t.h3,{id:"dynamic-1",children:"Dynamic"}),"\n","\n",(0,r.jsx)(i.Z,{config:u}),"\n",(0,r.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://handlebarsjs.com/",children:"Official website"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://handlebarsjs.com/guide/",children:"Language guide"})}),"\n"]})]})}function g(e={}){let{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},3365:function(e,t,n){n.d(t,{Z:()=>f});var s=n("5893"),r=n("4200"),a=n("7294"),i=n("8294");function o(e){let t=(0,a.useRef)(null),[n,r]=(0,a.useState)(e.className||""),[o,l]=(0,a.useState)(e.style||{}),[d,c]=(0,a.useState)(e.height),[h,u]=(0,a.useState)(),[p,m]=(0,a.useState)(JSON.stringify(e.config||"")),[g,f]=(0,a.useState)("");return(0,a.useEffect)(()=>{if(!t.current)return;let{className:n,style:s,height:a,sdkReady:o,config:d,...v}=e;if(r(n||""),l(s||{}),c(a),h&&g===JSON.stringify(v)){if(p===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(v)),h?.destroy(),(0,i.T)(t.current,{config:d,...v}).then(e=>{u(e),"function"==typeof o&&o(e)})},[e]),(0,a.useEffect)(()=>()=>{h?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:n,style:o,"data-height":d})}var l=n("1858"),d=n("3262"),c=n("1705"),h=n("7645"),u=n("8168"),p=n("8228"),m=n("5050");function g(e){let[t,n]=(0,a.useState)(e.js),[r,i]=(0,a.useState)(e.ts),[o,l]=(0,a.useState)(e.react),[g,f]=(0,a.useState)(e.vue),[v,j]=(0,a.useState)(e.svelte),x="3.7rem",[y,b]=(0,a.useState)(!0),[w,S]=(0,a.useState)(x),C=(0,a.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},255)};return(0,a.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};n(e(t,"js")),i(e(r,"ts")),l(e(o,"jsx")),f(e(g,"html")),j(e(v,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":y,style:{height:y?x:w,overflow:"hidden",willChange:"height",transition:`height ${y?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{b(!y),E()},children:"show code"}),(0,s.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:m.Z.collapsibleContent,children:(0,s.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,s.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"js",children:t})}),(0,s.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"ts",children:r})}),(0,s.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"jsx",children:o})}),(0,s.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"html",children:g})}),(0,s.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:n,showCode:a,height:i,...d}=e,{colorMode:c}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (); +} + +`.trimStart(),f=` + + + +`,v=` + + +
+ +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(o,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(g,{js:u,ts:p,react:m,vue:f,svelte:v})]})}},8294:function(e,t,n){n.d(t,{T:function(){return r},r:function(){return a}});var s=n(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:s,loading:r="lazy",view:i}=t,o=s||"headless"===i,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(o&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(o)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(a(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",o?"eager":r);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!o){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||o||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",a=l.querySelector(`iframe.${s}`),i=a||document.createElement("iframe");i.classList.add(s),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===r?"eager":"lazy"),o?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),i.onload=()=>{e(i)},i.src=c.href,a||l.appendChild(i)}),v=new Promise(e=>{addEventListener("message",function t(n){n.source===f.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),j=()=>m?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),x=(e,t)=>new Promise(async(n,s)=>{if(m)return s(g);await j();let r=P();addEventListener("message",function t(a){if(a.source===f.contentWindow&&a.origin===h&&a.data?.type==="livecodes-api-response"&&a.data?.id===r&&a.data.method===e){removeEventListener("message",t);let e=a.data.payload;e?.error?s(e.error):n(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},h)}),y={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return b.includes(e)?(x("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!y[t])return;let n=e.data?.payload;y[t]?.forEach(e=>{e(n)})});let C=()=>{Object.values(y).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;sv.settled?x("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function a(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:r={},config:a={},headless:i,import:o,lite:l,view:d,...c}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let u="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof a&&null==a.mode?a.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof a&&null==a.view&&"headless"!==d?a.view=d:e.searchParams.set("view",d)),"string"==typeof a)try{new URL(a),e.searchParams.set("config",encodeURIComponent(a))}catch{throw Error('"config" is not a valid URL or configuration object.')}else a&&"object"==typeof a&&Object.keys(a).length>0&&(a.title&&"Untitled Project"!==a.title&&e.searchParams.set("title",a.title),a.description&&a.description.length>0&&e.searchParams.set("description",a.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(a))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return o&&e.searchParams.set("x",encodeURIComponent(o)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return o},a:function(){return i}});var s=n(7294);let r={},a=s.createContext(r);function i(e){let t=s.useContext(a);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/5cb8df13.481b5d52.js b/docs/assets/js/5cb8df13.481b5d52.js new file mode 100644 index 0000000..82aada8 --- /dev/null +++ b/docs/assets/js/5cb8df13.481b5d52.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3397"],{919:function(e,t,s){s.r(t),s.d(t,{default:()=>p,frontMatter:()=>a,metadata:()=>o,assets:()=>c,toc:()=>d,contentTitle:()=>l});var o=JSON.parse('{"id":"examples/display-modes/result","title":"result","description":"","source":"@site/docs/examples/display-modes/result.mdx","sourceDirName":"examples/display-modes","slug":"/examples/display-modes/result","permalink":"/docs/examples/display-modes/result","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/examples/display-modes/result.mdx","tags":[],"version":"current","frontMatter":{"title":"result"},"sidebar":"examplesSidebar","previous":{"title":"codeblock","permalink":"/docs/examples/display-modes/codeblock"}}'),r=s("5893"),n=s("65"),i=s("3365");let a={title:"result"},l="Display Mode: result",c={},d=[];function u(e){let t={h1:"h1",header:"header",...(0,n.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"display-mode-result",children:"Display Mode: result"})}),"\n","\n",(0,r.jsx)(i.Z,{config:{mode:"result"},template:"react"})]})}function p(e={}){let{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},3365:function(e,t,s){s.d(t,{Z:()=>g});var o=s("5893"),r=s("4200"),n=s("7294"),i=s("8294");function a(e){let t=(0,n.useRef)(null),[s,r]=(0,n.useState)(e.className||""),[a,l]=(0,n.useState)(e.style||{}),[c,d]=(0,n.useState)(e.height),[u,p]=(0,n.useState)(),[m,h]=(0,n.useState)(JSON.stringify(e.config||"")),[f,g]=(0,n.useState)("");return(0,n.useEffect)(()=>{if(!t.current)return;let{className:s,style:o,height:n,sdkReady:a,config:c,...y}=e;if(r(s||""),l(o||{}),d(n),u&&f===JSON.stringify(y)){if(m===JSON.stringify(c))return;h(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else g(JSON.stringify(y)),u?.destroy(),(0,i.T)(t.current,{config:c,...y}).then(e=>{p(e),"function"==typeof a&&a(e)})},[e]),(0,n.useEffect)(()=>()=>{u?.destroy()},[]),(0,o.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),u=s("7645"),p=s("8168"),m=s("8228"),h=s("5050");function f(e){let[t,s]=(0,n.useState)(e.js),[r,i]=(0,n.useState)(e.ts),[a,l]=(0,n.useState)(e.react),[f,g]=(0,n.useState)(e.vue),[y,v]=(0,n.useState)(e.svelte),w="3.7rem",[b,x]=(0,n.useState)(!0),[j,S]=(0,n.useState)(w),C=(0,n.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},255)};return(0,n.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(r,"ts")),l(e(a,"jsx")),g(e(f,"html")),v(e(y,"html"))}},[]),(0,o.jsxs)("details",{className:`alert alert--info ${h.Z.details} ${m.Z.details}`,"data-collapsed":b,style:{height:b?w:j,overflow:"hidden",willChange:"height",transition:`height ${b?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,o.jsx)("summary",{onClick:()=>{x(!b),E()},children:"show code"}),(0,o.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,o.jsx)("div",{className:h.Z.collapsibleContent,children:(0,o.jsxs)(p.Z,{groupId:"sdk-code",children:[(0,o.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"js",children:t})}),(0,o.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"ts",children:r})}),(0,o.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"jsx",children:a})}),(0,o.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"html",children:f})}),(0,o.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"html",children:y})})]})})})]})}function g(e){let{className:t,style:s,showCode:n,height:i,...c}=e,{colorMode:d}=(0,r.I)(),u=e=>JSON.stringify(e,null,2),p=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),h=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (); +} + +`.trimStart(),g=` + + + +`,y=` + + +
+ +`.trimStart();return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,o.jsx)(f,{js:p,ts:m,react:h,vue:g,svelte:y})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return n}});var o=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:o,loading:r="lazy",view:i}=t,a=o||"headless"===i,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(n(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":r);let p=globalThis.process;d.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let m=t.params;"object"==typeof m&&Object.keys(m).length>0&&JSON.stringify(m).length<1800&&Object.keys(m).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(m[e])))});let h=!1,f="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let o="livecodes",n=l.querySelector(`iframe.${o}`),i=n||document.createElement("iframe");i.classList.add(o),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===r?"eager":"lazy"),a?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),i.onload=()=>{e(i)},i.src=d.href,n||l.appendChild(i)}),y=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>h?Promise.reject(f):new Promise(async e=>{y.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},u),await y,e()}),w=(e,t)=>new Promise(async(s,o)=>{if(h)return o(f);await v();let r=P();addEventListener("message",function t(n){if(n.source===g.contentWindow&&n.origin===u&&n.data?.type==="livecodes-api-response"&&n.data?.id===r&&n.data.method===e){removeEventListener("message",t);let e=n.data.payload;e?.error?o(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:r,args:t},u)}),b={},x=["load","ready","code","console","tests","destroy"],j=(e,t)=>{if(h)throw Error(f);return x.includes(e)?(w("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&w("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==u||!t||!b[t])return;let s=e.data?.payload;b[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(b).forEach(e=>{e.length=0}),g?.remove?.(),h=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>w("run"),format:e=>w("format",[e]),getShareUrl:e=>w("getShareUrl",[e]),getConfig:e=>w("getConfig",[e]),setConfig:e=>w("setConfig",[e]),getCode:()=>w("getCode"),show:(e,t)=>w("show",[e,t]),runTests:()=>w("runTests"),onChange:e=>j("code",e),watch:j,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),o=1;oy.settled?w("destroy").then(C):h?Promise.reject(f):(C(),Promise.resolve())}}function n(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:n={},headless:i,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,o]=t;void 0!==o&&e.searchParams.set(s,String(o))});let p="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof n&&null==n.mode?n.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof n&&null==n.view&&"headless"!==c?n.view=c:e.searchParams.set("view",c)),"string"==typeof n)try{new URL(n),e.searchParams.set("config",encodeURIComponent(n))}catch{throw Error('"config" is not a valid URL or configuration object.')}else n&&"object"==typeof n&&Object.keys(n).length>0&&(n.title&&"Untitled Project"!==n.title&&e.searchParams.set("title",n.title),n.description&&n.description.length>0&&e.searchParams.set("description",n.description),u.set("config","code/"+(0,o.compressToEncodedURIComponent)(JSON.stringify(n))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{u.set("params",(0,o.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),p&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return i}});var o=s(7294);let r={},n=o.createContext(r);function i(e){let t=o.useContext(n);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/5db10118.a2d8ae3d.js b/docs/assets/js/5db10118.a2d8ae3d.js new file mode 100644 index 0000000..4a8ebcd --- /dev/null +++ b/docs/assets/js/5db10118.a2d8ae3d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8160"],{7063:function(e,n,r){r.r(n),r.d(n,{default:()=>h,frontMatter:()=>o,metadata:()=>s,assets:()=>c,toc:()=>a,contentTitle:()=>t});var s=JSON.parse('{"id":"api/functions/createPlayground","title":"Function: createPlayground()","description":"createPlayground(container, options)","source":"@site/docs/api/functions/createPlayground.md","sourceDirName":"api/functions","slug":"/api/functions/createPlayground","permalink":"/docs/api/functions/createPlayground","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/functions/createPlayground.md","tags":[],"version":"current","frontMatter":{}}'),i=r("5893"),d=r("65");let o={},t="Function: createPlayground()",c={},a=[{value:"createPlayground(container, options)",id:"createplaygroundcontainer-options",level:2},{value:"Parameters",id:"parameters",level:3},{value:"Returns",id:"returns",level:3},{value:"Defined in",id:"defined-in",level:3},{value:"createPlayground(options)",id:"createplaygroundoptions",level:2},{value:"Parameters",id:"parameters-1",level:3},{value:"Returns",id:"returns-1",level:3},{value:"Defined in",id:"defined-in-1",level:3}];function l(e){let n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",strong:"strong",ul:"ul",...(0,d.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"function-createplayground",children:"Function: createPlayground()"})}),"\n",(0,i.jsx)(n.h2,{id:"createplaygroundcontainer-options",children:"createPlayground(container, options)"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"createPlayground"}),"(",(0,i.jsx)(n.code,{children:"container"}),", ",(0,i.jsx)(n.code,{children:"options"}),"?): ",(0,i.jsx)(n.code,{children:"Promise"}),"<",(0,i.jsx)(n.a,{href:"/docs/api/interfaces/Playground",children:(0,i.jsx)(n.code,{children:"Playground"})}),">"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Creates a LiveCodes playground."}),"\n",(0,i.jsx)(n.h3,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(n.p,{children:["\u2022 ",(0,i.jsx)(n.strong,{children:"container"}),": ",(0,i.jsx)(n.code,{children:"string"})," | ",(0,i.jsx)(n.code,{children:"HTMLElement"})]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"HTMLElement"})," or a string representing a CSS selector. This is the container where the playground is rendered.\nIf not found, an error is thrown (except in ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/headless",children:"headless mode"}),", in which this parameter is optional and can be omitted)."]}),"\n",(0,i.jsxs)(n.p,{children:["\u2022 ",(0,i.jsx)(n.strong,{children:"options?"}),": ",(0,i.jsx)(n.a,{href:"/docs/api/interfaces/EmbedOptions",children:(0,i.jsx)(n.code,{children:"EmbedOptions"})})]}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts#embed-options",children:"embed options"})," for the playground (optional)."]}),"\n",(0,i.jsx)(n.h3,{id:"returns",children:"Returns"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"Promise"}),"<",(0,i.jsx)(n.a,{href:"/docs/api/interfaces/Playground",children:(0,i.jsx)(n.code,{children:"Playground"})}),">"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["A promise that resolves to a ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/api/interfaces/Playground/",children:(0,i.jsx)(n.code,{children:"Playground"})})," object which exposes many ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/sdk/js-ts/#sdk-methods",children:"SDK methods"})," that can be used to interact with the playground."]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"defined-in",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/index.ts#L26",children:"index.ts:26"})}),"\n",(0,i.jsx)(n.h2,{id:"createplaygroundoptions",children:"createPlayground(options)"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"createPlayground"}),"(",(0,i.jsx)(n.code,{children:"options"}),"): ",(0,i.jsx)(n.code,{children:"Promise"}),"<",(0,i.jsx)(n.a,{href:"/docs/api/interfaces/Playground",children:(0,i.jsx)(n.code,{children:"Playground"})}),">"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"parameters-1",children:"Parameters"}),"\n",(0,i.jsxs)(n.p,{children:["\u2022 ",(0,i.jsx)(n.strong,{children:"options"}),": ",(0,i.jsx)(n.a,{href:"/docs/api/interfaces/EmbedOptions",children:(0,i.jsx)(n.code,{children:"EmbedOptions"})})," & ",(0,i.jsx)(n.code,{children:"object"})]}),"\n",(0,i.jsx)(n.h3,{id:"returns-1",children:"Returns"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"Promise"}),"<",(0,i.jsx)(n.a,{href:"/docs/api/interfaces/Playground",children:(0,i.jsx)(n.code,{children:"Playground"})}),">"]}),"\n",(0,i.jsx)(n.h3,{id:"defined-in-1",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/index.ts#L30",children:"index.ts:30"})})]})}function h(e={}){let{wrapper:n}={...(0,d.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},65:function(e,n,r){r.d(n,{Z:function(){return t},a:function(){return o}});var s=r(7294);let i={},d=s.createContext(i);function o(e){let n=s.useContext(d);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function t(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(d.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/5e8c322a.894b624f.js b/docs/assets/js/5e8c322a.894b624f.js new file mode 100644 index 0000000..8f9e7ee --- /dev/null +++ b/docs/assets/js/5e8c322a.894b624f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6910"],{2340:function(e,s,i){i.r(s),i.d(s,{default:()=>h,frontMatter:()=>d,metadata:()=>o,assets:()=>n,toc:()=>c,contentTitle:()=>r});var o=JSON.parse('{"id":"api/index","title":"LiveCodes","description":"A Code Playground That Just Works!","source":"@site/docs/api/index.md","sourceDirName":"api","slug":"/api/","permalink":"/docs/api/","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/index.md","tags":[],"version":"current","frontMatter":{}}'),t=i("5893"),l=i("65");let d={},r="LiveCodes",n={},c=[{value:"A Code Playground That Just Works!",id:"a-code-playground-that-just-works",level:2},{value:"Quick Start",id:"quick-start",level:3},{value:"Standalone App",id:"standalone-app",level:4},{value:"Embedded Playground",id:"embedded-playground",level:4},{value:"Self-hosted",id:"self-hosted",level:4},{value:"Feature Summary",id:"feature-summary",level:2},{value:"LiveCodes SDK",id:"livecodes-sdk",level:2},{value:"Installation",id:"installation",level:3},{value:"Usage",id:"usage",level:3},{value:"Documentations",id:"documentations",level:2},{value:"Updates",id:"updates",level:2},{value:"Feedback",id:"feedback",level:2},{value:"Contribution",id:"contribution",level:2},{value:"Credits",id:"credits",level:2},{value:"Third Party Packages",id:"third-party-packages",level:2},{value:"License",id:"license",level:2},{value:"Sponsor",id:"sponsor",level:2}];function a(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.header,{children:(0,t.jsx)(s.h1,{id:"livecodes",children:"LiveCodes"})}),"\n",(0,t.jsx)(s.p,{children:"A Code Playground That Just Works!"}),"\n",(0,t.jsx)("p",{align:"center",children:(0,t.jsx)("img",{width:"300",src:"https://dev.livecodes.io/docs/img/livecodes-logo.svg"})}),"\n",(0,t.jsxs)(s.p,{children:["A ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/",children:"feature-rich"}),", open-source, ",(0,t.jsx)(s.strong,{children:"client-side"})," code playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/languages/",children:"90+ languages/frameworks"}),"."]}),"\n",(0,t.jsxs)(s.p,{children:[(0,t.jsx)(s.a,{href:"https://status.livecodes.io",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/live-codes/upptime/master/api/live-codes/uptime.json",alt:"LiveCodes: uptime status"})}),"\n",(0,t.jsx)(s.a,{href:"https://livecodes.io",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/github/v/release/live-codes/livecodes?label=app",alt:"LiveCodes: app version"})}),"\n",(0,t.jsx)(s.a,{href:"https://www.npmjs.com/package/livecodes",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/npm/v/livecodes",alt:"LiveCodes: npm version"})}),"\n",(0,t.jsx)(s.a,{href:"https://www.npmjs.com/package/livecodes",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/npm/dm/livecodes",alt:"LiveCodes: npm downloads"})}),"\n",(0,t.jsx)(s.a,{href:"https://www.jsdelivr.com/package/npm/livecodes",children:(0,t.jsx)(s.img,{src:"https://data.jsdelivr.com/v1/package/npm/livecodes/badge?style=rounded",alt:"LiveCodes: jsdelivr downloads"})}),"\n",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/languages/",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/badge/languages-96-blue",alt:"LiveCodes: languages"})}),"\n",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/badge/Documentation-575757?logo=gitbook&logoColor=white",alt:"LiveCodes: docs"})}),"\n",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/llms.txt",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/badge/llms.txt-575757?logo=googledocs&logoColor=white",alt:"LiveCodes: llms.txt"})}),"\n",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/llms-full.txt",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/badge/llms--full.txt-575757?logo=googledocs&logoColor=white",alt:"LiveCodes: llms-full.txt"})}),"\n",(0,t.jsx)(s.a,{href:"https://www.codacy.com/gh/live-codes/livecodes/dashboard?utm_source=github.com&utm_medium=referral&utm_content=live-codes/livecodes&utm_campaign=Badge_Grade",children:(0,t.jsx)(s.img,{src:"https://app.codacy.com/project/badge/Grade/3d39f15618e048db9d13c2a0e8002b33",alt:"Codacy Badge"})}),"\n",(0,t.jsx)(s.a,{href:"https://app.lokalise.com/public/34958094667a72e9454592.95108106/",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/live-codes/lokalise-badge/main/badges/translated.json",alt:"Lokalise: translated"})}),"\n",(0,t.jsx)(s.a,{href:"https://app.lokalise.com/public/34958094667a72e9454592.95108106/",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/live-codes/lokalise-badge/main/badges/languages.json",alt:"Lokalise: UI languages"})}),"\n",(0,t.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/develop/LICENSE",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/github/license/live-codes/livecodes",alt:"license - MIT"})}),"\n",(0,t.jsx)(s.a,{href:"https://github.com/live-codes/livecodes",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/github/stars/live-codes/livecodes?style=flat&logo=github",alt:"LiveCodes: GitHub repo"})}),"\n",(0,t.jsx)(s.a,{href:"https://github.com/live-codes/livecodes",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/github/forks/live-codes/livecodes?style=flat&logo=github",alt:"LiveCodes: GitHub repo"})}),"\n",(0,t.jsx)(s.a,{href:"https://x.com/livecodes_io",children:(0,t.jsx)(s.img,{src:"https://img.shields.io/badge/Follow%20@livecodes__io-575757?logo=x",alt:"Follow us on X (formerly Twitter)"})})]}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io",children:"Try it now on livecodes.io"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs",children:"Documentations"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/why",children:"What makes LiveCodes different?"})}),"\n",(0,t.jsx)(s.p,{children:(0,t.jsx)(s.img,{src:"https://dev.livecodes.io/docs/img/screenshots/livecodes-overview.jpg",alt:"LiveCodes list of languages screenshot"})}),"\n",(0,t.jsx)(s.h2,{id:"a-code-playground-that-just-works",children:"A Code Playground That Just Works!"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:"No servers to configure (or pay for!)"}),"\n",(0,t.jsx)(s.li,{children:"No databases to maintain (or pay for!)"}),"\n",(0,t.jsx)(s.li,{children:"No installs"}),"\n",(0,t.jsx)(s.li,{children:"No configuration files"}),"\n",(0,t.jsx)(s.li,{children:"No build steps"}),"\n",(0,t.jsx)(s.li,{children:"No subscription fees (free and open-source)"}),"\n",(0,t.jsx)(s.li,{children:"No account required *"}),"\n",(0,t.jsx)(s.li,{children:"No limits for usage (unlimited private projects)"}),"\n",(0,t.jsx)(s.li,{children:"90+ languages/frameworks/processors"}),"\n",(0,t.jsx)(s.li,{children:"Large set of features and integrations"}),"\n",(0,t.jsx)(s.li,{children:"Import code from a wide variety of sources"}),"\n",(0,t.jsx)(s.li,{children:"Use modules from npm, deno.land/x, jsr, GitHub, and others"}),"\n",(0,t.jsx)(s.li,{children:"Easily embed it in your web pages"}),"\n",(0,t.jsx)(s.li,{children:"It runs in the browser (client-side)"}),"\n"]}),"\n",(0,t.jsxs)("sub",{children:["* GitHub account is required only for features that use ",(0,t.jsx)("a",{href:"https://livecodes.io/docs/features/github-integration",target:"_blank",rel:"noopener",children:"GitHub Integration"}),"."]}),"\n",(0,t.jsx)(s.h3,{id:"quick-start",children:"Quick Start"}),"\n",(0,t.jsx)(s.h4,{id:"standalone-app",children:"Standalone App"}),"\n",(0,t.jsxs)(s.ol,{children:["\n",(0,t.jsxs)(s.li,{children:["Go to ",(0,t.jsx)(s.a,{href:"https://livecodes.io",children:"livecodes.io"})]}),"\n"]}),"\n",(0,t.jsxs)(s.p,{children:["... and enjoy all the ",(0,t.jsx)(s.a,{href:"https://livecodes.io/docs/features/",children:"features"}),"!"]}),"\n",(0,t.jsx)(s.h4,{id:"embedded-playground",children:"Embedded Playground"}),"\n",(0,t.jsx)(s.p,{children:"Add this code to your page:"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-html",children:"
\n + + +`,j=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:a.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:u,ts:p,react:m,vue:f,svelte:j})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return o}});var n=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:r="lazy",view:i}=t,l=n||"headless"===i,a=null,c=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)C(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(o(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",l?"eager":r);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let n="livecodes",o=a.querySelector(`iframe.${n}`),i=o||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===r?"eager":"lazy"),l?C(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),i.onload=()=>{e(i)},i.src=d.href,o||a.appendChild(i)}),j=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),j.settled=!0)})}),x=()=>m?Promise.reject(g):new Promise(async e=>{j.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await j,e()}),v=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await x();let r=E();addEventListener("message",function t(o){if(o.source===f.contentWindow&&o.origin===h&&o.data?.type==="livecodes-api-response"&&o.data?.id===r&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},h)}),y={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return b.includes(e)?(v("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&v("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!y[t])return;let s=e.data?.payload;y[t]?.forEach(e=>{e(s)})});let L=()=>{Object.values(y).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await x(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>x(),run:()=>v("run"),format:e=>v("format",[e]),getShareUrl:e=>v("getShareUrl",[e]),getConfig:e=>v("getConfig",[e]),setConfig:e=>v("setConfig",[e]),getCode:()=>v("getCode"),show:(e,t)=>v("show",[e,t]),runTests:()=>v("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nj.settled?v("destroy").then(L):m?Promise.reject(g):(L(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:o={},headless:i,import:l,lite:a,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||i;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==c?o.view=c:e.searchParams.set("view",c)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(o))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return l},a:function(){return i}});var n=s(7294);let r={},o=n.createContext(r);function i(e){let t=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/629e2d9b.9b8b79ec.js b/docs/assets/js/629e2d9b.9b8b79ec.js new file mode 100644 index 0000000..5aacff7 --- /dev/null +++ b/docs/assets/js/629e2d9b.9b8b79ec.js @@ -0,0 +1 @@ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6469"],{5011:function(e,t,n){"use strict";n.r(t),n.d(t,{default:()=>u,frontMatter:()=>a,metadata:()=>o,assets:()=>l,toc:()=>d,contentTitle:()=>c});var o=JSON.parse('{"id":"features/ai","title":"AI Code Assistant \uD83E\uDE84","description":"LiveCodes supports AI-powered code completion, totally for free with no account or API token required, using Codeium, the ultrafast Copilot alternative. This can be easily enabled from the UI (as easy as flipping a switch!)","source":"@site/docs/features/ai.mdx","sourceDirName":"features","slug":"/features/ai","permalink":"/docs/features/ai","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/ai.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"IntelliSense","permalink":"/docs/features/intellisense"},"next":{"title":"Code Format","permalink":"/docs/features/code-format"}}'),r=n("5893"),s=n("65"),i=n("8500");let a={},c="AI Code Assistant \uD83E\uDE84",l={},d=[{value:"Examples:",id:"examples",level:2},{value:"Instructions",id:"instructions",level:2},{value:"UI",id:"ui",level:3},{value:"Configuration",id:"configuration",level:3},{value:"Usage",id:"usage",level:2}];function h(e){let t={a:"a",admonition:"admonition",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"ai-code-assistant-",children:"AI Code Assistant \uD83E\uDE84"})}),"\n",(0,r.jsxs)(t.p,{children:["LiveCodes supports AI-powered code completion, totally for ",(0,r.jsx)(t.strong,{children:"free"})," with ",(0,r.jsx)(t.strong,{children:"no account or API token required"}),", using ",(0,r.jsx)(t.a,{href:"https://codeium.com/",children:"Codeium"}),", the ultrafast Copilot alternative. This can be easily enabled from the UI (as easy as ",(0,r.jsx)(t.a,{href:"#ui",children:"flipping a switch"}),"!)"]}),"\n",(0,r.jsxs)(t.p,{children:["The large generative machine learning model is capable of understanding the context of your code and comments (across the ",(0,r.jsx)(t.a,{href:"./projects#markup-editor",children:"3 code editors"}),") in order to generate suggestions on what you might want to type next."]}),"\n",(0,r.jsxs)(t.p,{children:["It has a wide range of language support, and it works everywhere (in the ",(0,r.jsx)(t.a,{href:"/docs/getting-started#standalone-app",children:"standalone app"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/embeds",children:"embedded playgrounds"})," and ",(0,r.jsx)(t.a,{href:"/docs/features/self-hosting",children:"self-hosted"})," apps)."]}),"\n",(0,r.jsx)(t.p,{children:"Powered by:"}),"\n",(0,r.jsx)("a",{href:"https://codeium.com/",children:(0,r.jsx)("img",{width:"300px",src:"/docs/img/credits/codeium.svg",alt:"Codeium logo"})}),"\n",(0,r.jsx)(t.p,{children:"."}),"\n",(0,r.jsx)(t.h2,{id:"examples",children:"Examples:"}),"\n",(0,r.jsx)(t.p,{children:"JavaScript:"}),"\n",(0,r.jsx)("video",{controls:!0,style:{width:"100%"},children:(0,r.jsx)("source",{src:"/docs/vid/LiveCodes-AI.mp4",type:"video/mp4"})}),"\n",(0,r.jsx)(t.p,{children:"Python:"}),"\n",(0,r.jsx)("video",{controls:!0,style:{width:"100%"},children:(0,r.jsx)("source",{src:"/docs/vid/LiveCodes-AI-py.mp4",type:"video/mp4"})}),"\n",(0,r.jsx)(t.h2,{id:"instructions",children:"Instructions"}),"\n",(0,r.jsx)(t.p,{children:"The AI code assistant can be enabled from:"}),"\n",(0,r.jsx)(t.h3,{id:"ui",children:"UI"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.a,{href:"/docs/features/editor-settings",children:"editor settings"})," screen (Settings menu \u2192 Editor Settings \u2192 Enable AI Code Assistant)."]}),"\n","\n",(0,r.jsx)(i.Z,{params:{screen:"editor-settings"},linkText:"direct link"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"LiveCodes Editor Settings",src:n(9947).Z+"",width:"2240",height:"1400"})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Note"})}),"\n",(0,r.jsxs)(t.p,{children:["When set from the UI, this configuration is saved locally to ",(0,r.jsx)(t.a,{href:"/docs/features/user-settings",children:"user settings"})," and is remembered across sessions."]}),"\n",(0,r.jsx)(t.h3,{id:"configuration",children:"Configuration"}),"\n",(0,r.jsxs)(t.p,{children:["Alternatively, this can be enabled (",(0,r.jsx)(t.em,{children:"only for the current session"}),") using the ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#enableai",children:(0,r.jsx)(t.code,{children:"enableAI"})})," property in the ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configuration object"}),". This can be used to enable the AI code assistant in ",(0,r.jsx)(t.a,{href:"/docs/features/embeds",children:"embedded playgrounds"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container', {\n config: {\n // highlight-next-line\n enableAI: true,\n },\n});\n"})}),"\n",(0,r.jsxs)(t.p,{children:["Also this can be enabled using ",(0,r.jsx)(t.a,{href:"/docs/configuration/query-params",children:"query params"})," (e.g. ",(0,r.jsx)(t.a,{href:"https://livecodes.io/?enableAI",children:"https://livecodes.io/?enableAI"}),")."]}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(t.p,{children:["On typing, the code completion suggestions will be shown in dimmed color. Press ",(0,r.jsx)("kbd",{children:"Tab"})," to accept, or ",(0,r.jsx)("kbd",{children:"Esc"})," to cancel."]}),"\n",(0,r.jsx)(t.p,{children:"On mobile, tap on the suggestion to accept it, or continue typing to reject."}),"\n",(0,r.jsx)(t.admonition,{title:"Note",type:"caution",children:(0,r.jsxs)(t.p,{children:["Please note that when using Codeium AI assistant, your code is sent to Codeium servers for code completion. However, your code is not used for training their model. Check Codeium ",(0,r.jsx)(t.a,{href:"https://codeium.com/faq#Will-Codeium-regurgitate-private-code%3F",children:"FAQ"})," and ",(0,r.jsx)(t.a,{href:"https://codeium.com/privacy-policy",children:"privacy policy"})," for more details."]})})]})}function u(e={}){let{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},9947:function(e,t,n){"use strict";n.d(t,{Z:function(){return o}});let o=n.p+"assets/images/editor-settings-1-f401ae77e35e8e11b6427b4f1eb67bb9.jpg"},7728:function(e,t,n){e=n.nmd(e);var o=function(){var e=String.fromCharCode,t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",o={};function r(e,t){if(!o[e]){o[e]={};for(var n=0;n>>8,n[2*o+1]=i%256}return n},decompressFromUint8Array:function(t){if(null==t)return s.decompress(t);for(var n=Array(t.length/2),o=0,r=n.length;od.charCodeAt(0)){for(o=0;o>=1}else{for(o=0,r=1;o>=1}0==--h&&(h=Math.pow(2,p),p++),delete a[d]}else for(o=0,r=i[d];o>=1;0==--h&&(h=Math.pow(2,p),p++),i[l]=u++,d=String(c)}if(""!==d){if(Object.prototype.hasOwnProperty.call(a,d)){if(256>d.charCodeAt(0)){for(o=0;o>=1}else{for(o=0,r=1;o>=1}0==--h&&(h=Math.pow(2,p),p++),delete a[d]}else for(o=0,r=i[d];o>=1;0==--h&&(h=Math.pow(2,p),p++)}for(o=0,r=2;o>=1;for(;;){if(m<<=1,g==t-1){f.push(n(m));break}g++}return f.join("")},decompress:function(e){return null==e?"":""==e?null:s._decompress(e.length,32768,function(t){return e.charCodeAt(t)})},_decompress:function(t,n,o){var r,s,i,a,c,l,d,h=[],u=4,p=4,f=3,m="",g=[],v={val:o(0),position:n,index:1};for(r=0;r<3;r+=1)h[r]=r;for(i=0,c=4,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=o(v.index++)),i|=(a>0?1:0)*l,l<<=1;switch(i){case 0:for(i=0,c=256,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=o(v.index++)),i|=(a>0?1:0)*l,l<<=1;d=e(i);break;case 1:for(i=0,c=65536,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=o(v.index++)),i|=(a>0?1:0)*l,l<<=1;d=e(i);break;case 2:return""}for(h[3]=d,s=d,g.push(d);;){if(v.index>t)return"";for(i=0,c=Math.pow(2,f),l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=o(v.index++)),i|=(a>0?1:0)*l,l<<=1;switch(d=i){case 0:for(i=0,c=256,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=o(v.index++)),i|=(a>0?1:0)*l,l<<=1;h[p++]=e(i),d=p-1,u--;break;case 1:for(i=0,c=65536,l=1;l!=c;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=n,v.val=o(v.index++)),i|=(a>0?1:0)*l,l<<=1;h[p++]=e(i),d=p-1,u--;break;case 2:return g.join("")}if(0==u&&(u=Math.pow(2,f),f++),h[d])m=h[d];else{if(d!==p)return null;m=s+s.charAt(0)}g.push(m),h[p++]=s+m.charAt(0),u--,s=m,0==u&&(u=Math.pow(2,f),f++)}}};return s}();"function"==typeof define&&define.amd?define(function(){return o}):null!=e&&(e.exports=o)},8500:function(e,t,n){"use strict";n.d(t,{Z:()=>l});var o=n("5893");n("7294");var r=n("6735");function s(e){let{children:t,fallback:n}=e;return(0,r.Z)()?(0,o.jsx)(o.Fragment,{children:t?.()}):n??null}var i=n("1705"),a=n("8294"),c=n("1858");function l(e){let{params:t,config:n,code:r,language:l="js",codeTitle:d="",showLineNumbers:h=!1,formatCode:u=!0,linkText:p="Run in LiveCodes",style:f={},className:m=""}=e,g=(0,a.r)({appUrl:c.G,params:t,config:n});return(0,o.jsxs)("div",{style:{marginBottom:"30px",...f},className:m,children:[r&&(0,o.jsx)(s,{children:()=>(0,o.jsx)(i.Z,{language:l,title:d,showLineNumbers:h,children:u?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(r,l):r})}),(0,o.jsxs)("a",{href:g,target:"_blank",rel:"noreferrer",children:[p,(0,o.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,o.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,n){"use strict";n.d(t,{T:function(){return r},r:function(){return s}});var o=n(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:o,loading:r="lazy",view:i}=t,a=o||"headless"===i,c=null,l=null;if("string"==typeof e)c=document.querySelector(e);else if(e instanceof HTMLElement)c=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!c){if(a)E(c=document.createElement("div")),document.body.appendChild(c);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(s(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":r);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let f=!1,m="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!c)return;let t=c.dataset.height||c.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";c.style.height=e}"false"===c.dataset.defaultStyles||a||(c.style.backgroundColor||="#fff",c.style.border||="1px solid black",c.style.borderRadius||="8px",c.style.boxSizing||="border-box",c.style.padding||="0",c.style.width||="100%",c.style.height||=c.style.height||"300px",c.style.minHeight="200px",c.style.flexGrow="1",c.style.overflow||="hidden",c.style.resize||="vertical");let o="livecodes",s=c.querySelector(`iframe.${o}`),i=s||document.createElement("iframe");i.classList.add(o),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===r?"eager":"lazy"),a?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=c.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),l=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!l||l<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),i.onload=()=>{e(i)},i.src=d.href,s||c.appendChild(i)}),v=new Promise(e=>{addEventListener("message",function t(n){n.source===g.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>f?Promise.reject(m):new Promise(async e=>{v.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),x=(e,t)=>new Promise(async(n,o)=>{if(f)return o(m);await y();let r=I();addEventListener("message",function t(s){if(s.source===g.contentWindow&&s.origin===h&&s.data?.type==="livecodes-api-response"&&s.data?.id===r&&s.data.method===e){removeEventListener("message",t);let e=s.data.payload;e?.error?o(e.error):n(e)}}),g.contentWindow?.postMessage({method:e,id:r,args:t},h)}),b={},w=["load","ready","code","console","tests","destroy"],j=(e,t)=>{if(f)throw Error(m);return w.includes(e)?(x("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},C=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=C(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==h||!t||!b[t])return;let n=e.data?.payload;b[t]?.forEach(e=>{e(n)})});let A=()=>{Object.values(b).forEach(e=>{e.length=0}),g?.remove?.(),f=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(c))})},{rootMargin:"150px"}).observe(c);let I=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>j("code",e),watch:j,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),o=1;ov.settled?x("destroy").then(A):f?Promise.reject(m):(A(),Promise.resolve())}}function s(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:r={},config:s={},headless:i,import:a,lite:c,view:l,...d}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[n,o]=t;void 0!==o&&e.searchParams.set(n,String(o))});let u="headless"===t.view||i;if(c&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof s&&null==s.mode?s.mode="lite":e.searchParams.set("lite","true")),l&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof s&&null==s.view&&"headless"!==l?s.view=l:e.searchParams.set("view",l)),"string"==typeof s)try{new URL(s),e.searchParams.set("config",encodeURIComponent(s))}catch{throw Error('"config" is not a valid URL or configuration object.')}else s&&"object"==typeof s&&Object.keys(s).length>0&&(s.title&&"Untitled Project"!==s.title&&e.searchParams.set("title",s.title),s.description&&s.description.length>0&&e.searchParams.set("description",s.description),h.set("config","code/"+(0,o.compressToEncodedURIComponent)(JSON.stringify(s))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,o.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,n){"use strict";n.d(t,{Z:function(){return a},a:function(){return i}});var o=n(7294);let r={},s=o.createContext(r);function i(e){let t=o.useContext(s);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/63218e6b.2a8d6428.js b/docs/assets/js/63218e6b.2a8d6428.js new file mode 100644 index 0000000..1417dfe --- /dev/null +++ b/docs/assets/js/63218e6b.2a8d6428.js @@ -0,0 +1,84 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1558"],{6519:function(e,t,n){n.r(t),n.d(t,{default:()=>m,frontMatter:()=>a,metadata:()=>s,assets:()=>c,libParams:()=>h,params:()=>u,toc:()=>p,contentTitle:()=>d});var s=JSON.parse('{"id":"languages/r","title":"R","description":"LiveCodes runs R statistical programming language in the browser using WebR.","source":"@site/docs/languages/r.mdx","sourceDirName":"languages","slug":"/languages/r","permalink":"/docs/languages/r","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/r.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Python","permalink":"/docs/languages/python"},"next":{"title":"React Native (TSX)","permalink":"/docs/languages/react-native-tsx"}}'),r=n("5893"),i=n("65"),o=n("8500"),l=n("3365");let a={},d="R",c={},h={r:`library(dplyr) + +starwars %>% + filter(species == "Droid") +`,languages:"r",console:"open",compiled:"none"},u={r:`head(iris) + +PW <- iris$Petal.Width +PL <- iris$Petal.Length +species <- iris$Species +speciesID <- as.numeric(species) + +plot(PL, PW, + pch = speciesID, + col = speciesID, + main = "Petal Width vs Length", + xlab = "Petal Length", + ylab = "Petal Width") +legend("topleft", + levels(species), + pch = 1:3, + col = 1:3) +`,html:`

Output

+
+

Plots

+
+ + +`,activeEditor:"script"},p=[{value:"Usage",id:"usage",level:2},{value:"Loading Packages",id:"loading-packages",level:3},{value:"Output Rendering",id:"output-rendering",level:3},{value:"Examples",id:"examples",level:3},{value:"Demo",id:"demo",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Aliases",id:"aliases",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Live Reload",id:"live-reload",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function g(e){let t={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"r",children:"R"})}),"\n","\n",(0,r.jsxs)(t.p,{children:["LiveCodes runs ",(0,r.jsx)(t.a,{href:"https://www.r-project.org/",children:"R"})," statistical programming language in the browser using ",(0,r.jsx)(t.a,{href:"https://docs.r-wasm.org/webr/latest/",children:"WebR"}),"."]}),"\n",(0,r.jsxs)(t.blockquote,{children:["\n",(0,r.jsxs)(t.p,{children:["WebR is a version of the statistical language ",(0,r.jsx)(t.a,{href:"https://www.r-project.org/",children:"R"})," compiled for the browser and ",(0,r.jsx)(t.a,{href:"https://nodejs.org/en/",children:"Node.js"})," using ",(0,r.jsx)(t.a,{href:"https://webassembly.org/",children:"WebAssembly"}),", via ",(0,r.jsx)(t.a,{href:"https://emscripten.org/",children:"Emscripten"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(t.blockquote,{children:["\n",(0,r.jsx)(t.p,{children:"WebR makes it possible to run R code in the browser without the need for an R server to execute the code: the R interpreter runs directly on the user\u2019s machine. Several R packages have also been ported for use with webR, and can be loaded in the usual way."}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://docs.r-wasm.org/webr/",children:"https://docs.r-wasm.org/webr/"})}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(t.p,{children:["Check the ",(0,r.jsx)(t.a,{href:"#starter-template",children:"starter template"})," for an example."]}),"\n",(0,r.jsx)(t.h3,{id:"loading-packages",children:"Loading Packages"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://repo.r-wasm.org/",children:"Supported packages"})," can just be loaded in code, using the ",(0,r.jsx)(t.code,{children:"library()"})," function, without the need for any explicit installs. Packages are publicly hosted via a CDN in a CRAN-like repository with URL, ",(0,r.jsx)(t.a,{href:"https://repo.r-wasm.org/",children:"https://repo.r-wasm.org/"})]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n","\n",(0,r.jsx)(o.Z,{params:h,code:h.r,language:"r",formatCode:!1}),"\n",(0,r.jsx)(t.h3,{id:"output-rendering",children:"Output Rendering"}),"\n",(0,r.jsxs)(t.p,{children:["By default, the R code is evaluated and the output is rendered in the ",(0,r.jsx)(t.code,{children:"document.body"})," of the result page, followed by the plots (rendered as HTML canvas elements)."]}),"\n",(0,r.jsxs)(t.p,{children:["The evaluation and rendering behavior can be configured by adding a ",(0,r.jsx)(t.code,{children:"script"})," element in the HTML (markup editor) and setting ",(0,r.jsx)(t.code,{children:"livecodes.r.config"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-html",metastring:'title="HTML"',children:"
\n\n + + +`,f=` + + +
+ +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:a.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(m,{js:u,ts:p,react:g,vue:v,svelte:f})]})}},8500:function(e,t,n){n.d(t,{Z:()=>d});var s=n("5893");n("7294");var r=n("6735");function i(e){let{children:t,fallback:n}=e;return(0,r.Z)()?(0,s.jsx)(s.Fragment,{children:t?.()}):n??null}var o=n("1705"),l=n("8294"),a=n("1858");function d(e){let{params:t,config:n,code:r,language:d="js",codeTitle:c="",showLineNumbers:h=!1,formatCode:u=!0,linkText:p="Run in LiveCodes",style:g={},className:m=""}=e,v=(0,l.r)({appUrl:a.G,params:t,config:n});return(0,s.jsxs)("div",{style:{marginBottom:"30px",...g},className:m,children:[r&&(0,s.jsx)(i,{children:()=>(0,s.jsx)(o.Z,{language:d,title:c,showLineNumbers:h,children:u?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(r,d):r})}),(0,s.jsxs)("a",{href:v,target:"_blank",rel:"noreferrer",children:[p,(0,s.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,s.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,n){n.d(t,{T:function(){return r},r:function(){return i}});var s=n(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:s,loading:r="lazy",view:o}=t,l=s||"headless"===o,a=null,d=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)C(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(i(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",l?"eager":r);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let g=!1,m="Cannot call API methods after calling `destroy()`.",v=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let s="livecodes",i=a.querySelector(`iframe.${s}`),o=i||document.createElement("iframe");o.classList.add(s),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===r?"eager":"lazy"),l?C(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),o.onload=()=>{e(o)},o.src=c.href,i||a.appendChild(o)}),f=new Promise(e=>{addEventListener("message",function t(n){n.source===v.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),f.settled=!0)})}),x=()=>g?Promise.reject(m):new Promise(async e=>{f.settled&&e(),v.contentWindow?.postMessage({type:"livecodes-load"},h),await f,e()}),j=(e,t)=>new Promise(async(n,s)=>{if(g)return s(m);await x();let r=L();addEventListener("message",function t(i){if(i.source===v.contentWindow&&i.origin===h&&i.data?.type==="livecodes-api-response"&&i.data?.id===r&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?s(e.error):n(e)}}),v.contentWindow?.postMessage({method:e,id:r,args:t},h)}),y={},w=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(g)throw Error(m);return w.includes(e)?(j("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==v.contentWindow||e.origin!==h||!t||!y[t])return;let n=e.data?.payload;y[t]?.forEach(e=>{e(n)})});let R=()=>{Object.values(y).forEach(e=>{e.length=0}),v?.remove?.(),g=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await x(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let L=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>x(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,t)=>j("show",[e,t]),runTests:()=>j("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;sf.settled?j("destroy").then(R):g?Promise.reject(m):(R(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:r={},config:i={},headless:o,import:l,lite:a,view:d,...c}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let u="headless"===t.view||o;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==d?i.view=d:e.searchParams.set("view",d)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(i))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return l},a:function(){return o}});var s=n(7294);let r={},i=s.createContext(r);function o(e){let t=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/64055fdc.590619f9.js b/docs/assets/js/64055fdc.590619f9.js new file mode 100644 index 0000000..76eb94d --- /dev/null +++ b/docs/assets/js/64055fdc.590619f9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2913"],{7040:function(e,s,t){t.r(s),t.d(s,{default:()=>h,frontMatter:()=>r,metadata:()=>n,assets:()=>l,toc:()=>c,contentTitle:()=>d});var n=JSON.parse('{"id":"features/self-hosting","title":"Self-Hosting","description":"The LiveCodes app can be self-hosted on any static file server or CDN.","source":"@site/docs/features/self-hosting.mdx","sourceDirName":"features","slug":"/features/self-hosting","permalink":"/docs/features/self-hosting","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/self-hosting.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Security","permalink":"/docs/features/security"},"next":{"title":"Configuration","permalink":"/docs/configuration/"}}'),o=t("5893"),i=t("65");let r={},d="Self-Hosting",l={},c=[{value:"Guide",id:"guide",level:2},{value:"Custom Build",id:"custom-build",level:2},{value:"Services",id:"services",level:2},{value:"Example",id:"example",level:2},{value:"SDK Usage",id:"sdk-usage",level:2}];function a(e){let s={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(s.header,{children:(0,o.jsx)(s.h1,{id:"self-hosting",children:"Self-Hosting"})}),"\n",(0,o.jsx)(s.p,{children:"The LiveCodes app can be self-hosted on any static file server or CDN."}),"\n",(0,o.jsx)(s.h2,{id:"guide",children:"Guide"}),"\n",(0,o.jsxs)(s.p,{children:["The built app can be obtained by ",(0,o.jsx)(s.strong,{children:"one of the following"})," ways:"]}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsxs)(s.li,{children:["\n",(0,o.jsxs)(s.p,{children:["Download the app from the ",(0,o.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/releases",children:"releases"}),", extract the folder and add it to your website."]}),"\n"]}),"\n",(0,o.jsxs)(s.li,{children:["\n",(0,o.jsxs)(s.p,{children:["Fork the ",(0,o.jsx)(s.a,{href:"https://github.com/live-codes/livecodes",children:"GitHub repo"})," and clone it. You may wish to use the included setup to deploy to ",(0,o.jsx)(s.a,{href:"https://pages.github.com/",children:"GitHub Pages"}),":"]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-shell",children:'git clone https://github.com/{your-username}/livecodes\ncd livecodes\nnpm install\nnpm build # build the app to "build" directory\nnpm run serve # locally serve to http://localhost:8080\n\n# deploy\nnpm run deploy # build and deploy to github pages\n\n# for development\nnpm start # start local development with code watch, rebuild and live-reload\n'})}),"\n"]}),"\n",(0,o.jsxs)(s.li,{children:["\n",(0,o.jsxs)(s.p,{children:["Fork the ",(0,o.jsx)(s.a,{href:"https://github.com/live-codes/livecodes",children:"GitHub repo"})," and use one of the hosting services that integrate with GitHub to allow automatic deploys on code push (e.g. ",(0,o.jsx)(s.a,{href:"https://developers.cloudflare.com/pages/get-started",children:"Cloudflare Pages"}),", ",(0,o.jsx)(s.a,{href:"https://vercel.com/docs/concepts/git",children:"Vercel"}),", ",(0,o.jsx)(s.a,{href:"https://docs.netlify.com/configure-builds/overview/",children:"Netlify"}),", ",(0,o.jsx)(s.a,{href:"https://firebase.google.com/docs/hosting/github-integration",children:"Firebase"}),"). When prompted, the build command is ",(0,o.jsx)(s.code,{children:"npm run build"})," and the build output directory is ",(0,o.jsx)(s.code,{children:"build"}),"."]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(s.h2,{id:"custom-build",children:"Custom Build"}),"\n",(0,o.jsxs)(s.p,{children:["By default, when building the app, it is expected to be hosted on the root of the domain/subdomain (e.g. ",(0,o.jsx)(s.code,{children:"https://my-website.com"})," or ",(0,o.jsx)(s.code,{children:"https://playground.my-website.com"}),"). The documentation is also hosted in the ",(0,o.jsx)(s.code,{children:"/docs/"})," directory (e.g. ",(0,o.jsx)(s.code,{children:"https://my-website.com/docs"}),")."]}),"\n",(0,o.jsxs)(s.p,{children:["If you wish to host the app in a subdirectory (e.g. ",(0,o.jsx)(s.code,{children:"https://my-username.github.io/playground/"}),"), the base URL of the documentation directory needs to be supplied by the environment variable ",(0,o.jsx)(s.code,{children:"DOCS_BASE_URL"})," during build."]}),"\n",(0,o.jsx)(s.p,{children:"Example:"}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-shell",children:'npx cross-env DOCS_BASE_URL="/playground/docs/" npm run build\n'})}),"\n",(0,o.jsxs)(s.p,{children:["If you do not want to build documentations and direct all links to documentations to ",(0,o.jsx)(s.a,{href:"https://livecodes.io/docs/",children:"https://livecodes.io/docs/"}),", use the following command:"]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-shell",children:"npx cross-env DOCS_BASE_URL=null npm run build:app\n"})}),"\n",(0,o.jsx)(s.h2,{id:"services",children:"Services"}),"\n",(0,o.jsxs)(s.p,{children:["Some of the ",(0,o.jsx)(s.a,{href:"/docs/advanced/services",children:"services"})," used by the app are not supported on ",(0,o.jsx)(s.a,{href:"/docs/features/self-hosting",children:"self-hosted"})," deploys and are either replaced by other compatible services (e.g. the ",(0,o.jsx)(s.a,{href:"/docs/features/share",children:"share"})," service uses ",(0,o.jsx)(s.a,{href:"https://dpaste.com/",children:"dpaste"})," for short URLs, which are ",(0,o.jsx)(s.a,{href:"https://dpaste.com/help",children:(0,o.jsx)(s.strong,{children:"deleted after 365 days"})}),") or require you to provide an alternative service (e.g. ",(0,o.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/tree/develop/src/livecodes/services/firebase.ts",children:"Firebase configuration"})," for authentication)."]}),"\n",(0,o.jsxs)(s.p,{children:["You may wish to edit one or more of the used ",(0,o.jsx)(s.a,{href:"/docs/advanced/services",children:"services"})," to use your own."]}),"\n",(0,o.jsx)(s.admonition,{type:"info",children:(0,o.jsxs)(s.p,{children:["LiveCodes ",(0,o.jsx)(s.a,{href:"/docs/sponsor",children:"sponsors"})," (Bronze sponsors and above) get access to managed custom services."]})}),"\n",(0,o.jsx)(s.h2,{id:"example",children:"Example"}),"\n",(0,o.jsxs)(s.p,{children:["This is an example of a self-hosted deployment, that was deployed to ",(0,o.jsx)(s.a,{href:"https://pages.github.com/",children:"GitHub Pages"})," using the ",(0,o.jsx)(s.a,{href:"#guide",children:"built-in setup"}),":"]}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.a,{href:"https://live-codes.github.io/livecodes/",children:"https://live-codes.github.io/livecodes/"})}),"\n",(0,o.jsx)(s.h2,{id:"sdk-usage",children:"SDK Usage"}),"\n",(0,o.jsxs)(s.p,{children:["The ",(0,o.jsx)(s.a,{href:"/docs/sdk/",children:"SDK"})," can still be used with the self-hosted app by providing the ",(0,o.jsx)(s.a,{href:"/docs/sdk/js-ts#appurl",children:(0,o.jsx)(s.code,{children:"appUrl"})})," ",(0,o.jsx)(s.a,{href:"/docs/sdk/js-ts#embed-options",children:"embed option"}),"."]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",metastring:'title="index.js"',children:"import { createPlayground } from 'livecodes';\n\nconst options = {\n appUrl: 'https://playground.my-website.com',\n template: 'react',\n // other embed options\n};\ncreatePlayground('#container', options);\n"})})]})}function h(e={}){let{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},65:function(e,s,t){t.d(s,{Z:function(){return d},a:function(){return r}});var n=t(7294);let o={},i=n.createContext(o);function r(e){let s=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function d(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),n.createElement(i.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/64904402.066b2d8e.js b/docs/assets/js/64904402.066b2d8e.js new file mode 100644 index 0000000..3b430b9 --- /dev/null +++ b/docs/assets/js/64904402.066b2d8e.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2252"],{3762:function(e,t,s){s.r(t),s.d(t,{config:()=>c,config2:()=>h,default:()=>g,frontMatter:()=>a,metadata:()=>n,assets:()=>d,params:()=>u,toc:()=>p,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/liquid","title":"Liquid","description":"LiquidJS: A simple, expressive and safe template engine.","source":"@site/docs/languages/liquid.mdx","sourceDirName":"languages","slug":"/languages/liquid","permalink":"/docs/languages/liquid","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/liquid.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Lightning CSS","permalink":"/docs/languages/lightningcss"},"next":{"title":"LiveScript","permalink":"/docs/languages/livescript"}}'),i=s("5893"),r=s("65"),o=s("3365");let a={},l="Liquid",d={},c={markup:{language:"liquid",content:"Hello, {{ name | capitalize }}!"},customSettings:{template:{data:{name:"livecodes"}}}},u={compiled:"open"},h={markup:{language:"liquid",content:"Hello, {{ name | capitalize }}!"},script:{language:"javascript",content:'window.livecodes.templateData = { name: "livecodes" };'},customSettings:{template:{prerender:!1}},activeEditor:"script"},p=[{value:"Usage",id:"usage",level:2},{value:"Pre-rendered (Default)",id:"pre-rendered-default",level:3},{value:"Dynamic",id:"dynamic",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Pre-rendered",id:"pre-rendered",level:3},{value:"Dynamic",id:"dynamic-1",level:3},{value:"Links",id:"links",level:2}];function m(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"liquid",children:"Liquid"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://liquidjs.com/",children:"LiquidJS"}),": A simple, expressive and safe template engine."]}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.p,{children:"There are 2 modes for rendering:"}),"\n",(0,i.jsx)(t.h3,{id:"pre-rendered-default",children:"Pre-rendered (Default)"}),"\n",(0,i.jsxs)(t.p,{children:["The values of the expressions are evaluated and added to the template during compilation of the ",(0,i.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["The values of all expressions should be supplied in advance using ",(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," to the property ",(0,i.jsx)(t.code,{children:"template.data"})," which accepts an object of key-value pairs."]}),"\n",(0,i.jsxs)(t.p,{children:["Example: This provides the value of the expression ",(0,i.jsx)(t.code,{children:"name"})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "data": {\n "name": "LiveCodes"\n }\n }\n}\n'})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"#pre-rendered",children:"Full example below"})}),"\n",(0,i.jsx)(t.h3,{id:"dynamic",children:"Dynamic"}),"\n",(0,i.jsxs)(t.p,{children:["To use this mode, the property ",(0,i.jsx)(t.code,{children:"template.prerender"})," in ",(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," should be set to ",(0,i.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "prerender": false\n }\n}\n'})}),"\n",(0,i.jsxs)(t.p,{children:["In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the ",(0,i.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," runtime."]}),"\n",(0,i.jsxs)(t.p,{children:["This can be achieved in JavaScript (or any ",(0,i.jsx)(t.a,{href:"/docs/languages/",children:"language"})," that compiles to it) by assigning ",(0,i.jsx)(t.code,{children:"window.livecodes.templateData"})," to an object with the data."]}),"\n",(0,i.jsxs)(t.p,{children:["Please note that template rendering occurs on ",(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event",children:"page load"}),", so the assignment must occur before that."]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",metastring:'title="Script Editor (JS)"',children:"window.livecodes.templateData = { name: 'LiveCodes' };\n"})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"#dynamic-1",children:"Full example below"})}),"\n",(0,i.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"liquid"})}),"\n",(0,i.jsx)(t.h3,{id:"extensions",children:"Extensions"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:".liquid"}),", ",(0,i.jsx)(t.code,{children:".liquidjs"})]}),"\n",(0,i.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"markup"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsxs)(t.p,{children:["The official ",(0,i.jsx)(t.a,{href:"https://www.npmjs.com/package/liquidjs",children:"LiquidJS compiler"}),"."]}),"\n",(0,i.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"liquidjs"}),": v10.14.0"]}),"\n",(0,i.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(t.p,{children:["Using ",(0,i.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,i.jsx)(t.code,{children:"liquid"})," are passed as a JSON object to the ",(0,i.jsx)(t.a,{href:"https://liquidjs.com/api/classes/Liquid.html",children:"Liquid constructor"}),". Please check the ",(0,i.jsx)(t.a,{href:"https://liquidjs.com/tutorials/options.html",children:"documentation"})," for full reference."]}),"\n",(0,i.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.strong,{children:"Example:"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "liquid": {\n "outputDelimiterLeft": "<%=",\n "outputDelimiterRight": "%>"\n }\n}\n'})}),"\n",(0,i.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n",(0,i.jsx)(t.h3,{id:"pre-rendered",children:"Pre-rendered"}),"\n","\n","\n",(0,i.jsx)(o.Z,{config:c,params:u}),"\n",(0,i.jsx)(t.h3,{id:"dynamic-1",children:"Dynamic"}),"\n","\n",(0,i.jsx)(o.Z,{config:h}),"\n",(0,i.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://liquidjs.com/",children:"Official website"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://liquidjs.com/tutorials/intro-to-liquid.html",children:"Liquidjs tutorials"})}),"\n"]})]})}function g(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(m,{...e})}):m(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),i=s("4200"),r=s("7294"),o=s("8294");function a(e){let t=(0,r.useRef)(null),[s,i]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[d,c]=(0,r.useState)(e.height),[u,h]=(0,r.useState)(),[p,m]=(0,r.useState)(JSON.stringify(e.config||"")),[g,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:r,sdkReady:a,config:d,...v}=e;if(i(s||""),l(n||{}),c(r),u&&g===JSON.stringify(v)){if(p===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{u?.setConfig(e)}):d&&u.setConfig(d)}else f(JSON.stringify(v)),u?.destroy(),(0,o.T)(t.current,{config:d,...v}).then(e=>{h(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{u?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":d})}var l=s("1858"),d=s("3262"),c=s("1705"),u=s("7645"),h=s("8168"),p=s("8228"),m=s("5050");function g(e){let[t,s]=(0,r.useState)(e.js),[i,o]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[g,f]=(0,r.useState)(e.vue),[v,j]=(0,r.useState)(e.svelte),x="3.7rem",[y,w]=(0,r.useState)(!0),[b,S]=(0,r.useState)(x),C=(0,r.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},255)};return(0,r.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),o(e(i,"ts")),l(e(a,"jsx")),f(e(g,"html")),j(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":y,style:{height:y?x:b,overflow:"hidden",willChange:"height",transition:`height ${y?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{w(!y),E()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,n.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"js",children:t})}),(0,n.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"ts",children:i})}),(0,n.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"jsx",children:a})}),(0,n.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"html",children:g})}),(0,n.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:r,height:o,...d}=e,{colorMode:c}=(0,i.I)(),u=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${u(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(d)}; + return (); +} + +`.trimStart(),f=` + + + +`,v=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:h,ts:p,react:m,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return r}});var n=s(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:i="lazy",view:o}=t,a=n||"headless"===o,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(r(t)),u=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":i);let h=globalThis.process;c.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",r=l.querySelector(`iframe.${n}`),o=r||document.createElement("iframe");o.classList.add(n),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===i?"eager":"lazy"),a?E(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),o.onload=()=>{e(o)},o.src=c.href,r||l.appendChild(o)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),j=()=>m?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},u),await v,e()}),x=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await j();let i=P();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===u&&r.data?.type==="livecodes-api-response"&&r.data?.id===i&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:i,args:t},u)}),y={},w=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(m)throw Error(g);return w.includes(e)?(x("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==u||!t||!y[t])return;let s=e.data?.payload;y[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(y).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nv.settled?x("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:r={},headless:o,import:a,lite:l,view:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let h="headless"===t.view||o;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==d?r.view=d:e.searchParams.set("view",d)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),u.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(r))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{u.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return o}});var n=s(7294);let i={},r=n.createContext(i);function o(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/6804bced.ef6f30bc.js b/docs/assets/js/6804bced.ef6f30bc.js new file mode 100644 index 0000000..d8a5e06 --- /dev/null +++ b/docs/assets/js/6804bced.ef6f30bc.js @@ -0,0 +1,183 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8477"],{4144:function(e,t,s){s.r(t),s.d(t,{importsDemo:()=>g,multiFiles:()=>x,frontMatter:()=>a,customRoot:()=>y,metadata:()=>n,cssModulesDemo:()=>p,assets:()=>d,scopedCssDemo:()=>h,toc:()=>w,contentTitle:()=>c,importExternalWithImportMap:()=>f,multi:()=>j,importExternal:()=>v,jsxDemo:()=>m,processorsDemo:()=>u,default:()=>Z,importDataUrls:()=>b});var n=JSON.parse('{"id":"languages/vue","title":"Vue SFC","description":"Vue.js, The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces.","source":"@site/docs/languages/vue.mdx","sourceDirName":"languages","slug":"/languages/vue","permalink":"/docs/languages/vue","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/vue.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Vento","permalink":"/docs/languages/vento"},"next":{"title":"Vue 2 SFC","permalink":"/docs/languages/vue2"}}'),o=s("5893"),i=s("65"),r=s("3365"),l=s("8500");let a={},c="Vue SFC",d={},h={vue:` + +`},p={vue:` + +`},u={vue:` + + + + +`},m={vue:` + +`},g={vue:` + + +`},j={markup:{language:"vue",content:` + + +`},script:{language:"vue",content:` + + +`},style:{language:"css",content:'@import "tailwindcss";\n'},processors:["tailwindcss"]},x={...j,markup:{...j.markup,title:"App.vue"},script:{...j.script,title:"Counter.vue"},style:{...j.style,title:"styles.css",order:3}},v={activeEditor:"script",script:{language:"vue",content:` + + +`},style:{language:"css",content:'@import "tailwindcss";\n'},processors:["tailwindcss"]},f={activeEditor:"script",script:{language:"vue",content:` + + +`},imports:{"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList":"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList.js","https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition":"https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition.js"}},b={activeEditor:"script",script:{language:"vue",content:` + + +`},style:{language:"css",content:'@import "tailwindcss";\n'},processors:["tailwindcss"]},y={markup:{language:"html",content:`

Custom Root Element

+
+

...other page content

+`},script:{language:"vue",content:""}},w=[{value:"Usage",id:"usage",level:2},{value:"Demo",id:"demo",level:3},{value:"Scoped CSS",id:"scoped-css",level:3},{value:"CSS Modules",id:"css-modules",level:3},{value:"CSS Frameworks",id:"css-frameworks",level:3},{value:"Languages and Pre-Processors",id:"languages-and-pre-processors",level:3},{value:"JSX",id:"jsx",level:3},{value:"src Imports",id:"src-imports",level:3},{value:"Module Imports",id:"module-imports",level:3},{value:"Multiple Components",id:"multiple-components",level:3},{value:"Importing External SFCs",id:"importing-external-sfcs",level:3},{value:"Importing Data URLs",id:"importing-data-urls",level:3},{value:"Root Element",id:"root-element",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Limitations",id:"limitations",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function C(e){let t={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"vue-sfc",children:"Vue SFC"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"https://vuejs.org/",children:"Vue.js"}),", The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces."]}),"\n",(0,o.jsxs)(t.p,{children:["This is the documentation for LiveCodes language support for Vue ",(0,o.jsx)(t.a,{href:"https://vuejs.org/api/sfc-spec.html",children:"Single-File Component (SFC)"}),"."]}),"\n",(0,o.jsxs)(t.p,{children:["The support for Vue 2 SFC (the older, EOL version) is ",(0,o.jsx)(t.a,{href:"/docs/languages/vue2",children:"documented separately"}),"."]}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsxs)(t.p,{children:["Vue SFC can be used as documented in the ",(0,o.jsx)(t.a,{href:"https://vuejs.org/api/sfc-spec.html",children:"specs"}),", including support for ",(0,o.jsx)(t.a,{href:"https://vuejs.org/api/sfc-css-features.html#scoped-css",children:"Scoped CSS"}),", ",(0,o.jsx)(t.a,{href:"https://vuejs.org/api/sfc-css-features.html#css-modules",children:"CSS Modules"}),", ",(0,o.jsx)(t.a,{href:"https://vuejs.org/api/sfc-spec.html#pre-processors",children:"pre-processors"}),", ",(0,o.jsx)(t.a,{href:"https://vuejs.org/guide/extras/render-function.html#jsx-tsx",children:"JSX"})," and ",(0,o.jsxs)(t.a,{href:"https://vuejs.org/api/sfc-spec.html#src-imports",children:[(0,o.jsx)(t.code,{children:"src"})," imports"]}),". See below for usage."]}),"\n",(0,o.jsx)(t.h3,{id:"demo",children:"Demo"}),"\n","\n",(0,o.jsx)(r.Z,{template:"vue",height:"400"}),"\n",(0,o.jsx)(t.h3,{id:"scoped-css",children:"Scoped CSS"}),"\n",(0,o.jsxs)(t.blockquote,{children:["\n",(0,o.jsxs)(t.p,{children:["When a ",(0,o.jsx)(t.code,{children:"\n + + +`,x=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:r||"50vh",...e.style},appUrl:a.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:p,ts:u,react:m,vue:j,svelte:x})]})}},8500:function(e,t,s){s.d(t,{Z:()=>c});var n=s("5893");s("7294");var o=s("6735");function i(e){let{children:t,fallback:s}=e;return(0,o.Z)()?(0,n.jsx)(n.Fragment,{children:t?.()}):s??null}var r=s("1705"),l=s("8294"),a=s("1858");function c(e){let{params:t,config:s,code:o,language:c="js",codeTitle:d="",showLineNumbers:h=!1,formatCode:p=!0,linkText:u="Run in LiveCodes",style:m={},className:g=""}=e,j=(0,l.r)({appUrl:a.G,params:t,config:s});return(0,n.jsxs)("div",{style:{marginBottom:"30px",...m},className:g,children:[o&&(0,n.jsx)(i,{children:()=>(0,n.jsx)(r.Z,{language:c,title:d,showLineNumbers:h,children:p?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(o,c):o})}),(0,n.jsxs)("a",{href:j,target:"_blank",rel:"noreferrer",children:[u,(0,n.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,n.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,s){s.d(t,{T:function(){return o},r:function(){return i}});var n=s(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:o="lazy",view:r}=t,l=n||"headless"===r,a=null,c=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)S(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(i(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",l?"eager":o);let p=globalThis.process;d.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(u[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",j=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let n="livecodes",i=a.querySelector(`iframe.${n}`),r=i||document.createElement("iframe");r.classList.add(n),r.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),r.setAttribute("allowtransparency","true"),r.setAttribute("allowpaymentrequest","true"),r.setAttribute("allowfullscreen","true"),r.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),r.setAttribute("loading","eager"===o?"eager":"lazy"),l?S(r):(r.style.height="100%",r.style.minHeight="200px",r.style.width="100%",r.style.margin="0",r.style.border="0",r.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),r.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),r.onload=()=>{e(r)},r.src=d.href,i||a.appendChild(r)}),x=new Promise(e=>{addEventListener("message",function t(s){s.source===j.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),x.settled=!0)})}),v=()=>m?Promise.reject(g):new Promise(async e=>{x.settled&&e(),j.contentWindow?.postMessage({type:"livecodes-load"},h),await x,e()}),f=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await v();let o=R();addEventListener("message",function t(i){if(i.source===j.contentWindow&&i.origin===h&&i.data?.type==="livecodes-api-response"&&i.data?.id===o&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?n(e.error):s(e)}}),j.contentWindow?.postMessage({method:e,id:o,args:t},h)}),b={},y=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return y.includes(e)?(f("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&f("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},C=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=C(e.data?.type??"");if(e.source!==j.contentWindow||e.origin!==h||!t||!b[t])return;let s=e.data?.payload;b[t]?.forEach(e=>{e(s)})});let Z=()=>{Object.values(b).forEach(e=>{e.length=0}),j?.remove?.(),m=!0};function S(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let R=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>f("run"),format:e=>f("format",[e]),getShareUrl:e=>f("getShareUrl",[e]),getConfig:e=>f("getConfig",[e]),setConfig:e=>f("setConfig",[e]),getCode:()=>f("getCode"),show:(e,t)=>f("show",[e,t]),runTests:()=>f("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nx.settled?f("destroy").then(Z):m?Promise.reject(g):(Z(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:o={},config:i={},headless:r,import:l,lite:a,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let p="headless"===t.view||r;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==c?i.view=c:e.searchParams.set("view",c)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(i))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),p&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return l},a:function(){return r}});var n=s(7294);let o={},i=n.createContext(o);function r(e){let t=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/6810147d.2a616308.js b/docs/assets/js/6810147d.2a616308.js new file mode 100644 index 0000000..40adfbe --- /dev/null +++ b/docs/assets/js/6810147d.2a616308.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["540"],{898:function(e,t,r){r.r(t),r.d(t,{default:()=>f,frontMatter:()=>a,metadata:()=>s,assets:()=>l,toc:()=>u,contentTitle:()=>c});var s=JSON.parse('{"id":"features/security","title":"Security","description":"User privacy and security are taken seriously.","source":"@site/docs/features/security.mdx","sourceDirName":"features","slug":"/features/security","permalink":"/docs/features/security","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/security.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"User Management","permalink":"/docs/features/user-management"},"next":{"title":"Self-Hosting","permalink":"/docs/features/self-hosting"}}'),n=r("5893"),i=r("65"),o=r("5178");let a={},c="Security",l={},u=[];function d(e){let t={a:"a",h1:"h1",header:"header",li:"li",p:"p",ul:"ul",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"security",children:"Security"})}),"\n","\n",(0,n.jsx)(t.p,{children:"User privacy and security are taken seriously."}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:["All user code, ",(0,n.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," and compilers run in ",(0,n.jsx)(t.a,{href:"https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/",children:"sandboxed iframes"})," with a unique origin."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.a,{href:"/docs/features/embeds",children:"Embedded playgrounds"})," do not have access to the parent page, or to sensitive data like user cookies and localstorage of the embedding page origin."]}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["If you find any security vulnerability, please report it in the ",(0,n.jsx)(t.a,{href:"/docs/contact",children:"contact page"})," or by email to ",(0,n.jsx)(o.Z,{email:"security@livecodes.io",text:"security@livecodes.io"}),"\nFor other non-security-related bugs, please report them in the ",(0,n.jsx)(t.a,{href:"https://github.com/live-codes/livecodes/issues",children:"repo issues"}),"."]})]})}function f(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},5178:function(e,t,r){r.d(t,{Z:function(){return n}});var s=r(5893);function n(e){let t=e.email.replace("@","@").replace(".",".");return(0,s.jsx)("a",{href:`mailto:${t}`,target:"_blank",rel:"noopener noreferrer",children:e.text||t})}},65:function(e,t,r){r.d(t,{Z:function(){return a},a:function(){return o}});var s=r(7294);let n={},i=s.createContext(n);function o(e){let t=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/682128af.88ffad96.js b/docs/assets/js/682128af.88ffad96.js new file mode 100644 index 0000000..162ee57 --- /dev/null +++ b/docs/assets/js/682128af.88ffad96.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5609"],{6608:function(e,n,t){t.r(n),t.d(n,{default:()=>d,frontMatter:()=>c,metadata:()=>s,assets:()=>u,toc:()=>i,contentTitle:()=>a});var s=JSON.parse('{"id":"languages/unocss","title":"UnoCSS","description":"TODO...","source":"@site/docs/languages/unocss.mdx","sourceDirName":"languages","slug":"/languages/unocss","permalink":"/docs/languages/unocss","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/unocss.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"TypeScript","permalink":"/docs/languages/typescript"},"next":{"title":"Vento","permalink":"/docs/languages/vento"}}'),o=t("5893"),r=t("65");let c={},a="UnoCSS",u={},i=[];function l(e){let n={h1:"h1",header:"header",p:"p",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"unocss",children:"UnoCSS"})}),"\n",(0,o.jsx)(n.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},65:function(e,n,t){t.d(n,{Z:function(){return a},a:function(){return c}});var s=t(7294);let o={},r=s.createContext(o);function c(e){let n=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/6a7b7284.bf7af224.js b/docs/assets/js/6a7b7284.bf7af224.js new file mode 100644 index 0000000..bd7c27d --- /dev/null +++ b/docs/assets/js/6a7b7284.bf7af224.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4007"],{6544:function(e,t,o){o.r(t),o.d(t,{default:()=>h,frontMatter:()=>a,metadata:()=>s,assets:()=>d,toc:()=>c,contentTitle:()=>l});var s=JSON.parse('{"id":"features/lite","title":"Lite Mode","description":"In case you need to embed a playground in your web page to show case some code and expect users to mainly read through the code and to have just minor edits, it would be an overkill to load full-blown code editors with auto-complete and code formatting, specially if you want to embed more than one playground in the same page. That\'s why the LiveCodes playground has a lite mode.","source":"@site/docs/features/lite.mdx","sourceDirName":"features","slug":"/features/lite","permalink":"/docs/features/lite","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/lite.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Embedded Playgrounds","permalink":"/docs/features/embeds"},"next":{"title":"Read-Only","permalink":"/docs/features/read-only"}}'),n=o("5893"),r=o("65"),i=o("3365");let a={},l="Lite Mode",d={},c=[{value:"Using SDK",id:"using-sdk",level:2},{value:"Using query params",id:"using-query-params",level:2},{value:"Related",id:"related",level:2}];function u(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"lite-mode",children:"Lite Mode"})}),"\n","\n",(0,n.jsx)(t.p,{children:"In case you need to embed a playground in your web page to show case some code and expect users to mainly read through the code and to have just minor edits, it would be an overkill to load full-blown code editors with auto-complete and code formatting, specially if you want to embed more than one playground in the same page. That's why the LiveCodes playground has a lite mode."}),"\n",(0,n.jsxs)(t.p,{children:["In lite mode, a light-weight, minimal code editor is used (",(0,n.jsx)(t.a,{href:"/docs/features/editor-settings#code-editor",children:"CodeJar"}),"). ",(0,n.jsx)(t.a,{href:"/docs/features/emmet",children:"Emmet abbreviations"})," and ",(0,n.jsx)(t.a,{href:"/docs/features/tools-pane",children:"tools pane"})," are not available. However, any language supported by LiveCodes can be used, with syntax highlighting. Code edits are compiled and shown in the ",(0,n.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," as usual."]}),"\n",(0,n.jsx)(t.p,{children:"Demo:"}),"\n",(0,n.jsx)(i.Z,{template:"react",config:{mode:"lite"}}),"\n",(0,n.jsx)(t.h2,{id:"using-sdk",children:"Using SDK"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object#mode",children:(0,n.jsx)(t.code,{children:"EmbedOptions.config.mode"})})," to ",(0,n.jsx)(t.code,{children:'"lite"'}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container', { config: { mode: 'lite' } });\n"})}),"\n",(0,n.jsx)(t.h2,{id:"using-query-params",children:"Using query params"}),"\n",(0,n.jsxs)(t.p,{children:["Add the ",(0,n.jsx)(t.a,{href:"/docs/configuration/query-params",children:"query parameter"})," ",(0,n.jsx)(t.code,{children:"?mode=lite"}),"."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.a,{href:"https://livecodes.io?mode=lite",children:"https://livecodes.io?mode=lite"})}),"\n",(0,n.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"/docs/features/read-only",children:"Read-only"}),"."]}),"\n"]})]})}function h(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},3365:function(e,t,o){o.d(t,{Z:()=>g});var s=o("5893"),n=o("4200"),r=o("7294"),i=o("8294");function a(e){let t=(0,r.useRef)(null),[o,n]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[d,c]=(0,r.useState)(e.height),[u,h]=(0,r.useState)(),[m,p]=(0,r.useState)(JSON.stringify(e.config||"")),[f,g]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:o,style:s,height:r,sdkReady:a,config:d,...y}=e;if(n(o||""),l(s||{}),c(r),u&&f===JSON.stringify(y)){if(m===JSON.stringify(d))return;p(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{u?.setConfig(e)}):d&&u.setConfig(d)}else g(JSON.stringify(y)),u?.destroy(),(0,i.T)(t.current,{config:d,...y}).then(e=>{h(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{u?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:o,style:a,"data-height":d})}var l=o("1858"),d=o("3262"),c=o("1705"),u=o("7645"),h=o("8168"),m=o("8228"),p=o("5050");function f(e){let[t,o]=(0,r.useState)(e.js),[n,i]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[f,g]=(0,r.useState)(e.vue),[y,v]=(0,r.useState)(e.svelte),w="3.7rem",[b,j]=(0,r.useState)(!0),[x,S]=(0,r.useState)(w),C=(0,r.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},255)};return(0,r.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};o(e(t,"js")),i(e(n,"ts")),l(e(a,"jsx")),g(e(f,"html")),v(e(y,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${m.Z.details}`,"data-collapsed":b,style:{height:b?w:x,overflow:"hidden",willChange:"height",transition:`height ${b?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{j(!b),E()},children:"show code"}),(0,s.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:p.Z.collapsibleContent,children:(0,s.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,s.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"js",children:t})}),(0,s.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"ts",children:n})}),(0,s.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"jsx",children:a})}),(0,s.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"html",children:f})}),(0,s.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"html",children:y})})]})})})]})}function g(e){let{className:t,style:o,showCode:r,height:i,...d}=e,{colorMode:c}=(0,n.I)(),u=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${u(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(d)}; + return (); +} + +`.trimStart(),g=` + + + +`,y=` + + +
+ +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(f,{js:h,ts:m,react:p,vue:g,svelte:y})]})}},8294:function(e,t,o){o.d(t,{T:function(){return n},r:function(){return r}});var s=o(7728);async function n(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:o={},headless:s,loading:n="lazy",view:i}=t,a=s||"headless"===i,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(r(t)),u=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":n);let h=globalThis.process;c.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof o&&Object.keys(o).length>0&&c.searchParams.set("config","sdk");let m=t.params;"object"==typeof m&&Object.keys(m).length>0&&JSON.stringify(m).length<1800&&Object.keys(m).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(m[e])))});let p=!1,f="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",r=l.querySelector(`iframe.${s}`),i=r||document.createElement("iframe");i.classList.add(s),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===n?"eager":"lazy"),a?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:o},u))}),i.onload=()=>{e(i)},i.src=c.href,r||l.appendChild(i)}),y=new Promise(e=>{addEventListener("message",function t(o){o.source===g.contentWindow&&o.origin===u&&o.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>p?Promise.reject(f):new Promise(async e=>{y.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},u),await y,e()}),w=(e,t)=>new Promise(async(o,s)=>{if(p)return s(f);await v();let n=P();addEventListener("message",function t(r){if(r.source===g.contentWindow&&r.origin===u&&r.data?.type==="livecodes-api-response"&&r.data?.id===n&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?s(e.error):o(e)}}),g.contentWindow?.postMessage({method:e,id:n,args:t},u)}),b={},j=["load","ready","code","console","tests","destroy"],x=(e,t)=>{if(p)throw Error(f);return j.includes(e)?(w("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&w("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==u||!t||!b[t])return;let o=e.data?.payload;b[t]?.forEach(e=>{e(o)})});let C=()=>{Object.values(b).forEach(e=>{e.length=0}),g?.remove?.(),p=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>w("run"),format:e=>w("format",[e]),getShareUrl:e=>w("getShareUrl",[e]),getConfig:e=>w("getConfig",[e]),setConfig:e=>w("setConfig",[e]),getCode:()=>w("getCode"),show:(e,t)=>w("show",[e,t]),runTests:()=>w("runTests"),onChange:e=>x("code",e),watch:x,exec:function(e){for(var t=arguments.length,o=Array(t>1?t-1:0),s=1;sy.settled?w("destroy").then(C):p?Promise.reject(f):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:o="https://livecodes.io",params:n={},config:r={},headless:i,import:a,lite:l,view:d,...c}=t;try{e=new URL(o)}catch{throw Error(`${o} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(c).forEach(t=>{let[o,s]=t;void 0!==s&&e.searchParams.set(o,String(s))});let h="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==d?r.view=d:e.searchParams.set("view",d)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),u.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(r))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{u.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(n[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,o){o.d(t,{Z:function(){return a},a:function(){return i}});var s=o(7294);let n={},r=s.createContext(n);function i(e){let t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/6b6763dd.a57f3c47.js b/docs/assets/js/6b6763dd.a57f3c47.js new file mode 100644 index 0000000..0f690e7 --- /dev/null +++ b/docs/assets/js/6b6763dd.a57f3c47.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4501"],{511:function(e,t,n){n.r(t),n.d(t,{default:()=>u,frontMatter:()=>s,metadata:()=>o,assets:()=>d,toc:()=>a,contentTitle:()=>c});var o=JSON.parse('{"id":"contribution","title":"Contribution","description":"Contributions are always welcome, no matter how large or small. Before contributing,","source":"@site/docs/contribution.mdx","sourceDirName":".","slug":"/contribution","permalink":"/docs/contribution","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/contribution.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Markdown to LiveCodes","permalink":"/docs/markdown-to-livecodes"},"next":{"title":"Credits","permalink":"/docs/credits"}}'),r=n("5893"),i=n("65");let s={},c="Contribution",d={},a=[];function l(e){let t={a:"a",h1:"h1",header:"header",p:"p",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"contribution",children:"Contribution"})}),"\n",(0,r.jsxs)(t.p,{children:["Contributions are always welcome, no matter how large or small. Before contributing,\nplease read the ",(0,r.jsx)(t.a,{href:"https://github.com/live-codes/livecodes/blob/HEAD/CODE_OF_CONDUCT.mdx",children:"code of conduct"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["For code contribution, please refer to the ",(0,r.jsx)(t.a,{href:"https://github.com/live-codes/livecodes/blob/HEAD/CONTRIBUTING.mdx",children:"contribution guide"}),"\n."]}),"\n",(0,r.jsxs)(t.p,{children:["For financial and in-kind contributions, please refer to the ",(0,r.jsx)(t.a,{href:"/docs/sponsor",children:"sponsor page"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["You can always support the project by ",(0,r.jsx)(t.a,{href:"https://github.com/live-codes/livecodes/discussions",children:"giving feedback"}),", ",(0,r.jsx)(t.a,{href:"https://github.com/live-codes/livecodes/issues",children:"reporting issues, suggesting features"})," and spreading the word."]}),"\n",(0,r.jsx)(t.p,{children:"Thank you :)"})]})}function u(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},65:function(e,t,n){n.d(t,{Z:function(){return c},a:function(){return s}});var o=n(7294);let r={},i=o.createContext(r);function s(e){let t=o.useContext(i);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),o.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/6c8f697c.c831c339.js b/docs/assets/js/6c8f697c.c831c339.js new file mode 100644 index 0000000..2e6b013 --- /dev/null +++ b/docs/assets/js/6c8f697c.c831c339.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2289"],{7088:function(e,t,s){s.r(t),s.d(t,{default:()=>d,frontMatter:()=>l,metadata:()=>n,assets:()=>u,toc:()=>c,contentTitle:()=>o});var n=JSON.parse('{"id":"languages/stylus","title":"Stylus","description":"TODO...","source":"@site/docs/languages/stylus.mdx","sourceDirName":"languages","slug":"/languages/stylus","permalink":"/docs/languages/stylus","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/stylus.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Stylis","permalink":"/docs/languages/stylis"},"next":{"title":"Sucrase","permalink":"/docs/languages/sucrase"}}'),r=s("5893"),a=s("65");let l={},o="Stylus",u={},c=[];function i(e){let t={h1:"h1",header:"header",p:"p",...(0,a.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"stylus",children:"Stylus"})}),"\n",(0,r.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(i,{...e})}):i(e)}},65:function(e,t,s){s.d(t,{Z:function(){return o},a:function(){return l}});var n=s(7294);let r={},a=n.createContext(r);function l(e){let t=n.useContext(a);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/6ce44407.cf2a9db4.js b/docs/assets/js/6ce44407.cf2a9db4.js new file mode 100644 index 0000000..8b1ca94 --- /dev/null +++ b/docs/assets/js/6ce44407.cf2a9db4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["554"],{1902:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>c,metadata:()=>o,assets:()=>l,toc:()=>a,contentTitle:()=>i});var o=JSON.parse('{"id":"languages/clio","title":"Clio","description":"TODO...","source":"@site/docs/languages/clio.mdx","sourceDirName":"languages","slug":"/languages/clio","permalink":"/docs/languages/clio","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/clio.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Civet","permalink":"/docs/languages/civet"},"next":{"title":"ClojureScript","permalink":"/docs/languages/clojurescript"}}'),r=n("5893"),s=n("65");let c={},i="Clio",l={},a=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"clio",children:"Clio"})}),"\n",(0,r.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},65:function(e,t,n){n.d(t,{Z:function(){return i},a:function(){return c}});var o=n(7294);let r={},s=o.createContext(r);function c(e){let t=o.useContext(s);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/6d62e4e7.c188ae16.js b/docs/assets/js/6d62e4e7.c188ae16.js new file mode 100644 index 0000000..369e6d5 --- /dev/null +++ b/docs/assets/js/6d62e4e7.c188ae16.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2175"],{9224:function(e,n,t){t.r(n),t.d(n,{default:()=>u,frontMatter:()=>o,metadata:()=>s,assets:()=>c,toc:()=>d,contentTitle:()=>a});var s=JSON.parse('{"id":"languages/windicss","title":"Windi CSS","description":"TODO...","source":"@site/docs/languages/windicss.mdx","sourceDirName":"languages","slug":"/languages/windicss","permalink":"/docs/languages/windicss","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/windicss.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"WebAssembly Text","permalink":"/docs/languages/wat"},"next":{"title":"Bookmarklet","permalink":"/docs/bookmarklet"}}'),i=t("5893"),r=t("65");let o={},a="Windi CSS",c={},d=[];function l(e){let n={h1:"h1",header:"header",p:"p",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"windi-css",children:"Windi CSS"})}),"\n",(0,i.jsx)(n.p,{children:"TODO..."})]})}function u(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},65:function(e,n,t){t.d(n,{Z:function(){return a},a:function(){return o}});var s=t(7294);let i={},r=s.createContext(i);function o(e){let n=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/6e898280.7e5bc27d.js b/docs/assets/js/6e898280.7e5bc27d.js new file mode 100644 index 0000000..fb36e0e --- /dev/null +++ b/docs/assets/js/6e898280.7e5bc27d.js @@ -0,0 +1,70 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7714"],{2322:function(e,t,n){n.r(t),n.d(t,{config:()=>d,config2:()=>u,default:()=>m,frontMatter:()=>o,metadata:()=>s,assets:()=>c,params:()=>h,toc:()=>p,contentTitle:()=>l});var s=JSON.parse('{"id":"languages/jinja","title":"Jinja","description":"Jinja is a fast, expressive, extensible templating engine. Special placeholders in the template allow writing code similar to Python syntax. Then the template is passed data to render the final document.","source":"@site/docs/languages/jinja.mdx","sourceDirName":"languages","slug":"/languages/jinja","permalink":"/docs/languages/jinja","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/jinja.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"JavaScript","permalink":"/docs/languages/javascript"},"next":{"title":"JSX","permalink":"/docs/languages/jsx"}}'),i=n("5893"),a=n("65"),r=n("3365");let o={},l="Jinja",c={},d={markup:{language:"jinja",content:` + +

My Webpage

+{{ a_variable }} + +`},customSettings:{template:{data:{navigation:[{href:"/",caption:"Home"},{href:"/about",caption:"About"},{href:"/contact",caption:"Contact"}],a_variable:"Hello World!"}}}},h={compiled:"open"},u={markup:{language:"jinja",content:` + +

My Webpage

+{{ a_variable }} + +`},script:{language:"javascript",content:`window.livecodes.templateData = { + navigation: [ + { href: "/", caption: "Home" }, + { href: "/about", caption: "About" }, + { href: "/contact", caption: "Contact" }, + ], + a_variable: "Hello World!", +};`},customSettings:{template:{prerender:!1}},activeEditor:"script"},p=[{value:"Usage",id:"usage",level:2},{value:"Pre-rendered (Default)",id:"pre-rendered-default",level:3},{value:"Dynamic",id:"dynamic",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Pre-rendered",id:"pre-rendered",level:3},{value:"Dynamic",id:"dynamic-1",level:3},{value:"Links",id:"links",level:2}];function g(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"jinja",children:"Jinja"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://jinja.palletsprojects.com/",children:"Jinja"})," is a fast, expressive, extensible templating engine. Special placeholders in the template allow writing code similar to Python syntax. Then the template is passed data to render the final document."]}),"\n",(0,i.jsxs)(t.p,{children:["LiveCodes uses a ",(0,i.jsx)(t.a,{href:"https://github.com/huggingface/huggingface.js/tree/main/packages/jinja",children:"minimalistic JavaScript implementation"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.p,{children:"There are 2 modes for rendering:"}),"\n",(0,i.jsx)(t.h3,{id:"pre-rendered-default",children:"Pre-rendered (Default)"}),"\n",(0,i.jsxs)(t.p,{children:["The values of the expressions are evaluated and added to the template during compilation of the ",(0,i.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["The values of all expressions should be supplied in advance using ",(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," to the property ",(0,i.jsx)(t.code,{children:"template.data"})," which accepts an object of key-value pairs."]}),"\n",(0,i.jsxs)(t.p,{children:["Example: This provides the value of the expression ",(0,i.jsx)(t.code,{children:"name"})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "data": {\n "name": "LiveCodes"\n }\n }\n}\n'})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"#pre-rendered",children:"Full example below"})}),"\n",(0,i.jsx)(t.h3,{id:"dynamic",children:"Dynamic"}),"\n",(0,i.jsxs)(t.p,{children:["To use this mode, the property ",(0,i.jsx)(t.code,{children:"template.prerender"})," in ",(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," should be set to ",(0,i.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "prerender": false\n }\n}\n'})}),"\n",(0,i.jsxs)(t.p,{children:["In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the ",(0,i.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," runtime."]}),"\n",(0,i.jsxs)(t.p,{children:["This can be achieved in JavaScript (or any ",(0,i.jsx)(t.a,{href:"/docs/languages/",children:"language"})," that compiles to it) by assigning ",(0,i.jsx)(t.code,{children:"window.livecodes.templateData"})," to an object with the data."]}),"\n",(0,i.jsxs)(t.p,{children:["Please note that template rendering occurs on ",(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event",children:"page load"}),", so the assignment must occur before that."]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",metastring:'title="Script Editor (JS)"',children:"window.livecodes.templateData = { name: 'LiveCodes' };\n"})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"#dynamic-1",children:"Full example below"})}),"\n",(0,i.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"jinja"})}),"\n",(0,i.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:".jinja"})}),"\n",(0,i.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"markup"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://www.npmjs.com/package/@huggingface/jinja",children:"@huggingface/jinja"}),"."]}),"\n",(0,i.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"@huggingface/jinja"}),": v0.5.0"]}),"\n",(0,i.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(t.p,{children:["Using ",(0,i.jsx)(t.code,{children:"@huggingface/jinja"})," integrated formatted."]}),"\n",(0,i.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n",(0,i.jsx)(t.h3,{id:"pre-rendered",children:"Pre-rendered"}),"\n","\n","\n",(0,i.jsx)(r.Z,{config:d,params:h}),"\n",(0,i.jsx)(t.h3,{id:"dynamic-1",children:"Dynamic"}),"\n","\n",(0,i.jsx)(r.Z,{config:u}),"\n",(0,i.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://jinja.palletsprojects.com/",children:"Jinja"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://jinja.palletsprojects.com/en/stable/templates/",children:"Template Documentation"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.npmjs.com/package/@huggingface/jinja",children:(0,i.jsx)(t.code,{children:"@huggingface/jinja"})})}),"\n"]})]})}function m(e={}){let{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(g,{...e})}):g(e)}},3365:function(e,t,n){n.d(t,{Z:()=>f});var s=n("5893"),i=n("4200"),a=n("7294"),r=n("8294");function o(e){let t=(0,a.useRef)(null),[n,i]=(0,a.useState)(e.className||""),[o,l]=(0,a.useState)(e.style||{}),[c,d]=(0,a.useState)(e.height),[h,u]=(0,a.useState)(),[p,g]=(0,a.useState)(JSON.stringify(e.config||"")),[m,f]=(0,a.useState)("");return(0,a.useEffect)(()=>{if(!t.current)return;let{className:n,style:s,height:a,sdkReady:o,config:c,...j}=e;if(i(n||""),l(s||{}),d(a),h&&m===JSON.stringify(j)){if(p===JSON.stringify(c))return;g(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else f(JSON.stringify(j)),h?.destroy(),(0,r.T)(t.current,{config:c,...j}).then(e=>{u(e),"function"==typeof o&&o(e)})},[e]),(0,a.useEffect)(()=>()=>{h?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:n,style:o,"data-height":c})}var l=n("1858"),c=n("3262"),d=n("1705"),h=n("7645"),u=n("8168"),p=n("8228"),g=n("5050");function m(e){let[t,n]=(0,a.useState)(e.js),[i,r]=(0,a.useState)(e.ts),[o,l]=(0,a.useState)(e.react),[m,f]=(0,a.useState)(e.vue),[j,v]=(0,a.useState)(e.svelte),x="3.7rem",[y,b]=(0,a.useState)(!0),[w,S]=(0,a.useState)(x),C=(0,a.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},255)};return(0,a.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};n(e(t,"js")),r(e(i,"ts")),l(e(o,"jsx")),f(e(m,"html")),v(e(j,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${g.Z.details} ${p.Z.details}`,"data-collapsed":y,style:{height:y?x:w,overflow:"hidden",willChange:"height",transition:`height ${y?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{b(!y),E()},children:"show code"}),(0,s.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:g.Z.collapsibleContent,children:(0,s.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,s.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,s.jsx)(d.Z,{language:"js",children:t})}),(0,s.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,s.jsx)(d.Z,{language:"ts",children:i})}),(0,s.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,s.jsx)(d.Z,{language:"jsx",children:o})}),(0,s.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,s.jsx)(d.Z,{language:"html",children:m})}),(0,s.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,s.jsx)(d.Z,{language:"html",children:j})})]})})})]})}function f(e){let{className:t,style:n,showCode:a,height:r,...c}=e,{colorMode:d}=(0,i.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),g=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(c)}; + return (); +} + +`.trimStart(),f=` + + + +`,j=` + + +
+ +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(o,{className:`container_Egsj ${e.className}`,style:{height:r||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(m,{js:u,ts:p,react:g,vue:f,svelte:j})]})}},8294:function(e,t,n){n.d(t,{T:function(){return i},r:function(){return a}});var s=n(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:s,loading:i="lazy",view:r}=t,o=s||"headless"===r,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(o&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(o)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(a(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",o?"eager":i);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let g=!1,m="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!o){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||o||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",a=l.querySelector(`iframe.${s}`),r=a||document.createElement("iframe");r.classList.add(s),r.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),r.setAttribute("allowtransparency","true"),r.setAttribute("allowpaymentrequest","true"),r.setAttribute("allowfullscreen","true"),r.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),r.setAttribute("loading","eager"===i?"eager":"lazy"),o?E(r):(r.style.height="100%",r.style.minHeight="200px",r.style.width="100%",r.style.margin="0",r.style.border="0",r.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),r.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),r.onload=()=>{e(r)},r.src=d.href,a||l.appendChild(r)}),j=new Promise(e=>{addEventListener("message",function t(n){n.source===f.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),j.settled=!0)})}),v=()=>g?Promise.reject(m):new Promise(async e=>{j.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await j,e()}),x=(e,t)=>new Promise(async(n,s)=>{if(g)return s(m);await v();let i=P();addEventListener("message",function t(a){if(a.source===f.contentWindow&&a.origin===h&&a.data?.type==="livecodes-api-response"&&a.data?.id===i&&a.data.method===e){removeEventListener("message",t);let e=a.data.payload;e?.error?s(e.error):n(e)}}),f.contentWindow?.postMessage({method:e,id:i,args:t},h)}),y={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(g)throw Error(m);return b.includes(e)?(x("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!y[t])return;let n=e.data?.payload;y[t]?.forEach(e=>{e(n)})});let C=()=>{Object.values(y).forEach(e=>{e.length=0}),f?.remove?.(),g=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;sj.settled?x("destroy").then(C):g?Promise.reject(m):(C(),Promise.resolve())}}function a(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:i={},config:a={},headless:r,import:o,lite:l,view:c,...d}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let u="headless"===t.view||r;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof a&&null==a.mode?a.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof a&&null==a.view&&"headless"!==c?a.view=c:e.searchParams.set("view",c)),"string"==typeof a)try{new URL(a),e.searchParams.set("config",encodeURIComponent(a))}catch{throw Error('"config" is not a valid URL or configuration object.')}else a&&"object"==typeof a&&Object.keys(a).length>0&&(a.title&&"Untitled Project"!==a.title&&e.searchParams.set("title",a.title),a.description&&a.description.length>0&&e.searchParams.set("description",a.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(a))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{h.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return o&&e.searchParams.set("x",encodeURIComponent(o)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return o},a:function(){return r}});var s=n(7294);let i={},a=s.createContext(i);function r(e){let t=s.useContext(a);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/6eb5acb9.789a32e8.js b/docs/assets/js/6eb5acb9.789a32e8.js new file mode 100644 index 0000000..83dd433 --- /dev/null +++ b/docs/assets/js/6eb5acb9.789a32e8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["110"],{6574:function(e,s,t){t.r(s),t.d(s,{default:()=>l,frontMatter:()=>o,metadata:()=>n,assets:()=>c,toc:()=>d,contentTitle:()=>a});var n=JSON.parse('{"id":"features/user-management","title":"User Management","description":"Generally, LiveCodes can be used anonymously without any accounts. This includes creating/saving projects and importing code from GitHub gists or public repos.","source":"@site/docs/features/user-management.mdx","sourceDirName":"features","slug":"/features/user-management","permalink":"/docs/features/user-management","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/user-management.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Integrations","permalink":"/docs/features/integrations"},"next":{"title":"Security","permalink":"/docs/features/security"}}'),r=t("5893"),i=t("65");let o={},a="User Management",c={},d=[{value:"User Data",id:"user-data",level:2},{value:"Login/Logout",id:"loginlogout",level:2}];function u(e){let s={a:"a",admonition:"admonition",h1:"h1",h2:"h2",header:"header",p:"p",strong:"strong",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.header,{children:(0,r.jsx)(s.h1,{id:"user-management",children:"User Management"})}),"\n",(0,r.jsxs)(s.p,{children:["Generally, LiveCodes can be used anonymously without any accounts. This includes creating/saving ",(0,r.jsx)(s.a,{href:"/docs/features/projects",children:"projects"})," and ",(0,r.jsx)(s.a,{href:"/docs/features/import",children:"importing"})," code from GitHub gists or public repos."]}),"\n",(0,r.jsxs)(s.p,{children:["However, some features do require login with a GitHub account and giving ",(0,r.jsx)(s.a,{href:"https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/scopes-for-oauth-apps#available-scopes",children:"specific permissions"})," to make use of GitHub services (e.g. ",(0,r.jsx)(s.a,{href:"/docs/features/import",children:"import"})," from private repos, ",(0,r.jsx)(s.a,{href:"/docs/features/export",children:"export"})," to gist, ",(0,r.jsx)(s.a,{href:"/docs/features/deploy",children:"deploy"}),", ",(0,r.jsx)(s.a,{href:"/docs/features/assets",children:"assets"})," and ",(0,r.jsx)(s.a,{href:"/docs/features/sync",children:"sync"}),")."]}),"\n",(0,r.jsxs)(s.p,{children:["Please see the section about ",(0,r.jsx)(s.a,{href:"/docs/features/github-integration",children:"GitHub Integration"})," for permissions required and how to change them."]}),"\n",(0,r.jsx)(s.admonition,{title:"cookies",type:"caution",children:(0,r.jsxs)(s.p,{children:["User authentication is handled using ",(0,r.jsx)(s.a,{href:"https://firebase.google.com/products/auth",children:"Firebase Authentication"})," which ",(0,r.jsx)(s.strong,{children:"may use cookies"}),". By logging in, you agree that cookies may be stored on your device."]})}),"\n",(0,r.jsxs)(s.admonition,{title:"note",type:"info",children:[(0,r.jsx)(s.p,{children:"GitHub user permissions for LiveCodes app are set the first time the user logs in. Any subsequent login will use the first permissions, even if they are set differently."}),(0,r.jsxs)(s.p,{children:["Please see the section about ",(0,r.jsx)(s.a,{href:"/docs/features/github-integration#setting-permissions",children:"GitHub Integration"})," for how to change/revoke permissions ."]})]}),"\n",(0,r.jsx)(s.h2,{id:"user-data",children:"User Data"}),"\n",(0,r.jsxs)(s.p,{children:["User data includes ",(0,r.jsx)(s.a,{href:"/docs/features/projects",children:"saved projects"}),", ",(0,r.jsx)(s.a,{href:"/docs/features/snippets",children:"code snippets"}),", ",(0,r.jsx)(s.a,{href:"/docs/features/assets",children:"assets"})," and ",(0,r.jsx)(s.a,{href:"/docs/features/user-settings",children:"user settings"}),". This data is saved in the browser linked to the logged in user account. When a user first logs in, data that was previously saved anonymously is linked to that user account."]}),"\n",(0,r.jsx)(s.p,{children:"If the user logs off, the data is cleared from the app, but is kept in the browser storage. This allows another user to use the same device without the data leaking. When the user, logs in again, the previously stored data (under that account) is reloaded to the app."}),"\n",(0,r.jsx)(s.h2,{id:"loginlogout",children:"Login/Logout"}),"\n",(0,r.jsx)(s.p,{children:"Login/Logout links are accessible at the top right corner of the app."}),"\n",(0,r.jsx)(s.admonition,{title:"note",type:"info",children:(0,r.jsxs)(s.p,{children:["All user management features, including ability to login/logout, access to user data, and ",(0,r.jsx)(s.a,{href:"/docs/features/github-integration",children:"GitHub services"})," that require account, are not available in ",(0,r.jsx)(s.a,{href:"/docs/features/embeds",children:"embedded playgrounds"}),"."]})})]})}function l(e={}){let{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},65:function(e,s,t){t.d(s,{Z:function(){return a},a:function(){return o}});var n=t(7294);let r={},i=n.createContext(r);function o(e){let s=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(i.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/6ffa2daf.fb0c4c66.js b/docs/assets/js/6ffa2daf.fb0c4c66.js new file mode 100644 index 0000000..4331d67 --- /dev/null +++ b/docs/assets/js/6ffa2daf.fb0c4c66.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6873"],{7394:function(e,t,r){r.r(t),r.d(t,{default:()=>l,frontMatter:()=>c,metadata:()=>n,assets:()=>u,toc:()=>d,contentTitle:()=>a});var n=JSON.parse('{"id":"features/recover","title":"Recover Unsaved","description":"","source":"@site/docs/features/recover.mdx","sourceDirName":"features","slug":"/features/recover","permalink":"/docs/features/recover","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/recover.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Welcome Screen","permalink":"/docs/features/welcome"},"next":{"title":"Code to Image","permalink":"/docs/features/code-to-image"}}'),o=r("5893"),s=r("65");let c={},a="Recover Unsaved",u={},d=[];function i(e){let t={h1:"h1",header:"header",...(0,s.a)(),...e.components};return(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"recover-unsaved",children:"Recover Unsaved"})})}function l(e={}){let{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(i,{...e})}):i(e)}},65:function(e,t,r){r.d(t,{Z:function(){return a},a:function(){return c}});var n=r(7294);let o={},s=n.createContext(o);function c(e){let t=n.useContext(s);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),n.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/704479ec.b10a2ab9.js b/docs/assets/js/704479ec.b10a2ab9.js new file mode 100644 index 0000000..aeff092 --- /dev/null +++ b/docs/assets/js/704479ec.b10a2ab9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6961"],{7781:function(e,t,r){r.r(t),r.d(t,{default:()=>h,frontMatter:()=>c,metadata:()=>s,assets:()=>d,toc:()=>i,contentTitle:()=>a});var s=JSON.parse('{"id":"features/keyboard-shortcuts","title":"Keyboard Shortcuts","description":"Many commands can be executed from the keyboard using keyboard shortcuts. The full list can be found in the Keyboard Shortcuts screen, which can be accessed from the Help Menu or from the command menu by pressing Ctrl + K (or \u2318 + K on Mac) and searching for \\"Keyboard Shortcuts\\".","source":"@site/docs/features/keyboard-shortcuts.mdx","sourceDirName":"features","slug":"/features/keyboard-shortcuts","permalink":"/docs/features/keyboard-shortcuts","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/keyboard-shortcuts.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Command Menu","permalink":"/docs/features/command-menu"},"next":{"title":"User Settings","permalink":"/docs/features/user-settings"}}'),n=r("5893"),o=r("65");let c={},a="Keyboard Shortcuts",d={},i=[];function u(e){let t={a:"a",h1:"h1",header:"header",img:"img",p:"p",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"keyboard-shortcuts",children:"Keyboard Shortcuts"})}),"\n",(0,n.jsxs)(t.p,{children:["Many commands can be executed from the keyboard using keyboard shortcuts. The full list can be found in the ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?screen=keyboard-shortcuts",children:"Keyboard Shortcuts screen"}),", which can be accessed from the Help Menu or from the ",(0,n.jsx)(t.a,{href:"/docs/features/command-menu",children:"command menu"})," by pressing ",(0,n.jsx)("kbd",{children:"Ctrl"})," + ",(0,n.jsx)("kbd",{children:"K"})," (or ",(0,n.jsx)("kbd",{children:"\u2318"})," + ",(0,n.jsx)("kbd",{children:"K"}),' on Mac) and searching for "Keyboard Shortcuts".']}),"\n",(0,n.jsxs)(t.p,{children:["The code editor shortcuts are the same as VS Code, which can be found ",(0,n.jsx)(t.a,{href:"https://code.visualstudio.com/docs/getstarted/keybindings#_basic-editing",children:"here"}),"."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Keyboard Shortcuts",src:r(715).Z+"",width:"2240",height:"1400"})})]})}function h(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},715:function(e,t,r){r.d(t,{Z:function(){return s}});let s=r.p+"assets/images/keyboard-shortcuts-708a9ca16ed79cd65ab100291a7e946a.jpg"},65:function(e,t,r){r.d(t,{Z:function(){return a},a:function(){return c}});var s=r(7294);let n={},o=s.createContext(n);function c(e){let t=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:c(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/719f8225.689214ba.js b/docs/assets/js/719f8225.689214ba.js new file mode 100644 index 0000000..0fcdd94 --- /dev/null +++ b/docs/assets/js/719f8225.689214ba.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2080"],{343:function(e,t,s){s.r(t),s.d(t,{default:()=>p,frontMatter:()=>a,metadata:()=>o,assets:()=>c,toc:()=>d,contentTitle:()=>l});var o=JSON.parse('{"id":"examples/display-modes/editor","title":"editor","description":"","source":"@site/docs/examples/display-modes/editor.mdx","sourceDirName":"examples/display-modes","slug":"/examples/display-modes/editor","permalink":"/docs/examples/display-modes/editor","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/examples/display-modes/editor.mdx","tags":[],"version":"current","frontMatter":{"title":"editor"},"sidebar":"examplesSidebar","previous":{"title":"full","permalink":"/docs/examples/display-modes/full"},"next":{"title":"codeblock","permalink":"/docs/examples/display-modes/codeblock"}}'),r=s("5893"),n=s("65"),i=s("3365");let a={title:"editor"},l="Display Mode: editor",c={},d=[];function u(e){let t={h1:"h1",header:"header",...(0,n.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"display-mode-editor",children:"Display Mode: editor"})}),"\n","\n",(0,r.jsx)(i.Z,{config:{mode:"editor"},template:"react"})]})}function p(e={}){let{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},3365:function(e,t,s){s.d(t,{Z:()=>g});var o=s("5893"),r=s("4200"),n=s("7294"),i=s("8294");function a(e){let t=(0,n.useRef)(null),[s,r]=(0,n.useState)(e.className||""),[a,l]=(0,n.useState)(e.style||{}),[c,d]=(0,n.useState)(e.height),[u,p]=(0,n.useState)(),[m,h]=(0,n.useState)(JSON.stringify(e.config||"")),[f,g]=(0,n.useState)("");return(0,n.useEffect)(()=>{if(!t.current)return;let{className:s,style:o,height:n,sdkReady:a,config:c,...y}=e;if(r(s||""),l(o||{}),d(n),u&&f===JSON.stringify(y)){if(m===JSON.stringify(c))return;h(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else g(JSON.stringify(y)),u?.destroy(),(0,i.T)(t.current,{config:c,...y}).then(e=>{p(e),"function"==typeof a&&a(e)})},[e]),(0,n.useEffect)(()=>()=>{u?.destroy()},[]),(0,o.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),u=s("7645"),p=s("8168"),m=s("8228"),h=s("5050");function f(e){let[t,s]=(0,n.useState)(e.js),[r,i]=(0,n.useState)(e.ts),[a,l]=(0,n.useState)(e.react),[f,g]=(0,n.useState)(e.vue),[y,v]=(0,n.useState)(e.svelte),w="3.7rem",[b,x]=(0,n.useState)(!0),[j,S]=(0,n.useState)(w),C=(0,n.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},255)};return(0,n.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(r,"ts")),l(e(a,"jsx")),g(e(f,"html")),v(e(y,"html"))}},[]),(0,o.jsxs)("details",{className:`alert alert--info ${h.Z.details} ${m.Z.details}`,"data-collapsed":b,style:{height:b?w:j,overflow:"hidden",willChange:"height",transition:`height ${b?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,o.jsx)("summary",{onClick:()=>{x(!b),E()},children:"show code"}),(0,o.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,o.jsx)("div",{className:h.Z.collapsibleContent,children:(0,o.jsxs)(p.Z,{groupId:"sdk-code",children:[(0,o.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"js",children:t})}),(0,o.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"ts",children:r})}),(0,o.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"jsx",children:a})}),(0,o.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"html",children:f})}),(0,o.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"html",children:y})})]})})})]})}function g(e){let{className:t,style:s,showCode:n,height:i,...c}=e,{colorMode:d}=(0,r.I)(),u=e=>JSON.stringify(e,null,2),p=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),h=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (); +} + +`.trimStart(),g=` + + + +`,y=` + + +
+ +`.trimStart();return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,o.jsx)(f,{js:p,ts:m,react:h,vue:g,svelte:y})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return n}});var o=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:o,loading:r="lazy",view:i}=t,a=o||"headless"===i,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(n(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":r);let p=globalThis.process;d.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let m=t.params;"object"==typeof m&&Object.keys(m).length>0&&JSON.stringify(m).length<1800&&Object.keys(m).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(m[e])))});let h=!1,f="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let o="livecodes",n=l.querySelector(`iframe.${o}`),i=n||document.createElement("iframe");i.classList.add(o),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===r?"eager":"lazy"),a?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),i.onload=()=>{e(i)},i.src=d.href,n||l.appendChild(i)}),y=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>h?Promise.reject(f):new Promise(async e=>{y.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},u),await y,e()}),w=(e,t)=>new Promise(async(s,o)=>{if(h)return o(f);await v();let r=P();addEventListener("message",function t(n){if(n.source===g.contentWindow&&n.origin===u&&n.data?.type==="livecodes-api-response"&&n.data?.id===r&&n.data.method===e){removeEventListener("message",t);let e=n.data.payload;e?.error?o(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:r,args:t},u)}),b={},x=["load","ready","code","console","tests","destroy"],j=(e,t)=>{if(h)throw Error(f);return x.includes(e)?(w("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&w("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==u||!t||!b[t])return;let s=e.data?.payload;b[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(b).forEach(e=>{e.length=0}),g?.remove?.(),h=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>w("run"),format:e=>w("format",[e]),getShareUrl:e=>w("getShareUrl",[e]),getConfig:e=>w("getConfig",[e]),setConfig:e=>w("setConfig",[e]),getCode:()=>w("getCode"),show:(e,t)=>w("show",[e,t]),runTests:()=>w("runTests"),onChange:e=>j("code",e),watch:j,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),o=1;oy.settled?w("destroy").then(C):h?Promise.reject(f):(C(),Promise.resolve())}}function n(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:n={},headless:i,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,o]=t;void 0!==o&&e.searchParams.set(s,String(o))});let p="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof n&&null==n.mode?n.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof n&&null==n.view&&"headless"!==c?n.view=c:e.searchParams.set("view",c)),"string"==typeof n)try{new URL(n),e.searchParams.set("config",encodeURIComponent(n))}catch{throw Error('"config" is not a valid URL or configuration object.')}else n&&"object"==typeof n&&Object.keys(n).length>0&&(n.title&&"Untitled Project"!==n.title&&e.searchParams.set("title",n.title),n.description&&n.description.length>0&&e.searchParams.set("description",n.description),u.set("config","code/"+(0,o.compressToEncodedURIComponent)(JSON.stringify(n))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{u.set("params",(0,o.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),p&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return i}});var o=s(7294);let r={},n=o.createContext(r);function i(e){let t=o.useContext(n);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/71bd286e.c3909f4e.js b/docs/assets/js/71bd286e.c3909f4e.js new file mode 100644 index 0000000..a455dff --- /dev/null +++ b/docs/assets/js/71bd286e.c3909f4e.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7848"],{9713:function(e,t,n){n.r(t),n.d(t,{config:()=>c,config2:()=>u,default:()=>m,frontMatter:()=>a,metadata:()=>s,assets:()=>d,params:()=>h,toc:()=>p,contentTitle:()=>l});var s=JSON.parse('{"id":"languages/pug","title":"Pug","description":"Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. It was formerly known as \\"Jade\\".","source":"@site/docs/languages/pug.mdx","sourceDirName":"languages","slug":"/languages/pug","permalink":"/docs/languages/pug","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/pug.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Prolog","permalink":"/docs/languages/prolog"},"next":{"title":"PurgeCSS","permalink":"/docs/languages/purgecss"}}'),r=n("5893"),i=n("65"),o=n("3365");let a={},l="Pug",d={},c={markup:{language:"pug",content:"p Hello, #{name}!"},customSettings:{template:{data:{name:"LiveCodes"}}}},h={compiled:"open"},u={markup:{language:"pug",content:"p Hello, #{name}!"},script:{language:"javascript",content:'window.livecodes.templateData = { name: "LiveCodes" };'},customSettings:{template:{prerender:!1}},activeEditor:"script"},p=[{value:"Usage",id:"usage",level:2},{value:"Pre-rendered (Default)",id:"pre-rendered-default",level:3},{value:"Dynamic",id:"dynamic",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Pre-rendered",id:"pre-rendered",level:3},{value:"Dynamic",id:"dynamic-1",level:3},{value:"Links",id:"links",level:2}];function g(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"pug",children:"Pug"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://pugjs.org/",children:"Pug"})," is a high-performance template engine heavily influenced by ",(0,r.jsx)(t.a,{href:"https://haml.info/",children:"Haml"}),' and implemented with JavaScript for Node.js and browsers. It was formerly known as "Jade".']}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.p,{children:"There are 2 modes for rendering:"}),"\n",(0,r.jsx)(t.h3,{id:"pre-rendered-default",children:"Pre-rendered (Default)"}),"\n",(0,r.jsxs)(t.p,{children:["The values of the expressions are evaluated and added to the template during compilation of the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["The values of all expressions should be supplied in advance using ",(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," to the property ",(0,r.jsx)(t.code,{children:"template.data"})," which accepts an object of key-value pairs."]}),"\n",(0,r.jsxs)(t.p,{children:["Example: This provides the value of the expression ",(0,r.jsx)(t.code,{children:"name"})]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "data": {\n "name": "LiveCodes"\n }\n }\n}\n'})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"#pre-rendered",children:"Full example below"})}),"\n",(0,r.jsx)(t.h3,{id:"dynamic",children:"Dynamic"}),"\n",(0,r.jsxs)(t.p,{children:["To use this mode, the property ",(0,r.jsx)(t.code,{children:"template.prerender"})," in ",(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," should be set to ",(0,r.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "prerender": false\n }\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," runtime."]}),"\n",(0,r.jsxs)(t.p,{children:["This can be achieved in JavaScript (or any ",(0,r.jsx)(t.a,{href:"/docs/languages/",children:"language"})," that compiles to it) by assigning ",(0,r.jsx)(t.code,{children:"window.livecodes.templateData"})," to an object with the data."]}),"\n",(0,r.jsxs)(t.p,{children:["Please note that template rendering occurs on ",(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event",children:"page load"}),", so the assignment must occur before that."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:'title="Script Editor (JS)"',children:"window.livecodes.templateData = { name: 'LiveCodes' };\n"})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"#dynamic-1",children:"Full example below"})}),"\n",(0,r.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"pug"})}),"\n",(0,r.jsx)(t.h3,{id:"extensions",children:"Extensions"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:".pug"}),", ",(0,r.jsx)(t.code,{children:".jade"})]}),"\n",(0,r.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"markup"})}),"\n",(0,r.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsxs)(t.p,{children:["The official ",(0,r.jsx)(t.a,{href:"https://www.npmjs.com/package/pug",children:"Pug compiler"}),"."]}),"\n",(0,r.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"pug"}),": v3.0.2"]}),"\n",(0,r.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsxs)(t.p,{children:["Using ",(0,r.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,r.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,r.jsx)(t.code,{children:"pug"})," are passed as a JSON object to the ",(0,r.jsx)(t.a,{href:"https://pugjs.org/api/reference.html#pugcompilesource-options",children:(0,r.jsx)(t.code,{children:"pug.compile"})})," method during compile. Please check the ",(0,r.jsx)(t.a,{href:"https://pugjs.org/api/reference.html#options",children:"documentation"})," for full reference."]}),"\n",(0,r.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Example:"})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "pug": {\n "pretty": true\n }\n}\n'})}),"\n",(0,r.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n",(0,r.jsx)(t.h3,{id:"pre-rendered",children:"Pre-rendered"}),"\n","\n","\n",(0,r.jsx)(o.Z,{config:c,params:h}),"\n",(0,r.jsx)(t.h3,{id:"dynamic-1",children:"Dynamic"}),"\n","\n",(0,r.jsx)(o.Z,{config:u}),"\n",(0,r.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://pugjs.org/",children:"Official website"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://github.com/pugjs/pug",children:"GitHub repo"})}),"\n"]})]})}function m(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(g,{...e})}):g(e)}},3365:function(e,t,n){n.d(t,{Z:()=>f});var s=n("5893"),r=n("4200"),i=n("7294"),o=n("8294");function a(e){let t=(0,i.useRef)(null),[n,r]=(0,i.useState)(e.className||""),[a,l]=(0,i.useState)(e.style||{}),[d,c]=(0,i.useState)(e.height),[h,u]=(0,i.useState)(),[p,g]=(0,i.useState)(JSON.stringify(e.config||"")),[m,f]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!t.current)return;let{className:n,style:s,height:i,sdkReady:a,config:d,...v}=e;if(r(n||""),l(s||{}),c(i),h&&m===JSON.stringify(v)){if(p===JSON.stringify(d))return;g(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(v)),h?.destroy(),(0,o.T)(t.current,{config:d,...v}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,i.useEffect)(()=>()=>{h?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:n,style:a,"data-height":d})}var l=n("1858"),d=n("3262"),c=n("1705"),h=n("7645"),u=n("8168"),p=n("8228"),g=n("5050");function m(e){let[t,n]=(0,i.useState)(e.js),[r,o]=(0,i.useState)(e.ts),[a,l]=(0,i.useState)(e.react),[m,f]=(0,i.useState)(e.vue),[v,j]=(0,i.useState)(e.svelte),x="3.7rem",[y,w]=(0,i.useState)(!0),[b,S]=(0,i.useState)(x),C=(0,i.useRef)(null),P=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},255)};return(0,i.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};n(e(t,"js")),o(e(r,"ts")),l(e(a,"jsx")),f(e(m,"html")),j(e(v,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${g.Z.details} ${p.Z.details}`,"data-collapsed":y,style:{height:y?x:b,overflow:"hidden",willChange:"height",transition:`height ${y?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{w(!y),P()},children:"show code"}),(0,s.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:g.Z.collapsibleContent,children:(0,s.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,s.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:P},children:(0,s.jsx)(c.Z,{language:"js",children:t})}),(0,s.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:P},children:(0,s.jsx)(c.Z,{language:"ts",children:r})}),(0,s.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:P},children:(0,s.jsx)(c.Z,{language:"jsx",children:a})}),(0,s.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:P},children:(0,s.jsx)(c.Z,{language:"html",children:m})}),(0,s.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:P},children:(0,s.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:n,showCode:i,height:o,...d}=e,{colorMode:c}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),g=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (); +} + +`.trimStart(),f=` + + + +`,v=` + + +
+ +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(m,{js:u,ts:p,react:g,vue:f,svelte:v})]})}},8294:function(e,t,n){n.d(t,{T:function(){return r},r:function(){return i}});var s=n(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:s,loading:r="lazy",view:o}=t,a=s||"headless"===o,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)P(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(i(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":r);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let g=!1,m="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",i=l.querySelector(`iframe.${s}`),o=i||document.createElement("iframe");o.classList.add(s),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===r?"eager":"lazy"),a?P(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),o.onload=()=>{e(o)},o.src=c.href,i||l.appendChild(o)}),v=new Promise(e=>{addEventListener("message",function t(n){n.source===f.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),j=()=>g?Promise.reject(m):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),x=(e,t)=>new Promise(async(n,s)=>{if(g)return s(m);await j();let r=E();addEventListener("message",function t(i){if(i.source===f.contentWindow&&i.origin===h&&i.data?.type==="livecodes-api-response"&&i.data?.id===r&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?s(e.error):n(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},h)}),y={},w=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(g)throw Error(m);return w.includes(e)?(x("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!y[t])return;let n=e.data?.payload;y[t]?.forEach(e=>{e(n)})});let C=()=>{Object.values(y).forEach(e=>{e.length=0}),f?.remove?.(),g=!0};function P(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;sv.settled?x("destroy").then(C):g?Promise.reject(m):(C(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:r={},config:i={},headless:o,import:a,lite:l,view:d,...c}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let u="headless"===t.view||o;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==d?i.view=d:e.searchParams.set("view",d)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(i))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return a},a:function(){return o}});var s=n(7294);let r={},i=s.createContext(r);function o(e){let t=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/7364.702675e1.js b/docs/assets/js/7364.702675e1.js new file mode 100644 index 0000000..94f5f39 --- /dev/null +++ b/docs/assets/js/7364.702675e1.js @@ -0,0 +1 @@ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7364"],{7594:function(e,t){function n(e){let t,n=[];for(let s of e.split(",").map(e=>e.trim()))if(/^-?\d+$/.test(s))n.push(parseInt(s,10));else if(t=s.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/)){let[e,s,o,r]=t;if(s&&r){let e=(s=parseInt(s))<(r=parseInt(r))?1:-1;("-"===o||".."===o||"\u2025"===o)&&(r+=e);for(let t=s;t!==r;t+=e)n.push(t)}}return n}t.default=n,e.exports=n},1705:function(e,t,n){"use strict";n.d(t,{Z:()=>W});var s=n("5893"),o=n("7294"),r=n("6735"),c=n("7026"),a=n("4200"),l=n("6009");function i(){let{prism:e}=(0,l.L)(),{colorMode:t}=(0,a.I)(),n=e.theme,s=e.darkTheme||n;return"dark"===t?s:n}var u=n("6171"),d=n("7594"),m=n.n(d);let p=/title=(?["'])(?.*?)\1/,b=/\{(?<range>[\d,-]+)\}/,h={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},f={...h,lua:{start:"--",end:""},wasm:{start:"\\;\\;",end:""},tex:{start:"%",end:""},vb:{start:"['\u2018\u2019]",end:""},vbnet:{start:"(?:_\\s*)?['\u2018\u2019]",end:""},rem:{start:"[Rr][Ee][Mm]\\b",end:""},f90:{start:"!",end:""},ml:{start:"\\(\\*",end:"\\*\\)"},cobol:{start:"\\*>",end:""}},g=Object.keys(h);function j(e,t){let n=e.map(e=>{let{start:n,end:s}=f[e];return`(?:${n}\\s*(${t.flatMap(e=>[e.line,e.block?.start,e.block?.end].filter(Boolean)).join("|")})\\s*${s})`}).join("|");return RegExp(`^\\s*(?:${n})\\s*$`)}function k(e){let{as:t,...n}=e,o=function(e){let t={color:"--prism-color",backgroundColor:"--prism-background-color"},n={};return Object.entries(e.plain).forEach(e=>{let[s,o]=e,r=t[s];r&&"string"==typeof o&&(n[r]=o)}),n}(i());return(0,s.jsx)(t,{...n,style:o,className:(0,c.Z)(n.className,"codeBlockContainer_Ckt0",u.k.common.codeBlock)})}let B={codeBlockContent:"codeBlockContent_biex",codeBlockTitle:"codeBlockTitle_Ktv7",codeBlock:"codeBlock_bY9V",codeBlockStandalone:"codeBlockStandalone_MEMb",codeBlockLines:"codeBlockLines_e6Vv",codeBlockLinesWithNumbering:"codeBlockLinesWithNumbering_o6Pm",buttonGroup:"buttonGroup__atx"};function x(e){let{children:t,className:n}=e;return(0,s.jsx)(k,{as:"pre",tabIndex:0,className:(0,c.Z)(B.codeBlockStandalone,"thin-scrollbar",n),children:(0,s.jsx)("code",{className:B.codeBlockLines,children:t})})}var y=n("1934");let v={attributes:!0,characterData:!0,childList:!0,subtree:!0};var w=n("3229");let N={codeLine:"codeLine_lJS_",codeLineNumber:"codeLineNumber_Tfdd",codeLineContent:"codeLineContent_feaV"};function C(e){let{line:t,classNames:n,showLineNumbers:o,getLineProps:r,getTokenProps:a}=e;1===t.length&&"\n"===t[0].content&&(t[0].content="");let l=r({line:t,className:(0,c.Z)(n,o&&N.codeLine)}),i=t.map((e,t)=>(0,s.jsx)("span",{...a({token:e})},t));return(0,s.jsxs)("span",{...l,children:[o?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("span",{className:N.codeLineNumber}),(0,s.jsx)("span",{className:N.codeLineContent,children:i})]}):i,(0,s.jsx)("br",{})]})}var L=n("7670");function E(e){return(0,s.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,s.jsx)("path",{fill:"currentColor",d:"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"})})}function I(e){return(0,s.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,s.jsx)("path",{fill:"currentColor",d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"})})}let S={copyButtonCopied:"copyButtonCopied_obH4",copyButtonIcons:"copyButtonIcons_eSgA",copyButtonIcon:"copyButtonIcon_y97N",copyButtonSuccessIcon:"copyButtonSuccessIcon_LjdS"};function _(e){let{code:t,className:n}=e,[r,a]=(0,o.useState)(!1),l=(0,o.useRef)(void 0),i=(0,o.useCallback)(()=>{!function(e){let{target:t=document.body}=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if("string"!=typeof e)throw TypeError(`Expected parameter \`text\` to be a \`string\`, got \`${typeof e}\`.`);let n=document.createElement("textarea"),s=document.activeElement;n.value=e,n.setAttribute("readonly",""),n.style.contain="strict",n.style.position="absolute",n.style.left="-9999px",n.style.fontSize="12pt";let o=document.getSelection(),r=o.rangeCount>0&&o.getRangeAt(0);t.append(n),n.select(),n.selectionStart=0,n.selectionEnd=e.length;let c=!1;try{document.execCommand("copy")}catch{}n.remove(),r&&(o.removeAllRanges(),o.addRange(r)),s&&s.focus()}(t),a(!0),l.current=window.setTimeout(()=>{a(!1)},1e3)},[t]);return(0,o.useEffect)(()=>()=>window.clearTimeout(l.current),[]),(0,s.jsx)("button",{type:"button","aria-label":r?(0,L.I)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,L.I)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,L.I)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,c.Z)("clean-btn",n,S.copyButton,r&&S.copyButtonCopied),onClick:i,children:(0,s.jsxs)("span",{className:S.copyButtonIcons,"aria-hidden":"true",children:[(0,s.jsx)(E,{className:S.copyButtonIcon}),(0,s.jsx)(I,{className:S.copyButtonSuccessIcon})]})})}function A(e){return(0,s.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,s.jsx)("path",{fill:"currentColor",d:"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"})})}let $={wordWrapButtonIcon:"wordWrapButtonIcon_Bwma",wordWrapButtonEnabled:"wordWrapButtonEnabled_EoeP"};function T(e){let{className:t,onClick:n,isEnabled:o}=e,r=(0,L.I)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return(0,s.jsx)("button",{type:"button",onClick:n,className:(0,c.Z)("clean-btn",t,o&&$.wordWrapButtonEnabled),"aria-label":r,title:r,children:(0,s.jsx)(A,{className:$.wordWrapButtonIcon,"aria-hidden":"true"})})}function H(e){var t;let{children:n,className:r="",metastring:a,title:u,showLineNumbers:d,language:h}=e,{prism:{defaultLanguage:f,magicComments:x}}=(0,l.L)(),N=(t=h??function(e){let t=e.split(" ").find(e=>e.startsWith("language-"));return t?.replace(/language-/,"")}(r)??f,t?.toLowerCase()),L=i(),E=function(){let[e,t]=(0,o.useState)(!1),[n,s]=(0,o.useState)(!1),r=(0,o.useRef)(null),c=(0,o.useCallback)(()=>{let n=r.current.querySelector("code");e?n.removeAttribute("style"):(n.style.whiteSpace="pre-wrap",n.style.overflowWrap="anywhere"),t(e=>!e)},[r,e]),a=(0,o.useCallback)(()=>{let{scrollWidth:e,clientWidth:t}=r.current;s(e>t||r.current.querySelector("code").hasAttribute("style"))},[r]);return!function(e,t){let[n,s]=(0,o.useState)(),r=(0,o.useCallback)(()=>{s(e.current?.closest("[role=tabpanel][hidden]"))},[e,s]);(0,o.useEffect)(()=>{r()},[r]),function(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:v,s=(0,y.zX)(t),r=(0,y.Ql)(n);(0,o.useEffect)(()=>{let t=new MutationObserver(s);return e&&t.observe(e,r),()=>t.disconnect()},[e,s,r])}(n,e=>{e.forEach(e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(t(),r())})},{attributes:!0,characterData:!1,childList:!1,subtree:!1})}(r,a),(0,o.useEffect)(()=>{a()},[e,a]),(0,o.useEffect)(()=>(window.addEventListener("resize",a,{passive:!0}),()=>{window.removeEventListener("resize",a)}),[a]),{codeBlockRef:r,isEnabled:e,isCodeScrollable:n,toggle:c}}(),I=(a?.match(p)?.groups.title??"")||u,{lineClassNames:S,code:A}=function(e,t){let n=e.replace(/\n$/,""),{language:s,magicComments:o,metastring:r}=t;if(r&&b.test(r)){let e=r.match(b).groups.range;if(0===o.length)throw Error(`A highlight range has been given in code block's metastring (\`\`\` ${r}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`);let t=o[0].className;return{lineClassNames:Object.fromEntries(m()(e).filter(e=>e>0).map(e=>[e-1,[t]])),code:n}}if(void 0===s)return{lineClassNames:{},code:n};let c=function(e,t){switch(e){case"js":case"javascript":case"ts":case"typescript":return j(["js","jsBlock"],t);case"jsx":case"tsx":return j(["js","jsBlock","jsx"],t);case"html":return j(["js","jsBlock","html"],t);case"python":case"py":case"bash":return j(["bash"],t);case"markdown":case"md":return j(["html","jsx","bash"],t);case"tex":case"latex":case"matlab":return j(["tex"],t);case"lua":case"haskell":return j(["lua"],t);case"sql":return j(["lua","jsBlock"],t);case"wasm":return j(["wasm"],t);case"vb":case"vba":case"visual-basic":return j(["vb","rem"],t);case"vbnet":return j(["vbnet","rem"],t);case"batch":return j(["rem"],t);case"basic":return j(["rem","f90"],t);case"fsharp":return j(["js","ml"],t);case"ocaml":case"sml":return j(["ml"],t);case"fortran":return j(["f90"],t);case"cobol":return j(["cobol"],t);default:return j(g,t)}}(s,o),a=n.split("\n"),l=Object.fromEntries(o.map(e=>[e.className,{start:0,range:""}])),i=Object.fromEntries(o.filter(e=>e.line).map(e=>{let{className:t,line:n}=e;return[n,t]})),u=Object.fromEntries(o.filter(e=>e.block).map(e=>{let{className:t,block:n}=e;return[n.start,t]})),d=Object.fromEntries(o.filter(e=>e.block).map(e=>{let{className:t,block:n}=e;return[n.end,t]}));for(let e=0;e<a.length;){let t=a[e].match(c);if(!t){e+=1;continue}let n=t.slice(1).find(e=>void 0!==e);i[n]?l[i[n]].range+=`${e},`:u[n]?l[u[n]].start=e:d[n]&&(l[d[n]].range+=`${l[d[n]].start}-${e-1},`),a.splice(e,1)}n=a.join("\n");let p={};return Object.entries(l).forEach(e=>{let[t,{range:n}]=e;m()(n).forEach(e=>{p[e]??=[],p[e].push(t)})}),{lineClassNames:p,code:n}}(n,{metastring:a,language:N,magicComments:x}),$=d??!!a?.includes("showLineNumbers");return(0,s.jsxs)(k,{as:"div",className:(0,c.Z)(r,N&&!r.includes(`language-${N}`)&&`language-${N}`),children:[I&&(0,s.jsx)("div",{className:B.codeBlockTitle,children:I}),(0,s.jsxs)("div",{className:B.codeBlockContent,children:[(0,s.jsx)(w.y$,{theme:L,code:A,language:N??"text",children:e=>{let{className:t,style:n,tokens:o,getLineProps:r,getTokenProps:a}=e;return(0,s.jsx)("pre",{tabIndex:0,ref:E.codeBlockRef,className:(0,c.Z)(t,B.codeBlock,"thin-scrollbar"),style:n,children:(0,s.jsx)("code",{className:(0,c.Z)(B.codeBlockLines,$&&B.codeBlockLinesWithNumbering),children:o.map((e,t)=>(0,s.jsx)(C,{line:e,getLineProps:r,getTokenProps:a,classNames:S[t],showLineNumbers:$},t))})})}}),(0,s.jsxs)("div",{className:B.buttonGroup,children:[(E.isEnabled||E.isCodeScrollable)&&(0,s.jsx)(T,{className:B.codeButton,onClick:()=>E.toggle(),isEnabled:E.isEnabled}),(0,s.jsx)(_,{className:B.codeButton,code:A})]})]})]})}function W(e){let{children:t,...n}=e,c=(0,r.Z)(),a=o.Children.toArray(t).some(e=>(0,o.isValidElement)(e))?t:Array.isArray(t)?t.join(""):t;return(0,s.jsx)("string"==typeof a?H:x,{...n,children:a},String(c))}}}]); \ No newline at end of file diff --git a/docs/assets/js/739821ac.bcc252e2.js b/docs/assets/js/739821ac.bcc252e2.js new file mode 100644 index 0000000..52ec592 --- /dev/null +++ b/docs/assets/js/739821ac.bcc252e2.js @@ -0,0 +1,52 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2470"],{243:function(e,t,s){s.r(t),s.d(t,{asciidocConfig:()=>d,default:()=>p,frontMatter:()=>a,assets:()=>c,metadata:()=>o,toc:()=>u,contentTitle:()=>l});var o=JSON.parse('{"id":"languages/asciidoc","title":"AsciiDoc","description":"AsciiDoc is a plain text markup language for writing technical content. It\u2019s packed with semantic elements and equipped with features to modularize and reuse content. AsciiDoc content can be composed using a text editor, managed in a version control system, and published to multiple output formats.","source":"@site/docs/languages/asciidoc.mdx","sourceDirName":"languages","slug":"/languages/asciidoc","permalink":"/docs/languages/asciidoc","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/asciidoc.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"art-template","permalink":"/docs/languages/art-template"},"next":{"title":"AssemblyScript","permalink":"/docs/languages/assemblyscript"}}'),i=s("5893"),n=s("65"),r=s("3365");let a={},l="AsciiDoc",c={},d={markup:{language:"asciidoc",content:`= AsciiDoc Demo + +== Features + +* Simple +* Clean +* Dev-friendly +`}},u=[{value:"Usage",id:"usage",level:2},{value:"Demo",id:"demo",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Editor",id:"editor",level:2},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Limitations",id:"limitations",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,n.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"asciidoc",children:"AsciiDoc"})}),"\n","\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://asciidoc.org",children:"AsciiDoc"})," is a plain text markup language for writing technical content. It\u2019s packed with semantic elements and equipped with features to modularize and reuse content. AsciiDoc content can be composed using a text editor, managed in a version control system, and published to multiple output formats."]}),"\n",(0,i.jsxs)(t.p,{children:["In LiveCodes, AsciiDoc is compiled to HTML using ",(0,i.jsx)(t.a,{href:"https://asciidoctor.org/",children:"Asciidoctor"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.h3,{id:"demo",children:"Demo"}),"\n","\n",(0,i.jsx)(r.Z,{config:d,height:"70vh"}),"\n",(0,i.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"asciidoc"})}),"\n",(0,i.jsx)(t.h3,{id:"extensions",children:"Extensions"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"adoc"}),", ",(0,i.jsx)(t.code,{children:"asc"})]}),"\n",(0,i.jsx)(t.h2,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"markup"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://docs.asciidoctor.org/asciidoctor.js/latest/",children:"Asciidoctor.js"})}),"\n",(0,i.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,i.jsxs)(t.p,{children:["Asciidoctor.js: ",(0,i.jsx)(t.code,{children:"v2.2.8"})]}),"\n",(0,i.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsx)(t.p,{children:"Not supported."}),"\n",(0,i.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,i.jsx)(t.code,{children:"asciidoc"})," are passed as a JSON object to the ",(0,i.jsx)(t.a,{href:"https://docs.asciidoctor.org/asciidoctor.js/latest/setup/quick-tour/#your-first-conversion",children:(0,i.jsx)(t.code,{children:"convert()"})})," function during compile.\nPlease check the ",(0,i.jsx)(t.a,{href:"https://docs.asciidoctor.org/asciidoctor.js/latest/processor/convert-options/",children:"documentation"})," and ",(0,i.jsx)(t.a,{href:"https://docs.asciidoctor.org/asciidoc/latest/attributes/document-attributes-ref/",children:"document attributes"})," for full reference."]}),"\n",(0,i.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",children:'{\n "asciidoc": {\n "attributes": {\n "source-highlighter": "highlight.js",\n "icons": "font"\n }\n }\n}\n'})}),"\n",(0,i.jsx)(t.h2,{id:"limitations",children:"Limitations"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:"Some advanced extensions may not work (e.g. diagrams)"}),"\n"]}),"\n",(0,i.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://asciidoc.org",children:"AsciiDoc"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://asciidoctor.org/",children:"Asciidoctor"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://docs.asciidoctor.org/asciidoctor.js/latest/",children:"AsciiDoctor.js"})}),"\n"]})]})}function p(e={}){let{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var o=s("5893"),i=s("4200"),n=s("7294"),r=s("8294");function a(e){let t=(0,n.useRef)(null),[s,i]=(0,n.useState)(e.className||""),[a,l]=(0,n.useState)(e.style||{}),[c,d]=(0,n.useState)(e.height),[u,h]=(0,n.useState)(),[p,m]=(0,n.useState)(JSON.stringify(e.config||"")),[g,f]=(0,n.useState)("");return(0,n.useEffect)(()=>{if(!t.current)return;let{className:s,style:o,height:n,sdkReady:a,config:c,...v}=e;if(i(s||""),l(o||{}),d(n),u&&g===JSON.stringify(v)){if(p===JSON.stringify(c))return;m(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else f(JSON.stringify(v)),u?.destroy(),(0,r.T)(t.current,{config:c,...v}).then(e=>{h(e),"function"==typeof a&&a(e)})},[e]),(0,n.useEffect)(()=>()=>{u?.destroy()},[]),(0,o.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),u=s("7645"),h=s("8168"),p=s("8228"),m=s("5050");function g(e){let[t,s]=(0,n.useState)(e.js),[i,r]=(0,n.useState)(e.ts),[a,l]=(0,n.useState)(e.react),[g,f]=(0,n.useState)(e.vue),[v,y]=(0,n.useState)(e.svelte),j="3.7rem",[x,b]=(0,n.useState)(!0),[w,S]=(0,n.useState)(j),C=(0,n.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${j})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${j})`)},255)};return(0,n.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),r(e(i,"ts")),l(e(a,"jsx")),f(e(g,"html")),y(e(v,"html"))}},[]),(0,o.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":x,style:{height:x?j:w,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,o.jsx)("summary",{onClick:()=>{b(!x),E()},children:"show code"}),(0,o.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,o.jsx)("div",{className:m.Z.collapsibleContent,children:(0,o.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,o.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"js",children:t})}),(0,o.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"ts",children:i})}),(0,o.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"jsx",children:a})}),(0,o.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"html",children:g})}),(0,o.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,o.jsx)(d.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:n,height:r,...c}=e,{colorMode:d}=(0,i.I)(),u=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),f=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${u(c)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,v=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${u(c)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:r||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,o.jsx)(g,{js:h,ts:p,react:m,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return n}});var o=s(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:o,loading:i="lazy",view:r}=t,a=o||"headless"===r,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(n(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":i);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let o="livecodes",n=l.querySelector(`iframe.${o}`),r=n||document.createElement("iframe");r.classList.add(o),r.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),r.setAttribute("allowtransparency","true"),r.setAttribute("allowpaymentrequest","true"),r.setAttribute("allowfullscreen","true"),r.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),r.setAttribute("loading","eager"===i?"eager":"lazy"),a?E(r):(r.style.height="100%",r.style.minHeight="200px",r.style.width="100%",r.style.margin="0",r.style.border="0",r.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),r.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),r.onload=()=>{e(r)},r.src=d.href,n||l.appendChild(r)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>m?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},u),await v,e()}),j=(e,t)=>new Promise(async(s,o)=>{if(m)return o(g);await y();let i=k();addEventListener("message",function t(n){if(n.source===f.contentWindow&&n.origin===u&&n.data?.type==="livecodes-api-response"&&n.data?.id===i&&n.data.method===e){removeEventListener("message",t);let e=n.data.payload;e?.error?o(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:i,args:t},u)}),x={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return b.includes(e)?(j("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==u||!t||!x[t])return;let s=e.data?.payload;x[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(x).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let k=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,t)=>j("show",[e,t]),runTests:()=>j("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),o=1;o<t;o++)s[o-1]=arguments[o];return j("exec",[e,...s])},destroy:()=>v.settled?j("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function n(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:n={},headless:r,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,o]=t;void 0!==o&&e.searchParams.set(s,String(o))});let h="headless"===t.view||r;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof n&&null==n.mode?n.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof n&&null==n.view&&"headless"!==c?n.view=c:e.searchParams.set("view",c)),"string"==typeof n)try{new URL(n),e.searchParams.set("config",encodeURIComponent(n))}catch{throw Error('"config" is not a valid URL or configuration object.')}else n&&"object"==typeof n&&Object.keys(n).length>0&&(n.title&&"Untitled Project"!==n.title&&e.searchParams.set("title",n.title),n.description&&n.description.length>0&&e.searchParams.set("description",n.description),u.set("config","code/"+(0,o.compressToEncodedURIComponent)(JSON.stringify(n))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{u.set("params",(0,o.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return r}});var o=s(7294);let i={},n=o.createContext(i);function r(e){let t=o.useContext(n);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/74ead2de.9bade861.js b/docs/assets/js/74ead2de.9bade861.js new file mode 100644 index 0000000..19f496e --- /dev/null +++ b/docs/assets/js/74ead2de.9bade861.js @@ -0,0 +1 @@ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9746"],{9699:function(e,t,n){"use strict";n.r(t),n.d(t,{default:()=>h,frontMatter:()=>a,metadata:()=>r,assets:()=>l,toc:()=>d,contentTitle:()=>c});var r=JSON.parse('{"id":"features/sync","title":"Sync","description":"LiveCodes local data can be synchronized to a GitHub repo. This can be used as a cloud backup, and to synchronize multiple devices.","source":"@site/docs/features/sync.mdx","sourceDirName":"features","slug":"/features/sync","permalink":"/docs/features/sync","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/sync.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Deploy","permalink":"/docs/features/deploy"},"next":{"title":"Broadcast","permalink":"/docs/features/broadcast"}}'),o=n("5893"),s=n("65"),i=n("8500");let a={},c="Sync",l={},d=[{value:"Related",id:"related",level:2}];function u(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,s.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"sync",children:"Sync"})}),"\n",(0,o.jsx)(t.p,{children:"LiveCodes local data can be synchronized to a GitHub repo. This can be used as a cloud backup, and to synchronize multiple devices."}),"\n",(0,o.jsxs)(t.p,{children:["A GitHub account is required. The user must give access to ",(0,o.jsx)(t.a,{href:"/docs/features/github-integration",children:"(Private Repos) while logging in"}),"."]}),"\n",(0,o.jsx)(t.p,{children:"The Sync screen can be accessed from the Settings menu \u2192 Sync."}),"\n","\n",(0,o.jsx)(i.Z,{params:{screen:"sync"},linkText:"direct link"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.img,{alt:"LiveCodes Sync",src:n(5280).Z+"",width:"2240",height:"1400"})}),"\n",(0,o.jsxs)(t.p,{children:["Data can be synchronized to a new (",(0,o.jsx)(t.strong,{children:"private"}),") or existing repo."]}),"\n",(0,o.jsxs)(t.p,{children:["The data is synchronized with the ",(0,o.jsx)(t.code,{children:"main"})," branch in a directory named ",(0,o.jsx)(t.code,{children:"livecodes-data"}),"."]}),"\n",(0,o.jsxs)(t.p,{children:["If ",(0,o.jsx)(t.code,{children:"Auto sync"})," is selected, the sync will be attempted every 5 minutes. Remote files are downloaded only when changed (e.g. sync from another device)."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"Auto sync"})," can be turned off and on by the switch on the Settings menu."]}),"\n",(0,o.jsx)(t.p,{children:"The sync can be manually triggered at any time from the Sync UI. Information regarding the last sync time and repo are displayed on the UI screen."}),"\n",(0,o.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/features/backup-restore",children:"Backup / restore"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/features/export",children:"Export"})}),"\n"]})]})}function h(e={}){let{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}},5280:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});let r=n.p+"assets/images/sync-42a064ad4a4a9cca908a83f32aef3e51.jpg"},7728:function(e,t,n){e=n.nmd(e);var r=function(){var e=String.fromCharCode,t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",r={};function o(e,t){if(!r[e]){r[e]={};for(var n=0;n<e.length;n++)r[e][e.charAt(n)]=n}return r[e][t]}var s={compressToBase64:function(e){if(null==e)return"";var n=s._compress(e,6,function(e){return t.charAt(e)});switch(n.length%4){default:case 0:return n;case 1:return n+"===";case 2:return n+"==";case 3:return n+"="}},decompressFromBase64:function(e){return null==e?"":""==e?null:s._decompress(e.length,32,function(n){return o(t,e.charAt(n))})},compressToUTF16:function(t){return null==t?"":s._compress(t,15,function(t){return e(t+32)})+" "},decompressFromUTF16:function(e){return null==e?"":""==e?null:s._decompress(e.length,16384,function(t){return e.charCodeAt(t)-32})},compressToUint8Array:function(e){for(var t=s.compress(e),n=new Uint8Array(2*t.length),r=0,o=t.length;r<o;r++){var i=t.charCodeAt(r);n[2*r]=i>>>8,n[2*r+1]=i%256}return n},decompressFromUint8Array:function(t){if(null==t)return s.decompress(t);for(var n=Array(t.length/2),r=0,o=n.length;r<o;r++)n[r]=256*t[2*r]+t[2*r+1];var i=[];return n.forEach(function(t){i.push(e(t))}),s.decompress(i.join(""))},compressToEncodedURIComponent:function(e){return null==e?"":s._compress(e,6,function(e){return n.charAt(e)})},decompressFromEncodedURIComponent:function(e){return null==e?"":""==e?null:(e=e.replace(/ /g,"+"),s._decompress(e.length,32,function(t){return o(n,e.charAt(t))}))},compress:function(t){return s._compress(t,16,function(t){return e(t)})},_compress:function(e,t,n){if(null==e)return"";var r,o,s,i={},a={},c="",l="",d="",u=2,h=3,p=2,f=[],m=0,y=0;for(s=0;s<e.length;s+=1)if(c=e.charAt(s),Object.prototype.hasOwnProperty.call(i,c)||(i[c]=h++,a[c]=!0),l=d+c,Object.prototype.hasOwnProperty.call(i,l))d=l;else{if(Object.prototype.hasOwnProperty.call(a,d)){if(256>d.charCodeAt(0)){for(r=0;r<p;r++)m<<=1,y==t-1?(y=0,f.push(n(m)),m=0):y++;for(r=0,o=d.charCodeAt(0);r<8;r++)m=m<<1|1&o,y==t-1?(y=0,f.push(n(m)),m=0):y++,o>>=1}else{for(r=0,o=1;r<p;r++)m=m<<1|o,y==t-1?(y=0,f.push(n(m)),m=0):y++,o=0;for(r=0,o=d.charCodeAt(0);r<16;r++)m=m<<1|1&o,y==t-1?(y=0,f.push(n(m)),m=0):y++,o>>=1}0==--u&&(u=Math.pow(2,p),p++),delete a[d]}else for(r=0,o=i[d];r<p;r++)m=m<<1|1&o,y==t-1?(y=0,f.push(n(m)),m=0):y++,o>>=1;0==--u&&(u=Math.pow(2,p),p++),i[l]=h++,d=String(c)}if(""!==d){if(Object.prototype.hasOwnProperty.call(a,d)){if(256>d.charCodeAt(0)){for(r=0;r<p;r++)m<<=1,y==t-1?(y=0,f.push(n(m)),m=0):y++;for(r=0,o=d.charCodeAt(0);r<8;r++)m=m<<1|1&o,y==t-1?(y=0,f.push(n(m)),m=0):y++,o>>=1}else{for(r=0,o=1;r<p;r++)m=m<<1|o,y==t-1?(y=0,f.push(n(m)),m=0):y++,o=0;for(r=0,o=d.charCodeAt(0);r<16;r++)m=m<<1|1&o,y==t-1?(y=0,f.push(n(m)),m=0):y++,o>>=1}0==--u&&(u=Math.pow(2,p),p++),delete a[d]}else for(r=0,o=i[d];r<p;r++)m=m<<1|1&o,y==t-1?(y=0,f.push(n(m)),m=0):y++,o>>=1;0==--u&&(u=Math.pow(2,p),p++)}for(r=0,o=2;r<p;r++)m=m<<1|1&o,y==t-1?(y=0,f.push(n(m)),m=0):y++,o>>=1;for(;;){if(m<<=1,y==t-1){f.push(n(m));break}y++}return f.join("")},decompress:function(e){return null==e?"":""==e?null:s._decompress(e.length,32768,function(t){return e.charCodeAt(t)})},_decompress:function(t,n,r){var o,s,i,a,c,l,d,u=[],h=4,p=4,f=3,m="",y=[],g={val:r(0),position:n,index:1};for(o=0;o<3;o+=1)u[o]=o;for(i=0,c=4,l=1;l!=c;)a=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=r(g.index++)),i|=(a>0?1:0)*l,l<<=1;switch(i){case 0:for(i=0,c=256,l=1;l!=c;)a=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=r(g.index++)),i|=(a>0?1:0)*l,l<<=1;d=e(i);break;case 1:for(i=0,c=65536,l=1;l!=c;)a=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=r(g.index++)),i|=(a>0?1:0)*l,l<<=1;d=e(i);break;case 2:return""}for(u[3]=d,s=d,y.push(d);;){if(g.index>t)return"";for(i=0,c=Math.pow(2,f),l=1;l!=c;)a=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=r(g.index++)),i|=(a>0?1:0)*l,l<<=1;switch(d=i){case 0:for(i=0,c=256,l=1;l!=c;)a=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=r(g.index++)),i|=(a>0?1:0)*l,l<<=1;u[p++]=e(i),d=p-1,h--;break;case 1:for(i=0,c=65536,l=1;l!=c;)a=g.val&g.position,g.position>>=1,0==g.position&&(g.position=n,g.val=r(g.index++)),i|=(a>0?1:0)*l,l<<=1;u[p++]=e(i),d=p-1,h--;break;case 2:return y.join("")}if(0==h&&(h=Math.pow(2,f),f++),u[d])m=u[d];else{if(d!==p)return null;m=s+s.charAt(0)}y.push(m),u[p++]=s+m.charAt(0),h--,s=m,0==h&&(h=Math.pow(2,f),f++)}}};return s}();"function"==typeof define&&define.amd?define(function(){return r}):null!=e&&(e.exports=r)},8500:function(e,t,n){"use strict";n.d(t,{Z:()=>l});var r=n("5893");n("7294");var o=n("6735");function s(e){let{children:t,fallback:n}=e;return(0,o.Z)()?(0,r.jsx)(r.Fragment,{children:t?.()}):n??null}var i=n("1705"),a=n("8294"),c=n("1858");function l(e){let{params:t,config:n,code:o,language:l="js",codeTitle:d="",showLineNumbers:u=!1,formatCode:h=!0,linkText:p="Run in LiveCodes",style:f={},className:m=""}=e,y=(0,a.r)({appUrl:c.G,params:t,config:n});return(0,r.jsxs)("div",{style:{marginBottom:"30px",...f},className:m,children:[o&&(0,r.jsx)(s,{children:()=>(0,r.jsx)(i.Z,{language:l,title:d,showLineNumbers:u,children:h?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(o,l):o})}),(0,r.jsxs)("a",{href:y,target:"_blank",rel:"noreferrer",children:[p,(0,r.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,r.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,n){"use strict";n.d(t,{T:function(){return o},r:function(){return s}});var r=n(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:r,loading:o="lazy",view:i}=t,a=r||"headless"===i,c=null,l=null;if("string"==typeof e)c=document.querySelector(e);else if(e instanceof HTMLElement)c=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!c){if(a)k(c=document.createElement("div")),document.body.appendChild(c);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(s(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":o);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let f=!1,m="Cannot call API methods after calling `destroy()`.",y=await new Promise(e=>{if(!c)return;let t=c.dataset.height||c.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";c.style.height=e}"false"===c.dataset.defaultStyles||a||(c.style.backgroundColor||="#fff",c.style.border||="1px solid black",c.style.borderRadius||="8px",c.style.boxSizing||="border-box",c.style.padding||="0",c.style.width||="100%",c.style.height||=c.style.height||"300px",c.style.minHeight="200px",c.style.flexGrow="1",c.style.overflow||="hidden",c.style.resize||="vertical");let r="livecodes",s=c.querySelector(`iframe.${r}`),i=s||document.createElement("iframe");i.classList.add(r),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===o?"eager":"lazy"),a?k(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=c.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),l=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!l||l<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:n},u))}),i.onload=()=>{e(i)},i.src=d.href,s||c.appendChild(i)}),g=new Promise(e=>{addEventListener("message",function t(n){n.source===y.contentWindow&&n.origin===u&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),g.settled=!0)})}),v=()=>f?Promise.reject(m):new Promise(async e=>{g.settled&&e(),y.contentWindow?.postMessage({type:"livecodes-load"},u),await g,e()}),w=(e,t)=>new Promise(async(n,r)=>{if(f)return r(m);await v();let o=A();addEventListener("message",function t(s){if(s.source===y.contentWindow&&s.origin===u&&s.data?.type==="livecodes-api-response"&&s.data?.id===o&&s.data.method===e){removeEventListener("message",t);let e=s.data.payload;e?.error?r(e.error):n(e)}}),y.contentWindow?.postMessage({method:e,id:o,args:t},u)}),b={},x=["load","ready","code","console","tests","destroy"],j=(e,t)=>{if(f)throw Error(m);return x.includes(e)?(w("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&w("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},C=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=C(e.data?.type??"");if(e.source!==y.contentWindow||e.origin!==u||!t||!b[t])return;let n=e.data?.payload;b[t]?.forEach(e=>{e(n)})});let E=()=>{Object.values(b).forEach(e=>{e.length=0}),y?.remove?.(),f=!0};function k(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(c))})},{rootMargin:"150px"}).observe(c);let A=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>w("run"),format:e=>w("format",[e]),getShareUrl:e=>w("getShareUrl",[e]),getConfig:e=>w("getConfig",[e]),setConfig:e=>w("setConfig",[e]),getCode:()=>w("getCode"),show:(e,t)=>w("show",[e,t]),runTests:()=>w("runTests"),onChange:e=>j("code",e),watch:j,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return w("exec",[e,...n])},destroy:()=>g.settled?w("destroy").then(E):f?Promise.reject(m):(E(),Promise.resolve())}}function s(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:o={},config:s={},headless:i,import:a,lite:c,view:l,...d}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[n,r]=t;void 0!==r&&e.searchParams.set(n,String(r))});let h="headless"===t.view||i;if(c&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof s&&null==s.mode?s.mode="lite":e.searchParams.set("lite","true")),l&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof s&&null==s.view&&"headless"!==l?s.view=l:e.searchParams.set("view",l)),"string"==typeof s)try{new URL(s),e.searchParams.set("config",encodeURIComponent(s))}catch{throw Error('"config" is not a valid URL or configuration object.')}else s&&"object"==typeof s&&Object.keys(s).length>0&&(s.title&&"Untitled Project"!==s.title&&e.searchParams.set("title",s.title),s.description&&s.description.length>0&&e.searchParams.set("description",s.description),u.set("config","code/"+(0,r.compressToEncodedURIComponent)(JSON.stringify(s))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{u.set("params",(0,r.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,n){"use strict";n.d(t,{Z:function(){return a},a:function(){return i}});var r=n(7294);let o={},s=r.createContext(o);function i(e){let t=r.useContext(s);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/750a7206.4fe1aab1.js b/docs/assets/js/750a7206.4fe1aab1.js new file mode 100644 index 0000000..df987a4 --- /dev/null +++ b/docs/assets/js/750a7206.4fe1aab1.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2168"],{9621:function(e,t,n){n.r(t),n.d(t,{default:()=>h,frontMatter:()=>a,metadata:()=>s,assets:()=>c,toc:()=>d,contentTitle:()=>l});var s=JSON.parse('{"id":"features/i18n","title":"Internationalization (i18n)","description":"LiveCodes currently supports UI internationalization. By default, the UI language will be automatically detected based on your browser settings.","source":"@site/docs/features/i18n.mdx","sourceDirName":"features","slug":"/features/i18n","permalink":"/docs/features/i18n","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/i18n.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Editor Settings","permalink":"/docs/features/editor-settings"},"next":{"title":"Default Template/Language","permalink":"/docs/features/default-template-language"}}'),o=n("5893"),r=n("65"),i=n("3365");let a={},l="Internationalization (i18n)",c={},d=[{value:"Using SDK",id:"using-sdk",level:2},{value:"Using query params",id:"using-query-params",level:2},{value:"Related",id:"related",level:2}];function u(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"internationalization-i18n",children:"Internationalization (i18n)"})}),"\n","\n",(0,o.jsx)(t.p,{children:"LiveCodes currently supports UI internationalization. By default, the UI language will be automatically detected based on your browser settings."}),"\n",(0,o.jsx)(t.p,{children:"You can easily switch between supported UI languages using the i18n menu, allowing you to explore and use LiveCodes in your preferred language!"}),"\n",(0,o.jsxs)(t.p,{children:["If you are interested in contributing to the translation of LiveCodes, please refer to the ",(0,o.jsx)(t.a,{href:"https://github.com/live-codes/livecodes/blob/develop/docs/docs/contribution/i18n.mdx",children:"i18n Contribution Guide"}),"."]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.img,{alt:"I18n menu",src:n(2623).Z+"",width:"2240",height:"1400"})}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.img,{alt:"LiveCodes in Chinese",src:n(2526).Z+"",width:"2240",height:"1400"})}),"\n",(0,o.jsxs)(t.p,{children:["Demo: (",(0,o.jsx)(t.a,{href:"/docs/features/embeds",children:"Embedded playground"})," with ",(0,o.jsx)(t.code,{children:"appLanguage: 'zh-CN'"}),")"]}),"\n",(0,o.jsx)(i.Z,{template:"javascript",config:{appLanguage:"zh-CN"}}),"\n",(0,o.jsx)(t.h2,{id:"using-sdk",children:"Using SDK"}),"\n",(0,o.jsxs)(t.p,{children:["Set the ",(0,o.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configuration object"})," property ",(0,o.jsx)(t.a,{href:"/docs/configuration/configuration-object#applanguage",children:(0,o.jsx)(t.code,{children:"appLanguage"})})," to a supported language code."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container', { template: 'javascript', config: { appLanguage: 'auto' } });\n"})}),"\n",(0,o.jsx)(t.h2,{id:"using-query-params",children:"Using query params"}),"\n",(0,o.jsxs)(t.p,{children:["Add the ",(0,o.jsx)(t.a,{href:"/docs/configuration/query-params",children:"query parameter"})," ",(0,o.jsx)(t.code,{children:"appLanguage"})," with your preferred language code."]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://livecodes.io?template=javascript&appLanguage=fr",children:"https://livecodes.io?template=javascript&appLanguage=fr"})}),"\n",(0,o.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/features/user-settings",children:"User Settings"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/features/editor-settings",children:"Editor Settings"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/configuration/query-params",children:"Query params"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://github.com/live-codes/livecodes/blob/develop/docs/docs/contribution/i18n.mdx",children:"i18n Contribution Guide"})}),"\n"]})]})}function h(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}},2623:function(e,t,n){n.d(t,{Z:function(){return s}});let s=n.p+"assets/images/i18n-1-d9c22be743b90d798d670b9ea63fa811.jpg"},2526:function(e,t,n){n.d(t,{Z:function(){return s}});let s=n.p+"assets/images/i18n-2-fa2bf00ef12a8e4df2ee40ba7a7a9e8d.jpg"},3365:function(e,t,n){n.d(t,{Z:()=>m});var s=n("5893"),o=n("4200"),r=n("7294"),i=n("8294");function a(e){let t=(0,r.useRef)(null),[n,o]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[c,d]=(0,r.useState)(e.height),[u,h]=(0,r.useState)(),[p,g]=(0,r.useState)(JSON.stringify(e.config||"")),[f,m]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:n,style:s,height:r,sdkReady:a,config:c,...y}=e;if(o(n||""),l(s||{}),d(r),u&&f===JSON.stringify(y)){if(p===JSON.stringify(c))return;g(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else m(JSON.stringify(y)),u?.destroy(),(0,i.T)(t.current,{config:c,...y}).then(e=>{h(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{u?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:n,style:a,"data-height":c})}var l=n("1858"),c=n("3262"),d=n("1705"),u=n("7645"),h=n("8168"),p=n("8228"),g=n("5050");function f(e){let[t,n]=(0,r.useState)(e.js),[o,i]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[f,m]=(0,r.useState)(e.vue),[y,v]=(0,r.useState)(e.svelte),b="3.7rem",[j,w]=(0,r.useState)(!0),[x,S]=(0,r.useState)(b),C=(0,r.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${b})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${b})`)},255)};return(0,r.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};n(e(t,"js")),i(e(o,"ts")),l(e(a,"jsx")),m(e(f,"html")),v(e(y,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${g.Z.details} ${p.Z.details}`,"data-collapsed":j,style:{height:j?b:x,overflow:"hidden",willChange:"height",transition:`height ${j?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{w(!j),E()},children:"show code"}),(0,s.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:g.Z.collapsibleContent,children:(0,s.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,s.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,s.jsx)(d.Z,{language:"js",children:t})}),(0,s.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,s.jsx)(d.Z,{language:"ts",children:o})}),(0,s.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,s.jsx)(d.Z,{language:"jsx",children:a})}),(0,s.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,s.jsx)(d.Z,{language:"html",children:f})}),(0,s.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,s.jsx)(d.Z,{language:"html",children:y})})]})})})]})}function m(e){let{className:t,style:n,showCode:r,height:i,...c}=e,{colorMode:d}=(0,o.I)(),u=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),g=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),m=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${u(c)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,y=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${u(c)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(f,{js:h,ts:p,react:g,vue:m,svelte:y})]})}},8294:function(e,t,n){n.d(t,{T:function(){return o},r:function(){return r}});var s=n(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:s,loading:o="lazy",view:i}=t,a=s||"headless"===i,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":o);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let g=!1,f="Cannot call API methods after calling `destroy()`.",m=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",r=l.querySelector(`iframe.${s}`),i=r||document.createElement("iframe");i.classList.add(s),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===o?"eager":"lazy"),a?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:n},u))}),i.onload=()=>{e(i)},i.src=d.href,r||l.appendChild(i)}),y=new Promise(e=>{addEventListener("message",function t(n){n.source===m.contentWindow&&n.origin===u&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>g?Promise.reject(f):new Promise(async e=>{y.settled&&e(),m.contentWindow?.postMessage({type:"livecodes-load"},u),await y,e()}),b=(e,t)=>new Promise(async(n,s)=>{if(g)return s(f);await v();let o=L();addEventListener("message",function t(r){if(r.source===m.contentWindow&&r.origin===u&&r.data?.type==="livecodes-api-response"&&r.data?.id===o&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?s(e.error):n(e)}}),m.contentWindow?.postMessage({method:e,id:o,args:t},u)}),j={},w=["load","ready","code","console","tests","destroy"],x=(e,t)=>{if(g)throw Error(f);return w.includes(e)?(b("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[e]?.length===0&&b("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==m.contentWindow||e.origin!==u||!t||!j[t])return;let n=e.data?.payload;j[t]?.forEach(e=>{e(n)})});let C=()=>{Object.values(j).forEach(e=>{e.length=0}),m?.remove?.(),g=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let L=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>b("run"),format:e=>b("format",[e]),getShareUrl:e=>b("getShareUrl",[e]),getConfig:e=>b("getConfig",[e]),setConfig:e=>b("setConfig",[e]),getCode:()=>b("getCode"),show:(e,t)=>b("show",[e,t]),runTests:()=>b("runTests"),onChange:e=>x("code",e),watch:x,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;s<t;s++)n[s-1]=arguments[s];return b("exec",[e,...n])},destroy:()=>y.settled?b("destroy").then(C):g?Promise.reject(f):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:o={},config:r={},headless:i,import:a,lite:l,view:c,...d}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let h="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),u.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(r))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{u.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return a},a:function(){return i}});var s=n(7294);let o={},r=s.createContext(o);function i(e){let t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/75343e73.2d7a6c57.js b/docs/assets/js/75343e73.2d7a6c57.js new file mode 100644 index 0000000..74df0d2 --- /dev/null +++ b/docs/assets/js/75343e73.2d7a6c57.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9940"],{4256:function(e,t,s){s.r(t),s.d(t,{default:()=>m,frontMatter:()=>a,metadata:()=>n,assets:()=>c,toc:()=>d,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/commonlisp","title":"Common Lisp","description":"Common Lisp is a dialect of the Lisp programming language.","source":"@site/docs/languages/commonlisp.mdx","sourceDirName":"languages","slug":"/languages/commonlisp","permalink":"/docs/languages/commonlisp","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/commonlisp.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"CoffeeScript","permalink":"/docs/languages/coffeescript"},"next":{"title":"C/C++ (Wasm)","permalink":"/docs/languages/cpp-wasm"}}'),o=s("5893"),i=s("65"),r=s("3365");let a={},l="Common Lisp",c={},d=[{value:"Usage",id:"usage",level:2},{value:"JS Interoperability",id:"js-interoperability",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Aliases/Extensions",id:"aliasesextensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Limitations",id:"limitations",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"common-lisp",children:"Common Lisp"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"https://common-lisp.net/",children:"Common Lisp"})," is a dialect of the Lisp programming language."]}),"\n",(0,o.jsxs)(t.p,{children:["In LiveCodes, Common Lisp code runs in the browser using ",(0,o.jsx)(t.a,{href:"https://github.com/jscl-project/jscl",children:"JSCL"}),", a Common Lisp to JavaScript compiler."]}),"\n",(0,o.jsx)(t.admonition,{title:"Note",type:"info",children:(0,o.jsxs)(t.p,{children:["Lisp language family supported in LiveCodes includes ",(0,o.jsx)(t.a,{href:"/docs/languages/commonlisp",children:"Common Lisp"}),", ",(0,o.jsx)(t.a,{href:"/docs/languages/scheme",children:"Scheme"}),", ",(0,o.jsx)(t.a,{href:"/docs/languages/clojurescript",children:"ClojureScript"})," and ",(0,o.jsx)(t.a,{href:"/docs/languages/fennel",children:"Fennel"}),"."]})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.p,{children:"LiveCodes runs Common Lisp code in the browser. JSCL implements a subset of Common Lisp, but covers enough functionality to write practical code."}),"\n","\n",(0,o.jsx)(t.p,{children:"This example demonstrates basic Common Lisp syntax and functionality:"}),"\n",(0,o.jsx)(r.Z,{template:"commonlisp",height:"80vh"}),"\n",(0,o.jsx)(t.h3,{id:"js-interoperability",children:"JS Interoperability"}),"\n",(0,o.jsxs)(t.p,{children:["Please see ",(0,o.jsx)(t.a,{href:"https://github.com/jscl-project/jscl/wiki/JSCL-and-manipulations-with-JS-objects",children:"JSCL docs"})]}),"\n",(0,o.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,o.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"commonlisp"})}),"\n",(0,o.jsx)(t.h3,{id:"aliasesextensions",children:"Aliases/Extensions"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"common-lisp"}),", ",(0,o.jsx)(t.code,{children:"lisp"})]}),"\n",(0,o.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"script"})}),"\n",(0,o.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"https://github.com/jscl-project/jscl",children:"JSCL"})," - Common Lisp to JavaScript compiler"]}),"\n",(0,o.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,o.jsxs)(t.p,{children:["Using ",(0,o.jsx)(t.a,{href:"https://shaunlebron.github.io/parinfer/",children:"Parinfer"}),"."]}),"\n",(0,o.jsx)(t.h2,{id:"limitations",children:"Limitations"}),"\n",(0,o.jsxs)(t.p,{children:["Since JSCL is a subset of Common Lisp, it doesn't implement all Common Lisp features. See the ",(0,o.jsx)(t.a,{href:"https://github.com/jscl-project/jscl#status",children:"JSCL documentation"})," for more information."]}),"\n",(0,o.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://livecodes.io/?template=commonlisp",children:"https://livecodes.io/?template=commonlisp"})}),"\n",(0,o.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://common-lisp.net/",children:"Common Lisp"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://github.com/jscl-project/jscl",children:"JSCL"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://www.cs.cmu.edu/~dst/LispBook/",children:"Common Lisp: A Gentle Introduction to Symbolic Computation"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"http://www.gigamonkeys.com/book/",children:"Practical Common Lisp"})}),"\n"]})]})}function m(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),o=s("4200"),i=s("7294"),r=s("8294");function a(e){let t=(0,i.useRef)(null),[s,o]=(0,i.useState)(e.className||""),[a,l]=(0,i.useState)(e.style||{}),[c,d]=(0,i.useState)(e.height),[h,m]=(0,i.useState)(),[p,u]=(0,i.useState)(JSON.stringify(e.config||"")),[g,f]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:i,sdkReady:a,config:c,...v}=e;if(o(s||""),l(n||{}),d(i),h&&g===JSON.stringify(v)){if(p===JSON.stringify(c))return;u(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else f(JSON.stringify(v)),h?.destroy(),(0,r.T)(t.current,{config:c,...v}).then(e=>{m(e),"function"==typeof a&&a(e)})},[e]),(0,i.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),h=s("7645"),m=s("8168"),p=s("8228"),u=s("5050");function g(e){let[t,s]=(0,i.useState)(e.js),[o,r]=(0,i.useState)(e.ts),[a,l]=(0,i.useState)(e.react),[g,f]=(0,i.useState)(e.vue),[v,y]=(0,i.useState)(e.svelte),j="3.7rem",[x,b]=(0,i.useState)(!0),[w,C]=(0,i.useState)(j),S=(0,i.useRef)(null),L=()=>{setTimeout(()=>{C(`calc(${S.current.offsetHeight}px + ${j})`)},5),setTimeout(()=>{C(`calc(${S.current.offsetHeight}px + ${j})`)},255)};return(0,i.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),r(e(o,"ts")),l(e(a,"jsx")),f(e(g,"html")),y(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${u.Z.details} ${p.Z.details}`,"data-collapsed":x,style:{height:x?j:w,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!x),L()},children:"show code"}),(0,n.jsx)("div",{ref:S,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:u.Z.collapsibleContent,children:(0,n.jsxs)(m.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:L},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:L},children:(0,n.jsx)(d.Z,{language:"ts",children:o})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:L},children:(0,n.jsx)(d.Z,{language:"jsx",children:a})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:L},children:(0,n.jsx)(d.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:L},children:(0,n.jsx)(d.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:i,height:r,...c}=e,{colorMode:d}=(0,o.I)(),h=e=>JSON.stringify(e,null,2),m=` +import { createPlayground } from 'livecodes'; + +const options = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),u=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(c)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),f=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${h(c)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,v=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${h(c)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:r||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:m,ts:p,react:u,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return o},r:function(){return i}});var n=s(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:o="lazy",view:r}=t,a=n||"headless"===r,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)L(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(i(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":o);let m=globalThis.process;d.searchParams.set("sdkVersion",m?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let u=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",i=l.querySelector(`iframe.${n}`),r=i||document.createElement("iframe");r.classList.add(n),r.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),r.setAttribute("allowtransparency","true"),r.setAttribute("allowpaymentrequest","true"),r.setAttribute("allowfullscreen","true"),r.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),r.setAttribute("loading","eager"===o?"eager":"lazy"),a?L(r):(r.style.height="100%",r.style.minHeight="200px",r.style.width="100%",r.style.margin="0",r.style.border="0",r.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),r.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),r.onload=()=>{e(r)},r.src=d.href,i||l.appendChild(r)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>u?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),j=(e,t)=>new Promise(async(s,n)=>{if(u)return n(g);await y();let o=E();addEventListener("message",function t(i){if(i.source===f.contentWindow&&i.origin===h&&i.data?.type==="livecodes-api-response"&&i.data?.id===o&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:o,args:t},h)}),x={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(u)throw Error(g);return b.includes(e)?(j("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},C=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=C(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!x[t])return;let s=e.data?.payload;x[t]?.forEach(e=>{e(s)})});let S=()=>{Object.values(x).forEach(e=>{e.length=0}),f?.remove?.(),u=!0};function L(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,t)=>j("show",[e,t]),runTests:()=>j("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return j("exec",[e,...s])},destroy:()=>v.settled?j("destroy").then(S):u?Promise.reject(g):(S(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:o={},config:i={},headless:r,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let m="headless"===t.view||r;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==c?i.view=c:e.searchParams.set("view",c)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(i))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),m&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return r}});var n=s(7294);let o={},i=n.createContext(o);function r(e){let t=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/7565.8b853473.js b/docs/assets/js/7565.8b853473.js new file mode 100644 index 0000000..819adaa --- /dev/null +++ b/docs/assets/js/7565.8b853473.js @@ -0,0 +1 @@ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7565"],{8228:function(e,r,t){"use strict";t.d(r,{Z:function(){return n}});let n={details:"details_sGeq"}},5050:function(e,r,t){"use strict";t.d(r,{Z:function(){return n}});let n={details:"details_iMJ2",isBrowser:"isBrowser_HA_8",collapsibleContent:"collapsibleContent_AEyV"}},7728:function(e,r,t){e=t.nmd(e);var n=function(){var e=String.fromCharCode,r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",n={};function o(e,r){if(!n[e]){n[e]={};for(var t=0;t<e.length;t++)n[e][e.charAt(t)]=t}return n[e][r]}var a={compressToBase64:function(e){if(null==e)return"";var t=a._compress(e,6,function(e){return r.charAt(e)});switch(t.length%4){default:case 0:return t;case 1:return t+"===";case 2:return t+"==";case 3:return t+"="}},decompressFromBase64:function(e){return null==e?"":""==e?null:a._decompress(e.length,32,function(t){return o(r,e.charAt(t))})},compressToUTF16:function(r){return null==r?"":a._compress(r,15,function(r){return e(r+32)})+" "},decompressFromUTF16:function(e){return null==e?"":""==e?null:a._decompress(e.length,16384,function(r){return e.charCodeAt(r)-32})},compressToUint8Array:function(e){for(var r=a.compress(e),t=new Uint8Array(2*r.length),n=0,o=r.length;n<o;n++){var s=r.charCodeAt(n);t[2*n]=s>>>8,t[2*n+1]=s%256}return t},decompressFromUint8Array:function(r){if(null==r)return a.decompress(r);for(var t=Array(r.length/2),n=0,o=t.length;n<o;n++)t[n]=256*r[2*n]+r[2*n+1];var s=[];return t.forEach(function(r){s.push(e(r))}),a.decompress(s.join(""))},compressToEncodedURIComponent:function(e){return null==e?"":a._compress(e,6,function(e){return t.charAt(e)})},decompressFromEncodedURIComponent:function(e){return null==e?"":""==e?null:(e=e.replace(/ /g,"+"),a._decompress(e.length,32,function(r){return o(t,e.charAt(r))}))},compress:function(r){return a._compress(r,16,function(r){return e(r)})},_compress:function(e,r,t){if(null==e)return"";var n,o,a,s={},i={},u="",l="",c="",p=2,f=3,h=2,d=[],m=0,v=0;for(a=0;a<e.length;a+=1)if(u=e.charAt(a),Object.prototype.hasOwnProperty.call(s,u)||(s[u]=f++,i[u]=!0),l=c+u,Object.prototype.hasOwnProperty.call(s,l))c=l;else{if(Object.prototype.hasOwnProperty.call(i,c)){if(256>c.charCodeAt(0)){for(n=0;n<h;n++)m<<=1,v==r-1?(v=0,d.push(t(m)),m=0):v++;for(n=0,o=c.charCodeAt(0);n<8;n++)m=m<<1|1&o,v==r-1?(v=0,d.push(t(m)),m=0):v++,o>>=1}else{for(n=0,o=1;n<h;n++)m=m<<1|o,v==r-1?(v=0,d.push(t(m)),m=0):v++,o=0;for(n=0,o=c.charCodeAt(0);n<16;n++)m=m<<1|1&o,v==r-1?(v=0,d.push(t(m)),m=0):v++,o>>=1}0==--p&&(p=Math.pow(2,h),h++),delete i[c]}else for(n=0,o=s[c];n<h;n++)m=m<<1|1&o,v==r-1?(v=0,d.push(t(m)),m=0):v++,o>>=1;0==--p&&(p=Math.pow(2,h),h++),s[l]=f++,c=String(u)}if(""!==c){if(Object.prototype.hasOwnProperty.call(i,c)){if(256>c.charCodeAt(0)){for(n=0;n<h;n++)m<<=1,v==r-1?(v=0,d.push(t(m)),m=0):v++;for(n=0,o=c.charCodeAt(0);n<8;n++)m=m<<1|1&o,v==r-1?(v=0,d.push(t(m)),m=0):v++,o>>=1}else{for(n=0,o=1;n<h;n++)m=m<<1|o,v==r-1?(v=0,d.push(t(m)),m=0):v++,o=0;for(n=0,o=c.charCodeAt(0);n<16;n++)m=m<<1|1&o,v==r-1?(v=0,d.push(t(m)),m=0):v++,o>>=1}0==--p&&(p=Math.pow(2,h),h++),delete i[c]}else for(n=0,o=s[c];n<h;n++)m=m<<1|1&o,v==r-1?(v=0,d.push(t(m)),m=0):v++,o>>=1;0==--p&&(p=Math.pow(2,h),h++)}for(n=0,o=2;n<h;n++)m=m<<1|1&o,v==r-1?(v=0,d.push(t(m)),m=0):v++,o>>=1;for(;;){if(m<<=1,v==r-1){d.push(t(m));break}v++}return d.join("")},decompress:function(e){return null==e?"":""==e?null:a._decompress(e.length,32768,function(r){return e.charCodeAt(r)})},_decompress:function(r,t,n){var o,a,s,i,u,l,c,p=[],f=4,h=4,d=3,m="",v=[],b={val:n(0),position:t,index:1};for(o=0;o<3;o+=1)p[o]=o;for(s=0,u=4,l=1;l!=u;)i=b.val&b.position,b.position>>=1,0==b.position&&(b.position=t,b.val=n(b.index++)),s|=(i>0?1:0)*l,l<<=1;switch(s){case 0:for(s=0,u=256,l=1;l!=u;)i=b.val&b.position,b.position>>=1,0==b.position&&(b.position=t,b.val=n(b.index++)),s|=(i>0?1:0)*l,l<<=1;c=e(s);break;case 1:for(s=0,u=65536,l=1;l!=u;)i=b.val&b.position,b.position>>=1,0==b.position&&(b.position=t,b.val=n(b.index++)),s|=(i>0?1:0)*l,l<<=1;c=e(s);break;case 2:return""}for(p[3]=c,a=c,v.push(c);;){if(b.index>r)return"";for(s=0,u=Math.pow(2,d),l=1;l!=u;)i=b.val&b.position,b.position>>=1,0==b.position&&(b.position=t,b.val=n(b.index++)),s|=(i>0?1:0)*l,l<<=1;switch(c=s){case 0:for(s=0,u=256,l=1;l!=u;)i=b.val&b.position,b.position>>=1,0==b.position&&(b.position=t,b.val=n(b.index++)),s|=(i>0?1:0)*l,l<<=1;p[h++]=e(s),c=h-1,f--;break;case 1:for(s=0,u=65536,l=1;l!=u;)i=b.val&b.position,b.position>>=1,0==b.position&&(b.position=t,b.val=n(b.index++)),s|=(i>0?1:0)*l,l<<=1;p[h++]=e(s),c=h-1,f--;break;case 2:return v.join("")}if(0==f&&(f=Math.pow(2,d),d++),p[c])m=p[c];else{if(c!==h)return null;m=a+a.charAt(0)}v.push(m),p[h++]=a+m.charAt(0),f--,a=m,0==f&&(f=Math.pow(2,d),d++)}}};return a}();"function"==typeof define&&define.amd?define(function(){return n}):null!=e&&(e.exports=n)},7645:function(e,r,t){"use strict";t.d(r,{Z:()=>a});var n=t("5893");t("7294");var o=t("7026");function a(e){let{children:r,hidden:t,className:a}=e;return(0,n.jsx)("div",{role:"tabpanel",className:(0,o.Z)("tabItem_Ymn6",a),hidden:t,children:r})}},8168:function(e,r,t){"use strict";t.d(r,{Z:()=>w});var n=t("5893"),o=t("7294"),a=t("7026"),s=t("4718"),i=t("6550"),u=t("8714"),l=t("9207"),c=t("9413"),p=t("4510");function f(e){return o.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||o.isValidElement(e)&&function(e){let{props:r}=e;return!!r&&"object"==typeof r&&"value"in r}(e))return e;throw Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)})?.filter(Boolean)??[]}function h(e){let{value:r,tabValues:t}=e;return t.some(e=>e.value===r)}var d=t("6735");function m(e){let{className:r,block:t,selectedValue:o,selectValue:i,tabValues:u}=e,l=[],{blockElementScrollPositionUntilNextRender:c}=(0,s.o5)(),p=e=>{let r=e.currentTarget,t=u[l.indexOf(r)].value;t!==o&&(c(r),i(t))},f=e=>{let r=null;switch(e.key){case"Enter":p(e);break;case"ArrowRight":{let t=l.indexOf(e.currentTarget)+1;r=l[t]??l[0];break}case"ArrowLeft":{let t=l.indexOf(e.currentTarget)-1;r=l[t]??l[l.length-1]}}r?.focus()};return(0,n.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":t},r),children:u.map(e=>{let{value:r,label:t,attributes:s}=e;return(0,n.jsx)("li",{role:"tab",tabIndex:o===r?0:-1,"aria-selected":o===r,ref:e=>{l.push(e)},onKeyDown:f,onClick:p,...s,className:(0,a.Z)("tabs__item","tabItem_LNqP",s?.className,{"tabs__item--active":o===r}),children:t??r},r)})})}function v(e){let{lazy:r,children:t,selectedValue:s}=e,i=(Array.isArray(t)?t:[t]).filter(Boolean);if(r){let e=i.find(e=>e.props.value===s);return e?(0,o.cloneElement)(e,{className:(0,a.Z)("margin-top--md",e.props.className)}):null}return(0,n.jsx)("div",{className:"margin-top--md",children:i.map((e,r)=>(0,o.cloneElement)(e,{key:r,hidden:e.props.value!==s}))})}function b(e){let r=function(e){let{defaultValue:r,queryString:t=!1,groupId:n}=e,a=function(e){let{values:r,children:t}=e;return(0,o.useMemo)(()=>{let e=r??f(t).map(e=>{let{props:{value:r,label:t,attributes:n,default:o}}=e;return{value:r,label:t,attributes:n,default:o}});return!function(e){let r=(0,c.lx)(e,(e,r)=>e.value===r.value);if(r.length>0)throw Error(`Docusaurus error: Duplicate values "${r.map(e=>e.value).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e},[r,t])}(e),[s,d]=(0,o.useState)(()=>(function(e){let{defaultValue:r,tabValues:t}=e;if(0===t.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(r){if(!h({value:r,tabValues:t}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${r}" but none of its children has the corresponding value. Available values are: ${t.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return r}let n=t.find(e=>e.default)??t[0];if(!n)throw Error("Unexpected error: 0 tabValues");return n.value})({defaultValue:r,tabValues:a})),[m,v]=function(e){let{queryString:r=!1,groupId:t}=e,n=(0,i.k6)(),a=function(e){let{queryString:r=!1,groupId:t}=e;if("string"==typeof r)return r;if(!1===r)return null;if(!0===r&&!t)throw Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:r,groupId:t});return[(0,l._X)(a),(0,o.useCallback)(e=>{if(!a)return;let r=new URLSearchParams(n.location.search);r.set(a,e),n.replace({...n.location,search:r.toString()})},[a,n])]}({queryString:t,groupId:n}),[b,w]=function(e){let{groupId:r}=e,t=r?`docusaurus.tab.${r}`:null,[n,a]=(0,p.Nk)(t);return[n,(0,o.useCallback)(e=>{t&&a.set(e)},[t,a])]}({groupId:n}),y=(()=>{let e=m??b;return h({value:e,tabValues:a})?e:null})();return(0,u.Z)(()=>{y&&d(y)},[y]),{selectedValue:s,selectValue:(0,o.useCallback)(e=>{if(!h({value:e,tabValues:a}))throw Error(`Can't select invalid tab value=${e}`);d(e),v(e),w(e)},[v,w,a]),tabValues:a}}(e);return(0,n.jsxs)("div",{className:(0,a.Z)("tabs-container","tabList__CuJ"),children:[(0,n.jsx)(m,{...r,...e}),(0,n.jsx)(v,{...r,...e})]})}function w(e){let r=(0,d.Z)();return(0,n.jsx)(b,{...e,children:f(e.children)},String(r))}}}]); \ No newline at end of file diff --git a/docs/assets/js/78dcf9c6.c2549a4b.js b/docs/assets/js/78dcf9c6.c2549a4b.js new file mode 100644 index 0000000..ac63cd6 --- /dev/null +++ b/docs/assets/js/78dcf9c6.c2549a4b.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8118"],{8050:function(e,t,s){s.r(t),s.d(t,{default:()=>f,frontMatter:()=>d,metadata:()=>n,assets:()=>c,toc:()=>h,contentTitle:()=>l});var n=JSON.parse('{"id":"features/embeds","title":"Embedded Playgrounds","description":"Overview","source":"@site/docs/features/embeds.mdx","sourceDirName":"features","slug":"/features/embeds","permalink":"/docs/features/embeds","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/embeds.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Mobile Support","permalink":"/docs/features/mobile"},"next":{"title":"Lite Mode","permalink":"/docs/features/lite"}}'),r=s("5893"),o=s("65"),i=s("3365"),a=s("8500");let d={},l="Embedded Playgrounds",c={},h=[{value:"Overview",id:"overview",level:2},{value:"Create Embedded Playground",id:"create-embedded-playground",level:2},{value:"App Embed Screen",id:"app-embed-screen",level:3},{value:"SDK",id:"sdk",level:3},{value:"Avoid Breaking Changes",id:"avoid-breaking-changes",level:2},{value:"Differences from Full App",id:"differences-from-full-app",level:2},{value:"Features Not Available",id:"features-not-available",level:3},{value:"Features Not Shown by Default",id:"features-not-shown-by-default",level:3},{value:"Security",id:"security",level:2},{value:"Related",id:"related",level:2}];function u(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"embedded-playgrounds",children:"Embedded Playgrounds"})}),"\n","\n",(0,r.jsx)(t.h2,{id:"overview",children:"Overview"}),"\n",(0,r.jsxs)(t.p,{children:["LiveCodes playgrounds can be embedded in any web page. The playground can be ",(0,r.jsx)(t.a,{href:"/docs/features/code-prefill",children:"prefilled with code"})," in any supported language. This can be very useful in documentation websites, technical blogs, educational websites and others."]}),"\n",(0,r.jsx)(t.p,{children:"Demo:"}),"\n",(0,r.jsx)(i.Z,{template:"javascript"}),"\n",(0,r.jsxs)(t.p,{children:["The embedding web page can communicate with the playground using a powerful ",(0,r.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," (e.g. edit/format code, watch for code changes, get the compiled code or result page HTML, run tests, change layout, ...etc)."]}),"\n",(0,r.jsx)(t.h2,{id:"create-embedded-playground",children:"Create Embedded Playground"}),"\n",(0,r.jsx)(t.h3,{id:"app-embed-screen",children:"App Embed Screen"}),"\n",(0,r.jsxs)(t.p,{children:["In the ",(0,r.jsx)(t.a,{href:"/docs/getting-started#standalone-app",children:"standalone app"}),", the Embed Screen can be accessed from Project menu \u2192 Embed."]}),"\n","\n",(0,r.jsx)(a.Z,{params:{screen:"embed"},linkText:"direct link"}),"\n",(0,r.jsxs)(t.p,{children:["It shows a preview of the embedded playground, allows customizations of ",(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#embed-options",children:"embed options"})," and provides generated code that can be added to the web page that will embed the playground."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.img,{alt:"LiveCodes embed",src:s(6054).Z+"",width:"2240",height:"1400"}),"\n",(0,r.jsx)(t.img,{alt:"LiveCodes embed",src:s(6494).Z+"",width:"2240",height:"1400"}),"\n",(0,r.jsx)(t.img,{alt:"LiveCodes embed",src:s(7254).Z+"",width:"2240",height:"1400"})]}),"\n",(0,r.jsx)(t.admonition,{title:"Note",type:"info",children:(0,r.jsxs)(t.p,{children:["Please note that the Embed Screen sends the project code to ",(0,r.jsx)(t.a,{href:"/docs/features/share",children:"LiveCodes share service"})," to generate a short URL for usage in the embed code."]})}),"\n",(0,r.jsx)(t.p,{children:'The setting "Embed Type" allows selection from different variations of the generated code:'}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"Using the SDK from CDN."}),"\n",(0,r.jsx)(t.li,{children:"Using the SDK with a bundler (e.g. vite, parcel, webpack, etc)."}),"\n",(0,r.jsx)(t.li,{children:"Using the React SDK."}),"\n",(0,r.jsx)(t.li,{children:"Using the Vue SDK."}),"\n",(0,r.jsxs)(t.li,{children:["Using iframe and ",(0,r.jsx)(t.a,{href:"/docs/configuration/query-params",children:"query params"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:["Using HTML code that the SDK can use to ",(0,r.jsx)(t.a,{href:"/docs/features/code-prefill#auto-prefill-from-page-dom",children:"auto-prefill"})," the playground."]}),"\n"]}),"\n",(0,r.jsx)(t.h3,{id:"sdk",children:"SDK"}),"\n",(0,r.jsxs)(t.p,{children:["The LiveCodes ",(0,r.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," can be used to embed playgrounds, specify ",(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#embed-options",children:"embed"})," and ",(0,r.jsx)(t.a,{href:"/docs/configuration/",children:"configuration"})," options and allows communication with the embedded playground with many ",(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#sdk-methods",children:"SDK methods"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"This method provides more control and allows advanced scenarios."}),"\n",(0,r.jsx)(t.h2,{id:"avoid-breaking-changes",children:"Avoid Breaking Changes"}),"\n",(0,r.jsx)(t.p,{children:"To avoid breaking changes that would cause the embedded playgrounds to stop working as expected with later updates, follow these recommendations:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Use a ",(0,r.jsx)(t.a,{href:"/docs/features/permanent-url",children:"permanent URL"})," to a pinned version of the LiveCodes app for ",(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#appurl",children:(0,r.jsx)(t.code,{children:"EmbedOptions.appUrl"})}),". The code generated in the Embed screen uses that by default."]}),"\n",(0,r.jsx)(t.li,{children:"Specify the version of the SDK used. The code generated in the Embed screen also does that."}),"\n",(0,r.jsxs)(t.li,{children:["For project code, ",(0,r.jsx)(t.a,{href:"/docs/features/module-resolution#package-version",children:"specify the versions"})," of the imported packages and ",(0,r.jsx)(t.a,{href:"/docs/features/external-resources",children:"external resources"}),". ",(0,r.jsx)(t.a,{href:"/docs/features/module-resolution#custom-module-resolution",children:"Custom import maps"})," can be set to control the module import behavior."]}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["Check the ",(0,r.jsx)(t.a,{href:"/docs/features/permanent-url",children:"Permanent URL"})," section for more details."]}),"\n",(0,r.jsx)(t.h2,{id:"differences-from-full-app",children:"Differences from Full App"}),"\n",(0,r.jsx)(t.p,{children:"Some of the features of the full standalone app are not available or shown by default in embedded playgrounds, either because of security reasons, being not useful when embedded or because of space limitations."}),"\n",(0,r.jsx)(t.h3,{id:"features-not-available",children:"Features Not Available"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["All features that require saving/loading from browser storage:\ne.g. ",(0,r.jsx)(t.a,{href:"/docs/features/projects",children:"projects"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/assets",children:"assets"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/snippets",children:"code snippets"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/user-settings",children:"user settings"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/default-template-language",children:"default template/language"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/recover",children:"recover unsaved"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/backup-restore",children:"backup/restore"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:["All features that require authentication:\ne.g. ",(0,r.jsx)(t.a,{href:"/docs/features/github-integration",children:"login/logout"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/sync",children:"sync"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/deploy",children:"deploy"}),", ",(0,r.jsx)(t.a,{href:"/docs/features/import",children:"importing"})," from private github repos."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/features/broadcast",children:"Broadcast"}),"."]}),"\n",(0,r.jsx)(t.li,{children:"App menus."}),"\n",(0,r.jsxs)(t.li,{children:["Some tools in ",(0,r.jsx)(t.a,{href:"/docs/features/tools-pane",children:"tools pane"}),":\ne.g. open result page in new window, broadcast status."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/features/welcome",children:"Welcome screen"}),"."]}),"\n"]}),"\n",(0,r.jsx)(t.h3,{id:"features-not-shown-by-default",children:"Features Not Shown by Default"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/features/external-resources",children:"External resources"})," button (below the editor) and external resources screen are only shown if the loaded project has external resources (e.g. via ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#stylesheets",children:(0,r.jsx)(t.code,{children:"EmbedOptions.config.stylesheets"})})," and ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#scripts",children:(0,r.jsx)(t.code,{children:"EmbedOptions.config.scripts"})}),")."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/features/tests",children:"Tests"})," are not shown in ",(0,r.jsx)(t.a,{href:"/docs/features/tools-pane",children:"tools pane"})," unless the loaded project has tests (e.g. via ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#tests",children:(0,r.jsx)(t.code,{children:"EmbedOptions.config.tests"})}),"). Test editor is not available."]}),"\n",(0,r.jsxs)(t.li,{children:["Loading ",(0,r.jsx)(t.a,{href:"/docs/features/templates",children:"starter templates"})," can be achieved by the ",(0,r.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," (",(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#template",children:(0,r.jsx)(t.code,{children:"EmbedOptions.template"})}),"), not from the UI."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/features/import",children:"Importing"})," from external sources can be achieved by the ",(0,r.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," (",(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#import",children:(0,r.jsx)(t.code,{children:"EmbedOptions.import"})}),"), not from the UI."]}),"\n",(0,r.jsxs)(t.li,{children:["Getting a ",(0,r.jsx)(t.a,{href:"/docs/features/share",children:"share"})," URL can be achieved by the ",(0,r.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})," (",(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#getshareurl",children:(0,r.jsx)(t.code,{children:"getShareUrl"})})," method), not from the UI."]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"security",children:"Security"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["All user code, ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," and compilers run in ",(0,r.jsx)(t.a,{href:"https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/",children:"sandboxed iframes"})," with a unique origin."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Embedded playgrounds do not have access to the parent page, or to sensitive data like user cookies and localstorage of the embedding page origin. Communications with the SDK occur by means of ",(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage",children:(0,r.jsx)(t.code,{children:"postMessage"})})," calls."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/sdk/",children:"SDK"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/features/code-prefill",children:"Code prefill"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/configuration/",children:"Configuration"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#embed-options",children:"Embed options"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/sdk/js-ts#sdk-methods",children:"SDK methods"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/features/permanent-url",children:"Permanent URL"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/features/lite",children:"Lite mode"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/features/read-only",children:"Read-only"})}),"\n"]})]})}function f(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},6054:function(e,t,s){s.d(t,{Z:function(){return n}});let n=s.p+"assets/images/embed-1-408ede1485d4bc08a9d49ae7c79dd077.jpg"},6494:function(e,t,s){s.d(t,{Z:function(){return n}});let n=s.p+"assets/images/embed-2-1a99c4db9d201fd7d7a928cccc31b1b6.jpg"},7254:function(e,t,s){s.d(t,{Z:function(){return n}});let n=s.p+"assets/images/embed-3-c90eef02803a8609e7c39ccb48bbe5a6.jpg"},3365:function(e,t,s){s.d(t,{Z:()=>g});var n=s("5893"),r=s("4200"),o=s("7294"),i=s("8294");function a(e){let t=(0,o.useRef)(null),[s,r]=(0,o.useState)(e.className||""),[a,d]=(0,o.useState)(e.style||{}),[l,c]=(0,o.useState)(e.height),[h,u]=(0,o.useState)(),[f,p]=(0,o.useState)(JSON.stringify(e.config||"")),[m,g]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:o,sdkReady:a,config:l,...j}=e;if(r(s||""),d(n||{}),c(o),h&&m===JSON.stringify(j)){if(f===JSON.stringify(l))return;p(JSON.stringify(l)),"string"==typeof l?fetch(l).then(e=>e.json()).then(e=>{h?.setConfig(e)}):l&&h.setConfig(l)}else g(JSON.stringify(j)),h?.destroy(),(0,i.T)(t.current,{config:l,...j}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,o.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":l})}var d=s("1858"),l=s("3262"),c=s("1705"),h=s("7645"),u=s("8168"),f=s("8228"),p=s("5050");function m(e){let[t,s]=(0,o.useState)(e.js),[r,i]=(0,o.useState)(e.ts),[a,d]=(0,o.useState)(e.react),[m,g]=(0,o.useState)(e.vue),[j,x]=(0,o.useState)(e.svelte),b="3.7rem",[v,y]=(0,o.useState)(!0),[w,S]=(0,o.useState)(b),k=(0,o.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${k.current.offsetHeight}px + ${b})`)},5),setTimeout(()=>{S(`calc(${k.current.offsetHeight}px + ${b})`)},255)};return(0,o.useEffect)(()=>{if(l.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(r,"ts")),d(e(a,"jsx")),g(e(m,"html")),x(e(j,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${f.Z.details}`,"data-collapsed":v,style:{height:v?b:w,overflow:"hidden",willChange:"height",transition:`height ${v?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{y(!v),E()},children:"show code"}),(0,n.jsx)("div",{ref:k,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:p.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"ts",children:r})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"jsx",children:a})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"html",children:m})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"html",children:j})})]})})})]})}function g(e){let{className:t,style:s,showCode:o,height:i,...l}=e,{colorMode:c}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(l)}; +createPlayground('#container', options); + +`.trimStart(),f=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(l)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(l)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),g=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${h(l)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,j=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${h(l)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:d.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(m,{js:u,ts:f,react:p,vue:g,svelte:j})]})}},8500:function(e,t,s){s.d(t,{Z:()=>l});var n=s("5893");s("7294");var r=s("6735");function o(e){let{children:t,fallback:s}=e;return(0,r.Z)()?(0,n.jsx)(n.Fragment,{children:t?.()}):s??null}var i=s("1705"),a=s("8294"),d=s("1858");function l(e){let{params:t,config:s,code:r,language:l="js",codeTitle:c="",showLineNumbers:h=!1,formatCode:u=!0,linkText:f="Run in LiveCodes",style:p={},className:m=""}=e,g=(0,a.r)({appUrl:d.G,params:t,config:s});return(0,n.jsxs)("div",{style:{marginBottom:"30px",...p},className:m,children:[r&&(0,n.jsx)(o,{children:()=>(0,n.jsx)(i.Z,{language:l,title:c,showLineNumbers:h,children:u?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(r,l):r})}),(0,n.jsxs)("a",{href:g,target:"_blank",rel:"noreferrer",children:[f,(0,n.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,n.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return o}});var n=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:r="lazy",view:i}=t,a=n||"headless"===i,d=null,l=null;if("string"==typeof e)d=document.querySelector(e);else if(e instanceof HTMLElement)d=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!d){if(a)E(d=document.createElement("div")),document.body.appendChild(d);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(o(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":r);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let f=t.params;"object"==typeof f&&Object.keys(f).length>0&&JSON.stringify(f).length<1800&&Object.keys(f).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(f[e])))});let p=!1,m="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!d)return;let t=d.dataset.height||d.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";d.style.height=e}"false"===d.dataset.defaultStyles||a||(d.style.backgroundColor||="#fff",d.style.border||="1px solid black",d.style.borderRadius||="8px",d.style.boxSizing||="border-box",d.style.padding||="0",d.style.width||="100%",d.style.height||=d.style.height||"300px",d.style.minHeight="200px",d.style.flexGrow="1",d.style.overflow||="hidden",d.style.resize||="vertical");let n="livecodes",o=d.querySelector(`iframe.${n}`),i=o||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===r?"eager":"lazy"),a?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=d.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),l=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!l||l<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),i.onload=()=>{e(i)},i.src=c.href,o||d.appendChild(i)}),j=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),j.settled=!0)})}),x=()=>p?Promise.reject(m):new Promise(async e=>{j.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},h),await j,e()}),b=(e,t)=>new Promise(async(s,n)=>{if(p)return n(m);await x();let r=C();addEventListener("message",function t(o){if(o.source===g.contentWindow&&o.origin===h&&o.data?.type==="livecodes-api-response"&&o.data?.id===r&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?n(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:r,args:t},h)}),v={},y=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(p)throw Error(m);return y.includes(e)?(b("watch",[e]),v[e]||(v[e]=[]),v[e]?.push(t),{remove:()=>{v[e]=v[e]?.filter(e=>e!==t),v[e]?.length===0&&b("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==h||!t||!v[t])return;let s=e.data?.payload;v[t]?.forEach(e=>{e(s)})});let k=()=>{Object.values(v).forEach(e=>{e.length=0}),g?.remove?.(),p=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await x(),t.unobserve(d))})},{rootMargin:"150px"}).observe(d);let C=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>x(),run:()=>b("run"),format:e=>b("format",[e]),getShareUrl:e=>b("getShareUrl",[e]),getConfig:e=>b("getConfig",[e]),setConfig:e=>b("setConfig",[e]),getCode:()=>b("getCode"),show:(e,t)=>b("show",[e,t]),runTests:()=>b("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return b("exec",[e,...s])},destroy:()=>j.settled?b("destroy").then(k):p?Promise.reject(m):(k(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:o={},headless:i,import:a,lite:d,view:l,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||i;if(d&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),l&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==l?o.view=l:e.searchParams.set("view",l)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(o))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return i}});var n=s(7294);let r={},o=n.createContext(r);function i(e){let t=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/7a3ca373.fad1b7e4.js b/docs/assets/js/7a3ca373.fad1b7e4.js new file mode 100644 index 0000000..6e272b5 --- /dev/null +++ b/docs/assets/js/7a3ca373.fad1b7e4.js @@ -0,0 +1,42 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7773"],{7512:function(e,s,n){n.r(s),n.d(s,{Code:()=>h,AppVersionLink:()=>p,default:()=>v,GetPermanentUrl:()=>u,frontMatter:()=>a,metadata:()=>t,assets:()=>c,FullCode:()=>m,toc:()=>f,contentTitle:()=>d});var t=JSON.parse('{"id":"features/permanent-url","title":"Permanent URL","description":"Any specific version of LiveCodes app can be accessed through the permanent unique URL:","source":"@site/docs/features/permanent-url.mdx","sourceDirName":"features","slug":"/features/permanent-url","permalink":"/docs/features/permanent-url","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/permanent-url.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Read-Only","permalink":"/docs/features/read-only"},"next":{"title":"Code Prefill","permalink":"/docs/features/code-prefill"}}'),r=n("5893"),i=n("65"),o=n("7262"),l=n("1705");let a={},d="Permanent URL",c={},p=()=>{let{siteConfig:e}=(0,o.Z)();return(0,r.jsxs)("a",{href:`https://v${e.customFields.appVersion}.livecodes.io`,target:"\\_blank",children:["https://v",e.customFields.appVersion,".livecodes.io"]})},h=()=>{let{siteConfig:e}=(0,o.Z)();return(0,r.jsx)(l.Z,{title:"index.html",language:"html",children:`<div id="container"></div> +<script type="module"> + // specific SDK version +// highlight-next-line + import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes@${e.customFields.sdkVersion}'; + + createPlayground('#container', { + // App permanent URL +// highlight-next-line + appUrl: 'https://v${e.customFields.appVersion}.livecodes.io', + template: 'react', + }); +</script>`})},u=()=>{let{siteConfig:e}=(0,o.Z)();return(0,r.jsx)(l.Z,{language:"js",children:`await livecodes.exec('showVersion'); + +// output: +// App Version: ${e.customFields.appVersion} (https://github.com/live-codes/livecodes/releases/tag/v${e.customFields.appVersion}) +// SDK Version: ${e.customFields.sdkVersion} (https://www.npmjs.com/package/livecodes/v/${e.customFields.sdkVersion}) +// Git commit: 0698f9f (https://github.com/live-codes/livecodes/commit/0698f9f) +// App Permanent URL: https://v${e.customFields.appVersion}.livecodes.io/ +// SDK Permanent URL: https://cdn.jsdelivr.net/npm/livecodes@${e.customFields.sdkVersion}/livecodes.js +`})},m=()=>{let{siteConfig:e}=(0,o.Z)();return(0,r.jsx)(l.Z,{title:"index.html",language:"html",children:`<div id="container"></div> +<script type="module"> + // specific SDK version +// highlight-next-line + import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes@${e.customFields.sdkVersion}'; + + createPlayground('#container', { + // App permanent URL +// highlight-next-line + appUrl: 'https://v${e.customFields.appVersion}.livecodes.io', + config: { + script: { + language: 'javascript', + // project code imports package with specific version +// highlight-next-line + content: 'import lodash from "lodash@4.17.21";\\nconsole.log(lodash.VERSION);', + }, + activeEditor: 'script', + tools: { status: 'open', active: 'console' }, + }, + }); +</script>`})},f=[{value:"Get Permanent URL",id:"get-permanent-url",level:2},{value:"Full Example:",id:"full-example",level:4},{value:"Related",id:"related",level:2}];function x(e){let s={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.header,{children:(0,r.jsx)(s.h1,{id:"permanent-url",children:"Permanent URL"})}),"\n",(0,r.jsx)(s.p,{children:"Any specific version of LiveCodes app can be accessed through the permanent unique URL:"}),"\n","\n","\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"{version}.livecodes.io"}),"\n(e.g. ",(0,r.jsx)(p,{}),")"]}),"\n",(0,r.jsxs)(s.p,{children:["This allows ",(0,r.jsx)(s.a,{href:"/docs/features/embeds",children:"embedded playgrounds"})," to use a pinned version of the LiveCodes app and its dependencies and avoid any breaking changes that may occur in later versions."]}),"\n",(0,r.jsxs)(s.p,{children:["Permanent URL is used by default in the code generated by the ",(0,r.jsx)(s.a,{href:"/docs/features/embeds",children:"embed screen UI"}),".\nIt is also available when ",(0,r.jsx)(s.a,{href:"/docs/features/share",children:"sharing"})," projects from the share screen."]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.a,{href:"/docs/sdk/",children:"SDK"})," embed option ",(0,r.jsx)(s.a,{href:"/docs/sdk/js-ts#appurl",children:(0,r.jsx)(s.code,{children:"appUrl"})})," allows specifying the URL for the app to be used.\nIn addition, it is always a good practice to use a specific version of the SDK."]}),"\n",(0,r.jsx)(s.p,{children:"Example:"}),"\n","\n",(0,r.jsx)(h,{}),"\n",(0,r.jsx)(s.h2,{id:"get-permanent-url",children:"Get Permanent URL"}),"\n",(0,r.jsxs)(s.p,{children:["You can get the permanent URL for the app from the ",(0,r.jsx)(s.a,{href:"pathname:///../?screen=about",children:"About screen"})," (Help menu \u2192 About). By default, the code generated in the ",(0,r.jsx)(s.a,{href:"/docs/features/embeds#app-embed-screen",children:"Embed screen"})," uses permanent URL.\nAlternatively, open the browser console of the standalone app (e.g. ",(0,r.jsx)(s.a,{href:"https://livecodes.io",children:"https://livecodes.io"}),"), and run this:"]}),"\n","\n",(0,r.jsx)(u,{}),"\n",(0,r.jsxs)(s.admonition,{type:"caution",children:[(0,r.jsxs)(s.p,{children:["Please note that this only applies to the LiveCodes app and its dependencies.\n",(0,r.jsx)(s.a,{href:"/docs/features/module-resolution",children:"NPM imports"})," in ",(0,r.jsx)(s.a,{href:"/docs/features/projects#script-editor",children:"project code"})," that do not specify versions use the latest version.\n",(0,r.jsx)(s.a,{href:"/docs/features/module-resolution#package-version",children:"Package versions"})," can be specified in the import.\n",(0,r.jsx)(s.a,{href:"/docs/features/module-resolution#custom-module-resolution",children:"Custom import maps"})," can be set to control the module import behavior."]}),(0,r.jsx)(s.p,{children:"Example:"}),(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-js",children:"import lodash from 'lodash@4.17.21';\n\nconsole.log(lodash.VERSION); // -> 4.17.21\n"})}),(0,r.jsxs)(s.p,{children:["It is recommended to also specify versions of ",(0,r.jsx)(s.a,{href:"/docs/features/external-resources",children:"external resources"}),"."]})]}),"\n",(0,r.jsx)(s.h4,{id:"full-example",children:"Full Example:"}),"\n","\n",(0,r.jsx)(m,{}),"\n",(0,r.jsx)(s.h2,{id:"related",children:"Related"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/docs/features/embeds",children:"Embedded playgrounds"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/docs/features/share",children:"Share"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/docs/sdk/",children:"SDK"})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsxs)(s.a,{href:"/docs/sdk/js-ts#exec",children:[(0,r.jsx)(s.code,{children:"exec"})," SDK method"]})}),"\n"]})]})}function v(e={}){let{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(x,{...e})}):x(e)}},65:function(e,s,n){n.d(s,{Z:function(){return l},a:function(){return o}});var t=n(7294);let r={},i=t.createContext(r);function o(e){let s=t.useContext(i);return t.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),t.createElement(i.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/7a4c801e.054cc32f.js b/docs/assets/js/7a4c801e.054cc32f.js new file mode 100644 index 0000000..39da4d1 --- /dev/null +++ b/docs/assets/js/7a4c801e.054cc32f.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3967"],{8340:function(e,t,n){n.r(t),n.d(t,{config:()=>c,config2:()=>u,default:()=>g,frontMatter:()=>a,metadata:()=>s,assets:()=>d,params:()=>h,toc:()=>p,contentTitle:()=>l});var s=JSON.parse('{"id":"languages/dot","title":"doT","description":"doT: The fastest + concise javascript template engine for Node.js and browsers.","source":"@site/docs/languages/dot.mdx","sourceDirName":"languages","slug":"/languages/dot","permalink":"/docs/languages/dot","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/dot.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Diagrams","permalink":"/docs/languages/diagrams"},"next":{"title":"EJS","permalink":"/docs/languages/ejs"}}'),o=n("5893"),r=n("65"),i=n("3365");let a={},l="doT",d={},c={markup:{language:"dot",content:"Hello, {{= it.name }}!"},customSettings:{template:{data:{name:"LiveCodes"}}}},h={compiled:"open"},u={markup:{language:"dot",content:"Hello, {{= it.name }}!"},script:{language:"javascript",content:'window.livecodes.templateData = { name: "LiveCodes" };'},customSettings:{template:{prerender:!1}},activeEditor:"script"},p=[{value:"Usage",id:"usage",level:2},{value:"Pre-rendered (Default)",id:"pre-rendered-default",level:3},{value:"Dynamic",id:"dynamic",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Pre-rendered",id:"pre-rendered",level:3},{value:"Dynamic",id:"dynamic-1",level:3},{value:"Links",id:"links",level:2}];function m(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"dot",children:"doT"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"https://olado.github.io/doT/",children:"doT"}),": The fastest + concise javascript template engine for Node.js and browsers."]}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.p,{children:"There are 2 modes for rendering:"}),"\n",(0,o.jsx)(t.h3,{id:"pre-rendered-default",children:"Pre-rendered (Default)"}),"\n",(0,o.jsxs)(t.p,{children:["The values of the expressions are evaluated and added to the template during compilation of the ",(0,o.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,o.jsxs)(t.p,{children:["The values of all expressions should be supplied in advance using ",(0,o.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," to the property ",(0,o.jsx)(t.code,{children:"template.data"})," which accepts an object of key-value pairs."]}),"\n",(0,o.jsxs)(t.p,{children:["Example: This provides the value of the expression ",(0,o.jsx)(t.code,{children:"name"})]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "data": {\n "name": "LiveCodes"\n }\n }\n}\n'})}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"#pre-rendered",children:"Full example below"})}),"\n",(0,o.jsx)(t.h3,{id:"dynamic",children:"Dynamic"}),"\n",(0,o.jsxs)(t.p,{children:["To use this mode, the property ",(0,o.jsx)(t.code,{children:"template.prerender"})," in ",(0,o.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," should be set to ",(0,o.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "prerender": false\n }\n}\n'})}),"\n",(0,o.jsxs)(t.p,{children:["In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the ",(0,o.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," runtime."]}),"\n",(0,o.jsxs)(t.p,{children:["This can be achieved in JavaScript (or any ",(0,o.jsx)(t.a,{href:"/docs/languages/",children:"language"})," that compiles to it) by assigning ",(0,o.jsx)(t.code,{children:"window.livecodes.templateData"})," to an object with the data."]}),"\n",(0,o.jsxs)(t.p,{children:["Please note that template rendering occurs on ",(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event",children:"page load"}),", so the assignment must occur before that."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",metastring:'title="Script Editor (JS)"',children:"window.livecodes.templateData = { name: 'LiveCodes' };\n"})}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"#dynamic-1",children:"Full example below"})}),"\n",(0,o.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,o.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"dot"})}),"\n",(0,o.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:".dot"})}),"\n",(0,o.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"markup"})}),"\n",(0,o.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,o.jsxs)(t.p,{children:["The official ",(0,o.jsx)(t.a,{href:"https://www.npmjs.com/package/dot",children:"doT compiler"}),"."]}),"\n",(0,o.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"dot"}),": v1.1.3"]}),"\n",(0,o.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,o.jsxs)(t.p,{children:["Using ",(0,o.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,o.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,o.jsx)(t.code,{children:"dot"})," are passed as a JSON object to the ",(0,o.jsx)(t.code,{children:"doT.template"})," method during compile. Please check the ",(0,o.jsx)(t.a,{href:"https://olado.github.io/doT/index.html",children:"documentation"})," for full reference."]}),"\n",(0,o.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Example:"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "dot": {\n "varname": "data"\n }\n}\n'})}),"\n",(0,o.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n",(0,o.jsx)(t.h3,{id:"pre-rendered",children:"Pre-rendered"}),"\n","\n","\n",(0,o.jsx)(i.Z,{config:c,params:h}),"\n",(0,o.jsx)(t.h3,{id:"dynamic-1",children:"Dynamic"}),"\n","\n",(0,o.jsx)(i.Z,{config:u}),"\n",(0,o.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://olado.github.io/doT/",children:"Official website"})}),"\n"]})]})}function g(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},3365:function(e,t,n){n.d(t,{Z:()=>f});var s=n("5893"),o=n("4200"),r=n("7294"),i=n("8294");function a(e){let t=(0,r.useRef)(null),[n,o]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[d,c]=(0,r.useState)(e.height),[h,u]=(0,r.useState)(),[p,m]=(0,r.useState)(JSON.stringify(e.config||"")),[g,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:n,style:s,height:r,sdkReady:a,config:d,...v}=e;if(o(n||""),l(s||{}),c(r),h&&g===JSON.stringify(v)){if(p===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(v)),h?.destroy(),(0,i.T)(t.current,{config:d,...v}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:n,style:a,"data-height":d})}var l=n("1858"),d=n("3262"),c=n("1705"),h=n("7645"),u=n("8168"),p=n("8228"),m=n("5050");function g(e){let[t,n]=(0,r.useState)(e.js),[o,i]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[g,f]=(0,r.useState)(e.vue),[v,j]=(0,r.useState)(e.svelte),x="3.7rem",[y,w]=(0,r.useState)(!0),[b,S]=(0,r.useState)(x),C=(0,r.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},255)};return(0,r.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};n(e(t,"js")),i(e(o,"ts")),l(e(a,"jsx")),f(e(g,"html")),j(e(v,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":y,style:{height:y?x:b,overflow:"hidden",willChange:"height",transition:`height ${y?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{w(!y),E()},children:"show code"}),(0,s.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:m.Z.collapsibleContent,children:(0,s.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,s.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"js",children:t})}),(0,s.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"ts",children:o})}),(0,s.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"jsx",children:a})}),(0,s.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"html",children:g})}),(0,s.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:n,showCode:r,height:i,...d}=e,{colorMode:c}=(0,o.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),f=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${h(d)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,v=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${h(d)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(g,{js:u,ts:p,react:m,vue:f,svelte:v})]})}},8294:function(e,t,n){n.d(t,{T:function(){return o},r:function(){return r}});var s=n(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:s,loading:o="lazy",view:i}=t,a=s||"headless"===i,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(r(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":o);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",r=l.querySelector(`iframe.${s}`),i=r||document.createElement("iframe");i.classList.add(s),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===o?"eager":"lazy"),a?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),i.onload=()=>{e(i)},i.src=c.href,r||l.appendChild(i)}),v=new Promise(e=>{addEventListener("message",function t(n){n.source===f.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),j=()=>m?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),x=(e,t)=>new Promise(async(n,s)=>{if(m)return s(g);await j();let o=P();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===o&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?s(e.error):n(e)}}),f.contentWindow?.postMessage({method:e,id:o,args:t},h)}),y={},w=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(m)throw Error(g);return w.includes(e)?(x("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!y[t])return;let n=e.data?.payload;y[t]?.forEach(e=>{e(n)})});let C=()=>{Object.values(y).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;s<t;s++)n[s-1]=arguments[s];return x("exec",[e,...n])},destroy:()=>v.settled?x("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:o={},config:r={},headless:i,import:a,lite:l,view:d,...c}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let u="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==d?r.view=d:e.searchParams.set("view",d)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(r))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{h.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return a},a:function(){return i}});var s=n(7294);let o={},r=s.createContext(o);function i(e){let t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/7a8fca77.df260e37.js b/docs/assets/js/7a8fca77.df260e37.js new file mode 100644 index 0000000..557ce75 --- /dev/null +++ b/docs/assets/js/7a8fca77.df260e37.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4484"],{3114:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>c,metadata:()=>s,assets:()=>l,toc:()=>u,contentTitle:()=>o});var s=JSON.parse('{"id":"languages/css","title":"CSS","description":"TODO...","source":"@site/docs/languages/css.mdx","sourceDirName":"languages","slug":"/languages/css","permalink":"/docs/languages/css","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/css.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"C# (Wasm)","permalink":"/docs/languages/csharp-wasm"},"next":{"title":"CSS Modules","permalink":"/docs/languages/cssmodules"}}'),r=n("5893"),a=n("65");let c={},o="CSS",l={},u=[];function i(e){let t={h1:"h1",header:"header",p:"p",...(0,a.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"css",children:"CSS"})}),"\n",(0,r.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(i,{...e})}):i(e)}},65:function(e,t,n){n.d(t,{Z:function(){return o},a:function(){return c}});var s=n(7294);let r={},a=s.createContext(r);function c(e){let t=s.useContext(a);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),s.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/7ab6ded8.97a3c889.js b/docs/assets/js/7ab6ded8.97a3c889.js new file mode 100644 index 0000000..910726d --- /dev/null +++ b/docs/assets/js/7ab6ded8.97a3c889.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3134"],{1402:function(e,n,t){t.r(n),t.d(n,{default:()=>p,frontMatter:()=>r,metadata:()=>s,assets:()=>i,toc:()=>l,contentTitle:()=>c});var s=JSON.parse('{"id":"languages/cpp-wasm","title":"C/C++ (Wasm)","description":"TODO...","source":"@site/docs/languages/cpp-wasm.mdx","sourceDirName":"languages","slug":"/languages/cpp-wasm","permalink":"/docs/languages/cpp-wasm","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/cpp-wasm.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Common Lisp","permalink":"/docs/languages/commonlisp"},"next":{"title":"C++","permalink":"/docs/languages/cpp"}}'),a=t("5893"),o=t("65");let r={},c="C/C++ (Wasm)",i={},l=[];function u(e){let n={h1:"h1",header:"header",p:"p",...(0,o.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.header,{children:(0,a.jsx)(n.h1,{id:"cc-wasm",children:"C/C++ (Wasm)"})}),"\n",(0,a.jsx)(n.p,{children:"TODO..."})]})}function p(e={}){let{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(u,{...e})}):u(e)}},65:function(e,n,t){t.d(n,{Z:function(){return c},a:function(){return r}});var s=t(7294);let a={},o=s.createContext(a);function r(e){let n=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:r(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/7ce57f72.2c67aa4e.js b/docs/assets/js/7ce57f72.2c67aa4e.js new file mode 100644 index 0000000..6d9f78b --- /dev/null +++ b/docs/assets/js/7ce57f72.2c67aa4e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3612"],{2264:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>o,metadata:()=>r,assets:()=>c,toc:()=>i,contentTitle:()=>l});var r=JSON.parse('{"id":"languages/perl","title":"Perl","description":"TODO...","source":"@site/docs/languages/perl.mdx","sourceDirName":"languages","slug":"/languages/perl","permalink":"/docs/languages/perl","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/perl.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"OCaml","permalink":"/docs/languages/ocaml"},"next":{"title":"PHP (Wasm)","permalink":"/docs/languages/php-wasm"}}'),s=n("5893"),a=n("65");let o={},l="Perl",c={},i=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,a.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"perl",children:"Perl"})}),"\n",(0,s.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},65:function(e,t,n){n.d(t,{Z:function(){return l},a:function(){return o}});var r=n(7294);let s={},a=r.createContext(s);function o(e){let t=r.useContext(a);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/7d517f8d.50052ac6.js b/docs/assets/js/7d517f8d.50052ac6.js new file mode 100644 index 0000000..7af38b5 --- /dev/null +++ b/docs/assets/js/7d517f8d.50052ac6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3806"],{4457:function(e,s,t){t.r(s),t.d(s,{default:()=>h,frontMatter:()=>i,metadata:()=>n,assets:()=>l,toc:()=>d,contentTitle:()=>o});var n=JSON.parse('{"id":"features/data-urls","title":"Data URLs","description":"Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents.","source":"@site/docs/features/data-urls.mdx","sourceDirName":"features","slug":"/features/data-urls","permalink":"/docs/features/data-urls","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/data-urls.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Code Prefill","permalink":"/docs/features/code-prefill"},"next":{"title":"Deploy","permalink":"/docs/features/deploy"}}'),a=t("5893"),r=t("65");let i={},o="Data URLs",l={},d=[{value:"Creating data URLs",id:"creating-data-urls",level:2},{value:"Assets",id:"assets",level:3},{value:""Copy code as data URL" button",id:"copy-code-as-data-url-button",level:3},{value:"Consuming data URLs",id:"consuming-data-urls",level:2},{value:"Example",id:"example",level:2},{value:"Related",id:"related",level:2}];function c(e){let s={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(s.header,{children:(0,a.jsx)(s.h1,{id:"data-urls",children:"Data URLs"})}),"\n",(0,a.jsxs)(s.blockquote,{children:["\n",(0,a.jsxs)(s.p,{children:[(0,a.jsx)(s.strong,{children:"Data URLs"}),", URLs prefixed with the ",(0,a.jsx)(s.code,{children:"data:"})," scheme, allow content creators to embed small files inline in documents."]}),"\n",(0,a.jsxs)(s.p,{children:["\u2014 ",(0,a.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs",children:"MDN"})]}),"\n"]}),"\n",(0,a.jsxs)(s.p,{children:["Sometimes, you need to use an external file (e.g. script, stylesheet) that is not hosted online. In this case, you can use data URLs to embed the file in your code. These can then be used similar to regular URLs (e.g. for ",(0,a.jsx)(s.code,{children:"<script src>"}),", ",(0,a.jsx)(s.code,{children:"<link href>"}),", import URL, etc.)."]}),"\n",(0,a.jsx)(s.p,{children:"LiveCodes UI allows creating and consuming these data URLs."}),"\n",(0,a.jsx)(s.h2,{id:"creating-data-urls",children:"Creating data URLs"}),"\n",(0,a.jsx)(s.p,{children:"Data URLs can be created from:"}),"\n",(0,a.jsx)(s.h3,{id:"assets",children:"Assets"}),"\n",(0,a.jsx)(s.p,{children:"For local files on user's device."}),"\n",(0,a.jsxs)(s.p,{children:[(0,a.jsx)(s.a,{href:"/docs/features/assets",children:"Assets screen"})," can be accessed from Settings menu \u2192 Assets. This works for any file type, including text files (e.g. stylesheets or scripts) and binary files like images. Generated data URLs are saved locally in the user's browser storage and are available across projects."]}),"\n",(0,a.jsx)(s.h3,{id:"copy-code-as-data-url-button",children:'"Copy code as data URL" button'}),"\n",(0,a.jsx)(s.p,{children:"For code in code editor."}),"\n",(0,a.jsx)(s.p,{children:"The button can be found in the editor toolbar, below the code editor. This copies the code of the active editor as data URL to the clipboard."}),"\n",(0,a.jsxs)(s.p,{children:["The content is base64-encoded. Unicode content is appropriately encoded (see ",(0,a.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem",children:'The "Unicode Problem"'}),")."]}),"\n",(0,a.jsx)(s.h2,{id:"consuming-data-urls",children:"Consuming data URLs"}),"\n",(0,a.jsxs)(s.p,{children:["Data URLs can be used anywhere you use a regular URL (e.g. for ",(0,a.jsx)(s.code,{children:"<script src>"}),", ",(0,a.jsx)(s.code,{children:"<link href>"}),", import URL, etc.)."]}),"\n",(0,a.jsxs)(s.p,{children:["In addition, LiveCodes supports ",(0,a.jsx)(s.a,{href:"/docs/features/import",children:"importing"})," data URLs, like other URLs. If the language is detected, it is loaded in the appropriate editor (e.g. ",(0,a.jsx)(s.code,{children:"data:text/typescript;charset=UTF-8;base64,...."})," is detected as TypeScript)."]}),"\n",(0,a.jsxs)(s.admonition,{type:"caution",children:[(0,a.jsxs)(s.p,{children:["Depending on the browser, there may be ",(0,a.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs#common_problems",children:"length limitations"})," on URLs. So, it is generally recommended to use data URLs for small files."]}),(0,a.jsxs)(s.p,{children:["For large files, it is better to host these online. LiveCodes allows hosting assets on ",(0,a.jsx)(s.a,{href:"https://pages.github.com/",children:"GitHub Pages"})," (see ",(0,a.jsx)(s.a,{href:"/docs/features/assets",children:"assets"}),")."]})]}),"\n",(0,a.jsx)(s.h2,{id:"example",children:"Example"}),"\n",(0,a.jsx)(s.p,{children:"If we add this this in script editor:"}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:"export const sayHello = (name) => 'Hello ' + name;\n"})}),"\n",(0,a.jsx)(s.p,{children:"then copy it as data URL, we will get:"}),"\n",(0,a.jsxs)(s.p,{children:[(0,a.jsx)(s.code,{children:"data:text/javascript;charset=UTF-8;base64,ZXhwb3J0IGNvbnN0IHNheUhlbGxvID0gKG5hbWUpID0+ICdIZWxsbyAnICsgbmFtZTs="}),"."]}),"\n",(0,a.jsx)(s.p,{children:"This can be used (e.g. in another project) like this:"}),"\n",(0,a.jsx)(s.pre,{children:(0,a.jsx)(s.code,{className:"language-js",children:"import { sayHello } from 'data:text/javascript;charset=UTF-8;base64,ZXhwb3J0IGNvbnN0IHNheUhlbGxvID0gKG5hbWUpID0+ICdIZWxsbyAnICsgbmFtZTs=';\n\nconsole.log(sayHello('Ali'));\n"})}),"\n",(0,a.jsx)(s.h2,{id:"related",children:"Related"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsx)(s.li,{children:(0,a.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs",children:"Data URLs (MDN)"})}),"\n",(0,a.jsx)(s.li,{children:(0,a.jsx)(s.a,{href:"/docs/features/assets",children:"Assets"})}),"\n",(0,a.jsx)(s.li,{children:(0,a.jsx)(s.a,{href:"/docs/features/import",children:"Import"})}),"\n",(0,a.jsx)(s.li,{children:(0,a.jsx)(s.a,{href:"/docs/features/external-resources",children:"External Resources"})}),"\n",(0,a.jsx)(s.li,{children:(0,a.jsx)(s.a,{href:"/docs/features/module-resolution",children:"Module resolution"})}),"\n",(0,a.jsx)(s.li,{children:(0,a.jsx)(s.a,{href:"/docs/features/css",children:"CSS"})}),"\n"]})]})}function h(e={}){let{wrapper:s}={...(0,r.a)(),...e.components};return s?(0,a.jsx)(s,{...e,children:(0,a.jsx)(c,{...e})}):c(e)}},65:function(e,s,t){t.d(s,{Z:function(){return o},a:function(){return i}});var n=t(7294);let a={},r=n.createContext(a);function i(e){let s=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),n.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/7dccf384.3e0a85be.js b/docs/assets/js/7dccf384.3e0a85be.js new file mode 100644 index 0000000..cdc2881 --- /dev/null +++ b/docs/assets/js/7dccf384.3e0a85be.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5638"],{8801:function(e,t,a){a.r(t),a.d(t,{default:()=>c,frontMatter:()=>r,metadata:()=>n,assets:()=>u,toc:()=>o,contentTitle:()=>d});var n=JSON.parse('{"id":"features/default-template-language","title":"Default Template/Language","description":"When the app is loaded, by default, the last used language is selected.","source":"@site/docs/features/default-template-language.mdx","sourceDirName":"features","slug":"/features/default-template-language","permalink":"/docs/features/default-template-language","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/default-template-language.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Internationalization (i18n)","permalink":"/docs/features/i18n"},"next":{"title":"Assets","permalink":"/docs/features/assets"}}'),l=a("5893"),s=a("65");let r={},d="Default Template/Language",u={},o=[{value:"Related",id:"related",level:2}];function i(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",ul:"ul",...(0,s.a)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(t.header,{children:(0,l.jsx)(t.h1,{id:"default-templatelanguage",children:"Default Template/Language"})}),"\n",(0,l.jsxs)(t.p,{children:["When the app is loaded, by default, the last used ",(0,l.jsx)(t.a,{href:"/docs/languages/",children:"language"})," is selected."]}),"\n",(0,l.jsxs)(t.p,{children:["The app can also be configured to load a default ",(0,l.jsx)(t.a,{href:"/docs/features/templates#user-templates",children:"user template"}),"."]}),"\n",(0,l.jsx)(t.p,{children:"If you do not already have any user templates, save any loaded project as template:"}),"\n",(0,l.jsx)(t.p,{children:"Project menu \u2192 Save as \u2192 Template."}),"\n",(0,l.jsx)(t.p,{children:'Then, in the user templates screen (Project menu \u2192 New ... \u2192 My Templates), find your template and click "Set as default".'}),"\n",(0,l.jsx)(t.p,{children:'If you wish to clear that selection, find the default template in user templates and click "unset".'}),"\n",(0,l.jsxs)(t.p,{children:["If you want to temporarily not load the default template/language add the ",(0,l.jsx)(t.a,{href:"/docs/configuration/query-params",children:"query param"})," ",(0,l.jsx)(t.code,{children:"no-defaults"}),"."]}),"\n",(0,l.jsxs)(t.p,{children:["Example: ",(0,l.jsx)(t.a,{href:"https://livecodes.io?no-defaults",children:"https://livecodes.io?no-defaults"})]}),"\n",(0,l.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsx)(t.li,{children:(0,l.jsx)(t.a,{href:"/docs/features/templates",children:"Templates"})}),"\n",(0,l.jsx)(t.li,{children:(0,l.jsx)(t.a,{href:"/docs/configuration/query-params",children:"Query params"})}),"\n"]})]})}function c(e={}){let{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,l.jsx)(t,{...e,children:(0,l.jsx)(i,{...e})}):i(e)}},65:function(e,t,a){a.d(t,{Z:function(){return d},a:function(){return r}});var n=a(7294);let l={},s=n.createContext(l);function r(e){let t=n.useContext(s);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:r(e.components),n.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/8137b5e1.29951264.js b/docs/assets/js/8137b5e1.29951264.js new file mode 100644 index 0000000..6add454 --- /dev/null +++ b/docs/assets/js/8137b5e1.29951264.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8827"],{1194:function(e,t,s){s.r(t),s.d(t,{config:()=>c,config2:()=>u,default:()=>g,frontMatter:()=>o,metadata:()=>n,assets:()=>d,params:()=>h,toc:()=>m,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/haml","title":"Haml","description":"Haml compiler for client side javascript view templates using clientside-haml-js.","source":"@site/docs/languages/haml.mdx","sourceDirName":"languages","slug":"/languages/haml","permalink":"/docs/languages/haml","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/haml.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Go (Golang)","permalink":"/docs/languages/go"},"next":{"title":"Handlebars","permalink":"/docs/languages/handlebars"}}'),i=s("5893"),a=s("65"),r=s("3365");let o={},l="Haml",d={},c={markup:{language:"haml",content:"%p Hello, #{name}!"},customSettings:{template:{data:{name:"LiveCodes"}}}},h={compiled:"open"},u={markup:{language:"haml",content:"%p Hello, #{name}!"},script:{language:"javascript",content:'window.livecodes.templateData = { name: "LiveCodes" };'},customSettings:{template:{prerender:!1}},activeEditor:"script"},m=[{value:"Usage",id:"usage",level:2},{value:"Pre-rendered (Default)",id:"pre-rendered-default",level:3},{value:"Dynamic",id:"dynamic",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Pre-rendered",id:"pre-rendered",level:3},{value:"Dynamic",id:"dynamic-1",level:3},{value:"Links",id:"links",level:2}];function p(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"haml",children:"Haml"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://haml.info/",children:"Haml"})," compiler for client side javascript view templates using ",(0,i.jsx)(t.a,{href:"https://github.com/uglyog/clientside-haml-js",children:"clientside-haml-js"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.p,{children:"There are 2 modes for rendering:"}),"\n",(0,i.jsx)(t.h3,{id:"pre-rendered-default",children:"Pre-rendered (Default)"}),"\n",(0,i.jsxs)(t.p,{children:["The values of the expressions are evaluated and added to the template during compilation of the ",(0,i.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["The values of all expressions should be supplied in advance using ",(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," to the property ",(0,i.jsx)(t.code,{children:"template.data"})," which accepts an object of key-value pairs."]}),"\n",(0,i.jsxs)(t.p,{children:["Example: This provides the value of the expression ",(0,i.jsx)(t.code,{children:"name"})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "data": {\n "name": "LiveCodes"\n }\n }\n}\n'})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"#pre-rendered",children:"Full example below"})}),"\n",(0,i.jsx)(t.h3,{id:"dynamic",children:"Dynamic"}),"\n",(0,i.jsxs)(t.p,{children:["To use this mode, the property ",(0,i.jsx)(t.code,{children:"template.prerender"})," in ",(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," should be set to ",(0,i.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "prerender": false\n }\n}\n'})}),"\n",(0,i.jsxs)(t.p,{children:["In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the ",(0,i.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," runtime."]}),"\n",(0,i.jsxs)(t.p,{children:["This can be achieved in JavaScript (or any ",(0,i.jsx)(t.a,{href:"/docs/languages/",children:"language"})," that compiles to it) by assigning ",(0,i.jsx)(t.code,{children:"window.livecodes.templateData"})," to an object with the data."]}),"\n",(0,i.jsxs)(t.p,{children:["Please note that template rendering occurs on ",(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event",children:"page load"}),", so the assignment must occur before that."]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",metastring:'title="Script Editor (JS)"',children:"window.livecodes.templateData = { name: 'LiveCodes' };\n"})}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"#dynamic-1",children:"Full example below"})}),"\n",(0,i.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"haml"})}),"\n",(0,i.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:".haml"})}),"\n",(0,i.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"markup"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://github.com/uglyog/clientside-haml-js",children:"clientside-haml-js"}),"."]}),"\n",(0,i.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"clientside-haml-js"}),": v5.4"]}),"\n",(0,i.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsx)(t.p,{children:"Not supported."}),"\n",(0,i.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,i.jsx)(t.code,{children:"haml"})," are passed as a JSON object to the ",(0,i.jsx)(t.a,{href:"https://github.com/uglyog/clientside-haml-js#client-side-haml-api",children:(0,i.jsx)(t.code,{children:"haml.compileHaml"})})," method during compile. Please check the ",(0,i.jsx)(t.a,{href:"https://github.com/uglyog/clientside-haml-js#client-side-haml-api",children:"documentation"})," for full reference."]}),"\n",(0,i.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,i.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n",(0,i.jsx)(t.h3,{id:"pre-rendered",children:"Pre-rendered"}),"\n","\n","\n",(0,i.jsx)(r.Z,{config:c,params:h}),"\n",(0,i.jsx)(t.h3,{id:"dynamic-1",children:"Dynamic"}),"\n","\n",(0,i.jsx)(r.Z,{config:u}),"\n",(0,i.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://haml.info/",children:"Haml"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://github.com/uglyog/clientside-haml-js",children:"clientside-haml-js"})}),"\n"]})]})}function g(e={}){let{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),i=s("4200"),a=s("7294"),r=s("8294");function o(e){let t=(0,a.useRef)(null),[s,i]=(0,a.useState)(e.className||""),[o,l]=(0,a.useState)(e.style||{}),[d,c]=(0,a.useState)(e.height),[h,u]=(0,a.useState)(),[m,p]=(0,a.useState)(JSON.stringify(e.config||"")),[g,f]=(0,a.useState)("");return(0,a.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:a,sdkReady:o,config:d,...v}=e;if(i(s||""),l(n||{}),c(a),h&&g===JSON.stringify(v)){if(m===JSON.stringify(d))return;p(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(v)),h?.destroy(),(0,r.T)(t.current,{config:d,...v}).then(e=>{u(e),"function"==typeof o&&o(e)})},[e]),(0,a.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:o,"data-height":d})}var l=s("1858"),d=s("3262"),c=s("1705"),h=s("7645"),u=s("8168"),m=s("8228"),p=s("5050");function g(e){let[t,s]=(0,a.useState)(e.js),[i,r]=(0,a.useState)(e.ts),[o,l]=(0,a.useState)(e.react),[g,f]=(0,a.useState)(e.vue),[v,j]=(0,a.useState)(e.svelte),x="3.7rem",[y,b]=(0,a.useState)(!0),[w,S]=(0,a.useState)(x),C=(0,a.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},255)};return(0,a.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),r(e(i,"ts")),l(e(o,"jsx")),f(e(g,"html")),j(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${m.Z.details}`,"data-collapsed":y,style:{height:y?x:w,overflow:"hidden",willChange:"height",transition:`height ${y?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!y),E()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:p.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"ts",children:i})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"jsx",children:o})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:a,height:r,...d}=e,{colorMode:c}=(0,i.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),f=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${h(d)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,v=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${h(d)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o,{className:`container_Egsj ${e.className}`,style:{height:r||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:u,ts:m,react:p,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return a}});var n=s(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:i="lazy",view:r}=t,o=n||"headless"===r,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(o&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(o)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(a(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",o?"eager":i);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let m=t.params;"object"==typeof m&&Object.keys(m).length>0&&JSON.stringify(m).length<1800&&Object.keys(m).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(m[e])))});let p=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!o){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||o||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",a=l.querySelector(`iframe.${n}`),r=a||document.createElement("iframe");r.classList.add(n),r.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),r.setAttribute("allowtransparency","true"),r.setAttribute("allowpaymentrequest","true"),r.setAttribute("allowfullscreen","true"),r.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),r.setAttribute("loading","eager"===i?"eager":"lazy"),o?E(r):(r.style.height="100%",r.style.minHeight="200px",r.style.width="100%",r.style.margin="0",r.style.border="0",r.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),r.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),r.onload=()=>{e(r)},r.src=c.href,a||l.appendChild(r)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),j=()=>p?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),x=(e,t)=>new Promise(async(s,n)=>{if(p)return n(g);await j();let i=P();addEventListener("message",function t(a){if(a.source===f.contentWindow&&a.origin===h&&a.data?.type==="livecodes-api-response"&&a.data?.id===i&&a.data.method===e){removeEventListener("message",t);let e=a.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:i,args:t},h)}),y={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(p)throw Error(g);return b.includes(e)?(x("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!y[t])return;let s=e.data?.payload;y[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(y).forEach(e=>{e.length=0}),f?.remove?.(),p=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return x("exec",[e,...s])},destroy:()=>v.settled?x("destroy").then(C):p?Promise.reject(g):(C(),Promise.resolve())}}function a(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:a={},headless:r,import:o,lite:l,view:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||r;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof a&&null==a.mode?a.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof a&&null==a.view&&"headless"!==d?a.view=d:e.searchParams.set("view",d)),"string"==typeof a)try{new URL(a),e.searchParams.set("config",encodeURIComponent(a))}catch{throw Error('"config" is not a valid URL or configuration object.')}else a&&"object"==typeof a&&Object.keys(a).length>0&&(a.title&&"Untitled Project"!==a.title&&e.searchParams.set("title",a.title),a.description&&a.description.length>0&&e.searchParams.set("description",a.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(a))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return o&&e.searchParams.set("x",encodeURIComponent(o)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return o},a:function(){return r}});var n=s(7294);let i={},a=n.createContext(i);function r(e){let t=n.useContext(a);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/825a9671.3ef210f5.js b/docs/assets/js/825a9671.3ef210f5.js new file mode 100644 index 0000000..3f09ef4 --- /dev/null +++ b/docs/assets/js/825a9671.3ef210f5.js @@ -0,0 +1,62 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2873"],{905:function(e,t,s){s.r(t),s.d(t,{default:()=>m,frontMatter:()=>a,metadata:()=>n,assets:()=>c,params:()=>d,toc:()=>u,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/ruby-wasm","title":"Ruby (Wasm)","description":"Ruby is a dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.","source":"@site/docs/languages/ruby-wasm.mdx","sourceDirName":"languages","slug":"/languages/ruby-wasm","permalink":"/docs/languages/ruby-wasm","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/ruby-wasm.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Riot.js","permalink":"/docs/languages/riot"},"next":{"title":"Ruby","permalink":"/docs/languages/ruby"}}'),r=s("5893"),i=s("65"),o=s("3365");let a={},l="Ruby (Wasm)",c={},d={"ruby-wasm":`class User + attr_accessor :name + + def initialize(name) + @name = name + end + + def admin? + @name == 'Admin' + end +end + +user = User.new('Bob') + +# the output will go to the console +puts user +puts user.admin? +`,console:"full"},u=[{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Alias",id:"alias",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"ruby-wasm",children:"Ruby (Wasm)"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://ruby-lang.org/",children:"Ruby"})," is a dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write."]}),"\n",(0,r.jsxs)(t.p,{children:["LiveCodes uses ",(0,r.jsx)(t.a,{href:"https://github.com/ruby/ruby.wasm",children:"ruby.wasm"})," to run Ruby in the browser."]}),"\n",(0,r.jsxs)(t.blockquote,{children:["\n",(0,r.jsxs)(t.p,{children:["ruby.wasm is a collection of ",(0,r.jsx)(t.a,{href:"https://webassembly.org/",children:"WebAssembly"})," ports of the ",(0,r.jsx)(t.a,{href:"https://github.com/ruby/ruby",children:"CRuby"}),". It enables running Ruby application on browsers, WASI compatible WebAssembly runtimes, and Edge Computing platforms."]}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://ruby.github.io/ruby.wasm/",children:"ruby.github.io/ruby.wasm/"})}),"\n"]}),"\n",(0,r.jsx)(t.admonition,{title:"Note",type:"info",children:(0,r.jsxs)(t.p,{children:["LiveCodes also supports running Ruby using ",(0,r.jsx)(t.a,{href:"https://opalrb.com/",children:"Opal"})," which is a Ruby to JavaScript source-to-source compiler. Read documentation ",(0,r.jsx)(t.a,{href:"/docs/languages/ruby",children:"here"}),"."]})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.p,{children:"LiveCodes runs Ruby in the browser, including the stdlib."}),"\n",(0,r.jsxs)(t.p,{children:["JavaScript interoperability and DOM access is achieved using ",(0,r.jsxs)(t.a,{href:"https://ruby.github.io/ruby.wasm/JS.html",children:[(0,r.jsx)(t.code,{children:'"JS"'})," module"]}),". See the ",(0,r.jsx)(t.a,{href:"#starter-template",children:"starter template"})," for an example."]}),"\n",(0,r.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"ruby-wasm"})}),"\n",(0,r.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:".wasm.rb"})}),"\n",(0,r.jsx)(t.h3,{id:"alias",children:"Alias"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"rubywasm"})}),"\n",(0,r.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"script"})}),"\n",(0,r.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://github.com/ruby/ruby.wasm",children:"ruby.wasm"})}),"\n",(0,r.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,r.jsx)(t.p,{children:"ruby.wasm v2.6.2, running Ruby v3.3"}),"\n",(0,r.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsx)(t.p,{children:"Not supported for Ruby."}),"\n",(0,r.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n","\n",(0,r.jsx)(o.Z,{params:d,height:"80vh"}),"\n",(0,r.jsx)(t.p,{children:"This example demonstrates stdlib usage, JavaScript interoperability and DOM access:"}),"\n",(0,r.jsx)(o.Z,{template:"ruby-wasm",height:"80vh"}),"\n",(0,r.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://livecodes.io/?template=ruby-wasm",children:"https://livecodes.io/?template=ruby-wasm"})}),"\n",(0,r.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://ruby-lang.org/",children:"Ruby"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://ruby-lang.org/en/documentation/",children:"Ruby documentation"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://github.com/ruby/ruby.wasm",children:"ruby.wasm"})}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/languages/ruby",children:"Ruby using Opal"})," in LiveCodes"]}),"\n"]})]})}function m(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>y});var n=s("5893"),r=s("4200"),i=s("7294"),o=s("8294");function a(e){let t=(0,i.useRef)(null),[s,r]=(0,i.useState)(e.className||""),[a,l]=(0,i.useState)(e.style||{}),[c,d]=(0,i.useState)(e.height),[u,h]=(0,i.useState)(),[m,p]=(0,i.useState)(JSON.stringify(e.config||"")),[g,y]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:i,sdkReady:a,config:c,...f}=e;if(r(s||""),l(n||{}),d(i),u&&g===JSON.stringify(f)){if(m===JSON.stringify(c))return;p(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else y(JSON.stringify(f)),u?.destroy(),(0,o.T)(t.current,{config:c,...f}).then(e=>{h(e),"function"==typeof a&&a(e)})},[e]),(0,i.useEffect)(()=>()=>{u?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),u=s("7645"),h=s("8168"),m=s("8228"),p=s("5050");function g(e){let[t,s]=(0,i.useState)(e.js),[r,o]=(0,i.useState)(e.ts),[a,l]=(0,i.useState)(e.react),[g,y]=(0,i.useState)(e.vue),[f,b]=(0,i.useState)(e.svelte),v="3.7rem",[x,w]=(0,i.useState)(!0),[j,S]=(0,i.useState)(v),C=(0,i.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${v})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${v})`)},255)};return(0,i.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),o(e(r,"ts")),l(e(a,"jsx")),y(e(g,"html")),b(e(f,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${m.Z.details}`,"data-collapsed":x,style:{height:x?v:j,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{w(!x),E()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:p.Z.collapsibleContent,children:(0,n.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,n.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"ts",children:r})}),(0,n.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"jsx",children:a})}),(0,n.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:g})}),(0,n.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:f})})]})})})]})}function y(e){let{className:t,style:s,showCode:i,height:o,...c}=e,{colorMode:d}=(0,r.I)(),u=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),y=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${u(c)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,f=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${u(c)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:h,ts:m,react:p,vue:y,svelte:f})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return i}});var n=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:r="lazy",view:o}=t,a=n||"headless"===o,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(i(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":r);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let m=t.params;"object"==typeof m&&Object.keys(m).length>0&&JSON.stringify(m).length<1800&&Object.keys(m).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(m[e])))});let p=!1,g="Cannot call API methods after calling `destroy()`.",y=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",i=l.querySelector(`iframe.${n}`),o=i||document.createElement("iframe");o.classList.add(n),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===r?"eager":"lazy"),a?E(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),o.onload=()=>{e(o)},o.src=d.href,i||l.appendChild(o)}),f=new Promise(e=>{addEventListener("message",function t(s){s.source===y.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),f.settled=!0)})}),b=()=>p?Promise.reject(g):new Promise(async e=>{f.settled&&e(),y.contentWindow?.postMessage({type:"livecodes-load"},u),await f,e()}),v=(e,t)=>new Promise(async(s,n)=>{if(p)return n(g);await b();let r=R();addEventListener("message",function t(i){if(i.source===y.contentWindow&&i.origin===u&&i.data?.type==="livecodes-api-response"&&i.data?.id===r&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?n(e.error):s(e)}}),y.contentWindow?.postMessage({method:e,id:r,args:t},u)}),x={},w=["load","ready","code","console","tests","destroy"],j=(e,t)=>{if(p)throw Error(g);return w.includes(e)?(v("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&v("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==y.contentWindow||e.origin!==u||!t||!x[t])return;let s=e.data?.payload;x[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(x).forEach(e=>{e.length=0}),y?.remove?.(),p=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await b(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let R=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>b(),run:()=>v("run"),format:e=>v("format",[e]),getShareUrl:e=>v("getShareUrl",[e]),getConfig:e=>v("getConfig",[e]),setConfig:e=>v("setConfig",[e]),getCode:()=>v("getCode"),show:(e,t)=>v("show",[e,t]),runTests:()=>v("runTests"),onChange:e=>j("code",e),watch:j,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return v("exec",[e,...s])},destroy:()=>f.settled?v("destroy").then(C):p?Promise.reject(g):(C(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:i={},headless:o,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let h="headless"===t.view||o;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==c?i.view=c:e.searchParams.set("view",c)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),u.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(i))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{u.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return o}});var n=s(7294);let r={},i=n.createContext(r);function o(e){let t=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/827f7002.024db0ec.js b/docs/assets/js/827f7002.024db0ec.js new file mode 100644 index 0000000..e4094ee --- /dev/null +++ b/docs/assets/js/827f7002.024db0ec.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7371"],{4947:function(e,t,s){s.r(t),s.d(t,{default:()=>u,frontMatter:()=>o,metadata:()=>n,assets:()=>c,toc:()=>d,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/react-native-tsx","title":"React Native (TSX)","description":"React Native is a framework for building mobile apps using React and React Native. React Native support in LiveCodes is achieved by using React Native for Web (an accessible implementation of React Native\'s Components and APIs that is interoperable with React DOM).","source":"@site/docs/languages/react-native-tsx.mdx","sourceDirName":"languages","slug":"/languages/react-native-tsx","permalink":"/docs/languages/react-native-tsx","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/react-native-tsx.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"R","permalink":"/docs/languages/r"},"next":{"title":"React Native","permalink":"/docs/languages/react-native"}}'),i=s("5893"),r=s("65"),a=s("3365");let o={},l="React Native (TSX)",c={},d=[{value:"Demo",id:"demo",level:2},{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"react-native-tsx",children:"React Native (TSX)"})}),"\n","\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://reactnative.dev/",children:"React Native"})," is a framework for building mobile apps using React and React Native. React Native support in LiveCodes is achieved by using ",(0,i.jsx)(t.a,{href:"https://necolas.github.io/react-native-web/",children:"React Native for Web"})," (an accessible implementation of React Native's Components and APIs that is interoperable with React DOM)."]}),"\n",(0,i.jsx)(t.h2,{id:"demo",children:"Demo"}),"\n",(0,i.jsx)(a.Z,{template:"react-native",height:"400px"}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsxs)(t.p,{children:["For usage and examples, see documentation for ",(0,i.jsx)(t.a,{href:"/docs/languages/jsx",children:"JSX"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"react-native-tsx"})}),"\n",(0,i.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:".react-native.tsx"})}),"\n",(0,i.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"script"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"/docs/languages/typescript",children:"TypeScript compiler"})," and ",(0,i.jsx)(t.a,{href:"https://necolas.github.io/react-native-web/",children:"React Native for Web"})]}),"\n",(0,i.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(t.p,{children:["Using ",(0,i.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,i.jsx)(t.code,{children:"react-native-tsx"})," are passed to the TypeScript compiler as ",(0,i.jsx)(t.a,{href:"https://www.typescriptlang.org/tsconfig#compilerOptions",children:"compiler options"})," while compiling TSX.\nIn addition, the option ",(0,i.jsx)(t.code,{children:"disableAutoRender"})," can be set to ",(0,i.jsx)(t.code,{children:"true"})," to disable ",(0,i.jsx)(t.a,{href:"./jsx#auto-rendering",children:"auto-rendering"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.strong,{children:"Example:"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "react-native-tsx": {\n "disableAutoRender": true\n }\n}\n'})}),"\n",(0,i.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://livecodes.io/?template=react-native",children:"https://livecodes.io/?template=react-native"})," (uses JSX)"]}),"\n",(0,i.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://reactnative.dev/",children:"React Native"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://necolas.github.io/react-native-web/",children:"React Native for Web"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://react.dev/",children:"React"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://react.dev/learn/writing-markup-with-jsx",children:"JSX"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.typescriptlang.org/",children:"TypeScript"})}),"\n"]})]})}function u(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),i=s("4200"),r=s("7294"),a=s("8294");function o(e){let t=(0,r.useRef)(null),[s,i]=(0,r.useState)(e.className||""),[o,l]=(0,r.useState)(e.style||{}),[c,d]=(0,r.useState)(e.height),[h,u]=(0,r.useState)(),[p,g]=(0,r.useState)(JSON.stringify(e.config||"")),[m,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:r,sdkReady:o,config:c,...v}=e;if(i(s||""),l(n||{}),d(r),h&&m===JSON.stringify(v)){if(p===JSON.stringify(c))return;g(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else f(JSON.stringify(v)),h?.destroy(),(0,a.T)(t.current,{config:c,...v}).then(e=>{u(e),"function"==typeof o&&o(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:o,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),h=s("7645"),u=s("8168"),p=s("8228"),g=s("5050");function m(e){let[t,s]=(0,r.useState)(e.js),[i,a]=(0,r.useState)(e.ts),[o,l]=(0,r.useState)(e.react),[m,f]=(0,r.useState)(e.vue),[v,y]=(0,r.useState)(e.svelte),x="3.7rem",[j,b]=(0,r.useState)(!0),[w,S]=(0,r.useState)(x),C=(0,r.useRef)(null),R=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},255)};return(0,r.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),a(e(i,"ts")),l(e(o,"jsx")),f(e(m,"html")),y(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${g.Z.details} ${p.Z.details}`,"data-collapsed":j,style:{height:j?x:w,overflow:"hidden",willChange:"height",transition:`height ${j?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!j),R()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:g.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"ts",children:i})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"jsx",children:o})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"html",children:m})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:r,height:a,...c}=e,{colorMode:d}=(0,i.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),g=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(c)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),f=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${h(c)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,v=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${h(c)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o,{className:`container_Egsj ${e.className}`,style:{height:a||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(m,{js:u,ts:p,react:g,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return r}});var n=s(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:i="lazy",view:a}=t,o=n||"headless"===a,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(o&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(o)R(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",o?"eager":i);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let g=!1,m="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!o){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||o||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",r=l.querySelector(`iframe.${n}`),a=r||document.createElement("iframe");a.classList.add(n),a.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),a.setAttribute("allowtransparency","true"),a.setAttribute("allowpaymentrequest","true"),a.setAttribute("allowfullscreen","true"),a.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),a.setAttribute("loading","eager"===i?"eager":"lazy"),o?R(a):(a.style.height="100%",a.style.minHeight="200px",a.style.width="100%",a.style.margin="0",a.style.border="0",a.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===a.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===a.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),a.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),a.onload=()=>{e(a)},a.src=d.href,r||l.appendChild(a)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>g?Promise.reject(m):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),x=(e,t)=>new Promise(async(s,n)=>{if(g)return n(m);await y();let i=N();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===i&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:i,args:t},h)}),j={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(g)throw Error(m);return b.includes(e)?(x("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!j[t])return;let s=e.data?.payload;j[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(j).forEach(e=>{e.length=0}),f?.remove?.(),g=!0};function R(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let N=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return x("exec",[e,...s])},destroy:()=>v.settled?x("destroy").then(C):g?Promise.reject(m):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:r={},headless:a,import:o,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||a;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(r))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return o&&e.searchParams.set("x",encodeURIComponent(o)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return o},a:function(){return a}});var n=s(7294);let i={},r=n.createContext(i);function a(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/82c45bc9.2d2c313d.js b/docs/assets/js/82c45bc9.2d2c313d.js new file mode 100644 index 0000000..e29c4ed --- /dev/null +++ b/docs/assets/js/82c45bc9.2d2c313d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5750"],{5682:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>s,metadata:()=>o,assets:()=>a,toc:()=>i,contentTitle:()=>r});var o=JSON.parse('{"id":"languages/blockly","title":"Blockly","description":"TODO...","source":"@site/docs/languages/blockly.mdx","sourceDirName":"languages","slug":"/languages/blockly","permalink":"/docs/languages/blockly","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/blockly.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"BBCode","permalink":"/docs/languages/bbcode"},"next":{"title":"Civet","permalink":"/docs/languages/civet"}}'),l=n("5893"),c=n("65");let s={},r="Blockly",a={},i=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,c.a)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(t.header,{children:(0,l.jsx)(t.h1,{id:"blockly",children:"Blockly"})}),"\n",(0,l.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,c.a)(),...e.components};return t?(0,l.jsx)(t,{...e,children:(0,l.jsx)(u,{...e})}):u(e)}},65:function(e,t,n){n.d(t,{Z:function(){return r},a:function(){return s}});var o=n(7294);let l={},c=o.createContext(l);function s(e){let t=o.useContext(c);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:s(e.components),o.createElement(c.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/8376f430.a3e6c348.js b/docs/assets/js/8376f430.a3e6c348.js new file mode 100644 index 0000000..03be38d --- /dev/null +++ b/docs/assets/js/8376f430.a3e6c348.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["750"],{1800:function(e,n,t){t.r(n),t.d(n,{default:()=>d,frontMatter:()=>c,metadata:()=>s,assets:()=>a,toc:()=>l,contentTitle:()=>o});var s=JSON.parse('{"id":"languages/lightningcss","title":"Lightning CSS","description":"TODO...","source":"@site/docs/languages/lightningcss.mdx","sourceDirName":"languages","slug":"/languages/lightningcss","permalink":"/docs/languages/lightningcss","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/lightningcss.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Less","permalink":"/docs/languages/less"},"next":{"title":"Liquid","permalink":"/docs/languages/liquid"}}'),i=t("5893"),r=t("65");let c={},o="Lightning CSS",a={},l=[];function u(e){let n={h1:"h1",header:"header",p:"p",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"lightning-css",children:"Lightning CSS"})}),"\n",(0,i.jsx)(n.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},65:function(e,n,t){t.d(n,{Z:function(){return o},a:function(){return c}});var s=t(7294);let i={},r=s.createContext(i);function c(e){let n=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:c(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/856c8d2c.09a1fdab.js b/docs/assets/js/856c8d2c.09a1fdab.js new file mode 100644 index 0000000..a03ae8d --- /dev/null +++ b/docs/assets/js/856c8d2c.09a1fdab.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3940"],{8913:function(e,n,s){s.r(n),s.d(n,{default:()=>m,frontMatter:()=>o,metadata:()=>r,assets:()=>c,toc:()=>h,contentTitle:()=>t});var r=JSON.parse('{"id":"markdown-to-livecodes","title":"Markdown to LiveCodes","description":"Markdown and MDX code blocks can be easily converted to interactive LiveCodes playgrounds.","source":"@site/docs/markdown-to-livecodes.mdx","sourceDirName":".","slug":"/markdown-to-livecodes","permalink":"/docs/markdown-to-livecodes","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/markdown-to-livecodes.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"GitHub Action \u26A1","permalink":"/docs/gh-action"},"next":{"title":"Contribution","permalink":"/docs/contribution"}}'),a=s("5893"),i=s("65"),l=s("8168"),d=s("7645");let o={},t="Markdown to LiveCodes",c={},h=[{value:"Demo",id:"demo",level:2},{value:"Packages",id:"packages",level:2},{value:"Usage",id:"usage",level:2},{value:"markdown-it-livecodes",id:"markdown-it-livecodes",level:3},{value:"marked-livecodes",id:"marked-livecodes",level:3},{value:"remark-livecodes",id:"remark-livecodes",level:3},{value:"gatsby-remark-livecodes",id:"gatsby-remark-livecodes",level:3},{value:"Options",id:"options",level:2},{value:"Meta Parameters",id:"meta-parameters",level:2},{value:"Using with Frameworks",id:"using-with-frameworks",level:2},{value:"Astro",id:"astro",level:3},{value:"Docusaurus",id:"docusaurus",level:3},{value:"Eleventy",id:"eleventy",level:3},{value:"Gatsby",id:"gatsby",level:3},{value:"Next.js",id:"nextjs",level:3},{value:"react-markdown",id:"react-markdown",level:3},{value:"Storybook",id:"storybook",level:3},{value:"VitePress",id:"vitepress",level:3}];function u(e){let n={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",iframe:"iframe",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.header,{children:(0,a.jsx)(n.h1,{id:"markdown-to-livecodes",children:"Markdown to LiveCodes"})}),"\n",(0,a.jsx)(n.p,{children:"Markdown and MDX code blocks can be easily converted to interactive LiveCodes playgrounds."}),"\n",(0,a.jsxs)(n.p,{children:["The playgrounds can run any of the supported ",(0,a.jsx)(n.a,{href:"/docs/languages/",children:"languages"})," in LiveCodes, and can be customized to any of the ",(0,a.jsx)(n.a,{href:"/docs/configuration/",children:"configuration options"}),"."]}),"\n",(0,a.jsxs)(n.p,{children:["A fenced code block in Markdown can be rendered as a LiveCodes playground by adding the ",(0,a.jsx)(n.code,{children:"livecodes"})," parameter to the code block language meta."]}),"\n",(0,a.jsxs)(n.p,{children:["This is provided as ",(0,a.jsx)(n.a,{href:"#packages",children:"plugins"})," for ",(0,a.jsx)(n.a,{href:"https://github.com/markdown-it/markdown-it",children:"markdown-it"}),", ",(0,a.jsx)(n.a,{href:"https://github.com/markedjs/marked",children:"marked"})," and ",(0,a.jsx)(n.a,{href:"https://github.com/remarkjs/remark",children:"remark"}),'.\nThese plugins allow the seamless integration with most of the popular frameworks like Astro, Docusaurus, Next.js, Storybook, VitePress, etc. See the section "',(0,a.jsx)(n.a,{href:"#using-with-frameworks",children:"Using with Frameworks"}),'" for getting started.']}),"\n",(0,a.jsx)(n.h2,{id:"demo",children:"Demo"}),"\n",(0,a.jsx)(n.p,{children:"This is an example code block:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-md",children:'```jsx\nimport { useState } from "react";\n\nfunction App() {\n const [count, setCount] = useState(0);\n return (\n <div>\n <p>You clicked {count} times.</p>\n <button onClick={() => setCount(count + 1)}>Click me</button>\n </div>\n );\n}\n\nexport default App;\n```\n'})}),"\n",(0,a.jsx)(n.p,{children:"The above code block is normally rendered like this:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:'import { useState } from "react";\n\nfunction App() {\n const [count, setCount] = useState(0);\n return (\n <div>\n <p>You clicked {count} times.</p>\n <button onClick={() => setCount(count + 1)}>Click me</button>\n </div>\n );\n}\n\nexport default App;\n'})}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsxs)(n.p,{children:["The code block can instead be rendered as an interactive playground by adding the ",(0,a.jsx)(n.code,{children:"livecodes"})," parameter to the code block language meta:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-md",metastring:"{1}",children:'```jsx livecodes\nimport { useState } from "react";\n\nfunction App() {\n const [count, setCount] = useState(0);\n return (\n <div>\n <p>You clicked {count} times.</p>\n <button onClick={() => setCount(count + 1)}>Click me</button>\n </div>\n );\n}\n\nexport default App;\n```\n'})}),"\n",(0,a.jsx)(n.p,{children:"to be displayed like this:"}),"\n",(0,a.jsx)(n.iframe,{scrolling:"no",loading:"eager",style:{height:"300px",width:"100%",border:"1px solid black",borderRadius:"6px"},className:"",src:"https://livecodes.io/#params=N4Igtg9gJgpiBcIDOBLMAHANnANCAVkgB4IhroQBOALgATC0CuSMAytQIbUy0C%2BtAM0oQwtADohKMDgGNqEgNxiAdioGNlclBGW0AgunQAKAJT0VtWjJ1I6AbWsbqOWi2oBhCE4C6tALxMLOxcMEYADCZKurRS1IyUukYWlrQAPFAoAG4AfMkpaejZAJpeVpgoMgDWMFD0jsrU-NRoMEgAdKkA9IV5KakARozU1Dq0Ou7lVX7Apv7ZrjAeXg1G9XQA1LQAjCa82RMVlbRgMF2Dwzq50ZZdGTnJkSq8KiowRBQ0tLACHIyYdAZ0AoQLwgA"}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsxs)(n.p,{children:["The playground can be customized by setting ",(0,a.jsx)(n.a,{href:"#options",children:"options"})," that are applied to all code blocks or by ",(0,a.jsx)(n.a,{href:"#meta-parameters",children:"meta parameters"})," that are applied to individual code blocks."]}),"\n",(0,a.jsxs)(n.p,{children:["Alternatively, the code block can be kept as it is, and a button or a link (",(0,a.jsx)(n.strong,{children:"Edit in LiveCodes"}),") is appended, below the code block, that opens the code in a LiveCodes playground.\nThis is achieved by adding the ",(0,a.jsx)(n.code,{children:"render=button"})," or ",(0,a.jsx)(n.code,{children:"render=link"})," parameter to the code block language meta."]}),"\n",(0,a.jsx)(n.p,{children:"This displays a button:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-md",metastring:"{1}",children:'```jsx livecodes render=button\nimport { useState } from "react";\n\nfunction App() {\n const [count, setCount] = useState(0);\n return (\n <div>\n <p>You clicked {count} times.</p>\n <button onClick={() => setCount(count + 1)}>Click me</button>\n </div>\n );\n}\n\nexport default App;\n```\n'})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:"",children:'import { useState } from "react";\n\nfunction App() {\n const [count, setCount] = useState(0);\n return (\n <div>\n <p>You clicked {count} times.</p>\n <button onClick={() => setCount(count + 1)}>Click me</button>\n </div>\n );\n}\n\nexport default App;\n'})}),"\n",(0,a.jsx)(n.a,{href:"https://livecodes.io/#params=N4IgVgzgHiBcIEsC2AHA9gJwC4AJg4FcIBTAZSwEMticBfHAMwzSRwB0QNiKBjLDgNxsAdiIYFhfBGmE4AgihQAKAJR4ROHDxkRcAbW0SsAGhwksAYTRGAujgC8hEuSrElABhVDZOLlgIYskoamjgAPAAmCABuAHwhoeEosQCa1loANgg8ANbEEXiGwlj0WMjEEAB0YQD0yQmhYQBGBFhYMjgyFlm59sCqDrFmxJbWxUpFuADUOACMKrSx3dk5OEjEtS1tMvE%2BmrVRcSFeIrQiIsRQ6Ng4EcQMFAQZuAooAiC0QA",target:"_blank",rel:"noopener noreferrer",className:"",children:(0,a.jsx)(n.img,{src:"https://livecodes.io/livecodes/assets/images/edit-in-livecodes-button.svg",alt:"Edit in LiveCodes",style:{height:"28px"}})}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsx)(n.p,{children:"While this displays a link:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-md",metastring:"{1}",children:'```jsx livecodes render=link\nimport { useState } from "react";\n\nfunction App() {\n const [count, setCount] = useState(0);\n return (\n <div>\n <p>You clicked {count} times.</p>\n <button onClick={() => setCount(count + 1)}>Click me</button>\n </div>\n );\n}\n\nexport default App;\n```\n'})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:"",children:'import { useState } from "react";\n\nfunction App() {\n const [count, setCount] = useState(0);\n return (\n <div>\n <p>You clicked {count} times.</p>\n <button onClick={() => setCount(count + 1)}>Click me</button>\n </div>\n );\n}\n\nexport default App;\n'})}),"\n",(0,a.jsx)(n.a,{href:"https://livecodes.io/#params=N4IgVgzgHiBcIEsC2AHA9gJwC4AJg4FcIBTAZSwEMticBfHAMwzSRwB0QNiKBjLDgNxsAdiIYFhfBGmE4AgihQAKAJR4ROHDxkRcAbW0SsAGhwksAYTRGAujgC8hEuSrElABhVDZOLlgIYskoamjgAPAAmCABuAHwhoeEosQCa1loANgg8ANbEEXiGwlj0WMjEEAB0YQD0yQmhYQBGBFhYMjgyFlm59sCqDrFmxJbWxUpFuADUOACMKrSx3dk5OEjEtS1tMvE%2BmrVRcSFeIrQiIsRQ6Ng4EcQMFAQZuAooAiC0QA",target:"_blank",rel:"noopener noreferrer",className:"",children:"Edit in LiveCodes"}),"\n",(0,a.jsx)(n.h2,{id:"packages",children:"Packages"}),"\n",(0,a.jsxs)(n.p,{children:["All the functionality described here can be achieved using ",(0,a.jsx)(n.em,{children:"any"})," of the following packages:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:"https://www.npmjs.com/package/markdown-it-livecodes",children:(0,a.jsx)(n.code,{children:"markdown-it-livecodes"})}),": A ",(0,a.jsx)(n.a,{href:"https://github.com/markdown-it/markdown-it",children:"markdown-it"})," plugin."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:"https://www.npmjs.com/package/marked-livecodes",children:(0,a.jsx)(n.code,{children:"marked-livecodes"})}),": A ",(0,a.jsx)(n.a,{href:"https://github.com/markedjs/marked",children:"marked"})," plugin."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:"https://www.npmjs.com/package/remark-livecodes",children:(0,a.jsx)(n.code,{children:"remark-livecodes"})}),": A ",(0,a.jsx)(n.a,{href:"https://github.com/remarkjs/remark",children:"remark"})," plugin."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:"https://www.npmjs.com/package/gatsby-remark-livecodes",children:(0,a.jsx)(n.code,{children:"gatsby-remark-livecodes"})}),": A ",(0,a.jsx)(n.a,{href:"https://github.com/gatsbyjs/gatsby",children:"gatsby"})," plugin."]}),"\n"]}),"\n",(0,a.jsxs)(n.p,{children:['See the section "',(0,a.jsx)(n.a,{href:"#using-with-frameworks",children:"Using with Frameworks"}),'" for using the plugins with popular frameworks like Astro, Docusaurus, Next.js, Storybook, VitePress, etc.']}),"\n",(0,a.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,a.jsx)(n.h3,{id:"markdown-it-livecodes",children:"markdown-it-livecodes"}),"\n",(0,a.jsxs)(n.p,{children:["To use the ",(0,a.jsx)(n.code,{children:"markdown-it-livecodes"})," plugin, first install it:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install markdown-it markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add markdown-it markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add markdown-it markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add markdown-it markdown-it-livecodes\n"})})})]}),"\n",(0,a.jsx)(n.p,{children:"Then it can be used like this:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'import markdownIt from "markdown-it";\nimport markdownItLivecodes from "markdown-it-livecodes";\n\nconst input = "```js livecodes \\nconsole.log(\'Hello World!\');\\n```";\n\nconst output = markdownIt()\n .use(markdownItLivecodes, {\n /* options */\n })\n .render(input);\n\nconsole.log(output); // <iframe ...></iframe>\n'})}),"\n",(0,a.jsx)(n.h3,{id:"marked-livecodes",children:"marked-livecodes"}),"\n",(0,a.jsxs)(n.p,{children:["To use the ",(0,a.jsx)(n.code,{children:"marked-livecodes"})," plugin, first install it:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install marked marked-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add marked marked-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add marked marked-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add marked marked-livecodes\n"})})})]}),"\n",(0,a.jsx)(n.p,{children:"Then it can be used like this:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'import marked from "marked";\nimport markedLivecodes from "marked-livecodes";\n\nconst input = "```js livecodes \\nconsole.log(\'Hello World!\');\\n```";\n\nconst output = await marked\n .use(markedLivecodes, {\n /* options */\n })\n .parse(input);\n\nconsole.log(output); // <iframe ...></iframe>\n'})}),"\n",(0,a.jsx)(n.h3,{id:"remark-livecodes",children:"remark-livecodes"}),"\n",(0,a.jsxs)(n.p,{children:["To use the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin, first install it:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install remark remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add remark remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add remark remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add remark remark-livecodes\n"})})})]}),"\n",(0,a.jsx)(n.p,{children:"Then it can be used like this:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'import { remark } from "remark";\nimport remarkLivecodes from "remark-livecodes";\n\nconst input = "```js livecodes \\nconsole.log(\'Hello World!\');\\n```";\n\nconst output = await remark()\n .use(remarkLivecodes, {\n /* options */\n })\n .process(input);\n\nconsole.log(String(output)); // <iframe ...></iframe>\n'})}),"\n",(0,a.jsx)(n.h3,{id:"gatsby-remark-livecodes",children:"gatsby-remark-livecodes"}),"\n",(0,a.jsxs)(n.p,{children:["See usage with ",(0,a.jsx)(n.a,{href:"#gatsby",children:"Gatsby"}),"."]}),"\n",(0,a.jsx)(n.h2,{id:"options",children:"Options"}),"\n",(0,a.jsx)(n.p,{children:"Options can be passed to the plugins. These options apply to all code blocks."}),"\n",(0,a.jsxs)(n.p,{children:["These options include LiveCodes SDK ",(0,a.jsx)(n.a,{href:"/docs/sdk/js-ts#embed-options",children:"embed options"})," (except ",(0,a.jsx)(n.code,{children:"headless"}),")."]}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'const output = await remark()\n .use(remarkLivecodes, {\n // highlight-start\n loading: "click",\n params: {\n console: "open"\n theme: "light",\n }\n // highlight-end\n })\n .process(input);\n'})}),"\n",(0,a.jsx)(n.p,{children:"In addition, the following options are also available:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"render"}),": The render mode for the LiveCodes playgrounds. This can be one of the following:","\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"playground"})," (default): Replaces the code block with an iframe that displays the LiveCodes playground. By default, ",(0,a.jsxs)(n.a,{href:"/docs/features/display-modes",children:[(0,a.jsx)(n.code,{children:'"simple"'})," mode"]})," is used, but this can be changed in ",(0,a.jsx)(n.a,{href:"#options",children:"options"})," or ",(0,a.jsx)(n.a,{href:"#meta-parameters",children:"meta parameters"}),"."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"link"}),": Keeps the code block as it is, and appends a link (",(0,a.jsx)(n.strong,{children:"Edit in LiveCodes"}),"), below the code block, that opens the code in a LiveCodes playground."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"button"}),": Keeps the code block as it is, and appends a button (Edit in LiveCodes), below the code block, that opens the code in a LiveCodes playground.",(0,a.jsx)("br",{}),"\n",(0,a.jsx)("img",{src:"https://dev.livecodes.io/livecodes/assets/images/edit-in-livecodes-button.svg",alt:"Edit in LiveCodes button",style:{height:"28px"}}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"meta"}),": Keeps the code block as it is, and adds the URL of the playground to the ",(0,a.jsx)(n.code,{children:"data-livecodes-url"})," attribute of the ",(0,a.jsx)(n.code,{children:"<code>"})," element. In addition, in ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," the URL is added to the AST (",(0,a.jsx)(n.code,{children:"node.data.livecodesUrl"})," and ",(0,a.jsx)(n.code,{children:"node.data.hProperties.dataLivecodesUrl"}),"). In ",(0,a.jsx)(n.code,{children:"markdown-it-livecodes"})," the URL is added to ",(0,a.jsx)(n.code,{children:"env.livecodesUrl"}),".\nThis can be used by other plugins (e.g. to display a custom run button overlying the code block)."]}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"height"}),": The height of the playground iframe."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"className"}),": The class name to be applied to the iframe, link or button.\nNote: If the class name of the button contains ",(0,a.jsx)(n.code,{children:'"dark"'})," (e.g. ",(0,a.jsx)(n.code,{children:'"dark-btn"'}),"), the dark button will be used.",(0,a.jsx)("br",{}),"\n",(0,a.jsx)("img",{src:"https://dev.livecodes.io/livecodes/assets/images/edit-in-livecodes-button-dark.svg",alt:"Edit in LiveCodes button",style:{height:"28px"}}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"auto"}),": When set to ",(0,a.jsx)(n.code,{children:"true"}),", it automatically enables the ",(0,a.jsx)(n.code,{children:"livecodes"})," parameter for all code blocks without having to explicitly add it.\nThis is useful when you have a large number of code blocks and don't want to add the ",(0,a.jsx)(n.code,{children:"livecodes"})," parameter to each code block.\nTo disable this for a specific code block, add the ",(0,a.jsx)(n.code,{children:"livecodes=false"})," ",(0,a.jsx)(n.a,{href:"#meta-parameters",children:"meta parameter"})," to the code block."]}),"\n"]}),"\n",(0,a.jsx)(n.h2,{id:"meta-parameters",children:"Meta Parameters"}),"\n",(0,a.jsx)(n.p,{children:"Individual code blocks can be configured using meta parameters. These are key/value pairs, separated by spaces, that are added after the language name."}),"\n",(0,a.jsxs)(n.p,{children:["Meta parameters of code blocks override the ",(0,a.jsx)(n.a,{href:"#options",children:"options"})," passed to the plugin."]}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-markdown",metastring:"{1}",children:'```jsx livecodes render=button className=dark-btn console=open\nimport { useState, useEffect } from "react";\n\nexport default () => {\n const [count, setCount] = useState(0);\n\n useEffect(() => {\n console.log("count:", count);\n }, [count]);\n\n return (\n <div>\n <p>You clicked {count} times.</p>\n <button onClick={() => setCount(count + 1)}>Click me</button>\n </div>\n );\n};\n```\n'})}),"\n",(0,a.jsxs)(n.p,{children:["All LiveCodes ",(0,a.jsx)(n.a,{href:"/docs/configuration/query-params",children:"configuration query parameters"})," can be used as code block meta parameters (e.g. ",(0,a.jsx)(n.code,{children:" ```js livecodes console=open theme=light"}),"). See the ",(0,a.jsx)(n.a,{href:"/docs/configuration/configuration-object",children:"LiveCodes configuration docs"})," for more information."]}),"\n",(0,a.jsx)(n.p,{children:"In addition, the following meta parameters are available:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"livecodes"}),": Enables the LiveCodes playground for the code block. This can be omitted if the ",(0,a.jsx)(n.code,{children:"auto"})," option is set to ",(0,a.jsx)(n.code,{children:"true"}),". When ",(0,a.jsx)(n.code,{children:"livecodes"})," is set to ",(0,a.jsx)(n.code,{children:"false"}),", the code block is not handled by the plugin."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"render"}),": The render mode. See the ",(0,a.jsx)(n.a,{href:"#options",children:"Options"})," section for more information."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"height"}),": The height of the playground iframe."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"className"}),": The class name for the playground iframe, link or button."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"lang"}),": This overrides the language of the code block (e.g. ",(0,a.jsx)(n.code,{children:" ```jsx livecodes lang=react"})," or ",(0,a.jsx)(n.code,{children:" ```py livecodes lang=py-wasm"}),"). See the ",(0,a.jsx)(n.a,{href:"/docs/languages/",children:"Languages"})," docs for more language information."]}),"\n"]}),"\n",(0,a.jsx)(n.h2,{id:"using-with-frameworks",children:"Using with Frameworks"}),"\n",(0,a.jsx)(n.p,{children:"This guide shows how to use the suitable plugin in different frameworks."}),"\n",(0,a.jsx)(n.h3,{id:"astro",children:"Astro"}),"\n",(0,a.jsxs)(n.p,{children:["(",(0,a.jsx)(n.a,{href:"https://markdown-to-livecodes-astro.pages.dev/",children:"demo"})," - ",(0,a.jsx)(n.a,{href:"https://github.com/hatemhosny/markdown-to-livecodes-astro",children:"code on GitHub"}),")"]}),"\n",(0,a.jsxs)(n.p,{children:["Install the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install -D remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add --dev remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add -D remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add --dev remark-livecodes\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["This is an example for adding the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin to ",(0,a.jsx)(n.code,{children:"astro.config.mjs"})," file:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="astro.config.js"',children:'import { defineConfig } from "astro/config";\nimport mdx from "@astrojs/mdx";\nimport remarkLivecodes from "remark-livecodes";\n\nexport default defineConfig({\n // ...\n integrations: [mdx()],\n markdown: {\n remarkPlugins: [\n [remarkLivecodes, { /* options */ }],\n ],\n },\n});\n'})}),"\n",(0,a.jsx)(n.h3,{id:"docusaurus",children:"Docusaurus"}),"\n",(0,a.jsxs)(n.p,{children:["(",(0,a.jsx)(n.a,{href:"https://markdown-to-livecodes-docusaurus.pages.dev/",children:"demo"})," - ",(0,a.jsx)(n.a,{href:"https://github.com/hatemhosny/markdown-to-livecodes-docusaurus",children:"code on GitHub"}),")"]}),"\n",(0,a.jsxs)(n.p,{children:["Install the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install -D remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add --dev remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add -D remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add --dev remark-livecodes\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["This is an example for adding the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin to ",(0,a.jsx)(n.code,{children:"docusaurus.config.js"})," file:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n presets: [\n [\n 'classic',\n {\n docs: {\n // ...\n remarkPlugins: [\n [require('remark-livecodes'), { /* options */ }],\n ],\n },\n },\n ],\n ],\n // ...\n};\n"})}),"\n",(0,a.jsx)(n.h3,{id:"eleventy",children:"Eleventy"}),"\n",(0,a.jsxs)(n.p,{children:["(",(0,a.jsx)(n.a,{href:"https://markdown-to-livecodes-11ty.pages.dev/",children:"demo"})," - ",(0,a.jsx)(n.a,{href:"https://github.com/hatemhosny/markdown-to-livecodes-11ty",children:"code on GitHub"}),")"]}),"\n",(0,a.jsxs)(n.p,{children:["Install the ",(0,a.jsx)(n.code,{children:"markdown-it-livecodes"})," plugin:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install -D markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add --dev markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add -D markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add --dev markdown-it-livecodes\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["This is an example for adding the ",(0,a.jsx)(n.code,{children:"markdown-it-livecodes"})," plugin to ",(0,a.jsx)(n.code,{children:"eleventy.config.js"})," file:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="eleventy.config.js"',children:'import markdownItLivecodes from "markdown-it-livecodes";\n\nexport default async function (eleventyConfig) {\n eleventyConfig.amendLibrary("md", (mdLib) =>\n mdLib.use(markdownItLivecodes, { /* options */ }),\n );\n // ...\n}\n'})}),"\n",(0,a.jsx)(n.h3,{id:"gatsby",children:"Gatsby"}),"\n",(0,a.jsxs)(n.p,{children:["(",(0,a.jsx)(n.a,{href:"https://markdown-to-livecodes-gatsby.pages.dev/markdown-to-livecodes/",children:"demo"})," - ",(0,a.jsx)(n.a,{href:"https://github.com/hatemhosny/markdown-to-livecodes-gatsby",children:"code on GitHub"}),")"]}),"\n",(0,a.jsxs)(n.p,{children:["Install the ",(0,a.jsx)(n.code,{children:"gatsby-remark-livecodes"})," plugin:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install -D gatsby-remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add --dev gatsby-remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add -D gatsby-remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add --dev gatsby-remark-livecodes\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["This is an example for adding the ",(0,a.jsx)(n.code,{children:"gatsby-remark-livecodes"})," plugin to ",(0,a.jsx)(n.code,{children:"gatsby-config.js"})," file:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="gatsby-config.js"',children:"module.exports = {\n // ...\n plugins: [\n // ...\n {\n resolve: 'gatsby-transformer-remark',\n options: {\n plugins: [\n {\n resolve: 'gatsby-remark-livecodes',\n options: { /* options */ },\n },\n ],\n },\n },\n ],\n};\n"})}),"\n",(0,a.jsx)(n.h3,{id:"nextjs",children:"Next.js"}),"\n",(0,a.jsxs)(n.p,{children:["(",(0,a.jsx)(n.a,{href:"https://markdown-to-livecodes-nextjs.pages.dev/mdx-page",children:"demo"})," - ",(0,a.jsx)(n.a,{href:"https://github.com/hatemhosny/markdown-to-livecodes-nextjs",children:"code on GitHub"}),")"]}),"\n",(0,a.jsxs)(n.p,{children:["See ",(0,a.jsx)(n.a,{href:"https://nextjs.org/docs/app/guides/mdx",children:"Next.js docs"})," for using markdown and MDX in Next.js."]}),"\n",(0,a.jsxs)(n.p,{children:["Install the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install -D remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add --dev remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add -D remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add --dev remark-livecodes\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["This is an example for adding the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin to ",(0,a.jsx)(n.code,{children:"next.config.js"})," file:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="next.config.js"',children:'import createMDX from "@next/mdx";\nimport remarkLivecodes from "remark-livecodes";\n\nconst nextConfig = {\n // ...\n pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],\n};\n\nconst withMDX = createMDX({\n options: {\n remarkPlugins: [\n [remarkLivecodes, { /* other options */ }],\n ],\n },\n});\n\nexport default withMDX(nextConfig);\n'})}),"\n",(0,a.jsxs)(n.p,{children:["When using Turbopack for local development, check the guide for ",(0,a.jsx)(n.a,{href:"https://nextjs.org/docs/app/guides/mdx#using-plugins-with-turbopack",children:"using plugins with Turbopack"}),"."]}),"\n",(0,a.jsx)(n.h3,{id:"react-markdown",children:"react-markdown"}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"react-markdown"})," is a React component to render markdown."]}),"\n",(0,a.jsxs)(n.p,{children:["This is an example for using the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin with ",(0,a.jsx)(n.code,{children:"react-markdown"}),":"]}),"\n",(0,a.jsxs)(n.p,{children:["Install the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add remark-livecodes\n"})})})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="App.jsx"',children:"import Markdown from 'react-markdown';\nimport remarkLivecodes from 'remark-livecodes';\n\nconst markdown =\n '```jsx livecodes\\nexport default () => <h1>Hello World</h1>\\n```';\n\nexport default () => (\n <Markdown remarkPlugins={[[remarkLivecodes, { /* options */ }]]}>\n {markdown}\n </Markdown>\n);\n"})}),"\n",(0,a.jsx)(n.a,{href:"https://livecodes.io/#params=N4IgLglmA2CmIC4QB0QEEAOGB0ArAzgB6ogA0IBhiIEAthgPYBOYABALICGTA1gCYMA7gDtWAMyYNarAORNYnAMZgAtLW78hwmQG5kwuoxat563gBkIAN1iKGfWPnGTpc2GZ4ro12-ce79fTthfDYPARFWAF59VlkAA0TKVm8bOwd8ZH1YQiM2BzFOAFdoNgAKAEpogD5WAB4ACwBGaoAJWGhoBlYAdWZoPjqAembqrOFE%2BIDhbNzmfNhCkvKqqNqy2PquXgjRUw0ABWgigHMIEKjgAG0r-YsfdMdSVmBWIYAqVgYMSAYQ1neQ1YAF8ALqg4FjURxF7hLTAzbDbaaERQio6EDAoA",target:"_blank",rel:"noopener noreferrer",className:"",children:(0,a.jsx)(n.img,{src:"https://livecodes.io/livecodes/assets/images/edit-in-livecodes-button.svg",alt:"Edit in LiveCodes",style:{height:"28px"}})}),"\n",(0,a.jsx)(n.h3,{id:"storybook",children:"Storybook"}),"\n",(0,a.jsxs)(n.p,{children:["(",(0,a.jsx)(n.a,{href:"https://markdown-to-livecodes-storybook.pages.dev/",children:"demo"})," - ",(0,a.jsx)(n.a,{href:"https://github.com/hatemhosny/markdown-to-livecodes-storybook",children:"code on GitHub"}),")"]}),"\n",(0,a.jsxs)(n.p,{children:["Install the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install -D remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add --dev remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add -D remark-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add --dev remark-livecodes\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["This is an example for adding the ",(0,a.jsx)(n.code,{children:"remark-livecodes"})," plugin to ",(0,a.jsx)(n.code,{children:"storybook/main.js"})," file:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="storybook/main.js"',children:'import remarkLivecodes from "remark-livecodes";\n\nexport default {\n // ...\n addons: [\n // ...\n {\n name: "@storybook/addon-docs",\n options: {\n mdxPluginOptions: {\n mdxCompileOptions: {\n remarkPlugins: [\n [remarkLivecodes, { /* options */ }],\n ],\n },\n },\n },\n },\n ],\n};\n'})}),"\n",(0,a.jsx)(n.h3,{id:"vitepress",children:"VitePress"}),"\n",(0,a.jsxs)(n.p,{children:["(",(0,a.jsx)(n.a,{href:"https://markdown-to-livecodes-vitepress.pages.dev/",children:"demo"})," - ",(0,a.jsx)(n.a,{href:"https://github.com/hatemhosny/markdown-to-livecodes-vitepress",children:"code on GitHub"}),")"]}),"\n",(0,a.jsxs)(n.p,{children:["Install the ",(0,a.jsx)(n.code,{children:"markdown-it-livecodes"})," plugin:"]}),"\n",(0,a.jsxs)(l.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(d.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install -D markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add --dev markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add -D markdown-it-livecodes\n"})})}),(0,a.jsx)(d.Z,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add --dev markdown-it-livecodes\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["This is an example for adding the ",(0,a.jsx)(n.code,{children:"markdown-it-livecodes"})," plugin to ",(0,a.jsx)(n.code,{children:"vitepress.config.js"})," file:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title=".vitepress/config.js"',children:'import { defineConfig } from "vitepress";\nimport markDownItLivecodes from "markdown-it-livecodes";\n\nexport default defineConfig({\n // ...\n markdown: {\n config: (md) => {\n md.use(markDownItLivecodes, { /* options */ });\n },\n },\n});\n'})})]})}function m(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(u,{...e})}):u(e)}},7645:function(e,n,s){s.d(n,{Z:()=>i});var r=s("5893");s("7294");var a=s("7026");function i(e){let{children:n,hidden:s,className:i}=e;return(0,r.jsx)("div",{role:"tabpanel",className:(0,a.Z)("tabItem_Ymn6",i),hidden:s,children:n})}},8168:function(e,n,s){s.d(n,{Z:()=>v});var r=s("5893"),a=s("7294"),i=s("7026"),l=s("4718"),d=s("6550"),o=s("8714"),t=s("9207"),c=s("9413"),h=s("4510");function u(e){return a.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||a.isValidElement(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)})?.filter(Boolean)??[]}function m(e){let{value:n,tabValues:s}=e;return s.some(e=>e.value===n)}var p=s("6735");function x(e){let{className:n,block:s,selectedValue:a,selectValue:d,tabValues:o}=e,t=[],{blockElementScrollPositionUntilNextRender:c}=(0,l.o5)(),h=e=>{let n=e.currentTarget,s=o[t.indexOf(n)].value;s!==a&&(c(n),d(s))},u=e=>{let n=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{let s=t.indexOf(e.currentTarget)+1;n=t[s]??t[0];break}case"ArrowLeft":{let s=t.indexOf(e.currentTarget)-1;n=t[s]??t[t.length-1]}}n?.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":s},n),children:o.map(e=>{let{value:n,label:s,attributes:l}=e;return(0,r.jsx)("li",{role:"tab",tabIndex:a===n?0:-1,"aria-selected":a===n,ref:e=>{t.push(e)},onKeyDown:u,onClick:h,...l,className:(0,i.Z)("tabs__item","tabItem_LNqP",l?.className,{"tabs__item--active":a===n}),children:s??n},n)})})}function j(e){let{lazy:n,children:s,selectedValue:l}=e,d=(Array.isArray(s)?s:[s]).filter(Boolean);if(n){let e=d.find(e=>e.props.value===l);return e?(0,a.cloneElement)(e,{className:(0,i.Z)("margin-top--md",e.props.className)}):null}return(0,r.jsx)("div",{className:"margin-top--md",children:d.map((e,n)=>(0,a.cloneElement)(e,{key:n,hidden:e.props.value!==l}))})}function g(e){let n=function(e){let{defaultValue:n,queryString:s=!1,groupId:r}=e,i=function(e){let{values:n,children:s}=e;return(0,a.useMemo)(()=>{let e=n??u(s).map(e=>{let{props:{value:n,label:s,attributes:r,default:a}}=e;return{value:n,label:s,attributes:r,default:a}});return!function(e){let n=(0,c.lx)(e,(e,n)=>e.value===n.value);if(n.length>0)throw Error(`Docusaurus error: Duplicate values "${n.map(e=>e.value).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e},[n,s])}(e),[l,p]=(0,a.useState)(()=>(function(e){let{defaultValue:n,tabValues:s}=e;if(0===s.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(n){if(!m({value:n,tabValues:s}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${s.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}let r=s.find(e=>e.default)??s[0];if(!r)throw Error("Unexpected error: 0 tabValues");return r.value})({defaultValue:n,tabValues:i})),[x,j]=function(e){let{queryString:n=!1,groupId:s}=e,r=(0,d.k6)(),i=function(e){let{queryString:n=!1,groupId:s}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!s)throw Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return s??null}({queryString:n,groupId:s});return[(0,t._X)(i),(0,a.useCallback)(e=>{if(!i)return;let n=new URLSearchParams(r.location.search);n.set(i,e),r.replace({...r.location,search:n.toString()})},[i,r])]}({queryString:s,groupId:r}),[g,v]=function(e){let{groupId:n}=e,s=n?`docusaurus.tab.${n}`:null,[r,i]=(0,h.Nk)(s);return[r,(0,a.useCallback)(e=>{s&&i.set(e)},[s,i])]}({groupId:r}),k=(()=>{let e=x??g;return m({value:e,tabValues:i})?e:null})();return(0,o.Z)(()=>{k&&p(k)},[k]),{selectedValue:l,selectValue:(0,a.useCallback)(e=>{if(!m({value:e,tabValues:i}))throw Error(`Can't select invalid tab value=${e}`);p(e),j(e),v(e)},[j,v,i]),tabValues:i}}(e);return(0,r.jsxs)("div",{className:(0,i.Z)("tabs-container","tabList__CuJ"),children:[(0,r.jsx)(x,{...n,...e}),(0,r.jsx)(j,{...n,...e})]})}function v(e){let n=(0,p.Z)();return(0,r.jsx)(g,{...e,children:u(e.children)},String(n))}},65:function(e,n,s){s.d(n,{Z:function(){return d},a:function(){return l}});var r=s(7294);let a={},i=r.createContext(a);function l(e){let n=r.useContext(i);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),r.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/8967b5ba.473621a8.js b/docs/assets/js/8967b5ba.473621a8.js new file mode 100644 index 0000000..6a1d1bd --- /dev/null +++ b/docs/assets/js/8967b5ba.473621a8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4198"],{3894:function(e,s,o){o.r(s),o.d(s,{default:()=>p,frontMatter:()=>l,metadata:()=>n,assets:()=>c,toc:()=>a,contentTitle:()=>d});var n=JSON.parse('{"id":"sponsor","title":"Sponsor","description":"Thank you for considering becoming a sponsor of LiveCodes! \uD83D\uDC9A","source":"@site/docs/sponsor.mdx","sourceDirName":".","slug":"/sponsor","permalink":"/docs/sponsor","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/sponsor.mdx","tags":[],"version":"current","frontMatter":{"title":"Sponsor"},"sidebar":"docsSidebar","previous":{"title":"License","permalink":"/docs/license"},"next":{"title":"Contact","permalink":"/docs/contact"}}'),i=o("5893"),r=o("65"),t=o("5178");let l={title:"Sponsor"},d="Sponsor LiveCodes",c={},a=[{value:"Financial Contributions",id:"financial-contributions",level:3},{value:"In-kind Contributions",id:"in-kind-contributions",level:3},{value:"Marketing and Promotion",id:"marketing-and-promotion",level:3},{value:"Sponsorship Benefits",id:"sponsorship-benefits",level:3},{value:"\u2615\uFE0F Backers (USD$5/mo):",id:"\uFE0F-backers-usd5mo",level:4},{value:"\uD83C\uDF79 Generous Backers (USD$25/mo):",id:"-generous-backers-usd25mo",level:4},{value:"\uD83E\uDD49 Bronze Sponsors (USD$100/mo):",id:"-bronze-sponsors-usd100mo",level:4},{value:"\uD83E\uDD48 Silver Sponsors (USD$250/mo):",id:"-silver-sponsors-usd250mo",level:4},{value:"\uD83E\uDD47 Gold Sponsors (USD$500/mo):",id:"-gold-sponsors-usd500mo",level:4},{value:"\uD83C\uDFC6 Platinum Sponsors (USD$1,000/mo):",id:"-platinum-sponsors-usd1000mo",level:4},{value:"\uD83D\uDC8E Diamond Sponsors (USD$2,000/mo):",id:"-diamond-sponsors-usd2000mo",level:4},{value:"\uD83C\uDF1F Special Sponsors (> USD$2,000/mo):",id:"-special-sponsors--usd2000mo",level:4},{value:"LiveCodes Sponsors",id:"livecodes-sponsors",level:2}];function h(e){let s={a:"a",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",p:"p",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.header,{children:(0,i.jsx)(s.h1,{id:"sponsor-livecodes",children:"Sponsor LiveCodes"})}),"\n",(0,i.jsx)(s.p,{children:"Thank you for considering becoming a sponsor of LiveCodes! \uD83D\uDC9A"}),"\n",(0,i.jsx)(s.p,{children:"LiveCodes is a feature-rich, open source code playground with a wide range of language support. With LiveCodes, learning, prototyping, experimenting, documenting, teaching, and sharing code is easier and more enjoyable than ever."}),"\n",(0,i.jsx)(s.p,{children:"LiveCodes is free, with no limits for use, no ads and no account required. The MIT license allows anyone to use (including commercial use), modify, and distribute."}),"\n",(0,i.jsx)(s.p,{children:"As a sponsor of LiveCodes, you will be supporting the ongoing development and maintenance of the project, as well as helping to ensure that it remains a valuable resource for the developer community. In return, you will receive recognition as a sponsor on the documentation website, GitHub repo and social media channels, as well as the opportunity to engage with our community of users and contributors."}),"\n",(0,i.jsx)(s.p,{children:"There are several ways to support LiveCodes as a sponsor:"}),"\n",(0,i.jsx)(s.h3,{id:"financial-contributions",children:"Financial Contributions"}),"\n",(0,i.jsx)(s.p,{children:"LiveCodes relies on the support of sponsors like you to fund its ongoing development and maintenance. Your financial contribution will help to ensure that the project remains sustainable in the long term."}),"\n",(0,i.jsx)(s.p,{children:"Payments can be done via:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://github.com/sponsors/live-codes/",children:"GitHub Sponsors"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://paypal.me/hatemhosni",children:"PayPal"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://ko-fi.com/hatemhosny",children:"Ko-fi"})}),"\n"]}),"\n",(0,i.jsxs)(s.p,{children:["Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in ",(0,i.jsx)(s.a,{href:"#sponsorship-benefits",children:"Sponsorship Benefits"}),"."]}),"\n",(0,i.jsxs)(s.p,{children:["If you have questions, please reach out to ",(0,i.jsx)(t.Z,{email:"sponsor@livecodes.io",text:"sponsor@livecodes.io"}),"."]}),"\n",(0,i.jsx)(s.h3,{id:"in-kind-contributions",children:"In-kind Contributions"}),"\n",(0,i.jsx)(s.p,{children:"Do you have a service or product that could be useful to the LiveCodes community? We welcome in-kind contributions that can help to support the project and its users."}),"\n",(0,i.jsxs)(s.p,{children:["In-kind contributors are recognized (logo and name) in the ",(0,i.jsx)(s.a,{href:"/docs/credits",children:"credits"})," page and in the README of ",(0,i.jsx)(s.a,{href:"https://github.com/live-codes/livecodes",children:"live-codes/livecodes"}),"."]}),"\n",(0,i.jsx)(s.h3,{id:"marketing-and-promotion",children:"Marketing and Promotion"}),"\n",(0,i.jsx)(s.p,{children:"Help us to spread the word about LiveCodes by sharing our content on your social media channels, writing blog posts about LiveCodes or by providing us with promotional opportunities."}),"\n",(0,i.jsx)(s.h3,{id:"sponsorship-benefits",children:"Sponsorship Benefits"}),"\n",(0,i.jsx)(s.h4,{id:"\uFE0F-backers-usd5mo",children:"\u2615\uFE0F Backers (USD$5/mo):"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:["Name listed in the README of ",(0,i.jsx)(s.a,{href:"https://github.com/live-codes/livecodes",children:"live-codes/livecodes"}),"."]}),"\n",(0,i.jsx)(s.li,{children:"Thank you \uD83D\uDC9A\nYour support is really appreciated."}),"\n"]}),"\n",(0,i.jsx)(s.h4,{id:"-generous-backers-usd25mo",children:"\uD83C\uDF79 Generous Backers (USD$25/mo):"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:["Name listed in the README of ",(0,i.jsx)(s.a,{href:"https://github.com/live-codes/livecodes",children:"live-codes/livecodes"}),"."]}),"\n",(0,i.jsx)(s.li,{children:"Priority in feature requests."}),"\n"]}),"\n",(0,i.jsx)(s.h4,{id:"-bronze-sponsors-usd100mo",children:"\uD83E\uDD49 Bronze Sponsors (USD$100/mo):"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:["Access to a hosted (always-on) ",(0,i.jsx)(s.a,{href:"/docs/features/broadcast",children:"broadcast API"})," and ",(0,i.jsx)(s.a,{href:"/docs/advanced/services",children:"custom services"}),"."]}),"\n",(0,i.jsxs)(s.li,{children:["Small logo placement on the front page of ",(0,i.jsx)(s.a,{href:"https://livecodes.io/docs",children:"https://livecodes.io/docs"}),"."]}),"\n",(0,i.jsxs)(s.li,{children:["Small logo placement in ",(0,i.jsx)(s.a,{href:"#livecodes-sponsors",children:"this page"}),"."]}),"\n",(0,i.jsxs)(s.li,{children:["Small logo placement in the README of ",(0,i.jsx)(s.a,{href:"https://github.com/live-codes/livecodes",children:"live-codes/livecodes"}),"."]}),"\n",(0,i.jsx)(s.li,{children:"Priority in feature requests."}),"\n"]}),"\n",(0,i.jsx)(s.h4,{id:"-silver-sponsors-usd250mo",children:"\uD83E\uDD48 Silver Sponsors (USD$250/mo):"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:["Access to a hosted (always-on) ",(0,i.jsx)(s.a,{href:"/docs/features/broadcast",children:"broadcast API"})," and ",(0,i.jsx)(s.a,{href:"/docs/advanced/services",children:"custom services"}),"."]}),"\n",(0,i.jsxs)(s.li,{children:["Medium logo placement on the front page of ",(0,i.jsx)(s.a,{href:"https://livecodes.io/docs",children:"https://livecodes.io/docs"}),"."]}),"\n",(0,i.jsx)(s.li,{children:"Logo placement in sidebar of all content pages."}),"\n",(0,i.jsxs)(s.li,{children:["Medium logo placement in ",(0,i.jsx)(s.a,{href:"#livecodes-sponsors",children:"this page"}),"."]}),"\n",(0,i.jsxs)(s.li,{children:["Medium logo placement in the README of ",(0,i.jsx)(s.a,{href:"https://github.com/live-codes/livecodes",children:"live-codes/livecodes"}),"."]}),"\n",(0,i.jsx)(s.li,{children:"Priority in feature requests."}),"\n"]}),"\n",(0,i.jsx)(s.h4,{id:"-gold-sponsors-usd500mo",children:"\uD83E\uDD47 Gold Sponsors (USD$500/mo):"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:["Access to a hosted (always-on) ",(0,i.jsx)(s.a,{href:"/docs/features/broadcast",children:"broadcast API"})," and ",(0,i.jsx)(s.a,{href:"/docs/advanced/services",children:"custom services"}),"."]}),"\n",(0,i.jsxs)(s.li,{children:["Large logo placement on the front page of ",(0,i.jsx)(s.a,{href:"https://livecodes.io/docs",children:"https://livecodes.io/docs"}),"."]}),"\n",(0,i.jsx)(s.li,{children:"Logo placement in sidebar of all content pages."}),"\n",(0,i.jsxs)(s.li,{children:["Large logo placement in ",(0,i.jsx)(s.a,{href:"#livecodes-sponsors",children:"this page"}),"."]}),"\n",(0,i.jsxs)(s.li,{children:["Large logo placement in the README of ",(0,i.jsx)(s.a,{href:"https://github.com/live-codes/livecodes",children:"live-codes/livecodes"}),"."]}),"\n",(0,i.jsx)(s.li,{children:"Priority in feature requests."}),"\n"]}),"\n",(0,i.jsx)(s.h4,{id:"-platinum-sponsors-usd1000mo",children:"\uD83C\uDFC6 Platinum Sponsors (USD$1,000/mo):"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:["Access to a hosted (always-on) ",(0,i.jsx)(s.a,{href:"/docs/features/broadcast",children:"broadcast API"})," and ",(0,i.jsx)(s.a,{href:"/docs/advanced/services",children:"custom services"}),"."]}),"\n",(0,i.jsxs)(s.li,{children:["Prominent logo placement on the front page of ",(0,i.jsx)(s.a,{href:"https://livecodes.io/docs",children:"https://livecodes.io/docs"}),"."]}),"\n",(0,i.jsx)(s.li,{children:"Prominent logo placement in sidebar of all content pages."}),"\n",(0,i.jsxs)(s.li,{children:["Prominent logo placement at the top of ",(0,i.jsx)(s.a,{href:"#",children:"this page"}),"."]}),"\n",(0,i.jsxs)(s.li,{children:["Prominent logo placement in the README of ",(0,i.jsx)(s.a,{href:"https://github.com/live-codes/livecodes",children:"live-codes/livecodes"}),"."]}),"\n",(0,i.jsx)(s.li,{children:"Priority in feature requests."}),"\n"]}),"\n",(0,i.jsx)(s.h4,{id:"-diamond-sponsors-usd2000mo",children:"\uD83D\uDC8E Diamond Sponsors (USD$2,000/mo):"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"Custom build"})," of the playground with your ",(0,i.jsx)(s.strong,{children:"logo and brand"}),". The custom build is maintained and receives new updates."]}),"\n",(0,i.jsxs)(s.li,{children:["Access to a hosted (always-on) ",(0,i.jsx)(s.a,{href:"/docs/features/broadcast",children:"broadcast API"})," and ",(0,i.jsx)(s.a,{href:"/docs/advanced/services",children:"custom services"}),"."]}),"\n",(0,i.jsxs)(s.li,{children:["Prominent logo placement on the front page of ",(0,i.jsx)(s.a,{href:"https://livecodes.io/docs",children:"https://livecodes.io/docs"}),"."]}),"\n",(0,i.jsx)(s.li,{children:"Prominent logo placement in sidebar of all content pages."}),"\n",(0,i.jsxs)(s.li,{children:["Prominent logo placement at the top of ",(0,i.jsx)(s.a,{href:"#",children:"this page"}),"."]}),"\n",(0,i.jsxs)(s.li,{children:["Prominent logo placement in the README of ",(0,i.jsx)(s.a,{href:"https://github.com/live-codes/livecodes",children:"live-codes/livecodes"}),"."]}),"\n",(0,i.jsx)(s.li,{children:"Priority in feature requests."}),"\n"]}),"\n",(0,i.jsx)(s.h4,{id:"-special-sponsors--usd2000mo",children:"\uD83C\uDF1F Special Sponsors (> USD$2,000/mo):"}),"\n",(0,i.jsxs)(s.p,{children:["\xa0\xa0\xa0\xa0",(0,i.jsx)(t.Z,{email:"sponsor@livecodes.io",text:"Let's discuss"}),"."]}),"\n",(0,i.jsx)("p",{children:"\xa0"}),"\n",(0,i.jsxs)(s.p,{children:["If you are interested in becoming a sponsor of LiveCodes, please don't hesitate to ",(0,i.jsx)(t.Z,{email:"sponsor@livecodes.io",text:"reach out to us"}),". We would love to discuss the various sponsorship options available and find a way for you to get involved. Thank you for your support!"]}),"\n",(0,i.jsx)(s.h2,{id:"livecodes-sponsors",children:"LiveCodes Sponsors"}),"\n",(0,i.jsx)("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:" 60px",width:"300px",border:"1px solid var(--ifm-table-border-color)",borderRadius:"3px",backgroundColor:"var(--ifm-color-emphasis-100)",margin:"0.5em",marginBottom:"1.5em",color:"var(--ifm-color-content-secondary)"},children:(0,i.jsx)(s.p,{children:"Your logo here"})})]})}function p(e={}){let{wrapper:s}={...(0,r.a)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},5178:function(e,s,o){o.d(s,{Z:function(){return i}});var n=o(5893);function i(e){let s=e.email.replace("@","@").replace(".",".");return(0,n.jsx)("a",{href:`mailto:${s}`,target:"_blank",rel:"noopener noreferrer",children:e.text||s})}},65:function(e,s,o){o.d(s,{Z:function(){return l},a:function(){return t}});var n=o(7294);let i={},r=n.createContext(i);function t(e){let s=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:t(e.components),n.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/89a1860b.dca86066.js b/docs/assets/js/89a1860b.dca86066.js new file mode 100644 index 0000000..fdaa418 --- /dev/null +++ b/docs/assets/js/89a1860b.dca86066.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["420"],{5914:function(e,t,s){s.r(t),s.d(t,{default:()=>u,frontMatter:()=>a,metadata:()=>n,assets:()=>c,toc:()=>d,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/teal","title":"Teal","description":"Teal is a typed dialect of Lua.","source":"@site/docs/languages/teal.mdx","sourceDirName":"languages","slug":"/languages/teal","permalink":"/docs/languages/teal","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/teal.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Tcl","permalink":"/docs/languages/tcl"},"next":{"title":"Token CSS","permalink":"/docs/languages/tokencss"}}'),i=s("5893"),r=s("65"),o=s("3365");let a={},l="Teal",c={},d=[{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"teal",children:"Teal"})}),"\n",(0,i.jsxs)(t.p,{children:["Teal is a typed dialect of ",(0,i.jsx)(t.a,{href:"https://www.lua.org/",children:"Lua"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["Teal code is compiled to Lua, which then runs in the browser using ",(0,i.jsx)(t.a,{href:"https://fengari.io/",children:"Fengari"}),". See documentation for Lua language support in LiveCodes ",(0,i.jsx)(t.a,{href:"/docs/languages/lua",children:"here"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsxs)(t.p,{children:["JavaScript interoperability and DOM access is achieved using ",(0,i.jsxs)(t.a,{href:"https://github.com/fengari-lua/fengari-interop",children:[(0,i.jsx)(t.code,{children:'"js"'})," module"]}),"."]}),"\n","\n",(0,i.jsx)(t.p,{children:"This example demonstrates usage, JavaScript interoperability and DOM access:"}),"\n",(0,i.jsx)(o.Z,{template:"teal",height:"80vh"}),"\n",(0,i.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"teal"})}),"\n",(0,i.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:".tl"})}),"\n",(0,i.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"script"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/teal-language/tl",children:"Teal"})}),"\n",(0,i.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,i.jsx)(t.p,{children:"Teal v0.15.2"}),"\n",(0,i.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(t.p,{children:["Using ",(0,i.jsx)(t.a,{href:"https://github.com/trixnz/lua-fmt",children:(0,i.jsx)(t.code,{children:"lua-fmt"})}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?template=teal",children:"https://livecodes.io/?template=teal"})}),"\n",(0,i.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://github.com/teal-language/tl",children:"Teal"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://github.com/teal-language/tl/tree/master/docs",children:"Teal documentation"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://github.com/teal-language/tl/blob/master/docs/tutorial.mdx",children:"Teal tutorial"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.lua.org/",children:"Lua"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.lua.org/docs.html",children:"Lua documentation"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://fengari.io/",children:"Fengari"})}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"/docs/languages/lua",children:"lua"})," in LiveCodes"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"/docs/languages/lua-wasm",children:"lua-wasm"})," in LiveCodes"]}),"\n"]})]})}function u(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),i=s("4200"),r=s("7294"),o=s("8294");function a(e){let t=(0,r.useRef)(null),[s,i]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[c,d]=(0,r.useState)(e.height),[h,u]=(0,r.useState)(),[g,p]=(0,r.useState)(JSON.stringify(e.config||"")),[m,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:r,sdkReady:a,config:c,...v}=e;if(i(s||""),l(n||{}),d(r),h&&m===JSON.stringify(v)){if(g===JSON.stringify(c))return;p(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else f(JSON.stringify(v)),h?.destroy(),(0,o.T)(t.current,{config:c,...v}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),h=s("7645"),u=s("8168"),g=s("8228"),p=s("5050");function m(e){let[t,s]=(0,r.useState)(e.js),[i,o]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[m,f]=(0,r.useState)(e.vue),[v,y]=(0,r.useState)(e.svelte),x="3.7rem",[j,w]=(0,r.useState)(!0),[b,S]=(0,r.useState)(x),C=(0,r.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},255)};return(0,r.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),o(e(i,"ts")),l(e(a,"jsx")),f(e(m,"html")),y(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${g.Z.details}`,"data-collapsed":j,style:{height:j?x:b,overflow:"hidden",willChange:"height",transition:`height ${j?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{w(!j),E()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:p.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"ts",children:i})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"jsx",children:a})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:m})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:r,height:o,...c}=e,{colorMode:d}=(0,i.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),g=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(c)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),f=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${h(c)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,v=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${h(c)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(m,{js:u,ts:g,react:p,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return r}});var n=s(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:i="lazy",view:o}=t,a=n||"headless"===o,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":i);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let g=t.params;"object"==typeof g&&Object.keys(g).length>0&&JSON.stringify(g).length<1800&&Object.keys(g).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(g[e])))});let p=!1,m="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",r=l.querySelector(`iframe.${n}`),o=r||document.createElement("iframe");o.classList.add(n),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===i?"eager":"lazy"),a?E(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),o.onload=()=>{e(o)},o.src=d.href,r||l.appendChild(o)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>p?Promise.reject(m):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),x=(e,t)=>new Promise(async(s,n)=>{if(p)return n(m);await y();let i=L();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===i&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:i,args:t},h)}),j={},w=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(p)throw Error(m);return w.includes(e)?(x("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!j[t])return;let s=e.data?.payload;j[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(j).forEach(e=>{e.length=0}),f?.remove?.(),p=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let L=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return x("exec",[e,...s])},destroy:()=>v.settled?x("destroy").then(C):p?Promise.reject(m):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:r={},headless:o,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||o;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(r))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return o}});var n=s(7294);let i={},r=n.createContext(i);function o(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/8bdd886c.787f7ca6.js b/docs/assets/js/8bdd886c.787f7ca6.js new file mode 100644 index 0000000..34a3fdb --- /dev/null +++ b/docs/assets/js/8bdd886c.787f7ca6.js @@ -0,0 +1,52 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3746"],{8560:function(e,t,s){s.r(t),s.d(t,{default:()=>p,frontMatter:()=>a,htmlOnlyConfig:()=>c,assets:()=>d,metadata:()=>n,toc:()=>h,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/html","title":"HTML","description":"HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It defines the structure and content of web pages.","source":"@site/docs/languages/html.mdx","sourceDirName":"languages","slug":"/languages/html","permalink":"/docs/languages/html","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/html.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Handlebars","permalink":"/docs/languages/handlebars"},"next":{"title":"Imba","permalink":"/docs/languages/imba"}}'),r=s("5893"),o=s("65"),i=s("3365");let a={},l="HTML",d={},c={markup:{language:"html",content:`<h1>Hello, LiveCodes!</h1> +<p>This is a paragraph in HTML.</p> +<ul> + <li>Simple</li> + <li>Structured</li> + <li>Semantic</li> +</ul> +`}},h=[{value:"Usage",id:"usage",level:2},{value:"Demo",id:"demo",level:3},{value:"Styles and JavaScript",id:"styles-and-javascript",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Links",id:"links",level:2}];function u(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"html",children:"HTML"})}),"\n","\n",(0,r.jsx)(t.p,{children:"HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It defines the structure and content of web pages."}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(t.p,{children:["HTML code in the ",(0,r.jsx)(t.a,{href:"/docs/features/projects#markup-editor",children:"markup editor"})," is added as is without compilation or processing to the body of the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["There is no need to add a full page structure (e.g. ",(0,r.jsx)(t.code,{children:"<html>"}),", ",(0,r.jsx)(t.code,{children:"<head>"}),", ",(0,r.jsx)(t.code,{children:"<body>"})," tags). This is already handled by LiveCodes.\n(See ",(0,r.jsx)(t.a,{href:"/docs/features/result#result-page-structure",children:"Result Page Structure"})," for more details.)"]}),"\n",(0,r.jsxs)(t.p,{children:["If you need to add content to the ",(0,r.jsx)(t.code,{children:"<head>"})," section or ",(0,r.jsx)(t.code,{children:"<html>"})," attributes of the result page, you can add it in the ",(0,r.jsx)(t.a,{href:"https://livecodes.io/?screen=info",children:"project info screen"}),"."]}),"\n",(0,r.jsx)(t.h3,{id:"demo",children:"Demo"}),"\n","\n",(0,r.jsx)(i.Z,{config:c}),"\n",(0,r.jsx)(t.h3,{id:"styles-and-javascript",children:"Styles and JavaScript"}),"\n",(0,r.jsxs)(t.p,{children:["Most of the time, you will want to add styles and scripts in the ",(0,r.jsx)(t.a,{href:"/docs/features/projects",children:"respective editors"}),".\nHowever, you can of course still add them in ",(0,r.jsx)(t.code,{children:"<link>"}),", ",(0,r.jsx)(t.code,{children:"<style>"})," and ",(0,r.jsx)(t.code,{children:"<script>"})," tags in HTML.\nThis can be useful in different scenarios, such as adding global variables that are then used in the script editor,\nor adding JavaScript together with a different script editor language (e.g. see ",(0,r.jsx)(t.a,{href:"https://livecodes.io/?template=sql&activeEditor=markup",children:"SQL starter template"}),")"]}),"\n",(0,r.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"html"})}),"\n",(0,r.jsx)(t.h3,{id:"extensions",children:"Extensions"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:".html"}),", ",(0,r.jsx)(t.code,{children:".htm"})]}),"\n",(0,r.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"markup"})}),"\n",(0,r.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsx)(t.p,{children:"None."}),"\n",(0,r.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsxs)(t.p,{children:["Using ",(0,r.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,r.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML",children:"HTML: HyperText Markup Language (MDN)"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://www.w3schools.com/html/",children:"HTML Tutorial (W3Schools)"})}),"\n"]})]})}function p(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),r=s("4200"),o=s("7294"),i=s("8294");function a(e){let t=(0,o.useRef)(null),[s,r]=(0,o.useState)(e.className||""),[a,l]=(0,o.useState)(e.style||{}),[d,c]=(0,o.useState)(e.height),[h,u]=(0,o.useState)(),[p,g]=(0,o.useState)(JSON.stringify(e.config||"")),[m,f]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:o,sdkReady:a,config:d,...v}=e;if(r(s||""),l(n||{}),c(o),h&&m===JSON.stringify(v)){if(p===JSON.stringify(d))return;g(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(v)),h?.destroy(),(0,i.T)(t.current,{config:d,...v}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,o.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":d})}var l=s("1858"),d=s("3262"),c=s("1705"),h=s("7645"),u=s("8168"),p=s("8228"),g=s("5050");function m(e){let[t,s]=(0,o.useState)(e.js),[r,i]=(0,o.useState)(e.ts),[a,l]=(0,o.useState)(e.react),[m,f]=(0,o.useState)(e.vue),[v,y]=(0,o.useState)(e.svelte),j="3.7rem",[x,b]=(0,o.useState)(!0),[w,S]=(0,o.useState)(j),L=(0,o.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${L.current.offsetHeight}px + ${j})`)},5),setTimeout(()=>{S(`calc(${L.current.offsetHeight}px + ${j})`)},255)};return(0,o.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(r,"ts")),l(e(a,"jsx")),f(e(m,"html")),y(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${g.Z.details} ${p.Z.details}`,"data-collapsed":x,style:{height:x?j:w,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!x),C()},children:"show code"}),(0,n.jsx)("div",{ref:L,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:g.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"ts",children:r})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"jsx",children:a})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"html",children:m})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:o,height:i,...d}=e,{colorMode:c}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),g=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),f=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${h(d)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,v=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${h(d)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(m,{js:u,ts:p,react:g,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return o}});var n=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:r="lazy",view:i}=t,a=n||"headless"===i,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)C(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(o(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":r);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let g=!1,m="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",o=l.querySelector(`iframe.${n}`),i=o||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===r?"eager":"lazy"),a?C(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),i.onload=()=>{e(i)},i.src=c.href,o||l.appendChild(i)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>g?Promise.reject(m):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),j=(e,t)=>new Promise(async(s,n)=>{if(g)return n(m);await y();let r=E();addEventListener("message",function t(o){if(o.source===f.contentWindow&&o.origin===h&&o.data?.type==="livecodes-api-response"&&o.data?.id===r&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},h)}),x={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(g)throw Error(m);return b.includes(e)?(j("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!x[t])return;let s=e.data?.payload;x[t]?.forEach(e=>{e(s)})});let L=()=>{Object.values(x).forEach(e=>{e.length=0}),f?.remove?.(),g=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,t)=>j("show",[e,t]),runTests:()=>j("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return j("exec",[e,...s])},destroy:()=>v.settled?j("destroy").then(L):g?Promise.reject(m):(L(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:o={},headless:i,import:a,lite:l,view:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==d?o.view=d:e.searchParams.set("view",d)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(o))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return i}});var n=s(7294);let r={},o=n.createContext(r);function i(e){let t=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/8c26d429.0ff76438.js b/docs/assets/js/8c26d429.0ff76438.js new file mode 100644 index 0000000..0e022ff --- /dev/null +++ b/docs/assets/js/8c26d429.0ff76438.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6620"],{4586:function(e,t,n){n.r(t),n.d(t,{default:()=>l,frontMatter:()=>r,metadata:()=>s,assets:()=>i,toc:()=>a,contentTitle:()=>d});var s=JSON.parse('{"id":"advanced/custom-settings","title":"Custom Settings","description":"","source":"@site/docs/advanced/custom-settings.mdx","sourceDirName":"advanced","slug":"/advanced/custom-settings","permalink":"/docs/advanced/custom-settings","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/advanced/custom-settings.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Advanced Topics","permalink":"/docs/advanced/"},"next":{"title":"Services","permalink":"/docs/advanced/services"}}'),c=n("5893"),o=n("65");let r={},d="Custom Settings",i={},a=[];function u(e){let t={h1:"h1",header:"header",...(0,o.a)(),...e.components};return(0,c.jsx)(t.header,{children:(0,c.jsx)(t.h1,{id:"custom-settings",children:"Custom Settings"})})}function l(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(u,{...e})}):u(e)}},65:function(e,t,n){n.d(t,{Z:function(){return d},a:function(){return r}});var s=n(7294);let c={},o=s.createContext(c);function r(e){let t=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:r(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/8ed430cc.d484b3aa.js b/docs/assets/js/8ed430cc.d484b3aa.js new file mode 100644 index 0000000..a0b9019 --- /dev/null +++ b/docs/assets/js/8ed430cc.d484b3aa.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5718"],{1505:function(e,s,n){n.r(s),n.d(s,{default:()=>h,frontMatter:()=>c,metadata:()=>r,assets:()=>d,toc:()=>a,contentTitle:()=>o});var r=JSON.parse('{"id":"advanced/services","title":"Services","description":"LiveCodes (being a client-side app) uses multiple services (for example for authentication, sharing, module resolution, etc).","source":"@site/docs/advanced/services.mdx","sourceDirName":"advanced","slug":"/advanced/services","permalink":"/docs/advanced/services","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/advanced/services.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Custom Settings","permalink":"/docs/advanced/custom-settings"},"next":{"title":"Languages","permalink":"/docs/languages/"}}'),t=n("5893"),i=n("65");let c={},o="Services",d={},a=[];function l(e){let s={a:"a",admonition:"admonition",code:"code",h1:"h1",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.header,{children:(0,t.jsx)(s.h1,{id:"services",children:"Services"})}),"\n",(0,t.jsx)(s.p,{children:"LiveCodes (being a client-side app) uses multiple services (for example for authentication, sharing, module resolution, etc)."}),"\n",(0,t.jsxs)(s.p,{children:["These services are ",(0,t.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/tree/develop/src/livecodes/services",children:"defined here"}),"."]}),"\n",(0,t.jsxs)(s.p,{children:["Some of the services are not supported on ",(0,t.jsx)(s.a,{href:"/docs/features/self-hosting",children:"self-hosted"})," deploys and are either replaced by other compatible services or require you to provide an alternative service."]}),"\n",(0,t.jsx)(s.p,{children:"Examples:"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsxs)(s.li,{children:["The ",(0,t.jsx)(s.a,{href:"/docs/features/share",children:"share"})," service in ",(0,t.jsx)(s.a,{href:"/docs/features/self-hosting",children:"self-hosted"})," apps uses ",(0,t.jsx)(s.a,{href:"https://dpaste.com/",children:"dpaste"})," for short URLs, which are ",(0,t.jsx)(s.a,{href:"https://dpaste.com/help",children:(0,t.jsx)(s.strong,{children:"deleted after 365 days"})}),"."]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/tree/develop/src/livecodes/services/firebase.ts",children:"Firebase configuration"})," for authentication."]}),"\n"]}),"\n",(0,t.jsx)(s.admonition,{type:"info",children:(0,t.jsxs)(s.p,{children:["LiveCodes ",(0,t.jsx)(s.a,{href:"/docs/sponsor",children:"sponsors"})," (Bronze sponsors and above) get access to managed custom services."]})}),"\n",(0,t.jsxs)(s.p,{children:["If you ",(0,t.jsx)(s.a,{href:"/docs/features/self-hosting",children:"self-host"})," your app and need to change any of these services, start by following the ",(0,t.jsx)(s.a,{href:"/docs/features/self-hosting",children:"guide described there"}),"."]}),"\n",(0,t.jsxs)(s.p,{children:["Then, edit the services you want (in ",(0,t.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/tree/develop/src/livecodes/services",children:(0,t.jsx)(s.code,{children:"src/livecodes/services"})}),"). The used services need to have the same interface."]}),"\n",(0,t.jsx)(s.p,{children:"The app then needs to be re-built using the command:"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{className:"language-shell",children:"npm run build\n"})}),"\n",(0,t.jsxs)(s.p,{children:["The built app is in ",(0,t.jsx)(s.code,{children:"build"})," directory. This can be hosted on any static file server."]})]})}function h(e={}){let{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,t.jsx)(s,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}},65:function(e,s,n){n.d(s,{Z:function(){return o},a:function(){return c}});var r=n(7294);let t={},i=r.createContext(t);function c(e){let s=r.useContext(i);return r.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:c(e.components),r.createElement(i.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/8fefd3fb.c2c89723.js b/docs/assets/js/8fefd3fb.c2c89723.js new file mode 100644 index 0000000..700bbc2 --- /dev/null +++ b/docs/assets/js/8fefd3fb.c2c89723.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4045"],{8604:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>i,metadata:()=>s,assets:()=>o,toc:()=>a,contentTitle:()=>l});var s=JSON.parse('{"id":"languages/stencil","title":"Stencil","description":"TODO...","source":"@site/docs/languages/stencil.mdx","sourceDirName":"languages","slug":"/languages/stencil","permalink":"/docs/languages/stencil","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/stencil.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"SQL (SQLite)","permalink":"/docs/languages/sql"},"next":{"title":"Stylis","permalink":"/docs/languages/stylis"}}'),r=n("5893"),c=n("65");let i={},l="Stencil",o={},a=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,c.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"stencil",children:"Stencil"})}),"\n",(0,r.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,c.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},65:function(e,t,n){n.d(t,{Z:function(){return l},a:function(){return i}});var s=n(7294);let r={},c=s.createContext(r);function i(e){let t=s.useContext(c);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(c.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/9119c475.991b6609.js b/docs/assets/js/9119c475.991b6609.js new file mode 100644 index 0000000..451c08b --- /dev/null +++ b/docs/assets/js/9119c475.991b6609.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6909"],{596:function(e,t,s){s.r(t),s.d(t,{default:()=>h,frontMatter:()=>a,metadata:()=>n,assets:()=>c,toc:()=>d,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/lua-wasm","title":"Lua (Wasm)","description":"Lua is a powerful, efficient, lightweight, embeddable scripting language. It supports procedural programming, object-oriented programming, functional programming, data-driven programming, and data description.","source":"@site/docs/languages/lua-wasm.mdx","sourceDirName":"languages","slug":"/languages/lua-wasm","permalink":"/docs/languages/lua-wasm","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/lua-wasm.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"LiveScript","permalink":"/docs/languages/livescript"},"next":{"title":"Lua","permalink":"/docs/languages/lua"}}'),i=s("5893"),o=s("65"),r=s("3365");let a={},l="Lua (Wasm)",c={},d=[{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Alias",id:"alias",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function u(e){let t={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"lua-wasm",children:"Lua (Wasm)"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://www.lua.org/",children:"Lua"})," is a powerful, efficient, lightweight, embeddable scripting language. It supports procedural programming, object-oriented programming, functional programming, data-driven programming, and data description."]}),"\n",(0,i.jsxs)(t.p,{children:["LiveCodes can run Lua in the browser using ",(0,i.jsx)(t.a,{href:"https://github.com/ceifa/wasmoon",children:"Wasmoon"}),"."]}),"\n",(0,i.jsxs)(t.blockquote,{children:["\n",(0,i.jsxs)(t.p,{children:["Wasmoon is a real Lua 5.4 VM with JS bindings made with ",(0,i.jsx)(t.a,{href:"https://webassembly.org/",children:"WebAssembly"}),"."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/ceifa/wasmoon",children:"github.com/ceifa/wasmoon"})}),"\n"]}),"\n",(0,i.jsx)(t.admonition,{title:"Note",type:"info",children:(0,i.jsxs)(t.p,{children:["LiveCodes also supports running Lua using ",(0,i.jsx)(t.a,{href:"https://fengari.io/",children:"Fengari"})," which is the Lua VM written in JavaScript. Read documentation ",(0,i.jsx)(t.a,{href:"/docs/languages/lua",children:"here"})]})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsxs)(t.p,{children:["LiveCodes runs Lua in the browser. JavaScript interoperability and DOM access is achieved using the global variable ",(0,i.jsx)(t.code,{children:"window"})," which exposes the page ",(0,i.jsx)(t.code,{children:"window"})," object."]}),"\n","\n",(0,i.jsx)(t.p,{children:"This example demonstrates usage, JavaScript interoperability and DOM access:"}),"\n",(0,i.jsx)(r.Z,{template:"lua-wasm",height:"80vh"}),"\n",(0,i.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"lua-wasm"})}),"\n",(0,i.jsx)(t.h3,{id:"alias",children:"Alias"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"luawasm"})}),"\n",(0,i.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:".wasm.lua"})}),"\n",(0,i.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"script"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/ceifa/wasmoon",children:"Wasmoon"})}),"\n",(0,i.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,i.jsx)(t.p,{children:"Wasmoon v1.16.0"}),"\n",(0,i.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(t.p,{children:["Using ",(0,i.jsx)(t.a,{href:"https://github.com/trixnz/lua-fmt",children:(0,i.jsx)(t.code,{children:"lua-fmt"})}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?template=lua-wasm",children:"https://livecodes.io/?template=lua-wasm"})}),"\n",(0,i.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.lua.org/",children:"Lua"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.lua.org/docs.html",children:"Lua documentation"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://github.com/ceifa/wasmoon",children:"wasmoon"})}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"/docs/languages/lua",children:"Lua (using Fengari)"})," in LiveCodes"]}),"\n"]})]})}function h(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),i=s("4200"),o=s("7294"),r=s("8294");function a(e){let t=(0,o.useRef)(null),[s,i]=(0,o.useState)(e.className||""),[a,l]=(0,o.useState)(e.style||{}),[c,d]=(0,o.useState)(e.height),[u,h]=(0,o.useState)(),[m,p]=(0,o.useState)(JSON.stringify(e.config||"")),[g,f]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:o,sdkReady:a,config:c,...v}=e;if(i(s||""),l(n||{}),d(o),u&&g===JSON.stringify(v)){if(m===JSON.stringify(c))return;p(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else f(JSON.stringify(v)),u?.destroy(),(0,r.T)(t.current,{config:c,...v}).then(e=>{h(e),"function"==typeof a&&a(e)})},[e]),(0,o.useEffect)(()=>()=>{u?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),u=s("7645"),h=s("8168"),m=s("8228"),p=s("5050");function g(e){let[t,s]=(0,o.useState)(e.js),[i,r]=(0,o.useState)(e.ts),[a,l]=(0,o.useState)(e.react),[g,f]=(0,o.useState)(e.vue),[v,w]=(0,o.useState)(e.svelte),y="3.7rem",[j,x]=(0,o.useState)(!0),[b,S]=(0,o.useState)(y),L=(0,o.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${L.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{S(`calc(${L.current.offsetHeight}px + ${y})`)},255)};return(0,o.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),r(e(i,"ts")),l(e(a,"jsx")),f(e(g,"html")),w(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${m.Z.details}`,"data-collapsed":j,style:{height:j?y:b,overflow:"hidden",willChange:"height",transition:`height ${j?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{x(!j),C()},children:"show code"}),(0,n.jsx)("div",{ref:L,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:p.Z.collapsibleContent,children:(0,n.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,n.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"ts",children:i})}),(0,n.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"jsx",children:a})}),(0,n.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"html",children:g})}),(0,n.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:o,height:r,...c}=e,{colorMode:d}=(0,i.I)(),u=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),f=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${u(c)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,v=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${u(c)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:r||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:h,ts:m,react:p,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return o}});var n=s(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:i="lazy",view:r}=t,a=n||"headless"===r,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)C(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(o(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":i);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let m=t.params;"object"==typeof m&&Object.keys(m).length>0&&JSON.stringify(m).length<1800&&Object.keys(m).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(m[e])))});let p=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",o=l.querySelector(`iframe.${n}`),r=o||document.createElement("iframe");r.classList.add(n),r.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),r.setAttribute("allowtransparency","true"),r.setAttribute("allowpaymentrequest","true"),r.setAttribute("allowfullscreen","true"),r.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),r.setAttribute("loading","eager"===i?"eager":"lazy"),a?C(r):(r.style.height="100%",r.style.minHeight="200px",r.style.width="100%",r.style.margin="0",r.style.border="0",r.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),r.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),r.onload=()=>{e(r)},r.src=d.href,o||l.appendChild(r)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),w=()=>p?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},u),await v,e()}),y=(e,t)=>new Promise(async(s,n)=>{if(p)return n(g);await w();let i=E();addEventListener("message",function t(o){if(o.source===f.contentWindow&&o.origin===u&&o.data?.type==="livecodes-api-response"&&o.data?.id===i&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:i,args:t},u)}),j={},x=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(p)throw Error(g);return x.includes(e)?(y("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==u||!t||!j[t])return;let s=e.data?.payload;j[t]?.forEach(e=>{e(s)})});let L=()=>{Object.values(j).forEach(e=>{e.length=0}),f?.remove?.(),p=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await w(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>w(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,t)=>y("show",[e,t]),runTests:()=>y("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return y("exec",[e,...s])},destroy:()=>v.settled?y("destroy").then(L):p?Promise.reject(g):(L(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:o={},headless:r,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let h="headless"===t.view||r;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==c?o.view=c:e.searchParams.set("view",c)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),u.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(o))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{u.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return r}});var n=s(7294);let i={},o=n.createContext(i);function r(e){let t=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/93baf445.64d8ffec.js b/docs/assets/js/93baf445.64d8ffec.js new file mode 100644 index 0000000..ce883eb --- /dev/null +++ b/docs/assets/js/93baf445.64d8ffec.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8438"],{984:function(e,t,s){s.r(t),s.d(t,{default:()=>u,frontMatter:()=>l,metadata:()=>n,assets:()=>d,toc:()=>c,contentTitle:()=>a});var n=JSON.parse('{"id":"languages/solid","title":"Solid","description":"Solid is a JavaScript framework for making interactive web applications.","source":"@site/docs/languages/solid.mdx","sourceDirName":"languages","slug":"/languages/solid","permalink":"/docs/languages/solid","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/solid.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"SCSS","permalink":"/docs/languages/scss"},"next":{"title":"Solid (TS)","permalink":"/docs/languages/solid.tsx"}}'),i=s("5893"),r=s("65"),o=s("3365");s("8500");let l={},a="Solid",d={},c=[{value:"Demo",id:"demo",level:2},{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"solid",children:"Solid"})}),"\n","\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://www.solidjs.com/",children:"Solid"})," is a JavaScript framework for making interactive web applications."]}),"\n",(0,i.jsxs)(t.p,{children:["Solid offers very similar syntax to ",(0,i.jsx)(t.a,{href:"https://react.dev/",children:"React"}),", with strong focus on ",(0,i.jsx)(t.a,{href:"https://www.solidjs.com/guides/reactivity",children:"reactivity"})," using signals. Solid supports templating in 3 forms ",(0,i.jsx)(t.a,{href:"/docs/languages/jsx",children:"JSX"}),", Tagged Template Literals and Solid's HyperScript variant, although JSX is the predominate form. Solid also supports ",(0,i.jsx)(t.a,{href:"/docs/languages/typescript",children:"TypeScript"})," (See ",(0,i.jsx)(t.a,{href:"/docs/languages/solid.tsx",children:"Solid-TS"}),")."]}),"\n",(0,i.jsx)(t.h2,{id:"demo",children:"Demo"}),"\n",(0,i.jsx)(o.Z,{template:"solid",height:"400px"}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsxs)(t.p,{children:["For usage, see documentation for ",(0,i.jsx)(t.a,{href:"/docs/languages/jsx",children:"JSX"})," and ",(0,i.jsx)(t.a,{href:"/docs/languages/typescript",children:"TypeScript"})," support in LiveCodes."]}),"\n",(0,i.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"solid"})}),"\n",(0,i.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"solid.jsx"})}),"\n",(0,i.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"script"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://github.com/ryansolid/dom-expressions/tree/main/packages/babel-plugin-jsx-dom-expressions",children:"Official Solid JSX compiler"})," (",(0,i.jsx)(t.code,{children:"babel-preset-solid"}),")"]}),"\n",(0,i.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"babel-preset-solid"}),": v1.9.5"]}),"\n",(0,i.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(t.p,{children:["Using ",(0,i.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,i.jsx)(t.code,{children:"solid"})," are passed to the Babel compiler during compile. Please check the ",(0,i.jsx)(t.a,{href:"https://github.com/ryansolid/dom-expressions/tree/main/packages/babel-plugin-jsx-dom-expressions#plugin-options",children:"documentation"})," for full reference.\nIn addition, the option ",(0,i.jsx)(t.code,{children:"disableAutoRender"})," can be set to ",(0,i.jsx)(t.code,{children:"true"})," to disable ",(0,i.jsx)(t.a,{href:"./jsx#auto-rendering",children:"auto-rendering"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.strong,{children:"Example:"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "solid": {\n "disableAutoRender": true\n }\n}\n'})}),"\n",(0,i.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://livecodes.io/?template=solid",children:"https://livecodes.io/?template=solid"})," (uses TSX)"]}),"\n",(0,i.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.solidjs.com/",children:"Solid"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://react.dev/learn/writing-markup-with-jsx",children:"JSX"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.typescriptlang.org/",children:"TypeScript"})}),"\n"]})]})}function u(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),i=s("4200"),r=s("7294"),o=s("8294");function l(e){let t=(0,r.useRef)(null),[s,i]=(0,r.useState)(e.className||""),[l,a]=(0,r.useState)(e.style||{}),[d,c]=(0,r.useState)(e.height),[h,u]=(0,r.useState)(),[p,g]=(0,r.useState)(JSON.stringify(e.config||"")),[m,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:r,sdkReady:l,config:d,...v}=e;if(i(s||""),a(n||{}),c(r),h&&m===JSON.stringify(v)){if(p===JSON.stringify(d))return;g(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(v)),h?.destroy(),(0,o.T)(t.current,{config:d,...v}).then(e=>{u(e),"function"==typeof l&&l(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:l,"data-height":d})}var a=s("1858"),d=s("3262"),c=s("1705"),h=s("7645"),u=s("8168"),p=s("8228"),g=s("5050");function m(e){let[t,s]=(0,r.useState)(e.js),[i,o]=(0,r.useState)(e.ts),[l,a]=(0,r.useState)(e.react),[m,f]=(0,r.useState)(e.vue),[v,x]=(0,r.useState)(e.svelte),y="3.7rem",[j,w]=(0,r.useState)(!0),[b,S]=(0,r.useState)(y),C=(0,r.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${y})`)},255)};return(0,r.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),o(e(i,"ts")),a(e(l,"jsx")),f(e(m,"html")),x(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${g.Z.details} ${p.Z.details}`,"data-collapsed":j,style:{height:j?y:b,overflow:"hidden",willChange:"height",transition:`height ${j?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{w(!j),E()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:g.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"ts",children:i})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"jsx",children:l})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"html",children:m})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:r,height:o,...d}=e,{colorMode:c}=(0,i.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),g=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),f=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${h(d)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,v=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${h(d)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:a.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(m,{js:u,ts:p,react:g,vue:f,svelte:v})]})}},8500:function(e,t,s){s.d(t,{Z:()=>d});var n=s("5893");s("7294");var i=s("6735");function r(e){let{children:t,fallback:s}=e;return(0,i.Z)()?(0,n.jsx)(n.Fragment,{children:t?.()}):s??null}var o=s("1705"),l=s("8294"),a=s("1858");function d(e){let{params:t,config:s,code:i,language:d="js",codeTitle:c="",showLineNumbers:h=!1,formatCode:u=!0,linkText:p="Run in LiveCodes",style:g={},className:m=""}=e,f=(0,l.r)({appUrl:a.G,params:t,config:s});return(0,n.jsxs)("div",{style:{marginBottom:"30px",...g},className:m,children:[i&&(0,n.jsx)(r,{children:()=>(0,n.jsx)(o.Z,{language:d,title:c,showLineNumbers:h,children:u?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(i,d):i})}),(0,n.jsxs)("a",{href:f,target:"_blank",rel:"noreferrer",children:[p,(0,n.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,n.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return r}});var n=s(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:i="lazy",view:o}=t,l=n||"headless"===o,a=null,d=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)E(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(r(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",l?"eager":i);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let g=!1,m="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let n="livecodes",r=a.querySelector(`iframe.${n}`),o=r||document.createElement("iframe");o.classList.add(n),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===i?"eager":"lazy"),l?E(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),o.onload=()=>{e(o)},o.src=c.href,r||a.appendChild(o)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),x=()=>g?Promise.reject(m):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),y=(e,t)=>new Promise(async(s,n)=>{if(g)return n(m);await x();let i=k();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===i&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:i,args:t},h)}),j={},w=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(g)throw Error(m);return w.includes(e)?(y("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!j[t])return;let s=e.data?.payload;j[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(j).forEach(e=>{e.length=0}),f?.remove?.(),g=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await x(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let k=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>x(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,t)=>y("show",[e,t]),runTests:()=>y("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return y("exec",[e,...s])},destroy:()=>v.settled?y("destroy").then(C):g?Promise.reject(m):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:r={},headless:o,import:l,lite:a,view:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||o;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==d?r.view=d:e.searchParams.set("view",d)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(r))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return l},a:function(){return o}});var n=s(7294);let i={},r=n.createContext(i);function o(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/93fefe3a.c85815c6.js b/docs/assets/js/93fefe3a.c85815c6.js new file mode 100644 index 0000000..5f03008 --- /dev/null +++ b/docs/assets/js/93fefe3a.c85815c6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7140"],{7115:function(e,n,t){t.r(n),t.d(n,{default:()=>u,frontMatter:()=>l,metadata:()=>s,assets:()=>r,toc:()=>c,contentTitle:()=>i});var s=JSON.parse('{"id":"api/internal/type-aliases/ToolsPaneStatus","title":"Type Alias: ToolsPaneStatus","description":"ToolsPaneStatus: \\"closed\\" \\\\| \\"open\\" \\\\| \\"full\\" \\\\| \\"none\\" \\\\| \\"\\"","source":"@site/docs/api/internal/type-aliases/ToolsPaneStatus.md","sourceDirName":"api/internal/type-aliases","slug":"/api/internal/type-aliases/ToolsPaneStatus","permalink":"/docs/api/internal/type-aliases/ToolsPaneStatus","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/type-aliases/ToolsPaneStatus.md","tags":[],"version":"current","frontMatter":{}}'),o=t("5893"),a=t("65");let l={},i="Type Alias: ToolsPaneStatus",r={},c=[{value:"Defined in",id:"defined-in",level:2}];function d(e){let n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",strong:"strong",...(0,a.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"type-alias-toolspanestatus",children:"Type Alias: ToolsPaneStatus"})}),"\n",(0,o.jsxs)(n.blockquote,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:"ToolsPaneStatus"}),": ",(0,o.jsx)(n.code,{children:'"closed"'})," | ",(0,o.jsx)(n.code,{children:'"open"'})," | ",(0,o.jsx)(n.code,{children:'"full"'})," | ",(0,o.jsx)(n.code,{children:'"none"'})," | ",(0,o.jsx)(n.code,{children:'""'})]}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1456",children:"models.ts:1456"})})]})}function u(e={}){let{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},65:function(e,n,t){t.d(n,{Z:function(){return i},a:function(){return l}});var s=t(7294);let o={},a=s.createContext(o);function l(e){let n=s.useContext(a);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),s.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/962d4273.223e59d2.js b/docs/assets/js/962d4273.223e59d2.js new file mode 100644 index 0000000..4b1fd8f --- /dev/null +++ b/docs/assets/js/962d4273.223e59d2.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1593"],{3517:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>a,metadata:()=>r,assets:()=>o,toc:()=>l,contentTitle:()=>c});var r=JSON.parse('{"id":"languages/livescript","title":"LiveScript","description":"TODO...","source":"@site/docs/languages/livescript.mdx","sourceDirName":"languages","slug":"/languages/livescript","permalink":"/docs/languages/livescript","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/livescript.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Liquid","permalink":"/docs/languages/liquid"},"next":{"title":"Lua (Wasm)","permalink":"/docs/languages/lua-wasm"}}'),s=n("5893"),i=n("65");let a={},c="LiveScript",o={},l=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"livescript",children:"LiveScript"})}),"\n",(0,s.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},65:function(e,t,n){n.d(t,{Z:function(){return c},a:function(){return a}});var r=n(7294);let s={},i=r.createContext(s);function a(e){let t=r.useContext(i);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/9a3123ff.8569f68c.js b/docs/assets/js/9a3123ff.8569f68c.js new file mode 100644 index 0000000..7af1a8e --- /dev/null +++ b/docs/assets/js/9a3123ff.8569f68c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2133"],{26:function(e,c,s){s.r(c),s.d(c,{default:()=>j,frontMatter:()=>i,metadata:()=>d,assets:()=>o,toc:()=>a,contentTitle:()=>n});var d=JSON.parse('{"id":"api/type-aliases/Language","title":"Type Alias: Language","description":"Language: \\"html\\" \\\\| \\"htm\\" \\\\| \\"markdown\\" \\\\| \\"md\\" \\\\| \\"mdown\\" \\\\| \\"mkdn\\" \\\\| \\"mdx\\" \\\\| \\"astro\\" \\\\| \\"pug\\" \\\\| \\"jade\\" \\\\| \\"haml\\" \\\\| \\"asciidoc\\" \\\\| \\"adoc\\" \\\\| \\"asc\\" \\\\| \\"mustache\\" \\\\| \\"handlebars\\" \\\\| \\"hbs\\" \\\\| \\"ejs\\" \\\\| \\"eta\\" \\\\| \\"nunjucks\\" \\\\| \\"njk\\" \\\\| \\"liquid\\" \\\\| \\"liquidjs\\" \\\\| \\"dot\\" \\\\| \\"twig\\" \\\\| \\"vento\\" \\\\| \\"vto\\" \\\\| \\"art-template\\" \\\\| \\"art\\" \\\\| \\"jinja\\" \\\\| \\"bbcode\\" \\\\| \\"bb\\" \\\\| \\"mjml\\" \\\\| \\"diagrams\\" \\\\| \\"diagram\\" \\\\| \\"graph\\" \\\\| \\"plt\\" \\\\| \\"richtext\\" \\\\| \\"rte\\" \\\\| \\"rich\\" \\\\| \\"rte.html\\" \\\\| \\"css\\" \\\\| \\"scss\\" \\\\| \\"sass\\" \\\\| \\"less\\" \\\\| \\"stylus\\" \\\\| \\"styl\\" \\\\| \\"stylis\\" \\\\| \\"postcss\\" \\\\| \\"javascript\\" \\\\| \\"js\\" \\\\| \\"json\\" \\\\| \\"babel\\" \\\\| \\"es\\" \\\\| \\"sucrase\\" \\\\| \\"typescript\\" \\\\| \\"flow\\" \\\\| \\"ts\\" \\\\| \\"jsx\\" \\\\| \\"tsx\\" \\\\| \\"react\\" \\\\| \\"react-jsx\\" \\\\| \\"react.jsx\\" \\\\| \\"react-tsx\\" \\\\| \\"react.tsx\\" \\\\| \\"react-native\\" \\\\| \\"react-native.jsx\\" \\\\| \\"react-native-tsx\\" \\\\| \\"react-native.tsx\\" \\\\| \\"vue\\" \\\\| \\"vue3\\" \\\\| \\"vue2\\" \\\\| \\"vue-app\\" \\\\| \\"app.vue\\" \\\\| \\"svelte\\" \\\\| \\"svelte-app\\" \\\\| \\"app.svelte\\" \\\\| \\"stencil\\" \\\\| \\"stencil.tsx\\" \\\\| \\"solid\\" \\\\| \\"solid.jsx\\" \\\\| \\"solid.tsx\\" \\\\| \\"riot\\" \\\\| \\"riotjs\\" \\\\| \\"malina\\" \\\\| \\"malinajs\\" \\\\| \\"xht\\" \\\\| \\"coffeescript\\" \\\\| \\"coffee\\" \\\\| \\"livescript\\" \\\\| \\"ls\\" \\\\| \\"civet\\" \\\\| \\"clio\\" \\\\| \\"imba\\" \\\\| \\"assemblyscript\\" \\\\| \\"as\\" \\\\| \\"python\\" \\\\| \\"py\\" \\\\| \\"pyodide\\" \\\\| \\"python-wasm\\" \\\\| \\"py-wasm\\" \\\\| \\"pythonwasm\\" \\\\| \\"pywasm\\" \\\\| \\"py3\\" \\\\| \\"wasm.py\\" \\\\| \\"r\\" \\\\| \\"rlang\\" \\\\| \\"rstats\\" \\\\| \\"r-wasm\\" \\\\| \\"ruby\\" \\\\| \\"rb\\" \\\\| \\"ruby-wasm\\" \\\\| \\"wasm.rb\\" \\\\| \\"rubywasm\\" \\\\| \\"go\\" \\\\| \\"golang\\" \\\\| \\"php\\" \\\\| \\"php-wasm\\" \\\\| \\"phpwasm\\" \\\\| \\"wasm.php\\" \\\\| \\"cpp\\" \\\\| \\"c\\" \\\\| \\"C\\" \\\\| \\"cp\\" \\\\| \\"cxx\\" \\\\| \\"c++\\" \\\\| \\"cppm\\" \\\\| \\"ixx\\" \\\\| \\"ii\\" \\\\| \\"hpp\\" \\\\| \\"h\\" \\\\| \\"cpp-wasm\\" \\\\| \\"cppwasm\\" \\\\| \\"cwasm\\" \\\\| \\"wasm.cpp\\" \\\\| \\"clang\\" \\\\| \\"clang.cpp\\" \\\\| \\"java\\" \\\\| \\"csharp\\" \\\\| \\"csharp-wasm\\" \\\\| \\"cs\\" \\\\| \\"cs-wasm\\" \\\\| \\"wasm.cs\\" \\\\| \\"perl\\" \\\\| \\"pl\\" \\\\| \\"pm\\" \\\\| \\"lua\\" \\\\| \\"lua-wasm\\" \\\\| \\"luawasm\\" \\\\| \\"wasm.lua\\" \\\\| \\"teal\\" \\\\| \\"tl\\" \\\\| \\"fennel\\" \\\\| \\"fnl\\" \\\\| \\"julia\\" \\\\| \\"jl\\" \\\\| \\"scheme\\" \\\\| \\"scm\\" \\\\| \\"commonlisp\\" \\\\| \\"common-lisp\\" \\\\| \\"lisp\\" \\\\| \\"clojurescript\\" \\\\| \\"clojure\\" \\\\| \\"cljs\\" \\\\| \\"clj\\" \\\\| \\"cljc\\" \\\\| \\"edn\\" \\\\| \\"gleam\\" \\\\| \\"rescript\\" \\\\| \\"res\\" \\\\| \\"resi\\" \\\\| \\"reason\\" \\\\| \\"re\\" \\\\| \\"rei\\" \\\\| \\"ocaml\\" \\\\| \\"ml\\" \\\\| \\"mli\\" \\\\| \\"tcl\\" \\\\| \\"wat\\" \\\\| \\"wast\\" \\\\| \\"webassembly\\" \\\\| \\"wasm\\" \\\\| \\"Binary\\" \\\\| \\"sql\\" \\\\| \\"sqlite\\" \\\\| \\"sqlite3\\" \\\\| \\"pg.sql\\" \\\\| \\"pgsql.sql\\" \\\\| \\"pgsql\\" \\\\| \\"pg\\" \\\\| \\"pglite\\" \\\\| \\"pglite.sql\\" \\\\| \\"postgresql\\" \\\\| \\"postgres\\" \\\\| \\"postgre.sql\\" \\\\| \\"postgresql.sql\\" \\\\| \\"prolog.pl\\" \\\\| \\"prolog\\" \\\\| \\"blockly\\" \\\\| \\"blockly.xml\\" \\\\| \\"xml\\" \\\\| \\"pintora\\"","source":"@site/docs/api/type-aliases/Language.md","sourceDirName":"api/type-aliases","slug":"/api/type-aliases/Language","permalink":"/docs/api/type-aliases/Language","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/type-aliases/Language.md","tags":[],"version":"current","frontMatter":{}}'),l=s("5893"),r=s("65");let i={},n="Type Alias: Language",o={},a=[{value:"Defined in",id:"defined-in",level:2}];function h(e){let c={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",strong:"strong",...(0,r.a)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(c.header,{children:(0,l.jsx)(c.h1,{id:"type-alias-language",children:"Type Alias: Language"})}),"\n",(0,l.jsxs)(c.blockquote,{children:["\n",(0,l.jsxs)(c.p,{children:[(0,l.jsx)(c.strong,{children:"Language"}),": ",(0,l.jsx)(c.code,{children:'"html"'})," | ",(0,l.jsx)(c.code,{children:'"htm"'})," | ",(0,l.jsx)(c.code,{children:'"markdown"'})," | ",(0,l.jsx)(c.code,{children:'"md"'})," | ",(0,l.jsx)(c.code,{children:'"mdown"'})," | ",(0,l.jsx)(c.code,{children:'"mkdn"'})," | ",(0,l.jsx)(c.code,{children:'"mdx"'})," | ",(0,l.jsx)(c.code,{children:'"astro"'})," | ",(0,l.jsx)(c.code,{children:'"pug"'})," | ",(0,l.jsx)(c.code,{children:'"jade"'})," | ",(0,l.jsx)(c.code,{children:'"haml"'})," | ",(0,l.jsx)(c.code,{children:'"asciidoc"'})," | ",(0,l.jsx)(c.code,{children:'"adoc"'})," | ",(0,l.jsx)(c.code,{children:'"asc"'})," | ",(0,l.jsx)(c.code,{children:'"mustache"'})," | ",(0,l.jsx)(c.code,{children:'"handlebars"'})," | ",(0,l.jsx)(c.code,{children:'"hbs"'})," | ",(0,l.jsx)(c.code,{children:'"ejs"'})," | ",(0,l.jsx)(c.code,{children:'"eta"'})," | ",(0,l.jsx)(c.code,{children:'"nunjucks"'})," | ",(0,l.jsx)(c.code,{children:'"njk"'})," | ",(0,l.jsx)(c.code,{children:'"liquid"'})," | ",(0,l.jsx)(c.code,{children:'"liquidjs"'})," | ",(0,l.jsx)(c.code,{children:'"dot"'})," | ",(0,l.jsx)(c.code,{children:'"twig"'})," | ",(0,l.jsx)(c.code,{children:'"vento"'})," | ",(0,l.jsx)(c.code,{children:'"vto"'})," | ",(0,l.jsx)(c.code,{children:'"art-template"'})," | ",(0,l.jsx)(c.code,{children:'"art"'})," | ",(0,l.jsx)(c.code,{children:'"jinja"'})," | ",(0,l.jsx)(c.code,{children:'"bbcode"'})," | ",(0,l.jsx)(c.code,{children:'"bb"'})," | ",(0,l.jsx)(c.code,{children:'"mjml"'})," | ",(0,l.jsx)(c.code,{children:'"diagrams"'})," | ",(0,l.jsx)(c.code,{children:'"diagram"'})," | ",(0,l.jsx)(c.code,{children:'"graph"'})," | ",(0,l.jsx)(c.code,{children:'"plt"'})," | ",(0,l.jsx)(c.code,{children:'"richtext"'})," | ",(0,l.jsx)(c.code,{children:'"rte"'})," | ",(0,l.jsx)(c.code,{children:'"rich"'})," | ",(0,l.jsx)(c.code,{children:'"rte.html"'})," | ",(0,l.jsx)(c.code,{children:'"css"'})," | ",(0,l.jsx)(c.code,{children:'"scss"'})," | ",(0,l.jsx)(c.code,{children:'"sass"'})," | ",(0,l.jsx)(c.code,{children:'"less"'})," | ",(0,l.jsx)(c.code,{children:'"stylus"'})," | ",(0,l.jsx)(c.code,{children:'"styl"'})," | ",(0,l.jsx)(c.code,{children:'"stylis"'})," | ",(0,l.jsx)(c.code,{children:'"postcss"'})," | ",(0,l.jsx)(c.code,{children:'"javascript"'})," | ",(0,l.jsx)(c.code,{children:'"js"'})," | ",(0,l.jsx)(c.code,{children:'"json"'})," | ",(0,l.jsx)(c.code,{children:'"babel"'})," | ",(0,l.jsx)(c.code,{children:'"es"'})," | ",(0,l.jsx)(c.code,{children:'"sucrase"'})," | ",(0,l.jsx)(c.code,{children:'"typescript"'})," | ",(0,l.jsx)(c.code,{children:'"flow"'})," | ",(0,l.jsx)(c.code,{children:'"ts"'})," | ",(0,l.jsx)(c.code,{children:'"jsx"'})," | ",(0,l.jsx)(c.code,{children:'"tsx"'})," | ",(0,l.jsx)(c.code,{children:'"react"'})," | ",(0,l.jsx)(c.code,{children:'"react-jsx"'})," | ",(0,l.jsx)(c.code,{children:'"react.jsx"'})," | ",(0,l.jsx)(c.code,{children:'"react-tsx"'})," | ",(0,l.jsx)(c.code,{children:'"react.tsx"'})," | ",(0,l.jsx)(c.code,{children:'"react-native"'})," | ",(0,l.jsx)(c.code,{children:'"react-native.jsx"'})," | ",(0,l.jsx)(c.code,{children:'"react-native-tsx"'})," | ",(0,l.jsx)(c.code,{children:'"react-native.tsx"'})," | ",(0,l.jsx)(c.code,{children:'"vue"'})," | ",(0,l.jsx)(c.code,{children:'"vue3"'})," | ",(0,l.jsx)(c.code,{children:'"vue2"'})," | ",(0,l.jsx)(c.code,{children:'"vue-app"'})," | ",(0,l.jsx)(c.code,{children:'"app.vue"'})," | ",(0,l.jsx)(c.code,{children:'"svelte"'})," | ",(0,l.jsx)(c.code,{children:'"svelte-app"'})," | ",(0,l.jsx)(c.code,{children:'"app.svelte"'})," | ",(0,l.jsx)(c.code,{children:'"stencil"'})," | ",(0,l.jsx)(c.code,{children:'"stencil.tsx"'})," | ",(0,l.jsx)(c.code,{children:'"solid"'})," | ",(0,l.jsx)(c.code,{children:'"solid.jsx"'})," | ",(0,l.jsx)(c.code,{children:'"solid.tsx"'})," | ",(0,l.jsx)(c.code,{children:'"riot"'})," | ",(0,l.jsx)(c.code,{children:'"riotjs"'})," | ",(0,l.jsx)(c.code,{children:'"malina"'})," | ",(0,l.jsx)(c.code,{children:'"malinajs"'})," | ",(0,l.jsx)(c.code,{children:'"xht"'})," | ",(0,l.jsx)(c.code,{children:'"coffeescript"'})," | ",(0,l.jsx)(c.code,{children:'"coffee"'})," | ",(0,l.jsx)(c.code,{children:'"livescript"'})," | ",(0,l.jsx)(c.code,{children:'"ls"'})," | ",(0,l.jsx)(c.code,{children:'"civet"'})," | ",(0,l.jsx)(c.code,{children:'"clio"'})," | ",(0,l.jsx)(c.code,{children:'"imba"'})," | ",(0,l.jsx)(c.code,{children:'"assemblyscript"'})," | ",(0,l.jsx)(c.code,{children:'"as"'})," | ",(0,l.jsx)(c.code,{children:'"python"'})," | ",(0,l.jsx)(c.code,{children:'"py"'})," | ",(0,l.jsx)(c.code,{children:'"pyodide"'})," | ",(0,l.jsx)(c.code,{children:'"python-wasm"'})," | ",(0,l.jsx)(c.code,{children:'"py-wasm"'})," | ",(0,l.jsx)(c.code,{children:'"pythonwasm"'})," | ",(0,l.jsx)(c.code,{children:'"pywasm"'})," | ",(0,l.jsx)(c.code,{children:'"py3"'})," | ",(0,l.jsx)(c.code,{children:'"wasm.py"'})," | ",(0,l.jsx)(c.code,{children:'"r"'})," | ",(0,l.jsx)(c.code,{children:'"rlang"'})," | ",(0,l.jsx)(c.code,{children:'"rstats"'})," | ",(0,l.jsx)(c.code,{children:'"r-wasm"'})," | ",(0,l.jsx)(c.code,{children:'"ruby"'})," | ",(0,l.jsx)(c.code,{children:'"rb"'})," | ",(0,l.jsx)(c.code,{children:'"ruby-wasm"'})," | ",(0,l.jsx)(c.code,{children:'"wasm.rb"'})," | ",(0,l.jsx)(c.code,{children:'"rubywasm"'})," | ",(0,l.jsx)(c.code,{children:'"go"'})," | ",(0,l.jsx)(c.code,{children:'"golang"'})," | ",(0,l.jsx)(c.code,{children:'"php"'})," | ",(0,l.jsx)(c.code,{children:'"php-wasm"'})," | ",(0,l.jsx)(c.code,{children:'"phpwasm"'})," | ",(0,l.jsx)(c.code,{children:'"wasm.php"'})," | ",(0,l.jsx)(c.code,{children:'"cpp"'})," | ",(0,l.jsx)(c.code,{children:'"c"'})," | ",(0,l.jsx)(c.code,{children:'"C"'})," | ",(0,l.jsx)(c.code,{children:'"cp"'})," | ",(0,l.jsx)(c.code,{children:'"cxx"'})," | ",(0,l.jsx)(c.code,{children:'"c++"'})," | ",(0,l.jsx)(c.code,{children:'"cppm"'})," | ",(0,l.jsx)(c.code,{children:'"ixx"'})," | ",(0,l.jsx)(c.code,{children:'"ii"'})," | ",(0,l.jsx)(c.code,{children:'"hpp"'})," | ",(0,l.jsx)(c.code,{children:'"h"'})," | ",(0,l.jsx)(c.code,{children:'"cpp-wasm"'})," | ",(0,l.jsx)(c.code,{children:'"cppwasm"'})," | ",(0,l.jsx)(c.code,{children:'"cwasm"'})," | ",(0,l.jsx)(c.code,{children:'"wasm.cpp"'})," | ",(0,l.jsx)(c.code,{children:'"clang"'})," | ",(0,l.jsx)(c.code,{children:'"clang.cpp"'})," | ",(0,l.jsx)(c.code,{children:'"java"'})," | ",(0,l.jsx)(c.code,{children:'"csharp"'})," | ",(0,l.jsx)(c.code,{children:'"csharp-wasm"'})," | ",(0,l.jsx)(c.code,{children:'"cs"'})," | ",(0,l.jsx)(c.code,{children:'"cs-wasm"'})," | ",(0,l.jsx)(c.code,{children:'"wasm.cs"'})," | ",(0,l.jsx)(c.code,{children:'"perl"'})," | ",(0,l.jsx)(c.code,{children:'"pl"'})," | ",(0,l.jsx)(c.code,{children:'"pm"'})," | ",(0,l.jsx)(c.code,{children:'"lua"'})," | ",(0,l.jsx)(c.code,{children:'"lua-wasm"'})," | ",(0,l.jsx)(c.code,{children:'"luawasm"'})," | ",(0,l.jsx)(c.code,{children:'"wasm.lua"'})," | ",(0,l.jsx)(c.code,{children:'"teal"'})," | ",(0,l.jsx)(c.code,{children:'"tl"'})," | ",(0,l.jsx)(c.code,{children:'"fennel"'})," | ",(0,l.jsx)(c.code,{children:'"fnl"'})," | ",(0,l.jsx)(c.code,{children:'"julia"'})," | ",(0,l.jsx)(c.code,{children:'"jl"'})," | ",(0,l.jsx)(c.code,{children:'"scheme"'})," | ",(0,l.jsx)(c.code,{children:'"scm"'})," | ",(0,l.jsx)(c.code,{children:'"commonlisp"'})," | ",(0,l.jsx)(c.code,{children:'"common-lisp"'})," | ",(0,l.jsx)(c.code,{children:'"lisp"'})," | ",(0,l.jsx)(c.code,{children:'"clojurescript"'})," | ",(0,l.jsx)(c.code,{children:'"clojure"'})," | ",(0,l.jsx)(c.code,{children:'"cljs"'})," | ",(0,l.jsx)(c.code,{children:'"clj"'})," | ",(0,l.jsx)(c.code,{children:'"cljc"'})," | ",(0,l.jsx)(c.code,{children:'"edn"'})," | ",(0,l.jsx)(c.code,{children:'"gleam"'})," | ",(0,l.jsx)(c.code,{children:'"rescript"'})," | ",(0,l.jsx)(c.code,{children:'"res"'})," | ",(0,l.jsx)(c.code,{children:'"resi"'})," | ",(0,l.jsx)(c.code,{children:'"reason"'})," | ",(0,l.jsx)(c.code,{children:'"re"'})," | ",(0,l.jsx)(c.code,{children:'"rei"'})," | ",(0,l.jsx)(c.code,{children:'"ocaml"'})," | ",(0,l.jsx)(c.code,{children:'"ml"'})," | ",(0,l.jsx)(c.code,{children:'"mli"'})," | ",(0,l.jsx)(c.code,{children:'"tcl"'})," | ",(0,l.jsx)(c.code,{children:'"wat"'})," | ",(0,l.jsx)(c.code,{children:'"wast"'})," | ",(0,l.jsx)(c.code,{children:'"webassembly"'})," | ",(0,l.jsx)(c.code,{children:'"wasm"'})," | ",(0,l.jsx)(c.code,{children:'"Binary"'})," | ",(0,l.jsx)(c.code,{children:'"sql"'})," | ",(0,l.jsx)(c.code,{children:'"sqlite"'})," | ",(0,l.jsx)(c.code,{children:'"sqlite3"'})," | ",(0,l.jsx)(c.code,{children:'"pg.sql"'})," | ",(0,l.jsx)(c.code,{children:'"pgsql.sql"'})," | ",(0,l.jsx)(c.code,{children:'"pgsql"'})," | ",(0,l.jsx)(c.code,{children:'"pg"'})," | ",(0,l.jsx)(c.code,{children:'"pglite"'})," | ",(0,l.jsx)(c.code,{children:'"pglite.sql"'})," | ",(0,l.jsx)(c.code,{children:'"postgresql"'})," | ",(0,l.jsx)(c.code,{children:'"postgres"'})," | ",(0,l.jsx)(c.code,{children:'"postgre.sql"'})," | ",(0,l.jsx)(c.code,{children:'"postgresql.sql"'})," | ",(0,l.jsx)(c.code,{children:'"prolog.pl"'})," | ",(0,l.jsx)(c.code,{children:'"prolog"'})," | ",(0,l.jsx)(c.code,{children:'"blockly"'})," | ",(0,l.jsx)(c.code,{children:'"blockly.xml"'})," | ",(0,l.jsx)(c.code,{children:'"xml"'})," | ",(0,l.jsx)(c.code,{children:'"pintora"'})]}),"\n"]}),"\n",(0,l.jsx)(c.p,{children:"Language name, alias or extension."}),"\n",(0,l.jsx)(c.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,l.jsx)(c.p,{children:(0,l.jsx)(c.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L884",children:"models.ts:884"})})]})}function j(e={}){let{wrapper:c}={...(0,r.a)(),...e.components};return c?(0,l.jsx)(c,{...e,children:(0,l.jsx)(h,{...e})}):h(e)}},65:function(e,c,s){s.d(c,{Z:function(){return n},a:function(){return i}});var d=s(7294);let l={},r=d.createContext(l);function i(e){let c=d.useContext(r);return d.useMemo(function(){return"function"==typeof e?e(c):{...c,...e}},[c,e])}function n(e){let c;return c=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:i(e.components),d.createElement(r.Provider,{value:c},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/9c9dfa90.4eb222b3.js b/docs/assets/js/9c9dfa90.4eb222b3.js new file mode 100644 index 0000000..b46a82f --- /dev/null +++ b/docs/assets/js/9c9dfa90.4eb222b3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4286"],{2919:function(e,n,t){t.r(n),t.d(n,{default:()=>d,frontMatter:()=>r,metadata:()=>a,assets:()=>l,toc:()=>u,contentTitle:()=>c});var a=JSON.parse('{"id":"languages/ocaml","title":"OCaml","description":"TODO...","source":"@site/docs/languages/ocaml.mdx","sourceDirName":"languages","slug":"/languages/ocaml","permalink":"/docs/languages/ocaml","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/ocaml.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Nunjucks","permalink":"/docs/languages/nunjucks"},"next":{"title":"Perl","permalink":"/docs/languages/perl"}}'),s=t("5893"),o=t("65");let r={},c="OCaml",l={},u=[];function i(e){let n={h1:"h1",header:"header",p:"p",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"ocaml",children:"OCaml"})}),"\n",(0,s.jsx)(n.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(i,{...e})}):i(e)}},65:function(e,n,t){t.d(n,{Z:function(){return c},a:function(){return r}});var a=t(7294);let s={},o=a.createContext(s);function r(e){let n=a.useContext(o);return a.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),a.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/a1df81e4.f9222a7d.js b/docs/assets/js/a1df81e4.f9222a7d.js new file mode 100644 index 0000000..47499e7 --- /dev/null +++ b/docs/assets/js/a1df81e4.f9222a7d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5179"],{2802:function(e,t,n){n.r(t),n.d(t,{default:()=>p,frontMatter:()=>d,metadata:()=>i,assets:()=>a,toc:()=>c,contentTitle:()=>o});var i=JSON.parse('{"id":"api/internal/type-aliases/EditorId","title":"Type Alias: EditorId","description":"EditorId: \\"markup\\" \\\\| \\"style\\" \\\\| \\"script\\"","source":"@site/docs/api/internal/type-aliases/EditorId.md","sourceDirName":"api/internal/type-aliases","slug":"/api/internal/type-aliases/EditorId","permalink":"/docs/api/internal/type-aliases/EditorId","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/type-aliases/EditorId.md","tags":[],"version":"current","frontMatter":{}}'),s=n("5893"),r=n("65");let d={},o="Type Alias: EditorId",a={},c=[{value:"Defined in",id:"defined-in",level:2}];function l(e){let t={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",strong:"strong",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"type-alias-editorid",children:"Type Alias: EditorId"})}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"EditorId"}),": ",(0,s.jsx)(t.code,{children:'"markup"'})," | ",(0,s.jsx)(t.code,{children:'"style"'})," | ",(0,s.jsx)(t.code,{children:'"script"'})]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1168",children:"models.ts:1168"})})]})}function p(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},65:function(e,t,n){n.d(t,{Z:function(){return o},a:function(){return d}});var i=n(7294);let s={},r=i.createContext(s);function d(e){let t=i.useContext(r);return i.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:d(e.components),i.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/a5365419.9eb51ace.js b/docs/assets/js/a5365419.9eb51ace.js new file mode 100644 index 0000000..0100129 --- /dev/null +++ b/docs/assets/js/a5365419.9eb51ace.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4416"],{6309:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>c,metadata:()=>s,assets:()=>a,toc:()=>l,contentTitle:()=>i});var s=JSON.parse('{"id":"languages/civet","title":"Civet","description":"TODO...","source":"@site/docs/languages/civet.mdx","sourceDirName":"languages","slug":"/languages/civet","permalink":"/docs/languages/civet","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/civet.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Blockly","permalink":"/docs/languages/blockly"},"next":{"title":"Clio","permalink":"/docs/languages/clio"}}'),o=n("5893"),r=n("65");let c={},i="Civet",a={},l=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"civet",children:"Civet"})}),"\n",(0,o.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}},65:function(e,t,n){n.d(t,{Z:function(){return i},a:function(){return c}});var s=n(7294);let o={},r=s.createContext(o);function c(e){let t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/a7232ca4.520db7d1.js b/docs/assets/js/a7232ca4.520db7d1.js new file mode 100644 index 0000000..64689a1 --- /dev/null +++ b/docs/assets/js/a7232ca4.520db7d1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8531"],{8932:function(e,t,n){n.r(t),n.d(t,{default:()=>u,frontMatter:()=>r,metadata:()=>s,assets:()=>l,toc:()=>o,contentTitle:()=>c});var s=JSON.parse('{"id":"languages/tailwindcss","title":"Tailwind CSS","description":"TODO...","source":"@site/docs/languages/tailwindcss.mdx","sourceDirName":"languages","slug":"/languages/tailwindcss","permalink":"/docs/languages/tailwindcss","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/tailwindcss.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Svelte","permalink":"/docs/languages/svelte"},"next":{"title":"Tcl","permalink":"/docs/languages/tcl"}}'),a=n("5893"),i=n("65");let r={},c="Tailwind CSS",l={},o=[];function d(e){let t={h1:"h1",header:"header",p:"p",...(0,i.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.header,{children:(0,a.jsx)(t.h1,{id:"tailwind-css",children:"Tailwind CSS"})}),"\n",(0,a.jsx)(t.p,{children:"TODO..."})]})}function u(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},65:function(e,t,n){n.d(t,{Z:function(){return c},a:function(){return r}});var s=n(7294);let a={},i=s.createContext(a);function r(e){let t=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:r(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/a7456010.7fed3d29.js b/docs/assets/js/a7456010.7fed3d29.js new file mode 100644 index 0000000..58b6438 --- /dev/null +++ b/docs/assets/js/a7456010.7fed3d29.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7365"],{2050:function(s){s.exports=JSON.parse('{"name":"docusaurus-plugin-content-pages","id":"default"}')}}]); \ No newline at end of file diff --git a/docs/assets/js/a7bd4aaa.05588383.js b/docs/assets/js/a7bd4aaa.05588383.js new file mode 100644 index 0000000..ca180f0 --- /dev/null +++ b/docs/assets/js/a7bd4aaa.05588383.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5211"],{6915:function(n,e,s){s.r(e),s.d(e,{default:function(){return d}});var r=s(5893);s(7294);var t=s(5231),o=s(9434),c=s(9873),i=s(8790),u=s(2901);function l(n){let{version:e}=n;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(u.Z,{version:e.version,tag:(0,o.J)(e.pluginId,e.version)}),(0,r.jsx)(t.d,{children:e.noIndex&&(0,r.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})]})}function a(n){let{version:e,route:s}=n;return(0,r.jsx)(t.FG,{className:e.className,children:(0,r.jsx)(c.q,{version:e,children:(0,i.H)(s.routes)})})}function d(n){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(l,{...n}),(0,r.jsx)(a,{...n})]})}}}]); \ No newline at end of file diff --git a/docs/assets/js/a8950a2d.81c57b52.js b/docs/assets/js/a8950a2d.81c57b52.js new file mode 100644 index 0000000..05776dd --- /dev/null +++ b/docs/assets/js/a8950a2d.81c57b52.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4120"],{3372:function(e,s,t){t.r(s),t.d(s,{default:()=>d,frontMatter:()=>o,metadata:()=>n,assets:()=>i,toc:()=>l,contentTitle:()=>a});var n=JSON.parse('{"id":"languages/scss","title":"SCSS","description":"TODO...","source":"@site/docs/languages/scss.mdx","sourceDirName":"languages","slug":"/languages/scss","permalink":"/docs/languages/scss","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/scss.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Scheme","permalink":"/docs/languages/scheme"},"next":{"title":"Solid","permalink":"/docs/languages/solid"}}'),r=t("5893"),c=t("65");let o={},a="SCSS",i={},l=[];function u(e){let s={h1:"h1",header:"header",p:"p",...(0,c.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.header,{children:(0,r.jsx)(s.h1,{id:"scss",children:"SCSS"})}),"\n",(0,r.jsx)(s.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:s}={...(0,c.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},65:function(e,s,t){t.d(s,{Z:function(){return a},a:function(){return o}});var n=t(7294);let r={},c=n.createContext(r);function o(e){let s=n.useContext(c);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(c.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/a94703ab.f8b4c17d.js b/docs/assets/js/a94703ab.f8b4c17d.js new file mode 100644 index 0000000..1694a9f --- /dev/null +++ b/docs/assets/js/a94703ab.f8b4c17d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9914"],{928:function(e,t,n){n.r(t),n.d(t,{default:()=>ei});var a=n("5893"),i=n("7294"),o=n("7026"),r=n("5231"),l=n("6171"),s=n("6563"),d=n("4684"),c=n("7670"),u=n("4718"),m=n("7339");let b={backToTopButton:"backToTopButton_sjWU",backToTopButtonShow:"backToTopButtonShow_xfvO"};function h(){let{shown:e,scrollToTop:t}=function(e){let{threshold:t}=e,[n,a]=(0,i.useState)(!1),o=(0,i.useRef)(!1),{startScroll:r,cancelScroll:l}=(0,u.Ct)();return(0,u.RF)((e,n)=>{let{scrollY:i}=e,r=n?.scrollY;r&&(o.current?o.current=!1:i>=r?(l(),a(!1)):i<t?a(!1):i+window.innerHeight<document.documentElement.scrollHeight&&a(!0))}),(0,m.S)(e=>{e.location.hash&&(o.current=!0,a(!1))}),{shown:n,scrollToTop:()=>r(0)}}({threshold:300});return(0,a.jsx)("button",{"aria-label":(0,c.I)({id:"theme.BackToTopButton.buttonAriaLabel",message:"Scroll back to top",description:"The ARIA label for the back to top button"}),className:(0,o.Z)("clean-btn",l.k.common.backToTopButton,b.backToTopButton,e&&b.backToTopButtonShow),type:"button",onClick:t})}var p=n("1481"),x=n("6550"),f=n("7550"),j=n("6009"),k=n("1660");function _(e){return(0,a.jsx)("svg",{width:"20",height:"20","aria-hidden":"true",...e,children:(0,a.jsxs)("g",{fill:"#7a7a7a",children:[(0,a.jsx)("path",{d:"M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"}),(0,a.jsx)("path",{d:"M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"})]})})}function g(e){let{onClick:t}=e;return(0,a.jsx)("button",{type:"button",title:(0,c.I)({id:"theme.docs.sidebar.collapseButtonTitle",message:"Collapse sidebar",description:"The title attribute for collapse button of doc sidebar"}),"aria-label":(0,c.I)({id:"theme.docs.sidebar.collapseButtonAriaLabel",message:"Collapse sidebar",description:"The title attribute for collapse button of doc sidebar"}),className:(0,o.Z)("button button--secondary button--outline","collapseSidebarButton_PEFL"),onClick:t,children:(0,a.jsx)(_,{className:"collapseSidebarButtonIcon_kv0_"})})}var v=n("1333"),S=n("1934");let C=Symbol("EmptyContext"),I=i.createContext(C);function N(e){let{children:t}=e,[n,o]=(0,i.useState)(null),r=(0,i.useMemo)(()=>({expandedItem:n,setExpandedItem:o}),[n]);return(0,a.jsx)(I.Provider,{value:r,children:t})}var T=n("6850"),Z=n("3868"),L=n("3367"),y=n("6735");function B(e){let{collapsed:t,categoryLabel:n,onClick:i}=e;return(0,a.jsx)("button",{"aria-label":t?(0,c.I)({id:"theme.DocSidebarItem.expandCategoryAriaLabel",message:"Expand sidebar category '{label}'",description:"The ARIA label to expand the sidebar category"},{label:n}):(0,c.I)({id:"theme.DocSidebarItem.collapseCategoryAriaLabel",message:"Collapse sidebar category '{label}'",description:"The ARIA label to collapse the sidebar category"},{label:n}),"aria-expanded":!t,type:"button",className:"clean-btn menu__caret",onClick:i})}function A(e){let{item:t,onItemClick:n,activePath:r,level:d,index:c,...u}=e,{items:m,label:b,collapsible:h,className:p,href:x}=t,{docs:{sidebar:{autoCollapseCategories:f}}}=(0,j.L)(),k=function(e){let t=(0,y.Z)();return(0,i.useMemo)(()=>e.href&&!e.linkUnlisted?e.href:!t&&e.collapsible?(0,s.LM)(e):void 0,[e,t])}(t),_=(0,s._F)(t,r),g=(0,Z.Mg)(x,r),{collapsed:v,setCollapsed:N}=(0,T.u)({initialState:()=>!!h&&!_&&t.collapsed}),{expandedItem:A,setExpandedItem:w}=function(){let e=(0,i.useContext)(I);if(e===C)throw new S.i6("DocSidebarItemsExpandedStateProvider");return e}(),H=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:!v;w(e?null:c),N(e)};return!function(e){let{isActive:t,collapsed:n,updateCollapsed:a}=e,o=(0,S.D9)(t);(0,i.useEffect)(()=>{t&&!o&&n&&a(!1)},[t,o,n,a])}({isActive:_,collapsed:v,updateCollapsed:H}),(0,i.useEffect)(()=>{h&&null!=A&&A!==c&&f&&N(!0)},[h,A,c,N,f]),(0,a.jsxs)("li",{className:(0,o.Z)(l.k.docs.docSidebarItemCategory,l.k.docs.docSidebarItemCategoryLevel(d),"menu__list-item",{"menu__list-item--collapsed":v},p),children:[(0,a.jsxs)("div",{className:(0,o.Z)("menu__list-item-collapsible",{"menu__list-item-collapsible--active":g}),children:[(0,a.jsx)(L.Z,{className:(0,o.Z)("menu__link",{"menu__link--sublist":h,"menu__link--sublist-caret":!x&&h,"menu__link--active":_}),onClick:h?e=>{n?.(t),x?H(!1):(e.preventDefault(),H())}:()=>{n?.(t)},"aria-current":g?"page":void 0,role:h&&!x?"button":void 0,"aria-expanded":h&&!x?!v:void 0,href:h?k??"#":k,...u,children:b}),x&&h&&(0,a.jsx)(B,{collapsed:v,categoryLabel:b,onClick:e=>{e.preventDefault(),H()}})]}),(0,a.jsx)(T.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:v,children:(0,a.jsx)(D,{items:m,tabIndex:v?-1:0,onItemClick:n,activePath:r,level:d+1})})]})}var w=n("9999"),H=n("9011");let E={menuExternalLink:"menuExternalLink_NmtK"};function M(e){let{item:t,onItemClick:n,activePath:i,level:r,index:d,...c}=e,{href:u,label:m,className:b,autoAddBaseUrl:h}=t,p=(0,s._F)(t,i),x=(0,w.Z)(u);return(0,a.jsx)("li",{className:(0,o.Z)(l.k.docs.docSidebarItemLink,l.k.docs.docSidebarItemLinkLevel(r),"menu__list-item",b),children:(0,a.jsxs)(L.Z,{className:(0,o.Z)("menu__link",!x&&E.menuExternalLink,{"menu__link--active":p}),autoAddBaseUrl:h,"aria-current":p?"page":void 0,to:u,...x&&{onClick:n?()=>n(t):void 0},...c,children:[m,!x&&(0,a.jsx)(H.Z,{})]})},m)}let W={menuHtmlItem:"menuHtmlItem_M9Kj"};function F(e){let{item:t,level:n,index:i}=e,{value:r,defaultStyle:s,className:d}=t;return(0,a.jsx)("li",{className:(0,o.Z)(l.k.docs.docSidebarItemLink,l.k.docs.docSidebarItemLinkLevel(n),s&&[W.menuHtmlItem,"menu__list-item"],d),dangerouslySetInnerHTML:{__html:r}},i)}function R(e){let{item:t,...n}=e;switch(t.type){case"category":return(0,a.jsx)(A,{item:t,...n});case"html":return(0,a.jsx)(F,{item:t,...n});default:return(0,a.jsx)(M,{item:t,...n})}}let D=(0,i.memo)(function(e){let{items:t,...n}=e,i=(0,s.f)(t,n.activePath);return(0,a.jsx)(N,{children:i.map((e,t)=>(0,a.jsx)(R,{item:e,index:t,...n},t))})}),P={menu:"menu_SIkG",menuWithAnnouncementBar:"menuWithAnnouncementBar_GW3s"};function V(e){let{path:t,sidebar:n,className:r}=e,s=function(){let{isActive:e}=(0,v.n)(),[t,n]=(0,i.useState)(e);return(0,u.RF)(t=>{let{scrollY:a}=t;e&&n(0===a)},[e]),e&&t}();return(0,a.jsx)("nav",{"aria-label":(0,c.I)({id:"theme.docs.sidebar.navAriaLabel",message:"Docs sidebar",description:"The ARIA label for the sidebar navigation"}),className:(0,o.Z)("menu thin-scrollbar",P.menu,s&&P.menuWithAnnouncementBar,r),children:(0,a.jsx)("ul",{className:(0,o.Z)(l.k.docs.docSidebarMenu,"menu__list"),children:(0,a.jsx)(D,{items:n,activePath:t,level:1})})})}let U={sidebar:"sidebar_njMd",sidebarWithHideableNavbar:"sidebarWithHideableNavbar_wUlq",sidebarHidden:"sidebarHidden_VK0M",sidebarLogo:"sidebarLogo_isFc"},K=i.memo(function(e){let{path:t,sidebar:n,onCollapse:i,isHidden:r}=e,{navbar:{hideOnScroll:l},docs:{sidebar:{hideable:s}}}=(0,j.L)();return(0,a.jsxs)("div",{className:(0,o.Z)(U.sidebar,l&&U.sidebarWithHideableNavbar,r&&U.sidebarHidden),children:[l&&(0,a.jsx)(k.Z,{tabIndex:-1,className:U.sidebarLogo}),(0,a.jsx)(V,{path:t,sidebar:n}),s&&(0,a.jsx)(g,{onClick:i})]})});var z=n("9018"),G=n("5870");let Y=e=>{let{sidebar:t,path:n}=e,i=(0,G.e)();return(0,a.jsx)("ul",{className:(0,o.Z)(l.k.docs.docSidebarMenu,"menu__list"),children:(0,a.jsx)(D,{items:t,activePath:n,onItemClick:e=>{"category"===e.type&&e.href&&i.toggle(),"link"===e.type&&i.toggle()},level:1})})},q=i.memo(function(e){return(0,a.jsx)(z.Zo,{component:Y,props:e})});function J(e){let t=(0,f.i)();return(0,a.jsxs)(a.Fragment,{children:[("desktop"===t||"ssr"===t)&&(0,a.jsx)(K,{...e}),"mobile"===t&&(0,a.jsx)(q,{...e})]})}function O(e){let{toggleSidebar:t}=e;return(0,a.jsx)("div",{className:"expandButton_TmdG",title:(0,c.I)({id:"theme.docs.sidebar.expandButtonTitle",message:"Expand sidebar",description:"The ARIA label and title attribute for expand button of doc sidebar"}),"aria-label":(0,c.I)({id:"theme.docs.sidebar.expandButtonAriaLabel",message:"Expand sidebar",description:"The ARIA label and title attribute for expand button of doc sidebar"}),tabIndex:0,role:"button",onKeyDown:t,onClick:t,children:(0,a.jsx)(_,{className:"expandButtonIcon_i1dp"})})}let Q={docSidebarContainer:"docSidebarContainer_YfHR",docSidebarContainerHidden:"docSidebarContainerHidden_DPk8",sidebarViewport:"sidebarViewport_aRkj"};function X(e){let{children:t}=e,n=(0,d.V)();return(0,a.jsx)(i.Fragment,{children:t},n?.name??"noSidebar")}function $(e){let{sidebar:t,hiddenSidebarContainer:n,setHiddenSidebarContainer:r}=e,{pathname:s}=(0,x.TH)(),[d,c]=(0,i.useState)(!1),u=(0,i.useCallback)(()=>{d&&c(!1),!d&&(0,p.n)()&&c(!0),r(e=>!e)},[r,d]);return(0,a.jsx)("aside",{className:(0,o.Z)(l.k.docs.docSidebarContainer,Q.docSidebarContainer,n&&Q.docSidebarContainerHidden),onTransitionEnd:e=>{e.currentTarget.classList.contains(Q.docSidebarContainer)&&n&&c(!0)},children:(0,a.jsx)(X,{children:(0,a.jsxs)("div",{className:(0,o.Z)(Q.sidebarViewport,d&&Q.sidebarViewportHidden),children:[(0,a.jsx)(J,{sidebar:t,path:s,onCollapse:u,isHidden:d}),d&&(0,a.jsx)(O,{toggleSidebar:u})]})})})}let ee={docMainContainer:"docMainContainer_TBSr",docMainContainerEnhanced:"docMainContainerEnhanced_lQrH",docItemWrapperEnhanced:"docItemWrapperEnhanced_JWYK"};function et(e){let{hiddenSidebarContainer:t,children:n}=e,i=(0,d.V)();return(0,a.jsx)("main",{className:(0,o.Z)(ee.docMainContainer,(t||!i)&&ee.docMainContainerEnhanced),children:(0,a.jsx)("div",{className:(0,o.Z)("container padding-top--md padding-bottom--lg",ee.docItemWrapper,t&&ee.docItemWrapperEnhanced),children:n})})}function en(e){let{children:t}=e,n=(0,d.V)(),[o,r]=(0,i.useState)(!1);return(0,a.jsxs)("div",{className:"docsWrapper_hBAB",children:[(0,a.jsx)(h,{}),(0,a.jsxs)("div",{className:"docRoot_UBD9",children:[n&&(0,a.jsx)($,{sidebar:n.items,hiddenSidebarContainer:o,setHiddenSidebarContainer:r}),(0,a.jsx)(et,{hiddenSidebarContainer:o,children:t})]})]})}var ea=n("1694");function ei(e){let t=(0,s.SN)(e);if(!t)return(0,a.jsx)(ea.Z,{});let{docElement:n,sidebarName:i,sidebarItems:c}=t;return(0,a.jsx)(r.FG,{className:(0,o.Z)(l.k.page.docsDocPage),children:(0,a.jsx)(d.b,{name:i,items:c,children:(0,a.jsx)(en,{children:n})})})}},1694:function(e,t,n){n.d(t,{Z:function(){return l}});var a=n(5893);n(7294);var i=n(7026),o=n(7670),r=n(9386);function l(e){let{className:t}=e;return(0,a.jsx)("main",{className:(0,i.Z)("container margin-vert--xl",t),children:(0,a.jsx)("div",{className:"row",children:(0,a.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,a.jsx)(r.Z,{as:"h1",className:"hero__title",children:(0,a.jsx)(o.Z,{id:"theme.NotFound.title",description:"The title of the 404 page",children:"Page Not Found"})}),(0,a.jsx)("p",{children:(0,a.jsx)(o.Z,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page",children:"We could not find what you were looking for."})}),(0,a.jsx)("p",{children:(0,a.jsx)(o.Z,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page",children:"Please contact the owner of the site that linked you to the original URL and let them know their link is broken."})})]})})})}}}]); \ No newline at end of file diff --git a/docs/assets/js/a994a1a3.214aa7ec.js b/docs/assets/js/a994a1a3.214aa7ec.js new file mode 100644 index 0000000..4455975 --- /dev/null +++ b/docs/assets/js/a994a1a3.214aa7ec.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3728"],{5815:function(e,t,n){n.r(t),n.d(t,{config:()=>c,config2:()=>u,default:()=>m,frontMatter:()=>a,metadata:()=>s,assets:()=>d,params:()=>h,toc:()=>p,contentTitle:()=>l});var s=JSON.parse('{"id":"languages/vento","title":"Vento","description":"Vento is a template engine for Deno. It\'s inspired by other engines, such as Nunjucks, Liquid, Eta, and Mustache.","source":"@site/docs/languages/vento.mdx","sourceDirName":"languages","slug":"/languages/vento","permalink":"/docs/languages/vento","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/vento.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"UnoCSS","permalink":"/docs/languages/unocss"},"next":{"title":"Vue SFC","permalink":"/docs/languages/vue"}}'),o=n("5893"),r=n("65"),i=n("3365");let a={},l="Vento",d={},c={markup:{language:"vento",content:"Hello, {{ name }}!"},customSettings:{template:{data:{name:"LiveCodes"}}}},h={compiled:"open"},u={markup:{language:"vento",content:"Hello, {{ name }}!"},script:{language:"javascript",content:'window.livecodes.templateData = { name: "LiveCodes" };'},customSettings:{template:{prerender:!1}},activeEditor:"script"},p=[{value:"Usage",id:"usage",level:2},{value:"Pre-rendered (Default)",id:"pre-rendered-default",level:3},{value:"Dynamic",id:"dynamic",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Pre-rendered",id:"pre-rendered",level:3},{value:"Dynamic",id:"dynamic-1",level:3},{value:"Links",id:"links",level:2}];function g(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"vento",children:"Vento"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"https://vento.js.org/",children:"Vento"})," is a template engine for Deno. It's inspired by other engines, such as ",(0,o.jsx)(t.a,{href:"/docs/languages/nunjucks",children:"Nunjucks"}),", ",(0,o.jsx)(t.a,{href:"/docs/languages/liquid",children:"Liquid"}),", ",(0,o.jsx)(t.a,{href:"/docs/languages/eta",children:"Eta"}),", and ",(0,o.jsx)(t.a,{href:"/docs/languages/mustache",children:"Mustache"}),"."]}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.p,{children:"There are 2 modes for rendering:"}),"\n",(0,o.jsx)(t.h3,{id:"pre-rendered-default",children:"Pre-rendered (Default)"}),"\n",(0,o.jsxs)(t.p,{children:["The values of the expressions are evaluated and added to the template during compilation of the ",(0,o.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,o.jsxs)(t.p,{children:["The values of all expressions should be supplied in advance using ",(0,o.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," to the property ",(0,o.jsx)(t.code,{children:"template.data"})," which accepts an object of key-value pairs."]}),"\n",(0,o.jsxs)(t.p,{children:["Example: This provides the value of the expression ",(0,o.jsx)(t.code,{children:"name"})]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "data": {\n "name": "LiveCodes"\n }\n }\n}\n'})}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"#pre-rendered",children:"Full example below"})}),"\n",(0,o.jsx)(t.h3,{id:"dynamic",children:"Dynamic"}),"\n",(0,o.jsxs)(t.p,{children:["To use this mode, the property ",(0,o.jsx)(t.code,{children:"template.prerender"})," in ",(0,o.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," should be set to ",(0,o.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "prerender": false\n }\n}\n'})}),"\n",(0,o.jsxs)(t.p,{children:["In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the ",(0,o.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," runtime."]}),"\n",(0,o.jsxs)(t.p,{children:["This can be achieved in JavaScript (or any ",(0,o.jsx)(t.a,{href:"/docs/languages/",children:"language"})," that compiles to it) by assigning ",(0,o.jsx)(t.code,{children:"window.livecodes.templateData"})," to an object with the data."]}),"\n",(0,o.jsxs)(t.p,{children:["Please note that template rendering occurs on ",(0,o.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event",children:"page load"}),", so the assignment must occur before that."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-js",metastring:'title="Script Editor (JS)"',children:"window.livecodes.templateData = { name: 'LiveCodes' };\n"})}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"#dynamic-1",children:"Full example below"})}),"\n",(0,o.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,o.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"vento"})}),"\n",(0,o.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:".vto"})}),"\n",(0,o.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"markup"})}),"\n",(0,o.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"https://vento.js.org/",children:"Vento"}),"."]}),"\n",(0,o.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"ventojs"}),": v1.12.16"]}),"\n",(0,o.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,o.jsxs)(t.p,{children:["Using ",(0,o.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,o.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,o.jsx)(t.code,{children:"vento"})," are passed as a JSON object to the ",(0,o.jsx)(t.a,{href:"https://vento.js.org/getting-started/#usage",children:(0,o.jsx)(t.code,{children:"vento()"})})," function during compile. Please check the ",(0,o.jsx)(t.a,{href:"https://vento.js.org/configuration/",children:"documentation"})," for full reference."]}),"\n",(0,o.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,o.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n",(0,o.jsx)(t.h3,{id:"pre-rendered",children:"Pre-rendered"}),"\n","\n","\n",(0,o.jsx)(i.Z,{config:c,params:h}),"\n",(0,o.jsx)(t.h3,{id:"dynamic-1",children:"Dynamic"}),"\n","\n",(0,o.jsx)(i.Z,{config:u}),"\n",(0,o.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://vento.js.org/",children:"Vento"})}),"\n"]})]})}function m(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(g,{...e})}):g(e)}},3365:function(e,t,n){n.d(t,{Z:()=>f});var s=n("5893"),o=n("4200"),r=n("7294"),i=n("8294");function a(e){let t=(0,r.useRef)(null),[n,o]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[d,c]=(0,r.useState)(e.height),[h,u]=(0,r.useState)(),[p,g]=(0,r.useState)(JSON.stringify(e.config||"")),[m,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:n,style:s,height:r,sdkReady:a,config:d,...v}=e;if(o(n||""),l(s||{}),c(r),h&&m===JSON.stringify(v)){if(p===JSON.stringify(d))return;g(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(v)),h?.destroy(),(0,i.T)(t.current,{config:d,...v}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:n,style:a,"data-height":d})}var l=n("1858"),d=n("3262"),c=n("1705"),h=n("7645"),u=n("8168"),p=n("8228"),g=n("5050");function m(e){let[t,n]=(0,r.useState)(e.js),[o,i]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[m,f]=(0,r.useState)(e.vue),[v,j]=(0,r.useState)(e.svelte),x="3.7rem",[y,b]=(0,r.useState)(!0),[w,S]=(0,r.useState)(x),C=(0,r.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${x})`)},255)};return(0,r.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};n(e(t,"js")),i(e(o,"ts")),l(e(a,"jsx")),f(e(m,"html")),j(e(v,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${g.Z.details} ${p.Z.details}`,"data-collapsed":y,style:{height:y?x:w,overflow:"hidden",willChange:"height",transition:`height ${y?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{b(!y),E()},children:"show code"}),(0,s.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:g.Z.collapsibleContent,children:(0,s.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,s.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"js",children:t})}),(0,s.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"ts",children:o})}),(0,s.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"jsx",children:a})}),(0,s.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"html",children:m})}),(0,s.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,s.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:n,showCode:r,height:i,...d}=e,{colorMode:c}=(0,o.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),g=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),f=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${h(d)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,v=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${h(d)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(m,{js:u,ts:p,react:g,vue:f,svelte:v})]})}},8294:function(e,t,n){n.d(t,{T:function(){return o},r:function(){return r}});var s=n(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:s,loading:o="lazy",view:i}=t,a=s||"headless"===i,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(r(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":o);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let g=!1,m="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",r=l.querySelector(`iframe.${s}`),i=r||document.createElement("iframe");i.classList.add(s),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===o?"eager":"lazy"),a?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),i.onload=()=>{e(i)},i.src=c.href,r||l.appendChild(i)}),v=new Promise(e=>{addEventListener("message",function t(n){n.source===f.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),j=()=>g?Promise.reject(m):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),x=(e,t)=>new Promise(async(n,s)=>{if(g)return s(m);await j();let o=P();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===o&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?s(e.error):n(e)}}),f.contentWindow?.postMessage({method:e,id:o,args:t},h)}),y={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(g)throw Error(m);return b.includes(e)?(x("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!y[t])return;let n=e.data?.payload;y[t]?.forEach(e=>{e(n)})});let C=()=>{Object.values(y).forEach(e=>{e.length=0}),f?.remove?.(),g=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;s<t;s++)n[s-1]=arguments[s];return x("exec",[e,...n])},destroy:()=>v.settled?x("destroy").then(C):g?Promise.reject(m):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:o={},config:r={},headless:i,import:a,lite:l,view:d,...c}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let u="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==d?r.view=d:e.searchParams.set("view",d)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(r))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{h.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return a},a:function(){return i}});var s=n(7294);let o={},r=s.createContext(o);function i(e){let t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/a9c0dfea.873c8c04.js b/docs/assets/js/a9c0dfea.873c8c04.js new file mode 100644 index 0000000..a28d46b --- /dev/null +++ b/docs/assets/js/a9c0dfea.873c8c04.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4528"],{3002:function(e,s,t){t.r(s),t.d(s,{default:()=>p,frontMatter:()=>d,metadata:()=>n,assets:()=>c,toc:()=>a,contentTitle:()=>o});var n=JSON.parse('{"id":"api/internal/type-aliases/CssPresetId","title":"Type Alias: CssPresetId","description":"CssPresetId: \\"\\" \\\\| \\"normalize.css\\" \\\\| \\"reset-css\\"","source":"@site/docs/api/internal/type-aliases/CssPresetId.md","sourceDirName":"api/internal/type-aliases","slug":"/api/internal/type-aliases/CssPresetId","permalink":"/docs/api/internal/type-aliases/CssPresetId","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/type-aliases/CssPresetId.md","tags":[],"version":"current","frontMatter":{}}'),r=t("5893"),i=t("65");let d={},o="Type Alias: CssPresetId",c={},a=[{value:"Defined in",id:"defined-in",level:2}];function l(e){let s={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",strong:"strong",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.header,{children:(0,r.jsx)(s.h1,{id:"type-alias-csspresetid",children:"Type Alias: CssPresetId"})}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"CssPresetId"}),": ",(0,r.jsx)(s.code,{children:'""'})," | ",(0,r.jsx)(s.code,{children:'"normalize.css"'})," | ",(0,r.jsx)(s.code,{children:'"reset-css"'})]}),"\n"]}),"\n",(0,r.jsx)(s.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1269",children:"models.ts:1269"})})]})}function p(e={}){let{wrapper:s}={...(0,i.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},65:function(e,s,t){t.d(s,{Z:function(){return o},a:function(){return d}});var n=t(7294);let r={},i=n.createContext(r);function d(e){let s=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:d(e.components),n.createElement(i.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/aa19e785.ae8914c1.js b/docs/assets/js/aa19e785.ae8914c1.js new file mode 100644 index 0000000..549fa5f --- /dev/null +++ b/docs/assets/js/aa19e785.ae8914c1.js @@ -0,0 +1,59 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6465"],{1795:function(e,t,s){s.r(t),s.d(t,{default:()=>u,frontMatter:()=>a,metadata:()=>n,assets:()=>d,reactSDKDemo:()=>c,toc:()=>h,contentTitle:()=>l});var n=JSON.parse('{"id":"sdk/react","title":"React SDK","description":"The react SDK is a thin wrapper around the JavaScript SDK to provide an easy to use react component, yet retaining the full power, by having access to the SDK methods.","source":"@site/docs/sdk/react.mdx","sourceDirName":"sdk","slug":"/sdk/react","permalink":"/docs/sdk/react","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/sdk/react.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"JS/TS SDK","permalink":"/docs/sdk/js-ts"},"next":{"title":"Vue SDK","permalink":"/docs/sdk/vue"}}'),o=s("5893"),r=s("65"),i=s("3365");let a={},l="React SDK",d={},c={jsx:`import LiveCodes from "livecodes/react"; + +const App = () => { + const params = { + html: "<h1>Hello World!</h1>", + css: "h1 {color: blue;}", + js: 'console.log("Hello, World!")', + console: "open", + }; + + return <LiveCodes params={params} />; +}; + +export default App; +`},h=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2},{value:"TypeScript Support",id:"typescript-support",level:3},{value:"Props",id:"props",level:3},{value:"Demo",id:"demo",level:2},{value:"Related",id:"related",level:2}];function p(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"react-sdk",children:"React SDK"})}),"\n","\n",(0,o.jsxs)(t.p,{children:["The react SDK is a thin wrapper around the ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts",children:"JavaScript SDK"})," to provide an easy to use react component, yet retaining the full power, by having access to the ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#sdk-methods",children:"SDK methods"}),"."]}),"\n",(0,o.jsxs)(t.p,{children:["It has a very simple ",(0,o.jsx)(t.a,{href:"https://github.com/live-codes/livecodes/blob/develop/src/sdk/react.tsx",children:"implementation"})," which you can easily modify in case you need."]}),"\n",(0,o.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,o.jsxs)(t.p,{children:["Please refer to the ",(0,o.jsx)(t.a,{href:"/docs/sdk/#installation",children:"SDK installation"})," section."]}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsxs)(t.p,{children:["The react component is provided as the default export from ",(0,o.jsx)(t.code,{children:"livecodes/react"}),"."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",metastring:'title="JSX"',children:"import LiveCodes from 'livecodes/react';\n\nexport const Playground = () => <LiveCodes />;\n"})}),"\n",(0,o.jsx)(t.h3,{id:"typescript-support",children:"TypeScript Support"}),"\n",(0,o.jsxs)(t.p,{children:["Prop types are exported as ",(0,o.jsx)(t.code,{children:"Props"})," from ",(0,o.jsx)(t.code,{children:"livecodes/react"}),"."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="TSX"',children:"import LiveCodes, { type Props } from 'livecodes/react';\n\nconst options: Props = {\n // embed options\n};\nexport const Playground = () => <LiveCodes {...options} />;\n"})}),"\n",(0,o.jsxs)(t.p,{children:["TypeScript types are ",(0,o.jsx)(t.a,{href:"/docs/api/globals",children:"documented here"}),"."]}),"\n",(0,o.jsx)(t.h3,{id:"props",children:"Props"}),"\n",(0,o.jsxs)(t.p,{children:["All ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#embed-options",children:"embed options"})," are available as props with the corresponding types."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",metastring:'title="JSX"',children:"import LiveCodes from 'livecodes/react';\n\nconst config = {\n markup: {\n language: 'markdown',\n content: '# Hello World!',\n },\n};\nexport const Playground = () => <LiveCodes config={config} view=\"result\" />;\n"})}),"\n",(0,o.jsx)(t.p,{children:"In addition, the following props are also available:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"className"})}),"\n",(0,o.jsxs)(t.p,{children:["Type: ",(0,o.jsx)(t.code,{children:"string"}),"."]}),"\n",(0,o.jsx)(t.p,{children:"Class name(s) to add to playground container element."}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",metastring:'title="JSX"',children:"import LiveCodes from 'livecodes/react';\n\nexport const Playground = () => <LiveCodes className=\"centered\" />;\n"})}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"height"})}),"\n",(0,o.jsxs)(t.p,{children:["Type: ",(0,o.jsx)(t.code,{children:"string"}),"."]}),"\n",(0,o.jsx)(t.p,{children:"Sets the height of playground container element."}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",metastring:'title="JSX"',children:"import LiveCodes from 'livecodes/react';\n\nexport const Playground = () => <LiveCodes height=\"500px\" />;\n"})}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"style"})}),"\n",(0,o.jsxs)(t.p,{children:["Type: ",(0,o.jsx)(t.code,{children:"Record<string, string>"}),"."]}),"\n",(0,o.jsxs)(t.p,{children:["Defines styles to add to playground container element. Styles set here override the ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#default-styles",children:"default styles"}),"."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="JSX"',children:"import LiveCodes from 'livecodes/react';\n\nconst style = {\n margin: 'auto',\n width: '80%',\n};\nexport const Playground = () => <LiveCodes style={style} />;\n"})}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"sdkReady"})}),"\n",(0,o.jsxs)(t.p,{children:["Type: ",(0,o.jsx)(t.code,{children:"(sdk: Playground) => void"}),"."]}),"\n",(0,o.jsxs)(t.p,{children:["A callback function, that is provided with an instance of the ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts",children:"JavaScript SDK"})," representing the current playground. This allows making use of full capability of the SDK by calling ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#sdk-methods",children:"SDK methods"}),"."]}),"\n",(0,o.jsx)(t.p,{children:"Example:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="TSX"',children:"import { useState } from 'react';\nimport LiveCodes from 'livecodes/react';\nimport type { Playground } from 'livecodes';\n\nexport const App = () => {\n const [playground, setPlayground] = useState<Playground>();\n\n const onReady = (sdk: Playground) => {\n setPlayground(sdk);\n };\n\n const run = async () => {\n await playground?.run();\n };\n\n return (\n <>\n <LiveCodes sdkReady={onReady} />\n <button onClick={run}>Run</button>\n </>\n );\n};\n"})}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(t.h2,{id:"demo",children:"Demo"}),"\n","\n",(0,o.jsx)(i.Z,{params:c,height:"80vh"}),"\n",(0,o.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/sdk/#installation",children:"SDK Installation"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts",children:"JS/TS SDK"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/sdk/vue",children:"Vue SDK"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/sdk/svelte",children:"Using SDK in Svelte"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"/docs/features/embeds",children:"Embedded Playgrounds"})}),"\n"]})]})}function u(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),o=s("4200"),r=s("7294"),i=s("8294");function a(e){let t=(0,r.useRef)(null),[s,o]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[d,c]=(0,r.useState)(e.height),[h,p]=(0,r.useState)(),[u,m]=(0,r.useState)(JSON.stringify(e.config||"")),[g,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:r,sdkReady:a,config:d,...y}=e;if(o(s||""),l(n||{}),c(r),h&&g===JSON.stringify(y)){if(u===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(y)),h?.destroy(),(0,i.T)(t.current,{config:d,...y}).then(e=>{p(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":d})}var l=s("1858"),d=s("3262"),c=s("1705"),h=s("7645"),p=s("8168"),u=s("8228"),m=s("5050");function g(e){let[t,s]=(0,r.useState)(e.js),[o,i]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[g,f]=(0,r.useState)(e.vue),[y,v]=(0,r.useState)(e.svelte),x="3.7rem",[j,b]=(0,r.useState)(!0),[w,S]=(0,r.useState)(x),k=(0,r.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${k.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${k.current.offsetHeight}px + ${x})`)},255)};return(0,r.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(o,"ts")),l(e(a,"jsx")),f(e(g,"html")),v(e(y,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${u.Z.details}`,"data-collapsed":j,style:{height:j?x:w,overflow:"hidden",willChange:"height",transition:`height ${j?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!j),C()},children:"show code"}),(0,n.jsx)("div",{ref:k,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(p.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"ts",children:o})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"jsx",children:a})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,n.jsx)(c.Z,{language:"html",children:y})})]})})})]})}function f(e){let{className:t,style:s,showCode:r,height:i,...d}=e,{colorMode:c}=(0,o.I)(),h=e=>JSON.stringify(e,null,2),p=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),u=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),f=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${h(d)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,y=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${h(d)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:p,ts:u,react:m,vue:f,svelte:y})]})}},8294:function(e,t,s){s.d(t,{T:function(){return o},r:function(){return r}});var n=s(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:o="lazy",view:i}=t,a=n||"headless"===i,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)C(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(r(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":o);let p=globalThis.process;c.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(u[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",r=l.querySelector(`iframe.${n}`),i=r||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===o?"eager":"lazy"),a?C(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),i.onload=()=>{e(i)},i.src=c.href,r||l.appendChild(i)}),y=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>m?Promise.reject(g):new Promise(async e=>{y.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await y,e()}),x=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await v();let o=P();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===o&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:o,args:t},h)}),j={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return b.includes(e)?(x("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!j[t])return;let s=e.data?.payload;j[t]?.forEach(e=>{e(s)})});let k=()=>{Object.values(j).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return x("exec",[e,...s])},destroy:()=>y.settled?x("destroy").then(k):m?Promise.reject(g):(k(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:o={},config:r={},headless:i,import:a,lite:l,view:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let p="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==d?r.view=d:e.searchParams.set("view",d)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(r))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),p&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return i}});var n=s(7294);let o={},r=n.createContext(o);function i(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/aba21aa0.4bcc705f.js b/docs/assets/js/aba21aa0.4bcc705f.js new file mode 100644 index 0000000..b266cc1 --- /dev/null +++ b/docs/assets/js/aba21aa0.4bcc705f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5112"],{2418:function(s){s.exports=JSON.parse('{"name":"docusaurus-plugin-content-docs","id":"default"}')}}]); \ No newline at end of file diff --git a/docs/assets/js/ac29ff77.8efd8143.js b/docs/assets/js/ac29ff77.8efd8143.js new file mode 100644 index 0000000..1549fb6 --- /dev/null +++ b/docs/assets/js/ac29ff77.8efd8143.js @@ -0,0 +1 @@ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9797"],{3651:function(e,t,s){"use strict";s.r(t),s.d(t,{default:()=>h,frontMatter:()=>a,metadata:()=>r,assets:()=>l,toc:()=>d,contentTitle:()=>c});var r=JSON.parse('{"id":"features/assets","title":"Assets","description":"Adding local assets (e.g. images, fonts, stylesheets, scripts) that are not hosted online is such a common need that a UI was developed to allow easily adding them.","source":"@site/docs/features/assets.mdx","sourceDirName":"features","slug":"/features/assets","permalink":"/docs/features/assets","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/assets.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Default Template/Language","permalink":"/docs/features/default-template-language"},"next":{"title":"Code Snippets","permalink":"/docs/features/snippets"}}'),n=s("5893"),o=s("65"),i=s("8500");let a={},c="Assets",l={},d=[];function u(e){let t={a:"a",code:"code",h1:"h1",header:"header",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"assets",children:"Assets"})}),"\n",(0,n.jsx)(t.p,{children:"Adding local assets (e.g. images, fonts, stylesheets, scripts) that are not hosted online is such a common need that a UI was developed to allow easily adding them."}),"\n",(0,n.jsx)(t.p,{children:"The assets are saved locally on the user's device and are available across projects (i.e the same image can be used in different projects without having to add it multiple times)."}),"\n",(0,n.jsxs)(t.p,{children:["In addition, assets are supported in ",(0,n.jsx)(t.a,{href:"/docs/features/sync",children:"sync"}),", ",(0,n.jsx)(t.a,{href:"/docs/features/backup-restore#backup",children:"backup"})," and ",(0,n.jsx)(t.a,{href:"/docs/features/backup-restore#restore",children:"restore"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"Assets"})," screen can be accessed from Settings menu \u2192 Assets"]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Assets",src:s(9773).Z+"",width:"2240",height:"1400"})}),"\n","\n",(0,n.jsx)(i.Z,{params:{screen:"assets"},linkText:"direct link"}),"\n",(0,n.jsx)(t.p,{children:"Assets are either:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:["Encoded as ",(0,n.jsx)(t.a,{href:"/docs/features/data-urls",children:"data URLs"}),"."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:["Uploaded to a ",(0,n.jsx)(t.a,{href:"https://pages.github.com/",children:"GitHub Pages"}),". This requires login with a ",(0,n.jsx)(t.a,{href:"/docs/features/github-integration",children:"GitHub account"})," (allowing access to repos). A ",(0,n.jsx)(t.strong,{children:"public"})," repo called ",(0,n.jsx)(t.code,{children:"livecodes-assets"})," is created if not present. The assets are pushed to ",(0,n.jsx)(t.code,{children:"gh-pages"})," branch. They can then be accessed by URLs like:"]}),"\n",(0,n.jsx)(t.p,{children:"https://{user}.github.io/livecodes-assets/assets/..."}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"When an asset item is clicked, the URL is copied to clipboard. The URL can then be used in projects."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"Assets",src:s(9061).Z+"",width:"2240",height:"1400"})})]})}function h(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},9773:function(e,t,s){"use strict";s.d(t,{Z:function(){return r}});let r=s.p+"assets/images/assets-1-bc942edb19a81002953065dc3fa29544.jpg"},9061:function(e,t,s){"use strict";s.d(t,{Z:function(){return r}});let r=s.p+"assets/images/assets-2-8312924d50bae171b9875269d3945b7b.jpg"},7728:function(e,t,s){e=s.nmd(e);var r=function(){var e=String.fromCharCode,t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",s="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",r={};function n(e,t){if(!r[e]){r[e]={};for(var s=0;s<e.length;s++)r[e][e.charAt(s)]=s}return r[e][t]}var o={compressToBase64:function(e){if(null==e)return"";var s=o._compress(e,6,function(e){return t.charAt(e)});switch(s.length%4){default:case 0:return s;case 1:return s+"===";case 2:return s+"==";case 3:return s+"="}},decompressFromBase64:function(e){return null==e?"":""==e?null:o._decompress(e.length,32,function(s){return n(t,e.charAt(s))})},compressToUTF16:function(t){return null==t?"":o._compress(t,15,function(t){return e(t+32)})+" "},decompressFromUTF16:function(e){return null==e?"":""==e?null:o._decompress(e.length,16384,function(t){return e.charCodeAt(t)-32})},compressToUint8Array:function(e){for(var t=o.compress(e),s=new Uint8Array(2*t.length),r=0,n=t.length;r<n;r++){var i=t.charCodeAt(r);s[2*r]=i>>>8,s[2*r+1]=i%256}return s},decompressFromUint8Array:function(t){if(null==t)return o.decompress(t);for(var s=Array(t.length/2),r=0,n=s.length;r<n;r++)s[r]=256*t[2*r]+t[2*r+1];var i=[];return s.forEach(function(t){i.push(e(t))}),o.decompress(i.join(""))},compressToEncodedURIComponent:function(e){return null==e?"":o._compress(e,6,function(e){return s.charAt(e)})},decompressFromEncodedURIComponent:function(e){return null==e?"":""==e?null:(e=e.replace(/ /g,"+"),o._decompress(e.length,32,function(t){return n(s,e.charAt(t))}))},compress:function(t){return o._compress(t,16,function(t){return e(t)})},_compress:function(e,t,s){if(null==e)return"";var r,n,o,i={},a={},c="",l="",d="",u=2,h=3,p=2,f=[],m=0,g=0;for(o=0;o<e.length;o+=1)if(c=e.charAt(o),Object.prototype.hasOwnProperty.call(i,c)||(i[c]=h++,a[c]=!0),l=d+c,Object.prototype.hasOwnProperty.call(i,l))d=l;else{if(Object.prototype.hasOwnProperty.call(a,d)){if(256>d.charCodeAt(0)){for(r=0;r<p;r++)m<<=1,g==t-1?(g=0,f.push(s(m)),m=0):g++;for(r=0,n=d.charCodeAt(0);r<8;r++)m=m<<1|1&n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n>>=1}else{for(r=0,n=1;r<p;r++)m=m<<1|n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n=0;for(r=0,n=d.charCodeAt(0);r<16;r++)m=m<<1|1&n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n>>=1}0==--u&&(u=Math.pow(2,p),p++),delete a[d]}else for(r=0,n=i[d];r<p;r++)m=m<<1|1&n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n>>=1;0==--u&&(u=Math.pow(2,p),p++),i[l]=h++,d=String(c)}if(""!==d){if(Object.prototype.hasOwnProperty.call(a,d)){if(256>d.charCodeAt(0)){for(r=0;r<p;r++)m<<=1,g==t-1?(g=0,f.push(s(m)),m=0):g++;for(r=0,n=d.charCodeAt(0);r<8;r++)m=m<<1|1&n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n>>=1}else{for(r=0,n=1;r<p;r++)m=m<<1|n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n=0;for(r=0,n=d.charCodeAt(0);r<16;r++)m=m<<1|1&n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n>>=1}0==--u&&(u=Math.pow(2,p),p++),delete a[d]}else for(r=0,n=i[d];r<p;r++)m=m<<1|1&n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n>>=1;0==--u&&(u=Math.pow(2,p),p++)}for(r=0,n=2;r<p;r++)m=m<<1|1&n,g==t-1?(g=0,f.push(s(m)),m=0):g++,n>>=1;for(;;){if(m<<=1,g==t-1){f.push(s(m));break}g++}return f.join("")},decompress:function(e){return null==e?"":""==e?null:o._decompress(e.length,32768,function(t){return e.charCodeAt(t)})},_decompress:function(t,s,r){var n,o,i,a,c,l,d,u=[],h=4,p=4,f=3,m="",g=[],y={val:r(0),position:s,index:1};for(n=0;n<3;n+=1)u[n]=n;for(i=0,c=4,l=1;l!=c;)a=y.val&y.position,y.position>>=1,0==y.position&&(y.position=s,y.val=r(y.index++)),i|=(a>0?1:0)*l,l<<=1;switch(i){case 0:for(i=0,c=256,l=1;l!=c;)a=y.val&y.position,y.position>>=1,0==y.position&&(y.position=s,y.val=r(y.index++)),i|=(a>0?1:0)*l,l<<=1;d=e(i);break;case 1:for(i=0,c=65536,l=1;l!=c;)a=y.val&y.position,y.position>>=1,0==y.position&&(y.position=s,y.val=r(y.index++)),i|=(a>0?1:0)*l,l<<=1;d=e(i);break;case 2:return""}for(u[3]=d,o=d,g.push(d);;){if(y.index>t)return"";for(i=0,c=Math.pow(2,f),l=1;l!=c;)a=y.val&y.position,y.position>>=1,0==y.position&&(y.position=s,y.val=r(y.index++)),i|=(a>0?1:0)*l,l<<=1;switch(d=i){case 0:for(i=0,c=256,l=1;l!=c;)a=y.val&y.position,y.position>>=1,0==y.position&&(y.position=s,y.val=r(y.index++)),i|=(a>0?1:0)*l,l<<=1;u[p++]=e(i),d=p-1,h--;break;case 1:for(i=0,c=65536,l=1;l!=c;)a=y.val&y.position,y.position>>=1,0==y.position&&(y.position=s,y.val=r(y.index++)),i|=(a>0?1:0)*l,l<<=1;u[p++]=e(i),d=p-1,h--;break;case 2:return g.join("")}if(0==h&&(h=Math.pow(2,f),f++),u[d])m=u[d];else{if(d!==p)return null;m=o+o.charAt(0)}g.push(m),u[p++]=o+m.charAt(0),h--,o=m,0==h&&(h=Math.pow(2,f),f++)}}};return o}();"function"==typeof define&&define.amd?define(function(){return r}):null!=e&&(e.exports=r)},8500:function(e,t,s){"use strict";s.d(t,{Z:()=>l});var r=s("5893");s("7294");var n=s("6735");function o(e){let{children:t,fallback:s}=e;return(0,n.Z)()?(0,r.jsx)(r.Fragment,{children:t?.()}):s??null}var i=s("1705"),a=s("8294"),c=s("1858");function l(e){let{params:t,config:s,code:n,language:l="js",codeTitle:d="",showLineNumbers:u=!1,formatCode:h=!0,linkText:p="Run in LiveCodes",style:f={},className:m=""}=e,g=(0,a.r)({appUrl:c.G,params:t,config:s});return(0,r.jsxs)("div",{style:{marginBottom:"30px",...f},className:m,children:[n&&(0,r.jsx)(o,{children:()=>(0,r.jsx)(i.Z,{language:l,title:d,showLineNumbers:u,children:h?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(n,l):n})}),(0,r.jsxs)("a",{href:g,target:"_blank",rel:"noreferrer",children:[p,(0,r.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,r.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,s){"use strict";s.d(t,{T:function(){return n},r:function(){return o}});var r=s(7728);async function n(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:r,loading:n="lazy",view:i}=t,a=r||"headless"===i,c=null,l=null;if("string"==typeof e)c=document.querySelector(e);else if(e instanceof HTMLElement)c=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!c){if(a)k(c=document.createElement("div")),document.body.appendChild(c);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(o(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":n);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let f=!1,m="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!c)return;let t=c.dataset.height||c.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";c.style.height=e}"false"===c.dataset.defaultStyles||a||(c.style.backgroundColor||="#fff",c.style.border||="1px solid black",c.style.borderRadius||="8px",c.style.boxSizing||="border-box",c.style.padding||="0",c.style.width||="100%",c.style.height||=c.style.height||"300px",c.style.minHeight="200px",c.style.flexGrow="1",c.style.overflow||="hidden",c.style.resize||="vertical");let r="livecodes",o=c.querySelector(`iframe.${r}`),i=o||document.createElement("iframe");i.classList.add(r),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===n?"eager":"lazy"),a?k(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=c.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),l=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!l||l<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),i.onload=()=>{e(i)},i.src=d.href,o||c.appendChild(i)}),y=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>f?Promise.reject(m):new Promise(async e=>{y.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},u),await y,e()}),w=(e,t)=>new Promise(async(s,r)=>{if(f)return r(m);await v();let n=E();addEventListener("message",function t(o){if(o.source===g.contentWindow&&o.origin===u&&o.data?.type==="livecodes-api-response"&&o.data?.id===n&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?r(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:n,args:t},u)}),b={},x=["load","ready","code","console","tests","destroy"],j=(e,t)=>{if(f)throw Error(m);return x.includes(e)?(w("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&w("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},A=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=A(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==u||!t||!b[t])return;let s=e.data?.payload;b[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(b).forEach(e=>{e.length=0}),g?.remove?.(),f=!0};function k(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(c))})},{rootMargin:"150px"}).observe(c);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>w("run"),format:e=>w("format",[e]),getShareUrl:e=>w("getShareUrl",[e]),getConfig:e=>w("getConfig",[e]),setConfig:e=>w("setConfig",[e]),getCode:()=>w("getCode"),show:(e,t)=>w("show",[e,t]),runTests:()=>w("runTests"),onChange:e=>j("code",e),watch:j,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),r=1;r<t;r++)s[r-1]=arguments[r];return w("exec",[e,...s])},destroy:()=>y.settled?w("destroy").then(C):f?Promise.reject(m):(C(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:n={},config:o={},headless:i,import:a,lite:c,view:l,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,r]=t;void 0!==r&&e.searchParams.set(s,String(r))});let h="headless"===t.view||i;if(c&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),l&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==l?o.view=l:e.searchParams.set("view",l)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),u.set("config","code/"+(0,r.compressToEncodedURIComponent)(JSON.stringify(o))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{u.set("params",(0,r.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(n[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){"use strict";s.d(t,{Z:function(){return a},a:function(){return i}});var r=s(7294);let n={},o=r.createContext(n);function i(e){let t=r.useContext(o);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/acbea6ed.856d4fca.js b/docs/assets/js/acbea6ed.856d4fca.js new file mode 100644 index 0000000..a4444e7 --- /dev/null +++ b/docs/assets/js/acbea6ed.856d4fca.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6717"],{3270:function(e,n,s){s.r(n),s.d(n,{default:()=>h,frontMatter:()=>a,metadata:()=>t,assets:()=>d,toc:()=>c,contentTitle:()=>l});var t=JSON.parse('{"id":"languages/tsx","title":"TSX","description":"TSX is a syntax that allows using TypeScript in JSX.","source":"@site/docs/languages/tsx.mdx","sourceDirName":"languages","slug":"/languages/tsx","permalink":"/docs/languages/tsx","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/tsx.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Token CSS","permalink":"/docs/languages/tokencss"},"next":{"title":"Twig","permalink":"/docs/languages/twig"}}'),i=s("5893"),r=s("65");let a={},l="TSX",d={},c=[{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Links",id:"links",level:2}];function o(e){let n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"tsx",children:"TSX"})}),"\n",(0,i.jsxs)(n.p,{children:["TSX is a syntax that allows using TypeScript in JSX.\n",(0,i.jsx)(n.a,{href:"https://react.dev/learn/writing-markup-with-jsx",children:"JSX"})," is a syntax extension for JavaScript that allows writing HTML-like markup inside JavaScript.\nIt has been popularized by ",(0,i.jsx)(n.a,{href:"https://react.dev/",children:"React"}),", and then adopted by many other libraries/frameworks."]}),"\n",(0,i.jsxs)(n.p,{children:["By default, when running JSX/TSX in LiveCodes, ",(0,i.jsx)(n.a,{href:"https://react.dev/",children:"React"})," runtime is used.\nHowever, other libraries like ",(0,i.jsx)(n.a,{href:"https://preactjs.com/",children:"Preact"}),", ",(0,i.jsx)(n.a,{href:"https://nanojsx.io/",children:"nano JSX"})," and others can be used as well (see ",(0,i.jsx)(n.a,{href:"/docs/languages/jsx#custom-jsx-runtimes",children:"Custom JSX Runtimes"}),")."]}),"\n",(0,i.jsxs)(n.p,{children:["Please note that ",(0,i.jsx)(n.a,{href:"https://react.dev/learn/react-compiler",children:"React compiler"})," is also available in LiveCodes and is ",(0,i.jsx)(n.a,{href:"/docs/languages/react",children:"documented here"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsxs)(n.p,{children:["For usage and examples, see documentation for ",(0,i.jsx)(n.a,{href:"/docs/languages/jsx",children:"JSX"})," and ",(0,i.jsx)(n.a,{href:"/docs/languages/typescript",children:"TypeScript"})," support in LiveCodes."]}),"\n",(0,i.jsx)(n.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(n.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.code,{children:"tsx"})}),"\n",(0,i.jsx)(n.h3,{id:"extension",children:"Extension"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.code,{children:".tsx"})}),"\n",(0,i.jsx)(n.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.code,{children:"script"})}),"\n",(0,i.jsx)(n.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"/docs/languages/typescript",children:"TypeScript compiler"})}),"\n",(0,i.jsx)(n.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(n.p,{children:["Using ",(0,i.jsx)(n.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,i.jsx)(n.code,{children:"tsx"})," are passed to the TypeScript compiler as ",(0,i.jsx)(n.a,{href:"https://www.typescriptlang.org/tsconfig#compilerOptions",children:"compiler options"})," while compiling TSX.\nIn addition, the option ",(0,i.jsx)(n.code,{children:"disableAutoRender"})," can be set to ",(0,i.jsx)(n.code,{children:"true"})," to disable ",(0,i.jsx)(n.a,{href:"./jsx#auto-rendering",children:"auto-rendering"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Example:"})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "tsx": {\n "disableAutoRender": true,\n "jsxFactory": "h",\n "jsxFragmentFactory": "Fragment"\n }\n}\n'})}),"\n",(0,i.jsx)(n.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://react.dev/",children:"React"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://react.dev/learn/writing-markup-with-jsx",children:"JSX"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"https://www.typescriptlang.org/",children:"TypeScript"})}),"\n"]})]})}function h(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(o,{...e})}):o(e)}},65:function(e,n,s){s.d(n,{Z:function(){return l},a:function(){return a}});var t=s(7294);let i={},r=t.createContext(i);function a(e){let n=t.useContext(r);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/ae571911.ad49aa45.js b/docs/assets/js/ae571911.ad49aa45.js new file mode 100644 index 0000000..d9fa4e4 --- /dev/null +++ b/docs/assets/js/ae571911.ad49aa45.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4546"],{3578:function(e,n,s){s.r(n),s.d(n,{default:()=>a,frontMatter:()=>c,metadata:()=>d,assets:()=>r,toc:()=>o,contentTitle:()=>t});var d=JSON.parse('{"id":"api/interfaces/Code","title":"Interface: Code","description":"An object that contains the language, content and compiled code for each of the 3 code editors","source":"@site/docs/api/interfaces/Code.md","sourceDirName":"api/interfaces","slug":"/api/interfaces/Code","permalink":"/docs/api/interfaces/Code","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/interfaces/Code.md","tags":[],"version":"current","frontMatter":{}}'),i=s("5893"),l=s("65");let c={},t="Interface: Code",r={},o=[{value:"Properties",id:"properties",level:2},{value:"markup",id:"markup",level:3},{value:"compiled",id:"compiled",level:4},{value:"content",id:"content",level:4},{value:"language",id:"language",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"result",id:"result",level:3},{value:"Defined in",id:"defined-in-1",level:4},{value:"script",id:"script",level:3},{value:"compiled",id:"compiled-1",level:4},{value:"content",id:"content-1",level:4},{value:"language",id:"language-1",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"style",id:"style",level:3},{value:"compiled",id:"compiled-2",level:4},{value:"content",id:"content-2",level:4},{value:"language",id:"language-2",level:4},{value:"Defined in",id:"defined-in-3",level:4}];function h(e){let n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",hr:"hr",p:"p",strong:"strong",...(0,l.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"interface-code",children:"Interface: Code"})}),"\n",(0,i.jsxs)(n.p,{children:["An object that contains the language, content and compiled code for each of the 3 ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/features/projects",children:"code editors"}),"\nand the ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/features/result",children:"result page"})," HTML."]}),"\n",(0,i.jsxs)(n.p,{children:["See ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/api/interfaces/Code",children:"docs"})," for details."]}),"\n",(0,i.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,i.jsx)(n.h3,{id:"markup",children:"markup"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"markup"}),": ",(0,i.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"compiled",children:"compiled"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"compiled"}),": ",(0,i.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"content",children:"content"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"content"}),": ",(0,i.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"language",children:"language"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"language"}),": ",(0,i.jsx)(n.a,{href:"/docs/api/type-aliases/Language",children:(0,i.jsx)(n.code,{children:"Language"})})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1908",children:"models.ts:1908"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"result",children:"result"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"result"}),": ",(0,i.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-1",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1923",children:"models.ts:1923"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"script",children:"script"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"script"}),": ",(0,i.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"compiled-1",children:"compiled"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"compiled"}),": ",(0,i.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"content-1",children:"content"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"content"}),": ",(0,i.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"language-1",children:"language"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"language"}),": ",(0,i.jsx)(n.a,{href:"/docs/api/type-aliases/Language",children:(0,i.jsx)(n.code,{children:"Language"})})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-2",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1918",children:"models.ts:1918"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"style",children:"style"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"style"}),": ",(0,i.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"compiled-2",children:"compiled"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"compiled"}),": ",(0,i.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"content-2",children:"content"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"content"}),": ",(0,i.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"language-2",children:"language"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"language"}),": ",(0,i.jsx)(n.a,{href:"/docs/api/type-aliases/Language",children:(0,i.jsx)(n.code,{children:"Language"})})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-3",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1913",children:"models.ts:1913"})})]})}function a(e={}){let{wrapper:n}={...(0,l.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},65:function(e,n,s){s.d(n,{Z:function(){return t},a:function(){return c}});var d=s(7294);let i={},l=d.createContext(i);function c(e){let n=d.useContext(l);return d.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function t(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:c(e.components),d.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/af2ea1d1.8d37773d.js b/docs/assets/js/af2ea1d1.8d37773d.js new file mode 100644 index 0000000..18c7a9a --- /dev/null +++ b/docs/assets/js/af2ea1d1.8d37773d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8541"],{4683:function(e,t,r){r.r(t),r.d(t,{default:()=>d,frontMatter:()=>s,metadata:()=>n,assets:()=>u,toc:()=>i,contentTitle:()=>a});var n=JSON.parse('{"id":"features/welcome","title":"Welcome Screen","description":"","source":"@site/docs/features/welcome.mdx","sourceDirName":"features","slug":"/features/welcome","permalink":"/docs/features/welcome","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/welcome.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Share","permalink":"/docs/features/share"},"next":{"title":"Recover Unsaved","permalink":"/docs/features/recover"}}'),o=r("5893"),c=r("65");let s={},a="Welcome Screen",u={},i=[];function l(e){let t={h1:"h1",header:"header",...(0,c.a)(),...e.components};return(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"welcome-screen",children:"Welcome Screen"})})}function d(e={}){let{wrapper:t}={...(0,c.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},65:function(e,t,r){r.d(t,{Z:function(){return a},a:function(){return s}});var n=r(7294);let o={},c=n.createContext(o);function s(e){let t=n.useContext(c);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),n.createElement(c.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/afc1c92d.12f44d8c.js b/docs/assets/js/afc1c92d.12f44d8c.js new file mode 100644 index 0000000..3c77d55 --- /dev/null +++ b/docs/assets/js/afc1c92d.12f44d8c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8717"],{6115:function(e,s,n){n.r(s),n.d(s,{default:()=>h,frontMatter:()=>r,metadata:()=>t,assets:()=>d,toc:()=>l,contentTitle:()=>c});var t=JSON.parse('{"id":"license","title":"License","description":"LiveCodes is released under the permissive MIT License \xa9 Hatem Hosny.","source":"@site/docs/license.mdx","sourceDirName":".","slug":"/license","permalink":"/docs/license","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/license.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Credits","permalink":"/docs/credits"},"next":{"title":"Sponsor","permalink":"/docs/sponsor"}}'),i=n("5893"),o=n("65");let r={},c="License",d={},l=[];function a(e){let s={a:"a",h1:"h1",header:"header",p:"p",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.header,{children:(0,i.jsx)(s.h1,{id:"license",children:"License"})}),"\n",(0,i.jsxs)(s.p,{children:["LiveCodes is released under the permissive ",(0,i.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/develop/LICENSE",children:"MIT License"})," \xa9 ",(0,i.jsx)(s.a,{href:"https://github.com/hatemhosny",children:"Hatem Hosny"}),"."]}),"\n",(0,i.jsxs)(s.p,{children:["Third party packages used in LiveCodes and their licenses are ",(0,i.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/develop/vendor-licenses.mdx",children:"listed here"}),"."]}),"\n",(0,i.jsxs)(s.p,{children:["The source code is available on ",(0,i.jsx)(s.a,{href:"https://github.com/live-codes/livecodes",children:"GitHub"}),"."]}),"\n",(0,i.jsxs)(s.p,{children:["Please consider ",(0,i.jsx)(s.a,{href:"/docs/sponsor",children:"sponsoring LiveCodes"})," to support its maintenance and continued development."]})]})}function h(e={}){let{wrapper:s}={...(0,o.a)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},65:function(e,s,n){n.d(s,{Z:function(){return c},a:function(){return r}});var t=n(7294);let i={},o=t.createContext(i);function r(e){let s=t.useContext(o);return t.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(o.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/b1517861.5f845eb4.js b/docs/assets/js/b1517861.5f845eb4.js new file mode 100644 index 0000000..fd58477 --- /dev/null +++ b/docs/assets/js/b1517861.5f845eb4.js @@ -0,0 +1,54 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1310"],{2018:function(e,t,s){s.r(t),s.d(t,{default:()=>p,frontMatter:()=>l,metadata:()=>r,assets:()=>c,params:()=>d,toc:()=>u,contentTitle:()=>a});var r=JSON.parse('{"id":"languages/clojurescript","title":"ClojureScript","description":"ClojureScript is a robust, practical, and fast programming language with a set of useful features that together form a simple, coherent, and powerful tool.","source":"@site/docs/languages/clojurescript.mdx","sourceDirName":"languages","slug":"/languages/clojurescript","permalink":"/docs/languages/clojurescript","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/clojurescript.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Clio","permalink":"/docs/languages/clio"},"next":{"title":"CoffeeScript","permalink":"/docs/languages/coffeescript"}}'),n=s("5893"),o=s("65"),i=s("3365");let l={},a="ClojureScript",c={},d={cljs:`(ns demo + ;; you can use npm modules + (:require ["canvas-confetti$default" :as confetti])) + +(let [el (js/document.getElementById "test")] + (.addEventListener el "click" + (fn [] + (confetti) + (println "test")))) +`,html:'<button id="test">test</button>',console:"open"},u=[{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"clojurescript",children:"ClojureScript"})}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.a,{href:"https://clojurescript.org/",children:"ClojureScript"})," is a robust, practical, and fast programming language with a set of useful features that together form a simple, coherent, and powerful tool."]}),"\n",(0,n.jsxs)(t.p,{children:["ClojureScript is a compiler for ",(0,n.jsx)(t.a,{href:"https://clojure.org/",children:"Clojure"})," that targets\nJavaScript. ",(0,n.jsx)("br",{}),"In LiveCodes, it runs in the browser using\n",(0,n.jsx)(t.a,{href:"https://github.com/squint-cljs/cherry",children:"Cherry"}),"."]}),"\n",(0,n.jsx)(t.admonition,{title:"Note",type:"info",children:(0,n.jsxs)(t.p,{children:["Lisp language family supported in LiveCodes includes ",(0,n.jsx)(t.a,{href:"/docs/languages/commonlisp",children:"Common Lisp"}),", ",(0,n.jsx)(t.a,{href:"/docs/languages/scheme",children:"Scheme"}),", ",(0,n.jsx)(t.a,{href:"/docs/languages/clojurescript",children:"ClojureScript"})," and ",(0,n.jsx)(t.a,{href:"/docs/languages/fennel",children:"Fennel"}),"."]})}),"\n",(0,n.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,n.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.code,{children:"clojurescript"})}),"\n",(0,n.jsx)(t.h3,{id:"extensions",children:"Extensions"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"cljs"}),", ",(0,n.jsx)(t.code,{children:"cljc"}),", ",(0,n.jsx)(t.code,{children:"clj"}),", ",(0,n.jsx)(t.code,{children:"edn"}),", ",(0,n.jsx)(t.code,{children:"clojure"})]}),"\n",(0,n.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.code,{children:"script"})}),"\n",(0,n.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.a,{href:"https://github.com/squint-cljs/cherry",children:"Cherry"})}),"\n",(0,n.jsxs)(t.p,{children:["If ",(0,n.jsx)(t.code,{children:"JSX"})," is used (using ",(0,n.jsx)(t.code,{children:"#jsx"})," reader tag - ",(0,n.jsx)(t.a,{href:"https://github.com/squint-cljs/cherry/blob/60adcf6e3a8fb940a80c6a193599da0272fe3058/examples/jsx/pages/component.cljs",children:"example"}),"), it is also compiled (",(0,n.jsx)(t.a,{href:"/docs/languages/jsx",children:"JSX"}),"). See ",(0,n.jsx)(t.a,{href:"#example-usage",children:"example usage"}),"."]}),"\n",(0,n.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"cherry-cljs"}),": v0.2.18"]}),"\n",(0,n.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,n.jsxs)(t.p,{children:["Using ",(0,n.jsx)(t.a,{href:"https://shaunlebron.github.io/parinfer/",children:"Parinfer"}),"."]}),"\n",(0,n.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n","\n",(0,n.jsx)(i.Z,{params:d}),"\n",(0,n.jsx)(t.p,{children:"Using React (with JSX):"}),"\n",(0,n.jsx)(i.Z,{template:"clojurescript"}),"\n",(0,n.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.a,{href:"https://livecodes.io/?template=clojurescript",children:"https://livecodes.io/?template=clojurescript"})}),"\n",(0,n.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://clojurescript.org/",children:"ClojureScript official website"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://clojure.org/",children:"Clojure official website"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"https://github.com/squint-cljs/cherry",children:"Cherry repo"})}),"\n"]})]})}function p(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>g});var r=s("5893"),n=s("4200"),o=s("7294"),i=s("8294");function l(e){let t=(0,o.useRef)(null),[s,n]=(0,o.useState)(e.className||""),[l,a]=(0,o.useState)(e.style||{}),[c,d]=(0,o.useState)(e.height),[u,h]=(0,o.useState)(),[p,m]=(0,o.useState)(JSON.stringify(e.config||"")),[f,g]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!t.current)return;let{className:s,style:r,height:o,sdkReady:l,config:c,...j}=e;if(n(s||""),a(r||{}),d(o),u&&f===JSON.stringify(j)){if(p===JSON.stringify(c))return;m(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else g(JSON.stringify(j)),u?.destroy(),(0,i.T)(t.current,{config:c,...j}).then(e=>{h(e),"function"==typeof l&&l(e)})},[e]),(0,o.useEffect)(()=>()=>{u?.destroy()},[]),(0,r.jsx)("div",{ref:t,className:s,style:l,"data-height":c})}var a=s("1858"),c=s("3262"),d=s("1705"),u=s("7645"),h=s("8168"),p=s("8228"),m=s("5050");function f(e){let[t,s]=(0,o.useState)(e.js),[n,i]=(0,o.useState)(e.ts),[l,a]=(0,o.useState)(e.react),[f,g]=(0,o.useState)(e.vue),[j,v]=(0,o.useState)(e.svelte),y="3.7rem",[x,b]=(0,o.useState)(!0),[w,S]=(0,o.useState)(y),C=(0,o.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${y})`)},255)};return(0,o.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(n,"ts")),a(e(l,"jsx")),g(e(f,"html")),v(e(j,"html"))}},[]),(0,r.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":x,style:{height:x?y:w,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,r.jsx)("summary",{onClick:()=>{b(!x),E()},children:"show code"}),(0,r.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,r.jsx)("div",{className:m.Z.collapsibleContent,children:(0,r.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,r.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,r.jsx)(d.Z,{language:"js",children:t})}),(0,r.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,r.jsx)(d.Z,{language:"ts",children:n})}),(0,r.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,r.jsx)(d.Z,{language:"jsx",children:l})}),(0,r.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,r.jsx)(d.Z,{language:"html",children:f})}),(0,r.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,r.jsx)(d.Z,{language:"html",children:j})})]})})})]})}function g(e){let{className:t,style:s,showCode:o,height:i,...c}=e,{colorMode:d}=(0,n.I)(),u=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),g=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${u(c)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,j=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${u(c)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:a.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,r.jsx)(f,{js:h,ts:p,react:m,vue:g,svelte:j})]})}},8294:function(e,t,s){s.d(t,{T:function(){return n},r:function(){return o}});var r=s(7728);async function n(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:r,loading:n="lazy",view:i}=t,l=r||"headless"===i,a=null,c=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)E(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(o(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",l?"eager":n);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,f="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let r="livecodes",o=a.querySelector(`iframe.${r}`),i=o||document.createElement("iframe");i.classList.add(r),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===n?"eager":"lazy"),l?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),i.onload=()=>{e(i)},i.src=d.href,o||a.appendChild(i)}),j=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),j.settled=!0)})}),v=()=>m?Promise.reject(f):new Promise(async e=>{j.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},u),await j,e()}),y=(e,t)=>new Promise(async(s,r)=>{if(m)return r(f);await v();let n=P();addEventListener("message",function t(o){if(o.source===g.contentWindow&&o.origin===u&&o.data?.type==="livecodes-api-response"&&o.data?.id===n&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?r(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:n,args:t},u)}),x={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(f);return b.includes(e)?(y("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==u||!t||!x[t])return;let s=e.data?.payload;x[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(x).forEach(e=>{e.length=0}),g?.remove?.(),m=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,t)=>y("show",[e,t]),runTests:()=>y("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),r=1;r<t;r++)s[r-1]=arguments[r];return y("exec",[e,...s])},destroy:()=>j.settled?y("destroy").then(C):m?Promise.reject(f):(C(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:n={},config:o={},headless:i,import:l,lite:a,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,r]=t;void 0!==r&&e.searchParams.set(s,String(r))});let h="headless"===t.view||i;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==c?o.view=c:e.searchParams.set("view",c)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),u.set("config","code/"+(0,r.compressToEncodedURIComponent)(JSON.stringify(o))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{u.set("params",(0,r.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(n[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return l},a:function(){return i}});var r=s(7294);let n={},o=r.createContext(n);function i(e){let t=r.useContext(o);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/b1cb4606.cd9bb5ec.js b/docs/assets/js/b1cb4606.cd9bb5ec.js new file mode 100644 index 0000000..9616034 --- /dev/null +++ b/docs/assets/js/b1cb4606.cd9bb5ec.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5493"],{8146:function(e,t,s){s.r(t),s.d(t,{default:()=>u,frontMatter:()=>l,metadata:()=>n,assets:()=>d,toc:()=>c,contentTitle:()=>a});var n=JSON.parse('{"id":"languages/solid.tsx","title":"Solid (TS)","description":"Solid is a JavaScript framework for making interactive web applications.","source":"@site/docs/languages/solid.tsx.mdx","sourceDirName":"languages","slug":"/languages/solid.tsx","permalink":"/docs/languages/solid.tsx","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/solid.tsx.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Solid","permalink":"/docs/languages/solid"},"next":{"title":"SQL (SQLite)","permalink":"/docs/languages/sql"}}'),i=s("5893"),r=s("65"),o=s("3365");s("8500");let l={},a="Solid (TS)",d={},c=[{value:"Demo",id:"demo",level:2},{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"solid-ts",children:"Solid (TS)"})}),"\n","\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://www.solidjs.com/",children:"Solid"})," is a JavaScript framework for making interactive web applications."]}),"\n",(0,i.jsxs)(t.p,{children:["Solid offers very similar syntax to ",(0,i.jsx)(t.a,{href:"https://react.dev/",children:"React"}),", with strong focus on ",(0,i.jsx)(t.a,{href:"https://www.solidjs.com/guides/reactivity",children:"reactivity"})," using signals. Solid supports templating in 3 forms ",(0,i.jsx)(t.a,{href:"/docs/languages/jsx",children:"JSX"}),", Tagged Template Literals and Solid's HyperScript variant, although JSX is the predominate form. Solid also supports ",(0,i.jsx)(t.a,{href:"/docs/languages/typescript",children:"TypeScript"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"demo",children:"Demo"}),"\n",(0,i.jsx)(o.Z,{template:"solid",height:"400px"}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsxs)(t.p,{children:["For usage, see documentation for ",(0,i.jsx)(t.a,{href:"/docs/languages/jsx",children:"JSX"})," and ",(0,i.jsx)(t.a,{href:"/docs/languages/typescript",children:"TypeScript"})," support in LiveCodes."]}),"\n",(0,i.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"solid.tsx"})}),"\n",(0,i.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"solid.tsx"})}),"\n",(0,i.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"script"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://github.com/ryansolid/dom-expressions/tree/main/packages/babel-plugin-jsx-dom-expressions",children:"Official Solid JSX compiler"})," (",(0,i.jsx)(t.code,{children:"babel-preset-solid"}),")"]}),"\n",(0,i.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"babel-preset-solid"})," version 1.7.4"]}),"\n",(0,i.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(t.p,{children:["Using ",(0,i.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,i.jsx)(t.code,{children:"solid.tsx"})," are passed to the Babel compiler during compile. Please check the ",(0,i.jsx)(t.a,{href:"https://github.com/ryansolid/dom-expressions/tree/main/packages/babel-plugin-jsx-dom-expressions#plugin-options",children:"documentation"})," for full reference.\nIn addition, the option ",(0,i.jsx)(t.code,{children:"disableAutoRender"})," can be set to ",(0,i.jsx)(t.code,{children:"true"})," to disable ",(0,i.jsx)(t.a,{href:"./jsx#auto-rendering",children:"auto-rendering"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.strong,{children:"Example:"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "solid": {\n "disableAutoRender": true\n }\n}\n'})}),"\n",(0,i.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?template=solid",children:"https://livecodes.io/?template=solid"})}),"\n",(0,i.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.solidjs.com/",children:"Solid"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://react.dev/learn/writing-markup-with-jsx",children:"JSX"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.typescriptlang.org/",children:"TypeScript"})}),"\n"]})]})}function u(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),i=s("4200"),r=s("7294"),o=s("8294");function l(e){let t=(0,r.useRef)(null),[s,i]=(0,r.useState)(e.className||""),[l,a]=(0,r.useState)(e.style||{}),[d,c]=(0,r.useState)(e.height),[h,u]=(0,r.useState)(),[p,g]=(0,r.useState)(JSON.stringify(e.config||"")),[m,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:r,sdkReady:l,config:d,...v}=e;if(i(s||""),a(n||{}),c(r),h&&m===JSON.stringify(v)){if(p===JSON.stringify(d))return;g(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(v)),h?.destroy(),(0,o.T)(t.current,{config:d,...v}).then(e=>{u(e),"function"==typeof l&&l(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:l,"data-height":d})}var a=s("1858"),d=s("3262"),c=s("1705"),h=s("7645"),u=s("8168"),p=s("8228"),g=s("5050");function m(e){let[t,s]=(0,r.useState)(e.js),[i,o]=(0,r.useState)(e.ts),[l,a]=(0,r.useState)(e.react),[m,f]=(0,r.useState)(e.vue),[v,x]=(0,r.useState)(e.svelte),y="3.7rem",[j,w]=(0,r.useState)(!0),[b,S]=(0,r.useState)(y),C=(0,r.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${y})`)},255)};return(0,r.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),o(e(i,"ts")),a(e(l,"jsx")),f(e(m,"html")),x(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${g.Z.details} ${p.Z.details}`,"data-collapsed":j,style:{height:j?y:b,overflow:"hidden",willChange:"height",transition:`height ${j?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{w(!j),E()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:g.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"ts",children:i})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"jsx",children:l})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"html",children:m})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,n.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:r,height:o,...d}=e,{colorMode:c}=(0,i.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),g=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),f=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${h(d)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,v=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${h(d)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:a.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(m,{js:u,ts:p,react:g,vue:f,svelte:v})]})}},8500:function(e,t,s){s.d(t,{Z:()=>d});var n=s("5893");s("7294");var i=s("6735");function r(e){let{children:t,fallback:s}=e;return(0,i.Z)()?(0,n.jsx)(n.Fragment,{children:t?.()}):s??null}var o=s("1705"),l=s("8294"),a=s("1858");function d(e){let{params:t,config:s,code:i,language:d="js",codeTitle:c="",showLineNumbers:h=!1,formatCode:u=!0,linkText:p="Run in LiveCodes",style:g={},className:m=""}=e,f=(0,l.r)({appUrl:a.G,params:t,config:s});return(0,n.jsxs)("div",{style:{marginBottom:"30px",...g},className:m,children:[i&&(0,n.jsx)(r,{children:()=>(0,n.jsx)(o.Z,{language:d,title:c,showLineNumbers:h,children:u?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(i,d):i})}),(0,n.jsxs)("a",{href:f,target:"_blank",rel:"noreferrer",children:[p,(0,n.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,n.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return r}});var n=s(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:i="lazy",view:o}=t,l=n||"headless"===o,a=null,d=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)E(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(r(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",l?"eager":i);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let g=!1,m="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let n="livecodes",r=a.querySelector(`iframe.${n}`),o=r||document.createElement("iframe");o.classList.add(n),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===i?"eager":"lazy"),l?E(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),o.onload=()=>{e(o)},o.src=c.href,r||a.appendChild(o)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),x=()=>g?Promise.reject(m):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),y=(e,t)=>new Promise(async(s,n)=>{if(g)return n(m);await x();let i=k();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===i&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:i,args:t},h)}),j={},w=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(g)throw Error(m);return w.includes(e)?(y("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!j[t])return;let s=e.data?.payload;j[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(j).forEach(e=>{e.length=0}),f?.remove?.(),g=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await x(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let k=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>x(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,t)=>y("show",[e,t]),runTests:()=>y("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return y("exec",[e,...s])},destroy:()=>v.settled?y("destroy").then(C):g?Promise.reject(m):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:r={},headless:o,import:l,lite:a,view:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||o;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==d?r.view=d:e.searchParams.set("view",d)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(r))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return l},a:function(){return o}});var n=s(7294);let i={},r=n.createContext(i);function o(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/b5252e18.5bda2fd8.js b/docs/assets/js/b5252e18.5bda2fd8.js new file mode 100644 index 0000000..5f7599d --- /dev/null +++ b/docs/assets/js/b5252e18.5bda2fd8.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6041"],{142:function(e,t,n){n.r(t),n.d(t,{default:()=>h,frontMatter:()=>a,metadata:()=>s,assets:()=>c,toc:()=>d,contentTitle:()=>l});var s=JSON.parse('{"id":"languages/lua","title":"Lua","description":"Lua is a powerful, efficient, lightweight, embeddable scripting language. It supports procedural programming, object-oriented programming, functional programming, data-driven programming, and data description.","source":"@site/docs/languages/lua.mdx","sourceDirName":"languages","slug":"/languages/lua","permalink":"/docs/languages/lua","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/lua.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Lua (Wasm)","permalink":"/docs/languages/lua-wasm"},"next":{"title":"Malina.js","permalink":"/docs/languages/malina"}}'),i=n("5893"),r=n("65"),o=n("3365");let a={},l="Lua",c={},d=[{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function u(e){let t={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"lua",children:"Lua"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://www.lua.org/",children:"Lua"})," is a powerful, efficient, lightweight, embeddable scripting language. It supports procedural programming, object-oriented programming, functional programming, data-driven programming, and data description."]}),"\n",(0,i.jsxs)(t.p,{children:["LiveCodes runs Lua in the browser using ",(0,i.jsx)(t.a,{href:"https://fengari.io/",children:"Fengari"}),"."]}),"\n",(0,i.jsxs)(t.blockquote,{children:["\n",(0,i.jsx)(t.p,{children:"Fengari (Moon in greek) is the Lua VM written in JavaScript. It uses JavaScript's garbage collector so that interoperability with the DOM is non-leaky."}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://fengari.io/",children:"fengari.io"})}),"\n"]}),"\n",(0,i.jsx)(t.admonition,{title:"Note",type:"info",children:(0,i.jsxs)(t.p,{children:["LiveCodes also supports running Lua using ",(0,i.jsx)(t.a,{href:"https://github.com/ceifa/wasmoon",children:"Wasmoon"})," which is a real Lua 5.4 VM with JS bindings made with WebAssembly. Read documentation ",(0,i.jsx)(t.a,{href:"/docs/languages/lua-wasm",children:"here"})]})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsxs)(t.p,{children:["LiveCodes runs Lua in the browser. JavaScript interoperability and DOM access is achieved using ",(0,i.jsxs)(t.a,{href:"https://github.com/fengari-lua/fengari-interop",children:[(0,i.jsx)(t.code,{children:'"js"'})," module"]}),"."]}),"\n","\n",(0,i.jsx)(t.p,{children:"This example demonstrates usage, JavaScript interoperability and DOM access:"}),"\n",(0,i.jsx)(o.Z,{template:"lua",height:"80vh"}),"\n",(0,i.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"lua"})}),"\n",(0,i.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:".lua"})}),"\n",(0,i.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"script"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://fengari.io/",children:"Fengari"})}),"\n",(0,i.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,i.jsx)(t.p,{children:"Fengari v0.1.4"}),"\n",(0,i.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(t.p,{children:["Using ",(0,i.jsx)(t.a,{href:"https://github.com/trixnz/lua-fmt",children:(0,i.jsx)(t.code,{children:"lua-fmt"})}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?template=lua",children:"https://livecodes.io/?template=lua"})}),"\n",(0,i.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.lua.org/",children:"Lua"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.lua.org/docs.html",children:"Lua documentation"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://fengari.io/",children:"Fengari"})}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"/docs/languages/lua-wasm",children:"lua-wasm"})," in LiveCodes"]}),"\n"]})]})}function h(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},3365:function(e,t,n){n.d(t,{Z:()=>f});var s=n("5893"),i=n("4200"),r=n("7294"),o=n("8294");function a(e){let t=(0,r.useRef)(null),[n,i]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[c,d]=(0,r.useState)(e.height),[u,h]=(0,r.useState)(),[g,p]=(0,r.useState)(JSON.stringify(e.config||"")),[m,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:n,style:s,height:r,sdkReady:a,config:c,...v}=e;if(i(n||""),l(s||{}),d(r),u&&m===JSON.stringify(v)){if(g===JSON.stringify(c))return;p(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else f(JSON.stringify(v)),u?.destroy(),(0,o.T)(t.current,{config:c,...v}).then(e=>{h(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{u?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:n,style:a,"data-height":c})}var l=n("1858"),c=n("3262"),d=n("1705"),u=n("7645"),h=n("8168"),g=n("8228"),p=n("5050");function m(e){let[t,n]=(0,r.useState)(e.js),[i,o]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[m,f]=(0,r.useState)(e.vue),[v,y]=(0,r.useState)(e.svelte),j="3.7rem",[x,w]=(0,r.useState)(!0),[b,S]=(0,r.useState)(j),L=(0,r.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${L.current.offsetHeight}px + ${j})`)},5),setTimeout(()=>{S(`calc(${L.current.offsetHeight}px + ${j})`)},255)};return(0,r.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};n(e(t,"js")),o(e(i,"ts")),l(e(a,"jsx")),f(e(m,"html")),y(e(v,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${g.Z.details}`,"data-collapsed":x,style:{height:x?j:b,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{w(!x),C()},children:"show code"}),(0,s.jsx)("div",{ref:L,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:p.Z.collapsibleContent,children:(0,s.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,s.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,s.jsx)(d.Z,{language:"js",children:t})}),(0,s.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,s.jsx)(d.Z,{language:"ts",children:i})}),(0,s.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,s.jsx)(d.Z,{language:"jsx",children:a})}),(0,s.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,s.jsx)(d.Z,{language:"html",children:m})}),(0,s.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,s.jsx)(d.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:n,showCode:r,height:o,...c}=e,{colorMode:d}=(0,i.I)(),u=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),g=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),f=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${u(c)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,v=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${u(c)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(m,{js:h,ts:g,react:p,vue:f,svelte:v})]})}},8294:function(e,t,n){n.d(t,{T:function(){return i},r:function(){return r}});var s=n(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:s,loading:i="lazy",view:o}=t,a=s||"headless"===o,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)C(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":i);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&d.searchParams.set("config","sdk");let g=t.params;"object"==typeof g&&Object.keys(g).length>0&&JSON.stringify(g).length<1800&&Object.keys(g).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(g[e])))});let p=!1,m="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",r=l.querySelector(`iframe.${s}`),o=r||document.createElement("iframe");o.classList.add(s),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===i?"eager":"lazy"),a?C(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:n},u))}),o.onload=()=>{e(o)},o.src=d.href,r||l.appendChild(o)}),v=new Promise(e=>{addEventListener("message",function t(n){n.source===f.contentWindow&&n.origin===u&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>p?Promise.reject(m):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},u),await v,e()}),j=(e,t)=>new Promise(async(n,s)=>{if(p)return s(m);await y();let i=E();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===u&&r.data?.type==="livecodes-api-response"&&r.data?.id===i&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?s(e.error):n(e)}}),f.contentWindow?.postMessage({method:e,id:i,args:t},u)}),x={},w=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(p)throw Error(m);return w.includes(e)?(j("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==u||!t||!x[t])return;let n=e.data?.payload;x[t]?.forEach(e=>{e(n)})});let L=()=>{Object.values(x).forEach(e=>{e.length=0}),f?.remove?.(),p=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,t)=>j("show",[e,t]),runTests:()=>j("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;s<t;s++)n[s-1]=arguments[s];return j("exec",[e,...n])},destroy:()=>v.settled?j("destroy").then(L):p?Promise.reject(m):(L(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:i={},config:r={},headless:o,import:a,lite:l,view:c,...d}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let h="headless"===t.view||o;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),u.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(r))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{u.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return a},a:function(){return o}});var s=n(7294);let i={},r=s.createContext(i);function o(e){let t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/b6bdffd5.ef02f789.js b/docs/assets/js/b6bdffd5.ef02f789.js new file mode 100644 index 0000000..cf6d393 --- /dev/null +++ b/docs/assets/js/b6bdffd5.ef02f789.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4083"],{7681:function(e,o,r){r.r(o),r.d(o,{default:()=>l,frontMatter:()=>a,metadata:()=>n,assets:()=>s,toc:()=>c,contentTitle:()=>d});var n=JSON.parse('{"id":"api/internal/type-aliases/EditorTheme","title":"Type Alias: EditorTheme","description":"EditorTheme$\\\\{MonacoTheme\\\\}\\\\ \\\\| \\\\codemirror$\\\\{CodejarTheme\\\\}\\\\ \\\\| \\\\monaco$\\\\{CodemirrorTheme\\\\}@$\\\\{Theme\\\\}\\\\ \\\\| \\\\codejar:$\\\\{CodejarTheme\\\\}@$\\\\{Theme\\\\}\\\\","source":"@site/docs/api/internal/type-aliases/EditorTheme.md","sourceDirName":"api/internal/type-aliases","slug":"/api/internal/type-aliases/EditorTheme","permalink":"/docs/api/internal/type-aliases/EditorTheme","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/type-aliases/EditorTheme.md","tags":[],"version":"current","frontMatter":{}}'),t=r("5893"),i=r("65");let a={},d="Type Alias: EditorTheme",s={},c=[{value:"Defined in",id:"defined-in",level:2}];function h(e){let o={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",strong:"strong",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(o.header,{children:(0,t.jsx)(o.h1,{id:"type-alias-editortheme",children:"Type Alias: EditorTheme"})}),"\n",(0,t.jsxs)(o.blockquote,{children:["\n",(0,t.jsxs)(o.p,{children:[(0,t.jsx)(o.strong,{children:"EditorTheme"}),": ",(0,t.jsx)(o.a,{href:"/docs/api/internal/type-aliases/MonacoTheme",children:(0,t.jsx)(o.code,{children:"MonacoTheme"})})," | ",(0,t.jsx)(o.a,{href:"/docs/api/internal/type-aliases/CodemirrorTheme",children:(0,t.jsx)(o.code,{children:"CodemirrorTheme"})})," | ",(0,t.jsx)(o.a,{href:"/docs/api/internal/type-aliases/CodejarTheme",children:(0,t.jsx)(o.code,{children:"CodejarTheme"})})," | `${MonacoTheme}@${Theme}` | `${CodemirrorTheme}@${Theme}` | `${CodejarTheme}@${Theme}` | `monaco:${MonacoTheme}` | `codemirror:${CodemirrorTheme}` | `codejar:${CodejarTheme}` | `monaco:${MonacoTheme}@${Theme}` | `codemirror:${CodemirrorTheme}@${Theme}` | `codejar:${CodejarTheme}@${Theme}`"]}),"\n"]}),"\n",(0,t.jsx)(o.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,t.jsx)(o.p,{children:(0,t.jsx)(o.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1740",children:"models.ts:1740"})})]})}function l(e={}){let{wrapper:o}={...(0,i.a)(),...e.components};return o?(0,t.jsx)(o,{...e,children:(0,t.jsx)(h,{...e})}):h(e)}},65:function(e,o,r){r.d(o,{Z:function(){return d},a:function(){return a}});var n=r(7294);let t={},i=n.createContext(t);function a(e){let o=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(o):{...o,...e}},[o,e])}function d(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:a(e.components),n.createElement(i.Provider,{value:o},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/b6e4e67f.b2e5ec4d.js b/docs/assets/js/b6e4e67f.b2e5ec4d.js new file mode 100644 index 0000000..8705aa6 --- /dev/null +++ b/docs/assets/js/b6e4e67f.b2e5ec4d.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7554"],{7841:function(e,t,s){s.r(t),s.d(t,{default:()=>p,frontMatter:()=>a,metadata:()=>n,assets:()=>c,toc:()=>d,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/php","title":"PHP","description":"PHP running client-side in the browser using Uniter.","source":"@site/docs/languages/php.mdx","sourceDirName":"languages","slug":"/languages/php","permalink":"/docs/languages/php","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/php.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"PHP (Wasm)","permalink":"/docs/languages/php-wasm"},"next":{"title":"PostCSS","permalink":"/docs/languages/postcss"}}'),i=s("5893"),r=s("65"),o=s("3365");let a={},l="PHP",c={},d=[{value:"Usage",id:"usage",level:2},{value:"JavaScript Interoperability",id:"javascript-interoperability",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"php",children:"PHP"})}),"\n","\n",(0,i.jsxs)(t.p,{children:["PHP running client-side in the browser using ",(0,i.jsx)(t.a,{href:"https://phptojs.com/",children:"Uniter"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Uniter is a light-weight PHP-to-JavaScript transpiler and runtime with JavaScript interoperability and client-side DOM manipulation. However, only a small subset of PHP's standard library is supported."}),"\n",(0,i.jsxs)(t.admonition,{title:"Note",type:"info",children:[(0,i.jsxs)(t.p,{children:["If you need better standard library support, you may want to use ",(0,i.jsx)(t.a,{href:"/docs/languages/php-wasm",children:(0,i.jsx)(t.code,{children:"php-wasm"})}),"."]}),(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"php-wasm"})," runs PHP in the browser using WebAssembly. This matches the behavior of the official PHP interpreter and allows using PHP's standard library. However, it requires relatively large download and has limited capabilities for client-side DOM manipulation."]})]}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.h3,{id:"javascript-interoperability",children:"JavaScript Interoperability"}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(o.Z,{template:"php",height:"80vh"}),"\n",(0,i.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"php"})}),"\n",(0,i.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:".php"})}),"\n",(0,i.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"script"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://phptojs.com/",children:"Uniter"})}),"\n",(0,i.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,i.jsx)(t.p,{children:"Uniter v2.18.0"}),"\n",(0,i.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(t.p,{children:["Using ",(0,i.jsx)(t.a,{href:"https://prettier.io/",children:"prettier"})," and ",(0,i.jsx)(t.a,{href:"https://github.com/prettier/plugin-php",children:"Prettier PHP Plugin"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?template=php",children:"https://livecodes.io/?template=php"})}),"\n",(0,i.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://php.net/",children:"PHP"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.php.net/manual/en/",children:"PHP documentation"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://phptojs.com/",children:"Uniter"})}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsxs)(t.a,{href:"/docs/languages/php-wasm",children:["PHP using ",(0,i.jsx)(t.code,{children:"php-wasm"})]})," in LiveCodes"]}),"\n"]})]})}function p(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),i=s("4200"),r=s("7294"),o=s("8294");function a(e){let t=(0,r.useRef)(null),[s,i]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[c,d]=(0,r.useState)(e.height),[h,p]=(0,r.useState)(),[u,m]=(0,r.useState)(JSON.stringify(e.config||"")),[g,f]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:r,sdkReady:a,config:c,...v}=e;if(i(s||""),l(n||{}),d(r),h&&g===JSON.stringify(v)){if(u===JSON.stringify(c))return;m(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else f(JSON.stringify(v)),h?.destroy(),(0,o.T)(t.current,{config:c,...v}).then(e=>{p(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),h=s("7645"),p=s("8168"),u=s("8228"),m=s("5050");function g(e){let[t,s]=(0,r.useState)(e.js),[i,o]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[g,f]=(0,r.useState)(e.vue),[v,y]=(0,r.useState)(e.svelte),j="3.7rem",[x,w]=(0,r.useState)(!0),[b,P]=(0,r.useState)(j),S=(0,r.useRef)(null),C=()=>{setTimeout(()=>{P(`calc(${S.current.offsetHeight}px + ${j})`)},5),setTimeout(()=>{P(`calc(${S.current.offsetHeight}px + ${j})`)},255)};return(0,r.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),o(e(i,"ts")),l(e(a,"jsx")),f(e(g,"html")),y(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${u.Z.details}`,"data-collapsed":x,style:{height:x?j:b,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{w(!x),C()},children:"show code"}),(0,n.jsx)("div",{ref:S,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(p.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"ts",children:i})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"jsx",children:a})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,n.jsx)(d.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:r,height:o,...c}=e,{colorMode:d}=(0,i.I)(),h=e=>JSON.stringify(e,null,2),p=` +import { createPlayground } from 'livecodes'; + +const options = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),u=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(c)}; + return (<LiveCodes {...options}></LiveCodes>); +} + +`.trimStart(),f=` +<script setup> +import LiveCodes from "livecodes/vue"; + +const options = ${h(c)}; +</script> +<template> + <LiveCodes v-bind="options" /> +</template> + +`,v=` +<script> +import { onMount } from 'svelte'; +import { createPlayground } from 'livecodes'; + +let options = $state(${h(c)}); +let container = $state(null); +onMount(() => { + createPlayground(container, options); +}); +</script> + +<div bind:this="{container}"></div> + +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:p,ts:u,react:m,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return r}});var n=s(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:i="lazy",view:o}=t,a=n||"headless"===o,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)C(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":i);let p=globalThis.process;d.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(u[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",r=l.querySelector(`iframe.${n}`),o=r||document.createElement("iframe");o.classList.add(n),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===i?"eager":"lazy"),a?C(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===o.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),o.onload=()=>{e(o)},o.src=d.href,r||l.appendChild(o)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>m?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),j=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await y();let i=E();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===i&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:i,args:t},h)}),x={},w=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(m)throw Error(g);return w.includes(e)?(j("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},P=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=P(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!x[t])return;let s=e.data?.payload;x[t]?.forEach(e=>{e(s)})});let S=()=>{Object.values(x).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,t)=>j("show",[e,t]),runTests:()=>j("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;n<t;n++)s[n-1]=arguments[n];return j("exec",[e,...s])},destroy:()=>v.settled?j("destroy").then(S):m?Promise.reject(g):(S(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:r={},headless:o,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let p="headless"===t.view||o;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(r))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),p&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return o}});var n=s(7294);let i={},r=n.createContext(i);function o(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/b7743934.38617417.js b/docs/assets/js/b7743934.38617417.js new file mode 100644 index 0000000..becc90c --- /dev/null +++ b/docs/assets/js/b7743934.38617417.js @@ -0,0 +1,102 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4420"],{473:function(e,t,s){s.r(t),s.d(t,{basicJsxDemo:()=>h,importsDemo:()=>g,stylesDemo:()=>x,frontMatter:()=>a,styledComponentsDemo:()=>v,metadata:()=>n,exportsDemo:()=>f,assets:()=>d,cssModulesDemo:()=>j,rootDemo:()=>p,contentTitle:()=>c,disableAutoRenderDemo:()=>m,toc:()=>y,default:()=>S,reactDomDemo:()=>u,tailwindcssDemo:()=>b});var n=JSON.parse('{"id":"languages/react","title":"React","description":"React Compiler is a build-time only tool that automatically optimizes React apps.","source":"@site/docs/languages/react.mdx","sourceDirName":"languages","slug":"/languages/react","permalink":"/docs/languages/react","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/react.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"React (TSX)","permalink":"/docs/languages/react-tsx"},"next":{"title":"Reason","permalink":"/docs/languages/reason"}}'),r=s("5893"),o=s("65"),i=s("3365"),l=s("8500");let a={},c="React",d={},h={react:`export default function App() { + return <h1>Hello World!</h1>; +}`},u={react:`import { createRoot } from "react-dom/client"; + +function App() { + return <h1>Hello World!</h1>; +} + +const root = createRoot(document.querySelector("#root")); +root.render(<App />);`,html:'<div id="root"></div>'},p={html:'<div id="livecodes-app">Loading...</div>',react:`export default function App() { + return <h1>Hello World!</h1>; +}`},m={markup:{language:"html",content:`JSX auto-rendering is disabled. Set from Project menu \u{2192} Custom Settings.`},script:{language:"react",content:`export default function App() { + return <h1>Hello World!</h1>; +}`},customSettings:{react:{disableAutoRender:!0}}},g={react:`import { useState, useEffect } from "react"; +import confetti from "canvas-confetti"; +import "bootstrap/dist/css/bootstrap.css"; + +export default function App() { + const [count, setCount] = useState(0); + + useEffect(() => { + if (count > 0) { + confetti(); + } + }, [count]); + + return ( + <div className="m-5 text-center"> + <p>You clicked {count} times.</p> + <button onClick={() => setCount(count + 1)}>Click me</button> + </div> + ); +} +`},f={mdx:`import Greeting from "./script"; + +<Greeting name="MDX" /> +`,react:`export default function(props) { + return <h1>Greeting from {props.name}!</h1>; +} +`},x={react:`import "bootstrap/dist/css/bootstrap.css"; + +export default () => <h1 className="m-5 text-center">Hello World!</h1>; +`},j={activeEditor:"script",style:{language:"css",content:`.title { + color: green; + font-family: sans-serif; +} +`},script:{language:"react",content:`import classes from './style.module.css'; + +export default function() { + return <h1 className={classes.title}>Hello, CSS Modules!</h1>; +} +`},processors:["cssmodules"]},b={activeEditor:"script",style:{language:"css",content:`@tailwind base; +@tailwind components; +@tailwind utilities; +`},script:{language:"react",content:`export default function() { + return <h1 className="text-3xl font-bold text-gray-500 text-center m-4">Hello, Tailwind CSS!</h1>; +} +`},processors:["tailwindcss"]},v={react:"import styled from 'styled-components';\n\nconst Title = styled.h1`\n text-align: center;\n font-family: sans-serif;\n color: palevioletred;\n`;\n\nexport default function () {\n return <Title>Hello, styled-components!;\n}\n"},y=[{value:"Demo:",id:"demo",level:2},{value:"Usage",id:"usage",level:2},{value:"Auto-rendering",id:"auto-rendering",level:3},{value:"Root Element",id:"root-element",level:4},{value:"Disabling Auto-rendering",id:"disabling-auto-rendering",level:4},{value:"Importing Modules",id:"importing-modules",level:3},{value:"Types for Imported Modules",id:"types-for-imported-modules",level:4},{value:"Exports",id:"exports",level:3},{value:"Styles",id:"styles",level:3},{value:"Style Editor",id:"style-editor",level:4},{value:"Importing Stylesheets",id:"importing-stylesheets",level:4},{value:"CSS Modules",id:"css-modules",level:4},{value:"CSS Frameworks",id:"css-frameworks",level:4},{value:"CSS-in-JS",id:"css-in-js",level:4},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function w(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"react",children:"React"})}),"\n","\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://react.dev/learn/react-compiler",children:"React Compiler"})," is a build-time only tool that automatically optimizes ",(0,r.jsx)(t.a,{href:"https://react.dev/",children:"React"})," apps."]}),"\n",(0,r.jsxs)(t.p,{children:["Please note that using React compiler with TypeScript (TSX) is also supported in LiveCodes and is ",(0,r.jsx)(t.a,{href:"/docs/languages/react-tsx",children:"documented here"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Also note that LiveCodes supports running ",(0,r.jsx)(t.a,{href:"/docs/languages/jsx",children:"JSX"})," and ",(0,r.jsx)(t.a,{href:"/docs/languages/tsx",children:"TSX"})," which are compiled to JavaScript using the ",(0,r.jsx)(t.a,{href:"/docs/languages/typescript",children:"TypeScript compiler"}),". This was the traditional way of running React and other JSX/TSX apps in LiveCodes before React compiler support was added."]}),"\n",(0,r.jsx)(t.h2,{id:"demo",children:"Demo:"}),"\n",(0,r.jsx)(i.Z,{template:"react",height:"400px"}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(t.p,{children:["The easiest way is to ",(0,r.jsx)(t.a,{href:"#auto-rendering",children:"auto-render"})," a component by exporting it as the ",(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#using_the_default_export",children:"default export"}),":"]}),"\n","\n",(0,r.jsx)(l.Z,{params:h,code:h.jsx,language:"react",formatCode:!1}),"\n",(0,r.jsxs)(t.p,{children:["You may, however, be more explicit and render the component yourself using ",(0,r.jsx)(t.a,{href:"https://react.dev/reference/react-dom/client",children:"React DOM"}),":"]}),"\n","\n",(0,r.jsx)(l.Z,{params:u,code:u.jsx,language:"react",formatCode:!1}),"\n",(0,r.jsxs)(t.admonition,{title:"note",type:"info",children:[(0,r.jsxs)(t.p,{children:["React's ",(0,r.jsx)(t.a,{href:"https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html",children:"new JSX transform"})," is utilized. So there is no need to import React."]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-jsx",children:"// this is not needed:\n// import React from 'react';\n\nexport default function App() {\n return

Hello World!

;\n}\n"})})]}),"\n",(0,r.jsx)(t.h3,{id:"auto-rendering",children:"Auto-rendering"}),"\n",(0,r.jsx)(t.p,{children:"A component is rendered automatically as a React component (without having to manually use React Dom to render it) if the following conditions are met:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"The component is exported as the default export."}),"\n",(0,r.jsxs)(t.li,{children:["No ",(0,r.jsxs)(t.a,{href:"#exports",children:["imports from ",(0,r.jsx)(t.code,{children:'"./script"'})]})," in markup editor."]}),"\n",(0,r.jsxs)(t.li,{children:["Auto-rendering is not ",(0,r.jsx)(t.a,{href:"#disabling-auto-rendering",children:"disabled"}),"."]}),"\n"]}),"\n",(0,r.jsx)(t.h4,{id:"root-element",children:"Root Element"}),"\n",(0,r.jsxs)(t.p,{children:["To render the React components to a specific ",(0,r.jsx)(t.a,{href:"https://react.dev/reference/react-dom/client/createRoot",children:"root"})," DOM element use ",(0,r.jsx)(t.code,{children:'"livecodes-app"'})," as the element ",(0,r.jsx)(t.code,{children:"id"}),". Otherwise, if that element is not found, a new ",(0,r.jsx)(t.code,{children:"div"})," element is added to ",(0,r.jsx)(t.code,{children:"document.body"})," and is used as the root."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n","\n",(0,r.jsx)(l.Z,{params:p,code:p.html,language:"html",formatCode:!1}),"\n",(0,r.jsx)(t.h4,{id:"disabling-auto-rendering",children:"Disabling Auto-rendering"}),"\n",(0,r.jsxs)(t.p,{children:["To disable auto-rendering, set the ",(0,r.jsx)(t.a,{href:"#custom-settings",children:"custom settings"})," ",(0,r.jsx)(t.code,{children:"disableAutoRender"})," property to ",(0,r.jsx)(t.code,{children:"true"}),"."]}),"\n","\n",(0,r.jsx)(l.Z,{config:m,code:JSON.stringify(m.customSettings,null,2),language:"json",codeTitle:"Custom Settings",formatCode:!1}),"\n",(0,r.jsx)(t.h3,{id:"importing-modules",children:"Importing Modules"}),"\n",(0,r.jsxs)(t.p,{children:["npm modules can be imported as described in the section about ",(0,r.jsx)(t.a,{href:"/docs/features/module-resolution",children:"module resolution"}),", including bare module imports and importing from different CDNs. Stylesheet imports are added as ",(0,r.jsx)(t.code,{children:''})," tags in the page ",(0,r.jsx)(t.code,{children:"head"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n","\n",(0,r.jsx)(l.Z,{params:g,code:g.jsx,language:"react",formatCode:!1}),"\n",(0,r.jsxs)(t.p,{children:["Module imports can be customized using import maps as described in ",(0,r.jsx)(t.a,{href:"/docs/features/module-resolution#custom-module-resolution",children:"module resolution"})," documentations."]}),"\n",(0,r.jsx)(t.h4,{id:"types-for-imported-modules",children:"Types for Imported Modules"}),"\n",(0,r.jsxs)(t.p,{children:["Types for imported modules are loaded automatically (if available) to provide ",(0,r.jsx)(t.a,{href:"/docs/features/intellisense",children:"Intellisense"}),", auto-completion and type information."]}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"LiveCodes Intellisense",src:s(9203).Z+"",width:"1128",height:"754"})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"LiveCodes Intellisense",src:s(313).Z+"",width:"1126",height:"713"})}),"\n",(0,r.jsxs)(t.p,{children:["Moreover, you can provide custom type definitions for modules that do not have types available on npm. See ",(0,r.jsx)(t.a,{href:"/docs/features/intellisense#custom-types",children:"Custom Types"})," for details."]}),"\n",(0,r.jsx)(t.h3,{id:"exports",children:"Exports"}),"\n",(0,r.jsxs)(t.p,{children:["Values exported from script editor (default or named) can be imported in the markup editor by importing from ",(0,r.jsx)(t.code,{children:'"./script"'})," (with no extension)."]}),"\n",(0,r.jsxs)(t.p,{children:["This can be useful, for example, when using ",(0,r.jsx)(t.a,{href:"/docs/languages/mdx",children:"MDX"})," to import components exported form JSX."]}),"\n",(0,r.jsx)(t.p,{children:"Demo:"}),"\n","\n",(0,r.jsx)(i.Z,{params:f}),"\n",(0,r.jsx)(t.admonition,{title:"note",type:"info",children:(0,r.jsxs)(t.p,{children:["When values are imported from ",(0,r.jsx)(t.code,{children:'"./script"'}),", ",(0,r.jsx)(t.a,{href:"#auto-rendering",children:"auto-rendering"})," is disabled, because it is assumed that you want to take control over component rendering."]})}),"\n",(0,r.jsx)(t.h3,{id:"styles",children:"Styles"}),"\n",(0,r.jsx)(t.p,{children:"CSS can be applied to the component using various ways:"}),"\n",(0,r.jsx)(t.h4,{id:"style-editor",children:"Style Editor"}),"\n",(0,r.jsxs)(t.p,{children:["Styles added in the style editor is applied globally to the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),". This can use different ",(0,r.jsx)(t.strong,{children:"languages/processors"})," supported in LiveCodes including CSS, SCSS, Less, Stylus, ..etc. See ",(0,r.jsx)(t.a,{href:"/docs/features/css",children:"style documentation"})," for more details."]}),"\n",(0,r.jsx)(t.p,{children:"And of course, styles and stylesheets added in markup editor are also applied globally."}),"\n",(0,r.jsx)(t.h4,{id:"importing-stylesheets",children:"Importing Stylesheets"}),"\n",(0,r.jsxs)(t.p,{children:["Stylesheets imported in script editor are added as ",(0,r.jsx)(t.code,{children:''})," tags in the page ",(0,r.jsx)(t.code,{children:"head"}),".\nThe stylesheet URL can be an absolute URL or a path in the npm package. The URL has to end with ",(0,r.jsx)(t.code,{children:'".css"'}),"."]}),"\n",(0,r.jsx)(t.p,{children:"example:"}),"\n","\n",(0,r.jsx)(l.Z,{params:x,code:x.react,language:"react",formatCode:!1}),"\n",(0,r.jsx)(t.h4,{id:"css-modules",children:"CSS Modules"}),"\n",(0,r.jsxs)(t.p,{children:["CSS modules are supported and are ",(0,r.jsx)(t.a,{href:"/docs/languages/cssmodules",children:"documented separately"}),". Make sure to enable CSS modules (from style editor menu or in ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#processors",children:(0,r.jsx)(t.code,{children:"processors"})})," property of ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configuration object"}),")."]}),"\n",(0,r.jsx)(t.p,{children:"Demo:"}),"\n","\n",(0,r.jsx)(i.Z,{config:j}),"\n",(0,r.jsx)(t.h4,{id:"css-frameworks",children:"CSS Frameworks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"/docs/features/css#css-processors",children:"CSS Frameworks"})," supported in LiveCodes (e.g. ",(0,r.jsx)(t.a,{href:"/docs/languages/tailwindcss",children:"Tailwind CSS"}),", ",(0,r.jsx)(t.a,{href:"/docs/languages/unocss",children:"UnoCSS"}),", ",(0,r.jsx)(t.a,{href:"/docs/languages/windicss",children:"WindiCSS"}),") can detect class names added in JSX. Make sure that the required utility is enabled (from style editor menu or in ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#processors",children:(0,r.jsx)(t.code,{children:"processors"})})," property of ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configuration object"}),") and that required ",(0,r.jsx)(t.a,{href:"https://tailwindcss.com/docs/functions-and-directives#tailwind",children:"directives"})," are added to the style editor."]}),"\n",(0,r.jsx)(t.p,{children:"Demo:"}),"\n","\n",(0,r.jsx)(i.Z,{config:b}),"\n",(0,r.jsx)(t.h4,{id:"css-in-js",children:"CSS-in-JS"}),"\n",(0,r.jsx)(t.p,{children:"CSS-in-JS libraries can be imported and used as usual."}),"\n",(0,r.jsx)(t.p,{children:"Demo:"}),"\n","\n",(0,r.jsx)(i.Z,{params:v}),"\n",(0,r.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"react"})}),"\n",(0,r.jsx)(t.h3,{id:"extensions",children:"Extensions"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:".react.jsx"}),", ",(0,r.jsx)(t.code,{children:".react-jsx"})]}),"\n",(0,r.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"script"})}),"\n",(0,r.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://react.dev/learn/react-compiler",children:"React compiler"}),", which is a ",(0,r.jsx)(t.a,{href:"/docs/languages/babel",children:"babel"})," plugin (",(0,r.jsx)(t.a,{href:"https://www.npmjs.com/package/babel-plugin-react-compiler",children:"babel-plugin-react-compiler"}),")."]}),"\n",(0,r.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"babel-plugin-react-compiler"}),": v19.1.0-rc.1"]}),"\n",(0,r.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsxs)(t.p,{children:["Using ",(0,r.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,r.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,r.jsxs)(t.p,{children:["React compiler is implemented as a babel plugin (",(0,r.jsx)(t.a,{href:"https://www.npmjs.com/package/babel-plugin-react-compiler",children:"babel-plugin-react-compiler"}),"). In addition the following babel presets are used:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/babel-preset-env",children:"@babel/preset-env"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/babel-preset-react",children:"@babel/preset-react"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/babel-preset-typescript",children:"@babel/preset-typescript"})}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," can be used to add configuration under the following keys:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"react"}),": the option ",(0,r.jsx)(t.code,{children:"disableAutoRender"})," can be set to ",(0,r.jsx)(t.code,{children:"true"})," to disable ",(0,r.jsx)(t.a,{href:"#auto-rendering",children:"auto-rendering"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"babel"}),": custom settings for ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/options",children:"babel"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"babel-plugin-react-compiler"}),": custom settings for ",(0,r.jsx)(t.a,{href:"https://www.npmjs.com/package/babel-plugin-react-compiler",children:"babel-plugin-react-compiler"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"@babel/preset-env"}),": custom settings for ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/babel-preset-env",children:"@babel/preset-env"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"@babel/preset-react"}),": custom settings for ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/babel-preset-react",children:"@babel/preset-react"}),"."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.code,{children:"@babel/preset-typescript"}),": custom settings for ",(0,r.jsx)(t.a,{href:"https://babeljs.io/docs/en/babel-preset-typescript",children:"@babel/preset-typescript"}),"."]}),"\n"]}),"\n",(0,r.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Example:"})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "react": {\n "disableAutoRender": true\n }\n}\n'})}),"\n",(0,r.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://livecodes.io/?template=react",children:"https://livecodes.io/?template=react"})}),"\n",(0,r.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://react.dev/",children:"React"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://react.dev/learn/writing-markup-with-jsx",children:"JSX"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://react.dev/learn/react-compiler",children:"React compiler"})}),"\n"]})]})}function S(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(w,{...e})}):w(e)}},9203:function(e,t,s){s.d(t,{Z:function(){return n}});let n=s.p+"assets/images/intellisense-1-bbc692078d1b88aaf8d2be72beb49849.jpg"},313:function(e,t,s){s.d(t,{Z:function(){return n}});let n=s.p+"assets/images/intellisense-2-ffdab70d10948aa165e3332a58d37827.jpg"},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),r=s("4200"),o=s("7294"),i=s("8294");function l(e){let t=(0,o.useRef)(null),[s,r]=(0,o.useState)(e.className||""),[l,a]=(0,o.useState)(e.style||{}),[c,d]=(0,o.useState)(e.height),[h,u]=(0,o.useState)(),[p,m]=(0,o.useState)(JSON.stringify(e.config||"")),[g,f]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:o,sdkReady:l,config:c,...x}=e;if(r(s||""),a(n||{}),d(o),h&&g===JSON.stringify(x)){if(p===JSON.stringify(c))return;m(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else f(JSON.stringify(x)),h?.destroy(),(0,i.T)(t.current,{config:c,...x}).then(e=>{u(e),"function"==typeof l&&l(e)})},[e]),(0,o.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:l,"data-height":c})}var a=s("1858"),c=s("3262"),d=s("1705"),h=s("7645"),u=s("8168"),p=s("8228"),m=s("5050");function g(e){let[t,s]=(0,o.useState)(e.js),[r,i]=(0,o.useState)(e.ts),[l,a]=(0,o.useState)(e.react),[g,f]=(0,o.useState)(e.vue),[x,j]=(0,o.useState)(e.svelte),b="3.7rem",[v,y]=(0,o.useState)(!0),[w,S]=(0,o.useState)(b),C=(0,o.useRef)(null),R=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${b})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${b})`)},255)};return(0,o.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(r,"ts")),a(e(l,"jsx")),f(e(g,"html")),j(e(x,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":v,style:{height:v?b:w,overflow:"hidden",willChange:"height",transition:`height ${v?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{y(!v),R()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"ts",children:r})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"jsx",children:l})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:R},children:(0,n.jsx)(d.Z,{language:"html",children:x})})]})})})]})}function f(e){let{className:t,style:s,showCode:o,height:i,...c}=e,{colorMode:d}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(c)}; + return (); +} + +`.trimStart(),f=` + + + +`,x=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:a.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:u,ts:p,react:m,vue:f,svelte:x})]})}},8500:function(e,t,s){s.d(t,{Z:()=>c});var n=s("5893");s("7294");var r=s("6735");function o(e){let{children:t,fallback:s}=e;return(0,r.Z)()?(0,n.jsx)(n.Fragment,{children:t?.()}):s??null}var i=s("1705"),l=s("8294"),a=s("1858");function c(e){let{params:t,config:s,code:r,language:c="js",codeTitle:d="",showLineNumbers:h=!1,formatCode:u=!0,linkText:p="Run in LiveCodes",style:m={},className:g=""}=e,f=(0,l.r)({appUrl:a.G,params:t,config:s});return(0,n.jsxs)("div",{style:{marginBottom:"30px",...m},className:g,children:[r&&(0,n.jsx)(o,{children:()=>(0,n.jsx)(i.Z,{language:c,title:d,showLineNumbers:h,children:u?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(r,c):r})}),(0,n.jsxs)("a",{href:f,target:"_blank",rel:"noreferrer",children:[p,(0,n.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,n.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return o}});var n=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:r="lazy",view:i}=t,l=n||"headless"===i,a=null,c=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)R(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(o(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",l?"eager":r);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let n="livecodes",o=a.querySelector(`iframe.${n}`),i=o||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===r?"eager":"lazy"),l?R(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),i.onload=()=>{e(i)},i.src=d.href,o||a.appendChild(i)}),x=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),x.settled=!0)})}),j=()=>m?Promise.reject(g):new Promise(async e=>{x.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await x,e()}),b=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await j();let r=E();addEventListener("message",function t(o){if(o.source===f.contentWindow&&o.origin===h&&o.data?.type==="livecodes-api-response"&&o.data?.id===r&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},h)}),v={},y=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return y.includes(e)?(b("watch",[e]),v[e]||(v[e]=[]),v[e]?.push(t),{remove:()=>{v[e]=v[e]?.filter(e=>e!==t),v[e]?.length===0&&b("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!v[t])return;let s=e.data?.payload;v[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(v).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function R(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>b("run"),format:e=>b("format",[e]),getShareUrl:e=>b("getShareUrl",[e]),getConfig:e=>b("getConfig",[e]),setConfig:e=>b("setConfig",[e]),getCode:()=>b("getCode"),show:(e,t)=>b("show",[e,t]),runTests:()=>b("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nx.settled?b("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:o={},headless:i,import:l,lite:a,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||i;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==c?o.view=c:e.searchParams.set("view",c)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(o))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return l},a:function(){return i}});var n=s(7294);let r={},o=n.createContext(r);function i(e){let t=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/b856c801.ef8dd139.js b/docs/assets/js/b856c801.ef8dd139.js new file mode 100644 index 0000000..83e80c1 --- /dev/null +++ b/docs/assets/js/b856c801.ef8dd139.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8256"],{8900:function(e,t,s){s.r(t),s.d(t,{default:()=>p,frontMatter:()=>c,metadata:()=>n,assets:()=>l,toc:()=>i,contentTitle:()=>a});var n=JSON.parse('{"id":"languages/postcssImportUrl","title":"Import Url","description":"TODO...","source":"@site/docs/languages/postcssImportUrl.mdx","sourceDirName":"languages","slug":"/languages/postcssImportUrl","permalink":"/docs/languages/postcssImportUrl","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/postcssImportUrl.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"PostCSS","permalink":"/docs/languages/postcss"},"next":{"title":"Preset Env","permalink":"/docs/languages/postcssPresetEnv"}}'),r=s("5893"),o=s("65");let c={},a="Import Url",l={},i=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"import-url",children:"Import Url"})}),"\n",(0,r.jsx)(t.p,{children:"TODO..."})]})}function p(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return c}});var n=s(7294);let r={},o=n.createContext(r);function c(e){let t=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/bb2066da.5e361631.js b/docs/assets/js/bb2066da.5e361631.js new file mode 100644 index 0000000..a6916c4 --- /dev/null +++ b/docs/assets/js/bb2066da.5e361631.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5287"],{4892:function(e,t,s){s.r(t),s.d(t,{default:()=>h,frontMatter:()=>i,metadata:()=>o,assets:()=>c,toc:()=>d,contentTitle:()=>l});var o=JSON.parse('{"id":"features/read-only","title":"Read-Only","description":"In case you need to embed a playground in your web page to show case some code and want users to read through the code and not allow edits, you may use the readonly setting.","source":"@site/docs/features/read-only.mdx","sourceDirName":"features","slug":"/features/read-only","permalink":"/docs/features/read-only","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/read-only.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Lite Mode","permalink":"/docs/features/lite"},"next":{"title":"Permanent URL","permalink":"/docs/features/permanent-url"}}'),n=s("5893"),r=s("65"),a=s("3365");let i={},l="Read-Only",c={},d=[{value:"Using SDK",id:"using-sdk",level:2},{value:"Using query params",id:"using-query-params",level:2},{value:"Related",id:"related",level:2}];function u(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"read-only",children:"Read-Only"})}),"\n","\n",(0,n.jsxs)(t.p,{children:["In case you need to embed a playground in your web page to show case some code and want users to read through the code and not allow edits, you may use the ",(0,n.jsx)(t.code,{children:"readonly"})," setting."]}),"\n",(0,n.jsxs)(t.p,{children:["Code editing, ",(0,n.jsx)(t.a,{href:"/docs/features/code-format",children:"formatting"}),", and ",(0,n.jsx)(t.a,{href:"/docs/features/console",children:"console input"})," are not available. However, any language supported by LiveCodes can be used, with syntax highlighting. Code can be ",(0,n.jsx)(t.a,{href:"/docs/features/code-prefill",children:"prefilled"}),", and is compiled and shown in the ",(0,n.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," as usual."]}),"\n",(0,n.jsxs)(t.p,{children:["By default, a light-weight, minimal ",(0,n.jsx)(t.a,{href:"/docs/features/editor-settings#code-editor",children:"code editor"})," is used. This can be changed by explicitly setting the ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configuration object"})," property ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object#editor",children:(0,n.jsx)(t.code,{children:"editor"})})," (e.g. to show hover intellisense)."]}),"\n",(0,n.jsx)(t.p,{children:"Demo:"}),"\n",(0,n.jsx)(a.Z,{template:"javascript",config:{readonly:!0}}),"\n",(0,n.jsx)(t.h2,{id:"using-sdk",children:"Using SDK"}),"\n",(0,n.jsxs)(t.p,{children:["set the ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configuration object"})," property ",(0,n.jsx)(t.a,{href:"/docs/configuration/configuration-object#readonly",children:(0,n.jsx)(t.code,{children:"readonly"})})," to ",(0,n.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\ncreatePlayground('#container', { template: 'javascript', config: { readonly: true } });\n"})}),"\n",(0,n.jsx)(t.h2,{id:"using-query-params",children:"Using query params"}),"\n",(0,n.jsxs)(t.p,{children:["add the ",(0,n.jsx)(t.a,{href:"/docs/configuration/query-params",children:"query parameter"})," ",(0,n.jsx)(t.code,{children:"readonly"})," (no need to set a value)."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.a,{href:"https://livecodes.io?template=javascript&readonly",children:"https://livecodes.io?template=javascript&readonly"})}),"\n",(0,n.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"/docs/features/code-prefill",children:"Code prefill"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"/docs/features/lite",children:"Lite mode"})}),"\n"]})]})}function h(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},3365:function(e,t,s){s.d(t,{Z:()=>m});var o=s("5893"),n=s("4200"),r=s("7294"),a=s("8294");function i(e){let t=(0,r.useRef)(null),[s,n]=(0,r.useState)(e.className||""),[i,l]=(0,r.useState)(e.style||{}),[c,d]=(0,r.useState)(e.height),[u,h]=(0,r.useState)(),[f,p]=(0,r.useState)(JSON.stringify(e.config||"")),[g,m]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:o,height:r,sdkReady:i,config:c,...y}=e;if(n(s||""),l(o||{}),d(r),u&&g===JSON.stringify(y)){if(f===JSON.stringify(c))return;p(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else m(JSON.stringify(y)),u?.destroy(),(0,a.T)(t.current,{config:c,...y}).then(e=>{h(e),"function"==typeof i&&i(e)})},[e]),(0,r.useEffect)(()=>()=>{u?.destroy()},[]),(0,o.jsx)("div",{ref:t,className:s,style:i,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),u=s("7645"),h=s("8168"),f=s("8228"),p=s("5050");function g(e){let[t,s]=(0,r.useState)(e.js),[n,a]=(0,r.useState)(e.ts),[i,l]=(0,r.useState)(e.react),[g,m]=(0,r.useState)(e.vue),[y,v]=(0,r.useState)(e.svelte),j="3.7rem",[b,w]=(0,r.useState)(!0),[x,S]=(0,r.useState)(j),C=(0,r.useRef)(null),P=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${j})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${j})`)},255)};return(0,r.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),a(e(n,"ts")),l(e(i,"jsx")),m(e(g,"html")),v(e(y,"html"))}},[]),(0,o.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${f.Z.details}`,"data-collapsed":b,style:{height:b?j:x,overflow:"hidden",willChange:"height",transition:`height ${b?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,o.jsx)("summary",{onClick:()=>{w(!b),P()},children:"show code"}),(0,o.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,o.jsx)("div",{className:p.Z.collapsibleContent,children:(0,o.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,o.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"js",children:t})}),(0,o.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"ts",children:n})}),(0,o.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"jsx",children:i})}),(0,o.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"html",children:g})}),(0,o.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"html",children:y})})]})})})]})}function m(e){let{className:t,style:s,showCode:r,height:a,...c}=e,{colorMode:d}=(0,n.I)(),u=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),f=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (); +} + +`.trimStart(),m=` + + + +`,y=` + + +
+ +`.trimStart();return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(i,{className:`container_Egsj ${e.className}`,style:{height:a||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,o.jsx)(g,{js:h,ts:f,react:p,vue:m,svelte:y})]})}},8294:function(e,t,s){s.d(t,{T:function(){return n},r:function(){return r}});var o=s(7728);async function n(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:o,loading:n="lazy",view:a}=t,i=o||"headless"===a,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(i&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(i)P(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",i?"eager":n);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let f=t.params;"object"==typeof f&&Object.keys(f).length>0&&JSON.stringify(f).length<1800&&Object.keys(f).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(f[e])))});let p=!1,g="Cannot call API methods after calling `destroy()`.",m=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!i){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||i||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let o="livecodes",r=l.querySelector(`iframe.${o}`),a=r||document.createElement("iframe");a.classList.add(o),a.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),a.setAttribute("allowtransparency","true"),a.setAttribute("allowpaymentrequest","true"),a.setAttribute("allowfullscreen","true"),a.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),a.setAttribute("loading","eager"===n?"eager":"lazy"),i?P(a):(a.style.height="100%",a.style.minHeight="200px",a.style.width="100%",a.style.margin="0",a.style.border="0",a.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===a.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===a.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),a.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),a.onload=()=>{e(a)},a.src=d.href,r||l.appendChild(a)}),y=new Promise(e=>{addEventListener("message",function t(s){s.source===m.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>p?Promise.reject(g):new Promise(async e=>{y.settled&&e(),m.contentWindow?.postMessage({type:"livecodes-load"},u),await y,e()}),j=(e,t)=>new Promise(async(s,o)=>{if(p)return o(g);await v();let n=E();addEventListener("message",function t(r){if(r.source===m.contentWindow&&r.origin===u&&r.data?.type==="livecodes-api-response"&&r.data?.id===n&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?o(e.error):s(e)}}),m.contentWindow?.postMessage({method:e,id:n,args:t},u)}),b={},w=["load","ready","code","console","tests","destroy"],x=(e,t)=>{if(p)throw Error(g);return w.includes(e)?(j("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==m.contentWindow||e.origin!==u||!t||!b[t])return;let s=e.data?.payload;b[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(b).forEach(e=>{e.length=0}),m?.remove?.(),p=!0};function P(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,t)=>j("show",[e,t]),runTests:()=>j("runTests"),onChange:e=>x("code",e),watch:x,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),o=1;oy.settled?j("destroy").then(C):p?Promise.reject(g):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:n={},config:r={},headless:a,import:i,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,o]=t;void 0!==o&&e.searchParams.set(s,String(o))});let h="headless"===t.view||a;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),u.set("config","code/"+(0,o.compressToEncodedURIComponent)(JSON.stringify(r))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{u.set("params",(0,o.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(n[t])))})}return i&&e.searchParams.set("x",encodeURIComponent(i)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return i},a:function(){return a}});var o=s(7294);let n={},r=o.createContext(n);function a(e){let t=o.useContext(r);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:a(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/bf28df8a.7b9c7c94.js b/docs/assets/js/bf28df8a.7b9c7c94.js new file mode 100644 index 0000000..7ea99d2 --- /dev/null +++ b/docs/assets/js/bf28df8a.7b9c7c94.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["133"],{2281:function(e,o,r){r.r(o),r.d(o,{default:()=>p,frontMatter:()=>a,metadata:()=>t,assets:()=>d,toc:()=>c,contentTitle:()=>i});var t=JSON.parse('{"id":"bookmarklet","title":"Bookmarklet","description":"LiveCodes allows importing code from a wide variety of sources.","source":"@site/docs/bookmarklet.mdx","sourceDirName":".","slug":"/bookmarklet","permalink":"/docs/bookmarklet","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/bookmarklet.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Windi CSS","permalink":"/docs/languages/windicss"},"next":{"title":"GitHub Action \u26A1","permalink":"/docs/gh-action"}}'),n=r("5893"),s=r("65");let a={},i="Bookmarklet",d={},c=[{value:"Add Bookmarklet",id:"add-bookmarklet",level:2},{value:"Example Usage",id:"example-usage",level:2}];function l(e){let o={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.header,{children:(0,n.jsx)(o.h1,{id:"bookmarklet",children:"Bookmarklet"})}),"\n",(0,n.jsxs)(o.p,{children:["LiveCodes allows ",(0,n.jsx)(o.a,{href:"/docs/features/import",children:"importing code"})," from a ",(0,n.jsx)(o.a,{href:"/docs/features/import#sources",children:"wide variety of sources"}),"."]}),"\n",(0,n.jsxs)(o.p,{children:["Instead of manually copy/pasting URLs to import, adding ",(0,n.jsx)(o.strong,{children:'"Edit in LiveCodes"'})," bookmarklet to the browser bookmarks bar can be a more convenient way. It opens LiveCodes in a new window and imports the current webpage URL."]}),"\n",(0,n.jsx)(o.h2,{id:"add-bookmarklet",children:"Add Bookmarklet"}),"\n",(0,n.jsx)(o.p,{children:"Drag this link to the browser bookmarks bar:"}),"\n",(0,n.jsx)("div",{dangerouslySetInnerHTML:{__html:'{window.open("https://livecodes.io/?x="+encodeURIComponent(location.href),"_blank");})();\'>Edit in LiveCodes'}}),"\n",(0,n.jsx)("br",{}),"\n",(0,n.jsx)(o.p,{children:"or manually create a new bookmark in your browser and add this code as its URL:"}),"\n",(0,n.jsx)(o.pre,{children:(0,n.jsx)(o.code,{className:"language-js",children:'javascript:(()=>{window.open("https://livecodes.io/?x="+encodeURIComponent(location.href),"_blank");})();\n'})}),"\n",(0,n.jsx)(o.h2,{id:"example-usage",children:"Example Usage"}),"\n",(0,n.jsx)(o.p,{children:"After adding the bookmarklet to your browser (see above), open this GitHub directory:"}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.a,{href:"https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards",children:"https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards"})}),"\n",(0,n.jsx)(o.p,{children:"Then click on the bookmarklet."}),"\n",(0,n.jsxs)(o.p,{children:["LiveCodes playground should open in a new window and ",(0,n.jsx)(o.a,{href:"/docs/features/import",children:"import"})," the directory files (each file in the appropriate editor). It just works!"]})]})}function p(e={}){let{wrapper:o}={...(0,s.a)(),...e.components};return o?(0,n.jsx)(o,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},65:function(e,o,r){r.d(o,{Z:function(){return i},a:function(){return a}});var t=r(7294);let n={},s=t.createContext(n);function a(e){let o=t.useContext(s);return t.useMemo(function(){return"function"==typeof e?e(o):{...o,...e}},[o,e])}function i(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:a(e.components),t.createElement(s.Provider,{value:o},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/bfb7ba14.356380a5.js b/docs/assets/js/bfb7ba14.356380a5.js new file mode 100644 index 0000000..bfabde9 --- /dev/null +++ b/docs/assets/js/bfb7ba14.356380a5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7164"],{1225:function(e,t,a){a.r(t),a.d(t,{default:()=>d,frontMatter:()=>c,metadata:()=>r,assets:()=>u,toc:()=>h,contentTitle:()=>o});var r=JSON.parse('{"id":"features/templates","title":"Templates","description":"A new project can be based on any of the provided starter templates or user templates.","source":"@site/docs/features/templates.mdx","sourceDirName":"features","slug":"/features/templates","permalink":"/docs/features/templates","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/templates.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Projects","permalink":"/docs/features/projects"},"next":{"title":"CSS","permalink":"/docs/features/css"}}'),l=a("5893"),s=a("65"),n=a("1858");let i=[{name:"blank",title:"Blank Project",thumbnail:"blank.svg"},{name:"javascript",title:"JavaScript Starter",thumbnail:"javascript.svg"},{name:"typescript",title:"TypeScript Starter",thumbnail:"typescript.svg"},{name:"react",title:"React Starter",thumbnail:"react.svg"},{name:"react-native",title:"React Native Starter",thumbnail:"react.svg"},{name:"vue",title:"Vue 3 SFC Starter",thumbnail:"vue.svg"},{name:"vue2",title:"Vue 2 Starter",thumbnail:"vue.svg"},{name:"angular",title:"Angular Starter",thumbnail:"angular.svg"},{name:"preact",title:"Preact Starter",thumbnail:"preact.svg"},{name:"svelte",title:"Svelte Starter",thumbnail:"svelte.svg"},{name:"solid",title:"Solid Starter",thumbnail:"solid.svg"},{name:"lit",title:"Lit Starter",thumbnail:"lit.svg"},{name:"stencil",title:"Stencil Starter",thumbnail:"stencil.png"},{name:"mdx",title:"MDX Starter",thumbnail:"mdx.svg"},{name:"tailwindcss",title:"Tailwind CSS Starter",thumbnail:"tailwindcss.svg"},{name:"shadcn-ui",title:"shadcn/ui Starter",thumbnail:"shadcn-ui.svg"},{name:"daisyui",title:"daisyUI Starter",thumbnail:"daisyui.svg"},{name:"bootstrap",title:"Bootstrap Starter",thumbnail:"bootstrap.svg"},{name:"astro",title:"Astro Starter",thumbnail:"astro.svg"},{name:"riot",title:"Riot.js Starter",thumbnail:"riot.svg"},{name:"malina",title:"Malina.js Starter",thumbnail:"malina.svg"},{name:"jquery",title:"jQuery Starter",thumbnail:"jquery.svg"},{name:"backbone",title:"Backbone Starter",thumbnail:"backbone.svg"},{name:"knockout",title:"Knockout Starter",thumbnail:"knockout.svg"},{name:"jest",title:"Jest Starter",thumbnail:"jest.svg"},{name:"jest-react",title:"Jest/React Starter",thumbnail:"jest.svg"},{name:"coffeescript",title:"CoffeeScript Starter",thumbnail:"coffeescript.svg"},{name:"livescript",title:"LiveScript Starter",thumbnail:"livescript.svg"},{name:"civet",title:"Civet Starter",thumbnail:"civet.png"},{name:"clio",title:"Clio Starter",thumbnail:"clio.png"},{name:"imba",title:"Imba Starter",thumbnail:"imba.svg"},{name:"rescript",title:"ReScript Starter",thumbnail:"rescript.png"},{name:"reason",title:"Reason Starter",thumbnail:"reason.svg"},{name:"ocaml",title:"Ocaml Starter",thumbnail:"ocaml.svg"},{name:"python",title:"Python Starter",thumbnail:"python.svg"},{name:"python-wasm",title:"Python (Wasm) Starter",thumbnail:"python.svg"},{name:"r",title:"R Starter",thumbnail:"r.svg"},{name:"ruby",title:"Ruby Starter",thumbnail:"ruby.svg"},{name:"ruby-wasm",title:"Ruby (Wasm) Starter",thumbnail:"ruby.svg"},{name:"go",title:"Go Starter",thumbnail:"go.svg"},{name:"php",title:"PHP Starter",thumbnail:"php.svg"},{name:"php-wasm",title:"PHP (Wasm) Starter",thumbnail:"php.svg"},{name:"cpp",title:"C++ Starter",thumbnail:"cpp.svg"},{name:"cpp-wasm",title:"C++ (Wasm) Starter",thumbnail:"cpp.svg"},{name:"java",title:"Java Starter",thumbnail:"java.svg"},{name:"csharp-wasm",title:"C# (Wasm)",thumbnail:"csharp.svg"},{name:"perl",title:"Perl Starter",thumbnail:"perl.svg"},{name:"lua",title:"Lua Starter",thumbnail:"lua.svg"},{name:"lua-wasm",title:"Lua (wasm) Starter",thumbnail:"lua.svg"},{name:"teal",title:"Teal Starter",thumbnail:"teal.png"},{name:"fennel",title:"Fennel Starter",thumbnail:"fennel.svg"},{name:"julia",title:"Julia Starter",thumbnail:"julia.svg"},{name:"scheme",title:"Scheme Starter",thumbnail:"scheme.svg"},{name:"commonlisp",title:"Common Lisp Starter",thumbnail:"commonlisp.svg"},{name:"clojurescript",title:"ClojureScript Starter",thumbnail:"cljs.svg"},{name:"gleam",title:"Gleam Starter",thumbnail:"gleam.svg"},{name:"tcl",title:"Tcl Starter",thumbnail:"tcl.svg"},{name:"markdown",title:"Markdown Starter",thumbnail:"markdown.svg"},{name:"assemblyscript",title:"AssemblyScript Starter",thumbnail:"assemblyscript.svg"},{name:"wat",title:"WebAssembly Text Starter",thumbnail:"webassembly.svg"},{name:"sql",title:"SQL Starter",thumbnail:"sqlite.svg"},{name:"postgresql",title:"PostgreSQL Starter",thumbnail:"postgresql.svg"},{name:"prolog",title:"Prolog Starter",thumbnail:"tau-prolog.svg"},{name:"blockly",title:"Blockly Starter",thumbnail:"blockly.svg"},{name:"diagrams",title:"Diagrams Starter",thumbnail:"diagrams.svg"}];function m(){return(0,l.jsx)("ul",{className:"list_XWVl",children:i.map(e=>(0,l.jsx)("li",{children:(0,l.jsxs)("a",{href:n.G+"/?template="+e.name,target:"_blank",children:[(0,l.jsx)("img",{src:n.G+"/livecodes/assets/templates/"+e.thumbnail}),(0,l.jsx)("div",{children:e.title})]})},e.name))})}let c={},o="Templates",u={},h=[{value:"Starter Templates",id:"starter-templates",level:2},{value:"Template List",id:"template-list",level:3},{value:"User Templates",id:"user-templates",level:2},{value:"Related",id:"related",level:2}];function p(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,s.a)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(t.header,{children:(0,l.jsx)(t.h1,{id:"templates",children:"Templates"})}),"\n","\n",(0,l.jsxs)(t.p,{children:["A new project can be based on any of the provided ",(0,l.jsx)(t.a,{href:"#starter-templates",children:"starter templates"})," or ",(0,l.jsx)(t.a,{href:"#user-templates",children:"user templates"}),"."]}),"\n",(0,l.jsx)(t.p,{children:"A new project (from template) can be started from:"}),"\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsx)(t.li,{children:"Project menu \u2192 New"}),"\n",(0,l.jsxs)(t.li,{children:[(0,l.jsx)(t.a,{href:"/docs/features/welcome",children:"Welcome Screen"})," \u2192 New"]}),"\n",(0,l.jsxs)(t.li,{children:["Direct URL: ",(0,l.jsx)(t.a,{href:"https://livecodes.io?new",children:"https://livecodes.io?new"})]}),"\n"]}),"\n",(0,l.jsx)(t.h2,{id:"starter-templates",children:"Starter Templates"}),"\n",(0,l.jsxs)(t.p,{children:["A Large number of starter templates are available. They act as starting points and example usage for the ",(0,l.jsx)(t.a,{href:"/docs/languages/",children:"languages"})," available in LiveCodes."]}),"\n",(0,l.jsx)(t.p,{children:"A direct link for a starter template has the following format:"}),"\n",(0,l.jsxs)(t.p,{children:[(0,l.jsx)(t.code,{children:"?template={template_name}"})," (e.g. ",(0,l.jsx)(t.a,{href:"https://livecodes.io/?template=react",children:"https://livecodes.io/?template=react"}),")"]}),"\n",(0,l.jsxs)(t.p,{children:["The list of template names are documented ",(0,l.jsx)(t.a,{href:"/docs/api/internal/type-aliases/TemplateName",children:"here"}),"."]}),"\n",(0,l.jsx)(t.h3,{id:"template-list",children:"Template List"}),"\n",(0,l.jsx)(t.p,{children:"The following list of starter templates are available:"}),"\n",(0,l.jsx)(m,{}),"\n",(0,l.jsx)(t.h2,{id:"user-templates",children:"User Templates"}),"\n",(0,l.jsx)(t.p,{children:"Any project loaded in LiveCodes can be saved as a user template, to be used later as a starting point for new projects."}),"\n",(0,l.jsx)(t.p,{children:"A project can be saved as a user template from Project menu \u2192 Save as \u2192 Template."}),"\n",(0,l.jsx)(t.p,{children:"It can then be accessed from Project menu \u2192 New ... \u2192 My Templates."}),"\n",(0,l.jsxs)(t.p,{children:["A user template can be set as ",(0,l.jsx)(t.a,{href:"/docs/features/default-template-language",children:"default template"})," to be automatically loaded when loading the app."]}),"\n",(0,l.jsxs)(t.p,{children:["User templates are scoped to the currently ",(0,l.jsx)(t.a,{href:"/docs/features/user-management",children:"logged-in user"}),". They can be ",(0,l.jsx)(t.a,{href:"/docs/features/backup-restore",children:"backed up/restored"})," and ",(0,l.jsx)(t.a,{href:"/docs/features/sync",children:"synced"})," the same as other user data."]}),"\n",(0,l.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,l.jsxs)(t.ul,{children:["\n",(0,l.jsx)(t.li,{children:(0,l.jsx)(t.a,{href:"/docs/features/default-template-language",children:"Default Template/Language"})}),"\n",(0,l.jsx)(t.li,{children:(0,l.jsx)(t.a,{href:"/docs/features/projects",children:"Project"})}),"\n",(0,l.jsx)(t.li,{children:(0,l.jsx)(t.a,{href:"/docs/features/snippets",children:"Code Snippets"})}),"\n",(0,l.jsx)(t.li,{children:(0,l.jsx)(t.a,{href:"/docs/features/user-management",children:"User management"})}),"\n",(0,l.jsx)(t.li,{children:(0,l.jsx)(t.a,{href:"/docs/features/backup-restore",children:"Backup/Restore"})}),"\n",(0,l.jsx)(t.li,{children:(0,l.jsx)(t.a,{href:"/docs/features/sync",children:"Sync"})}),"\n",(0,l.jsx)(t.li,{children:(0,l.jsx)(t.a,{href:"/docs/languages/",children:"Languages"})}),"\n"]})]})}function d(e={}){let{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,l.jsx)(t,{...e,children:(0,l.jsx)(p,{...e})}):p(e)}},65:function(e,t,a){a.d(t,{Z:function(){return i},a:function(){return n}});var r=a(7294);let l={},s=r.createContext(l);function n(e){let t=r.useContext(s);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:n(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/c141421f.2800f2d6.js b/docs/assets/js/c141421f.2800f2d6.js new file mode 100644 index 0000000..f297c91 --- /dev/null +++ b/docs/assets/js/c141421f.2800f2d6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7738"],{3491:function(e){e.exports=JSON.parse('{"name":"docusaurus-theme-search-algolia","id":"default"}')}}]); \ No newline at end of file diff --git a/docs/assets/js/c3aada04.22a6047f.js b/docs/assets/js/c3aada04.22a6047f.js new file mode 100644 index 0000000..ce695c3 --- /dev/null +++ b/docs/assets/js/c3aada04.22a6047f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6825"],{3853:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>o,metadata:()=>r,assets:()=>a,toc:()=>l,contentTitle:()=>i});var r=JSON.parse('{"id":"languages/rescript","title":"ReScript","description":"TODO...","source":"@site/docs/languages/rescript.mdx","sourceDirName":"languages","slug":"/languages/rescript","permalink":"/docs/languages/rescript","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/rescript.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Reason","permalink":"/docs/languages/reason"},"next":{"title":"Rich Text Editor","permalink":"/docs/languages/richtext"}}'),s=n("5893"),c=n("65");let o={},i="ReScript",a={},l=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,c.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"rescript",children:"ReScript"})}),"\n",(0,s.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,c.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(u,{...e})}):u(e)}},65:function(e,t,n){n.d(t,{Z:function(){return i},a:function(){return o}});var r=n(7294);let s={},c=r.createContext(s);function o(e){let t=r.useContext(c);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(c.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/c4203c52.f4192e00.js b/docs/assets/js/c4203c52.f4192e00.js new file mode 100644 index 0000000..be1fcf5 --- /dev/null +++ b/docs/assets/js/c4203c52.f4192e00.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7585"],{2158:function(e,s,d){d.r(s),d.d(s,{default:()=>j,frontMatter:()=>r,metadata:()=>n,assets:()=>t,toc:()=>o,contentTitle:()=>l});var n=JSON.parse('{"id":"api/internal/type-aliases/CDN","title":"Type Alias: CDN","description":"CDN: \\"jspm\\" \\\\| \\"skypack\\" \\\\| \\"jsdelivr\\" \\\\| \\"fastly.jsdelivr\\" \\\\| \\"gcore.jsdelivr\\" \\\\| \\"testingcf.jsdelivr\\" \\\\| \\"jsdelivr.b-cdn\\" \\\\| \\"jsdelivr.gh\\" \\\\| \\"fastly.jsdelivr.gh\\" \\\\| \\"gcore.jsdelivr.gh\\" \\\\| \\"testingcf.jsdelivr.gh\\" \\\\| \\"jsdelivr.b-cdn.gh\\" \\\\| \\"jsdelivr.esm\\" \\\\| \\"fastly.jsdelivr.esm\\" \\\\| \\"gcore.jsdelivr.esm\\" \\\\| \\"testingcf.jsdelivr.esm\\" \\\\| \\"jsdelivr.b-cdn.esm\\" \\\\| \\"esm.run\\" \\\\| \\"esm.sh\\" \\\\| \\"esbuild\\" \\\\| \\"bundle.run\\" \\\\| \\"unpkg\\" \\\\| \\"npmcdn\\" \\\\| \\"statically\\"","source":"@site/docs/api/internal/type-aliases/CDN.md","sourceDirName":"api/internal/type-aliases","slug":"/api/internal/type-aliases/CDN","permalink":"/docs/api/internal/type-aliases/CDN","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/type-aliases/CDN.md","tags":[],"version":"current","frontMatter":{}}'),i=d("5893"),c=d("65");let r={},l="Type Alias: CDN",t={},o=[{value:"Defined in",id:"defined-in",level:2}];function a(e){let s={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",strong:"strong",...(0,c.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.header,{children:(0,i.jsx)(s.h1,{id:"type-alias-cdn",children:"Type Alias: CDN"})}),"\n",(0,i.jsxs)(s.blockquote,{children:["\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"CDN"}),": ",(0,i.jsx)(s.code,{children:'"jspm"'})," | ",(0,i.jsx)(s.code,{children:'"skypack"'})," | ",(0,i.jsx)(s.code,{children:'"jsdelivr"'})," | ",(0,i.jsx)(s.code,{children:'"fastly.jsdelivr"'})," | ",(0,i.jsx)(s.code,{children:'"gcore.jsdelivr"'})," | ",(0,i.jsx)(s.code,{children:'"testingcf.jsdelivr"'})," | ",(0,i.jsx)(s.code,{children:'"jsdelivr.b-cdn"'})," | ",(0,i.jsx)(s.code,{children:'"jsdelivr.gh"'})," | ",(0,i.jsx)(s.code,{children:'"fastly.jsdelivr.gh"'})," | ",(0,i.jsx)(s.code,{children:'"gcore.jsdelivr.gh"'})," | ",(0,i.jsx)(s.code,{children:'"testingcf.jsdelivr.gh"'})," | ",(0,i.jsx)(s.code,{children:'"jsdelivr.b-cdn.gh"'})," | ",(0,i.jsx)(s.code,{children:'"jsdelivr.esm"'})," | ",(0,i.jsx)(s.code,{children:'"fastly.jsdelivr.esm"'})," | ",(0,i.jsx)(s.code,{children:'"gcore.jsdelivr.esm"'})," | ",(0,i.jsx)(s.code,{children:'"testingcf.jsdelivr.esm"'})," | ",(0,i.jsx)(s.code,{children:'"jsdelivr.b-cdn.esm"'})," | ",(0,i.jsx)(s.code,{children:'"esm.run"'})," | ",(0,i.jsx)(s.code,{children:'"esm.sh"'})," | ",(0,i.jsx)(s.code,{children:'"esbuild"'})," | ",(0,i.jsx)(s.code,{children:'"bundle.run"'})," | ",(0,i.jsx)(s.code,{children:'"unpkg"'})," | ",(0,i.jsx)(s.code,{children:'"npmcdn"'})," | ",(0,i.jsx)(s.code,{children:'"statically"'})]}),"\n"]}),"\n",(0,i.jsx)(s.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1861",children:"models.ts:1861"})})]})}function j(e={}){let{wrapper:s}={...(0,c.a)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},65:function(e,s,d){d.d(s,{Z:function(){return l},a:function(){return r}});var n=d(7294);let i={},c=n.createContext(i);function r(e){let s=n.useContext(c);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),n.createElement(c.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/c4c830c1.163d8178.js b/docs/assets/js/c4c830c1.163d8178.js new file mode 100644 index 0000000..14e5ecc --- /dev/null +++ b/docs/assets/js/c4c830c1.163d8178.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7744"],{4104:function(e,n,t){t.r(n),t.d(n,{default:()=>h,frontMatter:()=>a,metadata:()=>s,assets:()=>l,toc:()=>c,contentTitle:()=>o});var s=JSON.parse('{"id":"api/internal/type-aliases/Theme","title":"Type Alias: Theme","description":"Theme: \\"light\\" \\\\| \\"dark\\"","source":"@site/docs/api/internal/type-aliases/Theme.md","sourceDirName":"api/internal/type-aliases","slug":"/api/internal/type-aliases/Theme","permalink":"/docs/api/internal/type-aliases/Theme","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/type-aliases/Theme.md","tags":[],"version":"current","frontMatter":{}}'),i=t("5893"),r=t("65");let a={},o="Type Alias: Theme",l={},c=[{value:"Defined in",id:"defined-in",level:2}];function d(e){let n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",strong:"strong",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"type-alias-theme",children:"Type Alias: Theme"})}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Theme"}),": ",(0,i.jsx)(n.code,{children:'"light"'})," | ",(0,i.jsx)(n.code,{children:'"dark"'})]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1926",children:"models.ts:1926"})})]})}function h(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},65:function(e,n,t){t.d(n,{Z:function(){return o},a:function(){return a}});var s=t(7294);let i={},r=s.createContext(i);function a(e){let n=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/c78257db.c80f5c3f.js b/docs/assets/js/c78257db.c80f5c3f.js new file mode 100644 index 0000000..37876e1 --- /dev/null +++ b/docs/assets/js/c78257db.c80f5c3f.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5682"],{1571:function(e,t,s){s.r(t),s.d(t,{default:()=>h,frontMatter:()=>l,metadata:()=>o,assets:()=>c,toc:()=>d,contentTitle:()=>a});var o=JSON.parse('{"id":"features/tools-pane","title":"Tools Pane","description":"The resizeable tools pane (below the result page) provides an area for developer tools. This currently includes:","source":"@site/docs/features/tools-pane.mdx","sourceDirName":"features","slug":"/features/tools-pane","permalink":"/docs/features/tools-pane","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/tools-pane.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"External Resources","permalink":"/docs/features/external-resources"},"next":{"title":"Console","permalink":"/docs/features/console"}}'),n=s("5893"),r=s("65"),i=s("3365");let l={},a="Tools Pane",c={},d=[];function u(e){let t={a:"a",code:"code",h1:"h1",header:"header",li:"li",p:"p",ul:"ul",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"tools-pane",children:"Tools Pane"})}),"\n","\n",(0,n.jsx)(t.p,{children:"The resizeable tools pane (below the result page) provides an area for developer tools. This currently includes:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"/docs/features/console",children:"Console"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"/docs/features/compiled-code",children:"Compiled code viewer"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"/docs/features/tests",children:"Tests"})}),"\n",(0,n.jsx)(t.li,{children:"Open result page in new window (not in embeds)"}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"/docs/features/broadcast",children:"Broadcast"})," status (not in embeds)"]}),"\n",(0,n.jsx)(t.li,{children:"Loading spinner that appears when the result page is loading"}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"The pane can be resized by dragging the bar. Clicking a tool button toggles opening/closing the pane. Double-click toggles maximize/close."}),"\n",(0,n.jsx)(t.p,{children:"It can be configured to have any of the following states:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"closed"})," (default)"]}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.code,{children:"open"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.code,{children:"full"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.code,{children:"none"})}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["e.g. ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?console=open&js=console.log('hello",children:"https://livecodes.io/?console=open&js=console.log('hello"}),"') ",(0,n.jsx)("br",{}),"\nopens the console and sets JavaScript code."]}),"\n",(0,n.jsx)(t.p,{children:"Demo: (console=open)"}),"\n",(0,n.jsx)(i.Z,{params:{console:"open",js:"console.log('hello')"}}),"\n",(0,n.jsx)("p",{children:"\xa0"}),"\n",(0,n.jsx)(t.p,{children:"Demo: (console=full)"}),"\n",(0,n.jsx)(i.Z,{params:{console:"full",js:"console.log('hello')"}})]})}function h(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},3365:function(e,t,s){s.d(t,{Z:()=>g});var o=s("5893"),n=s("4200"),r=s("7294"),i=s("8294");function l(e){let t=(0,r.useRef)(null),[s,n]=(0,r.useState)(e.className||""),[l,a]=(0,r.useState)(e.style||{}),[c,d]=(0,r.useState)(e.height),[u,h]=(0,r.useState)(),[p,f]=(0,r.useState)(JSON.stringify(e.config||"")),[m,g]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:o,height:r,sdkReady:l,config:c,...y}=e;if(n(s||""),a(o||{}),d(r),u&&m===JSON.stringify(y)){if(p===JSON.stringify(c))return;f(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else g(JSON.stringify(y)),u?.destroy(),(0,i.T)(t.current,{config:c,...y}).then(e=>{h(e),"function"==typeof l&&l(e)})},[e]),(0,r.useEffect)(()=>()=>{u?.destroy()},[]),(0,o.jsx)("div",{ref:t,className:s,style:l,"data-height":c})}var a=s("1858"),c=s("3262"),d=s("1705"),u=s("7645"),h=s("8168"),p=s("8228"),f=s("5050");function m(e){let[t,s]=(0,r.useState)(e.js),[n,i]=(0,r.useState)(e.ts),[l,a]=(0,r.useState)(e.react),[m,g]=(0,r.useState)(e.vue),[y,v]=(0,r.useState)(e.svelte),b="3.7rem",[j,w]=(0,r.useState)(!0),[x,S]=(0,r.useState)(b),C=(0,r.useRef)(null),P=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${b})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${b})`)},255)};return(0,r.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(n,"ts")),a(e(l,"jsx")),g(e(m,"html")),v(e(y,"html"))}},[]),(0,o.jsxs)("details",{className:`alert alert--info ${f.Z.details} ${p.Z.details}`,"data-collapsed":j,style:{height:j?b:x,overflow:"hidden",willChange:"height",transition:`height ${j?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,o.jsx)("summary",{onClick:()=>{w(!j),P()},children:"show code"}),(0,o.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,o.jsx)("div",{className:f.Z.collapsibleContent,children:(0,o.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,o.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"js",children:t})}),(0,o.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"ts",children:n})}),(0,o.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"jsx",children:l})}),(0,o.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"html",children:m})}),(0,o.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:P},children:(0,o.jsx)(d.Z,{language:"html",children:y})})]})})})]})}function g(e){let{className:t,style:s,showCode:r,height:i,...c}=e,{colorMode:d}=(0,n.I)(),u=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),f=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (); +} + +`.trimStart(),g=` + + + +`,y=` + + +
+ +`.trimStart();return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:a.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,o.jsx)(m,{js:h,ts:p,react:f,vue:g,svelte:y})]})}},8294:function(e,t,s){s.d(t,{T:function(){return n},r:function(){return r}});var o=s(7728);async function n(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:o,loading:n="lazy",view:i}=t,l=o||"headless"===i,a=null,c=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)P(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",l?"eager":n);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let f=!1,m="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let o="livecodes",r=a.querySelector(`iframe.${o}`),i=r||document.createElement("iframe");i.classList.add(o),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===n?"eager":"lazy"),l?P(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),i.onload=()=>{e(i)},i.src=d.href,r||a.appendChild(i)}),y=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>f?Promise.reject(m):new Promise(async e=>{y.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},u),await y,e()}),b=(e,t)=>new Promise(async(s,o)=>{if(f)return o(m);await v();let n=E();addEventListener("message",function t(r){if(r.source===g.contentWindow&&r.origin===u&&r.data?.type==="livecodes-api-response"&&r.data?.id===n&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?o(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:n,args:t},u)}),j={},w=["load","ready","code","console","tests","destroy"],x=(e,t)=>{if(f)throw Error(m);return w.includes(e)?(b("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[e]?.length===0&&b("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==u||!t||!j[t])return;let s=e.data?.payload;j[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(j).forEach(e=>{e.length=0}),g?.remove?.(),f=!0};function P(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>b("run"),format:e=>b("format",[e]),getShareUrl:e=>b("getShareUrl",[e]),getConfig:e=>b("getConfig",[e]),setConfig:e=>b("setConfig",[e]),getCode:()=>b("getCode"),show:(e,t)=>b("show",[e,t]),runTests:()=>b("runTests"),onChange:e=>x("code",e),watch:x,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),o=1;oy.settled?b("destroy").then(C):f?Promise.reject(m):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:n={},config:r={},headless:i,import:l,lite:a,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,o]=t;void 0!==o&&e.searchParams.set(s,String(o))});let h="headless"===t.view||i;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),u.set("config","code/"+(0,o.compressToEncodedURIComponent)(JSON.stringify(r))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{u.set("params",(0,o.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(n[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return l},a:function(){return i}});var o=s(7294);let n={},r=o.createContext(n);function i(e){let t=o.useContext(r);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/ca17531e.fe506204.js b/docs/assets/js/ca17531e.fe506204.js new file mode 100644 index 0000000..f661ec5 --- /dev/null +++ b/docs/assets/js/ca17531e.fe506204.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7942"],{6345:function(e,n,t){t.r(n),t.d(n,{default:()=>h,frontMatter:()=>c,metadata:()=>s,assets:()=>d,toc:()=>a,contentTitle:()=>l});var s=JSON.parse('{"id":"api/internal/type-aliases/WatchTests","title":"Type Alias: WatchTests()","description":"WatchTests: (event, fn) => object","source":"@site/docs/api/internal/type-aliases/WatchTests.md","sourceDirName":"api/internal/type-aliases","slug":"/api/internal/type-aliases/WatchTests","permalink":"/docs/api/internal/type-aliases/WatchTests","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/type-aliases/WatchTests.md","tags":[],"version":"current","frontMatter":{}}'),r=t("5893"),i=t("65");let c={},l="Type Alias: WatchTests()",d={},a=[{value:"Parameters",id:"parameters",level:2},{value:"Returns",id:"returns",level:2},{value:"remove()",id:"remove",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Defined in",id:"defined-in",level:2}];function o(e){let n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",p:"p",strong:"strong",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"type-alias-watchtests",children:"Type Alias: WatchTests()"})}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"WatchTests"}),": (",(0,r.jsx)(n.code,{children:"event"}),", ",(0,r.jsx)(n.code,{children:"fn"}),") => ",(0,r.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"event"}),": ",(0,r.jsx)(n.code,{children:'"tests"'})]}),"\n",(0,r.jsxs)(n.p,{children:["\u2022 ",(0,r.jsx)(n.strong,{children:"fn"})]}),"\n",(0,r.jsx)(n.h2,{id:"returns",children:"Returns"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"object"})}),"\n",(0,r.jsx)(n.h3,{id:"remove",children:"remove()"}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"remove"}),": () => ",(0,r.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,r.jsx)(n.h4,{id:"returns-1",children:"Returns"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.code,{children:"void"})}),"\n",(0,r.jsx)(n.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L258",children:"models.ts:258"})})]})}function h(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}},65:function(e,n,t){t.d(n,{Z:function(){return l},a:function(){return c}});var s=t(7294);let r={},i=s.createContext(r);function c(e){let n=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/ca96397b.806510c9.js b/docs/assets/js/ca96397b.806510c9.js new file mode 100644 index 0000000..ad1086b --- /dev/null +++ b/docs/assets/js/ca96397b.806510c9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6467"],{8317:function(e,n,a){a.r(n),a.d(n,{default:()=>g,frontMatter:()=>d,metadata:()=>i,assets:()=>r,toc:()=>h,contentTitle:()=>c});var i=JSON.parse('{"id":"languages/diagrams","title":"Diagrams","description":"Overview","source":"@site/docs/languages/diagrams.mdx","sourceDirName":"languages","slug":"/languages/diagrams","permalink":"/docs/languages/diagrams","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/diagrams.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"cssnano","permalink":"/docs/languages/cssnano"},"next":{"title":"doT","permalink":"/docs/languages/dot"}}'),t=a("5893"),l=a("65");function s(e){let n=e.id?`/?x=id/${e.id}`:e.template?`/?template=${e.template}`:"/";return(0,t.jsx)("a",{href:n,target:"_blank",children:e.children||"open in LiveCodes"})}let d={},c="Diagrams",r={},h=[{value:"Overview",id:"overview",level:2},{value:"Usage",id:"usage",level:2},{value:"1. Add a diagram target:",id:"1-add-a-diagram-target",level:4},{value:"2. Add a script element with the diagram syntax:",id:"2-add-a-script-element-with-the-diagram-syntax",level:4},{value:"Supported Libraries",id:"supported-libraries",level:2},{value:"Cytoscape",id:"cytoscape",level:3},{value:"ELK",id:"elk",level:3},{value:"Gnuplot",id:"gnuplot",level:3},{value:"Graphviz",id:"graphviz",level:3},{value:"Mermaid",id:"mermaid",level:3},{value:"Nomnoml",id:"nomnoml",level:3},{value:"Pintora",id:"pintora",level:3},{value:"Plotly",id:"plotly",level:3},{value:"Svgbob",id:"svgbob",level:3},{value:"Vega",id:"vega",level:3},{value:"VegaLite",id:"vegalite",level:3},{value:"WaveDrom",id:"wavedrom",level:3}];function o(e){let n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,l.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.header,{children:(0,t.jsx)(n.h1,{id:"diagrams",children:"Diagrams"})}),"\n","\n",(0,t.jsx)(n.h2,{id:"overview",children:"Overview"}),"\n",(0,t.jsx)(n.p,{children:"Diagrams-as-code."}),"\n",(0,t.jsxs)(n.p,{children:["Allows using syntax for multiple visualization libraries inside HTML to produce diagrams.\nThe rendered diagrams are added to the ",(0,t.jsx)(n.a,{href:"/docs/features/result",children:"result page"})," as either:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"SVG elements (which you can style with CSS or manipulate with JavaScript)"}),"\n",(0,t.jsx)(n.li,{children:"HTML images (which you can right-click and save or open in a new window)"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Diagrams from multiple libraries can be used in the same page. Only the libraries used will be loaded in the LiveCodes playground. The result page will have no libraries (only the output SVG or images)."}),"\n",(0,t.jsx)(s,{template:"diagrams",children:"Open starter template in LiveCodes"}),"\n",(0,t.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,t.jsxs)(n.p,{children:["This code: (",(0,t.jsx)(s,{id:"2m8u9hgeiq4"}),")"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:'
\n\n + + +`,v=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(m,{js:h,ts:p,react:g,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return o},r:function(){return r}});var n=s(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:o="lazy",view:i}=t,a=n||"headless"===i,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":o);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let g=!1,m="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",r=l.querySelector(`iframe.${n}`),i=r||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===o?"eager":"lazy"),a?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),i.onload=()=>{e(i)},i.src=d.href,r||l.appendChild(i)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>g?Promise.reject(m):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},u),await v,e()}),b=(e,t)=>new Promise(async(s,n)=>{if(g)return n(m);await y();let o=k();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===u&&r.data?.type==="livecodes-api-response"&&r.data?.id===o&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:o,args:t},u)}),w={},x=["load","ready","code","console","tests","destroy"],j=(e,t)=>{if(g)throw Error(m);return x.includes(e)?(b("watch",[e]),w[e]||(w[e]=[]),w[e]?.push(t),{remove:()=>{w[e]=w[e]?.filter(e=>e!==t),w[e]?.length===0&&b("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},C=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=C(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==u||!t||!w[t])return;let s=e.data?.payload;w[t]?.forEach(e=>{e(s)})});let S=()=>{Object.values(w).forEach(e=>{e.length=0}),f?.remove?.(),g=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let k=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>b("run"),format:e=>b("format",[e]),getShareUrl:e=>b("getShareUrl",[e]),getConfig:e=>b("getConfig",[e]),setConfig:e=>b("setConfig",[e]),getCode:()=>b("getCode"),show:(e,t)=>b("show",[e,t]),runTests:()=>b("runTests"),onChange:e=>j("code",e),watch:j,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nv.settled?b("destroy").then(S):g?Promise.reject(m):(S(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:o={},config:r={},headless:i,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let h="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),u.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(r))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{u.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return i}});var n=s(7294);let o={},r=n.createContext(o);function i(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/cda3ee9e.8c5229b0.js b/docs/assets/js/cda3ee9e.8c5229b0.js new file mode 100644 index 0000000..7a4db89 --- /dev/null +++ b/docs/assets/js/cda3ee9e.8c5229b0.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6949"],{970:function(e,n,s){s.r(n),s.d(n,{default:()=>d,frontMatter:()=>r,metadata:()=>t,assets:()=>i,toc:()=>l,contentTitle:()=>c});var t=JSON.parse('{"id":"languages/cssnano","title":"cssnano","description":"TODO...","source":"@site/docs/languages/cssnano.mdx","sourceDirName":"languages","slug":"/languages/cssnano","permalink":"/docs/languages/cssnano","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/cssnano.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"CSS Modules","permalink":"/docs/languages/cssmodules"},"next":{"title":"Diagrams","permalink":"/docs/languages/diagrams"}}'),a=s("5893"),o=s("65");let r={},c="cssnano",i={},l=[];function u(e){let n={h1:"h1",header:"header",p:"p",...(0,o.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.header,{children:(0,a.jsx)(n.h1,{id:"cssnano",children:"cssnano"})}),"\n",(0,a.jsx)(n.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(u,{...e})}):u(e)}},65:function(e,n,s){s.d(n,{Z:function(){return c},a:function(){return r}});var t=s(7294);let a={},o=t.createContext(a);function r(e){let n=t.useContext(o);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:r(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/ce0d5460.c88977d8.js b/docs/assets/js/ce0d5460.c88977d8.js new file mode 100644 index 0000000..51e8b10 --- /dev/null +++ b/docs/assets/js/ce0d5460.c88977d8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2160"],{5641:function(e,n,s){s.r(n),s.d(n,{default:()=>a,frontMatter:()=>c,metadata:()=>d,assets:()=>o,toc:()=>h,contentTitle:()=>r});var d=JSON.parse('{"id":"api/interfaces/Config","title":"Interface: Config","description":"The playground configuration object.","source":"@site/docs/api/interfaces/Config.md","sourceDirName":"api/interfaces","slug":"/api/interfaces/Config","permalink":"/docs/api/interfaces/Config","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/interfaces/Config.md","tags":[],"version":"current","frontMatter":{}}'),i=s("5893"),l=s("65");let c={},r="Interface: Config",o={},h=[{value:"Extends",id:"extends",level:2},{value:"Properties",id:"properties",level:2},{value:"activeEditor",id:"activeeditor",level:3},{value:"Inherited from",id:"inherited-from",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"allowLangChange",id:"allowlangchange",level:3},{value:"Default",id:"default",level:4},{value:"Inherited from",id:"inherited-from-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"appLanguage",id:"applanguage",level:3},{value:"Inherited from",id:"inherited-from-2",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"autosave",id:"autosave",level:3},{value:"Default",id:"default-1",level:4},{value:"Inherited from",id:"inherited-from-3",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"autotest",id:"autotest",level:3},{value:"Default",id:"default-2",level:4},{value:"Inherited from",id:"inherited-from-4",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"autoupdate",id:"autoupdate",level:3},{value:"Default",id:"default-3",level:4},{value:"Inherited from",id:"inherited-from-5",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"closeBrackets",id:"closebrackets",level:3},{value:"Default",id:"default-4",level:4},{value:"Inherited from",id:"inherited-from-6",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"cssPreset",id:"csspreset",level:3},{value:"Inherited from",id:"inherited-from-7",level:4},{value:"Defined in",id:"defined-in-7",level:4},{value:"customSettings",id:"customsettings",level:3},{value:"adoc",id:"adoc",level:4},{value:"app.svelte",id:"appsvelte",level:4},{value:"app.vue",id:"appvue",level:4},{value:"art",id:"art",level:4},{value:"art-template",id:"art-template",level:4},{value:"as",id:"as",level:4},{value:"asc",id:"asc",level:4},{value:"asciidoc",id:"asciidoc",level:4},{value:"assemblyscript",id:"assemblyscript",level:4},{value:"astro",id:"astro",level:4},{value:"autoprefixer",id:"autoprefixer",level:4},{value:"babel",id:"babel",level:4},{value:"bb",id:"bb",level:4},{value:"bbcode",id:"bbcode",level:4},{value:"Binary",id:"binary",level:4},{value:"blockly",id:"blockly",level:4},{value:"blockly.xml",id:"blocklyxml",level:4},{value:"c",id:"c",level:4},{value:"C",id:"c-1",level:4},{value:"c++",id:"c-2",level:4},{value:"civet",id:"civet",level:4},{value:"clang",id:"clang",level:4},{value:"clang.cpp",id:"clangcpp",level:4},{value:"clio",id:"clio",level:4},{value:"clj",id:"clj",level:4},{value:"cljc",id:"cljc",level:4},{value:"cljs",id:"cljs",level:4},{value:"clojure",id:"clojure",level:4},{value:"clojurescript",id:"clojurescript",level:4},{value:"coffee",id:"coffee",level:4},{value:"coffeescript",id:"coffeescript",level:4},{value:"common-lisp",id:"common-lisp",level:4},{value:"commonlisp",id:"commonlisp",level:4},{value:"convertCommonjs?",id:"convertcommonjs",level:4},{value:"cp",id:"cp",level:4},{value:"cpp",id:"cpp",level:4},{value:"cpp-wasm",id:"cpp-wasm",level:4},{value:"cppm",id:"cppm",level:4},{value:"cppwasm",id:"cppwasm",level:4},{value:"cs",id:"cs",level:4},{value:"cs-wasm",id:"cs-wasm",level:4},{value:"csharp",id:"csharp",level:4},{value:"csharp-wasm",id:"csharp-wasm",level:4},{value:"css",id:"css",level:4},{value:"cssmodules",id:"cssmodules",level:4},{value:"cssnano",id:"cssnano",level:4},{value:"cwasm",id:"cwasm",level:4},{value:"cxx",id:"cxx",level:4},{value:"defaultCDN?",id:"defaultcdn",level:4},{value:"diagram",id:"diagram",level:4},{value:"diagrams",id:"diagrams",level:4},{value:"dot",id:"dot",level:4},{value:"edn",id:"edn",level:4},{value:"ejs",id:"ejs",level:4},{value:"es",id:"es",level:4},{value:"eta",id:"eta",level:4},{value:"fennel",id:"fennel",level:4},{value:"flow",id:"flow",level:4},{value:"fnl",id:"fnl",level:4},{value:"gleam",id:"gleam",level:4},{value:"go",id:"go",level:4},{value:"golang",id:"golang",level:4},{value:"graph",id:"graph",level:4},{value:"h",id:"h",level:4},{value:"haml",id:"haml",level:4},{value:"handlebars",id:"handlebars",level:4},{value:"hbs",id:"hbs",level:4},{value:"hpp",id:"hpp",level:4},{value:"htm",id:"htm",level:4},{value:"html",id:"html",level:4},{value:"ii",id:"ii",level:4},{value:"imba",id:"imba",level:4},{value:"imports?",id:"imports",level:4},{value:"ixx",id:"ixx",level:4},{value:"jade",id:"jade",level:4},{value:"java",id:"java",level:4},{value:"javascript",id:"javascript",level:4},{value:"jinja",id:"jinja",level:4},{value:"jl",id:"jl",level:4},{value:"js",id:"js",level:4},{value:"json",id:"json",level:4},{value:"jsx",id:"jsx",level:4},{value:"julia",id:"julia",level:4},{value:"less",id:"less",level:4},{value:"lightningcss",id:"lightningcss",level:4},{value:"liquid",id:"liquid",level:4},{value:"liquidjs",id:"liquidjs",level:4},{value:"lisp",id:"lisp",level:4},{value:"livescript",id:"livescript",level:4},{value:"ls",id:"ls",level:4},{value:"lua",id:"lua",level:4},{value:"lua-wasm",id:"lua-wasm",level:4},{value:"luawasm",id:"luawasm",level:4},{value:"malina",id:"malina",level:4},{value:"malinajs",id:"malinajs",level:4},{value:"mapImports?",id:"mapimports",level:4},{value:"markdown",id:"markdown",level:4},{value:"md",id:"md",level:4},{value:"mdown",id:"mdown",level:4},{value:"mdx",id:"mdx",level:4},{value:"mjml",id:"mjml",level:4},{value:"mkdn",id:"mkdn",level:4},{value:"ml",id:"ml",level:4},{value:"mli",id:"mli",level:4},{value:"mustache",id:"mustache",level:4},{value:"njk",id:"njk",level:4},{value:"nunjucks",id:"nunjucks",level:4},{value:"ocaml",id:"ocaml",level:4},{value:"perl",id:"perl",level:4},{value:"pg",id:"pg",level:4},{value:"pg.sql",id:"pgsql",level:4},{value:"pglite",id:"pglite",level:4},{value:"pglite.sql",id:"pglitesql",level:4},{value:"pgsql",id:"pgsql-1",level:4},{value:"pgsql.sql",id:"pgsqlsql",level:4},{value:"php",id:"php",level:4},{value:"php-wasm",id:"php-wasm",level:4},{value:"phpwasm",id:"phpwasm",level:4},{value:"pintora",id:"pintora",level:4},{value:"pl",id:"pl",level:4},{value:"plt",id:"plt",level:4},{value:"pm",id:"pm",level:4},{value:"postcss",id:"postcss",level:4},{value:"postcssImportUrl",id:"postcssimporturl",level:4},{value:"postcssPresetEnv",id:"postcsspresetenv",level:4},{value:"postgre.sql",id:"postgresql",level:4},{value:"postgres",id:"postgres",level:4},{value:"postgresql",id:"postgresql-1",level:4},{value:"postgresql.sql",id:"postgresqlsql",level:4},{value:"prolog",id:"prolog",level:4},{value:"prolog.pl",id:"prologpl",level:4},{value:"pug",id:"pug",level:4},{value:"purgecss",id:"purgecss",level:4},{value:"py",id:"py",level:4},{value:"py-wasm",id:"py-wasm",level:4},{value:"py3",id:"py3",level:4},{value:"pyodide",id:"pyodide",level:4},{value:"python",id:"python",level:4},{value:"python-wasm",id:"python-wasm",level:4},{value:"pythonwasm",id:"pythonwasm",level:4},{value:"pywasm",id:"pywasm",level:4},{value:"r",id:"r",level:4},{value:"r-wasm",id:"r-wasm",level:4},{value:"rb",id:"rb",level:4},{value:"re",id:"re",level:4},{value:"react",id:"react",level:4},{value:"react-jsx",id:"react-jsx",level:4},{value:"react-native",id:"react-native",level:4},{value:"react-native-tsx",id:"react-native-tsx",level:4},{value:"react-native.jsx",id:"react-nativejsx",level:4},{value:"react-native.tsx",id:"react-nativetsx",level:4},{value:"react-tsx",id:"react-tsx",level:4},{value:"react.jsx",id:"reactjsx",level:4},{value:"react.tsx",id:"reacttsx",level:4},{value:"reason",id:"reason",level:4},{value:"rei",id:"rei",level:4},{value:"res",id:"res",level:4},{value:"rescript",id:"rescript",level:4},{value:"resi",id:"resi",level:4},{value:"rich",id:"rich",level:4},{value:"richtext",id:"richtext",level:4},{value:"riot",id:"riot",level:4},{value:"riotjs",id:"riotjs",level:4},{value:"rlang",id:"rlang",level:4},{value:"rstats",id:"rstats",level:4},{value:"rte",id:"rte",level:4},{value:"rte.html",id:"rtehtml",level:4},{value:"ruby",id:"ruby",level:4},{value:"ruby-wasm",id:"ruby-wasm",level:4},{value:"rubywasm",id:"rubywasm",level:4},{value:"sass",id:"sass",level:4},{value:"scheme",id:"scheme",level:4},{value:"scm",id:"scm",level:4},{value:"scriptType?",id:"scripttype",level:4},{value:"scss",id:"scss",level:4},{value:"solid",id:"solid",level:4},{value:"solid.jsx",id:"solidjsx",level:4},{value:"solid.tsx",id:"solidtsx",level:4},{value:"sql",id:"sql",level:4},{value:"sqlite",id:"sqlite",level:4},{value:"sqlite3",id:"sqlite3",level:4},{value:"stencil",id:"stencil",level:4},{value:"stencil.tsx",id:"stenciltsx",level:4},{value:"styl",id:"styl",level:4},{value:"stylis",id:"stylis",level:4},{value:"stylus",id:"stylus",level:4},{value:"sucrase",id:"sucrase",level:4},{value:"svelte",id:"svelte",level:4},{value:"svelte-app",id:"svelte-app",level:4},{value:"tailwindcss",id:"tailwindcss",level:4},{value:"tcl",id:"tcl",level:4},{value:"teal",id:"teal",level:4},{value:"template?",id:"template",level:4},{value:"template.data?",id:"templatedata",level:4},{value:"template.prerender?",id:"templateprerender",level:4},{value:"tl",id:"tl",level:4},{value:"tokencss",id:"tokencss",level:4},{value:"ts",id:"ts",level:4},{value:"tsx",id:"tsx",level:4},{value:"twig",id:"twig",level:4},{value:"types?",id:"types",level:4},{value:"typescript",id:"typescript",level:4},{value:"unocss",id:"unocss",level:4},{value:"vento",id:"vento",level:4},{value:"vto",id:"vto",level:4},{value:"vue",id:"vue",level:4},{value:"vue-app",id:"vue-app",level:4},{value:"vue2",id:"vue2",level:4},{value:"vue3",id:"vue3",level:4},{value:"wasm",id:"wasm",level:4},{value:"wasm.cpp",id:"wasmcpp",level:4},{value:"wasm.cs",id:"wasmcs",level:4},{value:"wasm.lua",id:"wasmlua",level:4},{value:"wasm.php",id:"wasmphp",level:4},{value:"wasm.py",id:"wasmpy",level:4},{value:"wasm.rb",id:"wasmrb",level:4},{value:"wast",id:"wast",level:4},{value:"wat",id:"wat",level:4},{value:"webassembly",id:"webassembly",level:4},{value:"windicss",id:"windicss",level:4},{value:"xht",id:"xht",level:4},{value:"xml",id:"xml",level:4},{value:"Inherited from",id:"inherited-from-8",level:4},{value:"Defined in",id:"defined-in-8",level:4},{value:"delay",id:"delay",level:3},{value:"Default",id:"default-5",level:4},{value:"Inherited from",id:"inherited-from-9",level:4},{value:"Defined in",id:"defined-in-9",level:4},{value:"description",id:"description",level:3},{value:"Default",id:"default-6",level:4},{value:"Inherited from",id:"inherited-from-10",level:4},{value:"Defined in",id:"defined-in-10",level:4},{value:"editor",id:"editor",level:3},{value:"Default",id:"default-7",level:4},{value:"Inherited from",id:"inherited-from-11",level:4},{value:"Defined in",id:"defined-in-11",level:4},{value:"editorMode",id:"editormode",level:3},{value:"Inherited from",id:"inherited-from-12",level:4},{value:"Defined in",id:"defined-in-12",level:4},{value:"editorTheme",id:"editortheme",level:3},{value:"Examples",id:"examples",level:4},{value:"Inherited from",id:"inherited-from-13",level:4},{value:"Defined in",id:"defined-in-13",level:4},{value:"emmet",id:"emmet",level:3},{value:"Default",id:"default-8",level:4},{value:"Inherited from",id:"inherited-from-14",level:4},{value:"Defined in",id:"defined-in-14",level:4},{value:"enableAI",id:"enableai",level:3},{value:"Default",id:"default-9",level:4},{value:"Inherited from",id:"inherited-from-15",level:4},{value:"Defined in",id:"defined-in-15",level:4},{value:"foldRegions",id:"foldregions",level:3},{value:"Default",id:"default-10",level:4},{value:"Inherited from",id:"inherited-from-16",level:4},{value:"Defined in",id:"defined-in-16",level:4},{value:"fontFamily",id:"fontfamily",level:3},{value:"Inherited from",id:"inherited-from-17",level:4},{value:"Defined in",id:"defined-in-17",level:4},{value:"fontSize",id:"fontsize",level:3},{value:"Default",id:"default-11",level:4},{value:"Inherited from",id:"inherited-from-18",level:4},{value:"Defined in",id:"defined-in-18",level:4},{value:"formatOnsave",id:"formatonsave",level:3},{value:"Default",id:"default-12",level:4},{value:"Inherited from",id:"inherited-from-19",level:4},{value:"Defined in",id:"defined-in-19",level:4},{value:"head",id:"head",level:3},{value:"Default",id:"default-13",level:4},{value:"Inherited from",id:"inherited-from-20",level:4},{value:"Defined in",id:"defined-in-20",level:4},{value:"htmlAttrs",id:"htmlattrs",level:3},{value:"Example",id:"example",level:4},{value:"Inherited from",id:"inherited-from-21",level:4},{value:"Defined in",id:"defined-in-21",level:4},{value:"imports",id:"imports-1",level:3},{value:"Index Signature",id:"index-signature",level:4},{value:"Inherited from",id:"inherited-from-22",level:4},{value:"Defined in",id:"defined-in-22",level:4},{value:"languages",id:"languages",level:3},{value:"Inherited from",id:"inherited-from-23",level:4},{value:"Defined in",id:"defined-in-23",level:4},{value:"layout",id:"layout",level:3},{value:"Default",id:"default-14",level:4},{value:"Inherited from",id:"inherited-from-24",level:4},{value:"Defined in",id:"defined-in-24",level:4},{value:"lineNumbers",id:"linenumbers",level:3},{value:"Default",id:"default-15",level:4},{value:"Inherited from",id:"inherited-from-25",level:4},{value:"Defined in",id:"defined-in-25",level:4},{value:"markup",id:"markup",level:3},{value:"content?",id:"content",level:4},{value:"Default",id:"default-16",level:5},{value:"contentUrl?",id:"contenturl",level:4},{value:"foldedLines?",id:"foldedlines",level:4},{value:"Example",id:"example-1",level:5},{value:"hiddenContent?",id:"hiddencontent",level:4},{value:"hiddenContentUrl?",id:"hiddencontenturl",level:4},{value:"hideTitle?",id:"hidetitle",level:4},{value:"language",id:"language",level:4},{value:"order?",id:"order",level:4},{value:"Default",id:"default-17",level:5},{value:"position?",id:"position",level:4},{value:"Example",id:"example-2",level:5},{value:"selector?",id:"selector",level:4},{value:"title?",id:"title",level:4},{value:"Default",id:"default-18",level:4},{value:"Inherited from",id:"inherited-from-26",level:4},{value:"Defined in",id:"defined-in-26",level:4},{value:"mode",id:"mode",level:3},{value:"Default",id:"default-19",level:4},{value:"Inherited from",id:"inherited-from-27",level:4},{value:"Defined in",id:"defined-in-27",level:4},{value:"processors",id:"processors",level:3},{value:"Inherited from",id:"inherited-from-28",level:4},{value:"Defined in",id:"defined-in-28",level:4},{value:"readonly",id:"readonly",level:3},{value:"Default",id:"default-20",level:4},{value:"Inherited from",id:"inherited-from-29",level:4},{value:"Defined in",id:"defined-in-29",level:4},{value:"recoverUnsaved",id:"recoverunsaved",level:3},{value:"Default",id:"default-21",level:4},{value:"Inherited from",id:"inherited-from-30",level:4},{value:"Defined in",id:"defined-in-30",level:4},{value:"script",id:"script",level:3},{value:"content?",id:"content-1",level:4},{value:"Default",id:"default-22",level:5},{value:"contentUrl?",id:"contenturl-1",level:4},{value:"foldedLines?",id:"foldedlines-1",level:4},{value:"Example",id:"example-3",level:5},{value:"hiddenContent?",id:"hiddencontent-1",level:4},{value:"hiddenContentUrl?",id:"hiddencontenturl-1",level:4},{value:"hideTitle?",id:"hidetitle-1",level:4},{value:"language",id:"language-1",level:4},{value:"order?",id:"order-1",level:4},{value:"Default",id:"default-23",level:5},{value:"position?",id:"position-1",level:4},{value:"Example",id:"example-4",level:5},{value:"selector?",id:"selector-1",level:4},{value:"title?",id:"title-1",level:4},{value:"Default",id:"default-24",level:4},{value:"Inherited from",id:"inherited-from-31",level:4},{value:"Defined in",id:"defined-in-31",level:4},{value:"scripts",id:"scripts",level:3},{value:"Inherited from",id:"inherited-from-32",level:4},{value:"Defined in",id:"defined-in-32",level:4},{value:"semicolons",id:"semicolons",level:3},{value:"Default",id:"default-25",level:4},{value:"Inherited from",id:"inherited-from-33",level:4},{value:"Defined in",id:"defined-in-33",level:4},{value:"showSpacing",id:"showspacing",level:3},{value:"Default",id:"default-26",level:4},{value:"Inherited from",id:"inherited-from-34",level:4},{value:"Defined in",id:"defined-in-34",level:4},{value:"singleQuote",id:"singlequote",level:3},{value:"Default",id:"default-27",level:4},{value:"Inherited from",id:"inherited-from-35",level:4},{value:"Defined in",id:"defined-in-35",level:4},{value:"style",id:"style",level:3},{value:"content?",id:"content-2",level:4},{value:"Default",id:"default-28",level:5},{value:"contentUrl?",id:"contenturl-2",level:4},{value:"foldedLines?",id:"foldedlines-2",level:4},{value:"Example",id:"example-5",level:5},{value:"hiddenContent?",id:"hiddencontent-2",level:4},{value:"hiddenContentUrl?",id:"hiddencontenturl-2",level:4},{value:"hideTitle?",id:"hidetitle-2",level:4},{value:"language",id:"language-2",level:4},{value:"order?",id:"order-2",level:4},{value:"Default",id:"default-29",level:5},{value:"position?",id:"position-2",level:4},{value:"Example",id:"example-6",level:5},{value:"selector?",id:"selector-2",level:4},{value:"title?",id:"title-2",level:4},{value:"Default",id:"default-30",level:4},{value:"Inherited from",id:"inherited-from-36",level:4},{value:"Defined in",id:"defined-in-36",level:4},{value:"stylesheets",id:"stylesheets",level:3},{value:"Inherited from",id:"inherited-from-37",level:4},{value:"Defined in",id:"defined-in-37",level:4},{value:"tabSize",id:"tabsize",level:3},{value:"Default",id:"default-31",level:4},{value:"Inherited from",id:"inherited-from-38",level:4},{value:"Defined in",id:"defined-in-38",level:4},{value:"tags",id:"tags",level:3},{value:"Default",id:"default-32",level:4},{value:"Inherited from",id:"inherited-from-39",level:4},{value:"Defined in",id:"defined-in-39",level:4},{value:"tests",id:"tests",level:3},{value:"Inherited from",id:"inherited-from-40",level:4},{value:"Defined in",id:"defined-in-40",level:4},{value:"theme",id:"theme",level:3},{value:"Default",id:"default-33",level:4},{value:"Inherited from",id:"inherited-from-41",level:4},{value:"Defined in",id:"defined-in-41",level:4},{value:"themeColor",id:"themecolor",level:3},{value:"Default",id:"default-34",level:4},{value:"Inherited from",id:"inherited-from-42",level:4},{value:"Defined in",id:"defined-in-42",level:4},{value:"title",id:"title-3",level:3},{value:"Default",id:"default-35",level:4},{value:"Inherited from",id:"inherited-from-43",level:4},{value:"Defined in",id:"defined-in-43",level:4},{value:"tools",id:"tools",level:3},{value:"Type declaration",id:"type-declaration",level:4},{value:"active",id:"active",level:5},{value:"enabled",id:"enabled",level:5},{value:"status",id:"status",level:5},{value:"Default",id:"default-36",level:4},{value:"Example",id:"example-7",level:4},{value:"Inherited from",id:"inherited-from-44",level:4},{value:"Defined in",id:"defined-in-44",level:4},{value:"trailingComma",id:"trailingcomma",level:3},{value:"Default",id:"default-37",level:4},{value:"Inherited from",id:"inherited-from-45",level:4},{value:"Defined in",id:"defined-in-45",level:4},{value:"types",id:"types-1",level:3},{value:"Examples",id:"examples-1",level:4},{value:"Inherited from",id:"inherited-from-46",level:4},{value:"Defined in",id:"defined-in-46",level:4},{value:"useTabs",id:"usetabs",level:3},{value:"Default",id:"default-38",level:4},{value:"Inherited from",id:"inherited-from-47",level:4},{value:"Defined in",id:"defined-in-47",level:4},{value:"version",id:"version",level:3},{value:"Inherited from",id:"inherited-from-48",level:4},{value:"Defined in",id:"defined-in-48",level:4},{value:"view?",id:"view",level:3},{value:"Default",id:"default-39",level:4},{value:"Inherited from",id:"inherited-from-49",level:4},{value:"Defined in",id:"defined-in-49",level:4},{value:"welcome",id:"welcome",level:3},{value:"Inherited from",id:"inherited-from-50",level:4},{value:"Defined in",id:"defined-in-50",level:4},{value:"wordWrap",id:"wordwrap",level:3},{value:"Default",id:"default-40",level:4},{value:"Inherited from",id:"inherited-from-51",level:4},{value:"Defined in",id:"defined-in-51",level:4},{value:"zoom",id:"zoom",level:3},{value:"Inherited from",id:"inherited-from-52",level:4},{value:"Defined in",id:"defined-in-52",level:4}];function t(e){let n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"interface-config",children:"Interface: Config"})}),"\n",(0,i.jsxs)(n.p,{children:["The playground ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/configuration/configuration-object",children:"configuration object"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"It is an object that holds the configuration and state of the playground."}),"\n",(0,i.jsxs)(n.p,{children:["See ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/configuration/configuration-object",children:"docs"})," for details."]}),"\n",(0,i.jsx)(n.h2,{id:"extends",children:"Extends"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/ContentConfig",children:(0,i.jsx)(n.code,{children:"ContentConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/AppConfig",children:(0,i.jsx)(n.code,{children:"AppConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig",children:(0,i.jsx)(n.code,{children:"UserConfig"})})]}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,i.jsx)(n.h3,{id:"activeeditor",children:"activeEditor"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"activeEditor"}),": ",(0,i.jsx)(n.code,{children:"undefined"})," | ",(0,i.jsx)(n.a,{href:"/docs/api/internal/type-aliases/EditorId",children:(0,i.jsx)(n.code,{children:"EditorId"})})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Selects the active editor to show."}),"\n",(0,i.jsxs)(n.p,{children:["Defaults to the last used editor for user, otherwise ",(0,i.jsx)(n.code,{children:'"markup"'})]}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/ContentConfig",children:(0,i.jsx)(n.code,{children:"ContentConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/ContentConfig#activeeditor",children:(0,i.jsx)(n.code,{children:"activeEditor"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L455",children:"models.ts:455"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"allowlangchange",children:"allowLangChange"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"allowLangChange"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["If ",(0,i.jsx)(n.code,{children:"false"}),", the UI will not show the menu that allows changing editor language."]}),"\n",(0,i.jsx)(n.h4,{id:"default",children:"Default"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"true\n"})}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-1",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/AppConfig",children:(0,i.jsx)(n.code,{children:"AppConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/AppConfig#allowlangchange",children:(0,i.jsx)(n.code,{children:"allowLangChange"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-1",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L603",children:"models.ts:603"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"applanguage",children:"appLanguage"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"appLanguage"}),": ",(0,i.jsx)(n.code,{children:"undefined"})," | ",(0,i.jsx)(n.a,{href:"/docs/api/internal/type-aliases/AppLanguage",children:(0,i.jsx)(n.code,{children:"AppLanguage"})})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Sets the app UI language used."}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-2",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig",children:(0,i.jsx)(n.code,{children:"UserConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig#applanguage",children:(0,i.jsx)(n.code,{children:"appLanguage"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-2",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L707",children:"models.ts:707"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"autosave",children:"autosave"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"autosave"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["If ",(0,i.jsx)(n.code,{children:"true"}),", the project is automatically saved on code change,\nafter time ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/configuration/configuration-object#delay",children:"delay"}),"."]}),"\n",(0,i.jsx)(n.h4,{id:"default-1",children:"Default"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"false\n"})}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-3",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig",children:(0,i.jsx)(n.code,{children:"UserConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig#autosave",children:(0,i.jsx)(n.code,{children:"autosave"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-3",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L656",children:"models.ts:656"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"autotest",children:"autotest"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"autotest"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["If ",(0,i.jsx)(n.code,{children:"true"}),", the project is watched for code changes which trigger tests to auto-run."]}),"\n",(0,i.jsx)(n.h4,{id:"default-2",children:"Default"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"false\n"})}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-4",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig",children:(0,i.jsx)(n.code,{children:"UserConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig#autotest",children:(0,i.jsx)(n.code,{children:"autotest"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-4",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L662",children:"models.ts:662"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"autoupdate",children:"autoupdate"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"autoupdate"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["If ",(0,i.jsx)(n.code,{children:"true"}),", the result page is automatically updated on code change,\nafter time ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/configuration/configuration-object#delay",children:"delay"}),"."]}),"\n",(0,i.jsx)(n.h4,{id:"default-3",children:"Default"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"true\n"})}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-5",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig",children:(0,i.jsx)(n.code,{children:"UserConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig#autoupdate",children:(0,i.jsx)(n.code,{children:"autoupdate"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-5",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L649",children:"models.ts:649"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"closebrackets",children:"closeBrackets"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"closeBrackets"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Use auto-complete to close brackets and quotes."}),"\n",(0,i.jsx)(n.h4,{id:"default-4",children:"Default"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"true\n"})}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-6",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig",children:(0,i.jsx)(n.code,{children:"UserConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig#closebrackets",children:(0,i.jsx)(n.code,{children:"closeBrackets"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-6",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L801",children:"models.ts:801"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"csspreset",children:"cssPreset"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"cssPreset"}),": ",(0,i.jsx)(n.a,{href:"/docs/api/internal/type-aliases/CssPresetId",children:(0,i.jsx)(n.code,{children:"CssPresetId"})})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/features/external-resources#css-presets",children:"CSS Preset"})," to use."]}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-7",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/ContentConfig",children:(0,i.jsx)(n.code,{children:"ContentConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/ContentConfig#csspreset",children:(0,i.jsx)(n.code,{children:"cssPreset"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-7",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L502",children:"models.ts:502"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"customsettings",children:"customSettings"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"customSettings"}),": ",(0,i.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Defines ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/advanced/custom-settings",children:"custom settings"})," for the current project."]}),"\n",(0,i.jsx)(n.h4,{id:"adoc",children:"adoc"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"adoc"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"appsvelte",children:"app.svelte"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"svelte"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"appvue",children:"app.vue"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"vue"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"art",children:"art"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"art"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"art-template",children:"art-template"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"art-template"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"as",children:"as"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"as"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"asc",children:"asc"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"asc"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"asciidoc",children:"asciidoc"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"asciidoc"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"assemblyscript",children:"assemblyscript"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"assemblyscript"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"astro",children:"astro"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"astro"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"autoprefixer",children:"autoprefixer"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"autoprefixer"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"babel",children:"babel"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"babel"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"bb",children:"bb"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"bb"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"bbcode",children:"bbcode"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"bbcode"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"binary",children:"Binary"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Binary"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"blockly",children:"blockly"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"blockly"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"blocklyxml",children:"blockly.xml"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"xml"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"c",children:"c"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"c"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"c-1",children:"C"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"C"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"c-2",children:"c++"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"c++"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"civet",children:"civet"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"civet"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"clang",children:"clang"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"clang"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"clangcpp",children:"clang.cpp"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"cpp"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"clio",children:"clio"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"clio"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"clj",children:"clj"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"clj"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"cljc",children:"cljc"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"cljc"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"cljs",children:"cljs"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"cljs"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"clojure",children:"clojure"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"clojure"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"clojurescript",children:"clojurescript"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"clojurescript"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"coffee",children:"coffee"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"coffee"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"coffeescript",children:"coffeescript"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"coffeescript"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"common-lisp",children:"common-lisp"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"common-lisp"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"commonlisp",children:"commonlisp"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"commonlisp"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"convertcommonjs",children:"convertCommonjs?"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"optional"})," ",(0,i.jsx)(n.strong,{children:"convertCommonjs"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"cp",children:"cp"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"cp"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"cpp",children:"cpp"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"cpp"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"cpp-wasm",children:"cpp-wasm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"cpp-wasm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"cppm",children:"cppm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"cppm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"cppwasm",children:"cppwasm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"cppwasm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"cs",children:"cs"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"cs"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"cs-wasm",children:"cs-wasm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"cs-wasm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"csharp",children:"csharp"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"csharp"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"csharp-wasm",children:"csharp-wasm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"csharp-wasm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"css",children:"css"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"css"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"cssmodules",children:"cssmodules"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"cssmodules"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"cssnano",children:"cssnano"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"cssnano"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"cwasm",children:"cwasm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"cwasm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"cxx",children:"cxx"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"cxx"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"defaultcdn",children:"defaultCDN?"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"optional"})," ",(0,i.jsx)(n.strong,{children:"defaultCDN"}),": ",(0,i.jsx)(n.a,{href:"/docs/api/internal/type-aliases/CDN",children:(0,i.jsx)(n.code,{children:"CDN"})})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"diagram",children:"diagram"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"diagram"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"diagrams",children:"diagrams"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"diagrams"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"dot",children:"dot"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"dot"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"edn",children:"edn"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"edn"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"ejs",children:"ejs"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"ejs"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"es",children:"es"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"es"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"eta",children:"eta"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"eta"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"fennel",children:"fennel"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"fennel"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"flow",children:"flow"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"flow"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"fnl",children:"fnl"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"fnl"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"gleam",children:"gleam"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"gleam"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"go",children:"go"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"go"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"golang",children:"golang"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"golang"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"graph",children:"graph"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"graph"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"h",children:"h"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"h"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"haml",children:"haml"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"haml"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"handlebars",children:"handlebars"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"handlebars"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"hbs",children:"hbs"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"hbs"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"hpp",children:"hpp"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"hpp"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"htm",children:"htm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"htm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"html",children:"html"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"html"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"ii",children:"ii"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"ii"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"imba",children:"imba"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"imba"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"imports",children:"imports?"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"optional"})," ",(0,i.jsx)(n.strong,{children:"imports"}),": ",(0,i.jsx)(n.code,{children:"Record"}),"<",(0,i.jsx)(n.code,{children:"string"}),", ",(0,i.jsx)(n.code,{children:"string"}),">"]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"ixx",children:"ixx"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"ixx"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"jade",children:"jade"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"jade"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"java",children:"java"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"java"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"javascript",children:"javascript"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"javascript"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"jinja",children:"jinja"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"jinja"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"jl",children:"jl"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"jl"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"js",children:"js"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"js"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"json",children:"json"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"json"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"jsx",children:"jsx"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"jsx"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"julia",children:"julia"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"julia"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"less",children:"less"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"less"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"lightningcss",children:"lightningcss"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"lightningcss"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"liquid",children:"liquid"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"liquid"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"liquidjs",children:"liquidjs"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"liquidjs"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"lisp",children:"lisp"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"lisp"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"livescript",children:"livescript"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"livescript"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"ls",children:"ls"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"ls"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"lua",children:"lua"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"lua"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"lua-wasm",children:"lua-wasm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"lua-wasm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"luawasm",children:"luawasm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"luawasm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"malina",children:"malina"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"malina"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"malinajs",children:"malinajs"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"malinajs"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"mapimports",children:"mapImports?"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"optional"})," ",(0,i.jsx)(n.strong,{children:"mapImports"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"markdown",children:"markdown"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"markdown"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"md",children:"md"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"md"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"mdown",children:"mdown"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"mdown"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"mdx",children:"mdx"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"mdx"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"mjml",children:"mjml"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"mjml"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"mkdn",children:"mkdn"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"mkdn"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"ml",children:"ml"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"ml"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"mli",children:"mli"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"mli"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"mustache",children:"mustache"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"mustache"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"njk",children:"njk"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"njk"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"nunjucks",children:"nunjucks"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"nunjucks"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"ocaml",children:"ocaml"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"ocaml"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"perl",children:"perl"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"perl"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"pg",children:"pg"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"pg"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"pgsql",children:"pg.sql"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"sql"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"pglite",children:"pglite"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"pglite"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"pglitesql",children:"pglite.sql"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"sql"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"pgsql-1",children:"pgsql"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"pgsql"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"pgsqlsql",children:"pgsql.sql"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"sql"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"php",children:"php"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"php"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"php-wasm",children:"php-wasm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"php-wasm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"phpwasm",children:"phpwasm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"phpwasm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"pintora",children:"pintora"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"pintora"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"pl",children:"pl"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"pl"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"plt",children:"plt"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"plt"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"pm",children:"pm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"pm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"postcss",children:"postcss"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"postcss"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"postcssimporturl",children:"postcssImportUrl"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"postcssImportUrl"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"postcsspresetenv",children:"postcssPresetEnv"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"postcssPresetEnv"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"postgresql",children:"postgre.sql"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"sql"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"postgres",children:"postgres"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"postgres"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"postgresql-1",children:"postgresql"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"postgresql"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"postgresqlsql",children:"postgresql.sql"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"sql"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"prolog",children:"prolog"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"prolog"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"prologpl",children:"prolog.pl"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"pl"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"pug",children:"pug"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"pug"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"purgecss",children:"purgecss"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"purgecss"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"py",children:"py"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"py"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"py-wasm",children:"py-wasm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"py-wasm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"py3",children:"py3"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"py3"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"pyodide",children:"pyodide"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"pyodide"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"python",children:"python"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"python"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"python-wasm",children:"python-wasm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"python-wasm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"pythonwasm",children:"pythonwasm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"pythonwasm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"pywasm",children:"pywasm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"pywasm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"r",children:"r"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"r"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"r-wasm",children:"r-wasm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"r-wasm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"rb",children:"rb"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"rb"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"re",children:"re"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"re"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"react",children:"react"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"react"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"react-jsx",children:"react-jsx"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"react-jsx"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"react-native",children:"react-native"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"react-native"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"react-native-tsx",children:"react-native-tsx"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"react-native-tsx"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"react-nativejsx",children:"react-native.jsx"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"jsx"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"react-nativetsx",children:"react-native.tsx"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"tsx"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"react-tsx",children:"react-tsx"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"react-tsx"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"reactjsx",children:"react.jsx"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"jsx"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"reacttsx",children:"react.tsx"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"tsx"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"reason",children:"reason"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"reason"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"rei",children:"rei"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"rei"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"res",children:"res"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"res"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"rescript",children:"rescript"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"rescript"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"resi",children:"resi"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"resi"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"rich",children:"rich"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"rich"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"richtext",children:"richtext"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"richtext"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"riot",children:"riot"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"riot"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"riotjs",children:"riotjs"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"riotjs"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"rlang",children:"rlang"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"rlang"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"rstats",children:"rstats"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"rstats"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"rte",children:"rte"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"rte"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"rtehtml",children:"rte.html"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"html"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"ruby",children:"ruby"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"ruby"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"ruby-wasm",children:"ruby-wasm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"ruby-wasm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"rubywasm",children:"rubywasm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"rubywasm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"sass",children:"sass"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"sass"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"scheme",children:"scheme"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"scheme"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"scm",children:"scm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"scm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"scripttype",children:"scriptType?"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"optional"})," ",(0,i.jsx)(n.strong,{children:"scriptType"}),": ",(0,i.jsx)(n.code,{children:'""'})," | ",(0,i.jsx)(n.code,{children:'"module"'})," | ",(0,i.jsx)(n.code,{children:'"text/liquid"'})," | ",(0,i.jsx)(n.code,{children:'"text/python"'})," | ",(0,i.jsx)(n.code,{children:'"text/r"'})," | ",(0,i.jsx)(n.code,{children:'"text/ruby-wasm"'})," | ",(0,i.jsx)(n.code,{children:'"text/x-uniter-php"'})," | ",(0,i.jsx)(n.code,{children:'"text/php-wasm"'})," | ",(0,i.jsx)(n.code,{children:'"text/cpp"'})," | ",(0,i.jsx)(n.code,{children:'"text/java"'})," | ",(0,i.jsx)(n.code,{children:'"text/csharp-wasm"'})," | ",(0,i.jsx)(n.code,{children:'"text/perl"'})," | ",(0,i.jsx)(n.code,{children:'"text/julia"'})," | ",(0,i.jsx)(n.code,{children:'"text/biwascheme"'})," | ",(0,i.jsx)(n.code,{children:'"text/commonlisp"'})," | ",(0,i.jsx)(n.code,{children:'"text/tcl"'})," | ",(0,i.jsx)(n.code,{children:'"text/prolog"'})," | ",(0,i.jsx)(n.code,{children:'"application/json"'})," | ",(0,i.jsx)(n.code,{children:'"application/lua"'})," | ",(0,i.jsx)(n.code,{children:'"text/fennel"'})," | ",(0,i.jsx)(n.code,{children:'"application/wasm-uint8"'})," | ",(0,i.jsx)(n.code,{children:'"application/javascript"'})," | ",(0,i.jsx)(n.code,{children:'"application/ecmascript"'})," | ",(0,i.jsx)(n.code,{children:'"text/javascript"'})," | ",(0,i.jsx)(n.code,{children:'"text/ecmascript"'})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"scss",children:"scss"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"scss"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"solid",children:"solid"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"solid"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"solidjsx",children:"solid.jsx"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"jsx"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"solidtsx",children:"solid.tsx"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"tsx"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"sql",children:"sql"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"sql"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"sqlite",children:"sqlite"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"sqlite"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"sqlite3",children:"sqlite3"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"sqlite3"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"stencil",children:"stencil"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"stencil"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"stenciltsx",children:"stencil.tsx"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"tsx"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"styl",children:"styl"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"styl"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"stylis",children:"stylis"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"stylis"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"stylus",children:"stylus"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"stylus"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"sucrase",children:"sucrase"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"sucrase"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"svelte",children:"svelte"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"svelte"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"svelte-app",children:"svelte-app"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"svelte-app"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"tailwindcss",children:"tailwindcss"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"tailwindcss"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"tcl",children:"tcl"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"tcl"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"teal",children:"teal"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"teal"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"template",children:"template?"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"optional"})," ",(0,i.jsx)(n.strong,{children:"template"}),": ",(0,i.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"templatedata",children:"template.data?"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"optional"})," ",(0,i.jsx)(n.strong,{children:"data"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"templateprerender",children:"template.prerender?"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"optional"})," ",(0,i.jsx)(n.strong,{children:"prerender"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"tl",children:"tl"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"tl"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"tokencss",children:"tokencss"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"tokencss"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"ts",children:"ts"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"ts"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"tsx",children:"tsx"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"tsx"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"twig",children:"twig"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"twig"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"types",children:"types?"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"optional"})," ",(0,i.jsx)(n.strong,{children:"types"}),": ",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/Types",children:(0,i.jsx)(n.code,{children:"Types"})})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"typescript",children:"typescript"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"typescript"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"unocss",children:"unocss"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"unocss"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"vento",children:"vento"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"vento"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"vto",children:"vto"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"vto"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"vue",children:"vue"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"vue"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"vue-app",children:"vue-app"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"vue-app"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"vue2",children:"vue2"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"vue2"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"vue3",children:"vue3"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"vue3"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"wasm",children:"wasm"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"wasm"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"wasmcpp",children:"wasm.cpp"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"cpp"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"wasmcs",children:"wasm.cs"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"cs"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"wasmlua",children:"wasm.lua"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"lua"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"wasmphp",children:"wasm.php"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"php"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"wasmpy",children:"wasm.py"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"py"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"wasmrb",children:"wasm.rb"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"rb"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"wast",children:"wast"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"wast"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"wat",children:"wat"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"wat"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"webassembly",children:"webassembly"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"webassembly"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"windicss",children:"windicss"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"windicss"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"xht",children:"xht"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"xht"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"xml",children:"xml"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"xml"}),": ",(0,i.jsx)(n.code,{children:"any"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-8",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/ContentConfig",children:(0,i.jsx)(n.code,{children:"ContentConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/ContentConfig#customsettings",children:(0,i.jsx)(n.code,{children:"customSettings"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-8",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L514",children:"models.ts:514"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"delay",children:"delay"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"delay"}),": ",(0,i.jsx)(n.code,{children:"number"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Time delay (in milliseconds) following code change,\nafter which the result page is updated (if ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/configuration/configuration-object#autoupdate",children:(0,i.jsx)(n.code,{children:"autoupdate"})})," is ",(0,i.jsx)(n.code,{children:"true"}),")\nand/or the project is saved (if ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/configuration/configuration-object#autosave",children:(0,i.jsx)(n.code,{children:"autosave"})})," is ",(0,i.jsx)(n.code,{children:"true"}),")."]}),"\n",(0,i.jsx)(n.h4,{id:"default-5",children:"Default"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"1500\n"})}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-9",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig",children:(0,i.jsx)(n.code,{children:"UserConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig#delay",children:(0,i.jsx)(n.code,{children:"delay"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-9",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L670",children:"models.ts:670"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"description",children:"description"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"description"}),": ",(0,i.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Project description. Used in ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/features/projects",children:"project"})," search\nand ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/features/result",children:"result page"})," description meta tag."]}),"\n",(0,i.jsx)(n.h4,{id:"default-6",children:"Default"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:'""\n'})}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-10",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/ContentConfig",children:(0,i.jsx)(n.code,{children:"ContentConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/ContentConfig#description",children:(0,i.jsx)(n.code,{children:"description"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-10",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L425",children:"models.ts:425"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"editor",children:"editor"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"editor"}),": ",(0,i.jsx)(n.code,{children:"undefined"})," | ",(0,i.jsx)(n.code,{children:'"auto"'})," | ",(0,i.jsx)(n.code,{children:'"monaco"'})," | ",(0,i.jsx)(n.code,{children:'"codemirror"'})," | ",(0,i.jsx)(n.code,{children:'"codejar"'})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Selects the ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/features/editor-settings#code-editor",children:"code editor"})," to use."]}),"\n",(0,i.jsxs)(n.p,{children:["If ",(0,i.jsx)(n.code,{children:"undefined"})," (the default), Monaco editor is used on desktop,\nCodeMirror is used on mobile and in ",(0,i.jsx)(n.code,{children:"simple"})," mode,\nwhile CodeJar is used in ",(0,i.jsx)(n.code,{children:"codeblock"})," mode, in ",(0,i.jsx)(n.code,{children:"lite"})," mode and in ",(0,i.jsx)(n.code,{children:"readonly"})," playgrounds."]}),"\n",(0,i.jsxs)(n.p,{children:["If set to ",(0,i.jsx)(n.code,{children:"auto"}),", Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings."]}),"\n",(0,i.jsx)(n.h4,{id:"default-7",children:"Default"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"undefined\n"})}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-11",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig",children:(0,i.jsx)(n.code,{children:"UserConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig#editor",children:(0,i.jsx)(n.code,{children:"editor"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-11",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L722",children:"models.ts:722"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"editormode",children:"editorMode"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"editorMode"}),": ",(0,i.jsx)(n.code,{children:"undefined"})," | ",(0,i.jsx)(n.code,{children:'"vim"'})," | ",(0,i.jsx)(n.code,{children:'"emacs"'})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Sets ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/features/editor-settings#editor-modes",children:"editor mode"}),"."]}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-12",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig",children:(0,i.jsx)(n.code,{children:"UserConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig#editormode",children:(0,i.jsx)(n.code,{children:"editorMode"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-12",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L812",children:"models.ts:812"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"editortheme",children:"editorTheme"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"editorTheme"}),": ",(0,i.jsx)(n.code,{children:"undefined"})," | ",(0,i.jsx)(n.code,{children:"string"})," | ",(0,i.jsx)(n.a,{href:"/docs/api/internal/type-aliases/EditorTheme",children:(0,i.jsx)(n.code,{children:"EditorTheme"})}),"[]"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Sets the ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/features/editor-settings",children:"code editor"})," themes."]}),"\n",(0,i.jsxs)(n.p,{children:["See docs for ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/configuration/configuration-object#editortheme",children:"editor themes"})," for details."]}),"\n",(0,i.jsx)(n.h4,{id:"examples",children:"Examples"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:'"vs"\n'})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:'"monaco:twilight, codemirror:one-dark"\n'})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:'["vs@light"]\n'})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:'["vs@light", "vs-dark@dark"]\n'})}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:'["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]\n'})}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-13",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig",children:(0,i.jsx)(n.code,{children:"UserConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig#editortheme",children:(0,i.jsx)(n.code,{children:"editorTheme"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-13",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L748",children:"models.ts:748"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"emmet",children:"emmet"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"emmet"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Enables ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/features/editor-settings#emmet",children:"Emmet"}),"."]}),"\n",(0,i.jsx)(n.h4,{id:"default-8",children:"Default"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"true\n"})}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-14",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig",children:(0,i.jsx)(n.code,{children:"UserConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig#emmet",children:(0,i.jsx)(n.code,{children:"emmet"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-14",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L807",children:"models.ts:807"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"enableai",children:"enableAI"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"enableAI"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["If ",(0,i.jsx)(n.code,{children:"true"}),", ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/features/ai",children:"AI code assistant"})," is enabled."]}),"\n",(0,i.jsx)(n.h4,{id:"default-9",children:"Default"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"false\n"})}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-15",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig",children:(0,i.jsx)(n.code,{children:"UserConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig#enableai",children:(0,i.jsx)(n.code,{children:"enableAI"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-15",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L818",children:"models.ts:818"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"foldregions",children:"foldRegions"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"foldRegions"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["When set to ",(0,i.jsx)(n.code,{children:"true"}),", regions marked by ",(0,i.jsx)(n.code,{children:"#region"})," and ",(0,i.jsx)(n.code,{children:"#endregion"})," comments are folded when the project is loaded."]}),"\n",(0,i.jsx)(n.h4,{id:"default-10",children:"Default"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"false\n"})}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-16",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig",children:(0,i.jsx)(n.code,{children:"UserConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig#foldregions",children:(0,i.jsx)(n.code,{children:"foldRegions"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-16",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L795",children:"models.ts:795"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"fontfamily",children:"fontFamily"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"fontFamily"}),": ",(0,i.jsx)(n.code,{children:"undefined"})," | ",(0,i.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Sets the ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/features/editor-settings",children:"code editor"})," font family."]}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-17",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig",children:(0,i.jsx)(n.code,{children:"UserConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig#fontfamily",children:(0,i.jsx)(n.code,{children:"fontFamily"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-17",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L753",children:"models.ts:753"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"fontsize",children:"fontSize"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"fontSize"}),": ",(0,i.jsx)(n.code,{children:"undefined"})," | ",(0,i.jsx)(n.code,{children:"number"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Sets the font size."}),"\n",(0,i.jsxs)(n.p,{children:["If ",(0,i.jsx)(n.code,{children:"undefined"})," (the default), the font size is set to 14 for the full app and 12 for ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/features/embeds",children:"embeds"}),"."]}),"\n",(0,i.jsx)(n.h4,{id:"default-11",children:"Default"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"undefined\n"})}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-18",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig",children:(0,i.jsx)(n.code,{children:"UserConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig#fontsize",children:(0,i.jsx)(n.code,{children:"fontSize"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-18",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L761",children:"models.ts:761"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"formatonsave",children:"formatOnsave"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"formatOnsave"}),": ",(0,i.jsx)(n.code,{children:"boolean"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["If ",(0,i.jsx)(n.code,{children:"true"}),", the code is automatically ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/features/code-format",children:"formatted"})," on saving the project."]}),"\n",(0,i.jsx)(n.h4,{id:"default-12",children:"Default"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:"false\n"})}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-19",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig",children:(0,i.jsx)(n.code,{children:"UserConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig#formatonsave",children:(0,i.jsx)(n.code,{children:"formatOnsave"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-19",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L676",children:"models.ts:676"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"head",children:"head"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"head"}),": ",(0,i.jsx)(n.code,{children:"string"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Content added to the ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/features/result",children:"result page"})," ",(0,i.jsx)(n.code,{children:""})," element."]}),"\n",(0,i.jsx)(n.h4,{id:"default-13",children:"Default"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:'\'\\n\'\n'})}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-20",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/ContentConfig",children:(0,i.jsx)(n.code,{children:"ContentConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/ContentConfig#head",children:(0,i.jsx)(n.code,{children:"head"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-20",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L431",children:"models.ts:431"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"htmlattrs",children:"htmlAttrs"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"htmlAttrs"}),": ",(0,i.jsx)(n.code,{children:"string"})," | ",(0,i.jsx)(n.code,{children:"Record"}),"<",(0,i.jsx)(n.code,{children:"string"}),", ",(0,i.jsx)(n.code,{children:"string"}),">"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Attributes added to the ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/features/result",children:"result page"})," ",(0,i.jsx)(n.code,{children:""})," element.\nIt can be an object or a string."]}),"\n",(0,i.jsx)(n.h4,{id:"example",children:"Example"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-ts",children:'{ lang: "en", class: "dark" }\n\'lang="en" class="dark"\'\n'})}),"\n",(0,i.jsx)(n.h4,{id:"inherited-from-21",children:"Inherited from"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/ContentConfig",children:(0,i.jsx)(n.code,{children:"ContentConfig"})}),".",(0,i.jsx)(n.a,{href:"/docs/api/internal/interfaces/ContentConfig#htmlattrs",children:(0,i.jsx)(n.code,{children:"htmlAttrs"})})]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-21",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L440",children:"models.ts:440"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"imports-1",children:"imports"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"imports"}),": ",(0,i.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Allows specifying custom ",(0,i.jsx)(n.a,{href:"https://github.com/WICG/import-maps",children:"import maps"})," for ",(0,i.jsx)(n.a,{href:"https://livecodes.io/docs/features/module-resolution#custom-module-resolution",children:"module imports"}),"."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.strong,{children:"Example"})}),"\n",(0,i.jsxs)(n.p,{children:["Setting ",(0,i.jsx)(n.code,{children:"imports"})," like this:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:'"imports": {\n "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"\n}\n'})}),"\n",(0,i.jsx)(n.p,{children:"results in the following import map:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-html",children:' + + +`,v=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o,{className:`container_Egsj ${e.className}`,style:{height:a||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(m,{js:u,ts:p,react:g,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return r}});var n=s(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:i="lazy",view:a}=t,o=n||"headless"===a,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(o&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(o)R(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",o?"eager":i);let u=globalThis.process;d.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let g=!1,m="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!o){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||o||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",r=l.querySelector(`iframe.${n}`),a=r||document.createElement("iframe");a.classList.add(n),a.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),a.setAttribute("allowtransparency","true"),a.setAttribute("allowpaymentrequest","true"),a.setAttribute("allowfullscreen","true"),a.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),a.setAttribute("loading","eager"===i?"eager":"lazy"),o?R(a):(a.style.height="100%",a.style.minHeight="200px",a.style.width="100%",a.style.margin="0",a.style.border="0",a.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===a.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===a.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),a.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),a.onload=()=>{e(a)},a.src=d.href,r||l.appendChild(a)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>g?Promise.reject(m):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),x=(e,t)=>new Promise(async(s,n)=>{if(g)return n(m);await y();let i=N();addEventListener("message",function t(r){if(r.source===f.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===i&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:i,args:t},h)}),j={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(g)throw Error(m);return b.includes(e)?(x("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!j[t])return;let s=e.data?.payload;j[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(j).forEach(e=>{e.length=0}),f?.remove?.(),g=!0};function R(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let N=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nv.settled?x("destroy").then(C):g?Promise.reject(m):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:r={},headless:a,import:o,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||a;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(r))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return o&&e.searchParams.set("x",encodeURIComponent(o)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return o},a:function(){return a}});var n=s(7294);let i={},r=n.createContext(i);function a(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/d507e662.d7f2aeaf.js b/docs/assets/js/d507e662.d7f2aeaf.js new file mode 100644 index 0000000..98ca62c --- /dev/null +++ b/docs/assets/js/d507e662.d7f2aeaf.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6771"],{3320:function(e,n,i){i.r(n),i.d(n,{default:()=>o,frontMatter:()=>l,metadata:()=>a,assets:()=>c,toc:()=>d,contentTitle:()=>t});var a=JSON.parse('{"id":"api/internal/index","title":"\\\\_internal","description":"Index","source":"@site/docs/api/internal/index.md","sourceDirName":"api/internal","slug":"/api/internal/","permalink":"/docs/api/internal/","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/index.md","tags":[],"version":"current","frontMatter":{}}'),s=i("5893"),r=i("65");let l={},t="_internal",c={},d=[{value:"Index",id:"index",level:2},{value:"Interfaces",id:"interfaces",level:3},{value:"Type Aliases",id:"type-aliases",level:3}];function h(e){let n={a:"a",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ul:"ul",...(0,r.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"_internal",children:"_internal"})}),"\n",(0,s.jsx)(n.h2,{id:"index",children:"Index"}),"\n",(0,s.jsx)(n.h3,{id:"interfaces",children:"Interfaces"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/API",children:"API"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/AppConfig",children:"AppConfig"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/ContentConfig",children:"ContentConfig"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorConfig",children:"EditorConfig"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/EditorPosition",children:"EditorPosition"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/FormatterConfig",children:"FormatterConfig"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/TestResult",children:"TestResult"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/Types",children:"Types"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/interfaces/UserConfig",children:"UserConfig"})}),"\n"]}),"\n",(0,s.jsx)(n.h3,{id:"type-aliases",children:"Type Aliases"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/APICommands",children:"APICommands"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/AppLanguage",children:"AppLanguage"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/CDN",children:"CDN"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/CodejarTheme",children:"CodejarTheme"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/CodemirrorTheme",children:"CodemirrorTheme"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/CssPresetId",children:"CssPresetId"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/EditorId",children:"EditorId"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/EditorTheme",children:"EditorTheme"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/MonacoTheme",children:"MonacoTheme"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/Processor",children:"Processor"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/TemplateName",children:"TemplateName"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/Theme",children:"Theme"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/ToolsPaneStatus",children:"ToolsPaneStatus"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchCode",children:"WatchCode"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchConsole",children:"WatchConsole"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchDestroy",children:"WatchDestroy"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchLoad",children:"WatchLoad"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchReady",children:"WatchReady"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"/docs/api/internal/type-aliases/WatchTests",children:"WatchTests"})}),"\n"]})]})}function o(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},65:function(e,n,i){i.d(n,{Z:function(){return t},a:function(){return l}});var a=i(7294);let s={},r=a.createContext(s);function l(e){let n=a.useContext(r);return a.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function t(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),a.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/d534fd77.7469c55e.js b/docs/assets/js/d534fd77.7469c55e.js new file mode 100644 index 0000000..ddde70a --- /dev/null +++ b/docs/assets/js/d534fd77.7469c55e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8212"],{7050:function(e,n,t){t.r(n),t.d(n,{default:()=>u,frontMatter:()=>a,metadata:()=>r,assets:()=>d,toc:()=>i,contentTitle:()=>c});var r=JSON.parse('{"id":"languages/mdx","title":"MDX","description":"TODO...","source":"@site/docs/languages/mdx.mdx","sourceDirName":"languages","slug":"/languages/mdx","permalink":"/docs/languages/mdx","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/mdx.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Markdown","permalink":"/docs/languages/markdown"},"next":{"title":"MJML","permalink":"/docs/languages/mjml"}}'),s=t("5893"),o=t("65");let a={},c="MDX",d={},i=[];function l(e){let n={h1:"h1",header:"header",p:"p",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"mdx",children:"MDX"})}),"\n",(0,s.jsx)(n.p,{children:"TODO..."})]})}function u(e={}){let{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},65:function(e,n,t){t.d(n,{Z:function(){return c},a:function(){return a}});var r=t(7294);let s={},o=r.createContext(s);function a(e){let n=r.useContext(o);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/d6262eff.b7cdd616.js b/docs/assets/js/d6262eff.b7cdd616.js new file mode 100644 index 0000000..f91a040 --- /dev/null +++ b/docs/assets/js/d6262eff.b7cdd616.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4153"],{9861:function(e,s,n){n.r(s),n.d(s,{default:()=>j,frontMatter:()=>d,metadata:()=>l,assets:()=>r,toc:()=>o,contentTitle:()=>t});var l=JSON.parse('{"id":"api/interfaces/EmbedOptions","title":"Interface: EmbedOptions","description":"An object that represents the playground embed options.","source":"@site/docs/api/interfaces/EmbedOptions.md","sourceDirName":"api/interfaces","slug":"/api/interfaces/EmbedOptions","permalink":"/docs/api/interfaces/EmbedOptions","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/interfaces/EmbedOptions.md","tags":[],"version":"current","frontMatter":{}}'),c=n("5893"),i=n("65");let d={},t="Interface: EmbedOptions",r={},o=[{value:"Properties",id:"properties",level:2},{value:"appUrl?",id:"appurl",level:3},{value:"Default",id:"default",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"config?",id:"config",level:3},{value:"Default",id:"default-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"headless?",id:"headless",level:3},{value:"Default",id:"default-2",level:4},{value:"Defined in",id:"defined-in-2",level:4},{value:"import?",id:"import",level:3},{value:"Defined in",id:"defined-in-3",level:4},{value:"lite?",id:"lite",level:3},{value:"Deprecated",id:"deprecated",level:4},{value:"Default",id:"default-3",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"loading?",id:"loading",level:3},{value:"Default",id:"default-4",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"params?",id:"params",level:3},{value:"active?",id:"active",level:4},{value:"activeEditor?",id:"activeeditor",level:4},{value:"adoc",id:"adoc",level:4},{value:"adoc-selector",id:"adoc-selector",level:4},{value:"allowLangChange?",id:"allowlangchange",level:4},{value:"Default",id:"default-5",level:5},{value:"app.svelte",id:"appsvelte",level:4},{value:"app.svelte-selector",id:"appsvelte-selector",level:4},{value:"app.vue",id:"appvue",level:4},{value:"app.vue-selector",id:"appvue-selector",level:4},{value:"appLanguage?",id:"applanguage",level:4},{value:"appUrl?",id:"appurl-1",level:4},{value:"Default",id:"default-6",level:5},{value:"art",id:"art",level:4},{value:"art-selector",id:"art-selector",level:4},{value:"art-template",id:"art-template",level:4},{value:"art-template-selector",id:"art-template-selector",level:4},{value:"as",id:"as",level:4},{value:"as-selector",id:"as-selector",level:4},{value:"asc",id:"asc",level:4},{value:"asc-selector",id:"asc-selector",level:4},{value:"asciidoc",id:"asciidoc",level:4},{value:"asciidoc-selector",id:"asciidoc-selector",level:4},{value:"assemblyscript",id:"assemblyscript",level:4},{value:"assemblyscript-selector",id:"assemblyscript-selector",level:4},{value:"astro",id:"astro",level:4},{value:"astro-selector",id:"astro-selector",level:4},{value:"autosave?",id:"autosave",level:4},{value:"Default",id:"default-7",level:5},{value:"autotest?",id:"autotest",level:4},{value:"Default",id:"default-8",level:5},{value:"autoupdate?",id:"autoupdate",level:4},{value:"Default",id:"default-9",level:5},{value:"babel",id:"babel",level:4},{value:"babel-selector",id:"babel-selector",level:4},{value:"bb",id:"bb",level:4},{value:"bb-selector",id:"bb-selector",level:4},{value:"bbcode",id:"bbcode",level:4},{value:"bbcode-selector",id:"bbcode-selector",level:4},{value:"Binary",id:"binary",level:4},{value:"Binary-selector",id:"binary-selector",level:4},{value:"blockly",id:"blockly",level:4},{value:"blockly-selector",id:"blockly-selector",level:4},{value:"blockly.xml",id:"blocklyxml",level:4},{value:"blockly.xml-selector",id:"blocklyxml-selector",level:4},{value:"c",id:"c",level:4},{value:"C",id:"c-1",level:4},{value:"c-selector",id:"c-selector",level:4},{value:"C-selector",id:"c-selector-1",level:4},{value:"c++",id:"c-2",level:4},{value:"c++-selector",id:"c-selector-2",level:4},{value:"civet",id:"civet",level:4},{value:"civet-selector",id:"civet-selector",level:4},{value:"clang",id:"clang",level:4},{value:"clang-selector",id:"clang-selector",level:4},{value:"clang.cpp",id:"clangcpp",level:4},{value:"clang.cpp-selector",id:"clangcpp-selector",level:4},{value:"clio",id:"clio",level:4},{value:"clio-selector",id:"clio-selector",level:4},{value:"clj",id:"clj",level:4},{value:"clj-selector",id:"clj-selector",level:4},{value:"cljc",id:"cljc",level:4},{value:"cljc-selector",id:"cljc-selector",level:4},{value:"cljs",id:"cljs",level:4},{value:"cljs-selector",id:"cljs-selector",level:4},{value:"clojure",id:"clojure",level:4},{value:"clojure-selector",id:"clojure-selector",level:4},{value:"clojurescript",id:"clojurescript",level:4},{value:"clojurescript-selector",id:"clojurescript-selector",level:4},{value:"closeBrackets?",id:"closebrackets",level:4},{value:"Default",id:"default-10",level:5},{value:"coffee",id:"coffee",level:4},{value:"coffee-selector",id:"coffee-selector",level:4},{value:"coffeescript",id:"coffeescript",level:4},{value:"coffeescript-selector",id:"coffeescript-selector",level:4},{value:"common-lisp",id:"common-lisp",level:4},{value:"common-lisp-selector",id:"common-lisp-selector",level:4},{value:"commonlisp",id:"commonlisp",level:4},{value:"commonlisp-selector",id:"commonlisp-selector",level:4},{value:"compiled",id:"compiled",level:4},{value:"config?",id:"config-1",level:4},{value:"Default",id:"default-11",level:5},{value:"console",id:"console",level:4},{value:"cp",id:"cp",level:4},{value:"cp-selector",id:"cp-selector",level:4},{value:"cpp",id:"cpp",level:4},{value:"cpp-selector",id:"cpp-selector",level:4},{value:"cpp-wasm",id:"cpp-wasm",level:4},{value:"cpp-wasm-selector",id:"cpp-wasm-selector",level:4},{value:"cppm",id:"cppm",level:4},{value:"cppm-selector",id:"cppm-selector",level:4},{value:"cppwasm",id:"cppwasm",level:4},{value:"cppwasm-selector",id:"cppwasm-selector",level:4},{value:"cs",id:"cs",level:4},{value:"cs-selector",id:"cs-selector",level:4},{value:"cs-wasm",id:"cs-wasm",level:4},{value:"cs-wasm-selector",id:"cs-wasm-selector",level:4},{value:"csharp",id:"csharp",level:4},{value:"csharp-selector",id:"csharp-selector",level:4},{value:"csharp-wasm",id:"csharp-wasm",level:4},{value:"csharp-wasm-selector",id:"csharp-wasm-selector",level:4},{value:"css",id:"css",level:4},{value:"css-selector",id:"css-selector",level:4},{value:"cssPreset?",id:"csspreset",level:4},{value:"customSettings?",id:"customsettings",level:4},{value:"customSettings.adoc",id:"customsettingsadoc",level:4},{value:"customSettings.app.svelte",id:"customsettingsappsvelte",level:4},{value:"customSettings.app.vue",id:"customsettingsappvue",level:4},{value:"customSettings.art",id:"customsettingsart",level:4},{value:"customSettings.art-template",id:"customsettingsart-template",level:4},{value:"customSettings.as",id:"customsettingsas",level:4},{value:"customSettings.asc",id:"customsettingsasc",level:4},{value:"customSettings.asciidoc",id:"customsettingsasciidoc",level:4},{value:"customSettings.assemblyscript",id:"customsettingsassemblyscript",level:4},{value:"customSettings.astro",id:"customsettingsastro",level:4},{value:"customSettings.autoprefixer",id:"customsettingsautoprefixer",level:4},{value:"customSettings.babel",id:"customsettingsbabel",level:4},{value:"customSettings.bb",id:"customsettingsbb",level:4},{value:"customSettings.bbcode",id:"customsettingsbbcode",level:4},{value:"customSettings.Binary",id:"customsettingsbinary",level:4},{value:"customSettings.blockly",id:"customsettingsblockly",level:4},{value:"customSettings.blockly.xml",id:"customsettingsblocklyxml",level:4},{value:"customSettings.c",id:"customsettingsc",level:4},{value:"customSettings.C",id:"customsettingsc-1",level:4},{value:"customSettings.c++",id:"customsettingsc-2",level:4},{value:"customSettings.civet",id:"customsettingscivet",level:4},{value:"customSettings.clang",id:"customsettingsclang",level:4},{value:"customSettings.clang.cpp",id:"customsettingsclangcpp",level:4},{value:"customSettings.clio",id:"customsettingsclio",level:4},{value:"customSettings.clj",id:"customsettingsclj",level:4},{value:"customSettings.cljc",id:"customsettingscljc",level:4},{value:"customSettings.cljs",id:"customsettingscljs",level:4},{value:"customSettings.clojure",id:"customsettingsclojure",level:4},{value:"customSettings.clojurescript",id:"customsettingsclojurescript",level:4},{value:"customSettings.coffee",id:"customsettingscoffee",level:4},{value:"customSettings.coffeescript",id:"customsettingscoffeescript",level:4},{value:"customSettings.common-lisp",id:"customsettingscommon-lisp",level:4},{value:"customSettings.commonlisp",id:"customsettingscommonlisp",level:4},{value:"customSettings.convertCommonjs?",id:"customsettingsconvertcommonjs",level:4},{value:"customSettings.cp",id:"customsettingscp",level:4},{value:"customSettings.cpp",id:"customsettingscpp",level:4},{value:"customSettings.cpp-wasm",id:"customsettingscpp-wasm",level:4},{value:"customSettings.cppm",id:"customsettingscppm",level:4},{value:"customSettings.cppwasm",id:"customsettingscppwasm",level:4},{value:"customSettings.cs",id:"customsettingscs",level:4},{value:"customSettings.cs-wasm",id:"customsettingscs-wasm",level:4},{value:"customSettings.csharp",id:"customsettingscsharp",level:4},{value:"customSettings.csharp-wasm",id:"customsettingscsharp-wasm",level:4},{value:"customSettings.css",id:"customsettingscss",level:4},{value:"customSettings.cssmodules",id:"customsettingscssmodules",level:4},{value:"customSettings.cssnano",id:"customsettingscssnano",level:4},{value:"customSettings.cwasm",id:"customsettingscwasm",level:4},{value:"customSettings.cxx",id:"customsettingscxx",level:4},{value:"customSettings.defaultCDN?",id:"customsettingsdefaultcdn",level:4},{value:"customSettings.diagram",id:"customsettingsdiagram",level:4},{value:"customSettings.diagrams",id:"customsettingsdiagrams",level:4},{value:"customSettings.dot",id:"customsettingsdot",level:4},{value:"customSettings.edn",id:"customsettingsedn",level:4},{value:"customSettings.ejs",id:"customsettingsejs",level:4},{value:"customSettings.es",id:"customsettingses",level:4},{value:"customSettings.eta",id:"customsettingseta",level:4},{value:"customSettings.fennel",id:"customsettingsfennel",level:4},{value:"customSettings.flow",id:"customsettingsflow",level:4},{value:"customSettings.fnl",id:"customsettingsfnl",level:4},{value:"customSettings.gleam",id:"customsettingsgleam",level:4},{value:"customSettings.go",id:"customsettingsgo",level:4},{value:"customSettings.golang",id:"customsettingsgolang",level:4},{value:"customSettings.graph",id:"customsettingsgraph",level:4},{value:"customSettings.h",id:"customsettingsh",level:4},{value:"customSettings.haml",id:"customsettingshaml",level:4},{value:"customSettings.handlebars",id:"customsettingshandlebars",level:4},{value:"customSettings.hbs",id:"customsettingshbs",level:4},{value:"customSettings.hpp",id:"customsettingshpp",level:4},{value:"customSettings.htm",id:"customsettingshtm",level:4},{value:"customSettings.html",id:"customsettingshtml",level:4},{value:"customSettings.ii",id:"customsettingsii",level:4},{value:"customSettings.imba",id:"customsettingsimba",level:4},{value:"customSettings.imports?",id:"customsettingsimports",level:4},{value:"customSettings.ixx",id:"customsettingsixx",level:4},{value:"customSettings.jade",id:"customsettingsjade",level:4},{value:"customSettings.java",id:"customsettingsjava",level:4},{value:"customSettings.javascript",id:"customsettingsjavascript",level:4},{value:"customSettings.jinja",id:"customsettingsjinja",level:4},{value:"customSettings.jl",id:"customsettingsjl",level:4},{value:"customSettings.js",id:"customsettingsjs",level:4},{value:"customSettings.json",id:"customsettingsjson",level:4},{value:"customSettings.jsx",id:"customsettingsjsx",level:4},{value:"customSettings.julia",id:"customsettingsjulia",level:4},{value:"customSettings.less",id:"customsettingsless",level:4},{value:"customSettings.lightningcss",id:"customsettingslightningcss",level:4},{value:"customSettings.liquid",id:"customsettingsliquid",level:4},{value:"customSettings.liquidjs",id:"customsettingsliquidjs",level:4},{value:"customSettings.lisp",id:"customsettingslisp",level:4},{value:"customSettings.livescript",id:"customsettingslivescript",level:4},{value:"customSettings.ls",id:"customsettingsls",level:4},{value:"customSettings.lua",id:"customsettingslua",level:4},{value:"customSettings.lua-wasm",id:"customsettingslua-wasm",level:4},{value:"customSettings.luawasm",id:"customsettingsluawasm",level:4},{value:"customSettings.malina",id:"customsettingsmalina",level:4},{value:"customSettings.malinajs",id:"customsettingsmalinajs",level:4},{value:"customSettings.mapImports?",id:"customsettingsmapimports",level:4},{value:"customSettings.markdown",id:"customsettingsmarkdown",level:4},{value:"customSettings.md",id:"customsettingsmd",level:4},{value:"customSettings.mdown",id:"customsettingsmdown",level:4},{value:"customSettings.mdx",id:"customsettingsmdx",level:4},{value:"customSettings.mjml",id:"customsettingsmjml",level:4},{value:"customSettings.mkdn",id:"customsettingsmkdn",level:4},{value:"customSettings.ml",id:"customsettingsml",level:4},{value:"customSettings.mli",id:"customsettingsmli",level:4},{value:"customSettings.mustache",id:"customsettingsmustache",level:4},{value:"customSettings.njk",id:"customsettingsnjk",level:4},{value:"customSettings.nunjucks",id:"customsettingsnunjucks",level:4},{value:"customSettings.ocaml",id:"customsettingsocaml",level:4},{value:"customSettings.perl",id:"customsettingsperl",level:4},{value:"customSettings.pg",id:"customsettingspg",level:4},{value:"customSettings.pg.sql",id:"customsettingspgsql",level:4},{value:"customSettings.pglite",id:"customsettingspglite",level:4},{value:"customSettings.pglite.sql",id:"customsettingspglitesql",level:4},{value:"customSettings.pgsql",id:"customsettingspgsql-1",level:4},{value:"customSettings.pgsql.sql",id:"customsettingspgsqlsql",level:4},{value:"customSettings.php",id:"customsettingsphp",level:4},{value:"customSettings.php-wasm",id:"customsettingsphp-wasm",level:4},{value:"customSettings.phpwasm",id:"customsettingsphpwasm",level:4},{value:"customSettings.pintora",id:"customsettingspintora",level:4},{value:"customSettings.pl",id:"customsettingspl",level:4},{value:"customSettings.plt",id:"customsettingsplt",level:4},{value:"customSettings.pm",id:"customsettingspm",level:4},{value:"customSettings.postcss",id:"customsettingspostcss",level:4},{value:"customSettings.postcssImportUrl",id:"customsettingspostcssimporturl",level:4},{value:"customSettings.postcssPresetEnv",id:"customsettingspostcsspresetenv",level:4},{value:"customSettings.postgre.sql",id:"customsettingspostgresql",level:4},{value:"customSettings.postgres",id:"customsettingspostgres",level:4},{value:"customSettings.postgresql",id:"customsettingspostgresql-1",level:4},{value:"customSettings.postgresql.sql",id:"customsettingspostgresqlsql",level:4},{value:"customSettings.prolog",id:"customsettingsprolog",level:4},{value:"customSettings.prolog.pl",id:"customsettingsprologpl",level:4},{value:"customSettings.pug",id:"customsettingspug",level:4},{value:"customSettings.purgecss",id:"customsettingspurgecss",level:4},{value:"customSettings.py",id:"customsettingspy",level:4},{value:"customSettings.py-wasm",id:"customsettingspy-wasm",level:4},{value:"customSettings.py3",id:"customsettingspy3",level:4},{value:"customSettings.pyodide",id:"customsettingspyodide",level:4},{value:"customSettings.python",id:"customsettingspython",level:4},{value:"customSettings.python-wasm",id:"customsettingspython-wasm",level:4},{value:"customSettings.pythonwasm",id:"customsettingspythonwasm",level:4},{value:"customSettings.pywasm",id:"customsettingspywasm",level:4},{value:"customSettings.r",id:"customsettingsr",level:4},{value:"customSettings.r-wasm",id:"customsettingsr-wasm",level:4},{value:"customSettings.rb",id:"customsettingsrb",level:4},{value:"customSettings.re",id:"customsettingsre",level:4},{value:"customSettings.react",id:"customsettingsreact",level:4},{value:"customSettings.react-jsx",id:"customsettingsreact-jsx",level:4},{value:"customSettings.react-native",id:"customsettingsreact-native",level:4},{value:"customSettings.react-native-tsx",id:"customsettingsreact-native-tsx",level:4},{value:"customSettings.react-native.jsx",id:"customsettingsreact-nativejsx",level:4},{value:"customSettings.react-native.tsx",id:"customsettingsreact-nativetsx",level:4},{value:"customSettings.react-tsx",id:"customsettingsreact-tsx",level:4},{value:"customSettings.react.jsx",id:"customsettingsreactjsx",level:4},{value:"customSettings.react.tsx",id:"customsettingsreacttsx",level:4},{value:"customSettings.reason",id:"customsettingsreason",level:4},{value:"customSettings.rei",id:"customsettingsrei",level:4},{value:"customSettings.res",id:"customsettingsres",level:4},{value:"customSettings.rescript",id:"customsettingsrescript",level:4},{value:"customSettings.resi",id:"customsettingsresi",level:4},{value:"customSettings.rich",id:"customsettingsrich",level:4},{value:"customSettings.richtext",id:"customsettingsrichtext",level:4},{value:"customSettings.riot",id:"customsettingsriot",level:4},{value:"customSettings.riotjs",id:"customsettingsriotjs",level:4},{value:"customSettings.rlang",id:"customsettingsrlang",level:4},{value:"customSettings.rstats",id:"customsettingsrstats",level:4},{value:"customSettings.rte",id:"customsettingsrte",level:4},{value:"customSettings.rte.html",id:"customsettingsrtehtml",level:4},{value:"customSettings.ruby",id:"customsettingsruby",level:4},{value:"customSettings.ruby-wasm",id:"customsettingsruby-wasm",level:4},{value:"customSettings.rubywasm",id:"customsettingsrubywasm",level:4},{value:"customSettings.sass",id:"customsettingssass",level:4},{value:"customSettings.scheme",id:"customsettingsscheme",level:4},{value:"customSettings.scm",id:"customsettingsscm",level:4},{value:"customSettings.scriptType?",id:"customsettingsscripttype",level:4},{value:"customSettings.scss",id:"customsettingsscss",level:4},{value:"customSettings.solid",id:"customsettingssolid",level:4},{value:"customSettings.solid.jsx",id:"customsettingssolidjsx",level:4},{value:"customSettings.solid.tsx",id:"customsettingssolidtsx",level:4},{value:"customSettings.sql",id:"customsettingssql",level:4},{value:"customSettings.sqlite",id:"customsettingssqlite",level:4},{value:"customSettings.sqlite3",id:"customsettingssqlite3",level:4},{value:"customSettings.stencil",id:"customsettingsstencil",level:4},{value:"customSettings.stencil.tsx",id:"customsettingsstenciltsx",level:4},{value:"customSettings.styl",id:"customsettingsstyl",level:4},{value:"customSettings.stylis",id:"customsettingsstylis",level:4},{value:"customSettings.stylus",id:"customsettingsstylus",level:4},{value:"customSettings.sucrase",id:"customsettingssucrase",level:4},{value:"customSettings.svelte",id:"customsettingssvelte",level:4},{value:"customSettings.svelte-app",id:"customsettingssvelte-app",level:4},{value:"customSettings.tailwindcss",id:"customsettingstailwindcss",level:4},{value:"customSettings.tcl",id:"customsettingstcl",level:4},{value:"customSettings.teal",id:"customsettingsteal",level:4},{value:"customSettings.template?",id:"customsettingstemplate",level:4},{value:"customSettings.template.data?",id:"customsettingstemplatedata",level:4},{value:"customSettings.template.prerender?",id:"customsettingstemplateprerender",level:4},{value:"customSettings.tl",id:"customsettingstl",level:4},{value:"customSettings.tokencss",id:"customsettingstokencss",level:4},{value:"customSettings.ts",id:"customsettingsts",level:4},{value:"customSettings.tsx",id:"customsettingstsx",level:4},{value:"customSettings.twig",id:"customsettingstwig",level:4},{value:"customSettings.types?",id:"customsettingstypes",level:4},{value:"customSettings.typescript",id:"customsettingstypescript",level:4},{value:"customSettings.unocss",id:"customsettingsunocss",level:4},{value:"customSettings.vento",id:"customsettingsvento",level:4},{value:"customSettings.vto",id:"customsettingsvto",level:4},{value:"customSettings.vue",id:"customsettingsvue",level:4},{value:"customSettings.vue-app",id:"customsettingsvue-app",level:4},{value:"customSettings.vue2",id:"customsettingsvue2",level:4},{value:"customSettings.vue3",id:"customsettingsvue3",level:4},{value:"customSettings.wasm",id:"customsettingswasm",level:4},{value:"customSettings.wasm.cpp",id:"customsettingswasmcpp",level:4},{value:"customSettings.wasm.cs",id:"customsettingswasmcs",level:4},{value:"customSettings.wasm.lua",id:"customsettingswasmlua",level:4},{value:"customSettings.wasm.php",id:"customsettingswasmphp",level:4},{value:"customSettings.wasm.py",id:"customsettingswasmpy",level:4},{value:"customSettings.wasm.rb",id:"customsettingswasmrb",level:4},{value:"customSettings.wast",id:"customsettingswast",level:4},{value:"customSettings.wat",id:"customsettingswat",level:4},{value:"customSettings.webassembly",id:"customsettingswebassembly",level:4},{value:"customSettings.windicss",id:"customsettingswindicss",level:4},{value:"customSettings.xht",id:"customsettingsxht",level:4},{value:"customSettings.xml",id:"customsettingsxml",level:4},{value:"cwasm",id:"cwasm",level:4},{value:"cwasm-selector",id:"cwasm-selector",level:4},{value:"cxx",id:"cxx",level:4},{value:"cxx-selector",id:"cxx-selector",level:4},{value:"delay?",id:"delay",level:4},{value:"Default",id:"default-12",level:5},{value:"description?",id:"description",level:4},{value:"Default",id:"default-13",level:5},{value:"diagram",id:"diagram",level:4},{value:"diagram-selector",id:"diagram-selector",level:4},{value:"diagrams",id:"diagrams",level:4},{value:"diagrams-selector",id:"diagrams-selector",level:4},{value:"disableAI?",id:"disableai",level:4},{value:"dot",id:"dot",level:4},{value:"dot-selector",id:"dot-selector",level:4},{value:"editor?",id:"editor",level:4},{value:"Default",id:"default-14",level:5},{value:"editorMode?",id:"editormode",level:4},{value:"editorTheme?",id:"editortheme",level:4},{value:"Examples",id:"examples",level:5},{value:"edn",id:"edn",level:4},{value:"edn-selector",id:"edn-selector",level:4},{value:"ejs",id:"ejs",level:4},{value:"ejs-selector",id:"ejs-selector",level:4},{value:"embed?",id:"embed",level:4},{value:"emmet?",id:"emmet",level:4},{value:"Default",id:"default-15",level:5},{value:"enableAI?",id:"enableai",level:4},{value:"Default",id:"default-16",level:5},{value:"es",id:"es",level:4},{value:"es-selector",id:"es-selector",level:4},{value:"eta",id:"eta",level:4},{value:"eta-selector",id:"eta-selector",level:4},{value:"fennel",id:"fennel",level:4},{value:"fennel-selector",id:"fennel-selector",level:4},{value:"files?",id:"files",level:4},{value:"flow",id:"flow",level:4},{value:"flow-selector",id:"flow-selector",level:4},{value:"fnl",id:"fnl",level:4},{value:"fnl-selector",id:"fnl-selector",level:4},{value:"foldRegions?",id:"foldregions",level:4},{value:"Default",id:"default-17",level:5},{value:"fontFamily?",id:"fontfamily",level:4},{value:"fontSize?",id:"fontsize",level:4},{value:"Default",id:"default-18",level:5},{value:"formatOnsave?",id:"formatonsave",level:4},{value:"Default",id:"default-19",level:5},{value:"gleam",id:"gleam",level:4},{value:"gleam-selector",id:"gleam-selector",level:4},{value:"go",id:"go",level:4},{value:"go-selector",id:"go-selector",level:4},{value:"golang",id:"golang",level:4},{value:"golang-selector",id:"golang-selector",level:4},{value:"graph",id:"graph",level:4},{value:"graph-selector",id:"graph-selector",level:4},{value:"h",id:"h",level:4},{value:"h-selector",id:"h-selector",level:4},{value:"haml",id:"haml",level:4},{value:"haml-selector",id:"haml-selector",level:4},{value:"handlebars",id:"handlebars",level:4},{value:"handlebars-selector",id:"handlebars-selector",level:4},{value:"hbs",id:"hbs",level:4},{value:"hbs-selector",id:"hbs-selector",level:4},{value:"head?",id:"head",level:4},{value:"Default",id:"default-20",level:5},{value:"headless?",id:"headless-1",level:4},{value:"Default",id:"default-21",level:5},{value:"hpp",id:"hpp",level:4},{value:"hpp-selector",id:"hpp-selector",level:4},{value:"htm",id:"htm",level:4},{value:"htm-selector",id:"htm-selector",level:4},{value:"html",id:"html",level:4},{value:"html-selector",id:"html-selector",level:4},{value:"htmlAttrs?",id:"htmlattrs",level:4},{value:"Example",id:"example",level:5},{value:"ii",id:"ii",level:4},{value:"ii-selector",id:"ii-selector",level:4},{value:"imba",id:"imba",level:4},{value:"imba-selector",id:"imba-selector",level:4},{value:"import?",id:"import-1",level:4},{value:"imports?",id:"imports",level:4},{value:"Index Signature",id:"index-signature",level:5},{value:"ixx",id:"ixx",level:4},{value:"ixx-selector",id:"ixx-selector",level:4},{value:"jade",id:"jade",level:4},{value:"jade-selector",id:"jade-selector",level:4},{value:"java",id:"java",level:4},{value:"java-selector",id:"java-selector",level:4},{value:"javascript",id:"javascript",level:4},{value:"javascript-selector",id:"javascript-selector",level:4},{value:"jinja",id:"jinja",level:4},{value:"jinja-selector",id:"jinja-selector",level:4},{value:"jl",id:"jl",level:4},{value:"jl-selector",id:"jl-selector",level:4},{value:"js",id:"js",level:4},{value:"js-selector",id:"js-selector",level:4},{value:"json",id:"json",level:4},{value:"json-selector",id:"json-selector",level:4},{value:"jsx",id:"jsx",level:4},{value:"jsx-selector",id:"jsx-selector",level:4},{value:"julia",id:"julia",level:4},{value:"julia-selector",id:"julia-selector",level:4},{value:"lang?",id:"lang",level:4},{value:"language?",id:"language",level:4},{value:"languages?",id:"languages",level:4},{value:"layout?",id:"layout",level:4},{value:"Default",id:"default-22",level:5},{value:"less",id:"less",level:4},{value:"less-selector",id:"less-selector",level:4},{value:"lineNumbers?",id:"linenumbers",level:4},{value:"Default",id:"default-23",level:5},{value:"liquid",id:"liquid",level:4},{value:"liquid-selector",id:"liquid-selector",level:4},{value:"liquidjs",id:"liquidjs",level:4},{value:"liquidjs-selector",id:"liquidjs-selector",level:4},{value:"lisp",id:"lisp",level:4},{value:"lisp-selector",id:"lisp-selector",level:4},{value:"lite?",id:"lite-1",level:4},{value:"Deprecated",id:"deprecated-1",level:5},{value:"Default",id:"default-24",level:5},{value:"livescript",id:"livescript",level:4},{value:"livescript-selector",id:"livescript-selector",level:4},{value:"loading?",id:"loading-1",level:4},{value:"Default",id:"default-25",level:5},{value:"ls",id:"ls",level:4},{value:"ls-selector",id:"ls-selector",level:4},{value:"lua",id:"lua",level:4},{value:"lua-selector",id:"lua-selector",level:4},{value:"lua-wasm",id:"lua-wasm",level:4},{value:"lua-wasm-selector",id:"lua-wasm-selector",level:4},{value:"luawasm",id:"luawasm",level:4},{value:"luawasm-selector",id:"luawasm-selector",level:4},{value:"malina",id:"malina",level:4},{value:"malina-selector",id:"malina-selector",level:4},{value:"malinajs",id:"malinajs",level:4},{value:"malinajs-selector",id:"malinajs-selector",level:4},{value:"markdown",id:"markdown",level:4},{value:"markdown-selector",id:"markdown-selector",level:4},{value:"markup?",id:"markup",level:4},{value:"Default",id:"default-26",level:5},{value:"markup.content?",id:"markupcontent",level:4},{value:"Default",id:"default-27",level:5},{value:"markup.contentUrl?",id:"markupcontenturl",level:4},{value:"markup.foldedLines?",id:"markupfoldedlines",level:4},{value:"Example",id:"example-1",level:5},{value:"markup.hiddenContent?",id:"markuphiddencontent",level:4},{value:"markup.hiddenContentUrl?",id:"markuphiddencontenturl",level:4},{value:"markup.hideTitle?",id:"markuphidetitle",level:4},{value:"markup.language",id:"markuplanguage",level:4},{value:"markup.order?",id:"markuporder",level:4},{value:"Default",id:"default-28",level:5},{value:"markup.position?",id:"markupposition",level:4},{value:"Example",id:"example-2",level:5},{value:"markup.selector?",id:"markupselector",level:4},{value:"markup.title?",id:"markuptitle",level:4},{value:"md",id:"md",level:4},{value:"md-selector",id:"md-selector",level:4},{value:"mdown",id:"mdown",level:4},{value:"mdown-selector",id:"mdown-selector",level:4},{value:"mdx",id:"mdx",level:4},{value:"mdx-selector",id:"mdx-selector",level:4},{value:"mjml",id:"mjml",level:4},{value:"mjml-selector",id:"mjml-selector",level:4},{value:"mkdn",id:"mkdn",level:4},{value:"mkdn-selector",id:"mkdn-selector",level:4},{value:"ml",id:"ml",level:4},{value:"ml-selector",id:"ml-selector",level:4},{value:"mli",id:"mli",level:4},{value:"mli-selector",id:"mli-selector",level:4},{value:"mode?",id:"mode",level:4},{value:"Default",id:"default-29",level:5},{value:"mustache",id:"mustache",level:4},{value:"mustache-selector",id:"mustache-selector",level:4},{value:"new?",id:"new",level:4},{value:"njk",id:"njk",level:4},{value:"njk-selector",id:"njk-selector",level:4},{value:"no-defaults?",id:"no-defaults",level:4},{value:"nunjucks",id:"nunjucks",level:4},{value:"nunjucks-selector",id:"nunjucks-selector",level:4},{value:"ocaml",id:"ocaml",level:4},{value:"ocaml-selector",id:"ocaml-selector",level:4},{value:"params?",id:"params-1",level:4},{value:"perl",id:"perl",level:4},{value:"perl-selector",id:"perl-selector",level:4},{value:"pg",id:"pg",level:4},{value:"pg-selector",id:"pg-selector",level:4},{value:"pg.sql",id:"pgsql",level:4},{value:"pg.sql-selector",id:"pgsql-selector",level:4},{value:"pglite",id:"pglite",level:4},{value:"pglite-selector",id:"pglite-selector",level:4},{value:"pglite.sql",id:"pglitesql",level:4},{value:"pglite.sql-selector",id:"pglitesql-selector",level:4},{value:"pgsql",id:"pgsql-1",level:4},{value:"pgsql-selector",id:"pgsql-selector-1",level:4},{value:"pgsql.sql",id:"pgsqlsql",level:4},{value:"pgsql.sql-selector",id:"pgsqlsql-selector",level:4},{value:"php",id:"php",level:4},{value:"php-selector",id:"php-selector",level:4},{value:"php-wasm",id:"php-wasm",level:4},{value:"php-wasm-selector",id:"php-wasm-selector",level:4},{value:"phpwasm",id:"phpwasm",level:4},{value:"phpwasm-selector",id:"phpwasm-selector",level:4},{value:"pintora",id:"pintora",level:4},{value:"pintora-selector",id:"pintora-selector",level:4},{value:"pl",id:"pl",level:4},{value:"pl-selector",id:"pl-selector",level:4},{value:"plt",id:"plt",level:4},{value:"plt-selector",id:"plt-selector",level:4},{value:"pm",id:"pm",level:4},{value:"pm-selector",id:"pm-selector",level:4},{value:"postcss",id:"postcss",level:4},{value:"postcss-selector",id:"postcss-selector",level:4},{value:"postgre.sql",id:"postgresql",level:4},{value:"postgre.sql-selector",id:"postgresql-selector",level:4},{value:"postgres",id:"postgres",level:4},{value:"postgres-selector",id:"postgres-selector",level:4},{value:"postgresql",id:"postgresql-1",level:4},{value:"postgresql-selector",id:"postgresql-selector-1",level:4},{value:"postgresql.sql",id:"postgresqlsql",level:4},{value:"postgresql.sql-selector",id:"postgresqlsql-selector",level:4},{value:"preview?",id:"preview",level:4},{value:"processors?",id:"processors",level:4},{value:"prolog",id:"prolog",level:4},{value:"prolog-selector",id:"prolog-selector",level:4},{value:"prolog.pl",id:"prologpl",level:4},{value:"prolog.pl-selector",id:"prologpl-selector",level:4},{value:"pug",id:"pug",level:4},{value:"pug-selector",id:"pug-selector",level:4},{value:"py",id:"py",level:4},{value:"py-selector",id:"py-selector",level:4},{value:"py-wasm",id:"py-wasm",level:4},{value:"py-wasm-selector",id:"py-wasm-selector",level:4},{value:"py3",id:"py3",level:4},{value:"py3-selector",id:"py3-selector",level:4},{value:"pyodide",id:"pyodide",level:4},{value:"pyodide-selector",id:"pyodide-selector",level:4},{value:"python",id:"python",level:4},{value:"python-selector",id:"python-selector",level:4},{value:"python-wasm",id:"python-wasm",level:4},{value:"python-wasm-selector",id:"python-wasm-selector",level:4},{value:"pythonwasm",id:"pythonwasm",level:4},{value:"pythonwasm-selector",id:"pythonwasm-selector",level:4},{value:"pywasm",id:"pywasm",level:4},{value:"pywasm-selector",id:"pywasm-selector",level:4},{value:"r",id:"r",level:4},{value:"r-selector",id:"r-selector",level:4},{value:"r-wasm",id:"r-wasm",level:4},{value:"r-wasm-selector",id:"r-wasm-selector",level:4},{value:"raw?",id:"raw",level:4},{value:"rb",id:"rb",level:4},{value:"rb-selector",id:"rb-selector",level:4},{value:"re",id:"re",level:4},{value:"re-selector",id:"re-selector",level:4},{value:"react",id:"react",level:4},{value:"react-jsx",id:"react-jsx",level:4},{value:"react-jsx-selector",id:"react-jsx-selector",level:4},{value:"react-native",id:"react-native",level:4},{value:"react-native-selector",id:"react-native-selector",level:4},{value:"react-native-tsx",id:"react-native-tsx",level:4},{value:"react-native-tsx-selector",id:"react-native-tsx-selector",level:4},{value:"react-native.jsx",id:"react-nativejsx",level:4},{value:"react-native.jsx-selector",id:"react-nativejsx-selector",level:4},{value:"react-native.tsx",id:"react-nativetsx",level:4},{value:"react-native.tsx-selector",id:"react-nativetsx-selector",level:4},{value:"react-selector",id:"react-selector",level:4},{value:"react-tsx",id:"react-tsx",level:4},{value:"react-tsx-selector",id:"react-tsx-selector",level:4},{value:"react.jsx",id:"reactjsx",level:4},{value:"react.jsx-selector",id:"reactjsx-selector",level:4},{value:"react.tsx",id:"reacttsx",level:4},{value:"react.tsx-selector",id:"reacttsx-selector",level:4},{value:"readonly?",id:"readonly",level:4},{value:"Default",id:"default-30",level:5},{value:"reason",id:"reason",level:4},{value:"reason-selector",id:"reason-selector",level:4},{value:"recoverUnsaved?",id:"recoverunsaved",level:4},{value:"Default",id:"default-31",level:5},{value:"rei",id:"rei",level:4},{value:"rei-selector",id:"rei-selector",level:4},{value:"res",id:"res",level:4},{value:"res-selector",id:"res-selector",level:4},{value:"rescript",id:"rescript",level:4},{value:"rescript-selector",id:"rescript-selector",level:4},{value:"resi",id:"resi",level:4},{value:"resi-selector",id:"resi-selector",level:4},{value:"rich",id:"rich",level:4},{value:"rich-selector",id:"rich-selector",level:4},{value:"richtext",id:"richtext",level:4},{value:"richtext-selector",id:"richtext-selector",level:4},{value:"riot",id:"riot",level:4},{value:"riot-selector",id:"riot-selector",level:4},{value:"riotjs",id:"riotjs",level:4},{value:"riotjs-selector",id:"riotjs-selector",level:4},{value:"rlang",id:"rlang",level:4},{value:"rlang-selector",id:"rlang-selector",level:4},{value:"rstats",id:"rstats",level:4},{value:"rstats-selector",id:"rstats-selector",level:4},{value:"rte",id:"rte",level:4},{value:"rte-selector",id:"rte-selector",level:4},{value:"rte.html",id:"rtehtml",level:4},{value:"rte.html-selector",id:"rtehtml-selector",level:4},{value:"ruby",id:"ruby",level:4},{value:"ruby-selector",id:"ruby-selector",level:4},{value:"ruby-wasm",id:"ruby-wasm",level:4},{value:"ruby-wasm-selector",id:"ruby-wasm-selector",level:4},{value:"rubywasm",id:"rubywasm",level:4},{value:"rubywasm-selector",id:"rubywasm-selector",level:4},{value:"sass",id:"sass",level:4},{value:"sass-selector",id:"sass-selector",level:4},{value:"scheme",id:"scheme",level:4},{value:"scheme-selector",id:"scheme-selector",level:4},{value:"scm",id:"scm",level:4},{value:"scm-selector",id:"scm-selector",level:4},{value:"screen?",id:"screen",level:4},{value:"script?",id:"script",level:4},{value:"Default",id:"default-32",level:5},{value:"script.content?",id:"scriptcontent",level:4},{value:"Default",id:"default-33",level:5},{value:"script.contentUrl?",id:"scriptcontenturl",level:4},{value:"script.foldedLines?",id:"scriptfoldedlines",level:4},{value:"Example",id:"example-3",level:5},{value:"script.hiddenContent?",id:"scripthiddencontent",level:4},{value:"script.hiddenContentUrl?",id:"scripthiddencontenturl",level:4},{value:"script.hideTitle?",id:"scripthidetitle",level:4},{value:"script.language",id:"scriptlanguage",level:4},{value:"script.order?",id:"scriptorder",level:4},{value:"Default",id:"default-34",level:5},{value:"script.position?",id:"scriptposition",level:4},{value:"Example",id:"example-4",level:5},{value:"script.selector?",id:"scriptselector",level:4},{value:"script.title?",id:"scripttitle",level:4},{value:"scripts?",id:"scripts",level:4},{value:"scrollPosition?",id:"scrollposition",level:4},{value:"scss",id:"scss",level:4},{value:"scss-selector",id:"scss-selector",level:4},{value:"sdkVersion?",id:"sdkversion",level:4},{value:"semicolons?",id:"semicolons",level:4},{value:"Default",id:"default-35",level:5},{value:"showSpacing?",id:"showspacing",level:4},{value:"Default",id:"default-36",level:5},{value:"singleQuote?",id:"singlequote",level:4},{value:"Default",id:"default-37",level:5},{value:"solid",id:"solid",level:4},{value:"solid-selector",id:"solid-selector",level:4},{value:"solid.jsx",id:"solidjsx",level:4},{value:"solid.jsx-selector",id:"solidjsx-selector",level:4},{value:"solid.tsx",id:"solidtsx",level:4},{value:"solid.tsx-selector",id:"solidtsx-selector",level:4},{value:"sql",id:"sql",level:4},{value:"sql-selector",id:"sql-selector",level:4},{value:"sqlite",id:"sqlite",level:4},{value:"sqlite-selector",id:"sqlite-selector",level:4},{value:"sqlite3",id:"sqlite3",level:4},{value:"sqlite3-selector",id:"sqlite3-selector",level:4},{value:"stencil",id:"stencil",level:4},{value:"stencil-selector",id:"stencil-selector",level:4},{value:"stencil.tsx",id:"stenciltsx",level:4},{value:"stencil.tsx-selector",id:"stenciltsx-selector",level:4},{value:"styl",id:"styl",level:4},{value:"styl-selector",id:"styl-selector",level:4},{value:"style?",id:"style",level:4},{value:"Default",id:"default-38",level:5},{value:"style.content?",id:"stylecontent",level:4},{value:"Default",id:"default-39",level:5},{value:"style.contentUrl?",id:"stylecontenturl",level:4},{value:"style.foldedLines?",id:"stylefoldedlines",level:4},{value:"Example",id:"example-5",level:5},{value:"style.hiddenContent?",id:"stylehiddencontent",level:4},{value:"style.hiddenContentUrl?",id:"stylehiddencontenturl",level:4},{value:"style.hideTitle?",id:"stylehidetitle",level:4},{value:"style.language",id:"stylelanguage",level:4},{value:"style.order?",id:"styleorder",level:4},{value:"Default",id:"default-40",level:5},{value:"style.position?",id:"styleposition",level:4},{value:"Example",id:"example-6",level:5},{value:"style.selector?",id:"styleselector",level:4},{value:"style.title?",id:"styletitle",level:4},{value:"stylesheets?",id:"stylesheets",level:4},{value:"stylis",id:"stylis",level:4},{value:"stylis-selector",id:"stylis-selector",level:4},{value:"stylus",id:"stylus",level:4},{value:"stylus-selector",id:"stylus-selector",level:4},{value:"sucrase",id:"sucrase",level:4},{value:"sucrase-selector",id:"sucrase-selector",level:4},{value:"svelte",id:"svelte",level:4},{value:"svelte-app",id:"svelte-app",level:4},{value:"svelte-app-selector",id:"svelte-app-selector",level:4},{value:"svelte-selector",id:"svelte-selector",level:4},{value:"tabSize?",id:"tabsize",level:4},{value:"Default",id:"default-41",level:5},{value:"tags?",id:"tags",level:4},{value:"tcl",id:"tcl",level:4},{value:"tcl-selector",id:"tcl-selector",level:4},{value:"teal",id:"teal",level:4},{value:"teal-selector",id:"teal-selector",level:4},{value:"template?",id:"template",level:4},{value:"tests?",id:"tests",level:4},{value:"theme?",id:"theme",level:4},{value:"Default",id:"default-42",level:5},{value:"themeColor?",id:"themecolor",level:4},{value:"Default",id:"default-43",level:5},{value:"title?",id:"title",level:4},{value:"Default",id:"default-44",level:5},{value:"tl",id:"tl",level:4},{value:"tl-selector",id:"tl-selector",level:4},{value:"tools?",id:"tools",level:4},{value:"trailingComma?",id:"trailingcomma",level:4},{value:"Default",id:"default-45",level:5},{value:"ts",id:"ts",level:4},{value:"ts-selector",id:"ts-selector",level:4},{value:"tsx",id:"tsx",level:4},{value:"tsx-selector",id:"tsx-selector",level:4},{value:"twig",id:"twig",level:4},{value:"twig-selector",id:"twig-selector",level:4},{value:"types?",id:"types",level:4},{value:"Examples",id:"examples-1",level:5},{value:"typescript",id:"typescript",level:4},{value:"typescript-selector",id:"typescript-selector",level:4},{value:"useTabs?",id:"usetabs",level:4},{value:"Default",id:"default-46",level:5},{value:"vento",id:"vento",level:4},{value:"vento-selector",id:"vento-selector",level:4},{value:"version?",id:"version",level:4},{value:"view?",id:"view",level:4},{value:"Deprecated",id:"deprecated-2",level:5},{value:"Default",id:"default-47",level:5},{value:"vto",id:"vto",level:4},{value:"vto-selector",id:"vto-selector",level:4},{value:"vue",id:"vue",level:4},{value:"vue-app",id:"vue-app",level:4},{value:"vue-app-selector",id:"vue-app-selector",level:4},{value:"vue-selector",id:"vue-selector",level:4},{value:"vue2",id:"vue2",level:4},{value:"vue2-selector",id:"vue2-selector",level:4},{value:"vue3",id:"vue3",level:4},{value:"vue3-selector",id:"vue3-selector",level:4},{value:"wasm",id:"wasm",level:4},{value:"wasm-selector",id:"wasm-selector",level:4},{value:"wasm.cpp",id:"wasmcpp",level:4},{value:"wasm.cpp-selector",id:"wasmcpp-selector",level:4},{value:"wasm.cs",id:"wasmcs",level:4},{value:"wasm.cs-selector",id:"wasmcs-selector",level:4},{value:"wasm.lua",id:"wasmlua",level:4},{value:"wasm.lua-selector",id:"wasmlua-selector",level:4},{value:"wasm.php",id:"wasmphp",level:4},{value:"wasm.php-selector",id:"wasmphp-selector",level:4},{value:"wasm.py",id:"wasmpy",level:4},{value:"wasm.py-selector",id:"wasmpy-selector",level:4},{value:"wasm.rb",id:"wasmrb",level:4},{value:"wasm.rb-selector",id:"wasmrb-selector",level:4},{value:"wast",id:"wast",level:4},{value:"wast-selector",id:"wast-selector",level:4},{value:"wat",id:"wat",level:4},{value:"wat-selector",id:"wat-selector",level:4},{value:"webassembly",id:"webassembly",level:4},{value:"webassembly-selector",id:"webassembly-selector",level:4},{value:"welcome?",id:"welcome",level:4},{value:"wordWrap?",id:"wordwrap",level:4},{value:"Default",id:"default-48",level:5},{value:"x?",id:"x",level:4},{value:"xht",id:"xht",level:4},{value:"xht-selector",id:"xht-selector",level:4},{value:"xml",id:"xml",level:4},{value:"xml-selector",id:"xml-selector",level:4},{value:"zoom?",id:"zoom",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"template?",id:"template-1",level:3},{value:"Defined in",id:"defined-in-7",level:4},{value:"view?",id:"view-1",level:3},{value:"Deprecated",id:"deprecated-3",level:4},{value:"Default",id:"default-49",level:4},{value:"Defined in",id:"defined-in-8",level:4}];function h(e){let s={a:"a",blockquote:"blockquote",code:"code",del:"del",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(s.header,{children:(0,c.jsx)(s.h1,{id:"interface-embedoptions",children:"Interface: EmbedOptions"})}),"\n",(0,c.jsx)(s.p,{children:"An object that represents the playground embed options."}),"\n",(0,c.jsxs)(s.p,{children:["See ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/js-ts/#embed-options",children:"docs"})," for details."]}),"\n",(0,c.jsx)(s.h2,{id:"properties",children:"Properties"}),"\n",(0,c.jsx)(s.h3,{id:"appurl",children:"appUrl?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"appUrl"}),": ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["Allows loading the playground from a custom URL\n(e.g. a ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/self-hosting",children:"self-hosted app"})," or a ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/permanent-url",children:"permanent URL"}),")."]}),"\n",(0,c.jsx)(s.p,{children:"If supplied with an invalid URL, an error is thrown."}),"\n",(0,c.jsx)(s.h4,{id:"default",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"'https://livecodes.io'\n"})}),"\n",(0,c.jsx)(s.h4,{id:"defined-in",children:"Defined in"}),"\n",(0,c.jsx)(s.p,{children:(0,c.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L314",children:"models.ts:314"})}),"\n",(0,c.jsx)(s.hr,{}),"\n",(0,c.jsx)(s.h3,{id:"config",children:"config?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"config"}),": ",(0,c.jsx)(s.code,{children:"string"})," | ",(0,c.jsx)(s.code,{children:"Partial"}),"<",(0,c.jsx)(s.a,{href:"/docs/api/interfaces/Config",children:(0,c.jsx)(s.code,{children:"Config"})}),">"]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["A ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/configuration/configuration-object",children:"configuration object"})," or a URL to a JSON file representing a configuration object to load."]}),"\n",(0,c.jsx)(s.p,{children:"If supplied and is not an object or a valid URL, an error is thrown."}),"\n",(0,c.jsx)(s.h4,{id:"default-1",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"{}\n"})}),"\n",(0,c.jsx)(s.h4,{id:"defined-in-1",children:"Defined in"}),"\n",(0,c.jsx)(s.p,{children:(0,c.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L346",children:"models.ts:346"})}),"\n",(0,c.jsx)(s.hr,{}),"\n",(0,c.jsx)(s.h3,{id:"headless",children:"headless?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"headless"}),": ",(0,c.jsx)(s.code,{children:"boolean"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["If ",(0,c.jsx)(s.code,{children:"true"}),", the playground is loaded in ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/headless",children:"headless mode"}),"."]}),"\n",(0,c.jsx)(s.h4,{id:"default-2",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"false\n"})}),"\n",(0,c.jsx)(s.h4,{id:"defined-in-2",children:"Defined in"}),"\n",(0,c.jsx)(s.p,{children:(0,c.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L352",children:"models.ts:352"})}),"\n",(0,c.jsx)(s.hr,{}),"\n",(0,c.jsx)(s.h3,{id:"import",children:"import?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"import"}),": ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["A resource to ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/import",children:"import"})," (from any of the supported ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/import#sources",children:"sources"}),")."]}),"\n",(0,c.jsx)(s.h4,{id:"defined-in-3",children:"Defined in"}),"\n",(0,c.jsx)(s.p,{children:(0,c.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L357",children:"models.ts:357"})}),"\n",(0,c.jsx)(s.hr,{}),"\n",(0,c.jsx)(s.h3,{id:"lite",children:(0,c.jsx)(s.del,{children:"lite?"})}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"lite"}),": ",(0,c.jsx)(s.code,{children:"boolean"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"deprecated",children:"Deprecated"}),"\n",(0,c.jsxs)(s.p,{children:["Use ",(0,c.jsx)(s.code,{children:'{ config: { mode: "lite" } }'})," instead"]}),"\n",(0,c.jsxs)(s.p,{children:["If ",(0,c.jsx)(s.code,{children:"true"}),", the playground is loaded in ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/lite",children:"lite mode"}),"."]}),"\n",(0,c.jsx)(s.h4,{id:"default-3",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"false\n"})}),"\n",(0,c.jsx)(s.h4,{id:"defined-in-4",children:"Defined in"}),"\n",(0,c.jsx)(s.p,{children:(0,c.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L367",children:"models.ts:367"})}),"\n",(0,c.jsx)(s.hr,{}),"\n",(0,c.jsx)(s.h3,{id:"loading",children:"loading?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"loading"}),": ",(0,c.jsx)(s.code,{children:'"click"'})," | ",(0,c.jsx)(s.code,{children:'"eager"'})," | ",(0,c.jsx)(s.code,{children:'"lazy"'})]}),"\n"]}),"\n",(0,c.jsx)(s.p,{children:"Sets how the playground loads:"}),"\n",(0,c.jsxs)(s.ul,{children:["\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.code,{children:'"eager"'}),": The playground loads immediately."]}),"\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.code,{children:'"lazy"'}),": A playground embedded low down in the page will not load until the user scrolls so that it approaches the viewport."]}),"\n",(0,c.jsxs)(s.li,{children:[(0,c.jsx)(s.code,{children:'"click"'}),': The playground does not load automatically. Instead, a "Click-to-load" screen is shown.']}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"default-4",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:'"lazy"\n'})}),"\n",(0,c.jsx)(s.h4,{id:"defined-in-5",children:"Defined in"}),"\n",(0,c.jsx)(s.p,{children:(0,c.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L377",children:"models.ts:377"})}),"\n",(0,c.jsx)(s.hr,{}),"\n",(0,c.jsx)(s.h3,{id:"params",children:"params?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"params"}),": ",(0,c.jsx)(s.code,{children:"object"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["An object that represents the ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/configuration/query-params",children:"URL Query parameters"}),", that can be used to configure the playground."]}),"\n",(0,c.jsx)(s.p,{children:"These 2 snippets produce similar output:"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-js",children:"import { createPlayground } from 'livecodes';\n\n// use config\ncreatePlayground('#container', {\n config: {\n markup: {\n language: 'markdown',\n content: '# Hello World!',\n },\n },\n});\n\n// use params\ncreatePlayground('#container', { params: { md: '# Hello World!' } });\n"})}),"\n",(0,c.jsx)(s.h4,{id:"active",children:"active?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"active"}),": ",(0,c.jsx)(s.code,{children:"0"})," | ",(0,c.jsx)(s.code,{children:"2"})," | ",(0,c.jsx)(s.code,{children:"1"})," | ",(0,c.jsx)(s.a,{href:"/docs/api/internal/type-aliases/EditorId",children:(0,c.jsx)(s.code,{children:"EditorId"})})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"activeeditor",children:"activeEditor?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"activeEditor"}),": ",(0,c.jsx)(s.code,{children:"0"})," | ",(0,c.jsx)(s.code,{children:"2"})," | ",(0,c.jsx)(s.code,{children:"1"})," | ",(0,c.jsx)(s.a,{href:"/docs/api/internal/type-aliases/EditorId",children:(0,c.jsx)(s.code,{children:"EditorId"})})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"adoc",children:"adoc"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"adoc"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"adoc-selector",children:"adoc-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"adoc-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"allowlangchange",children:"allowLangChange?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"allowLangChange"}),": ",(0,c.jsx)(s.code,{children:"boolean"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["If ",(0,c.jsx)(s.code,{children:"false"}),", the UI will not show the menu that allows changing editor language."]}),"\n",(0,c.jsx)(s.h5,{id:"default-5",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"true\n"})}),"\n",(0,c.jsx)(s.h4,{id:"appsvelte",children:"app.svelte"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"svelte"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"appsvelte-selector",children:"app.svelte-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"svelte-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"appvue",children:"app.vue"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"vue"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"appvue-selector",children:"app.vue-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"vue-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"applanguage",children:"appLanguage?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"appLanguage"}),": ",(0,c.jsx)(s.a,{href:"/docs/api/internal/type-aliases/AppLanguage",children:(0,c.jsx)(s.code,{children:"AppLanguage"})})]}),"\n"]}),"\n",(0,c.jsx)(s.p,{children:"Sets the app UI language used."}),"\n",(0,c.jsx)(s.h4,{id:"appurl-1",children:"appUrl?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"appUrl"}),": ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["Allows loading the playground from a custom URL\n(e.g. a ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/self-hosting",children:"self-hosted app"})," or a ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/permanent-url",children:"permanent URL"}),")."]}),"\n",(0,c.jsx)(s.p,{children:"If supplied with an invalid URL, an error is thrown."}),"\n",(0,c.jsx)(s.h5,{id:"default-6",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"'https://livecodes.io'\n"})}),"\n",(0,c.jsx)(s.h4,{id:"art",children:"art"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"art"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"art-selector",children:"art-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"art-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"art-template",children:"art-template"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"art-template"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"art-template-selector",children:"art-template-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"art-template-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"as",children:"as"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"as"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"as-selector",children:"as-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"as-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"asc",children:"asc"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"asc"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"asc-selector",children:"asc-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"asc-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"asciidoc",children:"asciidoc"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"asciidoc"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"asciidoc-selector",children:"asciidoc-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"asciidoc-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"assemblyscript",children:"assemblyscript"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"assemblyscript"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"assemblyscript-selector",children:"assemblyscript-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"assemblyscript-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"astro",children:"astro"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"astro"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"astro-selector",children:"astro-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"astro-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"autosave",children:"autosave?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"autosave"}),": ",(0,c.jsx)(s.code,{children:"boolean"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["If ",(0,c.jsx)(s.code,{children:"true"}),", the project is automatically saved on code change,\nafter time ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/configuration/configuration-object#delay",children:"delay"}),"."]}),"\n",(0,c.jsx)(s.h5,{id:"default-7",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"false\n"})}),"\n",(0,c.jsx)(s.h4,{id:"autotest",children:"autotest?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"autotest"}),": ",(0,c.jsx)(s.code,{children:"boolean"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["If ",(0,c.jsx)(s.code,{children:"true"}),", the project is watched for code changes which trigger tests to auto-run."]}),"\n",(0,c.jsx)(s.h5,{id:"default-8",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"false\n"})}),"\n",(0,c.jsx)(s.h4,{id:"autoupdate",children:"autoupdate?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"autoupdate"}),": ",(0,c.jsx)(s.code,{children:"boolean"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["If ",(0,c.jsx)(s.code,{children:"true"}),", the result page is automatically updated on code change,\nafter time ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/configuration/configuration-object#delay",children:"delay"}),"."]}),"\n",(0,c.jsx)(s.h5,{id:"default-9",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"true\n"})}),"\n",(0,c.jsx)(s.h4,{id:"babel",children:"babel"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"babel"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"babel-selector",children:"babel-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"babel-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"bb",children:"bb"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"bb"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"bb-selector",children:"bb-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"bb-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"bbcode",children:"bbcode"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"bbcode"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"bbcode-selector",children:"bbcode-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"bbcode-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"binary",children:"Binary"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"Binary"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"binary-selector",children:"Binary-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"Binary-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"blockly",children:"blockly"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"blockly"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"blockly-selector",children:"blockly-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"blockly-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"blocklyxml",children:"blockly.xml"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"xml"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"blocklyxml-selector",children:"blockly.xml-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"xml-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"c",children:"c"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"c"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"c-1",children:"C"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"C"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"c-selector",children:"c-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"c-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"c-selector-1",children:"C-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"C-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"c-2",children:"c++"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"c++"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"c-selector-2",children:"c++-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"c++-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"civet",children:"civet"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"civet"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"civet-selector",children:"civet-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"civet-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"clang",children:"clang"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"clang"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"clang-selector",children:"clang-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"clang-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"clangcpp",children:"clang.cpp"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cpp"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"clangcpp-selector",children:"clang.cpp-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cpp-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"clio",children:"clio"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"clio"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"clio-selector",children:"clio-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"clio-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"clj",children:"clj"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"clj"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"clj-selector",children:"clj-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"clj-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cljc",children:"cljc"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cljc"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cljc-selector",children:"cljc-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cljc-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cljs",children:"cljs"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cljs"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cljs-selector",children:"cljs-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cljs-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"clojure",children:"clojure"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"clojure"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"clojure-selector",children:"clojure-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"clojure-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"clojurescript",children:"clojurescript"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"clojurescript"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"clojurescript-selector",children:"clojurescript-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"clojurescript-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"closebrackets",children:"closeBrackets?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"closeBrackets"}),": ",(0,c.jsx)(s.code,{children:"boolean"})]}),"\n"]}),"\n",(0,c.jsx)(s.p,{children:"Use auto-complete to close brackets and quotes."}),"\n",(0,c.jsx)(s.h5,{id:"default-10",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"true\n"})}),"\n",(0,c.jsx)(s.h4,{id:"coffee",children:"coffee"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"coffee"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"coffee-selector",children:"coffee-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"coffee-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"coffeescript",children:"coffeescript"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"coffeescript"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"coffeescript-selector",children:"coffeescript-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"coffeescript-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"common-lisp",children:"common-lisp"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"common-lisp"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"common-lisp-selector",children:"common-lisp-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"common-lisp-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"commonlisp",children:"commonlisp"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"commonlisp"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"commonlisp-selector",children:"commonlisp-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"commonlisp-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"compiled",children:"compiled"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"compiled"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:'""'})," | ",(0,c.jsx)(s.code,{children:'"true"'})," | ",(0,c.jsx)(s.code,{children:'"none"'})," | ",(0,c.jsx)(s.code,{children:'"closed"'})," | ",(0,c.jsx)(s.code,{children:'"open"'})," | ",(0,c.jsx)(s.code,{children:'"full"'})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"config-1",children:"config?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"config"}),": ",(0,c.jsx)(s.code,{children:"string"})," | ",(0,c.jsx)(s.code,{children:"Partial"}),"<",(0,c.jsx)(s.a,{href:"/docs/api/interfaces/Config",children:(0,c.jsx)(s.code,{children:"Config"})}),"> & ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["A ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/configuration/configuration-object",children:"configuration object"})," or a URL to a JSON file representing a configuration object to load."]}),"\n",(0,c.jsx)(s.p,{children:"If supplied and is not an object or a valid URL, an error is thrown."}),"\n",(0,c.jsx)(s.h5,{id:"default-11",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"{}\n"})}),"\n",(0,c.jsx)(s.h4,{id:"console",children:"console"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"console"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:'""'})," | ",(0,c.jsx)(s.code,{children:'"true"'})," | ",(0,c.jsx)(s.code,{children:'"none"'})," | ",(0,c.jsx)(s.code,{children:'"closed"'})," | ",(0,c.jsx)(s.code,{children:'"open"'})," | ",(0,c.jsx)(s.code,{children:'"full"'})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cp",children:"cp"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cp"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cp-selector",children:"cp-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cp-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cpp",children:"cpp"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cpp"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cpp-selector",children:"cpp-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cpp-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cpp-wasm",children:"cpp-wasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cpp-wasm"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cpp-wasm-selector",children:"cpp-wasm-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cpp-wasm-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cppm",children:"cppm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cppm"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cppm-selector",children:"cppm-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cppm-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cppwasm",children:"cppwasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cppwasm"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cppwasm-selector",children:"cppwasm-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cppwasm-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cs",children:"cs"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cs"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cs-selector",children:"cs-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cs-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cs-wasm",children:"cs-wasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cs-wasm"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cs-wasm-selector",children:"cs-wasm-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cs-wasm-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"csharp",children:"csharp"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"csharp"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"csharp-selector",children:"csharp-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"csharp-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"csharp-wasm",children:"csharp-wasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"csharp-wasm"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"csharp-wasm-selector",children:"csharp-wasm-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"csharp-wasm-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"css",children:"css"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"css"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"css-selector",children:"css-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"css-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"csspreset",children:"cssPreset?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"cssPreset"}),": ",(0,c.jsx)(s.a,{href:"/docs/api/internal/type-aliases/CssPresetId",children:(0,c.jsx)(s.code,{children:"CssPresetId"})})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/external-resources#css-presets",children:"CSS Preset"})," to use."]}),"\n",(0,c.jsx)(s.h4,{id:"customsettings",children:"customSettings?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"customSettings"}),": ",(0,c.jsx)(s.code,{children:"object"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["Defines ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/advanced/custom-settings",children:"custom settings"})," for the current project."]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsadoc",children:"customSettings.adoc"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"adoc"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsappsvelte",children:"customSettings.app.svelte"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"svelte"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsappvue",children:"customSettings.app.vue"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"vue"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsart",children:"customSettings.art"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"art"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsart-template",children:"customSettings.art-template"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"art-template"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsas",children:"customSettings.as"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"as"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsasc",children:"customSettings.asc"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"asc"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsasciidoc",children:"customSettings.asciidoc"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"asciidoc"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsassemblyscript",children:"customSettings.assemblyscript"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"assemblyscript"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsastro",children:"customSettings.astro"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"astro"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsautoprefixer",children:"customSettings.autoprefixer"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"autoprefixer"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsbabel",children:"customSettings.babel"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"babel"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsbb",children:"customSettings.bb"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"bb"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsbbcode",children:"customSettings.bbcode"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"bbcode"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsbinary",children:"customSettings.Binary"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"Binary"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsblockly",children:"customSettings.blockly"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"blockly"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsblocklyxml",children:"customSettings.blockly.xml"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"xml"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsc",children:"customSettings.c"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"c"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsc-1",children:"customSettings.C"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"C"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsc-2",children:"customSettings.c++"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"c++"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscivet",children:"customSettings.civet"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"civet"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsclang",children:"customSettings.clang"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"clang"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsclangcpp",children:"customSettings.clang.cpp"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cpp"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsclio",children:"customSettings.clio"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"clio"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsclj",children:"customSettings.clj"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"clj"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscljc",children:"customSettings.cljc"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cljc"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscljs",children:"customSettings.cljs"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cljs"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsclojure",children:"customSettings.clojure"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"clojure"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsclojurescript",children:"customSettings.clojurescript"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"clojurescript"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscoffee",children:"customSettings.coffee"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"coffee"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscoffeescript",children:"customSettings.coffeescript"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"coffeescript"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscommon-lisp",children:"customSettings.common-lisp"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"common-lisp"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscommonlisp",children:"customSettings.commonlisp"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"commonlisp"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsconvertcommonjs",children:"customSettings.convertCommonjs?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"convertCommonjs"}),": ",(0,c.jsx)(s.code,{children:"boolean"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscp",children:"customSettings.cp"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cp"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscpp",children:"customSettings.cpp"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cpp"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscpp-wasm",children:"customSettings.cpp-wasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cpp-wasm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscppm",children:"customSettings.cppm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cppm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscppwasm",children:"customSettings.cppwasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cppwasm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscs",children:"customSettings.cs"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cs"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscs-wasm",children:"customSettings.cs-wasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cs-wasm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscsharp",children:"customSettings.csharp"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"csharp"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscsharp-wasm",children:"customSettings.csharp-wasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"csharp-wasm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscss",children:"customSettings.css"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"css"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscssmodules",children:"customSettings.cssmodules"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cssmodules"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscssnano",children:"customSettings.cssnano"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cssnano"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscwasm",children:"customSettings.cwasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cwasm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingscxx",children:"customSettings.cxx"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cxx"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsdefaultcdn",children:"customSettings.defaultCDN?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"defaultCDN"}),": ",(0,c.jsx)(s.a,{href:"/docs/api/internal/type-aliases/CDN",children:(0,c.jsx)(s.code,{children:"CDN"})})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsdiagram",children:"customSettings.diagram"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"diagram"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsdiagrams",children:"customSettings.diagrams"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"diagrams"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsdot",children:"customSettings.dot"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"dot"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsedn",children:"customSettings.edn"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"edn"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsejs",children:"customSettings.ejs"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"ejs"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingses",children:"customSettings.es"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"es"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingseta",children:"customSettings.eta"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"eta"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsfennel",children:"customSettings.fennel"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"fennel"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsflow",children:"customSettings.flow"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"flow"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsfnl",children:"customSettings.fnl"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"fnl"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsgleam",children:"customSettings.gleam"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"gleam"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsgo",children:"customSettings.go"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"go"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsgolang",children:"customSettings.golang"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"golang"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsgraph",children:"customSettings.graph"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"graph"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsh",children:"customSettings.h"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"h"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingshaml",children:"customSettings.haml"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"haml"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingshandlebars",children:"customSettings.handlebars"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"handlebars"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingshbs",children:"customSettings.hbs"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"hbs"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingshpp",children:"customSettings.hpp"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"hpp"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingshtm",children:"customSettings.htm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"htm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingshtml",children:"customSettings.html"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"html"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsii",children:"customSettings.ii"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"ii"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsimba",children:"customSettings.imba"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"imba"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsimports",children:"customSettings.imports?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"imports"}),": ",(0,c.jsx)(s.code,{children:"Record"}),"<",(0,c.jsx)(s.code,{children:"string"}),", ",(0,c.jsx)(s.code,{children:"string"}),">"]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsixx",children:"customSettings.ixx"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"ixx"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsjade",children:"customSettings.jade"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"jade"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsjava",children:"customSettings.java"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"java"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsjavascript",children:"customSettings.javascript"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"javascript"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsjinja",children:"customSettings.jinja"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"jinja"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsjl",children:"customSettings.jl"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"jl"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsjs",children:"customSettings.js"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"js"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsjson",children:"customSettings.json"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"json"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsjsx",children:"customSettings.jsx"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"jsx"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsjulia",children:"customSettings.julia"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"julia"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsless",children:"customSettings.less"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"less"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingslightningcss",children:"customSettings.lightningcss"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"lightningcss"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsliquid",children:"customSettings.liquid"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"liquid"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsliquidjs",children:"customSettings.liquidjs"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"liquidjs"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingslisp",children:"customSettings.lisp"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"lisp"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingslivescript",children:"customSettings.livescript"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"livescript"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsls",children:"customSettings.ls"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"ls"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingslua",children:"customSettings.lua"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"lua"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingslua-wasm",children:"customSettings.lua-wasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"lua-wasm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsluawasm",children:"customSettings.luawasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"luawasm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsmalina",children:"customSettings.malina"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"malina"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsmalinajs",children:"customSettings.malinajs"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"malinajs"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsmapimports",children:"customSettings.mapImports?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"mapImports"}),": ",(0,c.jsx)(s.code,{children:"boolean"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsmarkdown",children:"customSettings.markdown"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"markdown"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsmd",children:"customSettings.md"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"md"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsmdown",children:"customSettings.mdown"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"mdown"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsmdx",children:"customSettings.mdx"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"mdx"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsmjml",children:"customSettings.mjml"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"mjml"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsmkdn",children:"customSettings.mkdn"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"mkdn"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsml",children:"customSettings.ml"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"ml"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsmli",children:"customSettings.mli"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"mli"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsmustache",children:"customSettings.mustache"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"mustache"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsnjk",children:"customSettings.njk"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"njk"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsnunjucks",children:"customSettings.nunjucks"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"nunjucks"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsocaml",children:"customSettings.ocaml"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"ocaml"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsperl",children:"customSettings.perl"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"perl"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspg",children:"customSettings.pg"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"pg"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspgsql",children:"customSettings.pg.sql"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"sql"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspglite",children:"customSettings.pglite"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"pglite"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspglitesql",children:"customSettings.pglite.sql"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"sql"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspgsql-1",children:"customSettings.pgsql"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"pgsql"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspgsqlsql",children:"customSettings.pgsql.sql"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"sql"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsphp",children:"customSettings.php"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"php"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsphp-wasm",children:"customSettings.php-wasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"php-wasm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsphpwasm",children:"customSettings.phpwasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"phpwasm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspintora",children:"customSettings.pintora"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"pintora"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspl",children:"customSettings.pl"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"pl"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsplt",children:"customSettings.plt"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"plt"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspm",children:"customSettings.pm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"pm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspostcss",children:"customSettings.postcss"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"postcss"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspostcssimporturl",children:"customSettings.postcssImportUrl"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"postcssImportUrl"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspostcsspresetenv",children:"customSettings.postcssPresetEnv"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"postcssPresetEnv"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspostgresql",children:"customSettings.postgre.sql"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"sql"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspostgres",children:"customSettings.postgres"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"postgres"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspostgresql-1",children:"customSettings.postgresql"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"postgresql"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspostgresqlsql",children:"customSettings.postgresql.sql"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"sql"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsprolog",children:"customSettings.prolog"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"prolog"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsprologpl",children:"customSettings.prolog.pl"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"pl"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspug",children:"customSettings.pug"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"pug"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspurgecss",children:"customSettings.purgecss"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"purgecss"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspy",children:"customSettings.py"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"py"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspy-wasm",children:"customSettings.py-wasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"py-wasm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspy3",children:"customSettings.py3"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"py3"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspyodide",children:"customSettings.pyodide"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"pyodide"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspython",children:"customSettings.python"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"python"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspython-wasm",children:"customSettings.python-wasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"python-wasm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspythonwasm",children:"customSettings.pythonwasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"pythonwasm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingspywasm",children:"customSettings.pywasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"pywasm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsr",children:"customSettings.r"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"r"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsr-wasm",children:"customSettings.r-wasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"r-wasm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsrb",children:"customSettings.rb"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"rb"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsre",children:"customSettings.re"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"re"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsreact",children:"customSettings.react"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"react"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsreact-jsx",children:"customSettings.react-jsx"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"react-jsx"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsreact-native",children:"customSettings.react-native"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"react-native"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsreact-native-tsx",children:"customSettings.react-native-tsx"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"react-native-tsx"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsreact-nativejsx",children:"customSettings.react-native.jsx"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"jsx"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsreact-nativetsx",children:"customSettings.react-native.tsx"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"tsx"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsreact-tsx",children:"customSettings.react-tsx"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"react-tsx"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsreactjsx",children:"customSettings.react.jsx"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"jsx"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsreacttsx",children:"customSettings.react.tsx"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"tsx"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsreason",children:"customSettings.reason"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"reason"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsrei",children:"customSettings.rei"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"rei"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsres",children:"customSettings.res"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"res"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsrescript",children:"customSettings.rescript"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"rescript"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsresi",children:"customSettings.resi"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"resi"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsrich",children:"customSettings.rich"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"rich"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsrichtext",children:"customSettings.richtext"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"richtext"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsriot",children:"customSettings.riot"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"riot"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsriotjs",children:"customSettings.riotjs"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"riotjs"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsrlang",children:"customSettings.rlang"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"rlang"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsrstats",children:"customSettings.rstats"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"rstats"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsrte",children:"customSettings.rte"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"rte"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsrtehtml",children:"customSettings.rte.html"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"html"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsruby",children:"customSettings.ruby"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"ruby"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsruby-wasm",children:"customSettings.ruby-wasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"ruby-wasm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsrubywasm",children:"customSettings.rubywasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"rubywasm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingssass",children:"customSettings.sass"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"sass"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsscheme",children:"customSettings.scheme"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"scheme"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsscm",children:"customSettings.scm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"scm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsscripttype",children:"customSettings.scriptType?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"scriptType"}),": ",(0,c.jsx)(s.code,{children:'""'})," | ",(0,c.jsx)(s.code,{children:'"module"'})," | ",(0,c.jsx)(s.code,{children:'"text/liquid"'})," | ",(0,c.jsx)(s.code,{children:'"text/python"'})," | ",(0,c.jsx)(s.code,{children:'"text/r"'})," | ",(0,c.jsx)(s.code,{children:'"text/ruby-wasm"'})," | ",(0,c.jsx)(s.code,{children:'"text/x-uniter-php"'})," | ",(0,c.jsx)(s.code,{children:'"text/php-wasm"'})," | ",(0,c.jsx)(s.code,{children:'"text/cpp"'})," | ",(0,c.jsx)(s.code,{children:'"text/java"'})," | ",(0,c.jsx)(s.code,{children:'"text/csharp-wasm"'})," | ",(0,c.jsx)(s.code,{children:'"text/perl"'})," | ",(0,c.jsx)(s.code,{children:'"text/julia"'})," | ",(0,c.jsx)(s.code,{children:'"text/biwascheme"'})," | ",(0,c.jsx)(s.code,{children:'"text/commonlisp"'})," | ",(0,c.jsx)(s.code,{children:'"text/tcl"'})," | ",(0,c.jsx)(s.code,{children:'"text/prolog"'})," | ",(0,c.jsx)(s.code,{children:'"application/json"'})," | ",(0,c.jsx)(s.code,{children:'"application/lua"'})," | ",(0,c.jsx)(s.code,{children:'"text/fennel"'})," | ",(0,c.jsx)(s.code,{children:'"application/wasm-uint8"'})," | ",(0,c.jsx)(s.code,{children:'"application/javascript"'})," | ",(0,c.jsx)(s.code,{children:'"application/ecmascript"'})," | ",(0,c.jsx)(s.code,{children:'"text/javascript"'})," | ",(0,c.jsx)(s.code,{children:'"text/ecmascript"'})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsscss",children:"customSettings.scss"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"scss"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingssolid",children:"customSettings.solid"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"solid"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingssolidjsx",children:"customSettings.solid.jsx"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"jsx"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingssolidtsx",children:"customSettings.solid.tsx"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"tsx"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingssql",children:"customSettings.sql"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"sql"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingssqlite",children:"customSettings.sqlite"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"sqlite"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingssqlite3",children:"customSettings.sqlite3"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"sqlite3"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsstencil",children:"customSettings.stencil"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"stencil"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsstenciltsx",children:"customSettings.stencil.tsx"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"tsx"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsstyl",children:"customSettings.styl"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"styl"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsstylis",children:"customSettings.stylis"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"stylis"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsstylus",children:"customSettings.stylus"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"stylus"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingssucrase",children:"customSettings.sucrase"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"sucrase"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingssvelte",children:"customSettings.svelte"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"svelte"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingssvelte-app",children:"customSettings.svelte-app"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"svelte-app"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingstailwindcss",children:"customSettings.tailwindcss"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"tailwindcss"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingstcl",children:"customSettings.tcl"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"tcl"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsteal",children:"customSettings.teal"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"teal"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingstemplate",children:"customSettings.template?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"template"}),": ",(0,c.jsx)(s.code,{children:"object"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingstemplatedata",children:"customSettings.template.data?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"data"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingstemplateprerender",children:"customSettings.template.prerender?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"prerender"}),": ",(0,c.jsx)(s.code,{children:"boolean"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingstl",children:"customSettings.tl"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"tl"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingstokencss",children:"customSettings.tokencss"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"tokencss"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsts",children:"customSettings.ts"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"ts"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingstsx",children:"customSettings.tsx"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"tsx"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingstwig",children:"customSettings.twig"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"twig"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingstypes",children:"customSettings.types?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"types"}),": ",(0,c.jsx)(s.a,{href:"/docs/api/internal/interfaces/Types",children:(0,c.jsx)(s.code,{children:"Types"})})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingstypescript",children:"customSettings.typescript"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"typescript"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsunocss",children:"customSettings.unocss"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"unocss"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsvento",children:"customSettings.vento"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"vento"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsvto",children:"customSettings.vto"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"vto"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsvue",children:"customSettings.vue"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"vue"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsvue-app",children:"customSettings.vue-app"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"vue-app"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsvue2",children:"customSettings.vue2"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"vue2"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsvue3",children:"customSettings.vue3"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"vue3"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingswasm",children:"customSettings.wasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"wasm"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingswasmcpp",children:"customSettings.wasm.cpp"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cpp"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingswasmcs",children:"customSettings.wasm.cs"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cs"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingswasmlua",children:"customSettings.wasm.lua"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"lua"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingswasmphp",children:"customSettings.wasm.php"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"php"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingswasmpy",children:"customSettings.wasm.py"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"py"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingswasmrb",children:"customSettings.wasm.rb"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"rb"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingswast",children:"customSettings.wast"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"wast"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingswat",children:"customSettings.wat"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"wat"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingswebassembly",children:"customSettings.webassembly"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"webassembly"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingswindicss",children:"customSettings.windicss"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"windicss"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsxht",children:"customSettings.xht"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"xht"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"customsettingsxml",children:"customSettings.xml"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"xml"}),": ",(0,c.jsx)(s.code,{children:"any"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cwasm",children:"cwasm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cwasm"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cwasm-selector",children:"cwasm-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cwasm-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cxx",children:"cxx"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cxx"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"cxx-selector",children:"cxx-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"cxx-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"delay",children:"delay?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"delay"}),": ",(0,c.jsx)(s.code,{children:"number"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["Time delay (in milliseconds) following code change,\nafter which the result page is updated (if ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/configuration/configuration-object#autoupdate",children:(0,c.jsx)(s.code,{children:"autoupdate"})})," is ",(0,c.jsx)(s.code,{children:"true"}),")\nand/or the project is saved (if ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/configuration/configuration-object#autosave",children:(0,c.jsx)(s.code,{children:"autosave"})})," is ",(0,c.jsx)(s.code,{children:"true"}),")."]}),"\n",(0,c.jsx)(s.h5,{id:"default-12",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"1500\n"})}),"\n",(0,c.jsx)(s.h4,{id:"description",children:"description?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"description"}),": ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["Project description. Used in ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/projects",children:"project"})," search\nand ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/result",children:"result page"})," description meta tag."]}),"\n",(0,c.jsx)(s.h5,{id:"default-13",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:'""\n'})}),"\n",(0,c.jsx)(s.h4,{id:"diagram",children:"diagram"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"diagram"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"diagram-selector",children:"diagram-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"diagram-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"diagrams",children:"diagrams"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"diagrams"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"diagrams-selector",children:"diagrams-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"diagrams-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"disableai",children:"disableAI?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"disableAI"}),": ",(0,c.jsx)(s.code,{children:"boolean"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"dot",children:"dot"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"dot"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"dot-selector",children:"dot-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"dot-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"editor",children:"editor?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"editor"}),": ",(0,c.jsx)(s.code,{children:'"auto"'})," | ",(0,c.jsx)(s.code,{children:'"monaco"'})," | ",(0,c.jsx)(s.code,{children:'"codemirror"'})," | ",(0,c.jsx)(s.code,{children:'"codejar"'})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["Selects the ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/editor-settings#code-editor",children:"code editor"})," to use."]}),"\n",(0,c.jsxs)(s.p,{children:["If ",(0,c.jsx)(s.code,{children:"undefined"})," (the default), Monaco editor is used on desktop,\nCodeMirror is used on mobile and in ",(0,c.jsx)(s.code,{children:"simple"})," mode,\nwhile CodeJar is used in ",(0,c.jsx)(s.code,{children:"codeblock"})," mode, in ",(0,c.jsx)(s.code,{children:"lite"})," mode and in ",(0,c.jsx)(s.code,{children:"readonly"})," playgrounds."]}),"\n",(0,c.jsxs)(s.p,{children:["If set to ",(0,c.jsx)(s.code,{children:"auto"}),", Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings."]}),"\n",(0,c.jsx)(s.h5,{id:"default-14",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"undefined\n"})}),"\n",(0,c.jsx)(s.h4,{id:"editormode",children:"editorMode?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"editorMode"}),": ",(0,c.jsx)(s.code,{children:'"vim"'})," | ",(0,c.jsx)(s.code,{children:'"emacs"'})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["Sets ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/editor-settings#editor-modes",children:"editor mode"}),"."]}),"\n",(0,c.jsx)(s.h4,{id:"editortheme",children:"editorTheme?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"editorTheme"}),": ",(0,c.jsx)(s.code,{children:"string"})," | ",(0,c.jsx)(s.a,{href:"/docs/api/internal/type-aliases/EditorTheme",children:(0,c.jsx)(s.code,{children:"EditorTheme"})}),"[]"]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["Sets the ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/editor-settings",children:"code editor"})," themes."]}),"\n",(0,c.jsxs)(s.p,{children:["See docs for ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/configuration/configuration-object#editortheme",children:"editor themes"})," for details."]}),"\n",(0,c.jsx)(s.h5,{id:"examples",children:"Examples"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:'"vs"\n'})}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:'"monaco:twilight, codemirror:one-dark"\n'})}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:'["vs@light"]\n'})}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:'["vs@light", "vs-dark@dark"]\n'})}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:'["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]\n'})}),"\n",(0,c.jsx)(s.h4,{id:"edn",children:"edn"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"edn"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"edn-selector",children:"edn-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"edn-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"ejs",children:"ejs"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"ejs"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"ejs-selector",children:"ejs-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"ejs-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"embed",children:"embed?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"embed"}),": ",(0,c.jsx)(s.code,{children:"boolean"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"emmet",children:"emmet?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"emmet"}),": ",(0,c.jsx)(s.code,{children:"boolean"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["Enables ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/editor-settings#emmet",children:"Emmet"}),"."]}),"\n",(0,c.jsx)(s.h5,{id:"default-15",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"true\n"})}),"\n",(0,c.jsx)(s.h4,{id:"enableai",children:"enableAI?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"enableAI"}),": ",(0,c.jsx)(s.code,{children:"boolean"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["If ",(0,c.jsx)(s.code,{children:"true"}),", ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/ai",children:"AI code assistant"})," is enabled."]}),"\n",(0,c.jsx)(s.h5,{id:"default-16",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"false\n"})}),"\n",(0,c.jsx)(s.h4,{id:"es",children:"es"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"es"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"es-selector",children:"es-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"es-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"eta",children:"eta"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"eta"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"eta-selector",children:"eta-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"eta-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"fennel",children:"fennel"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"fennel"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"fennel-selector",children:"fennel-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"fennel-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"files",children:"files?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"files"}),": ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"flow",children:"flow"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"flow"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"flow-selector",children:"flow-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"flow-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"fnl",children:"fnl"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"fnl"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"fnl-selector",children:"fnl-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"fnl-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"foldregions",children:"foldRegions?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"foldRegions"}),": ",(0,c.jsx)(s.code,{children:"boolean"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["When set to ",(0,c.jsx)(s.code,{children:"true"}),", regions marked by ",(0,c.jsx)(s.code,{children:"#region"})," and ",(0,c.jsx)(s.code,{children:"#endregion"})," comments are folded when the project is loaded."]}),"\n",(0,c.jsx)(s.h5,{id:"default-17",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"false\n"})}),"\n",(0,c.jsx)(s.h4,{id:"fontfamily",children:"fontFamily?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"fontFamily"}),": ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["Sets the ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/editor-settings",children:"code editor"})," font family."]}),"\n",(0,c.jsx)(s.h4,{id:"fontsize",children:"fontSize?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"fontSize"}),": ",(0,c.jsx)(s.code,{children:"number"})]}),"\n"]}),"\n",(0,c.jsx)(s.p,{children:"Sets the font size."}),"\n",(0,c.jsxs)(s.p,{children:["If ",(0,c.jsx)(s.code,{children:"undefined"})," (the default), the font size is set to 14 for the full app and 12 for ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/embeds",children:"embeds"}),"."]}),"\n",(0,c.jsx)(s.h5,{id:"default-18",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"undefined\n"})}),"\n",(0,c.jsx)(s.h4,{id:"formatonsave",children:"formatOnsave?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"formatOnsave"}),": ",(0,c.jsx)(s.code,{children:"boolean"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["If ",(0,c.jsx)(s.code,{children:"true"}),", the code is automatically ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/code-format",children:"formatted"})," on saving the project."]}),"\n",(0,c.jsx)(s.h5,{id:"default-19",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"false\n"})}),"\n",(0,c.jsx)(s.h4,{id:"gleam",children:"gleam"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"gleam"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"gleam-selector",children:"gleam-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"gleam-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"go",children:"go"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"go"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"go-selector",children:"go-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"go-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"golang",children:"golang"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"golang"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"golang-selector",children:"golang-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"golang-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"graph",children:"graph"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"graph"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"graph-selector",children:"graph-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"graph-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"h",children:"h"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"h"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"h-selector",children:"h-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"h-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"haml",children:"haml"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"haml"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"haml-selector",children:"haml-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"haml-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"handlebars",children:"handlebars"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"handlebars"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"handlebars-selector",children:"handlebars-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"handlebars-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"hbs",children:"hbs"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"hbs"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"hbs-selector",children:"hbs-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"hbs-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"head",children:"head?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"head"}),": ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["Content added to the ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/result",children:"result page"})," ",(0,c.jsx)(s.code,{children:""})," element."]}),"\n",(0,c.jsx)(s.h5,{id:"default-20",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:'\'\\n\'\n'})}),"\n",(0,c.jsx)(s.h4,{id:"headless-1",children:"headless?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"headless"}),": ",(0,c.jsx)(s.code,{children:"boolean"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["If ",(0,c.jsx)(s.code,{children:"true"}),", the playground is loaded in ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/headless",children:"headless mode"}),"."]}),"\n",(0,c.jsx)(s.h5,{id:"default-21",children:"Default"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:"false\n"})}),"\n",(0,c.jsx)(s.h4,{id:"hpp",children:"hpp"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"hpp"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"hpp-selector",children:"hpp-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"hpp-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"htm",children:"htm"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"htm"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"htm-selector",children:"htm-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"htm-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"html",children:"html"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"html"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"html-selector",children:"html-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"html-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"htmlattrs",children:"htmlAttrs?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"htmlAttrs"}),": ",(0,c.jsx)(s.code,{children:"string"})," | ",(0,c.jsx)(s.code,{children:"Record"}),"<",(0,c.jsx)(s.code,{children:"string"}),", ",(0,c.jsx)(s.code,{children:"string"}),">"]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["Attributes added to the ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/result",children:"result page"})," ",(0,c.jsx)(s.code,{children:""})," element.\nIt can be an object or a string."]}),"\n",(0,c.jsx)(s.h5,{id:"example",children:"Example"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-ts",children:'{ lang: "en", class: "dark" }\n\'lang="en" class="dark"\'\n'})}),"\n",(0,c.jsx)(s.h4,{id:"ii",children:"ii"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"ii"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"ii-selector",children:"ii-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"ii-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"imba",children:"imba"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"imba"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"imba-selector",children:"imba-selector"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.strong,{children:"imba-selector"}),": ",(0,c.jsx)(s.code,{children:"undefined"})," | ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsx)(s.h4,{id:"import-1",children:"import?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"import"}),": ",(0,c.jsx)(s.code,{children:"string"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["A resource to ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/import",children:"import"})," (from any of the supported ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/import#sources",children:"sources"}),")."]}),"\n",(0,c.jsx)(s.h4,{id:"imports",children:"imports?"}),"\n",(0,c.jsxs)(s.blockquote,{children:["\n",(0,c.jsxs)(s.p,{children:[(0,c.jsx)(s.code,{children:"optional"})," ",(0,c.jsx)(s.strong,{children:"imports"}),": ",(0,c.jsx)(s.code,{children:"object"})]}),"\n"]}),"\n",(0,c.jsxs)(s.p,{children:["Allows specifying custom ",(0,c.jsx)(s.a,{href:"https://github.com/WICG/import-maps",children:"import maps"})," for ",(0,c.jsx)(s.a,{href:"https://livecodes.io/docs/features/module-resolution#custom-module-resolution",children:"module imports"}),"."]}),"\n",(0,c.jsx)(s.p,{children:(0,c.jsx)(s.strong,{children:"Example"})}),"\n",(0,c.jsxs)(s.p,{children:["Setting ",(0,c.jsx)(s.code,{children:"imports"})," like this:"]}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-js",children:'"imports": {\n "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"\n}\n'})}),"\n",(0,c.jsx)(s.p,{children:"results in the following import map:"}),"\n",(0,c.jsx)(s.pre,{children:(0,c.jsx)(s.code,{className:"language-html",children:' + + +`,j=` + + +
+ +`.trimStart();return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,o.jsx)(f,{js:m,ts:u,react:p,vue:g,svelte:j})]})}},8294:function(e,t,s){s.d(t,{T:function(){return n},r:function(){return r}});var o=s(7728);async function n(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:o,loading:n="lazy",view:i}=t,a=o||"headless"===i,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)k(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":n);let m=globalThis.process;d.searchParams.set("sdkVersion",m?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(u[e])))});let p=!1,f="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let o="livecodes",r=l.querySelector(`iframe.${o}`),i=r||document.createElement("iframe");i.classList.add(o),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===n?"eager":"lazy"),a?k(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),i.onload=()=>{e(i)},i.src=d.href,r||l.appendChild(i)}),j=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),j.settled=!0)})}),v=()=>p?Promise.reject(f):new Promise(async e=>{j.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},h),await j,e()}),y=(e,t)=>new Promise(async(s,o)=>{if(p)return o(f);await v();let n=L();addEventListener("message",function t(r){if(r.source===g.contentWindow&&r.origin===h&&r.data?.type==="livecodes-api-response"&&r.data?.id===n&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?o(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:n,args:t},h)}),x={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(p)throw Error(f);return b.includes(e)?(y("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},C=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=C(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==h||!t||!x[t])return;let s=e.data?.payload;x[t]?.forEach(e=>{e(s)})});let S=()=>{Object.values(x).forEach(e=>{e.length=0}),g?.remove?.(),p=!0};function k(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let L=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,t)=>y("show",[e,t]),runTests:()=>y("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),o=1;oj.settled?y("destroy").then(S):p?Promise.reject(f):(S(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:n={},config:r={},headless:i,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,o]=t;void 0!==o&&e.searchParams.set(s,String(o))});let m="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),h.set("config","code/"+(0,o.compressToEncodedURIComponent)(JSON.stringify(r))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{h.set("params",(0,o.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(n[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),m&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return i}});var o=s(7294);let n={},r=o.createContext(n);function i(e){let t=o.useContext(r);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/d8cca940.bdc66361.js b/docs/assets/js/d8cca940.bdc66361.js new file mode 100644 index 0000000..82de1b8 --- /dev/null +++ b/docs/assets/js/d8cca940.bdc66361.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8521"],{2092:function(e,n,i){i.r(n),i.d(n,{default:()=>l,frontMatter:()=>a,metadata:()=>t,assets:()=>s,toc:()=>d,contentTitle:()=>c});var t=JSON.parse('{"id":"configuration/index","title":"Configuration","description":"LiveCodes is very flexible and provides a wide range of configuration options.","source":"@site/docs/configuration/index.mdx","sourceDirName":"configuration","slug":"/configuration/","permalink":"/docs/configuration/","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/configuration/index.mdx","tags":[],"version":"current","frontMatter":{"sidebar_class_name":"exclude_from_sidebar"},"sidebar":"docsSidebar","previous":{"title":"Self-Hosting","permalink":"/docs/features/self-hosting"},"next":{"title":"Configuration Object","permalink":"/docs/configuration/configuration-object"}}'),o=i("5893"),r=i("65");let a={sidebar_class_name:"exclude_from_sidebar"},c="Configuration",s={},d=[{value:"Configuration Object",id:"configuration-object",level:3},{value:"Query Parameters",id:"query-parameters",level:3}];function u(e){let n={a:"a",h1:"h1",h3:"h3",header:"header",p:"p",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"configuration",children:"Configuration"})}),"\n",(0,o.jsx)(n.p,{children:"LiveCodes is very flexible and provides a wide range of configuration options."}),"\n",(0,o.jsx)(n.p,{children:"This can generally be achieved by:"}),"\n",(0,o.jsx)(n.h3,{id:"configuration-object",children:(0,o.jsx)(n.a,{href:"/docs/configuration/configuration-object",children:"Configuration Object"})}),"\n",(0,o.jsx)(n.p,{children:"A JavaScript object used for configuration and keeping state."}),"\n",(0,o.jsx)(n.h3,{id:"query-parameters",children:(0,o.jsx)(n.a,{href:"/docs/configuration/query-params",children:"Query Parameters"})}),"\n",(0,o.jsx)(n.p,{children:"A flexible and convenient way to configure the app using URL query parameters"})]})}function l(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}},65:function(e,n,i){i.d(n,{Z:function(){return c},a:function(){return a}});var t=i(7294);let o={},r=t.createContext(o);function a(e){let n=t.useContext(r);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/dbb4adf0.2e9749a1.js b/docs/assets/js/dbb4adf0.2e9749a1.js new file mode 100644 index 0000000..bf7cf7d --- /dev/null +++ b/docs/assets/js/dbb4adf0.2e9749a1.js @@ -0,0 +1,50 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5767"],{2162:function(e,t,o){o.r(t),o.d(t,{default:()=>h,frontMatter:()=>a,metadata:()=>s,assets:()=>c,toc:()=>d,contentTitle:()=>l});var s=JSON.parse('{"id":"features/console","title":"Console","description":"Console messages are shown in the integrated console (in the tools pane, below the result page), without having to open the native browser console.","source":"@site/docs/features/console.mdx","sourceDirName":"features","slug":"/features/console","permalink":"/docs/features/console","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/console.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Tools Pane","permalink":"/docs/features/tools-pane"},"next":{"title":"Compiled Code","permalink":"/docs/features/compiled-code"}}'),n=o("5893"),r=o("65"),i=o("3365");let a={},l="Console",c={},d=[];function u(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",header:"header",p:"p",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"console",children:"Console"})}),"\n","\n",(0,n.jsxs)(t.p,{children:["Console messages are shown in the integrated console (in the ",(0,n.jsx)(t.a,{href:"/docs/features/tools-pane",children:"tools pane"}),", below the result page), without having to open the native browser console."]}),"\n",(0,n.jsxs)(t.p,{children:["Messages can be sent to the console using the standard ",(0,n.jsx)(t.code,{children:"console"})," methods in the code editor (e.g. ",(0,n.jsx)(t.code,{children:"console.log"}),", ",(0,n.jsx)(t.code,{children:"console.warn"}),", ",(0,n.jsx)(t.code,{children:"console.error"}),", ",(0,n.jsx)(t.code,{children:"console.table"}),", ...etc). The console can also be used as REPL (read\u2013eval\u2013print loop) using the integrated console input."]}),"\n",(0,n.jsx)(t.p,{children:"The code is evaluated in the context of the result page (i.e. variables defined in the script editor are accessible for evaluation in the console input). Also code completion works in the console input."}),"\n",(0,n.jsxs)(t.p,{children:["e.g. ",(0,n.jsx)(t.a,{href:"https://livecodes.io/?ts&console=full",children:"https://livecodes.io/?ts&console=full"})," ",(0,n.jsx)("br",{}),"\nsets TypeScript as the active editor and shows the console maximized."]}),"\n",(0,n.jsx)(t.p,{children:"Demo: (console=full)"}),"\n",(0,n.jsx)(i.Z,{params:{console:"full",js:`const x = 5; +console.log('x:', x); +console.log({x, y: 6}); +console.table({x, y: 6}); +console.warn('take care!'); +const z = x * y;`}}),"\n",(0,n.jsx)("p",{children:"\xa0"}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsxs)(t.p,{children:["Setting the querystring ",(0,n.jsx)(t.code,{children:"languages"})," only shows these languages.\nSelecting one language and setting console to ",(0,n.jsx)(t.code,{children:"full"})," gives an environment similar to a REPL."]})}),"\n",(0,n.jsx)(t.p,{children:"Demo: (Python - print to console)"}),"\n",(0,n.jsx)(i.Z,{params:{languages:"py",console:"full",py:"print('hello from python')"}})]})}function h(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},3365:function(e,t,o){o.d(t,{Z:()=>g});var s=o("5893"),n=o("4200"),r=o("7294"),i=o("8294");function a(e){let t=(0,r.useRef)(null),[o,n]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[c,d]=(0,r.useState)(e.height),[u,h]=(0,r.useState)(),[p,f]=(0,r.useState)(JSON.stringify(e.config||"")),[m,g]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:o,style:s,height:r,sdkReady:a,config:c,...y}=e;if(n(o||""),l(s||{}),d(r),u&&m===JSON.stringify(y)){if(p===JSON.stringify(c))return;f(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else g(JSON.stringify(y)),u?.destroy(),(0,i.T)(t.current,{config:c,...y}).then(e=>{h(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{u?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:o,style:a,"data-height":c})}var l=o("1858"),c=o("3262"),d=o("1705"),u=o("7645"),h=o("8168"),p=o("8228"),f=o("5050");function m(e){let[t,o]=(0,r.useState)(e.js),[n,i]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[m,g]=(0,r.useState)(e.vue),[y,v]=(0,r.useState)(e.svelte),w="3.7rem",[b,x]=(0,r.useState)(!0),[j,S]=(0,r.useState)(w),C=(0,r.useRef)(null),P=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},255)};return(0,r.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};o(e(t,"js")),i(e(n,"ts")),l(e(a,"jsx")),g(e(m,"html")),v(e(y,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${f.Z.details} ${p.Z.details}`,"data-collapsed":b,style:{height:b?w:j,overflow:"hidden",willChange:"height",transition:`height ${b?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{x(!b),P()},children:"show code"}),(0,s.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:f.Z.collapsibleContent,children:(0,s.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,s.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:P},children:(0,s.jsx)(d.Z,{language:"js",children:t})}),(0,s.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:P},children:(0,s.jsx)(d.Z,{language:"ts",children:n})}),(0,s.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:P},children:(0,s.jsx)(d.Z,{language:"jsx",children:a})}),(0,s.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:P},children:(0,s.jsx)(d.Z,{language:"html",children:m})}),(0,s.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:P},children:(0,s.jsx)(d.Z,{language:"html",children:y})})]})})})]})}function g(e){let{className:t,style:o,showCode:r,height:i,...c}=e,{colorMode:d}=(0,n.I)(),u=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),f=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (); +} + +`.trimStart(),g=` + + + +`,y=` + + +
+ +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(m,{js:h,ts:p,react:f,vue:g,svelte:y})]})}},8294:function(e,t,o){o.d(t,{T:function(){return n},r:function(){return r}});var s=o(7728);async function n(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:o={},headless:s,loading:n="lazy",view:i}=t,a=s||"headless"===i,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)P(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":n);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof o&&Object.keys(o).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let f=!1,m="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",r=l.querySelector(`iframe.${s}`),i=r||document.createElement("iframe");i.classList.add(s),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===n?"eager":"lazy"),a?P(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:o},u))}),i.onload=()=>{e(i)},i.src=d.href,r||l.appendChild(i)}),y=new Promise(e=>{addEventListener("message",function t(o){o.source===g.contentWindow&&o.origin===u&&o.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>f?Promise.reject(m):new Promise(async e=>{y.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},u),await y,e()}),w=(e,t)=>new Promise(async(o,s)=>{if(f)return s(m);await v();let n=E();addEventListener("message",function t(r){if(r.source===g.contentWindow&&r.origin===u&&r.data?.type==="livecodes-api-response"&&r.data?.id===n&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?s(e.error):o(e)}}),g.contentWindow?.postMessage({method:e,id:n,args:t},u)}),b={},x=["load","ready","code","console","tests","destroy"],j=(e,t)=>{if(f)throw Error(m);return x.includes(e)?(w("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&w("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==u||!t||!b[t])return;let o=e.data?.payload;b[t]?.forEach(e=>{e(o)})});let C=()=>{Object.values(b).forEach(e=>{e.length=0}),g?.remove?.(),f=!0};function P(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>w("run"),format:e=>w("format",[e]),getShareUrl:e=>w("getShareUrl",[e]),getConfig:e=>w("getConfig",[e]),setConfig:e=>w("setConfig",[e]),getCode:()=>w("getCode"),show:(e,t)=>w("show",[e,t]),runTests:()=>w("runTests"),onChange:e=>j("code",e),watch:j,exec:function(e){for(var t=arguments.length,o=Array(t>1?t-1:0),s=1;sy.settled?w("destroy").then(C):f?Promise.reject(m):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:o="https://livecodes.io",params:n={},config:r={},headless:i,import:a,lite:l,view:c,...d}=t;try{e=new URL(o)}catch{throw Error(`${o} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[o,s]=t;void 0!==s&&e.searchParams.set(o,String(s))});let h="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),u.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(r))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{u.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(n[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,o){o.d(t,{Z:function(){return a},a:function(){return i}});var s=o(7294);let n={},r=s.createContext(n);function i(e){let t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/dc92e917.d2c43811.js b/docs/assets/js/dc92e917.d2c43811.js new file mode 100644 index 0000000..50526f8 --- /dev/null +++ b/docs/assets/js/dc92e917.d2c43811.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1758"],{2812:function(e,s,i){i.r(s),i.d(s,{default:()=>h,frontMatter:()=>o,metadata:()=>t,assets:()=>c,toc:()=>a,contentTitle:()=>n});var t=JSON.parse('{"id":"contribution/adding-languages","title":"Adding Languages","description":"Criteria for a new language","source":"@site/docs/contribution/adding-languages.mdx","sourceDirName":"contribution","slug":"/contribution/adding-languages","permalink":"/docs/contribution/adding-languages","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/contribution/adding-languages.mdx","tags":[],"version":"current","frontMatter":{}}'),l=i("5893"),d=i("65");let o={},n="Adding Languages",c={},a=[{value:"Criteria for a new language",id:"criteria-for-a-new-language",level:2},{value:"Checklist when adding",id:"checklist-when-adding",level:2}];function r(e){let s={a:"a",h1:"h1",h2:"h2",header:"header",input:"input",li:"li",p:"p",ul:"ul",...(0,d.a)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(s.header,{children:(0,l.jsx)(s.h1,{id:"adding-languages",children:"Adding Languages"})}),"\n",(0,l.jsx)(s.h2,{id:"criteria-for-a-new-language",children:"Criteria for a new language"}),"\n",(0,l.jsxs)(s.ul,{children:["\n",(0,l.jsx)(s.li,{children:"Has a syntax that needs to be compiled/transpiled to work in browsers (e.g. not a JS library)."}),"\n",(0,l.jsxs)(s.li,{children:["A compiler/runtime that runs ",(0,l.jsx)(s.a,{href:"/docs/why#client-side",children:"client-side"})," in the browser (not on a remote server)."]}),"\n",(0,l.jsx)(s.li,{children:"Its output can be represented in a web page."}),"\n",(0,l.jsx)(s.li,{children:"Relatively popular (e.g. at least hundreds of GitHub stars/thousands of weekly downloads)."}),"\n",(0,l.jsxs)(s.li,{children:["Not ",(0,l.jsx)(s.a,{href:"https://en.wikipedia.org/wiki/Esoteric_programming_language",children:"esoteric"})," (otherwise, ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/discussions",children:"convince me"})," if you have a good use case)."]}),"\n",(0,l.jsx)(s.li,{children:"The compiler/runtime is still reasonably maintained."}),"\n",(0,l.jsx)(s.li,{children:"The compiler/runtime has a permissive license compatible with MIT license."}),"\n"]}),"\n",(0,l.jsxs)(s.p,{children:["If you still have doubts if the language qualifies, ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/discussions",children:"let's discuss it"}),"."]}),"\n",(0,l.jsx)(s.h2,{id:"checklist-when-adding",children:"Checklist when adding"}),"\n",(0,l.jsxs)(s.ul,{className:"contains-task-list",children:["\n",(0,l.jsxs)(s.li,{className:"task-list-item",children:[(0,l.jsx)(s.input,{type:"checkbox",disabled:!0})," ","Add ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/tree/develop/src/livecodes/languages",children:"language specs"})," and include that in the list of ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/develop/src/livecodes/languages/languages.ts",children:"languages"})," or ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/develop/src/livecodes/languages/processors.ts",children:"processors"}),"."]}),"\n",(0,l.jsxs)(s.li,{className:"task-list-item",children:[(0,l.jsx)(s.input,{type:"checkbox",disabled:!0})," ","The compiler +/- formatter should be lazy-loaded."]}),"\n",(0,l.jsxs)(s.li,{className:"task-list-item",children:[(0,l.jsx)(s.input,{type:"checkbox",disabled:!0})," ","If the compiler needs a separate build, add it to the ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/3a2617850f09487b9af92de862093f082942b8a9/scripts/build.js#L207",children:"build script"}),"."]}),"\n",(0,l.jsxs)(s.li,{className:"task-list-item",children:[(0,l.jsx)(s.input,{type:"checkbox",disabled:!0})," ","If the compiler/formatter require installing new packages or adding static files (e.g. wasm) add them to the ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/browser-compilers/",children:"browser compilers repo"})," and load them from ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/3a2617850f09487b9af92de862093f082942b8a9/src/livecodes/vendors.ts#L1",children:"CDN"}),"."]}),"\n",(0,l.jsxs)(s.li,{className:"task-list-item",children:[(0,l.jsx)(s.input,{type:"checkbox",disabled:!0})," ","Any links to CDN hosted assets should be referenced from ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/develop/src/livecodes/vendors.ts",children:"list of vendors"}),"."]}),"\n",(0,l.jsxs)(s.li,{className:"task-list-item",children:[(0,l.jsx)(s.input,{type:"checkbox",disabled:!0})," ","Add language name and aliases to ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/3a2617850f09487b9af92de862093f082942b8a9/src/sdk/models.ts#L129",children:"models"}),"."]}),"\n",(0,l.jsxs)(s.li,{className:"task-list-item",children:[(0,l.jsx)(s.input,{type:"checkbox",disabled:!0})," ","Add editor support (e.g. syntax highlighting) for ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/tree/develop/src/livecodes/editor/monaco",children:"Monaco"}),", ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/tree/develop/src/livecodes/editor/codemirror",children:"CodeMirror"})," and ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/develop/src/livecodes/editor/codejar/codejar.ts",children:"Prismjs"})," (if not auto-loaded)."]}),"\n",(0,l.jsxs)(s.li,{className:"task-list-item",children:[(0,l.jsx)(s.input,{type:"checkbox",disabled:!0})," ","Add ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/develop/src/livecodes/html/language-info.html",children:"language info"}),"."]}),"\n",(0,l.jsxs)(s.li,{className:"task-list-item",children:[(0,l.jsx)(s.input,{type:"checkbox",disabled:!0})," ","Consider adding a ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/tree/develop/src/livecodes/templates/starter",children:"starter template"}),". If you do, add it to the ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/develop/docs/src/components/TemplateList.tsx",children:"list of starter templates"})," in docs, ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/develop/src/livecodes/UI/command-menu-actions.ts#L235",children:"command menu"})," and ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/develop/src/livecodes/html/language-info.html",children:"language info"}),"."]}),"\n",(0,l.jsxs)(s.li,{className:"task-list-item",children:[(0,l.jsx)(s.input,{type:"checkbox",disabled:!0})," ","Add ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/tree/develop/e2e/specs",children:"end-to-ends tests"}),"."]}),"\n",(0,l.jsxs)(s.li,{className:"task-list-item",children:[(0,l.jsx)(s.input,{type:"checkbox",disabled:!0})," ","Add language ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages",children:"documentation"}),"."]}),"\n",(0,l.jsxs)(s.li,{className:"task-list-item",children:[(0,l.jsx)(s.input,{type:"checkbox",disabled:!0})," ","Add language to documentation website ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/develop/docs/src/components/LanguageSliders.tsx",children:"slider"}),"."]}),"\n",(0,l.jsxs)(s.li,{className:"task-list-item",children:[(0,l.jsx)(s.input,{type:"checkbox",disabled:!0})," ","Add compiler/formatter ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/develop/vendor-licenses.mdx",children:"license(s)"}),"."]}),"\n",(0,l.jsxs)(s.li,{className:"task-list-item",children:[(0,l.jsx)(s.input,{type:"checkbox",disabled:!0})," ","Update language count badge in ",(0,l.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/develop/README.mdx",children:"README"}),"."]}),"\n"]})]})}function h(e={}){let{wrapper:s}={...(0,d.a)(),...e.components};return s?(0,l.jsx)(s,{...e,children:(0,l.jsx)(r,{...e})}):r(e)}},65:function(e,s,i){i.d(s,{Z:function(){return n},a:function(){return o}});var t=i(7294);let l={},d=t.createContext(l);function o(e){let s=t.useContext(d);return t.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function n(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:o(e.components),t.createElement(d.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/dcf28466.9d67482d.js b/docs/assets/js/dcf28466.9d67482d.js new file mode 100644 index 0000000..6492173 --- /dev/null +++ b/docs/assets/js/dcf28466.9d67482d.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9079"],{3472:function(e,t,s){s.r(t),s.d(t,{default:()=>h,frontMatter:()=>l,metadata:()=>o,assets:()=>d,toc:()=>c,contentTitle:()=>a});var o=JSON.parse('{"id":"features/default-view","title":"Default View","description":"The playground can be loaded in one of the following views:","source":"@site/docs/features/default-view.mdx","sourceDirName":"features","slug":"/features/default-view","permalink":"/docs/features/default-view","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/default-view.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Display Modes","permalink":"/docs/features/display-modes"},"next":{"title":"Themes","permalink":"/docs/features/themes"}}'),i=s("5893"),n=s("65"),r=s("3365");let l={},a="Default View",d={},c=[{value:"split",id:"split",level:2},{value:"editor",id:"editor",level:2},{value:"result",id:"result",level:2},{value:"Display Mode vs Default View",id:"display-mode-vs-default-view",level:2}];function u(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",...(0,n.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"default-view",children:"Default View"})}),"\n","\n",(0,i.jsx)(t.p,{children:"The playground can be loaded in one of the following views:"}),"\n",(0,i.jsx)(t.h2,{id:"split",children:(0,i.jsx)(t.code,{children:"split"})}),"\n",(0,i.jsx)(t.p,{children:"Both the code editor and the result page are visible. This is the default."}),"\n",(0,i.jsxs)(t.p,{children:["Example: ",(0,i.jsx)(t.a,{href:"https://livecodes.io/?view=split",children:"https://livecodes.io/?view=split"})]}),"\n",(0,i.jsx)(t.p,{children:"Demo:"}),"\n",(0,i.jsx)(r.Z,{config:{view:"split"}}),"\n",(0,i.jsx)(t.h2,{id:"editor",children:(0,i.jsx)(t.code,{children:"editor"})}),"\n",(0,i.jsx)(t.p,{children:'The code editor is visible, while the result page is collapsed. The result page can be shown by dragging the split gutter, or clicking the "Toggle Result" button.'}),"\n",(0,i.jsxs)(t.p,{children:["Example: ",(0,i.jsx)(t.a,{href:"https://livecodes.io/?view=editor",children:"https://livecodes.io/?view=editor"})]}),"\n",(0,i.jsx)(t.p,{children:"Demo:"}),"\n",(0,i.jsx)(r.Z,{config:{view:"editor"}}),"\n",(0,i.jsx)(t.h2,{id:"result",children:(0,i.jsx)(t.code,{children:"result"})}),"\n",(0,i.jsx)(t.p,{children:"The result page is visible, while the code editor is collapsed. The code editor can be shown by dragging the split gutter, or clicking one of the editor tabs."}),"\n",(0,i.jsxs)(t.p,{children:["Example: ",(0,i.jsx)(t.a,{href:"https://livecodes.io/?view=result",children:"https://livecodes.io/?view=result"})]}),"\n",(0,i.jsx)(t.p,{children:"Demo:"}),"\n",(0,i.jsx)(r.Z,{config:{view:"result"}}),"\n",(0,i.jsx)(t.h2,{id:"display-mode-vs-default-view",children:"Display Mode vs Default View"}),"\n",(0,i.jsxs)(t.admonition,{type:"info",children:[(0,i.jsxs)(t.p,{children:['"',(0,i.jsx)(t.a,{href:"/docs/features/display-modes",children:"Display Mode"}),'" is different from "Default View".']}),(0,i.jsxs)(t.p,{children:["In ",(0,i.jsx)(t.code,{children:"editor"})," display mode, only the editor is loaded and the result page is not available. While ",(0,i.jsx)(t.code,{children:"editor"})," default view shows the editor by default, and the result page can be shown by dragging the split gutter."]}),(0,i.jsxs)(t.p,{children:["The same applies for ",(0,i.jsx)(t.code,{children:"result"})," display mode and default view."]})]})]})}function h(e={}){let{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},3365:function(e,t,s){s.d(t,{Z:()=>g});var o=s("5893"),i=s("4200"),n=s("7294"),r=s("8294");function l(e){let t=(0,n.useRef)(null),[s,i]=(0,n.useState)(e.className||""),[l,a]=(0,n.useState)(e.style||{}),[d,c]=(0,n.useState)(e.height),[u,h]=(0,n.useState)(),[p,f]=(0,n.useState)(JSON.stringify(e.config||"")),[m,g]=(0,n.useState)("");return(0,n.useEffect)(()=>{if(!t.current)return;let{className:s,style:o,height:n,sdkReady:l,config:d,...v}=e;if(i(s||""),a(o||{}),c(n),u&&m===JSON.stringify(v)){if(p===JSON.stringify(d))return;f(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{u?.setConfig(e)}):d&&u.setConfig(d)}else g(JSON.stringify(v)),u?.destroy(),(0,r.T)(t.current,{config:d,...v}).then(e=>{h(e),"function"==typeof l&&l(e)})},[e]),(0,n.useEffect)(()=>()=>{u?.destroy()},[]),(0,o.jsx)("div",{ref:t,className:s,style:l,"data-height":d})}var a=s("1858"),d=s("3262"),c=s("1705"),u=s("7645"),h=s("8168"),p=s("8228"),f=s("5050");function m(e){let[t,s]=(0,n.useState)(e.js),[i,r]=(0,n.useState)(e.ts),[l,a]=(0,n.useState)(e.react),[m,g]=(0,n.useState)(e.vue),[v,y]=(0,n.useState)(e.svelte),w="3.7rem",[b,j]=(0,n.useState)(!0),[x,S]=(0,n.useState)(w),E=(0,n.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${w})`)},5),setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${w})`)},255)};return(0,n.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),r(e(i,"ts")),a(e(l,"jsx")),g(e(m,"html")),y(e(v,"html"))}},[]),(0,o.jsxs)("details",{className:`alert alert--info ${f.Z.details} ${p.Z.details}`,"data-collapsed":b,style:{height:b?w:x,overflow:"hidden",willChange:"height",transition:`height ${b?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,o.jsx)("summary",{onClick:()=>{j(!b),C()},children:"show code"}),(0,o.jsx)("div",{ref:E,style:{display:"block",overflow:"hidden"},children:(0,o.jsx)("div",{className:f.Z.collapsibleContent,children:(0,o.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,o.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,o.jsx)(c.Z,{language:"js",children:t})}),(0,o.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,o.jsx)(c.Z,{language:"ts",children:i})}),(0,o.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,o.jsx)(c.Z,{language:"jsx",children:l})}),(0,o.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,o.jsx)(c.Z,{language:"html",children:m})}),(0,o.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,o.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function g(e){let{className:t,style:s,showCode:n,height:r,...d}=e,{colorMode:c}=(0,i.I)(),u=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${u(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(d)}; +createPlayground('#container', options); + +`.trimStart(),f=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(d)}; + return (); +} + +`.trimStart(),g=` + + + +`,v=` + + +
+ +`.trimStart();return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:r||"50vh",...e.style},appUrl:a.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,o.jsx)(m,{js:h,ts:p,react:f,vue:g,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return n}});var o=s(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:o,loading:i="lazy",view:r}=t,l=o||"headless"===r,a=null,d=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)C(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(n(t)),u=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",l?"eager":i);let h=globalThis.process;c.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let f=!1,m="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let o="livecodes",n=a.querySelector(`iframe.${o}`),r=n||document.createElement("iframe");r.classList.add(o),r.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),r.setAttribute("allowtransparency","true"),r.setAttribute("allowpaymentrequest","true"),r.setAttribute("allowfullscreen","true"),r.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),r.setAttribute("loading","eager"===i?"eager":"lazy"),l?C(r):(r.style.height="100%",r.style.minHeight="200px",r.style.width="100%",r.style.margin="0",r.style.border="0",r.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),r.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),r.onload=()=>{e(r)},r.src=c.href,n||a.appendChild(r)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>f?Promise.reject(m):new Promise(async e=>{v.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},u),await v,e()}),w=(e,t)=>new Promise(async(s,o)=>{if(f)return o(m);await y();let i=P();addEventListener("message",function t(n){if(n.source===g.contentWindow&&n.origin===u&&n.data?.type==="livecodes-api-response"&&n.data?.id===i&&n.data.method===e){removeEventListener("message",t);let e=n.data.payload;e?.error?o(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:i,args:t},u)}),b={},j=["load","ready","code","console","tests","destroy"],x=(e,t)=>{if(f)throw Error(m);return j.includes(e)?(w("watch",[e]),b[e]||(b[e]=[]),b[e]?.push(t),{remove:()=>{b[e]=b[e]?.filter(e=>e!==t),b[e]?.length===0&&w("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==u||!t||!b[t])return;let s=e.data?.payload;b[t]?.forEach(e=>{e(s)})});let E=()=>{Object.values(b).forEach(e=>{e.length=0}),g?.remove?.(),f=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>w("run"),format:e=>w("format",[e]),getShareUrl:e=>w("getShareUrl",[e]),getConfig:e=>w("getConfig",[e]),setConfig:e=>w("setConfig",[e]),getCode:()=>w("getCode"),show:(e,t)=>w("show",[e,t]),runTests:()=>w("runTests"),onChange:e=>x("code",e),watch:x,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),o=1;ov.settled?w("destroy").then(E):f?Promise.reject(m):(E(),Promise.resolve())}}function n(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:n={},headless:r,import:l,lite:a,view:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,o]=t;void 0!==o&&e.searchParams.set(s,String(o))});let h="headless"===t.view||r;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof n&&null==n.mode?n.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof n&&null==n.view&&"headless"!==d?n.view=d:e.searchParams.set("view",d)),"string"==typeof n)try{new URL(n),e.searchParams.set("config",encodeURIComponent(n))}catch{throw Error('"config" is not a valid URL or configuration object.')}else n&&"object"==typeof n&&Object.keys(n).length>0&&(n.title&&"Untitled Project"!==n.title&&e.searchParams.set("title",n.title),n.description&&n.description.length>0&&e.searchParams.set("description",n.description),u.set("config","code/"+(0,o.compressToEncodedURIComponent)(JSON.stringify(n))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{u.set("params",(0,o.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return l},a:function(){return r}});var o=s(7294);let i={},n=o.createContext(i);function r(e){let t=o.useContext(n);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/dd7b137e.9043ef53.js b/docs/assets/js/dd7b137e.9043ef53.js new file mode 100644 index 0000000..bd58d75 --- /dev/null +++ b/docs/assets/js/dd7b137e.9043ef53.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5022"],{8410:function(e,c,s){s.r(c),s.d(c,{default:()=>h,frontMatter:()=>i,metadata:()=>d,assets:()=>o,toc:()=>a,contentTitle:()=>r});var d=JSON.parse('{"id":"api/internal/type-aliases/TemplateName","title":"Type Alias: TemplateName","description":"TemplateName: \\"blank\\" \\\\| \\"javascript\\" \\\\| \\"typescript\\" \\\\| \\"react\\" \\\\| \\"react-native\\" \\\\| \\"vue2\\" \\\\| \\"vue\\" \\\\| \\"angular\\" \\\\| \\"preact\\" \\\\| \\"svelte\\" \\\\| \\"solid\\" \\\\| \\"lit\\" \\\\| \\"stencil\\" \\\\| \\"mdx\\" \\\\| \\"astro\\" \\\\| \\"riot\\" \\\\| \\"malina\\" \\\\| \\"jquery\\" \\\\| \\"backbone\\" \\\\| \\"knockout\\" \\\\| \\"jest\\" \\\\| \\"jest-react\\" \\\\| \\"bootstrap\\" \\\\| \\"tailwindcss\\" \\\\| \\"shadcn-ui\\" \\\\| \\"daisyui\\" \\\\| \\"d3\\" \\\\| \\"phaser\\" \\\\| \\"coffeescript\\" \\\\| \\"livescript\\" \\\\| \\"civet\\" \\\\| \\"clio\\" \\\\| \\"imba\\" \\\\| \\"rescript\\" \\\\| \\"reason\\" \\\\| \\"ocaml\\" \\\\| \\"python\\" \\\\| \\"pyodide\\" \\\\| \\"python-wasm\\" \\\\| \\"r\\" \\\\| \\"ruby\\" \\\\| \\"ruby-wasm\\" \\\\| \\"go\\" \\\\| \\"php\\" \\\\| \\"php-wasm\\" \\\\| \\"cpp\\" \\\\| \\"clang\\" \\\\| \\"cpp-wasm\\" \\\\| \\"java\\" \\\\| \\"csharp-wasm\\" \\\\| \\"perl\\" \\\\| \\"lua\\" \\\\| \\"lua-wasm\\" \\\\| \\"teal\\" \\\\| \\"fennel\\" \\\\| \\"julia\\" \\\\| \\"scheme\\" \\\\| \\"commonlisp\\" \\\\| \\"clojurescript\\" \\\\| \\"gleam\\" \\\\| \\"tcl\\" \\\\| \\"markdown\\" \\\\| \\"assemblyscript\\" \\\\| \\"wat\\" \\\\| \\"sql\\" \\\\| \\"postgresql\\" \\\\| \\"prolog\\" \\\\| \\"blockly\\" \\\\| \\"diagrams\\"","source":"@site/docs/api/internal/type-aliases/TemplateName.md","sourceDirName":"api/internal/type-aliases","slug":"/api/internal/type-aliases/TemplateName","permalink":"/docs/api/internal/type-aliases/TemplateName","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/type-aliases/TemplateName.md","tags":[],"version":"current","frontMatter":{}}'),n=s("5893"),l=s("65");let i={},r="Type Alias: TemplateName",o={},a=[{value:"Defined in",id:"defined-in",level:2}];function t(e){let c={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",strong:"strong",...(0,l.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(c.header,{children:(0,n.jsx)(c.h1,{id:"type-alias-templatename",children:"Type Alias: TemplateName"})}),"\n",(0,n.jsxs)(c.blockquote,{children:["\n",(0,n.jsxs)(c.p,{children:[(0,n.jsx)(c.strong,{children:"TemplateName"}),": ",(0,n.jsx)(c.code,{children:'"blank"'})," | ",(0,n.jsx)(c.code,{children:'"javascript"'})," | ",(0,n.jsx)(c.code,{children:'"typescript"'})," | ",(0,n.jsx)(c.code,{children:'"react"'})," | ",(0,n.jsx)(c.code,{children:'"react-native"'})," | ",(0,n.jsx)(c.code,{children:'"vue2"'})," | ",(0,n.jsx)(c.code,{children:'"vue"'})," | ",(0,n.jsx)(c.code,{children:'"angular"'})," | ",(0,n.jsx)(c.code,{children:'"preact"'})," | ",(0,n.jsx)(c.code,{children:'"svelte"'})," | ",(0,n.jsx)(c.code,{children:'"solid"'})," | ",(0,n.jsx)(c.code,{children:'"lit"'})," | ",(0,n.jsx)(c.code,{children:'"stencil"'})," | ",(0,n.jsx)(c.code,{children:'"mdx"'})," | ",(0,n.jsx)(c.code,{children:'"astro"'})," | ",(0,n.jsx)(c.code,{children:'"riot"'})," | ",(0,n.jsx)(c.code,{children:'"malina"'})," | ",(0,n.jsx)(c.code,{children:'"jquery"'})," | ",(0,n.jsx)(c.code,{children:'"backbone"'})," | ",(0,n.jsx)(c.code,{children:'"knockout"'})," | ",(0,n.jsx)(c.code,{children:'"jest"'})," | ",(0,n.jsx)(c.code,{children:'"jest-react"'})," | ",(0,n.jsx)(c.code,{children:'"bootstrap"'})," | ",(0,n.jsx)(c.code,{children:'"tailwindcss"'})," | ",(0,n.jsx)(c.code,{children:'"shadcn-ui"'})," | ",(0,n.jsx)(c.code,{children:'"daisyui"'})," | ",(0,n.jsx)(c.code,{children:'"d3"'})," | ",(0,n.jsx)(c.code,{children:'"phaser"'})," | ",(0,n.jsx)(c.code,{children:'"coffeescript"'})," | ",(0,n.jsx)(c.code,{children:'"livescript"'})," | ",(0,n.jsx)(c.code,{children:'"civet"'})," | ",(0,n.jsx)(c.code,{children:'"clio"'})," | ",(0,n.jsx)(c.code,{children:'"imba"'})," | ",(0,n.jsx)(c.code,{children:'"rescript"'})," | ",(0,n.jsx)(c.code,{children:'"reason"'})," | ",(0,n.jsx)(c.code,{children:'"ocaml"'})," | ",(0,n.jsx)(c.code,{children:'"python"'})," | ",(0,n.jsx)(c.code,{children:'"pyodide"'})," | ",(0,n.jsx)(c.code,{children:'"python-wasm"'})," | ",(0,n.jsx)(c.code,{children:'"r"'})," | ",(0,n.jsx)(c.code,{children:'"ruby"'})," | ",(0,n.jsx)(c.code,{children:'"ruby-wasm"'})," | ",(0,n.jsx)(c.code,{children:'"go"'})," | ",(0,n.jsx)(c.code,{children:'"php"'})," | ",(0,n.jsx)(c.code,{children:'"php-wasm"'})," | ",(0,n.jsx)(c.code,{children:'"cpp"'})," | ",(0,n.jsx)(c.code,{children:'"clang"'})," | ",(0,n.jsx)(c.code,{children:'"cpp-wasm"'})," | ",(0,n.jsx)(c.code,{children:'"java"'})," | ",(0,n.jsx)(c.code,{children:'"csharp-wasm"'})," | ",(0,n.jsx)(c.code,{children:'"perl"'})," | ",(0,n.jsx)(c.code,{children:'"lua"'})," | ",(0,n.jsx)(c.code,{children:'"lua-wasm"'})," | ",(0,n.jsx)(c.code,{children:'"teal"'})," | ",(0,n.jsx)(c.code,{children:'"fennel"'})," | ",(0,n.jsx)(c.code,{children:'"julia"'})," | ",(0,n.jsx)(c.code,{children:'"scheme"'})," | ",(0,n.jsx)(c.code,{children:'"commonlisp"'})," | ",(0,n.jsx)(c.code,{children:'"clojurescript"'})," | ",(0,n.jsx)(c.code,{children:'"gleam"'})," | ",(0,n.jsx)(c.code,{children:'"tcl"'})," | ",(0,n.jsx)(c.code,{children:'"markdown"'})," | ",(0,n.jsx)(c.code,{children:'"assemblyscript"'})," | ",(0,n.jsx)(c.code,{children:'"wat"'})," | ",(0,n.jsx)(c.code,{children:'"sql"'})," | ",(0,n.jsx)(c.code,{children:'"postgresql"'})," | ",(0,n.jsx)(c.code,{children:'"prolog"'})," | ",(0,n.jsx)(c.code,{children:'"blockly"'})," | ",(0,n.jsx)(c.code,{children:'"diagrams"'})]}),"\n"]}),"\n",(0,n.jsx)(c.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,n.jsx)(c.p,{children:(0,n.jsx)(c.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1376",children:"models.ts:1376"})})]})}function h(e={}){let{wrapper:c}={...(0,l.a)(),...e.components};return c?(0,n.jsx)(c,{...e,children:(0,n.jsx)(t,{...e})}):t(e)}},65:function(e,c,s){s.d(c,{Z:function(){return r},a:function(){return i}});var d=s(7294);let n={},l=d.createContext(n);function i(e){let c=d.useContext(l);return d.useMemo(function(){return"function"==typeof e?e(c):{...c,...e}},[c,e])}function r(e){let c;return c=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),d.createElement(l.Provider,{value:c},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/e09614ee.cb6c3761.js b/docs/assets/js/e09614ee.cb6c3761.js new file mode 100644 index 0000000..99a1dc3 --- /dev/null +++ b/docs/assets/js/e09614ee.cb6c3761.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2706"],{8725:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>i,metadata:()=>s,assets:()=>a,toc:()=>c,contentTitle:()=>o});var s=JSON.parse('{"id":"languages/stylis","title":"Stylis","description":"TODO...","source":"@site/docs/languages/stylis.mdx","sourceDirName":"languages","slug":"/languages/stylis","permalink":"/docs/languages/stylis","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/stylis.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Stencil","permalink":"/docs/languages/stencil"},"next":{"title":"Stylus","permalink":"/docs/languages/stylus"}}'),r=n("5893"),l=n("65");let i={},o="Stylis",a={},c=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,l.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"stylis",children:"Stylis"})}),"\n",(0,r.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,l.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},65:function(e,t,n){n.d(t,{Z:function(){return o},a:function(){return i}});var s=n(7294);let r={},l=s.createContext(r);function i(e){let t=s.useContext(l);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(l.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/e1a95b0b.a36b0b88.js b/docs/assets/js/e1a95b0b.a36b0b88.js new file mode 100644 index 0000000..ce61255 --- /dev/null +++ b/docs/assets/js/e1a95b0b.a36b0b88.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7284"],{5116:function(e,n,t){t.r(n),t.d(n,{default:()=>p,frontMatter:()=>r,metadata:()=>a,assets:()=>d,toc:()=>o,contentTitle:()=>c});var a=JSON.parse('{"id":"api/internal/type-aliases/AppLanguage","title":"Type Alias: AppLanguage","description":"AppLanguage: \\"auto\\" \\\\| \\"ar\\" \\\\| \\"de\\" \\\\| \\"en\\" \\\\| \\"es\\" \\\\| \\"fr\\" \\\\| \\"hi\\" \\\\| \\"it\\" \\\\| \\"ja\\" \\\\| \\"pt\\" \\\\| \\"ru\\" \\\\| \\"ur\\" \\\\| \\"zh-CN\\"","source":"@site/docs/api/internal/type-aliases/AppLanguage.md","sourceDirName":"api/internal/type-aliases","slug":"/api/internal/type-aliases/AppLanguage","permalink":"/docs/api/internal/type-aliases/AppLanguage","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/type-aliases/AppLanguage.md","tags":[],"version":"current","frontMatter":{}}'),s=t("5893"),i=t("65");let r={},c="Type Alias: AppLanguage",d={},o=[{value:"Defined in",id:"defined-in",level:2}];function l(e){let n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",strong:"strong",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"type-alias-applanguage",children:"Type Alias: AppLanguage"})}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"AppLanguage"}),": ",(0,s.jsx)(n.code,{children:'"auto"'})," | ",(0,s.jsx)(n.code,{children:'"ar"'})," | ",(0,s.jsx)(n.code,{children:'"de"'})," | ",(0,s.jsx)(n.code,{children:'"en"'})," | ",(0,s.jsx)(n.code,{children:'"es"'})," | ",(0,s.jsx)(n.code,{children:'"fr"'})," | ",(0,s.jsx)(n.code,{children:'"hi"'})," | ",(0,s.jsx)(n.code,{children:'"it"'})," | ",(0,s.jsx)(n.code,{children:'"ja"'})," | ",(0,s.jsx)(n.code,{children:'"pt"'})," | ",(0,s.jsx)(n.code,{children:'"ru"'})," | ",(0,s.jsx)(n.code,{children:'"ur"'})," | ",(0,s.jsx)(n.code,{children:'"zh-CN"'})]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1778",children:"models.ts:1778"})})]})}function p(e={}){let{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},65:function(e,n,t){t.d(n,{Z:function(){return c},a:function(){return r}});var a=t(7294);let s={},i=a.createContext(s);function r(e){let n=a.useContext(i);return a.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),a.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/e1f490b7.d58a5766.js b/docs/assets/js/e1f490b7.d58a5766.js new file mode 100644 index 0000000..7c22fa2 --- /dev/null +++ b/docs/assets/js/e1f490b7.d58a5766.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["4116"],{4552:function(e,n,s){s.r(n),s.d(n,{default:()=>h,frontMatter:()=>d,metadata:()=>t,assets:()=>c,toc:()=>o,contentTitle:()=>l});var t=JSON.parse('{"id":"api/internal/interfaces/TestResult","title":"Interface: TestResult","description":"Properties","source":"@site/docs/api/internal/interfaces/TestResult.md","sourceDirName":"api/internal/interfaces","slug":"/api/internal/interfaces/TestResult","permalink":"/docs/api/internal/interfaces/TestResult","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/interfaces/TestResult.md","tags":[],"version":"current","frontMatter":{}}'),i=s("5893"),r=s("65");let d={},l="Interface: TestResult",c={},o=[{value:"Properties",id:"properties",level:2},{value:"duration",id:"duration",level:3},{value:"Defined in",id:"defined-in",level:4},{value:"errors",id:"errors",level:3},{value:"Defined in",id:"defined-in-1",level:4},{value:"status",id:"status",level:3},{value:"Defined in",id:"defined-in-2",level:4},{value:"testPath",id:"testpath",level:3},{value:"Defined in",id:"defined-in-3",level:4}];function a(e){let n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",hr:"hr",p:"p",strong:"strong",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"interface-testresult",children:"Interface: TestResult"})}),"\n",(0,i.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,i.jsx)(n.h3,{id:"duration",children:"duration"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"duration"}),": ",(0,i.jsx)(n.code,{children:"number"})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1979",children:"models.ts:1979"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"errors",children:"errors"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"errors"}),": ",(0,i.jsx)(n.code,{children:"string"}),"[]"]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-1",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1980",children:"models.ts:1980"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"status",children:"status"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"status"}),": ",(0,i.jsx)(n.code,{children:'"fail"'})," | ",(0,i.jsx)(n.code,{children:'"pass"'})," | ",(0,i.jsx)(n.code,{children:'"skip"'})]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-2",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1981",children:"models.ts:1981"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h3,{id:"testpath",children:"testPath"}),"\n",(0,i.jsxs)(n.blockquote,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"testPath"}),": ",(0,i.jsx)(n.code,{children:"string"}),"[]"]}),"\n"]}),"\n",(0,i.jsx)(n.h4,{id:"defined-in-3",children:"Defined in"}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1982",children:"models.ts:1982"})})]})}function h(e={}){let{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},65:function(e,n,s){s.d(n,{Z:function(){return l},a:function(){return d}});var t=s(7294);let i={},r=t.createContext(i);function d(e){let n=t.useContext(r);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:d(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/e2e2d448.91bc4a30.js b/docs/assets/js/e2e2d448.91bc4a30.js new file mode 100644 index 0000000..a61beaf --- /dev/null +++ b/docs/assets/js/e2e2d448.91bc4a30.js @@ -0,0 +1 @@ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8481"],{3722:function(e,t,r){"use strict";r.r(t),r.d(t,{default:()=>h,frontMatter:()=>a,metadata:()=>s,assets:()=>c,toc:()=>d,contentTitle:()=>l});var s=JSON.parse('{"id":"features/external-resources","title":"External Resources","description":"Stylesheets and Scripts","source":"@site/docs/features/external-resources.mdx","sourceDirName":"features","slug":"/features/external-resources","permalink":"/docs/features/external-resources","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/external-resources.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Result Page","permalink":"/docs/features/result"},"next":{"title":"Tools Pane","permalink":"/docs/features/tools-pane"}}'),n=r("5893"),o=r("65"),i=r("8500");let a={},l="External Resources",c={},d=[{value:"Stylesheets and Scripts",id:"stylesheets-and-scripts",level:2},{value:"Search for NPM Packages",id:"search-for-npm-packages",level:2},{value:"Fonts",id:"fonts",level:2},{value:"CSS Presets",id:"css-presets",level:2},{value:"Related",id:"related",level:2}];function u(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"external-resources",children:"External Resources"})}),"\n",(0,n.jsx)(t.h2,{id:"stylesheets-and-scripts",children:"Stylesheets and Scripts"}),"\n",(0,n.jsx)(t.p,{children:"URLs to external CSS stylesheets and JS scripts can be added to the page from the UI using the Project menu \u2192 External Resources. In addition, there is a button to the External Resources in the toolbar below the editors."}),"\n","\n",(0,n.jsx)(i.Z,{params:{screen:"resources"},linkText:"direct link"}),"\n",(0,n.jsx)(t.p,{children:"URLs to stylesheets/scripts should be added each in a separate line."}),"\n",(0,n.jsxs)(t.p,{children:["Stylesheets and scripts are loaded in the ",(0,n.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," before editor codes. Thus, CSS properties defined in external stylesheets can be overridden in the style editor. Global javascript variables defined in external scripts are available to code in the script editor."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"External Resources",src:r(7111).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)(t.p,{children:"Importing and Exporting code to other services (e.g. Codepen and Github gists) takes into consiedration the external resources."}),"\n",(0,n.jsx)(t.h2,{id:"search-for-npm-packages",children:"Search for NPM Packages"}),"\n",(0,n.jsxs)(t.p,{children:["Package search allows finding NPM Packages and adding URLs to default scripts/stylesheets (hosted by ",(0,n.jsx)(t.a,{href:"https://www.jsdelivr.com/",children:"jsDelivr"}),"). Specific package version can be specified."]}),"\n",(0,n.jsx)(t.p,{children:"Examples for search terms:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{children:"jque\n\njquery\n\njquery@3\n\njquery@3.6\n\njquery@3.6.3\n\n"})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"External Resources Search",src:r(9744).Z+"",width:"2240",height:"1400"})}),"\n",(0,n.jsx)(t.h2,{id:"fonts",children:"Fonts"}),"\n",(0,n.jsxs)(t.p,{children:["Fonts can be added from ",(0,n.jsx)(t.a,{href:"https://fonts.google.com/",children:"Google fonts"}),"."]}),"\n",(0,n.jsx)(t.h2,{id:"css-presets",children:"CSS Presets"}),"\n",(0,n.jsxs)(t.p,{children:["CSS presets currently include ",(0,n.jsx)(t.a,{href:"https://necolas.github.io/normalize.css/",children:"Normalize.css"})," and ",(0,n.jsx)(t.a,{href:"https://meyerweb.com/eric/tools/css/reset/",children:"Reset CSS"}),"."]}),"\n",(0,n.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"/docs/features/module-resolution",children:"Module resolution"})}),"\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"/docs/features/assets",children:"Assets"})}),"\n"]})]})}function h(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},9744:function(e,t,r){"use strict";r.d(t,{Z:function(){return s}});let s=r.p+"assets/images/resources-search-682ed2f25e65a5b5688ca2e1a36bb55e.jpg"},7111:function(e,t,r){"use strict";r.d(t,{Z:function(){return s}});let s=r.p+"assets/images/resources-5c3f57e775f433671928dd9025a1e8e1.jpg"},7728:function(e,t,r){e=r.nmd(e);var s=function(){var e=String.fromCharCode,t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",s={};function n(e,t){if(!s[e]){s[e]={};for(var r=0;r>>8,r[2*s+1]=i%256}return r},decompressFromUint8Array:function(t){if(null==t)return o.decompress(t);for(var r=Array(t.length/2),s=0,n=r.length;sd.charCodeAt(0)){for(s=0;s>=1}else{for(s=0,n=1;s>=1}0==--u&&(u=Math.pow(2,p),p++),delete a[d]}else for(s=0,n=i[d];s>=1;0==--u&&(u=Math.pow(2,p),p++),i[c]=h++,d=String(l)}if(""!==d){if(Object.prototype.hasOwnProperty.call(a,d)){if(256>d.charCodeAt(0)){for(s=0;s>=1}else{for(s=0,n=1;s>=1}0==--u&&(u=Math.pow(2,p),p++),delete a[d]}else for(s=0,n=i[d];s>=1;0==--u&&(u=Math.pow(2,p),p++)}for(s=0,n=2;s>=1;for(;;){if(m<<=1,g==t-1){f.push(r(m));break}g++}return f.join("")},decompress:function(e){return null==e?"":""==e?null:o._decompress(e.length,32768,function(t){return e.charCodeAt(t)})},_decompress:function(t,r,s){var n,o,i,a,l,c,d,u=[],h=4,p=4,f=3,m="",g=[],v={val:s(0),position:r,index:1};for(n=0;n<3;n+=1)u[n]=n;for(i=0,l=4,c=1;c!=l;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=s(v.index++)),i|=(a>0?1:0)*c,c<<=1;switch(i){case 0:for(i=0,l=256,c=1;c!=l;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=s(v.index++)),i|=(a>0?1:0)*c,c<<=1;d=e(i);break;case 1:for(i=0,l=65536,c=1;c!=l;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=s(v.index++)),i|=(a>0?1:0)*c,c<<=1;d=e(i);break;case 2:return""}for(u[3]=d,o=d,g.push(d);;){if(v.index>t)return"";for(i=0,l=Math.pow(2,f),c=1;c!=l;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=s(v.index++)),i|=(a>0?1:0)*c,c<<=1;switch(d=i){case 0:for(i=0,l=256,c=1;c!=l;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=s(v.index++)),i|=(a>0?1:0)*c,c<<=1;u[p++]=e(i),d=p-1,h--;break;case 1:for(i=0,l=65536,c=1;c!=l;)a=v.val&v.position,v.position>>=1,0==v.position&&(v.position=r,v.val=s(v.index++)),i|=(a>0?1:0)*c,c<<=1;u[p++]=e(i),d=p-1,h--;break;case 2:return g.join("")}if(0==h&&(h=Math.pow(2,f),f++),u[d])m=u[d];else{if(d!==p)return null;m=o+o.charAt(0)}g.push(m),u[p++]=o+m.charAt(0),h--,o=m,0==h&&(h=Math.pow(2,f),f++)}}};return o}();"function"==typeof define&&define.amd?define(function(){return s}):null!=e&&(e.exports=s)},8500:function(e,t,r){"use strict";r.d(t,{Z:()=>c});var s=r("5893");r("7294");var n=r("6735");function o(e){let{children:t,fallback:r}=e;return(0,n.Z)()?(0,s.jsx)(s.Fragment,{children:t?.()}):r??null}var i=r("1705"),a=r("8294"),l=r("1858");function c(e){let{params:t,config:r,code:n,language:c="js",codeTitle:d="",showLineNumbers:u=!1,formatCode:h=!0,linkText:p="Run in LiveCodes",style:f={},className:m=""}=e,g=(0,a.r)({appUrl:l.G,params:t,config:r});return(0,s.jsxs)("div",{style:{marginBottom:"30px",...f},className:m,children:[n&&(0,s.jsx)(o,{children:()=>(0,s.jsx)(i.Z,{language:c,title:d,showLineNumbers:u,children:h?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(n,c):n})}),(0,s.jsxs)("a",{href:g,target:"_blank",rel:"noreferrer",children:[p,(0,s.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,s.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,r){"use strict";r.d(t,{T:function(){return n},r:function(){return o}});var s=r(7728);async function n(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:r={},headless:s,loading:n="lazy",view:i}=t,a=s||"headless"===i,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)P(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(o(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":n);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof r&&Object.keys(r).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let f=!1,m="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",o=l.querySelector(`iframe.${s}`),i=o||document.createElement("iframe");i.classList.add(s),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===n?"eager":"lazy"),a?P(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:r},u))}),i.onload=()=>{e(i)},i.src=d.href,o||l.appendChild(i)}),v=new Promise(e=>{addEventListener("message",function t(r){r.source===g.contentWindow&&r.origin===u&&r.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>f?Promise.reject(m):new Promise(async e=>{v.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},u),await v,e()}),x=(e,t)=>new Promise(async(r,s)=>{if(f)return s(m);await y();let n=E();addEventListener("message",function t(o){if(o.source===g.contentWindow&&o.origin===u&&o.data?.type==="livecodes-api-response"&&o.data?.id===n&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?s(e.error):r(e)}}),g.contentWindow?.postMessage({method:e,id:n,args:t},u)}),w={},b=["load","ready","code","console","tests","destroy"],j=(e,t)=>{if(f)throw Error(m);return b.includes(e)?(x("watch",[e]),w[e]||(w[e]=[]),w[e]?.push(t),{remove:()=>{w[e]=w[e]?.filter(e=>e!==t),w[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},C=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=C(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==u||!t||!w[t])return;let r=e.data?.payload;w[t]?.forEach(e=>{e(r)})});let S=()=>{Object.values(w).forEach(e=>{e.length=0}),g?.remove?.(),f=!0};function P(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>j("code",e),watch:j,exec:function(e){for(var t=arguments.length,r=Array(t>1?t-1:0),s=1;sv.settled?x("destroy").then(S):f?Promise.reject(m):(S(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:r="https://livecodes.io",params:n={},config:o={},headless:i,import:a,lite:l,view:c,...d}=t;try{e=new URL(r)}catch{throw Error(`${r} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[r,s]=t;void 0!==s&&e.searchParams.set(r,String(s))});let h="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==c?o.view=c:e.searchParams.set("view",c)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),u.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(o))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{u.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(n[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,r){"use strict";r.d(t,{Z:function(){return a},a:function(){return i}});var s=r(7294);let n={},o=s.createContext(n);function i(e){let t=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/e4d89e4c.f62fcc91.js b/docs/assets/js/e4d89e4c.f62fcc91.js new file mode 100644 index 0000000..beb4462 --- /dev/null +++ b/docs/assets/js/e4d89e4c.f62fcc91.js @@ -0,0 +1,108 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9716"],{4441:function(e,t,s){s.r(t),s.d(t,{basicJsxDemo:()=>h,importsDemo:()=>g,stylesDemo:()=>x,preactDemo:()=>b,frontMatter:()=>l,styledComponentsDemo:()=>v,metadata:()=>n,exportsDemo:()=>f,assets:()=>c,cssModulesDemo:()=>j,rootDemo:()=>p,contentTitle:()=>d,disableAutoRenderDemo:()=>m,toc:()=>w,default:()=>C,reactDomDemo:()=>u,tailwindcssDemo:()=>y});var n=JSON.parse('{"id":"languages/jsx","title":"JSX","description":"JSX is a syntax extension for JavaScript that allows writing HTML-like markup inside JavaScript.","source":"@site/docs/languages/jsx.mdx","sourceDirName":"languages","slug":"/languages/jsx","permalink":"/docs/languages/jsx","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/jsx.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Jinja","permalink":"/docs/languages/jinja"},"next":{"title":"Julia","permalink":"/docs/languages/julia"}}'),r=s("5893"),o=s("65"),i=s("3365"),a=s("8500");let l={},d="JSX",c={},h={jsx:`export default function App() { + return

Hello World!

; +}`},u={jsx:`import { createRoot } from "react-dom/client"; + +function App() { + return

Hello World!

; +} + +const root = createRoot(document.querySelector("#root")); +root.render();`,html:'
'},p={html:'
Loading...
',jsx:`export default function App() { + return

Hello World!

; +}`},m={markup:{language:"html",content:`JSX auto-rendering is disabled. Set from Project menu \u{2192} Custom Settings.`},script:{language:"jsx",content:`export default function App() { + return

Hello World!

; +}`},customSettings:{jsx:{disableAutoRender:!0}}},g={jsx:`import { useState, useEffect } from "react"; +import confetti from "canvas-confetti"; +import "bootstrap/dist/css/bootstrap.css"; + +export default function App() { + const [count, setCount] = useState(0); + + useEffect(() => { + if (count > 0) { + confetti(); + } + }, [count]); + + return ( +
+

You clicked {count} times.

+ +
+ ); +} +`},f={mdx:`import Greeting from "./script"; + + +`,jsx:`export default function(props) { + return

Greeting from {props.name}!

; +} +`},x={jsx:`import "bootstrap/dist/css/bootstrap.css"; + +export default () =>

Hello World!

; +`},j={activeEditor:"script",style:{language:"css",content:`.title { + color: green; + font-family: sans-serif; +} +`},script:{language:"jsx",content:`import classes from './style.module.css'; + +export default function() { + return

Hello, CSS Modules!

; +} +`},processors:["cssmodules"]},y={activeEditor:"script",style:{language:"css",content:`@tailwind base; +@tailwind components; +@tailwind utilities; +`},script:{language:"jsx",content:`export default function() { + return

Hello, Tailwind CSS!

; +} +`},processors:["tailwindcss"]},v={jsx:"import styled from 'styled-components';\n\nconst Title = styled.h1`\n text-align: center;\n font-family: sans-serif;\n color: palevioletred;\n`;\n\nexport default function () {\n return Hello, styled-components!;\n}\n"},b={jsx:`/** @jsx h */ +import { h, render } from 'preact'; + +const App = (props) =>

Hello, {props.name}

; + +render(, document.body); +`},w=[{value:"Usage",id:"usage",level:2},{value:"Auto-rendering",id:"auto-rendering",level:3},{value:"Root Element",id:"root-element",level:4},{value:"Disabling Auto-rendering",id:"disabling-auto-rendering",level:4},{value:"Importing Modules",id:"importing-modules",level:3},{value:"Types for Imported Modules",id:"types-for-imported-modules",level:4},{value:"Exports",id:"exports",level:3},{value:"Styles",id:"styles",level:3},{value:"Style Editor",id:"style-editor",level:4},{value:"Importing Stylesheets",id:"importing-stylesheets",level:4},{value:"CSS Modules",id:"css-modules",level:4},{value:"CSS Frameworks",id:"css-frameworks",level:4},{value:"CSS-in-JS",id:"css-in-js",level:4},{value:"Custom JSX Runtimes",id:"custom-jsx-runtimes",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Links",id:"links",level:2}];function S(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"jsx",children:"JSX"})}),"\n","\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://react.dev/learn/writing-markup-with-jsx",children:"JSX"})," is a syntax extension for JavaScript that allows writing HTML-like markup inside JavaScript.\nIt has been popularized by ",(0,r.jsx)(t.a,{href:"https://react.dev/",children:"React"}),", and then adopted by many other libraries/frameworks."]}),"\n",(0,r.jsxs)(t.p,{children:["By default, when running JSX in LiveCodes, ",(0,r.jsx)(t.a,{href:"https://react.dev/",children:"React"})," runtime is used.\nHowever, other libraries like ",(0,r.jsx)(t.a,{href:"https://preactjs.com/",children:"Preact"}),", ",(0,r.jsx)(t.a,{href:"https://nanojsx.io/",children:"nano JSX"})," and others can be used as well (see ",(0,r.jsx)(t.a,{href:"#custom-jsx-runtimes",children:"Custom JSX Runtimes"}),")."]}),"\n",(0,r.jsxs)(t.p,{children:["TSX is also supported in LiveCodes and is ",(0,r.jsx)(t.a,{href:"/docs/languages/tsx",children:"documented here"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Please note that ",(0,r.jsx)(t.a,{href:"https://react.dev/learn/react-compiler",children:"React compiler"})," is also available in LiveCodes and is ",(0,r.jsx)(t.a,{href:"/docs/languages/react",children:"documented here"}),"."]}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(t.p,{children:["The easiest way is to ",(0,r.jsx)(t.a,{href:"#auto-rendering",children:"auto-render"})," a component by exporting it as the ",(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#using_the_default_export",children:"default export"}),":"]}),"\n","\n",(0,r.jsx)(a.Z,{params:h,code:h.jsx,language:"jsx",formatCode:!1}),"\n",(0,r.jsxs)(t.p,{children:["You may, however, be more explicit and render the component yourself using ",(0,r.jsx)(t.a,{href:"https://react.dev/reference/react-dom/client",children:"React DOM"}),":"]}),"\n","\n",(0,r.jsx)(a.Z,{params:u,code:u.jsx,language:"jsx",formatCode:!1}),"\n",(0,r.jsxs)(t.admonition,{title:"note",type:"info",children:[(0,r.jsxs)(t.p,{children:["React's ",(0,r.jsx)(t.a,{href:"https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html",children:"new JSX transform"})," is utilized. So there is no need to import React."]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-jsx",children:"// this is not needed:\n// import React from 'react';\n\nexport default function App() {\n return

Hello World!

;\n}\n"})})]}),"\n",(0,r.jsx)(t.h3,{id:"auto-rendering",children:"Auto-rendering"}),"\n",(0,r.jsx)(t.p,{children:"A component is rendered automatically as a React component (without having to manually use React Dom to render it) if the following conditions are met:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:"The component is exported as the default export."}),"\n",(0,r.jsxs)(t.li,{children:["No custom JSX runtime is used (see ",(0,r.jsx)(t.a,{href:"#custom-jsx-runtimes",children:"Custom JSX Runtimes"}),")."]}),"\n",(0,r.jsxs)(t.li,{children:["No ",(0,r.jsxs)(t.a,{href:"#exports",children:["imports from ",(0,r.jsx)(t.code,{children:'"./script"'})]})," in markup editor."]}),"\n",(0,r.jsxs)(t.li,{children:["Auto-rendering is not ",(0,r.jsx)(t.a,{href:"#disabling-auto-rendering",children:"disabled"}),"."]}),"\n"]}),"\n",(0,r.jsx)(t.h4,{id:"root-element",children:"Root Element"}),"\n",(0,r.jsxs)(t.p,{children:["To render the React components to a specific ",(0,r.jsx)(t.a,{href:"https://react.dev/reference/react-dom/client/createRoot",children:"root"})," DOM element use ",(0,r.jsx)(t.code,{children:'"livecodes-app"'})," as the element ",(0,r.jsx)(t.code,{children:"id"}),". Otherwise, if that element is not found, a new ",(0,r.jsx)(t.code,{children:"div"})," element is added to ",(0,r.jsx)(t.code,{children:"document.body"})," and is used as the root."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n","\n",(0,r.jsx)(a.Z,{params:p,code:p.html,language:"html",formatCode:!1}),"\n",(0,r.jsx)(t.h4,{id:"disabling-auto-rendering",children:"Disabling Auto-rendering"}),"\n",(0,r.jsxs)(t.p,{children:["To disable auto-rendering, set the ",(0,r.jsx)(t.a,{href:"#custom-settings",children:"custom settings"})," ",(0,r.jsx)(t.code,{children:"disableAutoRender"})," property to ",(0,r.jsx)(t.code,{children:"true"}),"."]}),"\n","\n",(0,r.jsx)(a.Z,{config:m,code:JSON.stringify(m.customSettings,null,2),language:"json",codeTitle:"Custom Settings",formatCode:!1}),"\n",(0,r.jsx)(t.h3,{id:"importing-modules",children:"Importing Modules"}),"\n",(0,r.jsxs)(t.p,{children:["npm modules can be imported as described in the section about ",(0,r.jsx)(t.a,{href:"/docs/features/module-resolution",children:"module resolution"}),", including bare module imports and importing from different CDNs. Stylesheet imports are added as ",(0,r.jsx)(t.code,{children:''})," tags in the page ",(0,r.jsx)(t.code,{children:"head"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n","\n",(0,r.jsx)(a.Z,{params:g,code:g.jsx,language:"jsx",formatCode:!1}),"\n",(0,r.jsxs)(t.p,{children:["Module imports can be customized using import maps as described in ",(0,r.jsx)(t.a,{href:"/docs/features/module-resolution#custom-module-resolution",children:"module resolution"})," documentations."]}),"\n",(0,r.jsx)(t.h4,{id:"types-for-imported-modules",children:"Types for Imported Modules"}),"\n",(0,r.jsxs)(t.p,{children:["Types for imported modules are loaded automatically (if available) to provide ",(0,r.jsx)(t.a,{href:"/docs/features/intellisense",children:"Intellisense"}),", auto-completion and type information."]}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"LiveCodes Intellisense",src:s(9203).Z+"",width:"1128",height:"754"})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{alt:"LiveCodes Intellisense",src:s(313).Z+"",width:"1126",height:"713"})}),"\n",(0,r.jsxs)(t.p,{children:["Moreover, you can provide custom type definitions for modules that do not have types available on npm. See ",(0,r.jsx)(t.a,{href:"/docs/features/intellisense#custom-types",children:"Custom Types"})," for details."]}),"\n",(0,r.jsx)(t.h3,{id:"exports",children:"Exports"}),"\n",(0,r.jsxs)(t.p,{children:["Values exported from script editor (default or named) can be imported in the markup editor by importing from ",(0,r.jsx)(t.code,{children:'"./script"'})," (with no extension)."]}),"\n",(0,r.jsxs)(t.p,{children:["This can be useful, for example, when using ",(0,r.jsx)(t.a,{href:"/docs/languages/mdx",children:"MDX"})," to import components exported form JSX."]}),"\n",(0,r.jsx)(t.p,{children:"Demo:"}),"\n","\n",(0,r.jsx)(i.Z,{params:f}),"\n",(0,r.jsx)(t.admonition,{title:"note",type:"info",children:(0,r.jsxs)(t.p,{children:["When values are imported from ",(0,r.jsx)(t.code,{children:'"./script"'}),", ",(0,r.jsx)(t.a,{href:"#auto-rendering",children:"auto-rendering"})," is disabled, because it is assumed that you want to take control over component rendering."]})}),"\n",(0,r.jsx)(t.h3,{id:"styles",children:"Styles"}),"\n",(0,r.jsx)(t.p,{children:"CSS can be applied to the component using various ways:"}),"\n",(0,r.jsx)(t.h4,{id:"style-editor",children:"Style Editor"}),"\n",(0,r.jsxs)(t.p,{children:["Styles added in the style editor is applied globally to the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),". This can use different ",(0,r.jsx)(t.strong,{children:"languages/processors"})," supported in LiveCodes including CSS, SCSS, Less, Stylus, ..etc. See ",(0,r.jsx)(t.a,{href:"/docs/features/css",children:"style documentation"})," for more details."]}),"\n",(0,r.jsx)(t.p,{children:"And of course, styles and stylesheets added in markup editor are also applied globally."}),"\n",(0,r.jsx)(t.h4,{id:"importing-stylesheets",children:"Importing Stylesheets"}),"\n",(0,r.jsxs)(t.p,{children:["Stylesheets imported in script editor are added as ",(0,r.jsx)(t.code,{children:''})," tags in the page ",(0,r.jsx)(t.code,{children:"head"}),".\nThe stylesheet URL can be an absolute URL or a path in the npm package. The URL has to end with ",(0,r.jsx)(t.code,{children:'".css"'}),"."]}),"\n",(0,r.jsx)(t.p,{children:"example:"}),"\n","\n",(0,r.jsx)(a.Z,{params:x,code:x.jsx,language:"jsx",formatCode:!1}),"\n",(0,r.jsx)(t.h4,{id:"css-modules",children:"CSS Modules"}),"\n",(0,r.jsxs)(t.p,{children:["CSS modules are supported and are ",(0,r.jsx)(t.a,{href:"/docs/languages/cssmodules",children:"documented separately"}),". Make sure to enable CSS modules (from style editor menu or in ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#processors",children:(0,r.jsx)(t.code,{children:"processors"})})," property of ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configuration object"}),")."]}),"\n",(0,r.jsx)(t.p,{children:"Demo:"}),"\n","\n",(0,r.jsx)(i.Z,{config:j}),"\n",(0,r.jsx)(t.h4,{id:"css-frameworks",children:"CSS Frameworks"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"/docs/features/css#css-processors",children:"CSS Frameworks"})," supported in LiveCodes (e.g. ",(0,r.jsx)(t.a,{href:"/docs/languages/tailwindcss",children:"Tailwind CSS"}),", ",(0,r.jsx)(t.a,{href:"/docs/languages/unocss",children:"UnoCSS"}),", ",(0,r.jsx)(t.a,{href:"/docs/languages/windicss",children:"WindiCSS"}),") can detect class names added in JSX. Make sure that the required utility is enabled (from style editor menu or in ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object#processors",children:(0,r.jsx)(t.code,{children:"processors"})})," property of ",(0,r.jsx)(t.a,{href:"/docs/configuration/configuration-object",children:"configuration object"}),") and that required ",(0,r.jsx)(t.a,{href:"https://tailwindcss.com/docs/functions-and-directives#tailwind",children:"directives"})," are added to the style editor."]}),"\n",(0,r.jsx)(t.p,{children:"Demo:"}),"\n","\n",(0,r.jsx)(i.Z,{config:y}),"\n",(0,r.jsx)(t.h4,{id:"css-in-js",children:"CSS-in-JS"}),"\n",(0,r.jsx)(t.p,{children:"CSS-in-JS libraries can be imported and used as usual."}),"\n",(0,r.jsx)(t.p,{children:"Demo:"}),"\n","\n",(0,r.jsx)(i.Z,{params:v}),"\n",(0,r.jsx)(t.h3,{id:"custom-jsx-runtimes",children:"Custom JSX Runtimes"}),"\n",(0,r.jsxs)(t.p,{children:["LiveCodes allows using other libraries (like ",(0,r.jsx)(t.a,{href:"https://preactjs.com/",children:"Preact"})," and ",(0,r.jsx)(t.a,{href:"https://nanojsx.io/",children:"nano JSX"}),") as the JSX runtime."]}),"\n",(0,r.jsxs)(t.p,{children:["JSX is compiled to JavaScript using the TypeScript compiler, which allows multiple configuration options for JSX, including ",(0,r.jsx)(t.a,{href:"https://www.typescriptlang.org/tsconfig#jsx",children:(0,r.jsx)(t.code,{children:"jsx"})}),", ",(0,r.jsx)(t.a,{href:"https://www.typescriptlang.org/tsconfig#jsxFactory",children:(0,r.jsx)(t.code,{children:"jsxFactory"})}),", ",(0,r.jsx)(t.a,{href:"https://www.typescriptlang.org/tsconfig#jsxFragmentFactory",children:(0,r.jsx)(t.code,{children:"jsxFragmentFactory"})})," and ",(0,r.jsx)(t.a,{href:"https://www.typescriptlang.org/tsconfig#jsxImportSource",children:(0,r.jsx)(t.code,{children:"jsxImportSource"})}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["These can be configured using in-code pragmas or in ",(0,r.jsx)(t.a,{href:"#custom-settings",children:"custom settings"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"Example for using Preact:"}),"\n","\n",(0,r.jsx)(a.Z,{params:b,code:"//highlight-next-line\n"+b.jsx,language:"jsx",formatCode:!1,showLineNumbers:!0}),"\n",(0,r.jsx)(t.admonition,{title:"note",type:"info",children:(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"#auto-rendering",children:"Auto-rendering"})," is disabled for custom JSX runtimes."]})}),"\n",(0,r.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"jsx"})}),"\n",(0,r.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:".jsx"})}),"\n",(0,r.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"script"})}),"\n",(0,r.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"/docs/languages/typescript",children:"TypeScript compiler"})}),"\n",(0,r.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsxs)(t.p,{children:["Using ",(0,r.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,r.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,r.jsx)(t.code,{children:"jsx"})," are passed to the TypeScript compiler as ",(0,r.jsx)(t.a,{href:"https://www.typescriptlang.org/tsconfig#compilerOptions",children:"compiler options"})," while compiling JSX.\nIn addition, the option ",(0,r.jsx)(t.code,{children:"disableAutoRender"})," can be set to ",(0,r.jsx)(t.code,{children:"true"})," to disable ",(0,r.jsx)(t.a,{href:"#auto-rendering",children:"auto-rendering"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Example:"})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "jsx": {\n "disableAutoRender": true,\n "jsxFactory": "h",\n "jsxFragmentFactory": "Fragment"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://react.dev/",children:"React"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://react.dev/learn/writing-markup-with-jsx",children:"JSX"})}),"\n"]})]})}function C(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(S,{...e})}):S(e)}},9203:function(e,t,s){s.d(t,{Z:function(){return n}});let n=s.p+"assets/images/intellisense-1-bbc692078d1b88aaf8d2be72beb49849.jpg"},313:function(e,t,s){s.d(t,{Z:function(){return n}});let n=s.p+"assets/images/intellisense-2-ffdab70d10948aa165e3332a58d37827.jpg"},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),r=s("4200"),o=s("7294"),i=s("8294");function a(e){let t=(0,o.useRef)(null),[s,r]=(0,o.useState)(e.className||""),[a,l]=(0,o.useState)(e.style||{}),[d,c]=(0,o.useState)(e.height),[h,u]=(0,o.useState)(),[p,m]=(0,o.useState)(JSON.stringify(e.config||"")),[g,f]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:o,sdkReady:a,config:d,...x}=e;if(r(s||""),l(n||{}),c(o),h&&g===JSON.stringify(x)){if(p===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(x)),h?.destroy(),(0,i.T)(t.current,{config:d,...x}).then(e=>{u(e),"function"==typeof a&&a(e)})},[e]),(0,o.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":d})}var l=s("1858"),d=s("3262"),c=s("1705"),h=s("7645"),u=s("8168"),p=s("8228"),m=s("5050");function g(e){let[t,s]=(0,o.useState)(e.js),[r,i]=(0,o.useState)(e.ts),[a,l]=(0,o.useState)(e.react),[g,f]=(0,o.useState)(e.vue),[x,j]=(0,o.useState)(e.svelte),y="3.7rem",[v,b]=(0,o.useState)(!0),[w,S]=(0,o.useState)(y),C=(0,o.useRef)(null),k=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${y})`)},255)};return(0,o.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(r,"ts")),l(e(a,"jsx")),f(e(g,"html")),j(e(x,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":v,style:{height:v?y:w,overflow:"hidden",willChange:"height",transition:`height ${v?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!v),k()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:k},children:(0,n.jsx)(c.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:k},children:(0,n.jsx)(c.Z,{language:"ts",children:r})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:k},children:(0,n.jsx)(c.Z,{language:"jsx",children:a})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:k},children:(0,n.jsx)(c.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:k},children:(0,n.jsx)(c.Z,{language:"html",children:x})})]})})})]})}function f(e){let{className:t,style:s,showCode:o,height:i,...d}=e,{colorMode:c}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (); +} + +`.trimStart(),f=` + + + +`,x=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:u,ts:p,react:m,vue:f,svelte:x})]})}},8500:function(e,t,s){s.d(t,{Z:()=>d});var n=s("5893");s("7294");var r=s("6735");function o(e){let{children:t,fallback:s}=e;return(0,r.Z)()?(0,n.jsx)(n.Fragment,{children:t?.()}):s??null}var i=s("1705"),a=s("8294"),l=s("1858");function d(e){let{params:t,config:s,code:r,language:d="js",codeTitle:c="",showLineNumbers:h=!1,formatCode:u=!0,linkText:p="Run in LiveCodes",style:m={},className:g=""}=e,f=(0,a.r)({appUrl:l.G,params:t,config:s});return(0,n.jsxs)("div",{style:{marginBottom:"30px",...m},className:g,children:[r&&(0,n.jsx)(o,{children:()=>(0,n.jsx)(i.Z,{language:d,title:c,showLineNumbers:h,children:u?function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}(r,d):r})}),(0,n.jsxs)("a",{href:f,target:"_blank",rel:"noreferrer",children:[p,(0,n.jsx)("svg",{width:"12",height:"12","aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_node_modules-@docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module",style:{marginLeft:"4px"},children:(0,n.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})]})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return o}});var n=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:r="lazy",view:i}=t,a=n||"headless"===i,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)k(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(o(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",a?"eager":r);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",o=l.querySelector(`iframe.${n}`),i=o||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===r?"eager":"lazy"),a?k(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),i.onload=()=>{e(i)},i.src=c.href,o||l.appendChild(i)}),x=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),x.settled=!0)})}),j=()=>m?Promise.reject(g):new Promise(async e=>{x.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await x,e()}),y=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await j();let r=E();addEventListener("message",function t(o){if(o.source===f.contentWindow&&o.origin===h&&o.data?.type==="livecodes-api-response"&&o.data?.id===r&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},h)}),v={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return b.includes(e)?(y("watch",[e]),v[e]||(v[e]=[]),v[e]?.push(t),{remove:()=>{v[e]=v[e]?.filter(e=>e!==t),v[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!v[t])return;let s=e.data?.payload;v[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(v).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function k(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,t)=>y("show",[e,t]),runTests:()=>y("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nx.settled?y("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:o={},headless:i,import:a,lite:l,view:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let u="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==d?o.view=d:e.searchParams.set("view",d)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(o))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return i}});var n=s(7294);let r={},o=n.createContext(r);function i(e){let t=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/e67156d3.c156dd9c.js b/docs/assets/js/e67156d3.c156dd9c.js new file mode 100644 index 0000000..16eaecf --- /dev/null +++ b/docs/assets/js/e67156d3.c156dd9c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2949"],{4498:function(e,t,s){s.r(t),s.d(t,{default:()=>l,frontMatter:()=>i,metadata:()=>r,assets:()=>d,toc:()=>c,contentTitle:()=>a});var r=JSON.parse('{"id":"features/mobile","title":"Mobile Support","description":"LiveCodes provides a responsive layout that adapts to different screen sizes. Don\'t wait to be on your desk. Try your ideas on the go!","source":"@site/docs/features/mobile.mdx","sourceDirName":"features","slug":"/features/mobile","permalink":"/docs/features/mobile","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/mobile.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Themes","permalink":"/docs/features/themes"},"next":{"title":"Embedded Playgrounds","permalink":"/docs/features/embeds"}}'),o=s("5893"),n=s("65");let i={},a="Mobile Support",d={},c=[];function u(e){let t={a:"a",h1:"h1",header:"header",img:"img",p:"p",...(0,n.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"mobile-support",children:"Mobile Support"})}),"\n",(0,o.jsx)(t.p,{children:"LiveCodes provides a responsive layout that adapts to different screen sizes. Don't wait to be on your desk. Try your ideas on the go!"}),"\n",(0,o.jsxs)(t.p,{children:["Projects that you create on mobile can be easily ",(0,o.jsx)(t.a,{href:"/docs/features/share",children:"shared"})," or ",(0,o.jsx)(t.a,{href:"/docs/features/sync",children:"synchronized"})," across devices. You can even share using QR code."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.img,{alt:"Responsive layout",src:s(9325).Z+"",width:"2240",height:"1400"})," "]}),"\n",(0,o.jsxs)(t.p,{children:["By default, LiveCodes uses the touch-friendly ",(0,o.jsx)(t.a,{href:"https://codemirror.net/",children:"CodeMirror 6"})," editor on mobile. This is configurable in the ",(0,o.jsx)(t.a,{href:"/docs/features/editor-settings",children:"editor settings"})," and can be changed at any time."]})]})}function l(e={}){let{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}},9325:function(e,t,s){s.d(t,{Z:function(){return r}});let r=s.p+"assets/images/responsive-4e35ef63d01b7e8e64b254560ef5bdf7.jpg"},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return i}});var r=s(7294);let o={},n=r.createContext(o);function i(e){let t=r.useContext(n);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),r.createElement(n.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/ea9414ac.3cd14b83.js b/docs/assets/js/ea9414ac.3cd14b83.js new file mode 100644 index 0000000..ed7950d --- /dev/null +++ b/docs/assets/js/ea9414ac.3cd14b83.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7019"],{3550:function(e,t,s){s.r(t),s.d(t,{default:()=>p,frontMatter:()=>a,metadata:()=>n,assets:()=>c,params:()=>d,toc:()=>u,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/babel","title":"Babel","description":"Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.","source":"@site/docs/languages/babel.mdx","sourceDirName":"languages","slug":"/languages/babel","permalink":"/docs/languages/babel","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/babel.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Autoprefixer","permalink":"/docs/languages/autoprefixer"},"next":{"title":"BBCode","permalink":"/docs/languages/bbcode"}}'),o=s("5893"),r=s("65"),i=s("3365");let a={},l="Babel",c={},d={babel:"export const numbers = [1, 2, 3].map((x) => x * 2);\n\nexport const Greet = (name: string) => <>Hello {name}!;\n",compiled:"open"},u=[{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"babel",children:"Babel"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"https://babeljs.io/",children:"Babel"})," is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments."]}),"\n",(0,o.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,o.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"babel"})}),"\n",(0,o.jsx)(t.h3,{id:"extensions",children:"Extensions"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:".es"}),", ",(0,o.jsx)(t.code,{children:".babel"})]}),"\n",(0,o.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"script"})}),"\n",(0,o.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,o.jsxs)(t.p,{children:["The official ",(0,o.jsxs)(t.a,{href:"https://babeljs.io/docs/babel-standalone",children:[(0,o.jsx)(t.code,{children:"@babel/standalone"})," compiler"]}),"."]}),"\n",(0,o.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"@babel/standalone"}),": v7.24.7"]}),"\n",(0,o.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,o.jsx)(t.code,{children:"babel"})," are passed as a JSON object to the ",(0,o.jsx)(t.a,{href:"https://babeljs.io/docs/babel-standalone#api",children:(0,o.jsx)(t.code,{children:"Babel.transform"})})," method during compile. Please check the ",(0,o.jsx)(t.a,{href:"https://babeljs.io/docs/babel-core/",children:"documentation"})," for full reference."]}),"\n",(0,o.jsx)(t.p,{children:"By default, the following configuration is used:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-json",children:'{\n "babel": { "presets": [["env", { "modules": false }], "typescript", "react"] }\n}\n'})}),"\n",(0,o.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,o.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n","\n",(0,o.jsx)(i.Z,{params:d}),"\n",(0,o.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://babeljs.io/",children:"Babel official website"})}),"\n",(0,o.jsx)(t.li,{children:(0,o.jsx)(t.a,{href:"https://babeljs.io/docs/",children:"Babel documentation"})}),"\n"]})]})}function p(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>g});var n=s("5893"),o=s("4200"),r=s("7294"),i=s("8294");function a(e){let t=(0,r.useRef)(null),[s,o]=(0,r.useState)(e.className||""),[a,l]=(0,r.useState)(e.style||{}),[c,d]=(0,r.useState)(e.height),[u,h]=(0,r.useState)(),[p,m]=(0,r.useState)(JSON.stringify(e.config||"")),[f,g]=(0,r.useState)("");return(0,r.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:r,sdkReady:a,config:c,...b}=e;if(o(s||""),l(n||{}),d(r),u&&f===JSON.stringify(b)){if(p===JSON.stringify(c))return;m(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else g(JSON.stringify(b)),u?.destroy(),(0,i.T)(t.current,{config:c,...b}).then(e=>{h(e),"function"==typeof a&&a(e)})},[e]),(0,r.useEffect)(()=>()=>{u?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),u=s("7645"),h=s("8168"),p=s("8228"),m=s("5050");function f(e){let[t,s]=(0,r.useState)(e.js),[o,i]=(0,r.useState)(e.ts),[a,l]=(0,r.useState)(e.react),[f,g]=(0,r.useState)(e.vue),[b,v]=(0,r.useState)(e.svelte),y="3.7rem",[x,j]=(0,r.useState)(!0),[w,S]=(0,r.useState)(y),C=(0,r.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${y})`)},255)};return(0,r.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(o,"ts")),l(e(a,"jsx")),g(e(f,"html")),v(e(b,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":x,style:{height:x?y:w,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{j(!x),E()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,n.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"ts",children:o})}),(0,n.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"jsx",children:a})}),(0,n.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:f})}),(0,n.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:b})})]})})})]})}function g(e){let{className:t,style:s,showCode:r,height:i,...c}=e,{colorMode:d}=(0,o.I)(),u=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (); +} + +`.trimStart(),g=` + + + +`,b=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(f,{js:h,ts:p,react:m,vue:g,svelte:b})]})}},8294:function(e,t,s){s.d(t,{T:function(){return o},r:function(){return r}});var n=s(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:o="lazy",view:i}=t,a=n||"headless"===i,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(r(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":o);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,f="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",r=l.querySelector(`iframe.${n}`),i=r||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===o?"eager":"lazy"),a?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),i.onload=()=>{e(i)},i.src=d.href,r||l.appendChild(i)}),b=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),b.settled=!0)})}),v=()=>m?Promise.reject(f):new Promise(async e=>{b.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},u),await b,e()}),y=(e,t)=>new Promise(async(s,n)=>{if(m)return n(f);await v();let o=P();addEventListener("message",function t(r){if(r.source===g.contentWindow&&r.origin===u&&r.data?.type==="livecodes-api-response"&&r.data?.id===o&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?n(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:o,args:t},u)}),x={},j=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(f);return j.includes(e)?(y("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==u||!t||!x[t])return;let s=e.data?.payload;x[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(x).forEach(e=>{e.length=0}),g?.remove?.(),m=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,t)=>y("show",[e,t]),runTests:()=>y("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nb.settled?y("destroy").then(C):m?Promise.reject(f):(C(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:o={},config:r={},headless:i,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let h="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==c?r.view=c:e.searchParams.set("view",c)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),u.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(r))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{u.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return i}});var n=s(7294);let o={},r=n.createContext(o);function i(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/ec7fa08a.d33ce892.js b/docs/assets/js/ec7fa08a.d33ce892.js new file mode 100644 index 0000000..5ec0429 --- /dev/null +++ b/docs/assets/js/ec7fa08a.d33ce892.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6176"],{2108:function(e,t,s){s.r(t),s.d(t,{default:()=>u,frontMatter:()=>l,metadata:()=>n,assets:()=>c,params:()=>d,toc:()=>m,contentTitle:()=>a});var n=JSON.parse('{"id":"languages/mjml","title":"MJML","description":"MJML is a markup language designed to reduce the pain of coding a responsive email.","source":"@site/docs/languages/mjml.mdx","sourceDirName":"languages","slug":"/languages/mjml","permalink":"/docs/languages/mjml","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/mjml.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"MDX","permalink":"/docs/languages/mdx"},"next":{"title":"Mustache","permalink":"/docs/languages/mustache"}}'),o=s("5893"),i=s("65"),r=s("3365");let l={},a="MJML",c={},d={mjml:"\n \n \n \n \n Hello World!\n \n \n \n \n\n"},m=[{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"mjml",children:"MJML"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"https://mjml.io/",children:"MJML"})," is a markup language designed to reduce the pain of coding a responsive email."]}),"\n",(0,o.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,o.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"mjml"})}),"\n",(0,o.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:".mjml"})}),"\n",(0,o.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.code,{children:"markup"})}),"\n",(0,o.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.a,{href:"https://www.npmjs.com/package/mjml-browser",children:"browser build"})," of the official ",(0,o.jsx)(t.a,{href:"https://github.com/mjmlio/mjml",children:"MJML compiler"}),"."]}),"\n",(0,o.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"mjml-browser"}),": v4.15.3"]}),"\n",(0,o.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,o.jsx)(t.code,{children:"mjml"})," are passed as a JSON object to the mjml compiler. Please check the ",(0,o.jsx)(t.a,{href:"https://documentation.mjml.io/#inside-node-js",children:"documentation"})," for full reference."]}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.strong,{children:"Example:"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-json",children:'{\n "mjml": {\n "keepComments": false,\n "minify": true\n }\n}\n'})}),"\n",(0,o.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n","\n",(0,o.jsx)(r.Z,{params:d}),"\n",(0,o.jsxs)(t.p,{children:["This playground loads a template from the official MJML ",(0,o.jsx)(t.a,{href:"https://github.com/mjmlio/email-templates",children:"email templates"}),":"]}),"\n",(0,o.jsx)(r.Z,{import:"https://github.com/mjmlio/email-templates/blob/master/templates/onepage.mjml",height:"400"}),"\n",(0,o.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://mjml.io/",children:"MJML official website"})}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://documentation.mjml.io/",children:"MJML documentation"})}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/mjmlio/mjml",children:"MJML GitHub repo"})}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://mjml.io/templates",children:"Official email templates"})}),"\n"]}),"\n"]})]})}function u(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),o=s("4200"),i=s("7294"),r=s("8294");function l(e){let t=(0,i.useRef)(null),[s,o]=(0,i.useState)(e.className||""),[l,a]=(0,i.useState)(e.style||{}),[c,d]=(0,i.useState)(e.height),[m,h]=(0,i.useState)(),[u,p]=(0,i.useState)(JSON.stringify(e.config||"")),[g,f]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:i,sdkReady:l,config:c,...j}=e;if(o(s||""),a(n||{}),d(i),m&&g===JSON.stringify(j)){if(u===JSON.stringify(c))return;p(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{m?.setConfig(e)}):c&&m.setConfig(c)}else f(JSON.stringify(j)),m?.destroy(),(0,r.T)(t.current,{config:c,...j}).then(e=>{h(e),"function"==typeof l&&l(e)})},[e]),(0,i.useEffect)(()=>()=>{m?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:l,"data-height":c})}var a=s("1858"),c=s("3262"),d=s("1705"),m=s("7645"),h=s("8168"),u=s("8228"),p=s("5050");function g(e){let[t,s]=(0,i.useState)(e.js),[o,r]=(0,i.useState)(e.ts),[l,a]=(0,i.useState)(e.react),[g,f]=(0,i.useState)(e.vue),[j,v]=(0,i.useState)(e.svelte),y="3.7rem",[x,b]=(0,i.useState)(!0),[w,S]=(0,i.useState)(y),C=(0,i.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${y})`)},255)};return(0,i.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),r(e(o,"ts")),a(e(l,"jsx")),f(e(g,"html")),v(e(j,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${u.Z.details}`,"data-collapsed":x,style:{height:x?y:w,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!x),E()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:p.Z.collapsibleContent,children:(0,n.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,n.jsx)(m.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(m.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"ts",children:o})}),(0,n.jsx)(m.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"jsx",children:l})}),(0,n.jsx)(m.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:g})}),(0,n.jsx)(m.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:j})})]})})})]})}function f(e){let{className:t,style:s,showCode:i,height:r,...c}=e,{colorMode:d}=(0,o.I)(),m=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${m(c)}; +createPlayground('#container', options); + +`.trimStart(),u=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${m(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${m(c)}; + return (); +} + +`.trimStart(),f=` + + + +`,j=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:r||"50vh",...e.style},appUrl:a.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:h,ts:u,react:p,vue:f,svelte:j})]})}},8294:function(e,t,s){s.d(t,{T:function(){return o},r:function(){return i}});var n=s(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:o="lazy",view:r}=t,l=n||"headless"===r,a=null,c=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)E(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(i(t)),m=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",l?"eager":o);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(u[e])))});let p=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let n="livecodes",i=a.querySelector(`iframe.${n}`),r=i||document.createElement("iframe");r.classList.add(n),r.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),r.setAttribute("allowtransparency","true"),r.setAttribute("allowpaymentrequest","true"),r.setAttribute("allowfullscreen","true"),r.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),r.setAttribute("loading","eager"===o?"eager":"lazy"),l?E(r):(r.style.height="100%",r.style.minHeight="200px",r.style.width="100%",r.style.margin="0",r.style.border="0",r.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===m&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===m&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),r.contentWindow?.postMessage({type:"livecodes-config",payload:s},m))}),r.onload=()=>{e(r)},r.src=d.href,i||a.appendChild(r)}),j=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===m&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),j.settled=!0)})}),v=()=>p?Promise.reject(g):new Promise(async e=>{j.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},m),await j,e()}),y=(e,t)=>new Promise(async(s,n)=>{if(p)return n(g);await v();let o=M();addEventListener("message",function t(i){if(i.source===f.contentWindow&&i.origin===m&&i.data?.type==="livecodes-api-response"&&i.data?.id===o&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:o,args:t},m)}),x={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(p)throw Error(g);return b.includes(e)?(y("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==m||!t||!x[t])return;let s=e.data?.payload;x[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(x).forEach(e=>{e.length=0}),f?.remove?.(),p=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let M=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,t)=>y("show",[e,t]),runTests:()=>y("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nj.settled?y("destroy").then(C):p?Promise.reject(g):(C(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:o={},config:i={},headless:r,import:l,lite:a,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let m=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let h="headless"===t.view||r;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==c?i.view=c:e.searchParams.set("view",c)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),m.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(i))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{m.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),h&&e.searchParams.set("headless","true"),e.hash=m.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return l},a:function(){return r}});var n=s(7294);let o={},i=n.createContext(o);function r(e){let t=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/ec9563e7.e56fe719.js b/docs/assets/js/ec9563e7.e56fe719.js new file mode 100644 index 0000000..26b1d16 --- /dev/null +++ b/docs/assets/js/ec9563e7.e56fe719.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2464"],{6743:function(e,s,i){i.r(s),i.d(s,{default:()=>l,frontMatter:()=>o,metadata:()=>t,assets:()=>c,toc:()=>u,contentTitle:()=>a});var t=JSON.parse('{"id":"features/github-integration","title":"GitHub Integration","description":"Generally, LiveCodes can be used anonymously without any accounts. This includes importing code from GitHub gists or public repos.","source":"@site/docs/features/github-integration.mdx","sourceDirName":"features","slug":"/features/github-integration","permalink":"/docs/features/github-integration","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/github-integration.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Backup / Restore","permalink":"/docs/features/backup-restore"},"next":{"title":"Integrations","permalink":"/docs/features/integrations"}}'),r=i("5893"),n=i("65");let o={},a="GitHub Integration",c={},u=[{value:"Features that require GitHub Account",id:"features-that-require-github-account",level:2},{value:"Public Repos",id:"public-repos",level:3},{value:"Private Repos",id:"private-repos",level:3},{value:"Gists",id:"gists",level:3},{value:"Setting Permissions",id:"setting-permissions",level:2}];function d(e){let s={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",strong:"strong",ul:"ul",...(0,n.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.header,{children:(0,r.jsx)(s.h1,{id:"github-integration",children:"GitHub Integration"})}),"\n",(0,r.jsxs)(s.p,{children:["Generally, LiveCodes can be used anonymously without any accounts. This includes ",(0,r.jsx)(s.a,{href:"/docs/features/import",children:"importing"})," code from GitHub gists or public repos."]}),"\n",(0,r.jsxs)(s.p,{children:["However, some features do require ",(0,r.jsx)(s.a,{href:"/docs/features/user-management",children:"login"})," with a GitHub account and giving ",(0,r.jsx)(s.a,{href:"https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/scopes-for-oauth-apps#available-scopes",children:"specific permissions"})," to make use of GitHub services (e.g. ",(0,r.jsx)(s.a,{href:"/docs/features/import",children:"import"})," from private repos, ",(0,r.jsx)(s.a,{href:"/docs/features/export",children:"export"})," to gist, ",(0,r.jsx)(s.a,{href:"/docs/features/deploy",children:"deploy"}),", ",(0,r.jsx)(s.a,{href:"/docs/features/assets",children:"assets"})," and ",(0,r.jsx)(s.a,{href:"/docs/features/sync",children:"sync"}),")."]}),"\n",(0,r.jsx)(s.admonition,{title:"cookies",type:"caution",children:(0,r.jsxs)(s.p,{children:["User authentication is handled using ",(0,r.jsx)(s.a,{href:"https://firebase.google.com/products/auth",children:"Firebase Authentication"})," which ",(0,r.jsx)(s.strong,{children:"may use cookies"}),". By logging in, you agree that cookies may be stored on your device."]})}),"\n",(0,r.jsx)(s.h2,{id:"features-that-require-github-account",children:"Features that require GitHub Account"}),"\n",(0,r.jsx)(s.h3,{id:"public-repos",children:"Public Repos"}),"\n",(0,r.jsx)(s.p,{children:"Access to public repos is required for:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"/docs/features/deploy",children:"Deploy"}),": A new public repo is created (if required) and code is pushed to the branch ",(0,r.jsx)(s.code,{children:"gh-pages"})," of the repo. The is deployed on ",(0,r.jsx)(s.a,{href:"https://pages.github.com/",children:"GitHub pages"}),"."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"/docs/features/assets",children:"Assets"}),": can be stored on a public repo published on ",(0,r.jsx)(s.a,{href:"https://pages.github.com/",children:"GitHub pages"}),"."]}),"\n"]}),"\n",(0,r.jsx)(s.h3,{id:"private-repos",children:"Private Repos"}),"\n",(0,r.jsx)(s.p,{children:"Access to private repos is required to:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"/docs/features/import",children:"Import"})," code from private repos."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"/docs/features/sync",children:"Sync"})," LiveCodes data to a private repo."]}),"\n"]}),"\n",(0,r.jsx)(s.h3,{id:"gists",children:"Gists"}),"\n",(0,r.jsx)(s.p,{children:"Access to gists is required to:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"/docs/features/export",children:"Export"})," projects to GitHub gist."]}),"\n"]}),"\n",(0,r.jsx)(s.h2,{id:"setting-permissions",children:"Setting Permissions"}),"\n",(0,r.jsx)(s.p,{children:"GitHub user permissions for LiveCodes app are set the first time the user logs in. Any subsequent login will use the first permissions, even if they are set differently."}),"\n",(0,r.jsx)(s.p,{children:"To change previously set permissions:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"/docs/features/user-management",children:"Logout"})," from the LiveCodes app."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"https://docs.github.com/en/apps/oauth-apps/using-oauth-apps/reviewing-your-authorized-oauth-applications",children:"Revoke permissions"})," of LiveCodes app in your GitHub account."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"/docs/features/user-management",children:"Login"})," again in LiveCodes and set the new permissions."]}),"\n"]})]})}function l(e={}){let{wrapper:s}={...(0,n.a)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}},65:function(e,s,i){i.d(s,{Z:function(){return a},a:function(){return o}});var t=i(7294);let r={},n=t.createContext(r);function o(e){let s=t.useContext(n);return t.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),t.createElement(n.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/ef4aa51e.0e74704f.js b/docs/assets/js/ef4aa51e.0e74704f.js new file mode 100644 index 0000000..069e747 --- /dev/null +++ b/docs/assets/js/ef4aa51e.0e74704f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["3729"],{5173:function(e,t,n){n.r(t),n.d(t,{default:()=>u,frontMatter:()=>o,metadata:()=>r,assets:()=>a,toc:()=>d,contentTitle:()=>c});var r=JSON.parse('{"id":"languages/richtext","title":"Rich Text Editor","description":"TODO...","source":"@site/docs/languages/richtext.mdx","sourceDirName":"languages","slug":"/languages/richtext","permalink":"/docs/languages/richtext","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/richtext.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"ReScript","permalink":"/docs/languages/rescript"},"next":{"title":"Riot.js","permalink":"/docs/languages/riot"}}'),i=n("5893"),s=n("65");let o={},c="Rich Text Editor",a={},d=[];function l(e){let t={h1:"h1",header:"header",p:"p",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"rich-text-editor",children:"Rich Text Editor"})}),"\n",(0,i.jsx)(t.p,{children:"TODO..."})]})}function u(e={}){let{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},65:function(e,t,n){n.d(t,{Z:function(){return c},a:function(){return o}});var r=n(7294);let i={},s=r.createContext(i);function o(e){let t=r.useContext(s);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/f0400b8e.d5c9e8d6.js b/docs/assets/js/f0400b8e.d5c9e8d6.js new file mode 100644 index 0000000..eb8e438 --- /dev/null +++ b/docs/assets/js/f0400b8e.d5c9e8d6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9247"],{9083:function(e,t,n){n.r(t),n.d(t,{default:()=>f,frontMatter:()=>d,metadata:()=>o,assets:()=>m,toc:()=>h,contentTitle:()=>u});var o=JSON.parse('{"id":"contact","title":"Contact","description":"contact-custom-content-none}","source":"@site/docs/contact.mdx","sourceDirName":".","slug":"/contact","permalink":"/docs/contact","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/contact.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Sponsor","permalink":"/docs/sponsor"},"next":{"title":"About us","permalink":"/docs/about"}}'),r=n("5893"),s=n("65"),i=n("7294");let c={"form-container":"form-container_QXOg",info:"info_tJPF",error:"error_mTyF"};function a(){let[e,t]=(0,i.useState)(!1),[n,o]=(0,i.useState)(!1),[s,a]=(0,i.useState)(!1);return(0,r.jsx)("div",{id:"form-container",className:c["form-container"],children:n?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("h2",{children:"Thank you"}),(0,r.jsx)("div",{children:"Your message has been sent successfully."})]}):(0,r.jsxs)("form",{id:"contact-form",onSubmit:e=>{e.preventDefault(),t(!0);let n=document.querySelector("#form-container #name").value;fetch("https://submit-form.com/6CPRLFS0",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({name:n,email:document.querySelector("#form-container #email").value,message:document.querySelector("#form-container #message").value,_email:{subject:"LiveCodes Contact",from:n}})}).then(e=>{if(!e.ok)throw Error();t(!1),a(!1),o(!0),document.querySelector("h1").scrollIntoView({behavior:"smooth"})}).catch(()=>{t(!1),a(!0)})},children:[s&&(0,r.jsx)("div",{className:c.error,children:"Sending failed. Please try again!"}),(0,r.jsxs)("div",{children:[(0,r.jsx)("label",{htmlFor:"name",children:"Name *"}),(0,r.jsx)("input",{id:"name",className:"text-input",required:!0})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("label",{htmlFor:"email",children:"Email *"}),(0,r.jsx)("input",{type:"email",id:"email",className:"text-input",required:!0})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("label",{htmlFor:"message",children:"Message *"}),(0,r.jsx)("textarea",{id:"message",required:!0})]}),(0,r.jsx)("button",{type:"submit",disabled:e,children:e?"Sending...":"Send"}),(0,r.jsx)("span",{className:c.info,children:"* Required"})]})})}var l=n("5178");let d={},u="Contact {#contact-custom-content-none}",m={},h=[];function p(e){let t={a:"a",h1:"h1",header:"header",li:"li",p:"p",ul:"ul",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"contact-custom-content-none",children:"Contact"})}),"\n",(0,r.jsx)(t.p,{children:"We would love to hear from you!"}),"\n","\n",(0,r.jsx)(a,{}),"\n",(0,r.jsx)(t.p,{children:"Or you can send us an email to:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["Info: ",(0,r.jsx)(l.Z,{email:"info@livecodes.io"})]}),"\n",(0,r.jsxs)(t.li,{children:["Security: ",(0,r.jsx)(l.Z,{email:"security@livecodes.io"})]}),"\n",(0,r.jsxs)(t.li,{children:["Sponsor: ",(0,r.jsx)(l.Z,{email:"sponsor@livecodes.io"})]}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["For non-security-related code issues, please report them in the ",(0,r.jsx)(t.a,{href:"https://github.com/live-codes/livecodes/issues",children:"repo issues"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["Please follow the twitter account: ",(0,r.jsx)(t.a,{href:"https://twitter.com/livecodes_io",children:"@livecodes_io"}),"."]})]})}function f(e={}){let{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},5178:function(e,t,n){n.d(t,{Z:function(){return r}});var o=n(5893);function r(e){let t=e.email.replace("@","@").replace(".",".");return(0,o.jsx)("a",{href:`mailto:${t}`,target:"_blank",rel:"noopener noreferrer",children:e.text||t})}},65:function(e,t,n){n.d(t,{Z:function(){return c},a:function(){return i}});var o=n(7294);let r={},s=o.createContext(r);function i(e){let t=o.useContext(s);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/f074ec4e.c8183bfa.js b/docs/assets/js/f074ec4e.c8183bfa.js new file mode 100644 index 0000000..73e50c5 --- /dev/null +++ b/docs/assets/js/f074ec4e.c8183bfa.js @@ -0,0 +1,59 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5787"],{3880:function(e,t,s){s.r(t),s.d(t,{default:()=>u,frontMatter:()=>l,metadata:()=>n,assets:()=>d,vueSDKDemo:()=>c,toc:()=>p,contentTitle:()=>a});var n=JSON.parse('{"id":"sdk/vue","title":"Vue SDK","description":"The vue SDK is a thin wrapper around the JavaScript SDK to provide an easy to use vue component, yet retaining the full power, by having access to the SDK methods.","source":"@site/docs/sdk/vue.mdx","sourceDirName":"sdk","slug":"/sdk/vue","permalink":"/docs/sdk/vue","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/sdk/vue.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"React SDK","permalink":"/docs/sdk/react"},"next":{"title":"Svelte","permalink":"/docs/sdk/svelte"}}'),o=s("5893"),r=s("65"),i=s("3365");let l={},a="Vue SDK",d={},c={vue:` + + +`},p=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2},{value:"TypeScript Support",id:"typescript-support",level:3},{value:"Props",id:"props",level:3},{value:"Events",id:"events",level:3},{value:"Styles",id:"styles",level:3},{value:"Demo",id:"demo",level:2},{value:"Related",id:"related",level:2}];function h(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"vue-sdk",children:"Vue SDK"})}),"\n","\n",(0,o.jsxs)(t.p,{children:["The vue SDK is a thin wrapper around the ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts",children:"JavaScript SDK"})," to provide an easy to use vue component, yet retaining the full power, by having access to the ",(0,o.jsx)(t.a,{href:"/docs/sdk/js-ts#sdk-methods",children:"SDK methods"}),"."]}),"\n",(0,o.jsxs)(t.p,{children:["It has a very simple ",(0,o.jsx)(t.a,{href:"https://github.com/live-codes/livecodes/blob/develop/src/sdk/vue.ts",children:"implementation"})," which you can easily modify in case you need."]}),"\n",(0,o.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,o.jsxs)(t.p,{children:["Please refer to the ",(0,o.jsx)(t.a,{href:"/docs/sdk/#installation",children:"SDK installation"})," section."]}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsxs)(t.p,{children:["The vue component is provided as the default export from ",(0,o.jsx)(t.code,{children:"livecodes/vue"}),"."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-html",metastring:'title="App.vue"',children:" + + +`,f=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:a.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(v,{js:h,ts:u,react:m,vue:g,svelte:f})]})}},8294:function(e,t,s){s.d(t,{T:function(){return o},r:function(){return r}});var n=s(7728);async function o(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:o="lazy",view:i}=t,l=n||"headless"===i,a=null,d=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)C(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(r(t)),p=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",l?"eager":o);let h=globalThis.process;c.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&c.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(u[e])))});let m=!1,v="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let n="livecodes",r=a.querySelector(`iframe.${n}`),i=r||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===o?"eager":"lazy"),l?C(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===p&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===p&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},p))}),i.onload=()=>{e(i)},i.src=c.href,r||a.appendChild(i)}),f=new Promise(e=>{addEventListener("message",function t(s){s.source===g.contentWindow&&s.origin===p&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),f.settled=!0)})}),y=()=>m?Promise.reject(v):new Promise(async e=>{f.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},p),await f,e()}),j=(e,t)=>new Promise(async(s,n)=>{if(m)return n(v);await y();let o=P();addEventListener("message",function t(r){if(r.source===g.contentWindow&&r.origin===p&&r.data?.type==="livecodes-api-response"&&r.data?.id===o&&r.data.method===e){removeEventListener("message",t);let e=r.data.payload;e?.error?n(e.error):s(e)}}),g.contentWindow?.postMessage({method:e,id:o,args:t},p)}),x={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(v);return b.includes(e)?(j("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==p||!t||!x[t])return;let s=e.data?.payload;x[t]?.forEach(e=>{e(s)})});let k=()=>{Object.values(x).forEach(e=>{e.length=0}),g?.remove?.(),m=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,t)=>j("show",[e,t]),runTests:()=>j("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nf.settled?j("destroy").then(k):m?Promise.reject(v):(k(),Promise.resolve())}}function r(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:o={},config:r={},headless:i,import:l,lite:a,view:d,...c}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let p=new URLSearchParams;Object.entries(c).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let h="headless"===t.view||i;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof r&&null==r.mode?r.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof r&&null==r.view&&"headless"!==d?r.view=d:e.searchParams.set("view",d)),"string"==typeof r)try{new URL(r),e.searchParams.set("config",encodeURIComponent(r))}catch{throw Error('"config" is not a valid URL or configuration object.')}else r&&"object"==typeof r&&Object.keys(r).length>0&&(r.title&&"Untitled Project"!==r.title&&e.searchParams.set("title",r.title),r.description&&r.description.length>0&&e.searchParams.set("description",r.description),p.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(r))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{p.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(o[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),h&&e.searchParams.set("headless","true"),e.hash=p.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return l},a:function(){return i}});var n=s(7294);let o={},r=n.createContext(o);function i(e){let t=n.useContext(r);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/f1337b1a.b65fe988.js b/docs/assets/js/f1337b1a.b65fe988.js new file mode 100644 index 0000000..93bd856 --- /dev/null +++ b/docs/assets/js/f1337b1a.b65fe988.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7302"],{7496:function(e,d,n){n.r(d),n.d(d,{default:()=>a,frontMatter:()=>r,metadata:()=>i,assets:()=>o,toc:()=>t,contentTitle:()=>c});var i=JSON.parse('{"id":"api/internal/interfaces/EditorConfig","title":"Interface: EditorConfig","description":"Extended by","source":"@site/docs/api/internal/interfaces/EditorConfig.md","sourceDirName":"api/internal/interfaces","slug":"/api/internal/interfaces/EditorConfig","permalink":"/docs/api/internal/interfaces/EditorConfig","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/interfaces/EditorConfig.md","tags":[],"version":"current","frontMatter":{}}'),s=n("5893"),l=n("65");let r={},c="Interface: EditorConfig",o={},t=[{value:"Extended by",id:"extended-by",level:2},{value:"Properties",id:"properties",level:2},{value:"closeBrackets",id:"closebrackets",level:3},{value:"Default",id:"default",level:4},{value:"Defined in",id:"defined-in",level:4},{value:"editor",id:"editor",level:3},{value:"Default",id:"default-1",level:4},{value:"Defined in",id:"defined-in-1",level:4},{value:"editorMode",id:"editormode",level:3},{value:"Defined in",id:"defined-in-2",level:4},{value:"editorTheme",id:"editortheme",level:3},{value:"Examples",id:"examples",level:4},{value:"Defined in",id:"defined-in-3",level:4},{value:"emmet",id:"emmet",level:3},{value:"Default",id:"default-2",level:4},{value:"Defined in",id:"defined-in-4",level:4},{value:"enableAI",id:"enableai",level:3},{value:"Default",id:"default-3",level:4},{value:"Defined in",id:"defined-in-5",level:4},{value:"foldRegions",id:"foldregions",level:3},{value:"Default",id:"default-4",level:4},{value:"Defined in",id:"defined-in-6",level:4},{value:"fontFamily",id:"fontfamily",level:3},{value:"Defined in",id:"defined-in-7",level:4},{value:"fontSize",id:"fontsize",level:3},{value:"Default",id:"default-5",level:4},{value:"Defined in",id:"defined-in-8",level:4},{value:"lineNumbers",id:"linenumbers",level:3},{value:"Default",id:"default-6",level:4},{value:"Defined in",id:"defined-in-9",level:4},{value:"tabSize",id:"tabsize",level:3},{value:"Default",id:"default-7",level:4},{value:"Defined in",id:"defined-in-10",level:4},{value:"theme",id:"theme",level:3},{value:"Default",id:"default-8",level:4},{value:"Defined in",id:"defined-in-11",level:4},{value:"themeColor",id:"themecolor",level:3},{value:"Default",id:"default-9",level:4},{value:"Defined in",id:"defined-in-12",level:4},{value:"useTabs",id:"usetabs",level:3},{value:"Default",id:"default-10",level:4},{value:"Defined in",id:"defined-in-13",level:4},{value:"wordWrap",id:"wordwrap",level:3},{value:"Default",id:"default-11",level:4},{value:"Defined in",id:"defined-in-14",level:4}];function h(e){let d={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(d.header,{children:(0,s.jsx)(d.h1,{id:"interface-editorconfig",children:"Interface: EditorConfig"})}),"\n",(0,s.jsx)(d.h2,{id:"extended-by",children:"Extended by"}),"\n",(0,s.jsxs)(d.ul,{children:["\n",(0,s.jsx)(d.li,{children:(0,s.jsx)(d.a,{href:"/docs/api/internal/interfaces/UserConfig",children:(0,s.jsx)(d.code,{children:"UserConfig"})})}),"\n"]}),"\n",(0,s.jsx)(d.h2,{id:"properties",children:"Properties"}),"\n",(0,s.jsx)(d.h3,{id:"closebrackets",children:"closeBrackets"}),"\n",(0,s.jsxs)(d.blockquote,{children:["\n",(0,s.jsxs)(d.p,{children:[(0,s.jsx)(d.strong,{children:"closeBrackets"}),": ",(0,s.jsx)(d.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsx)(d.p,{children:"Use auto-complete to close brackets and quotes."}),"\n",(0,s.jsx)(d.h4,{id:"default",children:"Default"}),"\n",(0,s.jsx)(d.pre,{children:(0,s.jsx)(d.code,{className:"language-ts",children:"true\n"})}),"\n",(0,s.jsx)(d.h4,{id:"defined-in",children:"Defined in"}),"\n",(0,s.jsx)(d.p,{children:(0,s.jsx)(d.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L801",children:"models.ts:801"})}),"\n",(0,s.jsx)(d.hr,{}),"\n",(0,s.jsx)(d.h3,{id:"editor",children:"editor"}),"\n",(0,s.jsxs)(d.blockquote,{children:["\n",(0,s.jsxs)(d.p,{children:[(0,s.jsx)(d.strong,{children:"editor"}),": ",(0,s.jsx)(d.code,{children:"undefined"})," | ",(0,s.jsx)(d.code,{children:'"auto"'})," | ",(0,s.jsx)(d.code,{children:'"monaco"'})," | ",(0,s.jsx)(d.code,{children:'"codemirror"'})," | ",(0,s.jsx)(d.code,{children:'"codejar"'})]}),"\n"]}),"\n",(0,s.jsxs)(d.p,{children:["Selects the ",(0,s.jsx)(d.a,{href:"https://livecodes.io/docs/features/editor-settings#code-editor",children:"code editor"})," to use."]}),"\n",(0,s.jsxs)(d.p,{children:["If ",(0,s.jsx)(d.code,{children:"undefined"})," (the default), Monaco editor is used on desktop,\nCodeMirror is used on mobile and in ",(0,s.jsx)(d.code,{children:"simple"})," mode,\nwhile CodeJar is used in ",(0,s.jsx)(d.code,{children:"codeblock"})," mode, in ",(0,s.jsx)(d.code,{children:"lite"})," mode and in ",(0,s.jsx)(d.code,{children:"readonly"})," playgrounds."]}),"\n",(0,s.jsxs)(d.p,{children:["If set to ",(0,s.jsx)(d.code,{children:"auto"}),", Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings."]}),"\n",(0,s.jsx)(d.h4,{id:"default-1",children:"Default"}),"\n",(0,s.jsx)(d.pre,{children:(0,s.jsx)(d.code,{className:"language-ts",children:"undefined\n"})}),"\n",(0,s.jsx)(d.h4,{id:"defined-in-1",children:"Defined in"}),"\n",(0,s.jsx)(d.p,{children:(0,s.jsx)(d.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L722",children:"models.ts:722"})}),"\n",(0,s.jsx)(d.hr,{}),"\n",(0,s.jsx)(d.h3,{id:"editormode",children:"editorMode"}),"\n",(0,s.jsxs)(d.blockquote,{children:["\n",(0,s.jsxs)(d.p,{children:[(0,s.jsx)(d.strong,{children:"editorMode"}),": ",(0,s.jsx)(d.code,{children:"undefined"})," | ",(0,s.jsx)(d.code,{children:'"vim"'})," | ",(0,s.jsx)(d.code,{children:'"emacs"'})]}),"\n"]}),"\n",(0,s.jsxs)(d.p,{children:["Sets ",(0,s.jsx)(d.a,{href:"https://livecodes.io/docs/features/editor-settings#editor-modes",children:"editor mode"}),"."]}),"\n",(0,s.jsx)(d.h4,{id:"defined-in-2",children:"Defined in"}),"\n",(0,s.jsx)(d.p,{children:(0,s.jsx)(d.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L812",children:"models.ts:812"})}),"\n",(0,s.jsx)(d.hr,{}),"\n",(0,s.jsx)(d.h3,{id:"editortheme",children:"editorTheme"}),"\n",(0,s.jsxs)(d.blockquote,{children:["\n",(0,s.jsxs)(d.p,{children:[(0,s.jsx)(d.strong,{children:"editorTheme"}),": ",(0,s.jsx)(d.code,{children:"undefined"})," | ",(0,s.jsx)(d.code,{children:"string"})," | ",(0,s.jsx)(d.a,{href:"/docs/api/internal/type-aliases/EditorTheme",children:(0,s.jsx)(d.code,{children:"EditorTheme"})}),"[]"]}),"\n"]}),"\n",(0,s.jsxs)(d.p,{children:["Sets the ",(0,s.jsx)(d.a,{href:"https://livecodes.io/docs/features/editor-settings",children:"code editor"})," themes."]}),"\n",(0,s.jsxs)(d.p,{children:["See docs for ",(0,s.jsx)(d.a,{href:"https://livecodes.io/docs/configuration/configuration-object#editortheme",children:"editor themes"})," for details."]}),"\n",(0,s.jsx)(d.h4,{id:"examples",children:"Examples"}),"\n",(0,s.jsx)(d.pre,{children:(0,s.jsx)(d.code,{className:"language-ts",children:'"vs"\n'})}),"\n",(0,s.jsx)(d.pre,{children:(0,s.jsx)(d.code,{className:"language-ts",children:'"monaco:twilight, codemirror:one-dark"\n'})}),"\n",(0,s.jsx)(d.pre,{children:(0,s.jsx)(d.code,{className:"language-ts",children:'["vs@light"]\n'})}),"\n",(0,s.jsx)(d.pre,{children:(0,s.jsx)(d.code,{className:"language-ts",children:'["vs@light", "vs-dark@dark"]\n'})}),"\n",(0,s.jsx)(d.pre,{children:(0,s.jsx)(d.code,{className:"language-ts",children:'["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]\n'})}),"\n",(0,s.jsx)(d.h4,{id:"defined-in-3",children:"Defined in"}),"\n",(0,s.jsx)(d.p,{children:(0,s.jsx)(d.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L748",children:"models.ts:748"})}),"\n",(0,s.jsx)(d.hr,{}),"\n",(0,s.jsx)(d.h3,{id:"emmet",children:"emmet"}),"\n",(0,s.jsxs)(d.blockquote,{children:["\n",(0,s.jsxs)(d.p,{children:[(0,s.jsx)(d.strong,{children:"emmet"}),": ",(0,s.jsx)(d.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(d.p,{children:["Enables ",(0,s.jsx)(d.a,{href:"https://livecodes.io/docs/features/editor-settings#emmet",children:"Emmet"}),"."]}),"\n",(0,s.jsx)(d.h4,{id:"default-2",children:"Default"}),"\n",(0,s.jsx)(d.pre,{children:(0,s.jsx)(d.code,{className:"language-ts",children:"true\n"})}),"\n",(0,s.jsx)(d.h4,{id:"defined-in-4",children:"Defined in"}),"\n",(0,s.jsx)(d.p,{children:(0,s.jsx)(d.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L807",children:"models.ts:807"})}),"\n",(0,s.jsx)(d.hr,{}),"\n",(0,s.jsx)(d.h3,{id:"enableai",children:"enableAI"}),"\n",(0,s.jsxs)(d.blockquote,{children:["\n",(0,s.jsxs)(d.p,{children:[(0,s.jsx)(d.strong,{children:"enableAI"}),": ",(0,s.jsx)(d.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(d.p,{children:["If ",(0,s.jsx)(d.code,{children:"true"}),", ",(0,s.jsx)(d.a,{href:"https://livecodes.io/docs/features/ai",children:"AI code assistant"})," is enabled."]}),"\n",(0,s.jsx)(d.h4,{id:"default-3",children:"Default"}),"\n",(0,s.jsx)(d.pre,{children:(0,s.jsx)(d.code,{className:"language-ts",children:"false\n"})}),"\n",(0,s.jsx)(d.h4,{id:"defined-in-5",children:"Defined in"}),"\n",(0,s.jsx)(d.p,{children:(0,s.jsx)(d.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L818",children:"models.ts:818"})}),"\n",(0,s.jsx)(d.hr,{}),"\n",(0,s.jsx)(d.h3,{id:"foldregions",children:"foldRegions"}),"\n",(0,s.jsxs)(d.blockquote,{children:["\n",(0,s.jsxs)(d.p,{children:[(0,s.jsx)(d.strong,{children:"foldRegions"}),": ",(0,s.jsx)(d.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(d.p,{children:["When set to ",(0,s.jsx)(d.code,{children:"true"}),", regions marked by ",(0,s.jsx)(d.code,{children:"#region"})," and ",(0,s.jsx)(d.code,{children:"#endregion"})," comments are folded when the project is loaded."]}),"\n",(0,s.jsx)(d.h4,{id:"default-4",children:"Default"}),"\n",(0,s.jsx)(d.pre,{children:(0,s.jsx)(d.code,{className:"language-ts",children:"false\n"})}),"\n",(0,s.jsx)(d.h4,{id:"defined-in-6",children:"Defined in"}),"\n",(0,s.jsx)(d.p,{children:(0,s.jsx)(d.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L795",children:"models.ts:795"})}),"\n",(0,s.jsx)(d.hr,{}),"\n",(0,s.jsx)(d.h3,{id:"fontfamily",children:"fontFamily"}),"\n",(0,s.jsxs)(d.blockquote,{children:["\n",(0,s.jsxs)(d.p,{children:[(0,s.jsx)(d.strong,{children:"fontFamily"}),": ",(0,s.jsx)(d.code,{children:"undefined"})," | ",(0,s.jsx)(d.code,{children:"string"})]}),"\n"]}),"\n",(0,s.jsxs)(d.p,{children:["Sets the ",(0,s.jsx)(d.a,{href:"https://livecodes.io/docs/features/editor-settings",children:"code editor"})," font family."]}),"\n",(0,s.jsx)(d.h4,{id:"defined-in-7",children:"Defined in"}),"\n",(0,s.jsx)(d.p,{children:(0,s.jsx)(d.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L753",children:"models.ts:753"})}),"\n",(0,s.jsx)(d.hr,{}),"\n",(0,s.jsx)(d.h3,{id:"fontsize",children:"fontSize"}),"\n",(0,s.jsxs)(d.blockquote,{children:["\n",(0,s.jsxs)(d.p,{children:[(0,s.jsx)(d.strong,{children:"fontSize"}),": ",(0,s.jsx)(d.code,{children:"undefined"})," | ",(0,s.jsx)(d.code,{children:"number"})]}),"\n"]}),"\n",(0,s.jsx)(d.p,{children:"Sets the font size."}),"\n",(0,s.jsxs)(d.p,{children:["If ",(0,s.jsx)(d.code,{children:"undefined"})," (the default), the font size is set to 14 for the full app and 12 for ",(0,s.jsx)(d.a,{href:"https://livecodes.io/docs/features/embeds",children:"embeds"}),"."]}),"\n",(0,s.jsx)(d.h4,{id:"default-5",children:"Default"}),"\n",(0,s.jsx)(d.pre,{children:(0,s.jsx)(d.code,{className:"language-ts",children:"undefined\n"})}),"\n",(0,s.jsx)(d.h4,{id:"defined-in-8",children:"Defined in"}),"\n",(0,s.jsx)(d.p,{children:(0,s.jsx)(d.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L761",children:"models.ts:761"})}),"\n",(0,s.jsx)(d.hr,{}),"\n",(0,s.jsx)(d.h3,{id:"linenumbers",children:"lineNumbers"}),"\n",(0,s.jsxs)(d.blockquote,{children:["\n",(0,s.jsxs)(d.p,{children:[(0,s.jsx)(d.strong,{children:"lineNumbers"}),": ",(0,s.jsx)(d.code,{children:"boolean"})," | ",(0,s.jsx)(d.code,{children:'"relative"'})]}),"\n"]}),"\n",(0,s.jsxs)(d.p,{children:["Show line numbers in ",(0,s.jsx)(d.a,{href:"https://livecodes.io/docs/features/editor-settings",children:"code editor"}),"."]}),"\n",(0,s.jsx)(d.h4,{id:"default-6",children:"Default"}),"\n",(0,s.jsx)(d.pre,{children:(0,s.jsx)(d.code,{className:"language-ts",children:"true\n"})}),"\n",(0,s.jsx)(d.h4,{id:"defined-in-9",children:"Defined in"}),"\n",(0,s.jsx)(d.p,{children:(0,s.jsx)(d.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L783",children:"models.ts:783"})}),"\n",(0,s.jsx)(d.hr,{}),"\n",(0,s.jsx)(d.h3,{id:"tabsize",children:"tabSize"}),"\n",(0,s.jsxs)(d.blockquote,{children:["\n",(0,s.jsxs)(d.p,{children:[(0,s.jsx)(d.strong,{children:"tabSize"}),": ",(0,s.jsx)(d.code,{children:"number"})]}),"\n"]}),"\n",(0,s.jsx)(d.p,{children:"The number of spaces per indentation-level."}),"\n",(0,s.jsxs)(d.p,{children:["Also used in ",(0,s.jsx)(d.a,{href:"https://livecodes.io/docs/features/code-format",children:"code formatting"}),"."]}),"\n",(0,s.jsx)(d.h4,{id:"default-7",children:"Default"}),"\n",(0,s.jsx)(d.pre,{children:(0,s.jsx)(d.code,{className:"language-ts",children:"2\n"})}),"\n",(0,s.jsx)(d.h4,{id:"defined-in-10",children:"Defined in"}),"\n",(0,s.jsx)(d.p,{children:(0,s.jsx)(d.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L777",children:"models.ts:777"})}),"\n",(0,s.jsx)(d.hr,{}),"\n",(0,s.jsx)(d.h3,{id:"theme",children:"theme"}),"\n",(0,s.jsxs)(d.blockquote,{children:["\n",(0,s.jsxs)(d.p,{children:[(0,s.jsx)(d.strong,{children:"theme"}),": ",(0,s.jsx)(d.a,{href:"/docs/api/internal/type-aliases/Theme",children:(0,s.jsx)(d.code,{children:"Theme"})})]}),"\n"]}),"\n",(0,s.jsxs)(d.p,{children:["Sets the app ",(0,s.jsx)(d.a,{href:"https://livecodes.io/docs/features/themes",children:"theme"})," to light/dark mode."]}),"\n",(0,s.jsx)(d.h4,{id:"default-8",children:"Default"}),"\n",(0,s.jsx)(d.pre,{children:(0,s.jsx)(d.code,{className:"language-ts",children:'"dark"\n'})}),"\n",(0,s.jsx)(d.h4,{id:"defined-in-11",children:"Defined in"}),"\n",(0,s.jsx)(d.p,{children:(0,s.jsx)(d.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L728",children:"models.ts:728"})}),"\n",(0,s.jsx)(d.hr,{}),"\n",(0,s.jsx)(d.h3,{id:"themecolor",children:"themeColor"}),"\n",(0,s.jsxs)(d.blockquote,{children:["\n",(0,s.jsxs)(d.p,{children:[(0,s.jsx)(d.strong,{children:"themeColor"}),": ",(0,s.jsx)(d.code,{children:"undefined"})," | ",(0,s.jsx)(d.code,{children:"string"})]}),"\n"]}),"\n",(0,s.jsxs)(d.p,{children:["Sets the app theme color.\nIf ",(0,s.jsx)(d.code,{children:"undefined"}),", it is set to ",(0,s.jsx)(d.code,{children:'"hsl(214, 40%, 50%)"'}),"."]}),"\n",(0,s.jsx)(d.h4,{id:"default-9",children:"Default"}),"\n",(0,s.jsx)(d.pre,{children:(0,s.jsx)(d.code,{className:"language-ts",children:"undefined\n"})}),"\n",(0,s.jsx)(d.h4,{id:"defined-in-12",children:"Defined in"}),"\n",(0,s.jsx)(d.p,{children:(0,s.jsx)(d.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L735",children:"models.ts:735"})}),"\n",(0,s.jsx)(d.hr,{}),"\n",(0,s.jsx)(d.h3,{id:"usetabs",children:"useTabs"}),"\n",(0,s.jsxs)(d.blockquote,{children:["\n",(0,s.jsxs)(d.p,{children:[(0,s.jsx)(d.strong,{children:"useTabs"}),": ",(0,s.jsx)(d.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsxs)(d.p,{children:["If ",(0,s.jsx)(d.code,{children:"true"}),", lines are indented with tabs instead of spaces."]}),"\n",(0,s.jsxs)(d.p,{children:["Also used in ",(0,s.jsx)(d.a,{href:"https://livecodes.io/docs/features/code-format",children:"code formatting"}),"."]}),"\n",(0,s.jsx)(d.h4,{id:"default-10",children:"Default"}),"\n",(0,s.jsx)(d.pre,{children:(0,s.jsx)(d.code,{className:"language-ts",children:"false\n"})}),"\n",(0,s.jsx)(d.h4,{id:"defined-in-13",children:"Defined in"}),"\n",(0,s.jsx)(d.p,{children:(0,s.jsx)(d.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L769",children:"models.ts:769"})}),"\n",(0,s.jsx)(d.hr,{}),"\n",(0,s.jsx)(d.h3,{id:"wordwrap",children:"wordWrap"}),"\n",(0,s.jsxs)(d.blockquote,{children:["\n",(0,s.jsxs)(d.p,{children:[(0,s.jsx)(d.strong,{children:"wordWrap"}),": ",(0,s.jsx)(d.code,{children:"boolean"})]}),"\n"]}),"\n",(0,s.jsx)(d.p,{children:"Enables word-wrap for long lines."}),"\n",(0,s.jsx)(d.h4,{id:"default-11",children:"Default"}),"\n",(0,s.jsx)(d.pre,{children:(0,s.jsx)(d.code,{className:"language-ts",children:"false\n"})}),"\n",(0,s.jsx)(d.h4,{id:"defined-in-14",children:"Defined in"}),"\n",(0,s.jsx)(d.p,{children:(0,s.jsx)(d.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L789",children:"models.ts:789"})})]})}function a(e={}){let{wrapper:d}={...(0,l.a)(),...e.components};return d?(0,s.jsx)(d,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},65:function(e,d,n){n.d(d,{Z:function(){return c},a:function(){return r}});var i=n(7294);let s={},l=i.createContext(s);function r(e){let d=i.useContext(l);return i.useMemo(function(){return"function"==typeof e?e(d):{...d,...e}},[d,e])}function c(e){let d;return d=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(l.Provider,{value:d},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/f1f69e02.5d7baeb7.js b/docs/assets/js/f1f69e02.5d7baeb7.js new file mode 100644 index 0000000..26c560b --- /dev/null +++ b/docs/assets/js/f1f69e02.5d7baeb7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2950"],{2354:function(e,t,n){n.r(t),n.d(t,{default:()=>d,frontMatter:()=>o,metadata:()=>s,assets:()=>i,toc:()=>l,contentTitle:()=>c});var s=JSON.parse('{"id":"languages/wat","title":"WebAssembly Text","description":"TODO...","source":"@site/docs/languages/wat.mdx","sourceDirName":"languages","slug":"/languages/wat","permalink":"/docs/languages/wat","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/wat.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Vue 2 SFC","permalink":"/docs/languages/vue2"},"next":{"title":"Windi CSS","permalink":"/docs/languages/windicss"}}'),a=n("5893"),r=n("65");let o={},c="WebAssembly Text",i={},l=[];function u(e){let t={h1:"h1",header:"header",p:"p",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.header,{children:(0,a.jsx)(t.h1,{id:"webassembly-text",children:"WebAssembly Text"})}),"\n",(0,a.jsx)(t.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(u,{...e})}):u(e)}},65:function(e,t,n){n.d(t,{Z:function(){return c},a:function(){return o}});var s=n(7294);let a={},r=s.createContext(a);function o(e){let t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/f3be12ec.bcfa4f9a.js b/docs/assets/js/f3be12ec.bcfa4f9a.js new file mode 100644 index 0000000..4f8677a --- /dev/null +++ b/docs/assets/js/f3be12ec.bcfa4f9a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1210"],{7400:function(e,s,n){n.r(s),n.d(s,{default:()=>h,frontMatter:()=>d,metadata:()=>t,assets:()=>o,toc:()=>l,contentTitle:()=>c});var t=JSON.parse('{"id":"api/internal/type-aliases/WatchCode","title":"Type Alias: WatchCode()","description":"WatchCode: (event, fn) => object","source":"@site/docs/api/internal/type-aliases/WatchCode.md","sourceDirName":"api/internal/type-aliases","slug":"/api/internal/type-aliases/WatchCode","permalink":"/docs/api/internal/type-aliases/WatchCode","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/type-aliases/WatchCode.md","tags":[],"version":"current","frontMatter":{}}'),i=n("5893"),r=n("65");let d={},c="Type Alias: WatchCode()",o={},l=[{value:"Parameters",id:"parameters",level:2},{value:"Returns",id:"returns",level:2},{value:"remove()",id:"remove",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Defined in",id:"defined-in",level:2}];function a(e){let s={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",p:"p",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.header,{children:(0,i.jsx)(s.h1,{id:"type-alias-watchcode",children:"Type Alias: WatchCode()"})}),"\n",(0,i.jsxs)(s.blockquote,{children:["\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"WatchCode"}),": (",(0,i.jsx)(s.code,{children:"event"}),", ",(0,i.jsx)(s.code,{children:"fn"}),") => ",(0,i.jsx)(s.code,{children:"object"})]}),"\n"]}),"\n",(0,i.jsxs)(s.p,{children:['Called when the playground "content" is changed (see ',(0,i.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/js-ts#getcode",children:(0,i.jsx)(s.code,{children:"getCode"})})," and ",(0,i.jsx)(s.a,{href:"https://livecodes.io/docs/sdk/js-ts#getcode",children:(0,i.jsx)(s.code,{children:"getConfig"})}),")."]}),"\n",(0,i.jsx)(s.p,{children:"This includes changes in:"}),"\n",(0,i.jsxs)(s.ul,{children:["\n",(0,i.jsx)(s.li,{children:"Code (in editors)"}),"\n",(0,i.jsxs)(s.li,{children:["Editor ",(0,i.jsx)(s.a,{href:"https://livecodes.io/docs/languages/",children:"languages"})]}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://livecodes.io/docs/features/css#css-processors",children:"CSS processors"})}),"\n",(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://livecodes.io/docs/features/external-resources",children:"External resources"})}),"\n",(0,i.jsxs)(s.li,{children:["Project info (e.g. allows adding content in page head and attributes to ",(0,i.jsx)(s.code,{children:""})," element)"]}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.a,{href:"https://livecodes.io/docs/advanced/custom-settings",children:"Custom settings"})," (e.g. allows changing ",(0,i.jsx)(s.a,{href:"https://livecodes.io/docs/features/module-resolution#custom-module-resolution",children:"import maps"}),")"]}),"\n",(0,i.jsx)(s.li,{children:"Project title"}),"\n",(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.a,{href:"https://livecodes.io/docs/features/tests",children:"Test"})," code"]}),"\n"]}),"\n",(0,i.jsx)(s.h2,{id:"parameters",children:"Parameters"}),"\n",(0,i.jsxs)(s.p,{children:["\u2022 ",(0,i.jsx)(s.strong,{children:"event"}),": ",(0,i.jsx)(s.code,{children:'"code"'})]}),"\n",(0,i.jsxs)(s.p,{children:["\u2022 ",(0,i.jsx)(s.strong,{children:"fn"})]}),"\n",(0,i.jsx)(s.h2,{id:"returns",children:"Returns"}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.code,{children:"object"})}),"\n",(0,i.jsx)(s.h3,{id:"remove",children:"remove()"}),"\n",(0,i.jsxs)(s.blockquote,{children:["\n",(0,i.jsxs)(s.p,{children:[(0,i.jsx)(s.strong,{children:"remove"}),": () => ",(0,i.jsx)(s.code,{children:"void"})]}),"\n"]}),"\n",(0,i.jsx)(s.h4,{id:"returns-1",children:"Returns"}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.code,{children:"void"})}),"\n",(0,i.jsx)(s.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,i.jsx)(s.p,{children:(0,i.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L248",children:"models.ts:248"})})]})}function h(e={}){let{wrapper:s}={...(0,r.a)(),...e.components};return s?(0,i.jsx)(s,{...e,children:(0,i.jsx)(a,{...e})}):a(e)}},65:function(e,s,n){n.d(s,{Z:function(){return c},a:function(){return d}});var t=n(7294);let i={},r=t.createContext(i);function d(e){let s=t.useContext(r);return t.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function c(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:d(e.components),t.createElement(r.Provider,{value:s},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/f439a60e.85c9c331.js b/docs/assets/js/f439a60e.85c9c331.js new file mode 100644 index 0000000..bc1e5e5 --- /dev/null +++ b/docs/assets/js/f439a60e.85c9c331.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9636"],{1941:function(e,t,n){n.r(t),n.d(t,{config:()=>c,config2:()=>u,default:()=>g,frontMatter:()=>o,metadata:()=>s,assets:()=>d,params:()=>h,toc:()=>p,contentTitle:()=>l});var s=JSON.parse('{"id":"languages/eta","title":"Eta","description":"Eta is an embedded JS template engine for Node, Deno, and the browser. Lighweight, fast, and pluggable. Written in TypeScript.","source":"@site/docs/languages/eta.mdx","sourceDirName":"languages","slug":"/languages/eta","permalink":"/docs/languages/eta","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/eta.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"EJS","permalink":"/docs/languages/ejs"},"next":{"title":"Fennel","permalink":"/docs/languages/fennel"}}'),r=n("5893"),i=n("65"),a=n("3365");let o={},l="Eta",d={},c={markup:{language:"eta",content:"Hello <%= it.name %>!"},customSettings:{template:{data:{name:"LiveCodes"}}}},h={compiled:"open"},u={markup:{language:"eta",content:"Hello <%= it.name %>!"},script:{language:"javascript",content:'window.livecodes.templateData = { name: "LiveCodes" };'},customSettings:{template:{prerender:!1}},activeEditor:"script"},p=[{value:"Usage",id:"usage",level:2},{value:"Pre-rendered (Default)",id:"pre-rendered-default",level:3},{value:"Dynamic",id:"dynamic",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Pre-rendered",id:"pre-rendered",level:3},{value:"Dynamic",id:"dynamic-1",level:3},{value:"Links",id:"links",level:2}];function m(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"eta",children:"Eta"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://eta.js.org/",children:"Eta"})," is an embedded JS template engine for Node, Deno, and the browser. Lighweight, fast, and pluggable. Written in TypeScript."]}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.p,{children:"There are 2 modes for rendering:"}),"\n",(0,r.jsx)(t.h3,{id:"pre-rendered-default",children:"Pre-rendered (Default)"}),"\n",(0,r.jsxs)(t.p,{children:["The values of the expressions are evaluated and added to the template during compilation of the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["The values of all expressions should be supplied in advance using ",(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," to the property ",(0,r.jsx)(t.code,{children:"template.data"})," which accepts an object of key-value pairs."]}),"\n",(0,r.jsxs)(t.p,{children:["Example: This provides the value of the expression ",(0,r.jsx)(t.code,{children:"name"})]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "data": {\n "name": "LiveCodes"\n }\n }\n}\n'})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"#pre-rendered",children:"Full example below"})}),"\n",(0,r.jsx)(t.h3,{id:"dynamic",children:"Dynamic"}),"\n",(0,r.jsxs)(t.p,{children:["To use this mode, the property ",(0,r.jsx)(t.code,{children:"template.prerender"})," in ",(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," should be set to ",(0,r.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "template": {\n "prerender": false\n }\n}\n'})}),"\n",(0,r.jsxs)(t.p,{children:["In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the ",(0,r.jsx)(t.a,{href:"/docs/features/result",children:"result page"})," runtime."]}),"\n",(0,r.jsxs)(t.p,{children:["This can be achieved in JavaScript (or any ",(0,r.jsx)(t.a,{href:"/docs/languages/",children:"language"})," that compiles to it) by assigning ",(0,r.jsx)(t.code,{children:"window.livecodes.templateData"})," to an object with the data."]}),"\n",(0,r.jsxs)(t.p,{children:["Please note that template rendering occurs on ",(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event",children:"page load"}),", so the assignment must occur before that."]}),"\n",(0,r.jsx)(t.p,{children:"Example:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-js",metastring:'title="Script Editor (JS)"',children:"window.livecodes.templateData = { name: 'LiveCodes' };\n"})}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"#dynamic-1",children:"Full example below"})}),"\n",(0,r.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"eta"})}),"\n",(0,r.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:".eta"})}),"\n",(0,r.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"markup"})}),"\n",(0,r.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsxs)(t.p,{children:["The official ",(0,r.jsx)(t.a,{href:"https://www.npmjs.com/package/eta",children:"Eta compiler"}),"."]}),"\n",(0,r.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"eta"}),": v3.4.0"]}),"\n",(0,r.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsxs)(t.p,{children:["Using ",(0,r.jsx)(t.a,{href:"https://prettier.io/",children:"Prettier"}),"."]}),"\n",(0,r.jsx)(t.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,r.jsx)(t.code,{children:"eta"})," are passed as a JSON object to the ",(0,r.jsx)(t.a,{href:"https://eta.js.org/docs/api/rendering",children:(0,r.jsx)(t.code,{children:"Eta.render"})})," method during compile. Please check the ",(0,r.jsx)(t.a,{href:"https://eta.js.org/docs/api/configuration",children:"documentation"})," for full reference."]}),"\n",(0,r.jsx)(t.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Example:"})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "eta": {\n "varName": "data"\n }\n}\n'})}),"\n",(0,r.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n",(0,r.jsx)(t.h3,{id:"pre-rendered",children:"Pre-rendered"}),"\n","\n","\n",(0,r.jsx)(a.Z,{config:c,params:h}),"\n",(0,r.jsx)(t.h3,{id:"dynamic-1",children:"Dynamic"}),"\n","\n",(0,r.jsx)(a.Z,{config:u}),"\n",(0,r.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://eta.js.org/",children:"Official website"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://eta.js.org/docs/learn",children:"Documentation"})}),"\n"]})]})}function g(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},3365:function(e,t,n){n.d(t,{Z:()=>f});var s=n("5893"),r=n("4200"),i=n("7294"),a=n("8294");function o(e){let t=(0,i.useRef)(null),[n,r]=(0,i.useState)(e.className||""),[o,l]=(0,i.useState)(e.style||{}),[d,c]=(0,i.useState)(e.height),[h,u]=(0,i.useState)(),[p,m]=(0,i.useState)(JSON.stringify(e.config||"")),[g,f]=(0,i.useState)("");return(0,i.useEffect)(()=>{if(!t.current)return;let{className:n,style:s,height:i,sdkReady:o,config:d,...v}=e;if(r(n||""),l(s||{}),c(i),h&&g===JSON.stringify(v)){if(p===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(v)),h?.destroy(),(0,a.T)(t.current,{config:d,...v}).then(e=>{u(e),"function"==typeof o&&o(e)})},[e]),(0,i.useEffect)(()=>()=>{h?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:n,style:o,"data-height":d})}var l=n("1858"),d=n("3262"),c=n("1705"),h=n("7645"),u=n("8168"),p=n("8228"),m=n("5050");function g(e){let[t,n]=(0,i.useState)(e.js),[r,a]=(0,i.useState)(e.ts),[o,l]=(0,i.useState)(e.react),[g,f]=(0,i.useState)(e.vue),[v,j]=(0,i.useState)(e.svelte),x="3.7rem",[y,w]=(0,i.useState)(!0),[b,S]=(0,i.useState)(x),E=(0,i.useRef)(null),C=()=>{setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${x})`)},5),setTimeout(()=>{S(`calc(${E.current.offsetHeight}px + ${x})`)},255)};return(0,i.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};n(e(t,"js")),a(e(r,"ts")),l(e(o,"jsx")),f(e(g,"html")),j(e(v,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":y,style:{height:y?x:b,overflow:"hidden",willChange:"height",transition:`height ${y?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{w(!y),C()},children:"show code"}),(0,s.jsx)("div",{ref:E,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:m.Z.collapsibleContent,children:(0,s.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,s.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"js",children:t})}),(0,s.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"ts",children:r})}),(0,s.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"jsx",children:o})}),(0,s.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"html",children:g})}),(0,s.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:C},children:(0,s.jsx)(c.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:n,showCode:i,height:a,...d}=e,{colorMode:c}=(0,r.I)(),h=e=>JSON.stringify(e,null,2),u=` +import { createPlayground } from 'livecodes'; + +const options = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(d)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(d)}; + return (); +} + +`.trimStart(),f=` + + + +`,v=` + + +
+ +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(o,{className:`container_Egsj ${e.className}`,style:{height:a||"50vh",...e.style},appUrl:l.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(g,{js:u,ts:p,react:m,vue:f,svelte:v})]})}},8294:function(e,t,n){n.d(t,{T:function(){return r},r:function(){return i}});var s=n(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:s,loading:r="lazy",view:a}=t,o=s||"headless"===a,l=null,d=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(o&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(o)C(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(i(t)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",o?"eager":r);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&c.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!o){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||o||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let s="livecodes",i=l.querySelector(`iframe.${s}`),a=i||document.createElement("iframe");a.classList.add(s),a.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),a.setAttribute("allowtransparency","true"),a.setAttribute("allowpaymentrequest","true"),a.setAttribute("allowfullscreen","true"),a.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),a.setAttribute("loading","eager"===r?"eager":"lazy"),o?C(a):(a.style.height="100%",a.style.minHeight="200px",a.style.width="100%",a.style.margin="0",a.style.border="0",a.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===a.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(t){t.source===a.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),a.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),a.onload=()=>{e(a)},a.src=c.href,i||l.appendChild(a)}),v=new Promise(e=>{addEventListener("message",function t(n){n.source===f.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),j=()=>m?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),x=(e,t)=>new Promise(async(n,s)=>{if(m)return s(g);await j();let r=P();addEventListener("message",function t(i){if(i.source===f.contentWindow&&i.origin===h&&i.data?.type==="livecodes-api-response"&&i.data?.id===r&&i.data.method===e){removeEventListener("message",t);let e=i.data.payload;e?.error?s(e.error):n(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},h)}),y={},w=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(m)throw Error(g);return w.includes(e)?(x("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&x("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!y[t])return;let n=e.data?.payload;y[t]?.forEach(e=>{e(n)})});let E=()=>{Object.values(y).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let P=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>x("run"),format:e=>x("format",[e]),getShareUrl:e=>x("getShareUrl",[e]),getConfig:e=>x("getConfig",[e]),setConfig:e=>x("setConfig",[e]),getCode:()=>x("getCode"),show:(e,t)=>x("show",[e,t]),runTests:()=>x("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;sv.settled?x("destroy").then(E):m?Promise.reject(g):(E(),Promise.resolve())}}function i(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:r={},config:i={},headless:a,import:o,lite:l,view:d,...c}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let u="headless"===t.view||a;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof i&&null==i.mode?i.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof i&&null==i.view&&"headless"!==d?i.view=d:e.searchParams.set("view",d)),"string"==typeof i)try{new URL(i),e.searchParams.set("config",encodeURIComponent(i))}catch{throw Error('"config" is not a valid URL or configuration object.')}else i&&"object"==typeof i&&Object.keys(i).length>0&&(i.title&&"Untitled Project"!==i.title&&e.searchParams.set("title",i.title),i.description&&i.description.length>0&&e.searchParams.set("description",i.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(i))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return o&&e.searchParams.set("x",encodeURIComponent(o)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return o},a:function(){return a}});var s=n(7294);let r={},i=s.createContext(r);function a(e){let t=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/f47bf993.75090490.js b/docs/assets/js/f47bf993.75090490.js new file mode 100644 index 0000000..753ba67 --- /dev/null +++ b/docs/assets/js/f47bf993.75090490.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6202"],{9516:function(e,t,o){o.r(t),o.d(t,{default:()=>h,frontMatter:()=>d,metadata:()=>n,assets:()=>r,toc:()=>c,contentTitle:()=>s});var n=JSON.parse('{"id":"features/code-to-image","title":"Code to Image","description":"LiveCodes has a feature called \\"Code to Image\\" that allows converting the code in the code editor into nice-looking images (or code screenshots), that can be downloaded or shared.","source":"@site/docs/features/code-to-image.mdx","sourceDirName":"features","slug":"/features/code-to-image","permalink":"/docs/features/code-to-image","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/code-to-image.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Recover Unsaved","permalink":"/docs/features/recover"},"next":{"title":"Display Modes","permalink":"/docs/features/display-modes"}}'),a=o("5893"),i=o("65");let d={},s="Code to Image",r={},c=[];function l(e){let t={h1:"h1",header:"header",img:"img",p:"p",...(0,i.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.header,{children:(0,a.jsx)(t.h1,{id:"code-to-image",children:"Code to Image"})}),"\n",(0,a.jsx)(t.p,{children:'LiveCodes has a feature called "Code to Image" that allows converting the code in the code editor into nice-looking images (or code screenshots), that can be downloaded or shared.'}),"\n",(0,a.jsx)(t.p,{children:'This can be accessed from the camera icon in the toolbar below the editor. Clicking the icon will open the "Code to Image" screen and load the code in the editor.'}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"Code to Image",src:o(4288).Z+"",width:"2240",height:"1400"})}),"\n",(0,a.jsx)(t.p,{children:'Code can be modified in the "Code to Image" screen and then downloaded as image or shared.'}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"Code to Image",src:o(4124).Z+"",width:"2240",height:"1400"})}),"\n",(0,a.jsx)(t.p,{children:"There are many options to configure the image to be generated, including background color, border radius, image size, padding, shadow, window style, share URL, editor theme, opacity, code font, image format, etc."}),"\n",(0,a.jsx)(t.p,{children:"There are multiple presets that can be used or the options can be manually configured."}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"Code to Image",src:o(1796).Z+"",width:"2240",height:"1400"})}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"Code to Image",src:o(4668).Z+"",width:"2240",height:"1400"})}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"Code to Image",src:o(7549).Z+"",width:"2240",height:"1400"})}),"\n",(0,a.jsx)(t.p,{children:(0,a.jsx)(t.img,{alt:"Code to Image",src:o(6050).Z+"",width:"2240",height:"1400"})})]})}function h(e={}){let{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(l,{...e})}):l(e)}},4288:function(e,t,o){o.d(t,{Z:function(){return n}});let n=o.p+"assets/images/code-to-image-1-84eb108f3d1ad47e3513918095d99939.jpg"},4124:function(e,t,o){o.d(t,{Z:function(){return n}});let n=o.p+"assets/images/code-to-image-2-4b27b60f3f469687239f81b89173133f.jpg"},1796:function(e,t,o){o.d(t,{Z:function(){return n}});let n=o.p+"assets/images/code-to-image-3-fcbfd59e92db9c5bfa8eb5e01575a2b4.jpg"},4668:function(e,t,o){o.d(t,{Z:function(){return n}});let n=o.p+"assets/images/code-to-image-4-6f6a13131eb1f8d7240daff5a5fac1e6.jpg"},7549:function(e,t,o){o.d(t,{Z:function(){return n}});let n=o.p+"assets/images/code-to-image-5-a2e4b5939711203f3a10468909e730d6.jpg"},6050:function(e,t,o){o.d(t,{Z:function(){return n}});let n=o.p+"assets/images/code-to-image-6-2fbdf9db8047fea6de68db6804dbf96e.jpg"},65:function(e,t,o){o.d(t,{Z:function(){return s},a:function(){return d}});var n=o(7294);let a={},i=n.createContext(a);function d(e){let t=n.useContext(i);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:d(e.components),n.createElement(i.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/f54598d4.8a76d875.js b/docs/assets/js/f54598d4.8a76d875.js new file mode 100644 index 0000000..820de4f --- /dev/null +++ b/docs/assets/js/f54598d4.8a76d875.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6395"],{531:function(e,r,t){t.r(r),t.d(r,{default:()=>h,frontMatter:()=>i,metadata:()=>n,assets:()=>l,toc:()=>d,contentTitle:()=>c});var n=JSON.parse('{"id":"features/export","title":"Export","description":"Exporting A Single Project","source":"@site/docs/features/export.mdx","sourceDirName":"features","slug":"/features/export","permalink":"/docs/features/export","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/export.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Import","permalink":"/docs/features/import"},"next":{"title":"Share","permalink":"/docs/features/share"}}'),s=t("5893"),o=t("65");let i={},c="Export",l={},d=[{value:"Exporting A Single Project",id:"exporting-a-single-project",level:2},{value:"Exporting Multiple Projects",id:"exporting-multiple-projects",level:2},{value:"Related",id:"related",level:2}];function a(e){let r={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(r.header,{children:(0,s.jsx)(r.h1,{id:"export",children:"Export"})}),"\n",(0,s.jsx)(r.h2,{id:"exporting-a-single-project",children:"Exporting A Single Project"}),"\n",(0,s.jsx)(r.p,{children:"Project export can be accessed from the Project menu \u2192 Export."}),"\n",(0,s.jsx)(r.p,{children:(0,s.jsx)(r.img,{alt:"LiveCodes Export",src:t(7013).Z+"",width:"2240",height:"1400"})}),"\n",(0,s.jsx)(r.p,{children:"Any project can be exported to:"}),"\n",(0,s.jsxs)(r.ul,{children:["\n",(0,s.jsxs)(r.li,{children:["\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.strong,{children:"Project (JSON):"})," a JSON file containing project ",(0,s.jsx)(r.a,{href:"/docs/configuration/configuration-object",children:"configuration object"}),". This can be used to later ",(0,s.jsx)(r.a,{href:"/docs/features/import#import-exported-livecodes-projects",children:"import"})," that project on the same or a different device or to share a copy of the project with others."]}),"\n"]}),"\n",(0,s.jsxs)(r.li,{children:["\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.strong,{children:"Source (ZIP):"})," a zip file containing the project configuration file as JSON, in addition to the source code in separate files. This can be useful for opening the code in an external IDE."]}),"\n"]}),"\n",(0,s.jsxs)(r.li,{children:["\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.strong,{children:"Result (HTML):"})," ",(0,s.jsx)(r.a,{href:"/docs/features/result",children:"result page"})," as a single html file. Can be used for the purpose of demo or deploy."]}),"\n"]}),"\n",(0,s.jsxs)(r.li,{children:["\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.strong,{children:"GitHub gist"})," (",(0,s.jsxs)(r.em,{children:["requires login with ",(0,s.jsx)(r.a,{href:"/docs/features/github-integration",children:"GitHub account"})]}),"): creates a ",(0,s.jsx)(r.strong,{children:"public"})," GitHub gist on the user's GitHub account containing the source code as separate files."]}),"\n"]}),"\n",(0,s.jsxs)(r.li,{children:["\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.strong,{children:"CodePen:"})," creates a ",(0,s.jsx)(r.a,{href:"https://codepen.io/",children:"CodePen"})," prefilled with the project code. If the used ",(0,s.jsx)(r.a,{href:"/docs/languages/",children:"languages/frameworks"})," are not supported in CodePen (e.g. Astro, Svelte, Python, ...etc), the compiled code is exported so that it continues to work there. ",(0,s.jsx)(r.a,{href:"/docs/features/module-resolution",children:"Bare module imports"})," are converted to esm imports, for example:"]}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-js"})}),"\n",(0,s.jsx)(r.p,{children:"becomes:"}),"\n",(0,s.jsx)(r.pre,{children:(0,s.jsx)(r.code,{className:"language-js",children:"import React from 'https://cdn.skypack.dev/react';\n"})}),"\n"]}),"\n",(0,s.jsxs)(r.li,{children:["\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.strong,{children:"JSFiddle:"})," creates a ",(0,s.jsx)(r.a,{href:"https://jsfiddle.net/",children:"JSFiddle"})," prefilled with the project code. Exported code may be modified like with CodePen (see above)."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(r.h2,{id:"exporting-multiple-projects",children:"Exporting Multiple Projects"}),"\n",(0,s.jsxs)(r.p,{children:["Multiple projects can be exported in bulk from the ",(0,s.jsx)(r.a,{href:"/docs/features/projects",children:"Saved Projects"})," screen (Project menu \u2192 Open) using the button ",(0,s.jsx)(r.code,{children:"Export All"}),"."]}),"\n",(0,s.jsx)(r.p,{children:(0,s.jsx)(r.img,{alt:"saved projects",src:t(6360).Z+"",width:"2240",height:"1400"})}),"\n",(0,s.jsxs)(r.p,{children:["This produces a JSON file containing an array of project configuration objects. They can be later imported in the same or a different device using the ",(0,s.jsx)(r.code,{children:"Bulk Import"})," functionality in the ",(0,s.jsx)(r.a,{href:"/docs/features/import#import-exported-livecodes-projects",children:"Import screen"}),"."]}),"\n",(0,s.jsx)(r.p,{children:"All the currently visible projects will be exported. If projects are filtered (e.g. by language, tag or search query), only the shown projects are exported."}),"\n",(0,s.jsx)(r.h2,{id:"related",children:"Related"}),"\n",(0,s.jsxs)(r.ul,{children:["\n",(0,s.jsx)(r.li,{children:(0,s.jsx)(r.a,{href:"/docs/features/projects",children:"Projects"})}),"\n",(0,s.jsx)(r.li,{children:(0,s.jsx)(r.a,{href:"/docs/features/import",children:"Import"})}),"\n",(0,s.jsx)(r.li,{children:(0,s.jsx)(r.a,{href:"/docs/features/backup-restore",children:"Backup/Restore"})}),"\n",(0,s.jsx)(r.li,{children:(0,s.jsx)(r.a,{href:"/docs/features/sync",children:"Sync"})}),"\n",(0,s.jsx)(r.li,{children:(0,s.jsx)(r.a,{href:"/docs/features/share",children:"Share"})}),"\n"]})]})}function h(e={}){let{wrapper:r}={...(0,o.a)(),...e.components};return r?(0,s.jsx)(r,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},7013:function(e,r,t){t.d(r,{Z:function(){return n}});let n=t.p+"assets/images/export-1-242db411ba39b47325d40698ba5a146c.jpg"},6360:function(e,r,t){t.d(r,{Z:function(){return n}});let n=t.p+"assets/images/export-2-3fa7b6dcd7e853a988e95730893ee356.jpg"},65:function(e,r,t){t.d(r,{Z:function(){return c},a:function(){return i}});var n=t(7294);let s={},o=n.createContext(s);function i(e){let r=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(r):{...r,...e}},[r,e])}function c(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),n.createElement(o.Provider,{value:r},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/f5d64ffd.61ef0ea8.js b/docs/assets/js/f5d64ffd.61ef0ea8.js new file mode 100644 index 0000000..dd09d59 --- /dev/null +++ b/docs/assets/js/f5d64ffd.61ef0ea8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5670"],{1855:function(e,o,r){r.r(o),r.d(o,{default:()=>h,frontMatter:()=>n,metadata:()=>c,assets:()=>s,toc:()=>a,contentTitle:()=>t});var c=JSON.parse('{"id":"api/internal/type-aliases/CodemirrorTheme","title":"Type Alias: CodemirrorTheme","description":"CodemirrorTheme: \\"amy\\" \\\\| \\"aura\\" \\\\| \\"ayu-light\\" \\\\| \\"barf\\" \\\\| \\"basic-light\\" \\\\| \\"basic-dark\\" \\\\| \\"bespin\\" \\\\| \\"birds-of-paradise\\" \\\\| \\"boys-and-girls\\" \\\\| \\"catppuccin-latte\\" \\\\| \\"catppuccin-frappe\\" \\\\| \\"catppuccin-macchiato\\" \\\\| \\"catppuccin-mocha\\" \\\\| \\"clouds\\" \\\\| \\"cm-light\\" \\\\| \\"cobalt\\" \\\\| \\"cool-glow\\" \\\\| \\"dracula\\" \\\\| \\"espresso\\" \\\\| \\"github-dark\\" \\\\| \\"github-light\\" \\\\| \\"gruvbox-dark\\" \\\\| \\"gruvbox-light\\" \\\\| \\"material-dark\\" \\\\| \\"material-light\\" \\\\| \\"monochrome\\" \\\\| \\"monochrome-dark\\" \\\\| \\"noctis-lilac\\" \\\\| \\"nord\\" \\\\| \\"one-dark\\" \\\\| \\"rose-pine-dawn\\" \\\\| \\"smoothy\\" \\\\| \\"solarized-light\\" \\\\| \\"solarized-dark\\" \\\\| \\"tokyo-night\\" \\\\| \\"tokyo-night-day\\" \\\\| \\"tokyo-night-storm\\" \\\\| \\"tomorrow\\"","source":"@site/docs/api/internal/type-aliases/CodemirrorTheme.md","sourceDirName":"api/internal/type-aliases","slug":"/api/internal/type-aliases/CodemirrorTheme","permalink":"/docs/api/internal/type-aliases/CodemirrorTheme","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/type-aliases/CodemirrorTheme.md","tags":[],"version":"current","frontMatter":{}}'),i=r("5893"),d=r("65");let n={},t="Type Alias: CodemirrorTheme",s={},a=[{value:"Defined in",id:"defined-in",level:2}];function l(e){let o={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",strong:"strong",...(0,d.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(o.header,{children:(0,i.jsx)(o.h1,{id:"type-alias-codemirrortheme",children:"Type Alias: CodemirrorTheme"})}),"\n",(0,i.jsxs)(o.blockquote,{children:["\n",(0,i.jsxs)(o.p,{children:[(0,i.jsx)(o.strong,{children:"CodemirrorTheme"}),": ",(0,i.jsx)(o.code,{children:'"amy"'})," | ",(0,i.jsx)(o.code,{children:'"aura"'})," | ",(0,i.jsx)(o.code,{children:'"ayu-light"'})," | ",(0,i.jsx)(o.code,{children:'"barf"'})," | ",(0,i.jsx)(o.code,{children:'"basic-light"'})," | ",(0,i.jsx)(o.code,{children:'"basic-dark"'})," | ",(0,i.jsx)(o.code,{children:'"bespin"'})," | ",(0,i.jsx)(o.code,{children:'"birds-of-paradise"'})," | ",(0,i.jsx)(o.code,{children:'"boys-and-girls"'})," | ",(0,i.jsx)(o.code,{children:'"catppuccin-latte"'})," | ",(0,i.jsx)(o.code,{children:'"catppuccin-frappe"'})," | ",(0,i.jsx)(o.code,{children:'"catppuccin-macchiato"'})," | ",(0,i.jsx)(o.code,{children:'"catppuccin-mocha"'})," | ",(0,i.jsx)(o.code,{children:'"clouds"'})," | ",(0,i.jsx)(o.code,{children:'"cm-light"'})," | ",(0,i.jsx)(o.code,{children:'"cobalt"'})," | ",(0,i.jsx)(o.code,{children:'"cool-glow"'})," | ",(0,i.jsx)(o.code,{children:'"dracula"'})," | ",(0,i.jsx)(o.code,{children:'"espresso"'})," | ",(0,i.jsx)(o.code,{children:'"github-dark"'})," | ",(0,i.jsx)(o.code,{children:'"github-light"'})," | ",(0,i.jsx)(o.code,{children:'"gruvbox-dark"'})," | ",(0,i.jsx)(o.code,{children:'"gruvbox-light"'})," | ",(0,i.jsx)(o.code,{children:'"material-dark"'})," | ",(0,i.jsx)(o.code,{children:'"material-light"'})," | ",(0,i.jsx)(o.code,{children:'"monochrome"'})," | ",(0,i.jsx)(o.code,{children:'"monochrome-dark"'})," | ",(0,i.jsx)(o.code,{children:'"noctis-lilac"'})," | ",(0,i.jsx)(o.code,{children:'"nord"'})," | ",(0,i.jsx)(o.code,{children:'"one-dark"'})," | ",(0,i.jsx)(o.code,{children:'"rose-pine-dawn"'})," | ",(0,i.jsx)(o.code,{children:'"smoothy"'})," | ",(0,i.jsx)(o.code,{children:'"solarized-light"'})," | ",(0,i.jsx)(o.code,{children:'"solarized-dark"'})," | ",(0,i.jsx)(o.code,{children:'"tokyo-night"'})," | ",(0,i.jsx)(o.code,{children:'"tokyo-night-day"'})," | ",(0,i.jsx)(o.code,{children:'"tokyo-night-storm"'})," | ",(0,i.jsx)(o.code,{children:'"tomorrow"'})]}),"\n"]}),"\n",(0,i.jsx)(o.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,i.jsx)(o.p,{children:(0,i.jsx)(o.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1647",children:"models.ts:1647"})})]})}function h(e={}){let{wrapper:o}={...(0,d.a)(),...e.components};return o?(0,i.jsx)(o,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},65:function(e,o,r){r.d(o,{Z:function(){return t},a:function(){return n}});var c=r(7294);let i={},d=c.createContext(i);function n(e){let o=c.useContext(d);return c.useMemo(function(){return"function"==typeof e?e(o):{...o,...e}},[o,e])}function t(e){let o;return o=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:n(e.components),c.createElement(d.Provider,{value:o},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/f71e509b.ac749ccf.js b/docs/assets/js/f71e509b.ac749ccf.js new file mode 100644 index 0000000..5622205 --- /dev/null +++ b/docs/assets/js/f71e509b.ac749ccf.js @@ -0,0 +1,52 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6083"],{9662:function(e,t,n){n.r(t),n.d(t,{stdlibConfig:()=>d,default:()=>g,externalsConfig:()=>h,frontMatter:()=>l,metadata:()=>s,assets:()=>c,npmConfig:()=>m,toc:()=>p,contentTitle:()=>a});var s=JSON.parse('{"id":"languages/gleam","title":"Gleam","description":"Gleam is a friendly language for building type-safe systems that scale!","source":"@site/docs/languages/gleam.mdx","sourceDirName":"languages","slug":"/languages/gleam","permalink":"/docs/languages/gleam","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/gleam.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Flow","permalink":"/docs/languages/flow"},"next":{"title":"Go (Golang)","permalink":"/docs/languages/go"}}'),i=n("5893"),o=n("65"),r=n("3365");let l={},a="Gleam",c={},d={activeEditor:"script",script:{language:"gleam",content:`import gleam/io +import gleam/string + +pub fn main() { + "hello world!" + |> string.uppercase + |> io.println +}`},tools:{status:"open"}},h={activeEditor:"script",script:{language:"gleam",content:'import gleam/io\n\n@external(javascript, "my_pkg/greet.js", "hello")\npub fn hello(str: String) -> String\n\npub fn main() {\n io.println(hello("from JavaScript"))\n}'},tools:{status:"open"},customSettings:{imports:{"my_pkg/greet.js":"https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/demo/greet.js"}}},m={activeEditor:"script",script:{language:"gleam",content:'import gleam/io\n\n// npm module (https://www.npmjs.com/package/uuid)\n@external(javascript, "npm:uuid", "v4")\npub fn uuid() -> String\n\n// jsr module (https://jsr.io/@kwhinnery/yassify)\n@external(javascript, "jsr:@kwhinnery/yassify", "yassify")\npub fn yassify(str: String) -> String\n\npub fn main() {\n io.println(uuid())\n io.println(yassify("Hello, World!"))\n}\n'},tools:{status:"open"}},p=[{value:"Usage",id:"usage",level:2},{value:"Standard Library",id:"standard-library",level:3},{value:"Custom Modules",id:"custom-modules",level:3},{value:"Externals",id:"externals",level:3},{value:"NPM Modules",id:"npm-modules",level:3},{value:"Example Usage",id:"example-usage",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function u(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"gleam",children:"Gleam"})}),"\n","\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://gleam.run",children:"Gleam"})," is a friendly language for building type-safe systems that scale!"]}),"\n",(0,i.jsx)(t.p,{children:"Gleam is a statically-typed functional programming language, which compiles to Erlang or JavaScript."}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsxs)(t.p,{children:["LiveCodes compiles Gleam code to JavaScript using the WebAssembly (wasm) version of the ",(0,i.jsx)(t.a,{href:"https://github.com/gleam-lang/gleam",children:"official Gleam compiler"}),". The compiled JavaScript code is then executed in the context of the ",(0,i.jsx)(t.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,i.jsxs)(t.p,{children:["The compiled JavaScript code can be inspected in the ",(0,i.jsx)(t.a,{href:"/docs/features/compiled-code",children:"Compiled Code Viewer"})," in the ",(0,i.jsx)(t.a,{href:"/docs/features/tools-pane",children:"Tools Pane"})," (below the result page). Console output is shown in the ",(0,i.jsx)(t.a,{href:"/docs/features/console",children:"integrated console"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Please note that the compiler messages (e.g. errors and warnings) are shown in the browser console (not the integrated console)."}),"\n",(0,i.jsx)(t.h3,{id:"standard-library",children:"Standard Library"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://hexdocs.pm/gleam_stdlib/",children:"Gleam's standard library"})," in addition to the following packages are available for use and can be imported as usual with no additional configuration:"]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://hexdocs.pm/gleam_crypto/",children:"gleam/crypto"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://hexdocs.pm/gleam_erlang/",children:"gleam/erlang"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://hexdocs.pm/gleam_fetch/",children:"gleam/fetch"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://hexdocs.pm/gleam_http/",children:"gleam/http"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://hexdocs.pm/gleam_javascript/",children:"gleam/javascript"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://hexdocs.pm/gleam_json/",children:"gleam/json"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://hexdocs.pm/gleam_otp/",children:"gleam/otp"})}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Demo:"}),"\n","\n",(0,i.jsx)(r.Z,{config:d}),"\n",(0,i.jsx)(t.h3,{id:"custom-modules",children:"Custom Modules"}),"\n",(0,i.jsx)(t.p,{children:"Custom modules can be used in Gleam code. These modules have to be precompiled (to JavaScript) by the Gleam compiler. URLs to the compiled JavaScript code and either the Gleam source code or URLs to the Gleam source code are needed to be able to import custom modules."}),"\n",(0,i.jsxs)(t.p,{children:["This is an example for a repo with precompiled Gleam modules:\n",(0,i.jsx)(t.a,{href:"https://github.com/live-codes/gleam-precompiled",children:"https://github.com/live-codes/gleam-precompiled"})]}),"\n",(0,i.jsxs)(t.p,{children:["Please refer to ",(0,i.jsx)(t.a,{href:"https://gleam.run/writing-gleam/command-line-reference/",children:"Gleam CLI docs"})," for details about adding and building packages."]}),"\n",(0,i.jsxs)(t.p,{children:["Note that the built code was committed to the repo by clearing out ",(0,i.jsx)(t.code,{children:".gitignore"})," file."]}),"\n",(0,i.jsxs)(t.p,{children:["The built code can then by accessed from a ",(0,i.jsx)(t.a,{href:"https://www.jsdelivr.com/?docs=gh",children:"CDN that mirrors GitHub"}),", like this:\n",(0,i.jsx)(t.code,{children:"https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@main/..."})]}),"\n",(0,i.jsxs)(t.p,{children:["Built modules can then be declared in ",(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," (Project menu \u2192 Custom Settings), under the ",(0,i.jsx)(t.code,{children:"gleam"})," property, by adding a ",(0,i.jsx)(t.code,{children:"modules"})," property."]}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.code,{children:"modules"})," property is an object that has the module name as the key. The value is an object with the following properties:"]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"srcUrl"}),": the URL to the Gleam source code of the module."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"src"}),": optionally use this instead of ",(0,i.jsx)(t.code,{children:"srcUrl"})," to specify the Gleam source code of the module."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"compiledUrl"}),": the URL to the compiled JavaScript code of the module."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "gleam": {\n "modules": {\n "plinth/browser/document": {\n "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/plinth/src/plinth/browser/document.gleam",\n "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/plinth/plinth/browser/document.mjs"\n }\n }\n }\n}\n'})}),"\n",(0,i.jsxs)(t.p,{children:["See the ",(0,i.jsx)(t.a,{href:"#example-usage",children:"demo below"})," (",(0,i.jsx)(t.a,{href:"https://livecodes.io/?template=gleam",children:"open in LiveCodes"}),")."]}),"\n",(0,i.jsxs)(t.p,{children:["If ",(0,i.jsx)(t.code,{children:"compiledUrl"})," property is not specified, the JavaScript module is imported from this URL pattern: ",(0,i.jsx)(t.code,{children:"{module_name}.mjs"})," (example: ",(0,i.jsx)(t.code,{children:"plinth/browser/document.mjs"}),").\nThis can then be ",(0,i.jsx)(t.a,{href:"/docs/features/module-resolution#custom-module-resolution",children:"mapped (using import maps)"})," in ",(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," (Project menu \u2192 Custom Settings) to the full URL of the compiled JavaScript code."]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "gleam": {\n "modules": {\n "some_pkg/some_module": {\n "srcUrl": "https://example.com/packages/some_pkg/some_module.gleam"\n },\n "another_pkg/another_module": {\n "srcUrl": "https://example.com/packages/another_pkg/another_module.gleam"\n }\n }\n },\n "imports": {\n // map a specific module\n "some_pkg/some_module.mjs": "https://example.com/compiled/some_pkg/some_module.mjs",\n // or map a whole directory\n "another_pkg/": "https://example.com/compiled/another_pkg/"\n }\n}\n'})}),"\n",(0,i.jsx)(t.h3,{id:"externals",children:"Externals"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://tour.gleam.run/advanced-features/externals/",children:"External functions"})," written in JavaScript can also be used. An external function has the ",(0,i.jsx)(t.code,{children:"@external"}),' attribute on it. It needs to specify a "relative" URL specifying the location of the external code. This URL is ',(0,i.jsx)(t.a,{href:"/docs/features/module-resolution#custom-module-resolution",children:"mapped (using import maps)"})," in ",(0,i.jsx)(t.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," (Project menu \u2192 Custom Settings) to the full URL of the script that contains the code."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.strong,{children:"Example:"})}),"\n",(0,i.jsxs)(t.p,{children:["The following script is hosted on this URL:\n",(0,i.jsx)(t.a,{href:"https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/demo/greet.js",children:"https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/demo/greet.js"})]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",metastring:'title="greet.js"',children:"export const hello = (str) => `Hello, ${str}!`;\n"})}),"\n",(0,i.jsx)(t.p,{children:"Use this in custom settings:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "imports": {\n "my_pkg/greet.js": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/demo/greet.js"\n }\n}\n'})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:'"my_pkg/greet.js"'})," can then be used in the ",(0,i.jsx)(t.code,{children:"@external"})," attribute."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",metastring:'title="Gleam"',children:'import gleam/io\n\n// highlight-next-line\n@external(javascript, "my_pkg/greet.js", "hello")\n// highlight-next-line\npub fn hello(str: String) -> String\n\npub fn main() {\n io.println(hello("from JavaScript"))\n}\n'})}),"\n",(0,i.jsx)(t.p,{children:"Demo:"}),"\n","\n",(0,i.jsx)(r.Z,{config:h}),"\n",(0,i.jsxs)(t.admonition,{type:"tip",children:[(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs",children:"Data URLs"})," can be used to avoid having to host the external code online. LiveCodes enables ",(0,i.jsx)(t.a,{href:"/docs/features/data-urls",children:"creating data URLs"})," easily."]}),(0,i.jsx)(t.p,{children:"Example:\nThe import map in the previous example can be rewritten like this:"}),(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-json",metastring:'title="Custom Settings"',children:'{\n "imports": {\n "my_pkg/greet.js": "data:text/javascript;charset=UTF-8;base64,ZXhwb3J0IGNvbnN0IGhlbGxvID0gKHN0cikgPT4gYEhlbGxvLCAke3N0cn0hYDs="\n }\n}\n'})})]}),"\n",(0,i.jsx)(t.h3,{id:"npm-modules",children:"NPM Modules"}),"\n",(0,i.jsxs)(t.p,{children:["Modules published to ",(0,i.jsx)(t.a,{href:"https://www.npmjs.com/",children:"npm"}),", ",(0,i.jsx)(t.a,{href:"https://deno.land/x",children:"deno.land/x"})," and ",(0,i.jsx)(t.a,{href:"https://jsr.io/",children:"jsr.io"})," can be imported as external functions. There is no need to specify import maps. The package/module name is prefixed with a modifier to specify the source (e.g. ",(0,i.jsx)(t.code,{children:"npm:uuid"})," to import the ",(0,i.jsx)(t.a,{href:"https://www.npmjs.com/package/uuid",children:(0,i.jsx)(t.code,{children:"uuid"})})," npm module)."]}),"\n",(0,i.jsxs)(t.p,{children:["See list of supported CDNs and the respective modifiers in the section about ",(0,i.jsx)(t.a,{href:"/docs/features/module-resolution#cdn-providers",children:"module resolution"}),"."]}),"\n",(0,i.jsx)(t.p,{children:"Example:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-js",children:'import gleam/io\n\n// npm module (https://www.npmjs.com/package/uuid)\n@external(javascript, "npm:uuid", "v4")\npub fn uuid() -> String\n\n// jsr module (https://jsr.io/@kwhinnery/yassify)\n@external(javascript, "jsr:@kwhinnery/yassify", "yassify")\npub fn yassify(str: String) -> String\n\npub fn main() {\n io.println(uuid())\n io.println(yassify("Hello, World!"))\n}\n'})}),"\n",(0,i.jsx)(t.p,{children:"Demo:"}),"\n","\n",(0,i.jsx)(r.Z,{config:m}),"\n",(0,i.jsx)(t.h3,{id:"example-usage",children:"Example Usage"}),"\n",(0,i.jsx)(t.p,{children:"This is the Gleam starter template demonstrating the use of standard library, custom modules, external functions and npm modules."}),"\n",(0,i.jsx)(r.Z,{template:"gleam",height:"80vh"}),"\n",(0,i.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"gleam"})}),"\n",(0,i.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:".gleam"})}),"\n",(0,i.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"script"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsxs)(t.p,{children:["The wasm version of the ",(0,i.jsx)(t.a,{href:"https://github.com/gleam-lang/gleam",children:"official Gleam compiler"}),"."]}),"\n",(0,i.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"v1.3.0-rc1"})}),"\n",(0,i.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?template=gleam",children:"https://livecodes.io/?template=gleam"})}),"\n",(0,i.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://gleam.run",children:"Gleam"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://gleam.run/documentation/",children:"Gleam documentation"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://tour.gleam.run/",children:"Gleam language tour"})}),"\n"]})]})}function g(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},3365:function(e,t,n){n.d(t,{Z:()=>f});var s=n("5893"),i=n("4200"),o=n("7294"),r=n("8294");function l(e){let t=(0,o.useRef)(null),[n,i]=(0,o.useState)(e.className||""),[l,a]=(0,o.useState)(e.style||{}),[c,d]=(0,o.useState)(e.height),[h,m]=(0,o.useState)(),[p,u]=(0,o.useState)(JSON.stringify(e.config||"")),[g,f]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!t.current)return;let{className:n,style:s,height:o,sdkReady:l,config:c,...j}=e;if(i(n||""),a(s||{}),d(o),h&&g===JSON.stringify(j)){if(p===JSON.stringify(c))return;u(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else f(JSON.stringify(j)),h?.destroy(),(0,r.T)(t.current,{config:c,...j}).then(e=>{m(e),"function"==typeof l&&l(e)})},[e]),(0,o.useEffect)(()=>()=>{h?.destroy()},[]),(0,s.jsx)("div",{ref:t,className:n,style:l,"data-height":c})}var a=n("1858"),c=n("3262"),d=n("1705"),h=n("7645"),m=n("8168"),p=n("8228"),u=n("5050");function g(e){let[t,n]=(0,o.useState)(e.js),[i,r]=(0,o.useState)(e.ts),[l,a]=(0,o.useState)(e.react),[g,f]=(0,o.useState)(e.vue),[j,x]=(0,o.useState)(e.svelte),v="3.7rem",[y,b]=(0,o.useState)(!0),[w,S]=(0,o.useState)(v),C=(0,o.useRef)(null),k=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${v})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${v})`)},255)};return(0,o.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};n(e(t,"js")),r(e(i,"ts")),a(e(l,"jsx")),f(e(g,"html")),x(e(j,"html"))}},[]),(0,s.jsxs)("details",{className:`alert alert--info ${u.Z.details} ${p.Z.details}`,"data-collapsed":y,style:{height:y?v:w,overflow:"hidden",willChange:"height",transition:`height ${y?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,s.jsx)("summary",{onClick:()=>{b(!y),k()},children:"show code"}),(0,s.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,s.jsx)("div",{className:u.Z.collapsibleContent,children:(0,s.jsxs)(m.Z,{groupId:"sdk-code",children:[(0,s.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:k},children:(0,s.jsx)(d.Z,{language:"js",children:t})}),(0,s.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:k},children:(0,s.jsx)(d.Z,{language:"ts",children:i})}),(0,s.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:k},children:(0,s.jsx)(d.Z,{language:"jsx",children:l})}),(0,s.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:k},children:(0,s.jsx)(d.Z,{language:"html",children:g})}),(0,s.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:k},children:(0,s.jsx)(d.Z,{language:"html",children:j})})]})})})]})}function f(e){let{className:t,style:n,showCode:o,height:r,...c}=e,{colorMode:d}=(0,i.I)(),h=e=>JSON.stringify(e,null,2),m=` +import { createPlayground } from 'livecodes'; + +const options = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),u=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(c)}; + return (); +} + +`.trimStart(),f=` + + + +`,j=` + + +
+ +`.trimStart();return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:r||"50vh",...e.style},appUrl:a.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,s.jsx)(g,{js:m,ts:p,react:u,vue:f,svelte:j})]})}},8294:function(e,t,n){n.d(t,{T:function(){return i},r:function(){return o}});var s=n(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:n={},headless:s,loading:i="lazy",view:r}=t,l=s||"headless"===r,a=null,c=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)k(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(o(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",l?"eager":i);let m=globalThis.process;d.searchParams.set("sdkVersion",m?.env?.SDK_VERSION||"latest"),"object"==typeof n&&Object.keys(n).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let u=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!a)return;let t=a.dataset.height||a.style.height;if(t&&!l){let e=isNaN(Number(t))?t:t+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let s="livecodes",o=a.querySelector(`iframe.${s}`),r=o||document.createElement("iframe");r.classList.add(s),r.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),r.setAttribute("allowtransparency","true"),r.setAttribute("allowpaymentrequest","true"),r.setAttribute("allowfullscreen","true"),r.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),r.setAttribute("loading","eager"===i?"eager":"lazy"),l?k(r):(r.style.height="100%",r.style.minHeight="200px",r.style.width="100%",r.style.margin="0",r.style.border="0",r.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),r.contentWindow?.postMessage({type:"livecodes-config",payload:n},h))}),r.onload=()=>{e(r)},r.src=d.href,o||a.appendChild(r)}),j=new Promise(e=>{addEventListener("message",function t(n){n.source===f.contentWindow&&n.origin===h&&n.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),j.settled=!0)})}),x=()=>u?Promise.reject(g):new Promise(async e=>{j.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await j,e()}),v=(e,t)=>new Promise(async(n,s)=>{if(u)return s(g);await x();let i=E();addEventListener("message",function t(o){if(o.source===f.contentWindow&&o.origin===h&&o.data?.type==="livecodes-api-response"&&o.data?.id===i&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?s(e.error):n(e)}}),f.contentWindow?.postMessage({method:e,id:i,args:t},h)}),y={},b=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(u)throw Error(g);return b.includes(e)?(v("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(t),{remove:()=>{y[e]=y[e]?.filter(e=>e!==t),y[e]?.length===0&&v("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!y[t])return;let n=e.data?.payload;y[t]?.forEach(e=>{e(n)})});let C=()=>{Object.values(y).forEach(e=>{e.length=0}),f?.remove?.(),u=!0};function k(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await x(),t.unobserve(a))})},{rootMargin:"150px"}).observe(a);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>x(),run:()=>v("run"),format:e=>v("format",[e]),getShareUrl:e=>v("getShareUrl",[e]),getConfig:e=>v("getConfig",[e]),setConfig:e=>v("setConfig",[e]),getCode:()=>v("getCode"),show:(e,t)=>v("show",[e,t]),runTests:()=>v("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),s=1;sj.settled?v("destroy").then(C):u?Promise.reject(g):(C(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:n="https://livecodes.io",params:i={},config:o={},headless:r,import:l,lite:a,view:c,...d}=t;try{e=new URL(n)}catch{throw Error(`${n} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[n,s]=t;void 0!==s&&e.searchParams.set(n,String(s))});let m="headless"===t.view||r;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==c?o.view=c:e.searchParams.set("view",c)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),h.set("config","code/"+(0,s.compressToEncodedURIComponent)(JSON.stringify(o))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{h.set("params",(0,s.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),m&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,n){n.d(t,{Z:function(){return l},a:function(){return r}});var s=n(7294);let i={},o=s.createContext(i);function r(e){let t=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/f87bbaef.b7cf4afe.js b/docs/assets/js/f87bbaef.b7cf4afe.js new file mode 100644 index 0000000..38c3a16 --- /dev/null +++ b/docs/assets/js/f87bbaef.b7cf4afe.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["193"],{2667:function(e,n,t){t.r(n),t.d(n,{default:()=>h,frontMatter:()=>i,metadata:()=>r,assets:()=>c,toc:()=>l,contentTitle:()=>a});var r=JSON.parse('{"id":"api/internal/type-aliases/WatchReady","title":"Type Alias: WatchReady()","description":"WatchReady: (event, fn) => object","source":"@site/docs/api/internal/type-aliases/WatchReady.md","sourceDirName":"api/internal/type-aliases","slug":"/api/internal/type-aliases/WatchReady","permalink":"/docs/api/internal/type-aliases/WatchReady","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/api/internal/type-aliases/WatchReady.md","tags":[],"version":"current","frontMatter":{}}'),s=t("5893"),d=t("65");let i={},a="Type Alias: WatchReady()",c={},l=[{value:"Parameters",id:"parameters",level:2},{value:"Returns",id:"returns",level:2},{value:"remove()",id:"remove",level:3},{value:"Returns",id:"returns-1",level:4},{value:"Defined in",id:"defined-in",level:2}];function o(e){let n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",p:"p",strong:"strong",...(0,d.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"type-alias-watchready",children:"Type Alias: WatchReady()"})}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"WatchReady"}),": (",(0,s.jsx)(n.code,{children:"event"}),", ",(0,s.jsx)(n.code,{children:"fn"}),") => ",(0,s.jsx)(n.code,{children:"object"})]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["Called when a new project is loaded (including when ",(0,s.jsx)(n.a,{href:"https://livecodes.io/docs/features/import",children:"imported"}),") and the playground is ready to run."]}),"\n",(0,s.jsx)(n.h2,{id:"parameters",children:"Parameters"}),"\n",(0,s.jsxs)(n.p,{children:["\u2022 ",(0,s.jsx)(n.strong,{children:"event"}),": ",(0,s.jsx)(n.code,{children:'"ready"'})]}),"\n",(0,s.jsxs)(n.p,{children:["\u2022 ",(0,s.jsx)(n.strong,{children:"fn"})]}),"\n",(0,s.jsx)(n.h2,{id:"returns",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"object"})}),"\n",(0,s.jsx)(n.h3,{id:"remove",children:"remove()"}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.strong,{children:"remove"}),": () => ",(0,s.jsx)(n.code,{children:"void"})]}),"\n"]}),"\n",(0,s.jsx)(n.h4,{id:"returns-1",children:"Returns"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.code,{children:"void"})}),"\n",(0,s.jsx)(n.h2,{id:"defined-in",children:"Defined in"}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L230",children:"models.ts:230"})})]})}function h(e={}){let{wrapper:n}={...(0,d.a)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(o,{...e})}):o(e)}},65:function(e,n,t){t.d(n,{Z:function(){return a},a:function(){return i}});var r=t(7294);let s={},d=r.createContext(s);function i(e){let n=r.useContext(d);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),r.createElement(d.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/fbd82323.c33e9c6f.js b/docs/assets/js/fbd82323.c33e9c6f.js new file mode 100644 index 0000000..7d881f2 --- /dev/null +++ b/docs/assets/js/fbd82323.c33e9c6f.js @@ -0,0 +1,62 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["2127"],{3440:function(e,t,s){s.r(t),s.d(t,{default:()=>p,frontMatter:()=>a,metadata:()=>n,assets:()=>c,params:()=>d,toc:()=>u,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/ruby","title":"Ruby","description":"Ruby is a dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.","source":"@site/docs/languages/ruby.mdx","sourceDirName":"languages","slug":"/languages/ruby","permalink":"/docs/languages/ruby","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/ruby.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Ruby (Wasm)","permalink":"/docs/languages/ruby-wasm"},"next":{"title":"Sass","permalink":"/docs/languages/sass"}}'),r=s("5893"),o=s("65"),i=s("3365");let a={},l="Ruby",c={},d={ruby:`class User + attr_accessor :name + + def initialize(name) + @name = name + end + + def admin? + @name == 'Admin' + end +end + +user = User.new('Bob') + +# the output will go to the console +puts user +puts user.admin? +`,console:"full"},u=[{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extension",id:"extension",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function h(e){let t={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,o.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"ruby",children:"Ruby"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://ruby-lang.org/",children:"Ruby"})," is a dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write."]}),"\n",(0,r.jsxs)(t.p,{children:["LiveCodes runs Ruby in the browser using ",(0,r.jsx)(t.a,{href:"https://opalrb.com/",children:"Opal"}),"."]}),"\n",(0,r.jsxs)(t.blockquote,{children:["\n",(0,r.jsx)(t.p,{children:"Opal is a Ruby to JavaScript source-to-source compiler.\nIt comes packed with the Ruby corelib you know and love.\nIt is both fast as a runtime and small in its footprint."}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://opalrb.com/",children:"opalrb.com"})}),"\n"]}),"\n",(0,r.jsx)(t.admonition,{title:"Note",type:"info",children:(0,r.jsxs)(t.p,{children:["LiveCodes also supports running Ruby using ",(0,r.jsx)(t.a,{href:"https://github.com/ruby/ruby.wasm",children:"ruby.wasm"})," which is a collection of WebAssembly ports of the official ",(0,r.jsx)(t.a,{href:"https://github.com/ruby/ruby",children:"CRuby"}),". Read documentation ",(0,r.jsx)(t.a,{href:"/docs/languages/ruby-wasm",children:"here"})]})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(t.p,{children:["LiveCodes runs Ruby in the browser, including ",(0,r.jsx)(t.a,{href:"https://opalrb.com/docs/api/v1.7.3/corelib/index.html",children:"corelib"})," and the supported ",(0,r.jsx)(t.a,{href:"https://opalrb.com/docs/api/v1.7.3/stdlib/index.html",children:"stdlib"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["JavaScript interoperability and DOM access is achieved using ",(0,r.jsxs)(t.a,{href:"https://opalrb.com/docs/api/v1.7.3/stdlib/Native",children:[(0,r.jsx)(t.code,{children:'"Native"'})," module"]}),". See the ",(0,r.jsx)(t.a,{href:"#starter-template",children:"starter template"})," for an example."]}),"\n",(0,r.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,r.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"ruby"})}),"\n",(0,r.jsx)(t.h3,{id:"extension",children:"Extension"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:".rb"})}),"\n",(0,r.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.code,{children:"script"})}),"\n",(0,r.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://opalrb.com/",children:"Opal"})}),"\n",(0,r.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,r.jsx)(t.p,{children:"Opal v1.8.2"}),"\n",(0,r.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,r.jsx)(t.p,{children:"Not supported for Ruby."}),"\n",(0,r.jsx)(t.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n","\n",(0,r.jsx)(i.Z,{params:d,height:"80vh"}),"\n",(0,r.jsx)(t.p,{children:"This example demonstrates stdlib usage, JavaScript interoperability and DOM access:"}),"\n",(0,r.jsx)(i.Z,{template:"ruby",height:"80vh"}),"\n",(0,r.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://livecodes.io/?template=ruby",children:"https://livecodes.io/?template=ruby"})}),"\n",(0,r.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://ruby-lang.org/",children:"Ruby"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://ruby-lang.org/en/documentation/",children:"Ruby documentation"})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://opalrb.com/",children:"Opal"})}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"/docs/languages/ruby-wasm",children:"ruby.wasm"})," in LiveCodes"]}),"\n"]})]})}function p(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),r=s("4200"),o=s("7294"),i=s("8294");function a(e){let t=(0,o.useRef)(null),[s,r]=(0,o.useState)(e.className||""),[a,l]=(0,o.useState)(e.style||{}),[c,d]=(0,o.useState)(e.height),[u,h]=(0,o.useState)(),[p,m]=(0,o.useState)(JSON.stringify(e.config||"")),[g,f]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:o,sdkReady:a,config:c,...y}=e;if(r(s||""),l(n||{}),d(o),u&&g===JSON.stringify(y)){if(p===JSON.stringify(c))return;m(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{u?.setConfig(e)}):c&&u.setConfig(c)}else f(JSON.stringify(y)),u?.destroy(),(0,i.T)(t.current,{config:c,...y}).then(e=>{h(e),"function"==typeof a&&a(e)})},[e]),(0,o.useEffect)(()=>()=>{u?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),u=s("7645"),h=s("8168"),p=s("8228"),m=s("5050");function g(e){let[t,s]=(0,o.useState)(e.js),[r,i]=(0,o.useState)(e.ts),[a,l]=(0,o.useState)(e.react),[g,f]=(0,o.useState)(e.vue),[y,v]=(0,o.useState)(e.svelte),b="3.7rem",[x,j]=(0,o.useState)(!0),[w,S]=(0,o.useState)(b),C=(0,o.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${b})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${b})`)},255)};return(0,o.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),i(e(r,"ts")),l(e(a,"jsx")),f(e(g,"html")),v(e(y,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":x,style:{height:x?b:w,overflow:"hidden",willChange:"height",transition:`height ${x?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{j(!x),E()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:m.Z.collapsibleContent,children:(0,n.jsxs)(h.Z,{groupId:"sdk-code",children:[(0,n.jsx)(u.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(u.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"ts",children:r})}),(0,n.jsx)(u.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"jsx",children:a})}),(0,n.jsx)(u.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:g})}),(0,n.jsx)(u.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:y})})]})})})]})}function f(e){let{className:t,style:s,showCode:o,height:i,...c}=e,{colorMode:d}=(0,r.I)(),u=e=>JSON.stringify(e,null,2),h=` +import { createPlayground } from 'livecodes'; + +const options = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${u(c)}; +createPlayground('#container', options); + +`.trimStart(),m=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${u(c)}; + return (); +} + +`.trimStart(),f=` + + + +`,y=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:h,ts:p,react:m,vue:f,svelte:y})]})}},8294:function(e,t,s){s.d(t,{T:function(){return r},r:function(){return o}});var n=s(7728);async function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:r="lazy",view:i}=t,a=n||"headless"===i,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(o(t)),u=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":r);let h=globalThis.process;d.searchParams.set("sdkVersion",h?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let p=t.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",o=l.querySelector(`iframe.${n}`),i=o||document.createElement("iframe");i.classList.add(n),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===r?"eager":"lazy"),a?E(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===i.contentWindow&&t.origin===u&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:s},u))}),i.onload=()=>{e(i)},i.src=d.href,o||l.appendChild(i)}),y=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===u&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),y.settled=!0)})}),v=()=>m?Promise.reject(g):new Promise(async e=>{y.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},u),await y,e()}),b=(e,t)=>new Promise(async(s,n)=>{if(m)return n(g);await v();let r=R();addEventListener("message",function t(o){if(o.source===f.contentWindow&&o.origin===u&&o.data?.type==="livecodes-api-response"&&o.data?.id===r&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:r,args:t},u)}),x={},j=["load","ready","code","console","tests","destroy"],w=(e,t)=>{if(m)throw Error(g);return j.includes(e)?(b("watch",[e]),x[e]||(x[e]=[]),x[e]?.push(t),{remove:()=>{x[e]=x[e]?.filter(e=>e!==t),x[e]?.length===0&&b("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==u||!t||!x[t])return;let s=e.data?.payload;x[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(x).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await v(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let R=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>v(),run:()=>b("run"),format:e=>b("format",[e]),getShareUrl:e=>b("getShareUrl",[e]),getConfig:e=>b("getConfig",[e]),setConfig:e=>b("setConfig",[e]),getCode:()=>b("getCode"),show:(e,t)=>b("show",[e,t]),runTests:()=>b("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;ny.settled?b("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:o={},headless:i,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let u=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let h="headless"===t.view||i;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==c?o.view=c:e.searchParams.set("view",c)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),u.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(o))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{u.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(r[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),h&&e.searchParams.set("headless","true"),e.hash=u.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return i}});var n=s(7294);let r={},o=n.createContext(r);function i(e){let t=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/fd2b2d45.83a40b61.js b/docs/assets/js/fd2b2d45.83a40b61.js new file mode 100644 index 0000000..ca12483 --- /dev/null +++ b/docs/assets/js/fd2b2d45.83a40b61.js @@ -0,0 +1,74 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["833"],{172:function(e,t,s){s.r(t),s.d(t,{default:()=>u,frontMatter:()=>a,metadata:()=>n,assets:()=>c,basicSchemeDemo:()=>d,toc:()=>h,contentTitle:()=>l});var n=JSON.parse('{"id":"languages/scheme","title":"Scheme","description":"Scheme is a classic programming language in the Lisp family. It emphasizes functional programming and domain-specific languages but adapts to other styles.","source":"@site/docs/languages/scheme.mdx","sourceDirName":"languages","slug":"/languages/scheme","permalink":"/docs/languages/scheme","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/scheme.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Sass","permalink":"/docs/languages/sass"},"next":{"title":"SCSS","permalink":"/docs/languages/scss"}}'),i=s("5893"),o=s("65"),r=s("3365");let a={},l="Scheme",c={},d={activeEditor:"script",markup:{language:"html",content:`
+

Hello, World!

+ +

You clicked 0 times.

+ +
+`},style:{language:"css",content:`.container, +.container button { + text-align: center; + font: 1em sans-serif; +} +.logo { + width: 150px; +} +`},script:{language:"scheme",content:`(let ((title "Scheme")) + (set-content! "#title" title)) + +(let ((counter 0)) +(add-handler! "#counter-button" "click" +(lambda (ev) +(set! counter (+ counter 1)) +(set-content! "#counter" (number->string counter))))) + +; check console +(let ((time-now (date-hour (current-date)))) +(console-log +(cond ((< time-now 12) "Good morning") +((< time-now 18) "Good afternoon") +(else "Good evening")))) +`}},h=[{value:"Usage",id:"usage",level:2},{value:"JS Interoperability",id:"js-interoperability",level:3},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Extensions",id:"extensions",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Code Formatting",id:"code-formatting",level:2},{value:"Limitations",id:"limitations",level:2},{value:"Starter Template",id:"starter-template",level:2},{value:"Links",id:"links",level:2}];function m(e){let t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"scheme",children:"Scheme"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://www.scheme.org/",children:"Scheme"})," is a classic programming language in the Lisp family. It emphasizes functional programming and domain-specific languages but adapts to other styles."]}),"\n",(0,i.jsxs)(t.p,{children:["In LiveCodes, Scheme code runs in the browser using ",(0,i.jsx)(t.a,{href:"https://www.biwascheme.org/",children:"BiwaScheme"}),", a Scheme interpreter written in JavaScript."]}),"\n",(0,i.jsx)(t.admonition,{title:"Note",type:"info",children:(0,i.jsxs)(t.p,{children:["Lisp language family supported in LiveCodes includes ",(0,i.jsx)(t.a,{href:"/docs/languages/commonlisp",children:"Common Lisp"}),", ",(0,i.jsx)(t.a,{href:"/docs/languages/scheme",children:"Scheme"}),", ",(0,i.jsx)(t.a,{href:"/docs/languages/clojurescript",children:"ClojureScript"})," and ",(0,i.jsx)(t.a,{href:"/docs/languages/fennel",children:"Fennel"}),"."]})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsxs)(t.p,{children:["LiveCodes runs Scheme code in the browser. BiwaScheme ",(0,i.jsx)(t.a,{href:"https://www.biwascheme.org/doc/features.html",children:"implements"})," most of the features of ",(0,i.jsx)(t.a,{href:"https://small.r7rs.org/",children:"R7RS small"}),", including first-class continuation and tail call optimization."]}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.strong,{children:"Example:"})}),"\n","\n","\n",(0,i.jsx)(r.Z,{config:d,height:"70vh"}),"\n",(0,i.jsx)(t.h3,{id:"js-interoperability",children:"JS Interoperability"}),"\n",(0,i.jsxs)(t.p,{children:["See ",(0,i.jsx)(t.a,{href:"https://www.biwascheme.org/doc/features.html#javascript-language-interface",children:"BiwaScheme docs"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"language-info",children:"Language Info"}),"\n",(0,i.jsx)(t.h3,{id:"name",children:"Name"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"scheme"})}),"\n",(0,i.jsx)(t.h3,{id:"extensions",children:"Extensions"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:".scm"})}),"\n",(0,i.jsx)(t.h3,{id:"editor",children:"Editor"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.code,{children:"script"})}),"\n",(0,i.jsx)(t.h2,{id:"compiler",children:"Compiler"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://www.biwascheme.org/",children:"BiwaScheme"}),", a Scheme interpreter written in JavaScript."]}),"\n",(0,i.jsx)(t.h3,{id:"version",children:"Version"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"biwascheme"}),": v0.8.0"]}),"\n",(0,i.jsx)(t.h2,{id:"code-formatting",children:"Code Formatting"}),"\n",(0,i.jsxs)(t.p,{children:["Using ",(0,i.jsx)(t.a,{href:"https://shaunlebron.github.io/parinfer/",children:"Parinfer"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"limitations",children:"Limitations"}),"\n",(0,i.jsxs)(t.p,{children:["BiwaScheme implements most of the features of R7RS small, however some features are not supported.\nSee the ",(0,i.jsx)(t.a,{href:"https://github.com/biwascheme/biwascheme#conformance",children:"BiwaScheme documentation"})," for more information."]}),"\n",(0,i.jsx)(t.h2,{id:"starter-template",children:"Starter Template"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://livecodes.io/?template=scheme",children:"https://livecodes.io/?template=scheme"})}),"\n",(0,i.jsx)(t.h2,{id:"links",children:"Links"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.scheme.org/",children:"Scheme Programming Language"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.biwascheme.org/",children:"BiwaScheme"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://www.scheme.com/tspl4/",children:"The Scheme Programming Language (4th Edition)"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://mitp-content-server.mit.edu/books/content/sectbyfn/books_pres_0/6515/sicp.zip/index.html",children:"Structure and Interpretation of Computer Programs"})}),"\n"]})]})}function u(e={}){let{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(m,{...e})}):m(e)}},3365:function(e,t,s){s.d(t,{Z:()=>f});var n=s("5893"),i=s("4200"),o=s("7294"),r=s("8294");function a(e){let t=(0,o.useRef)(null),[s,i]=(0,o.useState)(e.className||""),[a,l]=(0,o.useState)(e.style||{}),[c,d]=(0,o.useState)(e.height),[h,m]=(0,o.useState)(),[u,p]=(0,o.useState)(JSON.stringify(e.config||"")),[g,f]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!t.current)return;let{className:s,style:n,height:o,sdkReady:a,config:c,...v}=e;if(i(s||""),l(n||{}),d(o),h&&g===JSON.stringify(v)){if(u===JSON.stringify(c))return;p(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else f(JSON.stringify(v)),h?.destroy(),(0,r.T)(t.current,{config:c,...v}).then(e=>{m(e),"function"==typeof a&&a(e)})},[e]),(0,o.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:t,className:s,style:a,"data-height":c})}var l=s("1858"),c=s("3262"),d=s("1705"),h=s("7645"),m=s("8168"),u=s("8228"),p=s("5050");function g(e){let[t,s]=(0,o.useState)(e.js),[i,r]=(0,o.useState)(e.ts),[a,l]=(0,o.useState)(e.react),[g,f]=(0,o.useState)(e.vue),[v,y]=(0,o.useState)(e.svelte),w="3.7rem",[j,x]=(0,o.useState)(!0),[b,S]=(0,o.useState)(w),C=(0,o.useRef)(null),E=()=>{setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},5),setTimeout(()=>{S(`calc(${C.current.offsetHeight}px + ${w})`)},255)};return(0,o.useEffect)(()=>{if(c.Z.canUseDOM){let e=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===t?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};s(e(t,"js")),r(e(i,"ts")),l(e(a,"jsx")),f(e(g,"html")),y(e(v,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${u.Z.details}`,"data-collapsed":j,style:{height:j?w:b,overflow:"hidden",willChange:"height",transition:`height ${j?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{x(!j),E()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:p.Z.collapsibleContent,children:(0,n.jsxs)(m.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"js",children:t})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"ts",children:i})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"jsx",children:a})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:E},children:(0,n.jsx)(d.Z,{language:"html",children:v})})]})})})]})}function f(e){let{className:t,style:s,showCode:o,height:r,...c}=e,{colorMode:d}=(0,i.I)(),h=e=>JSON.stringify(e,null,2),m=` +import { createPlayground } from 'livecodes'; + +const options = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),u=` +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = ${h(c)}; +createPlayground('#container', options); + +`.trimStart(),p=` +import LiveCodes from 'livecodes/react'; + +export default function App() { + const options = ${h(c)}; + return (); +} + +`.trimStart(),f=` + + + +`,v=` + + +
+ +`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{className:`container_Egsj ${e.className}`,style:{height:r||"50vh",...e.style},appUrl:l.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:m,ts:u,react:p,vue:f,svelte:v})]})}},8294:function(e,t,s){s.d(t,{T:function(){return i},r:function(){return o}});var n=s(7728);async function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(t=e,e=null);let{config:s={},headless:n,loading:i="lazy",view:r}=t,a=n||"headless"===r,l=null,c=null;if("string"==typeof e)l=document.querySelector(e);else if(e instanceof HTMLElement)l=e;else if(!(a&&"object"==typeof e))throw Error("A valid container element is required.");if(!l){if(a)E(l=document.createElement("div")),document.body.appendChild(l);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(o(t)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",a?"eager":i);let m=globalThis.process;d.searchParams.set("sdkVersion",m?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&d.searchParams.set("config","sdk");let u=t.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(u[e])))});let p=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!l)return;let t=l.dataset.height||l.style.height;if(t&&!a){let e=isNaN(Number(t))?t:t+"px";l.style.height=e}"false"===l.dataset.defaultStyles||a||(l.style.backgroundColor||="#fff",l.style.border||="1px solid black",l.style.borderRadius||="8px",l.style.boxSizing||="border-box",l.style.padding||="0",l.style.width||="100%",l.style.height||=l.style.height||"300px",l.style.minHeight="200px",l.style.flexGrow="1",l.style.overflow||="hidden",l.style.resize||="vertical");let n="livecodes",o=l.querySelector(`iframe.${n}`),r=o||document.createElement("iframe");r.classList.add(n),r.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),r.setAttribute("allowtransparency","true"),r.setAttribute("allowpaymentrequest","true"),r.setAttribute("allowfullscreen","true"),r.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),r.setAttribute("loading","eager"===i?"eager":"lazy"),a?E(r):(r.style.height="100%",r.style.minHeight="200px",r.style.width="100%",r.style.margin="0",r.style.border="0",r.style.borderRadius=l.style.borderRadius),addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-init"&&(removeEventListener("message",e),c=Number(t.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<46)&&addEventListener("message",function e(t){t.source===r.contentWindow&&t.origin===h&&t.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),r.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),r.onload=()=>{e(r)},r.src=d.href,o||l.appendChild(r)}),v=new Promise(e=>{addEventListener("message",function t(s){s.source===f.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",t),e(),v.settled=!0)})}),y=()=>p?Promise.reject(g):new Promise(async e=>{v.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await v,e()}),w=(e,t)=>new Promise(async(s,n)=>{if(p)return n(g);await y();let i=L();addEventListener("message",function t(o){if(o.source===f.contentWindow&&o.origin===h&&o.data?.type==="livecodes-api-response"&&o.data?.id===i&&o.data.method===e){removeEventListener("message",t);let e=o.data.payload;e?.error?n(e.error):s(e)}}),f.contentWindow?.postMessage({method:e,id:i,args:t},h)}),j={},x=["load","ready","code","console","tests","destroy"],b=(e,t)=>{if(p)throw Error(g);return x.includes(e)?(w("watch",[e]),j[e]||(j[e]=[]),j[e]?.push(t),{remove:()=>{j[e]=j[e]?.filter(e=>e!==t),j[e]?.length===0&&w("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let t=S(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!t||!j[t])return;let s=e.data?.payload;j[t]?.forEach(e=>{e(s)})});let C=()=>{Object.values(j).forEach(e=>{e.length=0}),f?.remove?.(),p=!0};function E(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===i&&"IntersectionObserver"in window&&new IntersectionObserver((e,t)=>{e.forEach(async e=>{e.isIntersecting&&(await y(),t.unobserve(l))})},{rootMargin:"150px"}).observe(l);let L=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>y(),run:()=>w("run"),format:e=>w("format",[e]),getShareUrl:e=>w("getShareUrl",[e]),getConfig:e=>w("getConfig",[e]),setConfig:e=>w("setConfig",[e]),getCode:()=>w("getCode"),show:(e,t)=>w("show",[e,t]),runTests:()=>w("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var t=arguments.length,s=Array(t>1?t-1:0),n=1;nv.settled?w("destroy").then(C):p?Promise.reject(g):(C(),Promise.resolve())}}function o(){let e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:i={},config:o={},headless:r,import:a,lite:l,view:c,...d}=t;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(t=>{let[s,n]=t;void 0!==n&&e.searchParams.set(s,String(n))});let m="headless"===t.view||r;if(l&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==c?o.view=c:e.searchParams.set("view",c)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(o))));if(i&&"object"==typeof i&&Object.keys(i).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(i)))}catch{Object.keys(i).forEach(t=>{e.searchParams.set(t,encodeURIComponent(String(i[t])))})}return a&&e.searchParams.set("x",encodeURIComponent(a)),m&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,t,s){s.d(t,{Z:function(){return a},a:function(){return r}});var n=s(7294);let i={},o=n.createContext(i);function r(e){let t=n.useContext(o);return n.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),n.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/fe0461a7.2a1cd248.js b/docs/assets/js/fe0461a7.2a1cd248.js new file mode 100644 index 0000000..c441823 --- /dev/null +++ b/docs/assets/js/fe0461a7.2a1cd248.js @@ -0,0 +1,45 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["8434"],{6263:function(e,n,s){s.r(n),s.d(n,{default:()=>p,frontMatter:()=>t,metadata:()=>i,assets:()=>l,toc:()=>a,contentTitle:()=>c});var i=JSON.parse('{"id":"configuration/configuration-object","title":"Configuration Object","description":"LiveCodes is very flexible and provides a wide range of configuration options.","source":"@site/docs/configuration/configuration-object.mdx","sourceDirName":"configuration","slug":"/configuration/configuration-object","permalink":"/docs/configuration/configuration-object","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/configuration/configuration-object.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Configuration","permalink":"/docs/configuration/"},"next":{"title":"Query Parameters","permalink":"/docs/configuration/query-params"}}'),r=s("5893"),d=s("65"),o=s("3365");let t={},c="Configuration Object",l={},a=[{value:"Usage",id:"usage",level:2},{value:"TypeScript Types",id:"typescript-types",level:2},{value:"Default Config",id:"default-config",level:2},{value:"Project Content",id:"project-content",level:2},{value:"title",id:"title",level:3},{value:"description",id:"description",level:3},{value:"head",id:"head",level:3},{value:"htmlAttrs",id:"htmlattrs",level:3},{value:"tags",id:"tags",level:3},{value:"activeEditor",id:"activeeditor",level:3},{value:"languages",id:"languages",level:3},{value:"markup",id:"markup",level:3},{value:"style",id:"style",level:3},{value:"script",id:"script",level:3},{value:"stylesheets",id:"stylesheets",level:3},{value:"scripts",id:"scripts",level:3},{value:"cssPreset",id:"csspreset",level:3},{value:"processors",id:"processors",level:3},{value:"customSettings",id:"customsettings",level:3},{value:"imports",id:"imports",level:3},{value:"types",id:"types",level:3},{value:"tests",id:"tests",level:3},{value:"version",id:"version",level:3},{value:"App Settings",id:"app-settings",level:2},{value:"readonly",id:"readonly",level:3},{value:"allowLangChange",id:"allowlangchange",level:3},{value:"view",id:"view",level:3},{value:"mode",id:"mode",level:3},{value:"tools",id:"tools",level:3},{value:"zoom",id:"zoom",level:3},{value:"User Settings",id:"user-settings",level:2},{value:"enableAI",id:"enableai",level:3},{value:"autoupdate",id:"autoupdate",level:3},{value:"autosave",id:"autosave",level:3},{value:"autotest",id:"autotest",level:3},{value:"delay",id:"delay",level:3},{value:"formatOnsave",id:"formatonsave",level:3},{value:"layout",id:"layout",level:3},{value:"theme",id:"theme",level:3},{value:"themeColor",id:"themecolor",level:3},{value:"editorTheme",id:"editortheme",level:3},{value:"appLanguage",id:"applanguage",level:3},{value:"recoverUnsaved",id:"recoverunsaved",level:3},{value:"welcome",id:"welcome",level:3},{value:"showSpacing",id:"showspacing",level:3},{value:"editor",id:"editor",level:3},{value:"fontFamily",id:"fontfamily",level:3},{value:"fontSize",id:"fontsize",level:3},{value:"useTabs",id:"usetabs",level:3},{value:"tabSize",id:"tabsize",level:3},{value:"lineNumbers",id:"linenumbers",level:3},{value:"wordWrap",id:"wordwrap",level:3},{value:"closeBrackets",id:"closebrackets",level:3},{value:"foldRegions",id:"foldregions",level:3},{value:"emmet",id:"emmet",level:3},{value:"editorMode",id:"editormode",level:3},{value:"semicolons",id:"semicolons",level:3},{value:"singleQuote",id:"singlequote",level:3},{value:"trailingComma",id:"trailingcomma",level:3}];function h(e){let n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,d.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"configuration-object",children:"Configuration Object"})}),"\n","\n",(0,r.jsx)(n.p,{children:"LiveCodes is very flexible and provides a wide range of configuration options.\nA JavaScript object is used for configuration and keeping state."}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(n.p,{children:["The configuration object can be used while initializing a new playground using the ",(0,r.jsx)(n.a,{href:"/docs/sdk/",children:"SDK"}),"."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import { createPlayground } from 'livecodes';\n\n(async () => {\n const playground = await createPlayground('#container', {\n config: {\n // config options here\n },\n });\n\n // the object can be retrieved using the method `getConfig`\n console.log(await playground.getConfig());\n\n // and can be later changed using the method `setConfig`\n await playground.setConfig({\n // new config options\n });\n})();\n"})}),"\n",(0,r.jsxs)(n.p,{children:["Alternatively, the URL ",(0,r.jsx)(n.a,{href:"/docs/configuration/query-params",children:"query parameter"})," ",(0,r.jsx)(n.code,{children:"config"})," can provide a URL to a JSON representation of the configuration object to be used while initializing the app."]}),"\n",(0,r.jsx)(n.p,{children:"Example:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{children:"https://livecodes.io/?config=https://my-custom-server.com/config.json\n"})}),"\n",(0,r.jsx)(n.h2,{id:"typescript-types",children:"TypeScript Types"}),"\n",(0,r.jsxs)(n.p,{children:["TypeScript types are ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config",children:"documented here"})," and can be imported from the library."]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",children:"import type { Config } from 'livecodes';\n"})}),"\n",(0,r.jsx)(n.h2,{id:"default-config",children:"Default Config"}),"\n",(0,r.jsxs)(n.p,{children:["Default config is ",(0,r.jsx)(n.a,{href:"https://github.com/live-codes/livecodes/blob/develop/src/livecodes/config/default-config.ts",children:"defined here"}),"."]}),"\n",(0,r.jsx)(n.h2,{id:"project-content",children:"Project Content"}),"\n",(0,r.jsxs)(n.p,{children:["These are properties that define the content of the current ",(0,r.jsx)(n.a,{href:"/docs/features/projects",children:"project"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"title",children:(0,r.jsx)(n.code,{children:"title"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#title",children:(0,r.jsx)(n.code,{children:"string"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'"Untitled Project"'})]}),"\n",(0,r.jsxs)(n.p,{children:["Project title. This is used as ",(0,r.jsx)(n.a,{href:"/docs/features/result",children:"result page"})," title and title meta tag. Also used in ",(0,r.jsx)(n.a,{href:"/docs/features/projects",children:"project"})," search. This can be set in the UI from the title input (above result page) or from Project menu \u2192 Project Info."]}),"\n",(0,r.jsx)(n.h3,{id:"description",children:(0,r.jsx)(n.code,{children:"description"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#description",children:(0,r.jsx)(n.code,{children:"string"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'""'})]}),"\n",(0,r.jsxs)(n.p,{children:["Project description. Used in ",(0,r.jsx)(n.a,{href:"/docs/features/projects",children:"project"})," search and result page description meta tag. This can be set in the UI from Project menu \u2192 Project Info."]}),"\n",(0,r.jsx)(n.h3,{id:"head",children:(0,r.jsx)(n.code,{children:"head"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#head",children:(0,r.jsx)(n.code,{children:"string"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'\'\\n\''})]}),"\n",(0,r.jsxs)(n.p,{children:["Content added to the ",(0,r.jsx)(n.a,{href:"/docs/features/result",children:"result page"})," ",(0,r.jsx)(n.code,{children:""})," element. This can be set in the UI from Project menu \u2192 Project Info."]}),"\n",(0,r.jsx)(n.h3,{id:"htmlattrs",children:(0,r.jsx)(n.code,{children:"htmlAttrs"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#htmlattrs",children:(0,r.jsx)(n.code,{children:"string | Record"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'\'lang="en" class=""\''})]}),"\n",(0,r.jsxs)(n.p,{children:["Attributes added to the ",(0,r.jsx)(n.a,{href:"/docs/features/result",children:"result page"})," ",(0,r.jsx)(n.code,{children:""})," element. It can be an object or a string."]}),"\n",(0,r.jsxs)(n.p,{children:["Example: ",(0,r.jsx)(n.code,{children:'{ lang: "en", class: "dark" }'})," or ",(0,r.jsx)(n.code,{children:'\'lang="en" class="dark"\''}),",\nbecome ",(0,r.jsx)(n.code,{children:''}),"."]}),"\n",(0,r.jsx)(n.p,{children:"This can be set in the UI from Project menu \u2192 Project Info."}),"\n",(0,r.jsx)(n.h3,{id:"tags",children:(0,r.jsx)(n.code,{children:"tags"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#tags",children:(0,r.jsx)(n.code,{children:"string[]"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"[]"})]}),"\n",(0,r.jsxs)(n.p,{children:["Project tags. Used in ",(0,r.jsx)(n.a,{href:"/docs/features/projects",children:"project"})," filter and search. This can be set in the UI from Project menu \u2192 Project Info."]}),"\n",(0,r.jsx)(n.h3,{id:"activeeditor",children:(0,r.jsx)(n.code,{children:"activeEditor"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#activeeditor",children:(0,r.jsx)(n.code,{children:'"markup" | "style" | "script" | undefined'})})]}),"\n",(0,r.jsx)(n.p,{children:'Default: Last used editor for user, otherwise "markup"'}),"\n",(0,r.jsx)(n.p,{children:"Selects the active editor to show."}),"\n",(0,r.jsx)(n.h3,{id:"languages",children:(0,r.jsx)(n.code,{children:"languages"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#languages",children:(0,r.jsx)(n.code,{children:"Language[] | undefined"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: all supported languages in full app and only current editor languages in ",(0,r.jsx)(n.a,{href:"/docs/features/embeds",children:"embeds"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["List of enabled languages. Languages that are not already loaded in the editors (",(0,r.jsx)(n.a,{href:"#markup",children:"markup"}),", ",(0,r.jsx)(n.a,{href:"#style",children:"style"})," and ",(0,r.jsx)(n.a,{href:"#script",children:"script"}),") can be selected from a drop down menu at the editor title."]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"Change Language",src:s(3507).Z+"",width:"2240",height:"1400"})}),"\n",(0,r.jsx)(n.h3,{id:"markup",children:(0,r.jsx)(n.code,{children:"markup"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#markup",children:(0,r.jsx)(n.code,{children:"Editor"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'{ language: "html", content: "" }'})]}),"\n",(0,r.jsx)(n.p,{children:"An object that configures the language and content of the markup editor. This can include the following properties:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"language"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/type-aliases/Language",children:"Language"}),"\nDefault: ",(0,r.jsx)(n.code,{children:'"html"'})," in markup editor, ",(0,r.jsx)(n.code,{children:'"css"'})," in style editor and ",(0,r.jsx)(n.code,{children:'"javascript"'})," in script editor.\nThis can be a language name, extension or alias (as defined in ",(0,r.jsx)(n.a,{href:"/docs/languages/",children:"language documentations"}),").\n(e.g. ",(0,r.jsx)(n.code,{children:'"markdown"'}),", ",(0,r.jsx)(n.code,{children:'"md"'}),")"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"content"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#content",children:(0,r.jsx)(n.code,{children:"string | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:'""'}),"\nThe initial content of the code editor."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"contentUrl"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#contenturl",children:(0,r.jsx)(n.code,{children:"string | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:"undefined"}),"\nA URL to load ",(0,r.jsx)(n.code,{children:"content"})," from. It has to be a valid URL that is CORS-enabled.\nThe URL is only fetched if ",(0,r.jsx)(n.code,{children:"content"})," property had no value."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"hiddenContent"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#hiddencontent",children:(0,r.jsx)(n.code,{children:"string | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:"undefined"}),"\nHidden content that gets evaluated without being visible in the code editor.\nThis can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)"]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"hiddenContentUrl"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#hiddencontenturl",children:(0,r.jsx)(n.code,{children:"string | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:"undefined"}),"\nA URL to load ",(0,r.jsx)(n.code,{children:"hiddenContent"})," from. It has to be a valid URL that is CORS-enabled.\nThe URL is only fetched if ",(0,r.jsx)(n.code,{children:"hiddenContent"})," property had no value."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"foldedLines"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#foldedlines",children:(0,r.jsx)(n.code,{children:"Array<{ from: number; to: number }> | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:"undefined"}),"\nLines that get folded when the editor loads. The code can be unfolded by clicking on arrow beside the line.\nThis can be useful for less relevant code in embedded playgrounds."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"title"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#title",children:(0,r.jsx)(n.code,{children:"string | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:'""'}),'\nIf set, this is used as the title of the editor in the UI, overriding the default title set to the language name (e.g. "Python" can be used instead of "Py (Wasm)").']}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"hideTitle"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#hidetitle",children:(0,r.jsx)(n.code,{children:"boolean | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:'""'}),"\nIf ",(0,r.jsx)(n.code,{children:"true"}),", the title of the code editor is hidden, however its code is still evaluated.\nThis can be useful in embedded playgrounds (e.g. for hiding unnecessary code)."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"order"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#order",children:(0,r.jsx)(n.code,{children:"number | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:"0"}),"\nThe order of the editor in the UI."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"selector"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#selector",children:(0,r.jsx)(n.code,{children:"string | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:"undefined"}),"\nA CSS selector to load ",(0,r.jsx)(n.code,{children:"content"})," from ",(0,r.jsx)(n.a,{href:"/docs/features/import#import-code-from-dom",children:"DOM import"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(n.li,{children:["\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"position"}),":\nType: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#position",children:(0,r.jsx)(n.code,{children:"{lineNumber: number, column?: number} | undefined"})}),"\nDefault: ",(0,r.jsx)(n.code,{children:"undefined"}),"\nThe initial position of the cursor in the code editor.\nExample: ",(0,r.jsx)(n.code,{children:"{lineNumber: 5, column: 10}"})]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"style",children:(0,r.jsx)(n.code,{children:"style"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#style",children:(0,r.jsx)(n.code,{children:"Editor"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'{ language: "css", content: "" }'})]}),"\n",(0,r.jsxs)(n.p,{children:["An object that configures the language and content of the style editor. See ",(0,r.jsx)(n.a,{href:"#markup",children:"markup"})," for more details."]}),"\n",(0,r.jsx)(n.h3,{id:"script",children:(0,r.jsx)(n.code,{children:"script"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#script",children:(0,r.jsx)(n.code,{children:"Editor"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'{ language: "javascript", content: "" }'})]}),"\n",(0,r.jsxs)(n.p,{children:["An object that configures the language and content of the script editor. See ",(0,r.jsx)(n.a,{href:"#markup",children:"markup"})," for more details."]}),"\n",(0,r.jsx)(n.h3,{id:"stylesheets",children:(0,r.jsx)(n.code,{children:"stylesheets"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#stylesheets",children:(0,r.jsx)(n.code,{children:"string[]"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"[]"})]}),"\n",(0,r.jsxs)(n.p,{children:["List of URLs for ",(0,r.jsx)(n.a,{href:"/docs/features/external-resources",children:"external stylesheets"})," to add to the ",(0,r.jsx)(n.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"scripts",children:(0,r.jsx)(n.code,{children:"scripts"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#scripts",children:(0,r.jsx)(n.code,{children:"string[]"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"[]"})]}),"\n",(0,r.jsxs)(n.p,{children:["List of URLs for ",(0,r.jsx)(n.a,{href:"/docs/features/external-resources",children:"external scripts"})," to add to the ",(0,r.jsx)(n.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"csspreset",children:(0,r.jsx)(n.code,{children:"cssPreset"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#csspreset",children:(0,r.jsx)(n.code,{children:'"" | "normalize.css" | "reset-css"'})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:'""'})]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"/docs/features/external-resources#css-presets",children:"CSS Preset"})," to use."]}),"\n",(0,r.jsx)(n.h3,{id:"processors",children:(0,r.jsx)(n.code,{children:"processors"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/internal/type-aliases/Processor",children:(0,r.jsx)(n.code,{children:"Processor[]"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"[]"})]}),"\n",(0,r.jsxs)(n.p,{children:["List of enabled ",(0,r.jsx)(n.a,{href:"/docs/features/css#css-processors",children:"CSS processors"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"customsettings",children:(0,r.jsx)(n.code,{children:"customSettings"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#customsettings",children:(0,r.jsx)(n.code,{children:"CustomSettings"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"{}"})]}),"\n",(0,r.jsxs)(n.p,{children:["Defines ",(0,r.jsx)(n.a,{href:"/docs/advanced/custom-settings",children:"custom settings"})," for the current project."]}),"\n",(0,r.jsx)(n.h3,{id:"imports",children:(0,r.jsx)(n.code,{children:"imports"})}),"\n",(0,r.jsxs)(n.p,{children:["Type: ",(0,r.jsx)(n.a,{href:"/docs/api/interfaces/Config#imports",children:(0,r.jsx)(n.code,{children:"[key: string]: string"})})]}),"\n",(0,r.jsxs)(n.p,{children:["Default: ",(0,r.jsx)(n.code,{children:"{}"})]}),"\n",(0,r.jsxs)(n.p,{children:["Allows specifying custom ",(0,r.jsx)(n.a,{href:"https://github.com/WICG/import-maps",children:"import maps"})," for ",(0,r.jsx)(n.a,{href:"/docs/features/module-resolution#custom-module-resolution",children:"module imports"}),"."]}),"\n",(0,r.jsx)(n.p,{children:"For example, adding this JavaScript code:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"import moment from 'moment';\nimport { partition } from 'lodash';\n"})}),"\n",(0,r.jsx)(n.p,{children:"would add this import map in the result page:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:' + + +`,m=` + + +
+ +`.trimStart();return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t,{className:`container_Egsj ${e.className}`,style:{height:o||"50vh",...e.style},appUrl:c.G,...e,config:{theme:a,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,i.jsx)(u,{js:p,ts:j,react:f,vue:x,svelte:m})]})}},8294:function(e,n,s){s.d(n,{T:function(){return r},r:function(){return d}});var i=s(7728);async function r(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(n=e,e=null);let{config:s={},headless:i,loading:r="lazy",view:o}=n,t=i||"headless"===o,c=null,l=null;if("string"==typeof e)c=document.querySelector(e);else if(e instanceof HTMLElement)c=e;else if(!(t&&"object"==typeof e))throw Error("A valid container element is required.");if(!c){if(t)S(c=document.createElement("div")),document.body.appendChild(c);else throw Error(`Cannot find element: "${e}"`)}let a=new URL(d(n)),h=a.origin;a.searchParams.set("embed","true"),a.searchParams.set("loading",t?"eager":r);let p=globalThis.process;a.searchParams.set("sdkVersion",p?.env?.SDK_VERSION||"latest"),"object"==typeof s&&Object.keys(s).length>0&&a.searchParams.set("config","sdk");let j=n.params;"object"==typeof j&&Object.keys(j).length>0&&JSON.stringify(j).length<1800&&Object.keys(j).forEach(e=>{a.searchParams.set(e,encodeURIComponent(String(j[e])))});let f=!1,u="Cannot call API methods after calling `destroy()`.",x=await new Promise(e=>{if(!c)return;let n=c.dataset.height||c.style.height;if(n&&!t){let e=isNaN(Number(n))?n:n+"px";c.style.height=e}"false"===c.dataset.defaultStyles||t||(c.style.backgroundColor||="#fff",c.style.border||="1px solid black",c.style.borderRadius||="8px",c.style.boxSizing||="border-box",c.style.padding||="0",c.style.width||="100%",c.style.height||=c.style.height||"300px",c.style.minHeight="200px",c.style.flexGrow="1",c.style.overflow||="hidden",c.style.resize||="vertical");let i="livecodes",d=c.querySelector(`iframe.${i}`),o=d||document.createElement("iframe");o.classList.add(i),o.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),o.setAttribute("allowtransparency","true"),o.setAttribute("allowpaymentrequest","true"),o.setAttribute("allowfullscreen","true"),o.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),o.setAttribute("loading","eager"===r?"eager":"lazy"),t?S(o):(o.style.height="100%",o.style.minHeight="200px",o.style.width="100%",o.style.margin="0",o.style.border="0",o.style.borderRadius=c.style.borderRadius),addEventListener("message",function e(n){n.source===o.contentWindow&&n.origin===h&&n.data?.type==="livecodes-init"&&(removeEventListener("message",e),l=Number(n.data.payload.appVersion.replace(/^v/,"")))}),(!l||l<46)&&addEventListener("message",function e(n){n.source===o.contentWindow&&n.origin===h&&n.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),o.contentWindow?.postMessage({type:"livecodes-config",payload:s},h))}),o.onload=()=>{e(o)},o.src=a.href,d||c.appendChild(o)}),m=new Promise(e=>{addEventListener("message",function n(s){s.source===x.contentWindow&&s.origin===h&&s.data?.type==="livecodes-ready"&&(removeEventListener("message",n),e(),m.settled=!0)})}),g=()=>f?Promise.reject(u):new Promise(async e=>{m.settled&&e(),x.contentWindow?.postMessage({type:"livecodes-load"},h),await m,e()}),y=(e,n)=>new Promise(async(s,i)=>{if(f)return i(u);await g();let r=D();addEventListener("message",function n(d){if(d.source===x.contentWindow&&d.origin===h&&d.data?.type==="livecodes-api-response"&&d.data?.id===r&&d.data.method===e){removeEventListener("message",n);let e=d.data.payload;e?.error?i(e.error):s(e)}}),x.contentWindow?.postMessage({method:e,id:r,args:n},h)}),v={},b=["load","ready","code","console","tests","destroy"],w=(e,n)=>{if(f)throw Error(u);return b.includes(e)?(y("watch",[e]),v[e]||(v[e]=[]),v[e]?.push(n),{remove:()=>{v[e]=v[e]?.filter(e=>e!==n),v[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},C=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let n=C(e.data?.type??"");if(e.source!==x.contentWindow||e.origin!==h||!n||!v[n])return;let s=e.data?.payload;v[n]?.forEach(e=>{e(s)})});let T=()=>{Object.values(v).forEach(e=>{e.length=0}),x?.remove?.(),f=!0};function S(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===r&&"IntersectionObserver"in window&&new IntersectionObserver((e,n)=>{e.forEach(async e=>{e.isIntersecting&&(await g(),n.unobserve(c))})},{rootMargin:"150px"}).observe(c);let D=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>g(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,n)=>y("show",[e,n]),runTests:()=>y("runTests"),onChange:e=>w("code",e),watch:w,exec:function(e){for(var n=arguments.length,s=Array(n>1?n-1:0),i=1;im.settled?y("destroy").then(T):f?Promise.reject(u):(T(),Promise.resolve())}}function d(){let e,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:s="https://livecodes.io",params:r={},config:d={},headless:o,import:t,lite:c,view:l,...a}=n;try{e=new URL(s)}catch{throw Error(`${s} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(a).forEach(n=>{let[s,i]=n;void 0!==i&&e.searchParams.set(s,String(i))});let p="headless"===n.view||o;if(c&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof d&&null==d.mode?d.mode="lite":e.searchParams.set("lite","true")),l&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof d&&null==d.view&&"headless"!==l?d.view=l:e.searchParams.set("view",l)),"string"==typeof d)try{new URL(d),e.searchParams.set("config",encodeURIComponent(d))}catch{throw Error('"config" is not a valid URL or configuration object.')}else d&&"object"==typeof d&&Object.keys(d).length>0&&(d.title&&"Untitled Project"!==d.title&&e.searchParams.set("title",d.title),d.description&&d.description.length>0&&e.searchParams.set("description",d.description),h.set("config","code/"+(0,i.compressToEncodedURIComponent)(JSON.stringify(d))));if(r&&"object"==typeof r&&Object.keys(r).length>0)try{h.set("params",(0,i.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(n=>{e.searchParams.set(n,encodeURIComponent(String(r[n])))})}return t&&e.searchParams.set("x",encodeURIComponent(t)),p&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,n,s){s.d(n,{Z:function(){return t},a:function(){return o}});var i=s(7294);let r={},d=i.createContext(r);function o(e){let n=i.useContext(d);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function t(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),i.createElement(d.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/ffbac226.5778b982.js b/docs/assets/js/ffbac226.5778b982.js new file mode 100644 index 0000000..cc4094c --- /dev/null +++ b/docs/assets/js/ffbac226.5778b982.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["9699"],{3510:function(e,n,t){t.r(n),t.d(n,{default:()=>d,frontMatter:()=>r,metadata:()=>o,assets:()=>c,toc:()=>i,contentTitle:()=>l});var o=JSON.parse('{"id":"languages/go","title":"Go (Golang)","description":"TODO...","source":"@site/docs/languages/go.mdx","sourceDirName":"languages","slug":"/languages/go","permalink":"/docs/languages/go","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/go.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Gleam","permalink":"/docs/languages/gleam"},"next":{"title":"Haml","permalink":"/docs/languages/haml"}}'),a=t("5893"),s=t("65");let r={},l="Go (Golang)",c={},i=[];function u(e){let n={h1:"h1",header:"header",p:"p",...(0,s.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.header,{children:(0,a.jsx)(n.h1,{id:"go-golang",children:"Go (Golang)"})}),"\n",(0,a.jsx)(n.p,{children:"TODO..."})]})}function d(e={}){let{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(u,{...e})}):u(e)}},65:function(e,n,t){t.d(n,{Z:function(){return l},a:function(){return r}});var o=t(7294);let a={},s=o.createContext(a);function r(e){let n=o.useContext(s);return o.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:r(e.components),o.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/main.72616d8f.js b/docs/assets/js/main.72616d8f.js new file mode 100644 index 0000000..99611d2 --- /dev/null +++ b/docs/assets/js/main.72616d8f.js @@ -0,0 +1,51 @@ +(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["6119"],{4443:function(e,t,n){"use strict";n.d(t,{D4:function(){return t7},He:function(){return t6},as:function(){return C}});var r=n(7294);function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n=0;--o){var i=this.tryEntries[o],s=i.completion;if("root"===i.tryLoc)return a("end");if(i.tryLoc<=this.prev){var l=r.call(i,"catchLoc"),c=r.call(i,"finallyLoc");if(l&&c){if(this.prev=0;--n){var a=this.tryEntries[n];if(a.tryLoc<=this.prev&&r.call(a,"finallyLoc")&&this.prev=0;--t){var n=this.tryEntries[t];if(n.finallyLoc===e)return this.complete(n.completion,n.afterLoc),O(n),g}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.tryLoc===e){var r=n.completion;if("throw"===r.type){var a=r.arg;O(n)}return a}}throw Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:j(t),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=e),g}},t}function v(e,t){return(v=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}function S(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,o,i,s=[],l=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=o.call(n)).done)&&(s.push(r.value),s.length!==t);l=!0);}catch(e){c=!0,a=e}finally{try{if(!l&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(c)throw a}}return s}}(e,t)||x(e,t)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function w(e){return function(e){if(Array.isArray(e))return a(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||x(e)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function x(e,t){if(e){if("string"==typeof e)return a(e,t);var n=({}).toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(e,t):void 0}}function k(e){var t="function"==typeof Map?new Map:void 0;return(k=function(e){if(null===e||!function(e){try{return -1!==Function.toString.call(e).indexOf("[native code]")}catch(t){return"function"==typeof e}}(e))return e;if("function"!=typeof e)throw TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,n)}function n(){return function(e,t,n){if(m())return Reflect.construct.apply(null,arguments);var r=[null];r.push.apply(r,t);var a=new(e.bind.apply(e,r));return n&&v(a,n.prototype),a}(e,arguments,f(this).constructor)}return n.prototype=Object.create(e.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),v(n,e)})(e)}function _(){return r.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},r.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}function E(){return r.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20","aria-hidden":"true"},r.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}n(3935);var P=["translations"],O="Ctrl",C=r.forwardRef(function(e,t){var n=e.translations,a=void 0===n?{}:n,o=b(e,P),i=a.buttonText,s=a.buttonAriaLabel,l=S((0,r.useState)(null),2),c=l[0],u=l[1];(0,r.useEffect)(function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?u("\u2318"):u(O))},[]);var f=S(c===O?[O,"Ctrl",r.createElement(_,null)]:["Meta","Command",c],3),p=f[0],m=f[1],g=f[2];return r.createElement("button",d({type:"button",className:"DocSearch DocSearch-Button","aria-label":"".concat(void 0===s?"Search":s," (").concat(m,"+K)")},o,{ref:t}),r.createElement("span",{className:"DocSearch-Button-Container"},r.createElement(E,null),r.createElement("span",{className:"DocSearch-Button-Placeholder"},void 0===i?"Search":i)),r.createElement("span",{className:"DocSearch-Button-Keys"},null!==c&&r.createElement(r.Fragment,null,r.createElement(j,{reactsToKey:p},g),r.createElement(j,{reactsToKey:"k"},"K"))))});function j(e){var t=e.reactsToKey,n=e.children,a=S((0,r.useState)(!1),2),o=a[0],i=a[1];return(0,r.useEffect)(function(){if(t)return window.addEventListener("keydown",e),window.addEventListener("keyup",n),function(){window.removeEventListener("keydown",e),window.removeEventListener("keyup",n)};function e(e){e.key===t&&i(!0)}function n(e){e.key!==t&&"Meta"!==e.key||i(!1)}},[t]),r.createElement("kbd",{className:o?"DocSearch-Button-Key DocSearch-Button-Key--pressed":"DocSearch-Button-Key"},n)}function T(e,t){var n=void 0;return function(){for(var r=arguments.length,a=Array(r),o=0;oe.length)&&(t=e.length);for(var n=0,r=Array(t);ne.length)&&(t=e.length);for(var n=0,r=Array(t);n=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function Z(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function W(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=Array(t);n=3||2===r&&a>=4||1===r&&a>=10);function i(t,n,r){if(o&&void 0!==r){var a=r[0].__autocomplete_algoliaCredentials,i={"X-Algolia-Application-Id":a.appId,"X-Algolia-API-Key":a.apiKey};e.apply(void 0,[t].concat(U(n),[{headers:i}]))}else e.apply(void 0,[t].concat(U(n)))}return{init:function(t,n){e("init",{appId:t,apiKey:n})},setAuthenticatedUserToken:function(t){e("setAuthenticatedUserToken",t)},setUserToken:function(t){e("setUserToken",t)},clickedObjectIDsAfterSearch:function(){for(var e=arguments.length,t=Array(e),n=0;n0&&i("clickedObjectIDsAfterSearch",V(t),t[0].items)},clickedObjectIDs:function(){for(var e=arguments.length,t=Array(e),n=0;n0&&i("clickedObjectIDs",V(t),t[0].items)},clickedFilters:function(){for(var t=arguments.length,n=Array(t),r=0;r0&&e.apply(void 0,["clickedFilters"].concat(n))},convertedObjectIDsAfterSearch:function(){for(var e=arguments.length,t=Array(e),n=0;n0&&i("convertedObjectIDsAfterSearch",V(t),t[0].items)},convertedObjectIDs:function(){for(var e=arguments.length,t=Array(e),n=0;n0&&i("convertedObjectIDs",V(t),t[0].items)},convertedFilters:function(){for(var t=arguments.length,n=Array(t),r=0;r0&&e.apply(void 0,["convertedFilters"].concat(n))},viewedObjectIDs:function(){for(var e=arguments.length,t=Array(e),n=0;n0&&t.reduce(function(e,t){var n=t.items,r=q(t,B);return[].concat(U(e),U((function(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:20,n=[],r=0;r0&&e.apply(void 0,["viewedFilters"].concat(n))}}}(c),d={current:[]},f=T(function(e){var t=e.state;if(t.isOpen){var n=t.collections.reduce(function(e,t){return[].concat(Y(e),Y(t.items))},[]).filter(G);(function e(t,n){if(t===n)return!0;if(L(t)||L(n)||"function"==typeof t||"function"==typeof n)return t===n;if(Object.keys(t).length!==Object.keys(n).length)return!1;for(var r=0,a=Object.keys(t);r0&&en({onItemsChange:o,items:n,insights:u,state:t}))}},0);return{name:"aa.algoliaInsightsPlugin",subscribe:function(e){var t=e.setContext,n=e.onSelect,r=e.onActive;function a(e){var n;t({algoliaInsightsPlugin:{__algoliaSearchParameters:J(J({},l?{clickAnalytics:!0}:{}),e?{userToken:"number"==typeof(n=e)?n.toString():n}:{}),insights:u}})}c("addAlgoliaAgent","insights-plugin"),a(),c("onUserTokenChange",function(e){a(e)}),c("getUserToken",null,function(e,t){a(t)}),n(function(e){var t=e.item,n=e.state,r=e.event,a=e.source;G(t)&&i({state:n,event:r,insights:u,item:t,insightsEvents:[J({eventName:"Item Selected"},M({item:t,items:a.getItems().filter(G)}))]})}),r(function(e){var t=e.item,n=e.source,r=e.state,a=e.event;G(t)&&s({state:r,event:a,insights:u,item:t,insightsEvents:[J({eventName:"Item Active"},M({item:t,items:n.getItems().filter(G)}))]})})},onStateChange:function(e){f({state:e.state})},__autocomplete_pluginOptions:e}}function ea(){var e,t=arguments.length>1?arguments[1]:void 0;return[].concat(Y(arguments.length>0&&void 0!==arguments[0]?arguments[0]:[]),["autocomplete-internal"],Y(null!==(e=t.algoliaInsightsPlugin)&&void 0!==e&&e.__automaticInsights?["autocomplete-automatic"]:[]))}function eo(e){return function e(t,n){return{then:function(r,a){return e(t.then(ei(r,n,t),ei(a,n,t)),n)},catch:function(r){return e(t.catch(ei(r,n,t)),n)},finally:function(r){return r&&n.onCancelList.push(r),e(t.finally(ei(r&&function(){return n.onCancelList=[],r()},n,t)),n)},cancel:function(){n.isCanceled=!0;var e=n.onCancelList;n.onCancelList=[],e.forEach(function(e){e()})},isCanceled:function(){return!0===n.isCanceled}}}(e,{isCanceled:!1,onCancelList:[]})}function ei(e,t,n){return e?function(n){return t.isCanceled?n:e(n)}:n}function es(e,t,n,r){if(!n)return null;if(e<0&&(null===t||null!==r&&0===t))return n+e;var a=(null===t?-1:t)+e;return a<=-1||a>=n?null===r?null:0:a}function el(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function ec(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=Array(t);ne.length)&&(t=e.length);for(var n=0,r=Array(t);n=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}(e,eD);eU&&a.environment.clearTimeout(eU);var c=l.setCollections,u=l.setIsOpen,d=l.setQuery,f=l.setActiveItemId,p=l.setStatus,m=l.setContext;if(d(o),f(a.defaultActiveItemId),!o&&!1===a.openOnFocus){var g,h=s.getState().collections.map(function(e){return eF(eF({},e),{},{items:[]})});p("idle"),c(h),u(null!==(g=r.isOpen)&&void 0!==g?g:a.shouldPanelOpen({state:s.getState()}));var b=eo(eH(h).then(function(){return Promise.resolve()}));return s.pendingRequests.add(b)}p("loading"),eU=a.environment.setTimeout(function(){p("stalled")},a.stallThreshold);var y=eo(eH(a.getSources(eF({query:o,refresh:i,state:s.getState()},l)).then(function(e){return Promise.all(e.map(function(e){return Promise.resolve(e.getItems(eF({query:o,refresh:i,state:s.getState()},l))).then(function(t){return function(e,t,n){if(null==e?void 0:e.execute){var r="algolia"===e.requesterId?Object.assign.apply(Object,[{}].concat(eA(Object.keys(n.context).map(function(e){var t;return null===(t=n.context[e])||void 0===t?void 0:t.__algoliaSearchParameters})))):{};return eT(eT({},e),{},{requests:e.queries.map(function(n){return{query:"algolia"===e.requesterId?eT(eT({},n),{},{params:eT(eT({},r),n.params)}):n,sourceId:t,transformResponse:e.transformResponse}})})}return{items:e,sourceId:t}}(t,e.sourceId,s.getState())})})).then(eL).then(function(t){var n,r=t.some(function(e){var t;return!Array.isArray(t=e.items)&&!!(null==t?void 0:t._automaticInsights)});return r&&m({algoliaInsightsPlugin:eF(eF({},(null===(n=s.getState().context)||void 0===n?void 0:n.algoliaInsightsPlugin)||{}),{},{__automaticInsights:r})}),e.map(function(e){var n=t.filter(function(t){return t.sourceId===e.sourceId}),r=n.map(function(e){return e.items}),a=n[0].transformResponse,o=a?a({results:r,hits:r.map(function(e){return e.hits}).filter(Boolean),facetHits:r.map(function(e){var t;return null===(t=e.facetHits)||void 0===t?void 0:t.map(function(e){return{label:e.value,count:e.count,_highlightResult:{label:{value:e.highlighted}}}})}).filter(Boolean)}):r;return e.onResolve({source:e,results:r,items:o,state:s.getState()}),o.every(Boolean),'The `getItems` function from source "'.concat(e.sourceId,'" must return an array of items but returned ').concat(JSON.stringify(void 0),".\n\nDid you forget to return items?\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"),{source:e,items:o}})}).then(function(e){var t,n,r,o,i,l;return n=(t={collections:e,props:a,state:s.getState()}).collections,r=t.props,o=t.state,i=n.reduce(function(e,t){return eP(eP({},e),{},eO({},t.source.sourceId,eP(eP({},t.source),{},{getItems:function(){return A(t.items)}})))},{}),l=r.plugins.reduce(function(e,t){return t.reshape?t.reshape(e):e},{sourcesBySourceId:i,state:o}).sourcesBySourceId,A(r.reshape({sourcesBySourceId:l,sources:Object.values(l),state:o})).filter(Boolean).map(function(e){return{source:e,items:e.getItems()}})})}))).then(function(e){p("idle"),c(e);var n,d=a.shouldPanelOpen({state:s.getState()});u(null!==(n=r.isOpen)&&void 0!==n?n:a.openOnFocus&&!o&&d||d);var f=ed(s.getState());if(null!==s.getState().activeItemId&&f){var m=f.item,g=f.itemInputValue,h=f.itemUrl,b=f.source;b.onActive(eF({event:t,item:m,itemInputValue:g,itemUrl:h,refresh:i,source:b,state:s.getState()},l))}}).finally(function(){p("idle"),eU&&a.environment.clearTimeout(eU)});return s.pendingRequests.add(y)}function eZ(e){return(eZ="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var eW=["event","props","refresh","store"];function eV(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function eG(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function e6(e){return(e6="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function e7(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function e9(e,t,n){var r;return(r=function(e,t){if("object"!==e6(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==e6(r))return r;throw TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(t,"string"),(t="symbol"===e6(r)?r:String(r))in e)?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function e5(e){var t,n=e.state;return!1===n.isOpen||null===n.activeItemId?null:(null===(t=ed(n))||void 0===t?void 0:t.itemInputValue)||null}function e8(e){return(e8="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function te(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function tt(e){for(var t=1;t0&&r.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},r.createElement("p",{className:"DocSearch-Help"},void 0===i?"Try searching for":i,":"),r.createElement("ul",null,c.slice(0,3).reduce(function(e,t){return[].concat(w(e),[r.createElement("li",{key:t},r.createElement("button",{className:"DocSearch-Prefill",key:t,type:"button",onClick:function(){a.setQuery(t.toLowerCase()+" "),a.refresh(),a.inputRef.current.focus()}},t))])},[]))),a.getMissingResultsUrl&&r.createElement("p",{className:"DocSearch-Help"},"".concat(void 0===s?"Believe this query should return results?":s," "),r.createElement("a",{href:a.getMissingResultsUrl({query:a.state.query}),target:"_blank",rel:"noopener noreferrer"},void 0===l?"Let us know.":l)))}var t_=["hit","attribute","tagName"];function tE(e,t){return t.split(".").reduce(function(e,t){return null!=e&&e[t]?e[t]:null},e)}function tP(e){var t=e.hit,n=e.attribute,a=e.tagName,o=b(e,t_);return(0,r.createElement)(void 0===a?"span":a,h(h({},o),{},{dangerouslySetInnerHTML:{__html:tE(t,"_snippetResult.".concat(n,".value"))||tE(t,n)}}))}function tO(e){return e.collection&&0!==e.collection.items.length?r.createElement("section",{className:"DocSearch-Hits"},r.createElement("div",{className:"DocSearch-Hit-source"},e.title),r.createElement("ul",e.getListProps(),e.collection.items.map(function(t,n){return r.createElement(tC,d({key:[e.title,t.objectID].join(":"),item:t,index:n},e))}))):null}function tC(e){var t=e.item,n=e.index,a=e.renderIcon,o=e.renderAction,i=e.getItemProps,s=e.onItemClick,l=e.collection,c=e.hitComponent,u=S(r.useState(!1),2),f=u[0],p=u[1],m=S(r.useState(!1),2),g=m[0],h=m[1],b=r.useRef(null);return r.createElement("li",d({className:["DocSearch-Hit",t.__docsearch_parent&&"DocSearch-Hit--Child",f&&"DocSearch-Hit--deleting",g&&"DocSearch-Hit--favoriting"].filter(Boolean).join(" "),onTransitionEnd:function(){b.current&&b.current()}},i({item:t,source:l.source,onClick:function(e){s(t,e)}})),r.createElement(c,{hit:t},r.createElement("div",{className:"DocSearch-Hit-Container"},a({item:t,index:n}),t.hierarchy[t.type]&&"lvl1"===t.type&&r.createElement("div",{className:"DocSearch-Hit-content-wrapper"},r.createElement(tP,{className:"DocSearch-Hit-title",hit:t,attribute:"hierarchy.lvl1"}),t.content&&r.createElement(tP,{className:"DocSearch-Hit-path",hit:t,attribute:"content"})),t.hierarchy[t.type]&&("lvl2"===t.type||"lvl3"===t.type||"lvl4"===t.type||"lvl5"===t.type||"lvl6"===t.type)&&r.createElement("div",{className:"DocSearch-Hit-content-wrapper"},r.createElement(tP,{className:"DocSearch-Hit-title",hit:t,attribute:"hierarchy.".concat(t.type)}),r.createElement(tP,{className:"DocSearch-Hit-path",hit:t,attribute:"hierarchy.lvl1"})),"content"===t.type&&r.createElement("div",{className:"DocSearch-Hit-content-wrapper"},r.createElement(tP,{className:"DocSearch-Hit-title",hit:t,attribute:"content"}),r.createElement(tP,{className:"DocSearch-Hit-path",hit:t,attribute:"hierarchy.lvl1"})),o({item:t,runDeleteTransition:function(e){p(!0),b.current=e},runFavoriteTransition:function(e){h(!0),b.current=e}}))))}function tj(e,t,n){return e.reduce(function(e,r){var a=t(r);return e.hasOwnProperty(a)||(e[a]=[]),e[a].length<(n||5)&&e[a].push(r),e},{})}function tT(e){return e}function tA(e){return 1===e.button||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey}function tI(){}var tN=/(|<\/mark>)/g,tL=RegExp(tN.source);function tR(e){if(!e.__docsearch_parent&&!e._highlightResult)return e.hierarchy.lvl0;var t,n,r=e.__docsearch_parent?null===(t=e.__docsearch_parent)||void 0===t||null===(t=t._highlightResult)||void 0===t||null===(t=t.hierarchy)||void 0===t?void 0:t.lvl0:null===(n=e._highlightResult)||void 0===n||null===(n=n.hierarchy)||void 0===n?void 0:n.lvl0;return r?r.value&&tL.test(r.value)?r.value.replace(tN,""):r.value:e.hierarchy.lvl0}function tD(e){return r.createElement("div",{className:"DocSearch-Dropdown-Container"},e.state.collections.map(function(t){if(0===t.items.length)return null;var n=tR(t.items[0]);return r.createElement(tO,d({},e,{key:t.source.sourceId,title:n,collection:t,renderIcon:function(e){var n,a=e.item,o=e.index;return r.createElement(r.Fragment,null,a.__docsearch_parent&&r.createElement("svg",{className:"DocSearch-Hit-Tree",viewBox:"0 0 24 54"},r.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},a.__docsearch_parent!==(null===(n=t.items[o+1])||void 0===n?void 0:n.__docsearch_parent)?r.createElement("path",{d:"M8 6v21M20 27H8.3"}):r.createElement("path",{d:"M8 6v42M20 27H8.3"}))),r.createElement("div",{className:"DocSearch-Hit-icon"},r.createElement(tg,{type:a.type})))},renderAction:function(){return r.createElement("div",{className:"DocSearch-Hit-action"},r.createElement(tp,null))}}))}),e.resultsFooterComponent&&r.createElement("section",{className:"DocSearch-HitsFooter"},r.createElement(e.resultsFooterComponent,{state:e.state})))}var tM=["translations"];function tF(e){var t=e.translations,n=void 0===t?{}:t,a=b(e,tM),o=n.recentSearchesTitle,i=n.noRecentSearchesText,s=n.saveRecentSearchButtonTitle,l=void 0===s?"Save this search":s,c=n.removeRecentSearchButtonTitle,u=void 0===c?"Remove this search from history":c,f=n.favoriteSearchesTitle,p=n.removeFavoriteSearchButtonTitle,m=void 0===p?"Remove this search from favorites":p;return"idle"===a.state.status&&!1===a.hasCollections?a.disableUserPersonalization?null:r.createElement("div",{className:"DocSearch-StartScreen"},r.createElement("p",{className:"DocSearch-Help"},void 0===i?"No recent searches":i)):!1===a.hasCollections?null:r.createElement("div",{className:"DocSearch-Dropdown-Container"},r.createElement(tO,d({},a,{title:void 0===o?"Recent":o,collection:a.state.collections[0],renderIcon:function(){return r.createElement("div",{className:"DocSearch-Hit-icon"},r.createElement(td,null))},renderAction:function(e){var t=e.item,n=e.runFavoriteTransition,o=e.runDeleteTransition;return r.createElement(r.Fragment,null,r.createElement("div",{className:"DocSearch-Hit-action"},r.createElement("button",{className:"DocSearch-Hit-action-button",title:l,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),n(function(){a.favoriteSearches.add(t),a.recentSearches.remove(t),a.refresh()})}},r.createElement(ty,null))),r.createElement("div",{className:"DocSearch-Hit-action"},r.createElement("button",{className:"DocSearch-Hit-action-button",title:u,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),o(function(){a.recentSearches.remove(t),a.refresh()})}},r.createElement(tf,null))))}})),r.createElement(tO,d({},a,{title:void 0===f?"Favorite":f,collection:a.state.collections[1],renderIcon:function(){return r.createElement("div",{className:"DocSearch-Hit-icon"},r.createElement(ty,null))},renderAction:function(e){var t=e.item,n=e.runDeleteTransition;return r.createElement("div",{className:"DocSearch-Hit-action"},r.createElement("button",{className:"DocSearch-Hit-action-button",title:m,type:"submit",onClick:function(e){e.preventDefault(),e.stopPropagation(),n(function(){a.favoriteSearches.remove(t),a.refresh()})}},r.createElement(tf,null)))}})))}var tz=["translations"],tB=r.memo(function(e){var t=e.translations,n=void 0===t?{}:t,a=b(e,tz);if("error"===a.state.status)return r.createElement(tw,{translations:null==n?void 0:n.errorScreen});var o=a.state.collections.some(function(e){return e.items.length>0});return a.state.query?!1===o?r.createElement(tk,d({},a,{translations:null==n?void 0:n.noResultsScreen})):r.createElement(tD,a):r.createElement(tF,d({},a,{hasCollections:o,translations:null==n?void 0:n.startScreen}))},function(e,t){return"loading"===t.state.status||"stalled"===t.state.status}),t$=["translations"];function tU(e){var t=e.translations,n=void 0===t?{}:t,a=b(e,t$),o=n.resetButtonTitle,i=n.resetButtonAriaLabel,s=n.cancelButtonText,l=n.cancelButtonAriaLabel,c=n.searchInputLabel,u=a.getFormProps({inputElement:a.inputRef.current}).onReset;return r.useEffect(function(){a.autoFocus&&a.inputRef.current&&a.inputRef.current.focus()},[a.autoFocus,a.inputRef]),r.useEffect(function(){a.isFromSelection&&a.inputRef.current&&a.inputRef.current.select()},[a.isFromSelection,a.inputRef]),r.createElement(r.Fragment,null,r.createElement("form",{className:"DocSearch-Form",onSubmit:function(e){e.preventDefault()},onReset:u},r.createElement("label",d({className:"DocSearch-MagnifierLabel"},a.getLabelProps()),r.createElement(E,null),r.createElement("span",{className:"DocSearch-VisuallyHiddenForAccessibility"},void 0===c?"Search":c)),r.createElement("div",{className:"DocSearch-LoadingIndicator"},r.createElement(tu,null)),r.createElement("input",d({className:"DocSearch-Input",ref:a.inputRef},a.getInputProps({inputElement:a.inputRef.current,autoFocus:a.autoFocus,maxLength:64}))),r.createElement("button",{type:"reset",title:void 0===o?"Clear the query":o,className:"DocSearch-Reset","aria-label":void 0===i?"Clear the query":i,hidden:!a.state.query},r.createElement(tf,null))),r.createElement("button",{className:"DocSearch-Cancel",type:"reset","aria-label":void 0===l?"Cancel":l,onClick:a.onClose},void 0===s?"Cancel":s))}var tH=["_highlightResult","_snippetResult"];function tq(e){var t=e.key,n=e.limit,r=void 0===n?5:n,a=!1===function(){var e="__TEST_KEY__";try{return localStorage.setItem(e,""),localStorage.removeItem(e),!0}catch(e){return!1}}()?{setItem:function(){},getItem:function(){return[]}}:{setItem:function(e){return window.localStorage.setItem(t,JSON.stringify(e))},getItem:function(){var e=window.localStorage.getItem(t);return e?JSON.parse(e):[]}},o=a.getItem().slice(0,r);return{add:function(e){e._highlightResult,e._snippetResult;var t=b(e,tH),n=o.findIndex(function(e){return e.objectID===t.objectID});n>-1&&o.splice(n,1),o.unshift(t),o=o.slice(0,r),a.setItem(o)},remove:function(e){o=o.filter(function(t){return t.objectID!==e.objectID}),a.setItem(o)},getAll:function(){return o}}}function tZ(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{serializable:!0},t={};return{get:function(n,r){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},o=JSON.stringify(n);if(o in t)return Promise.resolve(e.serializable?JSON.parse(t[o]):t[o]);var i=r();return i.then(function(e){return a.miss(e)}).then(function(){return i})},set:function(n,r){return t[JSON.stringify(n)]=e.serializable?JSON.stringify(r):r,Promise.resolve(r)},delete:function(e){return delete t[JSON.stringify(e)],Promise.resolve()},clear:function(){return t={},Promise.resolve()}}}function tW(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"up",n=Date.now();return h(h({},e),{},{status:t,lastUpdate:n,isUp:function(){return"up"===t||Date.now()-n>12e4},isTimedOut:function(){return"timed out"===t&&Date.now()-n<=12e4}})}var tV=function(){function e(t,n){var r;return l(this,e),u(r=s(this,e,[t]),"name","AlgoliaError"),n&&(r.name=n),r}return p(e,k(Error)),c(e)}(),tG=function(){function e(t,n,r){var a;return l(this,e),u(a=s(this,e,[t,r]),"stackTrace",void 0),a.stackTrace=n,a}return p(e,tV),c(e)}(),tK=function(){function e(t){return l(this,e),s(this,e,["Unreachable hosts - your application id may be incorrect. If the error persists, please reach out to the Algolia Support team: https://alg.li/support.",t,"RetryError"])}return p(e,tG),c(e)}(),tY=function(){function e(t,n,r){var a,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"ApiError";return l(this,e),u(a=s(this,e,[t,r,o]),"status",void 0),a.status=n,a}return p(e,tG),c(e)}(),tQ=function(){function e(t,n){var r;return l(this,e),u(r=s(this,e,[t,"DeserializationError"]),"response",void 0),r.response=n,r}return p(e,tV),c(e)}(),tX=function(){function e(t,n,r,a){var o;return l(this,e),u(o=s(this,e,[t,n,a,"DetailedApiError"]),"error",void 0),o.error=r,o}return p(e,tY),c(e)}();function tJ(e){var t=e.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return h(h({},e),{},{request:h(h({},e.request),{},{headers:h(h({},e.request.headers),t)})})}var t0=["appId","apiKey","authMode","algoliaAgents"],t1=["params"],t2="5.19.0",t4="3.9.0",t3=["footer","searchBox"];function t6(e){var t,n,a,o,s,l,c,u=e.appId,f=e.apiKey,p=e.indexName,m=e.placeholder,g=void 0===m?"Search docs":m,v=e.searchParameters,x=e.maxResultsPerGroup,k=e.onClose,_=void 0===k?tI:k,E=e.transformItems,P=void 0===E?tT:E,O=e.hitComponent,C=e.resultsFooterComponent,j=e.navigator,T=e.initialScrollY,L=void 0===T?0:T,M=e.transformSearchClient,F=e.disableUserPersonalization,z=void 0!==F&&F,B=e.initialQuery,$=e.translations,U=void 0===$?{}:$,H=e.getMissingResultsUrl,q=e.insights,Z=void 0!==q&&q,W=U.footer,V=U.searchBox,G=b(U,t3),K=S(r.useState({query:"",collections:[],completion:null,context:{},isOpen:!1,activeItemId:null,status:"idle"}),2),Y=K[0],Q=K[1],X=r.useRef(null),J=r.useRef(null),ee=r.useRef(null),et=r.useRef(null),en=r.useRef(null),ea=r.useRef(10),eo=r.useRef("undefined"!=typeof window?window.getSelection().toString().slice(0,64):"").current,ei=r.useRef((void 0===B?"":B)||eo).current,es=(t=void 0===M?tT:M,r.useMemo(function(){var e=function(e,t,n){var r,a,o,s,l,c,u,d,f,p,m,g,v,x,k;if(!e||"string"!=typeof e)throw Error("`appId` is missing.");if(!t||"string"!=typeof t)throw Error("`apiKey` is missing.");return f=(r=h({appId:e,apiKey:t,timeouts:{connect:1e3,read:2e3,write:3e4},logger:{debug:function(e,t){return Promise.resolve()},info:function(e,t){return Promise.resolve()},error:function(e,t){return Promise.resolve()}},requester:{send:function(e){return new Promise(function(t){var n=new XMLHttpRequest;n.open(e.method,e.url,!0),Object.keys(e.headers).forEach(function(t){return n.setRequestHeader(t,e.headers[t])});var r,a=function(e,r){return setTimeout(function(){n.abort(),t({status:0,content:r,isTimedOut:!0})},e)},o=a(e.connectTimeout,"Connection timeout");n.onreadystatechange=function(){n.readyState>n.OPENED&&void 0===r&&(clearTimeout(o),r=a(e.responseTimeout,"Socket timeout"))},n.onerror=function(){0===n.status&&(clearTimeout(o),clearTimeout(r),t({content:n.responseText||"Network request failed",status:n.status,isTimedOut:!1}))},n.onload=function(){clearTimeout(o),clearTimeout(r),t({content:n.responseText,status:n.status,isTimedOut:!1})},n.send(e.data)})}},algoliaAgents:[{segment:"Browser"}],authMode:"WithinQueryParameters",responsesCache:tZ(),requestsCache:tZ({serializable:!1}),hostsCache:function e(t){var n=w(t.caches),r=n.shift();return void 0===r?{get:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return t().then(function(e){return Promise.all([e,n.miss(e)])}).then(function(e){return S(e,1)[0]})},set:function(e,t){return Promise.resolve(t)},delete:function(e){return Promise.resolve()},clear:function(){return Promise.resolve()}}:{get:function(t,a){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return r.get(t,a,o).catch(function(){return e({caches:n}).get(t,a,o)})},set:function(t,a){return r.set(t,a).catch(function(){return e({caches:n}).set(t,a)})},delete:function(t){return r.delete(t).catch(function(){return e({caches:n}).delete(t)})},clear:function(){return r.clear().catch(function(){return e({caches:n}).clear()})}}}({caches:[function(e){var t,n="algolia-client-js-".concat(e.key);function r(){return void 0===t&&(t=e.localStorage||window.localStorage),t}function a(){return JSON.parse(r().getItem(n)||"{}")}function o(e){r().setItem(n,JSON.stringify(e))}return{get:function(t,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return Promise.resolve().then(function(){var n,r;return n=e.timeToLive?1e3*e.timeToLive:null,o(r=Object.fromEntries(Object.entries(a()).filter(function(e){return void 0!==S(e,2)[1].timestamp}))),n&&o(Object.fromEntries(Object.entries(r).filter(function(e){var t=S(e,2)[1],r=(new Date).getTime();return!(t.timestamp+n2&&void 0!==arguments[2]?arguments[2]:"WithinHeaders",r={"x-algolia-api-key":t,"x-algolia-application-id":e};return{headers:function(){return"WithinHeaders"===n?r:{}},queryParameters:function(){return"WithinQueryParameters"===n?r:{}}}}(f,p,m),{transporter:k=function(e){var t=e.hosts,n=e.hostsCache,r=e.baseHeaders,a=e.logger,o=e.baseQueryParameters,s=e.algoliaAgent,l=e.timeouts,c=e.requester,u=e.requestsCache,d=e.responsesCache;function f(){return(f=i(y().mark(function e(t){var r,a,o,i,s;return y().wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,Promise.all(t.map(function(e){return n.get(e,function(){return Promise.resolve(tW(e))})}));case 2:return a=(r=e.sent).filter(function(e){return e.isUp()}),o=r.filter(function(e){return e.isTimedOut()}),s=(i=[].concat(w(a),w(o))).length>0?i:t,e.abrupt("return",{hosts:s,getTimeout:function(e,t){return(0===o.length&&0===e?1:o.length+3+e)*t}});case 8:case"end":return e.stop()}},e)}))).apply(this,arguments)}function p(e,t){return m.apply(this,arguments)}function m(){return(m=i(y().mark(function e(u,d){var p,m,g,b,v,S,x,k,_,E,P,O,C,j=arguments;return y().wrap(function(e){for(;;)switch(e.prev=e.next){case 0:if(p=!(j.length>2&&void 0!==j[2])||j[2],m=[],g=function(e,t){if("GET"!==e.method&&(void 0!==e.data||void 0!==t.data))return JSON.stringify(Array.isArray(e.data)?e.data:h(h({},e.data),t.data))}(u,d),b=function(e,t,n){var r=h(h(h({Accept:"application/json"},e),t),n),a={};return Object.keys(r).forEach(function(e){var t=r[e];a[e.toLowerCase()]=t}),a}(r,u.headers,d.headers),v="GET"===u.method?h(h({},u.data),d.data):{},S=h(h(h({},o),u.queryParameters),v),s.value&&(S["x-algolia-agent"]=s.value),d&&d.queryParameters)for(x=0,k=Object.keys(d.queryParameters);x1&&void 0!==arguments[1]?arguments[1]:{},n=e.useReadTransporter||"GET"===e.method;if(!n)return p(e,t,n);var a=function(){return p(e,t)};if(!0!==(t.cacheable||e.cacheable))return a();var i={request:e,requestOptions:t,transporter:{queryParameters:o,headers:r}};return d.get(i,function(){return u.get(i,function(){return u.set(i,a()).then(function(e){return Promise.all([u.delete(i),e])},function(e){return Promise.all([u.delete(i),Promise.reject(e)])}).then(function(e){var t=S(e,2);return t[0],t[1]})})},{miss:function(e){return d.set(i,e)}})},requestsCache:u,responsesCache:d}}(h(h({hosts:[{url:"".concat(f,"-dsn.algolia.net"),accept:"read",protocol:"https"},{url:"".concat(f,".algolia.net"),accept:"write",protocol:"https"}].concat(function(e){for(var t=e.length-1;t>0;t--){var n=Math.floor(Math.random()*(t+1)),r=e[t];e[t]=e[n],e[n]=r}return e}([{url:"".concat(f,"-1.algolianet.com"),accept:"readWrite",protocol:"https"},{url:"".concat(f,"-2.algolianet.com"),accept:"readWrite",protocol:"https"},{url:"".concat(f,"-3.algolianet.com"),accept:"readWrite",protocol:"https"}]))},v),{},{algoliaAgent:(l=(a={algoliaAgents:g,client:"Lite",version:t2}).algoliaAgents,c=a.client,d=(o=u=a.version,s={value:"Algolia for JavaScript (".concat(o,")"),add:function(e){var t="; ".concat(e.segment).concat(void 0!==e.version?" (".concat(e.version,")"):"");return -1===s.value.indexOf(t)&&(s.value="".concat(s.value).concat(t)),s}}).add({segment:c,version:u}),l.forEach(function(e){return d.add(e)}),d),baseHeaders:h(h({"content-type":"text/plain"},x.headers()),v.baseHeaders),baseQueryParameters:h(h({},x.queryParameters()),v.baseQueryParameters)})),appId:f,apiKey:p,clearCache:function(){return Promise.all([k.requestsCache.clear(),k.responsesCache.clear()]).then(function(){})},get _ua(){return k.algoliaAgent.value},addAlgoliaAgent:function(e,t){k.algoliaAgent.add({segment:e,version:t})},setClientApiKey:function(e){var t=e.apiKey;m&&"WithinHeaders"!==m?k.baseQueryParameters["x-algolia-api-key"]=t:k.baseHeaders["x-algolia-api-key"]=t},searchForHits:function(e,t){return this.search(e,t)},searchForFacets:function(e,t){return this.search(e,t)},customPost:function(e,t){var n=e.path,r=e.parameters,a=e.body;if(!n)throw Error("Parameter `path` is required when calling `customPost`.");var o={method:"POST",path:"/{path}".replace("{path}",n),queryParameters:r||{},headers:{},data:a||{}};return k.request(o,t)},getRecommendations:function(e,t){if(e&&Array.isArray(e)&&(e={requests:e}),!e)throw Error("Parameter `getRecommendationsParams` is required when calling `getRecommendations`.");if(!e.requests)throw Error("Parameter `getRecommendationsParams.requests` is required when calling `getRecommendations`.");var n={method:"POST",path:"/1/indexes/*/recommendations",queryParameters:{},headers:{},data:e,useReadTransporter:!0,cacheable:!0};return k.request(n,t)},search:function(e,t){if(e&&Array.isArray(e)&&(e={requests:e.map(function(e){var t=e.params,n=b(e,t1);return"facet"===n.type?h(h(h({},n),t),{},{type:"facet"}):h(h(h({},n),t),{},{facet:void 0,maxFacetHits:void 0,facetQuery:void 0})})}),!e)throw Error("Parameter `searchMethodParams` is required when calling `search`.");if(!e.requests)throw Error("Parameter `searchMethodParams.requests` is required when calling `search`.");var n={method:"POST",path:"/1/indexes/*/queries",queryParameters:{},headers:{},data:e,useReadTransporter:!0,cacheable:!0};return k.request(n,t)}}}(u,f);return e.addAlgoliaAgent("docsearch",t4),!1===/docsearch.js \(.*\)/.test(e.transporter.algoliaAgent.value)&&e.addAlgoliaAgent("docsearch-react",t4),t(e)},[u,f,t])),el=r.useRef(tq({key:"__DOCSEARCH_FAVORITE_SEARCHES__".concat(p),limit:10})).current,eu=r.useRef(tq({key:"__DOCSEARCH_RECENT_SEARCHES__".concat(p),limit:0===el.getAll().length?7:4})).current,eb=r.useCallback(function(e){if(!z){var t="content"===e.type?e.__docsearch_parent:e;t&&-1===el.getAll().findIndex(function(e){return e.objectID===t.objectID})&&eu.add(t)}},[el,eu,z]),ey=r.useCallback(function(e){if(Y.context.algoliaInsightsPlugin&&e.__autocomplete_id){var t={eventName:"Item Selected",index:e.__autocomplete_indexName,items:[e],positions:[e.__autocomplete_id],queryID:e.__autocomplete_queryID};Y.context.algoliaInsightsPlugin.insights.clickedObjectIDsAfterSearch(t)}},[Y.context.algoliaInsightsPlugin]),eS=r.useMemo(function(){return function(e){var t,n,r,a,o,i,s,l,c,u,d,f,p,m,g,h,b,y,v,S,w=[],x=(n="undefined"!=typeof window?window:{},r=e.plugins||[],ek(ek({debug:!1,openOnFocus:!1,enterKeyHint:void 0,ignoreCompositionEvents:!1,placeholder:"",autoFocus:!1,defaultActiveItemId:null,stallThreshold:300,insights:void 0,environment:n,shouldPanelOpen:function(e){return N(e.state)>0},reshape:function(e){return e.sources}},e),{},{id:null!==(t=e.id)&&void 0!==t?t:"autocomplete-".concat(I++),plugins:r,initialState:ek({activeItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},e.initialState),onStateChange:function(t){var n;null===(n=e.onStateChange)||void 0===n||n.call(e,t),r.forEach(function(e){var n;return null===(n=e.onStateChange)||void 0===n?void 0:n.call(e,t)})},onSubmit:function(t){var n;null===(n=e.onSubmit)||void 0===n||n.call(e,t),r.forEach(function(e){var n;return null===(n=e.onSubmit)||void 0===n?void 0:n.call(e,t)})},onReset:function(t){var n;null===(n=e.onReset)||void 0===n||n.call(e,t),r.forEach(function(e){var n;return null===(n=e.onReset)||void 0===n?void 0:n.call(e,t)})},getSources:function(t){var n;return Promise.all([].concat(function(e){if(Array.isArray(e))return ew(e)}(n=r.map(function(e){return e.getSources}))||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(n)||function(e,t){if(e){if("string"==typeof e)return ew(e,void 0);var n=Object.prototype.toString.call(e).slice(8,-1);if("Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return ew(e,void 0)}}(n)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(),[e.getSources]).filter(Boolean).map(function(e){var n;return n=[],Promise.resolve(e(t)).then(function(e){return Promise.all(e.filter(function(e){return!!e}).map(function(e){if(e.sourceId,n.includes(e.sourceId))throw Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(e.sourceId)," is not unique."));n.push(e.sourceId);var t={getItemInputValue:function(e){return e.state.query},getItemUrl:function(){},onSelect:function(e){(0,e.setIsOpen)(!1)},onActive:R,onResolve:R};return Object.keys(t).forEach(function(e){t[e].__default=!0}),Promise.resolve(ec(ec({},t),e))}))})})).then(function(e){return A(e)}).then(function(e){return e.map(function(e){return ek(ek({},e),{},{onSelect:function(t){e.onSelect(t),w.forEach(function(e){var n;return null===(n=e.onSelect)||void 0===n?void 0:n.call(e,t)})},onActive:function(t){e.onActive(t),w.forEach(function(e){var n;return null===(n=e.onActive)||void 0===n?void 0:n.call(e,t)})},onResolve:function(t){e.onResolve(t),w.forEach(function(e){var n;return null===(n=e.onResolve)||void 0===n?void 0:n.call(e,t)})}})})})},navigator:ek({navigate:function(e){var t=e.itemUrl;n.location.assign(t)},navigateNewTab:function(e){var t=e.itemUrl,r=n.open(t,"_blank","noopener");null==r||r.focus()},navigateNewWindow:function(e){var t=e.itemUrl;n.open(t,"_blank","noopener")}},e.navigator)})),k=(a=function(e){var t,n,r=e.prevState,a=e.state;if(x.onStateChange(to({prevState:r,state:a,refresh:P,navigator:x.navigator},_)),!C()&&null!==(t=a.context)&&void 0!==t&&null!==(n=t.algoliaInsightsPlugin)&&void 0!==n&&n.__automaticInsights&&!1!==x.insights){var o=er({__autocomplete_clickAnalytics:!1});x.plugins.push(o),O([o])}},i=x.initialState,{getState:function(){return i},dispatch:function(e,t){var n=function(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}(e,eW);if("ArrowUp"===t.key||"ArrowDown"===t.key){var i=function(){var e=ed(a.getState()),t=n.environment.document.getElementById(ef(n.id,"item-".concat(a.getState().activeItemId),null==e?void 0:e.source));t&&(t.scrollIntoViewIfNeeded?t.scrollIntoViewIfNeeded(!1):t.scrollIntoView(!1))},s=function(){var e=ed(a.getState());if(null!==a.getState().activeItemId&&e){var n=e.item,i=e.itemInputValue,s=e.itemUrl,l=e.source;l.onActive(eG({event:t,item:n,itemInputValue:i,itemUrl:s,refresh:r,source:l,state:a.getState()},o))}};t.preventDefault(),!1===a.getState().isOpen&&(n.openOnFocus||a.getState().query)?eq(eG({event:t,props:n,query:a.getState().query,refresh:r,store:a},o)).then(function(){a.dispatch(t.key,{nextActiveItemId:n.defaultActiveItemId}),s(),setTimeout(i,0)}):(a.dispatch(t.key,{}),s(),i())}else if("Escape"===t.key)t.preventDefault(),a.dispatch(t.key,null),a.pendingRequests.cancelAll();else if("Tab"===t.key)a.dispatch("blur",null),a.pendingRequests.cancelAll();else if("Enter"===t.key){if(null===a.getState().activeItemId||a.getState().collections.every(function(e){return 0===e.items.length}))return void(n.debug||a.pendingRequests.cancelAll());t.preventDefault();var l=ed(a.getState()),c=l.item,u=l.itemInputValue,d=l.itemUrl,f=l.source;if(t.metaKey||t.ctrlKey)void 0!==d&&(f.onSelect(eG({event:t,item:c,itemInputValue:u,itemUrl:d,refresh:r,source:f,state:a.getState()},o)),n.navigator.navigateNewTab({itemUrl:d,item:c,state:a.getState()}));else if(t.shiftKey)void 0!==d&&(f.onSelect(eG({event:t,item:c,itemInputValue:u,itemUrl:d,refresh:r,source:f,state:a.getState()},o)),n.navigator.navigateNewWindow({itemUrl:d,item:c,state:a.getState()}));else if(t.altKey);else{if(void 0!==d)return f.onSelect(eG({event:t,item:c,itemInputValue:u,itemUrl:d,refresh:r,source:f,state:a.getState()},o)),void n.navigator.navigate({itemUrl:d,item:c,state:a.getState()});eq(eG({event:t,nextState:{isOpen:!1},props:n,query:u,refresh:r,store:a},o)).then(function(){f.onSelect(eG({event:t,item:c,itemInputValue:u,itemUrl:d,refresh:r,source:f,state:a.getState()},o))})}}}(e4({event:e,props:l,refresh:c,store:u},d))},onFocus:t,onBlur:R,onClick:function(n){e.inputElement!==l.environment.document.activeElement||u.getState().isOpen||t(n)}},s)},getPanelProps:function(e){return e4({onMouseDown:function(e){e.preventDefault()},onMouseLeave:function(){u.dispatch("mouseleave",null)}},e)},getListProps:function(e){var t=e||{},n=t.source,r=e3(t,e0);return e4({role:"listbox","aria-labelledby":ef(l.id,"label"),id:ef(l.id,"list",n)},r)},getItemProps:function(e){var t=e.item,n=e.source,r=e3(e,e1);return e4({id:ef(l.id,"item-".concat(t.__autocomplete_id),n),role:"option","aria-selected":u.getState().activeItemId===t.__autocomplete_id,onMouseMove:function(e){if(t.__autocomplete_id!==u.getState().activeItemId){u.dispatch("mousemove",t.__autocomplete_id);var n=ed(u.getState());if(null!==u.getState().activeItemId&&n){var r=n.item,a=n.itemInputValue,o=n.itemUrl,i=n.source;i.onActive(e4({event:e,item:r,itemInputValue:a,itemUrl:o,refresh:c,source:i,state:u.getState()},d))}}},onMouseDown:function(e){e.preventDefault()},onClick:function(e){var r=n.getItemInputValue({item:t,state:u.getState()}),a=n.getItemUrl({item:t,state:u.getState()});(a?Promise.resolve():eq(e4({event:e,nextState:{isOpen:!1},props:l,query:r,refresh:c,store:u},d))).then(function(){n.onSelect(e4({event:e,item:t,itemInputValue:r,itemUrl:a,refresh:c,source:n,state:u.getState()},d))})}},r)}});function P(){return eq(to({event:new Event("input"),nextState:{isOpen:k.getState().isOpen},props:x,navigator:x.navigator,query:k.getState().query,refresh:P,store:k},_))}function O(e){e.forEach(function(e){var t;return null===(t=e.subscribe)||void 0===t?void 0:t.call(e,to(to({},_),{},{navigator:x.navigator,refresh:P,onSelect:function(e){w.push({onSelect:e})},onActive:function(e){w.push({onActive:e})},onResolve:function(e){w.push({onResolve:e})}}))})}function C(){return x.plugins.some(function(e){return"aa.algoliaInsightsPlugin"===e.name})}if(x.insights&&!C()){var j="boolean"==typeof x.insights?{}:x.insights;x.plugins.push(er(j))}return O(x.plugins),function(e){var t,n,r=e.metadata,a=e.environment;if(null===(t=a.navigator)||void 0===t||null===(n=t.userAgent)||void 0===n?void 0:n.includes("Algolia Crawler")){var o=a.document.createElement("meta"),i=a.document.querySelector("head");o.name="algolia:metadata",setTimeout(function(){o.content=JSON.stringify(r),i.appendChild(o)},0)}}({metadata:(b=(f={plugins:x.plugins,options:e}).plugins,S=(v=null===(p=((null===(m=(y=f.options).__autocomplete_metadata)||void 0===m?void 0:m.userAgents)||[])[0])||void 0===p?void 0:p.segment)?e9({},v,Object.keys((null===(g=y.__autocomplete_metadata)||void 0===g?void 0:g.options)||{})):{},{plugins:b.map(function(e){return{name:e.name,options:Object.keys(e.__autocomplete_pluginOptions||[])}}),options:function(e){for(var t=1;t",highlightPostTag:"",hitsPerPage:20,clickAnalytics:o},v)]}).catch(function(e){throw"RetryError"===e.name&&a("error"),e}).then(function(e){var t=e.results[0],a=t.hits,i=t.nbHits,s=tj(a,function(e){return tR(e)},x);n.context.searchSuggestions.length0&&(eE(),en.current&&en.current.focus())},[ei,eE]),r.useEffect(function(){function e(){if(J.current){var e=.01*window.innerHeight;J.current.style.setProperty("--docsearch-vh","".concat(e,"px"))}}return e(),window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}},[]),r.createElement("div",d({ref:X},e_({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container","stalled"===Y.status&&"DocSearch-Container--Stalled","error"===Y.status&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),role:"button",tabIndex:0,onMouseDown:function(e){e.target===e.currentTarget&&_()}}),r.createElement("div",{className:"DocSearch-Modal",ref:J},r.createElement("header",{className:"DocSearch-SearchBar",ref:ee},r.createElement(tU,d({},eS,{state:Y,autoFocus:0===ei.length,inputRef:en,isFromSelection:!!ei&&ei===eo,translations:V,onClose:_}))),r.createElement("div",{className:"DocSearch-Dropdown",ref:et},r.createElement(tB,d({},eS,{indexName:p,state:Y,hitComponent:void 0===O?tc:O,resultsFooterComponent:void 0===C?function(){return null}:C,disableUserPersonalization:z,recentSearches:eu,favoriteSearches:el,inputRef:en,translations:G,getMissingResultsUrl:H,onItemClick:function(e,t){ey(e),eb(e),tA(t)||_()}}))),r.createElement("footer",{className:"DocSearch-Footer"},r.createElement(tl,{translations:W}))))}function t7(e){var t=e.isOpen,n=e.onOpen,a=e.onClose,o=e.onInput,i=e.searchButtonRef;r.useEffect(function(){function e(e){var r,s,l;if("Escape"===e.code&&t||"k"===(null===(r=e.key)||void 0===r?void 0:r.toLowerCase())&&(e.metaKey||e.ctrlKey)||(l=(s=e.target).tagName,!s.isContentEditable&&"INPUT"!==l&&"SELECT"!==l&&"TEXTAREA"!==l&&"/"===e.key&&!t))return e.preventDefault(),void(t?a():document.body.classList.contains("DocSearch--active")||n());i&&i.current===document.activeElement&&o&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&o(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}},[t,n,a,o,i])}},2132:function(e,t,n){"use strict";n.r(t)},1887:function(e,t,n){"use strict";n.r(t)},9487:function(e,t,n){"use strict";n.r(t)},1381:function(e,t,n){"use strict";n.d(t,{PP:()=>C,lX:()=>S,ob:()=>p,Ep:()=>f,q_:()=>P});var r=n("6019");function a(e){return"/"===e.charAt(0)}function o(e,t){for(var n=t,r=n+1,a=e.length;r=0;f--){var p=i[f];"."===p?o(i,f):".."===p?(o(i,f),d++):d&&(o(i,f),d--)}if(!c)for(;d--;d)i.unshift("..");!c||""===i[0]||i[0]&&a(i[0])||i.unshift("");var m=i.join("/");return n&&"/"!==m.substr(-1)&&(m+="/"),m};var s=n("1835");function l(e){return"/"===e.charAt(0)?e:"/"+e}function c(e){return"/"===e.charAt(0)?e.substr(1):e}function u(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))?e.substr(t.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function f(e){var t=e.pathname,n=e.search,r=e.hash,a=t||"/";return n&&"?"!==n&&(a+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(a+="#"===r.charAt(0)?r:"#"+r),a}function p(e,t,n,a){var o,s,l,c,u,d;"string"==typeof e?(l="",c="",-1!==(u=(s=e||"/").indexOf("#"))&&(c=s.substr(u),s=s.substr(0,u)),-1!==(d=s.indexOf("?"))&&(l=s.substr(d),s=s.substr(0,d)),(o={pathname:s,search:"?"===l?"":l,hash:"#"===c?"":c}).state=t):(void 0===(o=(0,r.Z)({},e)).pathname&&(o.pathname=""),o.search?"?"!==o.search.charAt(0)&&(o.search="?"+o.search):o.search="",o.hash?"#"!==o.hash.charAt(0)&&(o.hash="#"+o.hash):o.hash="",void 0!==t&&void 0===o.state&&(o.state=t));try{o.pathname=decodeURI(o.pathname)}catch(e){if(e instanceof URIError)throw URIError('Pathname "'+o.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.');throw e}return n&&(o.key=n),a?o.pathname?"/"!==o.pathname.charAt(0)&&(o.pathname=i(o.pathname,a.pathname)):o.pathname=a.pathname:o.pathname||(o.pathname="/"),o}function m(){var e=null,t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,r,a){if(null!=e){var o="function"==typeof e?e(t,n):e;"string"==typeof o?"function"==typeof r?r(o,a):a(!0):a(!1!==o)}else a(!0)},appendListener:function(e){var n=!0;function r(){n&&e.apply(void 0,arguments)}return t.push(r),function(){n=!1,t=t.filter(function(e){return e!==r})}},notifyListeners:function(){for(var e=arguments.length,n=Array(e),r=0;rt?n.splice(t,n.length-t,a):n.push(a),u({action:r,location:a,index:t,entries:n})}})},replace:function(e,t){var r="REPLACE",a=p(e,t,d(),y.location);c.confirmTransitionTo(a,r,n,function(e){e&&(y.entries[y.index]=a,u({action:r,location:a}))})},go:b,goBack:function(){b(-1)},goForward:function(){b(1)},canGo:function(e){var t=y.index+e;return t>=0&&t
'};function o(e,t,n){return en?n:e}r.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(a[t]=n);return this},r.status=null,r.set=function(e){var t=r.isStarted();e=o(e,a.minimum,1),r.status=1===e?null:e;var n=r.render(!t),l=n.querySelector(a.barSelector),c=a.speed,u=a.easing;return n.offsetWidth,i(function(t){var o,i,d,f;""===a.positionUsing&&(a.positionUsing=r.getPositioningCSS()),s(l,(o=e,i=c,d=u,(f="translate3d"===a.positionUsing?{transform:"translate3d("+(-1+o)*100+"%,0,0)"}:"translate"===a.positionUsing?{transform:"translate("+(-1+o)*100+"%,0)"}:{"margin-left":(-1+o)*100+"%"}).transition="all "+i+"ms "+d,f)),1===e?(s(n,{transition:"none",opacity:1}),n.offsetWidth,setTimeout(function(){s(n,{transition:"all "+c+"ms linear",opacity:0}),setTimeout(function(){r.remove(),t()},c)},c)):setTimeout(t,c)}),this},r.isStarted=function(){return"number"==typeof r.status},r.start=function(){r.status||r.set(0);var e=function(){setTimeout(function(){r.status&&(r.trickle(),e())},a.trickleSpeed)};return a.trickle&&e(),this},r.done=function(e){return e||r.status?r.inc(.3+.5*Math.random()).set(1):this},r.inc=function(e){var t=r.status;return t?("number"!=typeof e&&(e=(1-t)*o(Math.random()*t,.1,.95)),t=o(t+e,0,.994),r.set(t)):r.start()},r.trickle=function(){return r.inc(Math.random()*a.trickleRate)},e=0,t=0,r.promise=function(n){return n&&"resolved"!==n.state()&&(0===t&&r.start(),e++,t++,n.always(function(){0==--t?(e=0,r.done()):r.set((e-t)/e)})),this},r.render=function(e){if(r.isRendered())return document.getElementById("nprogress");c(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=a.template;var n,o=t.querySelector(a.barSelector),i=e?"-100":(-1+(r.status||0))*100,l=document.querySelector(a.parent);return s(o,{transition:"all 0 linear",transform:"translate3d("+i+"%,0,0)"}),!a.showSpinner&&(n=t.querySelector(a.spinnerSelector))&&f(n),l!=document.body&&c(l,"nprogress-custom-parent"),l.appendChild(t),t},r.remove=function(){u(document.documentElement,"nprogress-busy"),u(document.querySelector(a.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},r.isRendered=function(){return!!document.getElementById("nprogress")},r.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var i=(n=[],function(e){n.push(e),1==n.length&&function e(){var t=n.shift();t&&t(e)}()}),s=function(){var e=["Webkit","O","Moz","ms"],t={};function n(n,r,a){var o;r=t[o=(o=r).replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,function(e,t){return t.toUpperCase()})]||(t[o]=function(t){var n=document.body.style;if(t in n)return t;for(var r,a=e.length,o=t.charAt(0).toUpperCase()+t.slice(1);a--;)if((r=e[a]+o)in n)return r;return t}(o)),n.style[r]=a}return function(e,t){var r,a,o=arguments;if(2==o.length)for(r in t)void 0!==(a=t[r])&&t.hasOwnProperty(r)&&n(e,r,a);else n(e,o[1],o[2])}}();function l(e,t){return("string"==typeof e?e:d(e)).indexOf(" "+t+" ")>=0}function c(e,t){var n=d(e),r=n+t;l(n,t)||(e.className=r.substring(1))}function u(e,t){var n,r=d(e);l(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function d(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return r},"function"==typeof define&&define.amd?define(t):e.exports=t()},4779:function(e,t,n){var r=n(5826);e.exports=function e(t,n,a){var i,s;return(r(n)||(a=n||a,n=[]),a=a||{},t instanceof RegExp)?function(e,t){var n=e.source.match(/\((?!\?)/g);if(n)for(var r=0;r-1?"[^"+l(u)+"]+?":l(d)+"|(?:(?!"+l(d)+")[^"+l(u)+"])+?")})}return i>=?|&&|\|\||[=!+\-*/%<>^&|]=?|[?~:]/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+t),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)[\w-]+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b[\w-]+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?:\.\w+)*(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+t),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},parameter:{pattern:/(^|\s)-{1,2}(?:\w+:[+-]?)?\w+(?:\.\w+)*(?=[=\s]|$)/,alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+)\s[\s\S]*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:r},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s[\s\S]*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0,inside:{bash:n}},{pattern:/(^|[^\\](?:\\\\)*)"(?:\\[\s\S]|\$\([^)]+\)|\$(?!\()|`[^`]+`|[^"\\`$])*"/,lookbehind:!0,greedy:!0,inside:r},{pattern:/(^|[^$\\])'[^']*'/,lookbehind:!0,greedy:!0},{pattern:/\$'(?:[^'\\]|\\[\s\S])*'/,greedy:!0,inside:{entity:r.entity}}],environment:{pattern:RegExp("\\$?"+t),alias:"constant"},variable:r.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cargo|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|java|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|sysctl|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|=[=~]?|!=?|<<[<-]?|[&\d]?>>|\d[<>]&?|[<>][&=]?|&[>&]?|\|[&|]?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}},n.inside=e.languages.bash;for(var a=["comment","function-name","for-or-select","assign-left","parameter","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],o=r.variable[1].inside,i=0;i>/g,function(e,n){return"(?:"+t[+n]+")"})}function n(e,n,r){return RegExp(t(e,n),r||"")}function r(e,t){for(var n=0;n>/g,function(){return"(?:"+e+")"});return e.replace(/<>/g,"[^\\s\\S]")}var a="bool byte char decimal double dynamic float int long object sbyte short string uint ulong ushort var void",o="class enum interface record struct",i="add alias and ascending async await by descending from(?=\\s*(?:\\w|$)) get global group into init(?=\\s*;) join let nameof not notnull on or orderby partial remove select set unmanaged value when where with(?=\\s*{)",s="abstract as base break case catch checked const continue default delegate do else event explicit extern finally fixed for foreach goto if implicit in internal is lock namespace new null operator out override params private protected public readonly ref return sealed sizeof stackalloc static switch this throw try typeof unchecked unsafe using virtual volatile while yield";function l(e){return"\\b(?:"+e.trim().replace(/ /g,"|")+")\\b"}var c=l(o),u=RegExp(l(a+" "+o+" "+i+" "+s)),d=l(o+" "+i+" "+s),f=l(a+" "+o+" "+s),p=r(/<(?:[^<>;=+\-*/%&|^]|<>)*>/.source,2),m=r(/\((?:[^()]|<>)*\)/.source,2),g=/@?\b[A-Za-z_]\w*\b/.source,h=t(/<<0>>(?:\s*<<1>>)?/.source,[g,p]),b=t(/(?!<<0>>)<<1>>(?:\s*\.\s*<<1>>)*/.source,[d,h]),y=/\[\s*(?:,\s*)*\]/.source,v=t(/<<0>>(?:\s*(?:\?\s*)?<<1>>)*(?:\s*\?)?/.source,[b,y]),S=t(/[^,()<>[\];=+\-*/%&|^]|<<0>>|<<1>>|<<2>>/.source,[p,m,y]),w=t(/\(<<0>>+(?:,<<0>>+)+\)/.source,[S]),x=t(/(?:<<0>>|<<1>>)(?:\s*(?:\?\s*)?<<2>>)*(?:\s*\?)?/.source,[w,b,y]),k={keyword:u,punctuation:/[<>()?,.:[\]]/},_=/'(?:[^\r\n'\\]|\\.|\\[Uux][\da-fA-F]{1,8})'/.source,E=/"(?:\\.|[^\\"\r\n])*"/.source,P=/@"(?:""|\\[\s\S]|[^\\"])*"(?!")/.source;e.languages.csharp=e.languages.extend("clike",{string:[{pattern:n(/(^|[^$\\])<<0>>/.source,[P]),lookbehind:!0,greedy:!0},{pattern:n(/(^|[^@$\\])<<0>>/.source,[E]),lookbehind:!0,greedy:!0}],"class-name":[{pattern:n(/(\busing\s+static\s+)<<0>>(?=\s*;)/.source,[b]),lookbehind:!0,inside:k},{pattern:n(/(\busing\s+<<0>>\s*=\s*)<<1>>(?=\s*;)/.source,[g,x]),lookbehind:!0,inside:k},{pattern:n(/(\busing\s+)<<0>>(?=\s*=)/.source,[g]),lookbehind:!0},{pattern:n(/(\b<<0>>\s+)<<1>>/.source,[c,h]),lookbehind:!0,inside:k},{pattern:n(/(\bcatch\s*\(\s*)<<0>>/.source,[b]),lookbehind:!0,inside:k},{pattern:n(/(\bwhere\s+)<<0>>/.source,[g]),lookbehind:!0},{pattern:n(/(\b(?:is(?:\s+not)?|as)\s+)<<0>>/.source,[v]),lookbehind:!0,inside:k},{pattern:n(/\b<<0>>(?=\s+(?!<<1>>|with\s*\{)<<2>>(?:\s*[=,;:{)\]]|\s+(?:in|when)\b))/.source,[x,f,g]),inside:k}],keyword:u,number:/(?:\b0(?:x[\da-f_]*[\da-f]|b[01_]*[01])|(?:\B\.\d+(?:_+\d+)*|\b\d+(?:_+\d+)*(?:\.\d+(?:_+\d+)*)?)(?:e[-+]?\d+(?:_+\d+)*)?)(?:[dflmu]|lu|ul)?\b/i,operator:/>>=?|<<=?|[-=]>|([-+&|])\1|~|\?\?=?|[-+*/%&|^!=<>]=?/,punctuation:/\?\.?|::|[{}[\];(),.:]/}),e.languages.insertBefore("csharp","number",{range:{pattern:/\.\./,alias:"operator"}}),e.languages.insertBefore("csharp","punctuation",{"named-parameter":{pattern:n(/([(,]\s*)<<0>>(?=\s*:)/.source,[g]),lookbehind:!0,alias:"punctuation"}}),e.languages.insertBefore("csharp","class-name",{namespace:{pattern:n(/(\b(?:namespace|using)\s+)<<0>>(?:\s*\.\s*<<0>>)*(?=\s*[;{])/.source,[g]),lookbehind:!0,inside:{punctuation:/\./}},"type-expression":{pattern:n(/(\b(?:default|sizeof|typeof)\s*\(\s*(?!\s))(?:[^()\s]|\s(?!\s)|<<0>>)*(?=\s*\))/.source,[m]),lookbehind:!0,alias:"class-name",inside:k},"return-type":{pattern:n(/<<0>>(?=\s+(?:<<1>>\s*(?:=>|[({]|\.\s*this\s*\[)|this\s*\[))/.source,[x,b]),inside:k,alias:"class-name"},"constructor-invocation":{pattern:n(/(\bnew\s+)<<0>>(?=\s*[[({])/.source,[x]),lookbehind:!0,inside:k,alias:"class-name"},"generic-method":{pattern:n(/<<0>>\s*<<1>>(?=\s*\()/.source,[g,p]),inside:{function:n(/^<<0>>/.source,[g]),generic:{pattern:RegExp(p),alias:"class-name",inside:k}}},"type-list":{pattern:n(/\b((?:<<0>>\s+<<1>>|record\s+<<1>>\s*<<5>>|where\s+<<2>>)\s*:\s*)(?:<<3>>|<<4>>|<<1>>\s*<<5>>|<<6>>)(?:\s*,\s*(?:<<3>>|<<4>>|<<6>>))*(?=\s*(?:where|[{;]|=>|$))/.source,[c,h,g,x,u.source,m,/\bnew\s*\(\s*\)/.source]),lookbehind:!0,inside:{"record-arguments":{pattern:n(/(^(?!new\s*\()<<0>>\s*)<<1>>/.source,[h,m]),lookbehind:!0,greedy:!0,inside:e.languages.csharp},keyword:u,"class-name":{pattern:RegExp(x),greedy:!0,inside:k},punctuation:/[,()]/}},preprocessor:{pattern:/(^[\t ]*)#.*/m,lookbehind:!0,alias:"property",inside:{directive:{pattern:/(#)\b(?:define|elif|else|endif|endregion|error|if|line|nullable|pragma|region|undef|warning)\b/,lookbehind:!0,alias:"keyword"}}}});var O=E+"|"+_,C=t(/\/(?![*/])|\/\/[^\r\n]*[\r\n]|\/\*(?:[^*]|\*(?!\/))*\*\/|<<0>>/.source,[O]),j=r(t(/[^"'/()]|<<0>>|\(<>*\)/.source,[C]),2),T=/\b(?:assembly|event|field|method|module|param|property|return|type)\b/.source,A=t(/<<0>>(?:\s*\(<<1>>*\))?/.source,[b,j]);e.languages.insertBefore("csharp","class-name",{attribute:{pattern:n(/((?:^|[^\s\w>)?])\s*\[\s*)(?:<<0>>\s*:\s*)?<<1>>(?:\s*,\s*<<1>>)*(?=\s*\])/.source,[T,A]),lookbehind:!0,greedy:!0,inside:{target:{pattern:n(/^<<0>>(?=\s*:)/.source,[T]),alias:"keyword"},"attribute-arguments":{pattern:n(/\(<<0>>*\)/.source,[j]),inside:e.languages.csharp},"class-name":{pattern:RegExp(b),inside:{punctuation:/\./}},punctuation:/[:,]/}}});var I=/:[^}\r\n]+/.source,N=r(t(/[^"'/()]|<<0>>|\(<>*\)/.source,[C]),2),L=t(/\{(?!\{)(?:(?![}:])<<0>>)*<<1>>?\}/.source,[N,I]),R=r(t(/[^"'/()]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|<<0>>|\(<>*\)/.source,[O]),2),D=t(/\{(?!\{)(?:(?![}:])<<0>>)*<<1>>?\}/.source,[R,I]);function M(t,r){return{interpolation:{pattern:n(/((?:^|[^{])(?:\{\{)*)<<0>>/.source,[t]),lookbehind:!0,inside:{"format-string":{pattern:n(/(^\{(?:(?![}:])<<0>>)*)<<1>>(?=\}$)/.source,[r,I]),lookbehind:!0,inside:{punctuation:/^:/}},punctuation:/^\{|\}$/,expression:{pattern:/[\s\S]+/,alias:"language-csharp",inside:e.languages.csharp}}},string:/[\s\S]+/}}e.languages.insertBefore("csharp","string",{"interpolation-string":[{pattern:n(/(^|[^\\])(?:\$@|@\$)"(?:""|\\[\s\S]|\{\{|<<0>>|[^\\{"])*"/.source,[L]),lookbehind:!0,greedy:!0,inside:M(L,N)},{pattern:n(/(^|[^@\\])\$"(?:\\.|\{\{|<<0>>|[^\\"{])*"/.source,[D]),lookbehind:!0,greedy:!0,inside:M(D,R)}],char:{pattern:RegExp(_),greedy:!0}}),e.languages.dotnet=e.languages.cs=e.languages.csharp}(Prism)},2503:function(){var e,t,n,r;e=Prism,t=/\b(?:abstract|assert|boolean|break|byte|case|catch|char|class|const|continue|default|do|double|else|enum|exports|extends|final|finally|float|for|goto|if|implements|import|instanceof|int|interface|long|module|native|new|non-sealed|null|open|opens|package|permits|private|protected|provides|public|record(?!\s*[(){}[\]<>=%~.:,;?+\-*/&|^])|requires|return|sealed|short|static|strictfp|super|switch|synchronized|this|throw|throws|to|transient|transitive|try|uses|var|void|volatile|while|with|yield)\b/,n=/(?:[a-z]\w*\s*\.\s*)*(?:[A-Z]\w*\s*\.\s*)*/.source,r={pattern:RegExp(/(^|[^\w.])/.source+n+/[A-Z](?:[\d_A-Z]*[a-z]\w*)?\b/.source),lookbehind:!0,inside:{namespace:{pattern:/^[a-z]\w*(?:\s*\.\s*[a-z]\w*)*(?:\s*\.)?/,inside:{punctuation:/\./}},punctuation:/\./}},e.languages.java=e.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"/,lookbehind:!0,greedy:!0},"class-name":[r,{pattern:RegExp(/(^|[^\w.])/.source+n+/[A-Z]\w*(?=\s+\w+\s*[;,=()]|\s*(?:\[[\s,]*\]\s*)?::\s*new\b)/.source),lookbehind:!0,inside:r.inside},{pattern:RegExp(/(\b(?:class|enum|extends|implements|instanceof|interface|new|record|throws)\s+)/.source+n+/[A-Z]\w*\b/.source),lookbehind:!0,inside:r.inside}],keyword:t,function:[e.languages.clike.function,{pattern:/(::\s*)[a-z_]\w*/,lookbehind:!0}],number:/\b0b[01][01_]*L?\b|\b0x(?:\.[\da-f_p+-]+|[\da-f_]+(?:\.[\da-f_p+-]+)?)\b|(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?\d[\d_]*)?[dfl]?/i,operator:{pattern:/(^|[^.])(?:<<=?|>>>?=?|->|--|\+\+|&&|\|\||::|[?:~]|[-+*/%&|^!=<>]=?)/m,lookbehind:!0},constant:/\b[A-Z][A-Z_\d]+\b/}),e.languages.insertBefore("java","string",{"triple-quoted-string":{pattern:/"""[ \t]*[\r\n](?:(?:"|"")?(?:\\.|[^"\\]))*"""/,greedy:!0,alias:"string"},char:{pattern:/'(?:\\.|[^'\\\r\n]){1,6}'/,greedy:!0}}),e.languages.insertBefore("java","class-name",{annotation:{pattern:/(^|[^.])@\w+(?:\s*\.\s*\w+)*/,lookbehind:!0,alias:"punctuation"},generics:{pattern:/<(?:[\w\s,.?]|&(?!&)|<(?:[\w\s,.?]|&(?!&)|<(?:[\w\s,.?]|&(?!&)|<(?:[\w\s,.?]|&(?!&))*>)*>)*>)*>/,inside:{"class-name":r,keyword:t,punctuation:/[<>(),.:]/,operator:/[?&|]/}},import:[{pattern:RegExp(/(\bimport\s+)/.source+n+/(?:[A-Z]\w*|\*)(?=\s*;)/.source),lookbehind:!0,inside:{namespace:r.inside.namespace,punctuation:/\./,operator:/\*/,"class-name":/\w+/}},{pattern:RegExp(/(\bimport\s+static\s+)/.source+n+/(?:\w+|\*)(?=\s*;)/.source),lookbehind:!0,alias:"static",inside:{namespace:r.inside.namespace,static:/\b\w+$/,punctuation:/\./,operator:/\*/,"class-name":/\w+/}}],namespace:{pattern:RegExp(/(\b(?:exports|import(?:\s+static)?|module|open|opens|package|provides|requires|to|transitive|uses|with)\s+)(?!)[a-z]\w*(?:\.[a-z]\w*)*\.?/.source.replace(//g,function(){return t.source})),lookbehind:!0,inside:{punctuation:/\./}}})},4064:function(){!function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(//g,function(){return t}),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,a=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,function(){return r}),o=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source;e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+a+o+"(?:"+a+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+a+o+")(?:"+a+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+a+")"+o+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+a+"$"),inside:{"table-header":{pattern:RegExp(r),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)|_(?:(?!_))+_)+__\b|\*\*(?:(?!\*)|\*(?:(?!\*))+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)|__(?:(?!_))+__)+_\b|\*(?:(?!\*)|\*\*(?:(?!\*))+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\]))+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach(function(t){["url","bold","italic","strike","code-snippet"].forEach(function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])})}),e.hooks.add("after-tokenize",function(e){("markdown"===e.language||"md"===e.language)&&!function e(t){if(t&&"string"!=typeof t)for(var n=0,r=t.length;n",quot:'"'},l=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(Prism)},6854:function(){!function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,a,o){if(n.language===r){var i=n.tokenStack=[];n.code=n.code.replace(a,function(e){if("function"==typeof o&&!o(e))return e;for(var a,s=i.length;-1!==n.code.indexOf(a=t(r,s));)++s;return i[s]=e,a}),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var a=0,o=Object.keys(n.tokenStack);!function i(s){for(var l=0;l=o.length);l++){var c=s[l];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=o[a],d=n.tokenStack[u],f="string"==typeof c?c:c.content,p=t(r,u),m=f.indexOf(p);if(m>-1){++a;var g=f.substring(0,m),h=new e.Token(r,e.tokenize(d,n.grammar),"language-"+r,d),b=f.substring(m+p.length),y=[];g&&y.push.apply(y,i([g])),y.push(h),b&&y.push.apply(y,i([b])),"string"==typeof c?s.splice.apply(s,[l,1].concat(y)):c.content=y}}else c.content&&i(c.content)}return s}(n.tokens)}}}})}(Prism)},617:function(e,t,n){var r={"./prism-bash":"7874","./prism-csharp":"9016","./prism-java":"2503","./prism-markdown":"4064"};function a(e){return n(o(e))}function o(e){if(!n.o(r,e)){var t=Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=o,e.exports=a,a.id="617"},2703:function(e,t,n){"use strict";var r=n(414);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,o,i){if(i!==r){var s=Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:a};return n.PropTypes=n,n}},5697:function(e,t,n){e.exports=n(2703)()},414:function(e){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},6787:function(e,t,n){"use strict";var r,a,o=n(3840),i=n(7294),s=n(3935);function l(e){var t="https://react.dev/errors/"+e;if(1)":-1a||l[r]!==c[a]){var u="\n"+l[r].replace(" at new "," at ");return e.displayName&&u.includes("")&&(u=u.replace("",e.displayName)),u}while(1<=r&&0<=a);break}}}finally{L=!1,Error.prepareStackTrace=n}return(n=e?e.displayName||e.name:"")?N(n):""}function D(e){try{var t="";do t+=function(e){switch(e.tag){case 26:case 27:case 5:return N(e.type);case 16:return N("Lazy");case 13:return N("Suspense");case 19:return N("SuspenseList");case 0:case 15:return e=R(e.type,!1);case 11:return e=R(e.type.render,!1);case 1:return e=R(e.type,!0);default:return""}}(e),e=e.return;while(e);return t}catch(e){return"\nError generating stack: "+e.message+"\n"+e.stack}}function M(e){var t=e,n=e;if(e.alternate)for(;t.return;)t=t.return;else{e=t;do 0!=(4098&(t=e).flags)&&(n=t.return),e=t.return;while(e)}return 3===t.tag?n:null}function F(e){if(13===e.tag){var t=e.memoizedState;if(null===t&&null!==(e=e.alternate)&&(t=e.memoizedState),null!==t)return t.dehydrated}return null}function z(e){if(M(e)!==e)throw Error(l(188))}var B=Array.isArray,$=s.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,U={pending:!1,data:null,method:null,action:null},H=[],q=-1;function Z(e){return{current:e}}function W(e){0>q||(e.current=H[q],H[q]=null,q--)}function V(e,t){H[++q]=e.current,e.current=t}var G=Z(null),K=Z(null),Y=Z(null),Q=Z(null);function X(e,t){switch(V(Y,t),V(K,e),V(G,null),e=t.nodeType){case 9:case 11:t=(t=t.documentElement)&&(t=t.namespaceURI)?l7(t):0;break;default:if(t=(e=8===e?t.parentNode:t).tagName,e=e.namespaceURI)t=l9(e=l7(e),t);else switch(t){case"svg":t=1;break;case"math":t=2;break;default:t=0}}W(G),V(G,t)}function J(){W(G),W(K),W(Y)}function ee(e){null!==e.memoizedState&&V(Q,e);var t=G.current,n=l9(t,e.type);t!==n&&(V(K,e),V(G,n))}function et(e){K.current===e&&(W(G),W(K)),Q.current===e&&(W(Q),cD._currentValue=U)}var en=Object.prototype.hasOwnProperty,er=o.unstable_scheduleCallback,ea=o.unstable_cancelCallback,eo=o.unstable_shouldYield,ei=o.unstable_requestPaint,es=o.unstable_now,el=o.unstable_getCurrentPriorityLevel,ec=o.unstable_ImmediatePriority,eu=o.unstable_UserBlockingPriority,ed=o.unstable_NormalPriority,ef=o.unstable_LowPriority,ep=o.unstable_IdlePriority,em=o.log,eg=o.unstable_setDisableYieldValue,eh=null,eb=null;function ey(e){if("function"==typeof em&&eg(e),eb&&"function"==typeof eb.setStrictMode)try{eb.setStrictMode(eh,e)}catch(e){}}var ev=Math.clz32?Math.clz32:function(e){return 0==(e>>>=0)?32:31-(eS(e)/ew|0)|0},eS=Math.log,ew=Math.LN2,ex=128,ek=4194304;function e_(e){var t=42&e;if(0!==t)return t;switch(e&-e){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:return 64;case 128:case 256:case 512:case 1024:case 2048:case 4096:case 8192:case 16384:case 32768:case 65536:case 131072:case 262144:case 524288:case 1048576:case 2097152:return 4194176&e;case 4194304:case 8388608:case 0x1000000:case 0x2000000:return 0x3c00000&e;case 0x4000000:return 0x4000000;case 0x8000000:return 0x8000000;case 0x10000000:return 0x10000000;case 0x20000000:return 0x20000000;case 0x40000000:return 0;default:return e}}function eE(e,t){var n=e.pendingLanes;if(0===n)return 0;var r=0,a=e.suspendedLanes,o=e.pingedLanes,i=e.warmLanes;e=0!==e.finishedLanes;var s=0x7ffffff&n;return 0!==s?0!=(n=s&~a)?r=e_(n):0!=(o&=s)?r=e_(o):e||0!=(i=s&~i)&&(r=e_(i)):0!=(s=n&~a)?r=e_(s):0!==o?r=e_(o):e||0!=(i=n&~i)&&(r=e_(i)),0===r?0:0!==t&&t!==r&&0==(t&a)&&((a=r&-r)>=(i=t&-t)||32===a&&0!=(4194176&i))?t:r}function eP(e,t){return 0==(e.pendingLanes&~(e.suspendedLanes&~e.pingedLanes)&t)}function eO(){var e=ex;return 0==(4194176&(ex<<=1))&&(ex=128),e}function eC(){var e=ek;return 0==(0x3c00000&(ek<<=1))&&(ek=4194304),e}function ej(e){for(var t=[],n=0;31>n;n++)t.push(e);return t}function eT(e,t){e.pendingLanes|=t,0x10000000!==t&&(e.suspendedLanes=0,e.pingedLanes=0,e.warmLanes=0)}function eA(e,t,n){e.pendingLanes|=t,e.suspendedLanes&=~t;var r=31-ev(t);e.entangledLanes|=t,e.entanglements[r]=0x40000000|e.entanglements[r]|4194218&n}function eI(e,t){var n=e.entangledLanes|=t;for(e=e.entanglements;n;){var r=31-ev(n),a=1<=t8),nn=!1;function nr(e,t){switch(e){case"keyup":return -1!==t9.indexOf(t.keyCode);case"keydown":return 229!==t.keyCode;case"keypress":case"mousedown":case"focusout":return!0;default:return!1}}function na(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var no=!1,ni={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function ns(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!ni[e.type]:"textarea"===t}function nl(e,t,n,r){tS?tw?tw.push(r):tw=[r]:tS=r,0<(t=lW(t,"onChange")).length&&(n=new tB("onChange","change",null,n,r),e.push({event:n,listeners:t}))}var nc=null,nu=null;function nd(e){lF(e,0)}function nf(e){if(te(eV(e)))return e}function np(e,t){if("change"===e)return t}var nm=!1;if(e0){if(e0){var ng="oninput"in document;if(!ng){var nh=document.createElement("div");nh.setAttribute("oninput","return;"),ng="function"==typeof nh.oninput}r=ng}else r=!1;nm=r&&(!document.documentMode||9=t)return{node:r,offset:t-e};e=n}e:{for(;r;){if(r.nextSibling){r=r.nextSibling;break e}r=r.parentNode}r=void 0}r=nE(r)}}function nO(e){e=null!=e&&null!=e.ownerDocument&&null!=e.ownerDocument.defaultView?e.ownerDocument.defaultView:window;for(var t=tt(e.document);t instanceof e.HTMLIFrameElement;){try{var n="string"==typeof t.contentWindow.location.href}catch(e){n=!1}if(n)e=t.contentWindow;else break;t=tt(e.document)}return t}function nC(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&("text"===e.type||"search"===e.type||"tel"===e.type||"url"===e.type||"password"===e.type)||"textarea"===t||"true"===e.contentEditable)}var nj=e0&&"documentMode"in document&&11>=document.documentMode,nT=null,nA=null,nI=null,nN=!1;function nL(e,t,n){var r=n.window===n?n.document:9===n.nodeType?n:n.ownerDocument;nN||null==nT||nT!==tt(r)||(r="selectionStart"in(r=nT)&&nC(r)?{start:r.selectionStart,end:r.selectionEnd}:{anchorNode:(r=(r.ownerDocument&&r.ownerDocument.defaultView||window).getSelection()).anchorNode,anchorOffset:r.anchorOffset,focusNode:r.focusNode,focusOffset:r.focusOffset},nI&&n_(nI,r)||(nI=r,0<(r=lW(nA,"onSelect")).length&&(t=new tB("onSelect","select",null,t,n),e.push({event:t,listeners:r}),t.target=nT)))}function nR(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n}var nD={animationend:nR("Animation","AnimationEnd"),animationiteration:nR("Animation","AnimationIteration"),animationstart:nR("Animation","AnimationStart"),transitionrun:nR("Transition","TransitionRun"),transitionstart:nR("Transition","TransitionStart"),transitioncancel:nR("Transition","TransitionCancel"),transitionend:nR("Transition","TransitionEnd")},nM={},nF={};function nz(e){if(nM[e])return nM[e];if(!nD[e])return e;var t,n=nD[e];for(t in n)if(n.hasOwnProperty(t)&&t in nF)return nM[e]=n[t];return e}e0&&(nF=document.createElement("div").style,"AnimationEvent"in window||(delete nD.animationend.animation,delete nD.animationiteration.animation,delete nD.animationstart.animation),"TransitionEvent"in window||delete nD.transitionend.transition);var nB=nz("animationend"),n$=nz("animationiteration"),nU=nz("animationstart"),nH=nz("transitionrun"),nq=nz("transitionstart"),nZ=nz("transitioncancel"),nW=nz("transitionend"),nV=new Map,nG="abort auxClick beforeToggle cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking stalled submit suspend timeUpdate touchCancel touchEnd touchStart volumeChange scroll scrollEnd toggle touchMove waiting wheel".split(" ");function nK(e,t){nV.set(e,t),eX(t,[e])}var nY=[],nQ=0,nX=0;function nJ(){for(var e=nQ,t=nX=nQ=0;t>=i,a-=i,ro=1<<32-ev(t)+a|n<f?(p=d,d=null):p=d.sibling;var m=h(a,d,s[f],l);if(null===m){null===d&&(d=p);break}e&&d&&null===m.alternate&&t(a,d),i=o(m,i,f),null===u?c=m:u.sibling=m,u=m,d=p}if(f===s.length)return n(a,d),rp&&rs(a,f),c;if(null===d){for(;fp?(m=f,f=null):m=f.sibling;var v=h(a,f,y.value,c);if(null===v){null===f&&(f=m);break}e&&f&&null===v.alternate&&t(a,f),i=o(v,i,p),null===d?u=v:d.sibling=v,d=v,f=m}if(y.done)return n(a,f),rp&&rs(a,p),u;if(null===f){for(;!y.done;p++,y=s.next())null!==(y=g(a,y.value,c))&&(i=o(y,i,p),null===d?u=y:d.sibling=y,d=y);return rp&&rs(a,p),u}for(f=r(f);!y.done;p++,y=s.next())null!==(y=b(f,a,p,y.value,c))&&(e&&null!==y.alternate&&f.delete(null===y.key?p:y.key),i=o(y,i,p),null===d?u=y:d.sibling=y,d=y);return e&&f.forEach(function(e){return t(a,e)}),rp&&rs(a,p),u}(c,u,m=S.call(m),v)}if("function"==typeof m.then)return s(c,u,rN(m),v);if(m.$$typeof===y)return s(c,u,im(c,m),v);rR(c,m)}return"string"==typeof m&&""!==m||"number"==typeof m||"bigint"==typeof m?(m=""+m,null!==u&&6===u.tag?(n(c,u.sibling),(v=a(u,m)).return=c):(n(c,u),(v=sp(m,c.mode,v)).return=c),i(c=v)):n(c,u)}(s,c,u,m);return rA=null,v}catch(e){if(e===rk)throw e;var S=si(29,e,null,s.mode);return S.lanes=m,S.return=s,S}finally{}}}var rF=rM(!0),rz=rM(!1),rB=Z(null),r$=Z(0);function rU(e,t){V(r$,e=sI),V(rB,t),sI=e|t.baseLanes}function rH(){V(r$,sI),V(rB,rB.current)}function rq(){sI=r$.current,W(rB),W(r$)}var rZ=Z(null),rW=null;function rV(e){var t=e.alternate;V(rQ,1&rQ.current),V(rZ,e),null===rW&&(null===t||null!==rB.current?rW=e:null!==t.memoizedState&&(rW=e))}function rG(e){if(22===e.tag){if(V(rQ,rQ.current),V(rZ,e),null===rW){var t=e.alternate;null!==t&&null!==t.memoizedState&&(rW=e)}}else rK(e)}function rK(){V(rQ,rQ.current),V(rZ,rZ.current)}function rY(e){W(rZ),rW===e&&(rW=null),W(rQ)}var rQ=Z(0);function rX(e){for(var t=e;null!==t;){if(13===t.tag){var n=t.memoizedState;if(null!==n&&(null===(n=n.dehydrated)||"$?"===n.data||"$!"===n.data))return t}else if(19===t.tag&&void 0!==t.memoizedProps.revealOrder){if(0!=(128&t.flags))return t}else if(null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}return null}var rJ="undefined"!=typeof AbortController?AbortController:function(){var e=[],t=this.signal={aborted:!1,addEventListener:function(t,n){e.push(n)}};this.abort=function(){t.aborted=!0,e.forEach(function(e){return e()})}},r0=o.unstable_scheduleCallback,r1=o.unstable_NormalPriority,r2={$$typeof:y,Consumer:null,Provider:null,_currentValue:null,_currentValue2:null,_threadCount:0};function r4(){return{controller:new rJ,data:new Map,refCount:0}}function r3(e){e.refCount--,0===e.refCount&&r0(r1,function(){e.controller.abort()})}var r6=null,r7=0,r9=0,r5=null;function r8(){if(0==--r7&&null!==r6){null!==r5&&(r5.status="fulfilled");var e=r6;r6=null,r9=0,r5=null;for(var t=0;to?o:8;var i=A.T,s={};A.T=s,ob(e,!1,t,n);try{var l=a(),c=A.S;if(null!==c&&c(s,l),null!==l&&"object"==typeof l&&"function"==typeof l.then){var u,d,f=(u=[],d={status:"pending",value:null,reason:null,then:function(e){u.push(e)}},l.then(function(){d.status="fulfilled",d.value=r;for(var e=0;e title"))),l2(o,r,n),o[eD]=e,eK(o),r=o;break e;case"link":var i=cO("link","href",a).get(r+(n.href||""));if(i){for(var s=0;s<\/script>",e=e.removeChild(e.firstChild);break;case"select":e="string"==typeof r.is?a.createElement("select",{is:r.is}):a.createElement("select"),r.multiple?e.multiple=!0:r.size&&(e.size=r.size);break;default:e="string"==typeof r.is?a.createElement(n,{is:r.is}):a.createElement(n)}}e[eD]=t,e[eM]=r;e:for(a=t.child;null!==a;){if(5===a.tag||6===a.tag)e.appendChild(a.stateNode);else if(4!==a.tag&&27!==a.tag&&null!==a.child){a.child.return=a,a=a.child;continue}if(a===t)break;for(;null===a.sibling;){if(null===a.return||a.return===t)break e;a=a.return}a.sibling.return=a.return,a=a.sibling}switch(t.stateNode=e,l2(e,n,r),n){case"button":case"input":case"select":case"textarea":e=!!r.autoFocus;break;case"img":e=!0;break;default:e=!1}e&&sg(t)}}return sv(t),t.flags&=-0x1000001,null;case 6:if(e&&null!=t.stateNode)e.memoizedProps!==r&&sg(t);else{if("string"!=typeof r&&null===t.stateNode)throw Error(l(166));if(e=Y.current,rS(t)){if(e=t.stateNode,n=t.memoizedProps,r=null,null!==(a=rd))switch(a.tag){case 27:case 5:r=a.memoizedProps}e[eD]=t,(e=!!(e.nodeValue===n||null!==r&&!0===r.suppressHydrationWarning||lX(e.nodeValue,n)))||rb(t)}else(e=l6(e).createTextNode(r))[eD]=t,t.stateNode=e}return sv(t),null;case 13:if(r=t.memoizedState,null===e||null!==e.memoizedState&&null!==e.memoizedState.dehydrated){if(a=rS(t),null!==r&&null!==r.dehydrated){if(null===e){if(!a)throw Error(l(318));if(!(a=null!==(a=t.memoizedState)?a.dehydrated:null))throw Error(l(317));a[eD]=t}else rw(),0==(128&t.flags)&&(t.memoizedState=null),t.flags|=4;sv(t),a=!1}else null!==rm&&(s4(rm),rm=null),a=!0;if(!a){if(256&t.flags)return rY(t),t;return rY(t),null}}if(rY(t),0!=(128&t.flags))return t.lanes=n,t;if(n=null!==r,e=null!==e&&null!==e.memoizedState,n){r=t.child,a=null,null!==r.alternate&&null!==r.alternate.memoizedState&&null!==r.alternate.memoizedState.cachePool&&(a=r.alternate.memoizedState.cachePool.pool);var o=null;null!==r.memoizedState&&null!==r.memoizedState.cachePool&&(o=r.memoizedState.cachePool.pool),o!==a&&(r.flags|=2048)}return n!==e&&n&&(t.child.flags|=8192),sb(t,t.updateQueue),sv(t),null;case 4:return J(),null===e&&lU(t.stateNode.containerInfo),sv(t),null;case 10:return ii(t.type),sv(t),null;case 19:if(W(rQ),null===(a=t.memoizedState))return sv(t),null;if(r=0!=(128&t.flags),null===(o=a.rendering)){if(r)sy(a,!1);else{if(0!==sN||null!==e&&0!=(128&e.flags))for(e=t.child;null!==e;){if(null!==(o=rX(e))){for(t.flags|=128,sy(a,!1),e=o.updateQueue,t.updateQueue=e,sb(t,e),t.subtreeFlags=0,e=n,n=t.child;null!==n;)sc(n,e),n=n.sibling;return V(rQ,1&rQ.current|2),t.child}e=e.sibling}null!==a.tail&&es()>sH&&(t.flags|=128,r=!0,sy(a,!1),t.lanes=4194304)}}else{if(!r){if(null!==(e=rX(o))){if(t.flags|=128,r=!0,e=e.updateQueue,t.updateQueue=e,sb(t,e),sy(a,!0),null===a.tail&&"hidden"===a.tailMode&&!o.alternate&&!rp)return sv(t),null}else 2*es()-a.renderingStartTime>sH&&0x20000000!==n&&(t.flags|=128,r=!0,sy(a,!1),t.lanes=4194304)}a.isBackwards?(o.sibling=t.child,t.child=o):(null!==(e=a.last)?e.sibling=o:t.child=o,a.last=o)}if(null!==a.tail)return t=a.tail,a.rendering=t,a.tail=t.sibling,a.renderingStartTime=es(),t.sibling=null,e=rQ.current,V(rQ,r?1&e|2:1&e),t;return sv(t),null;case 22:case 23:return rY(t),rq(),r=null!==t.memoizedState,null!==e?null!==e.memoizedState!==r&&(t.flags|=8192):r&&(t.flags|=8192),r?0!=(0x20000000&n)&&0==(128&t.flags)&&(sv(t),6&t.subtreeFlags&&(t.flags|=8192)):sv(t),null!==(n=t.updateQueue)&&sb(t,n.retryQueue),n=null,null!==e&&null!==e.memoizedState&&null!==e.memoizedState.cachePool&&(n=e.memoizedState.cachePool.pool),r=null,null!==t.memoizedState&&null!==t.memoizedState.cachePool&&(r=t.memoizedState.cachePool.pool),r!==n&&(t.flags|=2048),null!==e&&W(at),null;case 24:return n=null,null!==e&&(n=e.memoizedState.cache),t.memoizedState.cache!==n&&(t.flags|=2048),ii(r2),sv(t),null;case 25:return null}throw Error(l(156,t.tag))}(t.alternate,t,sI);if(null!==n){sE=n;return}if(null!==(t=t.sibling)){sE=t;return}sE=t=e}while(null!==t);0===sN&&(sN=5)}function ll(e,t){do{var n=function(e,t){switch(ru(t),t.tag){case 1:return 65536&(e=t.flags)?(t.flags=-65537&e|128,t):null;case 3:return ii(r2),J(),0!=(65536&(e=t.flags))&&0==(128&e)?(t.flags=-65537&e|128,t):null;case 26:case 27:case 5:return et(t),null;case 13:if(rY(t),null!==(e=t.memoizedState)&&null!==e.dehydrated){if(null===t.alternate)throw Error(l(340));rw()}return 65536&(e=t.flags)?(t.flags=-65537&e|128,t):null;case 19:return W(rQ),null;case 4:return J(),null;case 10:return ii(t.type),null;case 22:case 23:return rY(t),rq(),null!==e&&W(at),65536&(e=t.flags)?(t.flags=-65537&e|128,t):null;case 24:return ii(r2),null;default:return null}}(e.alternate,e);if(null!==n){n.flags&=32767,sE=n;return}if(null!==(n=e.return)&&(n.flags|=32768,n.subtreeFlags=0,n.deletions=null),!t&&null!==(e=e.sibling)){sE=e;return}sE=e=n}while(null!==e);sN=6,sE=null}function lc(e,t,n,r,a,o,i,s,c,u){var d=A.T,f=$.p;try{$.p=2,A.T=null,function(e,t,n,r,a,o,i,s){do ld();while(null!==sV);if(0!=(6&sk))throw Error(l(327));var c,u,d=e.finishedWork;if(r=e.finishedLanes,null!==d){if(e.finishedWork=null,e.finishedLanes=0,d===e.current)throw Error(l(177));e.callbackNode=null,e.callbackPriority=0,e.cancelPendingCommit=null;var f=d.lanes|d.childLanes;if(function(e,t,n,r,a,o){var i=e.pendingLanes;e.pendingLanes=n,e.suspendedLanes=0,e.pingedLanes=0,e.warmLanes=0,e.expiredLanes&=n,e.entangledLanes&=n,e.errorRecoveryDisabledLanes&=n,e.shellSuspendCounter=0;var s=e.entanglements,l=e.expirationTimes,c=e.hiddenUpdates;for(n=i&~n;0r&&(a=r,r=o,o=a),a=nP(t,o);var i=nP(t,r);a&&i&&(1!==n.rangeCount||n.anchorNode!==a.node||n.anchorOffset!==a.offset||n.focusNode!==i.node||n.focusOffset!==i.offset)&&((e=e.createRange()).setStart(a.node,a.offset),n.removeAllRanges(),o>r?(n.addRange(e),n.extend(i.node,i.offset)):(e.setEnd(i.node,i.offset),n.addRange(e)))}}for(e=[],n=t;n=n.parentNode;)1===n.nodeType&&e.push({element:n,left:n.scrollLeft,top:n.scrollTop});for("function"==typeof t.focus&&t.focus(),t=0;tn?32:n,A.T=null,null===sV)var o=!1;else{n=sY,sY=null;var i=sV,s=sG;if(sV=null,sG=0,0!=(6&sk))throw Error(l(331));var c=sk;if(sk|=4,sr(i.current),i7(i,i.current,s,n),sk=c,lP(0,!1),eb&&"function"==typeof eb.onPostCommitFiberRoot)try{eb.onPostCommitFiberRoot(eh,i)}catch(e){}o=!0}return o}finally{$.p=a,A.T=r,lu(e,t)}}return!1}function lf(e,t,n){t=n9(n,t),t=oD(e.stateNode,t,2),null!==(e=iS(e,t,2))&&(eT(e,2),lE(e))}function lp(e,t,n){if(3===e.tag)lf(e,e,n);else for(;null!==t;){if(3===t.tag){lf(t,e,n);break}if(1===t.tag){var r=t.stateNode;if("function"==typeof t.type.getDerivedStateFromError||"function"==typeof r.componentDidCatch&&(null===sZ||!sZ.has(r))){e=n9(n,e),null!==(r=iS(t,n=oM(2),2))&&(oF(n,r,t,e),eT(r,2),lE(r));break}}t=t.return}}function lm(e,t,n){var r=e.pingCache;if(null===r){r=e.pingCache=new sx;var a=new Set;r.set(t,a)}else void 0===(a=r.get(t))&&(a=new Set,r.set(t,a));a.has(n)||(sA=!0,a.add(n),e=lg.bind(null,e,t,n),t.then(e,e))}function lg(e,t,n){var r=e.pingCache;null!==r&&r.delete(t),e.pingedLanes|=e.suspendedLanes&n,e.warmLanes&=~n,s_===e&&(sP&n)===n&&(4===sN||3===sN&&(0x3c00000&sP)===sP&&300>es()-sU?0==(2&sk)&&s5(e,0):sD|=n,sF===sP&&(sF=0)),lE(e)}function lh(e,t){0===t&&(t=eC()),null!==(e=n2(e,t))&&(eT(e,t),lE(e))}function lb(e){var t=e.memoizedState,n=0;null!==t&&(n=t.retryLane),lh(e,n)}function ly(e,t){var n=0;switch(e.tag){case 13:var r=e.stateNode,a=e.memoizedState;null!==a&&(n=a.retryLane);break;case 19:r=e.stateNode;break;case 22:r=e.stateNode._retryCache;break;default:throw Error(l(314))}null!==r&&r.delete(t),lh(e,n)}var lv=null,lS=null,lw=!1,lx=!1,lk=!1,l_=0;function lE(e){var t;e!==lS&&null===e.next&&(null===lS?lv=lS=e:lS=lS.next=e),lx=!0,lw||(lw=!0,t=lO,cr(function(){0!=(6&sk)?er(ec,t):t()}))}function lP(e,t){if(!lk&&lx){lk=!0;do for(var n=!1,r=lv;null!==r;){if(!t){if(0!==e){var a=r.pendingLanes;if(0===a)var o=0;else{var i=r.suspendedLanes,s=r.pingedLanes;o=0xc000055&(o=(1<<31-ev(42|e)+1)-1&(a&~(i&~s)))?0xc000055&o|1:o?2|o:0}0!==o&&(n=!0,lT(r,o))}else o=sP,0==(3&(o=eE(r,r===s_?o:0)))||eP(r,o)||(n=!0,lT(r,o))}r=r.next}while(n);lk=!1}}function lO(){lx=lw=!1;var e,t=0;0!==l_&&(((e=window.event)&&"popstate"===e.type?e===l8||(l8=e,0):(l8=null,1))||(t=l_),l_=0);for(var n=es(),r=null,a=lv;null!==a;){var o=a.next,i=lC(a,n);0===i?(a.next=null,null===r?lv=o:r.next=o,null===o&&(lS=r)):(r=a,(0!==t||0!=(3&i))&&(lx=!0)),a=o}lP(t,!1)}function lC(e,t){for(var n=e.suspendedLanes,r=e.pingedLanes,a=e.expirationTimes,o=-0x3c00001&e.pendingLanes;0 title"):null)}function cj(e){return"stylesheet"!==e.type||0!=(3&e.state.loading)}var cT=null;function cA(){}function cI(){if(this.count--,0===this.count){if(this.stylesheets)cL(this,this.stylesheets);else if(this.unsuspend){var e=this.unsuspend;this.unsuspend=null,e()}}}var cN=null;function cL(e,t){e.stylesheets=null,null!==e.unsuspend&&(e.count++,cN=new Map,t.forEach(cR,e),cN=null,cI.call(e))}function cR(e,t){if(!(4&t.state.loading)){var n=cN.get(e);if(n)var r=n.get(null);else{n=new Map,cN.set(e,n);for(var a=e.querySelectorAll("link[data-precedence],style[data-precedence]"),o=0;o=0||(a[n]=e[n]);return a}var h={BASE:"base",BODY:"body",HEAD:"head",HTML:"html",LINK:"link",META:"meta",NOSCRIPT:"noscript",SCRIPT:"script",STYLE:"style",TITLE:"title",FRAGMENT:"Symbol(react.fragment)"},b={rel:["amphtml","canonical","alternate"]},y={type:["application/ld+json"]},v={charset:"",name:["robots","description"],property:["og:type","og:title","og:url","og:image","og:image:alt","og:description","twitter:url","twitter:title","twitter:description","twitter:image","twitter:image:alt","twitter:card","twitter:site"]},S=Object.keys(h).map(function(e){return h[e]}),w={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"},x=Object.keys(w).reduce(function(e,t){return e[w[t]]=t,e},{}),k=function(e,t){for(var n=e.length-1;n>=0;n-=1){var r=e[n];if(Object.prototype.hasOwnProperty.call(r,t))return r[t]}return null},_=function(e){var t=k(e,h.TITLE),n=k(e,"titleTemplate");if(Array.isArray(t)&&(t=t.join("")),n&&t)return n.replace(/%s/g,function(){return t});var r=k(e,"defaultTitle");return t||r||void 0},E=function(e,t){return t.filter(function(t){return void 0!==t[e]}).map(function(t){return t[e]}).reduce(function(e,t){return f({},e,t)},{})},P=function(e,t,n){var r={};return n.filter(function(t){return!!Array.isArray(t[e])||(void 0!==t[e]&&console&&"function"==typeof console.warn&&console.warn("Helmet: "+e+' should be of type "Array". Instead found type "'+typeof t[e]+'"'),!1)}).map(function(t){return t[e]}).reverse().reduce(function(e,n){var a={};n.filter(function(e){for(var n,o=Object.keys(e),i=0;i/g,">").replace(/"/g,""").replace(/'/g,"'")},N=function(e){return Object.keys(e).reduce(function(t,n){var r=void 0!==e[n]?n+'="'+e[n]+'"':""+n;return t?t+" "+r:r},"")},L=function(e,t){return void 0===t&&(t={}),Object.keys(e).reduce(function(t,n){return t[w[n]||n]=e[n],t},t)},R=function(e,t){return t.map(function(t,n){var a,o=((a={key:n})["data-rh"]=!0,a);return Object.keys(t).forEach(function(e){var n=w[e]||e;"innerHTML"===n||"cssText"===n?o.dangerouslySetInnerHTML={__html:t.innerHTML||t.cssText}:o[n]=t[e]}),r.createElement(e,o)})},D=function(e,t,n){switch(e){case h.TITLE:return{toComponent:function(){var e,n,a,o;return n=t.titleAttributes,(a={key:e=t.title})["data-rh"]=!0,o=L(n,a),[r.createElement(h.TITLE,o,e)]},toString:function(){var r,a,o;return r=t.title,a=N(t.titleAttributes),o=C(r),a?"<"+e+' data-rh="true" '+a+">"+I(o,n)+"":"<"+e+' data-rh="true">'+I(o,n)+""}};case"bodyAttributes":case"htmlAttributes":return{toComponent:function(){return L(t)},toString:function(){return N(t)}};default:return{toComponent:function(){return R(e,t)},toString:function(){return t.reduce(function(t,r){var a=Object.keys(r).filter(function(e){return!("innerHTML"===e||"cssText"===e)}).reduce(function(e,t){var a=void 0===r[t]?t:t+'="'+I(r[t],n)+'"';return e?e+" "+a:a},""),o=r.innerHTML||r.cssText||"",i=-1===A.indexOf(e);return t+"<"+e+' data-rh="true" '+a+(i?"/>":">"+o+"")},"")}}}},M=function(e){var t=e.baseTag,n=e.bodyAttributes,r=e.encode,a=e.htmlAttributes,o=e.noscriptTags,i=e.styleTags,s=e.title,l=e.titleAttributes,c=e.linkTags,u=e.metaTags,d=e.scriptTags,f={toComponent:function(){},toString:function(){return""}};if(e.prioritizeSeoTags){var p,m,g,S,w,x,k=(p=e.linkTags,m=e.scriptTags,g=e.encode,S=j(e.metaTags,v),w=j(p,b),x=j(m,y),{priorityMethods:{toComponent:function(){return[].concat(R(h.META,S.priority),R(h.LINK,w.priority),R(h.SCRIPT,x.priority))},toString:function(){return D(h.META,S.priority,g)+" "+D(h.LINK,w.priority,g)+" "+D(h.SCRIPT,x.priority,g)}},metaTags:S.default,linkTags:w.default,scriptTags:x.default});f=k.priorityMethods,c=k.linkTags,u=k.metaTags,d=k.scriptTags}return{priority:f,base:D(h.BASE,t,r),bodyAttributes:D("bodyAttributes",n,r),htmlAttributes:D("htmlAttributes",a,r),link:D(h.LINK,c,r),meta:D(h.META,u,r),noscript:D(h.NOSCRIPT,o,r),script:D(h.SCRIPT,d,r),style:D(h.STYLE,i,r),title:D(h.TITLE,{title:void 0===s?"":s,titleAttributes:l},r)}},F=[],z=function(e,t){var n=this;void 0===t&&(t="undefined"!=typeof document),this.instances=[],this.value={setHelmet:function(e){n.context.helmet=e},helmetInstances:{get:function(){return n.canUseDOM?F:n.instances},add:function(e){(n.canUseDOM?F:n.instances).push(e)},remove:function(e){var t=(n.canUseDOM?F:n.instances).indexOf(e);(n.canUseDOM?F:n.instances).splice(t,1)}}},this.context=e,this.canUseDOM=t,t||(e.helmet=M({baseTag:[],bodyAttributes:{},encodeSpecialCharacters:!0,htmlAttributes:{},linkTags:[],metaTags:[],noscriptTags:[],scriptTags:[],styleTags:[],title:"",titleAttributes:{}}))},B=r.createContext({}),$=o().shape({setHelmet:o().func,helmetInstances:o().shape({get:o().func,add:o().func,remove:o().func})}),U="undefined"!=typeof document,H=function(e){function t(n){var r;return(r=e.call(this,n)||this).helmetData=new z(r.props.context,t.canUseDOM),r}return p(t,e),t.prototype.render=function(){return r.createElement(B.Provider,{value:this.helmetData.value},this.props.children)},t}(r.Component);H.canUseDOM=U,H.propTypes={context:o().shape({helmet:o().shape()}),children:o().node.isRequired},H.defaultProps={context:{}},H.displayName="HelmetProvider";var q=function(e,t){var n,r=document.head||document.querySelector(h.HEAD),a=r.querySelectorAll(e+"[data-rh]"),o=[].slice.call(a),i=[];return t&&t.length&&t.forEach(function(t){var r=document.createElement(e);for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&("innerHTML"===a?r.innerHTML=t.innerHTML:"cssText"===a?r.styleSheet?r.styleSheet.cssText=t.cssText:r.appendChild(document.createTextNode(t.cssText)):r.setAttribute(a,void 0===t[a]?"":t[a]));r.setAttribute("data-rh","true"),o.some(function(e,t){return n=t,r.isEqualNode(e)})?o.splice(n,1):i.push(r)}),o.forEach(function(e){return e.parentNode.removeChild(e)}),i.forEach(function(e){return r.appendChild(e)}),{oldTags:o,newTags:i}},Z=function(e,t){var n=document.getElementsByTagName(e)[0];if(n){for(var r=n.getAttribute("data-rh"),a=r?r.split(","):[],o=[].concat(a),i=Object.keys(t),s=0;s=0;d-=1)n.removeAttribute(o[d]);a.length===o.length?n.removeAttribute("data-rh"):n.getAttribute("data-rh")!==i.join(",")&&n.setAttribute("data-rh",i.join(","))}},W=function(e,t){var n=e.baseTag,r=e.htmlAttributes,a=e.linkTags,o=e.metaTags,i=e.noscriptTags,s=e.onChangeClientState,l=e.scriptTags,c=e.styleTags,u=e.title,d=e.titleAttributes;Z(h.BODY,e.bodyAttributes),Z(h.HTML,r),void 0!==u&&document.title!==u&&(document.title=C(u)),Z(h.TITLE,d);var f={baseTag:q(h.BASE,n),linkTags:q(h.LINK,a),metaTags:q(h.META,o),noscriptTags:q(h.NOSCRIPT,i),scriptTags:q(h.SCRIPT,l),styleTags:q(h.STYLE,c)},p={},m={};Object.keys(f).forEach(function(e){var t=f[e],n=t.newTags,r=t.oldTags;n.length&&(p[e]=n),r.length&&(m[e]=f[e].oldTags)}),t&&t(),s(e,p,m)},V=null,G=function(e){function t(){for(var t,n=arguments.length,r=Array(n),a=0;a elements are self-closing and can not contain children. Refer to our API for more information.")}},n.flattenArrayTypeChildren=function(e){var t,n=e.child,r=e.arrayTypeChildren;return f({},r,((t={})[n.type]=[].concat(r[n.type]||[],[f({},e.newChildProps,this.mapNestedChildrenToProps(n,e.nestedChildren))]),t))},n.mapObjectTypeChildren=function(e){var t,n,r=e.child,a=e.newProps,o=e.newChildProps,i=e.nestedChildren;switch(r.type){case h.TITLE:return f({},a,((t={})[r.type]=i,t.titleAttributes=f({},o),t));case h.BODY:return f({},a,{bodyAttributes:f({},o)});case h.HTML:return f({},a,{htmlAttributes:f({},o)});default:return f({},a,((n={})[r.type]=f({},o),n))}},n.mapArrayTypeChildrenToProps=function(e,t){var n=f({},t);return Object.keys(e).forEach(function(t){var r;n=f({},n,((r={})[t]=e[t],r))}),n},n.warnOnInvalidChildren=function(e,t){return c()(S.some(function(t){return e.type===t}),"function"==typeof e.type?"You may be attempting to nest components within each other, which is not allowed. Refer to our API for more information.":"Only elements types "+S.join(", ")+" are allowed. Helmet does not support rendering <"+e.type+"> elements. Refer to our API for more information."),c()(!t||"string"==typeof t||Array.isArray(t)&&!t.some(function(e){return"string"!=typeof e}),"Helmet expects a string as a child of <"+e.type+">. Did you forget to wrap your children in braces? ( <"+e.type+">{``} ) Refer to our API for more information."),!0},n.mapChildrenToProps=function(e,t){var n=this,a={};return r.Children.forEach(e,function(e){if(e&&e.props){var r=e.props,o=r.children,i=g(r,K),s=Object.keys(i).reduce(function(e,t){return e[x[t]||t]=i[t],e},{}),l=e.type;switch("symbol"==typeof l?l=l.toString():n.warnOnInvalidChildren(e,o),l){case h.FRAGMENT:t=n.mapChildrenToProps(o,t);break;case h.LINK:case h.META:case h.NOSCRIPT:case h.SCRIPT:case h.STYLE:a=n.flattenArrayTypeChildren({child:e,arrayTypeChildren:a,newChildProps:s,nestedChildren:o});break;default:t=n.mapObjectTypeChildren({child:e,newProps:t,newChildProps:s,nestedChildren:o})}}}),this.mapArrayTypeChildrenToProps(a,t)},n.render=function(){var e=this.props,t=e.children,n=g(e,Y),a=f({},n),o=n.helmetData;return t&&(a=this.mapChildrenToProps(t,a)),!o||o instanceof z||(o=new z(o.context,o.instances)),o?r.createElement(G,f({},a,{context:o.value,helmetData:void 0})):r.createElement(B.Consumer,null,function(e){return r.createElement(G,f({},a,{context:e}))})},t}(r.Component);Q.propTypes={base:o().object,bodyAttributes:o().object,children:o().oneOfType([o().arrayOf(o().node),o().node]),defaultTitle:o().string,defer:o().bool,encodeSpecialCharacters:o().bool,htmlAttributes:o().object,link:o().arrayOf(o().object),meta:o().arrayOf(o().object),noscript:o().arrayOf(o().object),onChangeClientState:o().func,script:o().arrayOf(o().object),style:o().arrayOf(o().object),title:o().string,titleAttributes:o().object,titleTemplate:o().string,prioritizeSeoTags:o().bool,helmetData:o().object},Q.defaultProps={defer:!0,encodeSpecialCharacters:!0,prioritizeSeoTags:!1},Q.displayName="Helmet"},9921:function(e,t){"use strict";var n="function"==typeof Symbol&&Symbol.for,r=n?Symbol.for("react.element"):60103,a=n?Symbol.for("react.portal"):60106,o=n?Symbol.for("react.fragment"):60107,i=n?Symbol.for("react.strict_mode"):60108,s=n?Symbol.for("react.profiler"):60114,l=n?Symbol.for("react.provider"):60109,c=n?Symbol.for("react.context"):60110,u=n?Symbol.for("react.async_mode"):60111,d=n?Symbol.for("react.concurrent_mode"):60111,f=n?Symbol.for("react.forward_ref"):60112,p=n?Symbol.for("react.suspense"):60113,m=n?Symbol.for("react.suspense_list"):60120,g=n?Symbol.for("react.memo"):60115,h=n?Symbol.for("react.lazy"):60116,b=n?Symbol.for("react.block"):60121,y=n?Symbol.for("react.fundamental"):60117,v=n?Symbol.for("react.responder"):60118,S=n?Symbol.for("react.scope"):60119;function w(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case r:switch(e=e.type){case u:case d:case o:case s:case i:case p:return e;default:switch(e=e&&e.$$typeof){case c:case f:case h:case g:case l:return e;default:return t}}case a:return t}}}function x(e){return w(e)===d}t.AsyncMode=u,t.ConcurrentMode=d,t.ContextConsumer=c,t.ContextProvider=l,t.Element=r,t.ForwardRef=f,t.Fragment=o,t.Lazy=h,t.Memo=g,t.Portal=a,t.Profiler=s,t.StrictMode=i,t.Suspense=p,t.isAsyncMode=function(e){return x(e)||w(e)===u},t.isConcurrentMode=x,t.isContextConsumer=function(e){return w(e)===c},t.isContextProvider=function(e){return w(e)===l},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},t.isForwardRef=function(e){return w(e)===f},t.isFragment=function(e){return w(e)===o},t.isLazy=function(e){return w(e)===h},t.isMemo=function(e){return w(e)===g},t.isPortal=function(e){return w(e)===a},t.isProfiler=function(e){return w(e)===s},t.isStrictMode=function(e){return w(e)===i},t.isSuspense=function(e){return w(e)===p},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===o||e===d||e===s||e===i||e===p||e===m||"object"==typeof e&&null!==e&&(e.$$typeof===h||e.$$typeof===g||e.$$typeof===l||e.$$typeof===c||e.$$typeof===f||e.$$typeof===y||e.$$typeof===v||e.$$typeof===S||e.$$typeof===b)},t.typeOf=w},9864:function(e,t,n){"use strict";e.exports=n(9921)},8356:function(e,t,n){"use strict";function r(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function a(e){if(void 0===e)throw ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(){return(i=Object.assign||function(e){for(var t=1;t>>1,a=e[r];if(0>>1;ro(l,n))co(u,l)?(e[r]=u,e[c]=n,r=c):(e[r]=l,e[s]=n,r=s);else if(co(u,n))e[r]=u,e[c]=n,r=c;else break}}return t}function o(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}if(t.unstable_now=void 0,"object"==typeof performance&&"function"==typeof performance.now){var i,s=performance;t.unstable_now=function(){return s.now()}}else{var l=Date,c=l.now();t.unstable_now=function(){return l.now()-c}}var u=[],d=[],f=1,p=null,m=3,g=!1,h=!1,b=!1,y="function"==typeof setTimeout?setTimeout:null,v="function"==typeof clearTimeout?clearTimeout:null,S="undefined"!=typeof setImmediate?setImmediate:null;function w(e){for(var t=r(d);null!==t;){if(null===t.callback)a(d);else if(t.startTime<=e)a(d),t.sortIndex=t.expirationTime,n(u,t);else break;t=r(d)}}function x(e){if(b=!1,w(e),!h){if(null!==r(u))h=!0,A();else{var t=r(d);null!==t&&I(x,t.startTime-e)}}}var k=!1,_=-1,E=5,P=-1;function O(){return!(t.unstable_now()-Pe&&O());){var s=p.callback;if("function"==typeof s){p.callback=null,m=p.priorityLevel;var l=s(p.expirationTime<=e);if(e=t.unstable_now(),"function"==typeof l){p.callback=l,w(e),n=!0;break t}p===r(u)&&a(u),w(e)}else a(u);p=r(u)}if(null!==p)n=!0;else{var c=r(d);null!==c&&I(x,c.startTime-e),n=!1}}break e}finally{p=null,m=o,g=!1}n=void 0}}finally{n?i():k=!1}}}if("function"==typeof S)i=function(){S(C)};else if("undefined"!=typeof MessageChannel){var j=new MessageChannel,T=j.port2;j.port1.onmessage=C,i=function(){T.postMessage(null)}}else i=function(){y(C,0)};function A(){k||(k=!0,i())}function I(e,n){_=y(function(){e(t.unstable_now())},n)}t.unstable_IdlePriority=5,t.unstable_ImmediatePriority=1,t.unstable_LowPriority=4,t.unstable_NormalPriority=3,t.unstable_Profiling=null,t.unstable_UserBlockingPriority=2,t.unstable_cancelCallback=function(e){e.callback=null},t.unstable_continueExecution=function(){h||g||(h=!0,A())},t.unstable_forceFrameRate=function(e){0>e||125i?(e.sortIndex=o,n(d,e),null===r(u)&&e===r(d)&&(b?(v(_),_=-1):b=!0,I(x,o-i))):(e.sortIndex=s,n(u,e),h||g||(h=!0,A())),e},t.unstable_shouldYield=O,t.unstable_wrapCallback=function(e){var t=m;return function(){var n=m;m=t;try{return e.apply(this,arguments)}finally{m=n}}}},3840:function(e,t,n){"use strict";e.exports=n(6152)},6774:function(e){e.exports=function(e,t,n,r){var a=n?n.call(r,e,t):void 0;if(void 0!==a)return!!a;if(e===t)return!0;if("object"!=typeof e||!e||"object"!=typeof t||!t)return!1;var o=Object.keys(e),i=Object.keys(t);if(o.length!==i.length)return!1;for(var s=Object.prototype.hasOwnProperty.bind(t),l=0;lf}),n("7294");var r=n("5893"),a=n("8356"),o=n.n(a),i=n("7138");let s={"00111de7":[()=>n.e("1024").then(n.bind(n,327)),"@site/docs/gh-action.mdx",327],"03035cd7":[()=>n.e("4878").then(n.bind(n,3322)),"@site/docs/api/internal/type-aliases/WatchDestroy.md",3322],"04448f85":[()=>n.e("4054").then(n.bind(n,9827)),"@site/docs/languages/markdown.mdx",9827],"06e19a77":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("5951")]).then(n.bind(n,8607)),"@site/docs/configuration/query-params.mdx",8607],"077d6723":[()=>n.e("7801").then(n.bind(n,3161)),"@site/docs/languages/malina.mdx",3161],"085be8cd":[()=>n.e("3142").then(n.bind(n,4609)),"@site/docs/api/functions/getPlaygroundUrl.md",4609],"08a453f6":[()=>n.e("2976").then(n.bind(n,4544)),"@site/docs/api/internal/interfaces/EditorPosition.md",4544],"096873fa":[()=>n.e("6053").then(n.bind(n,3325)),"@site/docs/features/index.mdx",3325],"0a831b7f":[()=>n.e("8076").then(n.bind(n,9661)),"@site/docs/languages/postcssPresetEnv.mdx",9661],"0b8d8c22":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("6456")]).then(n.bind(n,496)),"@site/docs/languages/art-template.mdx",496],"0d1dd3d3":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("9472")]).then(n.bind(n,1764)),"@site/docs/languages/nunjucks.mdx",1764],"0e11b820":[()=>n.e("4001").then(n.bind(n,5361)),"@site/docs/api/interfaces/Playground.md",5361],"0eb8b304":[()=>n.e("9259").then(n.bind(n,5862)),"@site/docs/features/code-format.mdx",5862],"0ee03d4e":[()=>n.e("3550").then(n.bind(n,4619)),"@site/docs/why.mdx",4619],"0fd6ac79":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("4361")]).then(n.bind(n,2543)),"@site/docs/languages/postgresql.mdx",2543],0x9ee9ff:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("7297")]).then(n.bind(n,6962)),"@site/docs/features/tests.mdx",6962],"11b43341":[()=>n.e("4467").then(n.t.bind(n,9989,19)),"@generated/docusaurus-plugin-content-docs/default/p/docs-7fc.json",9989],"136fbf92":[()=>n.e("1551").then(n.bind(n,2782)),"@site/docs/languages/cpp.mdx",2782],"13e6e9d6":[()=>n.e("4684").then(n.bind(n,6191)),"@site/docs/languages/postcss.mdx",6191],"146d8c91":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("5621")]).then(n.bind(n,8315)),"@site/docs/features/editor-settings.mdx",8315],0x11113f9:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("2932"),n.e("7048")]).then(n.bind(n,7509)),"@theme/DocItem",7509],0x11ce4ab:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("9723")]).then(n.bind(n,8663)),"@site/docs/features/intellisense.mdx",8663],0x1204433:[()=>Promise.all([n.e("6212"),n.e("7694")]).then(n.bind(n,5764)),"@site/docs/overview.mdx",5764],"1a4e3797":[()=>Promise.all([n.e("6212"),n.e("5230")]).then(n.bind(n,150)),"@theme/SearchPage",150],"1abc4ae6":[()=>n.e("2828").then(n.bind(n,3690)),"@site/docs/languages/vue2.mdx",3690],"1b2ea3a7":[()=>n.e("5866").then(n.bind(n,3007)),"@site/docs/features/user-settings.mdx",3007],"1c4ba544":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("2812")]).then(n.bind(n,4593)),"@site/docs/languages/coffeescript.mdx",4593],"1ca5e944":[()=>n.e("677").then(n.bind(n,2107)),"@site/docs/languages/imba.mdx",2107],"1dd8878c":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("7106")]).then(n.bind(n,9222)),"@site/docs/languages/twig.mdx",9222],"1df93b7f":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("3849"),n.e("8706")]).then(n.bind(n,4978)),"@site/src/pages/index.tsx",4978],"220a2203":[()=>n.e("4020").then(n.bind(n,208)),"@site/docs/languages/riot.mdx",208],"263a0f1d":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("5136")]).then(n.bind(n,8181)),"@site/docs/languages/sucrase.mdx",8181],0x1a44c0e:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("8875")]).then(n.bind(n,7240)),"@site/docs/features/display-modes.mdx",7240],"29cc5b7b":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("3119")]).then(n.bind(n,1733)),"@site/docs/languages/python.mdx",1733],"29e1e855":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("9932")]).then(n.bind(n,4520)),"@site/docs/languages/svelte.mdx",4520],"2a7a6c71":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("9476")]).then(n.bind(n,2389)),"@site/docs/languages/php-wasm.mdx",2389],"2b3d6869":[()=>n.e("3953").then(n.bind(n,5605)),"@site/docs/languages/julia.mdx",5605],"2b9e9ebb":[()=>n.e("3208").then(n.bind(n,7357)),"@site/docs/api/globals.md",7357],"2c6c2717":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("1750")]).then(n.bind(n,2729)),"@site/docs/features/backup-restore.mdx",2729],"2dfd45fd":[()=>n.e("7459").then(n.bind(n,4354)),"@site/docs/languages/autoprefixer.mdx",4354],"301472d1":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("7516")]).then(n.bind(n,7635)),"@site/docs/languages/cssmodules.mdx",7635],"3021cf83":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("804")]).then(n.bind(n,4791)),"@site/docs/getting-started.mdx",4791],"31219cfd":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7306")]).then(n.bind(n,5140)),"@site/docs/features/snippets.mdx",5140],"316a85b5":[()=>n.e("5345").then(n.bind(n,6186)),"@site/docs/api/internal/interfaces/API.md",6186],"3213d97d":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("6763")]).then(n.bind(n,3201)),"@site/docs/examples/display-modes/full.mdx",3201],"3362462b":[()=>n.e("1939").then(n.bind(n,8249)),"@site/docs/languages/javascript.mdx",8249],"346aed81":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("6111")]).then(n.bind(n,2982)),"@site/docs/features/broadcast.mdx",2982],"3510475c":[()=>n.e("6122").then(n.bind(n,9580)),"@site/docs/features/share.mdx",9580],"3595c30f":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("7805")]).then(n.bind(n,5955)),"@site/docs/languages/python-wasm.mdx",5955],0x2254b0d:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("2719")]).then(n.bind(n,1613)),"@site/docs/languages/mustache.mdx",1613],"35f01bb6":[()=>Promise.all([n.e("6212"),n.e("5172")]).then(n.bind(n,5604)),"@site/docs/examples/display-modes/index.mdx",5604],0x225f508:[()=>n.e("2642").then(n.bind(n,3151)),"@site/docs/about.mdx",3151],"37b920e3":[()=>n.e("5825").then(n.bind(n,5895)),"@site/docs/api/internal/type-aliases/MonacoTheme.md",5895],"380ab2e5":[()=>n.e("7671").then(n.bind(n,1671)),"@site/docs/languages/astro.mdx",1671],"3b595d05":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("2255")]).then(n.bind(n,7201)),"@site/docs/sdk/headless.mdx",7201],"3c1570ec":[()=>n.e("6360").then(n.bind(n,2414)),"@site/docs/api/internal/type-aliases/Processor.md",2414],"3c778e3c":[()=>n.e("4119").then(n.bind(n,1437)),"@site/docs/api/internal/interfaces/UserConfig.md",1437],"3ca596c0":[()=>n.e("1850").then(n.bind(n,9889)),"@site/docs/languages/purgecss.mdx",9889],"3d26dfea":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("4775")]).then(n.bind(n,7341)),"@site/docs/languages/fennel.mdx",7341],"3d306dde":[()=>n.e("2907").then(n.bind(n,5963)),"@site/docs/api/internal/type-aliases/WatchLoad.md",5963],"3ec64a7f":[()=>n.e("7649").then(n.bind(n,3782)),"@site/docs/api/internal/interfaces/AppConfig.md",3782],"3f03fa75":[()=>n.e("4330").then(n.bind(n,7753)),"@site/docs/features/emmet.mdx",7753],"3f6b491d":[()=>n.e("2936").then(n.bind(n,7505)),"@site/docs/languages/assemblyscript.mdx",7505],"3f86c49b":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("1647")]).then(n.bind(n,6715)),"@site/docs/languages/ejs.mdx",6715],"403159e4":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("1197")]).then(n.bind(n,6807)),"@site/docs/features/code-prefill.mdx",6807],"4086122b":[()=>n.e("4472").then(n.bind(n,3612)),"@site/docs/features/projects.mdx",3612],"41907e12":[()=>n.e("1706").then(n.bind(n,395)),"@site/docs/api/internal/interfaces/Types.md",395],"41e10070":[()=>n.e("5031").then(n.bind(n,4883)),"@site/docs/features/result.mdx",4883],"43b319d5":[()=>Promise.all([n.e("6212"),n.e("6322")]).then(n.bind(n,790)),"@site/docs/languages/index.mdx",790],"450bd883":[()=>n.e("3966").then(n.bind(n,7843)),"@site/docs/languages/typescript.mdx",7843],"45901fe2":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("1576")]).then(n.bind(n,9976)),"@site/docs/sdk/svelte.mdx",9976],"4738667a":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("9826")]).then(n.bind(n,6183)),"@site/docs/languages/java.mdx",6183],"47aff71f":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("1220")]).then(n.bind(n,2327)),"@site/docs/features/compiled-code.mdx",2327],"48943d06":[()=>n.e("1974").then(n.bind(n,9097)),"@site/docs/languages/sass.mdx",9097],"4a7038fa":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("6834")]).then(n.bind(n,906)),"@site/docs/languages/csharp-wasm.mdx",906],"4cb8f9f4":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("9834")]).then(n.bind(n,422)),"@site/docs/features/import.mdx",422],"4e9ccd91":[()=>n.e("1713").then(n.bind(n,1676)),"@site/docs/languages/flow.mdx",1676],"51386caf":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("5839")]).then(n.bind(n,3943)),"@site/docs/features/css.mdx",3943],"51eed215":[()=>n.e("3305").then(n.bind(n,3011)),"@site/docs/languages/react-tsx.mdx",3011],"52e7b168":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("823")]).then(n.bind(n,4944)),"@site/docs/sdk/index.mdx",4944],"52e7ca68":[()=>n.e("5824").then(n.bind(n,673)),"@site/docs/api/internal/type-aliases/CodejarTheme.md",673],"54771f43":[()=>n.e("6892").then(n.bind(n,3813)),"@site/docs/api/internal/interfaces/ContentConfig.md",3813],"552372d2":[()=>n.e("7631").then(n.bind(n,6413)),"@site/docs/api/internal/interfaces/FormatterConfig.md",6413],"57c3686c":[()=>n.e("8723").then(n.bind(n,9756)),"@site/docs/languages/tcl.mdx",9756],"58fd4737":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("8342")]).then(n.bind(n,5968)),"@site/docs/examples/display-modes/codeblock.mdx",5968],"59cfba1b":[()=>n.e("4004").then(n.bind(n,726)),"@site/docs/contribution/release.mdx",726],"59d3e69b":[()=>n.e("6484").then(n.bind(n,9342)),"@site/docs/contribution/i18n.mdx",9342],"5a090f4d":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("328")]).then(n.bind(n,2961)),"@site/docs/features/module-resolution.mdx",2961],"5a7c91e2":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("5961")]).then(n.bind(n,8930)),"@site/docs/sdk/js-ts.mdx",8930],"5ab9470d":[()=>n.e("3200").then(n.bind(n,1900)),"@site/docs/features/command-menu.mdx",1900],"5ade636b":[()=>n.e("4311").then(n.bind(n,314)),"@site/docs/features/integrations.mdx",314],"5b239f4f":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("1899")]).then(n.bind(n,6373)),"@site/docs/languages/handlebars.mdx",6373],"5cb8df13":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("3397")]).then(n.bind(n,919)),"@site/docs/examples/display-modes/result.mdx",919],"5db10118":[()=>n.e("8160").then(n.bind(n,7063)),"@site/docs/api/functions/createPlayground.md",7063],"5e8c322a":[()=>n.e("6910").then(n.bind(n,2340)),"@site/docs/api/index.md",2340],"5e95c892":[()=>n.e("3432").then(n.bind(n,3512)),"@theme/DocsRoot",3512],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,5150)),"@generated/docusaurus.config",5150],"60f3f9ee":[()=>n.e("2850").then(n.bind(n,5851)),"@site/docs/credits.mdx",5851],"61d18494":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("5794")]).then(n.bind(n,1280)),"@site/docs/languages/sql.mdx",1280],"629e2d9b":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("6469")]).then(n.bind(n,5011)),"@site/docs/features/ai.mdx",5011],"63218e6b":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("1558")]).then(n.bind(n,6519)),"@site/docs/languages/r.mdx",6519],"64055fdc":[()=>n.e("2913").then(n.bind(n,7040)),"@site/docs/features/self-hosting.mdx",7040],0x3de5cd2:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("2252")]).then(n.bind(n,3762)),"@site/docs/languages/liquid.mdx",3762],"6804bced":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("8477")]).then(n.bind(n,4144)),"@site/docs/languages/vue.mdx",4144],"6810147d":[()=>n.e("540").then(n.bind(n,898)),"@site/docs/features/security.mdx",898],"682128af":[()=>n.e("5609").then(n.bind(n,6608)),"@site/docs/languages/unocss.mdx",6608],"6a7b7284":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("4007")]).then(n.bind(n,6544)),"@site/docs/features/lite.mdx",6544],"6b6763dd":[()=>n.e("4501").then(n.bind(n,511)),"@site/docs/contribution.mdx",511],"6c8f697c":[()=>n.e("2289").then(n.bind(n,7088)),"@site/docs/languages/stylus.mdx",7088],"6ce44407":[()=>n.e("554").then(n.bind(n,1902)),"@site/docs/languages/clio.mdx",1902],"6d62e4e7":[()=>n.e("2175").then(n.bind(n,9224)),"@site/docs/languages/windicss.mdx",9224],"6e898280":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("7714")]).then(n.bind(n,2322)),"@site/docs/languages/jinja.mdx",2322],"6eb5acb9":[()=>n.e("110").then(n.bind(n,6574)),"@site/docs/features/user-management.mdx",6574],"6ffa2daf":[()=>n.e("6873").then(n.bind(n,7394)),"@site/docs/features/recover.mdx",7394],"704479ec":[()=>n.e("6961").then(n.bind(n,7781)),"@site/docs/features/keyboard-shortcuts.mdx",7781],"719f8225":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("2080")]).then(n.bind(n,343)),"@site/docs/examples/display-modes/editor.mdx",343],"71bd286e":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("7848")]).then(n.bind(n,9713)),"@site/docs/languages/pug.mdx",9713],"739821ac":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("2470")]).then(n.bind(n,243)),"@site/docs/languages/asciidoc.mdx",243],"74ead2de":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("9746")]).then(n.bind(n,9699)),"@site/docs/features/sync.mdx",9699],"750a7206":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("2168")]).then(n.bind(n,9621)),"@site/docs/features/i18n.mdx",9621],"75343e73":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("9940")]).then(n.bind(n,4256)),"@site/docs/languages/commonlisp.mdx",4256],"78dcf9c6":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("8118")]).then(n.bind(n,8050)),"@site/docs/features/embeds.mdx",8050],"7a3ca373":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7773")]).then(n.bind(n,7512)),"@site/docs/features/permanent-url.mdx",7512],"7a4c801e":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("3967")]).then(n.bind(n,8340)),"@site/docs/languages/dot.mdx",8340],"7a8fca77":[()=>n.e("4484").then(n.bind(n,3114)),"@site/docs/languages/css.mdx",3114],"7ab6ded8":[()=>n.e("3134").then(n.bind(n,1402)),"@site/docs/languages/cpp-wasm.mdx",1402],"7ce57f72":[()=>n.e("3612").then(n.bind(n,2264)),"@site/docs/languages/perl.mdx",2264],"7d517f8d":[()=>n.e("3806").then(n.bind(n,4457)),"@site/docs/features/data-urls.mdx",4457],"7dccf384":[()=>n.e("5638").then(n.bind(n,8801)),"@site/docs/features/default-template-language.mdx",8801],"8137b5e1":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("8827")]).then(n.bind(n,1194)),"@site/docs/languages/haml.mdx",1194],"825a9671":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("2873")]).then(n.bind(n,905)),"@site/docs/languages/ruby-wasm.mdx",905],"827f7002":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("7371")]).then(n.bind(n,4947)),"@site/docs/languages/react-native-tsx.mdx",4947],"82c45bc9":[()=>n.e("5750").then(n.bind(n,5682)),"@site/docs/languages/blockly.mdx",5682],"8376f430":[()=>n.e("750").then(n.bind(n,1800)),"@site/docs/languages/lightningcss.mdx",1800],"856c8d2c":[()=>Promise.all([n.e("6212"),n.e("3940")]).then(n.bind(n,8913)),"@site/docs/markdown-to-livecodes.mdx",8913],"8967b5ba":[()=>n.e("4198").then(n.bind(n,3894)),"@site/docs/sponsor.mdx",3894],"89a1860b":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("420")]).then(n.bind(n,5914)),"@site/docs/languages/teal.mdx",5914],"8bdd886c":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("3746")]).then(n.bind(n,8560)),"@site/docs/languages/html.mdx",8560],"8c26d429":[()=>n.e("6620").then(n.bind(n,4586)),"@site/docs/advanced/custom-settings.mdx",4586],"8ed430cc":[()=>n.e("5718").then(n.bind(n,1505)),"@site/docs/advanced/services.mdx",1505],"8fefd3fb":[()=>n.e("4045").then(n.bind(n,8604)),"@site/docs/languages/stencil.mdx",8604],"9119c475":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("6909")]).then(n.bind(n,596)),"@site/docs/languages/lua-wasm.mdx",596],"93baf445":[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("8438")]).then(n.bind(n,984)),"@site/docs/languages/solid.mdx",984],"93fefe3a":[()=>n.e("7140").then(n.bind(n,7115)),"@site/docs/api/internal/type-aliases/ToolsPaneStatus.md",7115],"962d4273":[()=>n.e("1593").then(n.bind(n,3517)),"@site/docs/languages/livescript.mdx",3517],"9a3123ff":[()=>n.e("2133").then(n.bind(n,26)),"@site/docs/api/type-aliases/Language.md",26],"9c9dfa90":[()=>n.e("4286").then(n.bind(n,2919)),"@site/docs/languages/ocaml.mdx",2919],a1df81e4:[()=>n.e("5179").then(n.bind(n,2802)),"@site/docs/api/internal/type-aliases/EditorId.md",2802],a5365419:[()=>n.e("4416").then(n.bind(n,6309)),"@site/docs/languages/civet.mdx",6309],a7232ca4:[()=>n.e("8531").then(n.bind(n,8932)),"@site/docs/languages/tailwindcss.mdx",8932],a7456010:[()=>n.e("7365").then(n.t.bind(n,2050,19)),"@generated/docusaurus-plugin-content-pages/default/__plugin.json",2050],a7bd4aaa:[()=>n.e("5211").then(n.bind(n,6915)),"@theme/DocVersionRoot",6915],a8950a2d:[()=>n.e("4120").then(n.bind(n,3372)),"@site/docs/languages/scss.mdx",3372],a94703ab:[()=>Promise.all([n.e("6212"),n.e("9914")]).then(n.bind(n,928)),"@theme/DocRoot",928],a994a1a3:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("3728")]).then(n.bind(n,5815)),"@site/docs/languages/vento.mdx",5815],a9c0dfea:[()=>n.e("4528").then(n.bind(n,3002)),"@site/docs/api/internal/type-aliases/CssPresetId.md",3002],aa19e785:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("6465")]).then(n.bind(n,1795)),"@site/docs/sdk/react.mdx",1795],aba21aa0:[()=>n.e("5112").then(n.t.bind(n,2418,19)),"@generated/docusaurus-plugin-content-docs/default/__plugin.json",2418],ac29ff77:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("9797")]).then(n.bind(n,3651)),"@site/docs/features/assets.mdx",3651],acbea6ed:[()=>n.e("6717").then(n.bind(n,3270)),"@site/docs/languages/tsx.mdx",3270],ae571911:[()=>n.e("4546").then(n.bind(n,3578)),"@site/docs/api/interfaces/Code.md",3578],af2ea1d1:[()=>n.e("8541").then(n.bind(n,4683)),"@site/docs/features/welcome.mdx",4683],afc1c92d:[()=>n.e("8717").then(n.bind(n,6115)),"@site/docs/license.mdx",6115],b1517861:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("1310")]).then(n.bind(n,2018)),"@site/docs/languages/clojurescript.mdx",2018],b1cb4606:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("5493")]).then(n.bind(n,8146)),"@site/docs/languages/solid.tsx.mdx",8146],b5252e18:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("6041")]).then(n.bind(n,142)),"@site/docs/languages/lua.mdx",142],b6bdffd5:[()=>n.e("4083").then(n.bind(n,7681)),"@site/docs/api/internal/type-aliases/EditorTheme.md",7681],b6e4e67f:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("7554")]).then(n.bind(n,7841)),"@site/docs/languages/php.mdx",7841],b7743934:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("4420")]).then(n.bind(n,473)),"@site/docs/languages/react.mdx",473],b856c801:[()=>n.e("8256").then(n.bind(n,8900)),"@site/docs/languages/postcssImportUrl.mdx",8900],bb2066da:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("5287")]).then(n.bind(n,4892)),"@site/docs/features/read-only.mdx",4892],bf28df8a:[()=>n.e("133").then(n.bind(n,2281)),"@site/docs/bookmarklet.mdx",2281],bfb7ba14:[()=>Promise.all([n.e("6212"),n.e("7164")]).then(n.bind(n,1225)),"@site/docs/features/templates.mdx",1225],c141421f:[()=>n.e("7738").then(n.t.bind(n,3491,19)),"@generated/docusaurus-theme-search-algolia/default/__plugin.json",3491],c3aada04:[()=>n.e("6825").then(n.bind(n,3853)),"@site/docs/languages/rescript.mdx",3853],c4203c52:[()=>n.e("7585").then(n.bind(n,2158)),"@site/docs/api/internal/type-aliases/CDN.md",2158],c4c830c1:[()=>n.e("7744").then(n.bind(n,4104)),"@site/docs/api/internal/type-aliases/Theme.md",4104],c78257db:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("5682")]).then(n.bind(n,1571)),"@site/docs/features/tools-pane.mdx",1571],ca17531e:[()=>n.e("7942").then(n.bind(n,6345)),"@site/docs/api/internal/type-aliases/WatchTests.md",6345],ca96397b:[()=>n.e("6467").then(n.bind(n,8317)),"@site/docs/languages/diagrams.mdx",8317],cbd2a7cc:[()=>n.e("7370").then(n.bind(n,3303)),"@site/docs/api/internal/type-aliases/APICommands.md",3303],cd58d169:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("1293")]).then(n.bind(n,5650)),"@site/docs/languages/bbcode.mdx",5650],cda3ee9e:[()=>n.e("6949").then(n.bind(n,970)),"@site/docs/languages/cssnano.mdx",970],ce0d5460:[()=>n.e("2160").then(n.bind(n,5641)),"@site/docs/api/interfaces/Config.md",5641],d037fb9b:[()=>n.e("2877").then(n.bind(n,6284)),"@site/docs/languages/reason.mdx",6284],d3724847:[()=>n.e("5302").then(n.bind(n,4458)),"@site/docs/languages/less.mdx",4458],d3a00109:[()=>n.e("5359").then(n.bind(n,9211)),"@site/docs/languages/prolog.mdx",9211],d3e90110:[()=>n.e("5514").then(n.bind(n,1081)),"@site/docs/api/internal/type-aliases/WatchConsole.md",1081],d42911a9:[()=>n.e("6386").then(n.bind(n,9871)),"@site/docs/languages/tokencss.mdx",9871],d46104ff:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("705")]).then(n.bind(n,2089)),"@site/docs/languages/react-native.mdx",2089],d507e662:[()=>n.e("6771").then(n.bind(n,3320)),"@site/docs/api/internal/index.md",3320],d534fd77:[()=>n.e("8212").then(n.bind(n,7050)),"@site/docs/languages/mdx.mdx",7050],d6262eff:[()=>n.e("4153").then(n.bind(n,9861)),"@site/docs/api/interfaces/EmbedOptions.md",9861],d6dff286:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("8083")]).then(n.bind(n,6706)),"@site/docs/features/deploy.mdx",6706],d7206776:[()=>Promise.all([n.e("6212"),n.e("7663")]).then(n.bind(n,6326)),"@site/docs/advanced/index.mdx",6326],d8b2d1db:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("1279")]).then(n.bind(n,818)),"@site/docs/features/themes.mdx",818],d8cca940:[()=>n.e("8521").then(n.bind(n,2092)),"@site/docs/configuration/index.mdx",2092],dbb4adf0:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("5767")]).then(n.bind(n,2162)),"@site/docs/features/console.mdx",2162],dc92e917:[()=>n.e("1758").then(n.bind(n,2812)),"@site/docs/contribution/adding-languages.mdx",2812],dcf28466:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("9079")]).then(n.bind(n,3472)),"@site/docs/features/default-view.mdx",3472],dd7b137e:[()=>n.e("5022").then(n.bind(n,8410)),"@site/docs/api/internal/type-aliases/TemplateName.md",8410],e09614ee:[()=>n.e("2706").then(n.bind(n,8725)),"@site/docs/languages/stylis.mdx",8725],e1a95b0b:[()=>n.e("7284").then(n.bind(n,5116)),"@site/docs/api/internal/type-aliases/AppLanguage.md",5116],e1f490b7:[()=>n.e("4116").then(n.bind(n,4552)),"@site/docs/api/internal/interfaces/TestResult.md",4552],e2e2d448:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("8481")]).then(n.bind(n,3722)),"@site/docs/features/external-resources.mdx",3722],e4d89e4c:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("9716")]).then(n.bind(n,4441)),"@site/docs/languages/jsx.mdx",4441],e67156d3:[()=>n.e("2949").then(n.bind(n,4498)),"@site/docs/features/mobile.mdx",4498],ea9414ac:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("7019")]).then(n.bind(n,3550)),"@site/docs/languages/babel.mdx",3550],ec7fa08a:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("6176")]).then(n.bind(n,2108)),"@site/docs/languages/mjml.mdx",2108],ec9563e7:[()=>n.e("2464").then(n.bind(n,6743)),"@site/docs/features/github-integration.mdx",6743],ef4aa51e:[()=>n.e("3729").then(n.bind(n,5173)),"@site/docs/languages/richtext.mdx",5173],f0400b8e:[()=>Promise.all([n.e("6212"),n.e("9247")]).then(n.bind(n,9083)),"@site/docs/contact.mdx",9083],f074ec4e:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("5787")]).then(n.bind(n,3880)),"@site/docs/sdk/vue.mdx",3880],f1337b1a:[()=>n.e("7302").then(n.bind(n,7496)),"@site/docs/api/internal/interfaces/EditorConfig.md",7496],f1f69e02:[()=>n.e("2950").then(n.bind(n,2354)),"@site/docs/languages/wat.mdx",2354],f3be12ec:[()=>n.e("1210").then(n.bind(n,7400)),"@site/docs/api/internal/type-aliases/WatchCode.md",7400],f439a60e:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("9636")]).then(n.bind(n,1941)),"@site/docs/languages/eta.mdx",1941],f47bf993:[()=>n.e("6202").then(n.bind(n,9516)),"@site/docs/features/code-to-image.mdx",9516],f54598d4:[()=>n.e("6395").then(n.bind(n,531)),"@site/docs/features/export.mdx",531],f5d64ffd:[()=>n.e("5670").then(n.bind(n,1855)),"@site/docs/api/internal/type-aliases/CodemirrorTheme.md",1855],f71e509b:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("6083")]).then(n.bind(n,9662)),"@site/docs/languages/gleam.mdx",9662],f87bbaef:[()=>n.e("193").then(n.bind(n,2667)),"@site/docs/api/internal/type-aliases/WatchReady.md",2667],fbd82323:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("2127")]).then(n.bind(n,3440)),"@site/docs/languages/ruby.mdx",3440],fd2b2d45:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("833")]).then(n.bind(n,172)),"@site/docs/languages/scheme.mdx",172],fe0461a7:[()=>Promise.all([n.e("6212"),n.e("7364"),n.e("7565"),n.e("8434")]).then(n.bind(n,6263)),"@site/docs/configuration/configuration-object.mdx",6263],ffbac226:[()=>n.e("9699").then(n.bind(n,3510)),"@site/docs/languages/go.mdx",3510]};function l(e){let{error:t,retry:n,pastDelay:a}=e;return t?(0,r.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,r.jsx)("p",{children:String(t)}),(0,r.jsx)("div",{children:(0,r.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):a?(0,r.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,r.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,r.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,r.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,r.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,r.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,r.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,r.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,r.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,r.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,r.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,r.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,r.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n("7059"),u=n("5970");function d(e,t){if("*"===e)return o()({loading:l,loader:()=>n.e("3853").then(n.bind(n,2917)),modules:["@theme/NotFound"],webpack:()=>[2917],render(e,t){let n=e.default;return(0,r.jsx)(u.z,{value:{plugin:{name:"native",id:"default"}},children:(0,r.jsx)(n,{...t})})}});let a=i[`${e}-${t}`],d={},f=[],p=[];return Object.entries((0,c.Z)(a)).forEach(e=>{let[t,n]=e,r=s[n];r&&(d[t]=r[0],f.push(r[1]),p.push(r[2]))}),o().Map({loading:l,loader:d,modules:f,webpack:()=>p,render(t,n){let o=JSON.parse(JSON.stringify(a));Object.entries(t).forEach(t=>{let[n,r]=t,a=r.default;if(!a)throw Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);("object"==typeof a||"function"==typeof a)&&Object.keys(r).filter(e=>"default"!==e).forEach(e=>{a[e]=r[e]});let i=o,s=n.split(".");s.slice(0,-1).forEach(e=>{i=i[e]}),i[s[s.length-1]]=a});let i=o.__comp;delete o.__comp;let s=o.__context;delete o.__context;let l=o.__props;return delete o.__props,(0,r.jsx)(u.z,{value:s,children:(0,r.jsx)(i,{...o,...l,...n})})}})}let f=[{path:"/docs/search",component:d("/docs/search","320"),exact:!0},{path:"/docs/",component:d("/docs/","2a6"),exact:!0},{path:"/docs/",component:d("/docs/","6a9"),routes:[{path:"/docs/",component:d("/docs/","549"),routes:[{path:"/docs/",component:d("/docs/","e14"),routes:[{path:"/docs/about",component:d("/docs/about","4c6"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/advanced/",component:d("/docs/advanced/","654"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/advanced/custom-settings",component:d("/docs/advanced/custom-settings","c0e"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/advanced/services",component:d("/docs/advanced/services","b93"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/api/",component:d("/docs/api/","2c7"),exact:!0},{path:"/docs/api/functions/createPlayground",component:d("/docs/api/functions/createPlayground","7cc"),exact:!0},{path:"/docs/api/functions/getPlaygroundUrl",component:d("/docs/api/functions/getPlaygroundUrl","032"),exact:!0},{path:"/docs/api/globals",component:d("/docs/api/globals","21a"),exact:!0},{path:"/docs/api/interfaces/Code",component:d("/docs/api/interfaces/Code","edc"),exact:!0},{path:"/docs/api/interfaces/Config",component:d("/docs/api/interfaces/Config","61d"),exact:!0},{path:"/docs/api/interfaces/EmbedOptions",component:d("/docs/api/interfaces/EmbedOptions","cd5"),exact:!0},{path:"/docs/api/interfaces/Playground",component:d("/docs/api/interfaces/Playground","034"),exact:!0},{path:"/docs/api/internal/",component:d("/docs/api/internal/","818"),exact:!0},{path:"/docs/api/internal/interfaces/API",component:d("/docs/api/internal/interfaces/API","5c3"),exact:!0},{path:"/docs/api/internal/interfaces/AppConfig",component:d("/docs/api/internal/interfaces/AppConfig","c1d"),exact:!0},{path:"/docs/api/internal/interfaces/ContentConfig",component:d("/docs/api/internal/interfaces/ContentConfig","742"),exact:!0},{path:"/docs/api/internal/interfaces/EditorConfig",component:d("/docs/api/internal/interfaces/EditorConfig","22c"),exact:!0},{path:"/docs/api/internal/interfaces/EditorPosition",component:d("/docs/api/internal/interfaces/EditorPosition","013"),exact:!0},{path:"/docs/api/internal/interfaces/FormatterConfig",component:d("/docs/api/internal/interfaces/FormatterConfig","78b"),exact:!0},{path:"/docs/api/internal/interfaces/TestResult",component:d("/docs/api/internal/interfaces/TestResult","357"),exact:!0},{path:"/docs/api/internal/interfaces/Types",component:d("/docs/api/internal/interfaces/Types","e24"),exact:!0},{path:"/docs/api/internal/interfaces/UserConfig",component:d("/docs/api/internal/interfaces/UserConfig","0f8"),exact:!0},{path:"/docs/api/internal/type-aliases/APICommands",component:d("/docs/api/internal/type-aliases/APICommands","ff5"),exact:!0},{path:"/docs/api/internal/type-aliases/AppLanguage",component:d("/docs/api/internal/type-aliases/AppLanguage","b13"),exact:!0},{path:"/docs/api/internal/type-aliases/CDN",component:d("/docs/api/internal/type-aliases/CDN","423"),exact:!0},{path:"/docs/api/internal/type-aliases/CodejarTheme",component:d("/docs/api/internal/type-aliases/CodejarTheme","fac"),exact:!0},{path:"/docs/api/internal/type-aliases/CodemirrorTheme",component:d("/docs/api/internal/type-aliases/CodemirrorTheme","a48"),exact:!0},{path:"/docs/api/internal/type-aliases/CssPresetId",component:d("/docs/api/internal/type-aliases/CssPresetId","085"),exact:!0},{path:"/docs/api/internal/type-aliases/EditorId",component:d("/docs/api/internal/type-aliases/EditorId","530"),exact:!0},{path:"/docs/api/internal/type-aliases/EditorTheme",component:d("/docs/api/internal/type-aliases/EditorTheme","b26"),exact:!0},{path:"/docs/api/internal/type-aliases/MonacoTheme",component:d("/docs/api/internal/type-aliases/MonacoTheme","62d"),exact:!0},{path:"/docs/api/internal/type-aliases/Processor",component:d("/docs/api/internal/type-aliases/Processor","3a7"),exact:!0},{path:"/docs/api/internal/type-aliases/TemplateName",component:d("/docs/api/internal/type-aliases/TemplateName","e1b"),exact:!0},{path:"/docs/api/internal/type-aliases/Theme",component:d("/docs/api/internal/type-aliases/Theme","213"),exact:!0},{path:"/docs/api/internal/type-aliases/ToolsPaneStatus",component:d("/docs/api/internal/type-aliases/ToolsPaneStatus","8f9"),exact:!0},{path:"/docs/api/internal/type-aliases/WatchCode",component:d("/docs/api/internal/type-aliases/WatchCode","64d"),exact:!0},{path:"/docs/api/internal/type-aliases/WatchConsole",component:d("/docs/api/internal/type-aliases/WatchConsole","0e5"),exact:!0},{path:"/docs/api/internal/type-aliases/WatchDestroy",component:d("/docs/api/internal/type-aliases/WatchDestroy","9c5"),exact:!0},{path:"/docs/api/internal/type-aliases/WatchLoad",component:d("/docs/api/internal/type-aliases/WatchLoad","38a"),exact:!0},{path:"/docs/api/internal/type-aliases/WatchReady",component:d("/docs/api/internal/type-aliases/WatchReady","710"),exact:!0},{path:"/docs/api/internal/type-aliases/WatchTests",component:d("/docs/api/internal/type-aliases/WatchTests","986"),exact:!0},{path:"/docs/api/type-aliases/Language",component:d("/docs/api/type-aliases/Language","cb5"),exact:!0},{path:"/docs/bookmarklet",component:d("/docs/bookmarklet","bf3"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/configuration/",component:d("/docs/configuration/","f02"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/configuration/configuration-object",component:d("/docs/configuration/configuration-object","24d"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/configuration/query-params",component:d("/docs/configuration/query-params","34d"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/contact",component:d("/docs/contact","c67"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/contribution",component:d("/docs/contribution","b45"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/contribution/adding-languages",component:d("/docs/contribution/adding-languages","f70"),exact:!0},{path:"/docs/contribution/i18n",component:d("/docs/contribution/i18n","a97"),exact:!0},{path:"/docs/contribution/release",component:d("/docs/contribution/release","bcf"),exact:!0},{path:"/docs/credits",component:d("/docs/credits","78b"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/examples/display-modes/",component:d("/docs/examples/display-modes/","e2f"),exact:!0,sidebar:"examplesSidebar"},{path:"/docs/examples/display-modes/codeblock",component:d("/docs/examples/display-modes/codeblock","3a1"),exact:!0,sidebar:"examplesSidebar"},{path:"/docs/examples/display-modes/editor",component:d("/docs/examples/display-modes/editor","63c"),exact:!0,sidebar:"examplesSidebar"},{path:"/docs/examples/display-modes/full",component:d("/docs/examples/display-modes/full","df9"),exact:!0,sidebar:"examplesSidebar"},{path:"/docs/examples/display-modes/result",component:d("/docs/examples/display-modes/result","754"),exact:!0,sidebar:"examplesSidebar"},{path:"/docs/features/",component:d("/docs/features/","b6e"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/ai",component:d("/docs/features/ai","22e"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/assets",component:d("/docs/features/assets","90e"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/backup-restore",component:d("/docs/features/backup-restore","b56"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/broadcast",component:d("/docs/features/broadcast","940"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/code-format",component:d("/docs/features/code-format","6b9"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/code-prefill",component:d("/docs/features/code-prefill","a25"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/code-to-image",component:d("/docs/features/code-to-image","0b3"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/command-menu",component:d("/docs/features/command-menu","008"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/compiled-code",component:d("/docs/features/compiled-code","c6b"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/console",component:d("/docs/features/console","140"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/css",component:d("/docs/features/css","9d1"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/data-urls",component:d("/docs/features/data-urls","760"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/default-template-language",component:d("/docs/features/default-template-language","073"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/default-view",component:d("/docs/features/default-view","82b"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/deploy",component:d("/docs/features/deploy","c09"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/display-modes",component:d("/docs/features/display-modes","f41"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/editor-settings",component:d("/docs/features/editor-settings","d72"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/embeds",component:d("/docs/features/embeds","2b0"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/emmet",component:d("/docs/features/emmet","cd5"),exact:!0},{path:"/docs/features/export",component:d("/docs/features/export","f93"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/external-resources",component:d("/docs/features/external-resources","a4f"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/github-integration",component:d("/docs/features/github-integration","bdf"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/i18n",component:d("/docs/features/i18n","8b7"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/import",component:d("/docs/features/import","5c6"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/integrations",component:d("/docs/features/integrations","0b6"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/intellisense",component:d("/docs/features/intellisense","13c"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/keyboard-shortcuts",component:d("/docs/features/keyboard-shortcuts","e25"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/lite",component:d("/docs/features/lite","b3e"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/mobile",component:d("/docs/features/mobile","f7c"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/module-resolution",component:d("/docs/features/module-resolution","205"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/permanent-url",component:d("/docs/features/permanent-url","013"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/projects",component:d("/docs/features/projects","4a4"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/read-only",component:d("/docs/features/read-only","b16"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/recover",component:d("/docs/features/recover","1cb"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/result",component:d("/docs/features/result","f1d"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/security",component:d("/docs/features/security","ce6"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/self-hosting",component:d("/docs/features/self-hosting","21c"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/share",component:d("/docs/features/share","e2b"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/snippets",component:d("/docs/features/snippets","15a"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/sync",component:d("/docs/features/sync","975"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/templates",component:d("/docs/features/templates","fe4"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/tests",component:d("/docs/features/tests","10b"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/themes",component:d("/docs/features/themes","7dd"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/tools-pane",component:d("/docs/features/tools-pane","a03"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/user-management",component:d("/docs/features/user-management","436"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/user-settings",component:d("/docs/features/user-settings","aa9"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/features/welcome",component:d("/docs/features/welcome","be9"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/getting-started",component:d("/docs/getting-started","41b"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/gh-action",component:d("/docs/gh-action","47f"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/",component:d("/docs/languages/","292"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/art-template",component:d("/docs/languages/art-template","b3e"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/asciidoc",component:d("/docs/languages/asciidoc","ae0"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/assemblyscript",component:d("/docs/languages/assemblyscript","e7c"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/astro",component:d("/docs/languages/astro","f82"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/autoprefixer",component:d("/docs/languages/autoprefixer","16f"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/babel",component:d("/docs/languages/babel","004"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/bbcode",component:d("/docs/languages/bbcode","d0c"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/blockly",component:d("/docs/languages/blockly","71c"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/civet",component:d("/docs/languages/civet","05b"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/clio",component:d("/docs/languages/clio","852"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/clojurescript",component:d("/docs/languages/clojurescript","134"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/coffeescript",component:d("/docs/languages/coffeescript","9d4"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/commonlisp",component:d("/docs/languages/commonlisp","843"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/cpp",component:d("/docs/languages/cpp","292"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/cpp-wasm",component:d("/docs/languages/cpp-wasm","483"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/csharp-wasm",component:d("/docs/languages/csharp-wasm","42d"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/css",component:d("/docs/languages/css","0e6"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/cssmodules",component:d("/docs/languages/cssmodules","e6a"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/cssnano",component:d("/docs/languages/cssnano","163"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/diagrams",component:d("/docs/languages/diagrams","1b8"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/dot",component:d("/docs/languages/dot","748"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/ejs",component:d("/docs/languages/ejs","3c0"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/eta",component:d("/docs/languages/eta","ca5"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/fennel",component:d("/docs/languages/fennel","731"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/flow",component:d("/docs/languages/flow","9ae"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/gleam",component:d("/docs/languages/gleam","8f9"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/go",component:d("/docs/languages/go","077"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/haml",component:d("/docs/languages/haml","302"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/handlebars",component:d("/docs/languages/handlebars","94d"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/html",component:d("/docs/languages/html","60f"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/imba",component:d("/docs/languages/imba","b34"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/java",component:d("/docs/languages/java","5a3"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/javascript",component:d("/docs/languages/javascript","065"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/jinja",component:d("/docs/languages/jinja","174"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/jsx",component:d("/docs/languages/jsx","3ab"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/julia",component:d("/docs/languages/julia","dd6"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/less",component:d("/docs/languages/less","e53"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/lightningcss",component:d("/docs/languages/lightningcss","94b"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/liquid",component:d("/docs/languages/liquid","f8f"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/livescript",component:d("/docs/languages/livescript","feb"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/lua",component:d("/docs/languages/lua","9b8"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/lua-wasm",component:d("/docs/languages/lua-wasm","c3a"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/malina",component:d("/docs/languages/malina","899"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/markdown",component:d("/docs/languages/markdown","b81"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/mdx",component:d("/docs/languages/mdx","5f2"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/mjml",component:d("/docs/languages/mjml","a66"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/mustache",component:d("/docs/languages/mustache","d87"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/nunjucks",component:d("/docs/languages/nunjucks","5ef"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/ocaml",component:d("/docs/languages/ocaml","c09"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/perl",component:d("/docs/languages/perl","c5a"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/php",component:d("/docs/languages/php","d9a"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/php-wasm",component:d("/docs/languages/php-wasm","3bb"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/postcss",component:d("/docs/languages/postcss","ba3"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/postcssImportUrl",component:d("/docs/languages/postcssImportUrl","7bb"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/postcssPresetEnv",component:d("/docs/languages/postcssPresetEnv","765"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/postgresql",component:d("/docs/languages/postgresql","b17"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/prolog",component:d("/docs/languages/prolog","312"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/pug",component:d("/docs/languages/pug","d28"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/purgecss",component:d("/docs/languages/purgecss","30a"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/python",component:d("/docs/languages/python","ddc"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/python-wasm",component:d("/docs/languages/python-wasm","da1"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/r",component:d("/docs/languages/r","cea"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/react",component:d("/docs/languages/react","d00"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/react-native",component:d("/docs/languages/react-native","956"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/react-native-tsx",component:d("/docs/languages/react-native-tsx","2db"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/react-tsx",component:d("/docs/languages/react-tsx","402"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/reason",component:d("/docs/languages/reason","c75"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/rescript",component:d("/docs/languages/rescript","52b"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/richtext",component:d("/docs/languages/richtext","04b"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/riot",component:d("/docs/languages/riot","c81"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/ruby",component:d("/docs/languages/ruby","ec1"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/ruby-wasm",component:d("/docs/languages/ruby-wasm","351"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/sass",component:d("/docs/languages/sass","4b9"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/scheme",component:d("/docs/languages/scheme","bbd"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/scss",component:d("/docs/languages/scss","3e7"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/solid",component:d("/docs/languages/solid","e80"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/solid.tsx",component:d("/docs/languages/solid.tsx","cb2"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/sql",component:d("/docs/languages/sql","97b"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/stencil",component:d("/docs/languages/stencil","1f5"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/stylis",component:d("/docs/languages/stylis","969"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/stylus",component:d("/docs/languages/stylus","1cc"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/sucrase",component:d("/docs/languages/sucrase","3db"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/svelte",component:d("/docs/languages/svelte","152"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/tailwindcss",component:d("/docs/languages/tailwindcss","046"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/tcl",component:d("/docs/languages/tcl","d3b"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/teal",component:d("/docs/languages/teal","74a"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/tokencss",component:d("/docs/languages/tokencss","56b"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/tsx",component:d("/docs/languages/tsx","503"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/twig",component:d("/docs/languages/twig","d51"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/typescript",component:d("/docs/languages/typescript","96b"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/unocss",component:d("/docs/languages/unocss","e7e"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/vento",component:d("/docs/languages/vento","5eb"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/vue",component:d("/docs/languages/vue","d2d"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/vue2",component:d("/docs/languages/vue2","f2b"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/wat",component:d("/docs/languages/wat","564"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/languages/windicss",component:d("/docs/languages/windicss","c35"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/license",component:d("/docs/license","400"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/markdown-to-livecodes",component:d("/docs/markdown-to-livecodes","112"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/overview",component:d("/docs/overview","6fc"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/sdk/",component:d("/docs/sdk/","ad3"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/sdk/headless",component:d("/docs/sdk/headless","65a"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/sdk/js-ts",component:d("/docs/sdk/js-ts","682"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/sdk/react",component:d("/docs/sdk/react","6e2"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/sdk/svelte",component:d("/docs/sdk/svelte","428"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/sdk/vue",component:d("/docs/sdk/vue","370"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/sponsor",component:d("/docs/sponsor","244"),exact:!0,sidebar:"docsSidebar"},{path:"/docs/why",component:d("/docs/why","9ec"),exact:!0,sidebar:"docsSidebar"}]}]}]},{path:"*",component:d("*")}]},8184:function(e,t,n){"use strict";n.d(t,{_:function(){return o},t:function(){return i}});var r=n(5893),a=n(7294);let o=a.createContext(!1);function i(e){let{children:t}=e,[n,i]=(0,a.useState)(!1);return(0,a.useEffect)(()=>{i(!0)},[]),(0,r.jsx)(o.Provider,{value:n,children:t})}},6181:function(e,t,n){"use strict";var r=n("5893"),a=n("7294"),o=n("745"),i=n("405"),s=n("3727"),l=n("5150"),c=n("3262");let u=[n(2132),n(3902),n(6928),n(9487),n(1887)];var d=n("4320"),f=n("6550"),p=n("8790"),m=n("2188"),g=n("1858");function h(e){let{children:t}=e,[n,o]=(0,a.useState)(m.AZ),[i,s]=(0,a.useState)(m.yY),l=function(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];(n!==m.AZ||e)&&o((0,m.Pc)())};return(0,a.useEffect)(()=>{c.Z.canUseDOM&&(document.querySelector("#ea-placeholder")?.remove(),(0,g.H)()||(document.body.dataset.originNotAllowed="true")),l(!0),(0,m.n_)().then(e=>{e&&s(e)})},[]),(0,r.jsx)(m.Bi.Provider,{value:{docContent:n,tocContent:i,updateContent:l},children:t})}var b=n("1199"),y=n("7262"),v=n("3187"),S=n("6009"),w=n("5231"),x=n("8229"),k=n("4169"),_=n("86"),E=n("3781"),P=n("2901");function O(){let{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,y.Z)(),a=(0,x.l)(),o=n[e].htmlLang,i=e=>e.replace("-","_");return(0,r.jsxs)(b.Z,{children:[Object.entries(n).map(e=>{let[t,{htmlLang:n}]=e;return(0,r.jsx)("link",{rel:"alternate",href:a.createUrl({locale:t,fullyQualified:!0}),hrefLang:n},t)}),(0,r.jsx)("link",{rel:"alternate",href:a.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,r.jsx)("meta",{property:"og:locale",content:i(o)}),Object.values(n).filter(e=>o!==e.htmlLang).map(e=>(0,r.jsx)("meta",{property:"og:locale:alternate",content:i(e.htmlLang)},`meta-og-${e.htmlLang}`))]})}function C(e){let{permalink:t}=e,{siteConfig:{url:n}}=(0,y.Z)(),a=function(){let{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,y.Z)(),{pathname:r}=(0,f.TH)();return e+(0,E.applyTrailingSlash)((0,v.ZP)(r),{trailingSlash:n,baseUrl:t})}(),o=t?`${n}${t}`:a;return(0,r.jsxs)(b.Z,{children:[(0,r.jsx)("meta",{property:"og:url",content:o}),(0,r.jsx)("link",{rel:"canonical",href:o})]})}function j(){let{i18n:{currentLocale:e}}=(0,y.Z)(),{metadata:t,image:n}=(0,S.L)();return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(b.Z,{children:[(0,r.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,r.jsx)("body",{className:k.h})]}),n&&(0,r.jsx)(w.d,{image:n}),(0,r.jsx)(C,{}),(0,r.jsx)(O,{}),(0,r.jsx)(P.Z,{tag:_.H,locale:e}),(0,r.jsx)(b.Z,{children:t.map((e,t)=>(0,r.jsx)("meta",{...e},t))})]})}let T=new Map;var A=n("8184"),I=n("2502"),N=n("8714");function L(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r{let r=t.default?.[e]??t[e];return r?.(...n)});return()=>a.forEach(e=>e?.())}let R=function(e){let{children:t,location:n,previousLocation:r}=e;return(0,N.Z)(()=>{r!==n&&(function(e){let{location:t,previousLocation:n}=e;if(!n)return;let r=t.pathname===n.pathname,a=t.hash===n.hash,o=t.search===n.search;if(r&&a&&!o)return;let{hash:i}=t;if(i){let e=decodeURIComponent(i.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:r}),L("onRouteDidUpdate",{previousLocation:r,location:n}))},[r,n]),t};function D(e){return Promise.all(Array.from(new Set([e,decodeURI(e)])).map(e=>(0,p.f)(d.Z,e)).flat().map(e=>e.route.component.preload?.()))}class M extends a.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=c.Z.canUseDOM?L("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;let n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=L("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),D(n.pathname).then(()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})}).catch(e=>{console.warn(e),window.location.reload()}),!1}render(){let{children:e,location:t}=this.props;return(0,r.jsx)(R,{previousLocation:this.previousLocation,location:t,children:(0,r.jsx)(f.AW,{location:t,render:()=>e})})}}let F="__docusaurus-base-url-issue-banner-suggestion-container";function z(){let{siteConfig:{baseUrl:e}}=(0,y.Z)();return(0,r.jsx)(r.Fragment,{children:!c.Z.canUseDOM&&(0,r.jsx)(b.Z,{children:(0,r.jsx)("script",{children:` +document.addEventListener('DOMContentLoaded', function maybeInsertBanner() { + var shouldInsert = typeof window['docusaurus'] === 'undefined'; + shouldInsert && insertBanner(); +}); + +function insertBanner() { + var bannerContainer = document.createElement('div'); + bannerContainer.id = '__docusaurus-base-url-issue-banner-container'; + var bannerHtml = ${JSON.stringify(` +
+

Your Docusaurus site did not load properly.

+

A very common reason is a wrong site baseUrl configuration.

+

Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}

+

We suggest trying baseUrl =

+
+`).replace(/{let{route:t}=e;return!0===t.exact}))return T.set(e.pathname,e.pathname),e;let t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return T.set(e.pathname,t),{...e,pathname:t}}((0,f.TH)());return(0,r.jsx)(M,{location:e,children:Z})}var V=n("7138");let G=!function(e){try{return document.createElement("link").relList.supports(e)}catch{return!1}}("prefetch")?function(e){return new Promise((t,n)=>{let r=new XMLHttpRequest;r.open("GET",e,!0),r.withCredentials=!0,r.onload=()=>{200===r.status?t():n()},r.send(null)})}:function(e){return new Promise((t,n)=>{if("undefined"==typeof document){n();return}let r=document.createElement("link");r.setAttribute("rel","prefetch"),r.setAttribute("href",e),r.onload=()=>t(),r.onerror=()=>n();let a=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;a?.appendChild(r)})};var K=n("7059");let Y=new Set,Q=new Set,X=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,J=e=>!X()&&!Q.has(e)&&!Y.has(e),ee=e=>!X()&&!Q.has(e),et=e=>Object.entries(V).filter(t=>{let[n]=t;return n.replace(/-[^-]+$/,"")===e}).flatMap(e=>{let[,t]=e;return Object.values((0,K.Z)(t))}),en=Object.freeze({prefetch:e=>!!J(e)&&(Y.add(e),Promise.all((0,p.f)(d.Z,e).flatMap(e=>et(e.route.path)).map(e=>{let t=n.gca(e);return t&&!t.includes("undefined")?G(t).catch(()=>{}):Promise.resolve()}))),preload:e=>!!ee(e)&&(Q.add(e),D(e))});if(e=n.hmd(e),c.Z.canUseDOM){window.docusaurus=en;let t=document.getElementById("__docusaurus"),n=(0,r.jsx)(i.B6,{children:(0,r.jsx)(function(e){let{children:t}=e;return"hash"===l.default.future.experimental_router?(0,r.jsx)(s.UT,{children:t}):(0,r.jsx)(s.VK,{children:t})},{children:(0,r.jsx)(function(){return(0,r.jsx)(U.Z,{children:(0,r.jsx)(I.M,{children:(0,r.jsxs)(A.t,{children:[(0,r.jsxs)(h,{children:[(0,r.jsx)($,{}),(0,r.jsx)(j,{}),(0,r.jsx)(B,{}),(0,r.jsx)(W,{})]}),(0,r.jsx)(q,{})]})})})},{})})}),c=(e,t)=>{console.error("Docusaurus React Root onRecoverableError:",e,t)},u=()=>{if(window.docusaurusRoot){window.docusaurusRoot.render(n);return}window.docusaurusRoot=o.hydrateRoot(t,n,{onRecoverableError:c})};D(window.location.pathname).then(()=>{(0,a.startTransition)(u)}),e.hot&&e.hot.accept()}},2502:function(e,t,n){"use strict";n.d(t,{_:()=>d,M:()=>f});var r=n("5893"),a=n("7294"),o=n("5150"),i=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/docs/","versions":[{"name":"current","label":"Next","isLast":true,"path":"/docs/","mainDocId":"overview","docs":[{"id":"about","path":"/docs/about","sidebar":"docsSidebar"},{"id":"advanced/custom-settings","path":"/docs/advanced/custom-settings","sidebar":"docsSidebar"},{"id":"advanced/index","path":"/docs/advanced/","sidebar":"docsSidebar"},{"id":"advanced/services","path":"/docs/advanced/services","sidebar":"docsSidebar"},{"id":"api/functions/createPlayground","path":"/docs/api/functions/createPlayground"},{"id":"api/functions/getPlaygroundUrl","path":"/docs/api/functions/getPlaygroundUrl"},{"id":"api/globals","path":"/docs/api/globals"},{"id":"api/index","path":"/docs/api/"},{"id":"api/interfaces/Code","path":"/docs/api/interfaces/Code"},{"id":"api/interfaces/Config","path":"/docs/api/interfaces/Config"},{"id":"api/interfaces/EmbedOptions","path":"/docs/api/interfaces/EmbedOptions"},{"id":"api/interfaces/Playground","path":"/docs/api/interfaces/Playground"},{"id":"api/internal/index","path":"/docs/api/internal/"},{"id":"api/internal/interfaces/API","path":"/docs/api/internal/interfaces/API"},{"id":"api/internal/interfaces/AppConfig","path":"/docs/api/internal/interfaces/AppConfig"},{"id":"api/internal/interfaces/ContentConfig","path":"/docs/api/internal/interfaces/ContentConfig"},{"id":"api/internal/interfaces/EditorConfig","path":"/docs/api/internal/interfaces/EditorConfig"},{"id":"api/internal/interfaces/EditorPosition","path":"/docs/api/internal/interfaces/EditorPosition"},{"id":"api/internal/interfaces/FormatterConfig","path":"/docs/api/internal/interfaces/FormatterConfig"},{"id":"api/internal/interfaces/TestResult","path":"/docs/api/internal/interfaces/TestResult"},{"id":"api/internal/interfaces/Types","path":"/docs/api/internal/interfaces/Types"},{"id":"api/internal/interfaces/UserConfig","path":"/docs/api/internal/interfaces/UserConfig"},{"id":"api/internal/type-aliases/APICommands","path":"/docs/api/internal/type-aliases/APICommands"},{"id":"api/internal/type-aliases/AppLanguage","path":"/docs/api/internal/type-aliases/AppLanguage"},{"id":"api/internal/type-aliases/CDN","path":"/docs/api/internal/type-aliases/CDN"},{"id":"api/internal/type-aliases/CodejarTheme","path":"/docs/api/internal/type-aliases/CodejarTheme"},{"id":"api/internal/type-aliases/CodemirrorTheme","path":"/docs/api/internal/type-aliases/CodemirrorTheme"},{"id":"api/internal/type-aliases/CssPresetId","path":"/docs/api/internal/type-aliases/CssPresetId"},{"id":"api/internal/type-aliases/EditorId","path":"/docs/api/internal/type-aliases/EditorId"},{"id":"api/internal/type-aliases/EditorTheme","path":"/docs/api/internal/type-aliases/EditorTheme"},{"id":"api/internal/type-aliases/MonacoTheme","path":"/docs/api/internal/type-aliases/MonacoTheme"},{"id":"api/internal/type-aliases/Processor","path":"/docs/api/internal/type-aliases/Processor"},{"id":"api/internal/type-aliases/TemplateName","path":"/docs/api/internal/type-aliases/TemplateName"},{"id":"api/internal/type-aliases/Theme","path":"/docs/api/internal/type-aliases/Theme"},{"id":"api/internal/type-aliases/ToolsPaneStatus","path":"/docs/api/internal/type-aliases/ToolsPaneStatus"},{"id":"api/internal/type-aliases/WatchCode","path":"/docs/api/internal/type-aliases/WatchCode"},{"id":"api/internal/type-aliases/WatchConsole","path":"/docs/api/internal/type-aliases/WatchConsole"},{"id":"api/internal/type-aliases/WatchDestroy","path":"/docs/api/internal/type-aliases/WatchDestroy"},{"id":"api/internal/type-aliases/WatchLoad","path":"/docs/api/internal/type-aliases/WatchLoad"},{"id":"api/internal/type-aliases/WatchReady","path":"/docs/api/internal/type-aliases/WatchReady"},{"id":"api/internal/type-aliases/WatchTests","path":"/docs/api/internal/type-aliases/WatchTests"},{"id":"api/type-aliases/Language","path":"/docs/api/type-aliases/Language"},{"id":"bookmarklet","path":"/docs/bookmarklet","sidebar":"docsSidebar"},{"id":"configuration/configuration-object","path":"/docs/configuration/configuration-object","sidebar":"docsSidebar"},{"id":"configuration/index","path":"/docs/configuration/","sidebar":"docsSidebar"},{"id":"configuration/query-params","path":"/docs/configuration/query-params","sidebar":"docsSidebar"},{"id":"contact","path":"/docs/contact","sidebar":"docsSidebar"},{"id":"contribution","path":"/docs/contribution","sidebar":"docsSidebar"},{"id":"contribution/adding-languages","path":"/docs/contribution/adding-languages"},{"id":"contribution/i18n","path":"/docs/contribution/i18n"},{"id":"contribution/release","path":"/docs/contribution/release"},{"id":"credits","path":"/docs/credits","sidebar":"docsSidebar"},{"id":"examples/display-modes/codeblock","path":"/docs/examples/display-modes/codeblock","sidebar":"examplesSidebar"},{"id":"examples/display-modes/editor","path":"/docs/examples/display-modes/editor","sidebar":"examplesSidebar"},{"id":"examples/display-modes/full","path":"/docs/examples/display-modes/full","sidebar":"examplesSidebar"},{"id":"examples/display-modes/index","path":"/docs/examples/display-modes/","sidebar":"examplesSidebar"},{"id":"examples/display-modes/result","path":"/docs/examples/display-modes/result","sidebar":"examplesSidebar"},{"id":"features/ai","path":"/docs/features/ai","sidebar":"docsSidebar"},{"id":"features/assets","path":"/docs/features/assets","sidebar":"docsSidebar"},{"id":"features/backup-restore","path":"/docs/features/backup-restore","sidebar":"docsSidebar"},{"id":"features/broadcast","path":"/docs/features/broadcast","sidebar":"docsSidebar"},{"id":"features/code-format","path":"/docs/features/code-format","sidebar":"docsSidebar"},{"id":"features/code-prefill","path":"/docs/features/code-prefill","sidebar":"docsSidebar"},{"id":"features/code-to-image","path":"/docs/features/code-to-image","sidebar":"docsSidebar"},{"id":"features/command-menu","path":"/docs/features/command-menu","sidebar":"docsSidebar"},{"id":"features/compiled-code","path":"/docs/features/compiled-code","sidebar":"docsSidebar"},{"id":"features/console","path":"/docs/features/console","sidebar":"docsSidebar"},{"id":"features/css","path":"/docs/features/css","sidebar":"docsSidebar"},{"id":"features/data-urls","path":"/docs/features/data-urls","sidebar":"docsSidebar"},{"id":"features/default-template-language","path":"/docs/features/default-template-language","sidebar":"docsSidebar"},{"id":"features/default-view","path":"/docs/features/default-view","sidebar":"docsSidebar"},{"id":"features/deploy","path":"/docs/features/deploy","sidebar":"docsSidebar"},{"id":"features/display-modes","path":"/docs/features/display-modes","sidebar":"docsSidebar"},{"id":"features/editor-settings","path":"/docs/features/editor-settings","sidebar":"docsSidebar"},{"id":"features/embeds","path":"/docs/features/embeds","sidebar":"docsSidebar"},{"id":"features/emmet","path":"/docs/features/emmet"},{"id":"features/export","path":"/docs/features/export","sidebar":"docsSidebar"},{"id":"features/external-resources","path":"/docs/features/external-resources","sidebar":"docsSidebar"},{"id":"features/github-integration","path":"/docs/features/github-integration","sidebar":"docsSidebar"},{"id":"features/i18n","path":"/docs/features/i18n","sidebar":"docsSidebar"},{"id":"features/import","path":"/docs/features/import","sidebar":"docsSidebar"},{"id":"features/index","path":"/docs/features/","sidebar":"docsSidebar"},{"id":"features/integrations","path":"/docs/features/integrations","sidebar":"docsSidebar"},{"id":"features/intellisense","path":"/docs/features/intellisense","sidebar":"docsSidebar"},{"id":"features/keyboard-shortcuts","path":"/docs/features/keyboard-shortcuts","sidebar":"docsSidebar"},{"id":"features/lite","path":"/docs/features/lite","sidebar":"docsSidebar"},{"id":"features/mobile","path":"/docs/features/mobile","sidebar":"docsSidebar"},{"id":"features/module-resolution","path":"/docs/features/module-resolution","sidebar":"docsSidebar"},{"id":"features/permanent-url","path":"/docs/features/permanent-url","sidebar":"docsSidebar"},{"id":"features/projects","path":"/docs/features/projects","sidebar":"docsSidebar"},{"id":"features/read-only","path":"/docs/features/read-only","sidebar":"docsSidebar"},{"id":"features/recover","path":"/docs/features/recover","sidebar":"docsSidebar"},{"id":"features/result","path":"/docs/features/result","sidebar":"docsSidebar"},{"id":"features/security","path":"/docs/features/security","sidebar":"docsSidebar"},{"id":"features/self-hosting","path":"/docs/features/self-hosting","sidebar":"docsSidebar"},{"id":"features/share","path":"/docs/features/share","sidebar":"docsSidebar"},{"id":"features/snippets","path":"/docs/features/snippets","sidebar":"docsSidebar"},{"id":"features/sync","path":"/docs/features/sync","sidebar":"docsSidebar"},{"id":"features/templates","path":"/docs/features/templates","sidebar":"docsSidebar"},{"id":"features/tests","path":"/docs/features/tests","sidebar":"docsSidebar"},{"id":"features/themes","path":"/docs/features/themes","sidebar":"docsSidebar"},{"id":"features/tools-pane","path":"/docs/features/tools-pane","sidebar":"docsSidebar"},{"id":"features/user-management","path":"/docs/features/user-management","sidebar":"docsSidebar"},{"id":"features/user-settings","path":"/docs/features/user-settings","sidebar":"docsSidebar"},{"id":"features/welcome","path":"/docs/features/welcome","sidebar":"docsSidebar"},{"id":"getting-started","path":"/docs/getting-started","sidebar":"docsSidebar"},{"id":"gh-action","path":"/docs/gh-action","sidebar":"docsSidebar"},{"id":"languages/art-template","path":"/docs/languages/art-template","sidebar":"docsSidebar"},{"id":"languages/asciidoc","path":"/docs/languages/asciidoc","sidebar":"docsSidebar"},{"id":"languages/assemblyscript","path":"/docs/languages/assemblyscript","sidebar":"docsSidebar"},{"id":"languages/astro","path":"/docs/languages/astro","sidebar":"docsSidebar"},{"id":"languages/autoprefixer","path":"/docs/languages/autoprefixer","sidebar":"docsSidebar"},{"id":"languages/babel","path":"/docs/languages/babel","sidebar":"docsSidebar"},{"id":"languages/bbcode","path":"/docs/languages/bbcode","sidebar":"docsSidebar"},{"id":"languages/blockly","path":"/docs/languages/blockly","sidebar":"docsSidebar"},{"id":"languages/civet","path":"/docs/languages/civet","sidebar":"docsSidebar"},{"id":"languages/clio","path":"/docs/languages/clio","sidebar":"docsSidebar"},{"id":"languages/clojurescript","path":"/docs/languages/clojurescript","sidebar":"docsSidebar"},{"id":"languages/coffeescript","path":"/docs/languages/coffeescript","sidebar":"docsSidebar"},{"id":"languages/commonlisp","path":"/docs/languages/commonlisp","sidebar":"docsSidebar"},{"id":"languages/cpp","path":"/docs/languages/cpp","sidebar":"docsSidebar"},{"id":"languages/cpp-wasm","path":"/docs/languages/cpp-wasm","sidebar":"docsSidebar"},{"id":"languages/csharp-wasm","path":"/docs/languages/csharp-wasm","sidebar":"docsSidebar"},{"id":"languages/css","path":"/docs/languages/css","sidebar":"docsSidebar"},{"id":"languages/cssmodules","path":"/docs/languages/cssmodules","sidebar":"docsSidebar"},{"id":"languages/cssnano","path":"/docs/languages/cssnano","sidebar":"docsSidebar"},{"id":"languages/diagrams","path":"/docs/languages/diagrams","sidebar":"docsSidebar"},{"id":"languages/dot","path":"/docs/languages/dot","sidebar":"docsSidebar"},{"id":"languages/ejs","path":"/docs/languages/ejs","sidebar":"docsSidebar"},{"id":"languages/eta","path":"/docs/languages/eta","sidebar":"docsSidebar"},{"id":"languages/fennel","path":"/docs/languages/fennel","sidebar":"docsSidebar"},{"id":"languages/flow","path":"/docs/languages/flow","sidebar":"docsSidebar"},{"id":"languages/gleam","path":"/docs/languages/gleam","sidebar":"docsSidebar"},{"id":"languages/go","path":"/docs/languages/go","sidebar":"docsSidebar"},{"id":"languages/haml","path":"/docs/languages/haml","sidebar":"docsSidebar"},{"id":"languages/handlebars","path":"/docs/languages/handlebars","sidebar":"docsSidebar"},{"id":"languages/html","path":"/docs/languages/html","sidebar":"docsSidebar"},{"id":"languages/imba","path":"/docs/languages/imba","sidebar":"docsSidebar"},{"id":"languages/index","path":"/docs/languages/","sidebar":"docsSidebar"},{"id":"languages/java","path":"/docs/languages/java","sidebar":"docsSidebar"},{"id":"languages/javascript","path":"/docs/languages/javascript","sidebar":"docsSidebar"},{"id":"languages/jinja","path":"/docs/languages/jinja","sidebar":"docsSidebar"},{"id":"languages/jsx","path":"/docs/languages/jsx","sidebar":"docsSidebar"},{"id":"languages/julia","path":"/docs/languages/julia","sidebar":"docsSidebar"},{"id":"languages/less","path":"/docs/languages/less","sidebar":"docsSidebar"},{"id":"languages/lightningcss","path":"/docs/languages/lightningcss","sidebar":"docsSidebar"},{"id":"languages/liquid","path":"/docs/languages/liquid","sidebar":"docsSidebar"},{"id":"languages/livescript","path":"/docs/languages/livescript","sidebar":"docsSidebar"},{"id":"languages/lua","path":"/docs/languages/lua","sidebar":"docsSidebar"},{"id":"languages/lua-wasm","path":"/docs/languages/lua-wasm","sidebar":"docsSidebar"},{"id":"languages/malina","path":"/docs/languages/malina","sidebar":"docsSidebar"},{"id":"languages/markdown","path":"/docs/languages/markdown","sidebar":"docsSidebar"},{"id":"languages/mdx","path":"/docs/languages/mdx","sidebar":"docsSidebar"},{"id":"languages/mjml","path":"/docs/languages/mjml","sidebar":"docsSidebar"},{"id":"languages/mustache","path":"/docs/languages/mustache","sidebar":"docsSidebar"},{"id":"languages/nunjucks","path":"/docs/languages/nunjucks","sidebar":"docsSidebar"},{"id":"languages/ocaml","path":"/docs/languages/ocaml","sidebar":"docsSidebar"},{"id":"languages/perl","path":"/docs/languages/perl","sidebar":"docsSidebar"},{"id":"languages/php","path":"/docs/languages/php","sidebar":"docsSidebar"},{"id":"languages/php-wasm","path":"/docs/languages/php-wasm","sidebar":"docsSidebar"},{"id":"languages/postcss","path":"/docs/languages/postcss","sidebar":"docsSidebar"},{"id":"languages/postcssImportUrl","path":"/docs/languages/postcssImportUrl","sidebar":"docsSidebar"},{"id":"languages/postcssPresetEnv","path":"/docs/languages/postcssPresetEnv","sidebar":"docsSidebar"},{"id":"languages/postgresql","path":"/docs/languages/postgresql","sidebar":"docsSidebar"},{"id":"languages/prolog","path":"/docs/languages/prolog","sidebar":"docsSidebar"},{"id":"languages/pug","path":"/docs/languages/pug","sidebar":"docsSidebar"},{"id":"languages/purgecss","path":"/docs/languages/purgecss","sidebar":"docsSidebar"},{"id":"languages/python","path":"/docs/languages/python","sidebar":"docsSidebar"},{"id":"languages/python-wasm","path":"/docs/languages/python-wasm","sidebar":"docsSidebar"},{"id":"languages/r","path":"/docs/languages/r","sidebar":"docsSidebar"},{"id":"languages/react","path":"/docs/languages/react","sidebar":"docsSidebar"},{"id":"languages/react-native","path":"/docs/languages/react-native","sidebar":"docsSidebar"},{"id":"languages/react-native-tsx","path":"/docs/languages/react-native-tsx","sidebar":"docsSidebar"},{"id":"languages/react-tsx","path":"/docs/languages/react-tsx","sidebar":"docsSidebar"},{"id":"languages/reason","path":"/docs/languages/reason","sidebar":"docsSidebar"},{"id":"languages/rescript","path":"/docs/languages/rescript","sidebar":"docsSidebar"},{"id":"languages/richtext","path":"/docs/languages/richtext","sidebar":"docsSidebar"},{"id":"languages/riot","path":"/docs/languages/riot","sidebar":"docsSidebar"},{"id":"languages/ruby","path":"/docs/languages/ruby","sidebar":"docsSidebar"},{"id":"languages/ruby-wasm","path":"/docs/languages/ruby-wasm","sidebar":"docsSidebar"},{"id":"languages/sass","path":"/docs/languages/sass","sidebar":"docsSidebar"},{"id":"languages/scheme","path":"/docs/languages/scheme","sidebar":"docsSidebar"},{"id":"languages/scss","path":"/docs/languages/scss","sidebar":"docsSidebar"},{"id":"languages/solid","path":"/docs/languages/solid","sidebar":"docsSidebar"},{"id":"languages/solid.tsx","path":"/docs/languages/solid.tsx","sidebar":"docsSidebar"},{"id":"languages/sql","path":"/docs/languages/sql","sidebar":"docsSidebar"},{"id":"languages/stencil","path":"/docs/languages/stencil","sidebar":"docsSidebar"},{"id":"languages/stylis","path":"/docs/languages/stylis","sidebar":"docsSidebar"},{"id":"languages/stylus","path":"/docs/languages/stylus","sidebar":"docsSidebar"},{"id":"languages/sucrase","path":"/docs/languages/sucrase","sidebar":"docsSidebar"},{"id":"languages/svelte","path":"/docs/languages/svelte","sidebar":"docsSidebar"},{"id":"languages/tailwindcss","path":"/docs/languages/tailwindcss","sidebar":"docsSidebar"},{"id":"languages/tcl","path":"/docs/languages/tcl","sidebar":"docsSidebar"},{"id":"languages/teal","path":"/docs/languages/teal","sidebar":"docsSidebar"},{"id":"languages/tokencss","path":"/docs/languages/tokencss","sidebar":"docsSidebar"},{"id":"languages/tsx","path":"/docs/languages/tsx","sidebar":"docsSidebar"},{"id":"languages/twig","path":"/docs/languages/twig","sidebar":"docsSidebar"},{"id":"languages/typescript","path":"/docs/languages/typescript","sidebar":"docsSidebar"},{"id":"languages/unocss","path":"/docs/languages/unocss","sidebar":"docsSidebar"},{"id":"languages/vento","path":"/docs/languages/vento","sidebar":"docsSidebar"},{"id":"languages/vue","path":"/docs/languages/vue","sidebar":"docsSidebar"},{"id":"languages/vue2","path":"/docs/languages/vue2","sidebar":"docsSidebar"},{"id":"languages/wat","path":"/docs/languages/wat","sidebar":"docsSidebar"},{"id":"languages/windicss","path":"/docs/languages/windicss","sidebar":"docsSidebar"},{"id":"license","path":"/docs/license","sidebar":"docsSidebar"},{"id":"markdown-to-livecodes","path":"/docs/markdown-to-livecodes","sidebar":"docsSidebar"},{"id":"overview","path":"/docs/overview","sidebar":"docsSidebar"},{"id":"sdk/headless","path":"/docs/sdk/headless","sidebar":"docsSidebar"},{"id":"sdk/index","path":"/docs/sdk/","sidebar":"docsSidebar"},{"id":"sdk/js-ts","path":"/docs/sdk/js-ts","sidebar":"docsSidebar"},{"id":"sdk/react","path":"/docs/sdk/react","sidebar":"docsSidebar"},{"id":"sdk/svelte","path":"/docs/sdk/svelte","sidebar":"docsSidebar"},{"id":"sdk/vue","path":"/docs/sdk/vue","sidebar":"docsSidebar"},{"id":"sponsor","path":"/docs/sponsor","sidebar":"docsSidebar"},{"id":"why","path":"/docs/why","sidebar":"docsSidebar"}],"draftIds":[],"sidebars":{"docsSidebar":{"link":{"path":"/docs/overview","label":"Docs"}},"examplesSidebar":{"link":{"path":"/docs/examples/display-modes/","label":"Display Modes"}}}}],"breadcrumbs":true}}}'),s=JSON.parse('{"defaultLocale":"en","locales":["en"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"}}}'),l=n("2627"),c=JSON.parse('{"docusaurusVersion":"3.7.0","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"3.7.0"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"3.7.0"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.7.0"},"docusaurus-plugin-svgr":{"type":"package","name":"@docusaurus/plugin-svgr","version":"3.7.0"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.7.0"},"docusaurus-theme-search-algolia":{"type":"package","name":"@docusaurus/theme-search-algolia","version":"3.7.0"},"docusaurus-plugin-typedoc":{"type":"package","name":"docusaurus-plugin-typedoc","version":"1.0.5"},"docusaurus-plugin-client-redirects":{"type":"package","name":"@docusaurus/plugin-client-redirects","version":"3.7.0"},"generate-llms-txt":{"type":"project"}}}');let u={siteConfig:o.default,siteMetadata:c,globalData:i,i18n:s,codeTranslations:l},d=a.createContext(u);function f(e){let{children:t}=e;return(0,r.jsx)(d.Provider,{value:u,children:t})}},5514:function(e,t,n){"use strict";n.d(t,{Z:()=>g});var r=n("5893"),a=n("7294"),o=n("3262"),i=n("1199"),s=n("3781"),l=n("3687"),c=n("5970");function u(e){let{error:t,tryAgain:n}=e;return(0,r.jsxs)("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"},children:[(0,r.jsx)("h1",{style:{fontSize:"3rem"},children:"This page crashed"}),(0,r.jsx)("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"},children:"Try again"}),(0,r.jsx)(d,{error:t})]})}function d(e){let{error:t}=e,n=(0,s.getErrorCausalChain)(t).map(e=>e.message).join("\n\nCause:\n");return(0,r.jsx)("p",{style:{whiteSpace:"pre-wrap"},children:n})}function f(e){let{children:t}=e;return(0,r.jsx)(c.z,{value:{plugin:{name:"docusaurus-core-error-boundary",id:"default"}},children:t})}function p(e){let{error:t,tryAgain:n}=e;return(0,r.jsx)(f,{children:(0,r.jsxs)(g,{fallback:()=>(0,r.jsx)(u,{error:t,tryAgain:n}),children:[(0,r.jsx)(i.Z,{children:(0,r.jsx)("title",{children:"Page Error"})}),(0,r.jsx)(l.Z,{children:(0,r.jsx)(u,{error:t,tryAgain:n})})]})})}let m=e=>(0,r.jsx)(p,{...e});class g extends a.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){o.Z.canUseDOM&&this.setState({error:e})}render(){let{children:e}=this.props,{error:t}=this.state;return t?(this.props.fallback??m)({error:t,tryAgain:()=>this.setState({error:null})}):e??null}}},3262:function(e,t,n){"use strict";n.d(t,{Z:function(){return a}});let r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,a={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},1199:function(e,t,n){"use strict";n.d(t,{Z:function(){return o}});var r=n(5893);n(7294);var a=n(405);function o(e){return(0,r.jsx)(a.ql,{...e})}},3367:function(e,t,n){"use strict";n.d(t,{Z:function(){return p}});var r=n(5893),a=n(7294),o=n(3727),i=n(3781),s=n(7262),l=n(9999),c=n(3262),u=n(4961),d=n(3187);let f=e=>e.startsWith("/"),p=a.forwardRef(function(e,t){let{isNavLink:n,to:p,href:m,activeClassName:g,isActive:h,"data-noBrokenLinkCheck":b,autoAddBaseUrl:y=!0,...v}=e,{siteConfig:S}=(0,s.Z)(),{trailingSlash:w,baseUrl:x}=S,k=S.future.experimental_router,{withBaseUrl:_}=(0,d.Cg)(),E=(0,u.Z)(),P=(0,a.useRef)(null);(0,a.useImperativeHandle)(t,()=>P.current);let O=p||m,C=(0,l.Z)(O),j=O?.replace("pathname://",""),T=void 0!==j?y&&f(j)?_(j):j:void 0;"hash"===k&&T?.startsWith("./")&&(T=T?.slice(1)),T&&C&&(T=(0,i.applyTrailingSlash)(T,{trailingSlash:w,baseUrl:x}));let A=(0,a.useRef)(!1),I=n?o.OL:o.rU,N=c.Z.canUseIntersectionObserver,L=(0,a.useRef)(),R=()=>{A.current||null==T||(window.docusaurus.preload(T),A.current=!0)};(0,a.useEffect)(()=>(!N&&C&&c.Z.canUseDOM&&null!=T&&window.docusaurus.prefetch(T),()=>{N&&L.current&&L.current.disconnect()}),[L,T,N,C]);let D=T?.startsWith("#")??!1,M=!v.target||"_self"===v.target,F=!T||!C||!M||D&&"hash"!==k;b||!D&&F||E.collectLink(T),v.id&&E.collectAnchor(v.id);let z={};return F?(0,r.jsx)("a",{ref:P,href:T,...O&&!C&&{target:"_blank",rel:"noopener noreferrer"},...v,...z}):(0,r.jsx)(I,{...v,onMouseEnter:R,onTouchStart:R,innerRef:e=>{P.current=e,N&&e&&C&&(L.current=new window.IntersectionObserver(t=>{t.forEach(t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(L.current.unobserve(e),L.current.disconnect(),null!=T&&window.docusaurus.prefetch(T))})}),L.current.observe(e))},to:T,...n&&{isActive:h,activeClassName:g},...z})})},7670:function(e,t,n){"use strict";n.d(t,{I:()=>l,Z:()=>c});var r=n("5893"),a=n("7294");function o(e,t){let n=e.split(/(\{\w+\})/).map((e,n)=>{if(n%2==1){let n=t?.[e.slice(1,-1)];if(void 0!==n)return n}return e});return n.some(e=>(0,a.isValidElement)(e))?n.map((e,t)=>(0,a.isValidElement)(e)?a.cloneElement(e,{key:t}):e).filter(e=>""!==e):n.join("")}var i=n("2627");function s(e){let{id:t,message:n}=e;if(void 0===t&&void 0===n)throw Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return i[t??n]??n??t}function l(e,t){let{message:n,id:r}=e;return o(s({message:n,id:r}),t)}function c(e){let{children:t,id:n,values:a}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),Error("The Docusaurus component only accept simple string values");let i=s({message:t,id:n});return(0,r.jsx)(r.Fragment,{children:o(i,a)})}},7931:function(e,t,n){"use strict";n.d(t,{m:function(){return r}});let r="default"},9999:function(e,t,n){"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function a(e){return void 0!==e&&!r(e)}n.d(t,{Z:function(){return a},b:function(){return r}})},3187:function(e,t,n){"use strict";n.d(t,{Cg:function(){return i},ZP:function(){return s}});var r=n(7294),a=n(7262),o=n(9999);function i(){let{siteConfig:e}=(0,a.Z)(),{baseUrl:t,url:n}=e,i=e.future.experimental_router;return{withBaseUrl:(0,r.useCallback)((e,r)=>(function(e){let{siteUrl:t,baseUrl:n,url:r,options:{forcePrependBaseUrl:a=!1,absolute:i=!1}={},router:s}=e;if(!r||r.startsWith("#")||(0,o.b)(r))return r;if("hash"===s)return r.startsWith("/")?`.${r}`:`./${r}`;if(a)return n+r.replace(/^\//,"");if(r===n.replace(/\/$/,""))return n;let l=r.startsWith(n)?r:n+r.replace(/^\//,"");return i?t+l:l})({siteUrl:n,baseUrl:t,url:e,options:r,router:i}),[n,t,i])}}function s(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},{withBaseUrl:n}=i();return n(e,t)}},4961:function(e,t,n){"use strict";n.d(t,{Z:()=>i}),n("5893");var r=n("7294");let a=r.createContext({collectAnchor:()=>{},collectLink:()=>{}}),o=()=>(0,r.useContext)(a);function i(){return o()}},7262:function(e,t,n){"use strict";n.d(t,{Z:function(){return o}});var r=n(7294),a=n(2502);function o(){return(0,r.useContext)(a._)}},6735:function(e,t,n){"use strict";n.d(t,{Z:function(){return o}});var r=n(7294),a=n(8184);function o(){return(0,r.useContext)(a._)}},8714:function(e,t,n){"use strict";n.d(t,{Z:function(){return a}});var r=n(7294);let a=n(3262).Z.canUseDOM?r.useLayoutEffect:r.useEffect},7059:function(e,t,n){"use strict";n.d(t,{Z:function(){return a}});let r=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function a(e){let t={};return!function e(n,a){Object.entries(n).forEach(n=>{let[o,i]=n,s=a?`${a}.${o}`:o;r(i)?e(i,s):t[s]=i})}(e),t}},5970:function(e,t,n){"use strict";n.d(t,{_:function(){return o},z:function(){return i}});var r=n(5893),a=n(7294);let o=a.createContext(null);function i(e){let{children:t,value:n}=e,i=a.useContext(o),s=(0,a.useMemo)(()=>(function(e){let{parent:t,value:n}=e;if(!t){if(n){if(!("plugin"in n))throw Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute")}else throw Error("Unexpected: no Docusaurus route context found");return n}let r={...t.data,...n?.data};return{plugin:t.plugin,data:r}})({parent:i,value:n}),[i,n]);return(0,r.jsx)(o.Provider,{value:s,children:t})}},7137:function(e,t,n){"use strict";n.d(t,{J:function(){return v},L5:function(){return b},Oh:function(){return S}});var r=n(5893),a=n(7294),o=n(8854),i=n(7931),s=n(6009),l=n(4510),c=n(1934);let u=e=>`docs-preferred-version-${e}`,d=(e,t,n)=>{(0,l.WA)(u(e),{persistence:t}).set(n)},f=(e,t)=>(0,l.WA)(u(e),{persistence:t}).get(),p=(e,t)=>{(0,l.WA)(u(e),{persistence:t}).del()},m=e=>Object.fromEntries(e.map(e=>[e,{preferredVersionName:null}])),g=a.createContext(null);function h(e){let{children:t}=e,n=function(){let e=(0,o._r)(),t=(0,s.L)().docs.versionPersistence,n=(0,a.useMemo)(()=>Object.keys(e),[e]),[r,i]=(0,a.useState)(()=>m(n));return(0,a.useEffect)(()=>{i(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:r}=e;return Object.fromEntries(t.map(e=>[e,function(e){let t=f(e,n);return r[e].versions.some(e=>e.name===t)?{preferredVersionName:t}:(p(e,n),{preferredVersionName:null})}(e)]))}({allDocsData:e,versionPersistence:t,pluginIds:n}))},[e,t,n]),[r,(0,a.useMemo)(()=>({savePreferredVersion:function(e,n){d(e,t,n),i(t=>({...t,[e]:{preferredVersionName:n}}))}}),[t])]}();return(0,r.jsx)(g.Provider,{value:n,children:t})}function b(e){let{children:t}=e;return(0,r.jsx)(h,{children:t})}function y(){let e=(0,a.useContext)(g);if(!e)throw new c.i6("DocsPreferredVersionContextProvider");return e}function v(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:i.m,t=(0,o.zh)(e),[n,r]=y(),{preferredVersionName:s}=n[e];return{preferredVersion:t.versions.find(e=>e.name===s)??null,savePreferredVersionName:(0,a.useCallback)(t=>{r.savePreferredVersion(e,t)},[r,e])}}function S(){let e=(0,o._r)(),[t]=y();return Object.fromEntries(Object.keys(e).map(n=>[n,function(n){let r=e[n],{preferredVersionName:a}=t[n];return r.versions.find(e=>e.name===a)??null}(n)]))}},9434:function(e,t,n){"use strict";n.d(t,{J:function(){return o},z:function(){return i}});var r=n(8854),a=n(7137);function o(e,t){return`docs-${e}-${t}`}function i(){let e=(0,r._r)(),t=(0,r.WS)(),n=(0,a.Oh)();return[...Object.keys(e).map(function(r){let a=t?.activePlugin.pluginId===r?t.activeVersion:void 0,i=n[r],s=e[r].versions.find(e=>e.isLast);return o(r,(a??i??s).name)})]}},4684:function(e,t,n){"use strict";n.d(t,{V:function(){return c},b:function(){return l}});var r=n(5893),a=n(7294),o=n(1934);let i=Symbol("EmptyContext"),s=a.createContext(i);function l(e){let{children:t,name:n,items:o}=e,i=(0,a.useMemo)(()=>n&&o?{name:n,items:o}:null,[n,o]);return(0,r.jsx)(s.Provider,{value:i,children:t})}function c(){let e=(0,a.useContext)(s);if(e===i)throw new o.i6("DocsSidebarProvider");return e}},6563:function(e,t,n){"use strict";n.d(t,{LM:function(){return p},MN:function(){return E},SN:function(){return _},_F:function(){return b},f:function(){return y},jA:function(){return m},lO:function(){return w},oz:function(){return x},s1:function(){return S},vY:function(){return k},xz:function(){return f}});var r=n(7294),a=n(6550),o=n(8790),i=n(8854),s=n(3868),l=n(9413),c=n(7137),u=n(9873),d=n(4684);function f(e){let t=(0,u.E)();if(!e)return;let n=t.docs[e];if(!n)throw Error(`no version doc found by id=${e}`);return n}function p(e){return"link"!==e.type||e.unlisted?"category"===e.type?function(e){if(e.href&&!e.linkUnlisted)return e.href;for(let t of e.items){let e=p(t);if(e)return e}}(e):void 0:e.href}function m(){let{pathname:e}=(0,a.TH)(),t=(0,d.V)();if(!t)throw Error("Unexpected: cant find current sidebar in context");let n=v({sidebarItems:t.items,pathname:e,onlyCategories:!0}).slice(-1)[0];if(!n)throw Error(`${e} is not associated with a category. useCurrentSidebarCategory() should only be used on category index pages.`);return n}let g=(e,t)=>void 0!==e&&(0,s.Mg)(e,t),h=(e,t)=>e.some(e=>b(e,t));function b(e,t){return"link"===e.type?g(e.href,t):"category"===e.type&&(g(e.href,t)||h(e.items,t))}function y(e,t){return(0,r.useMemo)(()=>e.filter(e=>(function e(t,n){switch(t.type){case"category":return b(t,n)||void 0!==t.href&&!t.linkUnlisted||t.items.some(t=>e(t,n));case"link":return!t.unlisted||b(t,n);default:return!0}})(e,t)),[e,t])}function v(e){let{sidebarItems:t,pathname:n,onlyCategories:r=!1}=e,a=[];return!function e(t){for(let o of t)if("category"===o.type&&((0,s.Mg)(o.href,n)||e(o.items))||"link"===o.type&&(0,s.Mg)(o.href,n))return r&&"category"!==o.type||a.unshift(o),!0;return!1}(t),a}function S(){let e=(0,d.V)(),{pathname:t}=(0,a.TH)();return!1!==i.gA()?.pluginData.breadcrumbs&&e?v({sidebarItems:e.items,pathname:t}):null}function w(e){let{activeVersion:t}=(0,i.Iw)(e),{preferredVersion:n}=(0,c.J)(e),a=(0,i.yW)(e);return(0,r.useMemo)(()=>(0,l.jj)([t,n,a].filter(Boolean)),[t,n,a])}function x(e,t){let n=w(t);return(0,r.useMemo)(()=>{let t=n.flatMap(e=>e.sidebars?Object.entries(e.sidebars):[]),r=t.find(t=>t[0]===e);if(!r)throw Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map(e=>e.name).join(", ")}". +Available sidebar ids are: +- ${t.map(e=>e[0]).join("\n- ")}`);return r[1]},[e,n])}function k(e,t){let n=w(t);return(0,r.useMemo)(()=>{let t=n.flatMap(e=>e.docs),r=t.find(t=>t.id===e);if(!r){if(n.flatMap(e=>e.draftIds).includes(e))return null;throw Error(`Couldn't find any doc with id "${e}" in version${n.length>1?"s":""} "${n.map(e=>e.name).join(", ")}". +Available doc ids are: +- ${(0,l.jj)(t.map(e=>e.id)).join("\n- ")}`)}return r},[e,n])}function _(e){let{route:t}=e,n=(0,a.TH)(),r=(0,u.E)(),i=t.routes,s=i.find(e=>(0,a.LX)(n.pathname,e));if(!s)return null;let l=s.sidebar,c=l?r.docsSidebars[l]:void 0;return{docElement:(0,o.H)(i),sidebarName:l,sidebarItems:c}}function E(e){return e.filter(e=>"category"!==e.type&&"link"!==e.type||!!p(e))}},9873:function(e,t,n){"use strict";n.d(t,{E:function(){return l},q:function(){return s}});var r=n(5893),a=n(7294),o=n(1934);let i=a.createContext(null);function s(e){let{children:t,version:n}=e;return(0,r.jsx)(i.Provider,{value:n,children:t})}function l(){let e=(0,a.useContext)(i);if(null===e)throw new o.i6("DocsVersionProvider");return e}},8854:function(e,t,n){"use strict";n.d(t,{gB:()=>y,Iw:()=>S,zh:()=>g,z1:()=>f.z,_r:()=>m,MN:()=>u.MN,WS:()=>b,jA:()=>u.jA,Jo:()=>w,yW:()=>v,gA:()=>h,J:()=>d.J});var r=n("6550"),a=n("7262"),o=n("7931");function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=function(){let{globalData:e}=(0,a.Z)();return e}()[e];if(!n&&t.failfast)throw Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}let s=e=>e.versions.find(e=>e.isLast);function l(e,t){return[...e.versions].sort((e,t)=>e.path===t.path?0:e.path.includes(t.path)?-1:t.path.includes(e.path)?1:0).find(e=>!!(0,r.LX)(t,{path:e.path,exact:!1,strict:!1}))}function c(e,t){let n=l(e,t),a=n?.docs.find(e=>!!r.LX(t,{path:e.path,exact:!0,strict:!1})),o=a?function(t){let n={};return e.versions.forEach(e=>{e.docs.forEach(r=>{r.id===t&&(n[e.name]=r)})}),n}(a.id):{};return{activeVersion:n,activeDoc:a,alternateDocVersions:o}}var u=n("6563"),d=n("7137"),f=n("9434");let p={},m=()=>i("docusaurus-plugin-content-docs")??p,g=e=>{try{return function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:o.m,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=i(e),a=r?.[t];if(!a&&n.failfast)throw Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return a}("docusaurus-plugin-content-docs",e,{failfast:!0})}catch(t){throw Error(`You are using a feature of the Docusaurus docs plugin, but this plugin does not seem to be enabled${"Default"===e?"":` (pluginId=${e}`}`,{cause:t})}};function h(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=m(),{pathname:n}=(0,r.TH)();return function(e,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},a=Object.entries(e).sort((e,t)=>t[1].path.localeCompare(e[1].path)).find(e=>{let[,n]=e;return!!(0,r.LX)(t,{path:n.path,exact:!1,strict:!1})}),o=a?{pluginId:a[0],pluginData:a[1]}:void 0;if(!o&&n.failfast)throw Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map(e=>e.path).join(", ")}`);return o}(t,n,e)}function b(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=h(e),{pathname:n}=(0,r.TH)();if(!t)return;let a=l(t.pluginData,n);return{activePlugin:t,activeVersion:a}}function y(e){return g(e).versions}function v(e){return s(g(e))}function S(e){let t=g(e),{pathname:n}=(0,r.TH)();return c(t,n)}function w(e){let t=g(e),{pathname:n}=(0,r.TH)();return function(e,t){let n=s(e);return{latestDocSuggestion:c(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},6928:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return o}});var r=n(4865),a=n.n(r);a().configure({showSpinner:!1});let o={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){let e=window.setTimeout(()=>{a().start()},200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){a().done()}}},3902:function(e,t,n){"use strict";var r=n("3229"),a=n("5150");!function(e){let{themeConfig:{prism:t}}=a.default,{additionalLanguages:r}=t,o=globalThis.Prism;globalThis.Prism=e,r.forEach(e=>{"php"===e&&n(6854),n(617)(`./prism-${e}`)}),delete globalThis.Prism,void 0!==o&&(globalThis.Prism=e)}(r.p1)},9011:function(e,t,n){"use strict";n.d(t,{Z:()=>a});var r=n("5893");n("7294");function a(e){let{width:t=13.5,height:n=13.5}=e;return(0,r.jsx)("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:"iconExternalLink_nPIU",children:(0,r.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})}},3687:function(e,t,n){"use strict";n.d(t,{Z:()=>tn});var r=n("5893"),a=n("7294"),o=n("7026"),i=n("5514"),s=n("5231"),l=n("6550"),c=n("7670"),u=n("7339");let d="__docusaurus_skipToContent_fallback";function f(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}let p=(0,c.I)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function m(e){let t=e.children??p,{containerRef:n,onClick:o}=function(){let e=(0,a.useRef)(null),{action:t}=(0,l.k6)(),n=(0,a.useCallback)(e=>{e.preventDefault();let t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&f(t)},[]);return(0,u.S)(n=>{let{location:r}=n;e.current&&!r.hash&&"PUSH"===t&&f(e.current)}),{containerRef:e,onClick:n}}();return(0,r.jsx)("div",{ref:n,role:"region","aria-label":p,children:(0,r.jsx)("a",{...e,href:`#${d}`,onClick:o,children:t})})}var g=n("6171"),h=n("4169");function b(){return(0,r.jsx)(m,{className:"skipToContent_fXgn"})}var y=n("6009"),v=n("1333");function S(e){let{width:t=21,height:n=21,color:a="currentColor",strokeWidth:o=1.2,className:i,...s}=e;return(0,r.jsx)("svg",{viewBox:"0 0 15 15",width:t,height:n,...s,children:(0,r.jsx)("g",{stroke:a,strokeWidth:o,children:(0,r.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}function w(e){return(0,r.jsx)("button",{type:"button","aria-label":(0,c.I)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,o.Z)("clean-btn close","closeButton_CVFx",e.className),children:(0,r.jsx)(S,{width:14,height:14,strokeWidth:3.1})})}function x(e){let{announcementBar:t}=(0,y.L)(),{content:n}=t;return(0,r.jsx)("div",{...e,className:(0,o.Z)("content_knG7",e.className),dangerouslySetInnerHTML:{__html:n}})}let k={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function _(){let{announcementBar:e}=(0,y.L)(),{isActive:t,close:n}=(0,v.n)();if(!t)return null;let{backgroundColor:a,textColor:o,isCloseable:i}=e;return(0,r.jsxs)("div",{className:k.announcementBar,style:{backgroundColor:a,color:o},role:"banner",children:[i&&(0,r.jsx)("div",{className:k.announcementBarPlaceholder}),(0,r.jsx)(x,{className:k.announcementBarContent}),i&&(0,r.jsx)(w,{onClick:n,className:k.announcementBarClose})]})}var E=n("5870"),P=n("4718"),O=n("1934"),C=n("9018");let j=a.createContext(null);function T(e){let{children:t}=e,n=function(){let e=(0,E.e)(),t=(0,C.HY)(),[n,r]=(0,a.useState)(!1),o=null!==t.component,i=(0,O.D9)(o);return(0,a.useEffect)(()=>{o&&!i&&r(!0)},[o,i]),(0,a.useEffect)(()=>{if(!o){r(!1);return}e.shown||r(!0)},[e.shown,o]),(0,a.useMemo)(()=>[n,r],[n])}();return(0,r.jsx)(j.Provider,{value:n,children:t})}function A(){let e=(0,a.useContext)(j);if(!e)throw new O.i6("NavbarSecondaryMenuDisplayProvider");let[t,n]=e,o=(0,a.useCallback)(()=>n(!1),[n]),i=(0,C.HY)();return(0,a.useMemo)(()=>({shown:t,hide:o,content:function(e){if(e.component){let t=e.component;return(0,r.jsx)(t,{...e.props})}}(i)}),[o,i,t])}function I(e){let{header:t,primaryMenu:n,secondaryMenu:a}=e,{shown:i}=A();return(0,r.jsxs)("div",{className:"navbar-sidebar",children:[t,(0,r.jsxs)("div",{className:(0,o.Z)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":i}),children:[(0,r.jsx)("div",{className:"navbar-sidebar__item menu",children:n}),(0,r.jsx)("div",{className:"navbar-sidebar__item menu",children:a})]})]})}var N=n("4200"),L=n("6735");function R(e){return(0,r.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,r.jsx)("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"})})}function D(e){return(0,r.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,r.jsx)("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"})})}let M={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"},F=a.memo(function(e){let{className:t,buttonClassName:n,value:a,onChange:i}=e,s=(0,L.Z)(),l=(0,c.I)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===a?(0,c.I)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,c.I)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,r.jsx)("div",{className:(0,o.Z)(M.toggle,t),children:(0,r.jsxs)("button",{className:(0,o.Z)("clean-btn",M.toggleButton,!s&&M.toggleButtonDisabled,n),type:"button",onClick:()=>i("dark"===a?"light":"dark"),disabled:!s,title:l,"aria-label":l,"aria-live":"polite","aria-pressed":"dark"===a?"true":"false",children:[(0,r.jsx)(R,{className:(0,o.Z)(M.toggleIcon,M.lightToggleIcon)}),(0,r.jsx)(D,{className:(0,o.Z)(M.toggleIcon,M.darkToggleIcon)})]})})}),z={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_X3D1"};function B(e){let{className:t}=e,n=(0,y.L)().navbar.style,a=(0,y.L)().colorMode.disableSwitch,{colorMode:o,setColorMode:i}=(0,N.I)();return a?null:(0,r.jsx)(F,{className:t,buttonClassName:"dark"===n?z.darkNavbarColorModeToggle:void 0,value:o,onChange:i})}var $=n("1660");function U(){return(0,r.jsx)($.Z,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function H(){let e=(0,E.e)();return(0,r.jsx)("button",{type:"button","aria-label":(0,c.I)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle(),children:(0,r.jsx)(S,{color:"var(--ifm-color-emphasis-600)"})})}function q(){return(0,r.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,r.jsx)(U,{}),(0,r.jsx)(B,{className:"margin-right--md"}),(0,r.jsx)(H,{})]})}var Z=n("3367"),W=n("3187"),V=n("9999"),G=n("1626"),K=n("9011");function Y(e){let{activeBasePath:t,activeBaseRegex:n,to:a,href:o,label:i,html:s,isDropdownLink:l,prependBaseUrlToHref:c,...u}=e,d=(0,W.ZP)(a),f=(0,W.ZP)(t),p=(0,W.ZP)(o,{forcePrependBaseUrl:!0}),m=i&&o&&!(0,V.Z)(o),g=s?{dangerouslySetInnerHTML:{__html:s}}:{children:(0,r.jsxs)(r.Fragment,{children:[i,m&&(0,r.jsx)(K.Z,{...l&&{width:12,height:12}})]})};return o?(0,r.jsx)(Z.Z,{href:c?p:o,...u,...g}):(0,r.jsx)(Z.Z,{to:d,isNavLink:!0,...(t||n)&&{isActive:(e,t)=>n?(0,G.F)(n,t.pathname):t.pathname.startsWith(f)},...u,...g})}function Q(e){let{className:t,isDropdownItem:n=!1,...a}=e,i=(0,r.jsx)(Y,{className:(0,o.Z)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n,...a});return n?(0,r.jsx)("li",{children:i}):i}function X(e){let{className:t,isDropdownItem:n,...a}=e;return(0,r.jsx)("li",{className:"menu__list-item",children:(0,r.jsx)(Y,{className:(0,o.Z)("menu__link",t),...a})})}function J(e){let{mobile:t=!1,position:n,...a}=e;return(0,r.jsx)(t?X:Q,{...a,activeClassName:a.activeClassName??(t?"menu__link--active":"navbar__link--active")})}var ee=n("6850"),et=n("3868"),en=n("7262");function er(e){let{items:t,position:n,className:i,onClick:s,...l}=e,c=(0,a.useRef)(null),[u,d]=(0,a.useState)(!1);return(0,a.useEffect)(()=>{let e=e=>{!(!c.current||c.current.contains(e.target))&&d(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}},[c]),(0,r.jsxs)("div",{ref:c,className:(0,o.Z)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===n,"dropdown--show":u}),children:[(0,r.jsx)(Y,{"aria-haspopup":"true","aria-expanded":u,role:"button",href:l.to?void 0:"#",className:(0,o.Z)("navbar__link",i),...l,onClick:l.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!u))},children:l.children??l.label}),(0,r.jsx)("ul",{className:"dropdown__menu",children:t.map((e,t)=>(0,a.createElement)(ej,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:t}))})]})}function ea(e){let{items:t,className:n,position:i,onClick:s,...c}=e,u=function(){let{siteConfig:{baseUrl:e}}=(0,en.Z)(),{pathname:t}=(0,l.TH)();return t.replace(e,"/")}(),d=t.some(e=>!!((0,et.Mg)(e.to,u)||(0,G.F)(e.activeBaseRegex,u)||e.activeBasePath&&u.startsWith(e.activeBasePath))),{collapsed:f,toggleCollapsed:p,setCollapsed:m}=(0,ee.u)({initialState:()=>!d});return(0,a.useEffect)(()=>{d&&m(!d)},[u,d,m]),(0,r.jsxs)("li",{className:(0,o.Z)("menu__list-item",{"menu__list-item--collapsed":f}),children:[(0,r.jsx)(Y,{role:"button",className:(0,o.Z)("dropdownNavbarItemMobile_S0Fm","menu__link menu__link--sublist menu__link--sublist-caret",n),...c,onClick:e=>{e.preventDefault(),p()},children:c.children??c.label}),(0,r.jsx)(ee.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:f,children:t.map((e,t)=>(0,a.createElement)(ej,{mobile:!0,isDropdownItem:!0,onClick:s,activeClassName:"menu__link--active",...e,key:t}))})]})}function eo(e){let{mobile:t=!1,...n}=e;return(0,r.jsx)(t?ea:er,{...n})}var ei=n("8229");function es(e){let{width:t=20,height:n=20,...a}=e;return(0,r.jsx)("svg",{viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0,...a,children:(0,r.jsx)("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"})})}var el=n("3935"),ec=n("4443"),eu=n("1199"),ed=n("2814"),ef=n("7598"),ep=n("86"),em=n("9434");let eg={button:{buttonText:(0,c.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),buttonAriaLabel:(0,c.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"})},modal:{searchBox:{resetButtonTitle:(0,c.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),resetButtonAriaLabel:(0,c.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),cancelButtonText:(0,c.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"}),cancelButtonAriaLabel:(0,c.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"})},startScreen:{recentSearchesTitle:(0,c.I)({id:"theme.SearchModal.startScreen.recentSearchesTitle",message:"Recent",description:"The title for recent searches"}),noRecentSearchesText:(0,c.I)({id:"theme.SearchModal.startScreen.noRecentSearchesText",message:"No recent searches",description:"The text when no recent searches"}),saveRecentSearchButtonTitle:(0,c.I)({id:"theme.SearchModal.startScreen.saveRecentSearchButtonTitle",message:"Save this search",description:"The label for save recent search button"}),removeRecentSearchButtonTitle:(0,c.I)({id:"theme.SearchModal.startScreen.removeRecentSearchButtonTitle",message:"Remove this search from history",description:"The label for remove recent search button"}),favoriteSearchesTitle:(0,c.I)({id:"theme.SearchModal.startScreen.favoriteSearchesTitle",message:"Favorite",description:"The title for favorite searches"}),removeFavoriteSearchButtonTitle:(0,c.I)({id:"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle",message:"Remove this search from favorites",description:"The label for remove favorite search button"})},errorScreen:{titleText:(0,c.I)({id:"theme.SearchModal.errorScreen.titleText",message:"Unable to fetch results",description:"The title for error screen of search modal"}),helpText:(0,c.I)({id:"theme.SearchModal.errorScreen.helpText",message:"You might want to check your network connection.",description:"The help text for error screen of search modal"})},footer:{selectText:(0,c.I)({id:"theme.SearchModal.footer.selectText",message:"to select",description:"The explanatory text of the action for the enter key"}),selectKeyAriaLabel:(0,c.I)({id:"theme.SearchModal.footer.selectKeyAriaLabel",message:"Enter key",description:"The ARIA label for the Enter key button that makes the selection"}),navigateText:(0,c.I)({id:"theme.SearchModal.footer.navigateText",message:"to navigate",description:"The explanatory text of the action for the Arrow up and Arrow down key"}),navigateUpKeyAriaLabel:(0,c.I)({id:"theme.SearchModal.footer.navigateUpKeyAriaLabel",message:"Arrow up",description:"The ARIA label for the Arrow up key button that makes the navigation"}),navigateDownKeyAriaLabel:(0,c.I)({id:"theme.SearchModal.footer.navigateDownKeyAriaLabel",message:"Arrow down",description:"The ARIA label for the Arrow down key button that makes the navigation"}),closeText:(0,c.I)({id:"theme.SearchModal.footer.closeText",message:"to close",description:"The explanatory text of the action for Escape key"}),closeKeyAriaLabel:(0,c.I)({id:"theme.SearchModal.footer.closeKeyAriaLabel",message:"Escape key",description:"The ARIA label for the Escape key button that close the modal"}),searchByText:(0,c.I)({id:"theme.SearchModal.footer.searchByText",message:"Search by",description:"The text explain that the search is making by Algolia"})},noResultsScreen:{noResultsText:(0,c.I)({id:"theme.SearchModal.noResultsScreen.noResultsText",message:"No results for",description:"The text explains that there are no results for the following search"}),suggestedQueryText:(0,c.I)({id:"theme.SearchModal.noResultsScreen.suggestedQueryText",message:"Try searching for",description:"The text for the suggested query when no results are found for the following search"}),reportMissingResultsText:(0,c.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsText",message:"Believe this query should return results?",description:"The text for the question where the user thinks there are missing results"}),reportMissingResultsLinkText:(0,c.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText",message:"Let us know.",description:"The text for the link to report missing results"})}},placeholder:(0,c.I)({id:"theme.SearchModal.placeholder",message:"Search docs",description:"The placeholder of the input of the DocSearch pop-up modal"})},eh=null;function eb(){return eh?Promise.resolve():Promise.all([n.e("1381").then(n.bind(n,4483)),Promise.all([n.e("6212"),n.e("2154")]).then(n.bind(n,6945)),Promise.all([n.e("6212"),n.e("1698")]).then(n.bind(n,9177))]).then(e=>{let[{DocSearchModal:t}]=e;eh=t})}function ey(e){let{hit:t,children:n}=e;return(0,r.jsx)(Z.Z,{to:t.url,children:n})}function ev(e){let{state:t,onClose:n}=e,a=(0,ed.M)();return(0,r.jsx)(Z.Z,{to:a(t.query),onClick:n,children:(0,r.jsx)(c.Z,{id:"theme.SearchBar.seeAll",values:{count:t.context.nbHits},children:"See all {count} results"})})}function eS(e){let{externalUrlRegex:t,...n}=e,o=function(e){let{externalUrlRegex:t}=e,n=(0,l.k6)(),[r]=(0,a.useState)(()=>({navigate(e){(0,G.F)(t,e.itemUrl)?window.location.href=e.itemUrl:n.push(e.itemUrl)}}));return r}({externalUrlRegex:t}),i=function(e){let{contextualSearch:t,...n}=e,r=function(){let e=(0,en.Z)().i18n.currentLocale;return[`language:${e}`,(function(){let e=(0,em.z)();return[ep.H,...e]})().map(e=>`docusaurus_tag:${e}`)]}(),a=n.searchParameters?.facetFilters??[],o=t?function(e,t){let n=e=>"string"==typeof e?[e]:e;return[...n(e),...n(t)]}(r,a):a;return{...n.searchParameters,facetFilters:o}}({...n}),s=function(e){let t=(0,ef.l)(),[n]=(0,a.useState)(()=>n=>e.transformItems?e.transformItems(n):n.map(e=>({...e,url:t(e.url)})));return n}(n),c=function(){let{siteMetadata:{docusaurusVersion:e}}=(0,en.Z)();return(0,a.useCallback)(t=>(t.addAlgoliaAgent("docusaurus",e),t),[e])}(),u=(0,a.useRef)(null),d=(0,a.useRef)(null),[f,p]=(0,a.useState)(!1),[m,g]=(0,a.useState)(void 0),h=(0,a.useCallback)(()=>{if(!u.current){let e=document.createElement("div");u.current=e,document.body.insertBefore(e,document.body.firstChild)}},[]),b=(0,a.useCallback)(()=>{h(),eb().then(()=>p(!0))},[h]),y=(0,a.useCallback)(()=>{p(!1),d.current?.focus(),g(void 0)},[]),v=(0,a.useCallback)(e=>{("f"!==e.key||!e.metaKey&&!e.ctrlKey)&&(e.preventDefault(),g(e.key),b())},[b]),S=function(e){let{closeModal:t}=e;return(0,a.useMemo)(()=>e=>{let{state:n}=e;return(0,r.jsx)(ev,{state:n,onClose:t})},[t])}({closeModal:y});return(0,ec.D4)({isOpen:f,onOpen:b,onClose:y,onInput:v,searchButtonRef:d}),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(eu.Z,{children:(0,r.jsx)("link",{rel:"preconnect",href:`https://${n.appId}-dsn.algolia.net`,crossOrigin:"anonymous"})}),(0,r.jsx)(ec.as,{onTouchStart:eb,onFocus:eb,onMouseOver:eb,onClick:b,ref:d,translations:n.translations?.button??eg.button}),f&&eh&&u.current&&(0,el.createPortal)((0,r.jsx)(eh,{onClose:y,initialScrollY:window.scrollY,initialQuery:m,navigator:o,transformItems:s,hitComponent:ey,transformSearchClient:c,...n.searchPagePath&&{resultsFooterComponent:S},placeholder:eg.placeholder,...n,translations:n.translations?.modal??eg.modal,searchParameters:i}),u.current)]})}function ew(){let{siteConfig:e}=(0,en.Z)();return(0,r.jsx)(eS,{...e.themeConfig.algolia})}function ex(e){let{children:t,className:n}=e;return(0,r.jsx)("div",{className:(0,o.Z)(n,"navbarSearchContainer_Bca1"),children:t})}var ek=n("8854"),e_=n("6563");let eE=e=>e.docs.find(t=>t.id===e.mainDocId);var eP=n("7137");function eO(e,t){return t.alternateDocVersions[e.name]??e.docs.find(t=>t.id===e.mainDocId)}let eC={default:J,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:a,queryString:o="",...i}=e,{i18n:{currentLocale:s,locales:u,localeConfigs:d}}=(0,en.Z)(),f=(0,ei.l)(),{search:p,hash:m}=(0,l.TH)(),g=[...n,...u.map(e=>{let n=`pathname://${f.createUrl({locale:e,fullyQualified:!1})}`,r=`${n}${p}${m}${o}`;return{label:d[e].label,lang:d[e].htmlLang,to:r,target:"_self",autoAddBaseUrl:!1,className:e===s?t?"menu__link--active":"dropdown__link--active":""}}),...a],h=t?(0,c.I)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[s].label;return(0,r.jsx)(eo,{...i,mobile:t,label:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(es,{className:"iconLanguage_nlXk"}),h]}),items:g})},search:function(e){let{mobile:t,className:n}=e;return t?null:(0,r.jsx)(ex,{className:n,children:(0,r.jsx)(ew,{})})},dropdown:eo,html:function(e){let{value:t,className:n,mobile:a=!1,isDropdownItem:i=!1}=e;return(0,r.jsx)(i?"li":"div",{className:(0,o.Z)({navbar__item:!a&&!i,"menu__list-item":a},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:a,...o}=e,{activeDoc:i}=(0,ek.Iw)(a),s=(0,e_.vY)(t,a),l=i?.path===s?.path;return null===s||s.unlisted&&!l?null:(0,r.jsx)(J,{exact:!0,...o,isActive:()=>l||!!i?.sidebar&&i.sidebar===s.sidebar,label:n??s.id,to:s.path})},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:a,...o}=e,{activeDoc:i}=(0,ek.Iw)(a),s=(0,e_.oz)(t,a).link;if(!s)throw Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return(0,r.jsx)(J,{exact:!0,...o,isActive:()=>i?.sidebar===t,label:n??s.label,to:s.path})},docsVersion:function(e){let{label:t,to:n,docsPluginId:a,...o}=e,i=(0,e_.lO)(a)[0],s=t??i.label,l=n??eE(i).path;return(0,r.jsx)(J,{...o,label:s,to:l})},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:a,dropdownItemsBefore:o,dropdownItemsAfter:i,...s}=e,{search:u,hash:d}=(0,l.TH)(),f=(0,ek.Iw)(n),p=(0,ek.gB)(n),{savePreferredVersionName:m}=(0,eP.J)(n),g=[...o,...p.map(function(e){let t=eO(e,f);return{label:e.label,to:`${t.path}${u}${d}`,isActive:()=>e===f.activeVersion,onClick:()=>m(e.name)}}),...i],h=(0,e_.lO)(n)[0],b=t&&g.length>1?(0,c.I)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):h.label,y=t&&g.length>1?void 0:eO(h,f).path;return g.length<=1?(0,r.jsx)(J,{...s,mobile:t,label:b,to:y,isActive:a?()=>!1:void 0}):(0,r.jsx)(eo,{...s,mobile:t,label:b,to:y,items:g,isActive:a?()=>!1:void 0})}};function ej(e){let{type:t,...n}=e,a=eC[t&&"default"!==t?t:"items"in n?"dropdown":"default"];if(!a)throw Error(`No NavbarItem component found for type "${t}".`);return(0,r.jsx)(a,{...n})}function eT(){let e=(0,E.e)(),t=(0,y.L)().navbar.items;return(0,r.jsx)("ul",{className:"menu__list",children:t.map((t,n)=>(0,a.createElement)(ej,{mobile:!0,...t,onClick:()=>e.toggle(),key:n}))})}function eA(e){return(0,r.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,r.jsx)(c.Z,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)",children:"\u2190 Back to main menu"})})}function eI(){let e=0===(0,y.L)().navbar.items.length,t=A();return(0,r.jsxs)(r.Fragment,{children:[!e&&(0,r.jsx)(eA,{onClick:()=>t.hide()}),t.content]})}function eN(){let e=(0,E.e)();return(!function(){let e=!(arguments.length>0)||void 0===arguments[0]||arguments[0];(0,a.useEffect)(()=>(document.body.style.overflow=e?"hidden":"visible",()=>{document.body.style.overflow="visible"}),[e])}(e.shown),e.shouldRender)?(0,r.jsx)(I,{header:(0,r.jsx)(q,{}),primaryMenu:(0,r.jsx)(eT,{}),secondaryMenu:(0,r.jsx)(eI,{})}):null}let eL={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function eR(e){return(0,r.jsx)("div",{role:"presentation",...e,className:(0,o.Z)("navbar-sidebar__backdrop",e.className)})}function eD(e){let{children:t}=e,{navbar:{hideOnScroll:n,style:i}}=(0,y.L)(),s=(0,E.e)(),{navbarRef:l,isNavbarVisible:d}=function(e){let[t,n]=(0,a.useState)(e),r=(0,a.useRef)(!1),o=(0,a.useRef)(0),i=(0,a.useCallback)(e=>{null!==e&&(o.current=e.getBoundingClientRect().height)},[]);return(0,P.RF)((t,a)=>{let{scrollY:i}=t;if(!e)return;if(i=s?n(!1):i+c{if(!e)return;let a=t.location.hash;if(a?document.getElementById(a.substring(1)):void 0){r.current=!0,n(!1);return}n(!0)}),{navbarRef:i,isNavbarVisible:t}}(n);return(0,r.jsxs)("nav",{ref:l,"aria-label":(0,c.I)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,o.Z)("navbar","navbar--fixed-top",n&&[eL.navbarHideable,!d&&eL.navbarHidden],{"navbar--dark":"dark"===i,"navbar--primary":"primary"===i,"navbar-sidebar--show":s.shown}),children:[t,(0,r.jsx)(eR,{onClick:s.toggle}),(0,r.jsx)(eN,{})]})}var eM=n("3781");function eF(e){return(0,r.jsx)("button",{type:"button",...e,children:(0,r.jsx)(c.Z,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error",children:"Try again"})})}function ez(e){let{error:t}=e,n=(0,eM.getErrorCausalChain)(t).map(e=>e.message).join("\n\nCause:\n");return(0,r.jsx)("p",{className:"errorBoundaryError_a6uf",children:n})}class eB extends a.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}function e$(e){let{width:t=30,height:n=30,className:a,...o}=e;return(0,r.jsx)("svg",{className:a,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true",...o,children:(0,r.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function eU(){let{toggle:e,shown:t}=(0,E.e)();return(0,r.jsx)("button",{onClick:e,"aria-label":(0,c.I)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button",children:(0,r.jsx)(e$,{})})}function eH(e){let{items:t}=e;return(0,r.jsx)(r.Fragment,{children:t.map((e,t)=>(0,r.jsx)(eB,{onError:t=>Error(`A theme navbar item failed to render. +Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config: +${JSON.stringify(e,null,2)}`,{cause:t}),children:(0,r.jsx)(ej,{...e})},t))})}function eq(e){let{left:t,right:n}=e;return(0,r.jsxs)("div",{className:"navbar__inner",children:[(0,r.jsx)("div",{className:"navbar__items",children:t}),(0,r.jsx)("div",{className:"navbar__items navbar__items--right",children:n})]})}function eZ(){let e=(0,E.e)(),t=(0,y.L)().navbar.items,[n,a]=function(e){function t(e){return(e.position??"right")==="left"}return[e.filter(t),e.filter(e=>!t(e))]}(t),o=t.find(e=>"search"===e.type);return(0,r.jsx)(eq,{left:(0,r.jsxs)(r.Fragment,{children:[!e.disabled&&(0,r.jsx)(eU,{}),(0,r.jsx)(U,{}),(0,r.jsx)(eH,{items:n})]}),right:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(eH,{items:a}),(0,r.jsx)(B,{className:"colorModeToggle_DEke"}),!o&&(0,r.jsx)(ex,{children:(0,r.jsx)(ew,{})})]})})}function eW(){return(0,r.jsx)(eD,{children:(0,r.jsx)(eZ,{})})}function eV(e){let{item:t}=e,{to:n,href:a,label:i,prependBaseUrlToHref:s,className:l,...c}=t,u=(0,W.ZP)(n),d=(0,W.ZP)(a,{forcePrependBaseUrl:!0});return(0,r.jsxs)(Z.Z,{className:(0,o.Z)("footer__link-item",l),...a?{href:s?d:a}:{to:u},...c,children:[i,a&&!(0,V.Z)(a)&&(0,r.jsx)(K.Z,{})]})}function eG(e){let{item:t}=e;return t.html?(0,r.jsx)("li",{className:(0,o.Z)("footer__item",t.className),dangerouslySetInnerHTML:{__html:t.html}}):(0,r.jsx)("li",{className:"footer__item",children:(0,r.jsx)(eV,{item:t})},t.href??t.to)}function eK(e){let{column:t}=e;return(0,r.jsxs)("div",{className:(0,o.Z)("col footer__col",t.className),children:[(0,r.jsx)("div",{className:"footer__title",children:t.title}),(0,r.jsx)("ul",{className:"footer__items clean-list",children:t.items.map((e,t)=>(0,r.jsx)(eG,{item:e},t))})]})}function eY(e){let{columns:t}=e;return(0,r.jsx)("div",{className:"row footer__links",children:t.map((e,t)=>(0,r.jsx)(eK,{column:e},t))})}function eQ(){return(0,r.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function eX(e){let{item:t}=e;return t.html?(0,r.jsx)("span",{className:(0,o.Z)("footer__link-item",t.className),dangerouslySetInnerHTML:{__html:t.html}}):(0,r.jsx)(eV,{item:t})}function eJ(e){let{links:t}=e;return(0,r.jsx)("div",{className:"footer__links text--center",children:(0,r.jsx)("div",{className:"footer__links",children:t.map((e,n)=>(0,r.jsxs)(a.Fragment,{children:[(0,r.jsx)(eX,{item:e}),t.length!==n+1&&(0,r.jsx)(eQ,{})]},n))})})}function e0(e){let{links:t}=e;return"title"in t[0]?(0,r.jsx)(eY,{columns:t}):(0,r.jsx)(eJ,{links:t})}var e1=n("8959");let e2={footerLogoLink:"footerLogoLink_BH7S"};function e4(e){let{logo:t}=e,{withBaseUrl:n}=(0,W.Cg)(),a={light:n(t.src),dark:n(t.srcDark??t.src)};return(0,r.jsx)(e1.Z,{className:(0,o.Z)("footer__logo",t.className),alt:t.alt,sources:a,width:t.width,height:t.height,style:t.style})}function e3(e){let{logo:t}=e;return t.href?(0,r.jsx)(Z.Z,{href:t.href,className:e2.footerLogoLink,target:t.target,children:(0,r.jsx)(e4,{logo:t})}):(0,r.jsx)(e4,{logo:t})}function e6(e){let{copyright:t}=e;return(0,r.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function e7(e){let{style:t,links:n,logo:a,copyright:i}=e;return(0,r.jsx)("footer",{className:(0,o.Z)("footer",{"footer--dark":"dark"===t}),children:(0,r.jsxs)("div",{className:"container container-fluid",children:[n,(a||i)&&(0,r.jsxs)("div",{className:"footer__bottom text--center",children:[a&&(0,r.jsx)("div",{className:"margin-bottom--sm",children:a}),i]})]})})}let e9=a.memo(function(){let{footer:e}=(0,y.L)();if(!e)return null;let{copyright:t,links:n,logo:a,style:o}=e;return(0,r.jsx)(e7,{style:o,links:n&&n.length>0&&(0,r.jsx)(e0,{links:n}),logo:a&&(0,r.jsx)(e3,{logo:a}),copyright:t&&(0,r.jsx)(e6,{copyright:t})})}),e5=(0,O.Qc)([N.S,v.p,P.OC,eP.L5,s.VC,function(e){let{children:t}=e;return(0,r.jsx)(C.n2,{children:(0,r.jsx)(E.M,{children:(0,r.jsx)(T,{children:t})})})}]);function e8(e){let{children:t}=e;return(0,r.jsx)(e5,{children:t})}var te=n("9386");function tt(e){let{error:t,tryAgain:n}=e;return(0,r.jsx)("main",{className:"container margin-vert--xl",children:(0,r.jsx)("div",{className:"row",children:(0,r.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,r.jsx)(te.Z,{as:"h1",className:"hero__title",children:(0,r.jsx)(c.Z,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed",children:"This page crashed."})}),(0,r.jsx)("div",{className:"margin-vert--lg",children:(0,r.jsx)(eF,{onClick:n,className:"button button--primary shadow--lw"})}),(0,r.jsx)("hr",{}),(0,r.jsx)("div",{className:"margin-vert--md",children:(0,r.jsx)(ez,{error:t})})]})})})}function tn(e){let{children:t,noFooter:n,wrapperClassName:a,title:l,description:c}=e;return(0,h.t)(),(0,r.jsxs)(e8,{children:[(0,r.jsx)(s.d,{title:l,description:c}),(0,r.jsx)(b,{}),(0,r.jsx)(_,{}),(0,r.jsx)(eW,{}),(0,r.jsx)("div",{id:d,className:(0,o.Z)(g.k.wrapper.main,"mainWrapper_z2l0",a),children:(0,r.jsx)(i.Z,{fallback:e=>(0,r.jsx)(tt,{...e}),children:t})}),!n&&(0,r.jsx)(e9,{})]})}},1660:function(e,t,n){"use strict";n.d(t,{Z:function(){return u}});var r=n(5893);n(7294);var a=n(3367),o=n(3187),i=n(7262),s=n(6009),l=n(8959);function c(e){let{logo:t,alt:n,imageClassName:a}=e,i={light:(0,o.ZP)(t.src),dark:(0,o.ZP)(t.srcDark||t.src)},s=(0,r.jsx)(l.Z,{className:t.className,sources:i,height:t.height,width:t.width,alt:n,style:t.style});return a?(0,r.jsx)("div",{className:a,children:s}):s}function u(e){let{siteConfig:{title:t}}=(0,i.Z)(),{navbar:{title:n,logo:l}}=(0,s.L)(),{imageClassName:u,titleClassName:d,...f}=e,p=(0,o.ZP)(l?.href||"/"),m=l?.alt??(n?"":t);return(0,r.jsxs)(a.Z,{to:p,...f,...l?.target&&{target:l.target},children:[l&&(0,r.jsx)(c,{logo:l,alt:m,imageClassName:u}),null!=n&&(0,r.jsx)("b",{className:d,children:n})]})}},2901:function(e,t,n){"use strict";n.d(t,{Z:function(){return o}});var r=n(5893);n(7294);var a=n(1199);function o(e){let{locale:t,version:n,tag:o}=e;return(0,r.jsxs)(a.Z,{children:[t&&(0,r.jsx)("meta",{name:"docusaurus_locale",content:t}),n&&(0,r.jsx)("meta",{name:"docusaurus_version",content:n}),o&&(0,r.jsx)("meta",{name:"docusaurus_tag",content:o}),t&&(0,r.jsx)("meta",{name:"docsearch:language",content:t}),n&&(0,r.jsx)("meta",{name:"docsearch:version",content:n}),o&&(0,r.jsx)("meta",{name:"docsearch:docusaurus_tag",content:o})]})}},8959:function(e,t,n){"use strict";n.d(t,{Z:()=>u});var r=n("5893"),a=n("7294"),o=n("7026"),i=n("6735"),s=n("4200");let l={themedComponent:"themedComponent_mlkZ","themedComponent--light":"themedComponent--light_NVdE","themedComponent--dark":"themedComponent--dark_xIcU"};function c(e){let{className:t,children:n}=e,c=(0,i.Z)(),{colorMode:u}=(0,s.I)();return(0,r.jsx)(r.Fragment,{children:(c?"dark"===u?["dark"]:["light"]:["light","dark"]).map(e=>{let i=n({theme:e,className:(0,o.Z)(t,l.themedComponent,l[`themedComponent--${e}`])});return(0,r.jsx)(a.Fragment,{children:i},e)})})}function u(e){let{sources:t,className:n,alt:a,...o}=e;return(0,r.jsx)(c,{className:n,children:e=>{let{theme:n,className:i}=e;return(0,r.jsx)("img",{src:t[n],alt:a,className:i,...o})}})}},6850:function(e,t,n){"use strict";n.d(t,{u:function(){return l},z:function(){return m}});var r=n(5893),a=n(7294),o=n(6735),i=n(8714),s=n(1481);function l(e){let{initialState:t}=e,[n,r]=(0,a.useState)(t??!1),o=(0,a.useCallback)(()=>{r(e=>!e)},[]);return{collapsed:n,setCollapsed:r,toggleCollapsed:o}}let c={display:"none",overflow:"hidden",height:"0px"},u={display:"block",overflow:"visible",height:"auto"};function d(e,t){let n=t?c:u;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function f(e){let{as:t="div",collapsed:n,children:i,animation:l,onCollapseTransitionEnd:f,className:p,disableSSRStyle:m}=e,g=(0,o.Z)(),h=(0,a.useRef)(null);return!function(e){let{collapsibleRef:t,collapsed:n,animation:r}=e,o=(0,a.useRef)(!1);(0,a.useEffect)(()=>{let e=t.current;function a(){let t=function(){let t=e.scrollHeight,n=r?.duration??function(e){if((0,s.n)())return 1;let t=e/36;return Math.round((4+15*t**.25+t/5)*10)}(t),a=r?.easing??"ease-in-out";return{transition:`height ${n}ms ${a}`,height:`${t}px`}}();e.style.transition=t.transition,e.style.height=t.height}if(!o.current){d(e,n),o.current=!0;return}return e.style.willChange="height",function(){let t=requestAnimationFrame(()=>{n?(a(),requestAnimationFrame(()=>{e.style.height=c.height,e.style.overflow=c.overflow})):(e.style.display="block",requestAnimationFrame(()=>{a()}))});return()=>cancelAnimationFrame(t)}()},[t,n,r])}({collapsibleRef:h,collapsed:n,animation:l}),(0,r.jsx)(t,{ref:h,style:m?void 0:function(e){let{collapsed:t,isBrowser:n}=e;if(!n)return t?c:u}({collapsed:n,isBrowser:g}),onTransitionEnd:e=>{"height"===e.propertyName&&(d(h.current,n),f?.(n))},className:p,children:i})}function p(e){let{collapsed:t,...n}=e,[o,s]=(0,a.useState)(!t),[l,c]=(0,a.useState)(t);return(0,i.Z)(()=>{t||s(!0)},[t]),(0,i.Z)(()=>{o&&c(t)},[o,t]),o?(0,r.jsx)(f,{...n,collapsed:l}):null}function m(e){let{lazy:t,...n}=e;return(0,r.jsx)(t?p:f,{...n})}},1333:function(e,t,n){"use strict";n.d(t,{n:function(){return g},p:function(){return m}});var r=n(5893),a=n(7294),o=n(6735),i=n(4510),s=n(1934),l=n(6009);let c=(0,i.WA)("docusaurus.announcement.dismiss"),u=(0,i.WA)("docusaurus.announcement.id"),d=()=>"true"===c.get(),f=e=>c.set(String(e)),p=a.createContext(null);function m(e){let{children:t}=e,n=function(){let{announcementBar:e}=(0,l.L)(),t=(0,o.Z)(),[n,r]=(0,a.useState)(()=>!!t&&d());(0,a.useEffect)(()=>{r(d())},[]);let i=(0,a.useCallback)(()=>{f(!0),r(!0)},[]);return(0,a.useEffect)(()=>{if(!e)return;let{id:t}=e,n=u.get();"annoucement-bar"===n&&(n="announcement-bar");let a=t!==n;u.set(t),a&&f(!1),(a||!d())&&r(!1)},[e]),(0,a.useMemo)(()=>({isActive:!!e&&!n,close:i}),[e,n,i])}();return(0,r.jsx)(p.Provider,{value:n,children:t})}function g(){let e=(0,a.useContext)(p);if(!e)throw new s.i6("AnnouncementBarProvider");return e}},4200:function(e,t,n){"use strict";n.d(t,{I:function(){return b},S:function(){return h}});var r=n(5893),a=n(7294),o=n(3262),i=n(1934),s=n(4510),l=n(6009);let c=a.createContext(void 0),u="theme",d=(0,s.WA)(u),f={light:"light",dark:"dark"},p=e=>e===f.dark?f.dark:f.light,m=e=>o.Z.canUseDOM?p(document.documentElement.getAttribute("data-theme")):p(e),g=e=>{d.set(p(e))};function h(e){let{children:t}=e,n=function(){let{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,l.L)(),[r,o]=(0,a.useState)(m(e));(0,a.useEffect)(()=>{t&&d.del()},[t]);let i=(0,a.useCallback)(function(t){let r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},{persist:a=!0}=r;t?(o(t),a&&g(t)):(n?o(window.matchMedia("(prefers-color-scheme: dark)").matches?f.dark:f.light):o(e),d.del())},[n,e]);(0,a.useEffect)(()=>{document.documentElement.setAttribute("data-theme",p(r))},[r]),(0,a.useEffect)(()=>{if(t)return;let e=e=>{if(e.key!==u)return;let t=d.get();null!==t&&i(p(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)},[t,i]);let s=(0,a.useRef)(!1);return(0,a.useEffect)(()=>{if(t&&!n)return;let e=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{if(window.matchMedia("print").matches||s.current){s.current=window.matchMedia("print").matches;return}i(null)};return e.addListener(r),()=>e.removeListener(r)},[i,t,n]),(0,a.useMemo)(()=>({colorMode:r,setColorMode:i,get isDarkTheme(){return r===f.dark},setLightTheme(){i(f.light)},setDarkTheme(){i(f.dark)}}),[r,i])}();return(0,r.jsx)(c.Provider,{value:n,children:t})}function b(){let e=(0,a.useContext)(c);if(null==e)throw new i.i6("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},5870:function(e,t,n){"use strict";n.d(t,{M:function(){return d},e:function(){return f}});var r=n(5893),a=n(7294),o=n(9018),i=n(7550),s=n(9207),l=n(6009),c=n(1934);let u=a.createContext(void 0);function d(e){let{children:t}=e,n=function(){let e=function(){let e=(0,o.HY)(),{items:t}=(0,l.L)().navbar;return 0===t.length&&!e.component}(),t=(0,i.i)(),n=!e&&"mobile"===t,[r,c]=(0,a.useState)(!1);(0,s.Rb)(()=>{if(r)return c(!1),!1});let u=(0,a.useCallback)(()=>{c(e=>!e)},[]);return(0,a.useEffect)(()=>{"desktop"===t&&c(!1)},[t]),(0,a.useMemo)(()=>({disabled:e,shouldRender:n,toggle:u,shown:r}),[e,n,u,r])}();return(0,r.jsx)(u.Provider,{value:n,children:t})}function f(){let e=a.useContext(u);if(void 0===e)throw new c.i6("NavbarMobileSidebarProvider");return e}},9018:function(e,t,n){"use strict";n.d(t,{HY:function(){return l},Zo:function(){return c},n2:function(){return s}});var r=n(5893),a=n(7294),o=n(1934);let i=a.createContext(null);function s(e){let{children:t}=e,n=(0,a.useState)({component:null,props:null});return(0,r.jsx)(i.Provider,{value:n,children:t})}function l(){let e=(0,a.useContext)(i);if(!e)throw new o.i6("NavbarSecondaryMenuContentProvider");return e[0]}function c(e){let{component:t,props:n}=e,r=(0,a.useContext)(i);if(!r)throw new o.i6("NavbarSecondaryMenuContentProvider");let[,s]=r,l=(0,o.Ql)(n);return(0,a.useEffect)(()=>{s({component:t,props:l})},[s,t,l]),(0,a.useEffect)(()=>()=>s({component:null,props:null}),[s]),null}},4169:function(e,t,n){"use strict";n.d(t,{h:()=>a,t:()=>o});var r=n("7294");let a="navigation-with-keyboard";function o(){(0,r.useEffect)(()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(a),"mousedown"===e.type&&document.body.classList.remove(a)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(a),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}},[])}},2814:function(e,t,n){"use strict";n.d(t,{K:function(){return i},M:function(){return s}});var r=n(7294),a=n(7262),o=n(9207);function i(){return(0,o.Nc)("q")}function s(){let{siteConfig:{baseUrl:e,themeConfig:t}}=(0,a.Z)(),{algolia:{searchPagePath:n}}=t;return(0,r.useCallback)(t=>`${e}${n}?q=${encodeURIComponent(t)}`,[e,n])}},7550:function(e,t,n){"use strict";n.d(t,{i:function(){return i}});var r=n(7294),a=n(3262);let o={desktop:"desktop",mobile:"mobile"};function i(){let{desktopBreakpoint:e=996}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},[t,n]=(0,r.useState)(()=>"ssr");return(0,r.useEffect)(()=>{function t(){n(function(e){if(!a.Z.canUseDOM)throw Error("getWindowSize() should only be called after React hydration");return window.innerWidth>e?o.desktop:o.mobile}(e))}return t(),window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[e]),t}},6171:function(e,t,n){"use strict";n.d(t,{k:function(){return r}});let r={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",blogAuthorsListPage:"blog-authors-list-page",blogAuthorsPostsPage:"blog-authors-posts-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",unlistedBanner:"theme-unlisted-banner",draftBanner:"theme-draft-banner",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{blogFooterTagsRow:"theme-blog-footer-tags-row",blogFooterEditMetaRow:"theme-blog-footer-edit-meta-row"},pages:{pageFooterEditMetaRow:"theme-pages-footer-edit-meta-row"}}},1481:function(e,t,n){"use strict";function r(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{n:function(){return r}})},1297:function(e,t,n){"use strict";n.d(t,{p:function(){return a}});var r=n(7262);function a(e){let{siteConfig:t}=(0,r.Z)(),{title:n,titleDelimiter:a}=t;return e?.trim().length?`${e.trim()} ${a} ${n}`:n}},9207:function(e,t,n){"use strict";n.d(t,{Nc:function(){return l},Rb:function(){return i},_X:function(){return s}});var r=n(7294),a=n(6550),o=n(1934);function i(e){!function(e){let t=(0,a.k6)(),n=(0,o.zX)(e);(0,r.useEffect)(()=>t.block((e,t)=>n(e,t)),[t,n])}((t,n)=>{if("POP"===n)return e(t,n)})}function s(e){return function(e){let t=(0,a.k6)();return(0,r.useSyncExternalStore)(t.listen,()=>e(t),()=>e(t))}(t=>null===e?null:new URLSearchParams(t.location.search).get(e))}function l(e){return[s(e)??"",function(e){let t=(0,a.k6)();return(0,r.useCallback)((n,r)=>{let a=new URLSearchParams(t.location.search);n?a.set(e,n):a.delete(e),(r?.push?t.push:t.replace)({search:a.toString()})},[e,t])}(e)]}},9413:function(e,t,n){"use strict";function r(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:(e,t)=>e===t;return e.filter((n,r)=>e.findIndex(e=>t(e,n))!==r)}function a(e){return Array.from(new Set(e))}n.d(t,{jj:function(){return a},lx:function(){return r}})},5231:function(e,t,n){"use strict";n.d(t,{VC:()=>p,d:()=>u,FG:()=>f});var r=n("5893"),a=n("7294"),o=n("7026"),i=n("1199"),s=n("5970"),l=n("3187"),c=n("1297");function u(e){let{title:t,description:n,keywords:a,image:o,children:s}=e,u=(0,c.p)(t),{withBaseUrl:d}=(0,l.Cg)(),f=o?d(o,{absolute:!0}):void 0;return(0,r.jsxs)(i.Z,{children:[t&&(0,r.jsx)("title",{children:u}),t&&(0,r.jsx)("meta",{property:"og:title",content:u}),n&&(0,r.jsx)("meta",{name:"description",content:n}),n&&(0,r.jsx)("meta",{property:"og:description",content:n}),a&&(0,r.jsx)("meta",{name:"keywords",content:Array.isArray(a)?a.join(","):a}),f&&(0,r.jsx)("meta",{property:"og:image",content:f}),f&&(0,r.jsx)("meta",{name:"twitter:image",content:f}),s]})}let d=a.createContext(void 0);function f(e){let{className:t,children:n}=e,s=a.useContext(d),l=(0,o.Z)(s,t);return(0,r.jsxs)(d.Provider,{value:l,children:[(0,r.jsx)(i.Z,{children:(0,r.jsx)("html",{className:l})}),n]})}function p(e){var t;let{children:n}=e,i=function(){let e=a.useContext(s._);if(!e)throw Error("Unexpected: no Docusaurus route context found");return e}(),l=(t=i.plugin.name,`plugin-${t.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`),c=`plugin-id-${i.plugin.id}`;return(0,r.jsx)(f,{className:(0,o.Z)(l,c),children:n})}},1934:function(e,t,n){"use strict";n.d(t,{D9:function(){return s},Qc:function(){return u},Ql:function(){return c},i6:function(){return l},zX:function(){return i}});var r=n(5893),a=n(7294),o=n(8714);function i(e){let t=(0,a.useRef)(e);return(0,o.Z)(()=>{t.current=e},[e]),(0,a.useCallback)(function(){for(var e=arguments.length,n=Array(e),r=0;r{t.current=e}),t.current}class l extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function c(e){let t=Object.entries(e);return t.sort((e,t)=>e[0].localeCompare(t[0])),(0,a.useMemo)(()=>e,t.flat())}function u(e){return t=>{let{children:n}=t;return(0,r.jsx)(r.Fragment,{children:e.reduceRight((e,t)=>(0,r.jsx)(t,{children:e}),n)})}}},1626:function(e,t,n){"use strict";function r(e,t){return void 0!==e&&void 0!==t&&RegExp(e,"gi").test(t)}n.d(t,{F:function(){return r}})},3868:function(e,t,n){"use strict";n.d(t,{Mg:function(){return i},Ns:function(){return s}});var r=n(7294),a=n(4320),o=n(7262);function i(e,t){let n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function s(){let{baseUrl:e}=(0,o.Z)().siteConfig;return(0,r.useMemo)(()=>(function(e){let{baseUrl:t,routes:n}=e;function r(e){return e.path===t&&!0===e.exact}function a(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;let n=t.find(r);return n||e(t.filter(a).flatMap(e=>e.routes??[]))}(n)})({routes:a.Z,baseUrl:e}),[e])}},4718:function(e,t,n){"use strict";n.d(t,{Ct:function(){return g},OC:function(){return u},RF:function(){return p},o5:function(){return m}});var r=n(5893),a=n(7294),o=n(3262),i=n(6735),s=n(8714),l=n(1934);let c=a.createContext(void 0);function u(e){let{children:t}=e,n=function(){let e=(0,a.useRef)(!0);return(0,a.useMemo)(()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}}),[])}();return(0,r.jsx)(c.Provider,{value:n,children:t})}function d(){let e=(0,a.useContext)(c);if(null==e)throw new l.i6("ScrollControllerProvider");return e}let f=()=>o.Z.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function p(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],{scrollEventsEnabledRef:n}=d(),r=(0,a.useRef)(f()),o=(0,l.zX)(e);(0,a.useEffect)(()=>{let e=()=>{if(!n.current)return;let e=f();o(e,r.current),r.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)},[o,n,...t])}function m(){let e=d(),t=function(){let e=(0,a.useRef)({elem:null,top:0}),t=(0,a.useCallback)(t=>{e.current={elem:t,top:t.getBoundingClientRect().top}},[]),n=(0,a.useCallback)(()=>{let{current:{elem:t,top:n}}=e;if(!t)return{restored:!1};let r=t.getBoundingClientRect().top-n;return r&&window.scrollBy({left:0,top:r}),e.current={elem:null,top:0},{restored:0!==r}},[]);return(0,a.useMemo)(()=>({save:t,restore:n}),[n,t])}(),n=(0,a.useRef)(void 0),r=(0,a.useCallback)(r=>{t.save(r),e.disableScrollEvents(),n.current=()=>{let{restored:r}=t.restore();if(n.current=void 0,r){let t=()=>{e.enableScrollEvents(),window.removeEventListener("scroll",t)};window.addEventListener("scroll",t)}else e.enableScrollEvents()}},[e,t]);return(0,s.Z)(()=>{queueMicrotask(()=>n.current?.())}),{blockElementScrollPositionUntilNextRender:r}}function g(){let e=(0,a.useRef)(null),t=(0,i.Z)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?(window.scrollTo({top:n,behavior:"smooth"}),()=>{}):function(e){let t=null,n=document.documentElement.scrollTop>e;return!function r(){let a=document.documentElement.scrollTop;(n&&a>e||!n&&at&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},86:function(e,t,n){"use strict";n.d(t,{H:function(){return r}});let r="default"},4510:function(e,t,n){"use strict";n.d(t,{Nk:()=>u,WA:()=>c});var r=n("7294"),a=JSON.parse('{"d":"localStorage","u":""}');let o=a.d;function i(e){let{key:t,oldValue:n,newValue:r,storage:a}=e;if(n===r)return;let o=document.createEvent("StorageEvent");o.initStorageEvent("storage",!1,!1,t,n,r,window.location.href,a),window.dispatchEvent(o)}let s=!1,l={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function c(e,t){let n=`${e}${a.u}`;if("undefined"==typeof window)return function(e){function t(){throw Error(`Illegal storage API usage for storage key "${e}". +Docusaurus storage APIs are not supposed to be called on the server-rendering process. +Please only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(n);let r=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:o;if("undefined"==typeof window)throw Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(e){var t;return t=e,s||(console.warn(`Docusaurus browser storage is not available. +Possible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.`,t),s=!0),null}}(t?.persistence);return null===r?l:{get:()=>{try{return r.getItem(n)}catch(e){return console.error(`Docusaurus storage error, can't get key=${n}`,e),null}},set:e=>{try{let t=r.getItem(n);r.setItem(n,e),i({key:n,oldValue:t,newValue:e,storage:r})}catch(t){console.error(`Docusaurus storage error, can't set ${n}=${e}`,t)}},del:()=>{try{let e=r.getItem(n);r.removeItem(n),i({key:n,oldValue:e,newValue:null,storage:r})}catch(e){console.error(`Docusaurus storage error, can't delete key=${n}`,e)}},listen:e=>{try{let t=t=>{t.storageArea===r&&t.key===n&&e(t)};return window.addEventListener("storage",t),()=>window.removeEventListener("storage",t)}catch(e){return console.error(`Docusaurus storage error, can't listen for changes of key=${n}`,e),()=>{}}}}}function u(e,t){let n=(0,r.useRef)(()=>null===e?l:c(e,t)).current(),a=(0,r.useCallback)(e=>"undefined"==typeof window?()=>{}:n.listen(e),[n]);return[(0,r.useSyncExternalStore)(a,()=>n.get(),()=>null),n]}},8229:function(e,t,n){"use strict";n.d(t,{l:function(){return i}});var r=n(7262),a=n(6550),o=n(3781);function i(){let{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:i,currentLocale:s}}=(0,r.Z)(),{pathname:l}=(0,a.TH)(),c=(0,o.applyTrailingSlash)(l,{trailingSlash:n,baseUrl:e}),u=s===i?e:e.replace(`/${s}/`,"/"),d=c.replace(e,"");return{createUrl:function(e){let{locale:n,fullyQualified:r}=e;return`${r?t:""}${n===i?`${u}`:`${u}${n}/`}${d}`}}}},7339:function(e,t,n){"use strict";n.d(t,{S:function(){return i}});var r=n(7294),a=n(6550),o=n(1934);function i(e){let t=(0,a.TH)(),n=(0,o.D9)(t),i=(0,o.zX)(e);(0,r.useEffect)(()=>{n&&t!==n&&i({location:t,previousLocation:n})},[i,t,n])}},6009:function(e,t,n){"use strict";n.d(t,{L:function(){return a}});var r=n(7262);function a(){return(0,r.Z)().siteConfig.themeConfig}},6799:function(e,t,n){"use strict";n.d(t,{L:function(){return a}});var r=n(7262);function a(){let{siteConfig:{themeConfig:e}}=(0,r.Z)();return e}},7598:function(e,t,n){"use strict";n.d(t,{l:function(){return s}});var r=n(7294),a=n(1626),o=n(3187),i=n(6799);function s(){let{withBaseUrl:e}=(0,o.Cg)(),{algolia:{externalUrlRegex:t,replaceSearchResultPathname:n}}=(0,i.L)();return(0,r.useCallback)(r=>{var o;let i=new URL(r);return(0,a.F)(t,i.href)?r:e((o=`${i.pathname+i.hash}`,n?o.replaceAll(RegExp(n.from,"g"),n.to):o))},[e,t,n])}},1684:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addTrailingSlash=a,t.default=function(e,t){let{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#")||void 0===n)return e;let[i]=e.split(/[#?]/),s="/"===i||i===r?i:n?a(i):o(i);return e.replace(i,s)},t.addLeadingSlash=function(e){return(0,r.addPrefix)(e,"/")},t.removeTrailingSlash=o;let r=n(6611);function a(e){return e.endsWith("/")?e:`${e}/`}function o(e){return(0,r.removeSuffix)(e,"/")}},7724:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=function e(t){return t.cause?[t,...e(t.cause)]:[t]}},3781:function(e,t,n){"use strict";t.getErrorCausalChain=t.applyTrailingSlash=void 0;let r=n(8395);var a=n(1684);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return r.__importDefault(a).default}}),n(6611);var o=n(7724);Object.defineProperty(t,"getErrorCausalChain",{enumerable:!0,get:function(){return o.getErrorCausalChain}})},6611:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addPrefix=function(e,t){return e.startsWith(t)?e:`${t}${e}`},t.removeSuffix=function(e,t){return""===t?e:e.endsWith(t)?e.slice(0,-t.length):e},t.addSuffix=function(e,t){return e.endsWith(t)?e:`${e}${t}`},t.removePrefix=function(e,t){return e.startsWith(t)?e.slice(t.length):e}},2188:function(e,t,n){"use strict";n.d(t,{kA:()=>p,AZ:()=>c,yY:()=>u,Bi:()=>f,n_:()=>m,Pc:()=>d});var r=n("3262"),a=n("7294");let o=e=>` +
+
Sponsors
+ +
+`,i=e=>` +
  • + + ${e.image?''+e.title+'':""} + ${e.text||""} + +
    • +`,s='
    ',l=o([]),c=s,u=l,d=()=>s,f=(0,a.createContext)({docContent:c,tocContent:u,updateContent:()=>void 0}),p=()=>{r.Z.canUseDOM&&(window.ethicalads?window.ethicalads.load():addEventListener("load",()=>{window.ethicalads?.load()}))},m=async()=>{try{let e=await fetch("https://blog.livecodes.io/data/sponsors.json");if(!e.ok)return;let t=await e.json();return t.content||o(t.sponsors||[])}catch{return}}},9386:function(e,t,n){"use strict";n.d(t,{Z:()=>m});var r=n("5893"),a=n("7294"),o=n("7026"),i=n("7670"),s=n("6009"),l=n("3367"),c=n("4961");let u={anchorWithStickyNavbar:"anchorWithStickyNavbar_LWe7",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_WYt5"};function d(e){let{as:t,id:n,...a}=e,d=(0,c.Z)(),{navbar:{hideOnScroll:f}}=(0,s.L)();if("h1"===t||!n)return(0,r.jsx)(t,{...a,id:void 0});d.collectAnchor(n);let p=(0,i.I)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof a.children?a.children:n});return(0,r.jsxs)(t,{...a,className:(0,o.Z)("anchor",f?u.anchorWithHideOnScrollNavbar:u.anchorWithStickyNavbar,a.className),id:n,children:[a.children,(0,r.jsx)(l.Z,{className:"hash-link",to:`#${n}`,"aria-label":p,title:p,children:"\u200B"})]})}var f=n("2188");let p={content:"content_lMOZ",top:"top_MrQY",none:"none_qEfi"};function m(e){let{docContent:t,updateContent:n}=(0,a.useContext)(f.Bi),[o,i]=e.id?.split("-custom-content-")||[""];return((0,a.useEffect)(()=>{"h1"===e.as&&(n(),(0,f.kA)())},[]),"h1"===e.as)?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(d,{...e,id:o}),t&&(0,r.jsx)("div",{className:`custom-content custom-content-header ${p.content} ${p[i]}`,dangerouslySetInnerHTML:{__html:t}})]}):(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(d,{...e,id:o})})}},1858:function(e,t,n){"use strict";n.d(t,{G:function(){return a},H:function(){return o}});let r=n(5150).default.customFields.docsBaseUrl;r&&!r.endsWith("/")&&(r+="/");let a=globalThis.location?.hostname.startsWith("127.0.0.1")||globalThis.location?.hostname.startsWith("localhost")?"http://127.0.0.1:8080/":r&&globalThis.location?.href?new URL(r+"../",globalThis.location?.href).href:globalThis.location?.origin||"https://livecodes.io/",o=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:location.origin;return!!(e&&(e.endsWith("livecodes.io")||e.endsWith("livecodes.pages.dev")||e.endsWith("localpen.pages.dev")||e.startsWith("http://127.0.0.1")||e.startsWith("http://localhost")))}},5150:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return r}});let r={title:"LiveCodes",tagline:"A Code Playground That Just Works!",url:"https://livecodes.io",baseUrl:"/docs/",onBrokenLinks:"throw",onBrokenMarkdownLinks:"warn",favicon:"img/favicon.ico",organizationName:"LiveCodes",projectName:"LiveCodes",customFields:{appVersion:"46",sdkVersion:"0.11.0"},presets:[["classic",{docs:{routeBasePath:"/",sidebarPath:"/home/runner/work/livecodes/livecodes/docs/sidebars.ts",editUrl:"https://github.com/live-codes/livecodes/tree/develop/docs/",remarkPlugins:[[null,{sync:!0,converters:["yarn","pnpm","bun"]}],null]},blog:!1,theme:{customCss:["/home/runner/work/livecodes/livecodes/docs/src/css/custom.css","/home/runner/work/livecodes/livecodes/docs/node_modules/react-responsive-carousel/lib/styles/carousel.min.css"]}}]],themeConfig:{colorMode:{defaultMode:"light",disableSwitch:!1,respectPrefersColorScheme:!1},docs:{sidebar:{hideable:!0,autoCollapseCategories:!1},versionPersistence:"localStorage"},navbar:{title:"LiveCodes",logo:{alt:"LiveCodes Logo",src:"img/livecodes-logo.svg"},items:[{type:"doc",docId:"overview",position:"left",label:"Docs"},{to:"sdk",position:"left",label:"SDK"},{href:"https://blog.livecodes.io",target:"_self",label:"Blog",position:"left"},{href:"pathname:///../stories",position:"left",label:"Storybook"},{href:"pathname:///../",label:"App",position:"right"},{href:"https://twitter.com/livecodes_io",label:"\uD835\uDD4F",position:"right"},{href:"https://github.com/live-codes/livecodes",label:"GitHub",position:"right"}],hideOnScroll:!1},footer:{style:"dark",links:[{title:"Docs",items:[{label:"Overview",to:"/overview"},{label:"Why Another Playground?",to:"/why"},{label:"Getting Started",to:"/getting-started"},{label:"Features",to:"/features"},{label:"Languages",to:"/languages"},{label:"SDK",to:"/sdk"}]},{title:"LiveCodes",items:[{label:"App",href:"pathname:///../"},{label:"Starter Templates",href:"pathname:///../?new"},{label:"Import...",href:"pathname:///../?screen=import"},{label:"AI Code Assistant \uD83E\uDE84",to:"/features/ai"},{label:"Bookmarklet",to:"/bookmarklet"},{html:'llms.txt-llms-full.txt'}]},{title:"Info",items:[{label:"Credits",to:"/credits"},{label:"License",to:"/license"},{label:"Sponsor \uD83D\uDC9A",to:"/sponsor"},{label:"Contact",to:"/contact"},{label:"About us",to:"/about"}]},{title:"More",items:[{label:"Blog",href:"https://blog.livecodes.io",target:"_self"},{label:"GitHub",href:"https://github.com/live-codes/livecodes"},{label:"\uD835\uDD4F / Twitter",href:"https://twitter.com/livecodes_io"},{label:"Dev",href:"https://dev.to/livecodes_io"},{label:"npm",href:"https://www.npmjs.com/package/livecodes"},{html:'Status'}]}],copyright:'
    Released under the MIT License
    \n Copyright \xa9 2025\n Hatem Hosny'},prism:{theme:{plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},darkTheme:{plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},additionalLanguages:["bash","csharp","java","markdown"],magicComments:[{className:"theme-code-block-highlighted-line",line:"highlight-next-line",block:{start:"highlight-start",end:"highlight-end"}}]},algolia:{appId:"H9Z2PKYS80",apiKey:"a97b58cd17c1aa51274222d1db75d839",indexName:"livecodes",contextualSearch:!0,replaceSearchResultPathname:{from:"/docs/",to:"/"},searchParameters:{},searchPagePath:"search"},blog:{sidebar:{groupByYear:!0}},metadata:[],tableOfContents:{minHeadingLevel:2,maxHeadingLevel:3}},scripts:[{src:"https://unpkg.com/prettier@2.4.1/standalone.js",async:!0},{src:"https://unpkg.com/prettier@2.4.1/parser-babel.js",async:!0},{src:"https://unpkg.com/prettier@2.4.1/parser-html.js",async:!0},{src:"https://media.ethicalads.io/media/client/ethicalads.min.js",async:!0,defer:!0}],headTags:[{tagName:"script",attributes:{type:"ea-placeholder",id:"ea-placeholder","data-ea-publisher":"livecodesio","data-ea-manual":"true"}}],plugins:[["docusaurus-plugin-typedoc",{entryPoints:["../src/sdk/index.ts"],tsconfig:"../tsconfig.json",plugin:["typedoc-plugin-missing-exports"],excludeExternals:!0,internalModule:"_internal"}],["@docusaurus/plugin-client-redirects",{redirects:[{from:"/languages/pyodide",to:"/languages/python-wasm"}]}],["./src/plugins/generate-llms-txt.ts",{title:"LiveCodes",description:"LiveCodes is a feature-rich, open-source, client-side code playground that supports React, Vue, Svelte, Solid, JavaScript, TypeScript, CSS, Sass, Tailwind CSS, Python, Go, Ruby, PHP, and 90+ languages/frameworks.\n\nA large number of starter templates are available to help you get started quickly.\nProjects can be saved, shared, exported (e.g. to GitHub Gists), deployed (e.g. to GitHub Pages), or embedded in web pages.\nA powerful yet easy-to-use SDK enables the creation of and communication with embedded playgrounds.\n\nWith extensive language support and high configurability, LiveCodes can easily adapt to your needs.\nIt offers excellent mobile support, featuring a responsive layout and a touch-friendly code editor.\n\nLiveCodes is an outstanding tool for learning, teaching, prototyping, sharing, and testing code.\nIt can be easily self-hosted, if needed, on any static file server.\n\nLiveCodes is completely free for unlimited use, with no ads and no account required.\nIts MIT License also permits commercial use.\n\n- [Docs](https://livecodes.io/docs/llms.txt)\n- [Full Docs](https://livecodes.io/docs/llms-full.txt)\n- [README](https://raw.githubusercontent.com/live-codes/livecodes/refs/heads/develop/README.md)\n",exportIndividualFiles:!0,ignoreFiles:[],prependFiles:["../../README.md"]}]],future:{experimental_faster:{swcJsLoader:!0,swcJsMinimizer:!0,swcHtmlMinimizer:!0,lightningCssMinimizer:!0,mdxCrossCompilerCache:!0,rspackBundler:!0},experimental_storage:{type:"localStorage",namespace:!1},experimental_router:"browser"},baseUrlIssueBanner:!0,i18n:{defaultLocale:"en",path:"i18n",locales:["en"],localeConfigs:{}},onBrokenAnchors:"warn",onDuplicateRoutes:"warn",staticDirectories:["static"],themes:[],stylesheets:[],clientModules:[],titleDelimiter:"|",noIndex:!1,markdown:{format:"mdx",mermaid:!1,mdx1Compat:{comments:!0,admonitions:!0,headingIds:!0},anchors:{maintainCase:!1}}}},6019:function(e,t,n){"use strict";function r(){return(r=Object.assign?Object.assign.bind():function(e){for(var t=1;ta})},443:function(e,t,n){"use strict";function r(e,t){if(null==e)return{};var n={};for(var r in e)if(({}).hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}n.d(t,{Z:function(){return r}})},7026:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});let r=function(){for(var e,t,n=0,r="",a=arguments.length;nt in e?O(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,M=(e,t)=>{for(var n in t||(t={}))L.call(t,n)&&D(e,n,t[n]);if(I)for(var n of I(t))R.call(t,n)&&D(e,n,t[n]);return e},F=(e,t)=>C(e,T(t)),z=(e,t)=>{var n={};for(var r in e)L.call(e,r)&&0>t.indexOf(r)&&(n[r]=e[r]);if(null!=e&&I)for(var r of I(e))0>t.indexOf(r)&&R.call(e,r)&&(n[r]=e[r]);return n},B=(s=null!=(o=(r={"../../node_modules/.pnpm/prismjs@1.29.0_patch_hash=vrxx3pzkik6jpmgpayxfjunetu/node_modules/prismjs/prism.js"(e,t){var n=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},r={util:{encode:function e(t){return t instanceof a?new a(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/=u.reach));x+=w.value.length,w=w.next){var k,_=w.value;if(n.length>t.length)return;if(!(_ instanceof a)){var E=1;if(b){if(!(k=o(S,x,t,h))||k.index>=t.length)break;var P=k.index,O=k.index+k[0].length,C=x;for(C+=w.value.length;P>=C;)C+=(w=w.next).value.length;if(C-=w.value.length,x=C,w.value instanceof a)continue;for(var j=w;j!==n.tail&&(Cu.reach&&(u.reach=N);var L=w.prev;if(A&&(L=s(n,L,A),x+=A.length),function(e,t,n){for(var r=t.next,a=0;a1){var R={cause:d+","+p,reach:N};e(t,n,i,w.prev,x,R),u&&R.reach>u.reach&&(u.reach=R.reach)}}}}}}(e,c,t,c.head,0),function(e){for(var t=[],n=e.head.next;n!==e.tail;)t.push(n.value),n=n.next;return t}(c)},hooks:{all:{},add:function(e,t){var n=r.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=r.hooks.all[e];if(n&&n.length)for(var a,o=0;a=n[o++];)a(t)}},Token:a};function a(e,t,n,r){this.type=e,this.content=t,this.alias=n,this.length=0|(r||"").length}function o(e,t,n,r){e.lastIndex=t;var a=e.exec(n);if(a&&r&&a[1]){var o=a[1].length;a.index+=o,a[0]=a[0].slice(o)}return a}function i(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function s(e,t,n){var r=t.next,a={value:n,prev:t,next:r};return t.next=a,r.prev=a,e.length++,a}return a.stringify=function e(t,n){if("string"==typeof t)return t;if(Array.isArray(t)){var a="";return t.forEach(function(t){a+=e(t,n)}),a}var o={type:t.type,content:e(t.content,n),tag:"span",classes:["token",t.type],attributes:{},language:n},i=t.alias;i&&(Array.isArray(i)?Array.prototype.push.apply(o.classes,i):o.classes.push(i)),r.hooks.run("wrap",o);var s="";for(var l in o.attributes)s+=" "+l+'="'+(o.attributes[l]||"").replace(/"/g,""")+'"';return"<"+o.tag+' class="'+o.classes.join(" ")+'"'+s+">"+o.content+""},r}();t.exports=n,n.default=n}},function(){return a||(0,r[A(r)[0]])((a={exports:{}}).exports,a),a.exports})())?P(N(o)):{},((e,t,n,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of A(t))L.call(e,a)||a===n||O(e,a,{get:()=>t[a],enumerable:!(r=j(t,a))||r.enumerable});return e})(!i&&o&&o.__esModule?s:O(s,"default",{value:o,enumerable:!0}),o));B.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},B.languages.markup.tag.inside["attr-value"].inside.entity=B.languages.markup.entity,B.languages.markup.doctype.inside["internal-subset"].inside=B.languages.markup,B.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),Object.defineProperty(B.languages.markup.tag,"addInlined",{value:function(e,t){var n={},n=(n["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:B.languages[t]},n.cdata=/^$/i,{"included-cdata":{pattern://i,inside:n}}),t=(n["language-"+t]={pattern:/[\s\S]+/,inside:B.languages[t]},{});t[e]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,function(){return e}),"i"),lookbehind:!0,greedy:!0,inside:n},B.languages.insertBefore("markup","cdata",t)}}),Object.defineProperty(B.languages.markup.tag,"addAttribute",{value:function(e,t){B.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:B.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),B.languages.html=B.languages.markup,B.languages.mathml=B.languages.markup,B.languages.svg=B.languages.markup,B.languages.xml=B.languages.extend("markup",{}),B.languages.ssml=B.languages.xml,B.languages.atom=B.languages.xml,B.languages.rss=B.languages.xml,l={pattern:/\\[\\(){}[\]^$+*?|.]/,alias:"escape"},u=RegExp((u="(?:[^\\\\-]|"+(c=/\\(?:x[\da-fA-F]{2}|u[\da-fA-F]{4}|u\{[\da-fA-F]+\}|0[0-7]{0,2}|[123][0-7]{2}|c[a-zA-Z]|.)/).source+")")+"-"+u),d={pattern:/(<|')[^<>']+(?=[>']$)/,lookbehind:!0,alias:"variable"},B.languages.regex={"char-class":{pattern:/((?:^|[^\\])(?:\\\\)*)\[(?:[^\\\]]|\\[\s\S])*\]/,lookbehind:!0,inside:{"char-class-negation":{pattern:/(^\[)\^/,lookbehind:!0,alias:"operator"},"char-class-punctuation":{pattern:/^\[|\]$/,alias:"punctuation"},range:{pattern:u,inside:{escape:c,"range-punctuation":{pattern:/-/,alias:"operator"}}},"special-escape":l,"char-set":{pattern:/\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},escape:c}},"special-escape":l,"char-set":{pattern:/\.|\\[wsd]|\\p\{[^{}]+\}/i,alias:"class-name"},backreference:[{pattern:/\\(?![123][0-7]{2})[1-9]/,alias:"keyword"},{pattern:/\\k<[^<>']+>/,alias:"keyword",inside:{"group-name":d}}],anchor:{pattern:/[$^]|\\[ABbGZz]/,alias:"function"},escape:c,group:[{pattern:/\((?:\?(?:<[^<>']+>|'[^<>']+'|[>:]|]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},B.languages.javascript=B.languages.extend("clike",{"class-name":[B.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),B.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,B.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp(/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source+/\//.source+"(?:"+/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source+"|"+/(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source+")"+/(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:B.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:B.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:B.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:B.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:B.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),B.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:B.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),B.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),B.languages.markup&&(B.languages.markup.tag.addInlined("script","javascript"),B.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),B.languages.js=B.languages.javascript,B.languages.actionscript=B.languages.extend("javascript",{keyword:/\b(?:as|break|case|catch|class|const|default|delete|do|dynamic|each|else|extends|final|finally|for|function|get|if|implements|import|in|include|instanceof|interface|internal|is|namespace|native|new|null|override|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|use|var|void|while|with)\b/,operator:/\+\+|--|(?:[+\-*\/%^]|&&?|\|\|?|<>?>?|[!=]=?)=?|[~?@]/}),B.languages.actionscript["class-name"].alias="function",delete B.languages.actionscript.parameter,delete B.languages.actionscript["literal-property"],B.languages.markup&&B.languages.insertBefore("actionscript","string",{xml:{pattern:/(^|[^.])<\/?\w+(?:\s+[^\s>\/=]+=("|')(?:\\[\s\S]|(?!\2)[^\\])*\2)*\s*\/?>/,lookbehind:!0,inside:B.languages.markup}}),f=/#(?!\{).+/,p={pattern:/#\{[^}]+\}/,alias:"variable"},B.languages.coffeescript=B.languages.extend("javascript",{comment:f,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:p}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),B.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:f,interpolation:p}}}),B.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:B.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:p}}]}),B.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete B.languages.coffeescript["template-string"],B.languages.coffee=B.languages.coffeescript,Object.defineProperty(m=B.languages.javadoclike={parameter:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*@(?:arg|arguments|param)\s+)\w+/m,lookbehind:!0},keyword:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*|\{)@[a-z][a-zA-Z-]+\b/m,lookbehind:!0},punctuation:/[{}]/},"addSupport",{value:function(e,t){(e="string"==typeof e?[e]:e).forEach(function(e){var n=function(e){e.inside||(e.inside={}),e.inside.rest=t},r="doc-comment";if(a=B.languages[e]){var a,o=a[r];if((o=o||(a=B.languages.insertBefore(e,"comment",{"doc-comment":{pattern:/(^|[^\\])\/\*\*[^/][\s\S]*?(?:\*\/|$)/,lookbehind:!0,alias:"comment"}}))[r])instanceof RegExp&&(o=a[r]={pattern:o}),Array.isArray(o))for(var i=0,s=o.length;i|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}}),{pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0}),n={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0};e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|RebeccaPurple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,number:n})}(B),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,r="(?:"+n.source+"(?:[ ]+"+t.source+")?|"+t.source+"(?:[ ]+"+n.source+")?)",a=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-])(?:[ \t]*(?:(?![#:])|:))*/.source.replace(//g,function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source}),o=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function i(e,t){return t=(t||"").replace(/m/g,"")+"m",RegExp(/([:\-,[{]\s*(?:\s<>[ \t]+)?)(?:<>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<>/g,function(){return r}).replace(/<>/g,function(){return e}),t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<>/g,function(){return r})),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<>[ \t]+)?)<>(?=\s*:\s)/.source.replace(/<>/g,function(){return r}).replace(/<>/g,function(){return"(?:"+a+"|"+o+")"})),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:i(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:i(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:i(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:i(o),lookbehind:!0,greedy:!0},number:{pattern:i(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(B),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(//g,function(){return t}),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,a=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,function(){return r}),o=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source,i=(e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+a+o+"(?:"+a+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+a+o+")(?:"+a+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+a+")"+o+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+a+"$"),inside:{"table-header":{pattern:RegExp(r),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)|_(?:(?!_))+_)+__\b|\*\*(?:(?!\*)|\*(?:(?!\*))+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)|__(?:(?!_))+__)+_\b|\*(?:(?!\*)|\*\*(?:(?!\*))+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\]))+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach(function(t){["url","bold","italic","strike","code-snippet"].forEach(function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])})}),e.hooks.add("after-tokenize",function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,r=t.length;n",quot:'"'},l=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(B),B.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:B.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},B.hooks.add("after-tokenize",function(e){if("graphql"===e.language)for(var t=e.tokens.filter(function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type}),n=0;n?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,r=t.inside.interpolation,a=r.inside["interpolation-punctuation"],o=r.pattern.source;function i(t,r){if(e.languages[t])return{pattern:RegExp("((?:"+r+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function s(t,n,r){return t={code:t,grammar:n,language:r},e.hooks.run("before-tokenize",t),t.tokens=e.tokenize(t.code,t.grammar),e.hooks.run("after-tokenize",t),t.tokens}e.languages.javascript["template-string"]=[i("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),i("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),i("svg",/\bsvg/.source),i("markdown",/\b(?:markdown|md)/.source),i("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),i("sql",/\bsql/.source),t].filter(Boolean);var l={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};e.hooks.add("after-tokenize",function(t){t.language in l&&function t(n){for(var i=0,l=n.length;i=d.length)return;var i,l,f,p,m,g,h,b=n[o];"string"==typeof b||"string"==typeof b.content?(i=d[c],-1!==(h=(g="string"==typeof b?b:b.content).indexOf(i))&&(++c,l=g.substring(0,h),m=u[i],f=void 0,(p={})["interpolation-punctuation"]=a,3===(p=e.tokenize(m,p)).length&&((f=[1,1]).push.apply(f,s(p[1],e.languages.javascript,"javascript")),p.splice.apply(p,f)),f=new e.Token("interpolation",p,r.alias,m),p=g.substring(h+i.length),m=[],l&&m.push(l),m.push(f),p&&(t(g=[p]),m.push.apply(m,g)),"string"==typeof b?(n.splice.apply(n,[o,1].concat(m)),o+=m.length-1):b.content=m)):Array.isArray(h=b.content)?t(h):t([h])}}(l),new e.Token(i,l,"language-"+i,t)}(u,d,f))):t(c):"string"!=typeof c&&t([c]))}}(t.tokens)})}(B),B.languages.typescript=B.languages.extend("javascript",{"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),B.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete B.languages.typescript.parameter,delete B.languages.typescript["literal-property"],h=B.languages.extend("typescript",{}),delete h["class-name"],B.languages.typescript["class-name"].inside=h,B.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:h}}}}),B.languages.ts=B.languages.typescript,b=B.languages.javascript,v="(@(?:arg|argument|param|property)\\s+(?:"+(y=/\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})+\}/.source)+"\\s+)?)",B.languages.jsdoc=B.languages.extend("javadoclike",{parameter:{pattern:RegExp(v+/(?:(?!\s)[$\w\xA0-\uFFFF.])+(?=\s|$)/.source),lookbehind:!0,inside:{punctuation:/\./}}}),B.languages.insertBefore("jsdoc","keyword",{"optional-parameter":{pattern:RegExp(v+/\[(?:(?!\s)[$\w\xA0-\uFFFF.])+(?:=[^[\]]+)?\](?=\s|$)/.source),lookbehind:!0,inside:{parameter:{pattern:/(^\[)[$\w\xA0-\uFFFF\.]+/,lookbehind:!0,inside:{punctuation:/\./}},code:{pattern:/(=)[\s\S]*(?=\]$)/,lookbehind:!0,inside:b,alias:"language-javascript"},punctuation:/[=[\]]/}},"class-name":[{pattern:RegExp(/(@(?:augments|class|extends|interface|memberof!?|template|this|typedef)\s+(?:\s+)?)[A-Z]\w*(?:\.[A-Z]\w*)*/.source.replace(//g,function(){return y})),lookbehind:!0,inside:{punctuation:/\./}},{pattern:RegExp("(@[a-z]+\\s+)"+y),lookbehind:!0,inside:{string:b.string,number:b.number,boolean:b.boolean,keyword:B.languages.typescript.keyword,operator:/=>|\.\.\.|[&|?:*]/,punctuation:/[.,;=<>{}()[\]]/}}],example:{pattern:/(@example\s+(?!\s))(?:[^@\s]|\s+(?!\s))+?(?=\s*(?:\*\s*)?(?:@\w|\*\/))/,lookbehind:!0,inside:{code:{pattern:/^([\t ]*(?:\*\s*)?)\S.*$/m,lookbehind:!0,inside:b,alias:"language-javascript"}}}}),B.languages.javadoclike.addSupport("javascript",B.languages.jsdoc),B.languages.flow=B.languages.extend("javascript",{}),B.languages.insertBefore("flow","keyword",{type:[{pattern:/\b(?:[Bb]oolean|Function|[Nn]umber|[Ss]tring|[Ss]ymbol|any|mixed|null|void)\b/,alias:"class-name"}]}),B.languages.flow["function-variable"].pattern=/(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=\s*(?:function\b|(?:\([^()]*\)(?:\s*:\s*\w+)?|(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/i,delete B.languages.flow.parameter,B.languages.insertBefore("flow","operator",{"flow-punctuation":{pattern:/\{\||\|\}/,alias:"punctuation"}}),Array.isArray(B.languages.flow.keyword)||(B.languages.flow.keyword=[B.languages.flow.keyword]),B.languages.flow.keyword.unshift({pattern:/(^|[^$]\b)(?:Class|declare|opaque|type)\b(?!\$)/,lookbehind:!0},{pattern:/(^|[^$]\B)\$(?:Diff|Enum|Exact|Keys|ObjMap|PropertyType|Record|Shape|Subtype|Supertype|await)\b(?!\$)/,lookbehind:!0}),B.languages.n4js=B.languages.extend("javascript",{keyword:/\b(?:Array|any|boolean|break|case|catch|class|const|constructor|continue|debugger|declare|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|module|new|null|number|package|private|protected|public|return|set|static|string|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/}),B.languages.insertBefore("n4js","constant",{annotation:{pattern:/@+\w+/,alias:"operator"}}),B.languages.n4jsd=B.languages.n4js,function(e){function t(e,t){return RegExp(e.replace(//g,function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source}),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:(?:\s*,\s*(?:\*\s*as\s+|\{[^{}]*\}))?|\*\s*as\s+|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],r=0;r*\.{3}(?:[^{}]|)*\})/.source;function o(e,t){return RegExp(e=e.replace(//g,function(){return n}).replace(//g,function(){return r}).replace(//g,function(){return a}),t)}a=o(a).source,e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=o(/<\/?(?:[\w.:-]+(?:+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:o(//.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:o(/=/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var i=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(i).join(""):""};e.hooks.add("after-tokenize",function(t){"jsx"!==t.language&&"tsx"!==t.language||function t(n){for(var r=[],a=0;a"!==o.content[o.content.length-1].content&&r.push({tagName:i(o.content[0].content[1]),openedBraces:0}):0]=?/,punctuation:/[(),]/}},literal:{pattern:/#(?:colorLiteral|column|dsohandle|file(?:ID|Literal|Path)?|function|imageLiteral|line)\b/,alias:"constant"},"other-directive":{pattern:/#\w+\b/,alias:"property"},attribute:{pattern:/@\w+/,alias:"atrule"},"function-definition":{pattern:/(\bfunc\s+)\w+/,lookbehind:!0,alias:"function"},label:{pattern:/\b(break|continue)\s+\w+|\b[a-zA-Z_]\w*(?=\s*:\s*(?:for|repeat|while)\b)/,lookbehind:!0,alias:"important"},keyword:/\b(?:Any|Protocol|Self|Type|actor|as|assignment|associatedtype|associativity|async|await|break|case|catch|class|continue|convenience|default|defer|deinit|didSet|do|dynamic|else|enum|extension|fallthrough|fileprivate|final|for|func|get|guard|higherThan|if|import|in|indirect|infix|init|inout|internal|is|isolated|lazy|left|let|lowerThan|mutating|none|nonisolated|nonmutating|open|operator|optional|override|postfix|precedencegroup|prefix|private|protocol|public|repeat|required|rethrows|return|right|safe|self|set|some|static|struct|subscript|super|switch|throw|throws|try|typealias|unowned|unsafe|var|weak|where|while|willSet)\b/,boolean:/\b(?:false|true)\b/,nil:{pattern:/\bnil\b/,alias:"constant"},"short-argument":/\$\d+\b/,omit:{pattern:/\b_\b/,alias:"keyword"},number:/\b(?:[\d_]+(?:\.[\de_]+)?|0x[a-f0-9_]+(?:\.[a-f0-9p_]+)?|0b[01_]+|0o[0-7_]+)\b/i,"class-name":/\b[A-Z](?:[A-Z_\d]*[a-z]\w*)?\b/,function:/\b[a-z_]\w*(?=\s*\()/i,constant:/\b(?:[A-Z_]{2,}|k[A-Z][A-Za-z_]+)\b/,operator:/[-+*/%=!<>&|^~?]+|\.[.\-+*/%=!<>&|^~?]+/,punctuation:/[{}[\]();,.:\\]/},B.languages.swift["string-literal"].forEach(function(e){e.inside.interpolation.inside=B.languages.swift}),B.languages.kotlin=B.languages.extend("clike",{keyword:{pattern:/(^|[^.])\b(?:abstract|actual|annotation|as|break|by|catch|class|companion|const|constructor|continue|crossinline|data|do|dynamic|else|enum|expect|external|final|finally|for|fun|get|if|import|in|infix|init|inline|inner|interface|internal|is|lateinit|noinline|null|object|open|operator|out|override|package|private|protected|public|reified|return|sealed|set|super|suspend|tailrec|this|throw|to|try|typealias|val|var|vararg|when|where|while)\b/,lookbehind:!0},function:[{pattern:/(?:`[^\r\n`]+`|\b\w+)(?=\s*\()/,greedy:!0},{pattern:/(\.)(?:`[^\r\n`]+`|\w+)(?=\s*\{)/,lookbehind:!0,greedy:!0}],number:/\b(?:0[xX][\da-fA-F]+(?:_[\da-fA-F]+)*|0[bB][01]+(?:_[01]+)*|\d+(?:_\d+)*(?:\.\d+(?:_\d+)*)?(?:[eE][+-]?\d+(?:_\d+)*)?[fFL]?)\b/,operator:/\+[+=]?|-[-=>]?|==?=?|!(?:!|==?)?|[\/*%<>]=?|[?:]:?|\.\.|&&|\|\||\b(?:and|inv|or|shl|shr|ushr|xor)\b/}),delete B.languages.kotlin["class-name"],w={"interpolation-punctuation":{pattern:/^\$\{?|\}$/,alias:"punctuation"},expression:{pattern:/[\s\S]+/,inside:B.languages.kotlin}},B.languages.insertBefore("kotlin","string",{"string-literal":[{pattern:/"""(?:[^$]|\$(?:(?!\{)|\{[^{}]*\}))*?"""/,alias:"multiline",inside:{interpolation:{pattern:/\$(?:[a-z_]\w*|\{[^{}]*\})/i,inside:w},string:/[\s\S]+/}},{pattern:/"(?:[^"\\\r\n$]|\\.|\$(?:(?!\{)|\{[^{}]*\}))*"/,alias:"singleline",inside:{interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$(?:[a-z_]\w*|\{[^{}]*\})/i,lookbehind:!0,inside:w},string:/[\s\S]+/}}],char:{pattern:/'(?:[^'\\\r\n]|\\(?:.|u[a-fA-F0-9]{0,4}))'/,greedy:!0}}),delete B.languages.kotlin.string,B.languages.insertBefore("kotlin","keyword",{annotation:{pattern:/\B@(?:\w+:)?(?:[A-Z]\w*|\[[^\]]+\])/,alias:"builtin"}}),B.languages.insertBefore("kotlin","function",{label:{pattern:/\b\w+@|@\w+\b/,alias:"symbol"}}),B.languages.kt=B.languages.kotlin,B.languages.kts=B.languages.kotlin,B.languages.c=B.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),B.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),B.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},B.languages.c.string],char:B.languages.c.char,comment:B.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:B.languages.c}}}}),B.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete B.languages.c.boolean,B.languages.objectivec=B.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete B.languages.objectivec["class-name"],B.languages.objc=B.languages.objectivec,B.languages.reason=B.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),B.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete B.languages.reason.function,function(e){for(var t=/\/\*(?:[^*/]|\*(?!\/)|\/(?!\*)|)*\*\//.source,n=0;n<2;n++)t=t.replace(//g,function(){return t});t=t.replace(//g,function(){return/[^\s\S]/.source}),e.languages.rust={comment:[{pattern:RegExp(/(^|[^\\])/.source+t),lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/b?"(?:\\[\s\S]|[^\\"])*"|b?r(#*)"(?:[^"]|"(?!\1))*"\1/,greedy:!0},char:{pattern:/b?'(?:\\(?:x[0-7][\da-fA-F]|u\{(?:[\da-fA-F]_*){1,6}\}|.)|[^\\\r\n\t'])'/,greedy:!0},attribute:{pattern:/#!?\[(?:[^\[\]"]|"(?:\\[\s\S]|[^\\"])*")*\]/,greedy:!0,alias:"attr-name",inside:{string:null}},"closure-params":{pattern:/([=(,:]\s*|\bmove\s*)\|[^|]*\||\|[^|]*\|(?=\s*(?:\{|->))/,lookbehind:!0,greedy:!0,inside:{"closure-punctuation":{pattern:/^\||\|$/,alias:"punctuation"},rest:null}},"lifetime-annotation":{pattern:/'\w+/,alias:"symbol"},"fragment-specifier":{pattern:/(\$\w+:)[a-z]+/,lookbehind:!0,alias:"punctuation"},variable:/\$\w+/,"function-definition":{pattern:/(\bfn\s+)\w+/,lookbehind:!0,alias:"function"},"type-definition":{pattern:/(\b(?:enum|struct|trait|type|union)\s+)\w+/,lookbehind:!0,alias:"class-name"},"module-declaration":[{pattern:/(\b(?:crate|mod)\s+)[a-z][a-z_\d]*/,lookbehind:!0,alias:"namespace"},{pattern:/(\b(?:crate|self|super)\s*)::\s*[a-z][a-z_\d]*\b(?:\s*::(?:\s*[a-z][a-z_\d]*\s*::)*)?/,lookbehind:!0,alias:"namespace",inside:{punctuation:/::/}}],keyword:[/\b(?:Self|abstract|as|async|await|become|box|break|const|continue|crate|do|dyn|else|enum|extern|final|fn|for|if|impl|in|let|loop|macro|match|mod|move|mut|override|priv|pub|ref|return|self|static|struct|super|trait|try|type|typeof|union|unsafe|unsized|use|virtual|where|while|yield)\b/,/\b(?:bool|char|f(?:32|64)|[ui](?:8|16|32|64|128|size)|str)\b/],function:/\b[a-z_]\w*(?=\s*(?:::\s*<|\())/,macro:{pattern:/\b\w+!/,alias:"property"},constant:/\b[A-Z_][A-Z_\d]+\b/,"class-name":/\b[A-Z]\w*\b/,namespace:{pattern:/(?:\b[a-z][a-z_\d]*\s*::\s*)*\b[a-z][a-z_\d]*\s*::(?!\s*<)/,inside:{punctuation:/::/}},number:/\b(?:0x[\dA-Fa-f](?:_?[\dA-Fa-f])*|0o[0-7](?:_?[0-7])*|0b[01](?:_?[01])*|(?:(?:\d(?:_?\d)*)?\.)?\d(?:_?\d)*(?:[Ee][+-]?\d+)?)(?:_?(?:f32|f64|[iu](?:8|16|32|64|size)?))?\b/,boolean:/\b(?:false|true)\b/,punctuation:/->|\.\.=|\.{1,3}|::|[{}[\];(),:]/,operator:/[-+*\/%!^]=?|=[=>]?|&[&=]?|\|[|=]?|<>?=?|[@?]/},e.languages.rust["closure-params"].inside.rest=e.languages.rust,e.languages.rust.attribute.inside.string=e.languages.rust.string}(B),B.languages.go=B.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),B.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete B.languages.go["class-name"],x=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,k=/\b(?!)\w+(?:\s*\.\s*\w+)*\b/.source.replace(//g,function(){return x.source}),B.languages.cpp=B.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!)\w+/.source.replace(//g,function(){return x.source})),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:x,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),B.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/(?:\s*:\s*)?|:\s*/.source.replace(//g,function(){return k})+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),B.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:B.languages.cpp}}}}),B.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),B.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:B.languages.extend("cpp",{})}}),B.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},B.languages.cpp["base-clause"]),B.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},B.languages.python["string-interpolation"].inside.interpolation.inside.rest=B.languages.python,B.languages.py=B.languages.python,B.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},B.languages.webmanifest=B.languages.json,((e,t)=>{for(var n in t)O(e,n,{get:t[n],enumerable:!0})})({},{dracula:()=>$,duotoneDark:()=>U,duotoneLight:()=>H,github:()=>q,gruvboxMaterialDark:()=>es,gruvboxMaterialLight:()=>el,jettwaveDark:()=>er,jettwaveLight:()=>ea,nightOwl:()=>Z,nightOwlLight:()=>W,oceanicNext:()=>K,okaidia:()=>Y,oneDark:()=>eo,oneLight:()=>ei,palenight:()=>Q,shadesOfPurple:()=>X,synthwave84:()=>J,ultramin:()=>ee,vsDark:()=>et,vsLight:()=>en});var $={plain:{color:"#F8F8F2",backgroundColor:"#282A36"},styles:[{types:["prolog","constant","builtin"],style:{color:"rgb(189, 147, 249)"}},{types:["inserted","function"],style:{color:"rgb(80, 250, 123)"}},{types:["deleted"],style:{color:"rgb(255, 85, 85)"}},{types:["changed"],style:{color:"rgb(255, 184, 108)"}},{types:["punctuation","symbol"],style:{color:"rgb(248, 248, 242)"}},{types:["string","char","tag","selector"],style:{color:"rgb(255, 121, 198)"}},{types:["keyword","variable"],style:{color:"rgb(189, 147, 249)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(98, 114, 164)"}},{types:["attr-name"],style:{color:"rgb(241, 250, 140)"}}]},U={plain:{backgroundColor:"#2a2734",color:"#9a86fd"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#6c6783"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#e09142"}},{types:["property","function"],style:{color:"#9a86fd"}},{types:["tag-id","selector","atrule-id"],style:{color:"#eeebff"}},{types:["attr-name"],style:{color:"#c4b9fe"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule","placeholder","variable"],style:{color:"#ffcc99"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#c4b9fe"}}]},H={plain:{backgroundColor:"#faf8f5",color:"#728fcb"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#b6ad9a"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#063289"}},{types:["property","function"],style:{color:"#b29762"}},{types:["tag-id","selector","atrule-id"],style:{color:"#2d2006"}},{types:["attr-name"],style:{color:"#896724"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","atrule"],style:{color:"#728fcb"}},{types:["placeholder","variable"],style:{color:"#93abdc"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#896724"}}]},q={plain:{color:"#393A34",backgroundColor:"#f6f8fa"},styles:[{types:["comment","prolog","doctype","cdata"],style:{color:"#999988",fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}},{types:["string","attr-value"],style:{color:"#e3116c"}},{types:["punctuation","operator"],style:{color:"#393A34"}},{types:["entity","url","symbol","number","boolean","variable","constant","property","regex","inserted"],style:{color:"#36acaa"}},{types:["atrule","keyword","attr-name","selector"],style:{color:"#00a4db"}},{types:["function","deleted","tag"],style:{color:"#d73a49"}},{types:["function-variable"],style:{color:"#6f42c1"}},{types:["tag","selector","keyword"],style:{color:"#00009f"}}]},Z={plain:{color:"#d6deeb",backgroundColor:"#011627"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(99, 119, 119)",fontStyle:"italic"}},{types:["string","url"],style:{color:"rgb(173, 219, 103)"}},{types:["variable"],style:{color:"rgb(214, 222, 235)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation"],style:{color:"rgb(199, 146, 234)"}},{types:["selector","doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(255, 203, 139)"}},{types:["tag","operator","keyword"],style:{color:"rgb(127, 219, 202)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["property"],style:{color:"rgb(128, 203, 196)"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}}]},W={plain:{color:"#403f53",backgroundColor:"#FBFBFB"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)",fontStyle:"italic"}},{types:["inserted","attr-name"],style:{color:"rgb(72, 118, 214)",fontStyle:"italic"}},{types:["comment"],style:{color:"rgb(152, 159, 177)",fontStyle:"italic"}},{types:["string","builtin","char","constant","url"],style:{color:"rgb(72, 118, 214)"}},{types:["variable"],style:{color:"rgb(201, 103, 101)"}},{types:["number"],style:{color:"rgb(170, 9, 130)"}},{types:["punctuation"],style:{color:"rgb(153, 76, 195)"}},{types:["function","selector","doctype"],style:{color:"rgb(153, 76, 195)",fontStyle:"italic"}},{types:["class-name"],style:{color:"rgb(17, 17, 17)"}},{types:["tag"],style:{color:"rgb(153, 76, 195)"}},{types:["operator","property","keyword","namespace"],style:{color:"rgb(12, 150, 155)"}},{types:["boolean"],style:{color:"rgb(188, 84, 84)"}}]},V="#c5a5c5",G="#8dc891",K={plain:{backgroundColor:"#282c34",color:"#ffffff"},styles:[{types:["attr-name"],style:{color:V}},{types:["attr-value"],style:{color:G}},{types:["comment","block-comment","prolog","doctype","cdata","shebang"],style:{color:"#999999"}},{types:["property","number","function-name","constant","symbol","deleted"],style:{color:"#5a9bcf"}},{types:["boolean"],style:{color:"#ff8b50"}},{types:["tag"],style:{color:"#fc929e"}},{types:["string"],style:{color:G}},{types:["punctuation"],style:{color:G}},{types:["selector","char","builtin","inserted"],style:{color:"#D8DEE9"}},{types:["function"],style:{color:"#79b6f2"}},{types:["operator","entity","url","variable"],style:{color:"#d7deea"}},{types:["keyword"],style:{color:V}},{types:["atrule","class-name"],style:{color:"#FAC863"}},{types:["important"],style:{fontWeight:"400"}},{types:["bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["namespace"],style:{opacity:.7}}]},Y={plain:{color:"#f8f8f2",backgroundColor:"#272822"},styles:[{types:["changed"],style:{color:"rgb(162, 191, 252)",fontStyle:"italic"}},{types:["deleted"],style:{color:"#f92672",fontStyle:"italic"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)",fontStyle:"italic"}},{types:["comment"],style:{color:"#8292a2",fontStyle:"italic"}},{types:["string","url"],style:{color:"#a6e22e"}},{types:["variable"],style:{color:"#f8f8f2"}},{types:["number"],style:{color:"#ae81ff"}},{types:["builtin","char","constant","function","class-name"],style:{color:"#e6db74"}},{types:["punctuation"],style:{color:"#f8f8f2"}},{types:["selector","doctype"],style:{color:"#a6e22e",fontStyle:"italic"}},{types:["tag","operator","keyword"],style:{color:"#66d9ef"}},{types:["boolean"],style:{color:"#ae81ff"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)",opacity:.7}},{types:["tag","property"],style:{color:"#f92672"}},{types:["attr-name"],style:{color:"#a6e22e !important"}},{types:["doctype"],style:{color:"#8292a2"}},{types:["rule"],style:{color:"#e6db74"}}]},Q={plain:{color:"#bfc7d5",backgroundColor:"#292d3e"},styles:[{types:["comment"],style:{color:"rgb(105, 112, 152)",fontStyle:"italic"}},{types:["string","inserted"],style:{color:"rgb(195, 232, 141)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation","selector"],style:{color:"rgb(199, 146, 234)"}},{types:["variable"],style:{color:"rgb(191, 199, 213)"}},{types:["class-name","attr-name"],style:{color:"rgb(255, 203, 107)"}},{types:["tag","deleted"],style:{color:"rgb(255, 85, 114)"}},{types:["operator"],style:{color:"rgb(137, 221, 255)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["keyword"],style:{fontStyle:"italic"}},{types:["doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}},{types:["url"],style:{color:"rgb(221, 221, 221)"}}]},X={plain:{color:"#9EFEFF",backgroundColor:"#2D2A55"},styles:[{types:["changed"],style:{color:"rgb(255, 238, 128)"}},{types:["deleted"],style:{color:"rgba(239, 83, 80, 0.56)"}},{types:["inserted"],style:{color:"rgb(173, 219, 103)"}},{types:["comment"],style:{color:"rgb(179, 98, 255)",fontStyle:"italic"}},{types:["punctuation"],style:{color:"rgb(255, 255, 255)"}},{types:["constant"],style:{color:"rgb(255, 98, 140)"}},{types:["string","url"],style:{color:"rgb(165, 255, 144)"}},{types:["variable"],style:{color:"rgb(255, 238, 128)"}},{types:["number","boolean"],style:{color:"rgb(255, 98, 140)"}},{types:["attr-name"],style:{color:"rgb(255, 180, 84)"}},{types:["keyword","operator","property","namespace","tag","selector","doctype"],style:{color:"rgb(255, 157, 0)"}},{types:["builtin","char","constant","function","class-name"],style:{color:"rgb(250, 208, 0)"}}]},J={plain:{backgroundColor:"linear-gradient(to bottom, #2a2139 75%, #34294f)",backgroundImage:"#34294f",color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"},styles:[{types:["comment","block-comment","prolog","doctype","cdata"],style:{color:"#495495",fontStyle:"italic"}},{types:["punctuation"],style:{color:"#ccc"}},{types:["tag","attr-name","namespace","number","unit","hexcode","deleted"],style:{color:"#e2777a"}},{types:["property","selector"],style:{color:"#72f1b8",textShadow:"0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475"}},{types:["function-name"],style:{color:"#6196cc"}},{types:["boolean","selector-id","function"],style:{color:"#fdfdfd",textShadow:"0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975"}},{types:["class-name","maybe-class-name","builtin"],style:{color:"#fff5f6",textShadow:"0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75"}},{types:["constant","symbol"],style:{color:"#f92aad",textShadow:"0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3"}},{types:["important","atrule","keyword","selector-class"],style:{color:"#f4eee4",textShadow:"0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575"}},{types:["string","char","attr-value","regex","variable"],style:{color:"#f87c32"}},{types:["parameter"],style:{fontStyle:"italic"}},{types:["entity","url"],style:{color:"#67cdcc"}},{types:["operator"],style:{color:"ffffffee"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["entity"],style:{cursor:"help"}},{types:["inserted"],style:{color:"green"}}]},ee={plain:{color:"#282a2e",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(197, 200, 198)"}},{types:["string","number","builtin","variable"],style:{color:"rgb(150, 152, 150)"}},{types:["class-name","function","tag","attr-name"],style:{color:"rgb(40, 42, 46)"}}]},et={plain:{color:"#9CDCFE",backgroundColor:"#1E1E1E"},styles:[{types:["prolog"],style:{color:"rgb(0, 0, 128)"}},{types:["comment"],style:{color:"rgb(106, 153, 85)"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"rgb(86, 156, 214)"}},{types:["number","inserted"],style:{color:"rgb(181, 206, 168)"}},{types:["constant"],style:{color:"rgb(100, 102, 149)"}},{types:["attr-name","variable"],style:{color:"rgb(156, 220, 254)"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"rgb(206, 145, 120)"}},{types:["selector"],style:{color:"rgb(215, 186, 125)"}},{types:["tag"],style:{color:"rgb(78, 201, 176)"}},{types:["tag"],languages:["markup"],style:{color:"rgb(86, 156, 214)"}},{types:["punctuation","operator"],style:{color:"rgb(212, 212, 212)"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"rgb(220, 220, 170)"}},{types:["class-name"],style:{color:"rgb(78, 201, 176)"}},{types:["char"],style:{color:"rgb(209, 105, 105)"}}]},en={plain:{color:"#000000",backgroundColor:"#ffffff"},styles:[{types:["comment"],style:{color:"rgb(0, 128, 0)"}},{types:["builtin"],style:{color:"rgb(0, 112, 193)"}},{types:["number","variable","inserted"],style:{color:"rgb(9, 134, 88)"}},{types:["operator"],style:{color:"rgb(0, 0, 0)"}},{types:["constant","char"],style:{color:"rgb(129, 31, 63)"}},{types:["tag"],style:{color:"rgb(128, 0, 0)"}},{types:["attr-name"],style:{color:"rgb(255, 0, 0)"}},{types:["deleted","string"],style:{color:"rgb(163, 21, 21)"}},{types:["changed","punctuation"],style:{color:"rgb(4, 81, 165)"}},{types:["function","keyword"],style:{color:"rgb(0, 0, 255)"}},{types:["class-name"],style:{color:"rgb(38, 127, 153)"}}]},er={plain:{color:"#f8fafc",backgroundColor:"#011627"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#569CD6"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#f8fafc"}},{types:["attr-name","variable"],style:{color:"#9CDCFE"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#cbd5e1"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#D4D4D4"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#7dd3fc"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},ea={plain:{color:"#0f172a",backgroundColor:"#f1f5f9"},styles:[{types:["prolog"],style:{color:"#000080"}},{types:["comment"],style:{color:"#6A9955"}},{types:["builtin","changed","keyword","interpolation-punctuation"],style:{color:"#0c4a6e"}},{types:["number","inserted"],style:{color:"#B5CEA8"}},{types:["constant"],style:{color:"#0f172a"}},{types:["attr-name","variable"],style:{color:"#0c4a6e"}},{types:["deleted","string","attr-value","template-punctuation"],style:{color:"#64748b"}},{types:["selector"],style:{color:"#D7BA7D"}},{types:["tag"],style:{color:"#0ea5e9"}},{types:["tag"],languages:["markup"],style:{color:"#0ea5e9"}},{types:["punctuation","operator"],style:{color:"#475569"}},{types:["punctuation"],languages:["markup"],style:{color:"#808080"}},{types:["function"],style:{color:"#0e7490"}},{types:["class-name"],style:{color:"#0ea5e9"}},{types:["char"],style:{color:"#D16969"}}]},eo={plain:{backgroundColor:"hsl(220, 13%, 18%)",color:"hsl(220, 14%, 71%)",textShadow:"0 1px rgba(0, 0, 0, 0.3)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(220, 10%, 40%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(220, 14%, 71%)"}},{types:["attr-name","class-name","maybe-class-name","boolean","constant","number","atrule"],style:{color:"hsl(29, 54%, 61%)"}},{types:["keyword"],style:{color:"hsl(286, 60%, 67%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(355, 65%, 65%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value"],style:{color:"hsl(95, 38%, 62%)"}},{types:["variable","operator","function"],style:{color:"hsl(207, 82%, 66%)"}},{types:["url"],style:{color:"hsl(187, 47%, 55%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(220, 14%, 71%)"}}]},ei={plain:{backgroundColor:"hsl(230, 1%, 98%)",color:"hsl(230, 8%, 24%)"},styles:[{types:["comment","prolog","cdata"],style:{color:"hsl(230, 4%, 64%)"}},{types:["doctype","punctuation","entity"],style:{color:"hsl(230, 8%, 24%)"}},{types:["attr-name","class-name","boolean","constant","number","atrule"],style:{color:"hsl(35, 99%, 36%)"}},{types:["keyword"],style:{color:"hsl(301, 63%, 40%)"}},{types:["property","tag","symbol","deleted","important"],style:{color:"hsl(5, 74%, 59%)"}},{types:["selector","string","char","builtin","inserted","regex","attr-value","punctuation"],style:{color:"hsl(119, 34%, 47%)"}},{types:["variable","operator","function"],style:{color:"hsl(221, 87%, 60%)"}},{types:["url"],style:{color:"hsl(198, 99%, 37%)"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"hsl(230, 8%, 24%)"}}]},es={plain:{color:"#ebdbb2",backgroundColor:"#292828"},styles:[{types:["imports","class-name","maybe-class-name","constant","doctype","builtin","function"],style:{color:"#d8a657"}},{types:["property-access"],style:{color:"#7daea3"}},{types:["tag"],style:{color:"#e78a4e"}},{types:["attr-name","char","url","regex"],style:{color:"#a9b665"}},{types:["attr-value","string"],style:{color:"#89b482"}},{types:["comment","prolog","cdata","operator","inserted"],style:{color:"#a89984"}},{types:["delimiter","boolean","keyword","selector","important","atrule","property","variable","deleted"],style:{color:"#ea6962"}},{types:["entity","number","symbol"],style:{color:"#d3869b"}}]},el={plain:{color:"#654735",backgroundColor:"#f9f5d7"},styles:[{types:["delimiter","boolean","keyword","selector","important","atrule","property","variable","deleted"],style:{color:"#af2528"}},{types:["imports","class-name","maybe-class-name","constant","doctype","builtin"],style:{color:"#b4730e"}},{types:["string","attr-value"],style:{color:"#477a5b"}},{types:["property-access"],style:{color:"#266b79"}},{types:["function","attr-name","char","url"],style:{color:"#72761e"}},{types:["tag"],style:{color:"#b94c07"}},{types:["comment","prolog","cdata","operator","inserted"],style:{color:"#a89984"}},{types:["entity","number","symbol"],style:{color:"#924f79"}}]},ec=e=>(0,_.useCallback)(t=>{var{className:n,style:r,line:a}=t;let o=F(M({},z(t,["className","style","line"])),{className:(0,E.Z)("token-line",n)});return"object"==typeof e&&"plain"in e&&(o.style=e.plain),"object"==typeof r&&(o.style=M(M({},o.style||{}),r)),o},[e]),eu=e=>{let t=(0,_.useCallback)(({types:t,empty:n})=>{if(null!=e)return 1===t.length&&"plain"===t[0]?null!=n?{display:"inline-block"}:void 0:1===t.length&&null!=n?e[t[0]]:Object.assign(null!=n?{display:"inline-block"}:{},...t.map(t=>e[t]))},[e]);return(0,_.useCallback)(e=>{var{token:n,className:r,style:a}=e;let o=F(M({},z(e,["token","className","style"])),{className:(0,E.Z)("token",...n.types,r),children:n.content,style:t(n)});return null!=a&&(o.style=M(M({},o.style||{}),a)),o},[t])},ed=/\r\n|\r|\n/,ef=e=>{0===e.length?e.push({types:["plain"],content:"\n",empty:!0}):1===e.length&&""===e[0].content&&(e[0].content="\n",e[0].empty=!0)},ep=(e,t)=>{let n=e.length;return n>0&&e[n-1]===t?e:e.concat(t)},em=e=>{let t=[[]],n=[e],r=[0],a=[e.length],o=0,i=0,s=[],l=[s];for(;i>-1;){for(;(o=r[i]++)0?c:["plain"],e=u):(c=ep(c,u.type),u.alias&&(c=ep(c,u.alias)),e=u.content),"string"!=typeof e){i++,t.push(c),n.push(e),r.push(0),a.push(e.length);continue}let d=e.split(ed),f=d.length;s.push({types:c,content:d[0]});for(let e=1;e(0,_.useMemo)(()=>{if(null==n)return em([t]);let a={code:t,grammar:n,language:r,tokens:[]};return e.hooks.run("before-tokenize",a),a.tokens=e.tokenize(t,n),e.hooks.run("after-tokenize",a),em(a.tokens)},[t,n,r,e]),eh=(e,t)=>{let{plain:n}=e,r=e.styles.reduce((e,n)=>{let{languages:r,style:a}=n;return r&&!r.includes(t)||n.types.forEach(t=>{let n=M(M({},e[t]),a);e[t]=n}),e},{});return r.root=n,r.plain=F(M({},n),{backgroundColor:void 0}),r},eb=({children:e,language:t,code:n,theme:r,prism:a})=>{let o=t.toLowerCase(),i=eh(r,o),s=ec(i),l=eu(i),c=a.languages[o];return e({tokens:eg({prism:a,language:o,code:n,grammar:c}),className:`prism-code language-${o}`,style:null!=i?i.root:{},getLineProps:s,getTokenProps:l})},ey=e=>(0,_.createElement)(eb,F(M({},e),{prism:e.prism||B,theme:e.theme||et,code:e.code,language:e.language}))},1835:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});function r(e,t){if(!e)throw Error("Invariant failed")}},8395:function(e,t,n){"use strict";n.r(t),n.d(t,{__addDisposableResource:function(){return R},__assign:function(){return o},__asyncDelegator:function(){return E},__asyncGenerator:function(){return _},__asyncValues:function(){return P},__await:function(){return k},__awaiter:function(){return m},__classPrivateFieldGet:function(){return I},__classPrivateFieldIn:function(){return L},__classPrivateFieldSet:function(){return N},__createBinding:function(){return h},__decorate:function(){return s},__disposeResources:function(){return M},__esDecorate:function(){return c},__exportStar:function(){return b},__extends:function(){return a},__generator:function(){return g},__importDefault:function(){return A},__importStar:function(){return T},__makeTemplateObject:function(){return O},__metadata:function(){return p},__param:function(){return l},__propKey:function(){return d},__read:function(){return v},__rest:function(){return i},__rewriteRelativeImportExtension:function(){return F},__runInitializers:function(){return u},__setFunctionName:function(){return f},__spread:function(){return S},__spreadArray:function(){return x},__spreadArrays:function(){return w},__values:function(){return y},default:function(){return z}});var r=function(e,t){return(r=Object.setPrototypeOf||({__proto__:[]})instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])})(e,t)};function a(e,t){if("function"!=typeof t&&null!==t)throw TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var o=function(){return(o=Object.assign||function(e){for(var t,n=1,r=arguments.length;nt.indexOf(r)&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var a=0,r=Object.getOwnPropertySymbols(e);at.indexOf(r[a])&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]]);return n}function s(e,t,n,r){var a,o=arguments.length,i=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(i=(o<3?a(i):o>3?a(t,n,i):a(t,n))||i);return o>3&&i&&Object.defineProperty(t,n,i),i}function l(e,t){return function(n,r){t(n,r,e)}}function c(e,t,n,r,a,o){function i(e){if(void 0!==e&&"function"!=typeof e)throw TypeError("Function expected");return e}for(var s,l=r.kind,c="getter"===l?"get":"setter"===l?"set":"value",u=!t&&e?r.static?e:e.prototype:null,d=t||(u?Object.getOwnPropertyDescriptor(u,r.name):{}),f=!1,p=n.length-1;p>=0;p--){var m={};for(var g in r)m[g]="access"===g?{}:r[g];for(var g in r.access)m.access[g]=r.access[g];m.addInitializer=function(e){if(f)throw TypeError("Cannot add initializers after decoration has completed");o.push(i(e||null))};var h=(0,n[p])("accessor"===l?{get:d.get,set:d.set}:d[c],m);if("accessor"===l){if(void 0===h)continue;if(null===h||"object"!=typeof h)throw TypeError("Object expected");(s=i(h.get))&&(d.get=s),(s=i(h.set))&&(d.set=s),(s=i(h.init))&&a.unshift(s)}else(s=i(h))&&("field"===l?a.unshift(s):d[c]=s)}u&&Object.defineProperty(u,r.name,d),f=!0}function u(e,t,n){for(var r=arguments.length>2,a=0;a0&&a[a.length-1])&&(6===s[0]||2===s[0])){o=0;continue}if(3===s[0]&&(!a||s[1]>a[0]&&s[1]=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function v(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,a,o=n.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(r=o.next()).done;)i.push(r.value)}catch(e){a={error:e}}finally{try{r&&!r.done&&(n=o.return)&&n.call(o)}finally{if(a)throw a.error}}return i}function S(){for(var e=[],t=0;t1||s(e,t)})},t&&(r[e]=t(r[e])))}function s(e,t){try{var n;(n=a[e](t)).value instanceof k?Promise.resolve(n.value.v).then(l,c):u(o[0][2],n)}catch(e){u(o[0][3],e)}}function l(e){s("next",e)}function c(e){s("throw",e)}function u(e,t){e(t),o.shift(),o.length&&s(o[0][0],o[0][1])}}function E(e){var t,n;return t={},r("next"),r("throw",function(e){throw e}),r("return"),t[Symbol.iterator]=function(){return this},t;function r(r,a){t[r]=e[r]?function(t){return(n=!n)?{value:k(e[r](t)),done:!1}:a?a(t):t}:a}}function P(e){if(!Symbol.asyncIterator)throw TypeError("Symbol.asyncIterator is not defined.");var t,n=e[Symbol.asyncIterator];return n?n.call(e):(e=y(e),t={},r("next"),r("throw"),r("return"),t[Symbol.asyncIterator]=function(){return this},t);function r(n){t[n]=e[n]&&function(t){return new Promise(function(r,a){!function(e,t,n,r){Promise.resolve(r).then(function(t){e({value:t,done:n})},t)}(r,a,(t=e[n](t)).done,t.value)})}}}function O(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var C=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},j=function(e){return(j=Object.getOwnPropertyNames||function(e){var t=[];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[t.length]=n);return t})(e)};function T(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n=j(e),r=0;r{"use strict";var e,f,a,d,c,b,t,r,n={},o={};function u(e){var f=o[e];if(void 0!==f)return f.exports;var a=o[e]={id:e,loaded:!1,exports:{}};return n[e].call(a.exports,a,a.exports,u),a.loaded=!0,a.exports}u.m=n,u.n=function(e){var f=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(f,{a:f}),f},f=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},u.t=function(a,d){if(1&d&&(a=this(a)),8&d||"object"==typeof a&&a&&(4&d&&a.__esModule||16&d&&"function"==typeof a.then))return a;var c=Object.create(null);u.r(c);var b={};e=e||[null,f({}),f([]),f(f)];for(var t=2&d&&a;"object"==typeof t&&!~e.indexOf(t);t=f(t))Object.getOwnPropertyNames(t).forEach(function(e){b[e]=function(){return a[e]}});return b.default=function(){return a},u.d(c,b),c},u.d=function(e,f){for(var a in f)u.o(f,a)&&!u.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:f[a]})},u.f={},u.e=function(e){return Promise.all(Object.keys(u.f).reduce(function(f,a){return u.f[a](e,f),f},[]))},u.hmd=function(e){return(e=Object.create(e)).children||(e.children=[]),Object.defineProperty(e,"exports",{enumerable:!0,set:function(){throw Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+e.id)}}),e},u.u=function(e){return"assets/js/"+(({1024:"00111de7",110:"6eb5acb9",1197:"403159e4",1210:"f3be12ec",1220:"47aff71f",1279:"d8b2d1db",1293:"cd58d169",1310:"b1517861",133:"bf28df8a",1551:"136fbf92",1558:"63218e6b",1576:"45901fe2",1593:"962d4273",1647:"3f86c49b",1706:"41907e12",1713:"4e9ccd91",1750:"2c6c2717",1758:"dc92e917",1850:"3ca596c0",1899:"5b239f4f",193:"f87bbaef",1939:"3362462b",1974:"48943d06",2080:"719f8225",2127:"fbd82323",2133:"9a3123ff",2160:"ce0d5460",2168:"750a7206",2175:"6d62e4e7",2252:"64904402",2255:"3b595d05",2289:"6c8f697c",2464:"ec9563e7",2470:"739821ac",2642:"36041992",2706:"e09614ee",2719:"35998477",2812:"1c4ba544",2828:"1abc4ae6",2850:"60f3f9ee",2873:"825a9671",2877:"d037fb9b",2907:"3d306dde",2913:"64055fdc",2936:"3f6b491d",2949:"e67156d3",2950:"f1f69e02",2976:"08a453f6",3119:"29cc5b7b",3134:"7ab6ded8",3142:"085be8cd",3200:"5ab9470d",3208:"2b9e9ebb",328:"5a090f4d",3305:"51eed215",3397:"5cb8df13",3432:"5e95c892",3550:"0ee03d4e",3612:"7ce57f72",3728:"a994a1a3",3729:"ef4aa51e",3746:"8bdd886c",3806:"7d517f8d",3940:"856c8d2c",3953:"2b3d6869",3966:"450bd883",3967:"7a4c801e",4001:"0e11b820",4004:"59cfba1b",4007:"6a7b7284",4020:"220a2203",4045:"8fefd3fb",4054:"04448f85",4083:"b6bdffd5",4116:"e1f490b7",4119:"3c778e3c",4120:"a8950a2d",4153:"d6262eff",4198:"8967b5ba",420:"89a1860b",4286:"9c9dfa90",4311:"5ade636b",4330:"3f03fa75",4361:"0fd6ac79",4416:"a5365419",4420:"b7743934",4467:"11b43341",4472:"4086122b",4484:"7a8fca77",4501:"6b6763dd",4528:"a9c0dfea",4546:"ae571911",4684:"13e6e9d6",4775:"3d26dfea",4878:"03035cd7",5022:"dd7b137e",5031:"41e10070",5112:"aba21aa0",5136:"263a0f1d",5172:"35f01bb6",5179:"a1df81e4",5211:"a7bd4aaa",5230:"1a4e3797",5287:"bb2066da",5302:"d3724847",5345:"316a85b5",5359:"d3a00109",540:"6810147d",5493:"b1cb4606",5514:"d3e90110",554:"6ce44407",5609:"682128af",5621:"146d8c91",5638:"7dccf384",5670:"f5d64ffd",5682:"c78257db",5718:"8ed430cc",5750:"82c45bc9",5767:"dbb4adf0",5787:"f074ec4e",5794:"61d18494",5824:"52e7ca68",5825:"37b920e3",5839:"51386caf",5866:"1b2ea3a7",5951:"06e19a77",5961:"5a7c91e2",6041:"b5252e18",6053:"096873fa",6083:"f71e509b",6111:"346aed81",6122:"3510475c",6176:"ec7fa08a",6202:"f47bf993",6322:"43b319d5",6360:"3c1570ec",6386:"d42911a9",6395:"f54598d4",6456:"0b8d8c22",6465:"aa19e785",6467:"ca96397b",6469:"629e2d9b",6484:"59d3e69b",6620:"8c26d429",6717:"acbea6ed",6763:"3213d97d",677:"1ca5e944",6771:"d507e662",6825:"c3aada04",6834:"4a7038fa",6873:"6ffa2daf",6892:"54771f43",6909:"9119c475",6910:"5e8c322a",6949:"cda3ee9e",6961:"704479ec",7019:"ea9414ac",7048:"17896441",705:"d46104ff",7106:"1dd8878c",7140:"93fefe3a",7164:"bfb7ba14",7284:"e1a95b0b",7297:"10414591",7302:"f1337b1a",7306:"31219cfd",7365:"a7456010",7370:"cbd2a7cc",7371:"827f7002",7459:"2dfd45fd",750:"8376f430",7516:"301472d1",7554:"b6e4e67f",7585:"c4203c52",7631:"552372d2",7649:"3ec64a7f",7663:"d7206776",7671:"380ab2e5",7694:"18891827",7714:"6e898280",7738:"c141421f",7744:"c4c830c1",7773:"7a3ca373",7801:"077d6723",7805:"3595c30f",7848:"71bd286e",7942:"ca17531e",804:"3021cf83",8076:"0a831b7f",8083:"d6dff286",8118:"78dcf9c6",8160:"5db10118",8212:"d534fd77",823:"52e7b168",8256:"b856c801",833:"fd2b2d45",8342:"58fd4737",8434:"fe0461a7",8438:"93baf445",8477:"6804bced",8481:"e2e2d448",8521:"d8cca940",8531:"a7232ca4",8541:"af2ea1d1",8706:"1df93b7f",8717:"afc1c92d",8723:"57c3686c",8827:"8137b5e1",8875:"27544590",9079:"dcf28466",9247:"f0400b8e",9259:"0eb8b304",9472:"0d1dd3d3",9476:"2a7a6c71",9636:"f439a60e",9699:"ffbac226",9716:"e4d89e4c",9723:"18670763",9746:"74ead2de",9797:"ac29ff77",9826:"4738667a",9834:"4cb8f9f4",9914:"a94703ab",9932:"29e1e855",9940:"75343e73"})[e]||e)+"."+({1024:"7793751e",110:"789a32e8",1197:"8887f14b",1210:"bcfa4f9a",1220:"0541f3af",1279:"902aa4aa",1293:"dedce984",1310:"5f845eb4",133:"7b9c7c94",1381:"6be3256d",1551:"6ba3382b",1558:"2a8d6428",1576:"488cb176",1593:"223e59d2",1647:"4d5b3a26",1698:"4ba74ff4",1706:"9ac3df6c",1713:"a1d83ab3",1750:"cc814b20",1758:"d2c43811",1850:"442dc857",1899:"7503141f",193:"b7cf4afe",1939:"93a01213",1974:"37d05acc",2080:"689214ba",2127:"c33e9c6f",2133:"8569f68c",2154:"9e1a3fbb",2160:"c88977d8",2168:"4fe1aab1",2175:"c188ae16",2252:"066b2d8e",2255:"0d741e80",2289:"c831c339",2464:"e56fe719",2470:"bcc252e2",2642:"92c4a406",2706:"cb6c3761",2719:"9e8c0c16",2812:"3ea617fa",2828:"9624a1fe",2850:"1996ff4f",2873:"3ef210f5",2877:"e7b02d25",2907:"ce2cac09",2913:"590619f9",2932:"f3227ebd",2936:"08f5ca6a",2949:"c156dd9c",2950:"5d7baeb7",2976:"ee4957c7",3119:"18953d38",3134:"97a3c889",3142:"25fd0c8f",3200:"5bfc76fd",3208:"a2aa4a74",328:"3927f2f2",3305:"b82d8c0c",3397:"481b5d52",3432:"a6b6894b",3550:"d8268cb4",3612:"2c67aa4e",3728:"214aa7ec",3729:"0e74704f",3746:"787f7ca6",3806:"50052ac6",3849:"e13b4314",3853:"bcf8a406",3940:"09a1fdab",3953:"f28a6fd4",3966:"be884bd7",3967:"054cc32f",4001:"c57cf92b",4004:"3bdc869b",4007:"bf7af224",4020:"c1b0258f",4045:"c2c89723",4054:"a66ae227",4083:"ef02f789",4116:"d58a5766",4119:"9d566116",4120:"81c57b52",4153:"b7cdd616",4198:"473621a8",420:"dca86066",4286:"4eb222b3",4311:"c55a5e89",4330:"9b91af19",4361:"9d41049c",4416:"9eb51ace",4420:"38617417",4467:"680d3de9",4472:"3af81480",4484:"df260e37",4501:"a57f3c47",4528:"873c8c04",4546:"ad49aa45",4684:"14e76d8d",4775:"3281863e",4878:"ae684652",5022:"9043ef53",5031:"63b8adfa",5112:"4bcc705f",5136:"1dde1e7f",5172:"4cdb9277",5179:"f9222a7d",5211:"05588383",5230:"7ba59418",5287:"5e361631",5302:"f4668a8b",5345:"a405c0dc",5359:"929937d7",540:"2a616308",5493:"cd9bb5ec",5514:"7852c500",554:"cf2a9db4",5609:"88ffad96",5621:"80c1ed7a",5638:"3e0a85be",5670:"61ef0ea8",5682:"c80f5c3f",5718:"d484b3aa",5750:"2d2c313d",5767:"2e9749a1",5787:"c8183bfa",5794:"fa44866e",5824:"6739e6a7",5825:"11de4f56",5839:"4aed8be6",5866:"70448ae1",5951:"81e8a532",5961:"1087e16d",6041:"5bda2fd8",6053:"5130dc55",6083:"ac749ccf",6111:"44e97499",6122:"2d976459",6176:"d33ce892",6202:"75090490",6322:"2d830fe9",6360:"4b6838c4",6386:"e848e5a5",6395:"8a76d875",6456:"7e64a394",6465:"ae8914c1",6467:"806510c9",6469:"9b8b79ec",6484:"d541e35f",6620:"0ff76438",6717:"856d4fca",6763:"22ef9d00",677:"5b79f0ba",6771:"d7f2aeaf",6825:"22a6047f",6834:"6cb71156",6873:"fb0c4c66",6892:"b54bb755",6909:"991b6609",6910:"894b624f",6949:"8c5229b0",6961:"b10a2ab9",7019:"3cd14b83",7048:"889dc0be",705:"7ebe9cb5",7106:"4d2c4c89",7140:"c85815c6",7164:"356380a5",7284:"a36b0b88",7297:"76ea106e",7302:"b65fe988",7306:"634dcc6a",7364:"702675e1",7365:"7fed3d29",7370:"e70e1cd2",7371:"024db0ec",7459:"65c1279c",750:"a3e6c348",7516:"4027959a",7554:"b2e5ec4d",7565:"8b853473",7585:"f4192e00",7631:"ae5e58d8",7649:"de1f5642",7663:"b91a17bf",7671:"099204ed",7694:"40f30d6e",7714:"7e5bc27d",7738:"2800f2d6",7744:"163d8178",7773:"fad1b7e4",7801:"9c3747cf",7805:"810cdf38",7848:"c3909f4e",7942:"fe506204",804:"3891a269",8076:"e2c1b5e4",8083:"3d8f057a",8118:"c2549a4b",8160:"a2d8ae3d",8212:"7469c55e",823:"ddb9099c",8256:"ef8dd139",833:"83a40b61",8342:"c6d131ad",8434:"2a1cd248",8438:"64d8ffec",8477:"ef6f30bc",8481:"91bc4a30",8521:"bdc66361",8531:"520db7d1",8541:"8d37773d",8706:"0bb20414",8717:"12f44d8c",8723:"566bebc9",8827:"29951264",8875:"2bfa0ff0",9079:"9d67482d",9247:"d5c9e8d6",9259:"49c6fc4c",9472:"29ebef43",9476:"8e3a9ca3",9636:"85c9c331",9699:"5778b982",9716:"f62fcc91",9723:"cc8ea2b7",9746:"9bade861",9797:"8efd8143",9826:"ee192daa",9834:"e1e1ca94",9914:"f8b4c17d",9932:"975bf4bf",9940:"2d7a6c57"})[e]+".js"},u.miniCssF=function(e){return""+e+".css"},u.h=function(){return"4a69b26a08655cfc"},u.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}}(),u.o=function(e,f){return Object.prototype.hasOwnProperty.call(e,f)},a={},d="docs:",u.l=function(e,f,c,b){if(a[e]){a[e].push(f);return}if(void 0!==c)for(var t,r,n=document.getElementsByTagName("script"),o=0;o0&&c[b-1][2]>d;b--)c[b]=c[b-1];c[b]=[f,a,d];return}for(var t=1/0,b=0;b=d)&&Object.keys(u.O).every(function(e){return u.O[e](f[n])})?f.splice(n--,1):(r=!1,dEdit in LiveCodes`, + }} +/> + +
    + +or manually create a new bookmark in your browser and add this code as its URL: + + +```js +javascript:(()=>{window.open("https://livecodes.io/?x="+encodeURIComponent(location.href),"_blank");})(); +``` + +## Example Usage + +After adding the bookmarklet to your browser (see above), open this GitHub directory: + +https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards + +Then click on the bookmarklet. + +LiveCodes playground should open in a new window and [import](./features/import.html.md) the directory files (each file in the appropriate editor). It just works! \ No newline at end of file diff --git a/docs/bookmarklet/index.html b/docs/bookmarklet/index.html new file mode 100644 index 0000000..0272ba9 --- /dev/null +++ b/docs/bookmarklet/index.html @@ -0,0 +1,24 @@ +Bookmarklet | LiveCodes

    Bookmarklet

    +

    LiveCodes allows importing code from a wide variety of sources.

    +

    Instead of manually copy/pasting URLs to import, adding "Edit in LiveCodes" bookmarklet to the browser bookmarks bar can be a more convenient way. It opens LiveCodes in a new window and imports the current webpage URL.

    +

    Add Bookmarklet​

    +

    Drag this link to the browser bookmarks bar:

    + +
    +

    or manually create a new bookmark in your browser and add this code as its URL:

    +
    javascript:(()=>{window.open("https://livecodes.io/?x="+encodeURIComponent(location.href),"_blank");})();
    +

    Example Usage​

    +

    After adding the bookmarklet to your browser (see above), open this GitHub directory:

    +

    https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards

    +

    Then click on the bookmarklet.

    +

    LiveCodes playground should open in a new window and import the directory files (each file in the appropriate editor). It just works!

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/configuration/configuration-object.html.md b/docs/configuration/configuration-object.html.md new file mode 100644 index 0000000..0fb2153 --- /dev/null +++ b/docs/configuration/configuration-object.html.md @@ -0,0 +1,721 @@ +# Configuration Object + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +LiveCodes is very flexible and provides a wide range of configuration options. +A JavaScript object is used for configuration and keeping state. + +## Usage + +The configuration object can be used while initializing a new playground using the [SDK](../sdk/index.html.md). + +```ts +import { createPlayground } from 'livecodes'; + +(async () => { + const playground = await createPlayground('#container', { + config: { + // config options here + }, + }); + + // the object can be retrieved using the method `getConfig` + console.log(await playground.getConfig()); + + // and can be later changed using the method `setConfig` + await playground.setConfig({ + // new config options + }); +})(); +``` + +Alternatively, the URL [query parameter](./query-params.html.md) `config` can provide a URL to a JSON representation of the configuration object to be used while initializing the app. + +Example: + +``` +https://livecodes.io/?config=https://my-custom-server.com/config.json +``` + +## TypeScript Types + +TypeScript types are [documented here](../api/interfaces/Config.md) and can be imported from the library. + +```ts +import type { Config } from 'livecodes'; +``` + +## Default Config + +Default config is [defined here](https://github.com/live-codes/livecodes/blob/develop/src/livecodes/config/default-config.ts). + +## Project Content + +These are properties that define the content of the current [project](../features/projects.html.md). + +### `title` + +Type: [`string`](../api/interfaces/Config.md#title) + +Default: `"Untitled Project"` + +Project title. This is used as [result page](../features/result.html.md) title and title meta tag. Also used in [project](../features/projects.html.md) search. This can be set in the UI from the title input (above result page) or from Project menu → Project Info. + +### `description` + +Type: [`string`](../api/interfaces/Config.md#description) + +Default: `""` + +Project description. Used in [project](../features/projects.html.md) search and result page description meta tag. This can be set in the UI from Project menu → Project Info. + +### `head` + +Type: [`string`](../api/interfaces/Config.md#head) + +Default: `'\n'` + +Content added to the [result page](../features/result.html.md) `` element. This can be set in the UI from Project menu → Project Info. + +### `htmlAttrs` + +Type: [`string | Record`](../api/interfaces/Config.md#htmlattrs) + +Default: `'lang="en" class=""'` + +Attributes added to the [result page](../features/result.html.md) `` element. It can be an object or a string. + +Example: `{ lang: "en", class: "dark" }` or `'lang="en" class="dark"'`, +become ``. + +This can be set in the UI from Project menu → Project Info. + +### `tags` + +Type: [`string[]`](../api/interfaces/Config.md#tags) + +Default: `[]` + +Project tags. Used in [project](../features/projects.html.md) filter and search. This can be set in the UI from Project menu → Project Info. + +### `activeEditor` + +Type: [`"markup" | "style" | "script" | undefined`](../api/interfaces/Config.md#activeeditor) + +Default: Last used editor for user, otherwise "markup" + +Selects the active editor to show. + +### `languages` + +Type: [`Language[] | undefined`](../api/interfaces/Config.md#languages) + +Default: all supported languages in full app and only current editor languages in [embeds](../features/embeds.html.md). + +List of enabled languages. Languages that are not already loaded in the editors ([markup](#markup), [style](#style) and [script](#script)) can be selected from a drop down menu at the editor title. + +![Change Language](../../static/img/screenshots/languages-3.jpg) + +### `markup` + +Type: [`Editor`](../api/interfaces/Config.md#markup) + +Default: `{ language: "html", content: "" }` + +An object that configures the language and content of the markup editor. This can include the following properties: + +- `language`: + Type: [Language](../api/type-aliases/Language.md) + Default: `"html"` in markup editor, `"css"` in style editor and `"javascript"` in script editor. + This can be a language name, extension or alias (as defined in [language documentations](../languages/index.html.md)). + (e.g. `"markdown"`, `"md"`) + +- `content`: + Type: [`string | undefined`](../api/interfaces/Config.md#content) + Default: `""` + The initial content of the code editor. + +- `contentUrl`: + Type: [`string | undefined`](../api/interfaces/Config.md#contenturl) + Default: `undefined` + A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + The URL is only fetched if `content` property had no value. + +- `hiddenContent`: + Type: [`string | undefined`](../api/interfaces/Config.md#hiddencontent) + Default: `undefined` + Hidden content that gets evaluated without being visible in the code editor. + This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +- `hiddenContentUrl`: + Type: [`string | undefined`](../api/interfaces/Config.md#hiddencontenturl) + Default: `undefined` + A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + The URL is only fetched if `hiddenContent` property had no value. + +- `foldedLines`: + Type: [`Array<{ from: number; to: number }> | undefined`](../api/interfaces/Config.md#foldedlines) + Default: `undefined` + Lines that get folded when the editor loads. The code can be unfolded by clicking on arrow beside the line. + This can be useful for less relevant code in embedded playgrounds. + +- `title`: + Type: [`string | undefined`](../api/interfaces/Config.md#title) + Default: `""` + If set, this is used as the title of the editor in the UI, overriding the default title set to the language name (e.g. "Python" can be used instead of "Py (Wasm)"). + +- `hideTitle`: + Type: [`boolean | undefined`](../api/interfaces/Config.md#hidetitle) + Default: `""` + If `true`, the title of the code editor is hidden, however its code is still evaluated. + This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +- `order`: + Type: [`number | undefined`](../api/interfaces/Config.md#order) + Default: `0` + The order of the editor in the UI. + +- `selector`: + Type: [`string | undefined`](../api/interfaces/Config.md#selector) + Default: `undefined` + A CSS selector to load `content` from [DOM import](../features/import.html.md)#import-code-from-dom). + +- `position`: + Type: [`{lineNumber: number, column?: number} | undefined`](../api/interfaces/Config.md#position) + Default: `undefined` + The initial position of the cursor in the code editor. + Example: `{lineNumber: 5, column: 10}` + +### `style` + +Type: [`Editor`](../api/interfaces/Config.md#style) + +Default: `{ language: "css", content: "" }` + +An object that configures the language and content of the style editor. See [markup](#markup) for more details. + +### `script` + +Type: [`Editor`](../api/interfaces/Config.md#script) + +Default: `{ language: "javascript", content: "" }` + +An object that configures the language and content of the script editor. See [markup](#markup) for more details. + +### `stylesheets` + +Type: [`string[]`](../api/interfaces/Config.md#stylesheets) + +Default: `[]` + +List of URLs for [external stylesheets](../features/external-resources.html.md) to add to the [result page](../features/result.html.md). + +### `scripts` + +Type: [`string[]`](../api/interfaces/Config.md#scripts) + +Default: `[]` + +List of URLs for [external scripts](../features/external-resources.html.md) to add to the [result page](../features/result.html.md). + +### `cssPreset` + +Type: [`"" | "normalize.css" | "reset-css"`](../api/interfaces/Config.md#csspreset) + +Default: `""` + +[CSS Preset](../features/external-resources.html.md)#css-presets) to use. + +### `processors` + +Type: [`Processor[]`](../api/internal/type-aliases/Processor.md) + +Default: `[]` + +List of enabled [CSS processors](../features/css.html.md)#css-processors). + +### `customSettings` + +Type: [`CustomSettings`](../api/interfaces/Config.md#customsettings) + +Default: `{}` + +Defines [custom settings](../advanced/custom-settings.html.md) for the current project. + +### `imports` + +Type: [`[key: string]: string`](../api/interfaces/Config.md#imports) + +Default: `{}` + +Allows specifying custom [import maps](https://github.com/WICG/import-maps) for [module imports](../features/module-resolution.html.md)#custom-module-resolution). + +For example, adding this JavaScript code: + +```js +import moment from 'moment'; +import { partition } from 'lodash'; +``` + +would add this import map in the result page: + +```html + +``` + +However, if `imports` is specified as follows: + +```json +{ + "imports": { + "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js" + } +} +``` + +The import map becomes like this: + +```html + +``` + +:::info Note + +Currently, multiple import maps are not yet supported. https://crbug.com/927119 + +When bare module imports are encountered, LiveCodes adds an import map to the result page. If you need to add custom import map or override the automatically generated one, you need to add them to `imports` config property or `imports` [customSettings](#customsettings) property. + +::: + +### `types` + +Type: `[key: string]: string | { autoload?: boolean ; declareAsModule?: boolean ; url: string }` + +Default: `{}` + +Allows providing custom [TypeScript type declarations](https://www.typescriptlang.org/docs/handbook/2/type-declarations.html) for better [editor intellisense](../features/intellisense.html.md). + +It is an object where each key represents module name and value represents the types. +This can be a URL to a type declaration file. For example, if this is the type declaration file: + +```ts title="https://my-custom-domain/my-type-declarations.d.ts" +declare module 'my-demo-lib' { + export class Greeter { + morning(): string; + evening(): string; + } +} +``` + +It can be used like that: + +```json +{ + "types": { + "my-demo-lib": "https://my-custom-domain/my-type-declarations.d.ts" + } +} +``` + +Alternatively, the value for module name can be an object with the following properties: + +- `url`: `string` (required). The URL to type declaration file. +- `autoload`: `boolean` (optional). By default, the types are only loaded when the module is imported in code. If `autoload` property is set to `true`, the types are loaded regardless if the module was imported. +- `declareAsModule`: `boolean` (optional). Declares the types as module with the supplied module name. + +Example: + +```json +{ + "types": { + "my-demo-lib": { + "url": "https://my-custom-domain/types.d.ts", + "autoload": true, + "declareAsModule": true + } + } +} +``` + +### `tests` + +Type: `undefined` | `Partial` + +Default: `{ language: 'typescript', content: '' }` + +Configures the [language](../features/tests.html.md)#supported-languages) and content of [tests](../features/tests.html.md). + +### `version` + +Type: `Readonly` [`string`](../api/interfaces/Config.md#description) + +Default: Current LiveCodes Version. + +This is a read-only property which specifies the current LiveCodes version. It can be shown using the SDK [`exec`](../sdk/js-ts.html.md)#exec) method. + +```js +// in browser console of full app (e.g. https://livecodes.io) +await livecodes.exec('showVersion'); +``` + +Version specified in [exported](../features/export.html.md) projects allows automatically upgrading the project configuration when imported by an app with a newer version. + +## App Settings + +These are properties that define how the app behaves. + +### `readonly` + +Type: [`boolean`](../api/interfaces/Config.md#readonly) + +Default: `false` + +If `true`, editors are loaded in read-only mode, where the user is not allowed to change the code. + +By default, when `readonly` is set to `true`, the light-weight code editor [CodeJar](../features/editor-settings.html.md)#code-editor) is used. If you wish to use another editor, set the [editor](#editor) property. + +### `allowLangChange` + +Type: [`boolean`](../api/interfaces/Config.md#allowlangchange) + +Default: `true` + +If `false`, the UI will not show the menu that allows changing editor language. + +### `view` + +Type: [`"split" | "editor" | "result"`](../api/interfaces/Config.md#view) + +Default: `"split"` + +The [default view](../features/default-view.html.md) for the playground. + +### `mode` + +Type: [`"full" | "focus" | "simple" | "lite" | "result" | "editor" | "codeblock"`](../api/interfaces/Config.md#mode) + +Default: `"full"` + +Sets the [display mode](../features/display-modes.html.md). + +### `tools` + +Type: [`Partial<{ enabled: Array<'console' | 'compiled' | 'tests'> | 'all'; active: 'console' | 'compiled' | 'tests' | ''; status: 'closed' | 'open' | 'full' | 'none' | ''; }>`](../api/interfaces/Config.md#tools) + +Default: `{ enabled: 'all', active: '', status: '' }` + +Sets enabled and active tools and status of [tools pane](../features/tools-pane.html.md). + +Example: + +```json +{ + "tools": { + "enabled": ["console", "compiled"], + "active": "console", + "status": "open" + } +} +``` + + + +### `zoom` + +Type: [`1 | 0.5 | 0.25`](../api/interfaces/Config.md#zoom) + +Default: `1` + +Sets result page [zoom level](../features/result.html.md)#result-page-zoom). + +## User Settings + +These are properties that define the [user settings](./../features/user-settings.html.md), including [editor settings](../features/editor-settings.html.md). + +### `enableAI` + +Type: [`boolean`](../api/interfaces/Config.md#enableai) + +Default: `false` + +If `true`, [AI code assistant](../features/ai.html.md) is enabled. + +### `autoupdate` + +Type: [`boolean`](../api/interfaces/Config.md#autoupdate) + +Default: `true` + +If `true`, the result page is automatically updated on code change, after time [delay](#delay). + +### `autosave` + +Type: [`boolean`](../api/interfaces/Config.md#autosave) + +Default: `false` + +If `true`, the project is automatically saved on code change, after time [delay](#delay). + +### `autotest` + +Type: [`boolean`](../api/interfaces/Config.md#autotest) + +Default: `false` + +If `true`, the project is watched for code changes which trigger tests to auto-run. + +### `delay` + +Type: [`number`](../api/interfaces/Config.md#delay) + +Default: `1500` + +Time delay (in milliseconds) following code change, after which the result page is updated (if [`autoupdate`](#autoupdate) is `true`) and/or the project is saved (if [`autosave`](#autosave) is `true`). + +### `formatOnsave` + +Type: [`boolean`](../api/interfaces/Config.md#formatonsave) + +Default: `false` + +If `true`, the code is automatically [formatted](../features/code-format.html.md) on saving the project. + +### `layout` + +Type: [`"horizontal"| "vertical" | "responsive" | undefined`](../api/interfaces/Config.md#layout) + +Default: `"responsive"` + +Sets the app layout to horizontal or vertical. If set to `"responsive"` (the default) or `undefined`, the layout is vertical in small screens when the playground height is larger than its width, otherwise horizontal. + +### `theme` + +Type: [`"light" | "dark"`](../api/interfaces/Config.md#theme) + +Default: `"dark"` + +Sets the app [theme](../features/themes.html.md) to light/dark mode. + +### `themeColor` + +Type: [`string | undefined`](../api/interfaces/Config.md#themecolor) + +Default: `"hsl(214, 40%, 50%)"` + +A string representing a [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value), used to set the app [theme color](../features/themes.html.md). It can be any valid CSS color value, such as `"#4DB39E"`, `"rgb(245, 225, 49)"`, `"hsl(324, 40%, 50%)"` and `"lightblue"`. + +### `editorTheme` + +Type: [`EditorTheme[] | string | undefined`](../api/interfaces/Config.md#editortheme) + +Default: `undefined` + +Sets the code editor themes. + +:::info Note +You can preview and set editor themes in the [editor settings screen](pathname:///../?screen=editor-settings). +::: + +Three [code editors](#editor) are supported in LiveCodes: **Monaco** (the default on desktop), **CodeMirror** (the default on mobile) and **CodeJar** (the default in [codeblocks](../features/display-modes.html.md)#codeblock), in [lite mode](../features/lite.html.md) and in [readonly](#readonly) playgrounds). Each editor has its own set of themes, represented by the types: [`MonacoTheme`](../api/internal/type-aliases/MonacoTheme.md), [`CodemirrorTheme`](../api/internal/type-aliases/CodemirrorTheme.md) and [`CodejarTheme`](../api/internal/type-aliases/CodejarTheme.md). + +The `editorTheme` property can be used to set the editor theme for each editor and on light/dark modes. It can be set to an array of [`EditorTheme`](../api/internal/type-aliases/EditorTheme.md) items or a string of comma-separated items. + +Each item can be composed of: + +` editor:` `theme-name` `@app-theme` + +Where: + +- `editor` is the name of the editor (`"monaco" | "codemirror" | "codejar"`). [Optional] +- `theme-name` is the name of the theme (e.g. `"monokai"`). [Required] + Valid theme names can be found here: + - Monaco: [`MonacoTheme`](../api/internal/type-aliases/MonacoTheme.md) + - CodeMirror: [`CodemirrorTheme`](../api/internal/type-aliases/CodemirrorTheme.md) + - CodeJar: [`CodejarTheme`](../api/internal/type-aliases/CodejarTheme.md). +- `app-theme` is the name of the app theme (`"dark" | "light"`). [Optional] + +Examples: + +- `"vs"` +- `"monaco:twilight, codemirror:one-dark"` +- `["vs@light"]` +- `["vs@light", "vs-dark@dark"]` +- `["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]` + +Each `EditorTheme` item requires a theme name. The theme name can optionally be preceded with the editor name separated by a colon to specify the editor (e.g. `"monaco:monokai"`). It can also optionally be followed by the app theme separated by "@" (e.g. `"monokai@dark"`). + +Multiple `EditorTheme` items can be supplied (as array items or in the comma-separated string) to specify the theme for each editor and in dark and light modes. The order matters. The first valid item in the array or string for the current editor (`monaco`, `codemirror` or `codejar`) and app theme (`light` or `dark`) will be used. If no items match the current editor and app theme, the default theme for the editor and app theme will be used. + +### `appLanguage` + +Type: [`AppLanguage | undefined`](../api/interfaces/Config.md#applanguage) + +Default: `undefined` + +Spoken language code that sets the app UI language (e.g. `"ar"`, `"zh-CN"`). Used in translations for internationalization. If `undefined` (the default), the language is automatically detected based on the user's browser settings and falls back to English, if detection fails or the language is not supported. + +### `recoverUnsaved` + +Type: [`boolean`](../api/interfaces/Config.md#recoverunsaved) + +Default: `true` + +Enables [recovering last unsaved project](../features/recover.html.md) when the app is reopened. + +### `welcome` + +Type: [`boolean`](../api/interfaces/Config.md#welcome) + +Default: `true` + +If `true`, the [welcome screen](../features/welcome.html.md) is displayed when the app loads. + +### `showSpacing` + +Type: [`boolean`](../api/interfaces/Config.md#showspacing) + +Default: `false` + +Enables [showing element spacing](../features/result.html.md)#show-spacings) in the result page. + +### `editor` + +Type: [`"monaco" | "codemirror" | "codejar" | "auto" | undefined`](../api/interfaces/Config.md#editor) + +Default: `undefined` + +Selects the [code editor](../features/editor-settings.html.md)#code-editor) to use. + +If `undefined` (the default):
    +Monaco editor is used on desktop,
    +CodeMirror is used on mobile and in `simple` mode,
    +while CodeJar is used in [`codeblock` mode](../features/display-modes.html.md)#codeblock), in [`lite` mode](../features/lite.html.md) and in [`readonly`](#readonly) playgrounds. + +If set to `auto`, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings. + +### `fontFamily` + +Type: [`string | undefined`](../api/interfaces/Config.md#fontfamily) + +Default: `undefined` + +Sets the [code editor](../features/editor-settings.html.md) font family. + +### `fontSize` + +Type: [`number | undefined`](../api/interfaces/Config.md#fontfamily) + +Default: `undefined` + +Sets the [code editor](../features/editor-settings.html.md) font size. + +If `undefined` (the default), the font size is set to 14 for the full app and 12 for [embeds](../features/embeds.html.md). + +### `useTabs` + +Type: [`boolean`](../api/interfaces/Config.md#usetabs) + +Default: `false` + +If `true`, lines are indented with tabs instead of spaces. Also used in [code formatting](../features/code-format.html.md). + +### `tabSize` + +Type: [`number`](../api/interfaces/Config.md#tabsize) + +Default: `2` + +The number of spaces per indentation-level. Also used in [code formatting](../features/code-format.html.md). + +### `lineNumbers` + +Type: [`boolean | "relative"`](../api/interfaces/Config.md#linenumbers) + +Default: `true` + +Show line numbers in [code editor](../features/editor-settings.html.md). +If set to `"relative"`, line numbers are shown relative to the current line. This can be useful with [vim mode](#editormode). + +### `wordWrap` + +Type: [`boolean`](../api/interfaces/Config.md#wordwrap) + +Default: `false` + +Enables word-wrap for long lines. + +### `closeBrackets` + +Type: [`boolean`](../api/interfaces/Config.md#closebrackets) + +Default: `true` + +Use auto-complete to close brackets and quotes. + +### `foldRegions` + +Type: [`boolean`](../api/interfaces/Config.md#foldregions) + +Default: `false` + +When set to `true`, regions marked by `#region` and `#endregion` comments are folded when the project is loaded. + +### `emmet` + +Type: [`boolean`](../api/interfaces/Config.md#emmet) + +Default: `true` + +Enables [Emmet](../features/editor-settings.html.md)#emmet). + +### `editorMode` + +Type: [`"vim" | "emacs" | undefined`](../api/interfaces/Config.md#editormode) + +Default: `undefined` + +Sets [editor mode](../features/editor-settings.html.md)#editor-modes). + +### `semicolons` + +Type: [`boolean`](../api/interfaces/Config.md#semicolons) + +Default: `true` + +Configures Prettier [code formatter](../features/code-format.html.md) to use [semi-colons](https://prettier.io/docs/en/options.html#semicolons). + +### `singleQuote` + +Type: [`boolean`](../api/interfaces/Config.md#singlequote) + +Default: `false` + +Configures Prettier [code formatter](../features/code-format.html.md) to use [single quotes instead of double quotes](https://prettier.io/docs/en/options.html#quotes). + +### `trailingComma` + +Type: [`boolean`](../api/interfaces/Config.md#trailingcomma) + +Default: `true` + +Configures Prettier [code formatter](../features/code-format.html.md) to use [trailing commas](https://prettier.io/docs/en/options.html#trailing-commas). \ No newline at end of file diff --git a/docs/configuration/configuration-object/index.html b/docs/configuration/configuration-object/index.html new file mode 100644 index 0000000..4e978fe --- /dev/null +++ b/docs/configuration/configuration-object/index.html @@ -0,0 +1,385 @@ +Configuration Object | LiveCodes

    Configuration Object

    + +

    LiveCodes is very flexible and provides a wide range of configuration options. +A JavaScript object is used for configuration and keeping state.

    +

    Usage​

    +

    The configuration object can be used while initializing a new playground using the SDK.

    +
    import { createPlayground } from 'livecodes';

    (async () => {
      const playground = await createPlayground('#container', {
        config: {
          // config options here
        },
      });

      // the object can be retrieved using the method `getConfig`
      console.log(await playground.getConfig());

      // and can be later changed using the method `setConfig`
      await playground.setConfig({
        // new config options
      });
    })();
    +

    Alternatively, the URL query parameter config can provide a URL to a JSON representation of the configuration object to be used while initializing the app.

    +

    Example:

    +
    https://livecodes.io/?config=https://my-custom-server.com/config.json
    +

    TypeScript Types​

    +

    TypeScript types are documented here and can be imported from the library.

    +
    import type { Config } from 'livecodes';
    +

    Default Config​

    +

    Default config is defined here.

    +

    Project Content​

    +

    These are properties that define the content of the current project.

    +

    title​

    +

    Type: string

    +

    Default: "Untitled Project"

    +

    Project title. This is used as result page title and title meta tag. Also used in project search. This can be set in the UI from the title input (above result page) or from Project menu → Project Info.

    +

    description​

    +

    Type: string

    +

    Default: ""

    +

    Project description. Used in project search and result page description meta tag. This can be set in the UI from Project menu → Project Info.

    + +

    Type: string

    +

    Default: '<meta charset="UTF-8" />\n<meta name="viewport" content="width=device-width, initial-scale=1.0" />'

    +

    Content added to the result page <head> element. This can be set in the UI from Project menu → Project Info.

    +

    htmlAttrs​

    +

    Type: string | Record<string, string>

    +

    Default: 'lang="en" class=""'

    +

    Attributes added to the result page <html> element. It can be an object or a string.

    +

    Example: { lang: "en", class: "dark" } or 'lang="en" class="dark"', +become <html lang="en" class="dark">.

    +

    This can be set in the UI from Project menu → Project Info.

    +

    tags​

    +

    Type: string[]

    +

    Default: []

    +

    Project tags. Used in project filter and search. This can be set in the UI from Project menu → Project Info.

    +

    activeEditor​

    +

    Type: "markup" | "style" | "script" | undefined

    +

    Default: Last used editor for user, otherwise "markup"

    +

    Selects the active editor to show.

    +

    languages​

    +

    Type: Language[] | undefined

    +

    Default: all supported languages in full app and only current editor languages in embeds.

    +

    List of enabled languages. Languages that are not already loaded in the editors (markup, style and script) can be selected from a drop down menu at the editor title.

    +

    Change Language

    +

    markup​

    +

    Type: Editor

    +

    Default: { language: "html", content: "" }

    +

    An object that configures the language and content of the markup editor. This can include the following properties:

    +
      +
    • +

      language: +Type: Language +Default: "html" in markup editor, "css" in style editor and "javascript" in script editor. +This can be a language name, extension or alias (as defined in language documentations). +(e.g. "markdown", "md")

      +
      • +
    • +

      content: +Type: string | undefined +Default: "" +The initial content of the code editor.

      +
      • +
    • +

      contentUrl: +Type: string | undefined +Default: undefined +A URL to load content from. It has to be a valid URL that is CORS-enabled. +The URL is only fetched if content property had no value.

      +
      • +
    • +

      hiddenContent: +Type: string | undefined +Default: undefined +Hidden content that gets evaluated without being visible in the code editor. +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)

      +
      • +
    • +

      hiddenContentUrl: +Type: string | undefined +Default: undefined +A URL to load hiddenContent from. It has to be a valid URL that is CORS-enabled. +The URL is only fetched if hiddenContent property had no value.

      +
      • +
    • +

      foldedLines: +Type: Array<{ from: number; to: number }> | undefined +Default: undefined +Lines that get folded when the editor loads. The code can be unfolded by clicking on arrow beside the line. +This can be useful for less relevant code in embedded playgrounds.

      +
      • +
    • +

      title: +Type: string | undefined +Default: "" +If set, this is used as the title of the editor in the UI, overriding the default title set to the language name (e.g. "Python" can be used instead of "Py (Wasm)").

      +
      • +
    • +

      hideTitle: +Type: boolean | undefined +Default: "" +If true, the title of the code editor is hidden, however its code is still evaluated. +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).

      +
      • +
    • +

      order: +Type: number | undefined +Default: 0 +The order of the editor in the UI.

      +
      • +
    • +

      selector: +Type: string | undefined +Default: undefined +A CSS selector to load content from DOM import.

      +
      • +
    • +

      position: +Type: {lineNumber: number, column?: number} | undefined +Default: undefined +The initial position of the cursor in the code editor. +Example: {lineNumber: 5, column: 10}

      +
      • +
    +

    style​

    +

    Type: Editor

    +

    Default: { language: "css", content: "" }

    +

    An object that configures the language and content of the style editor. See markup for more details.

    +

    script​

    +

    Type: Editor

    +

    Default: { language: "javascript", content: "" }

    +

    An object that configures the language and content of the script editor. See markup for more details.

    +

    stylesheets​

    +

    Type: string[]

    +

    Default: []

    +

    List of URLs for external stylesheets to add to the result page.

    +

    scripts​

    +

    Type: string[]

    +

    Default: []

    +

    List of URLs for external scripts to add to the result page.

    +

    cssPreset​

    +

    Type: "" | "normalize.css" | "reset-css"

    +

    Default: ""

    +

    CSS Preset to use.

    +

    processors​

    +

    Type: Processor[]

    +

    Default: []

    +

    List of enabled CSS processors.

    +

    customSettings​

    +

    Type: CustomSettings

    +

    Default: {}

    +

    Defines custom settings for the current project.

    +

    imports​

    +

    Type: [key: string]: string

    +

    Default: {}

    +

    Allows specifying custom import maps for module imports.

    +

    For example, adding this JavaScript code:

    +
    import moment from 'moment';
    import { partition } from 'lodash';
    +

    would add this import map in the result page:

    +
    <script type="importmap">
      {
        "imports": {
          "moment": "https://esm.sh/moment",
          "lodash": "https://esm.sh/lodash"
        }
      }
    </script>
    +

    However, if imports is specified as follows:

    +
    {
      "imports": {
        "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"
      }
    }
    +

    The import map becomes like this:

    +
    <script type="importmap">
      {
        "imports": {
          "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js",
          "lodash": "https://esm.sh/lodash"
        }
      }
    </script>
    +
    Note

    Currently, multiple import maps are not yet supported. https://crbug.com/927119

    When bare module imports are encountered, LiveCodes adds an import map to the result page. If you need to add custom import map or override the automatically generated one, you need to add them to imports config property or imports customSettings property.

    +

    types​

    +

    Type: [key: string]: string | { autoload?: boolean ; declareAsModule?: boolean ; url: string }

    +

    Default: {}

    +

    Allows providing custom TypeScript type declarations for better editor intellisense.

    +

    It is an object where each key represents module name and value represents the types. +This can be a URL to a type declaration file. For example, if this is the type declaration file:

    +
    https://my-custom-domain/my-type-declarations.d.ts
    declare module 'my-demo-lib' {
      export class Greeter {
        morning(): string;
        evening(): string;
      }
    }
    +

    It can be used like that:

    +
    {
      "types": {
        "my-demo-lib": "https://my-custom-domain/my-type-declarations.d.ts"
      }
    }
    +

    Alternatively, the value for module name can be an object with the following properties:

    +
      +
    • url: string (required). The URL to type declaration file.
      • +
    • autoload: boolean (optional). By default, the types are only loaded when the module is imported in code. If autoload property is set to true, the types are loaded regardless if the module was imported.
      • +
    • declareAsModule: boolean (optional). Declares the types as module with the supplied module name.
      • +
    +

    Example:

    +
    {
      "types": {
        "my-demo-lib": {
          "url": "https://my-custom-domain/types.d.ts",
          "autoload": true,
          "declareAsModule": true
        }
      }
    }
    +

    tests​

    +

    Type: undefined | Partial<Editor>

    +

    Default: { language: 'typescript', content: '' }

    +

    Configures the language and content of tests.

    +

    version​

    +

    Type: Readonly string

    +

    Default: Current LiveCodes Version.

    +

    This is a read-only property which specifies the current LiveCodes version. It can be shown using the SDK exec method.

    +
    // in browser console of full app (e.g. https://livecodes.io)
    await livecodes.exec('showVersion');
    +

    Version specified in exported projects allows automatically upgrading the project configuration when imported by an app with a newer version.

    +

    App Settings​

    +

    These are properties that define how the app behaves.

    +

    readonly​

    +

    Type: boolean

    +

    Default: false

    +

    If true, editors are loaded in read-only mode, where the user is not allowed to change the code.

    +

    By default, when readonly is set to true, the light-weight code editor CodeJar is used. If you wish to use another editor, set the editor property.

    +

    allowLangChange​

    +

    Type: boolean

    +

    Default: true

    +

    If false, the UI will not show the menu that allows changing editor language.

    +

    view​

    +

    Type: "split" | "editor" | "result"

    +

    Default: "split"

    +

    The default view for the playground.

    +

    mode​

    +

    Type: "full" | "focus" | "simple" | "lite" | "result" | "editor" | "codeblock"

    +

    Default: "full"

    +

    Sets the display mode.

    +

    tools​

    +

    Type: Partial<{ enabled: Array<'console' | 'compiled' | 'tests'> | 'all'; active: 'console' | 'compiled' | 'tests' | ''; status: 'closed' | 'open' | 'full' | 'none' | ''; }>

    +

    Default: { enabled: 'all', active: '', status: '' }

    +

    Sets enabled and active tools and status of tools pane.

    +

    Example:

    +
    {
      "tools": {
        "enabled": ["console", "compiled"],
        "active": "console",
        "status": "open"
      }
    }
    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "script": {
          "language": "javascript",
          "content": "console.log('Hello World!');"
        },
        "activeEditor": "script",
        "tools": {
          "enabled": [
            "console",
            "compiled"
          ],
          "active": "console",
          "status": "open"
        }
      }
    };
    createPlayground('#container', options);

    +

    zoom​

    +

    Type: 1 | 0.5 | 0.25

    +

    Default: 1

    +

    Sets result page zoom level.

    +

    User Settings​

    +

    These are properties that define the user settings, including editor settings.

    +

    enableAI​

    +

    Type: boolean

    +

    Default: false

    +

    If true, AI code assistant is enabled.

    +

    autoupdate​

    +

    Type: boolean

    +

    Default: true

    +

    If true, the result page is automatically updated on code change, after time delay.

    +

    autosave​

    +

    Type: boolean

    +

    Default: false

    +

    If true, the project is automatically saved on code change, after time delay.

    +

    autotest​

    +

    Type: boolean

    +

    Default: false

    +

    If true, the project is watched for code changes which trigger tests to auto-run.

    +

    delay​

    +

    Type: number

    +

    Default: 1500

    +

    Time delay (in milliseconds) following code change, after which the result page is updated (if autoupdate is true) and/or the project is saved (if autosave is true).

    +

    formatOnsave​

    +

    Type: boolean

    +

    Default: false

    +

    If true, the code is automatically formatted on saving the project.

    +

    layout​

    +

    Type: "horizontal"| "vertical" | "responsive" | undefined

    +

    Default: "responsive"

    +

    Sets the app layout to horizontal or vertical. If set to "responsive" (the default) or undefined, the layout is vertical in small screens when the playground height is larger than its width, otherwise horizontal.

    +

    theme​

    +

    Type: "light" | "dark"

    +

    Default: "dark"

    +

    Sets the app theme to light/dark mode.

    +

    themeColor​

    +

    Type: string | undefined

    +

    Default: "hsl(214, 40%, 50%)"

    +

    A string representing a CSS color value, used to set the app theme color. It can be any valid CSS color value, such as "#4DB39E", "rgb(245, 225, 49)", "hsl(324, 40%, 50%)" and "lightblue".

    +

    editorTheme​

    +

    Type: EditorTheme[] | string | undefined

    +

    Default: undefined

    +

    Sets the code editor themes.

    +
    Note

    You can preview and set editor themes in the editor settings screen.

    +

    Three code editors are supported in LiveCodes: Monaco (the default on desktop), CodeMirror (the default on mobile) and CodeJar (the default in codeblocks, in lite mode and in readonly playgrounds). Each editor has its own set of themes, represented by the types: MonacoTheme, CodemirrorTheme and CodejarTheme.

    +

    The editorTheme property can be used to set the editor theme for each editor and on light/dark modes. It can be set to an array of EditorTheme items or a string of comma-separated items.

    +

    Each item can be composed of:

    +

    editor: theme-name @app-theme

    +

    Where:

    +
      +
    • editor is the name of the editor ("monaco" | "codemirror" | "codejar"). [Optional]
      • +
    • theme-name is the name of the theme (e.g. "monokai"). [Required] +Valid theme names can be found here: + +
      • +
    • app-theme is the name of the app theme ("dark" | "light"). [Optional]
      • +
    +

    Examples:

    +
      +
    • "vs"
      • +
    • "monaco:twilight, codemirror:one-dark"
      • +
    • ["vs@light"]
      • +
    • ["vs@light", "vs-dark@dark"]
      • +
    • ["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]
      • +
    +

    Each EditorTheme item requires a theme name. The theme name can optionally be preceded with the editor name separated by a colon to specify the editor (e.g. "monaco:monokai"). It can also optionally be followed by the app theme separated by "@" (e.g. "monokai@dark").

    +

    Multiple EditorTheme items can be supplied (as array items or in the comma-separated string) to specify the theme for each editor and in dark and light modes. The order matters. The first valid item in the array or string for the current editor (monaco, codemirror or codejar) and app theme (light or dark) will be used. If no items match the current editor and app theme, the default theme for the editor and app theme will be used.

    +

    appLanguage​

    +

    Type: AppLanguage | undefined

    +

    Default: undefined

    +

    Spoken language code that sets the app UI language (e.g. "ar", "zh-CN"). Used in translations for internationalization. If undefined (the default), the language is automatically detected based on the user's browser settings and falls back to English, if detection fails or the language is not supported.

    +

    recoverUnsaved​

    +

    Type: boolean

    +

    Default: true

    +

    Enables recovering last unsaved project when the app is reopened.

    +

    welcome​

    +

    Type: boolean

    +

    Default: true

    +

    If true, the welcome screen is displayed when the app loads.

    +

    showSpacing​

    +

    Type: boolean

    +

    Default: false

    +

    Enables showing element spacing in the result page.

    +

    editor​

    +

    Type: "monaco" | "codemirror" | "codejar" | "auto" | undefined

    +

    Default: undefined

    +

    Selects the code editor to use.

    +

    If undefined (the default):
    +Monaco editor is used on desktop,
    +CodeMirror is used on mobile and in simple mode,
    +while CodeJar is used in codeblock mode, in lite mode and in readonly playgrounds.

    +

    If set to auto, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings.

    +

    fontFamily​

    +

    Type: string | undefined

    +

    Default: undefined

    +

    Sets the code editor font family.

    +

    fontSize​

    +

    Type: number | undefined

    +

    Default: undefined

    +

    Sets the code editor font size.

    +

    If undefined (the default), the font size is set to 14 for the full app and 12 for embeds.

    +

    useTabs​

    +

    Type: boolean

    +

    Default: false

    +

    If true, lines are indented with tabs instead of spaces. Also used in code formatting.

    +

    tabSize​

    +

    Type: number

    +

    Default: 2

    +

    The number of spaces per indentation-level. Also used in code formatting.

    +

    lineNumbers​

    +

    Type: boolean | "relative"

    +

    Default: true

    +

    Show line numbers in code editor. +If set to "relative", line numbers are shown relative to the current line. This can be useful with vim mode.

    +

    wordWrap​

    +

    Type: boolean

    +

    Default: false

    +

    Enables word-wrap for long lines.

    +

    closeBrackets​

    +

    Type: boolean

    +

    Default: true

    +

    Use auto-complete to close brackets and quotes.

    +

    foldRegions​

    +

    Type: boolean

    +

    Default: false

    +

    When set to true, regions marked by #region and #endregion comments are folded when the project is loaded.

    +

    emmet​

    +

    Type: boolean

    +

    Default: true

    +

    Enables Emmet.

    +

    editorMode​

    +

    Type: "vim" | "emacs" | undefined

    +

    Default: undefined

    +

    Sets editor mode.

    +

    semicolons​

    +

    Type: boolean

    +

    Default: true

    +

    Configures Prettier code formatter to use semi-colons.

    +

    singleQuote​

    +

    Type: boolean

    +

    Default: false

    +

    Configures Prettier code formatter to use single quotes instead of double quotes.

    +

    trailingComma​

    +

    Type: boolean

    +

    Default: true

    +

    Configures Prettier code formatter to use trailing commas.

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/configuration/index.html b/docs/configuration/index.html new file mode 100644 index 0000000..729f975 --- /dev/null +++ b/docs/configuration/index.html @@ -0,0 +1,17 @@ +Configuration | LiveCodes

    Configuration

    +

    LiveCodes is very flexible and provides a wide range of configuration options.

    +

    This can generally be achieved by:

    +

    Configuration Object​

    +

    A JavaScript object used for configuration and keeping state.

    +

    Query Parameters​

    +

    A flexible and convenient way to configure the app using URL query parameters

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/configuration/index.html.md b/docs/configuration/index.html.md new file mode 100644 index 0000000..6a7ffe0 --- /dev/null +++ b/docs/configuration/index.html.md @@ -0,0 +1,13 @@ +# Configuration + +LiveCodes is very flexible and provides a wide range of configuration options. + +This can generally be achieved by: + +### [Configuration Object](./configuration-object.html.md) + +A JavaScript object used for configuration and keeping state. + +### [Query Parameters](./query-params.html.md) + +A flexible and convenient way to configure the app using URL query parameters \ No newline at end of file diff --git a/docs/configuration/query-params.html.md b/docs/configuration/query-params.html.md new file mode 100644 index 0000000..e6a096c --- /dev/null +++ b/docs/configuration/query-params.html.md @@ -0,0 +1,163 @@ +# Query Parameters + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +A flexible and convenient way to configure the app is to use URL query parameters. +It allows configuration of a wide range of options, including those of the [configuration object](./configuration-object.html.md) and [embed options](../sdk/js-ts.html.md)#embed-options). + +
    +Example: + +``` +https://livecodes.io?js=console.log('Hello World!')&console=open +``` + + + +## Usage + +- All properties of [configuration object](./configuration-object.html.md) and [embed options](../sdk/js-ts.html.md)#embed-options) that have values of primitive types (e.g. string, number, boolean) can be assigned to a query parameter with the same name. + + These include: + [config](../sdk/js-ts.html.md)#config), + [import](../sdk/js-ts.html.md)#import), + [lite](../configuration/configuration-object.html.md)#mode), + [loading](../sdk/js-ts.html.md)#loading), + [template](../sdk/js-ts.html.md)#template), + [view](../configuration/configuration-object.html.md)#view), + [title](./configuration-object.html.md)#title), + [description](./configuration-object.html.md)#description), + [activeEditor](./configuration-object.html.md)#activeeditor), + [cssPreset](./configuration-object.html.md)#csspreset), + [readonly](./configuration-object.html.md)#readonly), + [allowLangChange](./configuration-object.html.md)#allowlangchange), + [mode](./configuration-object.html.md)#mode), + [autoupdate](./configuration-object.html.md)#autoupdate), + [autosave](./configuration-object.html.md)#autosave), + [delay](./configuration-object.html.md)#delay), + [formatOnsave](./configuration-object.html.md)#formatonsave), + [theme](./configuration-object.html.md)#theme), + [themeColor](./configuration-object.html.md)#themecolor), + [appLanguage](./configuration-object.html.md)#applanguage), + [recoverUnsaved](./configuration-object.html.md)#recoverunsaved), + [welcome](./configuration-object.html.md)#welcome), + [showSpacing](./configuration-object.html.md)#showspacing), + [layout](./configuration-object.html.md)#layout), + [editor](./configuration-object.html.md)#editor), + [editorTheme](./configuration-object.html.md)#editortheme), + [fontFamily](./configuration-object.html.md)#fontfamily), + [fontSize](./configuration-object.html.md)#fontsize), + [useTabs](./configuration-object.html.md)#usetabs), + [tabSize](./configuration-object.html.md)#tabsize), + [lineNumbers](./configuration-object.html.md)#linenumbers), + [wordWrap](./configuration-object.html.md)#wordwrap), + [closeBrackets](./configuration-object.html.md)#closebrackets), + [emmet](./configuration-object.html.md)#emmet), + [editorMode](./configuration-object.html.md)#editormode), + [semicolons](./configuration-object.html.md)#semicolons), + [singleQuote](./configuration-object.html.md)#singlequote), + [trailingComma](./configuration-object.html.md)#trailingcomma). + + Example: + + ``` + ?theme=light&delay=500&lineNumbers=false + ``` + +- Any value given for booleans except `"false"` (including no value) will be considered `true`. + + Example: all these are considered `true` + + ``` + ?lite=true + ?lite=1 + ?lite=any + ?lite + ``` + + while this is considered `false` + + ``` + ?lite=false + ``` + +- Parameters that expect array of values can be supplied with comma separated values. These include: + [tags](./configuration-object.html.md)#tags), + [languages](./configuration-object.html.md)#languages), + [processors](./configuration-object.html.md)#processors), + [stylesheets](./configuration-object.html.md)#stylesheets), + [scripts](./configuration-object.html.md)#scripts). + + Example: + + ``` + ?languages=html,md,css,ts + ``` + +- Values set in the URL query parameters override those set in [configuration object](./configuration-object.html.md). + +- Unlike [user settings](../features/user-settings.html.md) that are set in the UI which are saved and subsequently used, those that are set in query parameters are not automatically saved. + +- Additional query parameters include: + + - `no-defaults`: `boolean` (Default: `false`). + + If `true`, the app will not load the [default template/language](../features/default-template-language.html.md). + + - `x`: `string`. + + Alias to [`import`](../sdk/js-ts.html.md)#import) (a URL to [import](../features/import.html.md)). + + - `files`: `string`. + + A comma-separated [list of files to import](../features/import.html.md)#file-selection). + + - `raw`: [`Language`](../api/type-aliases/Language.md). + + When used with `import` or `x`, imports the URL as code of the provided language. + + - `language`: [`Language`](../api/type-aliases/Language.md). + + The language to load by default in the editor. + + - `lang`: [`Language`](../api/type-aliases/Language.md). + + Alias to `language`. + + - `active`: `"markup" | "style" | "script" | 0 | 1 | 2`. + + Alias to [`activeEditor`](./configuration-object.html.md)#activeeditor). + + - `tools`: `"open" | "full" | "closed" | "console" | "compiled" | "tests" | "none"` + + The [tools pane](../features/tools-pane.html.md) status. + + - `console`: `"open" | "full" | "closed" | "none"` + + The [console](../features/console.html.md) status. + + - `compiled`: `"open" | "full" | "closed" | "none"` + + The [compiled code viewer](../features/compiled-code.html.md) status. + + - `tests`: `"open" | "full" | "closed" | "none"` + + The [tests panel](../features/tests.html.md) status. + + - `scrollPosition`: `boolean` (Default: `true`). + + If `false`, the [result page](../features/result.html.md) [scroll position](../features/result.html.md)#scroll-position) will not be maintained after reload. + + - Any [`Language`](../api/type-aliases/Language.md) can used as a query parameter, and the value will be used as its code. + + Example: + + ``` + https://livecodes.io?js=console.log('Hello World!') + ``` + +:::info Examples +For usage examples, check [storybook](pathname:///../stories/?path=/story/embed-options-params--select-language) and [unit tests](https://github.com/live-codes/livecodes/blob/develop/src/livecodes/config/__tests__/build-config.spec.ts). +::: + + \ No newline at end of file diff --git a/docs/configuration/query-params/index.html b/docs/configuration/query-params/index.html new file mode 100644 index 0000000..ab37635 --- /dev/null +++ b/docs/configuration/query-params/index.html @@ -0,0 +1,147 @@ +Query Parameters | LiveCodes

    Query Parameters

    + +

    A flexible and convenient way to configure the app is to use URL query parameters. +It allows configuration of a wide range of options, including those of the configuration object and embed options.

    +
    +

    Example:

    +
    https://livecodes.io?js=console.log('Hello World!')&console=open
    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "js": "console.log('Hello World!')",
        "console": "open"
      }
    };
    createPlayground('#container', options);

    +

    Usage​

    + +
    Examples

    For usage examples, check storybook and unit tests.

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/contact.html.md b/docs/contact.html.md new file mode 100644 index 0000000..0379773 --- /dev/null +++ b/docs/contact.html.md @@ -0,0 +1,18 @@ +# Contact {#contact-custom-content-none} + +We would love to hear from you! + +import ContactForm from '../src/components/ContactForm.tsx' +import MailLink from '../src/components/MailLink.tsx' + + + +Or you can send us an email to: + +- Info: +- Security: +- Sponsor: + +For non-security-related code issues, please report them in the [repo issues](https://github.com/live-codes/livecodes/issues). + +Please follow the twitter account: [@livecodes_io](https://twitter.com/livecodes_io). \ No newline at end of file diff --git a/docs/contact/index.html b/docs/contact/index.html new file mode 100644 index 0000000..6420b01 --- /dev/null +++ b/docs/contact/index.html @@ -0,0 +1,22 @@ +Contact | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/contribution.html.md b/docs/contribution.html.md new file mode 100644 index 0000000..c27bbb8 --- /dev/null +++ b/docs/contribution.html.md @@ -0,0 +1,13 @@ +# Contribution + +Contributions are always welcome, no matter how large or small. Before contributing, +please read the [code of conduct](https://github.com/live-codes/livecodes/blob/HEAD/CODE_OF_CONDUCT.html.md). + +For code contribution, please refer to the [contribution guide](https://github.com/live-codes/livecodes/blob/HEAD/CONTRIBUTING.html.md) +. + +For financial and in-kind contributions, please refer to the [sponsor page](./sponsor.html.md). + +You can always support the project by [giving feedback](https://github.com/live-codes/livecodes/discussions), [reporting issues, suggesting features](https://github.com/live-codes/livecodes/issues) and spreading the word. + +Thank you :) \ No newline at end of file diff --git a/docs/contribution/adding-languages/index.html b/docs/contribution/adding-languages/index.html new file mode 100644 index 0000000..39b59f8 --- /dev/null +++ b/docs/contribution/adding-languages/index.html @@ -0,0 +1,39 @@ +Adding Languages | LiveCodes

    Adding Languages

    +

    Criteria for a new language​

    +
      +
    • Has a syntax that needs to be compiled/transpiled to work in browsers (e.g. not a JS library).
      • +
    • A compiler/runtime that runs client-side in the browser (not on a remote server).
      • +
    • Its output can be represented in a web page.
      • +
    • Relatively popular (e.g. at least hundreds of GitHub stars/thousands of weekly downloads).
      • +
    • Not esoteric (otherwise, convince me if you have a good use case).
      • +
    • The compiler/runtime is still reasonably maintained.
      • +
    • The compiler/runtime has a permissive license compatible with MIT license.
      • +
    +

    If you still have doubts if the language qualifies, let's discuss it.

    +

    Checklist when adding​

    +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/contribution/i18n/index.html b/docs/contribution/i18n/index.html new file mode 100644 index 0000000..96b76f7 --- /dev/null +++ b/docs/contribution/i18n/index.html @@ -0,0 +1,169 @@ +i18n | LiveCodes

    i18n

    +

    This document provides a guide on how to contribute to the translation of the app.

    +

    For Translators​

    +

    Translators are responsible for translating the source texts on Lokalise.

    +

    Contribute to Translation​

    +

    Please visit the Lokalise project page to contribute to the translation of LiveCodes. You might find the Onboarding Guide for Translators on Lokalise helpful.

    +

    Add a New Language​

    +

    If you find that the language you want to translate to is not available on Lokalise, please kindly raise an issue in the repository with further details about the language you want to add.

    +

    Technical Overview​

    +

    The i18n framework i18next and the online translation collaboration platform Lokalise are used to manage the i18n of LiveCodes.

    +
    +

    It is recommended to read the related documentation of the above tools before continuing.

    +
    +

    The i18n workflow is designed to be source-based, which means that the source texts are extracted from the codebase and uploaded to Lokalise for translation. After the translation is complete, the translated texts are integrated back into the codebase. For more details, please refer to the Workflow section.

    +

    Two types of strings mentioned in the Strings section are considered as the source texts, and English is the source language.

    +

    Extracted source texts are stored in two forms under src/livecodes/i18n/locales/en:

    +
      +
    • .ts files: used by the app to load the source texts and provide type-safety for TypeScript
      • +
    • .lokalise.json files: used to upload the source texts to Lokalise
      • +
    +
    +

    These files are generated and kept in sync with each other by the i18n-export npm script. See the Scripts section for more details.

    +
    +

    Other directories under src/livecodes/i18n/locales are used to store the translated texts in other target languages, which only contain .ts files.

    +

    For Developers​

    +

    Developers are responsible for implementing new features or making changes to the existing codebase. When adding new strings or modifying existing strings, developers should ensure that the newly-edited strings are properly extracted and saved.

    +

    Strings​

    +

    Strings that need to be translated are located in both src/livecodes/html/*.html and other .ts files in src/livecodes (mostly in src/livecodes/UI/). These two different types of files, which also represent two types of translation methods, are handled differently in the i18n workflow:

    +

    Element-level Translation (HTML Files)​

    +

    In these files, strings are wrapped inside HTML elements with data-i18n attribute and two optional attributes (data-i18n-prop, data-i18n-interpolation). For example:

    +
    <div class="modal-title" data-i18n="assets.heading">Assets</div>

    <input
      id="search-assets"
      type="text"
      placeholder="Search"
      data-i18n="assets.search"
      data-i18n-prop="placeholder"
    />

    <div class="description" data-i18n="backup.backup.desc" data-i18n-prop="innerHTML">
      Backup LiveCodes data, so that it can be later restored on this or other devices. <br />
      Please visit the
      <a href="{{DOCS_BASE_URL}}features/backup-restore" target="_blank" rel="noopener"
        >documentations</a
      >
      for details.
    </div>
    +
    Keys​
    +

    The data-i18n attribute is used to specify the key of the string and is a period-separated string with each part being a lowerCamelCase word.

    +
    Value​
    +

    The value of the corresponding attribute of the element is used as the default / fallback value of the string.

    +
    Props​
    +

    The data-i18n-prop attribute is a space-separated list of properties that should be translated. If it is not present, the string will be translated as the textContent of the element. When two or more properties are specified, a "full key" (<key>.<property>, or <key>#<property> on Lokalise) will be used to identify the string. For example, for the following element:

    +
    <div title="This is a title" data-i18n="key.to.title" data-i18n-prop="title textContent">
      This is a content
    </div>
    +

    The string will be identified as key.to.title#title and key.to.title#textContent on Lokalise.

    +
    Abstract HTML Tags​
    +

    When the data-i18n-prop attribute is innerHTML, HTML tags inside the value will be abstracted during exporting, making the final source texts more readable. For example, the following value:

    +
    <div class="description" data-i18n="backup.backup.desc" data-i18n-prop="innerHTML">
      Backup LiveCodes data, so that it can be later restored on this or other devices. <br />
      Please visit the
      <a href="{{DOCS_BASE_URL}}features/backup-restore" target="_blank" rel="noopener"
        >documentations</a
      >
      for details.
    </div>
    +

    will be abstracted to:

    +
    Backup LiveCodes data, so that it can be later restored on this or other devices. <1></1> Please visit the <2>documentations</2> for details.
    +

    Although overriding specified attributes or adding new ones to the corresponding element is supported (<2 href="https://example.org">documentations</2>), it is not recommended to do so unless necessary (e.g., docs link for different languages).

    +
    Interpolation​
    +

    Interpolation is used to insert dynamic content into the string. The data-i18n-interpolation attribute is a JSON object string that contains the key-value pairs of the dynamic content. For example:

    +
    <div class="share-encoded-url-expiry">
      <span class="{{warnClass}}" data-i18n="share.characters">{{urlLength}} characters</span
      ><a href="#" data-i18n="share.shortURL">Get short URL</a>
    </div>
    +

    In related TypeScript files, the data-i18n-interpolation attribute should be set as follows:

    +
    charactersSpan.dataset.i18nInterpolation = JSON.stringify({ urlLength });
    +

    String-level Translation (TypeScript Files)​

    +

    In these files, strings are wrapped inside window.deps.translateString(key, value, interpolation) function calls. For example:

    +
    window.deps.translateString(
      'namespace:file.key1.subkey1',
      'default <strong>value</strong>, {{interpol}}',
      {
        isHTML: true,
        interpol: 'abc',
      },
    );

    window.deps.translateString('core.login.successWithName', 'Logged in as: {{name}}', {
      name: displayName,
    });
    +

    The function is completely type-safe:

    +
      +
    • The first argument is key, which is validated with valid keys in i18n/locales/en/.
      • +
    • The second argument is value. With the key provided, the type of value will be narrowed down to the value in the translation file to ensure all occurrences of the key have the same value. If this is an HTML string (with the isHTML attribute set to true), the value will automatically be abstracted when exporting the translation.
      • +
    • The third argument is interpolation, which could be omitted when the value doesn't contain any interpolation. Otherwise, it should be an object whose attributes are inferred from the value. Moreover, an additional isHTML boolean attribute is added to indicate whether the value contains HTML tags and should be abstracted when exporting the translation.
      • +
    +

    To provide better readability and maintainability, only string-level translation will be used in .ts files when it comes to dynamic content. For static content, element-level translation is still the best choice.

    +

    Scripts​

    +

    Several npm scripts are available to facilitate the i18n workflow:

    +
      +
    • vscode-intellisense: Generates the html.html-data.json file in the .vscode folder to enhance intellisense for the data-i18n attribute in HTML files in VSCode.
      • +
    • i18n-export: Extracts source texts from the codebase and generates .ts and .lokalise.json files under src/livecodes/i18n/locales/en. +
        +
      • The --save-tmp flag can be used to save the extracted source texts to i18n/locales/tmp instead of en for debugging purposes.
        • +
      +
      • +
    • i18n-update-push / i18n-upload.mjs: (Only used in CI and should not be run locally) Pushes the source texts in .lokasile.json files to Lokalise. +
        +
      • The <branch> argument is required to specify the branch to push to.
        • +
      • The --force flag can be used to skip the check for environment variable CI and allow running the script locally.
        • +
      +
      • +
    • i18n-update-pull / i18n-import.mjs: (Only used in CI and should not be run locally) Pulls the translated texts from Lokalise and updates the .ts files under src/livecodes/i18n/locales. Outdated translation will be deprecated during import. +
        +
      • The <branch> argument is required to specify the branch to pull from.
        • +
      • The --force flag can be used to skip the check for environment variable CI and allow running the script locally.
        • +
      • The --local flag can be used to let the script use local resources in the directory defined by the LOKALISE_TEMP environment variable instead of fetching from Lokalise.
        • +
      +
      • +
    • i18n-exclude: (Only used in other scripts and should not be run locally) Excludes all other i18n locales except for English from type checking, as they might stay outdated and cause errors. +
        +
      • The <phase> argument is required to specify whether the script is to exclude files or revert the exclusion. Valid values are pre and post.
        • +
      • This script only works when environment variable BUILD_INCLUDE_LOCALES is NOT set to true.
        • +
      +
      • +
    • i18n-lokalise-json: Generates .lokalise.json files from codebase for manually authoring translations on Lokalise. +
        +
      • Arguments to the script are required to specify the languages that the .lokalise.json files are generated from.
        • +
      • You can also use all to generate .lokalise.json files for all languages.
        • +
      • This script should not be used for the source language English. Use i18n-export instead.
        • +
      +
      • +
    +

    Please run i18n-export before pushing changes to the codebase to ensure that the source texts are up-to-date.

    +

    For Maintainers​

    +

    Maintainers are responsible for managing the i18n workflow and ensuring the quality of translations.

    +

    Workflow​

    +

    We consider the i18n process to consist of two parts:

    +

    No-Source Update​

    +

    This means there are no changes to the source code/texts, only translations are updated. Adding new languages or updating existing translations are examples of this part.

    +

    In such cases, there is a scheduled workflow i18n-update-scheduled to handle this. The workflow will sync from the master branch on Lokalise to the i18n/develop branch on the codebase, then automatically create a PR if there are any changes.

    +

    Basically, maintainers only need to focus on the following for this part:

    +
      +
    • Reviewing PRs created by the i18n-update-scheduled workflow
      • +
    • Do merging on Lokalise after they consider the translation for a specific feature is ready, before commenting .i18n-update-pull to trigger the i18n-update-pull workflow
      • +
    +

    Source Update​

    +

    This means new changes are made to the source code/texts. In this case, maintainers should follow the steps below:

    +
      +
    1. Developers work on the source code, developing new features or modifying existing ones. They use data-i18n and window.deps.translateString to mark the strings that need to be translated.
      2. +
    2. Once a new feature or version is ready, developers run npm run i18n-export to extract and update all marked strings, then export them to .lokalise.json and .ts files.
      3. +
    3. Developers commit and push the changes to the repository. A feature PR is created and reviewed, and related tests, checks, and manual review could be carried out.
      4. +
    4. After the PR is merged, an auto-generated comment will notify maintainers to comment .i18n-update-push to trigger the i18n-update-push workflow when they think it is ready.
      5. +
    5. Maintainers comment .i18n-update-push to trigger the i18n-update-push workflow. The workflow will create a new branch named i18n/<owner>/<head-branch>, run npm run i18n-export again to ensure the source texts are up-to-date, and push the changes. Then, it will push the changes to the i18n/<owner>/<head-branch> branch on Lokalise.
      6. +
    6. Translators can start translating the texts on Lokalise.
      7. +
    7. Once the translation is complete, maintainers can comment .i18n-update-pull to trigger the i18n-update-pull workflow. The workflow will pull the translated texts from Lokalise, update the .ts files under src/livecodes/i18n/locales, and commit the changes to the i18n/<owner>/<head-branch> branch. Then, it will create a PR to merge the changes back to the default branch develop.
      8. +
    8. Maintainers should perform a final review on the i18n PR and merge it if everything is fine. Meanwhile, a merging from the i18n/<owner>/<head-branch> to master should also be done to keep the master branch on Lokalise up-to-date.
      9. +
    +

    Minor Fixes / Updates​

    +

    Sometimes there is already an ongoing main prerelease branch with many features being developed and translated on Lokalise, and a minor fix or update to the prerelease branch is needed. In this case, maintainers should follow the steps below:

    +
      +
    1. Switch to develop branch.
      2. +
    2. Do i18n-export and upload corresponding .lokalise.json to the prerelease branch of the Lokalise project through web UI.
      3. +
    3. Affected entries will be updated and marked as unverified.
      4. +
    4. Provide correct translations in other languages on Lokalise.
      5. +
    +

    Here we do not want an extra i18n branch for simplicity, nor need to pull from Lokalise as we always consider English source strings from codebase as the latest version and do not recommend modifying them on Lokalise directly.

    +

    Github Actions (CI)​

    +

    Four i18n-related workflows are set up in the repository:

    +
      +
    • i18n-update-notify: Creates a comment on merged PRs to notify maintainers to trigger the i18n-update-push workflow.
      • +
    • i18n-update-push: Creates a new branch named i18n/<owner>/<head-branch>, runs npm run i18n-export again to ensure the source texts are up-to-date, pushes the changes on git, then pushes the changes to the i18n/<owner>/<head-branch> branch on Lokalise.
      • +
    • i18n-update-pull: Pulls the translated texts from Lokalise, updates the .ts files under src/livecodes/i18n/locales, commits the changes to the i18n/<owner>/<head-branch> branch, then creates a PR to merge the changes back to the default branch develop.
      • +
    • i18n-update-scheduled: Syncs between the master branch on Lokalise and the i18n/develop branch on the codebase, then automatically creates a PR if there are any changes.
      • +
    +

    Hashing and Cache​

    +

    After production build, file hashes are added to all files in build/livecodes/ directory. The hash is the checksum of the file content. So if the file content does not change, it will get the same hash across builds.

    +

    This assumes that all files to be hashed are in that directory (without nesting), and that they are referenced in code using placeholders like {{hash:file-name.js}}:

    +
    const mod = await import(baseUrl + '{{hash:file-name.js}}');
    +

    Then, these files are aggressively cached (for 1 year).

    +

    So, any file that has not changed will continue to be served from cache even for later releases.

    +

    File hashing is also applied to translation files during build, by auto-generating a path loader file that contains hard-coded hash placeholders for each translation file.

    +

    For Those Who Forked the Repo​

    +

    This repository is utilizing LiveCodes CI Github App to ensure the i18n workflow functions properly.

    +

    For forked repositories, maintainers should set up their own Lokalise project and Github App (see here) to handle the i18n workflow. Changes to related workflow files are necessary.

    +

    Secrets and Variables Checklist​

    +

    Repository Secrets​

    +
      +
    • LOKALISE_API_TOKEN
      • +
    • CI_APP_ID
      • +
    • CI_APP_PRIVATE_KEY
      • +
    +

    Repository Variables​

    +
      +
    • LOKALISE_PROJECT_ID
      • +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/contribution/index.html b/docs/contribution/index.html new file mode 100644 index 0000000..aca97b9 --- /dev/null +++ b/docs/contribution/index.html @@ -0,0 +1,18 @@ +Contribution | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/contribution/release/index.html b/docs/contribution/release/index.html new file mode 100644 index 0000000..76a68bc --- /dev/null +++ b/docs/contribution/release/index.html @@ -0,0 +1,47 @@ +Release | LiveCodes

    Release

    +

    To start a new release:

    +
      +
    • Checkout the branch develop.
      • +
    • Make sure there are no uncommitted changes.
      • +
    • Run npm run start-release and answer the prompts. This will: +
        +
      • Increment the version number:
        +App -> "./package.json" (appVersion)
        +SDK -> "./src/sdk/package.sdk.json" (version)
        • +
      • Generate changelog.
        • +
      • Create a release branch (releases/v{version} | releases/sdk-v{version}) and commit changes.
        • +
      • Push the branch to GitHub (which triggers a preview deploy).
        • +
      • Create a pull request to develop.
        • +
      +
      • +
    • Once the pull request is merged a GitHub action workflow runs, which will: +
        +
      • Build the app.
        • +
      • Create and push a release tag:
        +App -> v{version}
        +SDK -> sdk-v{version}
        • +
      • Compress the build directory to zip and tar files.
        • +
      • Create a release: +
          +
        • Use changelog as release notes.
          • +
        • Upload compressed files as release artifacts.
          • +
        +
        • +
      • Create a pull request to main.
        • +
      • If App release -> create a permanent URL (v{version}.livecodes.io) which is a proxy to preview deploy.
        • +
      • If SDK release -> publish to npm.
        • +
      +
      • +
    +
    info

    App versions are numeric e.g. v20
    +SDK versions are semver e.g. v1.2.3

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/credits.html.md b/docs/credits.html.md new file mode 100644 index 0000000..9c3a478 --- /dev/null +++ b/docs/credits.html.md @@ -0,0 +1,174 @@ +# Credits + +## Services + +LiveCodes uses services that are generously provided by: + +
    +

    + + Cloudflare Pages + +

    +

    + + jsDelivr + +

    +

    + + esm.sh + +

    +

    + + unpkg + +

    +

    + + Codeium + +

    +

    + + bundlejs + +

    +

    + + dpaste + +

    +

    + + GitHub + +

    +

    + + Netlify + +

    +

    + + SonarCloud + +

    +

    + + Codacy + +

    +

    + + BundleWatch + +

    +

    + + BrowserStack + +

    +

    + + Lokalise + +

    +
    +
    +## Third Party Packages + +Packages used by LiveCodes and their licenses are [listed here](https://github.com/live-codes/livecodes/blob/develop/vendor-licenses.html.md). + +## Prior Art + +Many of LiveCodes features/ideas were inspired by: + +- [CodePen](https://codepen.io/) +- [JSFiddle](https://jsfiddle.net/) +- [JS Bin](https://jsbin.com/) +- [CodeSandbox](https://codesandbox.io/) +- [Replit](https://replit.com/) +- [VS Code](https://code.visualstudio.com/) +- [Monacode](https://github.com/lukejacksonn/monacode/) + +Thank you ❤️ \ No newline at end of file diff --git a/docs/credits/index.html b/docs/credits/index.html new file mode 100644 index 0000000..2b7cab0 --- /dev/null +++ b/docs/credits/index.html @@ -0,0 +1,29 @@ +Credits | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/examples/display-modes/codeblock.html.md b/docs/examples/display-modes/codeblock.html.md new file mode 100644 index 0000000..8a05c39 --- /dev/null +++ b/docs/examples/display-modes/codeblock.html.md @@ -0,0 +1,5 @@ +# Display Mode: codeblock + +import LiveCodes from '../../../src/components/LiveCodes.tsx'; + + \ No newline at end of file diff --git a/docs/examples/display-modes/codeblock/index.html b/docs/examples/display-modes/codeblock/index.html new file mode 100644 index 0000000..49400cf --- /dev/null +++ b/docs/examples/display-modes/codeblock/index.html @@ -0,0 +1,13 @@ +codeblock | LiveCodes

    Display Mode: codeblock

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "mode": "codeblock"
      },
      "template": "react"
    };
    createPlayground('#container', options);

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/examples/display-modes/editor.html.md b/docs/examples/display-modes/editor.html.md new file mode 100644 index 0000000..a269563 --- /dev/null +++ b/docs/examples/display-modes/editor.html.md @@ -0,0 +1,5 @@ +# Display Mode: editor + +import LiveCodes from '../../../src/components/LiveCodes.tsx'; + + \ No newline at end of file diff --git a/docs/examples/display-modes/editor/index.html b/docs/examples/display-modes/editor/index.html new file mode 100644 index 0000000..8d3cbe4 --- /dev/null +++ b/docs/examples/display-modes/editor/index.html @@ -0,0 +1,13 @@ +editor | LiveCodes

    Display Mode: editor

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "mode": "editor"
      },
      "template": "react"
    };
    createPlayground('#container', options);

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/examples/display-modes/full.html.md b/docs/examples/display-modes/full.html.md new file mode 100644 index 0000000..3ddc3b2 --- /dev/null +++ b/docs/examples/display-modes/full.html.md @@ -0,0 +1,5 @@ +# Display Mode: full + +import LiveCodes from '../../../src/components/LiveCodes.tsx'; + + \ No newline at end of file diff --git a/docs/examples/display-modes/full/index.html b/docs/examples/display-modes/full/index.html new file mode 100644 index 0000000..89887a2 --- /dev/null +++ b/docs/examples/display-modes/full/index.html @@ -0,0 +1,13 @@ +full | LiveCodes

    Display Mode: full

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "react"
    };
    createPlayground('#container', options);

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/examples/display-modes/index.html b/docs/examples/display-modes/index.html new file mode 100644 index 0000000..3de8849 --- /dev/null +++ b/docs/examples/display-modes/index.html @@ -0,0 +1,13 @@ +Display Modes | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/examples/display-modes/index.html.md b/docs/examples/display-modes/index.html.md new file mode 100644 index 0000000..b9a1bae --- /dev/null +++ b/docs/examples/display-modes/index.html.md @@ -0,0 +1,6 @@ +# Display Modes + +import DocCardList from '@theme/DocCardList'; +import {useCurrentSidebarCategory} from '@docusaurus/theme-common'; + + \ No newline at end of file diff --git a/docs/examples/display-modes/result.html.md b/docs/examples/display-modes/result.html.md new file mode 100644 index 0000000..af1986a --- /dev/null +++ b/docs/examples/display-modes/result.html.md @@ -0,0 +1,5 @@ +# Display Mode: result + +import LiveCodes from '../../../src/components/LiveCodes.tsx'; + + \ No newline at end of file diff --git a/docs/examples/display-modes/result/index.html b/docs/examples/display-modes/result/index.html new file mode 100644 index 0000000..46cec9b --- /dev/null +++ b/docs/examples/display-modes/result/index.html @@ -0,0 +1,13 @@ +result | LiveCodes

    Display Mode: result

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "mode": "result"
      },
      "template": "react"
    };
    createPlayground('#container', options);

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/ai.html.md b/docs/features/ai.html.md new file mode 100644 index 0000000..7dfe933 --- /dev/null +++ b/docs/features/ai.html.md @@ -0,0 +1,79 @@ +# AI Code Assistant 🪄 + +LiveCodes supports AI-powered code completion, totally for **free** with **no account or API token required**, using [Codeium](https://codeium.com/), the ultrafast Copilot alternative. This can be easily enabled from the UI (as easy as [flipping a switch](#ui)!) + +The large generative machine learning model is capable of understanding the context of your code and comments (across the [3 code editors](./projects#markup-editor)) in order to generate suggestions on what you might want to type next. + +It has a wide range of language support, and it works everywhere (in the [standalone app](../getting-started.html.md)#standalone-app), [embedded playgrounds](./embeds.html.md) and [self-hosted](./self-hosting.html.md) apps). + +Powered by: + + + Codeium logo + +. + +## Examples: + +JavaScript: + + + +Python: + + + +## Instructions + +The AI code assistant can be enabled from: + +### UI + +The [editor settings](./editor-settings.html.md) screen (Settings menu → Editor Settings → Enable AI Code Assistant). + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-1.jpg) + +**Note** + +When set from the UI, this configuration is saved locally to [user settings](./user-settings.html.md) and is remembered across sessions. + +### Configuration + +Alternatively, this can be enabled (_only for the current session_) using the [`enableAI`](../configuration/configuration-object.html.md)#enableai) property in the [configuration object](../configuration/configuration-object.html.md). This can be used to enable the AI code assistant in [embedded playgrounds](./embeds.html.md). + +Example: + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container', { + config: { + // highlight-next-line + enableAI: true, + }, +}); +``` + +Also this can be enabled using [query params](../configuration/query-params.html.md) (e.g. https://livecodes.io/?enableAI). + +## Usage + +On typing, the code completion suggestions will be shown in dimmed color. Press Tab to accept, or Esc to cancel. + +On mobile, tap on the suggestion to accept it, or continue typing to reject. + +:::caution Note + +Please note that when using Codeium AI assistant, your code is sent to Codeium servers for code completion. However, your code is not used for training their model. Check Codeium [FAQ](https://codeium.com/faq#Will-Codeium-regurgitate-private-code%3F) and [privacy policy](https://codeium.com/privacy-policy) for more details. + +::: \ No newline at end of file diff --git a/docs/features/ai/index.html b/docs/features/ai/index.html new file mode 100644 index 0000000..fd19873 --- /dev/null +++ b/docs/features/ai/index.html @@ -0,0 +1,40 @@ +AI Code Assistant 🪄 | LiveCodes

    AI Code Assistant 🪄

    +

    LiveCodes supports AI-powered code completion, totally for free with no account or API token required, using Codeium, the ultrafast Copilot alternative. This can be easily enabled from the UI (as easy as flipping a switch!)

    +

    The large generative machine learning model is capable of understanding the context of your code and comments (across the 3 code editors) in order to generate suggestions on what you might want to type next.

    +

    It has a wide range of language support, and it works everywhere (in the standalone app, embedded playgrounds and self-hosted apps).

    +

    Powered by:

    +Codeium logo +

    .

    +

    Examples:​

    +

    JavaScript:

    + +

    Python:

    + +

    Instructions​

    +

    The AI code assistant can be enabled from:

    +

    UI​

    +

    The editor settings screen (Settings menu → Editor Settings → Enable AI Code Assistant).

    + + +

    LiveCodes Editor Settings

    +

    Note

    +

    When set from the UI, this configuration is saved locally to user settings and is remembered across sessions.

    +

    Configuration​

    +

    Alternatively, this can be enabled (only for the current session) using the enableAI property in the configuration object. This can be used to enable the AI code assistant in embedded playgrounds.

    +

    Example:

    +
    import { createPlayground } from 'livecodes';

    createPlayground('#container', {
      config: {
        enableAI: true,
      },
    });
    +

    Also this can be enabled using query params (e.g. https://livecodes.io/?enableAI).

    +

    Usage​

    +

    On typing, the code completion suggestions will be shown in dimmed color. Press Tab to accept, or Esc to cancel.

    +

    On mobile, tap on the suggestion to accept it, or continue typing to reject.

    +
    Note

    Please note that when using Codeium AI assistant, your code is sent to Codeium servers for code completion. However, your code is not used for training their model. Check Codeium FAQ and privacy policy for more details.

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/assets.html.md b/docs/features/assets.html.md new file mode 100644 index 0000000..64853b5 --- /dev/null +++ b/docs/features/assets.html.md @@ -0,0 +1,26 @@ +# Assets + +Adding local assets (e.g. images, fonts, stylesheets, scripts) that are not hosted online is such a common need that a UI was developed to allow easily adding them. + +The assets are saved locally on the user's device and are available across projects (i.e the same image can be used in different projects without having to add it multiple times). + +In addition, assets are supported in [sync](./sync.html.md), [backup](./backup-restore.html.md)#backup) and [restore](./backup-restore.html.md)#restore). + +The `Assets` screen can be accessed from Settings menu → Assets + +![Assets](/img/screenshots/assets-1.jpg) + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +Assets are either: + +- Encoded as [data URLs](./data-urls.html.md). +- Uploaded to a [GitHub Pages](https://pages.github.com/). This requires login with a [GitHub account](./github-integration.html.md) (allowing access to repos). A **public** repo called `livecodes-assets` is created if not present. The assets are pushed to `gh-pages` branch. They can then be accessed by URLs like: + + https://\{user\}.github.io/livecodes-assets/assets/... + +When an asset item is clicked, the URL is copied to clipboard. The URL can then be used in projects. + +![Assets](/img/screenshots/assets-2.jpg) \ No newline at end of file diff --git a/docs/features/assets/index.html b/docs/features/assets/index.html new file mode 100644 index 0000000..1e12b7b --- /dev/null +++ b/docs/features/assets/index.html @@ -0,0 +1,30 @@ +Assets | LiveCodes

    Assets

    +

    Adding local assets (e.g. images, fonts, stylesheets, scripts) that are not hosted online is such a common need that a UI was developed to allow easily adding them.

    +

    The assets are saved locally on the user's device and are available across projects (i.e the same image can be used in different projects without having to add it multiple times).

    +

    In addition, assets are supported in sync, backup and restore.

    +

    The Assets screen can be accessed from Settings menu → Assets

    +

    Assets

    + + +

    Assets are either:

    +
      +
    • +

      Encoded as data URLs.

      +
      • +
    • +

      Uploaded to a GitHub Pages. This requires login with a GitHub account (allowing access to repos). A public repo called livecodes-assets is created if not present. The assets are pushed to gh-pages branch. They can then be accessed by URLs like:

      +

      https://{user}.github.io/livecodes-assets/assets/...

      +
      • +
    +

    When an asset item is clicked, the URL is copied to clipboard. The URL can then be used in projects.

    +

    Assets

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/backup-restore.html.md b/docs/features/backup-restore.html.md new file mode 100644 index 0000000..4a4c185 --- /dev/null +++ b/docs/features/backup-restore.html.md @@ -0,0 +1,38 @@ +# Backup / Restore + +LiveCodes data can be backed-up, so that it can be later restored on the same or different device. + +The Backup/Restore screen can be accessed from the Settings menu → Backup / Restore. + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +## Backup + +![LiveCode Backup](../../static/img/screenshots/backup-restore-1.jpg) + +The backup can include one or more of the following: + +- [Projects](./projects.html.md) +- [User Templates](./templates.html.md) +- [Code Snippets](./snippets.html.md) +- [Assets](./assets.html.md) +- [User Settings](./user-settings.html.md) + +A zip file containing the (base64-encoded binary) backup data is downloaded. This file can be restored later on the same or different device. + +## Restore + +![LiveCode Restore](../../static/img/screenshots/backup-restore-2.jpg) + +When restoring a backup, there are 2 options for managing the current data: + +1. The current data can be deleted and replaced by the backup data. It cannot then be retrieved, so you may want to back it up first. + +2. The backup data can be merged with the current data with best effort to preserve both. + +## Related + +- [Sync](./sync.html.md) +- [Export](./export.html.md) \ No newline at end of file diff --git a/docs/features/backup-restore/index.html b/docs/features/backup-restore/index.html new file mode 100644 index 0000000..ce91376 --- /dev/null +++ b/docs/features/backup-restore/index.html @@ -0,0 +1,42 @@ +Backup / Restore | LiveCodes

    Backup / Restore

    +

    LiveCodes data can be backed-up, so that it can be later restored on the same or different device.

    +

    The Backup/Restore screen can be accessed from the Settings menu → Backup / Restore.

    + + +

    Backup​

    +

    LiveCode Backup

    +

    The backup can include one or more of the following:

    + +

    A zip file containing the (base64-encoded binary) backup data is downloaded. This file can be restored later on the same or different device.

    +

    Restore​

    +

    LiveCode Restore

    +

    When restoring a backup, there are 2 options for managing the current data:

    +
      +
    1. +

      The current data can be deleted and replaced by the backup data. It cannot then be retrieved, so you may want to back it up first.

      +
      2. +
    2. +

      The backup data can be merged with the current data with best effort to preserve both.

      +
      3. +
    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/broadcast.html.md b/docs/features/broadcast.html.md new file mode 100644 index 0000000..dd209f1 --- /dev/null +++ b/docs/features/broadcast.html.md @@ -0,0 +1,94 @@ +# Broadcast + +## Overview + +LiveCodes Broadcast allows sending the [result page](./result.html.md) (and optionally source & compiled code and project configuration) to custom API. This can be used to live-view result page updates on different browsers/devices in real-time or broadcast live-coding sessions. + +:::note + +Broadcast can only be performed from the full app, and not from embedded playgrounds. + +::: + +The `Broadcast` screen can be accessed from the Broadcast icon in the [tools pane](./tools-pane.html.md) (below the result page), or from the Project menu → Broadcast. + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +![Broadcast UI](./../../static/img/screenshots/broadcast-1.jpg) + +On connecting to the server, the channel URL returned by the server is displayed. The channel URL can be shared to different clients (browsers on same or different devices) to view result page or code updates in real-time. + +If the option `Include source code` is enabled, the source and compiled code together with the current project configuration are also posted to the server with each update. + +![Broadcast UI - broadcasting](./../../static/img/screenshots/broadcast-2.jpg) + +The Broadcast icon (in tools pane), shows the broadcast status. Clicking the icon, opens the broadcast UI, where the channel URL is displayed and the broadcast can be stopped. + +![Broadcast icon - broadcasting](./../../static/img/screenshots/broadcast-3.jpg) + +:::info Server + +An open-source example implementation of an API server is available on: [live-codes/broadcast](https://github.com/live-codes/broadcast). + +It is a [simple implementation](https://github.com/live-codes/broadcast/blob/main/index.js), which you can use or extend. It makes use of LiveCodes [Embeds](./embeds.html.md) and [SDK](../sdk/index.html.md) for code broadcasting. + +A demo, free-to-test, instance is hosted on: +https://livecodes-broadcast.onrender.com/ (low resources - sleeps after 15 minutes of inactivity) + +You can use one of these links to self-host it: + + + Deploy to Render + +    + + Deploy to Heroku + + +::: + +:::tip Hosted API + +[LiveCodes sponsors](../sponsor.html.md) (bronze sponsors and above) get access to a hosted (always-on) API, which they can use without having to manage their own server. + +::: + +These are screenshots for the live-updated result page and code: + +![Broadcasting result](./../../static/img/screenshots/broadcast-4.jpg) + +![Broadcasting code](./../../static/img/screenshots/broadcast-5.jpg) + +## Technical Details + +When starting a broadcast, the app sends a `POST` request to the specified server with a body that has the following properties: + +- `result`: a string with the result page html. +- `data` (Only if `Include source code` option is enabled): an object containing source and compiled code together with the current project configuration. +- `userToken` (Optional): Can be used by the server to authorize users who can broadcast (see below how to set it). + +When the server successfully creates a channel, it should respond by sending a JSON object with the following properties: + +- `channel`: a string representing the channel Id. +- `channelUrl`: a string with the URL of the channel that can be shared to the clients who want to connect to it. +- `channelToken`: a string representing a secret token for this channel, to prevent others from sending to the same channel. This is only sent once (in response to the request that created the channel). + +The `channel` and `channelToken` are remembered by the app, and are sent in subsequent requests for the same channel (with every result page update). They are deleted when stopping broadcast or when the app reloads. + +:::note + +To set a `userToken` for authorization with a broadcast server, run the following in the browser console: + +```js +await livecodes.exec('setBroadcastToken', 'my-token'); +``` + +The supplied value (in this case `my-token`) will be posted to the server with every update as the value for the property `userToken`. + +This value is saved for the current user across app reloads. \ No newline at end of file diff --git a/docs/features/broadcast/index.html b/docs/features/broadcast/index.html new file mode 100644 index 0000000..1931d33 --- /dev/null +++ b/docs/features/broadcast/index.html @@ -0,0 +1,44 @@ +Broadcast | LiveCodes

    Broadcast

    +

    Overview​

    +

    LiveCodes Broadcast allows sending the result page (and optionally source & compiled code and project configuration) to custom API. This can be used to live-view result page updates on different browsers/devices in real-time or broadcast live-coding sessions.

    +
    note

    Broadcast can only be performed from the full app, and not from embedded playgrounds.

    +

    The Broadcast screen can be accessed from the Broadcast icon in the tools pane (below the result page), or from the Project menu → Broadcast.

    + + +

    Broadcast UI

    +

    On connecting to the server, the channel URL returned by the server is displayed. The channel URL can be shared to different clients (browsers on same or different devices) to view result page or code updates in real-time.

    +

    If the option Include source code is enabled, the source and compiled code together with the current project configuration are also posted to the server with each update.

    +

    Broadcast UI - broadcasting

    +

    The Broadcast icon (in tools pane), shows the broadcast status. Clicking the icon, opens the broadcast UI, where the channel URL is displayed and the broadcast can be stopped.

    +

    Broadcast icon - broadcasting

    +
    Server

    An open-source example implementation of an API server is available on: live-codes/broadcast.

    It is a simple implementation, which you can use or extend. It makes use of LiveCodes Embeds and SDK for code broadcasting.

    A demo, free-to-test, instance is hosted on: +https://livecodes-broadcast.onrender.com/ (low resources - sleeps after 15 minutes of inactivity)

    You can use one of these links to self-host it:

    Deploy to Render

       

    Deploy to Heroku
    +
    Hosted API

    LiveCodes sponsors (bronze sponsors and above) get access to a hosted (always-on) API, which they can use without having to manage their own server.

    +

    These are screenshots for the live-updated result page and code:

    +

    Broadcasting result

    +

    Broadcasting code

    +

    Technical Details​

    +

    When starting a broadcast, the app sends a POST request to the specified server with a body that has the following properties:

    +
      +
    • result: a string with the result page html.
      • +
    • data (Only if Include source code option is enabled): an object containing source and compiled code together with the current project configuration.
      • +
    • userToken (Optional): Can be used by the server to authorize users who can broadcast (see below how to set it).
      • +
    +

    When the server successfully creates a channel, it should respond by sending a JSON object with the following properties:

    +
      +
    • channel: a string representing the channel Id.
      • +
    • channelUrl: a string with the URL of the channel that can be shared to the clients who want to connect to it.
      • +
    • channelToken: a string representing a secret token for this channel, to prevent others from sending to the same channel. This is only sent once (in response to the request that created the channel).
      • +
    +

    The channel and channelToken are remembered by the app, and are sent in subsequent requests for the same channel (with every result page update). They are deleted when stopping broadcast or when the app reloads.

    +
    note

    To set a userToken for authorization with a broadcast server, run the following in the browser console:

    await livecodes.exec('setBroadcastToken', 'my-token');

    The supplied value (in this case my-token) will be posted to the server with every update as the value for the property userToken.

    This value is saved for the current user across app reloads.

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/code-format.html.md b/docs/features/code-format.html.md new file mode 100644 index 0000000..bf1c679 --- /dev/null +++ b/docs/features/code-format.html.md @@ -0,0 +1,52 @@ +# Code Format + +Code formatting is supported for most [languages](../languages/index.html.md). + +## Code Formatters + +The code formatter used for each language is specified in the [language documentation](../languages/index.html.md) page. + +For example: + +- [Prettier](https://prettier.io/) is used for many languages including HTML, CSS, JavaScript, TypeScript, JSX, TSX. +- [gofmt](https://pkg.go.dev/cmd/gofmt) (via [GopherJS](https://github.com/gopherjs/gopherjs)) is used for Go. +- [Parinfer](https://shaunlebron.github.io/parinfer/) is used for Scheme, Common Lisp and ClojureScript. + +## Format Button + +Code formatting for the code in the active editor can be triggered by the `Format` button below the editor. + +![code format](../../static/img/screenshots/format-1.jpg) + +## Keyboard Shortcut + +Code formatting can also be trigger by the keyboard shortcut Alt + Shift + F. + +## Format on-save + +Format on-save can be enabled from the Settings menu → Format on-save. + +## Format Options + +Some format options can be configured from [Editor Settings](./editor-settings.html.md) screen. These include [Prettier](https://prettier.io/) [configuration options](https://prettier.io/docs/en/options.html) for: + +- Indentation (Spaces/Tabs) +- Tab size +- Use Semicolons +- Use Single Quotes +- Use Trailing Commas + +## Configuration + +Code format can be configured using the [configuration object](../configuration/configuration-object.html.md) properties: + +- [`formatOnsave`](../configuration/configuration-object.html.md)#formatonsave) +- [`useTabs`](../configuration/configuration-object.html.md)#usetabs) +- [`tabSize`](../configuration/configuration-object.html.md)#tabsize) +- [`semicolons`](../configuration/configuration-object.html.md)#semicolons) +- [`singleQuote`](../configuration/configuration-object.html.md)#singlequote) +- [`trailingComma`](../configuration/configuration-object.html.md)#trailingcomma) + +## SDK Method: `format` + +The code format can be programmatically triggered by the [SDK](../sdk/index.html.md) method [`format`](../sdk/js-ts.html.md)#format). \ No newline at end of file diff --git a/docs/features/code-format/index.html b/docs/features/code-format/index.html new file mode 100644 index 0000000..de02f85 --- /dev/null +++ b/docs/features/code-format/index.html @@ -0,0 +1,48 @@ +Code Format | LiveCodes

    Code Format

    +

    Code formatting is supported for most languages.

    +

    Code Formatters​

    +

    The code formatter used for each language is specified in the language documentation page.

    +

    For example:

    +
      +
    • Prettier is used for many languages including HTML, CSS, JavaScript, TypeScript, JSX, TSX.
      • +
    • gofmt (via GopherJS) is used for Go.
      • +
    • Parinfer is used for Scheme, Common Lisp and ClojureScript.
      • +
    +

    Format Button​

    +

    Code formatting for the code in the active editor can be triggered by the Format button below the editor.

    +

    code format

    +

    Keyboard Shortcut​

    +

    Code formatting can also be trigger by the keyboard shortcut Alt + Shift + F.

    +

    Format on-save​

    +

    Format on-save can be enabled from the Settings menu → Format on-save.

    +

    Format Options​

    +

    Some format options can be configured from Editor Settings screen. These include Prettier configuration options for:

    +
      +
    • Indentation (Spaces/Tabs)
      • +
    • Tab size
      • +
    • Use Semicolons
      • +
    • Use Single Quotes
      • +
    • Use Trailing Commas
      • +
    +

    Configuration​

    +

    Code format can be configured using the configuration object properties:

    + +

    SDK Method: format​

    +

    The code format can be programmatically triggered by the SDK method format.

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/code-prefill.html.md b/docs/features/code-prefill.html.md new file mode 100644 index 0000000..8d6fce2 --- /dev/null +++ b/docs/features/code-prefill.html.md @@ -0,0 +1,71 @@ +# Code Prefill + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +There are many ways to pre-fill code into playgrounds. This is generally achieved either by the [SDK](../sdk/index.html.md) or using [query params](../configuration/query-params.html.md). + +## Prefill using SDK + +When creating an embedded playground, the following [embed options](../sdk/js-ts.html.md)#embed-options) allow prefill with code: + +### config + +[EmbedOptions.config](../sdk/js-ts.html.md)#config) + +loads a [configuration object](../configuration/configuration-object.html.md) (or a URL to JSON file representing the configuration object) + +Hello World!' }, + style: { language: 'css', content: 'h1 { color: blue; }' }, + }} +> + +### import + +[EmbedOptions.import](../sdk/js-ts.html.md)#import) + +allows [importing](./import.html.md) from many sources. + +Examples: + +Import GitHub directory: + + + +Import shared project: + + + +### template + +[EmbedOptions.template](../sdk/js-ts.html.md)#template) + +loads one of the [starter templates](./templates.html.md). + + + +## Prefill using query params + +[Query parameters](../configuration/query-params.html.md) can provide easy and powerful ways for configuring the playground. + +Example: + + + {'https://livecodes.io/?md=**Hello World!**'} + +
    +
    + + + +## Auto-Prefill from page DOM + +TODO... + +## Related + +- [Import](./import.html.md) +- [Templates](./templates.html.md) +- [Configuration](../configuration/index.html.md) +- [SDK](../sdk/index.html.md) \ No newline at end of file diff --git a/docs/features/code-prefill/index.html b/docs/features/code-prefill/index.html new file mode 100644 index 0000000..fb0c797 --- /dev/null +++ b/docs/features/code-prefill/index.html @@ -0,0 +1,47 @@ +Code Prefill | LiveCodes

    Code Prefill

    + +

    There are many ways to pre-fill code into playgrounds. This is generally achieved either by the SDK or using query params.

    +

    Prefill using SDK​

    +

    When creating an embedded playground, the following embed options allow prefill with code:

    +

    config​

    +

    EmbedOptions.config

    +

    loads a configuration object (or a URL to JSON file representing the configuration object)

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "html",
          "content": "<h1>Hello World!</h1>"
        },
        "style": {
          "language": "css",
          "content": "h1 { color: blue; }"
        }
      }
    };
    createPlayground('#container', options);

    +

    import​

    +

    EmbedOptions.import

    +

    allows importing from many sources.

    +

    Examples:

    +

    Import GitHub directory:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "import": "https://github.com/bradtraversy/50projects50days/tree/master/progress-steps"
    };
    createPlayground('#container', options);

    +

    Import shared project:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "import": "id/6ys2b8txf33"
    };
    createPlayground('#container', options);

    +

    template​

    +

    EmbedOptions.template

    +

    loads one of the starter templates.

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "react"
    };
    createPlayground('#container', options);

    +

    Prefill using query params​

    +

    Query parameters can provide easy and powerful ways for configuring the playground.

    +

    Example:

    +https://livecodes.io/?md=**Hello World!** +
    +
    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "md": "**Hello World!**"
      }
    };
    createPlayground('#container', options);

    +

    Auto-Prefill from page DOM​

    +

    TODO...

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/code-to-image.html.md b/docs/features/code-to-image.html.md new file mode 100644 index 0000000..156daf3 --- /dev/null +++ b/docs/features/code-to-image.html.md @@ -0,0 +1,23 @@ +# Code to Image + +LiveCodes has a feature called "Code to Image" that allows converting the code in the code editor into nice-looking images (or code screenshots), that can be downloaded or shared. + +This can be accessed from the camera icon in the toolbar below the editor. Clicking the icon will open the "Code to Image" screen and load the code in the editor. + +![Code to Image](../../static/img/screenshots/code-to-image-1.jpg) + +Code can be modified in the "Code to Image" screen and then downloaded as image or shared. + +![Code to Image](../../static/img/screenshots/code-to-image-2.jpg) + +There are many options to configure the image to be generated, including background color, border radius, image size, padding, shadow, window style, share URL, editor theme, opacity, code font, image format, etc. + +There are multiple presets that can be used or the options can be manually configured. + +![Code to Image](../../static/img/screenshots/code-to-image-3.jpg) + +![Code to Image](../../static/img/screenshots/code-to-image-4.jpg) + +![Code to Image](../../static/img/screenshots/code-to-image-5.jpg) + +![Code to Image](../../static/img/screenshots/code-to-image-6.jpg) \ No newline at end of file diff --git a/docs/features/code-to-image/index.html b/docs/features/code-to-image/index.html new file mode 100644 index 0000000..eeae6c6 --- /dev/null +++ b/docs/features/code-to-image/index.html @@ -0,0 +1,22 @@ +Code to Image | LiveCodes

    Code to Image

    +

    LiveCodes has a feature called "Code to Image" that allows converting the code in the code editor into nice-looking images (or code screenshots), that can be downloaded or shared.

    +

    This can be accessed from the camera icon in the toolbar below the editor. Clicking the icon will open the "Code to Image" screen and load the code in the editor.

    +

    Code to Image

    +

    Code can be modified in the "Code to Image" screen and then downloaded as image or shared.

    +

    Code to Image

    +

    There are many options to configure the image to be generated, including background color, border radius, image size, padding, shadow, window style, share URL, editor theme, opacity, code font, image format, etc.

    +

    There are multiple presets that can be used or the options can be manually configured.

    +

    Code to Image

    +

    Code to Image

    +

    Code to Image

    +

    Code to Image

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/command-menu.html.md b/docs/features/command-menu.html.md new file mode 100644 index 0000000..8706691 --- /dev/null +++ b/docs/features/command-menu.html.md @@ -0,0 +1,34 @@ +# Command Menu + +The command menu allows running a large set of commands from the UI. It is keyboard-friendly and allows for searching and selecting commands. Most of the functionality of LiveCodes can be achieved using the command menu, which can really improve productivity and DX. + +It can be triggered from the keyboard by pressing Ctrl + K (or ⌘ + K on Mac), or from the Help Menu. + +![Open Command Menu from UI](../../static/img/screenshots/command-menu-1.jpg) + +The available commands cover a wide range of functionality, like showing and hiding UI elements (e.g. different editors, the [result page](./result.html.md), [console](./console.html.md), [compiled code viewer](./compiled-code.html.md), and [tests](./tests.html.md)), changing [languages](../languages), loading [starter templates](./templates.html.md), opening different screens (e.g. new project, opening saved projects, [import](./import.html.md), [embeds](./embeds.html.md), [deploy](./deploy.html.md), [share](./share.html.md) and more). +In addition many commands can be executed from the command menu, such as running code, formatting code, changing settings (e.g. autorun, autosave, [AI code assistant](./ai.html.md), changing [themes](./themes.html.md), [editor settings](./editor-settings.html.md), and more). + +![LiveCodes Command Menu](../../static/img/screenshots/command-menu-2.jpg) + +![LiveCodes Command Menu](../../static/img/screenshots/command-menu-3.jpg) + +![LiveCodes Command Menu](../../static/img/screenshots/command-menu-4.jpg) + +## Using the Command Menu + +Commands can be navigated and selected by: + +- The mouse: scrolling and clicking +- The keyboard: using the up and down arrow keys to navigate, pressing Enter to select, Backspace to move to parent category and Esc to close the command menu. +- Searching: typing in the search box for fuzzy search. + +![LiveCodes Command Menu](../../static/img/screenshots/command-menu-5.jpg) + +![LiveCodes Command Menu](../../static/img/screenshots/command-menu-6.jpg) + +## Keyboard Shortcuts + +If a command has a keyboard shortcut, it will be shown in the command menu. In addition, the whole list of keyboard shortcuts can be opened from the command menu (by searching for "Keyboard Shortcuts") or from the UI from the Help Menu. + +![Keyboard Shortcuts](../../static/img/screenshots/keyboard-shortcuts.jpg) \ No newline at end of file diff --git a/docs/features/command-menu/index.html b/docs/features/command-menu/index.html new file mode 100644 index 0000000..941140e --- /dev/null +++ b/docs/features/command-menu/index.html @@ -0,0 +1,31 @@ +Command Menu | LiveCodes

    Command Menu

    +

    The command menu allows running a large set of commands from the UI. It is keyboard-friendly and allows for searching and selecting commands. Most of the functionality of LiveCodes can be achieved using the command menu, which can really improve productivity and DX.

    +

    It can be triggered from the keyboard by pressing Ctrl + K (or ⌘ + K on Mac), or from the Help Menu.

    +

    Open Command Menu from UI

    +

    The available commands cover a wide range of functionality, like showing and hiding UI elements (e.g. different editors, the result page, console, compiled code viewer, and tests), changing languages, loading starter templates, opening different screens (e.g. new project, opening saved projects, import, embeds, deploy, share and more). +In addition many commands can be executed from the command menu, such as running code, formatting code, changing settings (e.g. autorun, autosave, AI code assistant, changing themes, editor settings, and more).

    +

    LiveCodes Command Menu

    +

    LiveCodes Command Menu

    +

    LiveCodes Command Menu

    +

    Using the Command Menu​

    +

    Commands can be navigated and selected by:

    +
      +
    • The mouse: scrolling and clicking
      • +
    • The keyboard: using the up and down arrow keys to navigate, pressing Enter to select, Backspace to move to parent category and Esc to close the command menu.
      • +
    • Searching: typing in the search box for fuzzy search.
      • +
    +

    LiveCodes Command Menu

    +

    LiveCodes Command Menu

    +

    Keyboard Shortcuts​

    +

    If a command has a keyboard shortcut, it will be shown in the command menu. In addition, the whole list of keyboard shortcuts can be opened from the command menu (by searching for "Keyboard Shortcuts") or from the UI from the Help Menu.

    +

    Keyboard Shortcuts

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/compiled-code.html.md b/docs/features/compiled-code.html.md new file mode 100644 index 0000000..393c7eb --- /dev/null +++ b/docs/features/compiled-code.html.md @@ -0,0 +1,19 @@ +# Compiled Code + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The resulting compiled/transpiled code can be seen in the compiled code viewer (in the [tools pane](./tools-pane.html.md)) in real-time, as you type. This works for all compiled code (e.g. Markdown, Pug, SCSS, Less, Stylus, Typescript, CoffeeScript, ...etc.). + +This can be a great tool for learning. As you write code, you see the compiled code and the resulting page at the same time. The compiled code viewer shows the code compiled from the currently active editor (markup/style/script). This includes the CSS produced by CSS processors (e.g. Autoprefixer), if enabled. + +![Compiled Code Viewer](./../../static/img/screenshots/compiled-code-1.jpg) + +e.g. https://livecodes.io/?ts&compiled=full
    +sets TypeScript as the active editor and shows compiled code viewer maximized. + +This demo shows TypeScript code along with the compiled Javascript code, similar to the [official TypeScript Playground](https://www.typescriptlang.org/play): + + \ No newline at end of file diff --git a/docs/features/compiled-code/index.html b/docs/features/compiled-code/index.html new file mode 100644 index 0000000..bb5c0f7 --- /dev/null +++ b/docs/features/compiled-code/index.html @@ -0,0 +1,19 @@ +Compiled Code | LiveCodes

    Compiled Code

    + +

    The resulting compiled/transpiled code can be seen in the compiled code viewer (in the tools pane) in real-time, as you type. This works for all compiled code (e.g. Markdown, Pug, SCSS, Less, Stylus, Typescript, CoffeeScript, ...etc.).

    +

    This can be a great tool for learning. As you write code, you see the compiled code and the resulting page at the same time. The compiled code viewer shows the code compiled from the currently active editor (markup/style/script). This includes the CSS produced by CSS processors (e.g. Autoprefixer), if enabled.

    +

    Compiled Code Viewer

    +

    e.g. https://livecodes.io/?ts&compiled=full
    +sets TypeScript as the active editor and shows compiled code viewer maximized.

    +

    This demo shows TypeScript code along with the compiled Javascript code, similar to the official TypeScript Playground:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "import": "https://gist.github.com/hatemhosny/4bed283ef9757a6a541aee685c710dc7",
      "params": {
        "ts-selector": "playground.ts",
        "activeEditor": "script",
        "compiled": "full"
      }
    };
    createPlayground('#container', options);

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/console.html.md b/docs/features/console.html.md new file mode 100644 index 0000000..0f7bf65 --- /dev/null +++ b/docs/features/console.html.md @@ -0,0 +1,36 @@ +# Console + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +Console messages are shown in the integrated console (in the [tools pane](./tools-pane.html.md), below the result page), without having to open the native browser console. + +Messages can be sent to the console using the standard `console` methods in the code editor (e.g. `console.log`, `console.warn`, `console.error`, `console.table`, ...etc). The console can also be used as REPL (read–eval–print loop) using the integrated console input. + +The code is evaluated in the context of the result page (i.e. variables defined in the script editor are accessible for evaluation in the console input). Also code completion works in the console input. + +e.g. https://livecodes.io/?ts&console=full
    +sets TypeScript as the active editor and shows the console maximized. + +Demo: (console=full) + + + +

     

    + +:::tip + +Setting the querystring `languages` only shows these languages. +Selecting one language and setting console to `full` gives an environment similar to a REPL. + +::: + +Demo: (Python - print to console) + + \ No newline at end of file diff --git a/docs/features/console/index.html b/docs/features/console/index.html new file mode 100644 index 0000000..93188f9 --- /dev/null +++ b/docs/features/console/index.html @@ -0,0 +1,24 @@ +Console | LiveCodes

    Console

    + +

    Console messages are shown in the integrated console (in the tools pane, below the result page), without having to open the native browser console.

    +

    Messages can be sent to the console using the standard console methods in the code editor (e.g. console.log, console.warn, console.error, console.table, ...etc). The console can also be used as REPL (read–eval–print loop) using the integrated console input.

    +

    The code is evaluated in the context of the result page (i.e. variables defined in the script editor are accessible for evaluation in the console input). Also code completion works in the console input.

    +

    e.g. https://livecodes.io/?ts&console=full
    +sets TypeScript as the active editor and shows the console maximized.

    +

    Demo: (console=full)

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "console": "full",
        "js": "const x = 5;\nconsole.log('x:', x);\nconsole.log({x, y: 6});\nconsole.table({x, y: 6});\nconsole.warn('take care!');\nconst z = x * y;"
      }
    };
    createPlayground('#container', options);

    +

     

    +
    tip

    Setting the querystring languages only shows these languages. +Selecting one language and setting console to full gives an environment similar to a REPL.

    +

    Demo: (Python - print to console)

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "languages": "py",
        "console": "full",
        "py": "print('hello from python')"
      }
    };
    createPlayground('#container', options);

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/css.html.md b/docs/features/css.html.md new file mode 100644 index 0000000..7fb96e9 --- /dev/null +++ b/docs/features/css.html.md @@ -0,0 +1,143 @@ +# CSS + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The [result page](./result.html.md) can be styled with CSS using various methods, including: + +## Style Editor + +Code added to [style editor](./projects.html.md)#style-editor) is [compiled](#languages) and [processed](#css-processors), then added as CSS to the [result page](./result.html.md) `head` element. + +![LiveCodes styles](../../static/img/screenshots/css-processors.jpg) + +### Languages + +LiveCodes supports multiple languages that compile to CSS, including [SCSS](../languages/scss.html.md), [Sass](../languages/sass.html.md), [Less](../languages/less.html.md) and [Stylus](../languages/stylus.html.md). Code authored in any of these languages is compiled to CSS before being added to the [result page](./result.html.md). + +The style language can be selected from the style editor menu. In embedded playgrounds, the language can be configured via the configuration object property [`style.language`](../configuration/configuration-object.html.md)#style) + +### CSS Processors + +The (compiled) CSS code can be processed by one or more of the supported CSS processors. Examples of these include: [Autoprefixer](../languages/autoprefixer.html.md), [postcss-preset-env](../languages/postcssPresetEnv.html.md), [Lightning CSS](../languages/lightningcss.html.md), [CSS Modules](../languages/cssmodules.html.md), [cssnano](../languages/cssnano.html.md), ...etc. + +Multiple CSS processors can be enabled at the same time. The code is processed in the order of processors placed in the style editor menu of the app. + +Processors are enabled in the [standalone app](../getting-started.html.md)#standalone-app) from the style editor menu, by switching on the toggles of the required processors. + +In embedded playgrounds, processors are enabled via the [`processors`](../configuration/configuration-object.html.md)#processors) property of the [configuration object](../configuration/configuration-object.html.md). + +### Style Imports + +[Bare modules](./module-resolution.html.md)#bare-module-imports) used with `@import` rules are supposed to be npm modules. These are converted to [full URLs from CDN](./module-resolution.html.md)#cdn-providers). + +#### Example + +This code: + +```css +@import 'github-markdown-css/github-markdown.css'; +``` + +becomes: + +```css +@import 'https://unpkg.com/github-markdown-css/github-markdown.css'; +``` + +Packages that specify a stylesheet as the main module can be imported like that: + +```css +@import 'github-markdown-css'; +``` + +demo: + + + +The content can be inlined in the compiled CSS by enabling the processor [postcss-import-url](../languages/postcssImportUrl.html.md). + +### Compiled CSS + +Compiled CSS (following compilation of style language, and all enabled processors) is added to the [result page](./result.html.md) `head` element. + +The compiled code can be inspected in the [compiled code viewer](./compiled-code.html.md) in the [tools pane](./tools-pane.html.md). + +### Auto-update + +When [`autoupdate`](../configuration/configuration-object.html.md)#autoupdate) is enabled (default), in contrast to [markup editor](./projects.html.md)#markup-editor) and [script editor](./projects.html.md)#script-editor), changes in style editor code does NOT trigger a full reload of the [result page](./result.html.md). The updated CSS code is sent to the page and applied without a reload. + +The page can be force-reloaded by clicking the run button or using the keyboard shortcut: Shift + Enter. + +## External Resources + +External stylesheets can be added in [external resources](./external-resources.html.md) screen. These are added to the [result page](./result.html.md) before the compiled style editor code. This allows code in style editor to override CSS properties in external stylesheets. + +External stylesheets can be added to embedded playgrounds using the [configuration object](../configuration/configuration-object.html.md) property [`stylesheets`](../configuration/configuration-object.html.md)#stylesheets). + +## CSS Presets + +CSS presets like [Normalize.css](https://necolas.github.io/normalize.css/) and [Reset CSS](https://meyerweb.com/eric/tools/css/reset/) can be selected in [external resources](./external-resources.html.md)#css-presets) screen. + +## Stylesheets Imported in Script Editor + +### External Stylesheets + +CSS stylesheets imported in the script editor are added to the [result page](./result.html.md) `head` element. _The URL has to end with **`.css` extension**_. + +For example, adding this in the script editor (JavaScript): + +```js +import 'https://unpkg.com/github-markdown-css/github-markdown.css'; +``` + +adds this to the page `head`: + +```html + +``` + +Currently, compiling imported stylesheets (e.g. SCSS) is not supported. + +Similar to [imports in style editor](#style-imports), bare imports are converted to full URLs from CDN. + +For example: + +```js +import 'github-markdown-css/github-markdown.css'; +``` + +becomes: + +```html + +``` + +### `./style.css` + +Importing the URLs (`./style.css` or `./styles.css`) gets the style editor compiled/processed CSS **string** as the module's default export. + +Example: + +```js +import styles from './style.css'; + +console.log(styles); // => compiled CSS as string +``` + +## CSS Modules + +CSS modules are supported and are [documented separately](../languages/cssmodules.html.md). + +## CSS Frameworks + +Multiple CSS frameworks are supported including [Tailwind CSS](../languages/tailwindcss.html.md), [UnoCSS](../languages/unocss.html.md) and [WindiCSS](../languages/windicss.html.md). + +## Styles in Markup & Script + +Of course, styles and stylesheets can still be added as usual in markup and script editors (via HTML elements and/or DOM). + +## Related + +- [Projects](./projects.html.md) +- [External resources](./external-resources.html.md) +- [Module resolution](./module-resolution.html.md) \ No newline at end of file diff --git a/docs/features/css/index.html b/docs/features/css/index.html new file mode 100644 index 0000000..ecf1048 --- /dev/null +++ b/docs/features/css/index.html @@ -0,0 +1,76 @@ +CSS | LiveCodes

    CSS

    + +

    The result page can be styled with CSS using various methods, including:

    +

    Style Editor​

    +

    Code added to style editor is compiled and processed, then added as CSS to the result page head element.

    +

    LiveCodes styles

    +

    Languages​

    +

    LiveCodes supports multiple languages that compile to CSS, including SCSS, Sass, Less and Stylus. Code authored in any of these languages is compiled to CSS before being added to the result page.

    +

    The style language can be selected from the style editor menu. In embedded playgrounds, the language can be configured via the configuration object property style.language

    +

    CSS Processors​

    +

    The (compiled) CSS code can be processed by one or more of the supported CSS processors. Examples of these include: Autoprefixer, postcss-preset-env, Lightning CSS, CSS Modules, cssnano, ...etc.

    +

    Multiple CSS processors can be enabled at the same time. The code is processed in the order of processors placed in the style editor menu of the app.

    +

    Processors are enabled in the standalone app from the style editor menu, by switching on the toggles of the required processors.

    +

    In embedded playgrounds, processors are enabled via the processors property of the configuration object.

    +

    Style Imports​

    +

    Bare modules used with @import rules are supposed to be npm modules. These are converted to full URLs from CDN.

    +

    Example​

    +

    This code:

    +
    @import 'github-markdown-css/github-markdown.css';
    +

    becomes:

    +
    @import 'https://unpkg.com/github-markdown-css/github-markdown.css';
    +

    Packages that specify a stylesheet as the main module can be imported like that:

    +
    @import 'github-markdown-css';
    +

    demo:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "markdown",
      "params": {
        "activeEditor": "style",
        "compiled": "open"
      }
    };
    createPlayground('#container', options);

    +

    The content can be inlined in the compiled CSS by enabling the processor postcss-import-url.

    +

    Compiled CSS​

    +

    Compiled CSS (following compilation of style language, and all enabled processors) is added to the result page head element.

    +

    The compiled code can be inspected in the compiled code viewer in the tools pane.

    +

    Auto-update​

    +

    When autoupdate is enabled (default), in contrast to markup editor and script editor, changes in style editor code does NOT trigger a full reload of the result page. The updated CSS code is sent to the page and applied without a reload.

    +

    The page can be force-reloaded by clicking the run button or using the keyboard shortcut: Shift + Enter.

    +

    External Resources​

    +

    External stylesheets can be added in external resources screen. These are added to the result page before the compiled style editor code. This allows code in style editor to override CSS properties in external stylesheets.

    +

    External stylesheets can be added to embedded playgrounds using the configuration object property stylesheets.

    +

    CSS Presets​

    +

    CSS presets like Normalize.css and Reset CSS can be selected in external resources screen.

    +

    Stylesheets Imported in Script Editor​

    +

    External Stylesheets​

    +

    CSS stylesheets imported in the script editor are added to the result page head element. The URL has to end with .css extension.

    +

    For example, adding this in the script editor (JavaScript):

    +
    import 'https://unpkg.com/github-markdown-css/github-markdown.css';
    +

    adds this to the page head:

    +
    <link rel="stylesheet" href="https://unpkg.com/github-markdown-css/github-markdown.css" />
    +

    Currently, compiling imported stylesheets (e.g. SCSS) is not supported.

    +

    Similar to imports in style editor, bare imports are converted to full URLs from CDN.

    +

    For example:

    +
    import 'github-markdown-css/github-markdown.css';
    +

    becomes:

    +
    <link rel="stylesheet" href="https://unpkg.com/github-markdown-css/github-markdown.css" />
    +

    ./style.css​

    +

    Importing the URLs (./style.css or ./styles.css) gets the style editor compiled/processed CSS string as the module's default export.

    +

    Example:

    +
    import styles from './style.css';

    console.log(styles); // => compiled CSS as string
    +

    CSS Modules​

    +

    CSS modules are supported and are documented separately.

    +

    CSS Frameworks​

    +

    Multiple CSS frameworks are supported including Tailwind CSS, UnoCSS and WindiCSS.

    +

    Styles in Markup & Script​

    +

    Of course, styles and stylesheets can still be added as usual in markup and script editors (via HTML elements and/or DOM).

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/data-urls.html.md b/docs/features/data-urls.html.md new file mode 100644 index 0000000..2a1be27 --- /dev/null +++ b/docs/features/data-urls.html.md @@ -0,0 +1,70 @@ +# Data URLs + +> **Data URLs**, URLs prefixed with the `data:` scheme, allow content creators to embed small files inline in documents. +> +> — [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) + +Sometimes, you need to use an external file (e.g. script, stylesheet) that is not hosted online. In this case, you can use data URLs to embed the file in your code. These can then be used similar to regular URLs (e.g. for `

    Data URLs

    +
    +

    Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents.

    +

    — MDN

    +
    +

    Sometimes, you need to use an external file (e.g. script, stylesheet) that is not hosted online. In this case, you can use data URLs to embed the file in your code. These can then be used similar to regular URLs (e.g. for <script src>, <link href>, import URL, etc.).

    +

    LiveCodes UI allows creating and consuming these data URLs.

    +

    Creating data URLs​

    +

    Data URLs can be created from:

    +

    Assets​

    +

    For local files on user's device.

    +

    Assets screen can be accessed from Settings menu → Assets. This works for any file type, including text files (e.g. stylesheets or scripts) and binary files like images. Generated data URLs are saved locally in the user's browser storage and are available across projects.

    +

    "Copy code as data URL" button​

    +

    For code in code editor.

    +

    The button can be found in the editor toolbar, below the code editor. This copies the code of the active editor as data URL to the clipboard.

    +

    The content is base64-encoded. Unicode content is appropriately encoded (see The "Unicode Problem").

    +

    Consuming data URLs​

    +

    Data URLs can be used anywhere you use a regular URL (e.g. for <script src>, <link href>, import URL, etc.).

    +

    In addition, LiveCodes supports importing data URLs, like other URLs. If the language is detected, it is loaded in the appropriate editor (e.g. data:text/typescript;charset=UTF-8;base64,.... is detected as TypeScript).

    +
    caution

    Depending on the browser, there may be length limitations on URLs. So, it is generally recommended to use data URLs for small files.

    For large files, it is better to host these online. LiveCodes allows hosting assets on GitHub Pages (see assets).

    +

    Example​

    +

    If we add this this in script editor:

    +
    export const sayHello = (name) => 'Hello ' + name;
    +

    then copy it as data URL, we will get:

    +

    data:text/javascript;charset=UTF-8;base64,ZXhwb3J0IGNvbnN0IHNheUhlbGxvID0gKG5hbWUpID0+ICdIZWxsbyAnICsgbmFtZTs=.

    +

    This can be used (e.g. in another project) like this:

    +
    import { sayHello } from 'data:text/javascript;charset=UTF-8;base64,ZXhwb3J0IGNvbnN0IHNheUhlbGxvID0gKG5hbWUpID0+ICdIZWxsbyAnICsgbmFtZTs=';

    console.log(sayHello('Ali'));
    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/default-template-language.html.md b/docs/features/default-template-language.html.md new file mode 100644 index 0000000..465296d --- /dev/null +++ b/docs/features/default-template-language.html.md @@ -0,0 +1,22 @@ +# Default Template/Language + +When the app is loaded, by default, the last used [language](../languages/index.html.md) is selected. + +The app can also be configured to load a default [user template](./templates.html.md)#user-templates). + +If you do not already have any user templates, save any loaded project as template: + +Project menu → Save as → Template. + +Then, in the user templates screen (Project menu → New ... → My Templates), find your template and click "Set as default". + +If you wish to clear that selection, find the default template in user templates and click "unset". + +If you want to temporarily not load the default template/language add the [query param](../configuration/query-params.html.md) `no-defaults`. + +Example: https://livecodes.io?no-defaults + +## Related + +- [Templates](./templates.html.md) +- [Query params](../configuration/query-params.html.md) \ No newline at end of file diff --git a/docs/features/default-template-language/index.html b/docs/features/default-template-language/index.html new file mode 100644 index 0000000..8771d96 --- /dev/null +++ b/docs/features/default-template-language/index.html @@ -0,0 +1,24 @@ +Default Template/Language | LiveCodes

    Default Template/Language

    +

    When the app is loaded, by default, the last used language is selected.

    +

    The app can also be configured to load a default user template.

    +

    If you do not already have any user templates, save any loaded project as template:

    +

    Project menu → Save as → Template.

    +

    Then, in the user templates screen (Project menu → New ... → My Templates), find your template and click "Set as default".

    +

    If you wish to clear that selection, find the default template in user templates and click "unset".

    +

    If you want to temporarily not load the default template/language add the query param no-defaults.

    +

    Example: https://livecodes.io?no-defaults

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/default-view.html.md b/docs/features/default-view.html.md new file mode 100644 index 0000000..458945e --- /dev/null +++ b/docs/features/default-view.html.md @@ -0,0 +1,47 @@ +# Default View + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The playground can be loaded in one of the following views: + +## `split` + +Both the code editor and the result page are visible. This is the default. + +Example: https://livecodes.io/?view=split + +Demo: + + + +## `editor` + +The code editor is visible, while the result page is collapsed. The result page can be shown by dragging the split gutter, or clicking the "Toggle Result" button. + +Example: https://livecodes.io/?view=editor + +Demo: + + + +## `result` + +The result page is visible, while the code editor is collapsed. The code editor can be shown by dragging the split gutter, or clicking one of the editor tabs. + +Example: https://livecodes.io/?view=result + +Demo: + + + +## Display Mode vs Default View + +:::info + +"[Display Mode](./display-modes.html.md)" is different from "Default View". + +In `editor` display mode, only the editor is loaded and the result page is not available. While `editor` default view shows the editor by default, and the result page can be shown by dragging the split gutter. + +The same applies for `result` display mode and default view. + +::: \ No newline at end of file diff --git a/docs/features/default-view/index.html b/docs/features/default-view/index.html new file mode 100644 index 0000000..52d2c2d --- /dev/null +++ b/docs/features/default-view/index.html @@ -0,0 +1,30 @@ +Default View | LiveCodes

    Default View

    + +

    The playground can be loaded in one of the following views:

    +

    split​

    +

    Both the code editor and the result page are visible. This is the default.

    +

    Example: https://livecodes.io/?view=split

    +

    Demo:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "view": "split"
      }
    };
    createPlayground('#container', options);

    +

    editor​

    +

    The code editor is visible, while the result page is collapsed. The result page can be shown by dragging the split gutter, or clicking the "Toggle Result" button.

    +

    Example: https://livecodes.io/?view=editor

    +

    Demo:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "view": "editor"
      }
    };
    createPlayground('#container', options);

    +

    result​

    +

    The result page is visible, while the code editor is collapsed. The code editor can be shown by dragging the split gutter, or clicking one of the editor tabs.

    +

    Example: https://livecodes.io/?view=result

    +

    Demo:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "view": "result"
      }
    };
    createPlayground('#container', options);

    +

    Display Mode vs Default View​

    +
    info

    "Display Mode" is different from "Default View".

    In editor display mode, only the editor is loaded and the result page is not available. While editor default view shows the editor by default, and the result page can be shown by dragging the split gutter.

    The same applies for result display mode and default view.

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/deploy.html.md b/docs/features/deploy.html.md new file mode 100644 index 0000000..d413a05 --- /dev/null +++ b/docs/features/deploy.html.md @@ -0,0 +1,28 @@ +# Deploy + +The result page (of any number of projects) can be deployed and hosted at [GitHub Pages](https://pages.github.com/) (a free service from GitHub for hosting static websites). This requires login with a [GitHub account](./github-integration.html.md). + +The `Deploy` screen can be accessed from the Project menu → Deploy. + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +![LiveCodes Deploy](../../static/img/screenshots/deploy-1.jpg) + +The result page (and optionally the source code) is pushed to `gh-pages` branch of a **public** GitHub repo (new or existing). The page, shortly, becomes available on `https://{user}.github.io/{repo}/`. + +If an existing repo is selected, the content of the `gh-pages` branch (if existing) is replaced by the deployed content. + +If the option `Commit source code` is enabled, the source code will be deployed to the directory `/src`. + +The code for the result page (and source code) is deployed as separate files for markup (`/index.html`), styles (`style.css`) and script (`script.js`). This allows re-use of these resources in other projects. Of course, multiple projects can be deloyed and linked to each other to act like a multi-page website. + +The LiveCodes app will remember the repo used to deploy each project, so that later updates to the project can be deployed to the same repo. + +## Related + +- [Export](./export.html.md) +- [Share](./share.html.md) +- [Broadcast](./broadcast.html.md) +- [GitHub integration](./github-integration.html.md) \ No newline at end of file diff --git a/docs/features/deploy/index.html b/docs/features/deploy/index.html new file mode 100644 index 0000000..aad3dd2 --- /dev/null +++ b/docs/features/deploy/index.html @@ -0,0 +1,28 @@ +Deploy | LiveCodes

    Deploy

    +

    The result page (of any number of projects) can be deployed and hosted at GitHub Pages (a free service from GitHub for hosting static websites). This requires login with a GitHub account.

    +

    The Deploy screen can be accessed from the Project menu → Deploy.

    + + +

    LiveCodes Deploy

    +

    The result page (and optionally the source code) is pushed to gh-pages branch of a public GitHub repo (new or existing). The page, shortly, becomes available on https://{user}.github.io/{repo}/.

    +

    If an existing repo is selected, the content of the gh-pages branch (if existing) is replaced by the deployed content.

    +

    If the option Commit source code is enabled, the source code will be deployed to the directory /src.

    +

    The code for the result page (and source code) is deployed as separate files for markup (/index.html), styles (style.css) and script (script.js). This allows re-use of these resources in other projects. Of course, multiple projects can be deloyed and linked to each other to act like a multi-page website.

    +

    The LiveCodes app will remember the repo used to deploy each project, so that later updates to the project can be deployed to the same repo.

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/display-modes.html.md b/docs/features/display-modes.html.md new file mode 100644 index 0000000..1c4d845 --- /dev/null +++ b/docs/features/display-modes.html.md @@ -0,0 +1,134 @@ +# Display Modes + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The [configuration](../configuration/configuration-object.html.md) option [`mode`](../configuration/configuration-object.html.md)#mode), also available as [query param](../configuration/query-params.html.md), can be used to select different display modes. +The following display modes are supported: + +## `full` + +This is the default mode with toolbars, editor and result panes. + +Example: https://livecodes.io/?template=react + +Screenshot: (App in full mode) + +![full-mode](../../static/img/screenshots/mode-full.jpg) + +Demo: (Embedded playground in full mode) + + + +## `focus` + +This hides most of UI buttons and menus and keeps only the essential elements: editors, editor titles, result page, console, and run and share buttons. It can be toggled during runtime from the full mode through the UI from a button in the lower left corner. Also the query param `?mode=focus`. + +Example: https://livecodes.io/?template=react&mode=focus + +Screenshot: (focus mode) + +![focus-mode](../../static/img/screenshots/mode-focus.jpg) + +## `simple` + +This mode is mainly useful for embedded playgrounds. +It shows only 1 editor with the output (result page +/- console). The content of other editors can be set using [SDK](../sdk/index.html.md) [config](../configuration/configuration-object.html.md) even though the editors are not shown. +By default, `codemirror` editor is used, however, this can be changed by the [`editor`](../configuration/configuration-object.html.md)#editor) option. +By default, the layout is `responsive` but can also be overridden by the [`layout`](../configuration/configuration-object.html.md)#layout) option to `vertical` or `horizontal`. + +Demo: JS with console + + + +Demo: JSX & Result page (Monaco editor, add CSS) + +export const simpleConfig = { + mode: 'simple', + layout: 'vertical', + activeEditor: 'script', + editor: 'monaco', + tools: { status: 'none' }, + script: { + language: 'jsx', + content: `import { atom, useAtom } from 'jotai';\n\nconst countAtom = atom(0);\n\nconst Counter = () => {\n const [count, setCount] = useAtom(countAtom);\n const inc = () => setCount((c) => c + 1);\n return (\n <>\n {count} \n \n );\n};\n\nconst App = () => (\n
    \n

    Hello Jotai

    \n

    Enjoy coding!

    \n \n
    \n);\n\nexport default App;\n`, + }, + style: { + language: 'css', + content: '.App {\n font-family: sans-serif;\n text-align: center;\n}\n'.trimStart(), + }, +}; + + + +## `lite` + +Loads a light-weight, minimal code editor, with limited playground features. +See the section about [lite mode](./lite.html.md) for details + +Example: https://livecodes.io/?mode=lite&template=react + +Demo: + + + +## `editor` + +Hides the results pane and works as editor only. + +Example: https://livecodes.io/?mode=editor&template=react + +Demo: + + + +## `codeblock` + +A read-only mode showing only the code block without editor interface. On mouse-over a copy button appears that allows to copy the code. This is specially useful when embedded. + +Example: https://livecodes.io/?mode=codeblock&template=react + +Demo: + + + +By default, in `codeblock` mode, the light-weight `CodeJar` editor is used (in read-only mode). You can override this by setting the `editor` option. Refer to [Editor Settings](./editor-settings.html.md)#code-editor) for details. + +Example: https://livecodes.io/?mode=codeblock&editor=monaco&template=react + +Demo: + + + +## `result` + +Shows the result page only, with a drawer at the bottom (which can be closed) that allows opening the project in the full playground. + +Example: https://livecodes.io/?mode=result&template=react + +Demo: + + + +The tools pane (e.g. console/compiled code viewer) is hidden by default in `result` mode. It can be shown if set to `open` or `full`. Refer to [Tools pane](./tools-pane.html.md) documentation for details. + +Example: https://livecodes.io/?mode=result&tools=console|full&&js=console.log("Hello%20World!") + +Demo: + + + +## Display Mode vs Default View + +:::info + +"Display Mode" is different from "[Default View](./default-view.html.md)". + +In `editor` display mode, only the editor is loaded and the result page is not available. While `editor` default view shows the editor by default, and the result page can be shown by dragging the split gutter. + +The same applies for `result` display mode and default view. + +::: \ No newline at end of file diff --git a/docs/features/display-modes/index.html b/docs/features/display-modes/index.html new file mode 100644 index 0000000..5922b9d --- /dev/null +++ b/docs/features/display-modes/index.html @@ -0,0 +1,67 @@ +Display Modes | LiveCodes

    Display Modes

    + +

    The configuration option mode, also available as query param, can be used to select different display modes. +The following display modes are supported:

    +

    full​

    +

    This is the default mode with toolbars, editor and result panes.

    +

    Example: https://livecodes.io/?template=react

    +

    Screenshot: (App in full mode)

    +

    full-mode

    +

    Demo: (Embedded playground in full mode)

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "react"
    };
    createPlayground('#container', options);

    +

    focus​

    +

    This hides most of UI buttons and menus and keeps only the essential elements: editors, editor titles, result page, console, and run and share buttons. It can be toggled during runtime from the full mode through the UI from a button in the lower left corner. Also the query param ?mode=focus.

    +

    Example: https://livecodes.io/?template=react&mode=focus

    +

    Screenshot: (focus mode)

    +

    focus-mode

    +

    simple​

    +

    This mode is mainly useful for embedded playgrounds. +It shows only 1 editor with the output (result page +/- console). The content of other editors can be set using SDK config even though the editors are not shown. +By default, codemirror editor is used, however, this can be changed by the editor option. +By default, the layout is responsive but can also be overridden by the layout option to vertical or horizontal.

    +

    Demo: JS with console

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "mode": "simple",
        "js": "console.log(\"hello world\")",
        "layout": "vertical",
        "console": "full"
      }
    };
    createPlayground('#container', options);

    +

    Demo: JSX & Result page (Monaco editor, add CSS)

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "mode": "simple",
        "layout": "vertical",
        "activeEditor": "script",
        "editor": "monaco",
        "tools": {
          "status": "none"
        },
        "script": {
          "language": "jsx",
          "content": "import { atom, useAtom } from 'jotai';\n\nconst countAtom = atom(0);\n\nconst Counter = () => {\n  const [count, setCount] = useAtom(countAtom);\n  const inc = () => setCount((c) => c + 1);\n  return (\n    <>\n      {count} <button onClick={inc}>+1</button>\n    </>\n  );\n};\n\nconst App = () => (\n  <div className=\"App\">\n    <h1>Hello Jotai</h1>\n    <h2>Enjoy coding!</h2>\n    <Counter />\n  </div>\n);\n\nexport default App;\n"
        },
        "style": {
          "language": "css",
          "content": ".App {\n font-family: sans-serif;\n text-align: center;\n}\n"
        }
      }
    };
    createPlayground('#container', options);

    +

    lite​

    +

    Loads a light-weight, minimal code editor, with limited playground features. +See the section about lite mode for details

    +

    Example: https://livecodes.io/?mode=lite&template=react

    +

    Demo:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "mode": "lite"
      },
      "template": "react"
    };
    createPlayground('#container', options);

    +

    editor​

    +

    Hides the results pane and works as editor only.

    +

    Example: https://livecodes.io/?mode=editor&template=react

    +

    Demo:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "mode": "editor"
      },
      "template": "react"
    };
    createPlayground('#container', options);

    +

    codeblock​

    +

    A read-only mode showing only the code block without editor interface. On mouse-over a copy button appears that allows to copy the code. This is specially useful when embedded.

    +

    Example: https://livecodes.io/?mode=codeblock&template=react

    +

    Demo:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "mode": "codeblock"
      },
      "template": "react"
    };
    createPlayground('#container', options);

    +

    By default, in codeblock mode, the light-weight CodeJar editor is used (in read-only mode). You can override this by setting the editor option. Refer to Editor Settings for details.

    +

    Example: https://livecodes.io/?mode=codeblock&editor=monaco&template=react

    +

    Demo:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "mode": "codeblock",
        "editor": "monaco"
      },
      "template": "react"
    };
    createPlayground('#container', options);

    +

    result​

    +

    Shows the result page only, with a drawer at the bottom (which can be closed) that allows opening the project in the full playground.

    +

    Example: https://livecodes.io/?mode=result&template=react

    +

    Demo:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "mode": "result",
        "template": "react"
      }
    };
    createPlayground('#container', options);

    +

    The tools pane (e.g. console/compiled code viewer) is hidden by default in result mode. It can be shown if set to open or full. Refer to Tools pane documentation for details.

    +

    Example: https://livecodes.io/?mode=result&tools=console|full&&js=console.log("Hello%20World!")

    +

    Demo:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "mode": "result",
        "tools": "console|full",
        "js": "console.log(\"Hello World!\")"
      }
    };
    createPlayground('#container', options);

    +

    Display Mode vs Default View​

    +
    info

    "Display Mode" is different from "Default View".

    In editor display mode, only the editor is loaded and the result page is not available. While editor default view shows the editor by default, and the result page can be shown by dragging the split gutter.

    The same applies for result display mode and default view.

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/editor-settings.html.md b/docs/features/editor-settings.html.md new file mode 100644 index 0000000..8967d17 --- /dev/null +++ b/docs/features/editor-settings.html.md @@ -0,0 +1,71 @@ +# Editor Settings + +LiveCodes allows a lot of flexibility for configuring which code editor to use and its settings. + +`Editor Settings` screen can be accessed from Settings menu → Editor Settings. + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-1.jpg) + +![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-2.jpg) + +![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-3.jpg) + +A preview code editor is displayed to preview the settings in real time. + +The settings selected in the `Editor Settings` screen are saved locally to [user settings](./user-settings.html.md) and are used subsequently. These include: + +### Enable AI Code Assistant + +Enables the [AI code assistant](./ai.html.md). (Free and no account required) + +### Code Editor + +The following code editors are supported: + +- [**Monaco Editor**](https://microsoft.github.io/monaco-editor/): This is the code editor that powers [**VS Code**](https://code.visualstudio.com/). It is [feature-rich](https://code.visualstudio.com/docs/editor/codebasics) and supports autocomplete with [**IntelliSense**](https://code.visualstudio.com/docs/editor/intellisense) (including [types for custom libraries](./intellisense.html.md)). However, it requires a relatively large download and is not supported in mobile browsers. +- [**CodeMirror**](https://codemirror.net/): Has [many editing features](https://codemirror.net/docs/extensions/), including autocomplete, with good **mobile support**. +- [**CodeJar**](https://medv.io/codejar/): A **lightweight** code editor with very basic editing features. [PrismJs](https://prismjs.com/) is used for syntax highlighting. Please note that some editor settings are not supported in CodeJar (see below). + +This can be configured using the [`editor`](../configuration/configuration-object.html.md)#editor) configuration option. + +By default, Monaco editor is used on desktop, CodeMirror is used on mobile and CodeJar is used in [codeblocks](./display-modes.html.md)#codeblock), in [lite mode](./lite.html.md) and in [readonly](../configuration/configuration-object.html.md)#readonly) playgrounds. + +### Editor Options + +These include: + +- [Editor theme](../configuration/configuration-object.html.md)#editortheme) +- [Font family](../configuration/configuration-object.html.md)#fontfamily) +- [Font size](../configuration/configuration-object.html.md)#fontsize) +- [Indentation](../configuration/configuration-object.html.md)#usetabs) (Spaces/Tabs) +- [Tab size](../configuration/configuration-object.html.md)#tabsize) +- [Line numbers](../configuration/configuration-object.html.md)#linenumbers) +- [Word-wrap](../configuration/configuration-object.html.md)#wordwrap) +- [Auto-close brackets and quotes](../configuration/configuration-object.html.md)#closebrackets) +- [Fold (collapse) regions](../configuration/configuration-object.html.md)#foldregions) + +### Emmet + +Allows using [**Emmet**](https://emmet.io/) [abbreviations and actions](https://docs.emmet.io/). See [`emmet`](../configuration/configuration-object.html.md)#emmet) configuration option. + +(Not supported in CodeJar) + +### Editor Modes + +Allows using [**Vim**](https://vimhelp.org/) and [**Emacs**](https://www.gnu.org/software/emacs/manual/html_node/emacs/Basic.html) keyboard bindings. See [`editorMode`](../configuration/configuration-object.html.md)#editormode) configuration option. + +(Not supported in CodeJar) + +### Format Options + +These are [**Prettier**](https://prettier.io/) [configuration options](https://prettier.io/docs/en/options.html) used for code formatting. + +In addition to those specified in [Editor Options](#editor-options), the following options are available: + +- [Use Semicolons](../configuration/configuration-object.html.md)#semicolons) +- [Use Single Quotes](../configuration/configuration-object.html.md)#singlequote) +- [Use Trailing Commas](../configuration/configuration-object.html.md)#trailingcomma) \ No newline at end of file diff --git a/docs/features/editor-settings/index.html b/docs/features/editor-settings/index.html new file mode 100644 index 0000000..254c4e6 --- /dev/null +++ b/docs/features/editor-settings/index.html @@ -0,0 +1,58 @@ +Editor Settings | LiveCodes

    Editor Settings

    +

    LiveCodes allows a lot of flexibility for configuring which code editor to use and its settings.

    +

    Editor Settings screen can be accessed from Settings menu → Editor Settings.

    + + +

    LiveCodes Editor Settings

    +

    LiveCodes Editor Settings

    +

    LiveCodes Editor Settings

    +

    A preview code editor is displayed to preview the settings in real time.

    +

    The settings selected in the Editor Settings screen are saved locally to user settings and are used subsequently. These include:

    +

    Enable AI Code Assistant​

    +

    Enables the AI code assistant. (Free and no account required)

    +

    Code Editor​

    +

    The following code editors are supported:

    + +

    This can be configured using the editor configuration option.

    +

    By default, Monaco editor is used on desktop, CodeMirror is used on mobile and CodeJar is used in codeblocks, in lite mode and in readonly playgrounds.

    +

    Editor Options​

    +

    These include:

    + +

    Emmet​

    +

    Allows using Emmet abbreviations and actions. See emmet configuration option.

    +

    (Not supported in CodeJar)

    +

    Editor Modes​

    +

    Allows using Vim and Emacs keyboard bindings. See editorMode configuration option.

    +

    (Not supported in CodeJar)

    +

    Format Options​

    +

    These are Prettier configuration options used for code formatting.

    +

    In addition to those specified in Editor Options, the following options are available:

    +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/embeds.html.md b/docs/features/embeds.html.md new file mode 100644 index 0000000..79f4ae7 --- /dev/null +++ b/docs/features/embeds.html.md @@ -0,0 +1,101 @@ +# Embedded Playgrounds + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +## Overview + +LiveCodes playgrounds can be embedded in any web page. The playground can be [prefilled with code](./code-prefill.html.md) in any supported language. This can be very useful in documentation websites, technical blogs, educational websites and others. + +Demo: + + + +The embedding web page can communicate with the playground using a powerful [SDK](../sdk/index.html.md) (e.g. edit/format code, watch for code changes, get the compiled code or result page HTML, run tests, change layout, ...etc). + +## Create Embedded Playground + +### App Embed Screen + +In the [standalone app](../getting-started.html.md)#standalone-app), the Embed Screen can be accessed from Project menu → Embed. + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +It shows a preview of the embedded playground, allows customizations of [embed options](../sdk/js-ts.html.md)#embed-options) and provides generated code that can be added to the web page that will embed the playground. + +![LiveCodes embed](../../static/img/screenshots/embed-1.jpg) +![LiveCodes embed](../../static/img/screenshots/embed-2.jpg) +![LiveCodes embed](../../static/img/screenshots/embed-3.jpg) + +:::info Note + +Please note that the Embed Screen sends the project code to [LiveCodes share service](./share.html.md) to generate a short URL for usage in the embed code. + +::: + +The setting "Embed Type" allows selection from different variations of the generated code: + +- Using the SDK from CDN. +- Using the SDK with a bundler (e.g. vite, parcel, webpack, etc). +- Using the React SDK. +- Using the Vue SDK. +- Using iframe and [query params](../configuration/query-params.html.md). +- Using HTML code that the SDK can use to [auto-prefill](./code-prefill.html.md)#auto-prefill-from-page-dom) the playground. + +### SDK + +The LiveCodes [SDK](../sdk/index.html.md) can be used to embed playgrounds, specify [embed](../sdk/js-ts.html.md)#embed-options) and [configuration](../configuration/index.html.md) options and allows communication with the embedded playground with many [SDK methods](../sdk/js-ts.html.md)#sdk-methods). + +This method provides more control and allows advanced scenarios. + +## Avoid Breaking Changes + +To avoid breaking changes that would cause the embedded playgrounds to stop working as expected with later updates, follow these recommendations: + +- Use a [permanent URL](./permanent-url.html.md) to a pinned version of the LiveCodes app for [`EmbedOptions.appUrl`](../sdk/js-ts.html.md)#appurl). The code generated in the Embed screen uses that by default. +- Specify the version of the SDK used. The code generated in the Embed screen also does that. +- For project code, [specify the versions](./module-resolution.html.md)#package-version) of the imported packages and [external resources](./external-resources.html.md). [Custom import maps](./module-resolution.html.md)#custom-module-resolution) can be set to control the module import behavior. + +Check the [Permanent URL](./permanent-url.html.md) section for more details. + +## Differences from Full App + +Some of the features of the full standalone app are not available or shown by default in embedded playgrounds, either because of security reasons, being not useful when embedded or because of space limitations. + +### Features Not Available + +- All features that require saving/loading from browser storage: + e.g. [projects](./projects.html.md), [assets](./assets.html.md), [code snippets](./snippets.html.md), [user settings](./user-settings.html.md), [default template/language](./default-template-language.html.md), [recover unsaved](./recover.html.md), [backup/restore](./backup-restore.html.md). +- All features that require authentication: + e.g. [login/logout](./github-integration.html.md), [sync](./sync.html.md), [deploy](./deploy.html.md), [importing](./import.html.md) from private github repos. +- [Broadcast](./broadcast.html.md). +- App menus. +- Some tools in [tools pane](./tools-pane.html.md): + e.g. open result page in new window, broadcast status. +- [Welcome screen](./welcome.html.md). + +### Features Not Shown by Default + +- [External resources](./external-resources.html.md) button (below the editor) and external resources screen are only shown if the loaded project has external resources (e.g. via [`EmbedOptions.config.stylesheets`](../configuration/configuration-object.html.md)#stylesheets) and [`EmbedOptions.config.scripts`](../configuration/configuration-object.html.md)#scripts)). +- [Tests](./tests.html.md) are not shown in [tools pane](./tools-pane.html.md) unless the loaded project has tests (e.g. via [`EmbedOptions.config.tests`](../configuration/configuration-object.html.md)#tests)). Test editor is not available. +- Loading [starter templates](./templates.html.md) can be achieved by the [SDK](../sdk/index.html.md) ([`EmbedOptions.template`](../sdk/js-ts.html.md)#template)), not from the UI. +- [Importing](./import.html.md) from external sources can be achieved by the [SDK](../sdk/index.html.md) ([`EmbedOptions.import`](../sdk/js-ts.html.md)#import)), not from the UI. +- Getting a [share](./share.html.md) URL can be achieved by the [SDK](../sdk/index.html.md) ([`getShareUrl`](../sdk/js-ts.html.md)#getshareurl) method), not from the UI. + +## Security + +- All user code, [result page](./result.html.md) and compilers run in [sandboxed iframes](https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/) with a unique origin. + +- Embedded playgrounds do not have access to the parent page, or to sensitive data like user cookies and localstorage of the embedding page origin. Communications with the SDK occur by means of [`postMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) calls. + +## Related + +- [SDK](../sdk/index.html.md) +- [Code prefill](./code-prefill.html.md) +- [Configuration](../configuration/index.html.md) +- [Embed options](../sdk/js-ts.html.md)#embed-options) +- [SDK methods](../sdk/js-ts.html.md)#sdk-methods) +- [Permanent URL](./permanent-url.html.md) +- [Lite mode](./lite.html.md) +- [Read-only](./read-only.html.md) \ No newline at end of file diff --git a/docs/features/embeds/index.html b/docs/features/embeds/index.html new file mode 100644 index 0000000..826191f --- /dev/null +++ b/docs/features/embeds/index.html @@ -0,0 +1,89 @@ +Embedded Playgrounds | LiveCodes

    Embedded Playgrounds

    + +

    Overview​

    +

    LiveCodes playgrounds can be embedded in any web page. The playground can be prefilled with code in any supported language. This can be very useful in documentation websites, technical blogs, educational websites and others.

    +

    Demo:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "javascript"
    };
    createPlayground('#container', options);

    +

    The embedding web page can communicate with the playground using a powerful SDK (e.g. edit/format code, watch for code changes, get the compiled code or result page HTML, run tests, change layout, ...etc).

    +

    Create Embedded Playground​

    +

    App Embed Screen​

    +

    In the standalone app, the Embed Screen can be accessed from Project menu → Embed.

    + + +

    It shows a preview of the embedded playground, allows customizations of embed options and provides generated code that can be added to the web page that will embed the playground.

    +

    LiveCodes embed +LiveCodes embed +LiveCodes embed

    +
    Note

    Please note that the Embed Screen sends the project code to LiveCodes share service to generate a short URL for usage in the embed code.

    +

    The setting "Embed Type" allows selection from different variations of the generated code:

    +
      +
    • Using the SDK from CDN.
      • +
    • Using the SDK with a bundler (e.g. vite, parcel, webpack, etc).
      • +
    • Using the React SDK.
      • +
    • Using the Vue SDK.
      • +
    • Using iframe and query params.
      • +
    • Using HTML code that the SDK can use to auto-prefill the playground.
      • +
    +

    SDK​

    +

    The LiveCodes SDK can be used to embed playgrounds, specify embed and configuration options and allows communication with the embedded playground with many SDK methods.

    +

    This method provides more control and allows advanced scenarios.

    +

    Avoid Breaking Changes​

    +

    To avoid breaking changes that would cause the embedded playgrounds to stop working as expected with later updates, follow these recommendations:

    + +

    Check the Permanent URL section for more details.

    +

    Differences from Full App​

    +

    Some of the features of the full standalone app are not available or shown by default in embedded playgrounds, either because of security reasons, being not useful when embedded or because of space limitations.

    +

    Features Not Available​

    + +

    Features Not Shown by Default​

    + +

    Security​

    +
      +
    • +

      All user code, result page and compilers run in sandboxed iframes with a unique origin.

      +
      • +
    • +

      Embedded playgrounds do not have access to the parent page, or to sensitive data like user cookies and localstorage of the embedding page origin. Communications with the SDK occur by means of postMessage calls.

      +
      • +
    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/emmet/index.html b/docs/features/emmet/index.html new file mode 100644 index 0000000..a0317c4 --- /dev/null +++ b/docs/features/emmet/index.html @@ -0,0 +1,11 @@ +Emmet Support | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/export.html.md b/docs/features/export.html.md new file mode 100644 index 0000000..7547b0f --- /dev/null +++ b/docs/features/export.html.md @@ -0,0 +1,45 @@ +# Export + +## Exporting A Single Project + +Project export can be accessed from the Project menu → Export. + +![LiveCodes Export](../../static/img/screenshots/export-1.jpg) + +Any project can be exported to: + +- **Project (JSON):** a JSON file containing project [configuration object](../configuration/configuration-object.html.md). This can be used to later [import](./import.html.md)#import-exported-livecodes-projects) that project on the same or a different device or to share a copy of the project with others. +- **Source (ZIP):** a zip file containing the project configuration file as JSON, in addition to the source code in separate files. This can be useful for opening the code in an external IDE. +- **Result (HTML):** [result page](./result.html.md) as a single html file. Can be used for the purpose of demo or deploy. +- **GitHub gist** (_requires login with [GitHub account](./github-integration.html.md)_): creates a **public** GitHub gist on the user's GitHub account containing the source code as separate files. +- **CodePen:** creates a [CodePen](https://codepen.io/) prefilled with the project code. If the used [languages/frameworks](./../languages/index.html.md) are not supported in CodePen (e.g. Astro, Svelte, Python, ...etc), the compiled code is exported so that it continues to work there. [Bare module imports](./module-resolution.html.md) are converted to esm imports, for example: + + ```js + + ``` + + becomes: + + ```js + import React from 'https://cdn.skypack.dev/react'; + ``` + +- **JSFiddle:** creates a [JSFiddle](https://jsfiddle.net/) prefilled with the project code. Exported code may be modified like with CodePen (see above). + +## Exporting Multiple Projects + +Multiple projects can be exported in bulk from the [Saved Projects](./projects.html.md) screen (Project menu → Open) using the button `Export All`. + +![saved projects](../../static/img/screenshots/export-2.jpg) + +This produces a JSON file containing an array of project configuration objects. They can be later imported in the same or a different device using the `Bulk Import` functionality in the [Import screen](./import.html.md)#import-exported-livecodes-projects). + +All the currently visible projects will be exported. If projects are filtered (e.g. by language, tag or search query), only the shown projects are exported. + +## Related + +- [Projects](./projects.html.md) +- [Import](./import.html.md) +- [Backup/Restore](./backup-restore.html.md) +- [Sync](./sync.html.md) +- [Share](./share.html.md) \ No newline at end of file diff --git a/docs/features/export/index.html b/docs/features/export/index.html new file mode 100644 index 0000000..3a065d8 --- /dev/null +++ b/docs/features/export/index.html @@ -0,0 +1,51 @@ +Export | LiveCodes

    Export

    +

    Exporting A Single Project​

    +

    Project export can be accessed from the Project menu → Export.

    +

    LiveCodes Export

    +

    Any project can be exported to:

    +
      +
    • +

      Project (JSON): a JSON file containing project configuration object. This can be used to later import that project on the same or a different device or to share a copy of the project with others.

      +
      • +
    • +

      Source (ZIP): a zip file containing the project configuration file as JSON, in addition to the source code in separate files. This can be useful for opening the code in an external IDE.

      +
      • +
    • +

      Result (HTML): result page as a single html file. Can be used for the purpose of demo or deploy.

      +
      • +
    • +

      GitHub gist (requires login with GitHub account): creates a public GitHub gist on the user's GitHub account containing the source code as separate files.

      +
      • +
    • +

      CodePen: creates a CodePen prefilled with the project code. If the used languages/frameworks are not supported in CodePen (e.g. Astro, Svelte, Python, ...etc), the compiled code is exported so that it continues to work there. Bare module imports are converted to esm imports, for example:

      +
      +

      becomes:

      +
      import React from 'https://cdn.skypack.dev/react';
      +
      • +
    • +

      JSFiddle: creates a JSFiddle prefilled with the project code. Exported code may be modified like with CodePen (see above).

      +
      • +
    +

    Exporting Multiple Projects​

    +

    Multiple projects can be exported in bulk from the Saved Projects screen (Project menu → Open) using the button Export All.

    +

    saved projects

    +

    This produces a JSON file containing an array of project configuration objects. They can be later imported in the same or a different device using the Bulk Import functionality in the Import screen.

    +

    All the currently visible projects will be exported. If projects are filtered (e.g. by language, tag or search query), only the shown projects are exported.

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/external-resources.html.md b/docs/features/external-resources.html.md new file mode 100644 index 0000000..e06da02 --- /dev/null +++ b/docs/features/external-resources.html.md @@ -0,0 +1,51 @@ +# External Resources + +## Stylesheets and Scripts + +URLs to external CSS stylesheets and JS scripts can be added to the page from the UI using the Project menu → External Resources. In addition, there is a button to the External Resources in the toolbar below the editors. + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +URLs to stylesheets/scripts should be added each in a separate line. + +Stylesheets and scripts are loaded in the [result page](./result.html.md) before editor codes. Thus, CSS properties defined in external stylesheets can be overridden in the style editor. Global javascript variables defined in external scripts are available to code in the script editor. + +![External Resources](/img/screenshots/resources.jpg) + +Importing and Exporting code to other services (e.g. Codepen and Github gists) takes into consiedration the external resources. + +## Search for NPM Packages + +Package search allows finding NPM Packages and adding URLs to default scripts/stylesheets (hosted by [jsDelivr](https://www.jsdelivr.com/)). Specific package version can be specified. + +Examples for search terms: + +``` +jque + +jquery + +jquery@3 + +jquery@3.6 + +jquery@3.6.3 + +``` + +![External Resources Search](/img/screenshots/resources-search.jpg) + +## Fonts + +Fonts can be added from [Google fonts](https://fonts.google.com/). + +## CSS Presets + +CSS presets currently include [Normalize.css](https://necolas.github.io/normalize.css/) and [Reset CSS](https://meyerweb.com/eric/tools/css/reset/). + +## Related + +- [Module resolution](./module-resolution.html.md) +- [Assets](./assets.html.md) \ No newline at end of file diff --git a/docs/features/external-resources/index.html b/docs/features/external-resources/index.html new file mode 100644 index 0000000..8a5e904 --- /dev/null +++ b/docs/features/external-resources/index.html @@ -0,0 +1,33 @@ +External Resources | LiveCodes

    External Resources

    +

    Stylesheets and Scripts​

    +

    URLs to external CSS stylesheets and JS scripts can be added to the page from the UI using the Project menu → External Resources. In addition, there is a button to the External Resources in the toolbar below the editors.

    + + +

    URLs to stylesheets/scripts should be added each in a separate line.

    +

    Stylesheets and scripts are loaded in the result page before editor codes. Thus, CSS properties defined in external stylesheets can be overridden in the style editor. Global javascript variables defined in external scripts are available to code in the script editor.

    +

    External Resources

    +

    Importing and Exporting code to other services (e.g. Codepen and Github gists) takes into consiedration the external resources.

    +

    Search for NPM Packages​

    +

    Package search allows finding NPM Packages and adding URLs to default scripts/stylesheets (hosted by jsDelivr). Specific package version can be specified.

    +

    Examples for search terms:

    +
    jque

    jquery

    jquery@3

    jquery@3.6

    jquery@3.6.3

    +

    External Resources Search

    +

    Fonts​

    +

    Fonts can be added from Google fonts.

    +

    CSS Presets​

    +

    CSS presets currently include Normalize.css and Reset CSS.

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/github-integration.html.md b/docs/features/github-integration.html.md new file mode 100644 index 0000000..f7a0682 --- /dev/null +++ b/docs/features/github-integration.html.md @@ -0,0 +1,43 @@ +# GitHub Integration + +Generally, LiveCodes can be used anonymously without any accounts. This includes [importing](./import.html.md) code from GitHub gists or public repos. + +However, some features do require [login](./user-management.html.md) with a GitHub account and giving [specific permissions](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/scopes-for-oauth-apps#available-scopes) to make use of GitHub services (e.g. [import](./import.html.md) from private repos, [export](./export.html.md) to gist, [deploy](./deploy.html.md), [assets](./assets.html.md) and [sync](./sync.html.md)). + +:::caution cookies + +User authentication is handled using [Firebase Authentication](https://firebase.google.com/products/auth) which **may use cookies**. By logging in, you agree that cookies may be stored on your device. + +::: + +## Features that require GitHub Account + +### Public Repos + +Access to public repos is required for: + +- [Deploy](./deploy.html.md): A new public repo is created (if required) and code is pushed to the branch `gh-pages` of the repo. The is deployed on [GitHub pages](https://pages.github.com/). +- [Assets](./assets.html.md): can be stored on a public repo published on [GitHub pages](https://pages.github.com/). + +### Private Repos + +Access to private repos is required to: + +- [Import](./import.html.md) code from private repos. +- [Sync](./sync.html.md) LiveCodes data to a private repo. + +### Gists + +Access to gists is required to: + +- [Export](./export.html.md) projects to GitHub gist. + +## Setting Permissions + +GitHub user permissions for LiveCodes app are set the first time the user logs in. Any subsequent login will use the first permissions, even if they are set differently. + +To change previously set permissions: + +- [Logout](./user-management.html.md) from the LiveCodes app. +- [Revoke permissions](https://docs.github.com/en/apps/oauth-apps/using-oauth-apps/reviewing-your-authorized-oauth-applications) of LiveCodes app in your GitHub account. +- [Login](./user-management.html.md) again in LiveCodes and set the new permissions. \ No newline at end of file diff --git a/docs/features/github-integration/index.html b/docs/features/github-integration/index.html new file mode 100644 index 0000000..823d055 --- /dev/null +++ b/docs/features/github-integration/index.html @@ -0,0 +1,40 @@ +GitHub Integration | LiveCodes

    GitHub Integration

    +

    Generally, LiveCodes can be used anonymously without any accounts. This includes importing code from GitHub gists or public repos.

    +

    However, some features do require login with a GitHub account and giving specific permissions to make use of GitHub services (e.g. import from private repos, export to gist, deploy, assets and sync).

    +
    cookies

    User authentication is handled using Firebase Authentication which may use cookies. By logging in, you agree that cookies may be stored on your device.

    +

    Features that require GitHub Account​

    +

    Public Repos​

    +

    Access to public repos is required for:

    +
      +
    • Deploy: A new public repo is created (if required) and code is pushed to the branch gh-pages of the repo. The is deployed on GitHub pages.
      • +
    • Assets: can be stored on a public repo published on GitHub pages.
      • +
    +

    Private Repos​

    +

    Access to private repos is required to:

    +
      +
    • Import code from private repos.
      • +
    • Sync LiveCodes data to a private repo.
      • +
    +

    Gists​

    +

    Access to gists is required to:

    +
      +
    • Export projects to GitHub gist.
      • +
    +

    Setting Permissions​

    +

    GitHub user permissions for LiveCodes app are set the first time the user logs in. Any subsequent login will use the first permissions, even if they are set differently.

    +

    To change previously set permissions:

    +
      +
    • Logout from the LiveCodes app.
      • +
    • Revoke permissions of LiveCodes app in your GitHub account.
      • +
    • Login again in LiveCodes and set the new permissions.
      • +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/i18n.html.md b/docs/features/i18n.html.md new file mode 100644 index 0000000..4fd2887 --- /dev/null +++ b/docs/features/i18n.html.md @@ -0,0 +1,40 @@ +# Internationalization (i18n) + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +LiveCodes currently supports UI internationalization. By default, the UI language will be automatically detected based on your browser settings. + +You can easily switch between supported UI languages using the i18n menu, allowing you to explore and use LiveCodes in your preferred language! + +If you are interested in contributing to the translation of LiveCodes, please refer to the [i18n Contribution Guide](https://github.com/live-codes/livecodes/blob/develop/docs/docs/contribution/i18n.html.md). + +![I18n menu](../../static/img/screenshots/i18n-1.jpg) + +![LiveCodes in Chinese](../../static/img/screenshots/i18n-2.jpg) + +Demo: ([Embedded playground](./embeds.html.md) with `appLanguage: 'zh-CN'`) + + + +## Using SDK + +Set the [configuration object](../configuration/configuration-object.html.md) property [`appLanguage`](../configuration/configuration-object.html.md)#applanguage) to a supported language code. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container', { template: 'javascript', config: { appLanguage: 'auto' } }); +``` + +## Using query params + +Add the [query parameter](../configuration/query-params.html.md) `appLanguage` with your preferred language code. + +https://livecodes.io?template=javascript&appLanguage=fr + +## Related + +- [User Settings](./user-settings.html.md) +- [Editor Settings](./editor-settings.html.md) +- [Query params](../configuration/query-params.html.md) +- [i18n Contribution Guide](https://github.com/live-codes/livecodes/blob/develop/docs/docs/contribution/i18n.html.md) \ No newline at end of file diff --git a/docs/features/i18n/index.html b/docs/features/i18n/index.html new file mode 100644 index 0000000..9f852df --- /dev/null +++ b/docs/features/i18n/index.html @@ -0,0 +1,32 @@ +Internationalization (i18n) | LiveCodes

    Internationalization (i18n)

    + +

    LiveCodes currently supports UI internationalization. By default, the UI language will be automatically detected based on your browser settings.

    +

    You can easily switch between supported UI languages using the i18n menu, allowing you to explore and use LiveCodes in your preferred language!

    +

    If you are interested in contributing to the translation of LiveCodes, please refer to the i18n Contribution Guide.

    +

    I18n menu

    +

    LiveCodes in Chinese

    +

    Demo: (Embedded playground with appLanguage: 'zh-CN')

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "javascript",
      "config": {
        "appLanguage": "zh-CN"
      }
    };
    createPlayground('#container', options);

    +

    Using SDK​

    +

    Set the configuration object property appLanguage to a supported language code.

    +
    import { createPlayground } from 'livecodes';

    createPlayground('#container', { template: 'javascript', config: { appLanguage: 'auto' } });
    +

    Using query params​

    +

    Add the query parameter appLanguage with your preferred language code.

    +

    https://livecodes.io?template=javascript&appLanguage=fr

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/import.html.md b/docs/features/import.html.md new file mode 100644 index 0000000..41cb1c8 --- /dev/null +++ b/docs/features/import.html.md @@ -0,0 +1,190 @@ +# Import + +## Overview + +LiveCodes supports importing code from a wide variety of [sources](#sources). This can be achieved using one of the following methods: + +### UI + +The Import screen can be accessed from the Project menu → Import. + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +![LiveCodes Import](../../static/img/screenshots/import-1.jpg) + +![LiveCodes Import](../../static/img/screenshots/import-2.jpg) + +### Query Param + +A URL of any of the [sources](#sources) can be imported by adding it as a value to [query param](../configuration/query-params.html.md) key: `x`. + +Example: + +https://livecodes.io/?x=https://gist.github.com/f01deb828a42f363502fbae7964d48e9 + +### Bookmarklet + +Instead of manually copy/pasting URLs to import, adding [**"Edit in LiveCodes"** bookmarklet](../bookmarklet.html.md) to the browser bookmarks bar can be a more convenient way. It opens LiveCodes in a new window and imports the current webpage URL. + +### SDK + +For [embedded playgrounds](./embeds.html.md), use the [SDK](../sdk/index.html.md) property [`EmbedOptions.import`](../sdk/js-ts.html.md)#import). + +## Examples + +- GitHub File: + + URL: https://github.com/lodash/lodash/blob/master/isObject.js + + [Open in LiveCodes](https://livecodes.io/?x=https://github.com/lodash/lodash/blob/master/isObject.js) + +- GitHub Directory: + + URL: https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards + + [Open in LiveCodes](https://livecodes.io/?x=https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards) + +- GitHub Gist: + + URL: https://gist.github.com/f01deb828a42f363502fbae7964d48e9 + + [Open in LiveCodes](https://livecodes.io/?x=https://gist.github.com/f01deb828a42f363502fbae7964d48e9) + +- JS Bin: + + URL: https://jsbin.com/iwovaj/73/embed?html,js,output + + [Open in LiveCodes](https://livecodes.io/?x=https://jsbin.com/iwovaj/73/embed?html,js,output) + +- Vue Playground: + + URL: [https://play.vuejs.org/#eNp9kUFKAzEUhq/yyKYKtUW6K9OCli4UUVFxlU2Z...](https://play.vuejs.org/#eNp9kUFKAzEUhq/yyKYKtUW6K9OCli4UUVFxlU2Zvk5TM0lIXsbCMGdw7QG8g+fxAl7Bl5RWF9Jd3v//7+cLrxUXzg2aiGIsilB65QgCUnRTaVTtrCdoweMKOlh5W0OPoz1ppCmtCQR1qGCS/JPejWpwZpcY4Ov94/vzDZ45eSpNMdzVciEPhLXTC0KeAIr1+bRtc0nXFUOesqqMiwTNWc1teiIF+1KwVQwP26IvKDDCSlWDTbCG6du0K0Vpa6c0+jtHihGlGEN2krfQ2r5eZ418xP5eL9dYvvyjb8I2aVLcewzoG5Ti4NHCV0g7e/54i1t+H0wmj5rTR8wHDFbHxLiLXUazZOw/uUx7lW+gTPUU5ltCE/afSqAp2eW8FHyX2ZGv/+KOBqO8J00nuh/8Wasi) + + [Open in LiveCodes](https://livecodes.io/?x=https%3A%2F%2Fplay.vuejs.org%2F%23eNp9kUFKAzEUhq%2FyyKYKtUW6K9OCli4UUVFxlU2Zvk5TM0lIXsbCMGdw7QG8g%2BfxAl7Bl5RWF9Jd3v%2F%2F7%2BcLrxUXzg2aiGIsilB65QgCUnRTaVTtrCdoweMKOlh5W0OPoz1ppCmtCQR1qGCS%2FJPejWpwZpcY4Ov94%2FvzDZ45eSpNMdzVciEPhLXTC0KeAIr1%2BbRtc0nXFUOesqqMiwTNWc1teiIF%2B1KwVQwP26IvKDDCSlWDTbCG6du0K0Vpa6c0%2BjtHihGlGEN2krfQ2r5eZ418xP5eL9dYvvyjb8I2aVLcewzoG5Ti4NHCV0g7e%2F54i1t%2BH0wmj5rTR8wHDFbHxLiLXUazZOw%2FuUx7lW%2BgTPUU5ltCE%2FafSqAp2eW8FHyX2ZGv%2F%2BKOBqO8J00nuh%2F8Wasi) + +## Sources + +Import is supported from any of the following: + +- GitHub gist +- GitHub file +- Directory in a GitHub repo +- Gitlab snippet +- Gitlab file +- Directory in a Gitlab repo +- JS Bin +- [Shared projects](./share.html.md) +- Raw code +- Code in web page DOM +- Projects shared in official playgrounds of [TypeScript](https://www.typescriptlang.org/play) and [Vue](https://play.vuejs.org/) +- Local file(s) +- Code in zip file (Local or URL) +- [Exported project JSON](./export.html.md) (single project and bulk import) + +Import sources are identified by URL patterns (e.g. origin, pathname and extension). + +:::tip +Local files can be imported from the "Import Screen" or by dragging and dropping the file(s) in the editor. +::: + +## File Selection + +For sources that provide multiple files (e.g. GitHub/GitLab directories, GitHub gists, GitLab snippets and local files), a best guess is tried to load files in respective editors. Best results are when there are 3 files and each file is in a language (identified by file extension) that can be loaded to a different editor, for example: + +- index.html, style.css, script.js +- default.pug, app.scss, main.ts + +The following file names are given higher priority: + +- Markup files starting with `index.` or `default.` +- Style files starting with `style.` or `styles.` +- Script files starting with `script.`, `app.`, `main.` or `index.` + +While README, markdown files and files with no extension are given lower priority. + +Alternatively, files can be specified using the `files` [query param](../configuration/query-params.html.md). It takes a **comma-separated list** of filenames. The first 3 found files are loaded. If 1 or 2 files are specified, only these will be loaded. The first matching file is shown by default in the active editor. + +The query params should have the following format: +`?x={url}&files={file1},{file2},{file3}` + +Example: +`?x={url}&files=Counter.tsx,counter.scss,counter.html` + +The active editor can be specified using the [`activeEditor`](../configuration/configuration-object.html.md)#activeeditor) (or its alias `active`) [query param](../configuration/query-params.html.md). It takes the name of the editor (`markup`, `style` or `script`) or its ID (`0`, `1` or `2`) to be shown by default. + +Example: +`?x={url}&activeEditor=style` or `?x={url}&active=1` + +## Import Shared Projects + +[Shared Projects](./share.html.md) can be imported using the value of the query param `x` generated by the Share screen. This starts with either: + +- `code/`: for compressed base64-encoded project config +- `id/`: for short URLs recognized by shared project id. + +Example: + +https://livecodes.io/?x=id/bi9qszw86w3 + +## Import Code from DOM + +If the source URL does not match one of the supported origins (GitHub, GitLab and JS Bin), the URL is fetched, its response text is parsed as [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) and code is extracted from elements that match specific CSS selectors. +(By default: `.livecodes [data-lang="{language}"]`) + +:::info Example + +```html + + 
    This is identified as <strong>HTML</strong> code
    +     +``` + +The HTML editor is prefilled with: `This is identified as HTML code` + +Please note that the code should be html-encoded to avoid interference with the HTML of the page. + +::: + +Example: + +https://livecodes.io/?x=https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html + +Alternatively, custom CSS selectors can be specified using [query params](../configuration/query-params.html.md): +`?x={url}&{language}-selector={selector}` + +The following example loads the content of the first element that matches the CSS selector `h3` as `html`: + +https://livecodes.io/?html-selector=h3&x=https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html + +Of course, [embedded playgrounds](./embeds.html.md) can be prefilled with code from the same embedding page. This works well for documentation and educational websites. + +[This is a demo](https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html) for automatic extraction of code blocks to prefill editors by creating "Edit in LiveCodes" links. Also embedded editors are prefilled from the code blocks. ([View source](https://github.com/live-codes/livecodes-examples/blob/master/prefill-from-code-blocks.html)) + +## Import Raw Code + +If the response text could not be parsed as DOM or no elements matched the CSS selectors, it is assumed to be raw code and the response text is loaded to editor. If the URL ends with an extension it is used to identify the language, otherwise it is assumed to be `html`. + +Alternatively, the language of raw code can be specified using [query params](../configuration/query-params.html.md): +`?x={url}&raw={language}` + +## Import from CodePen + +Currently, CodePen API does not allow directly importing code from Pens. However, you can export any saved Pen as a [zip file](https://blog.codepen.io/documentation/exporting-pens/#export-zip-1) or [Github gist](https://blog.codepen.io/documentation/exporting-pens/#save-as-github-gist-2) and then import it to LiveCodes. The format that Codepen exports is well understood by LiveCodes. Most Pens can be imported with no or minimal changes. + +**Note:** External resources (styles/scripts) are not exported with source code in zip file export of CodePen. However, export to GitHub gist does export these. So if a Pen with external resources exported as zip file is not imported properly, try exporting to GitHub gist or manually add the [external resources](./external-resources.html.md). + +## Import Exported LiveCodes Projects + +A [single project exported as JSON](./export.html.md)#exporting-a-single-project) can be imported in the same or a different device from the import screen under the tab "Import Project JSON". The JSON file can be supplied as a local file upload or from a URL. + +Similarly, [multiple projects exported in bulk](./export.html.md)#exporting-multiple-projects) can be imported from the tab "Bulk Import". + +## Related + +- [Code prefill](./code-prefill.html.md) +- [Export](./export.html.md) +- [External resources](./external-resources.html.md) +- [Module resolution](./module-resolution.html.md) +- [Projects](./projects.html.md) \ No newline at end of file diff --git a/docs/features/import/index.html b/docs/features/import/index.html new file mode 100644 index 0000000..bd8ab09 --- /dev/null +++ b/docs/features/import/index.html @@ -0,0 +1,134 @@ +Import | LiveCodes

    Import

    +

    Overview​

    +

    LiveCodes supports importing code from a wide variety of sources. This can be achieved using one of the following methods:

    +

    UI​

    +

    The Import screen can be accessed from the Project menu → Import.

    + + +

    LiveCodes Import

    +

    LiveCodes Import

    +

    Query Param​

    +

    A URL of any of the sources can be imported by adding it as a value to query param key: x.

    +

    Example:

    +

    https://livecodes.io/?x=https://gist.github.com/f01deb828a42f363502fbae7964d48e9

    +

    Bookmarklet​

    +

    Instead of manually copy/pasting URLs to import, adding "Edit in LiveCodes" bookmarklet to the browser bookmarks bar can be a more convenient way. It opens LiveCodes in a new window and imports the current webpage URL.

    +

    SDK​

    +

    For embedded playgrounds, use the SDK property EmbedOptions.import.

    +

    Examples​

    + +

    Sources​

    +

    Import is supported from any of the following:

    +
      +
    • GitHub gist
      • +
    • GitHub file
      • +
    • Directory in a GitHub repo
      • +
    • Gitlab snippet
      • +
    • Gitlab file
      • +
    • Directory in a Gitlab repo
      • +
    • JS Bin
      • +
    • Shared projects
      • +
    • Raw code
      • +
    • Code in web page DOM
      • +
    • Projects shared in official playgrounds of TypeScript and Vue
      • +
    • Local file(s)
      • +
    • Code in zip file (Local or URL)
      • +
    • Exported project JSON (single project and bulk import)
      • +
    +

    Import sources are identified by URL patterns (e.g. origin, pathname and extension).

    +
    tip

    Local files can be imported from the "Import Screen" or by dragging and dropping the file(s) in the editor.

    +

    File Selection​

    +

    For sources that provide multiple files (e.g. GitHub/GitLab directories, GitHub gists, GitLab snippets and local files), a best guess is tried to load files in respective editors. Best results are when there are 3 files and each file is in a language (identified by file extension) that can be loaded to a different editor, for example:

    +
      +
    • index.html, style.css, script.js
      • +
    • default.pug, app.scss, main.ts
      • +
    +

    The following file names are given higher priority:

    +
      +
    • Markup files starting with index. or default.
      • +
    • Style files starting with style. or styles.
      • +
    • Script files starting with script., app., main. or index.
      • +
    +

    While README, markdown files and files with no extension are given lower priority.

    +

    Alternatively, files can be specified using the files query param. It takes a comma-separated list of filenames. The first 3 found files are loaded. If 1 or 2 files are specified, only these will be loaded. The first matching file is shown by default in the active editor.

    +

    The query params should have the following format: +?x={url}&files={file1},{file2},{file3}

    +

    Example: +?x={url}&files=Counter.tsx,counter.scss,counter.html

    +

    The active editor can be specified using the activeEditor (or its alias active) query param. It takes the name of the editor (markup, style or script) or its ID (0, 1 or 2) to be shown by default.

    +

    Example: +?x={url}&activeEditor=style or ?x={url}&active=1

    +

    Import Shared Projects​

    +

    Shared Projects can be imported using the value of the query param x generated by the Share screen. This starts with either:

    +
      +
    • code/: for compressed base64-encoded project config
      • +
    • id/: for short URLs recognized by shared project id.
      • +
    +

    Example:

    +

    https://livecodes.io/?x=id/bi9qszw86w3

    +

    Import Code from DOM​

    +

    If the source URL does not match one of the supported origins (GitHub, GitLab and JS Bin), the URL is fetched, its response text is parsed as DOM and code is extracted from elements that match specific CSS selectors. +(By default: .livecodes [data-lang="{language}"])

    +
    Example
    <code class="livecodes">
      <pre data-lang="html">This is identified as &lt;strong&gt;HTML&lt;/strong&gt; code</pre>
    </code>

    The HTML editor is prefilled with: This is identified as <strong>HTML</strong> code

    Please note that the code should be html-encoded to avoid interference with the HTML of the page.

    +

    Example:

    +

    https://livecodes.io/?x=https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html

    +

    Alternatively, custom CSS selectors can be specified using query params: +?x={url}&{language}-selector={selector}

    +

    The following example loads the content of the first element that matches the CSS selector h3 as html:

    +

    https://livecodes.io/?html-selector=h3&x=https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html

    +

    Of course, embedded playgrounds can be prefilled with code from the same embedding page. This works well for documentation and educational websites.

    +

    This is a demo for automatic extraction of code blocks to prefill editors by creating "Edit in LiveCodes" links. Also embedded editors are prefilled from the code blocks. (View source)

    +

    Import Raw Code​

    +

    If the response text could not be parsed as DOM or no elements matched the CSS selectors, it is assumed to be raw code and the response text is loaded to editor. If the URL ends with an extension it is used to identify the language, otherwise it is assumed to be html.

    +

    Alternatively, the language of raw code can be specified using query params: +?x={url}&raw={language}

    +

    Import from CodePen​

    +

    Currently, CodePen API does not allow directly importing code from Pens. However, you can export any saved Pen as a zip file or Github gist and then import it to LiveCodes. The format that Codepen exports is well understood by LiveCodes. Most Pens can be imported with no or minimal changes.

    +

    Note: External resources (styles/scripts) are not exported with source code in zip file export of CodePen. However, export to GitHub gist does export these. So if a Pen with external resources exported as zip file is not imported properly, try exporting to GitHub gist or manually add the external resources.

    +

    Import Exported LiveCodes Projects​

    +

    A single project exported as JSON can be imported in the same or a different device from the import screen under the tab "Import Project JSON". The JSON file can be supplied as a local file upload or from a URL.

    +

    Similarly, multiple projects exported in bulk can be imported from the tab "Bulk Import".

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/index.html b/docs/features/index.html new file mode 100644 index 0000000..02b14c2 --- /dev/null +++ b/docs/features/index.html @@ -0,0 +1,61 @@ +Features | LiveCodes

    Features

    +

    Overview​

    +

    LiveCodes is an open-source, client-side, code playground that runs in the browser. It enables quick prototyping and experimenting with a wide variety of technologies (including 90+ languages, frameworks and processors) without having to manually setup a development environment for each. The result is displayed as a regular web page. The rapid feedback of previewing the result page without waiting for build steps significantly boosts productivity.

    +

    LiveCodes screenshot

    +

    LiveCodes screenshot

    +

    LiveCodes screenshot

    +

    In this page, a quick overview of the important features are presented. A more detailed description of each feature is described in the following sections.

    +

    Powerful Editor​

    +

    The default code editor is the powerful editor that powers VS Code, featuring code-completion, go-to-definition, multi-cursor support and other powerful features you got used to. The editor is very customizable. It supports keyboard shortcuts, code formatting, Emmet abbreviations and even Vim and Emacs bindings.

    +

    AI Code Assistant​

    +

    LiveCodes supports AI-powered code completion, totally for free, using Codeium, the ultrafast Copilot alternative. Install the Codeium chrome extension and enjoy the magic!

    +

    Mobile-friendly​

    +

    The responsive layout allows working on devices with different screen sizes. On mobile, a lighter-weight touch-friendly code editor (CodeMirror 6) is used, so that you can experiment your ideas on the go.

    +

    External Code/Libraries​

    +

    External scripts/stylesheets can be added to the web page. There is a UI screen that helps you search for and add NPM libraries and google fonts. Moreover, NPM modules can be imported without the need for any npm installs.

    +

    Import and Code Pre-fill​

    +

    Code can be imported from a variety of sources including GitHub gist, GitHub file, directory in a GitHub repo, Gitlab snippet, Gitlab file, directory in a Gitlab repo, JS Bin, raw code, code in web page DOM and code in zip file. You can also pre-fill code using various ways.

    +

    Share/Export​

    +

    Projects can be easily shared as URLs or QR codes. In addition, you may export any project as HTML, JSON or zip file containing source code files. You may also export to other services like GitHub gists, CodePen or JSFiddle.

    +

    Embed​

    +

    Projects can be embedded in any web page. The embed screen allows you to customize the embed options and preview the resulting playground. An easy-to-use, yet powerful, SDK, that allows communication between the embedding page and the playground.

    +

    Deploy​

    +

    Projects can be deployed to public URLs that can be shared with others. This is hosted for free on GitHub Pages.

    +

    Starter Templates​

    +

    A large number of starter templates are available. They can be used to get you started with most of the supported technologies.

    +

    Starter templates

    +

    Assets​

    +

    Your own local assets (e.g. images, icons, fonts, local scripts and stylesheets) can be added to the app and then used in any project. The assets are made available even when the projects are shared, exported or deployed.

    +

    Dev Tools​

    +

    Tools like console, compiled code viewer and test runner can significantly improve your development experience.

    +

    Broadcast​

    +

    You can broadcast source code or result in real-time to others. This can be of great value as an educational tool and for demo purposes.

    +

    Sync/Backup/Restore​

    +

    Do you work on multiple devices? No Problem! You may sync, backup and restore your data any time on any device.

    +

    Themes​

    +

    LiveCodes comes with dark and light themes. In addition, a theme color can be set to change the app color.

    +

    i18n​

    +

    LiveCodes supports internationalization for multiple languages.

    +

    Client-side!​

    +

    LiveCodes runs in the browser, where all the processing/transpilation occurs, with no server rounds required. So, after the initial load, it becomes pretty fast. It can be hosted on any static file server or CDN. No npm installs. Just the browser!

    +

    Developer-friendly​

    +

    LiveCodes makes it easy to get started. It is highly configurable. Lots of features can be configured by URL query params. The SDK facilitates embedding playgrounds and allows easy communication with them. The SDK is available for use in JS/TS, React Vue and Svelte.

    +

    Comprehensive Documentations​

    +

    Rich documentations with screenshots, code samples and live demos are available. They cover the app features, configuration, supported languages and SDK (including TypeScript Types). A gallery of usage examples is provided as a storybook.

    +

    Focused on Privacy​

    +

    Projects are private by default. The code you write in LiveCodes never leaves your computer, unless you choose to share, export, broadcast or sync it. User data is stored in the browser.

    +

    Free and Open-Source​

    +

    LiveCodes is free, with no limits for use and no ads. +No account is even required (unless GitHub integration is needed). +Do you want to self-host it for commercial use? No problem! It is MIT-licensed 🎉. Please consider sponsoring LiveCodes ❤.

    +

    This was a quick overview of the important features of LiveCodes. A more detailed description of each feature is described in the following sections.

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/index.html.md b/docs/features/index.html.md new file mode 100644 index 0000000..c0f5987 --- /dev/null +++ b/docs/features/index.html.md @@ -0,0 +1,99 @@ +# Features + +## Overview + +_LiveCodes_ is an open-source, client-side, code playground that runs in the browser. It enables quick prototyping and experimenting with a wide variety of [technologies](../languages/index.html.md) (including 90+ languages, frameworks and processors) without having to manually setup a development environment for each. The [result](./result.html.md) is displayed as a regular web page. The rapid feedback of previewing the result page without waiting for build steps significantly boosts productivity. + +![LiveCodes screenshot](../../static/img/screenshots/features-1.jpg) + +![LiveCodes screenshot](../../static/img/screenshots/features-2.jpg) + +![LiveCodes screenshot](../../static/img/screenshots/features-3.jpg) + +In this page, a quick overview of the important features are presented. A more detailed description of each feature is described in the following sections. + +## Powerful Editor + +The default code editor is the powerful editor that powers [VS Code](https://code.visualstudio.com/), featuring code-completion, go-to-definition, multi-cursor support and other powerful features you got used to. The editor is very [customizable](./editor-settings.html.md). It supports [keyboard shortcuts](./keyboard-shortcuts.html.md), [code formatting](./code-format.html.md), [Emmet abbreviations](./editor-settings.html.md)#emmet) and even [Vim and Emacs bindings](./editor-settings.html.md)#editor-modes). + +## AI Code Assistant + +LiveCodes supports AI-powered code completion, totally for **free**, using [Codeium](https://codeium.com/), the ultrafast Copilot alternative. Install the [Codeium chrome extension](https://codeium.com/chrome_tutorial) and enjoy the magic! + +## Mobile-friendly + +The responsive layout allows working on devices with different screen sizes. On mobile, a lighter-weight touch-friendly code editor (CodeMirror 6) is used, so that you can experiment your ideas on the go. + +## External Code/Libraries + +[External scripts/stylesheets](./external-resources.html.md) can be added to the web page. There is a UI screen that helps you search for and add NPM libraries and google fonts. Moreover, [NPM modules can be imported](./module-resolution.html.md) without the need for any `npm install`s. + +## Import and Code Pre-fill + +Code can be [imported](./import.html.md) from a variety of sources including GitHub gist, GitHub file, directory in a GitHub repo, Gitlab snippet, Gitlab file, directory in a Gitlab repo, JS Bin, raw code, code in web page DOM and code in zip file. You can also [pre-fill code](./code-prefill.html.md) using various ways. + +## Share/Export + +Projects can be easily [shared](./share.html.md) as URLs or QR codes. In addition, you may [export](./export.html.md) any project as HTML, JSON or zip file containing source code files. You may also export to other services like GitHub gists, CodePen or JSFiddle. + +## Embed + +Projects can be [embedded](./embeds.html.md) in any web page. The embed screen allows you to customize the embed options and preview the resulting playground. An easy-to-use, yet powerful, [SDK](../sdk/index.html.md), that allows [communication](../sdk/js-ts.html.md)#sdk-methods) between the embedding page and the playground. + +## Deploy + +Projects can be [deployed](./deploy.html.md) to public URLs that can be shared with others. This is hosted for free on GitHub Pages. + +## Starter Templates + +A large number of [starter templates](./templates.html.md) are available. They can be used to get you started with most of the supported technologies. + +![Starter templates](../../static/img/screenshots/templates-1.jpg) + +## Assets + +Your own local assets (e.g. images, icons, fonts, local scripts and stylesheets) can be added to the app and then used in any project. The assets are made available even when the projects are shared, exported or deployed. + +## Dev Tools + +[Tools](./tools-pane.html.md) like [console](./console.html.md), [compiled code viewer](./compiled-code.html.md) and [test runner](./tests.html.md) can significantly improve your development experience. + +## Broadcast + +You can [broadcast](./broadcast.html.md) source code or result in real-time to others. This can be of great value as an educational tool and for demo purposes. + +## Sync/Backup/Restore + +Do you work on multiple devices? No Problem! You may [sync](./sync.html.md), [backup and restore](./backup-restore.html.md) your data any time on any device. + +## Themes + +LiveCodes comes with dark and light themes. In addition, a theme color can be set to change the app color. + +## i18n + +LiveCodes supports [internationalization](./i18n.html.md) for multiple languages. + +## Client-side! + +LiveCodes runs in the browser, where all the processing/transpilation occurs, with no server rounds required. So, after the initial load, it becomes pretty fast. It can be hosted on any static file server or CDN. No `npm install`s. Just the browser! + +## Developer-friendly + +LiveCodes makes it easy to [get started](../getting-started.html.md). It is highly [configurable](../configuration/index.html.md). Lots of features can be configured by URL [query params](../configuration/query-params.html.md). The [SDK](../sdk/index.html.md) facilitates [embedding](./embeds.html.md) playgrounds and allows easy [communication](../sdk/js-ts.html.md)#sdk-methods) with them. The SDK is available for use in [JS/TS](../sdk/js-ts.html.md), [React](../sdk/react.html.md) [Vue](../sdk/vue.html.md) and [Svelte](../sdk/svelte.html.md). + +## Comprehensive Documentations + +Rich documentations with screenshots, code samples and live demos are available. They cover the app [features](../features/index.html.md), [configuration](../configuration/index.html.md), [supported languages](../languages/index.html.md) and [SDK](../sdk/index.html.md) (including [TypeScript Types](../api/globals.md)). A gallery of usage examples is provided as a [storybook](pathname:///../stories). + +## Focused on Privacy + +Projects are private by default. The code you write in LiveCodes never leaves your computer, unless you choose to [share](./share.html.md), [export](./export.html.md), [broadcast](./broadcast.html.md) or [sync](./sync.html.md) it. User data is stored in the browser. + +## Free and Open-Source + +LiveCodes is free, with no limits for use and no ads. +No account is even required (unless [GitHub integration](./github-integration.html.md) is needed). +Do you want to [self-host](./self-hosting.html.md) it for commercial use? No problem! It is [MIT-licensed](../license.html.md) 🎉. Please consider [sponsoring LiveCodes](../sponsor.html.md) ❤. + +This was a quick overview of the important features of LiveCodes. A more detailed description of each feature is described in the following sections. \ No newline at end of file diff --git a/docs/features/integrations.html.md b/docs/features/integrations.html.md new file mode 100644 index 0000000..97a7514 --- /dev/null +++ b/docs/features/integrations.html.md @@ -0,0 +1 @@ +# Integrations \ No newline at end of file diff --git a/docs/features/integrations/index.html b/docs/features/integrations/index.html new file mode 100644 index 0000000..e718e59 --- /dev/null +++ b/docs/features/integrations/index.html @@ -0,0 +1,11 @@ +Integrations | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/intellisense.html.md b/docs/features/intellisense.html.md new file mode 100644 index 0000000..bc26b28 --- /dev/null +++ b/docs/features/intellisense.html.md @@ -0,0 +1,165 @@ +# IntelliSense + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The [code editor](./editor-settings.html.md)#code-editor) provides a rich experience with [intellisense](https://code.visualstudio.com/docs/editor/intellisense) and autocompletion. Many of the features required for this are based on TypeScript types that are either inferred by the editor or supplied as data definition files. + +This not only works when the editor language is TypeScript, but also works with others like JavaScript and JSX. + +Example: + +![LiveCodes Autocomplete](../../static/img/screenshots/autocomplete.jpg) + +## Types for imported npm packages + +LiveCodes will try to automatically find type definitions for npm modules imported in the editor. + +These are examples for automatically loading React types with autocomplete and hover info: + +![LiveCodes Intellisense](../../static/img/screenshots/intellisense-1.jpg) + +![LiveCodes Intellisense](../../static/img/screenshots/intellisense-2.jpg) + +## TypeScript TwoSlash + +The code editor supports [TypeScript TwoSlash](https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ts-twoslasher). This can be very useful for debugging, sharing and teaching TypeScript. + +This is supported in [JavaScript](../languages/javascript.html.md), [TypeScript](../languages/typescript.html.md), [JSX](../languages/jsx.html.md) and [TSX](../languages/tsx.html.md). This also includes [Babel](../languages/babel.html.md), [Sucrase](../languages/sucrase.html.md), [Solid](../languages/solid.html.md), [React Native](../languages/react-native.html.md), etc. + +![TypeScript TwoSlash](../../static/img/screenshots/twoslash.jpg) + +![TwoSlash in JSX](../../static/img/screenshots/twoslash-jsx.jpg) + +## Custom Types + +If no type definitions are found, or if you want to provide your own (e.g. for a module that is not hosted on npm), custom type definition files can be used. + +In the standalone app, these can be provided in [custom settings](../advanced/custom-settings.html.md) using the `types` property. This takes an object with the key representing the module name and the value representing the URL of the file. + +Example: + +```json title="Custom Settings" +{ + "types": { + "my-module": "https://cdn.jsdelivr.net/npm/my-module@1.0.0/types/my-module.d.ts", + "my-other-module": "https://my-website.com/my-other-module/my-other-module.d.ts" + } +} +``` + +For embedded playgrounds, these can be provided in the [configuration object](../configuration/configuration-object.html.md) using the [`types`](../configuration/configuration-object.html.md)#types) property. + +This can be combined with the [`imports`](../configuration/configuration-object.html.md)#imports) property to provide [importmap](./module-resolution.html.md)#custom-module-resolution) for runtime implementation of your custom modules. + +This is an example of how to create a playground that provides the implementation of the custom module: `my-module` and its type definition to provide editor intellisense: + +```js +import { createPlayground } from 'livecodes'; + +const config = { + activeEditor: 'script', + script: { + language: 'javascript', + content: `import { foo } from 'my-module';\n\nconsole.log(foo());` + }; + imports: { + 'my-module': 'https://my-website.com/my-module/index.js', + }, + types: { + 'my-module': 'https://my-website.com/my-module/my-module.d.ts', + }, +}; + +createPlayground('#container', {config}); +``` + +Please note that the URLs used for `types` and `imports` properties may be full URLs or [data URLs](./data-urls.html.md). + +This can be of great use for library authors who want to provide playgrounds for documenting their libraries that are not (yet) published to npm. + +## Demo + +Let's assume we have this TypeScript module: + +```ts title="Greeter.ts" +export class Greeter { + private morningGreetings = ['Good morning', 'Have a good day', 'How are you today?']; + private eveningGreetings = ['Good evening', 'Good night', 'Sleep well']; + + private randomSelector(array: string[]) { + return array[Math.floor(Math.random() * array.length)]; + } + + public morning() { + return this.randomSelector(this.morningGreetings); + } + + public evening() { + return this.randomSelector(this.eveningGreetings); + } +} +``` + +which compiles to this JavaScript: + +```js title="Greeter.js" +export class Greeter { + constructor() { + this.morningGreetings = ['Good morning', 'Have a good day', 'How are you today?']; + this.eveningGreetings = ['Good evening', 'Good night', 'Sleep well']; + } + randomSelector(array) { + return array[Math.floor(Math.random() * array.length)]; + } + morning() { + return this.randomSelector(this.morningGreetings); + } + evening() { + return this.randomSelector(this.eveningGreetings); + } +} +``` + +and this type definition: + +```ts title="Greeter.d.ts" +export declare class Greeter { + private morningGreetings; + private eveningGreetings; + private randomSelector; + morning(): string; + evening(): string; +} +``` + +The JavaScript output (Greeter.js) and the data definition file (Greeter.d.ts) should be hosted online or converted to data URLs (see [assets](./assets.html.md) and [data URLs](./data-urls.html.md)). + +Then, they can be used like that: + +export const customModules = { + editor: 'monaco', + activeEditor: 'script', + script: { + language: 'typescript', + content: + "import { Greeter } from 'my-greeter';\n\nconst greeter = new Greeter();\n// now `greeter` has autocomplete\n\ndocument.body.innerText = greeter.morning();\n\n// this should show error in the editor\n// Property 'morningGreetings' is private and only accessible within class 'Greeter'\nconsole.log(greeter.morningGreetings);", + }, + imports: { + 'my-greeter': + 'data:text/javascript;charset=UTF-8;base64,ZXhwb3J0IGNsYXNzIEdyZWV0ZXIgew0KICAgIGNvbnN0cnVjdG9yKCkgew0KICAgICAgICB0aGlzLm1vcm5pbmdHcmVldGluZ3MgPSBbJ0dvb2QgbW9ybmluZycsICdIYXZlIGEgZ29vZCBkYXknLCAnSG93IGFyZSB5b3UgdG9kYXk/J107DQogICAgICAgIHRoaXMuZXZlbmluZ0dyZWV0aW5ncyA9IFsnR29vZCBldmVuaW5nJywgJ0dvb2QgbmlnaHQnLCAnU2xlZXAgd2VsbCddOw0KICAgIH0NCiAgICByYW5kb21TZWxlY3RvcihhcnJheSkgew0KICAgICAgICByZXR1cm4gYXJyYXlbTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogYXJyYXkubGVuZ3RoKV07DQogICAgfQ0KICAgIG1vcm5pbmcoKSB7DQogICAgICAgIHJldHVybiB0aGlzLnJhbmRvbVNlbGVjdG9yKHRoaXMubW9ybmluZ0dyZWV0aW5ncyk7DQogICAgfQ0KICAgIGV2ZW5pbmcoKSB7DQogICAgICAgIHJldHVybiB0aGlzLnJhbmRvbVNlbGVjdG9yKHRoaXMuZXZlbmluZ0dyZWV0aW5ncyk7DQogICAgfQ0KfQ0K', + }, + types: { + 'my-greeter': + 'data:text/typescript;charset=UTF-8;base64,ZXhwb3J0IGRlY2xhcmUgY2xhc3MgR3JlZXRlciB7DQogIHByaXZhdGUgbW9ybmluZ0dyZWV0aW5nczsNCiAgcHJpdmF0ZSBldmVuaW5nR3JlZXRpbmdzOw0KICBwcml2YXRlIHJhbmRvbVNlbGVjdG9yOw0KICBtb3JuaW5nKCk6IHN0cmluZzsNCiAgZXZlbmluZygpOiBzdHJpbmc7DQp9DQo=', + }, +}; + + + +## Related + +- [Module Resolution](./module-resolution.html.md) +- [Data Urls](./data-urls.html.md) +- [Assets](./assets.html.md) +- [Custom Settings](../advanced/custom-settings.html.md) +- [Configuration Object](../configuration/configuration-object.html.md) \ No newline at end of file diff --git a/docs/features/intellisense/index.html b/docs/features/intellisense/index.html new file mode 100644 index 0000000..83147f2 --- /dev/null +++ b/docs/features/intellisense/index.html @@ -0,0 +1,56 @@ +IntelliSense | LiveCodes

    IntelliSense

    + +

    The code editor provides a rich experience with intellisense and autocompletion. Many of the features required for this are based on TypeScript types that are either inferred by the editor or supplied as data definition files.

    +

    This not only works when the editor language is TypeScript, but also works with others like JavaScript and JSX.

    +

    Example:

    +

    LiveCodes Autocomplete

    +

    Types for imported npm packages​

    +

    LiveCodes will try to automatically find type definitions for npm modules imported in the editor.

    +

    These are examples for automatically loading React types with autocomplete and hover info:

    +

    LiveCodes Intellisense

    +

    LiveCodes Intellisense

    +

    TypeScript TwoSlash​

    +

    The code editor supports TypeScript TwoSlash. This can be very useful for debugging, sharing and teaching TypeScript.

    +

    This is supported in JavaScript, TypeScript, JSX and TSX. This also includes Babel, Sucrase, Solid, React Native, etc.

    +

    TypeScript TwoSlash

    +

    TwoSlash in JSX

    +

    Custom Types​

    +

    If no type definitions are found, or if you want to provide your own (e.g. for a module that is not hosted on npm), custom type definition files can be used.

    +

    In the standalone app, these can be provided in custom settings using the types property. This takes an object with the key representing the module name and the value representing the URL of the file.

    +

    Example:

    +
    Custom Settings
    {
      "types": {
        "my-module": "https://cdn.jsdelivr.net/npm/my-module@1.0.0/types/my-module.d.ts",
        "my-other-module": "https://my-website.com/my-other-module/my-other-module.d.ts"
      }
    }
    +

    For embedded playgrounds, these can be provided in the configuration object using the types property.

    +

    This can be combined with the imports property to provide importmap for runtime implementation of your custom modules.

    +

    This is an example of how to create a playground that provides the implementation of the custom module: my-module and its type definition to provide editor intellisense:

    +
    import { createPlayground } from 'livecodes';

    const config = {
      activeEditor: 'script',
      script: {
        language: 'javascript',
        content: `import { foo } from 'my-module';\n\nconsole.log(foo());`
      };
      imports: {
        'my-module': 'https://my-website.com/my-module/index.js',
      },
      types: {
        'my-module': 'https://my-website.com/my-module/my-module.d.ts',
      },
    };

    createPlayground('#container', {config});
    +

    Please note that the URLs used for types and imports properties may be full URLs or data URLs.

    +

    This can be of great use for library authors who want to provide playgrounds for documenting their libraries that are not (yet) published to npm.

    +

    Demo​

    +

    Let's assume we have this TypeScript module:

    +
    Greeter.ts
    export class Greeter {
      private morningGreetings = ['Good morning', 'Have a good day', 'How are you today?'];
      private eveningGreetings = ['Good evening', 'Good night', 'Sleep well'];

      private randomSelector(array: string[]) {
        return array[Math.floor(Math.random() * array.length)];
      }

      public morning() {
        return this.randomSelector(this.morningGreetings);
      }

      public evening() {
        return this.randomSelector(this.eveningGreetings);
      }
    }
    +

    which compiles to this JavaScript:

    +
    Greeter.js
    export class Greeter {
      constructor() {
        this.morningGreetings = ['Good morning', 'Have a good day', 'How are you today?'];
        this.eveningGreetings = ['Good evening', 'Good night', 'Sleep well'];
      }
      randomSelector(array) {
        return array[Math.floor(Math.random() * array.length)];
      }
      morning() {
        return this.randomSelector(this.morningGreetings);
      }
      evening() {
        return this.randomSelector(this.eveningGreetings);
      }
    }
    +

    and this type definition:

    +
    Greeter.d.ts
    export declare class Greeter {
      private morningGreetings;
      private eveningGreetings;
      private randomSelector;
      morning(): string;
      evening(): string;
    }
    +

    The JavaScript output (Greeter.js) and the data definition file (Greeter.d.ts) should be hosted online or converted to data URLs (see assets and data URLs).

    +

    Then, they can be used like that:

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "editor": "monaco",
        "activeEditor": "script",
        "script": {
          "language": "typescript",
          "content": "import { Greeter } from 'my-greeter';\n\nconst greeter = new Greeter();\n// now `greeter` has autocomplete\n\ndocument.body.innerText = greeter.morning();\n\n// this should show error in the editor\n// Property 'morningGreetings' is private and only accessible within class 'Greeter'\nconsole.log(greeter.morningGreetings);"
        },
        "imports": {
          "my-greeter": "data:text/javascript;charset=UTF-8;base64,ZXhwb3J0IGNsYXNzIEdyZWV0ZXIgew0KICAgIGNvbnN0cnVjdG9yKCkgew0KICAgICAgICB0aGlzLm1vcm5pbmdHcmVldGluZ3MgPSBbJ0dvb2QgbW9ybmluZycsICdIYXZlIGEgZ29vZCBkYXknLCAnSG93IGFyZSB5b3UgdG9kYXk/J107DQogICAgICAgIHRoaXMuZXZlbmluZ0dyZWV0aW5ncyA9IFsnR29vZCBldmVuaW5nJywgJ0dvb2QgbmlnaHQnLCAnU2xlZXAgd2VsbCddOw0KICAgIH0NCiAgICByYW5kb21TZWxlY3RvcihhcnJheSkgew0KICAgICAgICByZXR1cm4gYXJyYXlbTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogYXJyYXkubGVuZ3RoKV07DQogICAgfQ0KICAgIG1vcm5pbmcoKSB7DQogICAgICAgIHJldHVybiB0aGlzLnJhbmRvbVNlbGVjdG9yKHRoaXMubW9ybmluZ0dyZWV0aW5ncyk7DQogICAgfQ0KICAgIGV2ZW5pbmcoKSB7DQogICAgICAgIHJldHVybiB0aGlzLnJhbmRvbVNlbGVjdG9yKHRoaXMuZXZlbmluZ0dyZWV0aW5ncyk7DQogICAgfQ0KfQ0K"
        },
        "types": {
          "my-greeter": "data:text/typescript;charset=UTF-8;base64,ZXhwb3J0IGRlY2xhcmUgY2xhc3MgR3JlZXRlciB7DQogIHByaXZhdGUgbW9ybmluZ0dyZWV0aW5nczsNCiAgcHJpdmF0ZSBldmVuaW5nR3JlZXRpbmdzOw0KICBwcml2YXRlIHJhbmRvbVNlbGVjdG9yOw0KICBtb3JuaW5nKCk6IHN0cmluZzsNCiAgZXZlbmluZygpOiBzdHJpbmc7DQp9DQo="
        }
      }
    };
    createPlayground('#container', options);

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/keyboard-shortcuts.html.md b/docs/features/keyboard-shortcuts.html.md new file mode 100644 index 0000000..c5cef5c --- /dev/null +++ b/docs/features/keyboard-shortcuts.html.md @@ -0,0 +1,7 @@ +# Keyboard Shortcuts + +Many commands can be executed from the keyboard using keyboard shortcuts. The full list can be found in the [Keyboard Shortcuts screen](https://livecodes.io/?screen=keyboard-shortcuts), which can be accessed from the Help Menu or from the [command menu](./command-menu.html.md) by pressing Ctrl + K (or ⌘ + K on Mac) and searching for "Keyboard Shortcuts". + +The code editor shortcuts are the same as VS Code, which can be found [here](https://code.visualstudio.com/docs/getstarted/keybindings#_basic-editing). + +![Keyboard Shortcuts](../../static/img/screenshots/keyboard-shortcuts.jpg) \ No newline at end of file diff --git a/docs/features/keyboard-shortcuts/index.html b/docs/features/keyboard-shortcuts/index.html new file mode 100644 index 0000000..29a58f4 --- /dev/null +++ b/docs/features/keyboard-shortcuts/index.html @@ -0,0 +1,14 @@ +Keyboard Shortcuts | LiveCodes

    Keyboard Shortcuts

    +

    Many commands can be executed from the keyboard using keyboard shortcuts. The full list can be found in the Keyboard Shortcuts screen, which can be accessed from the Help Menu or from the command menu by pressing Ctrl + K (or ⌘ + K on Mac) and searching for "Keyboard Shortcuts".

    +

    The code editor shortcuts are the same as VS Code, which can be found here.

    +

    Keyboard Shortcuts

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/lite.html.md b/docs/features/lite.html.md new file mode 100644 index 0000000..2809369 --- /dev/null +++ b/docs/features/lite.html.md @@ -0,0 +1,31 @@ +# Lite Mode + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +In case you need to embed a playground in your web page to show case some code and expect users to mainly read through the code and to have just minor edits, it would be an overkill to load full-blown code editors with auto-complete and code formatting, specially if you want to embed more than one playground in the same page. That's why the LiveCodes playground has a lite mode. + +In lite mode, a light-weight, minimal code editor is used ([CodeJar](./editor-settings.html.md)#code-editor)). [Emmet abbreviations](./emmet.html.md) and [tools pane](./tools-pane.html.md) are not available. However, any language supported by LiveCodes can be used, with syntax highlighting. Code edits are compiled and shown in the [result page](./result.html.md) as usual. + +Demo: + + + +## Using SDK + +Set [`EmbedOptions.config.mode`](../configuration/configuration-object.html.md)#mode) to `"lite"`. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container', { config: { mode: 'lite' } }); +``` + +## Using query params + +Add the [query parameter](../configuration/query-params.html.md) `?mode=lite`. + +https://livecodes.io?mode=lite + +## Related + +- [Read-only](./read-only.html.md). \ No newline at end of file diff --git a/docs/features/lite/index.html b/docs/features/lite/index.html new file mode 100644 index 0000000..6553092 --- /dev/null +++ b/docs/features/lite/index.html @@ -0,0 +1,26 @@ +Lite Mode | LiveCodes

    Lite Mode

    + +

    In case you need to embed a playground in your web page to show case some code and expect users to mainly read through the code and to have just minor edits, it would be an overkill to load full-blown code editors with auto-complete and code formatting, specially if you want to embed more than one playground in the same page. That's why the LiveCodes playground has a lite mode.

    +

    In lite mode, a light-weight, minimal code editor is used (CodeJar). Emmet abbreviations and tools pane are not available. However, any language supported by LiveCodes can be used, with syntax highlighting. Code edits are compiled and shown in the result page as usual.

    +

    Demo:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "react",
      "config": {
        "mode": "lite"
      }
    };
    createPlayground('#container', options);

    +

    Using SDK​

    +

    Set EmbedOptions.config.mode to "lite".

    +
    import { createPlayground } from 'livecodes';

    createPlayground('#container', { config: { mode: 'lite' } });
    +

    Using query params​

    +

    Add the query parameter ?mode=lite.

    +

    https://livecodes.io?mode=lite

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/mobile.html.md b/docs/features/mobile.html.md new file mode 100644 index 0000000..9c69cf3 --- /dev/null +++ b/docs/features/mobile.html.md @@ -0,0 +1,9 @@ +# Mobile Support + +LiveCodes provides a responsive layout that adapts to different screen sizes. Don't wait to be on your desk. Try your ideas on the go! + +Projects that you create on mobile can be easily [shared](./share.html.md) or [synchronized](./sync.html.md) across devices. You can even share using QR code. + +![Responsive layout](../../static/img/screenshots/responsive.jpg) + +By default, LiveCodes uses the touch-friendly [CodeMirror 6](https://codemirror.net/) editor on mobile. This is configurable in the [editor settings](./editor-settings.html.md) and can be changed at any time. \ No newline at end of file diff --git a/docs/features/mobile/index.html b/docs/features/mobile/index.html new file mode 100644 index 0000000..84be56a --- /dev/null +++ b/docs/features/mobile/index.html @@ -0,0 +1,15 @@ +Mobile Support | LiveCodes

    Mobile Support

    +

    LiveCodes provides a responsive layout that adapts to different screen sizes. Don't wait to be on your desk. Try your ideas on the go!

    +

    Projects that you create on mobile can be easily shared or synchronized across devices. You can even share using QR code.

    +

    Responsive layout

    +

    By default, LiveCodes uses the touch-friendly CodeMirror 6 editor on mobile. This is configurable in the editor settings and can be changed at any time.

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/module-resolution.html.md b/docs/features/module-resolution.html.md new file mode 100644 index 0000000..ce3efc9 --- /dev/null +++ b/docs/features/module-resolution.html.md @@ -0,0 +1,265 @@ +# Module Resolution + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +## NPM Modules + +### Bare Module Imports + +In LiveCodes you can use node-style bare module imports for npm modules like you do in your local development. However, there are no installation or build steps required. + +e.g. consider the following code: + +```js +import { v4 } from 'uuid'; + +document.body.innerHTML = v4(); +``` + +If you run it directly in the browser, you get this error: + +``` +Uncaught TypeError: Failed to resolve module specifier "uuid". Relative references must start with either "/", "./", or "../". +``` + +However, in LiveCodes, bare module imports are transformed to full URLs that are imported from CDN (by default: [esm.sh](https://esm.sh/)) which provides ESM versions of NPM packages. + +`import { v4 } from 'uuid';`
    becomes
    +`import { v4 } from 'https://esm.sh/uuid';` + +This is made possible by using [import maps](https://github.com/WICG/import-maps). + +

    Demo:

    + + + +

     

    + +You can import from React like that: + +```js +import { useState } from 'react'; +``` + +Demo: + + + +It just works without a build step and without you having to worry about. And when you [export your project](./export.html.md) to another service (e.g. CodePen) or as HTML, the full URL imports are used, so your code continues to work. + +:::tip +It is recommended to use this method for dependencies over using [external scripts](./external-resources.html.md). The dependencies are explicitly stated in the code. And if you move to a local development environment, your bundler will take care of importing them and doing other optimizations like [tree-shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking). +::: + +### CommonJS Modules + +CommonJS module `require`s are also supported (they are converted to ESM imports). + +So this also works (although not recommended - use ESM imports instead): + +```js +const { v4 } = require('uuid'); + +document.body.innerHTML = v4(); +``` + +Exercise: + +Copy the previous code snippet and paste it in the playground below. Check the generated code in the compiled code viewer. + + + +:::info + +Script code that contains `import`, `export` or `require` gets served in a script tag with [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). + +::: + +### NPM Package Search + +NPM packages can be searched and added as script tags from the [External Resources](./external-resources.html.md) screen. + +## Deno Modules + +Modules imported from [deno.land/x](https://deno.land/x) (or any other URL ending in `.ts`, `.jsx` or `.tsx`) are automatically transpiled (ts -> js) and bundled by [bundlejs](https://bundlejs.com/) (using [esbuild](https://esbuild.github.io/)), including their relative imports. The project on LiveCodes that imports these modules does not need to be using TypeScript. + +Example: + +```js +import { uuid } from 'https://deno.land/x/uuid/mod.ts'; + +document.body.innerHTML = uuid(); +``` + +[Open in LiveCodes]() + +## JSR Modules + +Modules can be imported from [jsr.io](https://jsr.io/) using the prefix `jsr:`. The project on LiveCodes that imports these modules does not need to be using TypeScript. + +Example: + +```js +import { yassify } from 'jsr:@kwhinnery/yassify'; + +document.body.innerHTML = yassify('Hello, World!'); +``` + +[Open in LiveCodes]() + +## GitHub/GitLab/Bitbucket + +Modules can also be similarly imported from GitHub, Gitlab or Bitbucket. Also these imports are transpiled and bundled (see [Deno Modules](#deno-modules)). + +```js +import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts'; + +console.log(flatten([[1, 2], [3], [4, 5]])); // -> [1, 2, 3, 4, 5] +``` + +[Open in LiveCodes]() + +:::tip + +If you do not want the import URL to be bundled (e.g. in Deno or GitHub imports), add `#nobundle` to the end of URL. + +Example: + +```js +import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts#nobundle'; +``` + +If you want to bundle (and transpile) any import URL, prefix it with `bundle:` (see below). + +::: + +## CDN Providers + +By default, npm modules are imported from [esm.sh](https://esm.sh/). You may choose another provider by using a CDN prefix. These are examples of importing the library `uuid`: + +`uuid` → https://esm.sh/uuid ([info](https://esm.sh)) + +`esm.sh:uuid` → https://esm.sh/uuid ([info](https://esm.sh/)) + +`skypack:uuid` → https://cdn.skypack.dev/uuid ([info](https://www.skypack.dev/)) + +`jsdelivr:uuid` → https://cdn.jsdelivr.net/npm/uuid ([info](https://www.jsdelivr.com/)) + +`esm.run:uuid` → https://esm.run/uuid ([info](https://esm.run/)) + +`unpkg:uuid` → https://unpkg.com/uuid?module ([info](https://unpkg.com/)) + +`esbuild:uuid` → https://esbuild.vercel.app/uuid ([info](https://esbuild.vercel.app/)) + +`bundlejs:uuid` → https://deno.bundlejs.com/?file&q=uuid ([info](https://bundlejs.com/)) + +`bundle:uuid` → https://deno.bundlejs.com/?file&q=uuid ([info](https://bundlejs.com/)) + +`deno:uuid` → https://deno.bundlejs.com/?file&q=https://deno.land/x/uuid/mod.ts ([info](https://bundlejs.com/)) + +`npm:uuid` → https://esm.sh/uuid ([info](https://esm.sh)) + +`node:uuid` → https://esm.sh/uuid ([info](https://esm.sh)) + +`jsr:@std/uuid` → https://esm.sh/jsr/@std/uuid ([info](https://esm.sh)) + +`jspm:uuid` → https://jspm.dev/uuid ([info](https://jspm.org) - [DEPRECATED](https://jspm.org/jspm-dev-deprecation)) + +Example: + +```js +import { useState } from 'esm.sh:react'; +``` + +:::caution + +Please note that importing the same module (even for dependencies) from different CDNs may cause conflicts. + +Example: + +```js +// this will NOT work! +import React, { useState } from 'esm.sh:react'; // React from esm.sh +import { createRoot } from 'skypack:react-dom/client'; // React from skypack.dev +``` + +::: + +### Change Default CDN + +Default CDN can be changed on project-level using the [custom settings](../advanced/custom-settings.html.md) property `defaultCDN` which accepts a string representing one of the CDN aliases listed above. + +Example: This assigns [Skypack](https://www.skypack.dev/) as the default CDN for all imports of the project + +```json +{ + "defaultCDN": "skypack" +} +``` + +### Package Version + +Most CDN providers allow specifying package version using the format:
    +`{pkgName}@{version}/{path}`. + +Example: + +```js +import latest from 'lodash'; +import v3 from 'lodash@3'; + +console.log(latest.VERSION); // -> 4.17.21 +console.log(v3.VERSION); // -> 3.10.1 +``` + +## Custom Module Resolution + +Module resolution described in this page mainly depends on [import maps](https://github.com/WICG/import-maps). The generated import map is added to the [result page](./result.html.md). + +You may wish to override or customize module resolution behavior (e.g. change URL, CDN, specify version, import custom unpublished library, ...etc. ), however you cannot add another import map script because [currently multiple import maps are not yet supported](https://github.com/WICG/import-maps#multiple-import-map-support). + +LiveCodes allows you to add your custom import map by one of the following methods: + +#### Custom Settings + +In the standalone app, via the [custom settings](../advanced/custom-settings.html.md) property `imports`. + +Example: + +```json title="Custom Settings" +{ + "imports": { + "my-lib": "https://my-server.com/path/to/library.js" + } +} +``` + +#### SDK + +For embedded playgrounds, use the [SDK](../sdk/index.html.md) embed option [`config.imports`](../configuration/configuration-object.html.md)#imports). + +Example: + +```js title="index.js" +import { createPlayground } from 'livecodes'; + +const config = { + imports: { + 'my-lib': 'https://my-server.com/path/to/library.js', + }, + // other configurations ... +}; + +createPlayground('#container', { config }); +``` + +Please note that you may also provide [custom type definitions](./intellisense.html.md)#custom-types) for your custom modules for editor intellisense and better development experience. + +## Related + +- [Import](./import.html.md) +- [External Resources](./external-resources.html.md) +- [Projects](./projects.html.md) +- [Intellisense](./intellisense.html.md) \ No newline at end of file diff --git a/docs/features/module-resolution/index.html b/docs/features/module-resolution/index.html new file mode 100644 index 0000000..090a933 --- /dev/null +++ b/docs/features/module-resolution/index.html @@ -0,0 +1,105 @@ +Module Resolution | LiveCodes

    Module Resolution

    + +

    NPM Modules​

    +

    Bare Module Imports​

    +

    In LiveCodes you can use node-style bare module imports for npm modules like you do in your local development. However, there are no installation or build steps required.

    +

    e.g. consider the following code:

    +
    import { v4 } from 'uuid';

    document.body.innerHTML = v4();
    +

    If you run it directly in the browser, you get this error:

    +
    Uncaught TypeError: Failed to resolve module specifier "uuid". Relative references must start with either "/", "./", or "../".
    +

    However, in LiveCodes, bare module imports are transformed to full URLs that are imported from CDN (by default: esm.sh) which provides ESM versions of NPM packages.

    +

    import { v4 } from 'uuid';
    becomes
    +import { v4 } from 'https://esm.sh/uuid';

    +

    This is made possible by using import maps.

    +

    Demo:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "js": "import { v4 } from 'uuid';\n\ndocument.body.innerHTML = v4();"
      }
    };
    createPlayground('#container', options);

    +

     

    +

    You can import from React like that:

    +
    import { useState } from 'react';
    +

    Demo:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "react"
    };
    createPlayground('#container', options);

    +

    It just works without a build step and without you having to worry about. And when you export your project to another service (e.g. CodePen) or as HTML, the full URL imports are used, so your code continues to work.

    +
    tip

    It is recommended to use this method for dependencies over using external scripts. The dependencies are explicitly stated in the code. And if you move to a local development environment, your bundler will take care of importing them and doing other optimizations like tree-shaking.

    +

    CommonJS Modules​

    +

    CommonJS module requires are also supported (they are converted to ESM imports).

    +

    So this also works (although not recommended - use ESM imports instead):

    +
    const { v4 } = require('uuid');

    document.body.innerHTML = v4();
    +

    Exercise:

    +

    Copy the previous code snippet and paste it in the playground below. Check the generated code in the compiled code viewer.

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "activeEditor": "script",
        "compiled": "open"
      }
    };
    createPlayground('#container', options);

    +
    info

    Script code that contains import, export or require gets served in a script tag with type="module".

    + +

    NPM packages can be searched and added as script tags from the External Resources screen.

    +

    Deno Modules​

    +

    Modules imported from deno.land/x (or any other URL ending in .ts, .jsx or .tsx) are automatically transpiled (ts -> js) and bundled by bundlejs (using esbuild), including their relative imports. The project on LiveCodes that imports these modules does not need to be using TypeScript.

    +

    Example:

    +
    import { uuid } from 'https://deno.land/x/uuid/mod.ts';

    document.body.innerHTML = uuid();
    +

    Open in LiveCodes

    +

    JSR Modules​

    +

    Modules can be imported from jsr.io using the prefix jsr:. The project on LiveCodes that imports these modules does not need to be using TypeScript.

    +

    Example:

    +
    import { yassify } from 'jsr:@kwhinnery/yassify';

    document.body.innerHTML = yassify('Hello, World!');
    +

    Open in LiveCodes

    +

    GitHub/GitLab/Bitbucket​

    +

    Modules can also be similarly imported from GitHub, Gitlab or Bitbucket. Also these imports are transpiled and bundled (see Deno Modules).

    +
    import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts';

    console.log(flatten([[1, 2], [3], [4, 5]])); // -> [1, 2, 3, 4, 5]
    +

    Open in LiveCodes

    +
    tip

    If you do not want the import URL to be bundled (e.g. in Deno or GitHub imports), add #nobundle to the end of URL.

    Example:

    import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts#nobundle';

    If you want to bundle (and transpile) any import URL, prefix it with bundle: (see below).

    +

    CDN Providers​

    +

    By default, npm modules are imported from esm.sh. You may choose another provider by using a CDN prefix. These are examples of importing the library uuid:

    +

    uuid → https://esm.sh/uuid (info)

    +

    esm.sh:uuid → https://esm.sh/uuid (info)

    +

    skypack:uuid → https://cdn.skypack.dev/uuid (info)

    +

    jsdelivr:uuid → https://cdn.jsdelivr.net/npm/uuid (info)

    +

    esm.run:uuid → https://esm.run/uuid (info)

    +

    unpkg:uuid → https://unpkg.com/uuid?module (info)

    +

    esbuild:uuid → https://esbuild.vercel.app/uuid (info)

    +

    bundlejs:uuid → https://deno.bundlejs.com/?file&q=uuid (info)

    +

    bundle:uuid → https://deno.bundlejs.com/?file&q=uuid (info)

    +

    deno:uuid → https://deno.bundlejs.com/?file&q=https://deno.land/x/uuid/mod.ts (info)

    +

    npm:uuid → https://esm.sh/uuid (info)

    +

    node:uuid → https://esm.sh/uuid (info)

    +

    jsr:@std/uuid → https://esm.sh/jsr/@std/uuid (info)

    +

    jspm:uuid → https://jspm.dev/uuid (info - DEPRECATED)

    +

    Example:

    +
    import { useState } from 'esm.sh:react';
    +
    caution

    Please note that importing the same module (even for dependencies) from different CDNs may cause conflicts.

    Example:

    // this will NOT work!
    import React, { useState } from 'esm.sh:react'; // React from esm.sh
    import { createRoot } from 'skypack:react-dom/client'; // React from skypack.dev
    +

    Change Default CDN​

    +

    Default CDN can be changed on project-level using the custom settings property defaultCDN which accepts a string representing one of the CDN aliases listed above.

    +

    Example: This assigns Skypack as the default CDN for all imports of the project

    +
    {
      "defaultCDN": "skypack"
    }
    +

    Package Version​

    +

    Most CDN providers allow specifying package version using the format:
    +{pkgName}@{version}/{path}.

    +

    Example:

    +
    import latest from 'lodash';
    import v3 from 'lodash@3';

    console.log(latest.VERSION); // -> 4.17.21
    console.log(v3.VERSION); // -> 3.10.1
    +

    Custom Module Resolution​

    +

    Module resolution described in this page mainly depends on import maps. The generated import map is added to the result page.

    +

    You may wish to override or customize module resolution behavior (e.g. change URL, CDN, specify version, import custom unpublished library, ...etc. ), however you cannot add another import map script because currently multiple import maps are not yet supported.

    +

    LiveCodes allows you to add your custom import map by one of the following methods:

    +

    Custom Settings​

    +

    In the standalone app, via the custom settings property imports.

    +

    Example:

    +
    Custom Settings
    {
      "imports": {
        "my-lib": "https://my-server.com/path/to/library.js"
      }
    }
    +

    SDK​

    +

    For embedded playgrounds, use the SDK embed option config.imports.

    +

    Example:

    +
    index.js
    import { createPlayground } from 'livecodes';

    const config = {
      imports: {
        'my-lib': 'https://my-server.com/path/to/library.js',
      },
      // other configurations ...
    };

    createPlayground('#container', { config });
    +

    Please note that you may also provide custom type definitions for your custom modules for editor intellisense and better development experience.

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/permanent-url.html.md b/docs/features/permanent-url.html.md new file mode 100644 index 0000000..2e56045 --- /dev/null +++ b/docs/features/permanent-url.html.md @@ -0,0 +1,131 @@ +# Permanent URL + +Any specific version of LiveCodes app can be accessed through the permanent unique URL: + +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import CodeBlock from '@theme/CodeBlock'; +import { AppVersion } from '../../src/components/Versions.tsx'; + +export const AppVersionLink = () => { + const { siteConfig } = useDocusaurusContext(); + return ( + + https://v{siteConfig.customFields.appVersion}.livecodes.io + + ); +}; + +`{version}.livecodes.io` +(e.g. ) + +This allows [embedded playgrounds](./embeds.html.md) to use a pinned version of the LiveCodes app and its dependencies and avoid any breaking changes that may occur in later versions. + +Permanent URL is used by default in the code generated by the [embed screen UI](./embeds.html.md). +It is also available when [sharing](./share.html.md) projects from the share screen. + +The [SDK](../sdk/index.html.md) embed option [`appUrl`](../sdk/js-ts.html.md)#appurl) allows specifying the URL for the app to be used. +In addition, it is always a good practice to use a specific version of the SDK. + +Example: + +export const Code = () => { + const { siteConfig } = useDocusaurusContext(); + return ( + + {`
    \n`} +     + ); +}; + + + +## Get Permanent URL + +You can get the permanent URL for the app from the [About screen](pathname:///../?screen=about) (Help menu → About). By default, the code generated in the [Embed screen](./embeds.html.md)#app-embed-screen) uses permanent URL. +Alternatively, open the browser console of the standalone app (e.g. https://livecodes.io), and run this: + +export const GetPermanentUrl = () => { + const { siteConfig } = useDocusaurusContext(); + return ( + + {`await livecodes.exec('showVersion');\n +// output: +// App Version: ${siteConfig.customFields.appVersion} (https://github.com/live-codes/livecodes/releases/tag/v${siteConfig.customFields.appVersion}) +// SDK Version: ${siteConfig.customFields.sdkVersion} (https://www.npmjs.com/package/livecodes/v/${siteConfig.customFields.sdkVersion}) +// Git commit: 0698f9f (https://github.com/live-codes/livecodes/commit/0698f9f) +// App Permanent URL: https://v${siteConfig.customFields.appVersion}.livecodes.io/ +// SDK Permanent URL: https://cdn.jsdelivr.net/npm/livecodes@${siteConfig.customFields.sdkVersion}/livecodes.js +`} + + ); +}; + + + +:::caution + +Please note that this only applies to the LiveCodes app and its dependencies. +[NPM imports](./module-resolution.html.md) in [project code](./projects.html.md)#script-editor) that do not specify versions use the latest version. +[Package versions](./module-resolution.html.md)#package-version) can be specified in the import. +[Custom import maps](./module-resolution.html.md)#custom-module-resolution) can be set to control the module import behavior. + +Example: + +```js +import lodash from 'lodash@4.17.21'; + +console.log(lodash.VERSION); // -> 4.17.21 +``` + +It is recommended to also specify versions of [external resources](./external-resources.html.md). + +::: + +#### Full Example: + +export const FullCode = () => { + const { siteConfig } = useDocusaurusContext(); + return ( + + {`
    \n`} +     + ); +}; + + + +## Related + +- [Embedded playgrounds](./embeds.html.md) +- [Share](./share.html.md) +- [SDK](../sdk/index.html.md) +- [`exec` SDK method](../sdk/js-ts.html.md)#exec) \ No newline at end of file diff --git a/docs/features/permanent-url/index.html b/docs/features/permanent-url/index.html new file mode 100644 index 0000000..855106a --- /dev/null +++ b/docs/features/permanent-url/index.html @@ -0,0 +1,43 @@ +Permanent URL | LiveCodes

    Permanent URL

    +

    Any specific version of LiveCodes app can be accessed through the permanent unique URL:

    + + +

    {version}.livecodes.io +(e.g. https://v46.livecodes.io)

    +

    This allows embedded playgrounds to use a pinned version of the LiveCodes app and its dependencies and avoid any breaking changes that may occur in later versions.

    +

    Permanent URL is used by default in the code generated by the embed screen UI. +It is also available when sharing projects from the share screen.

    +

    The SDK embed option appUrl allows specifying the URL for the app to be used. +In addition, it is always a good practice to use a specific version of the SDK.

    +

    Example:

    + +
    index.html
    <div id="container"></div>
    <script type="module">
      // specific SDK version
      import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes@0.11.0';

      createPlayground('#container', {
        // App permanent URL
        appUrl: 'https://v46.livecodes.io',
        template: 'react',
      });
    </script>
    +

    Get Permanent URL​

    +

    You can get the permanent URL for the app from the About screen (Help menu → About). By default, the code generated in the Embed screen uses permanent URL. +Alternatively, open the browser console of the standalone app (e.g. https://livecodes.io), and run this:

    + +
    await livecodes.exec('showVersion');

    // output:
    // App Version: 46 (https://github.com/live-codes/livecodes/releases/tag/v46)
    // SDK Version: 0.11.0 (https://www.npmjs.com/package/livecodes/v/0.11.0)
    // Git commit: 0698f9f (https://github.com/live-codes/livecodes/commit/0698f9f)
    // App Permanent URL: https://v46.livecodes.io/
    // SDK Permanent URL: https://cdn.jsdelivr.net/npm/livecodes@0.11.0/livecodes.js
    +
    caution

    Please note that this only applies to the LiveCodes app and its dependencies. +NPM imports in project code that do not specify versions use the latest version. +Package versions can be specified in the import. +Custom import maps can be set to control the module import behavior.

    Example:

    import lodash from 'lodash@4.17.21';

    console.log(lodash.VERSION); // -> 4.17.21

    It is recommended to also specify versions of external resources.

    +

    Full Example:​

    + +
    index.html
    <div id="container"></div>
    <script type="module">
      // specific SDK version
      import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes@0.11.0';

      createPlayground('#container', {
        // App permanent URL
        appUrl: 'https://v46.livecodes.io',
        config: {
            script: {
                language: 'javascript',
                // project code imports package with specific version
                content: 'import lodash from "lodash@4.17.21";\nconsole.log(lodash.VERSION);',
            },
            activeEditor: 'script',
            tools: { status: 'open', active: 'console' },
        },
      });
    </script>
    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/projects.html.md b/docs/features/projects.html.md new file mode 100644 index 0000000..a624819 --- /dev/null +++ b/docs/features/projects.html.md @@ -0,0 +1,63 @@ +# Projects + +A _LiveCodes_ project is a combination of markup, styles & scripts that result in a **single web page**. Check the section about the [Result Page](./result.html.md) to have more details about how this page is constructed. + +There is no concept of file system or, for example, organizing multiple files in a directory structure of a single project. + +:::info Simple Concept +code in [markup editor](#markup-editor) + code in [style editor](#style-editor) + code in [script editor](#script-editor) + [external resources](./external-resources.html.md) => [result page](./result.html.md) +::: + +## Markup Editor + +Code added in this editor eventually represents the page markup (HTML). + +Examples for languages supported include HTML, Markdown, Pug, Haml. + +## Style Editor + +Code added in this editor eventually represents the page styles (CSS). + +Examples for languages supported include CSS, SCSS, SASS, Less, Stylus. In addition, many CSS processors are supported (e.g. Autoprefixer, postcss-preset-env, postcss-import-url, PurgeCSS, Tailwind CSS). + +## Script Editor + +Code added in this editor eventually represents the page scripts. + +These are either: + +- Languages compiled to JavaScript (e.g TypeScript, JSX, CoffeeScript) +- Languages that are interpreted by a JavaScript runtime (e.g. PHP - interpreted by [Uniter runtime](https://github.com/asmblah/uniter), Scheme - interpreted by [BiwaScheme](https://www.biwascheme.org)) +- Languages running in WASM (e.g. Python - [Pyodide](https://pyodide.org/), AssemblyScript). + +For the full list of supported languages, check the [Languages section](../languages/index.html.md). + +## Organizing Projects + +Projects can be saved to the local device browser storage from Project menu → Save / Project menu → Save as → Fork (New Project) or using the keyboard shortcut Ctrl + S. + +The list of saved projects can be accessed from Project menu → Open. + +![LiveCodes Projects](../../static/img/screenshots/saved-projects-1.jpg). + +Saved projects can be sorted by title or date (asc/desc). They can also be filtered by language and/or tags. You may, as well, search for a project by title or description. + +Project title, description and tags can be edited from Project menu → Project Info. + +Projects can be [imported](./import.html.md), [exported](./export.html.md), [synchronized](./sync.html.md), [backed up and restored](./backup-restore.html.md). + +[Assets](./assets.html.md) and [code snippets](./snippets.html.md) are stored in the browser storage and can be used across projects. + +## Related + +- [Result Page](./result.html.md) +- [Templates](./templates.html.md) +- [Code Snippets](./snippets.html.md) +- [Assets](./assets.html.md) +- [External Resources](./external-resources.html.md) +- [Import](./import.html.md) +- [Export](./export.html.md) +- [Backup/Restore](./backup-restore.html.md) +- [Sync](./sync.html.md) +- [Share](./share.html.md) +- [Broadcast](./broadcast.html.md) \ No newline at end of file diff --git a/docs/features/projects/index.html b/docs/features/projects/index.html new file mode 100644 index 0000000..7c7245e --- /dev/null +++ b/docs/features/projects/index.html @@ -0,0 +1,51 @@ +Projects | LiveCodes

    Projects

    +

    A LiveCodes project is a combination of markup, styles & scripts that result in a single web page. Check the section about the Result Page to have more details about how this page is constructed.

    +

    There is no concept of file system or, for example, organizing multiple files in a directory structure of a single project.

    +
    Simple Concept

    code in markup editor + code in style editor + code in script editor + external resources => result page

    +

    Markup Editor​

    +

    Code added in this editor eventually represents the page markup (HTML).

    +

    Examples for languages supported include HTML, Markdown, Pug, Haml.

    +

    Style Editor​

    +

    Code added in this editor eventually represents the page styles (CSS).

    +

    Examples for languages supported include CSS, SCSS, SASS, Less, Stylus. In addition, many CSS processors are supported (e.g. Autoprefixer, postcss-preset-env, postcss-import-url, PurgeCSS, Tailwind CSS).

    +

    Script Editor​

    +

    Code added in this editor eventually represents the page scripts.

    +

    These are either:

    +
      +
    • Languages compiled to JavaScript (e.g TypeScript, JSX, CoffeeScript)
      • +
    • Languages that are interpreted by a JavaScript runtime (e.g. PHP - interpreted by Uniter runtime, Scheme - interpreted by BiwaScheme)
      • +
    • Languages running in WASM (e.g. Python - Pyodide, AssemblyScript).
      • +
    +

    For the full list of supported languages, check the Languages section.

    +

    Organizing Projects​

    +

    Projects can be saved to the local device browser storage from Project menu → Save / Project menu → Save as → Fork (New Project) or using the keyboard shortcut Ctrl + S.

    +

    The list of saved projects can be accessed from Project menu → Open.

    +

    LiveCodes Projects.

    +

    Saved projects can be sorted by title or date (asc/desc). They can also be filtered by language and/or tags. You may, as well, search for a project by title or description.

    +

    Project title, description and tags can be edited from Project menu → Project Info.

    +

    Projects can be imported, exported, synchronized, backed up and restored.

    +

    Assets and code snippets are stored in the browser storage and can be used across projects.

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/read-only.html.md b/docs/features/read-only.html.md new file mode 100644 index 0000000..2c0aeae --- /dev/null +++ b/docs/features/read-only.html.md @@ -0,0 +1,34 @@ +# Read-Only + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +In case you need to embed a playground in your web page to show case some code and want users to read through the code and not allow edits, you may use the `readonly` setting. + +Code editing, [formatting](./code-format.html.md), and [console input](./console.html.md) are not available. However, any language supported by LiveCodes can be used, with syntax highlighting. Code can be [prefilled](./code-prefill.html.md), and is compiled and shown in the [result page](./result.html.md) as usual. + +By default, a light-weight, minimal [code editor](./editor-settings.html.md)#code-editor) is used. This can be changed by explicitly setting the [configuration object](../configuration/configuration-object.html.md) property [`editor`](../configuration/configuration-object.html.md)#editor) (e.g. to show hover intellisense). + +Demo: + + + +## Using SDK + +set the [configuration object](../configuration/configuration-object.html.md) property [`readonly`](../configuration/configuration-object.html.md)#readonly) to `true`. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container', { template: 'javascript', config: { readonly: true } }); +``` + +## Using query params + +add the [query parameter](../configuration/query-params.html.md) `readonly` (no need to set a value). + +https://livecodes.io?template=javascript&readonly + +## Related + +- [Code prefill](./code-prefill.html.md) +- [Lite mode](./lite.html.md) \ No newline at end of file diff --git a/docs/features/read-only/index.html b/docs/features/read-only/index.html new file mode 100644 index 0000000..665d200 --- /dev/null +++ b/docs/features/read-only/index.html @@ -0,0 +1,28 @@ +Read-Only | LiveCodes

    Read-Only

    + +

    In case you need to embed a playground in your web page to show case some code and want users to read through the code and not allow edits, you may use the readonly setting.

    +

    Code editing, formatting, and console input are not available. However, any language supported by LiveCodes can be used, with syntax highlighting. Code can be prefilled, and is compiled and shown in the result page as usual.

    +

    By default, a light-weight, minimal code editor is used. This can be changed by explicitly setting the configuration object property editor (e.g. to show hover intellisense).

    +

    Demo:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "javascript",
      "config": {
        "readonly": true
      }
    };
    createPlayground('#container', options);

    +

    Using SDK​

    +

    set the configuration object property readonly to true.

    +
    import { createPlayground } from 'livecodes';

    createPlayground('#container', { template: 'javascript', config: { readonly: true } });
    +

    Using query params​

    +

    add the query parameter readonly (no need to set a value).

    +

    https://livecodes.io?template=javascript&readonly

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/recover.html.md b/docs/features/recover.html.md new file mode 100644 index 0000000..d260bca --- /dev/null +++ b/docs/features/recover.html.md @@ -0,0 +1 @@ +# Recover Unsaved \ No newline at end of file diff --git a/docs/features/recover/index.html b/docs/features/recover/index.html new file mode 100644 index 0000000..8acddc4 --- /dev/null +++ b/docs/features/recover/index.html @@ -0,0 +1,11 @@ +Recover Unsaved | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/result.html.md b/docs/features/result.html.md new file mode 100644 index 0000000..86dcf27 --- /dev/null +++ b/docs/features/result.html.md @@ -0,0 +1,107 @@ +# Result Page + +The output of a LiveCodes project is a single HTML page. This includes the (compiled) code from editors (markup + style + script) and [external resources](./external-resources.html.md) (CSS + JS), in addition to customizations specified in [custom settings](../advanced/custom-settings.html.md). + +This page is loaded in a [sandboxed iframe](https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/) with a unique origin to enforce [security](./security.html.md). The page code is sent to the iframe in the browser (no code is sent to the server). + +## Result page structure + +This is the pseudo-code for the structure of the result page (inspired by [CodePen docs](https://blog.codepen.io/documentation/preview-template/)). + + +```html + + + + { Config.title }* + + + + { Config.head }* + + { CSS preset }** + + { External CSS }** + + { Editor CSS } + + { Language(s) run-time CSS }*** + + { Language(s) run-time JS }*** + + { Import map }**** + + + + + { Editor HTML } + + { External JS }** + + { Editor JS } + + { Spacing script (if enabled) }***** + + { Test scripts (if enabled) }****** + + + +``` + +\* See [Configuration Object](../configuration/configuration-object.html.md). + +\*\* See [External Resources](./external-resources.html.md). + +\*\*\* Although most languages are compiled and then the compiled code is used, some languages require run-time scripts or styles to run in the result page. + +\*\*\*\* See [Module Resolution](./module-resolution.html.md). + +\*\*\*\*\* See [Show Sapcings](#show-spacings). + +\*\*\*\*\*\* See [Tests](./tests.html.md). + +## Result page zoom + +The zoom button in the [tools pane](./tools-pane.html.md) below result page, allows you to toggle result page zoom (1x/0.5x/0.25x). + +![Result page zoom](../../static/img/screenshots/zoom.jpg) + +## Open in new window + +From the [tools pane](./tools-pane.html.md), the result page can be viewed in a separate window. + +![Open in new window](../../static/img/screenshots/new-window.jpg) + +:::caution + +Please note that the URL of the result page shown in the new window is a [temporary URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#parameters), for local preview. Sharing this URL will not work. + +If you need to share a project, use the [Share screen](./share.html.md). While, if you need to share the result page use the `result` [display mode](./display-modes.html.md) or the [broadcast](./broadcast.html.md) feature. + +::: + +## Show Spacings + +The spacing between elements on the result page can be measured by adding [Spacing.js](https://spacingjs.com/) to the result page. + +![Show Spacings](../../static/img/screenshots/spacing.jpg) + +1. Enable `Show Spacing` setting in the Settings menu. +2. Move your cursor to an element and press Alt on Windows, or Option on a Mac. +3. Move your cursor to another element, the measurement results will be there. + +:::note + +`Show Spacing` is only available when viewing the result page in the app. It is not added to the result page for example when [exported](./export.html.md) or [deployed](./deploy.html.md). + +::: + +## Scroll Position + +By default, the result page scroll position is maintained after reloads. + +To disable this behavior, set the [query param](../configuration/query-params.html.md) `scrollPosition` to `false`. + +Example: + + https://livecodes.io?scrollPosition=false \ No newline at end of file diff --git a/docs/features/result/index.html b/docs/features/result/index.html new file mode 100644 index 0000000..87c096a --- /dev/null +++ b/docs/features/result/index.html @@ -0,0 +1,43 @@ +Result Page | LiveCodes

    Result Page

    +

    The output of a LiveCodes project is a single HTML page. This includes the (compiled) code from editors (markup + style + script) and external resources (CSS + JS), in addition to customizations specified in custom settings.

    +

    This page is loaded in a sandboxed iframe with a unique origin to enforce security. The page code is sent to the iframe in the browser (no code is sent to the server).

    +

    Result page structure​

    +

    This is the pseudo-code for the structure of the result page (inspired by CodePen docs).

    +
    <!DOCTYPE html>
    <html { Config.htmlAttrs }*>
      <head>
        <title>{ Config.title }*</title>
        <meta name="title" content="{ Config.title }*" />
        <meta name="description" content="{ Config.description }*" />

        { Config.head }*

        { CSS preset }**

        { External CSS }**

        { Editor CSS }

        { Language(s) run-time CSS }***

        { Language(s) run-time JS }***

        { Import map }****

      </head>
      <body>

        { Editor HTML }

        { External JS }**

        { Editor JS }

        { Spacing script (if enabled) }*****

        { Test scripts (if enabled) }******

      </body>
    </html>
    +

    * See Configuration Object.

    +

    ** See External Resources.

    +

    *** Although most languages are compiled and then the compiled code is used, some languages require run-time scripts or styles to run in the result page.

    +

    **** See Module Resolution.

    +

    ***** See Show Sapcings.

    +

    ****** See Tests.

    +

    Result page zoom​

    +

    The zoom button in the tools pane below result page, allows you to toggle result page zoom (1x/0.5x/0.25x).

    +

    Result page zoom

    +

    Open in new window​

    +

    From the tools pane, the result page can be viewed in a separate window.

    +

    Open in new window

    +
    caution

    Please note that the URL of the result page shown in the new window is a temporary URL, for local preview. Sharing this URL will not work.

    If you need to share a project, use the Share screen. While, if you need to share the result page use the result display mode or the broadcast feature.

    +

    Show Spacings​

    +

    The spacing between elements on the result page can be measured by adding Spacing.js to the result page.

    +

    Show Spacings

    +
      +
    1. Enable Show Spacing setting in the Settings menu.
      2. +
    2. Move your cursor to an element and press Alt on Windows, or Option on a Mac.
      3. +
    3. Move your cursor to another element, the measurement results will be there.
      4. +
    +
    note

    Show Spacing is only available when viewing the result page in the app. It is not added to the result page for example when exported or deployed.

    +

    Scroll Position​

    +

    By default, the result page scroll position is maintained after reloads.

    +

    To disable this behavior, set the query param scrollPosition to false.

    +

    Example:

    +

    https://livecodes.io?scrollPosition=false

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/security.html.md b/docs/features/security.html.md new file mode 100644 index 0000000..ec1ccb0 --- /dev/null +++ b/docs/features/security.html.md @@ -0,0 +1,12 @@ +# Security + +import MailLink from '../../src/components/MailLink.tsx'; + +User privacy and security are taken seriously. + +- All user code, [result page](./result.html.md) and compilers run in [sandboxed iframes](https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/) with a unique origin. + +- [Embedded playgrounds](./embeds.html.md) do not have access to the parent page, or to sensitive data like user cookies and localstorage of the embedding page origin. + +If you find any security vulnerability, please report it in the [contact page](../contact.html.md) or by email to +For other non-security-related bugs, please report them in the [repo issues](https://github.com/live-codes/livecodes/issues). \ No newline at end of file diff --git a/docs/features/security/index.html b/docs/features/security/index.html new file mode 100644 index 0000000..db6eeeb --- /dev/null +++ b/docs/features/security/index.html @@ -0,0 +1,23 @@ +Security | LiveCodes

    Security

    + +

    User privacy and security are taken seriously.

    +
      +
    • +

      All user code, result page and compilers run in sandboxed iframes with a unique origin.

      +
      • +
    • +

      Embedded playgrounds do not have access to the parent page, or to sensitive data like user cookies and localstorage of the embedding page origin.

      +
      • +
    +

    If you find any security vulnerability, please report it in the contact page or by email to security@livecodes.io +For other non-security-related bugs, please report them in the repo issues.

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/self-hosting.html.md b/docs/features/self-hosting.html.md new file mode 100644 index 0000000..6409ff8 --- /dev/null +++ b/docs/features/self-hosting.html.md @@ -0,0 +1,77 @@ +# Self-Hosting + +The LiveCodes app can be self-hosted on any static file server or CDN. + +## Guide + +The built app can be obtained by **one of the following** ways: + +- Download the app from the [releases](https://github.com/live-codes/livecodes/releases), extract the folder and add it to your website. +- Fork the [GitHub repo](https://github.com/live-codes/livecodes) and clone it. You may wish to use the included setup to deploy to [GitHub Pages](https://pages.github.com/): + + ```shell + git clone https://github.com/{your-username}/livecodes + cd livecodes + npm install + npm build # build the app to "build" directory + npm run serve # locally serve to http://localhost:8080 + + # deploy + npm run deploy # build and deploy to github pages + + # for development + npm start # start local development with code watch, rebuild and live-reload + ``` + +- Fork the [GitHub repo](https://github.com/live-codes/livecodes) and use one of the hosting services that integrate with GitHub to allow automatic deploys on code push (e.g. [Cloudflare Pages](https://developers.cloudflare.com/pages/get-started), [Vercel](https://vercel.com/docs/concepts/git), [Netlify](https://docs.netlify.com/configure-builds/overview/), [Firebase](https://firebase.google.com/docs/hosting/github-integration)). When prompted, the build command is `npm run build` and the build output directory is `build`. + +## Custom Build + +By default, when building the app, it is expected to be hosted on the root of the domain/subdomain (e.g. `https://my-website.com` or `https://playground.my-website.com`). The documentation is also hosted in the `/docs/` directory (e.g. `https://my-website.com/docs`). + +If you wish to host the app in a subdirectory (e.g. `https://my-username.github.io/playground/`), the base URL of the documentation directory needs to be supplied by the environment variable `DOCS_BASE_URL` during build. + +Example: + +```shell +npx cross-env DOCS_BASE_URL="/playground/docs/" npm run build +``` + +If you do not want to build documentations and direct all links to documentations to https://livecodes.io/docs/, use the following command: + +```shell +npx cross-env DOCS_BASE_URL=null npm run build:app +``` + +## Services + +Some of the [services](../advanced/services.html.md) used by the app are not supported on [self-hosted](../features/self-hosting.html.md) deploys and are either replaced by other compatible services (e.g. the [share](../features/share.html.md) service uses [dpaste](https://dpaste.com/) for short URLs, which are [**deleted after 365 days**](https://dpaste.com/help)) or require you to provide an alternative service (e.g. [Firebase configuration](https://github.com/live-codes/livecodes/tree/develop/src/livecodes/services/firebase.ts) for authentication). + +You may wish to edit one or more of the used [services](../advanced/services.html.md) to use your own. + +:::info + +LiveCodes [sponsors](../sponsor.html.md) (Bronze sponsors and above) get access to managed custom services. + +::: + +## Example + +This is an example of a self-hosted deployment, that was deployed to [GitHub Pages](https://pages.github.com/) using the [built-in setup](#guide): + +https://live-codes.github.io/livecodes/ + +## SDK Usage + +The [SDK](../sdk/index.html.md) can still be used with the self-hosted app by providing the [`appUrl`](../sdk/js-ts.html.md)#appurl) [embed option](../sdk/js-ts.html.md)#embed-options). + +```js title="index.js" +import { createPlayground } from 'livecodes'; + +const options = { + appUrl: 'https://playground.my-website.com', + template: 'react', + // other embed options +}; +createPlayground('#container', options); +``` \ No newline at end of file diff --git a/docs/features/self-hosting/index.html b/docs/features/self-hosting/index.html new file mode 100644 index 0000000..2238025 --- /dev/null +++ b/docs/features/self-hosting/index.html @@ -0,0 +1,43 @@ +Self-Hosting | LiveCodes

    Self-Hosting

    +

    The LiveCodes app can be self-hosted on any static file server or CDN.

    +

    Guide​

    +

    The built app can be obtained by one of the following ways:

    +
      +
    • +

      Download the app from the releases, extract the folder and add it to your website.

      +
      • +
    • +

      Fork the GitHub repo and clone it. You may wish to use the included setup to deploy to GitHub Pages:

      +
      git clone https://github.com/{your-username}/livecodes
      cd livecodes
      npm install
      npm build          # build the app to "build" directory
      npm run serve      # locally serve to http://localhost:8080

      # deploy
      npm run deploy     # build and deploy to github pages

      # for development
      npm start          # start local development with code watch, rebuild and live-reload
      +
      • +
    • +

      Fork the GitHub repo and use one of the hosting services that integrate with GitHub to allow automatic deploys on code push (e.g. Cloudflare Pages, Vercel, Netlify, Firebase). When prompted, the build command is npm run build and the build output directory is build.

      +
      • +
    +

    Custom Build​

    +

    By default, when building the app, it is expected to be hosted on the root of the domain/subdomain (e.g. https://my-website.com or https://playground.my-website.com). The documentation is also hosted in the /docs/ directory (e.g. https://my-website.com/docs).

    +

    If you wish to host the app in a subdirectory (e.g. https://my-username.github.io/playground/), the base URL of the documentation directory needs to be supplied by the environment variable DOCS_BASE_URL during build.

    +

    Example:

    +
    npx cross-env DOCS_BASE_URL="/playground/docs/" npm run build
    +

    If you do not want to build documentations and direct all links to documentations to https://livecodes.io/docs/, use the following command:

    +
    npx cross-env DOCS_BASE_URL=null npm run build:app
    +

    Services​

    +

    Some of the services used by the app are not supported on self-hosted deploys and are either replaced by other compatible services (e.g. the share service uses dpaste for short URLs, which are deleted after 365 days) or require you to provide an alternative service (e.g. Firebase configuration for authentication).

    +

    You may wish to edit one or more of the used services to use your own.

    +
    info

    LiveCodes sponsors (Bronze sponsors and above) get access to managed custom services.

    +

    Example​

    +

    This is an example of a self-hosted deployment, that was deployed to GitHub Pages using the built-in setup:

    +

    https://live-codes.github.io/livecodes/

    +

    SDK Usage​

    +

    The SDK can still be used with the self-hosted app by providing the appUrl embed option.

    +
    index.js
    import { createPlayground } from 'livecodes';

    const options = {
      appUrl: 'https://playground.my-website.com',
      template: 'react',
      // other embed options
    };
    createPlayground('#container', options);
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/share.html.md b/docs/features/share.html.md new file mode 100644 index 0000000..b5fce72 --- /dev/null +++ b/docs/features/share.html.md @@ -0,0 +1,45 @@ +# Share + +It is easy to share LiveCodes projects! + +A URL is generated to load the shared project. This URL can be copied or shared to different social media. + +The share screen can be accessed from the share icon at the top right or from the Project menu → Share. + +![LiveCodes Share](../../static/img/screenshots/share-1.jpg) + +By default, the generated URL encodes the project configuration in a base-64-encoded compressed query string. This step is generated locally in the browser without sending the code to any server. However, depending on the size of the project, the URL can be very long. The length of the URL is indicated in the share screen. [Try not to use very long URLs](https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers) to ensure cross-browser compatibility. + +When requested by the user, short URLs can be generated. This requires sending the project configuration (**including source code**) to a server that saves the code and provides a short Id which can be used to retrieve the project. + +![LiveCodes Share - short URL](../../static/img/screenshots/share-2.jpg) + +:::caution + +Generating a short URL for sharing requires sending the project configuration (**including source code**) to LiveCodes share service. **It cannot then be deleted**. + +::: + +:::info Note + +The app hosted on [`https://livecodes.io`](https://livecodes.io) uses an API endpoint specifically provided to generate short URLs for LiveCodes share service. We will make every effort to keep that online and available for free use, so long as it is not abused. Please help keep it available by not abusing it and by [sponsoring the project](../sponsor.html.md). + +Short URLs generated by LiveCodes share service are **private** by default and are not listed or indexed. + +However, [**self-hosted apps**](./self-hosting.html.md) use the free service [dpaste](https://dpaste.com/) for short URLs which are [**deleted after 365 days**](https://dpaste.com/help). You may want to use a [custom service](../advanced/services.html.md) instead. LiveCodes [sponsors](../sponsor.html.md) (Bronze sponsors and above) get access to managed custom services. + +::: + +QR code can be generated for the share URL. This can then be scanned by any QR code scanner (e.g. mobile/tablet camera) to load the project on other devices without having to send the link. Please note that generating QR code also requires generating a short URL (code is sent to the share service - see above). + +![LiveCodes Share - QR code](../../static/img/screenshots/share-3.jpg) + +## Related + +- [Export](./export.html.md) +- [Import](./import.html.md) +- [Deploy](./deploy.html.md) +- [Broadcast](./broadcast.html.md) +- [Backup / Restore](./backup-restore.html.md) +- [Sync](./sync.html.md) +- [Permanent URL](./permanent-url.html.md) \ No newline at end of file diff --git a/docs/features/share/index.html b/docs/features/share/index.html new file mode 100644 index 0000000..b15f637 --- /dev/null +++ b/docs/features/share/index.html @@ -0,0 +1,32 @@ +Share | LiveCodes

    Share

    +

    It is easy to share LiveCodes projects!

    +

    A URL is generated to load the shared project. This URL can be copied or shared to different social media.

    +

    The share screen can be accessed from the share icon at the top right or from the Project menu → Share.

    +

    LiveCodes Share

    +

    By default, the generated URL encodes the project configuration in a base-64-encoded compressed query string. This step is generated locally in the browser without sending the code to any server. However, depending on the size of the project, the URL can be very long. The length of the URL is indicated in the share screen. Try not to use very long URLs to ensure cross-browser compatibility.

    +

    When requested by the user, short URLs can be generated. This requires sending the project configuration (including source code) to a server that saves the code and provides a short Id which can be used to retrieve the project.

    +

    LiveCodes Share - short URL

    +
    caution

    Generating a short URL for sharing requires sending the project configuration (including source code) to LiveCodes share service. It cannot then be deleted.

    +
    Note

    The app hosted on https://livecodes.io uses an API endpoint specifically provided to generate short URLs for LiveCodes share service. We will make every effort to keep that online and available for free use, so long as it is not abused. Please help keep it available by not abusing it and by sponsoring the project.

    Short URLs generated by LiveCodes share service are private by default and are not listed or indexed.

    However, self-hosted apps use the free service dpaste for short URLs which are deleted after 365 days. You may want to use a custom service instead. LiveCodes sponsors (Bronze sponsors and above) get access to managed custom services.

    +

    QR code can be generated for the share URL. This can then be scanned by any QR code scanner (e.g. mobile/tablet camera) to load the project on other devices without having to send the link. Please note that generating QR code also requires generating a short URL (code is sent to the share service - see above).

    +

    LiveCodes Share - QR code

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/snippets.html.md b/docs/features/snippets.html.md new file mode 100644 index 0000000..cf831ab --- /dev/null +++ b/docs/features/snippets.html.md @@ -0,0 +1,28 @@ +# Code Snippets + +LiveCodes supports saving and organizing code snippets in different languages. + +Code snippets are saved locally on user's device. However, they are supported in [sync](./sync.html.md), [backup](./backup-restore.html.md)#backup) and [restore](./backup-restore.html.md)#restore). + +Code snippets screen can be accessed from Settings menu → Code Snippets. + +![Code Snippets](../../static/img/screenshots/snippets-1.jpg) + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +Each snippet has a title, description, language and code. + +![Code Snippets](../../static/img/screenshots/snippets-add.jpg) + +After adding snippets they can be sorted (by date modified or title), filtered (by language) or searched. + +![Code Snippets](../../static/img/screenshots/snippets-list.jpg) + +Code snippets can then be copied to clipboard and pasted in projects. + +## Related + +- [Projects](./projects.html.md) +- [Assets](./assets.html.md) \ No newline at end of file diff --git a/docs/features/snippets/index.html b/docs/features/snippets/index.html new file mode 100644 index 0000000..50f8a54 --- /dev/null +++ b/docs/features/snippets/index.html @@ -0,0 +1,27 @@ +Code Snippets | LiveCodes

    Code Snippets

    +

    LiveCodes supports saving and organizing code snippets in different languages.

    +

    Code snippets are saved locally on user's device. However, they are supported in sync, backup and restore.

    +

    Code snippets screen can be accessed from Settings menu → Code Snippets.

    +

    Code Snippets

    + + +

    Each snippet has a title, description, language and code.

    +

    Code Snippets

    +

    After adding snippets they can be sorted (by date modified or title), filtered (by language) or searched.

    +

    Code Snippets

    +

    Code snippets can then be copied to clipboard and pasted in projects.

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/sync.html.md b/docs/features/sync.html.md new file mode 100644 index 0000000..2b24db4 --- /dev/null +++ b/docs/features/sync.html.md @@ -0,0 +1,28 @@ +# Sync + +LiveCodes local data can be synchronized to a GitHub repo. This can be used as a cloud backup, and to synchronize multiple devices. + +A GitHub account is required. The user must give access to [(Private Repos) while logging in](./github-integration.html.md). + +The Sync screen can be accessed from the Settings menu → Sync. + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +![LiveCodes Sync](../../static/img/screenshots/sync.jpg) + +Data can be synchronized to a new (**private**) or existing repo. + +The data is synchronized with the `main` branch in a directory named `livecodes-data`. + +If `Auto sync` is selected, the sync will be attempted every 5 minutes. Remote files are downloaded only when changed (e.g. sync from another device). + +`Auto sync` can be turned off and on by the switch on the Settings menu. + +The sync can be manually triggered at any time from the Sync UI. Information regarding the last sync time and repo are displayed on the UI screen. + +## Related + +- [Backup / restore](./backup-restore.html.md) +- [Export](./export.html.md) \ No newline at end of file diff --git a/docs/features/sync/index.html b/docs/features/sync/index.html new file mode 100644 index 0000000..03a5c89 --- /dev/null +++ b/docs/features/sync/index.html @@ -0,0 +1,27 @@ +Sync | LiveCodes

    Sync

    +

    LiveCodes local data can be synchronized to a GitHub repo. This can be used as a cloud backup, and to synchronize multiple devices.

    +

    A GitHub account is required. The user must give access to (Private Repos) while logging in.

    +

    The Sync screen can be accessed from the Settings menu → Sync.

    + + +

    LiveCodes Sync

    +

    Data can be synchronized to a new (private) or existing repo.

    +

    The data is synchronized with the main branch in a directory named livecodes-data.

    +

    If Auto sync is selected, the sync will be attempted every 5 minutes. Remote files are downloaded only when changed (e.g. sync from another device).

    +

    Auto sync can be turned off and on by the switch on the Settings menu.

    +

    The sync can be manually triggered at any time from the Sync UI. Information regarding the last sync time and repo are displayed on the UI screen.

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/templates.html.md b/docs/features/templates.html.md new file mode 100644 index 0000000..ed519bc --- /dev/null +++ b/docs/features/templates.html.md @@ -0,0 +1,49 @@ +# Templates + +import TemplateList from '../../src/components/TemplateList'; + +A new project can be based on any of the provided [starter templates](#starter-templates) or [user templates](#user-templates). + +A new project (from template) can be started from: + +- Project menu → New +- [Welcome Screen](./welcome.html.md) → New +- Direct URL: https://livecodes.io?new + +## Starter Templates + +A Large number of starter templates are available. They act as starting points and example usage for the [languages](../languages/index.html.md) available in LiveCodes. + +A direct link for a starter template has the following format: + +`?template={template_name}` (e.g. https://livecodes.io/?template=react) + +The list of template names are documented [here](../api/internal/type-aliases/TemplateName.md). + +### Template List + +The following list of starter templates are available: + + + +## User Templates + +Any project loaded in LiveCodes can be saved as a user template, to be used later as a starting point for new projects. + +A project can be saved as a user template from Project menu → Save as → Template. + +It can then be accessed from Project menu → New ... → My Templates. + +A user template can be set as [default template](./default-template-language.html.md) to be automatically loaded when loading the app. + +User templates are scoped to the currently [logged-in user](./user-management.html.md). They can be [backed up/restored](./backup-restore.html.md) and [synced](./sync.html.md) the same as other user data. + +## Related + +- [Default Template/Language](./default-template-language.html.md) +- [Project](./projects.html.md) +- [Code Snippets](./snippets.html.md) +- [User management](./user-management.html.md) +- [Backup/Restore](./backup-restore.html.md) +- [Sync](./sync.html.md) +- [Languages](../languages/index.html.md) \ No newline at end of file diff --git a/docs/features/templates/index.html b/docs/features/templates/index.html new file mode 100644 index 0000000..6e87b90 --- /dev/null +++ b/docs/features/templates/index.html @@ -0,0 +1,43 @@ +Templates | LiveCodes

    Templates

    + +

    A new project can be based on any of the provided starter templates or user templates.

    +

    A new project (from template) can be started from:

    + +

    Starter Templates​

    +

    A Large number of starter templates are available. They act as starting points and example usage for the languages available in LiveCodes.

    +

    A direct link for a starter template has the following format:

    +

    ?template={template_name} (e.g. https://livecodes.io/?template=react)

    +

    The list of template names are documented here.

    +

    Template List​

    +

    The following list of starter templates are available:

    + +

    User Templates​

    +

    Any project loaded in LiveCodes can be saved as a user template, to be used later as a starting point for new projects.

    +

    A project can be saved as a user template from Project menu → Save as → Template.

    +

    It can then be accessed from Project menu → New ... → My Templates.

    +

    A user template can be set as default template to be automatically loaded when loading the app.

    +

    User templates are scoped to the currently logged-in user. They can be backed up/restored and synced the same as other user data.

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/tests.html.md b/docs/features/tests.html.md new file mode 100644 index 0000000..6d28fd1 --- /dev/null +++ b/docs/features/tests.html.md @@ -0,0 +1,178 @@ +# Tests + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +## Overview + +Automated tests can be added for projects. The tests are run in the context of the result web page. + +The automated tests are run by the Jest testing framework, which runs totally in the browser. In addition, other [testing libraries](#supported-testing-libraries) are also supported. + +Screenshots: + +![Livecodes Tests](/img/screenshots/tests.jpg) + +![Livecodes Tests](/img/screenshots/test-editor.jpg) + +## Use Cases + +- Automated tests increase the confidence in the code and can improve the quality of projects. +- Allows Test-driven development (TDD). +- Can be used for education and training by preparing projects with tests that are required to pass by the students' implementation (similar to freeCodeCamp). +- Can be used by wesites that offer coding challenges (similar to Codewars). + +## Demos + +Demo: (template=jest) + + + +

     

    + +Demo: (template=jest-react) + + + +## Tests Panel + +The "Tests" panel is located in the "[Tools pane](./tools-pane.html.md)" below the result page. + +In the tests panel, you can find: + +- "Run" button: To run tests (keyboard shortcut: Ctrl/Cmd + Alt + t). +- "Watch" button toggle: To watch the project and re-run tests automatically when code changes. +- "Reset" button: Resets test results. +- "Edit" button: Opens a code editor to edit tests (not in embeds). +- Test results. + +:::info Note + +Please note that the tests panel are hidden by default in [embedded playgrounds](./embeds.html.md) unless the [project has tests](../configuration/configuration-object.html.md)#tests). In such case, the panel is added to the [tools pane](./tools-pane.html.md). However, the test editor is not shown. + +The [SDK](../sdk/index.html.md) can control the visibility of the different tools in the tools pane (see [`tools`](../configuration/configuration-object.html.md)#tools) property of the [configuration object](../configuration/configuration-object.html.md)). + +The tests panel and the test editor are always shown in the [full standalone app](../getting-started.html.md)#standalone-app). + +::: + +## Supported Languages + +The testing code can be written using JavaScript, TypeScript, JSX or TSX. +However, since the tests run against the result web page, they can test projects that use any language/framework. + +This is [a demo](https://livecodes.io/?x=id/xyi6usem2sf&tests) for running tests against a Ruby project. + + + +Languages may have test modules. This is [an example](https://livecodes.io/?x=id/665ar3bpqka&console=full) of running [Python doctest](https://docs.python.org/3/library/doctest.html) tests: + + + + +## Importing Code + +Functions, objects or values can be exported from the `script` code like a regular ES module. +These can then be imported in the test code for usage. This is only available for code in the `script` editor. The testing code also have access to global objects like `window`. + +Example: + +```js +// in the script editor +export default function greet() { + return 'Hello, World!'; +} + +export const add = (x, y) => x + y; + +window.multiply = (x, y) => x * y; +``` + +```js +// in the test editor +import greet, { add } from './script'; // relative import without extension + +describe('test imported', () => { + test('greet', () => { + expect(greet()).toBe('Hello, World!'); + }); + + test('add', () => { + expect(add(1, 2)).toBe(3); + }); +}); + +describe('test global', () => { + test('multiply', () => { + expect(window.multiply(2, 3)).toBe(6); + }); +}); +``` + +## Supported Jest features + +- [Jest globals](https://jestjs.io/docs/api): `expect`, `test`, `xtest`, `it`, `fit`, `xit`, `describe`, `fdescribe`, `xdescribe`, `beforeAll`, `afterAll`, `beforeEach`, `afterEach` +- Jest function mocks: `jest.fn`, `jest.mocked`, `jest.replaceProperty`, `jest.spyOn` + +These can be directly used in the test editor, without the need for any imports. +Autocomplete is available in Monaco editor for Jest API. + +## Supported testing libraries + +In addition to Jest, you may wish to use other supported testing libraries. These have to be explicitly imported to the testing code. + +### Testing library + +Simple and complete testing utilities that encourage good testing practices. + +- DOM Testing Library + +```js +import { + getByLabelText, + getByText, + getByTestId, + queryByTestId, + waitFor, +} from '@testing-library/dom'; +``` + +- React Testing Library + +```js +import { render, fireEvent, waitFor, screen } from '@testing-library/react'; +``` + +- jest-dom + +```js +import '@testing-library/jest-dom'; +``` + +- user-event + +```js +import userEvent from '@testing-library/user-event'; +``` + +### Chai + +Jest assertions can be used in the tests. However, if you prefer Chai, it can be easily used. +Autocomplete is also available in Monaco editor for Chai API. + +```js +import { assert } from 'chai'; +``` + +## Examples + +Usage examples are provided in the starter templates (Jest Starter and Jest/React Starter). + +:::caution + +The test code is added to the result page and runs in its context. Please note that script errors (e.g. import or syntax errors) may prevent the tests from loading. + +::: + +## SDK + +The [SDK](../sdk/index.html.md) allows [running tests](../sdk/js-ts.html.md)#runtests) and collecting results. \ No newline at end of file diff --git a/docs/features/tests/index.html b/docs/features/tests/index.html new file mode 100644 index 0000000..a620f4f --- /dev/null +++ b/docs/features/tests/index.html @@ -0,0 +1,99 @@ +Tests | LiveCodes

    Tests

    + +

    Overview​

    +

    Automated tests can be added for projects. The tests are run in the context of the result web page.

    +

    The automated tests are run by the Jest testing framework, which runs totally in the browser. In addition, other testing libraries are also supported.

    +

    Screenshots:

    +

    Livecodes Tests

    +

    Livecodes Tests

    +

    Use Cases​

    +
      +
    • Automated tests increase the confidence in the code and can improve the quality of projects.
      • +
    • Allows Test-driven development (TDD).
      • +
    • Can be used for education and training by preparing projects with tests that are required to pass by the students' implementation (similar to freeCodeCamp).
      • +
    • Can be used by wesites that offer coding challenges (similar to Codewars).
      • +
    +

    Demos​

    +

    Demo: (template=jest)

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "jest",
      "params": {
        "tests": "open"
      }
    };
    createPlayground('#container', options);

    +

     

    +

    Demo: (template=jest-react)

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "jest-react",
      "params": {
        "tests": "open"
      }
    };
    createPlayground('#container', options);

    +

    Tests Panel​

    +

    The "Tests" panel is located in the "Tools pane" below the result page.

    +

    In the tests panel, you can find:

    +
      +
    • "Run" button: To run tests (keyboard shortcut: Ctrl/Cmd + Alt + t).
      • +
    • "Watch" button toggle: To watch the project and re-run tests automatically when code changes.
      • +
    • "Reset" button: Resets test results.
      • +
    • "Edit" button: Opens a code editor to edit tests (not in embeds).
      • +
    • Test results.
      • +
    +
    Note

    Please note that the tests panel are hidden by default in embedded playgrounds unless the project has tests. In such case, the panel is added to the tools pane. However, the test editor is not shown.

    The SDK can control the visibility of the different tools in the tools pane (see tools property of the configuration object).

    The tests panel and the test editor are always shown in the full standalone app.

    +

    Supported Languages​

    +

    The testing code can be written using JavaScript, TypeScript, JSX or TSX. +However, since the tests run against the result web page, they can test projects that use any language/framework.

    +

    This is a demo for running tests against a Ruby project.

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "import": "id/xyi6usem2sf",
      "params": {
        "tests": "open"
      }
    };
    createPlayground('#container', options);

    +

    Languages may have test modules. This is an example of running Python doctest tests:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "import": "id/665ar3bpqka",
      "params": {
        "console": "full"
      }
    };
    createPlayground('#container', options);

    +

    Importing Code​

    +

    Functions, objects or values can be exported from the script code like a regular ES module. +These can then be imported in the test code for usage. This is only available for code in the script editor. The testing code also have access to global objects like window.

    +

    Example:

    +
    // in the script editor
    export default function greet() {
      return 'Hello, World!';
    }

    export const add = (x, y) => x + y;

    window.multiply = (x, y) => x * y;
    +
    // in the test editor
    import greet, { add } from './script'; // relative import without extension

    describe('test imported', () => {
      test('greet', () => {
        expect(greet()).toBe('Hello, World!');
      });

      test('add', () => {
        expect(add(1, 2)).toBe(3);
      });
    });

    describe('test global', () => {
      test('multiply', () => {
        expect(window.multiply(2, 3)).toBe(6);
      });
    });
    +

    Supported Jest features​

    +
      +
    • Jest globals: expect, test, xtest, it, fit, xit, describe, fdescribe, xdescribe, beforeAll, afterAll, beforeEach, afterEach
      • +
    • Jest function mocks: jest.fn, jest.mocked, jest.replaceProperty, jest.spyOn
      • +
    +

    These can be directly used in the test editor, without the need for any imports. +Autocomplete is available in Monaco editor for Jest API.

    +

    Supported testing libraries​

    +

    In addition to Jest, you may wish to use other supported testing libraries. These have to be explicitly imported to the testing code.

    +

    Testing library​

    +

    Simple and complete testing utilities that encourage good testing practices.

    + +
    import {
      getByLabelText,
      getByText,
      getByTestId,
      queryByTestId,
      waitFor,
    } from '@testing-library/dom';
    + +
    import { render, fireEvent, waitFor, screen } from '@testing-library/react';
    + +
    import '@testing-library/jest-dom';
    + +
    import userEvent from '@testing-library/user-event';
    +

    Chai​

    +

    Jest assertions can be used in the tests. However, if you prefer Chai, it can be easily used. +Autocomplete is also available in Monaco editor for Chai API.

    +
    import { assert } from 'chai';
    +

    Examples​

    +

    Usage examples are provided in the starter templates (Jest Starter and Jest/React Starter).

    +
    caution

    The test code is added to the result page and runs in its context. Please note that script errors (e.g. import or syntax errors) may prevent the tests from loading.

    +

    SDK​

    +

    The SDK allows running tests and collecting results.

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/themes.html.md b/docs/features/themes.html.md new file mode 100644 index 0000000..8ff72d1 --- /dev/null +++ b/docs/features/themes.html.md @@ -0,0 +1,53 @@ +# Themes + +import ThemeDemo from '../../src/components/ThemeDemo.tsx'; + +LiveCodes comes with dark and light themes. In addition, a theme color can be set to change the app color. + +## Theme + +Dark/Light theme can be set in: + +- UI, either: + + - Dark/Light theme switch in toolbar + - Settings menu → Dark theme switch + +- [Query params](../configuration/query-params.html.md): `?theme=dark` or `?theme=light`. + e.g. https://livecodes.io/?theme=light + +- [Configuration object](../configuration/configuration-object.html.md): [`theme`](../configuration/configuration-object.html.md)#theme) property. + +![LiveCodes dark theme](../../static/img/screenshots/themes-1.jpg) + +
    LiveCodes dark theme
    + +![LiveCodes light theme](../../static/img/screenshots/themes-2.jpg) + +
    LiveCodes light theme
    + +## Theme Color + +Similarly, a theme color can be set in: + +- UI: Settings menu → Color + +- [Query params](../configuration/query-params.html.md): `?themeColor={color}`. + e.g. https://livecodes.io/?themeColor=lightblue + +- [Configuration object](../configuration/configuration-object.html.md): [`themeColor`](../configuration/configuration-object.html.md)#themecolor) property. + +![LiveCodes alternate theme color](../../static/img/screenshots/themes-3.jpg) + +
    Change theme color from UI
    + +![LiveCodes custom theme color](../../static/img/screenshots/themes-4.jpg) + +
    Custom theme color
    + +## Demo + + + +:::info Note +Please note that editor themes can be set in the [editor settings](./editor-settings.html.md) or using the [`editorTheme`](../configuration/configuration-object.html.md)#editortheme) configuration option. \ No newline at end of file diff --git a/docs/features/themes/index.html b/docs/features/themes/index.html new file mode 100644 index 0000000..78e5441 --- /dev/null +++ b/docs/features/themes/index.html @@ -0,0 +1,56 @@ +Themes | LiveCodes

    Themes

    + +

    LiveCodes comes with dark and light themes. In addition, a theme color can be set to change the app color.

    +

    Theme​

    +

    Dark/Light theme can be set in:

    + +

    LiveCodes dark theme

    +
    LiveCodes dark theme
    +

    LiveCodes light theme

    +
    LiveCodes light theme
    +

    Theme Color​

    +

    Similarly, a theme color can be set in:

    + +

    LiveCodes alternate theme color

    +
    Change theme color from UI
    +

    LiveCodes custom theme color

    +
    Custom theme color
    +

    Demo​

    +

    Theme:

    Theme Color: "lightblue"

    +
    Note

    Please note that editor themes can be set in the editor settings or using the editorTheme configuration option.

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/tools-pane.html.md b/docs/features/tools-pane.html.md new file mode 100644 index 0000000..823a4bd --- /dev/null +++ b/docs/features/tools-pane.html.md @@ -0,0 +1,34 @@ +# Tools Pane + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The resizeable tools pane (below the result page) provides an area for developer tools. This currently includes: + +- [Console](./console.html.md) +- [Compiled code viewer](./compiled-code.html.md) +- [Tests](./tests.html.md) +- Open result page in new window (not in embeds) +- [Broadcast](broadcast.html.md) status (not in embeds) +- Loading spinner that appears when the result page is loading + +The pane can be resized by dragging the bar. Clicking a tool button toggles opening/closing the pane. Double-click toggles maximize/close. + +It can be configured to have any of the following states: + +- `closed` (default) +- `open` +- `full` +- `none` + +e.g. https://livecodes.io/?console=open&js=console.log('hello')
    +opens the console and sets JavaScript code. + +Demo: (console=open) + + + +

     

    + +Demo: (console=full) + + \ No newline at end of file diff --git a/docs/features/tools-pane/index.html b/docs/features/tools-pane/index.html new file mode 100644 index 0000000..458c372 --- /dev/null +++ b/docs/features/tools-pane/index.html @@ -0,0 +1,36 @@ +Tools Pane | LiveCodes

    Tools Pane

    + +

    The resizeable tools pane (below the result page) provides an area for developer tools. This currently includes:

    + +

    The pane can be resized by dragging the bar. Clicking a tool button toggles opening/closing the pane. Double-click toggles maximize/close.

    +

    It can be configured to have any of the following states:

    +
      +
    • closed (default)
      • +
    • open
      • +
    • full
      • +
    • none
      • +
    +

    e.g. https://livecodes.io/?console=open&js=console.log('hello')
    +opens the console and sets JavaScript code.

    +

    Demo: (console=open)

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "console": "open",
        "js": "console.log('hello')"
      }
    };
    createPlayground('#container', options);

    +

     

    +

    Demo: (console=full)

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "console": "full",
        "js": "console.log('hello')"
      }
    };
    createPlayground('#container', options);

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/user-management.html.md b/docs/features/user-management.html.md new file mode 100644 index 0000000..7449987 --- /dev/null +++ b/docs/features/user-management.html.md @@ -0,0 +1,37 @@ +# User Management + +Generally, LiveCodes can be used anonymously without any accounts. This includes creating/saving [projects](./projects.html.md) and [importing](./import.html.md) code from GitHub gists or public repos. + +However, some features do require login with a GitHub account and giving [specific permissions](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/scopes-for-oauth-apps#available-scopes) to make use of GitHub services (e.g. [import](./import.html.md) from private repos, [export](./export.html.md) to gist, [deploy](./deploy.html.md), [assets](./assets.html.md) and [sync](./sync.html.md)). + +Please see the section about [GitHub Integration](./github-integration.html.md) for permissions required and how to change them. + +:::caution cookies + +User authentication is handled using [Firebase Authentication](https://firebase.google.com/products/auth) which **may use cookies**. By logging in, you agree that cookies may be stored on your device. + +::: + +:::info note + +GitHub user permissions for LiveCodes app are set the first time the user logs in. Any subsequent login will use the first permissions, even if they are set differently. + +Please see the section about [GitHub Integration](./github-integration.html.md)#setting-permissions) for how to change/revoke permissions . + +::: + +## User Data + +User data includes [saved projects](./projects.html.md), [code snippets](./snippets.html.md), [assets](./assets.html.md) and [user settings](./user-settings.html.md). This data is saved in the browser linked to the logged in user account. When a user first logs in, data that was previously saved anonymously is linked to that user account. + +If the user logs off, the data is cleared from the app, but is kept in the browser storage. This allows another user to use the same device without the data leaking. When the user, logs in again, the previously stored data (under that account) is reloaded to the app. + +## Login/Logout + +Login/Logout links are accessible at the top right corner of the app. + +:::info note + +All user management features, including ability to login/logout, access to user data, and [GitHub services](./github-integration.html.md) that require account, are not available in [embedded playgrounds](./embeds.html.md). + +::: \ No newline at end of file diff --git a/docs/features/user-management/index.html b/docs/features/user-management/index.html new file mode 100644 index 0000000..ba47d63 --- /dev/null +++ b/docs/features/user-management/index.html @@ -0,0 +1,22 @@ +User Management | LiveCodes

    User Management

    +

    Generally, LiveCodes can be used anonymously without any accounts. This includes creating/saving projects and importing code from GitHub gists or public repos.

    +

    However, some features do require login with a GitHub account and giving specific permissions to make use of GitHub services (e.g. import from private repos, export to gist, deploy, assets and sync).

    +

    Please see the section about GitHub Integration for permissions required and how to change them.

    +
    cookies

    User authentication is handled using Firebase Authentication which may use cookies. By logging in, you agree that cookies may be stored on your device.

    +
    note

    GitHub user permissions for LiveCodes app are set the first time the user logs in. Any subsequent login will use the first permissions, even if they are set differently.

    Please see the section about GitHub Integration for how to change/revoke permissions .

    +

    User Data​

    +

    User data includes saved projects, code snippets, assets and user settings. This data is saved in the browser linked to the logged in user account. When a user first logs in, data that was previously saved anonymously is linked to that user account.

    +

    If the user logs off, the data is cleared from the app, but is kept in the browser storage. This allows another user to use the same device without the data leaking. When the user, logs in again, the previously stored data (under that account) is reloaded to the app.

    +

    Login/Logout​

    +

    Login/Logout links are accessible at the top right corner of the app.

    +
    note

    All user management features, including ability to login/logout, access to user data, and GitHub services that require account, are not available in embedded playgrounds.

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/user-settings.html.md b/docs/features/user-settings.html.md new file mode 100644 index 0000000..226a4bd --- /dev/null +++ b/docs/features/user-settings.html.md @@ -0,0 +1,30 @@ +# User Settings + +A user can select various settings that are stored locally in the browser and are subsequently used. + +User settings can be configured in Settings menu. These include settings like: + +- Auto-update +- Auto-save +- Delay (before auto-update and auto-save) +- [Format on-save](./code-format.html.md)#format-on-save) +- [Theme](./themes.html.md) (light/dark) +- [Theme color](./themes.html.md)#theme-color) +- [Recover unsaved projects](./recover.html.md) +- [Show spacing](./result.html.md)#show-spacings) +- Layout (responsive/vertical/horizontal) +- [Sync](./sync.html.md) +- Show [welcome screen](./welcome.html.md) +- [App language](./i18n.html.md) + +The settings selected in the [`Editor Settings`](./editor-settings.html.md) screen are also saved locally as user settings. + +User settings are scoped to the currently [logged-in user](./user-management.html.md). They can be [backed up/restored](./backup-restore.html.md) and [synced](./sync.html.md) the same as other user data ([projects](./projects.html.md), [user templates](./templates.html.md)#user-templates), [assets](./assets.html.md), [code snippets](./snippets.html.md)). + +## Related + +- [User management](./user-management.html.md) +- [Project](./projects.html.md) +- [Templates](./templates.html.md) +- [Backup/Restore](./backup-restore.html.md) +- [Sync](./sync.html.md) \ No newline at end of file diff --git a/docs/features/user-settings/index.html b/docs/features/user-settings/index.html new file mode 100644 index 0000000..5c8362e --- /dev/null +++ b/docs/features/user-settings/index.html @@ -0,0 +1,37 @@ +User Settings | LiveCodes

    User Settings

    +

    A user can select various settings that are stored locally in the browser and are subsequently used.

    +

    User settings can be configured in Settings menu. These include settings like:

    + +

    The settings selected in the Editor Settings screen are also saved locally as user settings.

    +

    User settings are scoped to the currently logged-in user. They can be backed up/restored and synced the same as other user data (projects, user templates, assets, code snippets).

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/features/welcome.html.md b/docs/features/welcome.html.md new file mode 100644 index 0000000..e611893 --- /dev/null +++ b/docs/features/welcome.html.md @@ -0,0 +1 @@ +# Welcome Screen \ No newline at end of file diff --git a/docs/features/welcome/index.html b/docs/features/welcome/index.html new file mode 100644 index 0000000..ecac70b --- /dev/null +++ b/docs/features/welcome/index.html @@ -0,0 +1,11 @@ +Welcome Screen | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/getting-started.html.md b/docs/getting-started.html.md new file mode 100644 index 0000000..dee2b1b --- /dev/null +++ b/docs/getting-started.html.md @@ -0,0 +1,144 @@ +# Getting Started + +import LiveCodes from '../src/components/LiveCodes.tsx'; + +There are multiple options: + +## Standalone App + +The easiest way to get started with LiveCodes is to just use the app (https://livecodes.io). + +It is packed with [features](./features/index.html.md) and offers various ways to [import code](./features/import.html.md). + +## Embedded Playgrounds + +LiveCodes playgrounds can be easily [embedded](./features/embeds.html.md) into any web page. This can be achieved using: + +### App Embed Screen + +The [standalone app](#standalone-app) allows you to embed any project from the [embed screen](./features/embeds.html.md). The UI allows setting embed options and shows a preview of the embedded playground. +Copy the generated code snippet (at the bottom of the screen) and add it to the web page that you want to embed the playground in. + +### SDK + +LiveCodes [SDK](./sdk/index.html.md) is available as [npm package](https://www.npmjs.com/package/livecodes) to allow easy embedding and communication with playgrounds. + +#### Option 1: Using a bundler + +Install from npm. + +```bash npm2yarn +npm install livecodes +``` + +then you can use it like that: + +```js title="index.js" +import { createPlayground } from 'livecodes'; + +createPlayground('#container', { + template: 'react', + // other embed options +}); +``` + +#### Option 2: Load from CDN + +ESM: + +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import CodeBlock from '@theme/CodeBlock'; + +export const ESMCode = () => { + const { siteConfig } = useDocusaurusContext(); + return ( + + {`
    \n`} +     + ); +}; + + + +UMD: + +export const UMDCode = () => { + const { siteConfig } = useDocusaurusContext(); + return ( + + {`
    \n\n +`} +     + ); +}; + + + +#### Add your own content + +You may use any of the methods to [prefill the playground](./features/code-prefill.html.md) with your own code. + +Example: + +```js title="index.js" +import { createPlayground } from 'livecodes'; + +const config = { + markup: { + language: 'markdown', + content: '# Hello LiveCodes!', + }, + style: { + language: 'css', + content: 'body { color: blue; }', + }, + script: { + language: 'javascript', + content: 'console.log("hello from JavaScript!");', + }, + activeEditor: 'script', +}; + +createPlayground('#container', { config, params: { console: 'open' } }); +``` + +export const config = { + markup: { + language: 'markdown', + content: '# Hello LiveCodes!', + }, + style: { + language: 'css', + content: 'body { color: blue; }', + }, + script: { + language: 'javascript', + content: 'console.log("hello from JavaScript!");', + }, + activeEditor: 'script', +}; + +Live demo: +(this is an interactive playground - try editing the code!) + + + +Please refer to the section on [Embedded Playgrounds](./features/embeds.html.md) for more details. + +## Self-Hosting + +LiveCodes can be hosted on any static file server or CDN. + +The easiest way is to download the app from [releases](https://github.com/live-codes/livecodes/releases), extract the folder and add it to your website. + +Please check the section on [self-hosting](./features/self-hosting.html.md) for other methods of self-hosting, including the built-in setup to deploy to GitHub pages and how to use the SDK with the self-hosted app. \ No newline at end of file diff --git a/docs/getting-started/index.html b/docs/getting-started/index.html new file mode 100644 index 0000000..4c8d5f4 --- /dev/null +++ b/docs/getting-started/index.html @@ -0,0 +1,49 @@ +Getting Started | LiveCodes

    Getting Started

    + +

    There are multiple options:

    +

    Standalone App​

    +

    The easiest way to get started with LiveCodes is to just use the app (https://livecodes.io).

    +

    It is packed with features and offers various ways to import code.

    +

    Embedded Playgrounds​

    +

    LiveCodes playgrounds can be easily embedded into any web page. This can be achieved using:

    +

    App Embed Screen​

    +

    The standalone app allows you to embed any project from the embed screen. The UI allows setting embed options and shows a preview of the embedded playground. +Copy the generated code snippet (at the bottom of the screen) and add it to the web page that you want to embed the playground in.

    +

    SDK​

    +

    LiveCodes SDK is available as npm package to allow easy embedding and communication with playgrounds.

    +

    Option 1: Using a bundler​

    +

    Install from npm.

    +
    npm install livecodes
    +

    then you can use it like that:

    +
    index.js
    import { createPlayground } from 'livecodes';

    createPlayground('#container', {
      template: 'react',
      // other embed options
    });
    +

    Option 2: Load from CDN​

    +

    ESM:

    + + +
    index.html
    <div id="container"></div>
    <script type="module">
      import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes@0.11.0';

      createPlayground('#container', {
        template: 'react',
        // other embed options
      });
    </script>
    +

    UMD:

    + +
    index.html
    <div id="container"></div>
    <script src="https://cdn.jsdelivr.net/npm/livecodes@0.11.0/livecodes.umd.js"></script>
    <script>
      // the UMD version provides the global object `livecodes`
     livecodes.createPlayground('#container', {
        template: 'react',
        // other embed options
     });
    </script>
    +

    Add your own content​

    +

    You may use any of the methods to prefill the playground with your own code.

    +

    Example:

    +
    index.js
    import { createPlayground } from 'livecodes';

    const config = {
      markup: {
        language: 'markdown',
        content: '# Hello LiveCodes!',
      },
      style: {
        language: 'css',
        content: 'body { color: blue; }',
      },
      script: {
        language: 'javascript',
        content: 'console.log("hello from JavaScript!");',
      },
      activeEditor: 'script',
    };

    createPlayground('#container', { config, params: { console: 'open' } });
    + +

    Live demo: +(this is an interactive playground - try editing the code!)

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "markdown",
          "content": "# Hello LiveCodes!"
        },
        "style": {
          "language": "css",
          "content": "body { color: blue; }"
        },
        "script": {
          "language": "javascript",
          "content": "console.log(\"hello from JavaScript!\");"
        },
        "activeEditor": "script"
      },
      "params": {
        "console": "open"
      }
    };
    createPlayground('#container', options);

    +

    Please refer to the section on Embedded Playgrounds for more details.

    +

    Self-Hosting​

    +

    LiveCodes can be hosted on any static file server or CDN.

    +

    The easiest way is to download the app from releases, extract the folder and add it to your website.

    +

    Please check the section on self-hosting for other methods of self-hosting, including the built-in setup to deploy to GitHub pages and how to use the SDK with the self-hosted app.

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/gh-action.html.md b/docs/gh-action.html.md new file mode 100644 index 0000000..3c24d20 --- /dev/null +++ b/docs/gh-action.html.md @@ -0,0 +1,11 @@ +# GitHub Action ⚡ + +The [Preview in LiveCodes](https://github.com/live-codes/preview-in-livecodes) GitHub Action generates preview links to playgrounds for code changes in pull requests and posts them as pull request comments. + +Once added to a repo, it runs when a pull request is created or updated. The new code is optionally built. The action posts in a pull request comment links to playgrounds that can use the new code. + +**Screenshot:** + +![Screenshot of the action](../static/img/screenshots/preview-in-livecodes-gh-action.png) + +For usage and more information, see the [action docs](https://github.com/live-codes/preview-in-livecodes) on GitHub. Also check the [example repo](https://github.com/hatemhosny/preview-in-livecodes-demo) for a working demo. \ No newline at end of file diff --git a/docs/gh-action/index.html b/docs/gh-action/index.html new file mode 100644 index 0000000..2b92ffc --- /dev/null +++ b/docs/gh-action/index.html @@ -0,0 +1,16 @@ +GitHub Action ⚡ | LiveCodes

    GitHub Action ⚡

    +

    The Preview in LiveCodes GitHub Action generates preview links to playgrounds for code changes in pull requests and posts them as pull request comments.

    +

    Once added to a repo, it runs when a pull request is created or updated. The new code is optionally built. The action posts in a pull request comment links to playgrounds that can use the new code.

    +

    Screenshot:

    +

    Screenshot of the action

    +

    For usage and more information, see the action docs on GitHub. Also check the example repo for a working demo.

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/img/add-frame.svg b/docs/img/add-frame.svg new file mode 100644 index 0000000..0eaf7c4 --- /dev/null +++ b/docs/img/add-frame.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/docs/img/arrow.svg b/docs/img/arrow.svg new file mode 100644 index 0000000..44a51f3 --- /dev/null +++ b/docs/img/arrow.svg @@ -0,0 +1,21 @@ + + + diff --git a/docs/img/clients.svg b/docs/img/clients.svg new file mode 100644 index 0000000..e161c87 --- /dev/null +++ b/docs/img/clients.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/docs/img/code.svg b/docs/img/code.svg new file mode 100644 index 0000000..0570406 --- /dev/null +++ b/docs/img/code.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/docs/img/credits/browserstack.svg b/docs/img/credits/browserstack.svg new file mode 100644 index 0000000..ef43c71 --- /dev/null +++ b/docs/img/credits/browserstack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/credits/bundlejs.jpg b/docs/img/credits/bundlejs.jpg new file mode 100644 index 0000000..3d30cee Binary files /dev/null and b/docs/img/credits/bundlejs.jpg differ diff --git a/docs/img/credits/bundlejs.svg b/docs/img/credits/bundlejs.svg new file mode 100644 index 0000000..f3519d1 --- /dev/null +++ b/docs/img/credits/bundlejs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/credits/bundlewatch.svg b/docs/img/credits/bundlewatch.svg new file mode 100644 index 0000000..4792795 --- /dev/null +++ b/docs/img/credits/bundlewatch.svg @@ -0,0 +1 @@ +Asset 1 \ No newline at end of file diff --git a/docs/img/credits/cloudflare-pages.svg b/docs/img/credits/cloudflare-pages.svg new file mode 100644 index 0000000..28ef0e2 --- /dev/null +++ b/docs/img/credits/cloudflare-pages.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/credits/codacy.svg b/docs/img/credits/codacy.svg new file mode 100644 index 0000000..6fbf961 --- /dev/null +++ b/docs/img/credits/codacy.svg @@ -0,0 +1 @@ +codacy-logo \ No newline at end of file diff --git a/docs/img/credits/codeium.svg b/docs/img/credits/codeium.svg new file mode 100644 index 0000000..4d4dc9f --- /dev/null +++ b/docs/img/credits/codeium.svg @@ -0,0 +1,21 @@ + + + + + + + + + \ No newline at end of file diff --git a/docs/img/credits/dpaste.png b/docs/img/credits/dpaste.png new file mode 100644 index 0000000..598cb81 Binary files /dev/null and b/docs/img/credits/dpaste.png differ diff --git a/docs/img/credits/esm.sh.png b/docs/img/credits/esm.sh.png new file mode 100644 index 0000000..8285054 Binary files /dev/null and b/docs/img/credits/esm.sh.png differ diff --git a/docs/img/credits/github.png b/docs/img/credits/github.png new file mode 100644 index 0000000..f4a6f8b Binary files /dev/null and b/docs/img/credits/github.png differ diff --git a/docs/img/credits/jsdelivr.svg b/docs/img/credits/jsdelivr.svg new file mode 100644 index 0000000..e54baf2 --- /dev/null +++ b/docs/img/credits/jsdelivr.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + diff --git a/docs/img/credits/jspm.png b/docs/img/credits/jspm.png new file mode 100644 index 0000000..3596547 Binary files /dev/null and b/docs/img/credits/jspm.png differ diff --git a/docs/img/credits/kapa-ai.jpg b/docs/img/credits/kapa-ai.jpg new file mode 100644 index 0000000..4827c5d Binary files /dev/null and b/docs/img/credits/kapa-ai.jpg differ diff --git a/docs/img/credits/lokalise.png b/docs/img/credits/lokalise.png new file mode 100644 index 0000000..25fe3a0 Binary files /dev/null and b/docs/img/credits/lokalise.png differ diff --git a/docs/img/credits/netlify.svg b/docs/img/credits/netlify.svg new file mode 100644 index 0000000..59d23e0 --- /dev/null +++ b/docs/img/credits/netlify.svg @@ -0,0 +1,134 @@ + + diff --git a/docs/img/credits/skypack.svg b/docs/img/credits/skypack.svg new file mode 100644 index 0000000..77bdc80 --- /dev/null +++ b/docs/img/credits/skypack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/credits/sonarcloud.svg b/docs/img/credits/sonarcloud.svg new file mode 100644 index 0000000..bec6000 --- /dev/null +++ b/docs/img/credits/sonarcloud.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/docs/img/credits/unpkg.png b/docs/img/credits/unpkg.png new file mode 100644 index 0000000..37477f2 Binary files /dev/null and b/docs/img/credits/unpkg.png differ diff --git a/docs/img/data-privacy.svg b/docs/img/data-privacy.svg new file mode 100644 index 0000000..c596ef7 --- /dev/null +++ b/docs/img/data-privacy.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/docs/img/docs.svg b/docs/img/docs.svg new file mode 100644 index 0000000..c33e69a --- /dev/null +++ b/docs/img/docs.svg @@ -0,0 +1,24 @@ + + + + diff --git a/docs/img/docusaurus.png b/docs/img/docusaurus.png new file mode 100644 index 0000000..f458149 Binary files /dev/null and b/docs/img/docusaurus.png differ diff --git a/docs/img/favicon.ico b/docs/img/favicon.ico new file mode 100644 index 0000000..a76ab4f Binary files /dev/null and b/docs/img/favicon.ico differ diff --git a/docs/img/feather.svg b/docs/img/feather.svg new file mode 100644 index 0000000..ffa9ada --- /dev/null +++ b/docs/img/feather.svg @@ -0,0 +1 @@ + diff --git a/docs/img/integrations.svg b/docs/img/integrations.svg new file mode 100644 index 0000000..3627ec8 --- /dev/null +++ b/docs/img/integrations.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/img/light-bulb.svg b/docs/img/light-bulb.svg new file mode 100644 index 0000000..d119798 --- /dev/null +++ b/docs/img/light-bulb.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/docs/img/livecodes-logo.svg b/docs/img/livecodes-logo.svg new file mode 100644 index 0000000..0ca27dc --- /dev/null +++ b/docs/img/livecodes-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/logo.svg b/docs/img/logo.svg new file mode 100644 index 0000000..9db6d0d --- /dev/null +++ b/docs/img/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/img/magic-wand.svg b/docs/img/magic-wand.svg new file mode 100644 index 0000000..3021d48 --- /dev/null +++ b/docs/img/magic-wand.svg @@ -0,0 +1 @@ + diff --git a/docs/img/oss.svg b/docs/img/oss.svg new file mode 100644 index 0000000..6121110 --- /dev/null +++ b/docs/img/oss.svg @@ -0,0 +1,7 @@ + + + + + ® + diff --git a/docs/img/pen.svg b/docs/img/pen.svg new file mode 100644 index 0000000..24242f7 --- /dev/null +++ b/docs/img/pen.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/docs/img/responsive.svg b/docs/img/responsive.svg new file mode 100644 index 0000000..ccca37c --- /dev/null +++ b/docs/img/responsive.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/img/screenshots/SCSS-Autoprefixer.jpg b/docs/img/screenshots/SCSS-Autoprefixer.jpg new file mode 100644 index 0000000..6c187fe Binary files /dev/null and b/docs/img/screenshots/SCSS-Autoprefixer.jpg differ diff --git a/docs/img/screenshots/add-snippet.png b/docs/img/screenshots/add-snippet.png new file mode 100644 index 0000000..127d31f Binary files /dev/null and b/docs/img/screenshots/add-snippet.png differ diff --git a/docs/img/screenshots/ai-1.jpg b/docs/img/screenshots/ai-1.jpg new file mode 100644 index 0000000..26eca56 Binary files /dev/null and b/docs/img/screenshots/ai-1.jpg differ diff --git a/docs/img/screenshots/assets-1.jpg b/docs/img/screenshots/assets-1.jpg new file mode 100644 index 0000000..88d6989 Binary files /dev/null and b/docs/img/screenshots/assets-1.jpg differ diff --git a/docs/img/screenshots/assets-2.jpg b/docs/img/screenshots/assets-2.jpg new file mode 100644 index 0000000..d6e90ba Binary files /dev/null and b/docs/img/screenshots/assets-2.jpg differ diff --git a/docs/img/screenshots/assets.jpg b/docs/img/screenshots/assets.jpg new file mode 100644 index 0000000..286bbed Binary files /dev/null and b/docs/img/screenshots/assets.jpg differ diff --git a/docs/img/screenshots/assets.png b/docs/img/screenshots/assets.png new file mode 100644 index 0000000..a41f9ea Binary files /dev/null and b/docs/img/screenshots/assets.png differ diff --git a/docs/img/screenshots/autocomplete.jpg b/docs/img/screenshots/autocomplete.jpg new file mode 100644 index 0000000..51dc9e8 Binary files /dev/null and b/docs/img/screenshots/autocomplete.jpg differ diff --git a/docs/img/screenshots/autocomplete.png b/docs/img/screenshots/autocomplete.png new file mode 100644 index 0000000..c95c6c9 Binary files /dev/null and b/docs/img/screenshots/autocomplete.png differ diff --git a/docs/img/screenshots/backup-restore-1.jpg b/docs/img/screenshots/backup-restore-1.jpg new file mode 100644 index 0000000..ed2ea9f Binary files /dev/null and b/docs/img/screenshots/backup-restore-1.jpg differ diff --git a/docs/img/screenshots/backup-restore-2.jpg b/docs/img/screenshots/backup-restore-2.jpg new file mode 100644 index 0000000..e4d0fec Binary files /dev/null and b/docs/img/screenshots/backup-restore-2.jpg differ diff --git a/docs/img/screenshots/backup-restore.png b/docs/img/screenshots/backup-restore.png new file mode 100644 index 0000000..390979b Binary files /dev/null and b/docs/img/screenshots/backup-restore.png differ diff --git a/docs/img/screenshots/backup.jpg b/docs/img/screenshots/backup.jpg new file mode 100644 index 0000000..bd414c7 Binary files /dev/null and b/docs/img/screenshots/backup.jpg differ diff --git a/docs/img/screenshots/broadcast-1.jpg b/docs/img/screenshots/broadcast-1.jpg new file mode 100644 index 0000000..a81bb37 Binary files /dev/null and b/docs/img/screenshots/broadcast-1.jpg differ diff --git a/docs/img/screenshots/broadcast-2.jpg b/docs/img/screenshots/broadcast-2.jpg new file mode 100644 index 0000000..a326fe0 Binary files /dev/null and b/docs/img/screenshots/broadcast-2.jpg differ diff --git a/docs/img/screenshots/broadcast-3.jpg b/docs/img/screenshots/broadcast-3.jpg new file mode 100644 index 0000000..96aecca Binary files /dev/null and b/docs/img/screenshots/broadcast-3.jpg differ diff --git a/docs/img/screenshots/broadcast-4.jpg b/docs/img/screenshots/broadcast-4.jpg new file mode 100644 index 0000000..1efb0b9 Binary files /dev/null and b/docs/img/screenshots/broadcast-4.jpg differ diff --git a/docs/img/screenshots/broadcast-5.jpg b/docs/img/screenshots/broadcast-5.jpg new file mode 100644 index 0000000..18bf694 Binary files /dev/null and b/docs/img/screenshots/broadcast-5.jpg differ diff --git a/docs/img/screenshots/broadcast.jpg b/docs/img/screenshots/broadcast.jpg new file mode 100644 index 0000000..829000c Binary files /dev/null and b/docs/img/screenshots/broadcast.jpg differ diff --git a/docs/img/screenshots/broadcasting-code.jpg b/docs/img/screenshots/broadcasting-code.jpg new file mode 100644 index 0000000..308baa2 Binary files /dev/null and b/docs/img/screenshots/broadcasting-code.jpg differ diff --git a/docs/img/screenshots/broadcasting-result.jpg b/docs/img/screenshots/broadcasting-result.jpg new file mode 100644 index 0000000..382c772 Binary files /dev/null and b/docs/img/screenshots/broadcasting-result.jpg differ diff --git a/docs/img/screenshots/broadcasting.jpg b/docs/img/screenshots/broadcasting.jpg new file mode 100644 index 0000000..db69217 Binary files /dev/null and b/docs/img/screenshots/broadcasting.jpg differ diff --git a/docs/img/screenshots/broadcasting2.jpg b/docs/img/screenshots/broadcasting2.jpg new file mode 100644 index 0000000..91895f7 Binary files /dev/null and b/docs/img/screenshots/broadcasting2.jpg differ diff --git a/docs/img/screenshots/code-to-image-1.jpg b/docs/img/screenshots/code-to-image-1.jpg new file mode 100644 index 0000000..901c99a Binary files /dev/null and b/docs/img/screenshots/code-to-image-1.jpg differ diff --git a/docs/img/screenshots/code-to-image-2.jpg b/docs/img/screenshots/code-to-image-2.jpg new file mode 100644 index 0000000..bcd0802 Binary files /dev/null and b/docs/img/screenshots/code-to-image-2.jpg differ diff --git a/docs/img/screenshots/code-to-image-3.jpg b/docs/img/screenshots/code-to-image-3.jpg new file mode 100644 index 0000000..67ed560 Binary files /dev/null and b/docs/img/screenshots/code-to-image-3.jpg differ diff --git a/docs/img/screenshots/code-to-image-4.jpg b/docs/img/screenshots/code-to-image-4.jpg new file mode 100644 index 0000000..ff9f6a4 Binary files /dev/null and b/docs/img/screenshots/code-to-image-4.jpg differ diff --git a/docs/img/screenshots/code-to-image-5.jpg b/docs/img/screenshots/code-to-image-5.jpg new file mode 100644 index 0000000..b98bff0 Binary files /dev/null and b/docs/img/screenshots/code-to-image-5.jpg differ diff --git a/docs/img/screenshots/code-to-image-6.jpg b/docs/img/screenshots/code-to-image-6.jpg new file mode 100644 index 0000000..13695fa Binary files /dev/null and b/docs/img/screenshots/code-to-image-6.jpg differ diff --git a/docs/img/screenshots/command-menu-1.jpg b/docs/img/screenshots/command-menu-1.jpg new file mode 100644 index 0000000..26bf33a Binary files /dev/null and b/docs/img/screenshots/command-menu-1.jpg differ diff --git a/docs/img/screenshots/command-menu-2.jpg b/docs/img/screenshots/command-menu-2.jpg new file mode 100644 index 0000000..c26817c Binary files /dev/null and b/docs/img/screenshots/command-menu-2.jpg differ diff --git a/docs/img/screenshots/command-menu-3.jpg b/docs/img/screenshots/command-menu-3.jpg new file mode 100644 index 0000000..ba719ed Binary files /dev/null and b/docs/img/screenshots/command-menu-3.jpg differ diff --git a/docs/img/screenshots/command-menu-4.jpg b/docs/img/screenshots/command-menu-4.jpg new file mode 100644 index 0000000..a11fcf0 Binary files /dev/null and b/docs/img/screenshots/command-menu-4.jpg differ diff --git a/docs/img/screenshots/command-menu-5.jpg b/docs/img/screenshots/command-menu-5.jpg new file mode 100644 index 0000000..42591a5 Binary files /dev/null and b/docs/img/screenshots/command-menu-5.jpg differ diff --git a/docs/img/screenshots/command-menu-6.jpg b/docs/img/screenshots/command-menu-6.jpg new file mode 100644 index 0000000..965f34c Binary files /dev/null and b/docs/img/screenshots/command-menu-6.jpg differ diff --git a/docs/img/screenshots/compiled-code-1.jpg b/docs/img/screenshots/compiled-code-1.jpg new file mode 100644 index 0000000..a9afead Binary files /dev/null and b/docs/img/screenshots/compiled-code-1.jpg differ diff --git a/docs/img/screenshots/compiled-code.jpg b/docs/img/screenshots/compiled-code.jpg new file mode 100644 index 0000000..47206bf Binary files /dev/null and b/docs/img/screenshots/compiled-code.jpg differ diff --git a/docs/img/screenshots/compiled-code.png b/docs/img/screenshots/compiled-code.png new file mode 100644 index 0000000..4786469 Binary files /dev/null and b/docs/img/screenshots/compiled-code.png differ diff --git a/docs/img/screenshots/console-1.jpg b/docs/img/screenshots/console-1.jpg new file mode 100644 index 0000000..24f674b Binary files /dev/null and b/docs/img/screenshots/console-1.jpg differ diff --git a/docs/img/screenshots/console.jpg b/docs/img/screenshots/console.jpg new file mode 100644 index 0000000..4688d3c Binary files /dev/null and b/docs/img/screenshots/console.jpg differ diff --git a/docs/img/screenshots/console.png b/docs/img/screenshots/console.png new file mode 100644 index 0000000..4c68e3e Binary files /dev/null and b/docs/img/screenshots/console.png differ diff --git a/docs/img/screenshots/css-processors.jpg b/docs/img/screenshots/css-processors.jpg new file mode 100644 index 0000000..8d5af43 Binary files /dev/null and b/docs/img/screenshots/css-processors.jpg differ diff --git a/docs/img/screenshots/css-processors.png b/docs/img/screenshots/css-processors.png new file mode 100644 index 0000000..1846393 Binary files /dev/null and b/docs/img/screenshots/css-processors.png differ diff --git a/docs/img/screenshots/dark-theme.jpg b/docs/img/screenshots/dark-theme.jpg new file mode 100644 index 0000000..6804d1c Binary files /dev/null and b/docs/img/screenshots/dark-theme.jpg differ diff --git a/docs/img/screenshots/deploy-1.jpg b/docs/img/screenshots/deploy-1.jpg new file mode 100644 index 0000000..a00c78a Binary files /dev/null and b/docs/img/screenshots/deploy-1.jpg differ diff --git a/docs/img/screenshots/deploy.jpg b/docs/img/screenshots/deploy.jpg new file mode 100644 index 0000000..c58842e Binary files /dev/null and b/docs/img/screenshots/deploy.jpg differ diff --git a/docs/img/screenshots/deploy.png b/docs/img/screenshots/deploy.png new file mode 100644 index 0000000..ba6b97d Binary files /dev/null and b/docs/img/screenshots/deploy.png differ diff --git a/docs/img/screenshots/editor-settings-1.jpg b/docs/img/screenshots/editor-settings-1.jpg new file mode 100644 index 0000000..281b6a6 Binary files /dev/null and b/docs/img/screenshots/editor-settings-1.jpg differ diff --git a/docs/img/screenshots/editor-settings-1.png b/docs/img/screenshots/editor-settings-1.png new file mode 100644 index 0000000..f248e93 Binary files /dev/null and b/docs/img/screenshots/editor-settings-1.png differ diff --git a/docs/img/screenshots/editor-settings-2.jpg b/docs/img/screenshots/editor-settings-2.jpg new file mode 100644 index 0000000..c35c7e4 Binary files /dev/null and b/docs/img/screenshots/editor-settings-2.jpg differ diff --git a/docs/img/screenshots/editor-settings-2.png b/docs/img/screenshots/editor-settings-2.png new file mode 100644 index 0000000..db3528f Binary files /dev/null and b/docs/img/screenshots/editor-settings-2.png differ diff --git a/docs/img/screenshots/editor-settings-3.jpg b/docs/img/screenshots/editor-settings-3.jpg new file mode 100644 index 0000000..5f4fd90 Binary files /dev/null and b/docs/img/screenshots/editor-settings-3.jpg differ diff --git a/docs/img/screenshots/editor-settings-3.png b/docs/img/screenshots/editor-settings-3.png new file mode 100644 index 0000000..f82495c Binary files /dev/null and b/docs/img/screenshots/editor-settings-3.png differ diff --git a/docs/img/screenshots/editor-settings-4.png b/docs/img/screenshots/editor-settings-4.png new file mode 100644 index 0000000..d88088e Binary files /dev/null and b/docs/img/screenshots/editor-settings-4.png differ diff --git a/docs/img/screenshots/editor-settings.jpg b/docs/img/screenshots/editor-settings.jpg new file mode 100644 index 0000000..b934df0 Binary files /dev/null and b/docs/img/screenshots/editor-settings.jpg differ diff --git a/docs/img/screenshots/editor-settings.png b/docs/img/screenshots/editor-settings.png new file mode 100644 index 0000000..a78117f Binary files /dev/null and b/docs/img/screenshots/editor-settings.png differ diff --git a/docs/img/screenshots/editor-settings2.jpg b/docs/img/screenshots/editor-settings2.jpg new file mode 100644 index 0000000..d421462 Binary files /dev/null and b/docs/img/screenshots/editor-settings2.jpg differ diff --git a/docs/img/screenshots/editor-settings2.png b/docs/img/screenshots/editor-settings2.png new file mode 100644 index 0000000..e7bfa16 Binary files /dev/null and b/docs/img/screenshots/editor-settings2.png differ diff --git a/docs/img/screenshots/embed-1.jpg b/docs/img/screenshots/embed-1.jpg new file mode 100644 index 0000000..99b9a1f Binary files /dev/null and b/docs/img/screenshots/embed-1.jpg differ diff --git a/docs/img/screenshots/embed-2.jpg b/docs/img/screenshots/embed-2.jpg new file mode 100644 index 0000000..fe4b86e Binary files /dev/null and b/docs/img/screenshots/embed-2.jpg differ diff --git a/docs/img/screenshots/embed-3.jpg b/docs/img/screenshots/embed-3.jpg new file mode 100644 index 0000000..f2ebf98 Binary files /dev/null and b/docs/img/screenshots/embed-3.jpg differ diff --git a/docs/img/screenshots/embed.png b/docs/img/screenshots/embed.png new file mode 100644 index 0000000..b388629 Binary files /dev/null and b/docs/img/screenshots/embed.png differ diff --git a/docs/img/screenshots/embed1.png b/docs/img/screenshots/embed1.png new file mode 100644 index 0000000..272a9ca Binary files /dev/null and b/docs/img/screenshots/embed1.png differ diff --git a/docs/img/screenshots/embed2.png b/docs/img/screenshots/embed2.png new file mode 100644 index 0000000..46baf6f Binary files /dev/null and b/docs/img/screenshots/embed2.png differ diff --git a/docs/img/screenshots/embed3.png b/docs/img/screenshots/embed3.png new file mode 100644 index 0000000..6fbda5a Binary files /dev/null and b/docs/img/screenshots/embed3.png differ diff --git a/docs/img/screenshots/export-1.jpg b/docs/img/screenshots/export-1.jpg new file mode 100644 index 0000000..98f363c Binary files /dev/null and b/docs/img/screenshots/export-1.jpg differ diff --git a/docs/img/screenshots/export-2.jpg b/docs/img/screenshots/export-2.jpg new file mode 100644 index 0000000..c00d2f6 Binary files /dev/null and b/docs/img/screenshots/export-2.jpg differ diff --git a/docs/img/screenshots/export.jpg b/docs/img/screenshots/export.jpg new file mode 100644 index 0000000..cb3795b Binary files /dev/null and b/docs/img/screenshots/export.jpg differ diff --git a/docs/img/screenshots/export.png b/docs/img/screenshots/export.png new file mode 100644 index 0000000..1894b84 Binary files /dev/null and b/docs/img/screenshots/export.png differ diff --git a/docs/img/screenshots/external-resources-search.jpg b/docs/img/screenshots/external-resources-search.jpg new file mode 100644 index 0000000..d3021bf Binary files /dev/null and b/docs/img/screenshots/external-resources-search.jpg differ diff --git a/docs/img/screenshots/external-resources.jpg b/docs/img/screenshots/external-resources.jpg new file mode 100644 index 0000000..4dbf430 Binary files /dev/null and b/docs/img/screenshots/external-resources.jpg differ diff --git a/docs/img/screenshots/features-1.jpg b/docs/img/screenshots/features-1.jpg new file mode 100644 index 0000000..167e8ba Binary files /dev/null and b/docs/img/screenshots/features-1.jpg differ diff --git a/docs/img/screenshots/features-2.jpg b/docs/img/screenshots/features-2.jpg new file mode 100644 index 0000000..5dbd702 Binary files /dev/null and b/docs/img/screenshots/features-2.jpg differ diff --git a/docs/img/screenshots/features-3.jpg b/docs/img/screenshots/features-3.jpg new file mode 100644 index 0000000..aeb4efa Binary files /dev/null and b/docs/img/screenshots/features-3.jpg differ diff --git a/docs/img/screenshots/features.jpg b/docs/img/screenshots/features.jpg new file mode 100644 index 0000000..a3b661a Binary files /dev/null and b/docs/img/screenshots/features.jpg differ diff --git a/docs/img/screenshots/focus-mode.png b/docs/img/screenshots/focus-mode.png new file mode 100644 index 0000000..15ee59f Binary files /dev/null and b/docs/img/screenshots/focus-mode.png differ diff --git a/docs/img/screenshots/format-1.jpg b/docs/img/screenshots/format-1.jpg new file mode 100644 index 0000000..4b66ba7 Binary files /dev/null and b/docs/img/screenshots/format-1.jpg differ diff --git a/docs/img/screenshots/format.jpg b/docs/img/screenshots/format.jpg new file mode 100644 index 0000000..3d9ff9c Binary files /dev/null and b/docs/img/screenshots/format.jpg differ diff --git a/docs/img/screenshots/full-mode.png b/docs/img/screenshots/full-mode.png new file mode 100644 index 0000000..cd1acbf Binary files /dev/null and b/docs/img/screenshots/full-mode.png differ diff --git a/docs/img/screenshots/i18n-1.jpg b/docs/img/screenshots/i18n-1.jpg new file mode 100644 index 0000000..0996e05 Binary files /dev/null and b/docs/img/screenshots/i18n-1.jpg differ diff --git a/docs/img/screenshots/i18n-2.jpg b/docs/img/screenshots/i18n-2.jpg new file mode 100644 index 0000000..47129c1 Binary files /dev/null and b/docs/img/screenshots/i18n-2.jpg differ diff --git a/docs/img/screenshots/i18n.png b/docs/img/screenshots/i18n.png new file mode 100644 index 0000000..b1e416d Binary files /dev/null and b/docs/img/screenshots/i18n.png differ diff --git a/docs/img/screenshots/import-1.jpg b/docs/img/screenshots/import-1.jpg new file mode 100644 index 0000000..e3abdb4 Binary files /dev/null and b/docs/img/screenshots/import-1.jpg differ diff --git a/docs/img/screenshots/import-2.jpg b/docs/img/screenshots/import-2.jpg new file mode 100644 index 0000000..26d10ba Binary files /dev/null and b/docs/img/screenshots/import-2.jpg differ diff --git a/docs/img/screenshots/import.jpg b/docs/img/screenshots/import.jpg new file mode 100644 index 0000000..882cb61 Binary files /dev/null and b/docs/img/screenshots/import.jpg differ diff --git a/docs/img/screenshots/intellisense-1.jpg b/docs/img/screenshots/intellisense-1.jpg new file mode 100644 index 0000000..af38b12 Binary files /dev/null and b/docs/img/screenshots/intellisense-1.jpg differ diff --git a/docs/img/screenshots/intellisense-2.jpg b/docs/img/screenshots/intellisense-2.jpg new file mode 100644 index 0000000..0c05b62 Binary files /dev/null and b/docs/img/screenshots/intellisense-2.jpg differ diff --git a/docs/img/screenshots/intellisense-3.jpg b/docs/img/screenshots/intellisense-3.jpg new file mode 100644 index 0000000..cf7c053 Binary files /dev/null and b/docs/img/screenshots/intellisense-3.jpg differ diff --git a/docs/img/screenshots/intellisense.png b/docs/img/screenshots/intellisense.png new file mode 100644 index 0000000..4317ec4 Binary files /dev/null and b/docs/img/screenshots/intellisense.png differ diff --git a/docs/img/screenshots/intellisense1.jpg b/docs/img/screenshots/intellisense1.jpg new file mode 100644 index 0000000..0d32871 Binary files /dev/null and b/docs/img/screenshots/intellisense1.jpg differ diff --git a/docs/img/screenshots/intellisense2.jpg b/docs/img/screenshots/intellisense2.jpg new file mode 100644 index 0000000..2acab5f Binary files /dev/null and b/docs/img/screenshots/intellisense2.jpg differ diff --git a/docs/img/screenshots/keyboard-shortcuts.jpg b/docs/img/screenshots/keyboard-shortcuts.jpg new file mode 100644 index 0000000..4e05a6b Binary files /dev/null and b/docs/img/screenshots/keyboard-shortcuts.jpg differ diff --git a/docs/img/screenshots/languages-1.jpg b/docs/img/screenshots/languages-1.jpg new file mode 100644 index 0000000..3fcbe75 Binary files /dev/null and b/docs/img/screenshots/languages-1.jpg differ diff --git a/docs/img/screenshots/languages-2.jpg b/docs/img/screenshots/languages-2.jpg new file mode 100644 index 0000000..6e4b2cf Binary files /dev/null and b/docs/img/screenshots/languages-2.jpg differ diff --git a/docs/img/screenshots/languages-3.jpg b/docs/img/screenshots/languages-3.jpg new file mode 100644 index 0000000..8f86e6a Binary files /dev/null and b/docs/img/screenshots/languages-3.jpg differ diff --git a/docs/img/screenshots/languages.jpg b/docs/img/screenshots/languages.jpg new file mode 100644 index 0000000..7693a54 Binary files /dev/null and b/docs/img/screenshots/languages.jpg differ diff --git a/docs/img/screenshots/languages.png b/docs/img/screenshots/languages.png new file mode 100644 index 0000000..5368b72 Binary files /dev/null and b/docs/img/screenshots/languages.png differ diff --git a/docs/img/screenshots/light-theme-.jpg b/docs/img/screenshots/light-theme-.jpg new file mode 100644 index 0000000..bc0f999 Binary files /dev/null and b/docs/img/screenshots/light-theme-.jpg differ diff --git a/docs/img/screenshots/light-theme.jpg b/docs/img/screenshots/light-theme.jpg new file mode 100644 index 0000000..c4747d7 Binary files /dev/null and b/docs/img/screenshots/light-theme.jpg differ diff --git a/docs/img/screenshots/light-theme.png b/docs/img/screenshots/light-theme.png new file mode 100644 index 0000000..915d6d8 Binary files /dev/null and b/docs/img/screenshots/light-theme.png differ diff --git a/docs/img/screenshots/livecodes-languages.jpg b/docs/img/screenshots/livecodes-languages.jpg new file mode 100644 index 0000000..bd6706b Binary files /dev/null and b/docs/img/screenshots/livecodes-languages.jpg differ diff --git a/docs/img/screenshots/livecodes-overview.jpg b/docs/img/screenshots/livecodes-overview.jpg new file mode 100644 index 0000000..3797f0c Binary files /dev/null and b/docs/img/screenshots/livecodes-overview.jpg differ diff --git a/docs/img/screenshots/menu.jpg b/docs/img/screenshots/menu.jpg new file mode 100644 index 0000000..ee7d74a Binary files /dev/null and b/docs/img/screenshots/menu.jpg differ diff --git a/docs/img/screenshots/mode-focus.jpg b/docs/img/screenshots/mode-focus.jpg new file mode 100644 index 0000000..2837341 Binary files /dev/null and b/docs/img/screenshots/mode-focus.jpg differ diff --git a/docs/img/screenshots/mode-full.jpg b/docs/img/screenshots/mode-full.jpg new file mode 100644 index 0000000..a707909 Binary files /dev/null and b/docs/img/screenshots/mode-full.jpg differ diff --git a/docs/img/screenshots/new-window.jpg b/docs/img/screenshots/new-window.jpg new file mode 100644 index 0000000..48f3f15 Binary files /dev/null and b/docs/img/screenshots/new-window.jpg differ diff --git a/docs/img/screenshots/preview-in-livecodes-gh-action.png b/docs/img/screenshots/preview-in-livecodes-gh-action.png new file mode 100644 index 0000000..4419dcb Binary files /dev/null and b/docs/img/screenshots/preview-in-livecodes-gh-action.png differ diff --git a/docs/img/screenshots/project-info.jpg b/docs/img/screenshots/project-info.jpg new file mode 100644 index 0000000..75fa998 Binary files /dev/null and b/docs/img/screenshots/project-info.jpg differ diff --git a/docs/img/screenshots/project-info.png b/docs/img/screenshots/project-info.png new file mode 100644 index 0000000..e812b8c Binary files /dev/null and b/docs/img/screenshots/project-info.png differ diff --git a/docs/img/screenshots/react-template.png b/docs/img/screenshots/react-template.png new file mode 100644 index 0000000..626d9d2 Binary files /dev/null and b/docs/img/screenshots/react-template.png differ diff --git a/docs/img/screenshots/resources-search.jpg b/docs/img/screenshots/resources-search.jpg new file mode 100644 index 0000000..0ad8d70 Binary files /dev/null and b/docs/img/screenshots/resources-search.jpg differ diff --git a/docs/img/screenshots/resources.jpg b/docs/img/screenshots/resources.jpg new file mode 100644 index 0000000..eb37563 Binary files /dev/null and b/docs/img/screenshots/resources.jpg differ diff --git a/docs/img/screenshots/responsive.jpg b/docs/img/screenshots/responsive.jpg new file mode 100644 index 0000000..76f1eae Binary files /dev/null and b/docs/img/screenshots/responsive.jpg differ diff --git a/docs/img/screenshots/restore-project.jpg b/docs/img/screenshots/restore-project.jpg new file mode 100644 index 0000000..94dd54e Binary files /dev/null and b/docs/img/screenshots/restore-project.jpg differ diff --git a/docs/img/screenshots/restore.jpg b/docs/img/screenshots/restore.jpg new file mode 100644 index 0000000..5a36ffa Binary files /dev/null and b/docs/img/screenshots/restore.jpg differ diff --git a/docs/img/screenshots/result-new-window.jpg b/docs/img/screenshots/result-new-window.jpg new file mode 100644 index 0000000..e8e8e7f Binary files /dev/null and b/docs/img/screenshots/result-new-window.jpg differ diff --git a/docs/img/screenshots/result-zoom.jpg b/docs/img/screenshots/result-zoom.jpg new file mode 100644 index 0000000..4288459 Binary files /dev/null and b/docs/img/screenshots/result-zoom.jpg differ diff --git a/docs/img/screenshots/saved-projects-1.jpg b/docs/img/screenshots/saved-projects-1.jpg new file mode 100644 index 0000000..2def047 Binary files /dev/null and b/docs/img/screenshots/saved-projects-1.jpg differ diff --git a/docs/img/screenshots/saved-projects.jpg b/docs/img/screenshots/saved-projects.jpg new file mode 100644 index 0000000..1c16ef3 Binary files /dev/null and b/docs/img/screenshots/saved-projects.jpg differ diff --git a/docs/img/screenshots/saved-projects.png b/docs/img/screenshots/saved-projects.png new file mode 100644 index 0000000..17a9e6f Binary files /dev/null and b/docs/img/screenshots/saved-projects.png differ diff --git a/docs/img/screenshots/settings-export.jpg b/docs/img/screenshots/settings-export.jpg new file mode 100644 index 0000000..88d6f22 Binary files /dev/null and b/docs/img/screenshots/settings-export.jpg differ diff --git a/docs/img/screenshots/share-1.jpg b/docs/img/screenshots/share-1.jpg new file mode 100644 index 0000000..bbbc23d Binary files /dev/null and b/docs/img/screenshots/share-1.jpg differ diff --git a/docs/img/screenshots/share-2.jpg b/docs/img/screenshots/share-2.jpg new file mode 100644 index 0000000..db83b8e Binary files /dev/null and b/docs/img/screenshots/share-2.jpg differ diff --git a/docs/img/screenshots/share-3.jpg b/docs/img/screenshots/share-3.jpg new file mode 100644 index 0000000..5045421 Binary files /dev/null and b/docs/img/screenshots/share-3.jpg differ diff --git a/docs/img/screenshots/share-qrcode.jpg b/docs/img/screenshots/share-qrcode.jpg new file mode 100644 index 0000000..b7819f8 Binary files /dev/null and b/docs/img/screenshots/share-qrcode.jpg differ diff --git a/docs/img/screenshots/share.jpg b/docs/img/screenshots/share.jpg new file mode 100644 index 0000000..d64cbaf Binary files /dev/null and b/docs/img/screenshots/share.jpg differ diff --git a/docs/img/screenshots/share.png b/docs/img/screenshots/share.png new file mode 100644 index 0000000..72b96ff Binary files /dev/null and b/docs/img/screenshots/share.png differ diff --git a/docs/img/screenshots/share2.jpg b/docs/img/screenshots/share2.jpg new file mode 100644 index 0000000..7b2dfe1 Binary files /dev/null and b/docs/img/screenshots/share2.jpg differ diff --git a/docs/img/screenshots/slider/assets.jpg b/docs/img/screenshots/slider/assets.jpg new file mode 100644 index 0000000..06edc33 Binary files /dev/null and b/docs/img/screenshots/slider/assets.jpg differ diff --git a/docs/img/screenshots/slider/backup-restore.png b/docs/img/screenshots/slider/backup-restore.png new file mode 100644 index 0000000..390979b Binary files /dev/null and b/docs/img/screenshots/slider/backup-restore.png differ diff --git a/docs/img/screenshots/slider/broadcast.png b/docs/img/screenshots/slider/broadcast.png new file mode 100644 index 0000000..75e397d Binary files /dev/null and b/docs/img/screenshots/slider/broadcast.png differ diff --git a/docs/img/screenshots/slider/compiled-code.jpg b/docs/img/screenshots/slider/compiled-code.jpg new file mode 100644 index 0000000..10654ed Binary files /dev/null and b/docs/img/screenshots/slider/compiled-code.jpg differ diff --git a/docs/img/screenshots/slider/console.jpg b/docs/img/screenshots/slider/console.jpg new file mode 100644 index 0000000..13c7de5 Binary files /dev/null and b/docs/img/screenshots/slider/console.jpg differ diff --git a/docs/img/screenshots/slider/css-processors.jpg b/docs/img/screenshots/slider/css-processors.jpg new file mode 100644 index 0000000..de26c06 Binary files /dev/null and b/docs/img/screenshots/slider/css-processors.jpg differ diff --git a/docs/img/screenshots/slider/deploy.jpg b/docs/img/screenshots/slider/deploy.jpg new file mode 100644 index 0000000..957a116 Binary files /dev/null and b/docs/img/screenshots/slider/deploy.jpg differ diff --git a/docs/img/screenshots/slider/editor-settings.png b/docs/img/screenshots/slider/editor-settings.png new file mode 100644 index 0000000..a78117f Binary files /dev/null and b/docs/img/screenshots/slider/editor-settings.png differ diff --git a/docs/img/screenshots/slider/editor-settings2.png b/docs/img/screenshots/slider/editor-settings2.png new file mode 100644 index 0000000..e7bfa16 Binary files /dev/null and b/docs/img/screenshots/slider/editor-settings2.png differ diff --git a/docs/img/screenshots/slider/embed.jpg b/docs/img/screenshots/slider/embed.jpg new file mode 100644 index 0000000..cea8b8d Binary files /dev/null and b/docs/img/screenshots/slider/embed.jpg differ diff --git a/docs/img/screenshots/slider/export.jpg b/docs/img/screenshots/slider/export.jpg new file mode 100644 index 0000000..a3b661a Binary files /dev/null and b/docs/img/screenshots/slider/export.jpg differ diff --git a/docs/img/screenshots/slider/external-resources.png b/docs/img/screenshots/slider/external-resources.png new file mode 100644 index 0000000..b07e770 Binary files /dev/null and b/docs/img/screenshots/slider/external-resources.png differ diff --git a/docs/img/screenshots/slider/import.png b/docs/img/screenshots/slider/import.png new file mode 100644 index 0000000..832dca0 Binary files /dev/null and b/docs/img/screenshots/slider/import.png differ diff --git a/docs/img/screenshots/slider/intellisense.jpg b/docs/img/screenshots/slider/intellisense.jpg new file mode 100644 index 0000000..22dfd45 Binary files /dev/null and b/docs/img/screenshots/slider/intellisense.jpg differ diff --git a/docs/img/screenshots/slider/languages.jpg b/docs/img/screenshots/slider/languages.jpg new file mode 100644 index 0000000..9f05f33 Binary files /dev/null and b/docs/img/screenshots/slider/languages.jpg differ diff --git a/docs/img/screenshots/slider/light-theme.jpg b/docs/img/screenshots/slider/light-theme.jpg new file mode 100644 index 0000000..1f63c45 Binary files /dev/null and b/docs/img/screenshots/slider/light-theme.jpg differ diff --git a/docs/img/screenshots/slider/project-info.png b/docs/img/screenshots/slider/project-info.png new file mode 100644 index 0000000..e812b8c Binary files /dev/null and b/docs/img/screenshots/slider/project-info.png differ diff --git a/docs/img/screenshots/slider/responsive.jpg b/docs/img/screenshots/slider/responsive.jpg new file mode 100644 index 0000000..d374d7c Binary files /dev/null and b/docs/img/screenshots/slider/responsive.jpg differ diff --git a/docs/img/screenshots/slider/saved-projects.jpg b/docs/img/screenshots/slider/saved-projects.jpg new file mode 100644 index 0000000..1c8f6ee Binary files /dev/null and b/docs/img/screenshots/slider/saved-projects.jpg differ diff --git a/docs/img/screenshots/slider/share.jpg b/docs/img/screenshots/slider/share.jpg new file mode 100644 index 0000000..1620547 Binary files /dev/null and b/docs/img/screenshots/slider/share.jpg differ diff --git a/docs/img/screenshots/slider/snippets.jpg b/docs/img/screenshots/slider/snippets.jpg new file mode 100644 index 0000000..8180d48 Binary files /dev/null and b/docs/img/screenshots/slider/snippets.jpg differ diff --git a/docs/img/screenshots/slider/sync.png b/docs/img/screenshots/slider/sync.png new file mode 100644 index 0000000..0ddaa0e Binary files /dev/null and b/docs/img/screenshots/slider/sync.png differ diff --git a/docs/img/screenshots/slider/templates1.jpg b/docs/img/screenshots/slider/templates1.jpg new file mode 100644 index 0000000..549da0a Binary files /dev/null and b/docs/img/screenshots/slider/templates1.jpg differ diff --git a/docs/img/screenshots/slider/templates2.jpg b/docs/img/screenshots/slider/templates2.jpg new file mode 100644 index 0000000..24652c9 Binary files /dev/null and b/docs/img/screenshots/slider/templates2.jpg differ diff --git a/docs/img/screenshots/slider/tests.jpg b/docs/img/screenshots/slider/tests.jpg new file mode 100644 index 0000000..11c3128 Binary files /dev/null and b/docs/img/screenshots/slider/tests.jpg differ diff --git a/docs/img/screenshots/slider/welcome.jpg b/docs/img/screenshots/slider/welcome.jpg new file mode 100644 index 0000000..cc1a88b Binary files /dev/null and b/docs/img/screenshots/slider/welcome.jpg differ diff --git a/docs/img/screenshots/snippets-1.jpg b/docs/img/screenshots/snippets-1.jpg new file mode 100644 index 0000000..23d446f Binary files /dev/null and b/docs/img/screenshots/snippets-1.jpg differ diff --git a/docs/img/screenshots/snippets-add.jpg b/docs/img/screenshots/snippets-add.jpg new file mode 100644 index 0000000..6cc8340 Binary files /dev/null and b/docs/img/screenshots/snippets-add.jpg differ diff --git a/docs/img/screenshots/snippets-list.jpg b/docs/img/screenshots/snippets-list.jpg new file mode 100644 index 0000000..c4a37ae Binary files /dev/null and b/docs/img/screenshots/snippets-list.jpg differ diff --git a/docs/img/screenshots/snippets.jpg b/docs/img/screenshots/snippets.jpg new file mode 100644 index 0000000..4e7f00f Binary files /dev/null and b/docs/img/screenshots/snippets.jpg differ diff --git a/docs/img/screenshots/snippets.png b/docs/img/screenshots/snippets.png new file mode 100644 index 0000000..c693e8c Binary files /dev/null and b/docs/img/screenshots/snippets.png differ diff --git a/docs/img/screenshots/spacing.jpg b/docs/img/screenshots/spacing.jpg new file mode 100644 index 0000000..c887eb6 Binary files /dev/null and b/docs/img/screenshots/spacing.jpg differ diff --git a/docs/img/screenshots/spacings.jpg b/docs/img/screenshots/spacings.jpg new file mode 100644 index 0000000..1346f97 Binary files /dev/null and b/docs/img/screenshots/spacings.jpg differ diff --git a/docs/img/screenshots/starter-templates-2.jpg b/docs/img/screenshots/starter-templates-2.jpg new file mode 100644 index 0000000..da273fa Binary files /dev/null and b/docs/img/screenshots/starter-templates-2.jpg differ diff --git a/docs/img/screenshots/starter-templates.jpg b/docs/img/screenshots/starter-templates.jpg new file mode 100644 index 0000000..599a70a Binary files /dev/null and b/docs/img/screenshots/starter-templates.jpg differ diff --git a/docs/img/screenshots/styles.jpg b/docs/img/screenshots/styles.jpg new file mode 100644 index 0000000..694bf26 Binary files /dev/null and b/docs/img/screenshots/styles.jpg differ diff --git a/docs/img/screenshots/sync-menu.jpg b/docs/img/screenshots/sync-menu.jpg new file mode 100644 index 0000000..d288c87 Binary files /dev/null and b/docs/img/screenshots/sync-menu.jpg differ diff --git a/docs/img/screenshots/sync.jpg b/docs/img/screenshots/sync.jpg new file mode 100644 index 0000000..e746a71 Binary files /dev/null and b/docs/img/screenshots/sync.jpg differ diff --git a/docs/img/screenshots/sync.png b/docs/img/screenshots/sync.png new file mode 100644 index 0000000..78c4bf4 Binary files /dev/null and b/docs/img/screenshots/sync.png differ diff --git a/docs/img/screenshots/sync2.png b/docs/img/screenshots/sync2.png new file mode 100644 index 0000000..0ddaa0e Binary files /dev/null and b/docs/img/screenshots/sync2.png differ diff --git a/docs/img/screenshots/tailwindcss.jpg b/docs/img/screenshots/tailwindcss.jpg new file mode 100644 index 0000000..c063400 Binary files /dev/null and b/docs/img/screenshots/tailwindcss.jpg differ diff --git a/docs/img/screenshots/templates-1.jpg b/docs/img/screenshots/templates-1.jpg new file mode 100644 index 0000000..310159d Binary files /dev/null and b/docs/img/screenshots/templates-1.jpg differ diff --git a/docs/img/screenshots/templates-2.jpg b/docs/img/screenshots/templates-2.jpg new file mode 100644 index 0000000..aa3554e Binary files /dev/null and b/docs/img/screenshots/templates-2.jpg differ diff --git a/docs/img/screenshots/templates1.png b/docs/img/screenshots/templates1.png new file mode 100644 index 0000000..a4299cf Binary files /dev/null and b/docs/img/screenshots/templates1.png differ diff --git a/docs/img/screenshots/templates2.png b/docs/img/screenshots/templates2.png new file mode 100644 index 0000000..5a91057 Binary files /dev/null and b/docs/img/screenshots/templates2.png differ diff --git a/docs/img/screenshots/test-editor.jpg b/docs/img/screenshots/test-editor.jpg new file mode 100644 index 0000000..af3b8a6 Binary files /dev/null and b/docs/img/screenshots/test-editor.jpg differ diff --git a/docs/img/screenshots/test-editor.png b/docs/img/screenshots/test-editor.png new file mode 100644 index 0000000..dac8ebd Binary files /dev/null and b/docs/img/screenshots/test-editor.png differ diff --git a/docs/img/screenshots/tests.jpg b/docs/img/screenshots/tests.jpg new file mode 100644 index 0000000..7c91f16 Binary files /dev/null and b/docs/img/screenshots/tests.jpg differ diff --git a/docs/img/screenshots/tests.png b/docs/img/screenshots/tests.png new file mode 100644 index 0000000..2d3d514 Binary files /dev/null and b/docs/img/screenshots/tests.png differ diff --git a/docs/img/screenshots/themes-1.jpg b/docs/img/screenshots/themes-1.jpg new file mode 100644 index 0000000..437b5e0 Binary files /dev/null and b/docs/img/screenshots/themes-1.jpg differ diff --git a/docs/img/screenshots/themes-2.jpg b/docs/img/screenshots/themes-2.jpg new file mode 100644 index 0000000..5f76a70 Binary files /dev/null and b/docs/img/screenshots/themes-2.jpg differ diff --git a/docs/img/screenshots/themes-3.jpg b/docs/img/screenshots/themes-3.jpg new file mode 100644 index 0000000..c7ecbdf Binary files /dev/null and b/docs/img/screenshots/themes-3.jpg differ diff --git a/docs/img/screenshots/themes-4.jpg b/docs/img/screenshots/themes-4.jpg new file mode 100644 index 0000000..26816ea Binary files /dev/null and b/docs/img/screenshots/themes-4.jpg differ diff --git a/docs/img/screenshots/themes-5.jpg b/docs/img/screenshots/themes-5.jpg new file mode 100644 index 0000000..a249df0 Binary files /dev/null and b/docs/img/screenshots/themes-5.jpg differ diff --git a/docs/img/screenshots/twoslash-jsx.jpg b/docs/img/screenshots/twoslash-jsx.jpg new file mode 100644 index 0000000..1a76793 Binary files /dev/null and b/docs/img/screenshots/twoslash-jsx.jpg differ diff --git a/docs/img/screenshots/twoslash-jsx.png b/docs/img/screenshots/twoslash-jsx.png new file mode 100644 index 0000000..822d9e9 Binary files /dev/null and b/docs/img/screenshots/twoslash-jsx.png differ diff --git a/docs/img/screenshots/twoslash.jpg b/docs/img/screenshots/twoslash.jpg new file mode 100644 index 0000000..e72f914 Binary files /dev/null and b/docs/img/screenshots/twoslash.jpg differ diff --git a/docs/img/screenshots/twoslash.png b/docs/img/screenshots/twoslash.png new file mode 100644 index 0000000..d0ef846 Binary files /dev/null and b/docs/img/screenshots/twoslash.png differ diff --git a/docs/img/screenshots/welcome-1.jpg b/docs/img/screenshots/welcome-1.jpg new file mode 100644 index 0000000..9ab45f8 Binary files /dev/null and b/docs/img/screenshots/welcome-1.jpg differ diff --git a/docs/img/screenshots/welcome.png b/docs/img/screenshots/welcome.png new file mode 100644 index 0000000..55ba90a Binary files /dev/null and b/docs/img/screenshots/welcome.png differ diff --git a/docs/img/screenshots/zoom.jpg b/docs/img/screenshots/zoom.jpg new file mode 100644 index 0000000..74b3cc0 Binary files /dev/null and b/docs/img/screenshots/zoom.jpg differ diff --git a/docs/img/star.svg b/docs/img/star.svg new file mode 100644 index 0000000..f9767e5 --- /dev/null +++ b/docs/img/star.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..bd1e0d9 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,3 @@ +LiveCodes

    LiveCodes

    A Code Playground That Just Works!

    Start Coding ⚡
    An open-source client-side playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and 90+ languages/frameworks.
    BBCode
    HTML
    Astro
    +
    Stylis
    CSS
    CSS Modules
    +
    Lua
    JS
    PostgreSQL
    Looks Good 🚀Surprise me 🎁

    Psst. This is an interactive playground!arrow-up
    Try editing the code above and see the changes reflected in the result page.

    Want a similar playground for your website?

    import { createPlayground } from "livecodes";

    createPlayground("#container", { template: "react" });
    Get Started ✈️Documentations 📖

    Code Playground That Just Works!

    • No servers to configure (or pay for!)
    • No databases to maintain (or pay for!)
    • No installs
    • No configuration files
    • No build steps
    • No subscription fees (free and open-source)
    • No account required *
    • No limits for usage (unlimited private projects)
    • 90+ languages/frameworks/processors
    • Large set of features and integrations
    • Import code from a wide variety of sources
    • Use modules from npm, deno.land/x, jsr, GitHub, and others
    • Easily embed it in your web pages
    • It runs in the browser (client-side)

    Steps:

    1. Go to livecodes.io
    ... and enjoy all the features!

    Do you want to embed it in a web page?

    Add this code to your page:

    <div id="container"></div>
    <script type="module">
    import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes@0.11.0';

    createPlayground('#container', {
      params: {
        markdown: '# Hello LiveCodes!',
        css: 'h1 {color: dodgerblue;}',
        js: 'console.log("Hello, from JS!");',
        console: 'open',
      },
    });
    </script>

    Ok, do you want to self-host it?

    1. Download a release
    2. Put it on a static file server (for free!) 1, 2, 3, 4, 5
    ... and it just works!

    * GitHub account is required only for features that use GitHub Integration.

    Feature-Rich

    Feature-Rich

    Supports 90+ languages/frameworks. TypeScript Support, npm Modules, Console, Compiled code viewer, Tests, Starter Templates, Save, Import, Export, Share, Deploy, Assets, Snippets, Backup/Restore, Sync, Broadcast and a lot more features. Features are downloaded only when used.

    Client-Side!

    Client-Side!

    LiveCodes runs in the browser, where all the processing/transpilation occurs, with no server rounds required. So, after the initial load, it becomes pretty fast. It can be hosted on any static file server or CDN. No npm installs. Just the browser!

    Integrations

    Integrations

    Rich set of integrations. Import code from GitHub files/repos/gists, Gitlab files/repos/snippets, JsBin or web pages. Export to GitHub gists, CodePen or JsFiddle. Deploy to GitHub Pages. Sync to GitHub Repo.

    Powerful Editor

    Powerful Editor

    The code editor offers auto-complete, intellisense, code format, multi-cursor editing, Emmet support, Vim and Emacs modes, editor themes, customizable editor settings and more. The powerful Monaco editor (that powers VS Code) is used on desktop, and a touch-friendly editor is used on mobile.

    AI Code Assistant

    AI Code Assistant

    Leverage the power of AI to help you write/learn code, using the free Copilot alternative. It understands the context of your code and comments to generate suggestions. It has a wide range of language support, and it works everywhere (in the standalone app, embedded playgrounds and self-hosted apps).

    Mobile-Friendly

    Mobile-Friendly

    LiveCodes offers a great mobile experience. The responsive layout allows working on devices with different screen sizes. The touch-friendly CodeMirror 6 editor is used on mobile. Don't wait to be on your desk. Try your ideas on the go! And then share or sync your work across devices. You can even share using QR code.

    Standalone App

    Standalone App

    Use the standalone app for quick prototyping, testing new ideas or learning a new framework/language. The app remembers your settings. Organize your projects and assets. Share code with friends. Deploy projects to public URLs.

    Embedded Playgrounds

    Embedded Playgrounds

    LiveCodes can be embedded in your web pages. Code can be easily prefilled. This is particularly useful for educational websites and for library documentations. It is secure and highly configurable. Intellisense is available even for custom libraries!

    Developer-Friendly

    Developer-Friendly

    It is easy to get started. LiveCodes is highly configurable (even by URL query params). The SDK facilitates embedding playgrounds and allows easy communication with them. The SDK is available for vanilla JS/TS, React, Vue and Svelte. There is also a headless mode for full control over the UI.

    Documentations

    Documentations

    Comprehensive documentations for features, configuration and SDK (including TypeScript types). Documentations are rich with code samples, live demos and screenshots. A gallery of usage examples is provided as a storybook.

    Focused on Privacy

    Focused on Privacy

    Projects are private by default. The code you write in LiveCodes never leaves your device, unless you choose to share, export or sync it. User data is stored in the browser. User code runs in a sandboxed environment. Security is taken seriously.

    Free and Open-Source

    Free and Open-Source

    LiveCodes is free, with no limits for use, no ads and no account required*.
    Do you want to self-host it for commercial use? No problem! It is MIT-licensed 🎉
    Please consider sponsoring LiveCodes ❤

    The OSI logo trademark is the trademark of Open Source Initiative.
    * GitHub account is required only for features that use GitHub Integration.

    Screenshots

    • Responsive layout

      Responsive layout

    • Lots of features

      Lots of features

    • Even more features

      Even more features

    • Starter templates for new projects

      Starter templates for new projects

    • ... many starter templates

      ... many starter templates

    • Welcome screen - for a quick start

      Welcome screen - for a quick start

    • Keep your projects organized

      Keep your projects organized

    • Add external resources

      Add external resources

    • CSS Processors

      CSS Processors

    • IntelliSense (autocomplete)

      IntelliSense (autocomplete)

    • AI Code Assistant

      AI Code Assistant

    • Console for quick inspection

      Console for quick inspection

    • View compiled code

      View compiled code

    • Import code from many sources

      Import code from many sources

    • Embed projects into your web pages

      Embed projects into your web pages

    • Share your projects with others

      Share your projects with others

    • Deploy to GitHub Pages

      Deploy to GitHub Pages

    • Broadcast real-time code changes

      Broadcast real-time code changes

    • Project info

      Project info

    • Assets manager

      Assets manager

    • Code snippets

      Code snippets

    • Run automated tests!

      Run automated tests!

    • Sync with your other devices

      Sync with your other devices

    • Backup and restore your data

      Backup and restore your data

    • Fine-tune your editor settings

      Fine-tune your editor settings

    • Emmet support and Vim/Emacs modes

      Emmet support and Vim/Emacs modes

    • Select your favorite theme/color

      Select your favorite theme/color

    • Change UI language to your preferred one

      Change UI language to your preferred one

    • Responsive layout

      Responsive layout

    Documentations 📖New Project ✨
    \ No newline at end of file diff --git a/docs/languages/art-template.html.md b/docs/languages/art-template.html.md new file mode 100644 index 0000000..7a04e7f --- /dev/null +++ b/docs/languages/art-template.html.md @@ -0,0 +1,131 @@ +# art-template + +[art-template](https://aui.github.io/art-template/) is a high performance JavaScript templating engine. + +## Usage + +There are 2 modes for rendering: + +### Pre-rendered (Default) + +The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md). + +The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs. + +Example: This provides the value of the expression `name` + +```json title="Custom Settings" +{ + "template": { + "data": { + "name": "LiveCodes" + } + } +} +``` + +[Full example below](#pre-rendered) + +### Dynamic + +To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`. + +Example: + +```json title="Custom Settings" +{ + "template": { + "prerender": false + } +} +``` + +In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime. + +This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data. + +Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that. + +Example: + +```js title="Script Editor (JS)" +window.livecodes.templateData = { name: 'LiveCodes' }; +``` + +[Full example below](#dynamic-1) + +## Language Info + +### Name + +`art-template` + +### Extensions + +`.art`, `.art-template` + +### Editor + +`markup` + +## Compiler + +The official [art-template compiler](https://www.npmjs.com/package/art-template). + +### Version + +`art-template`: v4.13.2 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `art-template` are passed as a JSON object to the [`compile`](https://aui.github.io/art-template/docs/api.html#compile-source-options) method during compile. Please check the [documentation](https://aui.github.io/art-template/docs/options.html) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +**Example:** + +```json title="Custom Settings" +{ + "art-template": { + "minimize": false + } +} +``` + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +### Pre-rendered + +export const config = { + markup: { language: 'art-template', content: 'Hello {{name}}!' }, + customSettings: { template: { data: { name: 'LiveCodes' } } }, +}; + +export const params = { compiled: 'open' }; + + + +### Dynamic + +export const config2 = { + markup: { language: 'art-template', content: 'Hello {{name}}!' }, + script: { + language: 'javascript', + content: 'window.livecodes.templateData = { name: "LiveCodes" };', + }, + customSettings: { template: { prerender: false } }, + activeEditor: 'script', +}; + + + +## Links + +- [Official website](https://aui.github.io/art-template/) +- [Documentation](https://aui.github.io/art-template/docs/) \ No newline at end of file diff --git a/docs/languages/art-template/index.html b/docs/languages/art-template/index.html new file mode 100644 index 0000000..75b83a9 --- /dev/null +++ b/docs/languages/art-template/index.html @@ -0,0 +1,62 @@ +art-template | LiveCodes

    art-template

    +

    art-template is a high performance JavaScript templating engine.

    +

    Usage​

    +

    There are 2 modes for rendering:

    +

    Pre-rendered (Default)​

    +

    The values of the expressions are evaluated and added to the template during compilation of the result page.

    +

    The values of all expressions should be supplied in advance using custom settings to the property template.data which accepts an object of key-value pairs.

    +

    Example: This provides the value of the expression name

    +
    Custom Settings
    {
      "template": {
        "data": {
          "name": "LiveCodes"
        }
      }
    }
    +

    Full example below

    +

    Dynamic​

    +

    To use this mode, the property template.prerender in custom settings should be set to false.

    +

    Example:

    +
    Custom Settings
    {
      "template": {
        "prerender": false
      }
    }
    +

    In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the result page runtime.

    +

    This can be achieved in JavaScript (or any language that compiles to it) by assigning window.livecodes.templateData to an object with the data.

    +

    Please note that template rendering occurs on page load, so the assignment must occur before that.

    +

    Example:

    +
    Script Editor (JS)
    window.livecodes.templateData = { name: 'LiveCodes' };
    +

    Full example below

    +

    Language Info​

    +

    Name​

    +

    art-template

    +

    Extensions​

    +

    .art, .art-template

    +

    Editor​

    +

    markup

    +

    Compiler​

    +

    The official art-template compiler.

    +

    Version​

    +

    art-template: v4.13.2

    +

    Code Formatting​

    +

    Using Prettier.

    +

    Custom Settings​

    +

    Custom settings added to the property art-template are passed as a JSON object to the compile method during compile. Please check the documentation for full reference.

    +

    Please note that custom settings should be valid JSON (i.e. functions are not allowed).

    +

    Example:

    +
    Custom Settings
    {
      "art-template": {
        "minimize": false
      }
    }
    +

    Example Usage​

    + +

    Pre-rendered​

    + + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "art-template",
          "content": "Hello {{name}}!"
        },
        "customSettings": {
          "template": {
            "data": {
              "name": "LiveCodes"
            }
          }
        }
      },
      "params": {
        "compiled": "open"
      }
    };
    createPlayground('#container', options);

    +

    Dynamic​

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "art-template",
          "content": "Hello {{name}}!"
        },
        "script": {
          "language": "javascript",
          "content": "window.livecodes.templateData = { name: \"LiveCodes\" };"
        },
        "customSettings": {
          "template": {
            "prerender": false
          }
        },
        "activeEditor": "script"
      }
    };
    createPlayground('#container', options);

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/asciidoc.html.md b/docs/languages/asciidoc.html.md new file mode 100644 index 0000000..672fd8a --- /dev/null +++ b/docs/languages/asciidoc.html.md @@ -0,0 +1,81 @@ +# AsciiDoc + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +[AsciiDoc](https://asciidoc.org) is a plain text markup language for writing technical content. It’s packed with semantic elements and equipped with features to modularize and reuse content. AsciiDoc content can be composed using a text editor, managed in a version control system, and published to multiple output formats. + +In LiveCodes, AsciiDoc is compiled to HTML using [Asciidoctor](https://asciidoctor.org/). + +## Usage + +### Demo + +export const asciidocConfig = { + markup: { + language: 'asciidoc', + content: `= AsciiDoc Demo + +== Features + +* Simple +* Clean +* Dev-friendly +`, + }, +} + + + +## Language Info + +### Name + +`asciidoc` + +### Extensions + +`adoc`, `asc` + +## Editor + +`markup` + +## Compiler + +[Asciidoctor.js](https://docs.asciidoctor.org/asciidoctor.js/latest/) + +### Version + +Asciidoctor.js: `v2.2.8` + +## Code Formatting + +Not supported. + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `asciidoc` are passed as a JSON object to the [`convert()`](https://docs.asciidoctor.org/asciidoctor.js/latest/setup/quick-tour/#your-first-conversion) function during compile. +Please check the [documentation](https://docs.asciidoctor.org/asciidoctor.js/latest/processor/convert-options/) and [document attributes](https://docs.asciidoctor.org/asciidoc/latest/attributes/document-attributes-ref/) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +```json +{ + "asciidoc": { + "attributes": { + "source-highlighter": "highlight.js", + "icons": "font" + } + } +} +``` + +## Limitations + +- Some advanced extensions may not work (e.g. diagrams) + +## Links + +- [AsciiDoc](https://asciidoc.org) +- [Asciidoctor](https://asciidoctor.org/) +- [AsciiDoctor.js](https://docs.asciidoctor.org/asciidoctor.js/latest/) \ No newline at end of file diff --git a/docs/languages/asciidoc/index.html b/docs/languages/asciidoc/index.html new file mode 100644 index 0000000..0b65616 --- /dev/null +++ b/docs/languages/asciidoc/index.html @@ -0,0 +1,46 @@ +AsciiDoc | LiveCodes

    AsciiDoc

    + +

    AsciiDoc is a plain text markup language for writing technical content. It’s packed with semantic elements and equipped with features to modularize and reuse content. AsciiDoc content can be composed using a text editor, managed in a version control system, and published to multiple output formats.

    +

    In LiveCodes, AsciiDoc is compiled to HTML using Asciidoctor.

    +

    Usage​

    +

    Demo​

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "asciidoc",
          "content": "= AsciiDoc Demo\n\n== Features\n\n* Simple\n* Clean\n* Dev-friendly\n"
        }
      }
    };
    createPlayground('#container', options);

    +

    Language Info​

    +

    Name​

    +

    asciidoc

    +

    Extensions​

    +

    adoc, asc

    +

    Editor​

    +

    markup

    +

    Compiler​

    +

    Asciidoctor.js

    +

    Version​

    +

    Asciidoctor.js: v2.2.8

    +

    Code Formatting​

    +

    Not supported.

    +

    Custom Settings​

    +

    Custom settings added to the property asciidoc are passed as a JSON object to the convert() function during compile. +Please check the documentation and document attributes for full reference.

    +

    Please note that custom settings should be valid JSON (i.e. functions are not allowed).

    +
    {
      "asciidoc": {
        "attributes": {
          "source-highlighter": "highlight.js",
          "icons": "font"
        }
      }
    }
    +

    Limitations​

    +
      +
    • Some advanced extensions may not work (e.g. diagrams)
      • +
    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/assemblyscript.html.md b/docs/languages/assemblyscript.html.md new file mode 100644 index 0000000..901f24e --- /dev/null +++ b/docs/languages/assemblyscript.html.md @@ -0,0 +1,3 @@ +# AssemblyScript + +TODO... \ No newline at end of file diff --git a/docs/languages/assemblyscript/index.html b/docs/languages/assemblyscript/index.html new file mode 100644 index 0000000..0dcd895 --- /dev/null +++ b/docs/languages/assemblyscript/index.html @@ -0,0 +1,12 @@ +AssemblyScript | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/astro.html.md b/docs/languages/astro.html.md new file mode 100644 index 0000000..b63d73a --- /dev/null +++ b/docs/languages/astro.html.md @@ -0,0 +1,3 @@ +# Astro + +TODO... \ No newline at end of file diff --git a/docs/languages/astro/index.html b/docs/languages/astro/index.html new file mode 100644 index 0000000..f1cd7ca --- /dev/null +++ b/docs/languages/astro/index.html @@ -0,0 +1,12 @@ +Astro | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/autoprefixer.html.md b/docs/languages/autoprefixer.html.md new file mode 100644 index 0000000..f132c11 --- /dev/null +++ b/docs/languages/autoprefixer.html.md @@ -0,0 +1,3 @@ +# Autoprefixer + +TODO... \ No newline at end of file diff --git a/docs/languages/autoprefixer/index.html b/docs/languages/autoprefixer/index.html new file mode 100644 index 0000000..218d5f9 --- /dev/null +++ b/docs/languages/autoprefixer/index.html @@ -0,0 +1,12 @@ +Autoprefixer | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/babel.html.md b/docs/languages/babel.html.md new file mode 100644 index 0000000..01c2a85 --- /dev/null +++ b/docs/languages/babel.html.md @@ -0,0 +1,56 @@ +# Babel + +[Babel](https://babeljs.io/) is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. + +## Language Info + +### Name + +`babel` + +### Extensions + +`.es`, `.babel` + +### Editor + +`script` + +## Compiler + +The official [`@babel/standalone` compiler](https://babeljs.io/docs/babel-standalone). + +### Version + +`@babel/standalone`: v7.24.7 + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `babel` are passed as a JSON object to the [`Babel.transform`](https://babeljs.io/docs/babel-standalone#api) method during compile. Please check the [documentation](https://babeljs.io/docs/babel-core/) for full reference. + +By default, the following configuration is used: + +```json +{ + "babel": { "presets": [["env", { "modules": false }], "typescript", "react"] } +} +``` + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +export const params = { + babel: + 'export const numbers = [1, 2, 3].map((x) => x * 2);\n\nexport const Greet = (name: string) => <>Hello {name}!;\n', + compiled: 'open', +}; + + + +## Links + +- [Babel official website](https://babeljs.io/) +- [Babel documentation](https://babeljs.io/docs/) \ No newline at end of file diff --git a/docs/languages/babel/index.html b/docs/languages/babel/index.html new file mode 100644 index 0000000..98436d0 --- /dev/null +++ b/docs/languages/babel/index.html @@ -0,0 +1,37 @@ +Babel | LiveCodes

    Babel

    +

    Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

    +

    Language Info​

    +

    Name​

    +

    babel

    +

    Extensions​

    +

    .es, .babel

    +

    Editor​

    +

    script

    +

    Compiler​

    +

    The official @babel/standalone compiler.

    +

    Version​

    +

    @babel/standalone: v7.24.7

    +

    Custom Settings​

    +

    Custom settings added to the property babel are passed as a JSON object to the Babel.transform method during compile. Please check the documentation for full reference.

    +

    By default, the following configuration is used:

    +
    {
      "babel": { "presets": [["env", { "modules": false }], "typescript", "react"] }
    }
    +

    Please note that custom settings should be valid JSON (i.e. functions are not allowed).

    +

    Example Usage​

    + + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "babel": "export const numbers = [1, 2, 3].map((x) => x * 2);\n\nexport const Greet = (name: string) => <>Hello {name}!</>;\n",
        "compiled": "open"
      }
    };
    createPlayground('#container', options);

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/bbcode.html.md b/docs/languages/bbcode.html.md new file mode 100644 index 0000000..7f705dc --- /dev/null +++ b/docs/languages/bbcode.html.md @@ -0,0 +1,41 @@ +# BBCode + +[BBCode](https://www.bbcode.org/) ("Bulletin Board Code") is a lightweight markup language used to format messages in many Internet forum software. + +## Language Info + +### Name + +`bbcode` + +### Extensions + +`.bbcode`, `.bb` + +### Editor + +`markup` + +## Compiler + +[BBob](https://github.com/JiLiZART/BBob). + +### Version + +`BBob`: v3.0.2 + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +export const config = {markup: {language: 'bbcode', content: '[i]Text[/i]'}}; + +export const params = {compiled: 'open'}; + + + +## Links + +- [bbcode.org](https://www.bbcode.org/) +- [BBCode guide](https://www.phpbb.com/community/help/bbcode) +- [BBCode on Wikipedia](https://en.wikipedia.org/wiki/BBCode) \ No newline at end of file diff --git a/docs/languages/bbcode/index.html b/docs/languages/bbcode/index.html new file mode 100644 index 0000000..55ce1f3 --- /dev/null +++ b/docs/languages/bbcode/index.html @@ -0,0 +1,34 @@ +BBCode | LiveCodes

    BBCode

    +

    BBCode ("Bulletin Board Code") is a lightweight markup language used to format messages in many Internet forum software.

    +

    Language Info​

    +

    Name​

    +

    bbcode

    +

    Extensions​

    +

    .bbcode, .bb

    +

    Editor​

    +

    markup

    +

    Compiler​

    +

    BBob.

    +

    Version​

    +

    BBob: v3.0.2

    +

    Example Usage​

    + + + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "bbcode",
          "content": "[i]Text[/i]"
        }
      },
      "params": {
        "compiled": "open"
      }
    };
    createPlayground('#container', options);

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/blockly.html.md b/docs/languages/blockly.html.md new file mode 100644 index 0000000..ccdaa96 --- /dev/null +++ b/docs/languages/blockly.html.md @@ -0,0 +1,3 @@ +# Blockly + +TODO... \ No newline at end of file diff --git a/docs/languages/blockly/index.html b/docs/languages/blockly/index.html new file mode 100644 index 0000000..488953e --- /dev/null +++ b/docs/languages/blockly/index.html @@ -0,0 +1,12 @@ +Blockly | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/civet.html.md b/docs/languages/civet.html.md new file mode 100644 index 0000000..c963abe --- /dev/null +++ b/docs/languages/civet.html.md @@ -0,0 +1,3 @@ +# Civet + +TODO... \ No newline at end of file diff --git a/docs/languages/civet/index.html b/docs/languages/civet/index.html new file mode 100644 index 0000000..0444912 --- /dev/null +++ b/docs/languages/civet/index.html @@ -0,0 +1,12 @@ +Civet | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/clio.html.md b/docs/languages/clio.html.md new file mode 100644 index 0000000..d490f38 --- /dev/null +++ b/docs/languages/clio.html.md @@ -0,0 +1,3 @@ +# Clio + +TODO... \ No newline at end of file diff --git a/docs/languages/clio/index.html b/docs/languages/clio/index.html new file mode 100644 index 0000000..1f19bce --- /dev/null +++ b/docs/languages/clio/index.html @@ -0,0 +1,12 @@ +Clio | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/clojurescript.html.md b/docs/languages/clojurescript.html.md new file mode 100644 index 0000000..4c466cc --- /dev/null +++ b/docs/languages/clojurescript.html.md @@ -0,0 +1,67 @@ +# ClojureScript + +[ClojureScript](https://clojurescript.org/) is a robust, practical, and fast programming language with a set of useful features that together form a simple, coherent, and powerful tool. + +ClojureScript is a compiler for [Clojure](https://clojure.org/) that targets +JavaScript.
    In LiveCodes, it runs in the browser using +[Cherry](https://github.com/squint-cljs/cherry). + +:::info Note + +Lisp language family supported in LiveCodes includes [Common Lisp](./commonlisp.html.md), [Scheme](./scheme.html.md), [ClojureScript](./clojurescript.html.md) and [Fennel](./fennel.html.md). + +::: + +## Language Info + +### Name + +`clojurescript` + +### Extensions + +`cljs`, `cljc`, `clj`, `edn`, `clojure` + +### Editor + +`script` + +## Compiler + +[Cherry](https://github.com/squint-cljs/cherry) + +If `JSX` is used (using `#jsx` reader tag - [example](https://github.com/squint-cljs/cherry/blob/60adcf6e3a8fb940a80c6a193599da0272fe3058/examples/jsx/pages/component.cljs)), it is also compiled ([JSX](./jsx.html.md)). See [example usage](#example-usage). + +### Version + +`cherry-cljs`: v0.2.18 + +## Code Formatting + +Using [Parinfer](https://shaunlebron.github.io/parinfer/). + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +export const params = { + cljs: `(ns demo\n${' '};; you can use npm modules\n${' '}(:require ["canvas-confetti$default" :as confetti]))\n\n(let [el (js/document.getElementById "test")]\n${' '}(.addEventListener el "click"\n ${' '}(fn []\n ${' '}(confetti)\n${' '}(println "test"))))\n`, + html: '', + console: 'open', +}; + + + +Using React (with JSX): + + + +## Starter Template + +https://livecodes.io/?template=clojurescript + +## Links + +- [ClojureScript official website](https://clojurescript.org/) +- [Clojure official website](https://clojure.org/) +- [Cherry repo](https://github.com/squint-cljs/cherry) \ No newline at end of file diff --git a/docs/languages/clojurescript/index.html b/docs/languages/clojurescript/index.html new file mode 100644 index 0000000..b031dc0 --- /dev/null +++ b/docs/languages/clojurescript/index.html @@ -0,0 +1,44 @@ +ClojureScript | LiveCodes

    ClojureScript

    +

    ClojureScript is a robust, practical, and fast programming language with a set of useful features that together form a simple, coherent, and powerful tool.

    +

    ClojureScript is a compiler for Clojure that targets +JavaScript.
    In LiveCodes, it runs in the browser using +Cherry.

    +
    Note

    Lisp language family supported in LiveCodes includes Common Lisp, Scheme, ClojureScript and Fennel.

    +

    Language Info​

    +

    Name​

    +

    clojurescript

    +

    Extensions​

    +

    cljs, cljc, clj, edn, clojure

    +

    Editor​

    +

    script

    +

    Compiler​

    +

    Cherry

    +

    If JSX is used (using #jsx reader tag - example), it is also compiled (JSX). See example usage.

    +

    Version​

    +

    cherry-cljs: v0.2.18

    +

    Code Formatting​

    +

    Using Parinfer.

    +

    Example Usage​

    + + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "cljs": "(ns demo\n  ;; you can use npm modules\n  (:require [\"canvas-confetti$default\" :as confetti]))\n\n(let [el (js/document.getElementById \"test\")]\n  (.addEventListener el \"click\"\n    (fn []\n      (confetti)\n      (println \"test\"))))\n",
        "html": "<button id=\"test\">test</button>",
        "console": "open"
      }
    };
    createPlayground('#container', options);

    +

    Using React (with JSX):

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "clojurescript"
    };
    createPlayground('#container', options);

    +

    Starter Template​

    +

    https://livecodes.io/?template=clojurescript

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/coffeescript.html.md b/docs/languages/coffeescript.html.md new file mode 100644 index 0000000..59352b1 --- /dev/null +++ b/docs/languages/coffeescript.html.md @@ -0,0 +1,47 @@ +# CoffeeScript + +[CoffeeScript](https://coffeescript.org/) is a little language that compiles into JavaScript. + +## Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +This example demonstrates usage in LiveCodes: + + + +## Language Info + +### Name + +`coffeescript` + +### Extensions + +`.coffee` + +### Aliases + +`coffee`, `coffeescript` + +### Editor + +`script` + +## Compiler + +The official [CoffeeScript compiler](https://www.npmjs.com/package/coffeescript). + +### Version + +`coffeescript`: v2.7.0 + +## Starter Template + +https://livecodes.io/?template=coffeescript + +## Links + +- [Official website](https://coffeescript.org/) +- [Language Reference](https://coffeescript.org/#language) +- [CoffeeScript on GitHub](https://github.com/jashkenas/coffeescript) \ No newline at end of file diff --git a/docs/languages/coffeescript/index.html b/docs/languages/coffeescript/index.html new file mode 100644 index 0000000..36ba2ac --- /dev/null +++ b/docs/languages/coffeescript/index.html @@ -0,0 +1,37 @@ +CoffeeScript | LiveCodes

    CoffeeScript

    +

    CoffeeScript is a little language that compiles into JavaScript.

    +

    Usage​

    + +

    This example demonstrates usage in LiveCodes:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "coffeescript"
    };
    createPlayground('#container', options);

    +

    Language Info​

    +

    Name​

    +

    coffeescript

    +

    Extensions​

    +

    .coffee

    +

    Aliases​

    +

    coffee, coffeescript

    +

    Editor​

    +

    script

    +

    Compiler​

    +

    The official CoffeeScript compiler.

    +

    Version​

    +

    coffeescript: v2.7.0

    +

    Starter Template​

    +

    https://livecodes.io/?template=coffeescript

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/commonlisp.html.md b/docs/languages/commonlisp.html.md new file mode 100644 index 0000000..69c86dc --- /dev/null +++ b/docs/languages/commonlisp.html.md @@ -0,0 +1,62 @@ +# Common Lisp + +[Common Lisp](https://common-lisp.net/) is a dialect of the Lisp programming language. + +In LiveCodes, Common Lisp code runs in the browser using [JSCL](https://github.com/jscl-project/jscl), a Common Lisp to JavaScript compiler. + +:::info Note + +Lisp language family supported in LiveCodes includes [Common Lisp](./commonlisp.html.md), [Scheme](./scheme.html.md), [ClojureScript](./clojurescript.html.md) and [Fennel](./fennel.html.md). + +::: + +## Usage + +LiveCodes runs Common Lisp code in the browser. JSCL implements a subset of Common Lisp, but covers enough functionality to write practical code. + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +This example demonstrates basic Common Lisp syntax and functionality: + + + +### JS Interoperability + +Please see [JSCL docs](https://github.com/jscl-project/jscl/wiki/JSCL-and-manipulations-with-JS-objects) + +## Language Info + +### Name + +`commonlisp` + +### Aliases/Extensions + +`common-lisp`, `lisp` + +### Editor + +`script` + +## Compiler + +[JSCL](https://github.com/jscl-project/jscl) - Common Lisp to JavaScript compiler + +## Code Formatting + +Using [Parinfer](https://shaunlebron.github.io/parinfer/). + +## Limitations + +Since JSCL is a subset of Common Lisp, it doesn't implement all Common Lisp features. See the [JSCL documentation](https://github.com/jscl-project/jscl#status) for more information. + +## Starter Template + +https://livecodes.io/?template=commonlisp + +## Links + +- [Common Lisp](https://common-lisp.net/) +- [JSCL](https://github.com/jscl-project/jscl) +- [Common Lisp: A Gentle Introduction to Symbolic Computation](https://www.cs.cmu.edu/~dst/LispBook/) +- [Practical Common Lisp](http://www.gigamonkeys.com/book/) \ No newline at end of file diff --git a/docs/languages/commonlisp/index.html b/docs/languages/commonlisp/index.html new file mode 100644 index 0000000..3a6af8c --- /dev/null +++ b/docs/languages/commonlisp/index.html @@ -0,0 +1,43 @@ +Common Lisp | LiveCodes

    Common Lisp

    +

    Common Lisp is a dialect of the Lisp programming language.

    +

    In LiveCodes, Common Lisp code runs in the browser using JSCL, a Common Lisp to JavaScript compiler.

    +
    Note

    Lisp language family supported in LiveCodes includes Common Lisp, Scheme, ClojureScript and Fennel.

    +

    Usage​

    +

    LiveCodes runs Common Lisp code in the browser. JSCL implements a subset of Common Lisp, but covers enough functionality to write practical code.

    + +

    This example demonstrates basic Common Lisp syntax and functionality:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "commonlisp"
    };
    createPlayground('#container', options);

    +

    JS Interoperability​

    +

    Please see JSCL docs

    +

    Language Info​

    +

    Name​

    +

    commonlisp

    +

    Aliases/Extensions​

    +

    common-lisp, lisp

    +

    Editor​

    +

    script

    +

    Compiler​

    +

    JSCL - Common Lisp to JavaScript compiler

    +

    Code Formatting​

    +

    Using Parinfer.

    +

    Limitations​

    +

    Since JSCL is a subset of Common Lisp, it doesn't implement all Common Lisp features. See the JSCL documentation for more information.

    +

    Starter Template​

    +

    https://livecodes.io/?template=commonlisp

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/cpp-wasm.html.md b/docs/languages/cpp-wasm.html.md new file mode 100644 index 0000000..96aba39 --- /dev/null +++ b/docs/languages/cpp-wasm.html.md @@ -0,0 +1,3 @@ +# C/C++ (Wasm) + +TODO... \ No newline at end of file diff --git a/docs/languages/cpp-wasm/index.html b/docs/languages/cpp-wasm/index.html new file mode 100644 index 0000000..aa1f903 --- /dev/null +++ b/docs/languages/cpp-wasm/index.html @@ -0,0 +1,12 @@ +C/C++ (Wasm) | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/cpp.html.md b/docs/languages/cpp.html.md new file mode 100644 index 0000000..7635e14 --- /dev/null +++ b/docs/languages/cpp.html.md @@ -0,0 +1,3 @@ +# C++ + +TODO... \ No newline at end of file diff --git a/docs/languages/cpp/index.html b/docs/languages/cpp/index.html new file mode 100644 index 0000000..3fdfce3 --- /dev/null +++ b/docs/languages/cpp/index.html @@ -0,0 +1,12 @@ +C++ | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/csharp-wasm.html.md b/docs/languages/csharp-wasm.html.md new file mode 100644 index 0000000..2745cc8 --- /dev/null +++ b/docs/languages/csharp-wasm.html.md @@ -0,0 +1,137 @@ +# C# (Wasm) + +C# is a high-level, general-purpose, object-oriented programming language developed by Microsoft. + +In LiveCodes, C# runs in the browser using Blazor WebAssembly with a WebAssembly-based .NET runtime. + +## Usage + +Demo: + + +import LiveCodes from '../../src/components/LiveCodes.tsx'; +export const csharpConfig = { + activeEditor: 'script', + script: { + language: 'csharp-wasm', + content: `using System; + +public class Program +{ + public static void Main() + { + int[] sortedArray = { 1, 3, 5, 7, 9, 11, 13, 15 }; + int itemToSearch = 7; + + int result = BinarySearch(sortedArray, 0, sortedArray.Length - 1, itemToSearch); + + if (result == -1) + { + Console.WriteLine("Result: Item not found in the array."); + } + else + { + Console.WriteLine($"Result: Item found at index -> {result}"); + } + } + + public static int BinarySearch(int[] arr, int left, int right, int item) + { + if (right >= left) + { + int mid = left + (right - left) / 2; + if (arr[mid] == item) + { + return mid; + } + + if (arr[mid] > item) + { + return BinarySearch(arr, left, mid - 1, item); + } + + return BinarySearch(arr, mid + 1, right, item); + } + return -1; + } +}`, + }, + mode: 'simple', + editor: 'auto', + tools: { + status: 'full', + }, +}; + + + + +### Communication with JavaScript + +The C# code runs in the context of the result page. A few helper properties and methods are available in the browser global `livecodes.csharp` object: + +- `livecodes.csharp.input`: The initial standard input passed to the C# code. +- `livecodes.csharp.loaded`: A promise that resolves when the C# environment (Blazor WebAssembly) is fully loaded. Other helpers should be used after this promise resolves. +- `livecodes.csharp.output`: The standard output from the C# code execution. +- `livecodes.csharp.run`: A function that runs the C# code with new input. This function takes a string as input and returns a promise that resolves with an object containing the `output`, `error`, and `exitCode` properties. + +Example: + + + + + +## Language Info + +### Name + +`csharp-wasm` + +### Aliases / Extensions + +`cs`, `csharp`, `wasm.cs`, `cs-wasm` + +### Editor + +`script` + +## Compiler + +Blazor WebAssembly with .NET WebAssembly runtime. + +### Version + +.NET 9.0 + +## Code Formatting + +using [Prettier](https://prettier.io/) + +## Live Reload + +By default, new code changes are sent to the result page for re-evaluation without a full page reload, avoiding the need to reinitialize the Blazor environment. This behavior can be disabled by adding the code comment `// __livecodes_reload__` to the C# code, which forces a full page reload. + +This comment can be added in the `hiddenContent` property of the editor for embedded playgrounds. + +## Example Usage + +```csharp +using System; + +public class Program +{ + public static void Main() + { + Console.WriteLine("Hello, LiveCodes C#!"); + } +} +``` + +## Starter Template + +https://livecodes.io/?template=csharp-wasm + +## Links + +- [C#](https://learn.microsoft.com/en-us/dotnet/csharp/) +- [Blazor WebAssembly](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor) \ No newline at end of file diff --git a/docs/languages/csharp-wasm/index.html b/docs/languages/csharp-wasm/index.html new file mode 100644 index 0000000..ae64cbf --- /dev/null +++ b/docs/languages/csharp-wasm/index.html @@ -0,0 +1,52 @@ +C# (Wasm) | LiveCodes

    C# (Wasm)

    +

    C# is a high-level, general-purpose, object-oriented programming language developed by Microsoft.

    +

    In LiveCodes, C# runs in the browser using Blazor WebAssembly with a WebAssembly-based .NET runtime.

    +

    Usage​

    +

    Demo:

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "activeEditor": "script",
        "script": {
          "language": "csharp-wasm",
          "content": "using System;\n\npublic class Program\n{\n    public static void Main()\n    {\n        int[] sortedArray = { 1, 3, 5, 7, 9, 11, 13, 15 };\n        int itemToSearch = 7;\n\n        int result = BinarySearch(sortedArray, 0, sortedArray.Length - 1, itemToSearch);\n\n        if (result == -1)\n        {\n            Console.WriteLine(\"Result: Item not found in the array.\");\n        }\n        else\n        {\n            Console.WriteLine($\"Result: Item found at index -> {result}\");\n        }\n    }\n\n    public static int BinarySearch(int[] arr, int left, int right, int item)\n    {\n        if (right >= left)\n        {\n            int mid = left + (right - left) / 2;\n            if (arr[mid] == item)\n            {\n                return mid;\n            }\n\n            if (arr[mid] > item)\n            {\n                return BinarySearch(arr, left, mid - 1, item);\n            }\n\n            return BinarySearch(arr, mid + 1, right, item);\n        }\n        return -1;\n    }\n}"
        },
        "mode": "simple",
        "editor": "auto",
        "tools": {
          "status": "full"
        }
      }
    };
    createPlayground('#container', options);

    +

    Communication with JavaScript​

    +

    The C# code runs in the context of the result page. A few helper properties and methods are available in the browser global livecodes.csharp object:

    +
      +
    • livecodes.csharp.input: The initial standard input passed to the C# code.
      • +
    • livecodes.csharp.loaded: A promise that resolves when the C# environment (Blazor WebAssembly) is fully loaded. Other helpers should be used after this promise resolves.
      • +
    • livecodes.csharp.output: The standard output from the C# code execution.
      • +
    • livecodes.csharp.run: A function that runs the C# code with new input. This function takes a string as input and returns a promise that resolves with an object containing the output, error, and exitCode properties.
      • +
    +

    Example:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "csharp-wasm",
      "params": {
        "activeEditor": "markup"
      }
    };
    createPlayground('#container', options);

    +

    Language Info​

    +

    Name​

    +

    csharp-wasm

    +

    Aliases / Extensions​

    +

    cs, csharp, wasm.cs, cs-wasm

    +

    Editor​

    +

    script

    +

    Compiler​

    +

    Blazor WebAssembly with .NET WebAssembly runtime.

    +

    Version​

    +

    .NET 9.0

    +

    Code Formatting​

    +

    using Prettier

    +

    Live Reload​

    +

    By default, new code changes are sent to the result page for re-evaluation without a full page reload, avoiding the need to reinitialize the Blazor environment. This behavior can be disabled by adding the code comment // __livecodes_reload__ to the C# code, which forces a full page reload.

    +

    This comment can be added in the hiddenContent property of the editor for embedded playgrounds.

    +

    Example Usage​

    +
    using System;

    public class Program
    {
        public static void Main()
        {
            Console.WriteLine("Hello, LiveCodes C#!");
        }
    }
    +

    Starter Template​

    +

    https://livecodes.io/?template=csharp-wasm

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/css.html.md b/docs/languages/css.html.md new file mode 100644 index 0000000..838fdbc --- /dev/null +++ b/docs/languages/css.html.md @@ -0,0 +1,3 @@ +# CSS + +TODO... \ No newline at end of file diff --git a/docs/languages/css/index.html b/docs/languages/css/index.html new file mode 100644 index 0000000..d059669 --- /dev/null +++ b/docs/languages/css/index.html @@ -0,0 +1,12 @@ +CSS | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/cssmodules.html.md b/docs/languages/cssmodules.html.md new file mode 100644 index 0000000..b601524 --- /dev/null +++ b/docs/languages/cssmodules.html.md @@ -0,0 +1,252 @@ +# CSS Modules + +A [CSS Module](https://github.com/css-modules/css-modules) is a CSS file in which all class names and animation names are scoped locally by default. + +The selector names are unique to avoid naming collision. They can then be imported as a JavaScript object. + +## Usage + +CSS Modules can be enabled from the style editor menu. + +Selectors added to the style editor (using any language e.g. CSS, SCSS, Less, etc.) are transformed to unique selectors. The transformed classes are then accessible in the script editor as a JSON object, and are injected into the HTML elements. + +**Example:** + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + + +```css +:global .page { + padding: 20px; +} + +.text { + color: black; + font-family: sans-serif; +} + +.small-text { + composes: text; + font-size: 20px; +} + +.large-text { + composes: text; + font-size: 40px; +} + +.large-text:hover { + color: red; +} + +.title { + composes: large-text; + color: green; +} +``` + + + + +```css +.page { + padding: 20px; +} + +._text_1ygro_9 { + color: black; + font-family: sans-serif; +} + +._small-text_1ygro_19 { + font-size: 20px; +} + +._large-text_1ygro_29 { + font-size: 40px; +} + +._large-text_1ygro_29:hover { + color: red; +} + +._title_1ygro_47 { + color: green; +} +``` + + + + +```json +{ + "text": "_text_1ygro_9", + "small-text": "_small-text_1ygro_19 _text_1ygro_9", + "large-text": "_large-text_1ygro_29 _text_1ygro_9", + "title": "_title_1ygro_47 _large-text_1ygro_29 _text_1ygro_9", + "smallText": "_small-text_1ygro_19 _text_1ygro_9", + "largeText": "_large-text_1ygro_29 _text_1ygro_9" +} +``` + + + + +```html +
    +

    Page Title

    +

    + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non + beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur + similique facere facilis minima tempora. +

    +
    +``` + +     + + +```html +
    +

    Page Title

    +

    + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non + beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur + similique facere facilis minima tempora. +

    +
    +``` + +     +     + +In the script editor, the JSON object representing the transformed classes can be imported from the relative URLs `'./style.module.css'` or `'./styles.module.css'`. + +[Default](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#default_import), [named](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#named_import) and [namespace](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#namespace_import) imports are supported. Class names are also available in camelCase (e.g `.large-text` becomes `largeText`). This can be changed by setting [`localsConvention`](https://github.com/madyankin/postcss-modules#localsconvention) in [custom settings](#custom-settings). + +**Example:** + +```js title="In script editor (using JS in this case):" +import classes from './style.module.css'; +import { smallText } from './styles.module.css'; +import * as allClasses from './styles.module.css'; + +console.log(classes.title); + +// .small-text -> smallText +console.log(smallText); + +// .large-text -> largeText +console.log(allClasses.largeText); + +// bracket notation for class with dash +console.log(allClasses['large-text']); +``` + +For full example, see [example usage](#example-usage) below. + +:::info + +CSS Modules has to be enabled (from style editor menu), to be able to import classes in the script editor. + +Importing a URL that does not include `.module` (e.g. `./style.css`) gets the processed CSS **string** as the module's default export. + +The extension of the style editor language can also be used, in addition to `.css`. For example, when using SCSS, importing from any of the following URLs is the same: + +- `./style.module.css` +- `./styles.module.css` +- `./style.module.scss` +- `./styles.module.scss` + +::: + +## Language Info + +### Name + +`cssmodules` + +### Type + +[Processor](../features/css.html.md)#css-processors) + +### Editor + +`style` + +## Compiler + +The CSS Modules processor is provided using [postcss-modules](https://github.com/madyankin/postcss-modules) as a [PostCSS](./postcss.html.md) plugin. + +### Version + +`postcss-modules`: v6.0.1 + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `cssmodules` are passed as a JSON object to the `postcss-modules` plugin during compile. Please check the [documentation](https://github.com/madyankin/postcss-modules#usage) for full reference. + +In addition, the following settings are available: + +- `addClassesToHTML` + + Type: `boolean`. Default: `true`. + + The generated classes are injected into the HTML elements, so the styles are applied without having to assign them using JavaScript. + +- `removeOriginalClasses` + + Type: `boolean`. Default: `false`. + + When enabled, the original classes are removed from HTML, keeping only the generated classes. Only applies if `addClassesToHTML` is enabled. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +**Example:** + +```json +{ + "cssmodules": { + "exportGlobals": true, + "localsConvention": "camelCaseOnly", + "addClassesToHTML": false + } +} +``` + +## Limitations + +Currently, loading external sources in [`composes`](https://github.com/css-modules/css-modules#composing-from-other-files) is not supported. + +```css +/* you cannot do this */ +.title { + composes: title from 'https://example.com/styles.css'; +} +``` + +If you get this working, [please create a pull request](https://github.com/live-codes/livecodes/pulls). + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +export const params = { + activeEditor: 'style', + html: '
    \n

    Page Title

    \n

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur similique facere facilis minima tempora.

    \n
    \n', + css: ':global .page {\n padding: 20px;\n}\n\n.text {\n color: black;\n font-family: sans-serif;\n}\n\n.small-text {\n composes: text;\n font-size: 20px;\n}\n\n.large-text {\n composes: text;\n font-size: 40px;\n}\n\n.large-text:hover {\n color: red;\n}\n\n.title {\n composes: large-text;\n color: green;\n}\n', + js: "import classes from './style.module.css';\n\ndocument.querySelector('h1').className = classes.title;\nconsole.log(classes);\n", + processors: 'cssmodules', + compiled: 'open', +}; + + + +## Links + +- [CSS Modules](https://github.com/css-modules/css-modules) +- [postcss-modules](https://github.com/madyankin/postcss-modules) +- [PostCSS](https://postcss.org/) \ No newline at end of file diff --git a/docs/languages/cssmodules/index.html b/docs/languages/cssmodules/index.html new file mode 100644 index 0000000..7e989c7 --- /dev/null +++ b/docs/languages/cssmodules/index.html @@ -0,0 +1,73 @@ +CSS Modules | LiveCodes

    CSS Modules

    +

    A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

    +

    The selector names are unique to avoid naming collision. They can then be imported as a JavaScript object.

    +

    Usage​

    +

    CSS Modules can be enabled from the style editor menu.

    +

    Selectors added to the style editor (using any language e.g. CSS, SCSS, Less, etc.) are transformed to unique selectors. The transformed classes are then accessible in the script editor as a JSON object, and are injected into the HTML elements.

    +

    Example:

    + +
    :global .page {
      padding: 20px;
    }

    .text {
      color: black;
      font-family: sans-serif;
    }

    .small-text {
      composes: text;
      font-size: 20px;
    }

    .large-text {
      composes: text;
      font-size: 40px;
    }

    .large-text:hover {
      color: red;
    }

    .title {
      composes: large-text;
      color: green;
    }
    +

    In the script editor, the JSON object representing the transformed classes can be imported from the relative URLs './style.module.css' or './styles.module.css'.

    +

    Default, named and namespace imports are supported. Class names are also available in camelCase (e.g .large-text becomes largeText). This can be changed by setting localsConvention in custom settings.

    +

    Example:

    +
    In script editor (using JS in this case):
    import classes from './style.module.css';
    import { smallText } from './styles.module.css';
    import * as allClasses from './styles.module.css';

    console.log(classes.title);

    // .small-text -> smallText
    console.log(smallText);

    // .large-text -> largeText
    console.log(allClasses.largeText);

    // bracket notation for class with dash
    console.log(allClasses['large-text']);
    +

    For full example, see example usage below.

    +
    info

    CSS Modules has to be enabled (from style editor menu), to be able to import classes in the script editor.

    Importing a URL that does not include .module (e.g. ./style.css) gets the processed CSS string as the module's default export.

    The extension of the style editor language can also be used, in addition to .css. For example, when using SCSS, importing from any of the following URLs is the same:

      +
    • ./style.module.css
      • +
    • ./styles.module.css
      • +
    • ./style.module.scss
      • +
    • ./styles.module.scss
      • +
    +

    Language Info​

    +

    Name​

    +

    cssmodules

    +

    Type​

    +

    Processor

    +

    Editor​

    +

    style

    +

    Compiler​

    +

    The CSS Modules processor is provided using postcss-modules as a PostCSS plugin.

    +

    Version​

    +

    postcss-modules: v6.0.1

    +

    Custom Settings​

    +

    Custom settings added to the property cssmodules are passed as a JSON object to the postcss-modules plugin during compile. Please check the documentation for full reference.

    +

    In addition, the following settings are available:

    +
      +
    • +

      addClassesToHTML

      +

      Type: boolean. Default: true.

      +

      The generated classes are injected into the HTML elements, so the styles are applied without having to assign them using JavaScript.

      +
      • +
    • +

      removeOriginalClasses

      +

      Type: boolean. Default: false.

      +

      When enabled, the original classes are removed from HTML, keeping only the generated classes. Only applies if addClassesToHTML is enabled.

      +
      • +
    +

    Please note that custom settings should be valid JSON (i.e. functions are not allowed).

    +

    Example:

    +
    {
      "cssmodules": {
        "exportGlobals": true,
        "localsConvention": "camelCaseOnly",
        "addClassesToHTML": false
      }
    }
    +

    Limitations​

    +

    Currently, loading external sources in composes is not supported.

    +
    /* you cannot do this */
    .title {
      composes: title from 'https://example.com/styles.css';
    }
    +

    If you get this working, please create a pull request.

    +

    Example Usage​

    + + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "activeEditor": "style",
        "html": "<div class=\"page\">\n <h1>Page Title</h1>\n <p class=\"small-text\">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur similique facere facilis minima tempora.</p>\n</div>\n",
        "css": ":global .page {\n padding: 20px;\n}\n\n.text {\n color: black;\n font-family: sans-serif;\n}\n\n.small-text {\n composes: text;\n font-size: 20px;\n}\n\n.large-text {\n composes: text;\n font-size: 40px;\n}\n\n.large-text:hover {\n color: red;\n}\n\n.title {\n composes: large-text;\n color: green;\n}\n",
        "js": "import classes from './style.module.css';\n\ndocument.querySelector('h1').className = classes.title;\nconsole.log(classes);\n",
        "processors": "cssmodules",
        "compiled": "open"
      }
    };
    createPlayground('#container', options);

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/cssnano.html.md b/docs/languages/cssnano.html.md new file mode 100644 index 0000000..415dfa5 --- /dev/null +++ b/docs/languages/cssnano.html.md @@ -0,0 +1,3 @@ +# cssnano + +TODO... \ No newline at end of file diff --git a/docs/languages/cssnano/index.html b/docs/languages/cssnano/index.html new file mode 100644 index 0000000..914e3d5 --- /dev/null +++ b/docs/languages/cssnano/index.html @@ -0,0 +1,12 @@ +cssnano | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/diagrams.html.md b/docs/languages/diagrams.html.md new file mode 100644 index 0000000..66c574a --- /dev/null +++ b/docs/languages/diagrams.html.md @@ -0,0 +1,581 @@ +# Diagrams + +import OpenCode from '../../src/components/OpenCode.tsx'; + +## Overview + +Diagrams-as-code. + +Allows using syntax for multiple visualization libraries inside HTML to produce diagrams. +The rendered diagrams are added to the [result page](../features/result.html.md) as either: + +- SVG elements (which you can style with CSS or manipulate with JavaScript) +- HTML images (which you can right-click and save or open in a new window) + +Diagrams from multiple libraries can be used in the same page. Only the libraries used will be loaded in the LiveCodes playground. The result page will have no libraries (only the output SVG or images). + +Open starter template in LiveCodes + +## Usage + +This code: () + +```html +
    + + +``` + +produces this output: + +![flow-chart](./img/flow-chart.svg) + +

    Steps

    + +#### 1. Add a diagram target: + +The target element should have a `data-src` attribute. + +It can be an HTML element (the SVG of the diagram will be embedded as a child element) + +```html +
    +``` + +becomes + +```html +
    ...
    +``` + +or an HTML image element (the diagram will be added to its `src` attribute as a [data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)) + +```html + +``` + +becomes + +```html + +``` + +There can be more that one target element for the same diagram if they have the same `data-src` attribute. + +```html +
    + +``` + +#### 2. Add a script element with the diagram syntax: + +It should have: + +- an attribute `type="application/diagram-{diagram type}"` that specifies the diagram type (e.g. `type="application/diagram-mermaid"`). +- a `data-output` attribute that matches the `data-src` attribute of the target element. +- the syntax of the diagram is the content of the script element or the content of a file linked by the `src` attribute. + +```html + + + +``` + +## Supported Libraries + +### [Cytoscape](https://js.cytoscape.org/) + +The diagram syntax is JSON representing [Cytoscape options](https://js.cytoscape.org/#getting-started/specifying-basic-options). + +Please note that reference to JavaScript objects cannot be used.
    e.g. do not use `{container: document.getElementById('cy')}`. + +Example: () + +```html +
    + +``` + +### [ELK](https://www.eclipse.org/elk/) + +Diagram layout is produced using [elkjs](https://github.com/kieler/elkjs) and rendered using [elkjs-svg](https://github.com/EmilStenstrom/elkjs-svg). + +The syntax used is [ELK JSON](https://www.eclipse.org/elk/documentation/tooldevelopers/graphdatastructure/jsonformat.html) format.
    ELK text format is not supported! (You may use [this tool](https://rtsys.informatik.uni-kiel.de/elklive/conversion.html) to convert formats) + +Example: () + +```html +
    + +``` + +### [Gnuplot](http://www.gnuplot.info/) + +using [gnuplot-JS](https://github.com/chhu/gnuplot-JS) + +Instead of using `data-output` attribute in the [script element](#2-add-a-script-element-with-the-diagram-syntax), the statement `set output` is used in the diagram syntax (see highlighted lines below). + +Data files are also specified in the diagram syntax (see highlighted lines below). +They are defined in script elements with the attribute `type="application/diagram-gnuplot-file"`. The file name is specified in `data-file` attribute and either have inline content or linked to with a `src` attribute. + +Example: () + +```html {4,22} +
    + + + + + + + +``` + +### [Graphviz](https://graphviz.org/) + +using [@hpcc-js/wasm](https://github.com/hpcc-systems/hpcc-js-wasm) + +The following [layout engines](https://graphviz.org/docs/layouts/) are supported: + +- dot +- neato +- fdp +- sfdp +- circo +- twopi +- osage +- patchwork + +By default, the `dot` layout engine is used. To use a different engine add the attribute `data-layout` to the [script element](#2-add-a-script-element-with-the-diagram-syntax) with the value of the required engine name, like this: + +```html + +``` + +Example: () + +```html +
    + +``` + +### [Mermaid](https://mermaid-js.github.io/mermaid/) + +Example: () + +```html +
    + +``` + +### [Nomnoml](https://nomnoml.com/) + +Example: () + +```html +
    + +``` + +### [Pintora](https://pintorajs.vercel.app/) + +[Pintora config](https://pintorajs.vercel.app/docs/configuration/config) object can be specified in [custom settings](../advanced/custom-settings.html.md), under the key `pintora`. + +Example Custom Settings: + +```json +{ + "pintora": { + "themeConfig": { + "theme": "dark" + } + } +} +``` + +Example: () + +```html +
    + +``` + +### [Plotly](https://plotly.com/graphing-libraries/) + +The diagram syntax is a JSON object with `data` and `layout` properties (see [Plotly reference](https://plotly.com/javascript/reference/index/)). + +Please note that the output is a non-interactive SVG element or image. The plotly library is not loaded in the result page, so any JavaScript functionality is not available. + +Example: () + +```html +
    + +``` + +### [Svgbob](https://github.com/ivanceras/svgbob) + +Example: () + +```html +
    + +``` + +### [Vega](https://vega.github.io/vega/) + +The diagram syntax is [Vega JSON specification](https://vega.github.io/vega/docs/#specification). + +Please note that the output is a non-interactive SVG element or image. The Vega library is not loaded in the result page, so any JavaScript functionality is not available. + +Example: () + +```html +
    + +``` + +### [VegaLite](https://vega.github.io/vega-lite/) + +The diagram syntax is [Vega-Lite View JSON Specification](https://vega.github.io/vega-lite/docs/spec.html). + +Please note that the output is a non-interactive SVG element or image. The Vega-Lite library is not loaded in the result page, so any JavaScript functionality is not available. + +Example: () + +```html +
    + +``` + +### [WaveDrom](https://wavedrom.com/) + +The diagram syntax is [WaveJSON](https://wavedrom.com/tutorial.html) format. + +Example: () + +```html +
    + +``` \ No newline at end of file diff --git a/docs/languages/diagrams/index.html b/docs/languages/diagrams/index.html new file mode 100644 index 0000000..3c91ddd --- /dev/null +++ b/docs/languages/diagrams/index.html @@ -0,0 +1,117 @@ +Diagrams | LiveCodes

    Diagrams

    + +

    Overview​

    +

    Diagrams-as-code.

    +

    Allows using syntax for multiple visualization libraries inside HTML to produce diagrams. +The rendered diagrams are added to the result page as either:

    +
      +
    • SVG elements (which you can style with CSS or manipulate with JavaScript)
      • +
    • HTML images (which you can right-click and save or open in a new window)
      • +
    +

    Diagrams from multiple libraries can be used in the same page. Only the libraries used will be loaded in the LiveCodes playground. The result page will have no libraries (only the output SVG or images).

    +Open starter template in LiveCodes +

    Usage​

    +

    This code: (open in LiveCodes)

    +
    <div data-src="my-diagram"></div>

    <script type="application/diagram-mermaid" data-output="my-diagram">
      graph TD
        A-->B
        A-->C
        B-->D
        C-->D
    </script>
    +

    produces this output:

    +

    flow-chart

    +

    Steps

    +

    1. Add a diagram target:​

    +

    The target element should have a data-src attribute.

    +

    It can be an HTML element (the SVG of the diagram will be embedded as a child element)

    +
    <div data-src="my-diagram"></div>
    +

    becomes

    +
    <div data-src="my-diagram"><svg ...>...</svg></div>
    +

    or an HTML image element (the diagram will be added to its src attribute as a data URL)

    +
    <img data-src="my-diagram" />
    +

    becomes

    +
    <img data-src="my-diagram" src="data:image/svg+xml;base64,..." />
    +

    There can be more that one target element for the same diagram if they have the same data-src attribute.

    +
    <div data-src="my-diagram"></div>
    <img data-src="my-diagram" />
    +

    2. Add a script element with the diagram syntax:​

    +

    It should have:

    +
      +
    • an attribute type="application/diagram-{diagram type}" that specifies the diagram type (e.g. type="application/diagram-mermaid").
      • +
    • a data-output attribute that matches the data-src attribute of the target element.
      • +
    • the syntax of the diagram is the content of the script element or the content of a file linked by the src attribute.
      • +
    +
    <script type="application/diagram-mermaid" data-output="my-diagram">
      graph TD
        A-->B
        A-->C
        B-->D
        C-->D
    </script>

    <script
      type="application/diagram-mermaid"
      data-output="second-diagram"
      src="/url/to/diagram/syntax"
    ></script>
    +

    Supported Libraries​

    +

    Cytoscape​

    +

    The diagram syntax is JSON representing Cytoscape options.

    +

    Please note that reference to JavaScript objects cannot be used.
    e.g. do not use {container: document.getElementById('cy')}.

    +

    Example: (open in LiveCodes)

    +
    <div data-src="cytoscape.svg"></div>
    <script type="application/diagram-cytoscape" data-output="cytoscape.svg">
      {
        "elements": [
          {
            "data": { "id": "a" }},
          {
            "data": { "id": "b" }},
          {
            "data": { "id": "ab", "source": "a", "target": "b" }}],

        "style": [
          {
            "selector": "node",
            "style": {
              "background-color": "#666",
              "label": "data(id)"}
          },

          {
            "selector": "edge",
            "style": {
              "width": 3,
              "line-color": "#ccc",
              "target-arrow-color": "#ccc",
              "target-arrow-shape": "triangle",
              "curve-style": "bezier"
            }
          }
        ],

        "layout": {
          "name": "grid",
          "rows": 1
        }

      }
    </script>
    +

    ELK​

    +

    Diagram layout is produced using elkjs and rendered using elkjs-svg.

    +

    The syntax used is ELK JSON format.
    ELK text format is not supported! (You may use this tool to convert formats)

    +

    Example: (open in LiveCodes)

    +
    <div data-src="elk.svg"></div>
    <script type="application/diagram-elk" data-output="elk.svg">
      {
        "id": "root",
        "layoutOptions": {
          "elk.algorithm": "layered"
        },
        "children": [
          {"id": "n1", "width": 70, "height": 70},
          {"id": "n2", "width": 70, "height": 70},
          {"id": "n3", "width": 70, "height": 70},
          {"id": "n4", "width": 70, "height": 70},
          {"id": "n5", "width": 70, "height": 70},
          {"id": "n6", "width": 70, "height": 70}
        ],
        "edges": [
          {"id": "e1", "sources": ["n1"], "targets": ["n2"]},
          {"id": "e2", "sources": ["n1"], "targets": ["n3"]},
          {"id": "e3", "sources": ["n2"], "targets": ["n4"]},
          {"id": "e4", "sources": ["n3"], "targets": ["n5"]},
          {"id": "e5", "sources": ["n5"], "targets": ["n6"]},
          {"id": "e6", "sources": ["n4"], "targets": ["n6"]}
        ]
      }
    </script>
    +

    Gnuplot​

    +

    using gnuplot-JS

    +

    Instead of using data-output attribute in the script element, the statement set output is used in the diagram syntax (see highlighted lines below).

    +

    Data files are also specified in the diagram syntax (see highlighted lines below). +They are defined in script elements with the attribute type="application/diagram-gnuplot-file". The file name is specified in data-file attribute and either have inline content or linked to with a src attribute.

    +

    Example: (open in LiveCodes)

    +
    <div data-src="contour.svg"></div>
    <script type="application/diagram-gnuplot">
      set terminal svg size 600,400 enhanced fname 'arial' fsize 10 butt solid
      set output 'contour.svg'
      set view 60, 30, 0.85, 1.1
      set samples 25, 25
      set isosamples 26, 26
      set contour base
      set cntrparam bspline
      set cntrparam levels auto 10
      set style data lines
      set title "3D gnuplot demo - contour of data grid plotting"
      set xlabel "X axis"
      set xrange [ 0.00000 : 15.0000 ] noreverse nowriteback
      set ylabel "Y axis"
      set yrange [ 0.00000 : 15.0000 ] noreverse nowriteback
      set zlabel "Z axis"
      set zlabel  offset character 1, 0, 0 font "" textcolor lt -1 norotate
      set zrange [ -1.20000 : 1.20000 ] noreverse nowriteback

      # "glass.dat" is defined below
      splot "glass.dat" using 1
    </script>

    <!--  data file -->
    <script
      type="application/diagram-gnuplot-file"
      data-file="glass.dat"
      src="https://raw.githubusercontent.com/gnuplot/gnuplot/master/demo/glass.dat"
    ></script>

    <!--  or inline data in a script block -->
    <script type="application/diagram-gnuplot-file" data-file="another-file.dat">
      0.568000   0.000000  -0.911000
      0.518894   0.231026  -0.911000
      0.380066   0.422106  -0.911000
      0.175522   0.540200  -0.911000
      -0.059372   0.564888  -0.911000
    </script>
    +

    Graphviz​

    +

    using @hpcc-js/wasm

    +

    The following layout engines are supported:

    +
      +
    • dot
      • +
    • neato
      • +
    • fdp
      • +
    • sfdp
      • +
    • circo
      • +
    • twopi
      • +
    • osage
      • +
    • patchwork
      • +
    +

    By default, the dot layout engine is used. To use a different engine add the attribute data-layout to the script element with the value of the required engine name, like this:

    +
    <script type="application/diagram-graphviz" data-layout="fdp" data-output="my-diagram">
      ...
    </script>
    +

    Example: (open in LiveCodes)

    +
    <div data-src="flow-chart.svg"></div>
    <script type="application/diagram-graphviz" data-output="flow-chart.svg">
      digraph G {
        node [shape=rect];

        subgraph cluster_0 {
          style=filled;
          color=lightgrey;
          node [style=filled,color=white];
          a0 -> a1 -> a2 -> a3;
          label = "Hello";
        }

        subgraph cluster_1 {
          node [style=filled];
          b0 -> b1 -> b2 -> b3;
          label = "World!";
          color=blue
        }

        start -> a0;
        start -> b0;
        a1 -> b3;
        b2 -> a3;
        a3 -> a0;
        a3 -> end;
        b3 -> end;

        start [shape=Mdiamond];
        end [shape=Msquare];
      }
    </script>
    +

    Mermaid​

    +

    Example: (open in LiveCodes)

    +
    <div data-src="class-diagram.svg"></div>
    <script type="application/diagram-mermaid" data-output="class-diagram.svg">
      classDiagram
      Class01 <|-- AveryLongClass : Cool
      Class03 *-- Class04
      Class05 o-- Class06
      Class07 .. Class08
      Class09 --> C2 : Where am i?
      Class09 --* C3
      Class09 --|> Class07
      Class07 : equals()
      Class07 : Object[] elementData
      Class01 : size()
      Class01 : int chimp
      Class01 : int gorilla
      Class08 <--> C2: Cool label
    </script>
    +

    Nomnoml​

    +

    Example: (open in LiveCodes)

    +
    <div data-src="nomnoml.svg"></div>
    <script type="application/diagram-nomnoml" data-output="nomnoml.svg">
      [Pirate|eyeCount: Int|raid();pillage()|
        [beard]--[parrot]
        [beard]-:>[foul mouth]
      ]

      [<table>mischief | bawl | sing || yell | drink]

      [<abstract>Marauder]<:--[Pirate]
      [Pirate]- 0..7[mischief]
      [jollyness]->[Pirate]
      [jollyness]->[rum]
      [jollyness]->[singing]
      [Pirate]-> *[rum|tastiness: Int|swig()]
      [Pirate]->[singing]
      [singing]<->[rum]
    </script>
    +

    Pintora​

    +

    Pintora config object can be specified in custom settings, under the key pintora.

    +

    Example Custom Settings:

    +
    {
      "pintora": {
        "themeConfig": {
          "theme": "dark"
        }
      }
    }
    +

    Example: (open in LiveCodes)

    +
    <div data-src="pintora.svg"></div>
    <script type="application/diagram-pintora" data-output="pintora.svg">
      sequenceDiagram
        Frida-->>Georgia: Flowers are beautiful
        @note over Frida,Georgia: Painters
        @note right of Georgia: Right
        @note left of Georgia
        multiline
        note
        @end_note
    </script>
    +

    Plotly​

    +

    The diagram syntax is a JSON object with data and layout properties (see Plotly reference).

    +

    Please note that the output is a non-interactive SVG element or image. The plotly library is not loaded in the result page, so any JavaScript functionality is not available.

    +

    Example: (open in LiveCodes)

    +
    <div data-src="plotly.svg"></div>
    <script type="application/diagram-plotly" data-output="plotly.svg">
      {
        "data": [
          {
            "y": [
              0.2,
              0.2,
              0.6,
              1,
              0.5,
              0.4,
              0.2,
              0.7,
              0.9,
              0.1,
              0.5,
              0.3
            ],
            "x": [
              "day 1",
              "day 1",
              "day 1",
              "day 1",
              "day 1",
              "day 1",
              "day 2",
              "day 2",
              "day 2",
              "day 2",
              "day 2",
              "day 2"
            ],
            "name": "kale",
            "marker": {
              "color": "#3D9970"
            },
            "type": "box"
          },
          {
            "y": [
              0.6,
              0.7,
              0.3,
              0.6,
              0,
              0.5,
              0.7,
              0.9,
              0.5,
              0.8,
              0.7,
              0.2
            ],
            "x": [
              "day 1",
              "day 1",
              "day 1",
              "day 1",
              "day 1",
              "day 1",
              "day 2",
              "day 2",
              "day 2",
              "day 2",
              "day 2",
              "day 2"
            ],
            "name": "radishes",
            "marker": {
              "color": "#FF4136"
            },
            "type": "box"
          },
          {
            "y": [
              0.1,
              0.3,
              0.1,
              0.9,
              0.6,
              0.6,
              0.9,
              1,
              0.3,
              0.6,
              0.8,
              0.5
            ],
            "x": [
              "day 1",
              "day 1",
              "day 1",
              "day 1",
              "day 1",
              "day 1",
              "day 2",
              "day 2",
              "day 2",
              "day 2",
              "day 2",
              "day 2"
            ],
            "name": "carrots",
            "marker": {
              "color": "#FF851B"
            },
            "type": "box"
          }
        ],
        "layout": {
          "yaxis": {
            "title": "normalized moisture",
            "zeroline": false
          },
          "boxmode": "group"
        }
      }
    </script>
    +

    Svgbob​

    +

    Example: (open in LiveCodes)

    +
    <div data-src="svgbob.svg"></div>
    <script type="application/diagram-svgbob" data-output="svgbob.svg">
      o-> Graphics Diagram

         0       3                          P *
          *-------*      +y                    \
       1 /|    2 /|       ^                     \
        *-+-----* |       |                v0    \       v3
        | |4    | |7      | ◄╮               *----\-----*
        | *-----|-*     ⤹ +-----> +x        /      v X   \
        |/      |/       / ⤴               /        o     \
        *-------*       v                 /                \
       5       6      +z              v1 *------------------* v2
    </script>
    +

    Vega​

    +

    The diagram syntax is Vega JSON specification.

    +

    Please note that the output is a non-interactive SVG element or image. The Vega library is not loaded in the result page, so any JavaScript functionality is not available.

    +

    Example: (open in LiveCodes)

    +
    <div data-src="vega.svg"></div>
    <script
      type="application/diagram-vega"
      data-output="vega.svg"
      src="https://vega.github.io/vega/examples/stacked-bar-chart.vg.json"
    ></script>
    +

    VegaLite​

    +

    The diagram syntax is Vega-Lite View JSON Specification.

    +

    Please note that the output is a non-interactive SVG element or image. The Vega-Lite library is not loaded in the result page, so any JavaScript functionality is not available.

    +

    Example: (open in LiveCodes)

    +
    <div data-src="vega-lite.svg"></div>
    <script
      type="application/diagram-vega-lite"
      data-output="vega-lite.svg"
      src="https://vega.github.io/vega-lite/examples/sequence_line_fold.vl.json"
    ></script>
    +

    WaveDrom​

    +

    The diagram syntax is WaveJSON format.

    +

    Example: (open in LiveCodes)

    +
    <div data-src="wavedrom.svg"></div>
    <script type="application/diagram-wavedrom" data-output="wavedrom.svg">
      { signal : [
        { name: "clk",  wave: "p......" },
        { name: "bus",  wave: "x.34.5x",   data: "head body tail" },
        { name: "wire", wave: "0.1..0." },
      ]}
    </script>
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/dot.html.md b/docs/languages/dot.html.md new file mode 100644 index 0000000..6c85a00 --- /dev/null +++ b/docs/languages/dot.html.md @@ -0,0 +1,130 @@ +# doT + +[doT](https://olado.github.io/doT/): The fastest + concise javascript template engine for Node.js and browsers. + +## Usage + +There are 2 modes for rendering: + +### Pre-rendered (Default) + +The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md). + +The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs. + +Example: This provides the value of the expression `name` + +```json title="Custom Settings" +{ + "template": { + "data": { + "name": "LiveCodes" + } + } +} +``` + +[Full example below](#pre-rendered) + +### Dynamic + +To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`. + +Example: + +```json title="Custom Settings" +{ + "template": { + "prerender": false + } +} +``` + +In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime. + +This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data. + +Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that. + +Example: + +```js title="Script Editor (JS)" +window.livecodes.templateData = { name: 'LiveCodes' }; +``` + +[Full example below](#dynamic-1) + +## Language Info + +### Name + +`dot` + +### Extension + +`.dot` + +### Editor + +`markup` + +## Compiler + +The official [doT compiler](https://www.npmjs.com/package/dot). + +### Version + +`dot`: v1.1.3 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `dot` are passed as a JSON object to the `doT.template` method during compile. Please check the [documentation](https://olado.github.io/doT/index.html) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +**Example:** + +```json title="Custom Settings" +{ + "dot": { + "varname": "data" + } +} +``` + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +### Pre-rendered + +export const config = { + markup: { language: 'dot', content: 'Hello, {{= it.name }}!' }, + customSettings: { template: { data: { name: 'LiveCodes' } } }, +}; + +export const params = { compiled: 'open' }; + + + +### Dynamic + +export const config2 = { + markup: { language: 'dot', content: 'Hello, {{= it.name }}!' }, + script: { + language: 'javascript', + content: 'window.livecodes.templateData = { name: "LiveCodes" };', + }, + customSettings: { template: { prerender: false } }, + activeEditor: 'script', +}; + + + +## Links + +- [Official website](https://olado.github.io/doT/) \ No newline at end of file diff --git a/docs/languages/dot/index.html b/docs/languages/dot/index.html new file mode 100644 index 0000000..6c944bf --- /dev/null +++ b/docs/languages/dot/index.html @@ -0,0 +1,61 @@ +doT | LiveCodes

    doT

    +

    doT: The fastest + concise javascript template engine for Node.js and browsers.

    +

    Usage​

    +

    There are 2 modes for rendering:

    +

    Pre-rendered (Default)​

    +

    The values of the expressions are evaluated and added to the template during compilation of the result page.

    +

    The values of all expressions should be supplied in advance using custom settings to the property template.data which accepts an object of key-value pairs.

    +

    Example: This provides the value of the expression name

    +
    Custom Settings
    {
      "template": {
        "data": {
          "name": "LiveCodes"
        }
      }
    }
    +

    Full example below

    +

    Dynamic​

    +

    To use this mode, the property template.prerender in custom settings should be set to false.

    +

    Example:

    +
    Custom Settings
    {
      "template": {
        "prerender": false
      }
    }
    +

    In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the result page runtime.

    +

    This can be achieved in JavaScript (or any language that compiles to it) by assigning window.livecodes.templateData to an object with the data.

    +

    Please note that template rendering occurs on page load, so the assignment must occur before that.

    +

    Example:

    +
    Script Editor (JS)
    window.livecodes.templateData = { name: 'LiveCodes' };
    +

    Full example below

    +

    Language Info​

    +

    Name​

    +

    dot

    +

    Extension​

    +

    .dot

    +

    Editor​

    +

    markup

    +

    Compiler​

    +

    The official doT compiler.

    +

    Version​

    +

    dot: v1.1.3

    +

    Code Formatting​

    +

    Using Prettier.

    +

    Custom Settings​

    +

    Custom settings added to the property dot are passed as a JSON object to the doT.template method during compile. Please check the documentation for full reference.

    +

    Please note that custom settings should be valid JSON (i.e. functions are not allowed).

    +

    Example:

    +
    Custom Settings
    {
      "dot": {
        "varname": "data"
      }
    }
    +

    Example Usage​

    + +

    Pre-rendered​

    + + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "dot",
          "content": "Hello, {{= it.name }}!"
        },
        "customSettings": {
          "template": {
            "data": {
              "name": "LiveCodes"
            }
          }
        }
      },
      "params": {
        "compiled": "open"
      }
    };
    createPlayground('#container', options);

    +

    Dynamic​

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "dot",
          "content": "Hello, {{= it.name }}!"
        },
        "script": {
          "language": "javascript",
          "content": "window.livecodes.templateData = { name: \"LiveCodes\" };"
        },
        "customSettings": {
          "template": {
            "prerender": false
          }
        },
        "activeEditor": "script"
      }
    };
    createPlayground('#container', options);

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/ejs.html.md b/docs/languages/ejs.html.md new file mode 100644 index 0000000..bc79ee1 --- /dev/null +++ b/docs/languages/ejs.html.md @@ -0,0 +1,130 @@ +# EJS + +[Embedded JavaScript templating.](https://ejs.co/) + +## Usage + +There are 2 modes for rendering: + +### Pre-rendered (Default) + +The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md). + +The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs. + +Example: This provides the value of the expression `name` + +```json title="Custom Settings" +{ + "template": { + "data": { + "name": "LiveCodes" + } + } +} +``` + +[Full example below](#pre-rendered) + +### Dynamic + +To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`. + +Example: + +```json title="Custom Settings" +{ + "template": { + "prerender": false + } +} +``` + +In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime. + +This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data. + +Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that. + +Example: + +```js title="Script Editor (JS)" +window.livecodes.templateData = { name: 'LiveCodes' }; +``` + +[Full example below](#dynamic-1) + +## Language Info + +### Name + +`ejs` + +### Extension + +`.ejs` + +### Editor + +`markup` + +## Compiler + +The official [EJS compiler](https://www.npmjs.com/package/ejs). + +### Version + +`ejs`: v3.1.10 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `ejs` are passed as a JSON object to the [`compile`](https://ejs.co/#docs) method during compile. Please check the [documentation](https://ejs.co/#docs) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +**Example:** + +```json title="Custom Settings" +{ + "ejs": { + "delimiter": "%" + } +} +``` + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +### Pre-rendered + +export const config = { + markup: { language: 'ejs', content: 'Hello <%= name %>!' }, + customSettings: { template: { data: { name: 'LiveCodes' } } }, +}; + +export const params = { compiled: 'open' }; + + + +### Dynamic + +export const config2 = { + markup: { language: 'ejs', content: 'Hello <%= name %>!' }, + script: { + language: 'javascript', + content: 'window.livecodes.templateData = { name: "LiveCodes" };', + }, + customSettings: { template: { prerender: false } }, + activeEditor: 'script', +}; + + + +## Links + +- [Official website](https://ejs.co/) \ No newline at end of file diff --git a/docs/languages/ejs/index.html b/docs/languages/ejs/index.html new file mode 100644 index 0000000..3138c4a --- /dev/null +++ b/docs/languages/ejs/index.html @@ -0,0 +1,61 @@ +EJS | LiveCodes

    EJS

    +

    Embedded JavaScript templating.

    +

    Usage​

    +

    There are 2 modes for rendering:

    +

    Pre-rendered (Default)​

    +

    The values of the expressions are evaluated and added to the template during compilation of the result page.

    +

    The values of all expressions should be supplied in advance using custom settings to the property template.data which accepts an object of key-value pairs.

    +

    Example: This provides the value of the expression name

    +
    Custom Settings
    {
      "template": {
        "data": {
          "name": "LiveCodes"
        }
      }
    }
    +

    Full example below

    +

    Dynamic​

    +

    To use this mode, the property template.prerender in custom settings should be set to false.

    +

    Example:

    +
    Custom Settings
    {
      "template": {
        "prerender": false
      }
    }
    +

    In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the result page runtime.

    +

    This can be achieved in JavaScript (or any language that compiles to it) by assigning window.livecodes.templateData to an object with the data.

    +

    Please note that template rendering occurs on page load, so the assignment must occur before that.

    +

    Example:

    +
    Script Editor (JS)
    window.livecodes.templateData = { name: 'LiveCodes' };
    +

    Full example below

    +

    Language Info​

    +

    Name​

    +

    ejs

    +

    Extension​

    +

    .ejs

    +

    Editor​

    +

    markup

    +

    Compiler​

    +

    The official EJS compiler.

    +

    Version​

    +

    ejs: v3.1.10

    +

    Code Formatting​

    +

    Using Prettier.

    +

    Custom Settings​

    +

    Custom settings added to the property ejs are passed as a JSON object to the compile method during compile. Please check the documentation for full reference.

    +

    Please note that custom settings should be valid JSON (i.e. functions are not allowed).

    +

    Example:

    +
    Custom Settings
    {
      "ejs": {
        "delimiter": "%"
      }
    }
    +

    Example Usage​

    + +

    Pre-rendered​

    + + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "ejs",
          "content": "Hello <%= name %>!"
        },
        "customSettings": {
          "template": {
            "data": {
              "name": "LiveCodes"
            }
          }
        }
      },
      "params": {
        "compiled": "open"
      }
    };
    createPlayground('#container', options);

    +

    Dynamic​

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "ejs",
          "content": "Hello <%= name %>!"
        },
        "script": {
          "language": "javascript",
          "content": "window.livecodes.templateData = { name: \"LiveCodes\" };"
        },
        "customSettings": {
          "template": {
            "prerender": false
          }
        },
        "activeEditor": "script"
      }
    };
    createPlayground('#container', options);

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/eta.html.md b/docs/languages/eta.html.md new file mode 100644 index 0000000..548f8a4 --- /dev/null +++ b/docs/languages/eta.html.md @@ -0,0 +1,120 @@ +# Eta + +[Eta](https://eta.js.org/) is an embedded JS template engine for Node, Deno, and the browser. Lighweight, fast, and pluggable. Written in TypeScript. + +## Usage + +There are 2 modes for rendering: + +### Pre-rendered (Default) + +The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md). + +The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs. + +Example: This provides the value of the expression `name` + +```json title="Custom Settings" +{ + "template": { + "data": { + "name": "LiveCodes" + } + } +} +``` + +[Full example below](#pre-rendered) + +### Dynamic + +To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`. + +Example: + +```json title="Custom Settings" +{ + "template": { + "prerender": false + } +} +``` + +In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime. + +This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data. + +Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that. + +Example: + +```js title="Script Editor (JS)" +window.livecodes.templateData = { name: 'LiveCodes' }; +``` + +[Full example below](#dynamic-1) + +## Language Info + +### Name + +`eta` + +### Extension + +`.eta` + +### Editor + +`markup` + +## Compiler + +The official [Eta compiler](https://www.npmjs.com/package/eta). + +### Version + +`eta`: v3.4.0 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `eta` are passed as a JSON object to the [`Eta.render`](https://eta.js.org/docs/api/rendering) method during compile. Please check the [documentation](https://eta.js.org/docs/api/configuration) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +**Example:** + +```json title="Custom Settings" +{ + "eta": { + "varName": "data" + } +} +``` + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +### Pre-rendered + +export const config = {markup: {language: 'eta', content: 'Hello <%= it.name %>!'}, customSettings: {"template": {"data": {"name": "LiveCodes"}}}}; + +export const params = {compiled: 'open'}; + + + +### Dynamic + +export const config2 = {markup: {language: 'eta', content: 'Hello <%= it.name %>!'}, script: {language: 'javascript', content: 'window.livecodes.templateData = { name: "LiveCodes" };'}, customSettings: {"template": {"prerender": false}}, activeEditor: 'script'}; + + + +## Links + +- [Official website](https://eta.js.org/) +- [Documentation](https://eta.js.org/docs/learn) \ No newline at end of file diff --git a/docs/languages/eta/index.html b/docs/languages/eta/index.html new file mode 100644 index 0000000..7b8908f --- /dev/null +++ b/docs/languages/eta/index.html @@ -0,0 +1,62 @@ +Eta | LiveCodes

    Eta

    +

    Eta is an embedded JS template engine for Node, Deno, and the browser. Lighweight, fast, and pluggable. Written in TypeScript.

    +

    Usage​

    +

    There are 2 modes for rendering:

    +

    Pre-rendered (Default)​

    +

    The values of the expressions are evaluated and added to the template during compilation of the result page.

    +

    The values of all expressions should be supplied in advance using custom settings to the property template.data which accepts an object of key-value pairs.

    +

    Example: This provides the value of the expression name

    +
    Custom Settings
    {
      "template": {
        "data": {
          "name": "LiveCodes"
        }
      }
    }
    +

    Full example below

    +

    Dynamic​

    +

    To use this mode, the property template.prerender in custom settings should be set to false.

    +

    Example:

    +
    Custom Settings
    {
      "template": {
        "prerender": false
      }
    }
    +

    In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the result page runtime.

    +

    This can be achieved in JavaScript (or any language that compiles to it) by assigning window.livecodes.templateData to an object with the data.

    +

    Please note that template rendering occurs on page load, so the assignment must occur before that.

    +

    Example:

    +
    Script Editor (JS)
    window.livecodes.templateData = { name: 'LiveCodes' };
    +

    Full example below

    +

    Language Info​

    +

    Name​

    +

    eta

    +

    Extension​

    +

    .eta

    +

    Editor​

    +

    markup

    +

    Compiler​

    +

    The official Eta compiler.

    +

    Version​

    +

    eta: v3.4.0

    +

    Code Formatting​

    +

    Using Prettier.

    +

    Custom Settings​

    +

    Custom settings added to the property eta are passed as a JSON object to the Eta.render method during compile. Please check the documentation for full reference.

    +

    Please note that custom settings should be valid JSON (i.e. functions are not allowed).

    +

    Example:

    +
    Custom Settings
    {
      "eta": {
        "varName": "data"
      }
    }
    +

    Example Usage​

    + +

    Pre-rendered​

    + + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "eta",
          "content": "Hello <%= it.name %>!"
        },
        "customSettings": {
          "template": {
            "data": {
              "name": "LiveCodes"
            }
          }
        }
      },
      "params": {
        "compiled": "open"
      }
    };
    createPlayground('#container', options);

    +

    Dynamic​

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "eta",
          "content": "Hello <%= it.name %>!"
        },
        "script": {
          "language": "javascript",
          "content": "window.livecodes.templateData = { name: \"LiveCodes\" };"
        },
        "customSettings": {
          "template": {
            "prerender": false
          }
        },
        "activeEditor": "script"
      }
    };
    createPlayground('#container', options);

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/fennel.html.md b/docs/languages/fennel.html.md new file mode 100644 index 0000000..fb790b2 --- /dev/null +++ b/docs/languages/fennel.html.md @@ -0,0 +1,60 @@ +# Fennel + +[Fennel](https://fennel-lang.org/) is a programming language that brings together the speed, simplicity, and reach of [Lua](https://www.lua.org/) with the flexibility of a [lisp syntax and macro system](). + +Fennel code is compiled to Lua, which then runs in the browser using [Fengari](https://fengari.io/). See documentation for Lua language support in LiveCodes [here](./lua.html.md). + +:::info Note + +Lisp language family supported in LiveCodes includes [Common Lisp](./commonlisp.html.md), [Scheme](./scheme.html.md), [ClojureScript](./clojurescript.html.md) and [Fennel](./fennel.html.md). + +::: + +## Usage + +JavaScript interoperability and DOM access is achieved using [`"js"` module](https://github.com/fengari-lua/fengari-interop). + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +This example demonstrates usage, JavaScript interoperability and DOM access: + + + +## Language Info + +### Name + +`fennel` + +### Extension + +`.fnl` + +### Editor + +`script` + +## Compiler + +[Fennel](https://fennel-lang.org/) + +### Version + +Fennel v1.3.0 + +## Code Formatting + +Using [Parinfer](https://shaunlebron.github.io/parinfer/). + +## Starter Template + +https://livecodes.io/?template=fennel + +## Links + +- [Fennel](https://fennel-lang.org/) +- [Fennel tutorial](https://fennel-lang.org/tutorial) +- [Lua](https://www.lua.org/) +- [Fengari](https://fengari.io/) +- [lua](./lua.html.md) in LiveCodes +- [Common Lisp](./commonlisp.html.md) in LiveCodes \ No newline at end of file diff --git a/docs/languages/fennel/index.html b/docs/languages/fennel/index.html new file mode 100644 index 0000000..7318176 --- /dev/null +++ b/docs/languages/fennel/index.html @@ -0,0 +1,43 @@ +Fennel | LiveCodes

    Fennel

    +

    Fennel is a programming language that brings together the speed, simplicity, and reach of Lua with the flexibility of a lisp syntax and macro system.

    +

    Fennel code is compiled to Lua, which then runs in the browser using Fengari. See documentation for Lua language support in LiveCodes here.

    +
    Note

    Lisp language family supported in LiveCodes includes Common Lisp, Scheme, ClojureScript and Fennel.

    +

    Usage​

    +

    JavaScript interoperability and DOM access is achieved using "js" module.

    + +

    This example demonstrates usage, JavaScript interoperability and DOM access:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "fennel"
    };
    createPlayground('#container', options);

    +

    Language Info​

    +

    Name​

    +

    fennel

    +

    Extension​

    +

    .fnl

    +

    Editor​

    +

    script

    +

    Compiler​

    +

    Fennel

    +

    Version​

    +

    Fennel v1.3.0

    +

    Code Formatting​

    +

    Using Parinfer.

    +

    Starter Template​

    +

    https://livecodes.io/?template=fennel

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/flow.html.md b/docs/languages/flow.html.md new file mode 100644 index 0000000..e705a28 --- /dev/null +++ b/docs/languages/flow.html.md @@ -0,0 +1,3 @@ +# Flow + +TODO... \ No newline at end of file diff --git a/docs/languages/flow/index.html b/docs/languages/flow/index.html new file mode 100644 index 0000000..a8d628f --- /dev/null +++ b/docs/languages/flow/index.html @@ -0,0 +1,12 @@ +Flow | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/gleam.html.md b/docs/languages/gleam.html.md new file mode 100644 index 0000000..f330e30 --- /dev/null +++ b/docs/languages/gleam.html.md @@ -0,0 +1,257 @@ +# Gleam + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +[Gleam](https://gleam.run) is a friendly language for building type-safe systems that scale! + +Gleam is a statically-typed functional programming language, which compiles to Erlang or JavaScript. + +## Usage + +LiveCodes compiles Gleam code to JavaScript using the WebAssembly (wasm) version of the [official Gleam compiler](https://github.com/gleam-lang/gleam). The compiled JavaScript code is then executed in the context of the [result page](../features/result.html.md). + +The compiled JavaScript code can be inspected in the [Compiled Code Viewer](../features/compiled-code.html.md) in the [Tools Pane](../features/tools-pane.html.md) (below the result page). Console output is shown in the [integrated console](../features/console.html.md). + +Please note that the compiler messages (e.g. errors and warnings) are shown in the browser console (not the integrated console). + +### Standard Library + +[Gleam's standard library](https://hexdocs.pm/gleam_stdlib/) in addition to the following packages are available for use and can be imported as usual with no additional configuration: + +- [gleam/crypto](https://hexdocs.pm/gleam_crypto/) +- [gleam/erlang](https://hexdocs.pm/gleam_erlang/) +- [gleam/fetch](https://hexdocs.pm/gleam_fetch/) +- [gleam/http](https://hexdocs.pm/gleam_http/) +- [gleam/javascript](https://hexdocs.pm/gleam_javascript/) +- [gleam/json](https://hexdocs.pm/gleam_json/) +- [gleam/otp](https://hexdocs.pm/gleam_otp/) + +Demo: + +export const stdlibConfig = { + activeEditor: 'script', + script: { + language: 'gleam', + content: `import gleam/io\nimport gleam/string\n\npub fn main() {\n "hello world!"\n |> string.uppercase\n |> io.println\n}`, + }, + tools: { status: 'open' }, +}; + + + +### Custom Modules + +Custom modules can be used in Gleam code. These modules have to be precompiled (to JavaScript) by the Gleam compiler. URLs to the compiled JavaScript code and either the Gleam source code or URLs to the Gleam source code are needed to be able to import custom modules. + +This is an example for a repo with precompiled Gleam modules: +https://github.com/live-codes/gleam-precompiled + +Please refer to [Gleam CLI docs](https://gleam.run/writing-gleam/command-line-reference/) for details about adding and building packages. + +Note that the built code was committed to the repo by clearing out `.gitignore` file. + +The built code can then by accessed from a [CDN that mirrors GitHub](https://www.jsdelivr.com/?docs=gh), like this: +`https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@main/...` + +Built modules can then be declared in [custom settings](../advanced/custom-settings.html.md) (Project menu → Custom Settings), under the `gleam` property, by adding a `modules` property. + +The `modules` property is an object that has the module name as the key. The value is an object with the following properties: + +- `srcUrl`: the URL to the Gleam source code of the module. +- `src`: optionally use this instead of `srcUrl` to specify the Gleam source code of the module. +- `compiledUrl`: the URL to the compiled JavaScript code of the module. + +Example: + +```json title="Custom Settings" +{ + "gleam": { + "modules": { + "plinth/browser/document": { + "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/plinth/src/plinth/browser/document.gleam", + "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/plinth/plinth/browser/document.mjs" + } + } + } +} +``` + +See the [demo below](#example-usage) ([open in LiveCodes](https://livecodes.io/?template=gleam)). + +If `compiledUrl` property is not specified, the JavaScript module is imported from this URL pattern: `{module_name}.mjs` (example: `plinth/browser/document.mjs`). +This can then be [mapped (using import maps)](../features/module-resolution.html.md)#custom-module-resolution) in [custom settings](../advanced/custom-settings.html.md) (Project menu → Custom Settings) to the full URL of the compiled JavaScript code. + +Example: + +```json title="Custom Settings" +{ + "gleam": { + "modules": { + "some_pkg/some_module": { + "srcUrl": "https://example.com/packages/some_pkg/some_module.gleam" + }, + "another_pkg/another_module": { + "srcUrl": "https://example.com/packages/another_pkg/another_module.gleam" + } + } + }, + "imports": { + // map a specific module + "some_pkg/some_module.mjs": "https://example.com/compiled/some_pkg/some_module.mjs", + // or map a whole directory + "another_pkg/": "https://example.com/compiled/another_pkg/" + } +} +``` + +### Externals + +[External functions](https://tour.gleam.run/advanced-features/externals/) written in JavaScript can also be used. An external function has the `@external` attribute on it. It needs to specify a "relative" URL specifying the location of the external code. This URL is [mapped (using import maps)](../features/module-resolution.html.md)#custom-module-resolution) in [custom settings](../advanced/custom-settings.html.md) (Project menu → Custom Settings) to the full URL of the script that contains the code. + +**Example:** + +The following script is hosted on this URL: +https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/demo/greet.js + +```js title="greet.js" +export const hello = (str) => `Hello, ${str}!`; +``` + +Use this in custom settings: + +```json title="Custom Settings" +{ + "imports": { + "my_pkg/greet.js": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/demo/greet.js" + } +} +``` + +`"my_pkg/greet.js"` can then be used in the `@external` attribute. + +```js title="Gleam" +import gleam/io + +// highlight-next-line +@external(javascript, "my_pkg/greet.js", "hello") +// highlight-next-line +pub fn hello(str: String) -> String + +pub fn main() { + io.println(hello("from JavaScript")) +} +``` + +Demo: + +export const externalsConfig = { + activeEditor: 'script', + script: { + language: 'gleam', + content: + 'import gleam/io\n\n@external(javascript, "my_pkg/greet.js", "hello")\npub fn hello(str: String) -> String\n\npub fn main() {\n io.println(hello("from JavaScript"))\n}', + }, + tools: { status: 'open' }, + customSettings: { + imports: { + 'my_pkg/greet.js': + 'https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/demo/greet.js', + }, + }, +}; + + + +:::tip + +[Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) can be used to avoid having to host the external code online. LiveCodes enables [creating data URLs](../features/data-urls.html.md) easily. + +Example: +The import map in the previous example can be rewritten like this: + +```json title="Custom Settings" +{ + "imports": { + "my_pkg/greet.js": "data:text/javascript;charset=UTF-8;base64,ZXhwb3J0IGNvbnN0IGhlbGxvID0gKHN0cikgPT4gYEhlbGxvLCAke3N0cn0hYDs=" + } +} +``` + +::: + +### NPM Modules + +Modules published to [npm](https://www.npmjs.com/), [deno.land/x](https://deno.land/x) and [jsr.io](https://jsr.io/) can be imported as external functions. There is no need to specify import maps. The package/module name is prefixed with a modifier to specify the source (e.g. `npm:uuid` to import the [`uuid`](https://www.npmjs.com/package/uuid) npm module). + +See list of supported CDNs and the respective modifiers in the section about [module resolution](../features/module-resolution.html.md)#cdn-providers). + +Example: + +```js +import gleam/io + +// npm module (https://www.npmjs.com/package/uuid) +@external(javascript, "npm:uuid", "v4") +pub fn uuid() -> String + +// jsr module (https://jsr.io/@kwhinnery/yassify) +@external(javascript, "jsr:@kwhinnery/yassify", "yassify") +pub fn yassify(str: String) -> String + +pub fn main() { + io.println(uuid()) + io.println(yassify("Hello, World!")) +} +``` + +Demo: + +export const npmConfig = { + activeEditor: 'script', + script: { + language: 'gleam', + content: + 'import gleam/io\n\n// npm module (https://www.npmjs.com/package/uuid)\n@external(javascript, "npm:uuid", "v4")\npub fn uuid() -> String\n\n// jsr module (https://jsr.io/@kwhinnery/yassify)\n@external(javascript, "jsr:@kwhinnery/yassify", "yassify")\npub fn yassify(str: String) -> String\n\npub fn main() {\n io.println(uuid())\n io.println(yassify("Hello, World!"))\n}\n', + }, + tools: { status: 'open' }, +}; + + + +### Example Usage + +This is the Gleam starter template demonstrating the use of standard library, custom modules, external functions and npm modules. + + + +## Language Info + +### Name + +`gleam` + +### Extension + +`.gleam` + +### Editor + +`script` + +## Compiler + +The wasm version of the [official Gleam compiler](https://github.com/gleam-lang/gleam). + +### Version + +`v1.3.0-rc1` + +## Starter Template + +https://livecodes.io/?template=gleam + +## Links + +- [Gleam](https://gleam.run) +- [Gleam documentation](https://gleam.run/documentation/) +- [Gleam language tour](https://tour.gleam.run/) \ No newline at end of file diff --git a/docs/languages/gleam/index.html b/docs/languages/gleam/index.html new file mode 100644 index 0000000..eac43fd --- /dev/null +++ b/docs/languages/gleam/index.html @@ -0,0 +1,99 @@ +Gleam | LiveCodes

    Gleam

    + +

    Gleam is a friendly language for building type-safe systems that scale!

    +

    Gleam is a statically-typed functional programming language, which compiles to Erlang or JavaScript.

    +

    Usage​

    +

    LiveCodes compiles Gleam code to JavaScript using the WebAssembly (wasm) version of the official Gleam compiler. The compiled JavaScript code is then executed in the context of the result page.

    +

    The compiled JavaScript code can be inspected in the Compiled Code Viewer in the Tools Pane (below the result page). Console output is shown in the integrated console.

    +

    Please note that the compiler messages (e.g. errors and warnings) are shown in the browser console (not the integrated console).

    +

    Standard Library​

    +

    Gleam's standard library in addition to the following packages are available for use and can be imported as usual with no additional configuration:

    + +

    Demo:

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "activeEditor": "script",
        "script": {
          "language": "gleam",
          "content": "import gleam/io\nimport gleam/string\n\npub fn main() {\n  \"hello world!\"\n  |> string.uppercase\n  |> io.println\n}"
        },
        "tools": {
          "status": "open"
        }
      }
    };
    createPlayground('#container', options);

    +

    Custom Modules​

    +

    Custom modules can be used in Gleam code. These modules have to be precompiled (to JavaScript) by the Gleam compiler. URLs to the compiled JavaScript code and either the Gleam source code or URLs to the Gleam source code are needed to be able to import custom modules.

    +

    This is an example for a repo with precompiled Gleam modules: +https://github.com/live-codes/gleam-precompiled

    +

    Please refer to Gleam CLI docs for details about adding and building packages.

    +

    Note that the built code was committed to the repo by clearing out .gitignore file.

    +

    The built code can then by accessed from a CDN that mirrors GitHub, like this: +https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@main/...

    +

    Built modules can then be declared in custom settings (Project menu → Custom Settings), under the gleam property, by adding a modules property.

    +

    The modules property is an object that has the module name as the key. The value is an object with the following properties:

    +
      +
    • srcUrl: the URL to the Gleam source code of the module.
      • +
    • src: optionally use this instead of srcUrl to specify the Gleam source code of the module.
      • +
    • compiledUrl: the URL to the compiled JavaScript code of the module.
      • +
    +

    Example:

    +
    Custom Settings
    {
      "gleam": {
        "modules": {
          "plinth/browser/document": {
            "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/plinth/src/plinth/browser/document.gleam",
            "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/plinth/plinth/browser/document.mjs"
          }
        }
      }
    }
    +

    See the demo below (open in LiveCodes).

    +

    If compiledUrl property is not specified, the JavaScript module is imported from this URL pattern: {module_name}.mjs (example: plinth/browser/document.mjs). +This can then be mapped (using import maps) in custom settings (Project menu → Custom Settings) to the full URL of the compiled JavaScript code.

    +

    Example:

    +
    Custom Settings
    {
      "gleam": {
        "modules": {
          "some_pkg/some_module": {
            "srcUrl": "https://example.com/packages/some_pkg/some_module.gleam"
          },
          "another_pkg/another_module": {
            "srcUrl": "https://example.com/packages/another_pkg/another_module.gleam"
          }
        }
      },
      "imports": {
        // map a specific module
        "some_pkg/some_module.mjs": "https://example.com/compiled/some_pkg/some_module.mjs",
        // or map a whole directory
        "another_pkg/": "https://example.com/compiled/another_pkg/"
      }
    }
    +

    Externals​

    +

    External functions written in JavaScript can also be used. An external function has the @external attribute on it. It needs to specify a "relative" URL specifying the location of the external code. This URL is mapped (using import maps) in custom settings (Project menu → Custom Settings) to the full URL of the script that contains the code.

    +

    Example:

    +

    The following script is hosted on this URL: +https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/demo/greet.js

    +
    greet.js
    export const hello = (str) => `Hello, ${str}!`;
    +

    Use this in custom settings:

    +
    Custom Settings
    {
      "imports": {
        "my_pkg/greet.js": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/demo/greet.js"
      }
    }
    +

    "my_pkg/greet.js" can then be used in the @external attribute.

    +
    Gleam
    import gleam/io

    @external(javascript, "my_pkg/greet.js", "hello")
    pub fn hello(str: String) -> String

    pub fn main() {
     io.println(hello("from JavaScript"))
    }
    +

    Demo:

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "activeEditor": "script",
        "script": {
          "language": "gleam",
          "content": "import gleam/io\n\n@external(javascript, \"my_pkg/greet.js\", \"hello\")\npub fn hello(str: String) -> String\n\npub fn main() {\n io.println(hello(\"from JavaScript\"))\n}"
        },
        "tools": {
          "status": "open"
        },
        "customSettings": {
          "imports": {
            "my_pkg/greet.js": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/demo/greet.js"
          }
        }
      }
    };
    createPlayground('#container', options);

    +
    tip

    Data URLs can be used to avoid having to host the external code online. LiveCodes enables creating data URLs easily.

    Example: +The import map in the previous example can be rewritten like this:

    Custom Settings
    {
      "imports": {
        "my_pkg/greet.js": "data:text/javascript;charset=UTF-8;base64,ZXhwb3J0IGNvbnN0IGhlbGxvID0gKHN0cikgPT4gYEhlbGxvLCAke3N0cn0hYDs="
      }
    }
    +

    NPM Modules​

    +

    Modules published to npm, deno.land/x and jsr.io can be imported as external functions. There is no need to specify import maps. The package/module name is prefixed with a modifier to specify the source (e.g. npm:uuid to import the uuid npm module).

    +

    See list of supported CDNs and the respective modifiers in the section about module resolution.

    +

    Example:

    +
    import gleam/io

    // npm module (https://www.npmjs.com/package/uuid)
    @external(javascript, "npm:uuid", "v4")
    pub fn uuid() -> String

    // jsr module (https://jsr.io/@kwhinnery/yassify)
    @external(javascript, "jsr:@kwhinnery/yassify", "yassify")
    pub fn yassify(str: String) -> String

    pub fn main() {
     io.println(uuid())
     io.println(yassify("Hello, World!"))
    }
    +

    Demo:

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "activeEditor": "script",
        "script": {
          "language": "gleam",
          "content": "import gleam/io\n\n// npm module (https://www.npmjs.com/package/uuid)\n@external(javascript, \"npm:uuid\", \"v4\")\npub fn uuid() -> String\n\n// jsr module (https://jsr.io/@kwhinnery/yassify)\n@external(javascript, \"jsr:@kwhinnery/yassify\", \"yassify\")\npub fn yassify(str: String) -> String\n\npub fn main() {\n io.println(uuid())\n io.println(yassify(\"Hello, World!\"))\n}\n"
        },
        "tools": {
          "status": "open"
        }
      }
    };
    createPlayground('#container', options);

    +

    Example Usage​

    +

    This is the Gleam starter template demonstrating the use of standard library, custom modules, external functions and npm modules.

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "gleam"
    };
    createPlayground('#container', options);

    +

    Language Info​

    +

    Name​

    +

    gleam

    +

    Extension​

    +

    .gleam

    +

    Editor​

    +

    script

    +

    Compiler​

    +

    The wasm version of the official Gleam compiler.

    +

    Version​

    +

    v1.3.0-rc1

    +

    Starter Template​

    +

    https://livecodes.io/?template=gleam

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/go.html.md b/docs/languages/go.html.md new file mode 100644 index 0000000..d652ba0 --- /dev/null +++ b/docs/languages/go.html.md @@ -0,0 +1,3 @@ +# Go (Golang) + +TODO... \ No newline at end of file diff --git a/docs/languages/go/index.html b/docs/languages/go/index.html new file mode 100644 index 0000000..46f3e9c --- /dev/null +++ b/docs/languages/go/index.html @@ -0,0 +1,12 @@ +Go (Golang) | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/haml.html.md b/docs/languages/haml.html.md new file mode 100644 index 0000000..b71d4d3 --- /dev/null +++ b/docs/languages/haml.html.md @@ -0,0 +1,121 @@ +# Haml + +[Haml](https://haml.info/) compiler for client side javascript view templates using [clientside-haml-js](https://github.com/uglyog/clientside-haml-js). + +## Usage + +There are 2 modes for rendering: + +### Pre-rendered (Default) + +The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md). + +The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs. + +Example: This provides the value of the expression `name` + +```json title="Custom Settings" +{ + "template": { + "data": { + "name": "LiveCodes" + } + } +} +``` + +[Full example below](#pre-rendered) + +### Dynamic + +To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`. + +Example: + +```json title="Custom Settings" +{ + "template": { + "prerender": false + } +} +``` + +In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime. + +This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data. + +Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that. + +Example: + +```js title="Script Editor (JS)" +window.livecodes.templateData = { name: 'LiveCodes' }; +``` + +[Full example below](#dynamic-1) + +## Language Info + +### Name + +`haml` + +### Extension + +`.haml` + +### Editor + +`markup` + +## Compiler + +[clientside-haml-js](https://github.com/uglyog/clientside-haml-js). + +### Version + +`clientside-haml-js`: v5.4 + +## Code Formatting + +Not supported. + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `haml` are passed as a JSON object to the [`haml.compileHaml`](https://github.com/uglyog/clientside-haml-js#client-side-haml-api) method during compile. Please check the [documentation](https://github.com/uglyog/clientside-haml-js#client-side-haml-api) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +### Pre-rendered + +export const config = { + markup: { language: 'haml', content: '%p Hello, #{name}!' }, + customSettings: { template: { data: { name: 'LiveCodes' } } }, +}; + +export const params = { compiled: 'open' }; + + + +### Dynamic + +export const config2 = { + markup: { language: 'haml', content: '%p Hello, #{name}!' }, + script: { + language: 'javascript', + content: 'window.livecodes.templateData = { name: "LiveCodes" };', + }, + customSettings: { template: { prerender: false } }, + activeEditor: 'script', +}; + + + +## Links + +- [Haml](https://haml.info/) +- [clientside-haml-js](https://github.com/uglyog/clientside-haml-js) \ No newline at end of file diff --git a/docs/languages/haml/index.html b/docs/languages/haml/index.html new file mode 100644 index 0000000..0e2cb22 --- /dev/null +++ b/docs/languages/haml/index.html @@ -0,0 +1,60 @@ +Haml | LiveCodes

    Haml

    +

    Haml compiler for client side javascript view templates using clientside-haml-js.

    +

    Usage​

    +

    There are 2 modes for rendering:

    +

    Pre-rendered (Default)​

    +

    The values of the expressions are evaluated and added to the template during compilation of the result page.

    +

    The values of all expressions should be supplied in advance using custom settings to the property template.data which accepts an object of key-value pairs.

    +

    Example: This provides the value of the expression name

    +
    Custom Settings
    {
      "template": {
        "data": {
          "name": "LiveCodes"
        }
      }
    }
    +

    Full example below

    +

    Dynamic​

    +

    To use this mode, the property template.prerender in custom settings should be set to false.

    +

    Example:

    +
    Custom Settings
    {
      "template": {
        "prerender": false
      }
    }
    +

    In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the result page runtime.

    +

    This can be achieved in JavaScript (or any language that compiles to it) by assigning window.livecodes.templateData to an object with the data.

    +

    Please note that template rendering occurs on page load, so the assignment must occur before that.

    +

    Example:

    +
    Script Editor (JS)
    window.livecodes.templateData = { name: 'LiveCodes' };
    +

    Full example below

    +

    Language Info​

    +

    Name​

    +

    haml

    +

    Extension​

    +

    .haml

    +

    Editor​

    +

    markup

    +

    Compiler​

    +

    clientside-haml-js.

    +

    Version​

    +

    clientside-haml-js: v5.4

    +

    Code Formatting​

    +

    Not supported.

    +

    Custom Settings​

    +

    Custom settings added to the property haml are passed as a JSON object to the haml.compileHaml method during compile. Please check the documentation for full reference.

    +

    Please note that custom settings should be valid JSON (i.e. functions are not allowed).

    +

    Example Usage​

    + +

    Pre-rendered​

    + + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "haml",
          "content": "%p Hello, #{name}!"
        },
        "customSettings": {
          "template": {
            "data": {
              "name": "LiveCodes"
            }
          }
        }
      },
      "params": {
        "compiled": "open"
      }
    };
    createPlayground('#container', options);

    +

    Dynamic​

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "haml",
          "content": "%p Hello, #{name}!"
        },
        "script": {
          "language": "javascript",
          "content": "window.livecodes.templateData = { name: \"LiveCodes\" };"
        },
        "customSettings": {
          "template": {
            "prerender": false
          }
        },
        "activeEditor": "script"
      }
    };
    createPlayground('#container', options);

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/handlebars.html.md b/docs/languages/handlebars.html.md new file mode 100644 index 0000000..ca2bd53 --- /dev/null +++ b/docs/languages/handlebars.html.md @@ -0,0 +1,131 @@ +# Handlebars + +[Handlebars](https://handlebarsjs.com/): Minimal templating on steroids. + +## Usage + +There are 2 modes for rendering: + +### Pre-rendered (Default) + +The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md). + +The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs. + +Example: This provides the value of the expression `name` + +```json title="Custom Settings" +{ + "template": { + "data": { + "name": "LiveCodes" + } + } +} +``` + +[Full example below](#pre-rendered) + +### Dynamic + +To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`. + +Example: + +```json title="Custom Settings" +{ + "template": { + "prerender": false + } +} +``` + +In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime. + +This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data. + +Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that. + +Example: + +```js title="Script Editor (JS)" +window.livecodes.templateData = { name: 'LiveCodes' }; +``` + +[Full example below](#dynamic-1) + +## Language Info + +### Name + +`handlebars` + +### Extensions + +`.hbs`, `.handlebars` + +### Editor + +`markup` + +## Compiler + +The official [handlebars compiler](https://www.npmjs.com/package/handlebars). + +### Version + +`handlebars`: v4.7.8 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `handlebars` are passed as a JSON object to the [`compile`](https://handlebarsjs.com/api-reference/compilation.html#handlebars-compile-template-options) method during compile. Please check the [documentation](https://handlebarsjs.com/api-reference/compilation.html#handlebars-compile-template-options) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +**Example:** + +```json title="Custom Settings" +{ + "handlebars": { + "preventIndent": true + } +} +``` + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +### Pre-rendered + +export const config = { + markup: { language: 'handlebars', content: 'Hello {{name}}!' }, + customSettings: { template: { data: { name: 'LiveCodes' } } }, +}; + +export const params = { compiled: 'open' }; + + + +### Dynamic + +export const config2 = { + markup: { language: 'handlebars', content: 'Hello {{name}}!' }, + script: { + language: 'javascript', + content: 'window.livecodes.templateData = { name: "LiveCodes" };', + }, + customSettings: { template: { prerender: false } }, + activeEditor: 'script', +}; + + + +## Links + +- [Official website](https://handlebarsjs.com/) +- [Language guide](https://handlebarsjs.com/guide/) \ No newline at end of file diff --git a/docs/languages/handlebars/index.html b/docs/languages/handlebars/index.html new file mode 100644 index 0000000..7d8b41a --- /dev/null +++ b/docs/languages/handlebars/index.html @@ -0,0 +1,62 @@ +Handlebars | LiveCodes

    Handlebars

    +

    Handlebars: Minimal templating on steroids.

    +

    Usage​

    +

    There are 2 modes for rendering:

    +

    Pre-rendered (Default)​

    +

    The values of the expressions are evaluated and added to the template during compilation of the result page.

    +

    The values of all expressions should be supplied in advance using custom settings to the property template.data which accepts an object of key-value pairs.

    +

    Example: This provides the value of the expression name

    +
    Custom Settings
    {
      "template": {
        "data": {
          "name": "LiveCodes"
        }
      }
    }
    +

    Full example below

    +

    Dynamic​

    +

    To use this mode, the property template.prerender in custom settings should be set to false.

    +

    Example:

    +
    Custom Settings
    {
      "template": {
        "prerender": false
      }
    }
    +

    In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the result page runtime.

    +

    This can be achieved in JavaScript (or any language that compiles to it) by assigning window.livecodes.templateData to an object with the data.

    +

    Please note that template rendering occurs on page load, so the assignment must occur before that.

    +

    Example:

    +
    Script Editor (JS)
    window.livecodes.templateData = { name: 'LiveCodes' };
    +

    Full example below

    +

    Language Info​

    +

    Name​

    +

    handlebars

    +

    Extensions​

    +

    .hbs, .handlebars

    +

    Editor​

    +

    markup

    +

    Compiler​

    +

    The official handlebars compiler.

    +

    Version​

    +

    handlebars: v4.7.8

    +

    Code Formatting​

    +

    Using Prettier.

    +

    Custom Settings​

    +

    Custom settings added to the property handlebars are passed as a JSON object to the compile method during compile. Please check the documentation for full reference.

    +

    Please note that custom settings should be valid JSON (i.e. functions are not allowed).

    +

    Example:

    +
    Custom Settings
    {
      "handlebars": {
        "preventIndent": true
      }
    }
    +

    Example Usage​

    + +

    Pre-rendered​

    + + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "handlebars",
          "content": "Hello {{name}}!"
        },
        "customSettings": {
          "template": {
            "data": {
              "name": "LiveCodes"
            }
          }
        }
      },
      "params": {
        "compiled": "open"
      }
    };
    createPlayground('#container', options);

    +

    Dynamic​

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "handlebars",
          "content": "Hello {{name}}!"
        },
        "script": {
          "language": "javascript",
          "content": "window.livecodes.templateData = { name: \"LiveCodes\" };"
        },
        "customSettings": {
          "template": {
            "prerender": false
          }
        },
        "activeEditor": "script"
      }
    };
    createPlayground('#container', options);

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/html.html.md b/docs/languages/html.html.md new file mode 100644 index 0000000..351ea71 --- /dev/null +++ b/docs/languages/html.html.md @@ -0,0 +1,68 @@ +# HTML + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + + +HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It defines the structure and content of web pages. + +## Usage + +HTML code in the [markup editor](../features/projects.html.md)#markup-editor) is added as is without compilation or processing to the body of the [result page](../features/result.html.md). + +There is no need to add a full page structure (e.g. ``, ``, `` tags). This is already handled by LiveCodes. +(See [Result Page Structure](../features/result.html.md)#result-page-structure) for more details.) + +If you need to add content to the `` section or `` attributes of the result page, you can add it in the [project info screen](https://livecodes.io/?screen=info). + +### Demo + + +export const htmlOnlyConfig = { + markup: { + language: 'html', + content: `

    Hello, LiveCodes!

    +

    This is a paragraph in HTML.

    +
      +
    • Simple
      • +
    • Structured
      • +
    • Semantic
      • +
    +`, + }, +} + + + +### Styles and JavaScript + +Most of the time, you will want to add styles and scripts in the [respective editors](../features/projects.html.md). +However, you can of course still add them in ``, `\n`, +}; + + + +### Module Imports + +npm modules can be imported as described in the section about [module resolution](../features/module-resolution.html.md), including bare module imports and importing from different CDNs. Stylesheets imported in the `script` block are added as `` tags in the page `head`. + +Example: + +export const importsDemo = { + svelte: `\n +
    +

    You clicked {count} times.

    + +
    +`, +}; + + + +Module imports can be customized using import maps as described in [module resolution](../features/module-resolution.html.md)#custom-module-resolution) documentations. + +### Multiple Components + +Svelte is supported in both [markup](../features/projects.html.md)#markup-editor) and [script](../features/projects.html.md)#script-editor) editors. + +This allows having a component in the markup editor that imports (and passes props to) a component in the script editor. The opposite is not supported. + +This can be done using relative import of a file name in the same directory. Any file name will resolve to the component in the script editor, +e.g. `./script.svelte`, `./Component.svelte`, `./Counter.svelte`, etc. + +export const multi = { + markup: { + language: 'svelte', + content: ` + + +`, +}, + script: { + language: 'svelte', + content: ` + +
    + {count} +
    +
    + + +
    +
    + +
    +`, + }, + style: { + language: 'css', + content: '@import "tailwindcss";\n', + }, + processors: ['tailwindcss'], +} + + + +Please note that LiveCodes [does not have the concept of a file system](../features/projects.html.md). However, you can configure [editor options](../configuration/configuration-object.html.md)#markup) like `title`, `order` and `hideTitle` to simulate multiple files, change editor order or even hide editors. + +Example: + +export const multiFiles = { + ...multi, + markup: { + ...multi.markup, + title: 'App.svelte', + }, + script: { + ...multi.script, + title: 'Counter.svelte', + }, + style: { + ...multi.style, + title: 'styles.css', + order: 3, + }, +}; + + + +When both markup and script editors use Svelte, the component in the markup editor is used as the main component rendered in the [root element](#root-element). +To render the component in the script editor, it has to be imported and used by the main component. + +### Importing External Components + +External Svelte components can be imported. The import URL has to be an absolute URL ending with `.svelte` extension. Any bare or relative imports in the imported files are resolved and compiled recursively. + +Example: + +```html + + + +``` + +### Root Element + +To mount the application instance to a specific DOM element use `"livecodes-app"` as the element `id` in the HTML. Otherwise, if that element is not found, a new `div` element is added to `document.body` and is used to mount the instance. + +Example: + +export const customRoot = { + markup: { + language: 'html', + content: `

    Custom Root Element

    +
    +

    ...other page content

    +`, + }, + script: { + language: 'svelte', + content: `\n +
    I'm a {name} component
    +`, + }, +}; + + + +## Language Info + +### Name + +`svelte` + +### Extensions + +`.svelte` + +### Editor + +`script`, `markup` + +## Compiler + +The official [Svelte compiler](https://svelte.dev/docs/svelte/svelte-compiler). + +### Version + +`svelte`: v5.12.0 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Starter Template + +https://livecodes.io/?template=svelte + +## Links + +- [Svelte](https://svelte.dev/) +- [Svelte documentations](https://svelte.dev/docs/svelte/overview) \ No newline at end of file diff --git a/docs/languages/svelte/index.html b/docs/languages/svelte/index.html new file mode 100644 index 0000000..f12665d --- /dev/null +++ b/docs/languages/svelte/index.html @@ -0,0 +1,74 @@ +Svelte | LiveCodes

    Svelte

    +

    Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript.

    +

    Usage​

    +

    Svelte components can be used as documented in the docs. See below for usage.

    +

    Demo​

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "svelte"
    };
    createPlayground('#container', options);

    +

    CSS Frameworks​

    +

    CSS Frameworks supported in LiveCodes (e.g. Tailwind CSS, UnoCSS, WindiCSS) can detect class names added in Svelte components. +Make sure that the required utility is enabled (from style editor menu or in processors property of configuration object).

    +

    See example below.

    +

    Languages and Pre-Processors​

    +

    Many of the languages supported in LiveCodes can be used. The value of lang attribute can be the language name (specified in its documentation page) or any of its aliases (extensions).

    +

    You may wrap the markup in a template element if you want to specify the lang attribute.

    + + +

    Module Imports​

    +

    npm modules can be imported as described in the section about module resolution, including bare module imports and importing from different CDNs. Stylesheets imported in the script block are added as <link rel="stylesheet"> tags in the page head.

    +

    Example:

    + + +

    Module imports can be customized using import maps as described in module resolution documentations.

    +

    Multiple Components​

    +

    Svelte is supported in both markup and script editors.

    +

    This allows having a component in the markup editor that imports (and passes props to) a component in the script editor. The opposite is not supported.

    +

    This can be done using relative import of a file name in the same directory. Any file name will resolve to the component in the script editor, +e.g. ./script.svelte, ./Component.svelte, ./Counter.svelte, etc.

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "svelte",
          "content": "<script lang=\"ts\">\nimport Counter from './Counter.svelte';\n</script>\n\n<Counter start=\"5\" />\n"
        },
        "script": {
          "language": "svelte",
          "content": "<script lang=\"ts\">\n  let { start } = $props();\n  let count = $state(start);\n</script>\n\n<div class=\"mt-8 text-center\">\n  <span class=\"text-3xl font-bold\">{count}</span>\n</div>\n<div class=\"mt-4 space-x-4 text-center\">\n  <button on:click={() => count--} class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">-</button>\n  <button on:click={() => count++} class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">+</button>\n</div>\n<div class=\"mt-4 space-x-4 text-center\">\n  <button on:click={() => count = start} class=\"text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">Reset</button>\n</div>\n"
        },
        "style": {
          "language": "css",
          "content": "@import \"tailwindcss\";\n"
        },
        "processors": [
          "tailwindcss"
        ]
      }
    };
    createPlayground('#container', options);

    +

    Please note that LiveCodes does not have the concept of a file system. However, you can configure editor options like title, order and hideTitle to simulate multiple files, change editor order or even hide editors.

    +

    Example:

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "svelte",
          "content": "<script lang=\"ts\">\nimport Counter from './Counter.svelte';\n</script>\n\n<Counter start=\"5\" />\n",
          "title": "App.svelte"
        },
        "script": {
          "language": "svelte",
          "content": "<script lang=\"ts\">\n  let { start } = $props();\n  let count = $state(start);\n</script>\n\n<div class=\"mt-8 text-center\">\n  <span class=\"text-3xl font-bold\">{count}</span>\n</div>\n<div class=\"mt-4 space-x-4 text-center\">\n  <button on:click={() => count--} class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">-</button>\n  <button on:click={() => count++} class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">+</button>\n</div>\n<div class=\"mt-4 space-x-4 text-center\">\n  <button on:click={() => count = start} class=\"text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">Reset</button>\n</div>\n",
          "title": "Counter.svelte"
        },
        "style": {
          "language": "css",
          "content": "@import \"tailwindcss\";\n",
          "title": "styles.css",
          "order": 3
        },
        "processors": [
          "tailwindcss"
        ]
      }
    };
    createPlayground('#container', options);

    +

    When both markup and script editors use Svelte, the component in the markup editor is used as the main component rendered in the root element. +To render the component in the script editor, it has to be imported and used by the main component.

    +

    Importing External Components​

    +

    External Svelte components can be imported. The import URL has to be an absolute URL ending with .svelte extension. Any bare or relative imports in the imported files are resolved and compiled recursively.

    +

    Example:

    +
    <script>
      import Counter from 'https://raw.githubusercontent.com/user/repo/main/src/Counter.svelte';
    </script>

    <Counter />
    +

    Root Element​

    +

    To mount the application instance to a specific DOM element use "livecodes-app" as the element id in the HTML. Otherwise, if that element is not found, a new div element is added to document.body and is used to mount the instance.

    +

    Example:

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "html",
          "content": "<h1>Custom Root Element</h1>\n<div id=\"livecodes-app\"></div>\n<p>...other page content</p>\n"
        },
        "script": {
          "language": "svelte",
          "content": "<script>\n  let name = $state('Svelte');\n</script>\n\n<div>I'm a {name} component</div>\n"
        }
      }
    };
    createPlayground('#container', options);

    +

    Language Info​

    +

    Name​

    +

    svelte

    +

    Extensions​

    +

    .svelte

    +

    Editor​

    +

    script, markup

    +

    Compiler​

    +

    The official Svelte compiler.

    +

    Version​

    +

    svelte: v5.12.0

    +

    Code Formatting​

    +

    Using Prettier.

    +

    Starter Template​

    +

    https://livecodes.io/?template=svelte

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/tailwindcss.html.md b/docs/languages/tailwindcss.html.md new file mode 100644 index 0000000..b012645 --- /dev/null +++ b/docs/languages/tailwindcss.html.md @@ -0,0 +1,3 @@ +# Tailwind CSS + +TODO... \ No newline at end of file diff --git a/docs/languages/tailwindcss/index.html b/docs/languages/tailwindcss/index.html new file mode 100644 index 0000000..fbfe6cb --- /dev/null +++ b/docs/languages/tailwindcss/index.html @@ -0,0 +1,12 @@ +Tailwind CSS | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/tcl.html.md b/docs/languages/tcl.html.md new file mode 100644 index 0000000..dc73d8c --- /dev/null +++ b/docs/languages/tcl.html.md @@ -0,0 +1,3 @@ +# Tcl + +TODO... \ No newline at end of file diff --git a/docs/languages/tcl/index.html b/docs/languages/tcl/index.html new file mode 100644 index 0000000..c5d0564 --- /dev/null +++ b/docs/languages/tcl/index.html @@ -0,0 +1,12 @@ +Tcl | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/teal.html.md b/docs/languages/teal.html.md new file mode 100644 index 0000000..9b146fa --- /dev/null +++ b/docs/languages/teal.html.md @@ -0,0 +1,56 @@ +# Teal + +Teal is a typed dialect of [Lua](https://www.lua.org/). + +Teal code is compiled to Lua, which then runs in the browser using [Fengari](https://fengari.io/). See documentation for Lua language support in LiveCodes [here](./lua.html.md). + +## Usage + +JavaScript interoperability and DOM access is achieved using [`"js"` module](https://github.com/fengari-lua/fengari-interop). + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +This example demonstrates usage, JavaScript interoperability and DOM access: + + + +## Language Info + +### Name + +`teal` + +### Extension + +`.tl` + +### Editor + +`script` + +## Compiler + +[Teal](https://github.com/teal-language/tl) + +### Version + +Teal v0.15.2 + +## Code Formatting + +Using [`lua-fmt`](https://github.com/trixnz/lua-fmt). + +## Starter Template + +https://livecodes.io/?template=teal + +## Links + +- [Teal](https://github.com/teal-language/tl) +- [Teal documentation](https://github.com/teal-language/tl/tree/master/docs) +- [Teal tutorial](https://github.com/teal-language/tl/blob/master/docs/tutorial.html.md) +- [Lua](https://www.lua.org/) +- [Lua documentation](https://www.lua.org/docs.html) +- [Fengari](https://fengari.io/) +- [lua](./lua.html.md) in LiveCodes +- [lua-wasm](./lua-wasm.html.md) in LiveCodes \ No newline at end of file diff --git a/docs/languages/teal/index.html b/docs/languages/teal/index.html new file mode 100644 index 0000000..1a483fc --- /dev/null +++ b/docs/languages/teal/index.html @@ -0,0 +1,44 @@ +Teal | LiveCodes

    Teal

    +

    Teal is a typed dialect of Lua.

    +

    Teal code is compiled to Lua, which then runs in the browser using Fengari. See documentation for Lua language support in LiveCodes here.

    +

    Usage​

    +

    JavaScript interoperability and DOM access is achieved using "js" module.

    + +

    This example demonstrates usage, JavaScript interoperability and DOM access:

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "teal"
    };
    createPlayground('#container', options);

    +

    Language Info​

    +

    Name​

    +

    teal

    +

    Extension​

    +

    .tl

    +

    Editor​

    +

    script

    +

    Compiler​

    +

    Teal

    +

    Version​

    +

    Teal v0.15.2

    +

    Code Formatting​

    +

    Using lua-fmt.

    +

    Starter Template​

    +

    https://livecodes.io/?template=teal

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/tokencss.html.md b/docs/languages/tokencss.html.md new file mode 100644 index 0000000..4ed6bb0 --- /dev/null +++ b/docs/languages/tokencss.html.md @@ -0,0 +1,3 @@ +# Token CSS + +TODO... \ No newline at end of file diff --git a/docs/languages/tokencss/index.html b/docs/languages/tokencss/index.html new file mode 100644 index 0000000..c17b496 --- /dev/null +++ b/docs/languages/tokencss/index.html @@ -0,0 +1,12 @@ +Token CSS | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/tsx.html.md b/docs/languages/tsx.html.md new file mode 100644 index 0000000..2ab4dbd --- /dev/null +++ b/docs/languages/tsx.html.md @@ -0,0 +1,61 @@ +# TSX + +TSX is a syntax that allows using TypeScript in JSX. +[JSX](https://react.dev/learn/writing-markup-with-jsx) is a syntax extension for JavaScript that allows writing HTML-like markup inside JavaScript. +It has been popularized by [React](https://react.dev/), and then adopted by many other libraries/frameworks. + +By default, when running JSX/TSX in LiveCodes, [React](https://react.dev/) runtime is used. +However, other libraries like [Preact](https://preactjs.com/), [nano JSX](https://nanojsx.io/) and others can be used as well (see [Custom JSX Runtimes](./jsx.html.md)#custom-jsx-runtimes)). + +Please note that [React compiler](https://react.dev/learn/react-compiler) is also available in LiveCodes and is [documented here](./react.html.md). + +## Usage + +For usage and examples, see documentation for [JSX](./jsx.html.md) and [TypeScript](./typescript.html.md) support in LiveCodes. + +## Language Info + +### Name + +`tsx` + +### Extension + +`.tsx` + +### Editor + +`script` + +## Compiler + +[TypeScript compiler](./typescript.html.md) + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `tsx` are passed to the TypeScript compiler as [compiler options](https://www.typescriptlang.org/tsconfig#compilerOptions) while compiling TSX. +In addition, the option `disableAutoRender` can be set to `true` to disable [auto-rendering](./jsx#auto-rendering). + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +**Example:** + +```json title="Custom Settings" +{ + "tsx": { + "disableAutoRender": true, + "jsxFactory": "h", + "jsxFragmentFactory": "Fragment" + } +} +``` + +## Links + +- [React](https://react.dev/) +- [JSX](https://react.dev/learn/writing-markup-with-jsx) +- [TypeScript](https://www.typescriptlang.org/) \ No newline at end of file diff --git a/docs/languages/tsx/index.html b/docs/languages/tsx/index.html new file mode 100644 index 0000000..5899be9 --- /dev/null +++ b/docs/languages/tsx/index.html @@ -0,0 +1,42 @@ +TSX | LiveCodes

    TSX

    +

    TSX is a syntax that allows using TypeScript in JSX. +JSX is a syntax extension for JavaScript that allows writing HTML-like markup inside JavaScript. +It has been popularized by React, and then adopted by many other libraries/frameworks.

    +

    By default, when running JSX/TSX in LiveCodes, React runtime is used. +However, other libraries like Preact, nano JSX and others can be used as well (see Custom JSX Runtimes).

    +

    Please note that React compiler is also available in LiveCodes and is documented here.

    +

    Usage​

    +

    For usage and examples, see documentation for JSX and TypeScript support in LiveCodes.

    +

    Language Info​

    +

    Name​

    +

    tsx

    +

    Extension​

    +

    .tsx

    +

    Editor​

    +

    script

    +

    Compiler​

    +

    TypeScript compiler

    +

    Code Formatting​

    +

    Using Prettier.

    +

    Custom Settings​

    +

    Custom settings added to the property tsx are passed to the TypeScript compiler as compiler options while compiling TSX. +In addition, the option disableAutoRender can be set to true to disable auto-rendering.

    +

    Please note that custom settings should be valid JSON (i.e. functions are not allowed).

    +

    Example:

    +
    Custom Settings
    {
      "tsx": {
        "disableAutoRender": true,
        "jsxFactory": "h",
        "jsxFragmentFactory": "Fragment"
      }
    }
    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/twig.html.md b/docs/languages/twig.html.md new file mode 100644 index 0000000..368d2fe --- /dev/null +++ b/docs/languages/twig.html.md @@ -0,0 +1,123 @@ +# Twig + +[Twig.js](https://github.com/twigjs/twig.js/) is a pure JavaScript implementation of the [Twig](https://twig.symfony.com/) PHP templating language. + +## Usage + +There are 2 modes for rendering: + +### Pre-rendered (Default) + +The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md). + +The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs. + +Example: This provides the value of the expression `name` + +```json title="Custom Settings" +{ + "template": { + "data": { + "name": "LiveCodes" + } + } +} +``` + +[Full example below](#pre-rendered) + +### Dynamic + +To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`. + +Example: + +```json title="Custom Settings" +{ + "template": { + "prerender": false + } +} +``` + +In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime. + +This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data. + +Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that. + +Example: + +```js title="Script Editor (JS)" +window.livecodes.templateData = { name: 'LiveCodes' }; +``` + +[Full example below](#dynamic-1) + +## Language Info + +### Name + +`twig` + +### Extension + +`.twig` + +### Editor + +`markup` + +## Compiler + +[Twig.js](https://www.npmjs.com/package/twig). + +### Version + +`twig`: v1.15.4 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `twig` are passed as a JSON object to the [`twig`](https://github.com/twigjs/twig.js/wiki#browser-usage) method during compile. Please check the [documentation](https://github.com/twigjs/twig.js/wiki#browser-usage) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +### Pre-rendered + +export const config = { + markup: { language: 'twig', content: 'Hello, {{ name }}!' }, + customSettings: { template: { data: { name: 'LiveCodes' } } }, +}; + +export const params = { compiled: 'open' }; + + + +### Dynamic + +export const config2 = { + markup: { language: 'twig', content: 'Hello, {{ name }}!' }, + script: { + language: 'javascript', + content: 'window.livecodes.templateData = { name: "LiveCodes" };', + }, + customSettings: { template: { prerender: false } }, + activeEditor: 'script', +}; + + + +## Links + +- [Twig](https://twig.symfony.com/) +- [Twig documentation](https://twig.symfony.com/doc/3.x/) +- [Twig.js](https://github.com/twigjs/twig.js/) +- [Twig.js documentation](https://github.com/twigjs/twig.js/wiki) \ No newline at end of file diff --git a/docs/languages/twig/index.html b/docs/languages/twig/index.html new file mode 100644 index 0000000..9056eba --- /dev/null +++ b/docs/languages/twig/index.html @@ -0,0 +1,62 @@ +Twig | LiveCodes

    Twig

    +

    Twig.js is a pure JavaScript implementation of the Twig PHP templating language.

    +

    Usage​

    +

    There are 2 modes for rendering:

    +

    Pre-rendered (Default)​

    +

    The values of the expressions are evaluated and added to the template during compilation of the result page.

    +

    The values of all expressions should be supplied in advance using custom settings to the property template.data which accepts an object of key-value pairs.

    +

    Example: This provides the value of the expression name

    +
    Custom Settings
    {
      "template": {
        "data": {
          "name": "LiveCodes"
        }
      }
    }
    +

    Full example below

    +

    Dynamic​

    +

    To use this mode, the property template.prerender in custom settings should be set to false.

    +

    Example:

    +
    Custom Settings
    {
      "template": {
        "prerender": false
      }
    }
    +

    In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the result page runtime.

    +

    This can be achieved in JavaScript (or any language that compiles to it) by assigning window.livecodes.templateData to an object with the data.

    +

    Please note that template rendering occurs on page load, so the assignment must occur before that.

    +

    Example:

    +
    Script Editor (JS)
    window.livecodes.templateData = { name: 'LiveCodes' };
    +

    Full example below

    +

    Language Info​

    +

    Name​

    +

    twig

    +

    Extension​

    +

    .twig

    +

    Editor​

    +

    markup

    +

    Compiler​

    +

    Twig.js.

    +

    Version​

    +

    twig: v1.15.4

    +

    Code Formatting​

    +

    Using Prettier.

    +

    Custom Settings​

    +

    Custom settings added to the property twig are passed as a JSON object to the twig method during compile. Please check the documentation for full reference.

    +

    Please note that custom settings should be valid JSON (i.e. functions are not allowed).

    +

    Example Usage​

    + +

    Pre-rendered​

    + + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "twig",
          "content": "Hello, {{ name }}!"
        },
        "customSettings": {
          "template": {
            "data": {
              "name": "LiveCodes"
            }
          }
        }
      },
      "params": {
        "compiled": "open"
      }
    };
    createPlayground('#container', options);

    +

    Dynamic​

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "twig",
          "content": "Hello, {{ name }}!"
        },
        "script": {
          "language": "javascript",
          "content": "window.livecodes.templateData = { name: \"LiveCodes\" };"
        },
        "customSettings": {
          "template": {
            "prerender": false
          }
        },
        "activeEditor": "script"
      }
    };
    createPlayground('#container', options);

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/typescript.html.md b/docs/languages/typescript.html.md new file mode 100644 index 0000000..0981b5f --- /dev/null +++ b/docs/languages/typescript.html.md @@ -0,0 +1,3 @@ +# TypeScript + +TODO... \ No newline at end of file diff --git a/docs/languages/typescript/index.html b/docs/languages/typescript/index.html new file mode 100644 index 0000000..bc8fb79 --- /dev/null +++ b/docs/languages/typescript/index.html @@ -0,0 +1,12 @@ +TypeScript | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/unocss.html.md b/docs/languages/unocss.html.md new file mode 100644 index 0000000..599937e --- /dev/null +++ b/docs/languages/unocss.html.md @@ -0,0 +1,3 @@ +# UnoCSS + +TODO... \ No newline at end of file diff --git a/docs/languages/unocss/index.html b/docs/languages/unocss/index.html new file mode 100644 index 0000000..622eddf --- /dev/null +++ b/docs/languages/unocss/index.html @@ -0,0 +1,12 @@ +UnoCSS | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/vento.html.md b/docs/languages/vento.html.md new file mode 100644 index 0000000..5bb1a0d --- /dev/null +++ b/docs/languages/vento.html.md @@ -0,0 +1,120 @@ +# Vento + +[Vento](https://vento.js.org/) is a template engine for Deno. It's inspired by other engines, such as [Nunjucks](./nunjucks.html.md), [Liquid](./liquid.html.md), [Eta](./eta.html.md), and [Mustache](./mustache.html.md). + +## Usage + +There are 2 modes for rendering: + +### Pre-rendered (Default) + +The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md). + +The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs. + +Example: This provides the value of the expression `name` + +```json title="Custom Settings" +{ + "template": { + "data": { + "name": "LiveCodes" + } + } +} +``` + +[Full example below](#pre-rendered) + +### Dynamic + +To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`. + +Example: + +```json title="Custom Settings" +{ + "template": { + "prerender": false + } +} +``` + +In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime. + +This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data. + +Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that. + +Example: + +```js title="Script Editor (JS)" +window.livecodes.templateData = { name: 'LiveCodes' }; +``` + +[Full example below](#dynamic-1) + +## Language Info + +### Name + +`vento` + +### Extension + +`.vto` + +### Editor + +`markup` + +## Compiler + +[Vento](https://vento.js.org/). + +### Version + +`ventojs`: v1.12.16 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `vento` are passed as a JSON object to the [`vento()`](https://vento.js.org/getting-started/#usage) function during compile. Please check the [documentation](https://vento.js.org/configuration/) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +### Pre-rendered + +export const config = { + markup: { language: 'vento', content: 'Hello, {{ name }}!' }, + customSettings: { template: { data: { name: 'LiveCodes' } } }, +}; + +export const params = { compiled: 'open' }; + + + +### Dynamic + +export const config2 = { + markup: { language: 'vento', content: 'Hello, {{ name }}!' }, + script: { + language: 'javascript', + content: 'window.livecodes.templateData = { name: "LiveCodes" };', + }, + customSettings: { template: { prerender: false } }, + activeEditor: 'script', +}; + + + +## Links + +- [Vento](https://vento.js.org/) \ No newline at end of file diff --git a/docs/languages/vento/index.html b/docs/languages/vento/index.html new file mode 100644 index 0000000..0296a17 --- /dev/null +++ b/docs/languages/vento/index.html @@ -0,0 +1,59 @@ +Vento | LiveCodes

    Vento

    +

    Vento is a template engine for Deno. It's inspired by other engines, such as Nunjucks, Liquid, Eta, and Mustache.

    +

    Usage​

    +

    There are 2 modes for rendering:

    +

    Pre-rendered (Default)​

    +

    The values of the expressions are evaluated and added to the template during compilation of the result page.

    +

    The values of all expressions should be supplied in advance using custom settings to the property template.data which accepts an object of key-value pairs.

    +

    Example: This provides the value of the expression name

    +
    Custom Settings
    {
      "template": {
        "data": {
          "name": "LiveCodes"
        }
      }
    }
    +

    Full example below

    +

    Dynamic​

    +

    To use this mode, the property template.prerender in custom settings should be set to false.

    +

    Example:

    +
    Custom Settings
    {
      "template": {
        "prerender": false
      }
    }
    +

    In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the result page runtime.

    +

    This can be achieved in JavaScript (or any language that compiles to it) by assigning window.livecodes.templateData to an object with the data.

    +

    Please note that template rendering occurs on page load, so the assignment must occur before that.

    +

    Example:

    +
    Script Editor (JS)
    window.livecodes.templateData = { name: 'LiveCodes' };
    +

    Full example below

    +

    Language Info​

    +

    Name​

    +

    vento

    +

    Extension​

    +

    .vto

    +

    Editor​

    +

    markup

    +

    Compiler​

    +

    Vento.

    +

    Version​

    +

    ventojs: v1.12.16

    +

    Code Formatting​

    +

    Using Prettier.

    +

    Custom Settings​

    +

    Custom settings added to the property vento are passed as a JSON object to the vento() function during compile. Please check the documentation for full reference.

    +

    Please note that custom settings should be valid JSON (i.e. functions are not allowed).

    +

    Example Usage​

    + +

    Pre-rendered​

    + + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "vento",
          "content": "Hello, {{ name }}!"
        },
        "customSettings": {
          "template": {
            "data": {
              "name": "LiveCodes"
            }
          }
        }
      },
      "params": {
        "compiled": "open"
      }
    };
    createPlayground('#container', options);

    +

    Dynamic​

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "vento",
          "content": "Hello, {{ name }}!"
        },
        "script": {
          "language": "javascript",
          "content": "window.livecodes.templateData = { name: \"LiveCodes\" };"
        },
        "customSettings": {
          "template": {
            "prerender": false
          }
        },
        "activeEditor": "script"
      }
    };
    createPlayground('#container', options);

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/vue.html.md b/docs/languages/vue.html.md new file mode 100644 index 0000000..df442b8 --- /dev/null +++ b/docs/languages/vue.html.md @@ -0,0 +1,423 @@ +# Vue SFC + +[Vue.js](https://vuejs.org/), The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces. + +This is the documentation for LiveCodes language support for Vue [Single-File Component (SFC)](https://vuejs.org/api/sfc-spec.html). + +The support for Vue 2 SFC (the older, EOL version) is [documented separately](./vue2.html.md). + +## Usage + +Vue SFC can be used as documented in the [specs](https://vuejs.org/api/sfc-spec.html), including support for [Scoped CSS](https://vuejs.org/api/sfc-css-features.html#scoped-css), [CSS Modules](https://vuejs.org/api/sfc-css-features.html#css-modules), [pre-processors](https://vuejs.org/api/sfc-spec.html#pre-processors), [JSX](https://vuejs.org/guide/extras/render-function.html#jsx-tsx) and [`src` imports](https://vuejs.org/api/sfc-spec.html#src-imports). See below for usage. + +### Demo + +import LiveCodes from '../../src/components/LiveCodes.tsx'; +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +### Scoped CSS + +> When a `\n\n`, +}; + + + +### CSS Modules + +> A ``, +}; + + + +### CSS Frameworks + +[CSS Frameworks](../features/css.html.md)#css-processors) supported in LiveCodes (e.g. [Tailwind CSS](./tailwindcss.html.md), [UnoCSS](./unocss.html.md), [WindiCSS](./windicss.html.md)) can detect class names added in Vue SFCs. Make sure that the required utility is enabled (from style editor menu or in `processors` property of [configuration object](../configuration/configuration-object.html.md)#processors)). + +See [example below](#multiple-components). + +### Languages and Pre-Processors + +> Blocks can declare pre-processor languages using the `lang` attribute. +> +> — [docs](https://vuejs.org/api/sfc-spec.html#pre-processors) + +Many of the [languages supported in LiveCodes](./index.html.md) can be used. The value of `lang` attribute can be the language name (specified in its documentation page) or any of its aliases (extensions). + +export const processorsDemo = { + vue: `\n\n\n\n\n`, +}; + + + +### JSX + +JSX can be used in render functions without needing any configuration. + +export const jsxDemo = { + vue: `\n\n`, +}; + + + +### `src` Imports + +The src attribute can be used to import an external file for a language block: + +```html + + + +``` + +The value of `src` attribute can be either: + +- Absolute URL (e.g. `https://unpkg.com/todomvc-app-css/index.css`) +- Path in npm package (e.g. `todomvc-app-css/index.css`) + +Relative paths (e.g. `./my-styles.css`) cannot be used (because there is no file system in LiveCodes). + +The imported sources can use any of the supported languages/pre-processors (identified by the file extension or can be specified by `lang` attribute). + +### Module Imports + +npm modules can be imported as described in the section about [module resolution](../features/module-resolution.html.md), including bare module imports and importing from different CDNs. Stylesheets imported in the `script` block are added as `` tags in the page `head`. + +Example: + +export const importsDemo = { + vue: `\n\n\n`, +}; + + + +Module imports can be customized using import maps as described in [module resolution](../features/module-resolution.html.md)#custom-module-resolution) documentations. + +### Multiple Components + +Vue is supported in both [markup](../features/projects.html.md)#markup-editor) and [script](../features/projects.html.md)#script-editor) editors. + +This allows having a component in the markup editor that imports (and passes props to) a component in the script editor. The opposite is not supported. + +This can be done using relative import of a file name in the same directory. Any file name will resolve to the component in the script editor, +e.g. `./script.vue`, `./Component.vue`, `./Counter.vue`, etc. + +export const multi = { + markup: { + language: 'vue', + content: ` + + +`, +}, + script: { + language: 'vue', + content: ` + + +`, + }, + style: { + language: 'css', + content: '@import "tailwindcss";\n', + }, + processors: ['tailwindcss'], +} + + + +Please note that LiveCodes [does not have the concept of a file system](../features/projects.html.md). However, you can configure [editor options](../configuration/configuration-object.html.md)#markup) like `title`, `order` and `hideTitle` to simulate multiple files, change editor order or even hide editors. + +Example: + +export const multiFiles = { + ...multi, + markup: { + ...multi.markup, + title: 'App.vue', + }, + script: { + ...multi.script, + title: 'Counter.vue', + }, + style: { + ...multi.style, + title: 'styles.css', + order: 3, + }, +}; + + + +When both markup and script editors use Vue, the component in the markup editor is used as the main component rendered in the [root element](#root-element). +To render the component in the script editor, it has to be imported and used by the main component. + +### Importing External SFCs + +External Vue SFCs can be imported. The import URL has to be an absolute URL ending with `.vue` extension. Any bare or relative imports in the imported files are resolved and compiled recursively. + +This is an example of importing a Vue SFC, which in turn imports other Vue SFCs (the imported components use Tailwind CSS, which is enabled in this project as a CSS preprocessor): + +export const importExternal = { + activeEditor: 'script', + script: { + language: 'vue', + content: ` + + +` + }, + style: { + language: 'css', + content: '@import "tailwindcss";\n', + }, + processors: ['tailwindcss'], +} + + + + + +Please note that extensionless imports are not supported. However, you may customize the import URL using import maps as described in [module resolution](../features/module-resolution.html.md)#custom-module-resolution) section. + +Example: + +```json title="Custom Settings" +{ + "imports": { + "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList.js", + "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition.js" + } +} +``` + +export const importExternalWithImportMap = { + activeEditor: 'script', + script: { + language: 'vue', + content: ` + + +`, + }, + imports: { + "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList.js", + "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition.js" + } +}; + + + +### Importing Data URLs + +You may want to import other SFCs without having to host them on a server. +These components can be encoded as [data URLs](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data) and imported as usual. + +The data URL has to start with `data:text/vue` to be recognized as a Vue SFC. Any imports in the imported URLs (even if they are also data URLs) are resolved and compiled recursively. + +:::info + +The code in any code editor can be encoded as data URL from the LiveCodes UI using the "Copy code as data URL" button below the code editor. + +::: + +This is the previous demo that uses data URLs (with nested imports) instead of external URLs: + +export const importDataUrls = { + activeEditor: 'script', + script: { + language: 'vue', + content: ` + + +` + }, + style: { + language: 'css', + content: '@import "tailwindcss";\n', + }, + processors: ['tailwindcss'], +} + +
    + +
    + + + +In the above demo, this component is imported: + +``` +data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQppbXBvcnQgeyByZWYgfSBmcm9tICJ2dWUiOw0KaW1wb3J0IFByaW1hcnlCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdFozSmhlUzAxTURBZ2FHOTJaWEk2WW1jdFozSmhlUzAyTURBZ2RISmhibk5wZEdsdmJpQndlUzB4SUhCNExUUWdkR1Y0ZEMxM2FHbDBaU0J5YjNWdVpHVmtJR1J5YjNBdGMyaGhaRzkzTFhoc0lnMEtJQ0ErRFFvZ0lDQWdlM3NnZEdsMGJHVWdmWDBOQ2lBZ1BDOWlkWFIwYjI0K0RRbzhMM1JsYlhCc1lYUmxQZz09IjsNCmltcG9ydCBEYW5nZXJCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdGNtVmtMVFV3TUNCb2IzWmxjanBpWnkxeVpXUXROakF3SUhSeVlXNXphWFJwYjI0Z2NIa3RNU0J3ZUMwMElIUmxlSFF0ZDJocGRHVWdjbTkxYm1SbFpDQmtjbTl3TFhOb1lXUnZkeTE0YkNJTkNpQWdQZzBLSUNBZ0lIdDdJSFJwZEd4bElIMTlEUW9nSUR3dlluVjBkRzl1UGcwS1BDOTBaVzF3YkdGMFpUND0iOw0KDQpjb25zdCBjb3VudCA9IHJlZigwKTsNCjwvc2NyaXB0Pg0KDQo8dGVtcGxhdGU+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC04IGZsZXgganVzdGlmeS1jZW50ZXIiPg0KICAgIDxzcGFuIHJlZj0iY291bnRlciIgY2xhc3M9InRleHQtM3hsIGZvbnQtYm9sZCI+e3sgY291bnQgfX08L3NwYW4+DQogIDwvZGl2Pg0KICA8ZGl2IGNsYXNzPSJ3LWZ1bGwgbXQtNCBmbGV4IGZsZXgtcm93IHNwYWNlLXgtNCBqdXN0aWZ5LWNlbnRlciI+DQogICAgPHByaW1hcnktYnV0dG9uIHJlZj0iZGVjcmVtZW50QnV0dG9uIiB0aXRsZT0iLSIgQGNsaWNrPSJjb3VudC0tIiAvPg0KICAgIDxwcmltYXJ5LWJ1dHRvbiByZWY9ImluY3JlbWVudEJ1dHRvbiIgdGl0bGU9IisiIEBjbGljaz0iY291bnQrKyIgLz4NCiAgPC9kaXY+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC00IGZsZXggZmxleC1yb3cgc3BhY2UteC00IGp1c3RpZnktY2VudGVyIj4NCiAgICA8ZGFuZ2VyLWJ1dHRvbiByZWY9InJlc2V0QnV0dG9uIiB0aXRsZT0iUmVzZXQiIEBjbGljaz0iY291bnQgPSAwIiAvPg0KICA8L2Rpdj4NCjwvdGVtcGxhdGU+ +``` + +which imports these: + +``` +data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQpkZWZpbmVQcm9wcyh7DQogIHRpdGxlOiB7DQogICAgdHlwZTogU3RyaW5nLA0KICAgIGRlZmF1bHQ6ICJCdXR0b24iLA0KICB9LA0KfSk7DQo8L3NjcmlwdD4NCg0KPHRlbXBsYXRlPg0KICA8YnV0dG9uDQogICAgY2xhc3M9InRleHQtbWQgZm9udC1tZWRpdW0gYmctZ3JheS01MDAgaG92ZXI6YmctZ3JheS02MDAgdHJhbnNpdGlvbiBweS0xIHB4LTQgdGV4dC13aGl0ZSByb3VuZGVkIGRyb3Atc2hhZG93LXhsIg0KICA+DQogICAge3sgdGl0bGUgfX0NCiAgPC9idXR0b24+DQo8L3RlbXBsYXRlPg== +``` + +``` +data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQpkZWZpbmVQcm9wcyh7DQogIHRpdGxlOiB7DQogICAgdHlwZTogU3RyaW5nLA0KICAgIGRlZmF1bHQ6ICJCdXR0b24iLA0KICB9LA0KfSk7DQo8L3NjcmlwdD4NCg0KPHRlbXBsYXRlPg0KICA8YnV0dG9uDQogICAgY2xhc3M9InRleHQtbWQgZm9udC1tZWRpdW0gYmctcmVkLTUwMCBob3ZlcjpiZy1yZWQtNjAwIHRyYW5zaXRpb24gcHktMSBweC00IHRleHQtd2hpdGUgcm91bmRlZCBkcm9wLXNoYWRvdy14bCINCiAgPg0KICAgIHt7IHRpdGxlIH19DQogIDwvYnV0dG9uPg0KPC90ZW1wbGF0ZT4= +``` + +### Root Element + +To [mount](https://vuejs.org/api/application.html#app-mount) the application instance to a specific DOM element use `"livecodes-app"` as the element `id` in the HTML. Otherwise, if that element is not found, a new `div` element is added to `document.body` and is used to mount the instance. + +Example: + +export const customRoot = { + markup: { + language: 'html', + content: `

    Custom Root Element

    +
    +

    ...other page content

    +`, + }, + script: { + language: 'vue', + content: ``, + }, +}; + + + +## Language Info + +### Name + +`vue` + +### Extensions + +`.vue`, `.vue3` + +### Editor + +`script`, `markup` + +## Compiler + +The official [@vue/compiler-sfc](https://github.com/vuejs/core/tree/main/packages/compiler-sfc). + +### Version + +`@vue/compiler-sfc`: v3.5.13 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Limitations + +Currently, Vue support has the following limitations: + +- SSR is not supported. +- The [`defineProps()`](https://vuejs.org/guide/components/props#props-declaration) macro cannot infer props from TypeScript types not defined in the same file. + +[PRs are welcome](https://github.com/live-codes/livecodes/issues/757). + +## Starter Template + +https://livecodes.io/?template=vue + +## Links + +- [Vue.js](https://vuejs.org/) +- [Vue SFC specs](https://vuejs.org/api/sfc-spec.html) +- [CSS Modules](https://github.com/css-modules/css-modules) \ No newline at end of file diff --git a/docs/languages/vue/index.html b/docs/languages/vue/index.html new file mode 100644 index 0000000..4e2357d --- /dev/null +++ b/docs/languages/vue/index.html @@ -0,0 +1,135 @@ +Vue SFC | LiveCodes

    Vue SFC

    +

    Vue.js, The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces.

    +

    This is the documentation for LiveCodes language support for Vue Single-File Component (SFC).

    +

    The support for Vue 2 SFC (the older, EOL version) is documented separately.

    +

    Usage​

    +

    Vue SFC can be used as documented in the specs, including support for Scoped CSS, CSS Modules, pre-processors, JSX and src imports. See below for usage.

    +

    Demo​

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "template": "vue"
    };
    createPlayground('#container', options);

    +

    Scoped CSS​

    +
    +

    When a <style> tag has the scoped attribute, its CSS will apply to elements of the current component only.

    +

    — docs

    +
    + + +

    CSS Modules​

    +
    +

    A <style module> tag is compiled as CSS Modules and exposes the resulting CSS classes to the component as an object under the key of $style.

    +

    — docs

    +
    + + +

    CSS Frameworks​

    +

    CSS Frameworks supported in LiveCodes (e.g. Tailwind CSS, UnoCSS, WindiCSS) can detect class names added in Vue SFCs. Make sure that the required utility is enabled (from style editor menu or in processors property of configuration object).

    +

    See example below.

    +

    Languages and Pre-Processors​

    +
    +

    Blocks can declare pre-processor languages using the lang attribute.

    +

    — docs

    +
    +

    Many of the languages supported in LiveCodes can be used. The value of lang attribute can be the language name (specified in its documentation page) or any of its aliases (extensions).

    + + +

    JSX​

    +

    JSX can be used in render functions without needing any configuration.

    + + +

    src Imports​

    +

    The src attribute can be used to import an external file for a language block:

    +
    <template src="https://my-website.com/template.html"></template>
    <style src="https://my-website.com/style.css"></style>
    <script src="https://my-website.com/script.js"></script>
    +

    The value of src attribute can be either:

    +
      +
    • Absolute URL (e.g. https://unpkg.com/todomvc-app-css/index.css)
      • +
    • Path in npm package (e.g. todomvc-app-css/index.css)
      • +
    +

    Relative paths (e.g. ./my-styles.css) cannot be used (because there is no file system in LiveCodes).

    +

    The imported sources can use any of the supported languages/pre-processors (identified by the file extension or can be specified by lang attribute).

    +

    Module Imports​

    +

    npm modules can be imported as described in the section about module resolution, including bare module imports and importing from different CDNs. Stylesheets imported in the script block are added as <link rel="stylesheet"> tags in the page head.

    +

    Example:

    + + +

    Module imports can be customized using import maps as described in module resolution documentations.

    +

    Multiple Components​

    +

    Vue is supported in both markup and script editors.

    +

    This allows having a component in the markup editor that imports (and passes props to) a component in the script editor. The opposite is not supported.

    +

    This can be done using relative import of a file name in the same directory. Any file name will resolve to the component in the script editor, +e.g. ./script.vue, ./Component.vue, ./Counter.vue, etc.

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "vue",
          "content": "<script setup>\nimport Counter from './Counter.vue';\n</script>\n\n<template>\n  <div class=\"w-full text-center\">\n    <Counter start=\"5\" />\n  </div>\n</template>\n"
        },
        "script": {
          "language": "vue",
          "content": "<script setup lang=\"ts\">\n  import { ref } from \"vue\";\n  const props = defineProps({\n    start: {\n      type: Number,\n      default: 0,\n    },\n  });\n  const count = ref(props.start);\n</script>\n\n<template>\n  <div class=\"mt-8\">\n    <span ref=\"counter\" class=\"text-3xl font-bold\">{{ count }}</span>\n  </div>\n  <div class=\"mt-4 space-x-4\">\n    <button title=\"-\" @click=\"count--\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">-</button>\n    <button title=\"+\" @click=\"count++\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">+</button>\n  </div>\n  <div class=\"mt-4 space-x-4\">\n    <button @click=\"count = props.start\" class=\"text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">Reset</button>\n  </div>\n</template>\n"
        },
        "style": {
          "language": "css",
          "content": "@import \"tailwindcss\";\n"
        },
        "processors": [
          "tailwindcss"
        ]
      }
    };
    createPlayground('#container', options);

    +

    Please note that LiveCodes does not have the concept of a file system. However, you can configure editor options like title, order and hideTitle to simulate multiple files, change editor order or even hide editors.

    +

    Example:

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "vue",
          "content": "<script setup>\nimport Counter from './Counter.vue';\n</script>\n\n<template>\n  <div class=\"w-full text-center\">\n    <Counter start=\"5\" />\n  </div>\n</template>\n",
          "title": "App.vue"
        },
        "script": {
          "language": "vue",
          "content": "<script setup lang=\"ts\">\n  import { ref } from \"vue\";\n  const props = defineProps({\n    start: {\n      type: Number,\n      default: 0,\n    },\n  });\n  const count = ref(props.start);\n</script>\n\n<template>\n  <div class=\"mt-8\">\n    <span ref=\"counter\" class=\"text-3xl font-bold\">{{ count }}</span>\n  </div>\n  <div class=\"mt-4 space-x-4\">\n    <button title=\"-\" @click=\"count--\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">-</button>\n    <button title=\"+\" @click=\"count++\" class=\"text-md font-medium bg-gray-500 hover:bg-gray-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">+</button>\n  </div>\n  <div class=\"mt-4 space-x-4\">\n    <button @click=\"count = props.start\" class=\"text-md font-medium bg-red-500 hover:bg-red-600 transition py-1 px-4 text-white rounded drop-shadow-xl\">Reset</button>\n  </div>\n</template>\n",
          "title": "Counter.vue"
        },
        "style": {
          "language": "css",
          "content": "@import \"tailwindcss\";\n",
          "title": "styles.css",
          "order": 3
        },
        "processors": [
          "tailwindcss"
        ]
      }
    };
    createPlayground('#container', options);

    +

    When both markup and script editors use Vue, the component in the markup editor is used as the main component rendered in the root element. +To render the component in the script editor, it has to be imported and used by the main component.

    +

    Importing External SFCs​

    +

    External Vue SFCs can be imported. The import URL has to be an absolute URL ending with .vue extension. Any bare or relative imports in the imported files are resolved and compiled recursively.

    +

    This is an example of importing a Vue SFC, which in turn imports other Vue SFCs (the imported components use Tailwind CSS, which is enabled in this project as a CSS preprocessor):

    + + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "activeEditor": "script",
        "script": {
          "language": "vue",
          "content": "<script setup>\nimport Counter from 'https://raw.githubusercontent.com/hatemhosny/simple-vue-counter/main/src/App.vue';\n</script>\n\n<template>\n  <Counter />\n</template>\n"
        },
        "style": {
          "language": "css",
          "content": "@import \"tailwindcss\";\n"
        },
        "processors": [
          "tailwindcss"
        ]
      }
    };
    createPlayground('#container', options);

    +

    Please note that extensionless imports are not supported. However, you may customize the import URL using import maps as described in module resolution section.

    +

    Example:

    +
    Custom Settings
    {
      "imports": {
        "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList.js",
        "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition.js"
      }
    }
    + + +

    Importing Data URLs​

    +

    You may want to import other SFCs without having to host them on a server. +These components can be encoded as data URLs and imported as usual.

    +

    The data URL has to start with data:text/vue to be recognized as a Vue SFC. Any imports in the imported URLs (even if they are also data URLs) are resolved and compiled recursively.

    +
    info

    The code in any code editor can be encoded as data URL from the LiveCodes UI using the "Copy code as data URL" button below the code editor.

    +

    This is the previous demo that uses data URLs (with nested imports) instead of external URLs:

    + + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "activeEditor": "script",
        "script": {
          "language": "vue",
          "content": "<script setup>\nimport Counter from 'data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQppbXBvcnQgeyByZWYgfSBmcm9tICJ2dWUiOw0KaW1wb3J0IFByaW1hcnlCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdFozSmhlUzAxTURBZ2FHOTJaWEk2WW1jdFozSmhlUzAyTURBZ2RISmhibk5wZEdsdmJpQndlUzB4SUhCNExUUWdkR1Y0ZEMxM2FHbDBaU0J5YjNWdVpHVmtJR1J5YjNBdGMyaGhaRzkzTFhoc0lnMEtJQ0ErRFFvZ0lDQWdlM3NnZEdsMGJHVWdmWDBOQ2lBZ1BDOWlkWFIwYjI0K0RRbzhMM1JsYlhCc1lYUmxQZz09IjsNCmltcG9ydCBEYW5nZXJCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdGNtVmtMVFV3TUNCb2IzWmxjanBpWnkxeVpXUXROakF3SUhSeVlXNXphWFJwYjI0Z2NIa3RNU0J3ZUMwMElIUmxlSFF0ZDJocGRHVWdjbTkxYm1SbFpDQmtjbTl3TFhOb1lXUnZkeTE0YkNJTkNpQWdQZzBLSUNBZ0lIdDdJSFJwZEd4bElIMTlEUW9nSUR3dlluVjBkRzl1UGcwS1BDOTBaVzF3YkdGMFpUND0iOw0KDQpjb25zdCBjb3VudCA9IHJlZigwKTsNCjwvc2NyaXB0Pg0KDQo8dGVtcGxhdGU+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC04IGZsZXgganVzdGlmeS1jZW50ZXIiPg0KICAgIDxzcGFuIHJlZj0iY291bnRlciIgY2xhc3M9InRleHQtM3hsIGZvbnQtYm9sZCI+e3sgY291bnQgfX08L3NwYW4+DQogIDwvZGl2Pg0KICA8ZGl2IGNsYXNzPSJ3LWZ1bGwgbXQtNCBmbGV4IGZsZXgtcm93IHNwYWNlLXgtNCBqdXN0aWZ5LWNlbnRlciI+DQogICAgPHByaW1hcnktYnV0dG9uIHJlZj0iZGVjcmVtZW50QnV0dG9uIiB0aXRsZT0iLSIgQGNsaWNrPSJjb3VudC0tIiAvPg0KICAgIDxwcmltYXJ5LWJ1dHRvbiByZWY9ImluY3JlbWVudEJ1dHRvbiIgdGl0bGU9IisiIEBjbGljaz0iY291bnQrKyIgLz4NCiAgPC9kaXY+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC00IGZsZXggZmxleC1yb3cgc3BhY2UteC00IGp1c3RpZnktY2VudGVyIj4NCiAgICA8ZGFuZ2VyLWJ1dHRvbiByZWY9InJlc2V0QnV0dG9uIiB0aXRsZT0iUmVzZXQiIEBjbGljaz0iY291bnQgPSAwIiAvPg0KICA8L2Rpdj4NCjwvdGVtcGxhdGU+';\n</script>\n\n<template>\n  <Counter />\n</template>\n"
        },
        "style": {
          "language": "css",
          "content": "@import \"tailwindcss\";\n"
        },
        "processors": [
          "tailwindcss"
        ]
      }
    };
    createPlayground('#container', options);

    +

    In the above demo, this component is imported:

    +
    data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQppbXBvcnQgeyByZWYgfSBmcm9tICJ2dWUiOw0KaW1wb3J0IFByaW1hcnlCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdFozSmhlUzAxTURBZ2FHOTJaWEk2WW1jdFozSmhlUzAyTURBZ2RISmhibk5wZEdsdmJpQndlUzB4SUhCNExUUWdkR1Y0ZEMxM2FHbDBaU0J5YjNWdVpHVmtJR1J5YjNBdGMyaGhaRzkzTFhoc0lnMEtJQ0ErRFFvZ0lDQWdlM3NnZEdsMGJHVWdmWDBOQ2lBZ1BDOWlkWFIwYjI0K0RRbzhMM1JsYlhCc1lYUmxQZz09IjsNCmltcG9ydCBEYW5nZXJCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdGNtVmtMVFV3TUNCb2IzWmxjanBpWnkxeVpXUXROakF3SUhSeVlXNXphWFJwYjI0Z2NIa3RNU0J3ZUMwMElIUmxlSFF0ZDJocGRHVWdjbTkxYm1SbFpDQmtjbTl3TFhOb1lXUnZkeTE0YkNJTkNpQWdQZzBLSUNBZ0lIdDdJSFJwZEd4bElIMTlEUW9nSUR3dlluVjBkRzl1UGcwS1BDOTBaVzF3YkdGMFpUND0iOw0KDQpjb25zdCBjb3VudCA9IHJlZigwKTsNCjwvc2NyaXB0Pg0KDQo8dGVtcGxhdGU+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC04IGZsZXgganVzdGlmeS1jZW50ZXIiPg0KICAgIDxzcGFuIHJlZj0iY291bnRlciIgY2xhc3M9InRleHQtM3hsIGZvbnQtYm9sZCI+e3sgY291bnQgfX08L3NwYW4+DQogIDwvZGl2Pg0KICA8ZGl2IGNsYXNzPSJ3LWZ1bGwgbXQtNCBmbGV4IGZsZXgtcm93IHNwYWNlLXgtNCBqdXN0aWZ5LWNlbnRlciI+DQogICAgPHByaW1hcnktYnV0dG9uIHJlZj0iZGVjcmVtZW50QnV0dG9uIiB0aXRsZT0iLSIgQGNsaWNrPSJjb3VudC0tIiAvPg0KICAgIDxwcmltYXJ5LWJ1dHRvbiByZWY9ImluY3JlbWVudEJ1dHRvbiIgdGl0bGU9IisiIEBjbGljaz0iY291bnQrKyIgLz4NCiAgPC9kaXY+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC00IGZsZXggZmxleC1yb3cgc3BhY2UteC00IGp1c3RpZnktY2VudGVyIj4NCiAgICA8ZGFuZ2VyLWJ1dHRvbiByZWY9InJlc2V0QnV0dG9uIiB0aXRsZT0iUmVzZXQiIEBjbGljaz0iY291bnQgPSAwIiAvPg0KICA8L2Rpdj4NCjwvdGVtcGxhdGU+
    +

    which imports these:

    +
    data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQpkZWZpbmVQcm9wcyh7DQogIHRpdGxlOiB7DQogICAgdHlwZTogU3RyaW5nLA0KICAgIGRlZmF1bHQ6ICJCdXR0b24iLA0KICB9LA0KfSk7DQo8L3NjcmlwdD4NCg0KPHRlbXBsYXRlPg0KICA8YnV0dG9uDQogICAgY2xhc3M9InRleHQtbWQgZm9udC1tZWRpdW0gYmctZ3JheS01MDAgaG92ZXI6YmctZ3JheS02MDAgdHJhbnNpdGlvbiBweS0xIHB4LTQgdGV4dC13aGl0ZSByb3VuZGVkIGRyb3Atc2hhZG93LXhsIg0KICA+DQogICAge3sgdGl0bGUgfX0NCiAgPC9idXR0b24+DQo8L3RlbXBsYXRlPg==
    +
    data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQpkZWZpbmVQcm9wcyh7DQogIHRpdGxlOiB7DQogICAgdHlwZTogU3RyaW5nLA0KICAgIGRlZmF1bHQ6ICJCdXR0b24iLA0KICB9LA0KfSk7DQo8L3NjcmlwdD4NCg0KPHRlbXBsYXRlPg0KICA8YnV0dG9uDQogICAgY2xhc3M9InRleHQtbWQgZm9udC1tZWRpdW0gYmctcmVkLTUwMCBob3ZlcjpiZy1yZWQtNjAwIHRyYW5zaXRpb24gcHktMSBweC00IHRleHQtd2hpdGUgcm91bmRlZCBkcm9wLXNoYWRvdy14bCINCiAgPg0KICAgIHt7IHRpdGxlIH19DQogIDwvYnV0dG9uPg0KPC90ZW1wbGF0ZT4=
    +

    Root Element​

    +

    To mount the application instance to a specific DOM element use "livecodes-app" as the element id in the HTML. Otherwise, if that element is not found, a new div element is added to document.body and is used to mount the instance.

    +

    Example:

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "html",
          "content": "<h1>Custom Root Element</h1>\n<div id=\"livecodes-app\"></div>\n<p>...other page content</p>\n"
        },
        "script": {
          "language": "vue",
          "content": "<template>I'm a Vue SFC</template>"
        }
      }
    };
    createPlayground('#container', options);

    +

    Language Info​

    +

    Name​

    +

    vue

    +

    Extensions​

    +

    .vue, .vue3

    +

    Editor​

    +

    script, markup

    +

    Compiler​

    +

    The official @vue/compiler-sfc.

    +

    Version​

    +

    @vue/compiler-sfc: v3.5.13

    +

    Code Formatting​

    +

    Using Prettier.

    +

    Limitations​

    +

    Currently, Vue support has the following limitations:

    +
      +
    • SSR is not supported.
      • +
    • The defineProps() macro cannot infer props from TypeScript types not defined in the same file.
      • +
    +

    PRs are welcome.

    +

    Starter Template​

    +

    https://livecodes.io/?template=vue

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/vue2.html.md b/docs/languages/vue2.html.md new file mode 100644 index 0000000..70eace6 --- /dev/null +++ b/docs/languages/vue2.html.md @@ -0,0 +1,55 @@ +# Vue 2 SFC + +[Vue.js](https://vuejs.org/), The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces. + +This is the documentation for LiveCodes language support for the older **Vue 2** [Single-File Component (SFC)](https://v2.vuejs.org/v2/guide/single-file-components.html). For the latest Vue SFC head to [Vue 3 SFC documentations](./vue.html.md). + +:::caution + +Please note that, officially, Vue 2 has reached [End of Life (EOL)](https://v2.vuejs.org/eol/) on December 31st, 2023. + +::: + +## Important Note + +Vue 2 SFC language support in LiveCodes is different from that for Vue 3. + +Unlike Vue 3, which uses the official SFC compiler ([@vue/compiler-sfc](https://github.com/vuejs/core/tree/main/packages/compiler-sfc)) to compile SFC to regular JavaScript which is then sent to the result page, Vue 2 SFC support uses [vue3-sfc-loader](https://github.com/FranckFreiburger/vue3-sfc-loader), which is loaded in the result page and the SFC is compiled on the fly in the end user's browser. This has a significant performance impact. + +[vue3-sfc-loader](https://github.com/FranckFreiburger/vue3-sfc-loader) is currently at version 0.8.4, which is compatible with Vue 2 version 2.6.14. +Vue 2.7 is not supported. + +## Usage + +Vue 2 SFC support includes Scoped CSS, pre-processors, JSX and `src` imports. + +## Language Info + +### Name + +`vue2` + +### Extensions + +`.vue2` + +### Editor + +`script` + +## Compiler + +[vue3-sfc-loader](https://github.com/FranckFreiburger/vue3-sfc-loader). + +### Version + +`vue3-sfc-loader`: v0.9.5, which is compatible with Vue v2.6.14 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Links + +- [Vue 2 docs](https://v2.vuejs.org/) +- [Vue 2 SFC](https://v2.vuejs.org/v2/guide/single-file-components.html) \ No newline at end of file diff --git a/docs/languages/vue2/index.html b/docs/languages/vue2/index.html new file mode 100644 index 0000000..f09afe3 --- /dev/null +++ b/docs/languages/vue2/index.html @@ -0,0 +1,39 @@ +Vue 2 SFC | LiveCodes

    Vue 2 SFC

    +

    Vue.js, The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces.

    +

    This is the documentation for LiveCodes language support for the older Vue 2 Single-File Component (SFC). For the latest Vue SFC head to Vue 3 SFC documentations.

    +
    caution

    Please note that, officially, Vue 2 has reached End of Life (EOL) on December 31st, 2023.

    +

    Important Note​

    +

    Vue 2 SFC language support in LiveCodes is different from that for Vue 3.

    +

    Unlike Vue 3, which uses the official SFC compiler (@vue/compiler-sfc) to compile SFC to regular JavaScript which is then sent to the result page, Vue 2 SFC support uses vue3-sfc-loader, which is loaded in the result page and the SFC is compiled on the fly in the end user's browser. This has a significant performance impact.

    +

    vue3-sfc-loader is currently at version 0.8.4, which is compatible with Vue 2 version 2.6.14. +Vue 2.7 is not supported.

    +

    Usage​

    +

    Vue 2 SFC support includes Scoped CSS, pre-processors, JSX and src imports.

    +

    Language Info​

    +

    Name​

    +

    vue2

    +

    Extensions​

    +

    .vue2

    +

    Editor​

    +

    script

    +

    Compiler​

    +

    vue3-sfc-loader.

    +

    Version​

    +

    vue3-sfc-loader: v0.9.5, which is compatible with Vue v2.6.14

    +

    Code Formatting​

    +

    Using Prettier.

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/wat.html.md b/docs/languages/wat.html.md new file mode 100644 index 0000000..a315d2f --- /dev/null +++ b/docs/languages/wat.html.md @@ -0,0 +1,3 @@ +# WebAssembly Text + +TODO... \ No newline at end of file diff --git a/docs/languages/wat/index.html b/docs/languages/wat/index.html new file mode 100644 index 0000000..4f4ce6f --- /dev/null +++ b/docs/languages/wat/index.html @@ -0,0 +1,12 @@ +WebAssembly Text | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/languages/windicss.html.md b/docs/languages/windicss.html.md new file mode 100644 index 0000000..b16d987 --- /dev/null +++ b/docs/languages/windicss.html.md @@ -0,0 +1,3 @@ +# Windi CSS + +TODO... \ No newline at end of file diff --git a/docs/languages/windicss/index.html b/docs/languages/windicss/index.html new file mode 100644 index 0000000..56bca5b --- /dev/null +++ b/docs/languages/windicss/index.html @@ -0,0 +1,12 @@ +Windi CSS | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/license.html.md b/docs/license.html.md new file mode 100644 index 0000000..70830e2 --- /dev/null +++ b/docs/license.html.md @@ -0,0 +1,9 @@ +# License + +LiveCodes is released under the permissive [MIT License](https://github.com/live-codes/livecodes/blob/develop/LICENSE) © [Hatem Hosny](https://github.com/hatemhosny). + +Third party packages used in LiveCodes and their licenses are [listed here](https://github.com/live-codes/livecodes/blob/develop/vendor-licenses.html.md). + +The source code is available on [GitHub](https://github.com/live-codes/livecodes). + +Please consider [sponsoring LiveCodes](./sponsor.html.md) to support its maintenance and continued development. \ No newline at end of file diff --git a/docs/license/index.html b/docs/license/index.html new file mode 100644 index 0000000..da9d665 --- /dev/null +++ b/docs/license/index.html @@ -0,0 +1,15 @@ +License | LiveCodes
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/llms-full.txt b/docs/llms-full.txt new file mode 100644 index 0000000..6bcd320 --- /dev/null +++ b/docs/llms-full.txt @@ -0,0 +1,24890 @@ +# LiveCodes + +> LiveCodes is a feature-rich, open-source, client-side code playground that supports React, Vue, Svelte, Solid, JavaScript, TypeScript, CSS, Sass, Tailwind CSS, Python, Go, Ruby, PHP, and 90+ languages/frameworks. + +A large number of starter templates are available to help you get started quickly. +Projects can be saved, shared, exported (e.g. to GitHub Gists), deployed (e.g. to GitHub Pages), or embedded in web pages. +A powerful yet easy-to-use SDK enables the creation of and communication with embedded playgrounds. + +With extensive language support and high configurability, LiveCodes can easily adapt to your needs. +It offers excellent mobile support, featuring a responsive layout and a touch-friendly code editor. + +LiveCodes is an outstanding tool for learning, teaching, prototyping, sharing, and testing code. +It can be easily self-hosted, if needed, on any static file server. + +LiveCodes is completely free for unlimited use, with no ads and no account required. +Its MIT License also permits commercial use. + +- [Docs](https://livecodes.io/docs/llms.txt) +- [Full Docs](https://livecodes.io/docs/llms-full.txt) +- [README](https://raw.githubusercontent.com/live-codes/livecodes/refs/heads/develop/README.md) + + +# LiveCodes + +A Code Playground That Just Works! + +

    + +

    + +A [feature-rich](https://livecodes.io/docs/features/), open-source, **client-side** code playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and [90+ languages/frameworks](https://livecodes.io/docs/languages/). + +[![LiveCodes: uptime status](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/live-codes/upptime/master/api/live-codes/uptime.json)](https://status.livecodes.io) +[![LiveCodes: app version](https://img.shields.io/github/v/release/live-codes/livecodes?label=app)](https://livecodes.io) +[![LiveCodes: npm version](https://img.shields.io/npm/v/livecodes)](https://www.npmjs.com/package/livecodes) +[![LiveCodes: npm downloads](https://img.shields.io/npm/dm/livecodes)](https://www.npmjs.com/package/livecodes) +[![LiveCodes: jsdelivr downloads](https://data.jsdelivr.com/v1/package/npm/livecodes/badge?style=rounded)](https://www.jsdelivr.com/package/npm/livecodes) +[![LiveCodes: languages](https://img.shields.io/badge/languages-96-blue)](https://livecodes.io/docs/languages/) +[![LiveCodes: docs](https://img.shields.io/badge/Documentation-575757?logo=gitbook&logoColor=white)](https://livecodes.io/docs/) +[![LiveCodes: llms.txt](https://img.shields.io/badge/llms.txt-575757?logo=googledocs&logoColor=white)](https://livecodes.io/docs/llms.txt) +[![LiveCodes: llms-full.txt](https://img.shields.io/badge/llms--full.txt-575757?logo=googledocs&logoColor=white)](https://livecodes.io/docs/llms-full.txt) +[![Codacy Badge](https://app.codacy.com/project/badge/Grade/3d39f15618e048db9d13c2a0e8002b33)](https://www.codacy.com/gh/live-codes/livecodes/dashboard?utm_source=github.com&utm_medium=referral&utm_content=live-codes/livecodes&utm_campaign=Badge_Grade) +[![Lokalise: translated](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/live-codes/lokalise-badge/main/badges/translated.json)](https://app.lokalise.com/public/34958094667a72e9454592.95108106/) +[![Lokalise: UI languages](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/live-codes/lokalise-badge/main/badges/languages.json)](https://app.lokalise.com/public/34958094667a72e9454592.95108106/) +[![license - MIT](https://img.shields.io/github/license/live-codes/livecodes)](https://github.com/live-codes/livecodes/blob/develop/LICENSE) +[![LiveCodes: GitHub repo](https://img.shields.io/github/stars/live-codes/livecodes?style=flat&logo=github)](https://github.com/live-codes/livecodes) +[![LiveCodes: GitHub repo](https://img.shields.io/github/forks/live-codes/livecodes?style=flat&logo=github)](https://github.com/live-codes/livecodes) +[![Follow us on X (formerly Twitter)](https://img.shields.io/badge/Follow%20@livecodes__io-575757?logo=x)](https://x.com/livecodes_io) + +[Try it now on livecodes.io](https://livecodes.io) + +[Documentations](https://livecodes.io/docs) + +[What makes LiveCodes different?](https://livecodes.io/docs/why) + +![LiveCodes list of languages screenshot](https://dev.livecodes.io/docs/img/screenshots/livecodes-overview.jpg) + +## A Code Playground That Just Works! + +- No servers to configure (or pay for!) +- No databases to maintain (or pay for!) +- No installs +- No configuration files +- No build steps +- No subscription fees (free and open-source) +- No account required \* +- No limits for usage (unlimited private projects) +- 90+ languages/frameworks/processors +- Large set of features and integrations +- Import code from a wide variety of sources +- Use modules from npm, deno.land/x, jsr, GitHub, and others +- Easily embed it in your web pages +- It runs in the browser (client-side) + +\* GitHub account is required only for features that use GitHub Integration. + +### Quick Start + +#### Standalone App + +1. Go to [livecodes.io](https://livecodes.io) + +... and enjoy all the [features](https://livecodes.io/docs/features/)! + +#### Embedded Playground + +Add this code to your page: + +```html +
    + +``` + +Check documentations for Embedded Playgrounds. + +#### Self-hosted + +1. Download a [release](https://github.com/live-codes/livecodes/releases) +2. Put it on a static file server (for free!) 1, 2, 3, 4, 5 + + Check the guide for self-hosting (including the built-in setup to deploy to GitHub Pages). + +... and it just works! + +## Feature Summary + +- A wide range of [language support](https://livecodes.io/docs/languages/) (90+ languages/frameworks/processors) +- [Powerful Editor](https://livecodes.io/docs/features/editor-settings) +- Mobile-friendly +- [External resources/libraries](https://livecodes.io/docs/features/external-resources) +- [Import modules](https://livecodes.io/docs/features/module-resolution) from npm, deno.land/x, jsr, GitHub and others +- [Code Pre-fill](https://livecodes.io/docs/features/code-prefill) +- [Import](https://livecodes.io/docs/features/import)/[Export](https://livecodes.io/docs/features/export) [projects](https://livecodes.io/docs/features/projects) +- [Share](https://livecodes.io/docs/features/share) +- [Embed the playground](https://livecodes.io/docs/features/embeds) in any web page +- [Display modes](https://livecodes.io/docs/features/display-modes) +- [Deploy](https://livecodes.io/docs/features/deploy) +- [Starter Templates](https://livecodes.io/docs/features/templates) +- [Assets](https://livecodes.io/docs/features/assets) +- [Themes](https://livecodes.io/docs/features/themes) +- [Dev Tools](https://livecodes.io/docs/features/tools-pane) ([console](https://livecodes.io/docs/features/console), [compiled code viewer](https://livecodes.io/docs/features/compiled-code), [test runner](https://livecodes.io/docs/features/tests)) +- [Code formatting](https://livecodes.io/docs/features/code-format) +- [Intellisense](https://livecodes.io/docs/features/intellisense) +- [AI Code Assistant 🪄](https://livecodes.io/docs/features/ai) +- [Lite mode](https://livecodes.io/docs/features/lite) +- [Read-only mode](https://livecodes.io/docs/features/read-only) +- [Broadcast](https://livecodes.io/docs/features/broadcast) +- [Sync](https://livecodes.io/docs/features/sync) +- [Backup/Restore](https://livecodes.io/docs/features/backup-restore) +- [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)) +- 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) + +For details check the [full list of features](https://livecodes.io/docs/features/). + +## LiveCodes SDK + +The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds. + +The SDK is provided as a light-weight ([less than 5kb gzipped](https://bundlephobia.com/package/livecodes)), zero-dependencies [npm package](https://livecodes.io/docs/sdk/#npm-package), that is also available from [CDNs](https://livecodes.io/docs/sdk/#cdn). It can be used to create playgrounds with a wide variety of [configurations](https://livecodes.io/docs/configuration/configuration-object.md) and [embed options](https://livecodes.io/docs/sdk/js-ts.md#embed-options). In addition, [SDK methods](https://livecodes.io/docs/sdk/js-ts.md#sdk-methods) allow programmatic communication and control of the playgrounds during runtime. + +### Installation + +``` +npm i livecodes +``` + +### Usage + +Example: ([open in LiveCodes](https://livecodes.io/?x=code/N4IgLglmA2CmIC4QBkIDdYGED2ATWAzgAQDKAIgNJH4C22IANCPgQMYBOEADpNgHaIQjEAAtYAQ1yCAPDVhhxRViPHsC8gLwAdEAFUAKgDEAtAA4dRAPQA+LX1nzFfcXO0g0EWAHcu2dmAtWfjBYPjA3LwhcMBENfA9WWGNI6JEGIgg+KAhxaGM2XNgNAEYAOgAGCxthETAaaABBMDA1QWhxPgBzN1DA9oICNx1hBU6CRABtAF0mcVZIDABRXCg-QTZOHmEaVQBrAFcuRFB2rv3xTvgkWvrhILDQsBkVtAzcN3uFTNh2HWtpSwvawgAC+TAIYAAnnBjiBTp1zpdBKwBndgo9BKDwRxuE8ECcOgiLlcQAArcRocQbXFoh5hQQQGi+fxEYBKdgSEIABXakM67Gw+z4uCIIKIADMBTQiAByaDoWBBFgygDcWl+fHVdg4nNgPPEfIFQtwAAoZQBiT7ib7sGXpYBavhEJT8cUQToIVmO53OnbsA5cT0OjU+n3wxGwT0yv27XDYLx8O3e0MuulgKPmogACVg0Gg2CIAHU-NBcABCJMhn1g5M1qsebxRjkEfbQMCVuwggCUao1WJAEOhhDE8nGCGm2M2YDHE5AKIIXOb8kxTC4AsSAz8M5mc-2EOwNBI8kgXTHwDBIEZzOnxwvUK4hFvTBCELPcMJEcE98IOK2TE+GJIP2GBqBA-CCAAzBBIzYNg0BvqE4gAEZwFISC5NAwhzAsJL3AQcHwOCChgHuyL5uoUggiCQA)) + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container', { + config: { + markup: { + language: 'markdown', + content: '# Hello World!', + }, + }, + view: 'result', +}); +``` + +The [JavaScript SDK](https://livecodes.io/docs/sdk/js-ts.md) is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently [React](https://livecodes.io/docs/sdk/react.md) and [Vue](https://livecodes.io/docs/sdk/vue.md)). The SDK can be used in [Svelte](https://livecodes.io/docs/sdk/svelte.md) directly without wrappers. [TypeScript support](https://livecodes.io/docs/sdk/js-ts.md#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)) + +```jsx +import LiveCodes from 'livecodes/react'; + +const config = { + markup: { + language: 'markdown', + content: '# Hello World!', + }, +}; +const Playground = () => ; +export default Playground; +``` + +Vue SDK example: ([open in LiveCodes](https://livecodes.io/?x=code/N4IgLglmA2CmIC4QBkIDdYGED2ATWAzgAQBqArrEQMoAiA0kfgLbYgA0I+BAxgE4QAHSNgB2iEOxAALWAENc4gDxNYYWUW5TZvAqoC8AHRABVACoAxALQAOI0QD0APgMjlq9SNkrDINBFgA7gLYvGB23KJgsCJgPgEQuGBSevh+3LCW8YlSbEQQIlAQstCWPMWwegCMAHQADHZOklJgTNAAgmBgOuLQsiIA5j7R4b0EBD5Gkmr9BIgA2gC6HLLckBgAorhQIeI8-EKSTNoA1mQCiKC9A2Sy-fBIza2SETHRYOIgAL4cBGAAnnALiArv0bndxNwxs9Im8Pt8QHtBO8EJc+qDbvdfBRoa8YkpEUIiLowGdnLwXEQ8kxgqEiKgMDguEQAGa8bBMIgAcmg6FgES49jQFE5AG4DOSROKKRpRL8ZSJmRB+kQ9ERgFKRJTKUdeKcBAg1RqtVqQWDYAbOTrjrhsAERJy2EbjfKojELQBiIgACVg0Gg2CIAHUQtBcABCB1OynfJ2fMUSxT2AlgMkuDWKKLU3pRVOaoiKelYPCEIgIF6KwZGctKux+QI+XiEMjQMIgBy5xOZgTZ2C5r4-f5wAgyVSzBCLH58JFjicgSEEAAKjeJHw4AjZ6TGIRnSznZF+7KoqkgAzHwHhEGpITAZ-h-wEhAud8IN6Bpox4nvhCnBw4L1dyISPCGA6BAojiAAzBBUzYNg0BniA0SyAARnAChIMU0CSCsayYi8BBwfAA6yCSY5zv6ugKJ8nxAA)) + +```html + + + +``` + +In addition, the SDK allows creating links to playgrounds: + +```js +import { getPlaygroundUrl } from 'livecodes'; + +const url = getPlaygroundUrl({ + config: { + markup: { + language: 'markdown', + content: '# Hello World!', + }, + }, +}); + +console.log(url); +``` + +See [SDK docs](https://livecodes.io/docs/sdk/) for more details. + +## Documentations + +Comprehensive documentations for [features](https://livecodes.io/docs/features/), [getting started](https://livecodes.io/docs/getting-started), [configuration](https://livecodes.io/docs/configuration/) and [SDK](https://livecodes.io/docs/sdk/) are available on: + +https://livecodes.io/docs/ + +The documentations include demos, code samples, screenshots, [Storybook](https://livecodes.io/stories) and [TypeScript types](https://livecodes.io/docs/sdk/js-ts#typescript-types). + +## Updates + +Keep up with the latest changes: + +- Twitter/X: [@livecodes_io](https://twitter.com/livecodes_io) +- Blog: [blog.livecodes.io](https://blog.livecodes.io/) +- Development build: [dev.livecodes.io](https://dev.livecodes.io/) + +## Feedback + +We welcome feedback! + +Please start a new [issue](https://github.com/live-codes/livecodes/issues/new/choose) or [discussion](https://github.com/live-codes/livecodes/discussions/new). + +For security reports please refer to [SECURITY.md](https://github.com/live-codes/livecodes/blob/develop/SECURITY.md). + +You may also reach out to us using the [contact form](https://livecodes.io/docs/contact). + +## Contribution + +Contributions are welcome and highly appreciated. + +A huge shout-out to our wonderful [contributors](https://github.com/live-codes/livecodes/graphs/contributors)! Your hard work makes all the difference! + +Please refer to the [contribution guide](https://github.com/live-codes/livecodes/blob/HEAD/CONTRIBUTING.md). + +## Credits + +LiveCodes uses services that are generously provided by: + +

    + + Cloudflare Pages +

    +

    +

    + + jsDelivr +

    +

    +

    + + esm.sh +

    +

    +

    + + unpkg +

    +

    +

    + + Codeium +

    +

    +

    + + bundlejs +

    +

    +

    + + dpaste +

    +

    +

    + + GitHub +

    +

    +

    + + Netlify +

    +

    +

    + + SonarCloud +

    +

    +

    + + Codacy +

    +

    +

    + + BundleWatch +

    +

    +

    + + BrowserStack +

    +

    +

    + + Lokalise +

    +

    + +## Third Party Packages + +Packages used by LiveCodes and their licenses are [listed here](https://github.com/live-codes/livecodes/blob/develop/vendor-licenses.md). + +## License + +[MIT](https://github.com/live-codes/livecodes/blob/HEAD/LICENSE) License © [Hatem Hosny](https://github.com/hatemhosny) + +## Sponsor + +LiveCodes is free and open-source. The app does not contain ads or require subscription. It allows unlimited usage without any restrictions. + +By sponsoring LiveCodes, you will be supporting the ongoing development and maintenance of the project, as well as helping to ensure that it remains a valuable resource for the developer community. + +Please consider [becoming a sponsor](https://livecodes.io/docs/sponsor). + +--- + + + +# Overview + +[LiveCodes](https://livecodes.io) is an [open-source](./license.html.md) client-side code playground. It is [feature-rich](./features/index.html.md) with support for [90+ languages/frameworks](./languages/index.html.md). It can be used as a [standalone app](./getting-started.html.md)#standalone-app) or [embedded](./features/embeds.html.md) in any web page. A powerful [SDK](./sdk/index.html.md) is available to facilitate embedding and communication with embedded playgrounds. + +The sections below include the documentation details: + +```mdx-code-block +import DocCardList from '@theme/DocCardList'; +import {useCurrentSidebarCategory} from '@docusaurus/theme-common'; + + +``` + +--- + + + +# Why Another Playground? + +There are great products like [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), [JS Bin](https://jsbin.com/), [CodeSandbox](https://codesandbox.io/), [Replit](https://replit.com/) and many others, which LiveCodes does not aim to replace or compete with. On the contrary, it aims to [integrate](./features/integrations.html.md) with as many of these services as their APIs allow. + +## What makes LiveCodes different? + +### Language Support + +Currently, there are 90+ languages/frameworks supported. These include: + +- Web languages (HTML, CSS & JavaScript). +- Web frameworks/libraries (e.g. React JSX/TSX, Vue SFC, Svelte SFC, Solid, MDX, Astro). +- Languages that transpile to JavaScript (e.g. TypeScript, CoffeeScript, LiveScript, ReScript). +- Languages/frameworks that generate CSS (e.g. SCSS, Less, Stylus, Tailwind CSS, UnoCSS). +- CSS processors (e.g. PostCSS, Autoprefixer, Lightning CSS, CSS Modules, cssnano). +- Traditional programming languages (e.g. Python, Ruby, Go, PHP, C++, R, Lua, Scheme, Perl). +- Data manipulation/logic languages (e.g. SQL, Prolog). +- Authoring/templating languages (e.g Markdown, AsciiDoc, Pug, Handlebars, Haml). +- Low-code/visual editors (e.g. blockly, rich text editor). +- Modeling languages/diagram-as-code (e.g. Gnuplot, Graphviz, Mermaid, Vega, Plotly). +- Languages that target WebAssembly (e.g. AssemblyScript, WebAssembly Text Format). +- ... and many more. + +For a full list check the [Languages](./languages/index.html.md) section. + +Generally, if you are a developer (or want to be one), there is a big chance you will find something interesting to do with LiveCodes. + +### Client-Side! + +All processing and code transformations run in the browser on the client-side. After the initial load, the app gets significantly faster without having to wait for server rounds. Lazy-loading is heavily used. Only parts of the app required for the selected languages/features are downloaded. + +The code you write in LiveCodes does not leave your computer. All projects are private unless you choose to share/export/deploy them. + +Being a client-side app allows it to be hosted on any static file server or CDN, which removes the high requirements needed by other alternatives (like server storage or memory). This makes LiveCodes available for a large number of developers without requiring them to pay for servers, so it can stay free with unlimited usage 😊. + +### Developer Tool + +LiveCodes aims to be a feature-rich, easy to use playground that can be used for prototyping and education. The other main goal (in fact, that was the motive for its development), is to allow library developers to use it for documentation of their libraries and showcase their products. This can be achieved by [embedding playgrounds](./features/embeds.html.md) in blogs, tutorials, documentation and educational websites. In addition, private (unpublished) modules can be imported with editor auto-completion and [IntelliSense](./features/intellisense.html.md). + +That can be done using the official app ([livecodes.io](https://livecodes.io)), or as a [self-hosted](./features/self-hosting.html.md) option. Again, being a client-side-only app, LiveCodes becomes more convenient for not needing special server requirements, while features like export and deploy are provided by APIs of external services. + +LiveCodes does NOT aim to be a social coding platform. It will stay as a backendless developer tool. Other platforms are already doing a great job in this regards. + +### Build-Free Development Environment + +LiveCodes provides many of the tools you may already be using. These include Monaco editor (that powers [VS Code](https://code.visualstudio.com/)), [Prettier](https://prettier.io/), [Emmet](https://emmet.io/), [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [SCSS](https://sass-lang.com/), [Less](https://lesscss.org/), [PostCSS](https://postcss.org/), [Jest](https://jestjs.io/) and [Testing Library](https://testing-library.com/), among others. [NPM modules](./features/module-resolution.html.md) can be imported as usual. All these tools run seamlessly in the browser without any explicit build step. It feels like a very light-weight version of your own local development environment with the keyboard shortcuts, IntelliSense and code navigation features. + +It just works™ without having to `npm install` anything. Not even on the server (because there is no server!). + +This can markedly improve productivity, reduce the mental load required for all the traditional setup and can significantly decrease the barrier to entry for learning new technologies. + +### Web Platform + +The output of code written in LiveCodes is a [web page](./features/result.html.md). Whatever language/syntax you use, the result can ultimately be viewed as a web page which you can interact with, [test](./features/tests.html.md), [share](./features/share.html.md) or [deploy](./features/deploy.html.md). Check the [starter templates](https://livecodes.io?screen=new) for examples. + +Of course, the app can be still used as a REPL with the output seen in the integrated [console](./features/console.html.md). + +### Powerful SDK + +The LiveCodes app ([standalone](./getting-started.html.md)#standalone-app) or [self-hosted](./features/self-hosting.html.md)) can be [embedded](./features/embeds.html.md) in any web page. A powerful [SDK](./sdk/index.html.md) allows the embedding page to interact with the playground (e.g. run, get/set source code, format, get result page or compiled code, get share URL, listen to changes, run tests, get test results, change layout, etc.). This enables other apps to be built on top of LiveCodes. + +Your imagination is the limit! + +### Free and Open-Source + +LiveCodes is a free product that allows unrestricted use for the hosted app and for the self-hosted option. It is licensed under the permissive [MIT license](./license.html.md) which allows free commercial use. + +Please consider [sponsoring LiveCodes](./sponsor.html.md) if you find it useful, to support its maintenance and continued development. + +:::caution Under Development + +LiveCodes is currently in **public beta**. It is in active development. However, please take the time to try it. Use [permanent URL](./features/permanent-url.html.md) and pinned [library version](./sdk/index.html.md) to avoid breaking changes. Your feedback and contribution are highly appreciated. + +::: + +Enough talk, let's get started. + +--- + + + +# Getting Started + +import LiveCodes from '../src/components/LiveCodes.tsx'; + +There are multiple options: + +## Standalone App + +The easiest way to get started with LiveCodes is to just use the app (https://livecodes.io). + +It is packed with [features](./features/index.html.md) and offers various ways to [import code](./features/import.html.md). + +## Embedded Playgrounds + +LiveCodes playgrounds can be easily [embedded](./features/embeds.html.md) into any web page. This can be achieved using: + +### App Embed Screen + +The [standalone app](#standalone-app) allows you to embed any project from the [embed screen](./features/embeds.html.md). The UI allows setting embed options and shows a preview of the embedded playground. +Copy the generated code snippet (at the bottom of the screen) and add it to the web page that you want to embed the playground in. + +### SDK + +LiveCodes [SDK](./sdk/index.html.md) is available as [npm package](https://www.npmjs.com/package/livecodes) to allow easy embedding and communication with playgrounds. + +#### Option 1: Using a bundler + +Install from npm. + +```bash npm2yarn +npm install livecodes +``` + +then you can use it like that: + +```js title="index.js" +import { createPlayground } from 'livecodes'; + +createPlayground('#container', { + template: 'react', + // other embed options +}); +``` + +#### Option 2: Load from CDN + +ESM: + +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import CodeBlock from '@theme/CodeBlock'; + +export const ESMCode = () => { + const { siteConfig } = useDocusaurusContext(); + return ( + + {`
    \n`} +     + ); +}; + + + +UMD: + +export const UMDCode = () => { + const { siteConfig } = useDocusaurusContext(); + return ( + + {`
    \n\n +`} +     + ); +}; + + + +#### Add your own content + +You may use any of the methods to [prefill the playground](./features/code-prefill.html.md) with your own code. + +Example: + +```js title="index.js" +import { createPlayground } from 'livecodes'; + +const config = { + markup: { + language: 'markdown', + content: '# Hello LiveCodes!', + }, + style: { + language: 'css', + content: 'body { color: blue; }', + }, + script: { + language: 'javascript', + content: 'console.log("hello from JavaScript!");', + }, + activeEditor: 'script', +}; + +createPlayground('#container', { config, params: { console: 'open' } }); +``` + +export const config = { + markup: { + language: 'markdown', + content: '# Hello LiveCodes!', + }, + style: { + language: 'css', + content: 'body { color: blue; }', + }, + script: { + language: 'javascript', + content: 'console.log("hello from JavaScript!");', + }, + activeEditor: 'script', +}; + +Live demo: +(this is an interactive playground - try editing the code!) + + + +Please refer to the section on [Embedded Playgrounds](./features/embeds.html.md) for more details. + +## Self-Hosting + +LiveCodes can be hosted on any static file server or CDN. + +The easiest way is to download the app from [releases](https://github.com/live-codes/livecodes/releases), extract the folder and add it to your website. + +Please check the section on [self-hosting](./features/self-hosting.html.md) for other methods of self-hosting, including the built-in setup to deploy to GitHub pages and how to use the SDK with the self-hosted app. + +--- + + + +# Features + +## Overview + +_LiveCodes_ is an open-source, client-side, code playground that runs in the browser. It enables quick prototyping and experimenting with a wide variety of [technologies](../languages/index.html.md) (including 90+ languages, frameworks and processors) without having to manually setup a development environment for each. The [result](./result.html.md) is displayed as a regular web page. The rapid feedback of previewing the result page without waiting for build steps significantly boosts productivity. + +![LiveCodes screenshot](../../static/img/screenshots/features-1.jpg) + +![LiveCodes screenshot](../../static/img/screenshots/features-2.jpg) + +![LiveCodes screenshot](../../static/img/screenshots/features-3.jpg) + +In this page, a quick overview of the important features are presented. A more detailed description of each feature is described in the following sections. + +## Powerful Editor + +The default code editor is the powerful editor that powers [VS Code](https://code.visualstudio.com/), featuring code-completion, go-to-definition, multi-cursor support and other powerful features you got used to. The editor is very [customizable](./editor-settings.html.md). It supports [keyboard shortcuts](./keyboard-shortcuts.html.md), [code formatting](./code-format.html.md), [Emmet abbreviations](./editor-settings.html.md)#emmet) and even [Vim and Emacs bindings](./editor-settings.html.md)#editor-modes). + +## AI Code Assistant + +LiveCodes supports AI-powered code completion, totally for **free**, using [Codeium](https://codeium.com/), the ultrafast Copilot alternative. Install the [Codeium chrome extension](https://codeium.com/chrome_tutorial) and enjoy the magic! + +## Mobile-friendly + +The responsive layout allows working on devices with different screen sizes. On mobile, a lighter-weight touch-friendly code editor (CodeMirror 6) is used, so that you can experiment your ideas on the go. + +## External Code/Libraries + +[External scripts/stylesheets](./external-resources.html.md) can be added to the web page. There is a UI screen that helps you search for and add NPM libraries and google fonts. Moreover, [NPM modules can be imported](./module-resolution.html.md) without the need for any `npm install`s. + +## Import and Code Pre-fill + +Code can be [imported](./import.html.md) from a variety of sources including GitHub gist, GitHub file, directory in a GitHub repo, Gitlab snippet, Gitlab file, directory in a Gitlab repo, JS Bin, raw code, code in web page DOM and code in zip file. You can also [pre-fill code](./code-prefill.html.md) using various ways. + +## Share/Export + +Projects can be easily [shared](./share.html.md) as URLs or QR codes. In addition, you may [export](./export.html.md) any project as HTML, JSON or zip file containing source code files. You may also export to other services like GitHub gists, CodePen or JSFiddle. + +## Embed + +Projects can be [embedded](./embeds.html.md) in any web page. The embed screen allows you to customize the embed options and preview the resulting playground. An easy-to-use, yet powerful, [SDK](../sdk/index.html.md), that allows [communication](../sdk/js-ts.html.md)#sdk-methods) between the embedding page and the playground. + +## Deploy + +Projects can be [deployed](./deploy.html.md) to public URLs that can be shared with others. This is hosted for free on GitHub Pages. + +## Starter Templates + +A large number of [starter templates](./templates.html.md) are available. They can be used to get you started with most of the supported technologies. + +![Starter templates](../../static/img/screenshots/templates-1.jpg) + +## Assets + +Your own local assets (e.g. images, icons, fonts, local scripts and stylesheets) can be added to the app and then used in any project. The assets are made available even when the projects are shared, exported or deployed. + +## Dev Tools + +[Tools](./tools-pane.html.md) like [console](./console.html.md), [compiled code viewer](./compiled-code.html.md) and [test runner](./tests.html.md) can significantly improve your development experience. + +## Broadcast + +You can [broadcast](./broadcast.html.md) source code or result in real-time to others. This can be of great value as an educational tool and for demo purposes. + +## Sync/Backup/Restore + +Do you work on multiple devices? No Problem! You may [sync](./sync.html.md), [backup and restore](./backup-restore.html.md) your data any time on any device. + +## Themes + +LiveCodes comes with dark and light themes. In addition, a theme color can be set to change the app color. + +## i18n + +LiveCodes supports [internationalization](./i18n.html.md) for multiple languages. + +## Client-side! + +LiveCodes runs in the browser, where all the processing/transpilation occurs, with no server rounds required. So, after the initial load, it becomes pretty fast. It can be hosted on any static file server or CDN. No `npm install`s. Just the browser! + +## Developer-friendly + +LiveCodes makes it easy to [get started](../getting-started.html.md). It is highly [configurable](../configuration/index.html.md). Lots of features can be configured by URL [query params](../configuration/query-params.html.md). The [SDK](../sdk/index.html.md) facilitates [embedding](./embeds.html.md) playgrounds and allows easy [communication](../sdk/js-ts.html.md)#sdk-methods) with them. The SDK is available for use in [JS/TS](../sdk/js-ts.html.md), [React](../sdk/react.html.md) [Vue](../sdk/vue.html.md) and [Svelte](../sdk/svelte.html.md). + +## Comprehensive Documentations + +Rich documentations with screenshots, code samples and live demos are available. They cover the app [features](../features/index.html.md), [configuration](../configuration/index.html.md), [supported languages](../languages/index.html.md) and [SDK](../sdk/index.html.md) (including [TypeScript Types](../api/globals.md)). A gallery of usage examples is provided as a [storybook](pathname:///../stories). + +## Focused on Privacy + +Projects are private by default. The code you write in LiveCodes never leaves your computer, unless you choose to [share](./share.html.md), [export](./export.html.md), [broadcast](./broadcast.html.md) or [sync](./sync.html.md) it. User data is stored in the browser. + +## Free and Open-Source + +LiveCodes is free, with no limits for use and no ads. +No account is even required (unless [GitHub integration](./github-integration.html.md) is needed). +Do you want to [self-host](./self-hosting.html.md) it for commercial use? No problem! It is [MIT-licensed](../license.html.md) 🎉. Please consider [sponsoring LiveCodes](../sponsor.html.md) ❤. + +This was a quick overview of the important features of LiveCodes. A more detailed description of each feature is described in the following sections. + +--- + + + +# Projects + +A _LiveCodes_ project is a combination of markup, styles & scripts that result in a **single web page**. Check the section about the [Result Page](./result.html.md) to have more details about how this page is constructed. + +There is no concept of file system or, for example, organizing multiple files in a directory structure of a single project. + +:::info Simple Concept +code in [markup editor](#markup-editor) + code in [style editor](#style-editor) + code in [script editor](#script-editor) + [external resources](./external-resources.html.md) => [result page](./result.html.md) +::: + +## Markup Editor + +Code added in this editor eventually represents the page markup (HTML). + +Examples for languages supported include HTML, Markdown, Pug, Haml. + +## Style Editor + +Code added in this editor eventually represents the page styles (CSS). + +Examples for languages supported include CSS, SCSS, SASS, Less, Stylus. In addition, many CSS processors are supported (e.g. Autoprefixer, postcss-preset-env, postcss-import-url, PurgeCSS, Tailwind CSS). + +## Script Editor + +Code added in this editor eventually represents the page scripts. + +These are either: + +- Languages compiled to JavaScript (e.g TypeScript, JSX, CoffeeScript) +- Languages that are interpreted by a JavaScript runtime (e.g. PHP - interpreted by [Uniter runtime](https://github.com/asmblah/uniter), Scheme - interpreted by [BiwaScheme](https://www.biwascheme.org)) +- Languages running in WASM (e.g. Python - [Pyodide](https://pyodide.org/), AssemblyScript). + +For the full list of supported languages, check the [Languages section](../languages/index.html.md). + +## Organizing Projects + +Projects can be saved to the local device browser storage from Project menu → Save / Project menu → Save as → Fork (New Project) or using the keyboard shortcut Ctrl + S. + +The list of saved projects can be accessed from Project menu → Open. + +![LiveCodes Projects](../../static/img/screenshots/saved-projects-1.jpg). + +Saved projects can be sorted by title or date (asc/desc). They can also be filtered by language and/or tags. You may, as well, search for a project by title or description. + +Project title, description and tags can be edited from Project menu → Project Info. + +Projects can be [imported](./import.html.md), [exported](./export.html.md), [synchronized](./sync.html.md), [backed up and restored](./backup-restore.html.md). + +[Assets](./assets.html.md) and [code snippets](./snippets.html.md) are stored in the browser storage and can be used across projects. + +## Related + +- [Result Page](./result.html.md) +- [Templates](./templates.html.md) +- [Code Snippets](./snippets.html.md) +- [Assets](./assets.html.md) +- [External Resources](./external-resources.html.md) +- [Import](./import.html.md) +- [Export](./export.html.md) +- [Backup/Restore](./backup-restore.html.md) +- [Sync](./sync.html.md) +- [Share](./share.html.md) +- [Broadcast](./broadcast.html.md) + +--- + + + +# Templates + +import TemplateList from '../../src/components/TemplateList'; + +A new project can be based on any of the provided [starter templates](#starter-templates) or [user templates](#user-templates). + +A new project (from template) can be started from: + +- Project menu → New +- [Welcome Screen](./welcome.html.md) → New +- Direct URL: https://livecodes.io?new + +## Starter Templates + +A Large number of starter templates are available. They act as starting points and example usage for the [languages](../languages/index.html.md) available in LiveCodes. + +A direct link for a starter template has the following format: + +`?template={template_name}` (e.g. https://livecodes.io/?template=react) + +The list of template names are documented [here](../api/internal/type-aliases/TemplateName.md). + +### Template List + +The following list of starter templates are available: + + + +## User Templates + +Any project loaded in LiveCodes can be saved as a user template, to be used later as a starting point for new projects. + +A project can be saved as a user template from Project menu → Save as → Template. + +It can then be accessed from Project menu → New ... → My Templates. + +A user template can be set as [default template](./default-template-language.html.md) to be automatically loaded when loading the app. + +User templates are scoped to the currently [logged-in user](./user-management.html.md). They can be [backed up/restored](./backup-restore.html.md) and [synced](./sync.html.md) the same as other user data. + +## Related + +- [Default Template/Language](./default-template-language.html.md) +- [Project](./projects.html.md) +- [Code Snippets](./snippets.html.md) +- [User management](./user-management.html.md) +- [Backup/Restore](./backup-restore.html.md) +- [Sync](./sync.html.md) +- [Languages](../languages/index.html.md) + +--- + + + +# CSS + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The [result page](./result.html.md) can be styled with CSS using various methods, including: + +## Style Editor + +Code added to [style editor](./projects.html.md)#style-editor) is [compiled](#languages) and [processed](#css-processors), then added as CSS to the [result page](./result.html.md) `head` element. + +![LiveCodes styles](../../static/img/screenshots/css-processors.jpg) + +### Languages + +LiveCodes supports multiple languages that compile to CSS, including [SCSS](../languages/scss.html.md), [Sass](../languages/sass.html.md), [Less](../languages/less.html.md) and [Stylus](../languages/stylus.html.md). Code authored in any of these languages is compiled to CSS before being added to the [result page](./result.html.md). + +The style language can be selected from the style editor menu. In embedded playgrounds, the language can be configured via the configuration object property [`style.language`](../configuration/configuration-object.html.md)#style) + +### CSS Processors + +The (compiled) CSS code can be processed by one or more of the supported CSS processors. Examples of these include: [Autoprefixer](../languages/autoprefixer.html.md), [postcss-preset-env](../languages/postcssPresetEnv.html.md), [Lightning CSS](../languages/lightningcss.html.md), [CSS Modules](../languages/cssmodules.html.md), [cssnano](../languages/cssnano.html.md), ...etc. + +Multiple CSS processors can be enabled at the same time. The code is processed in the order of processors placed in the style editor menu of the app. + +Processors are enabled in the [standalone app](../getting-started.html.md)#standalone-app) from the style editor menu, by switching on the toggles of the required processors. + +In embedded playgrounds, processors are enabled via the [`processors`](../configuration/configuration-object.html.md)#processors) property of the [configuration object](../configuration/configuration-object.html.md). + +### Style Imports + +[Bare modules](./module-resolution.html.md)#bare-module-imports) used with `@import` rules are supposed to be npm modules. These are converted to [full URLs from CDN](./module-resolution.html.md)#cdn-providers). + +#### Example + +This code: + +```css +@import 'github-markdown-css/github-markdown.css'; +``` + +becomes: + +```css +@import 'https://unpkg.com/github-markdown-css/github-markdown.css'; +``` + +Packages that specify a stylesheet as the main module can be imported like that: + +```css +@import 'github-markdown-css'; +``` + +demo: + + + +The content can be inlined in the compiled CSS by enabling the processor [postcss-import-url](../languages/postcssImportUrl.html.md). + +### Compiled CSS + +Compiled CSS (following compilation of style language, and all enabled processors) is added to the [result page](./result.html.md) `head` element. + +The compiled code can be inspected in the [compiled code viewer](./compiled-code.html.md) in the [tools pane](./tools-pane.html.md). + +### Auto-update + +When [`autoupdate`](../configuration/configuration-object.html.md)#autoupdate) is enabled (default), in contrast to [markup editor](./projects.html.md)#markup-editor) and [script editor](./projects.html.md)#script-editor), changes in style editor code does NOT trigger a full reload of the [result page](./result.html.md). The updated CSS code is sent to the page and applied without a reload. + +The page can be force-reloaded by clicking the run button or using the keyboard shortcut: Shift + Enter. + +## External Resources + +External stylesheets can be added in [external resources](./external-resources.html.md) screen. These are added to the [result page](./result.html.md) before the compiled style editor code. This allows code in style editor to override CSS properties in external stylesheets. + +External stylesheets can be added to embedded playgrounds using the [configuration object](../configuration/configuration-object.html.md) property [`stylesheets`](../configuration/configuration-object.html.md)#stylesheets). + +## CSS Presets + +CSS presets like [Normalize.css](https://necolas.github.io/normalize.css/) and [Reset CSS](https://meyerweb.com/eric/tools/css/reset/) can be selected in [external resources](./external-resources.html.md)#css-presets) screen. + +## Stylesheets Imported in Script Editor + +### External Stylesheets + +CSS stylesheets imported in the script editor are added to the [result page](./result.html.md) `head` element. _The URL has to end with **`.css` extension**_. + +For example, adding this in the script editor (JavaScript): + +```js +import 'https://unpkg.com/github-markdown-css/github-markdown.css'; +``` + +adds this to the page `head`: + +```html + +``` + +Currently, compiling imported stylesheets (e.g. SCSS) is not supported. + +Similar to [imports in style editor](#style-imports), bare imports are converted to full URLs from CDN. + +For example: + +```js +import 'github-markdown-css/github-markdown.css'; +``` + +becomes: + +```html + +``` + +### `./style.css` + +Importing the URLs (`./style.css` or `./styles.css`) gets the style editor compiled/processed CSS **string** as the module's default export. + +Example: + +```js +import styles from './style.css'; + +console.log(styles); // => compiled CSS as string +``` + +## CSS Modules + +CSS modules are supported and are [documented separately](../languages/cssmodules.html.md). + +## CSS Frameworks + +Multiple CSS frameworks are supported including [Tailwind CSS](../languages/tailwindcss.html.md), [UnoCSS](../languages/unocss.html.md) and [WindiCSS](../languages/windicss.html.md). + +## Styles in Markup & Script + +Of course, styles and stylesheets can still be added as usual in markup and script editors (via HTML elements and/or DOM). + +## Related + +- [Projects](./projects.html.md) +- [External resources](./external-resources.html.md) +- [Module resolution](./module-resolution.html.md) + +--- + + + +# Result Page + +The output of a LiveCodes project is a single HTML page. This includes the (compiled) code from editors (markup + style + script) and [external resources](./external-resources.html.md) (CSS + JS), in addition to customizations specified in [custom settings](../advanced/custom-settings.html.md). + +This page is loaded in a [sandboxed iframe](https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/) with a unique origin to enforce [security](./security.html.md). The page code is sent to the iframe in the browser (no code is sent to the server). + +## Result page structure + +This is the pseudo-code for the structure of the result page (inspired by [CodePen docs](https://blog.codepen.io/documentation/preview-template/)). + + +```html + + + + { Config.title }* + + + + { Config.head }* + + { CSS preset }** + + { External CSS }** + + { Editor CSS } + + { Language(s) run-time CSS }*** + + { Language(s) run-time JS }*** + + { Import map }**** + + + + + { Editor HTML } + + { External JS }** + + { Editor JS } + + { Spacing script (if enabled) }***** + + { Test scripts (if enabled) }****** + + + +``` + +\* See [Configuration Object](../configuration/configuration-object.html.md). + +\*\* See [External Resources](./external-resources.html.md). + +\*\*\* Although most languages are compiled and then the compiled code is used, some languages require run-time scripts or styles to run in the result page. + +\*\*\*\* See [Module Resolution](./module-resolution.html.md). + +\*\*\*\*\* See [Show Sapcings](#show-spacings). + +\*\*\*\*\*\* See [Tests](./tests.html.md). + +## Result page zoom + +The zoom button in the [tools pane](./tools-pane.html.md) below result page, allows you to toggle result page zoom (1x/0.5x/0.25x). + +![Result page zoom](../../static/img/screenshots/zoom.jpg) + +## Open in new window + +From the [tools pane](./tools-pane.html.md), the result page can be viewed in a separate window. + +![Open in new window](../../static/img/screenshots/new-window.jpg) + +:::caution + +Please note that the URL of the result page shown in the new window is a [temporary URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#parameters), for local preview. Sharing this URL will not work. + +If you need to share a project, use the [Share screen](./share.html.md). While, if you need to share the result page use the `result` [display mode](./display-modes.html.md) or the [broadcast](./broadcast.html.md) feature. + +::: + +## Show Spacings + +The spacing between elements on the result page can be measured by adding [Spacing.js](https://spacingjs.com/) to the result page. + +![Show Spacings](../../static/img/screenshots/spacing.jpg) + +1. Enable `Show Spacing` setting in the Settings menu. +2. Move your cursor to an element and press Alt on Windows, or Option on a Mac. +3. Move your cursor to another element, the measurement results will be there. + +:::note + +`Show Spacing` is only available when viewing the result page in the app. It is not added to the result page for example when [exported](./export.html.md) or [deployed](./deploy.html.md). + +::: + +## Scroll Position + +By default, the result page scroll position is maintained after reloads. + +To disable this behavior, set the [query param](../configuration/query-params.html.md) `scrollPosition` to `false`. + +Example: + + https://livecodes.io?scrollPosition=false + +--- + + + +# External Resources + +## Stylesheets and Scripts + +URLs to external CSS stylesheets and JS scripts can be added to the page from the UI using the Project menu → External Resources. In addition, there is a button to the External Resources in the toolbar below the editors. + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +URLs to stylesheets/scripts should be added each in a separate line. + +Stylesheets and scripts are loaded in the [result page](./result.html.md) before editor codes. Thus, CSS properties defined in external stylesheets can be overridden in the style editor. Global javascript variables defined in external scripts are available to code in the script editor. + +![External Resources](/img/screenshots/resources.jpg) + +Importing and Exporting code to other services (e.g. Codepen and Github gists) takes into consiedration the external resources. + +## Search for NPM Packages + +Package search allows finding NPM Packages and adding URLs to default scripts/stylesheets (hosted by [jsDelivr](https://www.jsdelivr.com/)). Specific package version can be specified. + +Examples for search terms: + +``` +jque + +jquery + +jquery@3 + +jquery@3.6 + +jquery@3.6.3 + +``` + +![External Resources Search](/img/screenshots/resources-search.jpg) + +## Fonts + +Fonts can be added from [Google fonts](https://fonts.google.com/). + +## CSS Presets + +CSS presets currently include [Normalize.css](https://necolas.github.io/normalize.css/) and [Reset CSS](https://meyerweb.com/eric/tools/css/reset/). + +## Related + +- [Module resolution](./module-resolution.html.md) +- [Assets](./assets.html.md) + +--- + + + +# Tools Pane + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The resizeable tools pane (below the result page) provides an area for developer tools. This currently includes: + +- [Console](./console.html.md) +- [Compiled code viewer](./compiled-code.html.md) +- [Tests](./tests.html.md) +- Open result page in new window (not in embeds) +- [Broadcast](broadcast.html.md) status (not in embeds) +- Loading spinner that appears when the result page is loading + +The pane can be resized by dragging the bar. Clicking a tool button toggles opening/closing the pane. Double-click toggles maximize/close. + +It can be configured to have any of the following states: + +- `closed` (default) +- `open` +- `full` +- `none` + +e.g. https://livecodes.io/?console=open&js=console.log('hello')
    +opens the console and sets JavaScript code. + +Demo: (console=open) + + + +

     

    + +Demo: (console=full) + + + +--- + + + +# Console + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +Console messages are shown in the integrated console (in the [tools pane](./tools-pane.html.md), below the result page), without having to open the native browser console. + +Messages can be sent to the console using the standard `console` methods in the code editor (e.g. `console.log`, `console.warn`, `console.error`, `console.table`, ...etc). The console can also be used as REPL (read–eval–print loop) using the integrated console input. + +The code is evaluated in the context of the result page (i.e. variables defined in the script editor are accessible for evaluation in the console input). Also code completion works in the console input. + +e.g. https://livecodes.io/?ts&console=full
    +sets TypeScript as the active editor and shows the console maximized. + +Demo: (console=full) + + + +

     

    + +:::tip + +Setting the querystring `languages` only shows these languages. +Selecting one language and setting console to `full` gives an environment similar to a REPL. + +::: + +Demo: (Python - print to console) + + + +--- + + + +# Compiled Code + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The resulting compiled/transpiled code can be seen in the compiled code viewer (in the [tools pane](./tools-pane.html.md)) in real-time, as you type. This works for all compiled code (e.g. Markdown, Pug, SCSS, Less, Stylus, Typescript, CoffeeScript, ...etc.). + +This can be a great tool for learning. As you write code, you see the compiled code and the resulting page at the same time. The compiled code viewer shows the code compiled from the currently active editor (markup/style/script). This includes the CSS produced by CSS processors (e.g. Autoprefixer), if enabled. + +![Compiled Code Viewer](./../../static/img/screenshots/compiled-code-1.jpg) + +e.g. https://livecodes.io/?ts&compiled=full
    +sets TypeScript as the active editor and shows compiled code viewer maximized. + +This demo shows TypeScript code along with the compiled Javascript code, similar to the [official TypeScript Playground](https://www.typescriptlang.org/play): + + + +--- + + + +# Tests + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +## Overview + +Automated tests can be added for projects. The tests are run in the context of the result web page. + +The automated tests are run by the Jest testing framework, which runs totally in the browser. In addition, other [testing libraries](#supported-testing-libraries) are also supported. + +Screenshots: + +![Livecodes Tests](/img/screenshots/tests.jpg) + +![Livecodes Tests](/img/screenshots/test-editor.jpg) + +## Use Cases + +- Automated tests increase the confidence in the code and can improve the quality of projects. +- Allows Test-driven development (TDD). +- Can be used for education and training by preparing projects with tests that are required to pass by the students' implementation (similar to freeCodeCamp). +- Can be used by wesites that offer coding challenges (similar to Codewars). + +## Demos + +Demo: (template=jest) + + + +

     

    + +Demo: (template=jest-react) + + + +## Tests Panel + +The "Tests" panel is located in the "[Tools pane](./tools-pane.html.md)" below the result page. + +In the tests panel, you can find: + +- "Run" button: To run tests (keyboard shortcut: Ctrl/Cmd + Alt + t). +- "Watch" button toggle: To watch the project and re-run tests automatically when code changes. +- "Reset" button: Resets test results. +- "Edit" button: Opens a code editor to edit tests (not in embeds). +- Test results. + +:::info Note + +Please note that the tests panel are hidden by default in [embedded playgrounds](./embeds.html.md) unless the [project has tests](../configuration/configuration-object.html.md)#tests). In such case, the panel is added to the [tools pane](./tools-pane.html.md). However, the test editor is not shown. + +The [SDK](../sdk/index.html.md) can control the visibility of the different tools in the tools pane (see [`tools`](../configuration/configuration-object.html.md)#tools) property of the [configuration object](../configuration/configuration-object.html.md)). + +The tests panel and the test editor are always shown in the [full standalone app](../getting-started.html.md)#standalone-app). + +::: + +## Supported Languages + +The testing code can be written using JavaScript, TypeScript, JSX or TSX. +However, since the tests run against the result web page, they can test projects that use any language/framework. + +This is [a demo](https://livecodes.io/?x=id/xyi6usem2sf&tests) for running tests against a Ruby project. + + + +Languages may have test modules. This is [an example](https://livecodes.io/?x=id/665ar3bpqka&console=full) of running [Python doctest](https://docs.python.org/3/library/doctest.html) tests: + + + + +## Importing Code + +Functions, objects or values can be exported from the `script` code like a regular ES module. +These can then be imported in the test code for usage. This is only available for code in the `script` editor. The testing code also have access to global objects like `window`. + +Example: + +```js +// in the script editor +export default function greet() { + return 'Hello, World!'; +} + +export const add = (x, y) => x + y; + +window.multiply = (x, y) => x * y; +``` + +```js +// in the test editor +import greet, { add } from './script'; // relative import without extension + +describe('test imported', () => { + test('greet', () => { + expect(greet()).toBe('Hello, World!'); + }); + + test('add', () => { + expect(add(1, 2)).toBe(3); + }); +}); + +describe('test global', () => { + test('multiply', () => { + expect(window.multiply(2, 3)).toBe(6); + }); +}); +``` + +## Supported Jest features + +- [Jest globals](https://jestjs.io/docs/api): `expect`, `test`, `xtest`, `it`, `fit`, `xit`, `describe`, `fdescribe`, `xdescribe`, `beforeAll`, `afterAll`, `beforeEach`, `afterEach` +- Jest function mocks: `jest.fn`, `jest.mocked`, `jest.replaceProperty`, `jest.spyOn` + +These can be directly used in the test editor, without the need for any imports. +Autocomplete is available in Monaco editor for Jest API. + +## Supported testing libraries + +In addition to Jest, you may wish to use other supported testing libraries. These have to be explicitly imported to the testing code. + +### Testing library + +Simple and complete testing utilities that encourage good testing practices. + +- DOM Testing Library + +```js +import { + getByLabelText, + getByText, + getByTestId, + queryByTestId, + waitFor, +} from '@testing-library/dom'; +``` + +- React Testing Library + +```js +import { render, fireEvent, waitFor, screen } from '@testing-library/react'; +``` + +- jest-dom + +```js +import '@testing-library/jest-dom'; +``` + +- user-event + +```js +import userEvent from '@testing-library/user-event'; +``` + +### Chai + +Jest assertions can be used in the tests. However, if you prefer Chai, it can be easily used. +Autocomplete is also available in Monaco editor for Chai API. + +```js +import { assert } from 'chai'; +``` + +## Examples + +Usage examples are provided in the starter templates (Jest Starter and Jest/React Starter). + +:::caution + +The test code is added to the result page and runs in its context. Please note that script errors (e.g. import or syntax errors) may prevent the tests from loading. + +::: + +## SDK + +The [SDK](../sdk/index.html.md) allows [running tests](../sdk/js-ts.html.md)#runtests) and collecting results. + +--- + + + +# Module Resolution + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +## NPM Modules + +### Bare Module Imports + +In LiveCodes you can use node-style bare module imports for npm modules like you do in your local development. However, there are no installation or build steps required. + +e.g. consider the following code: + +```js +import { v4 } from 'uuid'; + +document.body.innerHTML = v4(); +``` + +If you run it directly in the browser, you get this error: + +``` +Uncaught TypeError: Failed to resolve module specifier "uuid". Relative references must start with either "/", "./", or "../". +``` + +However, in LiveCodes, bare module imports are transformed to full URLs that are imported from CDN (by default: [esm.sh](https://esm.sh/)) which provides ESM versions of NPM packages. + +`import { v4 } from 'uuid';`
    becomes
    +`import { v4 } from 'https://esm.sh/uuid';` + +This is made possible by using [import maps](https://github.com/WICG/import-maps). + +

    Demo:

    + + + +

     

    + +You can import from React like that: + +```js +import { useState } from 'react'; +``` + +Demo: + + + +It just works without a build step and without you having to worry about. And when you [export your project](./export.html.md) to another service (e.g. CodePen) or as HTML, the full URL imports are used, so your code continues to work. + +:::tip +It is recommended to use this method for dependencies over using [external scripts](./external-resources.html.md). The dependencies are explicitly stated in the code. And if you move to a local development environment, your bundler will take care of importing them and doing other optimizations like [tree-shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking). +::: + +### CommonJS Modules + +CommonJS module `require`s are also supported (they are converted to ESM imports). + +So this also works (although not recommended - use ESM imports instead): + +```js +const { v4 } = require('uuid'); + +document.body.innerHTML = v4(); +``` + +Exercise: + +Copy the previous code snippet and paste it in the playground below. Check the generated code in the compiled code viewer. + + + +:::info + +Script code that contains `import`, `export` or `require` gets served in a script tag with [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). + +::: + +### NPM Package Search + +NPM packages can be searched and added as script tags from the [External Resources](./external-resources.html.md) screen. + +## Deno Modules + +Modules imported from [deno.land/x](https://deno.land/x) (or any other URL ending in `.ts`, `.jsx` or `.tsx`) are automatically transpiled (ts -> js) and bundled by [bundlejs](https://bundlejs.com/) (using [esbuild](https://esbuild.github.io/)), including their relative imports. The project on LiveCodes that imports these modules does not need to be using TypeScript. + +Example: + +```js +import { uuid } from 'https://deno.land/x/uuid/mod.ts'; + +document.body.innerHTML = uuid(); +``` + +[Open in LiveCodes]() + +## JSR Modules + +Modules can be imported from [jsr.io](https://jsr.io/) using the prefix `jsr:`. The project on LiveCodes that imports these modules does not need to be using TypeScript. + +Example: + +```js +import { yassify } from 'jsr:@kwhinnery/yassify'; + +document.body.innerHTML = yassify('Hello, World!'); +``` + +[Open in LiveCodes]() + +## GitHub/GitLab/Bitbucket + +Modules can also be similarly imported from GitHub, Gitlab or Bitbucket. Also these imports are transpiled and bundled (see [Deno Modules](#deno-modules)). + +```js +import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts'; + +console.log(flatten([[1, 2], [3], [4, 5]])); // -> [1, 2, 3, 4, 5] +``` + +[Open in LiveCodes]() + +:::tip + +If you do not want the import URL to be bundled (e.g. in Deno or GitHub imports), add `#nobundle` to the end of URL. + +Example: + +```js +import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts#nobundle'; +``` + +If you want to bundle (and transpile) any import URL, prefix it with `bundle:` (see below). + +::: + +## CDN Providers + +By default, npm modules are imported from [esm.sh](https://esm.sh/). You may choose another provider by using a CDN prefix. These are examples of importing the library `uuid`: + +`uuid` → https://esm.sh/uuid ([info](https://esm.sh)) + +`esm.sh:uuid` → https://esm.sh/uuid ([info](https://esm.sh/)) + +`skypack:uuid` → https://cdn.skypack.dev/uuid ([info](https://www.skypack.dev/)) + +`jsdelivr:uuid` → https://cdn.jsdelivr.net/npm/uuid ([info](https://www.jsdelivr.com/)) + +`esm.run:uuid` → https://esm.run/uuid ([info](https://esm.run/)) + +`unpkg:uuid` → https://unpkg.com/uuid?module ([info](https://unpkg.com/)) + +`esbuild:uuid` → https://esbuild.vercel.app/uuid ([info](https://esbuild.vercel.app/)) + +`bundlejs:uuid` → https://deno.bundlejs.com/?file&q=uuid ([info](https://bundlejs.com/)) + +`bundle:uuid` → https://deno.bundlejs.com/?file&q=uuid ([info](https://bundlejs.com/)) + +`deno:uuid` → https://deno.bundlejs.com/?file&q=https://deno.land/x/uuid/mod.ts ([info](https://bundlejs.com/)) + +`npm:uuid` → https://esm.sh/uuid ([info](https://esm.sh)) + +`node:uuid` → https://esm.sh/uuid ([info](https://esm.sh)) + +`jsr:@std/uuid` → https://esm.sh/jsr/@std/uuid ([info](https://esm.sh)) + +`jspm:uuid` → https://jspm.dev/uuid ([info](https://jspm.org) - [DEPRECATED](https://jspm.org/jspm-dev-deprecation)) + +Example: + +```js +import { useState } from 'esm.sh:react'; +``` + +:::caution + +Please note that importing the same module (even for dependencies) from different CDNs may cause conflicts. + +Example: + +```js +// this will NOT work! +import React, { useState } from 'esm.sh:react'; // React from esm.sh +import { createRoot } from 'skypack:react-dom/client'; // React from skypack.dev +``` + +::: + +### Change Default CDN + +Default CDN can be changed on project-level using the [custom settings](../advanced/custom-settings.html.md) property `defaultCDN` which accepts a string representing one of the CDN aliases listed above. + +Example: This assigns [Skypack](https://www.skypack.dev/) as the default CDN for all imports of the project + +```json +{ + "defaultCDN": "skypack" +} +``` + +### Package Version + +Most CDN providers allow specifying package version using the format:
    +`{pkgName}@{version}/{path}`. + +Example: + +```js +import latest from 'lodash'; +import v3 from 'lodash@3'; + +console.log(latest.VERSION); // -> 4.17.21 +console.log(v3.VERSION); // -> 3.10.1 +``` + +## Custom Module Resolution + +Module resolution described in this page mainly depends on [import maps](https://github.com/WICG/import-maps). The generated import map is added to the [result page](./result.html.md). + +You may wish to override or customize module resolution behavior (e.g. change URL, CDN, specify version, import custom unpublished library, ...etc. ), however you cannot add another import map script because [currently multiple import maps are not yet supported](https://github.com/WICG/import-maps#multiple-import-map-support). + +LiveCodes allows you to add your custom import map by one of the following methods: + +#### Custom Settings + +In the standalone app, via the [custom settings](../advanced/custom-settings.html.md) property `imports`. + +Example: + +```json title="Custom Settings" +{ + "imports": { + "my-lib": "https://my-server.com/path/to/library.js" + } +} +``` + +#### SDK + +For embedded playgrounds, use the [SDK](../sdk/index.html.md) embed option [`config.imports`](../configuration/configuration-object.html.md)#imports). + +Example: + +```js title="index.js" +import { createPlayground } from 'livecodes'; + +const config = { + imports: { + 'my-lib': 'https://my-server.com/path/to/library.js', + }, + // other configurations ... +}; + +createPlayground('#container', { config }); +``` + +Please note that you may also provide [custom type definitions](./intellisense.html.md)#custom-types) for your custom modules for editor intellisense and better development experience. + +## Related + +- [Import](./import.html.md) +- [External Resources](./external-resources.html.md) +- [Projects](./projects.html.md) +- [Intellisense](./intellisense.html.md) + +--- + + + +# IntelliSense + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The [code editor](./editor-settings.html.md)#code-editor) provides a rich experience with [intellisense](https://code.visualstudio.com/docs/editor/intellisense) and autocompletion. Many of the features required for this are based on TypeScript types that are either inferred by the editor or supplied as data definition files. + +This not only works when the editor language is TypeScript, but also works with others like JavaScript and JSX. + +Example: + +![LiveCodes Autocomplete](../../static/img/screenshots/autocomplete.jpg) + +## Types for imported npm packages + +LiveCodes will try to automatically find type definitions for npm modules imported in the editor. + +These are examples for automatically loading React types with autocomplete and hover info: + +![LiveCodes Intellisense](../../static/img/screenshots/intellisense-1.jpg) + +![LiveCodes Intellisense](../../static/img/screenshots/intellisense-2.jpg) + +## TypeScript TwoSlash + +The code editor supports [TypeScript TwoSlash](https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ts-twoslasher). This can be very useful for debugging, sharing and teaching TypeScript. + +This is supported in [JavaScript](../languages/javascript.html.md), [TypeScript](../languages/typescript.html.md), [JSX](../languages/jsx.html.md) and [TSX](../languages/tsx.html.md). This also includes [Babel](../languages/babel.html.md), [Sucrase](../languages/sucrase.html.md), [Solid](../languages/solid.html.md), [React Native](../languages/react-native.html.md), etc. + +![TypeScript TwoSlash](../../static/img/screenshots/twoslash.jpg) + +![TwoSlash in JSX](../../static/img/screenshots/twoslash-jsx.jpg) + +## Custom Types + +If no type definitions are found, or if you want to provide your own (e.g. for a module that is not hosted on npm), custom type definition files can be used. + +In the standalone app, these can be provided in [custom settings](../advanced/custom-settings.html.md) using the `types` property. This takes an object with the key representing the module name and the value representing the URL of the file. + +Example: + +```json title="Custom Settings" +{ + "types": { + "my-module": "https://cdn.jsdelivr.net/npm/my-module@1.0.0/types/my-module.d.ts", + "my-other-module": "https://my-website.com/my-other-module/my-other-module.d.ts" + } +} +``` + +For embedded playgrounds, these can be provided in the [configuration object](../configuration/configuration-object.html.md) using the [`types`](../configuration/configuration-object.html.md)#types) property. + +This can be combined with the [`imports`](../configuration/configuration-object.html.md)#imports) property to provide [importmap](./module-resolution.html.md)#custom-module-resolution) for runtime implementation of your custom modules. + +This is an example of how to create a playground that provides the implementation of the custom module: `my-module` and its type definition to provide editor intellisense: + +```js +import { createPlayground } from 'livecodes'; + +const config = { + activeEditor: 'script', + script: { + language: 'javascript', + content: `import { foo } from 'my-module';\n\nconsole.log(foo());` + }; + imports: { + 'my-module': 'https://my-website.com/my-module/index.js', + }, + types: { + 'my-module': 'https://my-website.com/my-module/my-module.d.ts', + }, +}; + +createPlayground('#container', {config}); +``` + +Please note that the URLs used for `types` and `imports` properties may be full URLs or [data URLs](./data-urls.html.md). + +This can be of great use for library authors who want to provide playgrounds for documenting their libraries that are not (yet) published to npm. + +## Demo + +Let's assume we have this TypeScript module: + +```ts title="Greeter.ts" +export class Greeter { + private morningGreetings = ['Good morning', 'Have a good day', 'How are you today?']; + private eveningGreetings = ['Good evening', 'Good night', 'Sleep well']; + + private randomSelector(array: string[]) { + return array[Math.floor(Math.random() * array.length)]; + } + + public morning() { + return this.randomSelector(this.morningGreetings); + } + + public evening() { + return this.randomSelector(this.eveningGreetings); + } +} +``` + +which compiles to this JavaScript: + +```js title="Greeter.js" +export class Greeter { + constructor() { + this.morningGreetings = ['Good morning', 'Have a good day', 'How are you today?']; + this.eveningGreetings = ['Good evening', 'Good night', 'Sleep well']; + } + randomSelector(array) { + return array[Math.floor(Math.random() * array.length)]; + } + morning() { + return this.randomSelector(this.morningGreetings); + } + evening() { + return this.randomSelector(this.eveningGreetings); + } +} +``` + +and this type definition: + +```ts title="Greeter.d.ts" +export declare class Greeter { + private morningGreetings; + private eveningGreetings; + private randomSelector; + morning(): string; + evening(): string; +} +``` + +The JavaScript output (Greeter.js) and the data definition file (Greeter.d.ts) should be hosted online or converted to data URLs (see [assets](./assets.html.md) and [data URLs](./data-urls.html.md)). + +Then, they can be used like that: + +export const customModules = { + editor: 'monaco', + activeEditor: 'script', + script: { + language: 'typescript', + content: + "import { Greeter } from 'my-greeter';\n\nconst greeter = new Greeter();\n// now `greeter` has autocomplete\n\ndocument.body.innerText = greeter.morning();\n\n// this should show error in the editor\n// Property 'morningGreetings' is private and only accessible within class 'Greeter'\nconsole.log(greeter.morningGreetings);", + }, + imports: { + 'my-greeter': + 'data:text/javascript;charset=UTF-8;base64,ZXhwb3J0IGNsYXNzIEdyZWV0ZXIgew0KICAgIGNvbnN0cnVjdG9yKCkgew0KICAgICAgICB0aGlzLm1vcm5pbmdHcmVldGluZ3MgPSBbJ0dvb2QgbW9ybmluZycsICdIYXZlIGEgZ29vZCBkYXknLCAnSG93IGFyZSB5b3UgdG9kYXk/J107DQogICAgICAgIHRoaXMuZXZlbmluZ0dyZWV0aW5ncyA9IFsnR29vZCBldmVuaW5nJywgJ0dvb2QgbmlnaHQnLCAnU2xlZXAgd2VsbCddOw0KICAgIH0NCiAgICByYW5kb21TZWxlY3RvcihhcnJheSkgew0KICAgICAgICByZXR1cm4gYXJyYXlbTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogYXJyYXkubGVuZ3RoKV07DQogICAgfQ0KICAgIG1vcm5pbmcoKSB7DQogICAgICAgIHJldHVybiB0aGlzLnJhbmRvbVNlbGVjdG9yKHRoaXMubW9ybmluZ0dyZWV0aW5ncyk7DQogICAgfQ0KICAgIGV2ZW5pbmcoKSB7DQogICAgICAgIHJldHVybiB0aGlzLnJhbmRvbVNlbGVjdG9yKHRoaXMuZXZlbmluZ0dyZWV0aW5ncyk7DQogICAgfQ0KfQ0K', + }, + types: { + 'my-greeter': + 'data:text/typescript;charset=UTF-8;base64,ZXhwb3J0IGRlY2xhcmUgY2xhc3MgR3JlZXRlciB7DQogIHByaXZhdGUgbW9ybmluZ0dyZWV0aW5nczsNCiAgcHJpdmF0ZSBldmVuaW5nR3JlZXRpbmdzOw0KICBwcml2YXRlIHJhbmRvbVNlbGVjdG9yOw0KICBtb3JuaW5nKCk6IHN0cmluZzsNCiAgZXZlbmluZygpOiBzdHJpbmc7DQp9DQo=', + }, +}; + + + +## Related + +- [Module Resolution](./module-resolution.html.md) +- [Data Urls](./data-urls.html.md) +- [Assets](./assets.html.md) +- [Custom Settings](../advanced/custom-settings.html.md) +- [Configuration Object](../configuration/configuration-object.html.md) + +--- + + + +# AI Code Assistant 🪄 + +LiveCodes supports AI-powered code completion, totally for **free** with **no account or API token required**, using [Codeium](https://codeium.com/), the ultrafast Copilot alternative. This can be easily enabled from the UI (as easy as [flipping a switch](#ui)!) + +The large generative machine learning model is capable of understanding the context of your code and comments (across the [3 code editors](./projects#markup-editor)) in order to generate suggestions on what you might want to type next. + +It has a wide range of language support, and it works everywhere (in the [standalone app](../getting-started.html.md)#standalone-app), [embedded playgrounds](./embeds.html.md) and [self-hosted](./self-hosting.html.md) apps). + +Powered by: + + + Codeium logo + +. + +## Examples: + +JavaScript: + + + +Python: + + + +## Instructions + +The AI code assistant can be enabled from: + +### UI + +The [editor settings](./editor-settings.html.md) screen (Settings menu → Editor Settings → Enable AI Code Assistant). + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-1.jpg) + +**Note** + +When set from the UI, this configuration is saved locally to [user settings](./user-settings.html.md) and is remembered across sessions. + +### Configuration + +Alternatively, this can be enabled (_only for the current session_) using the [`enableAI`](../configuration/configuration-object.html.md)#enableai) property in the [configuration object](../configuration/configuration-object.html.md). This can be used to enable the AI code assistant in [embedded playgrounds](./embeds.html.md). + +Example: + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container', { + config: { + // highlight-next-line + enableAI: true, + }, +}); +``` + +Also this can be enabled using [query params](../configuration/query-params.html.md) (e.g. https://livecodes.io/?enableAI). + +## Usage + +On typing, the code completion suggestions will be shown in dimmed color. Press Tab to accept, or Esc to cancel. + +On mobile, tap on the suggestion to accept it, or continue typing to reject. + +:::caution Note + +Please note that when using Codeium AI assistant, your code is sent to Codeium servers for code completion. However, your code is not used for training their model. Check Codeium [FAQ](https://codeium.com/faq#Will-Codeium-regurgitate-private-code%3F) and [privacy policy](https://codeium.com/privacy-policy) for more details. + +::: + +--- + + + +# Code Format + +Code formatting is supported for most [languages](../languages/index.html.md). + +## Code Formatters + +The code formatter used for each language is specified in the [language documentation](../languages/index.html.md) page. + +For example: + +- [Prettier](https://prettier.io/) is used for many languages including HTML, CSS, JavaScript, TypeScript, JSX, TSX. +- [gofmt](https://pkg.go.dev/cmd/gofmt) (via [GopherJS](https://github.com/gopherjs/gopherjs)) is used for Go. +- [Parinfer](https://shaunlebron.github.io/parinfer/) is used for Scheme, Common Lisp and ClojureScript. + +## Format Button + +Code formatting for the code in the active editor can be triggered by the `Format` button below the editor. + +![code format](../../static/img/screenshots/format-1.jpg) + +## Keyboard Shortcut + +Code formatting can also be trigger by the keyboard shortcut Alt + Shift + F. + +## Format on-save + +Format on-save can be enabled from the Settings menu → Format on-save. + +## Format Options + +Some format options can be configured from [Editor Settings](./editor-settings.html.md) screen. These include [Prettier](https://prettier.io/) [configuration options](https://prettier.io/docs/en/options.html) for: + +- Indentation (Spaces/Tabs) +- Tab size +- Use Semicolons +- Use Single Quotes +- Use Trailing Commas + +## Configuration + +Code format can be configured using the [configuration object](../configuration/configuration-object.html.md) properties: + +- [`formatOnsave`](../configuration/configuration-object.html.md)#formatonsave) +- [`useTabs`](../configuration/configuration-object.html.md)#usetabs) +- [`tabSize`](../configuration/configuration-object.html.md)#tabsize) +- [`semicolons`](../configuration/configuration-object.html.md)#semicolons) +- [`singleQuote`](../configuration/configuration-object.html.md)#singlequote) +- [`trailingComma`](../configuration/configuration-object.html.md)#trailingcomma) + +## SDK Method: `format` + +The code format can be programmatically triggered by the [SDK](../sdk/index.html.md) method [`format`](../sdk/js-ts.html.md)#format). + +--- + + + +# Command Menu + +The command menu allows running a large set of commands from the UI. It is keyboard-friendly and allows for searching and selecting commands. Most of the functionality of LiveCodes can be achieved using the command menu, which can really improve productivity and DX. + +It can be triggered from the keyboard by pressing Ctrl + K (or ⌘ + K on Mac), or from the Help Menu. + +![Open Command Menu from UI](../../static/img/screenshots/command-menu-1.jpg) + +The available commands cover a wide range of functionality, like showing and hiding UI elements (e.g. different editors, the [result page](./result.html.md), [console](./console.html.md), [compiled code viewer](./compiled-code.html.md), and [tests](./tests.html.md)), changing [languages](../languages), loading [starter templates](./templates.html.md), opening different screens (e.g. new project, opening saved projects, [import](./import.html.md), [embeds](./embeds.html.md), [deploy](./deploy.html.md), [share](./share.html.md) and more). +In addition many commands can be executed from the command menu, such as running code, formatting code, changing settings (e.g. autorun, autosave, [AI code assistant](./ai.html.md), changing [themes](./themes.html.md), [editor settings](./editor-settings.html.md), and more). + +![LiveCodes Command Menu](../../static/img/screenshots/command-menu-2.jpg) + +![LiveCodes Command Menu](../../static/img/screenshots/command-menu-3.jpg) + +![LiveCodes Command Menu](../../static/img/screenshots/command-menu-4.jpg) + +## Using the Command Menu + +Commands can be navigated and selected by: + +- The mouse: scrolling and clicking +- The keyboard: using the up and down arrow keys to navigate, pressing Enter to select, Backspace to move to parent category and Esc to close the command menu. +- Searching: typing in the search box for fuzzy search. + +![LiveCodes Command Menu](../../static/img/screenshots/command-menu-5.jpg) + +![LiveCodes Command Menu](../../static/img/screenshots/command-menu-6.jpg) + +## Keyboard Shortcuts + +If a command has a keyboard shortcut, it will be shown in the command menu. In addition, the whole list of keyboard shortcuts can be opened from the command menu (by searching for "Keyboard Shortcuts") or from the UI from the Help Menu. + +![Keyboard Shortcuts](../../static/img/screenshots/keyboard-shortcuts.jpg) + +--- + + + +# Keyboard Shortcuts + +Many commands can be executed from the keyboard using keyboard shortcuts. The full list can be found in the [Keyboard Shortcuts screen](https://livecodes.io/?screen=keyboard-shortcuts), which can be accessed from the Help Menu or from the [command menu](./command-menu.html.md) by pressing Ctrl + K (or ⌘ + K on Mac) and searching for "Keyboard Shortcuts". + +The code editor shortcuts are the same as VS Code, which can be found [here](https://code.visualstudio.com/docs/getstarted/keybindings#_basic-editing). + +![Keyboard Shortcuts](../../static/img/screenshots/keyboard-shortcuts.jpg) + +--- + + + +# User Settings + +A user can select various settings that are stored locally in the browser and are subsequently used. + +User settings can be configured in Settings menu. These include settings like: + +- Auto-update +- Auto-save +- Delay (before auto-update and auto-save) +- [Format on-save](./code-format.html.md)#format-on-save) +- [Theme](./themes.html.md) (light/dark) +- [Theme color](./themes.html.md)#theme-color) +- [Recover unsaved projects](./recover.html.md) +- [Show spacing](./result.html.md)#show-spacings) +- Layout (responsive/vertical/horizontal) +- [Sync](./sync.html.md) +- Show [welcome screen](./welcome.html.md) +- [App language](./i18n.html.md) + +The settings selected in the [`Editor Settings`](./editor-settings.html.md) screen are also saved locally as user settings. + +User settings are scoped to the currently [logged-in user](./user-management.html.md). They can be [backed up/restored](./backup-restore.html.md) and [synced](./sync.html.md) the same as other user data ([projects](./projects.html.md), [user templates](./templates.html.md)#user-templates), [assets](./assets.html.md), [code snippets](./snippets.html.md)). + +## Related + +- [User management](./user-management.html.md) +- [Project](./projects.html.md) +- [Templates](./templates.html.md) +- [Backup/Restore](./backup-restore.html.md) +- [Sync](./sync.html.md) + +--- + + + +# Editor Settings + +LiveCodes allows a lot of flexibility for configuring which code editor to use and its settings. + +`Editor Settings` screen can be accessed from Settings menu → Editor Settings. + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-1.jpg) + +![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-2.jpg) + +![LiveCodes Editor Settings](../../static/img/screenshots/editor-settings-3.jpg) + +A preview code editor is displayed to preview the settings in real time. + +The settings selected in the `Editor Settings` screen are saved locally to [user settings](./user-settings.html.md) and are used subsequently. These include: + +### Enable AI Code Assistant + +Enables the [AI code assistant](./ai.html.md). (Free and no account required) + +### Code Editor + +The following code editors are supported: + +- [**Monaco Editor**](https://microsoft.github.io/monaco-editor/): This is the code editor that powers [**VS Code**](https://code.visualstudio.com/). It is [feature-rich](https://code.visualstudio.com/docs/editor/codebasics) and supports autocomplete with [**IntelliSense**](https://code.visualstudio.com/docs/editor/intellisense) (including [types for custom libraries](./intellisense.html.md)). However, it requires a relatively large download and is not supported in mobile browsers. +- [**CodeMirror**](https://codemirror.net/): Has [many editing features](https://codemirror.net/docs/extensions/), including autocomplete, with good **mobile support**. +- [**CodeJar**](https://medv.io/codejar/): A **lightweight** code editor with very basic editing features. [PrismJs](https://prismjs.com/) is used for syntax highlighting. Please note that some editor settings are not supported in CodeJar (see below). + +This can be configured using the [`editor`](../configuration/configuration-object.html.md)#editor) configuration option. + +By default, Monaco editor is used on desktop, CodeMirror is used on mobile and CodeJar is used in [codeblocks](./display-modes.html.md)#codeblock), in [lite mode](./lite.html.md) and in [readonly](../configuration/configuration-object.html.md)#readonly) playgrounds. + +### Editor Options + +These include: + +- [Editor theme](../configuration/configuration-object.html.md)#editortheme) +- [Font family](../configuration/configuration-object.html.md)#fontfamily) +- [Font size](../configuration/configuration-object.html.md)#fontsize) +- [Indentation](../configuration/configuration-object.html.md)#usetabs) (Spaces/Tabs) +- [Tab size](../configuration/configuration-object.html.md)#tabsize) +- [Line numbers](../configuration/configuration-object.html.md)#linenumbers) +- [Word-wrap](../configuration/configuration-object.html.md)#wordwrap) +- [Auto-close brackets and quotes](../configuration/configuration-object.html.md)#closebrackets) +- [Fold (collapse) regions](../configuration/configuration-object.html.md)#foldregions) + +### Emmet + +Allows using [**Emmet**](https://emmet.io/) [abbreviations and actions](https://docs.emmet.io/). See [`emmet`](../configuration/configuration-object.html.md)#emmet) configuration option. + +(Not supported in CodeJar) + +### Editor Modes + +Allows using [**Vim**](https://vimhelp.org/) and [**Emacs**](https://www.gnu.org/software/emacs/manual/html_node/emacs/Basic.html) keyboard bindings. See [`editorMode`](../configuration/configuration-object.html.md)#editormode) configuration option. + +(Not supported in CodeJar) + +### Format Options + +These are [**Prettier**](https://prettier.io/) [configuration options](https://prettier.io/docs/en/options.html) used for code formatting. + +In addition to those specified in [Editor Options](#editor-options), the following options are available: + +- [Use Semicolons](../configuration/configuration-object.html.md)#semicolons) +- [Use Single Quotes](../configuration/configuration-object.html.md)#singlequote) +- [Use Trailing Commas](../configuration/configuration-object.html.md)#trailingcomma) + +--- + + + +# Internationalization (i18n) + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +LiveCodes currently supports UI internationalization. By default, the UI language will be automatically detected based on your browser settings. + +You can easily switch between supported UI languages using the i18n menu, allowing you to explore and use LiveCodes in your preferred language! + +If you are interested in contributing to the translation of LiveCodes, please refer to the [i18n Contribution Guide](https://github.com/live-codes/livecodes/blob/develop/docs/docs/contribution/i18n.html.md). + +![I18n menu](../../static/img/screenshots/i18n-1.jpg) + +![LiveCodes in Chinese](../../static/img/screenshots/i18n-2.jpg) + +Demo: ([Embedded playground](./embeds.html.md) with `appLanguage: 'zh-CN'`) + + + +## Using SDK + +Set the [configuration object](../configuration/configuration-object.html.md) property [`appLanguage`](../configuration/configuration-object.html.md)#applanguage) to a supported language code. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container', { template: 'javascript', config: { appLanguage: 'auto' } }); +``` + +## Using query params + +Add the [query parameter](../configuration/query-params.html.md) `appLanguage` with your preferred language code. + +https://livecodes.io?template=javascript&appLanguage=fr + +## Related + +- [User Settings](./user-settings.html.md) +- [Editor Settings](./editor-settings.html.md) +- [Query params](../configuration/query-params.html.md) +- [i18n Contribution Guide](https://github.com/live-codes/livecodes/blob/develop/docs/docs/contribution/i18n.html.md) + +--- + + + +# Default Template/Language + +When the app is loaded, by default, the last used [language](../languages/index.html.md) is selected. + +The app can also be configured to load a default [user template](./templates.html.md)#user-templates). + +If you do not already have any user templates, save any loaded project as template: + +Project menu → Save as → Template. + +Then, in the user templates screen (Project menu → New ... → My Templates), find your template and click "Set as default". + +If you wish to clear that selection, find the default template in user templates and click "unset". + +If you want to temporarily not load the default template/language add the [query param](../configuration/query-params.html.md) `no-defaults`. + +Example: https://livecodes.io?no-defaults + +## Related + +- [Templates](./templates.html.md) +- [Query params](../configuration/query-params.html.md) + +--- + + + +# Assets + +Adding local assets (e.g. images, fonts, stylesheets, scripts) that are not hosted online is such a common need that a UI was developed to allow easily adding them. + +The assets are saved locally on the user's device and are available across projects (i.e the same image can be used in different projects without having to add it multiple times). + +In addition, assets are supported in [sync](./sync.html.md), [backup](./backup-restore.html.md)#backup) and [restore](./backup-restore.html.md)#restore). + +The `Assets` screen can be accessed from Settings menu → Assets + +![Assets](/img/screenshots/assets-1.jpg) + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +Assets are either: + +- Encoded as [data URLs](./data-urls.html.md). +- Uploaded to a [GitHub Pages](https://pages.github.com/). This requires login with a [GitHub account](./github-integration.html.md) (allowing access to repos). A **public** repo called `livecodes-assets` is created if not present. The assets are pushed to `gh-pages` branch. They can then be accessed by URLs like: + + https://\{user\}.github.io/livecodes-assets/assets/... + +When an asset item is clicked, the URL is copied to clipboard. The URL can then be used in projects. + +![Assets](/img/screenshots/assets-2.jpg) + +--- + + + +# Code Snippets + +LiveCodes supports saving and organizing code snippets in different languages. + +Code snippets are saved locally on user's device. However, they are supported in [sync](./sync.html.md), [backup](./backup-restore.html.md)#backup) and [restore](./backup-restore.html.md)#restore). + +Code snippets screen can be accessed from Settings menu → Code Snippets. + +![Code Snippets](../../static/img/screenshots/snippets-1.jpg) + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +Each snippet has a title, description, language and code. + +![Code Snippets](../../static/img/screenshots/snippets-add.jpg) + +After adding snippets they can be sorted (by date modified or title), filtered (by language) or searched. + +![Code Snippets](../../static/img/screenshots/snippets-list.jpg) + +Code snippets can then be copied to clipboard and pasted in projects. + +## Related + +- [Projects](./projects.html.md) +- [Assets](./assets.html.md) + +--- + + + +# Import + +## Overview + +LiveCodes supports importing code from a wide variety of [sources](#sources). This can be achieved using one of the following methods: + +### UI + +The Import screen can be accessed from the Project menu → Import. + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +![LiveCodes Import](../../static/img/screenshots/import-1.jpg) + +![LiveCodes Import](../../static/img/screenshots/import-2.jpg) + +### Query Param + +A URL of any of the [sources](#sources) can be imported by adding it as a value to [query param](../configuration/query-params.html.md) key: `x`. + +Example: + +https://livecodes.io/?x=https://gist.github.com/f01deb828a42f363502fbae7964d48e9 + +### Bookmarklet + +Instead of manually copy/pasting URLs to import, adding [**"Edit in LiveCodes"** bookmarklet](../bookmarklet.html.md) to the browser bookmarks bar can be a more convenient way. It opens LiveCodes in a new window and imports the current webpage URL. + +### SDK + +For [embedded playgrounds](./embeds.html.md), use the [SDK](../sdk/index.html.md) property [`EmbedOptions.import`](../sdk/js-ts.html.md)#import). + +## Examples + +- GitHub File: + + URL: https://github.com/lodash/lodash/blob/master/isObject.js + + [Open in LiveCodes](https://livecodes.io/?x=https://github.com/lodash/lodash/blob/master/isObject.js) + +- GitHub Directory: + + URL: https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards + + [Open in LiveCodes](https://livecodes.io/?x=https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards) + +- GitHub Gist: + + URL: https://gist.github.com/f01deb828a42f363502fbae7964d48e9 + + [Open in LiveCodes](https://livecodes.io/?x=https://gist.github.com/f01deb828a42f363502fbae7964d48e9) + +- JS Bin: + + URL: https://jsbin.com/iwovaj/73/embed?html,js,output + + [Open in LiveCodes](https://livecodes.io/?x=https://jsbin.com/iwovaj/73/embed?html,js,output) + +- Vue Playground: + + URL: [https://play.vuejs.org/#eNp9kUFKAzEUhq/yyKYKtUW6K9OCli4UUVFxlU2Z...](https://play.vuejs.org/#eNp9kUFKAzEUhq/yyKYKtUW6K9OCli4UUVFxlU2Zvk5TM0lIXsbCMGdw7QG8g+fxAl7Bl5RWF9Jd3v//7+cLrxUXzg2aiGIsilB65QgCUnRTaVTtrCdoweMKOlh5W0OPoz1ppCmtCQR1qGCS/JPejWpwZpcY4Ov94/vzDZ45eSpNMdzVciEPhLXTC0KeAIr1+bRtc0nXFUOesqqMiwTNWc1teiIF+1KwVQwP26IvKDDCSlWDTbCG6du0K0Vpa6c0+jtHihGlGEN2krfQ2r5eZ418xP5eL9dYvvyjb8I2aVLcewzoG5Ti4NHCV0g7e/54i1t+H0wmj5rTR8wHDFbHxLiLXUazZOw/uUx7lW+gTPUU5ltCE/afSqAp2eW8FHyX2ZGv/+KOBqO8J00nuh/8Wasi) + + [Open in LiveCodes](https://livecodes.io/?x=https%3A%2F%2Fplay.vuejs.org%2F%23eNp9kUFKAzEUhq%2FyyKYKtUW6K9OCli4UUVFxlU2Zvk5TM0lIXsbCMGdw7QG8g%2BfxAl7Bl5RWF9Jd3v%2F%2F7%2BcLrxUXzg2aiGIsilB65QgCUnRTaVTtrCdoweMKOlh5W0OPoz1ppCmtCQR1qGCS%2FJPejWpwZpcY4Ov94%2FvzDZ45eSpNMdzVciEPhLXTC0KeAIr1%2BbRtc0nXFUOesqqMiwTNWc1teiIF%2B1KwVQwP26IvKDDCSlWDTbCG6du0K0Vpa6c0%2BjtHihGlGEN2krfQ2r5eZ418xP5eL9dYvvyjb8I2aVLcewzoG5Ti4NHCV0g7e%2F54i1t%2BH0wmj5rTR8wHDFbHxLiLXUazZOw%2FuUx7lW%2BgTPUU5ltCE%2FafSqAp2eW8FHyX2ZGv%2F%2BKOBqO8J00nuh%2F8Wasi) + +## Sources + +Import is supported from any of the following: + +- GitHub gist +- GitHub file +- Directory in a GitHub repo +- Gitlab snippet +- Gitlab file +- Directory in a Gitlab repo +- JS Bin +- [Shared projects](./share.html.md) +- Raw code +- Code in web page DOM +- Projects shared in official playgrounds of [TypeScript](https://www.typescriptlang.org/play) and [Vue](https://play.vuejs.org/) +- Local file(s) +- Code in zip file (Local or URL) +- [Exported project JSON](./export.html.md) (single project and bulk import) + +Import sources are identified by URL patterns (e.g. origin, pathname and extension). + +:::tip +Local files can be imported from the "Import Screen" or by dragging and dropping the file(s) in the editor. +::: + +## File Selection + +For sources that provide multiple files (e.g. GitHub/GitLab directories, GitHub gists, GitLab snippets and local files), a best guess is tried to load files in respective editors. Best results are when there are 3 files and each file is in a language (identified by file extension) that can be loaded to a different editor, for example: + +- index.html, style.css, script.js +- default.pug, app.scss, main.ts + +The following file names are given higher priority: + +- Markup files starting with `index.` or `default.` +- Style files starting with `style.` or `styles.` +- Script files starting with `script.`, `app.`, `main.` or `index.` + +While README, markdown files and files with no extension are given lower priority. + +Alternatively, files can be specified using the `files` [query param](../configuration/query-params.html.md). It takes a **comma-separated list** of filenames. The first 3 found files are loaded. If 1 or 2 files are specified, only these will be loaded. The first matching file is shown by default in the active editor. + +The query params should have the following format: +`?x={url}&files={file1},{file2},{file3}` + +Example: +`?x={url}&files=Counter.tsx,counter.scss,counter.html` + +The active editor can be specified using the [`activeEditor`](../configuration/configuration-object.html.md)#activeeditor) (or its alias `active`) [query param](../configuration/query-params.html.md). It takes the name of the editor (`markup`, `style` or `script`) or its ID (`0`, `1` or `2`) to be shown by default. + +Example: +`?x={url}&activeEditor=style` or `?x={url}&active=1` + +## Import Shared Projects + +[Shared Projects](./share.html.md) can be imported using the value of the query param `x` generated by the Share screen. This starts with either: + +- `code/`: for compressed base64-encoded project config +- `id/`: for short URLs recognized by shared project id. + +Example: + +https://livecodes.io/?x=id/bi9qszw86w3 + +## Import Code from DOM + +If the source URL does not match one of the supported origins (GitHub, GitLab and JS Bin), the URL is fetched, its response text is parsed as [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) and code is extracted from elements that match specific CSS selectors. +(By default: `.livecodes [data-lang="{language}"]`) + +:::info Example + +```html + + 
    This is identified as <strong>HTML</strong> code
    +     +``` + +The HTML editor is prefilled with: `This is identified as HTML code` + +Please note that the code should be html-encoded to avoid interference with the HTML of the page. + +::: + +Example: + +https://livecodes.io/?x=https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html + +Alternatively, custom CSS selectors can be specified using [query params](../configuration/query-params.html.md): +`?x={url}&{language}-selector={selector}` + +The following example loads the content of the first element that matches the CSS selector `h3` as `html`: + +https://livecodes.io/?html-selector=h3&x=https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html + +Of course, [embedded playgrounds](./embeds.html.md) can be prefilled with code from the same embedding page. This works well for documentation and educational websites. + +[This is a demo](https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html) for automatic extraction of code blocks to prefill editors by creating "Edit in LiveCodes" links. Also embedded editors are prefilled from the code blocks. ([View source](https://github.com/live-codes/livecodes-examples/blob/master/prefill-from-code-blocks.html)) + +## Import Raw Code + +If the response text could not be parsed as DOM or no elements matched the CSS selectors, it is assumed to be raw code and the response text is loaded to editor. If the URL ends with an extension it is used to identify the language, otherwise it is assumed to be `html`. + +Alternatively, the language of raw code can be specified using [query params](../configuration/query-params.html.md): +`?x={url}&raw={language}` + +## Import from CodePen + +Currently, CodePen API does not allow directly importing code from Pens. However, you can export any saved Pen as a [zip file](https://blog.codepen.io/documentation/exporting-pens/#export-zip-1) or [Github gist](https://blog.codepen.io/documentation/exporting-pens/#save-as-github-gist-2) and then import it to LiveCodes. The format that Codepen exports is well understood by LiveCodes. Most Pens can be imported with no or minimal changes. + +**Note:** External resources (styles/scripts) are not exported with source code in zip file export of CodePen. However, export to GitHub gist does export these. So if a Pen with external resources exported as zip file is not imported properly, try exporting to GitHub gist or manually add the [external resources](./external-resources.html.md). + +## Import Exported LiveCodes Projects + +A [single project exported as JSON](./export.html.md)#exporting-a-single-project) can be imported in the same or a different device from the import screen under the tab "Import Project JSON". The JSON file can be supplied as a local file upload or from a URL. + +Similarly, [multiple projects exported in bulk](./export.html.md)#exporting-multiple-projects) can be imported from the tab "Bulk Import". + +## Related + +- [Code prefill](./code-prefill.html.md) +- [Export](./export.html.md) +- [External resources](./external-resources.html.md) +- [Module resolution](./module-resolution.html.md) +- [Projects](./projects.html.md) + +--- + + + +# Export + +## Exporting A Single Project + +Project export can be accessed from the Project menu → Export. + +![LiveCodes Export](../../static/img/screenshots/export-1.jpg) + +Any project can be exported to: + +- **Project (JSON):** a JSON file containing project [configuration object](../configuration/configuration-object.html.md). This can be used to later [import](./import.html.md)#import-exported-livecodes-projects) that project on the same or a different device or to share a copy of the project with others. +- **Source (ZIP):** a zip file containing the project configuration file as JSON, in addition to the source code in separate files. This can be useful for opening the code in an external IDE. +- **Result (HTML):** [result page](./result.html.md) as a single html file. Can be used for the purpose of demo or deploy. +- **GitHub gist** (_requires login with [GitHub account](./github-integration.html.md)_): creates a **public** GitHub gist on the user's GitHub account containing the source code as separate files. +- **CodePen:** creates a [CodePen](https://codepen.io/) prefilled with the project code. If the used [languages/frameworks](./../languages/index.html.md) are not supported in CodePen (e.g. Astro, Svelte, Python, ...etc), the compiled code is exported so that it continues to work there. [Bare module imports](./module-resolution.html.md) are converted to esm imports, for example: + + ```js + + ``` + + becomes: + + ```js + import React from 'https://cdn.skypack.dev/react'; + ``` + +- **JSFiddle:** creates a [JSFiddle](https://jsfiddle.net/) prefilled with the project code. Exported code may be modified like with CodePen (see above). + +## Exporting Multiple Projects + +Multiple projects can be exported in bulk from the [Saved Projects](./projects.html.md) screen (Project menu → Open) using the button `Export All`. + +![saved projects](../../static/img/screenshots/export-2.jpg) + +This produces a JSON file containing an array of project configuration objects. They can be later imported in the same or a different device using the `Bulk Import` functionality in the [Import screen](./import.html.md)#import-exported-livecodes-projects). + +All the currently visible projects will be exported. If projects are filtered (e.g. by language, tag or search query), only the shown projects are exported. + +## Related + +- [Projects](./projects.html.md) +- [Import](./import.html.md) +- [Backup/Restore](./backup-restore.html.md) +- [Sync](./sync.html.md) +- [Share](./share.html.md) + +--- + + + +# Share + +It is easy to share LiveCodes projects! + +A URL is generated to load the shared project. This URL can be copied or shared to different social media. + +The share screen can be accessed from the share icon at the top right or from the Project menu → Share. + +![LiveCodes Share](../../static/img/screenshots/share-1.jpg) + +By default, the generated URL encodes the project configuration in a base-64-encoded compressed query string. This step is generated locally in the browser without sending the code to any server. However, depending on the size of the project, the URL can be very long. The length of the URL is indicated in the share screen. [Try not to use very long URLs](https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers) to ensure cross-browser compatibility. + +When requested by the user, short URLs can be generated. This requires sending the project configuration (**including source code**) to a server that saves the code and provides a short Id which can be used to retrieve the project. + +![LiveCodes Share - short URL](../../static/img/screenshots/share-2.jpg) + +:::caution + +Generating a short URL for sharing requires sending the project configuration (**including source code**) to LiveCodes share service. **It cannot then be deleted**. + +::: + +:::info Note + +The app hosted on [`https://livecodes.io`](https://livecodes.io) uses an API endpoint specifically provided to generate short URLs for LiveCodes share service. We will make every effort to keep that online and available for free use, so long as it is not abused. Please help keep it available by not abusing it and by [sponsoring the project](../sponsor.html.md). + +Short URLs generated by LiveCodes share service are **private** by default and are not listed or indexed. + +However, [**self-hosted apps**](./self-hosting.html.md) use the free service [dpaste](https://dpaste.com/) for short URLs which are [**deleted after 365 days**](https://dpaste.com/help). You may want to use a [custom service](../advanced/services.html.md) instead. LiveCodes [sponsors](../sponsor.html.md) (Bronze sponsors and above) get access to managed custom services. + +::: + +QR code can be generated for the share URL. This can then be scanned by any QR code scanner (e.g. mobile/tablet camera) to load the project on other devices without having to send the link. Please note that generating QR code also requires generating a short URL (code is sent to the share service - see above). + +![LiveCodes Share - QR code](../../static/img/screenshots/share-3.jpg) + +## Related + +- [Export](./export.html.md) +- [Import](./import.html.md) +- [Deploy](./deploy.html.md) +- [Broadcast](./broadcast.html.md) +- [Backup / Restore](./backup-restore.html.md) +- [Sync](./sync.html.md) +- [Permanent URL](./permanent-url.html.md) + +--- + + + +# Welcome Screen + +--- + + + +# Recover Unsaved + +--- + + + +# Code to Image + +LiveCodes has a feature called "Code to Image" that allows converting the code in the code editor into nice-looking images (or code screenshots), that can be downloaded or shared. + +This can be accessed from the camera icon in the toolbar below the editor. Clicking the icon will open the "Code to Image" screen and load the code in the editor. + +![Code to Image](../../static/img/screenshots/code-to-image-1.jpg) + +Code can be modified in the "Code to Image" screen and then downloaded as image or shared. + +![Code to Image](../../static/img/screenshots/code-to-image-2.jpg) + +There are many options to configure the image to be generated, including background color, border radius, image size, padding, shadow, window style, share URL, editor theme, opacity, code font, image format, etc. + +There are multiple presets that can be used or the options can be manually configured. + +![Code to Image](../../static/img/screenshots/code-to-image-3.jpg) + +![Code to Image](../../static/img/screenshots/code-to-image-4.jpg) + +![Code to Image](../../static/img/screenshots/code-to-image-5.jpg) + +![Code to Image](../../static/img/screenshots/code-to-image-6.jpg) + +--- + + + +# Display Modes + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The [configuration](../configuration/configuration-object.html.md) option [`mode`](../configuration/configuration-object.html.md)#mode), also available as [query param](../configuration/query-params.html.md), can be used to select different display modes. +The following display modes are supported: + +## `full` + +This is the default mode with toolbars, editor and result panes. + +Example: https://livecodes.io/?template=react + +Screenshot: (App in full mode) + +![full-mode](../../static/img/screenshots/mode-full.jpg) + +Demo: (Embedded playground in full mode) + + + +## `focus` + +This hides most of UI buttons and menus and keeps only the essential elements: editors, editor titles, result page, console, and run and share buttons. It can be toggled during runtime from the full mode through the UI from a button in the lower left corner. Also the query param `?mode=focus`. + +Example: https://livecodes.io/?template=react&mode=focus + +Screenshot: (focus mode) + +![focus-mode](../../static/img/screenshots/mode-focus.jpg) + +## `simple` + +This mode is mainly useful for embedded playgrounds. +It shows only 1 editor with the output (result page +/- console). The content of other editors can be set using [SDK](../sdk/index.html.md) [config](../configuration/configuration-object.html.md) even though the editors are not shown. +By default, `codemirror` editor is used, however, this can be changed by the [`editor`](../configuration/configuration-object.html.md)#editor) option. +By default, the layout is `responsive` but can also be overridden by the [`layout`](../configuration/configuration-object.html.md)#layout) option to `vertical` or `horizontal`. + +Demo: JS with console + + + +Demo: JSX & Result page (Monaco editor, add CSS) + +export const simpleConfig = { + mode: 'simple', + layout: 'vertical', + activeEditor: 'script', + editor: 'monaco', + tools: { status: 'none' }, + script: { + language: 'jsx', + content: `import { atom, useAtom } from 'jotai';\n\nconst countAtom = atom(0);\n\nconst Counter = () => {\n const [count, setCount] = useAtom(countAtom);\n const inc = () => setCount((c) => c + 1);\n return (\n <>\n {count} \n \n );\n};\n\nconst App = () => (\n
    \n

    Hello Jotai

    \n

    Enjoy coding!

    \n \n
    \n);\n\nexport default App;\n`, + }, + style: { + language: 'css', + content: '.App {\n font-family: sans-serif;\n text-align: center;\n}\n'.trimStart(), + }, +}; + + + +## `lite` + +Loads a light-weight, minimal code editor, with limited playground features. +See the section about [lite mode](./lite.html.md) for details + +Example: https://livecodes.io/?mode=lite&template=react + +Demo: + + + +## `editor` + +Hides the results pane and works as editor only. + +Example: https://livecodes.io/?mode=editor&template=react + +Demo: + + + +## `codeblock` + +A read-only mode showing only the code block without editor interface. On mouse-over a copy button appears that allows to copy the code. This is specially useful when embedded. + +Example: https://livecodes.io/?mode=codeblock&template=react + +Demo: + + + +By default, in `codeblock` mode, the light-weight `CodeJar` editor is used (in read-only mode). You can override this by setting the `editor` option. Refer to [Editor Settings](./editor-settings.html.md)#code-editor) for details. + +Example: https://livecodes.io/?mode=codeblock&editor=monaco&template=react + +Demo: + + + +## `result` + +Shows the result page only, with a drawer at the bottom (which can be closed) that allows opening the project in the full playground. + +Example: https://livecodes.io/?mode=result&template=react + +Demo: + + + +The tools pane (e.g. console/compiled code viewer) is hidden by default in `result` mode. It can be shown if set to `open` or `full`. Refer to [Tools pane](./tools-pane.html.md) documentation for details. + +Example: https://livecodes.io/?mode=result&tools=console|full&&js=console.log("Hello%20World!") + +Demo: + + + +## Display Mode vs Default View + +:::info + +"Display Mode" is different from "[Default View](./default-view.html.md)". + +In `editor` display mode, only the editor is loaded and the result page is not available. While `editor` default view shows the editor by default, and the result page can be shown by dragging the split gutter. + +The same applies for `result` display mode and default view. + +::: + +--- + + + +# Default View + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The playground can be loaded in one of the following views: + +## `split` + +Both the code editor and the result page are visible. This is the default. + +Example: https://livecodes.io/?view=split + +Demo: + + + +## `editor` + +The code editor is visible, while the result page is collapsed. The result page can be shown by dragging the split gutter, or clicking the "Toggle Result" button. + +Example: https://livecodes.io/?view=editor + +Demo: + + + +## `result` + +The result page is visible, while the code editor is collapsed. The code editor can be shown by dragging the split gutter, or clicking one of the editor tabs. + +Example: https://livecodes.io/?view=result + +Demo: + + + +## Display Mode vs Default View + +:::info + +"[Display Mode](./display-modes.html.md)" is different from "Default View". + +In `editor` display mode, only the editor is loaded and the result page is not available. While `editor` default view shows the editor by default, and the result page can be shown by dragging the split gutter. + +The same applies for `result` display mode and default view. + +::: + +--- + + + +# Themes + +import ThemeDemo from '../../src/components/ThemeDemo.tsx'; + +LiveCodes comes with dark and light themes. In addition, a theme color can be set to change the app color. + +## Theme + +Dark/Light theme can be set in: + +- UI, either: + + - Dark/Light theme switch in toolbar + - Settings menu → Dark theme switch + +- [Query params](../configuration/query-params.html.md): `?theme=dark` or `?theme=light`. + e.g. https://livecodes.io/?theme=light + +- [Configuration object](../configuration/configuration-object.html.md): [`theme`](../configuration/configuration-object.html.md)#theme) property. + +![LiveCodes dark theme](../../static/img/screenshots/themes-1.jpg) + +
    LiveCodes dark theme
    + +![LiveCodes light theme](../../static/img/screenshots/themes-2.jpg) + +
    LiveCodes light theme
    + +## Theme Color + +Similarly, a theme color can be set in: + +- UI: Settings menu → Color + +- [Query params](../configuration/query-params.html.md): `?themeColor={color}`. + e.g. https://livecodes.io/?themeColor=lightblue + +- [Configuration object](../configuration/configuration-object.html.md): [`themeColor`](../configuration/configuration-object.html.md)#themecolor) property. + +![LiveCodes alternate theme color](../../static/img/screenshots/themes-3.jpg) + +
    Change theme color from UI
    + +![LiveCodes custom theme color](../../static/img/screenshots/themes-4.jpg) + +
    Custom theme color
    + +## Demo + + + +:::info Note +Please note that editor themes can be set in the [editor settings](./editor-settings.html.md) or using the [`editorTheme`](../configuration/configuration-object.html.md)#editortheme) configuration option. + +--- + + + +# Mobile Support + +LiveCodes provides a responsive layout that adapts to different screen sizes. Don't wait to be on your desk. Try your ideas on the go! + +Projects that you create on mobile can be easily [shared](./share.html.md) or [synchronized](./sync.html.md) across devices. You can even share using QR code. + +![Responsive layout](../../static/img/screenshots/responsive.jpg) + +By default, LiveCodes uses the touch-friendly [CodeMirror 6](https://codemirror.net/) editor on mobile. This is configurable in the [editor settings](./editor-settings.html.md) and can be changed at any time. + +--- + + + +# Embedded Playgrounds + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +## Overview + +LiveCodes playgrounds can be embedded in any web page. The playground can be [prefilled with code](./code-prefill.html.md) in any supported language. This can be very useful in documentation websites, technical blogs, educational websites and others. + +Demo: + + + +The embedding web page can communicate with the playground using a powerful [SDK](../sdk/index.html.md) (e.g. edit/format code, watch for code changes, get the compiled code or result page HTML, run tests, change layout, ...etc). + +## Create Embedded Playground + +### App Embed Screen + +In the [standalone app](../getting-started.html.md)#standalone-app), the Embed Screen can be accessed from Project menu → Embed. + +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +It shows a preview of the embedded playground, allows customizations of [embed options](../sdk/js-ts.html.md)#embed-options) and provides generated code that can be added to the web page that will embed the playground. + +![LiveCodes embed](../../static/img/screenshots/embed-1.jpg) +![LiveCodes embed](../../static/img/screenshots/embed-2.jpg) +![LiveCodes embed](../../static/img/screenshots/embed-3.jpg) + +:::info Note + +Please note that the Embed Screen sends the project code to [LiveCodes share service](./share.html.md) to generate a short URL for usage in the embed code. + +::: + +The setting "Embed Type" allows selection from different variations of the generated code: + +- Using the SDK from CDN. +- Using the SDK with a bundler (e.g. vite, parcel, webpack, etc). +- Using the React SDK. +- Using the Vue SDK. +- Using iframe and [query params](../configuration/query-params.html.md). +- Using HTML code that the SDK can use to [auto-prefill](./code-prefill.html.md)#auto-prefill-from-page-dom) the playground. + +### SDK + +The LiveCodes [SDK](../sdk/index.html.md) can be used to embed playgrounds, specify [embed](../sdk/js-ts.html.md)#embed-options) and [configuration](../configuration/index.html.md) options and allows communication with the embedded playground with many [SDK methods](../sdk/js-ts.html.md)#sdk-methods). + +This method provides more control and allows advanced scenarios. + +## Avoid Breaking Changes + +To avoid breaking changes that would cause the embedded playgrounds to stop working as expected with later updates, follow these recommendations: + +- Use a [permanent URL](./permanent-url.html.md) to a pinned version of the LiveCodes app for [`EmbedOptions.appUrl`](../sdk/js-ts.html.md)#appurl). The code generated in the Embed screen uses that by default. +- Specify the version of the SDK used. The code generated in the Embed screen also does that. +- For project code, [specify the versions](./module-resolution.html.md)#package-version) of the imported packages and [external resources](./external-resources.html.md). [Custom import maps](./module-resolution.html.md)#custom-module-resolution) can be set to control the module import behavior. + +Check the [Permanent URL](./permanent-url.html.md) section for more details. + +## Differences from Full App + +Some of the features of the full standalone app are not available or shown by default in embedded playgrounds, either because of security reasons, being not useful when embedded or because of space limitations. + +### Features Not Available + +- All features that require saving/loading from browser storage: + e.g. [projects](./projects.html.md), [assets](./assets.html.md), [code snippets](./snippets.html.md), [user settings](./user-settings.html.md), [default template/language](./default-template-language.html.md), [recover unsaved](./recover.html.md), [backup/restore](./backup-restore.html.md). +- All features that require authentication: + e.g. [login/logout](./github-integration.html.md), [sync](./sync.html.md), [deploy](./deploy.html.md), [importing](./import.html.md) from private github repos. +- [Broadcast](./broadcast.html.md). +- App menus. +- Some tools in [tools pane](./tools-pane.html.md): + e.g. open result page in new window, broadcast status. +- [Welcome screen](./welcome.html.md). + +### Features Not Shown by Default + +- [External resources](./external-resources.html.md) button (below the editor) and external resources screen are only shown if the loaded project has external resources (e.g. via [`EmbedOptions.config.stylesheets`](../configuration/configuration-object.html.md)#stylesheets) and [`EmbedOptions.config.scripts`](../configuration/configuration-object.html.md)#scripts)). +- [Tests](./tests.html.md) are not shown in [tools pane](./tools-pane.html.md) unless the loaded project has tests (e.g. via [`EmbedOptions.config.tests`](../configuration/configuration-object.html.md)#tests)). Test editor is not available. +- Loading [starter templates](./templates.html.md) can be achieved by the [SDK](../sdk/index.html.md) ([`EmbedOptions.template`](../sdk/js-ts.html.md)#template)), not from the UI. +- [Importing](./import.html.md) from external sources can be achieved by the [SDK](../sdk/index.html.md) ([`EmbedOptions.import`](../sdk/js-ts.html.md)#import)), not from the UI. +- Getting a [share](./share.html.md) URL can be achieved by the [SDK](../sdk/index.html.md) ([`getShareUrl`](../sdk/js-ts.html.md)#getshareurl) method), not from the UI. + +## Security + +- All user code, [result page](./result.html.md) and compilers run in [sandboxed iframes](https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/) with a unique origin. + +- Embedded playgrounds do not have access to the parent page, or to sensitive data like user cookies and localstorage of the embedding page origin. Communications with the SDK occur by means of [`postMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) calls. + +## Related + +- [SDK](../sdk/index.html.md) +- [Code prefill](./code-prefill.html.md) +- [Configuration](../configuration/index.html.md) +- [Embed options](../sdk/js-ts.html.md)#embed-options) +- [SDK methods](../sdk/js-ts.html.md)#sdk-methods) +- [Permanent URL](./permanent-url.html.md) +- [Lite mode](./lite.html.md) +- [Read-only](./read-only.html.md) + +--- + + + +# Lite Mode + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +In case you need to embed a playground in your web page to show case some code and expect users to mainly read through the code and to have just minor edits, it would be an overkill to load full-blown code editors with auto-complete and code formatting, specially if you want to embed more than one playground in the same page. That's why the LiveCodes playground has a lite mode. + +In lite mode, a light-weight, minimal code editor is used ([CodeJar](./editor-settings.html.md)#code-editor)). [Emmet abbreviations](./emmet.html.md) and [tools pane](./tools-pane.html.md) are not available. However, any language supported by LiveCodes can be used, with syntax highlighting. Code edits are compiled and shown in the [result page](./result.html.md) as usual. + +Demo: + + + +## Using SDK + +Set [`EmbedOptions.config.mode`](../configuration/configuration-object.html.md)#mode) to `"lite"`. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container', { config: { mode: 'lite' } }); +``` + +## Using query params + +Add the [query parameter](../configuration/query-params.html.md) `?mode=lite`. + +https://livecodes.io?mode=lite + +## Related + +- [Read-only](./read-only.html.md). + +--- + + + +# Read-Only + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +In case you need to embed a playground in your web page to show case some code and want users to read through the code and not allow edits, you may use the `readonly` setting. + +Code editing, [formatting](./code-format.html.md), and [console input](./console.html.md) are not available. However, any language supported by LiveCodes can be used, with syntax highlighting. Code can be [prefilled](./code-prefill.html.md), and is compiled and shown in the [result page](./result.html.md) as usual. + +By default, a light-weight, minimal [code editor](./editor-settings.html.md)#code-editor) is used. This can be changed by explicitly setting the [configuration object](../configuration/configuration-object.html.md) property [`editor`](../configuration/configuration-object.html.md)#editor) (e.g. to show hover intellisense). + +Demo: + + + +## Using SDK + +set the [configuration object](../configuration/configuration-object.html.md) property [`readonly`](../configuration/configuration-object.html.md)#readonly) to `true`. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container', { template: 'javascript', config: { readonly: true } }); +``` + +## Using query params + +add the [query parameter](../configuration/query-params.html.md) `readonly` (no need to set a value). + +https://livecodes.io?template=javascript&readonly + +## Related + +- [Code prefill](./code-prefill.html.md) +- [Lite mode](./lite.html.md) + +--- + + + +# Permanent URL + +Any specific version of LiveCodes app can be accessed through the permanent unique URL: + +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import CodeBlock from '@theme/CodeBlock'; +import { AppVersion } from '../../src/components/Versions.tsx'; + +export const AppVersionLink = () => { + const { siteConfig } = useDocusaurusContext(); + return ( + + https://v{siteConfig.customFields.appVersion}.livecodes.io + + ); +}; + +`{version}.livecodes.io` +(e.g. ) + +This allows [embedded playgrounds](./embeds.html.md) to use a pinned version of the LiveCodes app and its dependencies and avoid any breaking changes that may occur in later versions. + +Permanent URL is used by default in the code generated by the [embed screen UI](./embeds.html.md). +It is also available when [sharing](./share.html.md) projects from the share screen. + +The [SDK](../sdk/index.html.md) embed option [`appUrl`](../sdk/js-ts.html.md)#appurl) allows specifying the URL for the app to be used. +In addition, it is always a good practice to use a specific version of the SDK. + +Example: + +export const Code = () => { + const { siteConfig } = useDocusaurusContext(); + return ( + + {`
    \n`} +     + ); +}; + + + +## Get Permanent URL + +You can get the permanent URL for the app from the [About screen](pathname:///../?screen=about) (Help menu → About). By default, the code generated in the [Embed screen](./embeds.html.md)#app-embed-screen) uses permanent URL. +Alternatively, open the browser console of the standalone app (e.g. https://livecodes.io), and run this: + +export const GetPermanentUrl = () => { + const { siteConfig } = useDocusaurusContext(); + return ( + + {`await livecodes.exec('showVersion');\n +// output: +// App Version: ${siteConfig.customFields.appVersion} (https://github.com/live-codes/livecodes/releases/tag/v${siteConfig.customFields.appVersion}) +// SDK Version: ${siteConfig.customFields.sdkVersion} (https://www.npmjs.com/package/livecodes/v/${siteConfig.customFields.sdkVersion}) +// Git commit: 0698f9f (https://github.com/live-codes/livecodes/commit/0698f9f) +// App Permanent URL: https://v${siteConfig.customFields.appVersion}.livecodes.io/ +// SDK Permanent URL: https://cdn.jsdelivr.net/npm/livecodes@${siteConfig.customFields.sdkVersion}/livecodes.js +`} + + ); +}; + + + +:::caution + +Please note that this only applies to the LiveCodes app and its dependencies. +[NPM imports](./module-resolution.html.md) in [project code](./projects.html.md)#script-editor) that do not specify versions use the latest version. +[Package versions](./module-resolution.html.md)#package-version) can be specified in the import. +[Custom import maps](./module-resolution.html.md)#custom-module-resolution) can be set to control the module import behavior. + +Example: + +```js +import lodash from 'lodash@4.17.21'; + +console.log(lodash.VERSION); // -> 4.17.21 +``` + +It is recommended to also specify versions of [external resources](./external-resources.html.md). + +::: + +#### Full Example: + +export const FullCode = () => { + const { siteConfig } = useDocusaurusContext(); + return ( + + {`
    \n`} +     + ); +}; + + + +## Related + +- [Embedded playgrounds](./embeds.html.md) +- [Share](./share.html.md) +- [SDK](../sdk/index.html.md) +- [`exec` SDK method](../sdk/js-ts.html.md)#exec) + +--- + + + +# Code Prefill + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +There are many ways to pre-fill code into playgrounds. This is generally achieved either by the [SDK](../sdk/index.html.md) or using [query params](../configuration/query-params.html.md). + +## Prefill using SDK + +When creating an embedded playground, the following [embed options](../sdk/js-ts.html.md)#embed-options) allow prefill with code: + +### config + +[EmbedOptions.config](../sdk/js-ts.html.md)#config) + +loads a [configuration object](../configuration/configuration-object.html.md) (or a URL to JSON file representing the configuration object) + +Hello World!' }, + style: { language: 'css', content: 'h1 { color: blue; }' }, + }} +> + +### import + +[EmbedOptions.import](../sdk/js-ts.html.md)#import) + +allows [importing](./import.html.md) from many sources. + +Examples: + +Import GitHub directory: + + + +Import shared project: + + + +### template + +[EmbedOptions.template](../sdk/js-ts.html.md)#template) + +loads one of the [starter templates](./templates.html.md). + + + +## Prefill using query params + +[Query parameters](../configuration/query-params.html.md) can provide easy and powerful ways for configuring the playground. + +Example: + + + {'https://livecodes.io/?md=**Hello World!**'} + +
    +
    + + + +## Auto-Prefill from page DOM + +TODO... + +## Related + +- [Import](./import.html.md) +- [Templates](./templates.html.md) +- [Configuration](../configuration/index.html.md) +- [SDK](../sdk/index.html.md) + +--- + + + +# Data URLs + +> **Data URLs**, URLs prefixed with the `data:` scheme, allow content creators to embed small files inline in documents. +> +> — [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) + +Sometimes, you need to use an external file (e.g. script, stylesheet) that is not hosted online. In this case, you can use data URLs to embed the file in your code. These can then be used similar to regular URLs (e.g. for ` +``` + +However, if `imports` is specified as follows: + +```json +{ + "imports": { + "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js" + } +} +``` + +The import map becomes like this: + +```html + +``` + +:::info Note + +Currently, multiple import maps are not yet supported. https://crbug.com/927119 + +When bare module imports are encountered, LiveCodes adds an import map to the result page. If you need to add custom import map or override the automatically generated one, you need to add them to `imports` config property or `imports` [customSettings](#customsettings) property. + +::: + +### `types` + +Type: `[key: string]: string | { autoload?: boolean ; declareAsModule?: boolean ; url: string }` + +Default: `{}` + +Allows providing custom [TypeScript type declarations](https://www.typescriptlang.org/docs/handbook/2/type-declarations.html) for better [editor intellisense](../features/intellisense.html.md). + +It is an object where each key represents module name and value represents the types. +This can be a URL to a type declaration file. For example, if this is the type declaration file: + +```ts title="https://my-custom-domain/my-type-declarations.d.ts" +declare module 'my-demo-lib' { + export class Greeter { + morning(): string; + evening(): string; + } +} +``` + +It can be used like that: + +```json +{ + "types": { + "my-demo-lib": "https://my-custom-domain/my-type-declarations.d.ts" + } +} +``` + +Alternatively, the value for module name can be an object with the following properties: + +- `url`: `string` (required). The URL to type declaration file. +- `autoload`: `boolean` (optional). By default, the types are only loaded when the module is imported in code. If `autoload` property is set to `true`, the types are loaded regardless if the module was imported. +- `declareAsModule`: `boolean` (optional). Declares the types as module with the supplied module name. + +Example: + +```json +{ + "types": { + "my-demo-lib": { + "url": "https://my-custom-domain/types.d.ts", + "autoload": true, + "declareAsModule": true + } + } +} +``` + +### `tests` + +Type: `undefined` | `Partial` + +Default: `{ language: 'typescript', content: '' }` + +Configures the [language](../features/tests.html.md)#supported-languages) and content of [tests](../features/tests.html.md). + +### `version` + +Type: `Readonly` [`string`](../api/interfaces/Config.md#description) + +Default: Current LiveCodes Version. + +This is a read-only property which specifies the current LiveCodes version. It can be shown using the SDK [`exec`](../sdk/js-ts.html.md)#exec) method. + +```js +// in browser console of full app (e.g. https://livecodes.io) +await livecodes.exec('showVersion'); +``` + +Version specified in [exported](../features/export.html.md) projects allows automatically upgrading the project configuration when imported by an app with a newer version. + +## App Settings + +These are properties that define how the app behaves. + +### `readonly` + +Type: [`boolean`](../api/interfaces/Config.md#readonly) + +Default: `false` + +If `true`, editors are loaded in read-only mode, where the user is not allowed to change the code. + +By default, when `readonly` is set to `true`, the light-weight code editor [CodeJar](../features/editor-settings.html.md)#code-editor) is used. If you wish to use another editor, set the [editor](#editor) property. + +### `allowLangChange` + +Type: [`boolean`](../api/interfaces/Config.md#allowlangchange) + +Default: `true` + +If `false`, the UI will not show the menu that allows changing editor language. + +### `view` + +Type: [`"split" | "editor" | "result"`](../api/interfaces/Config.md#view) + +Default: `"split"` + +The [default view](../features/default-view.html.md) for the playground. + +### `mode` + +Type: [`"full" | "focus" | "simple" | "lite" | "result" | "editor" | "codeblock"`](../api/interfaces/Config.md#mode) + +Default: `"full"` + +Sets the [display mode](../features/display-modes.html.md). + +### `tools` + +Type: [`Partial<{ enabled: Array<'console' | 'compiled' | 'tests'> | 'all'; active: 'console' | 'compiled' | 'tests' | ''; status: 'closed' | 'open' | 'full' | 'none' | ''; }>`](../api/interfaces/Config.md#tools) + +Default: `{ enabled: 'all', active: '', status: '' }` + +Sets enabled and active tools and status of [tools pane](../features/tools-pane.html.md). + +Example: + +```json +{ + "tools": { + "enabled": ["console", "compiled"], + "active": "console", + "status": "open" + } +} +``` + + + +### `zoom` + +Type: [`1 | 0.5 | 0.25`](../api/interfaces/Config.md#zoom) + +Default: `1` + +Sets result page [zoom level](../features/result.html.md)#result-page-zoom). + +## User Settings + +These are properties that define the [user settings](./../features/user-settings.html.md), including [editor settings](../features/editor-settings.html.md). + +### `enableAI` + +Type: [`boolean`](../api/interfaces/Config.md#enableai) + +Default: `false` + +If `true`, [AI code assistant](../features/ai.html.md) is enabled. + +### `autoupdate` + +Type: [`boolean`](../api/interfaces/Config.md#autoupdate) + +Default: `true` + +If `true`, the result page is automatically updated on code change, after time [delay](#delay). + +### `autosave` + +Type: [`boolean`](../api/interfaces/Config.md#autosave) + +Default: `false` + +If `true`, the project is automatically saved on code change, after time [delay](#delay). + +### `autotest` + +Type: [`boolean`](../api/interfaces/Config.md#autotest) + +Default: `false` + +If `true`, the project is watched for code changes which trigger tests to auto-run. + +### `delay` + +Type: [`number`](../api/interfaces/Config.md#delay) + +Default: `1500` + +Time delay (in milliseconds) following code change, after which the result page is updated (if [`autoupdate`](#autoupdate) is `true`) and/or the project is saved (if [`autosave`](#autosave) is `true`). + +### `formatOnsave` + +Type: [`boolean`](../api/interfaces/Config.md#formatonsave) + +Default: `false` + +If `true`, the code is automatically [formatted](../features/code-format.html.md) on saving the project. + +### `layout` + +Type: [`"horizontal"| "vertical" | "responsive" | undefined`](../api/interfaces/Config.md#layout) + +Default: `"responsive"` + +Sets the app layout to horizontal or vertical. If set to `"responsive"` (the default) or `undefined`, the layout is vertical in small screens when the playground height is larger than its width, otherwise horizontal. + +### `theme` + +Type: [`"light" | "dark"`](../api/interfaces/Config.md#theme) + +Default: `"dark"` + +Sets the app [theme](../features/themes.html.md) to light/dark mode. + +### `themeColor` + +Type: [`string | undefined`](../api/interfaces/Config.md#themecolor) + +Default: `"hsl(214, 40%, 50%)"` + +A string representing a [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value), used to set the app [theme color](../features/themes.html.md). It can be any valid CSS color value, such as `"#4DB39E"`, `"rgb(245, 225, 49)"`, `"hsl(324, 40%, 50%)"` and `"lightblue"`. + +### `editorTheme` + +Type: [`EditorTheme[] | string | undefined`](../api/interfaces/Config.md#editortheme) + +Default: `undefined` + +Sets the code editor themes. + +:::info Note +You can preview and set editor themes in the [editor settings screen](pathname:///../?screen=editor-settings). +::: + +Three [code editors](#editor) are supported in LiveCodes: **Monaco** (the default on desktop), **CodeMirror** (the default on mobile) and **CodeJar** (the default in [codeblocks](../features/display-modes.html.md)#codeblock), in [lite mode](../features/lite.html.md) and in [readonly](#readonly) playgrounds). Each editor has its own set of themes, represented by the types: [`MonacoTheme`](../api/internal/type-aliases/MonacoTheme.md), [`CodemirrorTheme`](../api/internal/type-aliases/CodemirrorTheme.md) and [`CodejarTheme`](../api/internal/type-aliases/CodejarTheme.md). + +The `editorTheme` property can be used to set the editor theme for each editor and on light/dark modes. It can be set to an array of [`EditorTheme`](../api/internal/type-aliases/EditorTheme.md) items or a string of comma-separated items. + +Each item can be composed of: + +` editor:` `theme-name` `@app-theme` + +Where: + +- `editor` is the name of the editor (`"monaco" | "codemirror" | "codejar"`). [Optional] +- `theme-name` is the name of the theme (e.g. `"monokai"`). [Required] + Valid theme names can be found here: + - Monaco: [`MonacoTheme`](../api/internal/type-aliases/MonacoTheme.md) + - CodeMirror: [`CodemirrorTheme`](../api/internal/type-aliases/CodemirrorTheme.md) + - CodeJar: [`CodejarTheme`](../api/internal/type-aliases/CodejarTheme.md). +- `app-theme` is the name of the app theme (`"dark" | "light"`). [Optional] + +Examples: + +- `"vs"` +- `"monaco:twilight, codemirror:one-dark"` +- `["vs@light"]` +- `["vs@light", "vs-dark@dark"]` +- `["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]` + +Each `EditorTheme` item requires a theme name. The theme name can optionally be preceded with the editor name separated by a colon to specify the editor (e.g. `"monaco:monokai"`). It can also optionally be followed by the app theme separated by "@" (e.g. `"monokai@dark"`). + +Multiple `EditorTheme` items can be supplied (as array items or in the comma-separated string) to specify the theme for each editor and in dark and light modes. The order matters. The first valid item in the array or string for the current editor (`monaco`, `codemirror` or `codejar`) and app theme (`light` or `dark`) will be used. If no items match the current editor and app theme, the default theme for the editor and app theme will be used. + +### `appLanguage` + +Type: [`AppLanguage | undefined`](../api/interfaces/Config.md#applanguage) + +Default: `undefined` + +Spoken language code that sets the app UI language (e.g. `"ar"`, `"zh-CN"`). Used in translations for internationalization. If `undefined` (the default), the language is automatically detected based on the user's browser settings and falls back to English, if detection fails or the language is not supported. + +### `recoverUnsaved` + +Type: [`boolean`](../api/interfaces/Config.md#recoverunsaved) + +Default: `true` + +Enables [recovering last unsaved project](../features/recover.html.md) when the app is reopened. + +### `welcome` + +Type: [`boolean`](../api/interfaces/Config.md#welcome) + +Default: `true` + +If `true`, the [welcome screen](../features/welcome.html.md) is displayed when the app loads. + +### `showSpacing` + +Type: [`boolean`](../api/interfaces/Config.md#showspacing) + +Default: `false` + +Enables [showing element spacing](../features/result.html.md)#show-spacings) in the result page. + +### `editor` + +Type: [`"monaco" | "codemirror" | "codejar" | "auto" | undefined`](../api/interfaces/Config.md#editor) + +Default: `undefined` + +Selects the [code editor](../features/editor-settings.html.md)#code-editor) to use. + +If `undefined` (the default):
    +Monaco editor is used on desktop,
    +CodeMirror is used on mobile and in `simple` mode,
    +while CodeJar is used in [`codeblock` mode](../features/display-modes.html.md)#codeblock), in [`lite` mode](../features/lite.html.md) and in [`readonly`](#readonly) playgrounds. + +If set to `auto`, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings. + +### `fontFamily` + +Type: [`string | undefined`](../api/interfaces/Config.md#fontfamily) + +Default: `undefined` + +Sets the [code editor](../features/editor-settings.html.md) font family. + +### `fontSize` + +Type: [`number | undefined`](../api/interfaces/Config.md#fontfamily) + +Default: `undefined` + +Sets the [code editor](../features/editor-settings.html.md) font size. + +If `undefined` (the default), the font size is set to 14 for the full app and 12 for [embeds](../features/embeds.html.md). + +### `useTabs` + +Type: [`boolean`](../api/interfaces/Config.md#usetabs) + +Default: `false` + +If `true`, lines are indented with tabs instead of spaces. Also used in [code formatting](../features/code-format.html.md). + +### `tabSize` + +Type: [`number`](../api/interfaces/Config.md#tabsize) + +Default: `2` + +The number of spaces per indentation-level. Also used in [code formatting](../features/code-format.html.md). + +### `lineNumbers` + +Type: [`boolean | "relative"`](../api/interfaces/Config.md#linenumbers) + +Default: `true` + +Show line numbers in [code editor](../features/editor-settings.html.md). +If set to `"relative"`, line numbers are shown relative to the current line. This can be useful with [vim mode](#editormode). + +### `wordWrap` + +Type: [`boolean`](../api/interfaces/Config.md#wordwrap) + +Default: `false` + +Enables word-wrap for long lines. + +### `closeBrackets` + +Type: [`boolean`](../api/interfaces/Config.md#closebrackets) + +Default: `true` + +Use auto-complete to close brackets and quotes. + +### `foldRegions` + +Type: [`boolean`](../api/interfaces/Config.md#foldregions) + +Default: `false` + +When set to `true`, regions marked by `#region` and `#endregion` comments are folded when the project is loaded. + +### `emmet` + +Type: [`boolean`](../api/interfaces/Config.md#emmet) + +Default: `true` + +Enables [Emmet](../features/editor-settings.html.md)#emmet). + +### `editorMode` + +Type: [`"vim" | "emacs" | undefined`](../api/interfaces/Config.md#editormode) + +Default: `undefined` + +Sets [editor mode](../features/editor-settings.html.md)#editor-modes). + +### `semicolons` + +Type: [`boolean`](../api/interfaces/Config.md#semicolons) + +Default: `true` + +Configures Prettier [code formatter](../features/code-format.html.md) to use [semi-colons](https://prettier.io/docs/en/options.html#semicolons). + +### `singleQuote` + +Type: [`boolean`](../api/interfaces/Config.md#singlequote) + +Default: `false` + +Configures Prettier [code formatter](../features/code-format.html.md) to use [single quotes instead of double quotes](https://prettier.io/docs/en/options.html#quotes). + +### `trailingComma` + +Type: [`boolean`](../api/interfaces/Config.md#trailingcomma) + +Default: `true` + +Configures Prettier [code formatter](../features/code-format.html.md) to use [trailing commas](https://prettier.io/docs/en/options.html#trailing-commas). + +--- + + + +# Query Parameters + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +A flexible and convenient way to configure the app is to use URL query parameters. +It allows configuration of a wide range of options, including those of the [configuration object](./configuration-object.html.md) and [embed options](../sdk/js-ts.html.md)#embed-options). + +
    +Example: + +``` +https://livecodes.io?js=console.log('Hello World!')&console=open +``` + + + +## Usage + +- All properties of [configuration object](./configuration-object.html.md) and [embed options](../sdk/js-ts.html.md)#embed-options) that have values of primitive types (e.g. string, number, boolean) can be assigned to a query parameter with the same name. + + These include: + [config](../sdk/js-ts.html.md)#config), + [import](../sdk/js-ts.html.md)#import), + [lite](../configuration/configuration-object.html.md)#mode), + [loading](../sdk/js-ts.html.md)#loading), + [template](../sdk/js-ts.html.md)#template), + [view](../configuration/configuration-object.html.md)#view), + [title](./configuration-object.html.md)#title), + [description](./configuration-object.html.md)#description), + [activeEditor](./configuration-object.html.md)#activeeditor), + [cssPreset](./configuration-object.html.md)#csspreset), + [readonly](./configuration-object.html.md)#readonly), + [allowLangChange](./configuration-object.html.md)#allowlangchange), + [mode](./configuration-object.html.md)#mode), + [autoupdate](./configuration-object.html.md)#autoupdate), + [autosave](./configuration-object.html.md)#autosave), + [delay](./configuration-object.html.md)#delay), + [formatOnsave](./configuration-object.html.md)#formatonsave), + [theme](./configuration-object.html.md)#theme), + [themeColor](./configuration-object.html.md)#themecolor), + [appLanguage](./configuration-object.html.md)#applanguage), + [recoverUnsaved](./configuration-object.html.md)#recoverunsaved), + [welcome](./configuration-object.html.md)#welcome), + [showSpacing](./configuration-object.html.md)#showspacing), + [layout](./configuration-object.html.md)#layout), + [editor](./configuration-object.html.md)#editor), + [editorTheme](./configuration-object.html.md)#editortheme), + [fontFamily](./configuration-object.html.md)#fontfamily), + [fontSize](./configuration-object.html.md)#fontsize), + [useTabs](./configuration-object.html.md)#usetabs), + [tabSize](./configuration-object.html.md)#tabsize), + [lineNumbers](./configuration-object.html.md)#linenumbers), + [wordWrap](./configuration-object.html.md)#wordwrap), + [closeBrackets](./configuration-object.html.md)#closebrackets), + [emmet](./configuration-object.html.md)#emmet), + [editorMode](./configuration-object.html.md)#editormode), + [semicolons](./configuration-object.html.md)#semicolons), + [singleQuote](./configuration-object.html.md)#singlequote), + [trailingComma](./configuration-object.html.md)#trailingcomma). + + Example: + + ``` + ?theme=light&delay=500&lineNumbers=false + ``` + +- Any value given for booleans except `"false"` (including no value) will be considered `true`. + + Example: all these are considered `true` + + ``` + ?lite=true + ?lite=1 + ?lite=any + ?lite + ``` + + while this is considered `false` + + ``` + ?lite=false + ``` + +- Parameters that expect array of values can be supplied with comma separated values. These include: + [tags](./configuration-object.html.md)#tags), + [languages](./configuration-object.html.md)#languages), + [processors](./configuration-object.html.md)#processors), + [stylesheets](./configuration-object.html.md)#stylesheets), + [scripts](./configuration-object.html.md)#scripts). + + Example: + + ``` + ?languages=html,md,css,ts + ``` + +- Values set in the URL query parameters override those set in [configuration object](./configuration-object.html.md). + +- Unlike [user settings](../features/user-settings.html.md) that are set in the UI which are saved and subsequently used, those that are set in query parameters are not automatically saved. + +- Additional query parameters include: + + - `no-defaults`: `boolean` (Default: `false`). + + If `true`, the app will not load the [default template/language](../features/default-template-language.html.md). + + - `x`: `string`. + + Alias to [`import`](../sdk/js-ts.html.md)#import) (a URL to [import](../features/import.html.md)). + + - `files`: `string`. + + A comma-separated [list of files to import](../features/import.html.md)#file-selection). + + - `raw`: [`Language`](../api/type-aliases/Language.md). + + When used with `import` or `x`, imports the URL as code of the provided language. + + - `language`: [`Language`](../api/type-aliases/Language.md). + + The language to load by default in the editor. + + - `lang`: [`Language`](../api/type-aliases/Language.md). + + Alias to `language`. + + - `active`: `"markup" | "style" | "script" | 0 | 1 | 2`. + + Alias to [`activeEditor`](./configuration-object.html.md)#activeeditor). + + - `tools`: `"open" | "full" | "closed" | "console" | "compiled" | "tests" | "none"` + + The [tools pane](../features/tools-pane.html.md) status. + + - `console`: `"open" | "full" | "closed" | "none"` + + The [console](../features/console.html.md) status. + + - `compiled`: `"open" | "full" | "closed" | "none"` + + The [compiled code viewer](../features/compiled-code.html.md) status. + + - `tests`: `"open" | "full" | "closed" | "none"` + + The [tests panel](../features/tests.html.md) status. + + - `scrollPosition`: `boolean` (Default: `true`). + + If `false`, the [result page](../features/result.html.md) [scroll position](../features/result.html.md)#scroll-position) will not be maintained after reload. + + - Any [`Language`](../api/type-aliases/Language.md) can used as a query parameter, and the value will be used as its code. + + Example: + + ``` + https://livecodes.io?js=console.log('Hello World!') + ``` + +:::info Examples +For usage examples, check [storybook](pathname:///../stories/?path=/story/embed-options-params--select-language) and [unit tests](https://github.com/live-codes/livecodes/blob/develop/src/livecodes/config/__tests__/build-config.spec.ts). +::: + + + +--- + + + +# LiveCodes SDK + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds. + +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.html.md) and [embed options](js-ts.html.md)#embed-options). In addition, [SDK methods](js-ts.html.md)#sdk-methods) allow programmatic communication and control of the playgrounds during runtime. + +The [JavaScript SDK](js-ts.html.md) is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently [React](react.html.md) and [Vue](vue.html.md)). The SDK can be used in [Svelte](svelte.html.md) directly without wrappers. [TypeScript support](js-ts.html.md)#typescript-types) provides type-safety and a great developer experience. + +## SDK Demo + +This is an example of an editable embedded playground using the SDK. + + + +## Installation + +### NPM Package + +This is a single npm package for the SDK which supports JavaScript/TypeScript, React, Vue and Svelte. +Install the library from npm: + +```bash npm2yarn +npm install livecodes +``` + +then it can be used like that: + +```js title="index.js" +import { createPlayground } from 'livecodes'; + +createPlayground('#container', { + // embed options +}); +``` + +### CDN + +Alternatively, it can just be loaded from a CDN. + +ESM: + +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import CodeBlock from '@theme/CodeBlock'; + +export const ESMCode = () => { + const { siteConfig } = useDocusaurusContext(); + return ( + + {`
    \n`} +     + ); +}; + + + +UMD: + +export const UMDCode = () => { + const { siteConfig } = useDocusaurusContext(); + return ( + + {`
    \n\n +`} +     + ); +}; + + + +:::info + +In the full [standalone app](../getting-started.html.md)#standalone-app), the JavaScript SDK is accessible via the global variable `livecodes`, which can be interacted with in the browser console. + +::: + +## Usage + +The SDK is currently provided in the following variations: + +- [JavaScript/TypeScript](./js-ts.html.md) + +- [React](./react.html.md) + +- [Vue](./vue.html.md) + +- [Svelte](./svelte.html.md) + +## Headless Mode + +The SDK also has a [headless mode](./headless.html.md). In this mode, no visible output is displayed in the embedding web page. However, all [SDK methods](../sdk/js-ts.html.md)#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. + +## SDK Playground! + +A demo page that shows the usage of the SDK can be [found here](https://live-codes.github.io/livecodes-examples/sdk-demo.html) ([source](https://github.com/live-codes/livecodes-examples/blob/gh-pages/sdk-demo.html)). + +Or edit the SDK playground in LiveCodes. How meta! :) + + + +P.S. You may want to use the "Full Screen" button! + +--- + + + +# JavaScript/TypeScript SDK + +import LiveCodes from '../../src/components/LiveCodes.tsx'; +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + +This is the core SDK on which others ([React](react.html.md), [Vue](vue.html.md), and [Svelte](svelte.html.md) SDKs) are build on top. It is a light-weight ([less than 5kb gzipped](https://bundlephobia.com/package/livecodes)), zero-dependencies library that allows creating, embedding and communication with LiveCodes playgrounds. It also allows easily creating links to playgrounds. + +## Installation + +Please refer to the [SDK installation](./index.html.md)#installation) section. + +:::info + +In the full [standalone app](../getting-started.html.md)#standalone-app), the JavaScript SDK is accessible via the global variable `livecodes`, which can be interacted with in the browser console. + +::: + +## TypeScript Types + +TypeScript types are [documented here](../api/globals.md) and can be imported from the library. + +```ts +import type { EmbedOptions, Playground } from 'livecodes'; +``` + +The following 2 functions are exported by the library: + +## `createPlayground` + +Type: [`(container: string | Element, options?: EmbedOptions) => Promise`](../api/functions/createPlayground.md) + +The library exports the function `createPlayground` which has 2 parameters: + +- `container` (required): `HTMLElement` or a string representing a CSS selector. This is the container where the playground is rendered. + If not found, an error is thrown (except in [headless mode](./headless.html.md), in which this parameter is optional and can be omitted). +- `options` (optional): an object with embed options ([EmbedOptions](../api/interfaces/EmbedOptions.md)). + +The `createPlayground` function returns a promise which resolves to an object that exposes the SDK methods ([Playground](../api/interfaces/Playground.md)). + +```ts +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = { + // appUrl: ... + // config: ... + // headless: ... + // import: ... + // loading: ... + // params: ... + // template: ... +}; + +createPlayground('#container', options).then((playground) => { + // the `playground` object exposes the SDK methods + // e.g. playground.run() +}); +``` + +:::caution Throws + +The `createPlayground` function throws an error (promise is rejected) in any of the following conditions: + +- The first parameter ([`container`](#createplayground)) is not an element or not found (by CSS selector), except in [headless mode](./headless.html.md). +- The embed option [`appUrl`](#appurl) is supplied and is not a valid URL. +- The embed option [`config`](#config) is supplied and is not an object or a valid URL. +- Any of the [SDK methods](#sdk-methods) was called after calling the [`destroy`](#destroy) method. + +::: + +### Multiple Sources + +When multiple sources are provided in the [embed options](#embed-options), each is converted to a [configuration object](../configuration/configuration-object.html.md) and the properties are merged. +In case there are conflicts between the properties of the configurations, they are overridden in the following order: +- [`template`](#template) (lowest precedence) +- [`import`](#import) +- [`config`](#config) +- [`params`](#params) (highest precedence) + +## `getPlaygroundUrl` + +Type: [`(options?: EmbedOptions) => string`](../api/functions/getPlaygroundUrl.md) + +Gets the URL to playground (as a string) from the provided [options](#embed-options). This can be useful for providing links to run code in playgrounds. + +Example: + +```html +
    # Hello World!
    +Open in playground + +``` + +export const getPlaygroundUrlDemo = { + html: `
    # Hello World!
    \nOpen in playground\n`, +}; + + + +## Embed Options + +Type: [`EmbedOptions`](../api/interfaces/EmbedOptions.md) + +The [`createPlayground`](#createplayground) and [`getPlaygroundUrl`](#getplaygroundurl) functions accept an optional object that allows providing different options to the playground. This object can have the following optional properties: + +### `appUrl` + +Type: [`string`](../api/interfaces/EmbedOptions.md#appurl) + +Default: `"https://livecodes.io/"` + +Allows loading the playground from a custom URL (e.g. a [self-hosted app](../features/self-hosting.html.md) or a [permanent URL](../features/permanent-url.html.md)). + +If supplied with an invalid URL, an error is thrown. + +### `config` + +Type: [`string | Partial`](../api/interfaces/EmbedOptions.md#config) + +Default: `{}` + +A [configuration object](../configuration/configuration-object.html.md) or a URL to a JSON file representing a configuration object to load. + +If supplied and is not an object or a valid URL, an error is thrown. + +### `headless` + +Type: [`boolean`](../api/interfaces/EmbedOptions.md#headless) + +Default: `false` + +When set to `true`, the playground is loaded in [headless mode](./headless.html.md). + +### `import` + +Type: [`string`](../api/interfaces/EmbedOptions.md#import) + +A resource to [import](../features/import.html.md) (from any of the supported [sources](../features/import.html.md)#sources)). + +### `loading` + +Type: [`"eager" | "lazy" | "click"`](../api/interfaces/EmbedOptions.md#loading) + +Default: `"lazy"` + +Sets how the playground loads: + +- `"eager"`: The playground loads immediately. +- `"lazy"`: A playground embedded low down in the page will not load until the user scrolls so that it approaches the viewport. +- `"click"`: The playground does not load automatically. Instead, a "Click-to-load" screen is shown. + +### `params` + +Type: [`UrlQueryParams`](../api/interfaces/EmbedOptions.md#params) + +An object that represents [URL Query parameters](../configuration/query-params.html.md), that can be used to configure the playground. + +These 2 snippets produce similar output: + +```js +import { createPlayground } from 'livecodes'; + +// use config +createPlayground('#container', { + config: { + markup: { + language: 'markdown', + content: '# Hello World!', + }, + }, +}); + +// use params +createPlayground('#container', { params: { md: '# Hello World!' } }); +``` + +### `template` + +Type: [`TemplateName`](../api/interfaces/EmbedOptions.md#template) + +A [starter template](../features/templates.html.md) to load. Allowed valued can be found [here](../api/interfaces/EmbedOptions.md#template). + +## SDK Methods + +The [`createPlayground`](#createplayground) function returns a promise which resolves to an object ([`Playground`](../api/interfaces/Playground.md)) that exposes some useful SDK methods that can be used to interact with the playground. These methods include: + +### `load` + +Type: [`() => Promise`](../api/interfaces/Playground.md#load) + +When the embed option `loading` is set to `click`, the playground is not loaded automatically. Instead, a screen is shown with "Click to load" button. +Calling the SDK method `load()` allows loading the playground. + +If the playground was not loaded, calling any other method will load the playground first before executing. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + await playground.load(); + // playground loaded +}); +``` + +### `run` + +Type: [`() => Promise`](../api/interfaces/Playground.md#run) + +Runs the [result page](../features/result.html.md) (after any required compilation for code). + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + await playground.run(); + // new result page is displayed +}); +``` + +### `format` + +Type: [`(allEditors?: boolean) => Promise`](../api/interfaces/Playground.md#format) + +[Formats the code](../features/code-format.html.md). + +By default, the code in all editors (markup, style and script) is formatted. +If you wish to format only the active editor, pass the value `false` as an argument. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + await playground.format(); + // code in editors is formatted +}); +``` + +### `getShareUrl` + +Type: [`(shortUrl?: boolean) => Promise`](../api/interfaces/Playground.md#getshareurl) + +Gets a [share url](../features/share.html.md) for the current project. + +By default, the url has a long query string representing the compressed encoded config object. If the argument `shortUrl` was set to `true`, a short url is generated. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + const longUrl = await playground.getShareUrl(); + const shortUrl = await playground.getShareUrl(true); +}); +``` + +### `getConfig` + +Type: [`(contentOnly?: boolean) => Promise`](../api/interfaces/Playground.md#getconfig) + +Gets a config object representing the playground state. This can be used to restore state if passed as [embed option](#createplayground) property on creating playground, or can be manipulated and loaded in run-time using [`setConfig`](#setconfig) method. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + const config = await playground.getConfig(); +}); +``` + +### `setConfig` + +Type: [`(config: Partial) => Promise`](../api/interfaces/Playground.md#setconfig) + +Loads a new project using the passed configuration object. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + const config = { + markup: { + language: 'html', + content: 'Hello World!', + }, + }; + const newConfig = await playground.setConfig(config); + // new project loaded +}); +``` + +### `getCode` + +Type: [`() => Promise`](../api/interfaces/Playground.md#getcode) + +Gets the playground code (including source code, source language and compiled code) for each editor (`markup`, `style`, `script`), in addition to result page HTML. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + const code = await playground.getCode(); + + // source code, language and compiled code for the script editor + const { content, language, compiled } = code.script; + + // result page HTML + const result = code.result; +}); +``` + +### `show` + +Type: [`(panel: 'editor' | 'markup' | 'style' | 'script' | 'console' | 'compiled' | 'tests' | 'result' | 'toggle-result', options?: { full?: boolean; line?: number; column?: number; zoom?: 1 | 0.5 | 0.25 }) => Promise`](../api/interfaces/Playground.md#show) + +Shows the selected panel, which is either: + +- Active Editor: `editor` +- Specific Editor: `markup`, `style` or `script` +- Tool: `console`, `compiled` or `tests` +- Result page: `result` or `toggle-result` + +The second optional argument is an object: + +- It may have the boolean property `full`, which If `true`, selected editor or result page will take the full vertical and horizontal space of the playground, while tools will take the full vertical and half the horizontal space, leaving some space for the active editor. + +- The optional properties `line` and `column` allow scrolling to line/column number in the shown editor. + +- The optional property `zoom` sets the result page [zoom level](../features/result.html.md)#result-page-zoom) (the selected panel must be `result`). + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + const delay = (duration) => + new Promise((resolve) => { + setTimeout(resolve, duration); + }); + + await playground.show('toggle-result'); + await delay(2000); + await playground.show('style'); + await delay(2000); + await playground.show('result', { full: true }); + await delay(2000); + await playground.show('script'); + await delay(2000); + await playground.show('result', { zoom: 0.5 }); + await delay(2000); + await playground.show('console', { full: true }); +}); +``` + +### `runTests` + +Type: [`() => Promise<{ results: TestResult[] }>`](../api/interfaces/Playground.md#runtests) + +Runs project [tests](./../features/tests.html.md) (if present) and gets test results. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + const { results } = await playground.runTests(); +}); +``` + +### `watch` + +Type: [docs](../api/interfaces/Playground.md#watch) + +```ts +((event: 'load', fn: () => void) => { remove: () => void }) & +((event: 'ready', fn: (data: { config: Config }) => void) => { remove: () => void }) & +((event: 'code', fn: (data: { code: Code; config: Config }) => void) => { remove: () => void }) & +((event: 'console', fn: (data: { method: string; args: any[] }) => void) => { remove: () => void }) & +((event: 'tests', fn: (data: { results: TestResult[]; error?: string }) => void) => { remove: () => void }) & +((event: 'destroy', fn: () => void) => { remove: () => void }); +``` + +Allows to watch for various playground events. It takes 2 arguments: event name and a callback function that will be called on every event. + +In some events, the callback function will be called with an object that supplies relevant data to the callback function (e.g. code, console output, test results). + +The `watch` method returns an object with a single method `remove`, which when called will remove the callback from watching further events. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then((playground) => { + const codeWatcher = playground.watch('code', ({ code, config }) => { + // this will run on every code change + console.log('code:', code); + console.log('config:', config); + }); + + const consoleWatcher = playground.watch('console', ({ method, args }) => { + // this will run on every console output + console[method](...args); + }); + + const testsWatcher = playground.watch('tests', ({ results }) => { + // this will run when tests run + results.forEach((testResult) => { + console.log('status:', testResult.status); // "pass", "fail" or "skip" + console.log(testResult.errors); // array of errors as strings + }); + }); + + // then later + codeWatcher.remove(); + consoleWatcher.remove(); + testsWatcher.remove(); + // events are no longer watched +}); +``` + +These are the events that can be watched and the description of their callback functions: + +- `"load"`: Called when the playground first loads. + + ```ts + ( + event: "load", + fn: () => void + ) => { remove: () => void } + ``` + +- `"ready"`: Called when a new project is loaded (including when [imported](../features/import.html.md)) and the playground is ready to run. + + ```ts + ( + event: "ready", + fn: (data: { config: Config }) => void + ) => { remove: () => void } + ``` + +- `"code"`: Called when the playground "content" is changed (see [`getCode`](./js-ts.html.md)#getcode) and [`getConfig`](./js-ts.html.md)#getconfig)). + + This includes changes in: + + - Code (in editors) + - Editor languages + - [CSS processors](../features/css.html.md)#css-processors) + - [External resources](../features/external-resources.html.md) + - Project info (e.g. allows adding content in page head and attributes to `` element) + - [Custom settings](../advanced/custom-settings.html.md) (e.g. allows changing [import maps](../features/module-resolution.html.md)#custom-module-resolution)) + - Project title + - [Test](../features/tests.html.md) code + + ```ts + ( + event: "code", + fn: (data: { code: Code; config: Config }) => void + ) => { remove: () => void } + ``` + +- `"console"`: Called when the playground console gets new outputs. The callback method is passed an object with 2 properties: `"method"` (e.g. `"log"`, `"error"`, etc.) and `"args"` (the arguments passed to the method, as an array). + + ```ts + ( + event: "console", + fn: (data: { method: string; args: any[] }) => void + ) => { remove: () => void } + ``` + +- `"tests"`: Called when tests run and test results are available (see [`runTests`](./js-ts.html.md)#runtests)). + + ```ts + ( + event: "tests", + fn: (data: { results: TestResult[]; error?: string }) => void + ) => { remove: () => void } + ``` + +- `"destroy"`: Called when the playground is destroyed. + ```ts + ( + event: "destroy", + fn: () => void + ) => { remove: () => void } + ``` + +### `onChange` + +**Deprecated**: Use [`watch`](#watch) method instead. + +Type: [`(fn: ChangeHandler) => { remove: () => void }`](../api/interfaces/Playground.md#onchange) + +Allows to watch the playground for changes. It takes a callback function that will be called on every change. + +The callback function will be called with an object that has 2 properties: `code` and `config`, representing the current codes and configuration objects (see [`getCode`](#getcode) and [`getConfig`](#getconfig)). + +The `onChange` method returns an object with a single method `remove`, which when called will remove the callback from watching changes. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then((playground) => { + const watcher = playground.onChange(({ code, config }) => { + // this will run on every code change + console.log('code:', code); + console.log('config:', config); + }); + + // then later + watcher.remove(); + // changes are no longer watched +}); +``` + +### `exec` + +Type: [`(command: APICommands, ...args: any[]) => Promise<{ output: any } | { error: string }>`](../api/interfaces/Playground.md#exec) + +Execute custom commands, including: + +- `"setBroadcastToken"`: Sets [broadcast `userToken`](../features/broadcast.html.md)#technical-details). + +```js +// in browser console of full app (e.g. https://livecodes.io) +await livecodes.exec('setBroadcastToken', 'my-token'); +``` + +- `"showVersion"`: Logs the current LiveCodes app version, SDK version, git commit SHA, [permanent app URL](../features/permanent-url.html.md) and SDK URL in the browser console. + +```js +// in browser console of full app (e.g. https://livecodes.io) +await livecodes.exec('showVersion'); +``` + +### `destroy` + +Type: [`() => Promise`](../api/interfaces/Playground.md#destroy) + +Destroys the playground instance, and removes event listeners. Further call to any SDK methods throws an error. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + await playground.destroy(); + // playground destroyed + // any further SDK call throws an error +}); +``` + +## Styles + +### Default Styles + +By default, the container element is styled when the SDK is initialized (including width, height, border, etc.). To disable default styles, set the container element attribute `data-default-styles` to `"false"` before initializing. + +Example: + +```html +
    + +``` + +### Height + +By default, the playground container height is set to `"300px"`. To change the height, either disable the default styles and override them, or simply set the `data-height` attribute to a number (in pixels) or any valid CSS value (e.g. `"100%"` to take the full height of its parent element). + +Example: + +```html +
    + +``` + +## Demo + +export const sdkDemo = { + js: `import { createPlayground } from "livecodes";\n\nconst params = {\n html: "

    Hello World!

    ",\n css: "h1 {color: blue;}",\n js: 'console.log("Hello, LiveCodes!")',\n console: "open",\n};\n\ncreatePlayground('#container', { params });\n`, + html: '
    ', +}; + + + +## Related + +- [React SDK](./react.html.md) +- [Vue SDK](./vue.html.md) +- [Using SDK in Svelte](./svelte.html.md) +- [Embedded Playgrounds](../features/embeds.html.md) + +--- + + + +# React SDK + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The react SDK is a thin wrapper around the [JavaScript SDK](js-ts.html.md) to provide an easy to use react component, yet retaining the full power, by having access to the [SDK methods](js-ts.html.md)#sdk-methods). + +It has a very simple [implementation](https://github.com/live-codes/livecodes/blob/develop/src/sdk/react.tsx) which you can easily modify in case you need. + +## Installation + +Please refer to the [SDK installation](./index.html.md)#installation) section. + +## Usage + +The react component is provided as the default export from `livecodes/react`. + +```jsx title="JSX" +import LiveCodes from 'livecodes/react'; + +export const Playground = () => ; +``` + +### TypeScript Support + +Prop types are exported as `Props` from `livecodes/react`. + +```tsx title="TSX" +import LiveCodes, { type Props } from 'livecodes/react'; + +const options: Props = { + // embed options +}; +export const Playground = () => ; +``` + +TypeScript types are [documented here](../api/globals.md). + +### Props + +All [embed options](js-ts.html.md)#embed-options) are available as props with the corresponding types. + +Example: + +```jsx title="JSX" +import LiveCodes from 'livecodes/react'; + +const config = { + markup: { + language: 'markdown', + content: '# Hello World!', + }, +}; +export const Playground = () => ; +``` + +In addition, the following props are also available: + +- `className` + + Type: `string`. + + Class name(s) to add to playground container element. + + Example: + + ```jsx title="JSX" + import LiveCodes from 'livecodes/react'; + + export const Playground = () => ; + ``` + +- `height` + + Type: `string`. + + Sets the height of playground container element. + + Example: + + ```jsx title="JSX" + import LiveCodes from 'livecodes/react'; + + export const Playground = () => ; + ``` + +- `style` + + Type: `Record`. + + Defines styles to add to playground container element. Styles set here override the [default styles](js-ts.html.md)#default-styles). + + Example: + + ```tsx title="JSX" + import LiveCodes from 'livecodes/react'; + + const style = { + margin: 'auto', + width: '80%', + }; + export const Playground = () => ; + ``` + +- `sdkReady` + + Type: `(sdk: Playground) => void`. + + A callback function, that is provided with an instance of the [JavaScript SDK](js-ts.html.md) representing the current playground. This allows making use of full capability of the SDK by calling [SDK methods](js-ts.html.md)#sdk-methods). + + Example: + + ```tsx title="TSX" + import { useState } from 'react'; + import LiveCodes from 'livecodes/react'; + import type { Playground } from 'livecodes'; + + export const App = () => { + const [playground, setPlayground] = useState(); + + const onReady = (sdk: Playground) => { + setPlayground(sdk); + }; + + const run = async () => { + await playground?.run(); + }; + + return ( + <> + + + + ); + }; + ``` + +## Demo + +export const reactSDKDemo = { + jsx: `import LiveCodes from "livecodes/react";\n\nconst App = () => {\n const params = {\n html: "

    Hello World!

    ",\n css: "h1 {color: blue;}",\n js: 'console.log("Hello, World!")',\n console: "open",\n };\n\n return ;\n};\n\nexport default App;\n`, +}; + + + +## Related + +- [SDK Installation](./index.html.md)#installation) +- [JS/TS SDK](./js-ts.html.md) +- [Vue SDK](./vue.html.md) +- [Using SDK in Svelte](./svelte.html.md) +- [Embedded Playgrounds](../features/embeds.html.md) + +--- + + + +# Vue SDK + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The vue SDK is a thin wrapper around the [JavaScript SDK](js-ts.html.md) to provide an easy to use vue component, yet retaining the full power, by having access to the [SDK methods](js-ts.html.md)#sdk-methods). + +It has a very simple [implementation](https://github.com/live-codes/livecodes/blob/develop/src/sdk/vue.ts) which you can easily modify in case you need. + +## Installation + +Please refer to the [SDK installation](./index.html.md)#installation) section. + +## Usage + +The vue component is provided as the default export from `livecodes/vue`. + +```html title="App.vue" + + + +``` + +### TypeScript Support + +Prop types are exported as `Props` from `livecodes/vue`. + +```html title="App.vue" + + + +``` + +TypeScript types are [documented here](../api/globals.md). + +### Props + +All [embed options](js-ts.html.md)#embed-options) are available as props with the corresponding types. + +Example: + +```html title="App.vue" + + + +``` + +In addition, the following prop is also available: + +- `height` + + Type: `string`. + + Sets the [height of playground container](js-ts.html.md)#height) element. + + Example: + + ```html title="App.vue" + + + + ``` + +### Events + +- `"sdkReady"` + + Type: `(sdk: Playground) => void`. + + When the playground initializes, the event `"sdkReady"` is emitted. The event handler function is provided with an instance of the [JavaScript SDK](js-ts.html.md) representing the current playground. This allows making use of full capability of the SDK by calling [SDK methods](js-ts.html.md)#sdk-methods). + + Example: + + ```html title="App.vue" + + + + ``` + +### Styles + +Styles can be applied to the component [as usual](https://vuejs.org/guide/essentials/class-and-style.html#binding-html-classes). + +By default, a set of [default styles](js-ts.html.md)#default-styles) are applied to the playground container. Styles passed to the component override these default styles. + +Example: + +```html title="App.vue" + + + +``` + +## Demo + +export const vueSDKDemo = { + vue: `\n\n\n`, +}; + + + +## Related + +- [SDK Installation](./index.html.md)#installation) +- [JS/TS SDK](./js-ts.html.md) +- [React SDK](./react.html.md) +- [Using SDK in Svelte](./svelte.html.md) +- [Embedded Playgrounds](../features/embeds.html.md) + +--- + + + +# Svelte + +import LiveCodes from '../../src/components/LiveCodes.tsx'; +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + +The [JS/TS SDK](js-ts.html.md) can be used directly in Svelte components without the need for any wrappers. + +## Installation + +Please refer to the [SDK installation](./index.html.md)#installation) section. + +## Usage + +This is an example of using the LiveCodes JS SDK in a Svelte component: + +```html title="Component.svelte" + + +
    +``` + +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: '

    Hello World!

    ',\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
    \n`, +}; + + + +[Embed options](./js-ts.html.md)#embed-options), [SDK methods](./js-ts.html.md)#sdk-methods) and [TypeScript types](./js-ts.html.md)#typescript-types) are available as described in the [JS/TS SDK documentations](./js-ts.html.md). + +Alternatively, the SDK function [`createPlayground`](./js-ts.html.md)#createplayground) can be used as an [action](https://learn.svelte.dev/tutorial/actions). + +Example: + +```html title="Component.svelte" + + +
    +``` + +However, it is recommended to cleanup when the node is unmounted, like that: + +```html title="Component.svelte" + + +
    +``` + +## Demo + + + +## Related + +- [SDK Installation](./index.html.md)#installation) +- [JS/TS SDK](./js-ts.html.md) +- [React SDK](./react.html.md) +- [Vue SDK](./vue.html.md) +- [Embedded Playgrounds](../features/embeds.html.md) + +--- + + + +# Headless Mode + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The LiveCodes [SDK](../sdk/index.html.md) can be used to create playgrounds in headless mode. In this mode, no visible output is displayed in the embedding web page. However, all [SDK methods](../sdk/js-ts.html.md)#sdk-methods) are accessible (e.g. for [updating code](./js-ts.html.md)#setconfig), [getting compiled code](./js-ts.html.md)#getcode), console output, [result HTML](./js-ts.html.md)#getcode), [shareable URLs](./js-ts.html.md)#getshareurl), [formatting code](./js-ts.html.md)#format), [running tests](./js-ts.html.md)#runtests), etc). + +This provides the power of leveraging the wide range of features and language support offered by LiveCodes, while retaining full control over the UI. + +## Usage + +To create a headless playground, set the [embed option](./js-ts.html.md)#embed-options) [`headless`](../sdk/js-ts.html.md)#headless) to `true`. + +Please note that in headless mode, the first parameter (`container`) of the function [`createPlayground`](../sdk/js-ts.html.md)#createplayground) is optional and can be omitted. + +
    + +Example: + +```js +import { createPlayground } from 'livecodes'; + +createPlayground({ + view: 'headless', + config: { + markup: { + language: 'markdown', + content: '# Hello World!', + }, + }, +}).then(async (playground) => { + const code = await playground.getCode(); + console.log(code.markup.compiled); // "

    Hello World!

    " + console.log(code.result); // (result page HTML) +}); +``` + +## Examples + +The following examples show how to use the headless mode to make a Markdown editor, an MDX editor and a Python interpreter. + +:::tip + +You may want to view the following playgrounds in full screen (using the full screen button in the top right of each playground). + +::: + +### Markdown Editor + +In this demo, code changes are watched using the SDK method [`watch('code', callback)`](./js-ts.html.md)#watch). The callback function accepts an argument which is an object with the properties `code` and `config` (see [`getCode`](./js-ts.html.md)#getcode) and [`getConfig`](./js-ts.html.md)#getconfig)). The compiled code is obtained as `code.markup.compiled`. + + +export const mdDemo = { markup: { language: 'html', content: `\n
    Loading...
    \n\n\x3Cscript type="module">\n import { createPlayground } from "https://cdn.jsdelivr.net/npm/livecodes@0.2.0";\n import debounce from "https://jspm.dev/debounce";\n\n const initialCode = "# Hello, LiveCodes!\\n\\n";\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {\n lineNumbers: true,\n mode: "markdown",\n });\n editor.setSize("100%", 200);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: "headless",\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const compile = async () => {\n await livecodes.setConfig({\n autoupdate: false,\n markup: {\n language: "markdown",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on("change", debounce(compile, 1000));\n livecodes.watch("code", ({ code, config }) => {\n createSandbox(document.querySelector("#output"), code.markup.compiled);\n });\n\n await compile();\n\n // create a sandbox for safe execution of compiled code\n function createSandbox (container, html) {\n const iframe = document.createElement("iframe");\n iframe.src = "https://livecodes-sandbox.pages.dev/v7/";\n iframe.sandbox =\n "allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts";\n iframe.onload = () => {\n iframe.contentWindow.postMessage({ html }, "*");\n };\n container.innerHTML = "";\n container.appendChild(iframe);\n return iframe;\n };\n\x3C/script>\n\n\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js">\x3C/script>\n\n\n` }} + + + +### MDX Editor + +In this demo, code changes are watched using the SDK method [`watch('code', callback)`](./js-ts.html.md)#watch). The callback function accepts an argument which is an object with the properties `code` and `config` (see [`getCode`](./js-ts.html.md)#getcode) and [`getConfig`](./js-ts.html.md)#getconfig)). The result HTML is obtained as `code.result`. + +:::tip + +If you do not want to run the result page in the headless playground and only want to get the generated result HTML, you can set the configuration option [`autoupdate](../configuration/configuration-object.html.md)#autoupdate) to `false`. + +::: + + +export const mdxDemo = { markup: { language: 'html', content: `\n
    Loading...
    \n\n\x3Cscript type="module">\n import { createPlayground } from "https://cdn.jsdelivr.net/npm/livecodes@0.2.0";\n import debounce from "https://jspm.dev/debounce";\n\n const initialCode = \`import { useState, useEffect } from 'react';\n\nexport const Hello = ({name}) => {\n const [count, setCount] = useState(0);\n return (\n <>\n

    Hello, {name}!

    \n

    You clicked {count} times.

    \n \n \n );\n};\n\n\n\n## MDX in short\n\n- ❤️ Powerful\n- 💻 Everything is a component\n- 🔧 Customizable\n- 📚 Markdown-based\n- 🔥 Blazingly blazing fast\n\n> from [mdxjs.com](https://mdxjs.com/)\n\`;\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {\n lineNumbers: true,\n mode: "markdown",\n });\n editor.setSize("100%", 200);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: "headless",\n config: { autoupdate: false },\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const compile = async () => {\n await livecodes.setConfig({\n autoupdate: false,\n markup: {\n language: "mdx",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on("change", debounce(compile, 1000));\n livecodes.watch("code", ({ code, config }) => {\n createSandbox(document.querySelector("#output"), code.result);\n });\n\n await compile();\n\n // create a sandbox for safe execution of compiled code\n function createSandbox (container, html) {\n const iframe = document.createElement("iframe");\n iframe.src = "https://livecodes-sandbox.pages.dev/v7/";\n iframe.sandbox =\n "allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts";\n iframe.onload = () => {\n iframe.contentWindow.postMessage({ html }, "*");\n };\n container.innerHTML = "";\n container.appendChild(iframe);\n return iframe;\n };\n\x3C/script>\n\n\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js">\x3C/script>\n\n\n` }} + + + +### Python Interpreter + +In this demo, console output is obtained using the SDK method [`watch('code', callback)`](./js-ts.html.md)#watch). The callback function accepts an argument which is an object with the properties `method` and `args` indicating the console method and the arguments that were passed (as an array). + + +export const pyDemo = { markup: { language: 'html', content: `\n
    Loading...
    \n\n\x3Cscript type="module">\n import { createPlayground } from "https://cdn.jsdelivr.net/npm/livecodes@0.2.0";\n import debounce from "https://jspm.dev/debounce";\n\n const initialCode = \`def say_hello(name):\n return f"Hello, {name}!"\n\nprint(say_hello("LiveCodes"))\n\`;\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {\n lineNumbers: true,\n mode: "python",\n });\n editor.setSize("100%", 250);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: "headless",\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const run = async () => {\n await livecodes.setConfig({\n autoupdate: true,\n script: {\n language: "python",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on("change", debounce(run, 1000));\n livecodes.watch("console", ({ method, args }) => {\n const output = document.querySelector("#output");\n output.innerHTML = args.join("\\n");\n if (method === "error") {\n output.style.color = "red";\n } else {\n output.style.color = "unset";\n }\n });\n\n await run();\n\x3C/script>\n\n\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/mode/python/python.js">\x3C/script>\n\n\n` }} + + + +--- + + + +# Advanced Topics {#advanced-topics-custom-content-top} + +```mdx-code-block +import DocCardList from '@theme/DocCardList'; +import {useCurrentSidebarCategory} from '@docusaurus/theme-common'; + + item.docId !== 'languages/index')}/> +``` + +--- + + + +# Custom Settings + +--- + + + +# Services + +LiveCodes (being a client-side app) uses multiple services (for example for authentication, sharing, module resolution, etc). + +These services are [defined here](https://github.com/live-codes/livecodes/tree/develop/src/livecodes/services). + +Some of the services are not supported on [self-hosted](../features/self-hosting.html.md) deploys and are either replaced by other compatible services or require you to provide an alternative service. + +Examples: + +- The [share](../features/share.html.md) service in [self-hosted](../features/self-hosting.html.md) apps uses [dpaste](https://dpaste.com/) for short URLs, which are [**deleted after 365 days**](https://dpaste.com/help). +- [Firebase configuration](https://github.com/live-codes/livecodes/tree/develop/src/livecodes/services/firebase.ts) for authentication. + +:::info + +LiveCodes [sponsors](../sponsor.html.md) (Bronze sponsors and above) get access to managed custom services. + +::: + +If you [self-host](../features/self-hosting.html.md) your app and need to change any of these services, start by following the [guide described there](../features/self-hosting.html.md). + +Then, edit the services you want (in [`src/livecodes/services`](https://github.com/live-codes/livecodes/tree/develop/src/livecodes/services)). The used services need to have the same interface. + +The app then needs to be re-built using the command: + +```shell +npm run build +``` + +The built app is in `build` directory. This can be hosted on any static file server. + +--- + + + +# Languages + +## Overview + +The term "language" used in these documentations refer to any technology (in addition to web languages: HTML, CSS and JavaScript), that needs some form of transformation/compilation to run in the browser. + +LiveCodes provides support for a wide range of languages, which include (but not limited to): + +- Syntax used by web libraries/frameworks (e.g. JSX, TSX, Vue SFC, Svelte SFC, MDX, Astro). +- Languages that transpile to JavaScript (e.g. TypeScript, CoffeeScript, LiveScript, ReScript). +- Languages/frameworks that generate CSS (e.g. SCSS, Less, Stylus, Tailwind CSS, UnoCSS). +- CSS processors (e.g. PostCSS, Autoprefixer, Lightning CSS, CSS Modules, cssnano) +- Traditional programming languages (e.g. Python, Ruby, Go, PHP, C++, R, Lua, Scheme, Perl). +- Data manipulation/logic languages (e.g. SQL, Prolog). +- Authoring/templating languages (e.g Markdown, AsciiDoc, Pug, Handlebars, Haml). +- Low-code/visual editors (e.g. blockly, rich text editor). +- Modeling languages/diagram-as-code (e.g. Gnuplot, Graphviz, Mermaid, Vega, Plotly). +- Languages that target WebAssembly (e.g. AssemblyScript, WebAssembly Text Format) +- ... and others. + +Below is the full list of supported languages with documentations for usage in LiveCodes. + +## Language List + +```mdx-code-block +import DocCardList from '@theme/DocCardList'; +import {useCurrentSidebarCategory} from '@docusaurus/theme-common'; + + item.docId !== 'languages/index')}/> +``` + +--- + + + +# art-template + +[art-template](https://aui.github.io/art-template/) is a high performance JavaScript templating engine. + +## Usage + +There are 2 modes for rendering: + +### Pre-rendered (Default) + +The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md). + +The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs. + +Example: This provides the value of the expression `name` + +```json title="Custom Settings" +{ + "template": { + "data": { + "name": "LiveCodes" + } + } +} +``` + +[Full example below](#pre-rendered) + +### Dynamic + +To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`. + +Example: + +```json title="Custom Settings" +{ + "template": { + "prerender": false + } +} +``` + +In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime. + +This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data. + +Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that. + +Example: + +```js title="Script Editor (JS)" +window.livecodes.templateData = { name: 'LiveCodes' }; +``` + +[Full example below](#dynamic-1) + +## Language Info + +### Name + +`art-template` + +### Extensions + +`.art`, `.art-template` + +### Editor + +`markup` + +## Compiler + +The official [art-template compiler](https://www.npmjs.com/package/art-template). + +### Version + +`art-template`: v4.13.2 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `art-template` are passed as a JSON object to the [`compile`](https://aui.github.io/art-template/docs/api.html#compile-source-options) method during compile. Please check the [documentation](https://aui.github.io/art-template/docs/options.html) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +**Example:** + +```json title="Custom Settings" +{ + "art-template": { + "minimize": false + } +} +``` + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +### Pre-rendered + +export const config = { + markup: { language: 'art-template', content: 'Hello {{name}}!' }, + customSettings: { template: { data: { name: 'LiveCodes' } } }, +}; + +export const params = { compiled: 'open' }; + + + +### Dynamic + +export const config2 = { + markup: { language: 'art-template', content: 'Hello {{name}}!' }, + script: { + language: 'javascript', + content: 'window.livecodes.templateData = { name: "LiveCodes" };', + }, + customSettings: { template: { prerender: false } }, + activeEditor: 'script', +}; + + + +## Links + +- [Official website](https://aui.github.io/art-template/) +- [Documentation](https://aui.github.io/art-template/docs/) + +--- + + + +# AsciiDoc + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +[AsciiDoc](https://asciidoc.org) is a plain text markup language for writing technical content. It’s packed with semantic elements and equipped with features to modularize and reuse content. AsciiDoc content can be composed using a text editor, managed in a version control system, and published to multiple output formats. + +In LiveCodes, AsciiDoc is compiled to HTML using [Asciidoctor](https://asciidoctor.org/). + +## Usage + +### Demo + +export const asciidocConfig = { + markup: { + language: 'asciidoc', + content: `= AsciiDoc Demo + +== Features + +* Simple +* Clean +* Dev-friendly +`, + }, +} + + + +## Language Info + +### Name + +`asciidoc` + +### Extensions + +`adoc`, `asc` + +## Editor + +`markup` + +## Compiler + +[Asciidoctor.js](https://docs.asciidoctor.org/asciidoctor.js/latest/) + +### Version + +Asciidoctor.js: `v2.2.8` + +## Code Formatting + +Not supported. + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `asciidoc` are passed as a JSON object to the [`convert()`](https://docs.asciidoctor.org/asciidoctor.js/latest/setup/quick-tour/#your-first-conversion) function during compile. +Please check the [documentation](https://docs.asciidoctor.org/asciidoctor.js/latest/processor/convert-options/) and [document attributes](https://docs.asciidoctor.org/asciidoc/latest/attributes/document-attributes-ref/) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +```json +{ + "asciidoc": { + "attributes": { + "source-highlighter": "highlight.js", + "icons": "font" + } + } +} +``` + +## Limitations + +- Some advanced extensions may not work (e.g. diagrams) + +## Links + +- [AsciiDoc](https://asciidoc.org) +- [Asciidoctor](https://asciidoctor.org/) +- [AsciiDoctor.js](https://docs.asciidoctor.org/asciidoctor.js/latest/) + +--- + + + +# AssemblyScript + +TODO... + +--- + + + +# Astro + +TODO... + +--- + + + +# Autoprefixer + +TODO... + +--- + + + +# Babel + +[Babel](https://babeljs.io/) is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. + +## Language Info + +### Name + +`babel` + +### Extensions + +`.es`, `.babel` + +### Editor + +`script` + +## Compiler + +The official [`@babel/standalone` compiler](https://babeljs.io/docs/babel-standalone). + +### Version + +`@babel/standalone`: v7.24.7 + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `babel` are passed as a JSON object to the [`Babel.transform`](https://babeljs.io/docs/babel-standalone#api) method during compile. Please check the [documentation](https://babeljs.io/docs/babel-core/) for full reference. + +By default, the following configuration is used: + +```json +{ + "babel": { "presets": [["env", { "modules": false }], "typescript", "react"] } +} +``` + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +export const params = { + babel: + 'export const numbers = [1, 2, 3].map((x) => x * 2);\n\nexport const Greet = (name: string) => <>Hello {name}!;\n', + compiled: 'open', +}; + + + +## Links + +- [Babel official website](https://babeljs.io/) +- [Babel documentation](https://babeljs.io/docs/) + +--- + + + +# BBCode + +[BBCode](https://www.bbcode.org/) ("Bulletin Board Code") is a lightweight markup language used to format messages in many Internet forum software. + +## Language Info + +### Name + +`bbcode` + +### Extensions + +`.bbcode`, `.bb` + +### Editor + +`markup` + +## Compiler + +[BBob](https://github.com/JiLiZART/BBob). + +### Version + +`BBob`: v3.0.2 + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +export const config = {markup: {language: 'bbcode', content: '[i]Text[/i]'}}; + +export const params = {compiled: 'open'}; + + + +## Links + +- [bbcode.org](https://www.bbcode.org/) +- [BBCode guide](https://www.phpbb.com/community/help/bbcode) +- [BBCode on Wikipedia](https://en.wikipedia.org/wiki/BBCode) + +--- + + + +# Blockly + +TODO... + +--- + + + +# Civet + +TODO... + +--- + + + +# Clio + +TODO... + +--- + + + +# ClojureScript + +[ClojureScript](https://clojurescript.org/) is a robust, practical, and fast programming language with a set of useful features that together form a simple, coherent, and powerful tool. + +ClojureScript is a compiler for [Clojure](https://clojure.org/) that targets +JavaScript.
    In LiveCodes, it runs in the browser using +[Cherry](https://github.com/squint-cljs/cherry). + +:::info Note + +Lisp language family supported in LiveCodes includes [Common Lisp](./commonlisp.html.md), [Scheme](./scheme.html.md), [ClojureScript](./clojurescript.html.md) and [Fennel](./fennel.html.md). + +::: + +## Language Info + +### Name + +`clojurescript` + +### Extensions + +`cljs`, `cljc`, `clj`, `edn`, `clojure` + +### Editor + +`script` + +## Compiler + +[Cherry](https://github.com/squint-cljs/cherry) + +If `JSX` is used (using `#jsx` reader tag - [example](https://github.com/squint-cljs/cherry/blob/60adcf6e3a8fb940a80c6a193599da0272fe3058/examples/jsx/pages/component.cljs)), it is also compiled ([JSX](./jsx.html.md)). See [example usage](#example-usage). + +### Version + +`cherry-cljs`: v0.2.18 + +## Code Formatting + +Using [Parinfer](https://shaunlebron.github.io/parinfer/). + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +export const params = { + cljs: `(ns demo\n${' '};; you can use npm modules\n${' '}(:require ["canvas-confetti$default" :as confetti]))\n\n(let [el (js/document.getElementById "test")]\n${' '}(.addEventListener el "click"\n ${' '}(fn []\n ${' '}(confetti)\n${' '}(println "test"))))\n`, + html: '', + console: 'open', +}; + + + +Using React (with JSX): + + + +## Starter Template + +https://livecodes.io/?template=clojurescript + +## Links + +- [ClojureScript official website](https://clojurescript.org/) +- [Clojure official website](https://clojure.org/) +- [Cherry repo](https://github.com/squint-cljs/cherry) + +--- + + + +# CoffeeScript + +[CoffeeScript](https://coffeescript.org/) is a little language that compiles into JavaScript. + +## Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +This example demonstrates usage in LiveCodes: + + + +## Language Info + +### Name + +`coffeescript` + +### Extensions + +`.coffee` + +### Aliases + +`coffee`, `coffeescript` + +### Editor + +`script` + +## Compiler + +The official [CoffeeScript compiler](https://www.npmjs.com/package/coffeescript). + +### Version + +`coffeescript`: v2.7.0 + +## Starter Template + +https://livecodes.io/?template=coffeescript + +## Links + +- [Official website](https://coffeescript.org/) +- [Language Reference](https://coffeescript.org/#language) +- [CoffeeScript on GitHub](https://github.com/jashkenas/coffeescript) + +--- + + + +# Common Lisp + +[Common Lisp](https://common-lisp.net/) is a dialect of the Lisp programming language. + +In LiveCodes, Common Lisp code runs in the browser using [JSCL](https://github.com/jscl-project/jscl), a Common Lisp to JavaScript compiler. + +:::info Note + +Lisp language family supported in LiveCodes includes [Common Lisp](./commonlisp.html.md), [Scheme](./scheme.html.md), [ClojureScript](./clojurescript.html.md) and [Fennel](./fennel.html.md). + +::: + +## Usage + +LiveCodes runs Common Lisp code in the browser. JSCL implements a subset of Common Lisp, but covers enough functionality to write practical code. + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +This example demonstrates basic Common Lisp syntax and functionality: + + + +### JS Interoperability + +Please see [JSCL docs](https://github.com/jscl-project/jscl/wiki/JSCL-and-manipulations-with-JS-objects) + +## Language Info + +### Name + +`commonlisp` + +### Aliases/Extensions + +`common-lisp`, `lisp` + +### Editor + +`script` + +## Compiler + +[JSCL](https://github.com/jscl-project/jscl) - Common Lisp to JavaScript compiler + +## Code Formatting + +Using [Parinfer](https://shaunlebron.github.io/parinfer/). + +## Limitations + +Since JSCL is a subset of Common Lisp, it doesn't implement all Common Lisp features. See the [JSCL documentation](https://github.com/jscl-project/jscl#status) for more information. + +## Starter Template + +https://livecodes.io/?template=commonlisp + +## Links + +- [Common Lisp](https://common-lisp.net/) +- [JSCL](https://github.com/jscl-project/jscl) +- [Common Lisp: A Gentle Introduction to Symbolic Computation](https://www.cs.cmu.edu/~dst/LispBook/) +- [Practical Common Lisp](http://www.gigamonkeys.com/book/) + +--- + + + +# C/C++ (Wasm) + +TODO... + +--- + + + +# C++ + +TODO... + +--- + + + +# C# (Wasm) + +C# is a high-level, general-purpose, object-oriented programming language developed by Microsoft. + +In LiveCodes, C# runs in the browser using Blazor WebAssembly with a WebAssembly-based .NET runtime. + +## Usage + +Demo: + + +import LiveCodes from '../../src/components/LiveCodes.tsx'; +export const csharpConfig = { + activeEditor: 'script', + script: { + language: 'csharp-wasm', + content: `using System; + +public class Program +{ + public static void Main() + { + int[] sortedArray = { 1, 3, 5, 7, 9, 11, 13, 15 }; + int itemToSearch = 7; + + int result = BinarySearch(sortedArray, 0, sortedArray.Length - 1, itemToSearch); + + if (result == -1) + { + Console.WriteLine("Result: Item not found in the array."); + } + else + { + Console.WriteLine($"Result: Item found at index -> {result}"); + } + } + + public static int BinarySearch(int[] arr, int left, int right, int item) + { + if (right >= left) + { + int mid = left + (right - left) / 2; + if (arr[mid] == item) + { + return mid; + } + + if (arr[mid] > item) + { + return BinarySearch(arr, left, mid - 1, item); + } + + return BinarySearch(arr, mid + 1, right, item); + } + return -1; + } +}`, + }, + mode: 'simple', + editor: 'auto', + tools: { + status: 'full', + }, +}; + + + + +### Communication with JavaScript + +The C# code runs in the context of the result page. A few helper properties and methods are available in the browser global `livecodes.csharp` object: + +- `livecodes.csharp.input`: The initial standard input passed to the C# code. +- `livecodes.csharp.loaded`: A promise that resolves when the C# environment (Blazor WebAssembly) is fully loaded. Other helpers should be used after this promise resolves. +- `livecodes.csharp.output`: The standard output from the C# code execution. +- `livecodes.csharp.run`: A function that runs the C# code with new input. This function takes a string as input and returns a promise that resolves with an object containing the `output`, `error`, and `exitCode` properties. + +Example: + + + + + +## Language Info + +### Name + +`csharp-wasm` + +### Aliases / Extensions + +`cs`, `csharp`, `wasm.cs`, `cs-wasm` + +### Editor + +`script` + +## Compiler + +Blazor WebAssembly with .NET WebAssembly runtime. + +### Version + +.NET 9.0 + +## Code Formatting + +using [Prettier](https://prettier.io/) + +## Live Reload + +By default, new code changes are sent to the result page for re-evaluation without a full page reload, avoiding the need to reinitialize the Blazor environment. This behavior can be disabled by adding the code comment `// __livecodes_reload__` to the C# code, which forces a full page reload. + +This comment can be added in the `hiddenContent` property of the editor for embedded playgrounds. + +## Example Usage + +```csharp +using System; + +public class Program +{ + public static void Main() + { + Console.WriteLine("Hello, LiveCodes C#!"); + } +} +``` + +## Starter Template + +https://livecodes.io/?template=csharp-wasm + +## Links + +- [C#](https://learn.microsoft.com/en-us/dotnet/csharp/) +- [Blazor WebAssembly](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor) + +--- + + + +# CSS + +TODO... + +--- + + + +# CSS Modules + +A [CSS Module](https://github.com/css-modules/css-modules) is a CSS file in which all class names and animation names are scoped locally by default. + +The selector names are unique to avoid naming collision. They can then be imported as a JavaScript object. + +## Usage + +CSS Modules can be enabled from the style editor menu. + +Selectors added to the style editor (using any language e.g. CSS, SCSS, Less, etc.) are transformed to unique selectors. The transformed classes are then accessible in the script editor as a JSON object, and are injected into the HTML elements. + +**Example:** + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + + +```css +:global .page { + padding: 20px; +} + +.text { + color: black; + font-family: sans-serif; +} + +.small-text { + composes: text; + font-size: 20px; +} + +.large-text { + composes: text; + font-size: 40px; +} + +.large-text:hover { + color: red; +} + +.title { + composes: large-text; + color: green; +} +``` + + + + +```css +.page { + padding: 20px; +} + +._text_1ygro_9 { + color: black; + font-family: sans-serif; +} + +._small-text_1ygro_19 { + font-size: 20px; +} + +._large-text_1ygro_29 { + font-size: 40px; +} + +._large-text_1ygro_29:hover { + color: red; +} + +._title_1ygro_47 { + color: green; +} +``` + + + + +```json +{ + "text": "_text_1ygro_9", + "small-text": "_small-text_1ygro_19 _text_1ygro_9", + "large-text": "_large-text_1ygro_29 _text_1ygro_9", + "title": "_title_1ygro_47 _large-text_1ygro_29 _text_1ygro_9", + "smallText": "_small-text_1ygro_19 _text_1ygro_9", + "largeText": "_large-text_1ygro_29 _text_1ygro_9" +} +``` + + + + +```html +
    +

    Page Title

    +

    + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non + beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur + similique facere facilis minima tempora. +

    +
    +``` + +     + + +```html +
    +

    Page Title

    +

    + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non + beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur + similique facere facilis minima tempora. +

    +
    +``` + +     +     + +In the script editor, the JSON object representing the transformed classes can be imported from the relative URLs `'./style.module.css'` or `'./styles.module.css'`. + +[Default](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#default_import), [named](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#named_import) and [namespace](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#namespace_import) imports are supported. Class names are also available in camelCase (e.g `.large-text` becomes `largeText`). This can be changed by setting [`localsConvention`](https://github.com/madyankin/postcss-modules#localsconvention) in [custom settings](#custom-settings). + +**Example:** + +```js title="In script editor (using JS in this case):" +import classes from './style.module.css'; +import { smallText } from './styles.module.css'; +import * as allClasses from './styles.module.css'; + +console.log(classes.title); + +// .small-text -> smallText +console.log(smallText); + +// .large-text -> largeText +console.log(allClasses.largeText); + +// bracket notation for class with dash +console.log(allClasses['large-text']); +``` + +For full example, see [example usage](#example-usage) below. + +:::info + +CSS Modules has to be enabled (from style editor menu), to be able to import classes in the script editor. + +Importing a URL that does not include `.module` (e.g. `./style.css`) gets the processed CSS **string** as the module's default export. + +The extension of the style editor language can also be used, in addition to `.css`. For example, when using SCSS, importing from any of the following URLs is the same: + +- `./style.module.css` +- `./styles.module.css` +- `./style.module.scss` +- `./styles.module.scss` + +::: + +## Language Info + +### Name + +`cssmodules` + +### Type + +[Processor](../features/css.html.md)#css-processors) + +### Editor + +`style` + +## Compiler + +The CSS Modules processor is provided using [postcss-modules](https://github.com/madyankin/postcss-modules) as a [PostCSS](./postcss.html.md) plugin. + +### Version + +`postcss-modules`: v6.0.1 + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `cssmodules` are passed as a JSON object to the `postcss-modules` plugin during compile. Please check the [documentation](https://github.com/madyankin/postcss-modules#usage) for full reference. + +In addition, the following settings are available: + +- `addClassesToHTML` + + Type: `boolean`. Default: `true`. + + The generated classes are injected into the HTML elements, so the styles are applied without having to assign them using JavaScript. + +- `removeOriginalClasses` + + Type: `boolean`. Default: `false`. + + When enabled, the original classes are removed from HTML, keeping only the generated classes. Only applies if `addClassesToHTML` is enabled. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +**Example:** + +```json +{ + "cssmodules": { + "exportGlobals": true, + "localsConvention": "camelCaseOnly", + "addClassesToHTML": false + } +} +``` + +## Limitations + +Currently, loading external sources in [`composes`](https://github.com/css-modules/css-modules#composing-from-other-files) is not supported. + +```css +/* you cannot do this */ +.title { + composes: title from 'https://example.com/styles.css'; +} +``` + +If you get this working, [please create a pull request](https://github.com/live-codes/livecodes/pulls). + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +export const params = { + activeEditor: 'style', + html: '
    \n

    Page Title

    \n

    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur similique facere facilis minima tempora.

    \n
    \n', + css: ':global .page {\n padding: 20px;\n}\n\n.text {\n color: black;\n font-family: sans-serif;\n}\n\n.small-text {\n composes: text;\n font-size: 20px;\n}\n\n.large-text {\n composes: text;\n font-size: 40px;\n}\n\n.large-text:hover {\n color: red;\n}\n\n.title {\n composes: large-text;\n color: green;\n}\n', + js: "import classes from './style.module.css';\n\ndocument.querySelector('h1').className = classes.title;\nconsole.log(classes);\n", + processors: 'cssmodules', + compiled: 'open', +}; + + + +## Links + +- [CSS Modules](https://github.com/css-modules/css-modules) +- [postcss-modules](https://github.com/madyankin/postcss-modules) +- [PostCSS](https://postcss.org/) + +--- + + + +# cssnano + +TODO... + +--- + + + +# Diagrams + +import OpenCode from '../../src/components/OpenCode.tsx'; + +## Overview + +Diagrams-as-code. + +Allows using syntax for multiple visualization libraries inside HTML to produce diagrams. +The rendered diagrams are added to the [result page](../features/result.html.md) as either: + +- SVG elements (which you can style with CSS or manipulate with JavaScript) +- HTML images (which you can right-click and save or open in a new window) + +Diagrams from multiple libraries can be used in the same page. Only the libraries used will be loaded in the LiveCodes playground. The result page will have no libraries (only the output SVG or images). + +Open starter template in LiveCodes + +## Usage + +This code: () + +```html +
    + + +``` + +produces this output: + +![flow-chart](./img/flow-chart.svg) + +

    Steps

    + +#### 1. Add a diagram target: + +The target element should have a `data-src` attribute. + +It can be an HTML element (the SVG of the diagram will be embedded as a child element) + +```html +
    +``` + +becomes + +```html +
    ...
    +``` + +or an HTML image element (the diagram will be added to its `src` attribute as a [data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)) + +```html + +``` + +becomes + +```html + +``` + +There can be more that one target element for the same diagram if they have the same `data-src` attribute. + +```html +
    + +``` + +#### 2. Add a script element with the diagram syntax: + +It should have: + +- an attribute `type="application/diagram-{diagram type}"` that specifies the diagram type (e.g. `type="application/diagram-mermaid"`). +- a `data-output` attribute that matches the `data-src` attribute of the target element. +- the syntax of the diagram is the content of the script element or the content of a file linked by the `src` attribute. + +```html + + + +``` + +## Supported Libraries + +### [Cytoscape](https://js.cytoscape.org/) + +The diagram syntax is JSON representing [Cytoscape options](https://js.cytoscape.org/#getting-started/specifying-basic-options). + +Please note that reference to JavaScript objects cannot be used.
    e.g. do not use `{container: document.getElementById('cy')}`. + +Example: () + +```html +
    + +``` + +### [ELK](https://www.eclipse.org/elk/) + +Diagram layout is produced using [elkjs](https://github.com/kieler/elkjs) and rendered using [elkjs-svg](https://github.com/EmilStenstrom/elkjs-svg). + +The syntax used is [ELK JSON](https://www.eclipse.org/elk/documentation/tooldevelopers/graphdatastructure/jsonformat.html) format.
    ELK text format is not supported! (You may use [this tool](https://rtsys.informatik.uni-kiel.de/elklive/conversion.html) to convert formats) + +Example: () + +```html +
    + +``` + +### [Gnuplot](http://www.gnuplot.info/) + +using [gnuplot-JS](https://github.com/chhu/gnuplot-JS) + +Instead of using `data-output` attribute in the [script element](#2-add-a-script-element-with-the-diagram-syntax), the statement `set output` is used in the diagram syntax (see highlighted lines below). + +Data files are also specified in the diagram syntax (see highlighted lines below). +They are defined in script elements with the attribute `type="application/diagram-gnuplot-file"`. The file name is specified in `data-file` attribute and either have inline content or linked to with a `src` attribute. + +Example: () + +```html {4,22} +
    + + + + + + + +``` + +### [Graphviz](https://graphviz.org/) + +using [@hpcc-js/wasm](https://github.com/hpcc-systems/hpcc-js-wasm) + +The following [layout engines](https://graphviz.org/docs/layouts/) are supported: + +- dot +- neato +- fdp +- sfdp +- circo +- twopi +- osage +- patchwork + +By default, the `dot` layout engine is used. To use a different engine add the attribute `data-layout` to the [script element](#2-add-a-script-element-with-the-diagram-syntax) with the value of the required engine name, like this: + +```html + +``` + +Example: () + +```html +
    + +``` + +### [Mermaid](https://mermaid-js.github.io/mermaid/) + +Example: () + +```html +
    + +``` + +### [Nomnoml](https://nomnoml.com/) + +Example: () + +```html +
    + +``` + +### [Pintora](https://pintorajs.vercel.app/) + +[Pintora config](https://pintorajs.vercel.app/docs/configuration/config) object can be specified in [custom settings](../advanced/custom-settings.html.md), under the key `pintora`. + +Example Custom Settings: + +```json +{ + "pintora": { + "themeConfig": { + "theme": "dark" + } + } +} +``` + +Example: () + +```html +
    + +``` + +### [Plotly](https://plotly.com/graphing-libraries/) + +The diagram syntax is a JSON object with `data` and `layout` properties (see [Plotly reference](https://plotly.com/javascript/reference/index/)). + +Please note that the output is a non-interactive SVG element or image. The plotly library is not loaded in the result page, so any JavaScript functionality is not available. + +Example: () + +```html +
    + +``` + +### [Svgbob](https://github.com/ivanceras/svgbob) + +Example: () + +```html +
    + +``` + +### [Vega](https://vega.github.io/vega/) + +The diagram syntax is [Vega JSON specification](https://vega.github.io/vega/docs/#specification). + +Please note that the output is a non-interactive SVG element or image. The Vega library is not loaded in the result page, so any JavaScript functionality is not available. + +Example: () + +```html +
    + +``` + +### [VegaLite](https://vega.github.io/vega-lite/) + +The diagram syntax is [Vega-Lite View JSON Specification](https://vega.github.io/vega-lite/docs/spec.html). + +Please note that the output is a non-interactive SVG element or image. The Vega-Lite library is not loaded in the result page, so any JavaScript functionality is not available. + +Example: () + +```html +
    + +``` + +### [WaveDrom](https://wavedrom.com/) + +The diagram syntax is [WaveJSON](https://wavedrom.com/tutorial.html) format. + +Example: () + +```html +
    + +``` + +--- + + + +# doT + +[doT](https://olado.github.io/doT/): The fastest + concise javascript template engine for Node.js and browsers. + +## Usage + +There are 2 modes for rendering: + +### Pre-rendered (Default) + +The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md). + +The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs. + +Example: This provides the value of the expression `name` + +```json title="Custom Settings" +{ + "template": { + "data": { + "name": "LiveCodes" + } + } +} +``` + +[Full example below](#pre-rendered) + +### Dynamic + +To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`. + +Example: + +```json title="Custom Settings" +{ + "template": { + "prerender": false + } +} +``` + +In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime. + +This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data. + +Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that. + +Example: + +```js title="Script Editor (JS)" +window.livecodes.templateData = { name: 'LiveCodes' }; +``` + +[Full example below](#dynamic-1) + +## Language Info + +### Name + +`dot` + +### Extension + +`.dot` + +### Editor + +`markup` + +## Compiler + +The official [doT compiler](https://www.npmjs.com/package/dot). + +### Version + +`dot`: v1.1.3 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `dot` are passed as a JSON object to the `doT.template` method during compile. Please check the [documentation](https://olado.github.io/doT/index.html) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +**Example:** + +```json title="Custom Settings" +{ + "dot": { + "varname": "data" + } +} +``` + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +### Pre-rendered + +export const config = { + markup: { language: 'dot', content: 'Hello, {{= it.name }}!' }, + customSettings: { template: { data: { name: 'LiveCodes' } } }, +}; + +export const params = { compiled: 'open' }; + + + +### Dynamic + +export const config2 = { + markup: { language: 'dot', content: 'Hello, {{= it.name }}!' }, + script: { + language: 'javascript', + content: 'window.livecodes.templateData = { name: "LiveCodes" };', + }, + customSettings: { template: { prerender: false } }, + activeEditor: 'script', +}; + + + +## Links + +- [Official website](https://olado.github.io/doT/) + +--- + + + +# EJS + +[Embedded JavaScript templating.](https://ejs.co/) + +## Usage + +There are 2 modes for rendering: + +### Pre-rendered (Default) + +The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md). + +The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs. + +Example: This provides the value of the expression `name` + +```json title="Custom Settings" +{ + "template": { + "data": { + "name": "LiveCodes" + } + } +} +``` + +[Full example below](#pre-rendered) + +### Dynamic + +To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`. + +Example: + +```json title="Custom Settings" +{ + "template": { + "prerender": false + } +} +``` + +In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime. + +This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data. + +Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that. + +Example: + +```js title="Script Editor (JS)" +window.livecodes.templateData = { name: 'LiveCodes' }; +``` + +[Full example below](#dynamic-1) + +## Language Info + +### Name + +`ejs` + +### Extension + +`.ejs` + +### Editor + +`markup` + +## Compiler + +The official [EJS compiler](https://www.npmjs.com/package/ejs). + +### Version + +`ejs`: v3.1.10 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `ejs` are passed as a JSON object to the [`compile`](https://ejs.co/#docs) method during compile. Please check the [documentation](https://ejs.co/#docs) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +**Example:** + +```json title="Custom Settings" +{ + "ejs": { + "delimiter": "%" + } +} +``` + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +### Pre-rendered + +export const config = { + markup: { language: 'ejs', content: 'Hello <%= name %>!' }, + customSettings: { template: { data: { name: 'LiveCodes' } } }, +}; + +export const params = { compiled: 'open' }; + + + +### Dynamic + +export const config2 = { + markup: { language: 'ejs', content: 'Hello <%= name %>!' }, + script: { + language: 'javascript', + content: 'window.livecodes.templateData = { name: "LiveCodes" };', + }, + customSettings: { template: { prerender: false } }, + activeEditor: 'script', +}; + + + +## Links + +- [Official website](https://ejs.co/) + +--- + + + +# Eta + +[Eta](https://eta.js.org/) is an embedded JS template engine for Node, Deno, and the browser. Lighweight, fast, and pluggable. Written in TypeScript. + +## Usage + +There are 2 modes for rendering: + +### Pre-rendered (Default) + +The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md). + +The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs. + +Example: This provides the value of the expression `name` + +```json title="Custom Settings" +{ + "template": { + "data": { + "name": "LiveCodes" + } + } +} +``` + +[Full example below](#pre-rendered) + +### Dynamic + +To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`. + +Example: + +```json title="Custom Settings" +{ + "template": { + "prerender": false + } +} +``` + +In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime. + +This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data. + +Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that. + +Example: + +```js title="Script Editor (JS)" +window.livecodes.templateData = { name: 'LiveCodes' }; +``` + +[Full example below](#dynamic-1) + +## Language Info + +### Name + +`eta` + +### Extension + +`.eta` + +### Editor + +`markup` + +## Compiler + +The official [Eta compiler](https://www.npmjs.com/package/eta). + +### Version + +`eta`: v3.4.0 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `eta` are passed as a JSON object to the [`Eta.render`](https://eta.js.org/docs/api/rendering) method during compile. Please check the [documentation](https://eta.js.org/docs/api/configuration) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +**Example:** + +```json title="Custom Settings" +{ + "eta": { + "varName": "data" + } +} +``` + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +### Pre-rendered + +export const config = {markup: {language: 'eta', content: 'Hello <%= it.name %>!'}, customSettings: {"template": {"data": {"name": "LiveCodes"}}}}; + +export const params = {compiled: 'open'}; + + + +### Dynamic + +export const config2 = {markup: {language: 'eta', content: 'Hello <%= it.name %>!'}, script: {language: 'javascript', content: 'window.livecodes.templateData = { name: "LiveCodes" };'}, customSettings: {"template": {"prerender": false}}, activeEditor: 'script'}; + + + +## Links + +- [Official website](https://eta.js.org/) +- [Documentation](https://eta.js.org/docs/learn) + +--- + + + +# Fennel + +[Fennel](https://fennel-lang.org/) is a programming language that brings together the speed, simplicity, and reach of [Lua](https://www.lua.org/) with the flexibility of a [lisp syntax and macro system](). + +Fennel code is compiled to Lua, which then runs in the browser using [Fengari](https://fengari.io/). See documentation for Lua language support in LiveCodes [here](./lua.html.md). + +:::info Note + +Lisp language family supported in LiveCodes includes [Common Lisp](./commonlisp.html.md), [Scheme](./scheme.html.md), [ClojureScript](./clojurescript.html.md) and [Fennel](./fennel.html.md). + +::: + +## Usage + +JavaScript interoperability and DOM access is achieved using [`"js"` module](https://github.com/fengari-lua/fengari-interop). + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +This example demonstrates usage, JavaScript interoperability and DOM access: + + + +## Language Info + +### Name + +`fennel` + +### Extension + +`.fnl` + +### Editor + +`script` + +## Compiler + +[Fennel](https://fennel-lang.org/) + +### Version + +Fennel v1.3.0 + +## Code Formatting + +Using [Parinfer](https://shaunlebron.github.io/parinfer/). + +## Starter Template + +https://livecodes.io/?template=fennel + +## Links + +- [Fennel](https://fennel-lang.org/) +- [Fennel tutorial](https://fennel-lang.org/tutorial) +- [Lua](https://www.lua.org/) +- [Fengari](https://fengari.io/) +- [lua](./lua.html.md) in LiveCodes +- [Common Lisp](./commonlisp.html.md) in LiveCodes + +--- + + + +# Flow + +TODO... + +--- + + + +# Gleam + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +[Gleam](https://gleam.run) is a friendly language for building type-safe systems that scale! + +Gleam is a statically-typed functional programming language, which compiles to Erlang or JavaScript. + +## Usage + +LiveCodes compiles Gleam code to JavaScript using the WebAssembly (wasm) version of the [official Gleam compiler](https://github.com/gleam-lang/gleam). The compiled JavaScript code is then executed in the context of the [result page](../features/result.html.md). + +The compiled JavaScript code can be inspected in the [Compiled Code Viewer](../features/compiled-code.html.md) in the [Tools Pane](../features/tools-pane.html.md) (below the result page). Console output is shown in the [integrated console](../features/console.html.md). + +Please note that the compiler messages (e.g. errors and warnings) are shown in the browser console (not the integrated console). + +### Standard Library + +[Gleam's standard library](https://hexdocs.pm/gleam_stdlib/) in addition to the following packages are available for use and can be imported as usual with no additional configuration: + +- [gleam/crypto](https://hexdocs.pm/gleam_crypto/) +- [gleam/erlang](https://hexdocs.pm/gleam_erlang/) +- [gleam/fetch](https://hexdocs.pm/gleam_fetch/) +- [gleam/http](https://hexdocs.pm/gleam_http/) +- [gleam/javascript](https://hexdocs.pm/gleam_javascript/) +- [gleam/json](https://hexdocs.pm/gleam_json/) +- [gleam/otp](https://hexdocs.pm/gleam_otp/) + +Demo: + +export const stdlibConfig = { + activeEditor: 'script', + script: { + language: 'gleam', + content: `import gleam/io\nimport gleam/string\n\npub fn main() {\n "hello world!"\n |> string.uppercase\n |> io.println\n}`, + }, + tools: { status: 'open' }, +}; + + + +### Custom Modules + +Custom modules can be used in Gleam code. These modules have to be precompiled (to JavaScript) by the Gleam compiler. URLs to the compiled JavaScript code and either the Gleam source code or URLs to the Gleam source code are needed to be able to import custom modules. + +This is an example for a repo with precompiled Gleam modules: +https://github.com/live-codes/gleam-precompiled + +Please refer to [Gleam CLI docs](https://gleam.run/writing-gleam/command-line-reference/) for details about adding and building packages. + +Note that the built code was committed to the repo by clearing out `.gitignore` file. + +The built code can then by accessed from a [CDN that mirrors GitHub](https://www.jsdelivr.com/?docs=gh), like this: +`https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@main/...` + +Built modules can then be declared in [custom settings](../advanced/custom-settings.html.md) (Project menu → Custom Settings), under the `gleam` property, by adding a `modules` property. + +The `modules` property is an object that has the module name as the key. The value is an object with the following properties: + +- `srcUrl`: the URL to the Gleam source code of the module. +- `src`: optionally use this instead of `srcUrl` to specify the Gleam source code of the module. +- `compiledUrl`: the URL to the compiled JavaScript code of the module. + +Example: + +```json title="Custom Settings" +{ + "gleam": { + "modules": { + "plinth/browser/document": { + "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/plinth/src/plinth/browser/document.gleam", + "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/plinth/plinth/browser/document.mjs" + } + } + } +} +``` + +See the [demo below](#example-usage) ([open in LiveCodes](https://livecodes.io/?template=gleam)). + +If `compiledUrl` property is not specified, the JavaScript module is imported from this URL pattern: `{module_name}.mjs` (example: `plinth/browser/document.mjs`). +This can then be [mapped (using import maps)](../features/module-resolution.html.md)#custom-module-resolution) in [custom settings](../advanced/custom-settings.html.md) (Project menu → Custom Settings) to the full URL of the compiled JavaScript code. + +Example: + +```json title="Custom Settings" +{ + "gleam": { + "modules": { + "some_pkg/some_module": { + "srcUrl": "https://example.com/packages/some_pkg/some_module.gleam" + }, + "another_pkg/another_module": { + "srcUrl": "https://example.com/packages/another_pkg/another_module.gleam" + } + } + }, + "imports": { + // map a specific module + "some_pkg/some_module.mjs": "https://example.com/compiled/some_pkg/some_module.mjs", + // or map a whole directory + "another_pkg/": "https://example.com/compiled/another_pkg/" + } +} +``` + +### Externals + +[External functions](https://tour.gleam.run/advanced-features/externals/) written in JavaScript can also be used. An external function has the `@external` attribute on it. It needs to specify a "relative" URL specifying the location of the external code. This URL is [mapped (using import maps)](../features/module-resolution.html.md)#custom-module-resolution) in [custom settings](../advanced/custom-settings.html.md) (Project menu → Custom Settings) to the full URL of the script that contains the code. + +**Example:** + +The following script is hosted on this URL: +https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/demo/greet.js + +```js title="greet.js" +export const hello = (str) => `Hello, ${str}!`; +``` + +Use this in custom settings: + +```json title="Custom Settings" +{ + "imports": { + "my_pkg/greet.js": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/demo/greet.js" + } +} +``` + +`"my_pkg/greet.js"` can then be used in the `@external` attribute. + +```js title="Gleam" +import gleam/io + +// highlight-next-line +@external(javascript, "my_pkg/greet.js", "hello") +// highlight-next-line +pub fn hello(str: String) -> String + +pub fn main() { + io.println(hello("from JavaScript")) +} +``` + +Demo: + +export const externalsConfig = { + activeEditor: 'script', + script: { + language: 'gleam', + content: + 'import gleam/io\n\n@external(javascript, "my_pkg/greet.js", "hello")\npub fn hello(str: String) -> String\n\npub fn main() {\n io.println(hello("from JavaScript"))\n}', + }, + tools: { status: 'open' }, + customSettings: { + imports: { + 'my_pkg/greet.js': + 'https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/demo/greet.js', + }, + }, +}; + + + +:::tip + +[Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) can be used to avoid having to host the external code online. LiveCodes enables [creating data URLs](../features/data-urls.html.md) easily. + +Example: +The import map in the previous example can be rewritten like this: + +```json title="Custom Settings" +{ + "imports": { + "my_pkg/greet.js": "data:text/javascript;charset=UTF-8;base64,ZXhwb3J0IGNvbnN0IGhlbGxvID0gKHN0cikgPT4gYEhlbGxvLCAke3N0cn0hYDs=" + } +} +``` + +::: + +### NPM Modules + +Modules published to [npm](https://www.npmjs.com/), [deno.land/x](https://deno.land/x) and [jsr.io](https://jsr.io/) can be imported as external functions. There is no need to specify import maps. The package/module name is prefixed with a modifier to specify the source (e.g. `npm:uuid` to import the [`uuid`](https://www.npmjs.com/package/uuid) npm module). + +See list of supported CDNs and the respective modifiers in the section about [module resolution](../features/module-resolution.html.md)#cdn-providers). + +Example: + +```js +import gleam/io + +// npm module (https://www.npmjs.com/package/uuid) +@external(javascript, "npm:uuid", "v4") +pub fn uuid() -> String + +// jsr module (https://jsr.io/@kwhinnery/yassify) +@external(javascript, "jsr:@kwhinnery/yassify", "yassify") +pub fn yassify(str: String) -> String + +pub fn main() { + io.println(uuid()) + io.println(yassify("Hello, World!")) +} +``` + +Demo: + +export const npmConfig = { + activeEditor: 'script', + script: { + language: 'gleam', + content: + 'import gleam/io\n\n// npm module (https://www.npmjs.com/package/uuid)\n@external(javascript, "npm:uuid", "v4")\npub fn uuid() -> String\n\n// jsr module (https://jsr.io/@kwhinnery/yassify)\n@external(javascript, "jsr:@kwhinnery/yassify", "yassify")\npub fn yassify(str: String) -> String\n\npub fn main() {\n io.println(uuid())\n io.println(yassify("Hello, World!"))\n}\n', + }, + tools: { status: 'open' }, +}; + + + +### Example Usage + +This is the Gleam starter template demonstrating the use of standard library, custom modules, external functions and npm modules. + + + +## Language Info + +### Name + +`gleam` + +### Extension + +`.gleam` + +### Editor + +`script` + +## Compiler + +The wasm version of the [official Gleam compiler](https://github.com/gleam-lang/gleam). + +### Version + +`v1.3.0-rc1` + +## Starter Template + +https://livecodes.io/?template=gleam + +## Links + +- [Gleam](https://gleam.run) +- [Gleam documentation](https://gleam.run/documentation/) +- [Gleam language tour](https://tour.gleam.run/) + +--- + + + +# Go (Golang) + +TODO... + +--- + + + +# Haml + +[Haml](https://haml.info/) compiler for client side javascript view templates using [clientside-haml-js](https://github.com/uglyog/clientside-haml-js). + +## Usage + +There are 2 modes for rendering: + +### Pre-rendered (Default) + +The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md). + +The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs. + +Example: This provides the value of the expression `name` + +```json title="Custom Settings" +{ + "template": { + "data": { + "name": "LiveCodes" + } + } +} +``` + +[Full example below](#pre-rendered) + +### Dynamic + +To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`. + +Example: + +```json title="Custom Settings" +{ + "template": { + "prerender": false + } +} +``` + +In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime. + +This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data. + +Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that. + +Example: + +```js title="Script Editor (JS)" +window.livecodes.templateData = { name: 'LiveCodes' }; +``` + +[Full example below](#dynamic-1) + +## Language Info + +### Name + +`haml` + +### Extension + +`.haml` + +### Editor + +`markup` + +## Compiler + +[clientside-haml-js](https://github.com/uglyog/clientside-haml-js). + +### Version + +`clientside-haml-js`: v5.4 + +## Code Formatting + +Not supported. + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `haml` are passed as a JSON object to the [`haml.compileHaml`](https://github.com/uglyog/clientside-haml-js#client-side-haml-api) method during compile. Please check the [documentation](https://github.com/uglyog/clientside-haml-js#client-side-haml-api) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +### Pre-rendered + +export const config = { + markup: { language: 'haml', content: '%p Hello, #{name}!' }, + customSettings: { template: { data: { name: 'LiveCodes' } } }, +}; + +export const params = { compiled: 'open' }; + + + +### Dynamic + +export const config2 = { + markup: { language: 'haml', content: '%p Hello, #{name}!' }, + script: { + language: 'javascript', + content: 'window.livecodes.templateData = { name: "LiveCodes" };', + }, + customSettings: { template: { prerender: false } }, + activeEditor: 'script', +}; + + + +## Links + +- [Haml](https://haml.info/) +- [clientside-haml-js](https://github.com/uglyog/clientside-haml-js) + +--- + + + +# Handlebars + +[Handlebars](https://handlebarsjs.com/): Minimal templating on steroids. + +## Usage + +There are 2 modes for rendering: + +### Pre-rendered (Default) + +The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md). + +The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs. + +Example: This provides the value of the expression `name` + +```json title="Custom Settings" +{ + "template": { + "data": { + "name": "LiveCodes" + } + } +} +``` + +[Full example below](#pre-rendered) + +### Dynamic + +To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`. + +Example: + +```json title="Custom Settings" +{ + "template": { + "prerender": false + } +} +``` + +In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime. + +This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data. + +Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that. + +Example: + +```js title="Script Editor (JS)" +window.livecodes.templateData = { name: 'LiveCodes' }; +``` + +[Full example below](#dynamic-1) + +## Language Info + +### Name + +`handlebars` + +### Extensions + +`.hbs`, `.handlebars` + +### Editor + +`markup` + +## Compiler + +The official [handlebars compiler](https://www.npmjs.com/package/handlebars). + +### Version + +`handlebars`: v4.7.8 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `handlebars` are passed as a JSON object to the [`compile`](https://handlebarsjs.com/api-reference/compilation.html#handlebars-compile-template-options) method during compile. Please check the [documentation](https://handlebarsjs.com/api-reference/compilation.html#handlebars-compile-template-options) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +**Example:** + +```json title="Custom Settings" +{ + "handlebars": { + "preventIndent": true + } +} +``` + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +### Pre-rendered + +export const config = { + markup: { language: 'handlebars', content: 'Hello {{name}}!' }, + customSettings: { template: { data: { name: 'LiveCodes' } } }, +}; + +export const params = { compiled: 'open' }; + + + +### Dynamic + +export const config2 = { + markup: { language: 'handlebars', content: 'Hello {{name}}!' }, + script: { + language: 'javascript', + content: 'window.livecodes.templateData = { name: "LiveCodes" };', + }, + customSettings: { template: { prerender: false } }, + activeEditor: 'script', +}; + + + +## Links + +- [Official website](https://handlebarsjs.com/) +- [Language guide](https://handlebarsjs.com/guide/) + +--- + + + +# HTML + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + + +HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It defines the structure and content of web pages. + +## Usage + +HTML code in the [markup editor](../features/projects.html.md)#markup-editor) is added as is without compilation or processing to the body of the [result page](../features/result.html.md). + +There is no need to add a full page structure (e.g. ``, ``, `` tags). This is already handled by LiveCodes. +(See [Result Page Structure](../features/result.html.md)#result-page-structure) for more details.) + +If you need to add content to the `` section or `` attributes of the result page, you can add it in the [project info screen](https://livecodes.io/?screen=info). + +### Demo + + +export const htmlOnlyConfig = { + markup: { + language: 'html', + content: `

    Hello, LiveCodes!

    +

    This is a paragraph in HTML.

    +
      +
    • Simple
      • +
    • Structured
      • +
    • Semantic
      • +
    +`, + }, +} + + + +### Styles and JavaScript + +Most of the time, you will want to add styles and scripts in the [respective editors](../features/projects.html.md). +However, you can of course still add them in ``, `\n`, +}; + + + +### Module Imports + +npm modules can be imported as described in the section about [module resolution](../features/module-resolution.html.md), including bare module imports and importing from different CDNs. Stylesheets imported in the `script` block are added as `` tags in the page `head`. + +Example: + +export const importsDemo = { + svelte: `\n +
    +

    You clicked {count} times.

    + +
    +`, +}; + + + +Module imports can be customized using import maps as described in [module resolution](../features/module-resolution.html.md)#custom-module-resolution) documentations. + +### Multiple Components + +Svelte is supported in both [markup](../features/projects.html.md)#markup-editor) and [script](../features/projects.html.md)#script-editor) editors. + +This allows having a component in the markup editor that imports (and passes props to) a component in the script editor. The opposite is not supported. + +This can be done using relative import of a file name in the same directory. Any file name will resolve to the component in the script editor, +e.g. `./script.svelte`, `./Component.svelte`, `./Counter.svelte`, etc. + +export const multi = { + markup: { + language: 'svelte', + content: ` + + +`, +}, + script: { + language: 'svelte', + content: ` + +
    + {count} +
    +
    + + +
    +
    + +
    +`, + }, + style: { + language: 'css', + content: '@import "tailwindcss";\n', + }, + processors: ['tailwindcss'], +} + + + +Please note that LiveCodes [does not have the concept of a file system](../features/projects.html.md). However, you can configure [editor options](../configuration/configuration-object.html.md)#markup) like `title`, `order` and `hideTitle` to simulate multiple files, change editor order or even hide editors. + +Example: + +export const multiFiles = { + ...multi, + markup: { + ...multi.markup, + title: 'App.svelte', + }, + script: { + ...multi.script, + title: 'Counter.svelte', + }, + style: { + ...multi.style, + title: 'styles.css', + order: 3, + }, +}; + + + +When both markup and script editors use Svelte, the component in the markup editor is used as the main component rendered in the [root element](#root-element). +To render the component in the script editor, it has to be imported and used by the main component. + +### Importing External Components + +External Svelte components can be imported. The import URL has to be an absolute URL ending with `.svelte` extension. Any bare or relative imports in the imported files are resolved and compiled recursively. + +Example: + +```html + + + +``` + +### Root Element + +To mount the application instance to a specific DOM element use `"livecodes-app"` as the element `id` in the HTML. Otherwise, if that element is not found, a new `div` element is added to `document.body` and is used to mount the instance. + +Example: + +export const customRoot = { + markup: { + language: 'html', + content: `

    Custom Root Element

    +
    +

    ...other page content

    +`, + }, + script: { + language: 'svelte', + content: `\n +
    I'm a {name} component
    +`, + }, +}; + + + +## Language Info + +### Name + +`svelte` + +### Extensions + +`.svelte` + +### Editor + +`script`, `markup` + +## Compiler + +The official [Svelte compiler](https://svelte.dev/docs/svelte/svelte-compiler). + +### Version + +`svelte`: v5.12.0 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Starter Template + +https://livecodes.io/?template=svelte + +## Links + +- [Svelte](https://svelte.dev/) +- [Svelte documentations](https://svelte.dev/docs/svelte/overview) + +--- + + + +# Tailwind CSS + +TODO... + +--- + + + +# Tcl + +TODO... + +--- + + + +# Teal + +Teal is a typed dialect of [Lua](https://www.lua.org/). + +Teal code is compiled to Lua, which then runs in the browser using [Fengari](https://fengari.io/). See documentation for Lua language support in LiveCodes [here](./lua.html.md). + +## Usage + +JavaScript interoperability and DOM access is achieved using [`"js"` module](https://github.com/fengari-lua/fengari-interop). + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +This example demonstrates usage, JavaScript interoperability and DOM access: + + + +## Language Info + +### Name + +`teal` + +### Extension + +`.tl` + +### Editor + +`script` + +## Compiler + +[Teal](https://github.com/teal-language/tl) + +### Version + +Teal v0.15.2 + +## Code Formatting + +Using [`lua-fmt`](https://github.com/trixnz/lua-fmt). + +## Starter Template + +https://livecodes.io/?template=teal + +## Links + +- [Teal](https://github.com/teal-language/tl) +- [Teal documentation](https://github.com/teal-language/tl/tree/master/docs) +- [Teal tutorial](https://github.com/teal-language/tl/blob/master/docs/tutorial.html.md) +- [Lua](https://www.lua.org/) +- [Lua documentation](https://www.lua.org/docs.html) +- [Fengari](https://fengari.io/) +- [lua](./lua.html.md) in LiveCodes +- [lua-wasm](./lua-wasm.html.md) in LiveCodes + +--- + + + +# Token CSS + +TODO... + +--- + + + +# TSX + +TSX is a syntax that allows using TypeScript in JSX. +[JSX](https://react.dev/learn/writing-markup-with-jsx) is a syntax extension for JavaScript that allows writing HTML-like markup inside JavaScript. +It has been popularized by [React](https://react.dev/), and then adopted by many other libraries/frameworks. + +By default, when running JSX/TSX in LiveCodes, [React](https://react.dev/) runtime is used. +However, other libraries like [Preact](https://preactjs.com/), [nano JSX](https://nanojsx.io/) and others can be used as well (see [Custom JSX Runtimes](./jsx.html.md)#custom-jsx-runtimes)). + +Please note that [React compiler](https://react.dev/learn/react-compiler) is also available in LiveCodes and is [documented here](./react.html.md). + +## Usage + +For usage and examples, see documentation for [JSX](./jsx.html.md) and [TypeScript](./typescript.html.md) support in LiveCodes. + +## Language Info + +### Name + +`tsx` + +### Extension + +`.tsx` + +### Editor + +`script` + +## Compiler + +[TypeScript compiler](./typescript.html.md) + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `tsx` are passed to the TypeScript compiler as [compiler options](https://www.typescriptlang.org/tsconfig#compilerOptions) while compiling TSX. +In addition, the option `disableAutoRender` can be set to `true` to disable [auto-rendering](./jsx#auto-rendering). + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +**Example:** + +```json title="Custom Settings" +{ + "tsx": { + "disableAutoRender": true, + "jsxFactory": "h", + "jsxFragmentFactory": "Fragment" + } +} +``` + +## Links + +- [React](https://react.dev/) +- [JSX](https://react.dev/learn/writing-markup-with-jsx) +- [TypeScript](https://www.typescriptlang.org/) + +--- + + + +# Twig + +[Twig.js](https://github.com/twigjs/twig.js/) is a pure JavaScript implementation of the [Twig](https://twig.symfony.com/) PHP templating language. + +## Usage + +There are 2 modes for rendering: + +### Pre-rendered (Default) + +The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md). + +The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs. + +Example: This provides the value of the expression `name` + +```json title="Custom Settings" +{ + "template": { + "data": { + "name": "LiveCodes" + } + } +} +``` + +[Full example below](#pre-rendered) + +### Dynamic + +To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`. + +Example: + +```json title="Custom Settings" +{ + "template": { + "prerender": false + } +} +``` + +In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime. + +This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data. + +Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that. + +Example: + +```js title="Script Editor (JS)" +window.livecodes.templateData = { name: 'LiveCodes' }; +``` + +[Full example below](#dynamic-1) + +## Language Info + +### Name + +`twig` + +### Extension + +`.twig` + +### Editor + +`markup` + +## Compiler + +[Twig.js](https://www.npmjs.com/package/twig). + +### Version + +`twig`: v1.15.4 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `twig` are passed as a JSON object to the [`twig`](https://github.com/twigjs/twig.js/wiki#browser-usage) method during compile. Please check the [documentation](https://github.com/twigjs/twig.js/wiki#browser-usage) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +### Pre-rendered + +export const config = { + markup: { language: 'twig', content: 'Hello, {{ name }}!' }, + customSettings: { template: { data: { name: 'LiveCodes' } } }, +}; + +export const params = { compiled: 'open' }; + + + +### Dynamic + +export const config2 = { + markup: { language: 'twig', content: 'Hello, {{ name }}!' }, + script: { + language: 'javascript', + content: 'window.livecodes.templateData = { name: "LiveCodes" };', + }, + customSettings: { template: { prerender: false } }, + activeEditor: 'script', +}; + + + +## Links + +- [Twig](https://twig.symfony.com/) +- [Twig documentation](https://twig.symfony.com/doc/3.x/) +- [Twig.js](https://github.com/twigjs/twig.js/) +- [Twig.js documentation](https://github.com/twigjs/twig.js/wiki) + +--- + + + +# TypeScript + +TODO... + +--- + + + +# UnoCSS + +TODO... + +--- + + + +# Vento + +[Vento](https://vento.js.org/) is a template engine for Deno. It's inspired by other engines, such as [Nunjucks](./nunjucks.html.md), [Liquid](./liquid.html.md), [Eta](./eta.html.md), and [Mustache](./mustache.html.md). + +## Usage + +There are 2 modes for rendering: + +### Pre-rendered (Default) + +The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md). + +The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs. + +Example: This provides the value of the expression `name` + +```json title="Custom Settings" +{ + "template": { + "data": { + "name": "LiveCodes" + } + } +} +``` + +[Full example below](#pre-rendered) + +### Dynamic + +To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`. + +Example: + +```json title="Custom Settings" +{ + "template": { + "prerender": false + } +} +``` + +In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime. + +This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data. + +Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that. + +Example: + +```js title="Script Editor (JS)" +window.livecodes.templateData = { name: 'LiveCodes' }; +``` + +[Full example below](#dynamic-1) + +## Language Info + +### Name + +`vento` + +### Extension + +`.vto` + +### Editor + +`markup` + +## Compiler + +[Vento](https://vento.js.org/). + +### Version + +`ventojs`: v1.12.16 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Custom Settings + +[Custom settings](../advanced/custom-settings.html.md) added to the property `vento` are passed as a JSON object to the [`vento()`](https://vento.js.org/getting-started/#usage) function during compile. Please check the [documentation](https://vento.js.org/configuration/) for full reference. + +Please note that custom settings should be valid JSON (i.e. functions are not allowed). + +## Example Usage + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +### Pre-rendered + +export const config = { + markup: { language: 'vento', content: 'Hello, {{ name }}!' }, + customSettings: { template: { data: { name: 'LiveCodes' } } }, +}; + +export const params = { compiled: 'open' }; + + + +### Dynamic + +export const config2 = { + markup: { language: 'vento', content: 'Hello, {{ name }}!' }, + script: { + language: 'javascript', + content: 'window.livecodes.templateData = { name: "LiveCodes" };', + }, + customSettings: { template: { prerender: false } }, + activeEditor: 'script', +}; + + + +## Links + +- [Vento](https://vento.js.org/) + +--- + + + +# Vue SFC + +[Vue.js](https://vuejs.org/), The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces. + +This is the documentation for LiveCodes language support for Vue [Single-File Component (SFC)](https://vuejs.org/api/sfc-spec.html). + +The support for Vue 2 SFC (the older, EOL version) is [documented separately](./vue2.html.md). + +## Usage + +Vue SFC can be used as documented in the [specs](https://vuejs.org/api/sfc-spec.html), including support for [Scoped CSS](https://vuejs.org/api/sfc-css-features.html#scoped-css), [CSS Modules](https://vuejs.org/api/sfc-css-features.html#css-modules), [pre-processors](https://vuejs.org/api/sfc-spec.html#pre-processors), [JSX](https://vuejs.org/guide/extras/render-function.html#jsx-tsx) and [`src` imports](https://vuejs.org/api/sfc-spec.html#src-imports). See below for usage. + +### Demo + +import LiveCodes from '../../src/components/LiveCodes.tsx'; +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + + + +### Scoped CSS + +> When a `\n\n`, +}; + + + +### CSS Modules + +> A ``, +}; + + + +### CSS Frameworks + +[CSS Frameworks](../features/css.html.md)#css-processors) supported in LiveCodes (e.g. [Tailwind CSS](./tailwindcss.html.md), [UnoCSS](./unocss.html.md), [WindiCSS](./windicss.html.md)) can detect class names added in Vue SFCs. Make sure that the required utility is enabled (from style editor menu or in `processors` property of [configuration object](../configuration/configuration-object.html.md)#processors)). + +See [example below](#multiple-components). + +### Languages and Pre-Processors + +> Blocks can declare pre-processor languages using the `lang` attribute. +> +> — [docs](https://vuejs.org/api/sfc-spec.html#pre-processors) + +Many of the [languages supported in LiveCodes](./index.html.md) can be used. The value of `lang` attribute can be the language name (specified in its documentation page) or any of its aliases (extensions). + +export const processorsDemo = { + vue: `\n\n\n\n\n`, +}; + + + +### JSX + +JSX can be used in render functions without needing any configuration. + +export const jsxDemo = { + vue: `\n\n`, +}; + + + +### `src` Imports + +The src attribute can be used to import an external file for a language block: + +```html + + + +``` + +The value of `src` attribute can be either: + +- Absolute URL (e.g. `https://unpkg.com/todomvc-app-css/index.css`) +- Path in npm package (e.g. `todomvc-app-css/index.css`) + +Relative paths (e.g. `./my-styles.css`) cannot be used (because there is no file system in LiveCodes). + +The imported sources can use any of the supported languages/pre-processors (identified by the file extension or can be specified by `lang` attribute). + +### Module Imports + +npm modules can be imported as described in the section about [module resolution](../features/module-resolution.html.md), including bare module imports and importing from different CDNs. Stylesheets imported in the `script` block are added as `` tags in the page `head`. + +Example: + +export const importsDemo = { + vue: `\n\n\n`, +}; + + + +Module imports can be customized using import maps as described in [module resolution](../features/module-resolution.html.md)#custom-module-resolution) documentations. + +### Multiple Components + +Vue is supported in both [markup](../features/projects.html.md)#markup-editor) and [script](../features/projects.html.md)#script-editor) editors. + +This allows having a component in the markup editor that imports (and passes props to) a component in the script editor. The opposite is not supported. + +This can be done using relative import of a file name in the same directory. Any file name will resolve to the component in the script editor, +e.g. `./script.vue`, `./Component.vue`, `./Counter.vue`, etc. + +export const multi = { + markup: { + language: 'vue', + content: ` + + +`, +}, + script: { + language: 'vue', + content: ` + + +`, + }, + style: { + language: 'css', + content: '@import "tailwindcss";\n', + }, + processors: ['tailwindcss'], +} + + + +Please note that LiveCodes [does not have the concept of a file system](../features/projects.html.md). However, you can configure [editor options](../configuration/configuration-object.html.md)#markup) like `title`, `order` and `hideTitle` to simulate multiple files, change editor order or even hide editors. + +Example: + +export const multiFiles = { + ...multi, + markup: { + ...multi.markup, + title: 'App.vue', + }, + script: { + ...multi.script, + title: 'Counter.vue', + }, + style: { + ...multi.style, + title: 'styles.css', + order: 3, + }, +}; + + + +When both markup and script editors use Vue, the component in the markup editor is used as the main component rendered in the [root element](#root-element). +To render the component in the script editor, it has to be imported and used by the main component. + +### Importing External SFCs + +External Vue SFCs can be imported. The import URL has to be an absolute URL ending with `.vue` extension. Any bare or relative imports in the imported files are resolved and compiled recursively. + +This is an example of importing a Vue SFC, which in turn imports other Vue SFCs (the imported components use Tailwind CSS, which is enabled in this project as a CSS preprocessor): + +export const importExternal = { + activeEditor: 'script', + script: { + language: 'vue', + content: ` + + +` + }, + style: { + language: 'css', + content: '@import "tailwindcss";\n', + }, + processors: ['tailwindcss'], +} + + + + + +Please note that extensionless imports are not supported. However, you may customize the import URL using import maps as described in [module resolution](../features/module-resolution.html.md)#custom-module-resolution) section. + +Example: + +```json title="Custom Settings" +{ + "imports": { + "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList.js", + "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition.js" + } +} +``` + +export const importExternalWithImportMap = { + activeEditor: 'script', + script: { + language: 'vue', + content: ` + + +`, + }, + imports: { + "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useTodoList.js", + "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition": "https://raw.githubusercontent.com/hatemhosny/vue3-samples/master/src/composable/useMousePosition.js" + } +}; + + + +### Importing Data URLs + +You may want to import other SFCs without having to host them on a server. +These components can be encoded as [data URLs](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data) and imported as usual. + +The data URL has to start with `data:text/vue` to be recognized as a Vue SFC. Any imports in the imported URLs (even if they are also data URLs) are resolved and compiled recursively. + +:::info + +The code in any code editor can be encoded as data URL from the LiveCodes UI using the "Copy code as data URL" button below the code editor. + +::: + +This is the previous demo that uses data URLs (with nested imports) instead of external URLs: + +export const importDataUrls = { + activeEditor: 'script', + script: { + language: 'vue', + content: ` + + +` + }, + style: { + language: 'css', + content: '@import "tailwindcss";\n', + }, + processors: ['tailwindcss'], +} + +
    + +
    + + + +In the above demo, this component is imported: + +``` +data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQppbXBvcnQgeyByZWYgfSBmcm9tICJ2dWUiOw0KaW1wb3J0IFByaW1hcnlCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdFozSmhlUzAxTURBZ2FHOTJaWEk2WW1jdFozSmhlUzAyTURBZ2RISmhibk5wZEdsdmJpQndlUzB4SUhCNExUUWdkR1Y0ZEMxM2FHbDBaU0J5YjNWdVpHVmtJR1J5YjNBdGMyaGhaRzkzTFhoc0lnMEtJQ0ErRFFvZ0lDQWdlM3NnZEdsMGJHVWdmWDBOQ2lBZ1BDOWlkWFIwYjI0K0RRbzhMM1JsYlhCc1lYUmxQZz09IjsNCmltcG9ydCBEYW5nZXJCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdGNtVmtMVFV3TUNCb2IzWmxjanBpWnkxeVpXUXROakF3SUhSeVlXNXphWFJwYjI0Z2NIa3RNU0J3ZUMwMElIUmxlSFF0ZDJocGRHVWdjbTkxYm1SbFpDQmtjbTl3TFhOb1lXUnZkeTE0YkNJTkNpQWdQZzBLSUNBZ0lIdDdJSFJwZEd4bElIMTlEUW9nSUR3dlluVjBkRzl1UGcwS1BDOTBaVzF3YkdGMFpUND0iOw0KDQpjb25zdCBjb3VudCA9IHJlZigwKTsNCjwvc2NyaXB0Pg0KDQo8dGVtcGxhdGU+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC04IGZsZXgganVzdGlmeS1jZW50ZXIiPg0KICAgIDxzcGFuIHJlZj0iY291bnRlciIgY2xhc3M9InRleHQtM3hsIGZvbnQtYm9sZCI+e3sgY291bnQgfX08L3NwYW4+DQogIDwvZGl2Pg0KICA8ZGl2IGNsYXNzPSJ3LWZ1bGwgbXQtNCBmbGV4IGZsZXgtcm93IHNwYWNlLXgtNCBqdXN0aWZ5LWNlbnRlciI+DQogICAgPHByaW1hcnktYnV0dG9uIHJlZj0iZGVjcmVtZW50QnV0dG9uIiB0aXRsZT0iLSIgQGNsaWNrPSJjb3VudC0tIiAvPg0KICAgIDxwcmltYXJ5LWJ1dHRvbiByZWY9ImluY3JlbWVudEJ1dHRvbiIgdGl0bGU9IisiIEBjbGljaz0iY291bnQrKyIgLz4NCiAgPC9kaXY+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC00IGZsZXggZmxleC1yb3cgc3BhY2UteC00IGp1c3RpZnktY2VudGVyIj4NCiAgICA8ZGFuZ2VyLWJ1dHRvbiByZWY9InJlc2V0QnV0dG9uIiB0aXRsZT0iUmVzZXQiIEBjbGljaz0iY291bnQgPSAwIiAvPg0KICA8L2Rpdj4NCjwvdGVtcGxhdGU+ +``` + +which imports these: + +``` +data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQpkZWZpbmVQcm9wcyh7DQogIHRpdGxlOiB7DQogICAgdHlwZTogU3RyaW5nLA0KICAgIGRlZmF1bHQ6ICJCdXR0b24iLA0KICB9LA0KfSk7DQo8L3NjcmlwdD4NCg0KPHRlbXBsYXRlPg0KICA8YnV0dG9uDQogICAgY2xhc3M9InRleHQtbWQgZm9udC1tZWRpdW0gYmctZ3JheS01MDAgaG92ZXI6YmctZ3JheS02MDAgdHJhbnNpdGlvbiBweS0xIHB4LTQgdGV4dC13aGl0ZSByb3VuZGVkIGRyb3Atc2hhZG93LXhsIg0KICA+DQogICAge3sgdGl0bGUgfX0NCiAgPC9idXR0b24+DQo8L3RlbXBsYXRlPg== +``` + +``` +data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQpkZWZpbmVQcm9wcyh7DQogIHRpdGxlOiB7DQogICAgdHlwZTogU3RyaW5nLA0KICAgIGRlZmF1bHQ6ICJCdXR0b24iLA0KICB9LA0KfSk7DQo8L3NjcmlwdD4NCg0KPHRlbXBsYXRlPg0KICA8YnV0dG9uDQogICAgY2xhc3M9InRleHQtbWQgZm9udC1tZWRpdW0gYmctcmVkLTUwMCBob3ZlcjpiZy1yZWQtNjAwIHRyYW5zaXRpb24gcHktMSBweC00IHRleHQtd2hpdGUgcm91bmRlZCBkcm9wLXNoYWRvdy14bCINCiAgPg0KICAgIHt7IHRpdGxlIH19DQogIDwvYnV0dG9uPg0KPC90ZW1wbGF0ZT4= +``` + +### Root Element + +To [mount](https://vuejs.org/api/application.html#app-mount) the application instance to a specific DOM element use `"livecodes-app"` as the element `id` in the HTML. Otherwise, if that element is not found, a new `div` element is added to `document.body` and is used to mount the instance. + +Example: + +export const customRoot = { + markup: { + language: 'html', + content: `

    Custom Root Element

    +
    +

    ...other page content

    +`, + }, + script: { + language: 'vue', + content: ``, + }, +}; + + + +## Language Info + +### Name + +`vue` + +### Extensions + +`.vue`, `.vue3` + +### Editor + +`script`, `markup` + +## Compiler + +The official [@vue/compiler-sfc](https://github.com/vuejs/core/tree/main/packages/compiler-sfc). + +### Version + +`@vue/compiler-sfc`: v3.5.13 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Limitations + +Currently, Vue support has the following limitations: + +- SSR is not supported. +- The [`defineProps()`](https://vuejs.org/guide/components/props#props-declaration) macro cannot infer props from TypeScript types not defined in the same file. + +[PRs are welcome](https://github.com/live-codes/livecodes/issues/757). + +## Starter Template + +https://livecodes.io/?template=vue + +## Links + +- [Vue.js](https://vuejs.org/) +- [Vue SFC specs](https://vuejs.org/api/sfc-spec.html) +- [CSS Modules](https://github.com/css-modules/css-modules) + +--- + + + +# Vue 2 SFC + +[Vue.js](https://vuejs.org/), The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces. + +This is the documentation for LiveCodes language support for the older **Vue 2** [Single-File Component (SFC)](https://v2.vuejs.org/v2/guide/single-file-components.html). For the latest Vue SFC head to [Vue 3 SFC documentations](./vue.html.md). + +:::caution + +Please note that, officially, Vue 2 has reached [End of Life (EOL)](https://v2.vuejs.org/eol/) on December 31st, 2023. + +::: + +## Important Note + +Vue 2 SFC language support in LiveCodes is different from that for Vue 3. + +Unlike Vue 3, which uses the official SFC compiler ([@vue/compiler-sfc](https://github.com/vuejs/core/tree/main/packages/compiler-sfc)) to compile SFC to regular JavaScript which is then sent to the result page, Vue 2 SFC support uses [vue3-sfc-loader](https://github.com/FranckFreiburger/vue3-sfc-loader), which is loaded in the result page and the SFC is compiled on the fly in the end user's browser. This has a significant performance impact. + +[vue3-sfc-loader](https://github.com/FranckFreiburger/vue3-sfc-loader) is currently at version 0.8.4, which is compatible with Vue 2 version 2.6.14. +Vue 2.7 is not supported. + +## Usage + +Vue 2 SFC support includes Scoped CSS, pre-processors, JSX and `src` imports. + +## Language Info + +### Name + +`vue2` + +### Extensions + +`.vue2` + +### Editor + +`script` + +## Compiler + +[vue3-sfc-loader](https://github.com/FranckFreiburger/vue3-sfc-loader). + +### Version + +`vue3-sfc-loader`: v0.9.5, which is compatible with Vue v2.6.14 + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## Links + +- [Vue 2 docs](https://v2.vuejs.org/) +- [Vue 2 SFC](https://v2.vuejs.org/v2/guide/single-file-components.html) + +--- + + + +# WebAssembly Text + +TODO... + +--- + + + +# Windi CSS + +TODO... + +--- + + + +# Bookmarklet + +LiveCodes allows [importing code](./features/import.html.md) from a [wide variety of sources](./features/import.html.md)#sources). + +Instead of manually copy/pasting URLs to import, adding **"Edit in LiveCodes"** bookmarklet to the browser bookmarks bar can be a more convenient way. It opens LiveCodes in a new window and imports the current webpage URL. + +## Add Bookmarklet + +Drag this link to the browser bookmarks bar: + +
    Edit in LiveCodes`, + }} +/> + +
    + +or manually create a new bookmark in your browser and add this code as its URL: + + +```js +javascript:(()=>{window.open("https://livecodes.io/?x="+encodeURIComponent(location.href),"_blank");})(); +``` + +## Example Usage + +After adding the bookmarklet to your browser (see above), open this GitHub directory: + +https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards + +Then click on the bookmarklet. + +LiveCodes playground should open in a new window and [import](./features/import.html.md) the directory files (each file in the appropriate editor). It just works! + +--- + + + +# GitHub Action ⚡ + +The [Preview in LiveCodes](https://github.com/live-codes/preview-in-livecodes) GitHub Action generates preview links to playgrounds for code changes in pull requests and posts them as pull request comments. + +Once added to a repo, it runs when a pull request is created or updated. The new code is optionally built. The action posts in a pull request comment links to playgrounds that can use the new code. + +**Screenshot:** + +![Screenshot of the action](../static/img/screenshots/preview-in-livecodes-gh-action.png) + +For usage and more information, see the [action docs](https://github.com/live-codes/preview-in-livecodes) on GitHub. Also check the [example repo](https://github.com/hatemhosny/preview-in-livecodes-demo) for a working demo. + +--- + + + +# Markdown to LiveCodes + +Markdown and MDX code blocks can be easily converted to interactive LiveCodes playgrounds. + +The playgrounds can run any of the supported [languages](./languages/index.html.md) in LiveCodes, and can be customized to any of the [configuration options](./configuration/index.html.md). + +A fenced code block in Markdown can be rendered as a LiveCodes playground by adding the `livecodes` parameter to the code block language meta. + +This is provided as [plugins](#packages) for [markdown-it](https://github.com/markdown-it/markdown-it), [marked](https://github.com/markedjs/marked) and [remark](https://github.com/remarkjs/remark). +These plugins allow the seamless integration with most of the popular frameworks like Astro, Docusaurus, Next.js, Storybook, VitePress, etc. See the section "[Using with Frameworks](#using-with-frameworks)" for getting started. + +## Demo + +This is an example code block: + +````md +```jsx +import { useState } from "react"; + +function App() { + const [count, setCount] = useState(0); + return ( +
    +

    You clicked {count} times.

    + +
    + ); +} + +export default App; +``` +```` + +The above code block is normally rendered like this: + +```jsx +import { useState } from "react"; + +function App() { + const [count, setCount] = useState(0); + return ( +
    +

    You clicked {count} times.

    + +
    + ); +} + +export default App; +``` + +
    + +The code block can instead be rendered as an interactive playground by adding the `livecodes` parameter to the code block language meta: + +````md {1} +```jsx livecodes +import { useState } from "react"; + +function App() { + const [count, setCount] = useState(0); + return ( +
    +

    You clicked {count} times.

    + +
    + ); +} + +export default App; +``` +```` + +to be displayed like this: + +```jsx livecodes +import { useState } from "react"; + +function App() { + const [count, setCount] = useState(0); + return ( +
    +

    You clicked {count} times.

    + +
    + ); +} + +export default App; +``` + +
    +
    + +The playground can be customized by setting [options](#options) that are applied to all code blocks or by [meta parameters](#meta-parameters) that are applied to individual code blocks. + +Alternatively, the code block can be kept as it is, and a button or a link (**Edit in LiveCodes**) is appended, below the code block, that opens the code in a LiveCodes playground. +This is achieved by adding the `render=button` or `render=link` parameter to the code block language meta. + +This displays a button: + +````md {1} +```jsx livecodes render=button +import { useState } from "react"; + +function App() { + const [count, setCount] = useState(0); + return ( +
    +

    You clicked {count} times.

    + +
    + ); +} + +export default App; +``` +```` + +```jsx livecodes render=button +import { useState } from "react"; + +function App() { + const [count, setCount] = useState(0); + return ( +
    +

    You clicked {count} times.

    + +
    + ); +} + +export default App; +``` +
    +
    +While this displays a link: + +````md {1} +```jsx livecodes render=link +import { useState } from "react"; + +function App() { + const [count, setCount] = useState(0); + return ( +
    +

    You clicked {count} times.

    + +
    + ); +} + +export default App; +``` +```` + +```jsx livecodes render=link +import { useState } from "react"; + +function App() { + const [count, setCount] = useState(0); + return ( +
    +

    You clicked {count} times.

    + +
    + ); +} + +export default App; +``` + +## Packages + +All the functionality described here can be achieved using *any* of the following packages: + +- [`markdown-it-livecodes`](https://www.npmjs.com/package/markdown-it-livecodes): A [markdown-it](https://github.com/markdown-it/markdown-it) plugin. +- [`marked-livecodes`](https://www.npmjs.com/package/marked-livecodes): A [marked](https://github.com/markedjs/marked) plugin. +- [`remark-livecodes`](https://www.npmjs.com/package/remark-livecodes): A [remark](https://github.com/remarkjs/remark) plugin. +- [`gatsby-remark-livecodes`](https://www.npmjs.com/package/gatsby-remark-livecodes): A [gatsby](https://github.com/gatsbyjs/gatsby) plugin. + +See the section "[Using with Frameworks](#using-with-frameworks)" for using the plugins with popular frameworks like Astro, Docusaurus, Next.js, Storybook, VitePress, etc. + +## Usage + +### markdown-it-livecodes + +To use the `markdown-it-livecodes` plugin, first install it: + +```bash npm2yarn +npm install markdown-it markdown-it-livecodes +``` + +Then it can be used like this: + +````js +import markdownIt from "markdown-it"; +import markdownItLivecodes from "markdown-it-livecodes"; + +const input = "```js livecodes \nconsole.log('Hello World!');\n```"; + +const output = markdownIt() + .use(markdownItLivecodes, { + /* options */ + }) + .render(input); + +console.log(output); // +```` + +### marked-livecodes + +To use the `marked-livecodes` plugin, first install it: + +```bash npm2yarn +npm install marked marked-livecodes +``` + +Then it can be used like this: + +````js +import marked from "marked"; +import markedLivecodes from "marked-livecodes"; + +const input = "```js livecodes \nconsole.log('Hello World!');\n```"; + +const output = await marked + .use(markedLivecodes, { + /* options */ + }) + .parse(input); + +console.log(output); // +```` + +### remark-livecodes + +To use the `remark-livecodes` plugin, first install it: + +```bash npm2yarn +npm install remark remark-livecodes +``` + +Then it can be used like this: + +````js +import { remark } from "remark"; +import remarkLivecodes from "remark-livecodes"; + +const input = "```js livecodes \nconsole.log('Hello World!');\n```"; + +const output = await remark() + .use(remarkLivecodes, { + /* options */ + }) + .process(input); + +console.log(String(output)); // +```` + +### gatsby-remark-livecodes + +See usage with [Gatsby](#gatsby). + +## Options + +Options can be passed to the plugins. These options apply to all code blocks. + +These options include LiveCodes SDK [embed options](./sdk/js-ts.html.md)#embed-options) (except `headless`). + +Example: + +````js +const output = await remark() + .use(remarkLivecodes, { + // highlight-start + loading: "click", + params: { + console: "open" + theme: "light", + } + // highlight-end + }) + .process(input); +```` + +In addition, the following options are also available: + +- `render`: The render mode for the LiveCodes playgrounds. This can be one of the following: + - `playground` (default): Replaces the code block with an iframe that displays the LiveCodes playground. By default, [`"simple"` mode](./features/display-modes.html.md) is used, but this can be changed in [options](#options) or [meta parameters](#meta-parameters). + - `link`: Keeps the code block as it is, and appends a link (**Edit in LiveCodes**), below the code block, that opens the code in a LiveCodes playground. + - `button`: Keeps the code block as it is, and appends a button (Edit in LiveCodes), below the code block, that opens the code in a LiveCodes playground.
    + Edit in LiveCodes button + - `meta`: Keeps the code block as it is, and adds the URL of the playground to the `data-livecodes-url` attribute of the `` element. In addition, in `remark-livecodes` the URL is added to the AST (`node.data.livecodesUrl` and `node.data.hProperties.dataLivecodesUrl`). In `markdown-it-livecodes` the URL is added to `env.livecodesUrl`. + This can be used by other plugins (e.g. to display a custom run button overlying the code block). +- `height`: The height of the playground iframe. +- `className`: The class name to be applied to the iframe, link or button. + Note: If the class name of the button contains `"dark"` (e.g. `"dark-btn"`), the dark button will be used.
    + Edit in LiveCodes button +- `auto`: When set to `true`, it automatically enables the `livecodes` parameter for all code blocks without having to explicitly add it. + This is useful when you have a large number of code blocks and don't want to add the `livecodes` parameter to each code block. + To disable this for a specific code block, add the `livecodes=false` [meta parameter](#meta-parameters) to the code block. + +## Meta Parameters + +Individual code blocks can be configured using meta parameters. These are key/value pairs, separated by spaces, that are added after the language name. + +Meta parameters of code blocks override the [options](#options) passed to the plugin. + +Example: + +````markdown {1} +```jsx livecodes render=button className=dark-btn console=open +import { useState, useEffect } from "react"; + +export default () => { + const [count, setCount] = useState(0); + + useEffect(() => { + console.log("count:", count); + }, [count]); + + return ( +
    +

    You clicked {count} times.

    + +
    + ); +}; +``` +```` + +All LiveCodes [configuration query parameters](./configuration/query-params.html.md) can be used as code block meta parameters (e.g. ` ```js livecodes console=open theme=light`). See the [LiveCodes configuration docs](./configuration/configuration-object.html.md) for more information. + +In addition, the following meta parameters are available: + +- `livecodes`: Enables the LiveCodes playground for the code block. This can be omitted if the `auto` option is set to `true`. When `livecodes` is set to `false`, the code block is not handled by the plugin. +- `render`: The render mode. See the [Options](#options) section for more information. +- `height`: The height of the playground iframe. +- `className`: The class name for the playground iframe, link or button. +- `lang`: This overrides the language of the code block (e.g. ` ```jsx livecodes lang=react` or ` ```py livecodes lang=py-wasm`). See the [Languages](./languages/index.html.md) docs for more language information. + +## Using with Frameworks + +This guide shows how to use the suitable plugin in different frameworks. + +### Astro + +([demo](https://markdown-to-livecodes-astro.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-astro)) + +Install the `remark-livecodes` plugin: + +```bash npm2yarn +npm install -D remark-livecodes +``` + +This is an example for adding the `remark-livecodes` plugin to `astro.config.mjs` file: + +```js title="astro.config.js" +import { defineConfig } from "astro/config"; +import mdx from "@astrojs/mdx"; +import remarkLivecodes from "remark-livecodes"; + +export default defineConfig({ + // ... + integrations: [mdx()], + markdown: { + remarkPlugins: [ + [remarkLivecodes, { /* options */ }], + ], + }, +}); +``` + +### Docusaurus + +([demo](https://markdown-to-livecodes-docusaurus.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-docusaurus)) + +Install the `remark-livecodes` plugin: + +```bash npm2yarn +npm install -D remark-livecodes +``` + +This is an example for adding the `remark-livecodes` plugin to `docusaurus.config.js` file: + +```js title="docusaurus.config.js" +export default { + presets: [ + [ + 'classic', + { + docs: { + // ... + remarkPlugins: [ + [require('remark-livecodes'), { /* options */ }], + ], + }, + }, + ], + ], + // ... +}; +``` + +### Eleventy + +([demo](https://markdown-to-livecodes-11ty.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-11ty)) + +Install the `markdown-it-livecodes` plugin: + +```bash npm2yarn +npm install -D markdown-it-livecodes +``` + +This is an example for adding the `markdown-it-livecodes` plugin to `eleventy.config.js` file: + +```js title="eleventy.config.js" +import markdownItLivecodes from "markdown-it-livecodes"; + +export default async function (eleventyConfig) { + eleventyConfig.amendLibrary("md", (mdLib) => + mdLib.use(markdownItLivecodes, { /* options */ }), + ); + // ... +} +``` + +### Gatsby + +([demo](https://markdown-to-livecodes-gatsby.pages.dev/markdown-to-livecodes/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-gatsby)) + +Install the `gatsby-remark-livecodes` plugin: + +```bash npm2yarn +npm install -D gatsby-remark-livecodes +``` + +This is an example for adding the `gatsby-remark-livecodes` plugin to `gatsby-config.js` file: + +```js title="gatsby-config.js" +module.exports = { + // ... + plugins: [ + // ... + { + resolve: 'gatsby-transformer-remark', + options: { + plugins: [ + { + resolve: 'gatsby-remark-livecodes', + options: { /* options */ }, + }, + ], + }, + }, + ], +}; +``` + +### Next.js + +([demo](https://markdown-to-livecodes-nextjs.pages.dev/mdx-page) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-nextjs)) + +See [Next.js docs](https://nextjs.org/docs/app/guides/mdx) for using markdown and MDX in Next.js. + +Install the `remark-livecodes` plugin: + +```bash npm2yarn +npm install -D remark-livecodes +``` + +This is an example for adding the `remark-livecodes` plugin to `next.config.js` file: + +```js title="next.config.js" +import createMDX from "@next/mdx"; +import remarkLivecodes from "remark-livecodes"; + +const nextConfig = { + // ... + pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"], +}; + +const withMDX = createMDX({ + options: { + remarkPlugins: [ + [remarkLivecodes, { /* other options */ }], + ], + }, +}); + +export default withMDX(nextConfig); +``` + +When using Turbopack for local development, check the guide for [using plugins with Turbopack](https://nextjs.org/docs/app/guides/mdx#using-plugins-with-turbopack). + +### react-markdown + +`react-markdown` is a React component to render markdown. + +This is an example for using the `remark-livecodes` plugin with `react-markdown`: + +Install the `remark-livecodes` plugin: + +```bash npm2yarn +npm install remark-livecodes +``` + +```jsx title="App.jsx" livecodes render=button +import Markdown from 'react-markdown'; +import remarkLivecodes from 'remark-livecodes'; + +const markdown = + '```jsx livecodes\nexport default () =>

    Hello World

    \n```'; + +export default () => ( + + {markdown} + +); +``` + +### Storybook + +([demo](https://markdown-to-livecodes-storybook.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-storybook)) + +Install the `remark-livecodes` plugin: + +```bash npm2yarn +npm install -D remark-livecodes +``` + +This is an example for adding the `remark-livecodes` plugin to `storybook/main.js` file: + +```js title="storybook/main.js" +import remarkLivecodes from "remark-livecodes"; + +export default { + // ... + addons: [ + // ... + { + name: "@storybook/addon-docs", + options: { + mdxPluginOptions: { + mdxCompileOptions: { + remarkPlugins: [ + [remarkLivecodes, { /* options */ }], + ], + }, + }, + }, + }, + ], +}; +``` + +### VitePress + +([demo](https://markdown-to-livecodes-vitepress.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-vitepress)) + +Install the `markdown-it-livecodes` plugin: + +```bash npm2yarn +npm install -D markdown-it-livecodes +``` + +This is an example for adding the `markdown-it-livecodes` plugin to `vitepress.config.js` file: + +```js title=".vitepress/config.js" +import { defineConfig } from "vitepress"; +import markDownItLivecodes from "markdown-it-livecodes"; + +export default defineConfig({ + // ... + markdown: { + config: (md) => { + md.use(markDownItLivecodes, { /* options */ }); + }, + }, +}); +``` + +--- + + + +# Contribution + +Contributions are always welcome, no matter how large or small. Before contributing, +please read the [code of conduct](https://github.com/live-codes/livecodes/blob/HEAD/CODE_OF_CONDUCT.html.md). + +For code contribution, please refer to the [contribution guide](https://github.com/live-codes/livecodes/blob/HEAD/CONTRIBUTING.html.md) +. + +For financial and in-kind contributions, please refer to the [sponsor page](./sponsor.html.md). + +You can always support the project by [giving feedback](https://github.com/live-codes/livecodes/discussions), [reporting issues, suggesting features](https://github.com/live-codes/livecodes/issues) and spreading the word. + +Thank you :) + +--- + + + +# Credits + +## Services + +LiveCodes uses services that are generously provided by: + +
    +

    + + Cloudflare Pages + +

    +

    + + jsDelivr + +

    +

    + + esm.sh + +

    +

    + + unpkg + +

    +

    + + Codeium + +

    +

    + + bundlejs + +

    +

    + + dpaste + +

    +

    + + GitHub + +

    +

    + + Netlify + +

    +

    + + SonarCloud + +

    +

    + + Codacy + +

    +

    + + BundleWatch + +

    +

    + + BrowserStack + +

    +

    + + Lokalise + +

    +
    +
    +## Third Party Packages + +Packages used by LiveCodes and their licenses are [listed here](https://github.com/live-codes/livecodes/blob/develop/vendor-licenses.html.md). + +## Prior Art + +Many of LiveCodes features/ideas were inspired by: + +- [CodePen](https://codepen.io/) +- [JSFiddle](https://jsfiddle.net/) +- [JS Bin](https://jsbin.com/) +- [CodeSandbox](https://codesandbox.io/) +- [Replit](https://replit.com/) +- [VS Code](https://code.visualstudio.com/) +- [Monacode](https://github.com/lukejacksonn/monacode/) + +Thank you ❤️ + +--- + + + +# License + +LiveCodes is released under the permissive [MIT License](https://github.com/live-codes/livecodes/blob/develop/LICENSE) © [Hatem Hosny](https://github.com/hatemhosny). + +Third party packages used in LiveCodes and their licenses are [listed here](https://github.com/live-codes/livecodes/blob/develop/vendor-licenses.html.md). + +The source code is available on [GitHub](https://github.com/live-codes/livecodes). + +Please consider [sponsoring LiveCodes](./sponsor.html.md) to support its maintenance and continued development. + +--- + + + +import MailLink from '../src/components/MailLink.tsx'; + +# Sponsor LiveCodes + +Thank you for considering becoming a sponsor of LiveCodes! 💚 + +LiveCodes is a feature-rich, open source code playground with a wide range of language support. With LiveCodes, learning, prototyping, experimenting, documenting, teaching, and sharing code is easier and more enjoyable than ever. + +LiveCodes is free, with no limits for use, no ads and no account required. The MIT license allows anyone to use (including commercial use), modify, and distribute. + +As a sponsor of LiveCodes, you will be supporting the ongoing development and maintenance of the project, as well as helping to ensure that it remains a valuable resource for the developer community. In return, you will receive recognition as a sponsor on the documentation website, GitHub repo and social media channels, as well as the opportunity to engage with our community of users and contributors. + +There are several ways to support LiveCodes as a sponsor: + +### Financial Contributions + +LiveCodes relies on the support of sponsors like you to fund its ongoing development and maintenance. Your financial contribution will help to ensure that the project remains sustainable in the long term. + +Payments can be done via: + +- [GitHub Sponsors](https://github.com/sponsors/live-codes/) +- [PayPal](https://paypal.me/hatemhosni) +- [Ko-fi](https://ko-fi.com/hatemhosny) + +Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in [Sponsorship Benefits](#sponsorship-benefits). + +If you have questions, please reach out to . + +### In-kind Contributions + +Do you have a service or product that could be useful to the LiveCodes community? We welcome in-kind contributions that can help to support the project and its users. + +In-kind contributors are recognized (logo and name) in the [credits](./credits.html.md) page and in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes). + +### Marketing and Promotion + +Help us to spread the word about LiveCodes by sharing our content on your social media channels, writing blog posts about LiveCodes or by providing us with promotional opportunities. + +### Sponsorship Benefits + +#### ☕️ Backers (USD$5/mo): + +- Name listed in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes). +- Thank you 💚 + Your support is really appreciated. + +#### 🍹 Generous Backers (USD$25/mo): + +- Name listed in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes). +- Priority in feature requests. + +#### 🥉 Bronze Sponsors (USD$100/mo): + +- Access to a hosted (always-on) [broadcast API](./features/broadcast.html.md) and [custom services](./advanced/services.html.md). +- Small logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs). +- Small logo placement in [this page](#livecodes-sponsors). +- Small logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes). +- Priority in feature requests. + +#### 🥈 Silver Sponsors (USD$250/mo): + +- Access to a hosted (always-on) [broadcast API](./features/broadcast.html.md) and [custom services](./advanced/services.html.md). +- Medium logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs). +- Logo placement in sidebar of all content pages. +- Medium logo placement in [this page](#livecodes-sponsors). +- Medium logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes). +- Priority in feature requests. + +#### 🥇 Gold Sponsors (USD$500/mo): + +- Access to a hosted (always-on) [broadcast API](./features/broadcast.html.md) and [custom services](./advanced/services.html.md). +- Large logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs). +- Logo placement in sidebar of all content pages. +- Large logo placement in [this page](#livecodes-sponsors). +- Large logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes). +- Priority in feature requests. + +#### 🏆 Platinum Sponsors (USD$1,000/mo): + +- Access to a hosted (always-on) [broadcast API](./features/broadcast.html.md) and [custom services](./advanced/services.html.md). +- Prominent logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs). +- Prominent logo placement in sidebar of all content pages. +- Prominent logo placement at the top of [this page](#). +- Prominent logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes). +- Priority in feature requests. + +#### 💎 Diamond Sponsors (USD$2,000/mo): + +- **Custom build** of the playground with your **logo and brand**. The custom build is maintained and receives new updates. +- Access to a hosted (always-on) [broadcast API](./features/broadcast.html.md) and [custom services](./advanced/services.html.md). +- Prominent logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs). +- Prominent logo placement in sidebar of all content pages. +- Prominent logo placement at the top of [this page](#). +- Prominent logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes). +- Priority in feature requests. + +#### 🌟 Special Sponsors (> USD$2,000/mo): + +    . + +

     

    + +If you are interested in becoming a sponsor of LiveCodes, please don't hesitate to . We would love to discuss the various sponsorship options available and find a way for you to get involved. Thank you for your support! + +## LiveCodes Sponsors + +
    + Your logo here +
    + +--- + + + +# Contact {#contact-custom-content-none} + +We would love to hear from you! + +import ContactForm from '../src/components/ContactForm.tsx' +import MailLink from '../src/components/MailLink.tsx' + + + +Or you can send us an email to: + +- Info: +- Security: +- Sponsor: + +For non-security-related code issues, please report them in the [repo issues](https://github.com/live-codes/livecodes/issues). + +Please follow the twitter account: [@livecodes_io](https://twitter.com/livecodes_io). + +--- + + + +# About us + +LiveCodes is built and maintained by [Hatem Hosny](https://github.com/hatemhosny), and wonderful [contributors](https://github.com/live-codes/livecodes/graphs/contributors). + +Feature requests and bug reports are received on the [GitHub repo](https://github.com/live-codes/livecodes/issues). + +Contributions are most welcome. Please open an issue on the GitHub repo to discuss your potential contribution before submitting a pull request. + +Reach out to us using this [contact form](./contact.html.md). + +Please consider [sponsoring LiveCodes](./sponsor.html.md) to support its maintenance and continued development. + +--- + + + +# Display Modes + +import DocCardList from '@theme/DocCardList'; +import {useCurrentSidebarCategory} from '@docusaurus/theme-common'; + + + +--- + + + +# Display Mode: full + +import LiveCodes from '../../../src/components/LiveCodes.tsx'; + + + +--- + + + +# Display Mode: editor + +import LiveCodes from '../../../src/components/LiveCodes.tsx'; + + + +--- + + + +# Display Mode: codeblock + +import LiveCodes from '../../../src/components/LiveCodes.tsx'; + + + +--- + + + +# Display Mode: result + +import LiveCodes from '../../../src/components/LiveCodes.tsx'; + + + +--- + + + +# \_internal + +## Index + +### Interfaces + +- [API](interfaces/API.md) +- [AppConfig](interfaces/AppConfig.md) +- [ContentConfig](interfaces/ContentConfig.md) +- [EditorConfig](interfaces/EditorConfig.md) +- [EditorPosition](interfaces/EditorPosition.md) +- [FormatterConfig](interfaces/FormatterConfig.md) +- [TestResult](interfaces/TestResult.md) +- [Types](interfaces/Types.md) +- [UserConfig](interfaces/UserConfig.md) + +### Type Aliases + +- [APICommands](type-aliases/APICommands.md) +- [AppLanguage](type-aliases/AppLanguage.md) +- [CDN](type-aliases/CDN.md) +- [CodejarTheme](type-aliases/CodejarTheme.md) +- [CodemirrorTheme](type-aliases/CodemirrorTheme.md) +- [CssPresetId](type-aliases/CssPresetId.md) +- [EditorId](type-aliases/EditorId.md) +- [EditorTheme](type-aliases/EditorTheme.md) +- [MonacoTheme](type-aliases/MonacoTheme.md) +- [Processor](type-aliases/Processor.md) +- [TemplateName](type-aliases/TemplateName.md) +- [Theme](type-aliases/Theme.md) +- [ToolsPaneStatus](type-aliases/ToolsPaneStatus.md) +- [WatchCode](type-aliases/WatchCode.md) +- [WatchConsole](type-aliases/WatchConsole.md) +- [WatchDestroy](type-aliases/WatchDestroy.md) +- [WatchLoad](type-aliases/WatchLoad.md) +- [WatchReady](type-aliases/WatchReady.md) +- [WatchTests](type-aliases/WatchTests.md) + +--- + + + +# Interface: API + +## Extended by + +- [`Playground`](../../interfaces/Playground.md) + +## Properties + +### destroy() + +> **destroy**: () => `Promise`\<`void`\> + +Destroys the playground instance, and removes event listeners. + +Further call to any SDK methods throws an error. + +#### Returns + +`Promise`\<`void`\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + await playground.destroy(); + // playground destroyed + // any further SDK call throws an error +}); +``` + +#### Defined in + +[models.ts:211](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L211) + +*** + +### exec() + +> **exec**: (`command`, ...`args`) => `Promise`\<`object` \| `object`\> + +Executes custom commands, including: `"setBroadcastToken"` and `"showVersion"`. + +See [docs](https://livecodes.io/docs/sdk/js-ts#exec) for details. + +#### Parameters + +• **command**: [`APICommands`](../type-aliases/APICommands.md) + +• ...**args**: `any`[] + +#### Returns + +`Promise`\<`object` \| `object`\> + +#### Defined in + +[models.ts:194](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L194) + +*** + +### format() + +> **format**: (`allEditors`?) => `Promise`\<`void`\> + +Formats the code. + +By default, the code in all editors (markup, style and script) is formatted. +To format only the active editor, the value `false` should be passed as an argument. + +#### Parameters + +• **allEditors?**: `boolean` + +#### Returns + +`Promise`\<`void`\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + await playground.format(); + // code in editors is formatted +}); +``` + +#### Defined in + +[models.ts:31](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L31) + +*** + +### getCode() + +> **getCode**: () => `Promise`\<[`Code`](../../interfaces/Code.md)\> + +Gets the playground code (including source code, source language and compiled code) for each editor (markup, style, script), in addition to result page HTML. + +See [Code](https://livecodes.io/docs/api/interfaces/Code) for the structure of the returned object. + +#### Returns + +`Promise`\<[`Code`](../../interfaces/Code.md)\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const code = await playground.getCode(); + + // source code, language and compiled code for the script editor + const { content, language, compiled } = code.script; + + // result page HTML + const result = code.result; +}); +``` + +#### Defined in + +[models.ts:105](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L105) + +*** + +### getConfig() + +> **getConfig**: (`contentOnly`?) => `Promise`\<[`Config`](../../interfaces/Config.md)\> + +Gets a [configuration object](https://livecodes.io/docs/configuration/configuration-object) representing the playground state. + +This can be used to restore state if passed as an [EmbedOptions](https://livecodes.io/docs/sdk/js-ts#embed-options) property when [creating playgrounds](https://livecodes.io/docs/sdk/js-ts/#createplayground), +or can be manipulated and loaded in run-time using [`setConfig`](https://livecodes.io/docs/sdk/js-ts#setconfig) method. + +#### Parameters + +• **contentOnly?**: `boolean` + +#### Returns + +`Promise`\<[`Config`](../../interfaces/Config.md)\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const config = await playground.getConfig(); +}); +``` + +#### Defined in + +[models.ts:64](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L64) + +*** + +### getShareUrl() + +> **getShareUrl**: (`shortUrl`?) => `Promise`\<`string`\> + +Gets a [share url](https://livecodes.io/docs/features/share) for the current project. + +By default, the url has a long query string representing the compressed encoded config object. +If the argument `shortUrl` was set to `true`, a short url is generated. + +#### Parameters + +• **shortUrl?**: `boolean` + +#### Returns + +`Promise`\<`string`\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const longUrl = await playground.getShareUrl(); + const shortUrl = await playground.getShareUrl(true); +}); +``` + +#### Defined in + +[models.ts:48](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L48) + +*** + +### ~~onChange()~~ + +> **onChange**: (`fn`) => `object` + +Runs a callback function when code changes. + +#### Parameters + +• **fn** + +#### Returns + +`object` + +##### ~~remove()~~ + +> **remove**: () => `void` + +###### Returns + +`void` + +#### Deprecated + +Use [`watch`](https://livecodes.io/docs/sdk/js-ts#watch) method instead. + +#### Defined in + +[models.ts:142](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L142) + +*** + +### run() + +> **run**: () => `Promise`\<`void`\> + +Runs the [result page](https://livecodes.io/docs/features/result) (after any required compilation for code). + +#### Returns + +`Promise`\<`void`\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + await playground.run(); + // new result page is displayed +}); +``` + +#### Defined in + +[models.ts:14](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L14) + +*** + +### runTests() + +> **runTests**: () => `Promise`\<`object`\> + +Runs project [tests](https://livecodes.io/docs/features/tests) (if present) and gets test results. + +#### Returns + +`Promise`\<`object`\> + +##### results + +> **results**: [`TestResult`](TestResult.md)[] + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const { results } = await playground.runTests(); +}); +``` + +#### Defined in + +[models.ts:135](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L135) + +*** + +### setConfig() + +> **setConfig**: (`config`) => `Promise`\<[`Config`](../../interfaces/Config.md)\> + +Loads a new project using the passed configuration object. + +#### Parameters + +• **config**: `Partial`\<[`Config`](../../interfaces/Config.md)\> + +#### Returns + +`Promise`\<[`Config`](../../interfaces/Config.md)\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const config = { + markup: { + language: "html", + content: "Hello World!", + }, + }; + const newConfig = await playground.setConfig(config); + // new project loaded +}); +``` + +#### Defined in + +[models.ts:84](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L84) + +*** + +### show() + +> **show**: (`panel`, `options`?) => `Promise`\<`void`\> + +Shows the selected panel. + +See [docs](https://livecodes.io/docs/sdk/js-ts#show) for details. + +#### Parameters + +• **panel**: `"result"` \| [`EditorId`](../type-aliases/EditorId.md) \| `"console"` \| `"compiled"` \| `"tests"` \| `"editor"` \| `"toggle-result"` + +• **options?** + +• **options.column?**: `number` + +• **options.full?**: `boolean` + +• **options.line?**: `number` + +• **options.zoom?**: `1` \| `0.5` \| `0.25` + +#### Returns + +`Promise`\<`void`\> + +#### Example + +```ts +await playground.show("style"); +await playground.show("toggle-result"); +await playground.show("result", { full: true }); +await playground.show("script"); +await playground.show("result", { zoom: 0.5 }); +await playground.show("console", { full: true }); +``` + +#### Defined in + +[models.ts:119](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L119) + +*** + +### watch + +> **watch**: [`WatchLoad`](../type-aliases/WatchLoad.md) & [`WatchReady`](../type-aliases/WatchReady.md) & [`WatchCode`](../type-aliases/WatchCode.md) & [`WatchConsole`](../type-aliases/WatchConsole.md) & [`WatchTests`](../type-aliases/WatchTests.md) & [`WatchDestroy`](../type-aliases/WatchDestroy.md) + +Allows to watch for various playground events. +It takes 2 arguments: event name and a callback function that will be called on every event. + +event name can be one of: `"load" | "ready" | "code" | "console" | "tests" | "destroy"` + +In some events, the callback function will be called with an object that supplies relevant data to the callback function (e.g. code, console output, test results). + +The watch method returns an object with a single method (`remove`), which when called will remove the callback from watching further events. + +See [docs](https://livecodes.io/docs/sdk/js-ts#watch) for details. + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then((playground) => { + const codeWatcher = playground.watch("code", ({ code, config }) => { + // this will run on every code change + console.log("code:", code); + console.log("config:", config); + }); + + const consoleWatcher = playground.watch("console", ({ method, args }) => { + // this will run on every console output + console[method](...args); + }); + + const testsWatcher = playground.watch("tests", ({ results }) => { + // this will run when tests run + results.forEach((testResult) => { + console.log("status:", testResult.status); // "pass", "fail" or "skip" + console.log(testResult.errors); // array of errors as strings + }); + }); + + // then later + codeWatcher.remove(); + consoleWatcher.remove(); + testsWatcher.remove(); + // events are no longer watched +}); +``` + +#### Defined in + +[models.ts:187](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L187) + +--- + + + +# Interface: AppConfig + +These are properties that define how the app behaves. + +## Extended by + +- [`Config`](../../interfaces/Config.md) + +## Properties + +### allowLangChange + +> **allowLangChange**: `boolean` + +If `false`, the UI will not show the menu that allows changing editor language. + +#### Default + +```ts +true +``` + +#### Defined in + +[models.ts:603](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L603) + +*** + +### mode + +> **mode**: `"focus"` \| `"full"` \| `"result"` \| `"editor"` \| `"lite"` \| `"simple"` \| `"codeblock"` + +Sets the [display mode](https://livecodes.io/docs/features/display-modes). + +#### Default + +```ts +"full" +``` + +#### Defined in + +[models.ts:615](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L615) + +*** + +### readonly + +> **readonly**: `boolean` + +If `true`, editors are loaded in read-only mode, where the user is not allowed to change the code. + +By default, when readonly is set to true, the light-weight code editor [CodeJar](https://livecodes.io/docs/features/editor-settings#code-editor) is used. +If you wish to use another editor, set the [editor](https://livecodes.io/docs/configuration/configuration-object#editor) property. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:597](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L597) + +*** + +### tools + +> **tools**: `Partial`\<`object`\> + +Sets enabled and active tools and status of [tools pane](https://livecodes.io/docs/features/tools-pane). + +#### Type declaration + +##### active + +> **active**: `""` \| `"console"` \| `"compiled"` \| `"tests"` + +##### enabled + +> **enabled**: `"all"` \| (`"console"` \| `"compiled"` \| `"tests"`)[] + +##### status + +> **status**: [`ToolsPaneStatus`](../type-aliases/ToolsPaneStatus.md) + +#### Default + +```ts +{ enabled: "all", active: "", status: "" } +``` + +#### Example + +```js +{ + "tools": { + "enabled": ["console", "compiled"], + "active": "console", + "status": "open" + } +} +``` + +#### Defined in + +[models.ts:631](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L631) + +*** + +### view? + +> `optional` **view**: `"split"` \| `"result"` \| `"editor"` + +Sets the [default view](https://livecodes.io/docs/features/default-view) for the playground. + +#### Default + +```ts +"split" +``` + +#### Defined in + +[models.ts:609](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L609) + +*** + +### zoom + +> **zoom**: `0.25` \| `0.5` \| `1` + +Sets result page [zoom level](https://livecodes.io/docs/features/result#result-page-zoom). + +#### Defined in + +[models.ts:640](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L640) + +--- + + + +# Interface: ContentConfig + +The properties that define the content of the current [project](https://livecodes.io/docs/features/projects). + +## Extended by + +- [`Config`](../../interfaces/Config.md) + +## Properties + +### activeEditor + +> **activeEditor**: `undefined` \| [`EditorId`](../type-aliases/EditorId.md) + +Selects the active editor to show. + +Defaults to the last used editor for user, otherwise `"markup"` + +#### Defined in + +[models.ts:455](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L455) + +*** + +### cssPreset + +> **cssPreset**: [`CssPresetId`](../type-aliases/CssPresetId.md) + +[CSS Preset](https://livecodes.io/docs/features/external-resources#css-presets) to use. + +#### Defined in + +[models.ts:502](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L502) + +*** + +### customSettings + +> **customSettings**: `object` + +Defines [custom settings](https://livecodes.io/docs/advanced/custom-settings) for the current project. + +#### adoc + +> **adoc**: `any` + +#### app.svelte + +> **svelte**: `any` + +#### app.vue + +> **vue**: `any` + +#### art + +> **art**: `any` + +#### art-template + +> **art-template**: `any` + +#### as + +> **as**: `any` + +#### asc + +> **asc**: `any` + +#### asciidoc + +> **asciidoc**: `any` + +#### assemblyscript + +> **assemblyscript**: `any` + +#### astro + +> **astro**: `any` + +#### autoprefixer + +> **autoprefixer**: `any` + +#### babel + +> **babel**: `any` + +#### bb + +> **bb**: `any` + +#### bbcode + +> **bbcode**: `any` + +#### Binary + +> **Binary**: `any` + +#### blockly + +> **blockly**: `any` + +#### blockly.xml + +> **xml**: `any` + +#### c + +> **c**: `any` + +#### C + +> **C**: `any` + +#### c++ + +> **c++**: `any` + +#### civet + +> **civet**: `any` + +#### clang + +> **clang**: `any` + +#### clang.cpp + +> **cpp**: `any` + +#### clio + +> **clio**: `any` + +#### clj + +> **clj**: `any` + +#### cljc + +> **cljc**: `any` + +#### cljs + +> **cljs**: `any` + +#### clojure + +> **clojure**: `any` + +#### clojurescript + +> **clojurescript**: `any` + +#### coffee + +> **coffee**: `any` + +#### coffeescript + +> **coffeescript**: `any` + +#### common-lisp + +> **common-lisp**: `any` + +#### commonlisp + +> **commonlisp**: `any` + +#### convertCommonjs? + +> `optional` **convertCommonjs**: `boolean` + +#### cp + +> **cp**: `any` + +#### cpp + +> **cpp**: `any` + +#### cpp-wasm + +> **cpp-wasm**: `any` + +#### cppm + +> **cppm**: `any` + +#### cppwasm + +> **cppwasm**: `any` + +#### cs + +> **cs**: `any` + +#### cs-wasm + +> **cs-wasm**: `any` + +#### csharp + +> **csharp**: `any` + +#### csharp-wasm + +> **csharp-wasm**: `any` + +#### css + +> **css**: `any` + +#### cssmodules + +> **cssmodules**: `any` + +#### cssnano + +> **cssnano**: `any` + +#### cwasm + +> **cwasm**: `any` + +#### cxx + +> **cxx**: `any` + +#### defaultCDN? + +> `optional` **defaultCDN**: [`CDN`](../type-aliases/CDN.md) + +#### diagram + +> **diagram**: `any` + +#### diagrams + +> **diagrams**: `any` + +#### dot + +> **dot**: `any` + +#### edn + +> **edn**: `any` + +#### ejs + +> **ejs**: `any` + +#### es + +> **es**: `any` + +#### eta + +> **eta**: `any` + +#### fennel + +> **fennel**: `any` + +#### flow + +> **flow**: `any` + +#### fnl + +> **fnl**: `any` + +#### gleam + +> **gleam**: `any` + +#### go + +> **go**: `any` + +#### golang + +> **golang**: `any` + +#### graph + +> **graph**: `any` + +#### h + +> **h**: `any` + +#### haml + +> **haml**: `any` + +#### handlebars + +> **handlebars**: `any` + +#### hbs + +> **hbs**: `any` + +#### hpp + +> **hpp**: `any` + +#### htm + +> **htm**: `any` + +#### html + +> **html**: `any` + +#### ii + +> **ii**: `any` + +#### imba + +> **imba**: `any` + +#### imports? + +> `optional` **imports**: `Record`\<`string`, `string`\> + +#### ixx + +> **ixx**: `any` + +#### jade + +> **jade**: `any` + +#### java + +> **java**: `any` + +#### javascript + +> **javascript**: `any` + +#### jinja + +> **jinja**: `any` + +#### jl + +> **jl**: `any` + +#### js + +> **js**: `any` + +#### json + +> **json**: `any` + +#### jsx + +> **jsx**: `any` + +#### julia + +> **julia**: `any` + +#### less + +> **less**: `any` + +#### lightningcss + +> **lightningcss**: `any` + +#### liquid + +> **liquid**: `any` + +#### liquidjs + +> **liquidjs**: `any` + +#### lisp + +> **lisp**: `any` + +#### livescript + +> **livescript**: `any` + +#### ls + +> **ls**: `any` + +#### lua + +> **lua**: `any` + +#### lua-wasm + +> **lua-wasm**: `any` + +#### luawasm + +> **luawasm**: `any` + +#### malina + +> **malina**: `any` + +#### malinajs + +> **malinajs**: `any` + +#### mapImports? + +> `optional` **mapImports**: `boolean` + +#### markdown + +> **markdown**: `any` + +#### md + +> **md**: `any` + +#### mdown + +> **mdown**: `any` + +#### mdx + +> **mdx**: `any` + +#### mjml + +> **mjml**: `any` + +#### mkdn + +> **mkdn**: `any` + +#### ml + +> **ml**: `any` + +#### mli + +> **mli**: `any` + +#### mustache + +> **mustache**: `any` + +#### njk + +> **njk**: `any` + +#### nunjucks + +> **nunjucks**: `any` + +#### ocaml + +> **ocaml**: `any` + +#### perl + +> **perl**: `any` + +#### pg + +> **pg**: `any` + +#### pg.sql + +> **sql**: `any` + +#### pglite + +> **pglite**: `any` + +#### pglite.sql + +> **sql**: `any` + +#### pgsql + +> **pgsql**: `any` + +#### pgsql.sql + +> **sql**: `any` + +#### php + +> **php**: `any` + +#### php-wasm + +> **php-wasm**: `any` + +#### phpwasm + +> **phpwasm**: `any` + +#### pintora + +> **pintora**: `any` + +#### pl + +> **pl**: `any` + +#### plt + +> **plt**: `any` + +#### pm + +> **pm**: `any` + +#### postcss + +> **postcss**: `any` + +#### postcssImportUrl + +> **postcssImportUrl**: `any` + +#### postcssPresetEnv + +> **postcssPresetEnv**: `any` + +#### postgre.sql + +> **sql**: `any` + +#### postgres + +> **postgres**: `any` + +#### postgresql + +> **postgresql**: `any` + +#### postgresql.sql + +> **sql**: `any` + +#### prolog + +> **prolog**: `any` + +#### prolog.pl + +> **pl**: `any` + +#### pug + +> **pug**: `any` + +#### purgecss + +> **purgecss**: `any` + +#### py + +> **py**: `any` + +#### py-wasm + +> **py-wasm**: `any` + +#### py3 + +> **py3**: `any` + +#### pyodide + +> **pyodide**: `any` + +#### python + +> **python**: `any` + +#### python-wasm + +> **python-wasm**: `any` + +#### pythonwasm + +> **pythonwasm**: `any` + +#### pywasm + +> **pywasm**: `any` + +#### r + +> **r**: `any` + +#### r-wasm + +> **r-wasm**: `any` + +#### rb + +> **rb**: `any` + +#### re + +> **re**: `any` + +#### react + +> **react**: `any` + +#### react-jsx + +> **react-jsx**: `any` + +#### react-native + +> **react-native**: `any` + +#### react-native-tsx + +> **react-native-tsx**: `any` + +#### react-native.jsx + +> **jsx**: `any` + +#### react-native.tsx + +> **tsx**: `any` + +#### react-tsx + +> **react-tsx**: `any` + +#### react.jsx + +> **jsx**: `any` + +#### react.tsx + +> **tsx**: `any` + +#### reason + +> **reason**: `any` + +#### rei + +> **rei**: `any` + +#### res + +> **res**: `any` + +#### rescript + +> **rescript**: `any` + +#### resi + +> **resi**: `any` + +#### rich + +> **rich**: `any` + +#### richtext + +> **richtext**: `any` + +#### riot + +> **riot**: `any` + +#### riotjs + +> **riotjs**: `any` + +#### rlang + +> **rlang**: `any` + +#### rstats + +> **rstats**: `any` + +#### rte + +> **rte**: `any` + +#### rte.html + +> **html**: `any` + +#### ruby + +> **ruby**: `any` + +#### ruby-wasm + +> **ruby-wasm**: `any` + +#### rubywasm + +> **rubywasm**: `any` + +#### sass + +> **sass**: `any` + +#### scheme + +> **scheme**: `any` + +#### scm + +> **scm**: `any` + +#### scriptType? + +> `optional` **scriptType**: `""` \| `"module"` \| `"text/liquid"` \| `"text/python"` \| `"text/r"` \| `"text/ruby-wasm"` \| `"text/x-uniter-php"` \| `"text/php-wasm"` \| `"text/cpp"` \| `"text/java"` \| `"text/csharp-wasm"` \| `"text/perl"` \| `"text/julia"` \| `"text/biwascheme"` \| `"text/commonlisp"` \| `"text/tcl"` \| `"text/prolog"` \| `"application/json"` \| `"application/lua"` \| `"text/fennel"` \| `"application/wasm-uint8"` \| `"application/javascript"` \| `"application/ecmascript"` \| `"text/javascript"` \| `"text/ecmascript"` + +#### scss + +> **scss**: `any` + +#### solid + +> **solid**: `any` + +#### solid.jsx + +> **jsx**: `any` + +#### solid.tsx + +> **tsx**: `any` + +#### sql + +> **sql**: `any` + +#### sqlite + +> **sqlite**: `any` + +#### sqlite3 + +> **sqlite3**: `any` + +#### stencil + +> **stencil**: `any` + +#### stencil.tsx + +> **tsx**: `any` + +#### styl + +> **styl**: `any` + +#### stylis + +> **stylis**: `any` + +#### stylus + +> **stylus**: `any` + +#### sucrase + +> **sucrase**: `any` + +#### svelte + +> **svelte**: `any` + +#### svelte-app + +> **svelte-app**: `any` + +#### tailwindcss + +> **tailwindcss**: `any` + +#### tcl + +> **tcl**: `any` + +#### teal + +> **teal**: `any` + +#### template? + +> `optional` **template**: `object` + +#### template.data? + +> `optional` **data**: `any` + +#### template.prerender? + +> `optional` **prerender**: `boolean` + +#### tl + +> **tl**: `any` + +#### tokencss + +> **tokencss**: `any` + +#### ts + +> **ts**: `any` + +#### tsx + +> **tsx**: `any` + +#### twig + +> **twig**: `any` + +#### types? + +> `optional` **types**: [`Types`](Types.md) + +#### typescript + +> **typescript**: `any` + +#### unocss + +> **unocss**: `any` + +#### vento + +> **vento**: `any` + +#### vto + +> **vto**: `any` + +#### vue + +> **vue**: `any` + +#### vue-app + +> **vue-app**: `any` + +#### vue2 + +> **vue2**: `any` + +#### vue3 + +> **vue3**: `any` + +#### wasm + +> **wasm**: `any` + +#### wasm.cpp + +> **cpp**: `any` + +#### wasm.cs + +> **cs**: `any` + +#### wasm.lua + +> **lua**: `any` + +#### wasm.php + +> **php**: `any` + +#### wasm.py + +> **py**: `any` + +#### wasm.rb + +> **rb**: `any` + +#### wast + +> **wast**: `any` + +#### wat + +> **wat**: `any` + +#### webassembly + +> **webassembly**: `any` + +#### windicss + +> **windicss**: `any` + +#### xht + +> **xht**: `any` + +#### xml + +> **xml**: `any` + +#### Defined in + +[models.ts:514](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L514) + +*** + +### description + +> **description**: `string` + +Project description. Used in [project](https://livecodes.io/docs/features/projects) search +and [result page](https://livecodes.io/docs/features/result) description meta tag. + +#### Default + +```ts +"" +``` + +#### Defined in + +[models.ts:425](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L425) + +*** + +### head + +> **head**: `string` + +Content added to the [result page](https://livecodes.io/docs/features/result) `` element. + +#### Default + +```ts +'\n' +``` + +#### Defined in + +[models.ts:431](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L431) + +*** + +### htmlAttrs + +> **htmlAttrs**: `string` \| `Record`\<`string`, `string`\> + +Attributes added to the [result page](https://livecodes.io/docs/features/result) `` element. +It can be an object or a string. + +#### Example + +```ts +{ lang: "en", class: "dark" } +'lang="en" class="dark"' +``` + +#### Defined in + +[models.ts:440](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L440) + +*** + +### imports + +> **imports**: `object` + +Allows specifying custom [import maps](https://github.com/WICG/import-maps) for [module imports](https://livecodes.io/docs/features/module-resolution#custom-module-resolution). + +**Example** + +Setting `imports` like this: +```js +"imports": { + "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js" +} +``` +results in the following import map: +```html + +``` +See docs for [Imports](https://livecodes.io/docs/configuration/configuration-object#imports) +and [Custom Module Resolution](https://livecodes.io/docs/features/module-resolution/#custom-module-resolution) + +#### Index Signature + + \[`key`: `string`\]: `string` + +#### Defined in + +[models.ts:540](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L540) + +*** + +### languages + +> **languages**: `undefined` \| (`"reason"` \| `"stylus"` \| `"r"` \| `"html"` \| `"ruby"` \| `"rb"` \| `"json"` \| `"teal"` \| `"solid"` \| `"flow"` \| `"dot"` \| `"as"` \| `"go"` \| `"htm"` \| `"markdown"` \| `"md"` \| `"mdown"` \| `"mkdn"` \| `"mdx"` \| `"astro"` \| `"pug"` \| `"jade"` \| `"haml"` \| `"asciidoc"` \| `"adoc"` \| `"asc"` \| `"mustache"` \| `"handlebars"` \| `"hbs"` \| `"ejs"` \| `"eta"` \| `"nunjucks"` \| `"njk"` \| `"liquid"` \| `"liquidjs"` \| `"twig"` \| `"vento"` \| `"vto"` \| `"art-template"` \| `"art"` \| `"jinja"` \| `"bbcode"` \| `"bb"` \| `"mjml"` \| `"diagrams"` \| `"diagram"` \| `"graph"` \| `"plt"` \| `"richtext"` \| `"rte"` \| `"rich"` \| `"rte.html"` \| `"css"` \| `"scss"` \| `"sass"` \| `"less"` \| `"styl"` \| `"stylis"` \| `"postcss"` \| `"javascript"` \| `"js"` \| `"babel"` \| `"es"` \| `"sucrase"` \| `"typescript"` \| `"ts"` \| `"jsx"` \| `"tsx"` \| `"react"` \| `"react-jsx"` \| `"react.jsx"` \| `"react-tsx"` \| `"react.tsx"` \| `"react-native"` \| `"react-native.jsx"` \| `"react-native-tsx"` \| `"react-native.tsx"` \| `"vue"` \| `"vue3"` \| `"vue2"` \| `"vue-app"` \| `"app.vue"` \| `"svelte"` \| `"svelte-app"` \| `"app.svelte"` \| `"stencil"` \| `"stencil.tsx"` \| `"solid.jsx"` \| `"solid.tsx"` \| `"riot"` \| `"riotjs"` \| `"malina"` \| `"malinajs"` \| `"xht"` \| `"coffeescript"` \| `"coffee"` \| `"livescript"` \| `"ls"` \| `"civet"` \| `"clio"` \| `"imba"` \| `"assemblyscript"` \| `"python"` \| `"py"` \| `"pyodide"` \| `"python-wasm"` \| `"py-wasm"` \| `"pythonwasm"` \| `"pywasm"` \| `"py3"` \| `"wasm.py"` \| `"rlang"` \| `"rstats"` \| `"r-wasm"` \| `"ruby-wasm"` \| `"wasm.rb"` \| `"rubywasm"` \| `"golang"` \| `"php"` \| `"php-wasm"` \| `"phpwasm"` \| `"wasm.php"` \| `"cpp"` \| `"c"` \| `"C"` \| `"cp"` \| `"cxx"` \| `"c++"` \| `"cppm"` \| `"ixx"` \| `"ii"` \| `"hpp"` \| `"h"` \| `"cpp-wasm"` \| `"cppwasm"` \| `"cwasm"` \| `"wasm.cpp"` \| `"clang"` \| `"clang.cpp"` \| `"java"` \| `"csharp"` \| `"csharp-wasm"` \| `"cs"` \| `"cs-wasm"` \| `"wasm.cs"` \| `"perl"` \| `"pl"` \| `"pm"` \| `"lua"` \| `"lua-wasm"` \| `"luawasm"` \| `"wasm.lua"` \| `"tl"` \| `"fennel"` \| `"fnl"` \| `"julia"` \| `"jl"` \| `"scheme"` \| `"scm"` \| `"commonlisp"` \| `"common-lisp"` \| `"lisp"` \| `"clojurescript"` \| `"clojure"` \| `"cljs"` \| `"clj"` \| `"cljc"` \| `"edn"` \| `"gleam"` \| `"rescript"` \| `"res"` \| `"resi"` \| `"re"` \| `"rei"` \| `"ocaml"` \| `"ml"` \| `"mli"` \| `"tcl"` \| `"wat"` \| `"wast"` \| `"webassembly"` \| `"wasm"` \| `"Binary"` \| `"sql"` \| `"sqlite"` \| `"sqlite3"` \| `"pg.sql"` \| `"pgsql.sql"` \| `"pgsql"` \| `"pg"` \| `"pglite"` \| `"pglite.sql"` \| `"postgresql"` \| `"postgres"` \| `"postgre.sql"` \| `"postgresql.sql"` \| `"prolog.pl"` \| `"prolog"` \| `"blockly"` \| `"blockly.xml"` \| `"xml"` \| `"pintora"` \| `"tailwindcss"` \| `"postcssImportUrl"` \| `"windicss"` \| `"unocss"` \| `"tokencss"` \| `"lightningcss"` \| `"autoprefixer"` \| `"postcssPresetEnv"` \| `"cssmodules"` \| `"purgecss"` \| `"cssnano"`)[] + +List of enabled languages. + +Defaults to all supported languages in full app and only current editor languages in [embeds](https://livecodes.io/docs/features/embeds). + +#### Defined in + +[models.ts:462](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L462) + +*** + +### markup + +> **markup**: `object` + +An object that configures the language and content of the markup editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +#### content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### language + +> **language**: [`Language`](../../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### position? + +> `optional` **position**: [`EditorPosition`](EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### Default + +```ts +{ language: "html", content: "" } +``` + +#### Defined in + +[models.ts:470](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L470) + +*** + +### processors + +> **processors**: [`Processor`](../type-aliases/Processor.md)[] + +List of enabled [CSS processors](https://livecodes.io/docs/features/css/#css-processors). + +For the list of available processors, see [Processor](https://livecodes.io/docs/api/internal/type-aliases/Processor) + +#### Defined in + +[models.ts:509](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L509) + +*** + +### script + +> **script**: `object` + +An object that configures the language and content of the script editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +#### content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### language + +> **language**: [`Language`](../../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### position? + +> `optional` **position**: [`EditorPosition`](EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### Default + +```ts +{ language: "javascript", content: "" } +``` + +#### Defined in + +[models.ts:486](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L486) + +*** + +### scripts + +> **scripts**: `string`[] + +List of URLs for [external scripts](https://livecodes.io/docs/features/external-resources) to add to the [result page](https://livecodes.io/docs/features/result). + +#### Defined in + +[models.ts:496](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L496) + +*** + +### style + +> **style**: `object` + +An object that configures the language and content of the style editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +#### content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### language + +> **language**: [`Language`](../../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### position? + +> `optional` **position**: [`EditorPosition`](EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### Default + +```ts +{ language: "css", content: "" } +``` + +#### Defined in + +[models.ts:478](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L478) + +*** + +### stylesheets + +> **stylesheets**: `string`[] + +List of URLs for [external stylesheets](https://livecodes.io/docs/features/external-resources) to add to the [result page](https://livecodes.io/docs/features/result). + +#### Defined in + +[models.ts:491](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L491) + +*** + +### tags + +> **tags**: `string`[] + +Project tags. +Used in [project](https://livecodes.io/docs/features/projects) filter and search. + +#### Default + +```ts +[] +``` + +#### Defined in + +[models.ts:447](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L447) + +*** + +### tests + +> **tests**: `undefined` \| `object` + +Configures the [language](https://livecodes.io/docs/features/tests#supported-languages) +and content of [tests](https://livecodes.io/docs/features/tests). + +#### Defined in + +[models.ts:576](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L576) + +*** + +### title + +> **title**: `string` + +Project title. +This is used as [result page](https://livecodes.io/docs/features/result) title and title meta tag. +Also used in project search. + +#### Default + +```ts +"Untitled Project" +``` + +#### Defined in + +[models.ts:418](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L418) + +*** + +### types + +> **types**: `object` + +Allows providing custom TypeScript type declarations for better [editor intellisense](https://livecodes.io/docs/features/intellisense). + +It is an object where each key represents module name and value represents the types. + +See docs for [Types](https://livecodes.io/docs/configuration/configuration-object#types) +and [Custom Types](https://livecodes.io/docs/features/intellisense#custom-types) + +#### Examples + +```js +{ + "types": { + "my-demo-lib": "https://my-custom-domain/my-type-declarations.d.ts" + } +} +``` + +``` +{ + "types": { + "my-demo-lib": { + "url": "https://my-custom-domain/types.d.ts", + "autoload": true, + "declareAsModule": true + } +} +``` + +#### Defined in + +[models.ts:570](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L570) + +*** + +### version + +> `readonly` **version**: `string` + +This is a read-only property which specifies the current LiveCodes version. + +Version specified in [exported](https://livecodes.io/docs/features/export) projects allows automatically upgrading the project configuration when imported by an app with a newer version. + +#### Defined in + +[models.ts:583](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L583) + +--- + + + +# Interface: EditorConfig + +## Extended by + +- [`UserConfig`](UserConfig.md) + +## Properties + +### closeBrackets + +> **closeBrackets**: `boolean` + +Use auto-complete to close brackets and quotes. + +#### Default + +```ts +true +``` + +#### Defined in + +[models.ts:801](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L801) + +*** + +### editor + +> **editor**: `undefined` \| `"auto"` \| `"monaco"` \| `"codemirror"` \| `"codejar"` + +Selects the [code editor](https://livecodes.io/docs/features/editor-settings#code-editor) to use. + +If `undefined` (the default), Monaco editor is used on desktop, +CodeMirror is used on mobile and in `simple` mode, +while CodeJar is used in `codeblock` mode, in `lite` mode and in `readonly` playgrounds. + +If set to `auto`, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings. + +#### Default + +```ts +undefined +``` + +#### Defined in + +[models.ts:722](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L722) + +*** + +### editorMode + +> **editorMode**: `undefined` \| `"vim"` \| `"emacs"` + +Sets [editor mode](https://livecodes.io/docs/features/editor-settings#editor-modes). + +#### Defined in + +[models.ts:812](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L812) + +*** + +### editorTheme + +> **editorTheme**: `undefined` \| `string` \| [`EditorTheme`](../type-aliases/EditorTheme.md)[] + +Sets the [code editor](https://livecodes.io/docs/features/editor-settings) themes. + +See docs for [editor themes](https://livecodes.io/docs/configuration/configuration-object#editortheme) for details. + +#### Examples + +```ts +"vs" +``` + +```ts +"monaco:twilight, codemirror:one-dark" +``` + +```ts +["vs@light"] +``` + +```ts +["vs@light", "vs-dark@dark"] +``` + +```ts +["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"] +``` + +#### Defined in + +[models.ts:748](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L748) + +*** + +### emmet + +> **emmet**: `boolean` + +Enables [Emmet](https://livecodes.io/docs/features/editor-settings#emmet). + +#### Default + +```ts +true +``` + +#### Defined in + +[models.ts:807](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L807) + +*** + +### enableAI + +> **enableAI**: `boolean` + +If `true`, [AI code assistant](https://livecodes.io/docs/features/ai) is enabled. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:818](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L818) + +*** + +### foldRegions + +> **foldRegions**: `boolean` + +When set to `true`, regions marked by `#region` and `#endregion` comments are folded when the project is loaded. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:795](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L795) + +*** + +### fontFamily + +> **fontFamily**: `undefined` \| `string` + +Sets the [code editor](https://livecodes.io/docs/features/editor-settings) font family. + +#### Defined in + +[models.ts:753](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L753) + +*** + +### fontSize + +> **fontSize**: `undefined` \| `number` + +Sets the font size. + +If `undefined` (the default), the font size is set to 14 for the full app and 12 for [embeds](https://livecodes.io/docs/features/embeds). + +#### Default + +```ts +undefined +``` + +#### Defined in + +[models.ts:761](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L761) + +*** + +### lineNumbers + +> **lineNumbers**: `boolean` \| `"relative"` + +Show line numbers in [code editor](https://livecodes.io/docs/features/editor-settings). + +#### Default + +```ts +true +``` + +#### Defined in + +[models.ts:783](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L783) + +*** + +### tabSize + +> **tabSize**: `number` + +The number of spaces per indentation-level. + +Also used in [code formatting](https://livecodes.io/docs/features/code-format). + +#### Default + +```ts +2 +``` + +#### Defined in + +[models.ts:777](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L777) + +*** + +### theme + +> **theme**: [`Theme`](../type-aliases/Theme.md) + +Sets the app [theme](https://livecodes.io/docs/features/themes) to light/dark mode. + +#### Default + +```ts +"dark" +``` + +#### Defined in + +[models.ts:728](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L728) + +*** + +### themeColor + +> **themeColor**: `undefined` \| `string` + +Sets the app theme color. +If `undefined`, it is set to `"hsl(214, 40%, 50%)"`. + +#### Default + +```ts +undefined +``` + +#### Defined in + +[models.ts:735](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L735) + +*** + +### useTabs + +> **useTabs**: `boolean` + +If `true`, lines are indented with tabs instead of spaces. + +Also used in [code formatting](https://livecodes.io/docs/features/code-format). + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:769](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L769) + +*** + +### wordWrap + +> **wordWrap**: `boolean` + +Enables word-wrap for long lines. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:789](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L789) + +--- + + + +# Interface: EditorPosition + +## Properties + +### column? + +> `optional` **column**: `number` + +#### Defined in + +[models.ts:1165](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1165) + +*** + +### lineNumber + +> **lineNumber**: `number` + +#### Defined in + +[models.ts:1164](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1164) + +--- + + + +# Interface: FormatterConfig + +## Extended by + +- [`UserConfig`](UserConfig.md) + +## Properties + +### semicolons + +> **semicolons**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use semi-colons. + +#### Default + +```ts +true +``` + +#### Defined in + +[models.ts:838](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L838) + +*** + +### singleQuote + +> **singleQuote**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use single quotes instead of double quotes. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:843](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L843) + +*** + +### tabSize + +> **tabSize**: `number` + +The number of spaces per indentation-level. + +#### Default + +```ts +2 +``` + +#### Defined in + +[models.ts:832](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L832) + +*** + +### trailingComma + +> **trailingComma**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use [trailing commas](https://prettier.io/docs/en/options.html#trailing-commas). + +#### Default + +```ts +true +``` + +#### Defined in + +[models.ts:849](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L849) + +*** + +### useTabs + +> **useTabs**: `boolean` + +If `true`, lines are indented with tabs instead of spaces. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:826](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L826) + +--- + + + +# Interface: TestResult + +## Properties + +### duration + +> **duration**: `number` + +#### Defined in + +[models.ts:1979](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1979) + +*** + +### errors + +> **errors**: `string`[] + +#### Defined in + +[models.ts:1980](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1980) + +*** + +### status + +> **status**: `"fail"` \| `"pass"` \| `"skip"` + +#### Defined in + +[models.ts:1981](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1981) + +*** + +### testPath + +> **testPath**: `string`[] + +#### Defined in + +[models.ts:1982](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1982) + +--- + + + +# Interface: Types + +## Indexable + + \[`key`: `string`\]: `string` \| `object` + +--- + + + +# Interface: UserConfig + +## Extends + +- [`EditorConfig`](EditorConfig.md).[`FormatterConfig`](FormatterConfig.md) + +## Extended by + +- [`Config`](../../interfaces/Config.md) + +## Properties + +### appLanguage + +> **appLanguage**: `undefined` \| [`AppLanguage`](../type-aliases/AppLanguage.md) + +Sets the app UI language used. + +#### Defined in + +[models.ts:707](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L707) + +*** + +### autosave + +> **autosave**: `boolean` + +If `true`, the project is automatically saved on code change, +after time [delay](https://livecodes.io/docs/configuration/configuration-object#delay). + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:656](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L656) + +*** + +### autotest + +> **autotest**: `boolean` + +If `true`, the project is watched for code changes which trigger tests to auto-run. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:662](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L662) + +*** + +### autoupdate + +> **autoupdate**: `boolean` + +If `true`, the result page is automatically updated on code change, +after time [delay](https://livecodes.io/docs/configuration/configuration-object#delay). + +#### Default + +```ts +true +``` + +#### Defined in + +[models.ts:649](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L649) + +*** + +### closeBrackets + +> **closeBrackets**: `boolean` + +Use auto-complete to close brackets and quotes. + +#### Default + +```ts +true +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`closeBrackets`](EditorConfig.md#closebrackets) + +#### Defined in + +[models.ts:801](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L801) + +*** + +### delay + +> **delay**: `number` + +Time delay (in milliseconds) following code change, +after which the result page is updated (if [`autoupdate`](https://livecodes.io/docs/configuration/configuration-object#autoupdate) is `true`) +and/or the project is saved (if [`autosave`](https://livecodes.io/docs/configuration/configuration-object#autosave) is `true`). + +#### Default + +```ts +1500 +``` + +#### Defined in + +[models.ts:670](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L670) + +*** + +### editor + +> **editor**: `undefined` \| `"auto"` \| `"monaco"` \| `"codemirror"` \| `"codejar"` + +Selects the [code editor](https://livecodes.io/docs/features/editor-settings#code-editor) to use. + +If `undefined` (the default), Monaco editor is used on desktop, +CodeMirror is used on mobile and in `simple` mode, +while CodeJar is used in `codeblock` mode, in `lite` mode and in `readonly` playgrounds. + +If set to `auto`, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings. + +#### Default + +```ts +undefined +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`editor`](EditorConfig.md#editor) + +#### Defined in + +[models.ts:722](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L722) + +*** + +### editorMode + +> **editorMode**: `undefined` \| `"vim"` \| `"emacs"` + +Sets [editor mode](https://livecodes.io/docs/features/editor-settings#editor-modes). + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`editorMode`](EditorConfig.md#editormode) + +#### Defined in + +[models.ts:812](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L812) + +*** + +### editorTheme + +> **editorTheme**: `undefined` \| `string` \| [`EditorTheme`](../type-aliases/EditorTheme.md)[] + +Sets the [code editor](https://livecodes.io/docs/features/editor-settings) themes. + +See docs for [editor themes](https://livecodes.io/docs/configuration/configuration-object#editortheme) for details. + +#### Examples + +```ts +"vs" +``` + +```ts +"monaco:twilight, codemirror:one-dark" +``` + +```ts +["vs@light"] +``` + +```ts +["vs@light", "vs-dark@dark"] +``` + +```ts +["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"] +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`editorTheme`](EditorConfig.md#editortheme) + +#### Defined in + +[models.ts:748](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L748) + +*** + +### emmet + +> **emmet**: `boolean` + +Enables [Emmet](https://livecodes.io/docs/features/editor-settings#emmet). + +#### Default + +```ts +true +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`emmet`](EditorConfig.md#emmet) + +#### Defined in + +[models.ts:807](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L807) + +*** + +### enableAI + +> **enableAI**: `boolean` + +If `true`, [AI code assistant](https://livecodes.io/docs/features/ai) is enabled. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`enableAI`](EditorConfig.md#enableai) + +#### Defined in + +[models.ts:818](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L818) + +*** + +### foldRegions + +> **foldRegions**: `boolean` + +When set to `true`, regions marked by `#region` and `#endregion` comments are folded when the project is loaded. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`foldRegions`](EditorConfig.md#foldregions) + +#### Defined in + +[models.ts:795](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L795) + +*** + +### fontFamily + +> **fontFamily**: `undefined` \| `string` + +Sets the [code editor](https://livecodes.io/docs/features/editor-settings) font family. + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`fontFamily`](EditorConfig.md#fontfamily) + +#### Defined in + +[models.ts:753](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L753) + +*** + +### fontSize + +> **fontSize**: `undefined` \| `number` + +Sets the font size. + +If `undefined` (the default), the font size is set to 14 for the full app and 12 for [embeds](https://livecodes.io/docs/features/embeds). + +#### Default + +```ts +undefined +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`fontSize`](EditorConfig.md#fontsize) + +#### Defined in + +[models.ts:761](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L761) + +*** + +### formatOnsave + +> **formatOnsave**: `boolean` + +If `true`, the code is automatically [formatted](https://livecodes.io/docs/features/code-format) on saving the project. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:676](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L676) + +*** + +### layout + +> **layout**: `undefined` \| `"horizontal"` \| `"vertical"` \| `"responsive"` + +Sets the app layout to horizontal or vertical. +If set to `"responsive"` (the default) or `undefined`, +the layout is vertical in small screens when the playground height is larger than its width, +otherwise horizontal. + +#### Default + +```ts +"responsive" +``` + +#### Defined in + +[models.ts:685](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L685) + +*** + +### lineNumbers + +> **lineNumbers**: `boolean` \| `"relative"` + +Show line numbers in [code editor](https://livecodes.io/docs/features/editor-settings). + +#### Default + +```ts +true +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`lineNumbers`](EditorConfig.md#linenumbers) + +#### Defined in + +[models.ts:783](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L783) + +*** + +### recoverUnsaved + +> **recoverUnsaved**: `boolean` + +Enables [recovering last unsaved project](https://livecodes.io/docs/features/recover) when the app is reopened. + +#### Default + +```ts +true +``` + +#### Defined in + +[models.ts:691](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L691) + +*** + +### semicolons + +> **semicolons**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use semi-colons. + +#### Default + +```ts +true +``` + +#### Inherited from + +[`FormatterConfig`](FormatterConfig.md).[`semicolons`](FormatterConfig.md#semicolons) + +#### Defined in + +[models.ts:838](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L838) + +*** + +### showSpacing + +> **showSpacing**: `boolean` + +Enables [showing element spacing](https://livecodes.io/docs/features/result#show-spacings) in the result page. + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:697](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L697) + +*** + +### singleQuote + +> **singleQuote**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use single quotes instead of double quotes. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`FormatterConfig`](FormatterConfig.md).[`singleQuote`](FormatterConfig.md#singlequote) + +#### Defined in + +[models.ts:843](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L843) + +*** + +### tabSize + +> **tabSize**: `number` + +The number of spaces per indentation-level. + +Also used in [code formatting](https://livecodes.io/docs/features/code-format). + +#### Default + +```ts +2 +``` + +#### Inherited from + +[`FormatterConfig`](FormatterConfig.md).[`tabSize`](FormatterConfig.md#tabsize) + +#### Defined in + +[models.ts:777](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L777) + +*** + +### theme + +> **theme**: [`Theme`](../type-aliases/Theme.md) + +Sets the app [theme](https://livecodes.io/docs/features/themes) to light/dark mode. + +#### Default + +```ts +"dark" +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`theme`](EditorConfig.md#theme) + +#### Defined in + +[models.ts:728](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L728) + +*** + +### themeColor + +> **themeColor**: `undefined` \| `string` + +Sets the app theme color. +If `undefined`, it is set to `"hsl(214, 40%, 50%)"`. + +#### Default + +```ts +undefined +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`themeColor`](EditorConfig.md#themecolor) + +#### Defined in + +[models.ts:735](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L735) + +*** + +### trailingComma + +> **trailingComma**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use [trailing commas](https://prettier.io/docs/en/options.html#trailing-commas). + +#### Default + +```ts +true +``` + +#### Inherited from + +[`FormatterConfig`](FormatterConfig.md).[`trailingComma`](FormatterConfig.md#trailingcomma) + +#### Defined in + +[models.ts:849](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L849) + +*** + +### useTabs + +> **useTabs**: `boolean` + +If `true`, lines are indented with tabs instead of spaces. + +Also used in [code formatting](https://livecodes.io/docs/features/code-format). + +#### Default + +```ts +false +``` + +#### Inherited from + +[`FormatterConfig`](FormatterConfig.md).[`useTabs`](FormatterConfig.md#usetabs) + +#### Defined in + +[models.ts:769](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L769) + +*** + +### welcome + +> **welcome**: `boolean` + +If `true`, the [welcome screen](https://livecodes.io/docs/features/welcome) is displayed when the app loads. + +#### Defined in + +[models.ts:702](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L702) + +*** + +### wordWrap + +> **wordWrap**: `boolean` + +Enables word-wrap for long lines. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`EditorConfig`](EditorConfig.md).[`wordWrap`](EditorConfig.md#wordwrap) + +#### Defined in + +[models.ts:789](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L789) + +--- + + + +# Type Alias: APICommands + +> **APICommands**: `"setBroadcastToken"` \| `"showVersion"` + +## Defined in + +[models.ts:280](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L280) + +--- + + + +# Type Alias: AppLanguage + +> **AppLanguage**: `"auto"` \| `"ar"` \| `"de"` \| `"en"` \| `"es"` \| `"fr"` \| `"hi"` \| `"it"` \| `"ja"` \| `"pt"` \| `"ru"` \| `"ur"` \| `"zh-CN"` + +## Defined in + +[models.ts:1778](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1778) + +--- + + + +# Type Alias: CDN + +> **CDN**: `"jspm"` \| `"skypack"` \| `"jsdelivr"` \| `"fastly.jsdelivr"` \| `"gcore.jsdelivr"` \| `"testingcf.jsdelivr"` \| `"jsdelivr.b-cdn"` \| `"jsdelivr.gh"` \| `"fastly.jsdelivr.gh"` \| `"gcore.jsdelivr.gh"` \| `"testingcf.jsdelivr.gh"` \| `"jsdelivr.b-cdn.gh"` \| `"jsdelivr.esm"` \| `"fastly.jsdelivr.esm"` \| `"gcore.jsdelivr.esm"` \| `"testingcf.jsdelivr.esm"` \| `"jsdelivr.b-cdn.esm"` \| `"esm.run"` \| `"esm.sh"` \| `"esbuild"` \| `"bundle.run"` \| `"unpkg"` \| `"npmcdn"` \| `"statically"` + +## Defined in + +[models.ts:1861](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1861) + +--- + + + +# Type Alias: CodejarTheme + +> **CodejarTheme**: `"a11y-dark"` \| `"atom-dark"` \| `"base16-ateliersulphurpool-light"` \| `"catppuccin-latte"` \| `"catppuccin-frappe"` \| `"catppuccin-macchiato"` \| `"catppuccin-mocha"` \| `"cb"` \| `"coldark-cold"` \| `"coldark-dark"` \| `"coy"` \| `"coy-without-shadows"` \| `"darcula"` \| `"dark"` \| `"dracula"` \| `"duotone-dark"` \| `"duotone-earth"` \| `"duotone-forest"` \| `"duotone-light"` \| `"duotone-sea"` \| `"duotone-space"` \| `"funky"` \| `"ghcolors"` \| `"gruvbox-dark"` \| `"gruvbox-light"` \| `"holi-theme"` \| `"hopscotch"` \| `"laserwave"` \| `"lucario"` \| `"material-dark"` \| `"material-light"` \| `"material-oceanic"` \| `"monochrome"` \| `"monochrome-dark"` \| `"night-owl"` \| `"nord"` \| `"nord-2"` \| `"okaidia"` \| `"one-dark"` \| `"one-light"` \| `"pojoaque"` \| `"shades-of-purple"` \| `"solarized-dark-atom"` \| `"solarized-light"` \| `"synthwave84"` \| `"tomorrow"` \| `"twilight"` \| `"vs"` \| `"vsc-dark-plus"` \| `"xonokai"` \| `"z-touchs"` + +## Defined in + +[models.ts:1687](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1687) + +--- + + + +# Type Alias: CodemirrorTheme + +> **CodemirrorTheme**: `"amy"` \| `"aura"` \| `"ayu-light"` \| `"barf"` \| `"basic-light"` \| `"basic-dark"` \| `"bespin"` \| `"birds-of-paradise"` \| `"boys-and-girls"` \| `"catppuccin-latte"` \| `"catppuccin-frappe"` \| `"catppuccin-macchiato"` \| `"catppuccin-mocha"` \| `"clouds"` \| `"cm-light"` \| `"cobalt"` \| `"cool-glow"` \| `"dracula"` \| `"espresso"` \| `"github-dark"` \| `"github-light"` \| `"gruvbox-dark"` \| `"gruvbox-light"` \| `"material-dark"` \| `"material-light"` \| `"monochrome"` \| `"monochrome-dark"` \| `"noctis-lilac"` \| `"nord"` \| `"one-dark"` \| `"rose-pine-dawn"` \| `"smoothy"` \| `"solarized-light"` \| `"solarized-dark"` \| `"tokyo-night"` \| `"tokyo-night-day"` \| `"tokyo-night-storm"` \| `"tomorrow"` + +## Defined in + +[models.ts:1647](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1647) + +--- + + + +# Type Alias: CssPresetId + +> **CssPresetId**: `""` \| `"normalize.css"` \| `"reset-css"` + +## Defined in + +[models.ts:1269](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1269) + +--- + + + +# Type Alias: EditorId + +> **EditorId**: `"markup"` \| `"style"` \| `"script"` + +## Defined in + +[models.ts:1168](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1168) + +--- + + + +# Type Alias: EditorTheme + +> **EditorTheme**: [`MonacoTheme`](MonacoTheme.md) \| [`CodemirrorTheme`](CodemirrorTheme.md) \| [`CodejarTheme`](CodejarTheme.md) \| \`$\{MonacoTheme\}@$\{Theme\}\` \| \`$\{CodemirrorTheme\}@$\{Theme\}\` \| \`$\{CodejarTheme\}@$\{Theme\}\` \| \`monaco:$\{MonacoTheme\}\` \| \`codemirror:$\{CodemirrorTheme\}\` \| \`codejar:$\{CodejarTheme\}\` \| \`monaco:$\{MonacoTheme\}@$\{Theme\}\` \| \`codemirror:$\{CodemirrorTheme\}@$\{Theme\}\` \| \`codejar:$\{CodejarTheme\}@$\{Theme\}\` + +## Defined in + +[models.ts:1740](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1740) + +--- + + + +# Type Alias: MonacoTheme + +> **MonacoTheme**: `"active4d"` \| `"all-hallows-eve"` \| `"amy"` \| `"birds-of-paradise"` \| `"blackboard"` \| `"brilliance-black"` \| `"brilliance-dull"` \| `"catppuccin-latte"` \| `"catppuccin-frappe"` \| `"catppuccin-macchiato"` \| `"catppuccin-mocha"` \| `"chrome-devtools"` \| `"clouds-midnight"` \| `"clouds"` \| `"cobalt"` \| `"cobalt2"` \| `"custom-vs-light"` \| `"custom-vs-dark"` \| `"dawn"` \| `"dracula"` \| `"dreamweaver"` \| `"eiffel"` \| `"espresso-libre"` \| `"github"` \| `"github-dark"` \| `"github-light"` \| `"hc-black"` \| `"hc-light"` \| `"idle"` \| `"idlefingers"` \| `"iplastic"` \| `"katzenmilch"` \| `"krtheme"` \| `"kuroir"` \| `"lazy"` \| `"magicwb-amiga"` \| `"merbivore-soft"` \| `"merbivore"` \| `"monochrome"` \| `"monochrome-dark"` \| `"monokai"` \| `"monokai-bright"` \| `"monoindustrial"` \| `"night-owl"` \| `"nord"` \| `"oceanic-next"` \| `"pastels-on-dark"` \| `"slush-and-poppies"` \| `"solarized-dark"` \| `"solarized-light"` \| `"spacecadet"` \| `"sunburst"` \| `"textmate-mac-classic"` \| `"tomorrow"` \| `"tomorrow-night"` \| `"tomorrow-night-blue"` \| `"tomorrow-night-bright"` \| `"tomorrow-night-eighties"` \| `"twilight"` \| `"upstream-sunburst"` \| `"vibrant-ink"` \| `"vs"` \| `"vs-dark"` \| `"xcode-default"` \| `"zenburnesque"` + +## Defined in + +[models.ts:1580](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1580) + +--- + + + +# Type Alias: Processor + +> **Processor**: `"postcss"` \| `"postcssImportUrl"` \| `"tailwindcss"` \| `"windicss"` \| `"unocss"` \| `"tokencss"` \| `"lightningcss"` \| `"autoprefixer"` \| `"postcssPresetEnv"` \| `"cssmodules"` \| `"purgecss"` \| `"cssnano"` + +## Defined in + +[models.ts:1226](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1226) + +--- + + + +# Type Alias: TemplateName + +> **TemplateName**: `"blank"` \| `"javascript"` \| `"typescript"` \| `"react"` \| `"react-native"` \| `"vue2"` \| `"vue"` \| `"angular"` \| `"preact"` \| `"svelte"` \| `"solid"` \| `"lit"` \| `"stencil"` \| `"mdx"` \| `"astro"` \| `"riot"` \| `"malina"` \| `"jquery"` \| `"backbone"` \| `"knockout"` \| `"jest"` \| `"jest-react"` \| `"bootstrap"` \| `"tailwindcss"` \| `"shadcn-ui"` \| `"daisyui"` \| `"d3"` \| `"phaser"` \| `"coffeescript"` \| `"livescript"` \| `"civet"` \| `"clio"` \| `"imba"` \| `"rescript"` \| `"reason"` \| `"ocaml"` \| `"python"` \| `"pyodide"` \| `"python-wasm"` \| `"r"` \| `"ruby"` \| `"ruby-wasm"` \| `"go"` \| `"php"` \| `"php-wasm"` \| `"cpp"` \| `"clang"` \| `"cpp-wasm"` \| `"java"` \| `"csharp-wasm"` \| `"perl"` \| `"lua"` \| `"lua-wasm"` \| `"teal"` \| `"fennel"` \| `"julia"` \| `"scheme"` \| `"commonlisp"` \| `"clojurescript"` \| `"gleam"` \| `"tcl"` \| `"markdown"` \| `"assemblyscript"` \| `"wat"` \| `"sql"` \| `"postgresql"` \| `"prolog"` \| `"blockly"` \| `"diagrams"` + +## Defined in + +[models.ts:1376](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1376) + +--- + + + +# Type Alias: Theme + +> **Theme**: `"light"` \| `"dark"` + +## Defined in + +[models.ts:1926](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1926) + +--- + + + +# Type Alias: ToolsPaneStatus + +> **ToolsPaneStatus**: `"closed"` \| `"open"` \| `"full"` \| `"none"` \| `""` + +## Defined in + +[models.ts:1456](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1456) + +--- + + + +# Type Alias: WatchCode() + +> **WatchCode**: (`event`, `fn`) => `object` + +Called when the playground "content" is changed (see [`getCode`](https://livecodes.io/docs/sdk/js-ts#getcode) and [`getConfig`](https://livecodes.io/docs/sdk/js-ts#getcode)). + +This includes changes in: +- Code (in editors) +- Editor [languages](https://livecodes.io/docs/languages/) +- [CSS processors](https://livecodes.io/docs/features/css#css-processors) +- [External resources](https://livecodes.io/docs/features/external-resources) +- Project info (e.g. allows adding content in page head and attributes to `` element) +- [Custom settings](https://livecodes.io/docs/advanced/custom-settings) (e.g. allows changing [import maps](https://livecodes.io/docs/features/module-resolution#custom-module-resolution)) +- Project title +- [Test](https://livecodes.io/docs/features/tests) code + +## Parameters + +• **event**: `"code"` + +• **fn** + +## Returns + +`object` + +### remove() + +> **remove**: () => `void` + +#### Returns + +`void` + +## Defined in + +[models.ts:248](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L248) + +--- + + + +# Type Alias: WatchConsole() + +> **WatchConsole**: (`event`, `fn`) => `object` + +## Parameters + +• **event**: `"console"` + +• **fn** + +## Returns + +`object` + +### remove() + +> **remove**: () => `void` + +#### Returns + +`void` + +## Defined in + +[models.ts:253](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L253) + +--- + + + +# Type Alias: WatchDestroy() + +> **WatchDestroy**: (`event`, `fn`) => `object` + +## Parameters + +• **event**: `"destroy"` + +• **fn** + +## Returns + +`object` + +### remove() + +> **remove**: () => `void` + +#### Returns + +`void` + +## Defined in + +[models.ts:263](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L263) + +--- + + + +# Type Alias: WatchLoad() + +> **WatchLoad**: (`event`, `fn`) => `object` + +Called when the playground first loads. + +## Parameters + +• **event**: `"load"` + +• **fn** + +## Returns + +`object` + +### remove() + +> **remove**: () => `void` + +#### Returns + +`void` + +## Defined in + +[models.ts:225](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L225) + +--- + + + +# Type Alias: WatchReady() + +> **WatchReady**: (`event`, `fn`) => `object` + +Called when a new project is loaded (including when [imported](https://livecodes.io/docs/features/import)) and the playground is ready to run. + +## Parameters + +• **event**: `"ready"` + +• **fn** + +## Returns + +`object` + +### remove() + +> **remove**: () => `void` + +#### Returns + +`void` + +## Defined in + +[models.ts:230](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L230) + +--- + + + +# Type Alias: WatchTests() + +> **WatchTests**: (`event`, `fn`) => `object` + +## Parameters + +• **event**: `"tests"` + +• **fn** + +## Returns + +`object` + +### remove() + +> **remove**: () => `void` + +#### Returns + +`void` + +## Defined in + +[models.ts:258](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L258) + +--- + + + +# Interface: Code + +An object that contains the language, content and compiled code for each of the 3 [code editors](https://livecodes.io/docs/features/projects) +and the [result page](https://livecodes.io/docs/features/result) HTML. + +See [docs](https://livecodes.io/docs/api/interfaces/Code) for details. + +## Properties + +### markup + +> **markup**: `object` + +#### compiled + +> **compiled**: `string` + +#### content + +> **content**: `string` + +#### language + +> **language**: [`Language`](../type-aliases/Language.md) + +#### Defined in + +[models.ts:1908](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1908) + +*** + +### result + +> **result**: `string` + +#### Defined in + +[models.ts:1923](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1923) + +*** + +### script + +> **script**: `object` + +#### compiled + +> **compiled**: `string` + +#### content + +> **content**: `string` + +#### language + +> **language**: [`Language`](../type-aliases/Language.md) + +#### Defined in + +[models.ts:1918](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1918) + +*** + +### style + +> **style**: `object` + +#### compiled + +> **compiled**: `string` + +#### content + +> **content**: `string` + +#### language + +> **language**: [`Language`](../type-aliases/Language.md) + +#### Defined in + +[models.ts:1913](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L1913) + +--- + + + +# Interface: Config + +The playground [configuration object](https://livecodes.io/docs/configuration/configuration-object). + +It is an object that holds the configuration and state of the playground. + +See [docs](https://livecodes.io/docs/configuration/configuration-object) for details. + +## Extends + +- [`ContentConfig`](../internal/interfaces/ContentConfig.md).[`AppConfig`](../internal/interfaces/AppConfig.md).[`UserConfig`](../internal/interfaces/UserConfig.md) + +## Properties + +### activeEditor + +> **activeEditor**: `undefined` \| [`EditorId`](../internal/type-aliases/EditorId.md) + +Selects the active editor to show. + +Defaults to the last used editor for user, otherwise `"markup"` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`activeEditor`](../internal/interfaces/ContentConfig.md#activeeditor) + +#### Defined in + +[models.ts:455](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L455) + +*** + +### allowLangChange + +> **allowLangChange**: `boolean` + +If `false`, the UI will not show the menu that allows changing editor language. + +#### Default + +```ts +true +``` + +#### Inherited from + +[`AppConfig`](../internal/interfaces/AppConfig.md).[`allowLangChange`](../internal/interfaces/AppConfig.md#allowlangchange) + +#### Defined in + +[models.ts:603](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L603) + +*** + +### appLanguage + +> **appLanguage**: `undefined` \| [`AppLanguage`](../internal/type-aliases/AppLanguage.md) + +Sets the app UI language used. + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`appLanguage`](../internal/interfaces/UserConfig.md#applanguage) + +#### Defined in + +[models.ts:707](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L707) + +*** + +### autosave + +> **autosave**: `boolean` + +If `true`, the project is automatically saved on code change, +after time [delay](https://livecodes.io/docs/configuration/configuration-object#delay). + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`autosave`](../internal/interfaces/UserConfig.md#autosave) + +#### Defined in + +[models.ts:656](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L656) + +*** + +### autotest + +> **autotest**: `boolean` + +If `true`, the project is watched for code changes which trigger tests to auto-run. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`autotest`](../internal/interfaces/UserConfig.md#autotest) + +#### Defined in + +[models.ts:662](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L662) + +*** + +### autoupdate + +> **autoupdate**: `boolean` + +If `true`, the result page is automatically updated on code change, +after time [delay](https://livecodes.io/docs/configuration/configuration-object#delay). + +#### Default + +```ts +true +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`autoupdate`](../internal/interfaces/UserConfig.md#autoupdate) + +#### Defined in + +[models.ts:649](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L649) + +*** + +### closeBrackets + +> **closeBrackets**: `boolean` + +Use auto-complete to close brackets and quotes. + +#### Default + +```ts +true +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`closeBrackets`](../internal/interfaces/UserConfig.md#closebrackets) + +#### Defined in + +[models.ts:801](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L801) + +*** + +### cssPreset + +> **cssPreset**: [`CssPresetId`](../internal/type-aliases/CssPresetId.md) + +[CSS Preset](https://livecodes.io/docs/features/external-resources#css-presets) to use. + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`cssPreset`](../internal/interfaces/ContentConfig.md#csspreset) + +#### Defined in + +[models.ts:502](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L502) + +*** + +### customSettings + +> **customSettings**: `object` + +Defines [custom settings](https://livecodes.io/docs/advanced/custom-settings) for the current project. + +#### adoc + +> **adoc**: `any` + +#### app.svelte + +> **svelte**: `any` + +#### app.vue + +> **vue**: `any` + +#### art + +> **art**: `any` + +#### art-template + +> **art-template**: `any` + +#### as + +> **as**: `any` + +#### asc + +> **asc**: `any` + +#### asciidoc + +> **asciidoc**: `any` + +#### assemblyscript + +> **assemblyscript**: `any` + +#### astro + +> **astro**: `any` + +#### autoprefixer + +> **autoprefixer**: `any` + +#### babel + +> **babel**: `any` + +#### bb + +> **bb**: `any` + +#### bbcode + +> **bbcode**: `any` + +#### Binary + +> **Binary**: `any` + +#### blockly + +> **blockly**: `any` + +#### blockly.xml + +> **xml**: `any` + +#### c + +> **c**: `any` + +#### C + +> **C**: `any` + +#### c++ + +> **c++**: `any` + +#### civet + +> **civet**: `any` + +#### clang + +> **clang**: `any` + +#### clang.cpp + +> **cpp**: `any` + +#### clio + +> **clio**: `any` + +#### clj + +> **clj**: `any` + +#### cljc + +> **cljc**: `any` + +#### cljs + +> **cljs**: `any` + +#### clojure + +> **clojure**: `any` + +#### clojurescript + +> **clojurescript**: `any` + +#### coffee + +> **coffee**: `any` + +#### coffeescript + +> **coffeescript**: `any` + +#### common-lisp + +> **common-lisp**: `any` + +#### commonlisp + +> **commonlisp**: `any` + +#### convertCommonjs? + +> `optional` **convertCommonjs**: `boolean` + +#### cp + +> **cp**: `any` + +#### cpp + +> **cpp**: `any` + +#### cpp-wasm + +> **cpp-wasm**: `any` + +#### cppm + +> **cppm**: `any` + +#### cppwasm + +> **cppwasm**: `any` + +#### cs + +> **cs**: `any` + +#### cs-wasm + +> **cs-wasm**: `any` + +#### csharp + +> **csharp**: `any` + +#### csharp-wasm + +> **csharp-wasm**: `any` + +#### css + +> **css**: `any` + +#### cssmodules + +> **cssmodules**: `any` + +#### cssnano + +> **cssnano**: `any` + +#### cwasm + +> **cwasm**: `any` + +#### cxx + +> **cxx**: `any` + +#### defaultCDN? + +> `optional` **defaultCDN**: [`CDN`](../internal/type-aliases/CDN.md) + +#### diagram + +> **diagram**: `any` + +#### diagrams + +> **diagrams**: `any` + +#### dot + +> **dot**: `any` + +#### edn + +> **edn**: `any` + +#### ejs + +> **ejs**: `any` + +#### es + +> **es**: `any` + +#### eta + +> **eta**: `any` + +#### fennel + +> **fennel**: `any` + +#### flow + +> **flow**: `any` + +#### fnl + +> **fnl**: `any` + +#### gleam + +> **gleam**: `any` + +#### go + +> **go**: `any` + +#### golang + +> **golang**: `any` + +#### graph + +> **graph**: `any` + +#### h + +> **h**: `any` + +#### haml + +> **haml**: `any` + +#### handlebars + +> **handlebars**: `any` + +#### hbs + +> **hbs**: `any` + +#### hpp + +> **hpp**: `any` + +#### htm + +> **htm**: `any` + +#### html + +> **html**: `any` + +#### ii + +> **ii**: `any` + +#### imba + +> **imba**: `any` + +#### imports? + +> `optional` **imports**: `Record`\<`string`, `string`\> + +#### ixx + +> **ixx**: `any` + +#### jade + +> **jade**: `any` + +#### java + +> **java**: `any` + +#### javascript + +> **javascript**: `any` + +#### jinja + +> **jinja**: `any` + +#### jl + +> **jl**: `any` + +#### js + +> **js**: `any` + +#### json + +> **json**: `any` + +#### jsx + +> **jsx**: `any` + +#### julia + +> **julia**: `any` + +#### less + +> **less**: `any` + +#### lightningcss + +> **lightningcss**: `any` + +#### liquid + +> **liquid**: `any` + +#### liquidjs + +> **liquidjs**: `any` + +#### lisp + +> **lisp**: `any` + +#### livescript + +> **livescript**: `any` + +#### ls + +> **ls**: `any` + +#### lua + +> **lua**: `any` + +#### lua-wasm + +> **lua-wasm**: `any` + +#### luawasm + +> **luawasm**: `any` + +#### malina + +> **malina**: `any` + +#### malinajs + +> **malinajs**: `any` + +#### mapImports? + +> `optional` **mapImports**: `boolean` + +#### markdown + +> **markdown**: `any` + +#### md + +> **md**: `any` + +#### mdown + +> **mdown**: `any` + +#### mdx + +> **mdx**: `any` + +#### mjml + +> **mjml**: `any` + +#### mkdn + +> **mkdn**: `any` + +#### ml + +> **ml**: `any` + +#### mli + +> **mli**: `any` + +#### mustache + +> **mustache**: `any` + +#### njk + +> **njk**: `any` + +#### nunjucks + +> **nunjucks**: `any` + +#### ocaml + +> **ocaml**: `any` + +#### perl + +> **perl**: `any` + +#### pg + +> **pg**: `any` + +#### pg.sql + +> **sql**: `any` + +#### pglite + +> **pglite**: `any` + +#### pglite.sql + +> **sql**: `any` + +#### pgsql + +> **pgsql**: `any` + +#### pgsql.sql + +> **sql**: `any` + +#### php + +> **php**: `any` + +#### php-wasm + +> **php-wasm**: `any` + +#### phpwasm + +> **phpwasm**: `any` + +#### pintora + +> **pintora**: `any` + +#### pl + +> **pl**: `any` + +#### plt + +> **plt**: `any` + +#### pm + +> **pm**: `any` + +#### postcss + +> **postcss**: `any` + +#### postcssImportUrl + +> **postcssImportUrl**: `any` + +#### postcssPresetEnv + +> **postcssPresetEnv**: `any` + +#### postgre.sql + +> **sql**: `any` + +#### postgres + +> **postgres**: `any` + +#### postgresql + +> **postgresql**: `any` + +#### postgresql.sql + +> **sql**: `any` + +#### prolog + +> **prolog**: `any` + +#### prolog.pl + +> **pl**: `any` + +#### pug + +> **pug**: `any` + +#### purgecss + +> **purgecss**: `any` + +#### py + +> **py**: `any` + +#### py-wasm + +> **py-wasm**: `any` + +#### py3 + +> **py3**: `any` + +#### pyodide + +> **pyodide**: `any` + +#### python + +> **python**: `any` + +#### python-wasm + +> **python-wasm**: `any` + +#### pythonwasm + +> **pythonwasm**: `any` + +#### pywasm + +> **pywasm**: `any` + +#### r + +> **r**: `any` + +#### r-wasm + +> **r-wasm**: `any` + +#### rb + +> **rb**: `any` + +#### re + +> **re**: `any` + +#### react + +> **react**: `any` + +#### react-jsx + +> **react-jsx**: `any` + +#### react-native + +> **react-native**: `any` + +#### react-native-tsx + +> **react-native-tsx**: `any` + +#### react-native.jsx + +> **jsx**: `any` + +#### react-native.tsx + +> **tsx**: `any` + +#### react-tsx + +> **react-tsx**: `any` + +#### react.jsx + +> **jsx**: `any` + +#### react.tsx + +> **tsx**: `any` + +#### reason + +> **reason**: `any` + +#### rei + +> **rei**: `any` + +#### res + +> **res**: `any` + +#### rescript + +> **rescript**: `any` + +#### resi + +> **resi**: `any` + +#### rich + +> **rich**: `any` + +#### richtext + +> **richtext**: `any` + +#### riot + +> **riot**: `any` + +#### riotjs + +> **riotjs**: `any` + +#### rlang + +> **rlang**: `any` + +#### rstats + +> **rstats**: `any` + +#### rte + +> **rte**: `any` + +#### rte.html + +> **html**: `any` + +#### ruby + +> **ruby**: `any` + +#### ruby-wasm + +> **ruby-wasm**: `any` + +#### rubywasm + +> **rubywasm**: `any` + +#### sass + +> **sass**: `any` + +#### scheme + +> **scheme**: `any` + +#### scm + +> **scm**: `any` + +#### scriptType? + +> `optional` **scriptType**: `""` \| `"module"` \| `"text/liquid"` \| `"text/python"` \| `"text/r"` \| `"text/ruby-wasm"` \| `"text/x-uniter-php"` \| `"text/php-wasm"` \| `"text/cpp"` \| `"text/java"` \| `"text/csharp-wasm"` \| `"text/perl"` \| `"text/julia"` \| `"text/biwascheme"` \| `"text/commonlisp"` \| `"text/tcl"` \| `"text/prolog"` \| `"application/json"` \| `"application/lua"` \| `"text/fennel"` \| `"application/wasm-uint8"` \| `"application/javascript"` \| `"application/ecmascript"` \| `"text/javascript"` \| `"text/ecmascript"` + +#### scss + +> **scss**: `any` + +#### solid + +> **solid**: `any` + +#### solid.jsx + +> **jsx**: `any` + +#### solid.tsx + +> **tsx**: `any` + +#### sql + +> **sql**: `any` + +#### sqlite + +> **sqlite**: `any` + +#### sqlite3 + +> **sqlite3**: `any` + +#### stencil + +> **stencil**: `any` + +#### stencil.tsx + +> **tsx**: `any` + +#### styl + +> **styl**: `any` + +#### stylis + +> **stylis**: `any` + +#### stylus + +> **stylus**: `any` + +#### sucrase + +> **sucrase**: `any` + +#### svelte + +> **svelte**: `any` + +#### svelte-app + +> **svelte-app**: `any` + +#### tailwindcss + +> **tailwindcss**: `any` + +#### tcl + +> **tcl**: `any` + +#### teal + +> **teal**: `any` + +#### template? + +> `optional` **template**: `object` + +#### template.data? + +> `optional` **data**: `any` + +#### template.prerender? + +> `optional` **prerender**: `boolean` + +#### tl + +> **tl**: `any` + +#### tokencss + +> **tokencss**: `any` + +#### ts + +> **ts**: `any` + +#### tsx + +> **tsx**: `any` + +#### twig + +> **twig**: `any` + +#### types? + +> `optional` **types**: [`Types`](../internal/interfaces/Types.md) + +#### typescript + +> **typescript**: `any` + +#### unocss + +> **unocss**: `any` + +#### vento + +> **vento**: `any` + +#### vto + +> **vto**: `any` + +#### vue + +> **vue**: `any` + +#### vue-app + +> **vue-app**: `any` + +#### vue2 + +> **vue2**: `any` + +#### vue3 + +> **vue3**: `any` + +#### wasm + +> **wasm**: `any` + +#### wasm.cpp + +> **cpp**: `any` + +#### wasm.cs + +> **cs**: `any` + +#### wasm.lua + +> **lua**: `any` + +#### wasm.php + +> **php**: `any` + +#### wasm.py + +> **py**: `any` + +#### wasm.rb + +> **rb**: `any` + +#### wast + +> **wast**: `any` + +#### wat + +> **wat**: `any` + +#### webassembly + +> **webassembly**: `any` + +#### windicss + +> **windicss**: `any` + +#### xht + +> **xht**: `any` + +#### xml + +> **xml**: `any` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`customSettings`](../internal/interfaces/ContentConfig.md#customsettings) + +#### Defined in + +[models.ts:514](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L514) + +*** + +### delay + +> **delay**: `number` + +Time delay (in milliseconds) following code change, +after which the result page is updated (if [`autoupdate`](https://livecodes.io/docs/configuration/configuration-object#autoupdate) is `true`) +and/or the project is saved (if [`autosave`](https://livecodes.io/docs/configuration/configuration-object#autosave) is `true`). + +#### Default + +```ts +1500 +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`delay`](../internal/interfaces/UserConfig.md#delay) + +#### Defined in + +[models.ts:670](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L670) + +*** + +### description + +> **description**: `string` + +Project description. Used in [project](https://livecodes.io/docs/features/projects) search +and [result page](https://livecodes.io/docs/features/result) description meta tag. + +#### Default + +```ts +"" +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`description`](../internal/interfaces/ContentConfig.md#description) + +#### Defined in + +[models.ts:425](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L425) + +*** + +### editor + +> **editor**: `undefined` \| `"auto"` \| `"monaco"` \| `"codemirror"` \| `"codejar"` + +Selects the [code editor](https://livecodes.io/docs/features/editor-settings#code-editor) to use. + +If `undefined` (the default), Monaco editor is used on desktop, +CodeMirror is used on mobile and in `simple` mode, +while CodeJar is used in `codeblock` mode, in `lite` mode and in `readonly` playgrounds. + +If set to `auto`, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings. + +#### Default + +```ts +undefined +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`editor`](../internal/interfaces/UserConfig.md#editor) + +#### Defined in + +[models.ts:722](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L722) + +*** + +### editorMode + +> **editorMode**: `undefined` \| `"vim"` \| `"emacs"` + +Sets [editor mode](https://livecodes.io/docs/features/editor-settings#editor-modes). + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`editorMode`](../internal/interfaces/UserConfig.md#editormode) + +#### Defined in + +[models.ts:812](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L812) + +*** + +### editorTheme + +> **editorTheme**: `undefined` \| `string` \| [`EditorTheme`](../internal/type-aliases/EditorTheme.md)[] + +Sets the [code editor](https://livecodes.io/docs/features/editor-settings) themes. + +See docs for [editor themes](https://livecodes.io/docs/configuration/configuration-object#editortheme) for details. + +#### Examples + +```ts +"vs" +``` + +```ts +"monaco:twilight, codemirror:one-dark" +``` + +```ts +["vs@light"] +``` + +```ts +["vs@light", "vs-dark@dark"] +``` + +```ts +["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"] +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`editorTheme`](../internal/interfaces/UserConfig.md#editortheme) + +#### Defined in + +[models.ts:748](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L748) + +*** + +### emmet + +> **emmet**: `boolean` + +Enables [Emmet](https://livecodes.io/docs/features/editor-settings#emmet). + +#### Default + +```ts +true +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`emmet`](../internal/interfaces/UserConfig.md#emmet) + +#### Defined in + +[models.ts:807](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L807) + +*** + +### enableAI + +> **enableAI**: `boolean` + +If `true`, [AI code assistant](https://livecodes.io/docs/features/ai) is enabled. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`enableAI`](../internal/interfaces/UserConfig.md#enableai) + +#### Defined in + +[models.ts:818](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L818) + +*** + +### foldRegions + +> **foldRegions**: `boolean` + +When set to `true`, regions marked by `#region` and `#endregion` comments are folded when the project is loaded. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`foldRegions`](../internal/interfaces/UserConfig.md#foldregions) + +#### Defined in + +[models.ts:795](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L795) + +*** + +### fontFamily + +> **fontFamily**: `undefined` \| `string` + +Sets the [code editor](https://livecodes.io/docs/features/editor-settings) font family. + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`fontFamily`](../internal/interfaces/UserConfig.md#fontfamily) + +#### Defined in + +[models.ts:753](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L753) + +*** + +### fontSize + +> **fontSize**: `undefined` \| `number` + +Sets the font size. + +If `undefined` (the default), the font size is set to 14 for the full app and 12 for [embeds](https://livecodes.io/docs/features/embeds). + +#### Default + +```ts +undefined +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`fontSize`](../internal/interfaces/UserConfig.md#fontsize) + +#### Defined in + +[models.ts:761](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L761) + +*** + +### formatOnsave + +> **formatOnsave**: `boolean` + +If `true`, the code is automatically [formatted](https://livecodes.io/docs/features/code-format) on saving the project. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`formatOnsave`](../internal/interfaces/UserConfig.md#formatonsave) + +#### Defined in + +[models.ts:676](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L676) + +*** + +### head + +> **head**: `string` + +Content added to the [result page](https://livecodes.io/docs/features/result) `` element. + +#### Default + +```ts +'\n' +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`head`](../internal/interfaces/ContentConfig.md#head) + +#### Defined in + +[models.ts:431](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L431) + +*** + +### htmlAttrs + +> **htmlAttrs**: `string` \| `Record`\<`string`, `string`\> + +Attributes added to the [result page](https://livecodes.io/docs/features/result) `` element. +It can be an object or a string. + +#### Example + +```ts +{ lang: "en", class: "dark" } +'lang="en" class="dark"' +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`htmlAttrs`](../internal/interfaces/ContentConfig.md#htmlattrs) + +#### Defined in + +[models.ts:440](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L440) + +*** + +### imports + +> **imports**: `object` + +Allows specifying custom [import maps](https://github.com/WICG/import-maps) for [module imports](https://livecodes.io/docs/features/module-resolution#custom-module-resolution). + +**Example** + +Setting `imports` like this: +```js +"imports": { + "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js" +} +``` +results in the following import map: +```html + +``` +See docs for [Imports](https://livecodes.io/docs/configuration/configuration-object#imports) +and [Custom Module Resolution](https://livecodes.io/docs/features/module-resolution/#custom-module-resolution) + +#### Index Signature + + \[`key`: `string`\]: `string` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`imports`](../internal/interfaces/ContentConfig.md#imports-1) + +#### Defined in + +[models.ts:540](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L540) + +*** + +### languages + +> **languages**: `undefined` \| (`"reason"` \| `"stylus"` \| `"r"` \| `"html"` \| `"ruby"` \| `"rb"` \| `"json"` \| `"teal"` \| `"solid"` \| `"flow"` \| `"dot"` \| `"as"` \| `"go"` \| `"htm"` \| `"markdown"` \| `"md"` \| `"mdown"` \| `"mkdn"` \| `"mdx"` \| `"astro"` \| `"pug"` \| `"jade"` \| `"haml"` \| `"asciidoc"` \| `"adoc"` \| `"asc"` \| `"mustache"` \| `"handlebars"` \| `"hbs"` \| `"ejs"` \| `"eta"` \| `"nunjucks"` \| `"njk"` \| `"liquid"` \| `"liquidjs"` \| `"twig"` \| `"vento"` \| `"vto"` \| `"art-template"` \| `"art"` \| `"jinja"` \| `"bbcode"` \| `"bb"` \| `"mjml"` \| `"diagrams"` \| `"diagram"` \| `"graph"` \| `"plt"` \| `"richtext"` \| `"rte"` \| `"rich"` \| `"rte.html"` \| `"css"` \| `"scss"` \| `"sass"` \| `"less"` \| `"styl"` \| `"stylis"` \| `"postcss"` \| `"javascript"` \| `"js"` \| `"babel"` \| `"es"` \| `"sucrase"` \| `"typescript"` \| `"ts"` \| `"jsx"` \| `"tsx"` \| `"react"` \| `"react-jsx"` \| `"react.jsx"` \| `"react-tsx"` \| `"react.tsx"` \| `"react-native"` \| `"react-native.jsx"` \| `"react-native-tsx"` \| `"react-native.tsx"` \| `"vue"` \| `"vue3"` \| `"vue2"` \| `"vue-app"` \| `"app.vue"` \| `"svelte"` \| `"svelte-app"` \| `"app.svelte"` \| `"stencil"` \| `"stencil.tsx"` \| `"solid.jsx"` \| `"solid.tsx"` \| `"riot"` \| `"riotjs"` \| `"malina"` \| `"malinajs"` \| `"xht"` \| `"coffeescript"` \| `"coffee"` \| `"livescript"` \| `"ls"` \| `"civet"` \| `"clio"` \| `"imba"` \| `"assemblyscript"` \| `"python"` \| `"py"` \| `"pyodide"` \| `"python-wasm"` \| `"py-wasm"` \| `"pythonwasm"` \| `"pywasm"` \| `"py3"` \| `"wasm.py"` \| `"rlang"` \| `"rstats"` \| `"r-wasm"` \| `"ruby-wasm"` \| `"wasm.rb"` \| `"rubywasm"` \| `"golang"` \| `"php"` \| `"php-wasm"` \| `"phpwasm"` \| `"wasm.php"` \| `"cpp"` \| `"c"` \| `"C"` \| `"cp"` \| `"cxx"` \| `"c++"` \| `"cppm"` \| `"ixx"` \| `"ii"` \| `"hpp"` \| `"h"` \| `"cpp-wasm"` \| `"cppwasm"` \| `"cwasm"` \| `"wasm.cpp"` \| `"clang"` \| `"clang.cpp"` \| `"java"` \| `"csharp"` \| `"csharp-wasm"` \| `"cs"` \| `"cs-wasm"` \| `"wasm.cs"` \| `"perl"` \| `"pl"` \| `"pm"` \| `"lua"` \| `"lua-wasm"` \| `"luawasm"` \| `"wasm.lua"` \| `"tl"` \| `"fennel"` \| `"fnl"` \| `"julia"` \| `"jl"` \| `"scheme"` \| `"scm"` \| `"commonlisp"` \| `"common-lisp"` \| `"lisp"` \| `"clojurescript"` \| `"clojure"` \| `"cljs"` \| `"clj"` \| `"cljc"` \| `"edn"` \| `"gleam"` \| `"rescript"` \| `"res"` \| `"resi"` \| `"re"` \| `"rei"` \| `"ocaml"` \| `"ml"` \| `"mli"` \| `"tcl"` \| `"wat"` \| `"wast"` \| `"webassembly"` \| `"wasm"` \| `"Binary"` \| `"sql"` \| `"sqlite"` \| `"sqlite3"` \| `"pg.sql"` \| `"pgsql.sql"` \| `"pgsql"` \| `"pg"` \| `"pglite"` \| `"pglite.sql"` \| `"postgresql"` \| `"postgres"` \| `"postgre.sql"` \| `"postgresql.sql"` \| `"prolog.pl"` \| `"prolog"` \| `"blockly"` \| `"blockly.xml"` \| `"xml"` \| `"pintora"` \| `"tailwindcss"` \| `"postcssImportUrl"` \| `"windicss"` \| `"unocss"` \| `"tokencss"` \| `"lightningcss"` \| `"autoprefixer"` \| `"postcssPresetEnv"` \| `"cssmodules"` \| `"purgecss"` \| `"cssnano"`)[] + +List of enabled languages. + +Defaults to all supported languages in full app and only current editor languages in [embeds](https://livecodes.io/docs/features/embeds). + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`languages`](../internal/interfaces/ContentConfig.md#languages) + +#### Defined in + +[models.ts:462](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L462) + +*** + +### layout + +> **layout**: `undefined` \| `"horizontal"` \| `"vertical"` \| `"responsive"` + +Sets the app layout to horizontal or vertical. +If set to `"responsive"` (the default) or `undefined`, +the layout is vertical in small screens when the playground height is larger than its width, +otherwise horizontal. + +#### Default + +```ts +"responsive" +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`layout`](../internal/interfaces/UserConfig.md#layout) + +#### Defined in + +[models.ts:685](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L685) + +*** + +### lineNumbers + +> **lineNumbers**: `boolean` \| `"relative"` + +Show line numbers in [code editor](https://livecodes.io/docs/features/editor-settings). + +#### Default + +```ts +true +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`lineNumbers`](../internal/interfaces/UserConfig.md#linenumbers) + +#### Defined in + +[models.ts:783](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L783) + +*** + +### markup + +> **markup**: `object` + +An object that configures the language and content of the markup editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +#### content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### language + +> **language**: [`Language`](../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### position? + +> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### Default + +```ts +{ language: "html", content: "" } +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`markup`](../internal/interfaces/ContentConfig.md#markup) + +#### Defined in + +[models.ts:470](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L470) + +*** + +### mode + +> **mode**: `"focus"` \| `"full"` \| `"result"` \| `"editor"` \| `"lite"` \| `"simple"` \| `"codeblock"` + +Sets the [display mode](https://livecodes.io/docs/features/display-modes). + +#### Default + +```ts +"full" +``` + +#### Inherited from + +[`AppConfig`](../internal/interfaces/AppConfig.md).[`mode`](../internal/interfaces/AppConfig.md#mode) + +#### Defined in + +[models.ts:615](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L615) + +*** + +### processors + +> **processors**: [`Processor`](../internal/type-aliases/Processor.md)[] + +List of enabled [CSS processors](https://livecodes.io/docs/features/css/#css-processors). + +For the list of available processors, see [Processor](https://livecodes.io/docs/api/internal/type-aliases/Processor) + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`processors`](../internal/interfaces/ContentConfig.md#processors) + +#### Defined in + +[models.ts:509](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L509) + +*** + +### readonly + +> **readonly**: `boolean` + +If `true`, editors are loaded in read-only mode, where the user is not allowed to change the code. + +By default, when readonly is set to true, the light-weight code editor [CodeJar](https://livecodes.io/docs/features/editor-settings#code-editor) is used. +If you wish to use another editor, set the [editor](https://livecodes.io/docs/configuration/configuration-object#editor) property. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`AppConfig`](../internal/interfaces/AppConfig.md).[`readonly`](../internal/interfaces/AppConfig.md#readonly) + +#### Defined in + +[models.ts:597](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L597) + +*** + +### recoverUnsaved + +> **recoverUnsaved**: `boolean` + +Enables [recovering last unsaved project](https://livecodes.io/docs/features/recover) when the app is reopened. + +#### Default + +```ts +true +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`recoverUnsaved`](../internal/interfaces/UserConfig.md#recoverunsaved) + +#### Defined in + +[models.ts:691](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L691) + +*** + +### script + +> **script**: `object` + +An object that configures the language and content of the script editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +#### content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### language + +> **language**: [`Language`](../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### position? + +> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### Default + +```ts +{ language: "javascript", content: "" } +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`script`](../internal/interfaces/ContentConfig.md#script) + +#### Defined in + +[models.ts:486](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L486) + +*** + +### scripts + +> **scripts**: `string`[] + +List of URLs for [external scripts](https://livecodes.io/docs/features/external-resources) to add to the [result page](https://livecodes.io/docs/features/result). + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`scripts`](../internal/interfaces/ContentConfig.md#scripts) + +#### Defined in + +[models.ts:496](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L496) + +*** + +### semicolons + +> **semicolons**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use semi-colons. + +#### Default + +```ts +true +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`semicolons`](../internal/interfaces/UserConfig.md#semicolons) + +#### Defined in + +[models.ts:838](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L838) + +*** + +### showSpacing + +> **showSpacing**: `boolean` + +Enables [showing element spacing](https://livecodes.io/docs/features/result#show-spacings) in the result page. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`showSpacing`](../internal/interfaces/UserConfig.md#showspacing) + +#### Defined in + +[models.ts:697](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L697) + +*** + +### singleQuote + +> **singleQuote**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use single quotes instead of double quotes. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`singleQuote`](../internal/interfaces/UserConfig.md#singlequote) + +#### Defined in + +[models.ts:843](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L843) + +*** + +### style + +> **style**: `object` + +An object that configures the language and content of the style editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +#### content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### language + +> **language**: [`Language`](../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### position? + +> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### Default + +```ts +{ language: "css", content: "" } +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`style`](../internal/interfaces/ContentConfig.md#style) + +#### Defined in + +[models.ts:478](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L478) + +*** + +### stylesheets + +> **stylesheets**: `string`[] + +List of URLs for [external stylesheets](https://livecodes.io/docs/features/external-resources) to add to the [result page](https://livecodes.io/docs/features/result). + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`stylesheets`](../internal/interfaces/ContentConfig.md#stylesheets) + +#### Defined in + +[models.ts:491](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L491) + +*** + +### tabSize + +> **tabSize**: `number` + +The number of spaces per indentation-level. + +Also used in [code formatting](https://livecodes.io/docs/features/code-format). + +#### Default + +```ts +2 +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`tabSize`](../internal/interfaces/UserConfig.md#tabsize) + +#### Defined in + +[models.ts:777](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L777) + +*** + +### tags + +> **tags**: `string`[] + +Project tags. +Used in [project](https://livecodes.io/docs/features/projects) filter and search. + +#### Default + +```ts +[] +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`tags`](../internal/interfaces/ContentConfig.md#tags) + +#### Defined in + +[models.ts:447](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L447) + +*** + +### tests + +> **tests**: `undefined` \| `object` + +Configures the [language](https://livecodes.io/docs/features/tests#supported-languages) +and content of [tests](https://livecodes.io/docs/features/tests). + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`tests`](../internal/interfaces/ContentConfig.md#tests) + +#### Defined in + +[models.ts:576](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L576) + +*** + +### theme + +> **theme**: [`Theme`](../internal/type-aliases/Theme.md) + +Sets the app [theme](https://livecodes.io/docs/features/themes) to light/dark mode. + +#### Default + +```ts +"dark" +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`theme`](../internal/interfaces/UserConfig.md#theme) + +#### Defined in + +[models.ts:728](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L728) + +*** + +### themeColor + +> **themeColor**: `undefined` \| `string` + +Sets the app theme color. +If `undefined`, it is set to `"hsl(214, 40%, 50%)"`. + +#### Default + +```ts +undefined +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`themeColor`](../internal/interfaces/UserConfig.md#themecolor) + +#### Defined in + +[models.ts:735](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L735) + +*** + +### title + +> **title**: `string` + +Project title. +This is used as [result page](https://livecodes.io/docs/features/result) title and title meta tag. +Also used in project search. + +#### Default + +```ts +"Untitled Project" +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`title`](../internal/interfaces/ContentConfig.md#title-3) + +#### Defined in + +[models.ts:418](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L418) + +*** + +### tools + +> **tools**: `Partial`\<`object`\> + +Sets enabled and active tools and status of [tools pane](https://livecodes.io/docs/features/tools-pane). + +#### Type declaration + +##### active + +> **active**: `""` \| `"console"` \| `"compiled"` \| `"tests"` + +##### enabled + +> **enabled**: `"all"` \| (`"console"` \| `"compiled"` \| `"tests"`)[] + +##### status + +> **status**: [`ToolsPaneStatus`](../internal/type-aliases/ToolsPaneStatus.md) + +#### Default + +```ts +{ enabled: "all", active: "", status: "" } +``` + +#### Example + +```js +{ + "tools": { + "enabled": ["console", "compiled"], + "active": "console", + "status": "open" + } +} +``` + +#### Inherited from + +[`AppConfig`](../internal/interfaces/AppConfig.md).[`tools`](../internal/interfaces/AppConfig.md#tools) + +#### Defined in + +[models.ts:631](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L631) + +*** + +### trailingComma + +> **trailingComma**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use [trailing commas](https://prettier.io/docs/en/options.html#trailing-commas). + +#### Default + +```ts +true +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`trailingComma`](../internal/interfaces/UserConfig.md#trailingcomma) + +#### Defined in + +[models.ts:849](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L849) + +*** + +### types + +> **types**: `object` + +Allows providing custom TypeScript type declarations for better [editor intellisense](https://livecodes.io/docs/features/intellisense). + +It is an object where each key represents module name and value represents the types. + +See docs for [Types](https://livecodes.io/docs/configuration/configuration-object#types) +and [Custom Types](https://livecodes.io/docs/features/intellisense#custom-types) + +#### Examples + +```js +{ + "types": { + "my-demo-lib": "https://my-custom-domain/my-type-declarations.d.ts" + } +} +``` + +``` +{ + "types": { + "my-demo-lib": { + "url": "https://my-custom-domain/types.d.ts", + "autoload": true, + "declareAsModule": true + } +} +``` + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`types`](../internal/interfaces/ContentConfig.md#types-1) + +#### Defined in + +[models.ts:570](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L570) + +*** + +### useTabs + +> **useTabs**: `boolean` + +If `true`, lines are indented with tabs instead of spaces. + +Also used in [code formatting](https://livecodes.io/docs/features/code-format). + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`useTabs`](../internal/interfaces/UserConfig.md#usetabs) + +#### Defined in + +[models.ts:769](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L769) + +*** + +### version + +> `readonly` **version**: `string` + +This is a read-only property which specifies the current LiveCodes version. + +Version specified in [exported](https://livecodes.io/docs/features/export) projects allows automatically upgrading the project configuration when imported by an app with a newer version. + +#### Inherited from + +[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`version`](../internal/interfaces/ContentConfig.md#version) + +#### Defined in + +[models.ts:583](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L583) + +*** + +### view? + +> `optional` **view**: `"split"` \| `"result"` \| `"editor"` + +Sets the [default view](https://livecodes.io/docs/features/default-view) for the playground. + +#### Default + +```ts +"split" +``` + +#### Inherited from + +[`AppConfig`](../internal/interfaces/AppConfig.md).[`view`](../internal/interfaces/AppConfig.md#view) + +#### Defined in + +[models.ts:609](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L609) + +*** + +### welcome + +> **welcome**: `boolean` + +If `true`, the [welcome screen](https://livecodes.io/docs/features/welcome) is displayed when the app loads. + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`welcome`](../internal/interfaces/UserConfig.md#welcome) + +#### Defined in + +[models.ts:702](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L702) + +*** + +### wordWrap + +> **wordWrap**: `boolean` + +Enables word-wrap for long lines. + +#### Default + +```ts +false +``` + +#### Inherited from + +[`UserConfig`](../internal/interfaces/UserConfig.md).[`wordWrap`](../internal/interfaces/UserConfig.md#wordwrap) + +#### Defined in + +[models.ts:789](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L789) + +*** + +### zoom + +> **zoom**: `0.25` \| `0.5` \| `1` + +Sets result page [zoom level](https://livecodes.io/docs/features/result#result-page-zoom). + +#### Inherited from + +[`AppConfig`](../internal/interfaces/AppConfig.md).[`zoom`](../internal/interfaces/AppConfig.md#zoom) + +#### Defined in + +[models.ts:640](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L640) + +--- + + + +# Interface: EmbedOptions + +An object that represents the playground embed options. + +See [docs](https://livecodes.io/docs/sdk/js-ts/#embed-options) for details. + +## Properties + +### appUrl? + +> `optional` **appUrl**: `string` + +Allows loading the playground from a custom URL +(e.g. a [self-hosted app](https://livecodes.io/docs/features/self-hosting) or a [permanent URL](https://livecodes.io/docs/features/permanent-url)). + +If supplied with an invalid URL, an error is thrown. + +#### Default + +```ts +'https://livecodes.io' +``` + +#### Defined in + +[models.ts:314](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L314) + +*** + +### config? + +> `optional` **config**: `string` \| `Partial`\<[`Config`](Config.md)\> + +A [configuration object](https://livecodes.io/docs/configuration/configuration-object) or a URL to a JSON file representing a configuration object to load. + +If supplied and is not an object or a valid URL, an error is thrown. + +#### Default + +```ts +{} +``` + +#### Defined in + +[models.ts:346](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L346) + +*** + +### headless? + +> `optional` **headless**: `boolean` + +If `true`, the playground is loaded in [headless mode](https://livecodes.io/docs/sdk/headless). + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:352](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L352) + +*** + +### import? + +> `optional` **import**: `string` + +A resource to [import](https://livecodes.io/docs/features/import) (from any of the supported [sources](https://livecodes.io/docs/features/import#sources)). + +#### Defined in + +[models.ts:357](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L357) + +*** + +### ~~lite?~~ + +> `optional` **lite**: `boolean` + +#### Deprecated + +Use `{ config: { mode: "lite" } }` instead + +If `true`, the playground is loaded in [lite mode](https://livecodes.io/docs/features/lite). + +#### Default + +```ts +false +``` + +#### Defined in + +[models.ts:367](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L367) + +*** + +### loading? + +> `optional` **loading**: `"click"` \| `"eager"` \| `"lazy"` + +Sets how the playground loads: + +- `"eager"`: The playground loads immediately. +- `"lazy"`: A playground embedded low down in the page will not load until the user scrolls so that it approaches the viewport. +- `"click"`: The playground does not load automatically. Instead, a "Click-to-load" screen is shown. + +#### Default + +```ts +"lazy" +``` + +#### Defined in + +[models.ts:377](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L377) + +*** + +### params? + +> `optional` **params**: `object` + +An object that represents the [URL Query parameters](https://livecodes.io/docs/configuration/query-params), that can be used to configure the playground. + +These 2 snippets produce similar output: + +```js +import { createPlayground } from 'livecodes'; + +// use config +createPlayground('#container', { + config: { + markup: { + language: 'markdown', + content: '# Hello World!', + }, + }, +}); + +// use params +createPlayground('#container', { params: { md: '# Hello World!' } }); +``` + +#### active? + +> `optional` **active**: `0` \| `2` \| `1` \| [`EditorId`](../internal/type-aliases/EditorId.md) + +#### activeEditor? + +> `optional` **activeEditor**: `0` \| `2` \| `1` \| [`EditorId`](../internal/type-aliases/EditorId.md) + +#### adoc + +> **adoc**: `undefined` \| `string` + +#### adoc-selector + +> **adoc-selector**: `undefined` \| `string` + +#### allowLangChange? + +> `optional` **allowLangChange**: `boolean` + +If `false`, the UI will not show the menu that allows changing editor language. + +##### Default + +```ts +true +``` + +#### app.svelte + +> **svelte**: `undefined` \| `string` + +#### app.svelte-selector + +> **svelte-selector**: `undefined` \| `string` + +#### app.vue + +> **vue**: `undefined` \| `string` + +#### app.vue-selector + +> **vue-selector**: `undefined` \| `string` + +#### appLanguage? + +> `optional` **appLanguage**: [`AppLanguage`](../internal/type-aliases/AppLanguage.md) + +Sets the app UI language used. + +#### appUrl? + +> `optional` **appUrl**: `string` + +Allows loading the playground from a custom URL +(e.g. a [self-hosted app](https://livecodes.io/docs/features/self-hosting) or a [permanent URL](https://livecodes.io/docs/features/permanent-url)). + +If supplied with an invalid URL, an error is thrown. + +##### Default + +```ts +'https://livecodes.io' +``` + +#### art + +> **art**: `undefined` \| `string` + +#### art-selector + +> **art-selector**: `undefined` \| `string` + +#### art-template + +> **art-template**: `undefined` \| `string` + +#### art-template-selector + +> **art-template-selector**: `undefined` \| `string` + +#### as + +> **as**: `undefined` \| `string` + +#### as-selector + +> **as-selector**: `undefined` \| `string` + +#### asc + +> **asc**: `undefined` \| `string` + +#### asc-selector + +> **asc-selector**: `undefined` \| `string` + +#### asciidoc + +> **asciidoc**: `undefined` \| `string` + +#### asciidoc-selector + +> **asciidoc-selector**: `undefined` \| `string` + +#### assemblyscript + +> **assemblyscript**: `undefined` \| `string` + +#### assemblyscript-selector + +> **assemblyscript-selector**: `undefined` \| `string` + +#### astro + +> **astro**: `undefined` \| `string` + +#### astro-selector + +> **astro-selector**: `undefined` \| `string` + +#### autosave? + +> `optional` **autosave**: `boolean` + +If `true`, the project is automatically saved on code change, +after time [delay](https://livecodes.io/docs/configuration/configuration-object#delay). + +##### Default + +```ts +false +``` + +#### autotest? + +> `optional` **autotest**: `boolean` + +If `true`, the project is watched for code changes which trigger tests to auto-run. + +##### Default + +```ts +false +``` + +#### autoupdate? + +> `optional` **autoupdate**: `boolean` + +If `true`, the result page is automatically updated on code change, +after time [delay](https://livecodes.io/docs/configuration/configuration-object#delay). + +##### Default + +```ts +true +``` + +#### babel + +> **babel**: `undefined` \| `string` + +#### babel-selector + +> **babel-selector**: `undefined` \| `string` + +#### bb + +> **bb**: `undefined` \| `string` + +#### bb-selector + +> **bb-selector**: `undefined` \| `string` + +#### bbcode + +> **bbcode**: `undefined` \| `string` + +#### bbcode-selector + +> **bbcode-selector**: `undefined` \| `string` + +#### Binary + +> **Binary**: `undefined` \| `string` + +#### Binary-selector + +> **Binary-selector**: `undefined` \| `string` + +#### blockly + +> **blockly**: `undefined` \| `string` + +#### blockly-selector + +> **blockly-selector**: `undefined` \| `string` + +#### blockly.xml + +> **xml**: `undefined` \| `string` + +#### blockly.xml-selector + +> **xml-selector**: `undefined` \| `string` + +#### c + +> **c**: `undefined` \| `string` + +#### C + +> **C**: `undefined` \| `string` + +#### c-selector + +> **c-selector**: `undefined` \| `string` + +#### C-selector + +> **C-selector**: `undefined` \| `string` + +#### c++ + +> **c++**: `undefined` \| `string` + +#### c++-selector + +> **c++-selector**: `undefined` \| `string` + +#### civet + +> **civet**: `undefined` \| `string` + +#### civet-selector + +> **civet-selector**: `undefined` \| `string` + +#### clang + +> **clang**: `undefined` \| `string` + +#### clang-selector + +> **clang-selector**: `undefined` \| `string` + +#### clang.cpp + +> **cpp**: `undefined` \| `string` + +#### clang.cpp-selector + +> **cpp-selector**: `undefined` \| `string` + +#### clio + +> **clio**: `undefined` \| `string` + +#### clio-selector + +> **clio-selector**: `undefined` \| `string` + +#### clj + +> **clj**: `undefined` \| `string` + +#### clj-selector + +> **clj-selector**: `undefined` \| `string` + +#### cljc + +> **cljc**: `undefined` \| `string` + +#### cljc-selector + +> **cljc-selector**: `undefined` \| `string` + +#### cljs + +> **cljs**: `undefined` \| `string` + +#### cljs-selector + +> **cljs-selector**: `undefined` \| `string` + +#### clojure + +> **clojure**: `undefined` \| `string` + +#### clojure-selector + +> **clojure-selector**: `undefined` \| `string` + +#### clojurescript + +> **clojurescript**: `undefined` \| `string` + +#### clojurescript-selector + +> **clojurescript-selector**: `undefined` \| `string` + +#### closeBrackets? + +> `optional` **closeBrackets**: `boolean` + +Use auto-complete to close brackets and quotes. + +##### Default + +```ts +true +``` + +#### coffee + +> **coffee**: `undefined` \| `string` + +#### coffee-selector + +> **coffee-selector**: `undefined` \| `string` + +#### coffeescript + +> **coffeescript**: `undefined` \| `string` + +#### coffeescript-selector + +> **coffeescript-selector**: `undefined` \| `string` + +#### common-lisp + +> **common-lisp**: `undefined` \| `string` + +#### common-lisp-selector + +> **common-lisp-selector**: `undefined` \| `string` + +#### commonlisp + +> **commonlisp**: `undefined` \| `string` + +#### commonlisp-selector + +> **commonlisp-selector**: `undefined` \| `string` + +#### compiled + +> **compiled**: `undefined` \| `""` \| `"true"` \| `"none"` \| `"closed"` \| `"open"` \| `"full"` + +#### config? + +> `optional` **config**: `string` \| `Partial`\<[`Config`](Config.md)\> & `string` + +A [configuration object](https://livecodes.io/docs/configuration/configuration-object) or a URL to a JSON file representing a configuration object to load. + +If supplied and is not an object or a valid URL, an error is thrown. + +##### Default + +```ts +{} +``` + +#### console + +> **console**: `undefined` \| `""` \| `"true"` \| `"none"` \| `"closed"` \| `"open"` \| `"full"` + +#### cp + +> **cp**: `undefined` \| `string` + +#### cp-selector + +> **cp-selector**: `undefined` \| `string` + +#### cpp + +> **cpp**: `undefined` \| `string` + +#### cpp-selector + +> **cpp-selector**: `undefined` \| `string` + +#### cpp-wasm + +> **cpp-wasm**: `undefined` \| `string` + +#### cpp-wasm-selector + +> **cpp-wasm-selector**: `undefined` \| `string` + +#### cppm + +> **cppm**: `undefined` \| `string` + +#### cppm-selector + +> **cppm-selector**: `undefined` \| `string` + +#### cppwasm + +> **cppwasm**: `undefined` \| `string` + +#### cppwasm-selector + +> **cppwasm-selector**: `undefined` \| `string` + +#### cs + +> **cs**: `undefined` \| `string` + +#### cs-selector + +> **cs-selector**: `undefined` \| `string` + +#### cs-wasm + +> **cs-wasm**: `undefined` \| `string` + +#### cs-wasm-selector + +> **cs-wasm-selector**: `undefined` \| `string` + +#### csharp + +> **csharp**: `undefined` \| `string` + +#### csharp-selector + +> **csharp-selector**: `undefined` \| `string` + +#### csharp-wasm + +> **csharp-wasm**: `undefined` \| `string` + +#### csharp-wasm-selector + +> **csharp-wasm-selector**: `undefined` \| `string` + +#### css + +> **css**: `undefined` \| `string` + +#### css-selector + +> **css-selector**: `undefined` \| `string` + +#### cssPreset? + +> `optional` **cssPreset**: [`CssPresetId`](../internal/type-aliases/CssPresetId.md) + +[CSS Preset](https://livecodes.io/docs/features/external-resources#css-presets) to use. + +#### customSettings? + +> `optional` **customSettings**: `object` + +Defines [custom settings](https://livecodes.io/docs/advanced/custom-settings) for the current project. + +#### customSettings.adoc + +> **adoc**: `any` + +#### customSettings.app.svelte + +> **svelte**: `any` + +#### customSettings.app.vue + +> **vue**: `any` + +#### customSettings.art + +> **art**: `any` + +#### customSettings.art-template + +> **art-template**: `any` + +#### customSettings.as + +> **as**: `any` + +#### customSettings.asc + +> **asc**: `any` + +#### customSettings.asciidoc + +> **asciidoc**: `any` + +#### customSettings.assemblyscript + +> **assemblyscript**: `any` + +#### customSettings.astro + +> **astro**: `any` + +#### customSettings.autoprefixer + +> **autoprefixer**: `any` + +#### customSettings.babel + +> **babel**: `any` + +#### customSettings.bb + +> **bb**: `any` + +#### customSettings.bbcode + +> **bbcode**: `any` + +#### customSettings.Binary + +> **Binary**: `any` + +#### customSettings.blockly + +> **blockly**: `any` + +#### customSettings.blockly.xml + +> **xml**: `any` + +#### customSettings.c + +> **c**: `any` + +#### customSettings.C + +> **C**: `any` + +#### customSettings.c++ + +> **c++**: `any` + +#### customSettings.civet + +> **civet**: `any` + +#### customSettings.clang + +> **clang**: `any` + +#### customSettings.clang.cpp + +> **cpp**: `any` + +#### customSettings.clio + +> **clio**: `any` + +#### customSettings.clj + +> **clj**: `any` + +#### customSettings.cljc + +> **cljc**: `any` + +#### customSettings.cljs + +> **cljs**: `any` + +#### customSettings.clojure + +> **clojure**: `any` + +#### customSettings.clojurescript + +> **clojurescript**: `any` + +#### customSettings.coffee + +> **coffee**: `any` + +#### customSettings.coffeescript + +> **coffeescript**: `any` + +#### customSettings.common-lisp + +> **common-lisp**: `any` + +#### customSettings.commonlisp + +> **commonlisp**: `any` + +#### customSettings.convertCommonjs? + +> `optional` **convertCommonjs**: `boolean` + +#### customSettings.cp + +> **cp**: `any` + +#### customSettings.cpp + +> **cpp**: `any` + +#### customSettings.cpp-wasm + +> **cpp-wasm**: `any` + +#### customSettings.cppm + +> **cppm**: `any` + +#### customSettings.cppwasm + +> **cppwasm**: `any` + +#### customSettings.cs + +> **cs**: `any` + +#### customSettings.cs-wasm + +> **cs-wasm**: `any` + +#### customSettings.csharp + +> **csharp**: `any` + +#### customSettings.csharp-wasm + +> **csharp-wasm**: `any` + +#### customSettings.css + +> **css**: `any` + +#### customSettings.cssmodules + +> **cssmodules**: `any` + +#### customSettings.cssnano + +> **cssnano**: `any` + +#### customSettings.cwasm + +> **cwasm**: `any` + +#### customSettings.cxx + +> **cxx**: `any` + +#### customSettings.defaultCDN? + +> `optional` **defaultCDN**: [`CDN`](../internal/type-aliases/CDN.md) + +#### customSettings.diagram + +> **diagram**: `any` + +#### customSettings.diagrams + +> **diagrams**: `any` + +#### customSettings.dot + +> **dot**: `any` + +#### customSettings.edn + +> **edn**: `any` + +#### customSettings.ejs + +> **ejs**: `any` + +#### customSettings.es + +> **es**: `any` + +#### customSettings.eta + +> **eta**: `any` + +#### customSettings.fennel + +> **fennel**: `any` + +#### customSettings.flow + +> **flow**: `any` + +#### customSettings.fnl + +> **fnl**: `any` + +#### customSettings.gleam + +> **gleam**: `any` + +#### customSettings.go + +> **go**: `any` + +#### customSettings.golang + +> **golang**: `any` + +#### customSettings.graph + +> **graph**: `any` + +#### customSettings.h + +> **h**: `any` + +#### customSettings.haml + +> **haml**: `any` + +#### customSettings.handlebars + +> **handlebars**: `any` + +#### customSettings.hbs + +> **hbs**: `any` + +#### customSettings.hpp + +> **hpp**: `any` + +#### customSettings.htm + +> **htm**: `any` + +#### customSettings.html + +> **html**: `any` + +#### customSettings.ii + +> **ii**: `any` + +#### customSettings.imba + +> **imba**: `any` + +#### customSettings.imports? + +> `optional` **imports**: `Record`\<`string`, `string`\> + +#### customSettings.ixx + +> **ixx**: `any` + +#### customSettings.jade + +> **jade**: `any` + +#### customSettings.java + +> **java**: `any` + +#### customSettings.javascript + +> **javascript**: `any` + +#### customSettings.jinja + +> **jinja**: `any` + +#### customSettings.jl + +> **jl**: `any` + +#### customSettings.js + +> **js**: `any` + +#### customSettings.json + +> **json**: `any` + +#### customSettings.jsx + +> **jsx**: `any` + +#### customSettings.julia + +> **julia**: `any` + +#### customSettings.less + +> **less**: `any` + +#### customSettings.lightningcss + +> **lightningcss**: `any` + +#### customSettings.liquid + +> **liquid**: `any` + +#### customSettings.liquidjs + +> **liquidjs**: `any` + +#### customSettings.lisp + +> **lisp**: `any` + +#### customSettings.livescript + +> **livescript**: `any` + +#### customSettings.ls + +> **ls**: `any` + +#### customSettings.lua + +> **lua**: `any` + +#### customSettings.lua-wasm + +> **lua-wasm**: `any` + +#### customSettings.luawasm + +> **luawasm**: `any` + +#### customSettings.malina + +> **malina**: `any` + +#### customSettings.malinajs + +> **malinajs**: `any` + +#### customSettings.mapImports? + +> `optional` **mapImports**: `boolean` + +#### customSettings.markdown + +> **markdown**: `any` + +#### customSettings.md + +> **md**: `any` + +#### customSettings.mdown + +> **mdown**: `any` + +#### customSettings.html.md) + +> **mdx**: `any` + +#### customSettings.mjml + +> **mjml**: `any` + +#### customSettings.mkdn + +> **mkdn**: `any` + +#### customSettings.ml + +> **ml**: `any` + +#### customSettings.mli + +> **mli**: `any` + +#### customSettings.mustache + +> **mustache**: `any` + +#### customSettings.njk + +> **njk**: `any` + +#### customSettings.nunjucks + +> **nunjucks**: `any` + +#### customSettings.ocaml + +> **ocaml**: `any` + +#### customSettings.perl + +> **perl**: `any` + +#### customSettings.pg + +> **pg**: `any` + +#### customSettings.pg.sql + +> **sql**: `any` + +#### customSettings.pglite + +> **pglite**: `any` + +#### customSettings.pglite.sql + +> **sql**: `any` + +#### customSettings.pgsql + +> **pgsql**: `any` + +#### customSettings.pgsql.sql + +> **sql**: `any` + +#### customSettings.php + +> **php**: `any` + +#### customSettings.php-wasm + +> **php-wasm**: `any` + +#### customSettings.phpwasm + +> **phpwasm**: `any` + +#### customSettings.pintora + +> **pintora**: `any` + +#### customSettings.pl + +> **pl**: `any` + +#### customSettings.plt + +> **plt**: `any` + +#### customSettings.pm + +> **pm**: `any` + +#### customSettings.postcss + +> **postcss**: `any` + +#### customSettings.postcssImportUrl + +> **postcssImportUrl**: `any` + +#### customSettings.postcssPresetEnv + +> **postcssPresetEnv**: `any` + +#### customSettings.postgre.sql + +> **sql**: `any` + +#### customSettings.postgres + +> **postgres**: `any` + +#### customSettings.postgresql + +> **postgresql**: `any` + +#### customSettings.postgresql.sql + +> **sql**: `any` + +#### customSettings.prolog + +> **prolog**: `any` + +#### customSettings.prolog.pl + +> **pl**: `any` + +#### customSettings.pug + +> **pug**: `any` + +#### customSettings.purgecss + +> **purgecss**: `any` + +#### customSettings.py + +> **py**: `any` + +#### customSettings.py-wasm + +> **py-wasm**: `any` + +#### customSettings.py3 + +> **py3**: `any` + +#### customSettings.pyodide + +> **pyodide**: `any` + +#### customSettings.python + +> **python**: `any` + +#### customSettings.python-wasm + +> **python-wasm**: `any` + +#### customSettings.pythonwasm + +> **pythonwasm**: `any` + +#### customSettings.pywasm + +> **pywasm**: `any` + +#### customSettings.r + +> **r**: `any` + +#### customSettings.r-wasm + +> **r-wasm**: `any` + +#### customSettings.rb + +> **rb**: `any` + +#### customSettings.re + +> **re**: `any` + +#### customSettings.react + +> **react**: `any` + +#### customSettings.react-jsx + +> **react-jsx**: `any` + +#### customSettings.react-native + +> **react-native**: `any` + +#### customSettings.react-native-tsx + +> **react-native-tsx**: `any` + +#### customSettings.react-native.jsx + +> **jsx**: `any` + +#### customSettings.react-native.tsx + +> **tsx**: `any` + +#### customSettings.react-tsx + +> **react-tsx**: `any` + +#### customSettings.react.jsx + +> **jsx**: `any` + +#### customSettings.react.tsx + +> **tsx**: `any` + +#### customSettings.reason + +> **reason**: `any` + +#### customSettings.rei + +> **rei**: `any` + +#### customSettings.res + +> **res**: `any` + +#### customSettings.rescript + +> **rescript**: `any` + +#### customSettings.resi + +> **resi**: `any` + +#### customSettings.rich + +> **rich**: `any` + +#### customSettings.richtext + +> **richtext**: `any` + +#### customSettings.riot + +> **riot**: `any` + +#### customSettings.riotjs + +> **riotjs**: `any` + +#### customSettings.rlang + +> **rlang**: `any` + +#### customSettings.rstats + +> **rstats**: `any` + +#### customSettings.rte + +> **rte**: `any` + +#### customSettings.rte.html + +> **html**: `any` + +#### customSettings.ruby + +> **ruby**: `any` + +#### customSettings.ruby-wasm + +> **ruby-wasm**: `any` + +#### customSettings.rubywasm + +> **rubywasm**: `any` + +#### customSettings.sass + +> **sass**: `any` + +#### customSettings.scheme + +> **scheme**: `any` + +#### customSettings.scm + +> **scm**: `any` + +#### customSettings.scriptType? + +> `optional` **scriptType**: `""` \| `"module"` \| `"text/liquid"` \| `"text/python"` \| `"text/r"` \| `"text/ruby-wasm"` \| `"text/x-uniter-php"` \| `"text/php-wasm"` \| `"text/cpp"` \| `"text/java"` \| `"text/csharp-wasm"` \| `"text/perl"` \| `"text/julia"` \| `"text/biwascheme"` \| `"text/commonlisp"` \| `"text/tcl"` \| `"text/prolog"` \| `"application/json"` \| `"application/lua"` \| `"text/fennel"` \| `"application/wasm-uint8"` \| `"application/javascript"` \| `"application/ecmascript"` \| `"text/javascript"` \| `"text/ecmascript"` + +#### customSettings.scss + +> **scss**: `any` + +#### customSettings.solid + +> **solid**: `any` + +#### customSettings.solid.jsx + +> **jsx**: `any` + +#### customSettings.solid.tsx + +> **tsx**: `any` + +#### customSettings.sql + +> **sql**: `any` + +#### customSettings.sqlite + +> **sqlite**: `any` + +#### customSettings.sqlite3 + +> **sqlite3**: `any` + +#### customSettings.stencil + +> **stencil**: `any` + +#### customSettings.stencil.tsx + +> **tsx**: `any` + +#### customSettings.styl + +> **styl**: `any` + +#### customSettings.stylis + +> **stylis**: `any` + +#### customSettings.stylus + +> **stylus**: `any` + +#### customSettings.sucrase + +> **sucrase**: `any` + +#### customSettings.svelte + +> **svelte**: `any` + +#### customSettings.svelte-app + +> **svelte-app**: `any` + +#### customSettings.tailwindcss + +> **tailwindcss**: `any` + +#### customSettings.tcl + +> **tcl**: `any` + +#### customSettings.teal + +> **teal**: `any` + +#### customSettings.template? + +> `optional` **template**: `object` + +#### customSettings.template.data? + +> `optional` **data**: `any` + +#### customSettings.template.prerender? + +> `optional` **prerender**: `boolean` + +#### customSettings.tl + +> **tl**: `any` + +#### customSettings.tokencss + +> **tokencss**: `any` + +#### customSettings.ts + +> **ts**: `any` + +#### customSettings.tsx + +> **tsx**: `any` + +#### customSettings.twig + +> **twig**: `any` + +#### customSettings.types? + +> `optional` **types**: [`Types`](../internal/interfaces/Types.md) + +#### customSettings.typescript + +> **typescript**: `any` + +#### customSettings.unocss + +> **unocss**: `any` + +#### customSettings.vento + +> **vento**: `any` + +#### customSettings.vto + +> **vto**: `any` + +#### customSettings.vue + +> **vue**: `any` + +#### customSettings.vue-app + +> **vue-app**: `any` + +#### customSettings.vue2 + +> **vue2**: `any` + +#### customSettings.vue3 + +> **vue3**: `any` + +#### customSettings.wasm + +> **wasm**: `any` + +#### customSettings.wasm.cpp + +> **cpp**: `any` + +#### customSettings.wasm.cs + +> **cs**: `any` + +#### customSettings.wasm.lua + +> **lua**: `any` + +#### customSettings.wasm.php + +> **php**: `any` + +#### customSettings.wasm.py + +> **py**: `any` + +#### customSettings.wasm.rb + +> **rb**: `any` + +#### customSettings.wast + +> **wast**: `any` + +#### customSettings.wat + +> **wat**: `any` + +#### customSettings.webassembly + +> **webassembly**: `any` + +#### customSettings.windicss + +> **windicss**: `any` + +#### customSettings.xht + +> **xht**: `any` + +#### customSettings.xml + +> **xml**: `any` + +#### cwasm + +> **cwasm**: `undefined` \| `string` + +#### cwasm-selector + +> **cwasm-selector**: `undefined` \| `string` + +#### cxx + +> **cxx**: `undefined` \| `string` + +#### cxx-selector + +> **cxx-selector**: `undefined` \| `string` + +#### delay? + +> `optional` **delay**: `number` + +Time delay (in milliseconds) following code change, +after which the result page is updated (if [`autoupdate`](https://livecodes.io/docs/configuration/configuration-object#autoupdate) is `true`) +and/or the project is saved (if [`autosave`](https://livecodes.io/docs/configuration/configuration-object#autosave) is `true`). + +##### Default + +```ts +1500 +``` + +#### description? + +> `optional` **description**: `string` + +Project description. Used in [project](https://livecodes.io/docs/features/projects) search +and [result page](https://livecodes.io/docs/features/result) description meta tag. + +##### Default + +```ts +"" +``` + +#### diagram + +> **diagram**: `undefined` \| `string` + +#### diagram-selector + +> **diagram-selector**: `undefined` \| `string` + +#### diagrams + +> **diagrams**: `undefined` \| `string` + +#### diagrams-selector + +> **diagrams-selector**: `undefined` \| `string` + +#### disableAI? + +> `optional` **disableAI**: `boolean` + +#### dot + +> **dot**: `undefined` \| `string` + +#### dot-selector + +> **dot-selector**: `undefined` \| `string` + +#### editor? + +> `optional` **editor**: `"auto"` \| `"monaco"` \| `"codemirror"` \| `"codejar"` + +Selects the [code editor](https://livecodes.io/docs/features/editor-settings#code-editor) to use. + +If `undefined` (the default), Monaco editor is used on desktop, +CodeMirror is used on mobile and in `simple` mode, +while CodeJar is used in `codeblock` mode, in `lite` mode and in `readonly` playgrounds. + +If set to `auto`, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings. + +##### Default + +```ts +undefined +``` + +#### editorMode? + +> `optional` **editorMode**: `"vim"` \| `"emacs"` + +Sets [editor mode](https://livecodes.io/docs/features/editor-settings#editor-modes). + +#### editorTheme? + +> `optional` **editorTheme**: `string` \| [`EditorTheme`](../internal/type-aliases/EditorTheme.md)[] + +Sets the [code editor](https://livecodes.io/docs/features/editor-settings) themes. + +See docs for [editor themes](https://livecodes.io/docs/configuration/configuration-object#editortheme) for details. + +##### Examples + +```ts +"vs" +``` + +```ts +"monaco:twilight, codemirror:one-dark" +``` + +```ts +["vs@light"] +``` + +```ts +["vs@light", "vs-dark@dark"] +``` + +```ts +["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"] +``` + +#### edn + +> **edn**: `undefined` \| `string` + +#### edn-selector + +> **edn-selector**: `undefined` \| `string` + +#### ejs + +> **ejs**: `undefined` \| `string` + +#### ejs-selector + +> **ejs-selector**: `undefined` \| `string` + +#### embed? + +> `optional` **embed**: `boolean` + +#### emmet? + +> `optional` **emmet**: `boolean` + +Enables [Emmet](https://livecodes.io/docs/features/editor-settings#emmet). + +##### Default + +```ts +true +``` + +#### enableAI? + +> `optional` **enableAI**: `boolean` + +If `true`, [AI code assistant](https://livecodes.io/docs/features/ai) is enabled. + +##### Default + +```ts +false +``` + +#### es + +> **es**: `undefined` \| `string` + +#### es-selector + +> **es-selector**: `undefined` \| `string` + +#### eta + +> **eta**: `undefined` \| `string` + +#### eta-selector + +> **eta-selector**: `undefined` \| `string` + +#### fennel + +> **fennel**: `undefined` \| `string` + +#### fennel-selector + +> **fennel-selector**: `undefined` \| `string` + +#### files? + +> `optional` **files**: `string` + +#### flow + +> **flow**: `undefined` \| `string` + +#### flow-selector + +> **flow-selector**: `undefined` \| `string` + +#### fnl + +> **fnl**: `undefined` \| `string` + +#### fnl-selector + +> **fnl-selector**: `undefined` \| `string` + +#### foldRegions? + +> `optional` **foldRegions**: `boolean` + +When set to `true`, regions marked by `#region` and `#endregion` comments are folded when the project is loaded. + +##### Default + +```ts +false +``` + +#### fontFamily? + +> `optional` **fontFamily**: `string` + +Sets the [code editor](https://livecodes.io/docs/features/editor-settings) font family. + +#### fontSize? + +> `optional` **fontSize**: `number` + +Sets the font size. + +If `undefined` (the default), the font size is set to 14 for the full app and 12 for [embeds](https://livecodes.io/docs/features/embeds). + +##### Default + +```ts +undefined +``` + +#### formatOnsave? + +> `optional` **formatOnsave**: `boolean` + +If `true`, the code is automatically [formatted](https://livecodes.io/docs/features/code-format) on saving the project. + +##### Default + +```ts +false +``` + +#### gleam + +> **gleam**: `undefined` \| `string` + +#### gleam-selector + +> **gleam-selector**: `undefined` \| `string` + +#### go + +> **go**: `undefined` \| `string` + +#### go-selector + +> **go-selector**: `undefined` \| `string` + +#### golang + +> **golang**: `undefined` \| `string` + +#### golang-selector + +> **golang-selector**: `undefined` \| `string` + +#### graph + +> **graph**: `undefined` \| `string` + +#### graph-selector + +> **graph-selector**: `undefined` \| `string` + +#### h + +> **h**: `undefined` \| `string` + +#### h-selector + +> **h-selector**: `undefined` \| `string` + +#### haml + +> **haml**: `undefined` \| `string` + +#### haml-selector + +> **haml-selector**: `undefined` \| `string` + +#### handlebars + +> **handlebars**: `undefined` \| `string` + +#### handlebars-selector + +> **handlebars-selector**: `undefined` \| `string` + +#### hbs + +> **hbs**: `undefined` \| `string` + +#### hbs-selector + +> **hbs-selector**: `undefined` \| `string` + +#### head? + +> `optional` **head**: `string` + +Content added to the [result page](https://livecodes.io/docs/features/result) `` element. + +##### Default + +```ts +'\n' +``` + +#### headless? + +> `optional` **headless**: `boolean` + +If `true`, the playground is loaded in [headless mode](https://livecodes.io/docs/sdk/headless). + +##### Default + +```ts +false +``` + +#### hpp + +> **hpp**: `undefined` \| `string` + +#### hpp-selector + +> **hpp-selector**: `undefined` \| `string` + +#### htm + +> **htm**: `undefined` \| `string` + +#### htm-selector + +> **htm-selector**: `undefined` \| `string` + +#### html + +> **html**: `undefined` \| `string` + +#### html-selector + +> **html-selector**: `undefined` \| `string` + +#### htmlAttrs? + +> `optional` **htmlAttrs**: `string` \| `Record`\<`string`, `string`\> + +Attributes added to the [result page](https://livecodes.io/docs/features/result) `` element. +It can be an object or a string. + +##### Example + +```ts +{ lang: "en", class: "dark" } +'lang="en" class="dark"' +``` + +#### ii + +> **ii**: `undefined` \| `string` + +#### ii-selector + +> **ii-selector**: `undefined` \| `string` + +#### imba + +> **imba**: `undefined` \| `string` + +#### imba-selector + +> **imba-selector**: `undefined` \| `string` + +#### import? + +> `optional` **import**: `string` + +A resource to [import](https://livecodes.io/docs/features/import) (from any of the supported [sources](https://livecodes.io/docs/features/import#sources)). + +#### imports? + +> `optional` **imports**: `object` + +Allows specifying custom [import maps](https://github.com/WICG/import-maps) for [module imports](https://livecodes.io/docs/features/module-resolution#custom-module-resolution). + +**Example** + +Setting `imports` like this: +```js +"imports": { + "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js" +} +``` +results in the following import map: +```html + +``` +See docs for [Imports](https://livecodes.io/docs/configuration/configuration-object#imports) +and [Custom Module Resolution](https://livecodes.io/docs/features/module-resolution/#custom-module-resolution) + +##### Index Signature + + \[`key`: `string`\]: `string` + +#### ixx + +> **ixx**: `undefined` \| `string` + +#### ixx-selector + +> **ixx-selector**: `undefined` \| `string` + +#### jade + +> **jade**: `undefined` \| `string` + +#### jade-selector + +> **jade-selector**: `undefined` \| `string` + +#### java + +> **java**: `undefined` \| `string` + +#### java-selector + +> **java-selector**: `undefined` \| `string` + +#### javascript + +> **javascript**: `undefined` \| `string` + +#### javascript-selector + +> **javascript-selector**: `undefined` \| `string` + +#### jinja + +> **jinja**: `undefined` \| `string` + +#### jinja-selector + +> **jinja-selector**: `undefined` \| `string` + +#### jl + +> **jl**: `undefined` \| `string` + +#### jl-selector + +> **jl-selector**: `undefined` \| `string` + +#### js + +> **js**: `undefined` \| `string` + +#### js-selector + +> **js-selector**: `undefined` \| `string` + +#### json + +> **json**: `undefined` \| `string` + +#### json-selector + +> **json-selector**: `undefined` \| `string` + +#### jsx + +> **jsx**: `undefined` \| `string` + +#### jsx-selector + +> **jsx-selector**: `undefined` \| `string` + +#### julia + +> **julia**: `undefined` \| `string` + +#### julia-selector + +> **julia-selector**: `undefined` \| `string` + +#### lang? + +> `optional` **lang**: [`Language`](../type-aliases/Language.md) + +#### language? + +> `optional` **language**: [`Language`](../type-aliases/Language.md) + +#### languages? + +> `optional` **languages**: `string` + +#### layout? + +> `optional` **layout**: `"horizontal"` \| `"vertical"` \| `"responsive"` + +Sets the app layout to horizontal or vertical. +If set to `"responsive"` (the default) or `undefined`, +the layout is vertical in small screens when the playground height is larger than its width, +otherwise horizontal. + +##### Default + +```ts +"responsive" +``` + +#### less + +> **less**: `undefined` \| `string` + +#### less-selector + +> **less-selector**: `undefined` \| `string` + +#### lineNumbers? + +> `optional` **lineNumbers**: `boolean` \| `"relative"` + +Show line numbers in [code editor](https://livecodes.io/docs/features/editor-settings). + +##### Default + +```ts +true +``` + +#### liquid + +> **liquid**: `undefined` \| `string` + +#### liquid-selector + +> **liquid-selector**: `undefined` \| `string` + +#### liquidjs + +> **liquidjs**: `undefined` \| `string` + +#### liquidjs-selector + +> **liquidjs-selector**: `undefined` \| `string` + +#### lisp + +> **lisp**: `undefined` \| `string` + +#### lisp-selector + +> **lisp-selector**: `undefined` \| `string` + +#### ~~lite?~~ + +> `optional` **lite**: `boolean` + +##### Deprecated + +Use `{ config: { mode: "lite" } }` instead + +If `true`, the playground is loaded in [lite mode](https://livecodes.io/docs/features/lite). + +##### Default + +```ts +false +``` + +#### livescript + +> **livescript**: `undefined` \| `string` + +#### livescript-selector + +> **livescript-selector**: `undefined` \| `string` + +#### loading? + +> `optional` **loading**: `"click"` \| `"eager"` \| `"lazy"` + +Sets how the playground loads: + +- `"eager"`: The playground loads immediately. +- `"lazy"`: A playground embedded low down in the page will not load until the user scrolls so that it approaches the viewport. +- `"click"`: The playground does not load automatically. Instead, a "Click-to-load" screen is shown. + +##### Default + +```ts +"lazy" +``` + +#### ls + +> **ls**: `undefined` \| `string` + +#### ls-selector + +> **ls-selector**: `undefined` \| `string` + +#### lua + +> **lua**: `undefined` \| `string` + +#### lua-selector + +> **lua-selector**: `undefined` \| `string` + +#### lua-wasm + +> **lua-wasm**: `undefined` \| `string` + +#### lua-wasm-selector + +> **lua-wasm-selector**: `undefined` \| `string` + +#### luawasm + +> **luawasm**: `undefined` \| `string` + +#### luawasm-selector + +> **luawasm-selector**: `undefined` \| `string` + +#### malina + +> **malina**: `undefined` \| `string` + +#### malina-selector + +> **malina-selector**: `undefined` \| `string` + +#### malinajs + +> **malinajs**: `undefined` \| `string` + +#### malinajs-selector + +> **malinajs-selector**: `undefined` \| `string` + +#### markdown + +> **markdown**: `undefined` \| `string` + +#### markdown-selector + +> **markdown-selector**: `undefined` \| `string` + +#### markup? + +> `optional` **markup**: `object` + +An object that configures the language and content of the markup editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +##### Default + +```ts +{ language: "html", content: "" } +``` + +#### markup.content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### markup.contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### markup.foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### markup.hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### markup.hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### markup.hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### markup.language + +> **language**: [`Language`](../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### markup.order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### markup.position? + +> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### markup.selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### markup.title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### md + +> **md**: `undefined` \| `string` + +#### md-selector + +> **md-selector**: `undefined` \| `string` + +#### mdown + +> **mdown**: `undefined` \| `string` + +#### mdown-selector + +> **mdown-selector**: `undefined` \| `string` + +#### mdx + +> **mdx**: `undefined` \| `string` + +#### mdx-selector + +> **mdx-selector**: `undefined` \| `string` + +#### mjml + +> **mjml**: `undefined` \| `string` + +#### mjml-selector + +> **mjml-selector**: `undefined` \| `string` + +#### mkdn + +> **mkdn**: `undefined` \| `string` + +#### mkdn-selector + +> **mkdn-selector**: `undefined` \| `string` + +#### ml + +> **ml**: `undefined` \| `string` + +#### ml-selector + +> **ml-selector**: `undefined` \| `string` + +#### mli + +> **mli**: `undefined` \| `string` + +#### mli-selector + +> **mli-selector**: `undefined` \| `string` + +#### mode? + +> `optional` **mode**: `"focus"` \| `"full"` \| `"result"` \| `"editor"` \| `"lite"` \| `"simple"` \| `"codeblock"` + +Sets the [display mode](https://livecodes.io/docs/features/display-modes). + +##### Default + +```ts +"full" +``` + +#### mustache + +> **mustache**: `undefined` \| `string` + +#### mustache-selector + +> **mustache-selector**: `undefined` \| `string` + +#### new? + +> `optional` **new**: `""` + +#### njk + +> **njk**: `undefined` \| `string` + +#### njk-selector + +> **njk-selector**: `undefined` \| `string` + +#### no-defaults? + +> `optional` **no-defaults**: `boolean` + +#### nunjucks + +> **nunjucks**: `undefined` \| `string` + +#### nunjucks-selector + +> **nunjucks-selector**: `undefined` \| `string` + +#### ocaml + +> **ocaml**: `undefined` \| `string` + +#### ocaml-selector + +> **ocaml-selector**: `undefined` \| `string` + +#### params? + +> `optional` **params**: \{ appUrl?: string \| undefined; params?: ... \| undefined; config?: string \| (Partial\ & string) \| undefined; headless?: boolean \| undefined; import?: string \| undefined; ... 475 more ...; compiled?: "" \| ... 5 more ... \| undefined; \} \| undefined + +An object that represents the [URL Query parameters](https://livecodes.io/docs/configuration/query-params), that can be used to configure the playground. + +These 2 snippets produce similar output: + +```js +import { createPlayground } from 'livecodes'; + +// use config +createPlayground('#container', { + config: { + markup: { + language: 'markdown', + content: '# Hello World!', + }, + }, +}); + +// use params +createPlayground('#container', { params: { md: '# Hello World!' } }); +``` + +#### perl + +> **perl**: `undefined` \| `string` + +#### perl-selector + +> **perl-selector**: `undefined` \| `string` + +#### pg + +> **pg**: `undefined` \| `string` + +#### pg-selector + +> **pg-selector**: `undefined` \| `string` + +#### pg.sql + +> **sql**: `undefined` \| `string` + +#### pg.sql-selector + +> **sql-selector**: `undefined` \| `string` + +#### pglite + +> **pglite**: `undefined` \| `string` + +#### pglite-selector + +> **pglite-selector**: `undefined` \| `string` + +#### pglite.sql + +> **sql**: `undefined` \| `string` + +#### pglite.sql-selector + +> **sql-selector**: `undefined` \| `string` + +#### pgsql + +> **pgsql**: `undefined` \| `string` + +#### pgsql-selector + +> **pgsql-selector**: `undefined` \| `string` + +#### pgsql.sql + +> **sql**: `undefined` \| `string` + +#### pgsql.sql-selector + +> **sql-selector**: `undefined` \| `string` + +#### php + +> **php**: `undefined` \| `string` + +#### php-selector + +> **php-selector**: `undefined` \| `string` + +#### php-wasm + +> **php-wasm**: `undefined` \| `string` + +#### php-wasm-selector + +> **php-wasm-selector**: `undefined` \| `string` + +#### phpwasm + +> **phpwasm**: `undefined` \| `string` + +#### phpwasm-selector + +> **phpwasm-selector**: `undefined` \| `string` + +#### pintora + +> **pintora**: `undefined` \| `string` + +#### pintora-selector + +> **pintora-selector**: `undefined` \| `string` + +#### pl + +> **pl**: `undefined` \| `string` + +#### pl-selector + +> **pl-selector**: `undefined` \| `string` + +#### plt + +> **plt**: `undefined` \| `string` + +#### plt-selector + +> **plt-selector**: `undefined` \| `string` + +#### pm + +> **pm**: `undefined` \| `string` + +#### pm-selector + +> **pm-selector**: `undefined` \| `string` + +#### postcss + +> **postcss**: `undefined` \| `string` + +#### postcss-selector + +> **postcss-selector**: `undefined` \| `string` + +#### postgre.sql + +> **sql**: `undefined` \| `string` + +#### postgre.sql-selector + +> **sql-selector**: `undefined` \| `string` + +#### postgres + +> **postgres**: `undefined` \| `string` + +#### postgres-selector + +> **postgres-selector**: `undefined` \| `string` + +#### postgresql + +> **postgresql**: `undefined` \| `string` + +#### postgresql-selector + +> **postgresql-selector**: `undefined` \| `string` + +#### postgresql.sql + +> **sql**: `undefined` \| `string` + +#### postgresql.sql-selector + +> **sql-selector**: `undefined` \| `string` + +#### preview? + +> `optional` **preview**: `boolean` + +#### processors? + +> `optional` **processors**: `string` + +#### prolog + +> **prolog**: `undefined` \| `string` + +#### prolog-selector + +> **prolog-selector**: `undefined` \| `string` + +#### prolog.pl + +> **pl**: `undefined` \| `string` + +#### prolog.pl-selector + +> **pl-selector**: `undefined` \| `string` + +#### pug + +> **pug**: `undefined` \| `string` + +#### pug-selector + +> **pug-selector**: `undefined` \| `string` + +#### py + +> **py**: `undefined` \| `string` + +#### py-selector + +> **py-selector**: `undefined` \| `string` + +#### py-wasm + +> **py-wasm**: `undefined` \| `string` + +#### py-wasm-selector + +> **py-wasm-selector**: `undefined` \| `string` + +#### py3 + +> **py3**: `undefined` \| `string` + +#### py3-selector + +> **py3-selector**: `undefined` \| `string` + +#### pyodide + +> **pyodide**: `undefined` \| `string` + +#### pyodide-selector + +> **pyodide-selector**: `undefined` \| `string` + +#### python + +> **python**: `undefined` \| `string` + +#### python-selector + +> **python-selector**: `undefined` \| `string` + +#### python-wasm + +> **python-wasm**: `undefined` \| `string` + +#### python-wasm-selector + +> **python-wasm-selector**: `undefined` \| `string` + +#### pythonwasm + +> **pythonwasm**: `undefined` \| `string` + +#### pythonwasm-selector + +> **pythonwasm-selector**: `undefined` \| `string` + +#### pywasm + +> **pywasm**: `undefined` \| `string` + +#### pywasm-selector + +> **pywasm-selector**: `undefined` \| `string` + +#### r + +> **r**: `undefined` \| `string` + +#### r-selector + +> **r-selector**: `undefined` \| `string` + +#### r-wasm + +> **r-wasm**: `undefined` \| `string` + +#### r-wasm-selector + +> **r-wasm-selector**: `undefined` \| `string` + +#### raw? + +> `optional` **raw**: [`Language`](../type-aliases/Language.md) + +#### rb + +> **rb**: `undefined` \| `string` + +#### rb-selector + +> **rb-selector**: `undefined` \| `string` + +#### re + +> **re**: `undefined` \| `string` + +#### re-selector + +> **re-selector**: `undefined` \| `string` + +#### react + +> **react**: `undefined` \| `string` + +#### react-jsx + +> **react-jsx**: `undefined` \| `string` + +#### react-jsx-selector + +> **react-jsx-selector**: `undefined` \| `string` + +#### react-native + +> **react-native**: `undefined` \| `string` + +#### react-native-selector + +> **react-native-selector**: `undefined` \| `string` + +#### react-native-tsx + +> **react-native-tsx**: `undefined` \| `string` + +#### react-native-tsx-selector + +> **react-native-tsx-selector**: `undefined` \| `string` + +#### react-native.jsx + +> **jsx**: `undefined` \| `string` + +#### react-native.jsx-selector + +> **jsx-selector**: `undefined` \| `string` + +#### react-native.tsx + +> **tsx**: `undefined` \| `string` + +#### react-native.tsx-selector + +> **tsx-selector**: `undefined` \| `string` + +#### react-selector + +> **react-selector**: `undefined` \| `string` + +#### react-tsx + +> **react-tsx**: `undefined` \| `string` + +#### react-tsx-selector + +> **react-tsx-selector**: `undefined` \| `string` + +#### react.jsx + +> **jsx**: `undefined` \| `string` + +#### react.jsx-selector + +> **jsx-selector**: `undefined` \| `string` + +#### react.tsx + +> **tsx**: `undefined` \| `string` + +#### react.tsx-selector + +> **tsx-selector**: `undefined` \| `string` + +#### readonly? + +> `optional` **readonly**: `boolean` + +If `true`, editors are loaded in read-only mode, where the user is not allowed to change the code. + +By default, when readonly is set to true, the light-weight code editor [CodeJar](https://livecodes.io/docs/features/editor-settings#code-editor) is used. +If you wish to use another editor, set the [editor](https://livecodes.io/docs/configuration/configuration-object#editor) property. + +##### Default + +```ts +false +``` + +#### reason + +> **reason**: `undefined` \| `string` + +#### reason-selector + +> **reason-selector**: `undefined` \| `string` + +#### recoverUnsaved? + +> `optional` **recoverUnsaved**: `boolean` + +Enables [recovering last unsaved project](https://livecodes.io/docs/features/recover) when the app is reopened. + +##### Default + +```ts +true +``` + +#### rei + +> **rei**: `undefined` \| `string` + +#### rei-selector + +> **rei-selector**: `undefined` \| `string` + +#### res + +> **res**: `undefined` \| `string` + +#### res-selector + +> **res-selector**: `undefined` \| `string` + +#### rescript + +> **rescript**: `undefined` \| `string` + +#### rescript-selector + +> **rescript-selector**: `undefined` \| `string` + +#### resi + +> **resi**: `undefined` \| `string` + +#### resi-selector + +> **resi-selector**: `undefined` \| `string` + +#### rich + +> **rich**: `undefined` \| `string` + +#### rich-selector + +> **rich-selector**: `undefined` \| `string` + +#### richtext + +> **richtext**: `undefined` \| `string` + +#### richtext-selector + +> **richtext-selector**: `undefined` \| `string` + +#### riot + +> **riot**: `undefined` \| `string` + +#### riot-selector + +> **riot-selector**: `undefined` \| `string` + +#### riotjs + +> **riotjs**: `undefined` \| `string` + +#### riotjs-selector + +> **riotjs-selector**: `undefined` \| `string` + +#### rlang + +> **rlang**: `undefined` \| `string` + +#### rlang-selector + +> **rlang-selector**: `undefined` \| `string` + +#### rstats + +> **rstats**: `undefined` \| `string` + +#### rstats-selector + +> **rstats-selector**: `undefined` \| `string` + +#### rte + +> **rte**: `undefined` \| `string` + +#### rte-selector + +> **rte-selector**: `undefined` \| `string` + +#### rte.html + +> **html**: `undefined` \| `string` + +#### rte.html-selector + +> **html-selector**: `undefined` \| `string` + +#### ruby + +> **ruby**: `undefined` \| `string` + +#### ruby-selector + +> **ruby-selector**: `undefined` \| `string` + +#### ruby-wasm + +> **ruby-wasm**: `undefined` \| `string` + +#### ruby-wasm-selector + +> **ruby-wasm-selector**: `undefined` \| `string` + +#### rubywasm + +> **rubywasm**: `undefined` \| `string` + +#### rubywasm-selector + +> **rubywasm-selector**: `undefined` \| `string` + +#### sass + +> **sass**: `undefined` \| `string` + +#### sass-selector + +> **sass-selector**: `undefined` \| `string` + +#### scheme + +> **scheme**: `undefined` \| `string` + +#### scheme-selector + +> **scheme-selector**: `undefined` \| `string` + +#### scm + +> **scm**: `undefined` \| `string` + +#### scm-selector + +> **scm-selector**: `undefined` \| `string` + +#### screen? + +> `optional` **screen**: `"new"` \| `"open"` \| `"embed"` \| `"sync"` \| `"about"` \| `"welcome"` \| `"add-snippet"` \| `"login"` \| `"info"` \| `"assets"` \| `"add-asset"` \| `"snippets"` \| `"import"` \| `"resources"` \| `"share"` \| `"deploy"` \| `"backup"` \| `"broadcast"` \| `"custom-settings"` \| `"editor-settings"` \| `"code-to-image"` \| `"test-editor"` \| `"keyboard-shortcuts"` + +#### script? + +> `optional` **script**: `object` + +An object that configures the language and content of the script editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +##### Default + +```ts +{ language: "javascript", content: "" } +``` + +#### script.content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### script.contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### script.foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### script.hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### script.hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### script.hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### script.language + +> **language**: [`Language`](../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### script.order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### script.position? + +> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### script.selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### script.title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### scripts? + +> `optional` **scripts**: `string` + +#### scrollPosition? + +> `optional` **scrollPosition**: `boolean` + +#### scss + +> **scss**: `undefined` \| `string` + +#### scss-selector + +> **scss-selector**: `undefined` \| `string` + +#### sdkVersion? + +> `optional` **sdkVersion**: `string` + +#### semicolons? + +> `optional` **semicolons**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use semi-colons. + +##### Default + +```ts +true +``` + +#### showSpacing? + +> `optional` **showSpacing**: `boolean` + +Enables [showing element spacing](https://livecodes.io/docs/features/result#show-spacings) in the result page. + +##### Default + +```ts +false +``` + +#### singleQuote? + +> `optional` **singleQuote**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use single quotes instead of double quotes. + +##### Default + +```ts +false +``` + +#### solid + +> **solid**: `undefined` \| `string` + +#### solid-selector + +> **solid-selector**: `undefined` \| `string` + +#### solid.jsx + +> **jsx**: `undefined` \| `string` + +#### solid.jsx-selector + +> **jsx-selector**: `undefined` \| `string` + +#### solid.tsx + +> **tsx**: `undefined` \| `string` + +#### solid.tsx-selector + +> **tsx-selector**: `undefined` \| `string` + +#### sql + +> **sql**: `undefined` \| `string` + +#### sql-selector + +> **sql-selector**: `undefined` \| `string` + +#### sqlite + +> **sqlite**: `undefined` \| `string` + +#### sqlite-selector + +> **sqlite-selector**: `undefined` \| `string` + +#### sqlite3 + +> **sqlite3**: `undefined` \| `string` + +#### sqlite3-selector + +> **sqlite3-selector**: `undefined` \| `string` + +#### stencil + +> **stencil**: `undefined` \| `string` + +#### stencil-selector + +> **stencil-selector**: `undefined` \| `string` + +#### stencil.tsx + +> **tsx**: `undefined` \| `string` + +#### stencil.tsx-selector + +> **tsx-selector**: `undefined` \| `string` + +#### styl + +> **styl**: `undefined` \| `string` + +#### styl-selector + +> **styl-selector**: `undefined` \| `string` + +#### style? + +> `optional` **style**: `object` + +An object that configures the language and content of the style editor. + +See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details. + +##### Default + +```ts +{ language: "css", content: "" } +``` + +#### style.content? + +> `optional` **content**: `string` + +The initial content of the code editor. + +##### Default + +```ts +"" +``` + +#### style.contentUrl? + +> `optional` **contentUrl**: `string` + +A URL to load `content` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `content` property had no value. + +#### style.foldedLines? + +> `optional` **foldedLines**: `object`[] + +Lines that get folded when the editor loads. + +This can be used for less relevant content. + +##### Example + +```ts +[{ from: 5, to: 8 }, { from: 15, to: 20 }] +``` + +#### style.hiddenContent? + +> `optional` **hiddenContent**: `string` + +Hidden content that gets evaluated without being visible in the code editor. + +This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests) + +#### style.hiddenContentUrl? + +> `optional` **hiddenContentUrl**: `string` + +A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled. + +The URL is only fetched if `hiddenContent` property had no value. + +#### style.hideTitle? + +> `optional` **hideTitle**: `boolean` + +If `true`, the title of the code editor is hidden, however its code is still evaluated. + +This can be useful in embedded playgrounds (e.g. for hiding unnecessary code). + +#### style.language + +> **language**: [`Language`](../type-aliases/Language.md) + +A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)). + +For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language) + +#### style.order? + +> `optional` **order**: `number` + +The order of the editor in the UI. + +##### Default + +```ts +0 +``` + +#### style.position? + +> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md) + +The initial position of the cursor in the code editor. + +##### Example + +```ts +{lineNumber: 5, column: 10} +``` + +#### style.selector? + +> `optional` **selector**: `string` + +A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom). + +#### style.title? + +> `optional` **title**: `string` + +If set, this is used as the title of the editor in the UI, +overriding the default title set to the language name +(e.g. `"Python"` can be used instead of `"Py (Wasm)"`). + +#### stylesheets? + +> `optional` **stylesheets**: `string` + +#### stylis + +> **stylis**: `undefined` \| `string` + +#### stylis-selector + +> **stylis-selector**: `undefined` \| `string` + +#### stylus + +> **stylus**: `undefined` \| `string` + +#### stylus-selector + +> **stylus-selector**: `undefined` \| `string` + +#### sucrase + +> **sucrase**: `undefined` \| `string` + +#### sucrase-selector + +> **sucrase-selector**: `undefined` \| `string` + +#### svelte + +> **svelte**: `undefined` \| `string` + +#### svelte-app + +> **svelte-app**: `undefined` \| `string` + +#### svelte-app-selector + +> **svelte-app-selector**: `undefined` \| `string` + +#### svelte-selector + +> **svelte-selector**: `undefined` \| `string` + +#### tabSize? + +> `optional` **tabSize**: `number` + +The number of spaces per indentation-level. + +Also used in [code formatting](https://livecodes.io/docs/features/code-format). + +##### Default + +```ts +2 +``` + +#### tags? + +> `optional` **tags**: `string` \| `string`[] + +#### tcl + +> **tcl**: `undefined` \| `string` + +#### tcl-selector + +> **tcl-selector**: `undefined` \| `string` + +#### teal + +> **teal**: `undefined` \| `string` + +#### teal-selector + +> **teal-selector**: `undefined` \| `string` + +#### template? + +> `optional` **template**: [`TemplateName`](../internal/type-aliases/TemplateName.md) + +A [starter template](https://livecodes.io/docs/features/templates) to load. +Allowed valued can be found [here](https://livecodes.io/docs/api/internal/type-aliases/TemplateName). + +#### tests? + +> `optional` **tests**: (\{ language?: Language \| undefined; content?: string \| undefined; contentUrl?: string \| undefined; hiddenContent?: string \| undefined; hiddenContentUrl?: string \| undefined; ... 5 more ...; position?: EditorPosition \| undefined; \} \| undefined) & ("" \| ... 4 more ... \| "full") + +Configures the [language](https://livecodes.io/docs/features/tests#supported-languages) +and content of [tests](https://livecodes.io/docs/features/tests). + +#### theme? + +> `optional` **theme**: [`Theme`](../internal/type-aliases/Theme.md) + +Sets the app [theme](https://livecodes.io/docs/features/themes) to light/dark mode. + +##### Default + +```ts +"dark" +``` + +#### themeColor? + +> `optional` **themeColor**: `string` + +Sets the app theme color. +If `undefined`, it is set to `"hsl(214, 40%, 50%)"`. + +##### Default + +```ts +undefined +``` + +#### title? + +> `optional` **title**: `string` + +Project title. +This is used as [result page](https://livecodes.io/docs/features/result) title and title meta tag. +Also used in project search. + +##### Default + +```ts +"Untitled Project" +``` + +#### tl + +> **tl**: `undefined` \| `string` + +#### tl-selector + +> **tl-selector**: `undefined` \| `string` + +#### tools? + +> `optional` **tools**: `"none"` \| `"closed"` \| `"open"` \| `"full"` \| `"console"` \| `"compiled"` \| `"tests"` \| "console\|undefined" \| "console\|" \| "console\|none" \| "console\|closed" \| "console\|open" \| "console\|full" \| "compiled\|undefined" \| "compiled\|" \| "compiled\|none" \| "compiled\|closed" \| "compiled\|open" \| "compiled\|full" \| "tests\|undefined" \| "tests\|" \| "tests\|none" \| "tests\|closed" \| "tests\|open" \| "tests\|full" \| "console,console\|undefined" \| "console,console\|" \| "console,console\|none" \| "console,console\|closed" \| "console,console\|open" \| "console,console\|full" \| "console,compiled\|undefined" \| "console,compiled\|" \| "console,compiled\|none" \| "console,compiled\|closed" \| "console,compiled\|open" \| "console,compiled\|full" \| "console,tests\|undefined" \| "console,tests\|" \| "console,tests\|none" \| "console,tests\|closed" \| "console,tests\|open" \| "console,tests\|full" \| "compiled,console\|undefined" \| "compiled,console\|" \| "compiled,console\|none" \| "compiled,console\|closed" \| "compiled,console\|open" \| "compiled,console\|full" \| "compiled,compiled\|undefined" \| "compiled,compiled\|" \| "compiled,compiled\|none" \| "compiled,compiled\|closed" \| "compiled,compiled\|open" \| "compiled,compiled\|full" \| "compiled,tests\|undefined" \| "compiled,tests\|" \| "compiled,tests\|none" \| "compiled,tests\|closed" \| "compiled,tests\|open" \| "compiled,tests\|full" \| "tests,console\|undefined" \| "tests,console\|" \| "tests,console\|none" \| "tests,console\|closed" \| "tests,console\|open" \| "tests,console\|full" \| "tests,compiled\|undefined" \| "tests,compiled\|" \| "tests,compiled\|none" \| "tests,compiled\|closed" \| "tests,compiled\|open" \| "tests,compiled\|full" \| "tests,tests\|undefined" \| "tests,tests\|" \| "tests,tests\|none" \| "tests,tests\|closed" \| "tests,tests\|open" \| "tests,tests\|full" \| "console,console,console\|undefined" \| "console,console,console\|" \| "console,console,console\|none" \| "console,console,console\|closed" \| "console,console,console\|open" \| "console,console,console\|full" \| "console,console,compiled\|undefined" \| "console,console,compiled\|" \| "console,console,compiled\|none" \| "console,console,compiled\|closed" \| "console,console,compiled\|open" \| "console,console,compiled\|full" \| "console,console,tests\|undefined" \| "console,console,tests\|" \| "console,console,tests\|none" \| "console,console,tests\|closed" \| "console,console,tests\|open" \| "console,console,tests\|full" \| "console,compiled,console\|undefined" \| "console,compiled,console\|" \| "console,compiled,console\|none" \| "console,compiled,console\|closed" \| "console,compiled,console\|open" \| "console,compiled,console\|full" \| "console,compiled,compiled\|undefined" \| "console,compiled,compiled\|" \| "console,compiled,compiled\|none" \| "console,compiled,compiled\|closed" \| "console,compiled,compiled\|open" \| "console,compiled,compiled\|full" \| "console,compiled,tests\|undefined" \| "console,compiled,tests\|" \| "console,compiled,tests\|none" \| "console,compiled,tests\|closed" \| "console,compiled,tests\|open" \| "console,compiled,tests\|full" \| "console,tests,console\|undefined" \| "console,tests,console\|" \| "console,tests,console\|none" \| "console,tests,console\|closed" \| "console,tests,console\|open" \| "console,tests,console\|full" \| "console,tests,compiled\|undefined" \| "console,tests,compiled\|" \| "console,tests,compiled\|none" \| "console,tests,compiled\|closed" \| "console,tests,compiled\|open" \| "console,tests,compiled\|full" \| "console,tests,tests\|undefined" \| "console,tests,tests\|" \| "console,tests,tests\|none" \| "console,tests,tests\|closed" \| "console,tests,tests\|open" \| "console,tests,tests\|full" \| "compiled,console,console\|undefined" \| "compiled,console,console\|" \| "compiled,console,console\|none" \| "compiled,console,console\|closed" \| "compiled,console,console\|open" \| "compiled,console,console\|full" \| "compiled,console,compiled\|undefined" \| "compiled,console,compiled\|" \| "compiled,console,compiled\|none" \| "compiled,console,compiled\|closed" \| "compiled,console,compiled\|open" \| "compiled,console,compiled\|full" \| "compiled,console,tests\|undefined" \| "compiled,console,tests\|" \| "compiled,console,tests\|none" \| "compiled,console,tests\|closed" \| "compiled,console,tests\|open" \| "compiled,console,tests\|full" \| "compiled,compiled,console\|undefined" \| "compiled,compiled,console\|" \| "compiled,compiled,console\|none" \| "compiled,compiled,console\|closed" \| "compiled,compiled,console\|open" \| "compiled,compiled,console\|full" \| "compiled,compiled,compiled\|undefined" \| "compiled,compiled,compiled\|" \| "compiled,compiled,compiled\|none" \| "compiled,compiled,compiled\|closed" \| "compiled,compiled,compiled\|open" \| "compiled,compiled,compiled\|full" \| "compiled,compiled,tests\|undefined" \| "compiled,compiled,tests\|" \| "compiled,compiled,tests\|none" \| "compiled,compiled,tests\|closed" \| "compiled,compiled,tests\|open" \| "compiled,compiled,tests\|full" \| "compiled,tests,console\|undefined" \| "compiled,tests,console\|" \| "compiled,tests,console\|none" \| "compiled,tests,console\|closed" \| "compiled,tests,console\|open" \| "compiled,tests,console\|full" \| "compiled,tests,compiled\|undefined" \| "compiled,tests,compiled\|" \| "compiled,tests,compiled\|none" \| "compiled,tests,compiled\|closed" \| "compiled,tests,compiled\|open" \| "compiled,tests,compiled\|full" \| "compiled,tests,tests\|undefined" \| "compiled,tests,tests\|" \| "compiled,tests,tests\|none" \| "compiled,tests,tests\|closed" \| "compiled,tests,tests\|open" \| "compiled,tests,tests\|full" \| "tests,console,console\|undefined" \| "tests,console,console\|" \| "tests,console,console\|none" \| "tests,console,console\|closed" \| "tests,console,console\|open" \| "tests,console,console\|full" \| "tests,console,compiled\|undefined" \| "tests,console,compiled\|" \| "tests,console,compiled\|none" \| "tests,console,compiled\|closed" \| "tests,console,compiled\|open" \| "tests,console,compiled\|full" \| "tests,console,tests\|undefined" \| "tests,console,tests\|" \| "tests,console,tests\|none" \| "tests,console,tests\|closed" \| "tests,console,tests\|open" \| "tests,console,tests\|full" \| "tests,compiled,console\|undefined" \| "tests,compiled,console\|" \| "tests,compiled,console\|none" \| "tests,compiled,console\|closed" \| "tests,compiled,console\|open" \| "tests,compiled,console\|full" \| "tests,compiled,compiled\|undefined" \| "tests,compiled,compiled\|" \| "tests,compiled,compiled\|none" \| "tests,compiled,compiled\|closed" \| "tests,compiled,compiled\|open" \| "tests,compiled,compiled\|full" \| "tests,compiled,tests\|undefined" \| "tests,compiled,tests\|" \| "tests,compiled,tests\|none" \| "tests,compiled,tests\|closed" \| "tests,compiled,tests\|open" \| "tests,compiled,tests\|full" \| "tests,tests,console\|undefined" \| "tests,tests,console\|" \| "tests,tests,console\|none" \| "tests,tests,console\|closed" \| "tests,tests,console\|open" \| "tests,tests,console\|full" \| "tests,tests,compiled\|undefined" \| "tests,tests,compiled\|" \| "tests,tests,compiled\|none" \| "tests,tests,compiled\|closed" \| "tests,tests,compiled\|open" \| "tests,tests,compiled\|full" \| "tests,tests,tests\|undefined" \| "tests,tests,tests\|" \| "tests,tests,tests\|none" \| "tests,tests,tests\|closed" \| "tests,tests,tests\|open" \| "tests,tests,tests\|full" + +#### trailingComma? + +> `optional` **trailingComma**: `boolean` + +Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use [trailing commas](https://prettier.io/docs/en/options.html#trailing-commas). + +##### Default + +```ts +true +``` + +#### ts + +> **ts**: `undefined` \| `string` + +#### ts-selector + +> **ts-selector**: `undefined` \| `string` + +#### tsx + +> **tsx**: `undefined` \| `string` + +#### tsx-selector + +> **tsx-selector**: `undefined` \| `string` + +#### twig + +> **twig**: `undefined` \| `string` + +#### twig-selector + +> **twig-selector**: `undefined` \| `string` + +#### types? + +> `optional` **types**: `object` + +Allows providing custom TypeScript type declarations for better [editor intellisense](https://livecodes.io/docs/features/intellisense). + +It is an object where each key represents module name and value represents the types. + +See docs for [Types](https://livecodes.io/docs/configuration/configuration-object#types) +and [Custom Types](https://livecodes.io/docs/features/intellisense#custom-types) + +##### Examples + +```js +{ + "types": { + "my-demo-lib": "https://my-custom-domain/my-type-declarations.d.ts" + } +} +``` + +``` +{ + "types": { + "my-demo-lib": { + "url": "https://my-custom-domain/types.d.ts", + "autoload": true, + "declareAsModule": true + } +} +``` + +#### typescript + +> **typescript**: `undefined` \| `string` + +#### typescript-selector + +> **typescript-selector**: `undefined` \| `string` + +#### useTabs? + +> `optional` **useTabs**: `boolean` + +If `true`, lines are indented with tabs instead of spaces. + +Also used in [code formatting](https://livecodes.io/docs/features/code-format). + +##### Default + +```ts +false +``` + +#### vento + +> **vento**: `undefined` \| `string` + +#### vento-selector + +> **vento-selector**: `undefined` \| `string` + +#### version? + +> `readonly` `optional` **version**: `string` + +This is a read-only property which specifies the current LiveCodes version. + +Version specified in [exported](https://livecodes.io/docs/features/export) projects allows automatically upgrading the project configuration when imported by an app with a newer version. + +#### ~~view?~~ + +> `optional` **view**: `"split"` \| `"result"` \| `"editor"` + +##### Deprecated + +The `view` option has been moved to `config.view`. +For headless mode use `headless: true`. + +The [default view](https://livecodes.io/docs/features/default-view) for the playground. + +When set to `"headless"`, the playground is loaded in [headless mode](https://livecodes.io/docs/sdk/headless). + +##### Default + +```ts +"split" +``` + +#### vto + +> **vto**: `undefined` \| `string` + +#### vto-selector + +> **vto-selector**: `undefined` \| `string` + +#### vue + +> **vue**: `undefined` \| `string` + +#### vue-app + +> **vue-app**: `undefined` \| `string` + +#### vue-app-selector + +> **vue-app-selector**: `undefined` \| `string` + +#### vue-selector + +> **vue-selector**: `undefined` \| `string` + +#### vue2 + +> **vue2**: `undefined` \| `string` + +#### vue2-selector + +> **vue2-selector**: `undefined` \| `string` + +#### vue3 + +> **vue3**: `undefined` \| `string` + +#### vue3-selector + +> **vue3-selector**: `undefined` \| `string` + +#### wasm + +> **wasm**: `undefined` \| `string` + +#### wasm-selector + +> **wasm-selector**: `undefined` \| `string` + +#### wasm.cpp + +> **cpp**: `undefined` \| `string` + +#### wasm.cpp-selector + +> **cpp-selector**: `undefined` \| `string` + +#### wasm.cs + +> **cs**: `undefined` \| `string` + +#### wasm.cs-selector + +> **cs-selector**: `undefined` \| `string` + +#### wasm.lua + +> **lua**: `undefined` \| `string` + +#### wasm.lua-selector + +> **lua-selector**: `undefined` \| `string` + +#### wasm.php + +> **php**: `undefined` \| `string` + +#### wasm.php-selector + +> **php-selector**: `undefined` \| `string` + +#### wasm.py + +> **py**: `undefined` \| `string` + +#### wasm.py-selector + +> **py-selector**: `undefined` \| `string` + +#### wasm.rb + +> **rb**: `undefined` \| `string` + +#### wasm.rb-selector + +> **rb-selector**: `undefined` \| `string` + +#### wast + +> **wast**: `undefined` \| `string` + +#### wast-selector + +> **wast-selector**: `undefined` \| `string` + +#### wat + +> **wat**: `undefined` \| `string` + +#### wat-selector + +> **wat-selector**: `undefined` \| `string` + +#### webassembly + +> **webassembly**: `undefined` \| `string` + +#### webassembly-selector + +> **webassembly-selector**: `undefined` \| `string` + +#### welcome? + +> `optional` **welcome**: `boolean` + +If `true`, the [welcome screen](https://livecodes.io/docs/features/welcome) is displayed when the app loads. + +#### wordWrap? + +> `optional` **wordWrap**: `boolean` + +Enables word-wrap for long lines. + +##### Default + +```ts +false +``` + +#### x? + +> `optional` **x**: `string` + +#### xht + +> **xht**: `undefined` \| `string` + +#### xht-selector + +> **xht-selector**: `undefined` \| `string` + +#### xml + +> **xml**: `undefined` \| `string` + +#### xml-selector + +> **xml-selector**: `undefined` \| `string` + +#### zoom? + +> `optional` **zoom**: `1` \| `0.5` \| `0.25` + +Sets result page [zoom level](https://livecodes.io/docs/features/result#result-page-zoom). + +#### Defined in + +[models.ts:338](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L338) + +*** + +### template? + +> `optional` **template**: [`TemplateName`](../internal/type-aliases/TemplateName.md) + +A [starter template](https://livecodes.io/docs/features/templates) to load. +Allowed valued can be found [here](https://livecodes.io/docs/api/internal/type-aliases/TemplateName). + +#### Defined in + +[models.ts:383](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L383) + +*** + +### ~~view?~~ + +> `optional` **view**: `"split"` \| `"result"` \| `"editor"` \| `"headless"` + +#### Deprecated + +The `view` option has been moved to `config.view`. +For headless mode use `headless: true`. + +The [default view](https://livecodes.io/docs/features/default-view) for the playground. + +When set to `"headless"`, the playground is loaded in [headless mode](https://livecodes.io/docs/sdk/headless). + +#### Default + +```ts +"split" +``` + +#### Defined in + +[models.ts:396](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L396) + +--- + + + +# Interface: Playground + +An object that represents the LiveCodes playground instance. + +The object exposes multiple [methods](https://livecodes.io/docs/sdk/js-ts/#sdk-methods) that can be used to interact with the playground. + +See [docs](https://livecodes.io/docs/sdk/js-ts) for details. + +## Extends + +- [`API`](../internal/interfaces/API.md) + +## Properties + +### destroy() + +> **destroy**: () => `Promise`\<`void`\> + +Destroys the playground instance, and removes event listeners. + +Further call to any SDK methods throws an error. + +#### Returns + +`Promise`\<`void`\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + await playground.destroy(); + // playground destroyed + // any further SDK call throws an error +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`destroy`](../internal/interfaces/API.md#destroy) + +#### Defined in + +[models.ts:211](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L211) + +*** + +### exec() + +> **exec**: (`command`, ...`args`) => `Promise`\<`object` \| `object`\> + +Executes custom commands, including: `"setBroadcastToken"` and `"showVersion"`. + +See [docs](https://livecodes.io/docs/sdk/js-ts#exec) for details. + +#### Parameters + +• **command**: [`APICommands`](../internal/type-aliases/APICommands.md) + +• ...**args**: `any`[] + +#### Returns + +`Promise`\<`object` \| `object`\> + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`exec`](../internal/interfaces/API.md#exec) + +#### Defined in + +[models.ts:194](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L194) + +*** + +### format() + +> **format**: (`allEditors`?) => `Promise`\<`void`\> + +Formats the code. + +By default, the code in all editors (markup, style and script) is formatted. +To format only the active editor, the value `false` should be passed as an argument. + +#### Parameters + +• **allEditors?**: `boolean` + +#### Returns + +`Promise`\<`void`\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + await playground.format(); + // code in editors is formatted +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`format`](../internal/interfaces/API.md#format) + +#### Defined in + +[models.ts:31](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L31) + +*** + +### getCode() + +> **getCode**: () => `Promise`\<[`Code`](Code.md)\> + +Gets the playground code (including source code, source language and compiled code) for each editor (markup, style, script), in addition to result page HTML. + +See [Code](https://livecodes.io/docs/api/interfaces/Code) for the structure of the returned object. + +#### Returns + +`Promise`\<[`Code`](Code.md)\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const code = await playground.getCode(); + + // source code, language and compiled code for the script editor + const { content, language, compiled } = code.script; + + // result page HTML + const result = code.result; +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`getCode`](../internal/interfaces/API.md#getcode) + +#### Defined in + +[models.ts:105](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L105) + +*** + +### getConfig() + +> **getConfig**: (`contentOnly`?) => `Promise`\<[`Config`](Config.md)\> + +Gets a [configuration object](https://livecodes.io/docs/configuration/configuration-object) representing the playground state. + +This can be used to restore state if passed as an [EmbedOptions](https://livecodes.io/docs/sdk/js-ts#embed-options) property when [creating playgrounds](https://livecodes.io/docs/sdk/js-ts/#createplayground), +or can be manipulated and loaded in run-time using [`setConfig`](https://livecodes.io/docs/sdk/js-ts#setconfig) method. + +#### Parameters + +• **contentOnly?**: `boolean` + +#### Returns + +`Promise`\<[`Config`](Config.md)\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const config = await playground.getConfig(); +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`getConfig`](../internal/interfaces/API.md#getconfig) + +#### Defined in + +[models.ts:64](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L64) + +*** + +### getShareUrl() + +> **getShareUrl**: (`shortUrl`?) => `Promise`\<`string`\> + +Gets a [share url](https://livecodes.io/docs/features/share) for the current project. + +By default, the url has a long query string representing the compressed encoded config object. +If the argument `shortUrl` was set to `true`, a short url is generated. + +#### Parameters + +• **shortUrl?**: `boolean` + +#### Returns + +`Promise`\<`string`\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const longUrl = await playground.getShareUrl(); + const shortUrl = await playground.getShareUrl(true); +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`getShareUrl`](../internal/interfaces/API.md#getshareurl) + +#### Defined in + +[models.ts:48](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L48) + +*** + +### load() + +> **load**: () => `Promise`\<`void`\> + +Loads the playground, if not already loaded. + +When the embed option [loading](https://livecodes.io/docs/sdk/js-ts#loading) is set to `"click"`, the playground is not loaded automatically. +Instead, a screen is shown with "Click to load" button. Calling the SDK method `load()` allows loading the playground. + +If the playground was not loaded, calling any other method will load the playground first before executing. + +#### Returns + +`Promise`\<`void`\> + +#### Defined in + +[models.ts:298](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L298) + +*** + +### ~~onChange()~~ + +> **onChange**: (`fn`) => `object` + +Runs a callback function when code changes. + +#### Parameters + +• **fn** + +#### Returns + +`object` + +##### ~~remove()~~ + +> **remove**: () => `void` + +###### Returns + +`void` + +#### Deprecated + +Use [`watch`](https://livecodes.io/docs/sdk/js-ts#watch) method instead. + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`onChange`](../internal/interfaces/API.md#onchange) + +#### Defined in + +[models.ts:142](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L142) + +*** + +### run() + +> **run**: () => `Promise`\<`void`\> + +Runs the [result page](https://livecodes.io/docs/features/result) (after any required compilation for code). + +#### Returns + +`Promise`\<`void`\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + await playground.run(); + // new result page is displayed +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`run`](../internal/interfaces/API.md#run) + +#### Defined in + +[models.ts:14](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L14) + +*** + +### runTests() + +> **runTests**: () => `Promise`\<`object`\> + +Runs project [tests](https://livecodes.io/docs/features/tests) (if present) and gets test results. + +#### Returns + +`Promise`\<`object`\> + +##### results + +> **results**: [`TestResult`](../internal/interfaces/TestResult.md)[] + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const { results } = await playground.runTests(); +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`runTests`](../internal/interfaces/API.md#runtests) + +#### Defined in + +[models.ts:135](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L135) + +*** + +### setConfig() + +> **setConfig**: (`config`) => `Promise`\<[`Config`](Config.md)\> + +Loads a new project using the passed configuration object. + +#### Parameters + +• **config**: `Partial`\<[`Config`](Config.md)\> + +#### Returns + +`Promise`\<[`Config`](Config.md)\> + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then(async (playground) => { + const config = { + markup: { + language: "html", + content: "Hello World!", + }, + }; + const newConfig = await playground.setConfig(config); + // new project loaded +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`setConfig`](../internal/interfaces/API.md#setconfig) + +#### Defined in + +[models.ts:84](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L84) + +*** + +### show() + +> **show**: (`panel`, `options`?) => `Promise`\<`void`\> + +Shows the selected panel. + +See [docs](https://livecodes.io/docs/sdk/js-ts#show) for details. + +#### Parameters + +• **panel**: `"result"` \| [`EditorId`](../internal/type-aliases/EditorId.md) \| `"console"` \| `"compiled"` \| `"tests"` \| `"editor"` \| `"toggle-result"` + +• **options?** + +• **options.column?**: `number` + +• **options.full?**: `boolean` + +• **options.line?**: `number` + +• **options.zoom?**: `1` \| `0.5` \| `0.25` + +#### Returns + +`Promise`\<`void`\> + +#### Example + +```ts +await playground.show("style"); +await playground.show("toggle-result"); +await playground.show("result", { full: true }); +await playground.show("script"); +await playground.show("result", { zoom: 0.5 }); +await playground.show("console", { full: true }); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`show`](../internal/interfaces/API.md#show) + +#### Defined in + +[models.ts:119](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L119) + +*** + +### watch + +> **watch**: [`WatchLoad`](../internal/type-aliases/WatchLoad.md) & [`WatchReady`](../internal/type-aliases/WatchReady.md) & [`WatchCode`](../internal/type-aliases/WatchCode.md) & [`WatchConsole`](../internal/type-aliases/WatchConsole.md) & [`WatchTests`](../internal/type-aliases/WatchTests.md) & [`WatchDestroy`](../internal/type-aliases/WatchDestroy.md) + +Allows to watch for various playground events. +It takes 2 arguments: event name and a callback function that will be called on every event. + +event name can be one of: `"load" | "ready" | "code" | "console" | "tests" | "destroy"` + +In some events, the callback function will be called with an object that supplies relevant data to the callback function (e.g. code, console output, test results). + +The watch method returns an object with a single method (`remove`), which when called will remove the callback from watching further events. + +See [docs](https://livecodes.io/docs/sdk/js-ts#watch) for details. + +#### Example + +```ts +import { createPlayground } from "livecodes"; + +createPlayground("#container").then((playground) => { + const codeWatcher = playground.watch("code", ({ code, config }) => { + // this will run on every code change + console.log("code:", code); + console.log("config:", config); + }); + + const consoleWatcher = playground.watch("console", ({ method, args }) => { + // this will run on every console output + console[method](...args); + }); + + const testsWatcher = playground.watch("tests", ({ results }) => { + // this will run when tests run + results.forEach((testResult) => { + console.log("status:", testResult.status); // "pass", "fail" or "skip" + console.log(testResult.errors); // array of errors as strings + }); + }); + + // then later + codeWatcher.remove(); + consoleWatcher.remove(); + testsWatcher.remove(); + // events are no longer watched +}); +``` + +#### Inherited from + +[`API`](../internal/interfaces/API.md).[`watch`](../internal/interfaces/API.md#watch) + +#### Defined in + +[models.ts:187](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L187) + +--- + + + +# Type Alias: Language + +> **Language**: `"html"` \| `"htm"` \| `"markdown"` \| `"md"` \| `"mdown"` \| `"mkdn"` \| `"mdx"` \| `"astro"` \| `"pug"` \| `"jade"` \| `"haml"` \| `"asciidoc"` \| `"adoc"` \| `"asc"` \| `"mustache"` \| `"handlebars"` \| `"hbs"` \| `"ejs"` \| `"eta"` \| `"nunjucks"` \| `"njk"` \| `"liquid"` \| `"liquidjs"` \| `"dot"` \| `"twig"` \| `"vento"` \| `"vto"` \| `"art-template"` \| `"art"` \| `"jinja"` \| `"bbcode"` \| `"bb"` \| `"mjml"` \| `"diagrams"` \| `"diagram"` \| `"graph"` \| `"plt"` \| `"richtext"` \| `"rte"` \| `"rich"` \| `"rte.html"` \| `"css"` \| `"scss"` \| `"sass"` \| `"less"` \| `"stylus"` \| `"styl"` \| `"stylis"` \| `"postcss"` \| `"javascript"` \| `"js"` \| `"json"` \| `"babel"` \| `"es"` \| `"sucrase"` \| `"typescript"` \| `"flow"` \| `"ts"` \| `"jsx"` \| `"tsx"` \| `"react"` \| `"react-jsx"` \| `"react.jsx"` \| `"react-tsx"` \| `"react.tsx"` \| `"react-native"` \| `"react-native.jsx"` \| `"react-native-tsx"` \| `"react-native.tsx"` \| `"vue"` \| `"vue3"` \| `"vue2"` \| `"vue-app"` \| `"app.vue"` \| `"svelte"` \| `"svelte-app"` \| `"app.svelte"` \| `"stencil"` \| `"stencil.tsx"` \| `"solid"` \| `"solid.jsx"` \| `"solid.tsx"` \| `"riot"` \| `"riotjs"` \| `"malina"` \| `"malinajs"` \| `"xht"` \| `"coffeescript"` \| `"coffee"` \| `"livescript"` \| `"ls"` \| `"civet"` \| `"clio"` \| `"imba"` \| `"assemblyscript"` \| `"as"` \| `"python"` \| `"py"` \| `"pyodide"` \| `"python-wasm"` \| `"py-wasm"` \| `"pythonwasm"` \| `"pywasm"` \| `"py3"` \| `"wasm.py"` \| `"r"` \| `"rlang"` \| `"rstats"` \| `"r-wasm"` \| `"ruby"` \| `"rb"` \| `"ruby-wasm"` \| `"wasm.rb"` \| `"rubywasm"` \| `"go"` \| `"golang"` \| `"php"` \| `"php-wasm"` \| `"phpwasm"` \| `"wasm.php"` \| `"cpp"` \| `"c"` \| `"C"` \| `"cp"` \| `"cxx"` \| `"c++"` \| `"cppm"` \| `"ixx"` \| `"ii"` \| `"hpp"` \| `"h"` \| `"cpp-wasm"` \| `"cppwasm"` \| `"cwasm"` \| `"wasm.cpp"` \| `"clang"` \| `"clang.cpp"` \| `"java"` \| `"csharp"` \| `"csharp-wasm"` \| `"cs"` \| `"cs-wasm"` \| `"wasm.cs"` \| `"perl"` \| `"pl"` \| `"pm"` \| `"lua"` \| `"lua-wasm"` \| `"luawasm"` \| `"wasm.lua"` \| `"teal"` \| `"tl"` \| `"fennel"` \| `"fnl"` \| `"julia"` \| `"jl"` \| `"scheme"` \| `"scm"` \| `"commonlisp"` \| `"common-lisp"` \| `"lisp"` \| `"clojurescript"` \| `"clojure"` \| `"cljs"` \| `"clj"` \| `"cljc"` \| `"edn"` \| `"gleam"` \| `"rescript"` \| `"res"` \| `"resi"` \| `"reason"` \| `"re"` \| `"rei"` \| `"ocaml"` \| `"ml"` \| `"mli"` \| `"tcl"` \| `"wat"` \| `"wast"` \| `"webassembly"` \| `"wasm"` \| `"Binary"` \| `"sql"` \| `"sqlite"` \| `"sqlite3"` \| `"pg.sql"` \| `"pgsql.sql"` \| `"pgsql"` \| `"pg"` \| `"pglite"` \| `"pglite.sql"` \| `"postgresql"` \| `"postgres"` \| `"postgre.sql"` \| `"postgresql.sql"` \| `"prolog.pl"` \| `"prolog"` \| `"blockly"` \| `"blockly.xml"` \| `"xml"` \| `"pintora"` + +Language name, alias or extension. + +## Defined in + +[models.ts:884](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L884) + +--- + + + +# Function: createPlayground() + +## createPlayground(container, options) + +> **createPlayground**(`container`, `options`?): `Promise`\<[`Playground`](../interfaces/Playground.md)\> + +Creates a LiveCodes playground. + +### Parameters + +• **container**: `string` \| `HTMLElement` + +`HTMLElement` or a string representing a CSS selector. This is the container where the playground is rendered. + If not found, an error is thrown (except in [headless mode](https://livecodes.io/docs/sdk/headless), in which this parameter is optional and can be omitted). + +• **options?**: [`EmbedOptions`](../interfaces/EmbedOptions.md) + +The [embed options](https://livecodes.io/docs/sdk/js-ts#embed-options) for the playground (optional). + +### Returns + +`Promise`\<[`Playground`](../interfaces/Playground.md)\> + +- A promise that resolves to a [`Playground`](https://livecodes.io/docs/api/interfaces/Playground/) object which exposes many [SDK methods](https://livecodes.io/docs/sdk/js-ts/#sdk-methods) that can be used to interact with the playground. + +### Defined in + +[index.ts:26](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/index.ts#L26) + +## createPlayground(options) + +> **createPlayground**(`options`): `Promise`\<[`Playground`](../interfaces/Playground.md)\> + +### Parameters + +• **options**: [`EmbedOptions`](../interfaces/EmbedOptions.md) & `object` + +### Returns + +`Promise`\<[`Playground`](../interfaces/Playground.md)\> + +### Defined in + +[index.ts:30](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/index.ts#L30) + +--- + + + +# Function: getPlaygroundUrl() + +> **getPlaygroundUrl**(`options`): `string` + +Gets the URL to a LiveCodes playground (as a string) from the provided [options](https://livecodes.io/docs/sdk/js-ts#embed-options). +This can be useful for providing links to run code in playgrounds. + +## Parameters + +• **options**: [`EmbedOptions`](../interfaces/EmbedOptions.md) = `{}` + +The [options](https://livecodes.io/docs/sdk/js-ts#embed-options) for the playground. + +## Returns + +`string` + +- The URL of the playground (as a string). + +large objects like config and params are store in the url hash params while the rest are in the search params +unless config is a string in which case it is stored in searchParams + +## Defined in + +[index.ts:391](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/index.ts#L391) \ No newline at end of file diff --git a/docs/llms.txt b/docs/llms.txt new file mode 100644 index 0000000..80c2eee --- /dev/null +++ b/docs/llms.txt @@ -0,0 +1,274 @@ +# LiveCodes + +> LiveCodes is a feature-rich, open-source, client-side code playground that supports React, Vue, Svelte, Solid, JavaScript, TypeScript, CSS, Sass, Tailwind CSS, Python, Go, Ruby, PHP, and 90+ languages/frameworks. + +A large number of starter templates are available to help you get started quickly. +Projects can be saved, shared, exported (e.g. to GitHub Gists), deployed (e.g. to GitHub Pages), or embedded in web pages. +A powerful yet easy-to-use SDK enables the creation of and communication with embedded playgrounds. + +With extensive language support and high configurability, LiveCodes can easily adapt to your needs. +It offers excellent mobile support, featuring a responsive layout and a touch-friendly code editor. + +LiveCodes is an outstanding tool for learning, teaching, prototyping, sharing, and testing code. +It can be easily self-hosted, if needed, on any static file server. + +LiveCodes is completely free for unlimited use, with no ads and no account required. +Its MIT License also permits commercial use. + +- [Docs](https://livecodes.io/docs/llms.txt) +- [Full Docs](https://livecodes.io/docs/llms-full.txt) +- [README](https://raw.githubusercontent.com/live-codes/livecodes/refs/heads/develop/README.md) + + + +## Docs + +- [Overview](https://livecodes.io/docs/overview.html.md) +- [Why Another Playground?](https://livecodes.io/docs/why.html.md) +- [Getting Started](https://livecodes.io/docs/getting-started.html.md) + +## Features + +- [Features](https://livecodes.io/docs/features/index.html.md) +- [Projects](https://livecodes.io/docs/features/projects.html.md) +- [Templates](https://livecodes.io/docs/features/templates.html.md) +- [CSS](https://livecodes.io/docs/features/css.html.md) +- [Result Page](https://livecodes.io/docs/features/result.html.md) +- [External Resources](https://livecodes.io/docs/features/external-resources.html.md) +- [Tools Pane](https://livecodes.io/docs/features/tools-pane.html.md) +- [Console](https://livecodes.io/docs/features/console.html.md) +- [Compiled Code](https://livecodes.io/docs/features/compiled-code.html.md) +- [Tests](https://livecodes.io/docs/features/tests.html.md) +- [Module Resolution](https://livecodes.io/docs/features/module-resolution.html.md) +- [IntelliSense](https://livecodes.io/docs/features/intellisense.html.md) +- [AI Code Assistant 🪄](https://livecodes.io/docs/features/ai.html.md) +- [Code Format](https://livecodes.io/docs/features/code-format.html.md) +- [Command Menu](https://livecodes.io/docs/features/command-menu.html.md) +- [Keyboard Shortcuts](https://livecodes.io/docs/features/keyboard-shortcuts.html.md) +- [User Settings](https://livecodes.io/docs/features/user-settings.html.md) +- [Editor Settings](https://livecodes.io/docs/features/editor-settings.html.md) +- [Internationalization (i18n)](https://livecodes.io/docs/features/i18n.html.md) +- [Default Template/Language](https://livecodes.io/docs/features/default-template-language.html.md) +- [Assets](https://livecodes.io/docs/features/assets.html.md) +- [Code Snippets](https://livecodes.io/docs/features/snippets.html.md) +- [Import](https://livecodes.io/docs/features/import.html.md) +- [Export](https://livecodes.io/docs/features/export.html.md) +- [Share](https://livecodes.io/docs/features/share.html.md) +- [Welcome Screen](https://livecodes.io/docs/features/welcome.html.md) +- [Recover Unsaved](https://livecodes.io/docs/features/recover.html.md) +- [Code to Image](https://livecodes.io/docs/features/code-to-image.html.md) +- [Display Modes](https://livecodes.io/docs/features/display-modes.html.md) +- [Default View](https://livecodes.io/docs/features/default-view.html.md) +- [Themes](https://livecodes.io/docs/features/themes.html.md) +- [Mobile Support](https://livecodes.io/docs/features/mobile.html.md) +- [Embedded Playgrounds](https://livecodes.io/docs/features/embeds.html.md) +- [Lite Mode](https://livecodes.io/docs/features/lite.html.md) +- [Read-Only](https://livecodes.io/docs/features/read-only.html.md) +- [Permanent URL](https://livecodes.io/docs/features/permanent-url.html.md) +- [Code Prefill](https://livecodes.io/docs/features/code-prefill.html.md) +- [Data URLs](https://livecodes.io/docs/features/data-urls.html.md) +- [Deploy](https://livecodes.io/docs/features/deploy.html.md) +- [Sync](https://livecodes.io/docs/features/sync.html.md) +- [Broadcast](https://livecodes.io/docs/features/broadcast.html.md) +- [Backup / Restore](https://livecodes.io/docs/features/backup-restore.html.md) +- [GitHub Integration](https://livecodes.io/docs/features/github-integration.html.md) +- [Integrations](https://livecodes.io/docs/features/integrations.html.md) +- [User Management](https://livecodes.io/docs/features/user-management.html.md) +- [Security](https://livecodes.io/docs/features/security.html.md) +- [Self-Hosting](https://livecodes.io/docs/features/self-hosting.html.md) + +## Configuration + +- [Configuration](https://livecodes.io/docs/configuration/index.html.md) +- [Configuration Object](https://livecodes.io/docs/configuration/configuration-object.html.md) +- [Query Parameters](https://livecodes.io/docs/configuration/query-params.html.md) + +## SDK + +- [LiveCodes SDK](https://livecodes.io/docs/sdk/index.html.md) +- [JavaScript/TypeScript SDK](https://livecodes.io/docs/sdk/js-ts.html.md) +- [React SDK](https://livecodes.io/docs/sdk/react.html.md) +- [Vue SDK](https://livecodes.io/docs/sdk/vue.html.md) +- [Svelte](https://livecodes.io/docs/sdk/svelte.html.md) +- [Headless Mode](https://livecodes.io/docs/sdk/headless.html.md) + +## Advanced + +- [Advanced Topics](https://livecodes.io/docs/advanced/index.html.md) +- [Custom Settings](https://livecodes.io/docs/advanced/custom-settings.html.md) +- [Services](https://livecodes.io/docs/advanced/services.html.md) + +## Languages + +- [Languages](https://livecodes.io/docs/languages/index.html.md) +- [art-template](https://livecodes.io/docs/languages/art-template.html.md) +- [AsciiDoc](https://livecodes.io/docs/languages/asciidoc.html.md) +- [AssemblyScript](https://livecodes.io/docs/languages/assemblyscript.html.md) +- [Astro](https://livecodes.io/docs/languages/astro.html.md) +- [Autoprefixer](https://livecodes.io/docs/languages/autoprefixer.html.md) +- [Babel](https://livecodes.io/docs/languages/babel.html.md) +- [BBCode](https://livecodes.io/docs/languages/bbcode.html.md) +- [Blockly](https://livecodes.io/docs/languages/blockly.html.md) +- [Civet](https://livecodes.io/docs/languages/civet.html.md) +- [Clio](https://livecodes.io/docs/languages/clio.html.md) +- [ClojureScript](https://livecodes.io/docs/languages/clojurescript.html.md) +- [CoffeeScript](https://livecodes.io/docs/languages/coffeescript.html.md) +- [Common Lisp](https://livecodes.io/docs/languages/commonlisp.html.md) +- [C/C++ (Wasm)](https://livecodes.io/docs/languages/cpp-wasm.html.md) +- [C++](https://livecodes.io/docs/languages/cpp.html.md) +- [C# (Wasm)](https://livecodes.io/docs/languages/csharp-wasm.html.md) +- [CSS](https://livecodes.io/docs/languages/css.html.md) +- [CSS Modules](https://livecodes.io/docs/languages/cssmodules.html.md) +- [cssnano](https://livecodes.io/docs/languages/cssnano.html.md) +- [Diagrams](https://livecodes.io/docs/languages/diagrams.html.md) +- [doT](https://livecodes.io/docs/languages/dot.html.md) +- [EJS](https://livecodes.io/docs/languages/ejs.html.md) +- [Eta](https://livecodes.io/docs/languages/eta.html.md) +- [Fennel](https://livecodes.io/docs/languages/fennel.html.md) +- [Flow](https://livecodes.io/docs/languages/flow.html.md) +- [Gleam](https://livecodes.io/docs/languages/gleam.html.md) +- [Go (Golang)](https://livecodes.io/docs/languages/go.html.md) +- [Haml](https://livecodes.io/docs/languages/haml.html.md) +- [Handlebars](https://livecodes.io/docs/languages/handlebars.html.md) +- [HTML](https://livecodes.io/docs/languages/html.html.md) +- [Imba](https://livecodes.io/docs/languages/imba.html.md) +- [Languages](https://livecodes.io/docs/languages/index.html.md) +- [Java](https://livecodes.io/docs/languages/java.html.md) +- [JavaScript](https://livecodes.io/docs/languages/javascript.html.md) +- [Jinja](https://livecodes.io/docs/languages/jinja.html.md) +- [JSX](https://livecodes.io/docs/languages/jsx.html.md) +- [Julia](https://livecodes.io/docs/languages/julia.html.md) +- [Less](https://livecodes.io/docs/languages/less.html.md) +- [Lightning CSS](https://livecodes.io/docs/languages/lightningcss.html.md) +- [Liquid](https://livecodes.io/docs/languages/liquid.html.md) +- [LiveScript](https://livecodes.io/docs/languages/livescript.html.md) +- [Lua (Wasm)](https://livecodes.io/docs/languages/lua-wasm.html.md) +- [Lua](https://livecodes.io/docs/languages/lua.html.md) +- [Malina.js](https://livecodes.io/docs/languages/malina.html.md) +- [Markdown](https://livecodes.io/docs/languages/markdown.html.md) +- [MDX](https://livecodes.io/docs/languages/mdx.html.md) +- [MJML](https://livecodes.io/docs/languages/mjml.html.md) +- [Mustache](https://livecodes.io/docs/languages/mustache.html.md) +- [Nunjucks](https://livecodes.io/docs/languages/nunjucks.html.md) +- [OCaml](https://livecodes.io/docs/languages/ocaml.html.md) +- [Perl](https://livecodes.io/docs/languages/perl.html.md) +- [PHP (Wasm)](https://livecodes.io/docs/languages/php-wasm.html.md) +- [PHP](https://livecodes.io/docs/languages/php.html.md) +- [PostCSS](https://livecodes.io/docs/languages/postcss.html.md) +- [Import Url](https://livecodes.io/docs/languages/postcssImportUrl.html.md) +- [Preset Env](https://livecodes.io/docs/languages/postcssPresetEnv.html.md) +- [PostgreSQL](https://livecodes.io/docs/languages/postgresql.html.md) +- [Prolog](https://livecodes.io/docs/languages/prolog.html.md) +- [Pug](https://livecodes.io/docs/languages/pug.html.md) +- [PurgeCSS](https://livecodes.io/docs/languages/purgecss.html.md) +- [Python (Wasm)](https://livecodes.io/docs/languages/python-wasm.html.md) +- [Python](https://livecodes.io/docs/languages/python.html.md) +- [R](https://livecodes.io/docs/languages/r.html.md) +- [React Native (TSX)](https://livecodes.io/docs/languages/react-native-tsx.html.md) +- [React Native](https://livecodes.io/docs/languages/react-native.html.md) +- [React (TSX)](https://livecodes.io/docs/languages/react-tsx.html.md) +- [React](https://livecodes.io/docs/languages/react.html.md) +- [Reason](https://livecodes.io/docs/languages/reason.html.md) +- [ReScript](https://livecodes.io/docs/languages/rescript.html.md) +- [Rich Text Editor](https://livecodes.io/docs/languages/richtext.html.md) +- [Riot.js](https://livecodes.io/docs/languages/riot.html.md) +- [Ruby (Wasm)](https://livecodes.io/docs/languages/ruby-wasm.html.md) +- [Ruby](https://livecodes.io/docs/languages/ruby.html.md) +- [Sass](https://livecodes.io/docs/languages/sass.html.md) +- [Scheme](https://livecodes.io/docs/languages/scheme.html.md) +- [SCSS](https://livecodes.io/docs/languages/scss.html.md) +- [Solid](https://livecodes.io/docs/languages/solid.html.md) +- [Solid (TS)](https://livecodes.io/docs/languages/solid.tsx.html.md) +- [SQL (SQLite)](https://livecodes.io/docs/languages/sql.html.md) +- [Stencil](https://livecodes.io/docs/languages/stencil.html.md) +- [Stylis](https://livecodes.io/docs/languages/stylis.html.md) +- [Stylus](https://livecodes.io/docs/languages/stylus.html.md) +- [Sucrase](https://livecodes.io/docs/languages/sucrase.html.md) +- [Svelte](https://livecodes.io/docs/languages/svelte.html.md) +- [Tailwind CSS](https://livecodes.io/docs/languages/tailwindcss.html.md) +- [Tcl](https://livecodes.io/docs/languages/tcl.html.md) +- [Teal](https://livecodes.io/docs/languages/teal.html.md) +- [Token CSS](https://livecodes.io/docs/languages/tokencss.html.md) +- [TSX](https://livecodes.io/docs/languages/tsx.html.md) +- [Twig](https://livecodes.io/docs/languages/twig.html.md) +- [TypeScript](https://livecodes.io/docs/languages/typescript.html.md) +- [UnoCSS](https://livecodes.io/docs/languages/unocss.html.md) +- [Vento](https://livecodes.io/docs/languages/vento.html.md) +- [Vue SFC](https://livecodes.io/docs/languages/vue.html.md) +- [Vue 2 SFC](https://livecodes.io/docs/languages/vue2.html.md) +- [WebAssembly Text](https://livecodes.io/docs/languages/wat.html.md) +- [Windi CSS](https://livecodes.io/docs/languages/windicss.html.md) + +## Docs + +- [Bookmarklet](https://livecodes.io/docs/bookmarklet.html.md) +- [GitHub Action ⚡](https://livecodes.io/docs/gh-action.html.md) +- [Markdown to LiveCodes](https://livecodes.io/docs/markdown-to-livecodes.html.md) +- [Contribution](https://livecodes.io/docs/contribution.html.md) +- [Credits](https://livecodes.io/docs/credits.html.md) +- [License](https://livecodes.io/docs/license.html.md) +- [Sponsor LiveCodes](https://livecodes.io/docs/sponsor.html.md) +- [Contact](https://livecodes.io/docs/contact.html.md) +- [About us](https://livecodes.io/docs/about.html.md) + +## Display Modes + +- [Display Modes](https://livecodes.io/docs/examples/display-modes/index.html.md) +- [Display Mode: full](https://livecodes.io/docs/examples/display-modes/full.html.md) +- [Display Mode: editor](https://livecodes.io/docs/examples/display-modes/editor.html.md) +- [Display Mode: codeblock](https://livecodes.io/docs/examples/display-modes/codeblock.html.md) +- [Display Mode: result](https://livecodes.io/docs/examples/display-modes/result.html.md) + +## Internal + +- [\_internal](https://livecodes.io/docs/api/internal/index.html.md) + +## Interfaces + +- [Interface: API](https://livecodes.io/docs/api/internal/interfaces/API.html.md) +- [Interface: AppConfig](https://livecodes.io/docs/api/internal/interfaces/AppConfig.html.md) +- [Interface: ContentConfig](https://livecodes.io/docs/api/internal/interfaces/ContentConfig.html.md) +- [Interface: EditorConfig](https://livecodes.io/docs/api/internal/interfaces/EditorConfig.html.md) +- [Interface: EditorPosition](https://livecodes.io/docs/api/internal/interfaces/EditorPosition.html.md) +- [Interface: FormatterConfig](https://livecodes.io/docs/api/internal/interfaces/FormatterConfig.html.md) +- [Interface: TestResult](https://livecodes.io/docs/api/internal/interfaces/TestResult.html.md) +- [Interface: Types](https://livecodes.io/docs/api/internal/interfaces/Types.html.md) +- [Interface: UserConfig](https://livecodes.io/docs/api/internal/interfaces/UserConfig.html.md) + +## Type Aliases + +- [Type Alias: APICommands](https://livecodes.io/docs/api/internal/type-aliases/APICommands.html.md) +- [Type Alias: AppLanguage](https://livecodes.io/docs/api/internal/type-aliases/AppLanguage.html.md) +- [Type Alias: CDN](https://livecodes.io/docs/api/internal/type-aliases/CDN.html.md) +- [Type Alias: CodejarTheme](https://livecodes.io/docs/api/internal/type-aliases/CodejarTheme.html.md) +- [Type Alias: CodemirrorTheme](https://livecodes.io/docs/api/internal/type-aliases/CodemirrorTheme.html.md) +- [Type Alias: CssPresetId](https://livecodes.io/docs/api/internal/type-aliases/CssPresetId.html.md) +- [Type Alias: EditorId](https://livecodes.io/docs/api/internal/type-aliases/EditorId.html.md) +- [Type Alias: EditorTheme](https://livecodes.io/docs/api/internal/type-aliases/EditorTheme.html.md) +- [Type Alias: MonacoTheme](https://livecodes.io/docs/api/internal/type-aliases/MonacoTheme.html.md) +- [Type Alias: Processor](https://livecodes.io/docs/api/internal/type-aliases/Processor.html.md) +- [Type Alias: TemplateName](https://livecodes.io/docs/api/internal/type-aliases/TemplateName.html.md) +- [Type Alias: Theme](https://livecodes.io/docs/api/internal/type-aliases/Theme.html.md) +- [Type Alias: ToolsPaneStatus](https://livecodes.io/docs/api/internal/type-aliases/ToolsPaneStatus.html.md) +- [Type Alias: WatchCode()](https://livecodes.io/docs/api/internal/type-aliases/WatchCode.html.md) +- [Type Alias: WatchConsole()](https://livecodes.io/docs/api/internal/type-aliases/WatchConsole.html.md) +- [Type Alias: WatchDestroy()](https://livecodes.io/docs/api/internal/type-aliases/WatchDestroy.html.md) +- [Type Alias: WatchLoad()](https://livecodes.io/docs/api/internal/type-aliases/WatchLoad.html.md) +- [Type Alias: WatchReady()](https://livecodes.io/docs/api/internal/type-aliases/WatchReady.html.md) +- [Type Alias: WatchTests()](https://livecodes.io/docs/api/internal/type-aliases/WatchTests.html.md) + +## Interfaces + +- [Interface: Code](https://livecodes.io/docs/api/interfaces/Code.html.md) +- [Interface: Config](https://livecodes.io/docs/api/interfaces/Config.html.md) +- [Interface: EmbedOptions](https://livecodes.io/docs/api/interfaces/EmbedOptions.html.md) +- [Interface: Playground](https://livecodes.io/docs/api/interfaces/Playground.html.md) + +## Type Aliases + +- [Type Alias: Language](https://livecodes.io/docs/api/type-aliases/Language.html.md) + +## Functions + +- [Function: createPlayground()](https://livecodes.io/docs/api/functions/createPlayground.html.md) +- [Function: getPlaygroundUrl()](https://livecodes.io/docs/api/functions/getPlaygroundUrl.html.md) diff --git a/docs/markdown-to-livecodes.html.md b/docs/markdown-to-livecodes.html.md new file mode 100644 index 0000000..b963655 --- /dev/null +++ b/docs/markdown-to-livecodes.html.md @@ -0,0 +1,582 @@ +# Markdown to LiveCodes + +Markdown and MDX code blocks can be easily converted to interactive LiveCodes playgrounds. + +The playgrounds can run any of the supported [languages](./languages/index.html.md) in LiveCodes, and can be customized to any of the [configuration options](./configuration/index.html.md). + +A fenced code block in Markdown can be rendered as a LiveCodes playground by adding the `livecodes` parameter to the code block language meta. + +This is provided as [plugins](#packages) for [markdown-it](https://github.com/markdown-it/markdown-it), [marked](https://github.com/markedjs/marked) and [remark](https://github.com/remarkjs/remark). +These plugins allow the seamless integration with most of the popular frameworks like Astro, Docusaurus, Next.js, Storybook, VitePress, etc. See the section "[Using with Frameworks](#using-with-frameworks)" for getting started. + +## Demo + +This is an example code block: + +````md +```jsx +import { useState } from "react"; + +function App() { + const [count, setCount] = useState(0); + return ( +
    +

    You clicked {count} times.

    + +
    + ); +} + +export default App; +``` +```` + +The above code block is normally rendered like this: + +```jsx +import { useState } from "react"; + +function App() { + const [count, setCount] = useState(0); + return ( +
    +

    You clicked {count} times.

    + +
    + ); +} + +export default App; +``` + +
    + +The code block can instead be rendered as an interactive playground by adding the `livecodes` parameter to the code block language meta: + +````md {1} +```jsx livecodes +import { useState } from "react"; + +function App() { + const [count, setCount] = useState(0); + return ( +
    +

    You clicked {count} times.

    + +
    + ); +} + +export default App; +``` +```` + +to be displayed like this: + +```jsx livecodes +import { useState } from "react"; + +function App() { + const [count, setCount] = useState(0); + return ( +
    +

    You clicked {count} times.

    + +
    + ); +} + +export default App; +``` + +
    +
    + +The playground can be customized by setting [options](#options) that are applied to all code blocks or by [meta parameters](#meta-parameters) that are applied to individual code blocks. + +Alternatively, the code block can be kept as it is, and a button or a link (**Edit in LiveCodes**) is appended, below the code block, that opens the code in a LiveCodes playground. +This is achieved by adding the `render=button` or `render=link` parameter to the code block language meta. + +This displays a button: + +````md {1} +```jsx livecodes render=button +import { useState } from "react"; + +function App() { + const [count, setCount] = useState(0); + return ( +
    +

    You clicked {count} times.

    + +
    + ); +} + +export default App; +``` +```` + +```jsx livecodes render=button +import { useState } from "react"; + +function App() { + const [count, setCount] = useState(0); + return ( +
    +

    You clicked {count} times.

    + +
    + ); +} + +export default App; +``` +
    +
    +While this displays a link: + +````md {1} +```jsx livecodes render=link +import { useState } from "react"; + +function App() { + const [count, setCount] = useState(0); + return ( +
    +

    You clicked {count} times.

    + +
    + ); +} + +export default App; +``` +```` + +```jsx livecodes render=link +import { useState } from "react"; + +function App() { + const [count, setCount] = useState(0); + return ( +
    +

    You clicked {count} times.

    + +
    + ); +} + +export default App; +``` + +## Packages + +All the functionality described here can be achieved using *any* of the following packages: + +- [`markdown-it-livecodes`](https://www.npmjs.com/package/markdown-it-livecodes): A [markdown-it](https://github.com/markdown-it/markdown-it) plugin. +- [`marked-livecodes`](https://www.npmjs.com/package/marked-livecodes): A [marked](https://github.com/markedjs/marked) plugin. +- [`remark-livecodes`](https://www.npmjs.com/package/remark-livecodes): A [remark](https://github.com/remarkjs/remark) plugin. +- [`gatsby-remark-livecodes`](https://www.npmjs.com/package/gatsby-remark-livecodes): A [gatsby](https://github.com/gatsbyjs/gatsby) plugin. + +See the section "[Using with Frameworks](#using-with-frameworks)" for using the plugins with popular frameworks like Astro, Docusaurus, Next.js, Storybook, VitePress, etc. + +## Usage + +### markdown-it-livecodes + +To use the `markdown-it-livecodes` plugin, first install it: + +```bash npm2yarn +npm install markdown-it markdown-it-livecodes +``` + +Then it can be used like this: + +````js +import markdownIt from "markdown-it"; +import markdownItLivecodes from "markdown-it-livecodes"; + +const input = "```js livecodes \nconsole.log('Hello World!');\n```"; + +const output = markdownIt() + .use(markdownItLivecodes, { + /* options */ + }) + .render(input); + +console.log(output); // +```` + +### marked-livecodes + +To use the `marked-livecodes` plugin, first install it: + +```bash npm2yarn +npm install marked marked-livecodes +``` + +Then it can be used like this: + +````js +import marked from "marked"; +import markedLivecodes from "marked-livecodes"; + +const input = "```js livecodes \nconsole.log('Hello World!');\n```"; + +const output = await marked + .use(markedLivecodes, { + /* options */ + }) + .parse(input); + +console.log(output); // +```` + +### remark-livecodes + +To use the `remark-livecodes` plugin, first install it: + +```bash npm2yarn +npm install remark remark-livecodes +``` + +Then it can be used like this: + +````js +import { remark } from "remark"; +import remarkLivecodes from "remark-livecodes"; + +const input = "```js livecodes \nconsole.log('Hello World!');\n```"; + +const output = await remark() + .use(remarkLivecodes, { + /* options */ + }) + .process(input); + +console.log(String(output)); // +```` + +### gatsby-remark-livecodes + +See usage with [Gatsby](#gatsby). + +## Options + +Options can be passed to the plugins. These options apply to all code blocks. + +These options include LiveCodes SDK [embed options](./sdk/js-ts.html.md)#embed-options) (except `headless`). + +Example: + +````js +const output = await remark() + .use(remarkLivecodes, { + // highlight-start + loading: "click", + params: { + console: "open" + theme: "light", + } + // highlight-end + }) + .process(input); +```` + +In addition, the following options are also available: + +- `render`: The render mode for the LiveCodes playgrounds. This can be one of the following: + - `playground` (default): Replaces the code block with an iframe that displays the LiveCodes playground. By default, [`"simple"` mode](./features/display-modes.html.md) is used, but this can be changed in [options](#options) or [meta parameters](#meta-parameters). + - `link`: Keeps the code block as it is, and appends a link (**Edit in LiveCodes**), below the code block, that opens the code in a LiveCodes playground. + - `button`: Keeps the code block as it is, and appends a button (Edit in LiveCodes), below the code block, that opens the code in a LiveCodes playground.
    + Edit in LiveCodes button + - `meta`: Keeps the code block as it is, and adds the URL of the playground to the `data-livecodes-url` attribute of the `` element. In addition, in `remark-livecodes` the URL is added to the AST (`node.data.livecodesUrl` and `node.data.hProperties.dataLivecodesUrl`). In `markdown-it-livecodes` the URL is added to `env.livecodesUrl`. + This can be used by other plugins (e.g. to display a custom run button overlying the code block). +- `height`: The height of the playground iframe. +- `className`: The class name to be applied to the iframe, link or button. + Note: If the class name of the button contains `"dark"` (e.g. `"dark-btn"`), the dark button will be used.
    + Edit in LiveCodes button +- `auto`: When set to `true`, it automatically enables the `livecodes` parameter for all code blocks without having to explicitly add it. + This is useful when you have a large number of code blocks and don't want to add the `livecodes` parameter to each code block. + To disable this for a specific code block, add the `livecodes=false` [meta parameter](#meta-parameters) to the code block. + +## Meta Parameters + +Individual code blocks can be configured using meta parameters. These are key/value pairs, separated by spaces, that are added after the language name. + +Meta parameters of code blocks override the [options](#options) passed to the plugin. + +Example: + +````markdown {1} +```jsx livecodes render=button className=dark-btn console=open +import { useState, useEffect } from "react"; + +export default () => { + const [count, setCount] = useState(0); + + useEffect(() => { + console.log("count:", count); + }, [count]); + + return ( +
    +

    You clicked {count} times.

    + +
    + ); +}; +``` +```` + +All LiveCodes [configuration query parameters](./configuration/query-params.html.md) can be used as code block meta parameters (e.g. ` ```js livecodes console=open theme=light`). See the [LiveCodes configuration docs](./configuration/configuration-object.html.md) for more information. + +In addition, the following meta parameters are available: + +- `livecodes`: Enables the LiveCodes playground for the code block. This can be omitted if the `auto` option is set to `true`. When `livecodes` is set to `false`, the code block is not handled by the plugin. +- `render`: The render mode. See the [Options](#options) section for more information. +- `height`: The height of the playground iframe. +- `className`: The class name for the playground iframe, link or button. +- `lang`: This overrides the language of the code block (e.g. ` ```jsx livecodes lang=react` or ` ```py livecodes lang=py-wasm`). See the [Languages](./languages/index.html.md) docs for more language information. + +## Using with Frameworks + +This guide shows how to use the suitable plugin in different frameworks. + +### Astro + +([demo](https://markdown-to-livecodes-astro.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-astro)) + +Install the `remark-livecodes` plugin: + +```bash npm2yarn +npm install -D remark-livecodes +``` + +This is an example for adding the `remark-livecodes` plugin to `astro.config.mjs` file: + +```js title="astro.config.js" +import { defineConfig } from "astro/config"; +import mdx from "@astrojs/mdx"; +import remarkLivecodes from "remark-livecodes"; + +export default defineConfig({ + // ... + integrations: [mdx()], + markdown: { + remarkPlugins: [ + [remarkLivecodes, { /* options */ }], + ], + }, +}); +``` + +### Docusaurus + +([demo](https://markdown-to-livecodes-docusaurus.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-docusaurus)) + +Install the `remark-livecodes` plugin: + +```bash npm2yarn +npm install -D remark-livecodes +``` + +This is an example for adding the `remark-livecodes` plugin to `docusaurus.config.js` file: + +```js title="docusaurus.config.js" +export default { + presets: [ + [ + 'classic', + { + docs: { + // ... + remarkPlugins: [ + [require('remark-livecodes'), { /* options */ }], + ], + }, + }, + ], + ], + // ... +}; +``` + +### Eleventy + +([demo](https://markdown-to-livecodes-11ty.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-11ty)) + +Install the `markdown-it-livecodes` plugin: + +```bash npm2yarn +npm install -D markdown-it-livecodes +``` + +This is an example for adding the `markdown-it-livecodes` plugin to `eleventy.config.js` file: + +```js title="eleventy.config.js" +import markdownItLivecodes from "markdown-it-livecodes"; + +export default async function (eleventyConfig) { + eleventyConfig.amendLibrary("md", (mdLib) => + mdLib.use(markdownItLivecodes, { /* options */ }), + ); + // ... +} +``` + +### Gatsby + +([demo](https://markdown-to-livecodes-gatsby.pages.dev/markdown-to-livecodes/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-gatsby)) + +Install the `gatsby-remark-livecodes` plugin: + +```bash npm2yarn +npm install -D gatsby-remark-livecodes +``` + +This is an example for adding the `gatsby-remark-livecodes` plugin to `gatsby-config.js` file: + +```js title="gatsby-config.js" +module.exports = { + // ... + plugins: [ + // ... + { + resolve: 'gatsby-transformer-remark', + options: { + plugins: [ + { + resolve: 'gatsby-remark-livecodes', + options: { /* options */ }, + }, + ], + }, + }, + ], +}; +``` + +### Next.js + +([demo](https://markdown-to-livecodes-nextjs.pages.dev/mdx-page) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-nextjs)) + +See [Next.js docs](https://nextjs.org/docs/app/guides/mdx) for using markdown and MDX in Next.js. + +Install the `remark-livecodes` plugin: + +```bash npm2yarn +npm install -D remark-livecodes +``` + +This is an example for adding the `remark-livecodes` plugin to `next.config.js` file: + +```js title="next.config.js" +import createMDX from "@next/mdx"; +import remarkLivecodes from "remark-livecodes"; + +const nextConfig = { + // ... + pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"], +}; + +const withMDX = createMDX({ + options: { + remarkPlugins: [ + [remarkLivecodes, { /* other options */ }], + ], + }, +}); + +export default withMDX(nextConfig); +``` + +When using Turbopack for local development, check the guide for [using plugins with Turbopack](https://nextjs.org/docs/app/guides/mdx#using-plugins-with-turbopack). + +### react-markdown + +`react-markdown` is a React component to render markdown. + +This is an example for using the `remark-livecodes` plugin with `react-markdown`: + +Install the `remark-livecodes` plugin: + +```bash npm2yarn +npm install remark-livecodes +``` + +```jsx title="App.jsx" livecodes render=button +import Markdown from 'react-markdown'; +import remarkLivecodes from 'remark-livecodes'; + +const markdown = + '```jsx livecodes\nexport default () =>

    Hello World

    \n```'; + +export default () => ( + + {markdown} + +); +``` + +### Storybook + +([demo](https://markdown-to-livecodes-storybook.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-storybook)) + +Install the `remark-livecodes` plugin: + +```bash npm2yarn +npm install -D remark-livecodes +``` + +This is an example for adding the `remark-livecodes` plugin to `storybook/main.js` file: + +```js title="storybook/main.js" +import remarkLivecodes from "remark-livecodes"; + +export default { + // ... + addons: [ + // ... + { + name: "@storybook/addon-docs", + options: { + mdxPluginOptions: { + mdxCompileOptions: { + remarkPlugins: [ + [remarkLivecodes, { /* options */ }], + ], + }, + }, + }, + }, + ], +}; +``` + +### VitePress + +([demo](https://markdown-to-livecodes-vitepress.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-vitepress)) + +Install the `markdown-it-livecodes` plugin: + +```bash npm2yarn +npm install -D markdown-it-livecodes +``` + +This is an example for adding the `markdown-it-livecodes` plugin to `vitepress.config.js` file: + +```js title=".vitepress/config.js" +import { defineConfig } from "vitepress"; +import markDownItLivecodes from "markdown-it-livecodes"; + +export default defineConfig({ + // ... + markdown: { + config: (md) => { + md.use(markDownItLivecodes, { /* options */ }); + }, + }, +}); +``` \ No newline at end of file diff --git a/docs/markdown-to-livecodes/index.html b/docs/markdown-to-livecodes/index.html new file mode 100644 index 0000000..7690e48 --- /dev/null +++ b/docs/markdown-to-livecodes/index.html @@ -0,0 +1,162 @@ +Markdown to LiveCodes | LiveCodes

    Markdown to LiveCodes

    +

    Markdown and MDX code blocks can be easily converted to interactive LiveCodes playgrounds.

    +

    The playgrounds can run any of the supported languages in LiveCodes, and can be customized to any of the configuration options.

    +

    A fenced code block in Markdown can be rendered as a LiveCodes playground by adding the livecodes parameter to the code block language meta.

    +

    This is provided as plugins for markdown-it, marked and remark. +These plugins allow the seamless integration with most of the popular frameworks like Astro, Docusaurus, Next.js, Storybook, VitePress, etc. See the section "Using with Frameworks" for getting started.

    +

    Demo​

    +

    This is an example code block:

    +
    ```jsx
    import { useState } from "react";

    function App() {
      const [count, setCount] = useState(0);
      return (
        <div>
          <p>You clicked {count} times.</p>
          <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
      );
    }

    export default App;
    ```
    +

    The above code block is normally rendered like this:

    +
    import { useState } from "react";

    function App() {
      const [count, setCount] = useState(0);
      return (
        <div>
          <p>You clicked {count} times.</p>
          <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
      );
    }

    export default App;
    +
    +

    The code block can instead be rendered as an interactive playground by adding the livecodes parameter to the code block language meta:

    +
    ```jsx livecodes
    import { useState } from "react";

    function App() {
      const [count, setCount] = useState(0);
      return (
        <div>
          <p>You clicked {count} times.</p>
          <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
      );
    }

    export default App;
    ```
    +

    to be displayed like this:

    + +
    +
    +

    The playground can be customized by setting options that are applied to all code blocks or by meta parameters that are applied to individual code blocks.

    +

    Alternatively, the code block can be kept as it is, and a button or a link (Edit in LiveCodes) is appended, below the code block, that opens the code in a LiveCodes playground. +This is achieved by adding the render=button or render=link parameter to the code block language meta.

    +

    This displays a button:

    +
    ```jsx livecodes render=button
    import { useState } from "react";

    function App() {
      const [count, setCount] = useState(0);
      return (
        <div>
          <p>You clicked {count} times.</p>
          <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
      );
    }

    export default App;
    ```
    +
    import { useState } from "react";

    function App() {
      const [count, setCount] = useState(0);
      return (
        <div>
          <p>You clicked {count} times.</p>
          <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
      );
    }

    export default App;
    +Edit in LiveCodes +
    +
    +

    While this displays a link:

    +
    ```jsx livecodes render=link
    import { useState } from "react";

    function App() {
      const [count, setCount] = useState(0);
      return (
        <div>
          <p>You clicked {count} times.</p>
          <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
      );
    }

    export default App;
    ```
    +
    import { useState } from "react";

    function App() {
      const [count, setCount] = useState(0);
      return (
        <div>
          <p>You clicked {count} times.</p>
          <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
      );
    }

    export default App;
    +Edit in LiveCodes +

    Packages​

    +

    All the functionality described here can be achieved using any of the following packages:

    + +

    See the section "Using with Frameworks" for using the plugins with popular frameworks like Astro, Docusaurus, Next.js, Storybook, VitePress, etc.

    +

    Usage​

    +

    markdown-it-livecodes​

    +

    To use the markdown-it-livecodes plugin, first install it:

    +
    npm install markdown-it markdown-it-livecodes
    +

    Then it can be used like this:

    +
    import markdownIt from "markdown-it";
    import markdownItLivecodes from "markdown-it-livecodes";

    const input = "```js livecodes \nconsole.log('Hello World!');\n```";

    const output = markdownIt()
      .use(markdownItLivecodes, {
        /* options */
      })
      .render(input);

    console.log(output); // <iframe ...></iframe>
    +

    marked-livecodes​

    +

    To use the marked-livecodes plugin, first install it:

    +
    npm install marked marked-livecodes
    +

    Then it can be used like this:

    +
    import marked from "marked";
    import markedLivecodes from "marked-livecodes";

    const input = "```js livecodes \nconsole.log('Hello World!');\n```";

    const output = await marked
      .use(markedLivecodes, {
        /* options */
      })
      .parse(input);

    console.log(output); // <iframe ...></iframe>
    +

    remark-livecodes​

    +

    To use the remark-livecodes plugin, first install it:

    +
    npm install remark remark-livecodes
    +

    Then it can be used like this:

    +
    import { remark } from "remark";
    import remarkLivecodes from "remark-livecodes";

    const input = "```js livecodes \nconsole.log('Hello World!');\n```";

    const output = await remark()
      .use(remarkLivecodes, {
        /* options */
      })
      .process(input);

    console.log(String(output)); // <iframe ...></iframe>
    +

    gatsby-remark-livecodes​

    +

    See usage with Gatsby.

    +

    Options​

    +

    Options can be passed to the plugins. These options apply to all code blocks.

    +

    These options include LiveCodes SDK embed options (except headless).

    +

    Example:

    +
    const output = await remark()
      .use(remarkLivecodes, {
        loading: "click",
        params: {
          console: "open"
          theme: "light",
        }
      })
      .process(input);
    +

    In addition, the following options are also available:

    +
      +
    • render: The render mode for the LiveCodes playgrounds. This can be one of the following: +
        +
      • playground (default): Replaces the code block with an iframe that displays the LiveCodes playground. By default, "simple" mode is used, but this can be changed in options or meta parameters.
        • +
      • link: Keeps the code block as it is, and appends a link (Edit in LiveCodes), below the code block, that opens the code in a LiveCodes playground.
        • +
      • button: Keeps the code block as it is, and appends a button (Edit in LiveCodes), below the code block, that opens the code in a LiveCodes playground.
        +Edit in LiveCodes button +
        • +
      • meta: Keeps the code block as it is, and adds the URL of the playground to the data-livecodes-url attribute of the <code> element. In addition, in remark-livecodes the URL is added to the AST (node.data.livecodesUrl and node.data.hProperties.dataLivecodesUrl). In markdown-it-livecodes the URL is added to env.livecodesUrl. +This can be used by other plugins (e.g. to display a custom run button overlying the code block).
        • +
      +
      • +
    • height: The height of the playground iframe.
      • +
    • className: The class name to be applied to the iframe, link or button. +Note: If the class name of the button contains "dark" (e.g. "dark-btn"), the dark button will be used.
      +Edit in LiveCodes button +
      • +
    • auto: When set to true, it automatically enables the livecodes parameter for all code blocks without having to explicitly add it. +This is useful when you have a large number of code blocks and don't want to add the livecodes parameter to each code block. +To disable this for a specific code block, add the livecodes=false meta parameter to the code block.
      • +
    +

    Meta Parameters​

    +

    Individual code blocks can be configured using meta parameters. These are key/value pairs, separated by spaces, that are added after the language name.

    +

    Meta parameters of code blocks override the options passed to the plugin.

    +

    Example:

    +
    ```jsx livecodes render=button className=dark-btn console=open
    import { useState, useEffect } from "react";

    export default () => {
      const [count, setCount] = useState(0);

      useEffect(() => {
        console.log("count:", count);
      }, [count]);

      return (
        <div>
          <p>You clicked {count} times.</p>
          <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
      );
    };
    ```
    +

    All LiveCodes configuration query parameters can be used as code block meta parameters (e.g. ```js livecodes console=open theme=light). See the LiveCodes configuration docs for more information.

    +

    In addition, the following meta parameters are available:

    +
      +
    • livecodes: Enables the LiveCodes playground for the code block. This can be omitted if the auto option is set to true. When livecodes is set to false, the code block is not handled by the plugin.
      • +
    • render: The render mode. See the Options section for more information.
      • +
    • height: The height of the playground iframe.
      • +
    • className: The class name for the playground iframe, link or button.
      • +
    • lang: This overrides the language of the code block (e.g. ```jsx livecodes lang=react or ```py livecodes lang=py-wasm). See the Languages docs for more language information.
      • +
    +

    Using with Frameworks​

    +

    This guide shows how to use the suitable plugin in different frameworks.

    +

    Astro​

    +

    (demo - code on GitHub)

    +

    Install the remark-livecodes plugin:

    +
    npm install -D remark-livecodes
    +

    This is an example for adding the remark-livecodes plugin to astro.config.mjs file:

    +
    astro.config.js
    import { defineConfig } from "astro/config";
    import mdx from "@astrojs/mdx";
    import remarkLivecodes from "remark-livecodes";

    export default defineConfig({
      // ...
      integrations: [mdx()],
      markdown: {
        remarkPlugins: [
          [remarkLivecodes, { /* options */ }],
        ],
      },
    });
    +

    Docusaurus​

    +

    (demo - code on GitHub)

    +

    Install the remark-livecodes plugin:

    +
    npm install -D remark-livecodes
    +

    This is an example for adding the remark-livecodes plugin to docusaurus.config.js file:

    +
    docusaurus.config.js
    export default {
      presets: [
        [
          'classic',
          {
            docs: {
              // ...
              remarkPlugins: [
                [require('remark-livecodes'), { /* options */ }],
              ],
            },
          },
        ],
      ],
      // ...
    };
    +

    Eleventy​

    +

    (demo - code on GitHub)

    +

    Install the markdown-it-livecodes plugin:

    +
    npm install -D markdown-it-livecodes
    +

    This is an example for adding the markdown-it-livecodes plugin to eleventy.config.js file:

    +
    eleventy.config.js
    import markdownItLivecodes from "markdown-it-livecodes";

    export default async function (eleventyConfig) {
      eleventyConfig.amendLibrary("md", (mdLib) =>
        mdLib.use(markdownItLivecodes, { /* options */ }),
      );
      // ...
    }
    +

    Gatsby​

    +

    (demo - code on GitHub)

    +

    Install the gatsby-remark-livecodes plugin:

    +
    npm install -D gatsby-remark-livecodes
    +

    This is an example for adding the gatsby-remark-livecodes plugin to gatsby-config.js file:

    +
    gatsby-config.js
    module.exports = {
      // ...
      plugins: [
        // ...
        {
          resolve: 'gatsby-transformer-remark',
          options: {
            plugins: [
              {
                resolve: 'gatsby-remark-livecodes',
                options: { /* options */ },
              },
            ],
          },
        },
      ],
    };
    +

    Next.js​

    +

    (demo - code on GitHub)

    +

    See Next.js docs for using markdown and MDX in Next.js.

    +

    Install the remark-livecodes plugin:

    +
    npm install -D remark-livecodes
    +

    This is an example for adding the remark-livecodes plugin to next.config.js file:

    +
    next.config.js
    import createMDX from "@next/mdx";
    import remarkLivecodes from "remark-livecodes";

    const nextConfig = {
      // ...
      pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
    };

    const withMDX = createMDX({
      options: {
        remarkPlugins: [
          [remarkLivecodes, { /* other options */ }],
        ],
      },
    });

    export default withMDX(nextConfig);
    +

    When using Turbopack for local development, check the guide for using plugins with Turbopack.

    +

    react-markdown​

    +

    react-markdown is a React component to render markdown.

    +

    This is an example for using the remark-livecodes plugin with react-markdown:

    +

    Install the remark-livecodes plugin:

    +
    npm install remark-livecodes
    +
    App.jsx
    import Markdown from 'react-markdown';
    import remarkLivecodes from 'remark-livecodes';

    const markdown =
      '```jsx livecodes\nexport default () => <h1>Hello World</h1>\n```';

    export default () => (
      <Markdown remarkPlugins={[[remarkLivecodes, { /* options */ }]]}>
        {markdown}
      </Markdown>
    );
    +Edit in LiveCodes +

    Storybook​

    +

    (demo - code on GitHub)

    +

    Install the remark-livecodes plugin:

    +
    npm install -D remark-livecodes
    +

    This is an example for adding the remark-livecodes plugin to storybook/main.js file:

    +
    storybook/main.js
    import remarkLivecodes from "remark-livecodes";

    export default {
      // ...
      addons: [
        // ...
        {
          name: "@storybook/addon-docs",
          options: {
            mdxPluginOptions: {
              mdxCompileOptions: {
                remarkPlugins: [
                  [remarkLivecodes, { /* options */ }],
                ],
              },
            },
          },
        },
      ],
    };
    +

    VitePress​

    +

    (demo - code on GitHub)

    +

    Install the markdown-it-livecodes plugin:

    +
    npm install -D markdown-it-livecodes
    +

    This is an example for adding the markdown-it-livecodes plugin to vitepress.config.js file:

    +
    .vitepress/config.js
    import { defineConfig } from "vitepress";
    import markDownItLivecodes from "markdown-it-livecodes";

    export default defineConfig({
      // ...
      markdown: {
        config: (md) => {
          md.use(markDownItLivecodes, { /* options */ });
        },
      },
    });
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/opensearch.xml b/docs/opensearch.xml new file mode 100644 index 0000000..ca504e3 --- /dev/null +++ b/docs/opensearch.xml @@ -0,0 +1,11 @@ + + + LiveCodes + Search LiveCodes + UTF-8 + https://livecodes.io/docs/img/favicon.ico + + + https://livecodes.io/docs/ + \ No newline at end of file diff --git a/docs/overview.html.md b/docs/overview.html.md new file mode 100644 index 0000000..c46e140 --- /dev/null +++ b/docs/overview.html.md @@ -0,0 +1,12 @@ +# Overview + +[LiveCodes](https://livecodes.io) is an [open-source](./license.html.md) client-side code playground. It is [feature-rich](./features/index.html.md) with support for [90+ languages/frameworks](./languages/index.html.md). It can be used as a [standalone app](./getting-started.html.md)#standalone-app) or [embedded](./features/embeds.html.md) in any web page. A powerful [SDK](./sdk/index.html.md) is available to facilitate embedding and communication with embedded playgrounds. + +The sections below include the documentation details: + +```mdx-code-block +import DocCardList from '@theme/DocCardList'; +import {useCurrentSidebarCategory} from '@docusaurus/theme-common'; + + +``` \ No newline at end of file diff --git a/docs/overview/index.html b/docs/overview/index.html new file mode 100644 index 0000000..fded69b --- /dev/null +++ b/docs/overview/index.html @@ -0,0 +1,15 @@ +Overview | LiveCodes

    Overview

    +

    LiveCodes is an open-source client-side code playground. It is feature-rich with support for 90+ languages/frameworks. It can be used as a standalone app or embedded in any web page. A powerful SDK is available to facilitate embedding and communication with embedded playgrounds.

    +

    The sections below include the documentation details:

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/sdk/headless.html.md b/docs/sdk/headless.html.md new file mode 100644 index 0000000..42e57eb --- /dev/null +++ b/docs/sdk/headless.html.md @@ -0,0 +1,78 @@ +# Headless Mode + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The LiveCodes [SDK](../sdk/index.html.md) can be used to create playgrounds in headless mode. In this mode, no visible output is displayed in the embedding web page. However, all [SDK methods](../sdk/js-ts.html.md)#sdk-methods) are accessible (e.g. for [updating code](./js-ts.html.md)#setconfig), [getting compiled code](./js-ts.html.md)#getcode), console output, [result HTML](./js-ts.html.md)#getcode), [shareable URLs](./js-ts.html.md)#getshareurl), [formatting code](./js-ts.html.md)#format), [running tests](./js-ts.html.md)#runtests), etc). + +This provides the power of leveraging the wide range of features and language support offered by LiveCodes, while retaining full control over the UI. + +## Usage + +To create a headless playground, set the [embed option](./js-ts.html.md)#embed-options) [`headless`](../sdk/js-ts.html.md)#headless) to `true`. + +Please note that in headless mode, the first parameter (`container`) of the function [`createPlayground`](../sdk/js-ts.html.md)#createplayground) is optional and can be omitted. + +
    + +Example: + +```js +import { createPlayground } from 'livecodes'; + +createPlayground({ + view: 'headless', + config: { + markup: { + language: 'markdown', + content: '# Hello World!', + }, + }, +}).then(async (playground) => { + const code = await playground.getCode(); + console.log(code.markup.compiled); // "

    Hello World!

    " + console.log(code.result); // (result page HTML) +}); +``` + +## Examples + +The following examples show how to use the headless mode to make a Markdown editor, an MDX editor and a Python interpreter. + +:::tip + +You may want to view the following playgrounds in full screen (using the full screen button in the top right of each playground). + +::: + +### Markdown Editor + +In this demo, code changes are watched using the SDK method [`watch('code', callback)`](./js-ts.html.md)#watch). The callback function accepts an argument which is an object with the properties `code` and `config` (see [`getCode`](./js-ts.html.md)#getcode) and [`getConfig`](./js-ts.html.md)#getconfig)). The compiled code is obtained as `code.markup.compiled`. + + +export const mdDemo = { markup: { language: 'html', content: `\n
    Loading...
    \n\n\x3Cscript type="module">\n import { createPlayground } from "https://cdn.jsdelivr.net/npm/livecodes@0.2.0";\n import debounce from "https://jspm.dev/debounce";\n\n const initialCode = "# Hello, LiveCodes!\\n\\n";\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {\n lineNumbers: true,\n mode: "markdown",\n });\n editor.setSize("100%", 200);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: "headless",\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const compile = async () => {\n await livecodes.setConfig({\n autoupdate: false,\n markup: {\n language: "markdown",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on("change", debounce(compile, 1000));\n livecodes.watch("code", ({ code, config }) => {\n createSandbox(document.querySelector("#output"), code.markup.compiled);\n });\n\n await compile();\n\n // create a sandbox for safe execution of compiled code\n function createSandbox (container, html) {\n const iframe = document.createElement("iframe");\n iframe.src = "https://livecodes-sandbox.pages.dev/v7/";\n iframe.sandbox =\n "allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts";\n iframe.onload = () => {\n iframe.contentWindow.postMessage({ html }, "*");\n };\n container.innerHTML = "";\n container.appendChild(iframe);\n return iframe;\n };\n\x3C/script>\n\n\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js">\x3C/script>\n\n\n` }} + + + +### MDX Editor + +In this demo, code changes are watched using the SDK method [`watch('code', callback)`](./js-ts.html.md)#watch). The callback function accepts an argument which is an object with the properties `code` and `config` (see [`getCode`](./js-ts.html.md)#getcode) and [`getConfig`](./js-ts.html.md)#getconfig)). The result HTML is obtained as `code.result`. + +:::tip + +If you do not want to run the result page in the headless playground and only want to get the generated result HTML, you can set the configuration option [`autoupdate](../configuration/configuration-object.html.md)#autoupdate) to `false`. + +::: + + +export const mdxDemo = { markup: { language: 'html', content: `\n
    Loading...
    \n\n\x3Cscript type="module">\n import { createPlayground } from "https://cdn.jsdelivr.net/npm/livecodes@0.2.0";\n import debounce from "https://jspm.dev/debounce";\n\n const initialCode = \`import { useState, useEffect } from 'react';\n\nexport const Hello = ({name}) => {\n const [count, setCount] = useState(0);\n return (\n <>\n

    Hello, {name}!

    \n

    You clicked {count} times.

    \n \n \n );\n};\n\n\n\n## MDX in short\n\n- ❤️ Powerful\n- 💻 Everything is a component\n- 🔧 Customizable\n- 📚 Markdown-based\n- 🔥 Blazingly blazing fast\n\n> from [mdxjs.com](https://mdxjs.com/)\n\`;\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {\n lineNumbers: true,\n mode: "markdown",\n });\n editor.setSize("100%", 200);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: "headless",\n config: { autoupdate: false },\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const compile = async () => {\n await livecodes.setConfig({\n autoupdate: false,\n markup: {\n language: "mdx",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on("change", debounce(compile, 1000));\n livecodes.watch("code", ({ code, config }) => {\n createSandbox(document.querySelector("#output"), code.result);\n });\n\n await compile();\n\n // create a sandbox for safe execution of compiled code\n function createSandbox (container, html) {\n const iframe = document.createElement("iframe");\n iframe.src = "https://livecodes-sandbox.pages.dev/v7/";\n iframe.sandbox =\n "allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts";\n iframe.onload = () => {\n iframe.contentWindow.postMessage({ html }, "*");\n };\n container.innerHTML = "";\n container.appendChild(iframe);\n return iframe;\n };\n\x3C/script>\n\n\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js">\x3C/script>\n\n\n` }} + + + +### Python Interpreter + +In this demo, console output is obtained using the SDK method [`watch('code', callback)`](./js-ts.html.md)#watch). The callback function accepts an argument which is an object with the properties `method` and `args` indicating the console method and the arguments that were passed (as an array). + + +export const pyDemo = { markup: { language: 'html', content: `\n
    Loading...
    \n\n\x3Cscript type="module">\n import { createPlayground } from "https://cdn.jsdelivr.net/npm/livecodes@0.2.0";\n import debounce from "https://jspm.dev/debounce";\n\n const initialCode = \`def say_hello(name):\n return f"Hello, {name}!"\n\nprint(say_hello("LiveCodes"))\n\`;\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {\n lineNumbers: true,\n mode: "python",\n });\n editor.setSize("100%", 250);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n view: "headless",\n };\n\n const livecodes = await createPlayground(options);\n await livecodes.load();\n\n const run = async () => {\n await livecodes.setConfig({\n autoupdate: true,\n script: {\n language: "python",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on("change", debounce(run, 1000));\n livecodes.watch("console", ({ method, args }) => {\n const output = document.querySelector("#output");\n output.innerHTML = args.join("\\n");\n if (method === "error") {\n output.style.color = "red";\n } else {\n output.style.color = "unset";\n }\n });\n\n await run();\n\x3C/script>\n\n\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/mode/python/python.js">\x3C/script>\n\n\n` }} + + \ No newline at end of file diff --git a/docs/sdk/headless/index.html b/docs/sdk/headless/index.html new file mode 100644 index 0000000..6b38fb1 --- /dev/null +++ b/docs/sdk/headless/index.html @@ -0,0 +1,36 @@ +Headless Mode | LiveCodes

    Headless Mode

    + +

    The LiveCodes SDK can be used to create playgrounds in headless mode. In this mode, no visible output is displayed in the embedding web page. However, all SDK methods are accessible (e.g. for updating code, getting compiled code, console output, result HTML, shareable URLs, formatting code, running tests, etc).

    +

    This provides the power of leveraging the wide range of features and language support offered by LiveCodes, while retaining full control over the UI.

    +

    Usage​

    +

    To create a headless playground, set the embed option headless to true.

    +

    Please note that in headless mode, the first parameter (container) of the function createPlayground is optional and can be omitted.

    +
    +

    Example:

    +
    import { createPlayground } from 'livecodes';

    createPlayground({
      view: 'headless',
      config: {
        markup: {
          language: 'markdown',
          content: '# Hello World!',
        },
      },
    }).then(async (playground) => {
      const code = await playground.getCode();
      console.log(code.markup.compiled); // "<h1>Hello World!</h1>"
      console.log(code.result); // (result page HTML)
    });
    +

    Examples​

    +

    The following examples show how to use the headless mode to make a Markdown editor, an MDX editor and a Python interpreter.

    +
    tip

    You may want to view the following playgrounds in full screen (using the full screen button in the top right of each playground).

    +

    Markdown Editor​

    +

    In this demo, code changes are watched using the SDK method watch('code', callback). The callback function accepts an argument which is an object with the properties code and config (see getCode and getConfig). The compiled code is obtained as code.markup.compiled.

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "html",
          "content": "<textarea id=\"editor\" style=\"display: none;\"></textarea>\n<div id=\"output\">Loading...</div>\n\n<script type=\"module\">\n  import { createPlayground } from \"https://cdn.jsdelivr.net/npm/livecodes@0.2.0\";\n  import debounce from \"https://jspm.dev/debounce\";\n\n  const initialCode = \"# Hello, LiveCodes!\\n\\n\";\n\n  // the code editor\n  const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n    lineNumbers: true,\n    mode: \"markdown\",\n  });\n  editor.setSize(\"100%\", 200);\n  editor.setValue(initialCode);\n\n  // the playground\n  const options = {\n    view: \"headless\",\n  };\n\n  const livecodes = await createPlayground(options);\n  await livecodes.load();\n\n  const compile = async () => {\n    await livecodes.setConfig({\n      autoupdate: false,\n      markup: {\n        language: \"markdown\",\n        content: editor.doc.getValue(),\n      },\n    });\n  };\n\n  // watch for changes\n  editor.on(\"change\", debounce(compile, 1000));\n  livecodes.watch(\"code\", ({ code, config }) => {\n    createSandbox(document.querySelector(\"#output\"), code.markup.compiled);\n  });\n\n  await compile();\n\n  // create a sandbox for safe execution of compiled code\n  function createSandbox (container, html) {\n    const iframe = document.createElement(\"iframe\");\n    iframe.src = \"https://livecodes-sandbox.pages.dev/v7/\";\n    iframe.sandbox =\n      \"allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts\";\n    iframe.onload = () => {\n      iframe.contentWindow.postMessage({ html }, \"*\");\n    };\n    container.innerHTML = \"\";\n    container.appendChild(iframe);\n    return iframe;\n  };\n</script>\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></script>\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js\"></script>\n\n<style>\n  * {\n    margin: 0;\n    padding: 0;\n  }\n  body {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n    overflow: hidden;\n  }\n  #output {\n    flex: 1;\n  }\n  #output iframe {\n    width: 100%;\n    height: 100%;\n    border: none;\n  }\n</style>\n"
        }
      }
    };
    createPlayground('#container', options);

    +

    MDX Editor​

    +

    In this demo, code changes are watched using the SDK method watch('code', callback). The callback function accepts an argument which is an object with the properties code and config (see getCode and getConfig). The result HTML is obtained as code.result.

    +
    tip

    If you do not want to run the result page in the headless playground and only want to get the generated result HTML, you can set the configuration option [autoupdate](../configuration/configuration-object.mdx#autoupdate) to false`.

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "html",
          "content": "<textarea id=\"editor\" style=\"display: none;\"></textarea>\n<div id=\"output\">Loading...</div>\n\n<script type=\"module\">\n  import { createPlayground } from \"https://cdn.jsdelivr.net/npm/livecodes@0.2.0\";\n  import debounce from \"https://jspm.dev/debounce\";\n\n  const initialCode = `import { useState, useEffect } from 'react';\n\nexport const Hello = ({name}) => {\n  const [count, setCount] = useState(0);\n  return (\n    <>\n      <h1>Hello, {name}!</h1>\n      <p>You clicked {count} times.</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </>\n  );\n};\n\n<Hello name=\"LiveCodes\"></Hello>\n\n## MDX in short\n\n- ❤️ Powerful\n- 💻 Everything is a component\n- 🔧 Customizable\n- 📚 Markdown-based\n- 🔥 Blazingly blazing fast\n\n> from [mdxjs.com](https://mdxjs.com/)\n`;\n\n  // the code editor\n  const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n    lineNumbers: true,\n    mode: \"markdown\",\n  });\n  editor.setSize(\"100%\", 200);\n  editor.setValue(initialCode);\n\n  // the playground\n  const options = {\n    view: \"headless\",\n    config: { autoupdate: false },\n  };\n\n  const livecodes = await createPlayground(options);\n  await livecodes.load();\n\n  const compile = async () => {\n    await livecodes.setConfig({\n      autoupdate: false,\n      markup: {\n        language: \"mdx\",\n        content: editor.doc.getValue(),\n      },\n    });\n  };\n\n  // watch for changes\n  editor.on(\"change\", debounce(compile, 1000));\n  livecodes.watch(\"code\", ({ code, config }) => {\n    createSandbox(document.querySelector(\"#output\"), code.result);\n  });\n\n  await compile();\n\n  // create a sandbox for safe execution of compiled code\n  function createSandbox (container, html) {\n    const iframe = document.createElement(\"iframe\");\n    iframe.src = \"https://livecodes-sandbox.pages.dev/v7/\";\n    iframe.sandbox =\n      \"allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts\";\n    iframe.onload = () => {\n      iframe.contentWindow.postMessage({ html }, \"*\");\n    };\n    container.innerHTML = \"\";\n    container.appendChild(iframe);\n    return iframe;\n  };\n</script>\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></script>\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js\"></script>\n\n<style>\n  * {\n    margin: 0;\n    padding: 0;\n  }\n  body {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n    overflow: hidden;\n  }\n  #output {\n    flex: 1;\n  }\n  #output iframe {\n    width: 100%;\n    height: 100%;\n    border: none;\n  }\n</style>\n"
        }
      }
    };
    createPlayground('#container', options);

    +

    Python Interpreter​

    +

    In this demo, console output is obtained using the SDK method watch('code', callback). The callback function accepts an argument which is an object with the properties method and args indicating the console method and the arguments that were passed (as an array).

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "html",
          "content": "<textarea id=\"editor\" style=\"display: none\"></textarea>\n<div id=\"output\">Loading...</div>\n\n<script type=\"module\">\n  import { createPlayground } from \"https://cdn.jsdelivr.net/npm/livecodes@0.2.0\";\n  import debounce from \"https://jspm.dev/debounce\";\n\n  const initialCode = `def say_hello(name):\n  return f\"Hello, {name}!\"\n\nprint(say_hello(\"LiveCodes\"))\n`;\n\n  // the code editor\n  const editor = CodeMirror.fromTextArea(document.getElementById(\"editor\"), {\n    lineNumbers: true,\n    mode: \"python\",\n  });\n  editor.setSize(\"100%\", 250);\n  editor.setValue(initialCode);\n\n  // the playground\n  const options = {\n    view: \"headless\",\n  };\n\n  const livecodes = await createPlayground(options);\n  await livecodes.load();\n\n  const run = async () => {\n    await livecodes.setConfig({\n      autoupdate: true,\n      script: {\n        language: \"python\",\n        content: editor.doc.getValue(),\n      },\n    });\n  };\n\n  // watch for changes\n  editor.on(\"change\", debounce(run, 1000));\n  livecodes.watch(\"console\", ({ method, args }) => {\n    const output = document.querySelector(\"#output\");\n    output.innerHTML = args.join(\"\\n\");\n    if (method === \"error\") {\n      output.style.color = \"red\";\n    } else {\n      output.style.color = \"unset\";\n    }\n  });\n\n  await run();\n</script>\n\n<link rel=\"stylesheet\" href=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.css\" />\n<script src=\"https://unpkg.com/codemirror@5.65.15/lib/codemirror.js\"></script>\n<script src=\"https://unpkg.com/codemirror@5.65.15/mode/python/python.js\"></script>\n\n<style>\n  * {\n    margin: 0;\n    padding: 0;\n  }\n  body {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n    overflow: hidden;\n  }\n  #output {\n    flex: 1;\n    margin: 1em;\n    white-space: pre;\n    font-family: monospace;\n  }\n  #output iframe {\n    width: 100%;\n    height: 100%;\n    border: none;\n  }\n</style>\n"
        }
      }
    };
    createPlayground('#container', options);

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/sdk/index.html b/docs/sdk/index.html new file mode 100644 index 0000000..199463b --- /dev/null +++ b/docs/sdk/index.html @@ -0,0 +1,58 @@ +LiveCodes SDK | LiveCodes

    LiveCodes SDK

    + +

    The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds.

    +

    The SDK is provided as a light-weight (less than 5kb gzipped), zero-dependencies npm package, that is also available from CDNs. It can be used to create playgrounds with a wide variety of configurations and embed options. In addition, SDK methods allow programmatic communication and control of the playgrounds during runtime.

    +

    The JavaScript SDK is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently React and Vue). The SDK can be used in Svelte directly without wrappers. TypeScript support provides type-safety and a great developer experience.

    +

    SDK Demo​

    +

    This is an example of an editable embedded playground using the SDK.

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "config": {
        "markup": {
          "language": "markdown",
          "content": "# Hello World!"
        },
        "script": {
          "language": "javascript",
          "content": "console.log(\"Hello, from JS!\");"
        },
        "tools": {
          "active": "console",
          "status": "open"
        }
      }
    };
    createPlayground('#container', options);

    +

    Installation​

    +

    NPM Package​

    +

    This is a single npm package for the SDK which supports JavaScript/TypeScript, React, Vue and Svelte. +Install the library from npm:

    +
    npm install livecodes
    +

    then it can be used like that:

    +
    index.js
    import { createPlayground } from 'livecodes';

    createPlayground('#container', {
      // embed options
    });
    +

    CDN​

    +

    Alternatively, it can just be loaded from a CDN.

    +

    ESM:

    + + +
    index.html
    <div id="container"></div>
    <script type="module">
      import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes@0.11.0';

      createPlayground('#container', {
        // embed options
      });
    </script>
    +

    UMD:

    + +
    index.html
    <div id="container"></div>
    <script src="https://cdn.jsdelivr.net/npm/livecodes@0.11.0/livecodes.umd.js"></script>
    <script>
      // the UMD version provides the global object `livecodes`
      livecodes.createPlayground('#container', {
        // embed options
      });
    </script>
    +
    info

    In the full standalone app, the JavaScript SDK is accessible via the global variable livecodes, which can be interacted with in the browser console.

    +

    Usage​

    +

    The SDK is currently provided in the following variations:

    + +

    Headless Mode​

    +

    The SDK also has a headless mode. In this mode, no visible output is displayed in the embedding web page. However, all 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.

    +

    SDK Playground!​

    +

    A demo page that shows the usage of the SDK can be found here (source).

    +

    Or edit the SDK playground in LiveCodes. How meta! :)

    +
    +

    P.S. You may want to use the "Full Screen" button!

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/sdk/index.html.md b/docs/sdk/index.html.md new file mode 100644 index 0000000..be0e65f --- /dev/null +++ b/docs/sdk/index.html.md @@ -0,0 +1,117 @@ +# LiveCodes SDK + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds. + +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.html.md) and [embed options](js-ts.html.md)#embed-options). In addition, [SDK methods](js-ts.html.md)#sdk-methods) allow programmatic communication and control of the playgrounds during runtime. + +The [JavaScript SDK](js-ts.html.md) is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently [React](react.html.md) and [Vue](vue.html.md)). The SDK can be used in [Svelte](svelte.html.md) directly without wrappers. [TypeScript support](js-ts.html.md)#typescript-types) provides type-safety and a great developer experience. + +## SDK Demo + +This is an example of an editable embedded playground using the SDK. + + + +## Installation + +### NPM Package + +This is a single npm package for the SDK which supports JavaScript/TypeScript, React, Vue and Svelte. +Install the library from npm: + +```bash npm2yarn +npm install livecodes +``` + +then it can be used like that: + +```js title="index.js" +import { createPlayground } from 'livecodes'; + +createPlayground('#container', { + // embed options +}); +``` + +### CDN + +Alternatively, it can just be loaded from a CDN. + +ESM: + +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import CodeBlock from '@theme/CodeBlock'; + +export const ESMCode = () => { + const { siteConfig } = useDocusaurusContext(); + return ( + + {`
    \n`} +     + ); +}; + + + +UMD: + +export const UMDCode = () => { + const { siteConfig } = useDocusaurusContext(); + return ( + + {`
    \n\n +`} +     + ); +}; + + + +:::info + +In the full [standalone app](../getting-started.html.md)#standalone-app), the JavaScript SDK is accessible via the global variable `livecodes`, which can be interacted with in the browser console. + +::: + +## Usage + +The SDK is currently provided in the following variations: + +- [JavaScript/TypeScript](./js-ts.html.md) + +- [React](./react.html.md) + +- [Vue](./vue.html.md) + +- [Svelte](./svelte.html.md) + +## Headless Mode + +The SDK also has a [headless mode](./headless.html.md). In this mode, no visible output is displayed in the embedding web page. However, all [SDK methods](../sdk/js-ts.html.md)#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. + +## SDK Playground! + +A demo page that shows the usage of the SDK can be [found here](https://live-codes.github.io/livecodes-examples/sdk-demo.html) ([source](https://github.com/live-codes/livecodes-examples/blob/gh-pages/sdk-demo.html)). + +Or edit the SDK playground in LiveCodes. How meta! :) + + + +P.S. You may want to use the "Full Screen" button! \ No newline at end of file diff --git a/docs/sdk/js-ts.html.md b/docs/sdk/js-ts.html.md new file mode 100644 index 0000000..ea4d285 --- /dev/null +++ b/docs/sdk/js-ts.html.md @@ -0,0 +1,601 @@ +# JavaScript/TypeScript SDK + +import LiveCodes from '../../src/components/LiveCodes.tsx'; +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + +This is the core SDK on which others ([React](react.html.md), [Vue](vue.html.md), and [Svelte](svelte.html.md) SDKs) are build on top. It is a light-weight ([less than 5kb gzipped](https://bundlephobia.com/package/livecodes)), zero-dependencies library that allows creating, embedding and communication with LiveCodes playgrounds. It also allows easily creating links to playgrounds. + +## Installation + +Please refer to the [SDK installation](./index.html.md)#installation) section. + +:::info + +In the full [standalone app](../getting-started.html.md)#standalone-app), the JavaScript SDK is accessible via the global variable `livecodes`, which can be interacted with in the browser console. + +::: + +## TypeScript Types + +TypeScript types are [documented here](../api/globals.md) and can be imported from the library. + +```ts +import type { EmbedOptions, Playground } from 'livecodes'; +``` + +The following 2 functions are exported by the library: + +## `createPlayground` + +Type: [`(container: string | Element, options?: EmbedOptions) => Promise`](../api/functions/createPlayground.md) + +The library exports the function `createPlayground` which has 2 parameters: + +- `container` (required): `HTMLElement` or a string representing a CSS selector. This is the container where the playground is rendered. + If not found, an error is thrown (except in [headless mode](./headless.html.md), in which this parameter is optional and can be omitted). +- `options` (optional): an object with embed options ([EmbedOptions](../api/interfaces/EmbedOptions.md)). + +The `createPlayground` function returns a promise which resolves to an object that exposes the SDK methods ([Playground](../api/interfaces/Playground.md)). + +```ts +import { createPlayground, type EmbedOptions } from 'livecodes'; + +const options: EmbedOptions = { + // appUrl: ... + // config: ... + // headless: ... + // import: ... + // loading: ... + // params: ... + // template: ... +}; + +createPlayground('#container', options).then((playground) => { + // the `playground` object exposes the SDK methods + // e.g. playground.run() +}); +``` + +:::caution Throws + +The `createPlayground` function throws an error (promise is rejected) in any of the following conditions: + +- The first parameter ([`container`](#createplayground)) is not an element or not found (by CSS selector), except in [headless mode](./headless.html.md). +- The embed option [`appUrl`](#appurl) is supplied and is not a valid URL. +- The embed option [`config`](#config) is supplied and is not an object or a valid URL. +- Any of the [SDK methods](#sdk-methods) was called after calling the [`destroy`](#destroy) method. + +::: + +### Multiple Sources + +When multiple sources are provided in the [embed options](#embed-options), each is converted to a [configuration object](../configuration/configuration-object.html.md) and the properties are merged. +In case there are conflicts between the properties of the configurations, they are overridden in the following order: +- [`template`](#template) (lowest precedence) +- [`import`](#import) +- [`config`](#config) +- [`params`](#params) (highest precedence) + +## `getPlaygroundUrl` + +Type: [`(options?: EmbedOptions) => string`](../api/functions/getPlaygroundUrl.md) + +Gets the URL to playground (as a string) from the provided [options](#embed-options). This can be useful for providing links to run code in playgrounds. + +Example: + +```html +
    # Hello World!
    +Open in playground + +``` + +export const getPlaygroundUrlDemo = { + html: `
    # Hello World!
    \nOpen in playground\n`, +}; + + + +## Embed Options + +Type: [`EmbedOptions`](../api/interfaces/EmbedOptions.md) + +The [`createPlayground`](#createplayground) and [`getPlaygroundUrl`](#getplaygroundurl) functions accept an optional object that allows providing different options to the playground. This object can have the following optional properties: + +### `appUrl` + +Type: [`string`](../api/interfaces/EmbedOptions.md#appurl) + +Default: `"https://livecodes.io/"` + +Allows loading the playground from a custom URL (e.g. a [self-hosted app](../features/self-hosting.html.md) or a [permanent URL](../features/permanent-url.html.md)). + +If supplied with an invalid URL, an error is thrown. + +### `config` + +Type: [`string | Partial`](../api/interfaces/EmbedOptions.md#config) + +Default: `{}` + +A [configuration object](../configuration/configuration-object.html.md) or a URL to a JSON file representing a configuration object to load. + +If supplied and is not an object or a valid URL, an error is thrown. + +### `headless` + +Type: [`boolean`](../api/interfaces/EmbedOptions.md#headless) + +Default: `false` + +When set to `true`, the playground is loaded in [headless mode](./headless.html.md). + +### `import` + +Type: [`string`](../api/interfaces/EmbedOptions.md#import) + +A resource to [import](../features/import.html.md) (from any of the supported [sources](../features/import.html.md)#sources)). + +### `loading` + +Type: [`"eager" | "lazy" | "click"`](../api/interfaces/EmbedOptions.md#loading) + +Default: `"lazy"` + +Sets how the playground loads: + +- `"eager"`: The playground loads immediately. +- `"lazy"`: A playground embedded low down in the page will not load until the user scrolls so that it approaches the viewport. +- `"click"`: The playground does not load automatically. Instead, a "Click-to-load" screen is shown. + +### `params` + +Type: [`UrlQueryParams`](../api/interfaces/EmbedOptions.md#params) + +An object that represents [URL Query parameters](../configuration/query-params.html.md), that can be used to configure the playground. + +These 2 snippets produce similar output: + +```js +import { createPlayground } from 'livecodes'; + +// use config +createPlayground('#container', { + config: { + markup: { + language: 'markdown', + content: '# Hello World!', + }, + }, +}); + +// use params +createPlayground('#container', { params: { md: '# Hello World!' } }); +``` + +### `template` + +Type: [`TemplateName`](../api/interfaces/EmbedOptions.md#template) + +A [starter template](../features/templates.html.md) to load. Allowed valued can be found [here](../api/interfaces/EmbedOptions.md#template). + +## SDK Methods + +The [`createPlayground`](#createplayground) function returns a promise which resolves to an object ([`Playground`](../api/interfaces/Playground.md)) that exposes some useful SDK methods that can be used to interact with the playground. These methods include: + +### `load` + +Type: [`() => Promise`](../api/interfaces/Playground.md#load) + +When the embed option `loading` is set to `click`, the playground is not loaded automatically. Instead, a screen is shown with "Click to load" button. +Calling the SDK method `load()` allows loading the playground. + +If the playground was not loaded, calling any other method will load the playground first before executing. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + await playground.load(); + // playground loaded +}); +``` + +### `run` + +Type: [`() => Promise`](../api/interfaces/Playground.md#run) + +Runs the [result page](../features/result.html.md) (after any required compilation for code). + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + await playground.run(); + // new result page is displayed +}); +``` + +### `format` + +Type: [`(allEditors?: boolean) => Promise`](../api/interfaces/Playground.md#format) + +[Formats the code](../features/code-format.html.md). + +By default, the code in all editors (markup, style and script) is formatted. +If you wish to format only the active editor, pass the value `false` as an argument. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + await playground.format(); + // code in editors is formatted +}); +``` + +### `getShareUrl` + +Type: [`(shortUrl?: boolean) => Promise`](../api/interfaces/Playground.md#getshareurl) + +Gets a [share url](../features/share.html.md) for the current project. + +By default, the url has a long query string representing the compressed encoded config object. If the argument `shortUrl` was set to `true`, a short url is generated. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + const longUrl = await playground.getShareUrl(); + const shortUrl = await playground.getShareUrl(true); +}); +``` + +### `getConfig` + +Type: [`(contentOnly?: boolean) => Promise`](../api/interfaces/Playground.md#getconfig) + +Gets a config object representing the playground state. This can be used to restore state if passed as [embed option](#createplayground) property on creating playground, or can be manipulated and loaded in run-time using [`setConfig`](#setconfig) method. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + const config = await playground.getConfig(); +}); +``` + +### `setConfig` + +Type: [`(config: Partial) => Promise`](../api/interfaces/Playground.md#setconfig) + +Loads a new project using the passed configuration object. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + const config = { + markup: { + language: 'html', + content: 'Hello World!', + }, + }; + const newConfig = await playground.setConfig(config); + // new project loaded +}); +``` + +### `getCode` + +Type: [`() => Promise`](../api/interfaces/Playground.md#getcode) + +Gets the playground code (including source code, source language and compiled code) for each editor (`markup`, `style`, `script`), in addition to result page HTML. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + const code = await playground.getCode(); + + // source code, language and compiled code for the script editor + const { content, language, compiled } = code.script; + + // result page HTML + const result = code.result; +}); +``` + +### `show` + +Type: [`(panel: 'editor' | 'markup' | 'style' | 'script' | 'console' | 'compiled' | 'tests' | 'result' | 'toggle-result', options?: { full?: boolean; line?: number; column?: number; zoom?: 1 | 0.5 | 0.25 }) => Promise`](../api/interfaces/Playground.md#show) + +Shows the selected panel, which is either: + +- Active Editor: `editor` +- Specific Editor: `markup`, `style` or `script` +- Tool: `console`, `compiled` or `tests` +- Result page: `result` or `toggle-result` + +The second optional argument is an object: + +- It may have the boolean property `full`, which If `true`, selected editor or result page will take the full vertical and horizontal space of the playground, while tools will take the full vertical and half the horizontal space, leaving some space for the active editor. + +- The optional properties `line` and `column` allow scrolling to line/column number in the shown editor. + +- The optional property `zoom` sets the result page [zoom level](../features/result.html.md)#result-page-zoom) (the selected panel must be `result`). + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + const delay = (duration) => + new Promise((resolve) => { + setTimeout(resolve, duration); + }); + + await playground.show('toggle-result'); + await delay(2000); + await playground.show('style'); + await delay(2000); + await playground.show('result', { full: true }); + await delay(2000); + await playground.show('script'); + await delay(2000); + await playground.show('result', { zoom: 0.5 }); + await delay(2000); + await playground.show('console', { full: true }); +}); +``` + +### `runTests` + +Type: [`() => Promise<{ results: TestResult[] }>`](../api/interfaces/Playground.md#runtests) + +Runs project [tests](./../features/tests.html.md) (if present) and gets test results. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + const { results } = await playground.runTests(); +}); +``` + +### `watch` + +Type: [docs](../api/interfaces/Playground.md#watch) + +```ts +((event: 'load', fn: () => void) => { remove: () => void }) & +((event: 'ready', fn: (data: { config: Config }) => void) => { remove: () => void }) & +((event: 'code', fn: (data: { code: Code; config: Config }) => void) => { remove: () => void }) & +((event: 'console', fn: (data: { method: string; args: any[] }) => void) => { remove: () => void }) & +((event: 'tests', fn: (data: { results: TestResult[]; error?: string }) => void) => { remove: () => void }) & +((event: 'destroy', fn: () => void) => { remove: () => void }); +``` + +Allows to watch for various playground events. It takes 2 arguments: event name and a callback function that will be called on every event. + +In some events, the callback function will be called with an object that supplies relevant data to the callback function (e.g. code, console output, test results). + +The `watch` method returns an object with a single method `remove`, which when called will remove the callback from watching further events. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then((playground) => { + const codeWatcher = playground.watch('code', ({ code, config }) => { + // this will run on every code change + console.log('code:', code); + console.log('config:', config); + }); + + const consoleWatcher = playground.watch('console', ({ method, args }) => { + // this will run on every console output + console[method](...args); + }); + + const testsWatcher = playground.watch('tests', ({ results }) => { + // this will run when tests run + results.forEach((testResult) => { + console.log('status:', testResult.status); // "pass", "fail" or "skip" + console.log(testResult.errors); // array of errors as strings + }); + }); + + // then later + codeWatcher.remove(); + consoleWatcher.remove(); + testsWatcher.remove(); + // events are no longer watched +}); +``` + +These are the events that can be watched and the description of their callback functions: + +- `"load"`: Called when the playground first loads. + + ```ts + ( + event: "load", + fn: () => void + ) => { remove: () => void } + ``` + +- `"ready"`: Called when a new project is loaded (including when [imported](../features/import.html.md)) and the playground is ready to run. + + ```ts + ( + event: "ready", + fn: (data: { config: Config }) => void + ) => { remove: () => void } + ``` + +- `"code"`: Called when the playground "content" is changed (see [`getCode`](./js-ts.html.md)#getcode) and [`getConfig`](./js-ts.html.md)#getconfig)). + + This includes changes in: + + - Code (in editors) + - Editor languages + - [CSS processors](../features/css.html.md)#css-processors) + - [External resources](../features/external-resources.html.md) + - Project info (e.g. allows adding content in page head and attributes to `` element) + - [Custom settings](../advanced/custom-settings.html.md) (e.g. allows changing [import maps](../features/module-resolution.html.md)#custom-module-resolution)) + - Project title + - [Test](../features/tests.html.md) code + + ```ts + ( + event: "code", + fn: (data: { code: Code; config: Config }) => void + ) => { remove: () => void } + ``` + +- `"console"`: Called when the playground console gets new outputs. The callback method is passed an object with 2 properties: `"method"` (e.g. `"log"`, `"error"`, etc.) and `"args"` (the arguments passed to the method, as an array). + + ```ts + ( + event: "console", + fn: (data: { method: string; args: any[] }) => void + ) => { remove: () => void } + ``` + +- `"tests"`: Called when tests run and test results are available (see [`runTests`](./js-ts.html.md)#runtests)). + + ```ts + ( + event: "tests", + fn: (data: { results: TestResult[]; error?: string }) => void + ) => { remove: () => void } + ``` + +- `"destroy"`: Called when the playground is destroyed. + ```ts + ( + event: "destroy", + fn: () => void + ) => { remove: () => void } + ``` + +### `onChange` + +**Deprecated**: Use [`watch`](#watch) method instead. + +Type: [`(fn: ChangeHandler) => { remove: () => void }`](../api/interfaces/Playground.md#onchange) + +Allows to watch the playground for changes. It takes a callback function that will be called on every change. + +The callback function will be called with an object that has 2 properties: `code` and `config`, representing the current codes and configuration objects (see [`getCode`](#getcode) and [`getConfig`](#getconfig)). + +The `onChange` method returns an object with a single method `remove`, which when called will remove the callback from watching changes. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then((playground) => { + const watcher = playground.onChange(({ code, config }) => { + // this will run on every code change + console.log('code:', code); + console.log('config:', config); + }); + + // then later + watcher.remove(); + // changes are no longer watched +}); +``` + +### `exec` + +Type: [`(command: APICommands, ...args: any[]) => Promise<{ output: any } | { error: string }>`](../api/interfaces/Playground.md#exec) + +Execute custom commands, including: + +- `"setBroadcastToken"`: Sets [broadcast `userToken`](../features/broadcast.html.md)#technical-details). + +```js +// in browser console of full app (e.g. https://livecodes.io) +await livecodes.exec('setBroadcastToken', 'my-token'); +``` + +- `"showVersion"`: Logs the current LiveCodes app version, SDK version, git commit SHA, [permanent app URL](../features/permanent-url.html.md) and SDK URL in the browser console. + +```js +// in browser console of full app (e.g. https://livecodes.io) +await livecodes.exec('showVersion'); +``` + +### `destroy` + +Type: [`() => Promise`](../api/interfaces/Playground.md#destroy) + +Destroys the playground instance, and removes event listeners. Further call to any SDK methods throws an error. + +```js +import { createPlayground } from 'livecodes'; + +createPlayground('#container').then(async (playground) => { + await playground.destroy(); + // playground destroyed + // any further SDK call throws an error +}); +``` + +## Styles + +### Default Styles + +By default, the container element is styled when the SDK is initialized (including width, height, border, etc.). To disable default styles, set the container element attribute `data-default-styles` to `"false"` before initializing. + +Example: + +```html +
    + +``` + +### Height + +By default, the playground container height is set to `"300px"`. To change the height, either disable the default styles and override them, or simply set the `data-height` attribute to a number (in pixels) or any valid CSS value (e.g. `"100%"` to take the full height of its parent element). + +Example: + +```html +
    + +``` + +## Demo + +export const sdkDemo = { + js: `import { createPlayground } from "livecodes";\n\nconst params = {\n html: "

    Hello World!

    ",\n css: "h1 {color: blue;}",\n js: 'console.log("Hello, LiveCodes!")',\n console: "open",\n};\n\ncreatePlayground('#container', { params });\n`, + html: '
    ', +}; + + + +## Related + +- [React SDK](./react.html.md) +- [Vue SDK](./vue.html.md) +- [Using SDK in Svelte](./svelte.html.md) +- [Embedded Playgrounds](../features/embeds.html.md) \ No newline at end of file diff --git a/docs/sdk/js-ts/index.html b/docs/sdk/js-ts/index.html new file mode 100644 index 0000000..89705b6 --- /dev/null +++ b/docs/sdk/js-ts/index.html @@ -0,0 +1,236 @@ +JS/TS SDK | LiveCodes

    JavaScript/TypeScript SDK

    + +

    This is the core SDK on which others (React, Vue, and Svelte SDKs) are build on top. It is a light-weight (less than 5kb gzipped), zero-dependencies library that allows creating, embedding and communication with LiveCodes playgrounds. It also allows easily creating links to playgrounds.

    +

    Installation​

    +

    Please refer to the SDK installation section.

    +
    info

    In the full standalone app, the JavaScript SDK is accessible via the global variable livecodes, which can be interacted with in the browser console.

    +

    TypeScript Types​

    +

    TypeScript types are documented here and can be imported from the library.

    +
    import type { EmbedOptions, Playground } from 'livecodes';
    +

    The following 2 functions are exported by the library:

    +

    createPlayground​

    +

    Type: (container: string | Element, options?: EmbedOptions) => Promise<Playground>

    +

    The library exports the function createPlayground which has 2 parameters:

    +
      +
    • container (required): HTMLElement or a string representing a CSS selector. This is the container where the playground is rendered. +If not found, an error is thrown (except in headless mode, in which this parameter is optional and can be omitted).
      • +
    • options (optional): an object with embed options (EmbedOptions).
      • +
    +

    The createPlayground function returns a promise which resolves to an object that exposes the SDK methods (Playground).

    +
    import { createPlayground, type EmbedOptions } from 'livecodes';

    const options: EmbedOptions = {
      // appUrl: ...
      // config: ...
      // headless: ...
      // import: ...
      // loading: ...
      // params: ...
      // template: ...
    };

    createPlayground('#container', options).then((playground) => {
      // the `playground` object exposes the SDK methods
      // e.g. playground.run()
    });
    +
    Throws

    The createPlayground function throws an error (promise is rejected) in any of the following conditions:

      +
    • The first parameter (container) is not an element or not found (by CSS selector), except in headless mode.
      • +
    • The embed option appUrl is supplied and is not a valid URL.
      • +
    • The embed option config is supplied and is not an object or a valid URL.
      • +
    • Any of the SDK methods was called after calling the destroy method.
      • +
    +

    Multiple Sources​

    +

    When multiple sources are provided in the embed options, each is converted to a configuration object and the properties are merged. +In case there are conflicts between the properties of the configurations, they are overridden in the following order:

    + +

    getPlaygroundUrl​

    +

    Type: (options?: EmbedOptions) => string

    +

    Gets the URL to playground (as a string) from the provided options. This can be useful for providing links to run code in playgrounds.

    +

    Example:

    +
    <pre><code class="language-markdown"># Hello World!</code></pre>
    <a href="#" id="playground-link" target="_blank">Open in playground</a>
    <script type="module">
      import { getPlaygroundUrl } from 'livecodes';
      const config = {
        markup: {
          language: 'markdown',
          content: '# Hello World!',
        },
      };
      const url = getPlaygroundUrl({ config });
      document.querySelector('#playground-link').href = url;
    </script>
    + + +

    Embed Options​

    +

    Type: EmbedOptions

    +

    The createPlayground and getPlaygroundUrl functions accept an optional object that allows providing different options to the playground. This object can have the following optional properties:

    +

    appUrl​

    +

    Type: string

    +

    Default: "https://livecodes.io/"

    +

    Allows loading the playground from a custom URL (e.g. a self-hosted app or a permanent URL).

    +

    If supplied with an invalid URL, an error is thrown.

    +

    config​

    +

    Type: string | Partial<Config>

    +

    Default: {}

    +

    A configuration object or a URL to a JSON file representing a configuration object to load.

    +

    If supplied and is not an object or a valid URL, an error is thrown.

    +

    headless​

    +

    Type: boolean

    +

    Default: false

    +

    When set to true, the playground is loaded in headless mode.

    +

    import​

    +

    Type: string

    +

    A resource to import (from any of the supported sources).

    +

    loading​

    +

    Type: "eager" | "lazy" | "click"

    +

    Default: "lazy"

    +

    Sets how the playground loads:

    +
      +
    • "eager": The playground loads immediately.
      • +
    • "lazy": A playground embedded low down in the page will not load until the user scrolls so that it approaches the viewport.
      • +
    • "click": The playground does not load automatically. Instead, a "Click-to-load" screen is shown.
      • +
    +

    params​

    +

    Type: UrlQueryParams

    +

    An object that represents URL Query parameters, that can be used to configure the playground.

    +

    These 2 snippets produce similar output:

    +
    import { createPlayground } from 'livecodes';

    // use config
    createPlayground('#container', {
      config: {
        markup: {
          language: 'markdown',
          content: '# Hello World!',
        },
      },
    });

    // use params
    createPlayground('#container', { params: { md: '# Hello World!' } });
    +

    template​

    +

    Type: TemplateName

    +

    A starter template to load. Allowed valued can be found here.

    +

    SDK Methods​

    +

    The createPlayground function returns a promise which resolves to an object (Playground) that exposes some useful SDK methods that can be used to interact with the playground. These methods include:

    +

    load​

    +

    Type: () => Promise<void>

    +

    When the embed option loading is set to click, the playground is not loaded automatically. Instead, a screen is shown with "Click to load" button. +Calling the SDK method load() allows loading the playground.

    +

    If the playground was not loaded, calling any other method will load the playground first before executing.

    +
    import { createPlayground } from 'livecodes';

    createPlayground('#container').then(async (playground) => {
      await playground.load();
      // playground loaded
    });
    +

    run​

    +

    Type: () => Promise<void>

    +

    Runs the result page (after any required compilation for code).

    +
    import { createPlayground } from 'livecodes';

    createPlayground('#container').then(async (playground) => {
      await playground.run();
      // new result page is displayed
    });
    +

    format​

    +

    Type: (allEditors?: boolean) => Promise<void>

    +

    Formats the code.

    +

    By default, the code in all editors (markup, style and script) is formatted. +If you wish to format only the active editor, pass the value false as an argument.

    +
    import { createPlayground } from 'livecodes';

    createPlayground('#container').then(async (playground) => {
      await playground.format();
      // code in editors is formatted
    });
    +

    getShareUrl​

    +

    Type: (shortUrl?: boolean) => Promise<string>

    +

    Gets a share url for the current project.

    +

    By default, the url has a long query string representing the compressed encoded config object. If the argument shortUrl was set to true, a short url is generated.

    +
    import { createPlayground } from 'livecodes';

    createPlayground('#container').then(async (playground) => {
      const longUrl = await playground.getShareUrl();
      const shortUrl = await playground.getShareUrl(true);
    });
    +

    getConfig​

    +

    Type: (contentOnly?: boolean) => Promise<Config>

    +

    Gets a config object representing the playground state. This can be used to restore state if passed as embed option property on creating playground, or can be manipulated and loaded in run-time using setConfig method.

    +
    import { createPlayground } from 'livecodes';

    createPlayground('#container').then(async (playground) => {
      const config = await playground.getConfig();
    });
    +

    setConfig​

    +

    Type: (config: Partial<Config>) => Promise<Config>

    +

    Loads a new project using the passed configuration object.

    +
    import { createPlayground } from 'livecodes';

    createPlayground('#container').then(async (playground) => {
      const config = {
        markup: {
          language: 'html',
          content: 'Hello World!',
        },
      };
      const newConfig = await playground.setConfig(config);
      // new project loaded
    });
    +

    getCode​

    +

    Type: () => Promise<Code>

    +

    Gets the playground code (including source code, source language and compiled code) for each editor (markup, style, script), in addition to result page HTML.

    +
    import { createPlayground } from 'livecodes';

    createPlayground('#container').then(async (playground) => {
      const code = await playground.getCode();

      // source code, language and compiled code for the script editor
      const { content, language, compiled } = code.script;

      // result page HTML
      const result = code.result;
    });
    +

    show​

    +

    Type: (panel: 'editor' | 'markup' | 'style' | 'script' | 'console' | 'compiled' | 'tests' | 'result' | 'toggle-result', options?: { full?: boolean; line?: number; column?: number; zoom?: 1 | 0.5 | 0.25 }) => Promise<void>

    +

    Shows the selected panel, which is either:

    +
      +
    • Active Editor: editor
      • +
    • Specific Editor: markup, style or script
      • +
    • Tool: console, compiled or tests
      • +
    • Result page: result or toggle-result
      • +
    +

    The second optional argument is an object:

    +
      +
    • +

      It may have the boolean property full, which If true, selected editor or result page will take the full vertical and horizontal space of the playground, while tools will take the full vertical and half the horizontal space, leaving some space for the active editor.

      +
      • +
    • +

      The optional properties line and column allow scrolling to line/column number in the shown editor.

      +
      • +
    • +

      The optional property zoom sets the result page zoom level (the selected panel must be result).

      +
      • +
    +
    import { createPlayground } from 'livecodes';

    createPlayground('#container').then(async (playground) => {
      const delay = (duration) =>
        new Promise((resolve) => {
          setTimeout(resolve, duration);
        });

      await playground.show('toggle-result');
      await delay(2000);
      await playground.show('style');
      await delay(2000);
      await playground.show('result', { full: true });
      await delay(2000);
      await playground.show('script');
      await delay(2000);
      await playground.show('result', { zoom: 0.5 });
      await delay(2000);
      await playground.show('console', { full: true });
    });
    +

    runTests​

    +

    Type: () => Promise<{ results: TestResult[] }>

    +

    Runs project tests (if present) and gets test results.

    +
    import { createPlayground } from 'livecodes';

    createPlayground('#container').then(async (playground) => {
      const { results } = await playground.runTests();
    });
    +

    watch​

    +

    Type: docs

    +
    ((event: 'load', fn: () => void) => { remove: () => void }) &
    ((event: 'ready', fn: (data: { config: Config }) => void) => { remove: () => void }) &
    ((event: 'code', fn: (data: { code: Code; config: Config }) => void) => { remove: () => void }) &
    ((event: 'console', fn: (data: { method: string; args: any[] }) => void) => { remove: () => void }) &
    ((event: 'tests', fn: (data: { results: TestResult[]; error?: string }) => void) => { remove: () => void }) &
    ((event: 'destroy', fn: () => void) => { remove: () => void });
    +

    Allows to watch for various playground events. It takes 2 arguments: event name and a callback function that will be called on every event.

    +

    In some events, the callback function will be called with an object that supplies relevant data to the callback function (e.g. code, console output, test results).

    +

    The watch method returns an object with a single method remove, which when called will remove the callback from watching further events.

    +
    import { createPlayground } from 'livecodes';

    createPlayground('#container').then((playground) => {
      const codeWatcher = playground.watch('code', ({ code, config }) => {
        // this will run on every code change
        console.log('code:', code);
        console.log('config:', config);
      });

      const consoleWatcher = playground.watch('console', ({ method, args }) => {
        // this will run on every console output
        console[method](...args);
      });

      const testsWatcher = playground.watch('tests', ({ results }) => {
        // this will run when tests run
        results.forEach((testResult) => {
          console.log('status:', testResult.status); // "pass", "fail" or "skip"
          console.log(testResult.errors); // array of errors as strings
        });
      });

      // then later
      codeWatcher.remove();
      consoleWatcher.remove();
      testsWatcher.remove();
      // events are no longer watched
    });
    +

    These are the events that can be watched and the description of their callback functions:

    +
      +
    • +

      "load": Called when the playground first loads.

      +
      (
        event: "load",
        fn: () => void
      ) => { remove: () => void }
      +
      • +
    • +

      "ready": Called when a new project is loaded (including when imported) and the playground is ready to run.

      +
      (
        event: "ready",
        fn: (data: { config: Config }) => void
      ) => { remove: () => void }
      +
      • +
    • +

      "code": Called when the playground "content" is changed (see getCode and getConfig).

      +

      This includes changes in:

      + +
      (
        event: "code",
        fn: (data: { code: Code; config: Config }) => void
      ) => { remove: () => void }
      +
      • +
    • +

      "console": Called when the playground console gets new outputs. The callback method is passed an object with 2 properties: "method" (e.g. "log", "error", etc.) and "args" (the arguments passed to the method, as an array).

      +
      (
        event: "console",
        fn: (data: { method: string; args: any[] }) => void
      ) => { remove: () => void }
      +
      • +
    • +

      "tests": Called when tests run and test results are available (see runTests).

      +
      (
        event: "tests",
        fn: (data: { results: TestResult[]; error?: string }) => void
      ) => { remove: () => void }
      +
      • +
    • +

      "destroy": Called when the playground is destroyed.

      +
      (
        event: "destroy",
        fn: () => void
      ) => { remove: () => void }
      +
      • +
    +

    onChange​

    +

    Deprecated: Use watch method instead.

    +

    Type: (fn: ChangeHandler) => { remove: () => void }

    +

    Allows to watch the playground for changes. It takes a callback function that will be called on every change.

    +

    The callback function will be called with an object that has 2 properties: code and config, representing the current codes and configuration objects (see getCode and getConfig).

    +

    The onChange method returns an object with a single method remove, which when called will remove the callback from watching changes.

    +
    import { createPlayground } from 'livecodes';

    createPlayground('#container').then((playground) => {
      const watcher = playground.onChange(({ code, config }) => {
        // this will run on every code change
        console.log('code:', code);
        console.log('config:', config);
      });

      // then later
      watcher.remove();
      // changes are no longer watched
    });
    +

    exec​

    +

    Type: (command: APICommands, ...args: any[]) => Promise<{ output: any } | { error: string }>

    +

    Execute custom commands, including:

    + +
    // in browser console of full app (e.g. https://livecodes.io)
    await livecodes.exec('setBroadcastToken', 'my-token');
    +
      +
    • "showVersion": Logs the current LiveCodes app version, SDK version, git commit SHA, permanent app URL and SDK URL in the browser console.
      • +
    +
    // in browser console of full app (e.g. https://livecodes.io)
    await livecodes.exec('showVersion');
    +

    destroy​

    +

    Type: () => Promise<void>

    +

    Destroys the playground instance, and removes event listeners. Further call to any SDK methods throws an error.

    +
    import { createPlayground } from 'livecodes';

    createPlayground('#container').then(async (playground) => {
      await playground.destroy();
      // playground destroyed
      // any further SDK call throws an error
    });
    +

    Styles​

    +

    Default Styles​

    +

    By default, the container element is styled when the SDK is initialized (including width, height, border, etc.). To disable default styles, set the container element attribute data-default-styles to "false" before initializing.

    +

    Example:

    +
    <div id="container" data-default-styles="false" class="custom"></div>
    <script type="module">
      import { createPlayground } from 'livecodes';
      createPlayground('#container');
    </script>
    +

    Height​

    +

    By default, the playground container height is set to "300px". To change the height, either disable the default styles and override them, or simply set the data-height attribute to a number (in pixels) or any valid CSS value (e.g. "100%" to take the full height of its parent element).

    +

    Example:

    +
    <div id="container" data-height="500"></div>
    <script type="module">
      import { createPlayground } from 'livecodes';
      createPlayground('#container');
    </script>
    +

    Demo​

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "js": "import { createPlayground } from \"livecodes\";\n\nconst params = {\n  html: \"<h1>Hello World!</h1>\",\n  css: \"h1 {color: blue;}\",\n  js: 'console.log(\"Hello, LiveCodes!\")',\n  console: \"open\",\n};\n\ncreatePlayground('#container', { params });\n",
        "html": "<div id=\"container\"></div>"
      }
    };
    createPlayground('#container', options);

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/sdk/react.html.md b/docs/sdk/react.html.md new file mode 100644 index 0000000..297ed89 --- /dev/null +++ b/docs/sdk/react.html.md @@ -0,0 +1,151 @@ +# React SDK + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The react SDK is a thin wrapper around the [JavaScript SDK](js-ts.html.md) to provide an easy to use react component, yet retaining the full power, by having access to the [SDK methods](js-ts.html.md)#sdk-methods). + +It has a very simple [implementation](https://github.com/live-codes/livecodes/blob/develop/src/sdk/react.tsx) which you can easily modify in case you need. + +## Installation + +Please refer to the [SDK installation](./index.html.md)#installation) section. + +## Usage + +The react component is provided as the default export from `livecodes/react`. + +```jsx title="JSX" +import LiveCodes from 'livecodes/react'; + +export const Playground = () => ; +``` + +### TypeScript Support + +Prop types are exported as `Props` from `livecodes/react`. + +```tsx title="TSX" +import LiveCodes, { type Props } from 'livecodes/react'; + +const options: Props = { + // embed options +}; +export const Playground = () => ; +``` + +TypeScript types are [documented here](../api/globals.md). + +### Props + +All [embed options](js-ts.html.md)#embed-options) are available as props with the corresponding types. + +Example: + +```jsx title="JSX" +import LiveCodes from 'livecodes/react'; + +const config = { + markup: { + language: 'markdown', + content: '# Hello World!', + }, +}; +export const Playground = () => ; +``` + +In addition, the following props are also available: + +- `className` + + Type: `string`. + + Class name(s) to add to playground container element. + + Example: + + ```jsx title="JSX" + import LiveCodes from 'livecodes/react'; + + export const Playground = () => ; + ``` + +- `height` + + Type: `string`. + + Sets the height of playground container element. + + Example: + + ```jsx title="JSX" + import LiveCodes from 'livecodes/react'; + + export const Playground = () => ; + ``` + +- `style` + + Type: `Record`. + + Defines styles to add to playground container element. Styles set here override the [default styles](js-ts.html.md)#default-styles). + + Example: + + ```tsx title="JSX" + import LiveCodes from 'livecodes/react'; + + const style = { + margin: 'auto', + width: '80%', + }; + export const Playground = () => ; + ``` + +- `sdkReady` + + Type: `(sdk: Playground) => void`. + + A callback function, that is provided with an instance of the [JavaScript SDK](js-ts.html.md) representing the current playground. This allows making use of full capability of the SDK by calling [SDK methods](js-ts.html.md)#sdk-methods). + + Example: + + ```tsx title="TSX" + import { useState } from 'react'; + import LiveCodes from 'livecodes/react'; + import type { Playground } from 'livecodes'; + + export const App = () => { + const [playground, setPlayground] = useState(); + + const onReady = (sdk: Playground) => { + setPlayground(sdk); + }; + + const run = async () => { + await playground?.run(); + }; + + return ( + <> + + + + ); + }; + ``` + +## Demo + +export const reactSDKDemo = { + jsx: `import LiveCodes from "livecodes/react";\n\nconst App = () => {\n const params = {\n html: "

    Hello World!

    ",\n css: "h1 {color: blue;}",\n js: 'console.log("Hello, World!")',\n console: "open",\n };\n\n return ;\n};\n\nexport default App;\n`, +}; + + + +## Related + +- [SDK Installation](./index.html.md)#installation) +- [JS/TS SDK](./js-ts.html.md) +- [Vue SDK](./vue.html.md) +- [Using SDK in Svelte](./svelte.html.md) +- [Embedded Playgrounds](../features/embeds.html.md) \ No newline at end of file diff --git a/docs/sdk/react/index.html b/docs/sdk/react/index.html new file mode 100644 index 0000000..0d96345 --- /dev/null +++ b/docs/sdk/react/index.html @@ -0,0 +1,69 @@ +React SDK | LiveCodes

    React SDK

    + +

    The react SDK is a thin wrapper around the JavaScript SDK to provide an easy to use react component, yet retaining the full power, by having access to the SDK methods.

    +

    It has a very simple implementation which you can easily modify in case you need.

    +

    Installation​

    +

    Please refer to the SDK installation section.

    +

    Usage​

    +

    The react component is provided as the default export from livecodes/react.

    +
    JSX
    import LiveCodes from 'livecodes/react';

    export const Playground = () => <LiveCodes />;
    +

    TypeScript Support​

    +

    Prop types are exported as Props from livecodes/react.

    +
    TSX
    import LiveCodes, { type Props } from 'livecodes/react';

    const options: Props = {
      // embed options
    };
    export const Playground = () => <LiveCodes {...options} />;
    +

    TypeScript types are documented here.

    +

    Props​

    +

    All embed options are available as props with the corresponding types.

    +

    Example:

    +
    JSX
    import LiveCodes from 'livecodes/react';

    const config = {
      markup: {
        language: 'markdown',
        content: '# Hello World!',
      },
    };
    export const Playground = () => <LiveCodes config={config} view="result" />;
    +

    In addition, the following props are also available:

    +
      +
    • +

      className

      +

      Type: string.

      +

      Class name(s) to add to playground container element.

      +

      Example:

      +
      JSX
      import LiveCodes from 'livecodes/react';

      export const Playground = () => <LiveCodes className="centered" />;
      +
      • +
    • +

      height

      +

      Type: string.

      +

      Sets the height of playground container element.

      +

      Example:

      +
      JSX
      import LiveCodes from 'livecodes/react';

      export const Playground = () => <LiveCodes height="500px" />;
      +
      • +
    • +

      style

      +

      Type: Record<string, string>.

      +

      Defines styles to add to playground container element. Styles set here override the default styles.

      +

      Example:

      +
      JSX
      import LiveCodes from 'livecodes/react';

      const style = {
        margin: 'auto',
        width: '80%',
      };
      export const Playground = () => <LiveCodes style={style} />;
      +
      • +
    • +

      sdkReady

      +

      Type: (sdk: Playground) => void.

      +

      A callback function, that is provided with an instance of the JavaScript SDK representing the current playground. This allows making use of full capability of the SDK by calling SDK methods.

      +

      Example:

      +
      TSX
      import { useState } from 'react';
      import LiveCodes from 'livecodes/react';
      import type { Playground } from 'livecodes';

      export const App = () => {
        const [playground, setPlayground] = useState<Playground>();

        const onReady = (sdk: Playground) => {
          setPlayground(sdk);
        };

        const run = async () => {
          await playground?.run();
        };

        return (
          <>
            <LiveCodes sdkReady={onReady} />
            <button onClick={run}>Run</button>
          </>
        );
      };
      +
      • +
    +

    Demo​

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "jsx": "import LiveCodes from \"livecodes/react\";\n\nconst App = () => {\n  const params = {\n    html: \"<h1>Hello World!</h1>\",\n    css: \"h1 {color: blue;}\",\n    js: 'console.log(\"Hello, World!\")',\n    console: \"open\",\n  };\n\n  return <LiveCodes params={params} />;\n};\n\nexport default App;\n"
      }
    };
    createPlayground('#container', options);

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/sdk/svelte.html.md b/docs/sdk/svelte.html.md new file mode 100644 index 0000000..3ca42b8 --- /dev/null +++ b/docs/sdk/svelte.html.md @@ -0,0 +1,100 @@ +# Svelte + +import LiveCodes from '../../src/components/LiveCodes.tsx'; +import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx'; + +The [JS/TS SDK](js-ts.html.md) can be used directly in Svelte components without the need for any wrappers. + +## Installation + +Please refer to the [SDK installation](./index.html.md)#installation) section. + +## Usage + +This is an example of using the LiveCodes JS SDK in a Svelte component: + +```html title="Component.svelte" + + +
    +``` + +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: '

    Hello World!

    ',\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
    \n`, +}; + + + +[Embed options](./js-ts.html.md)#embed-options), [SDK methods](./js-ts.html.md)#sdk-methods) and [TypeScript types](./js-ts.html.md)#typescript-types) are available as described in the [JS/TS SDK documentations](./js-ts.html.md). + +Alternatively, the SDK function [`createPlayground`](./js-ts.html.md)#createplayground) can be used as an [action](https://learn.svelte.dev/tutorial/actions). + +Example: + +```html title="Component.svelte" + + +
    +``` + +However, it is recommended to cleanup when the node is unmounted, like that: + +```html title="Component.svelte" + + +
    +``` + +## Demo + + + +## Related + +- [SDK Installation](./index.html.md)#installation) +- [JS/TS SDK](./js-ts.html.md) +- [React SDK](./react.html.md) +- [Vue SDK](./vue.html.md) +- [Embedded Playgrounds](../features/embeds.html.md) \ No newline at end of file diff --git a/docs/sdk/svelte/index.html b/docs/sdk/svelte/index.html new file mode 100644 index 0000000..bf45cf0 --- /dev/null +++ b/docs/sdk/svelte/index.html @@ -0,0 +1,36 @@ +Svelte | LiveCodes

    Svelte

    + +

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

    +

    Installation​

    +

    Please refer to the SDK installation section.

    +

    Usage​

    +

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

    +
    Component.svelte
    <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>
    + + +

    Embed options, SDK methods and TypeScript types are available as described in the JS/TS SDK documentations.

    +

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

    +

    Example:

    +
    Component.svelte
    <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:

    +
    Component.svelte
    <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>
    +

    Demo​

    +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "svelte": "<script>\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</script>\n\n<div bind:this=\"{container}\"></div>\n"
      }
    };
    createPlayground('#container', options);

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/sdk/vue.html.md b/docs/sdk/vue.html.md new file mode 100644 index 0000000..134a530 --- /dev/null +++ b/docs/sdk/vue.html.md @@ -0,0 +1,166 @@ +# Vue SDK + +import LiveCodes from '../../src/components/LiveCodes.tsx'; + +The vue SDK is a thin wrapper around the [JavaScript SDK](js-ts.html.md) to provide an easy to use vue component, yet retaining the full power, by having access to the [SDK methods](js-ts.html.md)#sdk-methods). + +It has a very simple [implementation](https://github.com/live-codes/livecodes/blob/develop/src/sdk/vue.ts) which you can easily modify in case you need. + +## Installation + +Please refer to the [SDK installation](./index.html.md)#installation) section. + +## Usage + +The vue component is provided as the default export from `livecodes/vue`. + +```html title="App.vue" + + + +``` + +### TypeScript Support + +Prop types are exported as `Props` from `livecodes/vue`. + +```html title="App.vue" + + + +``` + +TypeScript types are [documented here](../api/globals.md). + +### Props + +All [embed options](js-ts.html.md)#embed-options) are available as props with the corresponding types. + +Example: + +```html title="App.vue" + + + +``` + +In addition, the following prop is also available: + +- `height` + + Type: `string`. + + Sets the [height of playground container](js-ts.html.md)#height) element. + + Example: + + ```html title="App.vue" + + + + ``` + +### Events + +- `"sdkReady"` + + Type: `(sdk: Playground) => void`. + + When the playground initializes, the event `"sdkReady"` is emitted. The event handler function is provided with an instance of the [JavaScript SDK](js-ts.html.md) representing the current playground. This allows making use of full capability of the SDK by calling [SDK methods](js-ts.html.md)#sdk-methods). + + Example: + + ```html title="App.vue" + + + + ``` + +### Styles + +Styles can be applied to the component [as usual](https://vuejs.org/guide/essentials/class-and-style.html#binding-html-classes). + +By default, a set of [default styles](js-ts.html.md)#default-styles) are applied to the playground container. Styles passed to the component override these default styles. + +Example: + +```html title="App.vue" + + + +``` + +## Demo + +export const vueSDKDemo = { + vue: `\n\n\n`, +}; + + + +## Related + +- [SDK Installation](./index.html.md)#installation) +- [JS/TS SDK](./js-ts.html.md) +- [React SDK](./react.html.md) +- [Using SDK in Svelte](./svelte.html.md) +- [Embedded Playgrounds](../features/embeds.html.md) \ No newline at end of file diff --git a/docs/sdk/vue/index.html b/docs/sdk/vue/index.html new file mode 100644 index 0000000..7fcdfe1 --- /dev/null +++ b/docs/sdk/vue/index.html @@ -0,0 +1,63 @@ +Vue SDK | LiveCodes

    Vue SDK

    + +

    The vue SDK is a thin wrapper around the JavaScript SDK to provide an easy to use vue component, yet retaining the full power, by having access to the SDK methods.

    +

    It has a very simple implementation which you can easily modify in case you need.

    +

    Installation​

    +

    Please refer to the SDK installation section.

    +

    Usage​

    +

    The vue component is provided as the default export from livecodes/vue.

    +
    App.vue
    <script setup>
      import LiveCodes from 'livecodes/vue';
    </script>

    <template>
      <LiveCodes />
    </template>
    +

    TypeScript Support​

    +

    Prop types are exported as Props from livecodes/vue.

    +
    App.vue
    <script setup lang="ts">
      import LiveCodes, { type Props } from 'livecodes/vue';
      const options: Props = {
        // embed options
      };
    </script>

    <template>
      <LiveCodes v-bind="options" />
    </template>
    +

    TypeScript types are documented here.

    +

    Props​

    +

    All embed options are available as props with the corresponding types.

    +

    Example:

    +
    App.vue
    <script setup>
      import LiveCodes from 'livecodes/vue';

      const config = {
        markup: {
          language: 'markdown',
          content: '# Hello World!',
        },
      };
    </script>

    <template>
      <LiveCodes :config="config" view="result" />
    </template>
    +

    In addition, the following prop is also available:

    +
      +
    • +

      height

      +

      Type: string.

      +

      Sets the height of playground container element.

      +

      Example:

      +
      App.vue
      <script setup>
        import LiveCodes from 'livecodes/vue';
      </script>

      <template>
        <LiveCodes height="500px" />
      </template>
      +
      • +
    +

    Events​

    +
      +
    • +

      "sdkReady"

      +

      Type: (sdk: Playground) => void.

      +

      When the playground initializes, the event "sdkReady" is emitted. The event handler function is provided with an instance of the JavaScript SDK representing the current playground. This allows making use of full capability of the SDK by calling SDK methods.

      +

      Example:

      +
      App.vue
      <script setup lang="ts">
        import type { Playground } from 'livecodes';
        import LiveCodes, { type Props } from 'livecodes/vue';

        const options: Props = {
          config: {
            markup: {
              language: 'html',
              content: '<h1>Hello World!</h1>',
            },
          },
        };

        let playground: Playground | undefined;
        const onReady = (sdk: Playground) => {
          playground = sdk;
        };

        const run = async () => {
          await playground?.run();
        };
      </script>

      <template>
        <LiveCodes v-bind="options" @sdk-ready="onReady" />
        <button @click="run">run</button>
      </template>
      +
      • +
    +

    Styles​

    +

    Styles can be applied to the component as usual.

    +

    By default, a set of default styles are applied to the playground container. Styles passed to the component override these default styles.

    +

    Example:

    +
    App.vue
    <script setup>
      import LiveCodes from 'livecodes/vue';

      const style = {
        margin: 'auto',
        width: '80%',
      };
    </script>

    <template>
      <LiveCodes :style="style" />
    </template>
    +

    Demo​

    + +
    show code
    import { createPlayground } from 'livecodes';

    const options = {
      "params": {
        "vue": "<script setup>\n  import LiveCodes from 'livecodes/vue';\n  \n  const params = {\n    html: '<h1>Hello World!</h1>',\n    css: 'h1 {color: blue;}',\n    js: 'console.log(\"Hello, Svelte!\")',\n    console: 'open',\n  };\n</script>\n\n<template>\n  <LiveCodes :params=\"params\" />\n</template>\n"
      }
    };
    createPlayground('#container', options);

    + +
    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/search/index.html b/docs/search/index.html new file mode 100644 index 0000000..a5d9fb3 --- /dev/null +++ b/docs/search/index.html @@ -0,0 +1,3 @@ +Search the documentation | LiveCodes

    Search the documentation

    \ No newline at end of file diff --git a/docs/sitemap.xml b/docs/sitemap.xml new file mode 100644 index 0000000..95e9c58 --- /dev/null +++ b/docs/sitemap.xml @@ -0,0 +1 @@ +https://livecodes.io/docs/searchweekly0.5https://livecodes.io/docs/weekly0.5https://livecodes.io/docs/aboutweekly0.5https://livecodes.io/docs/advanced/weekly0.5https://livecodes.io/docs/advanced/custom-settingsweekly0.5https://livecodes.io/docs/advanced/servicesweekly0.5https://livecodes.io/docs/api/weekly0.5https://livecodes.io/docs/api/functions/createPlaygroundweekly0.5https://livecodes.io/docs/api/functions/getPlaygroundUrlweekly0.5https://livecodes.io/docs/api/globalsweekly0.5https://livecodes.io/docs/api/interfaces/Codeweekly0.5https://livecodes.io/docs/api/interfaces/Configweekly0.5https://livecodes.io/docs/api/interfaces/EmbedOptionsweekly0.5https://livecodes.io/docs/api/interfaces/Playgroundweekly0.5https://livecodes.io/docs/api/internal/weekly0.5https://livecodes.io/docs/api/internal/interfaces/APIweekly0.5https://livecodes.io/docs/api/internal/interfaces/AppConfigweekly0.5https://livecodes.io/docs/api/internal/interfaces/ContentConfigweekly0.5https://livecodes.io/docs/api/internal/interfaces/EditorConfigweekly0.5https://livecodes.io/docs/api/internal/interfaces/EditorPositionweekly0.5https://livecodes.io/docs/api/internal/interfaces/FormatterConfigweekly0.5https://livecodes.io/docs/api/internal/interfaces/TestResultweekly0.5https://livecodes.io/docs/api/internal/interfaces/Typesweekly0.5https://livecodes.io/docs/api/internal/interfaces/UserConfigweekly0.5https://livecodes.io/docs/api/internal/type-aliases/APICommandsweekly0.5https://livecodes.io/docs/api/internal/type-aliases/AppLanguageweekly0.5https://livecodes.io/docs/api/internal/type-aliases/CDNweekly0.5https://livecodes.io/docs/api/internal/type-aliases/CodejarThemeweekly0.5https://livecodes.io/docs/api/internal/type-aliases/CodemirrorThemeweekly0.5https://livecodes.io/docs/api/internal/type-aliases/CssPresetIdweekly0.5https://livecodes.io/docs/api/internal/type-aliases/EditorIdweekly0.5https://livecodes.io/docs/api/internal/type-aliases/EditorThemeweekly0.5https://livecodes.io/docs/api/internal/type-aliases/MonacoThemeweekly0.5https://livecodes.io/docs/api/internal/type-aliases/Processorweekly0.5https://livecodes.io/docs/api/internal/type-aliases/TemplateNameweekly0.5https://livecodes.io/docs/api/internal/type-aliases/Themeweekly0.5https://livecodes.io/docs/api/internal/type-aliases/ToolsPaneStatusweekly0.5https://livecodes.io/docs/api/internal/type-aliases/WatchCodeweekly0.5https://livecodes.io/docs/api/internal/type-aliases/WatchConsoleweekly0.5https://livecodes.io/docs/api/internal/type-aliases/WatchDestroyweekly0.5https://livecodes.io/docs/api/internal/type-aliases/WatchLoadweekly0.5https://livecodes.io/docs/api/internal/type-aliases/WatchReadyweekly0.5https://livecodes.io/docs/api/internal/type-aliases/WatchTestsweekly0.5https://livecodes.io/docs/api/type-aliases/Languageweekly0.5https://livecodes.io/docs/bookmarkletweekly0.5https://livecodes.io/docs/configuration/weekly0.5https://livecodes.io/docs/configuration/configuration-objectweekly0.5https://livecodes.io/docs/configuration/query-paramsweekly0.5https://livecodes.io/docs/contactweekly0.5https://livecodes.io/docs/contributionweekly0.5https://livecodes.io/docs/contribution/adding-languagesweekly0.5https://livecodes.io/docs/contribution/i18nweekly0.5https://livecodes.io/docs/contribution/releaseweekly0.5https://livecodes.io/docs/creditsweekly0.5https://livecodes.io/docs/examples/display-modes/weekly0.5https://livecodes.io/docs/examples/display-modes/codeblockweekly0.5https://livecodes.io/docs/examples/display-modes/editorweekly0.5https://livecodes.io/docs/examples/display-modes/fullweekly0.5https://livecodes.io/docs/examples/display-modes/resultweekly0.5https://livecodes.io/docs/features/weekly0.5https://livecodes.io/docs/features/aiweekly0.5https://livecodes.io/docs/features/assetsweekly0.5https://livecodes.io/docs/features/backup-restoreweekly0.5https://livecodes.io/docs/features/broadcastweekly0.5https://livecodes.io/docs/features/code-formatweekly0.5https://livecodes.io/docs/features/code-prefillweekly0.5https://livecodes.io/docs/features/code-to-imageweekly0.5https://livecodes.io/docs/features/command-menuweekly0.5https://livecodes.io/docs/features/compiled-codeweekly0.5https://livecodes.io/docs/features/consoleweekly0.5https://livecodes.io/docs/features/cssweekly0.5https://livecodes.io/docs/features/data-urlsweekly0.5https://livecodes.io/docs/features/default-template-languageweekly0.5https://livecodes.io/docs/features/default-viewweekly0.5https://livecodes.io/docs/features/deployweekly0.5https://livecodes.io/docs/features/display-modesweekly0.5https://livecodes.io/docs/features/editor-settingsweekly0.5https://livecodes.io/docs/features/embedsweekly0.5https://livecodes.io/docs/features/emmetweekly0.5https://livecodes.io/docs/features/exportweekly0.5https://livecodes.io/docs/features/external-resourcesweekly0.5https://livecodes.io/docs/features/github-integrationweekly0.5https://livecodes.io/docs/features/i18nweekly0.5https://livecodes.io/docs/features/importweekly0.5https://livecodes.io/docs/features/integrationsweekly0.5https://livecodes.io/docs/features/intellisenseweekly0.5https://livecodes.io/docs/features/keyboard-shortcutsweekly0.5https://livecodes.io/docs/features/liteweekly0.5https://livecodes.io/docs/features/mobileweekly0.5https://livecodes.io/docs/features/module-resolutionweekly0.5https://livecodes.io/docs/features/permanent-urlweekly0.5https://livecodes.io/docs/features/projectsweekly0.5https://livecodes.io/docs/features/read-onlyweekly0.5https://livecodes.io/docs/features/recoverweekly0.5https://livecodes.io/docs/features/resultweekly0.5https://livecodes.io/docs/features/securityweekly0.5https://livecodes.io/docs/features/self-hostingweekly0.5https://livecodes.io/docs/features/shareweekly0.5https://livecodes.io/docs/features/snippetsweekly0.5https://livecodes.io/docs/features/syncweekly0.5https://livecodes.io/docs/features/templatesweekly0.5https://livecodes.io/docs/features/testsweekly0.5https://livecodes.io/docs/features/themesweekly0.5https://livecodes.io/docs/features/tools-paneweekly0.5https://livecodes.io/docs/features/user-managementweekly0.5https://livecodes.io/docs/features/user-settingsweekly0.5https://livecodes.io/docs/features/welcomeweekly0.5https://livecodes.io/docs/getting-startedweekly0.5https://livecodes.io/docs/gh-actionweekly0.5https://livecodes.io/docs/languages/weekly0.5https://livecodes.io/docs/languages/art-templateweekly0.5https://livecodes.io/docs/languages/asciidocweekly0.5https://livecodes.io/docs/languages/assemblyscriptweekly0.5https://livecodes.io/docs/languages/astroweekly0.5https://livecodes.io/docs/languages/autoprefixerweekly0.5https://livecodes.io/docs/languages/babelweekly0.5https://livecodes.io/docs/languages/bbcodeweekly0.5https://livecodes.io/docs/languages/blocklyweekly0.5https://livecodes.io/docs/languages/civetweekly0.5https://livecodes.io/docs/languages/clioweekly0.5https://livecodes.io/docs/languages/clojurescriptweekly0.5https://livecodes.io/docs/languages/coffeescriptweekly0.5https://livecodes.io/docs/languages/commonlispweekly0.5https://livecodes.io/docs/languages/cppweekly0.5https://livecodes.io/docs/languages/cpp-wasmweekly0.5https://livecodes.io/docs/languages/csharp-wasmweekly0.5https://livecodes.io/docs/languages/cssweekly0.5https://livecodes.io/docs/languages/cssmodulesweekly0.5https://livecodes.io/docs/languages/cssnanoweekly0.5https://livecodes.io/docs/languages/diagramsweekly0.5https://livecodes.io/docs/languages/dotweekly0.5https://livecodes.io/docs/languages/ejsweekly0.5https://livecodes.io/docs/languages/etaweekly0.5https://livecodes.io/docs/languages/fennelweekly0.5https://livecodes.io/docs/languages/flowweekly0.5https://livecodes.io/docs/languages/gleamweekly0.5https://livecodes.io/docs/languages/goweekly0.5https://livecodes.io/docs/languages/hamlweekly0.5https://livecodes.io/docs/languages/handlebarsweekly0.5https://livecodes.io/docs/languages/htmlweekly0.5https://livecodes.io/docs/languages/imbaweekly0.5https://livecodes.io/docs/languages/javaweekly0.5https://livecodes.io/docs/languages/javascriptweekly0.5https://livecodes.io/docs/languages/jinjaweekly0.5https://livecodes.io/docs/languages/jsxweekly0.5https://livecodes.io/docs/languages/juliaweekly0.5https://livecodes.io/docs/languages/lessweekly0.5https://livecodes.io/docs/languages/lightningcssweekly0.5https://livecodes.io/docs/languages/liquidweekly0.5https://livecodes.io/docs/languages/livescriptweekly0.5https://livecodes.io/docs/languages/luaweekly0.5https://livecodes.io/docs/languages/lua-wasmweekly0.5https://livecodes.io/docs/languages/malinaweekly0.5https://livecodes.io/docs/languages/markdownweekly0.5https://livecodes.io/docs/languages/mdxweekly0.5https://livecodes.io/docs/languages/mjmlweekly0.5https://livecodes.io/docs/languages/mustacheweekly0.5https://livecodes.io/docs/languages/nunjucksweekly0.5https://livecodes.io/docs/languages/ocamlweekly0.5https://livecodes.io/docs/languages/perlweekly0.5https://livecodes.io/docs/languages/phpweekly0.5https://livecodes.io/docs/languages/php-wasmweekly0.5https://livecodes.io/docs/languages/postcssweekly0.5https://livecodes.io/docs/languages/postcssImportUrlweekly0.5https://livecodes.io/docs/languages/postcssPresetEnvweekly0.5https://livecodes.io/docs/languages/postgresqlweekly0.5https://livecodes.io/docs/languages/prologweekly0.5https://livecodes.io/docs/languages/pugweekly0.5https://livecodes.io/docs/languages/purgecssweekly0.5https://livecodes.io/docs/languages/pythonweekly0.5https://livecodes.io/docs/languages/python-wasmweekly0.5https://livecodes.io/docs/languages/rweekly0.5https://livecodes.io/docs/languages/reactweekly0.5https://livecodes.io/docs/languages/react-nativeweekly0.5https://livecodes.io/docs/languages/react-native-tsxweekly0.5https://livecodes.io/docs/languages/react-tsxweekly0.5https://livecodes.io/docs/languages/reasonweekly0.5https://livecodes.io/docs/languages/rescriptweekly0.5https://livecodes.io/docs/languages/richtextweekly0.5https://livecodes.io/docs/languages/riotweekly0.5https://livecodes.io/docs/languages/rubyweekly0.5https://livecodes.io/docs/languages/ruby-wasmweekly0.5https://livecodes.io/docs/languages/sassweekly0.5https://livecodes.io/docs/languages/schemeweekly0.5https://livecodes.io/docs/languages/scssweekly0.5https://livecodes.io/docs/languages/solidweekly0.5https://livecodes.io/docs/languages/solid.tsxweekly0.5https://livecodes.io/docs/languages/sqlweekly0.5https://livecodes.io/docs/languages/stencilweekly0.5https://livecodes.io/docs/languages/stylisweekly0.5https://livecodes.io/docs/languages/stylusweekly0.5https://livecodes.io/docs/languages/sucraseweekly0.5https://livecodes.io/docs/languages/svelteweekly0.5https://livecodes.io/docs/languages/tailwindcssweekly0.5https://livecodes.io/docs/languages/tclweekly0.5https://livecodes.io/docs/languages/tealweekly0.5https://livecodes.io/docs/languages/tokencssweekly0.5https://livecodes.io/docs/languages/tsxweekly0.5https://livecodes.io/docs/languages/twigweekly0.5https://livecodes.io/docs/languages/typescriptweekly0.5https://livecodes.io/docs/languages/unocssweekly0.5https://livecodes.io/docs/languages/ventoweekly0.5https://livecodes.io/docs/languages/vueweekly0.5https://livecodes.io/docs/languages/vue2weekly0.5https://livecodes.io/docs/languages/watweekly0.5https://livecodes.io/docs/languages/windicssweekly0.5https://livecodes.io/docs/licenseweekly0.5https://livecodes.io/docs/markdown-to-livecodesweekly0.5https://livecodes.io/docs/overviewweekly0.5https://livecodes.io/docs/sdk/weekly0.5https://livecodes.io/docs/sdk/headlessweekly0.5https://livecodes.io/docs/sdk/js-tsweekly0.5https://livecodes.io/docs/sdk/reactweekly0.5https://livecodes.io/docs/sdk/svelteweekly0.5https://livecodes.io/docs/sdk/vueweekly0.5https://livecodes.io/docs/sponsorweekly0.5https://livecodes.io/docs/whyweekly0.5 \ No newline at end of file diff --git a/docs/sponsor.html.md b/docs/sponsor.html.md new file mode 100644 index 0000000..c69936f --- /dev/null +++ b/docs/sponsor.html.md @@ -0,0 +1,123 @@ +import MailLink from '../src/components/MailLink.tsx'; + +# Sponsor LiveCodes + +Thank you for considering becoming a sponsor of LiveCodes! 💚 + +LiveCodes is a feature-rich, open source code playground with a wide range of language support. With LiveCodes, learning, prototyping, experimenting, documenting, teaching, and sharing code is easier and more enjoyable than ever. + +LiveCodes is free, with no limits for use, no ads and no account required. The MIT license allows anyone to use (including commercial use), modify, and distribute. + +As a sponsor of LiveCodes, you will be supporting the ongoing development and maintenance of the project, as well as helping to ensure that it remains a valuable resource for the developer community. In return, you will receive recognition as a sponsor on the documentation website, GitHub repo and social media channels, as well as the opportunity to engage with our community of users and contributors. + +There are several ways to support LiveCodes as a sponsor: + +### Financial Contributions + +LiveCodes relies on the support of sponsors like you to fund its ongoing development and maintenance. Your financial contribution will help to ensure that the project remains sustainable in the long term. + +Payments can be done via: + +- [GitHub Sponsors](https://github.com/sponsors/live-codes/) +- [PayPal](https://paypal.me/hatemhosni) +- [Ko-fi](https://ko-fi.com/hatemhosny) + +Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in [Sponsorship Benefits](#sponsorship-benefits). + +If you have questions, please reach out to . + +### In-kind Contributions + +Do you have a service or product that could be useful to the LiveCodes community? We welcome in-kind contributions that can help to support the project and its users. + +In-kind contributors are recognized (logo and name) in the [credits](./credits.html.md) page and in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes). + +### Marketing and Promotion + +Help us to spread the word about LiveCodes by sharing our content on your social media channels, writing blog posts about LiveCodes or by providing us with promotional opportunities. + +### Sponsorship Benefits + +#### ☕️ Backers (USD$5/mo): + +- Name listed in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes). +- Thank you 💚 + Your support is really appreciated. + +#### 🍹 Generous Backers (USD$25/mo): + +- Name listed in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes). +- Priority in feature requests. + +#### 🥉 Bronze Sponsors (USD$100/mo): + +- Access to a hosted (always-on) [broadcast API](./features/broadcast.html.md) and [custom services](./advanced/services.html.md). +- Small logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs). +- Small logo placement in [this page](#livecodes-sponsors). +- Small logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes). +- Priority in feature requests. + +#### 🥈 Silver Sponsors (USD$250/mo): + +- Access to a hosted (always-on) [broadcast API](./features/broadcast.html.md) and [custom services](./advanced/services.html.md). +- Medium logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs). +- Logo placement in sidebar of all content pages. +- Medium logo placement in [this page](#livecodes-sponsors). +- Medium logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes). +- Priority in feature requests. + +#### 🥇 Gold Sponsors (USD$500/mo): + +- Access to a hosted (always-on) [broadcast API](./features/broadcast.html.md) and [custom services](./advanced/services.html.md). +- Large logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs). +- Logo placement in sidebar of all content pages. +- Large logo placement in [this page](#livecodes-sponsors). +- Large logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes). +- Priority in feature requests. + +#### 🏆 Platinum Sponsors (USD$1,000/mo): + +- Access to a hosted (always-on) [broadcast API](./features/broadcast.html.md) and [custom services](./advanced/services.html.md). +- Prominent logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs). +- Prominent logo placement in sidebar of all content pages. +- Prominent logo placement at the top of [this page](#). +- Prominent logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes). +- Priority in feature requests. + +#### 💎 Diamond Sponsors (USD$2,000/mo): + +- **Custom build** of the playground with your **logo and brand**. The custom build is maintained and receives new updates. +- Access to a hosted (always-on) [broadcast API](./features/broadcast.html.md) and [custom services](./advanced/services.html.md). +- Prominent logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs). +- Prominent logo placement in sidebar of all content pages. +- Prominent logo placement at the top of [this page](#). +- Prominent logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes). +- Priority in feature requests. + +#### 🌟 Special Sponsors (> USD$2,000/mo): + +    . + +

     

    + +If you are interested in becoming a sponsor of LiveCodes, please don't hesitate to . We would love to discuss the various sponsorship options available and find a way for you to get involved. Thank you for your support! + +## LiveCodes Sponsors + +
    + Your logo here +
    \ No newline at end of file diff --git a/docs/sponsor/index.html b/docs/sponsor/index.html new file mode 100644 index 0000000..73d132a --- /dev/null +++ b/docs/sponsor/index.html @@ -0,0 +1,94 @@ +Sponsor | LiveCodes

    Sponsor LiveCodes

    +

    Thank you for considering becoming a sponsor of LiveCodes! 💚

    +

    LiveCodes is a feature-rich, open source code playground with a wide range of language support. With LiveCodes, learning, prototyping, experimenting, documenting, teaching, and sharing code is easier and more enjoyable than ever.

    +

    LiveCodes is free, with no limits for use, no ads and no account required. The MIT license allows anyone to use (including commercial use), modify, and distribute.

    +

    As a sponsor of LiveCodes, you will be supporting the ongoing development and maintenance of the project, as well as helping to ensure that it remains a valuable resource for the developer community. In return, you will receive recognition as a sponsor on the documentation website, GitHub repo and social media channels, as well as the opportunity to engage with our community of users and contributors.

    +

    There are several ways to support LiveCodes as a sponsor:

    +

    Financial Contributions​

    +

    LiveCodes relies on the support of sponsors like you to fund its ongoing development and maintenance. Your financial contribution will help to ensure that the project remains sustainable in the long term.

    +

    Payments can be done via:

    + +

    Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in Sponsorship Benefits.

    +

    If you have questions, please reach out to sponsor@livecodes.io.

    +

    In-kind Contributions​

    +

    Do you have a service or product that could be useful to the LiveCodes community? We welcome in-kind contributions that can help to support the project and its users.

    +

    In-kind contributors are recognized (logo and name) in the credits page and in the README of live-codes/livecodes.

    +

    Marketing and Promotion​

    +

    Help us to spread the word about LiveCodes by sharing our content on your social media channels, writing blog posts about LiveCodes or by providing us with promotional opportunities.

    +

    Sponsorship Benefits​

    +

    ☕️ Backers (USD$5/mo):​

    +
      +
    • Name listed in the README of live-codes/livecodes.
      • +
    • Thank you 💚 +Your support is really appreciated.
      • +
    +

    🍹 Generous Backers (USD$25/mo):​

    + +

    🥉 Bronze Sponsors (USD$100/mo):​

    + +

    🥈 Silver Sponsors (USD$250/mo):​

    + +

    🥇 Gold Sponsors (USD$500/mo):​

    + +

    🏆 Platinum Sponsors (USD$1,000/mo):​

    + +

    💎 Diamond Sponsors (USD$2,000/mo):​

    +
      +
    • Custom build of the playground with your logo and brand. The custom build is maintained and receives new updates.
      • +
    • Access to a hosted (always-on) broadcast API and custom services.
      • +
    • Prominent logo placement on the front page of https://livecodes.io/docs.
      • +
    • Prominent logo placement in sidebar of all content pages.
      • +
    • Prominent logo placement at the top of this page.
      • +
    • Prominent logo placement in the README of live-codes/livecodes.
      • +
    • Priority in feature requests.
      • +
    +

    🌟 Special Sponsors (> USD$2,000/mo):​

    +

        Let's discuss.

    +

     

    +

    If you are interested in becoming a sponsor of LiveCodes, please don't hesitate to reach out to us. We would love to discuss the various sponsorship options available and find a way for you to get involved. Thank you for your support!

    +

    LiveCodes Sponsors​

    +

    Your logo here

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/docs/vid/LiveCodes-AI-py.mp4 b/docs/vid/LiveCodes-AI-py.mp4 new file mode 100644 index 0000000..85df4b9 Binary files /dev/null and b/docs/vid/LiveCodes-AI-py.mp4 differ diff --git a/docs/vid/LiveCodes-AI-py.webm b/docs/vid/LiveCodes-AI-py.webm new file mode 100644 index 0000000..55bbddc Binary files /dev/null and b/docs/vid/LiveCodes-AI-py.webm differ diff --git a/docs/vid/LiveCodes-AI.mp4 b/docs/vid/LiveCodes-AI.mp4 new file mode 100644 index 0000000..61c5257 Binary files /dev/null and b/docs/vid/LiveCodes-AI.mp4 differ diff --git a/docs/vid/LiveCodes-AI.webm b/docs/vid/LiveCodes-AI.webm new file mode 100644 index 0000000..b2f4fee Binary files /dev/null and b/docs/vid/LiveCodes-AI.webm differ diff --git a/docs/why.html.md b/docs/why.html.md new file mode 100644 index 0000000..16c39c8 --- /dev/null +++ b/docs/why.html.md @@ -0,0 +1,76 @@ +# Why Another Playground? + +There are great products like [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), [JS Bin](https://jsbin.com/), [CodeSandbox](https://codesandbox.io/), [Replit](https://replit.com/) and many others, which LiveCodes does not aim to replace or compete with. On the contrary, it aims to [integrate](./features/integrations.html.md) with as many of these services as their APIs allow. + +## What makes LiveCodes different? + +### Language Support + +Currently, there are 90+ languages/frameworks supported. These include: + +- Web languages (HTML, CSS & JavaScript). +- Web frameworks/libraries (e.g. React JSX/TSX, Vue SFC, Svelte SFC, Solid, MDX, Astro). +- Languages that transpile to JavaScript (e.g. TypeScript, CoffeeScript, LiveScript, ReScript). +- Languages/frameworks that generate CSS (e.g. SCSS, Less, Stylus, Tailwind CSS, UnoCSS). +- CSS processors (e.g. PostCSS, Autoprefixer, Lightning CSS, CSS Modules, cssnano). +- Traditional programming languages (e.g. Python, Ruby, Go, PHP, C++, R, Lua, Scheme, Perl). +- Data manipulation/logic languages (e.g. SQL, Prolog). +- Authoring/templating languages (e.g Markdown, AsciiDoc, Pug, Handlebars, Haml). +- Low-code/visual editors (e.g. blockly, rich text editor). +- Modeling languages/diagram-as-code (e.g. Gnuplot, Graphviz, Mermaid, Vega, Plotly). +- Languages that target WebAssembly (e.g. AssemblyScript, WebAssembly Text Format). +- ... and many more. + +For a full list check the [Languages](./languages/index.html.md) section. + +Generally, if you are a developer (or want to be one), there is a big chance you will find something interesting to do with LiveCodes. + +### Client-Side! + +All processing and code transformations run in the browser on the client-side. After the initial load, the app gets significantly faster without having to wait for server rounds. Lazy-loading is heavily used. Only parts of the app required for the selected languages/features are downloaded. + +The code you write in LiveCodes does not leave your computer. All projects are private unless you choose to share/export/deploy them. + +Being a client-side app allows it to be hosted on any static file server or CDN, which removes the high requirements needed by other alternatives (like server storage or memory). This makes LiveCodes available for a large number of developers without requiring them to pay for servers, so it can stay free with unlimited usage 😊. + +### Developer Tool + +LiveCodes aims to be a feature-rich, easy to use playground that can be used for prototyping and education. The other main goal (in fact, that was the motive for its development), is to allow library developers to use it for documentation of their libraries and showcase their products. This can be achieved by [embedding playgrounds](./features/embeds.html.md) in blogs, tutorials, documentation and educational websites. In addition, private (unpublished) modules can be imported with editor auto-completion and [IntelliSense](./features/intellisense.html.md). + +That can be done using the official app ([livecodes.io](https://livecodes.io)), or as a [self-hosted](./features/self-hosting.html.md) option. Again, being a client-side-only app, LiveCodes becomes more convenient for not needing special server requirements, while features like export and deploy are provided by APIs of external services. + +LiveCodes does NOT aim to be a social coding platform. It will stay as a backendless developer tool. Other platforms are already doing a great job in this regards. + +### Build-Free Development Environment + +LiveCodes provides many of the tools you may already be using. These include Monaco editor (that powers [VS Code](https://code.visualstudio.com/)), [Prettier](https://prettier.io/), [Emmet](https://emmet.io/), [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [SCSS](https://sass-lang.com/), [Less](https://lesscss.org/), [PostCSS](https://postcss.org/), [Jest](https://jestjs.io/) and [Testing Library](https://testing-library.com/), among others. [NPM modules](./features/module-resolution.html.md) can be imported as usual. All these tools run seamlessly in the browser without any explicit build step. It feels like a very light-weight version of your own local development environment with the keyboard shortcuts, IntelliSense and code navigation features. + +It just works™ without having to `npm install` anything. Not even on the server (because there is no server!). + +This can markedly improve productivity, reduce the mental load required for all the traditional setup and can significantly decrease the barrier to entry for learning new technologies. + +### Web Platform + +The output of code written in LiveCodes is a [web page](./features/result.html.md). Whatever language/syntax you use, the result can ultimately be viewed as a web page which you can interact with, [test](./features/tests.html.md), [share](./features/share.html.md) or [deploy](./features/deploy.html.md). Check the [starter templates](https://livecodes.io?screen=new) for examples. + +Of course, the app can be still used as a REPL with the output seen in the integrated [console](./features/console.html.md). + +### Powerful SDK + +The LiveCodes app ([standalone](./getting-started.html.md)#standalone-app) or [self-hosted](./features/self-hosting.html.md)) can be [embedded](./features/embeds.html.md) in any web page. A powerful [SDK](./sdk/index.html.md) allows the embedding page to interact with the playground (e.g. run, get/set source code, format, get result page or compiled code, get share URL, listen to changes, run tests, get test results, change layout, etc.). This enables other apps to be built on top of LiveCodes. + +Your imagination is the limit! + +### Free and Open-Source + +LiveCodes is a free product that allows unrestricted use for the hosted app and for the self-hosted option. It is licensed under the permissive [MIT license](./license.html.md) which allows free commercial use. + +Please consider [sponsoring LiveCodes](./sponsor.html.md) if you find it useful, to support its maintenance and continued development. + +:::caution Under Development + +LiveCodes is currently in **public beta**. It is in active development. However, please take the time to try it. Use [permanent URL](./features/permanent-url.html.md) and pinned [library version](./sdk/index.html.md) to avoid breaking changes. Your feedback and contribution are highly appreciated. + +::: + +Enough talk, let's get started. \ No newline at end of file diff --git a/docs/why/index.html b/docs/why/index.html new file mode 100644 index 0000000..856fec9 --- /dev/null +++ b/docs/why/index.html @@ -0,0 +1,54 @@ +Why Another Playground? | LiveCodes

    Why Another Playground?

    +

    There are great products like CodePen, JSFiddle, JS Bin, CodeSandbox, Replit and many others, which LiveCodes does not aim to replace or compete with. On the contrary, it aims to integrate with as many of these services as their APIs allow.

    +

    What makes LiveCodes different?​

    +

    Language Support​

    +

    Currently, there are 90+ languages/frameworks supported. These include:

    +
      +
    • Web languages (HTML, CSS & JavaScript).
      • +
    • Web frameworks/libraries (e.g. React JSX/TSX, Vue SFC, Svelte SFC, Solid, MDX, Astro).
      • +
    • Languages that transpile to JavaScript (e.g. TypeScript, CoffeeScript, LiveScript, ReScript).
      • +
    • Languages/frameworks that generate CSS (e.g. SCSS, Less, Stylus, Tailwind CSS, UnoCSS).
      • +
    • CSS processors (e.g. PostCSS, Autoprefixer, Lightning CSS, CSS Modules, cssnano).
      • +
    • Traditional programming languages (e.g. Python, Ruby, Go, PHP, C++, R, Lua, Scheme, Perl).
      • +
    • Data manipulation/logic languages (e.g. SQL, Prolog).
      • +
    • Authoring/templating languages (e.g Markdown, AsciiDoc, Pug, Handlebars, Haml).
      • +
    • Low-code/visual editors (e.g. blockly, rich text editor).
      • +
    • Modeling languages/diagram-as-code (e.g. Gnuplot, Graphviz, Mermaid, Vega, Plotly).
      • +
    • Languages that target WebAssembly (e.g. AssemblyScript, WebAssembly Text Format).
      • +
    • ... and many more.
      • +
    +

    For a full list check the Languages section.

    +

    Generally, if you are a developer (or want to be one), there is a big chance you will find something interesting to do with LiveCodes.

    +

    Client-Side!​

    +

    All processing and code transformations run in the browser on the client-side. After the initial load, the app gets significantly faster without having to wait for server rounds. Lazy-loading is heavily used. Only parts of the app required for the selected languages/features are downloaded.

    +

    The code you write in LiveCodes does not leave your computer. All projects are private unless you choose to share/export/deploy them.

    +

    Being a client-side app allows it to be hosted on any static file server or CDN, which removes the high requirements needed by other alternatives (like server storage or memory). This makes LiveCodes available for a large number of developers without requiring them to pay for servers, so it can stay free with unlimited usage 😊.

    +

    Developer Tool​

    +

    LiveCodes aims to be a feature-rich, easy to use playground that can be used for prototyping and education. The other main goal (in fact, that was the motive for its development), is to allow library developers to use it for documentation of their libraries and showcase their products. This can be achieved by embedding playgrounds in blogs, tutorials, documentation and educational websites. In addition, private (unpublished) modules can be imported with editor auto-completion and IntelliSense.

    +

    That can be done using the official app (livecodes.io), or as a self-hosted option. Again, being a client-side-only app, LiveCodes becomes more convenient for not needing special server requirements, while features like export and deploy are provided by APIs of external services.

    +

    LiveCodes does NOT aim to be a social coding platform. It will stay as a backendless developer tool. Other platforms are already doing a great job in this regards.

    +

    Build-Free Development Environment​

    +

    LiveCodes provides many of the tools you may already be using. These include Monaco editor (that powers VS Code), Prettier, Emmet, Babel, TypeScript, SCSS, Less, PostCSS, Jest and Testing Library, among others. NPM modules can be imported as usual. All these tools run seamlessly in the browser without any explicit build step. It feels like a very light-weight version of your own local development environment with the keyboard shortcuts, IntelliSense and code navigation features.

    +

    It just works™ without having to npm install anything. Not even on the server (because there is no server!).

    +

    This can markedly improve productivity, reduce the mental load required for all the traditional setup and can significantly decrease the barrier to entry for learning new technologies.

    +

    Web Platform​

    +

    The output of code written in LiveCodes is a web page. Whatever language/syntax you use, the result can ultimately be viewed as a web page which you can interact with, test, share or deploy. Check the starter templates for examples.

    +

    Of course, the app can be still used as a REPL with the output seen in the integrated console.

    +

    Powerful SDK​

    +

    The LiveCodes app (standalone or self-hosted) can be embedded in any web page. A powerful SDK allows the embedding page to interact with the playground (e.g. run, get/set source code, format, get result page or compiled code, get share URL, listen to changes, run tests, get test results, change layout, etc.). This enables other apps to be built on top of LiveCodes.

    +

    Your imagination is the limit!

    +

    Free and Open-Source​

    +

    LiveCodes is a free product that allows unrestricted use for the hosted app and for the self-hosted option. It is licensed under the permissive MIT license which allows free commercial use.

    +

    Please consider sponsoring LiveCodes if you find it useful, to support its maintenance and continued development.

    +
    Under Development

    LiveCodes is currently in public beta. It is in active development. However, please take the time to try it. Use permanent URL and pinned library version to avoid breaking changes. Your feedback and contribution are highly appreciated.

    +

    Enough talk, let's get started.

    +
    +
    Sponsors
    + +
    +
    \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..a76ab4f Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..0f0a7b8 --- /dev/null +++ b/index.html @@ -0,0 +1 @@ +LiveCodes
    \ No newline at end of file diff --git a/livecodes/app.2a950fbc50b54e9258bcdaa712d7ba30.css b/livecodes/app.2a950fbc50b54e9258bcdaa712d7ba30.css new file mode 100644 index 0000000..1bfd408 --- /dev/null +++ b/livecodes/app.2a950fbc50b54e9258bcdaa712d7ba30.css @@ -0,0 +1 @@ +:root{--font-size: 16px;--unit: var(--font-size);--s2: calc(var(--unit) * 0.125);--s4: calc(var(--unit) * 0.25);--s6: calc(var(--unit) * 0.375);--s8: calc(var(--unit) * 0.5);--s10: calc(var(--unit) * 0.625);--s12: calc(var(--unit) * 0.75);--s14: calc(var(--unit) * 0.875);--s16: calc(var(--unit) * 1);--s20: calc(var(--unit) * 1.25);--s24: calc(var(--unit) * 1.5);--s32: calc(var(--unit) * 2);--s36: calc(var(--unit) * 2.25);--s40: calc(var(--unit) * 2.5);--rs: var(--s4);--hue: 214;--st: 40%;--lt: 50%;--color: hsl(var(--hue), var(--st), var(--lt));--color10: hsl(var(--hue), calc(var(--st) * 0.3), calc(var(--lt) * 0.2));--color15: hsl(var(--hue), calc(var(--st) * 0.5), calc(var(--lt) * 0.3));--color20: hsl(var(--hue), var(--st), calc(var(--lt) * 0.4));--color25: hsl(var(--hue), var(--st), calc(var(--lt) * 0.5));--color30: hsl(var(--hue), var(--st), calc(var(--lt) * 0.6));--color40: hsl(var(--hue), var(--st), calc(var(--lt) * 0.8));--color50: hsl(var(--hue), var(--st), calc(var(--lt) * 1));--color60: hsl(var(--hue), var(--st), calc(var(--lt) * 1.2));--color70: hsl(var(--hue), var(--st), calc(var(--lt) * 1.4));--color80: hsl(var(--hue), var(--st), calc(var(--lt) * 1.6));--color85: hsl(var(--hue), var(--st), calc(var(--lt) * 1.7));--color90: hsl(var(--hue), var(--st), calc(var(--lt) * 1.8));--color95: hsl(var(--hue), var(--st), calc(var(--lt) * 1.9));--darker-bg-color: var(--color20);--darker-bg-active: var(--color30);--darker-color: var(--color80);--darker-active: var(--color90);--dark-bg-color: var(--color30);--dark-bg-active: var(--color40);--dark-color: var(--color85);--dark-active: var(--color95);--link: var(--color90);--light: var(--color80);--console-bg: var(--color10);--disabled: 0.5;--dropdown: var(--color15);--layout: var(--color10);--modal: var(--color15);--btn-bg-color: var(--layout);--btn-bg-active: var(--darker-bg-active);--btn-border: 0;--btn-border-radius: var(--rs);--btn-active: var(--darker-active);--btn-color: var(--link);--btn-height: 26px;--btn-modal-bg-active: var(--darker-bg-active);--btn-modal-bg-color: var(--darker-bg-color);--btn-modal-border-color: var(--darker-bg-color);--btn-modal-border-radius: var(--rs);--btn-modal-active: var(--darker-active);--btn-modal-color: var(--darker-color);--btn-modal-font: var(--s14);--thumbnail-bg-active: var(--dark-bg-active);--thumbnail-bg-color: var(--dark-bg-color);--thumbnail-active: var(--dark-active);--thumbnail-color: var(--dark-color);--stripes-bg-color: var(--layout);--custom-editor-background-color: rgb(30, 30, 30);--custom-editor-loading-color: rgb(255, 255, 255);--dropdown-bg-color: var(--dropdown);--dropdown-bg-active: var(--darker-bg-active);--dropdown-border: 1px solid var(--dark-bg-color);--dropdown-border-radius: var(--rs);--dropdown-color: var(--link);--dropdown-active: var(--darker-active);--dropdown-font: var(--s14);--dropdown-height: var(--s32);--dropdown-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.275);--dropdown-split-color: var(--dark-bg-color);--submenu-arrow-color: var(--darker-color);--editor-title-bg-color: var(--darker-bg-color);--editor-title-bg-active: var(--darker-bg-active);--editor-title-border-color: var(--darker-bg-color);--editor-title-border-active: var(--darker-bg-active);--editor-title-border-radius: var(--rs);--editor-title-color: var(--darker-color);--editor-title-active: var(--darker-active);--editor-title-simple-color: var(--darker-active);--editor-tools-mark-color: #8bc34a;--gutter-split-bg-color: var(--layout);--gutter-split-bg-handle: var(--light);--input-bg-color: var(--darker-bg-color);--input-bg-active: var(--darker-bg-active);--input-border-color: var(--dark-bg-color);--input-border-active: var(--dark-bg-active);--input-range-bg-color: var(--darker-bg-color);--input-slider-bg-color: var(--darker-bg-color);--input-slider-border-color: var(--dark-bg-color);--input-switch-active: var(--color90);--input-switch-color: var(--color30);--input-indeterminate-color: var(--darker-bg-color);--input-active: var(--darker-active);--input-color: var(--darker-color);--input-container: var(--color20);--language-menu-bg-color: var(--dark-bg-color);--language-menu-bg-active: var(--dark-bg-active);--language-menu-color-active: var(--dark-active);--menu-bg-color: var(--layout);--menu-bg-active: var(--darker-bg-active);--menu-color: var(--link);--menu-active: var(--darker-active);--menu-border-radius: var(--rs);--menu-height: var(--s32);--menu-split-color: var(--color40);--modal-bg-color: var(--modal);--modal-title-bg: var(--darker-bg-color);--modal-title-color: var(--darker-color);--modal-button-bg-color: transparent;--modal-button-bg-hover: var(--darker-bg-active);--modal-button-color-hover: var(--darker-active);--modal-close-color: var(--darker-color);--modal-close-hover: var(--darker-active);--modal-text-color: var(--link);--overlay-bg-color: hsla(0, 0%, 0%, 0.65);--placeholder-color: var(--dropdown-color) !important;--placeholder-color-focus: var(--dropdown-active) !important;--project-title-bg-active: var(--darker-bg-active);--project-title-bg-color: var(--darker-bg-color);--project-title-border-active: var(--dark-bg-active);--project-title-border-color: var(--dark-bg-color);--project-title-border-radius: var(--rs);--project-title-box-shadow: 0 0 4px 1px var(--0);--project-title-active: var(--darker-active);--project-title-color: var(--darker-color);--resources-search-bg: var(--modal);--resources-search-border: 1px solid var(--darker-bg-color);--resources-search-color: var(--darker-color);--scrollbar-color: var(--darker-bg-color);--scrollbar-active-color: var(--darker-bg-active);--scrollbar-hover-color: var(--darker-bg-active);--scrollbar-color-track: transparent;--scrollbar-color-thumb: var(--darker-bg-color);--scrollbar-width: thin;--scrollbar-width-legacy: 8px;--size-label-background: var(--darker-bg-color);--size-label-border: var(--dropdown-border);--size-label-color: var(--darker-color);--tests-bg-color: var(--color10);--tests-color: var(--darker-color);--test-results-bg-color: rgba(0, 128, 0, 0.2);--test-results-border: 1px solid rgb(0, 128, 0);--test-pass-color: rgb(0, 178, 0);--test-fail-background: rgba(255, 0, 0, 0.2);--test-fail-border: 1px solid rgb(255, 0, 0);--test-fail-color: rgb(255, 102, 102);--toolbar-bg-color: var(--layout);--toolbar-border: 1px solid var(--color30);--toolbar-color: var(--link);--toolbar-height: var(--s36);--toolspane-bar-height: var(--s32);--toolspane-bar-text-color: var(--color40);--toolspane-buttons-text-color: var(--color40);--toolspane-button-color: var(--color40);--toolspane-accent-color: var(--active);--toolspane-non-accent-color: var(--light);--toolspane-bg-color: var(--darker-bg-color);--toolspane-bg-active: var(--darker-bg-active);--toolspane-border: 2px solid var(--darker-bg-color);--toolspane-border-active: 2px var(--darker-bg-active);--toolspane-active: var(--darker-active);--toolspane-color: var(--darker-color);--text-confirm-bg-color: rgba(255, 128, 0, 0.25);--text-confirm-border: 1px solid rgb(255, 128, 0);--text-confirm-color: rgb(250, 126, 0);--text-help-bg-color: rgba(0, 110, 255, 0.2);--text-help-border: 1px solid rgb(0, 110, 255);--text-help-color: rgb(102, 168, 255);--text-success-bg-color: rgba(85, 255, 0, 0.25);--text-success-border: 1px solid rgb(85, 255, 0);--text-success-color: rgb(153, 255, 102);--icon-filter: invert(0.8);--icon-filter-active: invert(1)}:root.light{--hue: 214;--st: 40%;--lt: 100%;--color: hsl(var(--hue), var(--st), var(--lt));--color10: hsl(var(--hue), var(--st), calc(var(--lt) * 0.1));--color15: hsl(var(--hue), var(--st), calc(var(--lt) * 0.15));--color20: hsl(var(--hue), var(--st), calc(var(--lt) * 0.2));--color25: hsl(var(--hue), var(--st), calc(var(--lt) * 0.25));--color30: hsl(var(--hue), var(--st), calc(var(--lt) * 0.3));--color40: hsl(var(--hue), var(--st), calc(var(--lt) * 0.4));--color50: hsl(var(--hue), var(--st), calc(var(--lt) * 0.5));--color60: hsl(var(--hue), var(--st), calc(var(--lt) * 0.6));--color70: hsl(var(--hue), var(--st), calc(var(--lt) * 0.7));--color80: hsl(var(--hue), var(--st), calc(var(--lt) * 0.8));--color85: hsl(var(--hue), var(--st), calc(var(--lt) * 0.85));--color90: hsl(var(--hue), var(--st), calc(var(--lt) * 0.9));--color95: hsl(var(--hue), var(--st), calc(var(--lt) * 0.95));--darker-bg-color: var(--color40);--darker-bg-active: var(--color50);--darker-color: var(--color80);--darker-active: var(--color90);--dark-bg-color: var(--color85);--dark-bg-active: var(--color95);--dark-color: var(--color40);--dark-active: var(--color50);--link: var(--color40);--light: hsl(var(--hue), var(--st), var(--lt));--editor-title-simple-color: var(--color10);--thumbnail-bg-active: var(--color90);--thumbnail-bg-color: var(--color80);--console-bg: var(--color10);--disabled: 0.5;--dropdown: var(--color95);--layout: var(--color90);--modal: var(--color95);--gutter-split-bg-handle: var(--color40);--input-container: var(--color60);--input-bg-color: hsl(var(--hue), 25%, 98%);--input-border-color: hsl(var(--hue), 13%, 84%);--input-color: hsl(var(--hue), 13%, 21%);--input-range-bg-color: var(--darker-bg-color);--input-switch-active: var(--color90);--input-switch-color: var(--color60);--modal-text-color: hsl(var(--hue), 13%, 21%);--tests-bg-color: inherit;--tests-color: inherit;--tests-bg-color: var(--color90);--test-results-bg-color: rgba(0, 128, 0, 0.2);--test-results-border: 1px solid rgb(0, 128, 0);--test-pass-color: rgb(0, 178, 0);--test-fail-background: rgb(217 38 38 / 20%);--test-fail-border: 1px solid rgb(255, 0, 0);--test-fail-color: rgb(242 13 13);--text-confirm-bg-color: rgba(255, 128, 0, 0.25);--text-confirm-border: 1px solid rgb(250, 128, 0);--text-confirm-color: rgb(194, 102, 10);--text-help-bg-color: rgba(38, 116, 217, 0.2);--text-help-border: 1px solid rgb(13, 112, 242);--text-help-color: rgb(13, 112, 242);--text-success-bg-color: rgba(0, 128, 0, 0.2);--text-success-border: 1px solid rgb(0, 128, 0);--text-success-color: rgb(0, 178, 0);--icon-filter: invert(0.3);--icon-filter-active: invert(1)}:root.light #logo img{filter:drop-shadow(1px 1px 1px var(--color50))}:root.light .tagify{background-color:var(--input-bg-color) !important}:root.light .tagify .tagify__input{--placeholder-color: var(--input-color) !important;--placeholder-color-focus: var(--input-color) !important;text-align:start}*,*::before,*::after{box-sizing:inherit}*{margin:0;padding:0}@supports(-moz-appearance: none){*{scrollbar-color:var(--scrollbar-color-thumb) var(--scrollbar-color-track);scrollbar-width:var(--scrollbar-width, thin)}}@supports selector(::-webkit-scrollbar){*::-webkit-scrollbar{height:var(--scrollbar-width-legacy, 8px);width:var(--scrollbar-width-legacy, 8px)}*::-webkit-scrollbar-track{background:var(--scrollbar-color-track);background:transparent;border-radius:8px}::-webkit-scrollbar-corner{background:transparent}::-webkit-scrollbar-thumb{background:var(--scrollbar-color-thumb);border-radius:8px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-hover-color)}::-webkit-scrollbar-thumb:active{background:var(--scrollbar-active-color)}::-webkit-scrollbar-button{display:none}}html,body{box-sizing:border-box;display:flex;font-family:system-ui,sans-serif;font-size:var(--font-size);height:100%;justify-content:center;width:100%}html.dark{--placeholder-color: var(--darker-color);--placeholder-color-focus: var(--darker-active);--tag-bg: var(--dropdown-bg-color);--tag-hover: var(--dropdown-bg-active);--tag-text-color: var(--dropdown-color);--tagify-dd-color-primary: var(--dropdown-bg-active);--tagify-dd-text-color: var(--link);--tagify-dd-bg-color: var(--dropdown-bg-color);--tagify-dd-item-pad: 2px 8px;--tags-hover-border-color: var(--input-border-active) !important;--tags-focus-border-color: var(--input-border-active) !important;background:#1e1e1e;background:#fff}html.dark *:-webkit-autofill,html.dark *:-webkit-autofill:focus{-webkit-text-fill-color:#fff;transition-delay:3600s}html .tagify{--tags-border-color: var(--input-border-color) !important;background:var(--input-bg-color);border-radius:var(--rs)}.tagify__dropdown__item{color:var(--link)}html[dir=rtl] #editors,html[dir=rtl] #tools-pane,html[dir=rtl] .custom-editor{direction:ltr}html[dir=rtl] [id^=app-menu-container-]{--logo-width: 44px}html[dir=rtl] .tool-buttons#editor-tools{flex-direction:row-reverse}html[dir=rtl] .actions{border-bottom-left-radius:0;border-bottom-right-radius:var(--rs);border-top-left-radius:var(--rs);border-top-right-radius:0}html[dir=rtl] i.arrow{left:-6px;transform:rotate(180deg)}html[dir=rtl] .submenu{right:98%}html[dir=rtl] #modal .close-button{left:1.5rem;right:unset}html[dir=rtl] #modal select{background-position:1% 50%}html[dir=rtl] .indent{margin-left:unset;margin-right:1em}html[dir=rtl] select{background-position:2% 50%}html[dir=rtl] .input-container .radio-label{padding-left:unset;padding-right:var(--s8)}html[dir=rtl] .input-container>span{margin-left:1.5em;margin-right:unset}@supports(-webkit-appearance: none) or (-moz-appearance: none){html[dir=rtl] input[type=checkbox]+label,html[dir=rtl] input[type=radio]+label{margin-left:unset;margin-right:4px}}html[dir=rtl] #share-screen ul li .share-image-container{border-bottom-left-radius:unset;border-bottom-right-radius:var(--rs);border-top-left-radius:unset;border-top-right-radius:var(--rs);margin-left:var(--s16);margin-right:unset}[class^=icon-]{background-color:currentColor;display:inline-block;height:1em;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;vertical-align:-0.175em;width:1em}@supports not ((-webkit-mask-image: var(--svg)) or (mask-image: var(--svg))){[class^=icon-]{background-color:transparent;background-image:var(--svg);background-repeat:no-repeat;background-size:100% 100%;filter:var(--icon-filter)}a:hover [class^=icon-],button:hover [class^=icon-],[class^=icon-]:hover{filter:var(--icon-filter-active)}}.icon-add{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z'/%3E%3C/svg%3E")}.icon-alert{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8.75 10.25a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0M7.5 8a.5.5 0 0 0 1 0V5.5a.5.5 0 0 0-1 0zm-.591-5.363a1.25 1.25 0 0 1 2.182 0l4.75 8.502a1.25 1.25 0 0 1-1.09 1.86H3.246a1.25 1.25 0 0 1-1.091-1.86zm1.309.488a.25.25 0 0 0-.437 0L3.03 11.627a.25.25 0 0 0 .218.372h9.503a.25.25 0 0 0 .218-.372z'/%3E%3C/svg%3E")}.icon-arrow-down{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M3.75 5.75L8 10.25l4.25-4.5'/%3E%3C/svg%3E")}.icon-arrow-sort{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M4.854 2.146a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L4 3.707V13.5a.5.5 0 0 0 1 0V3.707l2.146 2.147a.5.5 0 1 0 .708-.708zm6.299 11.714a.5.5 0 0 0 .694 0l3-2.9a.5.5 0 1 0-.694-.72L12 12.321v-9.82a.5.5 0 0 0-1 0v9.82l-2.152-2.08a.5.5 0 1 0-.696.718z'/%3E%3C/svg%3E")}.icon-arrow-sort-down{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M13 1.5a.5.5 0 0 0-1 0v11.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L13 13.293zM2.5 3a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zm2 3a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM6 9.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E")}.icon-arrow-sort-up{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M13 14.5a.5.5 0 0 1-1 0V2.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L13 2.707zM2.5 13a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1zm2-3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1zM6 6.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 0-1h-3a.5.5 0 0 0-.5.5'/%3E%3C/svg%3E")}.icon-arrow-text-sort{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M14 12h2l-2.5 3l-2.5-3h2V4h-2l2.5-3L16 4h-2zM10 1v4L9 3H6v11h2v1H2v-1h2V3H1L0 5V1z'/%3E%3C/svg%3E")}.icon-blog{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M3 4v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8h-4'%3E%3C/path%3E%3Cpath d='M3 4h14v14a2 2 0 0 0 2 2v0M13 8H7m6 4H9'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}.icon-broadcast{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M3.05 3.05a7 7 0 0 0 0 9.9a.5.5 0 0 1-.707.707a8 8 0 0 1 0-11.314a.5.5 0 0 1 .707.707m2.122 2.122a4 4 0 0 0 0 5.656a.5.5 0 1 1-.708.708a5 5 0 0 1 0-7.072a.5.5 0 0 1 .708.708m5.656-.708a.5.5 0 0 1 .708 0a5 5 0 0 1 0 7.072a.5.5 0 1 1-.708-.708a4 4 0 0 0 0-5.656a.5.5 0 0 1 0-.708m2.122-2.12a.5.5 0 0 1 .707 0a8 8 0 0 1 0 11.313a.5.5 0 0 1-.707-.707a7 7 0 0 0 0-9.9a.5.5 0 0 1 0-.707zM10 8a2 2 0 1 1-4 0a2 2 0 0 1 4 0'/%3E%3C/svg%3E")}.icon-calendar{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linejoin='round' d='M5.5 2v3m5-3v3m-8 1.5h11M5 8.5v1m3-1v1m3-1v1m0 1v1m-3-1v1m-3-1v1m-2.5-8h11v10h-11z'/%3E%3C/svg%3E")}.icon-calendar-sort{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M9.5 14h-8C.67 14 0 13.33 0 12.5V2.38C0 1.55.67.88 1.5.88h11c.83 0 1.5.67 1.5 1.5v7.25c0 .28-.22.5-.5.5s-.5-.22-.5-.5V2.38c0-.28-.22-.5-.5-.5h-11c-.28 0-.5.22-.5.5V12.5c0 .28.22.5.5.5h8c.28 0 .5.22.5.5s-.22.5-.5.5'/%3E%3Cpath fill='%23000' d='M4 3.62c-.28 0-.5-.22-.5-.5V.5c0-.28.22-.5.5-.5s.5.22.5.5v2.62c0 .28-.22.5-.5.5m6.12 0c-.28 0-.5-.22-.5-.5V.5c0-.28.22-.5.5-.5s.5.22.5.5v2.62c0 .28-.22.5-.5.5M13.5 6H.5C.22 6 0 5.78 0 5.5S.22 5 .5 5h13c.28 0 .5.22.5.5s-.22.5-.5.5m-1 10C10.57 16 9 14.43 9 12.5S10.57 9 12.5 9s3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5m0-6a2.5 2.5 0 0 0 0 5a2.5 2.5 0 0 0 0-5'/%3E%3Cpath fill='%23000' d='M13.5 14a.47.47 0 0 1-.35-.15l-1-1a.5.5 0 0 1-.15-.35V11c0-.28.22-.5.5-.5s.5.22.5.5v1.29l.85.85c.2.2.2.51 0 .71c-.1.1-.23.15-.35.15'/%3E%3C/svg%3E")}.icon-clear{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M11.875 3.418a6 6 0 0 0-8.457 8.457zm.707.707l-8.457 8.457a6 6 0 0 0 8.457-8.457M3.05 3.05a7 7 0 1 1 9.9 9.9a7 7 0 0 1-9.9-9.9'/%3E%3C/svg%3E")}.icon-checked{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M4.5 2A2.5 2.5 0 0 0 2 4.5v7A2.5 2.5 0 0 0 4.5 14h7a2.5 2.5 0 0 0 2.5-2.5v-7A2.5 2.5 0 0 0 11.5 2zM3 4.5A1.5 1.5 0 0 1 4.5 3h7A1.5 1.5 0 0 1 13 4.5v7a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 3 11.5zm7.854 2.354a.5.5 0 0 0-.708-.708L7 9.293L5.854 8.146a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0z'/%3E%3C/svg%3E")}.icon-close{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='m2.589 2.716l.057-.07a.5.5 0 0 1 .638-.057l.07.057L8 7.293l4.646-4.647a.5.5 0 0 1 .708.708L8.707 8l4.647 4.646a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.638.057l-.07-.057L8 8.707l-4.646 4.647a.5.5 0 0 1-.708-.708L7.293 8L2.646 3.354a.5.5 0 0 1-.057-.638l.057-.07z'/%3E%3C/svg%3E")}.icon-copy{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M4 4.085V10.5a2.5 2.5 0 0 0 2.336 2.495L6.5 13h4.414A1.5 1.5 0 0 1 9.5 14H6a3 3 0 0 1-3-3V5.5a1.5 1.5 0 0 1 1-1.415M11.5 2A1.5 1.5 0 0 1 13 3.5v7a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 5 10.5v-7A1.5 1.5 0 0 1 6.5 2zm0 1h-5a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5'/%3E%3C/svg%3E")}.icon-delete{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M7 3h2a1 1 0 0 0-2 0M6 3a2 2 0 1 1 4 0h4a.5.5 0 0 1 0 1h-.564l-1.205 8.838A2.5 2.5 0 0 1 9.754 15H6.246a2.5 2.5 0 0 1-2.477-2.162L2.564 4H2a.5.5 0 0 1 0-1zm1 3.5a.5.5 0 0 0-1 0v5a.5.5 0 0 0 1 0zM9.5 6a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0v-5a.5.5 0 0 1 .5-.5m-4.74 6.703A1.5 1.5 0 0 0 6.246 14h3.508a1.5 1.5 0 0 0 1.487-1.297L12.427 4H3.573z'/%3E%3C/svg%3E")}.icon-edit{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath ffill='currentColor' d='M14.236 1.764a2.62 2.62 0 0 0-3.707 0L2.657 9.636a2.96 2.96 0 0 0-.772 1.354l-.87 3.386a.5.5 0 0 0 .61.608l3.385-.869a2.95 2.95 0 0 0 1.354-.772l7.872-7.872a2.62 2.62 0 0 0 0-3.707m-3 .707a1.621 1.621 0 1 1 2.293 2.293l-.779.779l-2.293-2.293zM9.75 3.957l2.293 2.293l-6.386 6.386a1.95 1.95 0 0 1-.896.51l-2.567.66l.66-2.567a1.94 1.94 0 0 1 .51-.896z'/%3E%3C/svg%3E")}.icon-editor-copy{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M5.085 2A1.5 1.5 0 0 1 6.5 1h3a1.5 1.5 0 0 1 1.415 1h.585A1.5 1.5 0 0 1 13 3.5v10a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 3 13.5v-10A1.5 1.5 0 0 1 4.5 2zM6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM5.085 3H4.5a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-10a.5.5 0 0 0-.5-.5h-.585A1.5 1.5 0 0 1 9.5 4h-3a1.5 1.5 0 0 1-1.415-1'/%3E%3C/svg%3E")}.icon-editor-copy-url{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M4.085 2A1.5 1.5 0 0 1 5.5 1h3a1.5 1.5 0 0 1 1.415 1h.585A1.5 1.5 0 0 1 12 3.5V7h-1V3.5a.5.5 0 0 0-.5-.5h-.585A1.5 1.5 0 0 1 8.5 4h-3a1.5 1.5 0 0 1-1.415-1H3.5a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h1.258c.253.378.561.715.913 1H3.5A1.5 1.5 0 0 1 2 13.5v-10A1.5 1.5 0 0 1 3.5 2zM5.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm9.5 9.5A3.5 3.5 0 0 0 11.5 8l-.09.008A.5.5 0 0 0 11.5 9l.164.005A2.5 2.5 0 0 1 11.5 14l-.002.005l-.09.008a.5.5 0 0 0 .094.992V15l.192-.005A3.5 3.5 0 0 0 15 11.5m-6-3a.5.5 0 0 0-.5-.5l-.192.005A3.5 3.5 0 0 0 8.5 15l.09-.008A.5.5 0 0 0 8.5 14l-.164-.005A2.5 2.5 0 0 1 8.5 9l.09-.008A.5.5 0 0 0 9 8.5m2.5 2.502L8.5 11l-.09.008A.5.5 0 0 0 8.5 12l3 .002l.09-.008a.5.5 0 0 0-.09-.992'/%3E%3C/svg%3E")}.icon-editor-external{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M4 3a2 2 0 0 1 2-2h3.586a1.5 1.5 0 0 1 1.06.44l2.915 2.914A1.5 1.5 0 0 1 14 5.414V13a2 2 0 0 1-2 2H9.95a3.5 3.5 0 0 0 .713-1H12a1 1 0 0 0 1-1V6h-2.5A1.5 1.5 0 0 1 9 4.5V2H6a1 1 0 0 0-1 1v6H4zm6.5 2h2.293L10 2.207V4.5a.5.5 0 0 0 .5.5m-7 5a2.5 2.5 0 0 0 0 5H4a.5.5 0 0 0 0-1h-.5a1.5 1.5 0 0 1 0-3H4a.5.5 0 0 0 0-1zM7 10a.5.5 0 0 0 0 1h.5a1.5 1.5 0 0 1 0 3H7a.5.5 0 0 0 0 1h.5a2.5 2.5 0 0 0 0-5zm-3.5 2a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1z' /%3E%3C/svg%3E")}.icon-editor-focus{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M9.5 2.5A.5.5 0 0 0 9 2H7a.5.5 0 0 0 0 1h2a.5.5 0 0 0 .5-.5m1.5 0a.5.5 0 0 0 .5.5A1.5 1.5 0 0 1 13 4.5a.5.5 0 0 0 1 0A2.5 2.5 0 0 0 11.5 2a.5.5 0 0 0-.5.5M14 7a.5.5 0 0 0-1 0v2a.5.5 0 0 0 1 0zm0 4.5a.5.5 0 0 0-1 0a1.5 1.5 0 0 1-1.5 1.5a.5.5 0 0 0 0 1a2.5 2.5 0 0 0 2.5-2.5m-7.5 2A.5.5 0 0 1 7 13h2a.5.5 0 0 1 0 1H7a.5.5 0 0 1-.5-.5M5 2.5a.5.5 0 0 0-.5-.5A2.5 2.5 0 0 0 2 4.5a.5.5 0 0 0 1 0A1.5 1.5 0 0 1 4.5 3a.5.5 0 0 0 .5-.5M4.5 13a.5.5 0 0 1 0 1A2.5 2.5 0 0 1 2 11.5a.5.5 0 0 1 1 0A1.5 1.5 0 0 0 4.5 13M3 9a.5.5 0 0 1-1 0V7a.5.5 0 0 1 1 0z' /%3E%3C/svg%3E")}.icon-editor-format{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M1.5 3a.5.5 0 0 0 0 1H7a.5.5 0 0 0 0-1zm3 3a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1zM3 9.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5M1.5 12a.5.5 0 0 0 0 1H9a.5.5 0 0 0 0-1zm9-5.5A.5.5 0 0 1 11 6h2.5a.5.5 0 0 1 0 1H11a.5.5 0 0 1-.5-.5M9.5 3a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1z' /%3E%3C/svg%3E")}.icon-editor-project{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8.499 7.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0zm.25-2a.749.749 0 1 1-1.499 0a.749.749 0 0 1 1.498 0M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8' /%3E%3C/svg%3E")}.icon-editor-redo{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M13 2.5a.5.5 0 0 0-1 0v3.843L8.827 3.172a4 4 0 0 0-5.656 5.656l5.025 5.026a.5.5 0 0 0 .707-.708L3.879 8.121A3 3 0 0 1 8.12 3.88L11.243 7H7.499a.5.5 0 0 0 0 1h4.9a.6.6 0 0 0 .6-.6z' /%3E%3C/svg%3E")}.icon-editor-settings{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8 6a2 2 0 1 0 0 4a2 2 0 0 0 0-4M7 8a1 1 0 1 1 2 0a1 1 0 0 1-2 0m3.618-3.602a.71.71 0 0 1-.824-.567l-.26-1.416a.35.35 0 0 0-.275-.282a6.1 6.1 0 0 0-2.519 0a.35.35 0 0 0-.275.282l-.259 1.416a.71.71 0 0 1-.936.538l-1.359-.484a.36.36 0 0 0-.382.095a6 6 0 0 0-1.262 2.173a.35.35 0 0 0 .108.378l1.102.931q.045.037.081.081a.704.704 0 0 1-.081.995l-1.102.931a.35.35 0 0 0-.108.378A6 6 0 0 0 3.53 12.02a.36.36 0 0 0 .382.095l1.36-.484a.708.708 0 0 1 .936.538l.258 1.416c.026.14.135.252.275.281a6.1 6.1 0 0 0 2.52 0a.35.35 0 0 0 .274-.281l.26-1.416a.71.71 0 0 1 .936-.538l1.359.484c.135.048.286.01.382-.095a6 6 0 0 0 1.262-2.173a.35.35 0 0 0-.108-.378l-1.102-.931a.703.703 0 0 1 0-1.076l1.102-.931a.35.35 0 0 0 .108-.378A6 6 0 0 0 12.47 3.98a.36.36 0 0 0-.382-.095l-1.36.484a1 1 0 0 1-.111.03m-6.62.58l.937.333a1.71 1.71 0 0 0 2.255-1.3l.177-.97a5 5 0 0 1 1.265 0l.178.97a1.708 1.708 0 0 0 2.255 1.3L12 4.977q.384.503.63 1.084l-.754.637a1.704 1.704 0 0 0 0 2.604l.755.637a5 5 0 0 1-.63 1.084l-.937-.334a1.71 1.71 0 0 0-2.255 1.3l-.178.97a5 5 0 0 1-1.265 0l-.177-.97a1.708 1.708 0 0 0-2.255-1.3L4 11.023a5 5 0 0 1-.63-1.084l.754-.638a1.704 1.704 0 0 0 0-2.603l-.755-.637q.248-.581.63-1.084' /%3E%3C/svg%3E")}.icon-editor-settings-custom{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M2.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C3.25 2 2.49 2.759 2.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6M13.886 7.9v.163c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456V7.332c-1.114 0-1.49-.362-1.49-1.456V4.352C13.51 2.759 12.75 2 11.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6' /%3E%3C/svg%3E")}.icon-editor-undo{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M3 2.5a.5.5 0 0 1 1 0v3.843l3.171-3.171a4 4 0 0 1 5.657 5.656l-5.025 5.026a.5.5 0 0 1-.707-.708l5.025-5.025A3 3 0 1 0 7.878 3.88L4.757 7H8.5a.5.5 0 0 1 0 1H3.6a.6.6 0 0 1-.6-.6z' /%3E%3C/svg%3E")}.icon-file-import{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 12.5a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1H9L12.5 4z' /%3E%3Cpath d='m9 6.5l-2-2l-2 2m2-2V10' /%3E%3C/g%3E%3C/svg%3E")}.icon-file-new{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M2.5 5V1.5a1 1 0 0 1 1-1H10L13.5 4v8.5a1 1 0 0 1-1 1h-5m-4-6v6m-3-3h6'/%3E%3C/svg%3E")}.icon-file-open{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 12.5a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1H9L12.5 4z' /%3E%3Cpath d='m5.5 10.5l-2-2l2-2m3 4l2-2l-2-2' /%3E%3C/g%3E%3C/svg%3E")}.icon-file-template{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 12.5a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1H9L12.5 4z' /%3E%3Cpath d='M8.5.5v4h4' /%3E%3C/g%3E%3C/svg%3E")}.icon-full-screen{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M2 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H3.707l2.647 2.646a.5.5 0 0 1-.708.708L3 3.707V5.5a.5.5 0 0 1-1 0zM13.5 2a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V3.707l-2.646 2.647a.5.5 0 0 1-.708-.708L12.293 3H10.5a.5.5 0 0 1 0-1zm0 12a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-1 0v1.793l-2.646-2.647a.5.5 0 1 0-.708.708L12.293 13H10.5a.5.5 0 0 0 0 1zm-11 0a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 1 0v1.793l2.646-2.647a.5.5 0 0 1 .708.707L3.707 13H5.5a.5.5 0 0 1 0 1z' /%3E%3C/svg%3E")}.icon-github{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 1A10.89 10.89 0 0 0 1 11.77A10.79 10.79 0 0 0 8.52 22c.55.1.75-.23.75-.52v-1.83c-3.06.65-3.71-1.44-3.71-1.44a2.86 2.86 0 0 0-1.22-1.58c-1-.66.08-.65.08-.65a2.31 2.31 0 0 1 1.68 1.11a2.37 2.37 0 0 0 3.2.89a2.33 2.33 0 0 1 .7-1.44c-2.44-.27-5-1.19-5-5.32a4.15 4.15 0 0 1 1.11-2.91a3.78 3.78 0 0 1 .11-2.84s.93-.29 3 1.1a10.68 10.68 0 0 1 5.5 0c2.1-1.39 3-1.1 3-1.1a3.78 3.78 0 0 1 .11 2.84A4.15 4.15 0 0 1 19 11.2c0 4.14-2.58 5.05-5 5.32a2.5 2.5 0 0 1 .75 2v2.95c0 .35.2.63.75.52A10.8 10.8 0 0 0 23 11.77A10.89 10.89 0 0 0 12 1'%3E%3C/path%3E%3C/svg%3E")}.icon-help{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8 2a6 6 0 1 1 0 12A6 6 0 0 1 8 2m0 1a5 5 0 1 0 0 10A5 5 0 0 0 8 3m0 7.5A.75.75 0 1 1 8 12a.75.75 0 0 1 0-1.5m0-6a2 2 0 0 1 2 2c0 .73-.212 1.14-.754 1.708l-.264.27C8.605 8.87 8.5 9.082 8.5 9.5a.5.5 0 0 1-1 0c0-.73.212-1.14.754-1.708l.264-.27C8.895 7.13 9 6.918 9 6.5a1 1 0 0 0-2 0a.5.5 0 0 1-1 0a2 2 0 0 1 2-2' /%3E%3C/svg%3E%0A")}.icon-info{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412l-1 4.705c-.07.34.029.533.304.533c.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598c-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081l.082-.381l2.29-.287zM8 5.5a1 1 0 1 1 0-2a1 1 0 0 1 0 2'/%3E%3C/svg%3E")}.icon-login{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5.25 2.25h-3.5v12h3.5m4-9.5l-3.5 3.5l3.5 3.5m5-3.5h-8.5'/%3E%3C/svg%3E")}.icon-logout{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5.25 2.25h-3.5v12h3.5m5.5-9.5l3.5 3.5l-3.5 3.5m-5-3.5h8.5'/%3E%3C/svg%3E")}.icon-nav{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='M2 4.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5m0 5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5m.5 4.5a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1z'/%3E%3C/svg%3E")}.icon-recover{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.25 8.5L7 10.75L9.25 13m-4.5-7.5L7 3.25L4.75 1'%3E%3C/path%3E%3Cpath d='M7 10.75h4.5a2 2 0 0 0 2-2v-3.5a2 2 0 0 0-2-2H10m-3 0H2.5a2 2 0 0 0-2 2v3.5a2 2 0 0 0 2 2H4'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}.icon-reset{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M13 8a5 5 0 0 0-9.001-3h2a.5.5 0 1 1 0 1H3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 1 0v1.531a6 6 0 1 1-1.476 4.513a.5.5 0 0 1 .997-.089A5 5 0 0 0 13 8'/%3E%3C/svg%3E")}.icon-result{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8 1.5a.5.5 0 0 0-1 0v13a.5.5 0 0 0 1 0zM6 13v-1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3V3H3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2zm6 0H9v-1h3a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H9V3h3a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2'/%3E%3C/svg%3E")}.icon-run{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M5.745 3.064A.5.5 0 0 0 5 3.5v9a.5.5 0 0 0 .745.436l8-4.5a.5.5 0 0 0 0-.871zM4 3.5a1.5 1.5 0 0 1 2.235-1.307l8 4.5a1.5 1.5 0 0 1 0 2.615l-8 4.5A1.5 1.5 0 0 1 4 12.5z'/%3E%3C/svg%3E")}.icon-i18n{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z'%3E%3C/path%3E%3C/svg%3E")}.icon-theme-light{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z'%3E%3C/path%3E%3C/svg%3E")}.icon-theme-dark{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z'%3E%3C/path%3E%3C/svg%3E")}.icon-settings{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M6 9.5A2 2 0 0 1 7.937 11H13.5a.5.5 0 0 1 .09.992L13.5 12l-5.563.001a2 2 0 0 1-3.874 0L2.5 12a.5.5 0 0 1-.09-.992L2.5 11h1.563A2 2 0 0 1 6 9.5m0 1a1 1 0 1 0 0 2a1 1 0 0 0 0-2m4-8A2 2 0 0 1 11.937 4H13.5a.5.5 0 0 1 .09.992L13.5 5l-1.563.001a2 2 0 0 1-3.874 0L2.5 5a.5.5 0 0 1-.09-.992L2.5 4h5.563A2 2 0 0 1 10 2.5m0 1a1 1 0 1 0 0 2a1 1 0 0 0 0-2'/%3E%3C/svg%3E")}.icon-share{--svg: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M12 3a1 1 0 1 0 0 2a1 1 0 0 0 0-2m-2 1a2 2 0 1 1 .491 1.313L5.956 7.581a2 2 0 0 1 0 .838l4.535 2.268a2 2 0 1 1-.447.894L5.508 9.313a2 2 0 1 1 0-2.627l4.536-2.267A2 2 0 0 1 10 4M3 8a1 1 0 1 0 2 0a1 1 0 0 0-2 0m8 4a1 1 0 1 0 2 0a1 1 0 0 0-2 0'/%3E%3C/svg%3E")}.icon-save{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 12.5a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1H9L12.5 4z'%3E%3C/path%3E%3Cpath d='m9 8l-2 2l-2-2m2 2V4.5'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}.icon-sponsor{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2c-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3Cpath d='M12 5L9.04 7.96a2.17 2.17 0 0 0 0 3.08c.82.82 2.13.85 3 .07l2.07-1.9a2.82 2.82 0 0 1 3.79 0l2.96 2.66M18 15l-2-2m-1 5l-2-2'/%3E%3C/g%3E%3C/svg%3E")}.icon-tick{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpolyline points='2.75 8.75,6.25 12.25,13.25 4.75'/%3E%3C/svg%3E")}.icon-unchecked{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M2 4.5A2.5 2.5 0 0 1 4.5 2h7A2.5 2.5 0 0 1 14 4.5v7a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 11.5zM4.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3z'/%3E%3C/svg%3E")}.icon-window-new{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M7.5 5.5A.5.5 0 0 1 8 5h2.5a.5.5 0 0 1 .5.5V8a.5.5 0 0 1-1 0V6.707L7.354 9.354a.5.5 0 1 1-.708-.708L9.293 6H8a.5.5 0 0 1-.5-.5M4.133 3.692A2.5 2.5 0 0 1 6.5 2h5A2.5 2.5 0 0 1 14 4.5v5c0 1.098-.708 2.03-1.692 2.367v.364c0 .335-.117.763-.392 1.116c-.289.372-.748.653-1.377.653h-5.77A2.75 2.75 0 0 1 2 11.23V5.463c0-.549.197-1.006.546-1.323c.34-.309.785-.447 1.223-.447zm-.133 1h-.23a.8.8 0 0 0-.552.188C3.1 4.987 3 5.164 3 5.462v5.769c0 .993.776 1.77 1.77 1.77h5.769c.299 0 .474-.121.588-.268a.9.9 0 0 0 .18-.502V12H6.5A2.5 2.5 0 0 1 4 9.5zM6.5 3A1.5 1.5 0 0 0 5 4.5v5A1.5 1.5 0 0 0 6.5 11h5A1.5 1.5 0 0 0 13 9.5v-5A1.5 1.5 0 0 0 11.5 3z'/%3E%3C/svg%3E")}.icon-camera{--svg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' fill='currentColor'%3e%3cpath d='M17.5,26.234a6.807,6.807,0,1,1,6.808-6.807A6.815,6.815,0,0,1,17.5,26.234Zm0-11.114a4.307,4.307,0,1,0,4.308,4.307A4.313,4.313,0,0,0,17.5,15.12Z'/%3e%3cpath d='M32.27,4.86H29.386a1.25,1.25,0,1,1,0-2.5H32.27a1.25,1.25,0,0,1,0,2.5Z'/%3e%3cpath d='M30.56,32.64H4.45a4.2,4.2,0,0,1-4.2-4.19V12.74a4.2,4.2,0,0,1,4.2-4.19H8.938L10.9,5.565A3.5,3.5,0,0,1,13.836,3.98h7.336A3.5,3.5,0,0,1,24.11,5.566L26.065,8.55H30.56a4.194,4.194,0,0,1,4.19,4.19V28.45A4.2,4.2,0,0,1,30.56,32.64ZM4.45,11.05a1.7,1.7,0,0,0-1.7,1.69V28.45a1.7,1.7,0,0,0,1.7,1.69H30.56a1.692,1.692,0,0,0,1.69-1.69V12.74a1.692,1.692,0,0,0-1.69-1.69H25.39a1.251,1.251,0,0,1-1.046-.565L22.02,6.936a1.013,1.013,0,0,0-.848-.456H13.836a1.012,1.012,0,0,0-.848.457l-2.329,3.546a1.254,1.254,0,0,1-1.049.567Z'/%3e%3c/svg%3e")}.icon-share-dev{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M6 15h2.8l.75-.75v-4.5L8.8 9H6zm1.15-1.15v-3.7H8.4v3.7zm4.125 0v-1.3h1.3V11.4h-1.3v-1.25h2.05V9h-3.2v6h3.2v-1.15zm4.75-.75L14.95 9h-1.2l1.575 5.975h1.4L18.3 9h-1.2zM3 21V3h18v18z'/%3E%3C/svg%3E")}.icon-share-email{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M2 6.038V11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2zM4 4h8a1 1 0 0 1 1 1v.74L8 8.432L3 5.74V5a1 1 0 0 1 1-1M3 6.876L7.763 9.44a.5.5 0 0 0 .474 0L13 6.876V11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")}.icon-share-facebook{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M20.9 2H3.1A1.1 1.1 0 0 0 2 3.1v17.8A1.1 1.1 0 0 0 3.1 22h9.58v-7.75h-2.6v-3h2.6V9a3.64 3.64 0 0 1 3.88-4a20.26 20.26 0 0 1 2.33.12v2.7H17.3c-1.26 0-1.5.6-1.5 1.47v1.93h3l-.39 3H15.8V22h5.1a1.1 1.1 0 0 0 1.1-1.1V3.1A1.1 1.1 0 0 0 20.9 2'/%3E%3C/svg%3E")}.icon-share-hacker{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M0 0h24v24H0zm12.8 13.446l4.339-8.303h-1.871q-2.143 4.018-2.839 5.786l-.375.96l-.32-.75a49.079 49.079 0 0 0-3.022-6.243l.129.243H6.857l4.286 8.2v5.52H12.8z'/%3E%3C/svg%3E")}.icon-share-linkedin{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M6.94 5a2 2 0 1 1-4-.002a2 2 0 0 1 4 .002M7 8.48H3V21h4zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.72-2.91z'/%3E%3C/svg%3E")}.icon-share-pinterest{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M13.372 2.094a10.003 10.003 0 0 0-5.369 19.074a7.8 7.8 0 0 1 .162-2.292c.185-.839 1.296-5.463 1.296-5.463a3.7 3.7 0 0 1-.324-1.577c0-1.485.857-2.593 1.923-2.593a1.334 1.334 0 0 1 1.342 1.508c0 .9-.578 2.262-.88 3.54a1.544 1.544 0 0 0 1.575 1.923c1.897 0 3.17-2.431 3.17-5.301c0-2.201-1.457-3.847-4.143-3.847a4.746 4.746 0 0 0-4.93 4.793a2.96 2.96 0 0 0 .648 1.97a.48.48 0 0 1 .162.554c-.046.184-.162.623-.208.785a.354.354 0 0 1-.51.253c-1.384-.554-2.036-2.077-2.036-3.816c0-2.847 2.384-6.255 7.154-6.255c3.796 0 6.319 2.777 6.319 5.747c0 3.909-2.176 6.848-5.393 6.848a2.86 2.86 0 0 1-2.454-1.246s-.579 2.316-.692 2.754a8 8 0 0 1-1.019 2.131c.923.28 1.882.42 2.846.416a9.99 9.99 0 0 0 9.996-10.002a10 10 0 0 0-8.635-9.904'/%3E%3C/svg%3E")}.icon-share-pocket{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M21 6v5a9 9 0 1 1-18 0V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2'/%3E%3Cpath d='m8 10l4 4l4-4'/%3E%3C/g%3E%3C/svg%3E")}.icon-share-qr{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3 11h8V3H3zm2-6h4v4H5zM3 21h8v-8H3zm2-6h4v4H5zm8-12v8h8V3zm6 6h-4V5h4zm-5.99 4h2v2h-2zm2 2h2v2h-2zm-2 2h2v2h-2zm4 0h2v2h-2zm2 2h2v2h-2zm-4 0h2v2h-2zm2-6h2v2h-2zm2 2h2v2h-2z'/%3E%3C/svg%3E")}.icon-share-reddit{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12.001 22c-5.523 0-10-4.477-10-10s4.477-10 10-10s10 4.477 10 10s-4.477 10-10 10m6.67-10a1.46 1.46 0 0 0-2.47-1a7.1 7.1 0 0 0-3.85-1.23l.65-3.12l2.14.45a1 1 0 1 0 .13-.61L12.821 6a.31.31 0 0 0-.37.24l-.74 3.47a7.14 7.14 0 0 0-3.9 1.23a1.46 1.46 0 1 0-1.61 2.39a3 3 0 0 0 0 .44c0 2.24 2.61 4.06 5.83 4.06s5.83-1.82 5.83-4.06a3 3 0 0 0 0-.44a1.46 1.46 0 0 0 .81-1.33m-10 1a1 1 0 1 1 2 0a1 1 0 0 1-2 0m5.81 2.75a3.84 3.84 0 0 1-2.47.77a3.84 3.84 0 0 1-2.47-.77a.27.27 0 0 1 .38-.38a3.27 3.27 0 0 0 2.08.63a3.28 3.28 0 0 0 2.09-.61a.28.28 0 1 1 .39.4zm-.18-1.71a1 1 0 1 1 1-1a1 1 0 0 1-1.01 1.04z'/%3E%3C/svg%3E")}.icon-share{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M12 3a1 1 0 1 0 0 2a1 1 0 0 0 0-2m-2 1a2 2 0 1 1 .491 1.313L5.956 7.581a2 2 0 0 1 0 .838l4.535 2.268a2 2 0 1 1-.447.894L5.508 9.313a2 2 0 1 1 0-2.627l4.536-2.267A2 2 0 0 1 10 4M3 8a1 1 0 1 0 2 0a1 1 0 0 0-2 0m8 4a1 1 0 1 0 2 0a1 1 0 0 0-2 0'%3E%3C/path%3E%3C/svg%3E")}.icon-share-telegram{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M11.994 2a10 10 0 1 0 10 10a10 10 0 0 0-10-10m3.18 15.152a.705.705 0 0 1-1.002.352l-2.715-2.11l-1.742 1.608a.3.3 0 0 1-.285.039l.334-2.989l.01.009l.007-.059s4.885-4.448 5.084-4.637c.202-.189.135-.23.135-.23c.012-.23-.361 0-.361 0l-6.473 4.164l-2.695-.918s-.414-.148-.453-.475c-.041-.324.466-.5.466-.5l10.717-4.258s.881-.392.881.258Z'/%3E%3C/svg%3E")}.icon-share-tumblr{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M2 2v20h20V2Zm11.57 15.85a3.4 3.4 0 0 1-3.75-3.33v-4.08H8.56V8.83A3.83 3.83 0 0 0 11 5.47a.09.09 0 0 1 .09-.09h1.82v3.17h2.5v1.89h-2.49v3.89a1.11 1.11 0 0 0 1.2 1.23a3 3 0 0 0 1-.22l.6 1.78a3.34 3.34 0 0 1-2.15.73'/%3E%3C/svg%3E")}.icon-share-whatsapp{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M16.6 14c-.2-.1-1.5-.7-1.7-.8c-.2-.1-.4-.1-.6.1c-.2.2-.6.8-.8 1c-.1.2-.3.2-.5.1c-.7-.3-1.4-.7-2-1.2c-.5-.5-1-1.1-1.4-1.7c-.1-.2 0-.4.1-.5c.1-.1.2-.3.4-.4c.1-.1.2-.3.2-.4c.1-.1.1-.3 0-.4c-.1-.1-.6-1.3-.8-1.8c-.1-.7-.3-.7-.5-.7h-.5c-.2 0-.5.2-.6.3c-.6.6-.9 1.3-.9 2.1c.1.9.4 1.8 1 2.6c1.1 1.6 2.5 2.9 4.2 3.7c.5.2.9.4 1.4.5c.5.2 1 .2 1.6.1c.7-.1 1.3-.6 1.7-1.2c.2-.4.2-.8.1-1.2zm2.5-9.1C15.2 1 8.9 1 5 4.9c-3.2 3.2-3.8 8.1-1.6 12L2 22l5.3-1.4c1.5.8 3.1 1.2 4.7 1.2c5.5 0 9.9-4.4 9.9-9.9c.1-2.6-1-5.1-2.8-7m-2.7 14c-1.3.8-2.8 1.3-4.4 1.3c-1.5 0-2.9-.4-4.2-1.1l-.3-.2l-3.1.8l.8-3l-.2-.3c-2.4-4-1.2-9 2.7-11.5S16.6 3.7 19 7.5c2.4 3.9 1.3 9-2.6 11.4'/%3E%3C/svg%3E")}.icon-share-x{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M8 2H1l8.26 11.015L1.45 22H4.1l6.388-7.349L16 22h7l-8.608-11.478L21.8 2h-2.65l-5.986 6.886zm9 18L5 4h2l12 16z'%3E%3C/path%3E%3C/svg%3E")}a,a:visited{color:var(--link);text-decoration:none}.bold{font-weight:bold}.buttons{display:flex;flex-grow:1;gap:var(--s8);justify-content:end;margin:1rem 0}.button{align-items:center;background:var(--btn-bg-color);border:1px solid var(--btn-border);border-radius:var(--rs);color:var(--link);cursor:pointer;display:flex;font-size:var(--s14);height:32px;justify-content:center;min-width:32px;padding:var(--s4);text-decoration:none;transition:ease-in-out .4s;transition:visibility 0s}.button:hover{background:var(--btn-bg-active);color:var(--btn-active)}.button.disabled{opacity:var(--disabled)}.centered{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.clickable{cursor:pointer}hr{border-color:var(--color2);margin:1.5rem 0}kbd{background:var(--btn-bg-color);border:1px solid var(--btn-bg-color);border-radius:4px;box-shadow:0 1px 2px 0 #0006;color:var(--btn-color);font-size:var(--s12);margin-right:6px;padding:2px 4px}.description{border-radius:var(--rs);font-size:var(--s14);margin-bottom:var(--s16);padding:var(--s8);width:100%}.description.center{display:block;text-align:center;width:unset}.description ul{display:flex;flex-wrap:wrap;margin:.5em}.description li{width:33%}.alert,.danger,.delete{background-color:var(--test-fail-background);border:var(--test-fail-border);color:var(--test-fail-color)}.confirm,.warn{background-color:var(--text-confirm-bg-color);border:var(--text-confirm-border);color:var(--text-confirm-color)}.help{background-color:var(--text-help-bg-color);border:var(--text-help-border);color:var(--text-help-color)}.success{background-color:var(--text-success-bg-color);border:var(--text-success-border);color:var(--text-success-color)}.noselect{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.smaller{font-size:var(--s14)}#container{display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative;width:100%}#toolbar{align-items:center;background:var(--toolbar-bg-color);border-bottom:var(--toolbar-border);color:var(--toolbar-color);display:flex;font-size:var(--s14);height:var(--toolbar-height);position:relative;width:100%}#toolbar .toolbar-app,#toolbar .toolbar-render{display:inherit;place-items:center;width:50%}#toolbar .toolbar-app{justify-content:space-between;min-width:-moz-max-content;min-width:max-content}#toolbar .toolbar-menu{align-items:inherit;display:inherit}#toolbar .toolbar-render{display:flex;flex-grow:1;justify-content:space-between;place-items:center}#toolbar .toolbar-render div:first-child{display:inherit;flex-grow:1}#toolbar .toolbar-render .button{background:var(--btn-bg-color);border:var(--btn-border);border-radius:var(--btn-border-radius);color:var(--btn-color);display:inherit;height:var(--s32);place-items:center}#toolbar .toolbar-render .button:hover{background:var(--btn-bg-active);color:var(--btn-active)}#toolbar #logo{margin:0 var(--s4);padding:0;text-align:center;width:32px;z-index:2}#toolbar #logo img{height:auto;width:32px}#toolbar #logo a{text-decoration:none}#toolbar .menu{align-items:inherit;background:var(--menu-bg-color);border-radius:var(--menu-border-radius);color:var(--menu-color);display:inherit;height:var(--menu-height);margin-right:var(--s4);padding:0 var(--s4);text-decoration:none}#toolbar .menu:hover{background:var(--menu-bg-active);color:var(--menu-active)}#toolbar .menu .menu-text{margin:0 var(--s4);min-width:var(--s40)}#toolbar #project-title{align-items:center;background:var(--project-title-bg-color);border:1px solid var(--project-title-border-color);border-radius:var(--project-title-border-radius);color:var(--project-title-color);display:flex;font-size:inherit;height:var(--s32);justify-content:flex-start;margin:0 var(--s8);max-width:50%;overflow:hidden;padding:0 var(--s4);place-self:center;position:relative;text-overflow:ellipsis;transition:all .5s ease-in-out;white-space:nowrap;width:100%}#toolbar #project-title:hover,#toolbar #project-title:focus{background:var(--project-title-bg-active);box-shadow:var(--project-title-box-shadow);color:var(--project-title-active)}#toolbar #project-title.unsaved::after{content:" *";margin:4px;white-space:pre}#toolbar #login-link,#toolbar #logout-link{display:inherit;height:var(--s32);justify-content:space-evenly;margin:0 var(--s4)}a#fullscreen-button,a#result-button{display:none !important}@media only screen and (max-width: 1024px){#toolbar .menu{justify-content:center;min-width:32px;padding:0}#toolbar .menu-text{display:none}#toolbar .button{margin:0 var(--s4);width:32px}#toolbar .dropdown-menu{font-size:var(--s14)}#toolbar .toolbar-render .button{margin:0;width:24px}#custom-settings-btn{display:none}}@media only screen and (max-width: 768px){#toolbar{font-size:var(--s14)}#toolbar .menu>.menu-text{display:none}#toolbar #project-title{display:none}#toolbar #login-link,#toolbar #logout-link{min-width:var(--s24)}#code-to-img-btn{display:none}}#result-mode-drawer{display:none}.result #toolbar{display:none}.result #overlay{background-color:#fff;opacity:1 !important}.result #modal{display:none !important}.result #result-mode-drawer{align-items:center;background-color:#fafbff;border:.5px solid #e9ebed;border-top-left-radius:6px;border-top-right-radius:6px;bottom:0;box-shadow:rgba(0,0,0,.1) 0 0 6px;box-sizing:border-box;display:flex;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;height:42px;justify-content:space-between;left:50%;padding:6px;padding-left:0;position:absolute;transform:translateX(-50%);transition:transform .4s ease-in-out;width:250px}.result #result-mode-drawer.hidden{transform:translateX(-50%) translateY(44px)}.result #result-mode-drawer a{align-items:center;border-top-left-radius:6px;color:#4d565f;display:flex;flex-grow:1;gap:10px;height:42px;justify-content:center;text-decoration:none}.result #result-mode-drawer a:hover{background-color:#f6f6f7}.result #result-mode-drawer a::after{background:#e9ebed;content:"";height:26px;position:absolute;right:41px;top:8px;width:1px}.result #result-mode-drawer #drawer-logo{align-items:center;display:flex;justify-content:center}.result #result-mode-drawer #drawer-logo img{height:20px}.result #result-mode-drawer #drawer-text{font-size:14px;font-weight:600;line-height:20px}.result #result-mode-drawer #drawer-text svg{display:inline-block;fill:#778089;height:12px;transform:translateX(2px) translateY(2px)}.result #result-mode-drawer #drawer-close{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;height:30px;justify-content:center;margin-left:5px;width:30px}.result #result-mode-drawer #drawer-close:hover{background-color:#f6f6f7}.result #result-mode-drawer #drawer-close svg{height:14px}#editor-container{display:flex;flex-direction:row;height:calc(100% - var(--toolbar-height))}.layout-vertical #editor-container{flex-direction:column}.layout-vertical #editor-container .gutter #size-label{left:5px !important;top:15px !important}.layout-vertical .gutter.gutter-vertical{height:4px}.layout-vertical .gutter.gutter-vertical #handle{transform:rotate(90deg)}@media only screen and (max-width: 480px){#toolbar{align-items:flex-start;display:flex;height:calc(var(--toolbar-height)*2 - var(--s4))}#toolbar .toolbar-render{justify-content:space-between;place-items:center}#toolbar #select-editor{inset-inline-start:0;max-width:unset;position:absolute;top:var(--toolbar-height)}#toolbar #select-editor .editor-title>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#toolbar #light-theme-button,#toolbar #dark-theme-button{display:none}#toolbar #login-link,#toolbar #logout-link{height:100%}#editor-container{height:calc(100% - var(--toolbar-height)*2)}#modal .modal-search i.icon-calendar-sort,#modal .modal-search i.icon-arrow-text-sort{display:inline-block !important}.layout-vertical .tool-buttons#editor-tools{display:none}}#editors{background:var(--gutter-split-bg-color);display:flex;flex-direction:column;height:100%;justify-content:flex-end;overflow:hidden;position:relative;top:0}#editors>.editor{font-variant-ligatures:discretionary-ligatures;visibility:hidden}#editors>div{flex-grow:1;min-height:var(--s32);position:relative;width:100%}#editors .custom-editor{background-color:var(--custom-editor-background-color);display:none;height:100%;left:0;position:absolute;top:0;width:100%;z-index:10}#editors .custom-editor>iframe{border:0;height:100%;left:0;margin:0;padding:0;position:absolute;top:0;width:100%}#editors .custom-editor .loading-custom-editor{color:var(--custom-editor-loading-color);margin:1em}.tool-buttons{background:var(--toolbar-bg-color);height:var(--toolspane-bar-height)}.tool-buttons.hidden{display:none}.tool-buttons>button,.tool-buttons>span{align-items:center;background:var(--btn-bg-color);border:var(--btn-border);border-radius:var(--btn-border-radius);color:var(--btn-color);cursor:pointer;display:inline-flex;font-size:var(--font-size);height:var(--btn-height, 26px);justify-content:center;margin:3px;min-width:32px;position:relative}.tool-buttons>button.text,.tool-buttons>span.text{align-items:center;display:flex;font-size:var(--s12);height:var(--btn-height, 26px);justify-content:center}.tool-buttons>button svg,.tool-buttons>span svg{margin:4px auto}.tool-buttons>button:hover,.tool-buttons>button:active,.tool-buttons>button.active,.tool-buttons>span:hover,.tool-buttons>span:active,.tool-buttons>span.active{background:var(--btn-bg-active);color:var(--btn-active)}.tool-buttons>button.disabled,.tool-buttons>span.disabled{opacity:var(--disabled)}.tool-buttons#editor-tools{align-items:center;display:flex;flex-grow:0}.tool-buttons#editor-tools #editor-status{background-color:transparent;display:flex;flex-grow:1;font-size:var(--s12);justify-content:flex-start;white-space:nowrap}.tool-buttons#editor-tools #editor-status>span{margin:auto 4px}.tool-buttons .active .mark,.tools-pane-title.has-mark .mark{border:4px solid var(--editor-tools-mark-color);border-radius:4px;bottom:3px;display:inline-block;position:absolute;right:3px}@media only screen and (max-width: 768px){#copy-as-url-btn,#editor-status{display:none}}.copy-button{background-color:var(--btn-bg-color);border-radius:var(--btn-border-radius);cursor:pointer;display:none;padding:1px;position:absolute;right:20px;top:5px}.copy-button.visible{display:unset}#editors>div:hover .copy-button{display:unset}#output{background-color:var(--toolbar-bg-color);height:100%;overflow:hidden}#result{background-color:#fff;resize:both}#result.full{height:100%;max-height:100%}#result iframe{border:0;height:100%;transform-origin:top left;width:100%;z-index:1}#result iframe.zoom50{height:200%;min-width:200%;transform:scale(0.5);width:200%}#result iframe.zoom25{height:400%;min-width:400%;transform:scale(0.25);width:400%}#tools-pane-bar{font-size:var(--s12);height:var(--toolspane-bar-height);justify-content:space-between;padding:1px 0}#tools-pane-titles{display:flex;height:var(--toolspane-bar-height);justify-content:flex-start}a.tools-pane-title{align-items:center;background-color:var(--toolspane-bg-color);border-bottom:var(--toolspane-border);color:var(--toolspane-color);cursor:pointer;display:flex;justify-content:center;padding:0 var(--s8);position:relative}a.tools-pane-title:hover,a.tools-pane-title.active{background-color:var(--toolspane-bg-active);border-bottom:var(--toolspane-border-active);color:var(--toolspane-active)}#tools-pane-buttons{align-items:center;display:inherit;text-align:right;white-space:nowrap}#tools-pane-buttons>div{white-space:nowrap}#tools-pane>div{display:flex;flex-direction:column;height:0;visibility:hidden}#tools-pane>div.active{height:100%;visibility:visible}#console{overflow:auto}#console .luna-object-viewer{overflow:hidden}#console .luna-console-log-item .luna-console-icon-container .luna-console-icon{color:#03a9f4}#console .luna-console-count{color:#fff}#console-input-indicator{color:var(--toolspane-accent-color);padding-top:2px}#compiled-code{height:100%;margin:0;padding:0;width:100%}#test-container,#test-results{background-color:var(--tests-bg-color);color:var(--tests-color)}#test-results{padding-bottom:1rem}#test-results .test-result{background-color:var(--test-results-bg-color);border:var(--test-results-border);border-radius:var(--rs);margin:.5em;padding:.5em;padding-left:3em}#test-results .test-result::before{content:"🧪";display:inline-block;margin-left:-2em;margin-right:.5em;width:1.5em}#test-results .test-result.fail{background-color:var(--test-fail-background);border:var(--test-fail-border);color:var(--test-fail-color)}#test-results .test-result.fail::before{content:"✖"}#test-results .test-result.pass{color:var(--test-pass-color)}#test-results .test-result.pass::before{content:"✔"}#test-results .test-result.skip::before{content:"○"}#test-results .test-error{margin-left:1em;margin-top:.5em}#test-results .test-summary,#test-results .no-tests{margin:.5em;min-height:2.5em;padding:.5em}#test-results .test-summary .fail,#test-results .no-tests .fail{color:var(--test-fail-color)}#test-results .test-summary .pass,#test-results .no-tests .pass{color:var(--test-pass-color)}#test-container .buttons{justify-content:space-evenly;margin:var(--s8)}#test-container .button{gap:var(--s4);min-width:80px}#watch-tests-btn .checked{display:unset}#watch-tests-btn .unchecked{display:none}#watch-tests-btn.disabled .checked{display:none}#watch-tests-btn.disabled .unchecked{color:var(--link);display:unset}.gutter{align-items:center;background-color:var(--gutter-split-bg-color);color:var(--link);display:flex !important;justify-content:center;overflow:hidden;position:relative}.gutter.gutter-vertical{cursor:ns-resize}.gutter.gutter-horizontal{cursor:ew-resize}.gutter #handle{background-color:var(--gutter-split-bg-handle);border-radius:var(--rs);height:30px;width:4px}#editor-container .gutter #size-label{background-color:var(--size-label-background);border:1px solid var(--size-label-border);border-radius:var(--rs);color:var(--size-label-color);cursor:auto;font-family:system-ui,sans-serif;font-size:var(--s12);left:15px !important;max-height:calc(100vh - var(--toolbar-height));opacity:0;padding:2px;position:absolute;top:5px !important;transition:opacity .1s;white-space:nowrap;z-index:10}#editor-container .gutter #size-label.visible{opacity:100%;transition:opacity .1s}#select-editor{color:var(--editor-title-color);height:calc(var(--toolbar-height) - var(--s6));margin:0 0 calc(-1*var(--s2)) var(--s8);position:relative}#select-editor>ul{display:flex;height:100%}a.editor-title{align-items:center;background:var(--editor-title-bg-color);border-bottom:1px solid var(--editor-title-bg-color);border-top-left-radius:var(--editor-title-border-radius);border-top-right-radius:var(--editor-title-border-radius);color:var(--editor-title-color);cursor:pointer;display:flex;font-size:inherit;justify-content:space-between;list-style:none;margin-right:2px;padding:0 8px;position:relative;top:1px;width:90px}a.editor-title:hover{background-color:var(--editor-title-bg-active);border-color:var(--editor-title-bg-active);color:var(--editor-title-active)}a.editor-title>span{display:inline-block;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}a.editor-title.active{background-color:var(--editor-title-bg-active);border-bottom-color:var(--editor-title-border-active);color:var(--editor-title-active)}a.editor-title.active>.language-menu-button{background-color:var(--language-menu-bg-active)}a.editor-title.active>.language-menu-button:hover{background-color:var(--language-menu-bg-active)}a.editor-title.hidden{display:none}a.editor-title>.language-menu-button{background-color:var(--language-menu-bg-color);border:0;border-radius:var(--rs);color:var(--language-menu-color-active);cursor:pointer;display:flex;height:var(--s16);justify-content:center;margin:0;padding:0;place-content:center;place-items:center;text-decoration:none;width:var(--s16)}a.editor-title>.language-menu-button:hover{background-color:var(--language-menu-bg-active);color:var(--language-menu-color-active)}a.editor-title>.language-menu-button:focus+.menu-scroller{animation:fadeIn .4s forwards;display:block}a.editor-title>.language-menu-button:focus+.menu-scroller .dropdown-menu{animation:fadeIn .4s forwards;display:block}[id^=app-menu-container-]{inset-inline-start:anchor(start) !important;margin-inline-start:-15px;top:anchor(bottom) !important;width:290px}#app-menu-container-project{position-anchor:--app-menu-project;width:600px}#app-menu-container-settings{position-anchor:--app-menu-settings}#app-menu-container-help{position-anchor:--app-menu-help}#app-menu-container-i18n{position-anchor:--app-menu-i18n;width:230px}#app-menu-button-project{anchor-name:--app-menu-project}#app-menu-button-settings{anchor-name:--app-menu-settings}#app-menu-button-help{anchor-name:--app-menu-help}#app-menu-button-i18n{anchor-name:--app-menu-i18n}@supports not (anchor-name: --app-menu-project){[id^=app-menu-container-]{--logo-width: 40px;--icon-width: 36px;top:var(--toolbar-height)}#app-menu-container-project{inset-inline-start:var(--logo-width)}#app-menu-container-settings{inset-inline-start:7.35rem}#app-menu-container-help{inset-inline-start:13rem}#app-menu-container-i18n{inset-inline-end:unset;inset-inline-start:15rem}#app-menu-container-i18n #app-menu-i18n{inset-inline-end:15px;inset-inline-start:unset}@media only screen and (max-width: 1024px){#app-menu-container-settings{inset-inline-start:calc(var(--logo-width) + var(--icon-width))}#app-menu-container-help{inset-inline-start:calc(var(--logo-width) + var(--icon-width)*2)}#app-menu-container-i18n{inset-inline-start:calc(var(--logo-width) + var(--icon-width)*3)}}}#app-menu-help,#app-menu-settings,#app-menu-project,#app-menu-i18n{--label-max-width: 188px;-moz-column-count:1;column-count:1;left:0;margin-inline-start:15px;margin-top:0;top:0;width:255px}#app-menu-help span,#app-menu-settings span,#app-menu-project span,#app-menu-i18n span{display:inline-block;text-wrap:nowrap}#app-menu-i18n{width:200px}#app-menu-i18n span{flex-grow:1}#app-menu-i18n span a{display:flex}.menu-scroller{animation:fadeIn .4s forwards;height:calc(100vh - var(--toolbar-height));overflow-x:hidden;overflow-y:scroll;position:absolute;right:0;scrollbar-width:none}.menu-scroller::-webkit-scrollbar{display:none}.menu-scroller.hidden{display:none !important}.menu-scroller-markup,.menu-scroller-style,.menu-scroller-script{top:calc(var(--toolbar-height) - 8px)}.menu-scroller-markup>.dropdown-menu,.menu-scroller-style>.dropdown-menu,.menu-scroller-script>.dropdown-menu{margin-inline:15px;width:calc(100% - 30px)}.menu-scroller-markup{max-width:50vw;right:-180%;width:400%}.menu-scroller-style{max-width:50vw;right:-180%;width:400%}.menu-scroller-script{right:0;transform:translateX(50%);width:900%}.dropdown-menu-markup,.dropdown-menu-style{-moz-column-count:2;column-count:2;-moz-column-rule:1px solid var(--menu-split-color);column-rule:1px solid var(--menu-split-color)}.dropdown-menu-script{-moz-column-count:4;column-count:4;-moz-column-rule:1px solid var(--menu-split-color);column-rule:1px solid var(--menu-split-color)}.column-break{-moz-column-break-before:column;break-before:column}.dropdown-menu{background-clip:padding-box;background-color:var(--dropdown-bg-color);border:var(--dropdown-border);border-radius:var(--dropdown-border-radius);box-shadow:var(--dropdown-shadow);color:var(--dropdown-color);font-size:var(--dropdown-font);list-style:none;overflow:visible;padding:var(--s8);position:absolute;right:0;top:0;width:100%}.dropdown-menu li[role=separator]{background:var(--dropdown-split-color);margin:4px calc(1px - var(--s8));padding:1px 0 0}.dropdown-menu i[class^=icon-],.dropdown-menu svg{font-size:var(--s14)}.dropdown-menu a[target=_blank]::after{content:"↑";display:inline-block;margin:0 .3em;rotate:45deg;width:.7em}.dropdown-menu li:not(li[role=separator]){align-items:center;border-radius:var(--dropdown-border-radius);break-inside:avoid-column;color:var(--dropdown-color);-moz-column-break-inside:avoid;display:flex;height:var(--dropdown-height, 32px);justify-content:space-between;position:relative}.dropdown-menu li:not(li[role=separator]):hover,.dropdown-menu li:not(li[role=separator]).active{background-color:var(--dropdown-bg-active);color:var(--dropdown-active)}.dropdown-menu li:not(li[role=separator]) a,.dropdown-menu li:not(li[role=separator]) a.subtitle{border-radius:inherit;color:inherit;display:inherit;justify-content:space-between;padding:var(--s6) var(--s8);text-decoration:none;white-space:nowrap;width:100%}.dropdown-menu li:not(li[role=separator]) a span,.dropdown-menu li:not(li[role=separator]) a.subtitle span{display:inherit}.dropdown-menu li:not(li[role=separator]).link-and-switch{align-items:center;display:flex;justify-content:space-between;width:100%}.dropdown-menu li:not(li[role=separator]).link-and-switch a{white-space:nowrap}.dropdown-menu li:not(li[role=separator]).link-and-switch a #sync-indicator.hidden{display:none}.dropdown-menu li:not(li[role=separator]).link-and-switch>.switch{width:auto}.dropdown-menu li:not(li[role=separator]) .range-slider-label{display:flex;flex-grow:1;justify-content:space-between;padding:var(--s6) var(--s8)}.dropdown-menu li:not(li[role=separator]) .range-slider-label input[type=range]{width:8em}@media only screen and (max-width: 768px){.dropdown-menu li:not(li[role=separator]) .range-slider-label input[type=range]{width:3em}}.dropdown-menu li:not(li[role=separator]).processor-item{font-size:.9em}.dropdown-menu li:not(li[role=separator]).processor-item a{display:flex !important;max-width:unset !important;padding:0 !important}.submenu{border-radius:inherit;-moz-column-count:1 !important;column-count:1 !important;display:none !important;left:98%;margin:0 !important;position:absolute !important;right:unset;top:0;width:275px}.submenu:hover{display:block !important}#app-menu-help a:hover+.submenu,#app-menu-project a:hover+.submenu,#app-menu-project i:hover+a+.submenu{display:block !important}#open-link:hover+#open-list,#open-list:hover{display:block !important}i.arrow{color:var(--submenu-arrow-color);display:inline-block;padding:10px 15px 10px 10px;position:absolute !important;right:-6px;text-decoration:none;top:calc(50% - .5rem)}i.arrow::before{border-right:2px solid;content:"";display:block;height:.4em;margin-top:-0.3em;position:absolute;right:.5em;top:50%;transform:rotate(135deg);width:0}i.arrow::after{border-right:2px solid;content:"";display:block;height:.4em;margin-top:-1px;position:absolute;right:.5em;top:50%;transform:rotate(45deg);width:0}@media only screen and (max-width: 1024px){.menu-scroller-script{transform:translateX(35%);width:850%}}@media only screen and (max-width: 768px){.menu-scroller{max-width:90vw;width:120%}.menu-scroller-markup{right:0;transform:translateX(50%);width:400%}.menu-scroller-style{right:0;transform:translateX(20%);width:400%}.menu-scroller-script{max-width:98vw;position:fixed;top:calc(var(--toolbar-height) - 2px);transform:translateX(-1vw)}.dropdown-menu-script{-moz-column-count:3;column-count:3}.dropdown-menu.submenu{left:50%;margin:0;padding:var(--s8);right:unset;top:0}.dropdown-menu.submenu a{padding:6px 8px}i.arrow{left:0}}@media only screen and (max-width: 480px){.menu-scroller-markup,.menu-scroller-style,.menu-scroller-script{height:calc(100vh - var(--toolbar-height)*2);max-width:98vw;position:fixed;top:calc(var(--toolbar-height)*2 - 4px);transform:translateX(-1vw)}.menu-scroller-markup>.dropdown-menu,.menu-scroller-style>.dropdown-menu,.menu-scroller-script>.dropdown-menu{margin-inline:0;width:100%}.dropdown-menu-script{-moz-column-count:2;column-count:2}.dropdown-menu.submenu{left:44%}}.range-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--input-range-bg-color);border-radius:var(--rs);height:8px}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--input-active);border:2px solid var(--input-range-bg-color);border-radius:50%;cursor:pointer;height:16px;width:16px}.range-slider::-moz-range-thumb{background:var(--input-active);border-radius:50%;cursor:pointer;height:16px;width:16px}.switch{cursor:pointer;display:inherit;padding:var(--s6) var(--s8);width:100%}.switch span{flex-grow:1}.switch div{height:18px;transform:scale(0.8);width:34px}.switch .slider{background:var(--input-slider-bg-color);border:1px solid var(--input-slider-border-color);bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.switch .slider::before{background:var(--input-switch-color);bottom:2px;content:"";height:14px;left:2px;position:absolute;transition:.4s;width:14px}.switch input{height:0;opacity:0;width:0}.switch input:checked+.slider{background:var(--input-slider-bg-color)}.switch input:focus+.slider{box-shadow:0 0 1px var(--input-switch-active)}.switch input:checked+.slider::before{background:var(--input-active);transform:translateX(16px)}.switch input:indeterminate+.slider{background:var(--input-indeterminate-color)}.switch input:indeterminate+.slider::before{transform:translateX(8px)}.switch .slider.round{border-radius:16px}.switch .slider.round::before{border-radius:50%}@media only screen and (max-width: 480px){.switch div{transform:scale(0.6)}}#theme-color-item{padding:6px 8px}#theme-color-item #theme-color-selector{display:flex}#theme-color-item #theme-color-selector input{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}#theme-color-item #theme-color-selector label{border-radius:var(--rs);cursor:pointer;display:inline-block;height:var(--s16);margin:var(--s2);width:var(--s16)}#theme-color-item #theme-color-selector label[for=theme-color-custom]{background:conic-gradient(in hsl longer hue, red 0 0);filter:contrast(0.5)}#theme-color-item #theme-color-selector label:has(input:checked),#theme-color-item #theme-color-selector label:has(input:focus){outline:1px solid var(--input-active)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes overlayfadeIn{from{opacity:0}to{opacity:.7}}@keyframes fadeOut{from{opacity:0}to{opacity:1}}@keyframes overlayfadeOut{from{opacity:.7}to{opacity:0}}#overlay{align-items:center;animation:overlayfadeIn .4s forwards;background-color:var(--overlay-bg-color);display:flex;height:100%;justify-content:center;left:0;margin:0;opacity:.7;overflow:hidden;position:absolute;top:0;width:100%}#overlay.hidden{animation:overlayfadeOut .4s forwards}.tagify{--scrollbar-width: 3px;--scrollbar-width-legacy: 3px;--tag-inset-shadow-size: 2em !important;display:flex;flex-direction:row;flex-wrap:nowrap !important;font-size:var(--s12);max-width:140px;overflow:hidden}.tagify .tagify__tag-text{white-space:nowrap}.tagify .tagify__input{--placeholder-color: var(--input-color) !important;--placeholder-color-focus: var(--input-color) !important;text-align:start}#modal{animation:fadeIn .4s forwards;background-color:var(--modal-bg-color);border:0;border-radius:var(--rs);color:var(--modal-text-color);flex-direction:column;margin:auto;max-height:72vh;max-width:52rem;opacity:1;outline:none;position:relative;width:80vw}#modal[open]{display:flex}#modal.large{max-height:85vh;min-height:60vh}#modal #modal-container{height:100%;margin-top:2rem;overflow:scroll}#modal .modal-message{min-height:3rem;text-align:center;width:100%}#modal .modal-message.hidden{animation:fadeOut .4s forwards;display:none}#modal .modal-message .no-data,#modal .modal-message .no-data#assets-no-match{width:100%}#modal .modal-search{align-items:center;background:var(--darker-bg-color);border:1px solid var(--darker-bg-color);border-radius:var(--rs);color:var(--darker-color);display:flex;flex-direction:row;font-size:var(--s14);margin-bottom:1.5rem;place-content:space-between;place-items:center;white-space:nowrap;width:100%}#modal .modal-search>div{align-items:center;display:inherit}#modal .modal-search>div:last-child{justify-content:flex-end}#modal .modal-search span[id=sort-by-label]{padding:0 var(--s4)}#modal .modal-search span[id=sort-by-label]>span{padding:0 var(--s4);white-space:nowrap}#modal .modal-search a[id*=reset],#modal .modal-search a[id*=sort]{display:inline-flex;font-size:inherit !important;height:32px;min-width:32px;padding:8px;place-items:center}#modal .modal-search a[id*=reset],#modal .modal-search a[id*=sort],#modal .modal-search #language-filter{background-color:transparent;border-left:1px solid var(--dark-bg-color);border-right:1px solid var(--dark-bg-color);color:var(--darker-color)}#modal .modal-search a[id*=reset]:hover,#modal .modal-search a[id*=reset].active,#modal .modal-search a[id*=sort]:hover,#modal .modal-search a[id*=sort].active,#modal .modal-search #language-filter:hover,#modal .modal-search #language-filter.active{background:var(--darker-bg-active);border-color:var(--darker-bg-active);color:var(--darker-active)}#modal .modal-search i.icon-calendar-sort,#modal .modal-search i.icon-arrow-text-sort{display:none}#modal .modal-search a#assets-sorted-asc,#modal .modal-search a#assets-sorted-desc{padding:4px;width:32px}#modal .modal-search input#filter-tags ::-moz-placeholder{color:var(--light);opacity:.7}#modal .modal-search input#filter-tags ::placeholder{color:var(--light);opacity:.7}#modal .modal-search select[id*=-filter]{background-color:var(--darker-bg-color);border-bottom:0;border-radius:0;border-top:0;color:var(--darker-color);font-size:inherit !important;height:32px !important;margin:0 !important;max-width:10rem;width:-moz-fit-content;width:fit-content}#modal .modal-search select[id*=-filter] option{background-color:var(--darker-bg-color);color:var(--darker-color)}#modal .modal-search input[id*=search]:not([type=radio]):not([type=checkbox]),#modal .modal-search .tagify{background:var(--darker-bg-color);border-bottom:0;border-radius:0;border-top:0;color:var(--darker-color);height:32px;margin-bottom:0;padding:0 .5rem;width:50%}#modal .modal-search input[id*=search]:not([type=radio]):not([type=checkbox]):hover,#modal .modal-search input[id*=search]:not([type=radio]):not([type=checkbox]):focus,#modal .modal-search .tagify:hover,#modal .modal-search .tagify:focus{overflow-x:auto}#modal .modal-search input[id*=search]:not([type=radio]):not([type=checkbox])::-moz-placeholder, #modal .modal-search .tagify::-moz-placeholder{color:var(--darker-color);opacity:.7}#modal .modal-search input[id*=search]:not([type=radio]):not([type=checkbox])::placeholder,#modal .modal-search .tagify::placeholder{color:var(--darker-color);opacity:.7}#modal .modal-search input[id*=search]:not([type=radio]):not([type=checkbox]){border-radius:0 !important;margin-bottom:0 !important}#modal .modal-search input[id*=search]:not([type=radio]):not([type=checkbox])::-moz-placeholder{color:var(--darker-color)}#modal .modal-search input[id*=search]:not([type=radio]):not([type=checkbox])::placeholder{color:var(--darker-color)}#modal .modal-search a[id*=reset-filters]{border-bottom-right-radius:var(--rs);border-top-right-radius:var(--rs)}#modal .modal-screen{height:100%;max-height:100%;position:relative;width:100%}#modal .modal-screen-container{align-content:center;align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap;margin:1rem;padding:1rem 1rem 0;width:calc(100% - 2rem)}#modal .modal-content{max-width:100%}#modal .modal-container{display:inline-block;height:100%;margin:0 auto;overflow:auto;scrollbar-gutter:stable;width:100%}#modal .modal-section{box-sizing:border-box;font-size:var(--s14);margin-bottom:1rem;padding:0 1rem;text-align:start;width:50%}#modal .modal-section a{border-radius:var(--rs);display:block;padding:var(--s4) var(--s12);text-decoration:none;transition:all .3s ease-in-out;width:100%}#modal .modal-section a:hover{background:var(--btn-modal-bg-color);color:var(--btn-modal-active)}#modal .modal-section h3{font-weight:400;margin:0 0 .5rem}#modal .modal-section .more{font-size:var(--s12)}#modal .modal-section p{margin-bottom:1rem;text-align:justify}#modal .modal-section ul.contributors{margin-bottom:1rem}#modal .modal-section ul>li{display:block;list-style:none}#modal .livecodes-support{align-items:center;display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:1rem}#modal .livecodes-support h3{flex-basis:100%;margin-bottom:.5rem}#modal .livecodes-support>div{display:flex;flex-grow:1;width:80px}#modal .livecodes-support>div>a{background:var(--btn-modal-bg-color);border-radius:var(--rs);color:var(--btn-modal-color);font-size:var(--s14);padding:var(--s8) 0 !important;text-align:center;text-decoration:none;white-space:nowrap;width:100%}#modal .livecodes-support>div>a:hover{background:var(--btn-modal-bg-active);color:var(--btn-modal-active)}#modal .livecodes-support>div>a i{height:24px;vertical-align:-0.175em;width:24px}#modal .livecodes-support>div>a[target=_blank]::after{content:"";filter:none;margin:0;width:0}#modal .modal-tabs{border-bottom:1px solid var(--btn-modal-bg-active);display:flex;gap:var(--s8);margin-bottom:2rem;width:100%}#modal .modal-tabs li{background-color:var(--btn-modal-bg-color);border:1px solid var(--btn-modal-bg-color);border-bottom:0;border-top-left-radius:var(--rs);border-top-right-radius:var(--rs);display:block;list-style:none;text-align:center;width:30%}#modal .modal-tabs li.hover,#modal .modal-tabs li.active{background-color:var(--btn-modal-bg-active);border-bottom:1px solid var(--btn-modal-bg-active);margin-bottom:-1px}#modal .modal-tabs li.hover a,#modal .modal-tabs li.active a{color:var(--btn-modal-active)}#modal .modal-tabs li a{color:var(--btn-modal-color);display:block;padding:.5rem;text-decoration:none}#modal .tab-content{display:none;height:100%;width:100%}#modal .tab-content.active{display:flex}#modal.small{max-height:32rem;overflow-y:auto;width:25rem}#modal.full{height:calc(100vh - 50px);max-height:unset;max-width:unset;width:calc(100vw - 50px)}#modal a[target=_blank]::after{content:"↑";display:inline-block;margin:0 .3em;rotate:45deg;width:.7em}#modal #about-screen-container .about-logo{width:100%}#modal #about-screen-container .about-logo img{margin-bottom:1rem}#modal #about-screen-container .about-version{background:var(--darker-bg-color);border-radius:var(--rs);color:var(--btn-modal-color);margin-bottom:1rem;padding:.5rem 1rem}#modal #about-screen-container .about-version li{display:inline-block;width:100%}#modal #about-screen-container .about-version li:has(.version){padding-inline-start:var(--s12)}#modal #about-screen-container .about-version a,#modal #about-screen-container .about-version .version{border-radius:var(--rs);color:var(--btn-modal-color);display:inline-block;padding:var(--s4) var(--s12)}#modal #about-screen-container .about-version a:hover,#modal #about-screen-container .about-version .version:hover{background-color:var(--btn-modal-bg-active);color:var(--btn-modal-active)}#modal #about-screen-container .about-version a.version{width:-moz-fit-content;width:fit-content}#modal #about-screen-container .about-credits{margin-bottom:0}#modal #assets-list-container .open-list li{max-width:calc(25% - 12px)}#modal #add-asset-data-url #data-url-output{background:var(--btn-bg-color);border-radius:var(--rs);color:var(--btn-color);padding:1rem;width:100%}#modal #add-asset-data-url #data-url-output:empty{display:none}#modal #add-snippet-container #add-snippet-editor{height:10em !important;width:100%}#modal ::-moz-placeholder{color:var(--link);opacity:.7}#modal ::placeholder{color:var(--link);opacity:.7}#modal .actions{align-items:center;align-self:flex-start;background:var(--darker-bg-color);border-bottom-left-radius:var(--rs);border-top-right-radius:var(--rs);display:flex;flex-direction:column}#modal .actions .action-button{background:var(--btn-modal-bg-color);border:0;border-radius:var(--rs);color:var(--btn-modal-color);cursor:pointer;height:auto;margin:0;padding:8px;text-align:center;width:32px}#modal .actions .action-button:focus,#modal .actions .action-button:hover{background:var(--btn-modal-bg-active);color:var(--btn-modal-active);opacity:1}#modal .asset-details{width:100%}#modal a.asset-link,#modal a.open-project-link,#modal a.snippet-link{border-radius:var(--rs);display:block;max-width:calc(100% - 32px);padding:.5rem 1rem;width:100%}#modal .asset-link::before,#modal .snippet-link::before{display:none}#modal .asset-link::after,#modal .snippet-link::after{background:#1f1f1f;height:1.75rem !important;opacity:1;top:5px !important}#modal .asset-link::after{left:60%}#modal .asset-item,#modal .snippet-item{color:var(--darker-color);display:flex;flex-wrap:wrap;justify-content:start;width:100%}#modal .asset-item .light,#modal .snippet-item .light{font-size:var(--s12);width:100%}#modal .asset-title,#modal .open-title{color:var(--light);font-size:var(--s16);font-weight:400;height:auto;width:100%}#modal .asset-url.overflow-text{max-width:240px;max-width:27ch}#modal .button{background:var(--btn-modal-bg-color);border:1px solid var(--btn-modal-border-color);border-radius:var(--btn-modal-border-radius);box-shadow:0 3px 6px rgba(0,0,0,.176);color:var(--btn-modal-color);cursor:pointer;font-size:var(--btn-modal-font);min-width:80px;padding:var(--s6);place-self:center;transition:all .4s ease-in-out}#modal .button:hover,#modal .button:active{background:var(--btn-modal-bg-active);color:var(--btn-modal-active)}#modal .button.danger{background-color:rgba(177,27,27,.7);color:#fecdd5}#modal .button.danger:hover{background-color:#b11b1b}#modal .button.hidden{display:none}#modal span.code{background-color:var(--input-bg-color);border:1px solid var(--input-border-color);border-radius:var(--rs);font:normal .8rem/1.5 ui-monospace,monospace;padding:.125rem .5rem}#modal .close-container{display:flex;justify-content:center}#modal .clear-button,#modal .close-button,#modal .delete-button{background:var(--btn-modal-bg-color);border:1px solid var(--btn-modal-border-color);border-radius:var(--rs);color:var(--btn-modal-color);cursor:pointer;height:24px;margin:var(--s4);position:relative;vertical-align:middle;width:24px}#modal .clear-button:active,#modal .clear-button:focus,#modal .clear-button:hover,#modal .close-button:active,#modal .close-button:focus,#modal .close-button:hover,#modal .delete-button:active,#modal .delete-button:focus,#modal .delete-button:hover{background:transparent;color:var(--btn-modal-active)}#modal .close-button{opacity:1;position:absolute;right:1.5rem;text-align:center;top:var(--s16);z-index:20}#modal .custom-editor{background-color:var(--custom-editor-background-color);border:1px solid var(--color3);border-radius:var(--rs);font-variant-ligatures:discretionary-ligatures;height:140px;margin-bottom:var(--s16);max-height:40vh;min-height:5rem;overflow:hidden;text-align:initial;width:100%}#modal #custom-settings-editor{height:32vh}#modal .error{color:red;font-weight:normal;margin-left:1em}#modal .file-input-label,#modal .wide-button{background-color:var(--btn-modal-bg-color);border:1px solid var(--btn-modal-border-color);border-radius:var(--rs);box-shadow:0 3px 6px rgba(0,0,0,.176);box-sizing:content-box;color:var(--btn-modal-active);cursor:pointer;font-size:var(--s16);margin:var(--s16) 0;padding:var(--s8);text-align:center;transition:all .5s ease-in-out;width:50%}#modal .file-input-label.disabled,#modal .wide-button.disabled{opacity:var(--disabled)}#modal .file-input-label:hover,#modal .file-input-label:active,#modal .wide-button:hover,#modal .wide-button:active{background-color:var(--btn-modal-bg-active);border-bottom:1px solid var(--btn-modal-bg-active);color:var(--btn-modal-active);transform:translateY(1px)}#modal .help-link{margin-left:.5em}#modal .help-link::after{content:unset !important}#modal .help-link img{height:.8em;opacity:.7}#modal #info-container .tagify{min-width:100%}#modal .file-input{display:none}#modal form{margin-bottom:1em;text-align:start}#modal .img-preview{aspect-ratio:16/9;background:var(--color2);border-radius:var(--rs);height:auto;margin:1rem 0 .5rem;min-width:calc(100% + 32px);-o-object-fit:contain;object-fit:contain}#modal .img-preview-larger{aspect-ratio:16/9;height:135px;margin:0 auto var(--s8);-o-object-fit:cover;object-fit:cover;width:240px}#modal .indent{margin-left:var(--s20);margin-top:0}#modal input:not([type=radio]):not([type=checkbox]):not([type=range]):not(.clr-color){background:var(--input-bg-color);border:1px solid var(--input-border-color);border-radius:var(--rs);color:var(--input-color);height:var(--s32);margin-bottom:1rem;padding:var(--s6);width:100%}#modal .input-container{align-self:flex-start;margin-bottom:1.5rem}#modal .input-container:last-of-type{margin-bottom:var(--s8)}#modal .input-container>span{display:inline-block;margin-right:1.5em}#modal .input-container .radio-label{font-weight:unset;margin:0;padding-left:.5em;width:unset}#modal .input-container select{margin-bottom:0}#modal label{display:inline-block;font-weight:400;margin-bottom:var(--s8)}#modal label+.input-container,#modal #editor-settings-form .input-container:not(.field-note){border-radius:var(--rs);padding:var(--s6)}#modal label+.input-container:has(span){padding-left:1rem}#modal .label-description{float:right;font-size:var(--s14);font-weight:normal;margin:0 var(--s8)}#modal .language-info{padding-top:1rem}#modal .language-info div,#modal .language-info ol,#modal .language-info ul{font-size:var(--s14);list-style:none;margin:1rem auto;width:calc(100% - 4rem)}#modal .language-info li{padding:.25em 0}#modal .language-info li:has(a[target=_parent]){margin:1rem 0 !important}#modal .language-info>h3,#modal .modal-title{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:var(--modal-title-bg);border-radius:var(--rs);box-sizing:border-box;color:var(--modal-title-color);font-size:var(--s20);font-weight:300;height:var(--s32);margin:1rem;max-width:calc(100% - 2rem);padding:.1rem 1rem;position:absolute;top:0;width:100%;z-index:10}#modal .light{color:var(--light);font-size:var(--s14);font-weight:400;line-height:1.5}#modal #list-container{width:100%}#modal #list-container .list-button:hover{box-shadow:0 1px 2px rgba(0,0,0,.176)}#modal #list-container li.hidden{animation:disappear 500ms forwards}#modal #list-container li.hidden *{display:none !important}#modal #list-container li.selected .default-template-label{display:unset}#modal #list-container li.selected .template-default-link{display:none}#modal #list-container li .default-template-label{display:none}#modal #list-container li .template-default-link{display:unset}#modal #login-screen .modal-content{width:100%}#modal #login-screen .modal-content .buttons{justify-content:center}#modal #login-screen .modal-content p{margin-bottom:.5rem}#modal #login-screen .modal-content .login-access{background:var(--darker-bg-color);border-radius:var(--rs);color:var(--darker-color);margin:0 0 1rem;padding:1rem}#modal .nowrap{white-space:nowrap}#modal .overflow-text,#modal .snackbar--link{overflow-x:hidden;overflow-y:visible;text-overflow:ellipsis;white-space:nowrap;width:100%}#modal .snackbars-left .snackbar{left:50% !important;margin-left:-172px !important}#modal .padded{margin:1rem 0}#modal .padded label{display:inline;margin:unset;width:unset}#modal .project-tags::before{--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(1 3)'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M11.914.5H15.5a2 2 0 0 1 2 2v3.586a1 1 0 0 1-.293.707l-6.793 6.793a2 2 0 0 1-2.828 0l-3.172-3.172a2 2 0 0 1 0-2.828L11.207.793A1 1 0 0 1 11.914.5'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='m7.5 13.5l-2.013 1.006A2 2 0 0 1 2.72 13.42L1.105 9.114a2 2 0 0 1 .901-2.45L9.5 2.5'/%3E%3Crect width='2' height='2' x='14' y='2' fill='%23000' rx='1'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;content:" ";display:inline-block;height:1rem;margin-right:4px;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;width:1rem}#modal .project-tags .language-tag,#modal .project-tags .user-tag{background-color:var(--btn-bg-color);border:1px solid var(--btn-border);border-radius:var(--rs);color:var(--btn-color);display:inline-block;font-size:var(--s10);font-weight:normal;margin:.5em;min-width:3em;padding:var(--s2) var(--s4);text-align:center}#modal .project-tags .language-tag:hover:not(.template-tag),#modal .project-tags .user-tag:hover:not(.template-tag){cursor:pointer;text-decoration:underline}#modal .project-tags .user-tag{background-color:var(--btn-bg-active);color:var(--btn-active)}#modal #prompt-screen{display:flex;flex-direction:column;width:100%}#modal #prompt-screen .buttons{justify-content:center}#modal #prompt-recover-screen .modal-screen-container{margin-bottom:0}#modal #prompt-recover-screen .disable-recover{margin-top:1em}#modal #prompt-recover-screen .buttons{justify-content:center}#modal #prompt-recover-screen #show-prompt{align-items:center;background:var(--darker-bg-color);border-top-left-radius:var(--rs);border-top-right-radius:var(--rs);bottom:1px;box-shadow:0 0 8px 1px #0006;color:var(--darker-color);display:flex;gap:var(--s4);justify-content:center;margin:0 1rem;padding:.5em 0;position:relative;width:calc(100% - 2em)}#modal #prompt-recover-screen #show-prompt label{margin:0;width:unset}#modal select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--input-bg-color);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23aaa' d='M18 9c.852 0 1.297.986.783 1.623l-.076.084l-6 6a1 1 0 0 1-1.32.083l-.094-.083l-6-6l-.083-.094l-.054-.077l-.054-.096l-.017-.036l-.027-.067l-.032-.108l-.01-.053l-.01-.06l-.004-.057v-.118l.005-.058l.009-.06l.01-.052l.032-.108l.027-.067l.07-.132l.065-.09l.073-.081l.094-.083l.077-.054l.096-.054l.036-.017l.067-.027l.108-.032l.053-.01l.06-.01l.057-.004z'/%3E%3C/svg%3E");background-position:98% 50%;background-repeat:no-repeat;border:1px solid var(--input-border-color);border-radius:var(--rs);color:var(--input-color);cursor:pointer;font-size:var(--s14);margin-bottom:1rem;padding:.5rem 1.5rem .5rem .5rem;width:100%}#modal select option{background-color:var(--input-bg-color);color:var(--input-color)}#modal select option:checked{background-color:var(--input-bg-active)}#modal textarea:not(.inputarea){background:var(--input-bg-color);border:1px solid var(--input-border-color);border-radius:var(--rs);color:var(--input-color);height:4em;margin-bottom:1rem;min-height:4em;padding:var(--s6);resize:vertical;width:100%}#modal ul{font-size:var(--s14);list-style:none;margin:0;padding:0}#modal ul.open-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem;justify-content:flex-start;margin:0;padding:0;width:100%}#modal ul.open-list.hidden{visibility:hidden}#modal ul.open-list li{align-items:center;background-color:var(--btn-modal-bg-color);border:1px solid var(--btn-modal-border-color);border-radius:var(--rs);box-shadow:0 3px 6px rgba(0,0,0,.176);display:inherit;list-style:none;margin:0;max-width:calc(50% - .5rem);min-height:4em;padding:0;text-align:left;transition:all .4s ease-in-out;width:100%}#modal ul.open-list li:hover,#modal ul.open-list li.selected{background-color:var(--btn-modal-bg-active);box-shadow:0 1px 2px rgba(0,0,0,.176);color:var(--btn-modal-active)}#modal ul.open-list li a.open-project-link{color:var(--btn-modal-color);width:100%}#modal ul.open-list li .light{font-size:var(--s12);font-weight:400;line-height:1.5}#modal ul.thumbnails{display:flex;flex-basis:calc((100% - 2rem)/5);flex-direction:row;flex-wrap:wrap;font-size:var(--s12);gap:var(--s4);list-style:none;margin-bottom:var(--s16);padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}#modal ul.thumbnails li{background:var(--thumbnail-bg-color);border-radius:var(--rs);color:var(--thumbnail-color);text-align:center;transition:background .5s ease-in-out;width:calc(25% - var(--s4))}#modal ul.thumbnails li:hover{background:var(--thumbnail-bg-active);color:var(--thumbnail-active)}#modal ul.thumbnails a{color:unset;display:flow-root;padding:.5rem 0;text-decoration:none}#modal ul.thumbnails img{height:48px;max-width:40%}#modal #backup-container #backup-stores{align-items:center;background:var(--darker-bg-color);border-radius:var(--rs);display:flex;flex-wrap:wrap;gap:var(--s8);justify-content:space-evenly;padding:var(--s4)}#modal #backup-container #backup-stores .backup-store{background:var(--darker-bg-color);border-radius:var(--rs);color:var(--darker-color);flex-grow:1;padding:var(--s6);white-space:nowrap}#modal #backup-container #backup-stores input[type=checkbox]{margin-top:0}#modal #backup-container #backup-stores label{display:inline-block;font-weight:400;margin-bottom:0}#modal #backup-container .input-container{background:var(--darker-bg-color);border-radius:var(--rs);display:flex;flex-wrap:wrap;justify-content:space-evenly;padding:var(--s6)}#modal #backup-container .input-container span{white-space:nowrap}#modal #broadcast-container #broadcast-channel-url-section{display:none}#modal #broadcast-container #broadcast-channel-url-section>label{width:100%}#modal #broadcast-container #broadcast-server-url{width:100%}#modal #broadcast-container #broadcast-channel-url{display:inline-block;margin-bottom:1rem;overflow-wrap:break-word}#modal #deploy-container input[type=checkbox]{margin-right:.7em}#modal #deploy-container .qrcode-container{display:flex;position:relative;transform:translateY(0) translateX(-50%)}#modal #embed-code{border-radius:var(--rs);height:12em !important;text-align:left}#modal #embed-code>pre{padding:.5em}#modal #embed-preview-container{align-items:center;border:1px solid #123;border-radius:var(--rs);display:flex;height:300px;justify-content:center;margin-bottom:1rem}#modal #embed-preview-iframe{border:0;border-radius:var(--rs);height:100%;width:100%}#modal #editor-settings-container #editor-settings-format-link{position:absolute;right:10%;top:.25rem}#modal #editor-settings-container #editor-settings-preview-container{height:250px !important;margin-bottom:1rem;max-height:250px}#modal #editor-settings-container .field-note{font-size:var(--s12);margin-top:-1rem}#modal .overflow-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#modal .qrcode-container{display:none;justify-content:center;left:50%;padding:1rem;position:absolute;transform:translateY(-16rem) translateX(-50%)}#modal .qrcode-container:has(img){background:var(--color95)}#modal #share-click-to-copy{cursor:pointer;font-size:var(--s14)}#modal #share-permanent-url input[type=checkbox]{margin-right:5px;transform:scale(0.8)}#modal #share-permanent-url label{display:inline;font-size:unset;font-weight:unset;margin:unset;text-align:unset;width:unset}#modal #share-screen ul{display:flex;flex-wrap:wrap;gap:var(--s8);justify-content:space-between;list-style:none}#modal #share-screen li{display:inherit;min-height:var(--s24);white-space:nowrap;width:calc(50% - var(--s4))}#modal #share-screen li a{align-items:center;background:var(--btn-modal-bg-color);border-radius:var(--rs);color:var(--light);display:inherit;font-size:var(--s14);height:32px;text-decoration:none;width:100%}#modal #share-screen li a:hover{background-color:var(--btn-modal-bg-active)}#modal #share-screen li .share-image-container{background:var(--color40);border-bottom-left-radius:var(--rs);border-top-left-radius:var(--rs);display:inherit;height:32px;margin-right:var(--s16);padding:var(--s4)}#modal #share-screen li .share-image-container i{height:var(--s24);width:var(--s24)}#modal #share-top-text{display:flex;flex-grow:1;font-size:var(--s14);justify-content:space-between;margin-bottom:var(--s8)}#modal .share-expiry{display:flex;flex-grow:1;margin-bottom:var(--s8)}#modal .share-expiry div{align-items:center;display:flex;flex-grow:1;justify-content:space-between;margin-bottom:var(--s8)}#modal .share-expiry div span{border-radius:var(--rs);font-size:var(--s12);padding:var(--s4) var(--s12)}#modal .share-short-url-expiry{display:none !important}#modal .short-url .share-encoded-url-expiry{display:none !important}#modal .short-url .share-short-url-expiry{display:flex !important}#modal #share-links-container{margin:0}#modal .template-default{align-items:center;display:flex}#modal .template-default .icon-file-template{margin:0 var(--s4)}#modal .template-default .default-template-label,#modal .template-default .template-default-link,#modal .template-default .template-remove-default-link{border-radius:var(--s4);color:var(--darker-color);display:inline-block;font-size:var(--s14);font-weight:normal;min-width:3em}#modal .template-default .default-template-label:hover,#modal .template-default .template-default-link:hover,#modal .template-default .template-remove-default-link:hover{text-decoration:underline}#modal #templates-user .loading{margin-top:3em}#modal #templates-user ul{height:-moz-fit-content;height:fit-content}#modal #test-editor-screen-container #test-editor.editor.custom-editor{height:50vh;max-height:unset}#modal .modal-screen-container.no-recent{height:100%}#modal ul.modal-docs{-moz-columns:2;columns:2;font-size:var(--s14);margin-bottom:1rem}#modal #welcome-screen-container{flex-direction:column;margin:1rem 1rem 2rem;max-height:calc(var(--font-size)*40)}#modal #welcome-screen-container.no-recent{height:calc(var(--font-size)*30)}#modal #welcome-screen-container li{white-space:nowrap}#modal #welcome-start .default-template-li{visibility:hidden}#modal #welcome-start .default-template-li .default-template{display:none;padding:var(--s4) var(--s12)}#modal #welcome-start #no-default-template{padding:var(--s4) var(--s12)}#modal #welcome-start #welcome-link-load-default{width:-moz-fit-content;width:fit-content}#modal #welcome-start #welcome-default-template-info{display:inline-block;width:-moz-fit-content;width:fit-content}#modal #welcome-start #welcome-default-template-info::after{display:none}#modal #welcome-recover{display:none;max-height:15em;overflow:hidden;transition:max-height .7s ease-out}#modal #welcome-recover.cancelled{max-height:0}#modal #welcome-recover .welcome-recover-content{background:var(--darker-bg-color);border-radius:var(--rs);color:var(--light);margin-bottom:1rem;padding:.5rem}#modal #welcome-recover li{font-size:var(--s14);margin:.5rem}#modal #welcome-recover .welcome-recover-actions{align-items:center;display:flex;font-size:var(--s14);margin:.5rem 0}#modal #welcome-recover .welcome-recover-actions a{color:var(--light);flex-grow:1;text-wrap:nowrap}#modal #welcome-recent{margin-bottom:1rem}#modal #welcome-show{align-items:center;background:var(--darker-bg-color);border-top-left-radius:var(--rs);border-top-right-radius:var(--rs);bottom:0;box-shadow:0 0 8px 1px #0006;color:var(--darker-color);display:flex;gap:var(--s4);justify-content:center;margin:0 1rem;padding:.5em 0;position:absolute;width:calc(100% - 2em)}#modal #welcome-show label{margin:0;width:unset}#modal #code-to-img-container{box-sizing:border-box;padding:0 10px;width:100%}#modal #code-to-img-container .modal-title{max-width:calc(100% - 3rem)}#modal #code-to-img-container .modal-screen-container{position:relative}#modal #code-to-img-container .modal-screen{align-items:center;display:flex;flex-direction:column;position:relative}#modal #code-to-img-container .modal-screen>label{align-self:flex-start;margin-bottom:2rem}#modal #code-to-img-container .modal-screen .wide-button{align-self:flex-start}#modal #code-to-img-container .code-link{font-size:var(--s14);position:absolute;top:.75rem}#modal #code-to-img-container .code-link#code-to-img-format-link{inset-inline-end:5%}#modal #code-to-img-container .code-link#code-to-img-copy-link{inset-inline-end:5%}#modal #code-to-img-container #code-to-img-preview-background{align-items:center;box-shadow:0 0 0 1px var(--link);box-sizing:border-box;display:flex;justify-content:center;margin:0;max-width:100%;position:relative}#modal #code-to-img-container #code-to-img-preview-container{border-radius:5px;box-sizing:border-box;overflow:hidden}#modal #code-to-img-container #code-to-img-preview-container.shadow{box-shadow:0 20px 68px rgba(0,0,0,.55)}#modal #code-to-img-container #code-to-img-preview-container code{border-radius:5px;overflow:hidden}#modal #code-to-img-container #code-to-img-preview-container pre{border-radius:5px;min-height:3em;min-width:150px;overflow:hidden;padding:1em;text-align:left}#modal #code-to-img-container #code-to-img-watermark{background-color:#ededed;border:#a9a9a9 1px solid;border-radius:3px;bottom:.5rem;color:#434343;font-size:.8rem;padding:.5rem;padding-top:.2rem;position:absolute;right:.5rem;transform:scale(0.9);transform-origin:bottom right}#modal #code-to-img-container #code-to-img-watermark.shadow{box-shadow:0 20px 68px rgba(0,0,0,.55)}#modal #code-to-img-container #code-to-img-watermark img{height:2em;margin-bottom:-0.7em}#modal #code-to-img-container #code-to-img-window-controls{display:flex;gap:1em;justify-content:space-between;margin-bottom:1em}#modal #code-to-img-container #code-to-img-window-controls .window-buttons{visibility:hidden}#modal #code-to-img-container #code-to-img-window-controls .window-title{height:1.2em;min-width:7em;overflow:hidden;text-align:center}#modal #code-to-img-container #presets-container{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;visibility:hidden}#modal #code-to-img-container #presets-container .preset{align-items:center;background-color:var(--dark-bg-color);border:var(--dark-bg-active) 1px solid;border-radius:var(--rs);box-sizing:content-box;cursor:pointer;display:flex;height:5em;justify-content:center;margin:2px;padding:.5em;padding-top:.2em;width:7em}#modal #code-to-img-container #presets-container .preset.active{border:var(--link) 3px solid;margin:0}#modal #code-to-img-container #presets-container .preset img{width:100%}#modal #code-to-img-container .accordion{margin-top:2rem}#modal #code-to-img-container .accordion .title.active+#presets-container{padding:20px 0;visibility:visible}#modal #code-to-img-container .accordion .panel input{margin-bottom:0}#modal #code-to-img-container .accordion .panel input[type=checkbox],#modal #code-to-img-container .accordion .panel input[type=range]{margin-inline:var(--s8)}#modal #code-to-img-container .accordion .panel input[type=range]{margin-bottom:var(--s8);width:calc(100% - var(--s8)*2)}#modal #code-to-img-container .accordion .panel>label:first-of-type{margin-top:1.5rem}#modal #code-to-img-container .accordion .panel>:last-child{margin-bottom:2rem}#modal #code-to-img-container .color-picker-container{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;width:100%}#modal #code-to-img-container .color-picker-container .clr-field{border-radius:var(--rs);overflow:hidden}#modal #code-to-img-container .color-picker-container input.color-picker{cursor:pointer}#modal #code-to-img-container .color-picker-container #code-to-img-bgDirection{width:6em}#modal #code-to-img-container #code-to-img-actions{display:flex;gap:var(--s24);width:100%}#modal #code-to-img-container #code-to-img-menu-btn{border-radius:50%;height:var(--s40);min-width:0;width:var(--s40)}#modal #code-to-img-container #code-to-img-menu-container{flex-grow:1;position:relative}#modal #code-to-img-container #code-to-img-share-menu{inset-inline-end:calc(100% + var(--s32)*2);min-width:150px;top:calc(-100% - var(--s20));transform:translateX(100%);width:-moz-fit-content;width:fit-content}#modal #code-to-img-container #code-to-img-share-menu a{padding:var(--s12)}@media only screen and (max-width: 480px){#modal #code-to-img-container #code-to-img-share-menu{transform:translateX(var(--s40))}}#modal .accordion .title{background-color:var(--btn-modal-bg-color);border:0;border-radius:var(--rs);color:var(--btn-modal-color);cursor:pointer;font-size:var(--s16);padding:var(--s10) var(--s16);text-align:start;transition:.4s;width:100%}#modal .accordion .title:hover,#modal .accordion .title.active{background-color:var(--btn-modal-bg-active);color:var(--btn-modal-active)}#modal .accordion .title::after{color:var(--btn-modal-color);content:"+";float:inline-end;font-weight:bold;margin-left:5px}#modal .accordion .title.active::after{content:"−"}#modal .accordion .panel{max-height:0;overflow:hidden;padding:2px 18px;transition:max-height .2s ease-out}@media only screen and (max-width: 768px){#modal #welcome-container .modal-screen-container{flex-wrap:nowrap;max-height:unset}#modal #welcome-container .modal-screen-container.no-recent{height:unset}#modal .modal-section{width:100%}#modal .modal-section ul.modal-docs{-moz-columns:1;columns:1}#modal .modal-section#welcome-recover{order:-1}#modal #about-screen-container .about-logo{order:-2}#modal #about-screen-container #about-info{order:-1}}#resources-container .modal-screen{align-items:flex-start;display:flex;flex-direction:column;flex-grow:.8;justify-content:space-around;width:100%}#resources-container textarea#external-stylesheets,#resources-container textarea#external-scripts{margin-bottom:1rem;width:100%}#resources-container #resources-textarea-container{margin-bottom:.5rem;width:100%}#resources-container #resources-result-container{align-self:flex-start;display:none;position:relative;width:100%}#resources-container #resources-search-results{background-color:var(--modal);border:1px solid var(--dark-bg-color);border-radius:var(--rs);box-shadow:0 3px 6px rgba(0,0,0,.18);list-style:none;margin-left:10%;padding:0;position:absolute;top:-1rem;width:80%;z-index:10}#resources-container #resources-search-results li{border-bottom:1px solid var(--dark-bg-color);padding:.5rem}#resources-container #resources-search-results li:last-child{border:0}#resources-container #resources-search-results .search-result-item-title{font-weight:bold;overflow:hidden;text-align:left;text-overflow:ellipsis;text-transform:capitalize;white-space:nowrap}#resources-container #resources-search-results .search-result-item-description{font-size:var(--s14);margin-bottom:var(--s8);overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}#resources-container #resources-search-results .search-result-item-error{color:#f44336;font-size:.9em;margin:.5em 0;text-align:left}#resources-container #resources-search-results .search-result-item-files{align-items:center;display:flex;gap:var(--s8);justify-content:flex-end;margin-bottom:var(--s8)}#resources-container #resources-search-results .search-result-item-files>span{display:flex;justify-content:center}#resources-container #resources-search-results .search-result-item-files>span:empty{display:none}#resources-container #resources-search-results .search-result-item-files .add-resource::after{content:" +"}#resources-container #resources-search-results .search-result-item-files .resource-added{background-color:#e6e6e6;color:green !important;cursor:default}#resources-container #resources-search-results .search-result-item-files .resource-added:active{transform:none !important}#resources-container #resources-search-results .search-result-item-files .resource-added::after{content:" ✔"}#resources-container #resources-search-results .search-result-item-files a{align-items:center;background:var(--btn-modal-bg-color);border:1px solid var(--btn-modal-border-color);border-radius:var(--rs);color:var(--btn-modal-color);display:flex;font-size:var(--s12);gap:var(--s8);padding:var(--s4);text-decoration:none}#resources-container #resources-search-results .search-result-item-files a:hover{background-color:var(--btn-modal-bg-active)}#resources-container #resources-search-results .search-result-item-files a:active{transform:translateY(1px)}#resources-container #fonts-container{align-items:center;display:flex;justify-content:space-between;margin-bottom:1em;width:100%}#resources-container #fonts-container select{margin:0;width:80%}#resources-container #fonts-container .btn{background:var(--btn-modal-bg-color);border:1px solid var(--btn-modal-border-color);border-radius:var(--rs);box-shadow:0 1px 2px rgba(0,0,0,.176);color:var(--btn-modal-color);cursor:pointer;height:32px;min-width:7em}#resources-container #fonts-container .btn:hover,#resources-container #fonts-container .btn:active{background:var(--btn-modal-bg-active);box-shadow:none;color:var(--btn-modal-active);transform:none;transform:translateY(1px)}#keyboard-shortcuts-container #keyboard-shortcuts-table-container{display:flex;justify-content:center}#keyboard-shortcuts-container table{border-collapse:collapse;min-width:80%}#keyboard-shortcuts-container thead{border-bottom:2px solid var(--btn-modal-bg-active)}#keyboard-shortcuts-container thead th{font-size:var(--s18);font-weight:bold;padding:var(--s12);text-align:start}#keyboard-shortcuts-container tbody{border-bottom:2px solid var(--btn-modal-bg-active)}#keyboard-shortcuts-container tbody tr{border-top:.5px solid var(--btn-modal-bg-active)}#keyboard-shortcuts-container tbody tr:nth-child(odd){background:var(--stripes-bg-color)}#keyboard-shortcuts-container tbody td{font-size:var(--s14);padding:var(--s8) var(--s12) var(--s10)}@media only screen and (max-width: 1024px){#modal{min-height:23rem}#modal.small{min-height:3rem;width:23rem}#modal .modal-search #list-container #language-filter,#modal .modal-search #sort-by-label span,#modal .modal-search .tagify{display:none !important}}@media only screen and (max-width: 768px){#modal #list-container .modified-date span{display:none !important}#modal ul.thumbnails li{width:calc(33% - var(--s4))}#modal input#search-assets,#modal input#search-projects{width:50%}}@media only screen and (max-width: 480px){#modal .modal-screen-container{padding:1rem 0 0}#modal .modal-section{margin-bottom:0;padding:0;width:100%}#modal #welcome-recover{order:-1}#modal .welcome-recover-content li.smaller{display:inherit;flex-direction:row;flex-wrap:wrap}#modal .open-list li{max-width:unset !important}#modal .modal-search #sort-by-label{display:none}#modal .modal-search input#search-assets,#modal .modal-search input#search-projects,#modal .modal-search input#search-snippets{display:none}#modal .modal-search .sort-time,#modal .modal-search .sort-title{display:none}#modal .description ul{display:flex;flex-direction:column;flex-wrap:wrap;margin:.5em}#modal .description li{width:unset}#modal .modal-tabs{flex-direction:column;gap:unset}#modal .modal-tabs li{border-radius:0;width:unset}#modal .modal-tabs li:first-child{border-top-left-radius:var(--rs);border-top-right-radius:var(--rs)}#modal .modal-tabs li:last-child{border-bottom-left-radius:var(--rs);border-bottom-right-radius:var(--rs)}#modal ul.thumbnails li{width:calc(50% - var(--s4))}#modal.large{width:94vw}}@keyframes disappear{0%{height:4em;margin:10px auto;opacity:1}100%{height:0;margin:0 auto;opacity:0}}:root:not(.light) #modal #resources-container #resources-search-results{background-color:var(--resources-search-bg);border:var(--resources-search-border);color:var(--resources-search-color)}:root:not(.light) .accordion .title{border:0;color:#444;cursor:pointer;font-size:15px;padding:18px;text-align:left;transition:.4s;width:100%}:root:not(.light) .accordion .title:hover,:root:not(.light) .accordion .title.active{background-color:#ccc}:root:not(.light) .accordion .title::after{color:#777;content:"+";float:right;font-weight:bold;margin-left:5px}:root:not(.light) .accordion .title.active::after{content:"−"}:root:not(.light) .accordion .panel{max-height:0;overflow:hidden;padding:0 18px;transition:max-height .2s ease-out}.embed #modal{transform:scale(0.8)}.embed #modal.small{width:300px !important}#css-preset-menu a.active::after{color:gray;content:" ✔"}@keyframes spin{to{transform:rotate(360deg)}}#tools-pane-loading{margin-bottom:3px}.loading #show-result{display:inline-block;height:30px;width:30px}.loading #show-result::before{left:13px;position:relative;top:13px}.loading #show-result img{visibility:hidden}#tools-pane-loading::before,.loading #show-result::before{animation:spin 1s infinite linear;border-radius:2.5px;box-shadow:6.25px 0 0 0 var(--color10),5px 3.5px 0 0 var(--color30),1.75px 5.75px 0 0 var(--color50),-1.75px 5.75px 0 0 var(--color80),-5px 3.5px 0 0 var(--color95);content:"";display:block;height:2.5px;width:2.5px}:root.light #tools-pane-loading::before,:root.light .loading #show-result::before{box-shadow:6.25px 0 0 0 var(--color95),5px 3.5px 0 0 var(--color80),1.75px 5.75px 0 0 var(--color50),-1.75px 5.75px 0 0 var(--color30),-5px 3.5px 0 0 var(--color10)}.language-item{position:relative}.language-item a{display:block !important;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap !important}.tooltip{display:inline-block;opacity:.4;padding:6px 8px}.tooltip:hover{opacity:1}.tooltip svg{height:var(--s16);padding:2px;width:var(--s16)}.embed #toolbar{height:var(--toolbar-height);justify-content:space-between}.embed #toolbar #logo{inset-block-start:var(--s6);inset-inline-end:var(--s6);position:absolute}.embed #toolbar #logo img{width:28px}.embed #toolbar .toolbar-app{justify-content:flex-start}.embed #toolbar .toolbar-app [id^=app-menu-container-],.embed #toolbar .toolbar-app [id^=app-menu-button-],.embed #toolbar .toolbar-app #light-theme-button,.embed #toolbar .toolbar-app #dark-theme-button{display:none !important}.embed #toolbar .toolbar-app .menu{display:inherit;margin:0 .5em 0 0}.embed #toolbar .toolbar-app .menu .menu-text{display:none}.embed #toolbar .toolbar-app .menu:hover{color:var(--link)}.embed #toolbar .toolbar-app #select-editor{position:unset}.embed #toolbar .toolbar-app .language-menu-button{display:none !important}.embed #toolbar .toolbar-render{flex-grow:0;justify-content:flex-end;margin-inline-end:50px;min-width:70px;width:auto}.embed #toolbar .toolbar-render #project-title{display:none !important}.embed #toolbar .toolbar-render #fullscreen-button,.embed #toolbar .toolbar-render:not(.no-result) #result-button{display:flex !important}.embed #toolbar .toolbar-render #share-button,.embed #toolbar .toolbar-render #login-link,.embed #toolbar .toolbar-render #logout-link{display:none}.embed #focus-btn,.embed #copy-as-url-btn,.embed #code-to-img-btn,.embed #settings-button,.embed #editor-settings-btn,.embed #project-info-btn,.embed #custom-settings-btn{display:none}.embed #editor-status{cursor:default}.embed #editor-container{height:calc(100% - var(--toolbar-height))}@media only screen and (max-width: 480px){.embed #toolbar .toolbar-app,.embed #toolbar .toolbar-render{height:calc(var(--toolbar-height))}.embed #toolbar .editor-title{width:73px}.embed #toolbar #app-menu-button-i18n,.embed #toolbar #light-theme-button,.embed #toolbar #dark-theme-button{display:none !important}}.lite-mode #editor-tools{display:none}.simple-mode .editor-title:not(.active),.simple-mode.embed #toolbar .toolbar-render #result-button,.simple-mode.embed #toolbar .toolbar-render #fullscreen-button,.simple-mode.embed #toolbar .toolbar-render #app-menu-button-i18n,.simple-mode.embed #toolbar .toolbar-render #light-theme-button,.simple-mode.embed #toolbar .toolbar-render #dark-theme-button,.simple-mode #editors #editor-tools,.simple-mode #console-input,.simple-mode #result-popup-btn,.simple-mode #broadcast-status-btn{display:none !important}.simple-mode #toolbar{margin-bottom:-9px;transform:scale(0.8);transform-origin:left top;width:125%}.simple-mode #toolbar #select-editor{width:100%}.simple-mode #toolbar #select-editor .editor-title.active{background-color:unset;border:0;color:var(--editor-title-simple-color);display:flex}.simple-mode #toolbar .toolbar-render div:first-child{flex-grow:0}.simple-mode #editor-container{flex-grow:1}.simple-mode #tools-pane-bar{font-size:var(--s12)}.simple-mode .tools-pane-title.has-mark .mark{display:none !important}.focus-mode #app-menu-button-project,.focus-mode #app-menu-button-settings,.focus-mode #app-menu-button-help,.focus-mode .language-menu-button,.focus-mode #login-link,.focus-mode #logout-link,.focus-mode #share-button,.focus-mode #result-button,.focus-mode #fullscreen-button,.focus-mode #light-theme-button,.focus-mode #dark-theme-button,.focus-mode #app-menu-button-i18n,.focus-mode #settings-button,.focus-mode .tools-pane-title:not(.console),.focus-mode .tool-buttons{visibility:hidden}.focus-mode #focus-btn{opacity:.5;visibility:visible !important}.focus-mode #focus-btn:hover{opacity:1}.focus-mode #editor-tools{bottom:0;position:absolute}@media only screen and (max-width: 768px){.focus-mode #toolbar #run-button,.focus-mode #toolbar #share-button{margin:0 var(--s4)}.focus-mode #toolbar #settings-button,.focus-mode #toolbar #login-link>span,.focus-mode #toolbar #logout-link>span{display:none !important}}.snackbar--button:focus{outline:auto !important}ninja-keys{--ninja-text-color: var(--dropdown-color);--ninja-modal-background: var(--dropdown-bg-color);--ninja-accent-color: var(--dropdown-color);--ninja-selected-text-color: var(--dropdown-active);--ninja-selected-background: var(--dropdown-bg-active);--ninja-secondary-text-color: var(--btn-color);--ninja-secondary-background-color: var(--btn-bg-color);--ninja-placeholder-color: var(--color70);--ninja-footer-background: var(--dropdown-bg-color);--ninja-overflow-background: var(--overlay-bg-color);font-family:Inter,system-ui,sans-serif}ninja-keys.dark{--ninja-placeholder-color: var(--color40)}ninja-keys::part(ninja-selected){border-inline-end:none}ninja-keys::part(ninja-action__content){color:var(--color70)}ninja-keys::part(ninja-hotkey){margin-inline-end:.5em}ninja-keys::part(ninja-action__highlight){background-color:#ff0;font-weight:bold;padding:0}ninja-keys::part(ninja-action__content){border-top:0;padding-top:0}ninja-keys::part(actions-list)::-webkit-scrollbar{height:var(--scrollbar-width-legacy, 8px);width:var(--scrollbar-width-legacy, 8px)}ninja-keys::part(actions-list)::-webkit-scrollbar-track{background:var(--scrollbar-color-track);background:transparent;border-radius:8px}ninja-keys::part(actions-list)::-webkit-scrollbar-corner{background:transparent}ninja-keys::part(actions-list)::-webkit-scrollbar-thumb{background:var(--scrollbar-color-thumb);border-radius:8px}ninja-keys::part(actions-list)::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-hover-color)}ninja-keys::part(actions-list)::-webkit-scrollbar-thumb:active{background:var(--scrollbar-active-color)}ninja-keys::part(actions-list)::-webkit-scrollbar-button{display:none}.cm-wrap{height:100%}.cm-scroller{overflow:auto}#console-input .cm-gutter{display:none !important}#console-input .cm-gutters #console-input-indicator{margin-left:3px;margin-top:3px}.cm-ghostText,.cm-ghostText *{cursor:pointer;filter:grayscale(20%);opacity:.6}.cm-ghostText:hover{background:#eee}.prism{margin:0 !important;max-height:100% !important}.prism#console-input{display:none !important}.prism#console-input>pre{padding-left:1em !important}.prism .code-toolbar,.prism pre{height:100% !important;margin:0 !important;max-height:100% !important}.prism .code-toolbar .codeblock,.prism pre .codeblock{padding-right:2em !important}.prism code{height:100% !important;margin:0 !important;max-height:100% !important;overflow:auto;padding-bottom:1em !important;padding-top:2px !important;top:2px !important}.prism.codejar pre{box-sizing:border-box;cursor:text;padding-top:0 !important}.prism.codejar code{white-space:nowrap !important}.prism .token.comment{font-style:italic}pre[class*=language-].line-numbers{counter-reset:linenumber;padding-left:3.8em;position:relative}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{border-right:1px solid #999;font-size:100%;left:-3.8em;letter-spacing:-1px;pointer-events:none;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:3em}.line-numbers-rows>span{counter-increment:linenumber;display:block}.line-numbers-rows>span::before{color:#999;content:counter(linenumber);display:block;padding-right:.8em;text-align:right}.autoComplete_wrapper{display:inline;position:relative}.autoComplete_wrapper>input::-moz-placeholder{color:var(--link);-moz-transition:all .3s ease;transition:all .3s ease}.autoComplete_wrapper>input::placeholder{color:var(--link);transition:all .3s ease}.autoComplete_wrapper>ul{background-color:var(--dropdown-bg-color);border:var(--dropdown-border);border-radius:var(--rs);left:0;margin:.5rem 0 0;max-height:226px;overflow-y:scroll;padding:var(--s8) !important;padding-inline-end:0 !important;position:absolute;right:0;top:100%;z-index:1000}.autoComplete_wrapper>ul>li{background-color:var(--dropdown-bg-color);border-radius:var(--rs);color:var(--dropdown-color);cursor:pointer;font-size:var(--dropdown-font);list-style:none;overflow:hidden;padding:var(--s10) var(--s20);text-align:left;text-overflow:ellipsis;transition:all .1s ease-in-out;transition:all .2s ease;white-space:nowrap}.autoComplete_wrapper>ul>li:hover,.autoComplete_wrapper>ul>li[aria-selected=true]{background-color:var(--dropdown-bg-active) !important;color:var(--dropdown-active) !important}.autoComplete_wrapper>ul>li:hover mark,.autoComplete_wrapper>ul>li[aria-selected=true] mark{color:var(--light) !important}.autoComplete_wrapper>ul>li mark{background-color:var(--text-help-bg-color);color:var(--text-help-color);font-weight:bold}@supports(-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox],input[type=radio]{--b: var(--input-bg-color);--inner-active: var(--input-active);--inner-uncheck: var(--input-color);--focus: 1px var(--input-border-active);--border-hover: var(--input-border-active);--background: var(--color2);--disabled: var(--color20, #f6f8ff);--disabled-inner: var(--color30, #e1e6f9);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--b);border:1px solid var(--input-border-color);cursor:pointer;display:inline-block;height:20px;margin:0;position:relative;transition:background .3s,border-color .3s,box-shadow .2s;vertical-align:top}input[type=checkbox]::after,input[type=radio]::after{content:"";display:block;left:0;position:absolute;top:0;transition:transform var(--d-t, 0.3s) var(--d-t-e, ease),opacity var(--d-o, 0.2s)}input[type=checkbox]:checked,input[type=radio]:checked{--b: var(--input-bg-active);--border-active: var(--input-bg-active);--d-o: 0.3s;--d-t: 0.6s;--d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2)}input[type=checkbox]:disabled,input[type=radio]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.8}input[type=checkbox]:disabled :checked,input[type=radio]:disabled :checked{--b: var(--disabled-inner);--border-active: var(--inner-uncheck)}input[type=checkbox]:disabled+label,input[type=radio]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled),input[type=radio]:hover:not(:checked):not(:disabled){--border-active: var(--input-border-active)}input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch),input[type=radio]:not(.switch){width:20px}input[type=checkbox]:not(.switch)::after,input[type=radio]:not(.switch)::after{opacity:0}input[type=checkbox]:not(.switch):checked::after,input[type=radio]:not(.switch):checked::after{--o: 1;opacity:var(--o)}input[type=checkbox]+label,input[type=radio]+label{cursor:pointer;display:inline-block;font-size:14px;line-height:21px;margin-left:4px;vertical-align:top}input[type=checkbox]:not(.switch){border-radius:var(--rs)}input[type=checkbox]:not(.switch)::after{border:2px solid var(--input-active);border-left:0;border-top:0;height:9px;left:7px;top:4px;transform:rotate(var(--r, 20deg));width:5px}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{border-radius:11px;width:38px}input[type=checkbox].switch::after{background:var(--input-switch-color);border-radius:50%;height:15px;left:2px;top:2px;transform:translateX(var(--x, 0));width:15px}input[type=checkbox].switch:checked{--x: 18px}input[type=checkbox].switch:checked:checked::after{--x: 18px;background:var(--input-switch-active)}input[type=checkbox].switch:disabled:not(:checked)::after{opacity:.5}input[type=radio]{border-radius:50%}input[type=radio]::after{background:var(--inner-active);border-radius:50%;height:19px;opacity:0;transform:scale(var(--s, 0.8));width:19px}input[type=radio]:checked{--s: 0.5}}body .modal-tabs li.active{z-index:1}body #console .luna-console-error{z-index:40}body #editor-container{z-index:45}body #editor-tools{z-index:49}body #toolbar{z-index:500}body .copy-button{z-index:900}body .menu-scroller{z-index:1000}body .dropdown-menu{z-index:1001}body .overflowingContentWidgets{z-index:1500}body #overlay,body #modal-container,body #modal-container .close-button{z-index:2000}body #result-mode-drawer{z-index:2500}body ninja-keys{z-index:2700}body .snackbars,body .snackbars-left,body .snackbars-right{z-index:3000} \ No newline at end of file diff --git a/livecodes/app.75bc99aab008353314f5a05ba016f892.js b/livecodes/app.75bc99aab008353314f5a05ba016f892.js new file mode 100644 index 0000000..2731fce --- /dev/null +++ b/livecodes/app.75bc99aab008353314f5a05ba016f892.js @@ -0,0 +1,202 @@ +var YM=Object.create;var pm=Object.defineProperty;var QM=Object.getOwnPropertyDescriptor;var XM=Object.getOwnPropertyNames;var eI=Object.getPrototypeOf,tI=Object.prototype.hasOwnProperty;var T=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var rI=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of XM(t))!tI.call(e,n)&&n!==r&&pm(e,n,{get:()=>t[n],enumerable:!(o=QM(t,n))||o.enumerable});return e};var y=(e,t,r)=>(r=e!=null?YM(eI(e)):{},rI(t||!e||!e.__esModule?pm(r,"default",{value:e,enumerable:!0}):r,e));var Pa=T((nD,bs)=>{var oI=function(){var e=String.fromCharCode,t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",o={};function n(i,a){if(!o[i]){o[i]={};for(var l=0;l>>8,l[d*2+1]=m%256}return l},decompressFromUint8Array:function(i){if(i==null)return s.decompress(i);for(var a=new Array(i.length/2),l=0,d=a.length;l>1}else{for(c=1,d=0;d>1}g--,g==0&&(g=Math.pow(2,S),S++),delete h[f]}else for(c=m[f],d=0;d>1;g--,g==0&&(g=Math.pow(2,S),S++),m[p]=w++,f=String(v)}if(f!==""){if(Object.prototype.hasOwnProperty.call(h,f)){if(f.charCodeAt(0)<256){for(d=0;d>1}else{for(c=1,d=0;d>1}g--,g==0&&(g=Math.pow(2,S),S++),delete h[f]}else for(c=m[f],d=0;d>1;g--,g==0&&(g=Math.pow(2,S),S++)}for(c=2,d=0;d>1;for(;;)if(b=b<<1,E==a-1){u.push(l(b));break}else E++;return u.join("")},decompress:function(i){return i==null?"":i==""?null:s._decompress(i.length,32768,function(a){return i.charCodeAt(a)})},_decompress:function(i,a,l){var d=[],c,m=4,h=4,v=3,p="",f=[],g,w,S,u,b,E,k,L={val:l(0),position:a,index:1};for(g=0;g<3;g+=1)d[g]=g;for(S=0,b=Math.pow(2,2),E=1;E!=b;)u=L.val&L.position,L.position>>=1,L.position==0&&(L.position=a,L.val=l(L.index++)),S|=(u>0?1:0)*E,E<<=1;switch(c=S){case 0:for(S=0,b=Math.pow(2,8),E=1;E!=b;)u=L.val&L.position,L.position>>=1,L.position==0&&(L.position=a,L.val=l(L.index++)),S|=(u>0?1:0)*E,E<<=1;k=e(S);break;case 1:for(S=0,b=Math.pow(2,16),E=1;E!=b;)u=L.val&L.position,L.position>>=1,L.position==0&&(L.position=a,L.val=l(L.index++)),S|=(u>0?1:0)*E,E<<=1;k=e(S);break;case 2:return""}for(d[3]=k,w=k,f.push(k);;){if(L.index>i)return"";for(S=0,b=Math.pow(2,v),E=1;E!=b;)u=L.val&L.position,L.position>>=1,L.position==0&&(L.position=a,L.val=l(L.index++)),S|=(u>0?1:0)*E,E<<=1;switch(k=S){case 0:for(S=0,b=Math.pow(2,8),E=1;E!=b;)u=L.val&L.position,L.position>>=1,L.position==0&&(L.position=a,L.val=l(L.index++)),S|=(u>0?1:0)*E,E<<=1;d[h++]=e(S),k=h-1,m--;break;case 1:for(S=0,b=Math.pow(2,16),E=1;E!=b;)u=L.val&L.position,L.position>>=1,L.position==0&&(L.position=a,L.val=l(L.index++)),S|=(u>0?1:0)*E,E<<=1;d[h++]=e(S),k=h-1,m--;break;case 2:return f.join("")}if(m==0&&(m=Math.pow(2,v),v++),d[k])p=d[k];else if(k===h)p=w+w.charAt(0);else return null;f.push(p),d[h++]=w+p.charAt(0),m--,w=p,m==0&&(m=Math.pow(2,v),v++)}}};return s}();typeof bs<"u"&&bs!=null&&(bs.exports=oI)});var xo=T((Ql,Eb)=>{var Gj=Object.prototype.hasOwnProperty;Ql=function(e,t){return Gj.call(e,t)};Eb.exports=Ql});var Ae=T((ui,Lb)=>{var Jj=xo();Object.keys?ui=Object.keys:ui=function(e){var t=[];for(var r in e)Jj(e,r)&&t.push(r);return t};Lb.exports=ui});var Eo=T((mi,kb)=>{var Kj=Ae();mi=function(e){return Zj.test(e)?e.replace(Yj,Qj):e};var Tb=mi.map={"&":"&","<":"<",">":">",'"':""","'":"'","`":"`"},Cb="(?:"+Kj(Tb).join("|")+")",Zj=new RegExp(Cb),Yj=new RegExp(Cb,"g"),Qj=function(e){return Tb[e]};kb.exports=mi});var Ye=T((Xl,Mb)=>{Xl=function(e){return e==null?"":e.toString()};Mb.exports=Xl});var jb=T((ec,Ib)=>{ec=function(e,t,r){return Array.prototype.indexOf.call(e,t,r)};Ib.exports=ec});var Et=T((tc,Ub)=>{var Xj=Object.prototype.toString;tc=function(e){return Xj.call(e)};Ub.exports=tc});var ie=T((rc,Ab)=>{var e1=Et();rc=function(e){return e1(e)==="[object String]"};Ab.exports=rc});var rt=T((oc,Pb)=>{var t1=Et();oc=function(e){return t1(e)==="[object Number]"};Pb.exports=oc});var Be=T((nc,Hb)=>{var r1=Et();nc=function(e){var t=r1(e);return t==="[object Function]"||t==="[object GeneratorFunction]"||t==="[object AsyncFunction]"};Hb.exports=nc});var Zt=T((sc,qb)=>{var o1=rt(),n1=Be(),s1=Math.pow(2,53)-1;sc=function(e){if(!e)return!1;var t=e.length;return o1(t)&&t>=0&&t<=s1&&!n1(e)};qb.exports=sc});var Me=T((ic,Nb)=>{ic=function(e){return e===void 0};Nb.exports=ic});var lc=T((ac,Ob)=>{var i1=Me();ac=function(e,t,r){if(i1(t))return e;switch(r??3){case 1:return function(o){return e.call(t,o)};case 3:return function(o,n,s){return e.call(t,o,n,s)};case 4:return function(o,n,s,i){return e.call(t,o,n,s,i)}}return function(){return e.apply(t,arguments)}};Ob.exports=ac});var Q=T((cc,Db)=>{var a1=Zt(),l1=Ae(),c1=lc();cc=function(e,t,r){t=c1(t,r);var o,n;if(a1(e))for(o=0,n=e.length;o{var d1=Q();dc=function(e){var t=[];return d1(e,function(r){t.push(r)}),t};Rb.exports=dc});var Pe=T((pc,Bb)=>{var p1=jb(),u1=ie(),m1=Zt(),f1=_b();pc=function(e,t){return u1(e)?e.indexOf(t)>-1:(m1(e)||(e=f1(e)),p1(e,t)>=0)};Bb.exports=pc});var Lt=T((uc,$b)=>{uc=function(e,t){return e.indexOf(t)===0};$b.exports=uc});var fc=T((mc,Fb)=>{var g1=Ye();mc=function(e){return g1(e).replace(h1,function(t){switch(t){case'"':case"'":case"\\":return"\\"+t;case` +`:return"\\n";case"\r":return"\\r";case"\u2028":return"\\u2028";case"\u2029":return"\\u2029"}})};var h1=/["'\\\n\r\u2028\u2029]/g;Fb.exports=mc});var hc=T((gc,zb)=>{gc=function(e,t){var r=e.length-t.length;return r>=0&&e.indexOf(t,r)===r};zb.exports=gc});var ot=T((fi,Wb)=>{var y1=Et();Array.isArray?fi=Array.isArray:fi=function(e){return y1(e)==="[object Array]"};Wb.exports=fi});var Gb=T((yc,Vb)=>{var v1=Et();yc=function(e){return v1(e)==="[object Arguments]"};Vb.exports=yc});var gi=T((vc,Jb)=>{var w1=Zt(),b1=ot(),S1=ie(),x1=Gb(),E1=Ae();vc=function(e){return e==null?!0:w1(e)&&(b1(e)||S1(e)||x1(e))?e.length===0:E1(e).length===0};Jb.exports=vc});var hi=T((wc,Zb)=>{var L1=Me(),Kb=Q();wc=function(e,t){return function(r){return Kb(arguments,function(o,n){if(n!==0){var s=e(o);Kb(s,function(i){(!t||L1(r[i]))&&(r[i]=o[i])})}}),r}};Zb.exports=wc});var $e=T((bc,Yb)=>{bc=function(e){var t=typeof e;return!!e&&(t==="function"||t==="object")};Yb.exports=bc});var yi=T((Sc,eS)=>{var T1=$e(),C1=Be(),Qb=Object.getPrototypeOf,Xb={}.constructor;Sc=function(e){if(T1(e)){if(Qb)return Qb(e);var t=e.__proto__;if(t||t===null)return t;if(C1(e.constructor))return e.constructor.prototype;if(e instanceof Xb)return Xb.prototype}};eS.exports=Sc});var rS=T((xc,tS)=>{var k1=Ae(),M1=hi();xc=M1(k1);tS.exports=xc});var nS=T((Ec,oS)=>{var I1=Ae();Ec=function(e,t){var r=I1(t),o=r.length;if(e==null)return!o;e=Object(e);for(var n=0;n{var j1=rS(),U1=nS();Lc=function(e){return e=j1({},e),function(t){return U1(t,e)}};sS.exports=Lc});var lS=T((Tc,aS)=>{Tc=function(e){return e};aS.exports=Tc});var vi=T((Cc,cS)=>{var A1=xo(),P1=ot();Cc=function(e,t){if(P1(e))return e;if(t&&A1(t,e))return[e];var r=[];return e.replace(H1,function(o,n,s,i){r.push(s?i.replace(q1,"$1"):n||o)}),r};var H1=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,q1=/\\(\\)?/g;cS.exports=Cc});var Mc=T((kc,dS)=>{var N1=Me(),O1=vi();kc=function(e,t){t=O1(t,e);var r;for(r=t.shift();!N1(r);){if(e=e[r],e==null)return;r=t.shift()}return e};dS.exports=kc});var uS=T((Ic,pS)=>{var D1=ot(),R1=Mc();Ic=function(e){return D1(e)?function(t){return R1(t,e)}:_1(e)};function _1(e){return function(t){return t?.[e]}}pS.exports=Ic});var Nr=T((jc,mS)=>{var B1=Be(),$1=$e(),F1=ot(),z1=lc(),W1=iS(),V1=lS(),G1=uS();jc=function(e,t,r){return e==null?V1:B1(e)?z1(e,t,r):$1(e)&&!F1(e)?W1(e):G1(e)};mS.exports=jc});var Lo=T((Uc,fS)=>{var J1=Nr(),K1=Q();Uc=function(e,t,r){var o=[];return t=J1(t,r),K1(e,function(n,s,i){t(n,s,i)&&o.push(n)}),o};fS.exports=Uc});var bn=T((Ac,gS)=>{var Z1=Lo();Ac=function(e,t){return t=t||Y1,Z1(e,function(r,o,n){for(var s=n.length;++o{var hS=Ae(),Q1=yi(),X1=bn(),Pc=Object.getOwnPropertyNames,yS=Object.getOwnPropertySymbols;Hc=function(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},r=t.prototype,o=r===void 0?!0:r,n=t.unenumerable,s=n===void 0?!1:n,i=t.symbol,a=i===void 0?!1:i,l=[];if((s||a)&&Pc){var d=hS;s&&Pc&&(d=Pc);do l=l.concat(d(e)),a&&yS&&(l=l.concat(yS(e)));while(o&&(e=Q1(e))&&e!==Object.prototype);l=X1(l)}else if(o)for(var c in e)l.push(c);else l=hS(e);return l};vS.exports=Hc});var Yt=T((qc,wS)=>{var eU=hi(),tU=Sn();qc=eU(tU,!0);wS.exports=qc});var To=T((Nc,bS)=>{var rU=Yt(),oU=Me();Nc=function(e,t){var r=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{};rU(r,nU);var o=r.ellipsis,n=r.separator,s=e.length;if(t>s)return e;var i=t-o.length;if(i<1)return o;var a=e.slice(0,i);if(oU(n))return a+o;if(e.indexOf(n,i)!==i){var l=a.lastIndexOf(n);l>-1&&(a=a.slice(0,l))}return a+o};var nU={ellipsis:"..."};bS.exports=Nc});var Co=T((Oc,SS)=>{Oc=function(e){return e.length<1?e:e[0].toUpperCase()+e.slice(1)};SS.exports=Oc});var dt=T((Dc,ES)=>{var sU=Nr(),iU=Ae(),aU=Zt();Dc=function(e,t,r){t=sU(t,r);for(var o=!aU(e)&&iU(e),n=(o||e).length,s=Array(n),i=0;i{var lU=/^\s+/;Rc=function(e,t){if(t==null)return e.trimLeft?e.trimLeft():e.replace(lU,"");for(var r=0,o=e.length,n=t.length,s=!0,i,a;s&&r=o?"":e.substr(r,o)};LS.exports=Rc});var kS=T((_c,CS)=>{_c=function(e,t){if(t==null){if(e.trimRight)return e.trimRight();t=` \r + \f\v`}for(var r=e.length-1,o=t.length,n=!0,s,i;n&&r>=0;)for(n=!1,s=-1,i=e.charAt(r);++s=0?e.substring(0,r+1):""};CS.exports=_c});var nt=T((Bc,MS)=>{var cU=TS(),dU=kS();Bc=function(e,t){return t==null&&e.trim?e.trim():cU(dU(e,t),t)};MS.exports=Bc});var wi=T(($c,IS)=>{$c=typeof window=="object"&&typeof document=="object"&&document.nodeType===9;IS.exports=$c});var _t=T((Fc,jS)=>{var pU=wi();Fc=pU?window:global;jS.exports=Fc});var En=T((zc,US)=>{zc=function(e){var t=e?e.length:0;if(t)return e[t-1]};US.exports=zc});var PS=T((Wc,AS)=>{var uU=Q(),mU=Me(),fU=Be();Wc=function(e,t){mU(t)&&(t=!0);var r=fU(t),o={};return uU(e,function(n){o[n]=r?t(n):t}),o};AS.exports=Wc});var Qt=T((Vc,HS)=>{var gU=Ye();Vc=function(e){return gU(e).toLocaleLowerCase()};HS.exports=Vc});var RS=T((Gc,DS)=>{var bi=En(),hU=PS(),Si=Lt(),qS=Qt();Gc=function(e,t){for(var r=[],o,n=e;e;){if(o=!0,!bi(r)||!wU[bi(r)]){if(Si(e,"");s>=0&&(t.comment&&t.comment(e.substring(4,s)),e=e.substring(s+3),o=!1)}else if(Si(e,"]*>")).exec(e);if(m){var h=e.substring(0,m.index);e=e.substring(m.index+m[0].length),h&&t.text&&t.text(h)}p("",bi(r))}if(n===e)throw Error("Parse Error: "+e);n=e}p();function v(f,g,w,S){if(g=qS(g),S=!!S,S||r.push(g),t.start){var u={};w.replace(vU,function(b,E,k,L,P){u[E]=k||L||P||""}),t.start(g,u,S)}}function p(f,g){g=qS(g);var w;if(!g)w=0;else for(w=r.length-1;w>=0&&r[w]!==g;w--);if(w>=0){for(var S=r.length-1;S>=w;S--)t.end&&t.end(r[S]);r.length=w}}};var yU=/^\s]+))?)*)\s*(\/?)>/i,NS=/^<\/([-A-Za-z0-9_]+)[^>]*>/,OS=/^<([-A-Za-z0-9_]+)((?:\s+[-A-Za-z0-9_:@.]+(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/i,vU=/([-A-Za-z0-9_:@.]+)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g,wU=hU("script,style".split(","));DS.exports=Gc});var pt=T((Jc,_S)=>{var bU=hi(),SU=Sn();Jc=bU(SU);_S.exports=Jc});var st=T((Kc,BS)=>{var xU=Zt(),EU=dt(),LU=ot(),TU=ie();Kc=function(e){return e?LU(e)?e:xU(e)&&!TU(e)?EU(e):[e]:[]};BS.exports=Kc});var Yc=T((Zc,FS)=>{var CU=$e();Zc=function(e){if(!CU(e))return{};if($S)return $S(e);function t(){}return t.prototype=e,new t};var $S=Object.create;FS.exports=Zc});var WS=T((Qc,zS)=>{var kU=Yc();Qc=function(e,t){e.prototype=kU(t.prototype)};zS.exports=Qc});var ed=T((Xc,VS)=>{var MU=Be();Xc=typeof wx<"u"&&MU(wx.openLocation);VS.exports=Xc});var Xt=T((xi,YS)=>{var GS=pt(),JS=st(),KS=WS(),IU=Mc(),jU=ed();xi=function(e,t){return UU.extend(e,t)};function ZS(e,t,r){r=r||{};var o=t.className||IU(t,"initialize.name")||"";delete t.className;var n=function(){var s=JS(arguments);return this.initialize?this.initialize.apply(this,s)||this:this};if(!jU)try{n=new Function("toArr","return function "+o+"(){var args = toArr(arguments);return this.initialize ? this.initialize.apply(this, args) || this : this;};")(JS)}catch{}return KS(n,e),n.prototype.constructor=n,n.extend=function(s,i){return ZS(n,s,i)},n.inherits=function(s){KS(n,s)},n.methods=function(s){return GS(n.prototype,s),n},n.statics=function(s){return GS(n,s),n},n.methods(t).statics(r),n}var UU=xi.Base=ZS(Object,{className:"Base",callSuper:function(e,t,r){var o=e.prototype[t];return o.apply(this,r)},toString:function(){return this.constructor.name}});YS.exports=xi});var XS=T((td,QS)=>{td=function(e){var t=e.length,r=Array(t);t--;for(var o=0;o<=t;o++)r[t-o]=e[o];return r};QS.exports=td});var od=T((rd,ex)=>{var AU=Xt(),PU=XS();rd=AU({initialize:function(){this.clear()},clear:function(){this._items=[],this.size=0},push:function(e){return this._items.push(e),++this.size},pop:function(){if(this.size)return this.size--,this._items.pop()},peek:function(){return this._items[this.size-1]},forEach:function(e,t){t=arguments.length>1?t:this;for(var r=this._items,o=this.size-1,n=0;o>=0;o--,n++)e.call(t,r[o],n,this)},toArr:function(){return PU(this._items)}});ex.exports=rd});var rx=T((nd,tx)=>{var HU=Nr(),qU=Ae();nd=function(e,t,r){t=HU(t,r);for(var o=qU(e),n=o.length,s={},i=0;i{var NU=RS(),OU=od(),nx=ot(),ox=Q(),DU=ie(),RU=rx();function _U(e){var t=[],r=new OU;return NU(e,{start:function(o,n){n=RU(n,function(s){return BU(s)}),r.push({tag:o,attrs:n})},end:function(){var o=r.pop();if(!r.size){t.push(o);return}var n=r.peek();nx(n.content)||(n.content=[]),n.content.push(o)},comment:function(o){var n=""),s=r.peek();if(!s){t.push(n);return}s.content||(s.content=[]),s.content.push(n)},text:function(o){var n=r.peek();if(!n){t.push(o);return}n.content||(n.content=[]),n.content.push(o)}}),t}function sd(e){var t="";return nx(e)?ox(e,function(r){return t+=sd(r)}):DU(e)?t=e:(t+="<".concat(e.tag),ox(e.attrs,function(r,o){return t+=" ".concat(o,'="').concat($U(r),'"')}),t+=">",e.content&&(t+=sd(e.content)),t+="")),t}var BU=function(e){return e.replace(/"/g,'"')},$U=function(e){return e.replace(/"/g,""")};id={parse:_U,stringify:sd};sx.exports=id});var er=T((ad,ax)=>{var FU=rt(),ix=$e(),zU=Be(),WU=ie();ad=function(e){if(FU(e))return e;if(ix(e)){var t=zU(e.valueOf)?e.valueOf():e;e=ix(t)?t+"":t}return WU(e)?+e:e===0?e:+e};ax.exports=ad});var cx=T((ld,lx)=>{var VU=Et();ld=typeof process<"u"&&VU(process)==="[object process]";lx.exports=ld});var Tn=T((cd,dx)=>{var GU=wi(),JU=cx();cd=function(e){!e&&GU&&(e=navigator.userAgent);function t(s){return e.indexOf(s)>-1}if(e){if(e=e.toLowerCase(),t("windows phone"))return"windows phone";if(t("win"))return"windows";if(t("android"))return"android";if(t("ipad")||t("iphone")||t("ipod"))return"ios";if(t("mac"))return"os x";if(t("linux"))return"linux"}else if(JU){var r=process,o=r.platform,n=r.env;if(o==="win32"||n.OSTYPE==="cygwin"||n.OSTYPE==="msys")return"windows";if(o==="darwin")return"os x";if(o==="linux")return"linux"}return"unknown"};dx.exports=cd});var Ei=T((dd,px)=>{dd=function(){};px.exports=dd});var Cn=T((pd,ux)=>{var KU=Ei();pd=function(e,t){t=t||KU;var r=new Image;r.onload=function(){t(null,r)},r.onerror=function(o){t(o)},r.src=e};ux.exports=pd});var Or=T((ud,hx)=>{var gx=_t(),Li=gx.getComputedStyle,mx=gx.document;ud=function(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},r=t.display,o=r===void 0?!0:r,n=t.visibility,s=n===void 0?!1:n,i=t.opacity,a=i===void 0?!1:i,l=t.size,d=l===void 0?!1:l,c=t.viewport,m=c===void 0?!1:c,h=t.overflow,v=h===void 0?!1:h,p=Li(e);if(o){var f=e.tagName;if(f==="BODY"||f==="HTML"||p.position==="fixed"){if(p.display==="none")return!0;for(var g=e;g=g.parentElement;){var w=Li(g);if(w.display==="none")return!0}}else if(e.offsetParent===null)return!0}if(s&&p.visibility==="hidden")return!0;if(a){if(p.opacity==="0")return!0;for(var S=e;S=S.parentElement;){var u=Li(S);if(u.opacity==="0")return!0}}var b=e.getBoundingClientRect();if(d&&(b.width===0||b.height===0))return!0;if(m){var E={top:0,left:0,right:mx.documentElement.clientWidth,bottom:mx.documentElement.clientHeight};return fx(b,E)}if(v)for(var k=e;k=k.parentElement;){var L=Li(k),P=L.overflow;if(P==="scroll"||P==="hidden"){var D=k.getBoundingClientRect();if(fx(b,D))return!0}}return!1};function fx(e,t){return e.rightt.right||e.bottomt.bottom}hx.exports=ud});var ki=T((hd,qx)=>{hd=function(e){return e===!0||e===!1};qx.exports=hd});var Ox=T((yd,Nx)=>{yd=function(e){return e==null};Nx.exports=yd});var wd=T((vd,Dx)=>{var tA=Ox();vd=function(e){if(tA(e))return"";try{return rA.call(e)}catch{}try{return e+""}catch{}return""};var rA=Function.prototype.toString;Dx.exports=vd});var Sd=T((bd,_x)=>{var oA=$e(),Rx=Be();bd=function(e){return oA(e)&&Rx(e.then)&&Rx(e.catch)};_x.exports=bd});var Ed=T((xd,Bx)=>{var nA=rt();xd=function(e){return nA(e)&&e!==+e};Bx.exports=xd});var Fx=T((Ld,$x)=>{var sA=Be();Ld=function(e){return e==null?!1:e._isBuffer?!0:e.constructor&&sA(e.constructor.isBuffer)&&e.constructor.isBuffer(e)};$x.exports=Ld});var Mi=T((Td,zx)=>{var iA=Et(),aA=Ed(),lA=Qt(),cA=Fx();Td=function(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!0,r;return e===null&&(r="Null"),e===void 0&&(r="Undefined"),aA(e)&&(r="NaN"),cA(e)&&(r="Buffer"),r||(r=iA(e).match(dA),r&&(r=r[1])),r?t?lA(r):r:""};var dA=/^\[object\s+(.*?)]$/;zx.exports=Td});var Ii=T((Cd,Wx)=>{Cd=function(e,t){return t=t==null?e.length-1:+t,function(){var r=Math.max(arguments.length-t,0),o=new Array(r),n;for(n=0;n{var pA=Ii();kd=pA(function(e,t){for(var r=e.length,o=0,n=t.length;o{var uA=Xt(),mA=ie(),fA=Q(),gA=Gx();kn=uA({className:"Select",initialize:function(e){if(this.length=0,!e)return this;if(mA(e))return hA.find(e);e.nodeType&&(this[0]=e,this.length=1)},find:function(e){var t=new kn;return this.each(function(){gA(t,this.querySelectorAll(e))}),t},each:function(e){return fA(this,function(t,r){e.call(t,r,t)}),this}});var hA=new kn(document);Jx.exports=kn});var Tt=T((Id,Kx)=>{var yA=ie(),vA=st(),wA=Md();Id=function(e){return vA(yA(e)?new wA(e):e)};Kx.exports=Id});var Yx=T((jd,Zx)=>{var bA=Tt();jd=function(e){e=bA(e);var t=e[0],r=t.getBoundingClientRect();return{left:r.left+window.pageXOffset,top:r.top+window.pageYOffset,width:Math.round(r.width),height:Math.round(r.height)}};Zx.exports=jd});var Xx=T((Ad,Qx)=>{var SA=Q(),xA=Tt();Ad=function(e){e=xA(e),SA(e,function(t){EA(t)&&(t.style.display=LA(t.nodeName))})};function EA(e){return getComputedStyle(e,"").getPropertyValue("display")=="none"}var Ud={};function LA(e){var t,r;return Ud[e]||(t=document.createElement(e),document.documentElement.appendChild(t),r=getComputedStyle(t,"").getPropertyValue("display"),t.parentNode.removeChild(t),r=="none"&&(r="block"),Ud[e]=r),Ud[e]}Qx.exports=Ad});var Hd=T((Pd,eE)=>{var TA=/([A-Z])/g,CA=/[_.\- ]+/g,kA=/(^-)|(-$)/g;Pd=function(e){return e=e.replace(TA,"-$1").toLowerCase().replace(CA,"-").replace(kA,""),e.split("-")};eE.exports=Pd});var Nd=T((qd,tE)=>{var MA=Hd();qd=function(e){return MA(e).join("-")};tE.exports=qd});var oE=T((Od,rE)=>{var IA=xo();Od=function(e,t){var r=function(o){var n=r.cache,s=""+(t?t.apply(this,arguments):o);return IA(n,s)||(n[s]=e.apply(this,arguments)),n[s]};return r.cache={},r};rE.exports=Od});var sE=T((Dd,nE)=>{var jA=Hd();Dd=function(e){var t=jA(e),r=t[0];return t.shift(),t.forEach(UA,t),r+=t.join(""),r};function UA(e,t){this[t]=e.replace(/\w/,function(r){return r.toUpperCase()})}nE.exports=Dd});var uE=T((Mn,pE)=>{var cE=oE(),AA=sE(),PA=Co(),iE=xo(),HA=Nd();Mn=cE(function(e){if(e=e.replace(dE,""),e=AA(e),iE(lE,e))return e;for(var t=aE.length;t--;){var r=aE[t]+PA(e);if(iE(lE,r))return r}return e});Mn.dash=cE(function(e){var t=Mn(e);return(dE.test(t)?"-":"")+HA(t)});var aE=["O","ms","Moz","Webkit"],dE=/^(O)|(ms)|(Moz)|(Webkit)|(-o-)|(-ms-)|(-moz-)|(-webkit-)/g,lE=document.createElement("p").style;pE.exports=Mn});var ji=T((Rd,gE)=>{var qA=ie(),NA=$e(),OA=Nd(),DA=Me(),RA=Pe(),_A=rt(),BA=Tt(),fE=uE(),mE=Q();Rd=function(e,t,r){e=BA(e);var o=DA(r)&&qA(t);if(o)return $A(e[0],t);var n=t;NA(n)||(n={},n[t]=r),FA(e,n)};function $A(e,t){return e.style[fE(t)]||getComputedStyle(e,"").getPropertyValue(t)}function FA(e,t){mE(e,function(r){var o=";";mE(t,function(n,s){s=fE.dash(s),o+=s+":"+WA(s,n)+";"}),r.style.cssText+=o})}var zA=["column-count","columns","font-weight","line-weight","opacity","z-index","zoom"];function WA(e,t){var r=_A(t)&&!RA(zA,OA(e));return r?t+"px":t}gE.exports=Rd});var _d=T((Ai,yE)=>{var VA=st(),GA=$e(),JA=ie(),Ui=Q(),KA=Me(),hE=Tt();Ai=function(e,t,r){e=hE(e);var o=KA(r)&&JA(t);if(o)return ZA(e[0],t);var n=t;GA(n)||(n={},n[t]=r),YA(e,n)};Ai.remove=function(e,t){e=hE(e),t=VA(t),Ui(e,function(r){Ui(t,function(o){r.removeAttribute(o)})})};function ZA(e,t){return e.getAttribute(t)}function YA(e,t){Ui(e,function(r){Ui(t,function(o,n){r.setAttribute(n,o)})})}yE.exports=Ai});var wE=T(($d,vE)=>{var QA=Me(),XA=Q(),eP=Tt();$d={html:Bd("innerHTML"),text:Bd("textContent"),val:Bd("value")};function Bd(e){return function(t,r){t=eP(t);var o=t[0];if(QA(r))return o?o[e]:"";o&&XA(t,function(n){n[e]=r})}}vE.exports=$d});var SE=T((Fd,bE)=>{var tP=Q(),rP=Tt();Fd=function(e){e=rP(e),tP(e,function(t){var r=t.parentNode;r&&r.removeChild(t)})};bE.exports=Fd});var EE=T((zd,xE)=>{var oP=_d(),nP=ie(),sP=$e(),iP=Q(),mG=Tt();zd=function(e,t,r){var o=t;return nP(t)&&(o="data-"+t),sP(t)&&(o={},iP(t,function(n,s){o["data-"+s]=n})),oP(e,o,r)};xE.exports=zd});var TE=T((Pi,LE)=>{var aP=Xt(),lP=Pe();function Wd(){return!0}function Vd(){return!1}function cP(e){var t=this.events[e.type],r,o=dP.call(this,e,t);e=new Pi.Event(e);for(var n=0,s,i,a;(i=o[n++])&&!e.isPropagationStopped();)for(e.curTarget=i.el,s=0;(r=i.handlers[s++])&&!e.isImmediatePropagationStopped();)a=r.handler.apply(i.el,[e]),a===!1&&(e.preventDefault(),e.stopPropagation())}function dP(e,t){var r=e.target,o=[],n=t.delegateCount,s,i,a,l;if(r.nodeType)for(;r!==this;r=r.parentNode||this){for(i=[],l=0;l{var pP=TE(),uP=Me(),mP=Tt(),fP=Q();Gd={on:CE("add"),off:CE("remove")};function CE(e){return function(t,r,o,n){t=mP(t),uP(n)&&(n=o,o=void 0),fP(t,function(s){pP[e](s,r,o,n)})}}kE.exports=Gd});var Zd=T((Kd,ME)=>{var gP=Nr(),hP=Zt(),yP=Ae();Kd=function(e,t,r){t=gP(t,r);for(var o=!hP(e)&&yP(e),n=(o||e).length,s=0;s{var vP=st(),wP=Zd(),Hi=Tt(),bP=ie(),In=Q();Dr={add:function(e,t){e=Hi(e);var r=IE(t);In(e,function(o){var n=[];In(r,function(s){Dr.has(o,s)||n.push(s)}),n.length!==0&&(o.className+=(o.className?" ":"")+n.join(" "))})},has:function(e,t){e=Hi(e);var r=new RegExp("(^|\\s)"+t+"(\\s|$)");return wP(e,function(o){return r.test(o.className)})},toggle:function(e,t){e=Hi(e),In(e,function(r){if(!Dr.has(r,t))return Dr.add(r,t);Dr.remove(r,t)})},remove:function(e,t){e=Hi(e);var r=IE(t);In(e,function(o){In(r,function(n){o.classList.remove(n)})})}};function IE(e){return bP(e)?e.split(/\s+/):vP(e)}jE.exports=Dr});var AE=T((Qd,UE)=>{var SP=Q(),xP=Tt(),EP=ie();Qd={before:qi("beforebegin"),after:qi("afterend"),append:qi("beforeend"),prepend:qi("afterbegin")};function qi(e){return function(t,r){t=xP(t),SP(t,function(o){if(EP(r))o.insertAdjacentHTML(e,r);else{var n=o.parentNode;switch(e){case"beforebegin":n&&n.insertBefore(r,o);break;case"afterend":n&&n.insertBefore(r,o.nextSibling);break;case"beforeend":o.appendChild(r);break;case"afterbegin":o.prepend(r);break}}})}}UE.exports=Qd});var Bt=T((Rr,NE)=>{var qE=Md(),LP=Yx(),TP=Xx(),CP=ji(),PE=_d(),Xd=wE(),kP=En(),MP=SE(),IP=EE(),HE=Jd(),Ni=Yd(),Oi=AE(),Di=Me(),jP=ie();Rr=function(e){return new qE(e)};qE.methods({offset:function(){return LP(this)},hide:function(){return this.css("display","none")},show:function(){return TP(this),this},first:function(){return Rr(this[0])},last:function(){return Rr(kP(this))},get:function(e){return this[e]},eq:function(e){return Rr(this[e])},on:function(e,t,r){return HE.on(this,e,t,r),this},off:function(e,t,r){return HE.off(this,e,t,r),this},html:function(e){var t=Xd.html(this,e);return Di(e)?t:this},text:function(e){var t=Xd.text(this,e);return Di(e)?t:this},val:function(e){var t=Xd.val(this,e);return Di(e)?t:this},css:function(e,t){var r=CP(this,e,t);return ep(e,t)?r:this},attr:function(e,t){var r=PE(this,e,t);return ep(e,t)?r:this},data:function(e,t){var r=IP(this,e,t);return ep(e,t)?r:this},rmAttr:function(e){return PE.remove(this,e),this},remove:function(){return MP(this),this},addClass:function(e){return Ni.add(this,e),this},rmClass:function(e){return Ni.remove(this,e),this},toggleClass:function(e){return Ni.toggle(this,e),this},hasClass:function(e){return Ni.has(this,e)},parent:function(){return Rr(this[0].parentNode)},append:function(e){return Oi.append(this,e),this},prepend:function(e){return Oi.prepend(this,e),this},before:function(e){return Oi.before(this,e),this},after:function(e){return Oi.after(this,e),this}});var ep=function(e,t){return Di(t)&&jP(e)};NE.exports=Rr});var RE=T((tp,DE)=>{var UP=ot();tp=function(e){return OE(e,[])};function OE(e,t){for(var r=e.length,o=-1,n;r--;)n=e[++o],UP(n)?OE(n,t):t.push(n);return t}DE.exports=tp});var op=T((rp,_E)=>{var AP=Ii(),PP=RE(),HP=Lo(),qP=Pe();rp=AP(function(e,t){return t=PP(t),HP(e,function(r){return!qP(t,r)})});_E.exports=rp});var sp=T((np,BE)=>{np=function(e,t){var r=[];t=t||1;for(var o=0,n=Math.ceil(e.length/t);o{var Ri=Lt(),$E=_t(),FE=Ye();_i=function(e){return e.sort(zE)};_i.comparator=zE;function zE(e,t){if(e=FE(e),t=FE(t),Ri(e,"_")&&!Ri(t,"_"))return 1;if(Ri(t,"_")&&!Ri(e,"_"))return-1;for(var r=/^\d+|^\D+/,o,n,s,i;;){if(e){if(!t)return 1}else return t?-1:0;if(o=e.match(r)[0],n=t.match(r)[0],s=!$E.isNaN(o),i=!$E.isNaN(n),s&&!i)return-1;if(i&&!s)return 1;if(s&&i){var a=o-n;if(a)return a;if(o.length!==n.length)return!+o&&!+n?o.length-n.length:n.length-o.length}else if(o!==n)return o{var DP=0;ip=function(e){var t=++DP+"";return e?e+t:t};ZE.exports=ip});var QE=T((ap,YE)=>{ap=function(e,t,r){var o=e.length;t==null?t=0:t<0?t=Math.max(o+t,0):t=Math.min(t,o),r==null?r=o:r<0?r=Math.max(o+r,0):r=Math.min(r,o);for(var n=[];t{var RP=Ii(),_P=st();lp=RP(function(e,t){return function(){var r=[];return r=r.concat(t),r=r.concat(_P(arguments)),e.apply(this,r)}});XE.exports=lp});var rL=T((cp,tL)=>{cp=function(e,t){var r;return function(){return--e>0&&(r=t.apply(this,arguments)),e<=1&&(t=null),r}};tL.exports=cp});var nL=T((dp,oL)=>{var BP=eL(),$P=rL();dp=BP($P,2);oL.exports=dp});var zi=T((pp,sL)=>{var FP=$e(),zP=ot(),WP=pt();pp=function(e){return FP(e)?zP(e)?e.slice():WP({},e):e};sL.exports=pp});var tr=T((Wi,lL)=>{var VP=Xt(),iL=xo(),aL=Q(),GP=QE(),JP=nL(),KP=zi();Wi=VP({initialize:function(){this._events=this._events||{}},on:function(e,t){return this._events[e]=this._events[e]||[],this._events[e].push(t),this},off:function(e,t){var r=this._events;if(iL(r,e)){var o=r[e].indexOf(t);return o>-1&&r[e].splice(o,1),this}},once:function(e,t){return this.on(e,JP(t)),this},emit:function(e){var t=this;if(iL(this._events,e)){var r=GP(arguments,1),o=KP(this._events[e]);return aL(o,function(n){return n.apply(t,r)},this),this}},removeAllListeners:function(e){return e?delete this._events[e]:this._events={},this}},{mixin:function(e){aL(["on","off","once","emit","removeAllListeners"],function(t){e[t]=Wi.prototype[t]}),e._events=e._events||{}}});lL.exports=Wi});var Io=T((mp,wL)=>{var eH=Nr();mp=function(e,t,r){var o=[];t=eH(t,r);for(var n=-1,s=e.length;++n{var bL=tr();fp=bL.extend({className:"MediaQuery",initialize:function(e){var t=this;this.callSuper(bL,"initialize"),this._listener=function(){t.emit(t.isMatch()?"match":"unmatch")},this.setQuery(e)},setQuery:function(e){this._mql&&this._mql.removeListener(this._listener),this._mql=window.matchMedia(e),this._mql.addListener(this._listener)},isMatch:function(){return this._mql.matches}});SL.exports=fp});var Un=T((jo,EL)=>{var tH=tr(),rH=xL(),gp=new rH("(prefers-color-scheme: dark)");jo={get:function(){return gp.isMatch()?"dark":"light"}};tH.mixin(jo);gp.on("match",function(){return jo.emit("change","dark")});gp.on("unmatch",function(){return jo.emit("change","light")});EL.exports=jo});var Lp=T((Ep,sT)=>{Ep=function(){for(var e=arguments,t=e[0],r=1,o=e.length;r{var aH=ie(),lH=st(),cH=Lp(),dH=dt(),pH=nt();Tp=function(e){aH(e)&&(e=lH(e));for(var t="",r=arguments.length,o=new Array(r>1?r-1:0),n=1;n0?cH.apply(null,l):0;return pH(dH(a,function(p){return p[0]===" "?p.slice(v):p}).join(` +`))};var uH=/^(\s+)\S+/;iT.exports=Tp});var Yi=T((Mp,ET)=>{Mp=function(e){return!!(e&&e.nodeType===1)};ET.exports=Mp});var Nn=T((Up,CT)=>{var LT=Yi(),Ip=ie(),jp=Lt(),hH=Yd(),yH=ji(),TT=Q(),vH=Be();Up=function(e,t){for(var r=arguments.length,o=new Array(r>2?r-2:0),n=2;n{var bH=Xt(),SH=zi(),kT=Q(),xH=st();Qi=bH({initialize:function(){this._listeners=[]},addListener:function(e){this._listeners.push(e)},rmListener:function(e){var t=this._listeners.indexOf(e);t>-1&&this._listeners.splice(t,1)},rmAllListeners:function(){this._listeners=[]},emit:function(){var e=this,t=xH(arguments),r=SH(this._listeners);kT(r,function(o){return o.apply(e,t)},this)}},{mixin:function(e){kT(["addListener","rmListener","emit","rmAllListeners"],function(t){e[t]=Qi.prototype[t]}),e._listeners=e._listeners||[]}});MT.exports=Qi});var ta=T((ea,AT)=>{var Xi=IT(),On=Nn(),jT=Jd(),Ap=ji(),EH=Pe(),Pp=pt(),UT=_t();UT.ResizeObserver?ea=Xi.extend({initialize:function(t){var r=this;if(t._resizeSensor)return t._resizeSensor;this.callSuper(Xi,"initialize");var o=new UT.ResizeObserver(function(){return r.emit()});o.observe(t),t._resizeSensor=this,this._resizeObserver=o,this._el=t},destroy:function(){var e=this._el;e._resizeSensor&&(this.rmAllListeners(),delete e._resizeSensor,this._resizeObserver.unobserve(e))}}):ea=Xi.extend({initialize:function(t){if(t._resizeSensor)return t._resizeSensor;this.callSuper(Xi,"initialize"),this._el=t,t._resizeSensor=this,EH(["absolute","relative","fixed","sticky"],Ap(t,"position"))||Ap(t,"position","relative"),this._appendResizeSensor(),this._bindEvent()},destroy:function(){var e=this._el;e._resizeSensor&&(this.rmAllListeners(),delete e._resizeSensor,e.removeChild(this._resizeSensorEl))},_appendResizeSensor:function(){var e=this._el,t={pointerEvents:"none",position:"absolute",left:"0px",top:"0px",right:"0px",bottom:"0px",overflow:"hidden",zIndex:"-1",visibility:"hidden",maxWidth:"100%"},r={position:"absolute",left:"0px",top:"0px",transition:"0s"},o=On("div",{style:r}),n=On("div.resize-sensor-expand",{style:t},o),s=On("div.resize-sensor-shrink",{style:t},On("div",{style:Pp({width:"200%",height:"200%"},r)})),i=On("div.resize-sensor",{dir:"ltr",style:t},n,s);this._expandEl=n,this._expandChildEl=o,this._shrinkEl=s,this._resizeSensorEl=i,e.appendChild(i),this._resetExpandShrink()},_bindEvent:function(){var e=this;jT.on(this._expandEl,"scroll",function(){return e._onScroll()}),jT.on(this._shrinkEl,"scroll",function(){return e._onScroll()})},_onScroll:function(){this.emit(),this._resetExpandShrink()},_resetExpandShrink:function(){var e=this._el,t=e.offsetWidth,r=e.offsetHeight;Ap(this._expandChildEl,{width:t+10,height:r+10}),Pp(this._expandEl,{scrollLeft:t+10,scrollTop:r+10}),Pp(this._shrinkEl,{scrollLeft:t+10,scrollTop:r+10})}});AT.exports=ea});var qp=T((Hp,PT)=>{Hp=function(e,t,r){var o;return function(){var n=this,s=arguments,i=function(){o=null,e.apply(n,s)};r||clearTimeout(o),(!r||!o)&&(o=setTimeout(i,t))}};PT.exports=Hp});var Op=T((Np,HT)=>{var LH=qp();Np=function(e,t){return LH(e,t,!0)};HT.exports=Np});var ra=T((Dp,qT)=>{Dp=function(e){return e===null};qT.exports=Dp});var Dn=T((Rp,NT)=>{var TH=Et();Rp=function(e){return TH(e)==="[object RegExp]"};NT.exports=Rp});var RT=T((_p,DT)=>{var OT=Me();_p=function(e,t,r){return OT(r)&&(r=t,t=void 0),!OT(t)&&er?r:e};DT.exports=_p});var BT=T((Bp,_T)=>{Bp=function(){for(var e=arguments,t=e[0],r=1,o=e.length;rt&&(t=e[r]);return t};_T.exports=Bp});var FT=T(($p,$T)=>{var CH=rt();$p=function(e){return CH(e)&&e%1===0};$T.exports=$p});var WT=T((Fp,zT)=>{var kH=FT();Fp=function(e){return kH(e)?e%2!==0:!1};zT.exports=Fp});var Ao=T((oa,VT)=>{Date.now?oa=Date.now:oa=function(){return new Date().getTime()};VT.exports=oa});var KT=T((zp,JT)=>{var GT=_t(),MH={down:"touchstart",move:"touchmove",up:"touchend"},IH={down:"mousedown",move:"mousemove",up:"mouseup"},jH={down:"pointerdown",move:"pointermove",up:"pointerup"},UH="PointerEvent"in GT,AH="ontouchstart"in GT;zp=function(e){return UH?jH[e]:AH?MH[e]:IH[e]};JT.exports=zp});var A0=T((Yp,U0)=>{Yp=function(e){return window.ShadowRoot?e instanceof ShadowRoot:!1};U0.exports=Yp});var H0=T(($n,P0)=>{var OH=Xt();$n=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;$n||($n=OH({initialize:function(){},observe:function(){},disconnect:function(){},takeRecords:function(){}}));P0.exports=$n});var Qp=T((pa,q0)=>{var da=Q(),DH=Yt();pa=function(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:"js",r=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{};DH(r,RH),e=e.replace(//g,">"),t=fr[t];var o=0,n=[];da(t,function(i){i.language&&(e=e.replace(i.re,function(a,l){return l?(n[o++]=pa(l,i.language,r),a.replace(l,"___subtmpl"+(o-1)+"___")):a}))}),da(t,function(i,a){fr[i.language]||(e=e.replace(i.re,"___"+a+"___$1___end"+a+"___"))});var s=[];return e=e.replace(/___(?!subtmpl)\w+?___/g,function(i){var a=i.substr(3,3)==="end",l=(a?i.substr(6):i.substr(3)).replace(/_/g,""),d=s.length>0?s[s.length-1]:null;return!a&&(d==null||l==d||d!=null&&t[d]&&t[d].embed!=null&&t[d].embed.indexOf(l)>-1)?(s.push(l),i):a&&l==d?(s.pop(),i):""}),da(t,function(i,a){var l=r[i.style]?' style="'.concat(r[i.style],'"'):"";e=e.replace(new RegExp("___end"+a+"___","g"),"").replace(new RegExp("___"+a+"___","g"),'"))}),da(t,function(i){i.language&&(e=e.replace(/___subtmpl\d+___/g,function(a){var l=parseInt(a.replace(/___subtmpl(\d+)___/,"$1"),10);return n[l]}))}),e};var RH={comment:"color:#63a35c;",string:"color:#183691;",number:"color:#0086b3;",keyword:"color:#a71d5d;",operator:"color:#994500;"},fr={};fr.js={comment:{re:/(\/\/.*|\/\*([\s\S]*?)\*\/)/g,style:"comment"},string:{re:/(('.*?')|(".*?"))/g,style:"string"},numbers:{re:/(-?(\d+|\d+\.\d+|\.\d+))/g,style:"number"},keywords:{re:/(?:\b)(function|for|foreach|while|if|else|elseif|switch|break|as|return|this|class|self|default|var|const|let|false|true|null|undefined)(?:\b)/gi,style:"keyword"},operator:{re:/(\+|-|\/|\*|%|=|<|>|\||\?|\.)/g,style:"operator"}};fr.html={comment:{re:/(<!--([\s\S]*?)-->)/g,style:"comment"},tag:{re:/(<\/?\w(.|\n)*?\/?>)/g,style:"keyword",embed:["string"]},string:fr.js.string,css:{re:/(?:<style.*?>)([\s\S]*)?(?:<\/style>)/gi,language:"css"},script:{re:/(?:<script.*?>)([\s\S]*?)(?:<\/script>)/gi,language:"js"}};fr.css={comment:fr.js.comment,string:fr.js.string,numbers:{re:/((-?(\d+|\d+\.\d+|\.\d+)(%|px|em|pt|in)?)|#[0-9a-fA-F]{3}[0-9a-fA-F]{3})/g,style:"number"},keywords:{re:/(@\w+|:?:\w+|[a-z-]+:)/g,style:"keyword"}};q0.exports=pa});var O0=T((Xp,N0)=>{var _H=Nr(),BH=Zt(),$H=Ae();Xp=function(e,t,r){t=_H(t,r);for(var o=!BH(e)&&$H(e),n=(o||e).length,s=0;s{var FH=Q();eu=function(e){var t={};return FH(e,function(r,o){t[r]=o}),t};D0.exports=eu});var B0=T((tu,_0)=>{var zH=ie(),WH=R0();tu=function(e){return zH(e)?qo[e]:VH[e]};var qo={backspace:8,tab:9,enter:13,shift:16,ctrl:17,alt:18,"pause/break":19,"caps lock":20,esc:27,space:32,"page up":33,"page down":34,end:35,home:36,left:37,up:38,right:39,down:40,insert:45,delete:46,windows:91,"right windows":92,"windows menu":93,"numpad *":106,"numpad +":107,"numpad -":109,"numpad .":110,"numpad /":111,"num lock":144,"scroll lock":145,";":186,"=":187,",":188,"-":189,".":190,"/":191,"`":192,"[":219,"\\":220,"]":221,"'":222};for(Fn=97;Fn<123;Fn++)qo[String.fromCharCode(Fn)]=Fn-32;var Fn;for(zn=48;zn<58;zn++)qo[zn-48]=zn;var zn;for(Wn=1;Wn<13;Wn++)qo["f"+Wn]=Wn+111;var Wn;for(Vn=0;Vn<10;Vn++)qo["numpad "+Vn]=Vn+96;var Vn,VH=WH(qo);_0.exports=tu});var G0=T((nu,V0)=>{var GH=tr(),JH=B0(),$0=Q(),KH=bn(),ZH=nt(),YH=dt(),F0=Be();nu={on:function(e,t,r){F0(t)&&(r=t,t={}),e=e.split(z0),$0(e,function(o){if(o=ou(o),t.element){var n=t,s=n.element,i=s._hotkeyListeners||{};s._hotkeyListeners=i,i[o]=i[o]||[];var a=function(l){o===W0(l)&&r(l)};i[o].push({listener:a,origin:r}),s.addEventListener("keydown",a)}else ru.on(o,r)})},off:function(e,t,r){F0(t)&&(r=t,t={}),e=e.split(z0),$0(e,function(o){if(o=ou(o),t.element){var n=t,s=n.element,i=s._hotkeyListeners;if(i&&i[o]){for(var a=i[o],l,d=0,c=a.length;d{var eq=Et();uu=function(e){switch(eq(e)){case"[object Error]":case"[object DOMException]":return!0;default:return e instanceof Error}};rC.exports=uu});var sC=T((mu,nC)=>{mu=function(e){var t=typeof e;return e==null||t!=="function"&&t!=="object"};nC.exports=mu});var aC=T((fu,iC)=>{var tq=er();fu=function(e){return e?(e=tq(e),e-e%1):e===0?e:0};iC.exports=fu});var dC=T((gu,cC)=>{var lC=st();gu=function(){for(var e=lC(arguments),t=[],r=0,o=e.length;r{var rq=Mi(),oq=Co(),nq=Ye(),sq=Me(),iq=Be(),aq=Dn();hu=function(e,t){return JSON.stringify(e,lq(),t)};function lq(){var e=[],t=[];return function(r,o){if(e.length>0){var n=e.indexOf(this);n>-1?(e.splice(n+1),t.splice(n,1/0,r)):(e.push(this),t.push(r));var s=e.indexOf(o);s>-1&&(e[0]===o?o="[Circular ~]":o="[Circular ~."+t.slice(0,s).join(".")+"]")}else e.push(o);return aq(o)||iq(o)?o="["+oq(rq(o))+" "+nq(o)+"]":sq(o)&&(o=null),o}}pC.exports=hu});var vu=T((yu,mC)=>{var cq=pt(),dq=Ei();yu=function(e,t){t=t||dq;var r=document.createElement("textarea"),o=document.body;cq(r.style,{fontSize:"12pt",border:"0",padding:"0",margin:"0",position:"absolute",left:"-9999px"}),r.value=e,o.appendChild(r),r.setAttribute("readonly",""),r.select(),r.setSelectionRange(0,e.length);try{document.execCommand("copy"),t()}catch(n){t(n)}finally{o.removeChild(r)}};mC.exports=yu});var bu=T((wu,fC)=>{wu=function(e){return typeof e=="symbol"};fC.exports=wu});var hC=T((Su,gC)=>{var pq=vi(),uq=Me(),mq=Ye(),fq=bu(),gq=ie();Su=function(e,t,r){t=pq(t,e);var o=t.pop(),n;for(n=t.shift();!uq(n);){if(!gq(n)&&!fq(n)&&(n=mq(n)),n==="__proto__"||n==="constructor"||n==="prototype")return;e[n]||(e[n]={}),e=e[n],n=t.shift()}e[o]=r};gC.exports=Su});var wC=T((xu,vC)=>{var hq=vi(),yq=ie(),vq=$e(),wq=Q();xu=function(e,t,r){return yq(t)?yC(e,t,r):vq(t)&&wq(t,function(o,n){yC(e,n,o)}),e};function yC(e,t,r){for(var o=hq(t,e),n=o.pop();t=o.shift();)e[t]||(e[t]={}),e=e[t];Object.defineProperty(e,n,r)}vC.exports=xu});var SC=T((Eu,bC)=>{var bq=ie(),Sq=ot(),xq=Pe(),Eq=Q();Eu=function(e,t,r){if(bq(t)&&(t=[t]),Sq(t)){var o=t;t=function(i,a){return xq(o,a)}}var n={},s=function(i,a){t(i,a)&&(n[a]=i)};return r&&(s=function(i,a){t(i,a)||(n[a]=i)}),Eq(e,s),n};bC.exports=Eu});var AC=T((hr,UC)=>{var Lq=fc(),Tq=Mi(),Do=Ye(),xC=hc(),Cq=wd(),kC=Ae(),Kn=Q(),kq=Xt(),MC=yi(),Mq=op(),Iq=pt(),jq=Sd(),Uq=Lo(),EC=Ao(),LC=Sn(),IC=Pe(),Cu=$e(),Aq=ed(),TC=Yc(),Pq=Lt(),Hq=hC(),qq=wC(),CC=SC(),Nq=Zt();hr=function(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},r=t.self,o=t.startTime,n=o===void 0?EC():o,s=t.timeout,i=s===void 0?0:s,a=t.depth,l=a===void 0?0:a,d=t.curDepth,c=d===void 0?1:d,m=t.visitor,h=m===void 0?new Oq:m,v=t.unenumerable,p=v===void 0?!1:v,f=t.symbol,g=f===void 0?!1:f,w=t.accessGetter,S=w===void 0?!1:w,u=t.ignore,b=u===void 0?[]:u,E="",k={visitor:h,unenumerable:p,symbol:g,accessGetter:S,depth:l,curDepth:c+1,timeout:i,startTime:n,ignore:b},L=Tq(e,!1);if(L==="String")E=Oo(e);else if(L==="Number")E=Do(e),xC(E,"Infinity")&&(E='{"value":"'.concat(E,'","type":"Number"}'));else if(L==="NaN")E='{"value":"NaN","type":"Number"}';else if(L==="Boolean")E=e?"true":"false";else if(L==="Null")E="null";else if(L==="Undefined")E='{"type":"Undefined"}';else if(L==="Symbol"){var P="Symbol";try{P=Do(e)}catch{}E='{"value":'.concat(Oo(P),',"type":"Symbol"}')}else{if(i&&EC()-n>i)return Oo("Timeout");if(l&&c>l)return Oo("{...}");E="{";var D=[],z=h.get(e),ae;if(z?(ae=z.id,D.push('"reference":'.concat(ae))):(ae=h.set(e),D.push('"id":'.concat(ae))),D.push('"type":"'.concat(L,'"')),xC(L,"Function")?D.push('"value":'.concat(Oo(Cq(e)))):L==="RegExp"&&D.push('"value":'.concat(Oo(e))),!z){var ee=kC(e);if(ee.length&&D.push(Lu("enumerable",ee,r||e,k)),p){var le=Mq(LC(e,{prototype:!1,unenumerable:!0}),ee);le.length&&D.push(Lu("unenumerable",le,r||e,k))}if(g){var te=Uq(LC(e,{prototype:!1,symbol:!0}),function(Ce){return typeof Ce=="symbol"});te.length&&D.push(Lu("symbol",te,r||e,k))}var re=MC(e);if(re&&!IC(b,re)){var ge='"proto":'.concat(hr(re,Iq(k,{self:r||e})));D.push(ge)}}E+=D.join(",")+"}"}return E};function Lu(e,t,r,o){var n=[];return Kn(t,function(s){var i,a=Object.getOwnPropertyDescriptor(r,s),l=a&&a.get,d=a&&a.set;if(!o.accessGetter&&l)i="(...)";else try{if(i=r[s],IC(o.ignore,i))return;jq(i)&&i.catch(function(){})}catch(c){i=c.message}n.push("".concat(Tu(s),":").concat(hr(i,o))),l&&n.push("".concat(Tu("get "+Do(s)),":").concat(hr(a.get,o))),d&&n.push("".concat(Tu("set "+Do(s)),":").concat(hr(a.set,o)))}),'"'.concat(e,'":{')+n.join(",")+"}"}function Tu(e){return'"'.concat(jC(e),'"')}function Oo(e){return'"'.concat(jC(Do(e)),'"')}function jC(e){return Lq(e).replace(/\\'/g,"'").replace(/\t/g,"\\t")}var Oq=kq({initialize:function(){this.id=1,this.visited=[]},set:function(e){var t=this.visited,r=this.id,o={id:r,val:e};return t.push(o),this.id++,r},get:function(e){for(var t=this.visited,r=0,o=t.length;r{typeof process=="object"&&process.nextTick?Zn=process.nextTick:typeof setImmediate=="function"?Zn=function(e){setImmediate(PC(e))}:Zn=function(e){setTimeout(PC(e),0)};function PC(e){if(typeof e!="function")throw new TypeError(e+" is not a function");return e}HC.exports=Zn});var OC=T((ku,NC)=>{var Bq=bn(),$q=nt(),Fq=dt(),zq=st();ku=function(e){var t=zq(e.match(Wq));return Bq(Fq(t,function(r){return $q(r)}))};var Wq=/((https?)|(ftp)):\/\/[\w.]+[^ \f\n\r\t\v"\\<>[\]\u2100-\uFFFF(),]*/gi;NC.exports=ku});var RC=T((Mu,DC)=>{Mu=function(e){return e.replace(/\W/g,"\\$&")};DC.exports=Mu});var BC=T((Iu,_C)=>{var Vq=OC(),Gq=Q(),Jq=RC();Iu=function(e,t){t=t||Kq;var r=Vq(e);return Gq(r,function(o){e=e.replace(new RegExp(Jq(o),"g"),t)}),e};function Kq(e){return''+e+""}_C.exports=Iu});var FC=T((ga,$C)=>{var Yn=document;ga=function(e){var t=Yn.createElement("body");return t.innerHTML=e,t.childNodes[0]};Yn.createRange&&Yn.body&&(fa=Yn.createRange(),fa.selectNode(Yn.body),fa.createContextualFragment&&(ga=function(e){return fa.createContextualFragment(e).childNodes[0]}));var fa;$C.exports=ga});var kk=T((rs,Ck)=>{var Lk=Ao(),Tk=_t(),Au=Tk.performance,wa=Tk.process,ba;Au&&Au.now?rs=function(){return Au.now()}:wa&&wa.hrtime?(Pu=function(){var e=wa.hrtime();return e[0]*1e9+e[1]},ba=Pu()-wa.uptime()*1e9,rs=function(){return(Pu()-ba)/1e6}):(ba=Lk(),rs=function(){return Lk()-ba});var Pu;Ck.exports=rs});var jk=T((Hu,Ik)=>{var eN=ie(),tN=Xt();Hu=function(e,t){return eN(e)?rN(e):oN(e,t)};function rN(e){for(var t=[],r=document.evaluate(e,document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null),o=0;o1&&arguments[1]!==void 0?arguments[1]:!1;if(e.nodeType===Node.DOCUMENT_NODE)return"/";for(var r=[],o=e;o;){var n=nN(o,t);if(!n||(r.push(n),n.optimized))break;o=o.parentNode}return r.reverse(),(r.length&&r[0].optimized?"":"/")+r.join("/")}function nN(e,t){var r,o=sN(e);if(o===-1)return null;switch(e.nodeType){case Node.ELEMENT_NODE:if(t&&e.getAttribute("id"))return new Mk('//*[@id="'+e.getAttribute("id")+'"]',!0);r=e.localName;break;case Node.ATTRIBUTE_NODE:r="@"+e.nodeName();break;case Node.TEXT_NODE:case Node.CDATA_SECTION_NODE:r="text()";break;case Node.PROCESSING_INSTRUCTION_NODE:r="processing-instruction()";break;case Node.COMMENT_NODE:r="comment()";break;case Node.DOCUMENT_NODE:r="";break;default:r="";break}return o>0&&(r+="["+o+"]"),new Mk(r,e.nodeType===Node.DOCUMENT_NODE)}function sN(e){function t(a,l){if(a===l)return!0;if(a.nodeType===Node.ELEMENT_NODE&&l.nodeType===Node.ELEMENT_NODE)return a.localName===l.localName;if(a.nodeType===l.nodeType)return!0;var d=a.nodeType===Node.CDATA_SECTION_NODE?Node.TEXT_NODE:a.nodeType,c=l.nodeType===Node.CDATA_SECTION_NODE?Node.TEXT_NODE:l.nodeType;return d===c}var r=e.parentNode?e.parentNode.children:null;if(!r)return 0;for(var o,n=0;n{var iN=Et();qu=function(e){return iN(e)==="[object Date]"};Uk.exports=qu});var Hk=T((Nu,Pk)=>{Nu=function(e,t){var r="";if(t<1)return"";for(;t>0;)t&1&&(r+=e),t>>=1,e+=e;return r};Pk.exports=Nu});var Nk=T((Ou,qk)=>{var aN=Hk(),lN=Ye();Ou=function(e,t,r){e=lN(e);var o=e.length;return r=r||" ",o{var cN=ie(),dN=Ak(),Sa=Ye(),pN=Nk();Mt=function(e,t,r,o){arguments.length===1&&cN(e)&&!fN.test(e)&&(t=e,e=void 0),e=e||new Date,dN(e)||(e=new Date(e)),t=Sa(Mt.masks[t]||t||Mt.masks.default);var n=t.slice(0,4);(n==="UTC:"||n==="GMT:")&&(t=t.slice(4),r=!0,n==="GMT:"&&(o=!0));var s=r?"getUTC":"get",i=e[s+"Date"](),a=e[s+"Day"](),l=e[s+"Month"](),d=e[s+"FullYear"](),c=e[s+"Hours"](),m=e[s+"Minutes"](),h=e[s+"Seconds"](),v=e[s+"Milliseconds"](),p=r?0:e.getTimezoneOffset(),f={d:i,dd:or(i),ddd:Mt.i18n.dayNames[a],dddd:Mt.i18n.dayNames[a+7],m:l+1,mm:or(l+1),mmm:Mt.i18n.monthNames[l],mmmm:Mt.i18n.monthNames[l+12],yy:Sa(d).slice(2),yyyy:d,h:c%12||12,hh:or(c%12||12),H:c,HH:or(c),M:m,MM:or(m),s:h,ss:or(h),l:or(v,3),L:or(Math.round(v/10)),t:c<12?"a":"p",tt:c<12?"am":"pm",T:c<12?"A":"P",TT:c<12?"AM":"PM",Z:o?"GMT":r?"UTC":(Sa(e).match(mN)||[""]).pop().replace(gN,""),o:(p>0?"-":"+")+or(Math.floor(Math.abs(p)/60)*100+Math.abs(p)%60,4),S:["th","st","nd","rd"][i%10>3?0:(i%100-i%10!=10)*i%10]};return t.replace(uN,function(g){return g in f?f[g]:g.slice(1,g.length-1)})};var or=function(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:2;return pN(Sa(e),t,"0")},uN=/d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZWN]|"[^"]*"|'[^']*'/g,mN=/\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,fN=/\d/,gN=/[^-+\dA-Z]/g;Mt.masks={default:"ddd mmm dd yyyy HH:MM:ss",shortDate:"m/d/yy",mediumDate:"mmm d, yyyy",longDate:"mmmm d, yyyy",fullDate:"dddd, mmmm d, yyyy",shortTime:"h:MM TT",mediumTime:"h:MM:ss TT",longTime:"h:MM:ss TT Z",isoDate:"yyyy-mm-dd",isoTime:"HH:MM:ss",isoDateTime:"yyyy-mm-dd'T'HH:MM:sso",isoUtcDateTime:"UTC:yyyy-mm-dd'T'HH:MM:ss'Z'",expiresHeaderFormat:"ddd, dd mmm yyyy HH:MM:ss Z"};Mt.i18n={dayNames:["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","January","February","March","April","May","June","July","August","September","October","November","December"]};Ok.exports=Mt});var Jk=T((Du,Gk)=>{var hN=Ao(),yN=wi(),$t,Vr,Wk=0;if(yN){for($t=window.requestAnimationFrame,Vr=window.cancelAnimationFrame,ss=["ms","moz","webkit","o"],Ro=0,Vk=ss.length;Ro{v!==void 0&&d.searchParams.set(h,String(v))});let m=e.view==="headless"||n;if(i&&(console.warn(`Deprecation notice: "lite" option is deprecated. Use "config: { mode: 'lite' }" instead.`),typeof o=="object"&&o.mode==null?o.mode="lite":d.searchParams.set("lite","true")),a&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),typeof o=="object"&&o.view==null&&a!=="headless"?o.view=a:d.searchParams.set("view",a)),typeof o=="string")try{new URL(o),d.searchParams.set("config",encodeURIComponent(o))}catch{throw new Error('"config" is not a valid URL or configuration object.')}else o&&typeof o=="object"&&Object.keys(o).length>0&&(o.title&&o.title!=="Untitled Project"&&d.searchParams.set("title",o.title),o.description&&o.description.length>0&&d.searchParams.set("description",o.description),c.set("config","code/"+(0,Ha.compressToEncodedURIComponent)(JSON.stringify(o))));if(r&&typeof r=="object"&&Object.keys(r).length>0)try{c.set("params",(0,Ha.compressToEncodedURIComponent)(JSON.stringify(r)))}catch{Object.keys(r).forEach(h=>{d.searchParams.set(h,encodeURIComponent(String(r[h])))})}return s&&d.searchParams.set("x",encodeURIComponent(s)),m&&d.searchParams.set("headless","true"),d.hash=c.toString(),d.href}var nI=typeof btoa=="function",qa=typeof Buffer=="function",iD=typeof TextDecoder=="function"?new TextDecoder:void 0,mm=typeof TextEncoder=="function"?new TextEncoder:void 0,sI="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",zo=Array.prototype.slice.call(sI),aD=(e=>{let t={};return e.forEach((r,o)=>t[r]=o),t})(zo);var At=String.fromCharCode.bind(String),lD=typeof Uint8Array.from=="function"?Uint8Array.from.bind(Uint8Array):e=>new Uint8Array(Array.prototype.slice.call(e,0)),iI=e=>e.replace(/=/g,"").replace(/[+\/]/g,t=>t=="+"?"-":"_");var aI=e=>{let t,r,o,n,s="",i=e.length%3;for(let a=0;a255||(o=e.charCodeAt(a++))>255||(n=e.charCodeAt(a++))>255)throw new TypeError("invalid character found");t=r<<16|o<<8|n,s+=zo[t>>18&63]+zo[t>>12&63]+zo[t>>6&63]+zo[t&63]}return i?s.slice(0,i-3)+"===".substring(i):s},gm=nI?e=>btoa(e):qa?e=>Buffer.from(e,"binary").toString("base64"):aI,lI=qa?e=>Buffer.from(e).toString("base64"):e=>{let r=[];for(let o=0,n=e.length;o{if(e.length<2){var t=e.charCodeAt(0);return t<128?e:t<2048?At(192|t>>>6)+At(128|t&63):At(224|t>>>12&15)+At(128|t>>>6&63)+At(128|t&63)}else{var t=65536+(e.charCodeAt(0)-55296)*1024+(e.charCodeAt(1)-56320);return At(240|t>>>18&7)+At(128|t>>>12&63)+At(128|t>>>6&63)+At(128|t&63)}},dI=/[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g,pI=e=>e.replace(dI,cI),fm=qa?e=>Buffer.from(e,"utf8").toString("base64"):mm?e=>lI(mm.encode(e)):e=>gm(pI(e)),hm=(e,t=!1)=>t?iI(fm(e)):fm(e);var Xr=(e,t)=>{let r;return(...o)=>{r&&clearTimeout(r),r=setTimeout(()=>e.apply(null,o),typeof t=="function"?t():t)}},ym=e=>{let t=document.createElement("textarea");return t.innerHTML=e,t.value};var Na=e=>e.replace(/<\/script>/g,"<\\/script>"),Er=(e,t=!0)=>e.replace(/\\/g,t?"\\\\":"\\").replace(/`/g,"\\`").replace(/<\/script>/g,"<\\/script>");var Oa=(e,t="_")=>e.replace(/[\W]+/g,t),ar=()=>{let e=!1,t=navigator.userAgent.toLowerCase();return function(r){(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(r)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(r.substr(0,4)))&&(e=!0)}(t||navigator.vendor||window.opera),e},Lr=()=>navigator.userAgent.includes("Mac")||navigator.platform.includes("Mac"),Se=e=>Lr()?e.metaKey:e.ctrlKey;var eo=e=>!e?.startsWith("http")&&!e?.startsWith("data:"),to=(e,t=document.baseURI)=>eo(e)?new URL(e,t).href:e,ft=e=>(globalThis.structuredClone||(t=>JSON.parse(JSON.stringify(t,(r,o)=>o===void 0?null:o))))(e),Wo=(e,t)=>Object.fromEntries(Object.entries(e).map(([r,o],n)=>[r,t(o,r,n)])),ro=(e,t)=>Object.fromEntries(Object.entries(e).filter(([r,o],n)=>t(o,r,n))),Ss=e=>{if("clipboard"in navigator)return navigator.clipboard.writeText(e);if(document.queryCommandSupported&&document.queryCommandSupported("copy")){let t=document.createElement("textarea");t.textContent=e,t.style.position="fixed",document.body.appendChild(t),t.select();try{return document.execCommand("copy")}catch(r){return console.warn("Copy to clipboard failed.",r),!1}finally{document.body.removeChild(t)}}return!1};var Da=e=>e.replace(/'[^'"]*'(?=(?:[^"]*"[^"]*")*[^"]*$)/g,function(r){return'"'+r.substring(1,r.length-1)+'"'}).replace(/(\w+(?=([^"\\]*(\\.|"([^"\\]*\\.)*[^"\\]*"))*[^"]*$))(\s*:)(?!(\w*)(?:"))/gm,function(r){return'"'+r.substring(0,r.length-1).trimEnd()+'":'}).replace(/,\s*([\]}])/g,"$1"),Vo=(e,t=!1)=>{try{return JSON.stringify(e,void 0,t?2:void 0)}catch{return""}},Ra=()=>String(Math.random())+"-"+Date.now().toFixed(),_a=(e,t,r)=>{let o=document.createElement("a");o.style.display="none",o.href=r,o.download=Oa(e)+"."+t,o.click(),o.remove()},Go=(e,t)=>new Promise((r,o)=>{if(t&&globalThis[t])return r(globalThis[t]);if(typeof globalThis.importScripts=="function")return globalThis.importScripts(e),t&&globalThis[t]?r(globalThis[t]):r(globalThis);let n=document.createElement("script");n.src=e,n.async=!0;let s=()=>{n.removeEventListener("load",i),n.removeEventListener("error",a)},i=()=>{if(s(),!t)return r("loaded: "+e);let l=setInterval(()=>{if(window[t])return clearInterval(l),r(window[t])},5)},a=()=>{s(),o("failed to load: "+e)};n.addEventListener("load",i),n.addEventListener("error",a),document.head.appendChild(n)}),Wt=(e,t,r)=>{if(t&&document.getElementById(t))return;let o=document.createElement("link");o.rel="stylesheet",o.href=e,o.id=t||"styles-"+Ra(),o.crossOrigin="anonymous",document.head.insertBefore(o,r?document.querySelector(r):null)};var lr=(e,t="text/javascript")=>`data:${t};charset=UTF-8;base64,`+hm(e);var oo=e=>e.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm,"$1"),uI=e=>e.replace(/'[^\n']*'/gm,"''").replace(/"[^\n"]*"/gm,'""').replace(/`[^`]*`/gm,"``"),Ba=e=>uI(oo(e)),$=(e,t)=>({...t.customSettings[e]}),Jo=e=>{if(!e)return null;let t=null;if(e.startsWith("http")||e.startsWith("data:"))try{t=new URL(e).href}catch{try{t=new URL(decodeURIComponent(e)).href}catch{}}return t};var xs=e=>e.charAt(0).toUpperCase()+e.slice(1),vm=e=>e.replace(/[-_.]+/g," ").trim().replace(/^([A-Z])|\s+(\w)/g,function(t,r,o){return o?o.toUpperCase():r.toLowerCase()}),Pt=e=>Array.from(new Set(e));var wm=(e,t)=>{if(typeof t=="object"){Object.entries(t).forEach(([o,n])=>e.setAttribute(o,n));return}let r=t.match(/[^\s="']+\s*=\s*(('[^']*')|("[^"]*"))/g)||[];for(let o of r){let[n,...s]=o.split("="),i=s.join("=");e.setAttribute(n,i.slice(1,-1))}};var bm=e=>{let t=document.createElement("div");t.style.height=e,t.style.display="none",document.body.appendChild(t);let r=window.getComputedStyle(t).height;return document.body.removeChild(t),r},Sm=e=>{let t=document.createElement("div");t.style.color=e,document.body.appendChild(t);let o=window.getComputedStyle(t).getPropertyValue("color")||"rgb(77, 121, 179)";document.body.removeChild(t);let n=o.split("(")[1].split(")")[0].split(",").map(d=>Number(d)),[s,i,a,l=1]=n;return{r:s,g:i,b:a,a:l}},mI=(e,t,r,o=1)=>{let n=e/255,s=t/255,i=r/255,a=Math.min(n,s,i),l=Math.max(n,s,i),d=l-a,c=0,m=0,h=0;return d===0?c=0:l===n?c=(s-i)/d%6:l===s?c=(i-n)/d+2:c=(n-s)/d+4,c=Math.round(c*60),c<0&&(c+=360),h=(l+a)/2,m=d===0?0:d/(1-Math.abs(2*h-1)),m=+(m*100).toFixed(0),h=+(h*100).toFixed(0),{h:c,s:m,l:h,a:o}},xm=e=>{let{r:t,g:r,b:o,a:n}=Sm(e);return mI(t,r,o,n)},fI=(e,t,r)=>"#"+((e<<16)+(t<<8)+r).toString(16).padStart(6,"0"),Em=e=>{let{r:t,g:r,b:o}=Sm(e);return fI(t,r,o)},Lm=()=>(...e)=>e,Tm=e=>{let t=e.querySelector("textarea")||e.querySelector('[role="textbox"]');if(t){let r=()=>t.tabIndex=-1;new MutationObserver(n=>{for(let s of n)s.type==="attributes"&&s.attributeName==="tabindex"&&t.tabIndex!==-1&&r()}).observe(t,{attributes:!0}),r()}};var Cm=e=>{if(!e||e.tabIndex<0)return!1;switch(e.tagName){case"A":return!!e.href;case"INPUT":return e.type!=="hidden"&&!e.disabled;case"SELECT":case"TEXTAREA":case"BUTTON":return!e.disabled;default:return!1}},$a=(e,t)=>{let r=[];for(let o of Object.keys(e))if(typeof e[o]!="function")if(!(o in t))r.push(o);else if(e[o]!==null&&typeof e[o]=="object"){let n=$a(e[o],t[o]).map(s=>`${o}.${s}`);r.push(...n)}else e[o]!==t[o]&&r.push(o);return r},Ht={APP_VERSION:"46",SDK_VERSION:"0.11.0",COMMIT_SHA:"7617d5c",REPO_URL:"https://github.com/live-codes/livecodes",DOCS_BASE_URL:"/docs/"};var km=' + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/livecodes/assets/templates/diagrams.svg b/livecodes/assets/templates/diagrams.svg new file mode 100644 index 0000000..54e2e17 --- /dev/null +++ b/livecodes/assets/templates/diagrams.svg @@ -0,0 +1,20 @@ + + + + + + + diff --git a/livecodes/assets/templates/fennel.svg b/livecodes/assets/templates/fennel.svg new file mode 100644 index 0000000..d4da01d --- /dev/null +++ b/livecodes/assets/templates/fennel.svg @@ -0,0 +1,219 @@ + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + diff --git a/livecodes/assets/templates/gleam.svg b/livecodes/assets/templates/gleam.svg new file mode 100644 index 0000000..f88c930 --- /dev/null +++ b/livecodes/assets/templates/gleam.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/livecodes/assets/templates/go.svg b/livecodes/assets/templates/go.svg new file mode 100644 index 0000000..ec964ff --- /dev/null +++ b/livecodes/assets/templates/go.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/livecodes/assets/templates/imba.svg b/livecodes/assets/templates/imba.svg new file mode 100644 index 0000000..96ba206 --- /dev/null +++ b/livecodes/assets/templates/imba.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/livecodes/assets/templates/java.svg b/livecodes/assets/templates/java.svg new file mode 100644 index 0000000..82a3111 --- /dev/null +++ b/livecodes/assets/templates/java.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/livecodes/assets/templates/javascript.svg b/livecodes/assets/templates/javascript.svg new file mode 100644 index 0000000..23243bb --- /dev/null +++ b/livecodes/assets/templates/javascript.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/livecodes/assets/templates/jest.svg b/livecodes/assets/templates/jest.svg new file mode 100644 index 0000000..00145e4 --- /dev/null +++ b/livecodes/assets/templates/jest.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/livecodes/assets/templates/jquery.svg b/livecodes/assets/templates/jquery.svg new file mode 100644 index 0000000..c815bed --- /dev/null +++ b/livecodes/assets/templates/jquery.svg @@ -0,0 +1,10 @@ + + + + + diff --git a/livecodes/assets/templates/julia.svg b/livecodes/assets/templates/julia.svg new file mode 100644 index 0000000..40dee0f --- /dev/null +++ b/livecodes/assets/templates/julia.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/livecodes/assets/templates/knockout.svg b/livecodes/assets/templates/knockout.svg new file mode 100644 index 0000000..b7a7f8c --- /dev/null +++ b/livecodes/assets/templates/knockout.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/livecodes/assets/templates/lit.svg b/livecodes/assets/templates/lit.svg new file mode 100644 index 0000000..fa8b99e --- /dev/null +++ b/livecodes/assets/templates/lit.svg @@ -0,0 +1,10 @@ + + + Lit + + + + + + + diff --git a/livecodes/assets/templates/livescript.svg b/livecodes/assets/templates/livescript.svg new file mode 100644 index 0000000..6da4af8 --- /dev/null +++ b/livecodes/assets/templates/livescript.svg @@ -0,0 +1,121 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + diff --git a/livecodes/assets/templates/lua.svg b/livecodes/assets/templates/lua.svg new file mode 100644 index 0000000..c8f6f26 --- /dev/null +++ b/livecodes/assets/templates/lua.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/livecodes/assets/templates/malina.svg b/livecodes/assets/templates/malina.svg new file mode 100644 index 0000000..d498c35 --- /dev/null +++ b/livecodes/assets/templates/malina.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/livecodes/assets/templates/markdown.svg b/livecodes/assets/templates/markdown.svg new file mode 100644 index 0000000..4a50519 --- /dev/null +++ b/livecodes/assets/templates/markdown.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/livecodes/assets/templates/mdx.svg b/livecodes/assets/templates/mdx.svg new file mode 100644 index 0000000..d5f9952 --- /dev/null +++ b/livecodes/assets/templates/mdx.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/livecodes/assets/templates/ocaml.svg b/livecodes/assets/templates/ocaml.svg new file mode 100644 index 0000000..7df1be4 --- /dev/null +++ b/livecodes/assets/templates/ocaml.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/livecodes/assets/templates/perl.svg b/livecodes/assets/templates/perl.svg new file mode 100644 index 0000000..b92f220 --- /dev/null +++ b/livecodes/assets/templates/perl.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/livecodes/assets/templates/phaser.png b/livecodes/assets/templates/phaser.png new file mode 100644 index 0000000..a37a23a Binary files /dev/null and b/livecodes/assets/templates/phaser.png differ diff --git a/livecodes/assets/templates/php.svg b/livecodes/assets/templates/php.svg new file mode 100644 index 0000000..bf57d7c --- /dev/null +++ b/livecodes/assets/templates/php.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/livecodes/assets/templates/polymer.svg b/livecodes/assets/templates/polymer.svg new file mode 100644 index 0000000..ccb9a5b --- /dev/null +++ b/livecodes/assets/templates/polymer.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/livecodes/assets/templates/postgresql.svg b/livecodes/assets/templates/postgresql.svg new file mode 100644 index 0000000..a802d2d --- /dev/null +++ b/livecodes/assets/templates/postgresql.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/livecodes/assets/templates/preact.svg b/livecodes/assets/templates/preact.svg new file mode 100644 index 0000000..dd2015d --- /dev/null +++ b/livecodes/assets/templates/preact.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/livecodes/assets/templates/python.svg b/livecodes/assets/templates/python.svg new file mode 100644 index 0000000..cfbb36f --- /dev/null +++ b/livecodes/assets/templates/python.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/livecodes/assets/templates/r.svg b/livecodes/assets/templates/r.svg new file mode 100644 index 0000000..389b03c --- /dev/null +++ b/livecodes/assets/templates/r.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/livecodes/assets/templates/react.svg b/livecodes/assets/templates/react.svg new file mode 100644 index 0000000..2fddb28 --- /dev/null +++ b/livecodes/assets/templates/react.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/livecodes/assets/templates/reason.svg b/livecodes/assets/templates/reason.svg new file mode 100644 index 0000000..6809536 --- /dev/null +++ b/livecodes/assets/templates/reason.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/livecodes/assets/templates/rescript.png b/livecodes/assets/templates/rescript.png new file mode 100644 index 0000000..b7f79b4 Binary files /dev/null and b/livecodes/assets/templates/rescript.png differ diff --git a/livecodes/assets/templates/riot.svg b/livecodes/assets/templates/riot.svg new file mode 100644 index 0000000..61c3b12 --- /dev/null +++ b/livecodes/assets/templates/riot.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/livecodes/assets/templates/ruby.svg b/livecodes/assets/templates/ruby.svg new file mode 100644 index 0000000..64b5706 --- /dev/null +++ b/livecodes/assets/templates/ruby.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/livecodes/assets/templates/sass.svg b/livecodes/assets/templates/sass.svg new file mode 100644 index 0000000..a4bf16e --- /dev/null +++ b/livecodes/assets/templates/sass.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/livecodes/assets/templates/scheme.svg b/livecodes/assets/templates/scheme.svg new file mode 100644 index 0000000..92f84db --- /dev/null +++ b/livecodes/assets/templates/scheme.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/livecodes/assets/templates/shadcn-ui.svg b/livecodes/assets/templates/shadcn-ui.svg new file mode 100644 index 0000000..b0320a2 --- /dev/null +++ b/livecodes/assets/templates/shadcn-ui.svg @@ -0,0 +1,21 @@ + + + + + + + + + + \ No newline at end of file diff --git a/livecodes/assets/templates/solid.svg b/livecodes/assets/templates/solid.svg new file mode 100644 index 0000000..025aa30 --- /dev/null +++ b/livecodes/assets/templates/solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/livecodes/assets/templates/sqlite.svg b/livecodes/assets/templates/sqlite.svg new file mode 100644 index 0000000..02c3f32 --- /dev/null +++ b/livecodes/assets/templates/sqlite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/livecodes/assets/templates/stencil.png b/livecodes/assets/templates/stencil.png new file mode 100644 index 0000000..7fd5b8d Binary files /dev/null and b/livecodes/assets/templates/stencil.png differ diff --git a/livecodes/assets/templates/svelte.svg b/livecodes/assets/templates/svelte.svg new file mode 100644 index 0000000..24602aa --- /dev/null +++ b/livecodes/assets/templates/svelte.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/livecodes/assets/templates/tailwind-play-dark.svg b/livecodes/assets/templates/tailwind-play-dark.svg new file mode 100644 index 0000000..58dc27e --- /dev/null +++ b/livecodes/assets/templates/tailwind-play-dark.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/livecodes/assets/templates/tailwind-play.svg b/livecodes/assets/templates/tailwind-play.svg new file mode 100644 index 0000000..1896a9b --- /dev/null +++ b/livecodes/assets/templates/tailwind-play.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/livecodes/assets/templates/tailwindcss.svg b/livecodes/assets/templates/tailwindcss.svg new file mode 100644 index 0000000..a662506 --- /dev/null +++ b/livecodes/assets/templates/tailwindcss.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/livecodes/assets/templates/tailwindplay.svg b/livecodes/assets/templates/tailwindplay.svg new file mode 100644 index 0000000..f03bef0 --- /dev/null +++ b/livecodes/assets/templates/tailwindplay.svg @@ -0,0 +1,16 @@ + + + + + diff --git a/livecodes/assets/templates/tau-prolog.svg b/livecodes/assets/templates/tau-prolog.svg new file mode 100644 index 0000000..1223ec7 --- /dev/null +++ b/livecodes/assets/templates/tau-prolog.svg @@ -0,0 +1,96 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/livecodes/assets/templates/tcl.svg b/livecodes/assets/templates/tcl.svg new file mode 100644 index 0000000..0325925 --- /dev/null +++ b/livecodes/assets/templates/tcl.svg @@ -0,0 +1,28 @@ + + + + + + + + + + diff --git a/livecodes/assets/templates/teal.png b/livecodes/assets/templates/teal.png new file mode 100644 index 0000000..d4ac6f5 Binary files /dev/null and b/livecodes/assets/templates/teal.png differ diff --git a/livecodes/assets/templates/typescript.svg b/livecodes/assets/templates/typescript.svg new file mode 100644 index 0000000..cbf194f --- /dev/null +++ b/livecodes/assets/templates/typescript.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/livecodes/assets/templates/vue.svg b/livecodes/assets/templates/vue.svg new file mode 100644 index 0000000..4e9883a --- /dev/null +++ b/livecodes/assets/templates/vue.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/livecodes/assets/templates/webassembly.svg b/livecodes/assets/templates/webassembly.svg new file mode 100644 index 0000000..45ac205 --- /dev/null +++ b/livecodes/assets/templates/webassembly.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/livecodes/backup.802936465ac7745725b2a5919813ccfb.js b/livecodes/backup.802936465ac7745725b2a5919813ccfb.js new file mode 100644 index 0000000..a7035be --- /dev/null +++ b/livecodes/backup.802936465ac7745725b2a5919813ccfb.js @@ -0,0 +1 @@ +var _=(e,t="_")=>e.replace(/[\W]+/g,t);var H=(e,t,n)=>{let o=document.createElement("a");o.style.display="none",o.href=n,o.download=_(e)+"."+t,o.click(),o.remove()},T=(e,t)=>new Promise((n,o)=>{if(t&&globalThis[t])return n(globalThis[t]);if(typeof globalThis.importScripts=="function")return globalThis.importScripts(e),t&&globalThis[t]?n(globalThis[t]):n(globalThis);let r=document.createElement("script");r.src=e,r.async=!0;let l=()=>{r.removeEventListener("load",s),r.removeEventListener("error",i)},s=()=>{if(l(),!t)return n("loaded: "+e);let y=setInterval(()=>{if(window[t])return clearInterval(y),n(window[t])},5)},i=()=>{l(),o("failed to load: "+e)};r.addEventListener("load",s),r.addEventListener("error",i),document.head.appendChild(r)});var v=()=>{let e=new Date,t=e.getTimezoneOffset();return e=new Date(e.getTime()-t*60*1e3),e.toISOString().split("T")[0]};var w=e=>new Uint8Array(atob(e).split("").map(t=>t.charCodeAt(0)));var q={APP_VERSION:"46",SDK_VERSION:"0.11.0",COMMIT_SHA:"7617d5c",REPO_URL:"https://github.com/live-codes/livecodes",DOCS_BASE_URL:"/docs/"};var U='';var J=e=>Object.entries(q).reduce((t,[n,o])=>t.replace(new RegExp(`{{${n}}}`,"g"),o),e);var j=J(U);var A=["esm.sh","skypack","esm.run","jsdelivr.esm","fastly.jsdelivr.esm","gcore.jsdelivr.esm","testingcf.jsdelivr.esm","jsdelivr.b-cdn.esm","jspm"],C=["jsdelivr","fastly.jsdelivr","unpkg","gcore.jsdelivr","testingcf.jsdelivr","jsdelivr.b-cdn","npmcdn"],I=["jsdelivr.gh","fastly.jsdelivr.gh","statically","gcore.jsdelivr.gh","testingcf.jsdelivr.gh","jsdelivr.b-cdn.gh"],d={getModuleUrl:(e,{isModule:t=!0,defaultCDN:n="esm.sh",external:o}={})=>{e=e.replace(/#nobundle/g,"");let r=s=>!o||!s.includes("https://esm.sh")?s:s.includes("?")?`${s}&external=${o}`:`${s}?external=${o}`,l=B(e,t,n);return l?r(l):t?r("https://esm.sh/"+e):"https://cdn.jsdelivr.net/npm/"+e},getUrl:(e,t)=>e.startsWith("http")||e.startsWith("data:")?e:B(e,!1,t||K())||e,cdnLists:{npm:C,module:A,gh:I},checkCDNs:async(e,t)=>{let n=[t,...d.cdnLists.npm].filter(Boolean);for(let o of n)try{if((await fetch(d.getUrl(e,o),{method:"HEAD"})).ok)return o}catch{}return d.cdnLists.npm[0]}},K=()=>{if(globalThis.appCDN)return globalThis.appCDN;try{return new URL(location.href).searchParams.get("appCDN")||d.cdnLists.npm[0]}catch{return d.cdnLists.npm[0]}},B=(e,t,n)=>{let o=t&&e.startsWith("unpkg:")?"?module":"";e.startsWith("gh:")?e=e.replace("gh",I[0]):e.includes(":")||(e=(n||(t?A[0]:C[0]))+":"+e);for(let r of Z){let[l,s]=r;if(l.test(e))return e.replace(l,s)+o}return null},Z=[[/^(esm\.sh:)(.+)/i,"https://esm.sh/$2"],[/^(npm:)(.+)/i,"https://esm.sh/$2"],[/^(node:)(.+)/i,"https://esm.sh/$2"],[/^(jsr:)(.+)/i,"https://esm.sh/jsr/$2"],[/^(skypack:)(.+)/i,"https://cdn.skypack.dev/$2"],[/^(jsdelivr:)(.+)/i,"https://cdn.jsdelivr.net/npm/$2"],[/^(fastly\.jsdelivr:)(.+)/i,"https://fastly.jsdelivr.net/npm/$2"],[/^(gcore\.jsdelivr:)(.+)/i,"https://gcore.jsdelivr.net/npm/$2"],[/^(testingcf\.jsdelivr:)(.+)/i,"https://testingcf.jsdelivr.net/npm/$2"],[/^(jsdelivr\.b-cdn:)(.+)/i,"https://jsdelivr.b-cdn.net/npm/$2"],[/^(jsdelivr\.gh:)(.+)/i,"https://cdn.jsdelivr.net/gh/$2"],[/^(fastly\.jsdelivr\.gh:)(.+)/i,"https://fastly.jsdelivr.net/gh/$2"],[/^(gcore\.jsdelivr\.gh:)(.+)/i,"https://gcore.jsdelivr.net/gh/$2"],[/^(testingcf\.jsdelivr\.gh:)(.+)/i,"https://testingcf.jsdelivr.net/gh/$2"],[/^(jsdelivr\.b-cdn\.gh:)(.+)/i,"https://jsdelivr.b-cdn.net/gh/$2"],[/^(statically:)(.+)/i,"https://cdn.statically.io/gh/$2"],[/^(esm\.run:)(.+)/i,"https://esm.run/$2"],[/^(jsdelivr\.esm:)(.+)/i,"https://cdn.jsdelivr.net/npm/$2/+esm"],[/^(fastly\.jsdelivr\.esm:)(.+)/i,"https://fastly.jsdelivr.net/npm/$2/+esm"],[/^(gcore\.jsdelivr\.esm:)(.+)/i,"https://gcore.jsdelivr.net/npm/$2/+esm"],[/^(testingcf\.jsdelivr\.esm:)(.+)/i,"https://testingcf.jsdelivr.net/npm/$2/+esm"],[/^(jsdelivr\.b-cdn\.esm:)(.+)/i,"https://jsdelivr.b-cdn.net/npm/$2/+esm"],[/^(jspm:)(.+)/i,"https://jspm.dev/$2"],[/^(esbuild:)(.+)/i,"https://esbuild.vercel.app/$2"],[/^(bundle\.run:)(.+)/i,"https://bundle.run/$2"],[/^(unpkg:)(.+)/i,"https://unpkg.com/$2"],[/^(npmcdn:)(.+)/i,"https://npmcdn.com/$2"],[/^(bundlejs:)(.+)/i,"https://deno.bundlejs.com/?file&q=$2"],[/^(bundle:)(.+)/i,"https://deno.bundlejs.com/?file&q=$2"],[/^(deno:)(.+)/i,"https://deno.bundlejs.com/?file&q=https://deno.land/x/$2/mod.ts"],[/^(https:\/\/deno\.land\/.+)/i,"https://deno.bundlejs.com/?file&q=$1"],[/^(github:|https:\/\/github\.com\/)(.[^\/]+?)\/(.[^\/]+?)\/(?!releases\/)(?:(?:blob|raw)\/)?(.+?\/.+)/i,"https://deno.bundlejs.com/?file&q=https://cdn.jsdelivr.net/gh/$2/$3@$4"],[/^(gist\.github:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i,"https://gist.githack.com/$2"],[/^(gitlab:|https:\/\/gitlab\.com\/)([^\/]+.*\/[^\/]+)\/(?:raw|blob)\/(.+?)(?:\?.*)?$/i,"https://deno.bundlejs.com/?file&q=https://gl.githack.com/$2/raw/$3"],[/^(bitbucket:|https:\/\/bitbucket\.org\/)([^\/]+\/[^\/]+)\/(?:raw|src)\/(.+?)(?:\?.*)?$/i,"https://deno.bundlejs.com/?file&q=https://bb.githack.com/$2/raw/$3"],[/^(bitbucket:)snippets\/([^\/]+\/[^\/]+)\/revisions\/([^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,"https://bb.githack.com/!api/2.0/snippets/$2/$3/files/$4"],[/^(bitbucket:)snippets\/([^\/]+\/[^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,"https://bb.githack.com/!api/2.0/snippets/$2/HEAD/files/$3"],[/^(bitbucket:)\!api\/2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,"https://bb.githack.com/!api/2.0/snippets/$2/files/$3"],[/^(api\.bitbucket:)2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,"https://bb.githack.com/!api/2.0/snippets/$2/files/$3"],[/^(rawgit:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i,"https://gist.githack.com/$2"],[/^(rawgit:|https:\/\/raw\.githubusercontent\.com)(\/[^\/]+\/[^\/]+|[0-9A-Za-z-]+\/[0-9a-f]+\/raw)\/(.+)/i,"https://deno.bundlejs.com/?file&q=https://raw.githack.com/$2/$3"]];var{getUrl:G,getModuleUrl:ce}=d;var L=G("jszip@3.10.1/dist/jszip.js");var S=()=>document.querySelector("#backup-link");var E=e=>e.querySelector("#file-input"),R=e=>e.querySelector(".file-input-label");var D=e=>e.querySelector("#backup-form"),P=e=>e.querySelector("#backup-btn"),$=e=>e.querySelectorAll('#backup input[type="checkbox"]:checked');var Q=e=>{let t=document.createElement("div");t.innerHTML=j;let n=t.firstChild,o=n.querySelectorAll("#backup-tabs li");return o.forEach(r=>{let l=r.querySelector("a");l&&e.addEventListener(l,"click",()=>{o.forEach(i=>i.classList.remove("active")),r.classList.add("active"),document.querySelectorAll("#backup-screens > div").forEach(i=>{i.classList.remove("active")});let s=n.querySelector("#"+l.dataset.target);s?.classList.add("active"),s?.querySelector("input")?.focus()})}),n},f=window.deps.translateString("backup.inProgress","In progress..."),X=()=>S()?.title===f,x=({inProgress:e,backupContainer:t})=>{let n=S(),o=P(t),r=E(t),l=R(t);e??X()?(n&&(n.title=f),o.innerText=f,o.disabled=!0,l.innerText=f,r.disabled=!0):(n&&(n.title=""),o.innerText=window.deps.translateString("backup.backupBtn","Backup"),o.disabled=!1,l.innerText=window.deps.translateString("backup.fileInputLabel","Restore from file"),r.disabled=!1)},de=({baseUrl:e,modal:t,notifications:n,eventsManager:o,stores:r,deps:l})=>{let s=Q(o),i=D(s),y=E(s);x({backupContainer:s});let M=import(e+"sync.bf1450a5c977bc26aa5dba4dc7fd50e6.js").then(c=>(c.init(e),c)),F=async c=>{let m=await T(L,"JSZip"),p=new m;c.forEach(({filename:k,content:h})=>{p.file(k,h)});let a=await p.generateAsync({type:"base64",compression:"DEFLATE",compressionOptions:{level:6}}),u="livecodes_backup_"+v(),g="zip",b="data:application/zip;base64,"+encodeURIComponent(a);H(u,g,b)},N=async()=>{let c=[...$(s)].map(a=>a.dataset.store).filter(Boolean);if(c.length===0){n.warning(window.deps.translateString("backup.error.atLeastOneStore","Please select at least one store to backup"));return}c.includes("userConfig")&&(c.push("userData"),c.push("appData"));let m=await M,p=await Promise.all(c.filter(a=>!!r[a]).map(async a=>({filename:a+".b64",content:await m.exportStoreAsBase64Update({storeKey:a})||""})));await F(p)},O=c=>new Promise((m,p)=>{if(c.files?.length===0)return;let a=c.files[0];if(!a.name.endsWith(".zip")){p(window.deps.translateString("backup.error.incorrectFileType","Error: Incorrect file type"));return}let u=100*1024*1024;if(a.size>u){p(window.deps.translateString("generic.error.exceededSize","Error: Exceeded size {{size}} MB",{size:100}));return}m(a)}),W=async c=>{let a=(await(await T(L,"JSZip")).loadAsync(c)).file(/\.b64$/);return Promise.all(a.map(async u=>({filename:u.name,content:await u.async("string")})))},z=async c=>{let m=await M,a=new FormData(i).get("restore-mode")==="merge";for(let g of c){let b=g.filename.slice(0,-4);if(r[b]){let h=w(g.content);await m.restoreFromUpdate({update:h,storeKey:b,mergeCurrent:a})}}c.find(g=>g.filename.startsWith("user"))&&l.loadUserConfig(),n.success(window.deps.translateString("backup.restore.success","Restored Successfully!"))};o.addEventListener(i,"submit",async c=>{c.preventDefault(),x({inProgress:!0,backupContainer:s}),await N(),x({inProgress:!1,backupContainer:s})}),o.addEventListener(y,"change",async()=>{x({inProgress:!0,backupContainer:s}),await Promise.resolve(y).then(O).then(W).then(z).catch(c=>{n.error(c)}),x({inProgress:!1,backupContainer:s})}),t.show(s,{isAsync:!0})};export{de as createBackupUI,X as isInProgress,x as updateProgressStatus}; diff --git a/livecodes/blockly.cdad9db2b2bf571e07f24309b11d6716.js b/livecodes/blockly.cdad9db2b2bf571e07f24309b11d6716.js new file mode 100644 index 0000000..f58b2d8 --- /dev/null +++ b/livecodes/blockly.cdad9db2b2bf571e07f24309b11d6716.js @@ -0,0 +1,39 @@ +var qr=Object.create;var de=Object.defineProperty;var Nr=Object.getOwnPropertyDescriptor;var Dr=Object.getOwnPropertyNames;var $r=Object.getPrototypeOf,Fr=Object.prototype.hasOwnProperty;var Hr=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var Jr=(e,t,s,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of Dr(t))!Fr.call(e,p)&&p!==s&&de(e,p,{get:()=>t[p],enumerable:!(a=Nr(t,p))||a.enumerable});return e};var Vr=(e,t,s)=>(s=e!=null?qr($r(e)):{},Jr(t||!e||!e.__esModule?de(s,"default",{value:e,enumerable:!0}):s,e));var it=Hr((ra,z)=>{var ds=function(){var e=String.fromCharCode,t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",s="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-$",a={};function p(o,i){if(!a[o]){a[o]={};for(var u=0;u>>8,u[m*2+1]=b%256}return u},decompressFromUint8Array:function(o){if(o==null)return y.decompress(o);for(var i=new Array(o.length/2),u=0,m=i.length;u>1}else{for(d=1,m=0;m>1}L--,L==0&&(L=Math.pow(2,x),x++),delete j[v]}else for(d=b[v],m=0;m>1;L--,L==0&&(L=Math.pow(2,x),x++),b[k]=E++,v=String(S)}if(v!==""){if(Object.prototype.hasOwnProperty.call(j,v)){if(v.charCodeAt(0)<256){for(m=0;m>1}else{for(d=1,m=0;m>1}L--,L==0&&(L=Math.pow(2,x),x++),delete j[v]}else for(d=b[v],m=0;m>1;L--,L==0&&(L=Math.pow(2,x),x++)}for(d=2,m=0;m>1;for(;;)if(l=l<<1,c==i-1){w.push(u(l));break}else c++;return w.join("")},decompress:function(o){return o==null?"":o==""?null:y._decompress(o.length,32768,function(i){return o.charCodeAt(i)})},_decompress:function(o,i,u){var m=[],d,b=4,j=4,S=3,k="",v=[],L,E,x,w,l,c,C,h={val:u(0),position:i,index:1};for(L=0;L<3;L+=1)m[L]=L;for(x=0,l=Math.pow(2,2),c=1;c!=l;)w=h.val&h.position,h.position>>=1,h.position==0&&(h.position=i,h.val=u(h.index++)),x|=(w>0?1:0)*c,c<<=1;switch(d=x){case 0:for(x=0,l=Math.pow(2,8),c=1;c!=l;)w=h.val&h.position,h.position>>=1,h.position==0&&(h.position=i,h.val=u(h.index++)),x|=(w>0?1:0)*c,c<<=1;C=e(x);break;case 1:for(x=0,l=Math.pow(2,16),c=1;c!=l;)w=h.val&h.position,h.position>>=1,h.position==0&&(h.position=i,h.val=u(h.index++)),x|=(w>0?1:0)*c,c<<=1;C=e(x);break;case 2:return""}for(m[3]=C,E=C,v.push(C);;){if(h.index>o)return"";for(x=0,l=Math.pow(2,S),c=1;c!=l;)w=h.val&h.position,h.position>>=1,h.position==0&&(h.position=i,h.val=u(h.index++)),x|=(w>0?1:0)*c,c<<=1;switch(C=x){case 0:for(x=0,l=Math.pow(2,8),c=1;c!=l;)w=h.val&h.position,h.position>>=1,h.position==0&&(h.position=i,h.val=u(h.index++)),x|=(w>0?1:0)*c,c<<=1;m[j++]=e(x),C=j-1,b--;break;case 1:for(x=0,l=Math.pow(2,16),c=1;c!=l;)w=h.val&h.position,h.position>>=1,h.position==0&&(h.position=i,h.val=u(h.index++)),x|=(w>0?1:0)*c,c<<=1;m[j++]=e(x),C=j-1,b--;break;case 2:return v.join("")}if(b==0&&(b=Math.pow(2,S),S++),m[C])k=m[C];else if(C===j)k=E+E.charAt(0);else return null;v.push(k),m[j++]=E+k.charAt(0),b--,E=k,b==0&&(b=Math.pow(2,S),S++)}}};return y}();typeof z<"u"&&z!=null&&(z.exports=ds)});var ge=["esm.sh","skypack","esm.run","jsdelivr.esm","fastly.jsdelivr.esm","gcore.jsdelivr.esm","testingcf.jsdelivr.esm","jsdelivr.b-cdn.esm","jspm"],fe=["jsdelivr","fastly.jsdelivr","unpkg","gcore.jsdelivr","testingcf.jsdelivr","jsdelivr.b-cdn","npmcdn"],ye=["jsdelivr.gh","fastly.jsdelivr.gh","statically","gcore.jsdelivr.gh","testingcf.jsdelivr.gh","jsdelivr.b-cdn.gh"],P={getModuleUrl:(e,{isModule:t=!0,defaultCDN:s="esm.sh",external:a}={})=>{e=e.replace(/#nobundle/g,"");let p=o=>!a||!o.includes("https://esm.sh")?o:o.includes("?")?`${o}&external=${a}`:`${o}?external=${a}`,y=ue(e,t,s);return y?p(y):t?p("https://esm.sh/"+e):"https://cdn.jsdelivr.net/npm/"+e},getUrl:(e,t)=>e.startsWith("http")||e.startsWith("data:")?e:ue(e,!1,t||he())||e,cdnLists:{npm:fe,module:ge,gh:ye},checkCDNs:async(e,t)=>{let s=[t,...P.cdnLists.npm].filter(Boolean);for(let a of s)try{if((await fetch(P.getUrl(e,a),{method:"HEAD"})).ok)return a}catch{}return P.cdnLists.npm[0]}},he=()=>{if(globalThis.appCDN)return globalThis.appCDN;try{return new URL(location.href).searchParams.get("appCDN")||P.cdnLists.npm[0]}catch{return P.cdnLists.npm[0]}},ue=(e,t,s)=>{let a=t&&e.startsWith("unpkg:")?"?module":"";e.startsWith("gh:")?e=e.replace("gh",ye[0]):e.includes(":")||(e=(s||(t?ge[0]:fe[0]))+":"+e);for(let p of zr){let[y,o]=p;if(y.test(e))return e.replace(y,o)+a}return null},zr=[[/^(esm\.sh:)(.+)/i,"https://esm.sh/$2"],[/^(npm:)(.+)/i,"https://esm.sh/$2"],[/^(node:)(.+)/i,"https://esm.sh/$2"],[/^(jsr:)(.+)/i,"https://esm.sh/jsr/$2"],[/^(skypack:)(.+)/i,"https://cdn.skypack.dev/$2"],[/^(jsdelivr:)(.+)/i,"https://cdn.jsdelivr.net/npm/$2"],[/^(fastly\.jsdelivr:)(.+)/i,"https://fastly.jsdelivr.net/npm/$2"],[/^(gcore\.jsdelivr:)(.+)/i,"https://gcore.jsdelivr.net/npm/$2"],[/^(testingcf\.jsdelivr:)(.+)/i,"https://testingcf.jsdelivr.net/npm/$2"],[/^(jsdelivr\.b-cdn:)(.+)/i,"https://jsdelivr.b-cdn.net/npm/$2"],[/^(jsdelivr\.gh:)(.+)/i,"https://cdn.jsdelivr.net/gh/$2"],[/^(fastly\.jsdelivr\.gh:)(.+)/i,"https://fastly.jsdelivr.net/gh/$2"],[/^(gcore\.jsdelivr\.gh:)(.+)/i,"https://gcore.jsdelivr.net/gh/$2"],[/^(testingcf\.jsdelivr\.gh:)(.+)/i,"https://testingcf.jsdelivr.net/gh/$2"],[/^(jsdelivr\.b-cdn\.gh:)(.+)/i,"https://jsdelivr.b-cdn.net/gh/$2"],[/^(statically:)(.+)/i,"https://cdn.statically.io/gh/$2"],[/^(esm\.run:)(.+)/i,"https://esm.run/$2"],[/^(jsdelivr\.esm:)(.+)/i,"https://cdn.jsdelivr.net/npm/$2/+esm"],[/^(fastly\.jsdelivr\.esm:)(.+)/i,"https://fastly.jsdelivr.net/npm/$2/+esm"],[/^(gcore\.jsdelivr\.esm:)(.+)/i,"https://gcore.jsdelivr.net/npm/$2/+esm"],[/^(testingcf\.jsdelivr\.esm:)(.+)/i,"https://testingcf.jsdelivr.net/npm/$2/+esm"],[/^(jsdelivr\.b-cdn\.esm:)(.+)/i,"https://jsdelivr.b-cdn.net/npm/$2/+esm"],[/^(jspm:)(.+)/i,"https://jspm.dev/$2"],[/^(esbuild:)(.+)/i,"https://esbuild.vercel.app/$2"],[/^(bundle\.run:)(.+)/i,"https://bundle.run/$2"],[/^(unpkg:)(.+)/i,"https://unpkg.com/$2"],[/^(npmcdn:)(.+)/i,"https://npmcdn.com/$2"],[/^(bundlejs:)(.+)/i,"https://deno.bundlejs.com/?file&q=$2"],[/^(bundle:)(.+)/i,"https://deno.bundlejs.com/?file&q=$2"],[/^(deno:)(.+)/i,"https://deno.bundlejs.com/?file&q=https://deno.land/x/$2/mod.ts"],[/^(https:\/\/deno\.land\/.+)/i,"https://deno.bundlejs.com/?file&q=$1"],[/^(github:|https:\/\/github\.com\/)(.[^\/]+?)\/(.[^\/]+?)\/(?!releases\/)(?:(?:blob|raw)\/)?(.+?\/.+)/i,"https://deno.bundlejs.com/?file&q=https://cdn.jsdelivr.net/gh/$2/$3@$4"],[/^(gist\.github:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i,"https://gist.githack.com/$2"],[/^(gitlab:|https:\/\/gitlab\.com\/)([^\/]+.*\/[^\/]+)\/(?:raw|blob)\/(.+?)(?:\?.*)?$/i,"https://deno.bundlejs.com/?file&q=https://gl.githack.com/$2/raw/$3"],[/^(bitbucket:|https:\/\/bitbucket\.org\/)([^\/]+\/[^\/]+)\/(?:raw|src)\/(.+?)(?:\?.*)?$/i,"https://deno.bundlejs.com/?file&q=https://bb.githack.com/$2/raw/$3"],[/^(bitbucket:)snippets\/([^\/]+\/[^\/]+)\/revisions\/([^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,"https://bb.githack.com/!api/2.0/snippets/$2/$3/files/$4"],[/^(bitbucket:)snippets\/([^\/]+\/[^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,"https://bb.githack.com/!api/2.0/snippets/$2/HEAD/files/$3"],[/^(bitbucket:)\!api\/2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,"https://bb.githack.com/!api/2.0/snippets/$2/files/$3"],[/^(api\.bitbucket:)2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,"https://bb.githack.com/!api/2.0/snippets/$2/files/$3"],[/^(rawgit:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i,"https://gist.githack.com/$2"],[/^(rawgit:|https:\/\/raw\.githubusercontent\.com)(\/[^\/]+\/[^\/]+|[0-9A-Za-z-]+\/[0-9a-f]+\/raw)\/(.+)/i,"https://deno.bundlejs.com/?file&q=https://raw.githack.com/$2/$3"]];var{getUrl:f,getModuleUrl:Hs}=P,n=f("@live-codes/browser-compilers@0.22.3/dist/");var xe=f("art-template@4.13.2/lib/template-web.js"),be=f("@asciidoctor/core@2.2.8/dist/browser/asciidoctor.js"),we=f("@assemblyscript/loader@0.27.29/umd/index.js");var ve=f("@hatemhosny/astro-internal@0.0.4/");var Se=f("@babel/standalone@7.26.4/babel.js"),je=f("biwascheme@0.8.0/release/biwascheme.js"),Le=f("blockly@11.1.1/");var X=f("brython@3.12.4/");var H=f("cherry-cljs@0.2.19/");var G=f("@live-codes/clio-browser-compiler@0.0.3/public/build/");var Ue=f("coffeescript@2.7.0/lib/coffeescript-browser-compiler-legacy/coffeescript.js");var Ce=f("dot@1.1.3/doT.js"),ke=f("ejs@3.1.10/ejs.js");var Te=f("eta@3.4.0/dist/eta.umd.js");var I=f("@live-codes/go2js@0.5.0/build/");var Z=f("handlebars@4.7.8/dist/");var Q=f("imba@2.0.0-alpha.229/dist/");var _e=f("gh:jscl-project/jscl-project.github.io@058adc599f0d012718ef3ad28e704a92c4dd741e/jscl.js");var Pe=f("liquidjs@10.14.0/dist/liquid.browser.min.js");var R=f("fengari-web@0.1.4/dist/fengari-web.js");var Ee=f("malinajs@0.7.19/"),Re=f("marked@13.0.2/marked.min.js");var Me=f("mjml-browser@4.15.3/lib/index.js");var Ae=f("mustache@4.2.0/mustache.js");var Y=f("nunjucks@3.2.4/browser/"),q=f("https://cdn.opalrb.com/opal/1.8.2/"),Ie=f("parinfer@3.13.1/parinfer.js");var M=f("prettier@3.3.2/"),Be=f("@prettier/plugin-php@0.22.2/standalone.js");var Oe=f("requirejs@2.3.6/require.js");var ee=f("riot@9.2.2/");var We=f("@ruby/wasm-wasi@2.6.2/dist/browser.umd.js");var J=f("sql-formatter@12.2.1/dist/sql-formatter.min.js"),qe=f("sql.js@1.10.3/dist/"),B=f("squint-cljs@0.4.81/"),Ne=f("@stencil/core@3.2.2/compiler/stencil.js"),De=f("stylis@4.3.2/dist/umd/stylis.js"),U=f("svelte@5.12.0/");var T=f("tau-prolog@0.3.4/modules/");var $e=f("twig@1.17.1/twig.min.js"),Fe=f("typescript@5.6.2/lib/typescript.js");var He=f("uniter@2.18.0/dist/uniter.js");var te=f("vue@2"),Je=f("vue@3/dist/vue.runtime.esm-browser.prod.js"),Ve=f("livecodes@0.11.0/vue.js"),ze=f("vue3-sfc-loader@0.9.5/dist/"),Ke=f("wabt@1.0.35/index.js"),Xe=f("wasmoon@1.16.0/dist/index.js");var Zs=M+"standalone.js",r={babel:M+"plugins/babel.js",estree:M+"plugins/estree.js",glimmer:M+"plugins/glimmer.js",html:M+"plugins/html.js",markdown:M+"plugins/markdown.js",postcss:M+"plugins/postcss.js",php:Be,pug:n+"prettier/parser-pug.js",java:n+"prettier/parser-java.js"};var Ge={name:"art-template",title:"art",longTitle:"art-template",parser:{name:"html",pluginUrls:[r.html]},compiler:{url:xe,factory:(e,t)=>(self.importScripts(t+"lang-art-template-compiler.f7f28bfde1988e977306171ed26474d0.js"),self.createArtTemplateCompiler())},extensions:["art","art-template"],editor:"markup",editorLanguage:"html"};var Ze=(e,t)=>{let s;return(...a)=>{s&&clearTimeout(s),s=setTimeout(()=>e.apply(null,a),typeof t=="function"?t():t)}};var re=(e,t=!0)=>e.replace(/\\/g,t?"\\\\":"\\").replace(/`/g,"\\`").replace(/<\/script>/g,"<\\/script>");var g=(e,t)=>({...t.customSettings[e]});var Kr={name:"lightningcss",title:"Lightning CSS",isPostcssPlugin:!1,compiler:{url:n+"lightningcss/lightningcss.js",factory:(e,t)=>(self.importScripts(t+"processor-lightningcss-compiler.bfb68fd433e1548d10fee6992259f228.js"),self.createLightningcssCompiler())},editor:"style"};var Xr={name:"autoprefixer",title:"Autoprefixer",isPostcssPlugin:!0,compiler:{url:n+"autoprefixer/autoprefixer.js",factory:e=>self.autoprefixer.autoprefixer({...g("autoprefixer",e)})},editor:"style"},Gr={name:"cssnano",title:"cssnano",isPostcssPlugin:!0,compiler:{url:n+"cssnano/cssnano.js",factory:()=>{let e=self.cssnano.cssnanoPresetDefault().plugins,t=[];for(let s of e){let[a,p]=s;(typeof p>"u"||typeof p=="object"&&!p.exclude||typeof p=="boolean"&&p===!0)&&t.push(a(p))}return t}},editor:"style"};var Zr={name:"postcssPresetEnv",title:"Preset Env",isPostcssPlugin:!0,compiler:{url:n+"postcss-preset-env/postcss-preset-env.js",factory:e=>self.postcssPresetEnv.postcssPresetEnv({autoprefixer:!1,...g("postcssPresetEnv",e)})},editor:"style"},Qr={name:"purgecss",title:"PurgeCSS",isPostcssPlugin:!0,needsHTML:!0,compiler:{url:n+"purgecss/purgecss.js",factory:(e,t,s)=>self.purgecss.purgecss({...g("purgecss",e),content:[{raw:`