Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add devkit base with gh-pages deploy on merge #59

Merged
merged 1 commit into from
Nov 9, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
coverage/
node_modules/
devkit/.next
devkit/out
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -63,3 +63,7 @@ buck-out/
./index.js
# env
.env.*

# nextjs
devkit/.next
devkit/out
9 changes: 9 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,12 @@ script: yarn ci
branches:
only:
- master

deploy:
provider: pages
local-dir: devkit/out
skip-cleanup: true
github-token: $GITHUB_TOKEN
keep-history: true
on:
branch: master
6 changes: 6 additions & 0 deletions devkit/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
rules: {
'require-jsdoc': 'off',
'valid-jsdoc': 'off'
}
};
53 changes: 53 additions & 0 deletions devkit/pages/_app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React from 'react';
import App, { Container } from 'next/app';
import Head from 'next/head';
import { MuiThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import JssProvider from 'react-jss/lib/JssProvider';
import getPageContext from '../src/getPageContext';

class Devkit extends App {
constructor(props) {
super(props);
this.pageContext = getPageContext();
}

componentDidMount() {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles && jssStyles.parentNode) {
jssStyles.parentNode.removeChild(jssStyles);
}
}

render() {
const { Component, pageProps } = this.props;
return (
<Container>
<Head>
<title>My page</title>
</Head>
{/* Wrap every page in Jss and Theme providers */}
<JssProvider
registry={this.pageContext.sheetsRegistry}
generateClassName={this.pageContext.generateClassName}
>
{/* MuiThemeProvider makes the theme available down the React
tree thanks to React context. */}
<MuiThemeProvider
theme={this.pageContext.theme}
sheetsManager={this.pageContext.sheetsManager}
>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
{/* Pass pageContext to the _document though the renderPage enhancer
to render collected styles on server side. */}
<Component pageContext={this.pageContext} {...pageProps} />
</MuiThemeProvider>
</JssProvider>
</Container>
);
}
}

export default Devkit;
91 changes: 91 additions & 0 deletions devkit/pages/_document.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import React from 'react';
import PropTypes from 'prop-types';
import Document, { Head, Main, NextScript } from 'next/document';
import flush from 'styled-jsx/server';

class MyDocument extends Document {
render() {
const { pageContext } = this.props;

return (
<html lang="en" dir="ltr">
<Head>
<meta charSet="utf-8" />
{/* Use minimum-scale=1 to enable GPU rasterization */}
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
{/* PWA primary color */}
<meta
name="theme-color"
content={pageContext.theme.palette.primary.main}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}

MyDocument.getInitialProps = ctx => {
// Resolution order
//
// On the server:
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. document.getInitialProps
// 4. app.render
// 5. page.render
// 6. document.render
//
// On the server with error:
// 1. document.getInitialProps
// 2. app.render
// 3. page.render
// 4. document.render
//
// On the client
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. app.render
// 4. page.render

// Render app and page and get the context of the page with collected side effects.
let pageContext;
const page = ctx.renderPage(Component => {
const WrappedComponent = props => {
pageContext = props.pageContext;
return <Component {...props} />;
};

WrappedComponent.propTypes = {
pageContext: PropTypes.object.isRequired
};

return WrappedComponent;
});

return {
...page,
pageContext,
// Styles fragment is rendered after the app and page rendering finish.
styles: (
<>
<style
id="jss-server-side"
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: pageContext.sheetsRegistry.toString()
}}
/>
{flush() || null}
</>
)
};
};

export default MyDocument;
28 changes: 28 additions & 0 deletions devkit/pages/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the only file that had real my code in it, but it's still basically nothing.

import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
root: {
textAlign: 'center',
paddingTop: theme.spacing.unit * 20
}
});

const Index = ({ classes }) => (
<div className={classes.root}>
<Typography variant="h4" gutterBottom>
What is this developer kit
</Typography>
<Typography variant="subtitle1" gutterBottom>
and why is it free?
</Typography>
</div>
);

Index.propTypes = {
classes: PropTypes.object.isRequired
};

export default withStyles(styles)(Index);
54 changes: 54 additions & 0 deletions devkit/src/getPageContext.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { SheetsRegistry } from 'jss';
import {
createMuiTheme,
createGenerateClassName
} from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';

// A theme with custom primary and secondary color.
// It's optional.
const theme = createMuiTheme({
palette: {
primary: {
light: purple[300],
main: purple[500],
dark: purple[700]
},
secondary: {
light: green[300],
main: green[500],
dark: green[700]
}
},
typography: {
useNextVariants: true
}
});

function createPageContext() {
return {
theme,
// This is needed in order to deduplicate the injection of CSS in the page.
sheetsManager: new Map(),
// This is needed in order to inject the critical CSS.
sheetsRegistry: new SheetsRegistry(),
// The standard class name generator.
generateClassName: createGenerateClassName()
};
}

export default function getPageContext() {
// Make sure to create a new context for every server-side request so that data
// isn't shared between connections (which would be bad).
if (!process.browser) {
return createPageContext();
}

// Reuse context on the client-side.
if (!global.__INIT_MATERIAL_UI__) {
global.__INIT_MATERIAL_UI__ = createPageContext();
}

return global.__INIT_MATERIAL_UI__;
}
9 changes: 7 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,14 @@
"ios": "react-native run-ios --simulator \"iPhone XS\"",
"lint": "eslint .",
"prettier": "prettier \"**/*.{js,json,css,md}\" --write",
"test": "yarn lint && yarn jest --coverage && yarn solidity-coverage",
"test": "yarn lint && yarn jest --coverage && yarn solidity-coverage && yarn devkit:build",
"post-install": "react-native link",
"detox:build": "detox build --configuration ios.sim.release",
"detox:test": "detox test --configuration ios.sim.release --cleanup",
"e2e": "yarn concurrently -k -s first \"yarn start\" \"yarn detox:build && yarn detox:test\"",
"ci": "./scripts/travis-test.sh"
"ci": "./scripts/travis-test.sh",
"devkit": "next devkit",
"devkit:build": "next build devkit && next export devkit"
},
"dependencies": {
"Base64": "^1.0.1",
Expand Down Expand Up @@ -46,6 +48,7 @@
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/runtime": "^7.1.2",
"@material-ui/core": "^3.4.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
Expand All @@ -65,9 +68,11 @@
"husky": "^1.1.1",
"jest": "^23.6.0",
"metro-react-native-babel-preset": "^0.48.0",
"next": "^7.0.2",
"prettier": "^1.14.3",
"pretty-quick": "^1.7.0",
"prop-types": "^15.6.2",
"react-jss": "^8.6.1",
"react-native-mock-render": "^0.1.2",
"react-test-renderer": "16.5.0",
"truffle": "^5.0.0-next.12",
Expand Down
Loading