rollup-plugin-shopify-liquid-script
v1.0.0
Published
A Rollup plugin that generates Liquid templates for importing JavaScript files, with support for Shopify Liquid and custom SystemJS import mapping.
Downloads
78
Maintainers
Readme
Shopify Liquid Import Scripts Plugin for Rollup
A Rollup plugin that generates Liquid templates for importing JavaScript files, with support for Shopify Liquid and custom SystemJS import mapping.
Features
- Generates Liquid templates to import JavaScript files into your Shopify store.
- Configures SystemJS import mappings for use with Shopify Liquid.
- Allows customization of the assets directory and Liquid template directory.
Installation
To install the plugin, use npm, yarn, or pnpm:
npm install --save-dev rollup-plugin-shopify-liquid-script
or
yarn add --dev rollup-plugin-shopify-liquid-script
or
pnpm add --save-dev rollup-plugin-shopify-liquid-script
Usage
In your rollup.config.js
, include the plugin in the plugins
array and specify your options as needed:
import { defineConfig } from 'rollup';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { globSync } from 'glob';
import shopifyLiquidScript from 'rollup-plugin-shopify-liquid-script';
const entryPoints = globSync("./src/entrypoints/**/*");
export default defineConfig({
input: entryPoints,
output: {
dir: "assets",
format: "system", // Ensure the format is set to 'system'
manualChunks: {
stencil: ["@stencil/core"],
},
},
treeshake: true,
plugins: [
resolve({ extensions: [".mjs", ".js", ".json", ".node", ".tsx", ".ts"] }),
commonjs(),
shopifyLiquidScript(),
],
});
Important Notes
Output Format: The Rollup output format must be set to
'system'
. This is necessary to ensure that the generated Liquid templates correctly map the SystemJS imports for use in Shopify.SystemJS Loader: The generated Liquid templates require SystemJS to load the JavaScript modules. Include the following script tag in your Shopify theme:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/system.min.js"></script>
Options
The plugin accepts the following options:
export type Options = {
/**
* The directory path where assets are located. Usually this should be 'assets'.
* @default 'assets'
*/
assetsDir?: string;
/**
* The directory path where Liquid files should be generated. Usually this should be 'snippets'.
* @default 'snippets'
*/
liquidDir?: string;
};
assetsDir
: Specifies the directory where the generated assets will be placed. By default, this is set to"assets"
.liquidDir
: Specifies the directory where the Liquid templates will be generated. By default, this is set to"sections"
.
Output Example
The generated Liquid section files will include SystemJS configuration in the following format:
<script>SystemJS.config({"map":{"./entry-1.js":"{{ 'entry-1.js' | asset_url }}","./stencil-BcHQo1kZ.js":"{{ 'stencil-BcHQo1kZ.js' | asset_url }}","./module-1-Ctc87KA9.js":"{{ 'module-1-Ctc87KA9.js' | asset_url }}"}})</script>
<script src='{{ 'entry-1.js' | asset_url }}}'></script>
This output ensures that your JavaScript files are correctly imported and mapped using SystemJS in your Shopify store.
Example
Here is an updated example configuration in rollup.config.js
:
import { defineConfig } from 'rollup';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { globSync } from 'glob';
import shopifyLiquidScript from 'rollup-plugin-shopify-liquid-script';
const entryPoints = globSync("./src/entrypoints/**/*");
export default defineConfig({
input: entryPoints,
output: {
dir: "assets",
format: "system",
manualChunks: {
stencil: ["@stencil/core"],
},
},
treeshake: true,
plugins: [
resolve({ extensions: [".mjs", ".js", ".json", ".node", ".tsx", ".ts"] }),
commonjs(),
shopifyLiquidScript({
assetsDir: "assets",
liquidDir: 'snippets',
}),
],
});
In this example:
- The assets will be output to the
"assets"
directory. - The Liquid templates will be generated in the
"snippets"
directory. - The output format is set to
'system'
to ensure compatibility with SystemJS. - The
manualChunks
option is used to separate@stencil/core
into its own chunk.
License
This project is licensed under the MIT License. See the LICENSE file for details.