Single file components for Blaze

[rusinozemtsev]

Hey Guys,

just finished small experiment, probably someone will find this useful

https://www.npmjs.com/package/meteor-sfc

Later i will implement this as meteor compiler plugin

[msavin]

looks cool man, I think a lot of people, my self included, want something like this

one criticism, if you don’t mind… the idea of using <style> and <script> makes me feel a bit funny because those tags have a specific way of behaving with-in html pages, and a different behaving here.

what if instead you did something like this:

<file format="js">
  Template.test.helpers({
    name () {
      return 'Neo'
    }
  })
</file>
 
<file format="less">
  h1 {
    color: red;
  }
</file>

[manuel]

I wanted single file components for ViewModel and so I tried a lot of ideas (including <style>, <script>, etc.) In the end I went with JSX to reduce the clutter:

Test({
  name() {
    return 'Neo';
  },
  render() {
    <h1 style="color: red">{this.name()}</h1>
  }
})

I tried to make the Blaze version work in a similar way but I never got anywhere near as clean as the React version is.

[rusinozemtsev]

Thank you for your feedback.

There are 2 reasons for me to use a combination of template, script, style tags

1. this is based on https://vuejs.org/v2/guide/single-file-components.html and they are using script and style tags as well

2. using script and style tags gives you syntax highlight of the box in most IDE

But beside this reasons my concern is that idea using script and style tags inside HTML when you working with meteor is worst

[rusinozemtsev]

Agreed. But i’m tried to make something that will be pretty native for blaze developers. Just wanted to give my team ability to write small single files components in a way blaze naturally works.

From my prospective if you really like JSX clearness then just go react way )

Later i will share one meteor package that allow easily manage blaze components state, incoming data and fire events on template this package plays well with SFC lib and gives you clean, easy to read single file components

[arggh]

Thumbs up. Would be really nice, if this was more flexible regarding CSS tooling. For example, I’ve found @nathantreid’s CSS-Modules to be an excellent companion for components.

I guess this would work, if I configured CSS-Modules to parse less-files? Anyway, would be nice to have an option to configure the file extension.

[herteby]

I heard the project to adopt Vue as the base for Blaze 2.0 is almost done. Once that’s done, maybe it’d be best to tap into Vue’s single file component system? In Vue you can easily use LESS/SASS/Stylus for CSS, and Jade/Pug for HTML.

[arggh]

I heard the project to adopt Vue as the base for Blaze 2.0 is almost done.

Where does that work take place? I’ve been following this repo: https://github.com/meteor/blaze, and thought the whole idea of Blaze 2.0 was pretty much abandoned.

[herteby]

@gusto said it, here:

Virtual DOM for Blasejs?

The work on the Blaze end is done. What’s more, even the work on Vue end is more or less ready as a pull request. What’s missing is an OK from core Vue team to implement this PR as it requires some changes in how Vue is being developed. Once this is done though, Blaze would be working with Vue under the hood, getting access to most of Vue fancy features. I still prever pure Vue though, and if Blaze at all, then only with manuel:viewmodel package.

[gusto]

You can start by reading this thread, as this is the missing part that has to be done and it’s on Vue’s end. It’s possible though that we can wait as long as for the changes on RethinkDB that would allow full compability for Meteor, which were once again pushed from RethinkDB 2.4 to 2.5.

I’m using Vue without Blaze though, so I don’t follow the work on Blaze.

Necessary changes to observer for full Tracker compatibility

[aparus]

I can’t apply this. What about imports? What about several templates in one html files? Should I do “split” ui file always by hands? How to automate this work ? Can you write simple step by step instruction ?