Merge branch 'hakimelek-ssr-support-styled-components' into devel

This commit is contained in:
SachaG 2017-07-29 15:16:08 +09:00
commit 4b8617cc8c
3 changed files with 26 additions and 15 deletions

View file

@ -76,6 +76,7 @@
"simpl-schema": "^0.2.3",
"speakingurl": "^9.0.0",
"stripe": "^4.23.1",
"styled-components": "^2.1.1",
"tracker-component": "^1.3.14",
"underscore": "^1.8.3",
"url": "^0.11.0"

View file

@ -108,7 +108,7 @@ export class AccountsLoginForm extends Tracker.Component {
});
}
const loggingInMessage = this.context.intl.formatMessage({id: 'accounts.logging_in'});
const loggingInMessage = 'accounts.logging_in';
if (this.state.formState == STATES.PROFILE) {
if (!this.props.currentUser && this.state.messages.length === 0) {
@ -626,7 +626,7 @@ export class AccountsLoginForm extends Tracker.Component {
onSubmitHook(error,formState);
if (error) {
const errorId = `accounts.error_${error.reason.toLowerCase().replace(/ /g, '_')}`;
this.showMessage(this.context.intl.formatMessage({id: errorId}) || this.context.intl.formatMessage({id: 'accounts.error_unknown'}), 'error');
this.showMessage(this.context.intl.formatMessage({id: errorId}) || 'accounts.error_unknown', errorId, 'error');
}
else {
loginResultCallback(() => this.state.onSignedInHook());
@ -689,7 +689,7 @@ export class AccountsLoginForm extends Tracker.Component {
// do nothing
} else {
const errorId = `accounts.error_${error.reason.toLowerCase().replace(/ /g, '_')}`;
this.showMessage((error.reason && this.context.intl.formatMessage({id: errorId})) || this.context.intl.formatMessage({id: 'accounts.error_unknown'}))
this.showMessage((error.reason && this.context.intl.formatMessage({id: errorId})) || 'accounts.error_unknown' && errorId)
}
} else {
this.setState({ formState: STATES.PROFILE });
@ -751,7 +751,7 @@ export class AccountsLoginForm extends Tracker.Component {
Accounts.createUser(_options, (error) => {
if (error) {
const errorId = `accounts.error_${error.reason.toLowerCase().replace(/ /g, '_')}`;
this.showMessage(this.context.intl.formatMessage({id: errorId}) || this.context.intl.formatMessage({id: 'accounts.error_unknown'}), 'error');
this.showMessage(this.context.intl.formatMessage({id: errorId}) || 'accounts.error_unknown' && errorId, 'error');
if (this.context.intl.formatMessage({id: `error.accounts_${error.reason}`})) {
onSubmitHook(`error.accounts.${error.reason}`, formState);
}
@ -803,10 +803,10 @@ export class AccountsLoginForm extends Tracker.Component {
Accounts.forgotPassword({ email: email }, (error) => {
if (error) {
const errorId = `accounts.error_${error.reason.toLowerCase().replace(/ /g, '_')}`;
this.showMessage(this.context.intl.formatMessage({id: errorId}) || this.context.intl.formatMessage({id: 'accounts.error_unknown'}), 'error');
this.showMessage(this.context.intl.formatMessage({id: errorId}) || 'accounts.error_unknown' && errorId, 'error');
}
else {
this.showMessage(this.context.intl.formatMessage({id: 'accounts.info_email_sent'}), 'success', 5000);
this.showMessage('accounts.info_email_sent', 'success', 5000);
this.clearDefaultFieldValues();
}
onSubmitHook(error, formState);
@ -837,11 +837,11 @@ export class AccountsLoginForm extends Tracker.Component {
Accounts.resetPassword(token, newPassword, (error) => {
if (error) {
const errorId = `accounts.error_${error.reason.toLowerCase().replace(/ /g, '_')}`;
this.showMessage(this.context.intl.formatMessage({id: errorId}) || this.context.intl.formatMessage({id: 'accounts.error_unknown'}), 'error');
this.showMessage(this.context.intl.formatMessage({id: errorId}) || 'accounts.error_unknown' && errorId, 'error');
onSubmitHook(error, formState);
}
else {
this.showMessage(this.context.intl.formatMessage({id: 'accounts.info_password_changed'}), 'success', 5000);
this.showMessage('accounts.info_password_changed', 'success', 5000);
onSubmitHook(null, formState);
this.setState({ formState: STATES.PROFILE });
Accounts._loginButtonsSession.set('resetPasswordToken', null);
@ -854,11 +854,11 @@ export class AccountsLoginForm extends Tracker.Component {
Accounts.changePassword(password, newPassword, (error) => {
if (error) {
const errorId = `accounts.error_${error.reason.toLowerCase().replace(/ /g, '_')}`;
this.showMessage(this.context.intl.formatMessage({id: errorId}) || this.context.intl.formatMessage({id: 'accounts.error_unknown'}), 'error');
this.showMessage(this.context.intl.formatMessage({id:errorId}) || 'accounts.error_unknown' && errorId, 'error');
onSubmitHook(error, formState);
}
else {
this.showMessage(this.context.intl.formatMessage({id: 'accounts.info_password_changed'}), 'success', 5000);
this.showMessage('accounts.info_password_changed', 'success', 5000);
onSubmitHook(null, formState);
this.setState({ formState: STATES.PROFILE });
this.clearDefaultFieldValues();
@ -871,7 +871,7 @@ export class AccountsLoginForm extends Tracker.Component {
if (message) {
this.setState(({ messages = [] }) => {
messages.push({
message,
message: this.context.intl.formatMessage({id: message}),
type,
...(field && { field }),
});

View file

@ -1,6 +1,7 @@
import React from 'react';
import { match, RouterContext, createMemoryHistory } from 'react-router';
import ReactDOMServer from 'react-dom/server';
import { renderToString } from 'react-dom/server'
import { ServerStyleSheet } from 'styled-components'
import moment from 'moment';
import { RoutePolicy } from 'meteor/routepolicy';
@ -31,6 +32,7 @@ function isAppUrl(req) {
function generateSSRData(options, req, res, renderProps) {
let html;
let css;
let styledComponentCss;
try {
req.css = '';
@ -52,7 +54,9 @@ function generateSSRData(options, req, res, renderProps) {
}
if (!options.disableSSR) {
html = ReactDOMServer.renderToString(app);
const sheet = new ServerStyleSheet();
html = renderToString(sheet.collectStyles(app));
styledComponentCss = sheet.getStyleTags();
} else if (options.loadingScreen) {
html = options.loadingScreen;
}
@ -76,19 +80,25 @@ function generateSSRData(options, req, res, renderProps) {
console.error(new Date(), 'error while server-rendering', err.stack); // eslint-disable-line no-console
}
return { html, css };
return { html, css, styledComponentCss };
}
function sendSSRHtml(options, req, res, next, renderProps) {
const { css, html } = generateSSRData(options, req, res, renderProps);
const { css, html, styledComponentCss } = generateSSRData(options, req, res, renderProps);
req.dynamicHead = req.dynamicHead || '';
req.dynamicBody = req.dynamicBody || '';
// css declared in the project
if (css) {
req.dynamicHead += `<style id="${options.styleCollectorId || 'css-style-collector-data'}">${css}</style>`;
}
// css collected by styled-components
if (styledComponentCss) {
req.dynamicHead += styledComponentCss;
}
let rootElementAttributes = '';
const attributes = options.rootElementAttributes instanceof Array ? options.rootElementAttributes : [];
if (attributes[0] instanceof Array) {