I'm getting my feet wet with Polymer. I am wanting to create a stand-alone app that can be injected into multiple implementations. Like this:
Inside my-app element, I may also have many sub-elements. It's my understanding that every element needs to import polymer.html. Should all of the sub-elements rely upon the parent (root) element to import polymer.html?
Thanks for your help.
Write all imports out for every element, so they are standalone. During vulcanize, unnecessary imports are ignored. So it does not matter how many polymer imports you have.
You don't need to import polymer.html inside your elements. Just add it to the host page.
Inside your "main" element you can import all your sub elements or have all the imports inside one "elements.html" like the starter kit does.
Related
Is there a way I can make Polymer WebComponents and LitElements coexist?
It should be doable in theory, but afaik you cannot import html in LitElements, so it is actually infeasible.
This issue try to address the problem https://github.com/Polymer/lit-element/issues/48
Is there a way to use importHref in LitElement?
You cannot import HTML into anything but another Polymer 2/HTML element. If you are dealing with Polymer 2 elements from Google--paper-input, iron-dropdown, etc.--use npm to install their Polymer 3.0 version. If your HTML elements are from another source, you will have to rewrite them. I was able to use polymer-modulizer to convert some simple elements to JavaScript, but it was not up to a more complex element (15 components and 5 mix-ins). (Even those that did convert I ended up rewriting to LitElement.)
I have the following scenario. I am writing a complex component that is using three-js:
The component manages complex mouse interactions and updates other elements in the DOM using two-ways data binding: variables, JSON objects, mouse interactions, etc.
I start using the component in few part of my application but I needed to substantially modified the threed-viewer.html so I made a copy of the whole component ending up having duplicates that are hard to maintain.
All flavours of the component share 80% of the javascript code and bindings but they have substantial UI differences. So I had the though of create different 3 basic component (minimal javascript code) that I can inject into the threed-viewer.html using a selector and a variable to decide which template to load:
this does not compile as the html files have all the variables and bindings from the original components but they are not present in the typescript files.
Another solution could be to have a single html managed via ngIf but it will result in a long, messy, difficult to manage file. Is this the only option I have in Angular. Any other idea?
Thank you.
You can have a shared service and then add three different components but js code won't be duplicated as it will be in the service.
Use two way bindings in all 3 components using the service variables, functions and objects
I have did long time ago - the pages and article editor. Two different templates, same code.
I used articles component as "parent", and extended it to news editor.
Looks like this:
#Component({template: 'blah blah blah'}) export class parent {}
#Component({template: 'blah2 blah2 blah2'}) export class child extends parent {}
Hopefully this is the solution you were looking for.
Two different components, two templates, one code.
Of course, you can have the "parent" abstract class for both where you can save all methods you need.
It's OOP baby ;)
In my react projects I have been using ES6 modules for some time. In my react component I would use import:
import {f1,f2} from "./myLib";
In my polymer component I use a script tag:
<script src="./myLib.js"></script>
If I'm not mistaken, these are doing two totally different things. The script tag is polluting my global namespace for the whole app. The import isn't.
Question #1: Am I correct in my understanding of this?
Question #2: Is there a way to get something similar in polymer?
I have dozens of different polymer components. Some import conflicting libraries. Then, if I have a page that uses multiple components it seems like a crap shoot as to which version of the JS script I will get.
It is certainly possible to use ES6 modules with Polymer. First thing you will have to do is split the template and script. You can then go both ways
Add a script tag containing transpiled ES6 code to the element's html:
<dom-module id="my-elem"></dom-module>
<script src="my-elem.js"></script>
Use some kind of plugin to import HTML from ES6 code. This is, for example, possible with this plugin for SystemJS
import './my-elem.html!';
class MyElem extends HTMLElement {}
document.registerElement('my-elem', MyElem);
Then the difficult part is then transpiling. I'm not sure about other module loaders, but with JSPM+SystemJS it is easy to bundle as an Universal module. This way your element will be usable both by <link rel="import" href="bower_components/my-elem/my-elem.html"> and for importing from other ES6 code. In the former case any dependencies not bundled will have to live in the global scope. You could, however, place any such dependencies in your main html file. Just like many other elements are published.
If you're willing to give JSPM+SystemJS a try, please have a look at a blog post on my blog. I'm using TypeScript but for ES6 the general solution should be roughly the same.
I'm getting into Polymer and i like the deps resolution approach using imports.
And i like the extending capability through the behaviors config.
However, there's something that doesn't feel comfortable to me, about behaviors in particular.
Looking at the PolymerElements code i see that behaviors, are defined inside their own html in the global object Polymer and then referenced directly when imported by another component..
For example:
paper-button imports paper-button-behavior
https://github.com/PolymerElements/paper-button/blob/master/paper-button.html#L14
it then defines paper-button-behavior as behavior referencing from global Polymer.PaperButtonBehavior
https://github.com/PolymerElements/paper-button/blob/master/paper-button.html#L144
wich is defined here (the imported html)
https://github.com/PolymerElements/paper-behaviors/blob/master/paper-button-behavior.html#L49
Ain't it an anti-pattern, especially as typically an app will not use Polymer's world exclusively?
I am trying to just include a .as file in my flash application. I'm sure it's not that difficult and I'm just getting something slightly wrong, but at the top of my code I always put:
include {"Le Bot src/Skill.as";}
OR
import {"Le Bot src/Skill.as";}
to try and include a separate .as file. But, when I use include it comes up with the error:
expecting stringliteral before left brace
and when I use 'import' it comes up with the errors:
expecting identifier before left brace
expecting semicolon before left brace
I am just a beginner to AS3, is there any way to fix this problem?
Btw, if I remove the two braces on either side, then it comes up with another error
import locationOfASFile.Skill;
e.g. if your Skill.as file was located inside a directory named 'LeBotsrc' which was inside a directory named 'com'
import com.LeBotsrc.Skill;
Also your as package needs to reflect it's location. So inside Skill.as you would have
package com.LeBotsrc {
The include directive is not much used in AS3, since organizing code using packages and classes is easy. However, inlcude has a weird thing. No ending semicolon.
Try this:
include "Le Bot src/Skill.as"
So to sum it up:
include is not the same as import.
include does not use curly braces.
include MUST NOT have a semicolon at the end of the line.
inlcude must be on one line in the format of:
include "pathto/myfile.as"
Using include will add the actionscript in the specified file to the timeline where the include is used.
You could also accomplish the same thing by setting a document class that extends the main timeline or a symbol in the library. Doing so adds the complexity of needing to work with classes, but classes pack more than enough power and flexibility to make up for their additional complexity.
For example, using an include, you cannot specify a function or variable to be public or private. They are all public. Using classes makes it easier to make your code Object Oriented, which is a great way to make your projects more programmer friendly.
That Le Bot src\Skills.as should first be accessible by a correct relative path (package\name\class.as) from your project folder, then you do import package.name.class, placing your values instead of placeholders here. Say, you look into that Skill.as and find out:
package foo.bar {
import baz.*
...
public class Skill {
This means the AS file should be located at foo\bar\Skill.as where foo folder should be in the folder where is your FLA. In case of FlashDevelop, it should be inside src foder from *.as3proj file. Place it there, and add:
import foo.bar.Skill;
to whatever file or timeline you want to refer this class from.