Publish in npm

[fvictorio]

Hi, I would love to use this in a project. Would you consider publishing it in npm so that it's easier to install? I can probably help you with that if you want.

[yewang]

Thanks for your interest in the project/code. I hope that you will find it useful.

I've never used npm, and only have a rough understanding it's purpose and ecosystem.

What does publishing on npm require? How does it make things easier to install? Would it a be a bit redundant to maintain both a GitHub and npm presence?

What does "install" really even mean for a project like mine, as it is not really a library? Note: my code could probably also be better encapsulated. I'm not sure if I'm following best practices in a lot of things. Also, my code is all done using an out-of-date version of JS. Perhaps, I should modernize at some point, but that's a whole other task.

[fvictorio]

What does publishing on npm require?

Just adding a package.json and changing some things about how the code is wrapped (probably using UMD, which is a pattern for a project like this to work both when included in a <script> tag or inside node using require).

I can make a fork with this change for you to take a look and decide if it's something you'd like to have.

How does it make things easier to install?

You can then do npm install besogo in a npm project. This is used a lot with for example react projects. In fact, if you publish this in npm then I would love to make a react wrapper for it.

Would it a be a bit redundant to maintain both a GitHub and npm presence?

I don't think so? Github has your repository and your code, and npm has your "installable" package. In fact, the vast majority of npm packages have their code in github.

What does "install" really even mean for a project like mine, as it is not really a library?

I know what you mean here, but I still think this classifies as a library, at least the js part (not the index.html). If this is published, then you can do something like this:

const besogo = require('besogo')

besogo.create(document.querySelector('#container'))

which looks pretty much like a library to me. Of course, you have to make sure that you include the CSS, but that's a reasonable thing to ask to the user.

[yewang]

Thanks for the information. I think it's a good idea to publish on npm.

I can make a fork with this change for you to take a look and decide if it's something you'd like to have.

Yes, that would be great. I really appreciate the help.

[fvictorio]

I just made a fork with this commit adding a package.json. I also published it to npm: https://www.npmjs.com/package/besogo (Of course, I will transfer ownership to you if you create a user there)

This doesn't include the UMD part, but that can be added later and this already lets you use it in a node environment like this:

require('besogo')

window.besogo.create(...)

[yewang]

@fvictorio, thank you for taking care of publishing in NPM.

By the way, I just noticed that I have some places where I still mistakenly say that the code is AGPL, when I have now decided to relicense it under MIT. I guess technically, it is still under AGPL, since I cannot revoke that, but the MIT license is more permissive, so people should be made clear that it is available under that. I need to fix this in my readme and project page.

[fvictorio]

Awesome, thanks for letting me know.

The next step here is to make it more module-friendly, meaning being able to do this:

const besogo = require('besogo')

besogo.create(...)

while preserving the ability to do:

<script src="path/to/besogo.js"></script>
<script>
  window.besogo.create(...)
</script>

I toyed around this, but I didn't found a way to do it without either modifying the source code or adding some build system (webpack, rollup, etc.), which seemed too intrusive. But in the event this is something you'd be interested in, please let me know and I can help.

Btw, I also created a React component (https://github.com/fvictorio/react-besogo) for this. It justs includes the library and uses it. The downside here is that it pollutes the global space by setting window.besogo, something that today is considered a not-that-good practice (I personally don't care a lot about this, but some people do). Again, making it a proper module would help here.

[yewang]

Thanks for all of your help, @fvictorio.

I will look into understanding how to refactor the code to make things module-friendly. Are there some resources or tutorials that you could suggest? Or could you suggest the specific changes?

By the way, regarding this commit: fvictorio@ecbd616
Could you send it back to my project via a pull request?
Of course, I could easily just copy-paste the changes back in, but I think it would be nice to process an official pull request.

[fvictorio]

Are there some resources or tutorials that you could suggest? Or could you suggest the specific changes?

This explanation looks good for getting the context. Then, I would probably use some tool. In this case I would suggest rollup. Webpack is more popular, but it's complex and more useful for apps.

If you decide to go with rollup, then I think the changes you would need to make are:

• Change each of your files so that they are modules. So internally you can import and export them, and then the main file just imports everything. I'm not sure about the architecture here, but it doesn't sound like a big issue.
• Configure rollup to take the main file as input, and to output the bundle in the dist directory. You can just output it in the root as you're doing now, but it's not a good practice. Also, since you are using the built file for the page, you will need to commit the directory. A way to avoid this is to have the library in this repo and then the page in another repo (that installs this one). But that's probably a lot. I would start small and just commit the dist directory.

Let me know any questions you have!

Could you send it back to my project via a pull request?

Sure! There you go: #15