You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+11-10Lines changed: 11 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -46,23 +46,15 @@ __This solution scale really well with increasing modules count because you relo
46
46
Most often your team is using different Editors/IDE's so you'll need to have a common way to run type-checking using a specific version of TypeScript compiler for consistent results and avoid Editor specific issues.
47
47
Run `tsc -p src --watch` command for quick incremental type-checking or `tsc -p src` command for one-time complete check (JS emit is disabled to not clutter your project with intermediate JS files)
48
48
49
-
### CSS-MODULES WITH TYPED CLASS-NAMES EXPERIMENT
50
-
Locally scoped CSS styles, encapsulated as ES6 Modules that can be imported in UI components, with capability to type-check CSS class-names in your components using interfaces and leverage TypeScript IntelliSense features in Editor/IDE (using [csjs](https://github.com/rtsao/csjs#faq)):
51
-
- Define available CSS classes as interfaces in CSS-Modules to get className property auto-completion, type-checking and easy refactoring in your entire codebase.
52
-
- Auto-generate documentation for CSS styles leveraging JSDoc support in defined interfaces.
53
-
- Full CSS support - including pseudo classes, media queries & more...
54
-
55
-
__EXAMPLE:__[Consumer Component](src/containers/css-modules-container/index.tsx) and it's [CSS Module Styles in TypeScript Format with Class-Names Interface](src/containers/css-modules-container/container-styles.tsx)
Enabled strictNullChecks with noImplicitAny tsc flags, to increase type safety and grant better tooling support using Non-nullable Types (v2.0) and Smarter Type Inference (v2.1) [Source](https://blogs.msdn.microsoft.com/typescript/2016/11/08/typescript-2-1-rc-better-inference-async-functions-and-more/)
58
51
59
52
### ASYNC/AWAIT/GENERATORS transformation when targeting ES3/ES5 (No Babel)
60
53
Support "async & generator functions" when targeting ES3/ES5 __without Babel!__
61
54
- Async/Await - TypeScript v2.1 provide native support for ES3/ES5 transformation (https://github.com/Microsoft/TypeScript/pull/9175)
62
55
- Generators - for the moment TypeScript DevTeam have declined to support generators downlevel transformation (to ES3/ES5) (https://github.com/Microsoft/TypeScript/issues/3975#issuecomment-250859415), but you can use an alternative solution covered below:
63
56
64
57
__Generators transformation to ES3/ES5:__
65
-
66
58
Use [Facebook Regenerator Project](https://github.com/facebook/regenerator) instead of __Babel__ as dependency to transform Generators.
67
59
_(NOTE: Internally **Babel** is also running "regenerator runtime" for async and generator functions transformations - https://babeljs.io/docs/usage/caveats/)_
68
60
@@ -76,6 +68,15 @@ Test reload speed improvement using this simple test procedure:
76
68
1. run `npm run unbundle` -> open network tab in chrome dev tools -> reload the page -> check logged results
77
69
2. run `npm run build:dev` -> open network tab in chrome dev tools -> reload page -> compare logged results with previous
78
70
71
+
### CSS-MODULES WITH TYPED CLASS-NAMES EXPERIMENT
72
+
Locally scoped CSS styles, encapsulated as ES6 Modules that can be imported in UI components, with capability to type-check CSS class-names in your components using interfaces and leverage TypeScript IntelliSense features in Editor/IDE (using [csjs](https://github.com/rtsao/csjs#faq)):
73
+
- Define available CSS classes as interfaces in CSS-Modules to get className property auto-completion, type-checking and easy refactoring in your entire codebase.
74
+
- Auto-generate documentation for CSS styles leveraging JSDoc support in defined interfaces.
75
+
- Full CSS support - including pseudo classes, media queries & more...
76
+
77
+
__EXAMPLE:__[Consumer Component](src/containers/css-modules-container/index.tsx) and it's [CSS Module Styles in TypeScript Format with Class-Names Interface](src/containers/css-modules-container/container-styles.tsx)
0 commit comments