From 2024b063be273ce35f4d44fd809671ef3f4d4a30 Mon Sep 17 00:00:00 2001 From: Valentin Prokopchuk Date: Wed, 7 Aug 2024 18:06:29 +0500 Subject: [PATCH 1/6] Update index.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Дополнил в описании пару фраз и небольшой пример использования на react --- apps/website/docs/factories/index.md | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/apps/website/docs/factories/index.md b/apps/website/docs/factories/index.md index 9bfa292b..27721d48 100644 --- a/apps/website/docs/factories/index.md +++ b/apps/website/docs/factories/index.md @@ -98,11 +98,29 @@ const createCounter = createFactory(({ initialValue }) => { ### `invoke` Anywhere in your application you can invoke a factory by calling `invoke` with a factory and its arguments: +We do not call `invoke` in components; instead, we call it in **`.js`** or **`.ts`** files, as if we were writing regular Effector code. -```ts +```js import { invoke } from '@withease/factories'; -const counter = invoke(createCounter, { initialValue: 2 }); +const { $counter, increment, decrement } = invoke(createCounter, { initialValue: 2 }); +``` + +Now we can use `$counter`, `increment`, and `decrement` in our components +Here’s how you might use them in a React component: + +```jsx +const CounterComponent = () => { + const counter = useStore($counter); + + return ( +
+

Counter: {counter}

+ + +
+ ); +}; ``` ::: warning From efdacce9926e0cfd5c4648ed8c3bf9ac2c78e1be Mon Sep 17 00:00:00 2001 From: Valentin Prokopchuk Date: Wed, 7 Aug 2024 18:11:21 +0500 Subject: [PATCH 2/6] Update index.md --- apps/website/docs/factories/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/docs/factories/index.md b/apps/website/docs/factories/index.md index 27721d48..66cdb9e8 100644 --- a/apps/website/docs/factories/index.md +++ b/apps/website/docs/factories/index.md @@ -100,7 +100,7 @@ const createCounter = createFactory(({ initialValue }) => { Anywhere in your application you can invoke a factory by calling `invoke` with a factory and its arguments: We do not call `invoke` in components; instead, we call it in **`.js`** or **`.ts`** files, as if we were writing regular Effector code. -```js +```ts import { invoke } from '@withease/factories'; const { $counter, increment, decrement } = invoke(createCounter, { initialValue: 2 }); From fcc4d90622409496cd72ae290d1f3d780628d675 Mon Sep 17 00:00:00 2001 From: Prokopchuk-Valentin Date: Wed, 7 Aug 2024 21:49:56 +0500 Subject: [PATCH 3/6] corrects comments on code and notes --- apps/website/docs/factories/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/website/docs/factories/index.md b/apps/website/docs/factories/index.md index 66cdb9e8..266f9abd 100644 --- a/apps/website/docs/factories/index.md +++ b/apps/website/docs/factories/index.md @@ -98,7 +98,7 @@ const createCounter = createFactory(({ initialValue }) => { ### `invoke` Anywhere in your application you can invoke a factory by calling `invoke` with a factory and its arguments: -We do not call `invoke` in components; instead, we call it in **`.js`** or **`.ts`** files, as if we were writing regular Effector code. +It is recommended not to call ⁠invoke within components; instead, it should be called in ⁠`.js` or ⁠`.ts` files, as if writing standard Effector code. ```ts import { invoke } from '@withease/factories'; @@ -111,13 +111,13 @@ Here’s how you might use them in a React component: ```jsx const CounterComponent = () => { - const counter = useStore($counter); - + const counter = useUnit($counter); + const [onIncrement,onDecrement] = useUnit(increment,decrement) return (

Counter: {counter}

- - + +
); }; From 5d2e31b1b1c87c7b250c15de0408617f81c11590 Mon Sep 17 00:00:00 2001 From: Prokopchuk-Valentin Date: Wed, 11 Sep 2024 15:58:35 +0500 Subject: [PATCH 4/6] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20warning=20=D0=B8=20=D1=83=D0=BF=D0=BE=D0=BC?= =?UTF-8?q?=D0=B8=D0=BD=D0=B0=D0=BD=D0=B8=D0=B5=20=D1=80=D0=B0=D0=B7=D0=BB?= =?UTF-8?q?=D0=B8=D1=87=D0=BD=D1=8B=D0=B9=20=D1=84=D1=80=D0=B5=D0=B9=D0=BC?= =?UTF-8?q?=D0=B2=D0=BE=D1=80=D0=BA=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/website/docs/factories/index.md | 50 +++++++++++++++++++++++++--- 1 file changed, 46 insertions(+), 4 deletions(-) diff --git a/apps/website/docs/factories/index.md b/apps/website/docs/factories/index.md index 266f9abd..7b441770 100644 --- a/apps/website/docs/factories/index.md +++ b/apps/website/docs/factories/index.md @@ -98,7 +98,10 @@ const createCounter = createFactory(({ initialValue }) => { ### `invoke` Anywhere in your application you can invoke a factory by calling `invoke` with a factory and its arguments: -It is recommended not to call ⁠invoke within components; instead, it should be called in ⁠`.js` or ⁠`.ts` files, as if writing standard Effector code. +::: warning +It is recommended to call invoke in the same places where Effector code is written, rather than inside components. +::: + ```ts import { invoke } from '@withease/factories'; @@ -106,13 +109,14 @@ import { invoke } from '@withease/factories'; const { $counter, increment, decrement } = invoke(createCounter, { initialValue: 2 }); ``` -Now we can use `$counter`, `increment`, and `decrement` in our components -Here’s how you might use them in a React component: +Now we can use `$counter`, `increment`, and `decrement` in our components. Here’s how you might use them in different UI frameworks: +::: details Example usage in React ```jsx const CounterComponent = () => { const counter = useUnit($counter); - const [onIncrement,onDecrement] = useUnit(increment,decrement) + const [onIncrement, onDecrement] = useUnit(increment, decrement); + return (

Counter: {counter}

@@ -122,9 +126,47 @@ const CounterComponent = () => { ); }; ``` +::: + +::: details Example usage in Vue +```html + + + +``` +::: + +::: details Example usage in Svelte +```svelte + + +
+

Counter: {$counter}

+ + +
+``` +::: ::: warning You have to invoke factories only in the top-level of your application. It means that you **must not** invoke it during component rendering or in any other place that can be called multiple times. Otherwise, you will get a memory leak. This limitation is applied to any factory, not only to factories created with `@withease/factories`. ::: + From 26655b7531299e08cb1525490a0c6cc1118e4feb Mon Sep 17 00:00:00 2001 From: Prokopchuk-Valentin Date: Thu, 12 Sep 2024 16:09:26 +0500 Subject: [PATCH 5/6] =?UTF-8?q?=D1=83=D0=B4=D0=B0=D0=BB=D1=8F=D0=B5=D1=82?= =?UTF-8?q?=20=D0=BD=D0=B5=D0=BA=D0=BE=D1=80=D1=80=D0=B5=D0=BA=D1=82=D0=BD?= =?UTF-8?q?=D1=8B=D0=B9=20=D0=BF=D1=80=D0=B8=D0=BC=D0=B5=D1=80=20svelte?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/website/docs/factories/index.md | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/apps/website/docs/factories/index.md b/apps/website/docs/factories/index.md index 7b441770..b6767e97 100644 --- a/apps/website/docs/factories/index.md +++ b/apps/website/docs/factories/index.md @@ -147,23 +147,6 @@ const counter = useUnit($counter); ``` ::: -::: details Example usage in Svelte -```svelte - - -
-

Counter: {$counter}

- - -
-``` -::: - ::: warning You have to invoke factories only in the top-level of your application. It means that you **must not** invoke it during component rendering or in any other place that can be called multiple times. Otherwise, you will get a memory leak. From 95171f0af7193fa9e27443a279fdacdb236bad85 Mon Sep 17 00:00:00 2001 From: Igor Kamyshev Date: Thu, 12 Sep 2024 18:10:07 +0700 Subject: [PATCH 6/6] OK --- apps/website/docs/factories/index.md | 42 +++++++++------------------- 1 file changed, 13 insertions(+), 29 deletions(-) diff --git a/apps/website/docs/factories/index.md b/apps/website/docs/factories/index.md index 7b441770..d63a82e7 100644 --- a/apps/website/docs/factories/index.md +++ b/apps/website/docs/factories/index.md @@ -98,25 +98,30 @@ const createCounter = createFactory(({ initialValue }) => { ### `invoke` Anywhere in your application you can invoke a factory by calling `invoke` with a factory and its arguments: + ::: warning -It is recommended to call invoke in the same places where Effector code is written, rather than inside components. -::: +You have to invoke factories only in the top-level of your application. It means that you **must not** invoke it during component rendering or in any other place that can be called multiple times. Otherwise, you will get a memory leak. +This limitation is applied to any factory, not only to factories created with `@withease/factories`. +::: ```ts import { invoke } from '@withease/factories'; -const { $counter, increment, decrement } = invoke(createCounter, { initialValue: 2 }); +const { $counter, increment, decrement } = invoke(createCounter, { + initialValue: 2, +}); ``` -Now we can use `$counter`, `increment`, and `decrement` in our components. Here’s how you might use them in different UI frameworks: +Now we can use `$counter`, `increment`, and `decrement` in our components. Here is how you might use them in different UI frameworks: ::: details Example usage in React + ```jsx const CounterComponent = () => { const counter = useUnit($counter); const [onIncrement, onDecrement] = useUnit(increment, decrement); - + return (

Counter: {counter}

@@ -126,9 +131,11 @@ const CounterComponent = () => { ); }; ``` + ::: ::: details Example usage in Vue + ```html -``` -::: - -::: details Example usage in Svelte -```svelte - - -
-

Counter: {$counter}

- - -
``` -::: -::: warning -You have to invoke factories only in the top-level of your application. It means that you **must not** invoke it during component rendering or in any other place that can be called multiple times. Otherwise, you will get a memory leak. - -This limitation is applied to any factory, not only to factories created with `@withease/factories`. ::: -