create-virtualjs-app v0.0.2
VirtualJS
Description:
A basic, experimental, minimal, and simple Javascript library for building single page web apps.
Combining between complex modern frontend framework with Vanilla Javascript, suitable for new web frontend Javascript learners.
Getting Started:
To get started, you need to have node installed, then just simply write:
npx create-virtualjs-app <folder_name>
The working directory will be src
and the root element will be App.js
inspired by React
.
/* App */
export const AppElement = `
<div id="app">
...
</div>
`
Here, we defined an exportable AppElement
which is a must. Also, a literal string so we can put variables inside the string. In the div, we defined the id as "app" (you can change it)
...
<h1 id="text-value">${value}</h1>
<button id="increment-btn">Click me to increment</button>
<button id="decrement-btn">Click me to decrement</button>
...
Here, we created h1
we put the value
variable as the text with id "text-value" which we will get to later how we would use it, same with buttons.
Buttons.push(
{
id:"increment-btn",
func:() => increment()
},
{
id:"decrement-btn",
func:() => decrement()
}
)
Here, you can call Buttons
because it is global and predefined. We push all the buttons we defined with its id and associated function to call it whenever clicked.
import * as Virtual from '../core/index.js'
let value = 0
const increment = () => {
value++
Virtual.stateHTML("text-value", `${value}`)
}
const decrement = () => {
value--
Virtual.stateHTML("text-value", `${value}`)
}
Going back, we imported everything from the core as Virtual (you can name it whatever). We defined value
variable here. We did 2 functions here, one for incrementing the value variable, the other is to decrement. stateHTML
function is called to insert HTML if you have a synchronous value (not an asynchronous fetch call), it takes 2 parameters, one for the id of the element you want to update, and the second is the new value.
Finally, you can display the web app by opening the index.html
file. Sometimes, you need an automatic reload or it just display errors that it cant open it, you can use Live Preview
vscode extension to open the index.html
file.