This is very alpha. You can use GUN with Alpine with some two-way bindings.
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.6.0/dist/alpine.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gun/lib/open.js"></script>
<script src="https://cdn.jsdelivr.net/npm/alpine-gun@0.0.0"></script>
<script>
window.gun = Gun()
</script>
<main x-data="{user: $gun('user123'), newMessage: ''}">
<template x-if="user.loading"><span>Loading</span></template>
<template x-if="!user.loading">
<div>
<h1 x-text="user.name"></h1>
<p>Name: <input x-model="user.name"></p>
<h2>Messages</h2>
<template x-if="!user.messages"><p>No messages.</p></template>
<template x-if="user.messages" x-for="message in $setOf(user, 'messages')">
<div class="message" x-text="message.text"></div>
</template>
<input
x-model="newMessage"
x-on:keydown.enter="$addToSet(user, 'messages', {text: newMessage}); newMessage=''"
>
<div>
</template>
</main>
$gun(soul)
Returns a proxy object that contains the entire tree of the node (withopen()
), including_
properties for metadata. Will update the component on every update of the data. TODO currently updates the entire tree. TODO currently there is no way to unsubscribe$setOf(node object, property name)
Returns an array with the values in the node TODO cannot get keys, maybe rename to$entries
and return key value pairs?$addToSet(node object, property name, value)
Doesgun(node soul).get(property name).set(value)
.