npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@swissquote/crafty-preset-react

v1.27.0

Published

React tools for crafty

Downloads

197

Readme

This preset provides Hot Module Replacement in React projects.

[TOC]

Installation

npm install @swissquote/crafty-preset-babel --save
module.exports = {
  presets: [
    // also works with crafty-preset-typescript or crafty-preset-swc
    "@swissquote/crafty-preset-babel",
    "@swissquote/crafty-runner-webpack",
    "@swissquote/crafty-preset-react"
  ],
  js: {
    app: {
      runner: "webpack",
      source: "js/app.js",
      hot: true, // Hot Module Replacement must be enabled for any kind of reload to work
      react: true // React features must be enabled per bundle
    }
  }
};

Hot Module Replacement

When doing modern JavaScript development, the usual process is Write code, Compile, Refresh the browser.

  • crafty watch removes the Compile step because it's run automatically.
  • Hot Module Replacement (HMR) was created to remove the Refresh the browser part.

More precisely, when doing a build with Webpack, in development mode, a Websocket client is added to the build and an HTTP server is started. When the page is loaded, each bundle will establish a Websocket connection to the server.

When you change a line of code, the server will rebuild them and send a notification through Websocket to the browser, the browser will then download the patch and apply the code change.

With React components, it will even re-render them without losing the current state.

Here's an example :

React Hot Module Replacement example

React Hot Module Replacement variants

There are two ways to make this work

Fast Refresh

This variant will work when using the Babel, TypeScript and SWC presets with Webpack.

Starting with React 16.13, Fast Refresh is the way to do Hot Module Replacement and doesn't require to add code to your application to get it to work. This is the recommended way and will be the default starting with Crafty 1.20.0

To enable it, add these two parameters to your bundle in crafty.config.js:

{
  hot: true,
  react: {
    refreshMode: "fast"
  }
}

You're now ready to run crafty watch and use Fast Refresh on all your components.

If you are importing React through Requirejs or other ways that aren't controlled by Webpack, make sure that you are using the development version while running in watch mode, otherwise no refresh will be applied.

React Hot Loader

This variant will work when using the Babel or TypeScript presets with Webpack.

Most versions of React can work with React Hot Loader, but in some cases can't keep the component's state on refresh or don't support hooks, it's a deprecated way to do and will be removed from Crafty in the future.

To enable it, add these two parameters to your bundle in crafty.config.js:

{
  hot: true,
  react: {
    refreshMode: "hot"
  }
}

Then you must mark your root component as hot-exported :

import React from "react";
import { hot } from "react-hot-loader";

const App = () => <div>Hello World!</div>;

export default hot(module)(App);

Only the root component needs this wrapping, the child components don't need it.

TypeScript

If you're using TypeScript you have one more step to make

npm install --save @types/webpack-env

Read more about Hot Module Replacement