@rusticarcade/palette 0.2.0 → 0.3.1
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/README.md +73 -1
- package/dist/dev/index.js +4 -4
- package/dist/prod/index.js +2 -2
- package/dist/test/index.d.ts +803 -0
- package/dist/test/index.js +347 -0
- package/package.json +37 -10
package/README.md
CHANGED
|
@@ -1,9 +1,81 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
|
-
Full Documentation: [https://
|
|
3
|
+
**Full Documentation: [https://palette.camp](https://palette.camp)**
|
|
4
|
+
|
|
5
|
+
**Palette** is a web component and web app development library that provides
|
|
6
|
+
modern ergonomics while complimenting native browser APIs rather than replacing
|
|
7
|
+
them.
|
|
8
|
+
|
|
9
|
+
- **Components** with reactive rendering, optimized event management, and encapsulated styles
|
|
10
|
+
- **Templates** powered by standard `<template>` tags and optimized for surgical DOM updates
|
|
11
|
+
- **State** management with support for deeply nested reactive mutations, including Arrays, Sets, and Maps
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
- ✅ Browser-standard Web Components
|
|
16
|
+
- ✅ Zero build required
|
|
17
|
+
- ✅ Zero external dependencies
|
|
18
|
+
- ✅ ~7.5kb production build (gzipped)
|
|
19
|
+
- ✅ Works out of the box with native JavaScript
|
|
20
|
+
- ✅ Strict TypeScript support throughout
|
|
21
|
+
- ✅ Optimized Template rendering with surgical DOM updates
|
|
22
|
+
- ✅ Deeply reactive state management with support for array mutations
|
|
23
|
+
- ✅ Optimized for blazing-fast renders
|
|
24
|
+
- ✅ Intelligent error management with error boundary-style handlers
|
|
25
|
+
- ✅ Stateful transactions with rollback support
|
|
26
|
+
- ✅ No virtual DOM—Respects manual DOM manipulations
|
|
27
|
+
|
|
28
|
+
### Planned
|
|
29
|
+
|
|
30
|
+
- 🏗️ SSR + Hydration
|
|
31
|
+
- 🏗️ Advanced form management
|
|
32
|
+
- 🏗️ HMR Support
|
|
33
|
+
|
|
34
|
+
## Quick Look
|
|
35
|
+
|
|
36
|
+
```typescript
|
|
37
|
+
import { define, html, css } from "@rusticarcade/palette";
|
|
38
|
+
|
|
39
|
+
define("counting-button", {
|
|
40
|
+
template: html`
|
|
41
|
+
<button :class="*classnames">
|
|
42
|
+
${"$count"}
|
|
43
|
+
</button>
|
|
44
|
+
`,
|
|
45
|
+
|
|
46
|
+
styles: css`
|
|
47
|
+
button {
|
|
48
|
+
color: black;
|
|
49
|
+
background-color: white;
|
|
50
|
+
font-size: 1.5em;
|
|
51
|
+
border: 3px solid currentColor;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.invert {
|
|
55
|
+
color: white;
|
|
56
|
+
background-color: black
|
|
57
|
+
}
|
|
58
|
+
`,
|
|
59
|
+
|
|
60
|
+
initialState: { count: 0 },
|
|
61
|
+
|
|
62
|
+
computedProperties() {
|
|
63
|
+
return {
|
|
64
|
+
classnames: { invert: this.state.count >= 100 }
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
|
|
68
|
+
script() {
|
|
69
|
+
this.listen("button", "click", () => {
|
|
70
|
+
this.state.count += 1;
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
```
|
|
4
75
|
|
|
5
76
|
## Guides
|
|
6
77
|
|
|
78
|
+
- [Overview](https://docs.palette.camp/documents/Overview.html)
|
|
7
79
|
- [Getting Started](https://docs.palette.camp/documents/Getting_Started.html)
|
|
8
80
|
- [Creating Components](https://docs.palette.camp/documents/Creating_Components.html)
|
|
9
81
|
- [Component Lifecycle](https://docs.palette.camp/documents/Component_Lifecycle.html)
|