https://github.com/sabersalv/template-userscript

UserScript Template with Typescript, Esbuild, React/Preact/JSX, fetch polyfill, SVG loader, Prettier, Eslint
https://github.com/sabersalv/template-userscript

Last synced: 3 months ago
JSON representation

UserScript Template with Typescript, Esbuild, React/Preact/JSX, fetch polyfill, SVG loader, Prettier, Eslint

• Host: GitHub
• URL: https://github.com/sabersalv/template-userscript
• Owner: sabersalv
• License: mit
• Created: 2021-09-25T01:50:25.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-01-29T13:16:41.000Z (almost 3 years ago)
• Last Synced: 2024-08-02T14:07:32.804Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 13.7 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-pt - sabersalv/template-userscript

README

        
# Hello

> Click "Use this template" above

## Getting Started

Typescript, Esbuild, Preact/JSX, fetch polyfill, SVG loader, Emotion, Prettier, Eslint

```jsx

// Build UI

import { render } from 'react-dom'

import { useState  } from 'react'

function Button() {

  const [conuter, setCounter] = useState(0)

  return  setCounter(counter + 1)}>Click me! {counter}

}

render(, document.body)  // appendChild

// insertBefore

const target = document.querySelector('#target')

const div = document.createElement('div')

render(, div)

target.parentNode.insertBefore(div.firstChild, target)

// Style

// You can replace Emotion with any CSS-in-JS, CSS Modules or Plain CSS file

import { css } from '@emotion/css'

const buttonStyle = css`

  color: blue;

  &:hover {

    color: red;

  }

`

Hello

// Import svg file

import HomeIcon from './home.svg'

render(, document.body)

// Fetch polyfill

const res = await fetch(url)

const body = await res.json()

```

## Development

```shell

npm install -g npm-check-updates && ncu -u    # Upgrade deps

yarn                # Install deps

yarn start          # Start deployment, watch mode

yarn build          # build for production

```