DrSensor / DrSensor/nusa

Conditional rendering

Open
#7 0 comments 0 reactions 0 assignees View on GitHub
documentation
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.