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

vandyke-toolkit

v0.0.1

Published

Toolkit for the VanDyke template engine

Downloads

5

Readme

[ALPHA] VanDyke Toolkit

Intro

VanDyke Toolkit is development library for the VanDyke template engine and still under development with a first ALPHA release.

Test cases and more detailed documentation are on the way ...

Template markup

Component

Element

<element/> Native self closing HTML element or React component without attributes

<element attribute attributeN/> Native self closing HTML element or React component with one or more attributes

<element> content </element> Native HTML element or React component with element body and without attributes

  • content can be multiple items of Content

<element attribute attributeN> content </element> Native self closing HTML element or React component with element body and with one or more attributes

  • content can be multiple items of Content

Attributes

attribute Simple attribute without given value, value will be interpreted as true

attribute="simple string" Simple string attribute as known in HTML

attribute=value Pass an advanced value to this attribute

  • value can be an Expression, Chain or Helper

Content

Content can be a mix of expressions, elements, helpers and text. The template whole needs to return a single root element.

Expression

{expression} Simple expression to provide advanced content

  • expression can be Boolean, Number, Variable or String

String

"foo" Native JavaScript string with double quotes

Number

1.234 Native Javascript number positive

-1.1234 Native Javascript number negative

Boolean

true Native Javascript boolean true

false Native Javascript boolean false

Variable

name In scope variable access

@name Contextual variable access (e.g. @index in each helper)

../name Parent scope variable access

../../sub.object.name Path variable access

Helper

{#helper/} Simple helper without any arguments and body

{#helper argument/} Simple helper with argument

  • argument can be an Boolean, Number, Variable or String

In element body:

{#helper} content {/helper} Block helper containing content

  • content can be multiple items of Content

{#helper argument} content {/helper} Block helper with argument and containing content

  • argument can be an Boolean, Number, Variable or String
  • content can be multiple items of Content

{#helper argument} content {:else} content {/helper} Block helper with argument, containing content and alternate content

  • argument can be an Boolean, Number, Variable or String
  • content can be multiple items of Content

In attribute value:

{#helper} content {/helper} Block helper containing content

  • content can be Boolean, Chain, Helper, Number, Variable or String

{#helper argument} content {/helper} Block helper with argument and containing content

  • argument can be an Boolean, Number, Variable or String
  • content can be Boolean, Chain, Helper, Number, Variable or String

{#helper argument} content {:else} content {/helper} Block helper with argument, containing content and alternate content

  • argument can be an Boolean, Number, Variable or String
  • content can be Boolean, Chain, Helper, Number, Variable or String

Chain

Concat multiple items of Boolean, Helper, Number, Variable and String to a single String.

Example: {foo + ' bar ' + bar}