npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sigl

v2.0.0

Published

Web framework

Downloads

92

Readme

Web framework

Examples

/** @jsxImportSource sigl */

import $ from 'sigl'

// simple reactive element

interface ZooElement extends $.Element<ZooElement> { }

@$.element()
class ZooElement extends HTMLElement {
  @$.out() bananas = 0
  mounted($: this['$']) {
    $.render(({ bananas }) => (
      <div>
        {bananas} bananas
        <button onclick={() => $.bananas = bananas + 1}>+</button>
        <button onclick={() => $.bananas = bananas - 1}>-</button>
      </div>
    ))
  }
}

// example mixin

const runnable = $.mixin(superclass =>
  class extends superclass {
    speed = 10
  }
)

const swimmable = $.mixin(superclass =>
  class extends superclass {
    depth = 10
  }
)

// a plain reactive class

interface RxFoo extends $.Reactive<RxFoo> { }
@$.reactive()
class RxFoo {
  // properties
  result = 555

  min = 100
  max = 1000

  // example reducers
  scale = $(this).reduce(({ min, max }) => max - min)
  normal = $(this).reduce(({ scale, min, result }) => (result - min) / scale)
}

const rx = new RxFoo()
console.log(rx.normal)

// an element with events

interface FooEvents {
  jump: CustomEvent<{ height: number }>
}

interface FooElement extends $.Element<FooElement, FooEvents> { }

@$.element()
class FooElement extends $.mix(ZooElement, runnable, swimmable) {
  // dependencies
  Zoo = $.element(ZooElement) // makes a jsx component out of a web component element

  // attributes (reflected in html and reactive to them)
  @$.attr() color = 'blue'
  @$.attr() another = 123
  @$.attr() withCapital = true
  @$.attr() notYet = $.Boolean

  // properties
  result = 42

  min = 100
  max = 1000

  // example reducers
  scale = $(this).reduce(({ min, max }) => max - min)
  normal = $(this).reduce(({ scale, min, result }) => (result - min) / scale)

  inverted = $(this).fulfill(({ normal }) => fulfill => fulfill(-normal), 0)

  // example callback that mutates state
  toggle = $(this).callback(({ $, withCapital }) => (() => {
    $.withCapital = !withCapital
  }))

  // a ref we fill at render
  button?: HTMLButtonElement

  // a ref that we will be attaching effects on
  @$.out() zoo?: ZooElement
  hasBananas = false

  onPointerDown?: $.EventHandler<FooElement, PointerEvent>

  mounted($: this['$']) {
    // example reducer with circular dependency
    $.result = $.reduce(({ min, max, result }) => Math.max(min, Math.min(max, result)))

    $.onPointerDown = $.reduce(() =>
      $.queue.throttle(100)(_e => {
        //
      }), _ => { })

    // mixins test
    $.effect(({
      speed,
      depth,
    }) => {
      const s = speed
      const d = depth
      console.log('got speed and depth from mixins', s, d)
    })

    $.effect(({ host }) => {
      // html property listeners work like with regular elements
      host.onjump = ({ detail: { height } }) => {
        console.log(height)
      }

      // $.on has type access to all possible events (click etc)
      $.on(host).jump(({ detail: { height } }) => {
        console.log(height)
      })
      // host.on has type access only to our own host events
      host.on('jump').once.passive($.atomic(({ detail: { height } }) => {
        console.log('height', height)
      }))

      // $.dispatch has type access to all possible events (click etc)
      $.dispatch.bubbles.composed(host, 'jump', { height: 456 })
      // host.dispatch has type access only to our own host events
      host.dispatch.bubbles('jump', { height: 123 })
    })

    // example of the ref of the 'button' element firing when filled
    // and assigning a click handler with preventDefault + stopPropagation mods
    $.effect(({ button }) => $.on(button).click.prevent.stop(console.log))

    // example of being reactive to state from foreign elements
    $.effect(({ zoo }) =>
      // apply effect on raf (requestAnimationFrame)
      zoo.$.effect.raf(({ bananas }) => {
        $.hasBananas = !!bananas
      })
    )

    $.effect(() => {
      return () => {
        console.log('disconnected')
      }
    })

    // this part can be inserted in the render below but will only appear
    // when its dependencies are met. both .part and .render also accept a
    // second argument, which is the default output when it's not yet fulfilled
    const Bar = $.part(({ withCapital }) => <div>{withCapital ? 'On' : 'Off'}</div>)

    // main render in animation frame
    $.render(({ Zoo, hasBananas, color, result, normal, toggle, withCapital }) => (
      <>
        <style>
          {$.css /*css*/`

          /* top level is :host */
          display: block;
          background: #444;

          button {
            /* an example of conditional css using regular string templating */
            background: ${withCapital ? 'pink' : 'purple'};

            /* sass style nesting */
            &:hover {
              background: orange;
            }
          }

          `(/* here we can set a different top level selector, default is :host */)}
        </style>
        <div>
          <button
            ref={$.ref.button}
            onclick={$.event.stop(() => {
              $.color = color === 'red'
                ? 'blue'
                : 'red'
            })}
          >
            Toggle inline
          </button>

          color: {color}

          <hr />

          <Zoo ref={$.ref.zoo} />

          {hasBananas
            ? ($.zoo!.bananas) < 0
              ? 'bananas?'
              : 'bananas!!'
            : 'no bananas :('}

          <hr />

          result: {result}

          <button onclick={() => $.result = result + 1}>+</button>
          <button onclick={() => $.result = result - 1}>-</button>

          <hr />

          normal: {normal.toFixed(3)}

          <hr />

          <Bar />

          <button
            onclick={$.event.prevent.throttle(500)(() => {
              $.withCapital = !withCapital
            })}
          >
            Toggle throttled inline
          </button>

          <button onclick={$.queue.throttle(300)(toggle)}>
            Toggle method
          </button>
        </div>
      </>
    ))
  }
}

customElements.define('x-foo', FooElement)
const foo = new FooElement()
document.body.appendChild(foo)
foo.setAttribute('color', 'red')

interface BarElement extends $.Element<BarElement> { }

@$.element()
class BarElement extends $.inherit(FooElement) {
}

customElements.define('x-bar', BarElement)
new BarElement()

interface XElement extends $.Element<XElement> { }

@$.element()
class XElement extends $.mix(HTMLElement, $.mixins.observed()) {
  @$.out() foo = 123
}

customElements.define('x-x', XElement)
// new BarElement()
import $ from 'sigl/worker'

interface RxFoo extends $.Reactive<RxFoo> {}
@$.reactive()
class RxFoo {
  // properties
  result = 555

  min = 100
  max = 1000

  // example reducers
  scale = $(this).reduce(({ min, max }) => max - min)
  normal = $(this).reduce(({ scale, min, result }) => (result - min) / scale)
}

const rx = new RxFoo()
console.log(rx.normal)

API

Credits

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas