Polymer 1.0 with Meteor - pros and cons

Checkout https://github.com/meteorwebcomponents/compiler . . https://github.com/meteorwebcomponents/demo-flowrouter . An attempt use polymer as the view layer instead of blaze. You can remove blaze which is causing issues.

3 Likes

How stable is the PolymerLayout already?

mwc:layout it is quite stable. mwc:compiler needs a better file watching algorithm. With the current version sometimes you have to delete the vulcanized file public/mwc_compiler.html manually . Other than that it works fine. Here is an app which uses mwc components. https://github.com/HedCET/TorrentAlert . I’m currently working on extensions which can work on top of the output of mwc:compiler. mwc:extensions , mwc:ecmascript (run babel on the scripts inside polymer components) (work is not complete in both packages).

mwc:mixin - use the reactive meteor collections inside polymer elements.

mwc:router - User FlowRouter reactively from polymer components

https://github.com/meteorwebcomponents/layout - polymer layout renderer (similar to Blaze.render)

###Update

mwc:extensions package is ready with one extension mwc:ecmascript which transpiles es6 scripts inside the polymer html files. https://github.com/meteorwebcomponents/extensions . https://github.com/meteorwebcomponents/ecmascript .

Here is a kickstart repo

4 Likes

Thanks for all the love!

mwc:compiler works great! You should probably add a basic example of mwcLayout. It’s really hard to find all the three pieces in the advanced example. I’m still looking for the last missing piece I guess (where do you reference the component to be embedded).

Specifically it’s not clear what are all the steps to get a basic layout/router example working. For example I’m not sure do I need to define mwcRouter behavior to make the basic mwc.Layout.render() work for a polymer component?

mupx fails. Is this because it requires npm, so essentially meteor 1.3?

@AndreasGalster meteor 1.3 have issues with npm binary packages that’s the problem

mwc:mixin is the awesome thing which provide reactive data source inside polymer like blaze helper

Is there a solution or workaround for this?

https://github.com/meteorwebcomponents/kickstart-meteor-polymer.
Here is a basic example with all mwc packages. Check files. client/router.js , client/compiler.mwc.json, .polymer/index.html, .polymer/demo/demo.html

they said meteor-1.3.1 will support npm binary packages

Yes, I was missing the bower dependency on mcw-layout. I didn’t know you had to bower import it. So a documentation or at least checklist 1,2,3 would be good. I’ll create a pull request when I find time. Got it working now, I’m finally rid of jquery & blaze, thank you :smiley: ! Also, 1.3 beta 12 worked for me :slight_smile:

1 Like

Have you tried importing npm packages in polymer components? I’ve added the ecmascript package but when I run an import in my polymer component it says unexpected token import.

Also referencing to scripts outside of the .polymer folder doesn’t seem to be possible. It always reverts to the root folder which is .polymer, so loading npm_modules via script tags doesn’t seem possible.

you can do this inside meteor client folder, polymer root directory anywhere in ur system so meteor can’t refer it if it outside meteor directory

Isn’t that the point of the ecmascript extension? Otherwise, how am I truly going to be able to write reusable components? I won’t be able to just create a component and import it in anywhere I want. I’ll always have to import certain scripts seperately manually instead of them being registered as the component gets attached to the DOM.

mwc:ecmascript transpiles es6 contents inside the imported html files. mdg’s ecmascript transpiles files with extension .js(which leaves scripts inside html files untouched) which are inside visible folders. We are putting polymer elements inside dot folder (.polymer usually) so we needed a transpiler that works specifically on imported files.

Regarding using npm modules inside polymer component check this article https://github.com/npm/npm/wiki/npm-⇔-Polymer-brainstorming-session

It would be great if you could contribute. :slightly_smiling: .

1 Like

I’m not able to understand the issue here. But regarding the reusability you can write scripts wherever you want. Inside the html file/outside the html file and add a script src. And you have bower and github for distributing the component. As of now we are not handling scripts outside the root folder. I dont see the point in supporting scripts outside root folder since they are processed by meteor by default(if not inside a dot folder)

@AndreasGalster i think u want mwc:compiler to support of webcomponents inside npm packages :worried:

Here’s an example:

I’ve loaded lodash.js and cloudinary.js (server side npm module for image uploads with cloudinary) via npm install --save packagename.

Now, lodash is quite simple. I only want to load lodash (or even better, just parts of lodash, either a section or just a specific method) where it is actually needed vs the old meteor way of loading everything at once. Why? We don’t want bloated pages using scripts we’re not actually using (Why would I want to load the cloudinary.js files anywhere except for when the user is logged in and on the page where he/she can upload images)

With npm modules and/or components that is quite simple. If the component gets loaded, the script needed gets loaded. If the component doesn’t get loaded, then the script doesn’t get loaded. Preferably we would do this via imports. Problem is: Neither script tags nor imports work when we reference outside of the .root folder. So what options do we have now. Copy & paste the node_modules folder in the root of the meteor project in the polymer root folder? Also, if I could define npm imports in my component (not sure if this makes sense with server side stuff) such as e. g. cloudinary, then cloudinary will only have to be loaded for the pages that actually require it.

Does that make sense? Or am I misunderstanding how to make meteor, polymer and/or meteor + polymer more modular?

2 Likes

@AndreasGalster Okay now I understand the problem. Checkout version 1.1.49 . You can add node_modules like this in html files <script src="../node_modules/lodash/lodash.js"/> . Thanks for the feature request. :slightly_smiling:

update

kickstart meteor polymer. meteor version 1.3 beta 12 and the latest mwc:compiler .

Loading script from folder outside the .root folder

2 Likes

@AndreasGalster New forum thread for meteor webcomponents discussions. Polymer + Meteor Support With meteor webcomponents packages