diff --git a/gulpfile.js b/gulpfile.js
index 3a2e754..0403284 100755
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -11,6 +11,28 @@ var sass = require('gulp-sass');
var sourceMaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var sassify = require('sassify');
+var autoprefixify = require('./src/scripts/vendor/autoprefixify');
+
+var sassIncludePaths = [].concat(
+ require('bourbon').includePaths,
+ 'src/styles'
+);
+
+var sassifyOptions = {
+ base64Encode: false,
+ sourceMap: false,
+ sourceMapEmbed: false,
+ sourceMapContents: false,
+ outputStyle: 'compact',
+ includePaths: sassIncludePaths
+};
+
+var autoprefixerOptions = {
+ browsers: ['Android 4', 'iOS 8'],
+ cascade: false
+};
+
+var stringifyOptions = ['.html', '.tpl'];
gulp.task('clean-js', function() {
return del(['tmp/config-page.js']);
@@ -18,7 +40,6 @@ gulp.task('clean-js', function() {
gulp.task('js', ['clean-js'], function() {
return browserify('src/scripts/config-page.js', { debug: true })
- .transform(stringify(['.html', '.tpl']))
.transform('deamdify')
.bundle()
.pipe(source('config-page.js'))
@@ -31,11 +52,10 @@ gulp.task('clean-sass', function() {
gulp.task('sass', ['clean-sass'], function() {
gulp.src('./src/styles/config-page.scss')
.pipe(sourceMaps.init())
- .pipe(sass().on('error', sass.logError))
- .pipe(autoprefixer({
- browsers: ['Android 4', 'iOS 8'],
- cascade: false
- }))
+ .pipe(sass({
+ includePaths: sassIncludePaths
+ }).on('error', sass.logError))
+ .pipe(autoprefixer(autoprefixerOptions))
.pipe(sourceMaps.write('./'))
.pipe(gulp.dest('tmp'));
});
@@ -56,8 +76,13 @@ gulp.task('inlineHtml', ['js', 'sass'], function() {
});
gulp.task('clay', ['inlineHtml'], function() {
- return browserify('index.js', { debug: false })
- .transform(stringify(['.html', '.tpl']))
+ return browserify('index.js', {
+ debug: false,
+ standalone: 'clay'
+ })
+ .transform(stringify(stringifyOptions))
+ .transform(sassify, sassifyOptions)
+ .transform(autoprefixify, autoprefixerOptions)
.require(require.resolve('./index'), {expose: 'pebble-clay'})
.bundle()
.pipe(source('clay.js'))
@@ -65,21 +90,10 @@ gulp.task('clay', ['inlineHtml'], function() {
});
gulp.task('dev-js', ['js', 'sass'], function() {
- return browserify('dev/dev.js', { debug: true, global: true })
- .transform(stringify(['.html', '.tpl']), { global: true })
+ return browserify('dev/dev.js', { debug: true })
+ .transform(stringify(stringifyOptions))
.transform('deamdify')
- .transform(sassify, {
- global: true,
- base64Encode: false,
- sourceMap: false,
- sourceMapEmbed: false,
- sourceMapContents: false,
- outputStyle: 'compact',
- includePaths: [].concat(
- require('bourbon').includePaths,
- 'src/styles'
- )
- })
+ .transform(sassify, sassifyOptions)
.bundle()
.pipe(source('dev.js'))
.pipe(gulp.dest('./tmp/'));
diff --git a/index.js b/index.js
index 64b7b83..2509fa6 100755
--- a/index.js
+++ b/index.js
@@ -1,6 +1,8 @@
'use strict';
var configPageHtml = require('./tmp/config-page.html');
+var toSource = require('tosource');
+var standardComponents = require('./src/scripts/components');
/**
* @param {string} input
@@ -56,16 +58,42 @@ function encodeDataUri(input) {
}
/**
- * @param {array} config - the Clay config
+ * @param {Array} config - the Clay config
* @param {function} [customFn] - custom code to run from the config page.
* Will run with api as context
* @constructor
*/
function Clay(config, customFn) {
- this.config = config;
- this.customFn = customFn || function() {};
+ var self = this;
+
+ self.config = config;
+ self.customFn = customFn || function() {};
+ self.components = [];
+
+ /**
+ * @private
+ * @param {Clay~ConfigItem|Array} item
+ * @return {void}
+ */
+ function _registerStandardComponents(item) {
+ if (Array.isArray(item)) {
+ item.forEach(function(item) {
+ _registerStandardComponents(item);
+ });
+ } else if (item.type === 'section') {
+ _registerStandardComponents(item.items);
+ } else if (standardComponents[item.type]) {
+ self.registerComponent(standardComponents[item.type]);
+ }
+ }
+
+ _registerStandardComponents(self.config);
}
+Clay.prototype.registerComponent = function(component) {
+ this.components.push(component);
+};
+
/**
* Generate the Data URI used by the config Page with settings injected
* @param {string} returnTo - used while developing on desktop.
@@ -80,19 +108,13 @@ Clay.prototype.generateUrl = function(returnTo) {
settings = {};
}
- var strings = {
- customFn: this.customFn.toString().replace(/^.*?\{/, '{'),
- returnTo: returnTo || 'pebblejs://close#',
- config: JSON.stringify(this.config),
- settings: JSON.stringify(settings)
- };
-
// Show config page
return encodeDataUri(configPageHtml
- .replace('$$CUSTOM_FN$$', strings.customFn)
- .replace('$$RETURN_TO$$', strings.returnTo)
- .replace('$$CONFIG$$', strings.config)
- .replace('$$SETTINGS$$', strings.settings)
+ .replace('$$CUSTOM_FN$$', toSource(this.customFn))
+ .replace('$$RETURN_TO$$', returnTo || 'pebblejs://close#')
+ .replace('$$CONFIG$$', toSource(this.config))
+ .replace('$$SETTINGS$$', toSource(settings))
+ .replace('$$COMPONENTS$$', toSource(this.components))
);
};
diff --git a/package.json b/package.json
index d7dc4a1..e0c60c4 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
},
"homepage": "https://github.com/pebble/clay#readme",
"devDependencies": {
+ "autoprefixer": "^6.3.1",
"bourbon": "^4.2.6",
"browserify": "^13.0.0",
"browserify-istanbul": "^0.2.1",
@@ -54,9 +55,13 @@
"karma-threshold-reporter": "^0.1.15",
"mocha": "^2.3.4",
"pebble-clay-components": "git+https://github.com/pebble/clay-components.git#master",
+ "postcss": "^5.0.14",
+ "require-from-string": "^1.1.0",
"sassify": "^0.9.1",
"sinon": "^1.17.3",
"stringify": "^3.2.0",
+ "through": "^2.3.8",
+ "tosource": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0"
},
diff --git a/src/config-page.html b/src/config-page.html
index 63e641b..837fe40 100755
--- a/src/config-page.html
+++ b/src/config-page.html
@@ -8,11 +8,12 @@
window.returnTo = '$$RETURN_TO$$';
window.clayConfig = $$CONFIG$$;
window.claySettings = $$SETTINGS$$;
- window.customFn = function() $$CUSTOM_FN$$;
+ window.customFn = $$CUSTOM_FN$$;
+ window.clayComponents = $$COMPONENTS$$;
-
+