Conditional rendering
- Dominant language
- JavaScript
- Stars
- 4
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
This framework doesn't have special syntax or attribute for doing conditional rendering (i.e `:if :else`).
However, you can use slot #8 to achieve this.
```js
export default class {
buttonText = "Show"
show = false // bind to slot attribute
toggle() {
this.show = !this.show
this.buttonText = this.show ? "Hide" : "Show"
}
}
```
```html
Enter your name:
```
Both normal slot (``) and named slot (``) are supported
Rejected
```html
Current count:
Decrement
```
Changing `isCountEqualTo5` property will perform check whatever `[\\:if="isCountEqualTo5"]` and the next sibling `[\\:else]` should be inserted or removed.
> **Note** ~~use `` in the shadow root to keep the logic simple~~
> Alternatively there is no need to implement this feature. Just use `` tag and `slot:="prop"` attribute for conditional rendering.
Rejected
```html
```
> **Warning** this feature require basic math parser to avoid CSP violation via Javascript `eval`.
> - The parser should handle: [relational operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#relational_operators), [equality operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#equality_operators), and [binary logical operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#binary_logical_operators)
> - The parser and it's implementation should be loaded (`await import()`) only when `:if` attribute is found
> - Re-evaluate the expression when the dependencies/properties change (similar to how reactive computation works)
Rejected because the size can be quite big.
Rejected
Using svelte syntax is rejected. It's possible but implementing it in JavaScript can be slow in performance and bloat the bundle size. Compared to Vue or Alpine, Svelte syntax is more like parsing `.innerHTML` string rather than traversing elements then parsing it's `.textContent`. Ideally the parser should be implemented in WebAssembly but it still unknown how big it can be 🤔 (can **svelte-parser.wasm** be <2kB?)
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.