Template Release 1.0.0

Author: telamon

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+public/build/

LICENSE

@@ -0,0 +1,64 @@
+[`pure | 📦`](https://github.com/telamon/create-pure)
+[`code style | standard`](https://standardjs.com/)
+# pico-seed
+
+This is a [pico-stack](https://github.com/telamon/picostack) project template
+containing a minimal 'todo'-app using svelte
+as template engine.
+
+(You can hack it to use any other framework/template engine if you want, svelte was just what i had lying around.)
+
+[DEMO](https://pico-todo.surge.sh/)
+
+## Getting started
+Create your project if you already haven't
+```bash
+npx degit telamon/picostack-template my-project
+```
+
+Then start the local dev-server
+```bash
+yarn
+yarn dev
+```
+and navigate to [https://localhost:5000](https://localhost:5000)
+
+Other included scripts:
+```bash
+yarn dev    # Starts local dev-server
+yarn test   # Blockend dev: runs unit tests
+yarn debug  # Blockend dev: debugs unit tests
+yarn build  # Builds production webapp
+yarn sinal  # Starts a local swarm singaling server
+yarn surge  # Publishes your app to surge.sh
+```
+
+## Donations
+
+```ad
+|  __ \   Help Wanted!     | | | |         | |
+| |  | | ___  ___ ___ _ __ | |_| |     __ _| |__  ___   ___  ___
+| |  | |/ _ \/ __/ _ \ '_ \| __| |    / _` | '_ \/ __| / __|/ _ \
+| |__| |  __/ (_|  __/ | | | |_| |___| (_| | |_) \__ \_\__ \  __/
+|_____/ \___|\___\___|_| |_|\__|______\__,_|_.__/|___(_)___/\___|
+
+If you're reading this it means that the docs are missing or in a bad state.
+
+Writing and maintaining friendly and useful documentation takes
+effort and time.
+
+
+  __How_to_Help____________________________________.
+ |                                                 |
+ |  - Open an issue if you have questions!         |
+ |  - Star this repo if you found it interesting   |
+ |  - Fork off & help document <3                  |
+ |  - Say Hi! :)  https://discord.gg/8RMRUPZ9RS    |
+ |.________________________________________________|
+```
+
+## License
+
+[AGPL-3.0-or-later](./LICENSE)
+
+2022 &#x1f12f; Tony Ivanov

README.md

@@ -0,0 +1,50 @@
+const { SimpleKernel } = require('picostack')
+const { mute } = require('piconuro')
+
+const TasksSlice = require('./slices/tasks.js')
+
+class Kernel extends SimpleKernel {
+  constructor (db) {
+    super(db) // Initialize superclass
+
+    // Register slices/reducers
+    this.store.register(TasksSlice())
+  }
+
+  async createTask (title = 'unnamed task') {
+    const feed = await this.createBlock('task', {
+      title,
+      status: 'todo'
+    })
+    return feed.last.sig // Task id
+  }
+
+  async setStatus (taskId, status) {
+    const feed = await this.createBlock('update', {
+      taskId, status
+    })
+    return feed.last.id // block id
+  }
+
+  // Expose subscribable list of tasks
+  $tasks () {
+    const userId = this.pk
+
+    // Create neuron
+    const $n = subscriber => this.store.on('tasks', subscriber)
+
+    // Enrich low-level state with high-level variables
+    return mute(
+      $n,
+      tasks => tasks.map(task => ({
+        ...task,
+        owner: userId?.equals(task.author),
+        writable: true // TODO: !!task.accessList.find(k => k.equals(userId)
+      }))
+        // Sort by activity
+        .sort((a, b) => b.updatedAt - a.updatedAt)
+    )
+  }
+}
+
+module.exports = Kernel

blockend/index.js

@@ -0,0 +1,76 @@
+const { decodeBlock } = require('picostack').SimpleKernel
+const ALLOWED_STATES = ['todo', 'in-progress', 'to-verify', 'done', 'wontfix']
+function TasksSlice () {
+  return {
+    name: 'tasks', // Sets the name of this slice/registry
+
+    initialValue: [], // Initial value slice value.
+
+    filter ({ block, state }) {
+      const data = decodeBlock(block.body)
+      const { type } = data
+
+      switch (type) {
+        // Validate create task blocks
+        case 'task': {
+          const { title, date } = data
+          // Reject task invalid blocks with a reason
+          if (!title || title === '') return 'Task Must have a title'
+          if (date > Date.now()) return 'Task from future'
+        } break
+
+        // Validate update status blocks
+        case 'update': {
+          const { taskId, status } = data
+          if (!ALLOWED_STATES.find(s => status)) return 'InvalidStatus'
+
+          // Validate block against existing state
+          const task = state.find(t => t.id.equals(taskId))
+
+          if (!task) return 'TaskNotFound'
+          if (task.status === status) return 'StatusNotNew'
+
+          // Give write access the author.
+          // if (!task.author.equals(block.key)) return 'AccessDenied'
+          // TODO: write access to friends
+        } break
+
+        // Silently ignore unrelated blocks
+        // to give other slices a chance to handle it.
+        default:
+          return true
+      }
+
+      // Accept valid block
+      return false
+    },
+
+    // Apply block content to mutate state
+    reducer ({ block, state }) {
+      const tasks = [...state]
+      const data = decodeBlock(block.body)
+      const { type } = data
+
+      switch (type) {
+        case 'task': {
+          const task = data
+          // Set task-id to the block-signature that created it.
+          // this will be useful later when we attempt to update it's status.
+          task.id = block.sig
+          task.author = block.key
+          task.updated = data.date
+
+          tasks.push(task) // Append task to list
+        } break
+
+        case 'update': {
+          const task = tasks.find(t => t.id.equals(data.taskId))
+          task.updated = data.date
+          task.status = data.status
+        } break
+      }
+      return Object.freeze(tasks)
+    }
+  }
+}
+module.exports = TasksSlice

blockend/slices/tasks.js

@@ -0,0 +1,59 @@
+<script>
+import { boot } from './api'
+import Tasks from './Tasks.svelte'
+import Devbar from './DevelopersBar.svelte'
+
+const bootloader = boot()
+</script>
+<main class="container">
+  <!-- "Hello" section -->
+  <section>
+    <h1>PiCO<sub>stack<sub></h1>
+    <h2 class="tagline"><small> 0% Backend, 10'000% Frontend</small></h2>
+    <h2>Hello Web 3.0</h2>
+    <p>
+      This is the
+      <bold><a href="https://github.com/telamon/picostack">pico-stack</a></bold>
+      quickstart template, run:
+    </p>
+    <pre><code>
+      &gt; npx degit <a href="https://github.com/telamon/pico-template">telamon/pico-template</a> my-project
+    </code></pre>
+    <p>
+      and build your own <strong>fully decentralized</strong> web-app.
+    </p>
+  </section>
+
+  <!-- Wait for bootloader then show Tasks -->
+  {#await bootloader}
+    <h3>Loading kernel...</h3>
+    <progress value="7" max="100" indeterminate="true"></progress>
+  {:then}
+    <Tasks/>
+  {:catch error}
+    <h3>Boot failure!</h3>
+    <p>{error.name}</p>
+    <pre>{error.stackTrace}</pre>
+  {/await}
+
+  <!-- nice to have -->
+  <Devbar/>
+
+  <!-- Remove/replace this line :) -->
+  <footer>Pico ❤️ DecentLabs 2022</footer>
+</main>
+<style>
+  h1 {
+    text-align: center;
+    font-size: 4em;
+    color: var(--primary);
+    margin-bottom: 0;
+  }
+  footer {
+    text-align: center;
+    margin-top: 3em;
+  }
+  .tagline { text-align: center; }
+  .tagline small { color: gray; font-weight: normal; }
+
+</style>

frontend/App.svelte

@@ -0,0 +1,92 @@
+<script>
+/**
+  It was fun writing this component, keep if useful.
+*/
+
+// Keep this component or throw it away, It was fun
+import {
+  purge,
+  run,
+  connections,
+  kernel,
+  svlt
+} from './api.js'
+import { mute, combine } from 'piconuro'
+
+
+// When reducer was changed rerun available blocks
+async function reloadStore () {
+  await kernel.store.reload()
+    .then(() => console.info('Reloaded store successfully'))
+    .catch(error => {
+      console.error('Reload failed:', error)
+    })
+}
+
+// https://stackoverflow.com/questions/1248302/how-to-get-the-size-of-a-javascript-object
+function roughSizeOf(object) {
+  const objectList = []
+  const stack = [ object ]
+  let bytes = 0
+  while (stack.length) {
+    const value = stack.pop()
+    if (typeof value === 'boolean') bytes += 4
+    else if (typeof value === 'string') bytes += value.length * 2
+    else if (typeof value === 'number') bytes += 8
+    else if (
+      typeof value === 'object'
+      && objectList.indexOf(value) === -1
+    ) {
+      objectList.push(value)
+      for(const i in value ) stack.push(value[i])
+    }
+  }
+  return bytes
+}
+const sliceNames = Object.keys(kernel.store.state)
+const combinedStateNeuron = combine(
+  ...sliceNames.map(name => sub => kernel.store.on(name, sub))
+)
+
+const stateMemory = svlt(
+  mute(
+    mute(
+      combinedStateNeuron,
+      states => states.reduce((sum, state) => sum + roughSizeOf(state), 0)
+    ),
+    bytes => (bytes / 1024).toFixed(2) // kilos
+  )
+)
+
+/**
+* Wishlist let picostore keep track of bytes and blocks accepted
+* and expunged.
+*/
+const nBlocks = svlt(
+  mute(
+    combinedStateNeuron,
+    () => kernel.store._stores.reduce((sum, s) => sum + s.version, 0)
+  )
+)
+
+</script>
+<code>
+  <span class="ctrls">
+    <btn class="inverse" on:click={reloadStore}>Reload</btn>
+    <btn class="inverse" on:click={purge}>Purge</btn>
+  </span>
+  <span class="primary">
+    [DevelBar]
+  </span>
+  Kernel: <strong>{$run}</strong>
+  Peers: <strong>{$connections}</strong>
+  Blocks: <strong>{$nBlocks}</strong>
+  Memory: <strong>{$stateMemory}kB</strong>
+</code>
+<style>
+code { display: block; }
+.ctrls {
+  float: right;
+}
+.primary { color: var(--primary); }
+</style>