Project upgrades (#13)

* build: dependency upgrade * feat: added tailwind styling * chore: fix build * chore: min build * chore: fix ci node version
eugenioenko · Dec 4, 2023 · a92b3d5 · a92b3d5
1 parent 812e306
commit a92b3d5
Show file tree

Hide file tree

Showing 13 changed files with 2,932 additions and 4,427 deletions.
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -5,23 +5,23 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   build:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [18.x]
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm install
-    - run: npm run build
-    - run: npm run testprod
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: npm install
+      - run: npm run build
+      - run: npm run testprod
diff --git a/dist/kasper.js b/dist/kasper.js
diff --git a/dist/kasper.min.js b/dist/kasper.min.js
diff --git a/live/index.html b/live/index.html
@@ -1,73 +1,78 @@
 <!DOCTYPE html>
-<html ng-app="app">
+<html>
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>kasper-js</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="./css/sdf.css" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap"
+      rel="stylesheet"
+    />
     <script src="../dist/kasper.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.9/ace.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          fontFamily: {
+            mono: [
+              "Share Tech Mono",
+              "Consolas",
+              "Liberation Mono",
+              "Courier New",
+            ],
+          },
+        },
+      };
+    </script>
     <style>
-      #container {
-        max-width: 1280px;
-        margin: auto;
-      }
-      #editor,
-      #output,
-      #render {
-        width: 100%;
-        height: 230px;
-        margin-bottom: 30px;
+      kasper {
+        color: #374151;
       }
-      #json,
-      #editor {
-        width: 100%;
-        height: 235px;
-        margin-bottom: 30px;
+      kasper h3 {
+        font-size: 28px;
+        margin-bottom: 8px;
       }
-      #render {
-        border: 1px solid gray;
-        padding: 15px;
-        margin-bottom: 35px;
-        overflow: auto;
-      }
-      #console {
-        height: 150px;
-        overflow-y: auto;
-      }
-      * {
-        box-sizing: border-box;
+      kasper h4 {
+        font-size: 21px;
+        margin-bottom: 8px;
+        margin-top: 8px;
       }
     </style>
   </head>
   <body>
-    <div class="sdf-wrapper sdf-default" id="container">
-      <div class="sdf-grid">
-        <div class="sdf-cell sdf-12 sdf-padding">
-          <h1>kasper-js</h1>
-          <h3>
-            <small
-              ><i>kasper-js</i> is an experimental javascript template
-              parser</small
-            >
-          </h3>
-        </div>
-        <div class="sdf-cell sdf-12">
-          <h3>Try it out!</h3>
-        </div>
-        <div class="sdf-cell sdf-12 sdf-sm-6 sdf-padding">
-          <div id="json"></div>
-          <div id="editor"></div>
-        </div>
-        <div class="sdf-cell sdf-12 sdf-sm-6 sdf-padding">
-          <div id="render">Hit execute to view template output</div>
-          <div id="output"></div>
+    <div class="max-w-screen-xl mx-auto px-6 pt-6 pb-12">
+      <h1 class="font-mono text-5xl text-gray-500 pb-1">kasper-js</h1>
+      <h3 class="font-mono text-lg text-gray-500 pb-4">
+        <i>kasper-js</i> is an experimental javascript template parser, renderer
+        and interpreter
+      </h3>
+
+      <div class="py-6 font-header text-gray-500 text-3xl">
+        <h3>Try it out!</h3>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div class="flex flex-col gap-6 md:col-span-2">
+          <div id="json" class="w-full h-32"></div>
+          <div id="editor" class="w-full h-64 md:h-96"></div>
         </div>
-        <div class="sdf-cell sdf-12 sdf-padding sdf-v-margin">
-          <button class="sdf-button sdf-success" id="execute">EXECUTE</button>
+        <div>
+          <div
+            id="render"
+            class="border border-gray-300 h-64 md:h-full p-6 text-gray-700"
+          >
+            <div class="text-gray-500">Hit RENDER to view template output</div>
+          </div>
         </div>
-        <div class="sdf-cell sdf-12 sdf-padding"></div>
+      </div>
+      <div class="flex justify-end py-6">
+        <button
+          class="px-12 py-2 bg-green-600 rounded text-white font-mono hover:bg-green-500"
+          id="execute"
+        >
+          RENDER
+        </button>
       </div>
     </div>
     <a
@@ -115,11 +120,6 @@ <h3>Try it out!</h3>
 
       const ejson = createEditor("json", kasper.demoJson, "json");
       const editor = createEditor("editor", kasper.demoSourceCode, "html");
-      const output = createEditor(
-        "output",
-        "Hit execute to view nodes",
-        "json"
-      );
 
       document.getElementById("execute").addEventListener("click", () => {
         const source = editor.getValue();
@@ -132,7 +132,7 @@ <h3>Try it out!</h3>
         document.getElementById("render").innerHTML = "";
         document.getElementById("render").appendChild(node);
 
-        output.setValue(result.split("},{").join("},\n{"));
+        // output.setValue(result.split("},{").join("},\n{"));
       });
     </script>
   </body>

diff --git a/package.json b/package.json
@@ -19,13 +19,13 @@
   "author": "eugenioenko",
   "license": "MIT",
   "devDependencies": {
-    "@types/node": "^17.0.0",
-    "jasmine": "^3.10.0",
-    "terser-webpack-plugin": "^1.2.3",
-    "ts-loader": "^5.3.3",
+    "@types/node": "^20.10.3",
+    "jasmine": "^5.1.0",
+    "terser-webpack-plugin": "^5.3.9",
+    "ts-loader": "^9.5.1",
     "tslint": "^6.1.3",
-    "typescript": "^3.3.3333",
-    "webpack": "^4.29.5",
-    "webpack-cli": "^4.9.2"
+    "typescript": "^5.3.2",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
   }
 }
diff --git a/src/interpreter.ts b/src/interpreter.ts
@@ -243,7 +243,7 @@ export class Interpreter implements Expr.ExprVisitor<any> {
   }
 
   public visitDictionaryExpr(expr: Expr.Dictionary): any {
-    const dict = {};
+    const dict: any = {};
     for (const property of expr.properties) {
       const key = this.evaluate((property as Expr.Set).key);
       const value = this.evaluate((property as Expr.Set).value);

diff --git a/src/scanner.ts b/src/scanner.ts
@@ -164,7 +164,7 @@ export class Scanner {
     }
 
     const value = this.source.substring(this.start, this.current);
-    const capitalized = Utils.capitalize(value);
+    const capitalized = Utils.capitalize(value) as keyof typeof TokenType;
     if (Utils.isKeyword(capitalized)) {
       this.addToken(TokenType[capitalized], value);
     } else {

diff --git a/src/scope.ts b/src/scope.ts
@@ -27,6 +27,6 @@ export class Scope {
       return this.parent.get(key);
     }
 
-    return window[key];
+    return window[key as keyof typeof window];
   }
 }
diff --git a/src/types/demo.ts b/src/types/demo.ts
@@ -1,5 +1,4 @@
-export const DemoSource = `
-<!-- accessing scope elements -->
+export const DemoSource = `<!-- accessing scope elements -->
 <h3>{{person.name}}</h3>
 <h4>{{person.profession}}</h4>
 
@@ -11,15 +10,16 @@ export const DemoSource = `
 
 <!-- iterating over arrays -->
 <h4>Hobbies ({{person.hobbies.length}}):</h4>
-<ul>
+<ul class="list-disc">
   <li @each="const hobby with index of person.hobbies" class="text-red">
     {{index + 1}}: {{hobby}}
   </li>
 </ul>
 
 <!-- event binding -->
-<div  class="sdf-v-margin">
+<div class="my-4">
   <button
+    class="bg-blue-500 rounded px-4 py-2 text-white hover:bg-blue-700"
     @on:click="alert('Hello World'); console.log(100 / 2.5 + 15)"
   >
     CLICK ME
@@ -64,8 +64,7 @@ export const DemoSource = `
 
 `;
 
-export const DemoJson = `
-{
+export const DemoJson = `{
   "person": {
     "name": "John Doe",
     "profession": "Software Developer",

diff --git a/src/utils.ts b/src/utils.ts
@@ -13,9 +13,9 @@ export function isAlphaNumeric(char: string): boolean {
 }
 
 export function capitalize(word: string): string {
-  return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase();
+  return word.charAt(0).toUpperCase() + word.substring(1).toLowerCase();
 }
 
-export function isKeyword(word: string): boolean {
+export function isKeyword(word: keyof typeof TokenType): boolean {
   return TokenType[word] >= TokenType.And;
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -13,7 +13,6 @@
     "paths": {
       "@kasper/*": ["src/*"]
     },
-    "esModuleInterop": true,
-    "suppressImplicitAnyIndexErrors": true
+    "esModuleInterop": true
   }
 }
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -1,9 +1,8 @@
 const path = require("path");
-const TerserPlugin = require("terser-webpack-plugin");
 
 module.exports = {
   entry: "./src/kasper.ts",
-  devtool: "source-map",
+  devtool: "inline-source-map",
   mode: "production",
   watch: false,
   module: {
@@ -23,10 +22,4 @@ module.exports = {
     path: path.resolve(__dirname, "dist"),
     // libraryTarget: "window",
   },
-  optimization: {
-    namedModules: false,
-    namedChunks: false,
-    nodeEnv: "production",
-    minimizer: [new TerserPlugin()],
-  },
 };