GithubHelp home page GithubHelp logo

gioboa / cloudflare-qwik-mfes Goto Github PK

View Code? Open in Web Editor NEW

This project forked from af-tomwilkins/cloudflare-qwik-mfes

1.0 0.0 0.0 53 KB

Small repro of Cloudflare Qwik MFEs to demonstrate the challenges we're facing

TypeScript 100.00%

cloudflare-qwik-mfes's Introduction

Cloudflare Qwik MFEs

This repository demonstrates the challenges we are facing using Qwik in a Cloudflare micro-frontend (MFE) architecture.

This is a scaled down version of an application using two MFEs - main and body. main is the entry point, and renders the body MFE inside of it. Upon serving the application, you'll notice dotted borders are used on container elements to clearly show the boundary between MFEs.

The main challenge is around prefetching where multiple Qwik containers are used. Containers emit a 'qprefetch' CustomEvent with filenames for their bundles, and a global listener forwards them to a Service Worker for prefetching. The problem is that the global listener uses document.currentScript.closest('[q\\:container]') to resolve the base, which will always resolve to main. This architecture works when a single container is used, but when there are multiple containers, each with a unique base, the listener fails to construct the correct URLs for bundles outside of main.

body renders a button to interact with. On click, this will render a new component to demonstrate lazy loading (and the lack of prefetching). All qprefetch events are logged to the console, which demonstrates that bundles are emitted without a base. In the HTML, the prefetch-service-worker script element shows the global listener, which clearly shows how the base is resolved.

In creating this reproduction another bug has been spotted with the Service Worker itself.

This function is taken from https://github.com/QwikDev/qwik/blob/f6fc2f855a11b541d383bf9b26db399dbb781a5a/packages/qwik/src/prefetch-service-worker/process-message.ts#L150

export function drainMsgQueue(swState: SWState) {
  if (!swState.$msgQueuePromise$ && swState.$msgQueue$.length) {
    const top = swState.$msgQueue$.shift()!;
    swState.$msgQueuePromise$ = processMessage(swState, top).then(() => {
      drainMsgQueue(swState);
    });
  }
}

Messages are only processed when $msgQueuePromise$ is falsey. Conceptually this is fine, however there is no code that restores it to a falsey value when all messages are processed. The result is that only the first message to the SW is processed.

Installing

This project uses NPM workspaces. Running npm i at the project root will install all dependencies for all MFEs.

Docs for main dependencies:

  • Wrangler, used to serve the application in a local Cloudflare environment.
  • Qwik, used to write the application.
  • Vite, used to build the application.

Serving

Both MFEs need to be served to view the full application.

  1. Open a terminal in the /packages/main directory, and run npm start.
  2. Open a terminal in the /packages/body directory, and run npm start.

main will serve on localhost:8080, you can view the full application from here. body will serve inside main, but can be viewed in isolation on localhost:8080.

cloudflare-qwik-mfes's People

Contributors

af-tomwilkins avatar

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.