Webpack and Rollup support

[larsgw]

See #151

[larsgw]

Or rollup, I guess...

[FelixBenning]

Any updates on this? The only thing that attempts to do citations with bibliography seems to be distill. And there are several issues with it:

• it was recently announced to be on Hiatus and the github project seems to be abandoned
• You can not have Citations/bibliography without all the CSS, and other stuff added to the distill website.
• They use bibtex-parse-js under the hood, which was abandoned 5 years ago and has bugs.

So I want to attempt factoring out that citation mechanic as a separate module to allow for something akin to the \textcite{citeKey} \printbibliography mechanic in latex. And of course use a maintained citation parser as a backend. Since distill uses rollup (and rollup seems to be the most modern package manager[?]) I thought I would try to start my project with that. But I am unable to import Cite from this package. I am also relatively new to web development so I am currently at a bit of a loss how I might go about working around this.

[larsgw]

I personally never use Webpack and I never got around to try making it work yet. However, I think that it should work mostly apart from an issue that should be fixed in the next release (https://github.com/citation-js/citation-js/issues/156, https://github.com/citation-js/citation-js/issues/150).

[FelixBenning]

Thank you for the promt response - I just realized that there is also the citation-js repository cf https://github.com/citation-js/citation-js/issues/129. Is the npm package citation-js generated from this repository or the new one? Because the link still points to this repository. Should I use @citation-js/core instead? Because https://citation.js.org/ tells me to use citation-js still.

I am getting some warnings when compiling with rollup, e.g.:

(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on "path", "url", "stream", "http", "punycode", "https", "zlib" and "querystring". You might need to include https://github.com/snowpackjs/rollup-plugin-polyfill-node
http://localhost:8088 -> C:\Users\felix\code\bibcite\dist
http://localhost:8088 -> C:\Users\felix\code\bibcite\examples
(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
child_process (guessing 'require$$0$4')
path (guessing 'require$$1$8')
url (guessing 'require$$2$2')
stream (guessing 'require$$0$3')
http (guessing 'require$$1$7')
punycode (guessing 'require$$0$2')
https (guessing 'require$$4$4')
zlib (guessing 'require$$5')
querystring (guessing 'require$$0$5')
(!) Circular dependencies
node_modules/@citation-js/core/lib/Cite/index.js -> node_modules/@citation-js/core/lib/Cite/log.js -> node_modules/@citation-js/core/lib/Cite/index.js
node_modules/@citation-js/core/lib/Cite/index.js -> node_modules/@citation-js/core/lib/Cite/log.js -> C:\Users\felix\code\bibcite\node_modules\@citation-js\core\lib\Cite\index.js?commonjs-proxy -> node_modules/@citation-js/core/lib/Cite/index.js
node_modules/@citation-js/core/lib/plugins/input/register.js -> node_modules/@citation-js/core/lib/plugins/input/data.js -> node_modules/@citation-js/core/lib/plugins/input/chain.js -> node_modules/@citation-js/core/lib/plugins/input/register.js
...and 4 more

and in the browser Uncaught TypeError: Stream is undefined even though I have the nodePolyfills(), plugin from rollup-plugin-polyfill-node. Oh, and if I don't manually install @rollup/plugin-json, it does not seem to compile at all.

[larsgw]

Is the npm package citation-js generated from this repository or the new one? Because the link still points to this repository. Should I use @citation-js/core instead? Because https://citation.js.org/ tells me to use citation-js still.

So the main repository with all the code is https://github.com/citation-js/citation-js, which is published on npm as @citation-js/core and a number of plugins (https://github.com/citation-js/citation-js#plugins). This repository is now a wrapper around the @citation-js/* packages to provide the exact same interface as before. You can use either but @citation-js/core is the main package now (just be sure to include the plugins you need). See also https://github.com/citation-js/citation-js/issues/129.

I am getting some warnings when compiling with rollup

It looks like the main cause is that the browser-specific alternatives to node-fetch and sync-fetch are not being picked up. These dependencies specify an alternative code path in the browser field of package.json, but it looks like this is not picked up by Rollup by default (https://github.com/rollup/rollup/issues/185).

[FelixBenning]

I tried

import { nodeResolve } from "@rollup/plugin-node-resolve";

// ...

    nodeResolve({browser: true}),

but that did not appear to change any of the warnings. I think I'll take a break from this today

[larsgw]

Hm, I'll have to try that at some point. Apart from that, let me know if I can help.

[FelixBenning]

If you want to take a look: https://github.com/FelixBenning/bibcite

it is pretty much a minimum working example at this point since I have just started with the configuration of rollup, optimistically created a bunch of class skeletons and tried to import this library

[larsgw]

So by trial and error I found a number of things to improve:

1. rollup seems to work a lot better if nodeResolve is the first plugin
2. Cite is imported incorrectly (you need import { Cite } from ...)
3. you need to load @citation-js/plugin-bibtex to use BibTeX

To solve step 2 and 3 you can also use the npm package citation-js instead of @citation-js/core depending on what you prefer.

[larsgw]

Regarding the first point, browser: true is the right way to go but it doesn't get applied because of the order of the plugins.

[FelixBenning]

Thank you so much! Then I'll switch back from astrocite later

[FelixBenning]

Okay so I tried all these changes but it already does not like

const bib = new Cite()

the browser says

Uncaught TypeError: citationJs.Cite is not a constructor

and using

const bib = Cite()

results in

Uncaught TypeError: citationJs.Cite is not a function

see commit: https://github.com/FelixBenning/bibcite/tree/8ace4b5b4c0dc60dae1b0e2669a221aa603809c7

[larsgw]

Okay so if you use citation-js instead of @citation-js/core you should not use the brackets import { Cite } ... but instead what you had before. Sorry for the confusion.

[FelixBenning]

I actually switched to citation-js in the hopes of making the errors go away 😂 . I got it to work for citation-js but did not manage to do so for a @citation-js/core and @citation-js/plugin-bibtex. I am not really sure how you activate the plugin so that you can pass bibtex to the Cite constructor again.

Fortunately I have realized that this entire parsing business is orthogonal to my problem anyway. Zotero can in fact export CSL JSON and then I do not actually need any parser. I'll probably still try to enable the use of a parser but probably just as an optional callable passed to my library instead of built in. Then people can use whatever parser they want and I can concentrate on what I want to do right now - a citing framework for html.

[larsgw]

Sounds good.

I am not really sure how you activate the plugin so that you can pass bibtex to the Cite constructor again.

Normally this, unless that doesn't work.

import '@citation-js/plugin-bibtex'