From ebb1bc33317abf16d555840d4cc6c2e900a75fdb Mon Sep 17 00:00:00 2001 From: Diego Fonseca <58647349+Just-Feeshy@users.noreply.github.com> Date: Sun, 2 Jul 2023 06:39:53 -0400 Subject: [PATCH 1/9] Implemented StrictMode into React --- src/lib/react/React.hx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/lib/react/React.hx b/src/lib/react/React.hx index fa7ade1..43e0ad0 100644 --- a/src/lib/react/React.hx +++ b/src/lib/react/React.hx @@ -59,6 +59,13 @@ extern class React public static function forwardRef(render:TProps->ReactRef->ReactElement):CreateElementType; #end + /** + https://react.dev/reference/react/StrictMode + + Note: this API has been introduced in React 16.3 + **/ + public static var StrictMode:CreateElementType; + /** https://facebook.github.io/react/docs/react-api.html#react.children **/ From e09ba6955f45bdc116e78fb4cd9fad68d596af1f Mon Sep 17 00:00:00 2001 From: Diego Fonseca <58647349+Just-Feeshy@users.noreply.github.com> Date: Mon, 3 Jul 2023 23:56:15 -0400 Subject: [PATCH 2/9] jsImport --- src/lib/react/React.hx | 7 +++++++ src/lib/react/ReactComponent.hx | 7 +++++++ src/lib/react/ReactDOM.hx | 6 ++++++ src/lib/react/ReactDOMServer.hx | 6 ++++++ 4 files changed, 26 insertions(+) diff --git a/src/lib/react/React.hx b/src/lib/react/React.hx index 43e0ad0..6d42637 100644 --- a/src/lib/react/React.hx +++ b/src/lib/react/React.hx @@ -5,10 +5,17 @@ import react.ReactComponent.ReactElement; /** https://facebook.github.io/react/docs/react-api.html **/ + +#if (jsImport) +@:js.import(@default "react") +#else + #if (!react_global) @:jsRequire("react") #end + @:native('React') +#end extern class React { // Warning: react.React.PropTypes is deprecated, reference as react.ReactPropTypes diff --git a/src/lib/react/ReactComponent.hx b/src/lib/react/ReactComponent.hx index a49716b..3dc7ddb 100644 --- a/src/lib/react/ReactComponent.hx +++ b/src/lib/react/ReactComponent.hx @@ -24,10 +24,17 @@ typedef ReactComponentOfState = ReactComponentOf; // Keep the old ReactComponentOfPropsAndState typedef available a few versions typedef ReactComponentOfPropsAndState = ReactComponentOf; +#if (jsImport) +@:js.import(@default "react") +#else + #if (!react_global) @:jsRequire("react", "Component") #end @:native('React.Component') + +#end + @:keepSub @:autoBuild(react.ReactComponentMacro.build()) extern class ReactComponentOf diff --git a/src/lib/react/ReactDOM.hx b/src/lib/react/ReactDOM.hx index 3131e61..fad9976 100644 --- a/src/lib/react/ReactDOM.hx +++ b/src/lib/react/ReactDOM.hx @@ -6,10 +6,16 @@ import js.html.Element; /** https://facebook.github.io/react/docs/react-dom.html **/ + +#if (jsImport) +@:js.import(@default "react") +#else + #if (!react_global) @:jsRequire("react-dom") #end @:native('ReactDOM') +#end extern class ReactDOM { /** diff --git a/src/lib/react/ReactDOMServer.hx b/src/lib/react/ReactDOMServer.hx index 7c91eaa..95be7a5 100644 --- a/src/lib/react/ReactDOMServer.hx +++ b/src/lib/react/ReactDOMServer.hx @@ -13,10 +13,16 @@ class ReactMarkupReadableStream extends Readable {} /** https://facebook.github.io/react/docs/react-dom-server.html **/ + +#if (jsImport) +@:js.import(@default "react") +#else + #if (!react_global) @:jsRequire('react-dom/server') #end @:native('ReactDOMServer') +#end extern class ReactDOMServer { /** From b8b62fa59115b687684c429c2166dc12be0f4fd4 Mon Sep 17 00:00:00 2001 From: Diego Fonseca <58647349+Just-Feeshy@users.noreply.github.com> Date: Tue, 4 Jul 2023 00:12:54 -0400 Subject: [PATCH 3/9] Fix unproper js.import This commit is suppose to help with Haxe being able to support other JS frameworks like WebPacket, NextJs, and Vite. --- src/lib/react/ReactComponent.hx | 2 +- src/lib/react/ReactDOM.hx | 2 +- src/lib/react/ReactDOMServer.hx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/react/ReactComponent.hx b/src/lib/react/ReactComponent.hx index 3dc7ddb..20cee97 100644 --- a/src/lib/react/ReactComponent.hx +++ b/src/lib/react/ReactComponent.hx @@ -25,7 +25,7 @@ typedef ReactComponentOfState = ReactComponentOf; typedef ReactComponentOfPropsAndState = ReactComponentOf; #if (jsImport) -@:js.import(@default "react") +@:js.import(@default "react.Component") #else #if (!react_global) diff --git a/src/lib/react/ReactDOM.hx b/src/lib/react/ReactDOM.hx index fad9976..1a9b444 100644 --- a/src/lib/react/ReactDOM.hx +++ b/src/lib/react/ReactDOM.hx @@ -8,7 +8,7 @@ import js.html.Element; **/ #if (jsImport) -@:js.import(@default "react") +@:js.import(@default "react-dom") #else #if (!react_global) diff --git a/src/lib/react/ReactDOMServer.hx b/src/lib/react/ReactDOMServer.hx index 95be7a5..30d1706 100644 --- a/src/lib/react/ReactDOMServer.hx +++ b/src/lib/react/ReactDOMServer.hx @@ -15,7 +15,7 @@ class ReactMarkupReadableStream extends Readable {} **/ #if (jsImport) -@:js.import(@default "react") +@:js.import(@default "react-dom/server") #else #if (!react_global) From dabff54e9820e1bfa9a8a0dd5c80d9df9f718180 Mon Sep 17 00:00:00 2001 From: Diego Fonseca <58647349+Just-Feeshy@users.noreply.github.com> Date: Tue, 4 Jul 2023 00:22:12 -0400 Subject: [PATCH 4/9] Removing jsImport from react.Compont react.Component isn't a main is suppose to be imported directly. --- src/lib/react/ReactComponent.hx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/lib/react/ReactComponent.hx b/src/lib/react/ReactComponent.hx index 20cee97..a49716b 100644 --- a/src/lib/react/ReactComponent.hx +++ b/src/lib/react/ReactComponent.hx @@ -24,17 +24,10 @@ typedef ReactComponentOfState = ReactComponentOf; // Keep the old ReactComponentOfPropsAndState typedef available a few versions typedef ReactComponentOfPropsAndState = ReactComponentOf; -#if (jsImport) -@:js.import(@default "react.Component") -#else - #if (!react_global) @:jsRequire("react", "Component") #end @:native('React.Component') - -#end - @:keepSub @:autoBuild(react.ReactComponentMacro.build()) extern class ReactComponentOf From fa065d04b6b8b929713ea998f2c9f461facadca0 Mon Sep 17 00:00:00 2001 From: Diego Fonseca <58647349+Just-Feeshy@users.noreply.github.com> Date: Tue, 4 Jul 2023 02:26:11 -0400 Subject: [PATCH 5/9] Implemented useState and useEffect Modernized by adding `useState` and `useEffect` --- src/lib/react/React.hx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/lib/react/React.hx b/src/lib/react/React.hx index 6d42637..da6ad30 100644 --- a/src/lib/react/React.hx +++ b/src/lib/react/React.hx @@ -35,6 +35,18 @@ extern class React **/ public static function isValidElement(object:Dynamic):Bool; + /** + https://react.dev/reference/react/useState + Note: this API has been introduced in React 16.8 + **/ + public static function useState(initialValue:T):Array; + + /** + https://react.dev/reference/react/useEffect' + Note: this API has been introduced in React 16.8 + **/ + public static function useEffect(effect:Void->Void, ?inputs:Array):Void; + #if react_context_api /** https://reactjs.org/docs/context.html#reactcreatecontext From fcfd10fa45944cb08c03a53f7df924b46db8b4c3 Mon Sep 17 00:00:00 2001 From: Diego Fonseca <58647349+Just-Feeshy@users.noreply.github.com> Date: Tue, 4 Jul 2023 13:04:12 -0400 Subject: [PATCH 6/9] Fixed jsImport with ReactComponent --- src/lib/react/ReactComponent.hx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/lib/react/ReactComponent.hx b/src/lib/react/ReactComponent.hx index a49716b..bc4a2f9 100644 --- a/src/lib/react/ReactComponent.hx +++ b/src/lib/react/ReactComponent.hx @@ -24,10 +24,16 @@ typedef ReactComponentOfState = ReactComponentOf; // Keep the old ReactComponentOfPropsAndState typedef available a few versions typedef ReactComponentOfPropsAndState = ReactComponentOf; +#if (jsImport) +@:js.import("react", "Component") +#else + #if (!react_global) @:jsRequire("react", "Component") #end @:native('React.Component') +#end + @:keepSub @:autoBuild(react.ReactComponentMacro.build()) extern class ReactComponentOf From f406ed214b03973b8538aada3b9bd49e8d8ef16b Mon Sep 17 00:00:00 2001 From: Diego Fonseca <58647349+Just-Feeshy@users.noreply.github.com> Date: Wed, 19 Jul 2023 23:32:54 -0400 Subject: [PATCH 7/9] There is no point for these There is no point of having both useEffect and useState since I find using the ReactHooks much easier to work with. --- src/lib/react/React.hx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/lib/react/React.hx b/src/lib/react/React.hx index da6ad30..6d42637 100644 --- a/src/lib/react/React.hx +++ b/src/lib/react/React.hx @@ -35,18 +35,6 @@ extern class React **/ public static function isValidElement(object:Dynamic):Bool; - /** - https://react.dev/reference/react/useState - Note: this API has been introduced in React 16.8 - **/ - public static function useState(initialValue:T):Array; - - /** - https://react.dev/reference/react/useEffect' - Note: this API has been introduced in React 16.8 - **/ - public static function useEffect(effect:Void->Void, ?inputs:Array):Void; - #if react_context_api /** https://reactjs.org/docs/context.html#reactcreatecontext From d6caad60f69c4b62fbce02376188fd8bf833f7c1 Mon Sep 17 00:00:00 2001 From: Diego Fonseca Date: Fri, 28 Jul 2023 13:55:25 -0400 Subject: [PATCH 8/9] Implement ReactDOMClient for React v18 --- src/lib/react/ReactDOMClient.hx | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/lib/react/ReactDOMClient.hx diff --git a/src/lib/react/ReactDOMClient.hx b/src/lib/react/ReactDOMClient.hx new file mode 100644 index 0000000..5361f96 --- /dev/null +++ b/src/lib/react/ReactDOMClient.hx @@ -0,0 +1,22 @@ +package react; + +import js.html.Element; + +/** + Note: this API has been introduced in React 18 +**/ + +#if jsImport +@:js.import(@default "react-dom/client") +#else + +#if (!react_global) +@:jsRequire("react-dom/client") +#end + +@:native('ReactDOMClient') +#end +extern class ReactDOMClient { + public static function createRoot(container:Element, ?options:Null):Dynamic; + public static function hydrateRoot(container:Element, children:ReactElement, ?options:Null):Dynamic; +} \ No newline at end of file From ebe25dec89c9c8b368e4c528ebf6ee700fc1d9c0 Mon Sep 17 00:00:00 2001 From: Diego Fonseca Date: Fri, 28 Jul 2023 14:02:56 -0400 Subject: [PATCH 9/9] Fixed potential issue --- src/lib/react/ReactDOMClient.hx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/react/ReactDOMClient.hx b/src/lib/react/ReactDOMClient.hx index 5361f96..012b760 100644 --- a/src/lib/react/ReactDOMClient.hx +++ b/src/lib/react/ReactDOMClient.hx @@ -1,6 +1,7 @@ package react; import js.html.Element; +import react.ReactComponent.ReactElement; /** Note: this API has been introduced in React 18