Run lint on website source (#7714)

.eslintignore

@@ -1,11 +1,14 @@
 dist/
 dist-es6/
 test/
+website/build/
 modules/*/typed
 node_modules/
 workers/
 dist.js
 *.min.js
 mapbox-gl.js
+.cache
+.docusaurus
 
 test/apps/

.eslintrc.js

@@ -29,7 +29,8 @@ module.exports = getESLintConfig({
       'default-case': ['warn'],
       'no-eq-null': ['warn'],
       eqeqeq: ['warn'],
-      radix: 0
+      radix: 0,
+      'react/sort-comp': 0
       // 'accessor-pairs': ['error', {getWithoutSet: false, setWithoutGet: false}]
     },
 
@@ -87,15 +88,18 @@ module.exports = getESLintConfig({
         ],
         rules: {
           'import/no-unresolved': 0,
-          'import/no-extraneous-dependencies': 0
+          'import/no-extraneous-dependencies': 0,
+          'no-process-env': 0
+        }
+      },
+      {
+        files: ['examples/**/*.*', 'website/src/**/*.*'],
+        rules: {
+          // We want lint to pass without having to install the dependencies for examples or website
+          'import/no-unresolved': 0,
+          'import/named': 0
         }
       }
-      // {
-      //   files: ['examples/**/*.js'],
-      //   rules: {
-      //     'import/no-unresolved': 0
-      //   }
-      // }
     ],
 
     settings: {

.ocularrc.js

@@ -21,7 +21,7 @@ const useLocalLuma = false;
 
 const config = {
   lint: {
-    paths: ['modules', 'test'] // , 'examples',
+    paths: ['modules', 'test', 'website'] // , 'examples',
   },
 
   bundle: {

.prettierignore

@@ -1,4 +1,4 @@
-workers/
+website/build
 **/dist*/**/*
 dist.js
 modules/*/typed
@@ -7,4 +7,7 @@ modules/*/typed
 **/mapbox-gl.js
 *.md
 
+.cache
+.docusaurus
+
 modules/core/src/controllers/controller.ts

docs/api-reference/geo-layers/wms-layer.md

@@ -142,7 +142,7 @@ Specifies names of layers that should be visualized from the image service.
 
 > Note that WMS services will typically not display anything unless at least one valid layer name is provided.
 
-##### `srs` (string, optional)
+##### `srs` (string, optional) {#srs}
 
 - Default: `'auto'`
 
@@ -153,7 +153,7 @@ If `'auto'`, the layer will request `EPSG:3857` in `MapView`, and `EPSG:4326` ot
 
 ### Callbacks
 
-##### `onMetadataLoad` (Function, optional) {#onmetadataloadcomplete}
+##### `onMetadataLoad` (Function, optional) {#onmetadataload}
 
 `onMetadataLoad` called when the metadata of the image source successfully loads.
 
@@ -185,7 +185,7 @@ Receives arguments:
 
 - `requestId` (`number`) - Allows tracking of specific requests
 
-##### `onImageLoad` (Function, optional) {#onimageloadcomplete}
+##### `onImageLoad` (Function, optional) {#onimageload}
 
 `onImageLoad` called when an image successfully loads.
 

website/scripts/write-heading-ids.ts → scripts/write-heading-ids.ts

@@ -26,7 +26,7 @@
 const fs = require('fs/promises');
 const path = require('path');
 
-const docsDir: string = path.resolve(__dirname, '../../docs');
+const docsDir: string = path.resolve(__dirname, '../docs');
 /** Should match if the line is a header */
 const headerTest = /^(#+)\s+(?<headerContent>.*?)\s*(?<customId>\{#[\w\-]+\})?$/;
 /** Should match if the header describes an API */
@@ -38,30 +38,16 @@ main();
 /** Test that getCustomId handles different formats correctly */
 function test() {
   expect(
-    getCustomId(`The line width of each object, in units specified by widthUnits (default pixels). `)?.[2],
+    getCustomId(
+      `The line width of each object, in units specified by widthUnits (default pixels). `
+    )?.[2],
     undefined,
     'not header'
   );
-  expect(
-    getCustomId(`## Learning deck.gl`)?.[2],
-    undefined,
-    'does not contain code'
-  );
-  expect(
-    getCustomId(`## Changes to \`TileLayer\``)?.[2],
-    undefined,
-    'is not api'
-  );
-  expect(
-    getCustomId(`## \`pickObjects\``)?.[2],
-    '{#pickobjects}',
-    'single word api'
-  );
-  expect(
-    getCustomId(`## \`@deck.gl/extensions\``)?.[2],
-    undefined,
-    'Package name'
-  );
+  expect(getCustomId(`## Learning deck.gl`)?.[2], undefined, 'does not contain code');
+  expect(getCustomId(`## Changes to \`TileLayer\``)?.[2], undefined, 'is not api');
+  expect(getCustomId(`## \`pickObjects\``)?.[2], '{#pickobjects}', 'single word api');
+  expect(getCustomId(`## \`@deck.gl/extensions\``)?.[2], undefined, 'Package name');
   expect(
     getCustomId(`## \`strokeOpacity\` (Number)`)?.[2],
     '{#strokeopacity}',
@@ -78,7 +64,9 @@ function test() {
     'with call signature'
   );
   expect(
-    getCustomId(`##### \`getWidth\` ([Function](../../developer-guide/using-layers.md#accessors)|Number, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")`)?.[2],
+    getCustomId(
+      `##### \`getWidth\` ([Function](../../developer-guide/using-layers.md#accessors)|Number, optional) ![transition-enabled](https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square")`
+    )?.[2],
     '{#getwidth}',
     'with extra flag'
   );
@@ -120,7 +108,7 @@ async function processFile(path: string): Promise<void> {
       return customId.join(' ');
     }
     return line;
-  })
+  });
   if (changed) {
     console.log(path);
     await fs.writeFile(path, lines.join('\n'));

website/babel.config.js

@@ -10,6 +10,6 @@ module.exports = {
       }
     ],
     // Ensure consistently hashed component classNames between environments (a must for SSR)
-    "styled-components"
+    'styled-components'
   ]
 };

website/docusaurus.config.js

@@ -6,6 +6,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 const webpack = require('webpack');
 const {resolve} = require('path');
 
+/* global process */
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'deck.gl',
@@ -28,15 +29,15 @@ const config = {
           path: '../docs',
           sidebarPath: resolve('./src/docs-sidebar.js'),
           // Point to to the website directory in your repo.
-          editUrl: 'https://github.com/visgl/deck.gl/tree/master/website',
+          editUrl: 'https://github.com/visgl/deck.gl/tree/master/website'
         },
         theme: {
           customCss: [
             resolve('./src/styles.css'),
             resolve('./node_modules/maplibre-gl/dist/maplibre-gl.css')
-          ],
-        },
-      }),
+          ]
+        }
+      })
     ]
   ],
 
@@ -69,11 +70,15 @@ const config = {
             '@loaders.gl/las': resolve('node_modules/@loaders.gl/las'),
             '@loaders.gl/obj': resolve('node_modules/@loaders.gl/obj'),
             '@loaders.gl/ply': resolve('node_modules/@loaders.gl/ply'),
-            '@loaders.gl': resolve('../node_modules/@loaders.gl'),
+            '@loaders.gl': resolve('../node_modules/@loaders.gl')
           }
         },
         plugins: [
-          new webpack.EnvironmentPlugin(['MapboxAccessToken', 'GoogleMapsAPIKey', 'GoogleMapsMapId']),
+          new webpack.EnvironmentPlugin([
+            'MapboxAccessToken',
+            'GoogleMapsAPIKey',
+            'GoogleMapsMapId'
+          ]),
           // These modules break server side bundling
           new webpack.IgnorePlugin({
             resourceRegExp: /asciify-image/
@@ -101,7 +106,7 @@ const config = {
         sidebarPath: resolve('./src/examples-sidebar.js'),
         breadcrumbs: false,
         docItemComponent: resolve('./src/components/example/doc-item-component.jsx')
-      },
+      }
     ]
   ],
 
@@ -113,23 +118,23 @@ const config = {
         logo: {
           alt: 'vis.gl Logo',
           src: 'images/visgl-logo-dark.png',
-          srcDark: 'images/visgl-logo-light.png',
+          srcDark: 'images/visgl-logo-light.png'
         },
         items: [
           {
             to: '/examples',
             position: 'left',
-            label: 'Examples',
+            label: 'Examples'
           },
           {
             to: '/docs',
             position: 'left',
-            label: 'Docs',
+            label: 'Docs'
           },
           {
             to: '/showcase',
             position: 'left',
-            label: 'Showcase',
+            label: 'Showcase'
           },
           {
             to: 'https://medium.com/vis-gl',
@@ -139,9 +144,9 @@ const config = {
           {
             href: 'https://github.com/visgl/deck.gl',
             label: 'GitHub',
-            position: 'right',
-          },
-        ],
+            position: 'right'
+          }
+        ]
       },
       footer: {
         style: 'dark',
@@ -151,68 +156,68 @@ const config = {
             items: [
               {
                 label: 'API Reference',
-                to: '/docs/api-reference/core/deck',
+                to: '/docs/api-reference/core/deck'
               },
               {
                 label: 'Starter templates',
-                href: 'https://github.com/visgl/deck.gl/tree/master/examples/get-started',
+                href: 'https://github.com/visgl/deck.gl/tree/master/examples/get-started'
               },
               {
                 label: 'Playground',
-                href: '/playground',
+                href: '/playground'
               },
               {
                 label: 'Codepen demos',
-                href: 'https://codepen.io/vis-gl/',
-              },
-            ],
+                href: 'https://codepen.io/vis-gl/'
+              }
+            ]
           },
           {
             title: 'Other vis.gl Libraries',
             items: [
               {
                 label: 'luma.gl',
-                href: 'https://luma.gl',
+                href: 'https://luma.gl'
               },
               {
                 label: 'loaders.gl',
-                href: 'https://loaders.gl',
+                href: 'https://loaders.gl'
               },
               {
                 label: 'react-map-gl',
-                href: 'https://visgl.github.io/react-map-gl',
+                href: 'https://visgl.github.io/react-map-gl'
               },
               {
                 label: 'nebula.gl',
-                href: 'https://nebula.gl',
-              },
-            ],
+                href: 'https://nebula.gl'
+              }
+            ]
           },
           {
             title: 'More',
             items: [
               {
                 label: 'Slack workspace',
-                href: 'https://join.slack.com/t/deckgl/shared_invite/zt-7oeoqie8-NQqzSp5SLTFMDeNSPxi7eg',
+                href: 'https://join.slack.com/t/deckgl/shared_invite/zt-7oeoqie8-NQqzSp5SLTFMDeNSPxi7eg'
               },
               {
                 label: 'vis.gl blog on Medium',
-                href: 'https://medium.com/vis-gl',
+                href: 'https://medium.com/vis-gl'
               },
               {
                 label: 'GitHub',
-                href: 'https://github.com/visgl/deck.gl',
-              },
-            ],
-          },
+                href: 'https://github.com/visgl/deck.gl'
+              }
+            ]
+          }
         ],
-        copyright: `Copyright © ${new Date().getFullYear()} OpenJS Foundation`,
+        copyright: `Copyright © ${new Date().getFullYear()} OpenJS Foundation`
       },
       prism: {
         theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
-      },
-    }),
+        darkTheme: darkCodeTheme
+      }
+    })
 };
 
 module.exports = config;