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

@html-widget/core

v0.2.4

Published

This tool manages custom html components shared across multiple views.

Downloads

2

Readme

This tool manages custom html components shared across multiple views.

Each component is described by a widget.info json file this allows you to define the view, script, and style files. The view and script get linked to the output directory while the style gets compiled.

The 'node_modules' directory will be searched for packages that contain a 'widget.json' file.

Use the middleware (nppMiddleware.js) during development to redeploy all files when a view is retrieved.

Setting up a new Widget project

npm init npm i express http https npm i [email protected]:Thaerious/HTML-Widget.git npx widget init

Getting Started

Create a new view called index: npx widget create view index

Start up the default server: npx server

Browse to http://127.0.0.1:8000/index

Adding A Component

npx widget create component

A component is a standalone partial ejs file. They must consiste of a two part name delimited by a dash (-). When used in a view, the build toolchain will create a template.ejs file in the compiled directory. This file is included in the view.ejs files found in client-src.

Explanation

Widget init created the client-src/ and www/ directories. The client-src/ directory is where the source code goes. The www/ directory is where transpiled code will end up. There is also a www/static directory where static html files can go. The default server will serve the directories in the following order: www/static, www/compiled, www/linked.

By default the widget middleware will build the code everytime an index page is browsed.

Build

npx widget build

When the build chain is invoked the www/compiled and www/linked directories a created and populated with the web app. The build chain consists of the following steps:

  • tree
  • discover
  • link
  • style
  • import packages
  • include

Tree

npx widget tree

Creates the directory tree and empty files in the www/ directory.

Discover

npx widget discover

Examines the client-src directory for components and views in order to create a list of records. Each record is build from the widnget.info file inside a sub-directory. This information is used to build the ouptput files. See below for an example of a widget record.

Link

npx widget link

Creates the www/linked directory. Then, for each view, creates a virtal link from www/linked to the client-src sub-directory. This permits the browsing of the .ejs files.

Style

npx widget style

Uses sass to compile the style files and put them in the appropriate www/compiled sub-directory.

Include

npx widget include

Populates the templates.ejs file for each view. This file copies all the required .ejs files from each component element. The required files are determined automatically by traversing the DOM and looking for components.

Reference

npx widget reference NAME npx widget reference NAME -p,--path FILEPATH npx widget reference NAME -p,--path DIRPATH

Add an external refernce to the to the import map file.

  1. If just the name is provided then the package in node_modules with that name will be used. The path will be extracted from the browser field of the package.json file in the the package directory. If there is no browser filed, then the module field be used. If there is neither, then and error will be emitted.

  2. If a name and a path to a file is provided then those will be added without further processing.

  3. If a name and a path to a directory is provided then that directory will be searched for a package.json file and proceed as (1) above.

Widget View Record

{ "type": "view", "fullName": "index", "view": "index.ejs", "es6": "Index.mjs", "style": { "src": "index.scss", "dest": "index.css" }, "dir": { "sub": "test_widget/index", "src": "client-src/test_widget/index", "dest": "www/compiled/test_widget/index" }, "package": "test_widget" }