Skip to content

Commit a92b3d5

Browse files
eugenioenkoeugenioenko
authored
Project upgrades (#13)
* build: dependency upgrade * feat: added tailwind styling * chore: fix build * chore: min build * chore: fix ci node version
1 parent 812e306 commit a92b3d5

13 files changed

+2932
-4427
lines changed

‎.github/workflows/node.js.yml

+12-12
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@ name: Node.js CI
55

66
on:
77
push:
8-
branches: [ main ]
8+
branches: [main]
99
pull_request:
10-
branches: [ main ]
10+
branches: [main]
1111

1212
jobs:
1313
build:
1414
runs-on: ubuntu-latest
1515
strategy:
1616
matrix:
17-
node-version: [12.x]
17+
node-version: [18.x]
1818
steps:
19-
- uses: actions/checkout@v2
20-
- name: Use Node.js ${{ matrix.node-version }}
21-
uses: actions/setup-node@v2
22-
with:
23-
node-version: ${{ matrix.node-version }}
24-
cache: 'npm'
25-
- run: npm install
26-
- run: npm run build
27-
- run: npm run testprod
19+
- uses: actions/checkout@v2
20+
- name: Use Node.js ${{ matrix.node-version }}
21+
uses: actions/setup-node@v2
22+
with:
23+
node-version: ${{ matrix.node-version }}
24+
cache: "npm"
25+
- run: npm install
26+
- run: npm run build
27+
- run: npm run testprod

‎dist/kasper.js

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

‎dist/kasper.min.js

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

‎live/index.html

+59-59
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,78 @@
11
<!DOCTYPE html>
2-
<html ng-app="app">
2+
<html>
33
<head>
44
<meta charset="utf-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<title>kasper-js</title>
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
8-
<link rel="stylesheet" href="./css/sdf.css" />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap"
10+
rel="stylesheet"
11+
/>
912
<script src="../dist/kasper.js"></script>
1013
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.9/ace.js"></script>
14+
<script src="https://cdn.tailwindcss.com"></script>
15+
<script>
16+
tailwind.config = {
17+
theme: {
18+
fontFamily: {
19+
mono: [
20+
"Share Tech Mono",
21+
"Consolas",
22+
"Liberation Mono",
23+
"Courier New",
24+
],
25+
},
26+
},
27+
};
28+
</script>
1129
<style>
12-
#container {
13-
max-width: 1280px;
14-
margin: auto;
15-
}
16-
#editor,
17-
#output,
18-
#render {
19-
width: 100%;
20-
height: 230px;
21-
margin-bottom: 30px;
30+
kasper {
31+
color: #374151;
2232
}
23-
#json,
24-
#editor {
25-
width: 100%;
26-
height: 235px;
27-
margin-bottom: 30px;
33+
kasper h3 {
34+
font-size: 28px;
35+
margin-bottom: 8px;
2836
}
29-
#render {
30-
border: 1px solid gray;
31-
padding: 15px;
32-
margin-bottom: 35px;
33-
overflow: auto;
34-
}
35-
#console {
36-
height: 150px;
37-
overflow-y: auto;
38-
}
39-
* {
40-
box-sizing: border-box;
37+
kasper h4 {
38+
font-size: 21px;
39+
margin-bottom: 8px;
40+
margin-top: 8px;
4141
}
4242
</style>
4343
</head>
4444
<body>
45-
<div class="sdf-wrapper sdf-default" id="container">
46-
<div class="sdf-grid">
47-
<div class="sdf-cell sdf-12 sdf-padding">
48-
<h1>kasper-js</h1>
49-
<h3>
50-
<small
51-
><i>kasper-js</i> is an experimental javascript template
52-
parser</small
53-
>
54-
</h3>
55-
</div>
56-
<div class="sdf-cell sdf-12">
57-
<h3>Try it out!</h3>
58-
</div>
59-
<div class="sdf-cell sdf-12 sdf-sm-6 sdf-padding">
60-
<div id="json"></div>
61-
<div id="editor"></div>
62-
</div>
63-
<div class="sdf-cell sdf-12 sdf-sm-6 sdf-padding">
64-
<div id="render">Hit execute to view template output</div>
65-
<div id="output"></div>
45+
<div class="max-w-screen-xl mx-auto px-6 pt-6 pb-12">
46+
<h1 class="font-mono text-5xl text-gray-500 pb-1">kasper-js</h1>
47+
<h3 class="font-mono text-lg text-gray-500 pb-4">
48+
<i>kasper-js</i> is an experimental javascript template parser, renderer
49+
and interpreter
50+
</h3>
51+
52+
<div class="py-6 font-header text-gray-500 text-3xl">
53+
<h3>Try it out!</h3>
54+
</div>
55+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
56+
<div class="flex flex-col gap-6 md:col-span-2">
57+
<div id="json" class="w-full h-32"></div>
58+
<div id="editor" class="w-full h-64 md:h-96"></div>
6659
</div>
67-
<div class="sdf-cell sdf-12 sdf-padding sdf-v-margin">
68-
<button class="sdf-button sdf-success" id="execute">EXECUTE</button>
60+
<div>
61+
<div
62+
id="render"
63+
class="border border-gray-300 h-64 md:h-full p-6 text-gray-700"
64+
>
65+
<div class="text-gray-500">Hit RENDER to view template output</div>
66+
</div>
6967
</div>
70-
<div class="sdf-cell sdf-12 sdf-padding"></div>
68+
</div>
69+
<div class="flex justify-end py-6">
70+
<button
71+
class="px-12 py-2 bg-green-600 rounded text-white font-mono hover:bg-green-500"
72+
id="execute"
73+
>
74+
RENDER
75+
</button>
7176
</div>
7277
</div>
7378
<a
@@ -115,11 +120,6 @@ <h3>Try it out!</h3>
115120

116121
const ejson = createEditor("json", kasper.demoJson, "json");
117122
const editor = createEditor("editor", kasper.demoSourceCode, "html");
118-
const output = createEditor(
119-
"output",
120-
"Hit execute to view nodes",
121-
"json"
122-
);
123123

124124
document.getElementById("execute").addEventListener("click", () => {
125125
const source = editor.getValue();
@@ -132,7 +132,7 @@ <h3>Try it out!</h3>
132132
document.getElementById("render").innerHTML = "";
133133
document.getElementById("render").appendChild(node);
134134

135-
output.setValue(result.split("},{").join("},\n{"));
135+
// output.setValue(result.split("},{").join("},\n{"));
136136
});
137137
</script>
138138
</body>

‎package.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@
1919
"author": "eugenioenko",
2020
"license": "MIT",
2121
"devDependencies": {
22-
"@types/node": "^17.0.0",
23-
"jasmine": "^3.10.0",
24-
"terser-webpack-plugin": "^1.2.3",
25-
"ts-loader": "^5.3.3",
22+
"@types/node": "^20.10.3",
23+
"jasmine": "^5.1.0",
24+
"terser-webpack-plugin": "^5.3.9",
25+
"ts-loader": "^9.5.1",
2626
"tslint": "^6.1.3",
27-
"typescript": "^3.3.3333",
28-
"webpack": "^4.29.5",
29-
"webpack-cli": "^4.9.2"
27+
"typescript": "^5.3.2",
28+
"webpack": "^5.89.0",
29+
"webpack-cli": "^5.1.4"
3030
}
3131
}

‎src/interpreter.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,7 @@ export class Interpreter implements Expr.ExprVisitor<any> {
243243
}
244244

245245
public visitDictionaryExpr(expr: Expr.Dictionary): any {
246-
const dict = {};
246+
const dict: any = {};
247247
for (const property of expr.properties) {
248248
const key = this.evaluate((property as Expr.Set).key);
249249
const value = this.evaluate((property as Expr.Set).value);

‎src/scanner.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ export class Scanner {
164164
}
165165

166166
const value = this.source.substring(this.start, this.current);
167-
const capitalized = Utils.capitalize(value);
167+
const capitalized = Utils.capitalize(value) as keyof typeof TokenType;
168168
if (Utils.isKeyword(capitalized)) {
169169
this.addToken(TokenType[capitalized], value);
170170
} else {

‎src/scope.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,6 @@ export class Scope {
2727
return this.parent.get(key);
2828
}
2929

30-
return window[key];
30+
return window[key as keyof typeof window];
3131
}
3232
}

‎src/types/demo.ts

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
export const DemoSource = `
2-
<!-- accessing scope elements -->
1+
export const DemoSource = `<!-- accessing scope elements -->
32
<h3>{{person.name}}</h3>
43
<h4>{{person.profession}}</h4>
54
@@ -11,15 +10,16 @@ export const DemoSource = `
1110
1211
<!-- iterating over arrays -->
1312
<h4>Hobbies ({{person.hobbies.length}}):</h4>
14-
<ul>
13+
<ul class="list-disc">
1514
<li @each="const hobby with index of person.hobbies" class="text-red">
1615
{{index + 1}}: {{hobby}}
1716
</li>
1817
</ul>
1918
2019
<!-- event binding -->
21-
<div class="sdf-v-margin">
20+
<div class="my-4">
2221
<button
22+
class="bg-blue-500 rounded px-4 py-2 text-white hover:bg-blue-700"
2323
@on:click="alert('Hello World'); console.log(100 / 2.5 + 15)"
2424
>
2525
CLICK ME
@@ -64,8 +64,7 @@ export const DemoSource = `
6464
6565
`;
6666

67-
export const DemoJson = `
68-
{
67+
export const DemoJson = `{
6968
"person": {
7069
"name": "John Doe",
7170
"profession": "Software Developer",

‎src/utils.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ export function isAlphaNumeric(char: string): boolean {
1313
}
1414

1515
export function capitalize(word: string): string {
16-
return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase();
16+
return word.charAt(0).toUpperCase() + word.substring(1).toLowerCase();
1717
}
1818

19-
export function isKeyword(word: string): boolean {
19+
export function isKeyword(word: keyof typeof TokenType): boolean {
2020
return TokenType[word] >= TokenType.And;
2121
}

‎tsconfig.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
"paths": {
1414
"@kasper/*": ["src/*"]
1515
},
16-
"esModuleInterop": true,
17-
"suppressImplicitAnyIndexErrors": true
16+
"esModuleInterop": true
1817
}
1918
}

‎webpack.prod.js

+1-8
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
const path = require("path");
2-
const TerserPlugin = require("terser-webpack-plugin");
32

43
module.exports = {
54
entry: "./src/kasper.ts",
6-
devtool: "source-map",
5+
devtool: "inline-source-map",
76
mode: "production",
87
watch: false,
98
module: {
@@ -23,10 +22,4 @@ module.exports = {
2322
path: path.resolve(__dirname, "dist"),
2423
// libraryTarget: "window",
2524
},
26-
optimization: {
27-
namedModules: false,
28-
namedChunks: false,
29-
nodeEnv: "production",
30-
minimizer: [new TerserPlugin()],
31-
},
3225
};

0 commit comments

Comments
 (0)