profile
viewpoint
Jason Miller developit @google Cambridge, MA https://jasonformat.com Web DevRel at @google. Creator of @preactjs and other tiny libraries.

developit/asyncro 484

⛵️ Beautiful Array utilities for ESnext async/await ~

choojs/choop 97

🚂⚛️ - choo architecture for preact

developit/babel-preset-preact 28

Babel preset to transform JSX into h() calls

developit/babel-preset-es2015-minimal 5

:lipstick: Babel's es2015 preset in loose mode without frills.

developit/babel-preset-es2015-minimal-rollup 4

Babel es2015 preset in loose mode without frills, made for Rollup.

developit/28kb-react-redux-routing 3

React + Redux + Routing Stack for just 28kb

billneff79/recharts 2

Redefined chart library built with React and D3

developit/apple-music-js 2

A music streaming service created from the ground up using ReactJS & Redux

developit/audiolib.js 2

audiolib.js is a powerful audio tools library for javascript.

developit/AudioSprite.js 2

Seamlessly play named "sprite" regions within a single shared audio file.

PR opened developit/microbundle

repo token for changesets
+1 -1

0 comment

1 changed file

pr created time in 3 hours

create barnchdevelopit/microbundle

branch : changesets-token

created branch time in 3 hours

MemberEvent

issue commentpreactjs/preact

Differences in Preact Suspense and React Suspense

This likely changed in 10.5.

ahabhgk

comment created time in 13 hours

push eventpreactjs/preact

Marvin Hagemeister

commit sha be238f7f84892558db0d186492bb525ab4222e2a

Release 10.5.2

view details

Marvin Hagemeister

commit sha e32fc87cfb1b3376c3d6dd478771a776a135d591

Merge pull request #2770 from preactjs/release-10.5.2 Release 10.5.2

view details

Jason Miller

commit sha 3da86d34672c163fe9e1e8daecceaf911f32d94e

Merge branch 'master' into jsx-runtime-optimizations

view details

push time in a day

PR opened preactjs/preact

Optimizations for preact/jsx-runtime

This improves VNode creation performance by 7%, at the expense of a small size increase for the jsx-runtime entry that should compress away in bundled applications.

+22 -13

0 comment

1 changed file

pr created time in a day

create barnchpreactjs/preact

branch : jsx-runtime-optimizations

created branch time in a day

PR opened aurbano/react-ds

Remove inline-elements transform

This transform should never be used, and is actively harmful for performance since it causes deopts within React. It also breaks Preact compatibility.

+1 -2

0 comment

1 changed file

pr created time in a day

push eventdevelopit/react-ds

Jason Miller

commit sha 2828462e09103bde9d91cccabad091742008a680

Remove inline-elements transform This transform should never be used, and is actively harmful for performance since it causes deopts within React. It also breaks Preact compatibility.

view details

push time in a day

fork developit/react-ds

:fire: React Drag To Select component (tiny, touch friendly, and no dependencies!)

https://aurbano.github.io/react-ds/

fork in a day

issue commentdevelopit/microbundle

Better tree-shaking for React components

I believe currently we remove @__PURE__ annotations, which is affecting this.

omgovich

comment created time in a day

PullRequestReviewEvent

push eventpreactjs/preact-router

Jason Miller

commit sha 3804b14a47b786c1f2c20a563d04f4974b61fb2d

Update util.js

view details

push time in 2 days

push eventpreactjs/preact-router

Jason Miller

commit sha bf1e4f7213d3de30b527ba11deb63aad53e971fd

Update tests

view details

push time in 2 days

PR opened preactjs/preact-router

Proposal: unmatched optional path segments should be `undefined` in props

Currently, optional path segments that do not match a current URL produce same-named props with an empty string value:

exec('/posts', '/posts/:user?/:id?', {})
// { user: "", id: "" }

exec('/posts/bob', '/posts/:user?/:id?', {})
// { user: "bob", id: "" }

With this PR, the value for optional path segments that have no match is an empty string. Matched path segments that are empty will still produce an empty string.

exec('/posts', '/posts/:user?/:id?', {})
// { user: undefined, id: undefined }

exec('/posts/bob', '/posts/:user?/:id?', {})
// { user: "bob", id: undefined }

This is a major change, because it means any defaultProps for route components will be applied for empty/missing route parameters - currently they are not.

Fixes #381.

+2 -2

0 comment

1 changed file

pr created time in 2 days

create barnchpreactjs/preact-router

branch : optional-path-segments-undefined

created branch time in 2 days

startedTimDaub/preact-touchable-dock

started time in 2 days

pull request commentdevelopit/redaxios

fix: added check for document, so redaxios will not break in Node

Ah! Yes I actually helped with the fetch polyfill, I should have thought of that!

AlexandrHoroshih

comment created time in 2 days

issue commentbabel/babel

transform-react-jsx produces duplicate `children` prop key

Babel generates the children prop itself in an object literal - isn't that assumption already being made? It's not an arbitrary object, but one only Babel constructs and adds properties to.

developit

comment created time in 2 days

issue openedbabel/babel

transform-react-jsx produces duplicate `children` prop key

Bug Report

  • [x] I would like to work on a fix!

Current behavior A clear and concise description of the behavior.

// Input:
<div children={<a />}><b /></div>;

// Output:
_jsx("div", { children: _jsx("a", {}), children: _jsx("b", {}) });
//                                     ^^^^^^^^ duplicate key

Expected behavior The above should compile to a _jsx call having a props object literal that contains only a single children key.

// Input:
<div children={<a />}><b /></div>;

// Output:
_jsx("div", { children: _jsx("b", {}) });

Babel Configuration

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "runtime": "automatic"
    }]
  ]
}
  • Babel version(s): 7.11.6

Possible Solution JSX Children should replace any children JSXAttribute.

created time in 2 days

pull request commentwebpack/webpack

new Worker() support

Right - currently it would not work because of the source check when Worker is an imported identifier.

@evilebottnawi I know, my point was that this makes it impossible to write code that supports both web and node.

sokra

comment created time in 2 days

pull request commentdevelopit/redaxios

fix: added check for document, so redaxios will not break in Node

Hi there - this doesn't make redaxios work in Node, it just makes it not error out. You should be using Axios in Node, and only installing the Redaxios alias for browser compilation. In Next you can do this by checking env.ssr.

AlexandrHoroshih

comment created time in 2 days

startedandrewiggins/v8-deopt-viewer

started time in 2 days

pull request commentwebpack/webpack

new Worker() support

@sokra I might suggest avoiding using raw import { Worker } from "worker_threads" in Node since the API differs nontrivially from Web Workers (events don't implement Event, postMessage isn't in global scope, etc). Guy Bedford and I put together a small "polyfill" that smoothes out these differences here, might make for a more consistent default.

sokra

comment created time in 2 days

pull request commentpreactjs/preact-cli

Fix: Include ReadMe when publishing package

🦙!

rschristian

comment created time in 3 days

PullRequestReviewEvent

issue commentdevelopit/htm

Support HTML5 void elements

FWIW one of the reasons I don't think we're likely to consider this is because there are a lot of other HTML features that are unsupported in HTM. Adding a feature like void elements is net negative for performance, but it increases the likelihood of folks thinking HTM is an HTML parser. This assumption breaks down pretty quickly - attribute names are case-sensitive, whitespace is trimmed, etc.

HTM is also most often used with Virtual DOM libraries, which further diverge from HTML since they tend to adopt HTML's property semantics for "props" rather than the string-only semantics of HTML attributes. We've actually had cases in Preact where folks using HTM have run into issues using namespaced attributes. VDOM doesn't have those, and they're only "supported" in HTM because it's faster and smaller to pass-through namespaces than it would be to prevent their usage.

Siilwyn

comment created time in 3 days

issue commentdevelopit/htm

Shouldn’t multiple root elements become a fragment?

Hiya! Multiple roots returns an Array, because that's the easiest solution that works in all frameworks:

const root = html`
  <h1>Quiz</h1>
  ${entriesUi}
  <hr />
  <${Summary} entries=${entries} />
`;

console.log(root);
[<h1>Quiz</h1>, entriesUi, <hr />, <Summary ../>]

It's not necessary to use a Fragment for this, because this is semantically an index-ordered list of children. It's best represented as an Array, because there is no useful key that could be produced for the items.

React's "key" warning is only a high-level generalized piece of guidance, and it does not apply to auto-generated lists of items for which there is no viable unique key. I have a StackOverflow post that explains this more in-depth, but the gist is that index keys are actually extremely harmful to diffing and should never be used - at best they duplicate the no-key behavior, at worst they cause trees to be remounted on every render.

rauschma

comment created time in 3 days

issue commentdevelopit/htm

Component end-tags ("<//>") need link / explanation

@broofa htm version 1. I believe the readme mentions this: https://github.com/developit/htm#improvements-over-jsx

broofa

comment created time in 3 days

push eventdevelopit/htm

yuler

commit sha e2b76d060fd3eaecdf5325342c5dba32e22b0ed6

Fix example typo in buid.mjs

view details

Jason Miller

commit sha e241d3af2249f2ea3a23c6d180936436345fac62

Merge pull request #178 from yuler/master Fix example typo in buid.mjs

view details

push time in 3 days

PR merged developit/htm

Fix example typo in buid.mjs
+2 -2

0 comment

1 changed file

yuler

pr closed time in 3 days

PullRequestReviewEvent

push eventdevelopit/htm

Jason Miller

commit sha 158b2d7ff65e8dbdd2ad80f8a430ce031a23abaa

Update index.mjs

view details

push time in 3 days

PR opened developit/htm

Reviewers
Add `terse` option
+9 -3

0 comment

1 changed file

pr created time in 3 days

create barnchdevelopit/htm

branch : terse-option

created branch time in 3 days

issue closedpreactjs/preact

Do we still need tools like why-did-you-render?

I'm new to Preact.

Long time ago I was using React and it was almost necessary to use this tool to speed everything up: https://github.com/welldone-software/why-did-you-render.

Today I started working with Preact for the first time and I was wondering if today we still need a tool like that.

And if so, how can we make it work for Preact?

From here it seems to me that nobody knows how: https://github.com/welldone-software/why-did-you-render/issues/113.

closed time in 5 days

frederikhors

issue commentpreactjs/preact

Do we still need tools like why-did-you-render?

Hi there! Preact has its own developer tools that you can install as a browser extension: https://preactjs.github.io/preact-devtools/

As for the "Why Did You Render" library, the reason there is no specific documentation on how to set it up with Preact is because it works out-of-the-box with preact/compat. Just set up the aliases and it'll print the same data it would for React.

Here's their codesandbox that I forked and dropped in the aliases on: https://codesandbox.io/s/why-did-you-render-preact-6kcum?file=/package.json (in the case of codesandbox the aliases are a little weird, normally it's {"react":"npm:@preact/compat"} or similar)

frederikhors

comment created time in 5 days

startedandrewiggins/collect-react-stats

started time in 6 days

Pull request review commentpreactjs/preact

Hydration Suspend & Resume

 export interface Component<P = {}, S = {}> extends PreactComponent<P, S> {  	_childDidSuspend?( 		error: Promise<void>,-		suspendingComponent: Component<any, any>+		suspendingComponent: Component<any, any>,+		oldVNode?: VNode

I wasn't sure if we needed to add it in order to fix the issue you mentioned about picking the wrong vnode on which to check _hydrating.

developit

comment created time in 7 days

PullRequestReviewEvent

Pull request review commentpreactjs/preact

Hydration Suspend & Resume

 Suspense.prototype._childDidSuspend = function(promise, suspendingComponent) { 		} 	}; -	if (!c._pendingSuspensionCount++) {+	/**+	 * We do not set `suspended: true` during hydration because we want the actual markup+	 * to remain on screen and hydrate it when the suspense actually gets resolved.+	 * While in non-hydration cases the usual fallback -> component flow would occour.+	 */+	const vnode = c._vnode;

Ah - yeah currently we're setting it on both the bailed-out VNode and the VNode for the component that handled the bailout: https://github.com/preactjs/preact/pull/2754/files#diff-b5e3843a998fbd0144a6ac5b1b7536a4R33

developit

comment created time in 7 days

PullRequestReviewEvent

Pull request review commentpreactjs/preact

Hydration Suspend & Resume

 Suspense.prototype._childDidSuspend = function(promise, suspendingComponent) { 		} 	}; -	if (!c._pendingSuspensionCount++) {+	/**+	 * We do not set `suspended: true` during hydration because we want the actual markup+	 * to remain on screen and hydrate it when the suspense actually gets resolved.+	 * While in non-hydration cases the usual fallback -> component flow would occour.+	 */+	const vnode = c._vnode;

You may be right. I need to clarify which vnode(s) we want to set the _hydrating bit on. My preference would be to set _hydrating on the vnode for the component that caught/handled the suspend, since technically we bail out of the tree at that point and must resume from that point.

developit

comment created time in 7 days

PullRequestReviewEvent

Pull request review commentpreactjs/preact

Hydration Suspend & Resume

 export interface VNode<P = {}> extends preact.VNode<P> { 	/** 	 * The [first (for Fragments)] DOM child of a VNode 	 */-	_dom: PreactElement | Text | null;+	_dom: PreactElement | null; 	/** 	 * The last dom child of a Fragment, or components that return a Fragment 	 */-	_nextDom: PreactElement | Text | null;+	_nextDom: PreactElement | null; 	_component: Component | null;+	_hydrating: boolean | null;

@andrewiggins this needs to be a tri-state though:

  • true: the vnode has DOM from bailout during hydration
  • false: the vnode has DOM from bailout during initial render (new tree creation)
  • null: the vnode has no DOM from bailout

We could use an int though, that's probably much better for perf.

developit

comment created time in 7 days

PullRequestReviewEvent

pull request commentpreactjs/preact

Fix rendering an SVG-element with xmlns:xlink-prop

That's a good summary. Now I should say, I totally want this to be a thing that "just works" too. There are two ways we can make that work without changing Preact core: a plugin that does this stuff, or an HTM plugin:

Option 1: A global Preact plugin

This just handles xmlns: globally so that anything using Preact (HTM, JSX, etc) won't error:

import { options } from "preact";
const old = options.vnode;
options.vnode = (vnode) => {
  for (let i in vnode.props) if (i.match(/^xmlns:/)) vnode.props[i] = undefined;
  if (old) old(vnode);
};

Here's a demo of this option: https://codesandbox.io/s/prod-bird-9ibc6?file=/src/logo.js:0-23

Option 2: HTM Adapter

HTM has a nice way to do things like this - it lets you process each parsed tag from the string before they get passed into Preact, so we can implement a replacement for htm/preact that removes xmlns:xlink attributes:

import htm from 'htm';
import { h } from 'preact';

const html = htm.bind(function(type, props) {
  for (let i in props) if (i.match(/^xmlns:/)) props[i] = undefined;
  return h.apply(this, arguments);
});

export const logo = html`
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="1.0625em" viewBox="0 0 108 14">
    <!-- etc -->
  </svg>
`;

Here's a demo of that option: https://codesandbox.io/s/jolly-pascal-pew39?file=/src/logo.js:38-72

One additional thing I thought of is actually separate, but maybe worth mentioning: SVG files exported from a design tool are usually much larger than they need to be, because they contain metadata and try to preserve the layers+objects as they were authored. You can run them through SVGOMG (or SVGO on the command line) to strip all this out.

vkentta

comment created time in 7 days

pull request commentpreactjs/preact

Fix rendering an SVG-element with xmlns:xlink-prop

It might be! No need to apologize, I was extremely slow getting around to reviewing this because my notifications setup is pretty unwieldy these days. You're right, this PR and the original issue you opened is very much the same PR was I thinking of. I've taken a few minutes to take stock of everything so I can make a more informed commentary (apologies for my terse contextless reply!).

I have two concerns relating to this change that I think make it worth reconsidering. I know it's a after-the-fact, and I apologize for being so slow on the review here.

(1) First, the "correct" input here would actually be <svg xmlnsXlink="...">. JSX, and by extension Virtual DOM, doesn't directly support authoring elements with namespaced attributes. In Preact, this comes from the fact that we prefer setting values as DOM properties rather than attributes. We do this partly for performance reasons, but also because properties allow complex values and are specified as JavaScript types, whereas attributes require serialization and are defined as HTML-specific types. This all boils down to: <svg xmlnsXlink="..."> would be the semantically correct way to expressxmlns:xlink` as a prop in VDOM, and doing so renders correctly:

https://codesandbox.io/s/blissful-glade-tmifr?file=/src/logo.js:103-147

Additionally, the xmlns attribute is technically not required when rendering on the client. When constructing DOM elements on the client, the XML namespace must be passed to document.createElementNS and can't be inferred from an attribute (here's where Preact does it).

I know this gets murky because HTM really looks like HTML, but HTM actually implements the semantics of JSX. There are a huge number of edge cases in HTML that are not supported, namespaced attributes is honestly one of the smaller differences (void tags and case sensitivity being the largest). In JSX, it's not possible to specify <svg xmlns:xlink="..">, and xmlnsXlink=".." would be used instead. (but...)

(2) The second thing I wanted to raise is mainly to check my understanding here since I'm by no means an SVG guru. The sandbox you provided works identically when I remove xmlns:xlink="..". Again, I'm not an expert, but I believe the default namespace for xlink is already the one you're providing. It's also worth noting that neither xmlns:xlink nor xmlnsXlink are supported by React, and xlink:href has actually been removed from SVG and will at some point be removed from browsers entirely.

So I guess for this PR, after having looked into all the context and noted some of the changes since Preact first gained SVG support, I worry that we're adding logic to handle an alternative way of specifying something that Preact already supported.

Preact's goal has always been to deliver the maximum possible value per byte, and I think in this case the extra logic would be really difficult to justify since it's duplicating the existing authoring format.

vkentta

comment created time in 8 days

push eventdevelopit/task-worklet

Jason Miller

commit sha e4bb0b4a39c69e0d2085d14f0d3e44206dbf0ef3

fix build

view details

Jason Miller

commit sha c0991996171df387cc5f19459ce5f4dc60930306

Merge branch 'master' into worker-task-queue

view details

push time in 8 days

push eventdevelopit/task-worklet

Jason Miller

commit sha e4bb0b4a39c69e0d2085d14f0d3e44206dbf0ef3

fix build

view details

push time in 8 days

push eventdevelopit/task-worklet

Jason Miller

commit sha e09cbe834e92bcdb5a862ccf422316f9740de204

readme fix

view details

push time in 8 days

push eventdevelopit/task-worklet

Jason Miller

commit sha 17f64d3f0eacf87088e60ed18023e3cc2a4fec79

readme fix

view details

push time in 8 days

PR opened developit/task-worklet

Add worker-task-queue package
+832 -11

0 comment

8 changed files

pr created time in 8 days

create barnchdevelopit/task-worklet

branch : worker-task-queue

created branch time in 8 days

push eventdevelopit/task-worklet

Jason Miller

commit sha 9b6c3b79ad0efb31c49e66122bf79fad55038ffe

Update build process and move to checkJs

view details

push time in 8 days

PullRequestReviewEvent

pull request commentstorybookjs/storybook

Preact: Keep the story state between rerenders

Hi all! The original fix from @BartWaardenburg was for Preact 8. Preact 10 was a rewrite and there is no longer any reason to do the clearing between renders.

dvoytenko

comment created time in 8 days

pull request commentpreactjs/preact

Fix rendering an SVG-element with xmlns:xlink-prop

@marvinhagemeister I thought this was a bug I introduced in my golfing PR that has already been fixed?

vkentta

comment created time in 8 days

issue commentdevelopit/microbundle

Minification breaks build but using Prettier fixes it 🤔

One thing to consider here: IndexedDB does not work with transpiled promises, because they fall outside of transaction boundaries. It looks like you're using a custom Babel config, which is unnecessary for Microbundle and probably causing this issue.

brandonpittman

comment created time in 8 days

issue commentdevelopit/microbundle

Minification breaks build but using Prettier fixes it 🤔

Right - re-reading, I'm assuming the code snippet you posted is the source (input to microbundle) then.

brandonpittman

comment created time in 8 days

issue commentdevelopit/microbundle

Minification breaks build but using Prettier fixes it 🤔

Hi @brandonpittman - is the above code sample before or after prettier runs on it?

brandonpittman

comment created time in 8 days

push eventpreactjs/preact-www

nikhog

commit sha 7d5d1549cdc0edaa6709a895bbd47307da5ca6a7

Added company to "We are using" section (#669) Added my company to the array. We switched to Preact after the introduction of Lighthouse v.6. This helped us greatly, performance-wise.

view details

push time in 9 days

PR merged preactjs/preact-www

Added company to "We are using" section

After the introduction of Lighthouse v.6. we switched to Preact, which helped us greatly performance-wise. Submitting my company to the list, in-case you'd like to include us in your showcase!

+5 -0

3 comments

2 changed files

nikhog

pr closed time in 9 days

PullRequestReviewEvent

push eventpreactjs/preact

Jason Miller

commit sha dfacdad6aad962401e76ec88266b0d4b42de22b3

size tweak for renderQueue

view details

Jason Miller

commit sha 37fecbf7fde9d6c30c8a0c7b35e29acc22eed2be

re-add process._rerenderCount (looks like its used by Prefresh)

view details

push time in 10 days

pull request commentlukeed/polka

Add @polka/compression package

I broke CI somehow - tests should be passing on 8/10/12 though (see 0f6bcbd).

developit

comment created time in 10 days

push eventdevelopit/polka

Jason Miller

commit sha 072fc788b26c46b26a24d14fcf4644add0616a6f

kick CI

view details

push time in 10 days

push eventdevelopit/polka

Jason Miller

commit sha ae5960cc208848978bda109e9c8fb82620437709

add stream piping test

view details

push time in 10 days

pull request commentlukeed/polka

Add @polka/compression package

Can probably get coverage back up by doing a test that uses createReadStream(file).pipe(res).

developit

comment created time in 10 days

push eventdevelopit/polka

Jason Miller

commit sha 0f6bcbd9172210338f3bf2d637bc79d25263b4d2

allow Node>=6

view details

push time in 10 days

push eventdevelopit/polka

Jason Miller

commit sha 749954671e117e3016c83468c770dd1595ed1341

skip brotli tests on unsupported node versions

view details

push time in 10 days

pull request commentlukeed/polka

Add @polka/compression package

Ah so the failing suite is because on Node < 12.7, this package automatically disables brotli (since its unsupported). I'll have the test check.

developit

comment created time in 10 days

push eventpreactjs/preact

Jason Miller

commit sha b8b2c8ea607c564e79926488dc1b0e4d2868600d

Fix effect tests to not rely on implicit suspend re-render

view details

Jason Miller

commit sha 4331d32d9feaf473442f54673f060631f4e42766

Only propagate errors when getDerivedStateFromError/componentDidCatch fail to re-render.

view details

push time in 10 days

PR opened lukeed/polka

Add @polka/compression package

This implements gzip + brotli (native) compression as a new @polka/compression package. It should be ready to go, with tests and docs.

+360 -0

0 comment

5 changed files

pr created time in 10 days

push eventdevelopit/polka

Jason Miller

commit sha 40e15ab2cbebb1aef338f1266e5d5550e66297dc

Add @polka/compression package

view details

push time in 10 days

create barnchdevelopit/polka

branch : add-compression-package

created branch time in 10 days

fork developit/polka

A micro web server so fast, it'll make you dance! :dancers:

fork in 10 days

issue commentpreactjs/preact-router

[feature request] onError handler to catch when lazy-loading fails

heh - yeah that's a much better solution @peterbe, I'll update.

peterbe

comment created time in 10 days

issue commentpreactjs/preact-router

[feature request] onError handler to catch when lazy-loading fails

I'm going to cross-post this from Slack for others - here are two options for handling preact-cli async component loading errors using preact-router.

Option 1: Simple

Option 2: Smart

This is nice because it's a drop-in replacement for preact-router, and it actually improves performance. It also makes it easy to add a "page loading" spinner/progress indicator. I use a design like this in most of my demos. Essentially, any time the Router is given a new URL to display, it first preloads the matched component for that route before switching to it - that saves a pointless render that would have blanked the screen, and also makes it possible to catch loading errors at the router:

class SmartRouter extends Router {
  routeTo(url) {
    this._pendingUrl = url;
    let { children, onLoading, onLoaded, onError } = this.props;
    children = [children].flatten();
    const route = this.getMatchingChildren(children, url, false)[0];
    if (!route) return false; // 404
    const Route = route.type;
    if (!Route || !Route.preload || Route.loaded) {
      return super.routeTo(url);
    }
    const ctx = { url, current: route };
    if (onLoading) onLoading(ctx);
    Route.preload(mod => {
      if (this._pendingUrl != url) return;
      Route.loaded = true;
      if (!mod) ctx.error = Error(`Failed to load ${url}`);
      if (onLoaded) onLoaded(ctx);
      if (mod) super.routeTo(url);
      else if (onError) onError(ctx);
      else setTimeout(() => { throw err; });
    });
    return true;
  }
}

usage:

import { Component } from 'preact';
import Home from '../routes/home';
import Profile from '../routes/profile';
import Settings from '../routes/settings';

export default class App extends Component {
  loadStart({ url, current }) {
    document.getElementById('progress').removeAttribute('hidden');
  }
  loadEnd({ url, current, error }) {
    document.getElementById('progress').setAttribute('hidden', '');
    // note: `error` is defined here if there was an error (can use instead of onError)
  }
  onError({ url, error }) {
    alert(`Failed to load ${url}: ${error}`);
  }
  render() {
    return (
      <SmartRouter onLoading={this.loadStart} onLoaded={this.loadEnd} onError={this.onError}>
        <Home path="/" />
        <Profile path="/profile" username="me" />
        <Profile path="/profile/:username" />
        <Settings path="/settings" />
        <NotFound default />
      </SmartRouter>
    );
  }
}

const NotFound = () => <div class="error"><h1>404: Not Found</h1></div>
peterbe

comment created time in 10 days

issue commentpreactjs/preact-router

[feature request] onError handler to catch when lazy-loading fails

I mentioned it on slack, but preact-router doesn't have any knowledge of async components - that's a preact-cli thing the router can't see.

peterbe

comment created time in 10 days

PR opened preactjs/preact

Hydration Suspend & Resume

This PR implements suspend & resume for both hydration and new tree construction. If rendering throws during hydration or new tree construction (first render of a component or tree), catching the error up the tree in something like an "Error Boundary" will attach the hydration state and available DOM tree to the boundary's VNode. Triggering a render on this node (via any mechanism) attempts to resume from this state. The throw/catch process can be repeated and will continue to preserve DOM state. Once rendering completes, affected VNodes are un-marked and the behavior no longer occurs.

+55 -12

0 comment

8 changed files

pr created time in 11 days

create barnchpreactjs/preact

branch : hydration-suspend-resume

created branch time in 11 days

push eventdevelopit/task-worklet

Jason Miller

commit sha 8c3279c2a24c793aa354c2248de8725921d1357b

New demo link

view details

push time in 11 days

push eventpreactjs/preact-cli

github-actions[bot]

commit sha 172e9ecb8f2db33f19e137d24e6eaea0baa8a405

Version Packages (#1416) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

view details

push time in 11 days

delete branch preactjs/preact-cli

delete branch : changeset-release/master

delete time in 11 days

PR merged preactjs/preact-cli

Version Packages

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and publish to npm yourself or setup this action to publish automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

Releases

preact-cli@3.0.2

Patch Changes

+159 -157

0 comment

4 changed files

github-actions[bot]

pr closed time in 11 days

issue commentdevelopit/microbundle

Can microbundle be used to create package subdirectories?

Hi @Teajey! Currently Microbundle assumes a single dist/output directory, which means it's not possible to have a single microbundle ... command bundle both a parent directory and subpackage directories.

However, you can still run microbundle multiple times - it's obviously a little slower, but it does work and it properly respects the package.json files in your subdirectory "packages":

{
  "scripts": {
    "build": "npm run -s build:core && npm run -s build:other",
    "build:core": "microbundle",
    "build:other": "cd packages/other && microbundle"
  }
}

Just make sure your subpackages properly import the @namespace/package identifier for your main package and never do import '../..'. On the plus side, if you're not using yarn workspaces or anything like that, you can link the subpackage to the parent package (in a "postinstall" script if you want) by doing npm link ../.. - any imports for the parent package name will resolve to your root directory.

Getting this properly supported in Microbundle without the workarounds is pretty high on my list of things to do. I have a bunch of repositories that are laid out this way (Preact, HTM, unfetch..), and right now it's a little tedious.

Teajey

comment created time in 11 days

Pull request review commentpreactjs/preact

Fix Suspense Hydration

 export function _catchError(error, vnode) { 					component.componentDidCatch(error); 				} -				if (hasCaught)-					return enqueueRender((component._pendingError = component));+				if (hasCaught) {+					component._pendingError = component;+					vnode._hydrating = wasHydrating;

wasHydrating is the vnode._hydrating value from the original (innermost) vnode, whereas here vnode refers to the current value of the loop on L15.

developit

comment created time in 11 days

PullRequestReviewEvent

issue commentpreactjs/preact-cli

Develop and debug ServiceWorker

Hi @JCofman - Preact CLI doesn't actually compile SW during development (preact watch). It generates a sw.js that removes any stuck production Service Worker, but that's it.

I think it would be interesting to have the option of enabling the SW generation for dev builds.

JCofman

comment created time in 11 days

push eventpreactjs/preact-cli

Jason Miller

commit sha f96ed22cbb31db978c3c2db79f6d9e00cb43bfb3

Use custom auth for changesets (#1417) This will create changesets PRs as the user @preact-bot. See https://github.com/peter-evans/create-pull-request/issues/48#issuecomment-536204092

view details

push time in 11 days

delete branch preactjs/preact-cli

delete branch : bot-auth

delete time in 11 days

PR merged preactjs/preact-cli

Reviewers
Use custom auth for changesets

This will create changesets PRs as the user @preact-bot. See https://github.com/peter-evans/create-pull-request/issues/48#issuecomment-536204092

+1 -1

1 comment

1 changed file

developit

pr closed time in 11 days

PullRequestReviewEvent

pull request commentpreactjs/preact

[wip] optimizations for compat

@JoviDeCroock since we merge the backport of this to master, I think it might be best to also merge this PR to v11 now.

developit

comment created time in 11 days

PR opened preactjs/preact-cli

Use custom auth for changesets

This will create changesets PRs as the user @preact-bot. See https://github.com/peter-evans/create-pull-request/issues/48#issuecomment-536204092

+1 -1

0 comment

1 changed file

pr created time in 11 days

create barnchpreactjs/preact-cli

branch : bot-auth

created branch time in 11 days

MemberEvent

issue commentpreactjs/preact-cli

css url() is not relative to publicPath

@RyanChristian4427 - I wonder if it'd be worth having CLI infer the publicPath value for MiniCssExtract from the config?

Something like this to replace these lines:

					use: [
						isWatch ? 'style-loader' : {
							loader: MiniCssExtractPlugin.loader,
							options: {
								get publicPath() {
									// `config` is a new variable assigned to the returned object from L113
									return config.output && config.output.publicPath;
								}
							}
						},
						{
Edorka

comment created time in 11 days

issue closedpreactjs/preact-cli

"export 'hydrate' (imported as 'Preact') was not found in 'preact'

This is my fresh installed preact material application using preact-cli.

preact create material test --yarn npm run dev

Then I got this warning in Command prompt

`Compiled successfully!

You can view the application in browser.

Local: http://localhost:8080 On Your Network: http://192.168.43.69:8080 ‼ WARN ../node_modules/preact-cli/lib/lib/entry.js 5:14-28 "export 'hydrate' (imported as 'Preact') was not found in 'preact' @ multi ../node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webp ack/hot/dev-server

`

closed time in 11 days

shaponpal6
more