Merge pull request #7 from bert-w/browser-module

Browser module
bert-w · Mar 14, 2024 · 665249a · 665249a
2 parents cf41682 + 23ec165
commit 665249a
Show file tree

Hide file tree

Showing 13 changed files with 321 additions and 10 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -19,6 +19,9 @@ module.exports = {
     parserOptions: {
         ecmaVersion: 8
     },
+    globals: {
+        VERSION: true
+    },
     overrides: [
         javascriptSettings,
         {

diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,8 @@
+* text=auto eol=lf
+
+*.css diff=css
+*.html diff=html
+*.md diff=markdown
+
+/.github export-ignore
+CHANGELOG.md export-ignore
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,32 @@
+name: Deploy GitHub Pages
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  deploy:
+    runs-on: ubuntu-22.04
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          cache: 'npm'
+          node-version: 20.x
+
+      - name: Build + Inject
+        run: |
+          npm ci
+          npm run build
+          sed -i -e '/__SOMPLEXITY_SRC__/{r dist/sqomplexity-browser.js' -e 'd}' ./public/index.html
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./public
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -38,7 +38,9 @@ jobs:
         run: npm run lint
 
       - name: npm run build
-        run: npm run build
+        run: |
+          npm run build
+          node dist/sqomplexity.js -V
 
       # Run some simply CLI tool tests.
       - name: CLI test

diff --git a/app.js b/app.js
@@ -21,7 +21,7 @@ program
     .name('SQompLexity')
     // .description('Determine the SQL complexity score for a single SQL SELECT-query.')
     .description(art + '\nAuthor:\n  BertW')
-    .version('0.1.0')
+    .version(typeof VERSION !== 'undefined' ? VERSION : '0')
     .argument('[queries...]', 'one or multiple SQL queries (space separated or quoted)')
     .option('-f, --files', 'assumes the given arguments/queries are filepaths, and it will read the contents from them. Every file is expected to contain 1 query; if not, their complexity is summed')
     .option('-b, --base64', 'assumes the given arguments/queries are base64 encoded')

diff --git a/dist/sqomplexity-browser.js b/dist/sqomplexity-browser.js
diff --git a/dist/sqomplexity.js b/dist/sqomplexity.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
         "cyclomatic"
     ],
     "main": "src/sqomplexity.js",
+    "browser": "dist/sqomplexity-browser.js",
     "type": "module",
     "scripts": {
         "test": "cross-env NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" npx jest",

diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,153 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>SQompLexity: A metric to calculate complexity scores for SQL queries</title>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css"
+          integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg=="
+          crossorigin="anonymous"
+          referrerpolicy="no-referrer"/>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"
+            integrity="sha512-D9gUyxqja7hBtkWpPWGt9wfbfaMGVt9gnyCvYa+jojwwPHLCzUm5i8rpk7vD7wNee9bA35eYIjobYPaQuKS1MQ=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"></script>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/agate.min.css"
+          integrity="sha512-wI7oXtzNHj/bqfLA3P6x3XYbcwzsnIKaPLfjjX8ZAXhc65+kSI6sh8gLOOByOKImokAjHUQR0xAJQ/xZTzwuOA=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+
+    <style>
+        html,
+        body {
+            height: 100%;
+        }
+
+        body {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background-color: #f5f5f5;
+        }
+
+        nav {
+            background: #333 !important;
+        }
+
+        nav .navbar-brand {
+            color: #7bd694;
+        }
+
+        main {
+            width: 100%;
+            max-width: 600px;
+            padding: 15px;
+            margin: auto;
+        }
+
+        textarea {
+            min-height: 300px !important;
+        }
+
+        footer a {
+            text-decoration: none;
+        }
+
+        nav svg {
+            color: inherit;
+            height: 16px;
+            width: 16px;
+        }
+    </style>
+</head>
+<body>
+<nav class="navbar navbar-expand bg-dark border-bottom border-body w-100 flex-col" data-bs-theme="dark">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="#">SQompLexity</a>
+        <div class="collapse navbar-collapse">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link disabled fst-italic text-muted">A metric to calculate complexity scores for SQL queries</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://github.com/bert-w/sqomplexity" target="_blank">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" class="mb-1">
+                            <path fill="white"
+                                  d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
+                        </svg>
+                        GitHub
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+
+<main>
+    <div class="text-center mb-5 text-muted">
+        <h1 class="font-monospace"><b>SQ</b>omp<b>L</b>exity</h1>
+        <h2 class="fs-6 fst-italic">Pronounced "es-complexity"</h2>
+    </div>
+    <div class="form-floating mb-3">
+        <input type="text" class="form-control" id="query" placeholder="SQL query" autocomplete="off">
+        <label for="query" style="color: #999">Your SQL query</label>
+        <div class="invalid-feedback">Your query is invalid.</div>
+    </div>
+
+    <h2 id="output-score" class="text-center d-none fs-4 mb-3">Complexity score: <b></b></h2>
+
+    <div class="form-floating">
+        <span id="loading" class="d-none">Loading...</span>
+        <pre><code id="output" class="language-json"></code></pre>
+    </div>
+</main>
+<script>
+    __SQOMPLEXITY_SRC__
+</script>
+<script>
+    (function () {
+        console.log("SQompLexity v" + window.$sqomplexity.version());
+        function debounce(func, delay) {
+            let timeoutId;
+            return function (...args) {
+                const context = this;
+                clearTimeout(timeoutId);
+                timeoutId = setTimeout(() => {
+                    func.apply(context, args);
+                }, delay);
+            };
+        }
+
+        const loading = document.getElementById('loading');
+        const output = document.getElementById('output');
+        const outputScore = document.getElementById('output-score');
+        const query = document.getElementById('query');
+
+        query.addEventListener('input', debounce(async function (e) {
+            if (!e.target.value.length) {
+                return;
+            }
+            loading.classList.remove('d-none');
+            query.classList.remove('is-valid', 'is-invalid');
+            outputScore.classList.add('d-none');
+
+            const result = await (new window.$sqomplexity({all: true})).run(e.target.value);
+            const score = result[0].complexity;
+
+            output.innerHTML = JSON.stringify(result, null, '    ');
+            delete output.dataset.highlighted;
+            query.classList.add(score !== -1 ? 'is-valid' : 'is-invalid');
+            loading.classList.add('d-none');
+            if (score !== -1) {
+                outputScore.classList.remove('d-none');
+                outputScore.querySelector('b').innerHTML = score;
+            }
+
+            hljs.highlightAll();
+        }, 300));
+    })();
+</script>
+</body>
+</html>
diff --git a/src/program.js b/src/program.js
@@ -64,12 +64,12 @@ export class Program {
             .calculate();
 
         return {
+            // Round to 6 decimal places.
+            complexity: Math.round(calculator.getScore() * 1000000) / 1000000,
             dialect: this.dialect,
             query: this.query,
             stats: calculator.getStats(),
-            ast: parsed.ast,
-            // Round to 6 decimal places.
-            complexity: Math.round(calculator.getScore() * 1000000) / 1000000
+            ast: parsed.ast
         };
     }
 

diff --git a/src/sqomplexity.js b/src/sqomplexity.js
@@ -21,10 +21,20 @@ export class Sqomplexity {
     }
 
     /**
-     * @param {string[]} queries
+     * Get the current version of SQompLexity.
+     * @returns {string}
+     */
+    static version() {
+        return typeof VERSION !== 'undefined' ? VERSION : '0';
+    }
+
+    /**
+     * @param {string[]|string} queries
      * @returns {void|array}
      */
     async run(queries) {
+        queries = Array.isArray(queries) ? queries : [queries];
+
         if (!queries.length) {
             throw new Error('You need to provide one or more queries.');
         }