JSPM

@dataunlocker/defender-svelte

1.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 68
  • Score
    100M100P100Q65922F

DataUnlocker Defender for Svelte applications.

Package Exports

  • @dataunlocker/defender-svelte

Readme

DataUnlocker Defender for Svelte

npm version

This package provides a Svelte component to integrate DataUnlocker 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.

Installation

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

    {
        "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:

    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.

<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.

License

This package is licensed under the MIT License.