:star: Scalable micro-framework featuring React and TypeScript
Home Page: https://scalable-react-ts-boilerplate.herokuapp.com/
License: MIT License
React router v4 has been recently released out of beta. It's a much cleaner version than 3 is.
I am not sure why, but the server-rendering of styled-components seems to fail. This is working on scalable-react-boilerplate (located here). It must be a regression in styled-components.
(58,24): error TS2345: Argument of type 'History' is not assignable to parameter of type 'History'. Types of property 'createLocation' are incompatible. Type '{ (path?: LocationDescriptor, action?: string, key?: string): Location; (path?: string, state?: O...' is not assignable to type '(path?: LocationDescriptor, action?: Action, key?: string) => Location'. Type 'Location' is not assignable to type 'Location'. Two different types with this name exist, but they are unrelated. Types of property 'action' are incompatible. Type 'string' is not assignable to type 'Action'.
Not sure if it's due to typings https://github.com/DefinitelyTyped/DefinitelyTyped/issues/14575
If anyone is interested, I have solved the problem by adding the last version of @types/history to package.json then delete node_modules and re-install.
Hope it will work for you as it did for me. ❤️
Hello, can you, please provide some examples with using great redux-logic features?
Would be great to have https://github.com/storybooks/react-storybook built into this starter. The part I'm not sure how to do is the webpack config as shown here: https://getstorybook.io/docs/react-storybook/configurations/custom-webpack-config.
We need some CI for running the test suite.
I'd also like to add danger.js for setting up some deployment rules.
The current text:
npm run run serve:bundleshould read:
npm run serveHey Guys, First of all thanks for greating this project, It helpt me a lot with getting my head around typescript and react and making it scalable.
In the components and containers folders there is an index.tsx in there every component/container is imported and exported but I see comment's like /* GENERATOR-IMPORT */ so I thought maybe a script is generating these files is this correct or do I need to import/export every new component manually?
This is the index.tsx from your current project. I personaly forked it. which was before the move to lerna.
// component/index.tsx
/* GENERATOR-IMPORT */
import Html from './Html';
export {
/* GENERATOR-EXPORT */
Html,
};
I'm starting to see this when I run tests:
`$ yarn test
yarn test v0.21.2
$ cross-env NODE_ENV=test jest
jest-haste-map: duplicate manual mock found:
Module name: headingProps.mocks
Duplicate Mock path: C:\Git\scalable-react-typescript-boilerplate\build\src\client\components\Heading_tests__mocks_\headingProps.mocks.js
This warning is caused by two manual mock files with the same file name.
Jest will use the mock file found in:
C:\Git\scalable-react-typescript-boilerplate\build\src\client\components\Heading_tests__mocks_\headingProps.mocks.js
Please delete one of the following two files:
C:\Git\scalable-react-typescript-boilerplate\src\client\components\Heading_tests__mocks_\headingProps.mocks.ts
C:\Git\scalable-react-typescript-boilerplate\build\src\client\components\Heading_tests__mocks_\headingProps.mocks.js
jest-haste-map: duplicate manual mock found:
Module name: headlineProps.mocks
Duplicate Mock path: C:\Git\scalable-react-typescript-boilerplate\build\src\client\components\Headline_tests__mocks_\headlineProps.mocks.js
This warning is caused by two manual mock files with the same file name.
Jest will use the mock file found in:
C:\Git\scalable-react-typescript-boilerplate\build\src\client\components\Headline_tests__mocks_\headlineProps.mocks.js
Please delete one of the following two files:
C:\Git\scalable-react-typescript-boilerplate\src\client\components\Headline_tests__mocks_\headlineProps.mocks.ts
C:\Git\scalable-react-typescript-boilerplate\build\src\client\components\Headline_tests__mocks_\headlineProps.mocks.js
`
Hi
I am having problems doing a clean npm i. The output is:
C:\n\scalablets>npm i
npm WARN deprecated @types/[email protected]: This is a stub types definition for reselect (https://github.com/rackt/reselect). reselect provides its own type definitions, so you don't need @types/reselect installed!
npm WARN deprecated [email protected]: 💥 preset-latest accomplishes the same task as babel-preset-env. 🙏 Please install it with 'npm install babel-preset-env --save-dev'. '{ "presets": ["latest"] }' to '{ "presets": ["env"] }'. For more info, please check the docs: http://babeljs.io/docs/plugins/preset-env 👌. And let us know how you're liking Babel at @babeljs on 🐦
npm WARN deprecated [email protected]: It is recommended to install Yarn using the native installation method for your environment. See https://yarnpkg.com/en/docs/install
npm WARN deprecated [email protected]: Use mz or fs-extra^3.0 with Promise Support
npm WARN prefer global [email protected] should be installed with -g
npm WARN prefer global [email protected] should be installed with -g
npm WARN prefer global [email protected] should be installed with -g
> [email protected] postinstall C:\n\scalablets\node_modules\spawn-sync
> node postinstall
> [email protected] postinstall C:\n\scalablets
> npm run deploy
> [email protected] predeploy C:\n\scalablets
> rimraf build/public/*.*
> [email protected] deploy C:\n\scalablets
> cross-env NODE_ENV=production ./node_modules/.bin/webpack --config ./webpack.config.prod.js
ts-loader: Using [email protected] and C:\n\scalablets\tsconfig.json
Hash: 105ed5d55fbdf53f9df1
Version: webpack 2.5.1
Time: 25675ms
Asset Size Chunks Chunk Names
vendor.5f7a6433563bd674a292.js 789 kB 0 [emitted] [big] vendor
main.b216aee430e2edbf77e4.js 2.07 MB 1 [emitted] [big] main
main.02949039b690e54acd3a2459059d0422.css 11.4 kB 1 [emitted] main
main.b216aee430e2edbf77e4.js.map 2.44 MB 1 [emitted] main
main.02949039b690e54acd3a2459059d0422.css.map 118 bytes 1 [emitted] main
manifest.json 285 bytes [emitted]
[11] ./~/styled-components/dist/styled-components.es.js 251 kB {0} {1} [built]
[63] ./~/redux/es/index.js 1.08 kB {0} {1} [built]
[139] ./~/apollo-client/index.js 1.26 kB {0} {1} [built]
[140] ./~/react-router/es/index.js 1.46 kB {0} {1} [built]
[216] ./~/graphql-tag/index.js 4.66 kB {0} {1} [built]
[217] ./~/react-router-redux/lib/index.js 1.97 kB {0} {1} [built]
[258] ./~/axios/index.js 40 bytes {0} {1} [built]
[259] ./~/react-apollo/lib/browser.js 650 bytes {0} {1} [built]
[260] ./~/react-dom/index.js 59 bytes {0} {1} [built]
[261] ./~/react-markdown/src/react-markdown.js 2.15 kB {0} {1} [built]
[262] ./~/react-redux/es/index.js 230 bytes {0} [built]
[263] ./~/redux-logic/build-es/index.js 245 bytes {0} {1} [built]
[569] ./~/rxjs/Rx.js 9.65 kB {0} [built]
[1007] multi ./src/client/index.tsx 28 bytes {1} [built]
[1008] multi react react-dom styled-components react-redux react-router react-router-redux react-markdown redux-connect redux rxjs axios redux-logic react-apollo graphql-tag apollo-client 196 bytes {0} [built]
+ 997 hidden modules
ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(45,5): error TS2403: Subsequent variable declarations must have the same type. Variable 'referrerPolicy' must be of type 'ReferrerPolicy', but here has type 'string'.
ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(46,5): error TS2403: Subsequent variable declarations must have the same type. Variable 'mode' must be of type 'RequestMode', but here has type 'string'.
ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(47,5): error TS2403: Subsequent variable declarations must have the same type. Variable 'credentials' must be of type 'RequestCredentials', but here has type 'string'.
ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(48,5): error TS2403: Subsequent variable declarations must have the same type. Variable 'cache' must be of type 'RequestCache', but here has type 'string'.
ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(49,5): error TS2403: Subsequent variable declarations must have the same type. Variable 'redirect' must be of type 'RequestRedirect', but here has type 'string'.
ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(56,14): error TS2403: Subsequent variable declarations must have the same type. Variable 'cache' must be of type 'RequestCache', but here has type 'string'.
ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(57,14): error TS2403: Subsequent variable declarations must have the same type. Variable 'credentials' must be of type 'RequestCredentials', but here has type 'string'.
ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(58,14): error TS2403: Subsequent variable declarations must have the same type. Variable 'destination' must be of type 'RequestDestination', but here has type 'string'.
ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(63,14): error TS2403: Subsequent variable declarations must have the same type. Variable 'mode' must be of type 'RequestMode', but here has type 'string'.
ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(64,14): error TS2403: Subsequent variable declarations must have the same type. Variable 'redirect' must be of type 'RequestRedirect', but here has type 'string'.
ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(66,14): error TS2403: Subsequent variable declarations must have the same type. Variable 'referrerPolicy' must be of type 'ReferrerPolicy', but here has type 'string'.
ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(67,14): error TS2403: Subsequent variable declarations must have the same type. Variable 'type' must be of type 'RequestType', but here has type 'string'.
ERROR in C:\n\scalablets\node_modules\@types\isomorphic-fetch\index.d.ts
(94,14): error TS2403: Subsequent variable declarations must have the same type. Variable 'type' must be of type 'ResponseType', but here has type 'string'.
ERROR in C:\n\scalablets\node_modules\openui\dist\SvgIcon\types.d.ts
(2,35): error TS2314: Generic type 'SVGProps<T>' requires 1 type argument(s).
ERROR in main.b216aee430e2edbf77e4.js from UglifyJs
Name expected [main.b216aee430e2edbf77e4.js:42736,8]
Child extract-text-webpack-plugin:
[0] ./~/css-loader/lib/css-base.js 1.46 kB {0} [built]
[1] ./~/css-loader!./~/postcss-loader!./~/github-markdown-css/github-markdown.css 11.5 kB {0} [built]
I got rid of the TS errors by forcing Typescript version 2.2.2 instead of the 2.3.
The SVGProps error seems to be related to the react typings version. Newer versions have the type argument. I have added SVGElement in my version.
The error:
ERROR in main.b216aee430e2edbf77e4.js from UglifyJs
Name expected [main.b216aee430e2edbf77e4.js:42736,8]
seems to come from the second line in the following piece of code:
function Box(_a) {
var { children } = _a, rest = __rest(_a, ["children"]);
return (React.createElement(styles_1.default, Object.assign({}, rest), children || null));
}
Tried "fixing" that also, but then I get
ERROR in main.2f6426b039edcbfeac87.js from UglifyJs
Unexpected character '`' [main.2f6426b039edcbfeac87.js:42558,44]
From:
exports.BoxStyles = styled_components_1.css `
display: flex;
background-color: ${({ backgroundColor }) => backgroundColor || 'transparent'};
justify-content: ${({ justifyContent }) => justifyContent || 'flex-start'};
align-items: ${({ alignItems }) => alignItems || 'flex-start'};
flex-direction: ${({ flexDirection }) => flexDirection || 'column'};
flex-wrap: ${({ flexWrap, reverse }) => styleUtils_1.calculateFlexWrap(flexWrap, reverse)};
padding: ${({ pad }) => styleUtils_1.sizeToString(pad)};
margin: ${({ margin }) => styleUtils_1.sizeToString(margin)};
width: ${({ boxSize }) => styleUtils_1.boxSizeToStyle(boxSize).width};
height: ${({ boxSize }) => styleUtils_1.boxSizeToStyle(boxSize).height};
flex-basis: auto;
min-height: ${({ full }) => styleUtils_1.calculateFullStyle(full, 'vh')};
min-width: ${({ full }) => styleUtils_1.calculateFullStyle(full, 'vw')};
cursor: ${({ selectable }) => selectable ? 'pointer' : 'inherit'};
`;
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.