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/.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/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 679988d..eb4579a 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,7 @@ "description": "React component for syntax highlighting", "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 --presets=env", "test": "karma start --single-run", "dev-test": "karma start" }, @@ -27,21 +26,20 @@ }, "homepage": "https://github.com/akiran/react-highlight", "dependencies": { - "highlight.js": "^9.11.0", - "react": "^15.5.4", - "react-dom": "^15.5.4" + "highlight.js": "^9.11.0" }, "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", + "babel-preset-env": "^1.6.0", "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", @@ -54,7 +52,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 cb178f6..a5fff66 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,33 @@ class Highlight extends React.Component { } highlightCode() { - const domNode = ReactDOM.findDOMNode(this); - const nodes = domNode.querySelectorAll('pre code'); + const nodes = this.el.querySelectorAll('pre code'); - let i; - for (i = 0; i < nodes.length; i++) { - hljs.highlightBlock(nodes[i]); + for (let i = 0; i < nodes.length; i++) { + hljs.highlightBlock(nodes[i]) } } + 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..e97f670 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,31 @@ 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]); + for (let i = 0; i < nodes.length; i++) { + hljs.highlightBlock(nodes[i]) } } + 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/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 +}