Custom components proposal

[davepagurek]

You could define a component in a separate file sort of like this:

define person with name, email, photo
  section.person
    h1
      given email
        a(href mailto:#{email}) #{name}
      unless email
        span #{name}
    img(src #{photo})

And then you can use it like this:

each users as user
  person(
    name #{user.name}
    email #{user.email}
    photo #{user.photo_url}
  )

We should probably make a gem or something to handle importing these.

Thoughts on syntax, etc? How do we differentiate between passing regular string attributes versus passing template hashes? (do we even want to support template hash parameters?)

[armcburney]

I like the idea! I think it would be a great feature to add to the language! Do you think we could use the pipe syntax we discussed for the component attributes? Or do you think it's better to use the #{attr} syntax?

each users as user
  person(
    name |user.name|
    email |user.email|
    photo |user.photo_url|
  )

[davepagurek]

Thoughts on having a command like:

require some/component

and then having the cli fetch some/component.emr automatically? We can have it keep a running set of component files it's loaded so we don't get into circular dependencies

[armcburney]

I was thinking about this component business, and I think it would be cool to scope styles and scripts specific to components, kind of like how sass scopes styles, what do you think? I was thinking something like this:

define person with name, email, photo
  style
    h1 {
      color: #333333
      font-size: 32px
    }
    img {
      position: relative
      width: 50%
    }

  section.person
    h1
      given email
        a |name| (
          href mailto:|email|
        ) 
      unless email
        span |name|
    img (
      src |photo|
    )

So in this example, the h1 and img styles would only apply to the person component.

The exact syntax can be decided later, if we decide to go with something like this - but what do you think?