meteorhacks / flow-components Goto Github PK

Currently, FlowComponents.getProp or prop on the template does not work within a block helper.
Make a fix for that.

It seems like using ES6 classes won't work with flow-components, are there any plans to support that in the future?

Hi, I migrated the templates of my app to FlowComponents and overall this worked out great and improved my code a lot. However, in some cases I have lost the fine-grained reactivity I had before. These cases follow all the same pattern:

{{#each state$myArray}}
{{>render component="my-component" myProperty=this}}
{{/each}}

If I understand this right, I need to use stateFn$ to wrap the value of myProperty in a function, to avoid rerenderings if myProperty changes. But how can I do this in these cases, where stateFn$myProperty can not be used? Another case in which this problem occurs is something like:

{{>render component="my-component" myProperty=state$myObj.myProperty}}

This is caused on line 60 of component.js

I'll make a pull request to fix this bug.

Why do things have to be defined in the client folder? That seems like a limitation.

With our states, prototypes and actions it's very easy to do both unit tests and integration tests.

Unit testing will be simple. All we need to do it a expose these via some API. May be we can use FlowComponents.find() for this.

For integration testing, we need to find a way to render the component to the dom and do call actions and check states. For that, we need some kind of testing tools.

Is there a reason that FlowComponents.find() throws an exception when a component is not found?

I have an existing project with modal dialog support that retrieves the template name to display from a session variable. I would like to add direct component support by doing something like:

{{#if isComponentModal}}
  {{> render component=template}}
{{else}}
  {{> template}}
{{/if}}

ModalDialog.helpers.isComponentModal = function() {
  return FlowComponents.find(App.activeModalName());
}

ModalDialog.helpers.template = function() {
  return App.activeModalName();
}

However, the find call is throw an error when the component is not found. Obviously, I can just wrap the find call with a try/catch block, but it seems strange to have find() throw an error in the first place.

Can I access parent component?

I need to call parent component's action or change state.

I render components which depends on previous components. When select box value change, remove all components after it's component and rerender one component after it. I use client side collection for it.

It works. But when remove components, blaze throws error. Must be attached from https://github.com/meteor/meteor/blob/devel/packages/blaze/domrange.js#L337

Here is reproduction repo (on dynamic-render branch): https://github.com/delgermurun/flow-demo/tree/dynamic-render

I tried the example in a new project but I get this errors

meteorhacks_flow-components.js?3e234eadeda200018d372018c5957076cc16a2da:154 Uncaught TypeError: undefined is not a function
blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:1842 Uncaught Error: Can't render the same View twice

{{#render component="loading" isLoading=getFn$isLoadingHbarChart}}
  {{>
    render component="hbar"
    onSelect=action$onHarbarSelect
  }}
{{/render}} 

this sample code returns an error "there is no such private action: loading.action.onHarbarSelect"

as of meteor/meteor#1602

I wonder what the approach is to use props in the components markup (in the template) instead of state variables?

I've a template level subscription inside a template autorun. If I use Meteor subscribe method it clears client data before fetching new one from server publication and using subsmanager subscribe just doesn't even run the publication so client data never appears.

I've this autorun inside my component:

this.autorun(function(){
        subman.subscribe("samplepub_" + that.type,that.item,that.get("searchFilter"),that.get("usersFilter"),that.get("countLimit"));
    })

Any idea on where's the problem? Why subscription manager doesn't work inside a component?

I wonder how would be the proper way to use this with react-meteor.

I have two layout one with component and other with template. There is two bugs.

• When switch from page with template based layout to page with component based layout, flow components throws error: Exception from Tracker recompute function: FlowComponent needs 'component' parameter
• When vice versa (component => template), it doesn't render peices, only renders layout.

Here is reproduction repo (on master branch): https://github.com/delgermurun/flow-demo/tree/master

it is fine:

component = FlowComponents.define('searchBox', (props) ->
  console.log 'A component created!'
  return
)

but for error in component.js:

component = FlowComponents.define('searchBox')

This is very similar to the FlowComponents.child() but inside the component itself. So, we can access states and actions.

But we need to make sure, when this used inside a state, it won't get reactive. If need reactivity, we should be able to use it in this.autorun()

We can use Environment variables for this.

We need to following APIs.

• state$
• stateFn$
• prop$
• action$

ES6 is enabled by default in Meteor 1.2+ so why not to use better syntax in all example code snippets?

Please specify, what exactly is wrong with the old approach. The motivation behind flow-components would be easier to grasp :)

Now, this works.

FlowComponents.child("aa").child("aa").child("aa").child("aa").child("aa")

But it shouldn't. So, we need to fix it.

it seems Tracker.autorun computations are being rerun if deps changed, after component is destroyed.

I'm trying to create a button component. This button accepts a function as prop. This function will be executed when the button is clicked.

My main template:

<template name='App'>
    {{> render buttonConfig}}
</template>

Template.App.helpers({
    buttonConfig: function() {
        return {
            component: 'button',
            label: 'Demo Button', 
            onClick: function() { console.log('The button is clicked'); }
        };
    }
});

My button component:

<template name='button'>
    <button>{{state$label}}</button>
</template>

var component = FlowComponents.define('button', function(props) {
    this.set('label', props.label); 
    this.set('onClick', props.onClick);
});

component.action.onClick = function() {
    onClickFunction = this.get('onClick'); // undefined 
    onClickFunction();
};

Template.button.events({
    'click': function() {
        FlowComponents.callAction('onClick');
    }
});

The problem seems to be that a component's state cannot contain a function, so this.get('onClick') always returns undefined. If so, is there a better way to implement this button component?

I'm about to convert templates into components. I've no prior experience on component based architecture. But I researched and I think I've basic understanding.

I wonder what is right approach for meteor. How do you use it? Is everything component, even simple templates? Or do you mix templates and components?

I think, it would very useful if there is an complete example project.

Thank you.

/cc @arunoda @christianvoigt

I'm trying to create a component with content block, exactly similar to the example at
https://github.com/meteorhacks/flow-components#content-blocks

However, the text [object Object] is shown instead of the expected content.

On your example here, when I tested that mixin on one of my components:

var component = FlowComponents.define('notes', function (props) {
  this.subscribe('notes');
});

component.extend(ComponentSubs);

It errored because this._subs is undefined. I debugged and saw that the created callback never runs, and therefore the _subs property is never created. Is this because of Meteor 1.0.4?

I have following nested components inside my code

{{#render component="loading" isLoading=stateFn$isProfileLoading}}
  {{>render component="hbar"
    onSelect=action$onHarbarSelect
  }}
{{/render}}

when action onHarbarSelect is triggered

component.prototype.getSortedValueType = function () {
   ...
};

component.action.onHarbarSelect = function(id) {
  console.log(this.getSortedValueType)
};

console.log about prints undefined for above code. without the content block its working fine.

Is it possible to render a component using Flow Layout?
Right now i am rendering a 'traditional' template that renders the flow component like you say in the readme {{> render component="userDetails"}}
Doing something like

FlowLayout.render('layout', {
    top: "userDetailsToolbar",
    main: "userDetails",
    aside: 'menu'
});

where userDetails is a flow-component doesn't work sadly.

What's your solution for inter component communicate where there isn't a parent child relationship. Most of the component system don't seem to address this issue. If I have a edit post dialog that can be triggered from multiple places/components in my app,
How do these different/multiple components, communicate with an editPostDialog component to perform edits?