diff --git a/README.md b/README.md
index 561d7159..c22c9f91 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
**Experimental / Proof of concept**
-A React SDK for creating web applications and toolkits. Inspired by `react-native`.
+A React SDK (~8KB gzipped) for creating web applications and toolkits. Inspired by `react-native`.
It includes the following components:
@@ -131,7 +131,7 @@ Returns an object with the specified props included.
## Development
```
-npm run build
-npm run build:watch
-open index.html
+npm install
+npm run build:example:watch
+open example/index.html
```
diff --git a/example.js b/example.js
deleted file mode 100644
index 91fd0e1b..00000000
--- a/example.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { Image, Text, View } from '.';
-
-class Example extends React.Component {
- render() {
- return (
-
- {[1,2,3,4,5,6].map((item) => {
- return (
-
- {item}
-
- );
- })}
-
- );
- }
-}
-
-const style = {
- root: {
- flexDirection: 'row',
- flexWrap: 'wrap',
- height: '100px'
- },
- box: {
- alignItems: 'center',
- backgroundColor: 'lightblue',
- flexGrow: 1,
- justifyContent: 'center',
- borderColor: 'blue',
- borderWidth: '5px'
- },
- boxFull: {
- width: '100%'
- }
-}
-
-React.render(, document.getElementById('react-root'));
diff --git a/example/example.js b/example/example.js
new file mode 100644
index 00000000..8e9aabd4
--- /dev/null
+++ b/example/example.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Image, Text, View } from '../dist/main';
+
+class Example extends React.Component {
+ render() {
+ return (
+
+
+ {[1,2,3,4,5,6].map((item, i) => {
+ return (
+
+ {item}
+
+ );
+ })}
+
+
+
+ This should be centered
+
+
+ );
+ }
+}
+
+const styles = {
+ grid: {
+ flexDirection: 'row',
+ flexWrap: 'wrap'
+ },
+ box: {
+ alignItems: 'center',
+ backgroundColor: 'lightblue',
+ flexGrow: 1,
+ justifyContent: 'center',
+ borderColor: 'blue',
+ borderWidth: '5px'
+ },
+ boxFull: {
+ width: '100%'
+ }
+}
+
+React.render(, document.getElementById('react-root'));
diff --git a/index.html b/example/index.html
similarity index 57%
rename from index.html
rename to example/index.html
index 89320e8a..346e05b0 100644
--- a/index.html
+++ b/example/index.html
@@ -1,6 +1,6 @@
-
+
-
+
diff --git a/example/webpack.config.js b/example/webpack.config.js
new file mode 100644
index 00000000..c377cb0e
--- /dev/null
+++ b/example/webpack.config.js
@@ -0,0 +1,19 @@
+module.exports = {
+ entry: {
+ example: './example.js'
+ },
+ module: {
+ loaders: [
+ {
+ test: /\.jsx?$/,
+ exclude: /node_modules/,
+ loader: 'babel-loader',
+ query: { cacheDirectory: true }
+ }
+ ]
+ },
+ output: {
+ filename: 'example.js',
+ path: '../dist'
+ }
+};
diff --git a/index.js b/index.js
deleted file mode 100644
index 454a592e..00000000
--- a/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {getOtherProps, omitProps, pickProps} from './lib/filterObjectProps';
-import StylePropTypes from './lib/StylePropTypes';
-import Component from './lib/components/Component';
-import Image from './lib/components/Image';
-import Text from './lib/components/Text';
-import View from './lib/components/View';
-
-export default {
- getOtherProps,
- pickProps,
- StylePropTypes,
- Component,
- Image,
- Text,
- View
-};
diff --git a/lib/css/.gitkeep b/lib/css/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/package.json b/package.json
index 047d10b2..ef54c44c 100644
--- a/package.json
+++ b/package.json
@@ -2,18 +2,20 @@
"name": "react-web-sdk",
"version": "0.0.1",
"description": "UI SDK based on react-native",
- "main": "index.js",
+ "main": "dist/main.js",
+ "files": [
+ "dist"
+ ],
"scripts": {
- "prebuild": "rm -rf ./dist",
- "build": "npm run build:package & npm run build:example",
- "build:example": "webpack index.js ./dist/main.js --config webpack.config.js",
- "build:example:watch": "npm run build:example -- --watch",
- "build:package": "webpack example.js ./dist/example.js --config webpack.config.js",
- "build:package:watch": "npm run build:package -- --watch",
- "build:watch": "npm run build:package:watch & npm run build:example:watch"
+ "prebuild": "rm -rf ./dist && npm install",
+ "build": "webpack --config webpack.config.js",
+ "build:watch": "npm run build -- --watch",
+ "build:example": "npm run build && cd example && webpack --config ./webpack.config.js",
+ "build:example:watch": "npm run build:example -- --watch"
+ },
+ "dependencies": {
+ "react": "^0.13.3"
},
- "author": "Nicolas Gallagher",
- "license": "MIT",
"devDependencies": {
"autoprefixer-core": "^5.2.0",
"babel-core": "^5.5.6",
@@ -26,7 +28,10 @@
"style-loader": "^0.12.3",
"webpack": "^1.9.10"
},
- "dependencies": {
- "react": "^0.13.3"
+ "author": "Nicolas Gallagher",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "git://github.com/necolas/react-web-sdk.git"
}
}
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 00000000..a33db183
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,17 @@
+import { getOtherProps, omitProps, pickProps } from './modules/filterObjectProps';
+import WebStyleComponent from './modules/WebStyleComponent';
+import StylePropTypes from './modules/StylePropTypes';
+import Image from './modules/Image';
+import Text from './modules/Text';
+import View from './modules/View';
+
+export default {
+ getOtherProps,
+ omitProps,
+ pickProps,
+ StylePropTypes,
+ WebStyleComponent,
+ Image,
+ Text,
+ View
+};
diff --git a/lib/components/Image.js b/src/modules/Image/index.js
similarity index 88%
rename from lib/components/Image.js
rename to src/modules/Image/index.js
index 1e1f4e6f..287ccc10 100644
--- a/lib/components/Image.js
+++ b/src/modules/Image/index.js
@@ -1,7 +1,7 @@
-import Component from './Component';
-import {pickProps} from '../filterObjectProps';
-import React, {PropTypes} from 'react';
+import { pickProps } from '../filterObjectProps';
import StylePropTypes from '../StylePropTypes';
+import React, { PropTypes } from 'react';
+import WebStyleComponent from '../WebStyleComponent';
const ImageStyleDefaultProps = {
backgroundColor: 'lightGray',
@@ -43,7 +43,7 @@ class Image extends React.Component {
const mergedStyle = { ...ImageStyleDefaultProps, ...filteredStyle };
return (
-
);
@@ -63,4 +62,4 @@ Text.propTypes = Text._getPropTypes();
Text.defaultProps = Text._getDefaultProps();
export default Text;
-export {TextStylePropTypes};
+export { TextStylePropTypes };
diff --git a/lib/components/View.js b/src/modules/View/index.js
similarity index 89%
rename from lib/components/View.js
rename to src/modules/View/index.js
index 64dcb58f..c923987e 100644
--- a/lib/components/View.js
+++ b/src/modules/View/index.js
@@ -1,7 +1,7 @@
-import Component from './Component';
-import {pickProps} from '../filterObjectProps';
-import React, {PropTypes} from 'react';
+import { pickProps } from '../filterObjectProps';
import StylePropTypes from '../StylePropTypes';
+import React, { PropTypes } from 'react';
+import WebStyleComponent from '../WebStyleComponent';
// https://github.com/facebook/css-layout#default-values
const ViewStyleDefaultProps = {
@@ -64,7 +64,7 @@ class View extends React.Component {
};
return (
-