23 |

Separately Running Multiple Apps

24 | 25 | 26 |

27 | 28 |

29 |

Rendering Apps in Same Container

30 | 31 |

32 |

Error Mode

33 | Disabled 34 | Enabled 35 |

36 | 37 |

38 | 39 | 40 |

41 |

42 |

43 |

44 | `; 45 | 46 | this.container = this.root.querySelector('.container'); 47 | this.root.addEventListener('keyup', this.handleInputChange); 48 | this.root.addEventListener('change', this.handleInputChange); 49 | this.root.addEventListener('click', this.handleButtonClick); 50 | } 51 | 52 | handleInputChange = (event) => { 53 | if (event.target.id === 'title') { 54 | this.title = event.target.value; 55 | this.updateLoadedApp(); 56 | return; 57 | } 58 | 59 | if (event.target.name !== 'errorMode') { 60 | return false; 61 | } 62 | 63 | this.errorMode = event.target.value === '1'; 64 | 65 | this.updateLoadedApp(); 66 | }; 67 | 68 | handleButtonClick = (event) => { 69 | if (event.target.nodeName !== 'BUTTON') { 70 | return; 71 | } 72 | 73 | this.loadApp(event.target.dataset.app); 74 | }; 75 | 76 | updateLoadedApp() { 77 | if (this.loadedApp) { 78 | this.loadedApp.setAttribute('title', this.title); 79 | 80 | if (this.errorMode) { 81 | this.loadedApp.setAttribute('error-mode', ''); 82 | } else { 83 | this.loadedApp.removeAttribute('error-mode'); 84 | } 85 | } 86 | } 87 | 88 | loadApp(app) { 89 | this.container.innerHTML = ''; 90 | 91 | this.loadedApp = document.createElement(app); 92 | 93 | if (this.errorMode) { 94 | this.loadedApp.setAttribute('error-mode', ''); 95 | } 96 | 97 | this.loadedApp.setAttribute('title', this.title); 98 | 99 | this.loadedApp.addEventListener('load', (load) => { 100 | console.log('loaded', load); 101 | }); 102 | 103 | this.loadedApp.addEventListener('error', (err) => { 104 | console.error('error', err); 105 | 106 | this.loadedApp.parentNode.removeChild(this.loadedApp); 107 | this.loadedApp = null; 108 | this.container.appendChild(this.getError(err.detail)); 109 | }); 110 | 111 | this.container.appendChild(this.loadedApp); 112 | } 113 | 114 | getError(err) { 115 | const message = document.createElement('p'); 116 | message.innerHTML = err.stack.split('\n').join('
'); 117 | return message; 118 | } 119 | } 120 | 121 | export function render(Component, element) { 122 | const component = new Component(); 123 | component.bootstrap(element); 124 | } 125 | -------------------------------------------------------------------------------- /src/components/angular-app.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/angular-app/angular-app.js: -------------------------------------------------------------------------------- 1 | import * as angular from 'angular'; 2 | import { AppModule, html } from './app.module'; 3 | 4 | export class AngularApp extends HTMLElement { 5 | static name = 'angular-app'; 6 | 7 | static get observedAttributes() { 8 | return ['error-mode', 'title']; 9 | } 10 | 11 | get title() { 12 | return this.getAttribute('title'); 13 | } 14 | 15 | get errorMode() { 16 | return this.hasAttribute('error-mode'); 17 | } 18 | 19 | set errorMode(val) { 20 | // Reflect the value of the open property as an HTML attribute. 21 | if (val) { 22 | this.setAttribute('error-mode', ''); 23 | } else { 24 | this.removeAttribute('error-mode'); 25 | } 26 | } 27 | 28 | produceError(e) { 29 | this.dispatchEvent(new CustomEvent('error', {detail: e})); 30 | } 31 | 32 | constructor() { 33 | super(); 34 | 35 | console.log('AngularApp constructor', this); 36 | } 37 | 38 | connectedCallback() { 39 | try { 40 | if (this.errorMode) { 41 | throw new Error('Application failed at load'); 42 | } 43 | } catch (e) { 44 | this.produceError(e); 45 | return; 46 | } 47 | 48 | console.log('AngularApp connected'); 49 | 50 | this.innerHTML = html; 51 | 52 | const name = `${AppModule}.instance`; 53 | 54 | // create new module as we attaching `run` callback 55 | angular.module(name, [AppModule]) 56 | .value('config', {title: this.title}) 57 | .run(() => { 58 | console.log(`Angular module ${AppModule} instance is running`); 59 | this.dispatchEvent(new Event('load')); 60 | }); 61 | 62 | this.$injector = angular.bootstrap(this, [name], { 63 | strictDi: true 64 | }); 65 | } 66 | 67 | disconnectedCallback() { 68 | console.log('AngularApp disconnected'); 69 | } 70 | 71 | attributeChangedCallback(attrName, oldVal, newVal) { 72 | console.log('AngularApp attributeChanged', attrName, oldVal, newVal); 73 | 74 | if (!this.$injector) { 75 | return; 76 | } 77 | 78 | switch (attrName) { 79 | case 'title': 80 | const element = angular.element(this); 81 | const config = element.injector().get('config'); 82 | config.title = this.title; 83 | element.scope().$apply(); 84 | return; 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/components/angular-app/app.component.js: -------------------------------------------------------------------------------- 1 | export class AppComponent { 2 | static component = { 3 | template: ` 4 |

5 |

Title: {{ $ctrl.config.title }}

6 |

Greeting: {{ $ctrl.hello }}

7 |

8 | `, 9 | controller: AppComponent, 10 | }; 11 | 12 | static $inject = ['$http', 'config']; 13 | 14 | hello = 'Angular Web Component'; 15 | 16 | constructor($http, config) { 17 | this.$http = $http; 18 | this.config = config; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/components/angular-app/app.module.js: -------------------------------------------------------------------------------- 1 | import * as angular from 'angular'; 2 | import { AppComponent } from './app.component'; 3 | 4 | export const html = ''; 5 | 6 | export const AppModule = angular.module('app', []) 7 | .component('app', AppComponent.component) 8 | .name; 9 | -------------------------------------------------------------------------------- /src/components/angular-app/index.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/angular-app/main.js: -------------------------------------------------------------------------------- 1 | import { AngularApp } from './angular-app'; 2 | 3 | window.customElements.define(AngularApp.name, AngularApp); 4 | -------------------------------------------------------------------------------- /src/components/react-app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/components/react-app/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | export class App extends Component { 4 | state = { 5 | hello: 'React Web Component' 6 | }; 7 | 8 | render() { 9 | return ( 10 |

11 |

Title: {this.props.title}

12 |

Greeting: {this.state.hello}

13 |

14 | ) 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components/react-app/index.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/react-app/main.js: -------------------------------------------------------------------------------- 1 | import { ReactApp } from './react-app'; 2 | 3 | window.customElements.define(ReactApp.name, ReactApp); 4 | -------------------------------------------------------------------------------- /src/components/react-app/react-app.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom'; 3 | import { App } from './App'; 4 | 5 | export class ReactApp extends HTMLElement { 6 | static name = 'react-app'; 7 | 8 | static get observedAttributes() { 9 | return ['error-mode', 'title']; 10 | } 11 | 12 | getTitle() { 13 | return this.getAttribute('title'); 14 | } 15 | 16 | get errorMode() { 17 | return this.hasAttribute('error-mode'); 18 | } 19 | 20 | set errorMode(val) { 21 | if (val) { 22 | this.setAttribute('error-mode', ''); 23 | } else { 24 | this.removeAttribute('error-mode'); 25 | } 26 | } 27 | 28 | produceError(e) { 29 | this.dispatchEvent(new CustomEvent('error', {detail: e})); 30 | } 31 | 32 | constructor() { 33 | super(); 34 | 35 | console.log('ReactApp constructor', this); 36 | } 37 | 38 | connectedCallback() { 39 | try { 40 | if (this.errorMode) { 41 | throw new Error('Application failed at load'); 42 | } 43 | } catch (e) { 44 | this.produceError(e); 45 | return; 46 | } 47 | 48 | console.log('ReactApp connected'); 49 | 50 | this.render(); 51 | } 52 | 53 | render() { 54 | render(, this); 55 | } 56 | 57 | disconnectedCallback() { 58 | console.log('ReactApp disconnected',); 59 | } 60 | 61 | attributeChangedCallback(attrName, oldVal, newVal) { 62 | console.log('ReactApp attributeChanged', attrName, oldVal, newVal); 63 | 64 | switch (attrName) { 65 | case 'title': 66 | this.render(); 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Web components loader 6 | 7 | 8 | 9 | 18 | 19 | 20 |

21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { Application, render } from './application'; 2 | 3 | document.addEventListener('DOMContentLoaded', () => { 4 | render(Application, document.getElementById('app')); 5 | }); 6 | -------------------------------------------------------------------------------- /src/polyfills.js: -------------------------------------------------------------------------------- 1 | import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter'; 2 | import '@webcomponents/custom-elements'; 3 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | 4 | module.exports = (env) => { 5 | const prod = env && env.production; 6 | 7 | return { 8 | entry: { 9 | polyfills: root('src/polyfills.js'), 10 | main: root('src/main.js'), 11 | 'components/react-app': root('src/components/react-app/main.js'), 12 | 'components/angular-app': root('src/components/angular-app/main.js'), 13 | }, 14 | output: { 15 | path: root('dist'), 16 | filename: prod ? '[name].[chunkhash].js' : '[name].js', 17 | }, 18 | resolve: { 19 | extensions: ['.js'] 20 | }, 21 | devServer: { 22 | port: 4300, 23 | }, 24 | devtool: 'source-map', 25 | module: { 26 | rules: [ 27 | { 28 | test: /\.js$/, 29 | exclude: /node_modules/, 30 | use: { 31 | loader: 'babel-loader', 32 | options: { 33 | cacheDirectory: true 34 | } 35 | } 36 | } 37 | ] 38 | }, 39 | plugins: [ 40 | new HtmlWebpackPlugin({ 41 | filename: 'index.html', 42 | template: root('src/index.html'), 43 | inject: false, 44 | }), 45 | new HtmlWebpackPlugin({ 46 | chunks: ['components/angular-app'], 47 | filename: 'components/angular-app.html', 48 | template: root('src/components/angular-app/index.html'), 49 | inject: false, 50 | }), 51 | new HtmlWebpackPlugin({ 52 | chunks: ['components/react-app'], 53 | filename: 'components/react-app.html', 54 | template: root('src/components/react-app/index.html'), 55 | inject: false, 56 | }), 57 | ] 58 | }; 59 | }; 60 | 61 | function root(file) { 62 | return path.resolve(__dirname, file); 63 | } 64 | --------------------------------------------------------------------------------