@softlimit/theme-envy 0.1.2-alpha

package/.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: [
+    'standard'
+  ],
+  globals: {
+    ThemeRequire: true,
+    ThemeEnvy: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2021,
+    sourceType: 'module'
+  },
+  rules: {
+    'prefer-const': 1,
+    'comma-dangle': 0,
+    'space-before-function-paren': ['error', {
+      anonymous: 'never',
+      named: 'never',
+      asyncArrow: 'always'
+    }]
+  }
+}

package/.github/CODEOWNERS

@@ -0,0 +1 @@
+* @calebcurtis8 @itsanolive

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

@@ -0,0 +1,19 @@
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  pull-requests: write
+
+name: release-please
+
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: google-github-actions/release-please-action@v3
+        with:
+          release-type: node
+          package-name: release-please-action

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Softlimit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,259 @@
+<!-- omit in toc -->
+# 💚 Theme Envy for Shopify Themes 💚
+
+<!-- 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/)
+
+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 -->
+## Theme Envy Features
+
+- **Get to work**:  
+Use [`theme-envy`](#theme-envy-cli) CLI commands to build, serve, initialize, add new feature structure, and much more, without touching your package.json. ⚡ **Bonus**: *Theme Envy's build and watch processes are super fast.* ⚡
+- **Stay organized**:  
+Put related files together in their own [feature subdirectories](#features) instead of the default Shopify theme structure. You can also add subdirectories within the default Shopify `/snippets` and `/sections` folders to group files.
+- **Repeat yourself**:  
+Break up code into smaller, reusable pieces with Theme Envy's extended liquid [partials](#partials) and [schema](#schematheme-require) files.
+- **Integrate with Ease**:  
+Manage app and feature implementation using Theme Envy's [`hooks`](#hooksinstalls) and [`installs`](#hooksinstalls) system.
+- **Code in Style**:  
+Nest custom styling or apply classes with PostCSS and [Tailwind](#tailwind) built in.
+- **Stay Consistent**:  
+Customize new feature starter files with your own markup and settings to establish consistency in your theme code base.
+- **Customize your Configuration**:  
+Add and update values in your `theme.config.js` for direct reference in liquid files using the [`{% theme %}`](#theme) tag
+- **Optimize Performance**:  
+Automatically lazy-load custom JS elements only when they are present on the page and use [Webpack](#webpack) dynamic imports to conditionally load assets.
+- **Build for Production**:  
+Automatically prettify liquid and minify javascript on production builds.
+
+---
+
+Table of Contents
+- [Installation](#installation)
+- [Getting Started](#getting-started)
+- [Theme Directory Structure](#theme-directory-structure)
+- [CLI](#cli)
+- [Build Tools](#build-tools)
+  - [Elements](#elements)
+  - [Features](#features)
+  - [Hooks/installs](#hooksinstalls)
+  - [Critical CSS](#critical-css)
+  - [Schema/Theme Require](#schematheme-require)
+  - [JS Section Schema](#js-section-schema)
+  - [Partials](#partials)
+  - [Theme](#theme)
+- [Theme.config.js](#themeconfigjs)
+- [Tailwind](#tailwind)
+- [Webpack](#webpack)
+- [Contributing](#contributing)
+- [License](#license)
+  
+## Installation
+
+Use [NPM](https://www.npm.js) to install Theme Envy.
+
+```bash
+npm install @softlimit/theme-envy --save-dev
+```
+
+## Getting Started
+Get started by running the following command and answering the prompts:
+```bash
+npx theme-envy init
+```
+
+> **Note**  
+> During the `init` command a new "Feature" is added to your project called `theme-envy` in `src/theme-envy/features/theme-envy`. This feature will add a snippet and `{% render 'theme-envy' %}` to the end of your `<head>` tag in `layout/theme.liquid` during project build. This handles all the Theme Envy JS and CSS.
+
+You are now ready to start developing! Get started with this simple command in your terminal
+```bash
+npx theme-envy dev
+```
+
+## Theme Directory Structure
+The directories are [Shopify standard directories](https://shopify.dev/docs/themes/architecture#directory-structure-and-component-types) except for `theme-envy`.
+```bash
+/
+└── assets/
+└── config/
+└── layout/
+└── locales/
+└── sections/
+└── snippets/
+└── templates/
+    └── customers/
+└── theme-envy/
+    └── elements/ # for Custom Elements/Web Components
+    └── features/ # individual directories of discrete features
+    └── partials/ # small .liquid files that are reusable/inserted across the theme
+    └── schema/ # .js files for sharing bits of section/config schema across the theme
+```
+
+## CLI
+> **Note**  
+> Precede all commands with `npx theme-envy`
+```
+Usage: theme-envy [options] [command]
+
+Theme Envy CLI Tools
+
+Options:
+  -h, --help                   display help for command
+
+Commands:
+  build [options] [env]        Build Shopify theme
+  clean                        Empty output directory
+  convert [options] [source]   Convert an existing Shopify theme to Theme Envy directory structure
+  dev                          Start development process and sync with Shopify using the Shopify CLI
+  find-orphans                 Find unused snippets, partials, and assets in your Shopify theme
+  init [options] [source]      Initialize a new Shopify theme project with Theme Envy directory structure
+  new <type> <name> [include]  Create new Feature or Element from starter files
+  pull-json                    Pull json template, section, and settings_data files from theme using Shopify CLI
+  tree [options] [filepaths]   Display the dependency tree for a .liquid file
+  help [command]               display help for command
+```
+
+***
+## Build Tools
+
+### Elements
+Theme Envy is optimized for using [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). You can initialize a new Web Component using `utils/starter-element.js` in your project with this command in your terminal:
+```bash
+npx theme-envy new element <your-element>
+```
+Your **element** file must have the same name as your new CustomElement (Web Component). Theme Envy will only load the asset(s) for `your-element` if element is present in the DOM.
+
+> **Warning**  
+> To take advantage of Theme Envy's smart loading of **elements** they must be inside an `elements` directory
+
+You can also setup an **element** as a subdirectory of `theme-envy/elements` by using an index.js file (`theme-envy/elements/your-element/index.js`). In this case your subdirectory must have the same name as your Web Component.
+
+***
+### Features
+Theme Envy "Features" are bigger pieces/sections of your site. Any JS/CSS assets associated with a feature will be loaded as part of the main `theme-envy.js` file on all templates in your theme.
+
+> **Note**  
+> Features are subdirectories of `src/theme-envy/features`.
+  
+```bash
+/
+└── theme-envy/features
+   └── your-feature/
+      └── config/ # .js files concatenated and added to settings_schema.json
+      └── partials/ # .liquid files that are referenced using Theme Envy {% partial 'file-name' %} tag
+      └── schema/ # .js files with module.exports to be injected into section files, or referenced with ThemeRequire()
+      └── scripts/ # .js files to be imported into index.js
+      └── sections/ # .liquid files only, included in build automatically
+      └── snippets/ # .liquid files only, included in build automatically
+      └── styles/ # contains any .css files, must be imported into index.js
+      └── critical.css # optional file that adds render blocking, sitewide CSS
+      └── index.js # is concatenated and loaded sitewide
+      └── install.js # defines where to inject code into hooks
+```
+
+***
+### Hooks/installs
+Hooks are places in the theme code where *Features* and *Elements* can insert code during build. This allows us to keep integrations discrete and easily undoable. To define a hook in the theme, we only need to add a `hook` tag like so:
+```javascript
+{% hook 'head-end' %}
+```
+We can then reference this hook's location with an install.js file in a feature or element.
+```javascript
+module.exports = [
+  {
+    hook: 'head-end',
+    content: "{% render 'custom-snippet' %}",
+    priority: 0-100 // optional, 50 is default
+  }
+]
+```
+During the build, all code for the `head-end` hook will be collected, sorted by priority (where 0 is highest in the code), and will replace the `{% hook 'head-end' %}` tag.
+***
+### Critical CSS
+In "Features" you may write render blocking CSS that you want to load site wide in a `critical.css` file in the Feature's directory. The critical.css files are concatenated with the Tailwind Stylesheet (when enabled), so that they are render blocking, loaded once, and then cached for subsequent page loads.
+***
+### Schema/Theme Require
+We were frustrated by how difficult it is to share smaller pieces of Shopify Section schema across sections. Theme Envy includes a couple of tools to make this easier.
+***
+### JS Section Schema
+Use this syntax in section `.liquid` files in place of the normal `{% schema %}{% endschema %}` tags:
+```javascript
+{% schema 'schema-your-section.js' %}
+```
+> **Note**  
+> Don't worry about relative/absolute paths here, Theme Envy will find your uniquely named schema js file within your project.
+
+When managing your section as a **Feature** we recommend putting all of your schema files in that feature's `schema` subdirectory. Schema that is shared across multiple features/sections should go in `src/theme-envy/schema`
+> **Warning**  
+> All **schema** files must be within a `schema` directory
+
+***
+### Partials
+By using the syntax 
+```javascript 
+{% partial '_file-name' %}
+```
+the contents of the liquid file named `_file-name.liquid` are inserted directly into the output file. Our practice is to name these files with a leading _, but it is not required.
+> **Warning**  
+> All **partial** files must be within a `partials` directory
+
+***
+### Theme
+We can use this markup to access properties of the `theme.config.js` file within liquid files. This is especially helpful for when you have to access a breakpoint value within your markup.
+```javascript
+{% theme 'breakpoints.md' %} // defined in theme.config.js
+```
+
+***
+## Theme.config.js
+After initializing your Theme Envy project, you will find a `theme.config.js` file in your project root. This is where we manage all of the Theme Envy build options.
+
+```javascript
+module.exports = {
+  entry: {
+    // Add entrypoints (Webpack) here
+    // main: './src/scripts/main.js',
+  },
+  store: 'sl-dev-testing.myshopify.com',
+  themePath: 'src', // directory for theme source files
+  outputPath: 'dist', // directory for build output
+  // tailwind: true, // set to false to disable Tailwind
+  breakpoints: {
+    sm: '640px',
+    // => @media (min-width: 640px) { ... }
+
+    md: '768px',
+    // => @media (min-width: 768px) { ... }
+
+    lg: '1024px',
+    // => @media (min-width: 1024px) { ... }
+
+    xl: '1280px',
+    // => @media (min-width: 1280px) { ... }
+
+    '2xl': '1536px'
+  // => @media (min-width: 1536px) { ... }
+  }
+}
+```
+
+***
+## Tailwind
+[Tailwind](https://tailwindcss.com/) is enabled automatically. It can be disabled in `theme.config.js`, and customized in `tailwind.config.js`
+***
+## Webpack
+[Webpack](https://webpack.js.org/) is used to bundle and manage JS and CSS. By default, the only entry point is Theme Envy which will handle all `elements` and `features`. Any additional scripts or stylesheets can be added to the `entry` in `theme.config.js`.
+
+***
+## Contributing
+
+Pull requests are welcome. For major changes, please open an issue first
+to discuss what you would like to change.
+
+***
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)

package/build/functions/failed-hook-installs.js

@@ -0,0 +1,18 @@
+/**
+ * @private
+ * @file checks for failed hook installs and exits with an error
+ */
+
+const chalk = require('chalk')
+const logSymbols = require('#LogSymbols')
+
+module.exports = function() {
+  const unusedHookInstalls = Object.keys(ThemeEnvy.hooks).filter(hook => !ThemeEnvy.hooks[hook].replaced)
+  if (!unusedHookInstalls || unusedHookInstalls.length === 0) return
+  console.error(`
+${logSymbols.error} ${chalk.red.bold('Error:')}
+The following hook injections failed because there is no corresponding hook tag in the theme:
+${chalk.red(unusedHookInstalls.join('\n'))}
+`)
+  process.exit()
+}

package/build/functions/get-all.js

@@ -0,0 +1,102 @@
+/**
+  * @file Gets all files of a given type
+  * @param {string} type - The type of files to get
+  * @example
+  * // get all liquid files
+  * getAll('liquid')
+  * @example
+  * // get all config files
+  * getAll('config')
+  * @returns {array} - array of file paths
+  */
+const path = require('path')
+const glob = require('glob')
+const parentThemeFiles = require('./parent-theme-files')
+
+const globs = {
+  assets: {
+    glob(src) {
+      return glob.sync(path.resolve(src, '**/assets/**/*'))
+    },
+  },
+  config: {
+    glob(src) {
+      return glob.sync(path.resolve(src, '**/config/**/*.js'))
+    },
+    filter: file => path.basename(file) !== 'settings_schema.js',
+  },
+  criticalCSS: {
+    glob(src) {
+      return glob.sync(path.resolve(src, '**/critical.css'))
+    },
+  },
+  elements: {
+    glob(src) {
+      return [...glob.sync(path.resolve(src, '**/elements/**/index.js')), ...glob.sync(path.resolve(src, '**/elements/*.js'))]
+    }
+  },
+  features: {
+    glob(src) {
+      return glob.sync(path.resolve(src, 'theme-envy/features/**/index.js'))
+    },
+  },
+  installs: {
+    glob(src) {
+      return glob.sync(path.resolve(src, '**/install.js'))
+    },
+  },
+  liquid: {
+    glob(src) {
+      return glob.sync(path.resolve(src, '**/*.liquid'))
+    },
+    filter: file => !file.includes('partials'),
+  },
+  partials: {
+    glob(src) {
+      return glob.sync(path.resolve(src, '**/partials/**/*.liquid'))
+    },
+  },
+  schema: {
+    glob(src) {
+      return glob.sync(path.resolve(src, '**/schema/**/*.js'))
+    },
+  },
+  sectionGroups: {
+    glob(src) {
+      return glob.sync(path.resolve(src, '**/sections/**/*.json'))
+    },
+  },
+  snippets: {
+    glob(src) {
+      return glob.sync(path.resolve(src, '**/snippets/**/*.liquid'))
+    },
+  },
+  templates: {
+    glob(src) {
+      return glob.sync(path.resolve(src, '**/templates/**/*.json'))
+    },
+  },
+}
+
+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
+    let files = globs[type].glob(src)
+    if (only) {
+      files = files.filter(file => {
+        return only.some(dir => file.indexOf(dir) > -1)
+      })
+    }
+    if (globs[type].filter) {
+      files = files.filter(globs[type].filter)
+    }
+    return files
+  }
+  const files = getFiles(ThemeEnvy.themePath)
+  if (ThemeEnvy.parentTheme) {
+    files.push(...parentThemeFiles(getFiles, files, type))
+  }
+
+  return files
+}

package/build/functions/index.js

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

package/build/functions/liquid/functions/extend-liquid.js

@@ -0,0 +1,77 @@
+/**
+ * @file Pre-processes .liquid files to allow for our custom tags: partial, hook, and theme
+ * @example
+ * // partial tag copies the contents of _cart-item-title.liquid
+ * {% partial '_cart-item-title' %}
+ * @example
+ * // adds a hook (point) to the liquid file that can be injected to from install.js files
+ * {% hook 'cart-item-title' %}
+ * @example
+ * // references any object in the theme.config.js file
+ * {% theme 'breakpoints.md' %}
+*/
+
+const path = require('path')
+const fs = require('fs-extra')
+const listDependencies = require('./list-dependencies')
+const getAll = require('#Build/functions/get-all.js')
+const globbedPartials = getAll('partials')
+
+const strings = {
+  tags: ['partial', 'hook', 'theme']
+}
+// build list of strings to test for replacing
+strings.test = strings.tags.map(tag => [`${tag} '`, `${tag} "`]).flat()
+
+const extendLiquid = ({ source, filePath }) => {
+  // return source if no tags are found
+  if (!source) return source
+  if (!strings.test.some(str => source.includes(str))) return source
+  // regexp for partials and hooks within liquid tags
+  const tags = /{%[-]?\s*((partial|hook|theme)\s['|"](\S*)['|"])\s*[-]?%}/gm
+  const inLiquid = /(?<!{%[-]?\s)((partial|hook)\s['|"](.*)['|"])/gm
+  const foundTags = [...source.matchAll(tags), ...source.matchAll(inLiquid)]
+  // gather dependencies, will be used to trigger rebuilds
+  const dependencies = listDependencies({ source, filePath })
+  ThemeEnvy.dependencies[filePath] = dependencies
+
+  foundTags.forEach(tag => {
+    source = replaceTag({ tag, source, filePath })
+  })
+  return source
+}
+
+function replaceTag({ tag, source, filePath } = {}) {
+  // we will replace tag[0] with the file contents
+  const replace = tag[0]
+  const action = tag[2]
+  const name = tag[3]
+  if (action === 'partial') {
+    const partialPath = globbedPartials.filter(partial => partial.includes(`/${`${name}.liquid`}`))[0]
+    const partialSource = fs.readFileSync(partialPath, 'utf8')
+    const file = extendLiquid({ source: partialSource, filePath: partialPath })
+    source = source.replace(replace, whitespace(replace, file))
+  }
+  if (action === 'hook') {
+    const replacedContent = ThemeEnvy.hooks[name] ? extendLiquid({ source: ThemeEnvy.hooks[name].content, filePath }) : ''
+    if (ThemeEnvy.hooks[name]) ThemeEnvy.hooks[name].replaced = true
+    source = source.replace(replace, replacedContent)
+  }
+  if (action === 'theme') {
+    // defines all properties available to {% theme name.key %} tags
+    const Theme = require(path.resolve(process.cwd(), 'theme.config.js'))
+    const [obj, key] = name.split('.')
+    source = source.replace(replace, Theme[obj][key])
+  }
+  return source
+}
+
+function whitespace(replace, source) {
+  const trimLeft = replace.includes('{%-')
+  const trimRight = replace.includes('-%}')
+  if (trimLeft) source = source.trimStart()
+  if (trimRight) source = source.trimEnd()
+  return source
+}
+
+module.exports = extendLiquid

package/build/functions/liquid/functions/flatten-shopify-directory-structure.js

@@ -0,0 +1,29 @@
+/**
+  * @private
+  * @file Helper function to determine correct output path for input file
+  * @param {string} path - path to file
+  * @returns {string} - output path
+  */
+
+module.exports = function(path) {
+  const filename = path.slice(path.lastIndexOf('/') + 1)
+  if (path.includes('snippets/')) {
+    return `snippets/${filename}`
+  }
+  if (path.includes('sections/')) {
+    return `sections/${filename}`
+  }
+  if (path.includes('layout/')) {
+    return `layout/${filename}`
+  }
+  if (path.includes('templates/customers')) {
+    return `templates/customers/${filename}`
+  }
+  if (path.includes('templates/') && !path.includes('customers/')) {
+    return `templates/${filename}`
+  }
+  if (path.includes('assets/')) {
+    return `assets/${filename}`
+  }
+  return false
+}

package/build/functions/liquid/functions/index.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extendLiquidDependencies: require('./list-dependencies'),
+  extendLiquid: require('./extend-liquid'),
+  flattenShopifyDirectoryStructure: require('./flatten-shopify-directory-structure'),
+  sectionSchemaInject: require('./section-schema-inject'),
+}

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

@@ -0,0 +1,47 @@
+/**
+  * @private
+  * @file Helper function that returns a list of files that reference the given liquid file
+  * @param {string} filePath - path to file to find dependencies for
+  * @param {string} source - source code of file to find dependencies for
+  * @returns {array} - list of files that reference the given file
+*/
+const path = require('path')
+const fs = require('fs-extra')
+const getAll = require('#Build/functions/get-all.js')
+// pre glob all liquid partials
+const globbedPartials = getAll('partials')
+const chalk = require('chalk')
+const logSymbols = require('#LogSymbols')
+
+const listDependencies = ({ filePath, source }) => {
+  const dependencies = []
+  const tags = /{%[-]?\s*((partial|hook|theme)\s['|"](\S*)['|"])\s*[-]?%}/gm
+  const inLiquid = /(?<!{%[-]?\s)((partial|hook)\s['|"](.*)['|"])/gm
+  const foundTags = [...source.matchAll(tags), ...source.matchAll(inLiquid)]
+  foundTags.forEach(tag => {
+    const action = tag[2]
+    const name = tag[3]
+    if (action === 'partial') {
+      const file = globbedPartials.filter(partial => partial.includes(`/${`${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`)
+        process.exit()
+      }
+      if (file[0] === filePath) return
+      if (dependencies.indexOf(file[0]) === -1) dependencies.push(file[0])
+    }
+    if (action === 'hook') {
+      if (filePath && dependencies.indexOf(filePath) === -1) dependencies.push(filePath)
+    }
+  })
+  dependencies.forEach(file => {
+    if (file === filePath) return
+    const fileSource = fs.readFileSync(file, 'utf8')
+    dependencies.concat(listDependencies({ source: fileSource, filePath: file }))
+  })
+  const resolvedPaths = dependencies.map(file => path.resolve(file))
+  return resolvedPaths
+}
+
+module.exports = listDependencies

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

@@ -0,0 +1,26 @@
+/**
+  * @file Prebuild helper script that will inject the schema js file into the corresponding sections/*.liquid file
+  * @example
+  * // include the schema in the section liquid file
+  * {% schema 'schema-file.js' %}
+  */
+
+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
+  // 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 })
+  // replace the {% schema %} tag with the schema string and update asset
+  return source.replace(schema[0], formatSchema(schemaSource))
+}
+
+function formatSchema(schema) {
+  return `{% schema %}
+${JSON.stringify(schema, null, 2)}
+{% endschema %}
+`
+}