@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

• github
• email

🐌

• 🐌 Welcome to @snailicide/vite-plugin-shopify-theme-schema 🐌
  • Features
  • Examples
    • Installation
    • Tests
  • Usage
    • Options
  • Inspiration
    • vite-plugin-shopify-theme-settings
  • Helpful Links
  • To-Do
  • Bugs

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.

1#pnpm
2pnpm add @snailicide/vite-plugin-shopify-theme-schema
3
4#yarn
5yarn add @snailicide/vite-plugin-shopify-theme-schema
6
7#npm
8npm install @snailicide/vite-plugin-shopify-theme-schema

Tests

1# build example files
2pnpm --filter=@snailicide/vite-plugin-shopify-theme-schema test:example

Usage

Add pluginShopifyThemeSchema plugin to vite.config.js / vite.config.ts:

1import pluginShopifyThemeSchema from '@snailicide/vite-plugin-shopify-theme-schema'
2
3/* * Example  * */
4export default {
5  plugins: [
6    pluginShopifyThemeSchema({
7      themeRoot: '.',
8      sourceCodeDir: './src/global_settings',
9      entryPoints: {
10        'settings_schema.json': 'settings_schema.js',
11      },
12    }),
13  ],
14}

• 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

1import type { ShopifyLiquidModulesOptions } from './src/options'
2
3/* * Default Options Available * */
4const defaultobj: ShopifyLiquidModulesOptions = {
5  themeRoot: '.',
6  sourceCodeDir: './src',
7  entryPoints: {
8    'settings_schema.json': 'settings_schema.js',
9  },
10}

Inspiration

vite-plugin-shopify-theme-settings by Barrel NY

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

• Vite
• Shopify Liquid reference
• Shopify Theme Settings reference
• vite-plugin-shopify-theme-settings (by barrel-shopify)
• the awesome vite-plugin-shopify (by barrel-shopify)

To-Do

• Unit Tests

Bugs

Please create an issue if you found any bugs, to help us improve this project!