Rollup Userscript Template

screenshot of Rollup Userscript Template
react

Bundle javascript, typescript, react and JSX/TSX script files into a single userscript file with rollup

Overview

The rollup-userscript-template is an incredibly useful repository for anyone looking to create a userscript with modern web technologies. It effortlessly bundles TypeScript, React, and JSX/TSX files into a single userscript file using Rollup. This template serves as a solid foundation for developers who wish to streamline their userscript development process while leveraging the power of TypeScript and React.

Whether you're new to userscripts or an experienced developer, this template simplifies many of the cumbersome steps often involved in setting up and maintaining a project, allowing you to focus on writing your script rather than wrestling with configuration.

Features

  • Single Userscript Bundle: Easily combines all your source files into a single userscript located at dist/bundle.user.js, simplifying deployment.

  • TypeScript Support: Leverages TypeScript to add strong typing to your code, enhancing maintainability and reducing runtime errors.

  • React and JSX/TSX Compatibility: Seamlessly integrates with React, allowing you to create dynamic UIs with modern syntax.

  • Metablock Generation: Automatically generates the required metadata block for your userscript from package.json and meta.json, ensuring proper identification in userscript managers.

  • Development Script: Easily run a development server with npm run serve, which automatically updates the bundle on file changes and serves it locally.

  • Source Map Support: Includes the option to generate source maps for easier debugging during development.

  • Ready for Publishing: Provides a build script for creating a release version of your userscript without source maps, streamlining the deployment process.

  • Flexible Configuration: Offers options to customize your build process according to your project needs, including the ability to include or exclude React during bundling.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

rollup
Rollup

RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.