How to use package built from cloned repo in React TypeScript

[coffeeDev98]

Hey @mliebelt
If I'm making custom modification in the code and building it through the following commands...

• Clone the repository.
• Run npm install from the root, to ensure that all tools are installed.
• Run npm install in modules/pgn-viewer directory.
• Run npm run build in modules/pgn-viewer) directory.
• Copy the files from the directory modules/pgn-viewer/lib.
• Create new HTML files with the corresponding head and body.

How can I use this in React... ?

[mliebelt]

Well, I am not an expert, how to program and build in React, so here is a little bit some speculation (and if you would share your possible open source repository, I could look at the current state and explain, how that could be changed).

I have a similar (smaller) problem currently with Chessground, and solved it like that:

• If you have a dependency on a (public) repo, you have that declared by having that dependency and the minimal version number included.
• Chessground latest version has bugs in it, that are now fixed, so the repository state I can use, but not the latest version.
• I forked Chessground (to fix the state that I want to have) and replaced the dependency:
  • Before: "chessground": "8.2.0"
  • After: "chessground": "mliebelt/Chessground" (without a version)
• I have to ensure that this fork has exactly the state I want to have, and my build is using just that one.

So if you have a build that is working, you could the following

• Replace your dependency to the library with a dependency to the repo (you host).
• In your build, ensure that as a first step, the dependency of pgn-writer is build.
• After that, the files you normally use (node_modules/pgn-viewer/lib/pgnv.js) should be at the same place, identically imported and used.

I hope I could make my idea clear (enough), so you have a starting point.

[mliebelt]

Ok, I searched for usages of pgn-viewer and found this: https://github.com/coffeeDev98/better-chess/blob/master/package.json

If you replace there

• this: "@mliebelt/pgn-viewer": "^1.5.12"
• with: "@mliebelt/pgn-viewer": "coffeeDev98/PgnViewerJS/modules/pgn-viewer"

maybe that is working. I don't know if it is possible to address a module inside a repo with that dependency syntax, but that is the rough idea.

Then you have to add the following:

"build-pgnv": "cd node_modules/@mliebelt/pgn-viewer && npm run build"
"build": "npm run build-pgnv && react-scripts build"

This will add the build of pgn-viewer to your repo (just the version you are using), and that is done all the time before you build your application with the react tools then.

[coffeeDev98]

Hey @mliebelt ,
Tried the above approach. It worked. Thanks for that!

Came across an import issue when working in react-typescript projects. I may be wrong in the way I've used/imported...
Unable to import pgnEdit, pgnView, pgnPrint separately....

When I went through the code, there's a param to pass to pgnBase (mode) which would render the appropriate mode but this doesn't work.

The component fails to mount.

This Issue only occurs in React-Typescript, the package runs as expected in React-JSX.

[coffeeDev98]

Is this a possible fix...?

In modules/pgn-viewer/src/pgnv.ts

• import & export pgnView, pgnEdit, pgnBoard....

And,

In modules/pgn-viewer/lib/pgnv.d.ts
declare let pgnEdit: (boardId:string, configuration:PgnViewerConfiguration) =>....
declare let pgnView: (boardId:string, configuration:PgnViewerConfiguration) =>....
....

[coffeeDev98]

As of now... pgnBase is the only thing getting exported as per React imports...
Even though the exports are there in index.d.ts file.

I think, since the file to be used post build command is pgnv.js, the other components have to be exported through pgnv.d.ts and pgnv.ts

[mliebelt]

No, I don´t think so. I had initially named the resulting file pgnv.js (because I thought it is appropriate), but there is already a source file named pgnv.ts. So one is the unified library, the other one is just one part of it. This mismatch makes the problems.

I will have a look, rename some source files, so that no mismatch is possible, and ensure that the declarations in package.json and webpack go together well. The problem here is, that this is all (and only) build related, so not so easy to test :-(

[coffeeDev98]

Sorry I can't be of much help... I'm not well versed with packaging and webpack related issues... Would love to look into it if you can give some tips on testing.... Maybe TDD can be a good approach...? :/

[mliebelt]

I do TDD if possible. But here, I have to

• build a release first (locally)
• deploy that somewhere
• use it somewhere else
• ensure that everything is working well.

Could you give me some hint how to start a minimal React project, that just wraps the pgn-viewer, so that this component can then be used somewhere else? If I have here a recipe (don't know much about React), I could construct some contrived example, that maybe later can be expanded to a wrapper around the pgn-viewer then? Just dreaming ...

[coffeeDev98]

You can either use CRA(create-react-app), the following command

npx create-react-app <project-name> --template typescript(if you want the react project to be in typescript)

or you can follow the guide here to create a barebones react

[mliebelt]

Please have a look at my commit 924ce... which does the following:

• rename lib/pgnv.js to lib/dist.js
• add lib/index.d.ts as types

By doing that, you should be able to use the 4 base functions as showed in your screenshot above. I do not know if that fixes all problems, but at least the import should be possible.

[mliebelt]

With the changes from above, I was able to create my first React app, that just display one board with some moves to play. The App function looks like

function App() {
  useLayoutEffect( () => {
    pgnView('board', { pgn: 'e4 e5 Nf3 Nc6 Bb5 a6 Ba4 Nf6', theme: 'zeit', pieceStyle: 'merida'})
  }, [])
  
  return (
    <div className="App" id="board">
    </div>
  );
}

The result is then

[mliebelt]

I did a new release of pgn-viewer today (1.6.0), with breaking changes. Now the import should work as expected, the types are available, and I was able to create the example react component from above without any tricks.

@coffeeDev98 Could you check if that new version is working for you out-of-the-box? If you want to use your fork, you have to merge my changes into your repository.