Replaces Flash with react-hot-toast #1856

cannikin · 2021-02-25T23:24:29Z

This replaces our custom Flash stuff with react-hot-toast and updates the scaffold generators to generate with the new interface. It will output deprecation notices to the browser console letting users know to migrate and that the old API will be gone as of v1.0.

Docs Update

Docs have been updated to go along with this PR, merge https://github.com/redwoodjs/redwoodjs.com/pull/608 after this PR is released!

Release Notes

Unless you have a super-custom implementation of messaging (where you're using dismissMessage() and cycleMessage() manually) you actually won't notice any difference, other than the messages will look different. You'll get a deprecation in the Web Inspector letting you know that're dropping <Flash> and addMessage() in v1.0 and to switch over to using <Toaster> and toast().

If you are using dismissMessage() and cycleMessage() they will now be a noop and you'll just see the deprecation notice.

Updating from Flash to Toaster

This change is fairly easy. Import Toaster and replace instances of <Flash> with <Toaster>:

// before
import { Flash } from '@redwoodjs/web'

const MyPage = () => {
  return (
    <div>
      <Flash />
    </div>
  )
}

// after
import { Toaster } from '@redwoodjs/web'

const MyPage = () => {
  return (
    <div>
      <Toaster />
    </div>
  )
}

Toaster accepts some additional options that Flash did not, including the position of the popup on the page, the order of new messages, and more. See them on the official react-hot-toast docs.

Updating from addMessage() to toast()

// before
import { useFlash } from '@redwoodjs/web'

const MyComponent = () => {
  const { addMessage } = useFlash()

  const create = () => {
    // do something
    addMessage('New record saved!')
  }
}

// after
import { toast } from '@redwoodjs/web'

const MyComponent = () => {
  const create = () => {
    // do something
    toast.success('New record saved!')
  }
}

Note that since toast is not a hook you can use it outside of a component (even outside of React itself, according to the docs!). toast() takes some addition options which you can read about in their docs.

Updating Scaffold Styles

If you have web/src/scaffold.css for styling your scaffolds, there's one rule you'll want to change if you want the toast's icons to display properly:

/* before */
.rw-scaffold *,
.rw-scaffold ::after,
.rw-scaffold ::before {
  box-sizing: inherit;
  border-width: 0;
  border-style: solid;
  border-color: #e2e8f0;
}

/* after */
.rw-scaffold *,
.rw-scaffold ::after,
.rw-scaffold ::before {
  box-sizing: inherit;
}

cannikin · 2021-02-25T23:28:09Z

I even helped with some release notes @thedavidprice!

github-actions · 2021-02-25T23:28:33Z

📦 PR Packages

Click to Show Package Download Links

Install this PR by running yarn rw upgrade --pr 1856:0.26.2-9247dff

Tobbe · 2021-02-27T11:04:23Z

This will need rewriting: https://redwoodjs.com/docs/flash-messaging-bus

peterp · 2021-02-27T13:32:11Z

packages/web/src/flash/Flash.tsx

-        <FlashMessageComponent key={msg.id} message={msg} timeout={timeout} />
-      ))}
-    </div>
+const Flash = () => {


You can also use to get design-time warnings in VSCode. It'll be struck through.

/** @deprecated this thing is going to go away. */

Ooo okay I’ll add that

Looks like that only deprecates it in the Redwood package itself, not if you use it in your app? Or am I doing it wrong?

I think it's correct, I'll try to see why it isn't working outside the project.

Should we still accept an optional timeout, to keep backwards compatibility with ppl using <Flash timeout={3000} /> in TS projects

Hmm we could, we'd have to forward that value to the more in-depth version that Toast uses, where you set the timeout per type (success, error, loading...): https://react-hot-toast.com/docs/toaster Although we're already providing a big ol' deprecation notice which should make it pretty clear why your toast may not be showing for the same amount of time it used to (in addition to looking completely different).

Question: how come you called out TS projects here specifically? Is there some different usage from plain JS?

Yes, with the code as it is, in a TS project you'd ge a red squiggly line, saying that doesn't accept a timeout prop. JS doesn't care if you pass extra stuff, but TS does.

So I'm just suggesting to add it, to make the code compile. Not implement the actual functionality

packages/web/src/apollo/index.tsx

thedavidprice · 2021-03-02T18:12:22Z

You'll get a deprecation in the Web Inspector letting you know that're dropping and addMessage() in v1.0 and to switch over to using and toast()

^^ @dac09 @peterp I'm not sure if there's anything else on a "will-deprecate-in-the-future" list. Either way, maybe now's the time to create one? (PP, I liked the Tailwind reference about this you showed me once, fwiw.)

And/or maybe we just deprecate it fully now? RC has already provided really nice messaging with instructions.

cannikin · 2021-03-03T00:18:48Z

@thedavidprice Yeah I was thinking that we put that message in the release notes as soon this is merged. That gives people the maximum amount of time to switch over before the API disappears completely in v1.0.

cannikin · 2021-03-04T21:46:48Z

This will need rewriting: https://redwoodjs.com/docs/flash-messaging-bus

Done! https://github.com/redwoodjs/redwoodjs.com/pull/608

packages/web/toast/package.json

peterp · 2021-03-07T07:16:39Z

@cannikin I've moved these things into @redwoodjs/web/toast 🦓 , could you double check me? I'm happy for this to merge , if you're happy...

cypress · 2021-03-07T07:34:43Z

Test summary

11 • 0 • 1 • 0

Run details


Project	RedwoodJS Framework
Status	Passed
Commit	`6f317f7` ℹ️
Started	Mar 8, 2021 11:55 AM
Ended	Mar 8, 2021 11:58 AM
Duration	02:32 💡
OS	Linux Ubuntu - 16.04
Browser	Chrome 88

View run in Cypress Dashboard ➡️

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

packages/web/src/flash/README.md

Tobbe · 2021-03-07T09:17:51Z

packages/web/src/flash/FlashContext.tsx

-  dismissMessage(messageId: number): void
-  cycleMessage(messageId: number): void
+/** @deprecated addMessage is deprecated and will be removed in RedwoodJS v1.0. Please update your components to use the `toast()` API: https://react-hot-toast.com/docs/toast */
+const addMessage = (text: string) => {


Same as above, should we still have options?

@Tobbe I don't have enough context to add these, could you help me out?

@peterp sure thing. I'll try to get it done after the kids hava gone to bed tonight

Ok - let me chat with @thedavidprice. We might actually just remove Flash completely!

I think I'm going to merge this now, and we can decide what to do when we release, since technically we should have a code freeze today :P

packages/web/src/flash/index.ts

…o rc-react-hot-toast

packages/web/toast/package.json

Co-authored-by: Tobbe Lundberg <[email protected]>

cannikin · 2021-03-08T19:56:41Z

@Tobbe how important are these TS things? Code freeze is today and we were hoping to get this in. I don't even know if I'm fixing any TS inference things, VS Code is so filled with squiggles and yellow underlines and italics and cross-outs I just ignore them all at this point. :(

Tobbe · 2021-03-08T21:15:31Z

@cannikin I was waiting for @peterp to get back, he said he was going to discuss with @thedavidprice about removing the old Flash stuff altogether. Dunno what the status is there

cannikin · 2021-03-08T21:28:51Z

@Tobbe Although he did say he was just going to merge anyway and then figure out what to do later! He told me earlier today I could merge it, but wasn't sure where your questions about the TS stuff stood... all the checks pass, will bad things happen somewhere if we merge without adding those options?

Tobbe · 2021-03-08T21:38:32Z

@cannikin I haven't had time to verify, but what I think will happen is people with TS projects that use either (or both) of those two options will get compilation errors.

Everyone with JS projects will be fine
People with TS projects with just plain <Flash> and addMessage("this is my flash message") will be fine

cannikin · 2021-03-08T21:46:20Z

Ahhh, okay. Now that I'm looking, the generated <Flash> in the scaffold templates does include a timeout...I wish that would have just used the default. :( So anyone with a TS project and scaffold is going to see that. :( :(

Tobbe · 2021-03-08T21:55:17Z

Yes, if their scaffolded files are .tsx files

I just tried this in a project. If this is a .js file, everything works

import { useFlash, Flash } from '@redwoodjs/web'

const HomePage = () => {
  const { addMessage } = useFlash()

  const sayHello = () => {
    addMessage(
      'Hello world!',
      {
        classes: 'success-style',
      },
      666,
    )
  }

  return (
    <>
      <h1>HomePage</h1>

      <Flash doesNotExist='f41|' />

      <button onClick={() => sayHello()}>Say Hello</button>
    </>
  )
}

export default HomePage

But if I rename it to .tsx I get this

The good thing though is that it actually runs. And no errors in the web browser. This was better than I feared. It will say they're deprecated, so maybe this is good enough?

I keep forgetting that we're actually not typechecking before building. We do that at work, so I'm so used to nothing running if there are TS errors. But with a RW project it's actually fine-ish.

cannikin · 2021-03-08T21:57:22Z

Oh, that's not so bad! Yeah I can live with that. Can I merge?

Tobbe · 2021-03-08T22:01:00Z

Do it!

cannikin · 2021-03-08T22:12:05Z

Did it!

cannikin added 11 commits February 25, 2021 14:17

Add toast dependency

151304c

Proxy Flash and addMessage to toast

809adf1

Back to console.warn()

1b42738

Remove unused code

07b3f4e

Update Flash README with deprecation notice

5d187de

Removed flash tests

e2b3eb0

Updates templates to switch from Flash to react-hot-toast

7f37c26

Export toast from @redwoodjs/web

c429c30

Style updates to scaffold to avoid overriding toast defaults

eaa81f3

More efficient export

8b202ea

Update tests

cf8eddb

Merge branch 'main' into rc-react-hot-toast

824eb4d

peterp reviewed Feb 27, 2021

View reviewed changes

packages/web/src/apollo/index.tsx Show resolved Hide resolved

dac09 added this to the next release milestone Mar 1, 2021

dac09 added the topic/forms label Mar 1, 2021

dac09 added the next release docs label Mar 2, 2021

Add @deprecated comments

fcd1121

cannikin mentioned this pull request Mar 4, 2021

Updates Flash Messaging Bus doc for react-hot-toast redwoodjs/redwoodjs-com-archive#608

Merged

peterp added 2 commits March 7, 2021 08:57

Merge remote-tracking branch 'origin/main' into rc-react-hot-toast

428e9a3

Put toast into @redwoodjs/web/toast.

b6c48f8

peterp reviewed Mar 7, 2021

View reviewed changes

packages/web/toast/package.json Show resolved Hide resolved

Fix typings reference.

e8a3661

peterp removed the next release docs label Mar 7, 2021

Tobbe reviewed Mar 7, 2021

View reviewed changes

packages/web/src/flash/README.md Outdated Show resolved Hide resolved

Tobbe reviewed Mar 7, 2021

View reviewed changes

packages/web/src/flash/index.ts Outdated Show resolved Hide resolved

peterp added 4 commits March 7, 2021 11:37

Move toast thing to src/toast instead of src/flash.

5578d5b

Add toast to package.json::files.

c0d0c94

Link to RHT in docs.

6d1043d

Merge branch 'rc-react-hot-toast' of github.com:redwoodjs/redwood int…

46d9de3

…o rc-react-hot-toast

Tobbe reviewed Mar 7, 2021

View reviewed changes

packages/web/toast/package.json Outdated Show resolved Hide resolved

dac09 and others added 4 commits March 7, 2021 14:18

Merge branch 'main' into rc-react-hot-toast

a616e7f

Update packages/web/toast/package.json

cf85530

Co-authored-by: Tobbe Lundberg <[email protected]>

Fix spelling mistake.

2f0a01a

Fix exec to cross-env.

69688e8

peterp force-pushed the rc-react-hot-toast branch from b8b9b10 to 69688e8 Compare March 8, 2021 10:31

peterp added 2 commits March 8, 2021 13:06

Merge branch 'main' into rc-react-hot-toast

e95eb46

Merge remote-tracking branch 'origin/main' into rc-react-hot-toast

9247dff

Tobbe approved these changes Mar 8, 2021

View reviewed changes

cannikin merged commit 4a899b5 into main Mar 8, 2021

cannikin deleted the rc-react-hot-toast branch March 8, 2021 22:00

jtoar mentioned this pull request Mar 10, 2021

Newsletter: Issue No. 6 redwoodjs/redwoodjs-com-archive#620

Closed

19 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replaces Flash with react-hot-toast #1856

Replaces Flash with react-hot-toast #1856

cannikin commented Feb 25, 2021 •

edited

Loading

cannikin commented Feb 25, 2021

github-actions bot commented Feb 25, 2021 •

edited

Loading

Tobbe commented Feb 27, 2021

peterp Feb 27, 2021

cannikin Feb 27, 2021

cannikin Mar 3, 2021

peterp Mar 7, 2021

Tobbe Mar 7, 2021

cannikin Mar 7, 2021

Tobbe Mar 7, 2021

thedavidprice commented Mar 2, 2021

cannikin commented Mar 3, 2021

cannikin commented Mar 4, 2021

peterp commented Mar 7, 2021 •

edited

Loading

cypress bot commented Mar 7, 2021 •

edited

Loading

Tobbe Mar 7, 2021

peterp Mar 8, 2021

Tobbe Mar 8, 2021

peterp Mar 8, 2021

cannikin commented Mar 8, 2021

Tobbe commented Mar 8, 2021 •

edited

Loading

cannikin commented Mar 8, 2021

Tobbe commented Mar 8, 2021

cannikin commented Mar 8, 2021 •

edited

Loading

Tobbe commented Mar 8, 2021 •

edited

Loading

cannikin commented Mar 8, 2021

Tobbe commented Mar 8, 2021

cannikin commented Mar 8, 2021

Replaces Flash with react-hot-toast #1856

Replaces Flash with react-hot-toast #1856

Conversation

cannikin commented Feb 25, 2021 • edited Loading

Docs Update

Release Notes

Updating from Flash to Toaster

Updating from addMessage() to toast()

Updating Scaffold Styles

cannikin commented Feb 25, 2021

github-actions bot commented Feb 25, 2021 • edited Loading

📦 PR Packages

Tobbe commented Feb 27, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thedavidprice commented Mar 2, 2021

cannikin commented Mar 3, 2021

cannikin commented Mar 4, 2021

peterp commented Mar 7, 2021 • edited Loading

cypress bot commented Mar 7, 2021 • edited Loading

Test summary

Run details

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cannikin commented Mar 8, 2021

Tobbe commented Mar 8, 2021 • edited Loading

cannikin commented Mar 8, 2021

Tobbe commented Mar 8, 2021

cannikin commented Mar 8, 2021 • edited Loading

Tobbe commented Mar 8, 2021 • edited Loading

cannikin commented Mar 8, 2021

Tobbe commented Mar 8, 2021

cannikin commented Mar 8, 2021

cannikin commented Feb 25, 2021 •

edited

Loading

github-actions bot commented Feb 25, 2021 •

edited

Loading

peterp commented Mar 7, 2021 •

edited

Loading

cypress bot commented Mar 7, 2021 •

edited

Loading

Tobbe commented Mar 8, 2021 •

edited

Loading

cannikin commented Mar 8, 2021 •

edited

Loading

Tobbe commented Mar 8, 2021 •

edited

Loading