MVP: Support Sandpack snippets in TypeScript #5426

eps1lon · 2022-12-30T14:13:02Z

Preview:

The selected "target language" (JS or TS) is selected globally and defaults to TS. It's not persisted at the moment but should be (cookie or localStorage?).

If no TS version is available, we disable the toggle and display the toggle as if JS is selected:

Right now we require duplicating codeblocks in TS and JS (Approach A). This was mainly motivated by having CoreMirror decorations that may not be easy to convert from TS decorations to JS decorations. Though it's unclear yet whether we use them and how we would use them for multiple target languages.

~~Alternatively (approach B), we would either have the codeblocks in TypeScript (and transpile them to JS automatically) or just JavaScript (i.e. not have a TS version (yet)).~~

Right now we transpile+format the TS version when parsing MDX to produce the JS version. This is nice from a snippet author perspective (just need to write TS) but results in inconsistent formatting (e.g. bracket spacing). Either we accept that, or revisit #5192.

IIRC @gaearon was against formatting the snippets which makes both approaches a bit more tricky since
A. We can't easily determine if TS and JS are out-of-sync (by checking the transpiled+formatted TS version against the JS version).
B. Just having a TS version would go against formatting since now the JS version is auto-formatted.

TODO (this PR):

don't allow switching target language if only JS is available
how to keep in sync (depends on implementation approach A or B). Answer: Only allow either JS version or TS version. Produce JS from TS (via Babel+Prettier).
throw or warn when compiling TS version fails? Throwing since it prevents a deploy and should therefore be caught before merge in most scenarios: https://vercel.com/fbopensource/beta-reactjs-org/CX5xir7i1toJubsXn29zFYWEEWfj
Test: TypeScript does not allow file extension in import and would not transpile it. Does this break codesandbox compat?
Question: TypeScript does not allow file extension in import and would not transpile it. Is future ESM compat an issue?
Missing "Download" action
Type checking

TODO (not necessarily this PR):

persistence
track progress (to drive community effort (should start before or after release?))

vercel · 2022-12-30T14:13:06Z

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

Name	Status	Preview	Updated
beta-reactjs-org	🔄 Building (Inspect)		Jan 1, 2023 at 9:40AM (UTC)
reactjs-org	🔄 Building (Inspect)		Jan 1, 2023 at 9:40AM (UTC)

eps1lon · 2022-12-30T14:13:56Z

beta/src/components/MDX/Sandpack/NavigationBar.tsx

+      aria-pressed={isCurrent ? true : undefined}
+      className={classNames(
+        'text-sm text-primary dark:text-primary-dark inline-flex mx-1 border-black',
+        isCurrent && 'border-b-4'


Tried aria-pressed:border-b-4 but this didn't work. Either I misunderstood that API or it would require a Tailwind bump which seems excessive.

Yea this is available with 3.2.0 https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.2.0 may be we can bump the package? its a minor bump only?

eps1lon · 2022-12-30T14:14:24Z

beta/src/components/MDX/Sandpack/SandpackRoot.tsx


  files['/styles.css'] = {
    code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'),
-    hidden: !files['/styles.css']?.visible,
+    hidden: true,


Will extract this change which was revealed by less any typing.

eps1lon · 2022-12-30T14:15:35Z

beta/src/components/MDX/Sandpack/createFileMap.ts

+    // Assuming that if one file is available as TS, every file is.
+    // Assuming a JS version is available all the time.
+    if (snippetTargetLanguage === 'ts' && isJSFile(filePath) && hasTSVersion) {
+      delete fileMap[filePath];


Deleting instead of hidden: true since hidden files would still be part of the created CodeSandbox.

github-actions · 2022-12-30T14:15:59Z

Size Changes

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`89.16 KB` (🟡 +21 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Three Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
`/404`	`43.99 KB` (🟡 +360 B)	133.15 KB
`/500`	`43.97 KB` (🟡 +360 B)	133.13 KB
`/[[...markdownPath]]`	`44.06 KB` (🟡 +360 B)	133.21 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

harish-sethuraman · 2022-12-30T15:14:42Z

#4720 @eps1lon Are you implementing something similar to this?

eps1lon · 2022-12-30T18:00:26Z

#4720 @eps1lon Are you implementing something similar to this?

I don't think so. My PR just about having the Sandpack snippets in TypeScript. From the PR description in #4720, it doesn't sound like we have any overlap.

Though #4720 will eventually benefit from this PR since the snippets will have more accurate completions for snippets written in TypeScript.

gaearon · 2022-12-31T04:00:22Z

It would be interesting to explore a version that compiles from just TS source. For line or character highlights we can use inline syntax like special comments so that they are automatically translated. I guess auto-formatting is the way to go in that case.

eps1lon · 2022-12-31T05:10:02Z

For line or character highlights we can use inline syntax like special comments so that they are automatically translated.

Do you have an example where we currently use line or character highlights? Just so I can test different implementations.

eps1lon · 2022-12-31T15:27:42Z

@gaearon Now compiles from just the TS version. Produces inconsistent formatting though:

Right now we transpile+format the TS version when parsing MDX to produce the JS version. This is nice from a snippet author perspective (just need to write TS) but results in inconsistent formatting (e.g. bracket spacing). Either we accept that, or revisit #5192.

eps1lon · 2022-12-31T15:28:29Z

beta/plugins/markdownToHtml.js

@@ -24,6 +26,7 @@ async function markdownToHtml(markdown) {
    .use(images)
    .use(unrwapImages)
    .use(smartyPants)
+    .use(sandpackTargetLanguages)


I don't understand why the plugins are listed in remarkPlugins and composed via .use. Just .use didn't produce any change.

eps1lon · 2022-12-31T15:29:04Z

beta/src/pages/[[...markdownPath]].js

@@ -55,7 +55,7 @@ function reviveNodeOnClient(key, val) {

 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // ~~~~ IMPORTANT: BUMP THIS IF YOU CHANGE ANY CODE BELOW ~~~
-const DISK_CACHE_BREAKER = 7;
+const DISK_CACHE_BREAKER = 8;


Bumped this for safe measure since I wasn't sure if "ANY CODE BELOW" also includes changes to imported code.

beta/src/content/learn/keeping-components-pure.md

Hidden files would be part of the CodeSandbox ("Open in CodeSandbox" action.

- would crash if both TS and JS version are manually authored - Should we throw if we failed to compile TS? Now we just warn and display the TS version

Makes computing JS filename from TS filename complicated

…ompile" This reverts the malformed TS introduced in commit c1e6807.

Resolve the TODO since throwing seems preferrable

gaearon · 2023-01-24T13:01:23Z

Are there any other sites that do this with good UX? I find it a bit confusing that toggling resets the edits although I get why. It's also confusing I don't see actual type errors if I make a mistake though I assume that's fixable. I do agree that we should probably just enable formatting everywhere and use a consistent Prettier setting.

eps1lon · 2023-01-24T13:47:26Z

Are there any other sites that do this with good UX? I find it a bit confusing that toggling resets the edits although I get why.

Yeah I haven't thought about it. I think it's mostly an issue if you accidentally change the language. I think this is going to be quite the effort to save edits so that you can restore them when you change back the language.

It's also confusing I don't see actual type errors if I make a mistake though I assume that's fixable.

Hopefully just a setting for the Sandbox I need to enable. Will do in this PR. Do we lint the snippets?

Are there any other sites that do this with good UX?

MUI has it but I did this as well so not so sure about the "good UX" part 😁 Doesn't have editable when I last checked. Ant design has a switch as well but also not editable.

gaearon · 2023-01-24T14:04:36Z

Do we lint the snippets?

Yeah, we load ESLint with code splitting.

I think this is going to be quite the effort to save edits so that you can restore them when you change back the language.

Yeah I don't think we should save them, but I do think the way it works is a bit confusing. It's not clear if it "translates" from TS to JS or if it resets. I know it resets but I initially thought it would translate what I wrote lol.

eps1lon · 2023-01-24T14:25:31Z

I know it resets but I initially thought it would translate what I wrote lol.

I think magically "upcasting" the JS+edits to TS+edits is out-of-scope (everybody switching to TS needs that 😉 ). For pristine snippets we don't have to do anything though.

When there are edits, we should probably ask if the user wants to keep the edits (potentially causing type-errors) or start fresh with the TypeScript code from the snippet. Not sure if that's easily doable (I remember something about prompts from iframes being deprecated?).

Though what do we do when the user resets a snippet that started as JS, had edits and then switched to TypeScripts? Reset to JS or reset to TS?

gaearon · 2023-02-14T14:18:45Z

I think we'd need a bit of designer help on this. We're busy with the landing but remind me to ask for help after.

facebook-github-bot added CLA Signed React Core Team labels Dec 30, 2022

github-actions bot added the beta label Dec 30, 2022

vercel bot deployed to Preview – beta-reactjs-org December 30, 2022 14:13 View deployment

eps1lon commented Dec 30, 2022

View reviewed changes

vercel bot deployed to Preview – reactjs-org December 30, 2022 14:16 View deployment

eps1lon requested a review from gaearon December 30, 2022 14:27

vercel bot deployed to Preview – beta-reactjs-org December 31, 2022 15:21 View deployment

vercel bot deployed to Preview – reactjs-org December 31, 2022 15:22 View deployment

eps1lon commented Dec 31, 2022

View reviewed changes

beta/src/content/learn/keeping-components-pure.md Outdated Show resolved Hide resolved

vercel bot deployed to Preview – beta-reactjs-org December 31, 2022 15:30 View deployment

vercel bot deployed to Preview – reactjs-org December 31, 2022 15:31 View deployment

Improve type-safety when using createFileMap

03ba759

eps1lon mentioned this pull request Dec 31, 2022

Improve type-safety when using createFileMap #5428

Open

eps1lon added 5 commits December 31, 2022 16:44

Update beta/src/components/MDX/Sandpack/SandpackRoot.tsx

f0d6705

MVP: Support snippets in TypeScript

13880e9

Switch snippet target language globally

a70e3f1

Only hide JS if TS is available

fe5a17e

Demo with multi-file snippets

4b36d9e

Remove files instead of hide them

1493104

Hidden files would be part of the CodeSandbox ("Open in CodeSandbox" action.

eps1lon force-pushed the typescript-demos branch from a71f59f to 219decf Compare January 1, 2023 09:21

vercel bot deployed to Preview – beta-reactjs-org January 1, 2023 09:23 View deployment

vercel bot deployed to Preview – reactjs-org January 1, 2023 09:24 View deployment

eps1lon added 6 commits January 1, 2023 10:24

Compile JS version from TS

f08d6e1

- would crash if both TS and JS version are manually authored - Should we throw if we failed to compile TS? Now we just warn and display the TS version

Update beta/src/content/learn/keeping-components-pure.md

5822741

Drop support for mjs and mts

c53a4fc

Makes computing JS filename from TS filename complicated

Don't allow switching target language if only JS is available

4c417a9

Ensure import graph actually uses TS

7338361

REVERT BEFORE MERGE: Test what happens in prod if unable to compile

c1e6807

eps1lon force-pushed the typescript-demos branch from 219decf to c1e6807 Compare January 1, 2023 09:30

vercel bot had a problem deploying to Preview – beta-reactjs-org January 1, 2023 09:31 Failure

vercel bot deployed to Preview – reactjs-org January 1, 2023 09:33 View deployment

eps1lon added 2 commits January 1, 2023 10:33

Revert "REVERT BEFORE MERGE: Test what happens in prod if unable to c…

80d45e9

…ompile" This reverts the malformed TS introduced in commit c1e6807.

Improve error reporting when failing to compile

318bdb9

Resolve the TODO since throwing seems preferrable

vercel bot had a problem deploying to Preview – beta-reactjs-org January 1, 2023 09:35 Failure

vercel bot deployed to Preview – reactjs-org January 1, 2023 09:36 View deployment

Ensure newly required Babel presets are installed

32b5a2a

vercel bot deployed to Preview – beta-reactjs-org January 1, 2023 09:42 View deployment

vercel bot deployed to Preview – reactjs-org January 1, 2023 09:42 View deployment

eps1lon linked an issue Feb 16, 2023 that may be closed by this pull request

[Question - Beta docs] Is there TypeScript version of examples? #5593

Open

MVP: Support Sandpack snippets in TypeScript #5426

Are you sure you want to change the base?

MVP: Support Sandpack snippets in TypeScript #5426

Uh oh!

Conversation

eps1lon commented Dec 30, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Dec 30, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eps1lon Dec 30, 2022

Choose a reason for hiding this comment

Uh oh!

harish-sethuraman Jan 1, 2023

Choose a reason for hiding this comment

Uh oh!

eps1lon Dec 30, 2022

Choose a reason for hiding this comment

Uh oh!

eps1lon Jan 1, 2023

Choose a reason for hiding this comment

Uh oh!

eps1lon Dec 30, 2022

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 30, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size Changes

📦 Next.js Bundle Analysis

⚠️ Global Bundle Size Increased

Three Pages Changed Size

Uh oh!

harish-sethuraman commented Dec 30, 2022

Uh oh!

eps1lon commented Dec 30, 2022

Uh oh!

gaearon commented Dec 31, 2022

Uh oh!

eps1lon commented Dec 31, 2022

Uh oh!

eps1lon commented Dec 31, 2022

Uh oh!

eps1lon Dec 31, 2022

Choose a reason for hiding this comment

Uh oh!

eps1lon Dec 31, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gaearon commented Jan 24, 2023

Uh oh!

eps1lon commented Jan 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gaearon commented Jan 24, 2023

Uh oh!

eps1lon commented Jan 24, 2023

Uh oh!

gaearon commented Feb 14, 2023

Uh oh!

Uh oh!

eps1lon commented Dec 30, 2022 •

edited

Loading

vercel bot commented Dec 30, 2022 •

edited

Loading

github-actions bot commented Dec 30, 2022 •

edited

Loading

eps1lon commented Jan 24, 2023 •

edited

Loading