From 798da1da0033c5246d1474571d2ecc1ec467c963 Mon Sep 17 00:00:00 2001 From: Brian Cappello Date: Fri, 6 Oct 2017 20:17:15 -0400 Subject: [PATCH 1/6] upgrade babel --- package.json | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 679988d..1c4526a 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "index.js", "scripts": { "start": "gulp server", - "prepublish": "babel ./src --out-dir ./lib", + "prepublish": "babel ./src --out-dir ./lib --plugins=transform-class-properties,transform-react-jsx", "test": "karma start --single-run", "dev-test": "karma start" }, @@ -33,10 +33,12 @@ }, "devDependencies": { "autoprefixer": "^6.7.7", - "babel": "^5.8.38", - "babel-core": "^5.8.38", + "babel-cli": "^6.26.0", + "babel-core": "^6.26.0", "babel-eslint": "^6.1.2", - "babel-loader": "^5.4.2", + "babel-loader": "^7.1.2", + "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-react-jsx": "^6.24.1", "es5-shim": "^4.5.9", "eslint": "^3.19.0", "eslint-plugin-react": "^6.10.3", From 388c8ec0ee5c95359ed51cdd987f64b458aa958b Mon Sep 17 00:00:00 2001 From: Brian Cappello Date: Fri, 6 Oct 2017 20:17:32 -0400 Subject: [PATCH 2/6] support react v16 --- package.json | 3 +-- src/index.js | 35 ++++++++++++++++------------------- src/optimized.js | 34 ++++++++++++++++------------------ 3 files changed, 33 insertions(+), 39 deletions(-) diff --git a/package.json b/package.json index 1c4526a..b96ad38 100644 --- a/package.json +++ b/package.json @@ -28,8 +28,7 @@ "homepage": "https://github.com/akiran/react-highlight", "dependencies": { "highlight.js": "^9.11.0", - "react": "^15.5.4", - "react-dom": "^15.5.4" + "react": "^15.5.4" }, "devDependencies": { "autoprefixer": "^6.7.7", diff --git a/src/index.js b/src/index.js index cb178f6..d231125 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,5 @@ import hljs from 'highlight.js'; import React from 'react'; -import ReactDOM from 'react-dom'; class Highlight extends React.Component { componentDidMount() { @@ -12,32 +11,30 @@ class Highlight extends React.Component { } highlightCode() { - const domNode = ReactDOM.findDOMNode(this); - const nodes = domNode.querySelectorAll('pre code'); - - let i; - for (i = 0; i < nodes.length; i++) { - hljs.highlightBlock(nodes[i]); - } + const nodes = this.el.querySelectorAll('pre code'); + nodes.forEach((node) => hljs.highlightBlock(node)); } + setEl = (el) => { + this.el = el; + }; + render() { - const {children, className, element, innerHTML} = this.props; - let Element = element ? React.DOM[element] : null; + const {children, className, element: Element, innerHTML} = this.props; + const props = { ref: this.setEl, className }; if (innerHTML) { - if (!Element) { - Element = React.DOM.div - } - - return Element({dangerouslySetInnerHTML: {__html: children}, className: className || null}, null); - } else { + props.dangerouslySetInnerHTML = { __html: children }; if (Element) { - return Element({className}, children); - } else { - return 
{children}
; + return ; } + return
; + } + + if (Element) { + return {children}; } + return 
{children}
; } } diff --git a/src/optimized.js b/src/optimized.js index d5fe955..12a4924 100644 --- a/src/optimized.js +++ b/src/optimized.js @@ -1,6 +1,5 @@ import hljs from'highlight.js/lib/highlight'; import React from'react'; -import ReactDOM from'react-dom'; class Highlight extends React.Component { componentDidMount() { @@ -13,8 +12,7 @@ class Highlight extends React.Component { highlightCode() { const {className, languages} = this.props; - const domNode = ReactDOM.findDOMNode(this); - const nodes = domNode.querySelectorAll('pre code'); + const nodes = this.el.querySelectorAll('pre code'); if ((languages.length === 0) && className) { languages.push(className); @@ -24,29 +22,29 @@ class Highlight extends React.Component { hljs.registerLanguage(lang, require('highlight.js/lib/languages/' + lang)); }); - let i; - for (i = 0; i < nodes.length; i++) { - hljs.highlightBlock(nodes[i]); - } + nodes.forEach((node) => hljs.highlightBlock(node)); } + setEl = (el) => { + this.el = el; + }; + render() { - const {children, className, element, innerHTML} = this.props; - let Element = element ? React.DOM[element] : null; + const {children, className, element: Element, innerHTML} = this.props; + const props = { ref: this.setEl, className }; if (innerHTML) { - if (!Element) { - Element = React.DOM.div - } - - return Element({dangerouslySetInnerHTML: {__html: children}, className: className || null}, null); - } else { + props.dangerouslySetInnerHTML = { __html: children }; if (Element) { - return Element({className}, children); - } else { - return 
{children}
; + return ; } + return
; + } + + if (Element) { + return {children}; } + return 
{children}
; } } From 12d67cfacafaa54dd3e79a7be4749e4475dfe17e Mon Sep 17 00:00:00 2001 From: Brian Cappello Date: Fri, 6 Oct 2017 21:40:48 -0400 Subject: [PATCH 3/6] fix tests --- karma.conf.js | 20 ++++++++++++++++---- package.json | 16 +++++++++++----- src/index.js | 5 ++++- src/optimized.js | 4 +++- 4 files changed, 34 insertions(+), 11 deletions(-) diff --git a/karma.conf.js b/karma.conf.js index 2b69fef..b93f870 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -32,15 +32,27 @@ module.exports = function(config) { webpack: { module: { - loaders: [ - {test: /\.(js|jsx)$/, loaders: ['babel']}, - ] + rules: [ + { + test: /\.(js|jsx)$/, + use: { + loader: 'babel-loader', + options: { + presets: ['env'], + plugins: [ + 'transform-class-properties', + 'transform-react-jsx', + ], + }, + }, + }, + ], }, externals: { react: 'React' }, resolve: { - root: __dirname + modules: [__dirname, 'node_modules'] } }, webpackServer: { diff --git a/package.json b/package.json index b96ad38..420cdce 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "index.js", "scripts": { "start": "gulp server", - "prepublish": "babel ./src --out-dir ./lib --plugins=transform-class-properties,transform-react-jsx", + "prepublish": "babel ./src --out-dir ./lib --plugins=transform-class-properties,transform-react-jsx --preset=env", "test": "karma start --single-run", "dev-test": "karma start" }, @@ -27,8 +27,7 @@ }, "homepage": "https://github.com/akiran/react-highlight", "dependencies": { - "highlight.js": "^9.11.0", - "react": "^15.5.4" + "highlight.js": "^9.11.0" }, "devDependencies": { "autoprefixer": "^6.7.7", @@ -38,6 +37,7 @@ "babel-loader": "^7.1.2", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-react-jsx": "^6.24.1", + "babel-preset-env": "^1.6.0", "es5-shim": "^4.5.9", "eslint": "^3.19.0", "eslint-plugin-react": "^6.10.3", @@ -55,7 +55,13 @@ "node-libs-browser": "^2.0.0", "phantomjs-prebuilt": "^2.1.14", "raw-loader": "^0.5.1", - "webpack": "^1.15.0", - "webpack-dev-server": "^1.16.3" + "react": "^15.5.4", + "react-dom": "^15.5.4", + "webpack": "^3.6.0", + "webpack-dev-server": "^2.9.1" + }, + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0", + "react-dom": "^15.0.0 || ^16.0.0" } } diff --git a/src/index.js b/src/index.js index d231125..a5fff66 100644 --- a/src/index.js +++ b/src/index.js @@ -12,7 +12,10 @@ class Highlight extends React.Component { highlightCode() { const nodes = this.el.querySelectorAll('pre code'); - nodes.forEach((node) => hljs.highlightBlock(node)); + + for (let i = 0; i < nodes.length; i++) { + hljs.highlightBlock(nodes[i]) + } } setEl = (el) => { diff --git a/src/optimized.js b/src/optimized.js index 12a4924..e97f670 100644 --- a/src/optimized.js +++ b/src/optimized.js @@ -22,7 +22,9 @@ class Highlight extends React.Component { hljs.registerLanguage(lang, require('highlight.js/lib/languages/' + lang)); }); - nodes.forEach((node) => hljs.highlightBlock(node)); + for (let i = 0; i < nodes.length; i++) { + hljs.highlightBlock(nodes[i]) + } } setEl = (el) => { From d128058dd4c81c6a8b98c9ae6d94a7eb156af48c Mon Sep 17 00:00:00 2001 From: Brian Cappello Date: Sun, 22 Oct 2017 18:41:02 -0400 Subject: [PATCH 4/6] fix typo in prepublish command --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 420cdce..b72ca1d 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "index.js", "scripts": { "start": "gulp server", - "prepublish": "babel ./src --out-dir ./lib --plugins=transform-class-properties,transform-react-jsx --preset=env", + "prepublish": "babel ./src --out-dir ./lib --plugins=transform-class-properties,transform-react-jsx --presets=env", "test": "karma start --single-run", "dev-test": "karma start" }, From bcdec947509408605285b729ccd4f5e4a38d1ade Mon Sep 17 00:00:00 2001 From: mbj36 Date: Tue, 13 Mar 2018 16:18:55 +0530 Subject: [PATCH 5/6] Removed docs --- .npmignore | 1 - docs/_default.scss | 152 ----------------------------------------- docs/docs.scss | 1 - docs/index.html | 9 --- docs/index.jsx | 25 ------- docs/snippets/html.md | 5 -- docs/snippets/html.txt | 3 - gulpfile.js | 36 ---------- package.json | 6 +- webpack.config.js | 30 ++++---- 10 files changed, 15 insertions(+), 253 deletions(-) delete mode 100644 .npmignore delete mode 100644 docs/_default.scss delete mode 100644 docs/docs.scss delete mode 100644 docs/index.html delete mode 100644 docs/index.jsx delete mode 100644 docs/snippets/html.md delete mode 100644 docs/snippets/html.txt delete mode 100644 gulpfile.js diff --git a/.npmignore b/.npmignore deleted file mode 100644 index d8f8d46..0000000 --- a/.npmignore +++ /dev/null @@ -1 +0,0 @@ -docs diff --git a/docs/_default.scss b/docs/_default.scss deleted file mode 100644 index fbc5328..0000000 --- a/docs/_default.scss +++ /dev/null @@ -1,152 +0,0 @@ -/* - -Original style from softwaremaniacs.org (c) Ivan Sagalaev - -*/ - -.hljs { - display: block; - overflow-x: auto; - padding: 0.5em; - background: #f0f0f0; - -webkit-text-size-adjust: none; -} - -.hljs, -.hljs-subst, -.hljs-tag .hljs-title, -.nginx .hljs-title { - color: black; -} - -.hljs-string, -.hljs-title, -.hljs-constant, -.hljs-parent, -.hljs-tag .hljs-value, -.hljs-rules .hljs-value, -.hljs-preprocessor, -.hljs-pragma, -.haml .hljs-symbol, -.ruby .hljs-symbol, -.ruby .hljs-symbol .hljs-string, -.hljs-template_tag, -.django .hljs-variable, -.smalltalk .hljs-class, -.hljs-addition, -.hljs-flow, -.hljs-stream, -.bash .hljs-variable, -.apache .hljs-tag, -.apache .hljs-cbracket, -.tex .hljs-command, -.tex .hljs-special, -.erlang_repl .hljs-function_or_atom, -.asciidoc .hljs-header, -.markdown .hljs-header, -.coffeescript .hljs-attribute { - color: #800; -} - -.smartquote, -.hljs-comment, -.hljs-annotation, -.diff .hljs-header, -.hljs-chunk, -.asciidoc .hljs-blockquote, -.markdown .hljs-blockquote { - color: #888; -} - -.hljs-number, -.hljs-date, -.hljs-regexp, -.hljs-literal, -.hljs-hexcolor, -.smalltalk .hljs-symbol, -.smalltalk .hljs-char, -.go .hljs-constant, -.hljs-change, -.lasso .hljs-variable, -.makefile .hljs-variable, -.asciidoc .hljs-bullet, -.markdown .hljs-bullet, -.asciidoc .hljs-link_url, -.markdown .hljs-link_url { - color: #080; -} - -.hljs-label, -.hljs-javadoc, -.ruby .hljs-string, -.hljs-decorator, -.hljs-filter .hljs-argument, -.hljs-localvars, -.hljs-array, -.hljs-attr_selector, -.hljs-important, -.hljs-pseudo, -.hljs-pi, -.haml .hljs-bullet, -.hljs-doctype, -.hljs-deletion, -.hljs-envvar, -.hljs-shebang, -.apache .hljs-sqbracket, -.nginx .hljs-built_in, -.tex .hljs-formula, -.erlang_repl .hljs-reserved, -.hljs-prompt, -.asciidoc .hljs-link_label, -.markdown .hljs-link_label, -.vhdl .hljs-attribute, -.clojure .hljs-attribute, -.asciidoc .hljs-attribute, -.lasso .hljs-attribute, -.coffeescript .hljs-property, -.hljs-phony { - color: #88f; -} - -.hljs-keyword, -.hljs-id, -.hljs-title, -.hljs-built_in, -.css .hljs-tag, -.hljs-javadoctag, -.hljs-phpdoc, -.hljs-dartdoc, -.hljs-yardoctag, -.smalltalk .hljs-class, -.hljs-winutils, -.bash .hljs-variable, -.apache .hljs-tag, -.hljs-type, -.hljs-typename, -.tex .hljs-command, -.asciidoc .hljs-strong, -.markdown .hljs-strong, -.hljs-request, -.hljs-status { - font-weight: bold; -} - -.asciidoc .hljs-emphasis, -.markdown .hljs-emphasis { - font-style: italic; -} - -.nginx .hljs-built_in { - font-weight: normal; -} - -.coffeescript .javascript, -.javascript .xml, -.lasso .markup, -.tex .hljs-formula, -.xml .javascript, -.xml .vbscript, -.xml .css, -.xml .hljs-cdata { - opacity: 0.5; -} diff --git a/docs/docs.scss b/docs/docs.scss deleted file mode 100644 index ac655e3..0000000 --- a/docs/docs.scss +++ /dev/null @@ -1 +0,0 @@ -@import "./default"; \ No newline at end of file diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index 76c2a7d..0000000 --- a/docs/index.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - -
- - - \ No newline at end of file diff --git a/docs/index.jsx b/docs/index.jsx deleted file mode 100644 index fd727de..0000000 --- a/docs/index.jsx +++ /dev/null @@ -1,25 +0,0 @@ -// var React = require('react'); -// var Router = require('react-router'); -// var routes = require('./routes'); - -// Router.run(routes, function (Handler) { -// React.render(, document.body); -// }); - -var React = require('react'); -var ReactDOM = require('react-dom'); -var Highlight = require('../src/index'); - -var Docs = React.createClass({ - render: function () { - return ( -
- Some text - {'

Some text

'} - {'var a, b, c;\n c = a + b;'} -
- ); - } -}) - -ReactDOM.render(, document.getElementById('docs')); \ No newline at end of file diff --git a/docs/snippets/html.md b/docs/snippets/html.md deleted file mode 100644 index 75471c4..0000000 --- a/docs/snippets/html.md +++ /dev/null @@ -1,5 +0,0 @@ -```html -
-

Highlighting this html snippet

-
-``` \ No newline at end of file diff --git a/docs/snippets/html.txt b/docs/snippets/html.txt deleted file mode 100644 index 2d3d64d..0000000 --- a/docs/snippets/html.txt +++ /dev/null @@ -1,3 +0,0 @@ -
-

Highlighting this html snippet

-
\ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index e259a32..0000000 --- a/gulpfile.js +++ /dev/null @@ -1,36 +0,0 @@ -var gulp = require('gulp'); -var sass = require('gulp-ruby-sass'); -var webpack = require('webpack'); -var WebpackDevServer = require('webpack-dev-server'); - -gulp.task('copy', function () { - gulp.src('./docs/index.html') - .pipe(gulp.dest('build')); -}); - -gulp.task('sass', function () { - return gulp.src(['./docs/**/*.scss']) - .pipe(sass({ loadPath : ['bower_components', 'node_modules'],})) - .on('error', function (err) { console.log(err.message); }) - .pipe(gulp.dest('./build')); -}); - -gulp.task('server', ['copy', 'sass'], function (callback) { - var myConfig = require('./webpack.config.js'); - - var webpackCompiler = webpack(myConfig, function(err, stats) { - }); - - new WebpackDevServer(webpackCompiler, { - contentBase: './build', - hot: true, - debug: true - }).listen(8000, 'localhost', function (err, result) { - - }); -}); - -gulp.task('watch', function () { - gulp.watch(['./docs/**/*{scss,sass}'], ['sass']); - gulp.watch(['./docs/index.html'], ['copy']); -}); \ No newline at end of file diff --git a/package.json b/package.json index b72ca1d..95b77ed 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,8 @@ "description": "React component for syntax highlighting", "main": "index.js", "scripts": { - "start": "gulp server", - "prepublish": "babel ./src --out-dir ./lib --plugins=transform-class-properties,transform-react-jsx --presets=env", + "prepublish": + "babel ./src --out-dir ./lib --plugins=transform-class-properties,transform-react-jsx --presets=env", "test": "karma start --single-run", "dev-test": "karma start" }, @@ -41,8 +41,6 @@ "es5-shim": "^4.5.9", "eslint": "^3.19.0", "eslint-plugin-react": "^6.10.3", - "gulp": "^3.9.1", - "gulp-ruby-sass": "^2.1.1", "html-loader": "^0.4.5", "jasmine-core": "^2.5.2", "jsx-loader": "^0.13.2", diff --git a/webpack.config.js b/webpack.config.js index a0b26db..8cb1a63 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,36 +1,32 @@ -var webpack = require('webpack'); -var path = require('path'); -var autoprefixer = require('autoprefixer'); +var webpack = require('webpack') +var path = require('path') +var autoprefixer = require('autoprefixer') module.exports = { devtool: '#inline-source-map', - entry: { - 'docs.js': './docs/index' - }, + entry: './src/index', output: { path: path.join(__dirname, 'build'), - filename: '[name]', + filename: '[name]' }, module: { loaders: [ - {test: /\.(js|jsx)$/, loaders: ['babel']}, + { test: /\.(js|jsx)$/, loaders: ['babel'] }, // { // test: /\.scss$/, - // loader: "style!css!postcss!sass?outputStyle=expanded&includePaths[]=" + + // loader: "style!css!postcss!sass?outputStyle=expanded&includePaths[]=" + // (path.resolve(__dirname, './node_modules')) + "&includePaths[]=" + (path.resolve(__dirname, './bower_components')) // }, - { test: /\.md$/, loader: 'raw!markdown' }, - ], + { test: /\.md$/, loader: 'raw!markdown' } + ] }, - postcss: [ autoprefixer({ browsers: ['last 2 version'] }) ], - resolve : { - alias: { - - }, + postcss: [autoprefixer({ browsers: ['last 2 version'] })], + resolve: { + alias: {}, extensions: ['', '.js', '.jsx'] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.IgnorePlugin(/vertx/) ] -}; \ No newline at end of file +} From fe966774fdcb3e8454d80b183413b35cf0f2b66c Mon Sep 17 00:00:00 2001 From: mbj36 Date: Tue, 13 Mar 2018 16:35:16 +0530 Subject: [PATCH 6/6] Added package-lock to gitignore --- .gitignore | 1 + package.json | 3 +-- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 98634ea..1bcafe3 100644 --- a/.gitignore +++ b/.gitignore @@ -29,3 +29,4 @@ node_modules .sass-cache build lib +package-lock.json diff --git a/package.json b/package.json index 95b77ed..eb4579a 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,7 @@ "description": "React component for syntax highlighting", "main": "index.js", "scripts": { - "prepublish": - "babel ./src --out-dir ./lib --plugins=transform-class-properties,transform-react-jsx --presets=env", + "prepublish": "babel ./src --out-dir ./lib --plugins=transform-class-properties,transform-react-jsx --presets=env", "test": "karma start --single-run", "dev-test": "karma start" },