Skip to content
This repository was archived by the owner on Jan 17, 2022. It is now read-only.

Commit 8698468

Browse files
NateLevin1NateLevin1
committed
✨ Add editor support
1 parent e4271e8 commit 8698468

12 files changed

+158
-21
lines changed

‎lib-webpack.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
const path = require('path');
2-
const EsmWebpackPlugin = require("@purtuga/esm-webpack-plugin");
2+
const EsmWebpackPlugin = require("@purtuga/esm-webpack-plugin"); // see https://paultavares.wordpress.com/2018/07/02/webpack-how-to-generate-an-es-module-bundle/
33

44
module.exports = {
55
mode: 'production',
6-
entry: './src/lib/table/table.ts',
6+
entry: './src/lib/loader.ts',
77
module: {
88
rules: [
99
{

‎lib/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</head>
88
<body>
99
<script type="module">
10-
import Table from "./jsql.js";
10+
import { Table } from "./jsql.js";
1111
console.log(Table);
1212
</script>
1313
</body>

‎lib/jsql.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/loader.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import Table from "./table/table";
2+
export { Table };

‎src/visuals/log/append.test.ts

+19-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
1+
import createDetails from "./createDetails";
2+
jest.mock("./createDetails");
13
describe("Appending to console", ()=>{
24
test("Append appends a node with proper text and class", ()=>{
35
document.body.innerHTML = `
46
<div id="output"></div>
57
`;
68
const append = require("./append");
9+
// @ts-ignore
10+
createDetails.mockImplementation(()=>{});
711
append.default("class", "text");
812
expect(document.body.innerHTML).toBe(`
9-
<div id="output"><p class="class">text</p></div>
13+
<div id="output"><p><span class="class">text</span></p></div>
14+
`);
15+
expect(createDetails).not.toBeCalled();
16+
});
17+
test("Append calls create details with objects properly", ()=>{
18+
document.body.innerHTML = `
19+
<div id="output"></div>
20+
`;
21+
const append = require("./append");
22+
// @ts-ignore
23+
createDetails.mockImplementation(()=>{});
24+
append.default("class", {one:1});
25+
expect(createDetails).toBeCalled();
26+
expect(document.body.innerHTML).toBe(`
27+
<div id="output"></div>
1028
`);
1129
});
1230
});

‎src/visuals/log/append.ts

+15-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
1+
import createDetails from "./createDetails";
12
const log = document.getElementById("output");
23
const append = (className: string, ...args: any[])=>{
3-
args = args.map((arg)=>arg.toString());
4-
const node = document.createElement("p");
5-
node.textContent = args.join("");
6-
node.classList.add(className);
7-
log.appendChild(node);
4+
const container = document.createElement("p");
5+
args.forEach((arg)=>{
6+
if(typeof arg !== "object") {
7+
const node = document.createElement("span");
8+
node.classList.add(className);
9+
node.textContent = arg;
10+
container.appendChild(node);
11+
return null;
12+
}
13+
14+
// arrays and objects
15+
createDetails(arg, container, log);
16+
});
17+
log.appendChild(container);
818
log.scrollTop = log.scrollHeight;
919
}
1020
export default append;

‎src/visuals/log/console.css

+37
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,41 @@
2828
}
2929
.warn::before {
3030
content:"☢ "
31+
}
32+
33+
.object-view {
34+
font-family: sans-serif;
35+
outline:0;
36+
border: 1px solid black;
37+
display: inline-block;
38+
padding: 0.2rem;
39+
padding-right: 0.6rem;
40+
background-color: white;
41+
}
42+
43+
.object-view[open] summary {
44+
cursor: pointer;
45+
border-bottom: 1px solid black;
46+
padding: 0.2rem;
47+
}
48+
49+
.object-view summary {
50+
padding: 0.2rem;
51+
outline: 0;
52+
user-select: none;
53+
-webkit-user-select: none;
54+
width:100%;
55+
}
56+
57+
.string {
58+
color: red;
59+
}
60+
61+
.number {
62+
color: blue;
63+
}
64+
65+
.object-view p {
66+
margin-left: 2ch;
67+
cursor: default;
3168
}

‎src/visuals/log/createDetail.test.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import createDetails from "./createDetails";
2+
test("Creates properly one level deep", ()=>{
3+
document.body.innerHTML = `
4+
<div id="output"></div>
5+
`;
6+
createDetails({a:1}, document.getElementById("output"), {} as HTMLElement);
7+
expect(document.body.innerHTML).toBe(`
8+
<div id="output"><details class="object-view"><summary>Object</summary><p>a: <span class="number">1</span></p></details></div>
9+
`);
10+
});
11+
12+
test("Creates properly multiple levels deep", ()=>{
13+
document.body.innerHTML = `
14+
<div id="output"></div>
15+
`;
16+
createDetails({a:{b:2}}, document.getElementById("output"), {} as HTMLElement);
17+
expect(document.body.innerHTML).toBe(`
18+
<div id="output"><details class="object-view"><summary>Object</summary><p>a: <span class="object"><details class="object-view"><summary>Object</summary><p>b: <span class="number">2</span></p></details></span></p></details></div>
19+
`);
20+
});

‎src/visuals/log/createDetails.ts

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const createDetails = (arg: any, container: HTMLElement, log: HTMLElement)=>{
2+
const detailContainer = document.createElement("details");
3+
detailContainer.classList.add("object-view");
4+
5+
const objectName = document.createElement("summary");
6+
objectName.textContent = arg instanceof Array ? "Array ("+arg.length+")" : "Object";
7+
objectName.onclick = ()=>{
8+
setTimeout(()=>{
9+
log.scrollTop = objectName.getBoundingClientRect().top - log.getBoundingClientRect().top + log.scrollTop - 20;
10+
}, 5);
11+
}
12+
detailContainer.appendChild(objectName);
13+
14+
for(const [key, val] of Object.entries(arg)) {
15+
const node = document.createElement("p");
16+
node.textContent = `${key}: `;
17+
18+
const valSpan = document.createElement("span");
19+
if(typeof val !== "object") {
20+
valSpan.textContent = JSON.stringify(val); // show quotes etc
21+
} else {
22+
// recurse
23+
createDetails(val, valSpan, log);
24+
}
25+
26+
valSpan.classList.add(typeof val);
27+
node.appendChild(valSpan);
28+
29+
detailContainer.appendChild(node);
30+
}
31+
32+
container.appendChild(detailContainer);
33+
}
34+
export default createDetails;

‎src/visuals/middlebar/evaluate.test.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ describe("evaluation works", ()=>{
2727
expect(visualConsole.error).toBeCalledWith(1);
2828
});
2929
test("Evaluation errors to correct place if thrown", ()=>{
30-
evaluate("throw 1");
31-
expect(visualConsole.error).toBeCalledWith(1);
30+
return evaluate("throw 1").finally(()=>{
31+
expect(visualConsole.error).toBeCalledWith(1);
32+
});
3233
});
3334
});

‎src/visuals/middlebar/evaluate.ts

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import visualConsole from "../log/console";
2-
const evaluate = async (content: string)=>{ // async so eval is async
2+
import { Table as ImportedTable } from "../../lib/loader";
3+
const evaluate = (content: string)=>{ // async so eval is async
34
// substitute console methods so that it will show up on both the actual console and the visual console
45
const oldLog = console.log;
56
const oldWarn = console.warn;
@@ -18,15 +19,19 @@ const evaluate = async (content: string)=>{ // async so eval is async
1819
}
1920
const curDate = new Date();
2021
visualConsole.logF("runlog", `[${curDate.getHours()}:${curDate.getMinutes()}:${curDate.getSeconds()}] Running...`);
22+
const reset = ()=>{
23+
// reset to correct values
24+
console.log = oldLog;
25+
console.warn = oldWarn;
26+
console.error = oldError;
27+
}
2128
try {
22-
eval(content);
29+
// webpack & eval works very weird so this is how we do it
30+
var Table = ImportedTable;
31+
return eval(`(async () => {${content}\nreset();})()`).catch((e:any)=>{visualConsole.error(e); reset();});
2332
} catch(e) {
2433
visualConsole.error(e);
2534
}
26-
// reset to correct values
27-
console.log = oldLog;
28-
console.warn = oldWarn;
29-
console.error = oldError;
3035
}
3136

3237
export default evaluate;

‎src/visuals/monaco/setupMonaco.ts

+13-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,19 @@ import * as monaco from 'monaco-editor';
22
import "./monaco.css";
33
import zoom from "./zoom";
44
const editor = monaco.editor.create(document.getElementById('monaco-container'), {
5-
value: [
6-
""
7-
].join('\n'),
5+
value: `// JSQL has been auto-imported and top level await is enabled
6+
const db = new Table(\`CREATE TABLE db (
7+
id AUTO_INCREMENT,
8+
firstName,
9+
lastName,
10+
email
11+
)\`);
12+
await db.create();
13+
await db.query(\`INSERT INTO \${db.name} VALUES
14+
('John', 'Doe', '[email protected]'),
15+
('Jill', 'Doe', '[email protected]')\`);
16+
const result = await db.query(\`SELECT * FROM \${db.name}\`);
17+
console.log(result);`,
818
language: 'javascript',
919
theme: "vs-dark",
1020
automaticLayout: true,

0 commit comments

Comments
 (0)