StillJS CLI

This is the CLI tool for StillJS Framework

The Still.js Framework

StillJS is a Web UI Framework which helps you to build your user interfaces which uses Vanilla JavaScript, yet the component approach is the main focus allowing you to modulrize your UI in the same fashion we do with React and Angular. visit the official documentation for deeper overview.

Join the discord channel

Still.js on discord

still-cli Commands options overview

Once installed globally, the command can be called by its aliaes which are st or still, will use still for the coming examples:

Command	Params	Description	Example
init	N/A	Initiates a new project in the current folder	npx still init
lone	N/A	Setup the files for a Lone/CDN based project using still	npx still lone
serve	N/A	Runs the app and open in th browser	npx still serve
create	--lone : Creates a Lone component within ad Lone/CDN based component	Creates a new component in both regular Still project or Lone/CDN based project, and add a new route to the route.map.js file	npx still create component path-to/MyComponent
route	N/A	Display the routes in the project	npx still route list

Brief Documentation

A complete documentation is not yet available, as the work is in progress, anyway there is quite of content and documentation available on the site, click here.

1. Instalation

The official documentation concerning environment set up and project creation can be found here; cli tools needs to be installed globally as follow bellow:

npm i @stilljs/cli -g

2. Creating a project

Create a folder for you project (e.g. project-name) and from inside such folder init the project as the bellow instruction

npx still init

After initiating the project the framework structure and files are download to the folder.

2.1 Project structure

    project-name/ //My project folder
    |___ @still/ // Still.js framework
    |___ app/ // Folder which holdes to app files
    |     |__ HomeComponent.js //Component generated automatically when creating project
    |__ config/ //Folder which holds application configuration files
    |     |__ app-setup.js //App configuration file/class
    |     |__ app-template.js //App template scheleton
    |     |__ route.map.json //Component routing and path file
    |__ index.html //Application container
    |__ jsconfig.js //Basic configuration for vscode
    |__ package.json // Regular package JSON

3. Usage example

import { ViewComponent } from "../../@still/component/super/ViewComponent.js";

export class HomeComponent extends ViewComponent {

    /** 
     * isPublic flag is needed for any component that is publicly accessible, therefore, 
     * when dealing with authentication and permission scenario any component requiring
     * user permission the flag will be removed or turned to false
     */
    isPublic = true;
    template = `
        <div>
            <h2>Hello world!</h2>
            <p>
            I'm an easy component with a button
            </p>
            <button>I'm a button</button>
        </div>
    `;
}

3.1 Running the project

From the project root folder, use still-cli to run the app as follow:

npx still app serve

You're all set with Still.js project, Enjoy your coding! ☻

---

Alternative from CDN

First thing first, Still.js CDN based project are also named Lone component, and it's recommender for them to be create using still-cli in addition to add to CDN in the page file itself (e.g. .html), as both the app/ folder and the route.map.js file are needed even in this case, but the framework will be served from the CDN itself, hence, project structure can be as follow:

Project structure example:

    project-name/ //My project root folder
    |___ microfrontend/ // This is simply for isolating from my project files
    |     |__ app/ //Component will be placed in here following the folder structure as I will
    |     |    |__ //MyCustomComponent.js -- This component will be created bellow (point b.)
    |     |__ config/ //still-cli will add the route automatically when creating a component
    |     |    |__ route.map.js //still-cli will add the route automatically when creating a component
    |     | 
    // Bellow are the files of my project placed in the project root folder
    |__ index.html
    |__ my-project-folder/
    |__ ... // Additional files from my project

a. Creating Lone/CDN based project:

Creating the project inside the microfrontend/ folder:

npx still lone

b. Creating the component from inside the microfrontend/ folder:

Using --lone peram at the end is mandatory when creating a component within a CND based project.

npx still create component app/MyCustomComponent --lone

c. Including CDN files in my regular page file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <title>StillJS</title>
    <!-- Bellow is the Still environment variable to inform where to look for components -->
    <script> STILL_HOME = 'microfrontend/' </script>
    <!-- Bellow both JavaScript and CSS CDN inclusion, JS type neeeds to module -->
    <link href="https://cdn.jsdelivr.net/npm/@stilljs/core@latest/@still/ui/css/still.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/@stilljs/core@latest/@still/lone.js" type="module"></script>
</head>

<body>
    <div>
        <!-- Bellow component (MyCustomComponent) needs to be created as in step previous step (step c.) -->
        <st-element component="MyCustomComponent"></st-element>
    </div>
</body>

d. Running the project:

On the Lone/CDN based project the application won't be run using still-cli, but it needs to be serve by an HTTP server, for testing purpose live-server can be used, and it needs to be run from the project root folder not from the still project sub-folder, follow the example:

npx live-server

When using CDN Still.js provides also with the capability of creating powerfull Microfrontend solutions in addition to regular component approach, follow the official documentation on how to set it up here.

You're all set, Congrats!