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

fragelement

v1.3.22

Published

Web component wrapper class with additional utilities for easier rendering logic controls. Uses document fragments that can be re-rendered more quickly

Downloads

13

Readme

DOMElement.js

//By Joshua Brewster (AGPL v3.0)

fragelement-status fragelement-downloads fragelem-size fragelem-l

npm i fragelement

fragelement-based webcomponent app example

This is a simple wrapper for the native web components with template fragments in javascript.

DOMElement

This class extends the HTMLElement class and implements a template fragment rendering method:

Extend it like:

class CustomElement extends DOMElement { 
  props={defaultprop:1}:
  useShadow=false; //shadow DOM root? Allows scoped stylesheets, uses 'open' mode so it's further programmable from script.
  styles=undefined //you can include a stylesheet template string here to trigger the shadow dom for scoped style sheets automatically, prepended to the template or inserted into head if its in the template. Triggers an html updated if already rendered.

  //The template can be an imported html file when building in node.js for a better experience
  template=(self,props)=>{return `<div>New Element: ${JSON.stringify(props)}</div>`} 
         
  oncreate=undefined, //(self,props)=>{} when the node is created e.g. setting up buttons (props) => {}
  ondelete=undefined, //(self,props)=>{} when the node is deleted, e.g. cleaning up events (props) => {}
  onresize=undefined, //(self,props => {} run on window.onresize event 
  onchanged=undefined, //if props change, e.g. re-render? (self,props) => {}. Using past tense to not conflict with built in onchange event in most elements
  renderonchanged=false //(self,props) => {}  //true or a function fired after rerendering, will auto trigger rerenders when props changed
  
}

CustomElement.addElement('custom-element'); //adds the custom class to the window's built-in customElementRegistry before instantiating the new element
//if you don't provide a tag, the element will be registered as the classname plus a dash like 'customelement-'

where all that needs to be set is the template variable.

Then this should work in html:

<customelement- props='{"a":"1","b":"2","c":"3"}'><customelement- /> 

Can define props, onresize, onchanged, oncreate, ondelete, and even template just like other stock html functions. The prop onrenderchange if included will trigger the render function, and you can supply a function to fire after the fact.

let elm = document.querySelector('customelement-');

elm.addEventListener('resized',(e) => {
  console.log(e.target.props);
});

elm.addEventListener('changed',(e) => {
  console.log(e.target.props);
  //e.g. elm.render() //re-render the element
});

elm.addEventListener('deleted',(e) => {
  console.log(e.target.props);
});

elm.addEventListener('rendered',(e) => {
  console.log(e.target.props);
});

Custom elements have to have a '-' in the names for whatever reason, they are auto added on the end of the class name if none specified in addElement

Styles:

Set the styles property on the element to a template string of your style sheet contents and it will be prepended with the shadow root. You can set it on attributes on page init or in js and it will work. Otherwise if you want a shadow DOM root to use scoped stylesheets, set elm.useShadow = true.

Even more fun:


<body>
    <script>
        function foo(x=123){ console.log(x); return 1; }
    </script>


    <customelement- 
      props='{"a":"1"}' 
      teststr="abc" 
      testvalue="123" 
      eval_foo="foo(456)" 
      eval_boo="(inp)=>{console.log('this is probably a dumb feature', inp); return 2; }">
    </customelement->

    <script>
        let elem = document.getElementsByTagName('customelement-')[0];
        console.log(Array.from(elem.attributes));
        console.log(elem.boo('but hello world'));
        console.log(elem.props);
        console.log(elem.testvalue);
    </script>
</body>

All methods in DOMElement:


let elm = new DOMElement()

document.body.appendChild(elm) //add to body

elm

   .addElement(tag=this.tag, cls=this, extend=undefined) //static method to add this class to the dom, or some other class, input a tag or by default it uses the class name with a '-' on the end
   
   .render(props=this.props) //render the element with the props
   
   .delete() //delete the element and call the ondelete callback
   
   .state
   
          .setState(updateObj={}) //set state and trigger subscriptions for key:value pairs
          
          .subscribeTrigger(key,onchanged=(res)=>{}) //subscribe a function when a key:value pair is updated by setState. returns an int
          
          .unsubscribeTrigger(key,sub) //unsubscribe using the int returned by subscribeTrigger
          
          .subscribeTriggerOnce(key,onchanged=(res)=>{}) //subscribe a function to run once when a key:value pair is changed by setState({})
          
          .data //data object in state
          
   //internal functions
   
   .attributeChangedCallback(name, old, val) //when an observed attribute is updated run this function. Arbitrary attributes can be defined in the html tag, 
   //if 'eval_' is attached you can even add custom functions that are available on the element. E.g. elm.custom() (e.g. eval_custom='console.log('hello world')').
   //Any arbitrary attributes can be get/set at any time as well, they will set the same key:value pair on props for conditional rendering purposes in the template.
   
   .connectedCallback() //runs when the element is connected to the DOM.