Componentes da Web de polímero em ember-cli

Algumas notas rápidas sobre como colocar os componentes da Web do Polymer em funcionamento em um projeto ember-cli (> = 0.4.1).

Também reuni uma essência que cobre as alterações de código necessárias em cada arquivo para instalar os componentes.

Os componentes da Web representam o futuro do desenvolvimento da Web (e uma eventual substituição / adição drop-in para componentes do Ember após o lançamento 2.0 e HTMLBars). Além disso, existem alguns componentes incrivelmente interessantes para ajudá-lo a construir aplicativos da web muito ricos usando a nova linguagem de design de material do Google.

O primeiro passo é adicionar os componentes individuais do caramanchão:

bower install --save Polymer/polymer
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements

Em seguida, você desejará adicionar alguns pacotes npm adicionais para que possa disponibilizar os elementos individuais do Polymer para seu aplicativo.

npm install --save-dev broccoli-static-compiler
npm install --save-dev broccoli-merge-trees

Você usará esses dois projetos para mesclar os arquivos polímero.js / polímero.html necessários para os elementos individuais do Polymer (ou usar o Polymer para escrever seus próprios componentes da Web para ter uma ideia do que os componentes do Ember eventualmente se tornarão).

Você também desejará adicionar explicitamente o arquivo platform.js à árvore de compilação do seu aplicativo em seu Brocfile, pois ele fornece os polyfills do Componente da Web / Shadow DOM necessários para fazer tudo isso funcionar no Safari, Firefox e IE (os últimos lançamentos do Chrome agora oferecem suporte nativo para todos os recursos do Polymer, portanto, não são necessários polyfills).

var polymer = pickFiles('bower_components/', {
  srcDir: '',
  files: [
    'polymer/polymer.js',
    'polymer/polymer.html',
    'platform/platform.js'
  ],
  destDir: '/assets'
});

O próximo passo é adicionar o pacote brócolis-vulcanizar:

npm install --save-dev broccoli-vulcanize

A ferramenta de vulcanizar permite compilar componentes individuais do Polymer em uma única importação <link>, em vez de precisar importar explicitamente cada componente de que você precisa. Isso reduz potencialmente dezenas de solicitações de rede a apenas uma (duas se você decidir compilar o JS dos arquivos vulcanizados em um include separado).

Você precisará criar um novo arquivo html na pasta do aplicativo (costumo chamá-lo de elements.html). Lá, você precisará adicionar todas as entradas individuais do elemento Polymer <link rel = “import”> para os componentes individuais que planeja usar. Felizmente, os projetos do Polymer bower já vêm com páginas que permitem adicionar rapidamente a maioria dos elementos centrais e de papel sem ter que adicionar explicitamente cada um (embora a fonte, o ícone e os elementos de transição precisem ser incluídos manualmente se você quiser). Você precisa especificar a localização relativa dos arquivos na pasta bower_components:

<link rel="import" href="../bower_components/core-elements/core-elements.html">
<link rel="import" href="../bower_components/paper-elements/paper-elements.html">

Você pode adicionar seus próprios componentes da Web personalizados a este arquivo (ou importá-los de outro arquivo com uma instrução <link>.

Agora, adicione uma etapa de vulcanização ao seu Brocfile:

var polymerVulcanize = vulcanize('app', {
  input: 'elements.html',
  output: 'assets/vulcanized.html',
  csp: true,
  inline: true,
  strip: false,
  excludes: {
    imports: ["(^data:)|(^http[s]?:)|(^/)"],
    scripts: ["(^data:)|(^http[s]?:)|(^/)"],
    styles: ["(^data:)|(^http[s]?:)|(^/)"]
  }
});

Adicione seus novos recursos à árvore de compilação do seu aplicativo:

module.exports = mergeTrees([
  polymerVulcanize,
  polymer,
  app.toTree()
]);

Agora, você só precisa adicionar platform.js e seus novos arquivos vulcanized.html ao index.html do seu aplicativo (antes de qualquer outro script ser carregado):

<script src="assets/platform/platform.js"></script>
<link rel="import" href="assets/vulcanized.html">