Introduction

Welcome to the Mini JS documentation. Mini JS is a small frontend javascript framework. This documentation will teach you how to install, and use Mini JS.

logo

Click Here to view Mini JS demo site.

Installation

Step One

Clone Mini JS from Github.

git clone https://github.com/karthicksivakumar191194/mini-js.git

Step Two

Open Mini JS codes(codes downloaded from the above step) in VS Code Editor.

Step Three

installation step3

Routing

All Mini JS routes are defined in the index.js files. The routes defined in the index.js may be accessed by entering the defined route's URL in your browser. For example, you may access the following route by navigating to http://example.com/user in your browser:

  router.get("/test", function (req) {
    app.registerPage(Test);
  });

Here, Test is the page. You will see the complete details of Page in the next section.(On the above snippet we tell Mini JS, if the URL is http://example.com/user load Test - Page)

Core Concepts

Page

A Page is a simple Javascript function which used to define the data & the template of the page, this function accepts 3 parameters(below are the parameter details).

  • Page Slug
  • Data to pass to template
  • Template

Each page should have unique page slug & template for displaying the page data.

Snippet for creating Page 
   const Test = new Page("test_page", null, TestTemplate);

Snippet for creating Page with data

   const Test = new Page("test_page", {name: "test data"}, TestTemplate);
(The data passed on the 2 argument can be retrieved on the Template)

Template

A template is a simple function which returns the HTML of the page, the function accepts a single argument which contains the data we passed on the Page - 2 Parameter(refer Core Concepts > Page section)

Snippet for creating Template 
   const TestTemplate = () => {
	return `Test`;
   };

Snippet for creating Template with data

   const TestTemplate = (data) => {
	return `${data.name}`;
   };

Deployment

To deploy the codes to server, simply copy paste all the files & folders codes to the server.

Deploy To SubDirectory

To deploy the application in server under sub directory, follow below the steps

#Step 1

Update the basename on index.html file - body element

 data-basename="/subdir"

#Step 2

Update the basename on index.js file

 const router = new Router({ basename: "/subdir" });

#Step 3

Update the basename on .htaccess file


  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /subdir/index.html [L]

Replace the /subdir on the above snippet with the name of your sub direcetory.

Releases

v1.0.0

Initial Release.