Svelte Component Gateways

Grabs a compiled Svelte component (ES Module) from the interwebs and mounts it so it to the DOM, so you can check it out, use it, and run your data (props) through it.

Usage

Save a Svelte component to the internet (maybe using something like Web3 Repl Deploy) then paste the URL for the resulting es module / Svelte Component into this gateway.

This gateway will render the component and add the props so you can check it out.

TODO

• Pass in props in a variable way
• Pass props back to parent (to save them)
• Pass default props to parent to capture schema

iFrame TODO

• Sandbox the iframe for untrusted code execution
• Prevent fetch
• Prevent XMLHttpRequest
• Prevent WebSocket
• Prevent EventSource
• Prevent adding iframes to the iframe
• Prevent href anchors with searchParams
• Prevent sanitize props as JSON objects only

API

Use the Gateway in your mini-apps:

Using Svelte to generate a CustomEvent

<script>
    import { NetworkIsolated as Gateway } from '@douganderson444/svelte-component-gateway';
    // or, if you want the mounted Javascript code to have access to the network:
    // import { NetworkAllowed as Gateway } from '@douganderson444/svelte-component-gateway';

    // props
    export let count = 0;

    function handleChange(event) {
        console.log(`The count is now: `, event.detail.count);
    }
</script>

// YourApp.svelte

<Gateway
    esModule={ContactCard}
    props={{ firstName: 'Doug', lastname: 'Anderson' }}
    on:change={handleChange}
/>

Using Vanilla JS (see ref)

// yourscript.js

import { NetworkIsolated as Gateway } from 'svelte-component-gateway'

// fetch your esModule from the interwebs, [IPFS](https://docs.ipfs.io/concepts/ipfs-gateway/), or perhaps [Arweave](https://docs.arweave.org/developers/server/http-api)
const fetched = await fetch(url);
const ExampleComponent = await fetched.text();

const gateway = new Gateway({
    target: document.getElementById('gateway-element'),
    props: {
        esModule: ExampleComponent,
        // optional props
        // assuming ExampleComponent.svelte contains something like
        // `export let answer`:
        props: { answer: 42 } // we want the answer to be 42 instead of the default
})

gateway.$on('change',
    event => {
        // save them somewhere
        // defaults props will be emited on load
        console.log("The following properties changed: ", event.detail)
        }
)


...
<!-- in your html: -->

<div id='gateway-element'></div>