Global functions in Polymer 2.0 - polymer

Question

Is there any way to declare a global function in Polymer 2.0 that can be used in other components? I have a moment.html file for using moment.js in the project:
<script src="../bower_components/moment/moment.js"></script>
In the same file I also declare a function instead of declaring it in every single component where I want to use it:
<script>
function format(date) {
return moment(date).format('dddd, D MMMM YYYY');
}
</script>
The moment object is available after importing the file but when I try to call the format function it gives me the warning method 'format' not defined. How can I make the function publicly available?
Edit: I can call the format function from within the script tags of another component, but I cannot access it from within a template, i.e. with:
<strong>[[format(event.date)]]</strong>
I want to render the result from the function on the page, not access it programmatically.

Answer 1

I think, for your task, the best documentation is Monica Dinculescu's own cheat sheet.
https://meowni.ca/posts/polymer-2-cheatsheet/#defining-a-mixin
She's a Polymer developer. Below is me copy pasting from the link. It's the extends MyMixin(Polymer.Element) that does the magic.
Defining a class expression mixin to share implementation between different elements:
<script>
MyMixin = function(superClass) {
return class extends superClass {
// Code that you want common to elements.
// If you're going to override a lifecycle method, remember that a) you
// might need to call super but b) it might not exist
connectedCallback() {
if (super.connectedCallback) {
super.connectedCallback();
}
/* ... */
}
}
}
</script>
Using the mixin in an element definition:
<dom-module id="element-name">
<template><!-- ... --></template>
<script>
// This could also be a sequence:
//class MyElement extends AnotherMixin(MyMixin(Polymer.Element)) { … }
class MyElement extends MyMixin(Polymer.Element) {
static get is() { return 'element-name' }
/* ... */
}
customElements.define(MyElement.is, MyElement);
</script>
</dom-module>

Answer 2

Here is the sample how I work it ;
<paper-button on-tap="customfunc"> Test </paper-button>
<div><strong>[[format(date)]]</strong></div> // result at screen: Saturday, 20 January 2018
...
<script>
class MyTest extends Polymer.Element {
static get is() { return 'test-component'; }
ready(){
super.ready();
this.set('date', new Date())
}
customfunc() {
var d = new Date();
var dd = this.format(d);
console.log("d ", d, " - dd = ", dd);// d Sat Jan 20 2018 17:02:38 GMT+0300 (Türkiye Standart Saati) - dd = Saturday, 20 January 2018
}
format(date){
return moment(date).format('dddd, D MMMM YYYY');
}

Answer 3

As Your format_function is in shadow root, you have to use .shadowRoot.querySelector
below is my working code, in this i have format_funtion in page1 and am calling it in page2
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">
<!-- my-app element -->
<dom-module id="my-app">
<template>
<my-page1></my-page1>
<my-page2></my-page2>
</template>
<script>
class MyApp extends Polymer.Element {
static get is() {
return 'my-app'
}
constructor() {
super();
}
}
window.customElements.define(MyApp.is, MyApp);
</script>
</dom-module>
<!-- page1 element -->
<dom-module id="my-page1">
<script>
class MyPage1 extends Polymer.Element {
static get is() {
return 'my-page1';
}
constructor() {
super();
}
format_function() {
alert("in format function");
}
}
window.customElements.define(MyPage1.is, MyPage1);
</script>
</dom-module>
<!-- page2 element -->
<dom-module id="my-page2">
<template> <div on-click="test">click to test format_funtion.....!</div></template>
<script>
class MyPage2 extends Polymer.Element {
static get is() {return 'my-page2';}
test() {
var host = document.querySelector('my-app').shadowRoot.querySelector('my-page1');
host. format_function();
}
}
window.customElements.define(MyPage2.is, MyPage2);
</script>
</dom-module>
<!-- calling element -->
<my-app></my-app>
Don't forget to import files e.g page.html or page2.html