Skip to content

Commit 0f53771

Browse files
slowcheetahslowcheetah
committed
Playground
1 parent b17af13 commit 0f53771

File tree

11 files changed

+138
-77
lines changed

11 files changed

+138
-77
lines changed

‎web/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
templates
22
dist
3+
src/js/minified.js
4+
src/js/minified.js.map

‎web/scripts/build.mjs‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ async function buildVersionMenu(versions, currentVersion) {
9595
async function build() {
9696
const template = await fs.readFile(templatePath, 'utf-8');
9797
let docsMenu = '';
98-
let sandbox = await fs.readFile(`${templatesDir}sandbox.html`, 'utf-8');
98+
let playground = await fs.readFile(`${templatesDir}playground.html`, 'utf-8');
9999
let htmlFileName = '';
100100

101101
const marked = new Marked();
@@ -178,19 +178,19 @@ async function build() {
178178
}
179179

180180
versionsMenu = await buildVersionMenu(uniqueVersions, defaultVersion);
181-
sandbox = sandbox.replace('{base}', `${base}`);
182-
sandbox = sandbox.replaceAll('{docs-version}', '');
183-
sandbox = sandbox.replace('{versions-menu}', `${versionsMenu}`);
184-
sandbox = sandbox.replaceAll('{current-version}', version);
181+
playground = playground.replace('{base}', `${base}`);
182+
playground = playground.replaceAll('{docs-version}', '');
183+
playground = playground.replace('{versions-menu}', `${versionsMenu}`);
184+
playground = playground.replaceAll('{current-version}', version);
185185
if (branch) {
186-
sandbox = sandbox.replaceAll('{default-version}', '.');
186+
playground = playground.replaceAll('{default-version}', '.');
187187
} else {
188-
sandbox = sandbox.replaceAll('{default-version}', defaultVersion);
188+
playground = playground.replaceAll('{default-version}', defaultVersion);
189189
}
190-
const sandboxFilePath = path.join(resultDir, 'sandbox.html');
191-
await fs.mkdir(path.dirname(sandboxFilePath), { recursive: true });
192-
await fs.writeFile(sandboxFilePath, sandbox, 'utf-8');
193-
echo(chalk.green(`File created: ${sandboxFilePath}`));
190+
const playgroundFilePath = path.join(resultDir, 'playground.html');
191+
await fs.mkdir(path.dirname(playgroundFilePath), { recursive: true });
192+
await fs.writeFile(playgroundFilePath, playground, 'utf-8');
193+
echo(chalk.green(`File created: ${playgroundFilePath}`));
194194
}
195195

196196
async function getVersionTags() {

‎web/scripts/runner.mjs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,19 @@ async function switchBranchToLatestBuild(branch) {
174174
console.timeEnd(`Switched branch "${branch}" to the latest build`);
175175
}
176176

177+
async function buildAndCopyCoreJS() {
178+
console.log(`Building and copying core-js...`);
179+
console.time('Core JS bundle built');
180+
await exec(`npm run bundle-package`, { cwd: buildSrcDir });
181+
const bundlePath = `${buildSrcDir}packages/core-js-bundle/minified.js`
182+
const destPath = `${buildSrcDir}web/src/js/minified.js`;
183+
await cp(bundlePath, destPath, { }, err => { if (err) throw err; });
184+
const bundleMapPath = `${buildSrcDir}packages/core-js-bundle/minified.js.map`;
185+
const destMapPath = `${buildSrcDir}web/src/js/minified.js.map`;
186+
await cp(bundleMapPath, destMapPath, { }, err => { if (err) throw err; });
187+
console.timeEnd(`Core JS bundle built`);
188+
}
189+
177190
async function run() {
178191
console.time('Finished in');
179192
await createBuildDir();
@@ -192,6 +205,7 @@ async function run() {
192205
}
193206

194207
await prepareBuilder(targetBranch);
208+
await buildAndCopyCoreJS();
195209
if (!branch) {
196210
await copyBuilderDocs();
197211
}

‎web/src/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<a href="{default-version}/docs/">Docs</a>
2020
<div class="mobile-docs-menu">{docs-menu}</div>
2121
</div>
22-
<div class="menu-item"><a href="./sandbox.html">Sandbox</a></div>
22+
<div class="menu-item"><a href="./playground.html">Playground</a></div>
2323
<div class="menu-item">{versions-menu}</div>
2424
<div class="socials">
2525
<div class="menu-item">
@@ -59,7 +59,7 @@
5959
<div class="resources">
6060
<div class="resource-item title">Resources</div>
6161
<div class="resource-item"><a href="{default-version}/docs/">Docs</a></div>
62-
<div class="resource-item"><a href="./sandbox.html">Sandbox</a></div>
62+
<div class="resource-item"><a href="./playground.html">Playground</a></div>
6363
</div>
6464
<div class="community">
6565
<div class="resource-item title">Community</div>

web/src/js/sandbox.js renamed to web/src/js/playground.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,19 @@ const resizeObserver = new ResizeObserver((entries) => {
3434
}
3535
});
3636

37-
// const originalConsoleLog = console.log;
3837
console.log = function (...args) {
3938
args.forEach(function (arg) {
40-
resultBlock.innerHTML += `<div class="console-log">${arg}</div>`;
39+
resultBlock.innerHTML += `<div class="console log">${arg}</div>`;
40+
});
41+
}
42+
console.error = function (...args) {
43+
args.forEach(function (arg) {
44+
resultBlock.innerHTML += `<div class="console error">${arg}</div>`;
45+
});
46+
}
47+
console.warn = function (...args) {
48+
args.forEach(function (arg) {
49+
resultBlock.innerHTML += `<div class="console warn">${arg}</div>`;
4150
});
4251
}
4352
runButton.addEventListener('click', (event) => {
@@ -46,7 +55,7 @@ runButton.addEventListener('click', (event) => {
4655
try {
4756
Function(code)();
4857
} catch (e) {
49-
console.log(e);
58+
console.error(e);
5059
}
5160
})
5261

web/src/sandbox.html renamed to web/src/playground.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Core-JS</title>
77
<script type="module" src="js/main.js"></script>
8-
<script type="module" src="js/sandbox.js"></script>
8+
<script type="module" src="js/playground.js"></script>
9+
<script type="module" src="js/minified.js"></script>
910
<base href="{base}" />
1011
</head>
1112
<body>
@@ -18,9 +19,8 @@
1819
<div class="menu-items">
1920
<div class="menu-item">
2021
<a href="{default-version}/docs/">Docs</a>
21-
<div class="mobile-docs-menu">{docs-menu}</div>
2222
</div>
23-
<div class="menu-item"><a href="sandbox.html">Sandbox</a></div>
23+
<div class="menu-item"><a href="playground.html">Playground</a></div>
2424
<div class="menu-item">{versions-menu}</div>
2525
<div class="socials">
2626
<div class="menu-item">
@@ -50,7 +50,7 @@
5050

5151
<main>
5252
<div class="main box">
53-
<h1>Sandbox</h1>
53+
<h1>Playground</h1>
5454
<div class="sandbox-wrapper">
5555
<div class="editor">
5656
<textarea id="code-input" class="input" spellcheck="false"></textarea>
@@ -70,7 +70,7 @@ <h1>Sandbox</h1>
7070
<div class="resources">
7171
<div class="resource-item title">Resources</div>
7272
<div class="resource-item"><a href="{default-version}/docs/">Docs</a></div>
73-
<div class="resource-item"><a href="sandbox.html">Sandbox</a></div>
73+
<div class="resource-item"><a href="playground.html">Playground</a></div>
7474
</div>
7575
<div class="community">
7676
<div class="resource-item title">Community</div>

‎web/src/scss/app.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@
1010
@use "parts/main";
1111
@use "parts/footer";
1212
@use "parts/code";
13-
@use "parts/editor";
13+
@use "parts/playground";

‎web/src/scss/includes/theme.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
$font-color: $foreground;
55
$font-color-light: $white;
66
$font-color-dark: $dark;
7+
$font-success: $green;
8+
$font-warning: $orange;
9+
$font-error: $red;
710

811
$button-color: $foreground;
912
$button-color-hover: $selection;
@@ -13,6 +16,7 @@ $box-light: $selection;
1316

1417
$background-color: $dark;
1518
$background-light: $secondary;
19+
$background-highlight: $highlight;
1620

1721
$link-color: rgba($foreground, 0.7);
1822
$link-color-hover: $foreground;

‎web/src/scss/parts/editor.scss‎

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎web/src/scss/parts/playground.scss‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
@use "../includes/theme" as *;
2+
@use "../includes/mixins" as *;
3+
4+
.sandbox-wrapper {
5+
margin: 2rem 0;
6+
7+
@include media("min", "lg") {
8+
display: flex;
9+
gap: 1rem;
10+
}
11+
12+
.editor {
13+
position: relative;
14+
flex-basis: 800px;
15+
flex-grow: 1;
16+
17+
height: 30rem;
18+
padding: 0;
19+
border: none;
20+
21+
.input, .output {
22+
box-sizing: border-box;
23+
position: absolute;
24+
height: 100%;
25+
width: 100%;
26+
27+
font-family: monospace;
28+
padding: 0.5em;
29+
border: none;
30+
font-size: 0.85rem;
31+
line-height: 1.375rem;
32+
white-space: pre;
33+
word-wrap: break-word;
34+
overflow: auto;
35+
36+
scrollbar-color: $background-light $background-highlight;
37+
scrollbar-width: thin;
38+
}
39+
40+
.input {
41+
z-index: 1;
42+
color: transparent;
43+
caret-color: $font-color;
44+
background-color: transparent;
45+
resize: none;
46+
}
47+
48+
.output {
49+
z-index: 0;
50+
background-color: $box-color;
51+
padding-bottom: 7px;
52+
}
53+
}
54+
55+
.result {
56+
margin-top: 2rem;
57+
background-color: $box-color;
58+
padding: 0.5em;
59+
60+
font-family: monospace;
61+
font-size: 0.85rem;
62+
line-height: 1.375rem;
63+
white-space: pre;
64+
word-wrap: break-word;
65+
66+
@include media("min", "lg") {
67+
flex-basis: 400px;
68+
flex-shrink: 0;
69+
margin-top: 0;
70+
}
71+
72+
.console {
73+
&.log {
74+
color: $font-success;
75+
}
76+
77+
&.warn {
78+
color: $font-warning;
79+
}
80+
81+
&.error {
82+
color: $font-error;
83+
}
84+
}
85+
}
86+
}

0 commit comments

Comments
 (0)