Add lint & format, and fix corresponding errors (#40)

Author: peternandersson

.github/workflows/semgrep.yml

@@ -5,7 +5,7 @@ on:
 
 jobs:
   semgrep:
-    name: Run Semgrep 
+    name: Run Semgrep
     runs-on: ubuntu-latest
     timeout-minutes: 30
     container:

.oxfmtrc.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "arrowParens": "avoid",
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "sortPackageJson": false,
+  "sortImports": {
+    "ignoreCase": false,
+    "newlinesBetween": true,
+    "groups": [
+      ["side_effect"],
+      ["builtin"],
+      ["external"],
+      ["parent"],
+      ["sibling"],
+      ["index"]
+    ]
+  }
+}

.oxlintrc.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["eslint", "import", "oxc", "react", "typescript"]
+}

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-npmMinimalAgeGate: 7d
+npmMinimalAgeGate: 7d

README.md

@@ -32,7 +32,6 @@ To test your plugin in Sigma Plugin Dev Playground, you must:
 To test a development version of a registered plugin, you must:
 
 - Have either:
-
   - An Admin account type
   - A custom account type that supports plugin developer feature permissions
 
@@ -106,7 +105,6 @@ and a React Hooks API.
    ```
 
 7. Start developing:
-
    - Get started with Sigma’s Plugin APIs.
    - Test your plugin directly in a Sigma workbook using the Sigma Plugin Dev
      Playground.
@@ -264,14 +262,14 @@ type CustomPluginConfigOptions =
       label?: string;
     }
   | {
-    type: 'action-effect';
-    name: string;
-    label?: string;
-  }
+      type: 'action-effect';
+      name: string;
+      label?: string;
+    }
   | {
-    type: 'url-parameter';
-    name: string;
-  };
+      type: 'url-parameter';
+      name: string;
+    };
 ```
 
 </details>
@@ -814,9 +812,12 @@ console.log(urlParam?.value);
 client.config.setUrlParameter('myParamId', 'new-value');
 
 // Subscribe to changes
-const unsubscribe = client.config.subscribeToUrlParameter('myParamId', (urlParam) => {
-  console.log('URL parameter updated:', urlParam.value);
-});
+const unsubscribe = client.config.subscribeToUrlParameter(
+  'myParamId',
+  urlParam => {
+    console.log('URL parameter updated:', urlParam.value);
+  },
+);
 ```
 
 #### useInteraction()
@@ -904,33 +905,27 @@ Github.
 ### Available Plugins
 
 - **Recharts Bar Chart** - A basic bar chart built with the Recharts library.
-
   - [Source Code](https://github.com/sigmacomputing/sigma-sample-plugins/tree/main/sample-plugin-bar-chart)
   - Production URL: https://sigma-sample-bar-chart-54049.netlify.app/
 
 - **D3 Candlestick** - A candlestick visualization built with D3.
-
   - [Source Code](https://github.com/sigmacomputing/sigma-sample-plugins/tree/main/sample-plugin-bar-chart)
   - Production URL: https://sigma-sample-candlestick-chart-1664e5.netlify.app/
 
 - **Narrative Science Quill** - Demonstrates secure text entry.
-
   - [Source Code]()
   - Production URL: https://narrativescience-quill-3ee312.netlify.app/
 
 - **D3 Graph** - Demonstrates usage of multiple data sources and in-memory
   joins.
-
   - [Source Code](https://github.com/sigmacomputing/sigma-sample-plugins/tree/main/d3-graph)
   - Production URL: https://d3-graph-3a0d0f.netlify.app/
 
 - **D3 Sunburst** - A sunburst visualization built with D3.
-
   - [Source Code](https://github.com/sigmacomputing/sigma-sample-plugins/tree/main/d3-sunburst)
   - Production URL: https://d3-sunburst-b97c7c.netlify.app/
 
 - **Frappe Heatmap** - A basic Frappe visualization example.
-
   - [Source Code](https://github.com/sigmacomputing/sigma-sample-plugins/tree/main/frappe-heatmap)
   - Production URL: https://frappe-heatmap-9a4163.netlify.app/
 

jest.config.ts

@@ -1,4 +1,5 @@
 import path from 'path';
+
 import { Config } from '@jest/types';
 
 const config: Config.InitialOptions = {

package.json

@@ -30,7 +30,8 @@
   "scripts": {
     "build": "yarn tsc --build tsconfig.build.json",
     "build:watch": "yarn build --watch",
-    "format": "prettier --write 'src/**/*.{ts,tsx}' 'jest.config.ts'",
+    "format": "yarn oxfmt",
+    "lint": "yarn oxlint",
     "precommit": "lint-staged",
     "prepublish": "yarn build",
     "test": "jest --ci",
@@ -49,7 +50,9 @@
     "jest": "^27.5.1",
     "jest-watch-typeahead": "^2.1.1",
     "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1",
+    "oxfmt": "^0.38.0",
+    "oxlint": "^1.53.0",
+    "oxlint-tsgolint": "^0.16.0",
     "ts-jest": "^27.1.4",
     "typescript": "^4.8.2"
   }

src/client/initialize.ts

@@ -118,9 +118,9 @@ export function initialize<T = {}>(): PluginInstance<T> {
     },
 
     config: {
-      // @ts-ignore
+      // @ts-ignore TODO: Fix
       getKey(key) {
-        return pluginConfig?.config?.[key]!;
+        return pluginConfig?.config?.[key];
       },
       get() {
         return pluginConfig.config;
@@ -219,7 +219,7 @@ export function initialize<T = {}>(): PluginInstance<T> {
       setUrlParameter(configId: string, value: string) {
         validateConfigId(configId, 'url-parameter');
         void execPromise('wb:plugin:url-parameter:set', configId, value);
-      }
+      },
     },
     elements: {
       getElementColumns(configId) {

src/react/Provider.tsx

@@ -1,8 +1,9 @@
 import type { ReactNode } from 'react';
 
-import { PluginContext } from './Context';
 import { PluginInstance } from '../types';
 
+import { PluginContext } from './Context';
+
 export interface SigmaClientProviderProps<T = any> {
   client: PluginInstance<T>;
   children?: ReactNode;

src/react/hooks.ts

@@ -1,6 +1,5 @@
 import { useContext, useEffect, useCallback, useRef, useState } from 'react';
 
-import { PluginContext } from './Context';
 import {
   PluginInstance,
   CustomPluginConfigOptions,
@@ -13,6 +12,8 @@ import {
 } from '../types';
 import { deepEqual } from '../utils/deepEqual';
 
+import { PluginContext } from './Context';
+
 /**
  * Gets the entire plugin instance
  * @returns {PluginInstance} Context for the current plugin instance
@@ -118,7 +119,7 @@ export function usePaginatedElementData(
     if (configId) {
       client.elements.fetchMoreElementData(configId);
     }
-  }, [configId]);
+  }, [configId, client.elements]);
 
   useEffect(() => {
     if (configId) {
@@ -149,7 +150,7 @@ export function useConfig(key?: string): any {
           setConfig(newConfig);
         }
       }),
-    [client],
+    [client, key, config],
   );
 
   return config;
@@ -179,7 +180,7 @@ export function useVariable(
 
   const setVariable = useCallback(
     (...values: unknown[]) => client.config.setVariable(id, ...values),
-    [id],
+    [id, client.config],
   );
 
   return [workbookVariable, setVariable];
@@ -191,7 +192,7 @@ export function useVariable(
  * @returns {[(UrlParameter | undefined), Function]} Constantly updating value of the url parameter and setter for the url parameter
  */
 export function useUrlParameter(
-  id: string
+  id: string,
 ): [UrlParameter | undefined, (value: string) => void] {
   const client = usePlugin();
   const [urlParameter, setUrlParameter] = useState<UrlParameter>();
@@ -239,7 +240,7 @@ export function useInteraction(
     (value: WorkbookSelection[]) => {
       client.config.setInteraction(id, elementId, value);
     },
-    [id],
+    [id, elementId, client.config],
   );
 
   return [workbookInteraction, setInteraction];