Consolidate JavaScript Flavors

Fixes https://github.com/facebook/yoga/issues/1417

This dramatically simplifies the matrix of Node vs web, ASM vs WASM, sync vs async compilation, or CommonJS vs ES Modules. We have one variant, using without, with ESModule top-level await to do async compilation. Web/node share the same binary, and we base64 encode the WASM into a wrapper JS file for compatibility with Node and bundlers.

After this change we target:

This has some downsides, like requiring an environment with top level await, but also has upsides, like a consistent, sync looking API compatible with older Yoga, and mitigating TypeScript issues with package exports and typings resolution.

## Test Plan
1. `yarn test`
2. `yarn lint`
3. `yarn tsc`
4. `yarn build` website-next
5. Locally test website
5. Examine package artifact created by GitHub

website-next/docusaurus.config.cjs

@@ -37,7 +37,7 @@ const config = {
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
-          sidebarPath: require.resolve('./sidebars.js'),
+          sidebarPath: require.resolve('./sidebars.cjs'),
           editUrl: 'https://github.com/facebook/yoga/tree/main/website',
         },
         blog: {

website-next/src/components/Playground/Editor.tsx

@@ -11,7 +11,7 @@ import React, {Component} from 'react';
 import {Row, Col, Button, Tabs} from 'antd';
 import EditValue from './EditValue';
 import type {LayoutRecordType} from './LayoutRecord';
-import type {Direction} from 'yoga-layout/sync';
+import type {Direction} from 'yoga-layout';
 import InfoText from './InfoText';
 import './Editor.css';
 const TabPane = Tabs.TabPane;

website-next/src/components/Playground/LayoutRecord.tsx

@@ -10,15 +10,8 @@
 import {Record, List} from 'immutable';
 import PositionRecord from './PositionRecord';
 import type {PositionRecordType} from './PositionRecord';
-import yoga from 'yoga-layout/sync';
 
-import type {
-  Align,
-  Justify,
-  FlexDirection,
-  Wrap,
-  PositionType,
-} from 'yoga-layout/sync';
+import {Align, Justify, FlexDirection, Wrap, PositionType} from 'yoga-layout';
 
 export type LayoutRecordType = ReturnType<LayoutRecordFactory>;
 
@@ -50,11 +43,11 @@ export type LayoutRecordFactory = Record.Factory<{
 const r: LayoutRecordFactory = Record({
   width: 'auto',
   height: 'auto',
-  justifyContent: yoga.JUSTIFY_FLEX_START,
-  alignItems: yoga.ALIGN_STRETCH,
-  alignSelf: yoga.ALIGN_AUTO,
-  alignContent: yoga.ALIGN_STRETCH,
-  flexDirection: yoga.FLEX_DIRECTION_ROW,
+  justifyContent: Justify.FlexStart,
+  alignItems: Align.Stretch,
+  alignSelf: Align.Auto,
+  alignContent: Align.Stretch,
+  flexDirection: FlexDirection.Row,
   padding: PositionRecord(),
   margin: PositionRecord(),
   border: PositionRecord(),
@@ -64,8 +57,8 @@ const r: LayoutRecordFactory = Record({
     right: NaN,
     bottom: NaN,
   }),
-  positionType: yoga.POSITION_TYPE_RELATIVE,
-  flexWrap: yoga.WRAP_NO_WRAP,
+  positionType: PositionType.Relative,
+  flexWrap: Wrap.NoWrap,
   flexBasis: 'auto',
   flexGrow: 0,
   flexShrink: 1,

website-next/src/components/Playground/YogaEnumSelect.tsx

@@ -8,7 +8,7 @@
  */
 
 import React, {Component} from 'react';
-import Yoga from 'yoga-layout/sync';
+import Yoga from 'yoga-layout';
 import {Radio, Menu, Dropdown, Button, Icon} from 'antd';
 import './YogaEnumSelect.css';
 const RadioButton = Radio.Button;

website-next/src/components/Playground/YogaNode.tsx

@@ -8,12 +8,12 @@
  */
 
 import React, {Component} from 'react';
-import Yoga from 'yoga-layout/sync';
+import Yoga from 'yoga-layout';
 import PositionGuide from './PositionGuide';
 import PositionRecord from './PositionRecord';
 import LayoutRecord from './LayoutRecord';
 import type {LayoutRecordType} from './LayoutRecord';
-import {Direction, Display, Edge, Node, Wrap} from 'yoga-layout/sync';
+import {Direction, Display, Edge, Node, Wrap} from 'yoga-layout';
 
 import './YogaNode.css';
 

website-next/src/components/Playground/index.tsx

@@ -8,7 +8,7 @@
  */
 
 import React, {Component} from 'react';
-import {Direction} from 'yoga-layout/sync';
+import {Direction} from 'yoga-layout';
 import YogaNode from './YogaNode';
 import Editor from './Editor';
 import {List, setIn} from 'immutable';

website-next/src/pages/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {Suspense} from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -34,6 +34,8 @@ function HomepageHeader() {
   );
 }
 
+const LazyPlayground = React.lazy(() => import('../components/Playground'));
+
 export default function Home(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
   return (
@@ -44,10 +46,11 @@ export default function Home(): JSX.Element {
       <main>
         <HomepageFeatures />
         <BrowserOnly fallback={null}>
-          {() => {
-            const Playground = require('../components/Playground');
-            return <Playground />;
-          }}
+          {() => (
+            <Suspense fallback={null}>
+              <LazyPlayground />
+            </Suspense>
+          )}
         </BrowserOnly>
       </main>
     </Layout>

website-next/tsconfig.json

@@ -2,6 +2,10 @@
   // This file is not used in compilation. It is here just for a nice editor experience.
   "extends": "@tsconfig/docusaurus/tsconfig.json",
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true
   }
 }