├── .env.example
├── .gitignore
├── README.md
├── app
    ├── contact.module.css
    ├── entry.client.tsx
    ├── entry.server.tsx
    ├── index.css
    ├── lib
    │   ├── contact.ts
    │   ├── db.server.ts
    │   └── error-page.tsx
    ├── root.tsx
    └── routes
    │   ├── contacts
    │       ├── $contactId.tsx
    │       └── $contactId
    │       │   ├── destroy.tsx
    │       │   ├── edit.tsx
    │       │   └── index.tsx
    │   └── index.tsx
├── config.browser.ts
├── config.server.ts
├── docs
    ├── migration-guide.md
    └── remix-css-loader.md
├── package-lock.json
├── package.json
├── prisma
    ├── schema.prisma
    └── seed.ts
├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
├── scripts
    ├── build.ts
    ├── compiler-kit
    │   ├── build.ts
    │   ├── index.ts
    │   ├── interface.ts
    │   └── watch.ts
    ├── compiler-webpack
    │   ├── browser-create-compiler.ts
    │   ├── get-exports.ts
    │   ├── index.ts
    │   ├── loaders
    │   │   ├── browser-route-loader.ts
    │   │   ├── empty-module-loader.ts
    │   │   └── remix-css-loader.ts
    │   └── server-create-compiler.ts
    ├── dev-server
    │   ├── index.ts
    │   ├── live-reload.ts
    │   ├── serve.ts
    │   └── vendor
    │   │   ├── exit-hook.ts
    │   │   ├── parse-ms.ts
    │   │   └── pretty-ms.ts
    ├── dev.ts
    └── utils
    │   ├── channel.ts
    │   └── object.ts
├── tsconfig.json
└── types
    ├── module.css.d.ts
    └── remix.env.d.ts


/.env.example:
--------------------------------------------------------------------------------
1 | DATABASE_URL="file:./data.db?connection_limit=1"


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | # remix
26 | /.cache/
27 | /public/build/
28 | 
29 | # prisma
30 | /prisma/*.db
31 | .env
32 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Remix Webpack Demo
 2 | 
 3 | This is an example of using Webpack as the compiler for a Remix app. While not supported as a long-term solution, we offer this example as a migration path for your React Router / Webpack apps to Remix.
 4 | 
 5 | To migrate your Webpack-based React Router app, **check out the [migration guide](./docs/migration-guide.md)**. 👀
 6 | 
 7 | ---
 8 | 
 9 | How this repo was made:
10 | 
11 | 1. Create a new project with [Create React App](https://create-react-app.dev/)
12 | 2. 👉 Implement the [React Router v6.4 tutorial](https://reactrouter.com/en/main/start/tutorial)
13 | 3. 🚚 [Migrate to Remix](https://remix.run/docs/en/v1/guides/migrating-react-router-app)
14 | 4. Replace standard Remix dev tools with Webpack-based compiler found in `./scripts`
15 | 
16 | The commit history includes 👉 and 🚚 emojis so you can follow along with which commits came from which step.
17 | 
18 | ## Setup
19 | 
20 | ### 1 Install
21 | 
22 | ```sh
23 | npm install
24 | ```
25 | 
26 | ### 2 `.env`
27 | 
28 | Copy `.env.example` as `.env`:
29 | 
30 | ```sh
31 | DATABASE_URL="file:./dev.db"
32 | ```
33 | 
34 | ### 3 Initialize the database
35 | 
36 | ```sh
37 | npx prisma db push
38 | ```
39 | 
40 | If you want some data for development, seed the database:
41 | 
42 | ```sh
43 | npx prisma db seed
44 | ```
45 | 
46 | ### 4 Run the app
47 | 
48 | ```sh
49 | # development
50 | npm run dev
51 | 
52 | # production build
53 | npm run build
54 | npm start
55 | ```
56 | 
57 | ## Configuration
58 | 
59 | Webpack configs can be found at:
60 | 
61 | - [`./config.browser.ts`](./config.browser.ts)
62 | - [`./config.server.ts`](./config.server.ts)
63 | 
64 | You can add loaders or plugins there to add support for any features you'd like from Webpack!
65 | 
66 | For example, you could install [`postcss-loader`](https://webpack.js.org/loaders/postcss-loader/) and add it to both the browser and server configs to get [PostCSS](https://postcss.org/) features!
67 | 


--------------------------------------------------------------------------------
/app/contact.module.css:
--------------------------------------------------------------------------------
1 | .title {
2 |   background-color: red;
3 | }
4 | 


--------------------------------------------------------------------------------
/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | import { RemixBrowser } from "@remix-run/react";
2 | import { hydrateRoot } from "react-dom/client";
3 | 
4 | hydrateRoot(document, <RemixBrowser />);
5 | 


--------------------------------------------------------------------------------
/app/entry.server.tsx:
--------------------------------------------------------------------------------
 1 | import { EntryContext } from "@remix-run/node";
 2 | import { RemixServer } from "@remix-run/react";
 3 | import { renderToString } from "react-dom/server";
 4 | 
 5 | export default function handleRequest(
 6 |   request: Request,
 7 |   responseStatusCode: number,
 8 |   responseHeaders: Headers,
 9 |   remixContext: EntryContext
10 | ) {
11 |   let markup = renderToString(
12 |     <RemixServer context={remixContext} url={request.url} />
13 |   );
14 |   responseHeaders.set("Content-Type", "text/html");
15 |   return new Response("<!DOCTYPE html>" + markup, {
16 |     status: responseStatusCode,
17 |     headers: responseHeaders,
18 |   });
19 | }
20 | 


--------------------------------------------------------------------------------
/app/index.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   box-sizing: border-box;
  3 | }
  4 | *,
  5 | *:before,
  6 | *:after {
  7 |   box-sizing: inherit;
  8 | }
  9 | 
 10 | body {
 11 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
 12 |     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 13 |     sans-serif;
 14 |   -webkit-font-smoothing: antialiased;
 15 |   -moz-osx-font-smoothing: grayscale;
 16 | }
 17 | 
 18 | code {
 19 |   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
 20 |     monospace;
 21 | }
 22 | 
 23 | html,
 24 | body {
 25 |   height: 100%;
 26 |   margin: 0;
 27 |   line-height: 1.5;
 28 |   color: #121212;
 29 | }
 30 | textarea,
 31 | input,
 32 | button {
 33 |   font-size: 1rem;
 34 |   font-family: inherit;
 35 |   border: none;
 36 |   border-radius: 8px;
 37 |   padding: 0.5rem 0.75rem;
 38 |   box-shadow: 0 0px 1px hsla(0, 0%, 0%, 0.2), 0 1px 2px hsla(0, 0%, 0%, 0.2);
 39 |   background-color: white;
 40 |   line-height: 1.5;
 41 |   margin: 0;
 42 | }
 43 | button {
 44 |   color: #3992ff;
 45 |   font-weight: 500;
 46 | }
 47 | 
 48 | textarea:hover,
 49 | input:hover,
 50 | button:hover {
 51 |   box-shadow: 0 0px 1px hsla(0, 0%, 0%, 0.6), 0 1px 2px hsla(0, 0%, 0%, 0.2);
 52 | }
 53 | 
 54 | button:active {
 55 |   box-shadow: 0 0px 1px hsla(0, 0%, 0%, 0.4);
 56 |   transform: translateY(1px);
 57 | }
 58 | 
 59 | #contact h1 {
 60 |   display: flex;
 61 |   align-items: flex-start;
 62 |   gap: 1rem;
 63 | }
 64 | #contact h1 form {
 65 |   display: flex;
 66 |   align-items: center;
 67 |   margin-top: 0.25rem;
 68 | }
 69 | #contact h1 form button {
 70 |   box-shadow: none;
 71 |   font-size: 1.5rem;
 72 |   font-weight: 400;
 73 |   padding: 0;
 74 | }
 75 | #contact h1 form button[value="true"] {
 76 |   color: #a4a4a4;
 77 | }
 78 | #contact h1 form button[value="true"]:hover,
 79 | #contact h1 form button[value="false"] {
 80 |   color: #eeb004;
 81 | }
 82 | 
 83 | form[action$="destroy"] button {
 84 |   color: #f44250;
 85 | }
 86 | 
 87 | .sr-only {
 88 |   position: absolute;
 89 |   width: 1px;
 90 |   height: 1px;
 91 |   padding: 0;
 92 |   margin: -1px;
 93 |   overflow: hidden;
 94 |   clip: rect(0, 0, 0, 0);
 95 |   white-space: nowrap;
 96 |   border-width: 0;
 97 | }
 98 | 
 99 | #root {
100 |   display: flex;
101 |   height: 100%;
102 |   width: 100%;
103 | }
104 | 
105 | #sidebar {
106 |   width: 22rem;
107 |   background-color: #f7f7f7;
108 |   border-right: solid 1px #e3e3e3;
109 |   display: flex;
110 |   flex-direction: column;
111 | }
112 | 
113 | #sidebar > * {
114 |   padding-left: 2rem;
115 |   padding-right: 2rem;
116 | }
117 | 
118 | #sidebar h1 {
119 |   font-size: 1rem;
120 |   font-weight: 500;
121 |   display: flex;
122 |   align-items: center;
123 |   margin: 0;
124 |   padding: 1rem 2rem;
125 |   border-top: 1px solid #e3e3e3;
126 |   order: 1;
127 |   line-height: 1;
128 | }
129 | 
130 | #sidebar h1::before {
131 |   content: url("data:image/svg+xml,%3Csvg width='25' height='18' viewBox='0 0 25 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.4127 6.4904C18.6984 6.26581 18.3295 6.34153 17.5802 6.25965C16.4219 6.13331 15.9604 5.68062 15.7646 4.51554C15.6551 3.86516 15.7844 2.9129 15.5048 2.32334C14.9699 1.19921 13.7183 0.695046 12.461 0.982805C11.3994 1.22611 10.516 2.28708 10.4671 3.37612C10.4112 4.61957 11.1197 5.68054 12.3363 6.04667C12.9143 6.22097 13.5284 6.3087 14.132 6.35315C15.2391 6.43386 15.3241 7.04923 15.6236 7.55574C15.8124 7.87508 15.9954 8.18975 15.9954 9.14193C15.9954 10.0941 15.8112 10.4088 15.6236 10.7281C15.3241 11.2334 14.9547 11.5645 13.8477 11.6464C13.244 11.6908 12.6288 11.7786 12.0519 11.9528C10.8353 12.3201 10.1268 13.3799 10.1828 14.6234C10.2317 15.7124 11.115 16.7734 12.1766 17.0167C13.434 17.3056 14.6855 16.8003 15.2204 15.6762C15.5013 15.0866 15.6551 14.4187 15.7646 13.7683C15.9616 12.6032 16.423 12.1505 17.5802 12.0242C18.3295 11.9423 19.1049 12.0242 19.8071 11.6253C20.5491 11.0832 21.212 10.2696 21.212 9.14192C21.212 8.01428 20.4976 6.83197 19.4127 6.4904Z' fill='%23F44250'/%3E%3Cpath d='M7.59953 11.7459C6.12615 11.7459 4.92432 10.5547 4.92432 9.09441C4.92432 7.63407 6.12615 6.44287 7.59953 6.44287C9.0729 6.44287 10.2747 7.63407 10.2747 9.09441C10.2747 10.5536 9.07172 11.7459 7.59953 11.7459Z' fill='black'/%3E%3Cpath d='M2.64217 17.0965C1.18419 17.093 -0.0034949 15.8971 7.72743e-06 14.4356C0.00352588 12.9765 1.1994 11.7888 2.66089 11.7935C4.12004 11.797 5.30772 12.9929 5.30306 14.4544C5.29953 15.9123 4.10366 17.1 2.64217 17.0965Z' fill='black'/%3E%3Cpath d='M22.3677 17.0965C20.9051 17.1046 19.7046 15.9217 19.6963 14.4649C19.6882 13.0023 20.8712 11.8017 22.3279 11.7935C23.7906 11.7854 24.9911 12.9683 24.9993 14.4251C25.0075 15.8866 23.8245 17.0883 22.3677 17.0965Z' fill='black'/%3E%3C/svg%3E%0A");
132 |   margin-right: 0.5rem;
133 |   position: relative;
134 |   top: 1px;
135 | }
136 | 
137 | #sidebar > div {
138 |   display: flex;
139 |   align-items: center;
140 |   gap: 0.5rem;
141 |   padding-top: 1rem;
142 |   padding-bottom: 1rem;
143 |   border-bottom: 1px solid #e3e3e3;
144 | }
145 | 
146 | #sidebar > div form {
147 |   position: relative;
148 | }
149 | 
150 | #sidebar > div form input[type="search"] {
151 |   width: 100%;
152 |   padding-left: 2rem;
153 |   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='%23999' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' /%3E%3C/svg%3E");
154 |   background-repeat: no-repeat;
155 |   background-position: 0.625rem 0.75rem;
156 |   background-size: 1rem;
157 |   position: relative;
158 | }
159 | 
160 | #sidebar > div form input[type="search"].loading {
161 |   background-image: none;
162 | }
163 | 
164 | #search-spinner {
165 |   width: 1rem;
166 |   height: 1rem;
167 |   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M20 4v5h-.582m0 0a8.001 8.001 0 00-15.356 2m15.356-2H15M4 20v-5h.581m0 0a8.003 8.003 0 0015.357-2M4.581 15H9' /%3E%3C/svg%3E");
168 |   animation: spin 1s infinite linear;
169 |   position: absolute;
170 |   left: 0.625rem;
171 |   top: 0.75rem;
172 | }
173 | 
174 | @keyframes spin {
175 |   from {
176 |     transform: rotate(0deg);
177 |   }
178 |   to {
179 |     transform: rotate(360deg);
180 |   }
181 | }
182 | 
183 | #sidebar nav {
184 |   flex: 1;
185 |   overflow: auto;
186 |   padding-top: 1rem;
187 | }
188 | 
189 | #sidebar nav a span {
190 |   float: right;
191 |   color: #eeb004;
192 | }
193 | #sidebar nav a.active span {
194 |   color: inherit;
195 | }
196 | 
197 | i {
198 |   color: #818181;
199 | }
200 | #sidebar nav .active i {
201 |   color: inherit;
202 | }
203 | 
204 | #sidebar ul {
205 |   padding: 0;
206 |   margin: 0;
207 |   list-style: none;
208 | }
209 | 
210 | #sidebar li {
211 |   margin: 0.25rem 0;
212 | }
213 | 
214 | #sidebar nav a {
215 |   display: flex;
216 |   align-items: center;
217 |   justify-content: space-between;
218 |   overflow: hidden;
219 | 
220 |   white-space: pre;
221 |   padding: 0.5rem;
222 |   border-radius: 8px;
223 |   color: inherit;
224 |   text-decoration: none;
225 |   gap: 1rem;
226 | }
227 | 
228 | #sidebar nav a:hover {
229 |   background: #e3e3e3;
230 | }
231 | 
232 | #sidebar nav a.active {
233 |   background: hsl(224, 98%, 58%);
234 |   color: white;
235 | }
236 | 
237 | #sidebar nav a.pending {
238 |   color: hsl(224, 98%, 58%);
239 | }
240 | 
241 | #detail {
242 |   flex: 1;
243 |   padding: 2rem 4rem;
244 |   width: 100%;
245 | }
246 | 
247 | #detail.loading {
248 |   opacity: 0.25;
249 |   transition: opacity 200ms;
250 |   transition-delay: 200ms;
251 | }
252 | 
253 | #contact {
254 |   max-width: 40rem;
255 |   display: flex;
256 | }
257 | 
258 | #contact h1 {
259 |   font-size: 2rem;
260 |   font-weight: 700;
261 |   margin: 0;
262 |   line-height: 1.2;
263 | }
264 | 
265 | #contact h1 + p {
266 |   margin: 0;
267 | }
268 | 
269 | #contact h1 + p + p {
270 |   white-space: break-spaces;
271 | }
272 | 
273 | #contact h1:focus {
274 |   outline: none;
275 |   color: hsl(224, 98%, 58%);
276 | }
277 | 
278 | #contact a[href*="twitter"] {
279 |   display: flex;
280 |   font-size: 1.5rem;
281 |   color: #3992ff;
282 |   text-decoration: none;
283 | }
284 | #contact a[href*="twitter"]:hover {
285 |   text-decoration: underline;
286 | }
287 | 
288 | #contact img {
289 |   width: 12rem;
290 |   height: 12rem;
291 |   background: #c8c8c8;
292 |   margin-right: 2rem;
293 |   border-radius: 1.5rem;
294 |   object-fit: cover;
295 | }
296 | 
297 | #contact h1 ~ div {
298 |   display: flex;
299 |   gap: 0.5rem;
300 |   margin: 1rem 0;
301 | }
302 | 
303 | #contact-form {
304 |   display: flex;
305 |   max-width: 40rem;
306 |   flex-direction: column;
307 |   gap: 1rem;
308 | }
309 | #contact-form > p:first-child {
310 |   margin: 0;
311 |   padding: 0;
312 | }
313 | #contact-form > p:first-child > :nth-child(2) {
314 |   margin-right: 1rem;
315 | }
316 | #contact-form > p:first-child,
317 | #contact-form label {
318 |   display: flex;
319 | }
320 | #contact-form p:first-child span,
321 | #contact-form label span {
322 |   width: 8rem;
323 | }
324 | #contact-form p:first-child input,
325 | #contact-form label input,
326 | #contact-form label textarea {
327 |   flex-grow: 2;
328 | }
329 | 
330 | #contact-form-avatar {
331 |   margin-right: 2rem;
332 | }
333 | 
334 | #contact-form-avatar img {
335 |   width: 12rem;
336 |   height: 12rem;
337 |   background: hsla(0, 0%, 0%, 0.2);
338 |   border-radius: 1rem;
339 | }
340 | 
341 | #contact-form-avatar input {
342 |   box-sizing: border-box;
343 |   width: 100%;
344 | }
345 | 
346 | #contact-form p:last-child {
347 |   display: flex;
348 |   gap: 0.5rem;
349 |   margin: 0 0 0 8rem;
350 | }
351 | 
352 | #contact-form p:last-child button[type="button"] {
353 |   color: inherit;
354 | }
355 | 
356 | #zero-state {
357 |   margin: 2rem auto;
358 |   text-align: center;
359 |   color: #818181;
360 | }
361 | 
362 | #zero-state a {
363 |   color: inherit;
364 | }
365 | 
366 | #zero-state a:hover {
367 |   color: #121212;
368 | }
369 | 
370 | #zero-state:before {
371 |   display: block;
372 |   margin-bottom: 0.5rem;
373 |   content: url("data:image/svg+xml,%3Csvg width='50' height='33' viewBox='0 0 50 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M38.8262 11.1744C37.3975 10.7252 36.6597 10.8766 35.1611 10.7128C32.8444 10.4602 31.9215 9.55475 31.5299 7.22456C31.3108 5.92377 31.5695 4.01923 31.0102 2.8401C29.9404 0.591789 27.4373 -0.416556 24.9225 0.158973C22.7992 0.645599 21.0326 2.76757 20.9347 4.94569C20.8228 7.43263 22.2399 9.5546 24.6731 10.2869C25.8291 10.6355 27.0574 10.8109 28.2646 10.8998C30.4788 11.0613 30.6489 12.292 31.2479 13.3051C31.6255 13.9438 31.9914 14.5731 31.9914 16.4775C31.9914 18.3819 31.6231 19.0112 31.2479 19.6499C30.6489 20.6606 29.9101 21.3227 27.696 21.4865C26.4887 21.5754 25.2581 21.7508 24.1044 22.0994C21.6712 22.834 20.2542 24.9537 20.366 27.4406C20.4639 29.6187 22.2306 31.7407 24.3538 32.2273C26.8686 32.8052 29.3717 31.7945 30.4415 29.5462C31.0032 28.3671 31.3108 27.0312 31.5299 25.7304C31.9238 23.4002 32.8467 22.4948 35.1611 22.2421C36.6597 22.0784 38.2107 22.2421 39.615 21.4443C41.099 20.36 42.4248 18.7328 42.4248 16.4775C42.4248 14.2222 40.9961 11.8575 38.8262 11.1744Z' fill='%23E3E3E3'/%3E%3Cpath d='M15.1991 21.6854C12.2523 21.6854 9.84863 19.303 9.84863 16.3823C9.84863 13.4615 12.2523 11.0791 15.1991 11.0791C18.1459 11.0791 20.5497 13.4615 20.5497 16.3823C20.5497 19.3006 18.1436 21.6854 15.1991 21.6854Z' fill='%23E3E3E3'/%3E%3Cpath d='M5.28442 32.3871C2.36841 32.38 -0.00698992 29.9882 1.54551e-05 27.0652C0.00705187 24.1469 2.39884 21.7715 5.32187 21.7808C8.24022 21.7878 10.6156 24.1796 10.6063 27.1027C10.5992 30.0187 8.20746 32.3941 5.28442 32.3871Z' fill='%23E3E3E3'/%3E%3Cpath d='M44.736 32.387C41.8107 32.4033 39.4096 30.0373 39.3932 27.1237C39.3769 24.1984 41.7428 21.7973 44.6564 21.7808C47.5817 21.7645 49.9828 24.1305 49.9993 27.0441C50.0156 29.9671 47.6496 32.3705 44.736 32.387Z' fill='%23E3E3E3'/%3E%3C/svg%3E%0A");
374 | }
375 | 
376 | #error-page {
377 |   display: flex;
378 |   flex-direction: column;
379 |   align-items: center;
380 |   justify-content: center;
381 |   width: 100%;
382 | }
383 | 


--------------------------------------------------------------------------------
/app/lib/contact.ts:
--------------------------------------------------------------------------------
 1 | import { db } from "~/lib/db.server";
 2 | 
 3 | export type { Contact } from "@prisma/client";
 4 | 
 5 | function matchCaseInsensitive(query: string, text?: string) {
 6 |   return text && text.toLocaleLowerCase().includes(query);
 7 | }
 8 | 
 9 | export async function getContacts(query?: string) {
10 |   await fakeNetwork(`getContacts:${query}`);
11 |   let contacts = await db.contact.findMany({
12 |     orderBy: [{ first: "asc" }, { last: "asc" }],
13 |   });
14 |   return query
15 |     ? contacts.filter(
16 |         (contact) =>
17 |           matchCaseInsensitive(query, contact.first ?? undefined) ||
18 |           matchCaseInsensitive(query, contact.last ?? undefined)
19 |       )
20 |     : contacts;
21 | }
22 | 
23 | export async function createContact() {
24 |   await fakeNetwork();
25 |   let contact = await db.contact.create({ data: {} });
26 |   return contact;
27 | }
28 | 
29 | export async function getContact(id: string) {
30 |   await fakeNetwork(`contact:${id}`);
31 |   let contact = await db.contact.findUnique({ where: { id } });
32 |   return contact;
33 | }
34 | 
35 | export async function updateContact(
36 |   id: string,
37 |   updates: Parameters<typeof db.contact.update>[0]["data"]
38 | ) {
39 |   await fakeNetwork();
40 |   let contact = await db.contact.update({ where: { id }, data: updates });
41 |   return contact;
42 | }
43 | 
44 | export async function deleteContact(id: string) {
45 |   let contact = await db.contact.delete({ where: { id } });
46 |   return contact;
47 | }
48 | 
49 | // fake a cache so we don't slow down stuff we've already seen
50 | let fakeCache: Record<string, boolean> = {};
51 | 
52 | async function fakeNetwork(key?: string) {
53 |   if (!key) {
54 |     fakeCache = {};
55 |     return;
56 |   }
57 |   if (fakeCache[key]) {
58 |     return;
59 |   }
60 | 
61 |   fakeCache[key] = true;
62 |   return new Promise((res) => {
63 |     setTimeout(res, Math.random() * 800);
64 |   });
65 | }
66 | 


--------------------------------------------------------------------------------
/app/lib/db.server.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from "@prisma/client";
 2 | 
 3 | let db: PrismaClient;
 4 | 
 5 | declare global {
 6 |   var __db: PrismaClient | undefined;
 7 | }
 8 | 
 9 | // this is needed because in development we don't want to restart
10 | // the server with every change, but we want to make sure we don't
11 | // create a new connection to the DB with every change either.
12 | if (process.env.NODE_ENV === "production") {
13 |   db = new PrismaClient();
14 | } else {
15 |   if (!global.__db) {
16 |     global.__db = new PrismaClient();
17 |   }
18 |   db = global.__db;
19 | }
20 | 
21 | export { db };
22 | 


--------------------------------------------------------------------------------
/app/lib/error-page.tsx:
--------------------------------------------------------------------------------
 1 | export default function ErrorPage({
 2 |   error,
 3 | }: {
 4 |   error: { message?: string; statusText?: string };
 5 | }) {
 6 |   console.error(error);
 7 | 
 8 |   return (
 9 |     <div id="error-page">
10 |       <h1>Oops!</h1>
11 |       <p>Sorry, an unexpected error has occurred.</p>
12 |       <p>
13 |         <i>{error.statusText || error.message}</i>
14 |       </p>
15 |     </div>
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/app/root.tsx:
--------------------------------------------------------------------------------
  1 | import { json, LoaderArgs, redirect } from "@remix-run/node";
  2 | import {
  3 |   Form,
  4 |   Links,
  5 |   LiveReload,
  6 |   NavLink,
  7 |   Outlet,
  8 |   Scripts,
  9 |   useLoaderData,
 10 |   useSubmit,
 11 |   useTransition as useNavigation,
 12 | } from "@remix-run/react";
 13 | import { useEffect } from "react";
 14 | 
 15 | import { createContact, getContacts } from "~/lib/contact";
 16 | import ErrorPage from "~/lib/error-page";
 17 | import styles from "~/index.css";
 18 | 
 19 | export function links() {
 20 |   return [{ rel: "stylesheet", href: styles }];
 21 | }
 22 | 
 23 | export async function loader({ request }: LoaderArgs) {
 24 |   const url = new URL(request.url);
 25 |   const q = url.searchParams.get("q")!;
 26 |   const contacts = await getContacts(q);
 27 |   return json({ contacts, q });
 28 | }
 29 | 
 30 | export async function action() {
 31 |   const contact = await createContact();
 32 |   return redirect(`/contacts/${contact.id}/edit`);
 33 | }
 34 | 
 35 | export default function Root() {
 36 |   const { contacts, q } = useLoaderData<typeof loader>();
 37 |   const navigation = useNavigation();
 38 |   const submit = useSubmit();
 39 | 
 40 |   const searching =
 41 |     navigation.location &&
 42 |     new URLSearchParams(navigation.location.search).has("q");
 43 | 
 44 |   useEffect(() => {
 45 |     (document.getElementById("q") as HTMLInputElement).value = q;
 46 |   }, [q]);
 47 |   return (
 48 |     <html lang="en">
 49 |       <head>
 50 |         <meta charSet="utf-8" />
 51 |         <link rel="icon" href="/favicon.ico" />
 52 |         <meta name="viewport" content="width=device-width, initial-scale=1" />
 53 |         <meta name="theme-color" content="#000000" />
 54 |         <meta name="description" content="My beautiful React app" />
 55 |         <link rel="apple-touch-icon" href="/logo192.png" />
 56 |         <link rel="manifest" href="/manifest.json" />
 57 |         <title>My React App</title>
 58 |         <Links />
 59 |       </head>
 60 |       <body>
 61 |         <div id="root">
 62 |           <div id="sidebar">
 63 |             <h1>React Router Contacts</h1>
 64 |             <div>
 65 |               <Form id="search-form" role="search">
 66 |                 <input
 67 |                   id="q"
 68 |                   className={searching ? "loading" : ""}
 69 |                   aria-label="Search contacts"
 70 |                   placeholder="Search"
 71 |                   type="search"
 72 |                   name="q"
 73 |                   defaultValue={q}
 74 |                   onChange={(event) => {
 75 |                     const isFirstSearch = q == null;
 76 |                     submit(event.currentTarget.form, {
 77 |                       replace: !isFirstSearch,
 78 |                     });
 79 |                   }}
 80 |                 />
 81 |                 <div id="search-spinner" aria-hidden hidden={!searching} />
 82 |                 <div className="sr-only" aria-live="polite"></div>
 83 |               </Form>
 84 |               <Form method="post">
 85 |                 <button type="submit">New</button>
 86 |               </Form>
 87 |             </div>
 88 |             <nav>
 89 |               {contacts.length ? (
 90 |                 <ul>
 91 |                   {contacts.map((contact) => (
 92 |                     <li key={contact.id}>
 93 |                       <NavLink
 94 |                         to={`contacts/${contact.id}`}
 95 |                         className={({ isActive }) =>
 96 |                           isActive
 97 |                             ? "active"
 98 |                             : // `isPending` isn't in Remix yet, otherwise this would be easier
 99 |                             navigation.state === "loading" &&
100 |                               navigation.location.pathname.endsWith(
101 |                                 "/" + contact.id
102 |                               )
103 |                             ? "pending"
104 |                             : ""
105 |                         }
106 |                       >
107 |                         {contact.first || contact.last ? (
108 |                           <>
109 |                             {contact.first} {contact.last}
110 |                           </>
111 |                         ) : (
112 |                           <i>No Name</i>
113 |                         )}{" "}
114 |                         {contact.favorite && <span>★</span>}
115 |                       </NavLink>
116 |                     </li>
117 |                   ))}
118 |                 </ul>
119 |               ) : (
120 |                 <p>
121 |                   <i>No contacts</i>
122 |                 </p>
123 |               )}
124 |             </nav>
125 |           </div>
126 |           <div
127 |             id="detail"
128 |             className={navigation.state === "loading" ? "loading" : ""}
129 |           >
130 |             <Outlet />
131 |           </div>
132 |         </div>
133 |         <Scripts />
134 |         <LiveReload />
135 |       </body>
136 |     </html>
137 |   );
138 | }
139 | 
140 | export function ErrorBoundary({
141 |   error,
142 | }: {
143 |   error: Error & { statusText?: string };
144 | }) {
145 |   return <ErrorPage error={error} />;
146 | }
147 | 


--------------------------------------------------------------------------------
/app/routes/contacts/$contactId.tsx:
--------------------------------------------------------------------------------
 1 | import { Outlet, useCatch } from "@remix-run/react";
 2 | import ErrorPage from "~/lib/error-page";
 3 | 
 4 | export default function ContactId() {
 5 |   return <Outlet />;
 6 | }
 7 | 
 8 | export function CatchBoundary() {
 9 |   const caught = useCatch();
10 |   return <ErrorPage error={caught} />;
11 | }
12 | 
13 | export function ErrorBoundary({
14 |   error,
15 | }: {
16 |   error: Error & { statusText?: string };
17 | }) {
18 |   return <ErrorPage error={error} />;
19 | }
20 | 


--------------------------------------------------------------------------------
/app/routes/contacts/$contactId/destroy.tsx:
--------------------------------------------------------------------------------
1 | import { ActionArgs, redirect } from "@remix-run/node";
2 | 
3 | import { deleteContact } from "~/lib/contact";
4 | 
5 | export async function action({ params }: ActionArgs) {
6 |   await deleteContact(params.contactId!);
7 |   return redirect("/");
8 | }
9 | 


--------------------------------------------------------------------------------
/app/routes/contacts/$contactId/edit.tsx:
--------------------------------------------------------------------------------
 1 | import { ActionArgs, LoaderArgs, redirect } from "@remix-run/node";
 2 | import { Form, useLoaderData, useNavigate } from "@remix-run/react";
 3 | 
 4 | import { getContact, updateContact } from "~/lib/contact";
 5 | 
 6 | export async function loader({ params }: LoaderArgs) {
 7 |   const contact = await getContact(params.contactId!);
 8 |   if (!contact) {
 9 |     throw new Response("", {
10 |       status: 404,
11 |       statusText: "Not Found",
12 |     });
13 |   }
14 |   return contact;
15 | }
16 | 
17 | export async function action({ request, params }: ActionArgs) {
18 |   const formData = await request.formData();
19 |   const updates = Object.fromEntries(formData);
20 |   await updateContact(params.contactId!, updates);
21 |   return redirect(`/contacts/${params.contactId}`);
22 | }
23 | 
24 | export default function EditContact() {
25 |   const contact = useLoaderData<typeof loader>();
26 |   const navigate = useNavigate();
27 | 
28 |   return (
29 |     <Form method="post" id="contact-form">
30 |       <p>
31 |         <span>Name</span>
32 |         <input
33 |           placeholder="First"
34 |           aria-label="First name"
35 |           type="text"
36 |           name="first"
37 |           defaultValue={contact.first ?? undefined}
38 |         />
39 |         <input
40 |           placeholder="Last"
41 |           aria-label="Last name"
42 |           type="text"
43 |           name="last"
44 |           defaultValue={contact.last ?? undefined}
45 |         />
46 |       </p>
47 |       <label>
48 |         <span>Twitter</span>
49 |         <input
50 |           type="text"
51 |           name="twitter"
52 |           placeholder="@jack"
53 |           defaultValue={contact.twitter ?? undefined}
54 |         />
55 |       </label>
56 |       <label>
57 |         <span>Avatar URL</span>
58 |         <input
59 |           placeholder="https://example.com/avatar.jpg"
60 |           aria-label="Avatar URL"
61 |           type="text"
62 |           name="avatar"
63 |           defaultValue={contact.avatar ?? undefined}
64 |         />
65 |       </label>
66 |       <label>
67 |         <span>Notes</span>
68 |         <textarea
69 |           name="notes"
70 |           defaultValue={contact.notes ?? undefined}
71 |           rows={6}
72 |         />
73 |       </label>
74 |       <p>
75 |         <button type="submit">Save</button>
76 |         <button
77 |           type="button"
78 |           onClick={() => {
79 |             navigate(-1);
80 |           }}
81 |         >
82 |           Cancel
83 |         </button>
84 |       </p>
85 |     </Form>
86 |   );
87 | }
88 | 


--------------------------------------------------------------------------------
/app/routes/contacts/$contactId/index.tsx:
--------------------------------------------------------------------------------
  1 | import { ActionArgs, LoaderArgs, SerializeFrom } from "@remix-run/node";
  2 | import { Form, useFetcher, useLoaderData } from "@remix-run/react";
  3 | 
  4 | import { link as cssLink, styles } from "~/contact.module.css";
  5 | import {
  6 |   type Contact as ContactT,
  7 |   getContact,
  8 |   updateContact,
  9 | } from "~/lib/contact";
 10 | 
 11 | export const links = () => [cssLink];
 12 | 
 13 | export async function loader({ params }: LoaderArgs) {
 14 |   const contact = await getContact(params.contactId!);
 15 |   if (!contact) {
 16 |     throw new Response("", {
 17 |       status: 404,
 18 |       statusText: "Not Found",
 19 |     });
 20 |   }
 21 |   return contact;
 22 | }
 23 | 
 24 | export async function action({ request, params }: ActionArgs) {
 25 |   let formData = await request.formData();
 26 |   return updateContact(params.contactId!, {
 27 |     favorite: formData.get("favorite") === "true",
 28 |   });
 29 | }
 30 | 
 31 | export default function Contact() {
 32 |   const contact = useLoaderData<typeof loader>();
 33 | 
 34 |   return (
 35 |     <div id="contact">
 36 |       <div>
 37 |         {/* eslint-disable-next-line jsx-a11y/alt-text */}
 38 |         <img key={contact.avatar} src={contact.avatar ?? undefined} />
 39 |       </div>
 40 | 
 41 |       <div>
 42 |         <h1 className={styles.title}>
 43 |           {contact.first || contact.last ? (
 44 |             <>
 45 |               {contact.first} {contact.last}
 46 |             </>
 47 |           ) : (
 48 |             <i>No Name</i>
 49 |           )}{" "}
 50 |           <Favorite contact={contact} />
 51 |         </h1>
 52 | 
 53 |         {contact.twitter && (
 54 |           <p>
 55 |             <a
 56 |               target="_blank"
 57 |               href={`https://twitter.com/${contact.twitter}`}
 58 |               rel="noreferrer"
 59 |             >
 60 |               {contact.twitter}
 61 |             </a>
 62 |           </p>
 63 |         )}
 64 | 
 65 |         {contact.notes && <p>{contact.notes}</p>}
 66 | 
 67 |         <div>
 68 |           <Form action="edit">
 69 |             <button type="submit">Edit</button>
 70 |           </Form>
 71 |           <Form
 72 |             method="post"
 73 |             action="destroy"
 74 |             onSubmit={(event) => {
 75 |               if (
 76 |                 // eslint-disable-next-line no-restricted-globals
 77 |                 !confirm("Please confirm you want to delete this record.")
 78 |               ) {
 79 |                 event.preventDefault();
 80 |               }
 81 |             }}
 82 |           >
 83 |             <button type="submit">Delete</button>
 84 |           </Form>
 85 |         </div>
 86 |       </div>
 87 |     </div>
 88 |   );
 89 | }
 90 | 
 91 | function Favorite({ contact }: { contact: SerializeFrom<ContactT> }) {
 92 |   const fetcher = useFetcher();
 93 |   let favorite = contact.favorite;
 94 |   if (fetcher.submission?.formData) {
 95 |     favorite = fetcher.submission.formData.get("favorite") === "true";
 96 |   }
 97 |   return (
 98 |     <fetcher.Form method="post">
 99 |       <button
100 |         name="favorite"
101 |         value={favorite ? "false" : "true"}
102 |         aria-label={favorite ? "Remove from favorites" : "Add to favorites"}
103 |       >
104 |         {favorite ? "★" : "☆"}
105 |       </button>
106 |     </fetcher.Form>
107 |   );
108 | }
109 | 


--------------------------------------------------------------------------------
/app/routes/index.tsx:
--------------------------------------------------------------------------------
 1 | export default function Index() {
 2 |   return (
 3 |     <p id="zero-state">
 4 |       This is a demo for React Router.
 5 |       <br />
 6 |       Check out{" "}
 7 |       <a href="https://reactrouter.com/">the docs at reactrouter.com</a>.
 8 |     </p>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/config.browser.ts:
--------------------------------------------------------------------------------
  1 | import path from "path";
  2 | import { builtinModules } from "module";
  3 | 
  4 | import { ESBuildMinifyPlugin } from "esbuild-loader";
  5 | import type { RemixConfig } from "@remix-run/dev/dist/config";
  6 | import webpack from "webpack";
  7 | import VirtualModulesPlugin from "webpack-virtual-modules";
  8 | 
  9 | import * as obj from "./scripts/utils/object";
 10 | 
 11 | const BROWSER_ROUTE_PREFIX = "__remix_browser_route__";
 12 | const BROWSER_ROUTE_REGEX = new RegExp("/" + BROWSER_ROUTE_PREFIX);
 13 | const getBrowserRoutes = (remixConfig: RemixConfig): [string, string][] =>
 14 |   obj
 15 |     .entries(remixConfig.routes)
 16 |     .map(([id, route]) => [
 17 |       id,
 18 |       path.resolve(
 19 |         remixConfig.appDirectory,
 20 |         path.dirname(route.file),
 21 |         BROWSER_ROUTE_PREFIX + path.basename(route.file)
 22 |       ),
 23 |     ]);
 24 | 
 25 | const mode =
 26 |   process.env.NODE_ENV === "development" ? "development" : "production";
 27 | 
 28 | export const createBrowserConfig = (
 29 |   remixConfig: RemixConfig
 30 | ): webpack.Configuration => {
 31 |   const browserRoutes = getBrowserRoutes(remixConfig);
 32 |   return {
 33 |     mode,
 34 |     devtool: mode === "development" ? "inline-cheap-source-map" : undefined,
 35 |     target: "web",
 36 |     resolve: {
 37 |       fallback: obj.fromEntries(builtinModules.map((m) => [m, false] as const)),
 38 |       alias: {
 39 |         "~": remixConfig.appDirectory,
 40 |       },
 41 |       extensions: [".tsx", ".ts", ".jsx", ".js"],
 42 |     },
 43 |     entry: {
 44 |       "entry.client": path.resolve(
 45 |         remixConfig.appDirectory,
 46 |         remixConfig.entryClientFile
 47 |       ),
 48 |       ...obj.fromEntries(browserRoutes),
 49 |     },
 50 |     module: {
 51 |       rules: [
 52 |         {
 53 |           test: /\.[j|t]sx?$/,
 54 |           loader: "esbuild-loader",
 55 |           exclude: /node_modules/,
 56 |           options: {
 57 |             target: "es2019",
 58 |             loader: "tsx",
 59 |           },
 60 |         },
 61 | 
 62 |         {
 63 |           test: /\.module\.css$/i,
 64 |           use: [
 65 |             {
 66 |               loader: require.resolve(
 67 |                 "./scripts/compiler-webpack/loaders/remix-css-loader.ts"
 68 |               ),
 69 |               options: { emit: true },
 70 |             },
 71 |             {
 72 |               loader: "css-loader",
 73 |               options: { modules: true },
 74 |             },
 75 |           ],
 76 |         },
 77 |         {
 78 |           test: /\.css$/i,
 79 |           type: "asset/resource",
 80 |           exclude: /\.module\.css$/i,
 81 |         },
 82 | 
 83 |         {
 84 |           test: /\.server\./,
 85 |           loader: require.resolve(
 86 |             path.join(
 87 |               __dirname,
 88 |               "./scripts/compiler-webpack/loaders/empty-module-loader.ts"
 89 |             )
 90 |           ),
 91 |         },
 92 |         {
 93 |           test: BROWSER_ROUTE_REGEX,
 94 |           loader: require.resolve(
 95 |             path.join(
 96 |               __dirname,
 97 |               "./scripts/compiler-webpack/loaders/browser-route-loader.ts"
 98 |             )
 99 |           ),
100 |           options: { remixConfig, browserRouteRegex: BROWSER_ROUTE_REGEX },
101 |         },
102 |       ],
103 |     },
104 |     output: {
105 |       path: remixConfig.assetsBuildDirectory,
106 |       publicPath: remixConfig.publicPath,
107 |       module: true,
108 |       library: { type: "module" },
109 |       chunkFormat: "module",
110 |       chunkLoading: "import",
111 |       assetModuleFilename: "_assets/[name]-[contenthash][ext]",
112 |       cssChunkFilename: "_assets/[name]-[contenthash][ext]",
113 |       filename: "[name]-[contenthash].js",
114 |       chunkFilename: "[name]-[contenthash].js",
115 |     },
116 |     optimization: {
117 |       moduleIds: "deterministic",
118 |       runtimeChunk: "single",
119 | 
120 |       // treeshake unused code in development
121 |       // needed so that browser build does not pull in server code
122 |       usedExports: true,
123 |       innerGraph: true,
124 |       splitChunks: {
125 |         chunks: "async", // not all, async as workaround
126 |       },
127 |       minimize: mode === "production",
128 |       minimizer: [new ESBuildMinifyPlugin({ target: "es2019" })],
129 |     },
130 |     externalsType: "module",
131 |     experiments: {
132 |       outputModule: true,
133 |     },
134 |     plugins: [
135 |       new VirtualModulesPlugin(
136 |         obj.fromEntries(browserRoutes.map(([, route]) => [route, ""] as const))
137 |       ),
138 | 
139 |       new webpack.EnvironmentPlugin({
140 |         REMIX_DEV_SERVER_WS_PORT: JSON.stringify(remixConfig.devServerPort),
141 |       }),
142 | 
143 |       // shim react so it can be used without importing
144 |       new webpack.ProvidePlugin({ React: ["react"] }),
145 |     ],
146 |   };
147 | };
148 | 


--------------------------------------------------------------------------------
/config.server.ts:
--------------------------------------------------------------------------------
  1 | import path from "path";
  2 | 
  3 | import type { RemixConfig } from "@remix-run/dev/dist/config";
  4 | import webpack from "webpack";
  5 | import VirtualModulesPlugin from "webpack-virtual-modules";
  6 | import nodeExternals from "webpack-node-externals";
  7 | 
  8 | const mode =
  9 |   process.env.NODE_ENV === "development" ? "development" : "production";
 10 | 
 11 | export const createServerConfig = (
 12 |   remixConfig: RemixConfig
 13 | ): webpack.Configuration => {
 14 |   const entryPoint = path.resolve(remixConfig.rootDirectory, "server.ts");
 15 | 
 16 |   const isModule = remixConfig.serverModuleFormat === "esm";
 17 |   return {
 18 |     mode,
 19 |     devtool: mode === "development" ? "inline-cheap-source-map" : undefined,
 20 |     context: remixConfig.rootDirectory,
 21 |     target: "node",
 22 |     resolve: {
 23 |       alias: {
 24 |         "~": remixConfig.appDirectory,
 25 |       },
 26 |       extensions: [".tsx", ".ts", ".jsx", ".js"],
 27 |     },
 28 |     optimization: {
 29 |       moduleIds: "deterministic",
 30 |     },
 31 |     experiments: isModule ? { outputModule: true } : undefined,
 32 |     externalsType: isModule ? "module" : undefined,
 33 |     externalsPresets: { node: true },
 34 |     externals: [
 35 |       nodeExternals({
 36 |         allowlist: [
 37 |           /@remix-run\/dev\/server-build/,
 38 |           // https://github.com/liady/webpack-node-externals#how-can-i-bundle-required-assets-ie-css-files-from-node_modules
 39 |           /\.(?!(?:jsx?|json)$).{1,5}$/i,
 40 |         ],
 41 |       }),
 42 |     ],
 43 |     entry: entryPoint,
 44 |     output: {
 45 |       filename: path.basename(remixConfig.serverBuildPath),
 46 |       library: { type: isModule ? "module" : "commonjs" },
 47 |       chunkFormat: isModule ? "module" : "commonjs",
 48 |       chunkLoading: isModule ? "import" : "require",
 49 |       module: isModule,
 50 |       path: path.dirname(remixConfig.serverBuildPath),
 51 |       publicPath: remixConfig.publicPath,
 52 |       assetModuleFilename: "_assets/[name]-[contenthash][ext]",
 53 |       cssChunkFilename: "_assets/[name]-[contenthash][ext]",
 54 |     },
 55 |     module: {
 56 |       rules: [
 57 |         {
 58 |           test: /\.[j|t]sx?$/,
 59 |           loader: "esbuild-loader",
 60 |           exclude: /node_modules/,
 61 |           options: {
 62 |             target: "es2019",
 63 |             loader: "tsx",
 64 |           },
 65 |         },
 66 | 
 67 |         {
 68 |           test: /\.module\.css$/i,
 69 |           use: [
 70 |             {
 71 |               loader: require.resolve(
 72 |                 "./scripts/compiler-webpack/loaders/remix-css-loader.ts"
 73 |               ),
 74 |               options: { emit: false },
 75 |             },
 76 |             {
 77 |               loader: "css-loader",
 78 |               options: { modules: true },
 79 |             },
 80 |           ],
 81 |         },
 82 |         {
 83 |           test: /\.css$/i,
 84 |           type: "asset/resource",
 85 |           exclude: /\.module\.css$/i,
 86 |         },
 87 |       ],
 88 |     },
 89 |     plugins: [
 90 |       new VirtualModulesPlugin({
 91 |         [entryPoint]: remixConfig.serverBuildTargetEntryModule,
 92 |       }),
 93 |       new webpack.EnvironmentPlugin({
 94 |         REMIX_DEV_SERVER_WS_PORT: JSON.stringify(remixConfig.devServerPort),
 95 |         NODE_ENV: JSON.stringify(mode),
 96 |       }),
 97 |       new webpack.ProvidePlugin({ React: ["react"] }),
 98 |     ],
 99 |   };
100 | };
101 | 


--------------------------------------------------------------------------------
/docs/migration-guide.md:
--------------------------------------------------------------------------------
 1 | # Migration guide
 2 | 
 3 | Migrate your [React Router](https://reactrouter.com/en/main) app to Remix!
 4 | 
 5 | ---
 6 | 
 7 | ⚠️⚠️⚠️
 8 | 
 9 | **DO NOT USE THIS UNLESS YOU PLAN TO MIGRATE TO THE OFFICIAL REMIX COMPILER**
10 | 
11 | ⚠️⚠️⚠️
12 | 
13 | This is _NOT_ intended to replace the official Remix compiler.
14 | 
15 | This is designed to be a stepping stone for users migrating from Webpack or [Create React App](https://create-react-app.dev/).
16 | 
17 | The idea is that if you depend on Webpack features, you can use this approach to immediately get up and running with Remix.
18 | 
19 | Then you can incrementally migrate your app to not depend on Webpack-isms and eventually use the Remix compiler.
20 | 
21 | ## 1: Upgrade to React Router 6.4
22 | 
23 | Follow the [React Router upgrade guide](https://reactrouter.com/en/main/upgrading/v5).
24 | 
25 | ## 2: Start migrating to Remix
26 | 
27 | Follow the [Remix Migration guide](https://remix.run/docs/en/v1/guides/migrating-react-router-app) but STOP 🛑 when you get to ["Replacing your bundler with Remix"](https://remix.run/docs/en/v1/guides/migrating-react-router-app#replacing-the-bundler-with-remix).
28 | 
29 | ## 3: Install the Webpack compiler
30 | 
31 | Copy the [unofficial Remix Webpack compiler scripts](../scripts/) from this repo into `scripts/` directory at the root of your Remix project.
32 | 
33 | You'll also need to install the dependencies of the unofficial Remix Webpack compiler:
34 | 
35 | ```sh
36 | npm install -D \
37 |   @types/express \
38 |   @types/fs-extra \
39 |   @types/webpack-node-externals \
40 |   @types/ws \
41 |   esbuild \
42 |   esbuild-loader \
43 |   express \
44 |   fs-extra \
45 |   ts-node \
46 |   webpack \
47 |   webpack-node-externals \
48 |   webpack-virtual-modules \
49 |   ws
50 | ```
51 | 
52 | ## 4: `package.json` scripts
53 | 
54 | Copy `build`, `start`, and `dev` scripts to your `package.json`
55 | 
56 | ```json
57 | {
58 |   "scripts": {
59 |     "build": "ts-node ./scripts/build.ts",
60 |     "start": "remix-serve build",
61 |     "dev": "NODE_ENV=development ts-node ./scripts/dev.ts"
62 |   }
63 | }
64 | ```
65 | 
66 | ## 5: Browser and server configs
67 | 
68 | Copy [`config.browser.ts`](../config.browser.ts) and [`config.server.ts`](../config.server.ts) into the root of your Remix project.
69 | 
70 | NOTE: you may need add these files to your `tsconfig.json` if Typescript complains:
71 | 
72 | ```json
73 | {
74 |   // you can add _just_ the configs if you want, but this is easier
75 |   "include": ["**/*.ts", "**/*.tsx"]
76 | }
77 | ```
78 | 
79 | ## That's it!
80 | 
81 | You should now be able to run the scripts successfully.
82 | 
83 | You can also customize the Webpack configs for the browser or server to add Webpack loaders and plugins for any features you depend on.
84 | 


--------------------------------------------------------------------------------
/docs/remix-css-loader.md:
--------------------------------------------------------------------------------
 1 | # remix-css-loader
 2 | 
 3 | [This loader](../scripts/compiler-webpack/loaders/remix-css-loader.ts) adapts the output of `css-loader` so that it is Remix compatible.
 4 | 
 5 | You should probably use it any time that you use `css-loader` (instead of simply using `type: "asset/resource'`) in your Webpack config.
 6 | 
 7 | It does so by importing the JS module produced by `css-loader` which contains exports for the transpiled CSS as well as the mapping for user-facing classnames to their hashed counterparts.
 8 | 
 9 | It then computes then writes the transpiled CSS to the configured output location.
10 | 
11 | Finally, it resolves `*.module.css` as:
12 | 
13 | ```ts
14 | export const link: { rel: "stylesheet"; href: string };
15 | export const styles: Record<string, string>;
16 | ```
17 | 
18 | ## Example: CSS Modules 
19 | 
20 | For [CSS Modules](https://github.com/css-modules/css-modules), first add `css-loader` and `remix-css-loader` to your config:
21 | 
22 | ```ts
23 | {
24 |   module: {
25 |     rules: [
26 |       {
27 |         // handle CSS Modules
28 |         test: /\.module\.css$/i,
29 |         use: [
30 |           {
31 |             loader: require.resolve("./loaders/remix-css-loader.ts"),
32 |             // emit the CSS for the browser build
33 |             // set `emit: false` for the server build
34 |             options: { emit: true },
35 |           },
36 |           {
37 |             loader: "css-loader",
38 |             options: { modules: true },
39 |           },
40 |         ],
41 |       },
42 |       {
43 |         // handle normal CSS
44 |         test: /\.css$/i,
45 |         type: "asset/resource",
46 |         exclude: /\.module\.css$/i,
47 |       },
48 |     ]
49 |   }
50 | }
51 | ```
52 | 
53 | ### Usage
54 | 
55 | ```css
56 | /* my.module.css */
57 | 
58 | .title {
59 |   background-color: red;
60 | }
61 | ```
62 | 
63 | ```ts
64 | import { link as cssLink, styles } from "./path/to/my.module.css"
65 | 
66 | // add `link` to your route's links
67 | export const links = () => [cssLink]
68 | 
69 | export default function Route() {
70 |   // use `styles` as a normal CSS Modules import
71 |   return <h1 className={styles.title}>Hello world!</h1>
72 | }
73 | ```


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "dependencies": {
 4 |     "@prisma/client": "^4.5.0",
 5 |     "@remix-run/node": "^1.13.0",
 6 |     "@remix-run/react": "^1.13.0",
 7 |     "@remix-run/serve": "^1.13.0",
 8 |     "@types/node": "^16.11.66",
 9 |     "@types/react": "^18.0.21",
10 |     "@types/react-dom": "^18.0.6",
11 |     "react": "^18.2.0",
12 |     "react-dom": "^18.2.0",
13 |     "react-router-dom": "^6.4.2",
14 |     "typescript": "^4.8.4"
15 |   },
16 |   "scripts": {
17 |     "build": "ts-node ./scripts/build.ts",
18 |     "start": "remix-serve build",
19 |     "dev": "NODE_ENV=development ts-node ./scripts/dev.ts"
20 |   },
21 |   "prisma": {
22 |     "seed": "ts-node prisma/seed.ts"
23 |   },
24 |   "browserslist": {
25 |     "production": [
26 |       ">0.2%",
27 |       "not dead",
28 |       "not op_mini all"
29 |     ],
30 |     "development": [
31 |       "last 1 chrome version",
32 |       "last 1 firefox version",
33 |       "last 1 safari version"
34 |     ]
35 |   },
36 |   "devDependencies": {
37 |     "@remix-run/dev": "^1.13.0",
38 |     "@types/express": "^4.17.14",
39 |     "@types/fs-extra": "^9.0.13",
40 |     "@types/loader-utils": "^2.0.3",
41 |     "@types/webpack-node-externals": "^2.5.3",
42 |     "@types/ws": "^8.5.3",
43 |     "css-loader": "^6.7.1",
44 |     "dotenv": "^16.0.3",
45 |     "esbuild": "^0.15.12",
46 |     "esbuild-loader": "^2.20.0",
47 |     "express": "^4.18.2",
48 |     "fs-extra": "^10.1.0",
49 |     "loader-utils": "^3.2.0",
50 |     "prisma": "^4.5.0",
51 |     "ts-node": "^10.9.1",
52 |     "webpack": "^5.74.0",
53 |     "webpack-node-externals": "^3.0.0",
54 |     "webpack-virtual-modules": "^0.4.5",
55 |     "ws": "^8.9.0"
56 |   },
57 |   "prettier": {}
58 | }
59 | 


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | // This is your Prisma schema file,
 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
 3 | 
 4 | generator client {
 5 |   provider = "prisma-client-js"
 6 | }
 7 | 
 8 | datasource db {
 9 |   provider = "sqlite"
10 |   url      = env("DATABASE_URL")
11 | }
12 | 
13 | model Contact {
14 |   id        String    @id @default(uuid())
15 |   createdAt DateTime  @default(now())
16 |   first     String?
17 |   last      String?
18 |   favorite  Boolean   @default(false)
19 |   avatar    String?
20 |   twitter   String?
21 |   notes     String?
22 | }


--------------------------------------------------------------------------------
/prisma/seed.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from "@prisma/client";
 2 | const db = new PrismaClient();
 3 | 
 4 | type CreateContact = Parameters<typeof db.contact.create>[0]["data"];
 5 | 
 6 | const contacts: CreateContact[] = [
 7 |   { first: "Dennis", last: "Beatty" },
 8 |   { first: "Greg", last: "Brimble" },
 9 |   { first: "Ryan", last: "Dahl" },
10 |   { first: "Sarah", last: "Dayan" },
11 |   { first: "Ceora", last: "Ford" },
12 |   { first: "Anthony", last: "Frehner" },
13 |   { first: "Ariza", last: "Fukuzaki" },
14 |   {
15 |     first: "Henri",
16 |     last: "Helvetica",
17 |     avatar:
18 |       "https://pbs.twimg.com/profile_images/960605708202004481/MMNCgNgM_400x400.jpg",
19 |     twitter: "@HenriHelvetica",
20 |     favorite: true,
21 |     notes: "How To WebPageTest",
22 |   },
23 |   { first: "Michael", last: "Jackson" },
24 | ];
25 | 
26 | async function seed() {
27 |   await Promise.all(
28 |     contacts.map((contact) => {
29 |       return db.contact.create({ data: contact });
30 |     })
31 |   );
32 | }
33 | 
34 | seed();
35 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/remix-webpack-demo/0a4dacdc928041fd499c1465b43bb2b168b2e466/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/remix-webpack-demo/0a4dacdc928041fd499c1465b43bb2b168b2e466/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remix-run/remix-webpack-demo/0a4dacdc928041fd499c1465b43bb2b168b2e466/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/scripts/build.ts:
--------------------------------------------------------------------------------
 1 | import { readConfig } from "@remix-run/dev/dist/config.js";
 2 | import {
 3 |   createBrowserCompiler,
 4 |   createServerCompiler,
 5 | } from "./compiler-webpack";
 6 | import { build } from "./compiler-kit";
 7 | 
 8 | async function command() {
 9 |   console.time("Remix Compile");
10 |   let remixConfig = await readConfig();
11 |   let compiler = {
12 |     browser: createBrowserCompiler(remixConfig),
13 |     server: createServerCompiler(remixConfig),
14 |   };
15 |   await build(remixConfig, compiler);
16 |   console.timeEnd("Remix Compile");
17 | }
18 | 
19 | command();
20 | 


--------------------------------------------------------------------------------
/scripts/compiler-kit/build.ts:
--------------------------------------------------------------------------------
 1 | import fs from "fs";
 2 | import path from "path";
 3 | 
 4 | import { AssetsManifest } from "@remix-run/dev/dist/compiler/assets";
 5 | import { RemixConfig } from "@remix-run/dev/dist/config";
 6 | 
 7 | import { createChannel } from "../utils/channel";
 8 | import type { RemixCompiler } from "./interface";
 9 | 
10 | // TODO error handling for if browser/server builds fail (e.g. syntax error)
11 | // enumerate different types of errors
12 | // console.log hints for users if we know how to diagnose the error from experience
13 | // consider throwing custom Remix-specific error type if its an error we know more stuff about
14 | 
15 | /**
16 |  * Coordinate the hand-off of the asset manifest between the browser and server builds.
17 |  * Additionally, write the asset manifest to the file system.
18 |  */
19 | export const build = async (
20 |   config: RemixConfig,
21 |   compiler: RemixCompiler
22 | ): Promise<void> => {
23 |   let manifestChannel = createChannel<AssetsManifest>();
24 |   let browser = compiler.browser.build(manifestChannel);
25 | 
26 |   // write manifest
27 |   manifestChannel.read().then((manifest) => {
28 |     fs.mkdirSync(config.assetsBuildDirectory, { recursive: true });
29 |     fs.writeFileSync(
30 |       path.resolve(config.assetsBuildDirectory, path.basename(manifest.url!)),
31 |       `window.__remixManifest=${JSON.stringify(manifest)};`
32 |     );
33 |   });
34 | 
35 |   let server = compiler.server.build(manifestChannel);
36 |   await Promise.all([browser, server]);
37 | };
38 | 


--------------------------------------------------------------------------------
/scripts/compiler-kit/index.ts:
--------------------------------------------------------------------------------
1 | export type {
2 |   BrowserCompiler,
3 |   ServerCompiler,
4 |   CreateCompiler,
5 |   RemixCompiler,
6 | } from "./interface";
7 | export { build } from "./build";
8 | export { watch } from "./watch";
9 | 


--------------------------------------------------------------------------------
/scripts/compiler-kit/interface.ts:
--------------------------------------------------------------------------------
 1 | import type { AssetsManifest } from "@remix-run/dev/dist/compiler/assets";
 2 | import { RemixConfig } from "@remix-run/dev/dist/config";
 3 | 
 4 | import { ReadChannel, WriteChannel } from "../utils/channel";
 5 | 
 6 | export interface BrowserCompiler {
 7 |   // produce ./public/build/
 8 |   build: (manifestChannel: WriteChannel<AssetsManifest>) => Promise<void>;
 9 |   dispose: () => void;
10 | }
11 | export interface ServerCompiler {
12 |   // produce ./build/index.js
13 |   build: (manifestChannel: ReadChannel<AssetsManifest>) => Promise<void>;
14 |   dispose: () => void;
15 | }
16 | export type CreateCompiler<T extends BrowserCompiler | ServerCompiler> = (
17 |   config: RemixConfig
18 | ) => T;
19 | 
20 | export interface RemixCompiler {
21 |   browser: BrowserCompiler;
22 |   server: ServerCompiler;
23 | }
24 | 


--------------------------------------------------------------------------------
/scripts/compiler-kit/watch.ts:
--------------------------------------------------------------------------------
  1 | import path from "path";
  2 | 
  3 | import chokidar from "chokidar";
  4 | import { readConfig, RemixConfig } from "@remix-run/dev/dist/config";
  5 | 
  6 | import type {
  7 |   BrowserCompiler,
  8 |   CreateCompiler,
  9 |   RemixCompiler,
 10 |   ServerCompiler,
 11 | } from "./interface";
 12 | import { build } from "./build";
 13 | 
 14 | // TODO error handling for if browser/server builds fail (e.g. syntax error)
 15 | // on___Error callback
 16 | // preserve watcher for common cases, throw for exotic errors
 17 | 
 18 | const reloadConfig = async (config: RemixConfig): Promise<RemixConfig> => {
 19 |   try {
 20 |     return readConfig(config.rootDirectory);
 21 |   } catch (error) {
 22 |     // onBuildFailure(error as Error);
 23 |     console.error(error);
 24 |     throw error;
 25 |   }
 26 | };
 27 | 
 28 | const dispose = ({ browser, server }: RemixCompiler) => {
 29 |   browser.dispose();
 30 |   server.dispose();
 31 | };
 32 | 
 33 | export const watch = async (
 34 |   config: RemixConfig,
 35 |   createCompiler: {
 36 |     browser: CreateCompiler<BrowserCompiler>;
 37 |     server: CreateCompiler<ServerCompiler>;
 38 |   },
 39 |   callbacks: {
 40 |     onInitialBuild?: () => void;
 41 |     onRebuildStart?: () => void;
 42 |     onRebuildFinish?: (durationMs: number) => void;
 43 |     onFileCreated?: (file: string) => void;
 44 |     onFileChanged?: (file: string) => void;
 45 |     onFileDeleted?: (file: string) => void;
 46 |   } = {}
 47 | ): Promise<() => Promise<void>> => {
 48 |   let compiler = {
 49 |     browser: createCompiler.browser(config),
 50 |     server: createCompiler.server(config),
 51 |   };
 52 | 
 53 |   // initial build
 54 |   await build(config, compiler);
 55 |   callbacks.onInitialBuild?.();
 56 | 
 57 |   // TODO debounce
 58 |   let restart = async () => {
 59 |     callbacks.onRebuildStart?.();
 60 |     let start = Date.now();
 61 |     dispose(compiler);
 62 | 
 63 |     config = await reloadConfig(config);
 64 |     compiler = {
 65 |       browser: createCompiler.browser(config),
 66 |       server: createCompiler.server(config),
 67 |     };
 68 |     await build(config, compiler);
 69 |     callbacks.onRebuildFinish?.(Date.now() - start);
 70 |   };
 71 | 
 72 |   // TODO debounce
 73 |   let rebuild = async () => {
 74 |     callbacks.onRebuildStart?.();
 75 |     let start = Date.now();
 76 |     await build(config, compiler);
 77 |     callbacks.onRebuildFinish?.(Date.now() - start);
 78 |   };
 79 | 
 80 |   // watch files
 81 |   let toWatch = [config.appDirectory];
 82 |   if (config.serverEntryPoint) {
 83 |     toWatch.push(config.serverEntryPoint);
 84 |   }
 85 |   config.watchPaths.forEach((watchPath) => toWatch.push(watchPath));
 86 | 
 87 |   // what if route modules are not on filesystem?
 88 |   let watcher = chokidar
 89 |     .watch(toWatch, {
 90 |       persistent: true,
 91 |       ignoreInitial: true,
 92 |       awaitWriteFinish: {
 93 |         stabilityThreshold: 100,
 94 |         pollInterval: 100,
 95 |       },
 96 |     })
 97 |     .on("error", (error) => console.error(error))
 98 |     .on("change", async (file) => {
 99 |       callbacks.onFileChanged?.(file);
100 |       await rebuild();
101 |     })
102 |     .on("add", async (file) => {
103 |       callbacks.onFileCreated?.(file);
104 |       config = await reloadConfig(config);
105 |       if (isEntryPoint(config, file)) {
106 |         await restart();
107 |       } else {
108 |         await rebuild();
109 |       }
110 |     })
111 |     .on("unlink", async (file) => {
112 |       callbacks.onFileDeleted?.(file);
113 |       if (isEntryPoint(config, file)) {
114 |         await restart();
115 |       } else {
116 |         await rebuild();
117 |       }
118 |     });
119 | 
120 |   return async () => {
121 |     await watcher.close().catch(() => undefined);
122 |     dispose(compiler);
123 |   };
124 | };
125 | 
126 | function isEntryPoint(config: RemixConfig, file: string): boolean {
127 |   let appFile = path.relative(config.appDirectory, file);
128 |   let entryPoints = [
129 |     config.entryClientFile,
130 |     config.entryServerFile,
131 |     ...Object.values(config.routes).map((route) => route.file),
132 |   ];
133 |   return entryPoints.includes(appFile);
134 | }
135 | 


--------------------------------------------------------------------------------
/scripts/compiler-webpack/browser-create-compiler.ts:
--------------------------------------------------------------------------------
  1 | import path from "path";
  2 | 
  3 | import type { AssetsManifest } from "@remix-run/dev/dist/compiler/assets";
  4 | import type { RemixConfig } from "@remix-run/dev/dist/config";
  5 | import webpack from "webpack";
  6 | 
  7 | import * as obj from "../utils/object";
  8 | import { BrowserCompiler, CreateCompiler } from "../compiler-kit";
  9 | import { getExports } from "./get-exports";
 10 | import { createBrowserConfig } from "../../config.browser";
 11 | 
 12 | function createUrl(publicPath: string, file: string): string {
 13 |   return (
 14 |     publicPath.split(path.win32.sep).join("/") +
 15 |     (file || "").split(path.win32.sep).join("/")
 16 |   );
 17 | }
 18 | 
 19 | function check(stats: webpack.Stats): void {
 20 |   const statsWarningFilters = [
 21 |     "node_modules/@remix-run/react/esm/routeModules.js",
 22 |   ];
 23 |   if (stats.hasErrors()) {
 24 |     console.error(
 25 |       stats.toString({
 26 |         colors: true,
 27 |         errors: true,
 28 |         logging: "warn",
 29 |         warningsFilter: statsWarningFilters,
 30 |       })
 31 |     );
 32 |     throw new Error("Client build failed");
 33 |   }
 34 | }
 35 | 
 36 | function createNamedChunkGroupFactory(
 37 |   stats: webpack.StatsCompilation,
 38 |   publicPath: string
 39 | ): (group: string) => string[] {
 40 |   const chunksById = new Map(stats.chunks?.map((chunk) => [chunk.id, chunk]));
 41 |   return (group: string) => {
 42 |     const files = new Set<string>();
 43 |     stats.namedChunkGroups?.[group].chunks?.forEach((chunkId) => {
 44 |       const chunk = chunksById.get(chunkId);
 45 |       chunk?.files?.forEach((file) => files.add(createUrl(publicPath, file)));
 46 |     });
 47 |     return [...files];
 48 |   };
 49 | }
 50 | 
 51 | const getAssets = (
 52 |   { entrypoints }: webpack.StatsCompilation,
 53 |   entrypointId: string
 54 | ) => {
 55 |   if (entrypoints === undefined) throw Error("todo");
 56 |   const { assets } = entrypoints[entrypointId];
 57 |   if (assets === undefined) throw Error("todo");
 58 |   return assets;
 59 | };
 60 | 
 61 | async function toManifest(
 62 |   remixConfig: RemixConfig,
 63 |   stats: webpack.Stats
 64 | ): Promise<AssetsManifest> {
 65 |   const compilationStats = stats.toJson({
 66 |     modules: true,
 67 |     entrypoints: true,
 68 |     assets: true,
 69 |     groupAssetsByChunk: true,
 70 |     hash: true,
 71 |   });
 72 |   const getByNamedChunkGroup = createNamedChunkGroupFactory(
 73 |     compilationStats,
 74 |     remixConfig.publicPath
 75 |   );
 76 | 
 77 |   const entryImports = getByNamedChunkGroup("entry.client");
 78 |   const entryModule = createUrl(
 79 |     remixConfig.publicPath,
 80 |     getAssets(compilationStats, "entry.client").slice(-1)[0].name
 81 |   );
 82 |   const rootImports = getByNamedChunkGroup("root");
 83 | 
 84 |   // TODO: what are runtime imports? dynamic imports?
 85 |   // let runtimeImports = compilationStats.assetsByChunkName["runtime"].map(
 86 |   //   (asset) => createUrl(remixConfig.publicPath, asset)
 87 |   // );
 88 | 
 89 |   const routes = obj.fromEntries(
 90 |     obj.entries(remixConfig.routes).map(([routeId, route]) => {
 91 |       const assets = getAssets(compilationStats, routeId);
 92 |       const routeImports = assets
 93 |         .slice(0, -1)
 94 |         .map((asset) => createUrl(remixConfig.publicPath, asset.name));
 95 |       const routeModule = createUrl(
 96 |         remixConfig.publicPath,
 97 |         assets.slice(-1)[0].name
 98 |       );
 99 |       const routePath = path.resolve(remixConfig.appDirectory, route.file);
100 |       const routeExports = getExports(routePath, remixConfig);
101 |       return [
102 |         routeId,
103 |         {
104 |           id: route.id,
105 |           parentId: route.parentId,
106 |           path: route.path,
107 |           index: route.index,
108 |           caseSensitive: route.caseSensitive,
109 |           module: routeModule,
110 |           imports: routeImports,
111 |           hasAction: routeExports.includes("action"),
112 |           hasLoader: routeExports.includes("loader"),
113 |           hasCatchBoundary: routeExports.includes("CatchBoundary"),
114 |           hasErrorBoundary: routeExports.includes("ErrorBoundary"),
115 |         },
116 |       ] as const;
117 |     })
118 |   );
119 | 
120 |   const version = compilationStats.hash;
121 |   if (version === undefined) throw Error("todo");
122 |   return {
123 |     version,
124 |     url: createUrl(
125 |       remixConfig.publicPath,
126 |       `manifest-${version.toUpperCase()}.js`
127 |     ),
128 |     entry: {
129 |       imports: [
130 |         ...new Set([/* ...runtimeImports, */ ...entryImports, ...rootImports]),
131 |       ],
132 |       module: entryModule,
133 |     },
134 |     routes,
135 |   };
136 | }
137 | 
138 | export const createBrowserCompiler: CreateCompiler<BrowserCompiler> = (
139 |   remixConfig
140 | ) => {
141 |   const webpackConfig = createBrowserConfig(remixConfig);
142 |   const compiler = webpack(webpackConfig);
143 | 
144 |   const build: BrowserCompiler["build"] = async (manifestChannel) => {
145 |     return new Promise<void>((resolve, reject) => {
146 |       console.time("browser build");
147 |       compiler.run(async (error, stats) => {
148 |         if (error) return reject(error);
149 |         if (stats === undefined) return reject("todo");
150 |         check(stats);
151 |         const manifest = await toManifest(remixConfig, stats);
152 |         manifestChannel.write(manifest);
153 |         resolve();
154 |         console.timeEnd("browser build");
155 |       });
156 |     });
157 |   };
158 |   return {
159 |     build,
160 |     dispose: () => {
161 |       compiler.close(() => undefined);
162 |     },
163 |   };
164 | };
165 | 


--------------------------------------------------------------------------------
/scripts/compiler-webpack/get-exports.ts:
--------------------------------------------------------------------------------
 1 | import os from "os";
 2 | 
 3 | import esbuild from "esbuild";
 4 | import { RemixConfig } from "@remix-run/dev/dist/config";
 5 | 
 6 | export function getExports(
 7 |   routePath: string,
 8 |   remixConfig: RemixConfig
 9 | ): string[] {
10 |   const { metafile, errors } = esbuild.buildSync({
11 |     sourceRoot: remixConfig.appDirectory,
12 |     entryPoints: [routePath],
13 |     target: "esnext",
14 |     bundle: false,
15 |     metafile: true,
16 |     write: false,
17 |     outdir: os.tmpdir(),
18 |   });
19 | 
20 |   if (errors?.length > 0) {
21 |     throw new Error(
22 |       esbuild.formatMessagesSync(errors, { kind: "error" }).join("\n")
23 |     );
24 |   }
25 | 
26 |   const outputs = Object.values(metafile!.outputs);
27 |   if (outputs.length !== 1) {
28 |     throw Error();
29 |   }
30 |   const output = outputs[0];
31 |   return output.exports;
32 | }
33 | 


--------------------------------------------------------------------------------
/scripts/compiler-webpack/index.ts:
--------------------------------------------------------------------------------
1 | export { createBrowserCompiler } from "./browser-create-compiler";
2 | export { createServerCompiler } from "./server-create-compiler";
3 | 


--------------------------------------------------------------------------------
/scripts/compiler-webpack/loaders/browser-route-loader.ts:
--------------------------------------------------------------------------------
 1 | import type { RemixConfig } from "@remix-run/dev/dist/config";
 2 | import esbuild from "esbuild";
 3 | import type webpack from "webpack";
 4 | 
 5 | import { getExports } from "../get-exports";
 6 | 
 7 | const BROWSER_EXPORTS = [
 8 |   "CatchBoundary",
 9 |   "ErrorBoundary",
10 |   "default",
11 |   "handle",
12 |   "links",
13 |   "meta",
14 |   "unstable_shouldReload",
15 | ] as const;
16 | 
17 | async function treeshakeBrowserExports(
18 |   routePath: string,
19 |   remixConfig: RemixConfig
20 | ): Promise<string> {
21 |   const xports = getExports(routePath, remixConfig);
22 |   const browserExports = xports.filter((xport) =>
23 |     (BROWSER_EXPORTS as unknown as string[]).includes(xport)
24 |   );
25 | 
26 |   let virtualModule = "module.exports = {};";
27 |   if (browserExports.length !== 0) {
28 |     virtualModule = `export { ${browserExports.join(
29 |       ", "
30 |     )} } from "${routePath}";`;
31 |   }
32 | 
33 |   const { outputFiles } = await esbuild.build({
34 |     stdin: { contents: virtualModule, resolveDir: remixConfig.rootDirectory },
35 |     format: "esm",
36 |     target: "es2018",
37 |     treeShaking: true,
38 |     write: false,
39 |     sourcemap: "inline",
40 |     bundle: true,
41 |     plugins: [
42 |       {
43 |         name: "externals",
44 |         setup(build) {
45 |           build.onResolve({ filter: /.*/ }, (args) => {
46 |             if (args.path === routePath) return undefined;
47 |             return { external: true, sideEffects: false };
48 |           });
49 |         },
50 |       },
51 |     ],
52 |   });
53 |   return outputFiles[0].text;
54 | }
55 | 
56 | export default async function BrowserRoutesLoader(
57 |   this: webpack.LoaderContext<{
58 |     remixConfig: RemixConfig;
59 |     browserRouteRegex: RegExp;
60 |   }>
61 | ) {
62 |   const callback = this.async();
63 |   this.cacheable(false);
64 |   const { remixConfig, browserRouteRegex } = this.getOptions();
65 |   const routePath = this.resource.replace(browserRouteRegex, "/");
66 |   const browserRouteVirtualModule = await treeshakeBrowserExports(
67 |     routePath,
68 |     remixConfig
69 |   );
70 |   callback(undefined, browserRouteVirtualModule);
71 | }
72 | 


--------------------------------------------------------------------------------
/scripts/compiler-webpack/loaders/empty-module-loader.ts:
--------------------------------------------------------------------------------
 1 | import type webpack from "webpack";
 2 | 
 3 | export default async function EmptyModuleLoader(
 4 |   this: webpack.LoaderContext<never>
 5 | ) {
 6 |   const callback = this.async();
 7 |   this.cacheable(false);
 8 |   const emptyModule = "module.exports = {};";
 9 |   callback(undefined, emptyModule);
10 | }
11 | 


--------------------------------------------------------------------------------
/scripts/compiler-webpack/loaders/remix-css-loader.ts:
--------------------------------------------------------------------------------
 1 | import { interpolateName } from "loader-utils";
 2 | import webpack from "webpack";
 3 | 
 4 | type Exports = string[][] & { locals?: Record<string, string> };
 5 | 
 6 | const getPublicPath = <T>(loaderContext: webpack.LoaderContext<T>) => {
 7 |   let { publicPath } = loaderContext._compilation!.outputOptions;
 8 |   if (typeof publicPath !== "string") {
 9 |     throw Error("Public path must be a string");
10 |   }
11 |   return publicPath;
12 | };
13 | 
14 | const getCssChunkFilename = <T>(loaderContext: webpack.LoaderContext<T>) => {
15 |   let { cssChunkFilename, assetModuleFilename } =
16 |     loaderContext._compilation!.outputOptions;
17 |   return typeof cssChunkFilename === "string"
18 |     ? cssChunkFilename
19 |     : typeof assetModuleFilename === "string"
20 |     ? assetModuleFilename
21 |     : "_assets/[name]-[contenthash][ext]";
22 | };
23 | 
24 | export async function pitch(
25 |   this: webpack.LoaderContext<{ emit: boolean }>,
26 |   source: string | Buffer
27 | ) {
28 |   let callback = this.async();
29 |   let options = this.getOptions();
30 | 
31 |   let originalExports = (await this.importModule(
32 |     this.resourcePath + ".webpack[javascript/auto]" + "!=!" + source
33 |   )) as
34 |     | { __esModule: true; default: Exports }
35 |     | ({ __esModule: false } & Exports);
36 | 
37 |   let exports = originalExports.__esModule
38 |     ? originalExports.default
39 |     : originalExports;
40 | 
41 |   let css = exports[0].slice(1).join("\n");
42 |   let assetPath = interpolateName(this, getCssChunkFilename(this), {
43 |     content: css,
44 |   });
45 | 
46 |   let result = `
47 | export const link = {
48 |   rel: "stylesheet",
49 |   href: ${JSON.stringify(getPublicPath(this) + assetPath)},
50 | }
51 | `;
52 | 
53 |   let classNamesMap = exports.locals;
54 |   if (classNamesMap !== undefined) {
55 |     result += `\nexport const styles = ${JSON.stringify(classNamesMap)}`;
56 |   }
57 | 
58 |   // TODO: sourcemaps?
59 |   if (options.emit) {
60 |     this.emitFile(assetPath, css);
61 |   }
62 | 
63 |   return callback(undefined, result);
64 | }
65 | 


--------------------------------------------------------------------------------
/scripts/compiler-webpack/server-create-compiler.ts:
--------------------------------------------------------------------------------
 1 | import path from "path";
 2 | 
 3 | import type { AssetsManifest } from "@remix-run/dev/dist/compiler/assets";
 4 | import type { RemixConfig } from "@remix-run/dev/dist/config";
 5 | import webpack from "webpack";
 6 | import VirtualModulesPlugin from "webpack-virtual-modules";
 7 | 
 8 | import { CreateCompiler, ServerCompiler } from "../compiler-kit";
 9 | import { createServerConfig } from "../../config.server";
10 | 
11 | const dynamicVirtualModule = (compiler: webpack.Compiler, vmodPath: string) => {
12 |   const tapName = "Remix Webpack Compiler";
13 |   const virtualModules = new VirtualModulesPlugin();
14 |   virtualModules.apply(compiler);
15 | 
16 |   let nmod: webpack.NormalModule | undefined = undefined;
17 |   compiler.hooks.normalModuleFactory.tap(tapName, (normalModuleFactory) => {
18 |     normalModuleFactory.hooks.module.tap(tapName, (mod) => {
19 |       if (mod instanceof compiler.webpack.NormalModule) {
20 |         if (mod.request.endsWith(vmodPath)) {
21 |           nmod = mod;
22 |         }
23 |       }
24 |       return mod;
25 |     });
26 |   });
27 |   compiler.hooks.thisCompilation.tap(tapName, () => {
28 |     nmod?.invalidateBuild();
29 |   });
30 | 
31 |   return (contents: string) => virtualModules.writeModule(vmodPath, contents);
32 | };
33 | 
34 | export const createServerCompiler: CreateCompiler<ServerCompiler> = (
35 |   remixConfig
36 | ) => {
37 |   const webpackConfig = createServerConfig(remixConfig);
38 |   const compiler = webpack(webpackConfig);
39 | 
40 |   const updateServerBuild = dynamicVirtualModule(
41 |     compiler,
42 |     "node_modules/@remix-run/dev/server-build"
43 |   );
44 | 
45 |   const build: ServerCompiler["build"] = async (manifestChannel) => {
46 |     const manifest = await manifestChannel.read();
47 | 
48 |     updateServerBuild(serverBuild(remixConfig, manifest));
49 |     return new Promise<void>((resolve, reject) => {
50 |       console.time("server build");
51 |       compiler.run((error) => {
52 |         if (error) reject(error);
53 |         console.timeEnd("server build");
54 |         resolve();
55 |       });
56 |     });
57 |   };
58 |   return {
59 |     build,
60 |     dispose: () => compiler.close(() => undefined),
61 |   };
62 | };
63 | 
64 | const serverBuild = (config: RemixConfig, manifest: AssetsManifest): string => {
65 |   const routeImports = Object.values(config.routes).map((route, index) => {
66 |     return `import * as route${index} from "${path.resolve(
67 |       config.appDirectory,
68 |       route.file
69 |     )}";`;
70 |   });
71 |   const routes = Object.entries(config.routes).map(
72 |     ([routeId, route], index) => {
73 |       return `${JSON.stringify(routeId)}: {
74 |       id: ${JSON.stringify(route.id)},
75 |       parentId: ${JSON.stringify(route.parentId)},
76 |       path: ${JSON.stringify(route.path)},
77 |       index: ${JSON.stringify(route.index)},
78 |       caseSensitive: ${JSON.stringify(route.caseSensitive)},
79 |       module: route${index}
80 |     }`;
81 |     }
82 |   );
83 | 
84 |   return `
85 |   import * as entryServer from "${path.resolve(
86 |     config.appDirectory,
87 |     config.entryServerFile
88 |   )}";
89 |   ${routeImports.join("\n")}
90 |   export const entry = { module: entryServer };
91 |   export const routes = {
92 |     ${routes.join(",\n  ")}
93 |   };
94 |   export const assets = ${JSON.stringify(manifest)};
95 |   export const future = ${JSON.stringify(config.future)};
96 |   export const publicPath = ${JSON.stringify(config.publicPath)};
97 | `;
98 | };
99 | 


--------------------------------------------------------------------------------
/scripts/dev-server/index.ts:
--------------------------------------------------------------------------------
1 | export { serve } from "./serve";
2 | 


--------------------------------------------------------------------------------
/scripts/dev-server/live-reload.ts:
--------------------------------------------------------------------------------
 1 | import path from "path";
 2 | 
 3 | import * as fse from "fs-extra";
 4 | import WebSocket from "ws";
 5 | 
 6 | import { type RemixConfig } from "@remix-run/dev/dist/config";
 7 | import {
 8 |   type BrowserCompiler,
 9 |   type CreateCompiler,
10 |   type ServerCompiler,
11 |   watch,
12 | } from "../compiler-kit";
13 | 
14 | import exitHook from "./vendor/exit-hook";
15 | import prettyMs from "./vendor/pretty-ms";
16 | import { createChannel } from "../utils/channel";
17 | 
18 | const relativePath = (file: string) => path.relative(process.cwd(), file);
19 | 
20 | export async function liveReload(
21 |   config: RemixConfig,
22 |   createCompiler: {
23 |     browser: CreateCompiler<BrowserCompiler>;
24 |     server: CreateCompiler<ServerCompiler>;
25 |   },
26 |   callbacks: {
27 |     onInitialBuild?: () => void;
28 |   } = {}
29 | ) {
30 |   const wss = new WebSocket.Server({ port: config.devServerPort });
31 |   function broadcast(event: { type: string } & Record<string, unknown>) {
32 |     setTimeout(() => {
33 |       wss.clients.forEach((client) => {
34 |         if (client.readyState === WebSocket.OPEN) {
35 |           client.send(JSON.stringify(event));
36 |         }
37 |       });
38 |     }, config.devServerBroadcastDelay);
39 |   }
40 |   function log(message: string) {
41 |     message = `💿 ${message}`;
42 |     console.log(message);
43 |     broadcast({ type: "LOG", message });
44 |   }
45 | 
46 |   const dispose = await watch(config, createCompiler, {
47 |     onInitialBuild: callbacks.onInitialBuild,
48 |     onRebuildStart() {
49 |       log("Rebuilding...");
50 |     },
51 |     onRebuildFinish(durationMs: number) {
52 |       log(`Rebuilt in ${prettyMs(durationMs)}`);
53 |       broadcast({ type: "RELOAD" });
54 |     },
55 |     onFileCreated(file) {
56 |       log(`File created: ${relativePath(file)}`);
57 |     },
58 |     onFileChanged(file) {
59 |       log(`File changed: ${relativePath(file)}`);
60 |     },
61 |     onFileDeleted(file) {
62 |       log(`File deleted: ${relativePath(file)}`);
63 |     },
64 |   });
65 | 
66 |   const channel = createChannel<void>();
67 |   exitHook(async () => {
68 |     wss.close();
69 |     await dispose();
70 |     fse.emptyDirSync(config.assetsBuildDirectory);
71 |     fse.rmSync(config.serverBuildPath);
72 |     channel.write();
73 |   });
74 |   await channel.read();
75 | }
76 | 


--------------------------------------------------------------------------------
/scripts/dev-server/serve.ts:
--------------------------------------------------------------------------------
  1 | import type { Server } from "http";
  2 | import os from "os";
  3 | import * as path from "path";
  4 | 
  5 | import express from "express";
  6 | import * as fse from "fs-extra";
  7 | import getPort, { makeRange } from "get-port";
  8 | import { createApp } from "@remix-run/serve";
  9 | import { RemixConfig } from "@remix-run/dev/dist/config";
 10 | 
 11 | import { liveReload } from "./live-reload";
 12 | import {
 13 |   BrowserCompiler,
 14 |   CreateCompiler,
 15 |   ServerCompiler,
 16 | } from "../compiler-kit";
 17 | 
 18 | // Import environment variables from: .env, failing gracefully if it doesn't exist
 19 | async function loadEnv(rootDirectory: string): Promise<void> {
 20 |   const envPath = path.join(rootDirectory, ".env");
 21 |   try {
 22 |     await fse.readFile(envPath);
 23 |   } catch (e) {
 24 |     return;
 25 |   }
 26 | 
 27 |   console.log(`Loading environment variables from .env`);
 28 |   // eslint-disable-next-line @typescript-eslint/no-var-requires
 29 |   const result = require("dotenv").config({ path: envPath });
 30 |   if (result.error) {
 31 |     throw result.error;
 32 |   }
 33 | }
 34 | 
 35 | type Mode = "development" | "test" | "production";
 36 | 
 37 | export async function serve(
 38 |   config: RemixConfig,
 39 |   mode: Mode = "development",
 40 |   createCompiler: {
 41 |     browser: CreateCompiler<BrowserCompiler>;
 42 |     server: CreateCompiler<ServerCompiler>;
 43 |   },
 44 |   portArg?: number
 45 | ) {
 46 |   await loadEnv(config.rootDirectory);
 47 | 
 48 |   const port = await getPort({
 49 |     port: portArg
 50 |       ? Number(portArg)
 51 |       : process.env.PORT
 52 |       ? Number(process.env.PORT)
 53 |       : makeRange(3000, 3100),
 54 |   });
 55 | 
 56 |   if (config.serverEntryPoint) {
 57 |     throw new Error("remix dev is not supported for custom servers.");
 58 |   }
 59 | 
 60 |   const app = express();
 61 |   app.disable("x-powered-by");
 62 |   app.use((_, __, next) => {
 63 |     purgeAppRequireCache(config.serverBuildPath);
 64 |     next();
 65 |   });
 66 |   app.use(
 67 |     createApp(
 68 |       config.serverBuildPath,
 69 |       mode,
 70 |       config.publicPath,
 71 |       config.assetsBuildDirectory
 72 |     )
 73 |   );
 74 | 
 75 |   let server: Server | undefined = undefined as Server | undefined;
 76 |   try {
 77 |     await liveReload(config, createCompiler, {
 78 |       onInitialBuild: () => {
 79 |         const onListen = () => {
 80 |           const address =
 81 |             process.env.HOST ||
 82 |             Object.values(os.networkInterfaces())
 83 |               .flat()
 84 |               .find((ip) => String(ip?.family).includes("4") && !ip?.internal)
 85 |               ?.address;
 86 | 
 87 |           if (!address) {
 88 |             console.log(`Remix App Server started at http://localhost:${port}`);
 89 |           } else {
 90 |             console.log(
 91 |               `Remix App Server started at http://localhost:${port} (http://${address}:${port})`
 92 |             );
 93 |           }
 94 |         };
 95 | 
 96 |         server = process.env.HOST
 97 |           ? app.listen(port, process.env.HOST, onListen)
 98 |           : app.listen(port, onListen);
 99 |       },
100 |     });
101 |   } finally {
102 |     server?.close();
103 |   }
104 | }
105 | 
106 | function purgeAppRequireCache(buildPath: string) {
107 |   for (const key in require.cache) {
108 |     if (key.startsWith(buildPath)) {
109 |       delete require.cache[key];
110 |     }
111 |   }
112 | }
113 | 


--------------------------------------------------------------------------------
/scripts/dev-server/vendor/exit-hook.ts:
--------------------------------------------------------------------------------
 1 | import process from "node:process";
 2 | 
 3 | const callbacks = new Set<() => unknown>();
 4 | let isCalled = false;
 5 | let isRegistered = false;
 6 | 
 7 | function exit(shouldManuallyExit: boolean, signal: number) {
 8 |   if (isCalled) {
 9 |     return;
10 |   }
11 | 
12 |   isCalled = true;
13 | 
14 |   for (const callback of callbacks) {
15 |     callback();
16 |   }
17 | 
18 |   if (shouldManuallyExit === true) {
19 |     process.exit(128 + signal);
20 |   }
21 | }
22 | 
23 | export default function exitHook(onExit: () => void) {
24 |   callbacks.add(onExit);
25 | 
26 |   if (!isRegistered) {
27 |     isRegistered = true;
28 | 
29 |     process.once("exit", exit);
30 |     process.once("SIGINT", exit.bind(undefined, true, 2));
31 |     process.once("SIGTERM", exit.bind(undefined, true, 15));
32 | 
33 |     // PM2 Cluster shutdown message. Caught to support async handlers with pm2, needed because
34 |     // explicitly calling process.exit() doesn't trigger the beforeExit event, and the exit
35 |     // event cannot support async handlers, since the event loop is never called after it.
36 |     process.on("message", (message) => {
37 |       if (message === "shutdown") {
38 |         exit(true, -128);
39 |       }
40 |     });
41 |   }
42 | 
43 |   return () => {
44 |     callbacks.delete(onExit);
45 |   };
46 | }
47 | 


--------------------------------------------------------------------------------
/scripts/dev-server/vendor/parse-ms.ts:
--------------------------------------------------------------------------------
 1 | export default function parseMilliseconds(milliseconds: number) {
 2 |   if (typeof milliseconds !== "number") {
 3 |     throw new TypeError("Expected a number");
 4 |   }
 5 | 
 6 |   return {
 7 |     days: Math.trunc(milliseconds / 86400000),
 8 |     hours: Math.trunc(milliseconds / 3600000) % 24,
 9 |     minutes: Math.trunc(milliseconds / 60000) % 60,
10 |     seconds: Math.trunc(milliseconds / 1000) % 60,
11 |     milliseconds: Math.trunc(milliseconds) % 1000,
12 |     microseconds: Math.trunc(milliseconds * 1000) % 1000,
13 |     nanoseconds: Math.trunc(milliseconds * 1e6) % 1000,
14 |   };
15 | }
16 | 


--------------------------------------------------------------------------------
/scripts/dev-server/vendor/pretty-ms.ts:
--------------------------------------------------------------------------------
  1 | import parseMilliseconds from "./parse-ms";
  2 | 
  3 | const pluralize = (word: string, count: number) =>
  4 |   count === 1 ? word : `${word}s`;
  5 | 
  6 | const SECOND_ROUNDING_EPSILON = 0.000_000_1;
  7 | 
  8 | interface Options {
  9 |   /**
 10 | 	Number of digits to appear after the seconds decimal point.
 11 | 	@default 1
 12 | 	*/
 13 |   secondsDecimalDigits?: number;
 14 | 
 15 |   /**
 16 | 	Number of digits to appear after the milliseconds decimal point.
 17 | 	Useful in combination with [`process.hrtime()`](https://nodejs.org/api/process.html#process_process_hrtime).
 18 | 	@default 0
 19 | 	*/
 20 |   millisecondsDecimalDigits?: number;
 21 | 
 22 |   /**
 23 | 	Keep milliseconds on whole seconds: `13s` → `13.0s`.
 24 | 	Useful when you are showing a number of seconds spent on an operation and don't want the width of the output to change when hitting a whole number.
 25 | 	@default false
 26 | 	*/
 27 |   readonly keepDecimalsOnWholeSeconds?: boolean;
 28 | 
 29 |   /**
 30 | 	Only show the first unit: `1h 10m` → `1h`.
 31 | 	Also ensures that `millisecondsDecimalDigits` and `secondsDecimalDigits` are both set to `0`.
 32 | 	@default false
 33 | 	*/
 34 |   compact?: boolean;
 35 | 
 36 |   /**
 37 | 	Number of units to show. Setting `compact` to `true` overrides this option.
 38 | 	@default Infinity
 39 | 	*/
 40 |   readonly unitCount?: number;
 41 | 
 42 |   /**
 43 | 	Use full-length units: `5h 1m 45s` → `5 hours 1 minute 45 seconds`.
 44 | 	@default false
 45 | 	*/
 46 |   verbose?: boolean;
 47 | 
 48 |   /**
 49 | 	Show milliseconds separately. This means they won't be included in the decimal part of the seconds.
 50 | 	@default false
 51 | 	*/
 52 |   separateMilliseconds?: boolean;
 53 | 
 54 |   /**
 55 | 	Show microseconds and nanoseconds.
 56 | 	@default false
 57 | 	*/
 58 |   formatSubMilliseconds?: boolean;
 59 | 
 60 |   /**
 61 | 	Display time using colon notation: `5h 1m 45s` → `5:01:45`. Always shows time in at least minutes: `1s` → `0:01`
 62 | 	Useful when you want to display time without the time units, similar to a digital watch.
 63 | 	Setting `colonNotation` to `true` overrides the following options to `false`:
 64 | 	- `compact`
 65 | 	- `formatSubMilliseconds`
 66 | 	- `separateMilliseconds`
 67 | 	- `verbose`
 68 | 	@default false
 69 | 	*/
 70 |   readonly colonNotation?: boolean;
 71 | }
 72 | 
 73 | export default function prettyMilliseconds(
 74 |   milliseconds: number,
 75 |   options: Options = {}
 76 | ): string {
 77 |   if (!Number.isFinite(milliseconds)) {
 78 |     throw new TypeError("Expected a finite number");
 79 |   }
 80 | 
 81 |   if (options.colonNotation) {
 82 |     options.compact = false;
 83 |     options.formatSubMilliseconds = false;
 84 |     options.separateMilliseconds = false;
 85 |     options.verbose = false;
 86 |   }
 87 | 
 88 |   if (options.compact) {
 89 |     options.secondsDecimalDigits = 0;
 90 |     options.millisecondsDecimalDigits = 0;
 91 |   }
 92 | 
 93 |   const result: string[] = [];
 94 | 
 95 |   const floorDecimals = (value: number, decimalDigits: number) => {
 96 |     const flooredInterimValue = Math.floor(
 97 |       value * 10 ** decimalDigits + SECOND_ROUNDING_EPSILON
 98 |     );
 99 |     const flooredValue = Math.round(flooredInterimValue) / 10 ** decimalDigits;
100 |     return flooredValue.toFixed(decimalDigits);
101 |   };
102 | 
103 |   const add = (
104 |     value: number,
105 |     long: string,
106 |     short: string,
107 |     valueString?: string
108 |   ) => {
109 |     if (
110 |       (result.length === 0 || !options.colonNotation) &&
111 |       value === 0 &&
112 |       !(options.colonNotation && short === "m")
113 |     ) {
114 |       return;
115 |     }
116 | 
117 |     valueString = (valueString || value || "0").toString();
118 |     let prefix;
119 |     let suffix;
120 |     if (options.colonNotation) {
121 |       prefix = result.length > 0 ? ":" : "";
122 |       suffix = "";
123 |       const wholeDigits = valueString.includes(".")
124 |         ? valueString.split(".")[0].length
125 |         : valueString.length;
126 |       const minLength = result.length > 0 ? 2 : 1;
127 |       valueString =
128 |         "0".repeat(Math.max(0, minLength - wholeDigits)) + valueString;
129 |     } else {
130 |       prefix = "";
131 |       suffix = options.verbose ? " " + pluralize(long, value) : short;
132 |     }
133 | 
134 |     result.push(prefix + valueString + suffix);
135 |   };
136 | 
137 |   const parsed = parseMilliseconds(milliseconds);
138 | 
139 |   add(Math.trunc(parsed.days / 365), "year", "y");
140 |   add(parsed.days % 365, "day", "d");
141 |   add(parsed.hours, "hour", "h");
142 |   add(parsed.minutes, "minute", "m");
143 | 
144 |   if (
145 |     options.separateMilliseconds ||
146 |     options.formatSubMilliseconds ||
147 |     (!options.colonNotation && milliseconds < 1000)
148 |   ) {
149 |     add(parsed.seconds, "second", "s");
150 |     if (options.formatSubMilliseconds) {
151 |       add(parsed.milliseconds, "millisecond", "ms");
152 |       add(parsed.microseconds, "microsecond", "µs");
153 |       add(parsed.nanoseconds, "nanosecond", "ns");
154 |     } else {
155 |       const millisecondsAndBelow =
156 |         parsed.milliseconds +
157 |         parsed.microseconds / 1000 +
158 |         parsed.nanoseconds / 1e6;
159 | 
160 |       const millisecondsDecimalDigits =
161 |         typeof options.millisecondsDecimalDigits === "number"
162 |           ? options.millisecondsDecimalDigits
163 |           : 0;
164 | 
165 |       const roundedMiliseconds =
166 |         millisecondsAndBelow >= 1
167 |           ? Math.round(millisecondsAndBelow)
168 |           : Math.ceil(millisecondsAndBelow);
169 | 
170 |       const millisecondsString = millisecondsDecimalDigits
171 |         ? millisecondsAndBelow.toFixed(millisecondsDecimalDigits)
172 |         : String(roundedMiliseconds);
173 | 
174 |       add(
175 |         Number.parseFloat(millisecondsString),
176 |         "millisecond",
177 |         "ms",
178 |         millisecondsString
179 |       );
180 |     }
181 |   } else {
182 |     const seconds = (milliseconds / 1000) % 60;
183 |     const secondsDecimalDigits =
184 |       typeof options.secondsDecimalDigits === "number"
185 |         ? options.secondsDecimalDigits
186 |         : 1;
187 |     const secondsFixed = floorDecimals(seconds, secondsDecimalDigits);
188 |     const secondsString = options.keepDecimalsOnWholeSeconds
189 |       ? secondsFixed
190 |       : secondsFixed.replace(/\.0+$/, "");
191 |     add(Number.parseFloat(secondsString), "second", "s", secondsString);
192 |   }
193 | 
194 |   if (result.length === 0) {
195 |     return "0" + (options.verbose ? " milliseconds" : "ms");
196 |   }
197 | 
198 |   if (options.compact) {
199 |     return result[0];
200 |   }
201 | 
202 |   if (typeof options.unitCount === "number") {
203 |     const separator = options.colonNotation ? "" : " ";
204 |     return result.slice(0, Math.max(options.unitCount, 1)).join(separator);
205 |   }
206 | 
207 |   return options.colonNotation ? result.join("") : result.join(" ");
208 | }
209 | 


--------------------------------------------------------------------------------
/scripts/dev.ts:
--------------------------------------------------------------------------------
 1 | import { readConfig } from "@remix-run/dev/dist/config.js";
 2 | import { serve } from "./dev-server";
 3 | import {
 4 |   createBrowserCompiler,
 5 |   createServerCompiler,
 6 | } from "./compiler-webpack";
 7 | 
 8 | async function command() {
 9 |   let remixConfig = await readConfig();
10 |   serve(remixConfig, "development", {
11 |     browser: createBrowserCompiler,
12 |     server: createServerCompiler,
13 |   });
14 | }
15 | 
16 | command();
17 | 


--------------------------------------------------------------------------------
/scripts/utils/channel.ts:
--------------------------------------------------------------------------------
 1 | export interface WriteChannel<T> {
 2 |   write: (data: T) => void;
 3 | }
 4 | export interface ReadChannel<T> {
 5 |   read: () => Promise<T>;
 6 | }
 7 | export type Channel<T> = WriteChannel<T> & ReadChannel<T>;
 8 | 
 9 | export const createChannel = <T>(): Channel<T> => {
10 |   let promiseResolve: ((value: T) => void) | undefined = undefined;
11 | 
12 |   const promise = new Promise<T>((resolve) => {
13 |     promiseResolve = resolve;
14 |   });
15 | 
16 |   return {
17 |     write: promiseResolve!,
18 |     read: async () => promise,
19 |   };
20 | };
21 | 


--------------------------------------------------------------------------------
/scripts/utils/object.ts:
--------------------------------------------------------------------------------
 1 | type Entry<Obj extends object> = {
 2 |   [K in keyof Obj]: [K, Obj[K]];
 3 | }[keyof Obj];
 4 | export const entries = <Obj extends object>(obj: Obj): Entry<Obj>[] => {
 5 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 6 |   return Object.entries(obj) as any;
 7 | };
 8 | 
 9 | type FromEntries<Entry extends readonly [PropertyKey, unknown]> = {
10 |   [E in Entry as E[0]]: E[1];
11 | };
12 | export const fromEntries = <
13 |   Entries extends (readonly [PropertyKey, unknown])[]
14 | >(
15 |   entries: Entries
16 | ): FromEntries<Entries[number]> => {
17 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any
18 |   return Object.fromEntries(entries) as any;
19 | };
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": ["**/*.ts", "**/*.tsx"],
 3 |   "compilerOptions": {
 4 |     "lib": ["DOM", "DOM.Iterable", "ES2019"],
 5 |     "isolatedModules": true,
 6 |     "esModuleInterop": true,
 7 |     "jsx": "react-jsx",
 8 |     "resolveJsonModule": true,
 9 |     "moduleResolution": "node",
10 |     "baseUrl": ".",
11 |     "noEmit": true,
12 |     "paths": {
13 |       "~/*": ["./app/*"]
14 |     },
15 |     "allowJs": true,
16 |     "forceConsistentCasingInFileNames": true,
17 |     "strict": true,
18 |     "target": "ES2019"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/types/module.css.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.css" {
2 |   export const link: { rel: "stylesheet"; href: string };
3 |   export const styles: Record<string, string>;
4 | }
5 | 


--------------------------------------------------------------------------------
/types/remix.env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@remix-run/dev" />
2 | /// <reference types="@remix-run/node" />
3 | 


--------------------------------------------------------------------------------