chore(docs): use babel-loader #1354

layershifter · 2019-05-17T10:41:09Z

Related #508.

Enable `isolatedModules` in TS `compilerOptions`

Babel behaves as if the --isolatedModules option was passed to the TypeScript Compiler and this can't be worked around because Babel doesn't support cross-file analysis.

How does Babel handle TypeScript code? It removes it, it strips out all the TypeScript, turns it into "regular" JavaScript. Any bundler don't know anything about types because don't exists in runtime and that's why types can't be reexported.

https://babeljs.io/docs/en/babel-plugin-transform-typescript

Updates in exports

As mentioned before we can't reexport types, that's why exports were transformed:

Before

export { default as Accordion, AccordionProps } from './Accordion'

After

export { default as Accordion } from './Accordion'
export * from './Accordion' // will AccordionProps and everything except default

`types.internal.ts`

These files will contain shared and reusable types in package, but these types shouldn't be part of a public API and can't be exported.

export * from './types' // contains only types that are part of public API

Remove `awesome-typescript-loader` & `ts-loader`

Was replaced with babel-loader and fork-ts-checker-webpack-plugin to keep type checks.

Add `fork-ts-checker-webpack-plugin`

Webpack plugin that runs TypeScript type checker on a separate process. It allows very fast compile code by babel-loader and run type checks parallel, so by switching to Babel we will not loose TS checks.

This PR do not resolve issues with HMR.

…m/stardust-ui/react into chore/babel-loader

packages/react/src/components/Loader/Loader.tsx

codecov · 2019-05-21T14:32:33Z

Codecov Report

Merging #1354 into master will not change coverage.
The diff coverage is 100%.

@@           Coverage Diff           @@
##           master    #1354   +/-   ##
=======================================
  Coverage   72.92%   72.92%           
=======================================
  Files         775      775           
  Lines        5824     5824           
  Branches     1721     1698   -23     
=======================================
  Hits         4247     4247           
  Misses       1571     1571           
  Partials        6        6

Impacted Files	Coverage Δ
...es/react/src/components/Popup/positioningHelper.ts	`100% <ø> (ø)`	⬆️
packages/react/src/index.ts	`100% <ø> (ø)`	⬆️
...ckages/react-component-event-listener/src/index.ts	`100% <ø> (ø)`	⬆️
...mponent-event-listener/src/lib/addEventListener.ts	`87.5% <ø> (ø)`	⬆️
...eact-component-event-listener/src/EventListener.ts	`100% <ø> (ø)`	⬆️
packages/react/src/types.ts	`50% <ø> (ø)`	⬆️
...eact/src/themes/teams/components/Icon/svg/index.ts	`25% <ø> (ø)`	⬆️
...onent-event-listener/src/StackableEventListener.ts	`61.11% <ø> (ø)`	⬆️
...nent-event-listener/src/lib/removeEventListener.ts	`88.88% <ø> (ø)`	⬆️
...act-component-event-listener/src/types.internal.ts	`100% <100%> (ø)`
... and 1 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 63cf45c...0f76f2d. Read the comment docs.

…m/stardust-ui/react into chore/babel-loader

kuzhelov · 2019-05-22T14:43:16Z

build/tsconfig.commonjs.json

@@ -1,6 +1,7 @@
 {
  "extends": "./tsconfig.common.json",
  "compilerOptions": {
+    "isolatedModules": false,


this config and the next one are used for yarn build scenarios, where Babel is not used.

This is necessary to ensure that type declarations will be generated.

kuzhelov · 2019-05-22T14:46:16Z

docs/src/components/ComponentDoc/ComponentExample/index.tsx

@@ -1 +1,2 @@
-export { default, ComponentExampleProps } from './ComponentExample'
+export * from './ComponentExample'


these changes in exports are necessary to make TS with --isolatedModules flag work - this flag ensures that TS compiler uses the same 'file-by-file' processing strategy as Babel

kuzhelov · 2019-05-22T14:59:14Z

packages/react/src/types.ts

@@ -8,13 +8,8 @@ export type Extendable<T, V = any> = T & {
  [key: string]: V
 }

-export type Nullable<T> = T | null


all these are unused, right?

Exactly 😇

kuzhelov · 2019-05-22T15:00:05Z

perf/src/index.tsx

@@ -1,3 +1,5 @@
+import '@babel/polyfill'


could you, please, suggest why this change was necessary? where it is used?

It contains regeneratorRuntime that it's required by async/await transform.

kuzhelov · 2019-05-22T15:06:03Z

just couple of moments that we might add to the description (all those are mentioned in the comments):

brief explanation on how transpilation logic has changed - from recursive modules resolution used by Typescript to isolated files/modules used by Babel. This will serve as concise reasoning behind --isolatedModules flag that is introduced to TS compiler's config
provide brief explanation on why export statements need rework
provide explanation on the strategy with types.private (mb types.internal, just to better reflect semantics?) modules - whey these are necessary and which problem they help to address

…m/stardust-ui/react into chore/babel-loader # Conflicts: # packages/react/src/index.ts

DustyTheBot · 2019-05-22T19:10:00Z

	Warnings
⚠️	There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS

layershifter added 2 commits May 17, 2019 09:57

wip

3760add

wip

d3f578f

layershifter requested a review from kuzhelov May 17, 2019 10:42

layershifter added 3 commits May 21, 2019 10:08

Merge branches 'chore/babel-loader' and 'master' of https://github.co…

27bf205

…m/stardust-ui/react into chore/babel-loader

bump deps

1f1f90d

polish changes

91953e1

layershifter marked this pull request as ready for review May 21, 2019 13:57

layershifter requested review from dvdzkwsk, levithomason, miroslavstastny and mnajdova as code owners May 21, 2019 13:57

layershifter changed the title ~~Chore/babel loader~~ chore(docs): use babel-loader May 21, 2019

miroslavstastny reviewed May 21, 2019

View reviewed changes

packages/react/src/components/Loader/Loader.tsx Outdated Show resolved Hide resolved

layershifter added 2 commits May 21, 2019 16:14

polish changes

822054c

polish changes

06ef07c

Merge branches 'chore/babel-loader' and 'master' of https://github.co…

c77b443

…m/stardust-ui/react into chore/babel-loader

layershifter added the 🚀 ready for review label May 21, 2019

layershifter mentioned this pull request May 22, 2019

chore(docs): make HMR working properly #1370

Merged

kuzhelov reviewed May 22, 2019

View reviewed changes

kuzhelov approved these changes May 22, 2019

View reviewed changes

layershifter added 2 commits May 22, 2019 20:23

Merge branches 'chore/babel-loader' and 'master' of https://github.co…

0075f58

…m/stardust-ui/react into chore/babel-loader # Conflicts: # packages/react/src/index.ts

rename to types.internal

0f76f2d

layershifter merged commit 3f33137 into master May 22, 2019

delete-merged-branch bot deleted the chore/babel-loader branch May 22, 2019 20:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(docs): use babel-loader #1354

chore(docs): use babel-loader #1354

layershifter commented May 17, 2019 •

edited

codecov bot commented May 21, 2019 •

edited

kuzhelov May 22, 2019 •

edited

kuzhelov May 22, 2019

kuzhelov May 22, 2019

layershifter May 22, 2019

kuzhelov May 22, 2019

layershifter May 22, 2019

kuzhelov commented May 22, 2019

DustyTheBot commented May 22, 2019

		@@ -1 +1,2 @@
		export { default, ComponentExampleProps } from './ComponentExample'
		export * from './ComponentExample'

chore(docs): use babel-loader #1354

chore(docs): use babel-loader #1354

Conversation

layershifter commented May 17, 2019 • edited

Enable isolatedModules in TS compilerOptions

Updates in exports

Before

After

types.internal.ts

Remove awesome-typescript-loader & ts-loader

Add fork-ts-checker-webpack-plugin

codecov bot commented May 21, 2019 • edited

Codecov Report

kuzhelov May 22, 2019 • edited

Choose a reason for hiding this comment

kuzhelov May 22, 2019

Choose a reason for hiding this comment

kuzhelov May 22, 2019

Choose a reason for hiding this comment

layershifter May 22, 2019

Choose a reason for hiding this comment

kuzhelov May 22, 2019

Choose a reason for hiding this comment

layershifter May 22, 2019

Choose a reason for hiding this comment

kuzhelov commented May 22, 2019

DustyTheBot commented May 22, 2019

layershifter commented May 17, 2019 •

edited

Enable `isolatedModules` in TS `compilerOptions`

`types.internal.ts`

Remove `awesome-typescript-loader` & `ts-loader`

Add `fork-ts-checker-webpack-plugin`

codecov bot commented May 21, 2019 •

edited

kuzhelov May 22, 2019 •

edited