junter v1.0.1

Junter создан для быстрого преобразования JSON в HTML. Поддерживает мощную функциональность для необходимого преобразования.

🛸 Установка

1. Склонировать репозиторий
2. Подключить junter.js из dist папки

или

npm i junter

Оглавление

1. Использование
2. Методы
3. Концепции
   1. Element props
   2. Element content
   3. Multiple content
   4. Components
   5. Aliases
      1. Slot
      2. Locale
      3. Component props
      4. Style
      5. Alias

⚙️ Использование

💻 Инициализация Junter

const junter = new Junter(settings?: Settings);

interface Settings {
    removeUnnecessary: boolean
}

🔗 Методы

render(object: JSON, aliases: Record<string, number | string | JSON>): HTMLElement

Используется для преобразования JSON объекта в HTML. Может иметь только один root элемент.

💻 Использование

const junter = new Junter();

junter.render({ "p": "Hello!" }) // <p>Hello!</p>

registerComponent(name: string, content: JSON | string | number, aliases): void

Используется для регистрации компонента. Может иметь только один root element.

💻 Использование

const junter = new Junter();

junter.registerComponent('Avatar', { "p": "Hello!" });

⚠️ locale, alises и style aliaeses должны быть определены при создании компонента.

🗃 Концепции

Element props

Позволяет указать аттрибуты для элементов

💻 Использование

const junter = new Junter();

junter.render({ "div": {
    "props": {
        "class": "block"
    }
}})

/*
    <div class="block"></div>
*/

Element content

Позволяет указать контент элемента

💻 Использование

const junter = new Junter();

junter.render({ "div": {
    "props": {
        "class": "block"
    },
    "content": 'Block'
}})

/*
    <div class="block">Block</div>
*/

Если content отстутствует, то все, кроме props - преобразуется в content

const junter = new Junter();

junter.render({ "main": {
    "props": {
        "class": "main"
    },
    "header": {},
    "div": {},
    "footer": {}
}})

/*
    <main class="main">
        <header></header>
        <div></div>
        <footer></footer>
    </main>
*/

Если необходимо опустить props, то можно написать content в одну строку

const junter = new Junter();

junter.render({ "div": 'Block'})

/*
    <div>Block</div>
*/

⚠️ В root элементе не должно быть multiple content

Multiple content

Позволяет отрендерить элементы из массива данных.

💻 Использование

const junter = new Junter();

junter.render({ "div": {
    "p": ['Hello!', 'Hi!', 1]
}})

/*
    <div>
        <p>Hello!</p>
        <p>Hi!</p>
        <p>1</p>
    </div>
*/

Если необходимо указать props компонентам, которые рендерятся из массива данных, то необходимо указать массив данных в качестве content

const junter = new Junter();

junter.render({ "div": {
    "p": {
        "props": {
            "class": "text"
        },
        "content": ['Hello!', 'Hi!', 1]
    }
}})

/*
    <div>
        <p class="text">Hello!</p>
        <p class="text">Hi!</p>
        <p class="text">1</p>
    </div>
*/

В качестве multiple content можно использовать компоненты

const junter = new Junter();

junter.render({ "div": {
    "div": {
        "props": {
            "class": "block"
        },
        "content": [
            {
               "div": {
                   "props": {
                       "class": "block"
                   },
                   "p": "Hello, world!"
               } 
            },
            {
               "div": {
                   "props": {
                       "class": "avatar"
                   },
                   "img": {
                       "props": {
                           "src": "https://example.com/image.png",
                           "alt": "avatar"
                       }
                   }
               } 
            }
        ]
    }
}})

/*
    <div>
        <div class="block">
            <div class="block">
                <p>Hello, world!</p>
            </div>
            <div class="avatar">
                <img src="https://example.com/image.png" alt="avatar" />
            </div>
        </div>
    </div>
*/

⚠️ Для рендеринга контента с дублирующимися тегами рекомендуется использовать multiple content

Components

Компоненты позволяют объединять JSON объекты в одну HTML структуру.

Для их использования необходимо:

1. Зарегистрировать компонент с помощью функции .registerComponent()
2. Использовать компонент в JSON объекте, передаваемом в .render()

💻 Использование

const junter = new Junter();

junter.registerComponent('Avatar', { "p": "Hello!" });

junter.render({ "div": {
    "Avatar": {}
}})

/*
    <div>
        <p>Hello!</p>
    </div>
*/

Основные возможности компонентов:

1. Слоты для компонентов
2. Реквизиты для компонентов

Aliases

Позволяют пробрасывать необходимые свойства компонентам и элементам рендеринга.

⚠️ slot и prop aliases используются только в компонентах

Slot

Позволяет пробросить элемент в любое место компонента.

💻 Использование

const junter = new Junter();

junter.registerComponent('Avatar', { 
    "div": {
        "p": "Hello!", 
        "div": "slot:block"
    }
});

const elementJSON = { 
    "div": {
        "Avatar": {
            slots: {
                "slot:block": {
                    span: "Просто текст" 
                }
            }
        }
    }
};

junter.render(elementJSON);

/*
    <div>
        <div>
            <p>Hello!</p>
            <div>
                <span>Просто текст</span>
            </div>
        </div>
    </div>
*/

Locale

Позволяет локализовать текст внутри элемента для рендеринга.

💻 Использование

const junter = new Junter();

const componentJSON = { 
    "div": {
        "p": "Hello!", 
        "div": "locale:text"
    }
}

junter.render(componentJSON, { 'locale:text': 'Text' });

/*
    <div>
       <p>Hello!</p>
       <div>Text</div>
    </div>
*/

Component props

Позволяет передать props компоненту

💻 Использование

const junter = new Junter();

junter.registerComponent('Avatar', { 
    "div": {
        "img": {
            "props": {
                "alt": "prop:imgAlt",
                "src": "prop:avatarSrc"
            }
        }
    }
});

const component = { 
    "div": {
        "Avatar": {
            props: {
                "prop:imgAlt": "avatar",
                "prop:avatarSrc": "https://example.com/user.png"
            }
        }
    }
};

junter.render(component);

/*
    <div>
       <div>
            <img alt="avatar" src="https://example.com/user.png" />
       </div>
    </div>
*/

Style

Позволяет добавить стили в <style>

💻 Использование

const junter = new Junter();

const elementJSON = { 
    "form": {
        "style": "style:mainCSS"
    }
}

const css = `
    .target { color: red }
`

junter.render(elementJSON, { 'locale:text': 'Text', 'style:mainCSS': css });

/*
    <form>
       <style>.target { color: red }</style>
    </form>
*/

Alias

Позволяет пробросить контент внутри элемента для рендеринга.

💻 Использование

const junter = new Junter();

const elementJSON = { 
    "button": {
        props: {
            class: "button"
        },
        content: "alias:text"
    }
}

junter.render(elementJSON, { 'alias:text': 'Text' });

/*
    <button class="button">Text</button>
*/