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

bpd-docs

v0.1.0

Published

Build elements from JSON

Downloads

4

Readme

bpd-docs

Library to convert json to docs or posts. The goal is to provide a simple library that will be able to convert json doc to DOM elements.

How it works

Conversion

There is a JSON content like this:

[
    {
        type: "header",
        data: {
            type: '1',
            text: "Header"
        }
    },
    {
        type: "paragraph",
        children: [
            {
                type: "text",
                modifiers: ["bold"],
                data: "XXX - Bold "
            },
            {
                type: "link",
                modifiers: ["italic"],
                data: {
                    url: "https://url.com",
                    text: "Link - Italic"
                }
            },
            {
                type: "text",
                modifiers: ["bold", "italic"],
                data: " YYY - MIX "
            }
        ]
    },
    {
        type: "header",
        data: {
            type: '2',
            text: "Header 2"
        }
    },
    {
        type: "image",
        data: {
            url: "https://url.jpg",
            alt: "Pic"
        }
    }
]

Library creates output which shall match to above structure, which in HTML looks like this:

<h1>Header</h1>
<p>
	<span class="bold">XXX - Bold </span>
	<a href="https://www.google.com" class="italic">Link - Italic</a>
	<span class="bold italic"> YYY - MIX </span>
</p>
<h2>Header 2</h2>
<img src="https://url.jpg" alt="Pic">

Terms

  • Manipulators
  • Modifiers
  • Sections
  • Parser

Manipulators

Manipulator is an implementation of the interface which provides a way to create an element in the environment (JS, React, etc.) and make certain manipulations on the element like class or attribute addition or removal, setting id, key or text. Number of implemented functions may grow in the future, for now interface allows for:

  • Element creation
  • Appending a child
  • Class addtion
  • Class removal
  • Attribute addtion
  • Attribute removal
  • Setting a key
  • Setting an id
  • Setting a text

Modifiers

Modifiers are interfaces that change section appearance, like decorating a text. They don't make modification itself, they just know what modifiaction is performed to achieve the effect and use manipulator do it. So they will work independently from manipulator implementation. For example, Bold modificator knows only that class bold shall be added to an element and it calls manipulator to add class regardless of manipulator implementation.

Sections

Sections are responsible for element creation of an element and setting a content related to certain type. For example: image needs a source url and alternative text so ImageSection implementation shall create an element then set two attributes: src and alt. Setting an higher level properties is reserved for parser. There are some generic implementation created based on DOM.

Parser

Main component which wraps all implementation together. It's job is to render (create) elements from the json data. First it, takes list of json elements as an argument. For each one of them, first it renders children if they are available, then it renders element, sets modifers, then id, key. Last step is to add children to element.