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

shadow-render

v0.8.0

Published

[![Open Source](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://opensource.org/)

Downloads

19

Readme

SHADOW RENDER

Open Source

Whats new in this version ?

  • Complete re-write of the toolkit.

How to install

Currently in active development.

Clone the Repository.
Inside the 'src' folder add your components.

You can use npm and get the latest version that might be a little behind on features. Currently the project has zero dependencies so what you are pulling from npm is the unminified source file which is about 8kb in size.

npm install shadow-render
yarn add shadow-render

For Full transparency: It does use a dependency. A package called uid. which is approximately 10 lines of code that was pulled in directly into the source file.

How to use

  • Init the app

The document is being passed in to allow easy mocking for testing purposes i.e

let doc = document.implementation.createHTMLDocument("New Document");

This creates a HTMLElement document that can be used as the entry point for the toolkit.

import { Shadow, initApp } from "../index.js";

let Entry = new Shadow("entry-point", {
  template: self => /*html*/ `
        <div id="my-app">
            <my-app> </my-app>
        </div>
    `
});

initApp("#app", Entry, document);

Lets create the <my-app> element

To use an element you need to import it's file .

import "./counter.js"; // <-- import the counter element
let MyApp = new Shadow("my-app", {
  template: self => /*html*/ `
        <div>
            <counter-el> </counter-el> 
        </div>
    `
});

Create the counter element

Things to note:

  • getInitialState has to be called with the exact signature below for it to register state and setState to the component to make them available in 'self'.

  • You can pass in an object external to the component. i.e state is declared outside of Shadow and is passed into the useState function (provided by the toolkit) which then calls a statehandler function that watches and updates the object. The statehandler returns a state object and setState function which are then made available in self.

  • When calling setState() there is a boolean variable passed in that tells the component whether to re-render on state change. If true : component is re-rendered. If false : only the elements bound to the state property that is being changed are re-rendered.

NOTE: This currently only works with very simple variable types -> strings, int, boolean

import { Shadow, useState } from "../index.js";

let state = {
  counter: 0
};

let Counter = Shadow("counter-el", {
  onMount: () => {
    console.log("Mounted counter-app");
  },

  getInitialState: self => {
    return useState(state, self);
  },

  methods: {
    increment: (e, self) => {
      self.state.counter++;
      self.setState({ counter: self.state.counter }, false);
    },
    decrement: (e, self) => {
      self.state.counter--;
      self.setState({ counter: self.state.counter }, false);
    }
  },

  template: self => /*html*/ `
        <div @bind="counter"> ${self.state.counter} </div>
        <button @click="increment">  +  </button>
        <button @click="decrement">  -  </button>
    `
});

That is the entirety of a counter app example . You can look through the source file for a better understanding of the toolkit. Currently standing at 180 lines of code.

Running the app

For testing purposes you can use VS Code live server to run the app or set up the application with webpack.

Contributing

Things to note:

The project uses a  VS Code extension: ES6 String HTML for readability of the template object. Please remove the "/*html*/" prepending the template string if you are not using VS Code.

Contributing is as easy as:

  • Forking this repo!
  • Make your own updates
  • Create a new pull request with a description of the changes made.