shopify-accelerate-app 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shopify-accelerate-app",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Shopify App development with full Typescript Support",
   "author": "Felix Tellmann",
   "license": "MIT",
@@ -52,6 +52,7 @@
     "node-watch": "^0.7.4",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
+    "preact": "^10.24.3",
     "prompts": "^2.4.2",
     "regenerator-runtime": "^0.14.1",
     "shopify-typed-node-api": "^2.1.1",

package/shopify-accelerate-app.ts

@@ -129,7 +129,7 @@ export const config: GlobalsState = {
   folders: {
     types: process.env.SHOPIFY_ACCELERATE_TYPES
       ? path.join(process.cwd(), process.env.SHOPIFY_ACCELERATE_TYPES)
-      : path.join(root_dir, "@types"),
+      : path.join(process.cwd(), "@types"),
     utils: process.env.SHOPIFY_ACCELERATE_UTILS
       ? path.join(process.cwd(), process.env.SHOPIFY_ACCELERATE_UTILS)
       : path.join(root_dir, "@utils"),

package/src/esbuild/esbuild.ts

@@ -1,8 +1,9 @@
-import { require } from "../../require";
-import { dtsPlugin } from "esbuild-plugin-d.ts";
+import chalk from "chalk";
 import path from "path";
+import { require } from "../../require";
 import { config, root_dir } from "../../shopify-accelerate-app";
-import { isBlockTs, isSectionTs } from "../scaffold-theme/parse-files";
+import { isBlockTs } from "../scaffold-theme/parse-files";
+import { writeCompareFile, writeOnlyNew } from "../utils/fs";
 
 const { build } = require("esbuild");
 
@@ -10,54 +11,180 @@ const { build } = require("esbuild");
 const watch = require("node-watch");
 const fs = require("fs");
 
-const runBlockJsEsbuild = (entryFile) => {
-  build({
+const transformClassNameStrings = (stringContent) => {
+  const prefix = process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX;
+
+  const classNameString = stringContent.replace(/\s+/gi, " ").split(" ");
+  const prefixedClassNames = classNameString.map((className) => {
+    if (className.includes(":")) {
+      return className
+        .split(":")
+        .map((str, index, arr) => {
+          if ((str.match(/\[/g) || []).length !== (str.match(/]/g) || []).length) {
+            return str;
+          }
+          if (
+            index === arr.length - 1 &&
+            !str.startsWith(`${prefix}-`) &&
+            !str.startsWith(`!${prefix}-`)
+          ) {
+            if (/^!/gi.test(str)) {
+              return `!${prefix}-${str.replace(/^!/gi, "")}`;
+            }
+            return `${prefix}-${str}`;
+          }
+          return str;
+        })
+        .join(":");
+    }
+    if (className.startsWith(`${prefix}-`) || className.startsWith(`!${prefix}-`)) {
+      return className;
+    } else {
+      if (/^!/gi.test(className)) {
+        return `!${prefix}-${className.replace(/^!/gi, "")}`;
+      }
+      return `${prefix}-${className}`;
+    }
+  });
+
+  return prefixedClassNames.join(" ");
+};
+const transformContent = (input) => {
+  const classNameRegex = /className([=:][_\w$]*)(["'`])([^"'`]+)\2/g;
+  const classNameWithClsxRegex = /className([=:][_\w$]*)\((.*?)\)([},])/g;
+  const classListRegex = /(classList\.[^.(,;'"]*)\(([^)]*)\)/g;
+
+  return input
+    .replace(classListRegex, (match, p1, p2, p3) => {
+      return `${p1}(${p2.replace(/(["'`])([^"'`]+)\1/g, (match, b1, b2) => {
+        return `${b1}${transformClassNameStrings(b2)}${b1}`;
+      })})`;
+    })
+    .replace(classNameRegex, (match, p1, p2, p3) => {
+      return `className${p1}${p2}${transformClassNameStrings(p3)}${p2}`;
+    })
+    .replace(classNameWithClsxRegex, (match, p1, p2, p3) => {
+      return `className${p1}(${p2.replace(/(["'`])([^"'`]+)\1/g, (match, p1, p2) => {
+        return `${p1}${transformClassNameStrings(p2)}${p1}`;
+      })})${p3}`;
+    });
+};
+
+const runBlockJsEsbuild = async (entryFile, folder) => {
+  const startTime = Date.now();
+
+  writeOnlyNew(
+    path.join(process.cwd(), "tsconfig.theme-extension.json"),
+    fs.readFileSync(path.join(config.package_root, "tsconfig.theme-extension.json"), {
+      encoding: "utf-8",
+    })
+  );
+
+  const outPath = path.join(
+    config.extension_path,
+    "assets",
+    `__pre-compiled--${folder
+      .split(/[\\/]/gi)
+      .at(-1)
+      .replace(/\.(ts)x?$/gi, "")}.js`
+  );
+  const finalPath = path.join(
+    config.extension_path,
+    "assets",
+    `${folder
+      .split(/[\\/]/gi)
+      .at(-1)
+      .replace(/\.(ts)x?$/gi, "")}.js`
+  );
+  await build({
     entryPoints: [entryFile],
+
+    // bundle: true,
+    outfile: outPath,
+    // outdir: path.join(root_dir, config.extension_path, "assets"),
+    bundle: true,
     metafile: true,
-    target: "es2020",
-    // sourcemap: "external",
     treeShaking: true,
-    // bundle: true,
-    outfile: path.join(
-      root_dir,
-      config.extension_path,
+    loader: { ".js": "jsx" },
+    minify: true,
+    tsconfig: path.join(process.cwd(), "tsconfig.theme-extension.json"),
+    format: "iife",
+    // platform: "browser",
+    legalComments: "none",
+    jsxFactory: "h",
+    jsx: "transform",
+    jsxImportSource: "preact",
+    jsxSideEffects: false,
+    keepNames: false,
+
+    // splitting: true,
+  }).catch((error) => {
+    console.error(error);
+    // eslint-disable-next-line no-process-exit
+  });
+
+  let content = fs.readFileSync(outPath, { encoding: "utf-8" });
+  if (process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX) {
+    content = transformContent(content);
+  }
+  writeCompareFile(finalPath, content);
+  if (process.env.SHOPIFY_ACCELERATE_THEME_OUTPUT_PATH) {
+    const themePath = path.join(
+      process.env.SHOPIFY_ACCELERATE_THEME_OUTPUT_PATH,
       "assets",
-      `__block--${entryFile
+      `${folder
         .split(/[\\/]/gi)
         .at(-1)
-        .replace(/\.(ts)x?$/gi, ".js")}`
-    ),
-    // outdir: path.join(root_dir, config.extension_path, "assets"),
-    minify: false,
-    ignoreAnnotations: true,
-    packages: "external",
-    format: "esm",
-    legalComments: "none",
-    keepNames: true,
-    plugins: [dtsPlugin({})],
+        .replace(/\.(ts)x?$/gi, "")}.js`
+    );
+    writeCompareFile(themePath, content);
+  }
 
-    // splitting: true,
-  })
-    .then((e) => {
-      console.log(
-        `__block--${entryFile
-          .split(/[\\/]/gi)
-          .at(-1)
-          .replace(/\.(ts)x?$/gi, ".js")} - bundled`
-      );
+  try {
+    fs.unlinkSync(outPath);
+  } catch (err) {
+    console.log(err);
+  }
+
+  console.log(
+    `[${chalk.gray(new Date().toLocaleTimeString())}]: [${chalk.magentaBright(
+      `${Date.now() - startTime}ms`
+    )}] ${chalk.magenta(`File Bundled: ${finalPath}`)}`
+  );
+  return true;
+};
+
+const buildAllBlocks = async () => {
+  return await Promise.all(
+    config.sources.blocksJs.map(async (name) => {
+      if (isBlockTs(name) && name.includes("index.ts")) {
+        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 {
+            await runBlockJsEsbuild(name, block.folder);
+          } catch (err) {
+            console.log(err);
+          }
+        }
+        return;
+      }
+      return;
     })
-    .catch((error) => {
-      console.error(error);
-      // eslint-disable-next-line no-process-exit
-    });
+  );
 };
 
-export const runEsbuild = () => {
+export const runEsbuild = async () => {
   let running = false;
-  console.log({ root_dir });
+
   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 (isBlockTs(name)) {
@@ -69,36 +196,21 @@ export const runEsbuild = () => {
 
       if (block && !block.disabled) {
         try {
-          runBlockJsEsbuild(name);
+          await runBlockJsEsbuild(`${name.replace(filename, "")}index.tsx`, block.folder);
         } catch (err) {
           console.log(err);
         }
       }
       running = false;
       return;
+    } else {
+      await buildAllBlocks();
     }
 
     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;
-    }
-  });
+  await buildAllBlocks();
+  running = false;
 };

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

@@ -236,10 +236,10 @@ declare global {
     path.join(process.cwd(), extension_path, "locales", "en.default.json"),
     JSON.stringify(translations, undefined, 2)
   );
-  writeCompareFile(
+  /*writeCompareFile(
     path.join(process.cwd(), extension_path, "snippets", "_layout.translations.liquid"),
     translationsJs
-  );
+  );*/
   writeCompareFile(path.join(folders.types, "translations.ts"), translationTypes);
 
   const dynamicJsImports = [];
@@ -289,10 +289,10 @@ declare global {
     config.targets.dynamicJs = config.targets.dynamicJs.filter((target) => target !== name);
   });
 
-  writeCompareFile(
+  /* writeCompareFile(
     path.join(process.cwd(), extension_path, "snippets", "_layout.dynamic-imports.liquid"),
     dynamicJsImports.join("\n")
-  );
+  );*/
 
   if (delete_external_snippets) {
     targets.snippets.forEach((file) => {

package/src/tailwind/tailwind-watch.ts

@@ -3,7 +3,7 @@ import child_process from "child_process";
 import fs from "fs";
 import path from "path";
 import { config, root_dir } from "../../shopify-accelerate-app";
-import { deleteFile } from "../utils/fs";
+import { deleteFile, writeCompareFile } from "../utils/fs";
 
 const watch = require("node-watch");
 
@@ -19,7 +19,7 @@ export const runTailwindCSSWatcher = () => {
     return;
   }
 
-  const filePath = path.join(root_dir, `assets`, `tailwind_pre_sort.css.liquid`);
+  const filePath = path.join(config.extension_path, `assets`, `tailwind_pre_sort.css.liquid`);
   deleteFile(filePath);
   /*= =============== Tailwind Watcher ================ */
   child_process.spawn(
@@ -44,50 +44,14 @@ export const runTailwindCSSWatcher = () => {
     ],
     {
       shell: true,
-      stdio: "inherit",
-    }
-  );
-
-  if (!resetInputFile) {
-    console.log("Tailwind Reset Input file not found");
-    return;
-  }
-  /*= =============== Tailwind Reset ================ */
-  child_process.spawn(
-    "npx",
-    [
-      "tailwindcss",
-      "--config",
-      /*hasConfig ? "tailwind.config.js" :*/ path.join(
-        package_root,
-        `src/tailwind/tailwind.config.js`
-      ),
-      "--postcss",
-      /*hasPostCss ? "postcss.config.js" :*/ path.join(
-        package_root,
-        `src/tailwind/postcss.config.js`
-      ),
-      "-i",
-      path.join(root_dir, `assets`, `_reset.css`),
-      "-o",
-      path.join(root_dir, `assets`, `reset.css.liquid`),
-    ],
-    {
-      shell: true,
-      stdio: "inherit",
+      // stdio: "inherit",
     }
   );
 
   /*= =============== Tailwind Plugin Order ================ */
-  watch(path.join(root_dir, "assets"), { recursive: false }, async (evt, name) => {
-    if (
-      !name.match(/tailwind_pre_sort.css.liquid$/) ||
-      !fs.existsSync(path.join(root_dir, "./assets/tailwind_pre_sort.css.liquid"))
-    )
-      return;
-    const file = fs.readFileSync(path.join(root_dir, "./assets/tailwind_pre_sort.css.liquid"), {
-      encoding: "utf-8",
-    });
+  watch(path.join(config.extension_path, "assets"), { recursive: false }, async (evt, name) => {
+    if (!name.match(/tailwind_pre_sort.css.liquid$/) || !fs.existsSync(filePath)) return;
+    const file = fs.readFileSync(filePath, { encoding: "utf-8" });
 
     const top = file
       .split(/\n}/gi)
@@ -129,7 +93,11 @@ export const runTailwindCSSWatcher = () => {
       }
     });
 
-    fs.writeFileSync(path.join(root_dir, `assets/tailwind.css.liquid`), content);
-    fs.writeFileSync(path.join(process.cwd(), ".tailwindorder"), classesInOrder.join("\n"));
+    writeCompareFile(path.join(config.extension_path, `assets/tailwind.css.liquid`), content);
+    if (process.env.SHOPIFY_ACCELERATE_THEME_OUTPUT_PATH) {
+      writeCompareFile(path.join(config.theme_output_path, `assets/tailwind.css.liquid`), content);
+    }
+    fs.unlinkSync(filePath);
+    writeCompareFile(path.join(process.cwd(), ".tailwindorder"), classesInOrder.join("\n"));
   });
 };

package/src/tailwind/tailwind.config.js

@@ -5,13 +5,20 @@ require("dotenv").config();
 
 module.exports = {
   content: [
-    `${process.env.THEME_PATH}/**/*{html,liquid,js,json}`,
-    `!${process.env.THEME_PATH}/**/*.css.liquid`,
-    `!${process.env.THEME_PATH}/**/*.css`,
+    `${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/**/*{html,liquid,js,json}`,
+    `!${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/**/*.css.liquid`,
+    `!${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/**/*.css`,
   ],
   darkMode: "class", // or 'media' or 'class'
   // mode: process.env.NODE_ENV ? "jit" : undefined,
   // important: true,
+  important: process.env.SHOPIFY_ACCELERATE_TAILWIND_IMPORTANT,
+  prefix: process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX
+    ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-`
+    : undefined,
+  corePlugins: {
+    preflight: false,
+  },
   mode: "jit",
   theme: {
     extend: {
@@ -20,11 +27,23 @@ module.exports = {
         xs: "427px" /*smaller than iphone pro max*/,
       },
       fontSize: {
+        8: ["9px", "1.55"],
         9: ["9px", "1.5"],
         10: ["10px", "1.5"],
         11: ["11px", "1.5"],
         12: ["12px", "1.5"],
         13: ["13px", "1.5"],
+        14: ["14px", "1.5"],
+        15: ["15px", "1.5"],
+        16: ["16px", "1.5"],
+        17: ["17px", "1.5"],
+        18: ["18px", "1.45"],
+        19: ["19px", "1.45"],
+        20: ["20px", "1.45"],
+        21: ["21px", "1.45"],
+        22: ["22px", "1.4"],
+        23: ["23px", "1.4"],
+        24: ["24px", "1.4"],
       },
       padding: {
         gutter: "var(--layout-container-gutter)",

package/tsconfig.theme-extension.json

@@ -0,0 +1,46 @@
+{
+  "compilerOptions": {
+    "exactOptionalPropertyTypes": false,
+    "noPropertyAccessFromIndexSignature": false,
+    "noUncheckedIndexedAccess": false,
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "noImplicitAny": false,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "isolatedModules": false,
+    "resolveJsonModule": false,
+    "noEmit": false,
+    "declaration": false,
+    "incremental": false,
+    "allowJs": false,
+    "experimentalDecorators": true,
+    "typeRoots": ["./node_modules/@types", "./@types/types", "./@types"],
+    "paths": {
+      "types/*": ["./@types/*"],
+      "/*": ["./*"],
+      "react": ["./node_modules/preact/compat/"],
+      "react-dom": ["./node_modules/preact/compat/"]
+    },
+    "strict": false,
+    "strictNullChecks": false,
+    "strictPropertyInitialization": false,
+    "jsx": "react-jsx",
+    "target": "es6",
+    "lib": ["dom", "es2015", "dom.iterable"],
+    "noEmitHelpers": true,
+    "importHelpers": true,
+    "jsxImportSource": "preact",
+    "types": ["preact/jsx-runtime", "react", "@types/node", "node"],
+    "baseUrl": ".",
+    "sourceMap": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "downlevelIteration": true,
+    "noImplicitReturns": false,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["theme-extension/**/*.ts", "theme-extension/**/*.tsx", "utils/**/*.tsx", "theme-extension/**/*.svg"],
+  "exclude": ["node_modules"]
+}