shopify-accelerate-app 1.0.3 → 1.0.4

package/@types/shopify.ts

@@ -614,6 +614,7 @@ export type ShopifyAppBlock<T = never> = {
   class?: string;
   default?: ShopifyAppBlockDefault<T>;
   javascript?: string;
+  disabled?: boolean;
   locales?: {
     [T: string]: {
       [V: string]: string;

package/@types/types.d.ts

@@ -2,13 +2,10 @@ declare global {
   namespace NodeJS {
     // eslint-disable-next-line @typescript-eslint/no-empty-interface
     interface ProcessEnv {
-      SHOPIFY_ACCELERATE_DELETE_EXTERNAL_LAYOUTS?: string;
-      SHOPIFY_ACCELERATE_DELETE_EXTERNAL_SECTIONS?: string;
       SHOPIFY_ACCELERATE_DELETE_EXTERNAL_SNIPPETS?: string;
       SHOPIFY_ACCELERATE_DELETE_EXTERNAL_BLOCKS?: string;
       SHOPIFY_ACCELERATE_DELETE_EXTERNAL_ASSETS?: string;
       SHOPIFY_ACCELERATE_DISABLED_LOCALES?: string;
-      SHOPIFY_ACCELERATE_DISABLE_THEME_BLOCKS?: string;
     }
     interface Process {
       cwd?: () => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shopify-accelerate-app",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Shopify App development with full Typescript Support",
   "author": "Felix Tellmann",
   "license": "MIT",

package/shopify-accelerate-app.ts

@@ -1,26 +1,16 @@
 #!npx tsx
 
-import { require } from "./require";
 import fs from "fs";
 import path from "path";
+import { buildAppExtension } from "./src/scaffold-theme/build-app-extension";
+import { watchAppExtension } from "./src/watch-app-extension/watch-app-extension";
 import toml from "toml";
-import { PresetSchema, ShopifyBlock, ShopifySection, ShopifySettings } from "./@types/shopify";
+import { ShopifyAppBlock } from "./@types/shopify";
+import { require } from "./require";
 import { runEsbuild } from "./src/esbuild/esbuild";
-import { buildTheme } from "./src/scaffold-theme/build-theme";
-import { generateBaseTypes } from "./src/scaffold-theme/generate-base-types";
-import { generateBlocksTypes } from "./src/scaffold-theme/generate-blocks-types";
-import { generateConfigFiles } from "./src/scaffold-theme/generate-config-files";
-import { generateSectionsTypes } from "./src/scaffold-theme/generate-section-types";
-import { generateSettingTypes } from "./src/scaffold-theme/generate-setting-types";
-import { getSchemaSources, getSources } from "./src/scaffold-theme/parse-files";
-import { shopifyCliPull } from "./src/shopify-cli/pull";
 import { runTailwindCSSWatcher } from "./src/tailwind/tailwind-watch";
-import { capitalize } from "./src/utils/capitalize";
-import { readFile, writeCompareFile, writeOnlyNew } from "./src/utils/fs";
+import { readFile, writeOnlyNew } from "./src/utils/fs";
 import { JSONParse } from "./src/utils/json";
-import { validateCliOptions } from "./src/validate-cli-options";
-import { watchHeadless } from "./src/watch-headless/watch-headless";
-import { watchTheme } from "./src/watch-theme/watch-theme";
 
 const { Command } = require("commander");
 const program = new Command();
@@ -53,8 +43,6 @@ const shopify_toml = tomlFile
           mode: "development" | "production";
           ignore_blocks: string;
           ignore_snippets: string;
-          ignore_layouts: string;
-          ignore_sections: string;
           ignore_assets: string;
         };
       };
@@ -67,74 +55,37 @@ export type GlobalsState = {
   package_templates: string;
   package_types: string;
   project_root: ReturnType<typeof process.cwd>;
-  all_presets: boolean;
-  mode: "development" | "production";
-  theme_id: number;
-  theme_path: string;
-  store: string;
-  environment: string;
-  environments: (typeof shopify_toml)["environments"];
+  extension_path: string;
+  theme_output_path: string;
   ignore_blocks: string[];
   ignore_snippets: string[];
-  ignore_layouts: string[];
-  ignore_sections: string[];
   ignore_assets: string[];
-  delete_external_layouts?: boolean;
-  delete_external_sections?: boolean;
   delete_external_snippets?: boolean;
   delete_external_blocks?: boolean;
   delete_external_assets?: boolean;
   disabled_locales?: boolean;
-  disabled_theme_blocks?: boolean;
   sources: {
     snippets: string[];
-    layouts: string[];
-    sectionsLiquid: string[];
-    sectionsSchemaFiles: string[];
-    sectionsJs: string[];
-    sectionPresetSchemaFiles: string[];
-    sectionPresetSchemas: { [T: string]: PresetSchema & { path: string; folder: string } };
     blocksLiquid: string[];
     blocksSchemaFiles: string[];
     blocksJs: string[];
-    blockSchemas: { [T: string]: ShopifyBlock & { path: string; folder: string } };
+    blockSchemas: { [T: string]: ShopifyAppBlock & { path: string; folder: string } };
     assets: string[];
-    giftCards: string[];
-    configs: string[];
-    sectionGroups: string[];
-    templates: string[];
-    customerTemplates: string[];
-    settingsFile: string[];
     locale_duplicates: { [T: string]: string[] };
-    settingsSchema: ShopifySettings;
-    sectionSchemas: { [T: string]: ShopifySection & { path: string; folder: string } };
   };
   targets: {
     assets: string[];
     dynamicJs: string[];
     blocks: string[];
-    layout: string[];
     locales: string[];
     snippets: string[];
-    sections: string[];
-    settings: string;
-    giftCards: string[];
-    sectionGroups: string[];
-    configs: string[];
-    templates: string[];
-    customerTemplates: string[];
   };
   folders: {
     types: string;
     utils: string;
-    sections: string;
-    presets: string;
-    layout: string;
     blocks: string;
     snippets: string;
-    templates: string;
     assets: string;
-    config: string;
   };
 };
 
@@ -147,66 +98,33 @@ export const config: GlobalsState = {
     shopify_toml?.environments?.["development"]?.ignore_snippets
       ?.split(",")
       .map((str) => str.trim()) ?? [],
-  ignore_layouts:
-    shopify_toml?.environments?.["development"]?.ignore_layouts
-      ?.split(",")
-      .map((str) => str.trim()) ?? [],
-  ignore_sections:
-    shopify_toml?.environments?.["development"]?.ignore_sections
-      ?.split(",")
-      .map((str) => str.trim()) ?? [],
   ignore_assets:
     shopify_toml?.environments?.["development"]?.ignore_assets
       ?.split(",")
       .map((str) => str.trim()) ?? [],
-  delete_external_layouts: process.env.SHOPIFY_ACCELERATE_DELETE_EXTERNAL_LAYOUTS === "true",
-  delete_external_sections: process.env.SHOPIFY_ACCELERATE_DELETE_EXTERNAL_SECTIONS === "true",
   delete_external_snippets: process.env.SHOPIFY_ACCELERATE_DELETE_EXTERNAL_SNIPPETS === "true",
   delete_external_blocks: process.env.SHOPIFY_ACCELERATE_DELETE_EXTERNAL_BLOCKS === "true",
   delete_external_assets: process.env.SHOPIFY_ACCELERATE_DELETE_EXTERNAL_ASSETS === "true",
   disabled_locales: process.env.SHOPIFY_ACCELERATE_DISABLED_LOCALES === "true",
-  disabled_theme_blocks: process.env.SHOPIFY_ACCELERATE_DISABLE_THEME_BLOCKS === "true",
   package_root: path.resolve(__dirname),
   project_root: root_dir,
   package_templates: path.join(path.resolve(__dirname), "./src/templates"),
   package_types: path.join(path.resolve(__dirname), "./@types"),
   sources: {
     snippets: [],
-    layouts: [],
-    sectionPresetSchemaFiles: [],
-    sectionPresetSchemas: {},
-    sectionsLiquid: [],
-    sectionsSchemaFiles: [],
-    sectionsJs: [],
     blocksLiquid: [],
     blocksSchemaFiles: [],
     blocksJs: [],
     assets: [],
-    giftCards: [],
-    configs: [],
-    sectionGroups: [],
-    templates: [],
-    customerTemplates: [],
-    settingsFile: [],
     locale_duplicates: {},
-    settingsSchema: null,
-    sectionSchemas: {},
     blockSchemas: {},
   },
   targets: {
     assets: [],
     dynamicJs: [],
     blocks: [],
-    layout: [],
     locales: [],
     snippets: [],
-    sections: [],
-    settings: null,
-    giftCards: [],
-    sectionGroups: [],
-    configs: [],
-    templates: [],
-    customerTemplates: [],
   },
   folders: {
     types: process.env.SHOPIFY_ACCELERATE_TYPES
@@ -215,51 +133,26 @@ export const config: GlobalsState = {
     utils: process.env.SHOPIFY_ACCELERATE_UTILS
       ? path.join(process.cwd(), process.env.SHOPIFY_ACCELERATE_UTILS)
       : path.join(root_dir, "@utils"),
-    sections: process.env.SHOPIFY_ACCELERATE_SECTIONS
-      ? path.join(process.cwd(), process.env.SHOPIFY_ACCELERATE_SECTIONS)
-      : path.join(root_dir, "sections"),
-    presets: process.env.SHOPIFY_ACCELERATE_PRESETS
-      ? path.join(process.cwd(), process.env.SHOPIFY_ACCELERATE_PRESETS)
-      : path.join(root_dir, "presets"),
-    layout: process.env.SHOPIFY_ACCELERATE_LAYOUT
-      ? path.join(process.cwd(), process.env.SHOPIFY_ACCELERATE_LAYOUT)
-      : path.join(root_dir, "layout"),
     blocks: process.env.SHOPIFY_ACCELERATE_BLOCKS
       ? path.join(process.cwd(), process.env.SHOPIFY_ACCELERATE_BLOCKS)
       : path.join(root_dir, "blocks"),
     snippets: process.env.SHOPIFY_ACCELERATE_SNIPPETS
       ? path.join(process.cwd(), process.env.SHOPIFY_ACCELERATE_SNIPPETS)
       : path.join(root_dir, "snippets"),
-    templates: process.env.SHOPIFY_ACCELERATE_TEMPLATES
-      ? path.join(process.cwd(), process.env.SHOPIFY_ACCELERATE_TEMPLATES)
-      : path.join(root_dir, "templates"),
     assets: process.env.SHOPIFY_ACCELERATE_ASSETS
       ? path.join(process.cwd(), process.env.SHOPIFY_ACCELERATE_ASSETS)
       : path.join(root_dir, "assets"),
-    config: process.env.SHOPIFY_ACCELERATE_CONFIG
-      ? path.join(process.cwd(), process.env.SHOPIFY_ACCELERATE_CONFIG)
-      : path.join(root_dir, "config"),
   },
-  environments: Object.entries(shopify_toml?.environments ?? {})?.reduce((acc, [key, val]) => {
-    acc[key] = {
-      ...val,
-      store: val?.store?.replace(/\.myshopify\.com/gi, ""),
-    };
-    return acc;
-  }, {}),
-  environment: shopify_toml?.environments?.["development"]
-    ? "development"
-    : Object.keys(shopify_toml?.environments)?.[0] ?? "development",
-  theme_id: +shopify_toml?.environments?.["development"]?.theme,
-  theme_path: shopify_toml?.environments?.["development"]?.path ?? "./theme/development",
-  store: shopify_toml?.environments?.["development"]?.store,
-  all_presets: shopify_toml?.environments?.["development"]?.all_presets,
-  mode: shopify_toml?.environments?.["development"]?.mode ?? "production",
+  extension_path: process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH ?? "./extensions/theme-extension",
+  theme_output_path: process.env.SHOPIFY_ACCELERATE_THEME_OUTPUT_PATH ?? "/themes/development",
 };
 
-program.name("shopify-accelerate-app").description("CLI for Accelerated Shopify Theme development");
+program
+  .name("shopify-accelerate-app")
+  .description("CLI for Accelerated App Theme Extensions development");
 /*.version(require(path.join("./", "package.json")).version);*/
 
+/*
 program
   .command("init")
   .description("Initialize a local development environment from an existing Shopify theme")
@@ -279,10 +172,11 @@ program
     generateConfigFiles();
     await shopifyCliPull();
   });
+*/
 
 program
   .command("dev")
-  .description("Shopify Theme Development")
+  .description("Shopify App Theme Extension Dev")
   // .argument("<string>", "string to split")
   .option("-e, --environment <environment_name>", "Development environment name", "development")
   .option(
@@ -294,13 +188,17 @@ program
     "Shopify store id. I.e. `https://admin.shopify.com/store/<store_id>/themes/<theme_id>/editor`"
   )
   .action(async (options) => {
-    await validateCliOptions(options);
-    buildTheme();
-    generateConfigFiles();
+    writeOnlyNew(
+      path.join(process.cwd(), ".env"),
+      readFile(path.join(config.package_templates, "/.env.template"))
+    );
+
+    buildAppExtension();
     runEsbuild();
     runTailwindCSSWatcher();
-    watchTheme();
+    watchAppExtension();
   });
+/*
 
 program
   .command("tailwind")
@@ -366,7 +264,7 @@ export const ${capitalize(key)} = ({ id, type, settings, blocks, disabled }: ${c
           key
         )}Section) => {
   if (disabled) return null
-  
+
   return <>${capitalize(key)}</>;
 };
 `
@@ -389,5 +287,6 @@ export const ${capitalize(key)} = ({ id, type, settings, blocks, disabled }: ${c
 
     watchHeadless();
   });
+*/
 
 program.parse(process.argv);

package/src/esbuild/esbuild.ts

@@ -10,104 +10,6 @@ const { build } = require("esbuild");
 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],
@@ -118,14 +20,14 @@ const runBlockJsEsbuild = (entryFile) => {
     // bundle: true,
     outfile: path.join(
       root_dir,
-      config.theme_path,
+      config.extension_path,
       "assets",
       `__block--${entryFile
         .split(/[\\/]/gi)
         .at(-1)
         .replace(/\.(ts)x?$/gi, ".js")}`
     ),
-    // outdir: path.join(root_dir, config.theme_path, "assets"),
+    // outdir: path.join(root_dir, config.extension_path, "assets"),
     minify: false,
     ignoreAnnotations: true,
     packages: "external",
@@ -157,24 +59,6 @@ export const runEsbuild = () => {
     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);
 
@@ -193,36 +77,9 @@ export const runEsbuild = () => {
       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)) {
@@ -243,5 +100,4 @@ export const runEsbuild = () => {
       return;
     }
   });
-  runEsBuild();
 };

package/src/scaffold-theme/{build-theme.ts → build-app-extension.ts}

@@ -4,21 +4,17 @@ 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 = () => {
+export const buildAppExtension = () => {
   generateBaseTypes();
   getSources();
   getTargets();
   parseLocales();
   generateSchemaVariables();
   generateSchemaLocales();
-  generateSectionsTypes();
   generateBlocksTypes();
-  generateSettingTypes();
   generateLiquidFiles();
   generateAssetFiles();
 };

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

@@ -5,11 +5,11 @@ 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;
+  const { extension_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 targetPath = path.join(process.cwd(), extension_path, "assets", fileName);
 
     const rawContent = fs.readFileSync(file, { encoding: "utf-8" });
 

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

@@ -8,16 +8,16 @@ export const generateBaseTypes = () => {
     path.join(folders.types, "shopify.ts"),
     readFile(path.join(package_types, "shopify.ts"))
   );
-  writeOnlyNew(
+  /*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(
+  );*/
+  /*writeOnlyNew(
     path.join(folders.types, "metafields.ts"),
     readFile(path.join(package_types, "metafields.ts"))
-  );
+  );*/
 };