🐌 Welcome to @snailicide/vite-plugin-shopify-theme-schema 🐌

| npm | GitHub |

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.

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

Table of contents generated with markdown-toc

Author

👤 Gillian Tunney | github | email |

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.

Install

#npm
npm i @snailicide/vite-plugin-shopify-theme-schema -D

# yarn
yarn add @snailicide/vite-plugin-shopify-theme-schema -D

# pnp
pnpm add @snailicide/vite-plugin-shopify-theme-schema -D

For pnpm workspace:

pnpm add @snailicide/vite-plugin-shopify-theme-schema@workspace:*

pnpm --filter=[yourGlob] add @snailicide/vite-plugin-shopify-theme-schema@workspace:*

Build

pnpm --filter=@snailicide/vite-plugin-shopify-theme-schema build

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

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

Since i am new 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!