Show HN: Affinity.js – A simple view component library with store | Hacker News Reader

Show HN: Affinity.js – A simple view component library with store

33 pointsorizens12 comments

with affinity you can make multiple apps (components eventually) and store (ala redux) - while a store can be shared through apps.

This started as a case study and as a small reusable code for creating self contained dom elements with functionality - during the time of development, ideas and inspiration came from angular, react and vuejs.

suggestions and feedback is mostly welcomed.

The interesting challenges were finding ways for these topics:

1. create a component lib using dom and js only, without any 3rd party .

2. producing semantic html in dom .

3. allow template micro syntax (using @click to bind an event listener) .

4. allow reusing custom elements within a component's template .

5. creating a simple store interface and auto connect it with a component to allow re render whenever the store changes .

any feedback and suggestions are welcomed

https://github.com/orizens/affinity

Feedback:

1. Parser prohibits literal "@click", there is no escape mechanism.

2. Only click, what about other DOM events?

3. Leaking: Event listeners not removed in destructor (your clean() function?)

4. No XSS protection, ow.

5. No tests, might want some.

6. Based on innerHTML assignment with nothing to guarantee valid HTML.

7. No error handling.

1. '@click' is replaced with a valid 'data-af-click' attribubte.

2. click was a poc - all events are added.

3. 'clean' is using "node.remove" ad removes any references to functions - so - no detached references are left then.

4. correct - not taken into consideration at the moment.

5. agree.

6. innerHTML is a valid assignment - the browser validates it.

7. to be discussed

I think you're being somewhat defensive of what appears to be a prototype, just offering the feedback you requested.

1. What I mean is that <span>@code</span> becomes <span>data-af-click</span>.

2. Where? Not seeing them.

3. You're mistaken about event handler cleanup: https://dom.spec.whatwg.org/#dom-childnode-remove

6. My point here is that relying on strings is brittle. HTML builders, declarative APIs like JSX/React.createElement, and template-based approaches (where the template is a DOM node) are more robust.

This is probably obvious, but just in case : for point 4 this is DOM-based XSS protection that is missing.

added a more robust and better event listeners handling - which prevent leaking completely.

Nice work! Can I ask what the experience was like writing your own view library? Did you find it difficult or relatively easy to put together? Were there any challenges that you didn't anticipate? Also, what is your long term vision for Affinity...is it just a "see if I can do it" project or do you want to see it evolve?

- i'm the main developer for this now.

- few features were fun to think about - there were some challenges in making it work recursively for the template parsing.

- thinking of a simple api to use for the component also, making sure there are no memory leaks requires deep testing. - making auto render and connecting the store was a nice challenge

currently, i don't have a long term vision for it.

however, i do think of it of way to bootstrap small quick widgets in a page while sharing one or more stores. the aim is reusing the way i can create standalone dom elements fast and easy while using only es-latest code.

As a developer, I'd rather have strongly typed HTML than a template string.

It's also better for syntax highlighting and code completion.

Have you explored the mithril.js [1] project? It seems to have reasonably similar goals, although the templating is pretty different from how you implemented it. Mithril doesn't have a concept of state, which also sets it apart from your project, but it seems to handle re-rendering just fine without it.

[1] https://mithril.js.org/

i'm familiar with mitril - however i explored my own way to approach a library.

Your live demo has a ts compile error.

Reply on news.ycombinator.com