@react-native-gpui/screens 0.0.0-stage → 4.28.0-alpha.0

package/desktop/Cargo.toml

@@ -0,0 +1,54 @@
+[package]
+name = "rn-gpui-screens"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+react-native-gpui = "0.1"
+rn-gpui-sys = "0.1"
+gpui = "0.2"
+serde_json = "1"
+log = "0.4"
+
+[dev-dependencies]
+# `TestNode` and `TreeView::for_test` are gated behind `test-driver`, and a
+# dependency cannot enable another package's feature. It is a dev-dependency
+# rather than a normal one so a build of the module never pays for it, and it only
+# becomes usable because this crate is its own workspace root below.
+react-native-gpui = { version = "0.1", features = ["test-driver"] }
+
+# Its own workspace root, deliberately. Cargo refuses to test a package that has
+# dev-dependencies unless it is a workspace member, and core's workspace cannot
+# hold it: a module resolves core by version and must not be a member of the
+# checkout's workspace. A root with itself as the only member satisfies the rule
+# without making the module part of anything else.
+[workspace]
+
+# The checkout's shared dev profile (see core's `ReactGpui/Cargo.toml`): line tables
+# only, no debug info for dependencies, which are optimized. Every workspace root
+# builds into the one root `target/`, so a matching profile is also what lets them
+# reuse each other's dependency builds instead of storing one copy each.
+[profile.dev]
+debug = "line-tables-only"
+split-debuginfo = "packed"
+
+[profile.dev.package."*"]
+debug = false
+opt-level = 3
+
+[profile.dev.package.rn-gpui-sys]
+opt-level = 0
+
+# This block has to live here because Cargo honours `[patch.crates-io]` only at a
+# workspace root, and this crate is one. `npm run test:rust` regenerates it from
+# core's manifest before running these tests and fails if it changed, so the gpui
+# revision is never written down by hand — commit whatever the run rewrites.
+[patch.crates-io]
+# Managed by @react-native-gpui/cli autolink; do not edit between these markers.
+react-native-gpui = { path = "../../../packages/core/ReactGpui/rn-gpui" }
+rn-gpui-sys = { path = "../../../packages/core/ReactGpui/rn-gpui-sys" }
+rn-gpui-module = { path = "../../../packages/core/ReactGpui/rn-gpui-module" }
+rn-gpui-module-build = { path = "../../../packages/core/ReactGpui/rn-gpui-module-build" }
+gpui = { git = "https://github.com/streetwriters/gpui-fast", rev = "48ef745" }
+gpui_platform = { git = "https://github.com/streetwriters/gpui-fast", rev = "48ef745" }
+# End managed by autolink.

package/desktop/build.rs

@@ -0,0 +1,38 @@
+//! Puts the C++ runtime's shared libraries on this crate's test binary rpath.
+//!
+//! `rn-gpui-screens`'s tests build gpui trees, which link `libjsi.dylib` and the
+//! rest of the Node-API runtime. Core's `build.rs` emits
+//! `cargo:rustc-link-arg=-Wl,-rpath,<dir>` for its own binary — the app — and that
+//! flag is not inherited by a dependency's test binary, so the test process
+//! aborted in dyld with `Library not loaded: @rpath/libjsi.dylib` before running a
+//! single test.
+//!
+//! Core exports the directories it was given as `DEP_RN_GPUI_CORE_RPATHS`, which
+//! is the same variable core's own `build.rs` reads. Re-emitting it here scopes
+//! the flag to this crate's test binary, since `cargo:rustc-link-arg` without a
+//! target suffix applies to the crate's own targets and not to the app that
+//! depends on it.
+
+fn main() {
+    println!("cargo:rerun-if-env-changed=DEP_RN_GPUI_CORE_RPATHS");
+    println!("cargo:rerun-if-changed=build.rs");
+
+    let Ok(dirs) = std::env::var("DEP_RN_GPUI_CORE_RPATHS") else {
+        return;
+    };
+    let dirs = dirs
+        .split('|')
+        .filter(|dir| !dir.is_empty())
+        .collect::<Vec<_>>();
+    if dirs.is_empty() {
+        return;
+    }
+    // MSVC and MinGW have no rpath, and the flag is rejected outright; Windows
+    // finds the DLLs through PATH, which the test runner already arranges.
+    if std::env::var("CARGO_CFG_TARGET_OS").as_deref() == Ok("windows") {
+        return;
+    }
+    for dir in dirs {
+        println!("cargo:rustc-link-arg=-Wl,-rpath,{dir}");
+    }
+}

package/desktop/cpp/GpuiScreensModule.cpp

@@ -0,0 +1,77 @@
+
+#include "GpuiModules.h"
+
+#include <folly/json.h>
+#include <react/renderer/components/rnscreens/Props.h>
+
+#include <string>
+
+namespace rngpui {
+namespace {
+
+using namespace facebook::react;
+
+std::string screenPropsJson(
+    const std::string& /*componentName*/,
+    const ShadowView& view) {
+  if (!view.props) {
+    return std::string("{}");
+  }
+  auto props = std::dynamic_pointer_cast<const RNSScreenProps>(view.props);
+  if (!props) {
+    return std::string("{}");
+  }
+  folly::dynamic object = folly::dynamic::object;
+  object["activityState"] = props->activityState;
+  object["stackAnimation"] = toString(props->stackAnimation);
+  object["stackPresentation"] = toString(props->stackPresentation);
+  return folly::toJson(object);
+}
+
+std::string headerConfigPropsJson(
+    const std::string& /*componentName*/,
+    const ShadowView& view) {
+  if (!view.props) {
+    return std::string("{}");
+  }
+  auto props = std::dynamic_pointer_cast<const RNSScreenStackHeaderConfigProps>(
+      view.props);
+  if (!props) {
+    return std::string("{}");
+  }
+  folly::dynamic object = folly::dynamic::object;
+  object["title"] = props->title;
+  object["backgroundColor"] = argb(props->backgroundColor);
+  object["titleColor"] = argb(props->titleColor);
+  object["tintColor"] = argb(props->color);
+  object["hidden"] = props->hidden;
+  object["hideBackButton"] = props->hideBackButton;
+  return folly::toJson(object);
+}
+
+std::string headerSubviewPropsJson(
+    const std::string& /*componentName*/,
+    const ShadowView& view) {
+  if (!view.props) {
+    return std::string("{}");
+  }
+  auto props =
+      std::dynamic_pointer_cast<const RNSScreenStackHeaderSubviewProps>(
+          view.props);
+  if (!props) {
+    return std::string("{}");
+  }
+  folly::dynamic object = folly::dynamic::object;
+  object["type"] = toString(props->type);
+  return folly::toJson(object);
+}
+
+} // namespace
+
+void rn_gpui_install_screens_module() {
+  registerComponentProps("RNSScreen", screenPropsJson);
+  registerComponentProps("RNSScreenStackHeaderConfig", headerConfigPropsJson);
+  registerComponentProps("RNSScreenStackHeaderSubview", headerSubviewPropsJson);
+}
+
+} // namespace rngpui

package/desktop/src/lib.rs

@@ -0,0 +1,29 @@
+//! The screens module.
+//!
+//! Everything react-native-screens needs lives here: its props extraction in
+//! `cpp/`, and its layout, painting and lifecycle in the modules below. Core is
+//! told only what any library can say — a component name, a props reader, and a
+//! set of generic hooks.
+pub mod lifecycle;
+pub mod props;
+pub mod render;
+pub mod stack;
+pub mod state;
+pub mod transition;
+pub mod unsupported;
+
+/// Registers this module's renderers and observer.
+///
+/// Autolink calls this from `ensure_linked()` while `main` starts, before any
+/// `gpui::App` exists, so nothing here may touch the app.
+pub fn rn_gpui_register() {
+    react_native_gpui::extensions::register_store_observer(std::sync::Arc::new(
+        stack::StackObserver,
+    ));
+    for (component, build) in render::RENDERED_COMPONENTS {
+        react_native_gpui::extensions::register_component_renderer(
+            *component,
+            std::sync::Arc::from(build()),
+        );
+    }
+}

package/desktop/src/lifecycle.rs

@@ -0,0 +1,80 @@
+//! The lifecycle events a stack sends to its screens as they appear and leave.
+//!
+//! React Native exposes these as `topWillAppear`, `topAppear`,
+//! `topWillDisappear` and `topDisappear`, in that order around a transition.
+use gpui::App;
+use react_native_gpui::extensions::StoreHandle;
+
+/// The events an activity-state change produces, in the order they fire.
+pub fn lifecycle_events(previous: f32, next: f32) -> &'static [&'static str] {
+    match (previous < 1.0, previous >= 2.0, next < 1.0, next >= 2.0) {
+        (true, _, false, true) => &["topWillAppear", "topAppear"],
+        (true, _, false, false) => &["topWillAppear"],
+        (_, true, false, false) => &["topWillDisappear"],
+        (false, false, true, _) => &["topDisappear"],
+        (false, true, true, _) => &["topWillDisappear", "topDisappear"],
+        (false, false, false, true) => &["topAppear"],
+        _ => &[],
+    }
+}
+
+/// Sends the "will" half of a transition: the outgoing screen then the incoming.
+pub fn dispatch_will(
+    handle: &StoreHandle,
+    outgoing: Option<i32>,
+    incoming: Option<i32>,
+    cx: &mut App,
+) {
+    for (tag, event) in [
+        outgoing.map(|tag| (tag, "topWillDisappear")),
+        incoming.map(|tag| (tag, "topWillAppear")),
+    ]
+    .into_iter()
+    .flatten()
+    {
+        log::info!("[screens] tag={tag} lifecycle={event}");
+        handle.dispatch_event(tag, event, &serde_json::json!({}), cx);
+    }
+}
+
+/// Sends the "did" half: the outgoing screen then the incoming, and wakes
+/// Fabric so the callbacks arrive before a later pop unmounts them.
+pub fn dispatch_did(
+    handle: &StoreHandle,
+    outgoing: Option<i32>,
+    incoming: Option<i32>,
+    cx: &mut App,
+) {
+    for (tag, event) in [
+        outgoing.map(|tag| (tag, "topDisappear")),
+        incoming.map(|tag| (tag, "topAppear")),
+    ]
+    .into_iter()
+    .flatten()
+    {
+        log::info!("[screens] tag={tag} lifecycle={event}");
+        handle.dispatch_event(tag, event, &serde_json::json!({}), cx);
+    }
+    // A timer can complete after the display-frame chain has gone idle, so the
+    // JavaScript that handles these events needs a render to arrive in.
+    handle.wake(cx);
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn activity_state_edges_emit_lifecycle_in_order() {
+        assert_eq!(lifecycle_events(0.0, 1.0), &["topWillAppear"]);
+        assert_eq!(lifecycle_events(1.0, 2.0), &["topAppear"]);
+        assert_eq!(lifecycle_events(2.0, 1.0), &["topWillDisappear"]);
+        assert_eq!(lifecycle_events(1.0, 0.0), &["topDisappear"]);
+        assert_eq!(lifecycle_events(0.0, 2.0), &["topWillAppear", "topAppear"]);
+        assert_eq!(
+            lifecycle_events(2.0, 0.0),
+            &["topWillDisappear", "topDisappear"]
+        );
+        assert!(lifecycle_events(1.0, 1.0).is_empty());
+    }
+}

package/desktop/src/props.rs

@@ -0,0 +1,177 @@
+//! Typed readers over the JSON this module's C++ half produced.
+//!
+//! A missing key reads as today's zero value, so a component that has not been
+//! given the prop yet behaves the way it did before it arrived.
+use react_native_gpui::extensions::ComponentNode;
+
+/// A number, or 0 when absent.
+fn number(node: &ComponentNode, key: &str) -> f64 {
+    node.props
+        .get(key)
+        .and_then(|value| value.as_f64())
+        .unwrap_or(0.0)
+}
+
+/// A number as `f32`, or 0 when absent.
+fn number_f32(node: &ComponentNode, key: &str) -> f32 {
+    number(node, key) as f32
+}
+
+/// A string, borrowed from the props.
+fn string<'a>(node: &'a ComponentNode, key: &str) -> &'a str {
+    node.props
+        .get(key)
+        .and_then(|value| value.as_str())
+        .unwrap_or("")
+}
+
+/// A boolean, false when absent.
+fn boolean(node: &ComponentNode, key: &str) -> bool {
+    node.props
+        .get(key)
+        .and_then(|value| value.as_bool())
+        .unwrap_or(false)
+}
+
+/// A colour as 0xAARRGGBB, 0 when unset.
+fn color(node: &ComponentNode, key: &str) -> u32 {
+    number(node, key) as u32
+}
+
+/// An `RNSScreen`'s activity state. 0 is detached, 1 is transitioning, 2 is
+/// fully on screen.
+pub fn activity_state(node: &ComponentNode) -> f32 {
+    number_f32(node, "activityState")
+}
+
+/// An `RNSScreen`'s `stackAnimation`.
+pub fn stack_animation(node: &ComponentNode) -> &str {
+    string(node, "stackAnimation")
+}
+
+/// An `RNSScreen`'s `stackPresentation`.
+pub fn stack_presentation(node: &ComponentNode) -> &str {
+    string(node, "stackPresentation")
+}
+
+/// Whether a presentation paints its own card over the one underneath.
+pub fn is_modal_presentation(node: &ComponentNode) -> bool {
+    matches!(
+        stack_presentation(node),
+        "modal" | "transparentModal" | "containedModal" | "formSheet"
+    )
+}
+
+/// Whether that card lets the screen underneath show through.
+pub fn is_transparent_presentation(node: &ComponentNode) -> bool {
+    stack_presentation(node) == "transparentModal"
+}
+
+/// A header config's title.
+pub fn header_title(node: &ComponentNode) -> &str {
+    string(node, "title")
+}
+
+/// A header config's background colour.
+pub fn header_background_color(node: &ComponentNode) -> u32 {
+    color(node, "backgroundColor")
+}
+
+/// A header config's title colour.
+pub fn header_title_color(node: &ComponentNode) -> u32 {
+    color(node, "titleColor")
+}
+
+/// A header config's tint colour, used for the back button.
+pub fn header_tint_color(node: &ComponentNode) -> u32 {
+    color(node, "tintColor")
+}
+
+/// Whether a header config hides the whole bar.
+pub fn header_hidden(node: &ComponentNode) -> bool {
+    boolean(node, "hidden")
+}
+
+/// Whether a header config hides only the back button.
+pub fn header_hide_back(node: &ComponentNode) -> bool {
+    boolean(node, "hideBackButton")
+}
+
+/// A header subview's placement: `left`, `right`, `center`, `title` or a Yoga x.
+pub fn subview_type(node: &ComponentNode) -> &str {
+    string(node, "type")
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use std::sync::Arc;
+
+    fn node(json: serde_json::Value) -> ComponentNode {
+        ComponentNode {
+            component: "RNSScreen".to_string(),
+            tag: 1,
+            frame: rn_gpui_sys::ffi::RectF::default(),
+            scale: (1.0, 1.0),
+            props: Arc::new(json),
+            parent: None,
+            children: Vec::new(),
+        }
+    }
+
+    #[test]
+    fn a_missing_key_reads_as_the_zero_value() {
+        let empty = node(serde_json::json!({}));
+        assert_eq!(activity_state(&empty), 0.0);
+        assert_eq!(stack_animation(&empty), "");
+        assert_eq!(stack_presentation(&empty), "");
+        assert_eq!(header_title(&empty), "");
+        assert_eq!(header_background_color(&empty), 0);
+        assert!(!header_hidden(&empty));
+        assert!(!header_hide_back(&empty));
+        assert!(!is_modal_presentation(&empty));
+    }
+
+    #[test]
+    fn reads_the_fields_the_props_half_writes() {
+        let screen = node(serde_json::json!({
+            "activityState": 2,
+            "stackAnimation": "slide_from_right",
+            "stackPresentation": "transparentModal",
+        }));
+        assert_eq!(activity_state(&screen), 2.0);
+        assert_eq!(stack_animation(&screen), "slide_from_right");
+        assert!(is_modal_presentation(&screen));
+        assert!(is_transparent_presentation(&screen));
+
+        let header = node(serde_json::json!({
+            "title": "Home",
+            "backgroundColor": 0xff112233u32,
+            "titleColor": 0xffaabbccu32,
+            "tintColor": 0xff445566u32,
+            "hidden": true,
+            "hideBackButton": true,
+        }));
+        assert_eq!(header_title(&header), "Home");
+        assert_eq!(header_background_color(&header), 0xff112233);
+        assert_eq!(header_title_color(&header), 0xffaabbcc);
+        assert_eq!(header_tint_color(&header), 0xff445566);
+        assert!(header_hidden(&header));
+        assert!(header_hide_back(&header));
+
+        let subview = node(serde_json::json!({"type": "right"}));
+        assert_eq!(subview_type(&subview), "right");
+    }
+
+    #[test]
+    fn only_the_modal_presentations_count_as_modal() {
+        for presentation in ["modal", "transparentModal", "containedModal", "formSheet"] {
+            let node = node(serde_json::json!({"stackPresentation": presentation}));
+            assert!(is_modal_presentation(&node), "{presentation}");
+        }
+        for presentation in ["push", "card", ""] {
+            let node = node(serde_json::json!({"stackPresentation": presentation}));
+            assert!(!is_modal_presentation(&node), "{presentation}");
+        }
+    }
+}