3 ms·
> Can we fix this? Sure, by returning to basics. Let's assume that Web Component is a DOM element with a code associated with it + lifecycle events. Here is
by c-smile 6y ago
> Can we fix this?
Sure, by returning to basics.
Let's assume that Web Component is a DOM element with a code associated with it + lifecycle events.
Here is how Components are done in Sciter ( https://sciter.com https://sciter.com )
1. CSS has got `prototype` property:
div.my-component { prototype: MyComponent url(script/components.js); }
where MyComponent is the name of class in JS, url (optional) is an URL where this MyComponent can be found.
2. In script that custom component is usually represented by ES6 class (+ decorators)
class MyComponent extends Element {
// lifecycle event/method
componentDidMount() { }
// lifecycle event/method
componentWillUnmount() { }
// component specific methods
foo() { }
bar() { }
// event handlers - decorated functions
@event("mousedown")
onMouseDown(evt) { }
@event("click", "button#submit")
onSubmit(evt, button) { }
@event("change", "input.name")
onNameChange(evt, input) { }
}
and that's it. Sciter lives with this schema more than 10 years - proven to be very convenient and flexible.
Yet simple: one property `prototype` + simple wiring of lifecycle events.
- agumonkey 6y agoafter doing a bit of vue I wanted this :)
- c-smile 6y agoThe good thing about this mechanism is that you just need CSS in order to declare your components. The script will run only if you have elements with matching selectors. So you may have component libraries. Browser will instantiate only used components.
- cdata 6y agoThis is literally what a custom element is. Assuming your @event decorator is built upon the EventTarget interface: class MyComponent extends HTMLElement { // lifecycle event/method connectedCallback() {} // lifecycle event/method disconnectedCallback() {} @event("mousedown") onMouseDown(evt) { } @event("click", "button#submit") onSubmit(evt, button) { } @event("change", "input.name") onNameChange(evt, input) { } } That said, custom elements don't cost $310 for an indie license. Instead, they are free and available in every web browser.
- c-smile 6y ago> @event decorator is built upon the EventTarget In Sciter it is not. @event there is not calling Element.addEventListener but declares event handlers as static table associated with class. Essentially components are attached to DOM elements by calling Object.setPrototypeOf(element, MyComponent) - no memory allocation is happening (modulo code in componentDidMount) - very fast and lightweight. Yet, in your sample, you've missed the call of customElements.define(), that alone is limiting use cases quite a lot. > custom elements don't cost $310 for an indie license. Sciter is free, as browsers too, components in SDK, hundreds of them, are free too. You will need to pay $310 only if you need source code of Sciter Engine itself. Sciter is like a browser in that respect, try to request source of MS Edge or Google Chrome for any money - good luck with that.
- cdata 6y agoThe web components in Chrome and Edge are both implemented in the open source Chromium project. So, it is free for all to read, use and modify as they wish (in accordance with the terms of the license https://chromium.googlesource.com/chromium/src/+/master/LICENSE https://chromium.googlesource.com/chromium/src/+/master/LICE...)
- c-smile 6y agoHere is running campaign to Open Source Sciter: https://www.kickstarter.com/projects/c-smile/open-source-sciter-engine https://www.kickstarter.com/projects/c-smile/open-source-sci... By donating there you can help to make it happen, your move? That will be real Open Source. Edge and Chrome are not Open Source, they are users of it.
- xmprt 6y agoHolding open source hostage to a $100,000 goal doesn't sound like "real" open source to me either. And you're still going to offer it under either GPL or paid commercial licenses. Chromium is released under a BSD license which is a lot more permissive. It's totally fine to make money but when people have valid critiques you shouldn't turn around and try shaming competitors about something that you're not even doing.