Skip to content

Instantly share code, notes, and snippets.

@umarov
Created December 3, 2017 19:02
Show Gist options
  • Save umarov/508aeebfbadefbe13e2049fafd2a85f2 to your computer and use it in GitHub Desktop.
Save umarov/508aeebfbadefbe13e2049fafd2a85f2 to your computer and use it in GitHub Desktop.
Polymer 3 with Webpack and TypeScript
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)
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
})
}
}
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
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,
})
]
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment