feat: pnpm 7 and remix

stefango · Jul 16, 2022 · 7c9f382 · 7c9f382
1 parent 3c82a5e
commit 7c9f382
Show file tree

Hide file tree

Showing 16 changed files with 4,106 additions and 2,271 deletions.
diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@ Preview:
 
 ```bash
 # Start React App
-$ pnpm start --filter "react-app"
+$ pnpm --filter "react-app" start
 ```
 
 ![](https://user-images.githubusercontent.com/13595509/146680807-a15b411e-075a-438e-b020-f3d88240c55d.png)
@@ -47,7 +47,7 @@ $ pnpm start --filter "vite-app"
 #### Node.js App
 
 ```bash
-$ pnpm start --filter "node-app"
+$ pnpm --filter "node-app" start
 ```
 
 ![](https://user-images.githubusercontent.com/13595509/146680754-8b6798f4-fa4f-43ff-929e-911e1343ef88.png)
@@ -56,7 +56,7 @@ $ pnpm start --filter "node-app"
 
 ```bash
 # using `...` will run `start` script of dumi-app and all of its dependencies:
-$ pnpm run start --parallel --filter "dumi-app..."
+$ pnpm --filter "dumi-app..." --parallel start
 ```
 
 ![](https://user-images.githubusercontent.com/13595509/170510753-df4a6016-46b2-4252-9722-b765261c1a19.gif)
@@ -66,17 +66,17 @@ $ pnpm run start --parallel --filter "dumi-app..."
 ### packages/shared
 
 ```bash
-$ pnpm dev --filter "@infras/shared"
+$ pnpm --filter "@infras/shared" dev
 ```
 
 ### packages/ui
 
 ```bash
-$ pnpm dev --filter "@infras/ui"
+$ pnpm --filter "@infras/ui" dev
 ```
 
 ### packages/native
 
 ```bash
-$ pnpm build --filter "@infras/native"
+$ pnpm --filter "@infras/native" build
 ```
diff --git a/apps/dumi-app/package.json b/apps/dumi-app/package.json
@@ -35,13 +35,14 @@
     "react": "^18.1.0"
   },
   "devDependencies": {
+    "umi": "^3.0.0",
     "@infras/ui": "workspace:*",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^13.2.0",
     "@types/jest": "^27.0.3",
     "@umijs/fabric": "^2.8.1",
     "@umijs/test": "^3.0.5",
-    "dumi": "^1.1.0",
+    "dumi": "^1.1.45",
     "father-build": "^1.17.2",
     "gh-pages": "^3.0.0",
     "lint-staged": "^10.0.7",

diff --git a/apps/remix-app/.eslintrc b/apps/remix-app/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["@remix-run/eslint-config", "@remix-run/eslint-config/node"]
+}
diff --git a/apps/remix-app/.gitignore b/apps/remix-app/.gitignore
@@ -1,8 +1,11 @@
 node_modules
 
 .cache
+.env
 .vercel
 .output
 
-public/build
-api/_build
+/build/
+/public/build
+/api/index.js
+/api/index.js.map
diff --git a/apps/remix-app/api/index.js b/apps/remix-app/api/index.js
diff --git a/apps/remix-app/app/entry.client.tsx b/apps/remix-app/app/entry.client.tsx
@@ -1,4 +1,4 @@
+import { RemixBrowser } from "@remix-run/react";
 import { hydrate } from "react-dom";
-import { RemixBrowser } from "remix";
 
 hydrate(<RemixBrowser />, document);
diff --git a/apps/remix-app/app/entry.server.tsx b/apps/remix-app/app/entry.server.tsx
@@ -1,21 +1,21 @@
+import type { EntryContext } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
 import { renderToString } from "react-dom/server";
-import { RemixServer } from "remix";
-import type { EntryContext } from "remix";
 
 export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext
 ) {
-  const markup = renderToString(
+  let markup = renderToString(
     <RemixServer context={remixContext} url={request.url} />
   );
 
   responseHeaders.set("Content-Type", "text/html");
 
   return new Response("<!DOCTYPE html>" + markup, {
     status: responseStatusCode,
-    headers: responseHeaders
+    headers: responseHeaders,
   });
 }
diff --git a/apps/remix-app/app/root.tsx b/apps/remix-app/app/root.tsx
@@ -1,31 +1,31 @@
+import type { MetaFunction } from "@remix-run/node";
 import {
   Links,
   LiveReload,
   Meta,
   Outlet,
   Scripts,
-  ScrollRestoration
-} from "remix";
-import type { MetaFunction } from "remix";
+  ScrollRestoration,
+} from "@remix-run/react";
 
-export const meta: MetaFunction = () => {
-  return { title: "New Remix App" };
-};
+export const meta: MetaFunction = () => ({
+  charset: "utf-8",
+  title: "New Remix App",
+  viewport: "width=device-width,initial-scale=1",
+});
 
 export default function App() {
   return (
     <html lang="en">
       <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
       </head>
       <body>
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        {process.env.NODE_ENV === "development" && <LiveReload />}
+        <LiveReload />
       </body>
     </html>
   );

diff --git a/apps/remix-app/package.json b/apps/remix-app/package.json
@@ -1,29 +1,30 @@
 {
-  "private": true,
   "name": "remix-app",
-  "description": "",
-  "license": "",
+  "private": true,
+  "sideEffects": false,
   "scripts": {
-    "build": "npm run prebuild && remix build",
+    "build": "remix build",
     "dev": "remix dev",
-    "start": "remix dev",
-    "prebuild": "remix setup node"
+    "start": "remix dev"
   },
   "dependencies": {
     "@infras/shared": "workspace:*",
     "@infras/ui": "workspace:*",
-    "@remix-run/react": "^1.4.3",
-    "@remix-run/serve": "^1.4.3",
-    "@remix-run/vercel": "^1.4.3",
+    "@remix-run/node": "^1.6.5",
+    "@remix-run/react": "^1.6.5",
+    "@remix-run/vercel": "^1.6.5",
+    "@vercel/node": "^2.4.2",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "remix": "^1.4.3"
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@remix-run/dev": "^1.4.3",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
-    "typescript": "^4.5.5"
+    "@remix-run/dev": "^1.6.5",
+    "@remix-run/eslint-config": "^1.6.5",
+    "@remix-run/serve": "^1.6.5",
+    "@types/react": "^17.0.45",
+    "@types/react-dom": "^17.0.17",
+    "eslint": "^8.15.0",
+    "typescript": "^4.7.4"
   },
   "dependenciesMeta": {
     "@infras/ui": {
@@ -32,6 +33,5 @@
   },
   "engines": {
     "node": ">=16"
-  },
-  "sideEffects": false
+  }
 }
diff --git a/apps/remix-app/remix.config.js b/apps/remix-app/remix.config.js
@@ -1,10 +1,13 @@
-/**
- * @type {import('@remix-run/dev/config').AppConfig}
- */
+/** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
-  appDirectory: "app",
-  assetsBuildDirectory: "public/build",
-  publicPath: "/build/",
-  serverBuildDirectory: "api/_build",
-  ignoredRouteFiles: [".*"]
+  serverBuildTarget: "vercel",
+  // When running locally in development mode, we use the built in remix
+  // server. This does not understand the vercel lambda module format,
+  // so we default back to the standard build output.
+  server: process.env.NODE_ENV === "development" ? undefined : "./server.js",
+  ignoredRouteFiles: ["**/.*"],
+  // appDirectory: "app",
+  // assetsBuildDirectory: "public/build",
+  // serverBuildPath: "api/index.js",
+  // publicPath: "/build/",
 };
diff --git a/apps/remix-app/server.js b/apps/remix-app/server.js
@@ -0,0 +1,4 @@
+import { createRequestHandler } from "@remix-run/vercel";
+import * as build from "@remix-run/dev/server-build";
+
+export default createRequestHandler({ build, mode: process.env.NODE_ENV });
diff --git a/apps/remix-app/tsconfig.json b/apps/remix-app/tsconfig.json
@@ -4,18 +4,20 @@
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2019"],
     "isolatedModules": true,
+    "esModuleInterop": true,
     "jsx": "react-jsx",
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "target": "ES2019",
     "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"]
     },
-    "noEmit": true,
-    "forceConsistentCasingInFileNames": true,
-    "allowJs": true,
-    "esModuleInterop": true,
-    "moduleResolution": "node"
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true
   }
 }
diff --git a/apps/remix-app/vercel.json b/apps/remix-app/vercel.json