Clean-up and fix web components #106

Author: m-mohr

components/FederationMissingNotice.vue

@@ -6,7 +6,7 @@
 			This data is incomplete as the following service{{services.length > 1 ? 's' : ''}} in the federation {{services.length > 1 ? 'are' : 'is'}} currently unavailable:
 		</p>
 		<ul>
-			<li v-for="service in services">
+			<li v-for="service in services" :key="service.url">
 				<div class="fed-header">
 					<strong class="fed-title">{{ service }}</strong>
 					<ul class="badges small inline">
@@ -19,17 +19,13 @@
 </template>
 
 <script>
-import FederationMixin from './internal/FederationMixin.js';
 import Utils from '../utils';
 
 export default {
 	name: 'FederationMissingNotice',
 	components: {
 		AsyncButton: () => import('./internal/AsyncButton.vue')
 	},
-	mixins: [
-		FederationMixin
-	],
 	props: {
 		missing: {
 			type: Array,
@@ -39,9 +35,13 @@ export default {
 			type: Function,
 			default: null
 		},
-		// Mixins don't work properly in web components,
-		// see https://github.com/vuejs/vue-web-component-wrapper/issues/30,
-		...FederationMixin.props
+		federation: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	beforeCreate() {
+		Utils.enableHtmlProps(this);
 	},
 	computed: {
 		services() {

components/internal/FederationNotice.vue

@@ -17,14 +17,10 @@
 </template>
 
 <script>
-import FederationMixin from './FederationMixin.js';
 import Utils from '../../utils';
 
 export default {
 	name: 'FederationNotice',
-	mixins: [
-		FederationMixin
-	],
 	props: {
 		entity: {
 			type: String,
@@ -34,9 +30,10 @@ export default {
 			type: Array,
 			default: []
 		},
-		// Mixins don't work properly in web components,
-		// see https://github.com/vuejs/vue-web-component-wrapper/issues/30,
-		...FederationMixin.props
+		federation: {
+			type: Object,
+			default: () => ({})
+		}
 	},
 	computed: {
 		unsupported() {

dev/create-wc-examples.js

@@ -3,11 +3,20 @@ const examples = require('./examples');
 
 const FOLDER = './examples';
 
-if (!fs.existsSync(FOLDER)){
-    fs.mkdirSync(FOLDER);
+if (fs.existsSync(FOLDER)) {
+	fs.rmdirSync(FOLDER, { recursive: true });
 }
+fs.mkdirSync(FOLDER);
+
+const ignored = [
+	'b-button',
+	'tooltip-icon'
+];
 
 for(let component in examples) {
+	if (ignored.includes(component)) {
+		continue;
+	}
 	for(let id in examples[component]) {
 		createExampleFile(component, id, examples[component][id]);
 	}
@@ -41,7 +50,7 @@ function createExampleFile(component, id, props) {
 			<meta charset="utf-8">
 			<meta name="viewport" content="width=device-width, initial-scale=1">
 			<title>openEO ${component}</title>
-			<link href="../dev/examples.css" rel="stylesheet"></script>
+			<link href="../dev/examples.css" rel="stylesheet" />
 			<script src="../assets/openeo.js"></script>
 			<link rel="preload" as="font" type="font/woff2" crossorigin href="https://use.fontawesome.com/releases/v5.13.0/webfonts/fa-solid-900.woff2" />
 			<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" type="text/css" media="all" />

dev/examples.js

@@ -27,7 +27,7 @@ let externalProc = require('./examples/model-builder/external_process.json');
 let asyncFn = () => new Promise(resolve => setTimeout(() => {
 	alert("Async action executed");
 	resolve();
-}, 3000))
+}, 3000));
 
 module.exports = {
 	"b-button": {