├── LICENSE └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Anton Wilhelm 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | c8-experiments 2 | ============== 3 | 4 | This repo shows how you can use [component](https://github.com/componentjs/component) (1.x) 5 | 6 | I showed these examples at my talk @ [Berlin.JS (2014-06-19)](https://speakerdeck.com/timaschew/component-and-other-front-end-package-manager) 7 | 8 | Each example is on its own branch. 9 | Starting with an empty project and do a progress step by step. 10 | 11 | ### clone and do step by step 12 | 1. clone this repo: `https://github.com/timaschew/c8-experiments.git` 13 | 2. change the directory `cd c8-experiments` 14 | 3. start with first example: `git checkout e1` then `npm install` 15 | 5. next one: `git checkout e2` then `component-build` 16 | 6. etcetera 17 | 18 | ### examples 19 | 20 | - [e1](https://github.com/timaschew/c8-experiments/tree/e1) - install component 21 | - [e2](https://github.com/timaschew/c8-experiments/tree/e2) - use a JS script 22 | - [e3](https://github.com/timaschew/c8-experiments/tree/e3) - use CSS 23 | - [e4](https://github.com/timaschew/c8-experiments/tree/e4) - use another JS file 24 | - [e5](https://github.com/timaschew/c8-experiments/tree/e5) - use 3rd party component 25 | - [e6](https://github.com/timaschew/c8-experiments/tree/e6) - add Font Awesome 26 | - [e7](https://github.com/timaschew/c8-experiments/tree/e7) - better directory structure & local component 27 | - [e7a](https://github.com/timaschew/c8-experiments/tree/e7a) - test environment (`component-build --dev`) 28 | - [e8](https://github.com/timaschew/c8-experiments/tree/e8) - add reactive component 29 | - [e9](https://github.com/timaschew/c8-experiments/tree/e9) - reactive with a list 30 | - [e10](https://github.com/timaschew/c8-experiments/tree/e10) - use jade for templating (*) 31 | - [e11](https://github.com/timaschew/c8-experiments/tree/e11) - use express as middleware for generating the build (*) 32 | 33 | ### install steps for each example 34 | 35 | Youn only need to run `npm install` once (except for `e10` and `e11`) 36 | 37 | Because component is installed locally, you cannot access it with `component-build`, but 38 | you can create a temporary alias: `alias component-build='node_modules/.bin/component-build'` otherwise 39 | install it with global option: `npm install component@1.*` 40 | 41 | From `e1` until `e9` just a `component-build` 42 | 43 | `e10` has it's own build script using component API, first install `npm install` then run `node builder.js` 44 | 45 | `e11` uses express to generate the build, install `npm install` and start express `node app.js` 46 | --------------------------------------------------------------------------------