shopify-accelerate-app 1.0.0

package/src/scaffold-theme/parse-files.ts

@@ -0,0 +1,466 @@
+import chalk from "chalk";
+import importFresh from "import-fresh";
+import path from "path";
+import { ShopifyBlock, ShopifySection, ShopifySettings } from "../../@types/shopify";
+import { config } from "../../shopify-accelerate-app";
+import { getAllFiles } from "../utils/fs";
+
+export const getSources = () => {
+  const { folders, disabled_theme_blocks } = config;
+
+  const sourceFiles = [
+    ...getAllFiles(folders.sections),
+    ...getAllFiles(folders.presets),
+    ...getAllFiles(folders.snippets),
+    ...getAllFiles(folders.config),
+    ...getAllFiles(folders.templates),
+    ...getAllFiles(folders.assets),
+    ...getAllFiles(folders.layout),
+    ...getAllFiles(folders.utils),
+    ...getAllFiles(folders.types),
+    ...getAllFiles(folders.blocks),
+  ];
+
+  const typeScriptSchema = [];
+
+  const snippets = [];
+  const layouts = [];
+  const sectionsLiquid = [];
+  const sectionsSchemaFiles = [];
+  const sectionPresetSchemaFiles = [];
+  const sectionsJs = [];
+  const settingsFiles = [];
+  const blocksLiquid = [];
+  const blocksSchemaFiles = [];
+  const blocksJs = [];
+  const giftCards = [];
+  const sectionGroups = [];
+  const configs = [];
+  const templates = [];
+  const customerTemplates = [];
+  const assets = [];
+
+  sourceFiles.forEach((filePath) => {
+    if (isTypeScriptSchema(filePath)) {
+      typeScriptSchema.push(filePath);
+    }
+    if (isSnippet(filePath)) {
+      snippets.push(filePath);
+    }
+    if (isLayout(filePath)) {
+      layouts.push(filePath);
+    }
+    if (isSectionLiquid(filePath)) {
+      sectionsLiquid.push(filePath);
+    }
+    if (isSectionSchema(filePath)) {
+      sectionsSchemaFiles.push(filePath);
+    }
+    if (isSectionPresetSchema(filePath)) {
+      sectionPresetSchemaFiles.push(filePath);
+    }
+    if (isSectionTs(filePath)) {
+      sectionsJs.push(filePath);
+    }
+    if (isBlockLiquid(filePath)) {
+      blocksLiquid.push(filePath);
+      if (disabled_theme_blocks) {
+        snippets.push(filePath);
+      }
+    }
+    if (isBlockSchema(filePath)) {
+      blocksSchemaFiles.push(filePath);
+    }
+    if (isBlockTs(filePath)) {
+      blocksJs.push(filePath);
+    }
+    if (isGiftCard(filePath)) {
+      giftCards.push(filePath);
+    }
+    if (isSectionGroup(filePath)) {
+      sectionGroups.push(filePath);
+    }
+    if (isConfig(filePath)) {
+      configs.push(filePath);
+    }
+    if (isTemplate(filePath)) {
+      templates.push(filePath);
+    }
+    if (isCustomerTemplate(filePath)) {
+      customerTemplates.push(filePath);
+    }
+    if (isAsset(filePath)) {
+      assets.push(filePath);
+    }
+    if (isSettingsSchema(filePath)) {
+      settingsFiles.push(filePath);
+    }
+  });
+
+  config.sources.snippets = snippets;
+  config.sources.layouts = layouts;
+  config.sources.sectionsLiquid = sectionsLiquid;
+  config.sources.sectionsSchemaFiles = sectionsSchemaFiles;
+  config.sources.sectionPresetSchemaFiles = sectionPresetSchemaFiles;
+  config.sources.sectionsJs = sectionsJs;
+  config.sources.blocksLiquid = blocksLiquid;
+  config.sources.blocksSchemaFiles = blocksSchemaFiles;
+  config.sources.blocksJs = blocksJs;
+  config.sources.assets = assets;
+  config.sources.giftCards = giftCards;
+  config.sources.configs = configs;
+  config.sources.sectionGroups = sectionGroups;
+  config.sources.templates = templates;
+  config.sources.customerTemplates = customerTemplates;
+  config.sources.settingsFile = settingsFiles?.[0];
+  config.sources.settingsSchema = settingsFiles?.[0]
+    ? (importFresh(settingsFiles[0]) as { settingsSchema: ShopifySettings })?.settingsSchema
+    : [];
+
+  config.sources.sectionSchemas = sectionsSchemaFiles.reduce(
+    (acc, file) => {
+      try {
+        const data = importFresh(file);
+        return {
+          ...acc,
+          ...Object.entries(data).reduce((acc2, [key, val]) => {
+            // @ts-ignore
+            acc2[key] = { ...val, folder: file.split(/[\\/]/gi).at(-2), path: file };
+            return acc2;
+          }, {}),
+        };
+      } catch (err) {
+        console.log(chalk.redBright(err.message));
+        return acc;
+      }
+    },
+    {} as { [T: string]: ShopifySection }
+  );
+  config.sources.sectionPresetSchemas = sectionPresetSchemaFiles.reduce(
+    (acc, file) => {
+      try {
+        let data = importFresh(file);
+        if (data["default"]) {
+          data = data["default"];
+        }
+
+        return {
+          ...acc,
+          ...Object.entries(data).reduce((acc2, [key, val]) => {
+            // @ts-ignore
+            acc2[key] = { ...val, folder: file.split(/[\\/]/gi).at(-2), path: file };
+            return acc2;
+          }, {}),
+        };
+      } catch (err) {
+        console.log(chalk.redBright(err.message));
+        return acc;
+      }
+    },
+    {} as { [T: string]: ShopifySection }
+  );
+
+  config.sources.blockSchemas = blocksSchemaFiles.reduce(
+    (acc, file) => {
+      try {
+        const data = importFresh(file);
+
+        return {
+          ...acc,
+          ...Object.entries(data).reduce((acc2, [key, val]) => {
+            // @ts-ignore
+            acc2[key] = { ...val, folder: file.split(/[\\/]/gi).at(-2), path: file };
+            return acc2;
+          }, {}),
+        };
+      } catch (err) {
+        console.log(chalk.redBright(err.message));
+        return acc;
+      }
+    },
+    {} as { [T: string]: ShopifyBlock }
+  );
+};
+
+export const getSchemaSources = () => {
+  const { folders, disabled_theme_blocks } = config;
+
+  const sourceFiles = [
+    ...getAllFiles(folders.layout),
+    ...getAllFiles(folders.snippets),
+    ...getAllFiles(folders.presets),
+    ...getAllFiles(folders.blocks),
+    ...getAllFiles(folders.sections),
+    ...getAllFiles(folders.config),
+  ];
+
+  const typeScriptSchema = [];
+
+  const snippets = [];
+  const layouts = [];
+  const sectionsLiquid = [];
+  const sectionsSchemaFiles = [];
+  const sectionPresetSchemaFiles = [];
+  const settingsFiles = [];
+  const blocksLiquid = [];
+  const blocksSchemaFiles = [];
+  const giftCards = [];
+  const assets = [];
+
+  sourceFiles.forEach((filePath) => {
+    if (isTypeScriptSchema(filePath)) {
+      typeScriptSchema.push(filePath);
+    }
+    if (isSnippet(filePath)) {
+      snippets.push(filePath);
+    }
+
+    if (isLayout(filePath)) {
+      layouts.push(filePath);
+    }
+    if (isSectionLiquid(filePath)) {
+      sectionsLiquid.push(filePath);
+    }
+    if (isSectionSchema(filePath)) {
+      sectionsSchemaFiles.push(filePath);
+    }
+    if (isSectionPresetSchema(filePath)) {
+      sectionPresetSchemaFiles.push(filePath);
+    }
+    if (isBlockLiquid(filePath)) {
+      blocksLiquid.push(filePath);
+      if (disabled_theme_blocks) {
+        snippets.push(filePath);
+      }
+    }
+    if (isBlockSchema(filePath)) {
+      blocksSchemaFiles.push(filePath);
+    }
+    if (isAsset(filePath)) {
+      assets.push(filePath);
+    }
+    if (isSettingsSchema(filePath)) {
+      settingsFiles.push(filePath);
+    }
+  });
+
+  Object.keys(require.cache)?.forEach((file) => {
+    if (/[\\/]@utils[\\/]settings[\\/][^\\/]*\.ts$/gi.test(file)) {
+      importFresh(file);
+    }
+  });
+
+  config.sources.snippets = snippets;
+  config.sources.layouts = layouts;
+  config.sources.sectionsLiquid = sectionsLiquid;
+  config.sources.sectionsSchemaFiles = sectionsSchemaFiles;
+  config.sources.sectionPresetSchemaFiles = sectionPresetSchemaFiles;
+  config.sources.blocksLiquid = blocksLiquid;
+  config.sources.giftCards = giftCards;
+  config.sources.settingsFile = settingsFiles[0];
+  config.sources.settingsSchema = settingsFiles?.[0]
+    ? (importFresh(settingsFiles[0]) as { settingsSchema: ShopifySettings })?.settingsSchema
+    : [];
+  config.sources.sectionSchemas = sectionsSchemaFiles.reduce(
+    (acc, file) => {
+      try {
+        const data = importFresh(file);
+
+        return {
+          ...acc,
+          ...Object.entries(data).reduce((acc2, [key, val]) => {
+            // @ts-ignore
+            acc2[key] = { ...val, folder: file.split(/[\\/]/gi).at(-2), path: file };
+            return acc2;
+          }, {}),
+        };
+      } catch (err) {
+        console.log(chalk.redBright(err.message));
+        return acc;
+      }
+    },
+    {} as { [T: string]: ShopifySection }
+  );
+  config.sources.sectionPresetSchemas = sectionPresetSchemaFiles.reduce(
+    (acc, file) => {
+      try {
+        let data = importFresh(file);
+        if (data["default"]) {
+          data = data["default"];
+        }
+        return {
+          ...acc,
+          ...Object.entries(data).reduce((acc2, [key, val]) => {
+            // @ts-ignore
+            acc2[key] = { ...val, folder: file.split(/[\\/]/gi).at(-2), path: file };
+            return acc2;
+          }, {}),
+        };
+      } catch (err) {
+        console.log(chalk.redBright(err.message));
+        return acc;
+      }
+    },
+    {} as { [T: string]: ShopifySection }
+  );
+  config.sources.blockSchemas = blocksSchemaFiles.reduce(
+    (acc, file) => {
+      try {
+        const data = importFresh(file);
+
+        return {
+          ...acc,
+          ...Object.entries(data).reduce((acc2, [key, val]) => {
+            // @ts-ignore
+            acc2[key] = { ...val, folder: file.split(/[\\/]/gi).at(-2), path: file };
+            return acc2;
+          }, {}),
+        };
+      } catch (err) {
+        console.log(chalk.redBright(err.message));
+        return acc;
+      }
+    },
+    {} as { [T: string]: ShopifyBlock }
+  );
+};
+
+export const getTargets = () => {
+  if (config.headless) {
+    return;
+  }
+  const { theme_path } = config;
+
+  const targetFiles = [
+    ...getAllFiles(path.join(theme_path, "assets")),
+    ...getAllFiles(path.join(theme_path, "sections")),
+    ...getAllFiles(path.join(theme_path, "config")),
+    ...getAllFiles(path.join(theme_path, "templates")),
+  ];
+
+  const assets = [];
+  const sections = [];
+  const settings = [];
+  const dynamicJs = [];
+  const giftCards = [];
+  const sectionGroups = [];
+  const configs = [];
+  const templates = [];
+  const customerTemplates = [];
+
+  targetFiles.forEach((file) => {
+    if (isTargetDynamicJs(file)) {
+      dynamicJs.push(file);
+    }
+    if (!isTargetDynamicJs(file) && /[\\/]assets[\\/][^\\/]*$/gi.test(file)) {
+      assets.push(file);
+    }
+    if (/[\\/]sections[\\/][^\\/]*\.liquid$/gi.test(file)) {
+      sections.push(file);
+    }
+    if (isGiftCard(file)) {
+      giftCards.push(file);
+    }
+    if (/[\\/]sections[\\/][\\/]*\.json$/gi.test(file)) {
+      sectionGroups.push(file);
+    }
+    if (isConfig(file)) {
+      configs.push(file);
+    }
+    if (isTemplate(file)) {
+      templates.push(file);
+    }
+    if (isCustomerTemplate(file)) {
+      customerTemplates.push(file);
+    }
+    if (isSettingsSchema(file)) {
+      settings.push(file);
+    }
+  });
+
+  config.targets.blocks = getAllFiles(path.join(theme_path, "blocks"));
+  config.targets.layout = getAllFiles(path.join(theme_path, "layout"));
+  config.targets.locales = getAllFiles(path.join(theme_path, "locales"));
+  config.targets.snippets = getAllFiles(path.join(theme_path, "snippets"));
+  config.targets.assets = assets;
+  config.targets.dynamicJs = dynamicJs;
+  config.targets.sections = sections;
+  config.targets.settings = settings[0];
+  config.targets.giftCards = giftCards;
+  config.targets.sectionGroups = sectionGroups;
+  config.targets.configs = configs;
+  config.targets.templates = templates;
+  config.targets.customerTemplates = customerTemplates;
+};
+
+export const isTypeScriptSchema = (name: string) =>
+  /[\\/]sections[\\/][^\\/]*[\\/]schema.ts$/gi.test(name) ||
+  /[\\/]presets[\\/][^\\/]*.ts$/gi.test(name) ||
+  /[\\/]blocks[\\/][^\\/]*[\\/]schema.ts$/gi.test(name) ||
+  /[\\/]config[\\/]settings_schema\.ts$/gi.test(name) ||
+  /[\\/]@utils[\\/]settings[\\/][^\\/]*\.ts$/gi.test(name);
+
+export const isSectionLiquid = (name: string) =>
+  /[\\/]sections[\\/][^\\/]*[\\/][^.]*\.liquid$/gi.test(name);
+
+export const isSectionSchema = (name: string) =>
+  /[\\/]sections([\\/])[^\\/]*([\\/])schema\.ts$/gi.test(name);
+
+export const isSectionPresetSchema = (name: string) =>
+  /[\\/]presets([\\/])[^\\/]*\.ts$/gi.test(name);
+
+export const isSectionTs = (name: string) =>
+  !isSectionSchema(name) && /[\\/]sections([\\/])[^\\/]*([\\/])[^\\/]*\.ts$/gi.test(name);
+
+export const isSettingsSchema = (name: string) =>
+  /[\\/]config[\\/]settings_schema\.ts$/gi.test(name) ||
+  path.join(name) === path.join(config.folders.config, "settings_schema.ts");
+
+export const isAsset = (name: string) =>
+  /[\\/]assets[\\/][^\\/]*$/gi.test(name) ||
+  /[\\/]snippets[\\/][^\\/]*.js$/gi.test(name) ||
+  /[\\/]blocks[\\/][^\\/]*.js$/gi.test(name) ||
+  /[\\/]sections[\\/][^\\/]*.js$/gi.test(name);
+
+export const isSnippet = (name: string) => {
+  return (
+    /[\\/]sections[\\/][^\\/]*[\\/][^.]*\.[^.]*\.liquid$/gi.test(name) ||
+    /[\\/]blocks[\\/][^\\/]*[\\/][^.]*\.[^.]*\.liquid$/gi.test(name) ||
+    /[\\/]snippets[\\/][^\\/]*\.liquid$/gi.test(name)
+  );
+};
+
+export const isBlockLiquid = (name: string) =>
+  /[\\/]blocks[\\/][^\\/]*[\\/][^.]*\.liquid$/gi.test(name);
+
+export const isBlockSchema = (name: string) =>
+  /[\\/]blocks([\\/])[^\\/]*([\\/])schema.ts$/gi.test(name);
+
+export const isBlockTs = (name: string) =>
+  !isBlockSchema(name) && /[\\/]blocks([\\/])[^\\/]*([\\/])[^\\/]*?\.ts$/gi.test(name);
+
+export const isLayout = (name: string) => {
+  return /(?<![\\/](blocks|sections|snippets))[\\/]layout[\\/][^\\/]*\.liquid$/gi.test(name);
+};
+
+export const isSectionGroup = (name: string) =>
+  /[\\/]templates[\\/]section-groups[\\/][^\\/]*\.json$/gi.test(name);
+
+export const isConfig = (name: string) => /[\\/]config[\\/][^\\/]*\.json$/gi.test(name);
+
+export const isTemplate = (name: string) => /[\\/]templates[\\/][^\\/]*\.json$/gi.test(name);
+
+export const isCustomerTemplate = (name: string) =>
+  /[\\/]templates[\\/]customers[\\/][^\\/]*\.json$/gi.test(name);
+
+export const isGiftCard = (name: string) => /[\\/]templates[\\/]gift_card\.liquid$/gi.test(name);
+
+export const isTargetDynamicJs = (name: string) =>
+  /[\\/]assets[\\/](__section--|__block--)[^\\/]*$/gi.test(name);
+
+export const isLiquid = (name: string) =>
+  isSectionLiquid(name) ||
+  isBlockLiquid(name) ||
+  isSnippet(name) ||
+  isLayout(name) ||
+  isGiftCard(name);

package/src/scaffold-theme/parse-locales.ts

@@ -0,0 +1,98 @@
+import { ShopifyHeader, ShopifyParagraph, ShopifySection, ShopifySettings, ShopifySettingsInput } from "../../@types/shopify";
+import { config } from "../../shopify-accelerate-app";
+import { toLocaleFriendlySnakeCase } from "../utils/to-snake-case";
+
+export function parseLocales() {
+  const { sources } = config;
+  const sections = sources.sectionSchemas;
+  const blocks = sources.blockSchemas;
+  const settings = sources.settingsSchema;
+  const entries: { [T: string]: string[] } = {};
+
+  const mapSettings = (settings: (ShopifySettingsInput | ShopifyHeader | ShopifyParagraph)[]) => {
+    settings?.forEach((setting) => {
+      if (setting.type === "paragraph" || setting.type === "header") {
+        if (setting.content.split(" ").length > 4) {
+          return;
+        }
+        const [key, value] = [toLocaleFriendlySnakeCase(setting.content), setting.content];
+        if (entries[key]) {
+          entries[key].push(value);
+        } else {
+          entries[key] = [value];
+        }
+        return;
+      }
+
+      if (setting?.id) {
+        if (setting.type === "color_scheme_group") {
+          return;
+        }
+        if (setting.type === "select" || setting.type === "radio") {
+          setting.options.forEach((option, index) => {
+            const [key, value] = [toLocaleFriendlySnakeCase(option.label), option.label];
+            if (entries[key]) {
+              entries[key].push(value);
+            } else {
+              entries[key] = [value];
+            }
+          });
+        }
+        if (setting.label) {
+          const [key, value] = [toLocaleFriendlySnakeCase(setting.label), setting.label];
+          if (entries[key]) {
+            entries[key].push(value);
+          } else {
+            entries[key] = [value];
+          }
+        }
+
+        if (setting.info) {
+          if (setting.info.split(" ").length <= 4) {
+            const [key, value] = [toLocaleFriendlySnakeCase(setting.info), setting.info];
+            if (entries[key]) {
+              entries[key].push(value);
+            } else {
+              entries[key] = [value];
+            }
+          }
+        }
+        if ("placeholder" in setting && typeof setting.placeholder === "string") {
+          const [key, value] = [
+            toLocaleFriendlySnakeCase(setting.placeholder),
+            setting.placeholder,
+          ];
+          if (entries[key]) {
+            entries[key].push(value);
+          } else {
+            entries[key] = [value];
+          }
+        }
+      }
+    });
+  };
+
+  Object.values(sections).forEach((section) => {
+    const blocks =
+      section.blocks?.filter((block) => block.type !== "@app" && block.type !== "@theme") ?? [];
+    mapSettings(section.settings);
+    blocks.forEach((block) => mapSettings(block.settings));
+  });
+
+  Object.values(blocks).forEach((section) => {
+    const blocks =
+      section.blocks?.filter((block) => block.type !== "@app" && block.type !== "@theme") ?? [];
+    mapSettings(section.settings);
+    blocks.forEach((block) => mapSettings(block.settings));
+  });
+
+  settings.forEach((settingsSection) => {
+    if (!("settings" in settingsSection)) return;
+    mapSettings(settingsSection.settings);
+  });
+  /*  fs.writeFileSync(path.join(process.cwd(), "/test.json"), JSON.stringify(entries, null, 2), {
+    encoding: "utf-8",
+  });*/
+
+  config.sources.locale_duplicates = entries;
+}

package/src/shopify-cli/pull.ts

@@ -0,0 +1,103 @@
+import chalk from "chalk";
+import { exec } from "child_process";
+import fs from "fs";
+import path from "path";
+import { config } from "../../shopify-accelerate-app";
+import { buildTheme } from "../scaffold-theme/build-theme";
+import { generateConfigFiles } from "../scaffold-theme/generate-config-files";
+import { validateCliOptions } from "../validate-cli-options";
+
+export const shopifyCliPull = async () => {
+  const { store, theme_id, environment, theme_path } = config;
+  const cleanThemePath = theme_path?.replace(/^\.\//gi, "")?.replace(/\\/gi, "/");
+  let second_attempt = false;
+
+  await new Promise((resolve, reject) => {
+    const interval = setInterval(() => {
+      console.log(
+        `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.yellowBright(
+          `Downloading Theme Files from https://admin.shopify.com/store/${store}/themes/${theme_id}`
+        )}`
+      );
+    }, 1000);
+    exec(
+      `shopify theme pull --environment ${environment} && cd ${cleanThemePath} && git init && git add . && git commit -m init`,
+      async (error, stdout, stderr) => {
+        const vcsPath = path.join(process.cwd(), ".idea/vcs.xml");
+        const workspace = path.join(process.cwd(), ".idea/workspace.xml");
+        if (fs.existsSync(workspace)) {
+          if (fs.existsSync(vcsPath)) {
+            const vcsContent = fs.readFileSync(vcsPath, { encoding: "utf-8" });
+            if (
+              !vcsContent.includes(
+                `<mapping directory="$PROJECT_DIR$/${cleanThemePath}" vcs="Git" />`
+              )
+            ) {
+              const newVcsContent = vcsContent.replace(
+                "</component>",
+                `    <mapping directory="$PROJECT_DIR$/${cleanThemePath}" vcs="Git" />\n  </component>`
+              );
+              fs.writeFileSync(vcsPath, newVcsContent);
+            }
+          } else {
+            fs.writeFileSync(
+              vcsPath,
+              `<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+    <mapping directory="$PROJECT_DIR$/${cleanThemePath}" vcs="Git" />
+  </component>
+</project>`
+            );
+          }
+        }
+        if (
+          stderr &&
+          stderr.includes(`doesn't exist`) &&
+          stderr.includes(`Theme`) &&
+          !second_attempt
+        ) {
+          clearInterval(interval);
+          second_attempt = true;
+          console.log(stderr);
+          console.log(
+            `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.redBright(
+              `Error - Theme not Found`
+            )}`
+          );
+          await validateCliOptions({
+            store,
+            environment,
+            reset_theme_id: true,
+          });
+          buildTheme();
+          generateConfigFiles();
+          await shopifyCliPull();
+
+          resolve(true);
+          return;
+        }
+        if (stderr && stderr.includes(`doesn't exist`) && stderr.includes(`Theme`)) {
+          console.log(stderr);
+          console.log(
+            `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.redBright(
+              `Error - Could not initialize the Theme`
+            )}`
+          );
+
+          clearInterval(interval);
+          resolve(true);
+        }
+        console.log(
+          `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.greenBright(
+            `Theme Files & Git Initialized`
+          )}`
+        );
+
+        clearInterval(interval);
+        resolve(true);
+      }
+    );
+  });
+};

package/src/tailwind/postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};