Document how to use as a JS library?

[cdeil]

@michitaro - I'm completely new to Typescript and pretty new to JS, so apologies for the basic question.

How can one use this library as a simple JS library from a HTML web page?

I did this to generate src/index.js

git clone https://github.com/michitaro/healpix.git
cd healpix
npm install -g typescript
tsc src/index.ts 

and then made an example.html with this:

<script src="src/index.js"></script>
<script>
var result = healpix.ang2pix(12, 42, 43);
console.log(result);
<script>

but then in the browser I get these errors:

Uncaught ReferenceError: exports is not defined
    at index.js:18
example.html:3 Uncaught ReferenceError: healpix is not defined
    at example.html:3

@michitaro - is use as simple JS library something you want to support? If yes, could you please document the steps and give a minimal example how to do it? Is it a good or bad idea to store the generated healpix.js in the repo to make this easier?

[michitaro]

I wrote a webpack.config for standalone build.

Could you try this?

git clone https://github.com/michitaro/healpix.git
cd healpix
npm install
npm run standalone
open standalone/dist/index.html

Now you can use "standalone/dist/healpix.js" as a standalone JS library.

[michitaro]

Or simply including script from CDN like this will also work.

<script src="https://unpkg.com/@hscmap/healpix@1.4.3/standalone/dist/healpix.js"></script>
<script>
alert(healpix.order2nside(0));
</script>

[cdeil]

@michitaro - This works exactly with the commands / example you gave.

My suggestion would be to add those infos here: https://github.com/michitaro/healpix#install and to first show a minimal example how to use the library and print something, before showing the long plotting / canvas example.

Something similar to this: https://github.com/ReactiveX/RxJS#installation-and-usage

@michitaro - Should I send a suggestion via a PR? Or will you do it directly?

[michitaro]

Thank you for the comment.

and to first show a minimal example how to use the library and print something, before showing the long plotting / canvas example. I agree.

@michitaro - Should I send a suggestion via a PR? Or will you do it directly?

PRs are very appreciated.

[cdeil]

At https://github.com/michitaro/healpix#installation-and-usage we currently have:

Then from your Javascript (JS) or Typescript (TS) file, import and use healpix like this:

import * as healpix from 'healpix';

console.log(healpix.order2nside(0));

I tried, and for me this only works with typescript. At least with my Node v10.4.1 from a JS file using import gives a SyntaxError.

This seems to work:

const { order2nside } = require('@hscmap/healpix');
console.log(order2nside(4));

But this, which is more similar to Typescript and Python to import the whole "library" into it's own namespace "healpix" and use it from there doesn't work, it seems healpix is undefined after the require line:

const { healpix } = require('@hscmap/healpix')
console.log(healpix.order2nside(4));

@michitaro - Could you please clarify how to use the library from node JS in the README?

[michitaro]

Oops... Current node handles "import" syntax only if "--experimental-modules" option is given.

The example should be as below

const healpix = require('@hscmap/healpix')
console.log(healpix.order2nside(4));

I'll fix it. https://github.com/michitaro/healpix/commit/3e5fab9a53b570c3fdffb628b6988afc02771744

[cdeil]

@michitaro - Thanks! Needs one more tweak I think, see #10.