❤
npm
Sign UpSign In

statici

0.1.5 • Public • Published

Statici

A way to eliminate network requests before their needed

Installation

npm i statici

Usage

Why should you even use this

The purpose of this library is to provide a way to render client side javascripts requests on the server to reduce load time. Giving the benefit of static delivery with dynamic data. This package is primarily for vanila html projects with a mild to low update frequency and has not been tested on rapid updating projects.

Give all scripts that are to be run and removed the attribute 'statici="true"'

<script statici="true">console.log("I wont be here")</script> 
<script>
    dom.addEventListener('customEvent', (evt)=>{
        console.log("I am from the server "+evt.data)
    })
</script> 

Example

index.js

 
const Statici = require("statici")
var build = new Statici('./src-file-directory.html', "build")
await build.buildToFile("./output-path/out.html",{data:"hello from the server"})

src-file-directory.html

<html>
    <body>
    <script statici="true">
        const event = new Event('build'); 
                window.addEventListener("statici", (evt)=>{
            document.getElementById("console").innerHTML =JSON.stringify(evt.data)
        })
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function() { 
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
                var doc = document.getElementById("demo");
                var jsonDoc = JSON.parse(xmlHttp.responseText);
                doc.innerHTML=jsonDoc['currentDateTime'];
                document.dispatchEvent(event);
            }
           
        }
        xmlHttp.open("GET", 'http://worldclockapi.com/api/json/est/now', true);
        xmlHttp.send(null);
        </script> 
        <p id="demo"></p>
        <p id="console"></p>
    </body>
    </html>

./output-path/out.html

<html>
    <body>
 
        <p id="demo">2020-07-27T04:02-04:00</p>
        <p id="console">hello from the server</p>
    </body>
    </html>

API

Statici(src, eventName)

parameters

  • src
    • type: string
    • source file directory path
  • eventName optional
    • type: string
    • The name of the event when the page is loaded
    • if empty will use load

return

  • type: Statici class

example

  const build =  new Statici("sample.html",'build')

.setSrc(src)

parameters

  • src
    • type: string
    • source file directory path

example

build.setSrc("newSrc.html")

.setEvent(event)

parameters

  • event
    • type: string
    • The name of the event when the page is loaded

example

build.setEvent('build')

.buildToFile(element, options)

parameters

  • element
    • type: string
    • output file directory path
  • options optional
    • type: json
    • required
      • data
        • type: any
        • the place to store custom data for the front end

return

  • Type: string
  • output file path

example

    build.buildToFile("output.html",{data:"this will be passed to the front end"})

.buildToString(options)

parameters

  • options optional
    • type: json
    • required
      • data
        • type: any
        • the place to store custom data for the front end

return

  • type: string
  • The rendered html file as a string

example

    build.buildToString("output.html",{data:"this will be passed to the front end"})

Readme

Keywords

Package Sidebar

Install

npm i statici

Repository

github.com/Dr-D12345/Statici

Homepage

github.com/Dr-D12345/Statici#readme

Weekly Downloads

0

Version

0.1.5

License

MIT

Unpacked Size

10.4 kB

Total Files

6

Last publish

Collaborators

  • dr-d12345
Try on RunKit
Report malware