Skip to content

Commit

Permalink
Inline worker
Browse files Browse the repository at this point in the history
  • Loading branch information
dhcode committed Mar 30, 2018
1 parent 1261998 commit 2c5ac0e
Show file tree
Hide file tree
Showing 14 changed files with 888 additions and 230 deletions.
1 change: 1 addition & 0 deletions .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,6 @@ node_modules
/demo-dist
/docs
/docs-src
/tools


58 changes: 32 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,13 @@ No dependencies, works directly on the DOM API. Runs in any modern browser and I
test.ts

```typescript
import { BigJsonViewer } from 'big-json-viewer';

document.body.appendChild(
BigJsonViewer.elementFromData(
JSON.stringify({
test: 23,
someArray: [45, 2, 5, true, false, null]
})
)
);
import { BigJsonViewerDom } from 'big-json-viewer';

BigJsonViewerDom.fromData(JSON.stringify({ test: 23 })).then(viewer => {
const node = viewer.getRootElement();
document.body.appendChild(node);
node.openAll(1);
});
```

index.html
Expand All @@ -56,17 +53,18 @@ Example run with `parcel` (`npm install -D parce-bundler`);

## Getting started

You want to use the static method to display a JSON.
You can use the following static method to get a new viewer instance:

```typescript
BigJsonViewer.elementFromData(data: ArrayBuffer | string, options?: BigJsonViewerOptions): JsonNodeElement
import { BigJsonViewerDom, BigJsonViewerOptions } from 'big-json-viewer';
BigJsonViewerDom.fromData(data: ArrayBuffer | string, options?: BigJsonViewerOptions): Promise<BigJsonViewerDom>
```

It returns a `JsonNodeElement` object, that is an `HTMLDivElement` with some extras. You can insert it anywhere in your DOM.
It returns a `BigJsonViewerDom` instance. Call `getRootElement()` on it to get a `JsonNodeElement`, that is an `HTMLDivElement` with some extras. You can insert it anywhere in your DOM.

## Options

When calling `elementFromData`, you can provide an object matching the interface `BigJsonViewerOptions`.
When calling `fromData`, you can provide an object matching the interface `BigJsonViewerOptions`.

Example:

Expand All @@ -80,6 +78,26 @@ Example:

## API

## `BigJsonViewerDom` methods

#### `getRootElement()`

Returns the `JsonNodeElement` that can be appended to the DOM.

#### `destroy()`

Call this to free resources. It will terminate any by the instance started worker.

#### `openBySearch(pattern: RegExp, openLimit?: number, searchArea?: TreeSearchAreaOption): TreeSearchCursor;`

Searches the tree by the specified `pattern` and `searchArea`. Returns a `TreeSearchCursor`, which contains all matches and methods to jump the focus between the matches.

* `openLimit` is `1` by default. But can be `Infinity` or any number.
* `searchArea` describes where the pattern should be searched. Has the following options:
* `'all'` search in keys and values (default)
* `'keys'` search only in keys
* `'values'` search only in values

## `JsonNodeElement` methods

#### `openNode()`
Expand Down Expand Up @@ -115,16 +133,6 @@ Returns a list of opened paths.

When you have a limit of 50 nodes and you open the second stub `[50 ... 99]`, a path it retuned that contains the name of the first node in the stub.

#### `openBySearch(pattern: RegExp, openLimit?: number, searchArea?: TreeSearchAreaOption): TreeSearchCursor;`

Searches the tree by the specified `pattern` and `searchArea`. Returns a `TreeSearchCursor`, which contains all matches and methods to jump the focus between the matches.

* `openLimit` is `1` by default. But can be `Infinity` or any number.
* `searchArea` describes where the pattern should be searched. Has the following options:
* `'all'` search in keys and values (default)
* `'keys'` search only in keys
* `'values'` search only in values

### `JsonNodeElement` Events

The following events are being fired on the visible DOM elements. The events bubble up, so you just need a listener to your root element.
Expand Down Expand Up @@ -163,9 +171,7 @@ Fires when the user clicks on the Copy Path link of a node.

## Future TODOs

* Fix highlight all on search and not only the first
* Improve display of large strings.
* Run the parser in a WebWorker
* Support JSON Schema. If provided show meta information from the schema definition.

## License
Expand Down
12 changes: 0 additions & 12 deletions docs/big-json-viewer.worker.683ccf05.js

This file was deleted.

1 change: 0 additions & 1 deletion docs/big-json-viewer.worker.6f419bb3.map

This file was deleted.

Loading

0 comments on commit 2c5ac0e

Please sign in to comment.