https://github.com/ringabout/starlight
Another front-end framework in Nim (working in progress)
https://github.com/ringabout/starlight
js karax nim react vue
Last synced: about 1 month ago
JSON representation
Another front-end framework in Nim (working in progress)
- Host: GitHub
- URL: https://github.com/ringabout/starlight
- Owner: ringabout
- License: apache-2.0
- Created: 2022-03-28T03:16:37.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-06-05T09:03:05.000Z (almost 3 years ago)
- Last Synced: 2024-10-14T15:03:36.436Z (7 months ago)
- Topics: js, karax, nim, react, vue
- Language: Nim
- Homepage:
- Size: 113 KB
- Stars: 11
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# starlight
Another front-end framework in Nim (working in progress). It directly compiles to the `DOM` and uses `Proxy` to implement reactivity.
## Reactivity
```nim
type
Card = ref object
id: int
Counter = ref object
num: int
card: Card
var x = reactive Counter(num: 0) # = x := Counter(num: 0)
watch:
console.log "run: ", x.?num
console.log "here: ", effectsTable
watch:
console.log "run2: ", x.?num
# use `.?` to access the attributes of Reactive
x.?num += 1
x.?num = 182
x <- Counter(num: 1) # reassign; complete replacement
x.?num += 1
var y = reactive Counter(card: Card(id: 16))
watch:
console.log "card: ", y.?card.id
y.?card.id += 1
y <- Counter(card: Card(id: -1))
```
### primitives
```nim
proc createDom(): Element =
var count = reactive(0)
buildHtml(`div`):
text count
button(onClick = (e: Event) => (count += 1)): text "Count"
setRenderer createDom
```
### ref object
```nim
type
Counter = ref object
c: int
proc createDom(): Element =
var count = reactive(Counter(c: 12))
buildHtml(`div`):
text count.?c
button(onClick = (e: Event) => (count.?c += 1)): text "Count"
setRenderer createDom
```