Package Exports

viewson
viewson/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (viewson) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

This is a view engine in which you can write the html in a JSON or ~~BSON~~ format. You can also input a normal js object or a JSON string but that is not recommended.

Index:

How to enter tags
How to add attributes
How to close a tag
How to add dynamic content
How to add modules
What are the parameters of the render function
How can we enter a JSON string
How can we enter a Javascript Object as an input
Additional information

How to enter tags:

You can enter tags like this:

    {
        "html5":{
            "head":{
                "title":{
                    "content":"Document"
                }
            }
            "body":{
                "p":{
                    "content":"This is a paragraph"
                }
            }
        }
    }

Like this we can do nesting and add tags but this way is not preferred.

Preferred way of adding tags(can be used after v1.1.0 This method had bug on 1.0.1)

  {
      "html5":{
          "head":{
              "title":"Document"
          }
          "body":{
              "p":"Hello"
          }
      }
  }

In this we have removed the content part. To add attributes you will have to use the content option. For more details refer to this. Also if you want multiple elements in a element you can use a array like this:

    {
        "html5":{
            "head":{
                "title":"Document"
            }
            "body":{
                "div":[
                    {"p":"In a array"},
                    {"p":"second element of a array"},
                    {"img":{
                      close:false
                      attributes:[
                        {"src":"hello.jpg"},
                        {"pre":"the is an image"}    
                      ]
                    } 
                  }
                ]
            }
        } 
    }

You can also write the tag as array. In that you can write a array after it if you don't want it to be nested in div or something.

How to close a tag

In this the default way a tag closes is like this: <tag sttributes> content </tag> to close a tag like this: <tag attributes />, you will have to define the close property as false

We can also add attributes like this:

    {
        "html5":{
            "head":{
                "title":{
                    "content":"Document"
                }
            },
            "body":{
                "p":{
                    "content":"This is a paragraph",
                    "attributes":[{"style":"{color:red;}"},{"class":"paragraph1"}]
                }
            }
        }
    }

There is one more way to do nesting: We can also make content a object and put tags in it.

This package also supports dynamic content.

In the last parameter of the compile function we can add the dynamic content, specify the content like you do in the JSON file but it should be in a JS object. Click here to get more information about the parameters of the compile function. In the json or bson file write dynamic as a key instead of content and write the key in the content which you specified in the dynamic content parameter.

For eg. this is the dynamic content we passed:

  {
      yay: {
        content: "This is dynamic!",
        attributes: [{ class: "highlight" }]
      }
  }

And we can use it as this in our json file:

{
  "html5": {
    "head": {
      "title": {
        "content": "Test Page"
      }
    },
    "body": {
      "h1": {
        "p":{
          "content":"Nested"
        }
      },
      "p":{
        "dynamic":"yay"
      }
    }
  }
}

How to add a module(1.1.0 onwards)

This view engine supports modules. You can use modules like this:

{
  "html5": {
    "head": {
      "title": { "content": "Test Page" }
    },
    "body": {
       "h1": { "content": { "useModule": "E:\Desktop\yay.json" } } ,
    }
  }
}

For this you would need the exact path.

The information element(1.1.0 onwards)

This view engine has information option along with html5. It will be adjecnt to html5 and not in its children. In this we have 2 options for now. One is path and the other is include.

Path: This is used to set a definate path like if you are using many modules so instead of writing the starting path(if same) again and again, you can write the common one in the path option.

Include: In this if you write bootstrap it will add it for you automatically

Parameters of the render function (This is the function for JSON file)

How to use it: render()

Parameter name	Use
filename	The filepath of the file where you have written your json.
res	The response object.
have	The basic dependencies the project uses like express.
dynData	The dynamic data. For more information click here

render with JSON

How to use it: renderWithoutFilename()

Parameter name	Use
filename	The JSON string.
res	The response object.
have	The basic dependencies the project uses like express.
dynData	The dynamic data. For more information click here

render with Javascript Object

How to use it:renderObject()

Parameter name	Use
filename	The Javascript object.
res	The response object.
have	The basic dependencies the project uses like express.
dynData	The dynamic data. For more information click here

Additional information

License

Third-Party Dependencies and Dev-Dependencies

This project makes use of the following open-source package:

bson — Licensed under the Apache License 2.0
nodemon - Licensed under MIT

Please refer to each dependency’s repository and license for more information.