single-spa/single-spa.js.org

single-spa.js.org's Issues

Translation into Chinese and other languages

We have a lot of Chinese users of single-spa and should look into finding people who can maintain the translations. Other languages would also be appreciated.

Initial work would be to set things up with docusaurus so that the translations, maybe through Crowdin. See https://docusaurus.io/docs/en/translation

Document testing options for cross-microfrontend imports

This has come up enough times that I'm thinking it could be added to the documentation so that people can find it for themselves. As of right now, I haven't found anywhere in the docs that talks about how to handle microfrontend imports in a testing scenario. Here is one example of what the core team usually recommends: https://single-spa.slack.com/archives/C8R6U7MT7/p1597759987468600?thread_ts=1597759216.468300&cid=C8R6U7MT7

To do unit tests with cross microfrontend imports, you have two options:

1. Publish the shared dependency to NPM. and install it into your node_modules so that it works in Jest.
2. Mock the shared dependency with jest’s moduleNameMapper

quick-start / root-config module can not be opened in Chrome

I have followed the Quick Start guide and tried to open it on Chrome. I received some errors.

The page opened in Firefox without any errors.

Update the "Join the chat on Slack" link in README.md

The Slack invitation link is no longer valid.

Replace curly brackets with HTML representation

Under api.md, Docusaurus doesn't render the curly brackets for:

<dt>customProps?: Object = {}</dt>

The HTML equivalent must be used, such as:

<dt>customProps?: Object = &#123;&#125;</dt>

Add links and documentation for Backbone.

A community member @SVemulapalli has created a helper library for Backbone applications. We should add it to the documentation for single-spa

Import maps - outdated info in docs

Describe the bug or question
This docs page contains outdated information:
https://single-spa.js.org/docs/recommended-setup#import-maps

Currently import maps are fully supported in Chrome and Microsoft Edge. You can check this here:
https://caniuse.com/import-maps

Expected behavior
Docs should not contain outdated information

Docs: Vue ecosystem rending a parcel code example

Describe the bug or question
The code example for rendering a parcel in Vue rendering a parcel seems to declare a variable Widget without assigning any value.

Assuming this is in error?

Add version to dependencies?

Hello there,

I'm exploring this module and following the guide "Starting from scratch" I'm having many problems mainly regarding to babel and other dependencies versions.

Ex:

error [email protected]: The engine "node" is incompatible with this module. Expected version ">= 6.9.0 <7.0.0 || >= 8.9.0".
error Found incompatible module

Error: Cannot find module '@babel/core'

After solving the ones above (Which are quite simple to solve)

Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/x/spa-test/node_modules/babel-preset-react/lib/index.js

The last one I couldn't solve yet. Maybe you could provide the latest tested versions as suggested in the docs? I know it's not a problem of the single-spa, but I believe that making the docs/tutorials less prone to errors and tutorials might help the newcomers, hence bring more of them and maybe some future contributors.

Just a suggestion.

Thanks for the good work.

Discussion: Improvement on `Utility` documentation

I've been spending some time explaining single-spa to people at Workfront and I've some potential areas for improvement in the documentation around utilities. There has been a decent amount of confusion around this point in the documentation.

Right now we describe a utility as something with no routes, no single-spa api, that doesn't directly render ui, and has no lifecycles.

I'm wondering if it would be better to describe it as: "An external javascript module that implements one or more aspects of a shared context outside of single-spa, but accessible to single-spa applications."

In our recommended approach a Utility has no direct interface with single-spa. It's just a singleton js module that exports methods that can be used by single-spa applications/parcels through SystemJS. A few examples of utilities at Canopy that would be in violation of how we describe them in the documentation:

1. toast-service: it directly renders ui, IIRC it isn't even initialized by the root-config it initializes itself when it is imported.
2. sentry-error-logging-ui: this has lifecycles, but the lifecycles don't match the normal single-spa lifecycles because it doesn't have it's own UI, but it does have a conceptual bootstrap lifecycle.
3. feature-toggles-ui: Before leaving canopy we added some features to this around users being able to temporarily opt-out of feature-toggles and it had ui.

I'm hoping we can have a discussion about this because I'm not sure how to describe a utility as an external js module without leading to more confusion.

Add link to single-spa-inspector in docs

https://github.com/single-spa/single-spa-inspector

Can we have a full CRA/ vue-cli/angular-cli Example?

Hi guys,
We have a iframe microfrontend architecture and want to run a POC with single-spa, I've tried to follow the docs and implement a few examples. But since our apps are built via the CRA and other cli's making it work still eludes me.

Could you possibly provide a full "Real world" example with CRA/CLI's?

I wish I could give you an example of my issue. But its just too complex. basically Im trying to do something like structure wise:

frontend
   dashboard - CRA
   inbox - CRA
  reservstion - Angular

have the dashboard render a Header and the apps according to tabs.

My Issue is that since this is a CRA and I dont control the webpack non of your examples work for me. tried adding bundled scripts but still that didnt work for me.

can you assist?

The doc's `Examples and starter kits` part not rightly redirect

Describe the bug or question
The doc's Examples and starter kits part not right redirect https://single-spa.js.org/docs/getting-started-overview

To Reproduce
https://single-spa.js.org/docs/getting-started-overview

Expected behavior
It should be visit rightly

Screenshots and/or console output
If applicable, add screenshots or console output to help explain your problem.

Additional context

The same error is happened when click these links

Update "Getting started" with create-single-spa

The "Getting Started" page should have a section that guides a user to:

1. create a root config
2. create a basic application (generic? or perhaps starting with single-spa-html?)
3. wiring up that application to the root-config

single-spa-playground kind of serves this purpose but I've helped a few people who do not understand what to do once their application is running there.

Opening this discussion here to get feedback on whether this should be a beginner-to-single-spa's starting point.

single-spa-vue: Add `handleInstance` documentation

single-spa/single-spa-vue#59 adds handleInstance api to support how Vue 3 registers plugins, and should be documented.

Add language picker to error code pages

Non-english users of single-spa should be able to easily switch to their language when viewing the error code documentation.

Angular documentation : Wrong link to parcel doc

Going here https://single-spa.js.org/docs/ecosystem-angular/#parcels, the two first links in the summary are respectively redirecting to https://single-spa.js.org/docs/parcels-overview.md and https://single-spa.js.org/docs/parcels-api.md

Which are returning page not found :

Update Slack Link

Describe the bug or question
The slack invite link is no longer active. Can you update it?

Slack link no longer working

Describe the bug or question
I am unable to connect to slack via the link provided in overview (readme.md)

To Reproduce
Try to subscribe to the single-spa community in slack.
Expected behavior
Expect to be able to connect to slack community when clicking 'Join Slack Community'

Algolia search results in 404 page

Algolia doesn't reload the page when it navigates to a page found via the main search bar. Instead calls window.history.pushState() (or similar via react-router). The urls that it links you to have the .html extension which is defunct as of docusaurus v2. A page reload triggers the redirect to the page without the .html extension, but that doesn't happen unless the user manually reloads the page.

Any ideas on how to fix this @endiliey or @lex111? Is there an algoliaOption that can be set in docusaurus.config.js to force it to reload the page? Or is there a way to clear out the search index that Algolia has created for when we were using v1?

Does single-spa support nextjs?

Just wish to know if single-spa support nextjs and is there any sample codes for integration with nextjs?

Add documentation translation to Spanish

Hi Single SPA community,

In the company where I work, we started using single SPA for some micro-frontend projects, I think it's a great framework for micro front-end composition/routing, however, there is not documentation for LATAM.

I would like to know, how to translate the content in Spanish, in order to have more coverage in this region.

Thanks in advance for your time and your answer.

Translate documentation into Portuguese

Document typescript for cross microfrontend imports.

Yapi二次开发

你好，偶然间在Yapi二次开发的常见问题中发先你提出的：UnhandledPromiseRejectionWarning: Error: 初始化管理员账号 "[email protected]" 失败, E11000 duplicate key error collection: yapi.user index: email_1 dup key: { : "[email protected]" }这个问题，想请教下，这个是怎么解决的

Does the released vue project support this switch with menus?

How many switching vue projects have been supported to do this switching with menus?

Fix side navigation on single-spa-angular page

Something about the styling of the single-spa-angular page is causing the floating side navigation to be pushed to the bottom of the page.

Ember Docs seem outdated?

The docs related to using single-spa-ember suggest that ember-cli requires bower:

First, since the ember cli only supports dependencies from bower, you'll need to do:

bower init
bower install single-spa-ember --save

However, per the updated Ember docs, this appears to be outdated:

When you're using dependencies that are not included in an addon, you will have to instruct Ember CLI to include your assets in the build. This is done using the asset manifest file ember-cli-build.js. You should only try to import assets located in the node_modules and vendor folders. bower_components also still works, but is recommended against, unless you have no other choice. Even bower recommends not to use itself anymore.

I would make a PR on the docs themselves, but honestly, I'm not sure what the right answer is as I'm still trying to make sense of how all this works.

Trailing slash breaks links

Steps to reproduce

1. Visit this URL https://single-spa.js.org/docs/module-types
2. Click on any link, e.g. recommendations
3. Click on the browsers back button
4. Click again on the recommendations link

Expected behavior
No matter how often I navigate back and forth, the link for recommendations should always result in http://localhost:3000/docs/recommended-setup/#applications-versus-parcels-versus-utility-modules.md

Current behavior
When navigating back and forth, the link for recommendations (as well as any other link) looks like this: https://single-spa.js.org/docs/module-types/recommended-setup/#applications-versus-parcels-versus-utility-modules.md (module-types is still part of the URL, thus leading into a 404).

Upon further investigation, one can see that a redirect happens when a user navigates back. The URL looked like this https://single-spa.js.org/docs/module-types and after navigating back and forth and getting a redirect the URL looks like this https://single-spa.js.org/docs/module-types/ (notice the trailing slash). This only happens on the deployed version.

Typo in single-spa-leaked-globals code example

The example for unmount array shows including leakedGlobalsLifecycles.mount, instead it should be
leakedGlobalsLifecycles.unmount in here, https://single-spa.js.org/docs/ecosystem-leaked-globals/

export const unmount = [
  leakedGlobalsLifecycles.mount,
  // Make sure leaked globals lifecycles' unmount function is **after** other lifecycles' unmount
  // This is so the global vars are still available during the framework unmount lifecycle function.
  frameworkLifecycles.unmount,
]

Expected behavior

export const unmount = [
  leakedGlobalsLifecycles.unmount,
  // Make sure leaked globals lifecycles' unmount function is **after** other lifecycles' unmount
  // This is so the global vars are still available during the framework unmount lifecycle function.
  frameworkLifecycles.unmount,
]

Build is broken

We need to upgrade to circle CI 2.0 to get the deploys working again.

https://circleci.com/gh/single-spa/single-spa.js.org/509

Russian translation

Hi! Have we now work for Russian translation in progress? If not I want to write it. Can you create ru.single-spa.js.org repo?

Use relative links between documentation pages

See https://v2.docusaurus.io/docs/versioning/#linking-files. Our code does absolute links instead of relative links, which is not good.

document the different uses of esm and es2015 bundles

just so it's clear when to use which (and when they get used by default)

see single-spa/single-spa#516 (comment)

(docs) Broken links in documentation page

Hi everyone!

Actual behavior

I was reading the documentation but the next links are broken:

https://single-spa.js.org/docs/getting-started-overview/migrating-angularJS-tutorial.md
https://single-spa.js.org/docs/getting-started-overview/migrating-react-tutorial.md

Expected behavior

Allow to read the links in the documentation.

Additional notes

If I found any other links I will update this issue.

Cheers!

change example link

I thought we had removed the link on the homepage that goes to the old, deprecated surge.sh site.

In any case, I think it's time to replace it. potentially with one of the new repos that was created.

thoughts?

"example root config" link leads to empty page

I read "Configuring single-spa" documentation page:
https://single-spa.js.org/docs/configuration/#registering-applications

And found link that leads to empty page:

link	empty page

Seems like this link is used in multiple pages:

Should it be updated?

Vue: document async function for appOptions

See single-spa/single-spa-vue#69

Blog post about "how canopy does independent deployments with single-spa"

Migrated from single-spa/single-spa#169

Document parcel alternatives

See #207 (comment) for context

The alternative example isn't ready yet but should be in a few days, this way I don't forget about it.

Broken link on migrating-existing-spas page

The link to create a single spa config on the 'migrating-existing-spas' page seems to be broken. The page containing the link is
https://single-spa.js.org/docs/migrating-existing-spas/

The link leads here:
https://single-spa.js.org/docs/migrating-existing-spas/configuration
(page not found error)

Search page does not display results

The latest Docusaurus version adds a search results page (https://single-spa.js.org/search) but it doesn't seem to be able to display actual results (try going to https://single-spa.js.org/search?q=retry). I'm unsure why. If this is just an indexing problem, maybe we can force a re-index. If its some other configuration that is missing, maybe we can find it in the Docusaurus documentation https://v2.docusaurus.io/docs/search/#using-algolia-docsearch

React Ecosystem SingleSpaContext documentation request

Documentation request:
https://single-spa.js.org/docs/ecosystem-react.html#singlespacontext

migrate existing spa css configuration link leads to 404

In the following section:
https://single-spa.js.org/docs/migrating-existing-spas/#2-getting-the-css-fonts-script-dependencies-to-work

this link https://single-spa.js.org/docs/migrating-existing-spas/configuration leads to a page not found error.

Building spa-applications link does not exists

In this part of single-spa website documentation, In this paragraph there is a link to register the application with single-spa

This link does not exists

Document angular parcel component

single-spa/single-spa-angular#122

Migrate Website to Docusaurus 2 Alpha

Hi there (@@joeldenning and others)! The Docusaurus team is currently developing Docusaurus 2 and are almost done with an MVP that doesn't include translations and versioning features, which means there's feature parity with your website's current usage of Docusaurus.

Docusaurus 2 brings about many improvements:

• Client-side rendering with prerendering (site renders without JavaScript!)
• More flexible appearance - Customizable layouts, CSS modules, etc
• Embeddable interactive React components within markdown via MDX

I will be your POC in helping you throughout the migration process. Let me know what you think!

cc @yangshun @endiliey @wgao19

single-spa.js.org-master\website\.docusaurus\registry.js: Bad character escape sequence (8:163)

error

cannot close alies header

No disrespect, though we cannot reach the navigation on desktop. because this banner is on top of all items:

Arabic translation is not exist

Im the main website there is no Arabic option within the languages you offer,
would be great to offer Arabic option.