Create single file bundle

[nombrekeff]

It'd be nice to build the project to output a single file bundle as well as per-file like it's done now. This way we can load cardboard in a single call.

[Otomatyk]

I would like to that, do you know how do I do it ? Do I just need to chain all files in the src folder, and minify it ?

[nombrekeff]

Hey, welcome @Otomatyk! I'm glad you're interested in helping out!

I'm not entirely sure how to do it, but I have not looked much into it. I've tried with Webpack, but it did not work as I expected. Currently, the project is written in TS, and compiled to ESM with the TSC compiler. It's not bundled in any way. So the only way of using it is by using module scripts and importing. This is not a problem for now, as the project is very small, and loading each file individually is not a problem, but it's nice to be able to load everything from a single file.

It might be possible to chain the files together in some way, but not directly though, as imports/exports might get messed up. But feel free to explore!

What would be nice is to have a bundle for ESM (import, export), and one that can be loaded globally without needing imports and such. I'm not sure if adding some other bundle formats like UMD or AMD would be beneficial. We should also be able to use it in typescript and of course, try to keep typing everywhere we can!

Please let me know if you need any help or question, I'll be happy to help!

[Otomatyk]

Ok!
I will (Tomorrow I think) try to create bundle (Not the ESM, the other one).

Even if I haven’t talked a lot yet, tell me if you don’t understand something, English isn’t my native language.

[nombrekeff]

Yeah! No worries. You're English is pretty good! Feel free to do the same in case you don't understand something!

[Otomatyk]

Hello, I've done some researches, and I've found a tool called "esbuild", it's like webpack but much faster, it doesn't do the ts check (Before bundle, be sure there is any type error in the TypeScript code). However there is a flaw : When compiling, it puts the code in a immediatly-invoked-arrow-function (This term is so stlyed :P) and the variables aren't global, to avoid that, I only found one solution : Remove the arrow function after bundling, it's not perfect, but it works!

To install esbuild, use npm install esbuild then to compile
npx esbuild ./src/cardboard.ts --bundle --outfile=bundle.js --minify-whitespace --minify-syntax --tsconfig=tsconfig.json
Of course you can modify the output file. The bundle's size is around 15Kb

[nombrekeff]

Ohh cool, did not know about esbuild. Sounds great. We might be able to use this bundle for importing from CDN or importing a regular script. For ES modules we can use what's currently available (separated into individual files) for now, and if we find a way of bundling into a single file in the future we can add that too.

Would you be up for creating a PR with esbuild as a dependency and adding the command as a package.json script? I will then try it out and test it, if everything is ok I will merge the PR!

[nombrekeff]

PD: 15kb is a fantastic size for the bundle, currently with modules it's around 32kb in total :) So the difference is significant!!!

[Otomatyk]

I’ll create a pull request later.
It’s already bundle in a single « big » file 😅

[Otomatyk]

I've never used PR in my life. Do I send only the lines that changed or the file ?

[nombrekeff]

Ohh, okay. Take a look at this in case you want to learn (it's not that hard, and is very useful). Otherwise don't worry, I can do it myself and mention you! Just let me know if you want to do it and I will help you with anything! I have some stuff to do for the next 1-2 hours, but I will be back and can help you!

[Otomatyk]

okay. It let me the time to read the article you sent

[nombrekeff]

No worries, don't feel obligated to read it though. Just thought of sharing a couple of resources in case you want them. Another great resource is https://skills.github.com/, interactive courses to learn how to use GitHub, manage PR, etc...

[Otomatyk]

Only collaborators can create PR ...

[nombrekeff]

Sorry, I will add you!

[nombrekeff]

Okay, I've sent an invite to become a collaborator. It should've arrived in your email

[Otomatyk]

Sent!

[nombrekeff]

Hey! I've taken a look at esbuild, and it seems to be able to generate esm bundles. The only problem is that bundles do not have the correct types for some reason. Some parts do (like init) but others don't (like: allTags). More research is needed here to make this possible.

[Otomatyk]

What do you mean by « Dont have the correct types » ?

[nombrekeff]

Well, I might have explained that wrong, but what I mean is, that the type definitions are not applied to the esm bundle correctly. If importing the files individually it does work. The type definitions are generated by typescripts. El mar, 17 oct 2023, 18:01, Otomatyk ***@***.***> escribió:

…

What do you mean by « Dont have the correct types » ? — Reply to this email directly, view it on GitHub <#12 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AECA6PAZDMU5CO4NZ3R343LX72TWXAVCNFSM6AAAAAA6AMTVIGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONRWG4YTSOBYGI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[Otomatyk]

How have you done it ?
Have you compiled the ts files then used ESBundle or have you compiled only with ESBundle ?

[nombrekeff]

Yup, I first compile the ts to js and then bundle the js. El mié, 18 oct 2023, 11:28, Otomatyk ***@***.***> escribió:

…

How have you done it ? Have you compiled the ts files then used ESBundle or have you compiled only with ESBundle ? — Reply to this email directly, view it on GitHub <#12 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AECA6PFT66F67GSRTNCH2ATX76ONVAVCNFSM6AAAAAA6AMTVIGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONRYGA2TCMBXGU> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[Otomatyk]

I found a new build command this afternoon :
npx esbuild ./dist/cardboard.js --bundle --outfile=bundle.js --format=iife --global-name="Cardboard" --minify-syntax --minify-whitespace

This one is better beceause it creates a "module" usable in the browser, all export are in an object (the --global-name flag defines the name of this object), and you can use it like this :
const {p, div, span} = Cardboard.allTags

I hope it will resolve your problem!

[nombrekeff]

Sorry for the late reply, I was busy.

Thanks, buddy! I will take a look and try it out, if it works ok I will add it!

[nombrekeff]

Okay, I've been trying esbuild out. I think I will end up not bundling the library for ESM and let the users bundle the app themselves. However I will provide a global bundle so it can be used in a CDN.

I will probably create a cli or similar to do the bundling. But I'll need to take a look at how to optimize this.

[Otomatyk]

His account has been probably hacked

[YuShengHou]

Main、侯已经收到你的邮箱

[Otomatyk]

What ?

Main、侯已经收到你的邮箱

[nombrekeff]

Sorry about that. I've reported the comment and the account, it's either hacked or the intentions are not good.

[Otomatyk]

I should do the same, I saw on his profile that he sent this message in more than +120 Issues …