diff --git a/packages/core/readme.md b/packages/core/readme.md index da3cbfb..7b32a50 100644 --- a/packages/core/readme.md +++ b/packages/core/readme.md @@ -31,7 +31,7 @@ import { Micro } from "react-micro-js"; name="MicroCar" manifestSRC="manifest.json" host="http://localhost:4000" - deeps={[...]} + dependencies={[...]} /> ``` @@ -39,7 +39,7 @@ where: - _**name**_ is the name of your micro frontend. Keep this name in mind, because this should be the same that you will use in the `connect` function later. - _**manifestSRC**_ the destination to your manifest file. In this case the manifest file is found at `http://localhost:4000/manifest.json` - _**host**_ the endpoint where your micro-frontend is deployed. -- _**deeps**_ the dependency array which you want to inject in your micro-frontend when it is going to be mounted. Usually used for _browser history_, _event emitters_ and _shared capabilities_. +- _**dependencies**_ the dependency array which you want to inject in your micro-frontend when it is going to be mounted. Usually used for _browser history_, _event emitters_ and _shared capabilities_. The **manifest** is json file which has a `files` entry on it. If you use create-react-app it will be something like: @@ -51,7 +51,7 @@ There's one last step, which is to configure your micro-frontend, some times cal In the entry point of your application, most of the time `index.js`, you need to move your ReactDOM render logic to be inside a function, like this example bellow: ```js -const mountFn = (connect) => (containerId, deeps) => { +const mountFn = (connect) => (containerId, dependencies) => { const root = ReactDOM.createRoot(document.getElementById(containerId)); root.render(); @@ -60,10 +60,10 @@ const mountFn = (connect) => (containerId, deeps) => { }; ``` -Please notice we're calling a `connect` function which will come as parameter from the `connector` later. Also notice this 2 parameters provided in the curried function: `containerId` and `deeps`, where: +Please notice we're calling a `connect` function which will come as parameter from the `connector` later. Also notice this 2 parameters provided in the curried function: `containerId` and `dependencies`, where: - _**containerId**_ is the id of your micro-frontend container, which will be `[YOUR_MICRO_FRONTEND_NAME]-container` -- _**deeps**_ dependency array provided from the parent container. +- _**dependencies**_ dependency array provided from the parent container. Then, you just need to provide your `mountFn` to react-micro-js `connector` and that is it: diff --git a/packages/core/src/components/Micro/Micro.tsx b/packages/core/src/components/Micro/Micro.tsx index 79649db..989d1a9 100644 --- a/packages/core/src/components/Micro/Micro.tsx +++ b/packages/core/src/components/Micro/Micro.tsx @@ -6,18 +6,18 @@ interface MicroProps { name: string; host: string; manifestSRC: string; - deeps?: any; + dependencies?: any; fetchOpts?: any; } -const Micro = ({ name, host, deeps, manifestSRC, fetchOpts }: MicroProps) => { +const Micro = ({ name, host, dependencies, manifestSRC, fetchOpts }: MicroProps) => { const containerId = `${name}-container`; const renderHost = useCallback(() => { const renderFnName = RENDER_FUNCTION_ID + name; if (!(window as any)[renderFnName]) return; - (window as any)[renderFnName](containerId, deeps); + (window as any)[renderFnName](containerId, dependencies); }, []); const dettachHost = () => { diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 89960a7..ce7dc3c 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -1,7 +1,7 @@ export type TManifest = { [key: string]: any } & { files: Record }; // TODO: Type the reactRoot export type TConnectRootFn = (reactRoot: any) => void; -export type TRenderFn = (cointainerId: string, deeps: any[]) => void; +export type TRenderFn = (containerId: string, dependencies: any[]) => void; export type TMountFn = (connect: TConnectRootFn) => TRenderFn; export type TCreateRootOpts = { name: string; diff --git a/packages/example-host/src/index.js b/packages/example-host/src/index.js index 39d38bb..e0132b7 100644 --- a/packages/example-host/src/index.js +++ b/packages/example-host/src/index.js @@ -5,7 +5,7 @@ import App from "./App"; import reportWebVitals from "./reportWebVitals"; import { connector } from "react-micro-js"; -const mountFn = (connect) => (containerId, deeps) => { +const mountFn = (connect) => (containerId, dependencies) => { console.log("### INDEX POINT RE-RENDER", containerId); const root = ReactDOM.createRoot(document.getElementById(containerId)); diff --git a/readme.md b/readme.md index da3cbfb..7b32a50 100644 --- a/readme.md +++ b/readme.md @@ -31,7 +31,7 @@ import { Micro } from "react-micro-js"; name="MicroCar" manifestSRC="manifest.json" host="http://localhost:4000" - deeps={[...]} + dependencies={[...]} /> ``` @@ -39,7 +39,7 @@ where: - _**name**_ is the name of your micro frontend. Keep this name in mind, because this should be the same that you will use in the `connect` function later. - _**manifestSRC**_ the destination to your manifest file. In this case the manifest file is found at `http://localhost:4000/manifest.json` - _**host**_ the endpoint where your micro-frontend is deployed. -- _**deeps**_ the dependency array which you want to inject in your micro-frontend when it is going to be mounted. Usually used for _browser history_, _event emitters_ and _shared capabilities_. +- _**dependencies**_ the dependency array which you want to inject in your micro-frontend when it is going to be mounted. Usually used for _browser history_, _event emitters_ and _shared capabilities_. The **manifest** is json file which has a `files` entry on it. If you use create-react-app it will be something like: @@ -51,7 +51,7 @@ There's one last step, which is to configure your micro-frontend, some times cal In the entry point of your application, most of the time `index.js`, you need to move your ReactDOM render logic to be inside a function, like this example bellow: ```js -const mountFn = (connect) => (containerId, deeps) => { +const mountFn = (connect) => (containerId, dependencies) => { const root = ReactDOM.createRoot(document.getElementById(containerId)); root.render(); @@ -60,10 +60,10 @@ const mountFn = (connect) => (containerId, deeps) => { }; ``` -Please notice we're calling a `connect` function which will come as parameter from the `connector` later. Also notice this 2 parameters provided in the curried function: `containerId` and `deeps`, where: +Please notice we're calling a `connect` function which will come as parameter from the `connector` later. Also notice this 2 parameters provided in the curried function: `containerId` and `dependencies`, where: - _**containerId**_ is the id of your micro-frontend container, which will be `[YOUR_MICRO_FRONTEND_NAME]-container` -- _**deeps**_ dependency array provided from the parent container. +- _**dependencies**_ dependency array provided from the parent container. Then, you just need to provide your `mountFn` to react-micro-js `connector` and that is it: