search

nombrekeff / cardboard-js

A very simple, yet powerful reactive framework, to create web applications. All of this with, no HTML, CSS, JSX, and no required build.
https://nombrekeff.github.io/cardboard-js/
MIT License
8 stars 0 forks source link

Create single file bundle #12

Open nombrekeff opened 1 year ago

nombrekeff commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

Otomatyk commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

Otomatyk commented 1 year ago

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

Otomatyk commented 1 year ago

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

nombrekeff commented 1 year ago

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 commented 1 year ago

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

nombrekeff commented 1 year ago

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 commented 1 year ago

Only collaborators can create PR ...

nombrekeff commented 1 year ago

Sorry, I will add you!

nombrekeff commented 1 year ago

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

Otomatyk commented 1 year ago

Sent!

nombrekeff commented 1 year ago

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 commented 1 year ago

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

nombrekeff commented 1 year ago

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 https://github.com/nombrekeff/cardboard-js/issues/12#issuecomment-1766719882, or unsubscribe https://github.com/notifications/unsubscribe-auth/AECA6PAZDMU5CO4NZ3R343LX72TWXAVCNFSM6AAAAAA6AMTVIGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONRWG4YTSOBYGI . You are receiving this because you authored the thread.Message ID: @.***>

Otomatyk commented 1 year ago

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

nombrekeff commented 1 year ago

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 https://github.com/nombrekeff/cardboard-js/issues/12#issuecomment-1768051075, or unsubscribe https://github.com/notifications/unsubscribe-auth/AECA6PFT66F67GSRTNCH2ATX76ONVAVCNFSM6AAAAAA6AMTVIGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONRYGA2TCMBXGU . You are receiving this because you authored the thread.Message ID: @.***>

Otomatyk commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 6 months ago

His account has been probably hacked

YuShengHou commented 6 months ago

Main、侯已经收到你的邮箱

Otomatyk commented 6 months ago

What ?

Main、侯已经收到你的邮箱

nombrekeff commented 6 months ago

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

Otomatyk commented 6 months ago

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