lume / lume/element

DOM-based template conditional/iteration helper alternatives to Solid.js Show/For/etc

Open
#43 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
187
Forks
5
PR merge metrics
No merged PRs in 30d

Description

I'd like to make DOM-based alternatives to some Solid.js components like Show/For/etc. For example:

```js
return html`


foo


bar



`
```

this version will operate on standards:

- the content of a `` is inert, so what `show-when` would do is clone one template or the other into the active DOM based on the condition, only causing custom elements to be instantiated for the cloned content. When `someBoolean` is true, there will not be an instance of `` because a `` does not instantiate custom elements in its `.content` document. The `.children` of a `` is empty, the template content is inside of `.content` and "inert" because it doesn't run any logic (such as custom element constructors and connectedCallbacks). When we do something like `someParent.append(template.content.cloneNode(true))`, the appended nodes come alive (custom elements constructors and connectedCallbacks run).
- this means that regardless of the underlying implementation (whether with Solid or not) we can still keep the same outside API surface.
- This gives us flexibility: with a standards-aligned interface via DOM, it means that this interface will work with anyone who uses it no matter the custom-element framework or non-custom-element framework, and no matter if we change underlying frameworks or implementation details. This makes it easy for us to change our app-level frameworks too, while still keep the template code mostly
the same (f.e. rather than having to switch from `` in solid to something else in another framework, we would at worst only need to update the attribute/prop syntax while keep the rest the same)
- in the (hopefully not too distant) future, we can replace a custom binding syntax (`[[]]`) with a native binding syntax to get even more standards aligned.

The `template.content.cloneNode()` stuff is in fact what Solid is using with Show/For and other Solid templates under the hood. It's known to be an optimal method for instantiating DOM.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No repository files or tests are named. Start by studying the proposed template.content.cloneNode() entry point and Solid.js Show/For behavior, then define the standards-based API and scope for conditional and iterative rendering; done means both helper behaviors have an agreed design and implementation path.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.