├── .gitignore ├── LICENSE.md ├── README.md ├── angular-component ├── .gitignore ├── .npmignore ├── js │ └── greeting.js ├── package.json ├── server.js └── template.jade ├── handlebars-hello ├── .gitignore ├── .npmignore ├── package.json ├── server.js └── template.html ├── jade-hello ├── .gitignore ├── .npmignore ├── package.json ├── server.js └── template.jade ├── moment ├── .gitignore ├── .npmignore ├── package.json └── template.jade ├── nested-hello ├── .gitignore ├── .npmignore ├── package.json ├── server.js └── template.jade ├── node-dependencies ├── .gitignore ├── .npmignore ├── package.json ├── server.js └── template.jade ├── react ├── .gitignore ├── .npmignore ├── package.json ├── server.js └── template.jade ├── static-image ├── .gitignore ├── .npmignore ├── images │ └── oc.png ├── package.json ├── server.js └── template.jade └── styled ├── .gitignore ├── .npmignore ├── css └── style.css ├── package.json ├── server.js └── template.jade /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2018 OpenComponents community 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | oc-components-examples 2 | ====================== 3 | 4 | [![Join the chat at https://gitter.im/matteofigus/oc-components-examples](https://badges.gitter.im/matteofigus/oc-components-examples.svg)](https://gitter.im/matteofigus/oc-components-examples?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 5 | 6 | This is intended to be a repository with some [OpenComponents](https://github.com/opentable/oc) examples. 7 | 8 | ## Running locally 9 | ```sh 10 | # install oc first (you may want to sudo this) 11 | npm i -g oc 12 | 13 | # clone the repo 14 | git clone https://github.com/matteofigus/oc-components-examples.git 15 | cd oc-components-examples 16 | 17 | # run the dev watcher 18 | oc dev . 3030 19 | 20 | # now open http://localhost:3030 with your browser 21 | ``` 22 | 23 | ## The components 24 | Hello world examples using different view engines: [Handlebars](handlebars-hello) and [Jade](jade-hello). 25 | 26 | ### Static resources 27 | [This example](static-image) shows how to include static resources inside components. When developing locally, the local resources will be used, when the component will be package they will be hosted inside the cdn. When files are `css` or `js` they are automatically minified during the packaging phase. 28 | 29 | ### Server-side dependencies 30 | [This example](node-dependencies) shows how to use a server-side dependency. Server-side dependencies are declared inside `package.json` as usual for a node module. When developing, the CLI will attempt to resolve it and install it automatically. When publishing, it is important to ensure the registry's maintainer allows that dependency to be used in its own registry. If you own the registry's yourself, [here](https://github.com/opentable/oc/blob/master/docs/advanced-operations.md#nodejs-dependencies-on-the-serverjs) you can find more informations about how to configure external dependencies to be used. 31 | 32 | ### Client-side javascript dependencies 33 | [This example](moment) shows how to use a client-side library. The oc client will try to resolve the dependency inside the window global scope. In case the dependency will be found, it will be used, if not it will be downloaded from provided url and then the component rendering phase will start. If you want to require local dependencies you obviously can (look at the previous example). 34 | 35 | ### Styling and client-side css dependencies 36 | If you don't want to do css in-lining, and your component needs some css that is not already on the container, you can require it and you can pause the rendering until the css is loaded and ready. [This example](styled) shows how to require a css file and how to delay the display phase using javascript. 37 | 38 | ### Nesting components 39 | If you want to nest components, you can. [This example](nested-hello) shows how to render a nested component that is hosted in the same registry (but this is not a mandatory requirement). 40 | 41 | ### Angular components as OpenComponents 42 | [This example](angular-component) shows how to create an Angular.js component as OpenComponent. In this way, you can design your Angular app as usual, and use OC purely as delivery mechanism. 43 | 44 | ### React components as OpenComponents 45 | [This example](react) shows how to create a React component as OpenComponent. In this way, you can design your React site as usual, and use OC purely as delivery mechanism. 46 | 47 | ### Can I do ...? How? 48 | [Let me know](https://github.com/matteofigus/oc-components-examples/issues) if you would like more examples about OpenComponents. I will try to update this list adding more and more examples. If you want to ask any question about OC, [open an issue in the OC main repository](https://github.com/opentable/oc). 49 | 50 | ## License 51 | MIT 52 | -------------------------------------------------------------------------------- /angular-component/.gitignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /angular-component/.npmignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /angular-component/js/greeting.js: -------------------------------------------------------------------------------- 1 | (function(angular) { 2 | 'use strict'; 3 | 4 | var myApp = angular.module('myComponentApp', []); 5 | 6 | myApp.controller('GreetingController', ['$scope', function($scope) { 7 | $scope.greeting = 'Hello'; 8 | }]); 9 | 10 | })(window.angular); -------------------------------------------------------------------------------- /angular-component/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-component", 3 | "description": "An OpenComponent that contains an Angular.js app", 4 | "version": "1.0.0", 5 | "repository": "https://github.com/matteofigus/oc-components-examples", 6 | "author": "Matteo Figus ", 7 | "oc": { 8 | "files": { 9 | "data": "server.js", 10 | "template": { 11 | "src": "template.jade", 12 | "type": "jade" 13 | }, 14 | "static": ["js"] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /angular-component/server.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports.data = function(context, callback){ 4 | callback(null, { 5 | staticpath: context.staticPath 6 | }); 7 | }; -------------------------------------------------------------------------------- /angular-component/template.jade: -------------------------------------------------------------------------------- 1 | div#myComponent 2 | div(ng-controller="GreetingController") 3 | p Hello, this is some "static" html 4 | div {{greeting}} 5 | 6 | script. 7 | window.oc = window.oc || {}; 8 | oc.cmd = oc.cmd || []; 9 | 10 | oc.cmd.push(function(oc){ 11 | 12 | // Ensure window.angular is available. If not, it is appended to the head first. 13 | // If multiple oc angular components are in the page, angular will be loaded only once 14 | // and only if it is not there already ;) 15 | 16 | oc.require('angular', 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js', function (angular){ 17 | 18 | // Now we load our Angular controllers 19 | oc.require('#{staticpath}js/greeting.js', function () { 20 | 21 | // Now bootstrap Angular component's root to be recognised as app root 22 | // This is needed to asyncronously load Angular apps - classic approach would be to add an ng-app 23 | // on the element's root but this would make angular to error 24 | 25 | angular.bootstrap($('#myComponent'), ["myComponentApp"]); 26 | 27 | }); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /handlebars-hello/.gitignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /handlebars-hello/.npmignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /handlebars-hello/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "handlebars-hello", 3 | "description": "An hello world OpenComponent using Handlebars as view engine", 4 | "version": "1.0.0", 5 | "repository": "https://github.com/matteofigus/oc-components-examples", 6 | "author": "Matteo Figus ", 7 | "oc": { 8 | "files": { 9 | "data": "server.js", 10 | "template": { 11 | "src": "template.html", 12 | "type": "handlebars" 13 | } 14 | }, 15 | "parameters": { 16 | "name": { 17 | "type": "string", 18 | "mandatory": false, 19 | "example": "John Doe", 20 | "description": "Your name" 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /handlebars-hello/server.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports.data = function(context, callback){ 4 | callback(null, { 5 | name: context.params.name || 'my friend' 6 | }); 7 | }; -------------------------------------------------------------------------------- /handlebars-hello/template.html: -------------------------------------------------------------------------------- 1 |
Hello {{name}}
-------------------------------------------------------------------------------- /jade-hello/.gitignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /jade-hello/.npmignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /jade-hello/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jade-hello", 3 | "description": "An hello world OpenComponent using Jade as view engine", 4 | "version": "1.0.0", 5 | "repository": "https://github.com/matteofigus/oc-components-examples", 6 | "author": "Matteo Figus ", 7 | "oc": { 8 | "files": { 9 | "data": "server.js", 10 | "template": { 11 | "src": "template.jade", 12 | "type": "jade" 13 | } 14 | }, 15 | "parameters": { 16 | "name": { 17 | "type": "string", 18 | "mandatory": false, 19 | "example": "John Doe", 20 | "description": "Your name" 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /jade-hello/server.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports.data = function(context, callback){ 4 | callback(null, { 5 | name: context.params.name || 'my friend' 6 | }); 7 | }; -------------------------------------------------------------------------------- /jade-hello/template.jade: -------------------------------------------------------------------------------- 1 | div hello #{name} -------------------------------------------------------------------------------- /moment/.gitignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /moment/.npmignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /moment/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "moment", 3 | "description": "A component that shows how to require a client-side dependency. The component will download it only if necessary", 4 | "version": "1.0.0", 5 | "repository": "https://github.com/matteofigus/oc-components-examples", 6 | "author": "Matteo Figus ", 7 | "oc": { 8 | "files": { 9 | "template": { 10 | "src": "template.jade", 11 | "type": "jade" 12 | } 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /moment/template.jade: -------------------------------------------------------------------------------- 1 | div.time What time is it? 2 | 3 | script. 4 | window.oc = window.oc || {}; 5 | oc.cmd = oc.cmd || []; 6 | 7 | oc.cmd.push(function(oc){ 8 | var momentUrl = 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.js'; 9 | 10 | oc.require('moment', momentUrl, function(moment){ 11 | $('.time').append(moment().format('HH:mm')); 12 | }); 13 | 14 | }); -------------------------------------------------------------------------------- /nested-hello/.gitignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /nested-hello/.npmignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /nested-hello/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nested-hello", 3 | "description": "This shows how to nest components published in the same registry", 4 | "version": "1.0.0", 5 | "repository": "https://github.com/matteofigus/oc-components-examples", 6 | "author": "Matteo Figus ", 7 | "oc": { 8 | "files": { 9 | "data": "server.js", 10 | "template": { 11 | "src": "template.jade", 12 | "type": "jade" 13 | } 14 | }, 15 | "parameters": { 16 | "name": { 17 | "type": "string", 18 | "mandatory": false, 19 | "example": "John Doe", 20 | "description": "Your name" 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /nested-hello/server.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports.data = function(context, callback){ 4 | callback(null, { 5 | name: context.params.name, 6 | baseUrl: context.baseUrl 7 | }); 8 | }; -------------------------------------------------------------------------------- /nested-hello/template.jade: -------------------------------------------------------------------------------- 1 | div This is how you can nest two components published in the same registry! 2 | oc-component(href=baseUrl+'jade-hello' + (!!name ? '?name=' + name : '')) -------------------------------------------------------------------------------- /node-dependencies/.gitignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /node-dependencies/.npmignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /node-dependencies/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "node-dependencies", 3 | "description": "A component that shows how to require and use a server-side dependency", 4 | "version": "1.0.0", 5 | "repository": "https://github.com/matteofigus/oc-components-examples", 6 | "author": "Matteo Figus ", 7 | "dependencies": { 8 | "request": "" 9 | }, 10 | "oc": { 11 | "files": { 12 | "data": "server.js", 13 | "template": { 14 | "src": "template.jade", 15 | "type": "jade" 16 | } 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /node-dependencies/server.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var request = require('request'); 4 | 5 | module.exports.data = function(context, callback){ 6 | request({ 7 | url: 'https://raw.githubusercontent.com/opentable/oc/master/package.json', 8 | json: true, 9 | timeout: 2000 10 | }, function(err, res, body){ 11 | if(err){ return callback(null, { error: true }); } 12 | 13 | callback(null, { version: body.version }); 14 | }); 15 | }; -------------------------------------------------------------------------------- /node-dependencies/template.jade: -------------------------------------------------------------------------------- 1 | if error 2 | span The component had some problem while making an external request 3 | else 4 | span The latest version of the OC framework is #{version} -------------------------------------------------------------------------------- /react/.gitignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /react/.npmignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react", 3 | "description": "An OpenComponent that contains a React component", 4 | "version": "1.0.0", 5 | "repository": "https://github.com/matteofigus/oc-components-examples", 6 | "author": "Matteo Figus ", 7 | "oc": { 8 | "files": { 9 | "data": "server.js", 10 | "template": { 11 | "src": "template.jade", 12 | "type": "jade" 13 | } 14 | }, 15 | "parameters": { 16 | "name": { 17 | "type": "string", 18 | "mandatory": false, 19 | "example": "John Doe", 20 | "description": "Your name" 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /react/server.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports.data = function(context, callback){ 4 | callback(null, { 5 | name: context.params.name || 'World' 6 | }); 7 | }; -------------------------------------------------------------------------------- /react/template.jade: -------------------------------------------------------------------------------- 1 | #container 2 | 3 | script. 4 | window.oc = window.oc || {}; 5 | oc.cmd = oc.cmd || []; 6 | 7 | oc.cmd.push(function(oc){ 8 | oc.require('React', 'https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js', function(React){ 9 | oc.require('ReactDOM', 'https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js', function(ReactDOM){ 10 | 11 | var Hello = React.createClass({ 12 | displayName: 'Hello', 13 | render: function() { 14 | return React.createElement('div', null, 'Hello ', this.props.name); 15 | } 16 | }); 17 | 18 | ReactDOM.render( 19 | React.createElement(Hello, {name: '#{name}'}), 20 | document.getElementById('container') 21 | ); 22 | }); 23 | }); 24 | }); -------------------------------------------------------------------------------- /static-image/.gitignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /static-image/.npmignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /static-image/images/oc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opencomponents/oc-components-examples/f3edfe73f0b490986bfead247bd227ff4ee71a49/static-image/images/oc.png -------------------------------------------------------------------------------- /static-image/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "static-image", 3 | "description": "An OpenComponent that shows how to include a static image inside a component", 4 | "version": "1.0.0", 5 | "repository": "https://github.com/matteofigus/oc-components-examples", 6 | "author": "Matteo Figus ", 7 | "oc": { 8 | "files": { 9 | "data": "server.js", 10 | "template": { 11 | "src": "template.jade", 12 | "type": "jade" 13 | }, 14 | "static": ["images"] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /static-image/server.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports.data = function(context, callback){ 4 | callback(null, { 5 | staticPath: context.staticPath 6 | }); 7 | }; -------------------------------------------------------------------------------- /static-image/template.jade: -------------------------------------------------------------------------------- 1 | img(src=staticPath+'images/oc.png') -------------------------------------------------------------------------------- /styled/.gitignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /styled/.npmignore: -------------------------------------------------------------------------------- 1 | _package 2 | package.tar.gz 3 | node_modules -------------------------------------------------------------------------------- /styled/css/style.css: -------------------------------------------------------------------------------- 1 | #my-styled-component { 2 | color: red; 3 | float: left; 4 | background-color: yellow; 5 | } 6 | 7 | #my-styled-component p { 8 | font-weight: bold; 9 | } -------------------------------------------------------------------------------- /styled/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "styled", 3 | "description": "A component that shows how to require a css dependency. It also waits the css to be ready so that it comes out styled already", 4 | "version": "1.0.0", 5 | "repository": "https://github.com/matteofigus/oc-components-examples", 6 | "author": "Matteo Figus ", 7 | "oc": { 8 | "files": { 9 | "data": "server.js", 10 | "template": { 11 | "src": "template.jade", 12 | "type": "jade" 13 | }, 14 | "static": ["css"] 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /styled/server.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports.data = function(context, callback){ 4 | callback(null, { 5 | staticPath: context.staticPath 6 | }); 7 | }; -------------------------------------------------------------------------------- /styled/template.jade: -------------------------------------------------------------------------------- 1 | #my-styled-component(style="display:none;") 2 | p Hello! 3 | span this is a component that needs css to be properly shown. 4 | 5 | script. 6 | window.oc = window.oc || {}; 7 | oc.cmd = oc.cmd || []; 8 | 9 | oc.cmd.push(function(oc){ 10 | oc.require('#{staticPath}css/style.css', function(){ 11 | $('#my-styled-component').css('display', 'block'); 12 | }); 13 | }); --------------------------------------------------------------------------------