single-spa / single-spa Goto Github PK
View Code? Open in Web Editor NEWThe router for easy microfrontends
Home Page: https://single-spa.js.org/
License: Other
The router for easy microfrontends
Home Page: https://single-spa.js.org/
License: Other
There is a good reason for start()
, but it is a gotcha unless we provide feedback to the user of single-spa. Also we should add docs about start to the root-application.md
To enable Server rendering we're going to at least need an API that allows the parent Application to ask Single-spa which children should be active given an arbitrary URL
Hi, I was wondering what the feeling is about replacing SystemJS with Webpack? SystemJS is fine, but Webpack is the standard. Use of SystemJS will likely hurt adoption.
Similar to getMountedApps
, except it gives you all of the apps that have ever been declared.
We'll just have to make sure that the single-spa-examples work once using the dist file.
It's one of the most common questions that comes up, so we should address it more directly in documentation and possibly even single-spa-examples.
See #107 (comment)
Currently the error messaging for a systemjs app that fails to load correctly is something like this:
Uncaught Error: "does not export an unmount function or array of functions"
. It should say something like this: App 'my-app' could not be loaded - could not resolve dependency "lodash"
Need to find a way to organize the functionality in a way that makes sense.
My ideas about this are vague and we've had a couple of small discussions about it, but I think that single-spa support might be needed for animations/transitions between apps because it is really the only thing that knows when apps are mounting and unmounting.
Not sure about implementation options or details, but would love to discuss it if anyone has ideas.
You cannot run an npm install single-spa --save
on a system that doesn't have JSPM installed.
Reproduction steps
npm init
in the new directorynpm install single-spa --save
This would include
SPA.loader
)Hi there, great framework. Thanks for sharing!
Do child apps need to be a single bundle or can they be code splitted?
As an exercise I converted https://github.com/AngularClass/angular-starter into a single-spa child and it successfully mounted onto my root single-spa app. However, it fails on certain routes within the child app, as it tries loading its chunk from the root app
GET http://127.0.0.1:8080/1.chunk.js
rather than the location of the child app on the filesystem.
What's the best strategy to enable on-demand loading of chunks for child apps? Or do I import every chunk in declareChildApplication
?
It should be the equivalent to exporting Promise.resolve().
Some single-spa applications may want to server render some or all of the child applications that are active for a url. How to pull that off is not decided, but here's what I'm thinking for it so far:
const location = {href: '/url#/hash', hash: '#/hash'};
// New API for single-spa returns an array of string names.
const activeAppNames = singleSpa.findActiveApplications(location);
// The serverRender API will load the app but will probably not bootstrap it and will definitely not mount it. Instead it will check
// for a new lifecycle method (serverRender?) on the application. If the lifecycleMethod exists, it calls it. If not, it returns an empty string
Promise
.all(activeAppNames.map(singleSpa.serverRender))
.then(serverRenderedHtmls => {
const finalHtml = serverRenderedHtmls.join("");
res.write(finalHtml);
})
Advantages of doing it that way:
findActiveApplications
might have other use cases besides server renderingDisadvantages:
declareChildApplication
.As suggested by Dealer Socket
I could see this being useful for a variety of reasons, but here are a couple I can think of right now:
bootstrap
hook in the apps, or maybe a single-spa:before-first-mount
event so that the loading bar doesn't show up temporarily while apps are mounting.From an implementation standpoint, I think this could be as simple as dispatching a CustomEvent inside of the mount lifecycle, and just keep track of if it has ever been fired before or not.
Steps to repro:
See https://github.com/CanopyTax/single-spa/blob/master/src/jquery-support.js#L3. The problem is that if you have multiple jquerys, only one of them would be compatible with single-spa
Right now lifecycle functions are not given any arguments. This proposal is to give it arguments, maybe an object with a childAppName
string
Right now we have <a href="/path" onclick="return window.singlespa(this)">Link</a>
, which is not terrible but is also not ideal.
Open to ideas/suggestions
When we call callCapturedEventListeners
, it only calls the captured event listeners with the current eventArguments, but not any previously queued eventArguments. See https://github.com/CanopyTax/single-spa/blob/e365390ff4fd0ac879edc9b6fc0ae2665b7cc7fa/src/navigation/reroute.js#L99. This matters because the first eventArguments sometimes is a PopStateEvent, and subsequently queued calls have a HashChangeEvent eventArguments. Because there are different event listeners for popstate and hashchange, this is a problem because the hashchange listeners will never be called.
joeldenning/single-spa@3bac030#diff-b91812c2eab4fbf92962784c8ce887c0R339 caused the bower-angular-phonecat example in single-spa-examples to break (probably because of a race condition). Need to investigate what's going on with importNode and if it is single-spa-angular1's fault or single-spa's fault.
This was reported by the guys at Dealer Socket. Apparently the UMD bundle doesn't play nice when required in a webpack bundle, like it should be.
Hi,
first of all great work!
I'm trying to use your example to see if this tool fit with my requirement and in the angular2 application I tried to add a simple router example. the angular 2 works great but when I try to switch to react (after angular2 has been loaded) it fail because angular2 is not unmounted and it try to find the path app1.
this is the repository that I created: https://github.com/daniele-zurico/microservice-test
I was wondering if single-spa allows combining multiple child applications using different versions of the same framework. Say i have two team that want to combine an angular2 and angular4 child app into the same page. Can the framework handle this? I would think not since this would trigger conflicts in the browser.
Right now single-spa is an embarrassing 55kb with minification and mangling (webpack -p
). But a lot of that is because single-spa uses async/await, which requires the babel regenerator runtime which is pretty large. So to fix this, we could remove all the async/await code in single-spa itself.
Hi there @joeldenning,
I came across this project and think it's pretty awesome. It seems to function very closely to how we want to do things at my company. My UI team has been talking more about how we can create a system that can work very much like how this does.
We would, however, require the ability to share data between the loaded micro apps somehow, and would also like to be able to manage the state as well. I may have missed it in the docs, but is this something that is possible currently, or do you know if there is anyone doing anything similar?
We want to be able to develop the different parts of our currently very monolithic application as smaller independent apps that can co-exist and communicate together through some kind of state management (redux) or other kind of interface.
Would love to hear your thoughts on this.
Thanks!
Jared
I have multiple react applications served on different servers (domains). Can I use single-spa to create a root application that includes these apps as child apps?
Something like this:
singleSpa.declareChildApplication('app1', () => import('http://localhost/MyReactApp/src/child-app.js'), hashPrefix('/app1'));
This is something the Dealer Socket guys have implemented and found useful for their iframe loading solution. It should work something like this:
// We've decided that this should be unloaded
import {unloadChildApplication} from 'single-spa';
unloadChildApplication('app-name', {waitForUnmount: true});
// Inside of the 'app-name' app
export async function unload() {
// Do something special here, on a per-app basis
SystemJS.delete('app-name');
}
This lifecycle would be the first optional lifecycle. What the unloadChildApplication
API will do is set the app.status to NOT_LOADED, after calling the unload
lifecyle.
An open question is what the default behavior for waitForUnmount
should be, and whether this is something that should be configurable or not.
Hi,
We are in the process of figuring out how to extend our angular 1.5 app with 2.0 child apps. single-spa seems like a great candidate. I was curious to know if there is any documentation regarding having child apps use their own package.json file instead of there being a globally defined package.json file for all child apps. Is this presently possible with single-spa?
This will help for people who import 'single-spa' in their tests that are run in a non-browser environment.
Need to polyfill it, as described in http://stackoverflow.com/questions/19345392/why-arent-my-parameters-getting-passed-through-to-a-dispatched-event/19345563#19345563
I would expect to be able to type npm start
in the root directory to start serving the app.
As suggested by the Dealer Socket team
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.