@granite-js/micro-frontend 2.0.0

package/android/src/test/java/run/granite/microfrontend/GraniteMicroFrontendRuntimeEventRouterTest.kt

@@ -0,0 +1,216 @@
+package run.granite.microfrontend
+
+import org.junit.Assert.assertEquals
+import org.junit.Assert.assertFalse
+import org.junit.Assert.assertThrows
+import org.junit.Assert.assertTrue
+import org.junit.Test
+import java.util.Collections
+import java.util.concurrent.CountDownLatch
+import java.util.concurrent.TimeUnit
+import kotlin.concurrent.thread
+
+class GraniteMicroFrontendRuntimeEventRouterTest {
+    @Test
+    fun `another runtime starting event delivery does not replace the active runtime`() {
+        val router = GraniteMicroFrontendRuntimeEventRouter()
+        val activeRuntime = RecordingEventTarget()
+        val unrelatedRuntime = RecordingEventTarget()
+        val event = GraniteMicroFrontendEvent.PreloadApp("shopping")
+        router.attach(activeRuntime)
+        router.startEventDelivery(activeRuntime)
+
+        router.attach(unrelatedRuntime)
+        router.startEventDelivery(unrelatedRuntime)
+        router.emit(event)
+
+        assertEquals(listOf(event), activeRuntime.events)
+        assertEquals(emptyList<GraniteMicroFrontendEvent>(), unrelatedRuntime.events)
+    }
+
+    @Test
+    fun `events queued before delivery starts are sent to the runtime that starts delivery`() {
+        val router = GraniteMicroFrontendRuntimeEventRouter()
+        val runtime = RecordingEventTarget()
+        val event = GraniteMicroFrontendEvent.PreloadApp("shopping")
+        router.attach(runtime)
+        router.emit(event)
+
+        router.startEventDelivery(runtime)
+
+        assertEquals(listOf(event), runtime.events)
+    }
+
+    @Test
+    fun `new events cannot overtake pending events while delivery starts`() {
+        val events = Collections.synchronizedList(mutableListOf<GraniteMicroFrontendEvent>())
+        val pendingDeliveryStarted = CountDownLatch(1)
+        val continuePendingDelivery = CountDownLatch(1)
+        val router = GraniteMicroFrontendRuntimeEventRouter()
+        val target = object : GraniteMicroFrontendRuntimeEventTarget {
+            override fun emit(event: GraniteMicroFrontendEvent, onDelivered: () -> Unit): Boolean {
+                if (event is GraniteMicroFrontendEvent.OpenApp) {
+                    pendingDeliveryStarted.countDown()
+                    assertTrue(continuePendingDelivery.await(5, TimeUnit.SECONDS))
+                }
+                events.add(event)
+                onDelivered()
+                return true
+            }
+        }
+        val open = GraniteMicroFrontendEvent.OpenApp("session-1", "shopping", "granite://shopping")
+        val close = GraniteMicroFrontendEvent.CloseApp("session-1")
+
+        router.emit(open)
+        router.attach(target)
+        val startThread = thread { router.startEventDelivery(target) }
+        assertTrue(pendingDeliveryStarted.await(5, TimeUnit.SECONDS))
+        val emitThread = thread { router.emit(close) }
+        emitThread.join(5_000)
+
+        assertFalse(emitThread.isAlive)
+        assertTrue(events.isEmpty())
+        continuePendingDelivery.countDown()
+        startThread.join(5_000)
+
+        assertFalse(startThread.isAlive)
+        assertEquals(listOf(open, close), events)
+    }
+
+    @Test
+    fun `failed event delivery is retried before newer events`() {
+        val events = mutableListOf<GraniteMicroFrontendEvent>()
+        val router = GraniteMicroFrontendRuntimeEventRouter()
+        val open = GraniteMicroFrontendEvent.OpenApp("session-1", "shopping", "granite://shopping")
+        val close = GraniteMicroFrontendEvent.CloseApp("session-1")
+        var shouldFail = true
+        val target = object : GraniteMicroFrontendRuntimeEventTarget {
+            override fun emit(event: GraniteMicroFrontendEvent, onDelivered: () -> Unit): Boolean {
+                if (shouldFail) {
+                    shouldFail = false
+                    throw IllegalStateException("delivery failed")
+                }
+                events.add(event)
+                onDelivered()
+                return true
+            }
+        }
+        router.attach(target)
+        router.startEventDelivery(target)
+
+        assertThrows(IllegalStateException::class.java) { router.emit(open) }
+        router.emit(close)
+
+        assertEquals(listOf(open, close), events)
+    }
+
+    @Test
+    fun `replacement runtime resumes a drain owned by a detached runtime`() {
+        val firstEvents = mutableListOf<GraniteMicroFrontendEvent>()
+        val secondEvents = mutableListOf<GraniteMicroFrontendEvent>()
+        val firstDeliveryStarted = CountDownLatch(1)
+        val continueFirstDelivery = CountDownLatch(1)
+        val router = GraniteMicroFrontendRuntimeEventRouter()
+        val firstTarget = object : GraniteMicroFrontendRuntimeEventTarget {
+            override fun emit(event: GraniteMicroFrontendEvent, onDelivered: () -> Unit): Boolean {
+                firstDeliveryStarted.countDown()
+                assertTrue(continueFirstDelivery.await(5, TimeUnit.SECONDS))
+                firstEvents.add(event)
+                onDelivered()
+                return true
+            }
+        }
+        val secondTarget = object : GraniteMicroFrontendRuntimeEventTarget {
+            override fun emit(event: GraniteMicroFrontendEvent, onDelivered: () -> Unit): Boolean {
+                secondEvents.add(event)
+                onDelivered()
+                return true
+            }
+        }
+        val open = GraniteMicroFrontendEvent.OpenApp("session-1", "shopping", "granite://shopping")
+        val close = GraniteMicroFrontendEvent.CloseApp("session-1")
+        router.attach(firstTarget)
+        router.startEventDelivery(firstTarget)
+
+        val firstEmitThread = thread { router.emit(open) }
+        assertTrue(firstDeliveryStarted.await(5, TimeUnit.SECONDS))
+        router.detach(firstTarget)
+        router.attach(secondTarget)
+        router.startEventDelivery(secondTarget)
+        router.emit(close)
+        continueFirstDelivery.countDown()
+        firstEmitThread.join(5_000)
+
+        assertFalse(firstEmitThread.isAlive)
+        assertEquals(listOf(open), firstEvents)
+        assertEquals(listOf(close), secondEvents)
+    }
+
+    @Test
+    fun `event rejected by an unavailable runtime is delivered to its replacement`() {
+        val events = mutableListOf<GraniteMicroFrontendEvent>()
+        val router = GraniteMicroFrontendRuntimeEventRouter()
+        val unavailableRuntime = object : GraniteMicroFrontendRuntimeEventTarget {
+            override fun emit(event: GraniteMicroFrontendEvent, onDelivered: () -> Unit): Boolean = false
+        }
+        val replacementRuntime = RecordingEventTarget()
+        val open = GraniteMicroFrontendEvent.OpenApp("session-1", "shopping", "granite://shopping")
+        router.attach(unavailableRuntime)
+        router.startEventDelivery(unavailableRuntime)
+
+        router.emit(open)
+        router.detach(unavailableRuntime)
+        router.attach(replacementRuntime)
+        router.startEventDelivery(replacementRuntime)
+
+        assertEquals(listOf(open), replacementRuntime.events)
+    }
+
+    @Test
+    fun `event accepted but never acknowledged is redelivered to the replacement runtime`() {
+        val acceptedEvents = mutableListOf<GraniteMicroFrontendEvent>()
+        val router = GraniteMicroFrontendRuntimeEventRouter()
+        val destroyedRuntime = object : GraniteMicroFrontendRuntimeEventTarget {
+            override fun emit(event: GraniteMicroFrontendEvent, onDelivered: () -> Unit): Boolean {
+                acceptedEvents.add(event)
+                return true
+            }
+        }
+        val replacementRuntime = RecordingEventTarget()
+        val open = GraniteMicroFrontendEvent.OpenApp("session-1", "shopping", "granite://shopping")
+        router.attach(destroyedRuntime)
+        router.startEventDelivery(destroyedRuntime)
+
+        router.emit(open)
+        router.detach(destroyedRuntime)
+        router.attach(replacementRuntime)
+        router.startEventDelivery(replacementRuntime)
+
+        assertEquals(listOf(open), acceptedEvents)
+        assertEquals(listOf(open), replacementRuntime.events)
+    }
+
+    @Test
+    fun `events beyond the pending limit are dropped while no runtime consumes them`() {
+        val router = GraniteMicroFrontendRuntimeEventRouter()
+        val runtime = RecordingEventTarget()
+        val limit = GraniteMicroFrontendRuntimeEventRouter.MAX_PENDING_EVENTS
+        val events = (1..limit + 8).map { GraniteMicroFrontendEvent.PreloadApp("app-$it") }
+
+        events.forEach(router::emit)
+        router.attach(runtime)
+        router.startEventDelivery(runtime)
+
+        assertEquals(events.take(limit), runtime.events)
+    }
+}
+
+private class RecordingEventTarget : GraniteMicroFrontendRuntimeEventTarget {
+    val events = mutableListOf<GraniteMicroFrontendEvent>()
+
+    override fun emit(event: GraniteMicroFrontendEvent, onDelivered: () -> Unit): Boolean {
+        events.add(event)
+        onDelivered()
+        return true
+    }
+}

package/android/src/test/java/run/granite/microfrontend/GraniteMicroFrontendSessionStoreTest.kt

@@ -0,0 +1,190 @@
+package run.granite.microfrontend
+
+import org.junit.Assert.assertEquals
+import org.junit.Assert.assertFalse
+import org.junit.Assert.assertTrue
+import org.junit.Test
+import java.util.Collections
+import java.util.concurrent.CountDownLatch
+import java.util.concurrent.TimeUnit
+import java.util.concurrent.atomic.AtomicBoolean
+import kotlin.concurrent.thread
+
+class GraniteMicroFrontendSessionStoreTest {
+    @Test
+    fun `session emits open visible close in native lifecycle order`() {
+        val events = mutableListOf<GraniteMicroFrontendEvent>()
+        val store = GraniteMicroFrontendSessionStore(events::add)
+        val registration = store.registerSession("session-1")
+
+        registration.openApp("shopping", "granite://shopping")
+        assertTrue(registration.setVisible(true))
+        assertTrue(registration.closeApp())
+        registration.close()
+
+        assertEquals(
+            listOf(
+                GraniteMicroFrontendEvent.OpenApp("session-1", "shopping", "granite://shopping"),
+                GraniteMicroFrontendEvent.SessionVisibilityChanged("session-1", true),
+                GraniteMicroFrontendEvent.CloseApp("session-1"),
+            ),
+            events,
+        )
+    }
+
+    @Test
+    fun `open app is emitted only once per session`() {
+        val events = mutableListOf<GraniteMicroFrontendEvent>()
+        val store = GraniteMicroFrontendSessionStore(events::add)
+        val registration = store.registerSession("session-1")
+
+        assertTrue(registration.openApp("shopping", "granite://shopping"))
+        assertFalse(registration.openApp("shopping", "granite://shopping"))
+
+        assertEquals(
+            listOf(GraniteMicroFrontendEvent.OpenApp("session-1", "shopping", "granite://shopping")),
+            events,
+        )
+    }
+
+    @Test
+    fun `session visibility updates are idempotent per session`() {
+        val events = mutableListOf<GraniteMicroFrontendEvent>()
+        val store = GraniteMicroFrontendSessionStore(events::add)
+        val registration = store.registerSession("session-1")
+
+        assertTrue(registration.openApp("shopping", "granite://shopping"))
+        assertTrue(registration.setVisible(true))
+        assertFalse(registration.setVisible(true))
+        assertTrue(registration.setVisible(false))
+        assertFalse(registration.setVisible(false))
+
+        assertEquals(
+            listOf(
+                GraniteMicroFrontendEvent.OpenApp("session-1", "shopping", "granite://shopping"),
+                GraniteMicroFrontendEvent.SessionVisibilityChanged("session-1", true),
+                GraniteMicroFrontendEvent.SessionVisibilityChanged("session-1", false),
+            ),
+            events,
+        )
+    }
+
+    @Test
+    fun `visibility deduplication is isolated per session`() {
+        val events = mutableListOf<GraniteMicroFrontendEvent>()
+        val store = GraniteMicroFrontendSessionStore(events::add)
+        val first = store.registerSession("session-1")
+        val second = store.registerSession("session-2")
+
+        assertTrue(first.openApp("shopping", "granite://shopping"))
+        assertTrue(second.openApp("payment", "granite://payment"))
+        assertTrue(first.setVisible(true))
+        assertTrue(second.setVisible(true))
+        assertFalse(first.setVisible(true))
+        assertFalse(second.setVisible(true))
+
+        assertEquals(
+            listOf(
+                GraniteMicroFrontendEvent.OpenApp("session-1", "shopping", "granite://shopping"),
+                GraniteMicroFrontendEvent.OpenApp("session-2", "payment", "granite://payment"),
+                GraniteMicroFrontendEvent.SessionVisibilityChanged("session-1", true),
+                GraniteMicroFrontendEvent.SessionVisibilityChanged("session-2", true),
+            ),
+            events,
+        )
+    }
+
+    @Test
+    fun `concurrent close cannot overtake open event delivery`() {
+        val events = Collections.synchronizedList(mutableListOf<GraniteMicroFrontendEvent>())
+        val openDeliveryStarted = CountDownLatch(1)
+        val continueOpenDelivery = CountDownLatch(1)
+        val store = GraniteMicroFrontendSessionStore { event ->
+            if (event is GraniteMicroFrontendEvent.OpenApp) {
+                openDeliveryStarted.countDown()
+                assertTrue(continueOpenDelivery.await(5, TimeUnit.SECONDS))
+            }
+            events.add(event)
+        }
+        val registration = store.registerSession("session-1")
+        val openResult = AtomicBoolean()
+        val closeResult = AtomicBoolean()
+        val closeStarted = CountDownLatch(1)
+        val closeCompleted = CountDownLatch(1)
+
+        val openThread = thread {
+            openResult.set(registration.openApp("shopping", "granite://shopping"))
+        }
+        assertTrue(openDeliveryStarted.await(5, TimeUnit.SECONDS))
+        val closeThread = thread {
+            closeStarted.countDown()
+            closeResult.set(registration.closeApp())
+            closeCompleted.countDown()
+        }
+        assertTrue(closeStarted.await(5, TimeUnit.SECONDS))
+        val blockedDeadline = System.nanoTime() + TimeUnit.SECONDS.toNanos(5)
+        while (closeThread.isAlive && closeThread.state != Thread.State.BLOCKED && System.nanoTime() < blockedDeadline) {
+            Thread.yield()
+        }
+        assertEquals(Thread.State.BLOCKED, closeThread.state)
+
+        continueOpenDelivery.countDown()
+        openThread.join(5_000)
+        closeThread.join(5_000)
+
+        assertFalse(openThread.isAlive)
+        assertFalse(closeThread.isAlive)
+        assertTrue(openResult.get())
+        assertTrue(closeResult.get())
+        assertEquals(
+            listOf(
+                GraniteMicroFrontendEvent.OpenApp("session-1", "shopping", "granite://shopping"),
+                GraniteMicroFrontendEvent.CloseApp("session-1"),
+            ),
+            events,
+        )
+    }
+
+    @Test
+    fun `visibility before open and after close is ignored`() {
+        val events = mutableListOf<GraniteMicroFrontendEvent>()
+        val store = GraniteMicroFrontendSessionStore(events::add)
+        val registration = store.registerSession("session-1")
+
+        assertFalse(registration.setVisible(true))
+        assertTrue(registration.openApp("shopping", "granite://shopping"))
+        assertTrue(registration.setVisible(true))
+        assertTrue(registration.closeApp())
+        assertFalse(registration.setVisible(false))
+
+        assertEquals(
+            listOf(
+                GraniteMicroFrontendEvent.OpenApp("session-1", "shopping", "granite://shopping"),
+                GraniteMicroFrontendEvent.SessionVisibilityChanged("session-1", true),
+                GraniteMicroFrontendEvent.CloseApp("session-1"),
+            ),
+            events,
+        )
+    }
+
+    @Test
+    fun `close app is emitted only once after open for actual teardown`() {
+        val events = mutableListOf<GraniteMicroFrontendEvent>()
+        val store = GraniteMicroFrontendSessionStore(events::add)
+        val registration = store.registerSession("session-1")
+
+        assertFalse(registration.closeApp())
+        assertTrue(registration.openApp("shopping", "granite://shopping"))
+        assertTrue(registration.closeApp())
+        assertFalse(registration.closeApp())
+        registration.close()
+
+        assertEquals(
+            listOf(
+                GraniteMicroFrontendEvent.OpenApp("session-1", "shopping", "granite://shopping"),
+                GraniteMicroFrontendEvent.CloseApp("session-1"),
+            ),
+            events,
+        )
+    }
+}

package/android/test-cpp.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+SOURCE_DIR="${SCRIPT_DIR}/src/test/cpp"
+BUILD_DIR="/tmp/granite-micro-frontend-test-build"
+CMAKE_BIN="${CMAKE_BIN:-cmake}"
+
+"${CMAKE_BIN}" -S "${SOURCE_DIR}" -B "${BUILD_DIR}" -DCMAKE_BUILD_TYPE=Release
+"${CMAKE_BIN}" --build "${BUILD_DIR}" --parallel 2
+"${CMAKE_BIN}" --build "${BUILD_DIR}" --target test

package/common/cpp/react/renderer/components/GraniteMicroFrontendRuntimeSpec/ComponentDescriptors.h

@@ -0,0 +1,24 @@
+#pragma once
+
+// This header intentionally shares its path with the codegen-generated
+// ComponentDescriptors.h and shadows it: common/cpp comes before the generated jni directory on
+// the include path. React Native's generated autolinking.cpp includes this path and then names
+// the descriptors listed in react-native.config.js, so the two custom descriptors below have to
+// be reachable through it. Renaming or removing this file breaks the consuming app's build with
+// "use of undeclared identifier 'PortalViewComponentDescriptor'".
+
+#include <react/renderer/components/GraniteMicroFrontendRuntimeSpec/ShadowNodes.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+
+#include <react/renderer/components/GraniteMicroFrontendRuntimeSpec/RNTPortalHostViewComponentDescriptor.h>
+#include <react/renderer/components/GraniteMicroFrontendRuntimeSpec/RNTPortalViewComponentDescriptor.h>
+
+#include <memory>
+
+namespace facebook::react {
+
+  void GraniteMicroFrontendRuntimeSpec_registerComponentDescriptorsFromCodegen(
+      std::shared_ptr<const ComponentDescriptorProviderRegistry> registry);
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/GraniteMicroFrontendRuntimeSpec/PortalShadowRegistry.cpp

@@ -0,0 +1,31 @@
+#include "PortalShadowRegistry.h"
+
+#include <string>
+
+namespace facebook::react {
+
+  PortalShadowRegistry &PortalShadowRegistry::getInstance() {
+    static PortalShadowRegistry instance;
+    return instance;
+  }
+
+  void PortalShadowRegistry::unregisterHost(const std::string &name) {
+    std::lock_guard<std::mutex> lock(mutex_);
+    hostSizes_.erase(name);
+  }
+
+  void PortalShadowRegistry::updateHostSize(const std::string &name, HostSize size) {
+    std::lock_guard<std::mutex> lock(mutex_);
+    hostSizes_[name] = size;
+  }
+
+  HostSize PortalShadowRegistry::getHostSize(const std::string &name) const {
+    std::lock_guard<std::mutex> lock(mutex_);
+    auto it = hostSizes_.find(name);
+    if (it != hostSizes_.end()) {
+      return it->second;
+    }
+    return HostSize{0, 0};
+  }
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/GraniteMicroFrontendRuntimeSpec/PortalShadowRegistry.h

@@ -0,0 +1,29 @@
+#pragma once
+
+#include <string>
+#include <unordered_map>
+#include <mutex>
+#include <memory>
+
+namespace facebook::react {
+
+  struct HostSize {
+    float width;
+    float height;
+  };
+
+  class PortalShadowRegistry {
+   public:
+    static PortalShadowRegistry &getInstance();
+
+    void unregisterHost(const std::string &name);
+    void updateHostSize(const std::string &name, HostSize size);
+    HostSize getHostSize(const std::string &name) const;
+
+   private:
+    PortalShadowRegistry() = default;
+    mutable std::mutex mutex_;
+    std::unordered_map<std::string, HostSize> hostSizes_;
+  };
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/GraniteMicroFrontendRuntimeSpec/RNTPortalHostViewComponentDescriptor.h

@@ -0,0 +1,22 @@
+#pragma once
+
+#include "RNTPortalHostViewShadowNode.h"
+#include "PortalShadowRegistry.h"
+
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/components/GraniteMicroFrontendRuntimeSpec/Props.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+namespace facebook::react {
+
+  class PortalHostViewComponentDescriptor final
+      : public ConcreteComponentDescriptor<PortalHostViewShadowNode> {
+   public:
+    using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+
+    void adopt(ShadowNode &shadowNode) const override {
+      ConcreteComponentDescriptor::adopt(shadowNode);
+    }
+  };
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/GraniteMicroFrontendRuntimeSpec/RNTPortalHostViewShadowNode.cpp

@@ -0,0 +1,7 @@
+#include "RNTPortalHostViewShadowNode.h"
+
+namespace facebook::react {
+
+  extern const char PortalHostViewComponentName[] = "PortalHostView";
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/GraniteMicroFrontendRuntimeSpec/RNTPortalHostViewShadowNode.h

@@ -0,0 +1,43 @@
+#pragma once
+
+#include "RNTPortalHostViewState.h"
+#include "PortalShadowRegistry.h"
+
+#include <react/renderer/components/GraniteMicroFrontendRuntimeSpec/EventEmitters.h>
+#include <react/renderer/components/GraniteMicroFrontendRuntimeSpec/Props.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutContext.h>
+#include <jsi/jsi.h>
+
+namespace facebook::react {
+
+  JSI_EXPORT extern const char PortalHostViewComponentName[];
+
+  /*
+   * `ShadowNode` for <PortalHostView> component.
+   */
+  class PortalHostViewShadowNode : public ConcreteViewShadowNode<
+                                       PortalHostViewComponentName,
+                                       PortalHostViewProps,
+                                       PortalHostViewEventEmitter,
+                                       PortalHostViewState> {
+   public:
+    using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+    void layout(LayoutContext layoutContext) override {
+      ConcreteViewShadowNode::layout(layoutContext);
+
+      // After layout is complete, update the size in the registry
+      auto &props = static_cast<const PortalHostViewProps &>(*getProps());
+      if (!props.name.empty()) {
+        auto layoutMetrics = getLayoutMetrics();
+        PortalShadowRegistry::getInstance().updateHostSize(
+            props.name,
+            HostSize{
+                static_cast<float>(layoutMetrics.frame.size.width),
+                static_cast<float>(layoutMetrics.frame.size.height)});
+      }
+    }
+  };
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/GraniteMicroFrontendRuntimeSpec/RNTPortalHostViewState.h

@@ -0,0 +1,21 @@
+#pragma once
+
+#ifdef ANDROID
+#include <folly/dynamic.h>
+#endif
+
+namespace facebook::react {
+
+  class PortalHostViewState {
+   public:
+    PortalHostViewState() = default;
+
+#ifdef ANDROID
+    PortalHostViewState(PortalHostViewState const &previousState, folly::dynamic data) {}
+    folly::dynamic getDynamic() const {
+      return {};
+    }
+#endif
+  };
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/GraniteMicroFrontendRuntimeSpec/RNTPortalViewComponentDescriptor.h

@@ -0,0 +1,54 @@
+#pragma once
+
+#include "RNTPortalViewShadowNode.h"
+#include "PortalShadowRegistry.h"
+
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/components/GraniteMicroFrontendRuntimeSpec/Props.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include <react/renderer/components/view/YogaLayoutableShadowNode.h>
+
+namespace facebook::react {
+
+  class PortalViewComponentDescriptor final
+      : public ConcreteComponentDescriptor<PortalViewShadowNode> {
+   public:
+    using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+
+    void adopt(ShadowNode &shadowNode) const override {
+      react_native_assert(dynamic_cast<PortalViewShadowNode *>(&shadowNode));
+
+      auto &portalViewShadowNode = static_cast<PortalViewShadowNode &>(shadowNode);
+      auto &props = static_cast<const PortalViewProps &>(*portalViewShadowNode.getProps());
+
+      // If this portal is teleported to a host, apply the host's layout constraints
+      if (!props.hostName.empty()) {
+        auto &yogaPortal = static_cast<YogaLayoutableShadowNode &>(portalViewShadowNode);
+
+        // Set position to absolute because:
+        // - when the view is teleported, we need to "free" its original space
+        // - we need to stretch the view beyond the parent layout constraints
+        yogaPortal.setPositionType(YGPositionTypeAbsolute);
+
+        const auto &stateData =
+            static_cast<const PortalViewShadowNode::ConcreteState &>(
+                *portalViewShadowNode.getState())
+                .getData();
+
+        // Native state tracks the destination host after it re-layouts (for
+        // example, on rotation). The registry is the initial-layout fallback.
+        HostSize hostSize{
+            static_cast<float>(stateData.hostWidth),
+            static_cast<float>(stateData.hostHeight)};
+        if (hostSize.width == 0 || hostSize.height == 0) {
+          hostSize = PortalShadowRegistry::getInstance().getHostSize(props.hostName);
+        }
+
+        portalViewShadowNode.setDimensionsFromHost(hostSize);
+      }
+
+      ConcreteComponentDescriptor::adopt(shadowNode);
+    }
+  };
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/GraniteMicroFrontendRuntimeSpec/RNTPortalViewShadowNode.cpp

@@ -0,0 +1,7 @@
+#include "RNTPortalViewShadowNode.h"
+
+namespace facebook::react {
+
+  extern const char PortalViewComponentName[] = "PortalView";
+
+} // namespace facebook::react