Merge pull request #10 from AthennaIO/develop

feat(react): add react render

Author: jlenon7

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@athenna/vite",
-  "version": "5.9.0",
+  "version": "5.10.0",
   "description": "Vite plugin for Athenna Framework.",
   "license": "MIT",
   "author": "João Lenon <lenon@athenna.io>",
@@ -59,9 +59,11 @@
   "devDependencies": {
     "@athenna/common": "^5.5.0",
     "@athenna/config": "^5.1.0",
+    "@athenna/ioc": "^5.0.0",
     "@athenna/test": "^5.2.0",
     "@athenna/tsconfig": "^5.0.0",
     "@athenna/view": "^5.1.0",
+    "@types/react-dom": "^19.0.3",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "commitizen": "^4.3.1",
@@ -76,6 +78,7 @@
     "husky": "^3.1.0",
     "lint-staged": "^12.5.0",
     "prettier": "^2.8.8",
+    "react-dom": "^19.0.0",
     "vite": "^6.0.6"
   },
   "c8": {

package.json

@@ -9,4 +9,5 @@
 
 export * from '#src/types'
 export * from '#src/vite/Vite'
+export * from '#src/renders/React'
 export * from '#src/fastify/FastifyVite'

src/index.ts

@@ -0,0 +1,53 @@
+/**
+ * @athenna/vite
+ *
+ * (c) João Lenon <lenon@athenna.io>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import type { Vite } from '#src/vite/Vite'
+
+export class React {
+  /**
+   * Automatically compile a React component using Vite
+   * dev server and import it. In production the server
+   * manifest.json file will be read instead.
+   *
+   * @example
+   * ```ts
+   * const { createApp } = await React.loadComponent('src/resources/app/app.tsx')
+   * ```
+   */
+  public static async loadComponent<T = any>(path: string): Promise<T> {
+    const vite: Vite = ioc
+      .safeUse('Athenna/Core/Server')
+      .getVitePlugin()
+      .getVite()
+
+    return vite.ssrLoadModule(path)
+  }
+
+  /**
+   * Render a React component to an HTML string.
+   *
+   * @example
+   * ```ts
+   * const { createApp } = await React.loadComponent('src/resources/app/app.tsx')
+   *
+   * const htmlElement = await React.renderComponent(createApp(request.baseUrl))
+   * ```
+   */
+  public static async renderComponent(component: any) {
+    const reactDom = await import('react-dom/server')
+
+    if (!reactDom) {
+      throw new Error(
+        'ReactDOM is not installed to process rendering, please run "npm install react react-dom".'
+      )
+    }
+
+    return reactDom.renderToString(component)
+  }
+}

src/renders/React.ts

@@ -76,14 +76,6 @@ export type FastifyViteOptions = {
    */
   ssrBuildDirectory?: string
 
-  /**
-   * Path to the SSR manifest file relative from the root of
-   * the application.
-   *
-   * @default Path.public('assets/server/.vite/manifest.json')
-   */
-  ssrManifestFile?: string
-
   /**
    * A custom set of attributes to apply on all
    * script tags injected by edge `@vite()` tag.

src/types/fastify/FastifyViteOptions.ts

@@ -490,7 +490,9 @@ export class Vite {
     }
 
     if (!this.ssrManifestCache) {
-      this.ssrManifestCache = this.readFileAsJSON(this.options.ssrManifestFile)
+      this.ssrManifestCache = this.readFileAsJSON(
+        `${this.options.ssrBuildDirectory}${path.sep}.vite${path.sep}manifest.json`
+      )
     }
 
     return this.ssrManifestCache!