diff --git a/Documentation/assets/render-react-php-file-processed.png b/Documentation/assets/render-react-php-file-processed.png index 3b0c1eb..fe7158d 100644 Binary files a/Documentation/assets/render-react-php-file-processed.png and b/Documentation/assets/render-react-php-file-processed.png differ diff --git a/Documentation/how-to-dev.md b/Documentation/how-to-dev.md index 5f8b59a..68599a2 100644 --- a/Documentation/how-to-dev.md +++ b/Documentation/how-to-dev.md @@ -62,20 +62,19 @@ As our views are now done using react (and defined under the `front/views` folde If you look at the `send_react_front($viewURI, $viewArguments)` function, you'll see that is simply loads the file `src/react-display-file.php` with given arguments. The file is a simple html5 template with a ` ``` @@ -84,11 +83,8 @@ here's how it renders if you do a request to `http://localhost:8080/`. ![](assets/render-react-php-file-processed.png) The index.php's router says that for a `GET` on the `/` url, we call the `SampleFormController#displayForm` method. This method then uses the `send_react_front`, to render the `views/SampleForm.tsx` react element, with no arguments (an empty array). -You can see that the react view is rendered using a `render` function. -This function **must figure in the view's file, and be exported**. -We'll talk about an important coding convention with react views that this script block requires later. +The view file **must export by default its react function component**. -But now let's talk about our server profiles ! ## Server Profiles If you go on the staging server, you'll see that, for the exact same request equivalent, the generated `src/render-display-file` file changes : ![](assets/staging-server-render-react-php-file-processed.png) @@ -107,11 +103,15 @@ the file is replaced with `prod-config-file.php` by the CI when deploying to the The two profiles declares an `_asset(string $uri)` function, used by the `/config.php::asset` method, but with different implementations : ### Development profile ```php -const FRONT_URL_CONSTANT = "http://localhost:5173"; +$hostname = getHostName(); +$front_url = "http://$hostname:5173"; function _asset(string $assetURI): string { - return FRONT_URL_CONSTANT . "/" . $assetURI; + global $front_url; + return $front_url . "/" . $assetURI; } + + ``` The simplest profile, simply redirect all assets to the development server @@ -148,60 +148,3 @@ __any react view file__ should __export__ a function with signature `render(argu The `arguments` parameter is used to pass data to the react component. If you take a look at the `front/views/SampleForm.tsx` view, here's the definition of its render function : - -```ts -/// Here's the definition of the view -function SampleForm() { - ... react jsx code here -} - -// the `SampleForm` does not inputs arguments but the parameter IS STILL REQUIRED -export function render(args: any) { - const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement - ); - root.render( - - //here's our view component - - ); -} -``` - -## Pass arguments to our react views -We'll take the example of the view in charge of displaying the SimpleForm's fields values. -First, let's take a look at its React Component definition : - -```ts -function DisplayResults({password, username}: any) { - return ( -
-

username: {username}

//arguments are used heres -

password: {password}

-
- ) -} -``` - -The components takes two arguments, an `username` and a `password` string. - -Now, let's take a look at its `render` function : -```ts -export function render(args: any) { - const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement - ); - root.render( - - - - ); -} -``` -especially this line: -``` - -``` -`DisplayResults` is the name of our React Component (the function). -To pass arguments to the `DisplayResults` function, we use the syntax `={value}`. (somewhat like regular html/xml components). -Use the render's function `args` parameter to access to the php's array values. diff --git a/config.php b/config.php index b2241d8..11e7c2c 100644 --- a/config.php +++ b/config.php @@ -5,6 +5,8 @@ // Please do not touch. require /*PROFILE_FILE*/ "profiles/dev-config-profile.php"; +CONST SUPPORTS_FAST_REFRESH = _SUPPORTS_FAST_REFRESH; + /** * Maps the given relative source uri (relative to the `/front` folder) to its actual location depending on imported profile. * @param string $assetURI relative uri path from `/front` folder @@ -14,3 +16,4 @@ function asset(string $assetURI): string { return _asset($assetURI); } + diff --git a/front/ViewRenderer.tsx b/front/ViewRenderer.tsx new file mode 100644 index 0000000..ffaf886 --- /dev/null +++ b/front/ViewRenderer.tsx @@ -0,0 +1,19 @@ +import ReactDOM from "react-dom/client"; +import React, {FunctionComponent} from "react"; + +/** + * Dynamically renders a React component, with given arguments + * @param Component the react component to render + * @param args the arguments to pass to the react component. + */ +export function renderView(Component: FunctionComponent, args: {}) { + const root = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement + ); + + root.render( + + + + ); +} \ No newline at end of file diff --git a/front/views/DisplayResults.tsx b/front/views/DisplayResults.tsx index 355466c..faf5e28 100644 --- a/front/views/DisplayResults.tsx +++ b/front/views/DisplayResults.tsx @@ -2,7 +2,7 @@ import ReactDOM from "react-dom/client"; import React from "react"; -function DisplayResults({password, username}: any) { +export default function DisplayResults({password, username}: any) { return (

username: {username}

@@ -10,15 +10,3 @@ function DisplayResults({password, username}: any) {
) } - - -export function render(args: any) { - const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement - ); - root.render( - - - - ); -} \ No newline at end of file diff --git a/front/views/SampleForm.tsx b/front/views/SampleForm.tsx index b64650a..5108697 100644 --- a/front/views/SampleForm.tsx +++ b/front/views/SampleForm.tsx @@ -1,13 +1,13 @@ import React from "react"; import ReactDOM from "react-dom/client"; -function SampleForm() { +export default function SampleForm() { return (

Hello, this is a sample form made in react !

- + @@ -16,15 +16,5 @@ function SampleForm() { ) } -export function render(args: any) { - const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement - ); - root.render( - - - - ); -} diff --git a/profiles/dev-config-profile.php b/profiles/dev-config-profile.php index 9d9772e..3ce4986 100644 --- a/profiles/dev-config-profile.php +++ b/profiles/dev-config-profile.php @@ -1,8 +1,12 @@ @@ -16,14 +28,13 @@