Decouple from web-library. Tweak imports. zotero#263

package.json

@@ -13,7 +13,7 @@
     ]
   },
   "scripts": {
-    "serve": "node scripts/server.js -p $npm_package_config_port -t $npm_package_config_translation_server",
+    "serve": "node scripts/server.cjs -p $npm_package_config_port -t $npm_package_config_translation_server",
     "prebuild": "npm run clean -s && mkdir -p build/static/",
     "clean": "rimraf build",
     "clean:data": "rimraf data",
@@ -22,8 +22,8 @@
     "browserify-debug": "mkdir -p build/static && DEBUG=true NODE_ENV=production browserify -s ZoteroBibComponent --extension=.jsx src/js/main.js -t [babelify] -g [ envify --NODE_ENV production ] -g uglifyify -o build/static/main.js",
     "build:js": "run-s browserify",
     "build:scss": "for f in src/scss/*.scss; do sass --no-source-map $f build/static/`basename $f .scss`.css; done;",
-    "build:html": "node scripts/build-html.js",
-    "build:styles-json": "node scripts/build-styles-json.js --stylesCacheTime $npm_package_config_styles_cache_time",
+    "build:html": "node scripts/build-html.cjs",
+    "build:styles-json": "node scripts/build-styles-json.cjs --stylesCacheTime $npm_package_config_styles_cache_time",
     "build:static": "mkdir -p build/static && rsync -vazL src/static/* build/static/",
     "build:postprocess": "postcss build/static/bib.css --use autoprefixer --use cssnano --no-map -r",
     "devel": "run-p 'devel:js -s' 'devel:scss -s' 'devel:html -s' 'devel:static -s'",
@@ -61,10 +61,10 @@
     "react-select": "<2.0.0",
     "reactstrap": "^8.9.0",
     "smooth-scroll": "^16.1.3",
-    "zotero-api-client": "^0.33.0",
+    "webworkify": "^1.5.0",
+    "zotero-api-client": "^0.34.2",
     "zotero-api-client-cache": "^0.7.1",
-    "zotero-translation-client": "^3.0.6",
-    "zotero-web-library": "^0.10.2"
+    "zotero-translation-client": "^3.0.6"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.13",
@@ -119,7 +119,6 @@
     "stylelint-scss": "^3.19.0",
     "terser": "^5.5.1",
     "uglifyify": "^5.0.2",
-    "watchify": "^4.0.0",
-    "webworkify": "^1.5.0"
+    "watchify": "^4.0.0"
   }
 }

scripts/build-styles-json.js → scripts/build-styles-json.cjs

@@ -1,9 +1,10 @@
-const appDefaults = require('../src/js/constants/defaults');
+// const appDefaults = require('../src/js/constants/defaults');
 const fetch = require('cross-fetch');
 const fs = require('fs-extra');
 const path = require('path');
 
 const stylesCacheTime = process.env.STYLES_CACHE_TIME ?? 86400000;
+const stylesURL = 'https://www.zotero.org/styles-files/styles.json';
 
 const styles = [
 	'apa',
@@ -24,8 +25,8 @@ const defaultStyle = 'modern-language-association';
 			throw new Error();
 		}
 	} catch(e) {
-		console.log(`Downloading ${appDefaults.stylesURL}`);
-		stylesMeta = await (await fetch(appDefaults.stylesURL)).json();
+		console.log(`Downloading ${stylesURL}`);
+		stylesMeta = await (await fetch(stylesURL)).json();
 		await fs.outputJson(stylesJsonPath, stylesMeta);
 	}
 	const coreCitationStyles = styles.map(style => {

src/js/bib-component.js → src/js/bib-component.jsx

@@ -1,11 +1,8 @@
-'use strict';
-
-require('cross-fetch/polyfill');
-const React = require('react');
-const PropTypes = require('prop-types');
-const ReactDOM = require('react-dom');
-const { BrowserRouter, Route, Switch } = require('react-router-dom');
-const Container = require('./components/container');
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import Container from './components/container';
 
 //@TODO fix naming convention (bib vs this.bib)
 class ZoteroBibComponent extends React.Component {
@@ -36,4 +33,4 @@ class ZoteroBibComponent extends React.Component {
 	}
 }
 
-module.exports = ZoteroBibComponent;
+export default ZoteroBibComponent;

src/js/cite.js

@@ -114,4 +114,4 @@ const formatBib = (bib) => {
 	return container.innerHTML;
 };
 
-module.exports = formatBib;
+export default formatBib;

src/js/components/about.jsx

@@ -1,8 +1,6 @@
-'use strict';
-
-const React = require('react');
-const PropTypes = require('prop-types');
-const Button = require('zotero-web-library/src/js/component/ui/button');
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from './ui/button';
 
 class About extends React.PureComponent {
 	handleClick(event) {
@@ -222,4 +220,4 @@ class About extends React.PureComponent {
 	}
 }
 
-module.exports = About;
+export default About;

src/js/components/bibliography.jsx

@@ -1,19 +1,16 @@
-'use strict';
-
-const React = require('react');
-const PropTypes = require('prop-types');
-const cx = require('classnames');
-const { withRouter } = require('react-router-dom');
-const KeyHandler = require('react-key-handler').default;
-const { KEYDOWN } = require('react-key-handler');
-const Dropdown = require('reactstrap/lib/Dropdown').default;
-const DropdownToggle = require('reactstrap/lib/DropdownToggle').default;
-const DropdownMenu = require('reactstrap/lib/DropdownMenu').default;
-const DropdownItem = require('reactstrap/lib/DropdownItem').default;
-const Button = require('zotero-web-library/src/js/component/ui/button');
-const Icon = require('zotero-web-library/src/js/component/ui/icon');
-
-const { getHtmlNodeFromBibliography, makeBibliographyContentIterator } =require('../utils') ;
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { withRouter } from 'react-router-dom';
+import { default as KeyHandler } from 'react-key-handler';
+import { KEYDOWN } from 'react-key-handler';
+import { default as Dropdown } from 'reactstrap/lib/Dropdown';
+import { default as DropdownToggle } from 'reactstrap/lib/DropdownToggle';
+import { default as DropdownMenu } from 'reactstrap/lib/DropdownMenu';
+import { default as DropdownItem } from 'reactstrap/lib/DropdownItem';
+import Button from './ui/button';
+import Icon from './ui/icon';
+import { getHtmlNodeFromBibliography, makeBibliographyContentIterator } from '../utils' ;
 
 class Bibliography extends React.PureComponent {
 	state = {
@@ -241,4 +238,4 @@ class Bibliography extends React.PureComponent {
 }
 
 
-module.exports = withRouter(Bibliography);
+export default withRouter(Bibliography);

src/js/components/bibliographySection.jsx

@@ -1,17 +1,15 @@
-'use strict';
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
 
-const React = require('react');
-const PropTypes = require('prop-types');
-const cx = require('classnames');
-
-const Editable = require('zotero-web-library/src/js/component/editable');
-const Button = require('zotero-web-library/src/js/component/ui/button');
-const Icon = require('zotero-web-library/src/js/component/ui/icon');
-const StyleSelector = require('./style-selector');
-const Bibliography = require('./bibliography');
-const DeleteAllButton = require('./delete-all-button');
-const Spinner = require('zotero-web-library/src/js/component/ui/spinner');
-const Confirmation = require('./confirmation');
+import Editable from './ui/editable';
+import Button from './ui/button';
+import Icon from './ui/icon';
+import StyleSelector from './style-selector';
+import Bibliography from './bibliography';
+import DeleteAllButton from './delete-all-button';
+import Spinner from './ui/spinner';
+import Confirmation from './confirmation';
 
 class BibliographySection extends React.PureComponent {
 	state = {
@@ -166,4 +164,4 @@ class BibliographySection extends React.PureComponent {
 	}
 }
 
-module.exports = BibliographySection;
+export default BibliographySection;

src/js/components/brand.jsx

@@ -1,7 +1,5 @@
-'use strict';
-
-const React = require('react');
-const { Link } = require('react-router-dom');
+import React from 'react';
+import { Link } from 'react-router-dom';
 
 class Brand extends React.PureComponent {
 	render() {
@@ -31,4 +29,4 @@ class Brand extends React.PureComponent {
 	}
 }
 
-module.exports = Brand;
+export default Brand;

src/js/components/cite-tools.jsx

@@ -1,10 +1,8 @@
-'use strict';
+import React from 'react';
+import PropTypes from 'prop-types';
 
-const React = require('react');
-const PropTypes = require('prop-types');
-
-const Button = require('zotero-web-library/src/js/component/ui/button');
-const IdInput = require('./id-input');
+import Button from './ui/button';
+import IdInput from './id-input';
 
 class CiteTools extends React.PureComponent {
 	render() {
@@ -32,4 +30,4 @@ class CiteTools extends React.PureComponent {
 	}
 }
 
-module.exports = CiteTools;
+export default CiteTools;

src/js/components/confirm-add-dialog.jsx

@@ -1,13 +1,11 @@
-'use strict';
-
-const React = require('react');
-const PropTypes = require('prop-types');
-const KeyHandler = require('react-key-handler').default;
-const { KEYDOWN } = require('react-key-handler');
-const Button = require('zotero-web-library/src/js/component/ui/button');
-const Modal = require('./modal');
-const Icon = require('zotero-web-library/src/js/component/ui/icon');
-const formatBib = require('../cite');
+import React from 'react';
+import PropTypes from 'prop-types';
+import { default as KeyHandler } from 'react-key-handler';
+import { KEYDOWN } from 'react-key-handler';
+import Button from './ui/button';
+import Modal from './modal';
+import Icon from './ui/icon';
+import formatBib from '../cite';
 
 class ConfirmAddDialog extends React.Component {
 	render() {
@@ -82,4 +80,4 @@ class ConfirmAddDialog extends React.Component {
 	}
 }
 
-module.exports = ConfirmAddDialog;
+export default ConfirmAddDialog;

src/js/components/confirmation.jsx

@@ -1,11 +1,9 @@
-'use strict';
-
-const React = require('react');
-const PropTypes = require('prop-types');
-const KeyHandler = require('react-key-handler').default;
-const { KEYDOWN } = require('react-key-handler');
-const Button = require('zotero-web-library/src/js/component/ui/button');
-const Modal = require('./modal');
+import React from 'react';
+import PropTypes from 'prop-types';
+import { default as KeyHandler } from 'react-key-handler';
+import { KEYDOWN } from 'react-key-handler';
+import Button from './ui/button';
+import Modal from './modal';
 
 class Confirmation extends React.Component {
 	render() {
@@ -78,4 +76,4 @@ class Confirmation extends React.Component {
 }
 
 
-module.exports = Confirmation;
+export default Confirmation;

src/js/components/container.jsx

@@ -1,39 +1,23 @@
 /* eslint-disable react/no-deprecated */
 // @TODO: migrate to getDerivedStateFromProps()
-'use strict';
-
-const React = require('react');
-const PropTypes = require('prop-types');
-const copy = require('copy-to-clipboard');
-const deepEqual = require('deep-equal');
-const SmoothScroll = require('smooth-scroll');
-const ZoteroBib = require('zotero-translation-client');
-const exportFormats = require('../constants/export-formats');
-const { withRouter } = require('react-router-dom');
-const arrayEquals = require('array-equal');
-const {  dedupMultipleChoiceItems,
-	fetchFromPermalink,
-	getBibliographyFormatParameters,
-	getBibliographyOrFallback,
-	getCitation,
-	getCiteproc,
-	isLikeUrl,
-	isNoteStyle,
-	isNumericStyle,
-	isSentenceCaseStyle,
-	isUppercaseSubtitlesStyle,
-	parseIdentifier,
-	processMultipleChoiceItems,
-	processSentenceCaseAPAItems,
-	retrieveStyle,
-	retrieveStylesData,
-	saveToPermalink,
-	validateItem,
-	validateUrl, } = require('../utils');
-const { coreCitationStyles } = require('../../../data/citation-styles-data.json');
-const defaults = require('../constants/defaults');
-const ZBib = require('./zbib');
-const formatBib = require('../cite');
+import React from 'react';
+import PropTypes from 'prop-types';
+import copy from 'copy-to-clipboard';
+import deepEqual from 'deep-equal';
+import SmoothScroll from 'smooth-scroll';
+import ZoteroBib from 'zotero-translation-client';
+import exportFormats from '../constants/export-formats';
+import { withRouter } from 'react-router-dom';
+import arrayEquals from 'array-equal';
+import {  dedupMultipleChoiceItems, fetchFromPermalink, getBibliographyFormatParameters,
+	getBibliographyOrFallback, getCitation, getCiteproc, isLikeUrl, isNoteStyle, isNumericStyle,
+	isSentenceCaseStyle, isUppercaseSubtitlesStyle, parseIdentifier, processMultipleChoiceItems,
+	processSentenceCaseAPAItems, retrieveStyle, retrieveStylesData, saveToPermalink, validateItem,
+	validateUrl, } from '../utils';
+import { coreCitationStyles } from '../../../data/citation-styles-data.json';
+import defaults from '../constants/defaults';
+import ZBib from './zbib';
+import formatBib from '../cite';
 
 const scroll = new SmoothScroll();
 var msgId = 0;
@@ -1111,4 +1095,4 @@ class Container extends React.Component {
 	}
 }
 
-module.exports = withRouter(Container);
+export default withRouter(Container);

src/js/components/copy-citation-dialog.jsx

@@ -1,17 +1,15 @@
 /* eslint-disable react/no-deprecated */
 // @TODO: migrate to getDerivedStateFromProps()
-'use strict';
-
-const React = require('react');
-const PropTypes = require('prop-types');
-const Button = require('zotero-web-library/src/js/component/ui/button');
-const cx = require('classnames');
-const Input = require('zotero-web-library/src/js/component/form/input');
-const KeyHandler = require('react-key-handler').default;
-const Modal = require('./modal');
-const Select = require('zotero-web-library/src/js/component/form/select');
-const Spinner = require('zotero-web-library/src/js/component/ui/spinner');
-const { KEYDOWN } = require('react-key-handler');
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from './ui/button';
+import cx from 'classnames';
+import Input from './form/input';
+import { default as KeyHandler } from 'react-key-handler';
+import Modal from './modal';
+import Select from './form/select';
+import Spinner from './ui/spinner';
+import { KEYDOWN } from 'react-key-handler';
 
 const locators = [
 	'page',
@@ -210,4 +208,4 @@ class CopyCitationDialog extends React.PureComponent {
 }
 
 
-module.exports = CopyCitationDialog;
+export default CopyCitationDialog;

src/js/components/delete-all-button.jsx

@@ -1,10 +1,8 @@
-'use strict';
+import React from 'react';
+import PropTypes from 'prop-types';
 
-const React = require('react');
-const PropTypes = require('prop-types');
-
-const Button = require('zotero-web-library/src/js/component/ui/button');
-const Confirmation = require('./confirmation');
+import Button from './ui/button';
+import Confirmation from './confirmation';
 
 class DeleteAllButton extends React.Component {
 	state = {
@@ -60,4 +58,4 @@ class DeleteAllButton extends React.Component {
 	}
 }
 
-module.exports = DeleteAllButton;
+export default DeleteAllButton;