Unconventional way of exporting library

Question

Unconventional way of exporting library

dyba opened this issue 9 years ago · comments

So I was trying to use ReactPivot using the JSX approach and treating the library as an external library to be loaded in a script tag. The code looked like this:

<!-- The index.html file -->
<html>
    <head>
        <title>Some Title</title>
        <script src="vendor/fetch/fetch.js"></script>
        <script src="vendor/react/react.js"></script>
        <script src="vendor/react-pivot/react-pivot-standalone-1.12.0.min.js"></script>
    </head>
<body>

// app.js the entry point for the application
import React from 'react';
import ReactPivot from 'react-pivot';
import FixedDataTable from 'fixed-data-table';

// rows, reduce, calculations, dimensions defined as in demo.jsx in the examples folder of react-pivot
React.render(
    <div>
        <ReactPivot
            rows={ rows }
            reduce={ reduce }
            calculations={ calculations }
            dimensions={ dimensions } />
    </div>,
    document.getElementById('main')
);

// webpack.config.js
module.exports = {
    /**
    * Specify dependencies that shouldn't be resolved by webpack, but should
    * become dependencies of the resulting bundle. That is, the index.html
    * file will have to include script tags for the libraries below.
    */
    externals: [{
        'react': 'React',
        'react-pivot': 'ReactPivot'
        'fixed-data-table': 'FixedDataTable'
    }],

I think there's a fundamental problem with the way this library is exported. I'm able to use FixedDataTable and React just fine with the above approach. ReactPivot, however, doesn't follow suit with this convention and so I have to use:

    ReactPivot(document.getElementById('test'), {
        rows: rows,
        dimensions: dimensions,
        reduce: reduce,
        calculations: calculations,
        activeDimensions: ['Transaction Type']
    });

Which actually does get explained in the README of this project. I realized my brain made a shortcut and assumed that I could use this library the same way I've been using other libraries.

While not an urgent issue, I think it may be worth looking into to discover an approach that other libraries of more repute follow. I haven't spent much time yet understanding the different ways JS code is exported as "modules", so it may be a while before I get to submitting a PR for this. I leave this issue for someone who is more proficient to address for now.

Anders Riutta · Answer 1 · Sun Mar 19 2017 07:11:54 GMT+0800 (China Standard Time)

This fork appears to follow a more conventional export format: https://github.com/rgbkrk/pivot-pivot

David Guttman · Answer 2 · Sun Mar 19 2017 07:37:55 GMT+0800 (China Standard Time)

Just to clarify, the standalone version mentioned above is for people who don't want to mess with any dependency management and want it to work with a single script tag. My view is that if you're handling your own React, browserify/webpack is a better way to go.

That said, I'm open to a PR to handle the use case mentioned above in addition to the standalone version. Going to close this for now.