joeldenning’s gists

joeldenning / gist:834296478d6d727e6b61

Last active January 29, 2016 17:41 — forked from thomseddon/gist:4703968

Auto Expanding/Grow textarea directive for AngularJS

	/**
	* 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

joeldenning / single-spa-index.html

Last active November 28, 2016 19:42

	<!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>

joeldenning / single-spa-root-application.js

Last active October 5, 2018 22:11

A simple root-application.js file for single-spa

	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() {

joeldenning / cool.app.js

Last active November 29, 2016 17:35

	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,

joeldenning / single-spa-basic-lifecycles.js

Last active December 16, 2016 04:41

	// 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);
	}

joeldenning / custom-elements.directive.js

Created February 5, 2018 23:37

Angular custom elements support

	/* 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';

joeldenning / gnarly-bug.js

Last active February 8, 2018 20:01

styled-components inside of render

	/*
	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!"

joeldenning / parcel-example.js

Created June 16, 2018 21:30

single-spa parcel basic example

	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()

joeldenning / single-spa-react-parcel-example.jsx

Last active June 21, 2022 14:20

single-spa-react parcel example

	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!

joeldenning / splagueis.html

Last active July 6, 2018 03:34

	<!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>

Joel Denning joeldenning