@softlimit/theme-envy 0.1.2-alpha → 0.1.4-alpha

package/.github/workflows/release-please.yml

@@ -1,7 +1,5 @@
 on:
-  push:
-    branches:
-      - main
+  workflow_dispatch:
 
 permissions:
   contents: write

package/README.md

@@ -4,7 +4,7 @@
 <!-- omit in toc -->
 ## _The lean, mean development machine for your Shopify themes_
 
-[![Built by Softlimit](https://cdn.shopify.com/s/files/1/0581/4760/2587/files/softlimit-app-icons-03.png?v=1680017399)](https://www.softlimit.com/)
+[<img src="https://cdn.shopify.com/s/files/1/0581/4760/2587/files/Built_by_Softlimit_-_Orange.png?v=1681137186" width="140px" alt="Built by Softlimit">](https://www.softlimit.com/)
 
 Theme Envy is a feature-rich, performance-optimized Shopify theme development environment. With the extended liquid tools, you can move beyond liquid snippets with repeatable code. Theme Envy compiles everything for you using a combination of custom build processes, Node, Webpack, and Tailwind.
 <!-- omit in toc -->

package/build/functions/get-all.js

@@ -11,69 +11,87 @@
   */
 const path = require('path')
 const glob = require('glob')
-const parentThemeFiles = require('./parent-theme-files')
+const parentThemeFiles = require('./parent-theme/parent-theme-files')
+
+// ignore node_modules in globs
+const globSync = (src, pattern) => glob.sync(path.resolve(src, pattern), {
+  ignore: {
+    ignored: p => {
+      // ignore node_modules in parent theme but not the parent theme itself (within node_modules)
+      if (ThemeEnvy.parentTheme) {
+        return p.fullpath().includes(path.resolve(ThemeEnvy.parentTheme.path, 'node_modules')) ? true : p.fullpath().includes('node_modules') && !p.fullpath().includes(ThemeEnvy.parentTheme.path)
+      }
+      return p.fullpath().includes('node_modules')
+    },
+  }
+})
 
 const globs = {
   assets: {
     glob(src) {
-      return glob.sync(path.resolve(src, '**/assets/**/*'))
+      return globSync(src, '**/assets/**/*')
     },
   },
   config: {
     glob(src) {
-      return glob.sync(path.resolve(src, '**/config/**/*.js'))
+      return globSync(src, '**/config/**/*.js')
     },
     filter: file => path.basename(file) !== 'settings_schema.js',
   },
   criticalCSS: {
     glob(src) {
-      return glob.sync(path.resolve(src, '**/critical.css'))
+      return globSync(src, '**/critical.css')
     },
   },
   elements: {
     glob(src) {
-      return [...glob.sync(path.resolve(src, '**/elements/**/index.js')), ...glob.sync(path.resolve(src, '**/elements/*.js'))]
+      return [...globSync(src, '**/elements/**/index.js'), ...globSync(src, '**/elements/*.js')]
     }
   },
   features: {
     glob(src) {
-      return glob.sync(path.resolve(src, 'theme-envy/features/**/index.js'))
+      return globSync(src, '**/features/**/index.js')
     },
   },
   installs: {
     glob(src) {
-      return glob.sync(path.resolve(src, '**/install.js'))
+      return globSync(src, '**/install.js')
     },
   },
   liquid: {
     glob(src) {
-      return glob.sync(path.resolve(src, '**/*.liquid'))
+      return globSync(src, '**/*.liquid')
     },
     filter: file => !file.includes('partials'),
   },
+  locales: {
+    glob(src) {
+      return globSync(src, '**/locales/**/*.json')
+    }
+  },
   partials: {
     glob(src) {
-      return glob.sync(path.resolve(src, '**/partials/**/*.liquid'))
+      return globSync(src, '**/partials/**/*.liquid')
     },
   },
   schema: {
     glob(src) {
-      return glob.sync(path.resolve(src, '**/schema/**/*.js'))
+      return globSync(src, '**/schema/**/*.js')
     },
   },
   sectionGroups: {
     glob(src) {
-      return glob.sync(path.resolve(src, '**/sections/**/*.json'))
+      return globSync(src, '**/sections/**/*.json')
     },
   },
   snippets: {
     glob(src) {
-      return glob.sync(path.resolve(src, '**/snippets/**/*.liquid'))
+      return globSync(src, '**/snippets/**/*.liquid')
     },
   },
   templates: {
     glob(src) {
-      return glob.sync(path.resolve(src, '**/templates/**/*.json'))
+      return globSync(src, '**/templates/**/*.json')
     },
   },
 }
@@ -81,16 +99,17 @@ const globs = {
 module.exports = function(type) {
   function getFiles(src, only) {
     // src is either the themePath or the parentTheme
-    // only is a list of directory names to filter against, used for parentTheme
+    // only is a list of directory paths to filter against, used for parentTheme
     let files = globs[type].glob(src)
     if (only) {
       files = files.filter(file => {
-        return only.some(dir => file.indexOf(dir) > -1)
+        return only.some(dir => file.includes(`${dir}/`) || file.includes(`${dir}.js`))
       })
     }
     if (globs[type].filter) {
       files = files.filter(globs[type].filter)
     }
+
     return files
   }
   const files = getFiles(ThemeEnvy.themePath)

package/build/functions/index.js

@@ -1,7 +1,6 @@
 module.exports = {
   getAll: require('./get-all'),
   liquid: require('./liquid'),
-  tailwind: require('./tailwind'),
   themeEnvy: require('./theme-envy'),
   webpack: require('./webpack'),
 }

package/build/functions/liquid/functions/list-dependencies.js

@@ -22,7 +22,7 @@ const listDependencies = ({ filePath, source }) => {
     const action = tag[2]
     const name = tag[3]
     if (action === 'partial') {
-      const file = globbedPartials.filter(partial => partial.includes(`/${`${name}.liquid`}`))
+      const file = globbedPartials.filter(partial => path.basename(partial) === `${name}.liquid`)
       // if partialPath doesn't return anything, exit process and output error
       if (file.length === 0) {
         console.log(`\n${logSymbols.error} ${chalk.red.bold('Error:')}\n\n${chalk.red(`${name}.liquid`)} partial file not found, referenced in:\n${chalk.dim.underline(filePath)}\n\nTo resolve, confirm the partial file exists and that the file\nname reference in the {% partial %} tag matches the partial file.\n`)

package/build/functions/liquid/functions/section-schema-inject.js

@@ -1,21 +1,61 @@
 /**
   * @file Prebuild helper script that will inject the schema js file into the corresponding sections/*.liquid file
+  * also injects installs for blocks/section schema
   * @example
   * // include the schema in the section liquid file
   * {% schema 'schema-file.js' %}
   */
+const path = require('path')
+const { parseSchema } = require('#Helpers')
 
 module.exports = function({ source, filePath }) {
   if (!filePath.includes('sections')) return source
-  const schema = source.match(/{% schema '(.*)' %}/g) || source.match(/{% schema "(.*)" %}/g)
-  // if there are no schema tags with a filename string, return
-  if (!schema) return source
+  // inject installs into inlined schema with {% schema %} {% endschema %} tags
+  const hasSchemaTag = source.match(/{% schema %}/g)
+  if (hasSchemaTag) return injectInstallsSchema({ source, filePath })
+  // inject schema from file into schema with {% schema 'filename.js' %} tags
+  const hasJsSchema = source.match(/{% schema '(.*)' %}/g) || source.match(/{% schema "(.*)" %}/g)
+  if (hasJsSchema) return injectJsSchema({ source, filePath, schema: hasJsSchema })
+  // if neither of the above...
+  return source
+}
+
+function injectJsSchema({ source, filePath, schema }) {
   // regexp for a quoted string within our schema match
   const schemaFile = schema[0].match(/'(.*)'/)[1] || schema[0].match(/"(.*)"/)[1]
   // load the file export
   const schemaSource = ThemeRequire(schemaFile, { loader: filePath })
+  // check for installs
+  const schemaWithInjections = checkInstalls({ schema: schemaSource, filePath })
   // replace the {% schema %} tag with the schema string and update asset
-  return source.replace(schema[0], formatSchema(schemaSource))
+  return source.replace(schema[0], formatSchema(schemaWithInjections))
+}
+
+function injectInstallsSchema({ source, filePath }) {
+  // split our schema tag from the rest of the file
+  const { schema, schemaStart, schemaEnd } = parseSchema(source)
+  const schemaWithInjections = checkInstalls({ schema, filePath })
+  // replace everything between schemaStart and schemaEnd with the new schema
+  source = source.replace(source.substring(schemaStart, schemaEnd + String('{% endschema %}').length), formatSchema(schemaWithInjections))
+  return source
+}
+
+function checkInstalls({ schema, filePath }) {
+  // check our schema from install.js files and inject into schema
+  const sectionName = `${path.basename(path.dirname(filePath))}/${path.basename(filePath)}`
+  if (!ThemeEnvy.schema || !ThemeEnvy.schema[sectionName]) return schema
+
+  if (ThemeEnvy.schema[sectionName].settings) {
+    schema.settings = schema.settings || []
+    schema.settings = [...schema.settings, ...ThemeEnvy.schema[sectionName].settings]
+  }
+
+  if (ThemeEnvy.schema[sectionName].blocks) {
+    schema.blocks = schema.blocks || []
+    schema.blocks = [...schema.blocks, ...ThemeEnvy.schema[sectionName].blocks]
+  }
+
+  return schema
 }
 
 function formatSchema(schema) {

package/build/functions/parent-theme/index.js

@@ -0,0 +1,77 @@
+/**
+ * @private
+ * @file Checks for a parent theme in node_modules or relative path and sets ThemeEnvy.parentTheme to the path
+ */
+
+const fs = require('fs-extra')
+const path = require('path');
+
+(() => {
+  const ThemeConfigPath = path.resolve(process.cwd(), 'theme.config.js')
+  if (!fs.existsSync(ThemeConfigPath)) return
+  ThemeEnvy.childPreferred = ThemeEnvy.childPreferred || []
+
+  // look for parent theme in node_modules
+  const parentThemePath = ThemeEnvy.parentTheme?.path
+  if (!parentThemePath) {
+    removeParentThemeReference()
+    return
+  }
+  const parentThemePkg = fs.existsSync(path.resolve(process.cwd(), 'node_modules', parentThemePath))
+    ? path.resolve(process.cwd(), 'node_modules', parentThemePath)
+    : false
+  // look for parent theme in relative path
+  const parentThemeRelative = fs.existsSync(path.resolve(process.cwd(), parentThemePath))
+    ? path.resolve(process.cwd(), parentThemePath)
+    : false
+  // prefer node_modules over relative path
+  const parentTheme = parentThemePkg || parentThemeRelative
+
+  if (!parentTheme) {
+    removeParentThemeReference()
+    return
+  }
+  ThemeEnvy.parentTheme.path = parentTheme
+  // define elements and features arrays
+  ThemeEnvy.parentTheme.elements = listFeaturesOrElements({ type: 'elements' })
+  ThemeEnvy.parentTheme.features = listFeaturesOrElements({ type: 'features' })
+})()
+
+function removeParentThemeReference() {
+  delete ThemeEnvy.parentTheme
+}
+
+function listFeaturesOrElements({ type }) {
+  // get parentTheme config
+  const parentConfig = require(path.resolve(ThemeEnvy.parentTheme.path, 'parent.config.js'))
+  // get parentTheme theme-envy directory path
+  const parentThemeEnvyDir = path.resolve(ThemeEnvy.parentTheme.path, 'src/theme-envy')
+
+  const elementsOrFeatures = fs.readdirSync(path.resolve(parentThemeEnvyDir, type))
+    .filter(file => {
+      // remove items that are in the parent.config.js exclude array
+      if (!parentConfig[type]?.exclude) return true
+      return parentConfig[type].exclude.includes(path.parse(file).name) === false
+    })
+    .filter(file => {
+      // remove items that are in theme.config.js exclude array
+      if (!ThemeEnvy.parentTheme[type]?.exclude) return true
+      return ThemeEnvy.parentTheme[type]?.exclude.includes(path.parse(file).name) === false
+    })
+    .map(file => path.resolve(parentThemeEnvyDir, type, file).replace('.js', ''))
+
+  // add items that are in the include array of the child theme
+  if (ThemeEnvy.parentTheme[type]?.include) {
+    ThemeEnvy.parentTheme[type].include.forEach(item => {
+      if (!elementsOrFeatures.includes(item)) {
+        // check if the item exists in the parent theme
+        if (!fs.existsSync(path.resolve(parentThemeEnvyDir, type, item))) {
+          console.error(`The ${item} ${type} does not exist in the parent theme`)
+          return
+        }
+        elementsOrFeatures.push(path.resolve(ThemeEnvy.parentTheme.path, 'theme-envy', type, item))
+      }
+    })
+  }
+  return elementsOrFeatures
+}

package/build/functions/parent-theme/parent-theme-files.js

@@ -0,0 +1,47 @@
+/**
+  * Get all files from the parent theme that are not in the child
+  * @private
+  * @param {function} func - function to get files with a glob, should return an array of file paths
+  * @param {array} childFiles - array of file paths from the child theme that we check against
+  * @returns {array} - array of file paths from the parent theme that are not in the child
+*/
+const path = require('path')
+const { directories } = require('#EnsureDirectories')
+// sets resolved parent theme path
+require('./index.js')
+
+module.exports = (func, childFiles, type) => {
+  const childRelative = childFiles.map(file => path.relative(ThemeEnvy.themePath, file))
+  // get all files from the parent theme, using only elements and features directories in parent theme
+  let only = [...ThemeEnvy.parentTheme.elements, ...ThemeEnvy.parentTheme.features]
+
+  if (type === 'elements') {
+    only = ThemeEnvy.parentTheme.elements
+  }
+  if (type === 'features') {
+    only = ThemeEnvy.parentTheme.features
+  }
+  if (type === 'schema') {
+    only.push(path.resolve(ThemeEnvy.parentTheme.path, 'src/theme-envy/schema'))
+  }
+  if (type === 'liquid') {
+    only.push(...directories.map(dir => path.resolve(ThemeEnvy.parentTheme.path, 'src', dir)))
+  }
+  if (type === 'sectionGroups') {
+    only.push(path.resolve(ThemeEnvy.parentTheme.path, 'src/sections'))
+  }
+  if (type === 'config') {
+    only.push(path.resolve(ThemeEnvy.parentTheme.path, 'src/config'))
+  }
+  if (type === 'locales') {
+    only.push(path.resolve(ThemeEnvy.parentTheme.path, 'src/locales'))
+  }
+  if (type === 'templates') {
+    only.push(path.resolve(ThemeEnvy.parentTheme.path, 'src/templates'))
+  }
+  if (type === 'criticalCSS') {
+    only.push(path.resolve(ThemeEnvy.parentTheme.path, 'src/styles'))
+  }
+
+  return func(ThemeEnvy.parentTheme.path, only).filter(file => !childRelative.includes(path.relative(ThemeEnvy.parentTheme.path, file)))
+}

package/build/functions/webpack-plugins/retry-chunk-load-plugin.js

@@ -0,0 +1,88 @@
+const prettier = require('prettier')
+const { RuntimeGlobals } = require('webpack')
+
+const pluginName = 'RetryChunkLoadPlugin'
+
+class RetryChunkLoadPlugin {
+  constructor(options = {}) {
+    this.options = Object.assign({}, options)
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
+      const { mainTemplate, runtimeTemplate } = compilation
+      const maxRetryValueFromOptions = Number(this.options.maxRetries)
+      const maxRetries =
+        Number.isInteger(maxRetryValueFromOptions) &&
+        maxRetryValueFromOptions > 0
+          ? maxRetryValueFromOptions
+          : 1
+      // const getCacheBustString = () =>
+      //   this.options.cacheBust
+      //     ? `
+      //             (${this.options.cacheBust})();
+      //           `
+      //     : '"cache-bust=true"'
+      mainTemplate.hooks.localVars.tap(
+        { name: pluginName, stage: 1 },
+        (source, chunk) => {
+          const currentChunkName = chunk.name
+          const addRetryCode =
+            !this.options.chunks ||
+            this.options.chunks.includes(currentChunkName)
+          if (!addRetryCode) return source
+          const script = runtimeTemplate.iife(
+            '',
+            `
+          if(typeof ${RuntimeGlobals.require} !== "undefined") {
+            var oldGetScript = ${RuntimeGlobals.getChunkScriptFilename};
+            var oldLoadScript = ${RuntimeGlobals.ensureChunk};
+            var queryMap = new Map();
+            var countMap = new Map();
+            ${RuntimeGlobals.getChunkScriptFilename} = function(chunkId){
+              var result = oldGetScript(chunkId);
+              return result + (queryMap.has(chunkId) ? '?' + queryMap.get(chunkId)  : '');
+            };
+            ${RuntimeGlobals.ensureChunk} = function(chunkId){
+              var result = oldLoadScript(chunkId);
+              return result.catch(function(error){
+                var retries = countMap.has(chunkId) ? countMap.get(chunkId) : ${maxRetries};
+                if (retries < 1) {
+                  var realSrc = oldGetScript(chunkId);
+                  error.message = 'Loading chunk ' + chunkId + ' failed after ${maxRetries} retries.\\n(' + realSrc + ')';
+                  error.request = realSrc;${
+                    this.options.lastResortScript
+                      ? this.options.lastResortScript
+                      : ''
+                  }
+                  throw error;
+                }
+                return new Promise(function (resolve) {
+                  setTimeout(function () {
+                    var retryAttempt = ${maxRetries} - retries + 1;
+                    var retryAttemptString = '&retry-attempt=' + retryAttempt;
+                    const cacheBust = Date.now();
+                    queryMap.set(chunkId, cacheBust);
+                    countMap.set(chunkId, retries - 1);
+                    resolve(${RuntimeGlobals.ensureChunk}(chunkId));
+                  }, ${this.options.retryDelay || this.options.timeout || 0})
+                })
+              });
+            };
+          }`
+          )
+          return (
+            source +
+            prettier.format(script, {
+              trailingComma: 'es5',
+              singleQuote: true,
+              parser: 'babel'
+            })
+          )
+        }
+      )
+    })
+  }
+}
+
+module.exports.RetryChunkLoadPlugin = RetryChunkLoadPlugin

package/build/functions/webpack.js

@@ -8,6 +8,7 @@
   * @returns {Promise}
   */
 
+const path = require('path')
 const webpack = require('webpack')
 const getAll = require('./get-all')
 
@@ -25,12 +26,34 @@ module.exports = function({ mode, opts }) {
     webpackConfig.watch = watch
     // merge our theme config named entries into webackConfig.entry
     webpackConfig.entry = { ...webpackConfig.entry, ...ThemeEnvy.entry }
+    // merge our theme config resolve aliases into webpackConfig.resolve.alias
+    if (ThemeEnvy.resolve?.alias) webpackConfig.resolve.alias = { ...webpackConfig.resolve.alias, ...ThemeEnvy.resolve.alias }
 
+    if (ThemeEnvy?.tailwind !== false) {
+      // if tailwind is enabled, we need to add our critical css to the entry list
+      webpackConfig.entry['theme-envy.critical'] = [`${ThemeEnvy.paths.build}/requires/styles/theme-envy.css`]
+    }
     if (ThemeEnvy?.tailwind === false && getAll('criticalCSS').length > 0) {
       // if tailwind is disabled, we need to add our critical css to the entry list
-      webpackConfig.entry['theme-envy.critical'] = `${ThemeEnvy.paths.build}/requires/styles/theme-envy.css`
+      webpackConfig.entry['theme-envy.critical'] = [`${ThemeEnvy.paths.build}/requires/styles/theme-envy.css`]
     }
 
+    // check for Aliases and Entries in parent theme parent.config.js and merge them with our own
+    if (ThemeEnvy.parentTheme) {
+      const parentThemeConfig = require(path.resolve(ThemeEnvy.parentTheme.path, 'parent.config.js'))
+      // merge parent theme aliases into webpackConfig.resolve.alias
+      if (parentThemeConfig.resolve?.alias) webpackConfig.resolve.alias = { ...webpackConfig.resolve.alias, ...parentThemeConfig.resolve.alias }
+      // iterate over parent theme entries and add them to webpackConfig.entry, merging with our own into an array if necessary
+      if (parentThemeConfig.entry) {
+        for (const [key, value] of Object.entries(parentThemeConfig.entry)) {
+          if (webpackConfig.entry[key]) {
+            webpackConfig.entry[key] = [...webpackConfig.entry[key], ...value]
+          } else {
+            webpackConfig.entry[key] = [...value]
+          }
+        }
+      }
+    }
     webpack(webpackConfig, (err, stats) => {
       if (err || stats.hasErrors()) {
         console.log(stats, err)

package/build/index.js

@@ -15,14 +15,15 @@
 const path = require('path')
 const chalk = require('chalk')
 const emoji = require('node-emoji')
-const { themeEnvy, webpack, tailwind } = require('#Build/functions')
+const { themeEnvy, webpack } = require('#Build/functions')
 const { distClean } = require('#Helpers')
 
 module.exports = async function(env, opts = {}) {
   const mode = env || 'production'
+  process.env.mode = mode
 
   // empty dist folder for a clean build, do not log the clean message
-  distClean({ quiet: true })
+  if (opts.clean || !opts.watch) distClean({ quiet: true })
 
   // our pretty build message
   const relativeDistPath = path.relative(process.cwd(), ThemeEnvy.outputPath)
@@ -37,8 +38,6 @@ module.exports = async function(env, opts = {}) {
 
   await themeEnvy({ mode, opts })
 
-  if (ThemeEnvy?.tailwind !== false) await tailwind({ mode, opts })
-
   await webpack({ mode, opts })
 
   ThemeEnvy.events.emit('build:complete')

package/build/requires/assets.js

@@ -4,9 +4,8 @@
 
 const fs = require('fs-extra')
 const path = require('path')
-const glob = require('glob')
-
-const assets = glob.sync(path.resolve(ThemeEnvy.themePath, '**/assets/**/*.*'))
+const { getAll } = require('#Build/functions')
+const assets = getAll('assets')
 
 // if dist/assets doesn't exist create it
 fs.ensureDirSync(path.resolve(ThemeEnvy.outputPath, 'assets'))

package/build/requires/globals/index.js

@@ -4,7 +4,6 @@
  */
 
 require('./progress-bar')
-require('./parent-theme')
 require('./theme-require')
 require('./prepare-install-hooks-schema')
 ThemeEnvy.progress.increment('globals')

package/build/requires/globals/prepare-install-hooks-schema.js

@@ -43,7 +43,6 @@ const path = require('path');
     }
   })
 
-  // TODO: LOOK INTO THIS
   schema.forEach(entry => {
     const file = `${entry.file}.liquid`
     ThemeEnvy.schema[file] = ThemeEnvy.schema[file] || {
@@ -53,6 +52,6 @@ const path = require('path');
     // add the schema to the destination, process entry.content for softlimit partials
     // target is either 'settings' or 'blocks'
     const target = entry.target.split('.')[1]
-    ThemeEnvy.schema[file][target].push(entry.content)
+    ThemeEnvy.schema[file][target] = [...ThemeEnvy.schema[file][target], ...entry.content]
   })
 })()

package/build/requires/globals/progress-bar.js

@@ -16,10 +16,9 @@ const colors = require('ansi-colors');
     failedHookInstalls: 1,
     globals: 1,
     liquid: getAll('liquid').length,
-    locales: 1,
+    locales: getAll('locales').length,
     requires: 7,
     sectionGroups: 1,
-    tailwind: ThemeEnvy?.tailwind !== false ? 1 : 0,
     templates: getAll('templates').length,
     webpack: 1,
   }

package/build/requires/globals/theme-require.js

@@ -33,7 +33,9 @@ ThemeEnvy.events.on('watch:start', () => {
 })
 
 const ThemeRequire = (file, options) => {
-  // check for file in our pre-globbed arrays
+  // assume files are javascript if no extension given
+  if (!path.extname(file)) file = `${file}.js`
+
   const ref = getFile(file)
 
   if (ref.length === 0) {
@@ -87,10 +89,10 @@ const ThemeRequire = (file, options) => {
     content = schemaExtend(content, options.extend)
   }
   if (options?.loop) {
-    content = schemaLoop(file, content, options.loop)
+    content = schemaLoop(content, options.loop)
   }
   if (options?.suffix) {
-    content = schemaSuffix(file, content, options.suffix)
+    content = schemaSuffix(content, options.suffix)
   }
 
   if (options?.loader) {
@@ -101,7 +103,7 @@ const ThemeRequire = (file, options) => {
   return content
 }
 
-function schemaDelete(file, src, del) {
+function schemaDelete(src, del) {
   const replaceWith = src.filter(entry => {
     if (entry.settings) {
       entry.settings = schemaDelete(entry.settings, del)
@@ -130,7 +132,7 @@ function schemaExtend(src, exts) {
   return replaceWith
 }
 
-function schemaLoop(file, src, loop) {
+function schemaLoop(src, loop) {
   const replaceWith = []
   for (let i = 1; i < (loop + 1); i++) {
     const srcCopy = parseJson(src)
@@ -145,7 +147,7 @@ function schemaLoop(file, src, loop) {
   return replaceWith
 }
 
-function schemaSuffix(file, src, suffix) {
+function schemaSuffix(src, suffix) {
   const replaceWith = parseJson(src)
   replaceWith.map(entry => {
     if (entry.id) entry.id = `${entry.id}_${suffix}`
@@ -165,8 +167,8 @@ function getFile(file) {
     return getSchemaFile(file)
   } else {
     const res = glob.sync(path.resolve(ThemeEnvy.themePath, `**/${file}`))
-    if (ThemeEnvy.parentTheme && res.length === 0) {
-      res.push(...glob.sync(path.resolve(ThemeEnvy.parentTheme, `**/${file}`)))
+    if (ThemeEnvy.parentTheme.path && res.length === 0) {
+      res.push(...glob.sync(path.resolve(ThemeEnvy.parentTheme.path, `**/${file}`)))
     }
     return res
   }
@@ -176,7 +178,7 @@ function getFile(file) {
   @param src [object] - the file contents to be extended
   @param schemaRef [string] - source schema file name being extended
 */
-function parseJson(src, schemaRef) {
+function parseJson(src) {
   try {
     return JSON.parse(JSON.stringify(src))
   } catch (error) {

package/build/requires/locales.js

@@ -3,14 +3,19 @@
 */
 const fs = require('fs-extra')
 const path = require('path')
+const { getAll } = require('#Build/functions')
 
-// if dist/locales does not exist, create it
+const locales = getAll('locales')
+
+// if dist/locales doesn't exist create it
 fs.ensureDirSync(path.resolve(ThemeEnvy.outputPath, 'locales'))
 
-try {
-  fs.copySync(path.resolve(ThemeEnvy.themePath, 'locales'), path.resolve(ThemeEnvy.outputPath, 'locales'))
-  // update progress bar
-  ThemeEnvy.progress.increment('locales')
-} catch (err) {
-  console.error(err)
-}
+locales.forEach(locale => {
+  try {
+    fs.copySync(locale, path.resolve(ThemeEnvy.outputPath, 'locales', path.basename(locale)))
+    // update progress bar
+    ThemeEnvy.progress.increment('locales', 1)
+  } catch (err) {
+    console.error(err)
+  }
+})

package/build/requires/scripts/script-builders/elements.build.js

@@ -7,38 +7,46 @@ const path = require('path')
 const fs = require('fs-extra')
 const { getAll } = require('#Build/functions')
 const elements = getAll('elements').map(file => {
-  const name = path.basename === 'index.js' ? path.basename(path.dirname(file)) : path.basename(file, '.js')
+  const name = path.basename(file) === 'index.js' ? path.basename(path.dirname(file)) : path.basename(file, '.js')
   return `'${name}': () => import(/* webpackChunkName: "${name}" */ '${file}')`
 })
 
 const markup = elements.length
-  ? `const elements = {${elements.join(',\n')}}
+  ? `const elements = {
+  ${elements.join(',\n  ')}}
 // check all elements for presence in the Document and load if they are there
-Object.entries(elements).forEach(elm => {
-  const domElm = document.querySelector(elm[0])
-  if (domElm) {
-    if (domElm.getAttribute('loading') === 'lazy') {
-      const observer = new IntersectionObserver((entries, observer) => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            loadElement(elm)
-            domElm.setAttribute('loading', 'loaded')
-            observer.disconnect()
-          }
-        })
-      }, { rootMargin: '0px 0px 500px 0px', threshold: 0 })
-      observer.observe(domElm)
-      return
-    } 
-    loadElement(elm)
-  }
-})
+function dynamicElements() {
+  Object.entries(elements).forEach(elm => {
+    const domElm = document.querySelector(elm[0])
+    if (domElm) {
+      if (domElm.getAttribute('loading') === 'lazy') {
+        const observer = new IntersectionObserver((entries, observer) => {
+          entries.forEach(entry => {
+            if (entry.isIntersecting) {
+              loadElement(elm)
+              domElm.setAttribute('loading', 'loaded')
+              observer.disconnect()
+            }
+          })
+        }, { rootMargin: '0px 0px 500px 0px', threshold: 0 })
+        observer.observe(domElm)
+        return
+      }
+      loadElement(elm)
+    }
+  })
+}
+dynamicElements()
 function loadElement(elm) {
   // load the element
   elm[1]()
   // remove from Object so we don't need to check again
   delete elements[elm[0]]
 }
+// eslint-disable-next-line no-undef
+if (Shopify.designMode) {
+  document.addEventListener('shopify:section:load', dynamicElements)
+}
 `
   : ''
 fs.writeFileSync(path.resolve(__dirname, '../elements.js'), markup, 'utf8')

package/build/requires/styles/styles-builders/theme-envy.css.js

@@ -4,7 +4,11 @@ const getAll = require('#Build/functions/get-all.js')
 
 const criticalCSS = getAll('criticalCSS')
 
-const markup = `${ThemeEnvy.tailwind !== false ? "@import './tailwind-base.css'" : ''};
+const markup = `${ThemeEnvy.tailwind !== false
+? `@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';`
+: ''}
 ${criticalCSS.map(file => `@import '${file}';`).join('\n')}
 `
 

package/build/theme-envy.config.js

@@ -1,12 +1,14 @@
+const path = require('path')
+
+const { EsbuildPlugin } = require('esbuild-loader')
+const { RetryChunkLoadPlugin } = require('./functions/webpack-plugins/retry-chunk-load-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const TerserPlugin = require('terser-webpack-plugin')
 const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts')
-const { ESBuildMinifyPlugin } = require('esbuild-loader')
-const path = require('path')
+const TerserPlugin = require('terser-webpack-plugin')
 
 module.exports = {
   entry: {
-    'theme-envy': path.resolve(__dirname, 'requires/scripts/theme-envy.js'),
+    'theme-envy': [path.resolve(__dirname, 'requires/scripts/theme-envy.js')],
   },
   output: {
     path: path.resolve(ThemeEnvy.outputPath, 'assets'),
@@ -25,6 +27,7 @@ module.exports = {
       return '[name].js?h=[contenthash:5]'
     }
   },
+  devtool: false,
   module: {
     rules: [
       {
@@ -44,7 +47,7 @@ module.exports = {
     sideEffects: false,
     minimizer: [
       (process.env.mode === 'production')
-        ? new ESBuildMinifyPlugin({
+        ? new EsbuildPlugin({
           target: 'es2015', // Syntax to compile to (see options below for possible values)
         })
         : new TerserPlugin({
@@ -56,16 +59,24 @@ module.exports = {
     alias: {
       Build: ThemeEnvy.paths.build,
       Helpers: ThemeEnvy.paths.helpers,
-      Elements: path.resolve(ThemeEnvy.themePath, 'theme-envy/elements/'),
-      Features: path.resolve(ThemeEnvy.themePath, 'theme-envy/features/'),
       Root: path.resolve(process.cwd()),
       Scripts: path.resolve(ThemeEnvy.themePath, 'scripts/'),
     },
+    modules: ['node_modules'],
+  },
+  resolveLoader: {
+    modules: ['node_modules'],
   },
   plugins: [
     new RemoveEmptyScriptsPlugin(),
     new MiniCssExtractPlugin({
       filename: '[name].css?h=[chunkhash:5]',
     }),
+    new RetryChunkLoadPlugin({
+      // optional value to set the amount of time in milliseconds before trying to load the chunk again. Default is 0
+      retryDelay: 0,
+      // optional value to set the maximum number of retries to load the chunk. Default is 1
+      maxRetries: 3
+    }),
   ]
 }

package/helpers/functions/parse-schema.js

@@ -0,0 +1,20 @@
+const strings = {
+  schemaStart: '{% schema %}',
+  schemaEnd: '{% endschema %}',
+}
+
+module.exports = function(source, file) {
+  const schemaStart = source.indexOf(strings.schemaStart)
+  const schemaEnd = source.indexOf(strings.schemaEnd)
+  if (schemaStart === -1 || schemaEnd === -1) return source
+  try {
+    return {
+      schema: JSON.parse(source.slice(schemaStart + strings.schemaStart.length, schemaEnd)),
+      schemaStart,
+      schemaEnd
+    }
+  } catch (error) {
+    console.error(file, error)
+    process.exit()
+  }
+}

package/helpers/functions/pull-json.js

@@ -12,7 +12,7 @@ const { spawn } = require('child_process')
 
 module.exports = function() {
   const relativeDistPath = path.relative(process.cwd(), ThemeEnvy.outputPath)
-  const themePull = ['theme', 'pull', `--store=${ThemeEnvy.store}`, `--path=${relativeDistPath}`, '--only=templates/*.json,config/settings_data.json,sections/*.json']
+  const themePull = ['theme', 'pull', `--store=${ThemeEnvy.store}`, `--path=${relativeDistPath}`]
   const shopify = spawn('shopify', themePull, { cwd: ThemeEnvy.outputPath, stdio: 'inherit' })
 
   shopify.on('exit', function() {

package/helpers/index.js

@@ -5,6 +5,7 @@ module.exports = {
   globalThemeEnvy: require('./functions/global-theme-envy.js'),
   liquidPrettify: require('./functions/liquid-prettify.js'),
   liquidTree: require('./functions/liquid-tree'),
+  parseSchema: require('./functions/parse-schema.js'),
   pullJson: require('./functions/pull-json.js'),
   scaffoldNew: require('./functions/scaffold-new'),
 }

package/index.js

@@ -116,6 +116,7 @@ program
   .description('Build Shopify theme')
   .usage('[development|production] -w|--watch')
   .addArgument(new commander.Argument('[env]', 'Specify the build environment to run').choices(['development', 'production']))
+  .option('-c, --clean', 'Clean output directory before building')
   .option('-w, --watch', 'Watch for changed files and update dist, serve with Shopify CLI')
   .option('-v, --verbose', 'Show Tailwind and Webpack in output')
   .action((env, options, command) => {

package/init/functions/copy-starter-config-files/configs/postcss.config.js

@@ -1,9 +1,9 @@
 module.exports = {
-  plugins: [
-    require('postcss-import'),
-    require('tailwindcss/nesting'),
-    require('tailwindcss'),
-    require('autoprefixer'),
-    require('cssnano')
-  ]
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+    cssnano: {}
+  }
 }

package/init/functions/copy-starter-config-files/configs/tailwind.config.js

@@ -2,15 +2,29 @@
  * @private
  * @type {import('tailwindcss').Config}
  */
-const theme = require('./theme.config.js')
 const path = require('path')
 const ThemeEnvy = require('./theme.config.js')
 
-module.exports = {
-  content: [path.resolve(ThemeEnvy.themePath, '**/*.{liquid,js}')],
+const config = {
+  content: [
+    path.resolve(ThemeEnvy.themePath, '**/*.{liquid,js}'),
+  ],
   theme: {
     extend: {},
   },
-  screens: theme.breakpoints,
+  screens: ThemeEnvy.breakpoints,
   plugins: [],
 }
+
+// merge parentTheme tailwind config if it exists
+if (ThemeEnvy.parentTheme?.path) {
+  const parentTailwind = require(path.join(path.dirname(require.resolve(ThemeEnvy.parentTheme.path)), 'tailwind.config.js'))
+  // deep merge parentTheme tailwind config with child theme tailwind config
+  if (parentTailwind) {
+    config.theme.extend = Object.assign(config.theme.extend, parentTailwind.theme.extend)
+    config.plugins = config.plugins.concat(parentTailwind.plugins)
+    config.content = config.content.concat(parentTailwind.content)
+  }
+}
+
+module.exports = config

package/init/functions/copy-starter-config-files/configs/theme.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   entry: {
-    // main: './src/scripts/main.js',
+    // main: ['./src/scripts/main.js'],
   },
   store: 'my-store.myshopify.com',
   themePath: 'src',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softlimit/theme-envy",
-  "version": "0.1.2-alpha",
+  "version": "0.1.4-alpha",
   "description": "Softlimit Shopify Theme Development Environment",
   "bin": {
     "theme-envy": "./index.js"
@@ -28,7 +28,6 @@
     "#Init/functions": "./init/functions/index.js",
     "#Init/functions/*": "./init/functions/*",
     "#LogSymbols": "./helpers/functions/log-symbols.js",
-    "#ParentTheme": "./parent-theme/index.js",
     "#Root/*": "./*"
   },
   "repository": {
@@ -52,7 +51,7 @@
   "dependencies": {
     "@shopify/prettier-plugin-liquid": "^1.0.6",
     "ansi-colors": "^4.1.3",
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.4.14",
     "chalk": "^4.1.2",
     "chokidar": "^3.5.3",
     "cli-progress": "^3.12.0",
@@ -61,7 +60,7 @@
     "cssnano": "^5.1.15",
     "esbuild-loader": "^3.0.1",
     "fs-extra": "^11.1.0",
-    "glob": "^8.1.0",
+    "glob": "^10.2.1",
     "mini-css-extract-plugin": "^2.7.2",
     "node-emoji": "^1.11.0",
     "path": "^0.12.7",
@@ -71,13 +70,14 @@
     "promptly": "^3.2.0",
     "simple-git": "^3.17.0",
     "stmux": "^1.8.5",
-    "tailwindcss": "^3.2.7",
+    "tailwindcss": "^3.3.1",
     "terser-webpack-plugin": "^5.3.6",
     "webpack": "^5.77.0",
     "webpack-cli": "^5.0.1",
     "webpack-remove-empty-scripts": "^1.0.1"
   },
   "devDependencies": {
+    "caller": "^1.1.0",
     "eslint": "^8.34.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.27.5",

package/build/functions/parent-theme-files.js

@@ -1,25 +0,0 @@
-/**
-  * Get all files from the parent theme that are not in the child
-  * @private
-  * @param {function} func - function to get files with a glob, should return an array of file paths
-  * @param {array} childFiles - array of file paths from the child theme that we check against
-  * @returns {array} - array of file paths from the parent theme that are not in the child
-*/
-const path = require('path')
-const { directories } = require('#EnsureDirectories')
-
-module.exports = (func, childFiles, type) => {
-  const childRelative = childFiles.map(file => path.relative(ThemeEnvy.themePath, file))
-  // get all files from the parent theme, using only directories listed in ThemeConfig
-  const only = [...ThemeEnvy.parentTheme.elements, ...ThemeEnvy.parentTheme.features]
-  if (type === 'schema') {
-    only.push('schema')
-  }
-  if (type === 'liquid') {
-    only.push(...directories.map(dir => path.resolve(ThemeEnvy.parentTheme, dir)))
-  }
-  if (type === 'sectionGroups') {
-    only.push(path.resolve(ThemeEnvy.parentTheme, 'sections'))
-  }
-  return func(ThemeEnvy.parentTheme, only).filter(file => !childRelative.includes(path.relative(ThemeEnvy.parentTheme, file)))
-}

package/build/functions/tailwind.js

@@ -1,31 +0,0 @@
-/**
- * @private
- * @file Runs Tailwind using the Tailwind CLI during build
- * @see https://tailwindcss.com/docs/installation#using-tailwind-cli
-*/
-const { spawn } = require('child_process')
-const path = require('path')
-
-module.exports = function({ mode, opts }) {
-  return new Promise((resolve, reject) => {
-    const watch = opts.watch || false
-    const verbose = opts.verbose || false
-
-    // run tailwind
-    const tailwindCss = path.resolve(__dirname, '../requires/styles/theme-envy.css')
-    const tailwindOpts = ['tailwindcss', 'build', '-i', tailwindCss, '-o', `${ThemeEnvy.outputPath}/assets/theme-envy.critical.css`]
-    if (mode === 'production') tailwindOpts.push('--minify')
-    if (watch) tailwindOpts.push('--watch')
-    const tailwindOutput = verbose ? { stdio: 'inherit' } : {}
-    const tailwindProcess = spawn('npx', tailwindOpts, tailwindOutput)
-    if (watch) {
-      // watch process does not exit, so we need to increment the progress bar and resolve the promise
-      ThemeEnvy.progress.increment('tailwind')
-      resolve()
-    }
-    tailwindProcess.on('exit', () => {
-      ThemeEnvy.progress.increment('tailwind')
-      resolve()
-    })
-  })
-}

package/build/requires/globals/parent-theme.js

@@ -1,28 +0,0 @@
-/**
- * @private
- * @file Checks for a parent theme in node_modules or relative path and sets ThemeEnvy.parentTheme to the path
- */
-
-const fs = require('fs-extra')
-const path = require('path');
-
-(() => {
-  const ThemeConfigPath = path.resolve(process.cwd(), 'theme.config.js')
-  if (!fs.existsSync(ThemeConfigPath)) return
-  ThemeEnvy.childPreferred = ThemeEnvy.childPreferred || []
-
-  // look for parent theme in node_modules
-  const parentThemePath = ThemeEnvy.parentTheme?.path
-  if (!parentThemePath) return
-  const parentThemePkg = fs.existsSync(path.resolve(process.cwd(), 'node_modules', parentThemePath))
-    ? path.resolve(process.cwd(), 'node_modules', parentThemePath)
-    : false
-  // look for parent theme in relative path
-  const parentThemeRelative = fs.existsSync(path.resolve(process.cwd(), parentThemePath))
-    ? path.resolve(process.cwd(), parentThemePath)
-    : false
-  // prefer node_modules over relative path
-  const parentTheme = parentThemePkg || parentThemeRelative
-
-  ThemeEnvy.parentTheme = parentTheme
-})()

package/build/requires/styles/tailwind-base.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;