Use esbuild for the compiler -wip

remix-run · Mar 26, 2021 · d87b60c · d87b60c
1 parent d59386b
commit d87b60c
Show file tree

Hide file tree

Showing 24 changed files with 590 additions and 117 deletions.
diff --git a/fixtures/tutorial/app/entry.client.tsx b/fixtures/tutorial/app/entry.client.tsx
@@ -1,8 +1,8 @@
 import ReactDOM from "react-dom";
-import Remix from "@remix-run/react/browser";
+import { RemixBrowser } from "@remix-run/react";
 
 ReactDOM.hydrate(
   // @ts-ignore
-  <Remix />,
+  <RemixBrowser />,
   document
 );
diff --git a/fixtures/tutorial/app/entry.server.tsx b/fixtures/tutorial/app/entry.server.tsx
@@ -1,6 +1,6 @@
 import ReactDOMServer from "react-dom/server";
 import type { EntryContext } from "@remix-run/node";
-import Remix from "@remix-run/react/server";
+import { RemixServer } from "@remix-run/react";
 
 export default function handleRequest(
   request: Request,
@@ -9,7 +9,7 @@ export default function handleRequest(
   remixContext: EntryContext
 ) {
   let markup = ReactDOMServer.renderToString(
-    <Remix context={remixContext} url={request.url} />
+    <RemixServer context={remixContext} url={request.url} />
   );
 
   return new Response("<!DOCTYPE html>" + markup, {

diff --git a/fixtures/tutorial/app/root.tsx b/fixtures/tutorial/app/root.tsx
@@ -2,15 +2,15 @@ import { Link, Outlet } from "react-router-dom";
 import type { LoaderFunction, LinksFunction } from "@remix-run/node";
 import { Meta, Scripts, Links, useRouteData } from "@remix-run/react";
 
-import styles from "url:./styles/global.css";
+// import styles from "url:./styles/global.css";
 
 export let loader: LoaderFunction = async () => {
   return { date: new Date() };
 };
 
-export let links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
+// export let links: LinksFunction = () => {
+//   return [{ rel: "stylesheet", href: styles }];
+// };
 
 export default function App() {
   let data = useRouteData();

diff --git a/fixtures/tutorial/app/routes/gists.new.tsx b/fixtures/tutorial/app/routes/gists.new.tsx
@@ -1,11 +1,11 @@
 import type { LinksFunction } from "@remix-run/node";
 import { Form, usePendingFormSubmit } from "@remix-run/react";
 
-import styles from "url:../styles/gists.new.css";
+// import styles from "url:../styles/gists.new.css";
 
-export let links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
+// export let links: LinksFunction = () => {
+//   return [{ rel: "stylesheet", href: styles }];
+// };
 
 export default function NewGist() {
   let pendingForm = usePendingFormSubmit();

diff --git a/fixtures/tutorial/app/routes/index.tsx b/fixtures/tutorial/app/routes/index.tsx
@@ -1,15 +1,15 @@
 import type { LoaderFunction, LinksFunction } from "@remix-run/node";
 import { useRouteData } from "@remix-run/react";
 
-import styles from "url:../styles/index.css";
+// import styles from "url:../styles/index.css";
 
 export let loader: LoaderFunction = async () => {
   return { message: "this is awesome 😎" };
 };
 
-export let links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
+// export let links: LinksFunction = () => {
+//   return [{ rel: "stylesheet", href: styles }];
+// };
 
 export function meta() {
   return {

diff --git a/fixtures/tutorial/package.json b/fixtures/tutorial/package.json
@@ -3,11 +3,12 @@
   "name": "tutorial",
   "version": "1.0.0",
   "scripts": {
-    "prebuild": "cp -r ../../build/node_modules/* node_modules",
-    "build": "node node_modules/@remix-run/cli build",
-    "predev": "cp -r ../../build/node_modules/* node_modules",
+    "install_remix": "mkdir -p node_modules && cp -r ../../build/node_modules/* node_modules",
+    "prebuild": "yarn run install_remix",
+    "build": "node node_modules/@remix-run/dev/cli build2",
+    "predev": "yarn run install_remix",
     "dev": "pm2-dev pm2.config.js",
-    "prestart": "cp -r ../../build/node_modules/* node_modules",
+    "prestart": "yarn run install_remix",
     "start": "node server.js"
   },
   "dependencies": {

diff --git a/fixtures/tutorial/server.js b/fixtures/tutorial/server.js
@@ -13,6 +13,7 @@ app.use(express.static("public"));
 app.all(
   "*",
   createRequestHandler({
+    build: require("./build/app"),
     getLoadContext() {
       // Whatever you return here will be passed as `context` to your loaders.
     }

diff --git a/packages/dev/build.ts b/packages/dev/build.ts
@@ -9,9 +9,14 @@ export function isBuildMode(mode: any): mode is BuildMode {
 
 export enum BuildTarget {
   Browser = "browser",
-  Server = "server"
+  Server = "server", // TODO: remove
+  Node14 = "node14"
 }
 
 export function isBuildTarget(target: any): target is BuildTarget {
-  return target === BuildTarget.Browser || target === BuildTarget.Server;
+  return (
+    target === BuildTarget.Browser ||
+    target === BuildTarget.Server ||
+    target === BuildTarget.Node14
+  );
 }
diff --git a/packages/dev/cli.ts b/packages/dev/cli.ts
@@ -39,6 +39,9 @@ switch (cli.input[0]) {
   case "build":
     commands.build(cli.input[1], process.env.NODE_ENV);
     break;
+  case "build2":
+    commands.build2(cli.input[1], process.env.NODE_ENV);
+    break;
   case "run":
     commands.run(cli.input[1]);
     break;

diff --git a/packages/dev/cli/commands.ts b/packages/dev/cli/commands.ts
@@ -1,5 +1,6 @@
 import { BuildMode, isBuildMode, BuildTarget } from "../build";
 import * as compiler from "../compiler";
+import * as compiler2 from "../compiler2";
 import { readConfig } from "../config";
 import { startDevServer } from "../server";
 
@@ -33,6 +34,17 @@ export async function build(remixRoot: string, mode?: string) {
   console.log("done!");
 }
 
+export async function build2(remixRoot: string, mode?: string) {
+  let buildMode = isBuildMode(mode) ? mode : BuildMode.Production;
+
+  console.log(`Building Remix app for ${buildMode}...`);
+
+  let config = await readConfig(remixRoot);
+  await compiler2.build(config);
+
+  console.log("done!");
+}
+
 /**
  * Runs the dev server for a Remix app.
  */

diff --git a/packages/dev/compiler.ts b/packages/dev/compiler.ts
@@ -281,18 +281,18 @@ function getBuildPlugins({ mode, target }: Required<BuildOptions>): Plugin[] {
     })
   ];
 
-  if (target === BuildTarget.Browser) {
-    plugins.push(
-      alias({
-        entries: [
-          {
-            find: "@remix-run/react",
-            replacement: "@remix-run/react/esm"
-          }
-        ]
-      })
-    );
-  }
+  // if (target === BuildTarget.Browser) {
+  //   plugins.push(
+  //     alias({
+  //       entries: [
+  //         {
+  //           find: "@remix-run/react",
+  //           replacement: "@remix-run/react/esm"
+  //         }
+  //       ]
+  //     })
+  //   );
+  // }
 
   plugins.push(
     clientServer({ target }),