All Projects → wendellhu95 → wedi

wendellhu95 / wedi

Licence: other
[Deprecated] A lightweight dependency injection (DI) library for TypeScript, along with a binding for React.

Programming Languages

typescript
32286 projects
CSS
56736 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to wedi

SocketHook
Socket hook is an injector based on EasyHook (win only) which redirect the traffic to your local server.
Stars: ✭ 38 (+72.73%)
Mutual labels:  dependency-injection, injector
Flutter Boilerplate Project
A boilerplate project created in flutter using MobX and Provider.
Stars: ✭ 1,194 (+5327.27%)
Mutual labels:  state-management, dependency-injection
Getx
Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies easily with Get.
Stars: ✭ 5,578 (+25254.55%)
Mutual labels:  state-management, dependency-injection
linker
Dependency Injection and Inversion of Control package
Stars: ✭ 33 (+50%)
Mutual labels:  dependency-injection, injector
okito
Your best flutter coding friend. All in one; state management, navigation management(with dynamic routing), local storage, localization, dependency injection, cool extensions with best usages and with the support of best utilities!
Stars: ✭ 37 (+68.18%)
Mutual labels:  state-management, dependency-injection
injector
PSR-11 compatible injector
Stars: ✭ 33 (+50%)
Mutual labels:  dependency-injection, injector
Inherited builder
🤖Autogenerated state management and dependency injection with inherited widgets
Stars: ✭ 17 (-22.73%)
Mutual labels:  state-management, dependency-injection
common-injector
Heavily influenced by Angular and it's dependency injection. Inspired by Angular and Indiv.
Stars: ✭ 18 (-18.18%)
Mutual labels:  dependency-injection, injector
lamp-luwak
Service-oriented state management for React
Stars: ✭ 12 (-45.45%)
Mutual labels:  state-management, dependency-injection
Reto
Flexible and efficient React Store with hooks.
Stars: ✭ 194 (+781.82%)
Mutual labels:  state-management, dependency-injection
States rebuilder
a simple yet powerful state management technique for Flutter
Stars: ✭ 372 (+1590.91%)
Mutual labels:  state-management, dependency-injection
inject
[Archived] See https://github.com/goava/di.
Stars: ✭ 49 (+122.73%)
Mutual labels:  dependency-injection, injector
Momentum
MVC pattern for flutter. Works as state management, dependency injection and service locator.
Stars: ✭ 99 (+350%)
Mutual labels:  state-management, dependency-injection
dodrugs
A macro-powered dependency injector for Haxe
Stars: ✭ 29 (+31.82%)
Mutual labels:  dependency-injection, injector
DependencyInjector
Lightweight dependency injector
Stars: ✭ 30 (+36.36%)
Mutual labels:  dependency-injection, injector
test-tools
Improves PHPUnit testing productivity by adding a service container and self-initializing fakes
Stars: ✭ 25 (+13.64%)
Mutual labels:  dependency-injection
whatsup
Reactive framework, simple, fast, easy to use!
Stars: ✭ 115 (+422.73%)
Mutual labels:  state-management
jedisdb
redis like key-value state management solution for React
Stars: ✭ 13 (-40.91%)
Mutual labels:  state-management
incubator-eventmesh
EventMesh is a dynamic event-driven application runtime used to decouple the application and backend middleware layer, which supports a wide range of use cases that encompass complex multi-cloud, widely distributed topologies using diverse technology stacks.
Stars: ✭ 939 (+4168.18%)
Mutual labels:  state-management
riduce
Get rid of your reducer boilerplate! Zero hassle state management that's typed, flexible and scalable.
Stars: ✭ 14 (-36.36%)
Mutual labels:  state-management

[deprecated] wedi

wedi is deprecated. I am working on a new implementation redi.

A lightweight dependency injection (DI) library for TypeScript, along with a binding for React.

Codecov npm package GitHub license


What is wedi?

wedi is a lightweight toolkit to let you use dependency injection (DI) pattern in TypeScript and especially React with TypeScript.

  • Completely opt-in. It's up to you to decide when and where to apply dependency injection pattern.
  • Provide a multi-level dependency injection system.
  • Support injecting classes, instances, values and factories.
  • Support React class component.
  • Support React Hooks (functional component).

You can use wedi to:

  • Mange state of applications
  • Reuse logic
  • Deal with cross-platform problems
  • Write code that is loosely-coupled, easy to understand and maintain

Getting Started

This guide assumes basic knowledge of TypeScript, React and dependency injection pattern. If you are totally innocent of any idea above, it might not be the best idea to get started with wedi.

Install wedi via npm or yarn:

npm install wedi

# or
yarn add wedi

Add you need to enable decorator in tsconfig.json.

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Declare a Dependency

Declare something that another class or React component could depend on is very simple. It could just be easy as a ES6 class!

class AuthenticationService {
  avatar = 'https://img.yourcdn.com/avatar'
}

wedi let you declare other kinds of dependencies such as plain values and factory functions. Read Dependencies for more details.

Use in React

You could provide a dependency in a React component, and use it in its child components.

function App() {
  const collection = useCollection([AuthenticationService])

  return <Provider collection={collection}>
    <DeeplyWrapped>
      <Profile />
    </DeeplyWrapper>
  </Provider>
}

function Profile() {
  const authS = useDependency(AuthenticationService)

  return <img src={authS.avatar} />
}

With RxJS

wedi provide some Hooks that helps you use wedi with RxJS smoothly.

function ReRenderOnNewValue() {
  const notificationS = useDependency(NotificationService)
  const val = useDependencyValue(notificationS.data$)

  // re-return when data$ emits a new value
}

Demo

Here is a TodoMVC demo built with wedi.

Links

License

MIT. Copyright Wendell Hu 2019-2020.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].