Multi-file support

README.md

@@ -13,7 +13,7 @@ A [feature-rich](https://livecodes.io/docs/features/), open-source, **client-sid
 [![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-98-blue)](https://livecodes.io/docs/languages/)
+[![LiveCodes: languages](https://img.shields.io/badge/languages-99-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)

docs/docs/configuration/configuration-object.mdx

@@ -141,6 +141,12 @@ An object that configures the language and content of the markup editor. This ca
   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.
 
+- `hidden`:
+  Type: [`boolean | undefined`](../api/interfaces/Config.md#hidden)
+  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).
+
 - `hiddenContent`:
   Type: [`string | undefined`](../api/interfaces/Config.md#hiddencontent)
   Default: `undefined`
@@ -153,18 +159,12 @@ 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.
 
-- `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`:
+- `hideTitle` (**deprecated**, use `hidden` instead):
   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.
@@ -186,6 +186,12 @@ An object that configures the language and content of the markup editor. This ca
   The initial position of the cursor in the code editor.
   Example: `{lineNumber: 5, column: 10}`
 
+- `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.
+
 ### `style`
 
 Type: [`Editor`](../api/interfaces/Config.md#style)

docs/docs/languages/cssmodules.mdx

@@ -8,7 +8,7 @@ The selector names are unique to avoid naming collision. They can then be import
 
 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.
+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 can be injected into the HTML elements.
 
 **Example:**
 
@@ -193,7 +193,7 @@ In addition, the following settings are available:
 
 - `addClassesToHTML`
 
-  Type: `boolean`. Default: `true`.
+  Type: `boolean`. Default: `false`.
 
   The generated classes are injected into the HTML elements, so the styles are applied without having to assign them using JavaScript.
 
@@ -212,7 +212,7 @@ Please note that custom settings should be valid JSON (i.e. functions are not al
   "cssmodules": {
     "exportGlobals": true,
     "localsConvention": "camelCaseOnly",
-    "addClassesToHTML": false
+    "addClassesToHTML": true
   }
 }
 ```
@@ -234,16 +234,30 @@ If you get this working, [please create a pull request](https://github.com/live-
 
 import LiveCodes from '../../src/components/LiveCodes.tsx';
 
-export const params = {
+export const config = {
   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',
-};
-
-<LiveCodes params={params} height="400"></LiveCodes>
+  markup: {
+    language: 'html',
+    content: '<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',
+  },
+  style: {
+    language: 'css',
+    content: ':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',
+  },
+  script: {
+    language: 'js',
+    content: "import classes from './style.module.css';\n\ndocument.querySelector('h1').className = classes.title;\nconsole.log(classes);\n",
+  },
+  processors: ['cssmodules'],
+  tools: { active: 'compiled' },
+  customSettings: {
+    cssmodules: {
+      addClassesToHTML: true,
+    },
+  }
+}
+
+<LiveCodes config={config} height="400"></LiveCodes>
 
 ## Links
 

docs/docs/languages/html.mdx

@@ -48,7 +48,7 @@ or adding JavaScript together with a different script editor language (e.g. see
 
 ### Extensions
 
-`.html`, `.htm`
+`.html`, `.htm`, `.svg`
 
 ### Editor
 

docs/docs/languages/json.mdx

@@ -0,0 +1,3 @@
+# JSON
+
+TODO ...

docs/docs/languages/svelte.mdx

@@ -116,7 +116,7 @@ import Counter from './Counter.svelte';
 
 <LiveCodes config={multi}></LiveCodes>
 
-Please note that LiveCodes [does not have the concept of a file system](../features/projects.mdx). However, you can configure [editor options](../configuration/configuration-object.mdx#markup) like `title`, `order` and `hideTitle` to simulate multiple files, change editor order or even hide editors.
+Please note that LiveCodes [does not have the concept of a file system](../features/projects.mdx). However, you can configure [editor options](../configuration/configuration-object.mdx#markup) like `title`, `order` and `hidden` to simulate multiple files, change editor order or even hide editors.
 
 Example:
 

docs/docs/languages/text.mdx

@@ -0,0 +1,3 @@
+# Text
+
+TODO ...

docs/docs/languages/vue.mdx

@@ -188,7 +188,7 @@ import Counter from './Counter.vue';
 
 <LiveCodes config={multi}></LiveCodes>
 
-Please note that LiveCodes [does not have the concept of a file system](../features/projects.mdx). However, you can configure [editor options](../configuration/configuration-object.mdx#markup) like `title`, `order` and `hideTitle` to simulate multiple files, change editor order or even hide editors.
+Please note that LiveCodes [does not have the concept of a file system](../features/projects.mdx). However, you can configure [editor options](../configuration/configuration-object.mdx#markup) like `title`, `order` and `hidden` to simulate multiple files, change editor order or even hide editors.
 
 Example:
 

docs/docusaurus.config.ts

@@ -20,7 +20,7 @@ const config: Config = {
   tagline: 'A Code Playground That Just Works!',
   url: 'https://livecodes.io/',
   baseUrl,
-  onBrokenLinks: 'throw',
+  onBrokenLinks: 'warn',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
   organizationName: 'LiveCodes',