famous / framework Goto Github PK

How do you inject nested state value to a behavior? (ex: $states.get([‘a’, ‘b’] from {states: { a: { b: 1 } } })

@Imti on Slack:

We don't have a good way to do that yet. You'll have to inject a and reach into b to use it from within a behavior

@matthewtoast on Slack:

i would advise sticking to the flattened states for now

Take this example where a child component yields it's #header to the header in the parent component:

// Child component
behaviors: {
  '#header': {
    '$yield': '#title'
  }
},
tree: `<node id="header"><h1>Title</h1></node>`

// Parent component
tree: `
  <user:child>
    <node id='header">
      <h1>Different title</h1>
  </node>
</user:child>`

The content from the child #header is not replaced by the content from the parent. Instead both <h1>s are rendered.

Linguistically, at least, it would make better sense if when a node is directed to yield it completely hands over responsibility for what is rendered inside to the node it is yielding to.

Example: https://api-beta.famo.us/codemanager/v1/containers/c3283546-9d8b-4c6d-a3c0-dd8c68fae9b4/share

Inspect element on one of those "spinners" and you'll see they contain more than one famous-dom-element-content DIV elements.

In short, I can't use $if together with setting $state from within post-load.

This works:

FamousFramework.scene('ildar:page-controller', {
    behaviors: {
        // '#home': {
        //     '$if': function(path) { return path === '/'  }
        // },
        // '#blog': {
        //     '$if': function(path) { return path === '/blog'  }
        // },
        // '#about': {
        //     '$if': function(path) { return path === '/about' }
        // },
        '.page': {
            'size': [200, 200],
            'align': [0.5, 0.5],
            'mount-point': [0.5, 0.5],
            'style': {
                'background': 'whitesmoke'
            }
        }
    },
    events: {
        '$lifecycle': {
            'post-load': function($state) {
                console.log('post-load');
                $state.set('path', '/');
            }
        },
        '.page': {
            'click': function($state) {
                console.log('WORKS');
                $state.set('path', '/blog');
            }
        }
    },
    states: {
        path: null,
    },
    tree: `
        <node id="home"  class="page">  <div> HOME  </div>  </node>
        <node id="blog"  class="page">  <div> BLOG  </div>  </node>
        <node id="about" class="page">  <div> ABOUT </div>  </node>
    `
});

This also works:

FamousFramework.scene('ildar:page-controller', {
    behaviors: {
        '#home': {
            '$if': function(path) { return path === '/'  }
        },
        '#blog': {
            '$if': function(path) { return path === '/blog'  }
        },
        '#about': {
            '$if': function(path) { return path === '/about' }
        },
        '.page': {
            'size': [200, 200],
            'align': [0.5, 0.5],
            'mount-point': [0.5, 0.5],
            'style': {
                'background': 'whitesmoke'
            }
        }
    },
    events: {
        '$lifecycle': {
            'post-load': function($state) {
                console.log('post-load');
                // 
                // If $state isn't set from here, the code works.
                // 
                // $state.set('path', '/');
            }
        },
        '.page': {
            'click': function($state) {
                console.log('WORKS');
                $state.set('path', '/blog');
            }
        }
    },
    states: {
        path: '/',
    },
    tree: `
        <node id="home"  class="page">  <div> HOME  </div>  </node>
        <node id="blog"  class="page">  <div> BLOG  </div>  </node>
        <node id="about" class="page">  <div> ABOUT </div>  </node>
    `
});

But this doesn't work:

FamousFramework.scene('ildar:page-controller', {
    behaviors: {
        '#home': {
            '$if': function(path) { return path === '/'  }
        },
        '#blog': {
            '$if': function(path) { return path === '/blog'  }
        },
        '#about': {
            '$if': function(path) { return path === '/about' }
        },
        '.page': {
            'size': [200, 200],
            'align': [0.5, 0.5],
            'mount-point': [0.5, 0.5],
            'style': {
                'background': 'whitesmoke'
            }
        }
    },
    events: {
        '$lifecycle': {
            'post-load': function($state) {
                console.log('post-load');
                $state.set('path', '/');
            }
        },
        '.page': {
            'click': function($state) {
                console.log('WORKS');
                $state.set('path', '/blog');
            }
        }
    },
    states: {
        path: null,
    },
    tree: `
        <node id="home"  class="page">  <div> HOME  </div>  </node>
        <node id="blog"  class="page">  <div> BLOG  </div>  </node>
        <node id="about" class="page">  <div> ABOUT </div>  </node>
    `
});

Could be related to #41

Those guys have bought your old domains (famo.us/famous.co) and stolen your “circled φ” logo.

Now that page is plastered with incomprehensible marketing bullshit (micro-apps, wtf) posted leeching off this project’s name and image.

sue them or send a cease-and-desist letter to at least make them stop using the “φ” logo

Results in external.js being referenced in the document and added to user~scene.bundle.js:

FamousFramework.scene('user:scene', {
})
.config({
    includes: [
        'external.js'
    ]
});

I spoke with Joseph and it sounds like Famous does not currently allow for animations of meshes (imported OBJ's).

Being able to animate these is a must for high quality game development.

It looks like the OBJ Standard doesn't support animations itself, so a creative solution may be required.

There is DataStore.saveFamousFrameworkComponent to register key to COMPONENTS object but no function exists to unregister key from it. This causes a memory leak problem over time in any component that uses $ifs and $repeats where children nodes are dynamically added/removed. We need a destructor function that knows how to reach in to these places and clean things up.

Base Example

FamousFramework.component('famous-tests:html-element-events', {
    behaviors: {
        '.container': {
            'size': [200, 200],
            'align': [0.5, 0.5],
            'mount-point': [0.5, 0.5]
        }
    },
    events: {
        '.button': {
            'click': function($event) {
                console.log('$event: ', $event);
                // Actual behavior: above gets logged three times
                // Expected behavior: above gets logged once
            }
        }
    },
    states: {},
    tree: `
        <node class="container">
            <button class="button"> Button 1 </button>
            <button class="button"> Button 2 </button>
            <button class="button"> Button 3 </button>
        </node>
    `
});

Problem:

Since the content of nodes are passed to the engine as strings, we can't attach events on to the plain dom elements. A workaround implemented by the framework is to crawl up the tree and attach the event on to the parent node containing the content. This will work for most cases. It breaks in this case since we end up having 3 click events getting attached to the parent node ('.container' in the above example).

Solution:

On the framework level, we can attach attributes to the underlying plain dom elements in our detached dom. We would still attach the event to the parent node, but when we get the event, we would read the current target and invoke its listeners. However, the event object we get back from the Famous Engine is stripped and we cannot read the currentTarget. Ultimately, this will require an update to the Famous Engine.

Temporary Workaround

In the meantime, wrap each html element in a node like so:

<node class="container">
    <node>  <button class="button"> Button 1 </button>  </node>
    <node>  <button class="button"> Button 2 </button>  </node>
    <node>  <button class="button"> Button 3 </button>  </node>
</node>

And attach events as normal.

Filing the issue for posterity since it took a while to arrive at this as a fix.

When running famous framework-scaffold the user can get this error:

> [email protected] dev .../hello-world
> npm run bundle & npm run local-only-bootstrap

> [email protected] local-only-bootstrap .../hello-world
> famous-framework local-only-bootstrap --blocksDirectory=public --sourceDirectory=components --port=1618

> [email protected] bundle .../hello-world
> famous-framework watch-runtime --inputFile=node_modules/famous-framework/lib/index.js --outputFile=public/famous-framework.development.bundle.js --serverHost=http://localhost:1618

env: node\r: No such file or directory
env: node\r: No such file or directory

The problem seems to be

that a non-Unix line ending has ended up in the bin/famous-framework.js file.

The solution seems to be

to go into bin/famous-framework.js and delete the line break after the shebang, and then re-add the line-break.

I tried running an example from the website:

http://famous.org/framework/tree.html
Under "Inserting actual HTML"

FamousFramework.component('examples',{
      behaviors: {
         '#foo': { //this will work input
            'position':[250,150]
         },
         '#bar': {  // this will not work on input
            'position':[1000,100] 
         }
      },
      events: {
        '#bar': { // this will work on input
            'change': function($payload){
                console.log($payload)
            }
        }
      },
       tree: `<node id="foo">
                <input id="bar" type="range"></input>
              </node>`,
})

I get this error: Uncaught TypeError: Cannot read property 'events' of undefined
If I replace #bar with input in the events selector, it doesn't give an error but still doesn't work.
If I replace #bar with #foo, nothing happens. I'm assuming this means the event doesn't "bubble up" to #foo as the website suggests?

famous:layouts:scroll-view currently uses {overflow: scroll} that works fine on desktop web browsers but provides a terrible experience on mobile web browsers. Maybe we can improve it by integrating with iscroll or Zynga's scroller.

Is there a way to attach listeners for standard DOM events like copy, for example?

As far as I can see, this won't work as it's not a famous:event or a $dispatcher event:

events: {
  '#el': {
    'copy': function($dispatcher) {
      console.log(e);
   }
}

There doesn't seem to be a way to access the DOM node directly from with event. $dispatcher exposes a virtual DOM node for the host component but even event listeners attached to them do not show up once the DOM tree is created. $DOMElement doesn't expose a node so it's a no go either.

Any ideas?

I unknowingly made the first letter of my username uppercase which caused me not to be able to run the basic scaffolded project. I received a few errors below in the console.

Dale:hello-world (HEAD) has an uppercase letter in its name; use lowercase only

Uncaught Error: No dependencies found for dale:hello-world (HEAD)

Which made it pretty clear that I should not use uppercase in my username, but I could not figure out how to change it.

Maybe there should be a warning when running famous register or it should automatically lowercase the provided username.

Ultimately I ended registering with a different email address and everything worked.

Take this tree:

<node id="el" class="needs-css-styling">
  <h1>Hello</h1>
</node>

Without applying certain behaviors, this generates a DOM node without the id or the class given to the node.

<div class="famous-dom-element" data-fa-path="body/0/0/0/0" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); width: 280px; height: 669px; display: block; opacity: 1;"><div class="famous-dom-element-content" style="width: 280px; height: 669px;"><h1 repeat-info="{&quot;$index&quot;:0,&quot;$repeatPayload&quot;:{}}">Hello</h1></div></div>

It would make more sense if attributes are passed to the DOM node irrespective of what behaviors are being applied.

Not sure if a mistake in documentation or a bug.

The documentation say that $repeat "reflects the .length of the array" https://github.com/Famous/framework-guides/blob/develop/control-flow.md

But:

'.el': {
            '$repeat': function() {
                var arr = new Array(3);
                return arr;
            }
}

Results in no elements being repeated.

It would be cool if serverHost defaulted to your IP on the network so that going to 192.168.x.x:1618 on your phone worked. I can get it working by modifying famous-framework.development.bundle.js (Deployer -> options -> codeManagerAssetReadHost), but it feels like that should be default for development so it's easy to test on multiple devices.

Sync it

after installing the CLI, creating a project and npm install successfully - I am un able to get past the npm run dev command..

Here's what I get :

leeblazek@Lees-MacBook-Pro-2
~/Sites/fa-framework-test
$ npm run dev

[email protected] dev /Users/leeblazek/Sites/fa-framework-test
npm run bundle && node node_modules/famous-framework/dev/dev.js local-only-bootstrap --port=1618 --blocksDirectory=$PWD/public --sourceDirectory=$PWD/components

[email protected] bundle /Users/leeblazek/Sites/fa-framework-test
mkdir -p public && cd node_modules/famous-framework && npm run build-runtime -- --outputFile=$PWD/../../public/famous-framework.development.bundle.js && cd ../..

npm ERR! Error: ENOENT, open '/Users/leeblazek/Sites/fa-framework-test/node_modules/famous-framework/node_modules/build-runtime/package.json'
npm ERR! If you need help, you may report this entire log,
npm ERR! including the npm and node versions, at:
npm ERR! http://github.com/npm/npm/issues

npm ERR! System Darwin 14.3.0
npm ERR! command "node" "/usr/local/bin/npm" "run" "build-runtime" "--" "--outputFile=/Users/leeblazek/Sites/fa-framework-test/node_modules/famous-framework/../../public/famous-framework.development.bundle.js"
npm ERR! cwd /Users/leeblazek/Sites/fa-framework-test/node_modules/famous-framework
npm ERR! node -v v0.10.33
npm ERR! npm -v 1.4.28
npm ERR! path /Users/leeblazek/Sites/fa-framework-test/node_modules/famous-framework/node_modules/build-runtime/package.json
npm ERR! code ENOENT
npm ERR! errno 34
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /Users/leeblazek/Sites/fa-framework-test/node_modules/famous-framework/npm-debug.log
npm ERR! not ok code 0

npm ERR! [email protected] bundle: mkdir -p public && cd node_modules/famous-framework && npm run build-runtime -- --outputFile=$PWD/../../public/famous-framework.development.bundle.js && cd ../..
npm ERR! Exit status 34
npm ERR!
npm ERR! Failed at the [email protected] bundle script.
npm ERR! This is most likely a problem with the famous-framework-jon-doe-hello-world package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! mkdir -p public && cd node_modules/famous-framework && npm run build-runtime -- --outputFile=$PWD/../../public/famous-framework.development.bundle.js && cd ../..
npm ERR! You can get their info via:
npm ERR! npm owner ls famous-framework-jon-doe-hello-world
npm ERR! There is likely additional logging output above.
npm ERR! System Darwin 14.3.0
npm ERR! command "node" "/usr/local/bin/npm" "run" "bundle"
npm ERR! cwd /Users/leeblazek/Sites/fa-framework-test
npm ERR! node -v v0.10.33
npm ERR! npm -v 1.4.28
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /Users/leeblazek/Sites/fa-framework-test/npm-debug.log
npm ERR! not ok code 0

npm ERR! [email protected] dev: npm run bundle && node node_modules/famous-framework/dev/dev.js local-only-bootstrap --port=1618 --blocksDirectory=$PWD/public --sourceDirectory=$PWD/components
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is most likely a problem with the famous-framework-jon-doe-hello-world package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run bundle && node node_modules/famous-framework/dev/dev.js local-only-bootstrap --port=1618 --blocksDirectory=$PWD/public --sourceDirectory=$PWD/components
npm ERR! You can get their info via:
npm ERR! npm owner ls famous-framework-jon-doe-hello-world
npm ERR! There is likely additional logging output above.
npm ERR! System Darwin 14.3.0
npm ERR! command "node" "/usr/local/bin/npm" "run" "dev"
npm ERR! cwd /Users/leeblazek/Sites/fa-framework-test
npm ERR! node -v v0.10.33
npm ERR! npm -v 1.4.28
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /Users/leeblazek/Sites/fa-framework-test/npm-debug.log
npm ERR! not ok code 0
leeblazek@Lees-MacBook-Pro-2
~/Sites/fa-framework-test
$

This doesn't happen when all the code is in one component. Only when I have two components like this:

FamousFramework.component('ildar:my-component', {
    behaviors: {
        '#test': {
            '$if': function(example) {
                return example === 'a';
            },
        },
    },
    events: {
        '#test': {
            'test-event': function($state) {
                $state.set('example', 'b');
            }
        }
    },
    states: {
        'example': 'a',
    },
    tree: `
        <ildar:test id="test"></ildar:test>
    `
});

The other component emits an event (and the previous component above listens to it).

FamousFramework.component('ildar:test', {
    behaviors: {
        '#clickNode': {
            'content': "Click me",
        }
    },
    events: {
        '#clickNode': {
            'click': function($dispatcher) {
                $dispatcher.emit('test-event');
            }
        },
    },
    tree: `
        <node id="clickNode"></node>
    `
});

Clicking on the node causes the following error: Uncaught TypeError: Cannot read property 'parentNode' of null in the while statement of the function defined in famous-framework.development.bundle.js:

Dispatcher.prototype.emit = function(key, message) {
    var element = this.domNode;
    var event = new CustomEvent(key, {
        detail: message,
        bubbles: true
    });
    if (Dispatcher.willEventsBubbleInDetachedDOM) {
        element.dispatchEvent(event);
    }
    else {
        while (element.parentNode) {
            element.dispatchEvent(event);
            element = element.parentNode;
        }
    }
};

If you run this example, Framework will only generate 1 div at position 50, 50 where I would expect it to create two, one at 0, 0 and the second at 50, 50. Also, the console.log($index) prints two 1's, instead of a 0 and a 1. Strange...

FamousFramework.component('m:test', {
    behaviors: {
        '.item': {
            '$repeat': [0, 1],
            'position': ($index) => {
                console.log($index);
                return [$index * 50, $index * 50]
            },
            'content': ($index) => {
                return `<div style="width: 50px; height: 50px; background-color: yellow">${$index}</div>`
            }
        }
    },
    events: {},
    states: {},
    tree: `
        <node class="item"></node>
    `
});

EDIT: Hmm… just saw this seems to happen whenever the list you try to repeat over does not contain objects… So for example if you '$repeat’: [0, 1] it does not seem to create two elements, but if instead you '$repeat’: [{foo: ‘hello’}, {foo: ‘world'}] then it does create two elements…!

I noticed something with the automated build and browser refresh. If i am working inside a sub-component, the build process will trigger and refresh the browser, but the changes will not take effect unless I make a change to the parent component that is being included in the public index file.

example... I am loading this layout component in the public index.htm:

FamousFramework.deploy('username:layout', 'HEAD', 'body');

inside layout, my node tree looks like this, loading two sub components:

<node id="layout">
    <component1></component1>
<component2></component2>
</node>

If i make changes to either of the subcomponents, the build process goes, but no changes are displayed in the browser. If i save the parent "layout" component, the changes take effect.

This might be the way it was intended to work. if so that is alright. it's just not the way i expected it to behave. Hope this is helpful.

It's been stated already that this is on the roadmap, but obviously lower priority than critical work on Framework itself. Nevertheless, I thought it would be a good idea to keep an issue open for this, as a central point to be referred back to, and to accumulate ongoing thoughts, requests, etc so we all have a shared, clear vision of where this is headed.

(Framework team -- feel free to edit this first message as you see fit)

Roughly estimated, non-committal target date: October? (can be updated over time)

Tasks:

• Separate Framework into builder, compiler and client parts (see below)

your README.md makes reference to https://github.com/Famous/framework/blob/develop/docs/windows-installation.md but this doesn't seem to be shared yet. It might be worth either sharing it or adding a warning.

It is not possible to $repeat a component that has a HTML element as an ancestor.

Example tree:

<node>
  <section id="i-will-break-you">
    <node>
      <node id="please-repeat-me"><span>Never!</span></node>
    </node>
  </section>
</node>

Results in error:
Uncaught Error: ParentNode with UIDnulldoes not exist. Unable to process $if/$repeat

Similarly, it is not possible to $repeat a HTML element.

behaviors: {
  '.item': {
    '$repeat': '[[identity|products]]'
  }
},
states: {
  products: [1,2,3,4]
},
tree: `
<node>
  <div class="item"></div>
</node
`

Will result in this error: Uncaught Error: No dependencies found fordiv (null)`

Use case: simple popup dialog with OK and CANCEL buttons. If the initial state of the popup is visible (for testing), the 'click' events on the buttons work as expected. If the popup node is set hidden via $if and then re-displayed ($if is true), the buttons (child nodes) no longer respond to click events.

FamousFramework.scene('tutaslabs:test', {
behaviors: {
'#popup': {
'align': [0.5, 0.3],
'origin': [0.5, 0.5],
'mount-point': [0.5, 0.5],
'size': [150, 150],
'position-z':1,
'style': {
'background-color': 'red',
'border-radius': '15px',
'padding': '20px'
},
'unselectable': false,
'$if': function(pvisible) {
return pvisible;
}
},
'#button': {
'align': [0.4, 0.4],
'origin': [0.5, 0.5],
'mount-point': [0.5, 0.5],
'size': [100, 30],
'position-z':20,
'style': {
'background-color': 'lightblue',
'border-radius': '15px',
'cursor':'pointer',
'text-align':'center',
'line-height':'30px'
},
'content': 'Ok'
}
},
events: {
'$self': {
'click': function($event,$state) {
alert('background clicked')
$state.set('pvisible',true)
}
},
'#button': {
//this does not work when parent becomes visible from a hidden state ($if was false)
'click': function($event,$state) {
alert('button clicked')
$state.set('pvisible',false)
}
},
'#popup': {
//this works as expected on becoming 'visible' ($if is true)
'click': function($event,$state) {
alert('popup clicked')
$state.set('pvisible',false)
}
}
},
states: {
pvisible: true
},

tree:
`<node id="popup">
    <node id="button"></node>
 </node>`

});

It would be nice to have the dependencies in package.json cleaned up a little and have the dev-dependencies separate from the runtime dependencies. This way it's easier to get a better understanding of what all will be included.

I'd like to include remote resources (ex: font-awesome hosted on CDN) but it doesn't seem to support this functionality yet. I've tried both adding http://{URL} and //{URL} to config.includes but the desired URL is always appended to the entry component's root URL. (ex: http://localhost:1618/build/famous-demos~twitter~app/famous-demos/twitter/{URL})

Was doing some testing in IE11 on Windows 8 and saw the following errors:

• famous-demos:dynamic-list The background color changes to gray after control flow runs. Seems this could be related to an issue with the WebGL context?
• famous-demos:simplified-todos Items are only added to the list after the input field is 'blurred'.
• famous-demos:widget-dashboard:dashboard An error is thrown for Multiple definitions of a property not allowed in strict mode (due to the fact that this demo's style behavior has multiple re-declarations of the same background property)
• famous-tests:camera When clicked, the perspective does not actually change as expected
• famous-tests:html-element-events The buttons, when clicked, seem to be emitting a bunch of MouseEvents (more than I would expect - possible multiple listeners are being registered?)
• famous-tests:attach-webgl - WebGL sphere does not display. (Related to the same errors shown above.)

WEBGL11067: INVALID_VALUE: getAttribLocation: WebGLProgram object expected
"INVALID_OPERATION: drawArrays: This context does not have a current program"
File: famous-framework.bundle.js, Line: 32695, Column: 13

• famous-tests:best:demo The text doesn't show up in the four boxes. (Possibly an issue with perspective or z-index?)

Installing the framework via the Famous CLI (framework branch) on a Windows machine doesn't work. Two overarching issues at play:

• In several places in the code, file/folder paths are not constructed in a platform-agnostic way
• At least one of the npm packages aren't compatible out-of-the-box with Windows

Here are some specific issues I've collected that will need to be resolved for Windows install to work:

• In the project scaffolding, the build npm script should be changed to not use mkdir -p
• The npm scripts in both the scaffolding and the framework codebase should not use $PWD
• The npm scripts should not be cd-ing around
• We need to refactor the scaffold and framework npm scripts to use "bin" scripts properly
• The framework has a couple of pathing helper functions that need to be refactored to differentiate between URL paths and filesystem paths (and use Path.sep for the filesystem ones)
• In the framework build step for dependency loading, the script is looking in the wrong paths e.g. err Could not find entrypoint file for famous\core\node; this needs to be fixed
• Folders are created with artifacts that aren't valid on Windows, e.g. the 'public/v1/blocks' folder. The folders within use the naming convention e.g. "famous/core/node" which contain illegal characters ('/') for files/folders on Windows machines.
• Install on Windows fails due to Python not being installed by default on Windows machines. (Windows 7 and 8?) This isn't listed anywhere as a dependency in the documentation, so the user is left reading the error message from npm indicating Python can't be found. Additionally, after installing Python, the user must set a global variable set PYTHON=C:\path\to\python27\python.exe before attempting the install again. Additionally additionally, it seems Python 3.x is not supported; the user must install Python 2.x.
• JSDom 3.x depends on Contextify which has known issues with Windows install. Might be able to fix by upgrading to JSDom 4.x, but the last time I checked JSDom 4.x did not run on Node.js (it's only io.js compatible).

I am using a OS X 10.10. I followed the steps in README, but it did not work. Nothing shows up in the browser. Here's the info after running npm run dev.

famous Building module lawliet:hello-world
famous Freezing dependencies for lawliet:hello-world...
famous    famous:core:node ~> HEAD
famous Let's try to bootstrap famous:core:node ~> HEAD locally...
Got error when trying to load dependencies: [Error: Failed to build dependencies locally for `famous:core:node` (HEAD)]
Unable to load `lawliet:hello-world`'s dependencies {"famous:core:node":"HEAD"}
famous ok Built bundle lawliet:hello-world ~> HEAD
famous    Bundle URL: http://localhost:1618/v1/blocks/lawliet:hello-world/versions/HEAD/assets/~bundles/bundle.js
Wrote 1041459 bytes to public/famous-framework.development.bundle.js

It would be helpful to have some documentation on '[[identity|headerHeight]]' and '[[setter|camel]]' function shorthand (sugar)

Is there a way to show a dynamic component based on state? It might eliminate the need for all of the if statements and static tree in the router example, etc.. something like

FamousFramework.scene('andrewreedy:dynamic-test', {
     // The contents of the #right element is dynamic based on the 'right-view' state
    tree: `
        <header-footer>
            <mobile-header id="header">
                <node id="left">
                    <p>Left</p>
                    <button data-action="open-menu">Menu</button>
                </node>
                <node id="center">
                    <h1>Header4</h1>
                </node>
                <node id="right"></node>
            </mobile-header>
            <scroll-view id="body">
                <node class="scroll-view-item" data-action="open-subview"></node>
            </scroll-view>
            <node id="footer">
                <p>Footer</p>
            </node>
        </header-footer>
    `,
    behaviors: {
        '#right': {
            // Linking this element to the component type pulled from the state value 'right-view'
            '$dynamic': 'right-view'
        }
    },
    state: {
        // The component 'top-icon-b' is set in the state here.. this could change to another
        // component and that would be rendered into #right
        'right-view': 'top-icon-b'
    }
})
.config({
    imports: {
        'famous:layouts': ['header-footer', 'scroll-view'],
        'hybrid': ['mobile-header'],
        'andrewreedy': ['top-icon-b']
    }
});

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.

Simple animation where node transitions to the left, content changes, and transitions back. This sequence of set/thenSet does not work. Transitioning to the left, back to the right, THEN changing the content DOES work though this is not the desired behavior.

FamousFramework.scene('tutaslabs:test', {
'behaviors': {
'#button': {
content: '[[identity]]',
'origin': [0.5, 0.5],
'align': [0.5, 0.5],
'size': [200, 100],
'position': '[[identity]]',

        'style': {
            'text-align': 'center',
            'line-height': '100px',
            'font-size': '30px',
            'background-color': 'lightblue',
            'cursor':'pointer'
        }
    }
},
'events':{
    '#button': {

        'click': function($state,$event) {
            // this does not work. The first two sets (and the animation) execute then stop. Last transition never
            // happens
            $state.set('position',[-200,0],{duration: 2000}).thenSet('content',"Was clicked").
                thenSet('position',[0,0],{duration: 2000})

            // These sets do work. All three sets (and animations) work as coded.
            // $state.set('position',[-200,0],{duration: 2000}).thenSet('position',[0,0],{duration: 2000}).
            //    thenSet('content',"Was clicked")
        }

    }

},

'states':{
    'content': 'Click me',
    'position': [0,0]
},

'tree': '<node id="button"></node>'

});

Most developers will expect to be able to do this:

// In jon-doe/example/example.js

var _ = require('lodash');

FamousFramework.scene('jon-doe:example', {
    // etc.    
});

Although we don't restrict _against_using require etc., we don't currently have automatic support for it through our build process, meaning that the bundles generated by our build process won't actually have the required packages loaded in.

The current workaround

The current workaround is to pre-bundle your entrypoint file before feeding it through the framework's build process. E.g.:

1. Create a pre-build entrypoint file, jon-doe/example/_example.js
2. Install packages into your component directory
3. Browserify your pre-build entrypoint, with the output file being your actual entrypoint file, jon-doe/example/example.js
4. Let the framework build tool take over from there

That's annoying though, so...

The eventual solution(s)?

1.) We could include Browserify as part of our build process. Basically, check if the project directory has a package.json, then check for node_modules, npm i if necessary, and then browserify the necessary files before (or after) the main steps of our build. This is similar to what the Famous CLI deploy task does.

2.) More flexibly, we could allow the user to specify their own build hooks. I.e., a user could put this in their package.json:

"scripts": {
    "build-famous": "foobar"
}

Our build process would check for a package.json, and if the "build-famous" script is present in the "scripts" object, then we would run that prior to our build process. This seems like perhaps the most flexible approach.

Open to other suggestions here.

Question: Who has an idea how i can get a parent $index value inside a child $repeat?

as in a html structure like

<node class="cluster"> //  first repeat - thinks rows
        <node class="particle"></node> // second repeat  -- think columns 
    </node>

and .js

behaviors: {

.cluster': {

        '$repeat': function(s_array) {
               var result = [];
               for (var i = 0; i < s_array.length; i++) { result.push({}); } 
               return result;
        },
        'position': function($index) 
                return [ s_array[$index][1], ];  
        },

},
'.particle': {

        '$repeat': function(s_array) {
            var result = [];
            for (var i = 0; i < s_array[PARENTINDEX][2]; i++) { result.push({}); } 
            return result;
        },
        'position': function() {
                return [$index, 0];      
        },

},

states: {

  s_array : [[1,11,8],[2,9,13],[2,9,23],[3,7,13],[4,6,19],[5,5,19],[6,4,8],[6,19,5],[7,4,7],[7,21,2],[8,4,6]]  

}

BEST code can easily get messy with lots of quotation marks used for selectors, events, etc. It'd be fantastic to switch to camelized names for event keys as it will significantly reduce the amount of quotation marks needed in behaviors and events sections of code. Camel case is more consistent with idiomatic JavaScript as well.

The only places I see that absolutely need dasherized strings wrapped with quotation marks are selectors, and we cannot really do much about it. However the rest can be changed for better developer experience.