From bd4362b05122eade5e571714b66e8b170332cb38 Mon Sep 17 00:00:00 2001 From: Gabe Ratcliff Date: Mon, 5 Oct 2020 15:06:38 -0400 Subject: [PATCH] fix(bundle): client and server compatibility (#20) * fix(bundle): making syntax highlighter compatible on client and server - Exposing modes and getmode as core exports * chore: documentation --- package.json | 3 ++- src/codeEditor/index.jsx | 1 + src/codeMirror/index.jsx | 1 + src/index.js | 3 ++- src/index.node.js | 5 +++++ src/utils/cm-mode-imports.js | 24 ++++++++++++++++++++++++ src/utils/modes.js | 25 ------------------------- webpack.config.js | 28 +++++++++++++++++++++++----- 8 files changed, 58 insertions(+), 32 deletions(-) create mode 100644 src/index.node.js create mode 100644 src/utils/cm-mode-imports.js diff --git a/package.json b/package.json index f6b2eb2..57c6a0f 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,8 @@ "name": "@readme/syntax-highlighter", "description": "ReadMe's React-based syntax highlighter", "version": "9.0.1", - "main": "dist/index.js", + "main": "dist/index.node.js", + "browser": "dist/index.js", "dependencies": { "@readme/variable": "^7.2.1", "codemirror": "^5.48.2", diff --git a/src/codeEditor/index.jsx b/src/codeEditor/index.jsx index ebdc1a1..32a5679 100644 --- a/src/codeEditor/index.jsx +++ b/src/codeEditor/index.jsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { Controlled as CodeMirror } from 'react-codemirror2'; import { getMode } from '../utils/modes'; import defaults from './cm.options'; +import '../utils/cm-mode-imports'; import './style.scss'; const CodeEditor = ({ className, code, lang, options, children, ...attr }) => { diff --git a/src/codeMirror/index.jsx b/src/codeMirror/index.jsx index 87b75ce..529d7e2 100644 --- a/src/codeMirror/index.jsx +++ b/src/codeMirror/index.jsx @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; import Variable, { VARIABLE_REGEXP } from '@readme/variable'; import { getMode } from '../utils/modes'; +import '../utils/cm-mode-imports'; import './style.scss'; import 'codemirror/addon/runmode/runmode'; import 'codemirror/mode/meta'; diff --git a/src/index.js b/src/index.js index 8866bbf..fcd60c0 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,7 @@ import codemirror from './codeMirror'; import codeEditor from './codeEditor'; import uppercase from './utils/uppercase'; import canonical from './utils/canonical'; +import { modes } from './utils/modes'; const SyntaxHighlighter = ( code, @@ -33,4 +34,4 @@ const SyntaxHighlighter = ( }; export default SyntaxHighlighter; -export { uppercase, canonical }; +export { uppercase, canonical, modes }; diff --git a/src/index.node.js b/src/index.node.js new file mode 100644 index 0000000..fc48314 --- /dev/null +++ b/src/index.node.js @@ -0,0 +1,5 @@ +import uppercase from './utils/uppercase'; +import canonical from './utils/canonical'; +import { modes, getMode } from './utils/modes'; + +export { uppercase, canonical, modes, getMode }; diff --git a/src/utils/cm-mode-imports.js b/src/utils/cm-mode-imports.js new file mode 100644 index 0000000..bd09114 --- /dev/null +++ b/src/utils/cm-mode-imports.js @@ -0,0 +1,24 @@ +// Codemirror-specfic mode-integrations, used for styling syntax +require('codemirror/mode/clike/clike'); +require('codemirror/mode/clojure/clojure'); +require('codemirror/mode/d/d'); +require('codemirror/mode/dart/dart'); +require('codemirror/mode/diff/diff'); +require('codemirror/mode/dockerfile/dockerfile'); +require('codemirror/mode/erlang/erlang'); +require('codemirror/mode/go/go'); +require('codemirror/mode/groovy/groovy'); +require('codemirror/mode/htmlmixed/htmlmixed'); +require('codemirror/mode/http/http'); +require('codemirror/mode/javascript/javascript'); +require('codemirror/mode/julia/julia'); +require('codemirror/mode/perl/perl'); +require('codemirror/mode/php/php'); +require('codemirror/mode/powershell/powershell'); +require('codemirror/mode/python/python'); +require('codemirror/mode/ruby/ruby'); +require('codemirror/mode/rust/rust'); +require('codemirror/mode/shell/shell'); +require('codemirror/mode/sql/sql'); +require('codemirror/mode/swift/swift'); +require('codemirror/mode/yaml/yaml'); diff --git a/src/utils/modes.js b/src/utils/modes.js index 7360709..fe4d01a 100644 --- a/src/utils/modes.js +++ b/src/utils/modes.js @@ -8,31 +8,6 @@ // There are 2 types of lookup, single and array. e.g. `html` needs to be rendered using // `htmlmixed`, but `java`, needs to be rendered using the `clike` mode. // -// We also have the mimeType to potentially in future load in new types dynamically. -require('codemirror/mode/clike/clike'); -require('codemirror/mode/clojure/clojure'); -require('codemirror/mode/d/d'); -require('codemirror/mode/dart/dart'); -require('codemirror/mode/diff/diff'); -require('codemirror/mode/dockerfile/dockerfile'); -require('codemirror/mode/erlang/erlang'); -require('codemirror/mode/go/go'); -require('codemirror/mode/groovy/groovy'); -require('codemirror/mode/htmlmixed/htmlmixed'); -require('codemirror/mode/http/http'); -require('codemirror/mode/javascript/javascript'); -require('codemirror/mode/julia/julia'); -require('codemirror/mode/perl/perl'); -require('codemirror/mode/php/php'); -require('codemirror/mode/powershell/powershell'); -require('codemirror/mode/python/python'); -require('codemirror/mode/ruby/ruby'); -require('codemirror/mode/rust/rust'); -require('codemirror/mode/shell/shell'); -require('codemirror/mode/sql/sql'); -require('codemirror/mode/swift/swift'); -require('codemirror/mode/yaml/yaml'); - const modes = { asp: 'clike', aspx: 'clike', diff --git a/webpack.config.js b/webpack.config.js index 0169da4..61f73f6 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,8 +1,7 @@ const TerserPlugin = require('terser-webpack-plugin'); const path = require('path'); -module.exports = { - entry: ['./src/index.js'], +const base = { mode: 'production', module: { rules: [ @@ -41,12 +40,31 @@ module.exports = { umd: 'react-dom', }, }, + resolve: { + extensions: ['.js', '.jsx'], + }, +}; + +const serverConfig = { + ...base, + target: 'node', + entry: ['./src/index.node.js'], output: { path: path.resolve(__dirname, 'dist'), - filename: 'index.js', + filename: 'index.node.js', libraryTarget: 'commonjs2', }, - resolve: { - extensions: ['.js', '.jsx'], +}; + +const clientConfig = { + ...base, + target: 'web', + entry: ['./src/index.js'], + output: { + path: path.resolve(__dirname, 'dist'), + filename: 'index.js', + libraryTarget: 'commonjs2', }, }; + +module.exports = [serverConfig, clientConfig];