preact-highlight - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

build/index.js

@@ -15,4 +15,8 @@ 'use strict';
 
-var hljs = require('highlight.js');
+var hljs = require('./lib/hljs');
 
+var _require2 = require('./lib/theme'),
+    THEME = _require2.THEME,
+    themeManger = _require2.themeManger;
+
 var HighLight = function (_Component) {
@@ -35,7 +39,3 @@ _inherits(HighLight, _Component);
       var codeStr = this.stringify(code);
-
-      var _hljs$highlight = hljs.highlight(language, codeStr),
-          value = _hljs$highlight.value;
-
-      return value;
+      return hljs(codeStr, language);
     }
@@ -50,11 +50,21 @@ }, {
   }, {
+    key: 'updateTheme',
+    value: function updateTheme(theme) {
+      if (theme !== this.theme) {
+        this.theme = theme;
+        themeManger(theme);
+      }
+    }
+  }, {
     key: 'render',
     value: function render(_ref) {
       var language = _ref.language,
-          className = _ref.className;
+          className = _ref.className,
+          theme = _ref.theme;
 
       var __html = this.parserSyntax();
+      this.updateTheme(theme);
       return h(
         'div',
-        { className: className },
+        { className: className + ' ' + theme },
         h(
@@ -73,6 +83,9 @@ 'pre',
 HighLight.defaultProps = {
-  language: 'json'
+  language: 'json',
+  theme: THEME.monokaiSublime
 };
 
-module.exports = HighLight;
-//# sourceMappingURL=index.js.map
+module.exports = {
+  THEME: THEME,
+  HighLight: HighLight
+};

CHANGELOG.md

@@ -5,2 +5,27 @@ # Change Log
 
+<a name="1.1.0"></a>
+# [1.1.0](https://github.com/jasonChen1982/preact-highlight/compare/v1.1.0-alpha.0...v1.1.0) (2017-06-23)
+
+
+
+<a name="1.1.0-alpha.0"></a>
+# [1.1.0-alpha.0](https://github.com/jasonChen1982/preact-highlight/compare/v1.0.0...v1.1.0-alpha.0) (2017-06-23)
+
+
+### Features
+
+* update builder ([eb3c4d4](https://github.com/jasonChen1982/preact-highlight/commit/eb3c4d4))
+
+
+
+<a name="1.0.2"></a>
+## [1.0.2](https://github.com/jasonChen1982/preact-highlight/compare/v1.0.1...v1.0.2) (2017-06-23)
+
+
+
+<a name="1.0.1"></a>
+## [1.0.1](https://github.com/jasonChen1982/preact-highlight/compare/v1.0.0...v1.0.1) (2017-06-23)
+
+
+
 <a name="1.0.0"></a>
@@ -7,0 +32,0 @@ # [1.0.0](https://github.com/jasonChen1982/preact-highlight/compare/v0.1.0-0...v1.0.0) (2017-06-21)

package.json

 {
   "name": "preact-highlight",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "a syntax highlight component for preact",
   "main": "./build/index.js",
   "scripts": {
-    "build": "babel src -d build --source-maps",
+    "build": "babel src -d build",
+    "theme": "node ./builder/theme.js && git add -A && git commit -m 'chore(theme): build theme for cdn'",
     "prever": "npm run build",
@@ -32,2 +33,7 @@ "ver": "standard-version -m 'chore(release): v%s'",
   "homepage": "https://github.com/jasonChen1982/preact-highlight#readme",
+  "standard-version": {
+    "scripts": {
+      "postbump": "npm run theme"
+    }
+  },
   "peerDependencies": {
@@ -44,6 +50,9 @@ "preact": "^6.4.0"
     "babel-preset-es2015": "^6.24.1",
+    "camelcase": "^4.1.0",
     "eslint": "^4.0.0",
     "eslint-config-egg": "^4.2.1",
-    "standard-version": "^4.2.0"
+    "mkdirp": "^0.5.1",
+    "standard-version": "^4.2.0",
+    "stylus": "^0.54.5"
   }
 }

README.md

 # preact-highlight
-a syntax highlight component for preact
+
+a syntax highlight component for preact, base on awesome [highlight.js](https://github.com/isagalaev/highlight.js)
+
+## features
+
+ - self managed theme style
+ - cache highlight result
+ - support multi-theme in same component
+
 ## usage
 
+#### step.1
+
+link theme stylesheets
+
+```html
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
+```
+
+#### step.2
+
+use it with your preact application
+
 ```js
 const { h, Component } = require('preact');
-const HighLight = require('preact-highlight');
+const { HighLight, Theme } = require('preact-highlight');
 const demo = {
@@ -15,3 +35,3 @@ a: 1,
   render() {
-    return <HighLight className="cmp-high-light" code={demo}/>;
+    return <HighLight className="cmp-high-light" code={demo} theme={Theme.}/>;
   }
@@ -24,7 +44,9 @@ }
 
-`HighLight` component `code` property had supported `string` `json|object` `function`
+`HighLight` component `code` property had supported `string` or `json` or `object` and `function`
 
-| property          | type                                    | description                              |
-| ----------------- | --------------------------------------- | ---------------------------------------- |
-| `className`       | `string`                                | css style classname                      |
-| `code`            | `string` or `json|object` or `function` | need highlight code snippet              |
+| property          | type                                          | description                              |
+| ----------------- | --------------------------------------------- | ---------------------------------------- |
+| `className`       | `string`                                      | css style classname                      |
+| `code`            | `string` or `json` or `object` and `function` | code snippet which need highlight        |
+| `language`        | `string`                                      | use which language                       |
+| `theme`           | `string`                                      | use which theme                          |

src/index.js

 'use strict';
+
 const { h, Component } = require('preact');
-const hljs = require('highlight.js');
+const hljs = require('./lib/hljs');
+const { THEME, themeManger } = require('./lib/theme');
 
@@ -9,4 +11,3 @@ class HighLight extends Component {
     const codeStr = this.stringify(code);
-    const { value } = hljs.highlight(language, codeStr);
-    return value;
+    return hljs(codeStr, language);
   }
@@ -18,6 +19,13 @@ stringify(raw) {
   }
-  render({ language, className }) {
+  updateTheme(theme) {
+    if (theme !== this.theme) {
+      this.theme = theme;
+      themeManger(theme);
+    }
+  }
+  render({ language, className, theme }) {
     const __html = this.parserSyntax();
+    this.updateTheme(theme);
     return (
-      <div className={className}>
+      <div className={`${className} ${theme}`}>
         <pre><code className={`hljs ${language}`} dangerouslySetInnerHTML={{ __html }}></code></pre>
@@ -30,4 +38,8 @@ </div>
   language: 'json',
+  theme: THEME.monokaiSublime,
 };
 
-module.exports = HighLight;
+module.exports = {
+  THEME,
+  HighLight,
+};

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

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

139389

increased by1175.29%

Number of package files

103

increased by836.36%

Lines of code

5556

increased by6360.47%

Number of lines in readme file

51

increased by75.86%

Worsened metrics

Dev dependency count

10

increased by42.86%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes