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: