VirtualJS is a library for web-development. It was created to seperate different javascript tasks and html elements. This is useful because on every interactive website, content needs to respond to the user. Because of the different actions that are needed to display content correctly it quickly becomes complex and the different javscript tasks overlap. New Things have to be added (scripts, styles, elements or listeners) and the script goes slower after time because no longer relevant listeners, scripts and styles are not getting removed. VirtualJS is tracking this imports and they can be removed with one function. VirtualJS also provides an environment where all variables are getting deleted on cleanup (this prevents errors e.g. when a script file is included twice). This splitting is very powerful and can be configured with different components. It works in every popular browser (also IE) and can be integrated quickly. It is also important to know that VirtualJS can be used in different ways because of the non dependent objects. It can also extend with plugins created by users.
VirtualJS comes with a prebuilt package. If you need to build the package by yourself, clone the source, install the modules/packages and use the build command to build it.
Here is the detailed way:
Use git to clone the repository:
git clone https://github.com/MMNN321/virtual-js.gitAfter the project is downloaded, the packages can be installed that are required to run the project:
npm cinpm ci is the standard command that is used for it. If problems occur, npm i or npm install can also be used to install the packages.
The last step is to build the project. The project builds with rollup and it can easily be called by typing:
npm run buildBuilding works on windows and on linux with no errors (not tested on mac, but there is no reason why it shouldn't work). If you have problems with building, please send this as a new issue.
The build should now appear in a new folder named dist.
VirtualJS was built with typescript and works with objects (see above).
Every component programmed in VirtualJS is defined in a namespace named Virtual.
Every component is useable but not every way of using them was tested. It is recommended to start with the Site object because it constructs the elements in Virtual automatically (unitl now, all objects are subcomponents of Site).
Site object simulates a field on the website. It can register all types of elements and events. It exists through two html elements (virtualContainer, virtualElement). It is also important to know that all objects can only be accessed at public state. To look how the functions in the objects can be used, look at the typescript define file.
var site = new Virtual.Site();The site can be constructed differently and accepts settings to configure it (more at Types:SiteConstructOptions).
var site = new Virtual.Site({predefinedClasses: true});Executes an environment function and tracks changes on the virtual element and on the virtual tool (everything before can be restored).
Example:
site.createEnvironment(function($) {
// Code
});The parameter for the function is the Tool object of the site. It is for tracking extra things that are not linked with the element or for calling objects that are referenced with the environment.
Sets a new function as the public environment. This will not affect anything until runEnvironment was called. If both functions are called, they will execute the same way as createEnvironment.
Example:
site.setEnvironment(function($) { // Function will not execute
// Code
});It executes the environment function. If no environment was set, this function will return false.
Enables the environment. This function is automatically getting called by createEnvironment and runEnvironment. When enabled, it can not be activated again before restoreEnvironment or deleteBackup has been called. If this function gets called when the environment is active, this function will throw an error.
Loads html into the virtual element. This is only recommended when the virtual environment is on. The first parameter is for setting the URI to the document and the second is optional. It is for getting a callback when the document is loaded.
site.loadHTML("example.html", function(request) {
// Code executes when example.html has loaded into virtual element
});When called, this function will restore the element. Listeners that were constructed with Tool will not be removed when they were not bound to a virtual element (an element that was constructed by VirtualJS).
This will delete the restore point for the virtual element. After a call, the environment cannot restore anymore.
The function to unload all things. After a call, all listeners, loaders and Backup managers restore. This will reset the element, unload all listeners and remove all imports that were made with the loader. After restoring, the object can be used again. The function returns true if all elements destructed successfully, else there are uncompleted processes running in background which cannot be finished (this should not happen in current version).
This is a reference to unload. Nothing changes here.
The Tool object is used to store extra functions and objects that are not available in normal javascript but wich can be helpful to integrate. It can also store a default html element when a Site is the parent of the Tool object.
A Tool object that was built in Site always has the name $.
Type: object
li is an object that was built from ListenerLauncher. This element can load, unload and auto destroy events when they need to be deleted.
Type: object
scriptLoader is an object that was built from Loader. It is for loading and unloading scripts. When they need to be deleted scriptLoader does it automatically.
Type: object
styleLoader is an object that was built from Loader. It is for loading and unloading styles. When they need to be deleted styleLoader does it automatically.
Type: HTMLDivElement
element is only available when Tool was constructed by a Site object. If it was, element is a reference to the virtual html element (the element that was constructed by VirtualJS).
This is the Basic Listener object. It isn't useable, except setRegisterInterpreter setUnregisterInterpreter were used to set the Interpreters. More documentation for this is coming in the future.
This function adds an event listener. It has the same structure as in the DOM.
listener.addEventListener("click", function(event) {
// Code
});This function removes an event listener. It has the same structure as in the DOM.
listener.removeEventListener("click", listener);Resets the object and unloads all listeners.
This is the Basic Listener with interpreter functions. It is useable and can be constructed normally with the element as parameter.
const elementListener = new Virtual.ElementListener(htmlElement);ElementListener is extending the functions from listener, so all functions from Basic Listener are also available here.
This is an object that can hold any types of Listeners. It checks if an object already has an event listener and when not, it creates a new one. The type of listener must be specified at creation, else the process will fail. The creation elements can be accessed in Virtual.ListenerLauncherItem.
const launcher = new Virtual.ListenerLauncher(Virtual.ListenerLauncherItem.ElementListenerCreation);
// Creates a listener launcher for html elementsThis will return a Listener for an object. If noone was created, it will construct a new one.
Example:
launcher.for(htmlElement)/* ElementListener */.addEventListener("click", function() {
// Code
});The last piece of code is from the ElementListener. This is the part where things get to work. Listeners can also work without the Launcher but they wouldn't be connected anymore (It is important for Virtual.Site).
The Loader is a configurable Element that manages the different loading procedures. It works with functions that were passed at construct time. The load-elements are accessible in the namespace Virtual.LoaderItem.
Here is an example how to construct the Loader with the Script loader function:
const scriptLoader = new Virtual.Loader(Virtual.LoaderItem.Script);and here an example with the styleLoader
const styleLoader = new Virtual.Loader(Virtual.LoaderItem.Style);It is important to keep the LoadElement define when building own objects.
(All elements are only accessible with constructed object)
Loads paths and returns a boolean if path has loaded or not.
Example:
const scriptLoader = new Virtual.Loader(Virtual.LoaderItem.Script);
/* ------------------------- */
const success = scriptLoader.loadItem("script.js");
// success === true = script loadedUnloads a path or element and returns a boolean if path successfully unloaded.
Example:
const scriptLoader = new Virtual.Loader(Virtual.LoaderItem.Script);
/* ------------------------- */
const success = scriptLoader.unloadItem("script.js");
// success === true = script unloadedUnloads all scripts and returns a boolean if paths were successfully unloaded.
Example:
const succces = loader.unload();class Virtual {
static Site = Site;
}export type HTMLResponseCallback = (request: XMLHttpRequest) => any;type EnvironmentFunction = ($: Tool) => any | boolean;export interface SiteConstructOptions {
predefinedClasses: boolean;
}export interface LoadElement<T> {
load: LoadFunction<T>;
unload: UnloadFunction<T>;
}export type LoadFunction<R> = (path: string, callback: LoadCallback<R>) => any;export type UnloadFunction<R> = (path: string, object: R) => boolean;export type LoadCallback<P> = (object: P) => any|boolean;