single-spa: laluan tanpa microfrontend tambahan

Dalam artikel ini, kami akan meneroka cara untuk memudahkan seni bina microfrontend spa tunggal anda dengan mengalih keluar microfrontend halaman ralat khusus

Mempunyai projek berdasarkan seni bina microfrontends mempunyai faedahnya, tetapi juga beberapa cabaran.

Salah satu cabaran ialah pertumbuhan bilangan mikrofrontend yang tidak dapat dielakkan. Pertumbuhan ini bermakna bahawa akan ada lebih banyak mikrofrontend untuk dikekalkan, dikemas kini dan dikeluarkan. Mengurangkan bilangan microfrontends memastikan pengalaman pembangunan yang lebih lancar.

Untuk mengurangkan bilangan microfrontend, kami boleh memindahkan beberapa fungsi sedia ada kepada microfrontend yang sedia ada. Kita perlu melakukan ini dengan berhati-hati, kerana ia akan menyebabkan kita melanggar prinsip tanggungjawab tunggal.

Alangkah baiknya mengalih keluar microfrontend yang mempunyai tujuan tunggal untuk memaparkan halaman ralat?

Mengalih keluar 404 microfrontend dalam spa tunggal

Dalam single-spa, untuk menambah halaman 404 yang ditulis dalam React, anda perlu mempunyai microfrontend aplikasi berasingan yang memaparkan ralat 404.

Biasanya ini dilakukan dalam definisi susun atur:

<route default>
    <application name="error-microfrontend"></application>
</route>

Menyingkirkan ralat-microfrontend boleh menjadi rumit.

A) Refactoring React to HTML ?

Laluan spa tunggal ditakrifkan dalam HTML, yang bermaksud bahawa jika anda ingin memaparkan komponen tindak balas, adalah sukar untuk memasukkan semua logik (terutamanya jika anda menggunakan logik tersuai dalam komponen anda). Jadi ini bukan pilihan yang berdaya maju.

B) Melepasi CustomProps ?

Anda juga boleh cuba menggantikannya dengan microfrontend sedia ada dengan menghantar CustomProps kepadanya:

// top-level layout engine API
const singleSpaRoutes = constructRoutes(template, {
    props: {
        errorPage: true
    },
    loaders: {},
});

...

// single-spa-template
<route path="/test">
    <application name="global-microfrontend"></application>
</route>

<route default>
    <application name="global-microfrontend" customProps="errorPage"></application>
</route>

Atas sebab tertentu, ini tidak berfungsi. CustomProps tidak boleh diakses dalam global-micrfrontend.

Saya telah mencuba pelbagai cara untuk melakukan perkara yang sama ini, malah menukar loadRootComponent untuk global-microfrontend:

const lifecycles = singleSpaReact({
    React,
    ReactDOM,
    loadRootComponent: (props) => {
        console.log(props);

        return Promise.resolve(() => <Root />);
    },
});

Yang juga tidak berfungsi, yang ganjil, kerana jika saya melihat pulangan untuk constructApplications:

// usage
const applications = constructApplications({
    loadApp: ({ name }) => globalThis.System.import(name),
    routes,
});

// result
...
name: 'global-microfrontend',
app: f(),
customProps: f(e, n),
activeWhen: [
    0: f $(),
    1: f(n)

]

Nampaknya single-spa sedar bahawa global-microfrontend akan dipasang pada 2 laluan, dan salah satunya dengan prop tersuai.

Saya menganggap bahawa cara ini tidak berfungsi kerana cara spa tunggal menggabungkan prop.

C) Cara meretas ?

Memandangkan tiada apa-apa yang berjaya dan saya benar-benar mahu menyingkirkan ralat mikrofrontend, saya datang dengan penyelesaian:

// single-spa-template
<route default>
    <div id="PAGE_NOT_FOUND"></div>
</route>

Dalam microfrontend global, yang dimuatkan di peringkat teratas aplikasi:

import React, { useEffect, useState } from "react";

const ErrorContent = () => (
    <div>
        <h1>404 not found</h1>
        <h3>Please try visiting another page</h3>
    </div>
);

const ErrorPage = () => {
    const [visible, setVisible] = useState<boolean>(false);

    const checkForPageNotFound = () => {
        const el = document.getElementById("PAGE_NOT_FOUND");

        setVisible(!!el);
    };

    useEffect(() => {
        window.addEventListener("single-spa:routing-event", checkForPageNotFound);

        checkForPageNotFound();

        return () => window.removeEventListener("single-spa:routing-event", checkForPageNotFound);
    }, []);

    return visible ? <ErrorContent /> : null;
};

export default ErrorPage;

Ini berfungsi dengan mendengar acara single-spa:routing-event, dan setiap kali ia dicetuskan, kami menyemak sama ada div yang telah kami tambahkan dalam definisi reka letak wujud. Memandangkan div dipaparkan hanya dalam laluan lalai, ini bermakna kami boleh memaparkan kandungan halaman 404 dengan yakin.

Walaupun ini mungkin bukan penyelesaian yang paling elegan, ia membolehkan kami merangkum logik 404 dalam mikrofrontend sedia ada & untuk menyingkirkan mikrofrontend lain yang memerlukan penyelenggaraan.

Jika anda menemui penyelesaian kreatif lain untuk memudahkan seni bina berdasarkan microfrontends, saya ingin mendengar tentang pengalaman anda!

Atas ialah kandungan terperinci single-spa: laluan tanpa microfrontend tambahan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!