Skip to content

Commit 0734c45

Browse files
author
Sebastian Schürmann
committed
docs(root): readme cleaned
1 parent 7c0f73f commit 0734c45

File tree

2 files changed

+16
-118
lines changed

2 files changed

+16
-118
lines changed

README.md

+14-118
Original file line numberDiff line numberDiff line change
@@ -4,126 +4,22 @@
44

55
banira.js is an open-source toolchain designed for the development of web components using vanilla JavaScript. It simplifies the process by eliminating the need for bundlers and frameworks, focusing instead on modern CSS and web standards.
66

7-
## Features
7+
| Package | Description |
8+
|----|----|----|
9+
| [banira](./packages/banira/README.md) | A toolchain for developing web components using vanilla JavaScript |
10+
| [banira-cli](./packages/banira-cli) | A CLI tool for banira |
811

9-
* **Zero-Config Setup** - Get started quickly with sensible defaults
10-
* **TypeScript First** - Full TypeScript support with type-safe components
11-
* **Virtual Filesystem** - Test components with an in-memory filesystem
12-
* **Modern Testing** - Testing utilities with JSDOM integration
13-
* **Standards Compliant** - Built on web standards and modern JavaScript
14-
* **Developer Experience** - Hot reload, error handling, and debugging tools
12+
## Getting Started
1513

16-
## Quick Start
14+
This softwawer is a development build and work in progress. Your best shot will be to build it using a unix or linux machine.
1715

18-
```bash
19-
# Install the CLI globally
20-
npm install -g @banira/cli
16+
* make clean - remove all dependencies and build artifacts
17+
* make bootstrap - install all dependencies
18+
* make test - run all tests
19+
* make lint - lint all TypeScript files
20+
* make docs - generate the API documentation for banira
2121

22-
banira build
23-
```
24-
25-
## Component Development
26-
27-
Create a new component with TypeScript:
28-
29-
```typescript
30-
class MyCircle extends HTMLElement {
31-
private _size: number = 50;
32-
private _color: string = 'red';
33-
34-
constructor() {
35-
super();
36-
this.attachShadow({ mode: 'open' });
37-
this.render();
38-
}
39-
40-
static get observedAttributes() {
41-
return ['size', 'color'];
42-
}
43-
44-
// ... see documentation for full example
45-
}
46-
47-
customElements.define('my-circle', MyCircle);
48-
```
49-
50-
## Testing
51-
52-
banira provides powerful testing utilities:
53-
54-
```typescript
55-
import { TestHelper } from 'banira';
56-
57-
describe('MyComponent', () => {
58-
let context;
59-
60-
beforeEach(async () => {
61-
const helper = new TestHelper();
62-
context = await helper.mountAsScript('my-component', componentCode);
63-
});
64-
65-
it('should render correctly', () => {
66-
const component = context.querySelector('my-component');
67-
assert.ok(component);
68-
});
69-
});
70-
```
71-
72-
## CLI Commands
73-
74-
### Component Commands
75-
```bash
76-
# Create a new component
77-
banira create <name>
78-
79-
# Build components
80-
banira build [options] <files...>
81-
82-
# Start development server
83-
banira serve [options]
84-
```
85-
86-
### Compiler Options
87-
```bash
88-
# Compile TypeScript files
89-
banira compile [options] <files...>
90-
91-
Options:
92-
-p, --project <path> Path to tsconfig.json
93-
-o, --outDir <path> Output directory
94-
-w, --watch Watch mode
95-
--sourceMaps Generate source maps
96-
```
97-
98-
## Development
99-
100-
### Setup Development Environment
101-
102-
```bash
103-
# Clone the repository
104-
git clone https://github.com/yourusername/banira.js.git
105-
106-
# Install dependencies
107-
make bootstrap
108-
109-
# Run tests
110-
make test
111-
112-
# Clean build artifacts
113-
make clean
114-
```
115-
116-
### Project Structure
117-
118-
- `packages/banira`: Core library with compiler and testing utilities
119-
- `packages/banira-cli`: Command-line interface
120-
- `packages/component-my-circle`: Example component implementation
121-
122-
### Development Workflow
123-
124-
1. Fork the repository
125-
2. Create a feature branch
126-
3. Make your changes
127-
4. Add tests
128-
5. Submit a pull request
22+
## Examples
12923

24+
* [my-circle](./packages/component-my-circle/README.md)
25+
* [webaudio-controls](./packages/component-webaudio/README.md)
+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# my-circle
2+

0 commit comments

Comments
 (0)