feat: new vite-friendly /utils exports

.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__/codeEditor.test.js → __tests__/codeEditor.test.tsx

@@ -1,12 +1,30 @@
 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;
+  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 +53,7 @@
     expect(screen.getByText('console')).toHaveClass('cm-variable');
   });
 
   it.skip('should set new language via props', () => {
     const { rerender } = render(<CodeEditor code="console.log('Hello, world.');" />);
     expect(screen.getByText("console.log('Hello, world.');")).toBeVisible();
 

__tests__/codeMirror.test.js → __tests__/codeMirror.test.ts

@@ -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 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 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 @@
     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 @@
     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 @@
   });
 
   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.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 @@
     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 @@
     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,10 @@
     document.createRange = () => {
       const range = new Range();
 
-      range.getBoundingClientRect = jest.fn();
+      range.getBoundingClientRect = vi.fn();
 
-      range.getClientRects = jest.fn(() => ({
+      // @ts-expect-error this component's types are currently ill-defined
+      range.getClientRects = vi.fn(() => ({
         item: () => null,
         length: 0,
       }));
@@ -328,6 +348,7 @@
 
   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__/uppercase.test.js → __tests__/uppercase.test.ts

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