@shopify/cli-hydrogen 6.0.2 → 7.0.0

package/package.json

@@ -4,18 +4,19 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "6.0.2",
+  "version": "7.0.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
     "build": "tsup && node scripts/build-check.mjs",
-    "dev": "tsup --watch",
+    "dev": "tsup --watch ./src",
     "typecheck": "tsc --noEmit",
     "generate:manifest": "node scripts/generate-manifest.mjs",
     "test": "cross-env SHOPIFY_UNIT_TEST=1 vitest run --test-timeout=20000",
     "test:watch": "cross-env SHOPIFY_UNIT_TEST=1 vitest --test-timeout=20000"
   },
   "devDependencies": {
+    "@remix-run/dev": "^2.5.1",
     "@types/diff": "^5.0.2",
     "@types/fs-extra": "^11.0.1",
     "@types/gunzip-maybe": "^1.4.0",
@@ -23,33 +24,36 @@
     "@types/recursive-readdir": "^2.2.1",
     "@types/stack-trace": "^0.0.30",
     "@types/tar-fs": "^2.0.1",
+    "@vitest/coverage-v8": "^1.0.4",
     "devtools-protocol": "^0.0.1177611",
-    "get-port": "^7.0.0",
-    "@vitest/coverage-v8": "^0.33.0",
     "fast-glob": "^3.2.12",
-    "flame-chart-js": "2.3.1",
-    "type-fest": "^3.6.0",
-    "vitest": "^0.33.0"
+    "flame-chart-js": "2.3.2",
+    "get-port": "^7.0.0",
+    "type-fest": "^4.5.0",
+    "vitest": "^1.0.4"
   },
   "dependencies": {
     "@ast-grep/napi": "0.11.0",
     "@graphql-codegen/cli": "5.0.0",
     "@oclif/core": "2.11.7",
-    "@shopify/cli-kit": "3.50.0",
-    "@shopify/hydrogen-codegen": "^0.1.0",
-    "@shopify/mini-oxygen": "^2.2.3",
-    "@shopify/oxygen-cli": "^2.3.2",
+    "@shopify/cli-kit": "3.52.0",
+    "@shopify/hydrogen-codegen": "^0.2.0",
+    "@shopify/mini-oxygen": "^2.2.5",
+    "@shopify/oxygen-cli": "^4.0.0",
     "ansi-escapes": "^6.2.0",
+    "cli-truncate": "^4.0.0",
     "diff": "^5.1.0",
     "fs-extra": "^11.1.0",
     "get-port": "^7.0.0",
+    "graphql-config": "5.0.3",
     "gunzip-maybe": "^1.4.2",
-    "miniflare": "3.20230918.0",
+    "miniflare": "3.20231218.2",
     "prettier": "^2.8.4",
     "semver": "^7.5.3",
     "source-map": "^0.7.4",
     "stack-trace": "^1.0.0-pre2",
     "tar-fs": "^2.1.1",
+    "tempy": "^3.0.0",
     "ts-morph": "20.0.0",
     "use-resize-observer": "^9.1.0",
     "ws": "^8.13.0"
@@ -58,23 +62,11 @@
     "@parcel/watcher": "^2.3.0"
   },
   "peerDependencies": {
-    "@remix-run/dev": "^2.1.0",
-    "@remix-run/react": "^2.1.0",
-    "@shopify/hydrogen": "2023.10.2",
-    "@shopify/remix-oxygen": "^2.0.0"
+    "@remix-run/dev": "^2.1.0"
   },
   "peerDependenciesMeta": {
     "@remix-run/dev": {
       "optional": true
-    },
-    "@remix-run/react": {
-      "optional": true
-    },
-    "@shopify/hydrogen-react": {
-      "optional": true
-    },
-    "@shopify/remix-oxygen": {
-      "optional": true
     }
   },
   "bin": "dist/create-app.js",
@@ -87,7 +79,7 @@
     "oclif.manifest.json"
   ],
   "engines": {
-    "node": ">=16.13"
+    "node": ">=18.0.0"
   },
   "oclif": {
     "commands": "dist/commands",

package/dist/generator-templates/starter/app/routes/account_.activate.$id.$activationToken.tsx

@@ -1,161 +0,0 @@
-import {
-  json,
-  redirect,
-  type ActionFunctionArgs,
-  type LoaderFunctionArgs,
-} from '@shopify/remix-oxygen';
-import {Form, useActionData, type MetaFunction} from '@remix-run/react';
-
-type ActionResponse = {
-  error: string | null;
-};
-
-export const meta: MetaFunction = () => {
-  return [{title: 'Activate Account'}];
-};
-
-export async function loader({context}: LoaderFunctionArgs) {
-  if (await context.session.get('customerAccessToken')) {
-    return redirect('/account');
-  }
-  return json({});
-}
-
-export async function action({request, context, params}: ActionFunctionArgs) {
-  const {session, storefront} = context;
-  const {id, activationToken} = params;
-
-  if (request.method !== 'POST') {
-    return json({error: 'Method not allowed'}, {status: 405});
-  }
-
-  try {
-    if (!id || !activationToken) {
-      throw new Error('Missing token. The link you followed might be wrong.');
-    }
-
-    const form = await request.formData();
-    const password = form.has('password') ? String(form.get('password')) : null;
-    const passwordConfirm = form.has('passwordConfirm')
-      ? String(form.get('passwordConfirm'))
-      : null;
-
-    const validPasswords =
-      password && passwordConfirm && password === passwordConfirm;
-
-    if (!validPasswords) {
-      throw new Error('Passwords do not match');
-    }
-
-    const {customerActivate} = await storefront.mutate(
-      CUSTOMER_ACTIVATE_MUTATION,
-      {
-        variables: {
-          id: `gid://shopify/Customer/${id}`,
-          input: {
-            password,
-            activationToken,
-          },
-        },
-      },
-    );
-
-    if (customerActivate?.customerUserErrors?.length) {
-      throw new Error(customerActivate.customerUserErrors[0].message);
-    }
-
-    const {customerAccessToken} = customerActivate ?? {};
-    if (!customerAccessToken) {
-      throw new Error('Could not activate account.');
-    }
-    session.set('customerAccessToken', 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 Activate() {
-  const action = useActionData<ActionResponse>();
-  const error = action?.error ?? null;
-
-  return (
-    <div className="account-activate">
-      <h1>Activate Account.</h1>
-      <p>Create your password to activate your account.</p>
-      <Form method="POST">
-        <fieldset>
-          <label htmlFor="password">Password</label>
-          <input
-            id="password"
-            name="password"
-            type="password"
-            autoComplete="current-password"
-            placeholder="Password"
-            aria-label="Password"
-            minLength={8}
-            required
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus
-          />
-          <label htmlFor="passwordConfirm">Re-enter password</label>
-          <input
-            id="passwordConfirm"
-            name="passwordConfirm"
-            type="password"
-            autoComplete="current-password"
-            placeholder="Re-enter password"
-            aria-label="Re-enter password"
-            minLength={8}
-            required
-          />
-        </fieldset>
-        {error ? (
-          <p>
-            <mark>
-              <small>{error}</small>
-            </mark>
-          </p>
-        ) : (
-          <br />
-        )}
-        <button
-          className="bg-primary text-contrast rounded py-2 px-4 focus:shadow-outline block w-full"
-          type="submit"
-        >
-          Save
-        </button>
-      </Form>
-    </div>
-  );
-}
-
-// NOTE: https://shopify.dev/docs/api/storefront/latest/mutations/customeractivate
-const CUSTOMER_ACTIVATE_MUTATION = `#graphql
-  mutation customerActivate(
-    $id: ID!,
-    $input: CustomerActivateInput!,
-    $country: CountryCode,
-    $language: LanguageCode
-  ) @inContext(country: $country, language: $language) {
-    customerActivate(id: $id, input: $input) {
-      customerAccessToken {
-        accessToken
-        expiresAt
-      }
-      customerUserErrors {
-        code
-        field
-        message
-      }
-    }
-  }
-` as const;

package/dist/generator-templates/starter/app/routes/account_.recover.tsx

@@ -1,129 +0,0 @@
-import {
-  json,
-  redirect,
-  type LoaderFunctionArgs,
-  type ActionFunctionArgs,
-} from '@shopify/remix-oxygen';
-import {Form, Link, useActionData} from '@remix-run/react';
-
-type ActionResponse = {
-  error?: string;
-  resetRequested?: boolean;
-};
-
-export async function loader({context}: LoaderFunctionArgs) {
-  const customerAccessToken = await context.session.get('customerAccessToken');
-  if (customerAccessToken) {
-    return redirect('/account');
-  }
-
-  return json({});
-}
-
-export async function action({request, context}: ActionFunctionArgs) {
-  const {storefront} = context;
-  const form = await request.formData();
-  const email = form.has('email') ? String(form.get('email')) : null;
-
-  if (request.method !== 'POST') {
-    return json({error: 'Method not allowed'}, {status: 405});
-  }
-
-  try {
-    if (!email) {
-      throw new Error('Please provide an email.');
-    }
-    await storefront.mutate(CUSTOMER_RECOVER_MUTATION, {
-      variables: {email},
-    });
-
-    return json({resetRequested: true});
-  } catch (error: unknown) {
-    const resetRequested = false;
-    if (error instanceof Error) {
-      return json({error: error.message, resetRequested}, {status: 400});
-    }
-    return json({error, resetRequested}, {status: 400});
-  }
-}
-
-export default function Recover() {
-  const action = useActionData<ActionResponse>();
-
-  return (
-    <div className="account-recover">
-      <div>
-        {action?.resetRequested ? (
-          <>
-            <h1>Request Sent.</h1>
-            <p>
-              If that email address is in our system, you will receive an email
-              with instructions about how to reset your password in a few
-              minutes.
-            </p>
-            <br />
-            <Link to="/account/login">Return to Login</Link>
-          </>
-        ) : (
-          <>
-            <h1>Forgot Password.</h1>
-            <p>
-              Enter the email address associated with your account to receive a
-              link to reset your password.
-            </p>
-            <br />
-            <Form method="POST">
-              <fieldset>
-                <label htmlFor="email">Email</label>
-                <input
-                  aria-label="Email address"
-                  autoComplete="email"
-                  // eslint-disable-next-line jsx-a11y/no-autofocus
-                  autoFocus
-                  id="email"
-                  name="email"
-                  placeholder="Email address"
-                  required
-                  type="email"
-                />
-              </fieldset>
-              {action?.error ? (
-                <p>
-                  <mark>
-                    <small>{action.error}</small>
-                  </mark>
-                </p>
-              ) : (
-                <br />
-              )}
-              <button type="submit">Request Reset Link</button>
-            </Form>
-            <div>
-              <br />
-              <p>
-                <Link to="/account/login">Login →</Link>
-              </p>
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// NOTE: https://shopify.dev/docs/api/storefront/latest/mutations/customerrecover
-const CUSTOMER_RECOVER_MUTATION = `#graphql
-  mutation customerRecover(
-    $email: String!,
-    $country: CountryCode,
-    $language: LanguageCode
-  ) @inContext(country: $country, language: $language) {
-    customerRecover(email: $email) {
-      customerUserErrors {
-        code
-        field
-        message
-      }
-    }
-  }
-` as const;

package/dist/generator-templates/starter/app/routes/account_.register.tsx

@@ -1,207 +0,0 @@
-import {
-  json,
-  redirect,
-  type ActionFunctionArgs,
-  type LoaderFunctionArgs,
-} from '@shopify/remix-oxygen';
-import {Form, Link, useActionData} from '@remix-run/react';
-import type {CustomerCreateMutation} from 'storefrontapi.generated';
-
-type ActionResponse = {
-  error: string | null;
-  newCustomer:
-    | NonNullable<CustomerCreateMutation['customerCreate']>['customer']
-    | null;
-};
-
-export async function loader({context}: LoaderFunctionArgs) {
-  const customerAccessToken = await context.session.get('customerAccessToken');
-  if (customerAccessToken) {
-    return redirect('/account');
-  }
-
-  return json({});
-}
-
-export async function action({request, context}: ActionFunctionArgs) {
-  if (request.method !== 'POST') {
-    return json({error: 'Method not allowed'}, {status: 405});
-  }
-
-  const {storefront, session} = context;
-  const form = await request.formData();
-  const email = String(form.has('email') ? form.get('email') : '');
-  const password = form.has('password') ? String(form.get('password')) : null;
-  const passwordConfirm = form.has('passwordConfirm')
-    ? String(form.get('passwordConfirm'))
-    : null;
-
-  const validPasswords =
-    password && passwordConfirm && password === passwordConfirm;
-
-  const validInputs = Boolean(email && password);
-  try {
-    if (!validPasswords) {
-      throw new Error('Passwords do not match');
-    }
-
-    if (!validInputs) {
-      throw new Error('Please provide both an email and a password.');
-    }
-
-    const {customerCreate} = await storefront.mutate(CUSTOMER_CREATE_MUTATION, {
-      variables: {
-        input: {email, password},
-      },
-    });
-
-    if (customerCreate?.customerUserErrors?.length) {
-      throw new Error(customerCreate?.customerUserErrors[0].message);
-    }
-
-    const newCustomer = customerCreate?.customer;
-    if (!newCustomer?.id) {
-      throw new Error('Could not create customer');
-    }
-
-    // get an access token for the new customer
-    const {customerAccessTokenCreate} = await storefront.mutate(
-      REGISTER_LOGIN_MUTATION,
-      {
-        variables: {
-          input: {
-            email,
-            password,
-          },
-        },
-      },
-    );
-
-    if (!customerAccessTokenCreate?.customerAccessToken?.accessToken) {
-      throw new Error('Missing access token');
-    }
-    session.set(
-      'customerAccessToken',
-      customerAccessTokenCreate?.customerAccessToken,
-    );
-
-    return json(
-      {error: null, newCustomer},
-      {
-        status: 302,
-        headers: {
-          'Set-Cookie': await session.commit(),
-          Location: '/account',
-        },
-      },
-    );
-  } catch (error: unknown) {
-    if (error instanceof Error) {
-      return json({error: error.message}, {status: 400});
-    }
-    return json({error}, {status: 400});
-  }
-}
-
-export default function Register() {
-  const data = useActionData<ActionResponse>();
-  const error = data?.error || null;
-  return (
-    <div className="login">
-      <h1>Register.</h1>
-      <Form method="POST">
-        <fieldset>
-          <label htmlFor="email">Email address</label>
-          <input
-            id="email"
-            name="email"
-            type="email"
-            autoComplete="email"
-            required
-            placeholder="Email address"
-            aria-label="Email address"
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus
-          />
-          <label htmlFor="password">Password</label>
-          <input
-            id="password"
-            name="password"
-            type="password"
-            autoComplete="current-password"
-            placeholder="Password"
-            aria-label="Password"
-            minLength={8}
-            required
-          />
-          <label htmlFor="passwordConfirm">Re-enter password</label>
-          <input
-            id="passwordConfirm"
-            name="passwordConfirm"
-            type="password"
-            autoComplete="current-password"
-            placeholder="Re-enter password"
-            aria-label="Re-enter password"
-            minLength={8}
-            required
-          />
-        </fieldset>
-        {error ? (
-          <p>
-            <mark>
-              <small>{error}</small>
-            </mark>
-          </p>
-        ) : (
-          <br />
-        )}
-        <button type="submit">Register</button>
-      </Form>
-      <br />
-      <p>
-        <Link to="/account/login">Login →</Link>
-      </p>
-    </div>
-  );
-}
-
-// NOTE: https://shopify.dev/docs/api/storefront/latest/mutations/customerCreate
-const CUSTOMER_CREATE_MUTATION = `#graphql
-  mutation customerCreate(
-    $input: CustomerCreateInput!,
-    $country: CountryCode,
-    $language: LanguageCode
-  ) @inContext(country: $country, language: $language) {
-    customerCreate(input: $input) {
-      customer {
-        id
-      }
-      customerUserErrors {
-        code
-        field
-        message
-      }
-    }
-  }
-` as const;
-
-// NOTE: https://shopify.dev/docs/api/storefront/latest/mutations/customeraccesstokencreate
-const REGISTER_LOGIN_MUTATION = `#graphql
-  mutation registerLogin(
-    $input: CustomerAccessTokenCreateInput!,
-    $country: CountryCode,
-    $language: LanguageCode
-  ) @inContext(country: $country, language: $language) {
-    customerAccessTokenCreate(input: $input) {
-      customerUserErrors {
-        code
-        field
-        message
-      }
-      customerAccessToken {
-        accessToken
-        expiresAt
-      }
-    }
-  }
-` as const;