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.
<body>
<!-- Your HTML goes here -->
</body>
<style>
/* Your CSS goes Here */
</style>
<script>
// Your JS goes here
</script>
<body props="{name}">
<p>Hello {name} !</p>
</body>
<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 body tag using {variable} syntax
// Used for defining functions which get executed on events like on:click, on:customevent, onclick, etc
</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 body tag using {variable} syntax
</script>
props is a special attribute available in the body tag . The props attribute contains an object of all the custom attributes passed to the component from another component. _text_ is a property in the props object which returns the innerHTML of the component when imported by another component. If the component is a page, we've to use params instead of props.
<body props="{attr1,attr2}">
Attribute1 : {attr1}<br>
Attribute2 : {attr2}<br>
</body>
<script>
console.log(attr1,attr2);
</script>
<body props="attrs">
Attribute1 : {attrs.attr1}<br>
Attribute2 : {attrs.attr2}<br>
</body>
<script>
console.log(attrs.attr1,attrs.attr2);
</script>
Inside the body 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.
<body>
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 Garuda
</body>
<script>
let name = "Garuda";
</script>
In Nijor, instead of calling events like onclick, onload, etc we use events like on:click, on:load, etc.
<body>
<input type="number" id="num">
<button on:click="calc()">Click Me !</button>
<p id="res"></p>
</body>
<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>
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.
<blogpost n:imported="components/blogpost"/>
<body>
<blogpost title="Nijor : A first look">Nijor is a modern framework for building modern apps .....</blogpost>
</body>
File : src/components/greet.nijor
<body props="{name,_text_}">
<div>
<h1>Hello {name}</h1>
<p>{_text_}</p>
</div>
</body>
<style>
div{
padding : 0.5rem;
background-color : white;
}
h1{
color : #0099ff;
}
</style>
File : src/pages/chat.nijor
<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. -->
<body>
<greet name="Vasudev">How are you bro !</greet>
<greet name="Ruda">Long time no see !</greet>
</body>