Comments (4)
I'll take a jab at this idea and see if it can be made configurable and maybe share some ideas back later!
I see potential in https://github.com/justin-schroeder/arrow-js/blob/master/src/html.ts#L400 as a way to override h
(i.e. document.createElement
). However html
is DOM-based, so more changes might be needed. But the main idea is to decouple DOM-based logic in html
into configurable methods that consumers can provide while letting arrow-js
keep to its current logic and behaviors.
I don't think this is simple to do, and not suggesting any changes. Mostly just curious if such a configuration makes sense, which may enable adoption in the JS community via:
- to allow integrations with
arrow-js
- prefer
arrow-js
orlit
ES6 template syntax more than frameworks using transpilation. In a sense if customh
is supported, users can utilizearrow-js.html
to author markup, further bringing the community closer to it andlit
. - support SSR
- improve migration paths from other frameworks.
from arrow-js.
Great question — and fundamentally the answer is no, but with all things — it depends. Some important things to note:
- Arrow does not use a virtual DOM and is fundamentally incompatible with the Virtual DOM concept.
- Arrow uses fine-grained reactivity to only transform things that need to be reactive.
To be fair these points are not very well spelled out, and the currently published code base is "experimental" in that its a first pass at the concept so some of the benefits (performance) of this approach are not yet realized (has moderate performance rather than blazing fast performance 😂).
That said, it would be possible to decompose html
blocks into h
function calls, but I’m not sure it provides any significant benefit? Would love to understand the pros of this approach more before make any judgement on it. What use cases can you think of? As for architecture I do believe future versions will include additional hooks for the kinds of extensions you’re describing.
from arrow-js.
Hey @justin-schroeder, thanks for your prompt reply.
The motivation here is to see if arrow-js
can offer a feature while taking one less opinionated behavior (i.e. "always using document.createElement
to create nodes):
arrow-js
accepts a customh
yperscript-compatible function on initialization (document.createElement
by default).
The default behavior renders to DOM (currentarrow-js
behavior), but one can provide a customh
and basically benefit fromarrow-js.html
as a templating engine, without modification to the features and API e.g. do not support any form of VDOM.
I'm not sure how this would entirely work, but one might provide the possible values of h
:
React.createElement
: which manages a VDOM tree that React eventually renders. In fact this promotes non-JSX/non-transpile development flow of React as JSX is technically optionally (it's just a DX feature), since everything is usingReact.createElement
under the hood.MyCustomCreateElement
: which does custom things e.g. I can write ah
method that just assembles a JSON tree for testing/debugging.
I want to stress I'm not proposing any changes to arrow-js
's API, but was wondering if it is possible to abstract h
(with document.createElement
as the default value) to configure arrow-js
. This might open the doors to migration from other frameworks.
Example of how it "may" work?
import { configure } from 'arrow-js';
configure({h: document.createElement}); // no need to configure but stating as an example
configure({
h: React.createElement,
mapHtmlProps,
}); // provide a custom createElement and `mapProps`
const mapHtmlProps = { // gives a chance to map from the consumer interface to arrow-js/lit's `html`
click: 'onClick',
class: 'className',
}
html`<button @click="${() => console.log('clicked')}"`
// evaluates to React.createElement('button', { onClick: () => console.log('clicked') }); etc
Motivation for this question comes from my personal exploration on creating framework-agnostic style/theming libraries i.e. uinix-ui
which works in any h
-friendly library (e.g. React, Preact, Solid, Mithril, htm
etc), so the motivation derives from there.
from arrow-js.
What use cases can you think of?
For my part, it's that editing normal functions is much easier than editing embedded string literals. Arrow is so stripped down (which is great) that it seems like an odd requirement for me to find custom IDE tooling to get autocomplete, shortcuts, linting, etc.
from arrow-js.
Related Issues (20)
- Component from the DOM HOT 7
- TypeScript type for nested, optional reactive objects is broken HOT 1
- FYI: textarea behavior is very funky if you try to put HTML inside it rather than using the 'value' attribute HOT 2
- Script throwing "Illegal Invocation" when adding an object to a reactive array HOT 2
- How does watch function work? HOT 2
- Cross-Site Scripting Vectors (XSS) HOT 5
- Dark mode flashbang 🫣 HOT 1
- Rewrite a reactive property which has $on event throw error
- [bug] Docs navigation indicator is bugged scrolling past "Getting Started" HOT 1
- Element property syntax not working HOT 1
- Map, Set, WeakMap, WeakSet can't be wrapped successfully HOT 4
- Nested template being called unexpectedly HOT 2
- Array of text boxes without a good key? HOT 2
- Poor performance? HOT 1
- What are the rules for `reactive`? Can I use es2015 classes in my "state" HOT 4
- Binding reactively to array length HOT 2
- How to unwatch HOT 2
- Component that changes a sub-property of its own state object by async method re-renders the whole component in an infinite loop HOT 6
- Can it support the CommonJS
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from arrow-js.