Merge branch 'develop' into refactor

Author: hatemhosny

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/ar/language-info.lokalise.json

@@ -267,6 +267,15 @@
   "java.name": {
     "translation": "Java"
   },
+  "javascript.desc": {
+    "translation": "لغة البرمجة النصية للويب."
+  },
+  "javascript.link": {
+    "translation": "<tag-1> <tag-2>جافا سكريبت على MDN</tag-2> </tag-1> <tag-3> <tag-4>تعلم X في دقائق Y، حيث X = جافا سكريبت</tag-4> </tag-3> <tag-5> <tag-6>وثائق LiveCodes</tag-6> </tag-5> <tag-7> <tag-8>تحميل قالب البداية</tag-8> </tag-7>"
+  },
+  "javascript.name": {
+    "translation": "JavaScript"
+  },
   "jinja.desc": {
     "translation": "Jinja هو محرك قوالب سريع ومعبّر وقابل للتوسيع."
   },

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

@@ -150,6 +150,11 @@ const languageInfo: I18nLangInfoTranslation = {
     link: '<1> <2>موقع جافا الرسمي</2> </1>   <3>  <4> DoppioJVM</4> </3>  <5> <6> تعلم X في دقائق Y، حيث X = جافا</6> </5>   <7> <8> تحميل قالب البدء</8> </7>',
     name: 'Java',
   },
+  javascript: {
+    desc: 'لغة البرمجة النصية للويب.',
+    link: '<1> <2>جافا سكريبت على MDN</2> </1> <3> <4>تعلم X في دقائق Y، حيث X = جافا سكريبت</4> </3> <5> <6>وثائق LiveCodes</6> </5> <7> <8>تحميل قالب البداية</8> </7>',
+    name: 'JavaScript',
+  },
   jinja: {
     desc: 'Jinja هو محرك قوالب سريع ومعبّر وقابل للتوسيع.',
     link: '<1> <2>الموقع الرسمي</2> </1> <3> <4>وثائق القالب</4> </3> <5> <6>تطبيق JavaScript</6> </5> <7> <8>وثائق LiveCodes</8> </7>',

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

@@ -267,6 +267,15 @@
   "java.name": {
     "translation": "Java"
   },
+  "javascript.desc": {
+    "translation": "ওয়েবের স্ক্রিপ্টিং ভাষা।"
+  },
+  "javascript.link": {
+    "translation": "<tag-1> <tag-2>MDN-এ জাভাস্ক্রিপ্ট</tag-2> </tag-1> <tag-3> <tag-4>Y মিনিটে X শিখুন, যেখানে X=জাভাস্ক্রিপ্ট</tag-4> </tag-3> <tag-5> <tag-6>লাইভকোডস ডকুমেন্টেশন</tag-6> </tag-5> <tag-7> <tag-8>স্টার্টার টেমপ্লেট লোড করুন</tag-8> </tag-7>"
+  },
+  "javascript.name": {
+    "translation": "JavaScript"
+  },
   "jinja.desc": {
     "translation": "Jinja একটি দ্রুত, প্রকাশক, এক্সটেনসিবল টেমপ্লেটিং ইঞ্জিন।"
   },

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

@@ -151,6 +151,11 @@ const languageInfo: I18nLangInfoTranslation = {
     link: '<1> <2>Java অফিসিয়াল ওয়েবসাইট</2> </1> <3> <4>DoppioJVM</4> </3> <5> <6>Y মিনিটে X শিখুন, যেখানে X=java</6> </5> <7> <8>LiveCodes ডকুমেন্টেশন</8> </7> <9> <10>স্টার্টার টেমপ্লেট লোড করুন</10> </9>',
     name: 'Java',
   },
+  javascript: {
+    desc: 'ওয়েবের স্ক্রিপ্টিং ভাষা।',
+    link: '<1> <2>MDN-এ জাভাস্ক্রিপ্ট</2> </1> <3> <4>Y মিনিটে X শিখুন, যেখানে X=জাভাস্ক্রিপ্ট</4> </3> <5> <6>লাইভকোডস ডকুমেন্টেশন</6> </5> <7> <8>স্টার্টার টেমপ্লেট লোড করুন</8> </7>',
+    name: 'JavaScript',
+  },
   jinja: {
     desc: 'Jinja একটি দ্রুত, প্রকাশক, এক্সটেনসিবল টেমপ্লেটিং ইঞ্জিন।',
     link: '<1> <2>অফিসিয়াল ওয়েবসাইট</2> </1> <3> <4>টেমপ্লেট ডকুমেন্টেশন</4> </3> <5> <6>JavaScript বাস্তবায়ন</6> </5> <7> <8>LiveCodes ডকুমেন্টেশন</8> </7>',

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

@@ -267,6 +267,15 @@
   "java.name": {
     "translation": "Java"
   },
+  "javascript.desc": {
+    "translation": "Die Skriptsprache des Webs."
+  },
+  "javascript.link": {
+    "translation": "<tag-1> <tag-2>JavaScript auf MDN</tag-2> </tag-1> <tag-3> <tag-4>Lernen Sie X in Y Minuten, wobei X=JavaScript</tag-4> </tag-3> <tag-5> <tag-6>LiveCodes Dokumentation</tag-6> </tag-5> <tag-7> <tag-8>Laden Sie eine Startvorlage</tag-8> </tag-7>"
+  },
+  "javascript.name": {
+    "translation": "JavaScript"
+  },
   "jinja.desc": {
     "translation": "Jinja ist eine schnelle, ausdrucksstarke und erweiterbare Template-Engine."
   },

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

@@ -153,6 +153,11 @@ const languageInfo: I18nLangInfoTranslation = {
     link: '<1> <2>Offizielle Java-Website</2> </1> <3> <4> DoppioJVM</4> </3> <5> <6> Lernen Sie X in Y Minuten, wobei X=java</6> </5> <7> <8> Laden Sie die Startvorlage</8> </7>',
     name: 'Java',
   },
+  javascript: {
+    desc: 'Die Skriptsprache des Webs.',
+    link: '<1> <2>JavaScript auf MDN</2> </1> <3> <4>Lernen Sie X in Y Minuten, wobei X=JavaScript</4> </3> <5> <6>LiveCodes Dokumentation</6> </5> <7> <8>Laden Sie eine Startvorlage</8> </7>',
+    name: 'JavaScript',
+  },
   jinja: {
     desc: 'Jinja ist eine schnelle, ausdrucksstarke und erweiterbare Template-Engine.',
     link: '<1> <2>Offizielle Website</2> </1> <3> <4> Template-Dokumentation</4> </3> <5> <6> JavaScript-Implementierung</6> </5> <7> <8> LiveCodes Dokumentationen</8> </7>',

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>',