├── README.md ├── dist ├── jspm-react-component.js └── package.json ├── jspm.browser.js ├── jspm.config.js ├── package.json ├── src ├── component.js ├── de │ └── text.js ├── en │ └── text.js ├── es │ └── text.js └── zh │ └── text.js ├── test.html └── test.js /README.md: -------------------------------------------------------------------------------- 1 | Demonstration project to go along with the jspm 0.17 beta release guide. 2 | 3 | ### Usage 4 | 5 | ``` 6 | git clone git@github.com:guybedford/jspm-react-component-demo 7 | cd jspm-react-component-demo 8 | npm install -g jspm@beta 9 | jspm install 10 | ``` -------------------------------------------------------------------------------- /dist/jspm-react-component.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) : 3 | typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) : 4 | (factory((global.jspmReactComponent = global.jspmReactComponent || {}),global.React)); 5 | }(this, function (exports,React) { 'use strict'; 6 | 7 | React = 'default' in React ? React['default'] : React; 8 | 9 | var _classCallCheck = (function (instance, Constructor) { 10 | if (!(instance instanceof Constructor)) { 11 | throw new TypeError("Cannot call a class as a function"); 12 | } 13 | }) 14 | 15 | function defineProperties(target, props) { 16 | for (var i = 0; i < props.length; i++) { 17 | var descriptor = props[i]; 18 | descriptor.enumerable = descriptor.enumerable || false; 19 | descriptor.configurable = true; 20 | if ("value" in descriptor) descriptor.writable = true; 21 | Object.defineProperty(target, descriptor.key, descriptor); 22 | } 23 | } 24 | 25 | function _createClass (Constructor, protoProps, staticProps) { 26 | if (protoProps) defineProperties(Constructor.prototype, protoProps); 27 | if (staticProps) defineProperties(Constructor, staticProps); 28 | return Constructor; 29 | }; 30 | 31 | var _possibleConstructorReturn = (function (self, call) { 32 | if (!self) { 33 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 34 | } 35 | 36 | return call && (typeof call === "object" || typeof call === "function") ? call : self; 37 | }) 38 | 39 | var _inherits = (function (subClass, superClass) { 40 | if (typeof superClass !== "function" && superClass !== null) { 41 | throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); 42 | } 43 | 44 | subClass.prototype = Object.create(superClass && superClass.prototype, { 45 | constructor: { 46 | value: subClass, 47 | enumerable: false, 48 | writable: true, 49 | configurable: true 50 | } 51 | }); 52 | if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 53 | }) 54 | 55 | var HelloWorld = function (_React$Component) { 56 | _inherits(HelloWorld, _React$Component); 57 | 58 | function HelloWorld() { 59 | _classCallCheck(this, HelloWorld); 60 | 61 | return _possibleConstructorReturn(this, Object.getPrototypeOf(HelloWorld).apply(this, arguments)); 62 | } 63 | 64 | _createClass(HelloWorld, [{ 65 | key: 'render', 66 | value: function render() { 67 | return React.createElement( 68 | 'h1', 69 | null, 70 | 'Hello World' 71 | ); 72 | } 73 | }]); 74 | 75 | return HelloWorld; 76 | }(React.Component); 77 | 78 | exports.HelloWorld = HelloWorld; 79 | 80 | })); -------------------------------------------------------------------------------- /dist/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jspm-react-component-demo", 3 | "version": "0.1.1", 4 | "registry": "npm", 5 | "peerDependencies": { 6 | "react": "^0.14.6" 7 | }, 8 | "jspmPackage": true, 9 | "main": "jspm-react-component.js", 10 | "format": "amd" 11 | } 12 | -------------------------------------------------------------------------------- /jspm.browser.js: -------------------------------------------------------------------------------- 1 | SystemJS.config({ 2 | baseURL: ".", 3 | trace: true, 4 | production: false, 5 | paths: { 6 | "github:*": "jspm_packages/github/*", 7 | "npm:*": "jspm_packages/npm/*", 8 | "jspm-react-component/": "src/" 9 | } 10 | }); -------------------------------------------------------------------------------- /jspm.config.js: -------------------------------------------------------------------------------- 1 | SystemJS.config({ 2 | packageConfigPaths: [ 3 | "npm:@*/*.json", 4 | "npm:*.json", 5 | "github:*/*.json" 6 | ], 7 | transpiler: "plugin-babel", 8 | 9 | map: { 10 | "babel-plugin-transform-react-jsx": "npm:babel-plugin-transform-react-jsx@6.4.0", 11 | "buffer": "github:jspm/nodelibs-buffer@0.2.0-alpha", 12 | "core-js": "npm:core-js@1.2.6", 13 | "events": "github:jspm/nodelibs-events@0.2.0-alpha", 14 | "fs": "github:jspm/nodelibs-fs@0.2.0-alpha", 15 | "jspm-react-component-demo": "npm:jspm-react-component-demo@0.1.1", 16 | "module": "github:jspm/nodelibs-module@0.2.0-alpha", 17 | "net": "github:jspm/nodelibs-net@0.2.0-alpha", 18 | "path": "github:jspm/nodelibs-path@0.2.0-alpha", 19 | "plugin-babel": "npm:systemjs-plugin-babel@0.0.5", 20 | "process": "github:jspm/nodelibs-process@0.2.0-alpha", 21 | "react": "npm:react@0.14.6", 22 | "react-dom": "npm:react-dom@0.14.6", 23 | "stream": "github:jspm/nodelibs-stream@0.2.0-alpha", 24 | "systemjs-hot-reloader": "github:capaj/systemjs-hot-reloader@0.5.5", 25 | "tty": "github:jspm/nodelibs-tty@0.2.0-alpha", 26 | "util": "github:jspm/nodelibs-util@0.2.0-alpha" 27 | }, 28 | 29 | packages: { 30 | "jspm-react-component": { 31 | "main": "component.js", 32 | "format": "esm", 33 | "meta": { 34 | "*.js": { 35 | "babelOptions": { 36 | "plugins": [ 37 | "babel-plugin-transform-react-jsx" 38 | ] 39 | } 40 | } 41 | } 42 | }, 43 | "github:capaj/systemjs-hot-reloader@0.5.5": { 44 | "map": { 45 | "debug": "npm:debug@2.2.0", 46 | "socket.io-client": "github:socketio/socket.io-client@1.4.5", 47 | "weakee": "npm:weakee@1.0.0" 48 | } 49 | }, 50 | "github:jspm/nodelibs-buffer@0.2.0-alpha": { 51 | "map": { 52 | "buffer-browserify": "npm:buffer@4.3.0" 53 | } 54 | }, 55 | "github:jspm/nodelibs-stream@0.2.0-alpha": { 56 | "map": { 57 | "stream-browserify": "npm:stream-browserify@2.0.1" 58 | } 59 | }, 60 | "npm:babel-code-frame@6.3.13": { 61 | "map": { 62 | "babel-runtime": "npm:babel-runtime@5.8.34", 63 | "chalk": "npm:chalk@1.1.1", 64 | "esutils": "npm:esutils@2.0.2", 65 | "js-tokens": "npm:js-tokens@1.0.2", 66 | "line-numbers": "npm:line-numbers@0.2.0", 67 | "repeating": "npm:repeating@1.1.3" 68 | } 69 | }, 70 | "npm:babel-helper-builder-react-jsx@6.3.13": { 71 | "map": { 72 | "babel-runtime": "npm:babel-runtime@5.8.34", 73 | "babel-types": "npm:babel-types@6.4.3", 74 | "esutils": "npm:esutils@2.0.2", 75 | "lodash": "npm:lodash@3.10.1" 76 | } 77 | }, 78 | "npm:babel-messages@6.3.18": { 79 | "map": { 80 | "babel-runtime": "npm:babel-runtime@5.8.34" 81 | } 82 | }, 83 | "npm:babel-plugin-syntax-jsx@6.3.13": { 84 | "map": { 85 | "babel-runtime": "npm:babel-runtime@5.8.34" 86 | } 87 | }, 88 | "npm:babel-plugin-transform-react-jsx@6.4.0": { 89 | "map": { 90 | "babel-helper-builder-react-jsx": "npm:babel-helper-builder-react-jsx@6.3.13", 91 | "babel-plugin-syntax-jsx": "npm:babel-plugin-syntax-jsx@6.3.13", 92 | "babel-runtime": "npm:babel-runtime@5.8.34" 93 | } 94 | }, 95 | "npm:babel-traverse@6.3.26": { 96 | "map": { 97 | "babel-code-frame": "npm:babel-code-frame@6.3.13", 98 | "babel-messages": "npm:babel-messages@6.3.18", 99 | "babel-runtime": "npm:babel-runtime@5.8.34", 100 | "babel-types": "npm:babel-types@6.4.3", 101 | "babylon": "npm:babylon@6.4.2", 102 | "debug": "npm:debug@2.2.0", 103 | "globals": "npm:globals@8.18.0", 104 | "invariant": "npm:invariant@2.2.0", 105 | "lodash": "npm:lodash@3.10.1", 106 | "repeating": "npm:repeating@1.1.3" 107 | } 108 | }, 109 | "npm:babel-types@6.4.3": { 110 | "map": { 111 | "babel-runtime": "npm:babel-runtime@5.8.34", 112 | "babel-traverse": "npm:babel-traverse@6.3.26", 113 | "esutils": "npm:esutils@2.0.2", 114 | "lodash": "npm:lodash@3.10.1", 115 | "to-fast-properties": "npm:to-fast-properties@1.0.1" 116 | } 117 | }, 118 | "npm:babylon@6.4.2": { 119 | "map": { 120 | "babel-runtime": "npm:babel-runtime@5.8.34" 121 | } 122 | }, 123 | "npm:buffer@4.3.0": { 124 | "map": { 125 | "base64-js": "npm:base64-js@1.0.2", 126 | "ieee754": "npm:ieee754@1.1.6", 127 | "isarray": "npm:isarray@1.0.0" 128 | } 129 | }, 130 | "npm:chalk@1.1.1": { 131 | "map": { 132 | "ansi-styles": "npm:ansi-styles@2.1.0", 133 | "escape-string-regexp": "npm:escape-string-regexp@1.0.4", 134 | "has-ansi": "npm:has-ansi@2.0.0", 135 | "strip-ansi": "npm:strip-ansi@3.0.0", 136 | "supports-color": "npm:supports-color@2.0.0" 137 | } 138 | }, 139 | "npm:debug@2.2.0": { 140 | "map": { 141 | "ms": "npm:ms@0.7.1" 142 | } 143 | }, 144 | "npm:has-ansi@2.0.0": { 145 | "map": { 146 | "ansi-regex": "npm:ansi-regex@2.0.0" 147 | } 148 | }, 149 | "npm:invariant@2.2.0": { 150 | "map": { 151 | "loose-envify": "npm:loose-envify@1.1.0" 152 | } 153 | }, 154 | "npm:is-finite@1.0.1": { 155 | "map": { 156 | "number-is-nan": "npm:number-is-nan@1.0.0" 157 | } 158 | }, 159 | "npm:line-numbers@0.2.0": { 160 | "map": { 161 | "left-pad": "npm:left-pad@0.0.3" 162 | } 163 | }, 164 | "npm:loose-envify@1.1.0": { 165 | "map": { 166 | "js-tokens": "npm:js-tokens@1.0.2" 167 | } 168 | }, 169 | "npm:react@0.14.6": { 170 | "map": { 171 | "fbjs": "npm:fbjs@0.6.1" 172 | } 173 | }, 174 | "npm:readable-stream@2.0.5": { 175 | "map": { 176 | "core-util-is": "npm:core-util-is@1.0.2", 177 | "inherits": "npm:inherits@2.0.1", 178 | "isarray": "npm:isarray@0.0.1", 179 | "process-nextick-args": "npm:process-nextick-args@1.0.6", 180 | "string_decoder": "npm:string_decoder@0.10.31", 181 | "util-deprecate": "npm:util-deprecate@1.0.2" 182 | } 183 | }, 184 | "npm:repeating@1.1.3": { 185 | "map": { 186 | "is-finite": "npm:is-finite@1.0.1" 187 | } 188 | }, 189 | "npm:stream-browserify@2.0.1": { 190 | "map": { 191 | "inherits": "npm:inherits@2.0.1", 192 | "readable-stream": "npm:readable-stream@2.0.5" 193 | } 194 | }, 195 | "npm:strip-ansi@3.0.0": { 196 | "map": { 197 | "ansi-regex": "npm:ansi-regex@2.0.0" 198 | } 199 | } 200 | } 201 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "jspm": { 3 | "name": "jspm-react-component", 4 | "dependencies": { 5 | "react-dom": "npm:react-dom@^0.14.6" 6 | }, 7 | "devDependencies": { 8 | "babel-plugin-transform-react-jsx": "npm:babel-plugin-transform-react-jsx@^6.4.0", 9 | "plugin-babel": "npm:systemjs-plugin-babel@^0.0.5", 10 | "systemjs-hot-reloader": "github:capaj/systemjs-hot-reloader@^0.5.1" 11 | }, 12 | "peerDependencies": { 13 | "buffer": "github:jspm/nodelibs-buffer@^0.2.0-alpha", 14 | "core-js": "npm:core-js@^1.2.0", 15 | "events": "github:jspm/nodelibs-events@^0.2.0-alpha", 16 | "fs": "github:jspm/nodelibs-fs@^0.2.0-alpha", 17 | "module": "github:jspm/nodelibs-module@^0.2.0-alpha", 18 | "net": "github:jspm/nodelibs-net@^0.2.0-alpha", 19 | "path": "github:jspm/nodelibs-path@^0.2.0-alpha", 20 | "process": "github:jspm/nodelibs-process@^0.2.0-alpha", 21 | "react": "npm:react@^0.14.6", 22 | "stream": "github:jspm/nodelibs-stream@^0.2.0-alpha", 23 | "tty": "github:jspm/nodelibs-tty@^0.2.0-alpha", 24 | "util": "github:jspm/nodelibs-util@^0.2.0-alpha" 25 | }, 26 | "overrides": { 27 | "github:capaj/systemjs-hot-reloader@0.5.5": { 28 | "format": "detect", 29 | "meta": {} 30 | }, 31 | "npm:babel-runtime@5.8.34": { 32 | "main": false, 33 | "dependencies": {}, 34 | "optionalDependencies": { 35 | "core-js": "^1.2.0" 36 | } 37 | }, 38 | "npm:fbjs@0.6.1": { 39 | "dependencies": {} 40 | }, 41 | "npm:inherits@2.0.1": { 42 | "ignore": [ 43 | "test.js" 44 | ] 45 | }, 46 | "npm:react@0.14.6": { 47 | "dependencies": { 48 | "fbjs": "^0.6.1" 49 | }, 50 | "format": "cjs", 51 | "meta": { 52 | "*": { 53 | "globals": { 54 | "process": "process" 55 | } 56 | } 57 | }, 58 | "map": { 59 | "fbjs/lib/ExecutionEnvironment.js": { 60 | "production": "@empty" 61 | }, 62 | "./lib/ReactDefaultPerf.js": { 63 | "production": "@empty" 64 | }, 65 | "./lib/ReactTestUtils.js": { 66 | "production": "@empty" 67 | } 68 | } 69 | } 70 | } 71 | } 72 | } -------------------------------------------------------------------------------- /src/component.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | export class HelloWorld extends React.Component { 3 | render() { 4 | return

Hello World

; 5 | } 6 | } -------------------------------------------------------------------------------- /src/de/text.js: -------------------------------------------------------------------------------- 1 | export default 'Hallo Welt'; -------------------------------------------------------------------------------- /src/en/text.js: -------------------------------------------------------------------------------- 1 | export default 'Hello World'; -------------------------------------------------------------------------------- /src/es/text.js: -------------------------------------------------------------------------------- 1 | export default 'Hola Mundo'; -------------------------------------------------------------------------------- /src/zh/text.js: -------------------------------------------------------------------------------- 1 | export default '你好，世界'; -------------------------------------------------------------------------------- /test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 11 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | import 'systemjs-hot-reloader/default-listener.js'; 2 | 3 | export function __reload(m) { 4 | if (m.component.state) 5 | component.setState(m.component.state); 6 | } 7 | 8 | import React from 'react'; 9 | import ReactDOM from 'react-dom'; 10 | import {HelloWorld} from 'jspm-react-component'; 11 | 12 | let container = document.getElementById('container'); 13 | export let component = ReactDOM.render(React.createElement(HelloWorld), container); --------------------------------------------------------------------------------