Polymer + Meteor Support With meteor webcomponents packages

#Announcing Synthesis.

###Synthesis enables you to use polymer as the default view layer.

mwc:synthesis. Use synthesis as the default compiler

File Structure.

DEMO . Here is a kickstart repo for meteor+polymer projects

###Other mwc packages

MWC Mixin - Reactive data source for polymer in meteor.

MWC Router - Reactive routing for polymer/webcomponents in meteor using flow router

MWC Layout - polymer layout renderer . Add using bower.

Please contribute.

7 Likes

I just want to say this is the coolest name for a package ever.

2 Likes

@sashko Thanks dude. :wink:

:thumbsup: :thumbsup:

1 Like

Looking great! Seems like this structure is closer ot the 1.3/React structure, which I’m sure a lot of people are going to like! Excited for the remote script support :slight_smile:

3 Likes

Synthesis 1.0.9 released with a lot of cool features and bug fixes. https://github.com/meteorwebcomponents/synthesis

1 Like

mwc layout 1.1.8 released with synthesis support. You can control rendering of polymer elements using mwc layout. meteor + polymer demo https://github.com/aruntk/kickstart-meteor-polymer.

1 Like

mwc:layout 1.1.11 mwc:synthesis 1.0.16 released.

Synthesis 1.0.18 Released with some major changes and features.

####New Directory structure with bower components inside imports directory.

synth

Is Bower still the recommended place to publish Polymer components? That doesn’t seem like a good way forward, IMO.

1 Like

Is it possible to use polymer (shady-dom) on top of Blaze with Synthesis ? Documentation does not say anything.

Unfortunately yes it is. They have plans to move to npm this year. There were some issues with dependency management afaik that didn’t make npm as a valid option. No idea when they’ll move to npm but it’s on the roadmap for this year. Haven’t heard/seen anything yet though.

2 Likes

@sashko As @AndreasGalster pointed out the preferred place is still bower. Here is what they have done so far in npm https://www.npmjs.com/~polymer. Is there a way to import static html from node_modules in meteor right now? . I saw 2-3 issues related to this topic in meteor github. None closed. I wanted to move synthesis away from bower. The main issue now is if a component I’m adding contains 100+ js files or it has a dependency that has 100+ js files (eg paper-date-picker has moment as dep.) ecmascript package freezes the app. For compiler plugins Instead of going through each and every file in imports directory it’d have been better to just go through files that are explicitly imported.

Synthesis doesnt have direct conflicts with blaze. But there is conflict with templating package, which means you cannot use blaze-html-templates and synthesis together. Blaze without templating is handicapped. To handle rendering(similar to Blaze.render) we have mwc:layout. If using blaze is necessary for you there is a package synthesis-blaze which you can use along with templating package. Its not up to date though. It processes polymer files with extension sy.html only. Thats means you cannot use other components using bower inside imports. You’ll have to keep these files in public directory and import them individually or use differential:vulcanize package

@sashko https://github.com/meteor/meteor/issues/6859 This issue is making bower components unusable inside imports folder. I think compiler plugins should go through the files which are imported.

Latest from meteorwebcomponents(mwc) team.


meteor polymer kickstarter app with basic auth.

Synthesis - v1.0.22 and mwc:layout - v1.1.15 released with bug fixes.

Nice, congrats! It would probably be good idea to say where the auth is happening (it’s happening in the accounts element). Btw, you should probably give a recommendation on whether or not to split components in js & html elements. I do so right now to use the ecmascript package from meteor and I don’t want to miss it anymore, especially because it makes it easier to import dependencies via import syntax.

Are you planning to release elements that are meteor specific eventually to the mwc repo? Because I’m working on similar things, I actually also created a login element for meteor but there’s a lot more stuff we’re working on.

@sashko regarding the github issue mentioned before: yea build times are painstakingly slow imo. afaik importing html from the node_modules folder is not possible, right? Seems like the next item on the Polymer agenda is the move to NPM, so it would be nice if we could iron out the last few remaining issues with Polymer so we can add another view layer to the supported view layers in the near future :wink:

@AndreasGalster You dont have to split into js and html for ecmascript support. The scripts inside html are added to app.js. So you’ll get the support of ecmascript anywhere inside polymer elements.

Release the stuff you guys are working on ,login also. No issues there. :slight_smile:

Though afaik import does add everything to app.js, right? So anything that doesn’t get loaded via require dynamically as needed (more recently this is relevant: https://www.polymer-project.org/1.0/toolbox/server#prpl-pattern ) will be loaded on the first page load, correct? Personally I like the split pattern better though I guess it’s preference. I hear that the Polymer team is investigating other dependency managements aside from html imports which seem to become deprecated in favor of modules.

@AndreasGalster Ya. I saw the way they split the polymer library into sub modules.

They have not updated the @polymer test packages in npm since the initial release. But they have added a package.json in the 1.4.0 release. So I think they are going to publish a beta version in the near future.

Synthesis splits html into js and html then wraps the html in a render function which gets run during startup. It processes the links added inside the html files and imports those files also. It fetches the local stylesheets and replaces the link tag with style tag with the style inside. So its the same result either you split the js files or add everything together in an html file.
Regarding the js-html-css splitting I personally like that because of file-type issues in my vim which results in bugs in syntax coloring and auto alignment.