@vanelsas/baredom 0.1.10-alpha → 0.2.1-alpha
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/CHANGELOG.md +20 -0
- package/README.md +76 -20
- package/dist/base.js +231 -231
- package/dist/x-alert.js +10 -10
- package/dist/x-avatar-group.js +5 -5
- package/dist/x-avatar.js +17 -17
- package/dist/x-badge.js +11 -11
- package/dist/x-breadcrumbs.js +8 -8
- package/dist/x-button.js +13 -14
- package/dist/x-cancel-dialogue.js +15 -15
- package/dist/x-card.js +3 -3
- package/dist/x-chart.js +43 -43
- package/dist/x-checkbox.js +8 -8
- package/dist/x-chip.js +6 -6
- package/dist/x-collapse.js +11 -11
- package/dist/x-command-palette.js +16 -16
- package/dist/x-container.js +6 -6
- package/dist/x-context-menu.js +19 -19
- package/dist/x-copy.js +14 -14
- package/dist/x-currency-field.js +21 -21
- package/dist/x-date-picker.js +35 -35
- package/dist/x-divider.js +10 -10
- package/dist/x-drawer.js +6 -6
- package/dist/x-dropdown.js +6 -6
- package/dist/x-fieldset.js +6 -6
- package/dist/x-file-download.js +7 -7
- package/dist/x-form-field.js +14 -14
- package/dist/x-form.js +10 -10
- package/dist/x-grid.js +7 -7
- package/dist/x-menu-item.js +10 -10
- package/dist/x-menu.js +10 -10
- package/dist/x-modal.js +13 -13
- package/dist/x-navbar.js +12 -12
- package/dist/x-notification-center.js +6 -6
- package/dist/x-pagination.js +16 -16
- package/dist/x-popover.js +8 -8
- package/dist/x-progress-circle.js +9 -9
- package/dist/x-progress.js +8 -8
- package/dist/x-radio.js +9 -9
- package/dist/x-search-field.js +12 -12
- package/dist/x-select.js +10 -10
- package/dist/x-sidebar.js +24 -24
- package/dist/x-skeleton.js +5 -5
- package/dist/x-slider.js +9 -9
- package/dist/x-spacer.js +5 -5
- package/dist/x-spinner.js +5 -5
- package/dist/x-stat.js +8 -8
- package/dist/x-stepper.js +7 -7
- package/dist/x-switch.js +11 -11
- package/dist/x-tab.js +3 -3
- package/dist/x-table-cell.js +23 -23
- package/dist/x-table-row.js +6 -6
- package/dist/x-table.js +7 -7
- package/dist/x-tabs.js +7 -7
- package/dist/x-text-area.js +18 -18
- package/dist/x-timeline-item.js +12 -12
- package/dist/x-timeline.js +9 -9
- package/dist/x-toast.js +12 -12
- package/dist/x-toaster.js +2 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,26 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to BareDome will be documented in this file.
|
|
4
4
|
|
|
5
|
+
## [0.2.1-alpha] - 2026-03-27
|
|
6
|
+
|
|
7
|
+
### Fixed
|
|
8
|
+
|
|
9
|
+
-Fixes tests for x-file-download
|
|
10
|
+
|
|
11
|
+
## [0.2.0-alpha] - 2026-03-27
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
|
|
15
|
+
- Fixes design issues x-context-menu and x-modal
|
|
16
|
+
- Fixes small bugs in x-file-download, x-fieldset, x-date-picker, x-button
|
|
17
|
+
|
|
18
|
+
## [0.1.11-alpha] - 2026-03-27
|
|
19
|
+
|
|
20
|
+
### Changed
|
|
21
|
+
|
|
22
|
+
- Renamed internal ClojureScript namespace root from `app` to `baredom` to match the published npm package name `@vanelsas/baredom`. No public API
|
|
23
|
+
changes.
|
|
24
|
+
|
|
5
25
|
## [0.1.10-alpha] - 2026-03-27
|
|
6
26
|
|
|
7
27
|
## Fixed
|
package/README.md
CHANGED
|
@@ -41,7 +41,7 @@ I started working on BareDOM after going though all the motions that Clojure dev
|
|
|
41
41
|
|
|
42
42
|
I wondered if there would be a better way to do this, and I ended up reading about web components. It seemed like a good idea to try that. For me it as a research exercise, trying to understand how it all works. I tried to build a few, and had to learn how to do that in Clojurescript. Building a larger set of web components is quite a bit of work.
|
|
43
43
|
|
|
44
|
-
When Claude Code appeared,
|
|
44
|
+
When Claude Code appeared, I was thinking about a project to try it out with, and web components seemed like a good fit. I picked up the project again and started to build Clojurescript based web components assisted by Claude. A good experiment to work with AI tooling and build something I find interesting myself.
|
|
45
45
|
|
|
46
46
|
The project is still in an alpha state. The components and demo's work, but there are bound to be some things not working properly yet. Feel free to give it a spin.
|
|
47
47
|
|
|
@@ -63,7 +63,53 @@ The project is still in an alpha state. The components and demo's work, but ther
|
|
|
63
63
|
|
|
64
64
|
## Installation
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
BareDOM can be consumed in three ways. Pick the one that matches your stack.
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
### Option 1 — ClojureScript via Clojars
|
|
71
|
+
|
|
72
|
+
This is the primary distribution for ClojureScript projects. Add the dependency to your `deps.edn`:
|
|
73
|
+
|
|
74
|
+
```clojure
|
|
75
|
+
{:deps {com.github.avanelsas/baredom {:mvn/version "0.1.10-alpha"}}}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Or, if you use Leiningen, add to `:dependencies` in `project.clj`:
|
|
79
|
+
|
|
80
|
+
```clojure
|
|
81
|
+
[com.github.avanelsas/baredom "0.1.10-alpha"]
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
Components live under the `app.exports` namespace. Require only what you use — unused namespaces are eliminated by the Closure compiler:
|
|
85
|
+
|
|
86
|
+
```clojure
|
|
87
|
+
(ns my-app.core
|
|
88
|
+
(:require [app.exports.x-button :as x-button]
|
|
89
|
+
[app.exports.x-alert :as x-alert]
|
|
90
|
+
[app.exports.x-toaster :as x-toaster]
|
|
91
|
+
[app.exports.x-toast :as x-toast]))
|
|
92
|
+
|
|
93
|
+
(defn- register-components! []
|
|
94
|
+
(x-button/register!)
|
|
95
|
+
(x-alert/register!)
|
|
96
|
+
(x-toaster/register!)
|
|
97
|
+
(x-toast/register!))
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
Call `register-components!` once in your `init!` entry point. Registration is idempotent — calling `register!` on an already-registered element is a no-op.
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
### Option 2 — npm (JavaScript / TypeScript projects)
|
|
105
|
+
|
|
106
|
+
If your project uses npm, install the package:
|
|
107
|
+
|
|
108
|
+
```bash
|
|
109
|
+
npm install @vanelsas/baredom
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
Or add it manually to `package.json`:
|
|
67
113
|
|
|
68
114
|
```json
|
|
69
115
|
{
|
|
@@ -73,17 +119,25 @@ The project is still in an alpha state. The components and demo's work, but ther
|
|
|
73
119
|
}
|
|
74
120
|
```
|
|
75
121
|
|
|
76
|
-
|
|
122
|
+
Each component is a separate ES module — import only what you need:
|
|
77
123
|
|
|
78
|
-
|
|
124
|
+
```js
|
|
125
|
+
import { init as initButton } from "@vanelsas/baredom/x-button";
|
|
126
|
+
import { init as initAlert } from "@vanelsas/baredom/x-alert";
|
|
127
|
+
|
|
128
|
+
initButton();
|
|
129
|
+
initAlert();
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
> **shadow-cljs users using npm:** no extra configuration needed. shadow-cljs resolves npm packages from `node_modules` automatically. You can use `["@vanelsas/baredom/x-button" :as x-button]` in `:require` and call `(.init x-button)`.
|
|
79
133
|
|
|
80
134
|
---
|
|
81
135
|
|
|
82
|
-
|
|
136
|
+
### Option 3 — CDN (no build step)
|
|
83
137
|
|
|
84
138
|
BareDOM components are standard ES modules. Load them directly in any HTML page using a CDN — no npm, no bundler, no framework required.
|
|
85
139
|
|
|
86
|
-
|
|
140
|
+
#### Import and initialise
|
|
87
141
|
|
|
88
142
|
```html
|
|
89
143
|
<!DOCTYPE html>
|
|
@@ -111,7 +165,7 @@ BareDOM components are standard ES modules. Load them directly in any HTML page
|
|
|
111
165
|
|
|
112
166
|
`<script type="module">` is required because BareDOM components are ES modules. Each `init()` call registers the custom element with the browser. Only the components you import are loaded — unused components cost nothing.
|
|
113
167
|
|
|
114
|
-
|
|
168
|
+
#### Set attributes in HTML
|
|
115
169
|
|
|
116
170
|
Every attribute can be set directly in markup:
|
|
117
171
|
|
|
@@ -124,7 +178,7 @@ Every attribute can be set directly in markup:
|
|
|
124
178
|
|
|
125
179
|
Boolean attributes follow the HTML convention: presence means `true`, absence means `false`.
|
|
126
180
|
|
|
127
|
-
|
|
181
|
+
#### Handle events
|
|
128
182
|
|
|
129
183
|
```html
|
|
130
184
|
<x-button id="btn" variant="primary">Click me</x-button>
|
|
@@ -152,7 +206,7 @@ Boolean attributes follow the HTML convention: presence means `true`, absence me
|
|
|
152
206
|
|
|
153
207
|
Custom events carry a `detail` payload — check the individual component docs for the event name and `detail` shape.
|
|
154
208
|
|
|
155
|
-
|
|
209
|
+
#### Theme with CSS custom properties
|
|
156
210
|
|
|
157
211
|
```html
|
|
158
212
|
<style>
|
|
@@ -167,28 +221,30 @@ CSS custom properties cascade normally into the open Shadow DOM. No JavaScript r
|
|
|
167
221
|
|
|
168
222
|
---
|
|
169
223
|
|
|
170
|
-
## Usage
|
|
224
|
+
## Usage (ClojureScript)
|
|
225
|
+
|
|
226
|
+
The examples below use the Clojars distribution. If you installed via npm, replace the `app.exports.*` requires with `["@vanelsas/baredom/x-button" :as x-button]` etc., and call `(.init x-button)` instead of `(x-button/register!)`.
|
|
171
227
|
|
|
172
228
|
### 1. Register components
|
|
173
229
|
|
|
174
|
-
Require each component
|
|
230
|
+
Require each component namespace you need and call `register!` on it once, before any rendering. Only the components you require are included in your build.
|
|
175
231
|
|
|
176
232
|
```clojure
|
|
177
233
|
(ns my-app.core
|
|
178
234
|
(:require
|
|
179
|
-
[
|
|
180
|
-
[
|
|
181
|
-
[
|
|
182
|
-
[
|
|
235
|
+
[app.exports.x-button :as x-button]
|
|
236
|
+
[app.exports.x-alert :as x-alert]
|
|
237
|
+
[app.exports.x-toaster :as x-toaster]
|
|
238
|
+
[app.exports.x-toast :as x-toast]))
|
|
183
239
|
|
|
184
240
|
(defn- register-components! []
|
|
185
|
-
(
|
|
186
|
-
(
|
|
187
|
-
(
|
|
188
|
-
(
|
|
241
|
+
(x-button/register!)
|
|
242
|
+
(x-alert/register!)
|
|
243
|
+
(x-toaster/register!)
|
|
244
|
+
(x-toast/register!))
|
|
189
245
|
```
|
|
190
246
|
|
|
191
|
-
Call `register-components!` once in your `init!` entry point. Registration is idempotent — calling
|
|
247
|
+
Call `register-components!` once in your `init!` entry point. Registration is idempotent — calling `register!` on an already-registered element is a no-op.
|
|
192
248
|
|
|
193
249
|
### 2. Add a renderer
|
|
194
250
|
|