Skip to content

Commit 7a50de8

Browse files
theKasheytheKashey
committed
expose component loader to d.ts
1 parent f0fe23f commit 7a50de8

File tree

6 files changed

+158
-12
lines changed

6 files changed

+158
-12
lines changed

‎README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,33 @@ importedComponent( () => import(/* webpackChunkName:'pages' */'./Component'));
139139

140140
That is all. Component will be loaded in time and then displayed. And updated on module replacement of course.
141141

142+
#### Component loader.
143+
As long `importedComponent` is a fabric function, which will produce React Component, which will perform the loading,
144+
you may use React Component without calling fabric function.
145+
```js
146+
import {ComponentLoader} from 'react-imported-component';
147+
148+
const MyPage = () => (
149+
<ComponentLoader
150+
loadable={() => import('./Page.js')}
151+
// all fields are optional, and matches the same field of importedComponent.
152+
LoadingComponent={Loading}
153+
ErrorComponent={Error}
154+
onError
155+
156+
exportPicker
157+
render
158+
async
159+
/>
160+
);
161+
```
162+
Actually `loadable` awaits for `loadableResource`, but could do auto transformation.
163+
```js
164+
import {loadableResource} from 'react-imported-component';
165+
loadable = {loadableResource(() => import('xxx'))}
166+
```
167+
loadableResource is just a sugar around `import`.
168+
142169
## Suspense (React Async)
143170
Just pass down an option for `importedComponent`, or prop for `ComponentLoader, and
144171
catch the loading promise, imported component will throw if _loading state_ will took a place.

‎examples/SSR/typescript-react/app/App.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from "react";
22
import {Helmet} from "react-helmet";
33
//import { Switch, Route, Redirect } from "react-router-dom";
44
import Home from "./components/Home";
5-
import importedComponent from "react-imported-component";
5+
import importedComponent, {ComponentLoader, loadableResource} from "react-imported-component";
66

77
const Another = importedComponent(() => import(/* webpackChunkName: namedChunk-0 */"./components/Another"));
88
const Other1 = importedComponent(() => import(/* webpackChunkName: "namedChunk-1" */"./components/Other"));
@@ -21,6 +21,12 @@ importedComponent(() => import(/* webpackChunkName: namedChunk-0 */"./components
2121
export default function App() {
2222
return (
2323
<div>
24+
<ComponentLoader
25+
loadable={() => import('./components/Another')}
26+
/>
27+
<ComponentLoader
28+
loadable={loadableResource(() => import('./components/Another'))}
29+
/>
2430
<Helmet defaultTitle="Hello World!">
2531
<meta charSet="utf-8"/>
2632
</Helmet>

‎module.d.ts

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
declare module 'react-imported-component' {
2-
import { StatelessComponent, ComponentType, ComponentClass, PureComponent, ReactNode } from "react";
2+
import {StatelessComponent, ComponentType, ComponentClass, PureComponent, ReactNode, Component} from "react";
33

44
interface DefaultImportedComponent<P> {
55
default: ComponentType<P>;
@@ -18,7 +18,7 @@ declare module 'react-imported-component' {
1818
exportPicker?: (a: any) => any,
1919
onError?: (a: any) => any,
2020
render?: (Component: ComponentType<P>, State: LoadableComponentState, props: P) => ReactNode;
21-
async: boolean;
21+
async?: boolean;
2222
}
2323

2424
interface HOC {
@@ -31,14 +31,30 @@ declare module 'react-imported-component' {
3131
[index: number]: () => Promise<DefaultComponent<any>>;
3232
}
3333

34-
export const ImportedStream: StatelessComponent<{takeUID:(streamId:number)=>any}>;
34+
type LoadableResource<P> = {};
35+
36+
export type IComponentLoaderProps<P> =
37+
ComponentOptions<P> & {
38+
loadable: LoadableResource<P> | Promise<DefaultComponent<P>>
39+
};
40+
41+
export class ComponentLoader<T> extends Component<IComponentLoaderProps<T>> {}
42+
43+
export const ImportedStream: StatelessComponent<{ takeUID: (streamId: number) => any }>;
3544

3645
export default importedComponent;
3746

38-
export function printDrainHydrateMarks(streamId?:number): string;
39-
export function drainHydrateMarks(streamId?:number): Array<string>;
47+
export function printDrainHydrateMarks(streamId?: number): string;
48+
49+
export function drainHydrateMarks(streamId?: number): Array<string>;
50+
4051
export function rehydrateMarks(marks?: Array<string>): Promise<void>;
52+
4153
export function whenComponentsReady(): Promise<void>;
54+
4255
export function dryRender(renderFunction: () => any): Promise<void>;
56+
4357
export function assignImportedComponents(importedComponents: ImportedComponents): void;
58+
59+
export function loadableResource<P>(loader: () => Promise<DefaultComponent<P>>): LoadableResource<P>;
4460
}

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
},
3939
"homepage": "https://github.com/theKashey/react-hot-component-loader#readme",
4040
"devDependencies": {
41+
"@types/react": "^16.4.0",
4142
"babel-cli": "^6.24.1",
4243
"babel-core": "^6.25.0",
4344
"babel-eslint": "^8.2.3",
@@ -53,6 +54,7 @@
5354
"eslint": "^4.2.0",
5455
"eslint-plugin-mocha": "^5.0.0",
5556
"eslint-plugin-react": "^7.7.0",
57+
"flowgen": "^1.2.2",
5658
"jsdom": "11.11.0",
5759
"jsdom-global": "3.0.2",
5860
"mocha": "^5.2.0",

‎src/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import deferred from './HOC';
22
import {drainHydrateMarks, printDrainHydrateMarks, rehydrateMarks} from './marks';
3-
import {done as whenComponentsReady, dryRender, assignImportedComponents} from './loadable';
3+
import loadableResource, {done as whenComponentsReady, dryRender, assignImportedComponents} from './loadable';
44
import ComponentLoader from './Component';
55
import {ImportedStream} from "./context";
66

@@ -14,6 +14,7 @@ export {
1414
assignImportedComponents,
1515

1616
ComponentLoader,
17+
loadableResource,
1718

1819
ImportedStream
1920
}

‎yarn.lock

Lines changed: 99 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,12 @@
168168
version "10.0.3"
169169
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.0.3.tgz#1f89840c7aac2406cc43a2ecad98fc02a8e130e4"
170170

171+
"@types/react@^16.4.0":
172+
version "16.4.0"
173+
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.0.tgz#f7f639837bf1f8635f57616b12a1b0d193b6343a"
174+
dependencies:
175+
csstype "^2.2.0"
176+
171177
abab@^1.0.4:
172178
version "1.0.4"
173179
resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
@@ -1053,6 +1059,10 @@ block-stream@*:
10531059
dependencies:
10541060
inherits "~2.0.0"
10551061

1062+
bluebird@^3.0.5:
1063+
version "3.5.1"
1064+
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
1065+
10561066
boolbase@~1.0.0:
10571067
version "1.0.0"
10581068
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
@@ -1312,7 +1322,7 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
13121322
dependencies:
13131323
delayed-stream "~1.0.0"
13141324

1315-
commander@2.15.1:
1325+
commander@2.15.1, commander@^2.9.0:
13161326
version "2.15.1"
13171327
resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
13181328

@@ -1340,6 +1350,13 @@ concat-stream@^1.4.7, concat-stream@^1.6.0:
13401350
readable-stream "^2.2.2"
13411351
typedarray "^0.0.6"
13421352

1353+
config-chain@~1.1.5:
1354+
version "1.1.11"
1355+
resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.11.tgz#aba09747dfbe4c3e70e766a6e41586e1859fc6f2"
1356+
dependencies:
1357+
ini "^1.3.4"
1358+
proto-list "~1.2.1"
1359+
13431360
console-control-strings@^1.0.0, console-control-strings@~1.1.0:
13441361
version "1.1.0"
13451362
resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
@@ -1419,6 +1436,10 @@ cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
14191436
dependencies:
14201437
cssom "0.3.x"
14211438

1439+
csstype@^2.2.0:
1440+
version "2.5.5"
1441+
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.5.5.tgz#4125484a3d42189a863943f23b9e4b80fedfa106"
1442+
14221443
dashdash@^1.12.0:
14231444
version "1.14.1"
14241445
resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -1604,6 +1625,16 @@ ecc-jsbn@~0.1.1:
16041625
dependencies:
16051626
jsbn "~0.1.0"
16061627

1628+
editorconfig@^0.13.2:
1629+
version "0.13.3"
1630+
resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.13.3.tgz#e5219e587951d60958fd94ea9a9a008cdeff1b34"
1631+
dependencies:
1632+
bluebird "^3.0.5"
1633+
commander "^2.9.0"
1634+
lru-cache "^3.2.0"
1635+
semver "^5.1.0"
1636+
sigmund "^1.0.1"
1637+
16071638
electron-to-chromium@^1.3.47:
16081639
version "1.3.48"
16091640
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.48.tgz#d3b0d8593814044e092ece2108fc3ac9aea4b900"
@@ -1990,6 +2021,17 @@ flat-cache@^1.2.1:
19902021
graceful-fs "^4.1.2"
19912022
write "^0.2.1"
19922023

2024+
flowgen@^1.2.2:
2025+
version "1.2.2"
2026+
resolved "https://registry.yarnpkg.com/flowgen/-/flowgen-1.2.2.tgz#3db933b3149eb2569adc5df5d45b5c9c90c8b41c"
2027+
dependencies:
2028+
commander "^2.11.0"
2029+
js-beautify "^1.6.7"
2030+
lodash "^4.17.4"
2031+
paralleljs "^0.2.1"
2032+
typescript "^2.4.2"
2033+
typescript-compiler "^1.4.1-2"
2034+
19932035
for-in@^1.0.1, for-in@^1.0.2:
19942036
version "1.0.2"
19952037
resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -2371,6 +2413,10 @@ inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.3:
23712413
version "2.0.3"
23722414
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
23732415

2416+
ini@^1.3.4:
2417+
version "1.3.5"
2418+
resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
2419+
23742420
ini@~1.3.0:
23752421
version "1.3.4"
23762422
resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
@@ -2712,6 +2758,15 @@ istanbul-reports@^1.4.1:
27122758
dependencies:
27132759
handlebars "^4.0.11"
27142760

2761+
js-beautify@^1.6.7:
2762+
version "1.7.5"
2763+
resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.7.5.tgz#69d9651ef60dbb649f65527b53674950138a7919"
2764+
dependencies:
2765+
config-chain "~1.1.5"
2766+
editorconfig "^0.13.2"
2767+
mkdirp "~0.5.0"
2768+
nopt "~3.0.1"
2769+
27152770
js-tokens@^3.0.0, js-tokens@^3.0.2:
27162771
version "3.0.2"
27172772
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
@@ -2915,6 +2970,12 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
29152970
dependencies:
29162971
js-tokens "^3.0.0"
29172972

2973+
lru-cache@^3.2.0:
2974+
version "3.2.0"
2975+
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-3.2.0.tgz#71789b3b7f5399bec8565dda38aa30d2a097efee"
2976+
dependencies:
2977+
pseudomap "^1.0.1"
2978+
29182979
lru-cache@^4.0.1:
29192980
version "4.1.1"
29202981
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
@@ -3045,7 +3106,7 @@ mixin-deep@^1.2.0:
30453106
for-in "^1.0.2"
30463107
is-extendable "^1.0.1"
30473108

3048-
mkdirp@0.5.1, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1:
3109+
mkdirp@0.5.1, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
30493110
version "0.5.1"
30503111
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
30513112
dependencies:
@@ -3154,6 +3215,12 @@ nopt@^4.0.1:
31543215
abbrev "1"
31553216
osenv "^0.1.4"
31563217

3218+
nopt@~3.0.1:
3219+
version "3.0.6"
3220+
resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
3221+
dependencies:
3222+
abbrev "1"
3223+
31573224
normalize-package-data@^2.3.2:
31583225
version "2.4.0"
31593226
resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
@@ -3393,6 +3460,10 @@ p-try@^1.0.0:
33933460
version "1.0.0"
33943461
resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
33953462

3463+
paralleljs@^0.2.1:
3464+
version "0.2.1"
3465+
resolved "https://registry.yarnpkg.com/paralleljs/-/paralleljs-0.2.1.tgz#ebca745d3e09c01e2bebcc14858891ff4510e926"
3466+
33963467
parse-glob@^3.0.4:
33973468
version "3.0.4"
33983469
resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
@@ -3540,15 +3611,26 @@ promise@^7.1.1:
35403611
dependencies:
35413612
asap "~2.0.3"
35423613

3543-
prop-types@15.6.1, prop-types@^15.6.0, prop-types@^15.6.1:
3614+
prop-types@15.6.2:
3615+
version "15.6.2"
3616+
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
3617+
dependencies:
3618+
loose-envify "^1.3.1"
3619+
object-assign "^4.1.1"
3620+
3621+
prop-types@^15.6.0, prop-types@^15.6.1:
35443622
version "15.6.1"
35453623
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
35463624
dependencies:
35473625
fbjs "^0.8.16"
35483626
loose-envify "^1.3.1"
35493627
object-assign "^4.1.1"
35503628

3551-
pseudomap@^1.0.2:
3629+
proto-list@~1.2.1:
3630+
version "1.2.4"
3631+
resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
3632+
3633+
pseudomap@^1.0.1, pseudomap@^1.0.2:
35523634
version "1.0.2"
35533635
resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
35543636

@@ -3957,7 +4039,7 @@ scan-directory@^1.0.0:
39574039
version "1.0.0"
39584040
resolved "https://registry.yarnpkg.com/scan-directory/-/scan-directory-1.0.0.tgz#46b6769dbd893d9bd7490ae9dcc43811a38b7fbb"
39594041

3960-
"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0:
4042+
"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.4.1, semver@^5.5.0:
39614043
version "5.5.0"
39624044
resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
39634045

@@ -4009,6 +4091,10 @@ shebang-regex@^1.0.0:
40094091
version "1.0.0"
40104092
resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
40114093

4094+
sigmund@^1.0.1:
4095+
version "1.0.1"
4096+
resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
4097+
40124098
signal-exit@^3.0.0, signal-exit@^3.0.1, signal-exit@^3.0.2:
40134099
version "3.0.2"
40144100
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -4400,6 +4486,14 @@ typedarray@^0.0.6:
44004486
version "0.0.6"
44014487
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
44024488

4489+
typescript-compiler@^1.4.1-2:
4490+
version "1.4.1-2"
4491+
resolved "https://registry.yarnpkg.com/typescript-compiler/-/typescript-compiler-1.4.1-2.tgz#ba4f7db22d91534a1929d90009dce161eb72fd3f"
4492+
4493+
typescript@^2.4.2:
4494+
version "2.9.2"
4495+
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.9.2.tgz#1cbf61d05d6b96269244eb6a3bce4bd914e0f00c"
4496+
44034497
ua-parser-js@^0.7.9:
44044498
version "0.7.14"
44054499
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.14.tgz#110d53fa4c3f326c121292bbeac904d2e03387ca"

0 commit comments

Comments
 (0)