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]
Related
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)
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
Can I get some help the proper setup of history library with react-router, the docs somewhere says that I have to use a mixin to use history from reactrouter but somewhere else tells me that I have to import history library to acomplish the task. It's so confusing
You only need to import the history library if you are going to be changing the default settings for react-router and that's only for when you setup your router. Otherwise, you don't need to.
Regardless, to use history.pushState, you do need to use the mixin. If using React Router 1.0.0-rc3, you would do as follows (a simple example but should get the point across):
var React = require('react');
var History = require('react-router').History;
var Link = React.createClass({
mixins: [ History ],
_handleClick: function(){
this.history.pushState(null, "/example-route");
},
render: function() {
return (
<div onClick={this._handleClick}>
Link
</div>
);
},
});
module.exports = Link;
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:
Hi I'm new to Typescript and Javascript and I'm having a few problems creating a googlemap instance.
I've downloaded the google.maps.d.ts declaration file and imported it to my typescript class like so, all the intellisense works fine etc.;
import googleMaps = module("google.maps");
module Mapping {
export class GoogleMap implements IMap {
public name: string;
private map: any;
private options: any;
constructor (mapDiv:Element) {
this.name = "GoogleMap";
this.options = { zoom: 3, MapTypeId: 'terrian' };
this.map = new googleMaps.google.maps.Map(mapDiv, this.options);
}
}
}
When I try to create this class in my index.cshtml file ;
<!DOCTYPE html>
<html>
<head><title>TypeScript Mapping</title></head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? key=MYKEYGOESHERE&sensor=false"></script>
<script type="text/javascript" src="~/scripts/require.js"></script>
<script type="text/javascript" src="~/typings/Mapping.js"></script>
<script type="text/javascript">
function initialize() {
var mapCanvas = document.getElementById("map");
var googleMap = new Mapping.GoogleMap(mapCanvas);
}
</script>
<body onload="initialize()">
<div id="map" style="height: 512px; width: 512px;"></div>
I get the following error ;
Microsoft JScript runtime error: Module name "google.maps" has not been loaded yet for context: _. Use require([])
What am I missing in order to load the googlemaps api?
Thanks in advance.
As you are including Google Maps as a script tag on your page, you probably don't want to use a module-loader to load it in.
So I would replace:
import googleMaps = module("google.maps");
With
/// <reference path="./google.maps.d.ts" />
The reference says to TypeScript "I will make sure this script is available at runtime".
The import statement says "Go and load this script for me at runtime".
I liked to create something called a shim function which let me work with window variables/objects (like google). I created that .ts file:
// -- Shim.ts:
/**
* Loads variable from window according to
* the name parameter.
*
* #export
* #param {string} name
* #returns {*} window[name]
*/
export function shim(name: string): any {
let global: any = window;
return global[name];
}
My basic setup than looks like:
- main.ts
-- shims
-- -- Shim.ts
-- -- Google.ts
-- -- Swiper.ts
-- -- ... .ts
and the Google.ts would than simply use that function like:
// -- Google.ts
import { shim } from '../shims/Shim';
/**
* Loads variable from window with the
* name 'google'
*
* #export
* #returns {*} window['google']
*/
export let google = shim('google');
and whereever you than want to use the google variable simply include it like:
import { google } from '../shims/Google';
Maybe also have a look at the typings - Typings is the simple way to manage and install TypeScript definition - which helped me a lot.
I currently wrote another Typescript Google Maps Setup and thought about sharing it with the community.
You can check it out using this link: https://github.com/DominikAngerer/typescript-google-maps