shopify-accelerate-app 1.0.0

package/src/esbuild/esbuild.ts

@@ -0,0 +1,246 @@
+import { dtsPlugin } from "esbuild-plugin-d.ts";
+import path from "path";
+import { config, root_dir } from "../../shopify-accelerate-app";
+import { isBlockTs, isSectionTs } from "../scaffold-theme/parse-files";
+
+const { build } = require("esbuild");
+
+// import watch from "node-watch";
+const watch = require("node-watch");
+const fs = require("fs");
+
+const runEsBuild = () => {
+  const entryPoints = [];
+  if (fs.existsSync(path.join(root_dir, "assets", "theme.ts"))) {
+    entryPoints.push(path.join(root_dir, "assets", "theme.ts"));
+  }
+
+  if (fs.existsSync(path.join(root_dir, "assets", "editor.ts"))) {
+    entryPoints.push(path.join(root_dir, "assets", "editor.ts"));
+  }
+  if (!entryPoints.length) {
+    console.log("No JS/TS entry files found.");
+    return;
+  }
+  build({
+    entryPoints: entryPoints,
+    metafile: true,
+    target: "es2020",
+    // sourcemap: "external",
+    treeShaking: true,
+    bundle: true,
+    // outfile: "./assets/theme.js",
+    outdir: path.join(root_dir, "assets"),
+    minify: false,
+    ignoreAnnotations: true,
+    packages: "external",
+
+    format: "esm",
+    legalComments: "none",
+    keepNames: true,
+    plugins: [dtsPlugin({})],
+
+    // splitting: true,
+  })
+    .then((e) => {
+      console.log("theme.js - bundled");
+      const content = fs.readFileSync(path.join(root_dir, "assets", "editor.js"), {
+        encoding: "utf-8",
+      });
+      fs.writeFileSync(
+        path.join(root_dir, "assets", "editor.js"),
+        `${content}\n // random_comment `
+      );
+      const content2 = fs.readFileSync(path.join(root_dir, "assets", "theme.js"), {
+        encoding: "utf-8",
+      });
+      fs.writeFileSync(
+        path.join(root_dir, "assets", "theme.js"),
+        `${content2}\n // random_comment `
+      );
+    })
+    .catch((error) => {
+      console.error(error);
+      // eslint-disable-next-line no-process-exit
+    });
+};
+
+const runSectionJsEsbuild = (entryFile) => {
+  build({
+    entryPoints: [entryFile],
+    metafile: true,
+    target: "es2020",
+    // sourcemap: "external",
+    treeShaking: true,
+    // bundle: true,
+    outfile: path.join(
+      root_dir,
+      config.theme_path,
+      "assets",
+      `__section--${entryFile
+        .split(/[\\/]/gi)
+        .at(-1)
+        .replace(/\.(ts)x?$/gi, ".js")}`
+    ),
+    // outdir: path.join(root_dir, config.theme_path, "assets"),
+    minify: false,
+    ignoreAnnotations: true,
+    packages: "external",
+    format: "esm",
+    legalComments: "none",
+    keepNames: true,
+    plugins: [dtsPlugin({})],
+
+    // splitting: true,
+  })
+    .then((e) => {
+      console.log(
+        `__section--${entryFile
+          .split(/[\\/]/gi)
+          .at(-1)
+          .replace(/\.(ts)x?$/gi, ".js")}- bundled`
+      );
+    })
+    .catch((error) => {
+      console.error(error);
+      // eslint-disable-next-line no-process-exit
+    });
+};
+
+const runBlockJsEsbuild = (entryFile) => {
+  build({
+    entryPoints: [entryFile],
+    metafile: true,
+    target: "es2020",
+    // sourcemap: "external",
+    treeShaking: true,
+    // bundle: true,
+    outfile: path.join(
+      root_dir,
+      config.theme_path,
+      "assets",
+      `__block--${entryFile
+        .split(/[\\/]/gi)
+        .at(-1)
+        .replace(/\.(ts)x?$/gi, ".js")}`
+    ),
+    // outdir: path.join(root_dir, config.theme_path, "assets"),
+    minify: false,
+    ignoreAnnotations: true,
+    packages: "external",
+    format: "esm",
+    legalComments: "none",
+    keepNames: true,
+    plugins: [dtsPlugin({})],
+
+    // splitting: true,
+  })
+    .then((e) => {
+      console.log(
+        `__block--${entryFile
+          .split(/[\\/]/gi)
+          .at(-1)
+          .replace(/\.(ts)x?$/gi, ".js")} - bundled`
+      );
+    })
+    .catch((error) => {
+      console.error(error);
+      // eslint-disable-next-line no-process-exit
+    });
+};
+
+export const runEsbuild = () => {
+  let running = false;
+  watch(root_dir, { recursive: true }, async (event, name) => {
+    if (running || event === "remove") return;
+    if (!name.match(/\.(ts)x?$/) || /schema\.ts$/gi.test(name)) return;
+    running = true;
+
+    if (isSectionTs(name)) {
+      const filename = name.split(/[\\/]/gi).at(-1);
+
+      const section = Object.values(config.sources.sectionSchemas).find((section) =>
+        section.path.includes(name.replace(filename, ""))
+      );
+
+      if (section && !section.disabled) {
+        try {
+          runSectionJsEsbuild(name);
+        } catch (err) {
+          console.log(err);
+        }
+      }
+      running = false;
+      return;
+    }
+
+    if (isBlockTs(name)) {
+      const filename = name.split(/[\\/]/gi).at(-1);
+
+      const block = Object.values(config.sources.blockSchemas).find((block) =>
+        block.path.includes(name.replace(filename, ""))
+      );
+
+      if (block && !block.disabled) {
+        try {
+          runBlockJsEsbuild(name);
+        } catch (err) {
+          console.log(err);
+        }
+      }
+      running = false;
+      return;
+    }
+
+    try {
+      runEsBuild();
+    } catch (err) {
+      console.log(err);
+    }
+    running = false;
+  });
+
+  config.sources.sectionsJs.forEach((name) => {
+    running = true;
+
+    if (isSectionTs(name)) {
+      const filename = name.split(/[\\/]/gi).at(-1);
+
+      const section = Object.values(config.sources.sectionSchemas).find((section) =>
+        section.path.includes(name.replace(filename, ""))
+      );
+
+      if (section && !section.disabled) {
+        try {
+          runSectionJsEsbuild(name);
+        } catch (err) {
+          console.log(err);
+        }
+      }
+      running = false;
+      return;
+    }
+  });
+
+  config.sources.blocksJs.forEach((name) => {
+    running = true;
+    if (isBlockTs(name)) {
+      const filename = name.split(/[\\/]/gi).at(-1);
+
+      const block = Object.values(config.sources.blockSchemas).find((block) =>
+        block.path.includes(name.replace(filename, ""))
+      );
+
+      if (block && !block.disabled) {
+        try {
+          runBlockJsEsbuild(name);
+        } catch (err) {
+          console.log(err);
+        }
+      }
+      running = false;
+      return;
+    }
+  });
+  runEsBuild();
+};

package/src/scaffold-theme/build-theme.ts

@@ -0,0 +1,24 @@
+import { generateAssetFiles } from "./generate-asset-files";
+import { generateBaseTypes } from "./generate-base-types";
+import { generateBlocksTypes } from "./generate-blocks-types";
+import { generateLiquidFiles } from "./generate-liquid-files";
+import { generateSchemaLocales } from "./generate-schema-locales";
+import { generateSchemaVariables } from "./generate-schema-variables";
+import { generateSectionsTypes } from "./generate-section-types";
+import { generateSettingTypes } from "./generate-setting-types";
+import { getSources, getTargets } from "./parse-files";
+import { parseLocales } from "./parse-locales";
+
+export const buildTheme = () => {
+  generateBaseTypes();
+  getSources();
+  getTargets();
+  parseLocales();
+  generateSchemaVariables();
+  generateSchemaLocales();
+  generateSectionsTypes();
+  generateBlocksTypes();
+  generateSettingTypes();
+  generateLiquidFiles();
+  generateAssetFiles();
+};

package/src/scaffold-theme/generate-asset-files.ts

@@ -0,0 +1,48 @@
+import chalk from "chalk";
+import fs from "fs";
+import path from "path";
+import { config, root_dir } from "../../shopify-accelerate-app";
+import { deleteFile, writeCompareFile, writeOnlyNew } from "../utils/fs";
+
+export const generateAssetFiles = () => {
+  const { theme_path, sources, targets, delete_external_assets, ignore_assets } = config;
+
+  sources.assets.forEach((file) => {
+    const fileName = file.split(/[\\/]/gi).at(-1);
+    const targetPath = path.join(process.cwd(), theme_path, "assets", fileName);
+
+    const rawContent = fs.readFileSync(file, { 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 (delete_external_assets) {
+    targets.assets.forEach((file) => {
+      const fileName = file.split(/[\\/]/gi).at(-1);
+      const targetFile = sources.assets.find((sourcePath) =>
+        sourcePath.split(/[\\/]/gi).at(-1).includes(fileName)
+      );
+
+      if (
+        /^replo/gi.test(fileName) ||
+        /^pandectes/gi.test(fileName) ||
+        /^locksmith/gi.test(fileName) ||
+        /^shogun/gi.test(fileName)
+      ) {
+        return;
+      }
+      if (!targetFile) {
+        deleteFile(path.join(process.cwd(), file));
+      }
+    });
+  }
+};

package/src/scaffold-theme/generate-base-types.ts

@@ -0,0 +1,23 @@
+import path from "path";
+import { config } from "../../shopify-accelerate-app";
+import { readFile, writeCompareFile, writeOnlyNew } from "../utils/fs";
+
+export const generateBaseTypes = () => {
+  const { folders, package_types } = config;
+  writeCompareFile(
+    path.join(folders.types, "shopify.ts"),
+    readFile(path.join(package_types, "shopify.ts"))
+  );
+  writeOnlyNew(
+    path.join(folders.types, "settings.ts"),
+    readFile(path.join(package_types, "settings.ts"))
+  );
+  writeOnlyNew(
+    path.join(folders.types, "sections.ts"),
+    readFile(path.join(package_types, "sections.ts"))
+  );
+  writeOnlyNew(
+    path.join(folders.types, "metafields.ts"),
+    readFile(path.join(package_types, "metafields.ts"))
+  );
+};

package/src/scaffold-theme/generate-block-files.ts

@@ -0,0 +1,194 @@
+import { ShopifyBlock } from "../../@types/shopify";
+import { config } from "../../shopify-accelerate-app";
+import { toLocaleFriendlySnakeCase } from "../utils/to-snake-case";
+
+export const generateBlockFiles = ({
+  name,
+  disabled,
+  path,
+  folder,
+  ...section
+}: ShopifyBlock & { path: string; folder: string }) => {
+  const sectionName = toLocaleFriendlySnakeCase(name);
+  const { sources, disabled_locales } = config;
+  const localeDuplicates = sources.locale_duplicates;
+  let paragraphCount = 1;
+  let headerCount = 1;
+
+  const localizedSection = {
+    name: disabled_locales || sectionName?.length <= 25 ? name : `t:blocks.${sectionName}.name`,
+    ...section,
+    settings: section?.settings?.map((setting) => {
+      const settingsBase = `t:blocks.${sectionName}.settings`;
+      if (setting.type === "paragraph") {
+        return {
+          ...setting,
+          content:
+            "content" in setting
+              ? disabled_locales && !setting.content.includes(" ") && setting.content.length < 500
+                ? setting.content
+                : localeDuplicates[toLocaleFriendlySnakeCase(setting.content)]?.length > 1
+                ? `t:all.${toLocaleFriendlySnakeCase(setting.content)}`
+                : `${settingsBase}.paragraph__${paragraphCount++}.content`
+              : undefined,
+        };
+      }
+      if (setting.type === "header") {
+        return {
+          ...setting,
+          content:
+            "content" in setting
+              ? disabled_locales && !setting.content.includes(" ") && setting.content.length < 500
+                ? setting.content
+                : localeDuplicates[toLocaleFriendlySnakeCase(setting.content)]?.length > 1
+                ? `t:all.${toLocaleFriendlySnakeCase(setting.content)}`
+                : `${settingsBase}.header__${headerCount++}.content`
+              : undefined,
+        };
+      }
+      return {
+        ...setting,
+        label:
+          "label" in setting
+            ? disabled_locales
+              ? setting.label
+              : localeDuplicates[toLocaleFriendlySnakeCase(setting.label)]?.length > 1
+              ? `t:all.${toLocaleFriendlySnakeCase(setting.label)}`
+              : `${settingsBase}.${setting.id}.label`
+            : undefined,
+        info:
+          "info" in setting
+            ? disabled_locales && setting.info.length < 500
+              ? setting.info
+              : localeDuplicates[toLocaleFriendlySnakeCase(setting.info)]?.length > 1
+              ? `t:all.${toLocaleFriendlySnakeCase(setting.info)}`
+              : `${settingsBase}.${setting.id}.info`
+            : undefined,
+        placeholder:
+          "placeholder" in setting && typeof setting.placeholder === "string"
+            ? disabled_locales
+              ? setting.placeholder
+              : localeDuplicates[toLocaleFriendlySnakeCase(setting.placeholder)]?.length > 1
+              ? `t:all.${toLocaleFriendlySnakeCase(setting.placeholder)}`
+              : `${settingsBase}.${setting.id}.placeholder`
+            : undefined,
+        options:
+          "options" in setting
+            ? disabled_locales
+              ? setting.options
+              : setting.options.map((option, index) => ({
+                  ...option,
+                  label:
+                    localeDuplicates[toLocaleFriendlySnakeCase(option.label)]?.length > 1
+                      ? `t:all.${toLocaleFriendlySnakeCase(option.label)}`
+                      : `${settingsBase}.${setting.id}.options__${index + 1}.label`,
+                }))
+            : undefined,
+      };
+    }),
+    blocks: section.blocks?.map(({ name, ...block }) => {
+      let paragraphCount = 1;
+      let headerCount = 1;
+
+      if (block.type === "@app") return { name, ...block };
+      if (block.type === "@theme") return { name, ...block };
+
+      return {
+        name:
+          disabled_locales || name?.length <= 25
+            ? name
+            : `t:blocks.${sectionName}.blocks.${toLocaleFriendlySnakeCase(name)}.name`,
+        ...block,
+        settings: block?.settings?.map((setting) => {
+          const settingsBase = `t:blocks.${sectionName}.blocks.${toLocaleFriendlySnakeCase(
+            name
+          )}.settings`;
+
+          if (setting.type === "paragraph") {
+            return {
+              ...setting,
+              content:
+                "content" in setting
+                  ? disabled_locales &&
+                    !setting.content.includes(" ") &&
+                    setting.content.length < 500
+                    ? setting.content
+                    : localeDuplicates[toLocaleFriendlySnakeCase(setting.content)]?.length > 1
+                    ? `t:all.${toLocaleFriendlySnakeCase(setting.content)}`
+                    : `${settingsBase}.paragraph__${paragraphCount++}.content`
+                  : undefined,
+            };
+          }
+          if (setting.type === "header") {
+            return {
+              ...setting,
+              content:
+                "content" in setting
+                  ? disabled_locales &&
+                    !setting.content.includes(" ") &&
+                    setting.content.length < 500
+                    ? setting.content
+                    : localeDuplicates[toLocaleFriendlySnakeCase(setting.content)]?.length > 1
+                    ? `t:all.${toLocaleFriendlySnakeCase(setting.content)}`
+                    : `${settingsBase}.header__${headerCount++}.content`
+                  : undefined,
+            };
+          }
+          return {
+            ...setting,
+            label:
+              "label" in setting
+                ? disabled_locales
+                  ? setting.label
+                  : localeDuplicates[toLocaleFriendlySnakeCase(setting.label)]?.length > 1
+                  ? `t:all.${toLocaleFriendlySnakeCase(setting.label)}`
+                  : `${settingsBase}.${setting.id}.label`
+                : undefined,
+            info:
+              "info" in setting
+                ? disabled_locales && setting.info.length < 500
+                  ? setting.info
+                  : localeDuplicates[toLocaleFriendlySnakeCase(setting.info)]?.length > 1
+                  ? `t:all.${toLocaleFriendlySnakeCase(setting.info)}`
+                  : `${settingsBase}.${setting.id}.info`
+                : undefined,
+            placeholder:
+              "placeholder" in setting && typeof setting.placeholder === "string"
+                ? disabled_locales
+                  ? setting.placeholder
+                  : localeDuplicates[toLocaleFriendlySnakeCase(setting.placeholder)]?.length > 1
+                  ? `t:all.${toLocaleFriendlySnakeCase(setting.placeholder)}`
+                  : `${settingsBase}.${setting.id}.placeholder`
+                : undefined,
+            options:
+              "options" in setting
+                ? disabled_locales
+                  ? setting.options
+                  : setting.options.map((option, index) => ({
+                      ...option,
+                      label:
+                        localeDuplicates[toLocaleFriendlySnakeCase(option.label)]?.length > 1
+                          ? `t:all.${toLocaleFriendlySnakeCase(option.label)}`
+                          : `${settingsBase}.${setting.id}.options__${index + 1}.label`,
+                    }))
+                : undefined,
+          };
+        }),
+      };
+    }),
+    presets: section.presets?.map(({ name, ...preset }) => {
+      return {
+        name:
+          disabled_locales || name?.length <= 25
+            ? name
+            : `t:blocks.${sectionName}.presets.${toLocaleFriendlySnakeCase(name)}.name`,
+        ...preset,
+      };
+    }),
+  };
+
+  return `{% schema %}
+${JSON.stringify(localizedSection, undefined, 2)}
+{% endschema %}
+`;
+};