;
8 | constructor(props: {}) {
9 | super(props);
10 | this.state = { counter: 0 };
11 | }
12 |
13 | componentDidMount() {
14 | this.promise = new Promise((resolve) => {
15 | resolve();
16 | });
17 | this.interval = window.setInterval(this.tick, 1000);
18 | }
19 |
20 | tick = () => {
21 | this.setState({ counter: sum(this.state.counter, 2) });
22 | }
23 |
24 | componentWillUnmount() {
25 | clearInterval(this.interval);
26 | }
27 |
28 | render() {
29 | return (
30 |
31 |
Counter: {this.state.counter}
32 |
33 |
6 |
Hello, React and TypeScript and Hot module reload
7 |
8 | {children}
9 |
10 | );
11 |
12 | export default Layout;
13 |
--------------------------------------------------------------------------------
/src/LazyComponent.less:
--------------------------------------------------------------------------------
1 | .counter {
2 | text-decoration: underline;
3 | }
--------------------------------------------------------------------------------
/src/LazyComponent.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import '@/LazyComponent.less';
3 | import { connect } from 'react-redux';
4 |
5 | export class LazyComponent extends React.Component<{ appName: string }, {}> {
6 | render() {
7 | return {this.props.appName} Hello from a lazily loaded component!
;
8 | }
9 | }
10 |
11 | export default connect((state: any) => {
12 | return ({appName: state.app.appName});
13 | })(LazyComponent);
14 |
--------------------------------------------------------------------------------
/src/Menu.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Dispatch, connect } from 'react-redux';
3 | import { push } from 'react-router-redux';
4 | import { PreloadedComponentLoader } from '@/PreloadedComponent';
5 |
6 | /* tslint:disable:no-console */
7 | const deferredOpenDemoPageAction = () => (dispatch: Dispatch, getState: () => any) => {
8 | console.log('thunked action demo');
9 | console.log(getState());
10 | setTimeout(
11 | () => {
12 | console.log('ok, happened!');
13 | dispatch(push('/demo'));
14 | },
15 | 1000);
16 | };
17 |
18 | export class Menu extends React.Component<{ dispatch?: Dispatch }, {}> {
19 | preloadDemoComponent = () => {
20 | PreloadedComponentLoader.preload();
21 | }
22 |
23 | render() {
24 | const { dispatch } = this.props;
25 | return (
26 | menu:
27 | dispatch(push('/counter'))}>Counter_
28 | dispatch(deferredOpenDemoPageAction())}>Demo
29 |
30 | );
31 | }
32 | }
33 |
34 | export default connect()(Menu);
35 |
--------------------------------------------------------------------------------
/src/Polyfill.tsx:
--------------------------------------------------------------------------------
1 | import { polyfill } from 'es6-promise';
2 |
3 | export { polyfill };
--------------------------------------------------------------------------------
/src/PreloadedComponent.tsx:
--------------------------------------------------------------------------------
1 | import Loadable from 'react-loadable';
2 | import * as React from 'react';
3 |
4 | export const PreloadedComponentLoader = Loadable({
5 | loader: (() => {
6 | return import('./LazyComponent') as any;
7 | }),
8 | loading() {
9 | return Loading default component...
;
10 | }
11 | } );
12 |
13 | export class PreloadedComponent extends React.Component<{}, {}> {
14 | render() {
15 | return ;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/StyleguidistWrapper.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { I18nextProvider } from 'react-i18next';
3 | import { Provider } from 'react-redux';
4 | import i18n from '@/i18n';
5 | import { store } from '@/store';
6 |
7 | export default class Wrapper extends React.Component<{}, {}> {
8 | render() {
9 | return (
10 |
11 |
12 | {this.props.children}
13 |
14 |
15 | );
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/calculator/Calculator.ts:
--------------------------------------------------------------------------------
1 | export const sum = (a: number, b: number) => {
2 | return a + b;
3 | };
4 |
--------------------------------------------------------------------------------
/src/components/demo/Demo.less:
--------------------------------------------------------------------------------
1 | .demo {
2 | border: 4px #eee solid;
3 | }
--------------------------------------------------------------------------------
/src/components/demo/Demo.md:
--------------------------------------------------------------------------------
1 | This a basic demo component:
2 |
3 | **Import**
4 |
5 | `import Demo from '@/components/demo/Demo';`
6 |
7 | **Simple usage**
8 |
9 | ```jsx
10 |
11 | ```
12 |
13 | **This is a demo component with subtitle**
14 |
15 | ```jsx
16 |
17 | ```
18 |
--------------------------------------------------------------------------------
/src/components/demo/Demo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import './Demo.less';
3 | import { TranslationFunction } from 'i18next';
4 | import { translate } from 'react-i18next';
5 | import { moo, IMooContext } from '@/context/Moo';
6 |
7 | export interface IDemoProps {
8 | /** subtitle displayed underneath the demo components. use when it is needed */
9 | subtitle?: string;
10 | /** t translation */
11 | t?: TranslationFunction;
12 | }
13 |
14 | /**
15 | * Demo component
16 | */
17 | @moo
18 | export class Demo extends React.Component {
19 | context: IMooContext;
20 | render() {
21 | /* tslint:disable:no-console */
22 | console.log(this.context);
23 | if (this.context.moo) {
24 | this.context.moo.sayMoo('Tim');
25 | }
26 | /* tslint:enable:no-console */
27 | return (
28 |
29 |
Demo component
30 | {this.props.t('hello')}
31 | {this.props.subtitle}
32 |
33 | );
34 | }
35 | }
36 |
37 | /**
38 | * Important. always split the default export of the component with a const variable
39 | * instead of inlining it to help Styleguidist interpret props & methods.
40 | *
41 | * A rule of a thumb for components is to always export as default the component
42 | * to have the consistency (but this is annoying)
43 | */
44 | const DemoContainer = translate('translations')(Demo);
45 | export default DemoContainer;
46 |
--------------------------------------------------------------------------------
/src/config.ts:
--------------------------------------------------------------------------------
1 | interface IConfig {
2 | isDevelopment: boolean;
3 | /** Runtime environment of the app */
4 | env: 'dev' | 'stage' | 'prod';
5 | /** Is this a browser-targeted bundle? */
6 | isBrowser: boolean;
7 | /** Is this a test run? */
8 | isTest: boolean;
9 | }
10 |
11 | export const config: IConfig = {
12 | env: 'dev',
13 | isDevelopment: process.env.NODE_ENV !== 'production',
14 | isTest: process.env.IS_TEST === 'true',
15 | isBrowser: process.env.IS_BROWSER === 'true'
16 | };
17 |
18 | /* tslint:disable:no-console */
19 | console.debug('Running the app with the config', config);
20 |
--------------------------------------------------------------------------------
/src/context/Moo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | // This is a deprecated context usage, but ok for now (05-04-2018)
3 | import PropTypes from 'prop-types';
4 |
5 | class Moo {
6 | sayMoo(name?: string): void {
7 | /* tslint:disable:no-console */
8 | console.log(name ? 'Moo!' : `Moo, ${name}!`);
9 | /* tslint:enable:no-console */
10 | }
11 | }
12 |
13 | const MOO = new Moo();
14 |
15 | /**
16 | * Autowire context types when used like:
17 | *
18 | * @moo
19 | * class Component {
20 | * this.context: IMooContext;
21 | * ...
22 | * this.context.moo.sayMoo();
23 | * }
24 | *
25 | * Requires components to be wrapped inside the MooProvider
26 | */
27 | export function moo(target: any) {
28 | target.contextTypes = target.contextTypes || {};
29 | target.contextTypes['moo'] = PropTypes.object;
30 | }
31 |
32 | export interface IMooContext {
33 | moo: Moo;
34 | }
35 |
36 | export class MooProvider extends React.Component<{}, {}> {
37 | getChildContext() {
38 | return {
39 | moo: MOO
40 | } as IMooContext;
41 | }
42 |
43 | static childContextTypes = {
44 | moo: PropTypes.object
45 | };
46 |
47 | render() {
48 | return this.props.children;
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/history.ts:
--------------------------------------------------------------------------------
1 | import createBrowserHistory from 'history/createBrowserHistory';
2 | import createMemoryHistory from 'history/createMemoryHistory';
3 | import { config } from '@/config';
4 |
5 | export const history = config.isBrowser ?
6 | createBrowserHistory() :
7 | createMemoryHistory();
8 |
--------------------------------------------------------------------------------
/src/i18n.ts:
--------------------------------------------------------------------------------
1 | import i18n from 'i18next';
2 | import LanguageDetector from 'i18next-browser-languagedetector';
3 |
4 | i18n
5 | .use(LanguageDetector)
6 | .init({
7 | // we init with resources
8 | resources: {
9 | en: {
10 | translations: {
11 | 'hello': 'Welcome to React.js',
12 | }
13 | },
14 | pl: {
15 | translations: {
16 | 'hello': 'Witaj w React.js',
17 | }
18 | }
19 | },
20 | fallbackLng: 'en',
21 | debug: true,
22 |
23 | // have a common namespace used around the full app
24 | ns: ['translations'],
25 | defaultNS: 'translations',
26 |
27 | keySeparator: false, // we use content as keys
28 |
29 | interpolation: {
30 | escapeValue: false, // not needed for react!!
31 | formatSeparator: ','
32 | },
33 |
34 | react: {
35 | wait: false
36 | }
37 | });
38 |
39 | export default i18n;
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { render } from 'react-dom';
3 | import { polyfill } from '@/Polyfill';
4 | import App from '@/App';
5 |
6 | polyfill();
7 |
8 | const rootEl = document.getElementById('root');
9 |
10 | render(, rootEl);
11 |
--------------------------------------------------------------------------------
/src/reducers.ts:
--------------------------------------------------------------------------------
1 | import { routerReducer } from 'react-router-redux';
2 | import { Reducer, combineReducers, Action } from 'redux';
3 |
4 | export const rootReducer: Reducer = combineReducers({
5 | app: (prevState = { appName: 'Yay, Redux!'}, action: Action) => {
6 | if (action.type === 'SERVER_PREHYDRATION') {
7 | return {
8 | appName: 'Yay, Redux from prehydration!'
9 | };
10 | } else {
11 | return prevState;
12 | }
13 | },
14 | router: routerReducer
15 | });
16 |
--------------------------------------------------------------------------------
/src/server.tsx:
--------------------------------------------------------------------------------
1 | /* Based on
2 | https://github.com/lith-light-g/universal-react-redux-typescript-starter-kit
3 | */
4 |
5 | import * as React from 'react';
6 | import { renderToString, renderToStaticMarkup } from 'react-dom/server';
7 | import * as express from 'express';
8 | import * as serialize from 'serialize-javascript';
9 | // import * as webpackDevMiddleware from 'webpack-dev-middleware';
10 | // import * as webpackHotMiddleware from 'webpack-hot-middleware';
11 |
12 | import { Express, Response, Request } from 'express-serve-static-core';
13 | // import { StaticRouter } from 'react-router-dom';
14 | // import { matchRoutes, renderRoutes, MatchedRoute } from 'react-router-config';
15 | import { App } from '../src/App';
16 | import { store } from './store';
17 |
18 | const indexFile: string = require('../dist/index.html');
19 | const app: Express = express();
20 | const port = process.env.PORT || 3000;
21 | import { JSDOM } from 'jsdom';
22 | import { push } from 'react-router-redux';
23 |
24 | const indexDocument = new JSDOM(indexFile).window.document;
25 | const scripts = Array.from(indexDocument.querySelectorAll('script')).map(script => script.src);
26 | const styles = (Array.from(indexDocument.querySelectorAll('link[rel=stylesheet]')) as HTMLLinkElement[]).map((css => css.href));
27 |
28 | app.use(express.static('./dist'));
29 |
30 | app.get('/:routerPath', (req: Request, res: Response) => {
31 | store.dispatch({
32 | type: 'SERVER_PREHYDRATION'
33 | });
34 | // set initial route to the store
35 | store.dispatch(push('/' + req.params.routerPath));
36 | const reactAppElement: string = renderToString((
37 |
38 | ));
39 |
40 | // if redirect has been used
41 | // if (context.url) {
42 | // res.redirect(302, context.url);
43 | // return;
44 | // }
45 |
46 | res.send(`${renderToStaticMarkup((
47 |
48 |
49 | App (prerender)
50 | {styles.map(style => )}
51 |
52 |
53 |
54 |
58 | {scripts.map((script: string) =>