@softlimit/theme-envy 0.1.2-alpha

package/build/functions/liquid/index.js

@@ -0,0 +1,36 @@
+/**
+  * @file Processes our liquid files during build
+  * @description replaces our custom hooks, partials, and theme tags, and injects section schema into section files
+  * @param {string} file - path to file
+  * @param {string} mode - 'development' or 'production'
+  * @returns {Void}
+*/
+const path = require('path')
+const fs = require('fs-extra')
+const { extendLiquid, flattenShopifyDirectoryStructure, sectionSchemaInject } = require('./functions')
+const { liquidPrettify } = require('#Helpers')
+
+module.exports = function({ file, mode, verbose }) {
+  const shopifyPath = flattenShopifyDirectoryStructure(file)
+  // skip files that don't need to be processed because they don't have an output path
+  if (!shopifyPath) return
+
+  const outputPath = `${ThemeEnvy.outputPath}/${shopifyPath}`
+  let source = fs.readFileSync(file, 'utf8')
+
+  // inject schema .js into liquid section files
+  if (file.includes('sections/')) source = sectionSchemaInject({ source, filePath: file })
+
+  // apply our custom liquid tags: partial, hook, theme
+  source = extendLiquid({ source, filePath: file })
+
+  // prettify our liquid if possible
+  if (mode === 'production') source = liquidPrettify({ source, pathname: outputPath, verbose })
+
+  // create output directory if it doesn't exist
+  fs.ensureDirSync(path.dirname(outputPath))
+  // save our file
+  fs.writeFileSync(outputPath, source)
+  // update progress bar
+  ThemeEnvy.progress.increment('liquid', 1)
+}

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

@@ -0,0 +1,25 @@
+/**
+  * 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

@@ -0,0 +1,31 @@
+/**
+ * @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/functions/theme-envy.js

@@ -0,0 +1,85 @@
+/**
+ * @private
+ * @file Manages ThemeEnvy build process
+ * @param {Object} opts
+ * @param {Boolean} opts.watch
+ * @param {Boolean} opts.verbose
+ * @returns {Promise}
+ */
+const fs = require('fs-extra')
+const path = require('path')
+const liquid = require('./liquid')
+const getAll = require('./get-all')
+const failedHookInstalls = require('./failed-hook-installs')
+
+module.exports = function({ mode, opts }) {
+  return new Promise((resolve, reject) => {
+    const verbose = opts.verbose || false
+    // build files
+    build({ mode, verbose })
+      .then(() => {
+        // watch for changes
+        if (opts.watch) {
+          ThemeEnvy.events.on('build:complete', () => {
+            watch({ mode, verbose })
+          })
+        }
+        resolve()
+      })
+  })
+}
+
+function build({ mode, files = [], verbose }) {
+  return new Promise((resolve, reject) => {
+    if (files.length > 0) {
+    // remove partials and schema = require(files list)
+      files = files.filter((file) => !file.includes('partials/') && !file.includes('schema/'))
+    }
+    /*
+   if we have files passed in (during watch process), use those
+   otherwise glob for all liquid files
+  */
+    const liquidFiles = files.length > 0
+      ? files.filter(file => file.includes('.liquid'))
+      : getAll('liquid')
+
+    const sectionGroups = files.length > 0
+      ? files.filter(file => file.includes('.json'))
+      : getAll('sectionGroups')
+
+    // process all liquid files and output to dist directory
+    if (liquidFiles.length > 0) {
+      liquidFiles.forEach((file) => {
+        liquid({ file, mode, verbose })
+      })
+    }
+    // check for install hooks that reference non-existent hooks
+    failedHookInstalls()
+    ThemeEnvy.progress.increment('failedHookInstalls')
+
+    // copy sectionGroup files to dist
+    if (sectionGroups.length > 0) {
+      sectionGroups.forEach((file) => {
+        fs.copyFileSync(file, path.resolve(ThemeEnvy.outputPath, 'sections', path.basename(file)))
+      })
+    }
+    ThemeEnvy.progress.increment('sectionGroups')
+    resolve()
+  })
+}
+
+function watch({ mode, verbose }) {
+  const chokidar = require('chokidar')
+  console.log('watching for changes...')
+  chokidar.watch(ThemeEnvy.themePath).on('change', (path) => {
+    ThemeEnvy.events.emit('watch:start')
+    const isJSONTemplate = path.includes('templates/') && path.extname(path) === '.json'
+    if (!isJSONTemplate) {
+      console.log(`updated: ${path.split(ThemeEnvy.themePath + '/')[1]}`)
+      build({ files: [path], mode })
+        .then(() => {
+          // rebuild complete
+        })
+    }
+  })
+}

package/build/functions/webpack.js

@@ -0,0 +1,44 @@
+/**
+  * @private
+  * @file Runs webpack during ThemeEnvy build
+  * @param {Object} options - options object
+  * @param {string} options.mode - webpack mode, either 'development' or 'production'
+  * @param {Object} options.opts - options object
+  * @param {Boolean} options.opts.watch - whether or not to run webpack in watch mode
+  * @returns {Promise}
+  */
+
+const webpack = require('webpack')
+const getAll = require('./get-all')
+
+module.exports = function({ mode, opts }) {
+  return new Promise((resolve, reject) => {
+    const watch = opts.watch || false
+
+    const webpackConfig = require('#Build/theme-envy.config.js')
+    // run webpack
+    // set our webpack mode
+    webpackConfig.mode = mode
+    // set our webpack optimization
+    webpackConfig.optimization.minimize = mode === 'production'
+    // set our webpack watch flag
+    webpackConfig.watch = watch
+    // merge our theme config named entries into webackConfig.entry
+    webpackConfig.entry = { ...webpackConfig.entry, ...ThemeEnvy.entry }
+
+    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`
+    }
+
+    webpack(webpackConfig, (err, stats) => {
+      if (err || stats.hasErrors()) {
+        console.log(stats, err)
+        reject(err)
+      }
+      // Done processing - finish up progress bar and make up for our initial increment
+      ThemeEnvy.progress.increment('webpack')
+      resolve(stats)
+    })
+  })
+}

package/build/index.js

@@ -0,0 +1,45 @@
+/**
+  * @file Processes all liquid files in the themePath directory and output them to the outputPath directory.
+  * @param {string} env - The mode to build in, either 'development' or 'production'
+  * @param {Object} opts - The options object
+  * @param {boolean} opts.verbose - Whether or not to log warnings
+  * @param {boolean} opts.watch - Whether or not to watch for changes
+  * @example
+  * // build in production mode
+  * build('production')
+  * @example
+  * // run from the CLI
+  * npx theme-envy build [production|development] [--watch|w] [--verbose|v]
+  */
+
+const path = require('path')
+const chalk = require('chalk')
+const emoji = require('node-emoji')
+const { themeEnvy, webpack, tailwind } = require('#Build/functions')
+const { distClean } = require('#Helpers')
+
+module.exports = async function(env, opts = {}) {
+  const mode = env || 'production'
+
+  // empty dist folder for a clean build, do not log the clean message
+  distClean({ quiet: true })
+
+  // our pretty build message
+  const relativeDistPath = path.relative(process.cwd(), ThemeEnvy.outputPath)
+  console.log(
+    emoji.get('hammer'),
+    chalk.cyan(`Building ./${relativeDistPath} in`),
+    mode === 'development' ? chalk.yellow.bold(mode) : chalk.magenta.bold(mode),
+    chalk.cyan('mode')
+  )
+
+  require('./requires')
+
+  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

@@ -0,0 +1,22 @@
+/**
+  * @file Copies all locales files from the src folder to the dist folder with no transformations
+  */
+
+const fs = require('fs-extra')
+const path = require('path')
+const glob = require('glob')
+
+const assets = glob.sync(path.resolve(ThemeEnvy.themePath, '**/assets/**/*.*'))
+
+// if dist/assets doesn't exist create it
+fs.ensureDirSync(path.resolve(ThemeEnvy.outputPath, 'assets'))
+
+assets.forEach(asset => {
+  try {
+    fs.copySync(asset, path.resolve(ThemeEnvy.outputPath, 'assets', path.basename(asset)))
+    // update progress bar
+    ThemeEnvy.progress.increment('assets', 1)
+  } catch (err) {
+    console.error(err)
+  }
+})

package/build/requires/config.js

@@ -0,0 +1,44 @@
+/**
+ * @file collects and concatenates all config/*.js files into a single settings_schema.json file
+ */
+
+const path = require('path')
+const fs = require('fs-extra')
+const { getAll } = require('#Build/functions')
+const requiredModules = []
+// glob all our config/*.js files
+const writeSettingsSchema = () => {
+  const configInputPath = path.resolve(ThemeEnvy.themePath, 'config')
+  const configOutputPath = path.resolve(ThemeEnvy.outputPath, 'config')
+
+  const settingsSchemaPath = path.resolve(configInputPath, 'settings_schema.js')
+  const settingsSchema = require(settingsSchemaPath)
+  if (requiredModules.indexOf(settingsSchemaPath) === -1) requiredModules.push(settingsSchemaPath)
+  const globbedConfigs = getAll('config')
+    .map(file => {
+      if (requiredModules.indexOf(file) === -1) requiredModules.push(file)
+      return require(file)
+    })
+    .flat()
+    // sort alphabetically by name
+    .sort((a, b) => (a.name > b.name) ? 1 : -1)
+
+  const config = [...settingsSchema, ...globbedConfigs].flat()
+
+  fs.ensureDirSync(configOutputPath)
+  fs.writeFileSync(path.resolve(configOutputPath, 'settings_schema.json'), JSON.stringify(config, null, 2))
+  fs.copyFileSync(path.resolve(configInputPath, 'settings_data.json'), path.resolve(configOutputPath, 'settings_data.json'))
+  // update progress bar
+  ThemeEnvy.progress.increment('config')
+}
+
+writeSettingsSchema()
+
+ThemeEnvy.events.on('watch:start', () => {
+  // clear node cache of ThemeRequired modules
+  requiredModules.forEach(module => {
+    delete require.cache[require.resolve(module)]
+  })
+  requiredModules.length = 0
+  writeSettingsSchema()
+})

package/build/requires/globals/index.js

@@ -0,0 +1,10 @@
+/**
+ * @private
+ * @file Our global requires
+ */
+
+require('./progress-bar')
+require('./parent-theme')
+require('./theme-require')
+require('./prepare-install-hooks-schema')
+ThemeEnvy.progress.increment('globals')

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

@@ -0,0 +1,28 @@
+/**
+ * @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/globals/prepare-install-hooks-schema.js

@@ -0,0 +1,58 @@
+/**
+  * @private
+  * @file Collect all the install.js files that insert code into the theme hooks
+  * @description
+  * Find all files in the src directory that end with install.js
+  * These files should export an array of objects with the following properties:
+  *  hook: the name of the hook to insert the code into
+  *  content: the code to insert
+  *  priority: the priority of the code, 0-100, default 50
+  *
+    module.exports = [
+      {
+        hook: 'head-start',
+        content: '{% partial "_test-partial" %}',
+        priority: 50
+      }
+    ]
+  */
+const { getAll } = require('#Build/functions')
+const path = require('path');
+(() => {
+  const installs = getAll('installs')
+  // collect all installs
+  ThemeEnvy.installs = installs.map(file => require(path.resolve(file))).flat()
+
+  const hooks = ThemeEnvy.installs.filter(entry => entry.hook)
+  const schema = ThemeEnvy.installs.filter(entry => !entry.hook)
+
+  ThemeEnvy.hooks = {}
+  ThemeEnvy.schema = {}
+  // group all hooks together by target file and hook
+  // This is so we can install hooks once per destination file...
+  hooks.forEach(entry => {
+    ThemeEnvy.hooks[entry.hook] = ThemeEnvy.hooks[entry.hook] || []
+    // add the hook to the destination, process entry.content for softlimit partials
+    // priority 0-100, default 50
+    ThemeEnvy.hooks[entry.hook].push({ content: entry.content, priority: entry.priority || 50 })
+  })
+  // sort hook content by priority and concat into a single string
+  Object.keys(ThemeEnvy.hooks).forEach(hook => {
+    ThemeEnvy.hooks[hook] = {
+      content: ThemeEnvy.hooks[hook].sort((a, b) => a.priority - b.priority).map(entry => entry.content).join('\n')
+    }
+  })
+
+  // TODO: LOOK INTO THIS
+  schema.forEach(entry => {
+    const file = `${entry.file}.liquid`
+    ThemeEnvy.schema[file] = ThemeEnvy.schema[file] || {
+      settings: [],
+      blocks: [],
+    }
+    // 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)
+  })
+})()

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

@@ -0,0 +1,52 @@
+/**
+ * @private
+ * @file Manages our progress bar during the build process
+ */
+const { getAll } = require('#Build/functions')
+const cliProgress = require('cli-progress')
+const colors = require('ansi-colors');
+
+(() => {
+  // setup all of our progress bar steps
+  // these are then used to increment the progress bar
+  // ThemeEnvy.progress.increment('label', step)
+  const counts = {
+    assets: getAll('assets').length,
+    config: 1,
+    failedHookInstalls: 1,
+    globals: 1,
+    liquid: getAll('liquid').length,
+    locales: 1,
+    requires: 7,
+    sectionGroups: 1,
+    tailwind: ThemeEnvy?.tailwind !== false ? 1 : 0,
+    templates: getAll('templates').length,
+    webpack: 1,
+  }
+  const bar = new cliProgress.SingleBar({
+    format: colors.cyan('{bar}') + ' {percentage}% | {duration_formatted}',
+    barCompleteChar: '\u2588',
+    barIncompleteChar: '\u2591',
+    hideCursor: true,
+  }, cliProgress.Presets.shades_classic)
+
+  ThemeEnvy.progress = {
+    bar,
+    increment(label, step) {
+      /**
+        * @param {string} label - the label of the progress bar to increment
+        * @param {number} step - the number of steps to increment the progress bar by if different than the entry in counts
+        */
+      step = step || (counts[label] ? counts[label] : 1)
+      bar.increment(step)
+    }
+  }
+
+  const totalBuildSteps = Object.values(counts).reduce((a, b) => a + b, 0)
+
+  bar.start(totalBuildSteps, 0)
+
+  ThemeEnvy.events.on('build:complete', () => {
+    bar.stop()
+  })
+})()

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

@@ -0,0 +1,190 @@
+/**
+ * @file defines our global ThemeRequire function used for loading schema files
+  @param {string} file - the filename to load
+  @param {object} options - options to pass to the ThemeRequire function
+  @param {array} options.delete - an array of schema keys to delete
+  @param {object} options.extend - an object of schema keys to extend
+  @param {number} options.loop - a number of times to loop the schema
+  @param {object} options.suffix
+  @returns {object} - the schema object
+*/
+
+const glob = require('glob')
+const path = require('path')
+const requiredModules = []
+const { getAll } = require('#Build/functions')
+const chalk = require('chalk')
+const logSymbols = require('#LogSymbols')
+
+let allSchema
+
+const setPreGlobs = () => {
+  allSchema = getAll('schema')
+}
+
+// uncache all required files after a build is complete so changes can be made to partials and schemas in between watch events
+ThemeEnvy.events.on('watch:start', () => {
+  // clear node cache of ThemeRequired modules
+  requiredModules.forEach(module => {
+    delete require.cache[require.resolve(module)]
+  })
+  requiredModules.length = 0
+  setPreGlobs()
+})
+
+const ThemeRequire = (file, options) => {
+  // check for file in our pre-globbed arrays
+  const ref = getFile(file)
+
+  if (ref.length === 0) {
+    console.error(logSymbols.error, chalk.red('Error:'), `Could not find file ${file}`)
+    process.exit()
+  }
+
+  const filePath = path.resolve(process.cwd(), ref[0])
+  let content
+  try {
+    content = require(filePath)
+    if (requiredModules.indexOf(filePath) === -1) requiredModules.push(filePath)
+  } catch (error) {
+    console.error('\n', logSymbols.error, chalk.red('Error:'), `Invalid JSON, ${error}\n`, chalk.dim(error.stack.split(error)[0]))
+    process.exit()
+  }
+
+  // Add schema extend/delete support
+  /*
+  * ***********************
+  * Example usage:
+  * ***********************
+    const textLockupBlock = ThemeRequire(
+      'schema/schema-text-lockup-block.json',
+      {
+        delete: ['Text Background', 'text_bg_opacity'],
+        extend: {
+          title: {
+            default: 'Hello World'
+          }
+        }
+        loop: 3,
+        suffix: 2
+      })
+  */
+
+  // if module.export is a function, call it with options.args
+  if (typeof content === 'function') {
+    content = content(options?.args)
+  }
+
+  if (options?.extend || options?.delete || options?.loop || options?.suffix || options?.args) {
+    // make copy of the schema to modify so we don't transform the original
+    content = parseJson(content)
+  }
+
+  if (options?.delete) {
+    content = schemaDelete(content, options.delete)
+  }
+  if (options?.extend) {
+    content = schemaExtend(content, options.extend)
+  }
+  if (options?.loop) {
+    content = schemaLoop(file, content, options.loop)
+  }
+  if (options?.suffix) {
+    content = schemaSuffix(file, content, options.suffix)
+  }
+
+  if (options?.loader) {
+    ThemeEnvy.dependencies[options.loader] = ThemeEnvy.dependencies[options.loader] || []
+    ThemeEnvy.dependencies[options.loader].push(filePath)
+  }
+
+  return content
+}
+
+function schemaDelete(file, src, del) {
+  const replaceWith = src.filter(entry => {
+    if (entry.settings) {
+      entry.settings = schemaDelete(entry.settings, del)
+      return entry
+    }
+    return ((entry.id ? !del.includes(entry.id) : false) || (entry.content ? !del.includes(entry.content) : false))
+  })
+  return replaceWith
+}
+
+function schemaExtend(src, exts) {
+  let replaceWith
+  Object.entries(exts).forEach(ext => {
+    // map extension to schema
+    replaceWith = src.map(entry => {
+      if (entry.settings) {
+        schemaExtend(entry.settings, exts)
+      }
+      if (entry.id !== ext[0] && entry.content !== ext[0]) return entry
+      Object.entries(ext[1]).forEach(val => {
+        entry[val[0]] = val[1]
+      })
+      return entry
+    })
+  })
+  return replaceWith
+}
+
+function schemaLoop(file, src, loop) {
+  const replaceWith = []
+  for (let i = 1; i < (loop + 1); i++) {
+    const srcCopy = parseJson(src)
+    srcCopy.map(entry => {
+      if (entry.id) entry.id = `${entry.id}_${i}`
+      if (entry.label) entry.label = `${entry.label} ${i}`
+      if (entry.type === 'header') entry.content = `${entry.content} ${i}`
+      return entry
+    })
+    replaceWith.push(srcCopy)
+  }
+  return replaceWith
+}
+
+function schemaSuffix(file, src, suffix) {
+  const replaceWith = parseJson(src)
+  replaceWith.map(entry => {
+    if (entry.id) entry.id = `${entry.id}_${suffix}`
+    if (entry.label) entry.label = `${entry.label} ${suffix}`
+    if (entry.type === 'header') entry.content = `${entry.content} ${suffix}`
+    return entry
+  })
+  return replaceWith
+}
+
+function getSchemaFile(file) {
+  return allSchema.filter(schema => path.basename(schema) === path.basename(file))
+}
+
+function getFile(file) {
+  if (file.includes('schema')) {
+    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}`)))
+    }
+    return res
+  }
+}
+
+/* parse JSON for schema extend functions, return error if JSON not readable
+  @param src [object] - the file contents to be extended
+  @param schemaRef [string] - source schema file name being extended
+*/
+function parseJson(src, schemaRef) {
+  try {
+    return JSON.parse(JSON.stringify(src))
+  } catch (error) {
+    console.error('\n', logSymbols.error, chalk.red('Error:'), `Invalid JSON, ${error}\n`, chalk.dim(error.stack.split(error)[0]))
+  }
+}
+
+// run setPreGlobs on initial load
+setPreGlobs()
+// set global access to ThemeRequire
+global.ThemeRequire = ThemeRequire