Switch to Vite from Create React App #1152

microbit-matt-hillsdon · 2024-03-11T17:22:35Z

CRA -> Vite + Vitest + eslint
TypeScript 4->5

npm audit issues are now at 0 🎉

Notable changes:

Use a worker per language to workaround Vite/Safari 14 limitations
- I also renamed the main worker-side file to make it clearer what was what as I found it confusing to come back to.
Fixed a dev-only API tab initialisation issue found by e2e tests
Adding updated eslint config caught a missing await in storage.ts. Should only have been significant when deleting files that don't exist which we never intend to do but please review.

Tasks:

Review bundle size change
Reinstate eslint, unifying config with other micro:bit apps
Check browser support
- I also tried more intentional target browsers list for esbuild, but they're not meaningfully different from Vite's defaults (for module support) in terms of code generation.

So long as you don't look too closely...

Need to evaluate module vs classic

index.html

src/fs/migration.ts

vite.config.ts

Import the module namespace object

…3 into vite

These versions are cjs compatible

There seems to be some incompatibility, one we can return to when we're focussed on bundle size.

We got it working locally but not in the CI build

microbit-matt-hillsdon · 2024-03-12T13:54:42Z

Preview: https://review-python-editor-v3.microbit.org/vite/

The Vite way seems to be to commit defaults in .env and use .env.local for uncommitted changes. It's already committed.

microbit-grace

Mostly LGTM, left a few comments. Will leave for Rob to review

src/fs/host.ts

src/fs/migration.test.ts

src/documentation/search/search-client.ts

src/fs/host-default.test.ts

src/language-server/pyright.ts

microbit-robert · 2024-03-14T15:12:38Z

I've seen a couple of these errors on switching language that I would guess we expect:

We also get some shift in the sidebar with reference panel showing on changing language. Not a big issue, but a difference from production. Just after language change we lose spacing:

Then the spacing returns to normal:

microbit-robert · 2024-03-14T15:25:18Z

A few comments, but otherwise, the code changes look good and the app behaves as expected.

src/fs/host-default.test.ts

Co-authored-by: Robert Knight <[email protected]> Co-authored-by: Grace <[email protected]>

microbit-matt-hillsdon · 2024-03-14T15:56:11Z

I've seen a couple of these errors on switching language that I would guess we expect

I didn't expect these... will try to understand.

We also get some shift in the sidebar with reference panel showing on changing language. Not a big issue, but a difference from production.

That's very odd. We do have some media-query-dependent styling in DocumentationTopLevelItem.

…3 into vite

microbit-matt-hillsdon · 2024-03-14T16:03:14Z

We also get some shift in the sidebar with reference panel showing on changing language. Not a big issue, but a difference from production.

That's very odd. We do have some media-query-dependent styling in DocumentationTopLevelItem.

This isn't language-change specific. It happens on load too.

Otherwise we needlessly render assuming false which causes rerenders with visual change at start-up and on language change. Not Vite related, we need to rescue this if we abandon the PR.

microbit-matt-hillsdon · 2024-03-14T16:38:44Z

We also get some shift in the sidebar with reference panel showing on changing language. Not a big issue, but a difference from production.

That's very odd. We do have some media-query-dependent styling in DocumentationTopLevelItem.

This isn't language-change specific. It happens on load too.

Fixed in d4313dd. I think this was a Chakra UI upgrade issue rather than a Vite one.

microbit-matt-hillsdon · 2024-03-14T16:49:41Z

I've so far failed to reproduce the error in @microbit-robert's screenshot. I do see this though, for example when starting in Dutch and switching to English (but not the other way around).

lunr.multi.js:50 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'wordCharacters')
    at t.multiLanguage (lunr.multi.js:50:58)
    at be (search.worker.ts:285:31)
    at Be.index (search.worker.ts:358:25)
    at Be.ctx.onmessage (search.worker.ts:344:21)

Previously we pulled the language off what we indexed which could cause an issue when the search index was updated for a new language but the content had not been reloaded. Instead an index now knows its language. Additionally, ensure we wait for the languages of all content to match before indexing.

microbit-matt-hillsdon · 2024-03-14T17:24:32Z

I've so far failed to reproduce the error in @microbit-robert's screenshot. I do see this though, for example when starting in Dutch and switching to English (but not the other way around).
lunr.multi.js:50 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'wordCharacters')
    at t.multiLanguage (lunr.multi.js:50:58)
    at be (search.worker.ts:285:31)
    at Be.index (search.worker.ts:358:25)
    at Be.ctx.onmessage (search.worker.ts:344:21)

Fixed in 994c4a7. Whether you could reproduce this depended on timing but was pretty easy.

src/documentation/search/search.worker.nl.ts

microbit-robert

LGTM.

microbit-matt-hillsdon added 4 commits March 11, 2024 16:43

Works locally

e503120

So long as you don't look too closely...

Update env var prefix

9223ce6

Fix workers

6563b03

Need to evaluate module vs classic

Hack around LZMA issue

9819a64

microbit-matt-hillsdon commented Mar 11, 2024

View reviewed changes

index.html Outdated Show resolved Hide resolved

microbit-matt-hillsdon commented Mar 11, 2024

View reviewed changes

index.html Outdated Show resolved Hide resolved

microbit-matt-hillsdon commented Mar 11, 2024

View reviewed changes

src/fs/migration.ts Outdated Show resolved Hide resolved

microbit-matt-hillsdon commented Mar 11, 2024

View reviewed changes

vite.config.ts Outdated Show resolved Hide resolved

microbit-matt-hillsdon and others added 19 commits March 11, 2024 17:26

Adapt for esm

524c7c7

Fix the LZMA import

e458601

Import the module namespace object

Change .js -> .cjs

12b9f1c

Change deployment.js -> .cjs

5980c74

Upgrade TypeScript

64439be

Typecheck fixes

294ef72

Migrate jest -> vitest

2169ca7

Merge branch 'vite' of github.com:microbit-foundation/python-editor-v…

da3f538

…3 into vite

More TS fixes

a4586c5

Works?

f9245e2

Update theme package

effb332

Fix VITE_FULL_URL

622365f

Fix script

62f4dda

Update deployment scripts

c6395b3

These versions are cjs compatible

Actually fix script

49a4117

PUBLIC_URL -> BASE_URL

b703aaf

Skip source map explorer for now

f0348ea

There seems to be some incompatibility, one we can return to when we're focussed on bundle size.

Disable LZMA again

f60cecc

We got it working locally but not in the CI build

Skip tests for now

6942808

microbit-matt-hillsdon added 2 commits March 12, 2024 15:02

Remove source map explorer

59a2d56

LZMA workaround as per classroom

6d08aa6

Remove .env from ignore

a704380

The Vite way seems to be to commit defaults in .env and use .env.local for uncommitted changes. It's already committed.

microbit-matt-hillsdon marked this pull request as ready for review March 14, 2024 13:33

microbit-matt-hillsdon requested review from microbit-robert and microbit-grace March 14, 2024 13:38

microbit-grace reviewed Mar 14, 2024

View reviewed changes

src/fs/host.ts Outdated Show resolved Hide resolved

src/fs/migration.test.ts Outdated Show resolved Hide resolved

microbit-robert reviewed Mar 14, 2024

View reviewed changes

src/documentation/search/search-client.ts Outdated Show resolved Hide resolved

microbit-robert reviewed Mar 14, 2024

View reviewed changes

src/fs/host-default.test.ts Outdated Show resolved Hide resolved

microbit-robert reviewed Mar 14, 2024

View reviewed changes

src/language-server/pyright.ts Outdated Show resolved Hide resolved

microbit-matt-hillsdon commented Mar 14, 2024

View reviewed changes

src/fs/host-default.test.ts Outdated Show resolved Hide resolved

Apply suggestions from code review

2ec757a

Co-authored-by: Robert Knight <[email protected]> Co-authored-by: Grace <[email protected]>

microbit-matt-hillsdon added 2 commits March 14, 2024 15:58

Reviewed

9dc4ea0

Merge branch 'vite' of github.com:microbit-foundation/python-editor-v…

f1cc2e4

…3 into vite

Pass ssr: false to useMediaQuery

d4313dd

Otherwise we needlessly render assuming false which causes rerenders with visual change at start-up and on language change. Not Vite related, we need to rescue this if we abandon the PR.

microbit-matt-hillsdon requested a review from microbit-robert March 14, 2024 17:30

microbit-robert reviewed Mar 15, 2024

View reviewed changes

src/documentation/search/search.worker.nl.ts Outdated Show resolved Hide resolved

microbit-matt-hillsdon added 2 commits March 15, 2024 09:51

Doc updates.

94befff

Remove debug

5150443

microbit-matt-hillsdon requested review from microbit-grace and microbit-robert March 15, 2024 11:45

microbit-robert approved these changes Mar 15, 2024

View reviewed changes

microbit-matt-hillsdon merged commit 4425d16 into main Mar 15, 2024
1 check passed

microbit-matt-hillsdon deleted the vite branch March 15, 2024 11:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Switch to Vite from Create React App #1152

Switch to Vite from Create React App #1152

microbit-matt-hillsdon commented Mar 11, 2024 •

edited

Loading

microbit-matt-hillsdon commented Mar 12, 2024

microbit-grace left a comment

microbit-robert commented Mar 14, 2024

microbit-robert commented Mar 14, 2024

microbit-matt-hillsdon commented Mar 14, 2024

microbit-matt-hillsdon commented Mar 14, 2024

microbit-matt-hillsdon commented Mar 14, 2024

microbit-matt-hillsdon commented Mar 14, 2024

microbit-matt-hillsdon commented Mar 14, 2024 •

edited

Loading

microbit-robert left a comment

Switch to Vite from Create React App #1152

Switch to Vite from Create React App #1152

Conversation

microbit-matt-hillsdon commented Mar 11, 2024 • edited Loading

microbit-matt-hillsdon commented Mar 12, 2024

microbit-grace left a comment

Choose a reason for hiding this comment

microbit-robert commented Mar 14, 2024

microbit-robert commented Mar 14, 2024

microbit-matt-hillsdon commented Mar 14, 2024

microbit-matt-hillsdon commented Mar 14, 2024

microbit-matt-hillsdon commented Mar 14, 2024

microbit-matt-hillsdon commented Mar 14, 2024

microbit-matt-hillsdon commented Mar 14, 2024 • edited Loading

microbit-robert left a comment

Choose a reason for hiding this comment

microbit-matt-hillsdon commented Mar 11, 2024 •

edited

Loading

microbit-matt-hillsdon commented Mar 14, 2024 •

edited

Loading