|
4 | 4 |
|
5 | 5 | 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.
|
6 | 6 |
|
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 | |
8 | 11 |
|
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 |
15 | 13 |
|
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. |
17 | 15 |
|
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 |
21 | 21 |
|
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 |
129 | 23 |
|
| 24 | +* [my-circle](./packages/component-my-circle/README.md) |
| 25 | +* [webaudio-controls](./packages/component-webaudio/README.md) |
0 commit comments