feat: new vite-friendly /utils exports (#595)

* first pass

- introduces typescript config
- converts a bunch of files to typescript
- creates a new export object that exposes utils directly
- adds `ts-loader` so webpack can handle typescript
- moves to vitest for test runner

* chore: see if this import alias will get tests passing

* refactor: slightly cleaner test cleanup

* chore: fix up export path

* chore: tsconfig tweak

* chore: convert yet another file to TS

* chore: test script tweak

* Update vitest.setup.ts

* ci: rework build process a bit

* chore: try tweaking exports object

* Update .eslintignore

* chore: remove redundant rimraf

* chore: attempt to revert some TS conversions to see if that fixes things

* fix: don't optimize deps, transpile only

this gets the legacy bundles working (i think)

* fix: don't `--write` during test step

* chore: reconvert TS since that wasn't actually the problem

* chore: shift around for better diff

* chore: run it back

* Revert "chore: run it back"

This reverts commit 3226d1a.

* revert: actually we don't need that top-level describe

* chore: deps cleanup

- use native node.js glob
- remove prettier@2
- add in @csstools/css-parser-algorithms so tests can work in CI?

* chore!: bump min node version to 22

* chore: remove identity-obj-proxy

* chore: remove `defaultProps` to address warning

* chore: install knip, rip out a few things

* chore: format command

* chore: suppress vitest lint warnings

Author: kanadgupta

.eslintignore

@@ -1,5 +1,6 @@
 node_modules/
 coverage/
 dist/
+dist-utils/
 public/index*
 __tests__/__fixtures__/**/sample.*

.eslintrc

@@ -1,4 +1,10 @@
 {
   "extends": ["@readme/eslint-config", "@readme/eslint-config/react"],
-  "root": true
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "extends": ["@readme/eslint-config/typescript"],
+    },
+  ],
+  "root": true,
 }

.gitignore

@@ -1,3 +1,4 @@
 dist/
+dist-utils/
 node_modules/
 coverage/

.npmignore

@@ -3,4 +3,4 @@ __tests__/
 coverage/
 .eslint*
 .prettier*
-jest.config.js
+vitest*

__tests__/.eslintrc

@@ -1,7 +1,8 @@
 {
   "extends": [
-    "@readme/eslint-config/testing/jest",
+    "@readme/eslint-config/testing/vitest",
     "@readme/eslint-config/testing/jest-dom",
-    "@readme/eslint-config/testing/react"
-  ]
+    "@readme/eslint-config/testing/react",
+    "@readme/eslint-config/typescript",
+  ],
 }

__tests__/__snapshots__/codeMirror.test.js.snap renamed to __tests__/__snapshots__/codeMirror.test.ts.snap

@@ -1,12 +1,31 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
+import { afterEach, beforeEach, describe, expect, vi, it } from 'vitest';
 
 import CodeEditor from '../src/codeEditor';
 
 describe('<CodeEditor/>', () => {
-  const getClientRectSpy = jest.fn(() => ({ width: 100 }));
-  Range.prototype.getBoundingClientRect = getClientRectSpy;
-  Range.prototype.getClientRects = getClientRectSpy;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let originalGetBoundingClientRect: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let originalGetClientRects: any;
+  // eslint-disable-next-line @vitest/require-mock-type-parameters
+  const getClientRectSpy = vi.fn(() => ({ width: 100 }));
+
+  beforeEach(() => {
+    originalGetBoundingClientRect = Range.prototype.getBoundingClientRect;
+    originalGetClientRects = Range.prototype.getClientRects;
+    // @ts-expect-error mock types
+    Range.prototype.getBoundingClientRect = getClientRectSpy;
+    // @ts-expect-error mock types
+    Range.prototype.getClientRects = getClientRectSpy;
+  });
+
+  afterEach(() => {
+    Range.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+    Range.prototype.getClientRects = originalGetClientRects;
+    getClientRectSpy.mockRestore();
+  });
 
   it('should display a <CodeEditor> element', () => {
     render(<CodeEditor code="console.log('Hello, world.');" lang="javascript" />);
@@ -35,7 +54,7 @@ describe('<CodeEditor/>', () => {
     expect(screen.getByText('console')).toHaveClass('cm-variable');
   });
 
-  it.skip('should set new language via props', () => {
+  it.todo('should set new language via props', () => {
     const { rerender } = render(<CodeEditor code="console.log('Hello, world.');" />);
     expect(screen.getByText("console.log('Hello, world.');")).toBeVisible();
 

__tests__/codeEditor.test.js renamed to __tests__/codeEditor.test.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable testing-library/no-node-access */
 /* eslint-disable testing-library/no-container */
-import { promises as fs } from 'fs';
+import { promises as fs, globSync } from 'fs';
 import path from 'path';
 
 // eslint-disable-next-line testing-library/no-manual-cleanup
-import { render, screen, cleanup } from '@testing-library/react';
-import { globSync } from 'glob';
+import { cleanup, render, screen } from '@testing-library/react';
+import { beforeAll, beforeEach, describe, expect, it, vi, test } from 'vitest';
 
 import syntaxHighlighter, { uppercase, canonical } from '../src';
 
@@ -51,6 +51,7 @@ test('should work with modes', () => {
 });
 
 test('should keep trailing json bracket if highlightMode is enabled', () => {
+  // @ts-expect-error this component's types are currently ill-defined
   render(syntaxHighlighter('{ "a": 1 }', 'json', { highlightMode: true }));
 
   expect(screen.getByTestId('CodeMirror').outerHTML).toBe(
@@ -59,27 +60,32 @@ test('should keep trailing json bracket if highlightMode is enabled', () => {
 });
 
 test('should have a dark theme', () => {
+  // @ts-expect-error this component's types are currently ill-defined
   render(syntaxHighlighter('{ "a": 1 }', 'json', { dark: true }));
   expect(screen.getByTestId('SyntaxHighlighter')).toHaveClass('cm-s-material-palenight');
 });
 
 describe('variable substitution', () => {
   it('should tokenize variables (double quotes)', () => {
+    // @ts-expect-error this component's types are currently ill-defined
     render(syntaxHighlighter('"<<apiKey>>"', 'json', { tokenizeVariables: true }));
     expect(screen.getByText('APIKEY')).toBeVisible();
   });
 
   it('should tokenize variables (single quotes)', () => {
+    // @ts-expect-error this component's types are currently ill-defined
     render(syntaxHighlighter("'<<apiKey>>'", 'json', { tokenizeVariables: true }));
     expect(screen.getByText('APIKEY')).toBeVisible();
   });
 
   it('should keep enclosing characters around the variable', () => {
+    // @ts-expect-error this component's types are currently ill-defined
     render(syntaxHighlighter("'<<apiKey>>'", 'json', { tokenizeVariables: true }));
     expect(screen.getByTestId('SyntaxHighlighter')).toHaveTextContent("'APIKEY'");
   });
 
   it('should tokenize variables outside of quotes', () => {
+    // @ts-expect-error this component's types are currently ill-defined
     render(syntaxHighlighter('<<apiKey>>', 'json', { tokenizeVariables: true }));
     expect(screen.getByText('APIKEY')).toBeVisible();
   });
@@ -92,38 +98,45 @@ describe('variable substitution', () => {
     fetch({ foo, bar, baz: <<token>> });
   `;
 
+    // @ts-expect-error this component's types are currently ill-defined
     render(syntaxHighlighter(codeBlock, 'json', { tokenizeVariables: true }));
     expect(screen.getByTestId('SyntaxHighlighter').textContent).toMatchSnapshot();
   });
 
   it('should tokenize multiple variables per line', () => {
+    // @ts-expect-error this component's types are currently ill-defined
     render(syntaxHighlighter('<<apiKey>> <<name>>', 'json', { tokenizeVariables: true }));
     expect(screen.getByTestId('SyntaxHighlighter')).toHaveTextContent('APIKEY NAME');
   });
 
   it.each(['\\<<wat>>', '<<wat\\>>', '\\<<wat\\>>'])('should NOT tokenize escaped variables %s', code => {
+    // @ts-expect-error this component's types are currently ill-defined
     render(syntaxHighlighter(code, 'json', { tokenizeVariables: true }));
     expect(screen.getByTestId('SyntaxHighlighter')).toHaveTextContent('<<wat>>');
   });
 });
 
 describe('variable substitution { mdx: true }', () => {
   it('should tokenize variables (double quotes)', () => {
+    // @ts-expect-error this component's types are currently ill-defined
     render(syntaxHighlighter('"{user.apiKey}"', 'json', { tokenizeVariables: true }, { mdx: true }));
     expect(screen.getByText('APIKEY')).toBeVisible();
   });
 
   it('should tokenize variables (single quotes)', () => {
+    // @ts-expect-error this component's types are currently ill-defined
     render(syntaxHighlighter("'{user.apiKey}'", 'json', { tokenizeVariables: true }, { mdx: true }));
     expect(screen.getByText('APIKEY')).toBeVisible();
   });
 
   it('should keep enclosing characters around the variable', () => {
+    // @ts-expect-error this component's types are currently ill-defined
     render(syntaxHighlighter("'{user.apiKey}'", 'json', { tokenizeVariables: true }, { mdx: true }));
     expect(screen.getByTestId('SyntaxHighlighter')).toHaveTextContent("'APIKEY'");
   });
 
   it('should tokenize variables outside of quotes', () => {
+    // @ts-expect-error this component's types are currently ill-defined
     render(syntaxHighlighter('{user.apiKey}', 'json', { tokenizeVariables: true }, { mdx: true }));
     expect(screen.getByText('APIKEY')).toBeVisible();
   });
@@ -136,6 +149,7 @@ describe('variable substitution { mdx: true }', () => {
     fetch({ foo, bar, baz: {user.token} });
   `;
 
+    // @ts-expect-error this component's types are currently ill-defined
     render(syntaxHighlighter(codeBlock, 'json', { tokenizeVariables: true }, { mdx: true }));
     expect(screen.getByTestId('SyntaxHighlighter').textContent).toMatchInlineSnapshot(`
       "
@@ -148,16 +162,19 @@ describe('variable substitution { mdx: true }', () => {
   });
 
   it('should tokenize multiple variables per line', () => {
+    // @ts-expect-error this component's types are currently ill-defined
     render(syntaxHighlighter('{user.apiKey} {user.name}', 'json', { tokenizeVariables: true }, { mdx: true }));
     expect(screen.getByTestId('SyntaxHighlighter')).toHaveTextContent('APIKEY NAME');
   });
 
   it('should not tokenize bracket style', () => {
+    // @ts-expect-error this component's types are currently ill-defined
     render(syntaxHighlighter('<<wat>>', 'json', { tokenizeVariables: true }, { mdx: true }));
     expect(screen.getByTestId('SyntaxHighlighter')).toHaveTextContent('<<wat>>');
   });
 
   it.each(['\\{user.wat}', '{user.wat\\}', '\\{user.wat\\}'])('should NOT tokenize escaped variables %s', code => {
+    // @ts-expect-error this component's types are currently ill-defined
     render(syntaxHighlighter(code, 'json', { tokenizeVariables: true }, { mdx: true }));
     expect(screen.getByTestId('SyntaxHighlighter')).toHaveTextContent('{user.wat}');
   });
@@ -169,9 +186,9 @@ describe('Supported languages', () => {
   });
 
   describe.each(languages)('%s', (language, fixtureDir) => {
-    let testCase;
+    let testCase: string;
 
-    // eslint-disable-next-line global-require, import/no-dynamic-require
+    // eslint-disable-next-line global-require, import/no-dynamic-require, @typescript-eslint/no-require-imports
     const instructions = require(path.join(fixtureDir, 'index.js'));
 
     beforeEach(async () => {
@@ -253,6 +270,7 @@ describe('highlight mode', () => {
     render(
       syntaxHighlighter(code, 'curl', {
         dark: true,
+        // @ts-expect-error this component's types are currently ill-defined
         highlightMode: true,
         tokenizeVariables: true,
         ranges: [
@@ -293,6 +311,7 @@ describe('runmode', () => {
     render(
       syntaxHighlighter(code, 'c', {
         dark: true,
+        // @ts-expect-error this component's types are currently ill-defined
         highlightMode: true,
         tokenizeVariables: true,
         ranges: [
@@ -315,9 +334,12 @@ describe('code folding', () => {
     document.createRange = () => {
       const range = new Range();
 
-      range.getBoundingClientRect = jest.fn();
+      // eslint-disable-next-line @vitest/require-mock-type-parameters
+      range.getBoundingClientRect = vi.fn();
 
-      range.getClientRects = jest.fn(() => ({
+      // @ts-expect-error this component's types are currently ill-defined
+      // eslint-disable-next-line @vitest/require-mock-type-parameters
+      range.getClientRects = vi.fn(() => ({
         item: () => null,
         length: 0,
       }));
@@ -328,6 +350,7 @@ describe('code folding', () => {
 
   it('renders folders in the gutter', () => {
     const { container } = render(
+      // @ts-expect-error this component's types are currently ill-defined
       syntaxHighlighter('{ "a": { "b": { "c": 1 } }', 'json', { foldGutter: true, readOnly: true }),
     );
 

__tests__/codeMirror.test.js renamed to __tests__/codeMirror.test.ts

@@ -1,3 +1,5 @@
+import { expect, test } from 'vitest';
+
 import { uppercase } from '../src';
 
 test('should uppercase known languages', () => {