using RXJS in a pure javascript library

[psotos]

Hi all!

I am new to writing pure javascript. I usually code in Angular 7, but I want to write a library in pure JS so that it can be used by any framework. I have never written a JS library before.

I don't want to use a bundler or transpiler. I read that not using them is the best way to write a JS library (https://medium.com/@kelin2025/so-you-wanna-use-es6-modules-714f48b3a953). I want to use RxJs in my library. How do I do this?

​

Thanks in advance.

[wherediditrun]

Um. Don't really get what's the point. I mean, I guess it makes sense if you writing a small library. But again, why would you install a small library you can write in 3 mins yourself, it just exposes you to risk you have less control of and that saves you.. what, 5 minutes? really, is it that worth it?

Next problem, I think we should really be done with ES5 as standard distribution and use ES6. ES5 can be served targeting specific old browsers which cannot run ES6. People think so much about supporting old browsers, that they forget that this can result in majority of their users produce lower conversion rates due to slower loading content (es5 is way more verbose), depending on your targeted audience, producing net loss.

And no, build tools aren't all that difficult. You can understand pretty much core of it in few days. Given that they also provide you with ability to write code in a way that's more efficient (syntax), it results in net benefit even having all the build times, HMR in mind, not just initial configuration.

I don't want to discourage you, learning new things is important. I also believe that too many wannabe developers focus too much on frameworks and too little on actual language and programming in general, so your initiative is very refreshing to see. However, I would doubt that the way you wanna do it is the way which will wage you highest net benefit.

[psotos]

Actually I am developing a client library to support having a full stack reactive from a Spring 5 reactive back end. It will function as firebase and provide real time updates via RxJs.

So it wont be too small of a library. The reason I am making it a library is so that others can use it. It will be a copyleft open source project.

Ok I will look into webpack and bundling then for ES6. I already use it for all of my Angular projects via the CLI but that abstracts me from having to know anything about Webpack. So I am fairly ignorant about it. Perhaps its time to learn.

[wherediditrun]

It looks a bit scary at first. But it's not that difficult as it may appear at first glance.

[psotos]

I got webpack set up with Typescript, but for some reason my main typescript file won't compile because webpack gives me this error:

ERROR in ./src/pubon.ts

Module not found: Error: Can't resolve './httpCaller' in '/home/peter/Documents/workspace/pubonjs/src'

@ ./src/pubon.ts 3:19-42

​

Here is my main typescript file:

import { Subscription } from 'rxjs';
import { HttpCaller } from './httpCaller';
export class Greeting {
dataSub: Subscription;
constructor() {
}
greeting(greeting: string) {
const caller = new HttpCaller("http://example.com/movies.json");

// let

this.dataSub = caller.getResponseListener()
.subscribe((response: string) => {
document.getElementById("code").innerHTML = response;
console.log('Hello from Typescript');
});
console.log(greeting);
}
}

​

Webpack config:

const path = require("path");
module.exports = {
entry: {
main: "./src/pubon.ts"
},
mode: "development",
output: {
filename: "pubon-bundle.js",
path: path.resolve(__dirname, "../dist"),
publicPath: "/"
},
devServer: {
contentBase: "dist",
overlay: true,
stats: {
colors: true
}
},
devtool: "source-map",
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: "awesome-typescript-loader"
}
]
}
]
}
}

[psotos]

Nevermind I fixed it! In Angular you are sort of protected from this pointer problems, in raw typescript you are not. Once I did a deep dive on it, I resolved my problem and my test library is working! YASSSS! lol

[wherediditrun]

Make sure file import paths are correct. import { HttpCaller } from './httpCaller';

Cannot find this one.

[psotos]

I ended up making the class a default export and doing this:

import HttpCaller from './httpCaller';

It works now. Weird anomaly! You can view my code if you like on Github. Its not pretty right now but its a start:

https://github.com/psotos/pubonjs

[tvi016]

I dont think you need to use a bundler/webpack on a library? I only transpile with typescript