My problem is that observable and published variables from polymer-elements are not working. More precisely, they are not working if I imported the elements from a package. They are displayed correctly, but they do not react if their value changed.
If i load the same element directly from the main project everything works fine!
I published the complete project on github.com and added a README --> here
So this is what i have done:
I created a package which contains a polymer-element.
The package is called foo_package and my polymer-element uses foo.html and foo.dart.
It is named poly-foo.
foo_package structure
Now I create a new project and prepare everything for using polymer-elements.
In yaml i add a dependency to my package
pubspec.yaml
[...]
dependencies:
foo_package:
path: D:\User\UserName\dart\foo_package
[...]
Now I import foo.html in my html file
<link rel="import" href="packages/foo_package/foo.html">
and implement my custom tag
<poly-foo></poly-foo>
Finally I run my main file and everything looks alright. My element gets displayed the way i want it.
But observables and published variables are not working.
What am I doing wrong?
foo.html
<link rel="import" href="../../packages/polymer/polymer.html">
<polymer-element name="poly-foo">
<template>
Counter:{{counter}}
<button on-click="{{increment}}">Up!</button>
<script type="application/dart" src="foo.dart"></script>
</template>
</polymer-element>
foo.dart
import 'dart:html';
import 'package:polymer/polymer.dart';
#CustomTag('poly-foo')
class PolyFoo extends PolymerElement {
#observable int counter = 0;
PolyFoo.created() : super.created();
void increment(Event e, var detail, Node target) {
counter = counter + 1;
}
}
You need a Polymer transformer configuration in you library package (doesn't need any entry points though)
transformers:
- polymer:
entry_points:
Related
this might be a pretty common question but what I found on google does not help me.
I have a emberJs Project with all assets(images, etc) in
my-ember-project/public/assets/images/
everything works fine when i load the assets from homepage which is the root URL "/" or localhost:4200
for example in my homepage
I have a component with img tag which looks like this
<img src="assets/images/articles/article-1.jpg"/>
on another page with url localhost:4200**/articles/** I also load the same image with the same tag
but from what I've seen it tried to load the image from localhost:4200/articles/assets/images/articles/article-1.jpg and not from the correct path localhost:4200/assets/images/articles/article-1.jpg
adding "/" before "assets/images/" works for me if I'm trying to host my project on root folder
but when I need to host my project on subdirectory so my url (www.mydomain.com/ember-project-here/)
how do I load my assets from absolute path or relative to my settings of rootURL
adding {{rootURL}} seems to do nothing to me
It seems, {{rootURL}} does not work in hbs files (long time ago I used to think it does).
{{env 'rootURL'}} should work, where env is a helper defined like this:
import { get } from '#ember/object';
import { helper } from '#ember/component/helper';
import ENV from 'project-name/config/environment';
export default helper(function([path]) {
return get(ENV, path);
});
you can add a path helper:
import { helper } from '#ember/component/helper';
import ENV from 'project-name/config/environment';
export default helper(function([path]) {
return path.replace(/^~\//, ENV.rootURL);
});
The you can do:
<img src={{path "~/assets/images/articles/article-1.jpg"}} />
This is nice because you can also use variables:
<img src={{path this.myPath}} />
and myPath:
get myPath() {
return `~/assets/images/${this.args.iconName}.jpg`;
}
You've done a good research on this front. Yes, rootURL is the one you want to add to your project since you are deploying your application to a subfolder.
rootURL can be added to any Ember app using the config/environment.js file.
// config/environment.js
module.exports = function(environment) {
var ENV = {
// other configs...
rootURL: '/ember-project-here/',
};
}
The official guide can give you some additional info!
I try to build a simple CRUD frontend with no frameworks! I try to integrate a TypeScript file (intex.ts) into my index.html but it keeps beeing not found so that the called functions are undefined. I'm aware that browsers can't handle typescript but need javascript. I build my app before testing and all ts files get compiled. I tried integrating the compiled js file but it's not found either. All my frontend code is in directory src/public.
How do I connect my public/index.html with my public/index.ts so that the fundtions work?
relevant index.html code
<head>
<script type="text/typescript" src="index.ts"></script>
</head>
<body>
<button onclick="clickButton()">Click</button>
</body>
all index.ts code
function clickButton() {
document.getElementById("cases").innerText = "Hello Cases"
}
error i'm getting when clicking the button
index.html:18 Uncaught ReferenceError: clickButton is not defined
at HTMLButtonElement.onclick (index.html:18)
I use express in the backend and use express.static:
app.use(express.static("src/public"));
It seems to be an error caused because the function is defined outside of the global scope.
You can try to assign the function to the global window object just below of the function declaration:
function clickButton(){
...
}
window.clickButton = clickButton; // Now the function can be accessed from global scope
Also u can try to add the eventlistener on your JS file instead of using the html attribute onclick:
function clickButton(){
...
}
document.querySelector('.button-smth').addEventListener('click', clickButton);
This way you don't need to assign the function to the global scope at all, but you will need to add the class '.button-smth' (or whatever) to the html button element.
Hope this helps!
Your ts need to be compiled to js first. Then, you could possibly use it as follows -
function clickButton() {
document.getElementById("cases").innerText = "Hello Cases"
}
<head>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<button onclick="clickButton()">Click</button>
<div id="cases"></div>
</body>
Note: This is just a possible solution
What kind of magic is polymer-serve doing that I don't get with a simple, static web server?
I just started with a simple "hello world" project. When I run polymer serve I'm able to browse to the page at http://localhost:8000/example.html and it works great. If I use static-server and browse to the same page, I get an error message in Chrome.
Uncaught TypeError: Failed to resolve module specifier "#polymer/lit-element". Relative references must start with either "/", "./", or "../".
Here's example.html, which was copied right out of the README.
<script src="node_modules/#webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module">
import { LitElement, html } from "#polymer/lit-element";
class MyElement extends LitElement {
static get properties() {
return {
mood: { type: String }
};
}
constructor() {
super();
this.mood = "happy";
}
render() {
return html`
<style>
.mood {
color: green;
}
</style>
Web Components are <span class="mood">${this.mood}</span>!
`;
}
}
customElements.define("my-element", MyElement);
</script>
<my-element mood="happy"></my-element>
Modules are imported by name instead of by path
check for instance this reference
From it
This change brings Polymer in line with standard npm practice, and
makes it easier to integrate Polymer with other tools and projects.
However, because browsers don't yet support importing modules by name,
it means you'll need a transform step to run Polymer modules natively
in the browser. The Polymer CLI and related tools are being updated to
do this transformation automatically.
running polymer build should create converted files (referenced by path)
Currently I migrate a Polymer 2.0 app to Polymer 3.0. But at the moment understandably a lot of components are still not migrated, yet (like e.g vaadin-gid as one example).
How can I use these Polymer 2 components in my migrated Polymer 3 app?
basicly add this code in <head> and delete /bower_components/polymer folder
<script type="module">
import {PolymerElement} from '#polymer/polymer/polymer-element.js';
window.Polymer = {
Element: PolymerElement
};
window.loadElement = function(filename) {
var l = document.createElement('link');
l.rel = 'import';
l.href = filename
var h = document.getElementsByTagName('head')[0];
h.parentNode.insertBefore(l, h);
}
// Load de main element
loadElement('/main-poly2.html');
</script>
load polymer 3 elements in polymer 2
<script type="module">
import './poly3-element'
class MainPoly2 extends Polymer.Element {
...
}
</script>
load polymer 2 elements in polymer 3
import {PolymerElement, html} from '/node_modules/#polymer/polymer/polymer-element.js';
loadElement('/poly2-element.html');
class Poly3Element extends PolymerElement {
....
}
I write a example in:
https://github.com/herberthobregon/polymer2-3
It works but the polymer team has not answered me if the implementation is correct, but works
my solutions was upgrade the polymer 2.0 elements to polymer 3.0, using polymer-modulizer
[https://polymer-library.polymer-project.org/3.0/docs/upgrade][1]
I have been using Traceur to develop some projects in ES6. In my HTML page, I include local Traceur sources:
<script src="traceur.js"></script>
<script src="bootstrap.js"></script>
and if I have a module in the HTML afterwards like:
<script type="module" src="foo.js"></script>
Then Traceur loads in that module, compiles it and everything works great.
I now want to programmatically add an ES6 module to the page from within another ES6 module (reasons are somewhat complicated). Here was my first attempt:
var module = document.createElement('script');
module.setAttribute('type', 'module');
module.textContent = `
console.log('Inside the module now!');
`;
document.body.appendChild(module);
Unfortunately this doesn't work as Traceur does not monitor the page for every script tag added, I guess.
How can I get Traceur to compile and execute the script? I guess I need to invoke something on either 'traceur' or '$traceurRuntime' but I haven't found a good online source of documentation for that.
You can load other modules using ES6 import statements or TraceurLoader API for dynamic dependencies.
Example from Traceur Documentation
function getLoader() {
var LoaderHooks = traceur.runtime.LoaderHooks;
var loaderHooks = new LoaderHooks(new traceur.util.ErrorReporter(), './');
return new traceur.runtime.TraceurLoader(loaderHooks);
}
getLoader().import('../src/traceur.js',
function(mod) {
console.log('DONE');
},
function(error) {
console.error(error);
}
);
Also, System.js loader seems to be supported as well
window.System = new traceur.runtime.BrowserTraceurLoader();
System.import('./Greeter.js');
Dynamic module loading is a (not-yet-standardized) feature of System:
System.import('./repl-module.js').catch(function(ex) {
console.error('Internal Error ', ex.stack || ex);
});
To make this work you need to npm test then include BrowserSystem
<script src="../bin/BrowserSystem.js"></script>
You might also like to look into https://github.com/systemjs/systemjs as it has great support for browser loading.
BTW the System object may eventually be standardize (perhaps under a different name) in the WHATWG: http://whatwg.github.io/loader/#system-loader-instance