@softlimit/theme-envy 0.1.2-alpha

package/build/requires/index.js

@@ -0,0 +1,21 @@
+/**
+ * @file Require all files in the requires directory
+ */
+
+require('./globals')
+
+const requires = [
+  './assets',
+  './config',
+  './locales',
+  './scripts',
+  './snippets',
+  './styles',
+  './templates',
+]
+
+// iterate over requires so we can fire progress one at a time
+requires.forEach((requirePath) => {
+  require(requirePath)
+  ThemeEnvy.progress.increment('requires', 1)
+})

package/build/requires/locales.js

@@ -0,0 +1,16 @@
+/**
+  @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')
+
+// if dist/locales does not 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)
+}

package/build/requires/scripts/index.js

@@ -0,0 +1,5 @@
+/**
+ * @file Includes our script builders for elements.js and features.js files to be included in our Webpack theme-envy.js entrypoint
+ */
+require('./script-builders/elements.build.js')
+require('./script-builders/features.build.js')

package/build/requires/scripts/public-path.js

@@ -0,0 +1,9 @@
+/**
+ * @file Sets the public path for Webpack to use in dynamic imports
+ * @see https://webpack.js.org/guides/public-path/#on-the-fly
+ */
+
+/* eslint-disable no-undef */
+/* eslint-disable camelcase */
+// window.ThemeEnvy.publicPath is set in the theme-envy.liquid snippet
+__webpack_public_path__ = window.ThemeEnvy.publicPath

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

@@ -0,0 +1,44 @@
+/**
+ * @file Builds our elements.js file based on the elements in our src/elements directory
+ * @description Lazy loads our elements based on their presence in the DOM and the loading attribute
+ */
+
+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')
+  return `'${name}': () => import(/* webpackChunkName: "${name}" */ '${file}')`
+})
+
+const markup = elements.length
+  ? `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 loadElement(elm) {
+  // load the element
+  elm[1]()
+  // remove from Object so we don't need to check again
+  delete elements[elm[0]]
+}
+`
+  : ''
+fs.writeFileSync(path.resolve(__dirname, '../elements.js'), markup, 'utf8')

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

@@ -0,0 +1,15 @@
+/**
+ * @file Builds our features.js file imports based on the features directory
+ */
+
+const path = require('path')
+const fs = require('fs-extra')
+const { getAll } = require('#Build/functions')
+
+const features = getAll('features').map(file => {
+  return `import '${file}'`
+})
+
+const markup = features.join('\n')
+
+fs.writeFileSync(path.resolve(__dirname, '../features.js'), markup, 'utf8')

package/build/requires/scripts/theme-envy.js

@@ -0,0 +1,7 @@
+/**
+ * @file Our Webpack entrypoint for ThemeEnvy
+ */
+
+import './public-path.js'
+import './elements.js'
+import './features.js'

package/build/requires/snippets/index.js

@@ -0,0 +1,11 @@
+/**
+  @file Pre-builds the theme-envy.liquid snippet and adds it to dist/snippets
+*/
+
+const fs = require('fs-extra')
+const path = require('path')
+require('./liquid-builders/theme-envy.liquid.build')
+
+fs.ensureDirSync(path.resolve(ThemeEnvy.outputPath, 'snippets'))
+
+fs.copyFileSync(path.resolve(__dirname, 'theme-envy.liquid'), path.resolve(ThemeEnvy.outputPath, 'snippets/theme-envy.liquid'))

package/build/requires/snippets/liquid-builders/theme-envy.liquid.build.js

@@ -0,0 +1,21 @@
+/**
+ * @file Builds the theme-envy.liquid snippet, which is used to load the theme-envy.js script and critical css
+ */
+
+const path = require('path')
+const fs = require('fs-extra')
+const getAll = require('#Build/functions/get-all.js')
+const hasCriticalCSS = getAll('criticalCSS').length > 0 || ThemeEnvy?.tailwind !== false
+
+const markup = `{% comment %} This file is auto-generated by theme-envy. DO NOT EDIT. {% endcomment %}
+${hasCriticalCSS ? '{{ \'theme-envy.critical.css\' | asset_url | stylesheet_tag: preload: true }}' : ''}
+<script>
+(function() {
+  const assetUrl = {{ 'image.jpg' | asset_url | json }};
+  window.ThemeEnvy = window.ThemeEnvy || {};
+  window.ThemeEnvy.publicPath = assetUrl.substring(0, assetUrl.lastIndexOf('/') + 1);
+})();
+</script>
+<script src="{{ 'theme-envy.js' | asset_url }}" defer></script>`
+
+fs.writeFileSync(path.resolve(__dirname, '../theme-envy.liquid'), markup, 'utf8')

package/build/requires/styles/index.js

@@ -0,0 +1 @@
+require('./styles-builders/theme-envy.css.js')

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

@@ -0,0 +1,11 @@
+const fs = require('fs-extra')
+const path = require('path')
+const getAll = require('#Build/functions/get-all.js')
+
+const criticalCSS = getAll('criticalCSS')
+
+const markup = `${ThemeEnvy.tailwind !== false ? "@import './tailwind-base.css'" : ''};
+${criticalCSS.map(file => `@import '${file}';`).join('\n')}
+`
+
+fs.writeFileSync(path.resolve(__dirname, '../theme-envy.css'), markup, 'utf8')

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

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

package/build/requires/templates.js

@@ -0,0 +1,20 @@
+/**
+ * @file Copies all templates from the src folder to the dist folder with no transformations
+ */
+
+const path = require('path')
+const fs = require('fs-extra')
+const { getAll } = require('#Build/functions')
+// copy all templates to dist
+const globbedTemplates = getAll('templates')
+
+const templateOutputPath = path.resolve(ThemeEnvy.outputPath, 'templates')
+
+// if dist/templates doesn't exist, create it
+fs.ensureDirSync(templateOutputPath)
+globbedTemplates.forEach(file => {
+  // write each file to dist
+  fs.copyFileSync(file, path.resolve(templateOutputPath, path.basename(file)))
+  // update progress bar
+  ThemeEnvy.progress.increment('templates', 1)
+})

package/build/theme-envy.config.js

@@ -0,0 +1,71 @@
+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')
+
+module.exports = {
+  entry: {
+    'theme-envy': path.resolve(__dirname, 'requires/scripts/theme-envy.js'),
+  },
+  output: {
+    path: path.resolve(ThemeEnvy.outputPath, 'assets'),
+    publicPath: '',
+    filename: '[name].js?h=[contenthash:5]',
+    chunkFilename: (pathData) => {
+      // trim filenames so they're not super long... append 5 character hash
+      const name = pathData.chunk.name
+      const id = String(name || pathData.chunk.id).replace('node_modules_', '').substring(0, 25)
+      if (name === undefined) {
+        return `shared-${id}${pathData.chunk.contentHash.javascript.substring(0, 5)}.js?h=[contenthash:5]`
+      }
+      if (id.length > 25) {
+        return `${id}${pathData.chunk.contentHash.javascript.substring(0, 5)}.js?h=[contenthash:5]`
+      }
+      return '[name].js?h=[contenthash:5]'
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /(\.css)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          { loader: 'css-loader', options: { url: false } },
+          'postcss-loader',
+        ],
+      },
+    ]
+  },
+  optimization: {
+    splitChunks: {
+      automaticNameDelimiter: '_'
+    },
+    sideEffects: false,
+    minimizer: [
+      (process.env.mode === 'production')
+        ? new ESBuildMinifyPlugin({
+          target: 'es2015', // Syntax to compile to (see options below for possible values)
+        })
+        : new TerserPlugin({
+          extractComments: false,
+        }),
+    ]
+  },
+  resolve: {
+    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/'),
+    },
+  },
+  plugins: [
+    new RemoveEmptyScriptsPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css?h=[chunkhash:5]',
+    }),
+  ]
+}

package/convert/functions/convert-sections-to-features.js

@@ -0,0 +1,56 @@
+const fs = require('fs-extra')
+const path = require('path')
+const glob = require('glob')
+const logSymbols = require('#LogSymbols')
+const detectChildren = require('./detect-children')
+
+module.exports = function({ sourceTheme }) {
+  // figure out if we can separate any sections into features
+  const sections = glob.sync(path.resolve(sourceTheme, 'sections/*.liquid'))
+
+  const children = sections.map(section => {
+    // regexp matching for render and include tags
+    let results = detectChildren({ section, filePath: section, root: sourceTheme })
+    if (results.snippets.length) {
+      results.snippets.forEach(snippet => {
+        const snippetPath = path.resolve(sourceTheme, `snippets/${snippet}.liquid`)
+        const snippetChildren = detectChildren({ section, filePath: snippetPath })
+        const snippets = [...results.snippets, ...snippetChildren.snippets]
+        const assets = [...results.assets, ...snippetChildren.assets]
+        results = { section, snippets: [...new Set(snippets)], assets: [...new Set(assets)] }
+      })
+    }
+    return results
+  })
+  // determine if any sections have any snippets or any assets that are unique to that section
+  const sectionsWithUniqueChildren = children.map(child => {
+    const snippets = child.snippets.filter(snippet => {
+      return !children.find(section => section.section !== child.section && section.snippets.includes(snippet))
+    })
+    const assets = child.assets.filter(asset => {
+      return !children.find(section => section.section !== child.section && section.assets.includes(asset))
+    })
+    return { section: child.section, snippets, assets }
+  }).filter(section => section.snippets.length || section.assets.length)
+
+  // move sections with unique children to theme-envy/features
+  sectionsWithUniqueChildren.forEach(section => {
+    const sectionName = path.basename(section.section, '.liquid')
+    fs.ensureDirSync(path.resolve(sourceTheme, 'theme-envy/features', sectionName))
+    fs.moveSync(section.section, path.resolve(sourceTheme, 'theme-envy/features', sectionName, `sections/${sectionName}.liquid`))
+    if (section.snippets.length) {
+      fs.ensureDirSync(path.resolve(sourceTheme, 'theme-envy/features', sectionName, 'snippets'))
+      section.snippets.forEach(snippet => {
+        fs.moveSync(path.resolve(sourceTheme, `snippets/${snippet}.liquid`), path.resolve(sourceTheme, 'theme-envy/features', sectionName, 'snippets', `${snippet}.liquid`))
+      })
+    }
+    if (section.assets.length) {
+      fs.ensureDirSync(path.resolve(sourceTheme, 'theme-envy/features', sectionName, 'assets'))
+      section.assets.forEach(asset => {
+        fs.moveSync(path.resolve(sourceTheme, `assets/${asset}`), path.resolve(sourceTheme, 'theme-envy/features', sectionName, 'assets', `${asset}`))
+      })
+    }
+  })
+
+  console.log(`${logSymbols.success} Theme sections converted to features`)
+}

package/convert/functions/detect-children.js

@@ -0,0 +1,30 @@
+const fs = require('fs-extra')
+const path = require('path')
+
+module.exports = function({ section, filePath, root }) {
+  try {
+    const source = fs.readFileSync(filePath, 'utf8')
+    const snippetTags = /\s*((include|render)\s['|"](\S*)['|"])\s*/gm
+    const snippets = [...source.matchAll(snippetTags)].map(tag => tag[3]).filter(snippet => {
+      // file exists
+      return fs.existsSync(path.resolve(process.cwd(), root, `snippets/${snippet}.liquid`))
+    })
+    const assetUrl = /['|"](\S*)['|"]\s*[|]\s*asset_url/gm
+    const assets = [...source.matchAll(assetUrl)].map(tag => tag[1]).filter(asset => {
+      // file exists
+      return fs.existsSync(path.resolve(process.cwd(), root, `assets/${asset}`))
+    })
+    // return unique values
+    return {
+      section,
+      snippets: [...new Set(snippets)],
+      assets: [...new Set(assets)]
+    }
+  } catch (e) {
+    return {
+      section,
+      snippets: [],
+      assets: []
+    }
+  }
+}

package/convert/functions/index.js

@@ -0,0 +1,6 @@
+module.exports = {
+  convertSectionsToFeatures: require('./convert-sections-to-features'),
+  detectChildren: require('./detect-children'),
+  installHooks: require('./install-hooks'),
+  setSettingsSchemaJs: require('./set-settings-schema-js'),
+}

package/convert/functions/install-hooks.js

@@ -0,0 +1,68 @@
+const path = require('path')
+const fs = require('fs-extra')
+const logSymbols = require('#LogSymbols')
+const { liquidPrettify } = require('#Helpers')
+
+const hooks = {
+  '<head>': {
+    after: "{% hook 'head-start' %}",
+  },
+  '</head>': {
+    before: "{% hook 'head-end' %}",
+  },
+  '<body>': {
+    after: "{% hook 'body-start' %}",
+  },
+  '</body>': {
+    before: "{% hook 'body-end' %}",
+  },
+  '<header>': {
+    after: "{% hook 'header-start' %}",
+  },
+  '</header>': {
+    before: "{% hook 'header-end' %}",
+  },
+  '<main>': {
+    before: "{% hook 'before-main' %}",
+    after: "{% hook 'main-start' %}",
+  },
+  '</main>': {
+    before: "{% hook 'main-end' %}",
+    after: "{% hook 'after-main' %}",
+  },
+  '<footer>': {
+    before: "{% hook 'before-footer' %}",
+    after: "{% hook 'footer-start' %}",
+  },
+  '</footer>': {
+    before: "{% hook 'footer-end' %}",
+    after: "{% hook 'after-footer' %}",
+  },
+}
+
+module.exports = function() {
+  const themeLiquid = path.resolve(ThemeEnvy.themePath, 'layout/theme.liquid')
+  if (fs.existsSync(themeLiquid)) {
+    const theme = fs.readFileSync(themeLiquid, 'utf8')
+    let source = theme
+    Object.entries(hooks).forEach(([tag, { after, before }]) => {
+      const type = tag.includes('/') ? 'closing' : 'opening'
+      const tagName = type === 'closing' ? tag.replace('</', '').replace('>', '') : tag.replace('<', '').replace('>', '')
+      // regexp for tag
+      const checkTag = type === 'closing' ? new RegExp(`</${tagName}>`, 'gm') : new RegExp(`<${tagName}[^>]*>`, 'gm')
+      const matches = source.match(checkTag)
+      if (matches) {
+      // insert before and after attributes around the tag matches
+        matches.forEach(match => {
+          let newMatch = match
+          if (after && !source.includes(after)) newMatch = newMatch.replace('>', `>\n${after}`)
+          if (before && !source.includes(before)) newMatch = newMatch.replace('<', `${before}\n<`)
+          source = source.replace(match, newMatch)
+        })
+      }
+    })
+    source = liquidPrettify({ source, pathname: themeLiquid })
+    fs.writeFileSync(themeLiquid, source, 'utf8')
+  }
+  console.log(`${logSymbols.success} Hooks installed\n`)
+}

package/convert/functions/set-settings-schema-js.js

@@ -0,0 +1,14 @@
+const path = require('path')
+const fs = require('fs-extra')
+const logSymbols = require('#LogSymbols')
+
+module.exports = function({ sourceTheme }) {
+  // Set config/settings_schema to .js if settings_schema is json
+  const settingsSchema = path.resolve(sourceTheme, 'config/settings_schema.json')
+  if (fs.existsSync(settingsSchema)) {
+    // rename settings_schema.json to settings_schema.js
+    fs.writeFileSync(path.resolve(sourceTheme, 'config/settings_schema.json'), `module.exports = ${JSON.stringify(require(settingsSchema), null, 2)}`)
+    fs.renameSync(settingsSchema, path.resolve(sourceTheme, 'config/settings_schema.js'))
+  }
+  console.log(`${logSymbols.success} settings_schema converted to JS`)
+}

package/convert/index.js

@@ -0,0 +1,50 @@
+/*
+  theme-envy convert --(source|src|S)=path/to/theme
+
+  converts a Shopify theme to Theme Envy directory structure
+    - should be run after theme-envy-import, by using the --convert flag
+    - can be run independently, node bin/theme-envy convert --source=path/to/theme, or --src=path/to/theme, or -S=path/to/theme
+*/
+const path = require('path')
+const fs = require('fs-extra')
+const chalk = require('chalk')
+const logSymbols = require('#LogSymbols')
+const { directories, ensureDirectories } = require('#EnsureDirectories')
+const { setSettingsSchemaJs, convertSectionsToFeatures, installHooks } = require('#Convert/functions')
+const { addThemeEnvyFeatures } = require('#Init/functions')
+
+module.exports = async function(src, opts = {}) {
+  console.log(`\n ${logSymbols.info} ${chalk.cyan('Converting theme structure...')}`)
+  const source = src || './src'
+  const sourceTheme = path.resolve(process.cwd(), source)
+  // verify source theme exists
+  if (!fs.existsSync(sourceTheme)) {
+    console.error(
+      logSymbols.error,
+      chalk.red.bold('Error:'),
+      `Source theme directory not found: ${sourceTheme}`
+    )
+    process.exit(1)
+  }
+
+  // validate directory structure of source theme
+  directories.forEach(dir => {
+    if (!fs.existsSync(path.resolve(sourceTheme, dir))) {
+      console.error(`${logSymbols.error} ${chalk.red.bold('Error:')} Source theme required directory not found: ${path.resolve(sourceTheme, dir)}`)
+      process.exit(1)
+    }
+  })
+
+  // Create theme-envy directories
+  ensureDirectories({ root: sourceTheme, envy: true })
+  console.log(`${logSymbols.success} ${chalk.green('theme-envy')} directories created`)
+
+  if (opts.addThemeEnvy !== false) addThemeEnvyFeatures({ dest: sourceTheme })
+
+  convertSectionsToFeatures({ sourceTheme })
+
+  installHooks()
+
+  // convert settings_schema.json to .js
+  if (fs.existsSync(path.join(source, 'config/settings_schema.json'))) setSettingsSchemaJs({ sourceTheme })
+}

package/helpers/functions/dev.js

@@ -0,0 +1,15 @@
+/**
+  * @description theme-envy dev starts development process and syncs with Shopify using the Shopify CLI
+  * @example npx theme-envy dev
+  * @returns {Void}
+  */
+
+const { spawn } = require('child_process')
+const path = require('path')
+
+module.exports = function() {
+  const relativeDistPath = path.relative(process.cwd(), ThemeEnvy.outputPath)
+  const shopifyDev = `shopify theme dev --store=${ThemeEnvy.store} --path=${relativeDistPath}`
+  const build = 'theme-envy build development --watch'
+  spawn('stmux', ['-w', 'always', '-e', 'ERROR', '-M', '-m', 'beep,system', '--', '[', '[', shopifyDev, '..', build, ']', ']'], { stdio: 'inherit' })
+}

package/helpers/functions/dist-clean.js

@@ -0,0 +1,19 @@
+/**
+  * @file Deletes and rebuilds the output directory before a build
+  * @param {Object} options
+  * @param {boolean} options.quiet - Do not log the clean message
+  * @returns {Void}
+  * @example distClean()
+  * @example distClean({ quiet: true })
+  */
+
+const path = require('path')
+const fs = require('fs-extra')
+const emoji = require('node-emoji')
+
+module.exports = function({ quiet } = {}) {
+  fs.removeSync(ThemeEnvy.outputPath)
+  fs.mkdirSync(ThemeEnvy.outputPath)
+  const relativeDistPath = path.relative(process.cwd(), ThemeEnvy.outputPath)
+  if (!quiet) console.log(emoji.get('sparkles'), `./${relativeDistPath} directory cleaned`)
+}

package/helpers/functions/ensure-directories.js

@@ -0,0 +1,26 @@
+/**
+  * @description Exports a function that ensures our directory structure is in place.
+  * @param {string} root - The root directory to ensure the directories are in place.
+  * @param {boolean} envy - Whether or not to ensure the theme-envy specific directories.
+  * @example
+  * ensureDirectories({ root: ThemeEnvy.themePath, envy: true })
+  * @returns {Void}
+  */
+
+const fs = require('fs-extra')
+const path = require('path')
+
+const directories = ['assets', 'config', 'layout', 'locales', 'sections', 'snippets', 'templates']
+const envyDirectories = ['theme-envy/elements', 'theme-envy/features', 'theme-envy/partials', 'theme-envy/schema']
+function ensureDirectory(root, dir) {
+  fs.ensureDirSync(path.resolve(root, dir))
+}
+module.exports = {
+  directories,
+  envyDirectories,
+  ensureDirectories({ root = ThemeEnvy.themePath, envy = false }) {
+    directories.forEach(dir => ensureDirectory(root, dir))
+    if (!envy) return
+    envyDirectories.forEach(dir => ensureDirectory(root, dir))
+  }
+}

package/helpers/functions/find-orphans.js

@@ -0,0 +1,20 @@
+/**
+ * @file finds orphaned snippets, partials, and assets that have no references in the theme
+ */
+const chalk = require('chalk')
+const path = require('path')
+const { dependencies } = require('./liquid-tree/objects')
+const { countResults } = require('./liquid-tree/functions')
+const getAll = require('#Build/functions/get-all.js')
+
+module.exports = () => {
+  const files = [...getAll('snippets'), ...getAll('partials'), ...getAll('assets')]
+  const results = files.filter(file => countResults(dependencies.check(file)) <= 1)
+  if (!results.length) {
+    console.log('No orphaned snippets, partials, or assets found.')
+    return
+  }
+
+  console.log(chalk.yellow.bold('Orphaned files found:'))
+  results.forEach(file => console.log(`${chalk.red('*')}  ${path.relative(ThemeEnvy.themePath, file)}`))
+}

package/helpers/functions/global-theme-envy.js

@@ -0,0 +1,20 @@
+/**
+  * @file Establishes our global ThemeEnvy object based on theme.config.js
+  */
+
+const path = require('path')
+const fs = require('fs-extra')
+const EventEmitter = require('events')
+
+const themeConfigPath = path.resolve(process.cwd(), 'theme.config.js')
+global.ThemeEnvy = fs.existsSync(themeConfigPath) ? require(themeConfigPath) : {}
+
+ThemeEnvy.dependencies = {}
+ThemeEnvy.events = new EventEmitter()
+ThemeEnvy.themePath = path.resolve(process.cwd(), (ThemeEnvy.themePath || 'src'))
+ThemeEnvy.outputPath = path.resolve(process.cwd(), (ThemeEnvy.outputPath || 'dist'))
+
+ThemeEnvy.paths = {
+  build: path.resolve(__dirname, '../../build'),
+  helpers: path.resolve(__dirname, '../../helpers'),
+}

package/helpers/functions/liquid-prettify.js

@@ -0,0 +1,24 @@
+/**
+  * @file Attempts to run prettier-plugin-liquid on source string
+  * @param {Object} options
+  * @param {string} options.source - The source string to prettify
+  * @param {string} options.pathname - The pathname of the file being prettified
+  * @param {boolean} options.verbose - Whether or not to log warnings
+  * @returns {string} - The prettified source string or the original source string if prettier fails
+*/
+
+const liquidPlugin = require('@shopify/prettier-plugin-liquid/standalone')
+const prettier = require('prettier/standalone')
+const chalk = require('chalk')
+const logSymbols = require('#LogSymbols')
+
+module.exports = function({ source, pathname, verbose }) {
+  let prettified = false
+  try {
+    prettified = prettier.format(source, { plugins: [liquidPlugin], parser: 'liquid-html' })
+  } catch (error) {
+    if (verbose) console.log(logSymbols.warning, chalk.yellow('Warning:'), chalk.dim(`there was an issue prettifying ${pathname}`))
+  }
+  if (prettified) return prettified
+  return source
+}

package/helpers/functions/liquid-tree/functions/count-results.js

@@ -0,0 +1,13 @@
+const countResults = (obj) => {
+  // deep count number of entries in results object
+  let count = 0
+  Object.keys(obj).forEach(key => {
+    if (obj[key].tree) {
+      count += countResults(obj[key].tree)
+    }
+    count++
+  })
+  return count
+}
+
+module.exports = countResults