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

@@ -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",

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 }) => {

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';

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 };

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 };

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');

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',

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];