prefresh - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #machine-learning #deep-learning #java #windows #awesome #kubernetes #awesome-list #security #openai #ios

prefresh

(★ 389)

Hot Module Reloading for Preact

File Explorer

Download Latest Version (.zip)

- clean-types-resolve.md
- config.json
- many-hotels-make.md
- README.md
- - has-unpublished-packages.mjs
  - stage-packages.mjs
- - release.yml
  - test.yml
- CODEOWNERS
- FUNDING.yml
- pre-commit
- - .npmignore
  - CHANGELOG.md
  - LICENSE
  - package.json
  - README.md
- - .npmignore
  - CHANGELOG.md
  - LICENSE
  - package.json
  - README.md
- - .npmignore
  - CHANGELOG.md
  - LICENSE
  - package.json
  - README.md
- - CHANGELOG.md
  - index.d.ts
  - LICENSE
  - package.json
  - README.md
- - .npmignore
  - CHANGELOG.md
  - LICENSE
  - package.json
  - README.md
- - .npmignore
  - CHANGELOG.md
  - index.d.mts
  - index.d.ts
  - LICENSE
  - package.json
  - README.md
- - .npmignore
  - CHANGELOG.md
  - LICENSE
  - package.json
  - README.md
- - .npmignore
  - CHANGELOG.md
  - LICENSE
  - package.json
  - README.md
- constants.js
- index.test.js
- signals.test.js
- suspense.test.js
- utils.js
.editorconfig
.gitignore
.prettierignore
CODE_OF_CONDUCT.md
CONTRIBUTING.md
jest.config.js
LICENSE
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md

# Installation Guide

1. Get the code

git clone https://github.com/preactjs/prefresh

Downloads the entire project code from GitHub to your computer.

cd prefresh

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Prefresh

Fast-refresh for Preact!

## Integrations

- [@web/dev-server](https://github.com/preactjs/prefresh/tree/main/packages/web-dev-server)
- [gatsby](https://www.gatsbyjs.org/packages/gatsby-plugin-preact/)
- [nollup](https://github.com/preactjs/prefresh/tree/main/packages/nollup)
- [rolldown](https://github.com/preactjs/prefresh/tree/main/packages/rolldown)
- [vite](https://github.com/preactjs/prefresh/tree/main/packages/vite)
- [webpack](https://github.com/preactjs/prefresh/tree/main/packages/webpack)

[Writing your own integration](https://dev.to/jovidecroock/prefresh-fast-refresh-for-preact-26kg)

## Best practices

### Recognition

We need to be able to recognise your components, this means that components should
start with a capital letter and hook should start with `use` followed by a capital letter.
This allows the Babel plugin to effectively recognise these.

Do note that a component as seen below is not named.

```jsx
export default () => {
  return <p>Want to refresh</p>;
};
```

Instead do:

```jsx
const Refresh = () => {
  return <p>Want to refresh</p>;
};

export default Refresh;
```

When you are working with HOC's be sure to lift up the `displayName` so we can
recognise it as a component.

## Usage in IE11

If you want to use `@prefresh/webpack` with IE11, you'll need to transpile the `@prefresh/core` and `@prefresh/utils` packages.