v1.10 and v2 umbrella

[edorivai]

Update (March 17th, 2019)

As described in detail in #123, I'm seriously considering publishing the current changes under a minor version bump: 1.10. The bulk of the preparations for this have already been done in #123.

The next step would be to implement a v2 which uses hooks for the core functionality. I expect a hooks implementation could simplify some of the internals, and would simultaneously allow us to ship a hook as part of the API.

~2.0~ 1.10

• [x] change query prop to queries (#72)
• [x] two-pass render + migrate to componentDidMount (solves #81, #91, #109, PR: #96)
• [x] run tests in <Strict> mode (#115)
• [x] merge #123
• [x] polish the docs (#119)
• [x] publish a prerelease, and have some people test it out in their production apps

~2.1~ 2.0 (now available as react-media@next)

• ~implement a hooks API, exposed as react-media/hooks~
• [x] reimplement the core functionality using hooks, expose a useMedia hook
• [x] implement a <Media> component, which is compatible with v1.10, but uses said hook internally

I propose exposing Media as the default export and exporting the hook as a named export:

import Media, { useMedia } from 'react-media';

This would allow people to seamlessly upgrade to v2, without having to change existing code. There's also not really any use in splitting things up, since the Media component will be very small (just a wrapper around the hook), and it will use the hook under the hood. So I don't expect us splitting up the files will result in significant bundle size savings.

[tstirrat15]

Want help with any of this?

[edorivai]

@tstirrat15 Feel free to take a stab at any of the last three - Strict mode tests, docs, hooks. I'm a bit short on time, but let me know if you want to start on one, and I'll write up some thoughts I have on that particular item.

[tstirrat15]

Strict mode tests sounds the most immediately tractable. Is that pretty straightforward?

[edorivai]

Yes it should be. The idea would be to wrap all tests in <React.StrictMode>. @mjackson mentioned they're already doing this in react-router. Instead of calling ReactDOM.render directly, they pass their components under test to a renderStrict function they defined, which wraps it in StrictMode.

I don't see any actual assertions around Strict mode, but I guess it would be easily verifiable in the Travis runs as soon as something is violating strict mode.

Does that all make sense?

[tstirrat15]

Yep.

What I've seen in using it in our own project is that it throws warnings at runtime. Is Travis configured to treat warnings as failures? Otherwise it'd probably entail manual review of the test output.

[edorivai]

Yeah I think manual review is fine. I usually run the tests before publishing, but more importantly, when users start complaining that something is not compliant with strict mode, we would be able to verify it quickly by running the tests.

[tstirrat15]

Do you want/need any help with the docs? Did you have an idea for a direction on that?

[edorivai]

I already started on a cleanup of the docs on master. The general idea would be to merge master into next, and then update the breaking API change (query became queries). Though I have an outstanding conversation with @mjackson about whether we might want to keep the query prop in a backwards-compatible way, and just add the queries prop on top.

But I guess you could already perform the merge, and write up some docs on queries. See #72 for details.

Thanks again for the help man!

[tstirrat15]

I'll write a doc block for queries as a separate PR, which we can then merge into next or master as needed. We can remove query and/or add clarification about how they'd work together as a final step.

[South-Paw]

Would it possible to get an RC or alpha build released on npm for the next branch?

I'd really like to see if the 2 pass renderer solves some issues I'm seeing in a project.

Thanks

[edorivai]

@South-Paw Yeah, that would be possible. Only gotcha is that the next branch has a big breaking change, we replaced the query prop for queries. See #119 and #69 for details.

Would it still be useful for you to test out the next branch, given this breaking change?

[South-Paw]

Yeap I think it'd be fine to test it out even with those changes.

It won't be to hard to go through and migrate query to queries - from what I can see I can still put a string into queries and the render pattern remains as {matches => matches ? <div>a</div> : <div>b</div> } right?

[edorivai]

@South-Paw No, the queries prop has to be an object, where each of it's keys represents a media query:

<Media queries={{
    sm: "(max-width: 1000px)",
    lg: "(max-width: 2000px)"
  }}>
  {(matches) =>
    <>
      { matches.sm && <span>I'm small</span>}
      { matches.lg && <span>I'm large</span>}
    </>
  }
</Media>

[South-Paw]

Okay, that looks good - liking that pattern as well 👍

If it's possible to do a alpha/RC release that'd be awesome - I'll give it a try out and see how it goes

[edorivai]

@South-Paw Hey I just prepared everything for an alpha release, but sadly the deploy process halted due to an invalid npm token. I don't have access to the npm project, so we'll have to wait for @mjackson to fix the token in Travis. See #120 for details.

[South-Paw]

Hi, its been 2 weeks and @mjackson hasn't responded to #120 - has there been any movement on this?

Still pretty keen to try test this 👍

[philhradecs]

Same here. Server/client mismatch breaks the site layout when it's loaded on mobile using react-static ssr.

I'm also very keen on testing this.

---- Alex Gabites wrote ----

Hi, its been 2 weeks and @mjackson hasn't responded to #120 - has there been any movement on this?

Still pretty keen to try test this 👍

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

{"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/ReactTraining/react-media","title":"ReactTraining/react-media","subtitle":"GitHub repository","main_image_url":"https://github.githubassets.com/images/email/message_cards/header.png","avatar_image_url":"https://github.githubassets.com/images/email/message_cards/avatar.png","action":{"name":"Open in GitHub","url":"https://github.com/ReactTraining/react-media"}},"updates":{"snippets":[{"icon":"PERSON","message":"@South-Paw in #110: Hi, its been 2 weeks and @mjackson hasn't responded to #120 - has there been any movement on this?\r\n\r\nStill pretty keen to try test this 👍"}],"action":{"name":"View Issue","url":"https://github.com/ReactTraining/react-media/issues/110#issuecomment-460001625"}}} [ { "@context": "http://schema.org", "@type": "EmailMessage", "potentialAction": { "@type": "ViewAction", "target": "https://github.com/ReactTraining/react-media/issues/110#issuecomment-460001625", "url": "https://github.com/ReactTraining/react-media/issues/110#issuecomment-460001625", "name": "View Issue" }, "description": "View this Issue on GitHub", "publisher": { "@type": "Organization", "name": "GitHub", "url": "https://github.com" } } ]

[edorivai]

Hey guys, I'm really sorry about the delay. I've dm'd @mjackson, but I imagine his inboxes must be bursting :sweat_smile:.

In the meantime, would it be an option for you guys to test the next branch locally? You can check out a fork of this repo, then:

• check out the next branch
• run npm run build
• run npm link
• inside your own project: npm link react-media

Now run your project as usual, it should use your local copy of react-media.

[philhradecs]

Thank you! I will try that later today. Awesome work :)

[philhradecs]

During build I get the following error: I thought I posted this in case it's relevant for the upcoming release. I dug into the error a bit but this is not something I can solve as of yet..

modules/index.js → esm/react-media.js... [!] (size-snapshot plugin) Error: ModuleNotFoundError: Module not found: Error: Can't resolve './Media.js' in '/' Error: ModuleNotFoundError: Module not found: Error: Can't resolve './Media.js' in '/' at compiler.run (C:\_code\projects\react-media\node_modules\rollup-plugin-size-snapshot\dist\treeshakeWithWebpack.js:58:16) [.. further traceback]

[edorivai]

@baumzeit Huh, I did the following, and was able to successfully build the project:

• Checkout latest version of the next branch
• Run npm ci to install dependencies
• Run npm run build

Did you do something similar?

[philhradecs]

Yes, I can confirm:

• forked react-media
• cloned the repo
• checkout next
• npm install (also tried ci)
• npm run build

throws the above error.

Here is the complete trace:

Error: Module not found: Error: Can't resolve './Media.js' in '/'

at compiler.run (C:\_code\projects\react-media\node_modules\rollup-plugin-size-snapshot\dist\treeshakeWithWebpack.js:58:16)
at finalCallback (C:\_code\projects\react-media\node_modules\webpack\lib\Compiler.js:210:39)
at hooks.done.callAsync.err (C:\_code\projects\react-media\node_modules\webpack\lib\Compiler.js:226:13)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\_code\projects\react-media\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (C:\_code\projects\react-media\node_modules\tapable\lib\Hook.js:154:20)
at onCompiled (C:\_code\projects\react-media\node_modules\webpack\lib\Compiler.js:224:21)
at hooks.afterCompile.callAsync.err (C:\_code\projects\react-media\node_modules\webpack\lib\Compiler.js:552:14)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\_code\projects\react-media\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (C:\_code\projects\react-media\node_modules\tapable\lib\Hook.js:154:20)
at compilation.seal.err (C:\_code\projects\react-media\node_modules\webpack\lib\Compiler.js:549:30)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\_code\projects\react-media\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (C:\_code\projects\react-media\node_modules\tapable\lib\Hook.js:154:20)
at hooks.optimizeAssets.callAsync.err (C:\_code\projects\react-media\node_modules\webpack\lib\Compilation.js:1323:35)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\_code\projects\react-media\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (C:\_code\projects\react-media\node_modules\tapable\lib\Hook.js:154:20)
at hooks.optimizeChunkAssets.callAsync.err (C:\_code\projects\react-media\node_modules\webpack\lib\Compilation.js:1314:32) 

[... npm error messages]

[edorivai]

@baumzeit Damn, you think this could be a windows issue? I don't have a windows environment at hand to test :\

In any case, when the build get's fixed you should be able to test the alpha release. Sorry again for the wait

[philhradecs]

@edorivai It looks like it's a windows issue. I tested it out on another windows machine with the same result.

• checkout next
• npm ci
• npm run build

[South-Paw]

I've gotten really frustrated waiting for a month and a half when I really need to test and/or fix the SSR issue a few Gatsby websites now...

I'm going through building and publishing my own version of react-media and hit the same issue as @baumzeit on Windows.

Problem seems to be in the rollup-plugin-size-snapshot package. Updating it to v0.8.0 changed the error to

[!] (size-snapshot plugin) TypeError: Cannot read property 'find' of undefined
TypeError: Cannot read property 'find' of undefined
    at then.then (E:\dev\Github\react-media\node_modules\rollup-plugin-size-snapshot\dist\treeshakeWithRollup.js:67:36)

Can't tell if its required or not, but removing the plugin from the rollup.config.js allows the package to build again.

[South-Paw]

Scratch that, doesn't seem my republished version works either.

 ERROR  Failed to compile with 1 errors

This relative module was not found:

* ./Media.js in ./node_modules/@south-paw/react-media/esm/react-media.js
× ｢wdm｣:
ERROR in ./node_modules/@south-paw/react-media/esm/react-media.js
Module not found: Error: Can't resolve './Media.js' in 'E:\dev\Github\...\node_modules\@south-paw\react-media\esm'
 @ ./node_modules/@south-paw/react-media/esm/react-media.js 1:0-34 2:0-37 2:0-37
 @ ./src/templates/Site.js
 @ ./src/pages/acceptable-use-policy.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false E://dev//Github//...//.cache//app
i ｢wdm｣: Failed to compile.

How long until the npm token gets fixed @edorivai? I've pinged @mjackson twice on twitter and I doubt he's seen either... but its getting really frustrating that it's been a month and a half with no movement on the issue.

[edorivai]

@South-Paw Hey man, I understand that you're frustrated. I've pinged @mjackson on twitter, as well as email, so there isn't too much I can do anymore. I've also considered publishing under a different npm package, but honestly didn't get the time to do so yet.

One quick remark on the error you're running into. When I build on my system (I'm running Linux), there's only a single file inside the esm directory (see screenshot below). Reading your error message, it seems to me that the esm/react-media.js file is trying to import the ./Media.js file, which is weird, since that file should be rolled up into react-media.js. Could you maybe tell me what the files inside your esm directory look like?

[South-Paw]

@edorivai Sorry, I know its not your fault and @mjackson is obviously a busy person as well - just annoying to have a ~70k dl/w package, that works really really well and has a good 2.0 update coming to be hamstrung by a such a trivial issue 😥

I've been out tonight so no code time, but I'll run another build tomorrow and take a screenshot. Thanks for the continued replies 👍

[moflo]

Hi @edorivai - we needed a hooks port so we created one, here: react-media-hooks. I don't plan to publish to npm as this would likely be in conflict with your 2.0 plans. Also, we would need to add more tests, TS support, etc., but this private version works for us. Thanks!

[edorivai]

@moflo Thanks :smile:. We're planning to add hooks as well, but we first want to get v2 published.

@South-Paw @baumzeit Good news, the deployment problems have been fixed :tada:. You should be able to install react-media@next. Let me know how it goes!