Update Syntax Transforms list #2676

SConaway · 2021-07-05T23:19:21Z

In light of facebook/metro#681, I thought it fitting to update the list of syntax transforms so users know exactly what will work and what won't. Feel free to make any chages as you see fit, I wasn't sure where to put some things.

netlify · 2021-07-05T23:26:20Z

✔️ Deploy Preview for react-native ready!

🔨 Explore the source changes: d5e22cd

🔍 Inspect the deploy log: https://app.netlify.com/sites/react-native/deploys/60eff3d6e38f200007652b90

😎 Browse the preview: https://deploy-preview-2676--react-native.netlify.app

SConaway · 2021-07-06T21:37:54Z

After facebook/metro#681 is merged, then ES2021: Numeric Separators need to be added too

Simek

Hi @SConaway, thank you for updating the transformers list! One thing which needs a bit of improvement is the addition of "when not using Hermes" label. It's a bit hard to spot, so maybe we can create the special label (based on the current platform labels - example: https://reactnative.dev/docs/button) for Hermes and flip the markings? (from "when not using Hermes" to "also avaible in Hermes").

Also converting list to the table or just adding an compatibility table (with two columns "JSI" and "Hermes") might be a bit more readable for the users, I'm not sure which solution will be the best, but it will be nice to improve those markings a bit.

SConaway · 2021-07-07T19:49:11Z

Yes, I'll do that a bit later today! I'll try a three-column table, where the columns are:

Name / plugin, linked
included in JSI? (just a ✅ )
included in Hermes? (✅)

SConaway · 2021-07-07T20:05:29Z

Wait what should I do with the categories / groups (ES3, ES5, ES2020, ...)?

Simek · 2021-07-07T21:25:37Z

Wait what should I do with the categories / groups (ES3, ES5, ES2020, ...)?

You can use HTML on the Docusaurus pages, so maybe you can utilize a cell with a colspan to represent groups, what do you think?

You can also add an custom CSS `className` to further customize the group cell appearance.

Let me know if you will need any help. 🙂

SConaway · 2021-07-07T22:21:23Z

I was actually thinking of labeling / tagging them like so, but I'm open to that too! Let me know what you prefer.

Here's what I have so far (I've done them all, here are the first few:

I've changed the Type label to Transformation to match your example

Huxpro · 2021-07-08T06:15:14Z

@SConaway thanks for updating the list of transforms! There is however a small issue: the transform profile is considered an unstable feature of Metro and the Hermes profile is not turned on by default even when Hermes is used as the engine. So it may be too early to call them out.

Cc @motiz88 for a second opinion on this.

SConaway · 2021-07-08T06:16:19Z

Ok, that’s fine. Just let me know what to do and I can do it!

motiz88 · 2021-07-08T10:03:09Z

Agree with @Huxpro - let's remove the Hermes mention until this is a supported workflow.

SConaway · 2021-07-08T17:18:05Z

Ok cool.

Do we want to stick with the version labels / tags or use groups like in @Simek’s screenshot?

Simek · 2021-07-08T19:01:28Z

@SConaway The short ECMAScript names are for newest versions are deprecated, so we should use the full year names (ES20XX) for ES6 onward, as listed on the wiki:

https://en.wikipedia.org/wiki/ECMAScript#Versions

Also if we don't list the Hermes transformations currently, the table refactor is not required. I can accept the this PR if you just remove the "when not using Hermes" text and updated the ES naming. 🙂

SConaway · 2021-07-08T19:33:02Z

@Simek

Ok I'll do that.

Personally I think the table looks a bit better and then wouldn't need to be redone when the Hermes stuff is ready, but let me know!

Simek · 2021-07-08T20:57:07Z

@SConaway We can stick to the table, but it would only include Type and Code columns from your screenshot right?

Regarding to labels, website also have a quite large portion of visitors using mobile devices and it would be nice if we can spare some width (especially with yearly names in ES labels) and avoid repetition by adding group headings instead of labels (but feel free to customize the appearance of header row, if you thing it's necessary to differentiate them somehow). 🙂

SConaway · 2021-07-08T21:02:43Z

Yes. Sounds good. I'll have the PR updated by EOD today

Huxpro · 2021-07-08T21:19:22Z

The table indeed looks much better to me (notably the alignment) and it's more future-proof once the transform profile feature is going public.

@Simek I guess you were trying to mean JSC instead of JSI in your original comment, right?

SConaway · 2021-07-08T22:21:11Z

Converted to table, but I couldn't quite figure out the colspan cells, @Simek, so please either let me know what to change it to or feel free to do it yourself, thanks!

Here's how it looks now:

I suggest doing something with the proposals, as I'm not sure the best way to organize them—or even if the stages makes sense. Let me know how to improve it.

SConaway · 2021-07-08T22:29:33Z

Also, is it normal for docusaurus to take about 7 minutes for a full build (cd website && yarn build)? I am thinking of moving some personal projects to docusaurus, but it seems a bit slow!

Simek · 2021-07-09T11:02:29Z

@Simek I guess you were trying to mean JSC instead of JSI in your original comment, right?

Yup, my bad, hope it's not a critical issue. 😉

Also, is it normal for docusaurus to take about 7 minutes for a full build (cd website && yarn build)?

The reason behind the prod build time is the amount of versions served, in dev more and in preview most of versioned docs are stripped. Additionally adding i18n in the future will increase the build time drastically. There were also an optimizations made for the deployment process and caches settings, and currently this few minutes are not a big issue. When using V1, deploying Archive version of website (https://archive.reactnative.dev/versions) would take around 45 minutes.

According to the transformations table - as I suggested earlier to achieve table heading you need to use HTML. Unfortunately you cannot mix the Markdown and HTML table elements together. Also there are some issues in Remark when parsing table content (As seen, for example on the Button page - https://reactnative.dev/docs/button#color), so generally it's a safer approach to use HTML in case of heavily customization.

I have also utilized the CodeBlock component, to display the code examples which cannot be placed in tables when using Markdown, which should make the example more readable. There were also small tweaks and changes to the examples code and order of few transformation table entries.

Please check out the deployed preview (https://deploy-preview-2676--react-native.netlify.app/docs/next/javascript-environment#javascript-syntax-transformers), I'm curious about your feedback. 🙂

Preview

Huxpro · 2021-07-09T21:57:54Z

@Simek May I suggest that we should increase the font size of code blocks? I knew it's probably inherited from somewhere but I just felt like they are way too small to read.

Simek · 2021-07-11T07:14:57Z

@Simek May I suggest that we should increase the font size of code blocks? I knew it's probably inherited from somewhere but I just felt like they are way too small to read.

@Huxpro Do you have in mind CodeBlock font size in the tables, or the general size of CodeBlock font in on the whole page?

If you have in mind those specific CodeBlocks in the tables, after a quick check, it looks like there is some downsizing applied, because the final, computed font size differs from the font size value when CodeBlock is placed directly on the page (11.34px vs 13.77px). I will look at this issue.

…eBlock font issue

Huxpro · 2021-07-12T01:03:28Z

@Simek In the tables! The general size over the whole website is okay.

(11.34px vs 13.77px)

Thanks for digging that out. 11.34 indeed sounds too tiny XD. I'm wondering why aren't general size 14 though.

Simek · 2021-07-12T06:47:25Z

@Simek In the tables! The general size over the whole website is okay.

@Huxpro The CodeBlock font size in tables has been adjusted in my last commit (4c8fad5). After all the scaling and transformations, the font size should be around 14px as expected now.

Simek

Thank you @SConaway for starting the work on this update and extending the list in the first place! Thank you @Huxpro & @motiz88 for the feedback! 👍

Looks like everyone is quite happy with the result right now, so let's merge it. We can always introduce the changes or fixes in the separate PRs. 🙂

SConaway · 2021-07-15T18:51:38Z

Yes, it does look a lot better. Glad my desire to keep the information in the docs up-to-date led to the revamp of the entire page.

Update Syntax Transforms list

e56b0f9

facebook-github-bot added the CLA Signed label Jul 5, 2021

SConaway mentioned this pull request Jul 6, 2021

ES Numeric Separators broken by babel (Unexpected token: name (_000)) facebook/metro#645

Closed

Simek requested changes Jul 7, 2021

View reviewed changes

Convert to table!

18f608b

refactor JS transforms table, update code examples and ES names

7d91b70

tweak general font size in tables, this also should fix the small Cod…

4c8fad5

…eBlock font issue

once more tweak the in-table font size

d5e22cd

Simek approved these changes Jul 15, 2021

View reviewed changes

Simek merged commit cba1401 into facebook:master Jul 15, 2021

Simek mentioned this pull request Jul 15, 2021

allow wrapping code blocks content in tables #2691

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Syntax Transforms list #2676

Update Syntax Transforms list #2676

SConaway commented Jul 5, 2021

netlify bot commented Jul 5, 2021 •

edited

SConaway commented Jul 6, 2021 •

edited

Simek left a comment •

edited

SConaway commented Jul 7, 2021

SConaway commented Jul 7, 2021

Simek commented Jul 7, 2021 •

edited

SConaway commented Jul 7, 2021 •

edited

Huxpro commented Jul 8, 2021 •

edited

SConaway commented Jul 8, 2021

motiz88 commented Jul 8, 2021

SConaway commented Jul 8, 2021

Simek commented Jul 8, 2021 •

edited

SConaway commented Jul 8, 2021

Simek commented Jul 8, 2021

SConaway commented Jul 8, 2021

Huxpro commented Jul 8, 2021

SConaway commented Jul 8, 2021 •

edited

SConaway commented Jul 8, 2021

Simek commented Jul 9, 2021 •

edited

Huxpro commented Jul 9, 2021 •

edited

Simek commented Jul 11, 2021

Huxpro commented Jul 12, 2021

Simek commented Jul 12, 2021 •

edited

Simek left a comment

SConaway commented Jul 15, 2021

Update Syntax Transforms list #2676

Update Syntax Transforms list #2676

Conversation

SConaway commented Jul 5, 2021

netlify bot commented Jul 5, 2021 • edited

SConaway commented Jul 6, 2021 • edited

Simek left a comment • edited

Choose a reason for hiding this comment

SConaway commented Jul 7, 2021

SConaway commented Jul 7, 2021

Simek commented Jul 7, 2021 • edited

SConaway commented Jul 7, 2021 • edited

Huxpro commented Jul 8, 2021 • edited

SConaway commented Jul 8, 2021

motiz88 commented Jul 8, 2021

SConaway commented Jul 8, 2021

Simek commented Jul 8, 2021 • edited

SConaway commented Jul 8, 2021

Simek commented Jul 8, 2021

SConaway commented Jul 8, 2021

Huxpro commented Jul 8, 2021

SConaway commented Jul 8, 2021 • edited

SConaway commented Jul 8, 2021

Simek commented Jul 9, 2021 • edited

Preview

Huxpro commented Jul 9, 2021 • edited

Simek commented Jul 11, 2021

Huxpro commented Jul 12, 2021

Simek commented Jul 12, 2021 • edited

Simek left a comment

Choose a reason for hiding this comment

SConaway commented Jul 15, 2021

netlify bot commented Jul 5, 2021 •

edited

SConaway commented Jul 6, 2021 •

edited

Simek left a comment •

edited

Simek commented Jul 7, 2021 •

edited

SConaway commented Jul 7, 2021 •

edited

Huxpro commented Jul 8, 2021 •

edited

Simek commented Jul 8, 2021 •

edited

SConaway commented Jul 8, 2021 •

edited

Simek commented Jul 9, 2021 •

edited

Huxpro commented Jul 9, 2021 •

edited

Simek commented Jul 12, 2021 •

edited