@stilljs/core
Version:
<div style="display:flex; justify-content: center"> <img src="@still/img/logo-no-bg.png" style="width: 5em;"/> </div>
116 lines (82 loc) • 5.94 kB
Markdown
<div style="display:flex; justify-content: center">
<img src="@still/img/logo-no-bg.png" style="width: 5em;"/>
</div>
# 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 <a href="https://stilljs.dev">official documentation</a> for deeper overview.
<div style="padding: 15px; padding-bottom:0px; display:flex; border: 1px solid transparent; border-color: transparent; margin-bottom: 20px; border-radius: 4px; color: #a94442; background-color: #f2dede; border-color: #ebccd1;">
<svg style="width:30px; padding-right:10px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ec7046" d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>
<b>Still.js</b> project creation is to be done through the <b><a href="https://www.npmjs.com/package/@stilljs/cli" target="_blank">still-cli tool npm package</a></b>, therefore it's to be avoided to install @stilljs/core package since the idea is to create a project instead.
</div>
<br>
#### Join the discord channel
<a href="https://discord.gg/fUVJRTmQ9f">
<svg xmlns="http://www.w3.org/2000/svg" width="25" style="float: left; padding-right: 5px;" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"/></svg> Still.js on discord
</a>
<br>
<br>
#### 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 Github, <a href="https://stilljs.dev" target="_blank">click here</a>.
The <b>@stilljs/core</b> itself is the set of classes, structures and features concerning the Framework, in order to use it we need to instal the cli tool globally (using <b>`-g`</b> flag) as follow:
<br>
#### Instalation
The official documentation concerning environment set up and project creation can be found <a href="https://still-js.github.io/stilljs-site/installation-and-running/" target="_blank">here</a>.
```
npm i @stilljs/cli -g
```
<br>
#### 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.
<br>
##### Project structure
```js
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
```
<br>
### Usage example
```js
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>
`;
}
```
#### Running the project
From the project folder, use still-cli to run the app as follow:
```
npx still serve
```
#### Alternative from CDN
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 <a href="https://still-js.github.io/stilljs-site/installation-and-running-cdn/" target="_blank">here</a>.
```
<script src="https://cdn.jsdelivr.net/npm/@stilljs/core@latest/@still/lone.js" type="module"><script>
<link href="https://cdn.jsdelivr.net/npm/@stilljs/core@latest/@still/ui/css/still.css" type="module" rel="stylesheet"><link>
```
<br>
<br>