Javascript Packages

⚠️ This writing is a work in progress.⚠️

Packages and Modules

The following content was pulled from the link in the section header.

NPMJS website is very clear on these two things:

A package is a file or directory that is described by a package.json file. A package must contain a package.json file in order to be published to the npm registry. A package is any of the following:

a) A folder containing a program described by a package.json file.
b) A gzipped tarball containing (a).
c) A URL that resolves to (b).
d) A git url that, when cloned, results in (a).

A module is any file or directory in the node_modules directory that can be loaded by the Node.js require() function.
To be loaded by the Node.js require() function, a module must be one of the following:
A folder with a package.json file containing

a "main" field.
A folder with an index.js file in it.
A JavaScript file.

In the context of a Node program, the module is also the thing that was loaded from a file. For example, in the following program: - https://npmjs.com

Note: Since modules are not required to have a package.json file, not all modules are packages. Only modules that have a package.json file are also packages.

As well its good to know that:

undefined

and that

Node modules do not add to the global scope without explicetly being pointed to. I.E. 'window.variable = hahaha'

Example: Create Node.js Modules

The following content was pulled from the link in the section header

Create a package.json file

create a package.json file : 'npm init'
required fields: name, version, 'main' fields
The default name is index.js.

Create the file that will be loaded when your module is required by another application

Once your package.json file is created, create the file that will be loaded when your module is required. The default name for this file is index.js.
In the file, add a function as a property of the exports object. This will make the function available to other code:

'''exports.printMsg = function() { console.log("This is a message from the demo package"); }'''

Test your module

Publish: "npm publish --access public"
mkdir test-directory
cd ../path/to/test-directory
npm install
create a test.js file which requires your module and calls your module as a method.

"var req = require('request')"

On the command line, run node test.js. The message sent to the console.log should appear.

Example: Publish to NPM

The following content was pulled from the link in the section header

!npm login

# Creating a folder named how-to-publish-to-npm
 mkdir how-to-publish-to-npm

# Navigating into the folder
 cd how-to-publish-to-npm

# This command runs you through a few questions and creates a package.json file for you at the end.
 !npm init

! npm i -g npm

Heres an article with more instructions and best practices.

Package.json to use Git Gists

Git URLs used for npm packages can be formatted in the following ways:

git://github.com/user/project.git#commit-ish
git+ssh://user@hostname:project.git#commit-ish
git+http://user@hostname/project/blah.git#commit-ish
git+https://user@hostname/project/blah.git#commit-ish

The commit-ish can be any tag, sha, or branch that can be supplied as an argument to git checkout. The default commit-ish is master.

Python Github Gist Javascript

Save a Github Gist using Python.

import os
 def readFile(filename):
   f = open(filename, 'r')
   content = f.read()
   f.close()
   return content
 
 def getFile(url, savesAs, filename):
   responce = "wget "+url+" ; mv "+savesAs+" "+filename+"; "
   os.system(responce)
 
 def displayCode(url, savesAs, filename):
   getFile(url, savesAs, filename) 
   display(IPython.display.Javascript( readFile(filename) ) )
 
 def getGitGist(url, folderPath, gistName, filename):
   responce = "git clone {}; mv {}/{} {}; rm {} -r".format(url, folderPath, gistName, filename, folderPath);
   os.system(responce)
 
 def displayGitGist(url, folderPath, gistName, filename):
   getGitGist(url, folderPath, gistName, filename)
   display(IPython.display.Javascript( readFile(filename) ) )

url = 'https://gist.github.com/c7b95a99dea7a19ceb9a366f0ef2a1ce.git'
 folderPath = 'c7b95a99dea7a19ceb9a366f0ef2a1ce'
 gistName = 'HelloWorldGist'
 filename = 'gitgist.js'
 displayGitGist(url, folderPath, gistName, filename)

ObservableHQ Modules

You can use ObservableHQ to create test and export JS Modules

Here are some more notes on it:

Introduction Require Embedding HTML

And and embedding example:

Modules in the browser

from google.colab import drive

drive.mount('/cont/')

ls

cd

! echo 'console.log("This?")' > index.js

import os
 import IPython
 def readFile(filename):
   f = open(filename, 'r')
   content = f.read()
   f.close()
   return content
 
 def getFile(url, savesAs, filename):
   responce = "wget "+url+" ; mv "+HelloWorldGist+" "+filename+"; "
   os.system(responce)
 
 def displayCode(url, savesAs, filename):
   getFile(url, savesAs, filename) 
   display(IPython.display.Javascript( readFile(filename) ) )
 
 def getGitGist(url, folderPath, gistName, filename):
   responce = "git clone {}; mv {}/{} {}; rm {} -r".format(url, folderPath, gistName, filename, folderPath);
   os.system(responce)
 
 def displayGitGist(folderPath, gistName, filename):
   url = 'https://gist.github.com/'+ folderPath +'.git'
   getGitGist(url, folderPath, gistName, filename)
   # return getFile(url, filename, filename)
   display(IPython.display.Javascript( readFile(filename) ) )

folderPath = 'c7b95a99dea7a19ceb9a366f0ef2a1ce'
 gistName = 'HelloWorldGist'
 filename = 'index.js'
 displayGitGist(folderPath, gistName, filename)

! echo "" > index.html

import IPython
 IPython.display.HTML(filename="./index.html")

Safari, Chrome, Firefox and Edge all support the ES6 Modules import syntax.

If you want to load ES modules on a different domain, you’ll need to enable CORS.

Some more on that:

For information on using module, see our JavaScript modules guide. Unlike classic scripts, module scripts require the use of the CORS protocol for cross-origin fetching - javascript.info

Scripts without async , defer or type="module" attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.
The script should be served with the text/javascript MIME type, but browsers are lenient and only block them if the script is served with an image type (image/); a video type (video/); an audio (audio/*) type; or text/csv. If the script is blocked, an error is sent to the element, if not a load event is sent. - script

Charles Karpati | Javascript Packages