/rollup-theme-extensions

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

Primary LanguageTypeScript

Rollup Theme Extensions (Shopify Apps)

NPM Version GitHub last commit (branch)

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