add types to js (#7)

* started adding types * no type errors * set var to itself
JosuaKrause · Jan 17, 2024 · 2d99138 · 2d99138
1 parent 7baa9d2
commit 2d99138
Show file tree

Hide file tree

Showing 24 changed files with 2,097 additions and 263 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,21 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "commonjs": true,
+    "es2021": true
+  },
+  "extends": ["google", "prettier"],
+  "overrides": [],
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": "latest"
+  },
+  "rules": {
+    "require-jsdoc": "off",
+    "no-implicit-globals": "error",
+    "no-undef": "error"
+  },
+  "plugins": ["eslint-plugin-html"],
+  "ignorePatterns": ["lib/"]
+}
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 .DS_Store
+/node_modules/
 /www/
diff --git a/.prettierrc b/.prettierrc
@@ -1,7 +1,7 @@
 {
-    "trailingComma": "all",
-    "tabWidth": 2,
-    "semi": true,
-    "singleQuote": true,
-    "printWidth": 79
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 79
 }
diff --git a/demo0.html b/demo0.html
@@ -58,15 +58,16 @@
     ></script>
     <script>
       window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
+      function gtag(...args) {
+        window.dataLayer.push(args);
       }
       gtag('js', new Date());
 
       gtag('config', 'G-4DHJEMESJD');
     </script>
     <!-- Google tag end -->
     <script src="./lib/gl-matrix-min.js" defer></script>
+    <script async src="demo0.js" type="module"></script>
   </head>
   <body>
     <div class="hmain">
@@ -81,24 +82,11 @@
     <div id="error"></div>
     <footer>
       <div class="footer-style">
-        © jk 2023
+        © jk 2024
         <a href="https://github.com/JosuaKrause/searchspace" target="_blank">
           [source]
         </a>
       </div>
     </footer>
   </body>
-  <script type="module" defer>
-    import App, { DF_L1, DF_L2 } from './js/app.js';
-
-    new App('#main', '#header', '#footer', '#topbar', '#bottombar', '#error', {
-      title: 'L2 and L1 Distance Functions',
-      unitCircle: false,
-      allowUnitCircle: false,
-      convexHull: false,
-      allowConvexHull: false,
-      distanceFn: DF_L2,
-      metrics: [DF_L1, DF_L2],
-    }).repaint();
-  </script>
 </html>
diff --git a/demo0.js b/demo0.js
@@ -0,0 +1,30 @@
+/*
+ * Searchspace – An interactive visualization for various similarity measures.
+ * Copyright (C) 2024 Josua Krause
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+// @ts-check
+
+import App, { DF_L1, DF_L2 } from './js/app.js';
+
+new App('#main', '#header', '#footer', '#topbar', '#bottombar', '#error', {
+  title: 'L2 and L1 Distance Functions',
+  unitCircle: false,
+  allowUnitCircle: false,
+  convexHull: false,
+  allowConvexHull: false,
+  distanceFn: DF_L2,
+  metrics: [DF_L1, DF_L2],
+}).repaintWhenReady();
diff --git a/demo1.html b/demo1.html
@@ -58,15 +58,16 @@
     ></script>
     <script>
       window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
+      function gtag(...args) {
+        window.dataLayer.push(args);
       }
       gtag('js', new Date());
 
       gtag('config', 'G-4DHJEMESJD');
     </script>
     <!-- Google tag end -->
     <script src="./lib/gl-matrix-min.js" defer></script>
+    <script async src="demo1.js" type="module"></script>
   </head>
   <body>
     <div class="hmain">
@@ -81,24 +82,11 @@
     <div id="error"></div>
     <footer>
       <div class="footer-style">
-        © jk 2023
+        © jk 2024
         <a href="https://github.com/JosuaKrause/searchspace" target="_blank">
           [source]
         </a>
       </div>
     </footer>
   </body>
-  <script type="module" defer>
-    import App, { DF_COS, DF_L2_PROJ } from './js/app.js';
-
-    new App('#main', '#header', '#footer', '#topbar', '#bottombar', '#error', {
-      title: 'Cosine Similarity Function',
-      unitCircle: true,
-      allowUnitCircle: true,
-      convexHull: false,
-      allowConvexHull: false,
-      distanceFn: DF_COS,
-      metrics: [DF_COS, DF_L2_PROJ],
-    }).repaint();
-  </script>
 </html>
diff --git a/demo1.js b/demo1.js
@@ -0,0 +1,30 @@
+/*
+ * Searchspace – An interactive visualization for various similarity measures.
+ * Copyright (C) 2024 Josua Krause
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+// @ts-check
+
+import App, { DF_COS, DF_L2_PROJ } from './js/app.js';
+
+new App('#main', '#header', '#footer', '#topbar', '#bottombar', '#error', {
+  title: 'Cosine Similarity Function',
+  unitCircle: true,
+  allowUnitCircle: true,
+  convexHull: false,
+  allowConvexHull: false,
+  distanceFn: DF_COS,
+  metrics: [DF_COS, DF_L2_PROJ],
+}).repaintWhenReady();
diff --git a/demo2.html b/demo2.html
@@ -55,15 +55,16 @@
     ></script>
     <script>
       window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
+      function gtag(...args) {
+        window.dataLayer.push(args);
       }
       gtag('js', new Date());
 
       gtag('config', 'G-4DHJEMESJD');
     </script>
     <!-- Google tag end -->
     <script src="./lib/gl-matrix-min.js" defer></script>
+    <script async src="demo2.js" type="module"></script>
   </head>
   <body>
     <div class="hmain">
@@ -78,33 +79,11 @@
     <div id="error"></div>
     <footer>
       <div class="footer-style">
-        © jk 2023
+        © jk 2024
         <a href="https://github.com/JosuaKrause/searchspace" target="_blank">
           [source]
         </a>
       </div>
     </footer>
   </body>
-  <script type="module" defer>
-    import App, { DF_DOT, DF_DOT_ADJ } from './js/app.js';
-
-    new App('#main', '#header', '#footer', '#topbar', '#bottombar', '#error', {
-      title: 'Adjusted Dot Product',
-      unitCircle: true,
-      allowUnitCircle: true,
-      convexHull: true,
-      allowConvexHull: true,
-      distanceFn: DF_DOT_ADJ,
-      metrics: [DF_DOT, DF_DOT_ADJ],
-      points: [
-        [-1.1, 0.6],
-        [-1.3, 0.7],
-        [-1.4, 0.8],
-        [-1.4, 1.0],
-        [-1.0, 0.9],
-        [-1.0, 0.8],
-      ],
-      initRefPos: [-1.2, 0.8],
-    }).repaint();
-  </script>
 </html>
diff --git a/demo2.js b/demo2.js
@@ -0,0 +1,39 @@
+/*
+ * Searchspace – An interactive visualization for various similarity measures.
+ * Copyright (C) 2024 Josua Krause
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+// @ts-check
+
+import App, { DF_DOT, DF_DOT_ADJ } from './js/app.js';
+
+new App('#main', '#header', '#footer', '#topbar', '#bottombar', '#error', {
+  title: 'Adjusted Dot Product',
+  unitCircle: true,
+  allowUnitCircle: true,
+  convexHull: true,
+  allowConvexHull: true,
+  distanceFn: DF_DOT_ADJ,
+  metrics: [DF_DOT, DF_DOT_ADJ],
+  points: [
+    [-1.1, 0.6],
+    [-1.3, 0.7],
+    [-1.4, 0.8],
+    [-1.4, 1.0],
+    [-1.0, 0.9],
+    [-1.0, 0.8],
+  ],
+  initRefPos: [-1.2, 0.8],
+}).repaintWhenReady();
diff --git a/eslint.config.js b/eslint.config.js
diff --git a/index.html b/index.html
@@ -49,15 +49,16 @@
     ></script>
     <script>
       window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
+      function gtag(...args) {
+        window.dataLayer.push(args);
       }
       gtag('js', new Date());
 
       gtag('config', 'G-4DHJEMESJD');
     </script>
     <!-- Google tag end -->
     <script src="./lib/gl-matrix-min.js" defer></script>
+    <script async src="index.js" type="module"></script>
   </head>
   <body>
     <div class="hmain">
@@ -72,23 +73,11 @@
     <div id="error"></div>
     <footer>
       <div class="footer-style">
-        © jk 2023
+        © jk 2024
         <a href="https://github.com/JosuaKrause/searchspace" target="_blank">
           [source]
         </a>
       </div>
     </footer>
   </body>
-  <script type="module" defer>
-    import App from './js/app.js';
-
-    new App(
-      '#main',
-      '#header',
-      '#footer',
-      '#topbar',
-      '#bottombar',
-      '#error',
-    ).repaint();
-  </script>
 </html>
diff --git a/index.js b/index.js
@@ -0,0 +1,29 @@
+/*
+ * Searchspace – An interactive visualization for various similarity measures.
+ * Copyright (C) 2024 Josua Krause
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+// @ts-check
+
+import App from './js/app.js';
+
+new App(
+  '#main',
+  '#header',
+  '#footer',
+  '#topbar',
+  '#bottombar',
+  '#error',
+).repaintWhenReady();