javascript/CMakeLists.txt

@@ -29,6 +29,32 @@ set(COMPILE_OPTIONS
 
 add_compile_options(${COMPILE_OPTIONS})
 
+link_libraries(embind)
+
+add_library(yogaObjLib OBJECT ${SOURCES})
+
+set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}/binaries)
+
+add_link_options(
+    ${COMPILE_OPTIONS}
+    "SHELL:--closure 1"
+    "SHELL:--memory-init-file 0"
+    "SHELL:--no-entry"
+    "SHELL:-s ALLOW_MEMORY_GROWTH=1"
+    "SHELL:-s ASSERTIONS=0"
+    "SHELL:-s DYNAMIC_EXECUTION=0"
+    "SHELL:-s EXPORT_NAME='loadYoga'"
+    "SHELL:-s FETCH_SUPPORT_INDEXEDDB=0"
+    "SHELL:-s FILESYSTEM=0"
+    "SHELL:-s MALLOC='emmalloc'"
+    "SHELL:-s MODULARIZE=1"
+    "SHELL:-s EXPORT_ES6=1"
+    "SHELL:-s WASM=1"
+    "SHELL:-s TEXTDECODER=0"
+    "SHELL:-s ENVIRONMENT='web'")
+
+add_executable(yoga-wasm-separate-esm $<TARGET_OBJECTS:yogaObjLib>)
+
 add_link_options(
     ${COMPILE_OPTIONS}
     "SHELL:--closure 1"
@@ -45,15 +71,7 @@ add_link_options(
     "SHELL:-s EXPORT_ES6=1"
     "SHELL:-s WASM=1"
     "SHELL:-s TEXTDECODER=0"
-    # SINGLE_FILE=1 combined with ENVIRONMENT='web' creates code that works on
-    # both bundlders and Node.
     "SHELL:-s SINGLE_FILE=1"
     "SHELL:-s ENVIRONMENT='web'")
 
-link_libraries(embind)
-
-add_library(yogaObjLib OBJECT ${SOURCES})
-
-set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}/binaries)
-
 add_executable(yoga-wasm-base64-esm $<TARGET_OBJECTS:yogaObjLib>)

javascript/README.md

@@ -7,13 +7,14 @@ See more at https://yogalayout.dev
 ## Usage
 
 ```ts
-import {Yoga, Align} from 'yoga-layout';
+import { Align, Yoga } from "yoga-layout";
 
 const node = Yoga.Node.create();
 node.setAlignContent(Align.Center);
 ```
 
-Objects created by `Yoga.<>.create()` are not automatically garbage collected and should be freed once they are no longer in use.
+Objects created by `Yoga.<>.create()` are not automatically garbage collected
+and should be freed once they are no longer in use.
 
 ```ts
 // Free a config
@@ -30,11 +31,19 @@ node.free();
 
 `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:
+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';
+import { Align, loadYoga } from "yoga-layout/load";
 
 const node = (await loadYoga).Node.create();
 node.setAlignContent(Align.Center);
 ```
+
+You can also use `yoga-layout/loadSeparate`, which has the exactly same api as
+`yoga-layout/load`, if you want the js and wasm in separate files, this can
+useful in several scenarios such as avoiding
+[unsafe-wasm-eval](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#unsafe_webassembly_execution).
+Do be aware that this option might not work out of the box with any and all
+bundlers or frameworks

javascript/package.json

@@ -14,7 +14,8 @@
   "types": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
-    "./load": "./src/load.ts"
+    "./load": "./src/load.ts",
+    "./loadSeparate": "./src/loadSeparate.ts"
   },
   "files": [
     "dist/binaries/**",

javascript/src/loadSeparate.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-separate-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';