0

Is it possible to dynamically import precompiled svelte components or whole svelte apps.

And when, how do I compile a single component in svelte 3. I found this approach, but nothing in the docs: https://github.com/sveltejs/svelte/issues/1576

I want to combine several independent (hosted) Svelte apps on one page to one bigger svelte-app (microfrontend). The goal is, that every sub app can be independent deployed and hosted wherever (may be an own docker container). And any change should be visible in the aggregator app without recompiling it.

I think I wat to do something like this: https://single-spa.js.org/docs/separating-applications.html but with no other framework, that is blowing my app and components.

I don't want to use custom components, because of the inflexible styling of the Shadow DOM. I must be able to change css over a global stylesheet.

Has anyone an idea?

Thank you :)

1 Answers1

0

You can take a look at Ara Framework. It has a standalone component named Nova Bridge.

This approach consists of a component that renders a placeholder micro-frontend view will be mounted. Then the component emits a DOM event named NovaMount that is listened by the JavaScript bundle of the micro-frontend to render it and mount it in run-time.

Here an example of the entry point for your micro-frontend.

import { mountComponent, load, loadById } from 'hypernova-svelte'

import Example from './components/Example.svelte'

const render = (name, { node, data }) => {
  if (name === 'Example') {
    return mountComponent(Example, node, data)
  }
}

document.addEventListener('NovaMount', ({ detail }) => {
  const { name, id } = detail

  const payload = loadById(name, id)

  if (payload) {
    render(name, payload)
  }
})

load('Example').forEach(render.bind(null, 'Example'))

The microfrontend uses hypernova-svelte. You can take a look in this article I wrote for implementing Svelte in Nuxt.

https://ara-framework.github.io/website/blog/2019/08/27/nuxt-js

Felipe Guizar Diaz
  • 321
  • 1
  • 5