feat(codemirror): upgrade

[danilowoz]

Todo: the new syntax-highlighting parse just works inside Storybook (preview), but it doesn't when running it on another application. It seems that all the parse rules are messed up when consuming it as a package.

How to test:

1. Checkout project or https://codesandbox.io/p/github/codesandbox/sandpack/update/codemirror
2. Open Storybook to make sure it works: yarn dev:react or https://18ycun-6006.preview.csb.app/?path=/story/presets-codemirror--jsx
3. Build Sandpack and try to consume it on another project: yarn build and yarn dev:landing to test.

---

• Upgrade and deprecate CodeMirror dependencies;
• Highlight <foo> differently from <Foo>;

Closes #468
Potential fix for #666
Related to #668

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
sandpack-docs	🔄 Building (Inspect)		Jan 6, 2023 at 4:30PM (UTC)
sandpack-landing	🔄 Building (Inspect)		Jan 6, 2023 at 4:30PM (UTC)
sandpack-theme	🔄 Building (Inspect)		Jan 6, 2023 at 4:30PM (UTC)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a6f1755:

Sandbox	Source
Sandpack	Configuration

[github-actions]

Size changes

sandpack-react

Total base (gzip)	Total current (gzip)	+/-
168 kb	186 kb	⚠️ +18 kb (+10.53%)

Details

Dependency name / file	Base	Current	+/-
@codemirror/closebrackets	6 kb	File removed	⚠️
@codemirror/matchbrackets	4 kb	File removed	⚠️
@codemirror/comment	5 kb	File removed	⚠️
@codemirror/gutter	10 kb	File removed	⚠️
@codemirror/highlight	12 kb	File removed	⚠️
@codemirror/history	9 kb	File removed	⚠️
@codemirror/text	13 kb	File removed	⚠️
@codemirror/rangeset	16 kb	File removed	⚠️
@codemirror/tooltip	14 kb	File removed	⚠️
package-build-stats	487 bytes	File removed	⚠️
0	522 kb	522 kb	✅ 0 byte
main	506 kb	565 kb	⚠️ +59 kb (+11.61%)
@codesandbox/sandpack-react	87 kb	111 kb	⚠️ +24 kb (+28.01%)
@code-hike/classer	1 kb	1 kb	✅ 0 byte
@codesandbox/sandpack-client	9 kb	9 kb	✅ 0 byte
@stitches/core	16 kb	16 kb	✅ 0 byte
@codemirror/state	35 kb	65 kb	⚠️ +30 kb (+86.81%)
@codemirror/view	167 kb	210 kb	⚠️ +43 kb (+25.65%)
@codemirror/language	19 kb	46 kb	⚠️ +26 kb (+137.03%)
@codemirror/autocomplete	34 kb	45 kb	⚠️ +11 kb (+32.10%)
@codemirror/commands	24 kb	38 kb	⚠️ +14 kb (+58.40%)
@react-hook/intersection-observer	2 kb	2 kb	✅ 0 byte
@codemirror/lang-css	11 kb	10 kb	🎉 -870 bytes (-8.02%)
@codemirror/lang-javascript	6 kb	11 kb	⚠️ +4 kb (+69.60%)
@codemirror/lang-html	15 kb	17 kb	⚠️ +2 kb (+10.20%)
clean-set	229 bytes	229 bytes	✅ 0 byte
style-mod	3 kb	3 kb	✅ 0 byte
w3c-keyname	2 kb	2 kb	✅ 0 byte
@lezer/common	34 kb	36 kb	⚠️ +2 kb (+7.20%)
@lezer/highlight	New file	9 kb	⚠️
@react-hook/passive-layout-effect	191 bytes	191 bytes	✅ 0 byte
@lezer/css	9 kb	12 kb	⚠️ +2 kb (+25.74%)
@lezer/html	12 kb	19 kb	⚠️ +7 kb (+55.49%)
@lezer/javascript	54 kb	64 kb	⚠️ +10 kb (+19.06%)
@lezer/lr	31 kb	32 kb	⚠️ +1 kb (+3.56%)
lodash.isequal	18 kb	18 kb	✅ 0 byte
lz-string	9 kb	9 kb	✅ 0 byte
react-devtools-inline	823 kb	823 kb	✅ 0 byte
codesandbox-import-utils	3 kb	3 kb	✅ 0 byte
webpack	New file	487 bytes	⚠️
intersection-observer	13 kb	13 kb	✅ 0 byte
react-is	2 kb	2 kb	✅ 0 byte

sandpack-client

Total base (gzip)	Total current (gzip)	+/-
7 kb	7 kb	✅ 0 byte

Details

Dependency name / file	Base	Current	+/-
package-build-stats	487 bytes	File removed	⚠️
main	21 kb	21 kb	✅ 0 byte
@codesandbox/sandpack-client	9 kb	9 kb	✅ 0 byte
codesandbox-import-utils	3 kb	3 kb	✅ 0 byte
lodash.isequal	18 kb	18 kb	✅ 0 byte
webpack	New file	487 bytes	⚠️

[danilowoz]

Closed in favor of #678 and #679