ensojs 1.0.0-rc.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +153 -0
- package/dist/enso.svg +1787 -0
- package/dist/ensojs.es.js +1 -0
- package/dist/helpers.es.js +1 -0
- package/dist/icon.svg +67 -0
- package/dist/tiny-counter.png +0 -0
- package/package.json +65 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Sean Young
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
# Enso
|
|
2
|
+
|
|
3
|
+
<img src="public/icon.svg" width="100">
|
|
4
|
+
|
|
5
|
+

|
|
6
|
+

|
|
7
|
+

|
|
8
|
+
<!--  -->
|
|
9
|
+

|
|
10
|
+
<!--  -->
|
|
11
|
+
<!-- [](TODO link) -->
|
|
12
|
+
|
|
13
|
+
Enso is a lightweight Web Component framework that simplifies development by removing boilerplate, providing intuitive declarative templates, and enabling clean component structure.
|
|
14
|
+
|
|
15
|
+
It aims to be modern, minimal, and forward-focused — no compile step, no virtual DOM, and no legacy baggage.
|
|
16
|
+
|
|
17
|
+
## Philosophy
|
|
18
|
+
|
|
19
|
+
Enso is guided by a few simple principles:
|
|
20
|
+
|
|
21
|
+
- **Native-first** — build on the platform: Custom Elements, Shadow DOM, template literals.
|
|
22
|
+
- **Minimal surface area** — small API, small mental overhead.
|
|
23
|
+
- **Declarative over imperative** — components describe what they are, not how to wire them.
|
|
24
|
+
- **No build step** — just write HTML, CSS, and JS.
|
|
25
|
+
- **Modern browser focus** — no polyfills, no legacy module formats, no baggage.
|
|
26
|
+
- **Zero boilerplate** — refs, events, bindings, and reactivity should “just work.”
|
|
27
|
+
|
|
28
|
+
## 🌱 Features
|
|
29
|
+
|
|
30
|
+
- ✨ Tiny, modern, reactive core
|
|
31
|
+
- 💡 Component-based architecture using native custom elements
|
|
32
|
+
- 🔍 Intuitive templates with `{{ @:value }}`
|
|
33
|
+
- ⚡ Reactive proxies with minimal overhead
|
|
34
|
+
- 🎨 Built-in helpers for attributes, props, styles, and templates
|
|
35
|
+
- 🧩 No build step required for usage
|
|
36
|
+
- 📦 ESM-first, no legacy module formats
|
|
37
|
+
- 🔌 Extensible template pipeline — define custom attribute handlers or parsing steps
|
|
38
|
+
|
|
39
|
+
## History
|
|
40
|
+
|
|
41
|
+
Enso began life as a small utility class intended to reduce the repetitive boilerplate associated with writing Web Components. You simply extended from it, and added your own code.
|
|
42
|
+
|
|
43
|
+
```javascript
|
|
44
|
+
class MyComponent extends WebComponent {
|
|
45
|
+
static get tagName() { return 'my-component'; }
|
|
46
|
+
static get attributes() {
|
|
47
|
+
return { 'value': {type: Number, default: 0} };
|
|
48
|
+
}
|
|
49
|
+
// component logic
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
As real-world components grew, new sources of repetitive boilerplate appeared. For instance, querying the DOM for child elements. To solve this, a quick and simple processing step was added to the template parsing, to extract `#ref="myRef"` attributes, and insert them as fields on the component, for a simple access `this.myRef`. But it soon became apparent that there was still a great deal of boilerplate, attaching events and the `@<event>=""` attribute evolved to replace calls to `this.myRef.addEventListener(...)`. As more features were added, Enso started to form.
|
|
54
|
+
|
|
55
|
+
From:
|
|
56
|
+
|
|
57
|
+
```javascript
|
|
58
|
+
class MyComponent extends Enso {
|
|
59
|
+
static get tagName() { return 'my-component'; }
|
|
60
|
+
// component logic
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
To the current declarative:
|
|
65
|
+
|
|
66
|
+
```javascript
|
|
67
|
+
Enso.component('my-component', {
|
|
68
|
+
// Component declaration
|
|
69
|
+
});
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
Enso today continues that original spirit: remove friction, embrace clarity, let components express themselves naturally.
|
|
73
|
+
|
|
74
|
+
## 📦 Installation
|
|
75
|
+
|
|
76
|
+
```bash
|
|
77
|
+
npm install ensojs
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Or via CDN:
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/ensojs/dist/ensojs.es.js"></script>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## 🚀 Example
|
|
87
|
+
|
|
88
|
+
A simple reactive counter component:
|
|
89
|
+
|
|
90
|
+

|
|
91
|
+
|
|
92
|
+
```javascript
|
|
93
|
+
import Enso, { css, html, attr } from 'ensojs';
|
|
94
|
+
|
|
95
|
+
Enso.component('tiny-counter', {
|
|
96
|
+
watched: { value: attr(0) },
|
|
97
|
+
styles: css`:host{
|
|
98
|
+
display:flex;
|
|
99
|
+
justify-content:space-between;
|
|
100
|
+
}`,
|
|
101
|
+
template: html`
|
|
102
|
+
<button @click="()=>@:value--">-</button>
|
|
103
|
+
{{ @:value }}
|
|
104
|
+
<button @click="()=>@:value++">+</button>
|
|
105
|
+
`
|
|
106
|
+
});
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
```html
|
|
110
|
+
<tiny-counter></tiny-counter>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
## Development
|
|
114
|
+
|
|
115
|
+
If you'd like to contribute you can fork the repo:
|
|
116
|
+
|
|
117
|
+
```bash
|
|
118
|
+
git clone git@github.com:seanyoung247/ensojs.git
|
|
119
|
+
cd ensojs
|
|
120
|
+
npm i
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
## Documentation
|
|
124
|
+
|
|
125
|
+
TBC
|
|
126
|
+
|
|
127
|
+
## Testing
|
|
128
|
+
|
|
129
|
+
A full suite of tests are provided in the repo using vitest.
|
|
130
|
+
|
|
131
|
+
Run tests:
|
|
132
|
+
|
|
133
|
+
```bash
|
|
134
|
+
npm run test
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
Test coverage:
|
|
138
|
+
|
|
139
|
+
```bash
|
|
140
|
+
npm run coverage
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
Run tests against the local build:
|
|
144
|
+
|
|
145
|
+
```bash
|
|
146
|
+
npm run test:build
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## License
|
|
150
|
+
|
|
151
|
+
Enso is open-source software released under the [MIT License](./LICENSE).
|
|
152
|
+
|
|
153
|
+
_Currently licensed under MIT. Future releases may adopt Apache 2.0 if broader legal protections are needed._
|