Merge pull request #675 from Shopify/fix_remix_docs

Fix remix docs
Shopify · Feb 28, 2024 · ebce731 · ebce731
2 parents fff67dc + b4d506d
commit ebce731
Show file tree

Hide file tree

Showing 12 changed files with 3,979 additions and 3,100 deletions.
diff --git a/.changeset/popular-goats-join.md b/.changeset/popular-goats-join.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/shopify-app-remix/docs/generated/generated_docs_data.json b/packages/shopify-app-remix/docs/generated/generated_docs_data.json
diff --git a/packages/shopify-app-remix/docs/generated/generated_static_pages.json b/packages/shopify-app-remix/docs/generated/generated_static_pages.json
@@ -164,6 +164,12 @@
             "description": "Returns the same `admin` context (`AdminApiContext`) from `authenticate.webhook` that is returned from `authenticate.admin`.\n\nSee [authenticate.webhook](/docs/api/shopify-app-remix/authenticate/webhook#example-admin) for more details.",
             "isOptional": true
           },
+          {
+            "name": "v3_lineItemBilling",
+            "value": "",
+            "description": "Allows you to pass billing plans with up to two line items when creating a new app subscription.\n\n This allows you to create app subscriptions with both recurring and usage based components.",
+            "isOptional": true
+          },
           {
             "name": "unstable_newEmbeddedAuthStrategy",
             "value": "",
@@ -518,7 +524,7 @@
           "tabs": [
             {
               "title": "/app/routes/webhooks.tsx",
-              "code": "import {ActionFunction} from '@remix-run/node';\n\nimport db from '../db.server';\n\nimport {authenticate} from '~/shopify.server';\n\nexport const action: ActionFunction = async ({request}) =&gt; {\n  const {topic, shop, session} = await authenticate.webhook(request);\n\n  switch (topic) {\n    case 'APP_UNINSTALLED':\n      if (session) {\n        await db.session.deleteMany({where: {shop}});\n      }\n      break;\n    case 'CUSTOMERS_DATA_REQUEST':\n    case 'CUSTOMERS_REDACT':\n    case 'SHOP_REDACT':\n    default:\n      throw new Response('Unhandled webhook topic', {status: 404});\n  }\n\n  throw new Response();\n};\n",
+              "code": "import {ActionFunctionArgs} from '@remix-run/node';\n\nimport db from '../db.server';\n\nimport {authenticate} from '~/shopify.server';\n\nexport const action = async ({request}: ActionFunctionArgs) =&gt; {\n  const {topic, shop, session} = await authenticate.webhook(request);\n\n  switch (topic) {\n    case 'APP_UNINSTALLED':\n      if (session) {\n        await db.session.deleteMany({where: {shop}});\n      }\n      break;\n    case 'CUSTOMERS_DATA_REQUEST':\n    case 'CUSTOMERS_REDACT':\n    case 'SHOP_REDACT':\n    default:\n      throw new Response('Unhandled webhook topic', {status: 404});\n  }\n\n  throw new Response();\n};\n",
               "language": "tsx"
             }
           ]

diff --git a/packages/shopify-app-remix/docs/staticPages/examples/guides/webhooks/endpoint.example.ts b/packages/shopify-app-remix/docs/staticPages/examples/guides/webhooks/endpoint.example.ts
@@ -1,10 +1,10 @@
-import {ActionFunction} from '@remix-run/node';
+import {ActionFunctionArgs} from '@remix-run/node';
 
 import db from '../db.server';
 
 import {authenticate} from '~/shopify.server';
 
-export const action: ActionFunction = async ({request}) => {
+export const action = async ({request}: ActionFunctionArgs) => {
   const {topic, shop, session} = await authenticate.webhook(request);
 
   switch (topic) {

diff --git a/packages/shopify-app-remix/src/server/authenticate/admin/types.ts b/packages/shopify-app-remix/src/server/authenticate/admin/types.ts
@@ -22,16 +22,6 @@ interface AdminContextInternal<
    * <caption>Using offline sessions.</caption>
    * <description>Get your app's shop-specific data using an offline session.</description>
    * ```ts
-   * // shopify.server.ts
-   * import { shopifyApp } from "@shopify/shopify-app-remix/server";
-   *
-   * const shopify = shopifyApp({
-   *   // ...etc
-   * });
-   * export default shopify;
-   * export const authenticate = shopify.authenticate;
-   * ```
-   * ```ts
    * // /app/routes/**\/*.ts
    * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
@@ -42,21 +32,20 @@ interface AdminContextInternal<
    *   return json(await getMyAppData({shop: session.shop));
    * };
    * ```
-   *
-   * @example
-   * <caption>Using online sessions.</caption>
-   * <description>Get your app's user-specific data using an online session.</description>
    * ```ts
    * // shopify.server.ts
    * import { shopifyApp } from "@shopify/shopify-app-remix/server";
    *
    * const shopify = shopifyApp({
    *   // ...etc
-   *   useOnlineTokens: true,
    * });
    * export default shopify;
    * export const authenticate = shopify.authenticate;
    * ```
+   *
+   * @example
+   * <caption>Using online sessions.</caption>
+   * <description>Get your app's user-specific data using an online session.</description>
    * ```ts
    * // /app/routes/**\/*.ts
    * import { LoaderFunctionArgs, json } from "@remix-run/node";
@@ -68,6 +57,17 @@ interface AdminContextInternal<
    *   return json(await getMyAppData({user: session.onlineAccessInfo!.id}));
    * };
    * ```
+   * ```ts
+   * // shopify.server.ts
+   * import { shopifyApp } from "@shopify/shopify-app-remix/server";
+   *
+   * const shopify = shopifyApp({
+   *   // ...etc
+   *   useOnlineTokens: true,
+   * });
+   * export default shopify;
+   * export const authenticate = shopify.authenticate;
+   * ```
    */
   session: Session;
 
@@ -119,29 +119,29 @@ export interface EmbeddedAdminContext<
    * <caption>Using the decoded session token.</caption>
    * <description>Get user-specific data using the `sessionToken` object.</description>
    * ```ts
-   * // shopify.server.ts
-   * import { shopifyApp } from "@shopify/shopify-app-remix/server";
-   *
-   * const shopify = shopifyApp({
-   *   // ...etc
-   *   useOnlineTokens: true,
-   * });
-   * export default shopify;
-   * export const authenticate = shopify.authenticate;
-   * ```
-   * ```ts
    * // /app/routes/**\/*.ts
    * import { LoaderFunctionArgs, json } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    * import { getMyAppData } from "~/db/model.server";
    *
    * export const loader = async ({ request }: LoaderFunctionArgs) => {
-   *   const { sessionToken } = await authenticate.public.checkout(
+   *   const { sessionToken } = await authenticate.admin(
    *     request
    *   );
    *   return json(await getMyAppData({user: sessionToken.sub}));
    * };
    * ```
+   * ```ts
+   * // shopify.server.ts
+   * import { shopifyApp } from "@shopify/shopify-app-remix/server";
+   *
+   * const shopify = shopifyApp({
+   *   // ...etc
+   *   useOnlineTokens: true,
+   * });
+   * export default shopify;
+   * export const authenticate = shopify.authenticate;
+   * ```
    */
   sessionToken: JwtPayload;
 

diff --git a/packages/shopify-app-remix/src/server/authenticate/flow/types.ts b/packages/shopify-app-remix/src/server/authenticate/flow/types.ts
@@ -15,10 +15,10 @@ export interface FlowContext<
    * <description>Use the session associated with this request to use REST resources.</description>
    * ```ts
    * // /app/routes/flow.tsx
-   * import { ActionFunction } from "@remix-run/node";
+   * import { ActionFunctionArgs } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const action: ActionFunction = async ({ request }) => {
+   * export const action = async ({ request }: ActionFunctionArgs) => {
    *   const { session, admin } = await authenticate.flow(request);
    *
    *   const products = await admin?.rest.resources.Product.all({ session });
@@ -38,10 +38,10 @@ export interface FlowContext<
    * <description>Get the request's POST payload.</description>
    * ```ts
    * // /app/routes/flow.tsx
-   * import { ActionFunction } from "@remix-run/node";
+   * import { ActionFunctionArgs } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const action: ActionFunction = async ({ request }) => {
+   * export const action = async ({ request }: ActionFunctionArgs) => {
    *   const { payload } = await authenticate.flow(request);
    *   return new Response();
    * };

diff --git a/...fy-app-remix/src/server/authenticate/public/appProxy/authenticate.public.app-proxy.doc.ts b/...fy-app-remix/src/server/authenticate/public/appProxy/authenticate.public.app-proxy.doc.ts
@@ -30,6 +30,12 @@ const data: ReferenceEntityTemplateSchema = {
       subtitle: 'Interact with the Storefront API.',
       url: '/docs/api/shopify-app-remix/apis/storefront-api',
     },
+    {
+      name: 'Liquid reference',
+      subtitle: "Use the shop's theme to render a template.",
+      url: '/docs/api/liquid',
+      type: 'liquid',
+    },
   ],
 };
 

diff --git a/packages/shopify-app-remix/src/server/authenticate/public/appProxy/types.ts b/packages/shopify-app-remix/src/server/authenticate/public/appProxy/types.ts
@@ -24,7 +24,7 @@ interface Context {
    *
    * @example
    * <caption>Rendering liquid content.</caption>
-   * <description>Use the `liquid` helper to render a `Response` with Liquid content using the shop's theme.</description>
+   * <description>Use the `liquid` helper to render a `Response` with Liquid content using the shop's theme. See the [Liquid reference](https://shopify.dev/docs/api/liquid) for all the features it enables.</description>
    * ```ts
    * // app/routes/**\/.ts
    * import {authenticate} from "~/shopify.server"
@@ -98,10 +98,13 @@ export interface AppProxyContextWithSession<
    *
    * export const loader = async ({ request }) => {
    *   // Get the session for the shop that initiated the request to the app proxy.
-   *   const { session } = await authenticate.public.appProxy(request);
+   *   const { session } =
+   *     await authenticate.public.appProxy(request);
    *
    *   // Use the session data to make to queries to your database or additional requests.
-   *   return json(await getMyAppModelData({shop: session.shop));
+   *   return json(
+   *     await getMyAppModelData({shop: session.shop})
+   *   );
    * };
    * ```
    */
@@ -130,7 +133,11 @@ export interface AppProxyContextWithSession<
    *         }
    *       }
    *     }`,
-   *     { variables: { input: { title: "Product Name" } } }
+   *     {
+   *       variables: {
+   *         input: { title: "Product Name" }
+   *       }
+   *     }
    *   );
    *
    *   const productData = await response.json();
@@ -154,7 +161,18 @@ export interface AppProxyContextWithSession<
    * export async function action({ request }: ActionFunctionArgs) {
    *   const { storefront } = await authenticate.public.appProxy(request);
    *
-   *   const response = await storefront.graphql(`{blogs(first: 10) { edges { node { id } } } }`);
+   *   const response = await storefront.graphql(
+   *     `#graphql
+   *     query blogIds {
+   *       blogs(first: 10) {
+   *         edges {
+   *           node {
+   *             id
+   *           }
+   *         }
+   *       }
+   *     }`
+   *   );
    *
    *   return json(await response.json());
    * }

diff --git a/packages/shopify-app-remix/src/server/authenticate/webhooks/types.ts b/packages/shopify-app-remix/src/server/authenticate/webhooks/types.ts
@@ -20,10 +20,10 @@ interface Context<Topics = string | number | symbol> {
    * <description>Get the API version used for webhook request.</description>
    * ```ts
    * // /app/routes/webhooks.tsx
-   * import { ActionFunction } from "@remix-run/node";
+   * import { ActionFunctionArgs } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const action: ActionFunction = async ({ request }) => {
+   * export const action = async ({ request }: ActionFunctionArgs) => {
    *   const { apiVersion } = await authenticate.webhook(request);
    *   return new Response();
    * };
@@ -38,10 +38,10 @@ interface Context<Topics = string | number | symbol> {
    * <description>Get the shop that triggered a webhook.</description>
    * ```ts
    * // /app/routes/webhooks.tsx
-   * import { ActionFunction } from "@remix-run/node";
+   * import { ActionFunctionArgs } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const action: ActionFunction = async ({ request }) => {
+   * export const action = async ({ request }: ActionFunctionArgs) => {
    *   const { shop } = await authenticate.webhook(request);
    *   return new Response();
    * };
@@ -56,10 +56,10 @@ interface Context<Topics = string | number | symbol> {
    * <description>Get the event topic for the webhook.</description>
    * ```ts
    * // /app/routes/webhooks.tsx
-   * import { ActionFunction } from "@remix-run/node";
+   * import { ActionFunctionArgs } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const action: ActionFunction = async ({ request }) => {
+   * export const action = async ({ request }: ActionFunctionArgs) => {
    *   const { topic } = await authenticate.webhook(request);
    *
    *   switch (topic) {
@@ -81,10 +81,10 @@ interface Context<Topics = string | number | symbol> {
    * <description>Get the webhook ID.</description>
    * ```ts
    * // /app/routes/webhooks.tsx
-   * import { ActionFunction } from "@remix-run/node";
+   * import { ActionFunctionArgs } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const action: ActionFunction = async ({ request }) => {
+   * export const action = async ({ request }: ActionFunctionArgs) => {
    *   const { webhookId } = await authenticate.webhook(request);
    *   return new Response();
    * };
@@ -99,10 +99,10 @@ interface Context<Topics = string | number | symbol> {
    * <description>Get the request's POST payload.</description>
    * ```ts
    * // /app/routes/webhooks.tsx
-   * import { ActionFunction } from "@remix-run/node";
+   * import { ActionFunctionArgs } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const action: ActionFunction = async ({ request }) => {
+   * export const action = async ({ request }: ActionFunctionArgs) => {
    *   const { payload } = await authenticate.webhook(request);
    *   return new Response();
    * };
@@ -117,10 +117,10 @@ interface Context<Topics = string | number | symbol> {
    * <description>Get the webhook sub-topic.</description>
    * ```ts
    * // /app/routes/webhooks.tsx
-   * import { ActionFunction } from "@remix-run/node";
+   * import { ActionFunctionArgs } from "@remix-run/node";
    * import { authenticate } from "../shopify.server";
    *
-   * export const action: ActionFunction = async ({ request }) => {
+   * export const action = async ({ request }: ActionFunctionArgs) => {
    *   const { subTopic } = await authenticate.webhook(request);
    *   return new Response();
    * };