shopify-accelerate-app 1.0.0

package/src/validate-cli-options.ts

@@ -0,0 +1,281 @@
+import chalk from "chalk";
+import child_process, { exec } from "child_process";
+import fs from "fs";
+
+import json2toml from "json2toml";
+import path from "path";
+import userInput from "prompts";
+import { config } from "../shopify-accelerate-app";
+import { buildTheme } from "./scaffold-theme/build-theme";
+import { generateConfigFiles } from "./scaffold-theme/generate-config-files";
+import { delay } from "./utils/delay";
+import { readFile, writeCompareFile, writeOnlyNew } from "./utils/fs";
+
+export const validateCliOptions = async (
+  {
+    store,
+    theme: theme_id,
+    environment = "development",
+    reset_theme_id = false,
+  }: {
+    store?: string;
+    theme?: number;
+    environment?: string;
+    reset_theme_id?: boolean;
+  } = { environment: "development", store: undefined, theme: undefined, reset_theme_id: false }
+) => {
+  const { environments } = config;
+  const { ...currentEnvironment } = environments[environment] ?? {
+    store: store?.replace(/\.myshopify\.com/gi, ""),
+    theme: theme_id,
+    path: `./themes/${environment}`,
+    all_presets: false,
+    mode: environment === "development" ? "development" : "production",
+    ignore_blocks: "",
+    ignore_snippets: "",
+    ignore_layouts: "",
+    ignore_sections: "",
+    ignore_assets: "custom.css.liquid,custom.css,custom.js",
+  };
+
+  // console.log({ environments, currentEnvironment });
+  if (reset_theme_id) {
+    currentEnvironment.theme = undefined;
+  }
+
+  if (store && currentEnvironment.store !== store) {
+    const { update_store } = await userInput([
+      {
+        type: "confirm",
+        name: "update_store",
+        message: `Do you want to update the current (${environment}) environment store from "${
+          currentEnvironment.store
+        }" to "${store?.replace(/\.myshopify\.com/gi, "")}"?`,
+      },
+    ]);
+    if (update_store) {
+      currentEnvironment.store = store;
+    }
+  }
+
+  if (theme_id && +currentEnvironment.theme !== +theme_id) {
+    const { update_theme_id } = await userInput([
+      {
+        type: "confirm",
+        name: "update_theme_id",
+        message: `Do you want to update the current (${environment}) environment theme_id from "${currentEnvironment.theme}" to "${theme_id}"?`,
+      },
+    ]);
+    if (update_theme_id) {
+      currentEnvironment.theme = +theme_id;
+    }
+  }
+
+  const prompts = [];
+  if (!store && !currentEnvironment.store) {
+    console.log(
+      `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.redBright(
+        `Store handle missing.`
+      )}`
+    );
+    const results = await userInput([
+      {
+        type: "text",
+        name: "store",
+        message:
+          "Please enter the Shopify Store Handle (http://{handle}.myshopify.com/admin / https://admin.shopify.com/store/{handle}) for your setup",
+      },
+    ]);
+    currentEnvironment.store =
+      results.store?.replace(/\.myshopify\.com/gi, "") ??
+      store?.replace(/\.myshopify\.com/gi, "") ??
+      currentEnvironment?.store?.replace(/\.myshopify\.com/gi, "");
+  }
+
+  if (!theme_id && !currentEnvironment.theme) {
+    if (currentEnvironment.store) {
+      const results = await userInput([
+        {
+          type: "select",
+          name: "theme_action",
+          message: "Next step",
+          choices: [
+            { title: "Create new Theme", value: "create_theme" },
+            { title: "List Themes", value: "list_themes" },
+            { title: "Add Theme Id", value: "add_theme" },
+          ],
+          initial: 1,
+        },
+      ]);
+      if (results.theme_action === "create_theme") {
+        // eslint-disable-next-line no-async-promise-executor
+        await new Promise(async (resolve, reject) => {
+          // exec(`shopify theme list -s ${currentEnvironment.store}`, async (error, stdout, stderr) => {
+          //   console.log(stdout);
+          //   if (stdout.includes("Press any key to open the login page on your brows")) {
+          //     console.log("MATCHED!!");
+          //   }
+          //   await delay(4500);
+          //   resolve(true);
+          // });
+
+          process.env["SHOPIFY_ACCELERATE_STORE"] = currentEnvironment.store;
+          config.environments[environment] = currentEnvironment;
+          config.environment = environment;
+          config.theme_path = currentEnvironment?.path;
+          config.theme_id = +currentEnvironment?.theme;
+          config.store = currentEnvironment?.store?.replace(/\.myshopify\.com/gi, "");
+
+          buildTheme();
+          generateConfigFiles();
+          await delay(350);
+          buildTheme();
+          generateConfigFiles();
+
+          const cp = child_process.spawn(
+            "npx",
+            [
+              "shopify",
+              "theme",
+              "share",
+              "-s",
+              currentEnvironment.store,
+              "--path",
+              `./themes/${environment}`,
+            ],
+            {
+              shell: true,
+              stdio: "inherit",
+            }
+          );
+          cp.on("exit", (e) => {
+            resolve(true);
+          });
+        });
+      }
+      if (results.theme_action === "list_themes") {
+        await new Promise((resolve, reject) => {
+          // exec(`shopify theme list -s ${currentEnvironment.store}`, async (error, stdout, stderr) => {
+          //   console.log(stdout);
+          //   if (stdout.includes("Press any key to open the login page on your brows")) {
+          //     console.log("MATCHED!!");
+          //   }
+          //   await delay(4500);
+          //   resolve(true);
+          // });
+
+          const cp = child_process.spawn(
+            "npx",
+            ["shopify", "theme", "list", "-s", currentEnvironment.store],
+            {
+              shell: true,
+              stdio: "inherit",
+            }
+          );
+          cp.on("exit", () => {
+            resolve(true);
+          });
+        });
+      }
+    }
+    console.log(
+      `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.redBright(`Theme ID missing.`)}`
+    );
+    prompts.push({
+      type: "text",
+      name: "theme_id",
+      message: `Shopify theme id. I.e. \`https://admin.shopify.com/store/${
+        currentEnvironment?.store ?? `<store_id>`
+      }/themes/${currentEnvironment?.store ? "current" : `<theme_id>`}/editor\``,
+    });
+  }
+
+  if (
+    (store && currentEnvironment.store !== store) ||
+    (theme_id && currentEnvironment.theme !== +theme_id)
+  ) {
+    prompts.push({
+      type: "text",
+      name: "environment",
+      message: `New environment name:`,
+    });
+    console.log(
+      `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.redBright(
+        `Environment mismatch: Please rename the environment or re-run the CLI`
+      )}`
+    );
+  }
+
+  const results = await userInput(prompts);
+
+  if (Object.keys(results)?.length) {
+    environment = results.environment ?? environment;
+    currentEnvironment.path = currentEnvironment.path || `./themes/${environment}`;
+    currentEnvironment.theme = +(results.theme_id ?? theme_id ?? currentEnvironment.theme);
+    currentEnvironment.store =
+      results.store?.replace(/\.myshopify\.com/gi, "") ??
+      store?.replace(/\.myshopify\.com/gi, "") ??
+      currentEnvironment?.store?.replace(/\.myshopify\.com/gi, "");
+  }
+
+  currentEnvironment.all_presets = !!currentEnvironment?.all_presets;
+  currentEnvironment.mode =
+    currentEnvironment.mode ?? (environment === "development" ? "development" : "production");
+  currentEnvironment.ignore_blocks = currentEnvironment.ignore_blocks ?? "";
+  currentEnvironment.ignore_snippets = currentEnvironment.ignore_snippets ?? "";
+  currentEnvironment.ignore_layouts = currentEnvironment.ignore_layouts ?? "";
+  currentEnvironment.ignore_sections = currentEnvironment.ignore_sections ?? "";
+  currentEnvironment.ignore_assets =
+    currentEnvironment.ignore_assets ?? "custom.css.liquid,custom.css,custom.js";
+
+  console.log(currentEnvironment);
+  process.env["SHOPIFY_ACCELERATE_STORE"] = currentEnvironment.store;
+  config.environments[environment] = currentEnvironment;
+  config.environment = environment;
+  config.theme_path = currentEnvironment?.path;
+  config.theme_id = +currentEnvironment?.theme;
+  config.store = currentEnvironment?.store?.replace(/\.myshopify\.com/gi, "");
+  config.all_presets = currentEnvironment?.all_presets;
+  config.mode = currentEnvironment?.mode;
+  config.ignore_blocks =
+    currentEnvironment?.ignore_blocks?.split(",").map((str) => str.trim()) ?? [];
+  config.ignore_snippets =
+    currentEnvironment?.ignore_snippets?.split(",").map((str) => str.trim()) ?? [];
+  config.ignore_layouts =
+    currentEnvironment?.ignore_layouts?.split(",").map((str) => str.trim()) ?? [];
+  config.ignore_sections =
+    currentEnvironment?.ignore_sections?.split(",").map((str) => str.trim()) ?? [];
+  config.ignore_assets =
+    currentEnvironment?.ignore_assets?.split(",").map((str) => str.trim()) ?? [];
+
+  if (config.mode === "production") {
+    config.ignore_layouts.push("theme.liquid");
+    config.delete_external_layouts = false;
+    config.delete_external_sections = false;
+    config.delete_external_snippets = false;
+    config.delete_external_blocks = false;
+    config.delete_external_assets = false;
+  }
+
+  const { project_root, package_templates } = config;
+
+  writeOnlyNew(
+    path.join(process.cwd(), ".env"),
+    readFile(path.join(package_templates, "/.env.template"))
+  );
+
+  if (
+    !currentEnvironment?.store ||
+    !currentEnvironment?.theme ||
+    !currentEnvironment?.path ||
+    !environment
+  ) {
+    throw new Error("Missing information to initialize the theme environment");
+  }
+
+  process.env.THEME_PATH = currentEnvironment?.path;
+  writeCompareFile(
+    path.join(process.cwd(), "shopify.theme.toml"),
+    json2toml({ environments: config.environments }, { newlineAfterSection: true })
+  );
+};

package/src/watch-headless/watch-headless.ts

@@ -0,0 +1,81 @@
+import chalk from "chalk";
+import fs from "fs";
+import watch from "node-watch";
+import path from "path";
+import { config } from "../../shopify-accelerate-app";
+import { generateBlocksTypes } from "../scaffold-theme/generate-blocks-types";
+import { generateSectionsTypes } from "../scaffold-theme/generate-section-types";
+import { generateSettingTypes } from "../scaffold-theme/generate-setting-types";
+import { getSchemaSources, getSources, isTypeScriptSchema } from "../scaffold-theme/parse-files";
+import { capitalize } from "../utils/capitalize";
+import { writeCompareFile, writeOnlyNew } from "../utils/fs";
+
+export const watchHeadless = () => {
+  const { folders, theme_path, ignore_assets, delete_external_assets, targets } = config;
+
+  let running = false;
+  watch(
+    Object.values(folders)?.filter((folder) => fs.existsSync(folder)),
+    { recursive: true },
+    (event, name) => {
+      if (running) return;
+      const startTime = Date.now();
+      running = true;
+      if (event === "remove") {
+        getSources();
+      }
+      if (isTypeScriptSchema(name)) {
+        getSchemaSources();
+        generateSectionsTypes();
+        generateBlocksTypes();
+        generateSettingTypes();
+
+        const imports = [`import type { FC } from "react";`];
+        const renderBlocks = [];
+        Object.entries(config.sources.sectionSchemas ?? {})?.forEach(([key, entry]) => {
+          imports.push(
+            `import { ${capitalize(key)} } from "sections/${entry.folder}/${entry.folder}";`
+          );
+          renderBlocks.push(`    case "${entry.folder}": {
+      return <${capitalize(key)} {...section} />;
+    }`);
+
+          writeOnlyNew(
+            entry.path?.replace("schema.ts", `${entry.folder}.tsx`),
+            `import type { ${capitalize(key)}Section } from "types/sections";
+
+export const ${capitalize(key)} = ({ id, type, settings, blocks, disabled }: ${capitalize(
+              key
+            )}Section) => {
+  if (disabled) return null
+  
+  return <>${capitalize(key)}</>;
+};
+`
+          );
+        });
+        imports.push('import type { Sections } from "types/sections";');
+        imports.push("");
+        imports.push("type RenderSectionProps = { section: Sections; };");
+        imports.push("");
+        imports.push("export const RenderSection: FC<RenderSectionProps> = ({ section }) => {");
+        imports.push("  switch (section.type) {");
+        imports.push(...renderBlocks);
+        imports.push("  }");
+        imports.push("};");
+
+        writeCompareFile(
+          path.join(process.cwd(), "./app/[...slug]/render-section.tsx"),
+          imports.join("\n")
+        );
+
+        console.log(
+          `[${chalk.gray(new Date().toLocaleTimeString())}]: [${chalk.magentaBright(
+            `${Date.now() - startTime}ms`
+          )}] ${chalk.cyan(`File modified: ${name.replace(process.cwd(), "")}`)}`
+        );
+      }
+      running = false;
+    }
+  );
+};

package/src/watch-theme/watch-theme.ts

@@ -0,0 +1,84 @@
+import chalk from "chalk";
+import fs from "fs";
+import watch from "node-watch";
+import path from "path";
+import { config, root_dir } from "../../shopify-accelerate-app";
+import { generateBlocksTypes } from "../scaffold-theme/generate-blocks-types";
+import { generateLiquidFiles } from "../scaffold-theme/generate-liquid-files";
+import { generateSchemaLocales } from "../scaffold-theme/generate-schema-locales";
+import { generateSchemaVariables } from "../scaffold-theme/generate-schema-variables";
+import { generateSectionsTypes } from "../scaffold-theme/generate-section-types";
+import { generateSettingTypes } from "../scaffold-theme/generate-setting-types";
+import { getSchemaSources, getSources, getTargets, isAsset, isBlockTs, isLiquid, isSectionTs, isTypeScriptSchema } from "../scaffold-theme/parse-files";
+import { parseLocales } from "../scaffold-theme/parse-locales";
+import { deleteFile, writeCompareFile, writeOnlyNew } from "../utils/fs";
+
+export const watchTheme = () => {
+  const { folders, theme_path, ignore_assets, delete_external_assets, targets } = config;
+
+  let running = false;
+  watch(Object.values(folders), { recursive: true }, (event, name) => {
+    if (running) return;
+    const startTime = Date.now();
+    running = true;
+    if (event === "remove") {
+      getSources();
+      getTargets();
+    }
+    if (isTypeScriptSchema(name)) {
+      getTargets();
+      getSchemaSources();
+      parseLocales();
+      generateSchemaVariables();
+      generateSchemaLocales();
+      generateSectionsTypes();
+      generateBlocksTypes();
+      generateSettingTypes();
+      generateLiquidFiles();
+      console.log(
+        `[${chalk.gray(new Date().toLocaleTimeString())}]: [${chalk.magentaBright(
+          `${Date.now() - startTime}ms`
+        )}] ${chalk.cyan(`File modified: ${name.replace(process.cwd(), "")}`)}`
+      );
+    }
+    if (isAsset(name)) {
+      const fileName = name.split(/[\\/]/gi).at(-1);
+      const targetPath = path.join(process.cwd(), theme_path, "assets", fileName);
+
+      if (event !== "remove") {
+        const rawContent = fs.readFileSync(name, { encoding: "utf-8" });
+
+        if (ignore_assets?.includes(targetPath.split(/[/\\]/)?.at(-1))) {
+          console.log(
+            `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.greenBright(
+              `Ignored: ${targetPath.replace(process.cwd(), "")}`
+            )}`
+          );
+          writeOnlyNew(targetPath, rawContent);
+        } else {
+          writeCompareFile(targetPath, rawContent);
+        }
+      }
+
+      if (event === "remove" && delete_external_assets) {
+        const targetFile = fs.existsSync(targetPath);
+
+        if (targetFile) {
+          deleteFile(targetPath);
+        }
+      }
+    }
+    if (isLiquid(name) || isSectionTs(name) || isBlockTs(name)) {
+      getTargets();
+      getSources();
+      generateSchemaVariables();
+      generateLiquidFiles();
+      console.log(
+        `[${chalk.gray(new Date().toLocaleTimeString())}]: [${chalk.magentaBright(
+          `${Date.now() - startTime}ms`
+        )}] ${chalk.cyan(`File modified: ${name.replace(process.cwd(), "")}`)}`
+      );
+    }
+    running = false;
+  });
+};

package/tsconfig.json

@@ -0,0 +1,82 @@
+{
+  "ts-node": {
+    "require": ["tsconfig-paths/register"],
+    "exposeGC": true,
+    // these options are overrides used only by ts-node
+    // same as the --compilerOptions flag and the TS_NODE_COMPILER_OPTIONS environment variable
+    "compilerOptions": {
+      "module": "commonjs",
+      "target": "es6",
+      //      "esModuleInterop": true,
+      "baseUrl": ".",
+      "paths": {
+        "types/*": [
+          "./@types/*"
+        ],
+        "utils/*": [
+          "./utils/*"
+        ],
+        "*": [
+          "*"
+        ],
+        "/*": [
+          "./*"
+        ]
+      },
+      "rootDirs": [
+        "."
+      ],
+      "esModuleInterop": true,
+      //      "module": "esnext",
+      "moduleResolution": "node",
+      "resolveJsonModule": true,
+      "isolatedModules": true
+    },
+    "swc": true
+  },
+  "compilerOptions": {
+    "baseUrl": ".",
+    "allowSyntheticDefaultImports": true,
+    "paths": {
+      "types/*": [
+        "./@types/*"
+      ],
+      "utils/*": [
+        "./utils/*"
+      ],
+      "*": [
+        "*"
+      ]
+    },
+    "downlevelIteration": true,
+    "target": "ES2020",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "strictNullChecks": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "rootDirs": [
+      "."
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}