Skip to content
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.

Sign up for GitHub

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

feat(react-dom): add experimental module #849

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+248 −0
Open

feat(react-dom): add experimental module #849

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7b56214
feat(react-dom): add experimental module
r17x Jul 19, 2024
57d426b
feat(react-dom): add options to preinit
r17x Jul 21, 2024
26e7c3c
feat(react-dom): add options to preload
r17x Jul 21, 2024
562c8c5
feat(react-dom): make all _as property in options is required
r17x Jul 21, 2024
2906274
style(react-dom): formatted Experimental module
r17x Jul 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 85 additions & 0 deletions src/ReactDOM.re
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -477,6 +477,91 @@ external unmountComponentAtNode: Dom.element => unit =
[@mel.module "react-dom"]
external flushSync: (unit => unit) => unit = "flushSync";

module Experimental = {
type preloadOptions;

[@mel.obj]
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using [@mel.obj] in preloadOptions because wants to use [@mel.as] when polyvar contains preserved keyword and included -.

external preloadOptions:
(
~_as: [
| `audio
| `document
| `embed
| `fetch
| `font
| `image
| [@mel.as "object"] `object_
| `script
| `style
| `track
| `video
| `worker
],
~fetchPriority: [ | `auto | `high | `low]=?,
~referrerPolicy: [
| [@mel.as "no-referrer"] `noReferrer
| [@mel.as "no-referrer-when-downgrade"]
`noReferrerWhenDowngrade
| [@mel.as "origin"] `origin
| [@mel.as "origin-when-cross-origin"]
`originWhenCrossOrigin
| [@mel.as "unsafe-url"] `unsafeUrl
]
=?,
~imageSrcSet: string=?,
~imageSizes: string=?,
~crossOrigin: string=?,
~integrity: string=?,
~nonce: string=?,
unit
) =>
preloadOptions;

[@deriving jsProperties]
type preinitOptions = {
[@mel.as "as"]
_as: [ | `script | `style],
[@mel.optional]
fetchPriority: option([ | `auto | `high | `low]),
[@mel.optional]
precedence: option([ | `reset | `low | `medium | `high]),
[@mel.optional]
crossOrigin: option(string),
[@mel.optional]
integrity: option(string),
[@mel.optional]
nonce: option(string),
};

[@deriving jsProperties]
type preOptions = {
[@mel.as "as"]
_as: [ | `script],
[@mel.optional]
crossOrigin: option(string),
[@mel.optional]
integrity: option(string),
[@mel.optional]
nonce: option(string),
};

[@mel.module "react-dom"] external preconnect: string => unit = "preconnect";
[@mel.module "react-dom"]
external prefetchDNS: string => unit = "prefetchDNS";
[@mel.module "react-dom"]
external preinit: (string, ~options: preinitOptions=?, unit) => unit =
"preinit";
[@mel.module "react-dom"]
external preinitModule: (string, ~options: preOptions=?, unit) => unit =
"preinitModule";
[@mel.module "react-dom"]
external preload: (string, ~options: preloadOptions=?, unit) => unit =
"preload";
[@mel.module "react-dom"]
external preloadModule: (string, ~options: preOptions=?, unit) => unit =
"preloadModule";
};

external domElementToObj: Dom.element => Js.t({..}) = "%identity";

type style = Style.t;
Expand Down
163 changes: 163 additions & 0 deletions src/ReactDOM.rei
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -478,6 +478,169 @@ external unmountComponentAtNode: Dom.element => unit =
[@mel.module "react-dom"]
external flushSync: (unit => unit) => unit = "flushSync";

module Experimental: {
/* This module is used to bind to APIs for future versions of ReactDOM. There is no guarantee of backwards compatibility or stability. */
/*
preload options.
https://react.dev/reference/react-dom/preload#parameters
*/
type preloadOptions;

[@mel.obj]
external preloadOptions:
/* Its possible values are audio, document, embed, fetch, font, image, object, script, style, track, video, worker. */
(
~_as: [
| `audio
| `document
| `embed
| `fetch
| `font
| `image
| [@mel.as "object"] `object_
| `script
| `style
| `track
| `video
| `worker
],
/*
Suggests a relative priority for fetching the resource.
The possible values are auto (the default), high, and low.
*/
~fetchPriority: [ | `auto | `high | `low]=?,
/*
The Referrer header to send when fetching.
Its possible values are no-referrer-when-downgrade (the default), no-referrer, origin, origin-when-cross-origin, and unsafe-url.
*/
~referrerPolicy: [
| [@mel.as "no-referrer"] `noReferrer
| [@mel.as "no-referrer-when-downgrade"]
`noReferrerWhenDowngrade
| [@mel.as "origin"] `origin
| [@mel.as "origin-when-cross-origin"]
`originWhenCrossOrigin
| [@mel.as "unsafe-url"] `unsafeUrl
]
=?,
/*
For use only with as: "image". Specifies the source set of the image.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
*/
~imageSrcSet: string=?,
/*
For use only with as: "image". Specifies the source sizes of the image.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
*/
~imageSizes: string=?,
/*
a required string. It must be "anonymous", "use-credentials", and "".
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin
*/
~crossOrigin: string=?,
/*
A cryptographic hash of the module, to verify its authenticity.
https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
*/
~integrity: string=?,
/*
A cryptographic nonce to allow the module when using a strict Content Security Policy.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
*/
~nonce: string=?,
unit
) =>
preloadOptions;

/*
preinit options.
https://react.dev/reference/react-dom/preinit#parameters
*/
[@deriving jsProperties]
type preinitOptions = {
/* possible values: "script" or "style" */
[@mel.as "as"]
_as: [ | `script | `style],
/*
Suggests a relative priority for fetching the resource.
The possible values are auto (the default), high, and low.
*/
[@mel.optional]
fetchPriority: option([ | `auto | `high | `low]),
/*
Required with Stylesheets (`style). Says where to insert the stylesheet relative to others.
Stylesheets with higher precedence can override those with lower precedence.
The possible values are reset, low, medium, high.
*/
[@mel.optional]
precedence: option([ | `reset | `low | `medium | `high]),
/*
a required string. It must be "anonymous", "use-credentials", and "".
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin
*/
[@mel.optional]
crossOrigin: option(string),
/*
A cryptographic hash of the module, to verify its authenticity.
https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
*/
[@mel.optional]
integrity: option(string),
/*
A cryptographic nonce to allow the module when using a strict Content Security Policy.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
*/
[@mel.optional]
nonce: option(string),
};

/*
preinitModule and preloadModule options.
https://react.dev/reference/react-dom/preinitModule#parameters
https://react.dev/reference/react-dom/preloadModule#parameters
*/
[@deriving jsProperties]
type preOptions = {
/* It must be 'script'. */
[@mel.as "as"]
_as: [ | `script],
/*
a required string. It must be "anonymous", "use-credentials", and "".
r17x marked this conversation as resolved.
Show resolved Hide resolved
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin
*/
[@mel.optional]
crossOrigin: option(string),
/*
A cryptographic hash of the module, to verify its authenticity.
https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
*/
[@mel.optional]
integrity: option(string),
/*
A cryptographic nonce to allow the module when using a strict Content Security Policy.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
*/
[@mel.optional]
nonce: option(string),
};

[@mel.module "react-dom"] external preconnect: string => unit = "preconnect";
[@mel.module "react-dom"]
external prefetchDNS: string => unit = "prefetchDNS";
[@mel.module "react-dom"]
external preinit: (string, ~options: preinitOptions=?, unit) => unit =
"preinit";
[@mel.module "react-dom"]
external preinitModule: (string, ~options: preOptions=?, unit) => unit =
"preinitModule";
[@mel.module "react-dom"]
external preload: (string, ~options: preloadOptions=?, unit) => unit =
"preload";
[@mel.module "react-dom"]
external preloadModule: (string, ~options: preOptions=?, unit) => unit =
"preloadModule";
};

external domElementToObj: Dom.element => Js.t({..}) = "%identity";

type style = Style.t;
Expand Down
Loading