chore: typescript (#269)

* chore(core) most files ported to typescript

* chore(core) fix linter

* chore(core) more types

* chore(core) fix ESM index imports

* chore(core) fix test types

* chore(react) add ts eslint ts rules

* chore: update gh test action

* chore: remove gl

* chore: add test-ci

* chore: fix most strict type checks

* chore: dont build examples, fix lint

* chore: work on test imports

* chore: export types and fix get-started

* chore: remove webpack and babel

* chore: work on standalone bundle

* chore: ignore root deps

* chore: fix test runner (but not all tests)

* chore: fix tests

* chore: coverage

---------

Signed-off-by: Chris Gervang <[email protected]>

.eslintignore

@@ -1,4 +1,5 @@
 dist/
+test/
 node_modules/
 dist.*.js
 *.min.js

.eslintrc.cjs

@@ -0,0 +1,130 @@
+const {getESLintConfig} = require('ocular-dev-tools/configuration');
+
+const config = getESLintConfig({
+  react: '16.13.1',
+  overrides: {
+    parser: '',
+    parserOptions: {
+      project: ['./tsconfig.json'],
+      ecmaVersion: 2020
+    },
+    extends: ['prettier'],
+    env: {
+      es2020: true
+      // browser: true,
+      // node: true
+    },
+
+    rules: {
+      camelcase: 0,
+      indent: 0,
+      'import/no-unresolved': 0,
+      'import/no-extraneous-dependencies': 0, // ['warn'],
+      'no-console': 1,
+      'no-continue': ['warn'],
+      'callback-return': 0,
+      'max-depth': ['warn', 4],
+      complexity: ['warn'],
+      'max-statements': ['warn'],
+      'default-case': ['warn'],
+      'no-eq-null': ['warn'],
+      eqeqeq: ['warn'],
+      radix: 0,
+      'arrow-parens': ['error', 'as-needed'], // TODO: Remove later
+      // 'accessor-pairs': ['error', {getWithoutSet: false, setWithoutGet: false}]
+    },
+
+    overrides: [
+      {
+        files: ['**/*.js', '**/*.ts', '**/*.tsx', '**/*.d.ts'],
+        rules: {
+          indent: 0,
+          // Gradually enable
+          '@typescript-eslint/ban-ts-comment': 0,
+          '@typescript-eslint/ban-types': 0,
+          '@typescript-eslint/no-unsafe-member-access': 0,
+          '@typescript-eslint/no-unsafe-assignment': 0,
+          '@typescript-eslint/no-var-requires': 0,
+          '@typescript-eslint/no-unused-vars': [
+            'warn',
+            {vars: 'all', args: 'none', ignoreRestSiblings: false}
+          ],
+          '@typescript-eslint/unbound-method': 0,
+          // We still have some issues with import resolution
+          'import/named': 0,
+          // Warn instead of error
+          // 'max-params': ['warn'],
+          // 'no-undef': ['warn'],
+          // camelcase: ['warn'],
+          // '@typescript-eslint/no-floating-promises': ['warn'],
+          // '@typescript-eslint/await-thenable': ['warn'],
+          // '@typescript-eslint/no-misused-promises': ['warn'],
+          '@typescript-eslint/no-empty-function': 0,
+          // We use function hoisting
+          '@typescript-eslint/no-use-before-define': 0,
+          // We always want explicit typing, e.g `field: string = ''`
+          '@typescript-eslint/no-inferrable-types': 0,
+          '@typescript-eslint/restrict-template-expressions': 0,
+          '@typescript-eslint/explicit-module-boundary-types': 0,
+          '@typescript-eslint/require-await': 0,
+          '@typescript-eslint/no-unsafe-return': 0,
+          '@typescript-eslint/no-unsafe-call': 0,
+          '@typescript-eslint/no-empty-interface': 0,
+          '@typescript-eslint/restrict-plus-operands': 0
+        }
+      },
+      // tests are run with aliases set up in node and webpack.
+      // This means lint will not find the imported files and generate false warnings
+      {
+        // scripts use devDependencies
+        files: [
+          '**/test/**/*.js',
+          '**/test/**/*.ts',
+          '**/scripts/**/*.js',
+          '*.config.js',
+          '*.config.local.js',
+          '*.config.local.mjs'
+        ],
+        globals: {
+          process: true
+        },
+        rules: {
+          'import/no-unresolved': 0,
+          'import/no-extraneous-dependencies': 0,
+          'no-process-env': 0
+        }
+      },
+      {
+        files: ['*.spec.js', 'webpack.config.js', '**/bundle/*.js'],
+        rules: {
+          'import/no-extraneous-dependencies': 0
+        }
+      }
+    ],
+
+    settings: {
+      // Ensure eslint finds typescript files
+      'import/resolver': {
+        node: {
+          extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx']
+        }
+      }
+    }
+  }
+});
+
+// Uncomment to log the eslint config
+// console.debug(config);
+
+module.exports = config;
+
+// rules: {
+//   'guard-for-in': 0,
+//   'no-inline-comments': 0,
+//   camelcase: 0,
+//   'react/forbid-prop-types': 0,
+//   'react/no-deprecated': 0,
+//   'import/no-unresolved': ['error', {ignore: ['test']}],
+//   'import/no-extraneous-dependencies': ['error', {devDependencies: false, peerDependencies: true}],
+//   // 'accessor-pairs': ['error', {getWithoutSet: false, setWithoutGet: false}],
+// },

.github/workflows/test.yml

@@ -7,26 +7,31 @@ on:
     - master
   pull_request:
 
+permissions:
+  contents: read
+
 jobs:
   test-node:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-22.04
+    permissions:
+      checks: write
+      contents: read
 
     steps:
-      - uses: actions/checkout@v2.1.1
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
 
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
         with:
-          node-version: '14.x'
+          node-version: '18.x'
 
       - name: Install dependencies
-        run: |
-          sudo apt-get install -y mesa-utils xvfb libgl1-mesa-dri libglapi-mesa libosmesa6
-          yarn bootstrap
+        run: yarn bootstrap
+
       - name: Run tests
-        run: |
-          xvfb-run -s "-ac -screen 0 1280x1024x16" yarn test ci
+        run: yarn test-ci
+
       - name: Coveralls
-        uses: coverallsapp/github-action@master
+        uses: coverallsapp/github-action@09b709cf6a16e30b0808ba050c7a6e8a5ef13f8d # v1.2.5
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -7,6 +7,8 @@ coverage/
 .reify-cache/
 .cache/
 
+tsconfig.tsbuildinfo
+
 */**/yarn.lock
 yarn-error.log
 */**/package-lock.json

.ocularrc.js

@@ -1,26 +1,46 @@
-// eslint-disable-next-line no-unused-vars
-const {resolve} = require('path');
+/** @typedef {import('ocular-dev-tools').OcularConfig} OcularConfig */
+import {dirname, join} from 'path';
+import {fileURLToPath} from 'url';
 
-module.exports = {
+const packageRoot = dirname(fileURLToPath(import.meta.url));
+
+/** @type {OcularConfig} */
+const config = {
   lint: {
-    paths: ['docs', 'modules', 'examples', 'test'],
-    extensions: ['js']
+    paths: ['modules', 'test']
+    // paths: ['modules', 'test', 'examples', 'website']
+  },
+
+  babel: false,
+
+  bundle: {
+    globalName: 'hubble',
+    target: ['chrome110', 'firefox110', 'safari15'],
+    format: 'umd',
+    globals: {
+      '@hubble.gl/*': 'globalThis.hubble'
+    }
   },
 
-  // aliases: {
-  //   // TEST
-  //   test: resolve(__dirname, './test')
-  // },
+  typescript: {
+    project: 'tsconfig.build.json'
+  },
+
+  aliases: {
+    'hubble.gl-test': join(packageRoot, './test')
+  },
 
-  browserTest: {
-    server: {wait: 5000}
+  coverage: {
+    test: 'browser'
   },
 
   entry: {
-    test: 'test/node.js',
-    'test-browser': 'test/browser.js',
-    bench: 'test/bench/node.js',
-    'bench-browser': 'test/bench/browser.js',
-    size: 'test/size/main.js'
+    test: 'test/node.ts',
+    'test-browser': 'index.html',
+    // bench: 'test/bench/index.js',
+    // 'bench-browser': 'test/bench/browser.html',
+    size: 'test/size/import-nothing.js'
   }
 };
+
+export default config;

.prettierignore

@@ -1,8 +1,9 @@
-node_modules/
-**/dist*/**/*.js
+website/build
+**/dist*/**/*
 dist.js
 *.min.js
 *.md
 
 public/
-.cache/
+.cache/
+.docusaurus

examples/get-started/pure-js/app.js

@@ -1,3 +1,4 @@
+/* global document, URL */
 import {Deck} from '@deck.gl/core';
 import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
 import {DeckAdapter, DeckAnimation, AnimationManager, WebMEncoder} from '@hubble.gl/core';

examples/get-started/pure-js/index.html

@@ -68,6 +68,6 @@ <h4>2nd Camera Position</h4>
       <button id="re-render">Re-Render</button>
     </div> 
    </div>
-    <script src='app.js'></script>
+    <script type="module" src='app.js'></script>
   </body>
 </html>

examples/get-started/pure-js/package.json

@@ -2,25 +2,18 @@
   "name": "pure-js-basic",
   "version": "0.0.0",
   "license": "MIT",
+  "private": true,
   "scripts": {
-    "start": "webpack-dev-server --progress --hot --open",
-    "start-local": "webpack-dev-server --env.local --progress --hot --open",
-    "start-local-luma": "webpack-dev-server --env.local --env.local-luma --progress --hot --open",
-    "build": "webpack -p",
-    "clean": "rm -rf yarn.lock ./node_modules",
-    "bootstrap": "yarn clean && yarn"
+    "start": "vite --open",
+    "start-local": "vite --config ../../vite.config.local.mjs",
+    "build": "vite build"
   },
   "dependencies": {
     "@hubble.gl/core": "^1.3.0",
     "deck.gl": "^8.3.8",
     "popmotion": "9.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.1",
-    "@babel/preset-env": "^7.12.1",
-    "babel-loader": "^8.0.5",
-    "webpack": "^4.29.0",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.1"
+    "vite": "^4.0.0"
   }
 }