Joel Denning joeldenning

## gist:834296478d6d727e6b61
/**
 * The MIT License (MIT)
 *
 * Copyright (c) 2013 Thom Seddon
 * Copyright (c) 2010 Google
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

## single-spa-index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>A single-spa application</title>
  </head>
  <body>
     <div id="cool-app"></div>
     <script src="root-application.js"></script>

## single-spa-root-application.js
import {declareChildApplication, start} from 'single-spa';

// Register your first application with single-spa. More apps will be registered as you create them
declareChildApplication("cool-app", loadCoolApp, isCoolAppActive);

// Tell single-spa that you're ready for it to mount your application to the DOM
start();

// This is a "loading function"
function loadCoolApp() {

## cool.app.js
import singleSpaAngular1 from 'single-spa-angular1';
import angular from 'angular';
import './app.module.js';
import './routes.js';

const domElementGetter = () => document.getElementById('cool-app');

const angularLifecycles = singleSpaAngular1({
  angular,
  domElementGetter,

## single-spa-basic-lifecycles.js
// single-spa will import this file and call the exported lifecyle functions

let user;

export function bootstrap() {
  return fetch('/api/users/0')
    .then(response => response.json())
    .then(json => user = json);
}

## custom-elements.directive.js
/* NOTE: that this code was written for https://github.com/CanopyTax and some parts might not be suitable for the generic use case.
         It assumes that string data can be passed as both a property or an html attribute, and it prefers properties over attributes for everything.
   USAGE:
     - <x-foo attr1="'string'" />
     - <button is="my-button" />
     - <x-foo attr2="objOnScope" />
*/

import angular from 'angular';
import {forEach, kebabCase, includes} from 'lodash';

## gnarly-bug.js
/*
The goal of the following code is to render the text “Copied!” when you click on a div.
After two seconds, you want to change the text to say “Something else.”
However, there is a bug which makes “Something else” never render. The reason why is that
React considers the StyledDiv to be a new type of element every time that Parent rerenders.
And one of React's reconciliation heuristics is to unmount/remount whenever the top level
returned child is a different type of element. So by the time the setTimeout happens, we are calling
setState on an already unmounted component. A new Child component has been created, with the initial state saying
"Copied!"

## parcel-example.js
const parcel = singleSpa.mountRootParcel(parcelConfig, parcelProps)

// First wait for mounting to finish
parcel.mountPromise.then(() => {
  // Then re-render the parcel
  const newProps = {foo: 'bar'}
  return parcel.update(newProps)
}).then(() => {
  // Then unmount the parcel
  return parcel.unmount()

## single-spa-react-parcel-example.jsx
import {Parcel} from 'single-spa-react/parcel'
import parcelConfig from './other-file.js'
import {mountRootParcel} from 'single-spa'

function MyReactComponent(props) {
  // The parcelConfig could be implemented in Angular, Vue, or anything else,
  // but it works inside of a React component!
  return (
    <div>
      Lets render a parcel with jsx!

## splagueis.html
<!DOCTYPE html>
<html lang="en" style="width: 100%; min-height: 100%;">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="Your devoted Canopian engineering team">
    <title>
      Canopy: Delightful Client Management
    </title>
	/**
	* The MIT License (MIT)
	*
	* Copyright (c) 2013 Thom Seddon
	* Copyright (c) 2010 Google
	*
	* Permission is hereby granted, free of charge, to any person obtaining a copy
	* of this software and associated documentation files (the "Software"), to deal
	* in the Software without restriction, including without limitation the rights
	* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>A single-spa application</title>
	</head>
	<body>
	<div id="cool-app"></div>
	<script src="root-application.js"></script>
	import {declareChildApplication, start} from 'single-spa';

	// Register your first application with single-spa. More apps will be registered as you create them
	declareChildApplication("cool-app", loadCoolApp, isCoolAppActive);

	// Tell single-spa that you're ready for it to mount your application to the DOM
	start();

	// This is a "loading function"
	function loadCoolApp() {
	import singleSpaAngular1 from 'single-spa-angular1';
	import angular from 'angular';
	import './app.module.js';
	import './routes.js';

	const domElementGetter = () => document.getElementById('cool-app');

	const angularLifecycles = singleSpaAngular1({
	angular,
	domElementGetter,
	// single-spa will import this file and call the exported lifecyle functions

	let user;

	export function bootstrap() {
	return fetch('/api/users/0')
	.then(response => response.json())
	.then(json => user = json);
	}
	/* NOTE: that this code was written for https://github.com/CanopyTax and some parts might not be suitable for the generic use case.
	It assumes that string data can be passed as both a property or an html attribute, and it prefers properties over attributes for everything.
	USAGE:
	- <x-foo attr1="'string'" />
	- <button is="my-button" />
	- <x-foo attr2="objOnScope" />
	*/

	import angular from 'angular';
	import {forEach, kebabCase, includes} from 'lodash';
	/*
	The goal of the following code is to render the text “Copied!” when you click on a div.
	After two seconds, you want to change the text to say “Something else.”
	However, there is a bug which makes “Something else” never render. The reason why is that
	React considers the StyledDiv to be a new type of element every time that Parent rerenders.
	And one of React's reconciliation heuristics is to unmount/remount whenever the top level
	returned child is a different type of element. So by the time the setTimeout happens, we are calling
	setState on an already unmounted component. A new Child component has been created, with the initial state saying
	"Copied!"
	const parcel = singleSpa.mountRootParcel(parcelConfig, parcelProps)

	// First wait for mounting to finish
	parcel.mountPromise.then(() => {
	// Then re-render the parcel
	const newProps = {foo: 'bar'}
	return parcel.update(newProps)
	}).then(() => {
	// Then unmount the parcel
	return parcel.unmount()
	import {Parcel} from 'single-spa-react/parcel'
	import parcelConfig from './other-file.js'
	import {mountRootParcel} from 'single-spa'

	function MyReactComponent(props) {
	// The parcelConfig could be implemented in Angular, Vue, or anything else,
	// but it works inside of a React component!
	return (
	<div>
	Lets render a parcel with jsx!
	<!DOCTYPE html>
	<html lang="en" style="width: 100%; min-height: 100%;">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="description" content="">
	<meta name="author" content="Your devoted Canopian engineering team">
	<title>
	Canopy: Delightful Client Management
	</title>