Closed F1LT3R closed 4 years ago
Looks awesome.. Only thing that's missing seems to be typescript project references.. Any plan to add that?
@cipriancaba TypeScript project references? Forgive me, I am not sure what you mean.
Only thing that's missing seems to be typescript project references - @cipriancaba
Ah... you must mean this?
https://www.typescriptlang.org/docs/handbook/project-references.html
Are you thinking it should be added in app-typescript
, or in the storybook-typescript
or both?
I'm trying to stick to the Create-React-App's TypeScript template as much as possible. Is there a really good reason to change it?
I'm not a TypeScript user, so project references are not something I understand.
Perhaps some other experienced React+TypeScript devs can weigh in on this?
ππ React App Rewired, Ant-Design & TypeScript
About
This PR demonstrates React-App-Rewired compatibility as well as basic usage of Ant Design and TypeScript examples.
This PR relates to: https://github.com/react-workspaces/react-workspaces-playground/issues/9
Questions for Review
ant-design-compat
work for others?yarn test
andyarn lint
each package, as well asyarn test
from the root (which lints and provides coverage. I have checked these but it would be nice to get another pair of eyes on this. πIssues Addressed By This PR
Technical Details
packages/apps/app-ant-design-rewired
- this separates out the configuration for those who want to use React-App-Rewired and/or Ant-Design.app-one
andapp-two
) were given more specific names, (app-single-comp
andapp-multi-comps
) - these exist with Babel Analyzer setup so that you can see that tree-shaking is working.packages/apps/app-typescript
andpackages/components-typescript
.@react-workspaces/react-scripts
version was updated to^3.3.0-alpha-08
- this is based of of the current Facebook/Create-React-App @v3.3.0 which should bring things up to date as well as addressing some security concerns.A single prettier config is used in this repo for all JavaScript and TypeScript. I have tried to blend the best of both worlds. The file can be found in
${root}/.prettierrc.js
. If I had not done this, the IDE would not be able to pick out the correct prettier rules for formatOnSave, etc. Here are the rules:.eslintrc
rules, as TypeScript uses a different parser. Once again, this can live in the root if you are only using TypeScript or JavaScript, but when you want to blend both in a MonoRepo, you will need to define rules locally to the package.yarn test
to git pre-commit withhusky
which will kick off linting, jest tests and a coverage report for the whole repo using Lerna.Ant/Rewired Demo Configuration
package.json
The
packages/apps/app-ant-design-rewired/package.json
file was updated. Dependencies were added to allow React-App-Rewired inject a custom configuration intoreact-scripts
allowing the setup of Ant Design withbabel-plugin-export
for automated style importing.The package start script was updated to use
react-app-rewired
with the "--scripts-version" of@reacect-workspaces-playground/react-scripts
. This allows R.A.R. to use the Yarn Workspaces configuration as the base WebPack config for overriding.config-overrides.js
The
config-overrides.js
file was added to use the Babel Importer to automatically load the associated styles of an Ant Design component.App.js
The
packages/apps/app-ant-design-rewired/src/App.js
file was updated to include the Ant Design<DatePicker />
component.Ant-Design Screenshot
TypeScript Screenshot
Happy Holidays! ππππΌπππ πͺπ₯πβππ―οΈβοΈ βοΈ θε «