From 0a9bcd7e1880a44593ce702fefc98442e73b7abe Mon Sep 17 00:00:00 2001
From: Brad Adams <hi@breadadams.com>
Date: Sun, 16 Feb 2020 23:11:39 +0100
Subject: [PATCH] build: update angular and vue sdks

+ Revert Angular dev dependencies to v8
+ Unmount previous card with ReactDOM on prop changes
---
 packages/angular/package.json                 | 44 +++++++++----------
 .../src/microlink/microlink.component.ts      | 13 +++++-
 packages/vue/src/index.js                     |  6 +++
 3 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/packages/angular/package.json b/packages/angular/package.json
index 6690c9417..90d22abe3 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -24,35 +24,35 @@
     "@microlink/vanilla": "^5.0.12"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "latest",
-    "@angular-devkit/build-ng-packagr": "latest",
-    "@angular/cli": "latest",
-    "@angular/common": "latest",
-    "@angular/compiler": "latest",
-    "@angular/compiler-cli": "latest",
-    "@angular/core": "latest",
-    "@angular/forms": "latest",
-    "@angular/language-service": "latest",
-    "@angular/platform-browser": "latest",
-    "@angular/platform-browser-dynamic": "latest",
-    "@babel/core": "latest",
+    "@angular-devkit/build-angular": "~0.803.23",
+    "@angular-devkit/build-ng-packagr": "~0.803.23",
+    "@angular/cli": "~8.3.23",
+    "@angular/common": "~8.2.14",
+    "@angular/compiler": "~8.2.14",
+    "@angular/compiler-cli": "~8.2.14",
+    "@angular/core": "~8.2.14",
+    "@angular/forms": "^8.2.14",
+    "@angular/language-service": "~8.2.14",
+    "@angular/platform-browser": "^8.2.14",
+    "@angular/platform-browser-dynamic": "^8.2.14",
+    "@babel/core": "^7.8.4",
     "@microlink/demo-links": "latest",
     "@storybook/angular": "latest",
     "@types/node": "latest",
-    "babel-loader": "latest",
-    "codelyzer": "latest",
-    "ng-packagr": "latest",
+    "babel-loader": "^8.0.6",
+    "codelyzer": "^5.0.0",
+    "ng-packagr": "^5.4.0",
     "prettier-standard": "latest",
-    "protractor": "latest",
+    "protractor": "~5.4.0",
     "react": "latest",
     "react-dom": "latest",
-    "rxjs": "latest",
+    "rxjs": "^6.4.0",
     "styled-components": "latest",
-    "ts-node": "latest",
-    "tsickle": "latest",
-    "tslint": "latest",
-    "typescript": "3.7.5",
-    "zone.js": "latest"
+    "ts-node": "~7.0.0",
+    "tsickle": "^0.37.0",
+    "tslint": "~5.15.0",
+    "typescript": "~3.5.3",
+    "zone.js": "^0.9.1"
   },
   "peerDependencies": {
     "@angular/core": "^8",
diff --git a/packages/angular/src/microlink/microlink.component.ts b/packages/angular/src/microlink/microlink.component.ts
index ae996323f..24612e181 100644
--- a/packages/angular/src/microlink/microlink.component.ts
+++ b/packages/angular/src/microlink/microlink.component.ts
@@ -1,28 +1,37 @@
 import {
+  AfterViewInit,
   Component,
   ElementRef,
   Input,
+  OnChanges,
   SimpleChanges,
   ViewChild
 } from '@angular/core'
+import ReactDOM from 'react-dom'
 import microlink from '@microlink/vanilla'
 
 @Component({
   selector: 'microlink',
   template: '<div #cardSpace class="microlink_angular_dom"></div>'
 })
-export class MicrolinkComponent {
+export class MicrolinkComponent implements AfterViewInit, OnChanges {
   @Input() url: string
   @Input() options: object
 
   @ViewChild('cardSpace', { static: false }) cardSpace: ElementRef
 
   renderCard () {
+    const { nativeElement } = this.cardSpace
+
+    if (nativeElement && nativeElement.childNodes.length > 0) {
+      ReactDOM.unmountComponentAtNode(nativeElement)
+    }
+
     const anchor = document.createElement('a')
     anchor.href = this.url
     anchor.innerHTML = this.url
 
-    microlink(anchor, this.options, this.cardSpace.nativeElement)
+    microlink(anchor, this.options, nativeElement)
   }
 
   ngAfterViewInit () {
diff --git a/packages/vue/src/index.js b/packages/vue/src/index.js
index 556b2151d..ec96895e5 100644
--- a/packages/vue/src/index.js
+++ b/packages/vue/src/index.js
@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import ReactDOM from 'react-dom'
 import microlink from '@microlink/vanilla'
 
 const camelCase = string => string.replace(/-([a-z])/g, g => g[1].toUpperCase())
@@ -18,6 +19,11 @@ export const Microlink = Vue.component('Microlink', {
   methods: {
     renderCard () {
       const { cardSpace } = this.$refs
+
+      if (cardSpace && cardSpace.childNodes.length > 0) {
+        ReactDOM.unmountComponentAtNode(cardSpace)
+      }
+
       const anchor = document.createElement('a')
       anchor.href = this.url
       anchor.innerHTML = this.url