Comparing version 0.0.1 to 0.0.2
@@ -1,2 +0,2 @@ | ||
import { defineComponent } from "./src/round"; | ||
import { defineComponent } from "./src/apa"; | ||
import { derive, html } from "./src"; | ||
@@ -51,3 +51,3 @@ import { state } from "./src"; | ||
// VanX (addon) offers a reactive function that does the same. However, for the scope of | ||
// RoundJS, I believe it'd be an overkill, since it implies other helpers. I decided | ||
// ApaJS, I believe it'd be an overkill, since it implies other helpers. I decided | ||
// to go with my own lightweight version, based on Van state | ||
@@ -54,0 +54,0 @@ state: reactive({ count: 0 }), |
@@ -24,4 +24,4 @@ const { minify } = require("terser"); | ||
sourceMap: { | ||
filename: "roundjs.min.js", | ||
url: "roundjs.min.js.map", | ||
filename: "apa.min.js", | ||
url: "apa.min.js.map", | ||
}, | ||
@@ -34,10 +34,10 @@ output: { | ||
const doMinify = async () => { | ||
const code = fs.readFileSync("./dist/roundjs.es.js", "utf8"); | ||
const code = fs.readFileSync("./dist/apa.es.js", "utf8"); | ||
const minified = await minify(code, config); | ||
fs.writeFileSync("./dist/roundjs.es.min.js", minified.code); | ||
fs.writeFileSync("./dist/apa.es.min.js", minified.code); | ||
fs.writeFileSync("./dist/roundjs.min.js.map", minified.map); | ||
fs.writeFileSync("./dist/apa.min.js.map", minified.map); | ||
}; | ||
doMinify(); |
{ | ||
"name": "apajs", | ||
"version": "0.0.1", | ||
"version": "0.0.2", | ||
"description": "Small library wrapping the Web Components API", | ||
@@ -12,3 +12,3 @@ "main": "index.js", | ||
"author": "@alpalma95", | ||
"license": "ISC", | ||
"license": "MIT", | ||
"devDependencies": { | ||
@@ -15,0 +15,0 @@ "terser": "^5.24.0", |
@@ -1,4 +0,4 @@ | ||
# RoundJS | ||
# ApaJS | ||
<sub>... Because it's a minimal and bad substitute for Angular.</sub> | ||
<sub> `Apă` (_water_, in Romanian) – For when you just need a little hydration.</sub> | ||
@@ -9,17 +9,17 @@ --- | ||
I left the subtitle under the name of the library because I think it's funny (and also as a kind of reminder of how everything started). | ||
This started just for fun. I wanted to experiment around with web components and try to build something from scratch. | ||
This started just for fun, I wanted to experiment around with web components and try to build something from scratch. | ||
There was a "first" version (one could say "alpha.0.0.0.0.0.0.1", whose repository you can still check [here](https://github.com/alpalma95/roundjs-legacy)). As it might result evident, it wasn't going anywhere besides being a fun project. | ||
Nonetheless, as it turns out, I felt proud of my work and wanted to share it with the world as a "real" project. | ||
In the legacy version (one could say "alpha.0.0.0.0.0.0.1", you can still check the repository [here](https://github.com/alpalma95/roundjs-legacy)) I stated that this shouldn't be used for production and "Why would you even want another library". | ||
In the legacy version, I stated that this shouldn't be used for production and "Why would you even want another library". | ||
Well, I can come up with some reasons why I'll keep on working on it and I'm planning to use it: | ||
Well, I can now come up with a few reasons why I'll keep on working on it and I'm planning to use it: | ||
### Web components for everyone | ||
It provides a very nice and intuitive wrapper over web components. You can take either a class-based approach (by extending from `ReactiveWC`) or a functional one (by using the `defineComponent` function). At the moment, you can find an example of the functional one on the `index.js` at the root of the project. | ||
ApaJS provides a very nice and intuitive wrapper over web components. You can take either a class-based approach (by extending from `ReactiveWC`) or a functional one (by using the `defineComponent` function). At the moment, you can find an example of the functional one on the `index.js` at the root of the project. | ||
I believe that we should empower web standards whenever the requirements of our projects allow us to do so. Maybe, (and maybe I'm as well being too _naïf_), a project like this one could make someone reconsider before reaching out to a framework or a +40kb library. I mean, reusable components, encapsulated logic and (optionally) styles and reactivity out of the box. And all based on the standards of modern JavaScript<sup>1</sup>. You know JavaScript, you can still use everything you know with RoundJS. | ||
I believe that we should empower web standards whenever the requirements of our projects allow us to do so. Maybe, (and maybe I'm as well being too _naïf_), a project like this one could make someone reconsider before reaching out to a framework or a +40kb library. I mean, reusable components, encapsulated logic and (optionally) styles and reactivity out of the box. And all based on the standards of modern JavaScript<sup>1</sup>. You know JavaScript, you can still use everything you know with ApaJS. | ||
@@ -30,16 +30,16 @@ Additionally, I'm aware some people are not very delighted with OOP. That's alright. As a sort of experiment and heavily inspired by the syntax of [HybridsJS](https://hybrids.js.org/#/), I also wanted to provide a way to use functions and object literals with web components<sup>2</sup>. | ||
<sub><sup>2</sup> This "hybrid" (pun intended...) approach adds ~500b to the minified file. While it's not critical for my case, that's the size of one of the dependencies alone. Put into perspective, I'd like to provide a standalone version of it. | ||
<sub><sup>2</sup> This "hybrid" (pun intended...) approach adds ~400b to the minified file. While it's not critical for my case, that's the size of one of the dependencies alone. Put into perspective, I'd like to provide a standalone version of it. | ||
### On the shoulders of "tiny giants" | ||
### On the shoulders of <sup><sub>tiny</sub></sup> giants | ||
The main issue I faced with the legacy version was that I tried to reinvent the wheel regarding templating and reactivity. Alright, I consider myself to be pretty creative and can find my way out of most of the challenges. _However_, everything felt bloated, fragile and, definitely, not anything I'd personally use (if you're curious about the approach I was aiming at, please check the legacy repository). | ||
The main issue I faced with the legacy version was that I tried to reinvent the wheel regarding templating and reactivity. Alright, I consider myself to be pretty creative and can find my way out of most of the challenges. _However_, everything felt bloated, fragile and, definitely, not anything I'd personally use (if you're curious about the approach I was aiming at, please check out the legacy repository). | ||
That's why I invested quite a lot of time in researching possible solutions. After considering several options, I found two solutions that fit 100% into my needs: | ||
- [VanJS](https://vanjs.org/): Literally, it only provides reactivity and a functional approach to templating (just creating nodes from functions and binding them to a reactive state to update the DOM accordingly). Gzipped, it's _only 0.9kb_. | ||
- [HTM](https://github.com/developit/htm): It uses tagged template literals to build the DOM. It was originally designed to pair with Preact, so we could use it without a build step. I wired it up so it'd take VanJS as "pragma". _Under 500b_. | ||
- [VanJS](https://vanjs.org/): Literally, it only provides reactivity and a functional approach to templating. Gzipped, it's _only 0.9kb_. | ||
- [HTM](https://github.com/developit/htm): It uses tagged template literals to build the DOM based on a sort of "pragma". It was originally designed to pair with Preact, so we could use it without a build step. I wired it up so it'd take VanJS as pragma. _Under 500b_. | ||
These, integrated and combined with the core of RoundJS, weigh (minified) about just _4.5kb_ **without gzip** (find the 3 dist files under `./dist-check-sizes`). This was one of my requirements, that it could be just dropped into an `assets` folder and export the functionalities directly into the code. Without any build step or additional compression. | ||
These, integrated and combined with the core of ApaJS, weigh (minified) about just _4.5kb_ **without gzip** (I kept track of the dist files for easier reading of sizes). This was one of my requirements, that it could be just dropped into an `assets` folder and export the functionalities directly into the code. Without any build step or additional compression. | ||
Yet, gzipped it's **2.45kb**. This can change as Round is under active development, but I'm not planning to add any extra functionalities, only tests and do the needed amendments. I'm aware there's also some duplication and some things I could do to improve these numbers, so I hope everything balances right. | ||
Yet, gzipped it's **2.45kb**. This can change as Apa is under active development, but I'm not planning to add any extra functionalities, only tests and do the needed amendments. I'm aware there's also some duplication and some things I could do to improve these numbers, so I hope everything balances right. | ||
@@ -46,0 +46,0 @@ ### It's my work (OK, this one is maybe too personal) |
@@ -1,3 +0,3 @@ | ||
import { ReactiveWC, defineComponent } from "./round"; | ||
import { html } from "./round-html"; | ||
import { ReactiveWC, defineComponent } from "./apa"; | ||
import { html } from "./apa-html"; | ||
import { reactive } from "./reactive"; | ||
@@ -4,0 +4,0 @@ import van from "vanjs-core"; |
@@ -10,6 +10,6 @@ import { defineConfig } from "vite"; | ||
entry: "src/index.js", | ||
name: "roundjs", | ||
fileName: (format) => `roundjs.${format}.js`, | ||
name: "apajs", | ||
fileName: (format) => `apa.${format}.js`, | ||
}, | ||
}, | ||
}); |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
200193
33
2