From 1721ba112cb7e620001eb4e22833893c506dd245 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandra=20=C3=98stermark?= <alex.cramt@gmail.com>
Date: Sun, 2 Mar 2025 20:29:44 +0100
Subject: [PATCH] allow for loading wasm without unsafe wasm execution

---
 javascript/CMakeLists.txt      | 34 ++++++++++++++++++++++++++--------
 javascript/README.md           | 17 +++++++++++++----
 javascript/package.json        |  3 ++-
 javascript/src/loadSeparate.ts | 25 +++++++++++++++++++++++++
 4 files changed, 66 insertions(+), 13 deletions(-)
 create mode 100644 javascript/src/loadSeparate.ts

diff --git a/javascript/CMakeLists.txt b/javascript/CMakeLists.txt
index b1a1278f..1b2548bf 100644
--- a/javascript/CMakeLists.txt
+++ b/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>)
diff --git a/javascript/README.md b/javascript/README.md
index da4fe27f..2e68d912 100644
--- a/javascript/README.md
+++ b/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
diff --git a/javascript/package.json b/javascript/package.json
index 32e77d58..a62a64ce 100644
--- a/javascript/package.json
+++ b/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/**",
diff --git a/javascript/src/loadSeparate.ts b/javascript/src/loadSeparate.ts
new file mode 100644
index 00000000..e6d52eb3
--- /dev/null
+++ b/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';
-- 
2.50.1.windows.1