Bundle with no crucial dependencies

Question

Bundle with no crucial dependencies

In need of creating a package that offers abstractions relying on the IObservable interface, I require two external classes mimicking the behavior of Subject<T> and BehaviorSubject<T> from rxjs.

However, it is essential for me to avoid tightly coupling my package with rxjs. I aim to make it compatible with other packages implementing these interfaces as well.

I have devised this particular solution. While it serves my needs, I am curious about whether I can rely on the behavior of the import statement.

This stems from my understanding that imports are hoisted and executed asynchronously. What if, in some scenarios, myLibrary is imported before rxjs and global setup?

EDIT:

My decision was to utilize an init({Subject, ...other_types}) function, which I have incorporated into the updated gist in the provided link. The workflow now follows this pattern:

import {some_types} from 'some_package'
import {init} from 'myLib'

init(some_types)

// ... allowing the consumer to import additional functionalities from myLib

Although I still ponder over the sequencing of imports, that is a story for another time...

typescript

Answer 1

Answer №1

Implementing SOLID principles can be beneficial:

Interface segregation → creating specific interfaces for your requirements, such as Subject<T> and BehaviorSubject<T>, tailored to your needs.
Dependency inversion → relying on abstract types rather than direct RxJs dependencies can help decouple the application from RxJs.
TypeScript's structural typings support allows for compatibility between interfaces and RxJs types, enabling these interfaces to serve as dependencies in your application. If compatibility is lacking, creating wrappers becomes necessary.

By using ES6 modules with static imports, modules will load correctly in sequence (barring any unusual configurations with module loaders or bundlers). In the example below, RxJs cannot be loaded after subjects.ts:

// -- subjects.ts ----
export interface Subject<T> { /*...*/ }
export interface BehaviorSubject<T> { /*...*/ }

// -- create-subjects.ts ----
import * as rx from 'rxjs/Rx';
import { Subject, BehaviorSubject } from './subjects.ts';

// Subject<T> and rx.Subject<T> are compatible
export function createSubject<T>(): Subject<T> {
    return new rx.Subject<T>();
}

// BehaviorSubject<T> and rx.BehaviorSubject<T> are not compatible => wrapper
export function createBehaviorSubject<T>(value: T): BehaviorSubject<T> {
    const wrappee = new rx.BehaviorSubject(value);
    return {
        suscribe: (callback: Function) => wrappee.suscribe(callback),
        /*...*/
    };
}

// -- consumer.ts ----
import { createSubject } from './create-subjects.ts';

const subject = createSubject<string>();
// ...

Transitioning to another stream library becomes easier by simply modifying one file: create-subjects.ts, assuming that the custom XxxSubject interfaces have been well-designed to meet the specific needs of the application (which is not elaborated upon in the current context).

Answer 2

Implementing SOLID principles can be beneficial:

Interface segregation → creating specific interfaces for your requirements, such as Subject<T> and BehaviorSubject<T>, tailored to your needs.
Dependency inversion → relying on abstract types rather than direct RxJs dependencies can help decouple the application from RxJs.
TypeScript's structural typings support allows for compatibility between interfaces and RxJs types, enabling these interfaces to serve as dependencies in your application. If compatibility is lacking, creating wrappers becomes necessary.

By using ES6 modules with static imports, modules will load correctly in sequence (barring any unusual configurations with module loaders or bundlers). In the example below, RxJs cannot be loaded after subjects.ts:

// -- subjects.ts ----
export interface Subject<T> { /*...*/ }
export interface BehaviorSubject<T> { /*...*/ }

// -- create-subjects.ts ----
import * as rx from 'rxjs/Rx';
import { Subject, BehaviorSubject } from './subjects.ts';

// Subject<T> and rx.Subject<T> are compatible
export function createSubject<T>(): Subject<T> {
    return new rx.Subject<T>();
}

// BehaviorSubject<T> and rx.BehaviorSubject<T> are not compatible => wrapper
export function createBehaviorSubject<T>(value: T): BehaviorSubject<T> {
    const wrappee = new rx.BehaviorSubject(value);
    return {
        suscribe: (callback: Function) => wrappee.suscribe(callback),
        /*...*/
    };
}

// -- consumer.ts ----
import { createSubject } from './create-subjects.ts';

const subject = createSubject<string>();
// ...

Transitioning to another stream library becomes easier by simply modifying one file: create-subjects.ts, assuming that the custom XxxSubject interfaces have been well-designed to meet the specific needs of the application (which is not elaborated upon in the current context).

Bundle with no crucial dependencies

Answer №1

Similar questions

A Guide to Iterating Through Arrays of Objects Using TypeScript

Develop a customized interface for exporting styled components

Troubleshooting offline pagination with dynamic MatTable containing matInputs (Angular 5 Material Design)

Leveraging the Cache-Control header in react-query for optimal data caching

Vue 3 does not maintain derived property values when assigning them to an object value

Ways to change a value into int8, int16, int32, uint8, uint16, or uint32

Utilizing Typescript's conditional type to determine behavior based on the specific value of a string literal type

Unlocking the ability to retrieve data generated by the context within getServerSideProps beyond its boundaries (for transitioning from Create React App to Next.js)

The error message "TypeError: text is not a function" is displayed when trying to utilize the text() method from either Blob

The Typescript compiler is unable to ignore imported JavaScript files

Encountering Typescript issues following the transition from npm to pnpm

Loading data synchronously in Angular6 routes

When 'Interval.after' is invoked within the library, Luxon throws an error message stating "Invalid Interval."

Angular - personalized modal HTML

Retrieve the data from the mat-checkbox

Steps for setting up a nested route in Angular 2

Response received through GET call in text format

Using TypeScript with Mongoose: Issue with finding documents conditionally on model results in error: Union type signatures are not compatible

Learn how to define an object with string keys and MUI SX prop types as values when typing in programming

Handlebar files are not compatible with Typescript loading capabilities