bower and polymer

[HIRANO-Satoshi]

There are so many web components (> 2000) in the following library.

https://customelements.io/

I would be happy if someone adds config-bower so that we can use Aurelia with Polymer and the web components.

I used to use Polymer and Aurelia with Webpack. easy-webpack made my config files useless.

┆Issue is synchronized with this Asana task

[niieani]

Can you paste your previous config file?

[HIRANO-Satoshi]

Yes.

webpack.base-typescript.js

    loaders: [
      /*
       * Typescript loader support for .ts
       *
       * See: https://github.com/s-panferov/awesome-typescript-loader
       */
      {
        test: /\.ts$/,
        loader: 'awesome-typescript',
        exclude: [ helpers.root('node_modules'), helpers.root('bower_components'), helpers.root('config') ],
        query: {
          tsconfig: 'tsconfig.webpack.json'

webpack.base.js

var BowerWebpackPlugin = require("bower-webpack-plugin");
...
  aurelia: [
...
    'aurelia-polymer',    
    'aurelia-route-recognizer',
    'aurelia-router',
    'aurelia-task-queue',
...
...
    modulesDirectories: ['node_modules', "bower_components"],

...
  plugins: [

    new AureliaWebpackPlugin({
      root: helpers.root('.'),
      src: helpers.root('src')
    }),

    /*
     * Added for bower and Polymer
     */
    new BowerWebpackPlugin({
        searchResolveModulesDirectories: false
    }),

[niieani]

This looks quite simple, you can do this very easily without a plugin, just trim it down to the bower-specific items and add somewhere into the generateConfig call:

{
  modulesDirectories: ['node_modules', 'bower_components'],
  plugins: [
    /*
     * Added for bower and Polymer
     */
    new BowerWebpackPlugin({
        searchResolveModulesDirectories: false
    })
  ]
}

and add the exclude to TypeScript by calling config-typescript with { exclude: [path.resolve('bower_components')] }.

Should do the trick.

Feel free to also publish your own NPM package, similarly to how other configs are made too. When writing the docs I'll add a public list of configs maintained by other people.

[HIRANO-Satoshi]

I see. Thanks.

Actually I have come back to JSPM. Use of Polymer with Aurelia and Webpack has some issues.

[aruntk]

I've built a package to handle polymer/webcomponents files and html imports (with code reload support)

https://github.com/aruntk/wc-loader. check out.

Demo https://github.com/aruntk/polymer-webpack-demo