react_on_rails_pro 16.2.0.beta.12 → 16.2.0.beta.16

data/app/helpers/react_on_rails_pro_helper.rb

@@ -128,7 +128,11 @@ module ReactOnRailsProHelper
     # Because setting prerender to false is equivalent to calling react_component with prerender: false
     options[:prerender] = true
     options = options.merge(immediate_hydration: true) unless options.key?(:immediate_hydration)
-    run_stream_inside_fiber do
+
+    # Extract streaming-specific callback
+    on_complete = options.delete(:on_complete)
+
+    consumer_stream_async(on_complete: on_complete) do
       internal_stream_react_component(component_name, options)
     end
   end
@@ -185,7 +189,11 @@ module ReactOnRailsProHelper
     # rsc_payload_react_component doesn't have the prerender option
     # Because setting prerender to false will not do anything
     options[:prerender] = true
-    run_stream_inside_fiber do
+
+    # Extract streaming-specific callback
+    on_complete = options.delete(:on_complete)
+
+    consumer_stream_async(on_complete: on_complete) do
       internal_rsc_payload_react_component(component_name, options)
     end
   end
@@ -209,6 +217,63 @@ module ReactOnRailsProHelper
     end
   end
 
+  # Renders a React component asynchronously, returning an AsyncValue immediately.
+  # Multiple async_react_component calls will execute their HTTP rendering requests
+  # concurrently instead of sequentially.
+  #
+  # Requires the controller to include ReactOnRailsPro::AsyncRendering and call
+  # enable_async_react_rendering.
+  #
+  # @param component_name [String] Name of your registered component
+  # @param options [Hash] Same options as react_component
+  # @return [ReactOnRailsPro::AsyncValue] Call .value to get the rendered HTML
+  #
+  # @example
+  #   <% header = async_react_component("Header", props: @header_props) %>
+  #   <% sidebar = async_react_component("Sidebar", props: @sidebar_props) %>
+  #   <%= header.value %>
+  #   <%= sidebar.value %>
+  #
+  def async_react_component(component_name, options = {})
+    unless defined?(@react_on_rails_async_barrier) && @react_on_rails_async_barrier
+      raise ReactOnRailsPro::Error,
+            "async_react_component requires AsyncRendering concern. " \
+            "Include ReactOnRailsPro::AsyncRendering in your controller and call enable_async_react_rendering."
+    end
+
+    task = @react_on_rails_async_barrier.async do
+      react_component(component_name, options)
+    end
+
+    ReactOnRailsPro::AsyncValue.new(task: task)
+  end
+
+  # Renders a React component asynchronously with caching support.
+  # Cache lookup is synchronous - cache hits return immediately without async.
+  # Cache misses trigger async render and cache the result on completion.
+  #
+  # All the same options as cached_react_component apply:
+  # 1. You must pass the props as a block (evaluated only on cache miss)
+  # 2. Provide the cache_key option
+  # 3. Optionally provide :cache_options for Rails.cache (expires_in, etc.)
+  # 4. Provide :if or :unless for conditional caching
+  #
+  # @param component_name [String] Name of your registered component
+  # @param options [Hash] Options including cache_key and cache_options
+  # @yield Block that returns props (evaluated only on cache miss)
+  # @return [ReactOnRailsPro::AsyncValue, ReactOnRailsPro::ImmediateAsyncValue]
+  #
+  # @example
+  #   <% card = cached_async_react_component("ProductCard", cache_key: @product) { @product.to_props } %>
+  #   <%= card.value %>
+  #
+  def cached_async_react_component(component_name, raw_options = {}, &block)
+    ReactOnRailsPro::Utils.with_trace(component_name) do
+      check_caching_options!(raw_options, block)
+      fetch_async_react_component(component_name, raw_options, &block)
+    end
+  end
+
   if defined?(ScoutApm)
     include ScoutApm::Tracer
     instrument_method :cached_react_component, type: "ReactOnRails", name: "cached_react_component"
@@ -246,30 +311,29 @@ module ReactOnRailsProHelper
     load_pack_for_generated_component(component_name, render_options)
 
     initial_result, *rest_chunks = cached_chunks
-    hit_fiber = Fiber.new do
-      rest_chunks.each { |chunk| Fiber.yield(chunk) }
-      nil
+
+    # Enqueue remaining chunks asynchronously
+    @async_barrier.async do
+      rest_chunks.each { |chunk| @main_output_queue.enqueue(chunk) }
     end
-    @rorp_rendering_fibers << hit_fiber
+
+    # Return first chunk directly
     initial_result
   end
 
   def handle_stream_cache_miss(component_name, raw_options, auto_load_bundle, view_cache_key, &block)
-    # Kick off the normal streaming helper to get the initial result and the original fiber
-    initial_result = render_stream_component_with_props(component_name, raw_options, auto_load_bundle, &block)
-    original_fiber = @rorp_rendering_fibers.pop
-
-    buffered_chunks = [initial_result]
-    wrapper_fiber = Fiber.new do
-      while (chunk = original_fiber.resume)
-        buffered_chunks << chunk
-        Fiber.yield(chunk)
-      end
-      Rails.cache.write(view_cache_key, buffered_chunks, raw_options[:cache_options] || {})
-      nil
-    end
-    @rorp_rendering_fibers << wrapper_fiber
-    initial_result
+    cache_aware_options = raw_options.merge(
+      on_complete: lambda { |chunks|
+        Rails.cache.write(view_cache_key, chunks, raw_options[:cache_options] || {})
+      }
+    )
+
+    render_stream_component_with_props(
+      component_name,
+      cache_aware_options,
+      auto_load_bundle,
+      &block
+    )
   end
 
   def render_stream_component_with_props(component_name, raw_options, auto_load_bundle)
@@ -291,25 +355,117 @@ module ReactOnRailsProHelper
     raise ReactOnRailsPro::Error, "Option 'cache_key' is required for React on Rails caching"
   end
 
-  def run_stream_inside_fiber
-    if @rorp_rendering_fibers.nil?
+  # Async version of fetch_react_component. Handles cache lookup synchronously,
+  # returns ImmediateAsyncValue on hit, AsyncValue on miss.
+  def fetch_async_react_component(component_name, raw_options, &block)
+    unless defined?(@react_on_rails_async_barrier) && @react_on_rails_async_barrier
+      raise ReactOnRailsPro::Error,
+            "cached_async_react_component requires AsyncRendering concern. " \
+            "Include ReactOnRailsPro::AsyncRendering in your controller and call enable_async_react_rendering."
+    end
+
+    # Check conditional caching (:if / :unless options)
+    unless ReactOnRailsPro::Cache.use_cache?(raw_options)
+      return render_async_react_component_uncached(component_name, raw_options, &block)
+    end
+
+    cache_key = ReactOnRailsPro::Cache.react_component_cache_key(component_name, raw_options)
+    cache_options = raw_options[:cache_options] || {}
+    Rails.logger.debug { "React on Rails Pro async cache_key is #{cache_key.inspect}" }
+
+    # Synchronous cache lookup
+    cached_result = Rails.cache.read(cache_key, cache_options)
+    if cached_result
+      Rails.logger.debug { "React on Rails Pro async cache HIT for #{cache_key.inspect}" }
+      render_options = ReactOnRails::ReactComponent::RenderOptions.new(
+        react_component_name: component_name,
+        options: raw_options
+      )
+      load_pack_for_generated_component(component_name, render_options)
+      return ReactOnRailsPro::ImmediateAsyncValue.new(cached_result)
+    end
+
+    Rails.logger.debug { "React on Rails Pro async cache MISS for #{cache_key.inspect}" }
+    render_async_react_component_with_cache(component_name, raw_options, cache_key, cache_options, &block)
+  end
+
+  # Renders async without caching (when :if/:unless conditions disable cache)
+  def render_async_react_component_uncached(component_name, raw_options, &block)
+    options = prepare_async_render_options(raw_options, &block)
+
+    task = @react_on_rails_async_barrier.async do
+      react_component(component_name, options)
+    end
+
+    ReactOnRailsPro::AsyncValue.new(task: task)
+  end
+
+  # Renders async and writes to cache on completion
+  def render_async_react_component_with_cache(component_name, raw_options, cache_key, cache_options, &block)
+    options = prepare_async_render_options(raw_options, &block)
+
+    task = @react_on_rails_async_barrier.async do
+      result = react_component(component_name, options)
+      Rails.cache.write(cache_key, result, cache_options)
+      result
+    end
+
+    ReactOnRailsPro::AsyncValue.new(task: task)
+  end
+
+  def prepare_async_render_options(raw_options)
+    raw_options.merge(
+      props: yield,
+      skip_prerender_cache: true,
+      auto_load_bundle: ReactOnRails.configuration.auto_load_bundle || raw_options[:auto_load_bundle]
+    )
+  end
+
+  def consumer_stream_async(on_complete:)
+    require "async/variable"
+
+    if @async_barrier.nil?
       raise ReactOnRails::Error,
             "You must call stream_view_containing_react_components to render the view containing the react component"
     end
 
-    rendering_fiber = Fiber.new do
+    # Create a variable to hold the first chunk for synchronous return
+    first_chunk_var = Async::Variable.new
+    all_chunks = [] if on_complete # Only collect if callback provided
+
+    # Start an async task on the barrier to stream all chunks
+    @async_barrier.async do
       stream = yield
-      stream.each_chunk do |chunk|
-        Fiber.yield chunk
-      end
+      process_stream_chunks(stream, first_chunk_var, all_chunks)
+      on_complete&.call(all_chunks)
     end
 
-    @rorp_rendering_fibers << rendering_fiber
+    # Wait for and return the first chunk (blocking)
+    first_chunk_var.wait
+    first_chunk_var.value
+  end
+
+  def process_stream_chunks(stream, first_chunk_var, all_chunks)
+    is_first = true
+
+    stream.each_chunk do |chunk|
+      # Check if client disconnected before processing chunk
+      break if response.stream.closed?
+
+      all_chunks&.push(chunk)
+
+      if is_first
+        # Store first chunk in variable for synchronous return
+        first_chunk_var.value = chunk
+        is_first = false
+      else
+        # Enqueue remaining chunks to main output queue
+        @main_output_queue.enqueue(chunk)
+      end
+    end
 
-    # return the first chunk of the fiber
-    # It contains the initial html of the component
-    # all updates will be appended to the stream sent to browser
-    rendering_fiber.resume
+    # Handle case where stream has no chunks
+    first_chunk_var.value = nil if is_first
   end
 
   def internal_stream_react_component(component_name, options = {})

data/docs/code-splitting-loadable-components.md

@@ -1,12 +1,14 @@
 # Server-side rendering with code-splitting using Loadable/Components
+
 by ShakaCode
 
-*Last updated September 19, 2022*
+_Last updated September 19, 2022_
 
 ## Introduction
+
 The [React library recommends](https://loadable-components.com/docs/getting-started/) the use of React.lazy for code splitting with dynamic imports except
 when using server-side rendering. In that case, as of February 2020, they recommend [Loadable Components](https://loadable-components.com)
-for server-side rendering with dynamic imports. 
+for server-side rendering with dynamic imports.
 
 Note, in 2019 and prior, the code-splitting feature was implemented using `react-loadable`. The React
 team no longer recommends that library. The new way is far preferable.
@@ -18,7 +20,8 @@ yarn add  @loadable/babel-plugin @loadable/component @loadable/server @loadable/
 ```
 
 ### Summary
-- [`@loadable/babel-plugin`](https://loadable-components.com/docs/getting-started/) - The plugin transforms your code to be ready for Server Side Rendering. 
+
+- [`@loadable/babel-plugin`](https://loadable-components.com/docs/getting-started/) - The plugin transforms your code to be ready for Server Side Rendering.
 - `@loadable/component` - Main library for creating loadable components.
 - `@loadable/server` - Has functions for collecting chunks and provide style, script, link tags for the server.
 - `@loadable/webpack-plugin` - The plugin to create a stats file with all chunks, assets information.
@@ -35,15 +38,16 @@ See example of server configuration differences in the loadable-components [exam
 for server-side rendering](https://github.com/gregberge/loadable-components/blob/master/examples/server-side-rendering/webpack.config.babel.js)
 
 You need to configure 3 things:
-1. `target` 
-  a. client-side: `web`
-  b. server-side: `node`
+
+1. `target`
+   a. client-side: `web`
+   b. server-side: `node`
 2. `output.libraryTarget`
-  a. client-side: `undefined`
-  b. server-side: `commonjs2`
-3. babel-loader options.caller = 'node' or 'web'   
-3. `plugins`
-  a. server-side:  `new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })`
+   a. client-side: `undefined`
+   b. server-side: `commonjs2`
+3. babel-loader options.caller = 'node' or 'web'
+4. `plugins`
+   a. server-side: `new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })`
 
 ```js
 {
@@ -58,14 +62,15 @@ You need to configure 3 things:
 Explanation:
 
 - `target: 'node'` is required to be able to run the server bundle with the dynamic import logic on nodejs.
-If that is not done, webpack will add and invoke browser-specific functions to fetch the chunks into the bundle, which throws an error on server-rendering.
+  If that is not done, webpack will add and invoke browser-specific functions to fetch the chunks into the bundle, which throws an error on server-rendering.
 
 - `new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })`
-The react_on_rails_pro node-renderer expects only one single server-bundle. In other words, we cannot and do not want to split the server bundle.
+  The react_on_rails_pro node-renderer expects only one single server-bundle. In other words, we cannot and do not want to split the server bundle.
 
 #### Client config
 
 For the client config we only need to add the plugin:
+
 ```js
 {
   plugins: [
@@ -74,30 +79,33 @@ For the client config we only need to add the plugin:
   ]
 }
 ```
+
 This plugin collects all the information about entrypoints, chunks, and files, that have these chunks and creates a stats file during client bundle build.
 This stats file is used later to map rendered components to file assets. While you can use any filename, our documentation will use the default name.
 
 ### Babel
 
 Per [the docs](https://loadable-components.com/docs/babel-plugin/#transformation):
+
 > The plugin transforms your code to be ready for Server Side Rendering
 
 Add this to `babel.config.js`:
+
 ```js
 {
   "plugins": ["@loadable/babel-plugin"]
 }
 ```
-https://loadable-components.com/docs/babel-plugin/
 
+https://loadable-components.com/docs/babel-plugin/
 
 ### Convert components into loadable components
 
 Instead of importing the component directly, use a dynamic import:
 
 ```js
-import load from '@loadable/component'
-const MyComponent = load(() => import('./MyComponent'))
+import load from '@loadable/component';
+const MyComponent = load(() => import('./MyComponent'));
 ```
 
 ### Resolving issue with ChunkLoadError
@@ -118,22 +126,25 @@ const consoleDebug = (fn) => {
     console.debug(fn());
   }
 };
-const retry = (fn, retryMessage = '', retriesLeft = 3, interval = 500) => new Promise((resolve, reject) => {
-  fn()
-    .then(resolve)
-    .catch(() => {
-      setTimeout(() => {
-        if (retriesLeft === 1) {
-          console.warn(`Maximum retries exceeded, retryMessage: ${retryMessage}. Reloading page...`);
-          window.location.reload();
-          return;
-        }
-        // Passing on "reject" is the important part
-        consoleDebug(() => `Trying request, retryMessage: ${retryMessage}, retriesLeft: ${retriesLeft - 1}`);
-        retry(fn, retryMessage, retriesLeft - 1, interval).then(resolve, reject);
-      }, interval);
-    });
-});
+const retry = (fn, retryMessage = '', retriesLeft = 3, interval = 500) =>
+  new Promise((resolve, reject) => {
+    fn()
+      .then(resolve)
+      .catch(() => {
+        setTimeout(() => {
+          if (retriesLeft === 1) {
+            console.warn(`Maximum retries exceeded, retryMessage: ${retryMessage}. Reloading page...`);
+            window.location.reload();
+            return;
+          }
+          // Passing on "reject" is the important part
+          consoleDebug(
+            () => `Trying request, retryMessage: ${retryMessage}, retriesLeft: ${retriesLeft - 1}`,
+          );
+          retry(fn, retryMessage, retriesLeft - 1, interval).then(resolve, reject);
+        }, interval);
+      });
+  });
 export default retry;
 ```
 
@@ -152,21 +163,21 @@ const HomePage = loadable(() => retry(() => import('./HomePage')));
 
 In the client bundle, we need to wrap the `hydrateRoot` call into a `loadableReady` function.
 So, hydration will be fired only after all necessary chunks preloads. In this example below,
-`ClientApp` is registering as `App`. 
+`ClientApp` is registering as `App`.
 
 ```js
 import React from 'react';
 import ReactOnRails from 'react-on-rails';
-import { hydrateRoot } from 'react-dom/client'
-import { loadableReady } from '@loadable/component'
+import { hydrateRoot } from 'react-dom/client';
+import { loadableReady } from '@loadable/component';
 import App from './App';
 
 const ClientApp = (props, railsContext, domId) => {
   loadableReady(() => {
-    const root = document.getElementById(domId)
+    const root = document.getElementById(domId);
     hydrateRoot(root, <App {...props} />);
-  })
-}
+  });
+};
 
 ReactOnRails.register({
   App: ClientApp,
@@ -175,20 +186,20 @@ ReactOnRails.register({
 
 #### Server
 
-The purpose of the server function is to collect all rendered chunks and pass them as script, link, 
-style tags to the Rails view. In this example below, `ServerApp` is registering as `App`. 
+The purpose of the server function is to collect all rendered chunks and pass them as script, link,
+style tags to the Rails view. In this example below, `ServerApp` is registering as `App`.
 
 ```js
 import React from 'react';
 import ReactOnRails from 'react-on-rails';
-import { ChunkExtractor } from '@loadable/server'
-import App from './App'
-import path from 'path'
+import { ChunkExtractor } from '@loadable/server';
+import App from './App';
+import path from 'path';
 
 const ServerApp = (props, railsContext) => {
   // This loadable-stats file was generated by `LoadablePlugin` in client webpack config.
   // You must configure the path to resolve per your setup. If you are copying the file to
-  // a remote server, the file should be a sibling of this file. 
+  // a remote server, the file should be a sibling of this file.
   // __dirname is going to be the directory where the server-bundle.js exists
   // Note, React on Rails Pro automatically copies the loadable-stats.json to the same place as the
   // server-bundle.js. Thus, the __dirname of this code is where we can find loadable-stats.json.
@@ -198,10 +209,10 @@ const ServerApp = (props, railsContext) => {
   // This object is used to search filenames by corresponding chunk names.
   // See https://loadable-components.com/docs/api-loadable-server/#chunkextractor
   // for the entryPoints, pass an array of all your entryPoints using dynamic imports
-  const extractor = new ChunkExtractor({ statsFile, entrypoints: ['client-bundle'] })
+  const extractor = new ChunkExtractor({ statsFile, entrypoints: ['client-bundle'] });
 
   // It creates the wrapper `ChunkExtractorManager` around `App` to collect chunk names of rendered components.
-  const jsx = extractor.collectChunks(<App {...props} railsContext={railsContext} />)
+  const jsx = extractor.collectChunks(<App {...props} railsContext={railsContext} />);
 
   const componentHtml = renderToString(jsx);
 
@@ -211,8 +222,8 @@ const ServerApp = (props, railsContext) => {
       // Returns all the files with rendered chunks for furture insert into rails view.
       linkTags: extractor.getLinkTags(),
       styleTags: extractor.getStyleTags(),
-      scriptTags: extractor.getScriptTags()
-    }
+      scriptTags: extractor.getScriptTags(),
+    },
   };
 };
 
@@ -224,6 +235,7 @@ ReactOnRails.register({
 ## Configure react_on_rails_pro
 
 ### React on Rails Pro
+
 You must set `config.assets_top_copy` so that the node-renderer will have access to the loadable-stats.json.
 
 ```ruby
@@ -233,15 +245,16 @@ You must set `config.assets_top_copy` so that the node-renderer will have access
 Your server rendering code, per the above, will find this file like this:
 
 ```js
-  const statsFile = path.resolve(__dirname, 'loadable-stats.json');
-``` 
+const statsFile = path.resolve(__dirname, 'loadable-stats.json');
+```
 
 Note, if `__dirname` is not working in your webpack build, that's because you didn't set `node: false`
 in your webpack configuration. That turns off the polyfills for things like `__dirname`.
 
-
 ### Node Renderer
+
 In your `node-renderer.js` file which runs node renderer, you need to specify `supportModules` options as follows:
+
 ```js
 const path = require('path');
 const env = process.env;
@@ -261,7 +274,7 @@ reactOnRailsProNodeRenderer(config);
 ```erb
 <% res = react_component_hash("App", props: {}, prerender: true) %>
 <%= content_for :link_tags, res['linkTags'] %>
-<%= content_for :style_tags, res['styleTags'] %> 
+<%= content_for :style_tags, res['styleTags'] %>
 
 <%= res['componentHtml'].html_safe %>
 
@@ -269,6 +282,7 @@ reactOnRailsProNodeRenderer(config);
 ```
 
 ## Making HMR Work
+
 To make HMR work, it's best to disable loadable-components when using the Dev Server.
 Note: you will need access to our **private** React on Rails Pro repository to open the following links.
 
@@ -277,9 +291,11 @@ Take a look at the code searches for ['imports-loadable'](https://github.com/sha
 The general concept is that we have a non-loadable, HMR-ready, file that substitutes for the loadable-enabled one, with the suffixes `imports-hmr.js` instead of `imports-loadable.js`
 
 ### Webpack configuration
+
 Use the [NormalModuleReplacement plugin](https://webpack.js.org/plugins/normal-module-replacement-plugin/):
 
 [code](https://github.com/shakacode/react_on_rails_pro/blob/a361f4e163b9170f180ae07ee312fb9b4c719fc3/spec/dummy/config/webpack/environment.js#L81-L91)
+
 ```js
 if (isWebpackDevServer) {
   environment.plugins.append(
@@ -305,7 +321,7 @@ Note: you will need access to our **private** React on Rails Pro repository to o
 ### Client-Side Startup
 
 - [spec/dummy/client/app/loadable/loadable-client.imports-hmr.js](https://github.com/shakacode/react_on_rails_pro/blob/master/spec/dummy/client/app/loadable/loadable-client.imports-hmr.js)
-- [spec/dummy/client/app/loadable/loadable-client.imports-loadable.js](https://github.com/shakacode/react_on_rails_pro/blob/master/spec/dummy/client/app/loadable/loadable-client.imports-loadable.js)
+- [spec/dummy/client/app/loadable/loadable-client.imports-loadable.jsx](https://github.com/shakacode/react_on_rails_pro/blob/master/spec/dummy/client/app/loadable/loadable-client.imports-loadable.jsx)
 
 ### Server-Side Startup
 

data/eslint.config.mjs

@@ -3,7 +3,6 @@ import { includeIgnoreFile } from '@eslint/compat';
 import js from '@eslint/js';
 import { FlatCompat } from '@eslint/eslintrc';
 import { defineConfig, globalIgnores } from 'eslint/config';
-import importPlugin from 'eslint-plugin-import';
 import jest from 'eslint-plugin-jest';
 import prettierRecommended from 'eslint-plugin-prettier/recommended';
 import globals from 'globals';
@@ -22,8 +21,9 @@ export default defineConfig([
     'spec/react_on_rails/dummy-for-generators',
     // includes some generated code
     'spec/dummy/client/app/packs/server-bundle.js',
-    'packages/node-renderer/lib/',
-    'packages/node-renderer/tests/fixtures',
+    '../packages/react-on-rails/', // Ignore open-source package (has its own linting)
+    '../packages/react-on-rails-pro-node-renderer/lib/',
+    '../packages/react-on-rails-pro-node-renderer/tests/fixtures',
     '**/node_modules/',
     '**/assets/webpack/',
     '**/generated/',
@@ -129,7 +129,7 @@ export default defineConfig([
   },
   {
     files: ['**/*.ts{x,}'],
-    extends: [importPlugin.flatConfigs.typescript, typescriptEslint.configs.strictTypeChecked],
+    extends: [typescriptEslint.configs.strictTypeChecked],
 
     languageOptions: {
       parserOptions: {
@@ -166,7 +166,7 @@ export default defineConfig([
     },
   },
   {
-    files: ['packages/node-renderer/tests/**', '**/*.test.{js,jsx,ts,tsx}'],
+    files: ['../packages/react-on-rails-pro-node-renderer/tests/**', '**/*.test.{js,jsx,ts,tsx}'],
 
     extends: [jest.configs['flat/recommended'], jest.configs['flat/style']],
 
@@ -183,8 +183,8 @@ export default defineConfig([
     },
   },
   {
-    files: ['packages/node-renderer/src/integrations/**'],
-    ignores: ['packages/node-renderer/src/integrations/api.ts'],
+    files: ['../packages/react-on-rails-pro-node-renderer/src/integrations/**'],
+    ignores: ['../packages/react-on-rails-pro-node-renderer/src/integrations/api.ts'],
 
     rules: {
       // Integrations should only use the public integration API
@@ -214,6 +214,25 @@ export default defineConfig([
       'react-hooks/rules-of-hooks': ['off'],
     },
   },
+  {
+    // Dummy apps have dependencies managed separately and may not be installed
+    files: ['spec/dummy/**/*', 'spec/execjs-compatible-dummy/**/*'],
+    rules: {
+      'import/no-unresolved': 'off',
+      'import/named': 'off',
+    },
+  },
+  {
+    // Pro packages use monorepo workspace imports that ESLint can't resolve
+    // TypeScript compiler validates these imports
+    files: ['../packages/react-on-rails-pro/**/*', '../packages/react-on-rails-pro-node-renderer/**/*'],
+    rules: {
+      'import/named': 'off',
+      'import/no-unresolved': 'off',
+      'import/no-cycle': 'off',
+      'import/extensions': 'off',
+    },
+  },
   // must be the last config in the array
   // https://github.com/prettier/eslint-plugin-prettier?tab=readme-ov-file#configuration-new-eslintconfigjs
   prettierRecommended,

data/lib/react_on_rails_pro/async_value.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module ReactOnRailsPro
+  # AsyncValue wraps an Async task to provide a simple interface for
+  # retrieving the result of an async react_component render.
+  #
+  # @example
+  #   async_value = async_react_component("MyComponent", props: { name: "World" })
+  #   # ... do other work ...
+  #   html = async_value.value  # blocks until result is ready
+  #
+  class AsyncValue
+    def initialize(task:)
+      @task = task
+    end
+
+    # Blocks until result is ready, returns HTML string.
+    # If the async task raised an exception, it will be re-raised here.
+    def value
+      @task.wait
+    end
+
+    def resolved?
+      @task.finished?
+    end
+
+    def to_s
+      value.to_s
+    end
+
+    def html_safe
+      value.html_safe
+    end
+  end
+end