https://github.com/maxchang3/userscript-tsx-starter
A userscript starter with vite-plugin-monkey + TypeScript + JSX (via jsx-dom).
https://github.com/maxchang3/userscript-tsx-starter
greasemonkey starter tampermonkey userscript vite vite-plugin-monkey
Last synced: 9 months ago
JSON representation
A userscript starter with vite-plugin-monkey + TypeScript + JSX (via jsx-dom).
- Host: GitHub
- URL: https://github.com/maxchang3/userscript-tsx-starter
- Owner: maxchang3
- Created: 2025-05-06T14:38:24.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-05-06T16:18:25.000Z (9 months ago)
- Last Synced: 2025-05-08T23:52:33.668Z (9 months ago)
- Topics: greasemonkey, starter, tampermonkey, userscript, vite, vite-plugin-monkey
- Language: TypeScript
- Homepage:
- Size: 22.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# UserScript TSX Starter
A modern TypeScript-based development setup for creating UserScripts, with:
* **JSX/TSX Support**: Write UI components in JSX, compiled to native DOM operations (By [`jsx-dom`](https://github.com/alex-kinokon/jsx-dom))
* Uses the UMD build via [`@maxchang/jsx-dom`](https://github.com/maxchang3/jsx-dom) for `@require` CDN compatibility
* **vite-plugin-monkey**: Automatically manages UserScript metadata and builds optimized scripts
Based on [`create-monkey/template-solid-ts`](https://github.com/lisonge/vite-plugin-monkey/tree/main/packages/create-monkey/template-solid-ts) replace solidjs with jsx-dom.
## Getting Started
### Installation
```bash
npm install # or pnpm install or yarn install
```
## Development
### `npm run dev` or `npm start`
Starts the development server with hot-reload enabled.
- Open [http://localhost:3000](http://localhost:3000) in your browser
- Changes will automatically refresh the page
### `npm run build`
Creates production-ready files in the `dist` folder:
- Optimized bundle with proper production settings
- Minified code with content hashing
- Ready-to-use UserScript that can be installed in Tampermonkey or other UserScript managers
## Deployment
The built UserScript in the `dist` folder can be:
- Manually installed in your UserScript manager
- Hosted on any static file hosting (GitHub Pages, Netlify, etc.)
- Shared directly with other users