gadicc / meteor-blaze-react-component

<Blaze template="itemsList" items={items} />
https://atmospherejs.com/gadicc/blaze-react-component
MIT License
61 stars 12 forks source link

What about children? #2

Open serkandurusoy opened 8 years ago

serkandurusoy commented 8 years ago

Do you think we can use this to pass in children? (if it is at all a good idea anyway)

There are a lot of atmosphere packages out there that work like custom block helpers to provide some form of functionality to the enclosed template/html.

One incredibly useful implementation would be autoform where we could map this:

{{#autoForm collection="myCollection" id="myForm" type="insert"}}
  {{>afQuickField name="myFirstField"}}
  {{>afQuickField name="mySecondField"}}
  <button type="submit" {{submitButtonAtts}}>Save</button>
{{/autoForm}}

to something similar to this:

const myForm = () => (
  <div>
    <Blaze template="autoForm" collection="myCollection" id="myForm" type="insert" >
      <Blaze template="afQuickField" name="myFirstField"/>
      <Blaze template="afQuickField" name="mySecondField"/>
      <button type="submit" {...submitButtonAtts}>Save</button>
    </Blaze>
  </div>
);

PS: I know this specific example will probably not work out of box due to many intricacies with autoform and how it taps into blaze lifecycle, but it could still open up a door for improvement.

gadicc commented 8 years ago

hey @serkandurusoy :)

I think it's best to keep this package super simple and leave the fancy stuff for Blaze, e.g.

<template name="myForm">
  <div>
    {{#autoForm collection="myCollection" id="myForm" type="insert"}}
      {{>afQuickField name="myFirstField"}}
      {{>afQuickField name="mySecondField"}}
      <button type="submit" {{submitButtonAtts}}>Save</button>
    {{/autoForm}}
  </div>
</template>

and then

const MyComponent = () => (
  <Blaze template="myForm" />
);

We could still use the same pattern to extend reusable Blaze templates, e.g.

<template name="reusableForm">
  {{#autoForm this}} ... {{/autoForm}}
</template>

and

const MyForm = () => (
  <Blaze template="reusable" collection=myCollection" id="myForm" type="insert" />
);

if I'm not mistaken that should pass through all the props, but I didn't actually try. If that works and is helpful, I can add it to the docs (the important thing is just passing the data context through with this... that might even be implied and unnecessary though).

What do you think? Either way I'm happy to leave the issue open to hear other opinions.

serkandurusoy commented 8 years ago

I think the problem is the ... in between the opening/closing autoform tags which makes it much less reusable.

The main point is, just like react passes down props and children, this package could benefit from the same pattern by passing in children just like it passes props.

Autoform may be a bad example here, but having children passed down would open up a host of blaze=>react reusability scenarios.

I agree that this should not be a complicated package, but children is what you'd naturally expect from any react comonent so why not provide it with the blaze component?