OK, I won't notify you again about this release, but will get in touch when a new version is available. If you'd rather skip all updates until the next major or minor version, let me know by commenting @dependabot ignore this major version or @dependabot ignore this minor version.

If you change your mind, just re-open this PR and I'll resolve any conflicts on it.

Bootstrapped new project using preact-cli with the Simple template. Running npm run dev or preact watch and after inspecting the devtools console this is the only message: [HMR] Waiting for update signal from WDS... But when I do some changes in src/components/test.jsx the page doesn't update, however if I do something in src/index.js HMR seems to work just fine... So what am I doing wrong? What am I missing?

"preact-cli": "^3.0.5",
"preact": "^10.5.13",
"preact-render-to-string": "^5.1.19"

Tested with 2 browsers: latest Firefox and Chromium on Windows 10.

• [ ] Check if updating to the latest Preact version resolves the issue

Describe the bug When using react-query's useQuery, building with prerender (default) makes preact build hang indefinitely, after a seemingly successful build (no error message, and normal looking list of created files):

 Build  [======] 95% (1.6s) emitting
                 bundle.7e56a.css ⏤  445 B
              bundle.*****.esm.js ⏤  20.8 kB
           polyfills.*****.esm.js ⏤  2.18 kB
       route-home.chunk.e6c71.css ⏤  74 B
    route-home.chunk.*****.esm.js ⏤  288 B
    route-profile.chunk.62c75.css ⏤  77 B
 route-profile.chunk.*****.esm.js ⏤  469 B
        route-home.chunk.723ad.js ⏤  291 B
                       index.html ⏤  1.24 kB
                         200.html ⏤  829 B
               polyfills.3cf93.js ⏤  2.17 kB
     route-profile.chunk.8b71c.js ⏤  486 B
                  bundle.73fb3.js ⏤  20.8 kB

This doesn't hang, and does exit normally when using preact build --no-prerender There is also no problems running this with preact watch

To Reproduce

Steps to reproduce the behavior:

1. Create default app with preact create
2. Add react-query dep, in my case: "react-query": "^3.15.2"
3. Change src/components/app.js to :

import { h } from 'preact';
import { Router } from 'preact-router';
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

import Header from './header';

// Code-splitting is automated for `routes` directory
import Home from '../routes/home';
import Profile from '../routes/profile';

export const queryClient = new QueryClient()

const TestElement = () => {
	const { data, isLoading } = useQuery('test', () => 'test1')
	if (isLoading) {
		return (<span>Loading...</span>)
	}

	return (<span>{data}</span>)
}

const App = () => (
	<div id="app">
		<QueryClientProvider client={queryClient}>
			<Header />
			<TestElement />
			<Router>
				<Home path="/" />
				<Profile path="/profile/" user="me" />
				<Profile path="/profile/:user" />
			</Router>
		</QueryClientProvider>
	</div>
)

export default App;

4. Run preact build

Expected behavior I would expect the build to exit after the files are built. In that test case, useQuery should receive instantly resolving test data, so I don't see the hang coming from "trying to get data to render".

This could of course be expected behaviour that I am not aware of, which I guess could be documented somewhere.

Agree! Thanks @rschristian!

With WMR being used a bit more now I figured it makes sense to add, just in case some user of yours reads that and thinks it's not supported.

And it does work flawlessly out of the box, which is great 😁

I had the same problem. Short explanation is that preact-cli expects 2 hardcoded entries for prerendering, and you'll get this error if you don't provide them. If I'm not mistaken, it's designed to work with only one entry module (and polyfills).

In this exact example the problem is that you are defining multiple custom entry chunks, and Preact is expecting only bundle and polyfills chunks.

The application I'm working on has a few public pages and an app that has a few more pages, and I wanted to separate them to have service worker only for non public pages and to have a smaller main bundle for public pages. My solution was:

• extract .ejs template. There should be /tmp/preact-cli/template.tmp.ejs on Unix like systems after build. Since I had just 2 entries 2 different .ejs template files worked for me.
• define my own entry based on this module. I simplified it because I'm using it only for production builds. This line is where you should change it to use your app root module https://github.com/preactjs/preact-cli/blob/master/packages/cli/lib/lib/entry.js#L31
• Replace template and chunks in HtmlWebpackPlugin plugins. Here's an example

Note that I'm not sure if this is an optimal solution at this point and I hope there will be a simpler solution after https://github.com/preactjs/preact-cli/issues/1108.

Codecov Report

Merging #131 (735e642) into master (d55048d) will not change coverage. The diff coverage is n/a.

@@            Coverage Diff            @@
##            master      #131   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           33        33           
  Lines          422       422           
  Branches        57        53    -4     
=========================================
  Hits           422       422           

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update d55048d...735e642. Read the comment docs.

I think we need some basic color conversion algorithm to ensure better performance. Right now using a third-party library like tinycolor2 causes app freeze.

Usecase: I want to allow the user to either choose a hex color or rgba color. We are storing hex code at the backend so whenever the user chooses a rgba color we need to convert that to a hex8 string. but since the RgbaColorPicker accepts RgbColor type we need to convert the color to that everytime the color changes. When you constantly do this in RgbaColorPicker it crashes the app.

Ways to reproduce: Open the code sandbox link: https://codesandbox.io/s/react-colorful-wlm00 Try changing the color continuously and quickly, it will work fine in case of rgb. Now move the alpha slider and try the same again, after some time it freezes.

Thanks for the quick reply

We're not planning to add all of the color conversion methods to the color picker itself since it increases the picker size ~3x times. react-colorful is a micro-library and it aims to be as small as possible.

BTW: If you looking for a better converter, check our new library out. It's 3 times faster than tinycolor2. https://github.com/omgovich/colord

Hi! Don't run the conversion on every tick and skip it if the value is already in the valid color space. We have an example in our README that illustrates a proper approach: https://codesandbox.io/s/6fp23?file=/src/CustomPicker.js

I think we need some basic color conversion algorithm to ensure better performance. Right now using a third-party library like tinycolor2 causes app freeze.

Usecase: I want to allow the user to either choose a hex color or rgba color. We are storing hex code at the backend so whenever the user chooses a rgba color we need to convert that to a hex8 string. but since the RgbaColorPicker accepts RgbColor type we need to convert the color to that everytime the color changes. When you constantly do this in RgbaColorPicker it crashes the app.

Ways to reproduce: Open the code sandbox link: https://codesandbox.io/s/react-colorful-wlm00 Try changing the color continuously and quickly, it will work fine in case of rgb. Now move the alpha slider and try the same again, after some time it freezes.