Home Software 01 Github 02 Colabs 03 Shell Basics 04 Apis 05 Webscraping 06 Nbdev 07 Javascript Packag... 08 Cloud Functions 09 Browser Extension Css Css Animations Javascript Llm Paradigms Protocols Websites

Don't Look! I'm changing!

URL Copied

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

BinderBinderBinderOpen Source Love svg3

NPM LicenseActiveGitHub last commit

GitHub starsGitHub watchersGitHub forksGitHub followers

TweetTwitter Follow

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 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

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

  1. Create a package.json file

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

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

  1. Test your module

"var req = require('request')"

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:

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