Skip to content

Commit

Permalink
Added XML to readme.
Browse files Browse the repository at this point in the history
  • Loading branch information
james-pre committed Dec 10, 2024
1 parent b92cbf4 commit ec67824
Showing 1 changed file with 41 additions and 6 deletions.
47 changes: 41 additions & 6 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@

[ZenFS](https://github.com/zen-fs/core) backends for DOM APIs. DOM APIs are _only_ available natively in browsers.

> [!IMPORTANT]
> Please read the ZenFS core documentation!
Please read the ZenFS core documentation!

## Backends

Expand All @@ -15,10 +14,7 @@ For more information, see the [API documentation](https://zen-fs.github.io/dom).

## Usage

> [!NOTE]
> The examples are written in ESM.
> For CJS, you can `require` the package.
> If using a browser environment, you can use a `<script>` with `type=module` (you may need to use import maps)
You can use the backends from `@zenfs/dom` just like the backends from `@zenfs/core`:

```js
import { configure, fs } from '@zenfs/core';
Expand All @@ -33,3 +29,42 @@ if (!fs.existsSync('/test.txt')) {
const contents = fs.readFileSync('/test.txt', 'utf-8');
console.log(contents);
```

#### `XML`

The `XML` backend can be used to create a file system which lives in the DOM:

```html
<!-- ... -->
<fs />
<!-- ... -->
```

```js
import { configure, fs } from '@zenfs/core';
import { XML } from '@zenfs/dom';

await configureSingle({
backend: XML,
root: document.querySelector('fs'), // root is optional
});

fs.writeFileSync('/test.txt', 'This is in the DOM!');
```

If you choose to add the root element to the DOM by appending it, you will likely want to hide its contents (`display:none` works well).

The `root` option is not required. If you choose not to pass in a `root`, you can always append it to the DOM later:

```js
import { configure, fs, mounts } from '@zenfs/core';
import { XML } from '@zenfs/dom';

await configureSingle({ backend: XML });

const { root } = mounts.get('/');

document.body.append(root);
```

This may disrupt use cases that involve saving the HTML file locally and loading it later, since a new element is created when configuring. In contrast, when using an existing element and passing in a `root`, the existing element's contents will be preserved.

0 comments on commit ec67824

Please sign in to comment.