@benev/slate

🪨 @benev/slate

🚧 prerelease wip under constructon subject to change

• frontend ui framework
• lit compatible, uses lit-html for templating
• GoldElement is a replacement for LitElement
• SilverElement is just like GoldElement but for the light dom
• ShaleView is a sophisticated view class
• Flat is a state management system
• Pipe is cool syntax for.. piping
• Op is a system for showing loading spinners
• prepare_frontend connects your components and views with app-level context and state management

👷 recommended setup

1. install slate into your project

npm i @benev/slate

1. establish a "context" for your app

import {css} from "lit"
import {BaseContext} from "@benev/slate"

export class Context extends BaseContext {

  // state management system
  flat = new Flat()

  // applied to components and views
  theme = css`
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  `
}

1. prepare your frontend

export const {component, components, view, views} = prepare_frontend<Context>()

1. register all your components to the dom

import {register_to_dom} from `@benev/slate`

register_to_dom(components(context, {
  MyElement,
  AnotherElement,
  WhateverElement,
}))

🥇 GoldElement

import {html, css} from "lit"
import {GoldElement} from "@benev/slate"

export const MyComponent = component(context => class extends GoldElement {
  static styles = css``

  #state = context.flat.state({
    count: 0,
  })

  #views = views(context, {
    MyView,
  })

  #increment => () => {
    this.#state.count++
  }

  render() {
    return html`
      <p>count: ${this.#state.count}</p>
      <button @click=${this.#increment}>increment</button>
      ${this.#views.MyView({props: [this.#state.count]})}
    `
  }
})

🥈 SilverElement

it's just like GoldElement, except it's light dom (no shadow dom), and thus it cannot have its own stylesheet (relies on styling from above).

🗿 ShaleView

export const MyView = view(context => class extends ShaleView {
	name = "my-view"
	styles = css``

	render(count: number) {
		return html`<p>${count}</p>`
	}
})

• views are very similar to components
• but they are not custom elements
• they don't need to be registered to the dom
• views have their own shadow dom
• they do this thing called auto_exportparts
  • automatically exports shadow parts across many shadow layers
  • it's on by default
  • you just give the view a part, and it will use that part as a prefix to any sub-parts

more utilities with new docs coming soon

• 🥞 Flatstate docs
• 🪈 Pipe docs
• 💫 Op docs

Changelog

v0.0.0-dev.16

• 🟥 significant rework
  • introduce experimental new context.watch WatchTower and StateTree systems
  • rename context.tower to context.signals
  • prepare_frontend usage changes
    • new pattern returns the "slate" object
    • "slate.carbon", "slate.obsidian", etc
    • now setting of context can be deferred to runtime
    • slate.context = new Context()
    • this made deferred_frontend obsolete, so we deleted it
  • prepare_frontend's component helper has changed
    • plain components, like gold and silver, no longer need any helper
    • now you must use the new slate.components helper to apply the current context to a group of plain components, at runtime, prior to registration (if you want the components to be reactive and use the css theme)
  • change Attributes.base to attributes