├── .gitignore
├── The Frankenstein Framework.key
├── code
    ├── src
    │   ├── frankenstein.js
    │   ├── monsters
    │   │   ├── Frankenstein.js
    │   │   └── FrankensteinComponent.js
    │   └── Router.js
    ├── webpack.config.js
    └── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/The Frankenstein Framework.key:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iammerrick/the-frankenstein-framework/HEAD/The Frankenstein Framework.key


--------------------------------------------------------------------------------
/code/src/frankenstein.js:
--------------------------------------------------------------------------------
 1 | import { Injector } from 'di';
 2 | import React from 'react';
 3 | import 'whatwg-fetch';
 4 | import Router from './Router';
 5 | 
 6 | let injector = new Injector([]);
 7 | let router  = injector.get(Router);
 8 | 
 9 | router.init();
10 | 
11 | 


--------------------------------------------------------------------------------
/code/webpack.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   entry: './src/frankenstein.js',
 3 |   output: {
 4 |     filename: 'frankenstein.js'
 5 |   },
 6 |   module: {
 7 |     loaders: [
 8 |       { test:  /(src)(.+)\.js$/, loader: 'babel-loader?experimental'},
 9 |       { test: /traceur-runtime/, loader: 'imports?this=>window' }
10 |     ]
11 |   } 
12 | };
13 | 


--------------------------------------------------------------------------------
/code/src/monsters/Frankenstein.js:
--------------------------------------------------------------------------------
 1 | import {annotate, TransientScope, Inject} from 'di';
 2 | class Frankenstein {
 3 |   constructor(options) {
 4 |     this.name = options.login; 
 5 |     this.location = options.location;
 6 |     this.blog = options.blog;
 7 |     this.avatar_url = options.avatar_url;
 8 |   }
 9 | }
10 | annotate(Frankenstein, new TransientScope());
11 | annotate(Frankenstein, new Inject('options'));
12 | 
13 | export default Frankenstein;
14 | 


--------------------------------------------------------------------------------
/code/src/Router.js:
--------------------------------------------------------------------------------
 1 | import director from 'director';
 2 | import {annotate, Inject} from 'di';
 3 | import React from 'react';
 4 | import FrankensteinComponent from './monsters/FrankensteinComponent';
 5 | 
 6 | annotate(Router, new Inject(FrankensteinComponent));
 7 | function Router(FrankensteinComponent) {
 8 |   return new director.Router({
 9 |     '/:username': (username) => {
10 |       React.render(<FrankensteinComponent username={username} />, document.body);
11 |     }
12 |   });
13 | }
14 | 
15 | export default Router;
16 | 


--------------------------------------------------------------------------------
/code/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frankenstein-framework",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "di": "^2.0.0-pre-14",
13 |     "director": "^1.2.8",
14 |     "react": "^0.12.2",
15 |     "whatwg-fetch": "^0.7.0"
16 |   },
17 |   "devDependencies": {
18 |     "babel-core": "^4.4.3",
19 |     "babel-loader": "^4.0.0",
20 |     "imports-loader": "^0.6.3",
21 |     "webpack": "^1.5.3"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/code/src/monsters/FrankensteinComponent.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { annotate, InjectLazy }  from 'di';
 3 | import Frankenstein from './Frankenstein';
 4 | 
 5 | annotate(FrankensteinComponent, new InjectLazy(Frankenstein));
 6 | function FrankensteinComponent(createMonster) {
 7 |   return React.createClass({
 8 |     getInitialState() {
 9 |       return {
10 |         loaded: false
11 |       };
12 |     },
13 |     componentWillMount() {
14 |       fetch(`https://api.github.com/users/${this.props.username}`)
15 |         .then((response) => {
16 |           return response.json();
17 |         })
18 |         .then((json) => {
19 |           this.setState({
20 |             user: createMonster('options', json),
21 |             loaded: true
22 |           });
23 |         });
24 |     },
25 |     render() {
26 |       if (!this.state.loaded) return <div>Loading...</div>;
27 | 
28 |       return (
29 |         <div>
30 |           <h1>I am {this.state.user.name}!</h1>
31 |           <div>Location: {this.state.user.location}</div>
32 |           <div>Blog: {this.state.user.blog}</div>
33 |           <div><img src={this.state.user.avatar_url} /></div>
34 |         </div>
35 |       );
36 |     }
37 |   });
38 | }
39 | 
40 | export default FrankensteinComponent;
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # The Frankenstein Framework
  2 | ![The Frankenstein Framework](http://cl.ly/image/322f0t2l3w05/Frakenstein.png)
  3 | 
  4 | # Webpack Example
  5 | 
  6 | ### Install Webpack
  7 | 
  8 | `npm install webpack-dev-server -g`
  9 | 
 10 | 
 11 | ### Configure Webpack
 12 | 
 13 | _webpack.config.js_
 14 | ```javascript
 15 | module.exports = {
 16 |   entry: './src/frankenstein.js',
 17 |   output: {
 18 |     filename: 'frankenstein.js'
 19 |   }
 20 | };
 21 | ```
 22 | 
 23 | ### Make A Source File
 24 | 
 25 | _src/frankenstein.js_
 26 | ```javascript
 27 | console.log('It\'s Alive');
 28 | ```
 29 | 
 30 | ### Run Webpack Development Server
 31 | 
 32 | `webpack-dev-server`
 33 | 
 34 | ### View in [Browser](http://localhost:8080/frankenstein)
 35 | 
 36 | # Integrating Babel
 37 | 
 38 | ### Install babel-loader
 39 | 
 40 | `npm install --save-dev babel-loader`
 41 | 
 42 | ### Configure Webpack
 43 | 
 44 | _webpack.config.js_
 45 | ```javascript
 46 | module.exports = {
 47 | 	entry: './src/frankenstein.js',
 48 | 	output: {
 49 | 		filename: 'frankenstein.js'
 50 | 	},
 51 |   module: {
 52 |     loaders: [
 53 |       { test:  /(src)(.+)\.js$/, loader: 'babel-loader?experimental'}
 54 |     ]
 55 |   }
 56 | };
 57 | ```
 58 | 
 59 | ### Make a Module
 60 | 
 61 | _src/monsters/Frankenstein.js_
 62 | ```javascript
 63 | class Frankenstein {
 64 | 	constructor() {
 65 | 		console.log(`It’s Alive`);
 66 | 	}
 67 | }
 68 | 
 69 | export default Frankenstein;
 70 | ```
 71 | 
 72 | ### Import The Module
 73 | 
 74 | _src/frankenstein.js_
 75 | ```javascript
 76 | import Frankenstein from ‘./monsters/Frankenstein’;
 77 | 
 78 | new Frankenstein();
 79 | ```
 80 | 
 81 | ### View in [Browser](http://localhost:8080/frankenstein)
 82 | 
 83 | # Angular DI
 84 | 
 85 | ### Install Angular DI
 86 | 
 87 | `npm install di@2.0.0-pre-14 --save`
 88 | 
 89 | ### Install Imports Loader
 90 | 
 91 | `npm install imports-loader --save-dev`
 92 | 
 93 | ### Configure Webpack
 94 | 
 95 | _webpack.config.js_
 96 | ```javascript
 97 | module.exports = {
 98 | 	entry: './src/frankenstein.js',
 99 | 	output: {
100 | 		filename: 'frankenstein.js'
101 | 	},
102 |   module: {
103 |     loaders: [
104 |       { test:  /(src)(.+)\.js$/, loader: 'babel-loader?experimental'},
105 |       { test: /traceur-runtime/, loader: 'imports?this=>window' }
106 |     ]
107 |   }
108 | };
109 | ```
110 | 
111 | ### Instantiate an Injector
112 | 
113 | _src/frankenstein.js_
114 | 
115 | ```javascript
116 | import { Injector } from 'di';
117 | import Frankenstein from './monsters/Frankenstein';
118 | 
119 | let injector = new Injector([]);
120 | injector.get(Frankenstein);
121 | ```
122 | 
123 | ### View in [Browser](http://localhost:8080/frankenstein)
124 | 
125 | # React
126 | 
127 | ### Install React
128 | 
129 | `npm install react --save`
130 | 
131 | ### Add A Name To Our Frankenstein Model 
132 | 
133 | _src/monsters/Frankenstein.js_
134 | ```javascript
135 | class Frankenstein {
136 |   constructor() {
137 |     this.name = 'Frankenstein';
138 |   }
139 | }
140 | 
141 | export default Frankenstein;
142 | ```
143 | 
144 | ### Create a FrankensteinComponent Factory
145 | 
146 | _src/monsters/FrankensteinComponent.js_
147 | ```javascript
148 | import React from 'react';
149 | import { annotate, Inject }  from 'di';
150 | import Frankenstein from './Frankenstein';
151 | 
152 | annotate(FrankensteinComponent, new Inject(Frankenstein));
153 | function FrankensteinComponent(monster) {
154 |   return React.createClass({
155 |     render() {
156 |       return <h1>I am {monster.name}!</h1>;
157 |     }
158 |   });
159 | }
160 | 
161 | export default FrankensteinComponent;
162 | ```
163 | 
164 | ### Render A Frankenstein Component
165 | _src/frankenstein.js_
166 | ```javascript
167 | import { Injector } from 'di';
168 | import React from 'react';
169 | import FrankensteinComponent from './monsters/FrankensteinComponent';
170 | 
171 | let injector = new Injector([]);
172 | let Frankenstein = injector.get(FrankensteinComponent);
173 | 
174 | React.render(<Frankenstein />, document.body);
175 | ```
176 | 
177 | # Director Routing
178 | 
179 | ### Install Director
180 | 
181 | `npm install director --save`
182 | 
183 | ### Create a Router
184 | 
185 | _src/Router.js_
186 | ```javascript
187 | import director from 'director';
188 | import {annotate, Inject} from 'di';
189 | import React from 'react';
190 | import FrankensteinComponent from './monsters/FrankensteinComponent';
191 | 
192 | annotate(Router, new Inject(FrankensteinComponent));
193 | function Router(FrankensteinComponent) {
194 |   return new director.Router({
195 |     '/': () => {
196 |       React.render(<FrankensteinComponent />, document.body);
197 |     }
198 |   });
199 | }
200 | 
201 | export default Router;
202 | ```
203 | 
204 | ### Instantiate Our Router
205 | 
206 | _src/frankenstein.js_
207 | ```javascript
208 | import { Injector } from 'di';
209 | import React from 'react';
210 | import Router from './Router';
211 | 
212 | let injector = new Injector([]);
213 | let router  = injector.get(Router);
214 | 
215 | router.init();
216 | ```
217 | 
218 | # fetch Polyfill
219 | 
220 | ### Install The Polyfill
221 | `npm install whatwg-fetch --save`
222 | 
223 | _src/frakenstein.js_
224 | ```javascript
225 | import { Injector } from 'di';
226 | import React from 'react';
227 | import 'whatwg-fetch';
228 | import Router from './Router';
229 | 
230 | let injector = new Injector([]);
231 | let router  = injector.get(Router);
232 | 
233 | router.init();
234 | ```
235 | 
236 | ### Make a Request
237 | _src/monsters/FrankensteinComponent.js_
238 | ```javascript
239 | import React from 'react';
240 | import { annotate, InjectLazy }  from 'di';
241 | import Frankenstein from './Frankenstein';
242 | 
243 | annotate(FrankensteinComponent, new InjectLazy(Frankenstein));
244 | function FrankensteinComponent(createMonster) {
245 |   return React.createClass({
246 |     getInitialState() {
247 |       return {
248 |         loaded: false
249 |       };
250 |     },
251 |     componentWillMount() {
252 |       fetch('https://api.github.com/users/iammerrick')
253 |         .then((response) => {
254 |           return response.json();
255 |         })
256 |         .then((json) => {
257 |           this.setState({
258 |             user: createMonster('options', json),
259 |             loaded: true
260 |           });
261 |         });
262 |     },
263 |     render() {
264 |       if (!this.state.loaded) return <div>Loading...</div>;
265 | 
266 |       return (
267 |         <div>
268 |           <h1>I am {this.state.user.name}!</h1>
269 |           <div>Location: {this.state.user.location}</div>
270 |           <div>Blog: {this.state.user.blog}</div>
271 |           <div><img src={this.state.user.avatar_url} /></div>
272 |         </div>
273 |       );
274 |     }
275 |   });
276 | }
277 | 
278 | export default FrankensteinComponent;
279 | ```
280 | 
281 | ### Flesh Out Our Model
282 | 
283 | _src/monsters/Frankenstein.js_
284 | ```javascript
285 | import {annotate, TransientScope, Inject} from 'di';
286 | class Frankenstein {
287 |   constructor(options) {
288 |     this.name = options.login; 
289 |     this.location = options.location;
290 |     this.blog = options.blog;
291 |     this.avatar_url = options.avatar_url;
292 |   }
293 | }
294 | annotate(Frankenstein, new TransientScope());
295 | annotate(Frankenstein, new Inject('options'));
296 | 
297 | export default Frankenstein;
298 | ```
299 | 
300 | # It's Alive
301 | 
302 | ### Spice it Up
303 | _src/Router.js_
304 | ```javascript
305 | import director from 'director';
306 | import {annotate, Inject} from 'di';
307 | import React from 'react';
308 | import FrankensteinComponent from './monsters/FrankensteinComponent';
309 | 
310 | annotate(Router, new Inject(FrankensteinComponent));
311 | function Router(FrankensteinComponent) {
312 |   return new director.Router({
313 |     '/:username': (username) => {
314 |       React.render(<FrankensteinComponent username={username} />, document.body);
315 |     }
316 |   });
317 | }
318 | 
319 | export default Router;
320 | ```
321 | 
322 | _src/monsters/FrankensteinComponent.js_
323 | ```javascript
324 | import React from 'react';
325 | import { annotate, InjectLazy }  from 'di';
326 | import Frankenstein from './Frankenstein';
327 | 
328 | annotate(FrankensteinComponent, new InjectLazy(Frankenstein));
329 | function FrankensteinComponent(createMonster) {
330 |   return React.createClass({
331 |     getInitialState() {
332 |       return {
333 |         loaded: false
334 |       };
335 |     },
336 |     componentWillMount() {
337 |       fetch(`https://api.github.com/users/${this.props.username}`)
338 |         .then((response) => {
339 |           return response.json();
340 |         })
341 |         .then((json) => {
342 |           this.setState({
343 |             user: createMonster('options', json),
344 |             loaded: true
345 |           });
346 |         });
347 |     },
348 |     render() {
349 |       if (!this.state.loaded) return <div>Loading...</div>;
350 | 
351 |       return (
352 |         <div>
353 |           <h1>I am {this.state.user.name}!</h1>
354 |           <div>Location: {this.state.user.location}</div>
355 |           <div>Blog: {this.state.user.blog}</div>
356 |           <div><img src={this.state.user.avatar_url} /></div>
357 |         </div>
358 |       );
359 |     }
360 |   });
361 | }
362 | 
363 | export default FrankensteinComponent;
364 | ```
365 | 
366 | 


--------------------------------------------------------------------------------