Images and contributing

[ajGingrich]

I would like to use and contribute to this project as I am building a pgn viewer with React. How can I be of the most help at the moment?

I noticed that you gave a major WIP warning and the last build seems fine to me with the exception of the images. Could you please clarify your suggested use of next images? I only see that the images are copied into my node_modules folder and then the path

../src/components/assets/chesspieces/${pieceTheme}/${pieceColour}${piece.toUpperCase()}.svg

is not working. I checked in console and the sources are [object object]

[siansell]

Hi Andrew,

Thanks, it's been a couple of weeks since this was looked at as I'm pretty time-poor at the moment. Development will be continued, as I want to use this on a WIP project and I hope to have some time next week. I probably made it available via NPM too soon, but was learning how these things work (I've never open-sourced a React component before!)

I've just checked my two test projects quickly (made with create-react-app & nextjs) and they both seem to work fine with 0.5.3, so I don't remember exactly what my warning was about, but I do recall it was indeed something to do with how the images are imported (with await import) - will see if I can reproduce it. NPM was glitchy too, at the time.

Regarding next-images, I just have a next.config.js in the root of my project with the following content as in the next-images README:

const withImages = require('next-images')
module.exports = withImages()

The images are then inlined in my console. Versions:

    "next": "^5.0.0",
    "next-images": "^0.9.2",
    "react": "^16.2.0",
    "react-chessboardjs": "^0.5.3",
    "react-dom": "^16.2.0"

Any contributions are welcome! Testing and the build process in particular (is rollup a good choice?), as I am fairly new to all this...

[siansell]

Also meant to ask whether you're aware of any existing JS PGN parsers that support variations? All my previous attempts at writing a better JS/React PGN viewer have stalled here, as I just don't have the time (or skill?!) to write my own parser (especially with PGN being such an unsatisfactory "standard"!).

I've investigated existing projects in-depth and found nothing satisfactory.

[ajGingrich]

No worries about lack of time, I understand the feeling. I just had a deadline last week so now I have a little more time to look into this.

I am in a similar situation, creating my own npm package but very new to this as well. Mine will principally parse inner html and read <pgn> tags creating a new board in each instance. I have nothing on NPM though. [https://github.com/ajGingrich/react-pgn-viewer]()

I setup my next.config.js as described and not working, I'm sure I'm missing something. I haven't used next.js before so that could be a problem.

As for the build process, I did some reading and I think you made the right choice with rollup. It seems to be the way to go for NPM packages. I'm only experienced with webpack but I can get familiar with rollup. How are you developing? e.g. serving the bundle and opening in browser? I can work on adding that feature if you like. I might also take a look into improving the image loading if you don't mind.

I found a lack of adequate pgn parsers as you mentioned in both JS and React thats what lead me to start creating my own. Hopefully I can add quality features such as variation support once I get the groundwork laid.

[siansell]

For dev, I'm running yarn dev in the repo root, and have a couple of test projects (one create-react-app and one nextjs) that just render the component. I use yarn link to link the test projects to the local repo, and rollup watches for file changes and rebuilds. I'll get the nextjs project on GitHub at some point.

By all means take a look at the image importing, that was causing the most problems!

I'm also wondering if react-dnd is the best choice for the drag and drop functionality, but haven't investigated the alternatives properly yet.

[ajGingrich]

@Sorry for the delay, I have been messing around with rollup quite a bit. I read a comment about your development technique and it sounds good, but I went ahead and added an example for development . I would like to further optimize with gulp later.

I think I found I good technique for dynamically importing the images. By adding rollup-plugin-url, syntax-dynamic-import to the .babelrc and then running rollup with --experimentalDynamicImport, we can dynamically import in the piece.

import('./assets/chesspieces/wikipedia/wK.svg')
  .then(image => this.setState({ isLoaded: true, pieceImage: image }))
  .catch(error => console.log(error))

The only problem I forsee is that, import doesn't accept a template literal so we can't use

import(`./assets/chesspieces/${pieceTheme}/${pieceColour}${piece.toUpperCase()}.svg`)

it would be possible to get around this with a bunch of really ugly switches or ifs but I don't know how you want to handle this or if you have any ideas. Let me know what you think and feel free to check out branch. I'm still cleaning it up but doing some testing, I noticed that any actions are messing up the render but I don't know if that is isolated to my example. I'm going to test using with yarn link later today.