@stilljs/core
Version:
    • 4.41 kB
Markdown
<br>
# **Still.js** Framework
StillJS is a Web UI Framework which uses Vanilla JavaScript to help you to build user interfaces, but focuses on a component approach, allowing you to modularize your UI in the same fashion as React and Angular. Visit the [official documentation](https://stilljs.dev) for a deeper overview.
## Documentation
Complete documentation is not yet available, as the work is in progress. Still, there is quite a lot of content and documentation available on [https://stilljs.dev](https://stilljs.dev) and on [Github](https://still-js.github.io/stilljs-site/)</a>.
## Community
**Still.js** is in development. You are more than welcome to join
[the Discord channel](https://discord.gg/fUVJRTmQ9f).
## Contributions
As an Open Source project, we welcome any contributions to **Still.js**. You can start by joining the Discord channel, below are some ways one might contribute:
1. Report Bugs
2. Implement new Features
3. Suggest improvements
4. Improving/enriching documentations
## Getting Started
**Still.js** project creation is to be done through the **[*still-cli*](https://www.npmjs.com/package/@stilljs/cli) tool npm package**, therefore do not directly install the @stilljs/core package for your project. The idea is to create a project instead.
### Installation
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>. Install with *npm* (using the **`-g`** flag) as follow:
```
npm i @stilljs/cli -g
```
### Creating a project
Create a folder for your project (e.g. project-name) and from inside that folder initialize the project as shown below:
```
npx still init
```
After initializing, the project the framework structure and files are downloaded to the folder.
#### Project structure
```js
project-name/ //Your project folder
|___ @still/ // Still.js framework
|___ app/ // Folder which holdes app files
| |__ HomeComponent.js //Component generated automatically when creating project
|__ config/ //Folder containing application configuration files
| |__ app-setup.js //App configuration file/class
| |__ app-template.js //App template skeleton
| |__ route.map.json //Component routing and path file
|__ index.html //Application container
|__ jsconfig.js //Basic configuration for vscode
|__ package.json // Regular package JSON
```
## 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 scenarios like authentication and permission, or any component requiring
* user permissions, this flag will be removed or set 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>
`;
}
```
### IMPORTANT:
Since Still.js is written in vanilla JavaScript using ESModules, all imports must include the .js extension. Refer to the documentation for configuring VSCode accordingly:
[VSCode setup documentation](https://still-js.github.io/stilljs-site/basic-vs-code-setup/)
### Running the project
From the project folder, use the *still cli* to run the app as follow:
```
npx still serve
```
### Alternative from CDN
When using CDN, **Still.js** allows you to create powerful micro-front-end solutions along with a component approach. [Follow the official documentation](https://still-js.github.io/stilljs-site/installation-and-running-cdn/) to set it up.
```
<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>
```