Spect style

jquery.js

import $ from 'spect'
import { route } from 'wouter'
import { t } from 'ttag'

// main aspect
$('#app').aspect($app => {
  let [ , { id } ] = route('user/:id')

  $app.fx(() => $app
    .attr({ loading: true })
    .data({ user: await fetch('./user')})
    .attr({ loading: false })
  , id)

  $app.html`<div.t.preloader>Hello, ${$app.data('user').name}!</div>`
})

// preloader aspect
$('.preloader').aspect($el => {
  if ($el.attr('loading')) $el.html`${ $el.children } <canvas class="spinner" />`
})

// i18n aspect
$('.t').aspect($el => $el.html`${ t`${ $el.text() }` }`)

messenger-layer.js

import $ from 'spect'

// main aspect
function app ($el) {
  let [ match, { id } ] = $el.route('user/:id') // we need $el here to attach updating el effects
  
  if (!match) return
 
  $el.fx(async () => {
    $el.loading = true
    $el.user = await ky.get(`/api/user/${id}`)
    $el.loading = false
  }, id)

  $el.fx(preloader, $el.loading)

  $el.html`<div fx=${i18n}>Hello, ${ $el.user.name }!</div>`
})


// i18n aspect
function i18n ($el) {
  useLocale($(document.documentElement).attr.lang)  
  html`${ t`${ $el.text }` }`
}

// preloader aspect
function preloader ($el) {  
  if ($el.loading) $el.html`${ el.childNodes } <canvas class="spinner" />`
})

$(el).fx(app)

react.js

import $, { html, state, fx, route, attr } from 'spect'
import { t } from 'ttag'

// main aspect
$('#app', app => {
  let [ match, { id } ] = route('user/:id')
  let { user } = state()

  fx(async () => {
    attr({ loading: true })
    state({ user: await fetch('/user') })
    attr({ loading: false })
  }, [id])

  html`<div.t.preloader>Hello, ${user.name}!</div>`
})

// preloader aspect
$('.preloader', el => {
  let { loading = false } = attr()
  if (loading) html`${el.childNodes} <canvas class="spinner" />`
})

// i18n aspect
$('.t', el => {
  let lang = el.lang || document.documentElement.lang

  html`${ t`${el.textContent}` }`
})

use.js

import { useAspect, useRoute, useAttr, useState, useHtml, useEffect } from 'spect'
import { t, useLocale } from 'ttag'
import ky from 'ky'

// main aspect
function app (el) {
  useAspect(preloader)
  let [ match, { id } ] = useRoute('user/:id')
  let attr = useAttr({ loading: false })
  let state = useState({ user: null })
  let html = useHtml()
  
  useEffect(async () => {
    attr.loading = true
    state.user = await ky.get(`/api/user/${id}`)
    attr.loading = false
  }, id)

  html`<div use=${i18n}>Hello, ${ state.user.name }!</div>`
})

// i18n aspect
function i18n (el) {
  let { lang } = useAttr(document.documentElement)
  useLocale(lang)
  let html = useHtml()
  
  html`${ t`${ el.textContent }` }`
}

// preloader aspect
function preloader (el) {
  let { loading } = useAttr()
  let html = useHtml()
  
  if (loading) html`${ el.childNodes } <canvas class="spinner" />`
})

// attach aspects to target
useAspect(document.querySelector('#app'), app)