Skip to content

Commit 2b8a82f

Browse files
hatemhosnyhatemhosny
authored
Merge branch 'develop' into minizinc
2 parents cf098a4 + 0d93335 commit 2b8a82f

7 files changed

Lines changed: 128 additions & 4 deletions

File tree

‎docs/docs/languages/javascript.mdx‎

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,78 @@
11
# JavaScript
22

3-
TODO...
3+
LiveCodes runs [JavaScript](https://developer.mozilla.org/docs/Web/JavaScript) (JS) in the browser.
4+
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.
5+
6+
## Demo
7+
8+
import LiveCodes from '../../src/components/LiveCodes.tsx';
9+
10+
<LiveCodes template="javascript" height="60vh"></LiveCodes>
11+
12+
## Usage
13+
14+
The JavaScript code is added as-is without any transformations to the [result page](../features/result.mdx) inside a `<script>` tag.
15+
16+
If the code has imports or exports, the `<script>` tag will have `type="module"` attribute.
17+
18+
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).
19+
These `require`s are converted to ESM imports with some glue code to make them work.
20+
21+
Example:
22+
23+
export const commonjs = `const { v4 } = require('uuid');
24+
25+
document.body.innerHTML = v4();`;
26+
27+
<LiveCodes params={{ activeEditor: 'script', js: commonjs, compiled: 'open' }}></LiveCodes>
28+
29+
### External Modules
30+
31+
Modules can be imported from various sources (e.g. npm, deno.land/x, jsr, CDNs, GitHub, etc.) including bare module imports.
32+
The modules are loaded from CDNs using importmaps (see [module resolution](../features/module-resolution.mdx) for details).
33+
34+
Example:
35+
36+
export const esm = `import _ from 'lodash';
37+
38+
const arr = [1, 2, 3, 4, 5];
39+
console.log(_.shuffle(arr)); // shuffle the array
40+
`;
41+
42+
<LiveCodes params={{ activeEditor: 'script', js: esm, console: 'open' }}></LiveCodes>
43+
44+
45+
## Language Info
46+
47+
### Name
48+
49+
`javascript`
50+
51+
### Alias
52+
53+
`js`
54+
55+
### Extensions
56+
57+
`js`, `mjs`
58+
59+
### Editor
60+
61+
`script`
62+
63+
### Compiler
64+
65+
JavaScript runs natively in the browser without compilation.
66+
67+
## Code Formatting
68+
69+
Using [Prettier](https://prettier.io/).
70+
71+
## Starter Template
72+
73+
https://livecodes.io/?template=Javascript
74+
75+
## Links
76+
77+
- [JavaScript Reference on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
78+
- [Web API](https://developer.mozilla.org/en-US/docs/Web/API)

‎src/livecodes/html/language-info.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -646,6 +646,37 @@ <h3 data-i18n="language-info:java.name">Java</h3>
646646
</li>
647647
</ul>
648648
</section>
649+
<section data-lang="javascript">
650+
<h3 data-i18n="language-info:javascript.name">JavaScript</h3>
651+
<div data-i18n="language-info:javascript.desc" data-i18n-prop="innerHTML">
652+
The scripting language of the web.
653+
</div>
654+
<ul data-i18n="language-info:javascript.link" data-i18n-prop="innerHTML">
655+
<li>
656+
<a
657+
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
658+
target="_blank"
659+
rel="noopener"
660+
>JavaScript on MDN</a
661+
>
662+
</li>
663+
<li>
664+
<a href="https://learnxinyminutes.com/docs/javascript/" target="_blank" rel="noopener"
665+
>Learn X in Y minutes, where X=JavaScript</a
666+
>
667+
</li>
668+
<li>
669+
<a href="{{DOCS_BASE_URL}}languages/javascript" target="_blank" rel="noopener"
670+
>LiveCodes Documentation</a
671+
>
672+
</li>
673+
<li>
674+
<a href="?template=javascript" class="button" target="_parent" data-template="javascript"
675+
>Load starter template</a
676+
>
677+
</li>
678+
</ul>
679+
</section>
649680
<section data-lang="jinja">
650681
<h3 data-i18n="language-info:jinja.name">Jinja</h3>
651682
<div data-i18n="language-info:jinja.desc">

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -356,6 +356,18 @@
356356
"notes": "",
357357
"translation": "Java"
358358
},
359+
"javascript.desc": {
360+
"notes": "",
361+
"translation": "The scripting language of the web."
362+
},
363+
"javascript.link": {
364+
"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",
365+
"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>"
366+
},
367+
"javascript.name": {
368+
"notes": "",
369+
"translation": "JavaScript"
370+
},
359371
"jinja.desc": {
360372
"notes": "",
361373
"translation": "Jinja is a fast, expressive, extensible templating engine."

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,11 @@ const languageInfo = {
159159
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>',
160160
name: 'Java',
161161
},
162+
javascript: {
163+
desc: 'The scripting language of the web.',
164+
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>',
165+
name: 'JavaScript',
166+
},
162167
jinja: {
163168
desc: 'Jinja is a fast, expressive, extensible templating engine.',
164169
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‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,13 @@ export const javascript: LanguageSpecs = {
55
name: 'javascript',
66
title: 'JS',
77
longTitle: 'JavaScript',
8-
info: false,
98
parser: {
109
name: 'babel',
1110
pluginUrls: [parserPlugins.babel, parserPlugins.html],
1211
},
1312
compiler: {
1413
factory: () => async (code) => code,
1514
},
16-
extensions: ['js'],
15+
extensions: ['js', 'mjs'],
1716
editor: 'script',
1817
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,6 @@ export const typescript: LanguageSpecs = {
4444
...getLanguageCustomSettings(config.script.language, config),
4545
}),
4646
},
47-
extensions: ['ts', 'typescript'],
47+
extensions: ['ts', 'mts', 'typescript'],
4848
editor: 'script',
4949
};

‎src/sdk/models.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -933,13 +933,15 @@ export type Language =
933933
| 'postcss'
934934
| 'javascript'
935935
| 'js'
936+
| 'mjs'
936937
| 'json'
937938
| 'babel'
938939
| 'es'
939940
| 'sucrase'
940941
| 'typescript'
941942
| 'flow'
942943
| 'ts'
944+
| 'mts'
943945
| 'jsx'
944946
| 'tsx'
945947
| 'react'

0 commit comments

Comments
 (0)