Skip to content

Instantly share code, notes, and snippets.

View joeldenning's full-sized avatar
🎯
Focusing

Joel Denning joeldenning

🎯
Focusing
838 followers · 13 following
View GitHub Profile
@joeldenning
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
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
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
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
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
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
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
joeldenning / common-dependencies.js
Created July 6, 2018 03:22
// The things imported with ES6 are things we want to execute right up front.
// The things required below are things we want to execute only when someone needs them.
// Switching between the two impacts performance. In general, it's better to be lazy with
// executing code, but there are some things we need to do right up front.
import SystemJS from 'systemjs'
if (window.sofeManifest) {
SystemJS.config(sofeManifest)
delete window.sofeManifest
}
@joeldenning
joeldenning / spalpatine.js
Created July 6, 2018 03:26
import * as isActive from './child-app-active.functions.js';
import * as singleSpa from 'single-spa'
// Main-content apps
singleSpa.registerApplication('workflow-ui', () => SystemJS.import('workflow-ui!sofe'), isActive.workflowUI);
singleSpa.registerApplication('end-user-forms-ui', () => SystemJS.import('end-user-forms-ui!sofe'), isActive.endUserFormsUI);
singleSpa.registerApplication('sme-qa-ui', () => SystemJS.import('sme-qa-ui!sofe'), isActive.smeQAUI);
singleSpa.registerApplication('letters-ui', () => SystemJS.import('letters-ui!sofe'), isActive.lettersUI);
singleSpa.registerApplication('docs-ui', () => SystemJS.import('docs-ui!sofe'), isActive.docsUI);
@joeldenning
joeldenning / activity-functions.js
Last active July 6, 2018 03:29
/* Util functions
*/
/* Use this function to check that the hash begins with a certain prefix
*/
export function hashPrefix(location, ...prefixes) {
return prefixes.some(prefix => location.hash.indexOf(`#/${prefix}`) === 0);
}
/* App-specific implementations that determine if they are active or not.