dense-parser

v1.0.2

Published

3 years ago

Dense.js JSON-HTML parser script

Downloads

0High
0Medium
0Low

shadichy

dense parser

DENSE JSON-to-HTML PARSER

This nodejs library parses json objects to html directly, with emmet abbreviation built in, helps increasing coding speed, reduce time messing with html

Installation

NodeJS, Deno

Just simply install the library using npm, yarn or pnpm

npm install dense-parser
yarn add dense-parser
pnpm i dense-parser

then

const dense_parser = require("dense-parser") // Of course, you can use methods directly for short

Browser

Add this to your html source

<script language="javascript" type="text/javascript" src="https://github.com/shadichy/dense-parser/raw/master/dist/parser.umd.js"></script>

<script language="javascript" type="text/javascript" src="https://github.com/shadichy/dense-parser/raw/master/dist/parser.iife.js"></script>

Usage

To parse an object that represents a document, just pass it to dense-parser's parse function

const htmlObject = {
    title: "This is title",
    logo: "/path/to/your/favicon.png",
    stylesheet: [
        "/path/to/style1.css", 
        "/path/to/style2.css" , 
        "/path/to/style3.css"
    ],
    script: [
        "/path/to/script1.js", 
        "/path/to/script2.js"
    ],
    _: {
        _: "This is a div inside body!"
    }
}

console.log(dense_parser.parse(htmlObject))

Output:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible"content="IE=edge"/><meta name="viewport"content="width=device-width,initial-scale=1.0"/><title>This is title</title><link rel="shortcut icon"href="/path/to/your/favicon.png"type="image/png"/><meta property="og:title"content="This is title"/><meta property="og:type"content="website"/><link rel="stylesheet"href="/path/to/style1.css"><link rel="stylesheet"href="/path/to/style2.css"><link rel="stylesheet"href="/path/to/style3.css"><script language="javascript"type="text/javascript"src="/path/to/script1.js"></script><script language="javascript"type="text/javascript"src="/path/to/script2.js"></script></head><body><div>This is a div inside body!</div></body></html>

(You'll need to "beautify" it, for sure :))

To parse an object that represents a single html element, pass it to parseElement function

const elementObject = {
    tag: "span",
    id: "someRandomTag",
    class: ["dense"],
    style: {
        display: "block",
        "border-radius": "10px",
        width: "100%"
    },
    content: "div>p{This is the span content}",
    title: "get this when your hover"
}

console.log(dense_parser.parseElement(elementObject))

Output:

'<span tag="span"id="someRandomTag"style="display:block;border-radius:10px;width:100%"title="get this when your hover"class="dense"><div><p>This is the span content</p></div></span>'

(A html beautify library is recommended :))

Syntax

Element snippets

| Property | Type | Desciption | ------------- | ------------- | ----------------------------------------------------------------- | | tag | String | HTML tag | class | String, Array | Element classes | style | String, Object | Element CSS style | -, content | String, Array, Object | Element inner content, can be single element or array of children | # | String | Comment

And all other HTML element attributes inherited

Document snippets

Inherited from Element syntax with some additions

| Property | Type | Description | ------------- | ------------- | ----------------------------------------------------------------- | | title | String | Page title | desc | String | Page desciption | logo | String | URL to favicon path | preview | String | URL to preview picture (for social network) | type | String | Page type, can be website or article | lang | String | Page language | keyword | String, Array | Keywords for SEO | stylesheet | String, Array, Object | Define document stylesheet (Object) or link to external CSS paths | script | String, Array, Object | Create <script> tag that contains JavaScript code (String) or link to external JavaScript paths ()

For Dense-eco users

Execute useDense() after import

const { parse, parseElement, useDense } = require("dense-parser")

useDense()

... // Do whatever

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme