@snailicide/vite-plugin-shopify-theme-schema 🐌
This plugin adds features to make it easier to manage the JSON schema files for
Shopify Theme Settings. Please see Inspiration section for more
info and backstory!
Many thanks to barrel-shopify by
Barrel NY for readme inspiration.
Repository
snailicide-monorepo
Author
👤 Gillian Tunney
🐌
Table of
contents generated with markdown-toc
Features
Dynamic Shopify Setting Schemas
- Build Shopify Setting schemas dynamically from Typescript, Javascript, and
JSON files
- Share and reuse schema partials between different files. Promotes efficient
code reusability.
- Benefit from the language support provided by IDEs such as VSCode and
WebStorm like autocompletion,
formatting, collapsing
- Use Typescript autocompletion to declare schema structure using my code
library. Included types and validators range from generic to highly specific.
Examples
See example_theme_config folder for usage
examples of
validators and
types.
Installation
This library is published in the NPM registry and can be installed using any
compatible package manager.
#pnpm
pnpm add @snailicide/vite-plugin-shopify-theme-schema
#yarn
yarn add @snailicide/vite-plugin-shopify-theme-schema
#npm
npm install @snailicide/vite-plugin-shopify-theme-schema
Tests
# build example files
pnpm --filter=@snailicide/vite-plugin-shopify-theme-schema test:example
Usage
Add pluginShopifyThemeSchema plugin to vite.config.js / vite.config.ts:
import pluginShopifyThemeSchema from '@snailicide/vite-plugin-shopify-theme-schema'
/* * Example * */
export default {
plugins: [
pluginShopifyThemeSchema({
themeRoot: '.',
sourceCodeDir: './src/global_settings',
entryPoints: {
'settings_schema.json': 'settings_schema.js',
},
}),
],
}
- Create a
sourceCodeDir directory under your theme's folder to hold the
source files for your settings_schema.json or custom entrypoint.
- Create a Javascript,Typescript or JSON file for each 'entrypoint' of your
theme settings. You can compose different files to determine the settings
sequence.
- Make sure that your schema source directory is listed in your theme's
.shopifyignore file to avoid errors when pushing code to Shopify.
Options
import type { ShopifyLiquidModulesOptions } from './src/options'
/* * Default Options Available * */
const defaultobj: ShopifyLiquidModulesOptions = {
themeRoot: '.',
sourceCodeDir: './src',
entryPoints: {
'settings_schema.json': 'settings_schema.js',
},
}
Inspiration
Since i am new to vite plugin, i used this as my starting structure and was
heavily inspired by the overall concept of the
vite-plugin-shopify-theme-settings. I skipped looping thru the json directory
and instead used an 'entryPoint' approach.
Helpful Links
To-Do
Bugs
Please create an issue if you found any bugs, to help us improve this project!
