Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save frank-dspeed/48d3f0f26464303a88adf5667725231b to your computer and use it in GitHub Desktop.
Save frank-dspeed/48d3f0f26464303a88adf5667725231b to your computer and use it in GitHub Desktop.
Stealify Lang ECMAScript Package Consumption via Wrapper Packages Pattern:

no matter what package and package manager for the code no matter if you consume the git source or the packaged version that gets distributed via other channels

./wrapper_module_name/<git_repo or node_modules/dependencie_name>
./wrapper_module_name/<optional other wrappers like eslint if needed>
./wrapper_module_name/main_or_module_name.js // Source of your wrapper maybe the only file with package.json if all goes well
./wrapper_module_name/main_or_module_name.d.ts // gets generated from the main of the wrapper that is defined in the package.json generated via tsconfig.json settings
./wrapper_module_name/tsconfig.json // contains fixes for the typescript consumption if needed
./wrapper_module_name/package.json // contains fixes for the consumption
./node_modules // contains the workspaces so the wrapper_module_name
./package.json

modify your ./package.json wrapper_module_name and name in package.json: name should match if no org is envolved.

{
  "workspaces": [
    "wrapper_module_name"
  ]
}

now you can start consuming all the good parts:

./your_you.js final we consume!

import { moduleNamedExport } from 'wrapper_module_name';

How does it work what happens here

npm workspaces give us the ability to install packages local while we have full control over the package and can even unlock or patch it if needed that gives us a uniq fast path to consume packages from package authors that did fail to bundle and package the code right for the Stealify Lang ECMAScript Module Standard due to tooling problems most of the time.

before that patterns got invented it was needed to hardfork packages often to consume them partial.

History and shim pollyfill

before that we often linked into the node_modules folders inside of the module and edited the graph. it was a mess and hard to debug now we got the clean graph in our outer folder so our mainproject. Even the most basic file tooling is able to audit the dependencies easy and that was badly needed

also this outperfoms newcomers like pnpm which is a compitor to npm that is written in typescript and uses verdaccio a npmjs reverse proxy as main component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment