unit.js

focus - simplicity - productivity

---

⚠️ The development of this project has shifted to create-unit repository.

---

Old README file

Overview

Unit.js is a lightweight JavaScript UI framework designed to bring focus, simplicity, and enhanced developer productivity to your projects. Inspired by Alpine.js and 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.

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.

• Alpine.js Syntax: Leverage the expressive syntax of Alpine.js within your components. Enjoy the power of declarative programming without unnecessary complexity.

• HTML Build Output: Generate a fully-rendered page at build time (Alpine.js will be injected).

• Reactive by Default: Components contain plain HTML code with Alpine.js syntax that is reactive during runtime.

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

Versions

Unit.js maintains it's major releases in branches of this repository:

• master: default branch for next version development containing latest features.

• v1: latest version

Note: Branches named v* for example; v1, v2, ... are branches containing specific stable versions of Unit.js

Preresquites

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

Getting Started

1. Installation: Install Unit.js using your preferred package manager. For a different version, say v2, change v1 to v2 in the following command.

   npx degit github:henryhale/unit.js#v1 my_app
   cd my_app
   npm install # pnpm install

2. Create Your First Component: Within your src/pages/ folder, simply create a new file with the .unit extension, import it into the src/pages/index.unit and you're ready to start building your UI component using Alpine.js.

   <!-- hello.unit -->
   <div x-data="{ message: 'Hello, Unit.js!' }">
     <p x-text="message"></p>
   </div>

   <!-- index.unit -->
   import Hello from "hello.unit";
   
   <Hello />

Note: Feel free to scrap out stuff that you don't need for example .github/workflow/...

3. Run the Development Server: Start the development server to see your changes in real-time.

   npm run dev # pnpm dev

4. 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

5. Deployment: After building your project, production files exist in the dist folder at the root of your project.

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 place 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/style.css: Shared CSS styles

Screenshot

Contributing

Contributions are welcome to make Unit.js even better! Feel free to open issues or submit pull requests.

License

Unit.js is released under the MIT License.

Copyright © 2023 Henry Hale

---

Enjoy the focus, simplicity, and increased productivity that Unit.js brings to your UI development!