Replies: 4 comments 4 replies
-
I second a request for this. One representative use case is calling |
Beta Was this translation helpful? Give feedback.
-
(This is @irskep again, just poking at this during some work downtime. I know it's confusing.) I took a crack at another minimalistic version of this idea: https://github.com/justin-schroeder/arrow-js/compare/master...stevelandeyasana:arrow-js:steve/refs-experiment?expand=1 I added special treatment for 'ref' attributes; Here's the code I added to the 'tabs.js' example to demonstrate: const tasksPanel = html`
<div class="panel" ref="${(el) => console.log('Mounted Tasks panel on', el)}">
<h4>Tasks Due</h4>
<!-- ... -->
</div>
` The main problem with my code is it doesn't directly solve the use case I mentioned above, i.e. autofocusing an element when it appears. If you add an @justin-schroeder if you think this is a reasonable approach I'd be happy to work on it some more, or stop if you don't agree with it. |
Beta Was this translation helpful? Give feedback.
-
I went ahead and tried my idea of only calling the functions after the DOM nodes were present in the tree, which makes the autofocus-input example work: https://github.com/justin-schroeder/arrow-js/compare/master...stevelandeyasana:arrow-js:steve/refs-experiment-2?expand=1 As a user it feels nice to me (naming aside). I can't think of any needs I have that wouldn't be served by this or a similar API. |
Beta Was this translation helpful? Give feedback.
-
Another nice thing to have would be a way to directly insert DOM nodes into a template, which would reduce the code I'd need to write to integrate non-Arrow code with my Arrow templates. const div = document.createElement("div"); // toy example; really I'm using CodeMirror's EditorView.dom
div.innerHTML = "blah blah";
const template = html`<div class="Editor" dom="${div}"></div>` This could also mean you could have reactive DOM in templates: const nodes = reactive({x: document.createElement('div')});
const template = html`<div class="Editor" dom="${() => nodes.div}"></div>`;
template(document.body);
nodes.x = document.createElement('span'); // replaces div created earlier Just a thought. Obviously this isn't strictly necessary when refs exist, but it could be a natural extension of the philosophy of this library. |
Beta Was this translation helpful? Give feedback.
-
Hi,
I have made a very minimalistic implementation of this – see master...jaandrle:arrow-js:dev-ref. Its use is as straightforward as with other reactive expressions:
…but maybe it looks a little “code-twisting”.
I can add some syntax sugar, for example:
Or maybe do it completely differently? What do you think?
Beta Was this translation helpful? Give feedback.
All reactions