chore: update remix 1.5.1

* chore: update remix to 1.5.1

* refactor: rewrite remix imports

.env

@@ -1,3 +1,4 @@
 DATABASE_URL=postgresql://user:password@localhost:6060/todolistmanager-dev
 BASE_URL=http://localhost:3000
 SESSION_SECRET=session-secret
+NODE_ENV=development

Dockerfile

@@ -24,12 +24,7 @@ ENV NODE_ENV=${NODE_ENV}
 
 COPY package.json yarn.lock ./
 
- # --ignore-script options to prevent Remix from launching its setup script
- # which requires @remix-run/dev which is a dev dependency...
-RUN yarn install --production --ignore-scripts
-# ... so we manually copy the one generated from the building container
-COPY --from=builder /usr/src/app/node_modules/@remix-run ./node_modules/@remix-run
-COPY --from=builder /usr/src/app/node_modules/remix ./node_modules/remix
+RUN yarn install --production
 
 # dev dependnecies are required for generating the prisma client,
 # so we copy the one generated in the builder container

Procfile

@@ -1 +1 @@
-web: yarn remix setup && yarn prisma:migrate && node dist/src/main.js
+web: yarn prisma:migrate && node dist/src/main.js

app/authentication/LoginForm.tsx

@@ -1,5 +1,5 @@
 import type { AuthenticationErrorDto } from "shared/client";
-import { Form, Link, useActionData, useLoaderData, useTransition } from "remix";
+import { Form, Link, useActionData, useLoaderData, useTransition } from "@remix-run/react";
 import { UpdateIcon } from "@radix-ui/react-icons";
 import { FloatingLabelInput } from "front/ui/FloatingLabelInput";
 import { ButtonPrimary } from "front/ui/Button";

app/authentication/RegisterForm.tsx

@@ -1,5 +1,5 @@
 import type { AuthenticationErrorDto } from "shared/client";
-import { Form, Link, useActionData, useLoaderData, useTransition } from "remix";
+import { Form, Link, useActionData, useLoaderData, useTransition } from "@remix-run/react";
 import { UpdateIcon } from "@radix-ui/react-icons";
 import { FloatingLabelInput } from "front/ui/FloatingLabelInput";
 import { ButtonPrimary } from "front/ui/Button";

app/authentication/ResetPasswordForm.tsx

@@ -1,4 +1,4 @@
-import { useLocation } from "remix";
+import { useLocation } from "@remix-run/react";
 import { useFetcher } from "@remix-run/react";
 import { FloatingLabelInput } from "front/ui/FloatingLabelInput";
 import { ButtonPrimary } from "front/ui/Button";

app/authentication/VerifyAccountError.tsx

@@ -1,5 +1,5 @@
-import type { ThrownResponse } from "remix";
-import { useCatch } from "remix";
+import type { ThrownResponse } from "@remix-run/react";
+import { useCatch } from "@remix-run/react";
 import { CrossCircledIcon } from "@radix-ui/react-icons";
 import { InfoPageTemplate } from "front/authentication/InfoPageTemplate";
 

app/authentication/useVerifyAccount.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from "remix";
+import { useNavigate } from "@remix-run/react";
 import { useEffect } from "react";
 
 export function useVerifyAccount() {

app/entry.client.tsx

@@ -1,4 +1,4 @@
 import { hydrate } from "react-dom";
-import { RemixBrowser } from "remix";
+import { RemixBrowser } from "@remix-run/react";
 
 hydrate(<RemixBrowser />, document);

app/homepage/TodoListItem.tsx

@@ -1,6 +1,6 @@
 import type { TodoListSummaryDto } from "shared/client";
 
-import { Link } from "remix";
+import { Link } from "@remix-run/react";
 import { useFetcher } from "@remix-run/react";
 import classNames from "classnames";
 import { displayDate } from "front/Date";

app/homepage/TodoLists.tsx

@@ -6,7 +6,7 @@ import { EmptyMessage } from "front/ui/EmptyMessage";
 import { PageTitle } from "front/ui/PageTitle";
 import { TodoListItem } from "front/homepage/TodoListItem";
 import { AddTodoListForm } from "front/homepage/AddTodoListForm";
-import { useLoaderData } from "remix";
+import { useLoaderData } from "@remix-run/react";
 
 export const TodoLists = () => {
   const { todoLists } = useLoaderData<TodoListsSummaryDto>();

app/root.tsx

@@ -1,4 +1,5 @@
-import type { LinksFunction, LoaderFunction } from "remix";
+import type { LinksFunction, LoaderFunction } from "@remix-run/node";
+
 import {
   Link,
   Links,
@@ -10,7 +11,7 @@ import {
   useCatch,
   useLoaderData,
   useLocation,
-} from "remix";
+} from "@remix-run/react";
 
 import * as React from "react";
 

app/routes/forgot-password.tsx

@@ -1,4 +1,4 @@
-import type { ActionFunction, MetaFunction } from "remix";
+import type { ActionFunction, MetaFunction } from "@remix-run/node";
 import type { RemixAppContext } from "web";
 import { ForgotPasswordForm } from "front/authentication/ForgotPasswordForm";
 

app/routes/index.tsx

@@ -1,4 +1,4 @@
-import type { ActionFunction, LoaderFunction, MetaFunction } from "remix";
+import type { ActionFunction, LoaderFunction, MetaFunction } from "@remix-run/node";
 import type { TodoListsSummaryDto } from "shared/client";
 import type { RemixAppContext } from "web";
 

app/routes/l/$todoListId.tsx

@@ -1,8 +1,8 @@
-import type { MetaFunction, ActionFunction, LoaderFunction } from "remix";
+import type { ActionFunction, LoaderFunction, MetaFunction } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
 import type { TodoListDetailsDto, TodoListPageDto } from "shared/client";
 import type { RemixAppContext } from "web";
 
-import { useLoaderData } from "remix";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { RecoilRoot } from "recoil";

app/routes/l/$todoListId/archive.ts

@@ -1,4 +1,4 @@
-import type { ActionFunction } from "remix";
+import type { ActionFunction } from "@remix-run/node";
 import type { RemixAppContext } from "web";
 
 export const action: ActionFunction = async (args) =>

app/routes/l/$todoListId/order.ts

@@ -1,4 +1,4 @@
-import type { ActionFunction } from "remix";
+import type { ActionFunction } from "@remix-run/node";
 import type { RemixAppContext } from "web";
 
 export const action: ActionFunction = (args) =>

app/routes/l/$todoListId/rename.ts

@@ -1,4 +1,4 @@
-import type { ActionFunction } from "remix";
+import type { ActionFunction } from "@remix-run/node";
 import type { RemixAppContext } from "web";
 
 export const action: ActionFunction = async (args) =>

app/routes/l/$todoListId/share.ts

@@ -1,4 +1,4 @@
-import type { ActionFunction } from "remix";
+import type { ActionFunction } from "@remix-run/node";
 import type { RemixAppContext } from "web";
 
 export const action: ActionFunction = (args) =>

app/routes/l/$todoListId/todo.$todoId.archive.ts

@@ -1,4 +1,4 @@
-import type { ActionFunction } from "remix";
+import type { ActionFunction } from "@remix-run/node";
 import type { RemixAppContext } from "web";
 
 export const action: ActionFunction = async (args) =>

app/routes/l/$todoListId/todo.$todoId.rename.ts

@@ -1,4 +1,4 @@
-import type { ActionFunction } from "remix";
+import type { ActionFunction } from "@remix-run/node";
 import type { RemixAppContext } from "web";
 
 export const action: ActionFunction = (args) =>

app/routes/l/$todoListId/todo.$todoId.tag.ts

@@ -1,4 +1,4 @@
-import type { ActionFunction } from "remix";
+import type { ActionFunction } from "@remix-run/node";
 import type { RemixAppContext } from "web";
 
 export const action: ActionFunction = (args) =>

app/routes/l/$todoListId/todo.$todoId.ts

@@ -1,4 +1,4 @@
-import type { ActionFunction } from "remix";
+import type { ActionFunction } from "@remix-run/node";
 import type { RemixAppContext } from "web";
 
 export const action: ActionFunction = async (args) =>

app/routes/l/$todoListId/todo.$todoId.untag.ts

@@ -1,4 +1,4 @@
-import type { ActionFunction } from "remix";
+import type { ActionFunction } from "@remix-run/node";
 import type { RemixAppContext } from "web";
 
 export const action: ActionFunction = (args) =>

app/routes/login.tsx

@@ -1,4 +1,4 @@
-import type { ActionFunction, LoaderFunction, MetaFunction } from "remix";
+import type { ActionFunction, LoaderFunction, MetaFunction } from "@remix-run/node";
 import type { RemixAppContext } from "web";
 
 import { LoginForm } from "front/authentication/LoginForm";

app/routes/logout.ts

@@ -1,4 +1,4 @@
-import type { LoaderFunction } from "remix";
+import type { LoaderFunction } from "@remix-run/node";
 import type { RemixAppContext } from "web";
 
 export const loader: LoaderFunction = (args) =>

app/routes/register.tsx

@@ -1,4 +1,4 @@
-import type { MetaFunction, ActionFunction, LoaderFunction } from "remix";
+import type { ActionFunction, LoaderFunction, MetaFunction } from "@remix-run/node";
 import type { RemixAppContext } from "web";
 import { RegisterForm } from "front/authentication/RegisterForm";
 

app/routes/reset-password.tsx

@@ -1,7 +1,7 @@
-import type { ActionFunction, MetaFunction } from "remix";
+import type { ActionFunction, MetaFunction } from "@remix-run/node";
+import { useCatch } from "@remix-run/react";
 import type { RemixAppContext } from "web";
 
-import { useCatch } from "remix";
 import { ResetPasswordForm } from "front/authentication/ResetPasswordForm";
 import { PageTitle } from "front/ui/PageTitle";
 

app/routes/verify-account.tsx

@@ -1,4 +1,4 @@
-import type { LoaderFunction, MetaFunction } from "remix";
+import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import type { RemixAppContext } from "web";
 
 import { VerifyAccount } from "front/authentication/VerifyAccount";

app/routes/welcome.tsx

@@ -1,4 +1,4 @@
-import type { MetaFunction } from "remix";
+import type { MetaFunction } from "@remix-run/node";
 
 import { Welcome } from "front/authentication/Welcome";
 

app/todolist/state.ts

@@ -7,7 +7,7 @@ import type {
 import type { MutableSnapshot } from "recoil";
 import type { TodoDto } from "shared/client";
 import { useCallback, useEffect } from "react";
-import { useLoaderData, useNavigate } from "remix";
+import { useLoaderData, useNavigate } from "@remix-run/react";
 import { atom, selector, useRecoilState, useRecoilValue } from "recoil";
 
 const RECOIL_KEYS = {

app/ui/RootLayout.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Link } from "remix";
+import { Link } from "@remix-run/react";
 
 export const RootLayout = ({
   children,

package.json

@@ -5,7 +5,6 @@
   "license": "",
   "scripts": {
     "start": "nest start",
-    "postinstall": "remix setup node",
     "build": "run-p build:front build:nest",
     "test": "jest --runInBand",
     "dev": "run-s dev:migrate dev:start",
@@ -48,10 +47,9 @@
     "@radix-ui/react-icons": "1.1.1",
     "@radix-ui/react-popover": "^0.1.6",
     "@radix-ui/react-tooltip": "^0.1.7",
-    "@remix-run/dev": "1.3.5",
-    "@remix-run/express": "1.4.1",
-    "@remix-run/node": "1.4.1",
-    "@remix-run/react": "1.4.1",
+    "@remix-run/express": "1.5.1",
+    "@remix-run/node": "1.5.1",
+    "@remix-run/react": "1.5.1",
     "@sendgrid/mail": "^7.7.0",
     "bcrypt": "5.0.1",
     "class-transformer": "0.5.1",
@@ -67,14 +65,14 @@
     "react-dom": "17.0.2",
     "recoil": "^0.7.3",
     "reflect-metadata": "0.1.13",
-    "remix": "1.4.1",
     "reset.css": "2.0.2",
     "rxjs": "7.5.5",
     "uuid": "8.3.2"
   },
   "devDependencies": {
     "@nestjs/cli": "8.2.5",
-    "@remix-run/eslint-config": "1.4.3",
+    "@remix-run/dev": "1.5.1",
+    "@remix-run/eslint-config": "1.5.1",
     "@testing-library/cypress": "8.0.2",
     "@types/bcrypt": "5.0.0",
     "@types/express": "4.17.13",

src/web/ApplicationModule.ts

@@ -1,5 +1,5 @@
 import path from "path";
-import { SessionIdStorageStrategy } from "remix";
+import { SessionIdStorageStrategy } from "@remix-run/node";
 import { DynamicModule, Module } from "@nestjs/common";
 import { EventEmitterModule } from "@nestjs/event-emitter";
 import { ServeStaticModule } from "@nestjs/serve-static";

src/web/authenticator/Authenticated.ts

@@ -1,5 +1,5 @@
 import { DataFunctionArgs } from "@remix-run/node";
-import { redirect } from "remix";
+import { redirect } from "@remix-run/node";
 import { Inject } from "@nestjs/common";
 import { AUTHENTICATOR } from "../../keys";
 import { SessionAuthenticator } from "./SessionAuthenticator";

src/web/authenticator/SessionManager.ts

@@ -5,7 +5,7 @@ import {
   createCookieSessionStorage,
   Session,
   SessionIdStorageStrategy,
-} from "remix";
+} from "@remix-run/node";
 import { SESSION_CONFIG } from "../../keys";
 
 @Injectable({ scope: Scope.REQUEST })

src/web/remix/Loaders.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable } from "@nestjs/common";
-import { json, redirect } from "remix";
+import { json, redirect } from "@remix-run/node";
 import {
   AuthenticationApplicationService,
   Authenticator,

src/web/remix/decorators/MapErrorThrowing.ts

@@ -1,4 +1,4 @@
-import { json } from "remix";
+import { json } from "@remix-run/node";
 
 type ErrorCasting<T extends Error> = {
   is(err: unknown): err is T;

src/web/remix/types.ts

@@ -1,4 +1,4 @@
-import { ActionFunction, LoaderFunction } from "remix";
+import { ActionFunction, LoaderFunction } from "@remix-run/node";
 
 export type MakeRemixContext<Actions, Loaders> = {
   actions: {

tsconfig.build.json

@@ -1,4 +1,7 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["node_modules", "dist", "test", "**/*spec.ts", "app"]
+  "exclude": ["node_modules", "dist", "test", "**/*spec.ts", "app"],
+  "compilerOptions": {
+    "noEmit": false
+  }
 }

tsconfig.json

@@ -24,16 +24,15 @@
       "authentication": ["./src/authentication"],
       "todo-list-manager": ["./src/todo-list-manager"]
     },
-
-    // Remix takes care of building everything in `remix build`.
-    // "noEmit": true,
-
-    // Nest specifics
     "skipLibCheck": true,
     "incremental": true,
     "outDir": "./dist",
     "module": "CommonJS",
     "experimentalDecorators": true,
-    "emitDecoratorMetadata": true
+    "emitDecoratorMetadata": true,
+    "allowJs": false,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "noEmit": true
   }
 }