How can I configure a vite-svelte subapp?

[Relaxe111]

Hi, i try for some time to figure out how to make a vite svelte subapp to work with qiankun, and i can't figure out. Maybe have someone an example project how can i do that?

Many thanks in advance!

[gongshun]

#1777 (comment)

https://github.com/tengmaoqing/vite-plugin-qiankun

[Relaxe111]

@gongshun thankyou for answer. I use this plugin with react, problem with svelte is that it has no .render() function its main.ts
is

// main.ts for svelte vite project
import App from './App.svelte'

const app = new App({
  target: document.getElementById('app')
})

export default app

i can't figure out how to do something like i do With react app:

// main.tsx for vite react project
let root: Root;
console.log(React);

function render(props: any) {
  const { container } = props;
  root = ReactDOM.createRoot(container
    ? container.querySelector("#root")
    : document.getElementById("root"))
    
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  )
}

renderWithQiankun({
  mount(props) {
    console.log("react18 mount");
    render(props);
  },
  bootstrap() {
    console.log("bootstrap");
  },
  unmount(props: any) {
    console.log("react18 unmount");
    root.unmount();
  },
  update(props: any) {
    console.log("react18 update");
    console.log(props)
  },
});

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({});
}

[yugasun]

@Relaxe111 you can refer to my project: https://github.com/yugasun/micro-frontend-starter