On Wednesday night, JavaScript MN offered up Zachary Skalko presenting on how to author one's own npm package!

The venue for the Twin Cities' largest meetup group changed again! This time it was hosted at WeWork Uptown. In his introduction, Brandon Johnson mentioned that one of JavaScript MN's sponsors, Twilio, has bought SendGrid which will allow its cloud communications platform to have a posh way to send emails. Brandon also gave a lighting talk in which he brought up some embroidery web site which seemed to have text growing in font size with every paragraph and he suggested the culprit was an ongoing series of opening "header" tags (did he mean the head tag in HTML?) with no close tag counterparts. Brian Mitchell of C. H. Robinson also gave a lighting talk and his had to do with TypeScript in React. ReactElement | null is a pretty common union type. create-react-app of Facebook was used in his example which utilizes Babel to compile TypeScript. Someone in the crowd noticed <> followed much, much later by </> in Brain's markup amid something he was projecting, wherein the two tags wrapped a bunch of stuff, and asked about it. It turns out that this is a React Fragment. You may use it to wrap a JSX or React.createElement() per Brian. I'll get to what Zachary Skalko (pictured at left) had to say in a moment, but first, while we are already off on a tangent, I'd like to regurgitate a The Law of Demeter slide he had which gave the very specific definition of For all classes C, and for all methods M attached to C, all objects to which M sends a message must be instances of classes associated with the following classes:

1. The argument classes of M (including C).
2. The instance variable classes of C.

 
 

(Objects created by M, or by functions or methods which M calls, and objects in global variables are considered as arguments of M.) This Law has two purposes:

1. Simplifies modifications. It simplifies the updating of a program when the class dictionary is changed.
2. Simplifies complexity of programming. It restricts the number of types the programmer has to be aware of when writing a method.

 
 

The Law of Demeter, when used in coordination with three key constraints, enforces good programming style. These constraints require minimizing code duplication, minimizing the number of arguments passed to methods and minimizing the number of methods per class. Zach pointed out how easy it is to import one thing into another thing in other languages. For example:

1. Java
   import java.util.ArrayList
    
2. Python
   import requests

 
 

In contrast, there are a multitude of ways to navigate such in JavaScript:

1. ES6
   import $ from 'jquery'
    
2. CommonJS
   const $ require('jquery')
    
3. RequireJS (the AMD pattern)
   requirejs(['jquery'], function ($) { /* app logic */})
    
4. script tag
   <script src="/jquery/3.3.1/core.js"></script>

 
 

You have to navigate all four ways when you make a packet. For example the "classnames" packet does it like so:

if (
   typeof module !== 'undefined' &&
   module.exports
) {
   classNames.default = classNames;
   module.exports = classNames;
} else if {
   typeof define === 'function' &&
   typeof define.amd === 'object' &&
   define.amd
) {
   define('classnames', [], function () {
      return classNames;
   });
} else {
   window.classNames = classNames;
}

 
 

The name for this sort of catchall inclusion seems to be UMD (Universal Module Definition) and I believe rollup.js will help you make this sort of stuff for your code. There may be a rollup.config.js file sitting side by side with your index.js file (if your package is really just one file) and I think you have to have a package.json file for your package too with a name and a version number speced out. The version number has to increment every time you check in. You will need to have an .npmrc file locally to publish packages and https://registry.npmjs.org has one you may get for starters. When you type an npm install command it is going to look to npm.org by default and this locale has a list of registries that it looks to by default including the one at npmjs.org. The command...

npm adduser

 
 

...should log you into the registry and...

npm publish

 
 

...should publish your package. An example of a shebang or sha-bang (or even "hashbang") might be...

#!/usr/bin/env node

 
 

...and I think these allow for header/footer includes in files, but I don't know how they work. These were namedropped in passing. Brian Mitchell is pictured below.