Fix errors and warnings detected by eslint.

znai-reactjs/eslint.config.mjs

@@ -9,18 +9,23 @@ import parser from '@typescript-eslint/parser';
 export default [
     // Ignore patterns
     {
-        ignores: ['dist', 'build', 'node_modules', '*.config.js'],
+        ignores: ['target', 'dist', 'build', 'node_modules', 'public/**/*.js', '*.config.js'],
     },
 
     // Base JavaScript configuration
     {
-        files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
+        files: ['**/*.{js,jsx,mjs,cjs}'],
         languageOptions: {
             parser: parser,
             ecmaVersion: 2020,
             globals: {
                 ...globals.browser,
                 ...globals.es2020,
+                populateLocalSearchIndexWithData: 'readonly',
+                documentationNavigation: 'readonly',
+                // Add other globals from znai's generated HTML
+                toc: 'readonly',
+                znaiSearchData: 'readonly'
             },
             parserOptions: {
                 ecmaVersion: 'latest',
@@ -61,13 +66,99 @@ export default [
 
             // React Refresh
             'react-refresh/only-export-components': [
-                'warn',
+                'off',
                 { allowConstantExport: true },
             ],
 
             // Custom rules
-            'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+            'no-unused-vars': ['warn', {
+                argsIgnorePattern: '^_',
+                varsIgnorePattern: '^_'
+            }],
             'no-console': ['warn', { allow: ['warn', 'error'] }],
         },
     },
+    // TypeScript files
+    {
+        files: ['**/*.{ts,tsx}'],
+        languageOptions: {
+            parser: parser,
+            parserOptions: {
+                ecmaVersion: 2020,
+                sourceType: 'module',
+                ecmaFeatures: {jsx: true},
+                project: './tsconfig.json',  // Important for type-aware rules
+            },
+            globals: {
+                ...globals.browser,
+                ...globals.es2020,
+            },
+        },
+        plugins: {
+            '@typescript-eslint': typescriptEslint,
+            react,
+            'react-hooks': reactHooks,
+            'react-refresh': reactRefresh,
+        },
+        rules: {
+        // ... your existing rules
+        '@typescript-eslint/consistent-type-imports': [
+            'error',
+            {
+                prefer: 'no-type-imports',
+                disallowTypeAnnotations: false
+            }
+        ]
+        }
+    },
+    // Special config for vitest.config.ts (and other config files)
+    {
+        files: ['vitest.config.ts', '*.config.ts'],
+        languageOptions: {
+            parser: parser,
+            parserOptions: {
+                ecmaVersion: 2020,
+                sourceType: 'module',
+                project: './tsconfig.json',  // Use node tsconfig
+            },
+            globals: {
+                ...globals.node,  // Node globals instead of browser
+            },
+        },
+        plugins: {
+            '@typescript-eslint': typescriptEslint,
+        },
+        rules: {
+            ...typescriptEslint.configs.recommended.rules,
+            'no-undef': 'off',
+            '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+        }
+    },
+    {
+        files: ['**/*.test.{js,jsx,ts,tsx}', '**/*.spec.{js,jsx,ts,tsx}'],
+        languageOptions: {
+            globals: {
+                ...globals.node,  // Vitest runs in Node
+                describe: 'readonly',
+                it: 'readonly',
+                test: 'readonly',
+                expect: 'readonly',
+                beforeEach: 'readonly',
+                afterEach: 'readonly',
+                beforeAll: 'readonly',
+                afterAll: 'readonly',
+                vi: 'readonly',  // Vitest's mock utility
+            },
+        }, rules: {
+            'no-console': 'off',
+        }
+    },
+    {
+        files: ['src/App.jsx', '**/*.demo.{js,jsx,ts,tsx}', '**/*.stories.{js,jsx,ts,tsx}'],
+        rules: {
+            'no-console': 'off',
+            'react-refresh/only-export-components': 'off',
+            'react/display-name': 'off', // Often useful for demos too
+        },
+    },
 ];

znai-reactjs/package.json

@@ -58,6 +58,7 @@
     "vite": "npm:rolldown-vite@7.1.14"
   },
   "scripts": {
+    "prebuild": "npm run lint",
     "dev": "vite",
     "build": "vite build",
     "test": "vitest --config ./vitest.config.ts",

znai-reactjs/src/App.jsx

@@ -19,7 +19,7 @@ import "./App.css";
 import "./layout/DocumentationLayout.css";
 import "./doc-elements/search/Search.css";
 
-import React, { Component, useEffect } from "react";
+import React, { useEffect } from "react";
 
 import { ComponentViewer, DropDowns, Registries } from "react-component-viewer";
 import { tabsDemo } from "./doc-elements/tabs/Tabs.demo";

znai-reactjs/src/components/Tooltip.tsx

@@ -169,7 +169,7 @@ export function TooltipRenderer() {
           left: (clientRect.left + clientRect.right) / 2.0,
         };
 
-      case "parent-content-block":
+      case "parent-content-block": {
         const parentContentBlock = findParentContentBlock();
         if (parentContentBlock) {
           const contentBlockRect = parentContentBlock.getBoundingClientRect();
@@ -183,6 +183,7 @@ export function TooltipRenderer() {
           console.error("can't find parent-content-block", parentContentBlock);
           return bottomLeft();
         }
+      }
     }
 
     function bottomLeft() {

znai-reactjs/src/diff/PageDiff.test.js

@@ -1,4 +1,5 @@
 /*
+ * Copyright 2025 znai maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -49,6 +50,6 @@ describe('Page Diff', () => {
         right.add('node6', 'of lines')
 
         const result = Diff.diffArrays(left.list, right.list, {comparator: compareListEntry})
-        console.log(JSON.stringify(result, null, 2))
+        console.warn(JSON.stringify(result, null, 2))
     })
 })

znai-reactjs/src/doc-elements/DefaultElementsLibrary.jsx

@@ -91,14 +91,15 @@ import { FootnoteReference } from "./footnote/FootnoteReference";
 import { EmbeddedHtml } from "./html/EmbeddedHtml";
 import { Asciinema } from "./asciinema/Asciinema";
 import { ReadMore } from "./read-more/ReadMore.js";
+import { withDisplayName } from "./components.ts";
 
 const library = {}
 const presentationElementHandlers = {}
 
 library.DocElement = DocElement
-library.Emphasis = (props) => (<span className="emphasis"><props.elementsLibrary.DocElement {...props}/></span>)
-library.StrongEmphasis = (props) => (<span className="strong-emphasis"><props.elementsLibrary.DocElement {...props}/></span>)
-library.StrikeThrough = (props) => (<del className="strike-through"><props.elementsLibrary.DocElement {...props}/></del>)
+library.Emphasis = withDisplayName("Emphasis")((props) => (<span className="emphasis"><props.elementsLibrary.DocElement {...props}/></span>))
+library.StrongEmphasis = withDisplayName("StrongEmphasis")((props) => (<span className="strong-emphasis"><props.elementsLibrary.DocElement {...props}/></span>))
+library.StrikeThrough = withDisplayName("StrikeThrough")((props) => (<del className="strike-through"><props.elementsLibrary.DocElement {...props}/></del>))
 library.Link = Link
 library.Anchor = Anchor
 
@@ -116,9 +117,9 @@ presentationElementHandlers.BlockQuote = presentationBlockQuoteHandler
 
 library.SimpleText = SimpleText
 library.InlinedCode = InlinedCode
-library.SoftLineBreak = () => <span> </span>
-library.HardLineBreak = () => <br />
-library.ThematicBreak = () => <hr />
+library.SoftLineBreak = withDisplayName("SoftLineBreak")(() => <span> </span>)
+library.HardLineBreak = withDisplayName("HardLineBreak")(() => <br />)
+library.ThematicBreak = withDisplayName("ThematicBreak")(() => <hr />)
 
 library.ApiLinkedTextBlock = ApiLinkedTextBlock;
 
@@ -127,7 +128,7 @@ presentationElementHandlers.Snippet = presentationSnippetHandler
 
 library.CustomReactJSComponent = CustomReactJSComponent
 
-library.EmptyBlock = () => (<div/>)
+library.EmptyBlock = withDisplayName("EmptyBlock")(() => (<div/>))
 
 library.LangClass = wrappedInContentBlock(LangClass)
 library.LangFunction = wrappedInContentBlock(LangFunction)
@@ -253,7 +254,12 @@ library.Asciinema = Asciinema
  * @param Component component to wrap
  */
 function wrappedInContentBlock(Component) {
-    return (props) => <div className="content-block"><Component {...props}/></div>
+    return withDisplayName(`ContentBlock(${Component.displayName || Component.name || 'Component'})`) (
+        (props) =>
+        <div className="content-block">
+            <Component {...props}/>
+        </div>
+    );
 }
 
 themeRegistry.registerAsBase(new Theme({

znai-reactjs/src/doc-elements/DiagramSlidesDemo.jsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, {Component} from "react"
+import React from "react"
 import GraphVizSvg from './graphviz/GraphVizSvg'
 
 const testData = {

znai-reactjs/src/doc-elements/asciinema/Asciinema.jsx

@@ -32,13 +32,13 @@ export function Asciinema({src, startAt = 0, poster = undefined, cols = undefine
     }
   }
 
-  function recreatePlayer() {
-    destroyPlayer();
-    playerRef.current = AsciinemaPlayer.create(src, containerRef.current,
-      {preload: true, fit: false, startAt, poster, cols, rows, idleTimeLimit, speed});
-  }
-
   useEffect(() => {
+    function recreatePlayer() {
+      destroyPlayer();
+      playerRef.current = AsciinemaPlayer.create(src, containerRef.current,
+        {preload: true, fit: false, startAt, poster, cols, rows, idleTimeLimit, speed});
+    }
+
     if (containerRef.current) {
         recreatePlayer();
     }
@@ -49,8 +49,7 @@ export function Asciinema({src, startAt = 0, poster = undefined, cols = undefine
         playerRef.current = null;
       }
     };
-  }, [src, startAt, poster, cols, rows, idleTimeLimit, speed, containerRef]);
-
+  }, [src, startAt, poster, cols, rows, idleTimeLimit, speed]);
 
   return <div className="content-block znai-asciinema" ref={containerRef} />;
 }

znai-reactjs/src/doc-elements/bullets/BulletList.jsx

@@ -65,7 +65,7 @@ const presentationNumberOfSlides = (props) => {
 }
 
 function valueByIdWithWarning(dict, type) {
-    if (! dict.hasOwnProperty(type)) {
+    if (! Object.hasOwn(dict, type)) {
         console.warn("can't find bullets list type: " + type)
         return NoBullets
     }
@@ -79,12 +79,12 @@ function presentationListType(props) {
 }
 
 function listType(props, key) {
-    if (! props.hasOwnProperty('meta')) {
+    if (! Object.hasOwn(props, 'meta')) {
         return null
     }
 
     const meta = props.meta
-    if (! meta.hasOwnProperty(key)) {
+    if (! Object.hasOwn(meta, key)) {
         return null
     }
 

znai-reactjs/src/doc-elements/bullets/ListItem.jsx

@@ -18,7 +18,7 @@
 import React from 'react'
 
 import { Icon } from '../icons/Icon'
-import {startsWithIcon, removeIcon, extractIconProps} from './bulletUtils'
+import {startsWithIcon, removeIcon, extractIconProps} from './bulletUtils.js'
 
 import './ListItem.css'
 

znai-reactjs/src/doc-elements/bullets/bulletUtils.test.js

@@ -21,7 +21,7 @@ import {
     removeIcon,
     extractTextLinesEmphasisOnly,
     extractTextLinesEmphasisOrFull, extractIconIds
-} from './bulletUtils'
+} from './bulletUtils.js'
 
 const itemContentWithIcon = buildItemContentWithIcon()
 const lowerCasedItemContent = buildLowerCasedItemContent()

znai-reactjs/src/doc-elements/bullets/kinds/DefaultBulletList.jsx

@@ -16,7 +16,7 @@
  */
 
 import React from 'react'
-import {startsWithIcon} from '../bulletUtils'
+import {startsWithIcon} from '../bulletUtils.js'
 
 const DefaultBulletList = (props) => {
     const {tight, content} = props

znai-reactjs/src/doc-elements/bullets/kinds/Grid.jsx

@@ -17,7 +17,7 @@
 
 import React from 'react'
 
-import {extractTextLinesEmphasisOrFull} from '../bulletUtils'
+import {extractTextLinesEmphasisOrFull} from '../bulletUtils.js'
 import {isAllAtOnce} from '../../meta/meta'
 
 import './Grid.css'

znai-reactjs/src/doc-elements/bullets/kinds/HorizontalStripes.jsx

@@ -17,7 +17,7 @@
 
 import React from 'react'
 
-import {extractIconIds, extractTextLinesEmphasisOrFull} from '../bulletUtils'
+import {extractIconIds, extractTextLinesEmphasisOrFull} from '../bulletUtils.js'
 import {isAllAtOnce} from '../../meta/meta'
 
 import {Icon} from "../../icons/Icon";

znai-reactjs/src/doc-elements/bullets/kinds/LeftRightTimeLine.jsx

@@ -18,7 +18,7 @@
 import React from 'react'
 import SvgWithCalculatedSize from './SvgWithCalculatedSize'
 
-import {extractTextLinesEmphasisOrFull, extractTextLines} from '../bulletUtils'
+import {extractTextLinesEmphasisOrFull, extractTextLines} from '../bulletUtils.js'
 import {isAllAtOnce} from '../../meta/meta'
 
 const stepSize = 15

znai-reactjs/src/doc-elements/bullets/kinds/RevealBoxes.jsx

@@ -1,4 +1,5 @@
 /*
+ * Copyright 2025 znai maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -16,7 +17,7 @@
 
 import React from 'react'
 
-import {extractTextLinesEmphasisOrFull} from '../bulletUtils'
+import {extractTextLinesEmphasisOrFull} from '../bulletUtils.js'
 import {isAllAtOnce} from '../../meta/meta'
 
 import './RevealBoxes.css'

znai-reactjs/src/doc-elements/bullets/kinds/Steps.jsx

@@ -17,7 +17,7 @@
 
 import React from 'react'
 
-import {extractTextLines, extractTextLinesEmphasisOrFull} from '../bulletUtils'
+import {extractTextLines, extractTextLinesEmphasisOrFull} from '../bulletUtils.js'
 import {splitTextIntoLinesUsingThreshold} from '../../../utils/strings'
 import {isAllAtOnce} from '../../meta/meta'
 

znai-reactjs/src/doc-elements/bullets/kinds/Venn.jsx

@@ -16,7 +16,7 @@
  */
 
 import React from 'react'
-import {extractTextLines} from '../bulletUtils'
+import {extractTextLines} from '../bulletUtils.js'
 
 import SvgWithCalculatedSize from './SvgWithCalculatedSize'
 

znai-reactjs/src/doc-elements/charts/EchartReactWrapper.tsx

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import React, {type MutableRefObject, type RefObject, useEffect, useRef } from "react";
+import React, { MutableRefObject, RefObject, useEffect, useRef } from "react";
 import {EChartsType} from "echarts/types/dist/shared";
-import { configuredEcharts, type EchartCommonProps } from "./EchartCommon";
+import { configuredEcharts, EchartCommonProps } from "./EchartCommon";
 
 import {PresentationProps} from "../presentation/PresentationProps";