Rebuild for TypeScript

[johnrom]

I noticed a few issues with the types when using this in a typescript project, then I saw the issue here: #109, so I thought I might do that and fix a few things. The most glaring issue was that ref was not a part of the typescript definitions I had for useCountUp.

closes #109

[mmarkelov]

@johnrom thanks a lot for your work. I'll check this out

[mmarkelov]

I think that we should simplify this to:

this.instance?.reset();

and we can skip creation of CountUp instance in createInstance:

  createInstance = () => {
    if (typeof this.props.children === 'function') {
      // Warn when user didn't use containerRef at all
      warning(
        this.containerRef.current &&
          (this.containerRef.current instanceof HTMLElement ||
            this.containerRef.current instanceof SVGTextElement ||
            this.containerRef.current instanceof SVGTSpanElement),
        `Couldn't find attached element to hook the CountUp instance into! Try to attach "containerRef" from the render prop to a an HTMLElement, eg. <span ref={containerRef} />.`,
      );
      return;
    }
    return createCountUpInstance(this.containerRef.current, this.props);
  };

[johnrom]

This PR is meant to be a types-only change and while I'm sure that check could be simpler, I'd recommend non-ts changes be added to my other PR moving to a hook-first approach.

[johnrom]

Also, the component CountUp must actually initialize the instance on mount for backwards compatibility - the tests all test for CountUp having 0 (props.start) in the component instead of an empty container.

[johnrom]

I moved the this.instance check to the right spot (before checking this.instance.target). This createInstance function is actually for creating the CountUpJs instance, so I'm not sure where it would be created if not here.

[mmarkelov]

I think that prop types should be removed

[johnrom]

Oh yeah for sure. Feel free to make this change to my PR branch as I probably can't circle back until midweek.

[johnrom]

Removed prop types.

[mmarkelov]

Do we need to keep babel only for test files? I suppose that we can use ts-jest. But it can be done in separate PR

[johnrom]

IIRC my implementation transpiles typescript using @babel/preset-typescript for both the build and tests. This is generally recommended instead of using the Typescript compiler when Babel is used for the test of transpilation instead of combining methods.

If I'm wrong about that I'll double check when I have some dev time.

Tsc is used to generate d.ts files themselves, as babel only transpiles to javascript.

I also recommend using the same transpilation method for jest as the project itself, so there aren't transpilation differences that cause test failures.

[johnrom]

Confirmed, this PR uses babel to transpile typescript for both build and test.

[mmarkelov]

I think that we can move defaults to common file:

export const defaults = {
  decimal: '.',
  decimals: 0,
  delay: null,
  prefix: '',
  separator: '',
  start: 0,
  startOnMount: true,
  suffix: '',
  useEasing: true,
}

and use it in both CountUp and useCountUp

[johnrom]

This is meant to be a ts-only PR, and I did make this change in my other PR where the component actually uses the hook.

[johnrom]

Made some requested changes, an additional fix for Timeout, and pushed back on some other requested changes.

[johnrom]

Also fixed the warning check in createInstance to cover all possible dom Elements.

[mmarkelov]

i suppose that we can remove prop-types from packages and rollback config

[johnrom]

derp, yes I've now cleaned up package.json to put deps in the right place and remove @rollup/plugin-typescript and prop-types.