feat: js -> ts (#47)

* refactor: js -> ts refactoring (incl. tests, linter, and bundling)

* ci: optimise travis config

* improvement: make withCatalog more failure robust

* build: optimise webpack build (eg. with externals setting and TerserPlugin)

* feat: add CatalogProvider.defaultProps

* build: build package with babel, export declarations with tsc

* refactor(example): js -> ts(x) example app

* chore(ts): fix issue with multiple @types/* packages w/ different version installed

Author: natterstefan

.eslintrc.js

@@ -1,7 +1,13 @@
 const path = require('path')
 
 module.exports = {
-  extends: 'eslint-config-ns',
+  extends: [
+    'eslint-config-ns',
+    // add typescript specific linting rules and add prettier typescript support
+    'plugin:@typescript-eslint/recommended',
+    'prettier/@typescript-eslint',
+  ],
+  parser: '@typescript-eslint/parser',
   plugins: ['react-hooks'],
   globals: {
     __DEV__: true,
@@ -14,14 +20,24 @@ module.exports = {
     'react/prop-types': 0,
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'error',
+    '@typescript-eslint/interface-name-prefix': [
+      2,
+      {
+        prefixWithI: 'always',
+        allowUnderscorePrefix: true,
+      },
+    ],
   },
   overrides: [
     {
-      files: ['*.test.js'],
+      files: ['*.test.ts', '*.test.tsx'],
       rules: {
         'import/no-extraneous-dependencies': 0,
         'max-classes-per-file': 0,
         'no-console': 0,
+        // lets loosen the typescript rules in test files a little
+        '@typescript-eslint/explicit-function-return-type': 0,
+        '@typescript-eslint/no-explicit-any': 0,
       },
     },
   ],
@@ -34,6 +50,12 @@ module.exports = {
           ['Base', path.resolve(__dirname, 'example/client/base')],
         ],
       },
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+    react: {
+      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
     },
   },
 }

.gitignore

@@ -11,6 +11,8 @@ node_modules
 tmp
 
 # build
+.awcache
+build
 dist
 es
 esm

.travis.yml

@@ -3,8 +3,11 @@ language: node_js
 node_js:
   - "node"
 
+install:
+  - npm install
+
 script:
-  - npm run test
+  - npm test --silent
   - npm run build
   - npm run size
 

README.md

@@ -254,9 +254,9 @@ class App extends React.Component {
 ## How to build and test this package
 
 ```sh
-# -- build the package--
+# -- build the package --
 npm i
-npm build
+npm watch # or build it once with npm run build
 ```
 
 ```sh
@@ -300,6 +300,7 @@ When you're ready to release, execute the following commands in the given order:
 - [semantic-release](https://github.com/semantic-release/semantic-release)
   (standard-version alternative, with extended CI support)
 - [commitlint](https://github.com/conventional-changelog/commitlint)
+- [npm-dedupe when eg. multiple @types/\* versions are installed](https://docs.npmjs.com/cli/dedupe.html)
 
 ## Credits
 

babel.config.js

@@ -22,7 +22,12 @@ if (environment === 'es') {
 
 module.exports = {
   comments: false,
-  presets: [...defaultPresets, '@babel/preset-react'],
+  presets: [
+    // use babel to create *.js files from *ts(x) ones
+    '@babel/preset-typescript',
+    ...defaultPresets,
+    '@babel/preset-react',
+  ],
   plugins: [
     '@babel/plugin-transform-modules-commonjs',
     '@babel/plugin-proposal-class-properties',

example/README.md

@@ -25,7 +25,7 @@ For the purpose of this demo this should be enough.
 ## Setup new clients
 
 In order to serve new clients (eg `hello`) in this demo, one has to extend the
-folowing:
+following:
 
 1. add new bundle to the [webpack.config.js](./webpack.config.js)
 2. allow another client pattern in [server/render.js](./server/render.js))