Personal Update: I finally managed to change my github username with all its dependencies to aghontpi, it was less work than I expected. Gosh, Its been 6 months already..since I decided to change my username. Incase my future self is wondering, its still work from home, probablly will go chennai after new years’ i.e 2021.

This month was boring as hell in terms of office work, since I had to work on Extjs, I introduced some flare into it, but making it similar to react, because of this, it much easier to work on.

The more important stuff - Learnt to publish a package in npm.

Backstory

So I wanted to do this for almost a year, I never got around it, main reason being, the other person who’s collaborating leaving. One of my colleagues & a good friend of mine asked if we could do any open-source projects, this was after he just demonstrated a angular componenet that he was building. It looked cool, So I told him Why not publish this?. So that is what we did, but decided to do it for react and publish it to npm.

Reason/Goal

I wanted to learn, what are the steps necessary to

  • publish to npm,
  • convert a component so that it can be published,
  • generate build
    • compiling typescript with types file
    • bundle the whole library as package
    • comparing webpack, lerna, rollup, etc. and lastly
  • just for the fun of it

The idea

The idea is Table, the logic and functionality was all handled by my friend, I took care of remaining things. left the use cases for him to handle.

So what I learnt?

Bundling

Removing react-scripts to custom scripts

After some re-search found react-scripts was good, but not suitable for a libaray. so went ahead with just using babel,

rimraf lib/ && babel src -d lib/

rimraf lib/ && babel src --watch -d lib/

.babelrc.js

module.exports = {
  presets: [
    [
      "@babel/preset-react",
      {
        development: process.env.BABEL_ENV === "development",
      },
      "@babel/preset-env",
    ],
  ],
}

but babel can not bundle/compile css files, which was used in out project, so researched further on bundlers.

moving to webpack

The final decision came down to choosing between rollup and webpack. rollup was new to me, webpack, I already had experience with.. & my requirements was pretty simple, bundle files to /lib/index.js. So went ahead with just using webpack.

processing in webpack

rimraf lib/ && webpack

rimraf lib/ && webpack --env mode=dev --watch

webpack.config.js

const path = require("path")
const includeFolder = path.resolve(__dirname, "src")
const outputFolder = path.resolve(__dirname, "lib")

module.exports = (env, argv) => {
  const mode = env ? (env.mode == "dev" ? "development" : "production") : "production"
  console.log(`running in ${mode} mode`)

  return {
    entry: "./src/Index.tsx",
    mode,
    output: {
      filename: "index.js",
      path: outputFolder,
      library: "dynamic-table-react",
      libraryTarget: "umd",
    },
    module: {
      rules: [
        {   //process css files
          test: /\.css$/i,
          include: includeFolder,
          use: ["style-loader", "css-loader"],
        },
        {
          // process js and ts files
          test: /\.(js|mjs|jsx|ts|tsx)$/,
          include: includeFolder,
          use: {
            loader: "babel-loader",
          },
        },
      ],
    },
    externals: {
      react: "react",
      "react-dom": "react-dom",
    },
    resolve: {
      extensions: [".js", ".jsx", ".ts", ".tsx"],
    },
  }
}

renamed .babelrc.js to .babelrc

// using preset to process react and typescript files
{                       
    "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
}

Genrating Types file

generating types file .d.ts was soo much pain, bacause webpack could not do it, (at least at the time of writing this).

tsc could do it, but it needs tsconfig.json and also I would have to include it as seperate script in package.json, This is where I thought I should have went with rollup or tsdx.

I have not yet added this to the package, still experimenting on stuff, Will update this once I complete that part.

structuring package.json

Stuff to configure in package.json, importantly main, scripts, types file, peer dependencies.

{
    ...,
    "main": "lib/index.js",Removing react-scripts to custom scripts
    "peerDependencies": {
        "react": "^x.x.x",
        "react-dom": "^x.x.x"
    },
    "scripts": {
        "build": "rimraf lib && webpack",
        "start": "rimraf lib/ && webpack --env mode=dev --watch"
    }
}

since we added react to be a peer-dependency, we oughta add following to webpack config.


externals: {
    "react": "react",
    "react-dom": "react-dom",
  }

Other minor stuff

  • building and publishing commands with npm/yarn
  • using yarn link/ npm link while developing
  • maintain packages in npmjs (admin setting for package)

conclusion.

It was fun learning, creating and publishing the package. The link to the package. untill next time -aghontpi.