Components

In Nijor projects, we don't write code in HTML files ; we write code in *.nijor files instead. Each *.nijor file is a component in a Nijor Project.
A Nijor Component is a capsule of HTML, CSS and Javascript code in a single file in which the HTML, CSS and JS are scoped which allows developers to name their CSS classes and Javascript functions anyway we like without worrying about messing up with the scopes of other components.
A Nijor Component can be used as a custom HTML tag (with custom attributes) by other Nijor Component. It can also be used as a Page for routing.

Structure of a Nijor Component

<template> <!-- Your HTML goes here --> </template> <style> /* Your CSS goes Here */ </style> <script> // Your JS goes here </script> There are 3 types of script tag in a Nijor component. It is not neccessary to use all of them in a single project.

        
            <template specs={name}>
                <p>Hello {name} !</p>
            </template>
            <script>
                // Code will get executed before the component Renders. It's code is in the global scope
                // console.log(name); // Will result in error as this code gets executed before the component even renders.
                // Variables defined here can be read inside the template tag using {variable} syntax
                // Used for defining functions which get executed on events like on:click, on:customevent, onclick, etc
            </script>
            <script mid>
                /* Very similar to the script tag above but with a slight difference; this script is scoped within the component itself.
                console.log(name); // Won't result in error as this code gets executed after the component renders.
                // Variables defined here can be read inside the template tag using {variable} syntax
            </script>
            <script defer>
                // Code will get executed after the component Renders.
                console.log(name); // Won't result in error as this code gets executed after the component renders.
                // Variables defined here can't be read inside the template tag using {variable} syntax
            </script>
        
    

Specs Attribute

specs is a special attribute available in the template tag . The specs attribute contains an object of all the custom attributes passed to the component from another component. _text_ is a property in the specs object which returns the innerHTML of the component when imported by another component.

        
            <template specs={name}>
                <p>Hello {name} !</p>
            </template>
            <script>
                // Code will get executed before the component Renders. It's code is in the global scope
                // console.log(name); // Will result in error as this code gets executed before the component even renders.
                // Variables defined here can be read inside the template tag using {variable} syntax
                // Used for defining functions which get executed on events like on:click, on:customevent, onclick, etc
            </script>
            <script mid>
                /* Very similar to the script tag above but with a slight difference; this script is scoped within the component itself.
                console.log(name); // Won't result in error as this code gets executed after the component renders.
                // Variables defined here can be read inside the template tag using {variable} syntax
            </script>
            <script defer>
                // Code will get executed after the component Renders.
                console.log(name); // Won't result in error as this code gets executed after the component renders.
                // Variables defined here can't be read inside the template tag using {variable} syntax
            </script>
        
    

<template specs={attr1,attr2}> Attribute1 : {attr1}<br> Attribute2 : {attr2}<br> </template> <script> console.log(attr1,attr2); </script> or <template specs=attrs> Attribute1 : {attrs.attr1}<br> Attribute2 : {attrs.attr2}<br> </template> <script> console.log(attrs.attr1,attrs.attr2); </script>

Template string

Inside the template tag, you can use the value of a JS variable of the same component inside any HTML tag by enclosing the name of the variable by curly brackets. <template> Hi! my name is {name}. <br> If you just want to just enclose some text within curly brackets, use \(escape-sequence). Example : \{name} will just print {name} not Arun </template> <script> let name = "Arun"; </script>

Calling events

In Nijor, instead of calling events like onclick , onload , etc we use events like on:click , on:load , etc. <template> <input type="number" id="num"> <button on:click="calc()">Click Me !</button> <p id="res"></p> </template> <script> function Factorial(n){ if(n===1 || n===0) return 1; return n * Factorial(n-1); } function calc(){ let num = document.getElementById("num").value; document.getElementById("res").innerHTML = `${num}! = ${Facrorial(num)}`; } </script>

Importing a component

Let's assume that there is a component blogpost.nijor in the components/ directory. We can import it any Nijor file by the following syntax. <template> <blogpost title="Nijor : A first look">Nijor is a modern framework for building modern apps .....</blogpost> </template> <script> import $BlogPost from 'components/blogpost.nijor'; // Import the component </script> <script defer> $BlogPost.init('blogpost'); // We have to initialize the component by the name which we're using to call it from inside the template tag. $BlogPost.run(); // Calling this function will render the component. /* In our case, we are calling our component as <blogpost>....</blogpost>. So we wrote $BlogPost.init('blogpost'); Had we call it as <post>....</post>, we'd have writen $BlogPost.init('post'); instead of $BlogPost.init('blogpost'); */ </script> Importing a component seems to be a very tedious task, but luckly for developers, Nijor has a much more beautiful syntax in which you don't need to initilaize and run the component manually. <blogpost n:imported="components/blogpost"/> <!-- This syntax handles the init and run methods automatically --> <template> <blogpost title="Nijor : A first look">Nijor is a modern framework for building modern apps .....</blogpost> </template>

Example :

<template specs={name,_text_}> <div> <h1>Hello {name}</h1> <p>{_text_}</p> </div> </template> <style> div{ padding : 0.5rem; background-color : white; } h1{ color : #0099ff; } </style>

<greet n:imported="components/greet.nijor"/> <!--<greet n:imported="components/greet"/> will also work as the file extension .nijor isn't mandatory while importing components. --> <template> <greet name="Tarun">How are you bro !</greet> <greet name="Varun">Long time no see !</greet> </template>