Skip to content

Commit 504efd6

Browse files
zerodevxzerodevx
committed
Prep for major 
1 parent f5d2443 commit 504efd6

File tree

3 files changed

+1799
-1255
lines changed

3 files changed

+1799
-1255
lines changed

‎README.md

Lines changed: 68 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Here's a
1212
Install the package:
1313

1414
```
15-
$ npm i -D @zerodevx/svelte-json-view
15+
$ npm i @zerodevx/svelte-json-view
1616
```
1717

1818
### Svelte
@@ -37,11 +37,12 @@ For other applications with a bundler:
3737
import { JsonView } from '@zerodevx/svelte-json-view'
3838

3939
const app = new JsonView({
40-
target: document.body, // node to render into
41-
props: {
42-
json: { foo: 'bar' }, // object to prettify
43-
... // any other props
44-
}
40+
target: document.body // node to render into
41+
})
42+
43+
app.$set({
44+
json: { foo: 'bar' }, // object to prettify
45+
... // any other props
4546
})
4647
```
4748

@@ -51,10 +52,10 @@ Or load via CDN:
5152
<head>
5253
...
5354
<!-- Load `JsonView` from CDN -->
54-
<script defer src="https://cdn.jsdelivr.net/npm/@zerodevx/svelte-json-view@0"></script>
55+
<script defer src="https://cdn.jsdelivr.net/npm/@zerodevx/svelte-json-view@1"></script>
5556
<!-- Register the view -->
5657
<script type="module">
57-
window.view = new JsonView({
58+
const app = new JsonView({
5859
target: document.querySelector('#target'), // node to render into
5960
props: {
6061
json: { foo: 'bar' }, // object to prettify
@@ -68,41 +69,69 @@ Or load via CDN:
6869
</body>
6970
```
7071

72+
## Theming
73+
74+
In general, use CSS variables.
75+
76+
| Name | Default | Description |
77+
| ---------------------------- | ------------ | --------------------------------------------- |
78+
| --jsonPaddingLeft | 1rem | Amount of left padding to apply at each depth |
79+
| --jsonBorderLeft | 1px dotted | Style applied to left border for each depth |
80+
| --jsonBracketColor | currentcolor | Color for brackets ('[', '{', '}', ']') |
81+
| --jsonBracketHoverBackground | #e5e7eb | Hover background for brackets |
82+
| --jsonSeparatorColor | currentcolor | Color for separators (colons and commas) |
83+
| --jsonKeyColor | currentcolor | Color for keys |
84+
| --jsonValColor | #9ca3af | Default color for values |
85+
| --jsonValStringColor | #059669 | Color for `string` values |
86+
| --jsonValNumberColor | #d97706 | Color for `number` values |
87+
| --jsonValBooleanColor | #2563eb | Color for `boolean` values |
88+
89+
It's recommended to wrap the component to apply your own font family (a monospaced font is
90+
recommended) and also to apply custom CSS var overrides.
91+
92+
<!-- prettier-ignore -->
93+
```html
94+
<div class="wrap">
95+
<JsonView {json} />
96+
</div>
97+
98+
<style>
99+
.wrap {
100+
font-family: monospace;
101+
font-size: 14px;
102+
--jsonBorderLeft: 2px dashed red;
103+
--jsonValColor: blue;
104+
...
105+
}
106+
</style>
107+
```
108+
71109
## Props
72110

73-
| Name | Type | Default | Description |
74-
| ----- | ------ | -------- | -------------------------------- |
75-
| json | Object | None | Un-stringified object to display |
76-
| depth | Number | Infinity | Initial expansion depth |
77-
78-
## CSS vars
79-
80-
```css
81-
ul {
82-
padding-left: var(--nodePaddingLeft, 1rem);
83-
border-left: var(--nodeBorderLeft, 1px dotted #9ca3af);
84-
color: var(--nodeColor, #374151);
85-
}
86-
.bracket:hover {
87-
background: var(--bracketHoverBackground, #d1d5db);
88-
}
89-
.comma {
90-
color: var(--nodeColor, #374151);
91-
}
92-
.val {
93-
color: var(--leafDefaultColor, #9ca3af);
94-
}
95-
.val.string {
96-
color: var(--leafStringColor, #059669);
97-
}
98-
.val.number {
99-
color: var(--leafNumberColor, #d97706);
100-
}
101-
.val.boolean {
102-
color: var(--leafBooleanColor, #2563eb);
103-
}
111+
| Name | Type | Default | Description |
112+
| ----- | ------ | --------- | -------------------------------- |
113+
| json | Object | undefined | Un-stringified object to display |
114+
| depth | Number | Infinity | Initial expansion depth |
115+
116+
## Development
117+
118+
Library is packaged via [SvelteKit](https://kit.svelte.dev/docs/packaging). Standard Github
119+
[contribution workflow](https://docs.github.com/en/get-started/quickstart/contributing-to-projects)
120+
applies.
121+
122+
### Tests
123+
124+
End-to-end testing via [Playwright](https://github.com/microsoft/playwright). To run tests
125+
headlessly:
126+
127+
```
128+
$ npm run test
104129
```
105130

131+
## Changelog
132+
133+
Please refer to the [releases](https://github.com/zerodevx/svelte-json-view/releases) page.
134+
106135
## License
107136

108137
ISC

0 commit comments

Comments
 (0)