edit js docs

Author: hatemhosny

docs/docs/languages/javascript.mdx

@@ -1,85 +1,78 @@
 # JavaScript
 
-[JavaScript](https://developer.mozilla.org/docs/Web/JavaScript) is a versatile, interpreted programming language that powers the dynamic behavior on most websites. 
-
-LiveCodes runs JavaScript natively in the browser. Since JavaScript runs in the browser, it has a host environment with access to the DOM and other Web APIs, but it does not have Node.js features such as the file system or process information.
+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';
 
-export const params = {
-  template:"Javascript",
-  console:"open"
-};
-
-<LiveCodes params={params}></LiveCodes>
+<LiveCodes template="javascript" height="60vh"></LiveCodes>
 
 ## Usage
 
-LiveCodes executes JavaScript directly in the browser.
+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.
 
-You can use it to test and demonstrate JavaScript code that interacts with the DOM, fetch APIs, or manipulate HTML elements dynamically.
+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.
 
-### Loading Modules
+Example:
 
-Most of the core functionality in JavaScript is available directly in the browser without any additional installation.
+export const commonjs = `const { v4 } = require('uuid');
 
-#### Standard Library
+document.body.innerHTML = v4();`;
 
-JavaScript provides a standard set of built-in objects and functions which are available directly in the browser.
+<LiveCodes params={{ activeEditor: 'script', js: commonjs, compiled: 'open' }}></LiveCodes>
 
-#### External Packages
-To use additional functionality not included in the core language, you can import external packages (libraries) from CDN links.
+### External Modules
 
-```js
-import _ from 'https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/lodash.min.js';
+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>
 
-If you use JavaScript syntax extensions like JSX or JavaScript libraries/frameworks, you can select them directly in the programming language selection.
 
 ## Language Info
 
 ### Name
 
-`Javascript`
+`javascript`
 
-### Aliases
+### Alias
 
-`js`, `node`, `ecmascript`
+`js`
 
 ### Extensions
 
-`js`
+`js`, `mjs`
 
 ### Editor
 
 `script`
 
 ### Compiler
 
-JavaScript runs natively in the browser — no compilation is required.
-
-### Version
-
-Depends on the browser's JavaScript engine and its supported ECMAScript features.
+JavaScript runs natively in the browser without compilation.
 
 ## Code Formatting
 
-Using [Prettier](https://prettier.io/) for code Formatting. You can format your code when saving the project, but you need to manually enable "Format on Save" in the settings.
-
-## Live Reload
-
-JavaScript code automatically reloads and executes when edited, allowing for real-time feedback.
+Using [Prettier](https://prettier.io/).
 
 ## Starter Template
 
 https://livecodes.io/?template=Javascript
 
 ## Links
 
-- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+- [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'