-
Notifications
You must be signed in to change notification settings - Fork 42
Add React.lazy #95
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add React.lazy #95
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Left some comments for my own understanding.
@@ -143,6 +143,13 @@ module Experimental = { | |||
} | |||
} | |||
|
|||
type dynamicallyImportedModule<'a> = {default: component<'a>} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not much context on this so will ask very basic questions.
Do we know the component will have default export? Is this a property that react lazy relies on?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, that's the shape that React.lazy expects.
type dynamicallyImportedModule<'a> = {default: component<'a>} | ||
|
||
@module("react") | ||
external lazy_: (unit => promise<dynamicallyImportedModule<'a>>) => component<'a> = "lazy" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why the underscore?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lazy is a reserved word unfortunately.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's right it's on the list.
Perhaps worth opening an issue to explore whether it absolutely needs to be a keyword.
We removed a few keywords successfully recently.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lazy is a nice add-on, but I think it can be moved to the standard library rather than the language.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lazy is a nice add-on, but I think it can be moved to the standard library rather than the language.
If I understand correctly, this is a rescript-react repo, not compiler.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I created an issue here: rescript-lang/rescript#6241
Can you share the js out of this example? module DynamicallyImportedComponent = {
let make = React.lazy_(() => Js.import(DynamicallyImportedComponent.make))
} |
@module("react") | ||
external lazy_: (unit => promise<dynamicallyImportedModule<'a>>) => component<'a> = "lazy" | ||
|
||
let lazy_ = load => lazy_(async () => {default: await load()}) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actually, do we need to expose this wrapper function? If not, would user usage be different?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we didn't expose this wrapper function, the user would need to write
let make = React.lazy_(async () => {default: await Js.import(DynamicallyImportedComponent.make)})
instead of
let make = React.lazy_(() => Js.import(DynamicallyImportedComponent.make))
var make = React.lazy_(function () {
return import("./DynamicallyImportedComponent.bs.mjs").then(function (m) {
return m.make;
});
}); LGTM! |
The signature is slightly different from TypeScript's, but does it work well at runtime? |
It seems like the default key defined as the |
Yes, that's ok and it works at runtime. The |
Ah, understood. Thanks! |
This adds support for
React.lazy
.Usage from ReScript is like this:
The binding is not zero cost because
React.lazy
expects a default export and we need to adapt to that.Closes #81.