docs(js): add JavaScript language documentation

docs/docs/languages/javascript.mdx

@@ -1,3 +1,78 @@
 # JavaScript
 
-TODO...
+LiveCodes runs [JavaScript](https://developer.mozilla.org/docs/Web/JavaScript) (JS) in the browser.
+Accordingly, it has access to the DOM and other Web APIs, but it does not have access to Node.js APIs such as the file system or process information.
+
+## Demo
+
+import LiveCodes from '../../src/components/LiveCodes.tsx';
+
+<LiveCodes template="javascript" height="60vh"></LiveCodes>
+
+## Usage
+
+The JavaScript code is added as-is without any transformations to the [result page](../features/result.mdx) inside a `<script>` tag.
+
+If the code has imports or exports, the `<script>` tag will have `type="module"` attribute.
+
+The only case where the code is modified is when CommonJS `require`s are used to import external dependencies (not recommended - use ESM imports instead).
+These `require`s are converted to ESM imports with some glue code to make them work.
+
+Example:
+
+export const commonjs = `const { v4 } = require('uuid');
+
+document.body.innerHTML = v4();`;
+
+<LiveCodes params={{ activeEditor: 'script', js: commonjs, compiled: 'open' }}></LiveCodes>
+
+### External Modules
+
+Modules can be imported from various sources (e.g. npm, deno.land/x, jsr, CDNs, GitHub, etc.) including bare module imports.
+The modules are loaded from CDNs using importmaps (see [module resolution](../features/module-resolution.mdx) for details).
+
+Example:
+
+export const esm = `import _ from 'lodash';
+
+const arr = [1, 2, 3, 4, 5];
+console.log(_.shuffle(arr)); // shuffle the array
+`;
+
+<LiveCodes params={{ activeEditor: 'script', js: esm, console: 'open' }}></LiveCodes>
+
+
+## Language Info
+
+### Name
+
+`javascript`
+
+### Alias
+
+`js`
+
+### Extensions
+
+`js`, `mjs`
+
+### Editor
+
+`script`
+
+### Compiler
+
+JavaScript runs natively in the browser without compilation.
+
+## Code Formatting
+
+Using [Prettier](https://prettier.io/).
+
+## Starter Template
+
+https://livecodes.io/?template=Javascript
+
+## Links
+
+- [JavaScript Reference on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+- [Web API](https://developer.mozilla.org/en-US/docs/Web/API)

src/livecodes/html/language-info.html

@@ -646,6 +646,37 @@ <h3 data-i18n="language-info:java.name">Java</h3>
     </li>
   </ul>
 </section>
+<section data-lang="javascript">
+  <h3 data-i18n="language-info:javascript.name">JavaScript</h3>
+  <div data-i18n="language-info:javascript.desc" data-i18n-prop="innerHTML">
+    The scripting language of the web.
+  </div>
+  <ul data-i18n="language-info:javascript.link" data-i18n-prop="innerHTML">
+    <li>
+      <a
+        href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
+        target="_blank"
+        rel="noopener"
+        >JavaScript on MDN</a
+      >
+    </li>
+    <li>
+      <a href="https://learnxinyminutes.com/docs/javascript/" target="_blank" rel="noopener"
+        >Learn X in Y minutes, where X=JavaScript</a
+      >
+    </li>
+    <li>
+      <a href="{{DOCS_BASE_URL}}languages/javascript" target="_blank" rel="noopener"
+        >LiveCodes Documentation</a
+      >
+    </li>
+    <li>
+      <a href="?template=javascript" class="button" target="_parent" data-template="javascript"
+        >Load starter template</a
+      >
+    </li>
+  </ul>
+</section>
 <section data-lang="jinja">
   <h3 data-i18n="language-info:jinja.name">Jinja</h3>
   <div data-i18n="language-info:jinja.desc">

src/livecodes/i18n/locales/en/language-info.lokalise.json

@@ -356,6 +356,18 @@
     "notes": "",
     "translation": "Java"
   },
+  "javascript.desc": {
+    "notes": "",
+    "translation": "The scripting language of the web."
+  },
+  "javascript.link": {
+    "notes": "### <tag-1> ###\n<li  />\n\n### <tag-2> ###\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-3> ###\n<li  />\n\n### <tag-4> ###\n<a href=\"https://learnxinyminutes.com/docs/javascript/\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-5> ###\n<li  />\n\n### <tag-6> ###\n<a href=\"{{DOCS_BASE_URL}}languages/javascript\" target=\"_blank\" rel=\"noopener\" />\n\n### <tag-7> ###\n<li  />\n\n### <tag-8> ###\n<a href=\"?template=javascript\" class=\"button\" target=\"_parent\" data-template=\"javascript\" />\n\n",
+    "translation": "<tag-1> <tag-2>JavaScript on MDN</tag-2> </tag-1> <tag-3> <tag-4>Learn X in Y minutes, where X=JavaScript</tag-4> </tag-3> <tag-5> <tag-6>LiveCodes Documentation</tag-6> </tag-5> <tag-7> <tag-8>Load starter template</tag-8> </tag-7>"
+  },
+  "javascript.name": {
+    "notes": "",
+    "translation": "JavaScript"
+  },
   "jinja.desc": {
     "notes": "",
     "translation": "Jinja is a fast, expressive, extensible templating engine."

src/livecodes/i18n/locales/en/language-info.ts

@@ -159,6 +159,11 @@ const languageInfo = {
     link: '<1> <2>Java official website</2> </1> <3> <4>DoppioJVM</4> </3> <5> <6>Learn X in Y minutes, where X=java</6> </5> <7> <8>LiveCodes Documentation</8> </7> <9> <10>Load starter template</10> </9>',
     name: 'Java',
   },
+  javascript: {
+    desc: 'The scripting language of the web.',
+    link: '<1> <2>JavaScript on MDN</2> </1> <3> <4>Learn X in Y minutes, where X=JavaScript</4> </3> <5> <6>LiveCodes Documentation</6> </5> <7> <8>Load starter template</8> </7>',
+    name: 'JavaScript',
+  },
   jinja: {
     desc: 'Jinja is a fast, expressive, extensible templating engine.',
     link: '<1> <2>Official website</2> </1> <3> <4>Template documentation</4> </3> <5> <6>JavaScript implementation</6> </5> <7> <8>LiveCodes Documentations</8> </7>',

src/livecodes/languages/javascript/lang-javascript.ts

@@ -5,14 +5,13 @@ export const javascript: LanguageSpecs = {
   name: 'javascript',
   title: 'JS',
   longTitle: 'JavaScript',
-  info: false,
   parser: {
     name: 'babel',
     pluginUrls: [parserPlugins.babel, parserPlugins.html],
   },
   compiler: {
     factory: () => async (code) => code,
   },
-  extensions: ['js'],
+  extensions: ['js', 'mjs'],
   editor: 'script',
 };

src/livecodes/languages/typescript/lang-typescript.ts

@@ -44,6 +44,6 @@ export const typescript: LanguageSpecs = {
           ...getLanguageCustomSettings(config.script.language, config),
         }),
   },
-  extensions: ['ts', 'typescript'],
+  extensions: ['ts', 'mts', 'typescript'],
   editor: 'script',
 };

src/sdk/models.ts

@@ -933,13 +933,15 @@ export type Language =
   | 'postcss'
   | 'javascript'
   | 'js'
+  | 'mjs'
   | 'json'
   | 'babel'
   | 'es'
   | 'sucrase'
   | 'typescript'
   | 'flow'
   | 'ts'
+  | 'mts'
   | 'jsx'
   | 'tsx'
   | 'react'