@flexireact/core 3.0.3 → 4.0.0

package/dist/core/index.js

@@ -2911,6 +2911,9 @@ function isMethod(request, method) {
 }
 
 // core/actions/index.ts
+import { useActionState, useOptimistic } from "react";
+import { useFormStatus } from "react-dom";
+import { useActionState as useActionStateReact } from "react";
 globalThis.__FLEXI_ACTIONS__ = globalThis.__FLEXI_ACTIONS__ || {};
 globalThis.__FLEXI_ACTION_CONTEXT__ = null;
 function serverAction(fn, actionId) {
@@ -3075,11 +3078,18 @@ function formAction(action) {
     }
   };
 }
+function useFlexiAction(action, initialState, permalink) {
+  return useActionStateReact(action, initialState, permalink);
+}
 function createFormState(action, initialState = null) {
+  if (typeof window !== "undefined" && process.env.NODE_ENV === "development") {
+    console.warn(
+      "[FlexiReact] createFormState is deprecated. Use useActionState from React 19 instead.\nSee migration guide: https://flexireact.dev/docs/react-19-migration"
+    );
+  }
   return {
     action,
     initialState,
-    // This will be enhanced on the client
     pending: false,
     error: null,
     data: initialState
@@ -5749,8 +5759,34 @@ var jsonLd = {
   })
 };
 
+// core/index.ts
+import { useActionState as useActionState3, useOptimistic as useOptimistic3 } from "react";
+import { useFormStatus as useFormStatus3 } from "react-dom";
+
+// core/hooks/index.ts
+import { useActionState as useActionState2, useOptimistic as useOptimistic2 } from "react";
+import { useFormStatus as useFormStatus2 } from "react-dom";
+import { use } from "react";
+
+// core/client/Link.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+// core/hooks/index.ts
+import { use as use2, useOptimistic as useOptimisticReact } from "react";
+function useAsyncData(promise) {
+  return use2(promise);
+}
+function useOptimisticMutation(currentState, updateFn) {
+  return useOptimisticReact(currentState, updateFn);
+}
+function preloadResource(fetcher) {
+  const promise = fetcher();
+  return promise;
+}
+
 // core/devtools/index.ts
-import React7 from "react";
+import React8 from "react";
 var devToolsState = {
   routes: [],
   components: /* @__PURE__ */ new Map(),
@@ -5928,24 +5964,24 @@ function initNetworkInterceptor() {
   };
 }
 function DevToolsOverlay() {
-  const [state, setState] = React7.useState({
+  const [state, setState] = React8.useState({
     enabled: true,
     position: "bottom-right",
     expanded: false,
     activeTab: "routes",
     theme: "dark"
   });
-  const [data, setData] = React7.useState(devtools.getState());
-  React7.useEffect(() => {
+  const [data, setData] = React8.useState(devtools.getState());
+  React8.useEffect(() => {
     return devtools.subscribe(() => {
       setData(devtools.getState());
     });
   }, []);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     initPerformanceMonitoring();
     initNetworkInterceptor();
   }, []);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     const handler = (e) => {
       if (e.ctrlKey && e.shiftKey && e.key === "D") {
         setState((s) => ({ ...s, expanded: !s.expanded }));
@@ -5962,7 +5998,7 @@ function DevToolsOverlay() {
     "top-left": { top: 16, left: 16 }
   };
   if (!state.expanded) {
-    return React7.createElement("button", {
+    return React8.createElement("button", {
       onClick: () => setState((s) => ({ ...s, expanded: true })),
       style: {
         position: "fixed",
@@ -5983,7 +6019,7 @@ function DevToolsOverlay() {
       onMouseEnter: (e) => e.target.style.transform = "scale(1.1)",
       onMouseLeave: (e) => e.target.style.transform = "scale(1)",
       title: "FlexiReact DevTools (Ctrl+Shift+D)"
-    }, React7.createElement("span", { style: { fontSize: 24 } }, "\u26A1"));
+    }, React8.createElement("span", { style: { fontSize: 24 } }, "\u26A1"));
   }
   const tabs = [
     { id: "routes", label: "\u{1F5FA}\uFE0F Routes", count: data.routes.length },
@@ -5992,7 +6028,7 @@ function DevToolsOverlay() {
     { id: "performance", label: "\u{1F4CA} Performance", count: data.performance.length },
     { id: "console", label: "\u{1F4DD} Console", count: data.logs.length }
   ];
-  return React7.createElement("div", {
+  return React8.createElement("div", {
     style: {
       position: "fixed",
       ...positionStyles[state.position],
@@ -6010,7 +6046,7 @@ function DevToolsOverlay() {
     }
   }, [
     // Header
-    React7.createElement("div", {
+    React8.createElement("div", {
       key: "header",
       style: {
         display: "flex",
@@ -6021,14 +6057,14 @@ function DevToolsOverlay() {
         background: "#111"
       }
     }, [
-      React7.createElement("div", {
+      React8.createElement("div", {
         key: "title",
         style: { display: "flex", alignItems: "center", gap: 8 }
       }, [
-        React7.createElement("span", { key: "icon" }, "\u26A1"),
-        React7.createElement("span", { key: "text", style: { fontWeight: 600 } }, "FlexiReact DevTools")
+        React8.createElement("span", { key: "icon" }, "\u26A1"),
+        React8.createElement("span", { key: "text", style: { fontWeight: 600 } }, "FlexiReact DevTools")
       ]),
-      React7.createElement("button", {
+      React8.createElement("button", {
         key: "close",
         onClick: () => setState((s) => ({ ...s, expanded: false })),
         style: {
@@ -6041,7 +6077,7 @@ function DevToolsOverlay() {
       }, "\xD7")
     ]),
     // Tabs
-    React7.createElement("div", {
+    React8.createElement("div", {
       key: "tabs",
       style: {
         display: "flex",
@@ -6050,7 +6086,7 @@ function DevToolsOverlay() {
         overflowX: "auto"
       }
     }, tabs.map(
-      (tab) => React7.createElement("button", {
+      (tab) => React8.createElement("button", {
         key: tab.id,
         onClick: () => setState((s) => ({ ...s, activeTab: tab.id })),
         style: {
@@ -6066,7 +6102,7 @@ function DevToolsOverlay() {
       }, `${tab.label} (${tab.count})`)
     )),
     // Content
-    React7.createElement("div", {
+    React8.createElement("div", {
       key: "content",
       style: {
         padding: 16,
@@ -6079,11 +6115,11 @@ function DevToolsOverlay() {
 function renderTabContent(tab, data) {
   switch (tab) {
     case "routes":
-      return React7.createElement(
+      return React8.createElement(
         "div",
         { style: { display: "flex", flexDirection: "column", gap: 8 } },
-        data.routes.length === 0 ? React7.createElement("div", { style: { color: "#666", textAlign: "center", padding: 20 } }, "No routes tracked yet") : data.routes.map(
-          (route, i) => React7.createElement("div", {
+        data.routes.length === 0 ? React8.createElement("div", { style: { color: "#666", textAlign: "center", padding: 20 } }, "No routes tracked yet") : data.routes.map(
+          (route, i) => React8.createElement("div", {
             key: i,
             style: {
               padding: 12,
@@ -6092,8 +6128,8 @@ function renderTabContent(tab, data) {
               border: "1px solid #222"
             }
           }, [
-            React7.createElement("div", { key: "path", style: { fontWeight: 600, color: "#00FF9C" } }, route.path),
-            React7.createElement(
+            React8.createElement("div", { key: "path", style: { fontWeight: 600, color: "#00FF9C" } }, route.path),
+            React8.createElement(
               "div",
               { key: "component", style: { fontSize: 11, color: "#888", marginTop: 4 } },
               `Component: ${route.component} \u2022 ${route.loadTime}ms`
@@ -6102,11 +6138,11 @@ function renderTabContent(tab, data) {
         )
       );
     case "components":
-      return React7.createElement(
+      return React8.createElement(
         "div",
         { style: { display: "flex", flexDirection: "column", gap: 8 } },
-        data.components.length === 0 ? React7.createElement("div", { style: { color: "#666", textAlign: "center", padding: 20 } }, "No components tracked") : data.components.map(
-          (comp, i) => React7.createElement("div", {
+        data.components.length === 0 ? React8.createElement("div", { style: { color: "#666", textAlign: "center", padding: 20 } }, "No components tracked") : data.components.map(
+          (comp, i) => React8.createElement("div", {
             key: i,
             style: {
               padding: 12,
@@ -6115,12 +6151,12 @@ function renderTabContent(tab, data) {
               border: "1px solid #222"
             }
           }, [
-            React7.createElement("div", {
+            React8.createElement("div", {
               key: "name",
               style: { display: "flex", alignItems: "center", gap: 8 }
             }, [
-              React7.createElement("span", { key: "text", style: { fontWeight: 600 } }, comp.name),
-              comp.isIsland && React7.createElement("span", {
+              React8.createElement("span", { key: "text", style: { fontWeight: 600 } }, comp.name),
+              comp.isIsland && React8.createElement("span", {
                 key: "island",
                 style: {
                   fontSize: 10,
@@ -6131,7 +6167,7 @@ function renderTabContent(tab, data) {
                 }
               }, "Island")
             ]),
-            React7.createElement(
+            React8.createElement(
               "div",
               { key: "info", style: { fontSize: 11, color: "#888", marginTop: 4 } },
               `Renders: ${comp.renderCount} \u2022 Last: ${new Date(comp.lastRenderTime).toLocaleTimeString()}`
@@ -6140,11 +6176,11 @@ function renderTabContent(tab, data) {
         )
       );
     case "network":
-      return React7.createElement(
+      return React8.createElement(
         "div",
         { style: { display: "flex", flexDirection: "column", gap: 8 } },
-        data.network.length === 0 ? React7.createElement("div", { style: { color: "#666", textAlign: "center", padding: 20 } }, "No requests yet") : data.network.map(
-          (req, i) => React7.createElement("div", {
+        data.network.length === 0 ? React8.createElement("div", { style: { color: "#666", textAlign: "center", padding: 20 } }, "No requests yet") : data.network.map(
+          (req, i) => React8.createElement("div", {
             key: i,
             style: {
               padding: 12,
@@ -6153,11 +6189,11 @@ function renderTabContent(tab, data) {
               border: "1px solid #222"
             }
           }, [
-            React7.createElement("div", {
+            React8.createElement("div", {
               key: "url",
               style: { display: "flex", alignItems: "center", gap: 8 }
             }, [
-              React7.createElement("span", {
+              React8.createElement("span", {
                 key: "method",
                 style: {
                   fontSize: 10,
@@ -6168,7 +6204,7 @@ function renderTabContent(tab, data) {
                   fontWeight: 600
                 }
               }, req.method),
-              React7.createElement("span", {
+              React8.createElement("span", {
                 key: "status",
                 style: {
                   fontSize: 10,
@@ -6178,12 +6214,12 @@ function renderTabContent(tab, data) {
                   borderRadius: 4
                 }
               }, req.status || "ERR"),
-              React7.createElement("span", {
+              React8.createElement("span", {
                 key: "path",
                 style: { fontSize: 12, color: "#fff", overflow: "hidden", textOverflow: "ellipsis" }
               }, new URL(req.url, "http://localhost").pathname)
             ]),
-            React7.createElement(
+            React8.createElement(
               "div",
               { key: "info", style: { fontSize: 11, color: "#888", marginTop: 4 } },
               `${req.duration}ms \u2022 ${formatBytes2(req.size)}`
@@ -6192,11 +6228,11 @@ function renderTabContent(tab, data) {
         )
       );
     case "performance":
-      return React7.createElement(
+      return React8.createElement(
         "div",
         { style: { display: "flex", flexDirection: "column", gap: 8 } },
-        data.performance.length === 0 ? React7.createElement("div", { style: { color: "#666", textAlign: "center", padding: 20 } }, "Collecting metrics...") : data.performance.map(
-          (metric, i) => React7.createElement("div", {
+        data.performance.length === 0 ? React8.createElement("div", { style: { color: "#666", textAlign: "center", padding: 20 } }, "Collecting metrics...") : data.performance.map(
+          (metric, i) => React8.createElement("div", {
             key: i,
             style: {
               padding: 12,
@@ -6208,14 +6244,14 @@ function renderTabContent(tab, data) {
               alignItems: "center"
             }
           }, [
-            React7.createElement("span", { key: "name", style: { fontWeight: 600 } }, metric.name),
-            React7.createElement("div", { key: "value", style: { display: "flex", alignItems: "center", gap: 8 } }, [
-              React7.createElement(
+            React8.createElement("span", { key: "name", style: { fontWeight: 600 } }, metric.name),
+            React8.createElement("div", { key: "value", style: { display: "flex", alignItems: "center", gap: 8 } }, [
+              React8.createElement(
                 "span",
                 { key: "num" },
                 metric.name === "CLS" ? metric.value.toFixed(3) : `${Math.round(metric.value)}ms`
               ),
-              React7.createElement("span", {
+              React8.createElement("span", {
                 key: "rating",
                 style: {
                   width: 8,
@@ -6229,11 +6265,11 @@ function renderTabContent(tab, data) {
         )
       );
     case "console":
-      return React7.createElement(
+      return React8.createElement(
         "div",
         { style: { display: "flex", flexDirection: "column", gap: 4 } },
-        data.logs.length === 0 ? React7.createElement("div", { style: { color: "#666", textAlign: "center", padding: 20 } }, "No logs yet") : data.logs.map(
-          (log, i) => React7.createElement("div", {
+        data.logs.length === 0 ? React8.createElement("div", { style: { color: "#666", textAlign: "center", padding: 20 } }, "No logs yet") : data.logs.map(
+          (log, i) => React8.createElement("div", {
             key: i,
             style: {
               padding: "8px 12px",
@@ -6244,7 +6280,7 @@ function renderTabContent(tab, data) {
               color: log.level === "error" ? "#EF4444" : log.level === "warn" ? "#F59E0B" : "#888"
             }
           }, [
-            React7.createElement(
+            React8.createElement(
               "span",
               { key: "time", style: { color: "#444", marginRight: 8 } },
               new Date(log.timestamp).toLocaleTimeString()
@@ -6254,7 +6290,7 @@ function renderTabContent(tab, data) {
         )
       );
     default:
-      return React7.createElement("div", {}, "Unknown tab");
+      return React8.createElement("div", {}, "Unknown tab");
   }
 }
 function formatBytes2(bytes) {
@@ -6266,7 +6302,7 @@ function formatBytes2(bytes) {
 }
 
 // core/index.ts
-var VERSION = "3.0.0";
+var VERSION = "3.1.0";
 var core_default = {
   VERSION,
   createServer
@@ -6384,6 +6420,7 @@ export {
   parseSearchParams,
   pluginManager,
   pprFetch,
+  preloadResource,
   prerenderWithPPR,
   processServerComponent,
   reactCache,
@@ -6407,6 +6444,12 @@ export {
   text,
   unstable_cache,
   useActionContext,
+  useActionState3 as useActionState,
+  useAsyncData,
+  useFlexiAction,
+  useFormStatus3 as useFormStatus,
+  useOptimistic3 as useOptimistic,
+  useOptimisticMutation,
   useParams,
   usePathname,
   useQuery,