Merge branch 'develop' into keyboard-shortcuts

.bundlewatch.config.js

@@ -9,7 +9,7 @@ module.exports = {
       maxSize: '30kB',
     },
     {
-      path: './build/livecodes/*(app|embed|lite|headless).*.js',
+      path: './build/livecodes/*(app|embed|headless).*.js',
       maxSize: '120kB',
     },
     // {

docs/docs/configuration/configuration-object.md

@@ -130,11 +130,6 @@ An object that configures the language and content of the markup editor. This ca
   This can be a language name, extension or alias (as defined in [language documentations](../languages/index.md)).  
   (e.g. `"markdown"`, `"md"`)
 
-- `title`:
-  Type: [`string | undefined`](https://livecodes.io/docs/api/interfaces/internal.Editor#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)").
-
 - `content`:
   Type: [`string | undefined`](https://livecodes.io/docs/api/interfaces/internal.Editor#content)  
   Default: `""`  
@@ -158,6 +153,17 @@ An object that configures the language and content of the markup editor. This ca
   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.
 
+- `title`:
+  Type: [`string | undefined`](https://livecodes.io/docs/api/interfaces/internal.Editor#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`](https://livecodes.io/docs/api/interfaces/internal.Editor#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).
+
 - `selector`:
   Type: [`string | undefined`](https://livecodes.io/docs/api/interfaces/internal.Editor#selector)  
   Default: `undefined`  
@@ -379,9 +385,17 @@ Default: `true`
 
 If `false`, the UI will not show the menu that allows changing editor language.
 
+### `view`
+
+Type: [`"editor" | "result" | "split" | "headless"`](../api/interfaces/Config.md#view)
+
+Default: `"split"`
+
+The [default view](../features/default-view.md) for the playground.
+
 ### `mode`
 
-Type: [`"full" | "focus" | "simple" | "result" | "editor" | "codeblock"`](../api/interfaces/Config.md#mode)
+Type: [`"full" | "focus" | "simple" | "lite" | "result" | "editor" | "codeblock"`](../api/interfaces/Config.md#mode)
 
 Default: `"full"`
 

docs/docs/features/default-view.md

@@ -12,7 +12,7 @@ Example: https://livecodes.io/?view=split
 
 Demo:
 
-<LiveCodes view="split"></LiveCodes>
+<LiveCodes config={{view: 'split'}}></LiveCodes>
 
 ## `editor`
 
@@ -22,7 +22,7 @@ Example: https://livecodes.io/?view=editor
 
 Demo:
 
-<LiveCodes view="editor"></LiveCodes>
+<LiveCodes config={{view: 'editor'}}></LiveCodes>
 
 ## `result`
 
@@ -32,7 +32,7 @@ Example: https://livecodes.io/?view=result
 
 Demo:
 
-<LiveCodes view="result"></LiveCodes>
+<LiveCodes config={{view: 'result'}}></LiveCodes>
 
 ## Display Mode vs Default View
 

docs/docs/features/display-modes.md

@@ -60,6 +60,17 @@ content: '.App {\n font-family: sans-serif;\n text-align: center;\n}\n'.trimStar
 
 <LiveCodes config={simpleConfig} height="400px"></LiveCodes>
 
+## `lite`
+
+Loads a light-weight, minimal code editor, with limited playground features.  
+See the section about [lite mode](./lite.md) for details
+
+Example: https://livecodes.io/?mode=lite&template=react
+
+Demo:
+
+<LiveCodes config={{mode:'lite'}} template="react"></LiveCodes>
+
 ## `editor`
 
 Hides the results pane and works as editor only.

docs/docs/features/lite.md

@@ -8,23 +8,23 @@ In lite mode, a light-weight, minimal code editor is used ([CodeJar](./editor-se
 
 Demo:
 
-<LiveCodes template="react" lite={true}></LiveCodes>
+<LiveCodes template="react" config={{mode: 'lite'}}></LiveCodes>
 
 ## Using SDK
 
-set [EmbedOptions.lite](../sdk/js-ts.md#lite) to `true`.
+Set [`EmbedOptions.config.mode`](../configuration/configuration-object.md#mode) to `"lite"`.
 
 ```js
 import { createPlayground } from 'livecodes';
 
-createPlayground('#container', { lite: true });
+createPlayground('#container', { config: { mode: 'lite' } });
 ```
 
 ## Using query params
 
-add the [query parameter](../configuration/query-params.md) `lite` (no need to set a value).
+Add the [query parameter](../configuration/query-params.md) `?mode=lite`.
 
-https://livecodes.io?lite
+https://livecodes.io?mode=lite
 
 ## Related
 

docs/docs/sdk/js-ts.md

@@ -47,12 +47,11 @@ import { createPlayground, type EmbedOptions } from 'livecodes';
 const options: EmbedOptions = {
   // appUrl: ...
   // config: ...
+  // headless: ...
   // import: ...
-  // lite: ...
   // loading: ...
   // params: ...
   // template: ...
-  // view: ...
 };
 
 createPlayground('#container', options).then((playground) => {
@@ -128,19 +127,19 @@ A [configuration object](../configuration/configuration-object.md) or a URL to a
 
 If supplied and is not an object or a valid URL, an error is thrown.
 
-### `import`
+### `headless`
 
-Type: [`string`](../api/interfaces/EmbedOptions.md#import)
+Type: [`boolean`](../api/interfaces/EmbedOptions.md#headless)
 
-A resource to [import](../features/import.md) (from any of the supported [sources](../features/import.md#sources)).
+Default: `false`
 
-### `lite`
+When set to `true`, the playground is loaded in [headless mode](./headless.md).
 
-Type: [`boolean`](../api/interfaces/EmbedOptions.md#lite)
+### `import`
 
-Default: `false`
+Type: [`string`](../api/interfaces/EmbedOptions.md#import)
 
-If `true`, the playground is loaded in [lite mode](../features/lite.md).
+A resource to [import](../features/import.md) (from any of the supported [sources](../features/import.md#sources)).
 
 ### `loading`
 
@@ -185,16 +184,6 @@ Type: [`TemplateName`](../api/interfaces/EmbedOptions.md#template)
 
 A [starter template](../features/templates.md) to load. Allowed valued can be found [here](../api/interfaces/EmbedOptions.md#template).
 
-### `view`
-
-Type: [`"editor" | "result" | "split" | "headless"`](../api/interfaces/EmbedOptions.md#view)
-
-Default: `"split"`
-
-The [default view](../features/default-view.md) for the playground.
-
-When set to `"headless"`, the playground is loaded in [headless mode](./headless.md).
-
 ## 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:
@@ -324,13 +313,14 @@ createPlayground('#container').then(async (playground) => {
 
 ### `show`
 
-Type: [`(panel: EditorId | Lowercase<Tool['title']> | 'result', options?: { full?: boolean; line?: number; column?: number; zoom?: 1 | 0.5 | 0.25 }) => Promise<void>`](../api/interfaces/Playground.md#show)
+Type: [`(panel: 'code' | 'markup' | 'style' | 'script' | 'console' | 'compiled' | 'tests' | 'result' | 'toggle-result', options?: { full?: boolean; line?: number; column?: number; zoom?: 1 | 0.5 | 0.25 }) => Promise<void>`](../api/interfaces/Playground.md#show)
 
 Shows the selected panel, which is either:
 
-- Editor: `markup`, `style` or `script`
+- Active Editor: `code`
+- Specific Editor: `markup`, `style` or `script`
 - Tool: `console`, `compiled` or `tests`
-- Result page: `result`
+- Result page: `result` or `toggle-result`
 
 The second optional argument is an object:
 
@@ -349,6 +339,8 @@ createPlayground('#container').then(async (playground) => {
       setTimeout(resolve, duration);
     });
 
+  await playground.show('toggle-result');
+  await delay(2000);
   await playground.show('style');
   await delay(2000);
   await playground.show('result', { full: true });

scripts/build.js

@@ -68,14 +68,14 @@ const baseOptions = {
     ...(devMode
       ? []
       : [
-        minifyHTML({
-          collapseWhitespace: true,
-          collapseBooleanAttributes: true,
-          minifyJS: true,
-          minifyCSS: true,
-          processScripts: ['importmap'],
-        }),
-      ]),
+          minifyHTML({
+            collapseWhitespace: true,
+            collapseBooleanAttributes: true,
+            minifyJS: true,
+            minifyCSS: true,
+            processScripts: ['importmap'],
+          }),
+        ]),
   ],
 };
 
@@ -146,7 +146,6 @@ const esmBuild = () =>
     entryPoints: [
       'app.ts',
       'embed.ts',
-      'lite.ts',
       'headless.ts',
       'templates/starter/index.ts',
       'editor/monaco/monaco.ts',
@@ -266,7 +265,7 @@ const workersBuild = () =>
       fs.writeFile(
         path.resolve('build/livecodes', filename),
         filename.endsWith('.map') ? content : iife(content),
-        () => { },
+        () => {},
       );
     }
   });

src/livecodes/config/build-config.ts

@@ -104,6 +104,7 @@ export const loadParamConfig = (config: Config, params: UrlQueryParams): Partial
   // ?languages=html,md,css,scss,ts
   // ?console
   // ?tests=full
+  // ?lite
 
   // initialize paramsConfig with defaultConfig keys and params values
   const paramsConfig = ([...Object.keys(defaultConfig), ...[]] as Array<keyof Config>)
@@ -298,5 +299,10 @@ export const loadParamConfig = (config: Config, params: UrlQueryParams): Partial
     }
   }
 
+  // ?lite
+  if (params.lite) {
+    paramsConfig.mode = 'lite';
+  }
+
   return paramsConfig;
 };

src/livecodes/config/config.ts

@@ -45,6 +45,7 @@ export const getAppConfig = (config: Config | AppConfig): AppConfig =>
   cloneObject({
     readonly: config.readonly,
     allowLangChange: config.allowLangChange,
+    view: config.view,
     mode: config.mode,
     tools: config.tools,
     zoom: config.zoom,

src/livecodes/config/default-config.ts

@@ -11,6 +11,7 @@ export const defaultConfig: Config = {
   autotest: false,
   delay: 1500,
   formatOnsave: false,
+  view: 'split',
   mode: 'full',
   theme: 'dark',
   themeColor: undefined,

src/livecodes/config/validate-config.ts

@@ -24,7 +24,16 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
 
   const includes = (arr: any[], x: any) => x != null && arr.includes(x);
 
-  const modes: Array<Config['mode']> = ['full', 'focus', 'simple', 'editor', 'codeblock', 'result'];
+  const views: Array<Config['view']> = ['split', 'editor', 'result'];
+  const modes: Array<Config['mode']> = [
+    'full',
+    'focus',
+    'lite',
+    'simple',
+    'editor',
+    'codeblock',
+    'result',
+  ];
   const themes: Array<Config['theme']> = ['light', 'dark'];
   const layout: Array<Config['layout']> = ['responsive', 'horizontal', 'vertical'];
   const editorModes: Array<Config['editorMode']> = ['vim', 'emacs'];
@@ -51,6 +60,7 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
     ...(is(x.title, 'string') ? { title: x.title } : {}),
     ...(is(x.content, 'string') ? { content: x.content } : {}),
     ...(is(x.contentUrl, 'string') ? { contentUrl: x.contentUrl } : {}),
+    ...(is(x.hideTitle, 'boolean') ? { hideTitle: x.hideTitle } : {}),
     ...(is(x.hiddenContent, 'string') ? { hiddenContent: x.hiddenContent } : {}),
     ...(is(x.hiddenContentUrl, 'string') ? { hiddenContentUrl: x.hiddenContentUrl } : {}),
     ...(is(x.selector, 'string') ? { selector: x.selector } : {}),
@@ -102,6 +112,7 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
     ...(is(config.autotest, 'boolean') ? { autotest: config.autotest } : {}),
     ...(is(config.delay, 'number') ? { delay: Number(config.delay) } : {}),
     ...(is(config.formatOnsave, 'boolean') ? { formatOnsave: config.formatOnsave } : {}),
+    ...(includes(views, config.view) ? { view: config.view } : {}),
     ...(includes(modes, config.mode) ? { mode: config.mode } : {}),
     ...(includes(themes, config.theme) ? { theme: config.theme } : {}),
     ...(is(config.themeColor, 'string') ? { themeColor: config.themeColor } : {}),