Fix JS build on Windows (#1648)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1648

Node made a breaking change in a security release for 18/20 where `spawn()` no longer loads `.bat` files by default. 69ffc6d50d. Execute command in shell.

Reviewed By: javache

Differential Revision: D56230965

fbshipit-source-id: 52e9bd8a76664bd07ea25b6355ac54fcb24cbb9a

.github/workflows/validate-tests.yml

@@ -5,7 +5,6 @@ on:
   push:
     branches:
       - main
-      - 'release-*'
   workflow_dispatch:
 
 jobs:

Yoga.podspec

@@ -6,7 +6,7 @@
 
 Pod::Spec.new do |spec|
   spec.name = 'Yoga'
-  spec.version = '3.0.2'
+  spec.version = '3.0.4'
   spec.license =  { :type => 'MIT', :file => "LICENSE" }
   spec.homepage = 'https://yogalayout.dev/'
   spec.documentation_url = 'https://yogalayout.dev/docs'

gradle.properties

@@ -11,4 +11,4 @@ android.useAndroidX=true
 
 org.gradle.jvmargs=-Xmx1536M
 
-VERSION_NAME=3.0.2
+VERSION_NAME=3.0.4

javascript/README.md

@@ -29,3 +29,12 @@ node.free();
 ## Requirements
 
 `yoga-layout` requires a toolchain that supports ES Modules and top-level await.
+
+If top-level-await is not supported, use the `yoga-layout/load` entry point instead. This requires to load yoga manually:
+
+```ts
+import {loadYoga, Align} from 'yoga-layout/load';
+
+const node = (await loadYoga).Node.create();
+node.setAlignContent(Align.Center);
+```

javascript/just.config.cjs

@@ -13,11 +13,11 @@ const {
   logger,
   jestTask,
   option,
-  parallel,
   series,
   spawn,
   task,
   tscTask,
+  copyTask,
 } = require('just-scripts');
 
 const {existsSync} = require('fs');
@@ -58,16 +58,32 @@ task('prepack-package-json', async () => {
   const packageJsonContents = await readFile(packageJsonPath);
   const packageJson = JSON.parse(packageJsonContents.toString('utf-8'));
 
-  recursiveReplace(packageJson, /(.\/src\/.*)\.ts/, '$1.js');
+  packageJson.main = packageJson.main.replace(
-  packageJson.types = packageJson.main.replace(/(.\/src\/.*)\.js/, '$1.d.ts');
+    /^.\/src\/(.*)\.ts/,
+    './dist/src/$1.js',
+  );
+  packageJson.types = packageJson.main.replace(/(.*)\.js/, '$1.d.ts');
+
+  recursiveReplace(
+    packageJson.exports,
+    /^.\/src\/(.*)\.ts/,
+    './dist/src/$1.js',
+  );
+
   await writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
 });
 
 task(
   'prepack',
   series(
-    parallel('build', tscTask({emitDeclarationOnly: true})),
+    'build',
-    babelTransformTask({dir: 'src'}),
+    copyTask({paths: ['binaries'], dest: 'dist/binaries'}),
+    tscTask({
+      emitDeclarationOnly: true,
+      rootDir: '.',
+      declarationDir: 'dist',
+    }),
+    babelTransformTask({src: 'src', dst: 'dist/src'}),
     'prepack-package-json',
   ),
 );
@@ -85,14 +101,14 @@ function recursiveReplace(obj, pattern, replacement) {
 function babelTransformTask(opts) {
   return () => {
     const args = [
-      opts.dir,
+      opts.src,
       '--source-maps',
       '--out-dir',
-      opts.dir,
+      opts.dst,
       '--extensions',
       '.js,.cjs,.mjs,.ts,.cts,.mts',
     ];
-    logger.info(`Transforming "${path.resolve(opts.dir)}"`);
+    logger.info(`Transforming "${path.resolve(opts.src)}"`);
 
     return spawn(node, [require.resolve('@babel/cli/bin/babel'), ...args], {
       cwd: __dirname,
@@ -152,9 +168,9 @@ function installEmsdkTask() {
       {stdio: 'inherit'},
     );
 
-    await spawn(emsdkBin, ['install', emsdkVersion], {stdio: 'inherit'});
+    await spawnShell(emsdkBin, ['install', emsdkVersion], {stdio: 'inherit'});
 
-    await spawn(emsdkBin, ['activate', emsdkVersion], {
+    await spawnShell(emsdkBin, ['activate', emsdkVersion], {
       stdio: logger.enableVerbose ? 'inherit' : 'ignore',
     });
   };
@@ -200,7 +216,7 @@ function emcmakeGenerateTask() {
     ];
     logger.info(['emcmake', ...args].join(' '));
 
-    return spawn(emcmakeBin, args, {
+    return spawnShell(emcmakeBin, args, {
       stdio: logger.enableVerbose ? 'inherit' : 'ignore',
     });
   };
@@ -218,7 +234,7 @@ function cmakeBuildTask(opts) {
     ];
     logger.info(['cmake', ...args].join(' '));
 
-    return spawn(cmake, args, {stdio: 'inherit'});
+    return spawnShell(cmake, args, {stdio: 'inherit'});
   };
 }
 
@@ -230,8 +246,13 @@ function clangFormatTask(opts) {
     ];
     logger.info(['clang-format', ...args].join(' '));
 
-    return spawn(node, [require.resolve('clang-format'), ...args], {
+    return spawnShell(node, [require.resolve('clang-format'), ...args], {
       stdio: 'inherit',
     });
   };
 }
+
+function spawnShell(cmd, args, opts) {
+  // https://github.com/nodejs/node/issues/52554
+  return spawn(cmd, args, {...opts, shell: true});
+}

javascript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yoga-layout",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "An embeddable and performant flexbox layout engine with bindings for multiple languages",
   "license": "MIT",
   "author": "Meta Open Source",
@@ -11,8 +11,14 @@
   },
   "type": "module",
   "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./load": "./src/load.ts"
+  },
   "files": [
-    "binaries/**",
+    "dist/binaries/**",
+    "dist/src/**",
     "src/**"
   ],
   "scripts": {

javascript/src/Node.cpp

@@ -413,6 +413,14 @@ bool Node::isDirty(void) const {
   return YGNodeIsDirty(m_node);
 }
 
+void Node::markLayoutSeen() {
+  YGNodeSetHasNewLayout(m_node, false);
+}
+
+bool Node::hasNewLayout(void) const {
+  return YGNodeGetHasNewLayout(m_node);
+}
+
 void Node::calculateLayout(double width, double height, int direction) {
   YGNodeCalculateLayout(
       m_node, width, height, static_cast<YGDirection>(direction));

javascript/src/Node.h

@@ -195,6 +195,8 @@ class Node {
  public: // Dirtiness accessors
   void markDirty(void);
   bool isDirty(void) const;
+  void markLayoutSeen();
+  bool hasNewLayout(void) const;
 
  public: // Layout mutators
   void calculateLayout(double width, double height, int direction);

javascript/src/embind.cpp

@@ -175,6 +175,9 @@ EMSCRIPTEN_BINDINGS(YOGA_LAYOUT) {
       .function("markDirty", &Node::markDirty)
       .function("isDirty", &Node::isDirty)
 
+      .function("markLayoutSeen", &Node::markLayoutSeen)
+      .function("hasNewLayout", &Node::hasNewLayout)
+
       .function("calculateLayout", &Node::calculateLayout)
 
       .function("getComputedLeft", &Node::getComputedLeft)

javascript/src/load.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+// @ts-ignore untyped from Emscripten
+import loadYogaImpl from '../binaries/yoga-wasm-base64-esm.js';
+import wrapAssembly from './wrapAssembly.ts';
+
+export type {
+  Config,
+  DirtiedFunction,
+  MeasureFunction,
+  Node,
+  Yoga,
+} from './wrapAssembly.ts';
+
+export async function loadYoga() {
+  return wrapAssembly(await loadYogaImpl());
+}
+export * from './generated/YGEnums.ts';

javascript/src/wrapAssembly.ts

@@ -119,6 +119,8 @@ export type Node = {
   isDirty(): boolean;
   isReferenceBaseline(): boolean;
   markDirty(): void;
+  hasNewLayout(): boolean;
+  markLayoutSeen(): void;
   removeChild(child: Node): void;
   reset(): void;
   setAlignContent(alignContent: Align): void;

javascript/tests/YGHasNewLayout.test.ts

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import Yoga from 'yoga-layout';
+
+test('new_layout_can_be_marked_seen', () => {
+  const root = Yoga.Node.create();
+  root.markLayoutSeen();
+  expect(root.hasNewLayout()).toBe(false);
+});
+
+test('new_layout_calculating_layout_marks_layout_as_unseen', () => {
+  const root = Yoga.Node.create();
+  root.markLayoutSeen();
+  root.calculateLayout(undefined, undefined);
+  expect(root.hasNewLayout()).toBe(true);
+});
+
+test('new_layout_calculated_layout_can_be_marked_seen', () => {
+  const root = Yoga.Node.create();
+  root.calculateLayout(undefined, undefined);
+  root.markLayoutSeen();
+  expect(root.hasNewLayout()).toBe(false);
+});
+
+test('new_layout_recalculating_layout_does_mark_as_unseen', () => {
+  const root = Yoga.Node.create();
+  root.calculateLayout(undefined, undefined);
+  root.markLayoutSeen();
+  root.calculateLayout(undefined, undefined);
+  expect(root.hasNewLayout()).toBe(true);
+});
+
+test('new_layout_reset_also_resets_layout_seen', () => {
+  const root = Yoga.Node.create();
+  root.markLayoutSeen();
+  root.reset();
+  expect(root.hasNewLayout()).toBe(true);
+});
+
+test('new_layout_children_sets_new_layout', () => {
+  const root = Yoga.Node.create();
+  root.setAlignItems(Yoga.ALIGN_FLEX_START);
+  root.setWidth(100);
+  root.setHeight(100);
+
+  const root_child0 = Yoga.Node.create();
+  root_child0.setAlignItems(Yoga.ALIGN_FLEX_START);
+  root_child0.setWidth(50);
+  root_child0.setHeight(20);
+  root.insertChild(root_child0, 0);
+
+  const root_child1 = Yoga.Node.create();
+  root_child1.setAlignItems(Yoga.ALIGN_FLEX_START);
+  root_child1.setWidth(50);
+  root_child1.setHeight(20);
+  root.insertChild(root_child1, 0);
+
+  expect(root.hasNewLayout()).toEqual(true);
+  expect(root_child0.hasNewLayout()).toEqual(true);
+  expect(root_child1.hasNewLayout()).toEqual(true);
+
+  root.markLayoutSeen();
+  root_child0.markLayoutSeen();
+  root_child1.markLayoutSeen();
+
+  expect(root.hasNewLayout()).toEqual(false);
+  expect(root_child0.hasNewLayout()).toEqual(false);
+  expect(root_child1.hasNewLayout()).toEqual(false);
+
+  root_child1.setHeight(30);
+  root.calculateLayout(undefined, undefined);
+
+  expect(root.hasNewLayout()).toEqual(true);
+  expect(root_child0.hasNewLayout()).toEqual(true);
+  expect(root_child1.hasNewLayout()).toEqual(true);
+});

website-next/package.json

@@ -27,7 +27,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-live": "^4.1.5",
-    "yoga-layout": "3.0.2"
+    "yoga-layout": "3.0.4"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.0.0",

website/README.md

@@ -1,4 +1,4 @@
-# Yoga documentation and playground
+# Yoga legacy documentation and playground
 
 This site uses [gatsby.js](https://www.gatsbyjs.org/) as static site generator. Which transforms all markdown and react code to static HTML and JS files.