feat: new vite-friendly `/utils` exports #595

kanadgupta · 2025-11-12T08:31:33Z

🧰 Changes

was seeing this error when attempting to load a vite server module in our main repo:

file:///Users/kanadg/Code/readmeio/readme/packages/react/dist/hub/server/node.mjs:46
import { uppercase } from "@readme/syntax-highlighter";
         ^^^^^^^^^
SyntaxError: Named export 'uppercase' not found. The requested module '@readme/syntax-highlighter' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from '@readme/syntax-highlighter';
const { uppercase } = pkg;
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:226:21)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async ModuleJob.run (node:internal/modules/esm/module_job:335:5)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:665:26)
    at async makeHubProps (/Users/kanadg/Code/readmeio/readme/packages/react-interop/middleware/hub/index.ts:184:16)
    at async /Users/kanadg/Code/readmeio/readme/packages/react-interop/middleware/hub/index.ts:295:27
    at async /Users/kanadg/Code/readmeio/readme/packages/hub/controllers/git/doc.ts:199:17

this is happening because vite is a bit stricter about how it resolves modules compared to webpack. this library has a mix of default/non-default exports and ill-defined exports that are throwing off vite's module resolver.

in order to address this, i've added a new utils export (i.e., import { uppercase } from '@readme/syntax-highlighter/utils') that exposes fully-typed versions of these util functions. all of these util functions are vanilla JS and zero deps so if we switch to those imports, i bet we'll see better treeshaking.

in addition to the above, i went through and did some routine cleanup in this repo since i've barely touched it prior to now:

introduces basic typescript config and converts a few files¹ to TS. the utils that we're now exposing are fully typed for usage downstream 💖
adds ts-loader so webpack can properly handle typescript (my god i hate webpack)
moves to vitest for test runner (since, unsurprisingly, jest completely crapped out once i started this refactor)
updates the minimum node.js version to node 22²
introduces knip into the mix and cleared out a bunch of deps as a result

🧬 QA & Testing

again, there should be no functional changes, just introducing a bit more API surface area so bundlers like vite can play nicely with this library.

not sure how to test this other than ensuring that tests pass? would love some pointers on how to QA this! to be safe, i'd recommend we release this as a beta and test it out in our main repo before publishing it to the main latest channel.

there are a handful of files that i didn't get around to converting to TS and i think it's fine for now. ↩
even though i think the main changes should be backwards compatible, i bet it'll break certain bundler setups so i think we should do a major version bump. hence i bumped the minimum node.js requirements here. in bumping our minimum node version, i was also able to remove the glob dependency and use native fs.globSync 😌 ↩

- 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

this gets the legacy bundles working (i think)

This reverts commit 3226d1a.

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

kanadgupta · 2025-11-12T18:04:54Z

src/utils/index.ts

this is a barrel file that exposes the util functions so they can be accessed via the new @readme/syntax-highlighter/utils export

kanadgupta · 2025-11-12T18:28:56Z

webpack.config.js

  optimization: {
-    minimize: true,
-    minimizer: [new TerserPlugin()],
+    minimize: false,


i don't think we should be optimizing in this repo for a few reasons:

in my local testing, our legacy webpack build in our main repo can't handle these changes (which are so small so i can't really fathom why)

harder to troubleshoot (i generally am opposed to minification for npm libraries for this reason)

this package is being fed into bundlers in our downstream repos and i'd rather let those take care of the minification

kanadgupta · 2025-11-12T18:46:03Z

webpack.config.js

+      {
+        test: /\.tsx?$/,
+        use: {
+          loader: 'ts-loader',


ts-loader? i dont ts-knower

__tests__/codeEditor.test.tsx

package.json

.eslintrc

src/codeEditor/index.jsx

src/codeEditor/index.tsx

erunion · 2025-11-12T19:29:53Z

webpack.config.js

+      {
+        test: /\.tsx?$/,
+        use: {
+          loader: 'ts-loader',


ts-loader? i dont ts-knower

bnikom · 2025-11-12T19:54:08Z

src/index.js

-import canonical from './utils/canonical';
-import { modes } from './utils/modes';
-import uppercase from './utils/uppercase';
+import canonical from './utils/canonical.ts';


maybe you answered this somewhere, but why did you have to add the .ts to these imports?

good q! i added these because eslint was yelling at me 🤷🏽 pretty sure webpack can handle these whether or not they have file extensions

bnikom · 2025-11-12T19:57:09Z

i belieb u

kanadgupta added 25 commits November 12, 2025 00:22

first pass

2493a22

- 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

a599961

refactor: slightly cleaner test cleanup

614dcf0

chore: fix up export path

5244ba3

chore: tsconfig tweak

1acc8e5

chore: convert yet another file to TS

6d30b08

chore: test script tweak

a27c9f9

Update vitest.setup.ts

609e0d7

ci: rework build process a bit

347993c

chore: try tweaking exports object

bc8b134

Update .eslintignore

4628ebf

chore: remove redundant rimraf

6671600

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

d5e7821

fix: don't optimize deps, transpile only

8242e38

this gets the legacy bundles working (i think)

fix: don't --write during test step

5063845

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

5b5c035

chore: shift around for better diff

b02d0bc

chore: run it back

3226d1a

Revert "chore: run it back"

8976403

This reverts commit 3226d1a.

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

e2f7789

chore: deps cleanup

6c9c737

- 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

4dfcd0f

chore: remove identity-obj-proxy

69a9d3c

chore: remove defaultProps to address warning

465341a

chore: install knip, rip out a few things

48be9e4

kanadgupta changed the title ~~feat: vite-friendly overhaul~~ feat: new vite-friendly /utils exports Nov 12, 2025

kanadgupta added enhancement New feature or request dependencies Pull requests that update a dependency file refactor Issues about tackling technical debt labels Nov 12, 2025

kanadgupta commented Nov 12, 2025

View reviewed changes

kanadgupta marked this pull request as ready for review November 12, 2025 19:18

kanadgupta requested a review from erunion as a code owner November 12, 2025 19:18

kanadgupta requested review from a team, kellyjosephprice, llimllib and rafegoldberg November 12, 2025 19:20

erunion approved these changes Nov 12, 2025

View reviewed changes

kanadgupta added 2 commits November 12, 2025 11:39

chore: format command

83593b2

chore: suppress vitest lint warnings

705b5db

bnikom reviewed Nov 12, 2025

View reviewed changes

bnikom approved these changes Nov 12, 2025

View reviewed changes

kanadgupta merged commit 2693b56 into main Nov 12, 2025
5 checks passed

kanadgupta deleted the kanad-2025-11-11/overhaul branch November 12, 2025 20:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: new vite-friendly `/utils` exports #595

feat: new vite-friendly `/utils` exports #595

Uh oh!

kanadgupta commented Nov 12, 2025 •

edited

Loading

Uh oh!

kanadgupta Nov 12, 2025

Uh oh!

kanadgupta Nov 12, 2025

Uh oh!

kanadgupta Nov 12, 2025

Uh oh!

erunion Nov 12, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

erunion Nov 12, 2025

Uh oh!

bnikom Nov 12, 2025

Uh oh!

kanadgupta Nov 12, 2025

Uh oh!

bnikom commented Nov 12, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat: new vite-friendly /utils exports #595

feat: new vite-friendly /utils exports #595

Uh oh!

Conversation

kanadgupta commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🧰 Changes

🧬 QA & Testing

Footnotes

Uh oh!

kanadgupta Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

kanadgupta Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

kanadgupta Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

erunion Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

erunion Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

bnikom Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

kanadgupta Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

bnikom commented Nov 12, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat: new vite-friendly `/utils` exports #595

feat: new vite-friendly `/utils` exports #595

kanadgupta commented Nov 12, 2025 •

edited

Loading