support for css for react native

.travis.yml

@@ -6,14 +6,14 @@ node_js:
 
 sudo: false
 
-before_script:
-  - npm install -g grunt-cli
+#before_script:
+#  - npm install -g grunt-cli
 
 install:
   - npm install
 
 script:
-  - grunt eslint
+  - npm run lint
   - npm run test-cov
 
 branches:
@@ -23,4 +23,4 @@ branches:
 #    - npm run coveralls
 
 #after_success:
-#  - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
+#  - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js

docs/native.md

@@ -1,4 +1,4 @@
-# React Template for Native Apps
+# React Templates for Native Apps
 
 In order to use React Templates for [React Native](https://facebook.github.io/react-native/) you should set the `native` option to true.
 In native mode the default `modules` option is set to `commonjs` and the default `react-import-path` is set to `react-native`.
@@ -78,3 +78,46 @@ module.exports = function () {
 };
 ```
 
+## Native style support
+
+This feature is **Experimental** and is subject to change.
+
+You can use rt to compile a style file similar to css:
+
+```
+.text {
+    background-color: #00346E;
+    padding: 3px;
+}
+
+.fonts {
+    background-color: #000099;
+    height: 30px;
+}
+```
+
+will result in:
+
+```javascript
+'use strict';
+var style = {
+  "text": {
+    "backgroundColor": "#00346E",
+    "padding": 3
+  },
+  "fonts": {
+    "backgroundColor": "#000099",
+    "height": 30
+  }
+};
+module.exports = style;
+```
+
+Which later you can import in your react native component:
+
+```javascript
+var styles = StyleSheet.create(require('./style.rts'))
+```
+
+
+

package.json

@@ -7,14 +7,15 @@
     "rt": "./bin/rt.js"
   },
   "scripts": {
-    "all": "npm run lint && npm run test",
+    "prepublish": "npm run build",
+    "build": "npm run lint && npm run test",
     "lint": "eslint .",
     "test": "node test/src/test.js",
     "test-cov": "istanbul cover test/src/test.js -- --require test/support/env --reporter dot --check-leaks test/ test/acceptance/",
     "patch": "npm version patch -m\"update version to %s\" && git push && git push --tags",
     "minor": "npm version minor -m\"update version to %s\" && git push && git push --tags",
     "major": "npm version major -m\"update version to %s\" && git push && git push --tags",
-    "build": "webpack --config webpack-production.config.js --progress --profile --colors"
+    "buildwp": "webpack --config webpack-production.config.js --progress --profile --colors"
   },
   "repository": {
     "type": "git",
@@ -40,13 +41,13 @@
     "brace": "^0.5.1",
     "brfs": "^1.4.1",
     "coveralls": "^2.11.4",
-    "eslint-plugin-lodash3": "^0.1.12",
+    "eslint-plugin-lodash3": "^0.1.13",
     "eslint-plugin-react": "^3.6.3",
     "eslint-plugin-wix-editor": "^1.0.1",
     "grunt": "^0.4.5",
     "grunt-browserify": "^4.0.0",
     "grunt-contrib-requirejs": "^0.4.4",
-    "grunt-contrib-uglify": "^0.9.2",
+    "grunt-contrib-uglify": "^0.10.0",
     "grunt-contrib-watch": "^0.6.1",
     "grunt-eslint": "^17.3.1",
     "grunt-node-tap": "^0.1.61",

src/api.js

@@ -29,6 +29,14 @@ function convertFile(source, target, options, context) {
     }
 
     var html = fs.readFileSync(source).toString();
+    if (path.extname(source) === '.rts') {
+        var rtStyle = require('./rtStyle');
+        var out = rtStyle.convert(html);
+        if (!options.dryRun) {
+            fs.writeFileSync(target, out);
+        }
+        return;
+    }
     var shouldAddName = options.modules === 'none' && !options.name;
     if (shouldAddName) {
         options.name = reactTemplates.normalizeName(path.basename(source, path.extname(source))) + 'RT';

src/cli.js

@@ -1,7 +1,4 @@
 #!/usr/bin/env node
-/**
- * Created by idok on 11/10/14.
- */
 'use strict';
 var _ = require('lodash');
 var path = require('path');
@@ -47,7 +44,6 @@ function printVersions(currentOptions) {
 }
 
 /**
- * @param {CONTEXT} context
  * @param {*} currentOptions
  * @param {string} filename file name to process
  */
@@ -56,14 +52,13 @@ function handleSingleFile(currentOptions, filename) {
         var sourceExt = path.extname(filename);
         var outputFilename;
         if (sourceExt === '.rt') {
-            if (currentOptions.modules !== 'typescript') {
-                outputFilename = filename + '.js';
-            } else {
-                outputFilename = filename + '.ts';
-            }
+            outputFilename = filename + (currentOptions.modules === 'typescript' ? '.ts' : '.js');
         } else if (sourceExt === '.jsrt') {
             outputFilename = filename.replace(/\.jsrt$/, '.js');
             currentOptions = _.assign({}, currentOptions, {modules: 'jsrt'});
+        } else if (sourceExt === '.rts') {
+            outputFilename = filename + '.js';
+            currentOptions = _.assign({}, currentOptions, {modules: 'rts'});
         } else {
             context.error('invalid file, only handle rt/jsrt files', filename);
             return;
@@ -96,4 +91,4 @@ module.exports = {
     executeOptions: executeOptions,
     handleSingleFile: handleSingleFile,
     convertTemplateToReact: reactTemplates.convertTemplateToReact
-};
+};

src/reactTemplates.js

@@ -396,12 +396,12 @@ function convertHtmlToReact(node, context) {
                     return;
                 }
 
-                var scopeSubParts = scopePart.split(' as ');
+                var scopeSubParts = _(scopePart).split(' as ').invoke('trim').value();
                 if (scopeSubParts.length < 2) {
                     throw RTCodeError.buildFormat(context, node, "invalid scope part '%s'", scopePart);
                 }
-                var alias = scopeSubParts[1].trim();
-                var value = scopeSubParts[0].trim();
+                var alias = scopeSubParts[1];
+                var value = scopeSubParts[0];
 
                 validateJS(alias, node, context);
 

test/src/util.js

@@ -1,6 +1,7 @@
 'use strict';
 var cheerio = require('cheerio');
 var fs = require('fs');
+var path = require('path');
 
 /**
  * @param {string} html
@@ -34,11 +35,27 @@ function compareAndWrite(t, actual, expected, filename) {
  * @return {string}
  */
 function readFileNormalized(filename) {
-    return fs.readFileSync(filename).toString().replace(/\r/g, '').trim();
+    return readFile(filename).replace(/\r/g, '').trim();
+}
+
+//var dataPath = path.resolve(__dirname, '..', 'data');
+/**
+ * @param {string} filename
+ * @return {string}
+ */
+function readFile(filename) {
+    return fs.readFileSync(filename).toString();
+}
+
+function joinDataPath(fileName) {
+    var dataPath = path.resolve(__dirname, '..', 'data');
+    return path.join(dataPath, fileName);
 }
 
 module.exports = {
     normalizeHtml: normalizeHtml,
     compareAndWrite: compareAndWrite,
-    readFileNormalized: readFileNormalized
-};
+    readFileNormalized: readFileNormalized,
+    readFile: readFile,
+    joinDataPath: joinDataPath
+};