WIP - Align lint

.eslintrc.js

@@ -1,18 +1,48 @@
+const environmentRules = require('@metamask/eslint-config/src/environment.json');
+
 module.exports = {
   root: true,
 
   extends: ['@metamask/eslint-config', '@metamask/eslint-config-nodejs'],
 
+  rules: {
+    // The JSDoc plugin doesn't seem to like template string types.
+    'jsdoc/valid-types': 'off',
+  },
+
   overrides: [
     {
-      files: ['./demo/src/**/*.js', './index.js', './util.js'],
-      globals: {
-        Blob: true,
-        document: true,
-        window: true,
+      files: ['./demo/src/**/*.js', './src/*.js'],
+      extends: ['@metamask/eslint-config-browser'],
+      rules: {
+        // We use Node syntax in these files, so that should continue to be
+        // allowed. However, we also need to allow browser-specific globals.
+        'no-restricted-globals': [
+          'error',
+          ...environmentRules['no-restricted-globals'].filter((rule) => {
+            return !['document', 'module', 'require', 'window'].includes(
+              rule.name,
+            );
+          }),
+        ],
+        // It is fine to shadow the global `event`.
+        'no-shadow': ['error', { allow: ['event'] }],
       },
     },
   ],
 
-  ignorePatterns: ['!.eslintrc.js', '!.prettierrc.js', 'demo/dist/'],
+  ignorePatterns: [
+    '!.eslintrc.js',
+    '!.prettierrc.js',
+    'dist/',
+    'demo/dist/',
+    'docs/',
+    '.yarn/',
+  ],
+
+  settings: {
+    jsdoc: {
+      mode: 'typescript',
+    },
+  },
 };

.github/workflows/build-lint.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-20.04
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [18.x, 20.x]
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}

.nvmrc

@@ -1 +1 @@
-v12
+lts/*

README.md

@@ -47,8 +47,8 @@ viewer.stopAnimation();
 
 ### Setup
 
-- Install [Node.js](https://nodejs.org) version 12
-  - If you are using [nvm](https://github.com/creationix/nvm#installation) (recommended) running `nvm use` will automatically choose the right node version for you.
+- Install the current LTS version of [Node.js](https://nodejs.org)
+  - If you are using [nvm](https://github.com/creationix/nvm#installation) (recommended) running `nvm install` will install the latest version and running `nvm use` will automatically choose the right node version for you.
 - Install [Yarn v1](https://yarnpkg.com/en/docs/install)
 - Run `yarn setup` to install dependencies and run any requried post-install scripts
   - **Warning:** Do not use the `yarn` / `yarn install` command directly. Use `yarn setup` instead. The normal install command will skip required post-install scripts, leaving your development environment in an invalid state.

demo/build.js

@@ -1,10 +1,9 @@
-const path = require('path');
+const execa = require('execa');
 const { promises: fs } = require('fs');
+const path = require('path');
 const { promisify } = require('util');
-
-const yargs = require('yargs/yargs');
 const { hideBin } = require('yargs/helpers');
-const execa = require('execa');
+const yargs = require('yargs/yargs');
 const rimraf = promisify(require('rimraf'));
 
 /**
@@ -17,7 +16,6 @@ class UsageError extends Error {}
 
 /**
  *  Build a single demo.
- *
  * @param {string} demoName - The name of the demo.
  */
 async function buildDemo(demoName) {
@@ -57,7 +55,6 @@ async function buildDemo(demoName) {
 
 /**
  * Build the main page of the demo.
- *
  * @param {object} [options] - Build options.
  * @param {boolean} [options.clear] - Whether to clear the directory of contents first before building.
  */

demo/src/beta/beta.js

@@ -1,6 +1,7 @@
 const copy = require('copy-to-clipboard');
-const createViewer = require('../../..');
-const { svgElementToSvgImageContent } = require('../../../util');
+
+const createViewer = require('../../../src');
+const { svgElementToSvgImageContent } = require('../../../src/util');
 const meshJson = require('./beta-fox.json');
 
 document.addEventListener('keypress', function (event) {

demo/src/distort/distort.js

@@ -1,12 +1,12 @@
+const foxJson = require('../../../src/fox.json');
 const {
   calculateSizingOptions,
   createLogoViewer,
   loadModelFromJson,
   createModelRenderer,
   createNode,
   setAttribute,
-} = require('../../../util');
-const foxJson = require('../../../fox.json');
+} = require('../../../src/util');
 
 createDistortedLogo({
   width: 0.4,
@@ -16,6 +16,10 @@ createDistortedLogo({
   lazyRender: false,
 });
 
+/**
+ *
+ * @param options
+ */
 function createDistortedLogo(options) {
   const cameraDistance = options.cameraDistance || 400;
   const { height, width } = calculateSizingOptions(options);
@@ -61,6 +65,11 @@ function createDistortedLogo(options) {
 }
 
 // glitch up and down
+/**
+ *
+ * @param positions
+ * @param origPositions
+ */
 function distortGlitch(positions, origPositions) {
   const pointCount = positions.length / 3;
   for (let polygonIndex = 0; polygonIndex < pointCount; polygonIndex++) {
@@ -75,6 +84,11 @@ function distortGlitch(positions, origPositions) {
 }
 
 // bug: grow head slowly?
+/**
+ *
+ * @param positions
+ * @param origPositions
+ */
 function distortGrow(positions, origPositions) {
   const progress = getSinIntensity();
   const pointCount = positions.length / 3;
@@ -103,6 +117,11 @@ function distortGrow(positions, origPositions) {
 }
 
 // bug: grow head slowly?
+/**
+ *
+ * @param positions
+ * @param origPositions
+ */
 function distortFold(positions, origPositions) {
   const progress = getSinIntensity(5000);
   const pointCount = positions.length / 3;
@@ -133,6 +152,10 @@ function distortFold(positions, origPositions) {
 }
 
 // sin between 0-1
+/**
+ *
+ * @param speed
+ */
 function getSinIntensity(speed = 1000) {
   return (Math.sin(Date.now() / speed) + 1) / 2;
 }

demo/src/fade/fade.js

@@ -1,6 +1,7 @@
 const copy = require('copy-to-clipboard');
-const createViewer = require('../../..');
-const { svgElementToSvgImageContent } = require('../../../util');
+
+const createViewer = require('../../../src');
+const { svgElementToSvgImageContent } = require('../../../src/util');
 const meshJson = require('./fade-fox.json');
 
 document.addEventListener('keypress', function (event) {

demo/src/flask/flask.js

@@ -1,6 +1,7 @@
 const copy = require('copy-to-clipboard');
-const createViewer = require('../../..');
-const { svgElementToSvgImageContent } = require('../../../util');
+
+const createViewer = require('../../../src');
+const { svgElementToSvgImageContent } = require('../../../src/util');
 const meshJson = require('./flask-fox.json');
 
 document.addEventListener('keypress', function (event) {

demo/src/gradient/gradient.js

@@ -1,6 +1,7 @@
 const copy = require('copy-to-clipboard');
-const createViewer = require('../../..');
-const { svgElementToSvgImageContent } = require('../../../util');
+
+const createViewer = require('../../../src');
+const { svgElementToSvgImageContent } = require('../../../src/util');
 const meshJson = require('./gradient-fox.json');
 
 document.addEventListener('keypress', function (event) {

demo/src/mmi/mmi.js

@@ -1,6 +1,7 @@
 const copy = require('copy-to-clipboard');
-const createViewer = require('../../..');
-const { svgElementToSvgImageContent } = require('../../../util');
+
+const createViewer = require('../../../src');
+const { svgElementToSvgImageContent } = require('../../../src/util');
 const meshJson = require('./mmi-fox.json');
 
 document.addEventListener('keypress', function (event) {

demo/src/normal/normal.js

@@ -1,6 +1,7 @@
 const copy = require('copy-to-clipboard');
-const createViewer = require('../../..');
-const { svgElementToSvgImageContent } = require('../../../util');
+
+const createViewer = require('../../../src');
+const { svgElementToSvgImageContent } = require('../../../src/util');
 
 document.addEventListener('keypress', function (event) {
   if (event.keyCode === 99) {

demo/src/recolor/recolor.js

@@ -1,4 +1,6 @@
 const MersenneTwister = require('mersenne-twister');
+
+const foxJson = require('../../../src/fox.json');
 const {
   calculateSizingOptions,
   createLogoViewer,
@@ -7,8 +9,7 @@ const {
   createNode,
   setAttribute,
   svgElementToSvgImageContent,
-} = require('../../../util');
-const foxJson = require('../../../fox.json');
+} = require('../../../src/util');
 
 let colorSeed = pickColorSeed();
 const colors = [
@@ -26,6 +27,10 @@ const colors = [
 
 let cycling = false;
 let cycleInterval;
+/**
+ *
+ * @param modelObj
+ */
 function toggleCycle(modelObj) {
   if (cycling && cycleInterval) {
     console.dir(cycleInterval);
@@ -44,6 +49,9 @@ document.addEventListener('keypress', (event) => {
   }
 });
 
+/**
+ *
+ */
 function saveImage() {
   const svg = document.querySelector('svg');
   const content = svgElementToSvgImageContent(svg);
@@ -60,6 +68,10 @@ const viewer = createRecolorLogo({
 const foxDiv = document.querySelector('body div.fox');
 foxDiv.appendChild(viewer.container);
 
+/**
+ *
+ * @param options
+ */
 function createRecolorLogo(options) {
   const cameraDistance = options.cameraDistance || 400;
   const { height, width } = calculateSizingOptions(options);
@@ -90,6 +102,10 @@ function createRecolorLogo(options) {
   );
 }
 
+/**
+ *
+ * @param modelObj
+ */
 function recolor(modelObj) {
   colorSeed = pickColorSeed();
   const twister = new MersenneTwister(colorSeed);
@@ -105,11 +121,20 @@ function recolor(modelObj) {
   viewer.renderCurrentScene();
 }
 
+/**
+ *
+ */
 function pickColorSeed() {
   return Math.floor(Math.random() * 10000000);
 }
 
 // Function to download data to a file
+/**
+ *
+ * @param data
+ * @param filename
+ * @param type
+ */
 function download(data, filename, type) {
   const file = new Blob([data], { type });
   // IE10+