Merge pull request #372 from Shopify/typescript

Typescript 🎉

.github/workflows/convert-to-js.yml

@@ -0,0 +1,80 @@
+name: Create Javascript conversion PR
+
+on:
+  push:
+    branches:
+      - main
+
+  workflow_dispatch:
+
+jobs:
+  convert-ts-files:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+
+      - name: Create lock file
+        run: touch yarn.lock
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn add -W --dev @shopify/prettier-config @shopify/eslint-plugin
+
+      - name: Transpile to Javascript
+        run: |
+          find app \( -name "*.ts" -o -name "*.tsx" \) -exec yarn tsc \
+            --strict \
+            --removeComments false \
+            --skipLibCheck \
+            --isolatedModules \
+            --noEmitOnError \
+            --jsx "preserve" \
+            --module "ES2022" \
+            --moduleResolution "bundler" \
+            --target "ES2022" \
+            --types "@shopify/app-bridge-types" \
+            {} +
+
+      - name: Remove Typescript files
+        run: find app \( -name "*.ts" -o -name "*.tsx" \) -delete
+
+      - name: Run prettier
+        run: yarn prettier -w "app/**/*.{js,jsx}" --plugin @shopify/prettier-config
+
+      - name: Run ESLint
+        run: |
+          yarn lint "app/**/*.{js,jsx}" --fix --no-cache --plugin @shopify/eslint-plugin --rule '{
+            "import/order": "error",
+            "import/newline-after-import": "error",
+            "padding-line-between-statements": ["error",
+              { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*"},
+              { "blankLine": "any",    "prev": ["const", "let", "var"], "next": ["const", "let", "var"]}
+              { "blankLine": "always", "prev": "*", "next": "return" },
+              { "blankLine": "always", "prev": "*", "next": "export" },
+              { "blankLine": "never",  "prev": "export", "next": "export" },
+              { "blankLine": "always", "prev": "*", "next": "block-like" },
+              { "blankLine": "always", "prev": "block-like", "next": "*" }
+            ]}'
+
+      - name: Stage changes to files
+        run: |
+          git fetch
+          git checkout javascript_updates || git checkout -b javascript_updates
+          git config user.name GitHub
+          git config user.email [email protected]
+          git add app
+          git commit -m "Convert template to Javascript"
+          git push --force origin javascript_updates
+
+      - name: Create Javascript PR
+        run: |
+          gh pr view --json mergedAt -q ".mergedAt" javascript_updates | grep -E "^$" || \
+          gh pr create -B javascript -H javascript_updates --title 'Convert template to Javascript' --body 'This is an automated PR that converts the latest changes from Typescript to Javascript'
+        env:
+          GH_TOKEN: ${{ github.token }}

README.md

@@ -233,9 +233,6 @@ This template uses [Remix](https://remix.run). The following Shopify tools are a
 - [Webhooks](https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-remix#authenticating-webhook-requests): Callbacks sent by Shopify when certain events occur
 - [Polaris](https://polaris.shopify.com/): Design system that enables apps to create Shopify-like experiences
 
-> **Note**: This template runs on JavaScript, but it's fully set up for [TypeScript](https://www.typescriptlang.org/).
-> If you want to create your routes using TypeScript, we recommend removing the `noImplicitAny` config from [`tsconfig.json`](/tsconfig.json)
-
 ## Resources
 
 - [Remix Docs](https://remix.run/docs/en/v1)

app/db.server.js → app/db.server.ts

@@ -1,6 +1,10 @@
 import { PrismaClient } from "@prisma/client";
 
-const prisma = global.prisma || new PrismaClient();
+declare global {
+  var prisma: PrismaClient;
+}
+
+const prisma: PrismaClient = global.prisma || new PrismaClient();
 
 if (process.env.NODE_ENV !== "production") {
   if (!global.prisma) {

app/entry.server.jsx → app/entry.server.tsx

@@ -1,21 +1,22 @@
 import { PassThrough } from "stream";
 import { renderToPipeableStream } from "react-dom/server";
 import { RemixServer } from "@remix-run/react";
+import {
+  createReadableStreamFromReadable,
+  type EntryContext,
+} from "@remix-run/node";
 import isbot from "isbot";
-
 import { addDocumentResponseHeaders } from "./shopify.server";
 
-const ABORT_DELAY = 5_000;
+const ABORT_DELAY = 5000;
 
 export default async function handleRequest(
-  request,
-  responseStatusCode,
-  responseHeaders,
-  remixContext,
-  _loadContext
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
 ) {
   addDocumentResponseHeaders(request, responseHeaders);
-
   const callbackName = isbot(request.headers.get("user-agent"))
     ? "onAllReady"
     : "onShellReady";
@@ -30,16 +31,15 @@ export default async function handleRequest(
       {
         [callbackName]: () => {
           const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
 
           responseHeaders.set("Content-Type", "text/html");
-
           resolve(
-            new Response(body, {
+            new Response(stream, {
               headers: responseHeaders,
               status: responseStatusCode,
             })
           );
-
           pipe(body);
         },
         onShellError(error) {

app/globals.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

app/routes/_index/route.jsx → app/routes/_index/route.tsx

@@ -1,24 +1,23 @@
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import { Form, useLoaderData } from "@remix-run/react";
-
 import { login } from "../../shopify.server";
-
 import indexStyles from "./style.css";
 
 export const links = () => [{ rel: "stylesheet", href: indexStyles }];
 
-export async function loader({ request }) {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
   const url = new URL(request.url);
 
   if (url.searchParams.get("shop")) {
     throw redirect(`/app?${url.searchParams.toString()}`);
   }
 
   return json({ showForm: Boolean(login) });
-}
+};
 
 export default function App() {
-  const { showForm } = useLoaderData();
+  const { showForm } = useLoaderData<typeof loader>();
 
   return (
     <div className="index">

app/routes/app._index.jsx → app/routes/app._index.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { useActionData, useNavigation, useSubmit } from "@remix-run/react";
 import {
@@ -14,18 +15,16 @@ import {
   List,
   Link,
 } from "@shopify/polaris";
-
 import { authenticate } from "../shopify.server";
 
-export const loader = async ({ request }) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
   await authenticate.admin(request);
 
   return null;
 };
 
-export async function action({ request }) {
+export const action = async ({ request }: ActionFunctionArgs) => {
   const { admin } = await authenticate.admin(request);
-
   const color = ["Red", "Orange", "Yellow", "Green"][
     Math.floor(Math.random() * 4)
   ];
@@ -60,22 +59,19 @@ export async function action({ request }) {
       },
     }
   );
-
   const responseJson = await response.json();
 
   return json({
     product: responseJson.data.productCreate.product,
   });
-}
+};
 
 export default function Index() {
   const nav = useNavigation();
-  const actionData = useActionData();
+  const actionData = useActionData<typeof action>();
   const submit = useSubmit();
-
   const isLoading =
     ["loading", "submitting"].includes(nav.state) && nav.formMethod === "POST";
-
   const productId = actionData?.product?.id.replace(
     "gid://shopify/Product/",
     ""
@@ -86,7 +82,6 @@ export default function Index() {
       shopify.toast.show("Product created");
     }
   }, [productId]);
-
   const generateProduct = () => submit({}, { replace: true, method: "POST" });
 
   return (

app/routes/app.additional.jsx → app/routes/app.additional.tsx

@@ -62,7 +62,7 @@ export default function AdditionalPage() {
   );
 }
 
-function Code({ children }) {
+function Code({ children }: { children: React.ReactNode }) {
   return (
     <Box
       as="span"

app/routes/app.jsx → app/routes/app.tsx

@@ -1,21 +1,21 @@
+import type { HeadersFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Link, Outlet, useLoaderData, useRouteError } from "@remix-run/react";
 import polarisStyles from "@shopify/polaris/build/esm/styles.css";
 import { boundary } from "@shopify/shopify-app-remix/server";
 import { AppProvider } from "@shopify/shopify-app-remix/react";
-
 import { authenticate } from "../shopify.server";
 
 export const links = () => [{ rel: "stylesheet", href: polarisStyles }];
 
-export async function loader({ request }) {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
   await authenticate.admin(request);
 
-  return json({ apiKey: process.env.SHOPIFY_API_KEY });
-}
+  return json({ apiKey: process.env.SHOPIFY_API_KEY || "" });
+};
 
 export default function App() {
-  const { apiKey } = useLoaderData();
+  const { apiKey } = useLoaderData<typeof loader>();
 
   return (
     <AppProvider isEmbeddedApp apiKey={apiKey}>
@@ -35,6 +35,6 @@ export function ErrorBoundary() {
   return boundary.error(useRouteError());
 }
 
-export const headers = (headersArgs) => {
+export const headers: HeadersFunction = (headersArgs) => {
   return boundary.headers(headersArgs);
 };

app/routes/auth.$.tsx

@@ -0,0 +1,8 @@
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { authenticate } from "../shopify.server";
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  await authenticate.admin(request);
+
+  return null;
+};

app/routes/auth.login/error.server.jsx → app/routes/auth.login/error.server.tsx

@@ -1,6 +1,11 @@
+import type { LoginError } from "@shopify/shopify-app-remix/server";
 import { LoginErrorType } from "@shopify/shopify-app-remix/server";
 
-export function loginErrorMessage(loginErrors) {
+interface LoginErrorMessage {
+  shop?: string;
+}
+
+export function loginErrorMessage(loginErrors: LoginError): LoginErrorMessage {
   if (loginErrors?.shop === LoginErrorType.MissingShop) {
     return { shop: "Please enter your shop domain to log in" };
   } else if (loginErrors?.shop === LoginErrorType.InvalidShop) {

app/routes/auth.login/route.jsx → app/routes/auth.login/route.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import {
   AppProvider as PolarisAppProvider,
@@ -9,41 +10,38 @@ import {
   Text,
   TextField,
 } from "@shopify/polaris";
-
 import { Form, useActionData, useLoaderData } from "@remix-run/react";
 import polarisStyles from "@shopify/polaris/build/esm/styles.css";
-
 import { login } from "../../shopify.server";
 import { loginErrorMessage } from "./error.server";
 
 export const links = () => [{ rel: "stylesheet", href: polarisStyles }];
 
-export async function loader({ request }) {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
   const errors = loginErrorMessage(await login(request));
 
   return json({
     errors,
     polarisTranslations: require(`@shopify/polaris/locales/en.json`),
   });
-}
+};
 
-export async function action({ request }) {
+export const action = async ({ request }: ActionFunctionArgs) => {
   const errors = loginErrorMessage(await login(request));
 
   return json({
     errors,
   });
-}
+};
 
 export default function Auth() {
-  const { polarisTranslations } = useLoaderData();
-  const loaderData = useLoaderData();
-  const actionData = useActionData();
+  const loaderData = useLoaderData<typeof loader>();
+  const actionData = useActionData<typeof action>();
   const [shop, setShop] = useState("");
   const { errors } = actionData || loaderData;
 
   return (
-    <PolarisAppProvider i18n={polarisTranslations}>
+    <PolarisAppProvider i18n={loaderData.polarisTranslations}>
       <Page>
         <Card>
           <Form method="post">

app/routes/webhooks.jsx → app/routes/webhooks.tsx

@@ -1,7 +1,8 @@
+import type { ActionFunctionArgs } from "@remix-run/node";
 import { authenticate } from "../shopify.server";
 import db from "../db.server";
 
-export const action = async ({ request }) => {
+export const action = async ({ request }: ActionFunctionArgs) => {
   const { topic, shop, session, admin, payload } = await authenticate.webhook(
     request
   );
@@ -15,6 +16,7 @@ export const action = async ({ request }) => {
       if (session) {
         await db.session.deleteMany({ where: { shop } });
       }
+
       break;
     case "CUSTOMERS_DATA_REQUEST":
     case "CUSTOMERS_REDACT":

app/shopify.server.js → app/shopify.server.ts

@@ -7,7 +7,6 @@ import {
 } from "@shopify/shopify-app-remix/server";
 import { PrismaSessionStorage } from "@shopify/shopify-app-session-storage-prisma";
 import { restResources } from "@shopify/shopify-api/rest/admin/2023-07";
-
 import prisma from "./db.server";
 
 const shopify = shopifyApp({