Polymer 3 with Webpack and TypeScript

index.ts

import { OTUser, OTUserProvider, OTUserDetails } from './ot-user/ot-user'
import { OTFooter } from './ot-footer/ot-footer'
import { OTTopNav, OTTopNavSection, OTTopNavSubSection } from './ot-top-nav/ot-top-nav'

customElements.define('ot-user', OTUser)
customElements.define('ot-user-provider', OTUserProvider)
customElements.define('ot-user-details', OTUserDetails)

customElements.define('ot-footer', OTFooter)

customElements.define('ot-top-nav', OTTopNav)
customElements.define('ot-top-nav-section', OTTopNavSection)
customElements.define('ot-top-nav-sub-section', OTTopNavSubSection)

ot-footer.ts

import { Element as PolymerElement } from '@polymer/polymer/polymer-element'
import templateHtml from './ot-footer.html'
import * as templateCss from './ot-footer.css'
import { OTUserProvider } from 'components/ot-user/ot-user-provider';

export class OTFooter extends PolymerElement {
  user = {}
  otUserProvider: OTUserProvider
  shadowRoot: ShadowRoot

  constructor() {
    super()
  }

  ready() {
    super.ready()

    this.otUserProvider = this.shadowRoot.querySelector('ot-user-provider') as OTUserProvider
    this.otUserProvider.addEventListener('otuseravailable', (event: any) => {
      this.user = event.detail.user
    })
  }

  static get template() {
    return `<style>${templateCss}</style> ${templateHtml}`
  }
}

ot-top-nav.ts

import { Element as PolymerElement } from '@polymer/polymer/polymer-element'
import '@polymer/polymer/lib/elements/dom-if';
import '@polymer/polymer/lib/elements/dom-repeat';

export { OTTopNavSection, OTTopNavSubSection } from './ot-top-nav-section/ot-top-nav-section'
import templateHtml from './ot-top-nav.html'
import * as templateCss from './ot-top-nav.css'
import * as sharedCss from '../ot-shared/ot-shared-variables.css'
import { OTUserProvider } from 'components/ot-user/ot-user';


export class OTTopNav extends PolymerElement {
  user = undefined
  otUserProvider: OTUserProvider
  shadowRoot: ShadowRoot

  static get template() {
    return `
      <style>
        ${sharedCss}
        ${templateCss}
      </style>
      ${templateHtml}
    `
  }

  ready() {
    super.ready()

    this.otUserProvider = this.shadowRoot.querySelector('ot-user-provider') as OTUserProvider
    this.otUserProvider.addEventListener('otuseravailable', (event: any) => {
      this.user = event.detail.user
    })
  }
}

webpack.config.js

const path = require('path')
const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin')

const config = {
  entry: {
    components: './components/index.ts',
    'ot-user': './components/ot-user/ot-user.ts',
    'ot-footer': './components/ot-footer/ot-footer.ts',
    'ot-top-nav': './components/ot-top-nav/ot-top-nav.ts'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.ts', '.js', '.html', '.svg', '.css']
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['to-string-loader', 'css-loader']
      },
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
      },
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader?exportAsEs6Default'
        }
      },
      {
        test: /\.ts?$/,
        loader: 'awesome-typescript-loader'
      }
    ]
  },
  devServer: {
    contentBase: './dist'
  },
  plugins: [new webpack.optimize.ModuleConcatenationPlugin(), new CleanWebpackPlugin(['dist'])]
}

module.exports = config

webpack.prod.js

const ClosureCompilerPlugin = require('webpack-closure-compiler');
const merge = require('webpack-merge')
const webpackConfig = require('./webpack.config')

module.exports = merge(webpackConfig, {
  plugins: [
    new ClosureCompilerPlugin({
      compiler: {
        language_in: 'ECMASCRIPT6',
        language_out: 'ECMASCRIPT6',
        compilation_level: 'ADVANCED'
      },
      concurrency: 3,
    })
  ]
})