Themes: ssr-ready modules needed for Showcase #3386
Conversation
ehg
added
[Feature Group] Appearance & Themes
| @@ -73,7 +73,10 @@ module.exports = { | |||
| }, | |||
| plugins: [ | |||
| // Require source-map-support at the top, so we get source maps for the bundle | |||
| new webpack.BannerPlugin( 'require( "source-map-support" ).install();', { raw: true, entryOnly: false } ) | |||
| new webpack.BannerPlugin( 'require( "source-map-support" ).install();', { raw: true, entryOnly: false } ), | |||
| new webpack.NormalModuleReplacementPlugin( /^analytics$/, 'lodash/utility/noop' ), // Depends on BOM | |||
There was a problem hiding this comment.
we'll have to change these to use the new path for lodash
ehg
force-pushed
the
update/ssr-ready-modules-for-themes
branch
from
824e23d to
32d0f2b
Compare
ehg
changed the title
If we're going to conjure up a number for now, we must have stats somewhere on the most commonly used widths? |
The problem with setting a single width, is that it could cause weirdness on the initial render. See #3386 (comment) |
| @@ -255,13 +262,13 @@ module.exports = React.createClass( { | |||
| ? this._keyListener.bind( this, 'openSearch' ) | |||
| : null | |||
| } | |||
| aria-controls={ 'search-component-' + this.id } | |||
| aria-controls={ 'search-component-' + this.state.instanceId } | |||
There was a problem hiding this comment.
Is this causing any problems with react tree reconciliation? As far as I remember, it turned out not to be a problem (though I'm not sure why not).
There was a problem hiding this comment.
This is pretty annoying to test, since I get root replaced errors when testing logged out in #3333 — which I think are obscuring any reconciliation errors.
I remember it causing problems with reconciliation, although my memory is hazy. From what I remember, the id would be different on the server vs the client, as the counter gets reset when the client loads, but increments forever on the server. I'm hoping that statics may help with this, although it's difficult to test.
It could be worth whipping up a /design SSR attempt now, just to see what happens with Search reconc.
There was a problem hiding this comment.
It could be worth whipping up a /design SSR attempt now, just to see what happens with Search reconc.
I suggest tackling this later if it becomes a problem.
|
From the linked SSR doc:
Can we add a rationale for this? |
| @@ -17,13 +19,16 @@ import { isMobile } from 'lib/viewport'; | |||
| /** | |||
| * Internal variables | |||
| */ | |||
| var _instance = 1, | |||
| SEARCH_DEBOUNCE_MS = 300; | |||
| var SEARCH_DEBOUNCE_MS = 300; | |||
|
Good to merge, other than my |
|
Though touching lots of parts, looks pretty sane code-wise. Haven't properly tested yet. |
|
Added some more fixes in be69f2a & 4c12f92. Could use another quick review :) |
|
LGTM 👍 |
- Switch to static and state instance id in Search and SectionNav - Mark needed modules as `@ssr-ready` - Use webpack's NormalModuleReplacementPlugin to noop modules that are currently non-compatible with SSR - Use i18n mixin directly, since ReactInjection doesn't work well server-side - Factor window.innerWidth usage into viewport's new getWindowInnerWidth()
ehg
force-pushed
the
update/ssr-ready-modules-for-themes
branch
from
e7feb1b to
9d09e92
Compare
…-themes Themes: ssr-ready modules needed for Showcase
ehg
removed
the
[Status] Needs Review
In #3279 & #3333 we're using a bunch more modules on the server. This means we have to check they're compatible with server-side-rendering, and proceed as per https://github.com/Automattic/wp-calypso/tree/master/docs/server-side-rendering.md
Here we:
@ssr-readywhat we need for the aforementioned PRsnoopcertain modules with webpack's NMR, that won't work on the server (yet) 1nooped module in the webpackPragmaCheckerPluginwpin webpackPragmaCheckerPlugin, as it's a client/server split modulelib/mixins/i18n, as it runs OK now, and we'll be getting to making it isomorphic in the very near futuresetStateasynchronous calls in componentDidMountSearchandSelectDropdownto use saner instance id method.i18nmixin, instead of relying on it being mixed in via injection (the server hates this)Components with modified code:
HeaderCakeSearchSelectDropdownmixins/observe-window-resizelib/viewportTo test:
1 NMR === NormalModuleReplacementPlugin. We replace the module in the server bundle with something like
lodash'snoop. We do this because converting every single ssr-incompatible module at once is extremely difficult, so this is a piecemeal approach. It is not a long term solution./cc @mcsf @ockham @seear