Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
ts-bus - npm Package Compare versions
Comparing version 0.1.3 to 0.1.4
| { | ||
| "name": "ts-bus", | ||
| "version": "0.1.3", | ||
| "version": "0.1.4", | ||
| "main": "index.js", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
@@ -5,4 +5,10 @@ # TS Bus | ||
| The following examples are in TypeScript but you can use this in JavaScript as well. | ||
| Why did I write this? | ||
| I wanted a system that | ||
| - Is framework agnostic. | ||
| - Could enable micro-frontends / microlithic architecture. | ||
| - Can easily use React hooks to reduce state. | ||
| ## Installation | ||
@@ -26,2 +32,4 @@ | ||
| #### 1. Declare events | ||
| Create your EventBus globally somewhere: | ||
@@ -50,5 +58,14 @@ | ||
| export const firstEvent = createEventCreator<FirstEvent>("FIRST_EVENT"); | ||
| // Note we have to pass in a string as typescript does | ||
| // not allow for a way to create a string from typeland | ||
| // This is typed however so you should have | ||
| // autocompletion and should not find yourself making errors | ||
| ``` | ||
| // Personally I prefer to put the event type | ||
| // inline as it is more concise: | ||
| _TIP_ | ||
| > I find putting the event type inline leads to more concise event definitions: | ||
| ```ts | ||
| // Inline example | ||
| export const otherEvent = createEventCreator<{ | ||
@@ -58,11 +75,8 @@ type: "OTHER_EVENT"; | ||
| };>("OTHER_EVENT"); | ||
| // Note we have to pass in a string as typescript does | ||
| // not allow for a way to create a string from typeland | ||
| // This is typed however so you should have | ||
| // autocompletion and should not find yourself making errors | ||
| ``` | ||
| Let's subscribe to our events | ||
| #### 2. Subscription | ||
| Ok. Let's subscribe to our events | ||
| ```ts | ||
@@ -82,4 +96,6 @@ // main.ts | ||
| Elsewhere publish your event | ||
| #### 2. Publishing events | ||
| Now let's publish our events somewhere | ||
| ```ts | ||
@@ -99,4 +115,23 @@ // publisher.ts | ||
| _TIP:_ | ||
| > If you want to avoid the direct dependency with your event creator (lets say because of bounded context or micro-frontends) like in Redux you can use the event object: | ||
| ```tsx | ||
| bus.publish({ | ||
| type: "KICKOFF_SOME_PROCESS", | ||
| payload: props.data | ||
| }); | ||
| ``` | ||
| Thats the basics of the `ts-bus` | ||
| ## Usage with React | ||
| Included with `ts-bus` are some React hooks and helpers. | ||
| #### BusProvider | ||
| Wrap your app using the `BusProvider` | ||
| ```tsx | ||
@@ -120,2 +155,6 @@ import React from "react"; | ||
| #### useBus | ||
| Access the bus instance with `useBus` | ||
| ```tsx | ||
@@ -139,10 +178,4 @@ // Dispatch from deep in your application somewhere... | ||
| If you want to avoid the direct dependency you can use the event object: | ||
| #### useBusReducer | ||
| ```tsx | ||
| bus.publish({ type: "KICKOFF_SOME_PROCESS", payload: props.data }); | ||
| ``` | ||
| ## Alternative to Redux with `useBusReducer` | ||
| This can be used as a much more flexible alternative to Redux because not every event requires a corresponding state change. Also you can hook multiple frameworks together and create microfrontends with this technique. | ||
@@ -149,0 +182,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.83%
9077
- Number of lines in readme file
- increased by19.08%
206
No dependency changes