Example of how to use as a node module?

[petehjfd]

Hi

Please can you provide an example of how to use the npm package?

The readme on npmjs.com points to the documentation on the website, but the website doesn't contain any info on using the npm package.

None of the following work:

import TL from "@knight-lab/timelinejs";
import TL from "timelinejs";
const TL = require('@knight-lab/timelinejs');
const TL = require('timelinejs');

Thanks

[godmar]

Oddly enough, the authors of this package do not support this use case, see #611 #589 #308 #633
Here's a work-around that appears to work for me; with this work-around, I can embed a timeline in a CRA React application.

• npm i @knight-lab/timelinejs
• Then add a file node_modules/@knight-lab/timelinejs/index.js with this content

export { Timeline } from './src/js/index.js';

• This will provide you with the JS code, you can now import it like so:

import { Timeline } from '@knight-lab/timelinejs';

To build the CSS, I did this:

cd node_modules/@knight-lab/timelinejs
npm install
npm run stage_latest

when it asks for a version number, hit ctrl-c.
This should have built the timeline.css file, which you can then import as:

import '@knight-lab/timelinejs/dist/css/timeline.css';

The authors of the package seem to be fluent with webpack and the remaining toolchain so I'm a bit at a loss as to why they don't include the prebuilt .css file in their npm, along with a way to import the JS code. However, I'm not certain what unintended consequences, if any, this would entail.

WFM example:

import {useRef, useEffect} from 'react';     
import { Timeline } from '@knight-lab/timelinejs';                                     
import '@knight-lab/timelinejs/dist/css/timeline.css';                                 

function App() {
  const ref = useRef(null);                                                            
  useEffect(() => {                                                                    
      if (ref.current != null) {                                                       
         new Timeline(ref.current, "https://docs.google.com/spreadsheets/d/e/2PACX-1vR5G_GTugmSh6SALnk3Wd3a8J2sp2Z6EJYE3vypBkYQEAxuvxGRyaI6FQe_PAvtDTPblgVOel5Di_9t/pubhtml?gid=0&single=true");                                                                      
      }
  }, []);                                                                              

  return (
    <div style={{ width: "100%", height: "600px"}} ref={ref} />
  );
} 
  
export default App;

[petehjfd]

Hi @godmar, thanks for the suggestion.

I can't add a file to the node_modules folder, because that folder is created during deployment. But I managed to create a helper JS file in my project containing just:

export { Timeline } from '/node_modules/@knight-lab/timelinejs/src/js/index.js';

which I can then import with:

import { Timeline } from "../helpers/timelinejs";

I'm not using React, so I'm just manually bundling the CSS in with the rest of my Sass files.

This seems to be working, thanks.

Leaving the issue open, as this is really an issue that should be resolved properly.

[JoeGermuska]

As the person who adapted TimelineJS into a webpack buildable project, I'm flattered by "The authors of the package seem to be fluent with webpack and the remaining toolchain" but would also need to disclaim it.

Put simply, we deploy TimelineJS to NPM mostly because it's easy, and because people had hacked an NPM package from the earlier codebase. We haven't had usecases ourselves to use TimelineJS from NPM, so appreciate feedback, and even pull-requests that make this more useful for the community that needs it.

Agreed that this qualifies as an open issue—thanks for raising it—but I don't know when it will move to priority position for Knight Lab.

[godmar]

We haven't had usecases ourselves to use TimelineJS from NPM,

You're publishing in the npm registry, so it's somewhat expected that your code will follow the standard conventions used there.

Regarding a PR: I can put one together, but please note that it requires changes to your staging script which I may not be able to test due to the fact that the cdn.knightlab.com repository to which it refers is not public. The staging script would need to be split into 2 - one to just build the CSS and other files in the dist folder, and a second script or detachable step to copy it into your cdn.knightlab.com.

Your current npm seems to already include a bunch of unrelated files, so including the prebuilt dist/ folder will not violate any existing practices.

I'm actually a bit confused why the dist/ folder isn't part of your npm. If I run npx npm-packlist after the staging step, it says the dist/ folder would be included in the published npm package. But it's not in the packages you've published; do you remove the dist/ folder before running npm publish? If so, all that's needed is a really minor fix - namely, make sure the dist/ folder exists when you publish, and then add the index.js file I describe above.

[godmar]

I added a PR. If I understand things correctly, including the dist/ directory in your npm may just be a matter of reversing the order of 2 steps in your deployment process. If you run npm run stage_latest before npm publish it should work. Perhaps you could test it.

[JoeGermuska]

I have merged PR #706 and published version 3.8.18 to the npm registry.

While I have not tried it from NPM, I created a simple test yesterday modeled off of @godmar's example above after npm installing my local copy of the updated TimelineJS library.

Let us know if this isn't solving the issue.