loading...
Cover image for Sometimes You Just Need A Dumb Library

Sometimes You Just Need A Dumb Library

daviddalbusco profile image David Dal Busco Originally published at Medium ・4 min read

One Trick A Day (35 Part Series)

1) How To Call The Service Worker From The Web App Context 2) Replace Environment Variables In Your Index.html 3 ... 33 3) Inject JavaScript Or CSS At Runtime And On Demand 4) Sometimes You Just Need A Dumb Library 5) Internationalization with Gatsby 6) How To Declare And Use Ionic Modals With Stencil 7) Get App Name And Version In Angular 8) Deploy Apps And Functions To Firebase From A Mono Repo With GitHub Actions 9) Starting In A New Company? Think Npmrc And Git Name 10) Test Angular Pipes With Services 11) Gatsby Tricks: Viewport, CSS Modules Transition And i18n Tricks 12) Takeover The Cordova Facebook Plugin Maintenance 13) Protect Your HTTP Firebase Cloud Functions 14) Create A Menu For Your Gatsby Website Without Libs 15) Create A Modal For Your Angular App Without Libs 16) Add A Slider To You Angular App 17) Test Angular Components and Services With HTTP Mocks 18) Merge Two Objects And Array To Object In JavaScript 19) JSX For Angular Developers 20) More JSX For Angular Developers 21) Create Your Own NPM Cli 22) Third Party Service Providers. Be transparent to each other! 23) React And Web Workers 24) Angular Testing: Mock Private Functions 25) React, Web Workers and IndexedDB 26) React, Web Workers, IndexedDB and ExcelJS 27) GitHub Actions: Hide And Set Angular Environment Variables 28) JavaScript Useful Functions 29) Deeplinking in Ionic Apps With Branch.io 30) Follow-up: Web Push Notifications And PWA In 2020 31) Angular And Web Workers 32) Git Commands I Always Forget 33) An Open Source Medium Like WYSIWYG Editor 34) Currency Picker And Formatter With Ionic React 35) Develop A Konami Code For Any Apps With Stencil

I challenged my self to share a blog post very day until end of the current quarantine in Switzerland, the 19th April 2020. Thirty-one days left until hopefully better days.


One of my client week’s assignment was to track down a bug between libraries. After quite a bit of time, I finally figured out that some code had been duplicated and had also received, of course, an improvement which had not been spread 😒.

Such issues can be avoided by not duplicating code, for example, by sharing it across projects through libraries. But often, if it is not yet something standardized in your company, it will take a bit of time to setup such new libraries.

Because in DeckDeckGo, our open source editor for presentations, we actually had already setup such utilities, I thought it would be not a bad thing to share our recipe.


Our Goal: A Utility To Get Valid Date Objects

Regardless of the JavaScript projects and the frameworks, at some point, I will most probably have to handle dates and most probably, I will have to cast these to proper JavaScript Date objects, or at least, have to ensure their validities. That’s why I created for my self a little function which does such job. Therefore I suggest that our goal in this article is to create a library which exposes such a function.

export function toDateObject(myDate: any): Date | undefined {
    if (!myDate || myDate === undefined) {
        return undefined;
    }

    if (myDate instanceof String || typeof myDate === 'string') {
        return new Date(`${myDate}`);
    }

    if (typeof myDate === 'number' && !isNaN(myDate)) {
        return new Date(myDate);
    }

    // It case Firebase Timestamp format too
    if (myDate && myDate.seconds >= 0 && myDate.nanoseconds >= 0) {
        return new Date(myDate.toDate());
    }

    return myDate;
}

Create A Library

Let’s create our library. To begin with, in a terminal, we make a new folder and jump in it.

mkdir utils && cd utils

To develop and bundle our project we are going to use both Rollup and Typescript. To install and use these, we create a new file package.json which contains the following. Basically, use these two above libraries to prepare and build our library, rimraf to remove the output folder before each build and the information about the library itself respectively which file is going to be its main entry, which one is the module and which one the types definition.

{
  "name": "utils",
  "version": "1.0.0",
  "devDependencies": {
    "@types/node": "^13.9.1",
    "rimraf": "^3.0.2",
    "rollup": "^2.1.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-typescript": "^1.0.1",
    "tslib": "^1.11.1",
    "typescript": "^3.8.3"
  },
  "main": "lib/index.cjs.js",
  "module": "lib/index.js",
  "types": "lib/index.d.ts",
  "scripts": {
    "prepare": "npm run build",
    "build": "rimraf lib && rollup -c && tsc"
  },
  "files": [
    "lib",
    "README.md"
  ]
}

Typescript

Before installing anything, we are going now to configure Typescript for example by specifying an ES2017 target in another new file tsconfig.json .

{
  "compilerOptions": {
    "target": "ES2017",
    "module": "esnext",
    "declaration": true,
    "outDir": "lib",
    "strict": true,
    "removeComments": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": ["node_modules"]
}

Rollup

Finally, last piece of the configuration I promise, we create a new rollup.config.js which, I guess according its name you already understand, is the configuration for Rollup. We are going to instruct it to create a CJS module and are also explicitly adding the Typescript support.

Note that you find also the references I used to create this bundle as commentaries in the following piece of code.

// https://github.com/rollup/rollup-starter-lib
// https://buzut.net/configurer-rollup-bundles-esm-cjs/
// https://dev.to/proticm/how-to-setup-rollup-config-45mk

import typescript from 'rollup-plugin-typescript';
import commonjs from 'rollup-plugin-commonjs';

import pkg from './package.json';

export default {
    input: './src/index.ts',
    plugins: [
        commonjs(),
        typescript()
    ],
    output: {
        format: 'cjs',
        file: pkg.main
    }
}

Installation Of The Dependencies

Everything is in place, we can now install the dependencies. Before doing so, we create an empty new file index.ts in a new folder src , otherwise the installation will end up in error, as a build is chained with the process.

mkdir src && touch src/index.ts
npm install

Coding

If everything went according plan, we actually already have bundled an empty library 😁 but our goal is to expose the above function toDateObject . Therefore, we copy the related code in src/index.ts and once done, run the command to build the library.

npm run build

And voilà, that’s it, we have a "dumb" library which can be use in all our projects 🎉.


Summary

I don’t pretend to be any Rollup expert, if you notice anything which can be improved, ping me. I would love to hear it, specially as we have developed such libraries in DeckDeckGo.

Speaking of, as we are open source, if you want to have a look, maybe some functions might suits your needs too, checkout our GitHub repo.

Stay home, stay safe!

David

Cover photo by Benjamin Davies on Unsplash

One Trick A Day (35 Part Series)

1) How To Call The Service Worker From The Web App Context 2) Replace Environment Variables In Your Index.html 3 ... 33 3) Inject JavaScript Or CSS At Runtime And On Demand 4) Sometimes You Just Need A Dumb Library 5) Internationalization with Gatsby 6) How To Declare And Use Ionic Modals With Stencil 7) Get App Name And Version In Angular 8) Deploy Apps And Functions To Firebase From A Mono Repo With GitHub Actions 9) Starting In A New Company? Think Npmrc And Git Name 10) Test Angular Pipes With Services 11) Gatsby Tricks: Viewport, CSS Modules Transition And i18n Tricks 12) Takeover The Cordova Facebook Plugin Maintenance 13) Protect Your HTTP Firebase Cloud Functions 14) Create A Menu For Your Gatsby Website Without Libs 15) Create A Modal For Your Angular App Without Libs 16) Add A Slider To You Angular App 17) Test Angular Components and Services With HTTP Mocks 18) Merge Two Objects And Array To Object In JavaScript 19) JSX For Angular Developers 20) More JSX For Angular Developers 21) Create Your Own NPM Cli 22) Third Party Service Providers. Be transparent to each other! 23) React And Web Workers 24) Angular Testing: Mock Private Functions 25) React, Web Workers and IndexedDB 26) React, Web Workers, IndexedDB and ExcelJS 27) GitHub Actions: Hide And Set Angular Environment Variables 28) JavaScript Useful Functions 29) Deeplinking in Ionic Apps With Branch.io 30) Follow-up: Web Push Notifications And PWA In 2020 31) Angular And Web Workers 32) Git Commands I Always Forget 33) An Open Source Medium Like WYSIWYG Editor 34) Currency Picker And Formatter With Ionic React 35) Develop A Konami Code For Any Apps With Stencil

Posted on by:

daviddalbusco profile

David Dal Busco

@daviddalbusco

Creator of DeckDeckGo | Organizer of the Ionic Zürich Meetup

Discussion

markdown guide