From 508d1be2795ba5c43f0f6da0dbe7d6771028aeff Mon Sep 17 00:00:00 2001 From: Joel Denning Date: Tue, 22 Aug 2023 17:49:38 -0600 Subject: [PATCH 1/4] New blog post (#592) --- blog/2023-08-22-single-spa-core-team-vacancies.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 blog/2023-08-22-single-spa-core-team-vacancies.md diff --git a/blog/2023-08-22-single-spa-core-team-vacancies.md b/blog/2023-08-22-single-spa-core-team-vacancies.md new file mode 100644 index 000000000..9ab225df1 --- /dev/null +++ b/blog/2023-08-22-single-spa-core-team-vacancies.md @@ -0,0 +1,13 @@ +# The single-spa core team is expanding + +We are happy to announce that the single-spa core team is opening applications for two new members! As a core team member, you will help us maintain and guide the growing single-spa ecosystem by responding to Github and Slack issues, implementing new features, and helping to create the roadmap for the future of single-spa. + +Our current core team consists of Joel Denning, Carlos Filoteo, and Anthony Frehner. We also thank Justin McMurdie and Bret Little for their valuable contributions during their time with the single-spa core team. + +Single-spa owes its success to the people and companies who support it. If you want to contribute but aren’t able to join the core team, consider applying to be a maintainer. Maintainers are volunteers who receive Github write access to specific subprojects within the ecosystem. If you’re a manager at a company that uses single-spa, we encourage you to allow your developers to volunteer their time as maintainers or core team members so that the project can continue to grow and develop. + +The single-spa core team and maintenance are unpaid volunteer positions. Looking ahead, if any core team members or maintainers are interested in new paid roles, Convex Cooperative (the company Joel works for) will be considering hiring new developers from the single-spa team. It’s important to state that Convex will not poach developers away from companies who allow their developers to help us maintain single-spa—our priority is nurturing the growth and development of the single-spa ecosystem. + +If interested in applying to be a single-spa maintainer or core team member, please fill out the following Google Form before September 1, 2023: + +[https://docs.google.com/forms/d/1zIfP2kYjNBCi-qjKf9T1-sNT1VLSXTB9twwX_mxKYxU/edit](https://docs.google.com/forms/d/1zIfP2kYjNBCi-qjKf9T1-sNT1VLSXTB9twwX_mxKYxU/edit) From 678e9f33f78197e27fe9b43138003a3dac651c4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Pablo=20Ram=C3=ADrez=20Vargas?= Date: Tue, 22 Aug 2023 17:50:45 -0600 Subject: [PATCH 2/4] Add vite-plugin-single-spa to Vite Ecosystem (#591) --- versioned_docs/version-5.x/ecosystem-vite.md | 77 +++++++++++++++++++- 1 file changed, 75 insertions(+), 2 deletions(-) diff --git a/versioned_docs/version-5.x/ecosystem-vite.md b/versioned_docs/version-5.x/ecosystem-vite.md index 0f6a4e00d..f8d59d1ad 100644 --- a/versioned_docs/version-5.x/ecosystem-vite.md +++ b/versioned_docs/version-5.x/ecosystem-vite.md @@ -42,11 +42,84 @@ export default { ## Local development -Vite works well with [development via import map overrides](https://single-spa.js.org/docs/recommended-setup#local-development). You should use http://localhost:3000/src/main.js as the URL for your import map override. +Vite works well with [development via import map overrides](https://single-spa.js.org/docs/recommended-setup#local-development). You should use http://localhost:3000/src/main.js as the URL for your import map override. It is important to note, however, that assets such as images and fonts won't load. The import map is only used to load JavaScript, not media files. The import map does not affect asset URL's. Asset URL's are affected by Vite's `base` configuration property, and Vite doesn't respect full URL's in said property while in serve mode (`npm run dev`). While in serve mode, a base with a full URL is stripped down to its path. Therefore, the asset URL's don't really get the correct host URL. The author of [vite-plugin-single-spa](https://www.npmjs.com/package/vite-plugin-single-spa) has opened [a discussion in Vite's GitHub](https://github.com/vitejs/vite/discussions/13927) that you can opt to support by upvoting it. ## Native Modules vs SystemJS single-spa works well with native modules, systemjs, or even both. With Vite + single-spa, a general recommendation is to use native modules during local development, but SystemJS in production (since browser support for Import Maps is still pending). Doing this is nice because it matches Vite's development workflow; however, mixing native and systemjs modules also can have some caveats: - The browser and SystemJS maintain separate module registries. This means that you can't share imports between SystemJS and native modules. So if you are doing an import map override for a Vite application on a page that also uses SystemJS, you may end up with multiple instances of Vue (and other shared libraries), which is different than how things will work in production. This is generally okay, except for situations where the Vue instance is modified via `Vue.use()`. -- [This PR to SystemJS](https://github.com/systemjs/systemjs/pull/2187) shows how you can populate native modules into the SystemJS registry, allowing for one-way sharing of modules between the two registries. The PR was closed due to some edge cases, but it generally works. Even though the PR is closed, you can paste the ESM extra into your root config and it will work. If you have interest in driving forward better SystemJS + ESM compatibility, comment on Github or Slack with your interest. \ No newline at end of file +- [This PR to SystemJS](https://github.com/systemjs/systemjs/pull/2187) shows how you can populate native modules into the SystemJS registry, allowing for one-way sharing of modules between the two registries. The PR was closed due to some edge cases, but it generally works. Even though the PR is closed, you can paste the ESM extra into your root config and it will work. If you have interest in driving forward better SystemJS + ESM compatibility, comment on Github or Slack with your interest. + +## vite-plugin-single-spa + +This is a new entry that is currently in the early stages of development, but shows significant progress ([view in GitHub](https://github.com/WJSoftware/vite-plugin-single-spa)). It claims to be able to convert out-of-the-box Vite projects (regardless of the framework) into single-spa micro-frontend projects and even root config projects. While the single-spa team discourages the use of UI frameworks in root configs, it is indeed an alternative that may interest people. + +To convert a Vite project to a root config project, all that is needed is install `vite-plugin-single-spa`, and then use it in `vite.config.ts`. This is a Vite + Vue example: + +```typescript +import vitePluginSingleSpa from 'vite-plugin-single-spa'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vue(), vitePluginSingleSpa({ + type: 'root' + } + })] +}); +``` + +To convert a Vite project to a micro-frontend project, a similarly minimalistic configuration is needed, plus a file that exports the single-spa lifecycle functions. + +```typescript +// vite.config.ts for a Vite + React project + +import react from '@vitejs/plugin-react' +import vitePluginSingleSpa from 'vite-plugin-single-spa'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react(), vitePluginSingleSpa({ + serverPort: 4101, + spaEntryPoint: 'src/spa.tsx' + })], +}); +``` + +```typescript +// src/spa.tsx + +import React from 'react'; +import ReactDOMClient from 'react-dom/client'; +// @ts-ignore +import singleSpaReact from 'single-spa-react'; +import App from './App'; +import { cssLifecycle } from 'vite-plugin-single-spa/ex'; + +const lc = singleSpaReact({ + React, + ReactDOMClient, + rootComponent: App, + errorBoundary(err: any, _info: any, _props: any) { + return
Error: {err}
+ } +}); + +export const bootstrap = [cssLifecycle.bootstrap, lc.bootstrap]; +export const mount = [cssLifecycle.mount, lc.mount]; +export const unmount = [cssLifecycle.unmount, lc.unmount]; +``` + +### Main Features + ++ Supports stock Vite projects, regardless of framework. ++ Micro-frontend projects behave dually while in serve mode: The micro-frontend can be previewed as a standalone web application with its server URL, or it can be served as a single-spa micro-frontend. ++ As seen in the example above, it provides an extra module that automatically mounts and unmounts the CSS referenced by the lifecycle-exporting module (`src/spa.tsx` in the example). **COMING SOON** ++ Automatically picks up import maps from `src/importMap.dev.json` and `src/importMap.json`. ++ Automatically adds the `import-map-overrides` NPM package, user interface included. + +--- + +**IMPORTANT**: The author of this plug-in does not believe in creating dedicated root config projects. Furthermore, this package will, by default, create import maps for native modules. We at single-spa recommend SystemJS modules. Yes, single-spa is perfectly capable of working with native modules as well. + +The opinions of the author of this plug-in in no way represent those of single-spa, and it is an independent work. We present it here as one more option in the Vite ecosystem. From 1fcdd77258adb41ce111336d5a70fd31c9d1f96c Mon Sep 17 00:00:00 2001 From: joeldenning Date: Tue, 22 Aug 2023 17:52:39 -0600 Subject: [PATCH 3/4] Rename url slug for blog post --- ...am-vacancies.md => 2023-08-22-single-spa-core-is-expanding.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename blog/{2023-08-22-single-spa-core-team-vacancies.md => 2023-08-22-single-spa-core-is-expanding.md} (100%) diff --git a/blog/2023-08-22-single-spa-core-team-vacancies.md b/blog/2023-08-22-single-spa-core-is-expanding.md similarity index 100% rename from blog/2023-08-22-single-spa-core-team-vacancies.md rename to blog/2023-08-22-single-spa-core-is-expanding.md From 5aa39678f5f78c32d81bd643d25076980208c44a Mon Sep 17 00:00:00 2001 From: Joel Denning Date: Thu, 24 Aug 2023 15:35:09 -0600 Subject: [PATCH 4/4] Update Slack join link (#593) --- blog/2018-06-19-single-spa-parcels-explained.md | 2 +- blog/2020-02-24-single-spa-5.md | 2 +- docusaurus.config.js | 2 +- src/components/HomeSplash/index.js | 2 +- src/data/help.js | 2 +- versioned_docs/version-4.x/contributing-overview.md | 2 +- versioned_docs/version-4.x/ecosystem-angular.md | 2 +- versioned_docs/version-4.x/starting-from-scratch.md | 2 +- versioned_docs/version-5.x/contributing-overview.md | 2 +- versioned_docs/version-5.x/ecosystem-angular.md | 2 +- versioned_docs/version-5.x/getting-started-overview.md | 2 +- 11 files changed, 11 insertions(+), 11 deletions(-) diff --git a/blog/2018-06-19-single-spa-parcels-explained.md b/blog/2018-06-19-single-spa-parcels-explained.md index 952fdfef6..3b53b5938 100644 --- a/blog/2018-06-19-single-spa-parcels-explained.md +++ b/blog/2018-06-19-single-spa-parcels-explained.md @@ -67,4 +67,4 @@ We’d love to get your feedback on parcels. What do you think of this new way o Check out the [official docs](https://github.com/single-spa/single-spa/blob/master/docs/parcels.md) for more examples, explanations, and [api documentation](https://github.com/single-spa/single-spa/blob/master/docs/parcels-api.md). -And let us know your thoughts in the [single-spa Slack channel](https://join.slack.com/t/single-spa/shared_invite/zt-15a59134l-ytK9bWMD1z3vGTC9LwPREg), a [Github issue](https://github.com/single-spa/single-spa/issues), or [on Twitter](https://twitter.com/Single_spa)! +And let us know your thoughts in the [single-spa Slack channel](https://join.slack.com/t/single-spa/shared_invite/zt-21skfl7l3-leF7JkoKwKaRIPX~N6jXJQ), a [Github issue](https://github.com/single-spa/single-spa/issues), or [on Twitter](https://twitter.com/Single_spa)! diff --git a/blog/2020-02-24-single-spa-5.md b/blog/2020-02-24-single-spa-5.md index 655684bf1..00511ecde 100644 --- a/blog/2020-02-24-single-spa-5.md +++ b/blog/2020-02-24-single-spa-5.md @@ -92,4 +92,4 @@ This change does not mean anything drastic for single-spa. Its license was and i We are actively [translating the single-spa documentation to Chinese](https://github.com/single-spa/zh-hans.single-spa.js.org), and hope to add other languages soon. We will add full [Angular 9 support](https://github.com/single-spa/single-spa-angular/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+angular+9) soon, and hope to add [server rendering](https://github.com/single-spa/single-spa/issues/103) in an upcoming release. -Please [contribute to our code](/docs/contributing-overview) and [ecosystem](/docs/ecosystem), [join our single-spa slack channel](https://join.slack.com/t/single-spa/shared_invite/zt-15a59134l-ytK9bWMD1z3vGTC9LwPREg), [follow our official Twitter account](https://twitter.com/Single_spa), and contribute to [our open collective](https://opencollective.com/single-spa). The [single-spa core team](/contributors) all have full-time jobs and maintain this project on a volunteer basis. +Please [contribute to our code](/docs/contributing-overview) and [ecosystem](/docs/ecosystem), [join our single-spa slack channel](https://join.slack.com/t/single-spa/shared_invite/zt-21skfl7l3-leF7JkoKwKaRIPX~N6jXJQ), [follow our official Twitter account](https://twitter.com/Single_spa), and contribute to [our open collective](https://opencollective.com/single-spa). The [single-spa core team](/contributors) all have full-time jobs and maintain this project on a volunteer basis. diff --git a/docusaurus.config.js b/docusaurus.config.js index e19df6f61..6a794e4a5 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -88,7 +88,7 @@ module.exports = { { label: 'Chat in Slack', href: - 'https://join.slack.com/t/single-spa/shared_invite/zt-15a59134l-ytK9bWMD1z3vGTC9LwPREg', + 'https://join.slack.com/t/single-spa/shared_invite/zt-21skfl7l3-leF7JkoKwKaRIPX~N6jXJQ', }, { label: 'Twitter', diff --git a/src/components/HomeSplash/index.js b/src/components/HomeSplash/index.js index 4b643c1f0..0b3890e9a 100644 --- a/src/components/HomeSplash/index.js +++ b/src/components/HomeSplash/index.js @@ -29,7 +29,7 @@ export const HomeSplash = () => { + to="https://join.slack.com/t/single-spa/shared_invite/zt-21skfl7l3-leF7JkoKwKaRIPX~N6jXJQ"> Join Slack Chat diff --git a/src/data/help.js b/src/data/help.js index 6d33ea973..5078fd4a4 100644 --- a/src/data/help.js +++ b/src/data/help.js @@ -6,7 +6,7 @@ const supportLinks = [ }, { content: - 'You can join the conversation on [Slack](https://join.slack.com/t/single-spa/shared_invite/zt-15a59134l-ytK9bWMD1z3vGTC9LwPREg) on one of our channels: #general for user help and #maintainers for contributing help.', + 'You can join the conversation on [Slack](https://join.slack.com/t/single-spa/shared_invite/zt-21skfl7l3-leF7JkoKwKaRIPX~N6jXJQ) on one of our channels: #general for user help and #maintainers for contributing help.', title: 'Slack', }, { diff --git a/versioned_docs/version-4.x/contributing-overview.md b/versioned_docs/version-4.x/contributing-overview.md index 6b979be99..2263aeecd 100644 --- a/versioned_docs/version-4.x/contributing-overview.md +++ b/versioned_docs/version-4.x/contributing-overview.md @@ -80,6 +80,6 @@ If you don't see your idea listed, and you think it fits into the goals of this ## Community -Discussions about single-spa take place on the single-spa repository's [Issues](https://github.com/single-spa/single-spa/issues) and [Pull Requests](https://github.com/single-spa/single-spa/pulls) sections. Anybody is welcome to join these conversations. There is also a [slack community](https://join.slack.com/t/single-spa/shared_invite/zt-15a59134l-ytK9bWMD1z3vGTC9LwPREg) for regular updates. +Discussions about single-spa take place on the single-spa repository's [Issues](https://github.com/single-spa/single-spa/issues) and [Pull Requests](https://github.com/single-spa/single-spa/pulls) sections. Anybody is welcome to join these conversations. There is also a [slack community](https://join.slack.com/t/single-spa/shared_invite/zt-21skfl7l3-leF7JkoKwKaRIPX~N6jXJQ) for regular updates. Wherever possible, do not take these conversations to private channels, including contacting the maintainers directly. Keeping communication public means everybody can benefit and learn from the conversation. diff --git a/versioned_docs/version-4.x/ecosystem-angular.md b/versioned_docs/version-4.x/ecosystem-angular.md index b8c4ae0a1..09d9e640d 100644 --- a/versioned_docs/version-4.x/ecosystem-angular.md +++ b/versioned_docs/version-4.x/ecosystem-angular.md @@ -16,7 +16,7 @@ The documentation here is extensive, so use the sidenav on the right. 👉👉 ### Community -Join the `#angular` channel in [single-spa's Slack workspace](https://join.slack.com/t/single-spa/shared_invite/zt-15a59134l-ytK9bWMD1z3vGTC9LwPREg). +Join the `#angular` channel in [single-spa's Slack workspace](https://join.slack.com/t/single-spa/shared_invite/zt-21skfl7l3-leF7JkoKwKaRIPX~N6jXJQ). ### Demo diff --git a/versioned_docs/version-4.x/starting-from-scratch.md b/versioned_docs/version-4.x/starting-from-scratch.md index e290eca39..7307fddd1 100644 --- a/versioned_docs/version-4.x/starting-from-scratch.md +++ b/versioned_docs/version-4.x/starting-from-scratch.md @@ -21,7 +21,7 @@ For this tutorial we will be creating the following applications to showcase the The complete code for this example is in the [`single-spa-simple-example`](https://github.com/alocke12992/single-spa-simple-example) repository. :::note -We encourage you to read through all the [single-spa docs](/) to become familiar with the entire single-spa setup. Visit the [single-spa Github](https://github.com/single-spa/single-spa), the [help section](https://single-spa.js.org/help.html), or our community [Slack](https://join.slack.com/t/single-spa/shared_invite/zt-15a59134l-ytK9bWMD1z3vGTC9LwPREg) channel for more support. +We encourage you to read through all the [single-spa docs](/) to become familiar with the entire single-spa setup. Visit the [single-spa Github](https://github.com/single-spa/single-spa), the [help section](https://single-spa.js.org/help.html), or our community [Slack](https://join.slack.com/t/single-spa/shared_invite/zt-21skfl7l3-leF7JkoKwKaRIPX~N6jXJQ) channel for more support. ::: ## 1. Initial setup diff --git a/versioned_docs/version-5.x/contributing-overview.md b/versioned_docs/version-5.x/contributing-overview.md index d119e66f4..4a3915780 100644 --- a/versioned_docs/version-5.x/contributing-overview.md +++ b/versioned_docs/version-5.x/contributing-overview.md @@ -82,6 +82,6 @@ If you don't see your idea listed, and you think it fits into the goals of this ## Community -Discussions about single-spa take place on the single-spa repository's [Issues](https://github.com/single-spa/single-spa/issues) and [Pull Requests](https://github.com/single-spa/single-spa/pulls) sections. Anybody is welcome to join these conversations. There is also a [Slack workspace](https://join.slack.com/t/single-spa/shared_invite/zt-15a59134l-ytK9bWMD1z3vGTC9LwPREg) for regular updates. +Discussions about single-spa take place on the single-spa repository's [Issues](https://github.com/single-spa/single-spa/issues) and [Pull Requests](https://github.com/single-spa/single-spa/pulls) sections. Anybody is welcome to join these conversations. There is also a [Slack workspace](https://join.slack.com/t/single-spa/shared_invite/zt-21skfl7l3-leF7JkoKwKaRIPX~N6jXJQ) for regular updates. Wherever possible, do not take these conversations to private channels, including contacting the maintainers directly. Keeping communication public means everybody can benefit and learn from the conversation. diff --git a/versioned_docs/version-5.x/ecosystem-angular.md b/versioned_docs/version-5.x/ecosystem-angular.md index 0b1e44da8..5fda2428f 100644 --- a/versioned_docs/version-5.x/ecosystem-angular.md +++ b/versioned_docs/version-5.x/ecosystem-angular.md @@ -20,7 +20,7 @@ The documentation here is extensive, so use the sidenav on the right. 👉👉 ### Community -Join the `#angular` channel in [single-spa's Slack workspace](https://join.slack.com/t/single-spa/shared_invite/zt-15a59134l-ytK9bWMD1z3vGTC9LwPREg). +Join the `#angular` channel in [single-spa's Slack workspace](https://join.slack.com/t/single-spa/shared_invite/zt-21skfl7l3-leF7JkoKwKaRIPX~N6jXJQ). ### Demo diff --git a/versioned_docs/version-5.x/getting-started-overview.md b/versioned_docs/version-5.x/getting-started-overview.md index 19217de7e..2d537e94b 100644 --- a/versioned_docs/version-5.x/getting-started-overview.md +++ b/versioned_docs/version-5.x/getting-started-overview.md @@ -6,7 +6,7 @@ sidebar_label: Overview of single-spa ## JavaScript Microfrontends -[Join the chat on Slack](https://join.slack.com/t/single-spa/shared_invite/zt-15a59134l-ytK9bWMD1z3vGTC9LwPREg) +[Join the chat on Slack](https://join.slack.com/t/single-spa/shared_invite/zt-21skfl7l3-leF7JkoKwKaRIPX~N6jXJQ) single-spa is a framework for bringing together multiple JavaScript microfrontends in a frontend application. Architecting your frontend using single-spa enables many benefits, such as: