Rollup Theme Extensions (Shopify Apps)

This is a generator for Rollup configs to build Shopify theme app extensions with typescript and (in the future) css preprocessors.

Features:

• Typescript compilation
• Typescript minification (optional)
• Rollup bundling
• Sourcemaps (currently turned off because Shopify doesn't allow sourcemaps file extension inside the /assets folder)
• CSS minification (optional)
• Custom source folder
• Custom output folder

Installation

npm install --save-dev rollup-theme-extensions rollup

Usage

in rollup.config.mjs

// @ts-check
import { createRollupConfig } from "rollup-theme-extensions";

const extensionsSourceDir = "extensions.src";
const extensionsDir = "extensions";

export default createRollupConfig({
  extensionsSourceDir,
  extensionsDir,
  minifyCss: true,
  minifyJs: true,
});

in package.json

{
  "scripts": {
    "ext:theme-build": "npx rollup -c",
    "ext:theme-watch": "npx rollup -c --watch"
  }
}

You can call your scripts however you want, the ones above are just examples, and you can also make them more specific to your project (like launch a specific config file).

Options

• extensionsSourceDir (string): The source folder where your extension files are located (it will look for folders that start with theme- prefix, and inside them, it will look for a folder called assets, and use those files for compilation).
• extensionsDir (string): The output folder where the compiled files will be placed (they will always be placed inside an assets folder).
• minifyCss (boolean): Whether to minify the CSS files or not.
• minifyJs (boolean): Whether to minify the JS files or not.

License

MIT License

Contributing

Feel free to open an issue or a pull request if you have any suggestions or improvements.

Author

muchisx