optimizations

resources/js/nova.js

@@ -5,8 +5,6 @@
 // Alpine.js — powers x-data/x-show/@click in Blade layouts (e.g. cookie banner, toasts).
 // Guard: don't start a second instance if app.js already loaded Alpine on this page.
 import Alpine from 'alpinejs';
-import React from 'react';
-import { createRoot } from 'react-dom/client';
 if (!window.Alpine) {
   window.Alpine = Alpine;
   Alpine.start();
@@ -24,6 +22,24 @@ function safeParseJson(value, fallback) {
   }
 }
 
+var reactRuntimePromise = null;
+
+function getReactRuntime() {
+  if (!reactRuntimePromise) {
+    reactRuntimePromise = Promise.all([
+      import('react'),
+      import('react-dom/client'),
+    ]).then(function (modules) {
+      return {
+        React: modules[0].default,
+        createRoot: modules[1].createRoot,
+      };
+    });
+  }
+
+  return reactRuntimePromise;
+}
+
 function mountStoryEditor() {
   var storyEditorRoot = document.getElementById('story-editor-react-root');
   if (!storyEditorRoot) return;
@@ -49,11 +65,16 @@ function mountStoryEditor() {
 
   storyEditorRoot.dataset.reactMounted = 'true';
 
-  void import('./components/editor/StoryEditor')
-    .then(function (module) {
+  void Promise.all([
+    import('./components/editor/StoryEditor'),
+    getReactRuntime(),
+  ])
+    .then(function (resolved) {
+      var module = resolved[0];
+      var reactRuntime = resolved[1];
       var StoryEditor = module.default;
-      createRoot(storyEditorRoot).render(
-        React.createElement(StoryEditor, {
+      reactRuntime.createRoot(storyEditorRoot).render(
+        reactRuntime.React.createElement(StoryEditor, {
           mode: mode,
           initialStory: initialStory,
           storyTypes: storyTypes,
@@ -77,10 +98,15 @@ function mountToolbarNotifications() {
   var props = safeParseJson(rootEl.getAttribute('data-props'), {});
   rootEl.dataset.reactMounted = 'true';
 
-  void import('./components/social/NotificationDropdown.jsx')
-    .then(function (module) {
+  void Promise.all([
+    import('./components/social/NotificationDropdown.jsx'),
+    getReactRuntime(),
+  ])
+    .then(function (resolved) {
+      var module = resolved[0];
+      var reactRuntime = resolved[1];
       var Component = module.default;
-      createRoot(rootEl).render(React.createElement(Component, props));
+      reactRuntime.createRoot(rootEl).render(reactRuntime.React.createElement(Component, props));
     })
     .catch(function () {
       rootEl.dataset.reactMounted = 'false';
@@ -94,10 +120,15 @@ function mountToolbarMessages() {
   var props = safeParseJson(rootEl.getAttribute('data-props'), {});
   rootEl.dataset.reactMounted = 'true';
 
-  void import('./components/social/MessageInboxBadge.jsx')
-    .then(function (module) {
+  void Promise.all([
+    import('./components/social/MessageInboxBadge.jsx'),
+    getReactRuntime(),
+  ])
+    .then(function (resolved) {
+      var module = resolved[0];
+      var reactRuntime = resolved[1];
       var Component = module.default;
-      createRoot(rootEl).render(React.createElement(Component, props));
+      reactRuntime.createRoot(rootEl).render(reactRuntime.React.createElement(Component, props));
     })
     .catch(function () {
       rootEl.dataset.reactMounted = 'false';
@@ -110,10 +141,15 @@ function mountStorySocial() {
     var props = safeParseJson(socialRoot.getAttribute('data-props'), {});
     socialRoot.dataset.reactMounted = 'true';
 
-    void import('./components/social/StorySocialPanel.jsx')
-      .then(function (module) {
+    void Promise.all([
+      import('./components/social/StorySocialPanel.jsx'),
+      getReactRuntime(),
+    ])
+      .then(function (resolved) {
+        var module = resolved[0];
+        var reactRuntime = resolved[1];
         var Component = module.default;
-        createRoot(socialRoot).render(React.createElement(Component, {
+        reactRuntime.createRoot(socialRoot).render(reactRuntime.React.createElement(Component, {
           story: props.story,
           creator: props.creator,
           initialState: props.state,
@@ -132,10 +168,15 @@ function mountStorySocial() {
   var followProps = safeParseJson(followRoot.getAttribute('data-props'), {});
   followRoot.dataset.reactMounted = 'true';
 
-  void import('./components/social/FollowButton.jsx')
-    .then(function (module) {
+  void Promise.all([
+    import('./components/social/FollowButton.jsx'),
+    getReactRuntime(),
+  ])
+    .then(function (resolved) {
+      var module = resolved[0];
+      var reactRuntime = resolved[1];
       var Component = module.default;
-      createRoot(followRoot).render(React.createElement(Component, {
+      reactRuntime.createRoot(followRoot).render(reactRuntime.React.createElement(Component, {
         username: followProps.username,
         initialFollowing: Boolean(followProps.following),
         initialCount: Number(followProps.followers_count || 0),