vite-plugin-shopline-sline

Vite plugin for Shopline themes that generates components/vite-tag.html with Sline template syntax.

Install

pnpm add -D vite-plugin-shopline-sline

Usage

import { defineConfig } from 'vite'
import sline, { clean } from 'vite-plugin-shopline-sline'

export default defineConfig({
  plugins: [
    clean(),
    sline({
      themeRoot: './',
      assetsDir: 'public',
      sourceCodeDir: 'frontend',
      entrypointsDir: 'frontend/entrypoints',
      additionalEntrypoints: [],
      componentDir: 'components',
      componentFile: 'vite-tag.html'
    })
  ],
  build: {
    emptyOutDir: false
  }
})

Use it in Sline templates:

{{#component "vite-tag" path="theme.ts" /}}
{{#component "vite-tag" path="theme.ts" preload_stylesheet=true /}}

Generated Component (Sline)

The plugin generates Sline-style statements such as:

{{#var path = props.path /}}
{{#set path = path | replace("@/", "../") /}}
{{#if path == "/frontend/entrypoints/theme.ts" || path == "theme.ts" }}
  <script src='{{ "theme.js" | asset_url() }}' type="module" crossorigin="anonymous"></script>
{{/if}}

For stylesheet handling:

{{#if preload_stylesheet}}
<link rel="preload" href='{{ "theme.css" | asset_url() }}' as="style">
{{#else/}}
<link rel="stylesheet" href='{{ "theme.css" | asset_url() }}' media="all">
{{/if}}

In dev mode, it also outputs @vite/client and React refresh preamble (when React plugin is enabled).

Options

• themeRoot (default: './'): Shopline theme root.
• assetsDir (default: 'public'): assets output directory under themeRoot.
• sourceCodeDir (default: 'frontend'): source directory.
• entrypointsDir (default: 'frontend/entrypoints'): entrypoints directory.
• additionalEntrypoints (default: []): additional file/glob entrypoints.
• componentDir (default: 'components'): generated Sline component directory.
• componentFile (default: 'vite-tag.html'): generated Sline component filename.
• versionNumbers (default: true): keep asset_url() behavior in generated template.