@dataunlocker/defender-svelte/readme.md

DataUnlocker Defender for Svelte applications.

# DataUnlocker Defender for Svelte

[![npm version](https://badge.fury.io/js/%40dataunlocker%2Fdefender-svelte.svg)](https://badge.fury.io/js/%40dataunlocker%2Fdefender-svelte)

This package provides a Svelte component to integrate [DataUnlocker](https://www.dataunlocker.com) into your Svelte application.
DataUnlocker helps you protect your data from ad blockers and other privacy tools.

## Prerequisites

Before integrating this package, please ensure you have completed the DataUnlocker setup checklist available at [docs.dataunlocker.com/setup/checklist](https://docs.dataunlocker.com/setup/checklist).

## Installation

1.  Create a `.dataunlocker.json` file in the root of your project with the following content:

    ```json
    {
    	"DATAUNLOCKER_ID": "<ID_COPIED_FROM_DATAUNLOCKER_ADMIN>"
    }
    ```

    **Note:** You can override the `DATAUNLOCKER_ID` for different environments by setting the `DATAUNLOCKER_ID` environment variable.

2.  Install the package:

    ```bash
    npm install @dataunlocker/defender-svelte
    ```

    **Note:** DataUnlocker's domain and a transport endpoint used is "hardcoded" at the package install time.
    If you change the transport endpoint or `DATAUNLOCKER_ID`, you need to reinstall the package or run `npx dataunlocker-defender-refresh`.
    Mind that your local or cloud deployment may also cache dependencies so you may need to flush the cache.

## Usage

Wrap your application layout with the `<Defender>` component.
It's recommended to do this in your root `+layout.svelte` file.

```svelte
<script lang="ts">
	import { Defender } from '@dataunlocker/defender-svelte';
	import '../app.css';
	import Header from './Header.svelte';

	let { children } = $props();
</script>

<Defender
	onLoad={(data) =>
		console.log('DataUnlocker loaded with this data returned from the Secure Enclave:', data)}
	onError={(code) => console.log('DataUnlocker failed to load with this error code:', code)}
>
	<div class="app">
		<Header />

		<main>
			{@render children()}
		</main>
	</div>
</Defender>

...
```

### Component Props

- `onLoad`: A callback function that is executed when the DataUnlocker script has successfully loaded, and the wrapped content becomes interactive.
- `onError`: A callback function that is executed if the DataUnlocker script fails to load. The wrapped content stays stale in this case.

## Contributing

Contributions are welcome!
Please open an issue or submit a pull request on our [GitHub repository](https://github.com/dataunlocker/defender-svelte).

## License

This package is licensed under the MIT License.