I create boilerplate to demonstrate how to setup Phoenix LiveView project with typescript, svelte and tailwind

Would be good if you could add to the README an example of using your project, otherwise it just looks like one more playground repo

Updated some documents for better understanding. Thanks for the advice.

You can instantiate a svelte component from liveview by using hook all right; how do you cleanly remove the component?

I’d just use a custom component:

That’s good point.

I updated hook to support instance clearing by using SvelteComponent.$destroy.
It is probably internal API, but it works for now.

import type { SvelteComponent } from 'svelte';

const hooks = {
  'svelte-component': {
    mounted(this: { el: HTMLElement, _instance: SvelteComponent | null }) {
      const componentName = this.el.getAttribute('data-name');
      if (!componentName) {
        throw new Error('Component name must be provided');
      }

      const requiredApp = require(`./${componentName}.svelte`);
      if (!requiredApp) {
        throw new Error(`Unable to find ${componentName} component`);
      }

      const props = this.el.getAttribute('data-props');
      const parsedProps = props ? JSON.parse(props) : {};

      this._instance = new requiredApp.default({
        target: this.el,
        props: parsedProps,
      });
    },

    destroyed() {
      this._instance?.$destroy();
    }
  },
}

export default hooks;