diff --git a/CHANGELOG.md b/CHANGELOG.md index 34079500d0..4c5c3e15ce 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,10 @@ - AST: Add bar location to `case`. https://github.com/rescript-lang/rescript/pull/7407 +#### :nail_care: Polish + +- Make `Jsx.element` a private empty record to avoid unnecessary `Primitive_option.some`. https://github.com/rescript-lang/rescript/pull/7450 + # 12.0.0-alpha.12 #### :bug: Bug fix diff --git a/runtime/Jsx.res b/runtime/Jsx.res index fd9735b9c1..efa45b383c 100644 --- a/runtime/Jsx.res +++ b/runtime/Jsx.res @@ -22,7 +22,10 @@ * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. */ -type element +// Define this as a private empty record so that the compiler does not +// unnecessarily add `Primitive_option.some` calls for optional props. +type element = private {} + type ref @val external null: element = "null" diff --git a/scripts/test.js b/scripts/test.js index b7fddb16ac..b534b8a79c 100644 --- a/scripts/test.js +++ b/scripts/test.js @@ -92,7 +92,7 @@ if (mochaTest) { // I can't run because Mocha doesn't support jsx. // We also want to keep the output as is. "--ignore", - "tests/tests/src/preserve_jsx_test.mjs", + "tests/tests/src/jsx_preserve_test.mjs", ], { cwd: projectDir, diff --git a/tests/analysis_tests/tests/src/expected/Completion.res.txt b/tests/analysis_tests/tests/src/expected/Completion.res.txt index 7c7f2563bf..88ee34b6dd 100644 --- a/tests/analysis_tests/tests/src/expected/Completion.res.txt +++ b/tests/analysis_tests/tests/src/expected/Completion.res.txt @@ -1954,7 +1954,7 @@ Path this }] Hover src/Completion.res 349:14 -{"contents": {"kind": "markdown", "value": "```rescript\nJsxDOM.domProps\n```\n\n---\n\n```\n \n```\n```rescript\ntype JsxDOM.domProps = {\n key?: string,\n children?: Jsx.element,\n ref?: domRef,\n ariaCurrent?: [\n | #date\n | #\"false\"\n | #location\n | #page\n | #step\n | #time\n | #\"true\"\n ],\n ariaDetails?: string,\n ariaDisabled?: bool,\n ariaHidden?: bool,\n ariaInvalid?: [#\"false\" | #grammar | #spelling | #\"true\"],\n ariaKeyshortcuts?: string,\n ariaLabel?: string,\n ariaRoledescription?: string,\n ariaAutocomplete?: [#both | #inline | #list | #none],\n ariaChecked?: [#\"false\" | #mixed | #\"true\"],\n ariaExpanded?: bool,\n ariaHaspopup?: [\n | #dialog\n | #\"false\"\n | #grid\n | #listbox\n | #menu\n | #tree\n | #\"true\"\n ],\n ariaLevel?: int,\n ariaModal?: bool,\n ariaMultiline?: bool,\n ariaMultiselectable?: bool,\n ariaOrientation?: [#horizontal | #undefined | #vertical],\n ariaPlaceholder?: string,\n ariaPressed?: [#\"false\" | #mixed | #\"true\"],\n ariaReadonly?: bool,\n ariaRequired?: bool,\n ariaSelected?: bool,\n ariaSort?: string,\n ariaValuemax?: float,\n ariaValuemin?: float,\n ariaValuenow?: float,\n ariaValuetext?: string,\n ariaAtomic?: bool,\n ariaBusy?: bool,\n ariaLive?: [#assertive | #off | #polite | #rude],\n ariaRelevant?: string,\n ariaDropeffect?: [\n | #copy\n | #execute\n | #link\n | #move\n | #none\n | #popup\n ],\n ariaGrabbed?: bool,\n ariaActivedescendant?: string,\n ariaColcount?: int,\n ariaColindex?: int,\n ariaColspan?: int,\n ariaControls?: string,\n ariaDescribedby?: string,\n ariaErrormessage?: string,\n ariaFlowto?: string,\n ariaLabelledby?: string,\n ariaOwns?: string,\n ariaPosinset?: int,\n ariaRowcount?: int,\n ariaRowindex?: int,\n ariaRowspan?: int,\n ariaSetsize?: int,\n defaultChecked?: bool,\n defaultValue?: string,\n accessKey?: string,\n capture?: [#environment | #user],\n className?: string,\n contentEditable?: bool,\n contextMenu?: string,\n dataTestId?: string,\n dir?: string,\n draggable?: bool,\n hidden?: bool,\n id?: string,\n inert?: bool,\n lang?: string,\n popover?: popover,\n popoverTarget?: string,\n popoverTargetAction?: popoverTargetAction,\n role?: string,\n style?: style,\n spellCheck?: bool,\n tabIndex?: int,\n title?: string,\n itemID?: string,\n itemProp?: string,\n itemRef?: string,\n itemScope?: bool,\n itemType?: string,\n accept?: string,\n acceptCharset?: string,\n action?: string,\n allowFullScreen?: bool,\n alt?: string,\n as_?: string,\n async?: bool,\n autoComplete?: string,\n autoCapitalize?: string,\n autoFocus?: bool,\n autoPlay?: bool,\n challenge?: string,\n charSet?: string,\n checked?: bool,\n cite?: string,\n crossOrigin?: string,\n cols?: int,\n colSpan?: int,\n content?: string,\n controls?: bool,\n coords?: string,\n data?: string,\n dateTime?: string,\n default?: bool,\n defer?: bool,\n disabled?: bool,\n download?: string,\n encType?: string,\n form?: string,\n formAction?: string,\n formTarget?: string,\n formMethod?: string,\n headers?: string,\n height?: string,\n high?: int,\n href?: string,\n hrefLang?: string,\n htmlFor?: string,\n httpEquiv?: string,\n icon?: string,\n inputMode?: string,\n integrity?: string,\n keyType?: string,\n kind?: string,\n label?: string,\n list?: string,\n loading?: [#eager | #lazy],\n loop?: bool,\n low?: int,\n manifest?: string,\n max?: string,\n maxLength?: int,\n media?: string,\n mediaGroup?: string,\n method?: string,\n min?: string,\n minLength?: int,\n multiple?: bool,\n muted?: bool,\n name?: string,\n nonce?: string,\n noValidate?: bool,\n open_?: bool,\n optimum?: int,\n pattern?: string,\n placeholder?: string,\n playsInline?: bool,\n poster?: string,\n preload?: string,\n radioGroup?: string,\n readOnly?: bool,\n rel?: string,\n required?: bool,\n reversed?: bool,\n rows?: int,\n rowSpan?: int,\n sandbox?: string,\n scope?: string,\n scoped?: bool,\n scrolling?: string,\n selected?: bool,\n shape?: string,\n size?: int,\n sizes?: string,\n span?: int,\n src?: string,\n srcDoc?: string,\n srcLang?: string,\n srcSet?: string,\n start?: int,\n step?: float,\n summary?: string,\n target?: string,\n type_?: string,\n useMap?: string,\n value?: string,\n width?: string,\n wrap?: string,\n onCopy?: JsxEvent.Clipboard.t => unit,\n onCut?: JsxEvent.Clipboard.t => unit,\n onPaste?: JsxEvent.Clipboard.t => unit,\n onCompositionEnd?: JsxEvent.Composition.t => unit,\n onCompositionStart?: JsxEvent.Composition.t => unit,\n onCompositionUpdate?: JsxEvent.Composition.t => unit,\n onKeyDown?: JsxEvent.Keyboard.t => unit,\n onKeyPress?: JsxEvent.Keyboard.t => unit,\n onKeyUp?: JsxEvent.Keyboard.t => unit,\n onFocus?: JsxEvent.Focus.t => unit,\n onBlur?: JsxEvent.Focus.t => unit,\n onBeforeInput?: JsxEvent.Form.t => unit,\n onChange?: JsxEvent.Form.t => unit,\n onInput?: JsxEvent.Form.t => unit,\n onReset?: JsxEvent.Form.t => unit,\n onSubmit?: JsxEvent.Form.t => unit,\n onInvalid?: JsxEvent.Form.t => unit,\n onClick?: JsxEvent.Mouse.t => unit,\n onContextMenu?: JsxEvent.Mouse.t => unit,\n onDoubleClick?: JsxEvent.Mouse.t => unit,\n onDrag?: JsxEvent.Mouse.t => unit,\n onDragEnd?: JsxEvent.Mouse.t => unit,\n onDragEnter?: JsxEvent.Mouse.t => unit,\n onDragExit?: JsxEvent.Mouse.t => unit,\n onDragLeave?: JsxEvent.Mouse.t => unit,\n onDragOver?: JsxEvent.Mouse.t => unit,\n onDragStart?: JsxEvent.Mouse.t => unit,\n onDrop?: JsxEvent.Mouse.t => unit,\n onMouseDown?: JsxEvent.Mouse.t => unit,\n onMouseEnter?: JsxEvent.Mouse.t => unit,\n onMouseLeave?: JsxEvent.Mouse.t => unit,\n onMouseMove?: JsxEvent.Mouse.t => unit,\n onMouseOut?: JsxEvent.Mouse.t => unit,\n onMouseOver?: JsxEvent.Mouse.t => unit,\n onMouseUp?: JsxEvent.Mouse.t => unit,\n onSelect?: JsxEvent.Selection.t => unit,\n onTouchCancel?: JsxEvent.Touch.t => unit,\n onTouchEnd?: JsxEvent.Touch.t => unit,\n onTouchMove?: JsxEvent.Touch.t => unit,\n onTouchStart?: JsxEvent.Touch.t => unit,\n onPointerOver?: JsxEvent.Pointer.t => unit,\n onPointerEnter?: JsxEvent.Pointer.t => unit,\n onPointerDown?: JsxEvent.Pointer.t => unit,\n onPointerMove?: JsxEvent.Pointer.t => unit,\n onPointerUp?: JsxEvent.Pointer.t => unit,\n onPointerCancel?: JsxEvent.Pointer.t => unit,\n onPointerOut?: JsxEvent.Pointer.t => unit,\n onPointerLeave?: JsxEvent.Pointer.t => unit,\n onGotPointerCapture?: JsxEvent.Pointer.t => unit,\n onLostPointerCapture?: JsxEvent.Pointer.t => unit,\n onScroll?: JsxEvent.UI.t => unit,\n onWheel?: JsxEvent.Wheel.t => unit,\n onAbort?: JsxEvent.Media.t => unit,\n onCanPlay?: JsxEvent.Media.t => unit,\n onCanPlayThrough?: JsxEvent.Media.t => unit,\n onDurationChange?: JsxEvent.Media.t => unit,\n onEmptied?: JsxEvent.Media.t => unit,\n onEncrypted?: JsxEvent.Media.t => unit,\n onEnded?: JsxEvent.Media.t => unit,\n onError?: JsxEvent.Media.t => unit,\n onLoadedData?: JsxEvent.Media.t => unit,\n onLoadedMetadata?: JsxEvent.Media.t => unit,\n onLoadStart?: JsxEvent.Media.t => unit,\n onPause?: JsxEvent.Media.t => unit,\n onPlay?: JsxEvent.Media.t => unit,\n onPlaying?: JsxEvent.Media.t => unit,\n onProgress?: JsxEvent.Media.t => unit,\n onRateChange?: JsxEvent.Media.t => unit,\n onSeeked?: JsxEvent.Media.t => unit,\n onSeeking?: JsxEvent.Media.t => unit,\n onStalled?: JsxEvent.Media.t => unit,\n onSuspend?: JsxEvent.Media.t => unit,\n onTimeUpdate?: JsxEvent.Media.t => unit,\n onVolumeChange?: JsxEvent.Media.t => unit,\n onWaiting?: JsxEvent.Media.t => unit,\n onLoad?: JsxEvent.Image.t => unit,\n onAnimationStart?: JsxEvent.Animation.t => unit,\n onAnimationEnd?: JsxEvent.Animation.t => unit,\n onAnimationIteration?: JsxEvent.Animation.t => unit,\n onTransitionEnd?: JsxEvent.Transition.t => unit,\n accentHeight?: string,\n accumulate?: string,\n additive?: string,\n alignmentBaseline?: string,\n allowReorder?: string,\n alphabetic?: string,\n amplitude?: string,\n arabicForm?: string,\n ascent?: string,\n attributeName?: string,\n attributeType?: string,\n autoReverse?: string,\n azimuth?: string,\n baseFrequency?: string,\n baseProfile?: string,\n baselineShift?: string,\n bbox?: string,\n begin?: string,\n begin_?: string,\n bias?: string,\n by?: string,\n calcMode?: string,\n capHeight?: string,\n clip?: string,\n clipPath?: string,\n clipPathUnits?: string,\n clipRule?: string,\n colorInterpolation?: string,\n colorInterpolationFilters?: string,\n colorProfile?: string,\n colorRendering?: string,\n contentScriptType?: string,\n contentStyleType?: string,\n cursor?: string,\n cx?: string,\n cy?: string,\n d?: string,\n decelerate?: string,\n descent?: string,\n diffuseConstant?: string,\n direction?: string,\n display?: string,\n divisor?: string,\n dominantBaseline?: string,\n dur?: string,\n dx?: string,\n dy?: string,\n edgeMode?: string,\n elevation?: string,\n enableBackground?: string,\n end?: string,\n end_?: string,\n exponent?: string,\n externalResourcesRequired?: string,\n fill?: string,\n fillOpacity?: string,\n fillRule?: string,\n filter?: string,\n filterRes?: string,\n filterUnits?: string,\n floodColor?: string,\n floodOpacity?: string,\n focusable?: string,\n fontFamily?: string,\n fontSize?: string,\n fontSizeAdjust?: string,\n fontStretch?: string,\n fontStyle?: string,\n fontVariant?: string,\n fontWeight?: string,\n fomat?: string,\n from?: string,\n fx?: string,\n fy?: string,\n g1?: string,\n g2?: string,\n glyphName?: string,\n glyphOrientationHorizontal?: string,\n glyphOrientationVertical?: string,\n glyphRef?: string,\n gradientTransform?: string,\n gradientUnits?: string,\n hanging?: string,\n horizAdvX?: string,\n horizOriginX?: string,\n ideographic?: string,\n imageRendering?: string,\n in_?: string,\n in2?: string,\n intercept?: string,\n k?: string,\n k1?: string,\n k2?: string,\n k3?: string,\n k4?: string,\n kernelMatrix?: string,\n kernelUnitLength?: string,\n kerning?: string,\n keyPoints?: string,\n keySplines?: string,\n keyTimes?: string,\n lengthAdjust?: string,\n letterSpacing?: string,\n lightingColor?: string,\n limitingConeAngle?: string,\n local?: string,\n markerEnd?: string,\n markerHeight?: string,\n markerMid?: string,\n markerStart?: string,\n markerUnits?: string,\n markerWidth?: string,\n mask?: string,\n maskContentUnits?: string,\n maskUnits?: string,\n mathematical?: string,\n mode?: string,\n numOctaves?: string,\n offset?: string,\n opacity?: string,\n operator?: string,\n order?: string,\n orient?: string,\n orientation?: string,\n origin?: string,\n overflow?: string,\n overflowX?: string,\n overflowY?: string,\n overlinePosition?: string,\n overlineThickness?: string,\n paintOrder?: string,\n panose1?: string,\n pathLength?: string,\n patternContentUnits?: string,\n patternTransform?: string,\n patternUnits?: string,\n pointerEvents?: string,\n points?: string,\n pointsAtX?: string,\n pointsAtY?: string,\n pointsAtZ?: string,\n preserveAlpha?: string,\n preserveAspectRatio?: string,\n primitiveUnits?: string,\n r?: string,\n radius?: string,\n refX?: string,\n refY?: string,\n renderingIntent?: string,\n repeatCount?: string,\n repeatDur?: string,\n requiredExtensions?: string,\n requiredFeatures?: string,\n restart?: string,\n result?: string,\n rotate?: string,\n rx?: string,\n ry?: string,\n scale?: string,\n seed?: string,\n shapeRendering?: string,\n slope?: string,\n spacing?: string,\n specularConstant?: string,\n specularExponent?: string,\n speed?: string,\n spreadMethod?: string,\n startOffset?: string,\n stdDeviation?: string,\n stemh?: string,\n stemv?: string,\n stitchTiles?: string,\n stopColor?: string,\n stopOpacity?: string,\n strikethroughPosition?: string,\n strikethroughThickness?: string,\n string?: string,\n stroke?: string,\n strokeDasharray?: string,\n strokeDashoffset?: string,\n strokeLinecap?: string,\n strokeLinejoin?: string,\n strokeMiterlimit?: string,\n strokeOpacity?: string,\n strokeWidth?: string,\n surfaceScale?: string,\n systemLanguage?: string,\n tableValues?: string,\n targetX?: string,\n targetY?: string,\n textAnchor?: string,\n textDecoration?: string,\n textLength?: string,\n textRendering?: string,\n to?: string,\n to_?: string,\n transform?: string,\n u1?: string,\n u2?: string,\n underlinePosition?: string,\n underlineThickness?: string,\n unicode?: string,\n unicodeBidi?: string,\n unicodeRange?: string,\n unitsPerEm?: string,\n vAlphabetic?: string,\n vHanging?: string,\n vIdeographic?: string,\n vMathematical?: string,\n values?: string,\n vectorEffect?: string,\n version?: string,\n vertAdvX?: string,\n vertAdvY?: string,\n vertOriginX?: string,\n vertOriginY?: string,\n viewBox?: string,\n viewTarget?: string,\n visibility?: string,\n widths?: string,\n wordSpacing?: string,\n writingMode?: string,\n x?: string,\n x1?: string,\n x2?: string,\n xChannelSelector?: string,\n xHeight?: string,\n xlinkActuate?: string,\n xlinkArcrole?: string,\n xlinkHref?: string,\n xlinkRole?: string,\n xlinkShow?: string,\n xlinkTitle?: string,\n xlinkType?: string,\n xmlns?: string,\n xmlnsXlink?: string,\n xmlBase?: string,\n xmlLang?: string,\n xmlSpace?: string,\n y?: string,\n y1?: string,\n y2?: string,\n yChannelSelector?: string,\n z?: string,\n zoomAndPan?: string,\n about?: string,\n datatype?: string,\n inlist?: string,\n prefix?: string,\n property?: string,\n resource?: string,\n typeof?: string,\n vocab?: string,\n dangerouslySetInnerHTML?: {\"__html\": string},\n suppressContentEditableWarning?: bool,\n}\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxDOM.res%22%2C38%2C0%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype Jsx.element\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22Jsx.res%22%2C24%2C0%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype domRef\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxDOM.res%22%2C25%2C0%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype popover =\n | @as(\"auto\") Auto\n | @as(\"manual\") Manual\n | @as(\"hint\") Hint\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxDOM.res%22%2C29%2C0%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype popoverTargetAction =\n | @as(\"toggle\") Toggle\n | @as(\"show\") Show\n | @as(\"hide\") Hide\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxDOM.res%22%2C33%2C0%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype style = JsxDOMStyle.t\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxDOM.res%22%2C24%2C0%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Clipboard.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C95%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Composition.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C107%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Keyboard.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C118%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Focus.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C142%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Form.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C154%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Mouse.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C163%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Selection.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C244%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Touch.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C253%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Pointer.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C194%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.UI.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C278%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Wheel.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C291%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Media.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C305%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Image.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C314%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Animation.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C323%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Transition.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C336%2C2%5D)\n"}} +{"contents": {"kind": "markdown", "value": "```rescript\nJsxDOM.domProps\n```\n\n---\n\n```\n \n```\n```rescript\ntype JsxDOM.domProps = {\n key?: string,\n children?: Jsx.element,\n ref?: domRef,\n ariaCurrent?: [\n | #date\n | #\"false\"\n | #location\n | #page\n | #step\n | #time\n | #\"true\"\n ],\n ariaDetails?: string,\n ariaDisabled?: bool,\n ariaHidden?: bool,\n ariaInvalid?: [#\"false\" | #grammar | #spelling | #\"true\"],\n ariaKeyshortcuts?: string,\n ariaLabel?: string,\n ariaRoledescription?: string,\n ariaAutocomplete?: [#both | #inline | #list | #none],\n ariaChecked?: [#\"false\" | #mixed | #\"true\"],\n ariaExpanded?: bool,\n ariaHaspopup?: [\n | #dialog\n | #\"false\"\n | #grid\n | #listbox\n | #menu\n | #tree\n | #\"true\"\n ],\n ariaLevel?: int,\n ariaModal?: bool,\n ariaMultiline?: bool,\n ariaMultiselectable?: bool,\n ariaOrientation?: [#horizontal | #undefined | #vertical],\n ariaPlaceholder?: string,\n ariaPressed?: [#\"false\" | #mixed | #\"true\"],\n ariaReadonly?: bool,\n ariaRequired?: bool,\n ariaSelected?: bool,\n ariaSort?: string,\n ariaValuemax?: float,\n ariaValuemin?: float,\n ariaValuenow?: float,\n ariaValuetext?: string,\n ariaAtomic?: bool,\n ariaBusy?: bool,\n ariaLive?: [#assertive | #off | #polite | #rude],\n ariaRelevant?: string,\n ariaDropeffect?: [\n | #copy\n | #execute\n | #link\n | #move\n | #none\n | #popup\n ],\n ariaGrabbed?: bool,\n ariaActivedescendant?: string,\n ariaColcount?: int,\n ariaColindex?: int,\n ariaColspan?: int,\n ariaControls?: string,\n ariaDescribedby?: string,\n ariaErrormessage?: string,\n ariaFlowto?: string,\n ariaLabelledby?: string,\n ariaOwns?: string,\n ariaPosinset?: int,\n ariaRowcount?: int,\n ariaRowindex?: int,\n ariaRowspan?: int,\n ariaSetsize?: int,\n defaultChecked?: bool,\n defaultValue?: string,\n accessKey?: string,\n capture?: [#environment | #user],\n className?: string,\n contentEditable?: bool,\n contextMenu?: string,\n dataTestId?: string,\n dir?: string,\n draggable?: bool,\n hidden?: bool,\n id?: string,\n inert?: bool,\n lang?: string,\n popover?: popover,\n popoverTarget?: string,\n popoverTargetAction?: popoverTargetAction,\n role?: string,\n style?: style,\n spellCheck?: bool,\n tabIndex?: int,\n title?: string,\n itemID?: string,\n itemProp?: string,\n itemRef?: string,\n itemScope?: bool,\n itemType?: string,\n accept?: string,\n acceptCharset?: string,\n action?: string,\n allowFullScreen?: bool,\n alt?: string,\n as_?: string,\n async?: bool,\n autoComplete?: string,\n autoCapitalize?: string,\n autoFocus?: bool,\n autoPlay?: bool,\n challenge?: string,\n charSet?: string,\n checked?: bool,\n cite?: string,\n crossOrigin?: string,\n cols?: int,\n colSpan?: int,\n content?: string,\n controls?: bool,\n coords?: string,\n data?: string,\n dateTime?: string,\n default?: bool,\n defer?: bool,\n disabled?: bool,\n download?: string,\n encType?: string,\n form?: string,\n formAction?: string,\n formTarget?: string,\n formMethod?: string,\n headers?: string,\n height?: string,\n high?: int,\n href?: string,\n hrefLang?: string,\n htmlFor?: string,\n httpEquiv?: string,\n icon?: string,\n inputMode?: string,\n integrity?: string,\n keyType?: string,\n kind?: string,\n label?: string,\n list?: string,\n loading?: [#eager | #lazy],\n loop?: bool,\n low?: int,\n manifest?: string,\n max?: string,\n maxLength?: int,\n media?: string,\n mediaGroup?: string,\n method?: string,\n min?: string,\n minLength?: int,\n multiple?: bool,\n muted?: bool,\n name?: string,\n nonce?: string,\n noValidate?: bool,\n open_?: bool,\n optimum?: int,\n pattern?: string,\n placeholder?: string,\n playsInline?: bool,\n poster?: string,\n preload?: string,\n radioGroup?: string,\n readOnly?: bool,\n rel?: string,\n required?: bool,\n reversed?: bool,\n rows?: int,\n rowSpan?: int,\n sandbox?: string,\n scope?: string,\n scoped?: bool,\n scrolling?: string,\n selected?: bool,\n shape?: string,\n size?: int,\n sizes?: string,\n span?: int,\n src?: string,\n srcDoc?: string,\n srcLang?: string,\n srcSet?: string,\n start?: int,\n step?: float,\n summary?: string,\n target?: string,\n type_?: string,\n useMap?: string,\n value?: string,\n width?: string,\n wrap?: string,\n onCopy?: JsxEvent.Clipboard.t => unit,\n onCut?: JsxEvent.Clipboard.t => unit,\n onPaste?: JsxEvent.Clipboard.t => unit,\n onCompositionEnd?: JsxEvent.Composition.t => unit,\n onCompositionStart?: JsxEvent.Composition.t => unit,\n onCompositionUpdate?: JsxEvent.Composition.t => unit,\n onKeyDown?: JsxEvent.Keyboard.t => unit,\n onKeyPress?: JsxEvent.Keyboard.t => unit,\n onKeyUp?: JsxEvent.Keyboard.t => unit,\n onFocus?: JsxEvent.Focus.t => unit,\n onBlur?: JsxEvent.Focus.t => unit,\n onBeforeInput?: JsxEvent.Form.t => unit,\n onChange?: JsxEvent.Form.t => unit,\n onInput?: JsxEvent.Form.t => unit,\n onReset?: JsxEvent.Form.t => unit,\n onSubmit?: JsxEvent.Form.t => unit,\n onInvalid?: JsxEvent.Form.t => unit,\n onClick?: JsxEvent.Mouse.t => unit,\n onContextMenu?: JsxEvent.Mouse.t => unit,\n onDoubleClick?: JsxEvent.Mouse.t => unit,\n onDrag?: JsxEvent.Mouse.t => unit,\n onDragEnd?: JsxEvent.Mouse.t => unit,\n onDragEnter?: JsxEvent.Mouse.t => unit,\n onDragExit?: JsxEvent.Mouse.t => unit,\n onDragLeave?: JsxEvent.Mouse.t => unit,\n onDragOver?: JsxEvent.Mouse.t => unit,\n onDragStart?: JsxEvent.Mouse.t => unit,\n onDrop?: JsxEvent.Mouse.t => unit,\n onMouseDown?: JsxEvent.Mouse.t => unit,\n onMouseEnter?: JsxEvent.Mouse.t => unit,\n onMouseLeave?: JsxEvent.Mouse.t => unit,\n onMouseMove?: JsxEvent.Mouse.t => unit,\n onMouseOut?: JsxEvent.Mouse.t => unit,\n onMouseOver?: JsxEvent.Mouse.t => unit,\n onMouseUp?: JsxEvent.Mouse.t => unit,\n onSelect?: JsxEvent.Selection.t => unit,\n onTouchCancel?: JsxEvent.Touch.t => unit,\n onTouchEnd?: JsxEvent.Touch.t => unit,\n onTouchMove?: JsxEvent.Touch.t => unit,\n onTouchStart?: JsxEvent.Touch.t => unit,\n onPointerOver?: JsxEvent.Pointer.t => unit,\n onPointerEnter?: JsxEvent.Pointer.t => unit,\n onPointerDown?: JsxEvent.Pointer.t => unit,\n onPointerMove?: JsxEvent.Pointer.t => unit,\n onPointerUp?: JsxEvent.Pointer.t => unit,\n onPointerCancel?: JsxEvent.Pointer.t => unit,\n onPointerOut?: JsxEvent.Pointer.t => unit,\n onPointerLeave?: JsxEvent.Pointer.t => unit,\n onGotPointerCapture?: JsxEvent.Pointer.t => unit,\n onLostPointerCapture?: JsxEvent.Pointer.t => unit,\n onScroll?: JsxEvent.UI.t => unit,\n onWheel?: JsxEvent.Wheel.t => unit,\n onAbort?: JsxEvent.Media.t => unit,\n onCanPlay?: JsxEvent.Media.t => unit,\n onCanPlayThrough?: JsxEvent.Media.t => unit,\n onDurationChange?: JsxEvent.Media.t => unit,\n onEmptied?: JsxEvent.Media.t => unit,\n onEncrypted?: JsxEvent.Media.t => unit,\n onEnded?: JsxEvent.Media.t => unit,\n onError?: JsxEvent.Media.t => unit,\n onLoadedData?: JsxEvent.Media.t => unit,\n onLoadedMetadata?: JsxEvent.Media.t => unit,\n onLoadStart?: JsxEvent.Media.t => unit,\n onPause?: JsxEvent.Media.t => unit,\n onPlay?: JsxEvent.Media.t => unit,\n onPlaying?: JsxEvent.Media.t => unit,\n onProgress?: JsxEvent.Media.t => unit,\n onRateChange?: JsxEvent.Media.t => unit,\n onSeeked?: JsxEvent.Media.t => unit,\n onSeeking?: JsxEvent.Media.t => unit,\n onStalled?: JsxEvent.Media.t => unit,\n onSuspend?: JsxEvent.Media.t => unit,\n onTimeUpdate?: JsxEvent.Media.t => unit,\n onVolumeChange?: JsxEvent.Media.t => unit,\n onWaiting?: JsxEvent.Media.t => unit,\n onLoad?: JsxEvent.Image.t => unit,\n onAnimationStart?: JsxEvent.Animation.t => unit,\n onAnimationEnd?: JsxEvent.Animation.t => unit,\n onAnimationIteration?: JsxEvent.Animation.t => unit,\n onTransitionEnd?: JsxEvent.Transition.t => unit,\n accentHeight?: string,\n accumulate?: string,\n additive?: string,\n alignmentBaseline?: string,\n allowReorder?: string,\n alphabetic?: string,\n amplitude?: string,\n arabicForm?: string,\n ascent?: string,\n attributeName?: string,\n attributeType?: string,\n autoReverse?: string,\n azimuth?: string,\n baseFrequency?: string,\n baseProfile?: string,\n baselineShift?: string,\n bbox?: string,\n begin?: string,\n begin_?: string,\n bias?: string,\n by?: string,\n calcMode?: string,\n capHeight?: string,\n clip?: string,\n clipPath?: string,\n clipPathUnits?: string,\n clipRule?: string,\n colorInterpolation?: string,\n colorInterpolationFilters?: string,\n colorProfile?: string,\n colorRendering?: string,\n contentScriptType?: string,\n contentStyleType?: string,\n cursor?: string,\n cx?: string,\n cy?: string,\n d?: string,\n decelerate?: string,\n descent?: string,\n diffuseConstant?: string,\n direction?: string,\n display?: string,\n divisor?: string,\n dominantBaseline?: string,\n dur?: string,\n dx?: string,\n dy?: string,\n edgeMode?: string,\n elevation?: string,\n enableBackground?: string,\n end?: string,\n end_?: string,\n exponent?: string,\n externalResourcesRequired?: string,\n fill?: string,\n fillOpacity?: string,\n fillRule?: string,\n filter?: string,\n filterRes?: string,\n filterUnits?: string,\n floodColor?: string,\n floodOpacity?: string,\n focusable?: string,\n fontFamily?: string,\n fontSize?: string,\n fontSizeAdjust?: string,\n fontStretch?: string,\n fontStyle?: string,\n fontVariant?: string,\n fontWeight?: string,\n fomat?: string,\n from?: string,\n fx?: string,\n fy?: string,\n g1?: string,\n g2?: string,\n glyphName?: string,\n glyphOrientationHorizontal?: string,\n glyphOrientationVertical?: string,\n glyphRef?: string,\n gradientTransform?: string,\n gradientUnits?: string,\n hanging?: string,\n horizAdvX?: string,\n horizOriginX?: string,\n ideographic?: string,\n imageRendering?: string,\n in_?: string,\n in2?: string,\n intercept?: string,\n k?: string,\n k1?: string,\n k2?: string,\n k3?: string,\n k4?: string,\n kernelMatrix?: string,\n kernelUnitLength?: string,\n kerning?: string,\n keyPoints?: string,\n keySplines?: string,\n keyTimes?: string,\n lengthAdjust?: string,\n letterSpacing?: string,\n lightingColor?: string,\n limitingConeAngle?: string,\n local?: string,\n markerEnd?: string,\n markerHeight?: string,\n markerMid?: string,\n markerStart?: string,\n markerUnits?: string,\n markerWidth?: string,\n mask?: string,\n maskContentUnits?: string,\n maskUnits?: string,\n mathematical?: string,\n mode?: string,\n numOctaves?: string,\n offset?: string,\n opacity?: string,\n operator?: string,\n order?: string,\n orient?: string,\n orientation?: string,\n origin?: string,\n overflow?: string,\n overflowX?: string,\n overflowY?: string,\n overlinePosition?: string,\n overlineThickness?: string,\n paintOrder?: string,\n panose1?: string,\n pathLength?: string,\n patternContentUnits?: string,\n patternTransform?: string,\n patternUnits?: string,\n pointerEvents?: string,\n points?: string,\n pointsAtX?: string,\n pointsAtY?: string,\n pointsAtZ?: string,\n preserveAlpha?: string,\n preserveAspectRatio?: string,\n primitiveUnits?: string,\n r?: string,\n radius?: string,\n refX?: string,\n refY?: string,\n renderingIntent?: string,\n repeatCount?: string,\n repeatDur?: string,\n requiredExtensions?: string,\n requiredFeatures?: string,\n restart?: string,\n result?: string,\n rotate?: string,\n rx?: string,\n ry?: string,\n scale?: string,\n seed?: string,\n shapeRendering?: string,\n slope?: string,\n spacing?: string,\n specularConstant?: string,\n specularExponent?: string,\n speed?: string,\n spreadMethod?: string,\n startOffset?: string,\n stdDeviation?: string,\n stemh?: string,\n stemv?: string,\n stitchTiles?: string,\n stopColor?: string,\n stopOpacity?: string,\n strikethroughPosition?: string,\n strikethroughThickness?: string,\n string?: string,\n stroke?: string,\n strokeDasharray?: string,\n strokeDashoffset?: string,\n strokeLinecap?: string,\n strokeLinejoin?: string,\n strokeMiterlimit?: string,\n strokeOpacity?: string,\n strokeWidth?: string,\n surfaceScale?: string,\n systemLanguage?: string,\n tableValues?: string,\n targetX?: string,\n targetY?: string,\n textAnchor?: string,\n textDecoration?: string,\n textLength?: string,\n textRendering?: string,\n to?: string,\n to_?: string,\n transform?: string,\n u1?: string,\n u2?: string,\n underlinePosition?: string,\n underlineThickness?: string,\n unicode?: string,\n unicodeBidi?: string,\n unicodeRange?: string,\n unitsPerEm?: string,\n vAlphabetic?: string,\n vHanging?: string,\n vIdeographic?: string,\n vMathematical?: string,\n values?: string,\n vectorEffect?: string,\n version?: string,\n vertAdvX?: string,\n vertAdvY?: string,\n vertOriginX?: string,\n vertOriginY?: string,\n viewBox?: string,\n viewTarget?: string,\n visibility?: string,\n widths?: string,\n wordSpacing?: string,\n writingMode?: string,\n x?: string,\n x1?: string,\n x2?: string,\n xChannelSelector?: string,\n xHeight?: string,\n xlinkActuate?: string,\n xlinkArcrole?: string,\n xlinkHref?: string,\n xlinkRole?: string,\n xlinkShow?: string,\n xlinkTitle?: string,\n xlinkType?: string,\n xmlns?: string,\n xmlnsXlink?: string,\n xmlBase?: string,\n xmlLang?: string,\n xmlSpace?: string,\n y?: string,\n y1?: string,\n y2?: string,\n yChannelSelector?: string,\n z?: string,\n zoomAndPan?: string,\n about?: string,\n datatype?: string,\n inlist?: string,\n prefix?: string,\n property?: string,\n resource?: string,\n typeof?: string,\n vocab?: string,\n dangerouslySetInnerHTML?: {\"__html\": string},\n suppressContentEditableWarning?: bool,\n}\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxDOM.res%22%2C38%2C0%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype Jsx.element = private {}\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22Jsx.res%22%2C26%2C0%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype domRef\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxDOM.res%22%2C25%2C0%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype popover =\n | @as(\"auto\") Auto\n | @as(\"manual\") Manual\n | @as(\"hint\") Hint\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxDOM.res%22%2C29%2C0%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype popoverTargetAction =\n | @as(\"toggle\") Toggle\n | @as(\"show\") Show\n | @as(\"hide\") Hide\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxDOM.res%22%2C33%2C0%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype style = JsxDOMStyle.t\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxDOM.res%22%2C24%2C0%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Clipboard.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C95%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Composition.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C107%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Keyboard.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C118%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Focus.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C142%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Form.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C154%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Mouse.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C163%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Selection.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C244%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Touch.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C253%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Pointer.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C194%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.UI.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C278%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Wheel.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C291%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Media.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C305%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Image.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C314%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Animation.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C323%2C2%5D)\n\n\n---\n\n```\n \n```\n```rescript\ntype JsxEvent.Transition.t = synthetic\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22JsxEvent.res%22%2C336%2C2%5D)\n"}} Hover src/Completion.res 352:17 Nothing at that position. Now trying to use completion. diff --git a/tests/tests/src/jsx_optional_props_test.mjs b/tests/tests/src/jsx_optional_props_test.mjs new file mode 100644 index 0000000000..ef3a0d326f --- /dev/null +++ b/tests/tests/src/jsx_optional_props_test.mjs @@ -0,0 +1,23 @@ +// Generated by ReScript, PLEASE EDIT WITH CARE + +import * as JsxRuntime from "react/jsx-runtime"; + +function Jsx_optional_props_test$ComponentWithOptionalProps(props) { + return null; +} + +let ComponentWithOptionalProps = { + make: Jsx_optional_props_test$ComponentWithOptionalProps +}; + +let _element = JsxRuntime.jsx(Jsx_optional_props_test$ComponentWithOptionalProps, { + i: 1, + s: "test", + element: JsxRuntime.jsx("div", {}) +}); + +export { + ComponentWithOptionalProps, + _element, +} +/* _element Not a pure module */ diff --git a/tests/tests/src/jsx_optional_props_test.res b/tests/tests/src/jsx_optional_props_test.res new file mode 100644 index 0000000000..215c9d6d43 --- /dev/null +++ b/tests/tests/src/jsx_optional_props_test.res @@ -0,0 +1,12 @@ +@@config({flags: ["-bs-jsx", "4"]}) + +module ComponentWithOptionalProps = { + @react.component + let make = ( + ~i as _: option=?, + ~s as _: option=?, + ~element as _: option=?, + ) => React.null +} + +let _element = } /> diff --git a/tests/tests/src/preserve_jsx_test.mjs b/tests/tests/src/jsx_preserve_test.mjs similarity index 82% rename from tests/tests/src/preserve_jsx_test.mjs rename to tests/tests/src/jsx_preserve_test.mjs index 789c5b203b..da9c00766f 100644 --- a/tests/tests/src/preserve_jsx_test.mjs +++ b/tests/tests/src/jsx_preserve_test.mjs @@ -1,18 +1,13 @@ // Generated by ReScript, PLEASE EDIT WITH CARE -import * as Primitive_option from "rescript/lib/es6/Primitive_option.js"; import * as JsxRuntime from "react/jsx-runtime"; -let React = {}; - -let ReactDOM = {}; - -function Preserve_jsx_test$Icon(props) { +function Jsx_preserve_test$Icon(props) { return ; } let Icon = { - make: Preserve_jsx_test$Icon + make: Jsx_preserve_test$Icon }; let _single_element_child =
@@ -25,11 +20,11 @@ let _multiple_element_children =

{"Hello, world!"}

- +
; let _single_element_fragment = <> - {Primitive_option.some()} + {} ; let _multiple_element_fragment = <> @@ -134,22 +129,22 @@ function QueryClientProvider(props) { return props.children } let A = {}; -function Preserve_jsx_test$B(props) { +function Jsx_preserve_test$B(props) { return

{"Hello, world!"}

; } let B = { - make: Preserve_jsx_test$B + make: Jsx_preserve_test$B }; let _external_component_with_children = - + ; -function Preserve_jsx_test$MyWeirdComponent(props) { +function Jsx_preserve_test$MyWeirdComponent(props) { return

{"foo"} {props["\\\"MyWeirdProp\""]} @@ -157,10 +152,10 @@ function Preserve_jsx_test$MyWeirdComponent(props) { } let MyWeirdComponent = { - make: Preserve_jsx_test$MyWeirdComponent + make: Jsx_preserve_test$MyWeirdComponent }; -let _escaped_jsx_prop = ; @@ -194,9 +189,21 @@ let _large_component =

; +function Jsx_preserve_test$ComponentWithOptionalProps(props) { + return null; +} + +let ComponentWithOptionalProps = { + make: Jsx_preserve_test$ComponentWithOptionalProps +}; + +let _optional_props = } +/>; + export { - React, - ReactDOM, Icon, _single_element_child, _multiple_element_children, @@ -219,5 +226,7 @@ export { MyWeirdComponent, _escaped_jsx_prop, _large_component, + ComponentWithOptionalProps, + _optional_props, } /* _single_element_child Not a pure module */ diff --git a/tests/tests/src/preserve_jsx_test.res b/tests/tests/src/jsx_preserve_test.res similarity index 57% rename from tests/tests/src/preserve_jsx_test.res rename to tests/tests/src/jsx_preserve_test.res index ff6f21196f..b6814b0c5c 100644 --- a/tests/tests/src/preserve_jsx_test.res +++ b/tests/tests/src/jsx_preserve_test.res @@ -2,70 +2,6 @@ flags: ["-bs-jsx", "4", "-bs-jsx-preserve"], }) -module React = { - type element = Jsx.element - - @val external null: element = "null" - - external float: float => element = "%identity" - external int: int => element = "%identity" - external string: string => element = "%identity" - - external array: array => element = "%identity" - - type componentLike<'props, 'return> = Jsx.componentLike<'props, 'return> - - type component<'props> = Jsx.component<'props> - - external component: componentLike<'props, element> => component<'props> = "%identity" - - @module("react") - external createElement: (component<'props>, 'props) => element = "createElement" - - @module("react") - external cloneElement: (element, 'props) => element = "cloneElement" - - @module("react") - external isValidElement: 'a => bool = "isValidElement" - - @variadic @module("react") - external createElementVariadic: (component<'props>, 'props, array) => element = - "createElement" - - @module("react/jsx-runtime") - external jsx: (component<'props>, 'props) => element = "jsx" - - @module("react/jsx-runtime") - external jsxKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsx" - - @module("react/jsx-runtime") - external jsxs: (component<'props>, 'props) => element = "jsxs" - - @module("react/jsx-runtime") - external jsxsKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsxs" - - type fragmentProps = {children?: element} - - @module("react/jsx-runtime") external jsxFragment: component = "Fragment" -} - -module ReactDOM = { - external someElement: React.element => option = "%identity" - - @module("react/jsx-runtime") - external jsx: (string, JsxDOM.domProps) => Jsx.element = "jsx" - - @module("react/jsx-runtime") - external jsxKeyed: (string, JsxDOM.domProps, ~key: string=?, @ignore unit) => Jsx.element = "jsx" - - @module("react/jsx-runtime") - external jsxs: (string, JsxDOM.domProps) => Jsx.element = "jsxs" - - @module("react/jsx-runtime") - external jsxsKeyed: (string, JsxDOM.domProps, ~key: string=?, @ignore unit) => Jsx.element = - "jsxs" -} - module Icon = { @react.component let make = () => { @@ -179,3 +115,14 @@ let _large_component =

{React.int(5)}

+ +module ComponentWithOptionalProps = { + @react.component + let make = ( + ~i as _: option=?, + ~s as _: option=?, + ~element as _: option=?, + ) => React.null +} + +let _optional_props = } /> diff --git a/tests/tests/src/react.mjs b/tests/tests/src/react.mjs index fb408bebf1..1d5280226e 100644 --- a/tests/tests/src/react.mjs +++ b/tests/tests/src/react.mjs @@ -1,7 +1,6 @@ // Generated by ReScript, PLEASE EDIT WITH CARE - -let Ref = {}; +import * as React from "react"; let Children = {}; @@ -9,13 +8,25 @@ let Context = {}; let Fragment = {}; +let StrictMode = {}; + let Suspense = {}; +function lazy_(load) { + return React.lazy(async () => ({ + default: await load() + })); +} + +let Uncurried = {}; + export { - Ref, Children, Context, Fragment, + StrictMode, Suspense, + lazy_, + Uncurried, } -/* No side effect */ +/* react Not a pure module */ diff --git a/tests/tests/src/react.res b/tests/tests/src/react.res index 4a6500180b..f1f6831518 100644 --- a/tests/tests/src/react.res +++ b/tests/tests/src/react.res @@ -1,22 +1,28 @@ -type element +type element = Jsx.element @val external null: element = "null" external float: float => element = "%identity" external int: int => element = "%identity" external string: string => element = "%identity" +external promise: promise => element = "%identity" external array: array => element = "%identity" -type componentLike<'props, 'return> = 'props => 'return +type componentLike<'props, 'return> = Jsx.componentLike<'props, 'return> -type component<'props> = componentLike<'props, element> +type component<'props> = Jsx.component<'props> + +external component: componentLike<'props, element> => component<'props> = "%identity" @module("react") external createElement: (component<'props>, 'props) => element = "createElement" @module("react") -external cloneElement: (component<'props>, 'props) => element = "cloneElement" +external cloneElement: (element, 'props) => element = "cloneElement" + +@module("react") +external isValidElement: 'a => bool = "isValidElement" @variadic @module("react") external createElementVariadic: (component<'props>, 'props, array) => element = @@ -34,28 +40,29 @@ external jsxs: (component<'props>, 'props) => element = "jsxs" @module("react/jsx-runtime") external jsxsKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsxs" -type ref<'value> = {mutable current: 'value} +type fragmentProps = {children?: element} -module Ref = { - type t<'value> +@module("react/jsx-runtime") external jsxFragment: component = "Fragment" - @get external current: t<'value> => 'value = "current" - @set external setCurrent: (t<'value>, 'value) => unit = "current" -} +type ref<'value> = {mutable current: 'value} @module("react") -external createRef: unit => Ref.t> = "createRef" +external createRef: unit => ref> = "createRef" module Children = { - @module("react") @scope("Children") @val + @module("react") @scope("Children") external map: (element, element => element) => element = "map" - @module("react") @scope("Children") @val + @module("react") @scope("Children") + external mapWithIndex: (element, (element, int) => element) => element = "map" + @module("react") @scope("Children") external forEach: (element, element => unit) => unit = "forEach" - @module("react") @scope("Children") @val + @module("react") @scope("Children") + external forEachWithIndex: (element, (element, int) => unit) => unit = "forEach" + @module("react") @scope("Children") external count: element => int = "count" - @module("react") @scope("Children") @val + @module("react") @scope("Children") external only: element => element = "only" - @module("react") @scope("Children") @val + @module("react") @scope("Children") external toArray: element => array = "toArray" } @@ -75,7 +82,7 @@ module Context = { external createContext: 'a => Context.t<'a> = "createContext" @module("react") -external forwardRef: (('props, Js.Nullable.t>) => element) => component<'props> = +external forwardRef: (('props, Js.Nullable.t>) => element) => component<'props> = "forwardRef" @module("react") @@ -87,6 +94,8 @@ external memoCustomCompareProps: ( ('props, 'props) => bool, ) => component<'props> = "memo" +@module("react") external fragment: component = "Fragment" + module Fragment = { type props = {key?: string, children: element} @@ -94,6 +103,13 @@ module Fragment = { external make: component = "Fragment" } +module StrictMode = { + type props = {key?: string, children: element} + + @module("react") + external make: component = "StrictMode" +} + module Suspense = { type props = {key?: string, children?: element, fallback?: element} @@ -101,6 +117,13 @@ module Suspense = { external make: component = "Suspense" } +type dynamicallyImportedModule<'a> = {default: component<'a>} + +@module("react") +external lazy_: (unit => promise>) => component<'a> = "lazy" + +let lazy_ = load => lazy_(async () => {default: await load()}) + /* HOOKS */ /* @@ -124,7 +147,9 @@ external useReducerWithMapState: ( ) => ('state, 'action => unit) = "useReducer" @module("react") -external useEffect: (unit => option unit>) => unit = "useEffect" +external useEffectOnEveryRender: (unit => option unit>) => unit = "useEffect" +@module("react") +external useEffect: (unit => option unit>, 'deps) => unit = "useEffect" @module("react") external useEffect0: (unit => option unit>, @as(json`[]`) _) => unit = "useEffect" @module("react") @@ -144,7 +169,9 @@ external useEffect7: (unit => option unit>, ('a, 'b, 'c, 'd, 'e, 'f, 'g) "useEffect" @module("react") -external useLayoutEffect: (unit => option unit>) => unit = "useLayoutEffect" +external useLayoutEffectOnEveryRender: (unit => option unit>) => unit = "useLayoutEffect" +@module("react") +external useLayoutEffect: (unit => option unit>, 'deps) => unit = "useLayoutEffect" @module("react") external useLayoutEffect0: (unit => option unit>, @as(json`[]`) _) => unit = "useLayoutEffect" @@ -168,108 +195,249 @@ external useLayoutEffect7: (unit => option unit>, ('a, 'b, 'c, 'd, 'e, ' "useLayoutEffect" @module("react") -external useMemo: (unit => 'any) => 'any = "useMemo" +external useMemo: (unit => 'any, 'deps) => 'any = "useMemo" + @module("react") external useMemo0: (unit => 'any, @as(json`[]`) _) => 'any = "useMemo" + @module("react") external useMemo1: (unit => 'any, array<'a>) => 'any = "useMemo" + @module("react") external useMemo2: (unit => 'any, ('a, 'b)) => 'any = "useMemo" + @module("react") external useMemo3: (unit => 'any, ('a, 'b, 'c)) => 'any = "useMemo" + @module("react") external useMemo4: (unit => 'any, ('a, 'b, 'c, 'd)) => 'any = "useMemo" + @module("react") external useMemo5: (unit => 'any, ('a, 'b, 'c, 'd, 'e)) => 'any = "useMemo" + @module("react") external useMemo6: (unit => 'any, ('a, 'b, 'c, 'd, 'e, 'f)) => 'any = "useMemo" + @module("react") external useMemo7: (unit => 'any, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'any = "useMemo" -/* This is used as return values */ -type callback<'input, 'output> = 'input => 'output - @module("react") -external useCallback: ('input => 'output) => callback<'input, 'output> = "useCallback" +external useCallback: ('f, 'deps) => 'f = "useCallback" + @module("react") -external useCallback0: ('input => 'output, @as(json`[]`) _) => callback<'input, 'output> = - "useCallback" +external useCallback0: ('f, @as(json`[]`) _) => 'f = "useCallback" + @module("react") -external useCallback1: ('input => 'output, array<'a>) => callback<'input, 'output> = "useCallback" +external useCallback1: ('f, array<'a>) => 'f = "useCallback" + @module("react") -external useCallback2: ('input => 'output, ('a, 'b)) => callback<'input, 'output> = "useCallback" +external useCallback2: ('f, ('a, 'b)) => 'f = "useCallback" + @module("react") -external useCallback3: ('input => 'output, ('a, 'b, 'c)) => callback<'input, 'output> = - "useCallback" +external useCallback3: ('f, ('a, 'b, 'c)) => 'f = "useCallback" + @module("react") -external useCallback4: ('input => 'output, ('a, 'b, 'c, 'd)) => callback<'input, 'output> = - "useCallback" +external useCallback4: ('f, ('a, 'b, 'c, 'd)) => 'f = "useCallback" + @module("react") -external useCallback5: ('input => 'output, ('a, 'b, 'c, 'd, 'e)) => callback<'input, 'output> = - "useCallback" +external useCallback5: ('f, ('a, 'b, 'c, 'd, 'e)) => 'f = "useCallback" + @module("react") -external useCallback6: ('input => 'output, ('a, 'b, 'c, 'd, 'e, 'f)) => callback<'input, 'output> = - "useCallback" +external useCallback6: ('callback, ('a, 'b, 'c, 'd, 'e, 'f)) => 'callback = "useCallback" + @module("react") -external useCallback7: ( - 'input => 'output, - ('a, 'b, 'c, 'd, 'e, 'f, 'g), -) => callback<'input, 'output> = "useCallback" +external useCallback7: ('callback, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'callback = "useCallback" @module("react") external useContext: Context.t<'any> => 'any = "useContext" -@module("react") external useRef: 'value => Ref.t<'value> = "useRef" +@module("react") +external usePromise: promise<'a> => 'a = "use" + +@module("react") external useRef: 'value => ref<'value> = "useRef" + +@module("react") +external useImperativeHandleOnEveryRender: (Js.Nullable.t>, unit => 'value) => unit = + "useImperativeHandle" + +@module("react") +external useImperativeHandle: (Js.Nullable.t>, unit => 'value, 'deps) => unit = + "useImperativeHandle" @module("react") external useImperativeHandle0: ( - Js.Nullable.t>, + Js.Nullable.t>, unit => 'value, @as(json`[]`) _, ) => unit = "useImperativeHandle" @module("react") -external useImperativeHandle1: (Js.Nullable.t>, unit => 'value, array<'a>) => unit = +external useImperativeHandle1: (Js.Nullable.t>, unit => 'value, array<'a>) => unit = "useImperativeHandle" @module("react") -external useImperativeHandle2: (Js.Nullable.t>, unit => 'value, ('a, 'b)) => unit = +external useImperativeHandle2: (Js.Nullable.t>, unit => 'value, ('a, 'b)) => unit = "useImperativeHandle" @module("react") -external useImperativeHandle3: ( - Js.Nullable.t>, - unit => 'value, - ('a, 'b, 'c), -) => unit = "useImperativeHandle" +external useImperativeHandle3: (Js.Nullable.t>, unit => 'value, ('a, 'b, 'c)) => unit = + "useImperativeHandle" @module("react") external useImperativeHandle4: ( - Js.Nullable.t>, + Js.Nullable.t>, unit => 'value, ('a, 'b, 'c, 'd), ) => unit = "useImperativeHandle" @module("react") external useImperativeHandle5: ( - Js.Nullable.t>, + Js.Nullable.t>, unit => 'value, ('a, 'b, 'c, 'd, 'e), ) => unit = "useImperativeHandle" @module("react") external useImperativeHandle6: ( - Js.Nullable.t>, + Js.Nullable.t>, unit => 'value, ('a, 'b, 'c, 'd, 'e, 'f), ) => unit = "useImperativeHandle" @module("react") external useImperativeHandle7: ( - Js.Nullable.t>, + Js.Nullable.t>, unit => 'value, ('a, 'b, 'c, 'd, 'e, 'f, 'g), ) => unit = "useImperativeHandle" +@module("react") external useId: unit => string = "useId" + +/** `useDeferredValue` is a React Hook that lets you defer updating a part of the UI. */ +@module("react") +external useDeferredValue: ('value, ~initialValue: 'value=?) => 'value = "useDeferredValue" + +@module("react") +external useInsertionEffectOnEveryRender: (unit => option unit>) => unit = + "useInsertionEffect" +@module("react") +external useInsertionEffect: (unit => option unit>, 'deps) => unit = "useInsertionEffect" +@module("react") +external useInsertionEffect0: (unit => option unit>, @as(json`[]`) _) => unit = + "useInsertionEffect" +@module("react") +external useInsertionEffect1: (unit => option unit>, array<'a>) => unit = + "useInsertionEffect" +@module("react") +external useInsertionEffect2: (unit => option unit>, ('a, 'b)) => unit = + "useInsertionEffect" +@module("react") +external useInsertionEffect3: (unit => option unit>, ('a, 'b, 'c)) => unit = + "useInsertionEffect" +@module("react") +external useInsertionEffect4: (unit => option unit>, ('a, 'b, 'c, 'd)) => unit = + "useInsertionEffect" +@module("react") +external useInsertionEffect5: (unit => option unit>, ('a, 'b, 'c, 'd, 'e)) => unit = + "useInsertionEffect" +@module("react") +external useInsertionEffect6: (unit => option unit>, ('a, 'b, 'c, 'd, 'e, 'f)) => unit = + "useInsertionEffect" +@module("react") +external useInsertionEffect7: (unit => option unit>, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => unit = + "useInsertionEffect" + +@module("react") +external useSyncExternalStore: ( + ~subscribe: (unit => unit) => unit => unit, + ~getSnapshot: unit => 'state, +) => 'state = "useSyncExternalStore" + +@module("react") +external useSyncExternalStoreWithServerSnapshot: ( + ~subscribe: (unit => unit) => unit => unit, + ~getSnapshot: unit => 'state, + ~getServerSnapshot: unit => 'state, +) => 'state = "useSyncExternalStore" + +module Uncurried = { + @module("react") + external useState: (unit => 'state) => ('state, ('state => 'state) => unit) = "useState" + + @module("react") + external useReducer: (('state, 'action) => 'state, 'state) => ('state, 'action => unit) = + "useReducer" + + @module("react") + external useReducerWithMapState: ( + ('state, 'action) => 'state, + 'initialState, + 'initialState => 'state, + ) => ('state, 'action => unit) = "useReducer" + + @module("react") + external useCallback: ('f, 'deps) => 'f = "useCallback" + + @module("react") + external useCallback0: ('f, @as(json`[]`) _) => 'f = "useCallback" + + @module("react") + external useCallback1: ('f, array<'a>) => 'f = "useCallback" + + @module("react") + external useCallback2: ('f, ('a, 'b)) => 'f = "useCallback" + + @module("react") + external useCallback3: ('f, ('a, 'b, 'c)) => 'f = "useCallback" + + @module("react") + external useCallback4: ('f, ('a, 'b, 'c, 'd)) => 'f = "useCallback" + + @module("react") + external useCallback5: ('f, ('a, 'b, 'c, 'd, 'e)) => 'f = "useCallback" + + @module("react") + external useCallback6: ('callback, ('a, 'b, 'c, 'd, 'e, 'f)) => 'callback = "useCallback" + + @module("react") + external useCallback7: ('callback, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'callback = "useCallback" +} + @set external setDisplayName: (component<'props>, string) => unit = "displayName" + +@get @return(nullable) +external displayName: component<'props> => option = "displayName" + +// Actions + +type transitionFunction = unit => promise + +type transitionStartFunction = transitionFunction => unit + +/** `useTransition` is a React Hook that lets you render a part of the UI in the background. */ +@module("react") +external useTransition: unit => (bool, transitionStartFunction) = "useTransition" + +type action<'state, 'payload> = ('state, 'payload) => promise<'state> + +type formAction<'formData> = 'formData => promise + +/** `useActionState` is a Hook that allows you to update state based on the result of a form action. */ +@module("react") +external useActionState: ( + action<'state, 'payload>, + 'state, + ~permalink: string=?, +) => ('state, formAction<'payload>, bool) = "useActionState" + +/** `useOptimistic` is a React Hook that lets you optimistically update the UI. */ +@module("react") +external useOptimistic: ( + 'state, + ~updateFn: ('state, 'action) => 'state=?, +) => ('state, 'action => unit) = "useOptimistic" + +/** `act` is a test helper to apply pending React updates before making assertions. */ +@module("react") +external act: (unit => promise) => promise = "act" diff --git a/tests/tests/src/reactDOM.mjs b/tests/tests/src/reactDOM.mjs new file mode 100644 index 0000000000..3064f39b11 --- /dev/null +++ b/tests/tests/src/reactDOM.mjs @@ -0,0 +1,59 @@ +// Generated by ReScript, PLEASE EDIT WITH CARE + +import * as Primitive_option from "rescript/lib/es6/Primitive_option.js"; + +let Root = {}; + +let Client = { + Root: Root +}; + +function getString(formData, name) { + let value = formData.get(name); + if (!(value == null) && typeof value === "string") { + return Primitive_option.some(value); + } + +} + +function getFile(formData, name) { + let value = formData.get(name); + if (!(value == null) && typeof value !== "string") { + return Primitive_option.some(value); + } + +} + +function getAll(t, string) { + return t.getAll(string).map(value => { + if (typeof value === "string") { + return { + TAG: "String", + _0: value + }; + } else { + return { + TAG: "File", + _0: value + }; + } + }); +} + +let FormData = { + getString: getString, + getFile: getFile, + getAll: getAll +}; + +let Ref = {}; + +let Style; + +export { + Client, + FormData, + Ref, + Style, +} +/* No side effect */ diff --git a/tests/tests/src/reactDOM.res b/tests/tests/src/reactDOM.res new file mode 100644 index 0000000000..3cb44aac83 --- /dev/null +++ b/tests/tests/src/reactDOM.res @@ -0,0 +1,249 @@ +/* First time reading a ReScript file? */ +/* `external` is the foreign function call in OCaml. */ +/* here we're saying `I guarantee that on the JS side, we have a `render` function in the module "react-dom" + that takes in a reactElement, a dom element, and returns unit (nothing) */ +/* It's like `let`, except you're pointing the implementation to the JS side. The compiler will inline these + calls and add the appropriate `require("react-dom")` in the file calling this `render` */ + +// Helper so that ReactDOM itself doesn't bring any runtime +@val @return(nullable) +external querySelector: string => option = "document.querySelector" + +module Client = { + module Root = { + type t + + @send external render: (t, React.element) => unit = "render" + + @send external unmount: (t, unit) => unit = "unmount" + } + + @module("react-dom/client") + external createRoot: Dom.element => Root.t = "createRoot" + + @module("react-dom/client") + external hydrateRoot: (Dom.element, React.element) => Root.t = "hydrateRoot" +} + +// Very rudimentary form data bindings +module FormData = { + type t + type file + + type formValue = + | String(string) + | File(file) + + @new external make: unit => t = "FormData" + + @send external append: (t, string, ~filename: string=?) => unit = "append" + @send external delete: (t, string) => unit = "delete" + @return(nullable) @send external getUnsafe: (t, string) => option<'a> = "get" + @send external getAllUnsafe: (t, string) => array<'a> = "getAll" + + let getString = (formData, name) => { + switch formData->getUnsafe(name) { + | Some(value) => Js.typeof(value) === "string" ? Some(value) : None + | _ => None + } + } + + external _asFile: 'a => file = "%identity" + + let getFile = (formData, name) => { + switch formData->getUnsafe(name) { + | Some(value) => Js.typeof(value) === "string" ? None : Some(value->_asFile) + | _ => None + } + } + + let getAll = (t, string) => { + t + ->getAllUnsafe(string) + ->Js.Array2.map(value => { + Js.typeof(value) === "string" ? String(value) : File(value->_asFile) + }) + } + + @send external set: (string, string) => unit = "set" + @send external has: string => bool = "has" + // @send external keys: t => Iterator.t = "keys"; + // @send external values: t => Iterator.t = "values"; +} + +@module("react-dom") +external createPortal: (React.element, Dom.element) => React.element = "createPortal" + +external domElementToObj: Dom.element => {..} = "%identity" + +type style = JsxDOMStyle.t + +type domRef = JsxDOM.domRef + +module Ref = { + type t = domRef + type currentDomRef = React.ref> + type callbackDomRef = Js.nullable => option unit> + + external domRef: currentDomRef => domRef = "%identity" + external callbackDomRef: callbackDomRef => domRef = "%identity" +} + +// Hooks + +type formStatus<'state> = { + /** If true, this means the parent
is pending submission. Otherwise, false. */ + pending: bool, + /** An object implementing the FormData interface that contains the data the parent is submitting. If there is no active submission or no parent , it will be null. */ + data: FormData.t, + /** This represents whether the parent is submitting with either a GET or POST HTTP method. By default, a will use the GET method and can be specified by the method property. */ + method: [#get | #post], + /** A reference to the function passed to the action prop on the parent . If there is no parent , the property is null. If there is a URI value provided to the action prop, or no action prop specified, status.action will be null. */ + action: React.action<'state, FormData.t>, +} + +external formAction: React.formAction => string = "%identity" + +/** `useFormStatus` is a Hook that gives you status information of the last form submission. */ +@module("react-dom") +external useFormStatus: unit => formStatus<'state> = "useFormStatus" + +// Resource Preloading APIs + +/** The CORS policy to use. */ +type crossOrigin = [ + | #anonymous + | #"use-credentials" +] + +/** The Referrer header to send when fetching. */ +type referrerPolicy = [ + | #"referrer-when-downgrade" + | #"no-referrer" + | #origin + | #"origin-when-cross-origin" + | #"unsafe-url" +] + +/** Suggests a relative priority for fetching the resource. */ +type fetchPriority = [#auto | #high | #low] + +/** `prefetchDNS` lets you eagerly look up the IP of a server that you expect to load resources from. */ +@module("react-dom") +external prefetchDNS: string => unit = "prefetchDNS" + +/** `preconnect` lets you eagerly connect to a server that you expect to load resources from. */ +@module("react-dom") +external preconnect: string => unit = "preconnect" + +type preloadOptions = { + /** The type of resource. */ + @as("as") + as_: [ + | #audio + | #document + | #embed + | #fetch + | #font + | #image + | #object + | #script + | #style + | #track + | #video + | #worker + ], + /** The CORS policy to use. It is required when as is set to "fetch". */ + crossOrigin?: crossOrigin, + /** The Referrer header to send when fetching. */ + referrerPolicy?: referrerPolicy, + /** A cryptographic hash of the resource, to verify its authenticity. */ + integrity?: string, + /** The MIME type of the resource. */ + @as("type") + type_?: string, + /** A cryptographic nonce to allow the resource when using a strict Content Security Policy. */ + nonce?: string, + /** Suggests a relative priority for fetching the resource. */ + fetchPriority?: fetchPriority, + /** For use only with as: "image". Specifies the source set of the image. */ + imageSrcSet?: string, + /** For use only with as: "image". Specifies the sizes of the image. */ + imageSizes?: string, +} + +/** `preload` lets you eagerly fetch a resource such as a stylesheet, font, or external script that you expect to use. */ +@module("react-dom") +external preload: (string, preloadOptions) => unit = "preload" + +type preloadModuleOptions = { + /** The type of resource. */ + @as("as") + as_: [#script], + /** The CORS policy to use. It is required when as is set to "fetch". */ + crossOrigin?: crossOrigin, + /** A cryptographic hash of the resource, to verify its authenticity. */ + integrity?: string, + /** A cryptographic nonce to allow the resource when using a strict Content Security Policy. */ + nonce?: string, +} + +/** `preloadModule` lets you eagerly fetch an ESM module that you expect to use. */ +@module("react-dom") +external preloadModule: (string, preloadModuleOptions) => unit = "preloadModule" + +type preinitOptions = { + /** The type of resource. */ + @as("as") + as_: [#script | #style], + /** Required with stylesheets. Says where to insert the stylesheet relative to others. Stylesheets with higher precedence can override those with lower precedence. */ + precedence?: [#reset | #low | #medium | #high], + /** The CORS policy to use. It is required when as is set to "fetch". */ + crossOrigin?: crossOrigin, + /** The Referrer header to send when fetching. */ + referrerPolicy?: referrerPolicy, + /** A cryptographic hash of the resource, to verify its authenticity. */ + integrity?: string, + nonce?: string, + /** Suggests a relative priority for fetching the resource. */ + fetchPriority?: fetchPriority, +} + +/** `preinit` lets you eagerly fetch and evaluate a stylesheet or external script. */ +@module("react-dom") +external preinit: (string, preinitOptions) => unit = "preinit" + +/** To preinit an ESM module, call the `preinitModule` function from react-dom. */ +@module("react-dom") +external preinitModule: (string, preloadModuleOptions) => unit = "preinitModule" + +// Runtime + +type domProps = JsxDOM.domProps + +@variadic @module("react") +external createElement: (string, ~props: domProps=?, array) => React.element = + "createElement" + +@variadic @module("react") +external createDOMElementVariadic: ( + string, + ~props: domProps=?, + array, +) => React.element = "createElement" + +external someElement: React.element => option = "%identity" + +@module("react/jsx-runtime") +external jsx: (string, JsxDOM.domProps) => Jsx.element = "jsx" + +@module("react/jsx-runtime") +external jsxKeyed: (string, JsxDOM.domProps, ~key: string=?, @ignore unit) => Jsx.element = "jsx" + +@module("react/jsx-runtime") +external jsxs: (string, JsxDOM.domProps) => Jsx.element = "jsxs" + +@module("react/jsx-runtime") +external jsxsKeyed: (string, JsxDOM.domProps, ~key: string=?, @ignore unit) => Jsx.element = "jsxs" + +module Style = JsxDOMStyle diff --git a/tests/tests/src/reactDOMRe.mjs b/tests/tests/src/reactDOMRe.mjs deleted file mode 100644 index 4a02d17a7b..0000000000 --- a/tests/tests/src/reactDOMRe.mjs +++ /dev/null @@ -1,111 +0,0 @@ -// Generated by ReScript, PLEASE EDIT WITH CARE - -import * as React from "react"; -import * as Js_array from "rescript/lib/es6/Js_array.js"; -import * as ReactDom from "react-dom"; - -function renderToElementWithClassName(reactElement, className) { - let elements = document.getElementsByClassName(className); - if (elements.length !== 0) { - ReactDom.render(reactElement, elements[0]); - } else { - console.error("ReactDOMRe.renderToElementWithClassName: no element of class " + (className + " found in the HTML.")); - } -} - -function renderToElementWithId(reactElement, id) { - let element = document.getElementById(id); - if (element == null) { - console.error("ReactDOMRe.renderToElementWithId : no element of id " + (id + " found in the HTML.")); - } else { - ReactDom.render(reactElement, element); - } -} - -function createRootWithClassName(className) { - let elements = document.getElementsByClassName(className); - if (elements.length !== 0) { - return { - TAG: "Ok", - _0: ReactDom.createRoot(elements[0]) - }; - } else { - return { - TAG: "Error", - _0: "ReactDOMRe.Unstable.createRootWithClassName: no element of class " + (className + " found in the HTML.") - }; - } -} - -function createRootWithId(id) { - let element = document.getElementById(id); - if (element == null) { - return { - TAG: "Error", - _0: "ReactDOMRe.Unstable.createRootWithId: no element of id " + (id + " found in the HTML.") - }; - } else { - return { - TAG: "Ok", - _0: ReactDom.createRoot(element) - }; - } -} - -let Experimental = { - createRootWithClassName: createRootWithClassName, - createRootWithId: createRootWithId -}; - -function hydrateToElementWithClassName(reactElement, className) { - let elements = document.getElementsByClassName(className); - if (elements.length !== 0) { - ReactDom.hydrate(reactElement, elements[0]); - } else { - console.error("ReactDOMRe.hydrateToElementWithClassName: no element of class " + (className + " found in the HTML.")); - } -} - -function hydrateToElementWithId(reactElement, id) { - let element = document.getElementById(id); - if (element == null) { - throw { - RE_EXN_ID: "Invalid_argument", - _1: "ReactDOMRe.hydrateToElementWithId : no element of id " + (id + " found in the HTML."), - Error: new Error() - }; - } - ReactDom.hydrate(reactElement, element); -} - -let Ref = {}; - -function createElementVariadic(domClassName, props, children) { - let variadicArguments = Js_array.concat(children, [ - domClassName, - props - ]); - return React.createElement.apply(null, variadicArguments); -} - -function unsafeAddProp(style, key, value) { - let dict = {}; - dict[key] = value; - return Object.assign({}, style, dict); -} - -let Style = { - unsafeAddProp: unsafeAddProp -}; - -export { - renderToElementWithClassName, - renderToElementWithId, - Experimental, - hydrateToElementWithClassName, - hydrateToElementWithId, - Ref, - createElementVariadic, - Style, -} -/* react Not a pure module */ diff --git a/tests/tests/src/reactDOMRe.res b/tests/tests/src/reactDOMRe.res deleted file mode 100644 index 334f11c70c..0000000000 --- a/tests/tests/src/reactDOMRe.res +++ /dev/null @@ -1,2586 +0,0 @@ -/* First time reading an ReScript file? */ -/* `external` is the foreign function call. */ -/* here we're saying `I guarantee that on the JS side, we have a `render` function in the module "react-dom" - that takes in a reactElement, a dom element, and returns unit (nothing) */ -/* It's like `let`, except you're pointing the implementation to the JS side. The compiler will inline these - calls and add the appropriate `require("react-dom")` in the file calling this `render` */ -@val @module("react-dom") -external render: (React.element, Dom.element) => unit = "render" - -@val -external _getElementsByClassName: string => array = "document.getElementsByClassName" - -@val @return(nullable) -external _getElementById: string => option = "document.getElementById" - -let renderToElementWithClassName = (reactElement, className) => - switch _getElementsByClassName(className) { - | [] => - Js.Console.error( - "ReactDOMRe.renderToElementWithClassName: no element of class " ++ - (className ++ - " found in the HTML."), - ) - | elements => render(reactElement, Belt.Array.getUnsafe(elements, 0)) - } - -let renderToElementWithId = (reactElement, id) => - switch _getElementById(id) { - | None => - Js.Console.error( - "ReactDOMRe.renderToElementWithId : no element of id " ++ (id ++ " found in the HTML."), - ) - | Some(element) => render(reactElement, element) - } - -module Experimental = { - type root - - @module("react-dom") - external createRoot: Dom.element => root = "createRoot" - - @send external render: (root, React.element) => unit = "render" - - let createRootWithClassName = className => - switch _getElementsByClassName(className) { - | [] => - Error( - "ReactDOMRe.Unstable.createRootWithClassName: no element of class " ++ - (className ++ - " found in the HTML."), - ) - | elements => Ok(createRoot(Belt.Array.getUnsafe(elements, 0))) - } - - let createRootWithId = id => - switch _getElementById(id) { - | None => - Error( - "ReactDOMRe.Unstable.createRootWithId: no element of id " ++ (id ++ " found in the HTML."), - ) - | Some(element) => Ok(createRoot(element)) - } -} - -@val @module("react-dom") -external hydrate: (React.element, Dom.element) => unit = "hydrate" - -let hydrateToElementWithClassName = (reactElement, className) => - switch _getElementsByClassName(className) { - | [] => - Js.Console.error( - "ReactDOMRe.hydrateToElementWithClassName: no element of class " ++ - (className ++ - " found in the HTML."), - ) - | elements => hydrate(reactElement, Belt.Array.getUnsafe(elements, 0)) - } - -let hydrateToElementWithId = (reactElement, id) => - switch _getElementById(id) { - | None => - raise( - Invalid_argument( - "ReactDOMRe.hydrateToElementWithId : no element of id " ++ (id ++ " found in the HTML."), - ), - ) - | Some(element) => hydrate(reactElement, element) - } - -@val @module("react-dom") -external createPortal: (React.element, Dom.element) => React.element = "createPortal" - -@val @module("react-dom") -external unmountComponentAtNode: Dom.element => unit = "unmountComponentAtNode" - -@val @module("react-dom") -external findDOMNode: ReasonReact.reactRef => Dom.element = "findDOMNode" - -external domElementToObj: Dom.element => {..} = "%identity" - -type style - -type domRef - -module Ref = { - type t = domRef - type currentDomRef = React.ref> - type callbackDomRef = Js.nullable => unit - - external domRef: currentDomRef => domRef = "%identity" - external callbackDomRef: callbackDomRef => domRef = "%identity" -} - -/* This list isn't exhaustive. We'll add more as we go. */ -/* - * Watch out! There are two props types and the only difference is the type of ref. - * Please keep in sync. - */ -@deriving(abstract) -type domProps = { - @optional - key: string, - @optional - ref: domRef, - /* accessibility */ - /* https://www.w3.org/TR/wai-aria-1.1/ */ - /* https://accessibilityresources.org/ is a great resource for these */ - /* [@optional] [@as "aria-current"] ariaCurrent: page|step|location|date|time|true|false, */ - @optional @as("aria-details") - ariaDetails: string, - @optional @as("aria-disabled") - ariaDisabled: bool, - @optional @as("aria-hidden") - ariaHidden: bool, - /* [@optional] [@as "aria-invalid"] ariaInvalid: grammar|false|spelling|true, */ - @optional @as("aria-keyshortcuts") - ariaKeyshortcuts: string, - @optional @as("aria-label") - ariaLabel: string, - @optional @as("aria-roledescription") - ariaRoledescription: string, - /* Widget Attributes */ - /* [@optional] [@as "aria-autocomplete"] ariaAutocomplete: inline|list|both|none, */ - /* [@optional] [@as "aria-checked"] ariaChecked: true|false|mixed, /* https://www.w3.org/TR/wai-aria-1.1/#valuetype_tristate */ */ - @optional @as("aria-expanded") - ariaExpanded: bool, - /* [@optional] [@as "aria-haspopup"] ariaHaspopup: false|true|menu|listbox|tree|grid|dialog, */ - @optional @as("aria-level") - ariaLevel: int, - @optional @as("aria-modal") - ariaModal: bool, - @optional @as("aria-multiline") - ariaMultiline: bool, - @optional @as("aria-multiselectable") - ariaMultiselectable: bool, - /* [@optional] [@as "aria-orientation"] ariaOrientation: horizontal|vertical|undefined, */ - @optional @as("aria-placeholder") - ariaPlaceholder: string, - /* [@optional] [@as "aria-pressed"] ariaPressed: true|false|mixed, /* https://www.w3.org/TR/wai-aria-1.1/#valuetype_tristate */ */ - @optional @as("aria-readonly") - ariaReadonly: bool, - @optional @as("aria-required") - ariaRequired: bool, - @optional @as("aria-selected") - ariaSelected: bool, - @optional @as("aria-sort") - ariaSort: string, - @optional @as("aria-valuemax") - ariaValuemax: float, - @optional @as("aria-valuemin") - ariaValuemin: float, - @optional @as("aria-valuenow") - ariaValuenow: float, - @optional @as("aria-valuetext") - ariaValuetext: string, - /* Live Region Attributes */ - @optional @as("aria-atomic") - ariaAtomic: bool, - @optional @as("aria-busy") - ariaBusy: bool, - /* [@optional] [@as "aria-live"] ariaLive: off|polite|assertive|rude, */ - @optional @as("aria-relevant") - ariaRelevant: string, - /* Drag-and-Drop Attributes */ - /* [@optional] [@as "aria-dropeffect"] ariaDropeffect: copy|move|link|execute|popup|none, */ - @optional @as("aria-grabbed") - ariaGrabbed: bool, - /* Relationship Attributes */ - @optional @as("aria-activedescendant") - ariaActivedescendant: string, - @optional @as("aria-colcount") - ariaColcount: int, - @optional @as("aria-colindex") - ariaColindex: int, - @optional @as("aria-colspan") - ariaColspan: int, - @optional @as("aria-controls") - ariaControls: string, - @optional @as("aria-describedby") - ariaDescribedby: string, - @optional @as("aria-errormessage") - ariaErrormessage: string, - @optional @as("aria-flowto") - ariaFlowto: string, - @optional @as("aria-labelledby") - ariaLabelledby: string, - @optional @as("aria-owns") - ariaOwns: string, - @optional @as("aria-posinset") - ariaPosinset: int, - @optional @as("aria-rowcount") - ariaRowcount: int, - @optional @as("aria-rowindex") - ariaRowindex: int, - @optional @as("aria-rowspan") - ariaRowspan: int, - @optional @as("aria-setsize") - ariaSetsize: int, - /* react textarea/input */ - @optional - defaultChecked: bool, - @optional - defaultValue: string, - /* global html attributes */ - @optional - accessKey: string, - @optional - className: string /* substitute for "class" */, - @optional - contentEditable: bool, - @optional - contextMenu: string, - @optional - dir: string /* "ltr", "rtl" or "auto" */, - @optional - draggable: bool, - @optional - hidden: bool, - @optional - id: string, - @optional - lang: string, - @optional - role: string /* ARIA role */, - @optional - style: style, - @optional - spellCheck: bool, - @optional - tabIndex: int, - @optional - title: string, - /* html5 microdata */ - @optional - itemID: string, - @optional - itemProp: string, - @optional - itemRef: string, - @optional - itemScope: bool, - @optional - itemType: string /* uri */, - /* tag-specific html attributes */ - @optional - accept: string, - @optional - acceptCharset: string, - @optional - action: string /* uri */, - @optional - allowFullScreen: bool, - @optional - alt: string, - @optional - async: bool, - @optional - autoComplete: string /* has a fixed, but large-ish, set of possible values */, - @optional - autoCapitalize: string /* Mobile Safari specific */, - @optional - autoFocus: bool, - @optional - autoPlay: bool, - @optional - challenge: string, - @optional - charSet: string, - @optional - checked: bool, - @optional - cite: string /* uri */, - @optional - crossOrigin: string /* anonymous, use-credentials */, - @optional - cols: int, - @optional - colSpan: int, - @optional - content: string, - @optional - controls: bool, - @optional - coords: string /* set of values specifying the coordinates of a region */, - @optional - data: string /* uri */, - @optional - dateTime: string /* "valid date string with optional time" */, - @optional - default: bool, - @optional - defer: bool, - @optional - disabled: bool, - @optional - download: string /* should really be either a boolean, signifying presence, or a string */, - @optional - encType: string /* "application/x-www-form-urlencoded", "multipart/form-data" or "text/plain" */, - @optional - form: string, - @optional - formAction: string /* uri */, - @optional - formTarget: string /* "_blank", "_self", etc. */, - @optional - formMethod: string /* "post", "get", "put" */, - @optional - headers: string, - @optional - height: string /* in html5 this can only be a number, but in html4 it can ba a percentage as well */, - @optional - high: int, - @optional - href: string /* uri */, - @optional - hrefLang: string, - @optional - htmlFor: string /* substitute for "for" */, - @optional - httpEquiv: string /* has a fixed set of possible values */, - @optional - icon: string /* uri? */, - @optional - inputMode: string /* "verbatim", "latin", "numeric", etc. */, - @optional - integrity: string, - @optional - keyType: string, - @optional - kind: string /* has a fixed set of possible values */, - @optional - label: string, - @optional - list: string, - @optional - loop: bool, - @optional - low: int, - @optional - manifest: string /* uri */, - @optional - max: string /* should be int or Js.Date.t */, - @optional - maxLength: int, - @optional - media: string /* a valid media query */, - @optional - mediaGroup: string, - @optional - method: string /* "post" or "get" */, - @optional - min: string, - @optional - minLength: int, - @optional - multiple: bool, - @optional - muted: bool, - @optional - name: string, - @optional - nonce: string, - @optional - noValidate: bool, - @optional @as("open") - open_: bool /* use this one. Previous one is deprecated */, - @optional - optimum: int, - @optional - pattern: string /* valid Js RegExp */, - @optional - placeholder: string, - @optional - poster: string /* uri */, - @optional - preload: string /* "none", "metadata" or "auto" (and "" as a synonym for "auto") */, - @optional - radioGroup: string, - @optional - readOnly: bool, - @optional - rel: string /* a space- or comma-separated (depending on the element) list of a fixed set of "link types" */, - @optional - required: bool, - @optional - reversed: bool, - @optional - rows: int, - @optional - rowSpan: int, - @optional - sandbox: string /* has a fixed set of possible values */, - @optional - scope: string /* has a fixed set of possible values */, - @optional - scoped: bool, - @optional - scrolling: string /* html4 only, "auto", "yes" or "no" */, - /* seamless - supported by React, but removed from the html5 spec */ - @optional - selected: bool, - @optional - shape: string, - @optional - size: int, - @optional - sizes: string, - @optional - span: int, - @optional - src: string /* uri */, - @optional - srcDoc: string, - @optional - srcLang: string, - @optional - srcSet: string, - @optional - start: int, - @optional - step: float, - @optional - summary: string /* deprecated */, - @optional - target: string, - @optional @as("type") - type_: string /* has a fixed but large-ish set of possible values */ /* use this one. Previous one is deprecated */, - @optional - useMap: string, - @optional - value: string, - @optional - width: string /* in html5 this can only be a number, but in html4 it can ba a percentage as well */, - @optional - wrap: string /* "hard" or "soft" */, - /* Clipboard events */ - @optional - onCopy: ReactEvent.Clipboard.t => unit, - @optional - onCut: ReactEvent.Clipboard.t => unit, - @optional - onPaste: ReactEvent.Clipboard.t => unit, - /* Composition events */ - @optional - onCompositionEnd: ReactEvent.Composition.t => unit, - @optional - onCompositionStart: ReactEvent.Composition.t => unit, - @optional - onCompositionUpdate: ReactEvent.Composition.t => unit, - /* Keyboard events */ - @optional - onKeyDown: ReactEvent.Keyboard.t => unit, - @optional - onKeyPress: ReactEvent.Keyboard.t => unit, - @optional - onKeyUp: ReactEvent.Keyboard.t => unit, - /* Focus events */ - @optional - onFocus: ReactEvent.Focus.t => unit, - @optional - onBlur: ReactEvent.Focus.t => unit, - /* Form events */ - @optional - onChange: ReactEvent.Form.t => unit, - @optional - onInput: ReactEvent.Form.t => unit, - @optional - onSubmit: ReactEvent.Form.t => unit, - @optional - onInvalid: ReactEvent.Form.t => unit, - /* Mouse events */ - @optional - onClick: ReactEvent.Mouse.t => unit, - @optional - onContextMenu: ReactEvent.Mouse.t => unit, - @optional - onDoubleClick: ReactEvent.Mouse.t => unit, - @optional - onDrag: ReactEvent.Mouse.t => unit, - @optional - onDragEnd: ReactEvent.Mouse.t => unit, - @optional - onDragEnter: ReactEvent.Mouse.t => unit, - @optional - onDragExit: ReactEvent.Mouse.t => unit, - @optional - onDragLeave: ReactEvent.Mouse.t => unit, - @optional - onDragOver: ReactEvent.Mouse.t => unit, - @optional - onDragStart: ReactEvent.Mouse.t => unit, - @optional - onDrop: ReactEvent.Mouse.t => unit, - @optional - onMouseDown: ReactEvent.Mouse.t => unit, - @optional - onMouseEnter: ReactEvent.Mouse.t => unit, - @optional - onMouseLeave: ReactEvent.Mouse.t => unit, - @optional - onMouseMove: ReactEvent.Mouse.t => unit, - @optional - onMouseOut: ReactEvent.Mouse.t => unit, - @optional - onMouseOver: ReactEvent.Mouse.t => unit, - @optional - onMouseUp: ReactEvent.Mouse.t => unit, - /* Selection events */ - @optional - onSelect: ReactEvent.Selection.t => unit, - /* Touch events */ - @optional - onTouchCancel: ReactEvent.Touch.t => unit, - @optional - onTouchEnd: ReactEvent.Touch.t => unit, - @optional - onTouchMove: ReactEvent.Touch.t => unit, - @optional - onTouchStart: ReactEvent.Touch.t => unit, - /* UI events */ - @optional - onScroll: ReactEvent.UI.t => unit, - /* Wheel events */ - @optional - onWheel: ReactEvent.Wheel.t => unit, - /* Media events */ - @optional - onAbort: ReactEvent.Media.t => unit, - @optional - onCanPlay: ReactEvent.Media.t => unit, - @optional - onCanPlayThrough: ReactEvent.Media.t => unit, - @optional - onDurationChange: ReactEvent.Media.t => unit, - @optional - onEmptied: ReactEvent.Media.t => unit, - @optional - onEncrypetd: ReactEvent.Media.t => unit, - @optional - onEnded: ReactEvent.Media.t => unit, - @optional - onError: ReactEvent.Media.t => unit, - @optional - onLoadedData: ReactEvent.Media.t => unit, - @optional - onLoadedMetadata: ReactEvent.Media.t => unit, - @optional - onLoadStart: ReactEvent.Media.t => unit, - @optional - onPause: ReactEvent.Media.t => unit, - @optional - onPlay: ReactEvent.Media.t => unit, - @optional - onPlaying: ReactEvent.Media.t => unit, - @optional - onProgress: ReactEvent.Media.t => unit, - @optional - onRateChange: ReactEvent.Media.t => unit, - @optional - onSeeked: ReactEvent.Media.t => unit, - @optional - onSeeking: ReactEvent.Media.t => unit, - @optional - onStalled: ReactEvent.Media.t => unit, - @optional - onSuspend: ReactEvent.Media.t => unit, - @optional - onTimeUpdate: ReactEvent.Media.t => unit, - @optional - onVolumeChange: ReactEvent.Media.t => unit, - @optional - onWaiting: ReactEvent.Media.t => unit, - /* Image events */ - @optional - onLoad: ReactEvent.Image.t => unit /* duplicate */ /* ~onError: ReactEvent.Image.t => unit=?, */, - /* Animation events */ - @optional - onAnimationStart: ReactEvent.Animation.t => unit, - @optional - onAnimationEnd: ReactEvent.Animation.t => unit, - @optional - onAnimationIteration: ReactEvent.Animation.t => unit, - /* Transition events */ - @optional - onTransitionEnd: ReactEvent.Transition.t => unit, - /* svg */ - @optional - accentHeight: string, - @optional - accumulate: string, - @optional - additive: string, - @optional - alignmentBaseline: string, - @optional - allowReorder: string, - @optional - alphabetic: string, - @optional - amplitude: string, - @optional - arabicForm: string, - @optional - ascent: string, - @optional - attributeName: string, - @optional - attributeType: string, - @optional - autoReverse: string, - @optional - azimuth: string, - @optional - baseFrequency: string, - @optional - baseProfile: string, - @optional - baselineShift: string, - @optional - bbox: string, - @optional @as("begin") - begin_: string /* use this one. Previous one is deprecated */, - @optional - bias: string, - @optional - by: string, - @optional - calcMode: string, - @optional - capHeight: string, - @optional - clip: string, - @optional - clipPath: string, - @optional - clipPathUnits: string, - @optional - clipRule: string, - @optional - colorInterpolation: string, - @optional - colorInterpolationFilters: string, - @optional - colorProfile: string, - @optional - colorRendering: string, - @optional - contentScriptType: string, - @optional - contentStyleType: string, - @optional - cursor: string, - @optional - cx: string, - @optional - cy: string, - @optional - d: string, - @optional - decelerate: string, - @optional - descent: string, - @optional - diffuseConstant: string, - @optional - direction: string, - @optional - display: string, - @optional - divisor: string, - @optional - dominantBaseline: string, - @optional - dur: string, - @optional - dx: string, - @optional - dy: string, - @optional - edgeMode: string, - @optional - elevation: string, - @optional - enableBackground: string, - @optional @as("end") - end_: string /* use this one. Previous one is deprecated */, - @optional - exponent: string, - @optional - externalResourcesRequired: string, - @optional - fill: string, - @optional - fillOpacity: string, - @optional - fillRule: string, - @optional - filter: string, - @optional - filterRes: string, - @optional - filterUnits: string, - @optional - floodColor: string, - @optional - floodOpacity: string, - @optional - focusable: string, - @optional - fontFamily: string, - @optional - fontSize: string, - @optional - fontSizeAdjust: string, - @optional - fontStretch: string, - @optional - fontStyle: string, - @optional - fontVariant: string, - @optional - fontWeight: string, - @optional - fomat: string, - @optional - from: string, - @optional - fx: string, - @optional - fy: string, - @optional - g1: string, - @optional - g2: string, - @optional - glyphName: string, - @optional - glyphOrientationHorizontal: string, - @optional - glyphOrientationVertical: string, - @optional - glyphRef: string, - @optional - gradientTransform: string, - @optional - gradientUnits: string, - @optional - hanging: string, - @optional - horizAdvX: string, - @optional - horizOriginX: string, - @optional - ideographic: string, - @optional - imageRendering: string, - @optional @as("in") - in_: string /* use this one. Previous one is deprecated */, - @optional - in2: string, - @optional - intercept: string, - @optional - k: string, - @optional - k1: string, - @optional - k2: string, - @optional - k3: string, - @optional - k4: string, - @optional - kernelMatrix: string, - @optional - kernelUnitLength: string, - @optional - kerning: string, - @optional - keyPoints: string, - @optional - keySplines: string, - @optional - keyTimes: string, - @optional - lengthAdjust: string, - @optional - letterSpacing: string, - @optional - lightingColor: string, - @optional - limitingConeAngle: string, - @optional - local: string, - @optional - markerEnd: string, - @optional - markerHeight: string, - @optional - markerMid: string, - @optional - markerStart: string, - @optional - markerUnits: string, - @optional - markerWidth: string, - @optional - mask: string, - @optional - maskContentUnits: string, - @optional - maskUnits: string, - @optional - mathematical: string, - @optional - mode: string, - @optional - numOctaves: string, - @optional - offset: string, - @optional - opacity: string, - @optional - operator: string, - @optional - order: string, - @optional - orient: string, - @optional - orientation: string, - @optional - origin: string, - @optional - overflow: string, - @optional - overflowX: string, - @optional - overflowY: string, - @optional - overlinePosition: string, - @optional - overlineThickness: string, - @optional - paintOrder: string, - @optional - panose1: string, - @optional - pathLength: string, - @optional - patternContentUnits: string, - @optional - patternTransform: string, - @optional - patternUnits: string, - @optional - pointerEvents: string, - @optional - points: string, - @optional - pointsAtX: string, - @optional - pointsAtY: string, - @optional - pointsAtZ: string, - @optional - preserveAlpha: string, - @optional - preserveAspectRatio: string, - @optional - primitiveUnits: string, - @optional - r: string, - @optional - radius: string, - @optional - refX: string, - @optional - refY: string, - @optional - renderingIntent: string, - @optional - repeatCount: string, - @optional - repeatDur: string, - @optional - requiredExtensions: string, - @optional - requiredFeatures: string, - @optional - restart: string, - @optional - result: string, - @optional - rotate: string, - @optional - rx: string, - @optional - ry: string, - @optional - scale: string, - @optional - seed: string, - @optional - shapeRendering: string, - @optional - slope: string, - @optional - spacing: string, - @optional - specularConstant: string, - @optional - specularExponent: string, - @optional - speed: string, - @optional - spreadMethod: string, - @optional - startOffset: string, - @optional - stdDeviation: string, - @optional - stemh: string, - @optional - stemv: string, - @optional - stitchTiles: string, - @optional - stopColor: string, - @optional - stopOpacity: string, - @optional - strikethroughPosition: string, - @optional - strikethroughThickness: string, - @optional - string: string, - @optional - stroke: string, - @optional - strokeDasharray: string, - @optional - strokeDashoffset: string, - @optional - strokeLinecap: string, - @optional - strokeLinejoin: string, - @optional - strokeMiterlimit: string, - @optional - strokeOpacity: string, - @optional - strokeWidth: string, - @optional - surfaceScale: string, - @optional - systemLanguage: string, - @optional - tableValues: string, - @optional - targetX: string, - @optional - targetY: string, - @optional - textAnchor: string, - @optional - textDecoration: string, - @optional - textLength: string, - @optional - textRendering: string, - @optional @as("to") - to_: string /* use this one. Previous one is deprecated */, - @optional - transform: string, - @optional - u1: string, - @optional - u2: string, - @optional - underlinePosition: string, - @optional - underlineThickness: string, - @optional - unicode: string, - @optional - unicodeBidi: string, - @optional - unicodeRange: string, - @optional - unitsPerEm: string, - @optional - vAlphabetic: string, - @optional - vHanging: string, - @optional - vIdeographic: string, - @optional - vMathematical: string, - @optional - values: string, - @optional - vectorEffect: string, - @optional - version: string, - @optional - vertAdvX: string, - @optional - vertAdvY: string, - @optional - vertOriginX: string, - @optional - vertOriginY: string, - @optional - viewBox: string, - @optional - viewTarget: string, - @optional - visibility: string, - /* width::string? => */ - @optional - widths: string, - @optional - wordSpacing: string, - @optional - writingMode: string, - @optional - x: string, - @optional - x1: string, - @optional - x2: string, - @optional - xChannelSelector: string, - @optional - xHeight: string, - @optional - xlinkActuate: string, - @optional - xlinkArcrole: string, - @optional - xlinkHref: string, - @optional - xlinkRole: string, - @optional - xlinkShow: string, - @optional - xlinkTitle: string, - @optional - xlinkType: string, - @optional - xmlns: string, - @optional - xmlnsXlink: string, - @optional - xmlBase: string, - @optional - xmlLang: string, - @optional - xmlSpace: string, - @optional - y: string, - @optional - y1: string, - @optional - y2: string, - @optional - yChannelSelector: string, - @optional - z: string, - @optional - zoomAndPan: string, - /* RDFa */ - @optional - about: string, - @optional - datatype: string, - @optional - inlist: string, - @optional - prefix: string, - @optional - property: string, - @optional - resource: string, - @optional - typeof: string, - @optional - vocab: string, - /* react-specific */ - @optional - dangerouslySetInnerHTML: {"__html": string}, - @optional - suppressContentEditableWarning: bool, -} - -@variadic @module("react") -external createDOMElementVariadic: ( - string, - ~props: domProps=?, - array, -) => React.element = "createElement" - -/* This list isn't exhaustive. We'll add more as we go. */ -/* - * Watch out! There are two props types and the only difference is the type of ref. - * Please keep in sync. - */ -@deriving(abstract) -type props = { - @optional - key: string, - @optional - ref: Js.nullable => unit, - /* accessibility */ - /* https://www.w3.org/TR/wai-aria-1.1/ */ - /* https://accessibilityresources.org/ is a great resource for these */ - /* [@optional] [@as "aria-current"] ariaCurrent: page|step|location|date|time|true|false, */ - @optional @as("aria-details") - ariaDetails: string, - @optional @as("aria-disabled") - ariaDisabled: bool, - @optional @as("aria-hidden") - ariaHidden: bool, - /* [@optional] [@as "aria-invalid"] ariaInvalid: grammar|false|spelling|true, */ - @optional @as("aria-keyshortcuts") - ariaKeyshortcuts: string, - @optional @as("aria-label") - ariaLabel: string, - @optional @as("aria-roledescription") - ariaRoledescription: string, - /* Widget Attributes */ - /* [@optional] [@as "aria-autocomplete"] ariaAutocomplete: inline|list|both|none, */ - /* [@optional] [@as "aria-checked"] ariaChecked: true|false|mixed, /* https://www.w3.org/TR/wai-aria-1.1/#valuetype_tristate */ */ - @optional @as("aria-expanded") - ariaExpanded: bool, - /* [@optional] [@as "aria-haspopup"] ariaHaspopup: false|true|menu|listbox|tree|grid|dialog, */ - @optional @as("aria-level") - ariaLevel: int, - @optional @as("aria-modal") - ariaModal: bool, - @optional @as("aria-multiline") - ariaMultiline: bool, - @optional @as("aria-multiselectable") - ariaMultiselectable: bool, - /* [@optional] [@as "aria-orientation"] ariaOrientation: horizontal|vertical|undefined, */ - @optional @as("aria-placeholder") - ariaPlaceholder: string, - /* [@optional] [@as "aria-pressed"] ariaPressed: true|false|mixed, /* https://www.w3.org/TR/wai-aria-1.1/#valuetype_tristate */ */ - @optional @as("aria-readonly") - ariaReadonly: bool, - @optional @as("aria-required") - ariaRequired: bool, - @optional @as("aria-selected") - ariaSelected: bool, - @optional @as("aria-sort") - ariaSort: string, - @optional @as("aria-valuemax") - ariaValuemax: float, - @optional @as("aria-valuemin") - ariaValuemin: float, - @optional @as("aria-valuenow") - ariaValuenow: float, - @optional @as("aria-valuetext") - ariaValuetext: string, - /* Live Region Attributes */ - @optional @as("aria-atomic") - ariaAtomic: bool, - @optional @as("aria-busy") - ariaBusy: bool, - /* [@optional] [@as "aria-live"] ariaLive: off|polite|assertive|rude, */ - @optional @as("aria-relevant") - ariaRelevant: string, - /* Drag-and-Drop Attributes */ - /* [@optional] [@as "aria-dropeffect"] ariaDropeffect: copy|move|link|execute|popup|none, */ - @optional @as("aria-grabbed") - ariaGrabbed: bool, - /* Relationship Attributes */ - @optional @as("aria-activedescendant") - ariaActivedescendant: string, - @optional @as("aria-colcount") - ariaColcount: int, - @optional @as("aria-colindex") - ariaColindex: int, - @optional @as("aria-colspan") - ariaColspan: int, - @optional @as("aria-controls") - ariaControls: string, - @optional @as("aria-describedby") - ariaDescribedby: string, - @optional @as("aria-errormessage") - ariaErrormessage: string, - @optional @as("aria-flowto") - ariaFlowto: string, - @optional @as("aria-labelledby") - ariaLabelledby: string, - @optional @as("aria-owns") - ariaOwns: string, - @optional @as("aria-posinset") - ariaPosinset: int, - @optional @as("aria-rowcount") - ariaRowcount: int, - @optional @as("aria-rowindex") - ariaRowindex: int, - @optional @as("aria-rowspan") - ariaRowspan: int, - @optional @as("aria-setsize") - ariaSetsize: int, - /* react textarea/input */ - @optional - defaultChecked: bool, - @optional - defaultValue: string, - /* global html attributes */ - @optional - accessKey: string, - @optional - className: string /* substitute for "class" */, - @optional - contentEditable: bool, - @optional - contextMenu: string, - @optional - dir: string /* "ltr", "rtl" or "auto" */, - @optional - draggable: bool, - @optional - hidden: bool, - @optional - id: string, - @optional - lang: string, - @optional - role: string /* ARIA role */, - @optional - style: style, - @optional - spellCheck: bool, - @optional - tabIndex: int, - @optional - title: string, - /* html5 microdata */ - @optional - itemID: string, - @optional - itemProp: string, - @optional - itemRef: string, - @optional - itemScope: bool, - @optional - itemType: string /* uri */, - /* tag-specific html attributes */ - @optional - accept: string, - @optional - acceptCharset: string, - @optional - action: string /* uri */, - @optional - allowFullScreen: bool, - @optional - alt: string, - @optional - async: bool, - @optional - autoComplete: string /* has a fixed, but large-ish, set of possible values */, - @optional - autoCapitalize: string /* Mobile Safari specific */, - @optional - autoFocus: bool, - @optional - autoPlay: bool, - @optional - challenge: string, - @optional - charSet: string, - @optional - checked: bool, - @optional - cite: string /* uri */, - @optional - crossorigin: bool, - @optional - cols: int, - @optional - colSpan: int, - @optional - content: string, - @optional - controls: bool, - @optional - coords: string /* set of values specifying the coordinates of a region */, - @optional - data: string /* uri */, - @optional - dateTime: string /* "valid date string with optional time" */, - @optional - default: bool, - @optional - defer: bool, - @optional - disabled: bool, - @optional - download: string /* should really be either a boolean, signifying presence, or a string */, - @optional - encType: string /* "application/x-www-form-urlencoded", "multipart/form-data" or "text/plain" */, - @optional - form: string, - @optional - formAction: string /* uri */, - @optional - formTarget: string /* "_blank", "_self", etc. */, - @optional - formMethod: string /* "post", "get", "put" */, - @optional - headers: string, - @optional - height: string /* in html5 this can only be a number, but in html4 it can ba a percentage as well */, - @optional - high: int, - @optional - href: string /* uri */, - @optional - hrefLang: string, - @optional - htmlFor: string /* substitute for "for" */, - @optional - httpEquiv: string /* has a fixed set of possible values */, - @optional - icon: string /* uri? */, - @optional - inputMode: string /* "verbatim", "latin", "numeric", etc. */, - @optional - integrity: string, - @optional - keyType: string, - @optional - kind: string /* has a fixed set of possible values */, - @optional - label: string, - @optional - list: string, - @optional - loop: bool, - @optional - low: int, - @optional - manifest: string /* uri */, - @optional - max: string /* should be int or Js.Date.t */, - @optional - maxLength: int, - @optional - media: string /* a valid media query */, - @optional - mediaGroup: string, - @optional - method: string /* "post" or "get" */, - @optional - min: string, - @optional - minLength: int, - @optional - multiple: bool, - @optional - muted: bool, - @optional - name: string, - @optional - nonce: string, - @optional - noValidate: bool, - @optional @as("open") - open_: bool /* use this one. Previous one is deprecated */, - @optional - optimum: int, - @optional - pattern: string /* valid Js RegExp */, - @optional - placeholder: string, - @optional - poster: string /* uri */, - @optional - preload: string /* "none", "metadata" or "auto" (and "" as a synonym for "auto") */, - @optional - radioGroup: string, - @optional - readOnly: bool, - @optional - rel: string /* a space- or comma-separated (depending on the element) list of a fixed set of "link types" */, - @optional - required: bool, - @optional - reversed: bool, - @optional - rows: int, - @optional - rowSpan: int, - @optional - sandbox: string /* has a fixed set of possible values */, - @optional - scope: string /* has a fixed set of possible values */, - @optional - scoped: bool, - @optional - scrolling: string /* html4 only, "auto", "yes" or "no" */, - /* seamless - supported by React, but removed from the html5 spec */ - @optional - selected: bool, - @optional - shape: string, - @optional - size: int, - @optional - sizes: string, - @optional - span: int, - @optional - src: string /* uri */, - @optional - srcDoc: string, - @optional - srcLang: string, - @optional - srcSet: string, - @optional - start: int, - @optional - step: float, - @optional - summary: string /* deprecated */, - @optional - target: string, - @optional @as("type") - type_: string /* has a fixed but large-ish set of possible values */ /* use this one. Previous one is deprecated */, - @optional - useMap: string, - @optional - value: string, - @optional - width: string /* in html5 this can only be a number, but in html4 it can ba a percentage as well */, - @optional - wrap: string /* "hard" or "soft" */, - /* Clipboard events */ - @optional - onCopy: ReactEvent.Clipboard.t => unit, - @optional - onCut: ReactEvent.Clipboard.t => unit, - @optional - onPaste: ReactEvent.Clipboard.t => unit, - /* Composition events */ - @optional - onCompositionEnd: ReactEvent.Composition.t => unit, - @optional - onCompositionStart: ReactEvent.Composition.t => unit, - @optional - onCompositionUpdate: ReactEvent.Composition.t => unit, - /* Keyboard events */ - @optional - onKeyDown: ReactEvent.Keyboard.t => unit, - @optional - onKeyPress: ReactEvent.Keyboard.t => unit, - @optional - onKeyUp: ReactEvent.Keyboard.t => unit, - /* Focus events */ - @optional - onFocus: ReactEvent.Focus.t => unit, - @optional - onBlur: ReactEvent.Focus.t => unit, - /* Form events */ - @optional - onChange: ReactEvent.Form.t => unit, - @optional - onInput: ReactEvent.Form.t => unit, - @optional - onSubmit: ReactEvent.Form.t => unit, - @optional - onInvalid: ReactEvent.Form.t => unit, - /* Mouse events */ - @optional - onClick: ReactEvent.Mouse.t => unit, - @optional - onContextMenu: ReactEvent.Mouse.t => unit, - @optional - onDoubleClick: ReactEvent.Mouse.t => unit, - @optional - onDrag: ReactEvent.Mouse.t => unit, - @optional - onDragEnd: ReactEvent.Mouse.t => unit, - @optional - onDragEnter: ReactEvent.Mouse.t => unit, - @optional - onDragExit: ReactEvent.Mouse.t => unit, - @optional - onDragLeave: ReactEvent.Mouse.t => unit, - @optional - onDragOver: ReactEvent.Mouse.t => unit, - @optional - onDragStart: ReactEvent.Mouse.t => unit, - @optional - onDrop: ReactEvent.Mouse.t => unit, - @optional - onMouseDown: ReactEvent.Mouse.t => unit, - @optional - onMouseEnter: ReactEvent.Mouse.t => unit, - @optional - onMouseLeave: ReactEvent.Mouse.t => unit, - @optional - onMouseMove: ReactEvent.Mouse.t => unit, - @optional - onMouseOut: ReactEvent.Mouse.t => unit, - @optional - onMouseOver: ReactEvent.Mouse.t => unit, - @optional - onMouseUp: ReactEvent.Mouse.t => unit, - /* Selection events */ - @optional - onSelect: ReactEvent.Selection.t => unit, - /* Touch events */ - @optional - onTouchCancel: ReactEvent.Touch.t => unit, - @optional - onTouchEnd: ReactEvent.Touch.t => unit, - @optional - onTouchMove: ReactEvent.Touch.t => unit, - @optional - onTouchStart: ReactEvent.Touch.t => unit, - /* UI events */ - @optional - onScroll: ReactEvent.UI.t => unit, - /* Wheel events */ - @optional - onWheel: ReactEvent.Wheel.t => unit, - /* Media events */ - @optional - onAbort: ReactEvent.Media.t => unit, - @optional - onCanPlay: ReactEvent.Media.t => unit, - @optional - onCanPlayThrough: ReactEvent.Media.t => unit, - @optional - onDurationChange: ReactEvent.Media.t => unit, - @optional - onEmptied: ReactEvent.Media.t => unit, - @optional - onEncrypetd: ReactEvent.Media.t => unit, - @optional - onEnded: ReactEvent.Media.t => unit, - @optional - onError: ReactEvent.Media.t => unit, - @optional - onLoadedData: ReactEvent.Media.t => unit, - @optional - onLoadedMetadata: ReactEvent.Media.t => unit, - @optional - onLoadStart: ReactEvent.Media.t => unit, - @optional - onPause: ReactEvent.Media.t => unit, - @optional - onPlay: ReactEvent.Media.t => unit, - @optional - onPlaying: ReactEvent.Media.t => unit, - @optional - onProgress: ReactEvent.Media.t => unit, - @optional - onRateChange: ReactEvent.Media.t => unit, - @optional - onSeeked: ReactEvent.Media.t => unit, - @optional - onSeeking: ReactEvent.Media.t => unit, - @optional - onStalled: ReactEvent.Media.t => unit, - @optional - onSuspend: ReactEvent.Media.t => unit, - @optional - onTimeUpdate: ReactEvent.Media.t => unit, - @optional - onVolumeChange: ReactEvent.Media.t => unit, - @optional - onWaiting: ReactEvent.Media.t => unit, - /* Image events */ - @optional - onLoad: ReactEvent.Image.t => unit /* duplicate */ /* ~onError: ReactEvent.Image.t => unit=?, */, - /* Animation events */ - @optional - onAnimationStart: ReactEvent.Animation.t => unit, - @optional - onAnimationEnd: ReactEvent.Animation.t => unit, - @optional - onAnimationIteration: ReactEvent.Animation.t => unit, - /* Transition events */ - @optional - onTransitionEnd: ReactEvent.Transition.t => unit, - /* svg */ - @optional - accentHeight: string, - @optional - accumulate: string, - @optional - additive: string, - @optional - alignmentBaseline: string, - @optional - allowReorder: string, - @optional - alphabetic: string, - @optional - amplitude: string, - @optional - arabicForm: string, - @optional - ascent: string, - @optional - attributeName: string, - @optional - attributeType: string, - @optional - autoReverse: string, - @optional - azimuth: string, - @optional - baseFrequency: string, - @optional - baseProfile: string, - @optional - baselineShift: string, - @optional - bbox: string, - @optional @as("begin") - begin_: string /* use this one. Previous one is deprecated */, - @optional - bias: string, - @optional - by: string, - @optional - calcMode: string, - @optional - capHeight: string, - @optional - clip: string, - @optional - clipPath: string, - @optional - clipPathUnits: string, - @optional - clipRule: string, - @optional - colorInterpolation: string, - @optional - colorInterpolationFilters: string, - @optional - colorProfile: string, - @optional - colorRendering: string, - @optional - contentScriptType: string, - @optional - contentStyleType: string, - @optional - cursor: string, - @optional - cx: string, - @optional - cy: string, - @optional - d: string, - @optional - decelerate: string, - @optional - descent: string, - @optional - diffuseConstant: string, - @optional - direction: string, - @optional - display: string, - @optional - divisor: string, - @optional - dominantBaseline: string, - @optional - dur: string, - @optional - dx: string, - @optional - dy: string, - @optional - edgeMode: string, - @optional - elevation: string, - @optional - enableBackground: string, - @optional @as("end") - end_: string /* use this one. Previous one is deprecated */, - @optional - exponent: string, - @optional - externalResourcesRequired: string, - @optional - fill: string, - @optional - fillOpacity: string, - @optional - fillRule: string, - @optional - filter: string, - @optional - filterRes: string, - @optional - filterUnits: string, - @optional - floodColor: string, - @optional - floodOpacity: string, - @optional - focusable: string, - @optional - fontFamily: string, - @optional - fontSize: string, - @optional - fontSizeAdjust: string, - @optional - fontStretch: string, - @optional - fontStyle: string, - @optional - fontVariant: string, - @optional - fontWeight: string, - @optional - fomat: string, - @optional - from: string, - @optional - fx: string, - @optional - fy: string, - @optional - g1: string, - @optional - g2: string, - @optional - glyphName: string, - @optional - glyphOrientationHorizontal: string, - @optional - glyphOrientationVertical: string, - @optional - glyphRef: string, - @optional - gradientTransform: string, - @optional - gradientUnits: string, - @optional - hanging: string, - @optional - horizAdvX: string, - @optional - horizOriginX: string, - @optional - ideographic: string, - @optional - imageRendering: string, - @optional @as("in") - in_: string /* use this one. Previous one is deprecated */, - @optional - in2: string, - @optional - intercept: string, - @optional - k: string, - @optional - k1: string, - @optional - k2: string, - @optional - k3: string, - @optional - k4: string, - @optional - kernelMatrix: string, - @optional - kernelUnitLength: string, - @optional - kerning: string, - @optional - keyPoints: string, - @optional - keySplines: string, - @optional - keyTimes: string, - @optional - lengthAdjust: string, - @optional - letterSpacing: string, - @optional - lightingColor: string, - @optional - limitingConeAngle: string, - @optional - local: string, - @optional - markerEnd: string, - @optional - markerHeight: string, - @optional - markerMid: string, - @optional - markerStart: string, - @optional - markerUnits: string, - @optional - markerWidth: string, - @optional - mask: string, - @optional - maskContentUnits: string, - @optional - maskUnits: string, - @optional - mathematical: string, - @optional - mode: string, - @optional - numOctaves: string, - @optional - offset: string, - @optional - opacity: string, - @optional - operator: string, - @optional - order: string, - @optional - orient: string, - @optional - orientation: string, - @optional - origin: string, - @optional - overflow: string, - @optional - overflowX: string, - @optional - overflowY: string, - @optional - overlinePosition: string, - @optional - overlineThickness: string, - @optional - paintOrder: string, - @optional - panose1: string, - @optional - pathLength: string, - @optional - patternContentUnits: string, - @optional - patternTransform: string, - @optional - patternUnits: string, - @optional - pointerEvents: string, - @optional - points: string, - @optional - pointsAtX: string, - @optional - pointsAtY: string, - @optional - pointsAtZ: string, - @optional - preserveAlpha: string, - @optional - preserveAspectRatio: string, - @optional - primitiveUnits: string, - @optional - r: string, - @optional - radius: string, - @optional - refX: string, - @optional - refY: string, - @optional - renderingIntent: string, - @optional - repeatCount: string, - @optional - repeatDur: string, - @optional - requiredExtensions: string, - @optional - requiredFeatures: string, - @optional - restart: string, - @optional - result: string, - @optional - rotate: string, - @optional - rx: string, - @optional - ry: string, - @optional - scale: string, - @optional - seed: string, - @optional - shapeRendering: string, - @optional - slope: string, - @optional - spacing: string, - @optional - specularConstant: string, - @optional - specularExponent: string, - @optional - speed: string, - @optional - spreadMethod: string, - @optional - startOffset: string, - @optional - stdDeviation: string, - @optional - stemh: string, - @optional - stemv: string, - @optional - stitchTiles: string, - @optional - stopColor: string, - @optional - stopOpacity: string, - @optional - strikethroughPosition: string, - @optional - strikethroughThickness: string, - @optional - string: string, - @optional - stroke: string, - @optional - strokeDasharray: string, - @optional - strokeDashoffset: string, - @optional - strokeLinecap: string, - @optional - strokeLinejoin: string, - @optional - strokeMiterlimit: string, - @optional - strokeOpacity: string, - @optional - strokeWidth: string, - @optional - surfaceScale: string, - @optional - systemLanguage: string, - @optional - tableValues: string, - @optional - targetX: string, - @optional - targetY: string, - @optional - textAnchor: string, - @optional - textDecoration: string, - @optional - textLength: string, - @optional - textRendering: string, - @optional @as("to") - to_: string /* use this one. Previous one is deprecated */, - @optional - transform: string, - @optional - u1: string, - @optional - u2: string, - @optional - underlinePosition: string, - @optional - underlineThickness: string, - @optional - unicode: string, - @optional - unicodeBidi: string, - @optional - unicodeRange: string, - @optional - unitsPerEm: string, - @optional - vAlphabetic: string, - @optional - vHanging: string, - @optional - vIdeographic: string, - @optional - vMathematical: string, - @optional - values: string, - @optional - vectorEffect: string, - @optional - version: string, - @optional - vertAdvX: string, - @optional - vertAdvY: string, - @optional - vertOriginX: string, - @optional - vertOriginY: string, - @optional - viewBox: string, - @optional - viewTarget: string, - @optional - visibility: string, - /* width::string? => */ - @optional - widths: string, - @optional - wordSpacing: string, - @optional - writingMode: string, - @optional - x: string, - @optional - x1: string, - @optional - x2: string, - @optional - xChannelSelector: string, - @optional - xHeight: string, - @optional - xlinkActuate: string, - @optional - xlinkArcrole: string, - @optional - xlinkHref: string, - @optional - xlinkRole: string, - @optional - xlinkShow: string, - @optional - xlinkTitle: string, - @optional - xlinkType: string, - @optional - xmlns: string, - @optional - xmlnsXlink: string, - @optional - xmlBase: string, - @optional - xmlLang: string, - @optional - xmlSpace: string, - @optional - y: string, - @optional - y1: string, - @optional - y2: string, - @optional - yChannelSelector: string, - @optional - z: string, - @optional - zoomAndPan: string, - /* RDFa */ - @optional - about: string, - @optional - datatype: string, - @optional - inlist: string, - @optional - prefix: string, - @optional - property: string, - @optional - resource: string, - @optional - typeof: string, - @optional - vocab: string, - /* react-specific */ - @optional - dangerouslySetInnerHTML: {"__html": string}, - @optional - suppressContentEditableWarning: bool, -} - -external objToDOMProps: {..} => props = "%identity" - -@deprecated("Please use ReactDOMRe.props instead") -type reactDOMProps = props - -@variadic @val @module("react") -external createElement: (string, ~props: props=?, array) => React.element = - "createElement" - -/* Only wanna expose createElementVariadic here. Don't wanna write an interface file */ -include ( - /* Use varargs to avoid the ReactJS warning for duplicate keys in children */ - { - @val @module("react") - external createElementInternalHack: 'a = "createElement" - @send - external apply: ('theFunction, 'theContext, 'arguments) => 'returnTypeOfTheFunction = "apply" - - let createElementVariadic = (domClassName, ~props=?, children) => { - let variadicArguments = Js.Array.concat(children, [Obj.magic(domClassName), Obj.magic(props)]) - createElementInternalHack->apply(Js.Nullable.null, variadicArguments) - } - }: { - let createElementVariadic: (string, ~props: props=?, array) => React.element - } -) - -module Style = { - type t = style - @obj - external make: ( - ~azimuth: string=?, - ~background: string=?, - ~backgroundAttachment: string=?, - ~backgroundColor: string=?, - ~backgroundImage: string=?, - ~backgroundPosition: string=?, - ~backgroundRepeat: string=?, - ~border: string=?, - ~borderCollapse: string=?, - ~borderColor: string=?, - ~borderSpacing: string=?, - ~borderStyle: string=?, - ~borderTop: string=?, - ~borderRight: string=?, - ~borderBottom: string=?, - ~borderLeft: string=?, - ~borderTopColor: string=?, - ~borderRightColor: string=?, - ~borderBottomColor: string=?, - ~borderLeftColor: string=?, - ~borderTopStyle: string=?, - ~borderRightStyle: string=?, - ~borderBottomStyle: string=?, - ~borderLeftStyle: string=?, - ~borderTopWidth: string=?, - ~borderRightWidth: string=?, - ~borderBottomWidth: string=?, - ~borderLeftWidth: string=?, - ~borderWidth: string=?, - ~bottom: string=?, - ~captionSide: string=?, - ~clear: string=?, - ~clip: string=?, - ~color: string=?, - ~content: string=?, - ~counterIncrement: string=?, - ~counterReset: string=?, - ~cue: string=?, - ~cueAfter: string=?, - ~cueBefore: string=?, - ~cursor: string=?, - ~direction: string=?, - ~display: string=?, - ~elevation: string=?, - ~emptyCells: string=?, - ~float: string=?, - ~font: string=?, - ~fontFamily: string=?, - ~fontSize: string=?, - ~fontSizeAdjust: string=?, - ~fontStretch: string=?, - ~fontStyle: string=?, - ~fontVariant: string=?, - ~fontWeight: string=?, - ~height: string=?, - ~left: string=?, - ~letterSpacing: string=?, - ~lineHeight: string=?, - ~listStyle: string=?, - ~listStyleImage: string=?, - ~listStylePosition: string=?, - ~listStyleType: string=?, - ~margin: string=?, - ~marginTop: string=?, - ~marginRight: string=?, - ~marginBottom: string=?, - ~marginLeft: string=?, - ~markerOffset: string=?, - ~marks: string=?, - ~maxHeight: string=?, - ~maxWidth: string=?, - ~minHeight: string=?, - ~minWidth: string=?, - ~orphans: string=?, - ~outline: string=?, - ~outlineColor: string=?, - ~outlineStyle: string=?, - ~outlineWidth: string=?, - ~overflow: string=?, - ~overflowX: string=?, - ~overflowY: string=?, - ~padding: string=?, - ~paddingTop: string=?, - ~paddingRight: string=?, - ~paddingBottom: string=?, - ~paddingLeft: string=?, - ~page: string=?, - ~pageBreakAfter: string=?, - ~pageBreakBefore: string=?, - ~pageBreakInside: string=?, - ~pause: string=?, - ~pauseAfter: string=?, - ~pauseBefore: string=?, - ~pitch: string=?, - ~pitchRange: string=?, - ~playDuring: string=?, - ~position: string=?, - ~quotes: string=?, - ~richness: string=?, - ~right: string=?, - ~size: string=?, - ~speak: string=?, - ~speakHeader: string=?, - ~speakNumeral: string=?, - ~speakPunctuation: string=?, - ~speechRate: string=?, - ~stress: string=?, - ~tableLayout: string=?, - ~textAlign: string=?, - ~textDecoration: string=?, - ~textIndent: string=?, - ~textShadow: string=?, - ~textTransform: string=?, - ~top: string=?, - ~unicodeBidi: string=?, - ~verticalAlign: string=?, - ~visibility: string=?, - ~voiceFamily: string=?, - ~volume: string=?, - ~whiteSpace: string=?, - ~widows: string=?, - ~width: string=?, - ~wordSpacing: string=?, - ~zIndex: string=?, - ~opacity: /* Below properties based on https://www.w3.org/Style/CSS/all-properties */ - /* Color Level 3 - REC */ - string=?, - ~backgroundOrigin: /* Backgrounds and Borders Level 3 - CR */ - /* backgroundRepeat - already defined by CSS2Properties */ - /* backgroundAttachment - already defined by CSS2Properties */ - string=?, - ~backgroundSize: string=?, - ~backgroundClip: string=?, - ~borderRadius: string=?, - ~borderTopLeftRadius: string=?, - ~borderTopRightRadius: string=?, - ~borderBottomLeftRadius: string=?, - ~borderBottomRightRadius: string=?, - ~borderImage: string=?, - ~borderImageSource: string=?, - ~borderImageSlice: string=?, - ~borderImageWidth: string=?, - ~borderImageOutset: string=?, - ~borderImageRepeat: string=?, - ~boxShadow: string=?, - ~columns: /* Multi-column Layout - CR */ - string=?, - ~columnCount: string=?, - ~columnFill: string=?, - ~columnGap: string=?, - ~columnRule: string=?, - ~columnRuleColor: string=?, - ~columnRuleStyle: string=?, - ~columnRuleWidth: string=?, - ~columnSpan: string=?, - ~columnWidth: string=?, - ~breakAfter: string=?, - ~breakBefore: string=?, - ~breakInside: string=?, - ~rest: /* Speech - CR */ - string=?, - ~restAfter: string=?, - ~restBefore: string=?, - ~speakAs: string=?, - ~voiceBalance: string=?, - ~voiceDuration: string=?, - ~voicePitch: string=?, - ~voiceRange: string=?, - ~voiceRate: string=?, - ~voiceStress: string=?, - ~voiceVolume: string=?, - ~objectFit: /* Image Values and Replaced Content Level 3 - CR */ - string=?, - ~objectPosition: string=?, - ~imageResolution: string=?, - ~imageOrientation: string=?, - ~alignContent: /* Flexible Box Layout - CR */ - string=?, - ~alignItems: string=?, - ~alignSelf: string=?, - ~flex: string=?, - ~flexBasis: string=?, - ~flexDirection: string=?, - ~flexFlow: string=?, - ~flexGrow: string=?, - ~flexShrink: string=?, - ~flexWrap: string=?, - ~justifyContent: string=?, - ~order: string=?, - ~textDecorationColor: /* Text Decoration Level 3 - CR */ - /* textDecoration - already defined by CSS2Properties */ - string=?, - ~textDecorationLine: string=?, - ~textDecorationSkip: string=?, - ~textDecorationStyle: string=?, - ~textEmphasis: string=?, - ~textEmphasisColor: string=?, - ~textEmphasisPosition: string=?, - ~textEmphasisStyle: string=?, - ~textUnderlinePosition: /* textShadow - already defined by CSS2Properties */ - string=?, - ~fontFeatureSettings: /* Fonts Level 3 - CR */ - string=?, - ~fontKerning: string=?, - ~fontLanguageOverride: string=?, - ~fontSynthesis: /* fontSizeAdjust - already defined by CSS2Properties */ - /* fontStretch - already defined by CSS2Properties */ - string=?, - ~forntVariantAlternates: string=?, - ~fontVariantCaps: string=?, - ~fontVariantEastAsian: string=?, - ~fontVariantLigatures: string=?, - ~fontVariantNumeric: string=?, - ~fontVariantPosition: string=?, - ~all: /* Cascading and Inheritance Level 3 - CR */ - string=?, - ~glyphOrientationVertical: /* Writing Modes Level 3 - CR */ - string=?, - ~textCombineUpright: string=?, - ~textOrientation: string=?, - ~writingMode: string=?, - ~shapeImageThreshold: /* Shapes Level 1 - CR */ - string=?, - ~shapeMargin: string=?, - ~shapeOutside: string=?, - ~clipPath: /* Masking Level 1 - CR */ - string=?, - ~clipRule: string=?, - ~mask: string=?, - ~maskBorder: string=?, - ~maskBorderMode: string=?, - ~maskBorderOutset: string=?, - ~maskBorderRepeat: string=?, - ~maskBorderSlice: string=?, - ~maskBorderSource: string=?, - ~maskBorderWidth: string=?, - ~maskClip: string=?, - ~maskComposite: string=?, - ~maskImage: string=?, - ~maskMode: string=?, - ~maskOrigin: string=?, - ~maskPosition: string=?, - ~maskRepeat: string=?, - ~maskSize: string=?, - ~maskType: string=?, - ~backgroundBlendMode: /* Compositing and Blending Level 1 - CR */ - string=?, - ~isolation: string=?, - ~mixBlendMode: string=?, - ~boxDecorationBreak: /* Fragmentation Level 3 - CR */ - string=?, - ~boxSizing: /* breakAfter - already defined by Multi-column Layout */ - /* breakBefore - already defined by Multi-column Layout */ - /* breakInside - already defined by Multi-column Layout */ - /* Basic User Interface Level 3 - CR */ - string=?, - ~caretColor: string=?, - ~navDown: string=?, - ~navLeft: string=?, - ~navRight: string=?, - ~navUp: string=?, - ~outlineOffset: string=?, - ~resize: string=?, - ~textOverflow: string=?, - ~grid: /* Grid Layout Level 1 - CR */ - string=?, - ~gridArea: string=?, - ~gridAutoColumns: string=?, - ~gridAutoFlow: string=?, - ~gridAutoRows: string=?, - ~gridColumn: string=?, - ~gridColumnEnd: string=?, - ~gridColumnGap: string=?, - ~gridColumnStart: string=?, - ~gridGap: string=?, - ~gridRow: string=?, - ~gridRowEnd: string=?, - ~gridRowGap: string=?, - ~gridRowStart: string=?, - ~gridTemplate: string=?, - ~gridTemplateAreas: string=?, - ~gridTemplateColumns: string=?, - ~gridTemplateRows: string=?, - ~willChange: /* Will Change Level 1 - CR */ - string=?, - ~hangingPunctuation: /* Text Level 3 - LC */ - string=?, - ~hyphens: string=?, - ~lineBreak: /* letterSpacing - already defined by CSS2Properties */ - string=?, - ~overflowWrap: string=?, - ~tabSize: string=?, - ~textAlignLast: /* textAlign - already defined by CSS2Properties */ - string=?, - ~textJustify: string=?, - ~wordBreak: string=?, - ~wordWrap: string=?, - ~animation: /* Animations - WD */ - string=?, - ~animationDelay: string=?, - ~animationDirection: string=?, - ~animationDuration: string=?, - ~animationFillMode: string=?, - ~animationIterationCount: string=?, - ~animationName: string=?, - ~animationPlayState: string=?, - ~animationTimingFunction: string=?, - ~transition: /* Transitions - WD */ - string=?, - ~transitionDelay: string=?, - ~transitionDuration: string=?, - ~transitionProperty: string=?, - ~transitionTimingFunction: string=?, - ~backfaceVisibility: /* Transforms Level 1 - WD */ - string=?, - ~perspective: string=?, - ~perspectiveOrigin: string=?, - ~transform: string=?, - ~transformOrigin: string=?, - ~transformStyle: string=?, - ~justifyItems: /* Box Alignment Level 3 - WD */ - /* alignContent - already defined by Flexible Box Layout */ - /* alignItems - already defined by Flexible Box Layout */ - string=?, - ~justifySelf: string=?, - ~placeContent: string=?, - ~placeItems: string=?, - ~placeSelf: string=?, - ~appearance: /* Basic User Interface Level 4 - FPWD */ - string=?, - ~caret: string=?, - ~caretAnimation: string=?, - ~caretShape: string=?, - ~userSelect: string=?, - ~maxLines: /* Overflow Level 3 - WD */ - string=?, - ~marqueeDirection: /* Basix Box Model - WD */ - string=?, - ~marqueeLoop: string=?, - ~marqueeSpeed: string=?, - ~marqueeStyle: string=?, - ~overflowStyle: string=?, - ~rotation: string=?, - ~rotationPoint: string=?, - ~alignmentBaseline: /* SVG 1.1 - REC */ - string=?, - ~baselineShift: string=?, - ~clip: string=?, - ~clipPath: string=?, - ~clipRule: string=?, - ~colorInterpolation: string=?, - ~colorInterpolationFilters: string=?, - ~colorProfile: string=?, - ~colorRendering: string=?, - ~cursor: string=?, - ~dominantBaseline: string=?, - ~fill: string=?, - ~fillOpacity: string=?, - ~fillRule: string=?, - ~filter: string=?, - ~floodColor: string=?, - ~floodOpacity: string=?, - ~glyphOrientationHorizontal: string=?, - ~glyphOrientationVertical: string=?, - ~imageRendering: string=?, - ~kerning: string=?, - ~lightingColor: string=?, - ~markerEnd: string=?, - ~markerMid: string=?, - ~markerStart: string=?, - ~pointerEvents: string=?, - ~shapeRendering: string=?, - ~stopColor: string=?, - ~stopOpacity: string=?, - ~stroke: string=?, - ~strokeDasharray: string=?, - ~strokeDashoffset: string=?, - ~strokeLinecap: string=?, - ~strokeLinejoin: string=?, - ~strokeMiterlimit: string=?, - ~strokeOpacity: string=?, - ~strokeWidth: string=?, - ~textAnchor: string=?, - ~textRendering: string=?, - ~rubyAlign: /* Ruby Layout Level 1 - WD */ - string=?, - ~rubyMerge: string=?, - ~rubyPosition: string=?, - /* Lists and Counters Level 3 - WD */ - /* listStyle - already defined by CSS2Properties */ - /* listStyleImage - already defined by CSS2Properties */ - /* listStylePosition - already defined by CSS2Properties */ - /* listStyleType - already defined by CSS2Properties */ - /* counterIncrement - already defined by CSS2Properties */ - /* counterReset - already defined by CSS2Properties */ - /* Not added yet - * ------------- - * Generated Content for Paged Media - WD - * Generated Content Level 3 - WD - * Line Grid Level 1 - WD - * Regions - WD - * Inline Layout Level 3 - WD - * Round Display Level 1 - WD - * Image Values and Replaced Content Level 4 - WD - * Positioned Layout Level 3 - WD - * Filter Effects Level 1 - -WD - * Exclusions Level 1 - WD - * Text Level 4 - FPWD - * SVG Markers - FPWD - * Motion Path Level 1 - FPWD - * Color Level 4 - FPWD - * SVG Strokes - FPWD - * Table Level 3 - FPWD - */ - unit, - ) => style = "" - /* CSS2Properties: https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties */ - @val - external combine: (@as(json`{}`) _, style, style) => t = "Object.assign" - - external _dictToStyle: dict => style = "%identity" - - let unsafeAddProp = (style, key, value) => { - let dict = Js.Dict.empty() - Js.Dict.set(dict, key, value) - combine(style, _dictToStyle(dict)) - } - - @val - external unsafeAddStyle: (@as(json`{}`) _, style, {..}) => style = "Object.assign" -} diff --git a/tests/tests/src/reactDOMServerRe.mjs b/tests/tests/src/reactDOMServer.mjs similarity index 100% rename from tests/tests/src/reactDOMServerRe.mjs rename to tests/tests/src/reactDOMServer.mjs diff --git a/tests/tests/src/reactDOMServerRe.res b/tests/tests/src/reactDOMServer.res similarity index 69% rename from tests/tests/src/reactDOMServerRe.res rename to tests/tests/src/reactDOMServer.res index 8758a6d143..d50ddc14fe 100644 --- a/tests/tests/src/reactDOMServerRe.res +++ b/tests/tests/src/reactDOMServer.res @@ -1,5 +1,5 @@ -@val @module("react-dom/server") +@module("react-dom/server") external renderToString: React.element => string = "renderToString" -@val @module("react-dom/server") +@module("react-dom/server") external renderToStaticMarkup: React.element => string = "renderToStaticMarkup"