react-native-ariel 0.1.0-dev.5 → 0.1.0-dev.52

package/Ariel.podspec

@@ -13,9 +13,9 @@ Pod::Spec.new do |s|
   s.authors      = package["author"]
 
   s.platforms    = { :ios => min_ios_version_supported }
-  s.source       = { :git => "https://github.com/rinfi/ariel.git", :tag => "#{s.version}" }
+  s.source       = { :git => "https://github.com/rinfimate/ariel.git", :tag => "#{s.version}" }
 
-  s.source_files = "ios/**/*.{h,m,mm,swift}", "ios/generated/**/*.{h,m,mm}", "cpp/**/*.{hpp,cpp,c,h}", "cpp/generated/**/*.{hpp,cpp,c,h}"
+  s.source_files = "ios/**/*.{h,m,mm,swift}", "cpp/**/*.{hpp,cpp,c,h}"
   s.vendored_frameworks = "ArielFramework.xcframework"
   s.dependency    "uniffi-bindgen-react-native", "0.31.0-2"
 

package/README.md

@@ -29,7 +29,7 @@ Every other Mermaid solution for React Native requires a DOM, a WebView, or a he
 yarn add react-native-ariel react-native-svg
 ```
 
-> **Note:** Ariel uses custom native code and requires [Expo Dev Client](https://docs.expo.dev/develop/development-builds/introduction/) — it does not work with Expo Go.
+> **Requirements:** React Native **≥ 0.73** with **New Architecture enabled**. On RN 0.73–0.75 you must set `newArchEnabled=true` in `android/gradle.properties` and enable it in your iOS Podfile — New Architecture became the default in RN 0.76.
 
 ---
 
@@ -38,33 +38,57 @@ yarn add react-native-ariel react-native-svg
 ### Simple render
 
 ```typescript
-import { renderMermaid } from 'react-native-ariel';
+import { useState, useEffect } from 'react';
+import { View } from 'react-native';
 import { SvgXml } from 'react-native-svg';
-
-const svg = renderMermaid('flowchart TD\n  A[Hello] --> B[World]');
-
-<SvgXml xml={svg} width="100%" />
+import { renderMermaid, uniffiInitAsync } from 'react-native-ariel';
+
+export default function DiagramView() {
+  const [svg, setSvg] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function run() {
+      // uniffiInitAsync is a no-op on native and loads the WASM module on web.
+      // Always await it before rendering so the same code works on both platforms.
+      await uniffiInitAsync();
+      try {
+        setSvg(renderMermaid('flowchart TD\n  A[Hello] --> B[World]'));
+      } catch (e) {
+        console.error('Render failed:', e);
+      }
+    }
+    run();
+  }, []);
+
+  return <View>{svg && <SvgXml xml={svg} width="100%" />}</View>;
+}
 ```
 
+`renderMermaid` is **synchronous** on native — no async overhead after init.
+
 ### With theme and layout control
 
 ```typescript
-import { renderMermaidWithOptions, ArielTheme } from 'react-native-ariel';
+import { renderMermaidWithOptions, uniffiInitAsync, ArielTheme } from 'react-native-ariel';
 
-const theme = ArielTheme.modern(); // or ArielTheme.mermaidDefault()
-const config = { nodeSpacing: 50, rankSpacing: 80, aspectRatioHint: null };
+const config = { nodeSpacing: 50, rankSpacing: 80 };
 
-const svg = renderMermaidWithOptions(diagram, theme, config);
+await uniffiInitAsync();
+const svg = renderMermaidWithOptions(diagram, ArielTheme.modern(), config);
+// or: ArielTheme.mermaidDefault()
 ```
 
 ### With timing metrics
 
 ```typescript
-import { renderMermaidWithTiming, ArielTheme } from 'react-native-ariel';
+import { renderMermaidWithTiming, uniffiInitAsync, ArielTheme } from 'react-native-ariel';
+
+const config = { nodeSpacing: 50, rankSpacing: 80 };
 
+await uniffiInitAsync();
 const result = renderMermaidWithTiming(diagram, ArielTheme.modern(), config);
 console.log(`Total: ${result.totalMs.toFixed(2)}ms`);
-// Parse: 420µs  Layout: 610µs  Render: 200µs
+// parseUs / layoutUs / renderUs are bigint (µs); totalMs is number (ms)
 ```
 
 ### Full pipeline (parse once, render with multiple themes)
@@ -74,9 +98,13 @@ import {
   parseDiagram,
   computeDiagramLayout,
   renderSvgFromLayout,
+  uniffiInitAsync,
   ArielTheme,
 } from 'react-native-ariel';
 
+const config = { nodeSpacing: 50, rankSpacing: 80 };
+
+await uniffiInitAsync();
 const parsed = parseDiagram('flowchart LR\n  A --> B --> C');
 const layout = computeDiagramLayout(parsed, ArielTheme.modern(), config);
 const svg    = renderSvgFromLayout(layout, ArielTheme.modern(), config);
@@ -95,18 +123,6 @@ Logs are written to **Android Logcat**, the **Xcode console** on iOS, and the **
 
 > **Note:** When timing is on, every render call allocates a format string regardless of whether you can see the output. This is cheap but not free. The flag is intended for debugging — avoid shipping with `setTimingLogs(true)` hardcoded.
 
-### Web (WASM) initialisation
-
-On web, call `uniffiInitAsync` before any render calls:
-
-```typescript
-import { uniffiInitAsync } from 'react-native-ariel';
-
-uniffiInitAsync().then(() => {
-  // safe to call renderMermaid here
-});
-```
-
 ---
 
 ## API
@@ -120,6 +136,7 @@ uniffiInitAsync().then(() => {
 | `computeDiagramLayout(parsed, theme, config)` | Layout stage — returns opaque `ArielLayout` |
 | `renderSvgFromLayout(layout, theme, config)` | SVG stage from pre-computed layout |
 | `setTimingLogs(enabled)` | Toggle timing output to console (default: off) |
+| `uniffiInitAsync()` | Load WASM module on web; no-op on native. Call once before rendering |
 | `ArielTheme.modern()` | Modern theme — see below |
 | `ArielTheme.mermaidDefault()` | Classic Mermaid theme — see below |
 
@@ -147,9 +164,8 @@ const svg = renderMermaidWithOptions(diagram, ArielTheme.mermaidDefault(), confi
 
 ```typescript
 {
-  nodeSpacing?: number | null;
-  rankSpacing?: number | null;
-  aspectRatioHint?: number | null;
+  nodeSpacing?: number;
+  rankSpacing?: number;
 }
 ```
 
@@ -158,10 +174,10 @@ const svg = renderMermaidWithOptions(diagram, ArielTheme.mermaidDefault(), confi
 ```typescript
 {
   svg: string;
-  parseUs: number;
-  layoutUs: number;
-  renderUs: number;
-  totalMs: number;
+  parseUs: bigint;   // microseconds (u64)
+  layoutUs: bigint;  // microseconds (u64)
+  renderUs: bigint;  // microseconds (u64)
+  totalMs: number;   // milliseconds (f64)
 }
 ```
 
@@ -174,7 +190,7 @@ const svg = renderMermaidWithOptions(diagram, ArielTheme.mermaidDefault(), confi
 | Tool | Purpose | Install |
 |---|---|---|
 | [Rust](https://rustup.rs) | Compile the Rust crate | `curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs \| sh` |
-| [Node.js](https://nodejs.org) ≥ 20 | JS toolchain | nodejs.org |
+| [Node.js](https://nodejs.org) ≥ 22 | JS toolchain | nodejs.org |
 | Yarn | Package manager | `npm i -g yarn` |
 | [Android Studio](https://developer.android.com/studio) | Android SDK + NDK | See below |
 | Xcode ≥ 15 | iOS builds (macOS only) | Mac App Store |
@@ -199,7 +215,7 @@ rustup target add wasm32-unknown-unknown
 ### Clone and install
 
 ```sh
-git clone https://github.com/rinfi/ariel.git
+git clone https://github.com/rinfimate/ariel.git
 cd ariel
 yarn
 ```
@@ -222,119 +238,79 @@ This works on **Windows**, **macOS**, and **Linux** and writes to `src/generated
 
 ### Android
 
-Compiles the Rust crate for all Android ABIs and places `.a` / `.so` files under `android/src/main/jniLibs/`. Run `yarn ubrn:generate` first if you haven't already.
+Compiles the Rust crate for all Android ABIs and places `.a` files under `android/src/main/jniLibs/`. Run `yarn ubrn:generate` first if you haven't already.
 
 ```sh
 yarn ubrn:generate   # generates src/generated/rn/ and cpp/
 yarn ubrn:android    # compiles for arm64-v8a, armeabi-v7a, x86_64, x86
+yarn bob build       # compiles TypeScript → lib/
 ```
 
 ### iOS (macOS only)
 
-Compiles for device + simulator and runs `pod install`. Run `yarn ubrn:generate` first.
+Compiles for device + simulator. Run `yarn ubrn:generate` first.
 
 ```sh
 yarn ubrn:generate   # generates src/generated/rn/ and cpp/
 yarn ubrn:ios        # compiles for aarch64-apple-ios, x86_64-apple-ios, aarch64-apple-ios-sim
+yarn bob build       # compiles TypeScript → lib/
 ```
 
 ### Web (WASM)
 
-Compiles to `wasm32-unknown-unknown` and produces a `.wasm` bundle under `src/generated/web/`. Run `yarn ubrn:generate` first.
+Compiles to `wasm32-unknown-unknown` and produces a `.wasm` bundle. Run `yarn ubrn:generate` first.
 
 ```sh
 yarn ubrn:generate   # generates src/generated/web/ (WASM TypeScript bindings)
 yarn ubrn:web        # compiles the WASM crate with wasm-pack
+yarn bob build       # compiles TypeScript → lib/ and copies WASM into lib/module/
 ```
 
-### Rust unit tests
-
-```sh
-cargo test --manifest-path rust/mermaid_wrapper/Cargo.toml
-```
-
-### TypeScript tests
-
-```sh
-yarn test
-```
-
-### Clean generated files
-
-Removes all `ubrn`-generated native code so you can rebuild from scratch.
-
-```sh
-yarn ubrn:clean
-```
-
----
-
-## Running the example app
-
-The `example/` directory is an Expo app with a live Mermaid editor — type a diagram, see the SVG update in real time with timing stats.
+### Building the npm package
 
-### Step 1 — Generate bindings (all platforms, run once)
+To produce a publishable tarball locally (mirrors what CI does, skipping iOS):
 
 ```sh
 yarn ubrn:generate
-```
-
-### Step 2 — Build native libs for your target platform
-
-```sh
-# Android
 yarn ubrn:android
-
-# iOS (macOS only)
-yarn ubrn:ios
-
-# Web — compile WASM bundle
 yarn ubrn:web
+yarn bob build
+npm pack --ignore-scripts
 ```
 
-### Step 3 — Run the example
+### Rust unit tests
 
-**Web** (no emulator needed — opens in your browser):
 ```sh
-yarn example:web
+cargo test --manifest-path rust/mermaid_wrapper/Cargo.toml
 ```
 
-**Android** (emulator or USB device with debugging enabled):
-```sh
-yarn example:android
-```
+### TypeScript tests
 
-**iOS** (macOS only):
 ```sh
-yarn example:ios
+yarn test
 ```
 
-### With Expo Dev Client (install on device)
+### Clean generated files
 
-For a shareable installable build that includes the Ariel native module:
+Removes all `ubrn`-generated native code so you can rebuild from scratch.
 
 ```sh
-# Install EAS CLI
-npm install -g eas-cli
-
-# Build dev client (free for public repos)
-eas build --profile development
-
-# Install the .apk / .ipa on your device, then run:
-yarn example:android   # or example:ios
+yarn ubrn:clean
 ```
 
 ---
 
 ## CI
 
-Three GitHub Actions workflows run on every push to `main`:
+On every push to `main` and on pull requests, `ci.yml` runs:
 
-| Workflow | Runner | What it does |
+| Job | Runner | What it does |
 |---|---|---|
-| `build-android.yml` | `ubuntu-latest` | Runs Rust unit tests, builds Android `.so` libs |
-| `build-ios.yml` | `macos-latest` | Builds iOS `.xcframework` |
-| `build-web.yml` | `ubuntu-latest` | Builds WASM bindings |
+| `test-rust` | `ubuntu-latest` | Rust unit tests |
+| `build-android` | `ubuntu-latest` | Cross-compiles Rust for all Android ABIs |
+| `build-ios` | `macos-latest` | Builds iOS xcframework |
+| `build-web` | `ubuntu-latest` | Builds WASM bundle |
+| `publish` | `ubuntu-latest` | Publishes to npm (push to main or release only) |
 
 iOS uses GitHub's free `macos-latest` runner (unlimited minutes on public repos).
 
@@ -342,7 +318,7 @@ iOS uses GitHub's free `macos-latest` runner (unlimited minutes on public repos)
 
 ## License
 
-MIT © 2026 [Rochanglien Infimate](https://github.com/rinfi)
+MIT © 2026 [Rochanglien Infimate](https://github.com/rinfimate)
 
 ---
 

package/android/build.gradle

@@ -28,9 +28,7 @@ def isNewArchitectureEnabled() {
 apply plugin: "com.android.library"
 apply plugin: "kotlin-android"
 
-if (isNewArchitectureEnabled()) {
-  apply plugin: "com.facebook.react"
-}
+apply plugin: "com.facebook.react"
 
 def getExtOrDefault(name) {
   return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["Ariel_" + name]
@@ -120,6 +118,12 @@ android {
   }
 }
 
+android {
+  packagingOptions {
+    excludes += ['lib/*/libjsi.so', 'lib/*/libturbomodulejsijni.so', 'lib/*/libreact_nativemodule_core.so']
+  }
+}
+
 repositories {
   mavenCentral()
   google()
@@ -135,10 +139,8 @@ dependencies {
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
 }
 
-if (isNewArchitectureEnabled()) {
-  react {
-    jsRootDir = file("../src/")
-    libraryName = "Ariel"
-    codegenJavaPackageName = "com.ariel"
-  }
+react {
+  jsRootDir = file("../src/")
+  libraryName = "Ariel"
+  codegenJavaPackageName = "com.ariel"
 }

package/android/generated/{android/app/build/generated/source/codegen/java/com/facebook/fbreact/specs → java/com/ariel}/NativeArielSpec.java

@@ -10,7 +10,7 @@
  * @nolint
  */
 
-package com.facebook.fbreact.specs;
+package com.ariel;
 
 import com.facebook.proguard.annotations.DoNotStrip;
 import com.facebook.react.bridge.ReactApplicationContext;

package/android/generated/{android/app/build/generated/source/codegen/jni → jni}/CMakeLists.txt

@@ -25,4 +25,12 @@ target_link_libraries(
   reactnative
 )
 
-target_compile_reactnative_options(react_codegen_ArielSpec PRIVATE)
+target_compile_options(
+  react_codegen_ArielSpec
+  PRIVATE
+  -DLOG_TAG=\"ReactNative\"
+  -fexceptions
+  -frtti
+  -std=c++20
+  -Wall
+)

package/android/generated/jni/react/renderer/components/ArielSpec/ArielSpecJSI-generated.cpp

@@ -0,0 +1,32 @@
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateModuleCpp.js
+ */
+
+#include "ArielSpecJSI.h"
+
+namespace facebook::react {
+
+static jsi::Value __hostFunction_NativeArielCxxSpecJSI_installRustCrate(jsi::Runtime &rt, TurboModule &turboModule, const jsi::Value* args, size_t count) {
+  return static_cast<NativeArielCxxSpecJSI *>(&turboModule)->installRustCrate(
+    rt
+  );
+}
+static jsi::Value __hostFunction_NativeArielCxxSpecJSI_cleanupRustCrate(jsi::Runtime &rt, TurboModule &turboModule, const jsi::Value* args, size_t count) {
+  return static_cast<NativeArielCxxSpecJSI *>(&turboModule)->cleanupRustCrate(
+    rt
+  );
+}
+
+NativeArielCxxSpecJSI::NativeArielCxxSpecJSI(std::shared_ptr<CallInvoker> jsInvoker)
+  : TurboModule("Ariel", jsInvoker) {
+  methodMap_["installRustCrate"] = MethodMetadata {0, __hostFunction_NativeArielCxxSpecJSI_installRustCrate};
+  methodMap_["cleanupRustCrate"] = MethodMetadata {0, __hostFunction_NativeArielCxxSpecJSI_cleanupRustCrate};
+}
+
+
+} // namespace facebook::react

package/android/generated/jni/react/renderer/components/ArielSpec/ArielSpecJSI.h

@@ -0,0 +1,80 @@
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateModuleH.js
+ */
+
+#pragma once
+
+#include <ReactCommon/TurboModule.h>
+#include <react/bridging/Bridging.h>
+
+namespace facebook::react {
+
+
+  class JSI_EXPORT NativeArielCxxSpecJSI : public TurboModule {
+protected:
+  NativeArielCxxSpecJSI(std::shared_ptr<CallInvoker> jsInvoker);
+
+public:
+  virtual bool installRustCrate(jsi::Runtime &rt) = 0;
+  virtual bool cleanupRustCrate(jsi::Runtime &rt) = 0;
+
+};
+
+template <typename T>
+class JSI_EXPORT NativeArielCxxSpec : public TurboModule {
+public:
+  jsi::Value create(jsi::Runtime &rt, const jsi::PropNameID &propName) override {
+    return delegate_.create(rt, propName);
+  }
+
+  std::vector<jsi::PropNameID> getPropertyNames(jsi::Runtime& runtime) override {
+    return delegate_.getPropertyNames(runtime);
+  }
+
+  static constexpr std::string_view kModuleName = "Ariel";
+
+protected:
+  NativeArielCxxSpec(std::shared_ptr<CallInvoker> jsInvoker)
+    : TurboModule(std::string{NativeArielCxxSpec::kModuleName}, jsInvoker),
+      delegate_(reinterpret_cast<T*>(this), jsInvoker) {}
+
+
+private:
+  class Delegate : public NativeArielCxxSpecJSI {
+  public:
+    Delegate(T *instance, std::shared_ptr<CallInvoker> jsInvoker) :
+      NativeArielCxxSpecJSI(std::move(jsInvoker)), instance_(instance) {
+
+    }
+
+    bool installRustCrate(jsi::Runtime &rt) override {
+      static_assert(
+          bridging::getParameterCount(&T::installRustCrate) == 1,
+          "Expected installRustCrate(...) to have 1 parameters");
+
+      return bridging::callFromJs<bool>(
+          rt, &T::installRustCrate, jsInvoker_, instance_);
+    }
+    bool cleanupRustCrate(jsi::Runtime &rt) override {
+      static_assert(
+          bridging::getParameterCount(&T::cleanupRustCrate) == 1,
+          "Expected cleanupRustCrate(...) to have 1 parameters");
+
+      return bridging::callFromJs<bool>(
+          rt, &T::cleanupRustCrate, jsInvoker_, instance_);
+    }
+
+  private:
+    friend class NativeArielCxxSpec;
+    T *instance_;
+  };
+
+  Delegate delegate_;
+};
+
+} // namespace facebook::react

package/android/proguard-rules.pro

@@ -0,0 +1,4 @@
+# Generated by uniffi-bindgen-react-native
+-dontwarn java.awt.*
+-keep class com.sun.jna.* { *; }
+-keepclassmembers class * extends com.sun.jna.* { public *; }

package/android/src/main/java/com/ariel/ArielModule.kt

@@ -23,10 +23,20 @@ class ArielModule(reactContext: ReactApplicationContext) :
     val context = this.reactApplicationContext
     return nativeInstallRustCrate(
       context.javaScriptContextHolder!!.get(),
-      context.jsCallInvokerHolder!!
+      resolveCallInvokerHolder(context)
     )
   }
 
+  private fun resolveCallInvokerHolder(context: ReactApplicationContext): CallInvokerHolder {
+    // RN 0.74+ exposes getJSCallInvokerHolder() on ReactContext directly.
+    // RN 0.73 only has it on CatalystInstance — use reflection to handle both.
+    val direct = context.javaClass.methods.firstOrNull { it.name == "getJSCallInvokerHolder" }
+    if (direct != null) return direct.invoke(context) as CallInvokerHolder
+    @Suppress("DEPRECATION")
+    val ci = checkNotNull(context.catalystInstance) { "No CatalystInstance" }
+    return ci.javaClass.methods.first { it.name == "getJSCallInvokerHolder" }.invoke(ci) as CallInvokerHolder
+  }
+
   override fun cleanupRustCrate(): Boolean {
     return nativeCleanupRustCrate(
       this.reactApplicationContext.javaScriptContextHolder!!.get()