@shopify/cli-hydrogen 0.0.0-next-744c490-20230315110711

package/dist/utils/missing-routes.js

@@ -0,0 +1,71 @@
+import { renderWarning, renderSuccess } from '@shopify/cli-kit/node/ui';
+
+const REQUIRED_ROUTES = [
+  "",
+  "cart",
+  "products",
+  "products/:productHandle",
+  "collections",
+  "collections/:collectionHandle",
+  "sitemap.xml",
+  "robots.txt",
+  "pages/:pageHandle",
+  "policies/:policyHandle",
+  "search",
+  "discount/:discountCode",
+  "account",
+  "account/login",
+  "account/register",
+  "account/orders/:orderId",
+  "account/reset/:id/:token",
+  "account/activate/:id/:token"
+];
+function findMissingRoutes(config) {
+  const userRoutes = Object.values(config.routes);
+  const requiredRoutes = new Set(REQUIRED_ROUTES);
+  for (const requiredRoute of requiredRoutes) {
+    for (const userRoute of userRoutes) {
+      if (!requiredRoute && !userRoute.path) {
+        requiredRoutes.delete(requiredRoute);
+      } else if (requiredRoute && userRoute.path) {
+        const currentRoute = {
+          path: userRoute.path,
+          parentId: userRoute.parentId
+        };
+        while (currentRoute.parentId && currentRoute.parentId !== "root") {
+          const parentRoute = userRoutes.find(
+            (r) => r.id === currentRoute.parentId
+          );
+          if (!parentRoute)
+            break;
+          currentRoute.path = `${parentRoute.path}/${currentRoute.path}`;
+          currentRoute.parentId = parentRoute.parentId;
+        }
+        const reString = "^(:[^\\/\\?]+\\?\\/)?" + requiredRoute.replaceAll(".", "\\.").replace(/:[^/]+/g, ":[^\\/]+") + "$";
+        if (new RegExp(reString).test(currentRoute.path)) {
+          requiredRoutes.delete(requiredRoute);
+        }
+      }
+    }
+  }
+  return [...requiredRoutes];
+}
+const LINE_LIMIT = 100;
+function logMissingRoutes(routes) {
+  if (routes.length) {
+    renderWarning({
+      headline: "Standard Shopify routes missing",
+      body: `Your Hydrogen project is missing ${routes.length} standard Shopify route${routes.length > 1 ? "s" : ""}.
+Including these routes improves compatibility with Shopify\u2019s platform:
+
+` + routes.slice(0, LINE_LIMIT - (routes.length <= LINE_LIMIT ? 0 : 1)).map((route) => `\u2022 /${route}`).join("\n") + (routes.length > LINE_LIMIT ? `
+\u2022 ...and ${routes.length - LINE_LIMIT + 1} more` : "")
+    });
+  } else {
+    renderSuccess({
+      headline: "All standard Shopify routes present"
+    });
+  }
+}
+
+export { findMissingRoutes, logMissingRoutes };

package/dist/utils/template-downloader.d.ts

@@ -0,0 +1,11 @@
+declare function getLatestReleaseDownloadUrl(): Promise<{
+    version: string;
+    url: string;
+}>;
+declare function downloadTarball(url: string, storageDir: string): Promise<void>;
+declare function getLatestTemplates(): Promise<{
+    version: string;
+    templatesDir: string;
+}>;
+
+export { downloadTarball, getLatestReleaseDownloadUrl, getLatestTemplates };

package/dist/utils/template-downloader.js

@@ -0,0 +1,70 @@
+import path from 'path';
+import { pipeline } from 'stream/promises';
+import gunzipMaybe from 'gunzip-maybe';
+import { extract } from 'tar-fs';
+import { http, file } from '@shopify/cli-kit';
+import { fileURLToPath } from 'url';
+
+const REPO_RELEASES_URL = `https://api.github.com/repos/shopify/hydrogen/releases/latest`;
+async function getLatestReleaseDownloadUrl() {
+  const response = await http.fetch(REPO_RELEASES_URL);
+  if (!response.ok || response.status >= 400) {
+    throw new Error(
+      `Failed to fetch the latest release information. Status ${response.status} ${response.statusText.replace(/\.$/, "")}.` + (response.status === 403 ? `
+
+If you are using a VPN, WARP, or similar service, consider disabling it momentarily.` : "")
+    );
+  }
+  const release = await response.json();
+  return {
+    version: release.name.split("/").pop() ?? release.name,
+    url: release.tarball_url
+  };
+}
+async function downloadTarball(url, storageDir) {
+  const response = await http.fetch(url);
+  if (!response.ok || response.status >= 400) {
+    throw new Error(
+      `Failed to download the latest release files. Status ${response.status} ${response.statusText}}`
+    );
+  }
+  await pipeline(
+    response.body,
+    gunzipMaybe(),
+    extract(storageDir, {
+      strip: 1,
+      filter: (name) => {
+        name = name.replace(storageDir, "");
+        return !name.startsWith(path.normalize("/templates/")) || name.startsWith(path.normalize("/templates/skeleton/"));
+      }
+    })
+  );
+}
+async function getLatestTemplates() {
+  try {
+    const { version, url } = await getLatestReleaseDownloadUrl();
+    const templateStoragePath = fileURLToPath(
+      new URL("../starter-templates", import.meta.url)
+    );
+    if (!await file.exists(templateStoragePath)) {
+      await file.mkdir(templateStoragePath);
+    }
+    const templateStorageVersionPath = path.join(templateStoragePath, version);
+    if (!await file.exists(templateStorageVersionPath)) {
+      await downloadTarball(url, templateStorageVersionPath);
+    }
+    return {
+      version,
+      templatesDir: path.join(templateStorageVersionPath, "templates")
+    };
+  } catch (e) {
+    const error = e;
+    error.message = `Could not download Hydrogen templates from GitHub.
+Please check your internet connection and the following error:
+
+` + error.message;
+    throw error;
+  }
+}
+
+export { downloadTarball, getLatestReleaseDownloadUrl, getLatestTemplates };

package/dist/utils/transpile-ts.d.ts

@@ -0,0 +1,16 @@
+import prettier, { Options } from 'prettier';
+import ts, { CompilerOptions } from 'typescript';
+
+declare function transpileFile(code: string, config?: Omit<ts.CompilerOptions, "target">): string;
+declare function resolveFormatConfig(filePath?: string): Promise<prettier.Options>;
+declare function format(content: string, config: Options, filePath?: string): string;
+declare function convertConfigToJS(tsConfig: {
+    include?: string[];
+    compilerOptions?: CompilerOptions;
+}): {
+    include?: string[] | undefined;
+    compilerOptions?: ts.CompilerOptions | undefined;
+};
+declare function transpileProject(projectDir: string): Promise<void>;
+
+export { convertConfigToJS, format, resolveFormatConfig, transpileFile, transpileProject };

package/dist/utils/transpile-ts.js

@@ -0,0 +1,169 @@
+import path from 'path';
+import fs from 'fs/promises';
+import prettier from 'prettier';
+import ts from 'typescript';
+import glob from 'fast-glob';
+import { output } from '@shopify/cli-kit';
+
+const escapeNewLines = (code) => code.replace(/\n\n/g, "\n/* :newline: */");
+const restoreNewLines = (code) => code.replace(/\/\* :newline: \*\//g, "\n");
+const DEFAULT_TS_CONFIG = {
+  lib: ["DOM", "DOM.Iterable", "ES2022"],
+  isolatedModules: true,
+  esModuleInterop: true,
+  resolveJsonModule: true,
+  target: "ES2022",
+  strict: true,
+  allowJs: true,
+  forceConsistentCasingInFileNames: true,
+  skipLibCheck: true
+};
+function transpileFile(code, config = DEFAULT_TS_CONFIG) {
+  const withArtificialNewLines = escapeNewLines(code);
+  const compiled = ts.transpileModule(withArtificialNewLines, {
+    reportDiagnostics: false,
+    compilerOptions: {
+      ...config,
+      jsx: 1,
+      removeComments: false
+    }
+  });
+  return restoreNewLines(compiled.outputText);
+}
+const DEFAULT_PRETTIER_CONFIG = {
+  arrowParens: "always",
+  singleQuote: true,
+  bracketSpacing: false,
+  trailingComma: "all"
+};
+async function resolveFormatConfig(filePath = process.cwd()) {
+  try {
+    return await prettier.resolveConfig(filePath) || DEFAULT_PRETTIER_CONFIG;
+  } catch {
+    return DEFAULT_PRETTIER_CONFIG;
+  }
+}
+function format(content, config, filePath = "") {
+  const ext = path.extname(filePath);
+  const formattedContent = prettier.format(content, {
+    parser: ext === ".tsx" || ext === ".ts" ? "typescript" : "babel",
+    ...config
+  });
+  return formattedContent;
+}
+const DEFAULT_JS_CONFIG = {
+  allowJs: true,
+  forceConsistentCasingInFileNames: true,
+  strict: true,
+  lib: ["DOM", "DOM.Iterable", "ES2022"],
+  esModuleInterop: true,
+  isolatedModules: true,
+  jsx: "react-jsx",
+  noEmit: true,
+  resolveJsonModule: true
+};
+const JS_CONFIG_KEYS = [
+  "noLib",
+  "target",
+  "module",
+  "moduleResolution",
+  "checkJs",
+  "experimentalDecorators",
+  "allowSyntheticDefaultImports",
+  "baseUrl",
+  "paths",
+  ...Object.keys(DEFAULT_JS_CONFIG)
+];
+function convertConfigToJS(tsConfig) {
+  const jsConfig = {
+    compilerOptions: { ...DEFAULT_JS_CONFIG }
+  };
+  if (tsConfig.include) {
+    jsConfig.include = tsConfig.include.filter((s) => !s.endsWith(".d.ts")).map((s) => s.replace(/\.ts(x?)$/, ".js$1"));
+  }
+  if (tsConfig.compilerOptions) {
+    for (const key of JS_CONFIG_KEYS) {
+      if (tsConfig.compilerOptions[key] !== void 0) {
+        jsConfig.compilerOptions[key] = tsConfig.compilerOptions[key];
+      }
+    }
+  }
+  return jsConfig;
+}
+async function transpileProject(projectDir) {
+  const entries = await glob("**/*.+(ts|tsx)", {
+    absolute: true,
+    cwd: projectDir
+  });
+  const formatConfig = await resolveFormatConfig();
+  for (const entry of entries) {
+    if (entry.endsWith(".d.ts")) {
+      await fs.rm(entry);
+      continue;
+    }
+    const tsx = await fs.readFile(entry, "utf8");
+    const mjs = format(transpileFile(tsx), formatConfig);
+    await fs.rm(entry);
+    await fs.writeFile(entry.replace(/\.ts(x?)$/, ".js$1"), mjs, "utf8");
+  }
+  try {
+    const remixConfigPath = path.join(projectDir, "remix.config.js");
+    let remixConfig = await fs.readFile(remixConfigPath, "utf8");
+    remixConfig = remixConfig.replace(/\/server\.ts/gim, "/server.js");
+    await fs.writeFile(remixConfigPath, remixConfig);
+  } catch (error) {
+    output.debug(
+      "Could not change TS extensions in remix.config.js:\n" + error.stack
+    );
+  }
+  try {
+    const tsConfigPath = path.join(projectDir, "tsconfig.json");
+    const tsConfigWithComments = await fs.readFile(tsConfigPath, "utf8");
+    const jsConfig = convertConfigToJS(
+      JSON.parse(tsConfigWithComments.replace(/^\s*\/\/.*$/gm, ""))
+    );
+    await fs.rm(tsConfigPath);
+    await fs.writeFile(
+      path.join(projectDir, "jsconfig.json"),
+      JSON.stringify(jsConfig, null, 2),
+      "utf8"
+    );
+  } catch (error) {
+    output.debug(
+      "Could not transpile tsconfig.json:\n" + error.stack
+    );
+  }
+  try {
+    const pkgJson = JSON.parse(
+      await fs.readFile(path.join(projectDir, "package.json"), "utf8")
+    );
+    delete pkgJson.scripts["typecheck"];
+    delete pkgJson.devDependencies["typescript"];
+    delete pkgJson.devDependencies["@shopify/oxygen-workers-types"];
+    for (const key of Object.keys(pkgJson.devDependencies)) {
+      if (key.startsWith("@types/")) {
+        delete pkgJson.devDependencies[key];
+      }
+    }
+    await fs.writeFile(
+      path.join(projectDir, "package.json"),
+      JSON.stringify(pkgJson, null, 2)
+    );
+  } catch (error) {
+    output.debug(
+      "Could not remove TS dependencies from package.json:\n" + error.stack
+    );
+  }
+  try {
+    const eslintrcPath = path.join(projectDir, ".eslintrc.js");
+    let eslintrc = await fs.readFile(eslintrcPath, "utf8");
+    eslintrc = eslintrc.replace(/\/\*\*[\s*]+@type.+\s+\*\/\s?/gim, "").replace(/\s*,?\s*['"`]plugin:hydrogen\/typescript['"`]/gim, "").replace(/\s+['"`]@typescript-eslint\/.+,/gim, "");
+    await fs.writeFile(eslintrcPath, eslintrc);
+  } catch (error) {
+    output.debug(
+      "Could not remove TS rules from .eslintrc:\n" + error.stack
+    );
+  }
+}
+
+export { convertConfigToJS, format, resolveFormatConfig, transpileFile, transpileProject };

package/dist/utils/virtual-routes.d.ts

@@ -0,0 +1,7 @@
+import { RemixConfig } from '@remix-run/dev/dist/config.js';
+
+declare const VIRTUAL_ROUTES_DIR = "virtual-routes/routes";
+declare const VIRTUAL_ROOT = "virtual-routes/virtual-root";
+declare function addVirtualRoutes(config: RemixConfig): Promise<RemixConfig>;
+
+export { VIRTUAL_ROOT, VIRTUAL_ROUTES_DIR, addVirtualRoutes };

package/dist/utils/virtual-routes.js

@@ -0,0 +1,44 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+import recursiveReaddir from 'recursive-readdir';
+
+const VIRTUAL_ROUTES_DIR = "virtual-routes/routes";
+const VIRTUAL_ROOT = "virtual-routes/virtual-root";
+async function addVirtualRoutes(config) {
+  const userRouteList = Object.values(config.routes);
+  const distPath = fileURLToPath(new URL("..", import.meta.url));
+  const virtualRoutesPath = path.join(distPath, VIRTUAL_ROUTES_DIR);
+  for (const absoluteFilePath of await recursiveReaddir(virtualRoutesPath)) {
+    const relativeFilePath = path.relative(virtualRoutesPath, absoluteFilePath);
+    const routePath = relativeFilePath.replace(/\.[jt]sx?$/, "").replaceAll("\\", "/");
+    const isIndex = /(^|\/)index$/.test(routePath);
+    const normalizedVirtualRoutePath = isIndex ? routePath.slice(0, -"index".length).replace(/\/$/, "") || void 0 : routePath.replace(/\$/g, ":").replace(/[\[\]]/g, "");
+    const hasUserRoute = userRouteList.some(
+      (r) => r.parentId === "root" && r.path === normalizedVirtualRoutePath
+    );
+    if (!hasUserRoute) {
+      const id = VIRTUAL_ROUTES_DIR + "/" + routePath;
+      config.routes[id] = {
+        id,
+        parentId: VIRTUAL_ROOT,
+        path: normalizedVirtualRoutePath,
+        index: isIndex || void 0,
+        caseSensitive: void 0,
+        file: path.relative(config.appDirectory, absoluteFilePath)
+      };
+      if (!config.routes[VIRTUAL_ROOT]) {
+        config.routes[VIRTUAL_ROOT] = {
+          id: VIRTUAL_ROOT,
+          path: "",
+          file: path.relative(
+            config.appDirectory,
+            path.join(distPath, VIRTUAL_ROOT + ".jsx")
+          )
+        };
+      }
+    }
+  }
+  return config;
+}
+
+export { VIRTUAL_ROOT, VIRTUAL_ROUTES_DIR, addVirtualRoutes };

package/dist/utils/virtual-routes.test.d.ts

@@ -0,0 +1 @@
+

package/dist/utils/virtual-routes.test.js

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest';
+import { fileURLToPath } from 'url';
+import { addVirtualRoutes, VIRTUAL_ROOT, VIRTUAL_ROUTES_DIR } from './virtual-routes.js';
+
+describe("virtual routes", () => {
+  it("adds virtual routes", async () => {
+    const config = {
+      appDirectory: fileURLToPath(new URL("../virtual-test", import.meta.url)),
+      routes: {}
+    };
+    await addVirtualRoutes(config);
+    expect(config.routes[VIRTUAL_ROOT]).toMatchObject({
+      path: "",
+      id: VIRTUAL_ROOT,
+      file: "../virtual-routes/virtual-root.jsx"
+    });
+    expect(config.routes[VIRTUAL_ROUTES_DIR + "/index"]).toMatchObject({
+      parentId: VIRTUAL_ROOT,
+      path: void 0,
+      file: "../" + VIRTUAL_ROUTES_DIR + "/index.tsx"
+    });
+    expect(config.routes[VIRTUAL_ROUTES_DIR + "/graphiql"]).toMatchObject({
+      parentId: VIRTUAL_ROOT,
+      path: "graphiql",
+      file: "../" + VIRTUAL_ROUTES_DIR + "/graphiql.tsx"
+    });
+  });
+  it("skips existing routes", async () => {
+    const existingIndexRoute = {
+      id: "routes/index",
+      index: true,
+      parentId: "root",
+      path: void 0,
+      file: "user-app/routes/index.tsx"
+    };
+    const config = {
+      appDirectory: fileURLToPath(new URL("../virtual-test", import.meta.url)),
+      routes: {
+        [existingIndexRoute.id]: existingIndexRoute
+      }
+    };
+    await addVirtualRoutes(config);
+    expect(config.routes[existingIndexRoute.id]).toMatchObject(
+      existingIndexRoute
+    );
+    expect(config.routes[VIRTUAL_ROUTES_DIR + "/index"]).toBeFalsy();
+    expect(Object.values(config.routes).length).toBeGreaterThan(2);
+  });
+});

package/dist/virtual-routes/assets/favicon.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none">
+  <style>
+    .stroke {
+      stroke: #000;
+    }
+    .fill {
+      fill: #000;
+    }
+    @media (prefers-color-scheme: dark) {
+      .stroke {
+        stroke: #fff;
+      }
+      .fill {
+        fill: #fff;
+      }
+    }
+  </style>
+  <path
+    class="stroke"
+    fill-rule="evenodd"
+    d="M16.1 16.04 1 8.02 6.16 5.3l5.82 3.09 4.88-2.57-5.82-3.1L16.21 0l15.1 8.02-5.17 2.72-5.5-2.91-4.88 2.57 5.5 2.92-5.16 2.72Z"
+  />
+  <path
+    class="fill"
+    fill-rule="evenodd"
+    d="M16.1 32 1 23.98l5.16-2.72 5.82 3.08 4.88-2.57-5.82-3.08 5.17-2.73 15.1 8.02-5.17 2.72-5.5-2.92-4.88 2.58 5.5 2.92L16.1 32Z"
+  />
+</svg>