12 |
21 |
13 | {% include sidenav.html %}
14 |
15 |
16 |
20 |
17 | {{ content }}
18 |
19 |
9 |
10 |
30 |
--------------------------------------------------------------------------------
/src/utils/debug/AltStore.js:
--------------------------------------------------------------------------------
1 | import alt from './alt'
2 | import DebugActions from './DebugActions'
3 |
4 | export default alt.createStore(class {
5 | static displayName = 'AltStore'
6 |
7 | static config = {
8 | getState(state) {
9 | return {
10 | stores: state.stores
11 | }
12 | }
13 | }
14 |
15 | constructor() {
16 | this.alt = null
17 | this.stores = []
18 |
19 | this.bindActions(DebugActions)
20 |
21 | this.exportPublicMethods({
22 | alt: () => this.alt,
23 | stores: () => this.stores,
24 | })
25 | }
26 |
27 | setAlt(altInst) {
28 | this.alt = altInst
29 | this.stores = Object.keys(this.alt.stores).map((name) => {
30 | return this.alt.stores[name]
31 | })
32 | }
33 | })
34 |
--------------------------------------------------------------------------------
/examples/todomvc/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "todomvc-alt",
3 | "version": "1.0.0",
4 | "description": "Example Flux architecture using alt.",
5 | "repository": "https://github.com/goatslacker/alt",
6 | "main": "js/app.js",
7 | "dependencies": {
8 | "object-assign": "^2.0.0",
9 | "react": "^0.12.2"
10 | },
11 | "devDependencies": {
12 | "babelify": "^5.0.3",
13 | "browserify": "~4.2.2"
14 | },
15 | "scripts": {
16 | "preinstall" : "cd ../.. ; npm install",
17 | "build": "browserify . > js/bundle.js",
18 | "test": "jest"
19 | },
20 | "author": "Josh Perez
11 |
14 |
15 | Posts
12 |subscribe via RSS
13 |-
16 | {% for post in site.posts %}
17 |
-
18 | 19 | {{ post.date | date: "%b %-d, %Y" }} 20 |24 |
25 | {% endfor %}
26 |
21 |
26 | )
27 | }
28 | }
29 |
30 | export default Debugger
31 |
--------------------------------------------------------------------------------
/test/debug-alt-test.js:
--------------------------------------------------------------------------------
1 | import Alt from '../'
2 | import { assert } from 'chai'
3 |
4 | export default {
5 | 'debug mode': {
6 | beforeEach() {
7 | global.window = {}
8 | },
9 |
10 | 'enable debug mode'() {
11 | const alt = new Alt()
12 | Alt.debug('an identifier', alt)
13 |
14 | assert.isArray(global.window['alt.js.org'])
15 | assert(global.window['alt.js.org'].length === 1)
16 | assert.isString(global.window['alt.js.org'][0].name)
17 | assert(global.window['alt.js.org'][0].alt === alt)
18 | },
19 |
20 | afterEach() {
21 | delete global.window
22 | }
23 | },
24 |
25 | 'isomorphic debug mode': {
26 | 'enable debug mode does not make things explode'() {
27 | const alt = new Alt()
28 | Alt.debug(alt)
29 | },
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/examples/weathertabs/js/stores/AppStore.js:
--------------------------------------------------------------------------------
1 | var alt = require('../alt');
2 |
3 | var AppActions = require('../actions/AppActions');
4 |
5 | module.exports = alt.createStore(class AppStore {
6 | constructor() {
7 | this.bindActions(AppActions);
8 | this.location = null;
9 | this.manager = null;
10 | }
11 |
12 | setManager(manager) {
13 | this.manager = manager;
14 | }
15 |
16 | addLocation(location) {
17 | this.manager.getOrCreate(location);
18 | this.location = location;
19 | }
20 |
21 | setLocation(location) {
22 | this.location = location;
23 | }
24 |
25 | deleteLocation(location) {
26 | this.manager.delete(location);
27 | this.location = null;
28 | for (var i in this.manager.all()) {
29 | this.location = i;
30 | break;
31 | }
32 | }
33 | });
34 |
--------------------------------------------------------------------------------
/src/utils/AltIso.js:
--------------------------------------------------------------------------------
1 | import Iso from 'iso'
2 | import * as Render from './Render'
3 |
4 | export default {
5 | define: Render.withData,
6 |
7 | render(alt, Component, props) {
8 | if (typeof window === 'undefined') {
9 | return Render.toString(alt, Component, props).then((obj) => {
10 | return {
11 | html: Iso.render(obj.html, obj.state, { iso: 1 })
12 | }
13 | }).catch((err) => {
14 | // return the empty markup in html when there's an error
15 | return {
16 | err,
17 | html: Iso.render()
18 | }
19 | })
20 | } else {
21 | Iso.bootstrap((state, meta, node) => {
22 | alt.bootstrap(state)
23 | Render.toDOM(Component, props, node, meta.iso)
24 | })
25 | return Promise.resolve()
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/docs/flush.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Flush
4 | description: Reset stores back to initial state
5 | permalink: /docs/flush/
6 | ---
7 |
8 | # flush
9 |
10 | > (): string
11 |
12 | Flush takes a snapshot of the current application state and then resets all the stores back to their original initial state. This is useful if you're using alt stores as singletons and doing server side rendering.
13 |
14 | In this particular scenario you would load the data in via `bootstrap` and then use `flush` once the view markup has been created. This makes sure that your components have the proper data and then resets your stores so they are ready for the next request. This is all not effected by concurrency since bootstrap, flush, and render are all synchronous processes.
15 |
16 | ```js
17 | const applicationState = alt.flush();
18 | ```
19 |
--------------------------------------------------------------------------------
/examples/weathertabs/README.md:
--------------------------------------------------------------------------------
1 | ## AltManager example: Weather Tabs App
2 |
3 | This is an example React/Flux/Alt app that shows the use of AltManager, a
4 | utility class for Alt.js. AltManager allows for multiple alt instances which is
5 | necessary to build apps that encapsulates a mini app inside of a large app. In
6 | this example we have a simple weather searcher. Each search you make will
7 | create a new tab which itself is a new Alt instance and has its own internal
8 | store & actions. Whatever you do in the alt instance is persisted even after
9 | you move to another tab. You can delete tabs which will delete that alt instance
10 |
11 | ## Install
12 | 1) run `npm run clean`
13 | 2) open the index.html file
14 |
15 | ## Docs
16 | See /utils/AltManager.js for details on how to use AltManager.js
17 | See /mixins/AltManagerMixin.js for details on mixin usage.
18 |
--------------------------------------------------------------------------------
/examples/weathertabs/js/actions/WeatherActions.js:
--------------------------------------------------------------------------------
1 | var $ = require('jquery');
2 |
3 | class WeatherActions {
4 | constructor() {
5 | this.generateActions(
6 | 'setLoading',
7 | 'setWeather',
8 | 'showRaw'
9 | );
10 | }
11 |
12 | loadWeather(location) {
13 | this.dispatch(location);
14 | $.ajax('http://api.openweathermap.org/data/2.5/weather', {
15 | crossDomain: true,
16 | data: { q: location },
17 | success: (data) => {
18 | // we put in a fake delay here to show the loading icon
19 | setTimeout(() => {
20 | if (data.weather) {
21 | this.actions.setWeather(data);
22 | }
23 | this.actions.setLoading(false);
24 | }, 500);
25 | },
26 | error: () => {
27 | this.actions.setLoading(false);
28 | }
29 | });
30 | }
31 | }
32 |
33 | module.exports = WeatherActions;
34 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "alt",
3 | "version": "0.17.1",
4 | "homepage": "https://github.com/goatslacker/alt",
5 | "authors": [
6 | "Josh Perez Debug
22 |
24 |
27 | );
28 | }
29 |
30 | });
31 |
32 | module.exports = ChatApp;
33 |
--------------------------------------------------------------------------------
/examples/chat/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "alt-chat",
3 | "version": "0.0.1",
4 | "description": "Example Flux chat application primarily intended to explain the use of Dispatcher.waitFor().",
5 | "repository": "https://github.com/goatslacker/alt",
6 | "main": "js/app.js",
7 | "dependencies": {
8 | "alt": "^0.13.5",
9 | "react": "^0.12.2"
10 | },
11 | "devDependencies": {
12 | "babel-jest": "^4.0.0",
13 | "babelify": "^5.0.3",
14 | "browserify": "~4.2.2",
15 | "envify": "^3.2.0",
16 | "jest-cli": "^0.4.0",
17 | "uglify-js": "~2.4.15"
18 | },
19 | "scripts": {
20 | "build": "NODE_ENV=production browserify . | uglifyjs -cm > js/bundle.min.js",
21 | "test": "jest"
22 | },
23 | "authors": [
24 | "Bill Fisher",
25 | "Josh Perez Hello World
20 | * );
21 | * }
22 | * });
23 | *
24 | * module.exports = IsomorphicRenderer(alt, App);
25 | * ```
26 | */
27 |
28 | import Iso from 'iso'
29 | import React from 'react'
30 |
31 | export default function IsomorphicRenderer(alt, App) {
32 | /*eslint-disable */
33 | if (typeof window === 'undefined') {
34 | /*eslint-enable */
35 | return () => {
36 | const app = React.renderToString(React.createElement(App))
37 | const markup = Iso.render(app, alt.takeSnapshot())
38 | alt.flush()
39 | return markup
40 | }
41 | } else {
42 | Iso.bootstrap((state, _, node) => {
43 | const app = React.createElement(App)
44 | alt.bootstrap(state)
45 | React.render(app, node)
46 | })
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/alt/utils/AltUtils.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable*/
2 | const builtIns = Object.getOwnPropertyNames(NoopClass)
3 | const builtInProto = Object.getOwnPropertyNames(NoopClass.prototype)
4 | /*eslint-enable*/
5 |
6 | export function getInternalMethods(Obj, isProto) {
7 | const excluded = isProto ? builtInProto : builtIns
8 | const obj = isProto ? Obj.prototype : Obj
9 | return Object.getOwnPropertyNames(obj).reduce((value, m) => {
10 | if (excluded.indexOf(m) !== -1) {
11 | return value
12 | }
13 |
14 | value[m] = obj[m]
15 | return value
16 | }, {})
17 | }
18 |
19 | export function warn(msg) {
20 | /* istanbul ignore else */
21 | if (typeof console !== 'undefined') {
22 | console.warn(new ReferenceError(msg))
23 | }
24 | }
25 |
26 | export function uid(container, name) {
27 | let count = 0
28 | let key = name
29 | while (Object.hasOwnProperty.call(container, key)) {
30 | key = name + String(++count)
31 | }
32 | return key
33 | }
34 |
35 | export function formatAsConstant(name) {
36 | return name.replace(/[a-z]([A-Z])/g, (i) => {
37 | return `${i[0]}_${i[1].toLowerCase()}`
38 | }).toUpperCase()
39 | }
40 |
41 | export function dispatchIdentity(x, ...a) {
42 | this.dispatch(a.length ? [x].concat(a) : x)
43 | }
44 |
45 | /* istanbul ignore next */
46 | function NoopClass() { }
47 |
--------------------------------------------------------------------------------
/examples/todomvc/js/components/Header.react.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2014, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | *
9 | * @jsx React.DOM
10 | */
11 |
12 | var React = require('react');
13 | var TodoActions = require('../actions/TodoActions');
14 | var TodoTextInput = require('./TodoTextInput.react');
15 |
16 | var Header = React.createClass({
17 |
18 | /**
19 | * @return {object}
20 | */
21 | render: function() {
22 | return (
23 | todos
25 |{message.authorName}
30 |
31 | {message.date.toLocaleTimeString()}
32 |
33 | {message.text}
34 |
26 |
42 | )
43 | }
44 | }
45 |
46 | export default connectToStores({
47 | getPropsFromStores() {
48 | return {
49 | stores: AltStore.stores()
50 | }
51 | },
52 |
53 | getStores() {
54 | return [AltStore]
55 | }
56 | }, StoreExplorer)
57 |
--------------------------------------------------------------------------------
/test/config-set-get-state-test.js:
--------------------------------------------------------------------------------
1 | import Alt from '../'
2 | import { assert } from 'chai'
3 | import sinon from 'sinon'
4 |
5 |
6 | export default {
7 | 'Config state getter and setter': {
8 | 'setting state'() {
9 | const setState = sinon.stub().returns({
10 | foo: 'bar'
11 | })
12 |
13 | const alt = new Alt({ setState })
14 |
15 | const action = alt.generateActions('fire')
16 |
17 | const store = alt.createStore({
18 | displayName: 'store',
19 | bindListeners: {
20 | fire: action.fire
21 | },
22 | state: { x: 1 },
23 | fire() {
24 | this.setState({ x: 2 })
25 | }
26 | })
27 |
28 | assert(store.getState().x === 1)
29 |
30 | action.fire()
31 |
32 | assert.ok(setState.calledOnce)
33 | assert(setState.args[0].length === 2)
34 | assert(store.getState().foo === 'bar')
35 | },
36 |
37 | 'getting state'() {
38 | const getState = sinon.stub().returns({
39 | foo: 'bar'
40 | })
41 |
42 | const alt = new Alt({ getState })
43 |
44 | const store = alt.createStore({
45 | displayName: 'store',
46 | state: { x: 1 }
47 | })
48 |
49 | assert.isUndefined(store.getState().x)
50 |
51 | assert.ok(getState.calledOnce)
52 | assert(getState.args[0].length === 1)
53 | assert(store.getState().foo === 'bar')
54 | },
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/test/listen-to-actions.js:
--------------------------------------------------------------------------------
1 | import { assert } from 'chai'
2 | import Alt from '../dist/alt-with-runtime'
3 |
4 | import ActionListeners from '../utils/ActionListeners'
5 |
6 | const alt = new Alt()
7 |
8 | class MyActions {
9 | static displayName = 'ActionListenerActions'
10 |
11 | constructor() {
12 | this.generateActions('updateName')
13 | }
14 | }
15 |
16 | const myActions = alt.createActions(MyActions)
17 |
18 | const listener = new ActionListeners(alt)
19 |
20 | export default {
21 | 'listen to actions globally'() {
22 | const id = listener.addActionListener(myActions.UPDATE_NAME, (name, details) => {
23 | assert(name === 'yes', 'proper data was passed in')
24 | assert(details.namespace === 'ActionListenerActions')
25 | assert(details.name === 'updateName')
26 | })
27 |
28 | assert.isString(id, 'the dispatcher id is returned for the listener')
29 |
30 | myActions.updateName('yes')
31 |
32 | listener.removeActionListener(id)
33 |
34 | assert.doesNotThrow(() => myActions.updateName('no'), 'no error was thrown by action since listener was removed')
35 |
36 | listener.addActionListener(myActions.UPDATE_NAME, (name) => {
37 | assert(name === 'mud', 'proper data was passed in again')
38 | })
39 |
40 | myActions.updateName('mud')
41 |
42 | listener.removeAllActionListeners()
43 |
44 | myActions.updateName('bill')
45 | assert.doesNotThrow(() => myActions.updateName('bill'), 'all listeners were removed')
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/test/testing-utils.js:
--------------------------------------------------------------------------------
1 | import Alt from '../dist/alt-with-runtime'
2 | import AltTestingUtils from '../utils/AltTestingUtils'
3 | import { assert } from 'chai'
4 |
5 | const alt = new Alt()
6 |
7 | const petActions = alt.generateActions('buyPet', 'sellPet')
8 |
9 | class UnwrappedPetStore {
10 | constructor() {
11 | this.bindActions(petActions) // buyPet, sellPet
12 |
13 | this.pets = {hamsters: 2, dogs: 0, cats: 3}
14 | this.storeName = "Pete's Pets"
15 | this.revenue = 0
16 | }
17 |
18 | onBuyPet({cost, pet}) {
19 | this.pets[pet]++
20 | this.revenue -= this.roundMoney(cost)
21 | }
22 |
23 | onSellPet({price, pet}) {
24 | this.pets[pet]--
25 | this.revenue += this.roundMoney(price)
26 | }
27 |
28 | // this is inaccessible from our alt wrapped store
29 | roundMoney(money) {
30 | // rounds to cents
31 | return Math.round(money * 100) / 100
32 | }
33 |
34 | static getInventory() {
35 | return this.getState().pets
36 | }
37 | }
38 |
39 | export default {
40 | 'make a store testable by auto mocking alt.createStore'() {
41 | var context = AltTestingUtils.mockGetState({ pets: [1, 2, 3] })
42 | var emptyContext = AltTestingUtils.mockGetState()
43 |
44 | var unwrappedStore = AltTestingUtils.makeStoreTestable(alt, UnwrappedPetStore)
45 | assert(unwrappedStore.roundMoney(21.221234) === 21.22)
46 | assert(unwrappedStore.roundMoney(11.2561341) === 11.26)
47 | assert(UnwrappedPetStore.getInventory.call(context)[0] === 1)
48 | assert.isUndefined(UnwrappedPetStore.getInventory.call(emptyContext))
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/examples/weathertabs/css/app.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Lato', sans-serif, "Arial";
3 | font-size: 16px;
4 | background: #eee;
5 | margin: 0;
6 | }
7 |
8 | h1 {
9 | background: #333;
10 | margin: 0;
11 | padding: 20px 20px;
12 | color: #eee;
13 | border-bottom: solid 3px #aaa;
14 | }
15 |
16 | .search-box {
17 | width: 600px;
18 | margin: 40px auto 60px auto;
19 | }
20 |
21 | .search-location {
22 | padding: 6px;
23 | width: 380px;
24 | margin-right: 10px;
25 | font-size: 20px;
26 | border-radius: 3px;
27 | border: solid 1px #ccc;
28 | }
29 |
30 | button {
31 | font-size: 20px;
32 | padding: 6px 14px;
33 | background: #333;
34 | color: #eee;
35 | border: solid 1px #999;
36 | border-radius: 3px;
37 | }
38 |
39 | .content {
40 | padding: 0 20px;
41 | }
42 |
43 | .pull-right {
44 | float:right;
45 | }
46 |
47 | .weather-tab {
48 | padding: 20px;
49 | background: #ccc;
50 | border-radius: 3px;
51 | }
52 |
53 | .loading img {
54 | margin: 0 auto;
55 | display: block;
56 | padding: 50px 0;
57 | }
58 |
59 | .nav {
60 | list-style: none;
61 | padding: 0;
62 | margin: 0 20px;
63 | }
64 |
65 | .nav li {
66 | display: inline;
67 | margin: 0;
68 | font-size: 20px;
69 | padding: 10px 0;
70 | background: #333;
71 | position: relative;
72 | bottom: 10px;
73 | border-top-left-radius: 3px;
74 | border-top-right-radius: 3px;
75 | }
76 |
77 | .nav li a {
78 | color: white;
79 | padding: 0 1em;
80 | text-decoration: none;
81 | }
82 |
83 | .nav li.selected {
84 | background: #ccc;
85 | padding-top: 18px;
86 | }
87 |
88 | .nav li.selected a {
89 | color: #000;
90 | }
91 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # How to contribute
2 |
3 | If you think there's room for improvement or see it broken feel free to submit a patch.
4 | We'll accept a patch through any medium: GitHub pull requests, gists, emails,
5 | gitter.im snippets, etc.
6 |
7 | Your patch should adhere to these guidelines:
8 |
9 | * The [coding style](#coding-style) is similar.
10 | * All tests should pass `npm test` and coverage should remain at 100% `npm run coverage`.
11 | * No linting errors are present `npm run lint`.
12 | * The commit history is clean (no merge commits).
13 | * We thank you for your patch.
14 |
15 | ## How to get set up
16 |
17 | Fork the project and clone it to your computer. Then you'll need npm to install
18 | the project's dependencies. Just run:
19 |
20 | ```bash
21 | npm install
22 | ```
23 |
24 | To make sure everything is ok you should run the tests:
25 |
26 | ```bash
27 | npm test
28 | ```
29 |
30 | ## Coding Style
31 |
32 | We use [EditorConfig](http://editorconfig.org/) for basics and encourage you
33 | to install its plugin on your text editor of choice. This will get you 25% of
34 | the way there.
35 |
36 | The only hard-line rule is that the code should look uniform. We loosely follow
37 | the [Airbnb JS style guide](https://github.com/airbnb/javascript) with a few
38 | notable exceptions.
39 |
40 | * You shouldn't have to use [semicolons](https://medium.com/@goatslacker/no-you-dont-need-semicolons-148d936b9cf2). The build file adds them in anyway.
41 | * Do not rely on any ES6 shim/sham features (Map, WeakMap, Proxy, etc).
42 | * Use `//` for comments. And comment anything you feel isn't obvious.
43 |
44 | ## License
45 |
46 | All of our code and files are licensed under MIT.
47 |
--------------------------------------------------------------------------------
/test/browser/index.js:
--------------------------------------------------------------------------------
1 | const assign = require('object-assign')
2 |
3 | const tests = assign(
4 | {},
5 | require('../index'),
6 | require('../listen-to-actions'),
7 | require('../final-store'),
8 | require('../recorder'),
9 | require('../setting-state'),
10 | require('../stores-get-alt'),
11 | require('../stores-with-colliding-names'),
12 | require('../testing-utils'),
13 | require('../use-event-emitter'),
14 | require('../store-as-a-module'),
15 | require('../es3-module-pattern')
16 | )
17 |
18 | // This code is directly from mocha/lib/interfaces/exports.js
19 | // with a few modifications
20 | function manualExports(exports, suite) {
21 | var suites = [suite]
22 |
23 | visit(exports)
24 |
25 | function visit(obj) {
26 | var suite
27 | for (var key in obj) {
28 | if ('function' == typeof obj[key]) {
29 | var fn = obj[key]
30 | switch (key) {
31 | case 'before':
32 | suites[0].beforeAll(fn)
33 | break
34 | case 'after':
35 | suites[0].afterAll(fn)
36 | break
37 | case 'beforeEach':
38 | suites[0].beforeEach(fn)
39 | break
40 | case 'afterEach':
41 | suites[0].afterEach(fn)
42 | break
43 | default:
44 | suites[0].addTest(new Mocha.Test(key, fn))
45 | }
46 | } else {
47 | var suite = Mocha.Suite.create(suites[0], key)
48 | suites.unshift(suite)
49 | visit(obj[key])
50 | suites.shift()
51 | }
52 | }
53 | }
54 | }
55 |
56 | manualExports(tests, mocha.suite)
57 |
58 | mocha.setup('exports')
59 | mocha.checkLeaks()
60 | mocha.run()
61 |
--------------------------------------------------------------------------------
/src/utils/ActionListeners.js:
--------------------------------------------------------------------------------
1 | /**
2 | * ActionListeners(alt: AltInstance): ActionListenersInstance
3 | *
4 | * > Globally listen to individual actions
5 | *
6 | * If you need to listen to an action but don't want the weight of a store
7 | * then this util is what you can use.
8 | *
9 | * Usage:
10 | *
11 | * ```js
12 | * var actionListener = new ActionListeners(alt);
13 | *
14 | * actionListener.addActionListener(Action.ACTION_NAME, function (data) {
15 | * // do something with data
16 | * })
17 | * ```
18 | */
19 |
20 | function ActionListeners(alt) {
21 | this.dispatcher = alt.dispatcher
22 | this.listeners = {}
23 | }
24 |
25 | /*
26 | * addActionListener(symAction: symbol, handler: function): number
27 | * Adds a listener to a specified action and returns the dispatch token.
28 | */
29 | ActionListeners.prototype.addActionListener = function (symAction, handler) {
30 | const id = this.dispatcher.register((payload) => {
31 | /* istanbul ignore else */
32 | if (symAction === payload.action) {
33 | handler(payload.data, payload.details)
34 | }
35 | })
36 | this.listeners[id] = true
37 | return id
38 | }
39 |
40 | /*
41 | * removeActionListener(id: number): undefined
42 | * Removes the specified dispatch registration.
43 | */
44 | ActionListeners.prototype.removeActionListener = function (id) {
45 | delete this.listeners[id]
46 | this.dispatcher.unregister(id)
47 | }
48 |
49 | /**
50 | * Remove all listeners.
51 | */
52 | ActionListeners.prototype.removeAllActionListeners = function () {
53 | Object.keys(this.listeners).forEach(
54 | this.removeActionListener.bind(this)
55 | )
56 | this.listeners = {}
57 | }
58 |
59 | export default ActionListeners
60 |
--------------------------------------------------------------------------------
/examples/chat/js/components/MessageComposer.react.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file is provided by Facebook for testing and evaluation purposes
3 | * only. Facebook reserves all rights not expressly granted.
4 | *
5 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
9 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | *
12 | * @jsx React.DOM
13 | */
14 |
15 | var ChatMessageActionCreators = require('../actions/ChatMessageActionCreators');
16 | var React = require('react');
17 |
18 | var ENTER_KEY_CODE = 13;
19 |
20 | var MessageComposer = React.createClass({
21 |
22 | getInitialState: function() {
23 | return {text: ''};
24 | },
25 |
26 | render: function() {
27 | return (
28 |
35 | );
36 | },
37 |
38 | _onChange: function(event, value) {
39 | this.setState({text: event.target.value});
40 | },
41 |
42 | _onKeyDown: function(event) {
43 | if (event.keyCode === ENTER_KEY_CODE) {
44 | var text = this.state.text.trim();
45 | if (text) {
46 | ChatMessageActionCreators.createMessage(text);
47 | }
48 | this.setState({text: ''});
49 | }
50 | }
51 |
52 | });
53 |
54 | module.exports = MessageComposer;
55 |
--------------------------------------------------------------------------------
/test/isomorphic-test.js:
--------------------------------------------------------------------------------
1 | import { assert } from 'chai'
2 | import sinon from 'sinon'
3 | import React from 'react'
4 |
5 | const sampleApp = require('./helpers/SampleApp.jsx')
6 |
7 | const reactRender = React.render
8 |
9 | export default {
10 | 'Isomorphic Flux rendering util': {
11 | afterEach() {
12 | delete global.window
13 | delete global.document
14 | React.render = reactRender
15 | },
16 |
17 | 'sampleApp is a function server-side'() {
18 | assert.isFunction(sampleApp)
19 | },
20 |
21 | 'client side it returns undefined because it just bootstraps'() {
22 | global.window = {}
23 |
24 | const node = {
25 | getAttribute: sinon.stub().returns(JSON.stringify(JSON.stringify({})))
26 | }
27 |
28 | global.document = {
29 | querySelectorAll: sinon.stub().returns([node])
30 | }
31 |
32 | React.render = sinon.spy()
33 |
34 | // requiring a separate file because of how require caching works
35 | const sampleApp2 = require('./helpers/SampleApp2.jsx')
36 |
37 | assert.isUndefined(sampleApp2)
38 |
39 | assert.ok(global.document.querySelectorAll.calledTwice, 'querySelectorAll was called twice when bootstrapping')
40 | assert.ok(React.render.calledOnce, 'react render was called to render the node')
41 | },
42 |
43 | 'the sampleApp function returns the markup'() {
44 | const sampleApp = require('./helpers/SampleApp.jsx')
45 |
46 | const markup = sampleApp()
47 | assert.isString(markup)
48 |
49 | assert(markup.indexOf('react-checksum') !== -1, 'it has a react checksum')
50 | assert(markup.indexOf('FooStore') !== -1, 'FooStore is encoded in there somewhere')
51 | assert(markup.indexOf('hello') !== -1, 'the content has been injected properly')
52 | }
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/web/_includes/header.html:
--------------------------------------------------------------------------------
1 |
46 |
--------------------------------------------------------------------------------
/web/scripts/createIndex.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs')
2 | const path = require('path')
3 | const lunr = require('lunr')
4 |
5 | const index = lunr(function () {
6 | this.field('title', { boost: 10 })
7 | this.field('description', { boost: 5 })
8 | this.field('body')
9 | this.field('layout')
10 | this.field('permalink')
11 | })
12 |
13 | function addDocument(name, idx) {
14 | const markdown = String(fs.readFileSync(name)).split('---')
15 |
16 | const topdoc = markdown[1]
17 |
18 | const body = markdown.slice(2, markdown.length).join('')
19 |
20 | const doc = topdoc
21 | .split('\n')
22 | .filter(Boolean)
23 | .reduce(function (obj, prop) {
24 | const keyVal = prop.split(':')
25 | obj[keyVal[0]] = keyVal[1].trim()
26 | return obj
27 | }, { id: idx, body: body })
28 |
29 | index.add(doc)
30 |
31 | return {
32 | id: doc.id,
33 | title: doc.title,
34 | description: doc.description,
35 | body: doc.body,
36 | permalink: doc.permalink
37 | }
38 | }
39 |
40 | function isDir(fullpath) {
41 | try {
42 | return fs.statSync(fullpath).isDirectory()
43 | } catch (err) {
44 | return null
45 | }
46 | }
47 |
48 | function fromDirectory(dir) {
49 | return fs.readdirSync(dir).reduce(function (dirs, file) {
50 | const fullpath = path.join(dir, file)
51 | if (isDir(fullpath)) {
52 | dirs.push.apply(dirs, fromDirectory(path.join(fullpath)))
53 | } else if (/.md$/.test(file)) {
54 | dirs.push(fullpath)
55 | }
56 | return dirs
57 | }, [])
58 | }
59 |
60 | const documents = fromDirectory('../docs')
61 | .concat(fromDirectory('../guides'))
62 | .map(addDocument)
63 |
64 | const searchData = {
65 | docs: documents,
66 | index: index.toJSON()
67 | }
68 |
69 | fs.writeFileSync('./assets/search.json', JSON.stringify(searchData))
70 |
--------------------------------------------------------------------------------
/src/alt/actions/index.js:
--------------------------------------------------------------------------------
1 | import * as fn from '../../utils/functions'
2 | import * as utils from '../utils/AltUtils'
3 |
4 | class AltAction {
5 | constructor(alt, id, action, actions, actionDetails) {
6 | this.id = id
7 | this._dispatch = action.bind(this)
8 | this.actions = actions
9 | this.actionDetails = actionDetails
10 | this.alt = alt
11 | }
12 |
13 | dispatch(data) {
14 | this.dispatched = true
15 | this.alt.dispatch(this.id, data, this.actionDetails)
16 | }
17 | }
18 |
19 | export default function makeAction(alt, namespace, name, implementation, obj) {
20 | const id = utils.uid(alt._actionsRegistry, `${namespace}.${name}`)
21 | alt._actionsRegistry[id] = 1
22 |
23 | const data = { id, namespace, name }
24 |
25 | // Wrap the action so we can provide a dispatch method
26 | const newAction = new AltAction(alt, id, implementation, obj, data)
27 |
28 | const dispatch = (payload) => alt.dispatch(id, payload, data)
29 |
30 | // the action itself
31 | const action = (...args) => {
32 | newAction.dispatched = false
33 | const result = newAction._dispatch(...args)
34 | // async functions that return promises should not be dispatched
35 | if (!newAction.dispatched && result !== undefined && !fn.isPromise(result)) {
36 | if (fn.isFunction(result)) {
37 | result(dispatch)
38 | } else {
39 | dispatch(result)
40 | }
41 | }
42 | return result
43 | }
44 | action.defer = (...args) => {
45 | setTimeout(() => {
46 | newAction._dispatch.apply(null, args)
47 | })
48 | }
49 | action.id = id
50 | action.data = data
51 |
52 | // ensure each reference is unique in the namespace
53 | const container = alt.actions[namespace]
54 | const namespaceId = utils.uid(container, name)
55 | container[namespaceId] = action
56 |
57 | return action
58 | }
59 |
--------------------------------------------------------------------------------
/examples/todomvc/js/components/MainSection.react.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2014, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | *
9 | * @jsx React.DOM
10 | */
11 |
12 | var React = require('react');
13 | var ReactPropTypes = React.PropTypes;
14 | var TodoActions = require('../actions/TodoActions');
15 | var TodoItem = require('./TodoItem.react');
16 |
17 | var MainSection = React.createClass({
18 |
19 | propTypes: {
20 | allTodos: ReactPropTypes.object.isRequired,
21 | areAllComplete: ReactPropTypes.bool.isRequired
22 | },
23 |
24 | /**
25 | * @return {object}
26 | */
27 | render: function() {
28 | // This section should be hidden by default
29 | // and shown when there are todos.
30 | if (Object.keys(this.props.allTodos).length < 1) {
31 | return null;
32 | }
33 |
34 | var allTodos = this.props.allTodos;
35 | var todos = [];
36 |
37 | for (var key in allTodos) {
38 | todos.push(Stores
27 |-
28 | {this.props.stores.map((store) => {
29 | return (
30 |
- 36 | {store.displayName} 37 | 38 | ) 39 | })} 40 |
- {todos}
{thread.name}
39 |
40 | {lastMessage.date.toLocaleTimeString()}
41 |
42 |
43 | {lastMessage.text}
44 |
45 |
53 |
60 | );
61 | },
62 |
63 | /**
64 | * Event handler for 'change' events coming from the TodoStore
65 | */
66 | _onChange: function() {
67 | this.setState(getTodoState());
68 | }
69 |
70 | });
71 |
72 | module.exports = TodoApp;
73 |
--------------------------------------------------------------------------------
/components/AltContainer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * AltContainer.
3 | *
4 | * There are many ways to use AltContainer.
5 | *
6 | * Using the `stores` prop.
7 | *
8 | * 
Error loading weather data, check location
; 36 | } 37 | 38 | var weather = this.state.weather; 39 | var rawData = null; 40 | var showText = 'Show Raw JSON'; 41 | if (this.state.showRaw) { 42 | rawData ={JSON.stringify(weather, null, 4)};
43 | showText = 'Hide Raw JSON';
44 | }
45 |
46 | return (
47 |
48 |
54 | );
55 | },
56 |
57 | render: function() {
58 | return (
59 | Current Temp: {weather.main.temp}K, {weather.weather[0].description}
49 | 52 | {rawData} 53 |
60 |
63 |
66 | );
67 | },
68 | });
69 |
--------------------------------------------------------------------------------
/src/utils/AltManager.js:
--------------------------------------------------------------------------------
1 | /**
2 | * AltManager(Alt: AltClass): undefined
3 | *
4 | * > AltManager Util
5 | *
6 | * AltManager util allows for a developer to create multiple alt instances in
7 | * their app. This is useful for building apps that encapsulates an alt instance
8 | * inside of a outer parent. Popular examples include HipMunk flight search or
9 | * Google Spreadsheets's multiple sheet tabs. This also allows for caching of
10 | * client side instance if you need to store a new copy of an alt for each
11 | * action.
12 | *
13 | * Usage:
14 | *
15 | * ```js
16 | * var Alt = require('alt'); // Alt class, not alt instance
17 | * var altManager = new AltManager(Alt);
18 | *
19 | * var altInstance = altManager.create('uniqueKeyName');
20 | * altInstance.createAction(SomeAction);
21 | * var someOtherOtherAlt = altManager.create('anotherKeyName');
22 | * altManager.delete('uniqueKeyName');
23 | *
24 | * ```
25 | */
26 |
27 | export default class AltManager {
28 | constructor(Alt) {
29 | this.Alt = Alt
30 | this.alts = {}
31 | }
32 |
33 | create(altKey) {
34 | if (this.get(altKey)) {
35 | throw new ReferenceError(`Alt key ${altKey} already exists`)
36 | }
37 |
38 | if (typeof altKey !== 'string') {
39 | throw new TypeError('altKey must be a string')
40 | }
41 |
42 | this.alts[altKey] = new this.Alt()
43 | return this.alts[altKey]
44 | }
45 |
46 | get(altKey) {
47 | return this.alts[altKey]
48 | }
49 |
50 | // returns all alt instances
51 | all() {
52 | return this.alts
53 | }
54 |
55 | findWhere(regex) {
56 | let results = {}
57 | for (let i in this.alts) {
58 | if (regex.exec(i) === null) {
59 | continue
60 | }
61 |
62 | results[i] = this.alts[i]
63 | }
64 |
65 | return results
66 | }
67 |
68 | delete(altKey) {
69 | if (!this.get(altKey)) {
70 | return false
71 | }
72 |
73 | delete this.alts[altKey]
74 | return true
75 | }
76 |
77 | getOrCreate(altKey) {
78 | const alt = this.get(altKey)
79 | if (alt) {
80 | return alt
81 | }
82 |
83 | return this.create(altKey)
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/web/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Alt - Flux - Managing your state
4 | description: A library for managing data within JavaScript applications.
5 | permalink: /
6 | ---
7 |
8 | Weather For {this.state.location}
64 | {this.getWeatherContent()} 65 |
9 | 
10 |
11 |
15 | 16 |
20 |
21 | Alt
12 |A library for managing data within JavaScript applications.
13 | 14 |15 | 16 |
17 | Get Started in 5 Minutes
18 |
19 | Features
23 | 24 |
25 |
38 |
39 |
40 |
41 |
26 |
29 | 100% Flux
27 |A true flux compliant library in a very small size. Actions are fire and forget, stores have no setters, you get constants, and Flux's single dispatcher.
28 |
30 |
33 | Server Side Rendering
31 |Alt comes with support for building Isomorphic JavaScript applications right out of the box.
32 |
34 |
37 | Snapshots
35 |At any point in time you can take a snapshot of the entire application state and then reload it later. This opens the door for easier debugging, hot state reloading, and more.
36 |
42 |
55 |
43 |
46 | Terse
44 |Do away with defining constants, building your own boilerplate dispatchers, and ugly switch statements.
45 |
47 |
50 | Flexible
48 |Feel like ditching singletons, creating instances of each store, and passing them to your view? No problem.
49 |
51 |
54 | Forward Thinking
52 |Although optional, Alt is meant to work with ES2015 leveraging the new constructs and syntax for something powerful.
53 |-
66 | {this.state.locations.map((location) => {
67 | return (
68 |
- {location.name} 69 | ); 70 | })} 71 |
58 |
65 | );
66 | },
67 |
68 | /**
69 | * Event handler for 'change' events coming from the stores
70 | */
71 | _onChange: function() {
72 | this.setState(getStateFromStores());
73 | }
74 |
75 | });
76 |
77 | module.exports = ThreadSection;
78 |
--------------------------------------------------------------------------------
/test/final-store.js:
--------------------------------------------------------------------------------
1 | import Alt from '../dist/alt-with-runtime'
2 | import makeFinalStore from '../utils/makeFinalStore'
3 | import { assert } from 'chai'
4 | import sinon from 'sinon'
5 |
6 | const alt = new Alt()
7 | const FinalStore = makeFinalStore(alt)
8 |
9 | export default {
10 | 'FinalStore': {
11 | 'make final store'() {
12 | function Action() { this.generateActions('set') }
13 |
14 | const action = alt.createActions(Action)
15 |
16 | function Store1() {
17 | this.bindActions(action)
18 | this.value = null
19 | }
20 | Store1.prototype.set = function () {
21 | this.value = 1
22 | }
23 |
24 | function Store2() {
25 | this.bindActions(action)
26 | this.value = null
27 | }
28 | Store2.prototype.set = function () {
29 | this.value = 2
30 | }
31 |
32 | function Store3() {
33 | this.bindActions(action)
34 | this.value = null
35 | }
36 | Store3.prototype.set = function () {
37 | this.value = 3
38 | }
39 |
40 | // I put these out of order intentionally because order shouldn't
41 | // determine when these get called, the finalstore should always be last.
42 | const store1 = alt.createStore(Store1)
43 | const FinalStore = makeFinalStore(alt)
44 | const store2 = alt.createStore(Store2)
45 | const store3 = alt.createStore(Store3)
46 |
47 | const finalStoreListener = sinon.spy()
48 | FinalStore.listen(finalStoreListener)
49 |
50 | const store2Listener = sinon.spy()
51 | store2.listen(store2Listener)
52 |
53 | // Fire off the action
54 | action.set()
55 |
56 | assert.ok(finalStoreListener.calledOnce, 'final store called once')
57 | assert.ok(store2Listener.calledOnce, 'store2 listener caleld once')
58 |
59 | assert(store1.getState().value === 1, 'store1 value correct')
60 | assert(store2.getState().value === 2, 'store2 value correct')
61 | assert(store3.getState().value === 3, 'store3 value correct')
62 |
63 | assert.ok(finalStoreListener.calledAfter(store2Listener), 'final store was last one to be called')
64 |
65 | const stateListen = sinon.spy()
66 | FinalStore.listen(stateListen)
67 |
68 | action.set(27)
69 |
70 | assert.ok(stateListen.calledOnce, 'final store called once')
71 | assert(stateListen.args[0][0].payload.data === 27, 'the payload was received')
72 | },
73 |
74 | 'making another final store returns the right store'() {
75 | const store = makeFinalStore(alt)
76 | assert(store === FinalStore)
77 | },
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/src/alt/store/AltStore.js:
--------------------------------------------------------------------------------
1 | import * as fn from '../../utils/functions'
2 | import transmitter from 'transmitter'
3 |
4 | class AltStore {
5 | constructor(alt, model, state, StoreModel) {
6 | const lifecycleEvents = model.lifecycleEvents
7 | this.transmitter = transmitter()
8 | this.lifecycle = (event, x) => {
9 | if (lifecycleEvents[event]) lifecycleEvents[event].push(x)
10 | }
11 | this.state = state
12 |
13 | this.preventDefault = false
14 | this.displayName = model.displayName
15 | this.boundListeners = model.boundListeners
16 | this.StoreModel = StoreModel
17 | this.reduce = model.reduce || (x => x)
18 |
19 | const output = model.output || (x => x)
20 |
21 | this.emitChange = () => this.transmitter.push(output(this.state))
22 |
23 | const handleDispatch = (f, payload) => {
24 | try {
25 | return f()
26 | } catch (e) {
27 | if (model.handlesOwnErrors) {
28 | this.lifecycle('error', {
29 | error: e,
30 | payload,
31 | state: this.state
32 | })
33 | return false
34 | } else {
35 | throw e
36 | }
37 | }
38 | }
39 |
40 | fn.assign(this, model.publicMethods)
41 |
42 | // Register dispatcher
43 | this.dispatchToken = alt.dispatcher.register((payload) => {
44 | this.preventDefault = false
45 |
46 | this.lifecycle('beforeEach', {
47 | payload,
48 | state: this.state
49 | })
50 |
51 | const actionHandler = model.actionListeners[payload.action] ||
52 | model.otherwise
53 |
54 | if (actionHandler) {
55 | const result = handleDispatch(() => {
56 | return actionHandler.call(model, payload.data, payload.action)
57 | }, payload)
58 |
59 | if (result !== false && !this.preventDefault) this.emitChange()
60 | }
61 |
62 | if (model.reduce) {
63 | handleDispatch(() => {
64 | this.state = model.reduce(this.state, payload)
65 | }, payload)
66 |
67 | if (!this.preventDefault) this.emitChange()
68 | }
69 |
70 | this.lifecycle('afterEach', {
71 | payload,
72 | state: this.state
73 | })
74 | })
75 |
76 | this.lifecycle('init')
77 | }
78 |
79 | listen(cb) {
80 | this.transmitter.subscribe(cb)
81 | return () => this.unlisten(cb)
82 | }
83 |
84 | unlisten(cb) {
85 | this.lifecycle('unlisten')
86 | this.transmitter.unsubscribe(cb)
87 | }
88 |
89 | getState() {
90 | return this.StoreModel.config.getState.call(this, this.state)
91 | }
92 | }
93 |
94 | export default AltStore
95 |
--------------------------------------------------------------------------------
/examples/chat/js/components/MessageSection.react.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file is provided by Facebook for testing and evaluation purposes
3 | * only. Facebook reserves all rights not expressly granted.
4 | *
5 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
9 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | *
12 | * @jsx React.DOM
13 | */
14 |
15 | var MessageComposer = require('./MessageComposer.react');
16 | var MessageListItem = require('./MessageListItem.react');
17 | var MessageStore = require('../stores/MessageStore');
18 | var React = require('react');
19 | var ThreadStore = require('../stores/ThreadStore');
20 | var ListenerMixin = require('../../../../mixins/ListenerMixin');
21 |
22 | function getStateFromStores() {
23 | return {
24 | messages: MessageStore.getAllForCurrentThread(),
25 | thread: ThreadStore.getCurrent()
26 | };
27 | }
28 |
29 | function getMessageListItem(message) {
30 | return (
31 |
59 | {unread}
60 |
61 | -
62 | {threadListItems}
63 |
55 |
61 | );
62 | },
63 |
64 | componentDidUpdate: function() {
65 | this._scrollToBottom();
66 | },
67 |
68 | _scrollToBottom: function() {
69 | var ul = this.refs.messageList.getDOMNode();
70 | ul.scrollTop = ul.scrollHeight;
71 | },
72 |
73 | /**
74 | * Event handler for 'change' events coming from the MessageStore
75 | */
76 | _onChange: function() {
77 | this.setState(getStateFromStores());
78 | }
79 |
80 | });
81 |
82 | module.exports = MessageSection;
83 |
--------------------------------------------------------------------------------
/examples/chat/js/stores/MessageStore.js:
--------------------------------------------------------------------------------
1 | var alt = require('../alt')
2 |
3 | var ChatThreadActionCreators = require('../actions/ChatThreadActionCreators')
4 | var ChatServerActionCreators = require('../actions/ChatServerActionCreators')
5 | var ChatMessageActionCreators = require('../actions/ChatMessageActionCreators')
6 | var ThreadStore = require('../stores/ThreadStore')
7 | var ChatMessageDataUtils = require('../utils/ChatMessageDataUtils')
8 | var ChatMessageUtils = require('../utils/ChatMessageUtils')
9 |
10 | class MessageStore {
11 | constructor() {
12 | this.bindActions(ChatThreadActionCreators)
13 | this.bindActions(ChatMessageActionCreators)
14 | this.bindActions(ChatServerActionCreators)
15 |
16 | this.messages = {}
17 | }
18 |
19 | onCreateMessage(text) {
20 | var message = ChatMessageDataUtils.getCreatedMessageData(text)
21 | this.messages[message.id] = message
22 | }
23 |
24 | onReceiveAll(rawMessages) {
25 | this._addMessages(rawMessages)
26 | this.waitFor([ThreadStore.dispatchToken])
27 | this._markAllInThreadRead(ThreadStore.getCurrentID())
28 | }
29 |
30 | onClickThread() {
31 | this.waitFor([ThreadStore.dispatchToken])
32 | this._markAllInThreadRead(ThreadStore.getCurrentID())
33 | }
34 |
35 | _addMessages(rawMessages) {
36 | rawMessages.forEach((message) => {
37 | if (!this.messages[message.id]) {
38 | this.messages[message.id] = ChatMessageUtils.convertRawMessage(
39 | message,
40 | ThreadStore.getCurrentID()
41 | )
42 | }
43 | })
44 | }
45 |
46 | _markAllInThreadRead(threadID) {
47 | for (var id in this.messages) {
48 | if (this.messages[id].threadID === threadID) {
49 | this.messages[id].isRead = true
50 | }
51 | }
52 | }
53 |
54 | static getAllForThread(threadID) {
55 | var threadMessages = []
56 | var _messages = this.getState().messages
57 | for (var id in _messages) {
58 | if (_messages[id].threadID === threadID) {
59 | threadMessages.push(_messages[id])
60 | }
61 | }
62 | threadMessages.sort(function(a, b) {
63 | if (a.date < b.date) {
64 | return -1
65 | } else if (a.date > b.date) {
66 | return 1
67 | }
68 | return 0
69 | })
70 | return threadMessages
71 | }
72 |
73 | static getAllForCurrentThread() {
74 | return this.getAllForThread(ThreadStore.getCurrentID())
75 | }
76 |
77 | static get(id) {
78 | return this.getState().messages[id]
79 | }
80 |
81 | static getAll() {
82 | return this.getState().messages
83 | }
84 | }
85 |
86 | module.exports = alt.createStore(MessageStore, 'MessageStore')
87 |
--------------------------------------------------------------------------------
/examples/chat/js/ChatExampleData.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file is provided by Facebook for testing and evaluation purposes
3 | * only. Facebook reserves all rights not expressly granted.
4 | *
5 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
9 | * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | */
12 |
13 | module.exports = {
14 |
15 | init: function() {
16 | localStorage.clear();
17 | localStorage.setItem('messages', JSON.stringify([
18 | {
19 | id: 'm_1',
20 | threadID: 't_1',
21 | threadName: 'Jing and Bill',
22 | authorName: 'Bill',
23 | text: 'Hey Jing, want to give a Flux talk at ForwardJS?',
24 | timestamp: Date.now() - 99999
25 | },
26 | {
27 | id: 'm_2',
28 | threadID: 't_1',
29 | threadName: 'Jing and Bill',
30 | authorName: 'Bill',
31 | text: 'Seems like a pretty cool conference.',
32 | timestamp: Date.now() - 89999
33 | },
34 | {
35 | id: 'm_3',
36 | threadID: 't_1',
37 | threadName: 'Jing and Bill',
38 | authorName: 'Jing',
39 | text: 'Sounds good. Will they be serving dessert?',
40 | timestamp: Date.now() - 79999
41 | },
42 | {
43 | id: 'm_4',
44 | threadID: 't_2',
45 | threadName: 'Dave and Bill',
46 | authorName: 'Bill',
47 | text: 'Hey Dave, want to get a beer after the conference?',
48 | timestamp: Date.now() - 69999
49 | },
50 | {
51 | id: 'm_5',
52 | threadID: 't_2',
53 | threadName: 'Dave and Bill',
54 | authorName: 'Dave',
55 | text: 'Totally! Meet you at the hotel bar.',
56 | timestamp: Date.now() - 59999
57 | },
58 | {
59 | id: 'm_6',
60 | threadID: 't_3',
61 | threadName: 'Functional Heads',
62 | authorName: 'Bill',
63 | text: 'Hey Brian, are you going to be talking about functional stuff?',
64 | timestamp: Date.now() - 49999
65 | },
66 | {
67 | id: 'm_7',
68 | threadID: 't_3',
69 | threadName: 'Bill and Brian',
70 | authorName: 'Brian',
71 | text: 'At ForwardJS? Yeah, of course. See you there!',
72 | timestamp: Date.now() - 39999
73 | }
74 | ]));
75 | }
76 |
77 | };
78 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "alt",
3 | "version": "0.17.1",
4 | "description": "A flux implementation",
5 | "main": "lib",
6 | "dependencies": {
7 | "flux": "2.0.3",
8 | "transmitter": "1.0.2"
9 | },
10 | "devDependencies": {
11 | "alt-search-docs": "1.0.6",
12 | "babel": "5.6.14",
13 | "babel-core": "5.6.15",
14 | "babel-eslint": "3.1.18",
15 | "babel-loader": "^5.1.4",
16 | "babelify": "6.1.2",
17 | "chai": "^2.3.0",
18 | "coveralls": "^2.11.2",
19 | "envify": "^3.4.0",
20 | "es6-promise": "^2.1.1",
21 | "eslint": "^0.24.0",
22 | "eslint-plugin-react": "2.5.2",
23 | "ghooks": "^0.3.2",
24 | "immutable": "^3.7.2",
25 | "iso": "^4.1.0",
26 | "istanbul": "^0.3.14",
27 | "jsdom": "^3.1.2",
28 | "lunr": "^0.5.9",
29 | "mocha": "^2.2.4",
30 | "object-assign": "^2.0.0",
31 | "react": "^0.13.3",
32 | "rimraf": "^2.3.2",
33 | "sinon": "^1.14.0",
34 | "webpack": "^1.9.12"
35 | },
36 | "repository": {
37 | "type": "git",
38 | "url": "https://github.com/goatslacker/alt.git"
39 | },
40 | "authors": [
41 | "Josh Perez {this.state.thread.name}
56 |-
57 | {messageListItems}
58 |
44 |
66 | );
67 | },
68 |
69 | componentDidMount: function() {
70 | // we load San Francisco, CA on page load as an example
71 | AppActions.addLocation('San Francisco, CA, USA');
72 | },
73 |
74 | _onClickSubmit: function(e) {
75 | e.preventDefault();
76 | AppActions.addLocation(e.target.children[0].value.trim());
77 | },
78 |
79 | _onClickLocation: function(location) {
80 | AppActions.setLocation(location);
81 | }
82 | });
83 |
--------------------------------------------------------------------------------
/docs/errors.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Errors and How to Fix
4 | description: Errors encountered when developing a flux application with Alt
5 | permalink: /docs/errors/
6 | ---
7 |
8 | # Typical Alt Errors
9 |
10 | * throw new ReferenceError('Store provided does not have a name')
11 |
12 | If you're trying to prepare a store for bootstrap and it doesn't have a displayName property or it is blank then this error will be thrown. A store name is required in order to bootstrap. If you encounter this error then you're probably trying to prepare a non-store, or your store was missing a name in the first place.
13 |
14 | * throw new ReferenceError('Dispatch tokens not provided')
15 |
16 | waitFor expects some dispatch tokens (returned by the dispatcher/attached to your stores) otherwise it won't know what to wait for.
17 |
18 | * throw new Error(`${handler} handler must be an action function`)
19 |
20 | This is called whenever you're trying to add a non-action to success/loading/error in your data source. An action is required. This doesn't accept callbacks.
21 |
22 | * throw new TypeError('exportPublicMethods expects a function')
23 |
24 | Called whenever exportPublicMethods encounters a non-function passed in. It's called exportPublic**Methods** not exportPublicWhateverYouWant.
25 |
26 | * throw new ReferenceError('Invalid action reference passed in')
27 |
28 | Whenever you're trying to bind an action that isn't really an action. Check where you're binding the actions, you probably passed in the wrong object.
29 |
30 | * throw new TypeError('bindAction expects a function')
31 |
32 | If you're binding an action to anything other than a function. A function is what handles the action.
33 |
34 | * throw new TypeError(
35 | `Action handler in store ${this.displayName} for ` +
36 | `${(symbol.id || symbol).toString()} was defined with ` +
37 | `two parameters. Only a single parameter is passed through the ` +
38 | `dispatcher, did you mean to pass in an Object instead?`
39 | )
40 |
41 | Called whenever you define an action handler with an arity > 1. Dispatch only dispatches a single argument through, so this is a check to make sure you're not expecting to handle multiple args in your stores. If you need to pass in more than 1 item then put it in a data structure.
42 |
43 | * throw new ReferenceError(
44 | `You have multiple action handlers bound to an action: ` +
45 | `${action} and ${assumedEventHandler}`
46 | )
47 |
48 | If you are mistakenly handling the same action twice within your store. Double check your store for methods with the same name or methods that could be handling the same action like for example: onFoo and foo.
49 |
50 | * throw new ReferenceError(
51 | `${methodName} defined but does not exist in ${this.displayName}`
52 | )
53 |
54 | If you define a listener but it doesn't actually exist in your store. Add the method to your store and this will go away.
55 |
56 | * throw new ReferenceError(`${storeName} is not a valid store`)
57 |
58 | Called whenever you're trying to recycle a store that does not exist. Check the recycle call.
59 |
--------------------------------------------------------------------------------
/examples/todomvc/js/components/TodoItem.react.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2014, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | *
9 | * @jsx React.DOM
10 | */
11 |
12 | var React = require('react');
13 | var ReactPropTypes = React.PropTypes;
14 | var TodoActions = require('../actions/TodoActions');
15 | var TodoTextInput = require('./TodoTextInput.react');
16 |
17 | var cx = require('react/lib/cx');
18 |
19 | var TodoItem = React.createClass({
20 |
21 | propTypes: {
22 | todo: ReactPropTypes.object.isRequired
23 | },
24 |
25 | getInitialState: function() {
26 | return {
27 | isEditing: false
28 | };
29 | },
30 |
31 | /**
32 | * @return {object}
33 | */
34 | render: function() {
35 | var todo = this.props.todo;
36 |
37 | var input;
38 | if (this.state.isEditing) {
39 | input =
40 | AltManager - Weather Tabs App
45 |
46 |
65 | 47 | This is an example React/Flux/Alt app that shows the use of AltManager, a 48 | utility class for Alt.js. AltManager allows for multiple alt instances which is 49 | necessary to build apps that encapsulates a mini app inside of a large app. In 50 | this example we have a simple weather searcher. Each search you make will 51 | create a new tab which itself is a new Alt instance and has its own internal 52 | store & actions. Whatever you do in the alt instance is persisted even after 53 | you move to another tab. You can delete tabs which will delete that alt instance 54 |
55 | 62 |- {locationLinks}
60 |
66 |
69 |
70 |
71 | {input}
72 |