<r-content/> not working

[mekto]

When inserting <r-content/> tag inside component it raises "Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'."

Looking at the source code I found that the test in browser-nested.js testing this tag is commented out. Is this deprecated or so?

[leeluolee]

There maybe a unmerged feature branch... or I just forgot to implement it, it is just all my fault.
The previous way to use r-content have some hidden danger, for example.

in nested component

{#list list as item}
<r-content>
{/list}

only the last iteration will output the transclued-content, beacuse in previous version. transclude-content are some pre-compiled elements whose context is point to outer component.

in version 0.3.0. transclude-content is a AST. (also store it as component.$body in nested component).

The biggest changelog about transclude in new 0.3.0 is transclude-content can be used with include. but the content's content is pointing to nested component.

http://regularjs.github.io/reference/?syntax-en#template-syntax-include-transclude-with-include

But <r-content> will be also retained which helping to adjust the context to outer component.

I will

Feel free to leave your suggestions before fix it in 0.3.1.

[mekto]

Thank you for explaining this.

Last days I have played with React.js and I tried to build a quite complex views. What I really like about React is that it allows to create reuseble components quite easily. It doesn't just render nested components as they were given, but allows to filter them, mutate their's props or just replace them with diffrent components. So instead working with divs you can create views using components, like this:

<Row>
  <Column span=4>
    <Panel heading="Stats">
      <PieChart dataset={order.dataset}/>
    </Panel>
  </Column>

  <Column span=8>
    <Dropdown on-select={this.updateStatus($event)}>
      <Button>Current status: {order.status}</Button>
      <Menu>
        <MenuItem value="pending">Pending</MenuItem>
        <MenuItem value="completed">Completed</MenuItem>
      </Menu>
    </Dropdown>

    <Tabs refs="tabs">
       <TabPane title="Summary" selected>
          Summary of order {order.id}

          <Button on-click={this.$refs.tabs.openTab(this.$refs.paymentsTab)}>
             Go to Payments Tab
          </Button>
       </TabPane>
       <TabPane title="Payments ({order.payments.length})" refs="paymentsTab">
         Payments
       </TabPane>
    </Tabs>
  </Column>
</Row>

I many cases it is just easier to use simple div with classes, but in different cases it would be better to wrap it as component. Contents of all components mentioned above should point to context of outer components. I should be able to define data.order only in the top level component and the nested ones should just use it. In the given example <r-content> is more useful then {#include this.$body}. In fact, I'm not sure in which cases could I use {#include this.$body}.

Maybe we could have command similar to include, but with context pointing to outer component, e.g:

<Panel heading="Emails <small>({user.emails.length})</small>">
  {#list user.emails as email}...{/list}
</Panel>

and the component template would be:

<div class="panel">
  {#if heading}
    <header>{#outer_include heading}</header>
  {/if}
  <div class="panel-body">
    {#outer_include this.$body}
  </div>
</div>

I don't know Regular internals and don't know if it is possible with current implementation, but something like this would be great :)

Where Regular.js shines is that it allows to create beatiful api of components.
In React you would write this.handleClick or this.handleChange.bind(this, index) which is a nightmare.
In Regular you write what you really want. Same examples of components and their's methods I can think of:

this.$refs.tabs.selectTab(1);
this.$refs.dropdown.toggle();
this.$refs.modal.open();
this.$refs.carousel.next();
this.$refs.popover.open($event.origin); // used event origin to center popover
                                        // above element which triggered the event

As a proof of concept I've created simple Tabs component. In Regular it is even easier to write it than in jQuery and it is much more controlable. It uses {#include this.$body} so it doesn't have access to outer scope, unfortunately.
Tabs: http://plnkr.co/edit/scejXd?p=preview

[leeluolee]

Thank you very much for such a detailed suggestion.
React is a creative invention, its meanings is just like angularjs's dirty-check. But I always think it isn't the best way to construct real complex application.
In fact, the first exprimental version of regularjs follow the react way but replace the jsx with self-define DSL(like rgl template). The biggest issue is not the diff Algorithm but keeping virtual-dom synchronously with real dom element. so you can find so many react-id things in the element.

But

Make every render like 'Full-refresh' is also very very attractive feature

Although it is very costly，if you compare similar framework's size(minified), you will find:

1. react (without jsx): > 200kb
2. regularjs: >= 50kb
3. ractive: > 200kb

I will do my best to keep regularjs's size small than 50kb to make it more like a 'Library' but not a 'Framework'.

React's powerful which you mentioned above is beacuse: every compoment (like <Column>) is just a Function call, you can do some logic in this function . But in regularjs, nested component is a full-functional Component created by Component.extend. I will take it into regularjs's todolist to make regularjs more useful with transclude-content in future version

Things like <r-content> will be back , i have resolved the problem I mentioned in first comment

{#list list as item}
<r-content>
{/list}

[leeluolee]

How awesome the example is !, I have take through the Tab demo on the plnkr. I think I have catch something that you want to say. maybe regularjs should used in that way.

[leeluolee]

I created a temporary branch called issue26 to handle the transclude content. In your first examle, you use $parent to reference the parent component. but it only works when you use {#include $body}, and once you switch to <r-content>. you will find the $parent changed to the app component. beacuse $parent is only used to point the outer component (who compile the target nested component ) but not used to pointing the directly parent.... So, problem now switched to:

how to get the reference of the TabPane created in Tabs?

I fork the demo here: http://plnkr.co/edit/yzmkZhHZGiCwV3yBwcwb?p=preview

Every things works, but it isn't perfect way to implement this case. I just use the Component Lifecycle to handle the reference beacuse I'm very familiar with the internal mechanism in this Demo.

App config -> App compile
                          -> Tabs config -> Tabs  compile (which will intialize the TabPane)
                                   ->  TabPane config -> TabPane compile -> TabPane init
                         -> Tabs init
App init;

You know the $parent, I guess you may read some source code of Regularjs. In fact, the Internal Mechanism in regularjs is very Consistent， but after some hotfix and feature introducing, the code becomes a little difficult to understand.

some works also need to implement to make the transclude content become more easily to use

[mekto]

Thanks a lot for your help and your work, especially for the working demo. It works as expected :) Tabs component is often quite difficult to implement in most libraries, but I think it is very practical example and helps to understand internals of a library and what is possible in it.

Ok, I will play with it more and try to dig into Regular's source code. Maybe we will be able to come up with some new ideas how to create composible components in Regular. Thanks again.

[leeluolee]

OK, I have sent a invitation to you . But there is still a lot of things need to do to make regularjs more friendly to other participants. Maybe the most difficult part is the parser that I will refactoring them soon.

I will complete the code annotation first, so other people can get involved easily.

[leeluolee]

An updated Demo here: http://plnkr.co/edit/yzmkZhHZGiCwV3yBwcwb?p=preview.

I add property called $outer which reference to the visual outer component (no scope related, it is very different with $parent ).

This version is very close to your first example now.

[mekto]

This is a great demo! And the possibility to add new tab panes dynamically is really awesome, I haven't even considered it before. Good job! 👍

[leeluolee]

add $outer property. to find the visual parent component which is important when using component as transcluded content

see release https://github.com/regularjs/regular/releases/tag/0.3.1

[leeluolee]

@mekto

feature about transclude content in regularjs.
<r-content> will be removed in future, beacuse {#include} is enough to handle them.

** new design with #include ( shartcut #inc is available now) **

• all transclude content can be got with this.$body ， like <p>hello</p> in <modal><p>hello</p></modal>.
• #inc now accept group (returned by this.$compile. ), component (via new Component) and String
• this.$body is A Group
• All Group and Component have their own context ( which is point to where they are defined), the result just as same as <r-content> before.
• you can also pass a group through modifier (current only support compile modifier) , like: <modal title.cmpl = '<h2>{title}</h2>'></modal>, the title passed in modal will become a Group but not a String.

It is a online Demo for creating Modal Component, which use the compile modifier and this.$body.

[http://rawgit.com/regularjs/regular/group/example/feature-collection/include-advanced.html]

The coding style is very like React now.

I need some suggestion with this design , if you have time.

[leeluolee]

you can also define modal.title or modal.body to handle the $bodies

 <modal show={show} autohide={true} >
          <modal.title>Custom Title <span class="badge" >{num}</span> </modal.title>
          <modal.foot>Custom Title <span class="badge" >{num}</span> <button class='btn btn-primary' on-click={show=false}>CLose it!</button> </modal.foot>
          <nav class="navbar navbar-default">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
              </div>
            </div>
          </nav>
        </modal>