Newfoundland Pitbull Mix

    bpd-docs
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    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.

    Keywords

    Install

    npm i bpd-docs

    DownloadsWeekly Downloads

    1

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    157 kB

    Total Files

    53

    Last publish

    Collaborators

    • bpd_dev