Watcher doesn't reload demo when nested components are changed

[matthewtoast]

I'm porting this issue via @thiswildorchid that was filed against the famous-cli repo - Famous/famous-cli#54 - since it is actually a problem with our tooling not the CLI itself.

---

It appears that when I create new components the app is not watching them for changes and wont load the changes made to the files in the modules.

How to reproduce

• create demo app
• create new folder with .famous directory and myNameSpace.js file
• include myNameSpace component in main app i.e.

FamousFramework.scene('thedude:magick', {
    behaviors: {
        '#surface': {
            'content': '<h1>Hello world!</h1>',
            'size': [800, 800]
        }
    },

    tree: `<node>
    <node id="surface"></node>
    <thedude:google:simple-map></thedude:google:simple-map> //my custom namespace 
    </node>`
});

• now modify the file in custom namespace and note that the changes are not being compiled and rendered on page reload.

[matthewtoast]

Just to clarify what's going on. This is a known issue with our build process.

The builder smart enough to find a component's dependencies and build those (recursively), but it's not smart enough to find all of the dependents of a component and rebuild those.

We may need to go back to first principles and build the builder the right way in order to solve this. As it stands, the tooling is very primitive and kind of a mess.

[subtubes-io]

@matthewtoast thanks for the update. I would be happy to help if I can. Are you thinking that you will rebuild the CLI tool or are you thinking of something else?

[matthewtoast]

Most of the issues with this are located in the framework's dev tools (here be dragons):

https://github.com/Famous/framework/tree/develop/dev

I'm planning to go through and refactor a lot of this to hopefully make it easier to handle these cases.

[subtubes-io]

OK so the issue is related to the fact that this line resolves to false.
var doRebuildEverythingOnChange = info.rebuildEverythingOnChange === 'yes';

found in famous-framework/bin/famous-framework.js line 81 I can do a pull request with the fix by adding --rebuildEverythingOnChange=yes to the "local-only-bootstrap": setting in the package.json

[matthewtoast]

@thiswildorchid - That option will indeed work. But, it gets a bit hairy when you are developing a lot of components in that one workspace. I.e., rebuilding say 100 components when you've made a tiny whitespace change seems a bit heavy. (Especially if you're like me and you compulsively 'save' almost every minor change!) I feel like there's a way to handle this that is a bit more limited. So I would rather not make --rebuildEverythingOnChange the default. But perhaps document that it exists in case people want to use it. What do you think?

[subtubes-io]

Right now I feel the build process is no better off without --rebuildEverythingOnChange=yes since we have to manually change our "main" component so that changes are registered. To your point about

rebuilding say 100 components when you've made a tiny whitespace change seems a bit heavy.

I think that is a legitimate concern and good point.

However I don't think anyone is going to be be working on anything more than demo apps in the short term and those will likely not have more than a few modules.

If we consider the inverse, where the option is set to yes by default and we document that they can turn it off I am not too sure many people will turn it off.

That being said I would be happy to contribute the documentation as you see fit.

[matthewtoast]

Cool, that's great feedback. I'll go through it a few times with --rebuildEverythingOnChange=yes and just check that it meets the base case.

[djgrant]

Even with this setting I'm finding that I need to still save twice before the changes appear in the browser. Also, multiple live reloads get triggered - once for each component, at a guess.

[matthewtoast]

We'll be adding a new option soon that will hopefully remove some more friction from this process.