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

nent-dxp

v0.6.1-beta.2

Published

Add DXP-NENT element hinting, snippets, and autocomplete for HTML files. Learn more about building web applications directly with HTML here: https://nent.dev

Downloads

5

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

jasonwickerjasonwicker

Keywords

nentvscodeweb-componentsframework-agnostic

Readme

NENT: Web Application Elements

MIT initial size tree-shaking ts

NPM coverall gitter jsdelivr unpkgd

What is NENT?

NENT is a library of functional elements (web components) that extend HTML with web application-specific features.

'Nent' comes from the word component and is my tech-brain's uncreative attempt at branding.

Motivation

The goal of this project is to empower the next generation of web developers to create web experiences with less development and deployment friction, all within the semantics of HTML. (Truth: I just needed to make high-performing, lightweight, web applications quickly -- without a complex build or framework - declarative applications are a happy side-effect).

Declared Functionality

Each element encapsulates a feature or function. Functions like URL-routing, dynamic content, data-merged templates, and reusable partials can be individually used without pulling in an entire framework or library.

Simple web experiences can be completely declared using HTML.

Declarative-Applications:

  • Are easier to understand and reason about
  • Easier to maintain, with reduced side-effects
  • Deterministic and testable with static-analysis
  • More approachable to a wider range of skill levels

System Groups

The elements are named and grouped by their sub-system. In some cases, shared services are enabled with a system-level element.

Sub-systems add functionality to other systems. For instance, view routes can use data expressions in their content when the data system is included.

Views: <n-views-*>

Independent routing and navigation system.

  • Single Page Application Routing
  • Fast navigation between views
  • Page History
  • Route Transitions
  • Nested Layouts
  • Nav Links with Active Route detection
  • Nav Lists:
    Nav-Bars, Child Menus, and Breadcrumbs
  • Guided Navigation

Content: <n-content-*>

Independent elements for features around content HTML.

  • Content Templates
  • Deferred Content
  • Content Data Injection
  • Markdown Rendering
  • Remote HTML / Partials

App: <n-app-*>

Independent elements related to the file as an application.

  • App Console Logging
  • App Theme Detection & Control
  • UI Component Kit Integrations (Ionic, shoelace, Material, etc)
  • PWA Support (coming)
  • Expose Event/Actions to the DOM

Actions: <n-action-*>

Data structure elements to declare functions and their activations.

  • Declared Actions
  • Reactive Activators
  • Add Custom Async Functions

Data: <n-data-*>

Optional enhancements elements to add data-functionality and data-providers.

  • Expression Evaluation
  • Token Resolution
  • Conditional Rule Evaluation

Elements: <n-elements>

An optional element that creates an action listener to handle requests for light DOM updates

Audio: <n-audio-*>

Optional audio elements to display a player and create an action listener for audio commands. The player orchestrates audio playback in an opinionated format, with best practices.

  • Voice-over Audio
  • Event Sounds
  • Background Music

Analytics: <n-analytics>

An optional element that creates an action listener that delegates analytics-specific events and route-changes to a script-configurable element for integration.

  • Page Views
  • View Times
  • Custom Events

Video: <n-video-*>

Optional wrapper element to normalize video events between various video players to enable media-timed events for synchronized actions. Useful for automatically navigating when a video ends or updating the content based on the video time.

Installation

This is a pre-release project and is subject to breaking changes and incomplete features. Thank you for trying it out!

Add a script-reference to the page head:

CDN:

<head>
  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@nent/core/dist/esm/nent.jss"
  ></script>
</head>

NPM:

<head>
  ...
  <script
    type="module"
    src="~/node_modules/@nent/core/dist/esm/nent.esm.js"
  ></script>
  ....
</head>
npm i @nent/core
# or
yarn add @nent/core

Learn More

The best way to see what these elements in action, is to take a look at the documentation demo. The installable app is built using these elements in a single HTML file (with child-routes and partials lazy-loaded, as-needed).

Take the Tour

Contact

If you like the idea, join us! Or give it a star.

github

If you have requests, ideas or feedback, join the discussion on Gitter:

gitter

Reach out to me personally:

Twitter

Contributions

Built on the shoulders of giants!

Thank you to the Ionic team and their fabulous Stencil.js SDK for the best way to build lightning-fast, native elements.

Also, thank you to the creators and contributors to all open-source efforts, but especially to the libraries we love and use in our plugin components: