wip

Author: ascorbic

packages/react-rsc/CHANGELOG.md

@@ -0,0 +1,28 @@
+# Changelog
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @impalajs/core bumped to 0.0.6
+
+## 0.0.5 (2023-03-28)
+
+
+### Features
+
+* add dev server ([#2](https://github.com/ascorbic/impala/issues/2)) ([bab917a](https://github.com/ascorbic/impala/commit/bab917a28df70d9df691f7d1db61bf6e140b7acb))
+* **create-impala:** add create-impala cli ([d40b61c](https://github.com/ascorbic/impala/commit/d40b61c469223bc88d62fce156790ecaf2090e49))
+
+
+### Bug Fixes
+
+* pass props to pages properly ([6b18945](https://github.com/ascorbic/impala/commit/6b189453d821ad85fdf828f5d270c754fecb0b26))
+* pass props to pages properly ([#3](https://github.com/ascorbic/impala/issues/3)) ([ee3bb82](https://github.com/ascorbic/impala/commit/ee3bb8279987dcdd0655ef02a53bad883ee3413a))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @impalajs/core bumped to 0.0.5

packages/react-rsc/README.md

@@ -0,0 +1,7 @@
+# Impala
+
+<p align="center">
+
+![impala](https://user-images.githubusercontent.com/213306/227727009-a4dc391f-efb1-4489-ad73-c3d3a327704a.png)
+
+</p>

packages/react-rsc/client.d.ts

@@ -0,0 +1 @@
+export * from "./dist/client";

packages/react-rsc/head.d.ts

@@ -0,0 +1 @@
+export { Head } from "./dist/head";

packages/react-rsc/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@impalajs/react-rsc",
+  "version": "0.0.6",
+  "description": "",
+  "scripts": {
+    "build": "tsup src/index.ts src/client.tsx src/head.tsx --external virtual:client-bundle-map --external react --external react-server-dom-webpack --format cjs,esm --dts --clean"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "require": "./dist/client.js",
+      "import": "./dist/client.mjs"
+    },
+    "./head": {
+      "types": "./dist/head.d.ts",
+      "require": "./dist/head.js",
+      "import": "./dist/head.mjs"
+    }
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@impalajs/core": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^18.15.7",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "react": "0.0.0-experimental-8310854ce-20230331",
+    "react-dom": "0.0.0-experimental-8310854ce-20230331",
+    "react-server-dom-webpack": "0.0.0-experimental-8310854ce-20230331",
+    "tsup": "^6.7.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/react-rsc/src/client.tsx

@@ -0,0 +1,29 @@
+import type {
+  ModuleImports,
+  RouteModule as CoreRouteModule,
+} from "@impalajs/core";
+import type { ElementType } from "react";
+import ReactDOM from "react-dom/client";
+
+export type RouteModule = CoreRouteModule<ElementType>;
+export function clientBootstrap(modules: ModuleImports<RouteModule>) {
+  const context = (window as any).___CONTEXT;
+
+  if (context && "chunk" in context) {
+    const mod = modules[context.chunk];
+    if (mod) {
+      mod().then(({ default: Page }) => {
+        ReactDOM.hydrateRoot(
+          document.getElementById("__impala")!,
+          <Page {...context} />
+        );
+      });
+    } else {
+      console.error(
+        `[Impala] Could not hydrate page. Module not found: ${context?.chunk}`
+      );
+    }
+  } else {
+    console.log("[Impala] No context found. Skipping hydration.");
+  }
+}

packages/react-rsc/src/entry-server.tsx

@@ -0,0 +1,77 @@
+import { renderToStaticMarkup } from "react-dom/server";
+// @ts-ignore
+import * as ReactServerDom from "react-server-dom-webpack/server.node";
+// @ts-ignore
+import * as ReactClient from "react-server-dom-webpack/client.node";
+
+import { ElementType, useContext } from "react";
+import type { Context, RouteModule } from "@impalajs/core";
+import { Writable, WritableOptions } from "node:stream";
+import { HeadContext } from "./head-context";
+import { promises as fs } from "node:fs";
+
+class StringResponse extends Writable {
+  private buffer: string;
+  private responseData: Promise<string>;
+  constructor(options?: WritableOptions) {
+    super(options);
+    this.buffer = "";
+    this.responseData = new Promise((resolve, reject) => {
+      this.on("finish", () => resolve(this.buffer));
+      this.on("error", reject);
+    });
+  }
+
+  _write(
+    chunk: any,
+    encoding: BufferEncoding,
+    callback: (error?: Error | null) => void
+  ): void {
+    console.log("chunk", chunk);
+    this.buffer += chunk;
+    callback();
+  }
+
+  getData(): Promise<string> {
+    return this.responseData;
+  }
+}
+
+function HeadContent() {
+  const headProvider = useContext(HeadContext);
+  return <>{...headProvider.getHead()}</>;
+}
+
+export async function render(
+  context: Context,
+  mod: () => Promise<RouteModule<ElementType>>,
+  bootstrapModules?: Array<string>
+) {
+  // @ts-ignore
+  const { default: bundleMapPath } = await import("virtual:client-bundle-map");
+  console.log(bundleMapPath);
+  const bundleMap = JSON.parse(await fs.readFile(bundleMapPath, "utf-8"));
+  console.log(bundleMap);
+  const { default: Page } = await mod();
+
+  const response = new StringResponse();
+
+  const stream = ReactServerDom.renderToPipeableStream(
+    <Page {...context} />,
+    {
+      bootstrapModules,
+      bootstrapScriptContent: `window.___CONTEXT=${JSON.stringify(context)};`,
+    },
+    bundleMap
+  );
+
+  console.log(stream);
+
+  const something = ReactClient.createFromNodeStream(stream, bundleMap);
+  console.log(something);
+  const body = await response.getData();
+
+  const head = renderToStaticMarkup(<HeadContent />);
+
+  return { body, head };
+}

packages/react-rsc/src/head-context.tsx

@@ -0,0 +1,41 @@
+import React, { createContext, ReactElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+
+class HeadProvider {
+  private head: React.ReactElement[] = [];
+
+  private removeTag(tag: string) {
+    this.head = this.head.filter((item) => item.type !== tag);
+  }
+
+  public addHead(head?: ReactElement | ReactElement[]) {
+    if (!head) {
+      return;
+    }
+    if (Array.isArray(head)) {
+      // Can't have more than one title tag
+      if (head.some((item) => item.type === "title")) {
+        this.removeTag("title");
+      }
+      this.head.push(...head);
+      return;
+    }
+
+    if (head.type === "title") {
+      this.removeTag("title");
+    }
+    this.head.push(head);
+  }
+
+  public getHead() {
+    return this.head;
+  }
+
+  public getAsString() {
+    return renderToStaticMarkup(<>{...this.head}</>);
+  }
+}
+
+const headProvider = new HeadProvider();
+
+export const HeadContext = createContext(headProvider);

packages/react-rsc/src/head.tsx

@@ -0,0 +1,16 @@
+import { useContext } from "react";
+import { HeadContext } from "./head-context";
+
+interface HeadProps {
+  title?: string;
+  children?: React.ReactElement | React.ReactElement[];
+}
+
+export const Head: React.FC<HeadProps> = ({ children, title }) => {
+  const headProvider = useContext(HeadContext);
+  headProvider.addHead(children);
+  if (title) {
+    headProvider.addHead(<title>{title}</title>);
+  }
+  return null;
+};

packages/react-rsc/src/index.ts

@@ -0,0 +1,10 @@
+import type {
+  DataModule,
+  ModuleImports,
+  RouteModule as CoreRouteModule,
+} from "@impalajs/core";
+import type { ElementType } from "react";
+export type RouteModule = CoreRouteModule<ElementType>;
+export type { DataModule };
+
+export * from "./entry-server";