import Vue from 'vue';
import App from './App.vue';
import "glue-components/dist/glue-components/glue-components.css";
import { applyPolyfills, defineCustomElements } from 'glue-components/loader';

Vue.config.productionTip = false;

// Tell Vue to ignore all components defined in the glue-components
// package. The regex assumes all components names are prefixed
// 'test'
Vue.config.ignoredElements = [/test-\w*/];

// Bind the custom elements to the window object
applyPolyfills().then(() => {
  defineCustomElements();
});

new Vue({
  render: h => h(App)
}).$mount('#app');

render() {
  return (
    <div>
      <glue-button></glue-button>
    </div>
  )
}

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import "glue-components/dist/glue-components/glue-components.css";
import registerServiceWorker from './registerServiceWorker';

// test-component is the name of our made up web components that we have
// published to npm:
import { applyPolyfills, defineCustomElements } from 'glue-components/loader';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

applyPolyfills().then(() => {
  defineCustomElements();
});

render() {
  return (
    <div>
      <glue-button></glue-button>
    </div>
  )
}

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// Note: loader import location set using "esmLoaderPath" within the output target config
import { defineCustomElements } from 'glue-components/loader';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));
defineCustomElements();

import {Component, ElementRef, ViewChild} from '@angular/core';

import 'glue-components';

@Component({
    selector: 'app-home',
    template: `<glue-button #test></glue-button>`,
    styleUrls: ['./home.component.scss'],
})
export class HomeComponent {

    @ViewChild('test') myGlueButtonComponent: ElementRef<HTMLTestComponentElement>;

    async onAction() {
        await this.myGlueButtonComponent.nativeElement.testComponentMethod();
    }
}