feat: implement single-spa-angular/parcel library to render parcels
#298
Conversation
| @@ -142,9 +151,6 @@ | |||
| } | |||
| }, | |||
| "lint-staged": { | |||
| "*.{ts,html,scss,md,yml}": [ | |||
| "prettier --write", | |||
| "git add" | |||
There was a problem hiding this comment.
Does lint-staged automatically stage git files now?
There was a problem hiding this comment.
Don't really know :) It was whining that some hook uses git add 🤷♂️
| if (this.mountParcel === null) { | ||
| throw new Error(` | ||
| <parcel> was not passed a [mountParcel] binding. | ||
| If you are using <parcel> within a module that is not a single-spa application, you will need to import mountRootParcel from single-spa and pass it into <parcel> as a [mountParcel] binding |
There was a problem hiding this comment.
One thing to note here, is that there is mountRootParcel and mountParcel. The mountParcel function is one that is provided as a prop to all single-spa applications. The two functions are identical, except that mountParcel is bound to the current application, and will automatically unmount the parcel when the application is unmounted.
In React, we automatically use the mountParcel function inside of single-spa-react by using React context to do dependency injection.
Let's update the languaging here to reflect this:
| If you are using <parcel> within a module that is not a single-spa application, you will need to import mountRootParcel from single-spa and pass it into <parcel> as a [mountParcel] binding | |
| If you are using <parcel> within a module that is not a single-spa application, you will need to either (1) import mountRootParcel from single-spa or (2) use the `mountParcel` prop provided to single-spa applications. One of those two should be passed into <parcel> as a [mountParcel] binding |
| if (this.appendTo !== null) { | ||
| this.appendTo.appendChild(this.wrapper); | ||
| } else { | ||
| this.host.nativeElement.appendChild(this.wrapper); |
There was a problem hiding this comment.
Is host.nativeElement the parent component's wrapper dom element?
|
|
||
| const ReactLogo = React.lazy(() => import('./ReactLogo')); | ||
|
|
||
| class ReactWidget extends React.Component { |
There was a problem hiding this comment.
The Angular dev in you is coming out here, in choosing to use a react class component instead of function component 😄 (this is a joke - using class components is completely fine)
cypress/plugins/index.js
Outdated
|
|
||
| // https://docs.github.com/en/free-pro-team@latest/actions/reference/environment-variables#default-environment-variables | ||
| const isCI = process.env.CI === 'true'; | ||
| console.log(`[isCI = ${isCI}]`); |
| @@ -0,0 +1,12 @@ | |||
| import { BrowserModule } from '@angular/platform-browser'; | |||
| import { NgModule } from '@angular/core'; | |||
| import { ParcelModule } from 'single-spa-angular/parcel'; | |||
There was a problem hiding this comment.
Why don't we have to import ParcelComponent here and add it to the declarations block?
| .should('exist') | ||
| .get('parcel-root parcel img') | ||
| .invoke('attr', 'alt') | ||
| .should('eq', 'React logo'); |
No description provided.