theme-builder - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

lib/app.js

 'use strict';
 
-/* eslint no-console: ["error", { allow: ["warn", "error"] }] */
-var deepExtend = require('deep-extend');
-var yaml = require('js-yaml');
+var jsYaml = require('js-yaml');
+var yamlUtils = require('./yamlUtils');
 var js = require('./processors/js');
 var scss = require('./processors/scss');
+var fs = require('fs');
 
-var defaultProcessors = {
-  js: js,
-  scss: scss
+var defaultConfig = {
+  processors: {
+    js: js,
+    scss: scss
+  },
+  prefix: '',
+  format: 'scss'
 };
 
-module.exports = function app(themeYaml, format) {
-  var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+module.exports = function themeBuilder(config) {
+  var builderConfig = Object.assign({}, defaultConfig, config);
+  var processors = builderConfig.processors,
+      prefix = builderConfig.prefix,
+      format = builderConfig.format;
 
-  var processors = Object.assign({}, config.processors || {}, defaultProcessors);
 
-  if (!processors[format]) {
-    throw new Error('Missing processors for "' + format + '" format');
+  var processor = processors[format];
+
+  if (!processor) {
+    throw new Error('Missing processor for "' + format + '" format');
   }
 
-  try {
-    var jsonTheme = yaml.safeLoad(themeYaml);
+  return {
+    merge: function merge(yamlFiles) {
+      return yamlUtils.readFiles(yamlFiles).then(yamlUtils.concatYamlData).then(yamlUtils.parseYaml).then(yamlUtils.buildYamlJson).then(yamlUtils.compileJsonToYaml);
+    },
+    build: function build(yamlFiles) {
+      var promise = void 0;
+      if (typeof yamlFiles === 'string') {
+        promise = this.merge([yamlFiles]);
+      } else {
+        promise = this.merge(yamlFiles);
+      }
 
-    if (config.defaultThemeYaml) {
-      var defaultJsonTheme = yaml.safeLoad(config.defaultThemeYaml);
-      jsonTheme = deepExtend({}, defaultJsonTheme, jsonTheme);
-    }
+      return promise.then(function (themeYaml) {
+        return processor.compile(jsYaml.safeLoad(themeYaml), prefix);
+      });
+    },
+    watch: function watch(files, callback) {
+      var _this = this;
 
-    return processors[format].compile(jsonTheme, config.prefix ? config.prefix : '');
-  } catch (error) {
-    console.warn('Failed to process theme with ' + format + ' format. Reason:');
-    console.warn(error);
-  }
+      if (typeof callback !== 'function') {
+        throw new Error('callback is required!');
+      }
+      if (typeof files === 'string') {
+        files = [files];
+      }
 
-  return null;
+      files.map(function (yamlFile) {
+        return fs.watchFile(yamlFile, function (curr, prev) {
+          console.log('[theme-builder] Detected changes on ' + yamlFile); // eslint-disable-line
+          console.log('[theme-builder] rebuilding start'); // eslint-disable-line
+          _this.build(files).then(function (content) {
+            console.log('[theme-builder] rebuilding end'); // eslint-disable-line
+            callback(content, curr, prev);
+          });
+        });
+      });
+    }
+  };
 };

lib/processors/scss.js

@@ -18,3 +18,3 @@ 'use strict';
 
-    return result;
+    return result.join('\n');
   }
@@ -21,0 +21,0 @@ };

package.json

 {
   "name": "theme-builder",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "README",
@@ -69,5 +69,6 @@ "main": "lib/app.js",
   "dependencies": {
-    "deep-extend": "^0.4.1",
-    "js-yaml": "^3.7.0"
+    "js-yaml": "^3.7.0",
+    "lodash.merge": "^4.6.0",
+    "yaml-ast-parser": "0.0.31"
   }
 }

README.md

@@ -13,4 +13,10 @@ # Theme builder
 const themeBuilder = require('theme-builder');
-const themeYaml = fs.readFileSync(pathToYamlFile);
-const themeScss = themeBuilder(themeYaml, 'scss');
+
+const builder = themeBuilder({
+  format: 'scss',
+  prefix: 'tx',
+});
+
+builder.build(pathToYamlFile)
+  .then(themeScss => console.log(themeScss));
 ```
@@ -37,4 +43,5 @@
 ```js
-const themeYaml = fs.readFileSync('index.yaml');
-themeBuilder(themeYaml, 'scss', {prefix: 'ui'});
+themeBuilder({ format: 'scss' })
+  .build('index.yaml')
+  .then(themeScss => console.log(themeScss));
 ```
@@ -51,2 +58,42 @@
 
+## How to override default theme
+You can provide array of yaml files, and themeBuilder will merge it one by one:
+
+#### How it works (example)
+You have `default.yaml` and `custom.yaml`, you want to merge it and convert it to SCSS:
+
+`./default.yaml`
+```yaml
+generic:
+  color:
+    accent: &accent '#1fcff6'
+button:
+  color:
+    bg: *accent
+```
+
+`./custom.yaml`
+```yaml
+generic:
+  color:
+    accent: &accent '#283A8E'
+```
+
+```js
+themeBuilder()
+  .build(['default.yaml', 'custom.yaml'])
+  .then(themeScss => console.log(themeScss));
+```
+and as result you will get string with 2 variables:
+```scss
+$ui-generic-color-accent: #283A8E;
+$ui-button-color-bg: #283A8E;
+```
+
+#### How to watch changes
+```js
+themeBuilder()
+  .watch(['default.yaml', 'custom.yaml'], updatedTemeScss => console.log(updatedTemeScss));
+```
+
 ## API (Types)
@@ -53,0 +100,0 @@

New alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19294

increased by30.08%

Number of package files

12

increased by20%

Lines of code

148

increased by196%

Number of lines in readme file

125

increased by60.26%

Worsened metrics

Dependency count

3

increased by50%

Number of low supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedlodash.merge@^4.6.0

• + Addedyaml-ast-parser@0.0.31

• + Addedlodash.merge@4.6.2(transitive)

• + Addedyaml-ast-parser@0.0.31(transitive)

• - Removeddeep-extend@^0.4.1

• - Removeddeep-extend@0.4.2(transitive)