Каков правильный синтаксис экспорта для смесителей Polymer 3? - PullRequest
Новая
       4

Каков правильный синтаксис экспорта для смесителей Polymer 3?

0 голосов
/ 07 июня 2018

[Устаревшие отредактированные файлы удалены из этого вопроса.]

РЕДАКТИРОВАТЬ

Поскольку я не получил никакого ответа, я начинаю подозревать, что возможная причинаМоя проблема связана с неправильным использованием вложенного миксина, который без проблем работал в Polymer 2. Ниже приведена более полная отредактированная иллюстрация моих реальных файлов.Надеюсь, я получу помощь соответственно.

файл base-mixin.js 

/*
This annotation aims to get rid of warnings.
https://www.polymer-project.org/3.0/docs/tools/documentation#class-mixins

@polymer
@mixinFunction
@mixinClass
*/
BaseMixin=(BaseClass) => class extends BaseClass{
    static get properties(){
        return {
            p1:"v1"
        };
    }
}

файл child-mixin.js 

import "./base-mixin.js";
/*
@polymer
@mixinFunction
@mixinClass
*/
ChildMixin=(BaseClass) => class extends BaseMixin(BaseClass){
    static get properties(){
        return {
            p2:"v2"
        };
    }
    p2p1(){
        return this.p2+this.p1;
    }
}

file my-app.js 

import {ChildMixin} from './child-mixin.js';
class MyApp extends ChildMixin(PolymerElement){
    connectedCallback(){
        super.connectedCallback();
        console.log(this.p1,this.p2,this.p2p1());
    }
}

EDIT 2

Я удалил исходные отредактированные файлы из этогосообщение во избежание путаницы.Затем я добавляю следующие файлы, чтобы завершить этот проект.

файл index.html 

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <base href="/">
        <title>Polymer 3 - Mixin</title>
        <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
        <script src="./src/my-app.js" type="module"></script>
    </head>
    <body>
        <my-app>Mixin</my-app>
    </body>
</html>

файл Polymer.json - рабочая версия: 

{
    "entrypoint":"index.html"
    ,"shell":"src/my-app.js"
    ,"sources":[
        "favicon.ico"
        ,"src/**/*"
    ]
    ,"extraDependencies":[
        "node_modules/@polymer/**/*"
        ,"node_modules/@webcomponents/webcomponentsjs/**"
    ]
    ,"lint":{
        "rules":["polymer-3"]
    }
    ,"builds":[
        {
            "preset":"es5-bundled"
            ,"addServiceWorker": false
        }
    ]
    ,"moduleResolution":"node"
    ,"npm":true
}

команда полимерная сборка на Polymer.json «рабочая версия» ничего не производит, кроме файла Polymer.json в каталоге сборка .Во время сборки не выводится предупреждение или ошибка.

файл Polymer.json - версия для разработки: 

{
    "entrypoint":"index.html"
    ,"shell":"src/my-app.js"
    ,"sources":[
        "favicon.ico"
        ,"src/**/*"
    ]
    ,"extraDependencies":[
        "node_modules/@polymer/**/*"
        ,"node_modules/@webcomponents/webcomponentsjs/**"
    ]
    ,"lint":{
        "rules":["polymer-3"]
    }
    ,"builds":[
        { 
            "name": "dev",
            "addServiceWorker": false,
            "js": {"minify": false, "compile": false},
            "css": {"minify": false},
            "html": {"minify": false},
            "bundle": false,
            "addPushManifest": false
        }
    ]
    ,"moduleResolution":"node"
    ,"npm":true
}

команда полимерная сборка вкл. Polymer.json «Версия разработки» создает все ожидаемые файлы в каталоге build и следующие предупреждения: 

[cli.command.build]    Clearing build/ directory...
[cli.build.build]    (dev) Building...
Could not resolve module specifier "@polymer/paper-menu-button/paper-menu-button.js" in file "/var/www/test/mixin/node_modules/@polymer/iron-list/demo/grouping.html_script_13.js".
Could not resolve module specifier "google-youtube/google-youtube.js" in file "/var/www/test/mixin/node_modules/@polymer/app-route/demo/youtube-demo/youtube-lite.js".
[BABEL] Note: The code generator has deoptimised the styling of undefined as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of undefined as it exceeds the max of 500KB.

Чтение index.html , созданный с Polymer.json «Версия разработки», консоль браузера показывает эту ошибку: 

Uncaught ReferenceError: ChildMixin is not defined
    at child-mixin.js:27
    at f ((index):10)
    at (index):10
    at h ((index):10)
    at (index):10
    at i ((index):10)
    at i ((index):10)
    at (index):10
    at a ((index):10)
    at c ((index):10)

РЕДАКТИРОВАТЬ 3

На этот вопрос ответили Полимерный проект на GitHub

...