Create-unit NPM

Unit.js

focus - simplicity - productivity

Overview

Unit.js is a lightweight HTML-first static site generator designed to bring focus, simplicity, and enhanced developer productivity to your projects. Powered by Vite, Unit.js encourages a streamlined development experience with a unique approach to components.

Define state and components once, reuse them wherever.

Note: ⚠️ This project is still under development.

Screenshot

npm.io

Demo link: Click here.

Key Features

Focus on Simplicity: Unit.js embraces simplicity as a core principle, making it easy for developers to create and manage UI components effortlessly.
File-based Components: Components in Unit.js are represented as files ending with the .unit extension. This convention simplifies organization and encourages a modular structure in your project. You can import .unit files into another .unit file.
HTML Build Output: Generate fully-rendered pages of your website at build time.
Reactive by Choice: Leverage the expressive syntax of reactivity-powered libraries like Alpine.js to create components reactive at runtime.

Note: Unit.js is powered by Vite and so most features can be used directly in your project for example asset handling.

Preresquites

Basic understanding of HTML, CSS, JavaScript and Node.js (npm or pnpm) is required.

Getting Started

Installation
Create a new project, my_app using your preferred package manager.
```
 npx create unit my_app
 # pnpm dlx create-unit my_app
```
Navigate to your project and install dependencies
```
cd my_app
npm install
# pnpm install
```
Create Your First Component
Start building your UI component by simply create a new file hello.unit under the src/components/ folder.
```

<h1>Hello, Unit.js!</h1>
```
Import it into the src/pages/index.unit and you're ready to go live.
```

import Hello from "../components/hello.unit";

<Hello />
```
Of course you can add props html attributes, for example:
```
...
<Hello class="text-xl" id="hello" />
```
Run the Development Server
Start the development server to see your changes in real-time.
```
npm run dev
# pnpm dev
```
Build for Production
When you're ready to deploy your application, build for production to optimize and minimize your code.
```
npm run build
# pnpm build
```
Deployment
After building your project, production files exist in the dist folder at the root of your project. Check out Vite's deployment guide.

File Structure

.vscode/: contains settings and recommended extensions for Visual Studio Code users
src/: all your project source files here
src/components/: contains reusable .unit files
src/data/: contains composable and state scripts
src/pages/: contains only .unit files for corresponding html pages
src/public/: contains assets to be served at the root like favicon.png
src/template.html: used to generate html pages from every .unit file in src/pages/ folder on build time
src/main.js: common script for all pages placed in the src/template.html. For a different script per page, create another script and add a script tag in the corresponding .unit file under the src/pages/ folder
src/global.css: Shared CSS styles