@shopify/cli-hydrogen 6.0.2 → 7.0.0

package/dist/generator-templates/starter/app/routes/account_.reset.$id.$resetToken.tsx

@@ -1,136 +0,0 @@
-import {type ActionFunctionArgs, json, redirect} from '@shopify/remix-oxygen';
-import {Form, useActionData, type MetaFunction} from '@remix-run/react';
-
-type ActionResponse = {
-  error: string | null;
-};
-
-export const meta: MetaFunction = () => {
-  return [{title: 'Reset Password'}];
-};
-
-export async function action({request, context, params}: ActionFunctionArgs) {
-  if (request.method !== 'POST') {
-    return json({error: 'Method not allowed'}, {status: 405});
-  }
-  const {id, resetToken} = params;
-  const {session, storefront} = context;
-
-  try {
-    if (!id || !resetToken) {
-      throw new Error('customer token or id not found');
-    }
-
-    const form = await request.formData();
-    const password = form.has('password') ? String(form.get('password')) : '';
-    const passwordConfirm = form.has('passwordConfirm')
-      ? String(form.get('passwordConfirm'))
-      : '';
-    const validInputs = Boolean(password && passwordConfirm);
-    if (validInputs && password !== passwordConfirm) {
-      throw new Error('Please provide matching passwords');
-    }
-
-    const {customerReset} = await storefront.mutate(CUSTOMER_RESET_MUTATION, {
-      variables: {
-        id: `gid://shopify/Customer/${id}`,
-        input: {password, resetToken},
-      },
-    });
-
-    if (customerReset?.customerUserErrors?.length) {
-      throw new Error(customerReset?.customerUserErrors[0].message);
-    }
-
-    if (!customerReset?.customerAccessToken) {
-      throw new Error('Access token not found. Please try again.');
-    }
-    session.set('customerAccessToken', customerReset.customerAccessToken);
-
-    return redirect('/account', {
-      headers: {
-        'Set-Cookie': await session.commit(),
-      },
-    });
-  } catch (error: unknown) {
-    if (error instanceof Error) {
-      return json({error: error.message}, {status: 400});
-    }
-    return json({error}, {status: 400});
-  }
-}
-
-export default function Reset() {
-  const action = useActionData<ActionResponse>();
-
-  return (
-    <div className="account-reset">
-      <h1>Reset Password.</h1>
-      <p>Enter a new password for your account.</p>
-      <Form method="POST">
-        <fieldset>
-          <label htmlFor="password">Password</label>
-          <input
-            aria-label="Password"
-            autoComplete="current-password"
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus
-            id="password"
-            minLength={8}
-            name="password"
-            placeholder="Password"
-            required
-            type="password"
-          />
-          <label htmlFor="passwordConfirm">Re-enter password</label>
-          <input
-            aria-label="Re-enter password"
-            autoComplete="current-password"
-            id="passwordConfirm"
-            minLength={8}
-            name="passwordConfirm"
-            placeholder="Re-enter password"
-            required
-            type="password"
-          />
-        </fieldset>
-        {action?.error ? (
-          <p>
-            <mark>
-              <small>{action.error}</small>
-            </mark>
-          </p>
-        ) : (
-          <br />
-        )}
-        <button type="submit">Reset</button>
-      </Form>
-      <br />
-      <p>
-        <a href="/account/login">Back to login →</a>
-      </p>
-    </div>
-  );
-}
-
-// NOTE: https://shopify.dev/docs/api/storefront/latest/mutations/customerreset
-const CUSTOMER_RESET_MUTATION = `#graphql
-  mutation customerReset(
-    $id: ID!,
-    $input: CustomerResetInput!
-    $country: CountryCode
-    $language: LanguageCode
-  ) @inContext(country: $country, language: $language) {
-    customerReset(id: $id, input: $input) {
-      customerAccessToken {
-        accessToken
-        expiresAt
-      }
-      customerUserErrors {
-        code
-        field
-        message
-      }
-    }
-  }
-` as const;

package/dist/virtual-routes/routes/debug-network.jsx

@@ -1,289 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { FlameChartWrapper } from "../components/FlameChartWrapper.jsx";
-import { Link } from "@remix-run/react";
-import { Script } from "@shopify/hydrogen";
-function DebugNetwork() {
-  const serverEvents = useRef({
-    smallestStartTime: 0,
-    mainRequests: [],
-    subRequests: {},
-    showPutRequests: false
-  });
-  const [timestamp, setTimestamp] = useState();
-  function serverEventHandler(onEvent) {
-    return (event) => {
-      const data = JSON.parse(event.data);
-      if (serverEvents.current.smallestStartTime === 0) {
-        serverEvents.current.smallestStartTime = data.startTime;
-      } else {
-        serverEvents.current.smallestStartTime = Math.min(
-          data.startTime,
-          serverEvents.current.smallestStartTime
-        );
-      }
-      onEvent(data);
-      setTimeout(() => {
-        setTimestamp((/* @__PURE__ */ new Date()).getTime());
-      }, 0);
-    };
-  }
-  useEffect(() => {
-    const evtSource = new EventSource("/debug-network-server", {
-      withCredentials: true
-    });
-    const mainRequestHandler = serverEventHandler((data) => {
-      serverEvents.current.mainRequests = [
-        ...serverEvents.current.mainRequests,
-        {
-          ...data,
-          url: data.url.replace(location.origin, "")
-        }
-      ];
-    });
-    evtSource.addEventListener("Request", mainRequestHandler);
-    const subRequestHandler = serverEventHandler((data) => {
-      let groupEvents = serverEvents.current.subRequests[data.id] || [];
-      groupEvents = [...groupEvents, data];
-      serverEvents.current.subRequests = {
-        ...serverEvents.current.subRequests,
-        [data.id]: groupEvents
-      };
-    });
-    evtSource.addEventListener("Sub request", subRequestHandler);
-    return () => {
-      evtSource.removeEventListener("Request", mainRequestHandler);
-      evtSource.removeEventListener("Sub request", subRequestHandler);
-      evtSource.close();
-    };
-  }, []);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Script,
-      {
-        src: "https://unpkg.com/flame-chart-js@2.3.1/dist/index.min.js",
-        suppressHydrationWarning: true
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          width: "100vw",
-          backgroundColor: "#F5F5F5",
-          fontSize: "0.8rem"
-        },
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                justifyContent: "space-between"
-              },
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      alignItems: "center"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          onClick: () => {
-                            fetch("/debug-network-server", { method: "DELETE" }).catch(
-                              (error) => console.error("Could not clear history:", error)
-                            );
-                            serverEvents.current = {
-                              smallestStartTime: 0,
-                              mainRequests: [],
-                              subRequests: {},
-                              showPutRequests: serverEvents.current.showPutRequests
-                            };
-                            setTimestamp((/* @__PURE__ */ new Date()).getTime());
-                          },
-                          children: "Clear"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "input",
-                        {
-                          id: "showPutRequests",
-                          type: "checkbox",
-                          checked: serverEvents.current.showPutRequests,
-                          onChange: (event) => {
-                            serverEvents.current.showPutRequests = event.target.checked;
-                            setTimestamp((/* @__PURE__ */ new Date()).getTime());
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("label", { htmlFor: "showPutRequests", children: "Show cache update requests (PUT)" })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    style: {
-                      paddingRight: "5px"
-                    },
-                    children: "Unstable"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(FlameChart, { serverEvents: serverEvents.current }, timestamp),
-          /* @__PURE__ */ jsxs("p", { style: { color: "#777", fontSize: "0.7rem", paddingLeft: "5px" }, children: [
-            "Note: You may need to turn on '",
-            /* @__PURE__ */ jsx("b", { children: "Disable Cache" }),
-            "' for your navigating window. If you are not seeing any requests, try re-running '",
-            /* @__PURE__ */ jsx("b", { children: "npm run dev" }),
-            "' in your terminal while leaving this window open."
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-const PANEL_HEIGHT = 300;
-function FlameChart({ serverEvents }) {
-  if (serverEvents.mainRequests.length === 0)
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          height: `${PANEL_HEIGHT}px`,
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          backgroundColor: "#FAFAFA"
-        },
-        children: /* @__PURE__ */ jsxs("p", { style: { fontWeight: "bold", color: "#777" }, children: [
-          "Navigate your",
-          " ",
-          /* @__PURE__ */ jsx(Link, { to: "/", target: "_blank", children: "app" })
-        ] })
-      }
-    );
-  let totalRequests = 0;
-  let totalSubRequests = 0;
-  const calcDuration = (time) => time - serverEvents.smallestStartTime;
-  let items = [];
-  serverEvents.mainRequests.forEach((mainRequest) => {
-    const mainResponseStart = calcDuration(mainRequest.endTime);
-    let mainResponseEnd = mainResponseStart;
-    const subRequestItems = [];
-    const subRequests = serverEvents.subRequests[mainRequest.id] || [];
-    subRequests.forEach((subRequest) => {
-      const subRequestEnd = calcDuration(subRequest.endTime);
-      if (subRequest.cacheStatus !== "PUT") {
-        mainResponseEnd = Math.max(mainResponseEnd, subRequestEnd);
-      }
-      const subRequestItem = {
-        name: `${subRequest.cacheStatus} ${subRequest.url}`.trim(),
-        intervals: "request",
-        timing: {
-          requestStart: calcDuration(subRequest.startTime),
-          requestEnd: subRequestEnd
-        }
-      };
-      if (serverEvents.showPutRequests) {
-        subRequestItems.push(subRequestItem);
-      } else {
-        subRequest.cacheStatus !== "PUT" && subRequestItems.push(subRequestItem);
-      }
-      totalSubRequests++;
-    });
-    totalRequests++;
-    items.push({
-      name: mainRequest.url,
-      intervals: "mainRequest",
-      timing: {
-        requestStart: calcDuration(mainRequest.startTime),
-        responseStart: mainResponseStart,
-        responseEnd: mainResponseEnd
-      }
-    });
-    items = items.concat(subRequestItems);
-  });
-  const data = {
-    items,
-    intervals: {
-      mainRequest: [
-        {
-          name: "server",
-          color: "#99CC00",
-          type: "block",
-          start: "requestStart",
-          end: "responseStart"
-        },
-        {
-          name: "streaming",
-          color: "#33CCFF",
-          type: "block",
-          start: "responseStart",
-          end: "responseEnd"
-        }
-      ],
-      request: [
-        {
-          name: "request",
-          color: "#FFCC00",
-          type: "block",
-          start: "requestStart",
-          end: "requestEnd"
-        }
-      ]
-    }
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      FlameChartWrapper,
-      {
-        height: PANEL_HEIGHT,
-        waterfall: data,
-        settings: {
-          styles: {
-            waterfallPlugin: {
-              defaultHeight: PANEL_HEIGHT
-            }
-          }
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          display: "flex",
-          padding: "5px",
-          borderTop: "1px solid #CCC",
-          borderBottom: "1px solid #CCC"
-        },
-        children: [
-          totalRequests,
-          " requests",
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                paddingLeft: "2px",
-                paddingRight: "2px"
-              },
-              children: "|"
-            }
-          ),
-          totalSubRequests,
-          " sub requests"
-        ]
-      }
-    )
-  ] });
-}
-export {
-  DebugNetwork as default
-};