Installing GitHub repos or Gists directly as npm packages

This is something that came across in our project that we think it's pretty useful. And despite now having the ability to host your own npm packages on the Github package Registry; some people might find this helpful, even if the repo itself didn't mean to be an npm isntallable module.

Install from a GitHub Repository

> npm install <githubname>/<githubrepo>

That's the basic syntax, although you might want to use the explicit version:

> npm install github:<githubname>/<githubrepo>

BTW, this works with private repos too! Also does Github Package Registry ones. But it is possible that you will be prompted with the Git Credentials Manager to put your user/pass in order to continue.

Specify a version to install

The good part, is that you can also specify versions (using semver), as in every npm package. And update them afterwards accordingly.

> npm i github:<githubname>/<githubrepo>[#semver:<semver>]
# Example:
> npm i github:lodash/lodash#semver:4.17.15

And another cool thing about this github option is that npm allows you to specify specific commits too!

> npm i github:lodash/lodash#ddfd9b1 

It will use the main branch in the respository, by default; usually master.

Installing from a gist directly

"Installing from a gist?" You might say. Sometimes it's useful to have little snippets that aren't as important as to make an npm package out of them in Github Gists.

Take a look this example: https://gist.github.com/gangsthub/0bce1161cfd2aa91ae7cad9abb42c342

DeepClone-js

Utility to clean up circular references while creating a new reference of an object performing a deep copy (as oposite to a shallow copy). Bear in mind it doesn't work with some data types: Date, Map, RegExp, Set, TypedArray...

📦 Install

npm i -S gist:0bce1161cfd2aa91ae7cad9abb42c342

Usage

import { deepClone } from 'deepclone-js'

const source = {
  b: 1,
}

const original = { ...source }
original.c = original // 👉🏼 Circular reference

const copy = deepClone(original)
// expect(copy).toEqual(source) // -> true

view raw README.md hosted with ❤ by GitHub

	/**
	* @param {Object} object
	* @returns {Boolean}
	*/
	const isFalsy /* So, it's not an object */ = object => !object
	/**
	* Matches object type
	* @param {Object} object
	* @returns {Boolean}
	*/
	export const isObjectType = object => !!(typeof object).match(/object/)
	/**
	* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value#Examples
	* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet
	*/
	const getCircularReplacer = () => {
	const seen = new WeakSet()
	return (_key, value) => {
	if (typeof value === 'object' && value !== null) {
	if (seen.has(value)) {
	return
	}
	seen.add(value)
	}
	return value
	}
	}
	/**
	* @param {Object} object The object to be cloned
	* @returns A copied value representing a new reference and discarding circular references
	*/
	export const deepClone = object => {
	if (isFalsy(object)) return {}
	if (!isObjectType(object)) return object
	return JSON.parse(JSON.stringify(object, getCircularReplacer()))
	}

view raw deepClone.js hosted with ❤ by GitHub

	{
	"version": "0.0.3",
	"name": "deepclone-js",
	"main": "deepClone.js"
	}

view raw package.json hosted with ❤ by GitHub

If they have a package.json properly configured, you can install them.

You can then do:

> npm i gist:0bce1161cfd2aa91ae7cad9abb42c342

Note, the hash is the id of the gist, also used in the URL.

That's it! Also it's my first published post on Dev.to! Make sure to:

❤ 😜

Comments

[Ryan Dsouza]

The semver syntax doesn't work. Is there any alternative to that?

[Paul Melero]

Does this example work for you?

npm i github:lodash/lodash#semver:4.17.15

Remember, npm is expecting a package.json in the root of the Github repo.

[Ryan Dsouza]

Ohh. I forgot to mention I'm using yarn. Should it work with yarn as well?

[Paul Melero]

For repositories it should be yarn add <git remote url>. I don't know if it works for gists, though! I barely have used yarn 🙏🏽😉

[Yair Even Or]

codesandbox.io doesn't find anything if you type gist:0bce1161cfd2aa91ae7cad9abb42c342 in the packages searchbox

[Gift Egwuenu]

This came in handy for me at the right time. Thanks!