1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Commit graph

2665 commits

Author SHA1 Message Date
Matthew Francis Brunetti 7961946c07 withApollo example - move from old HOC APIs to new function-as-child APIs (#5241)
Since version 2.1, react-apollo is exposing some new components that use the function-as-child (or render-prop) pattern to let you connect apollo-client magic with your components. See the blog article: [New in React Apollo 2.1](https://www.apollographql.com/docs/react/react-apollo-migration.html)

If I'm not mistaken, it's generally agreed that this pattern is (where it works) superior to the HOC pattern, for reasons that are best explained here: https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce 

So I updated the with-apollo example to use the new API, and IMO this code is much simpler and natural to read and understand, especially if you are not already familiar with Apollo's HOC APIs.

I broke up my changes into separate commits, for easier review. Commits with "Refactor" in the message accomplish the goal of switching to the new APIs while minimizing line-by-line differences (select "Hide whitespace changes" under "Diff settings"). Commits with "Clean up" in the message follow up the refactoring with trivial things like reorganizing code sections, renaming variables, etc.

For the components doing mutations, I chose not to use the `Mutation` component, since that doesn't really make sense to me; a mutation is something that happens at a point in time, so it's not meaningful to represent a mutation in the markup, which exists for a period of time. All that component does is expose a `mutate` function for a single specified mutation, and `result` data for a single firing of the mutation (which we don't need anyways; apollo handles updating the local data with the result). To me it seems simpler and more flexible to just get the apollo client via `ApolloConsumer` and call `.mutate()` on it. 

In case anyone is interested, here's what my version of `PostUpvoter` using the `Mutation` component looked like:

 <details>

```jsx
import React from 'react'
import { Mutation } from 'react-apollo'
import { gql } from 'apollo-boost'

export default function PostUpvoter ({ votes, id }) {
  return (
    <Mutation mutation={upvotePost}>
      {mutate => (
        <button onClick={() => upvote(id, votes + 1, mutate)}>
          {votes}
          <style jsx>{`
            button {
              background-color: transparent;
              border: 1px solid #e4e4e4;
              color: #000;
            }
            button:active {
              background-color: transparent;
            }
            button:before {
              align-self: center;
              border-color: transparent transparent #000000 transparent;
              border-style: solid;
              border-width: 0 4px 6px 4px;
              content: '';
              height: 0;
              margin-right: 5px;
              width: 0;
            }
          `}</style>
        </button>
      )}
    </Mutation>
  )
}

const upvotePost = gql`
  mutation updatePost($id: ID!, $votes: Int) {
    updatePost(id: $id, votes: $votes) {
      id
      __typename
      votes
    }
  }
`
function upvote (id, votes, mutate) {
  mutate({
    variables: { id, votes },
    optimisticResponse: {
      __typename: 'Mutation',
      updatePost: {
        __typename: 'Post',
        id,
        votes
      }
    }
  })
}
```

</details>

###

I'm happy with where things are at here, but I'm more than happy to address any comments, concerns, ideas for improvent!

Thanks!
2018-09-26 01:32:41 +02:00
Tim Neutkens db216e0086
Even more reliable error-recovery tests (#5284) 2018-09-26 01:04:15 +02:00
Tim Neutkens 139bc40fb5
More reliable error-recovery tests (#5281)
As they were failing intermittently, this PR tries to solve that.
2018-09-25 16:54:03 +02:00
Tim Neutkens bb06f50747 7.0.1-canary.0 2018-09-25 15:28:51 +02:00
Tim Neutkens 42736c061a
Introduce dynamic(() => import()) (#5249)
* Add failing tests

* Upgrade wd module

* Pass dynamic import webpack ids to the client side

* Pass through webpack ids to initalializer and only use those

* Compile dynamic(import()) to dynamic(() => import())

* Default dynamicIds

* Use forked hard-source-plugin

* Possibly fix test

* Make tests fail less intermittently

* Temporarily disable hard-source in production

* Make sure dynamic import chunks are unique

* Disable hard-source

* Log html if error is thrown

* Fix test
2018-09-25 15:27:09 +02:00
Zack Tanner 9854c342e1 #5620: Fix react-i18next example to properly SSR (#5265)
This fixes https://github.com/zeit/next.js/issues/5260 by making sure that `index.js` has `getInitialProps` defined on the page exported component, not the child component.

When fixing that, I uncovered an issue where the server side rendered HTML did not match the clientside HTML, so I reworked _app.js to use the `i18nextprovider` component which has props to hydrate the initial data (for SSR), and makes sure the correct i18n instance is passed to all child components through context.

Before:
```html
<!DOCTYPE html>
<html>
   <head>
      <meta charSet="utf-8" class="next-head"/>
      <link rel="preload" href="/_next/static/development/pages/index.js" as="script"/>
      <link rel="preload" href="/_next/static/development/pages/_app.js" as="script"/>
      <link rel="preload" href="/_next/static/development/pages/_error.js" as="script"/>
      <link rel="preload" href="/_next/static/runtime/webpack.js" as="script"/>
      <link rel="preload" href="/_next/static/runtime/main.js" as="script"/>
   </head>
   <body>
      <div id="__next"></div>
      <script src="/_next/static/development/dll/dll_4a2ab6ce0cb456fbfead.js"></script><script>__NEXT_DATA__ = {"props":{"pageProps":{}},"page":"/","pathname":"/","query":{},"buildId":"development"};__NEXT_LOADED_PAGES__=[];__NEXT_REGISTER_PAGE=function(r,f){__NEXT_LOADED_PAGES__.push([r, f])}</script><script async="" id="__NEXT_PAGE__/" src="/_next/static/development/pages/index.js"></script><script async="" id="__NEXT_PAGE__/_app" src="/_next/static/development/pages/_app.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/_next/static/development/pages/_error.js"></script><script src="/_next/static/runtime/webpack.js" async=""></script><script src="/_next/static/runtime/main.js" async=""></script>
   </body>
</html>
```

After: 
```html
<!DOCTYPE html>
<html>
   <head>
      <meta charSet="utf-8" class="next-head"/>
      <link rel="preload" href="/_next/static/development/pages/index.js" as="script"/>
      <link rel="preload" href="/_next/static/development/pages/_app.js" as="script"/>
      <link rel="preload" href="/_next/static/development/pages/_error.js" as="script"/>
      <link rel="preload" href="/_next/static/runtime/webpack.js" as="script"/>
      <link rel="preload" href="/_next/static/runtime/main.js" as="script"/>
   </head>
   <body>
      <div id="__next">
         <h1>This example integrates react-i18next for simple internationalization.</h1>
         <div>
            <h1>welcome to next.js</h1>
            <p>This example integrates react-i18next for simple internationalization.</p>
            <p>test words for en</p>
            <div><button>fire in the wind for en</button></div>
            <p>You can either pass t function to child components.</p>
            <p>Or wrap your component using the translate hoc provided by react-i18next.</p>
            <p>Alternatively, you can use <code>Trans</code> component.</p>
            <a href="/page2">Go to page 2</a><br/><a href="/page3">Go to page 3 (no hoc)</a>
         </div>
      </div>
      <script src="/_next/static/development/dll/dll_4a2ab6ce0cb456fbfead.js"></script><script>__NEXT_DATA__ = {"props":{"pageProps":{"i18n":null,"initialI18nStore":{"en":{"home":{"welcome":"welcome to next.js","sample_test":"test words for en","sample_button":"fire in the wind for en","link":{"gotoPage2":"Go to page 2","gotoPage3":"Go to page 3 (no hoc)"}},"common":{"integrates_react-i18next":"This example integrates react-i18next for simple internationalization.","pureComponent":"You can either pass t function to child components.","extendedComponent":"Or wrap your component using the translate hoc provided by react-i18next.","transComponent":"Alternatively, you can use \u003c1\u003eTrans\u003c/1\u003e component."}}},"initialLanguage":"en-US"}},"page":"/","pathname":"/","query":{},"buildId":"development"};__NEXT_LOADED_PAGES__=[];__NEXT_REGISTER_PAGE=function(r,f){__NEXT_LOADED_PAGES__.push([r, f])}</script><script async="" id="__NEXT_PAGE__/" src="/_next/static/development/pages/index.js"></script><script async="" id="__NEXT_PAGE__/_app" src="/_next/static/development/pages/_app.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/_next/static/development/pages/_error.js"></script><script src="/_next/static/runtime/webpack.js" async=""></script><script src="/_next/static/runtime/main.js" async=""></script>
   </body>
</html>
```
2018-09-24 12:13:38 +02:00
John Leon ce8b301f24 Fix for with-ant-design-less for next7.0 (#5263)
* Update .babelrc

babel-plugin-transform-decorators-legacy does not exist in babel 7 in replace use @babel/plugin-proposal-decorators

* Update package.json

Acording the last commit please,  test this example , will be work .
2018-09-24 00:03:38 +02:00
Adam Lane 3bb62928a6 example with-sentry note that server side logging available too (#5261)
Trivial note to remind anyone doing sentry that they should consider doing server side logging too.
2018-09-23 21:06:05 +02:00
Adam Lane 48d54c254f example with-apollo note that two render executions are expected (#5262)
Noting per https://github.com/zeit/next.js/issues/5050 for new users of Apollo that they should not be concerned about multiple renders.
2018-09-23 21:05:00 +02:00
Henrik Wenz 7ebcc5bec9 Eliminate context code based on process.browser (#5159)
* Allow deadCodeElemination when using process.browser

* Add process.browser test
2018-09-23 16:02:28 +02:00
Henrik Wenz 80a6160caf Update with-dynamic-import example (#5201)
Follow up on: https://github.com/zeit/next.js/pull/4639
2018-09-23 16:01:54 +02:00
Henrik Wenz 60b1d26f1f Update with-kea example (#5259)
- updates transform-decorators-legacy
- updates with-next-redux-wrapper
2018-09-23 16:01:37 +02:00
Henrik Wenz dc3be63ad2 Fix with-mobx-state-tree example (#5258) 2018-09-22 22:21:54 +02:00
Henrik Wenz 2c0ff4b925 Fix failing linter tests (#5257)
Wonder how that one got through 🤔
2018-09-22 21:41:07 +02:00
Arek Mytych 5276734535 Update to use @sentry/browser, remove raven-js (#5253) 2018-09-22 14:22:24 +02:00
Muhaimin CS e892898dfe Update with-redux-code-splitting example (patch) (#5252) 2018-09-22 14:14:40 +02:00
Iago Bruno b68b705446 Just some simple improvements in formatting codes in documentation (#5250)
I think it looks better for new people in JavaScript/React (and for my perfectionism 😄).
2018-09-22 14:13:27 +02:00
Arek Mytych 2304300d68 Update GrpahQL dependencies (#5242)
Fixes the example with next.js@7

Fixes #5238
2018-09-21 11:49:24 +02:00
Alessandro a39ce550e4 FIX #5234 (#5235)
FIX https://github.com/zeit/next.js/issues/5234

It simply needed to update dependencies
2018-09-20 21:09:29 +02:00
Tim Neutkens 8d649d1b4b Upgrade next plugins to the latest version in examples 2018-09-20 16:04:32 +02:00
Eugene 648e07f187 Update with-mobx example (#5229)
Update to new @babel/plugin-proposal-decorators, @babel/plugin-proposal-class-properties plugins version.
2018-09-20 14:29:57 +02:00
Yuri Yakovlev 2d763e08a8 Remove useless link tag in the head of Ant design example (#5227) 2018-09-20 13:26:11 +02:00
Damian Stasik 758ad9ce84 Remove Fragment from Main component (#5222)
Since `__next-error` is no longer necessary, there is no need to wrap the `__next` div in `Fragment`.
2018-09-20 11:38:33 +02:00
Ian Mitchell 0e4d2a15a7 Fix Example Deploy Links (#5216) 2018-09-20 11:32:16 +02:00
Julien Bouquillon cfcff160de doc: fix deploy link (#5223) 2018-09-20 11:30:23 +02:00
Tim Neutkens a616656f19 Upgrade @zeit/next-sass
Fixes #5210
2018-09-20 00:43:57 +02:00
Tim Neutkens 3a059688a8 7.0.0 2018-09-19 18:17:06 +02:00
Tim Neutkens b6c8d2a4ac Merge branch 'canary'
# Conflicts:
#	package.json
2018-09-19 18:15:57 +02:00
Henrik Wenz 8e9b84bf2a Keep warnings when process.env.NODE_ENV is not production (#5196)
This way the warnings will work in test mode. (`process.env.NODE_ENV === „test“`)
2018-09-18 20:17:35 +02:00
Tim Neutkens ee3a73f80b Add WebAssembly example 2018-09-17 21:48:06 +02:00
Tim Neutkens 200ba0de4e 7.0.0-canary.20 2018-09-17 15:59:34 +02:00
Tim Neutkens 10a9178e32
Make sure react always ends up in the commons bundle (#5192)
Fixes an edge case where some library imports react-dom by itself, like react-spring.
2018-09-17 15:57:28 +02:00
Tim Neutkens 14c07f059e 7.0.0-canary.19 2018-09-17 13:48:52 +02:00
Tim Neutkens a912a4d9dd
Make initial HTML smaller (#5183) 2018-09-17 13:19:19 +02:00
Stephen Sauceda e2d331dbcc add mocha example (#5182)
Adding an example of testing with Mocha

#4767
2018-09-17 00:12:39 +02:00
Tim Neutkens 35c2103e57 7.0.0-canary.18 2018-09-16 18:11:03 +02:00
Tim Neutkens 3dae7cf9a6 Fix test intermittently failing 2018-09-16 18:05:36 +02:00
Tim Neutkens 249d4be6d6 Clear node_modules/.cache before saving node_modules on travis 2018-09-16 17:31:36 +02:00
Tim Neutkens d3f57fb215 7.0.0-canary.17 2018-09-16 17:03:34 +02:00
Tim Neutkens b475e619b9
Implement hard-source-webpack-plugin (#5181)
Follow-up of #5176

Closes #5173 as it led to inconsistencies in DX.
2018-09-16 17:02:32 +02:00
Tim Neutkens 459c1c13d0
Improvements to on-demand-entries (#5176)
First wave of changes. Just landing this first so that there is a base to build on.
2018-09-16 16:06:02 +02:00
René Keller 864ea5d0a1 Remove reference to ./css.js from npm files list (#5179)
./css.js has been removed with [e093441](e093441bad (diff-b9cfc7f2cdf78a7f4b91a753d10865a2))
2018-09-16 13:20:28 +02:00
Tim Neutkens e763a60840
Don’t read package.scripts if there’s no scripts defined (#5168) 2018-09-14 22:44:17 +02:00
Henrik Wenz 34cb05a860 Remove obsolete webpack plugins (#5158)
Since we are now using webpacks `mode` flag we can get rid of:

* `webpack.optimize.ModuleConcatenationPlugin`
* `webpack.DefinePlugin` (`process.env.NODE_ENV`)

https://webpack.js.org/concepts/mode/
2018-09-14 15:45:48 +02:00
maurodaprotis 1f64082c03 Add with-context-api example (#5154)
* Add with-context-api example

* Change next dependency to canary and fix CounterProvider import
2018-09-14 12:04:29 +02:00
Tim Neutkens 695f372da9
Compile away next/link proptypes in production (#5155)
This saves 7KB as prop-types-exact is not needed in production.
2018-09-14 11:34:08 +02:00
Rafael Almeida 5d147a82c4 Update with-ant-design example (#5141)
There is no need to wrap every page with a component when you can use the custom document.
2018-09-12 17:24:37 +02:00
Marcelo Zapaia ae7e53239a FIX with-apollo-auth example token access (#4771)
in some cases access to the token doesn't work in client side. this access to the token once in getInitialProps method and pass it down using props
2018-09-12 17:19:32 +02:00
Henri b79bbecb13 Add react-jss example (#5140)
Added a clear example on how to use react-jss with injecting the styles on the server.

cssinjs/jss#457
2018-09-12 15:49:54 +02:00
Tim Neutkens c2a7766a05 Remove code that is no longer in use (#5147)
* Remove handleBuildId as it’s being handled in the static files route

* Remove dead code
2018-09-12 15:33:52 +02:00