@shopify/cli-hydrogen 5.0.1 → 5.1.0

package/dist/commands/hydrogen/build.js

@@ -1,8 +1,8 @@
-import path from 'path';
 import { Flags } from '@oclif/core';
 import Command from '@shopify/cli-kit/node/base-command';
 import { outputInfo, outputContent, outputToken, outputWarn } from '@shopify/cli-kit/node/output';
-import { rmdir, fileSize, copyFile } from '@shopify/cli-kit/node/fs';
+import { rmdir, fileSize, glob, removeFile, copyFile } from '@shopify/cli-kit/node/fs';
+import { resolvePath, relativePath, joinPath } from '@shopify/cli-kit/node/path';
 import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
 import colors from '@shopify/cli-kit/node/colors';
 import { getProjectPaths, getRemixConfig } from '../../lib/config.js';
@@ -10,30 +10,47 @@ import { commonFlags, deprecated, flagsToCamelObject } from '../../lib/flags.js'
 import { checkLockfileStatus } from '../../lib/check-lockfile.js';
 import { findMissingRoutes } from '../../lib/missing-routes.js';
 import { warnOnce } from '../../lib/log.js';
+import { codegen } from '../../lib/codegen.js';
 
 const LOG_WORKER_BUILT = "\u{1F4E6} Worker built";
 class Build extends Command {
   static description = "Builds a Hydrogen storefront for production.";
   static flags = {
     path: commonFlags.path,
-    sourcemap: commonFlags.sourcemap,
+    sourcemap: Flags.boolean({
+      description: "Generate sourcemaps for the build.",
+      env: "SHOPIFY_HYDROGEN_FLAG_SOURCEMAP",
+      default: false
+    }),
     "disable-route-warning": Flags.boolean({
       description: "Disable warning about missing standard routes.",
       env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_ROUTE_WARNING"
     }),
+    ["codegen-unstable"]: Flags.boolean({
+      description: "Generate types for the Storefront API queries found in your project.",
+      required: false,
+      default: false
+    }),
+    ["codegen-config-path"]: commonFlags.codegenConfigPath,
     base: deprecated("--base")(),
     entry: deprecated("--entry")(),
     target: deprecated("--target")()
   };
   async run() {
     const { flags } = await this.parse(Build);
-    const directory = flags.path ? path.resolve(flags.path) : process.cwd();
-    await runBuild({ ...flagsToCamelObject(flags), path: directory });
+    const directory = flags.path ? resolvePath(flags.path) : process.cwd();
+    await runBuild({
+      ...flagsToCamelObject(flags),
+      useCodegen: flags["codegen-unstable"],
+      path: directory
+    });
   }
 }
 async function runBuild({
   path: appPath,
-  sourcemap = true,
+  useCodegen = false,
+  codegenConfigPath,
+  sourcemap = false,
   disableRouteWarning = false
 }) {
   if (!process.env.NODE_ENV) {
@@ -64,14 +81,15 @@ async function runBuild({
     }).catch((thrown) => {
       logThrown(thrown);
       process.exit(1);
-    })
+    }),
+    useCodegen && codegen({ ...remixConfig, configFilePath: codegenConfigPath })
   ]);
   if (process.env.NODE_ENV !== "development") {
     console.timeEnd(LOG_WORKER_BUILT);
     const sizeMB = await fileSize(buildPathWorkerFile) / (1024 * 1024);
     outputInfo(
       outputContent`   ${colors.dim(
-        path.relative(root, buildPathWorkerFile)
+        relativePath(root, buildPathWorkerFile)
       )}  ${outputToken.yellow(sizeMB.toFixed(2))} MB\n`
     );
     if (sizeMB >= 1) {
@@ -80,6 +98,18 @@ async function runBuild({
 `
       );
     }
+    if (sourcemap) {
+      if (process.env.HYDROGEN_ASSET_BASE_URL) {
+        const filepaths = await glob(joinPath(buildPathClient, "**/*.js.map"));
+        for (const filepath of filepaths) {
+          await removeFile(filepath);
+        }
+      } else {
+        outputWarn(
+          "\u{1F6A8} Sourcemaps are enabled in production! Use this only for testing.\n"
+        );
+      }
+    }
   }
   if (!disableRouteWarning) {
     const missingRoutes = findMissingRoutes(remixConfig);

package/dist/commands/hydrogen/codegen-unstable.js

@@ -1,11 +1,10 @@
 import path from 'path';
 import Command from '@shopify/cli-kit/node/base-command';
-import { AbortError } from '@shopify/cli-kit/node/error';
 import { renderSuccess } from '@shopify/cli-kit/node/ui';
 import { Flags } from '@oclif/core';
 import { getProjectPaths, getRemixConfig } from '../../lib/config.js';
 import { commonFlags, flagsToCamelObject } from '../../lib/flags.js';
-import { patchGqlPluck, generateTypes, normalizeCodegenError } from '../../lib/codegen.js';
+import { codegen } from '../../lib/codegen.js';
 
 class Codegen extends Command {
   static description = "Generate types for the Storefront API queries found in your project.";
@@ -42,29 +41,19 @@ async function runCodegen({
 }) {
   const { root } = getProjectPaths(appPath);
   const remixConfig = await getRemixConfig(root);
-  await patchGqlPluck();
-  try {
-    const generatedFiles = await generateTypes({
-      ...remixConfig,
-      configFilePath: codegenConfigPath,
-      forceSfapiVersion,
-      watch
+  console.log("");
+  const generatedFiles = await codegen({
+    ...remixConfig,
+    configFilePath: codegenConfigPath,
+    forceSfapiVersion,
+    watch
+  });
+  if (!watch) {
+    renderSuccess({
+      headline: "Generated types for GraphQL:",
+      body: generatedFiles.map((file) => `- ${file}`).join("\n")
     });
-    if (!watch) {
-      console.log("");
-      renderSuccess({
-        headline: "Generated types for GraphQL:",
-        body: generatedFiles.map((file) => `- ${file}`).join("\n")
-      });
-    }
-  } catch (error) {
-    const { message, details } = normalizeCodegenError(
-      error.message,
-      remixConfig.rootDirectory
-    );
-    console.log("");
-    throw new AbortError(message, details);
   }
 }
 
-export { Codegen as default };
+export { Codegen as default, runCodegen };

package/dist/commands/hydrogen/dev.js

@@ -1,21 +1,22 @@
 import path from 'path';
 import fs from 'fs/promises';
-import { outputInfo } from '@shopify/cli-kit/node/output';
+import { outputInfo, outputDebug } from '@shopify/cli-kit/node/output';
 import { fileExists } from '@shopify/cli-kit/node/fs';
 import { renderFatalError } from '@shopify/cli-kit/node/ui';
+import colors from '@shopify/cli-kit/node/colors';
 import { copyPublicFiles } from './build.js';
 import { getProjectPaths, getRemixConfig } from '../../lib/config.js';
-import { muteDevLogs, warnOnce } from '../../lib/log.js';
+import { muteDevLogs, warnOnce, enhanceH2Logs } from '../../lib/log.js';
 import { commonFlags, deprecated, flagsToCamelObject } from '../../lib/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
 import { Flags } from '@oclif/core';
 import { startMiniOxygen } from '../../lib/mini-oxygen.js';
 import { checkHydrogenVersion } from '../../lib/check-version.js';
 import { addVirtualRoutes } from '../../lib/virtual-routes.js';
-import { combinedEnvironmentVariables } from '../../lib/combined-environment-variables.js';
+import { spawnCodegenProcess } from '../../lib/codegen.js';
+import { getAllEnvironmentVariables } from '../../lib/environment-variables.js';
 import { getConfig } from '../../lib/shopify-config.js';
 
-const LOG_INITIAL_BUILD = "\n\u{1F3C1} Initial build";
 const LOG_REBUILDING = "\u{1F9F1} Rebuilding...";
 const LOG_REBUILT = "\u{1F680} Rebuilt";
 class Dev extends Command {
@@ -28,32 +29,27 @@ class Dev extends Command {
       required: false,
       default: false
     }),
-    ["codegen-config-path"]: Flags.string({
-      description: "Specify a path to a codegen configuration file. Defaults to `<root>/codegen.ts` if it exists.",
-      required: false,
-      dependsOn: ["codegen-unstable"]
-    }),
+    ["codegen-config-path"]: commonFlags.codegenConfigPath,
     sourcemap: commonFlags.sourcemap,
     "disable-virtual-routes": Flags.boolean({
       description: "Disable rendering fallback routes when a route file doesn't exist.",
       env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_VIRTUAL_ROUTES",
       default: false
     }),
-    shop: commonFlags.shop,
     debug: Flags.boolean({
       description: "Attaches a Node inspector",
       env: "SHOPIFY_HYDROGEN_FLAG_DEBUG",
       default: false
     }),
     host: deprecated("--host")(),
-    ["env-branch"]: commonFlags["env-branch"]
+    ["env-branch"]: commonFlags.envBranch
   };
   async run() {
     const { flags } = await this.parse(Dev);
     const directory = flags.path ? path.resolve(flags.path) : process.cwd();
     await runDev({
       ...flagsToCamelObject(flags),
-      codegen: flags["codegen-unstable"],
+      useCodegen: flags["codegen-unstable"],
       path: directory
     });
   }
@@ -61,10 +57,9 @@ class Dev extends Command {
 async function runDev({
   port,
   path: appPath,
-  codegen = false,
+  useCodegen = false,
   codegenConfigPath,
   disableVirtualRoutes,
-  shop,
   envBranch,
   debug = false,
   sourcemap = true
@@ -74,51 +69,67 @@ async function runDev({
   muteDevLogs();
   if (debug)
     (await import('node:inspector')).open();
-  console.time(LOG_INITIAL_BUILD);
   const { root, publicPath, buildPathClient, buildPathWorkerFile } = getProjectPaths(appPath);
   const checkingHydrogenVersion = checkHydrogenVersion(root);
   const copyingFiles = copyPublicFiles(publicPath, buildPathClient);
   const reloadConfig = async () => {
     const config = await getRemixConfig(root);
-    return disableVirtualRoutes ? config : addVirtualRoutes(config);
+    return disableVirtualRoutes ? config : addVirtualRoutes(config).catch((error) => {
+      outputDebug(
+        "Could not add virtual routes: " + (error?.stack ?? error?.message ?? error)
+      );
+      return config;
+    });
   };
   const getFilePaths = (file) => {
     const fileRelative = path.relative(root, file);
     return [fileRelative, path.resolve(root, fileRelative)];
   };
   const serverBundleExists = () => fileExists(buildPathWorkerFile);
-  const hasLinkedStorefront = !!(await getConfig(root))?.storefront?.id;
-  const environmentVariables = hasLinkedStorefront ? await combinedEnvironmentVariables({
-    root,
-    shop,
-    envBranch
-  }) : void 0;
-  let isMiniOxygenStarted = false;
+  const { shop, storefront } = await getConfig(root);
+  const fetchRemote = !!shop && !!storefront?.id;
+  const envPromise = getAllEnvironmentVariables({ root, fetchRemote, envBranch });
+  const [{ watch }, { createFileWatchCache }] = await Promise.all([
+    import('@remix-run/dev/dist/compiler/watch.js'),
+    import('@remix-run/dev/dist/compiler/fileWatchCache.js')
+  ]);
+  let isInitialBuild = true;
+  let initialBuildDurationMs = 0;
+  let initialBuildStartTimeMs = Date.now();
+  let miniOxygen;
   async function safeStartMiniOxygen() {
-    if (isMiniOxygenStarted)
+    if (miniOxygen)
       return;
-    await startMiniOxygen({
+    miniOxygen = await startMiniOxygen({
       root,
       port,
       watch: true,
       buildPathWorkerFile,
       buildPathClient,
-      environmentVariables
+      env: await envPromise
     });
-    isMiniOxygenStarted = true;
+    const graphiqlUrl = `${miniOxygen.listeningAt}/graphiql`;
+    enhanceH2Logs({ graphiqlUrl, ...remixConfig });
+    miniOxygen.showBanner({
+      appName: storefront ? colors.cyan(storefront?.title) : void 0,
+      headlinePrefix: initialBuildDurationMs > 0 ? `Initial build: ${initialBuildDurationMs}ms
+` : "",
+      extraLines: [colors.dim(`
+View GraphiQL API browser: ${graphiqlUrl}`)]
+    });
+    if (useCodegen) {
+      spawnCodegenProcess({ ...remixConfig, configFilePath: codegenConfigPath });
+    }
     const showUpgrade = await checkingHydrogenVersion;
     if (showUpgrade)
       showUpgrade();
   }
-  let isInitialBuild = true;
-  const [{ watch }, { createFileWatchCache }] = await Promise.all([
-    import('@remix-run/dev/dist/compiler/watch.js'),
-    import('@remix-run/dev/dist/compiler/fileWatchCache.js')
-  ]);
+  const remixConfig = await reloadConfig();
   const fileWatchCache = createFileWatchCache();
+  let skipRebuildLogs = false;
   await watch(
     {
-      config: await reloadConfig(),
+      config: remixConfig,
       options: {
         mode: process.env.NODE_ENV,
         onWarning: warnOnce,
@@ -129,24 +140,23 @@ async function runDev({
     {
       reloadConfig,
       onBuildStart() {
-        if (isInitialBuild) {
-          console.time(LOG_INITIAL_BUILD);
-        } else {
-          console.time(LOG_REBUILT);
+        if (!isInitialBuild && !skipRebuildLogs) {
           outputInfo(LOG_REBUILDING);
+          console.time(LOG_REBUILT);
         }
       },
       async onBuildFinish() {
         if (isInitialBuild) {
           await copyingFiles;
-          console.timeEnd(LOG_INITIAL_BUILD);
+          initialBuildDurationMs = Date.now() - initialBuildStartTimeMs;
           isInitialBuild = false;
-        } else {
+        } else if (!skipRebuildLogs) {
+          skipRebuildLogs = false;
           console.timeEnd(LOG_REBUILT);
-          if (!isMiniOxygenStarted)
+          if (!miniOxygen)
             console.log("");
         }
-        if (!isMiniOxygenStarted) {
+        if (!miniOxygen) {
           if (!await serverBundleExists()) {
             return renderFatalError({
               name: "BuildError",
@@ -174,6 +184,16 @@ async function runDev({
         const [relative, absolute] = getFilePaths(file);
         outputInfo(`
 \u{1F4C4} File changed: ${relative}`);
+        if (relative.endsWith(".env")) {
+          skipRebuildLogs = true;
+          await miniOxygen.reload({
+            env: await getAllEnvironmentVariables({
+              root,
+              fetchRemote,
+              envBranch
+            })
+          });
+        }
         if (absolute.startsWith(publicPath)) {
           await copyPublicFiles(
             absolute,

package/dist/commands/hydrogen/env/list.js

@@ -2,53 +2,54 @@ import Command from '@shopify/cli-kit/node/base-command';
 import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
 import { pluralize } from '@shopify/cli-kit/common/string';
 import colors from '@shopify/cli-kit/node/colors';
-import { outputContent, outputToken, outputNewline, outputInfo } from '@shopify/cli-kit/node/output';
+import { outputNewline, outputInfo, outputContent } from '@shopify/cli-kit/node/output';
 import { linkStorefront } from '../link.js';
 import { commonFlags } from '../../../lib/flags.js';
-import { getHydrogenShop } from '../../../lib/shop.js';
-import { getAdminSession } from '../../../lib/admin-session.js';
 import { getStorefrontEnvironments } from '../../../lib/graphql/admin/list-environments.js';
-import { getConfig } from '../../../lib/shopify-config.js';
 import { renderMissingLink, renderMissingStorefront } from '../../../lib/render-errors.js';
+import { login } from '../../../lib/auth.js';
+import { getCliCommand } from '../../../lib/shell.js';
 
 class EnvList extends Command {
   static description = "List the environments on your linked Hydrogen storefront.";
   static flags = {
-    path: commonFlags.path,
-    shop: commonFlags.shop
+    path: commonFlags.path
   };
   async run() {
     const { flags } = await this.parse(EnvList);
-    await listEnvironments(flags);
+    await runEnvList(flags);
   }
 }
-async function listEnvironments({ path, shop: flagShop }) {
-  const shop = await getHydrogenShop({ path, shop: flagShop });
-  const adminSession = await getAdminSession(shop);
-  const actualPath = path ?? process.cwd();
-  let configStorefront = (await getConfig(actualPath)).storefront;
+async function runEnvList({ path: root = process.cwd() }) {
+  const [{ session, config }, cliCommand] = await Promise.all([
+    login(root),
+    getCliCommand()
+  ]);
+  let configStorefront = config.storefront;
   if (!configStorefront?.id) {
-    renderMissingLink({ adminSession });
+    renderMissingLink({ session, cliCommand });
     const runLink = await renderConfirmationPrompt({
-      message: outputContent`Run ${outputToken.genericShellCommand(
-        `npx shopify hydrogen link`
-      )}?`.value
+      message: ["Run", { command: `${cliCommand} link` }, "?"]
     });
     if (!runLink) {
       return;
     }
-    await linkStorefront({ path, shop: flagShop, silent: true });
+    configStorefront = await linkStorefront(root, session, config, {
+      cliCommand
+    });
   }
-  configStorefront = (await getConfig(actualPath)).storefront;
-  if (!configStorefront) {
+  if (!configStorefront)
     return;
-  }
-  const { storefront } = await getStorefrontEnvironments(
-    adminSession,
+  const storefront = await getStorefrontEnvironments(
+    session,
     configStorefront.id
   );
   if (!storefront) {
-    renderMissingStorefront({ adminSession, storefront: configStorefront });
+    renderMissingStorefront({
+      session,
+      storefront: configStorefront,
+      cliCommand
+    });
     return;
   }
   const previewEnvironmentIndex = storefront.environments.findIndex(
@@ -91,4 +92,4 @@ const pluralizedEnvironments = ({
   );
 };
 
-export { EnvList as default, listEnvironments };
+export { EnvList as default, runEnvList };

package/dist/commands/hydrogen/env/list.test.js

@@ -3,11 +3,10 @@ import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
 import { inTemporaryDirectory } from '@shopify/cli-kit/node/fs';
 import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
 import { getStorefrontEnvironments } from '../../../lib/graphql/admin/list-environments.js';
-import { getAdminSession } from '../../../lib/admin-session.js';
-import { getConfig } from '../../../lib/shopify-config.js';
+import { login } from '../../../lib/auth.js';
 import { renderMissingLink, renderMissingStorefront } from '../../../lib/render-errors.js';
 import { linkStorefront } from '../link.js';
-import { listEnvironments } from './list.js';
+import { runEnvList } from './list.js';
 
 const SHOP = "my-shop";
 vi.mock("@shopify/cli-kit/node/ui", async () => {
@@ -18,20 +17,25 @@ vi.mock("@shopify/cli-kit/node/ui", async () => {
   };
 });
 vi.mock("../link.js");
-vi.mock("../../../lib/admin-session.js");
+vi.mock("../../../lib/auth.js");
 vi.mock("../../../lib/shopify-config.js");
 vi.mock("../../../lib/render-errors.js");
-vi.mock("../../../lib/graphql/admin/list-environments.js", () => {
-  return { getStorefrontEnvironments: vi.fn() };
-});
-vi.mock("../../../lib/shop.js", () => ({
-  getHydrogenShop: () => SHOP
-}));
+vi.mock("../../../lib/graphql/admin/list-environments.js");
+vi.mock("../../../lib/shell.js", () => ({ getCliCommand: () => "h2" }));
 describe("listEnvironments", () => {
   const ADMIN_SESSION = {
     token: "abc123",
     storeFqdn: SHOP
   };
+  const SHOPIFY_CONFIG = {
+    shop: SHOP,
+    shopName: "My Shop",
+    email: "email",
+    storefront: {
+      id: "gid://shopify/HydrogenStorefront/1",
+      title: "Existing Link"
+    }
+  };
   const PRODUCTION_ENVIRONMENT = {
     id: "gid://shopify/HydrogenStorefrontEnvironment/1",
     branch: "main",
@@ -57,44 +61,39 @@ describe("listEnvironments", () => {
     url: null
   };
   beforeEach(async () => {
-    vi.mocked(getAdminSession).mockResolvedValue(ADMIN_SESSION);
-    vi.mocked(getConfig).mockResolvedValue({
-      storefront: {
-        id: "gid://shopify/HydrogenStorefront/1",
-        title: "Existing Link"
-      }
+    vi.mocked(login).mockResolvedValue({
+      session: ADMIN_SESSION,
+      config: SHOPIFY_CONFIG
     });
     vi.mocked(getStorefrontEnvironments).mockResolvedValue({
-      storefront: {
-        id: "gid://shopify/HydrogenStorefront/1",
-        productionUrl: "https://example.com",
-        environments: [
-          PRODUCTION_ENVIRONMENT,
-          CUSTOM_ENVIRONMENT,
-          PREVIEW_ENVIRONMENT
-        ]
-      }
+      id: "gid://shopify/HydrogenStorefront/1",
+      productionUrl: "https://example.com",
+      environments: [
+        PRODUCTION_ENVIRONMENT,
+        CUSTOM_ENVIRONMENT,
+        PREVIEW_ENVIRONMENT
+      ]
     });
   });
   afterEach(() => {
     vi.resetAllMocks();
     mockAndCaptureOutput().clear();
   });
-  it("makes a GraphQL call to fetch environment variables", async () => {
+  it("fetchs environment variables", async () => {
     await inTemporaryDirectory(async (tmpDir) => {
-      await listEnvironments({ path: tmpDir });
+      await runEnvList({ path: tmpDir });
       expect(getStorefrontEnvironments).toHaveBeenCalledWith(
         ADMIN_SESSION,
-        "gid://shopify/HydrogenStorefront/1"
+        SHOPIFY_CONFIG.storefront.id
       );
     });
   });
   it("lists the environments", async () => {
     await inTemporaryDirectory(async (tmpDir) => {
       const output = mockAndCaptureOutput();
-      await listEnvironments({ path: tmpDir });
+      await runEnvList({ path: tmpDir });
       expect(output.info()).toMatch(
-        /Showing 3 environments for the Hydrogen storefront Existing Link/
+        /Showing 3 environments for the Hydrogen storefront Existing Link/i
       );
       expect(output.info()).toMatch(/Production \(Branch: main\)/);
       expect(output.info()).toMatch(/https:\/\/example\.com/);
@@ -105,39 +104,43 @@ describe("listEnvironments", () => {
   });
   describe("when there is no linked storefront", () => {
     beforeEach(() => {
-      vi.mocked(getConfig).mockResolvedValue({
-        storefront: void 0
+      vi.mocked(login).mockResolvedValue({
+        session: ADMIN_SESSION,
+        config: {
+          ...SHOPIFY_CONFIG,
+          storefront: void 0
+        }
       });
     });
     it("calls renderMissingLink", async () => {
       await inTemporaryDirectory(async (tmpDir) => {
-        await listEnvironments({ path: tmpDir });
+        await runEnvList({ path: tmpDir });
         expect(renderMissingLink).toHaveBeenCalledOnce();
       });
     });
     it("prompts the user to create a link", async () => {
       vi.mocked(renderConfirmationPrompt).mockResolvedValue(true);
       await inTemporaryDirectory(async (tmpDir) => {
-        await listEnvironments({ path: tmpDir });
+        await runEnvList({ path: tmpDir });
         expect(renderConfirmationPrompt).toHaveBeenCalledWith({
-          message: expect.stringMatching(/Run .*npx shopify hydrogen link.*\?/)
-        });
-        expect(linkStorefront).toHaveBeenCalledWith({
-          path: tmpDir,
-          silent: true
+          message: expect.arrayContaining([{ command: "h2 link" }])
         });
+        expect(linkStorefront).toHaveBeenCalledWith(
+          tmpDir,
+          ADMIN_SESSION,
+          { ...SHOPIFY_CONFIG, storefront: void 0 },
+          expect.anything()
+        );
       });
     });
   });
   describe("when there is no matching storefront in the shop", () => {
     beforeEach(() => {
-      vi.mocked(getStorefrontEnvironments).mockResolvedValue({
-        storefront: null
-      });
+      vi.mocked(getStorefrontEnvironments).mockResolvedValue(null);
     });
     it("calls renderMissingStorefront", async () => {
       await inTemporaryDirectory(async (tmpDir) => {
-        await listEnvironments({ path: tmpDir });
+        await runEnvList({ path: tmpDir });
         expect(renderMissingStorefront).toHaveBeenCalledOnce();
       });
     });