Перейти с полимера 2 на полимер 3 - PullRequest
Новая
       32

Перейти с полимера 2 на полимер 3

0 голосов
/ 17 июня 2019

Я пытаюсь обновить наше приложение Polymer 2 до Polymer 3, но у меня гораздо больше проблем, чем я ожидал.

Что я уже сделал:

  • запустил модулятор на всех наших внутренних зависимостях
  • запустил модулятор на основном приложении
  • исправил пути импорта и вообще импортировал

  • удалил зависимости, которыене были должным образом преобразованы на данный момент (просто чтобы посмотреть, смогу ли я запустить приложение по крайней мере минимальным образом)

    После запуска модулятора в основном приложении я заметил, что большинство наших компонентов были преобразованы втаким образом:

    imports

    const $_documentContainer = document.createElement('template');

    $_documentContainer.innerHTML = component html here

    append new const to document head

    usual class declaration + logic for component

    Это кажется странным, потому что единственная ссылка, которую я смог найти на этот вид конверсии, была https://polymer -library.polymer-project.org / 3.0 / docs / upgrade # less-common-upgrade-tasks и не похоже, что у нас есть dom, который не является частью шаблона в большинстве компонентов(хотя я могу неправильно понимать, что они подразумевают под dom that's not part of the template).

    Поскольку большинство компонентов преобразуются таким образом, при попытке запустить приложение я получаю кучу Identifier '$_documentContainer' has already been declared ошибок.

    Кто-нибудь сталкивался с этим раньше?Есть ли что-то, что мы упускаем в объяснении dom that's not part of the template в документации?

    Для справки, это один из компонентов (урезанный), который был преобразован так, как я упоминал выше: 

 <dom-module id="not-found">
      <template strip-whitespace>
        <style>
          .button {
            width: 400px;
            max-width: 100%;
            margin: 0 auto;
            background-color: var(--color-orange);
            color: var(--color-white);
          }
        </style>
    
        <button class="button" on-click="__handleClick">Go back</button>
      </template>
    
      <script>
        class NotFound extends  Polymer.Element {
    
          static get is() {
            return 'not-found';
          }
    
          static get properties() {
            return {
              // list of props
            };
          }
    
          __handleClick(event) {
           // handle click
          }
        }
    
        window.customElements.define(NotFound.is, NotFound);

  </script>
</dom-module>

Я извиняюсь за фрагмент кода, но не смог правильно отформатировать пример кода в блок и подумал, что фрагмент облегчит чтение.Любая помощь будет оценена.

...