Comments (7)
I sorta doubt we’ll ever do control flow tags/templates in arrow. instead they would be more like hydration hints. The actual control flow would always be in javascript. Simple pseudo code example:
html`<div>Hello <span>${() => state.location}<span></div>`
this would server render something like:
<div data-fragment="812ye79gh" data-ssr-pos="[[0,1,0]]">Hello <span>world</span></div>
This could then be re-hydrated directly from the dom:
const el = document.querySelector('[data-fragment="812ye79gh"]')
rehydrate(el, [() => state.location])
Obviously it gets much more complicated than that, but there is the basic idea. The control flow would stay in pure js that ships along with the html.
from arrow-js.
There is not currently a way to do that, but this is squarely on the path for adding ssr/hydration support. That said, arrow is still quite experimental and doesn’t have any funding so time is quite limited — in otherwords dont hold your breath waiting for it 😂
from arrow-js.
What if we add a stupid svelte-like syntax that just acts as a shortcut and could then by parsed just using string replacement + eval? In this way it will add nearly any code to arrowjs.
for example:
import {evalTemplate} from "arrow-js"
const appElement = document.getElementById('app');
window.data = reactive({
name: 'hello'
})
const template = evalTemplate(appElement.outerHTML)
template(appElement)
<div id="app">
{#if name == 'hello'}
<div>hello</div>
{:else}
<div>not hello </div>
{/if}
{ app.name }
</div>
from arrow-js.
That looks great, but it does not address the issue I'm facing. I don't want to use arrow-js inside a server side rendered pipeline, I would argue the best selling point of arrow-js is the lack of a build step.
You throw your interface on a static file server and you are done. Simple and beautiful.
Yet, terrible for SEOs and not very developer friendly - no syntax highlighting and so on. If we were able to build components directly from the innerHTML of an element, it would be way nicer. Maybe not as a core feature of arrow-js, but as a plugin (even though, the template parser would be just like 100 bytes).
I've made a proof of concept with this and other extensions bundled here: https://github.com/lucafabbian/archeryjs/blob/main/src/index.ts
With the relevant function being:
const extractTemplate = (template : string) => {
let a = 'html`' + template + '`'
const replacements = [
['>', '>'],
['<', '<'],
['&', '&'],
[/{#if(.*?)}/g, (_, a) => '${ () => '+ a + ' && html`'],
['{/if}', '`}'],
[/{#for(.*?)of(.*?)}/g, (_, b, a) => '${ () =>'+ a + '.map( (' + b + ') => html`'],
['{/for}', '`)}'],
['{{', '${($event)=>'],
['}}', '}'],
['\\{', '{'],
['\\}', '}'],
]
for( const [old,replace] of replacements){ // @ts-ignore
a = a.replaceAll(old, replace)
}
return window.eval(a);
}
I understand this is not in the original project scope, yet I've included this in several small projects at work, and it works like a charm.
The way you would use this would be something like
const elem = // get element from DOM
const template= extractTemplate(elem.innerHTML)
template(elem)
from arrow-js.
Gotchya, I hear what you’re saying. There may be some way to do this well. I’m curious what would draw you to using Arrow for this use case vs something like Apline?
from arrow-js.
In the end, we actually switched to Alpine, and we are kinda happy with that.
ArrowJS would be better because there is less "magic" behind. You know exactly what's happening and where. Alpine auto-mounts things, and its syntax it's html-centric, whereas we would prefer a JavaScript first approach.
For example, we were using RunCSS to write html with tailwind without preprocessing. ArrowJS let us introduce a hook and process tailwind classes there, while with Alpine we resolved to just watch the whole html tree with a mutation observer.
from arrow-js.
ouch, yeah thats a big observer haha. Well, arrow is a passion project for me mostly, sadly i dont get nearly enough time to work on it compared to the other OSS work im doing. That said, its my favorite and if I’m ever able to get some time I plan to really flesh it out, so stay tuned for future updates.
from arrow-js.
Related Issues (20)
- 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
- [Question] Are there ways to integrate with hyperscript interfaces? HOT 4
- 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.