Merge branch 'main' into fix/set-http-headers

docs/react-server.config.mjs

@@ -13,7 +13,7 @@ export default {
   ],
   mdx: {
     remarkPlugins: [remarkGfm],
-    rehypePlugins: [rehypeHighlight, rehypeMdxCodeProps],
+    rehypePlugins: [[rehypeHighlight, { detect: true }], rehypeMdxCodeProps],
     components: "./src/mdx-components.jsx",
   },
   prerender: false,

docs/src/pages/en/(pages)/deploy/api.mdx

@@ -55,7 +55,26 @@ You need to pass adapter properties to the `createAdapter` function to configure
 
 `handler`: The adapter handler function.
 
-`deploy`: The deployment command and arguments. This is optional. When provided, the adapter will show what command the developer needs to run to deploy the application after it has been built. If the `--deploy` flag is provided during the build, the adapter will run this command.
+`deploy`: The deployment command and arguments. This is optional. When provided, the adapter will show what command the developer needs to run to deploy the application after it has been built. If the `--deploy` flag is provided during the build, the adapter will run this command. The `deploy` property can also be a function that will be called with the adapter options, CLI options and the handler result. This is useful if you need to customize the deployment command based on the adapter options or the handler result. If you don't provide a result with `command` and `args`, the default deployment handling spawning the command will be skipped. This is useful if you want to implement a custom deployment workflow in the adapter.
+
+```js
+export const adapter = createAdapter({
+  // ...
+  handler: async ({ adapterOptions, files, copy, config, reactServerDir, reactServerOutDir, root, options }) => {
+    // Your adapter handler implementation
+    return {
+      // Your handler result, this will be passed to the deploy function
+    };
+  },
+  async deploy({ adapterOptions, options, handlerResult }) {
+    // customize the deployment command based on the adapter options, CLI options or handler result
+    return {
+      command: "vercel",
+      args: ["deploy", "--prebuilt"],
+    };
+  },
+});
+```
 
 <Link name="adapter-handler">
 ## Adapter handler

docs/src/pages/en/(pages)/framework/micro-frontends.mdx

@@ -16,13 +16,10 @@ Micro-frontends are a way to split your application into smaller, more manageabl
 
 Micro-frontends are a great way to scale your application development. They allow you to:
 
-- [x] **Scale your development team:** Each team can work on a separate micro-frontend, allowing them to develop, test, and deploy independently.
-
-- [x] **Scale your infrastructure:** Each micro-frontend can be deployed independently, allowing you to scale your infrastructure more easily.
-
-- [x] **Improve performance:** Micro-frontends can be loaded on demand, reducing the initial load time of your application.
-
-- [x] **Improve maintainability:** Each micro-frontend is a separate application, making it easier to maintain and update.
+- **Scale your development team:** Each team can work on a separate micro-frontend, allowing them to develop, test, and deploy independently.
+- **Scale your infrastructure:** Each micro-frontend can be deployed independently, allowing you to scale your infrastructure more easily.
+- **Improve performance:** Micro-frontends can be loaded on demand, reducing the initial load time of your application.
+- **Improve maintainability:** Each micro-frontend is a separate application, making it easier to maintain and update.
 
 <Link name="how-to-implement-micro-frontends">
 ## How to implement micro-frontends

docs/src/pages/en/(pages)/guide/why.mdx

@@ -16,11 +16,11 @@ This is a page dedicated to answer the question: Why `@lazarv/react-server`? Hop
 
 `@lazarv/react-server` is best compared to Next.js / Remix / Astro. We can consider a solution to be a meta-framework when the following features are supported and the framework is using a specific library as it's base.
 
-- [x] File-based routing
-- [x] Static generation
-- [x] Hybrid rendering
-- [x] Data fetching
-- [x] Isomorphic component trees
+- File-based routing
+- Static generation
+- Hybrid rendering
+- Data fetching
+- Isomorphic component trees
 
 <Link name="is-this-framework-for-you">
 ## Is this framework for you?
@@ -34,20 +34,20 @@ This framework is for you when you want to use bleeding-edge new technologies an
 
 The goal of `@lazarv/react-server` is to provide a meta-framework that has these features:
 
-- [x] uses React Server Components
-- [x] uses ES modules
-- [x] uses Vite
-- [x] extensible with plugins
-- [x] supports server actions
-- [x] supports file-system based routing
-- [x] supports Markdown and MDX pages
-- [x] supports static generation
-- [x] supports progressive enhancement
-- [x] supports streaming server-side rendering
-- [x] supports selective hydration
-- [x] supports response caching and revalidation
-- [x] supports React hot module replacement
-- [x] supports node.js cluster for blazing-fast production builds
+- uses React Server Components
+- uses ES modules
+- uses Vite
+- extensible with plugins
+- supports server actions
+- supports file-system based routing
+- supports Markdown and MDX pages
+- supports static generation
+- supports progressive enhancement
+- supports streaming server-side rendering
+- supports selective hydration
+- supports response caching and revalidation
+- supports React hot module replacement
+- supports node.js cluster for blazing-fast production builds
 
 <Link name="why-react-server-components">
 ## Why React Server Components?

docs/src/pages/en/(pages)/integrations/vite.mdx

@@ -24,9 +24,9 @@ You can use all the Vite plugins in your project. You can follow the [Vite plugi
 
 When using Vite plugins, expect three environments:
 
-- [ ] `rsc` - when the plugin is used in React Server Components (RSC payload)
-- [ ] `ssr` - when the plugin is used in server-side rendering (HTML output)
-- [ ] `client` - when the plugin is used in client components
+- `rsc` - when the plugin is used in React Server Components (RSC payload)
+- `ssr` - when the plugin is used in server-side rendering (HTML output)
+- `client` - when the plugin is used in client components
 
 <Link name="migration">
 ## Migration

docs/src/pages/en/framework.(index).mdx

@@ -14,4 +14,4 @@ For error handling, you can learn about how to use the built-in [error boundary]
 
 You can also learn about some small, but useful modes of the framework in this section, like [partial pre-rendering](/framework/ppr), [cluster mode](/framework/cluster) or [middleware mode](/framework/middleware-mode). Partial pre-rendering is useful when you want to pre-render only parts of your app. Cluster mode is useful when you want to run your app in a multi-process environment. While middleware mode is useful when you want to run your app as a middleware in an existing server, like Express or NestJS.
 
-You can learn about how to implement a micro-frontend architecture using the framework in the [micro-frontends](/framework/micro-frontends) section. The framework provides a set of tools to help you implement micro-frontends in your app. You can use the `RemoteComponent` component to load a micro-frontend from a remote URL and render it in your app using server-side rendering. Server-side rendering supported `iframe` fragments for React applications!
+You can learn about how to implement a micro-frontend architecture using the framework in the [micro-frontends](/framework/micro-frontends) section. The framework provides a set of tools to help you implement micro-frontends in your app. You can use the `RemoteComponent` component to load a micro-frontend from a remote URL and render it in your app using server-side rendering. Server-side rendering supported `iframe` fragments for React applications!

docs/src/pages/global.css

@@ -236,7 +236,56 @@ article {
   }
 
   & ul {
-    @apply list-disc list-inside mb-4;
+    @apply list-none list-inside mb-4;
+
+    & li {
+      @apply pl-0 mb-2;
+
+      &:before {
+        content: "";
+        display: inline-block;
+        vertical-align: middle;
+        width: 0.25rem;
+        height: 2px;
+        margin-top: -1px;
+        margin-right: 0.5rem;
+        background-color: currentColor;
+      }
+
+      & ul {
+        @apply list-none pl-4 mb-0 mt-2;
+
+        & li {
+          @apply pl-0 mb-2;
+
+          &:before {
+            content: "";
+            display: inline-block;
+            vertical-align: middle;
+            width: 0.25rem;
+            height: 2px;
+            margin-top: -1px;
+            margin-right: 0.5rem;
+            background-color: currentColor;
+          }
+
+          & ul {
+            @apply list-none pl-4 mb-0 mt-2;
+
+            & li:before {
+              content: "";
+              display: inline-block;
+              vertical-align: middle;
+              width: 0.25rem;
+              height: 2px;
+              margin-top: -1px;
+              margin-right: 0.5rem;
+              background-color: currentColor;
+            }
+          }
+        }
+      }
+    }
   }
 
   & a {
@@ -246,14 +295,6 @@ article {
   .contains-task-list {
     @apply list-none;
 
-    & li {
-      @apply flex items-center mb-2;
-    }
-
-    & input {
-      @apply mr-2;
-    }
-
     & code {
       @apply bg-gray-100 dark:bg-gray-500 text-sm p-1 mx-1.5;
     }
@@ -298,18 +339,7 @@ article {
 
   & input[type="checkbox"] {
     width: 0;
-    margin-right: 0.75rem;
-    position: relative;
-
-    &::after {
-      position: absolute;
-      top: 50%;
-      content: "";
-      display: inline-block;
-      width: 0.25rem;
-      height: 2px;
-      background-color: currentColor;
-    }
+    margin: 0;
   }
 }
 

packages/react-server-adapter-core/index.d.ts

@@ -3,7 +3,13 @@ declare module "@lazarv/react-server-adapter-core" {
     (adapterOptions: T, root: string, options: any): Promise<void>;
   }
 
-  export function createAdapter<T = any>(options: {
+  export type DeployCommandDescriptor = {
+    command: string;
+    args: string[];
+    message?: string;
+  };
+
+  export function createAdapter<T = any, R = void>(options: {
     name: string;
     outDir: string;
     outStaticDir?: string;
@@ -32,8 +38,19 @@ declare module "@lazarv/react-server-adapter-core" {
       reactServerDir: string;
       reactServerOutDir: string;
       root: string;
-      options: any;
-    }) => Promise<void>;
+      options: Record<string, any>;
+    }) => Promise<R>;
+    deploy:
+      | DeployCommandDescriptor
+      | ((context: {
+          adapterOptions: T;
+          options: Record<string, any>;
+          handlerResult: R;
+        }) =>
+          | DeployCommandDescriptor
+          | Promise<DeployCommandDescriptor>
+          | void
+          | Promise<void>);
   }): Adapter<T>;
 
   export function banner(message: string): void;

packages/react-server-adapter-core/index.mjs

@@ -446,7 +446,7 @@ export function createAdapter({
       await copy.server();
     }
 
-    await handler({
+    const handlerResult = await handler({
       files,
       copy,
       config,
@@ -458,17 +458,23 @@ export function createAdapter({
     });
 
     success(`${name} deployment successfully created.`);
-    if (deploy && deploy.command && deploy.args) {
-      if (options.deploy) {
-        banner(`deploying to ${name}`);
-        clearProgress();
-        await spawnCommand(deploy.command, deploy.args);
-      } else {
-        console.log(
-          `${colors.gray(`Deploy to ${name} using:`)} ${deploy.command} ${deploy.args.join(" ")}`
-        );
-        if (deploy.message) {
-          console.log(deploy.message);
+    if (deploy) {
+      const { command, args, message } =
+        typeof deploy === "function"
+          ? await deploy({ adapterOptions, options, handlerResult })
+          : deploy;
+      if (command && args) {
+        if (options.deploy) {
+          banner(`deploying to ${name}`);
+          clearProgress();
+          await spawnCommand(command, args);
+        } else {
+          console.log(
+            `${colors.gray(`Deploy to ${name} using:`)} ${command} ${args.join(" ")}`
+          );
+          if (message) {
+            console.log(message);
+          }
         }
       }
     }

packages/react-server/lib/build/adapter.mjs

@@ -15,7 +15,9 @@ export default async function adapter(root, options) {
   const adapter =
     options?.adapter?.[0] === "false"
       ? null
-      : options.adapter || config.adapter;
+      : typeof options.adapter?.[0] === "string" && options.adapter?.[0]
+        ? options.adapter?.[0]
+        : config.adapter;
   if (adapter) {
     if (typeof adapter === "function") {
       return await adapter({}, root, options);