GifGetterKMP icon indicating copy to clipboard operation
GifGetterKMP copied to clipboard

First go at javascript implementation

Open piannaf opened this issue 4 years ago • 0 comments

A few things I needed to deal with

Dispatcher

I saw that the Main dispatcher is equivalent to the Default dispatcher in JS so I just used default.

create-react-app for jsAPP

NPM packages do not allow upper case characters so I changed it after project creation for consistency with androidApp and iosApp

.gitignore fix

I noticed a lot of cruft so followed these instructions

react-bootstrap for styling

Wanted something that looks a little more like a modern webpage so used a carousel from react-bootstrap.

I put minimal effort into making it work better with images that aren't all the same size/aspect-ratio. But didn't spend enough time to fix the page indicators.

missing javascript dependencies

First, docs are sparse/non-existent no generating a KMP JS library with all dependencies already available. Lots of searching Google and the Kotlin Slack group. And the all seem to be using different versions of plugins and different ways of using the same plugins so it was very confusing. I eventually found an example and this person also made their own plugin to pull the JS dependencies out of the generated jar file.

Second, some dependencies still didn't exist or caused issues.

  • I noticed some dependencies are not published, for example kotlinx-io depends on kotlinx-coroutines-js but that's not published (I ran into this issue before I discovered svok's solution above which made dependency management a lot easier)
  • I ran into a problem with kotlinx-serialization-runtime-js:0.11.1 so I downgraded it to 0.11.0 and it worked fine.
  • I also ran into ktor not resolving text-encoding so had to install it manually.
  • Some kind of issue that I didn't want to figure out so just installed babel-loader as answered here.
  • And, another ktor issue, it was looking for 'ktor-client-core-js' but the build process was outputting 'ktor-client-core' as the JS module so I installed the one with the -js suffix manually

The GifLibrary JS module

  • I couldn’t export GiphyAPI from the library so had to export org then instantiate a GiphyAPI from org.gifLibrary.GiphyAPI
  • The getGifUrls method was mangled so i had to call it as getGifUrls_gfpoua$
  • The url array was output as an ArrayList so I couldn’t just use it. Luckily I could call toArray on it

But it works

At least, on my machine :)

piannaf avatar Jul 26 '19 21:07 piannaf