Use of elm-github-install

[kyasu1]

As you may know elm-install allows installing elm-packages from github repositories. However it fails to install this package since there is no version tags. After reading carefully the docs, I found defining the dependency-source in my elm-package.json helps elm-install to find this repository and install it.

{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "src"
    ],
    "exposed-modules": [],
    "native-modules": true,
    "dependencies": {
        "elm-lang/core": "5.1.1 <= v < 6.0.0",
        "ohanhi/elm-native-ui": "2.0.0 <= v < 3.0.0",
        "user/elm-native-ui-anohter-package": "1.0.0 <= v < 2.0.0"
    },
    "dependency-sources": {
      "ohanhi/elm-native-ui": {
        "url": "git@github.com:ohanhi/elm-native-ui",
        "ref": "master"
      }
    },
    "elm-version": "0.18.0 <= v < 0.19.0"
}

But there is still a problem that the elm-install can not detect the change of elm-ntaive-ui repository. So we need to manually clone it to the packages directory to be updated.

$ git clone git@github.com:ohanhi/elm-native-ui.git elm-stuff/packages/ohanhi/elm-native-ui/2.0.0

Anyway use of the elm-install allow us not to rely on the python utility. Write package dependencies then type elm-install and go is pretty cool for me.

This package is still experimental so I guess it will not be versioned soon. But adding a tag 2.0.0 may help us at least not need to add dependency-source.

Please let me know if what I am doing is wrong... I am not expert at all :p

[kyasu1]

After reading the README of elm-install carefully, I noticed that we could specify a commit hash as a ref value. So if we want to install the latest commit of elm-native-ui, the elm-package.json becomes like this.

{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/ohanhi/elm-native-ui.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
     "native-modules": true,
     "dependencies": {
         "elm-lang/core": "5.0.0 <= v < 6.0.0",
         "elm-lang/html": "2.0.0 <= v < 3.0.0",
         "ohanhi/elm-native-ui": "2.0.0 <= v < 3.0.0"
     },
     "dependency-sources": {
       "ohanhi/elm-native-ui": {
         "url": "git@github.com:ohanhi/elm-native-ui",
         "ref": "3c2716710c218010690ef9a1e580cfd55bb97f67"
       }
     },
     "elm-version": "0.18.0 <= v < 0.19.0"
}

Although you need to set the ref value when the package is updated, this is much simpler than manually cloning repository. And the whole installation process becomes pretty simple and easy. For example, with this file in the Counter directory, the installation instructions become like follows.

Counter Example

Assuming you already have react-native, elm and elm-install setup. From the command line create a new project:

$ react-native init Counter 

Copy all the files in the examples/Counter directory to the newly created Counter directory, overwrite package.json, index.ios.js and index.android.js.

$ cp -R examples/Counter/* Counter/

Install Elm packages:

$ cd Counter
$ elm-install

Remove the examples directory from the elm-stuff directory since it causes weird Duplicate module name error if exists. Look at here for more details. This step should not be necessary but I could not find a better solution

$ rm -rf elm-stuff/packages/ohanhi/elm-native-ui/2.0.0/examples

Compile Elm to JavaScript:

$ npm run compile 

finally:

$ react-native run-ios 

[kyasu1]

I have found a way to ignore some directories when RN packaging here. Place a file called rn-cli.config.js at the root project directory with the following contents.

const blacklist = require('react-native/packager/blacklist');

module.exports = {
  getBlacklistRE: function() {
    return blacklist([/elm-stuff\/.*/]);
  }
};

With this file included we no longer need to remove example directories, the whole process becomes pretty straightforward.

$ react-native init Counter 
$ cp -R examples/Counter/* Counter/
$ cd Counter
$ elm-install
$ npm run compile 
$ react-native run-ios