[Javascript] How should the BUilt-in object name an alias?

Please define the customized function and import it. It is to be difficult to name an alias to the built-in object.

• builtin.js

  export default class BuiltInDate extends Date {
    constructor(any) {
      super(any);
    }
  }

• index.js

  import BuiltInDate from "./builtin";
  const date = new BuiltInDate();

Background

There are many built-in objects and functions in Javascript.

Standard built-in objects(MDN)

They are really useful, but it may cause some problems like the following case.

import { format } from "date-fns";

export default function Date({ dateString }) {
  return (
    <time dateTime={dateString}>
      {format(new Date(dateString), "LLLL d, yyyy")}
    </time>
  );
}

date.js : Nextjs example of CMS Contentful

This represents a component that uses ReactJS to display the date. What is noteworthy here is that the function name is defined as Date, and it tries to call the built-in Date internally. The intent of defining such a function would be to be readable. Since it represents a date, I would like to express it simply as Date. It seems that you want the name to be recognizable to any programmer, not a unique name such as CustomeDate. Giving a name is very difficult and there is a possibility that the intentions may not be conveyed or may change later on. We also don't want to go with a long name - Simple is the best, the old adage shines through here.

However, if you run this, you will get an error as follows.

TypeError: Cannot destructure property `dateString` of 'undefined' or 'null'.
    at new Date (/home/cms-contentful-app/.next/server/static/development/pages/index.js:363:14)
    at new Date (/home/cms-contentful-app/.next/server/static/development/pages/index.js:374:62)
    at Date (/home/cms-contentful-app/.next/server/static/development/pages/index.js:374:62)
    at processChild (/home/cms-contentful-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)
    at resolve (/home/cms-contentful-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)
    at ReactDOMServerRenderer.render (/home/cms-contentful-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)
    at ReactDOMServerRenderer.read (/home/cms-contentful-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
    at renderToString (/home/cms-contentful-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)
    at render (/home/cms-contentful-app/node_modules/next/dist/next-server/server/render.js:83:16)
    at Object.renderPage (/home/cms-contentful-app/node_modules/next/dist/next-server/server/render.js:419:16)
    at Function.getInitialProps (/home/cms-contentful-app/.next/server/static/development/pages/_document.js:293:19)
    at Object.loadGetInitialProps (/home/cms-contentful-app/node_modules/next/dist/next-server/lib/utils.js:59:29)
    at Object.renderToHTML (/home/cms-contentful-app/node_modules/next/dist/next-server/server/render.js:423:36)
    at process._tickCallback (internal/process/next_tick.js:68:7)

This happens because you thought you were calling the built-in Date, but you were calling your own defined Date function. Therefore, its own function was recursively called and a type error occurred.

Solution

Please define the customized function and import it.

• builtin.js

  export default class BuiltInDate extends Date {
    constructor(any) {
      super(any);
    }
  }

• index.js

  import { format } from "date-fns";
  import BuiltInDate from "./builtin";
  
  export default function Date({ dateString }) {
    return (
      <time dateTime={dateString}>
        {format(new BuiltInDate(dateString), "LLLL d, yyyy")}
      </time>
    );
  }

1. define a new class by inheriting the built-in Date in builtin.js.
2. call the above function in the file you want to use.

This way it works as expected, but unfortunately it adds more files, doesn't it? I wish I could do the following, but I haven't found a way so far.

import { Date as BuiltInDate } from "builtin";

See you！

Updated at: Thu Jun 25 2020