• Stars
    star
    351
  • Rank 120,906 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Hot Module Reloading for Preact

Prefresh

Fast-refresh for Preact!

Integrations

Writing your own integration

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.

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

Instead do:

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 or @prefresh/next with IE11, you'll need to transpile the @prefresh/core and @prefresh/utils packages.

For Next.js you can install next-transpile-modules and add the following code snippet to your next.config.js.

const withTranspiledModules = require('next-transpile-modules')([
  '@prefresh/core',
  '@prefresh/utils',
]);

module.exports = withTM({
  /* regular next.js config options here */
});

More Repositories

1

preact

โš›๏ธ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
JavaScript
36,650
star
2

wmr

๐Ÿ‘ฉโ€๐Ÿš€ The tiny all-in-one development tool for modern web apps.
JavaScript
4,928
star
3

preact-cli

๐Ÿ˜บ Your next Preact PWA starts in 30 seconds.
JavaScript
4,685
star
4

signals

Manage state with style in every framework
TypeScript
2,105
star
5

preact-router

๐ŸŒŽ URL router for Preact.
JavaScript
972
star
6

preact-compat

ATTENTION: The React compatibility layer for Preact has moved to the main preact repo.
JavaScript
949
star
7

awesome-preact

A curated list of amazingly awesome things regarding Preact ecosystem ๐ŸŒŸ
885
star
8

preact-render-to-string

๐Ÿ“„ Universal rendering for Preact: render JSX and Preact components to HTML.
JavaScript
574
star
9

compressed-size-action

GitHub Action that adds compressed size changes to your PRs.
JavaScript
541
star
10

next-plugin-preact

Next.js plugin for preact X
JavaScript
391
star
11

preact-www

๐Ÿ“– Preact documentation website.
JavaScript
358
star
12

preact-custom-element

Wrap your component up as a custom element
JavaScript
356
star
13

preact-devtools

Browser extension for inspection Preact applications
TypeScript
295
star
14

preset-vite

Preset for using Preact with the vite bundler
TypeScript
256
star
15

eslint-config-preact

Unopinionated baseline ESLint config for Preact and Preact CLI codebases.
JavaScript
85
star
16

enzyme-adapter-preact-pure

Preact adapter for the Enzyme UI testing library
TypeScript
67
star
17

preact-iso

Isomorphic utilities for Preact
JavaScript
55
star
18

preact-ssr-prepass

Drop-in replacement for react-ssr-prepass
JavaScript
47
star
19

create-preact

Create a Vite-powered Preact app in seconds
JavaScript
35
star
20

preact-integrations

A collection of sample apps demonstrating Preact's compatibility with various 3rd party libraries
JavaScript
35
star
21

rfcs

RFCs for changes and ideas in relation to Preact
30
star
22

babel-plugin-transform-replace-expressions

A Babel plugin for replacing expressions with other expressions
JavaScript
23
star
23

jest-preset-preact

Jest preset for testing Preact apps
JavaScript
19
star
24

babel-plugin-transform-rename-properties

A Babel plugin for renaming JavaScript properties
JavaScript
19
star
25

legacy-compat

React 15 compatibility layer for Preact
JavaScript
16
star
26

preact-netlify

Preact's netlify CMS template
JavaScript
15
star
27

playwright-ct

Preact adapter for Playwright Component testing
TypeScript
15
star
28

compat-alias-package

JavaScript
10
star
29

babel-plugin-transform-hook-names

Add custom hook names for devtools
TypeScript
7
star
30

migrate-preact-x

JavaScript
6
star
31

preact-cli-experiment

TypeScript
4
star
32

codesandbox-template

JavaScript
4
star
33

.github

Default community files for the PreactJS organization
3
star