#97 prepare ketcher for publishing to npm

- update .babelrc
- update rollup config
- mark dependencies as external

Author: AndreiMazol

.babelrc

@@ -1,6 +1,7 @@
 {
   "presets": ["@babel/env", "@babel/react", "@babel/typescript"],
   "plugins": [
+    "@babel/plugin-transform-runtime",
     "@babel/proposal-class-properties",
     "@babel/proposal-object-rest-spread"
   ]

example/src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import Editor from '@ketcher/react'
+import { Editor } from '@ketcher/react'
 import '@ketcher/react/dist/index.css'
 
 const App = () => {

example/yarn.lock

@@ -1102,7 +1102,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
@@ -9100,15 +9100,6 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
-query-string@^6.13.6:
-  version "6.13.6"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.13.6.tgz#e5ac7c74f2a5da43fbca0b883b4f0bafba439966"
-  integrity sha512-/WWZ7d9na6s2wMEGdVCVgKWE9Rt7nYyNIf7k8xmHXcesPMlEzicWo3lbYwHyA4wBktI2KrXxxZeACLbE84hvSQ==
-  dependencies:
-    decode-uri-component "^0.2.0"
-    split-on-first "^1.0.0"
-    strict-uri-encode "^2.0.0"
-
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -10325,11 +10316,6 @@ spdy@^4.0.2:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
-split-on-first@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
-  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
-
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -10437,11 +10423,6 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
-strict-uri-encode@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
-  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
-
 string-length@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
@@ -11126,6 +11107,11 @@ url-parse@^1.4.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+url-search-params-polyfill@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/url-search-params-polyfill/-/url-search-params-polyfill-8.1.0.tgz#5c15b69687165bfd4f6c7d8a161d70d85385885b"
+  integrity sha512-MRG3vzXyG20BJ2fox50/9ZRoe+2h3RM7DIudVD2u/GY9MtayO1Dkrna76IUOak+uoUPVWbyR0pHCzxctP/eDYQ==
+
 url@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"

package.json

@@ -27,8 +27,8 @@
     "node": ">=10"
   },
   "scripts": {
-    "build": "rollup -c -m true",
-    "start": "rollup -c -w -m true",
+    "build": "cross-env NODE_ENV=production rollup -c -m true --silent",
+    "start": "cross-env NODE_ENV=development rollup -c -m true -w",
     "test": "run-s test:unit test:lint prettier stylelint test:build",
     "test:build": "run-s build",
     "test:lint": "eslint src --ext .ts,.tsx,.js,.jsx",
@@ -41,36 +41,42 @@
     "predeploy": "cd example && yarn install && yarn build",
     "deploy": "gh-pages -d example/build"
   },
+  "peerDependencies": {
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0"
+  },
   "dependencies": {
+    "@babel/runtime": "^7.12.5",
     "classnames": "^2.2.6",
     "core-js": "^3.6.5",
     "file-saver": "^2.0.2",
     "font-face-observer": "^1.0.0",
+    "hoist-non-react-statics": "^3.3.2",
     "jsonschema": "^1.4.0",
     "lodash": "^4.17.20",
     "normalize.css": "^8.0.1",
-    "query-string": "^6.13.6",
+    "prop-types": "^15.7.2",
     "raphael": "^2.3.0",
+    "react-is": "^17.0.1",
     "react-markdown": "^5.0.2",
     "react-redux": "^7.2.1",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
     "regenerator-runtime": "^0.13.7",
+    "remark-parse": "^9.0.0",
     "replace": "^1.2.0",
     "reselect": "^4.0.0",
     "subscription": "^3.0.0",
+    "url-search-params-polyfill": "^8.1.0",
     "w3c-keyname": "^2.2.4",
     "whatwg-fetch": "^3.4.1"
   },
-  "peerDependencies": {
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0"
-  },
   "devDependencies": {
     "@babel/core": "^7.12.3",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.1",
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.12.5",
     "@babel/preset-typescript": "^7.12.1",
@@ -79,6 +85,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@rollup/plugin-replace": "^2.3.4",
+    "@rollup/plugin-strip": "^2.0.0",
     "@svgr/rollup": "^5.4.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
@@ -114,9 +121,8 @@
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-less": "^1.1.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-string": "^3.0.0",
+    "rollup-plugin-postcss": "^3.1.8",
     "rollup-plugin-typescript2": "^0.29.0",
     "rollup-plugin-visualizer": "^4.2.0",
     "stylelint": "^13.7.2",

rollup.config.js

@@ -1,19 +1,26 @@
+import path from 'path'
 import peerDepsExternal from 'rollup-plugin-peer-deps-external'
 import babel from '@rollup/plugin-babel'
 import replace from '@rollup/plugin-replace'
-import { string } from 'rollup-plugin-string'
 import copy from 'rollup-plugin-copy'
 import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import typescript from 'rollup-plugin-typescript2'
-import less from 'rollup-plugin-less'
+import postcss from 'rollup-plugin-postcss'
 import json from '@rollup/plugin-json'
 import svgr from '@svgr/rollup'
 import del from 'rollup-plugin-delete'
 import cleanup from 'rollup-plugin-cleanup'
+import strip from '@rollup/plugin-strip'
 import pkg from './package.json'
 
+const mode = {
+  PRODUCTION: 'production',
+  DEVELOPMENT: 'development'
+}
+
 const extensions = ['.js', '.jsx', '.ts', '.tsx']
+const isProduction = process.env.NODE_ENV === mode.PRODUCTION
 
 const config = {
   input: pkg.source,
@@ -29,46 +36,61 @@ const config = {
       format: 'es'
     }
   ],
+  external: [
+    'url',
+    /@babel\/runtime/,
+    'remark-parse',
+    'unified',
+    'asap',
+    'object-assign',
+    'unist-util-visit',
+    'unist-util-visit-parents',
+    'xtend'
+  ],
   plugins: [
     del({
       targets: 'dist/*',
       runOnce: true
     }),
-    peerDepsExternal(),
-    typescript(),
-    string({
-      // Required to be specified
-      include: 'src/**/*.{sdf,md}'
-    }),
+    peerDepsExternal({ includeDependencies: true }),
     commonjs(),
+    resolve({ extensions, preferBuiltins: true }),
+
+    typescript(),
     replace(
       {
+        'process.env.NODE_ENV': JSON.stringify(
+          isProduction ? mode.PRODUCTION : mode.DEVELOPMENT
+        ),
         'process.env.VERSION': JSON.stringify(pkg.version),
         'process.env.BUILD_DATE': JSON.stringify(
           new Date().toISOString().slice(0, 19)
         ),
+        //TODO: add logic to init BUILD_NUMBER
         'process.env.BUILD_NUMBER': JSON.stringify(undefined)
       },
       {
-        include: 'src/**/*.{js,jsx,ts,tsx}',
-        verbose: true
+        include: 'src/**/*.{js,jsx,ts,tsx}'
       }
     ),
-    resolve({ extensions, preferBuiltins: true }),
 
     json(),
     babel({
       extensions,
-      babelHelpers: 'bundled',
+      babelHelpers: 'runtime',
       include: ['src/**/*']
     }),
-    less({ output: 'dist/index.css' }),
-
+    postcss({
+      extract: path.resolve('dist/index.css'),
+      minimize: isProduction,
+      sourceMap: true
+    }),
     svgr(),
     copy({
       targets: [{ src: 'src/style/*.svg', dest: 'dist' }]
     }),
-    cleanup({ extensions })
+    cleanup({ extensions, comments: 'none' }),
+    ...(isProduction ? [strip()] : [])
   ]
 }
 

src/index.test.tsx

@@ -1,4 +1,4 @@
-import Editor from '.'
+import { Editor } from '.'
 
 describe('Editor', () => {
   it('is truthy', () => {

src/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef } from 'react'
+import 'url-search-params-polyfill'
 import init from './script'
 import './index.less'
 
@@ -7,7 +8,7 @@ interface EditorProps {
   apiPath?: string
 }
 
-export default function Editor({ staticResourcesUrl, apiPath }: EditorProps) {
+export function Editor({ staticResourcesUrl, apiPath }: EditorProps) {
   const rootElRef = useRef(null)
   useEffect(() => {
     init(rootElRef.current, staticResourcesUrl, apiPath)

src/script/index.js

@@ -17,7 +17,6 @@
 import 'core-js/stable'
 import 'regenerator-runtime/runtime'
 import 'whatwg-fetch'
-import queryString from 'query-string'
 
 import api from './api'
 import molfile from './chem/molfile'
@@ -81,8 +80,8 @@ function showMolfile(clientArea, molString, options) {
 // to start early
 export default function init(el, staticResourcesUrl, apiPath) {
   ketcher.apiPath = apiPath
-  const params = queryString.parse(document.location.search)
-  if (params.api_path) ketcher.apiPath = params.api_path
+  const params = new URLSearchParams(document.location.search)
+  if (params.has('api_path')) ketcher.apiPath = params.get('api_path')
   ketcher.server = api(ketcher.apiPath, {
     'smart-layout': true,
     'ignore-stereochemistry-errors': true,