feat(api): use tuples for injection on both Provider and Inject (#9)

* feat(api): use tuples for injection on both Provider and Inject

* build: migrate to rollup and bump deps

* test: add Optional service injection test

* build(tsc): remoce jsx factory from config

* refactor(api): change Provider/Inject name/props

* refactor(api): change withProvider,withInjectables Inject children api

* style: apply prettier

* perf(with-injectables): move tokens ref creation to the outer closure

now injectablePropsKeys and tokensRef are created only once after hoc factory call instead on every
wrapped component render

* chore: prune deps

* chore(examples): update examples to new api

* docs: update readme with new api


BREAKING CHANGES:

- Previously providers registration used dictionary as well as Inject. Now both
components (DependencyProvider, Inject) use arrays to both register providers as well as inject instances via token. 
- New minimal required TS version is 3.1
- renamed:
  - Provide -> DependencyProvider
  - withProvider -> withDependencyProvider
- Provider used previously `provider` prop -> `providers`
- Inject used previously `providers` prop -> `values`
- withDependencyProviders accepts n-ary arguments

.prettierignore

@@ -1,7 +1 @@
-bundles
-esm5
-esm2015
-fesm
-types
-typings
 dist

.vscode/settings.json

@@ -10,4 +10,5 @@
   "editor.rulers": [
     80,100
   ],
+  "typescript.tsdk": "node_modules/typescript/lib",
 }

config/commitlint.config.js

@@ -0,0 +1,6 @@
+/**
+ * @type {import('@commitlint/core').Config}
+ */
+const config = { extends: ['@commitlint/config-conventional'] }
+
+module.exports = config

config/global.d.ts

@@ -1,32 +1,75 @@
-declare module 'jest-config' {
-  const defaults: jest.DefaultOptions
+// ============================
+// ts-jest types require 'babel__core'
+// ============================
+declare module 'babel__core' {
+  interface TransformOptions {}
 }
 
-declare module 'webpack-config-utils' {
-  namespace WebpackConfigUtils {
-    type RemoveEmpty = <T extends object | any[]>(input: T) => T
-    type GetIfUtils = (env: object | string, vars?: any[]) => IfUtils
-    type PropIf = <A, I, E>(add: A, value: I, alternate: E) => I | E
-    type PropIfNot = PropIf
-    // type IfUtilsFn = <Y, N>(value?: Y, alternate?: N) => Y | N
-    interface IfUtilsFn {
-      <Y, N>(value: Y, alternate?: N): Y | N
-      (): boolean
-    }
-    interface IfUtils {
-      ifDevelopment: IfUtilsFn
-      ifNotDevelopment: IfUtilsFn
-      ifDev: IfUtilsFn
-      ifNotDev: IfUtilsFn
-      ifProduction: IfUtilsFn
-      ifNotProduction: IfUtilsFn
-      ifProd: IfUtilsFn
-      ifNotProd: IfUtilsFn
-      ifTest: IfUtilsFn
-      ifNotTest: IfUtilsFn
-    }
+// ============================
+// Rollup plugins without types
+// ============================
+type RollupPluginImpl<O extends object = object> = import('rollup').PluginImpl<
+  O
+>
+
+declare module 'rollup-plugin-json' {
+  export interface Options {
+    /**
+     *  All JSON files will be parsed by default, but you can also specifically include/exclude files
+     */
+    include?: string | string[]
+    exclude?: string | string[]
+    /**
+     *  for tree-shaking, properties will be declared as variables, using either `var` or `const`
+     *  @default false
+     */
+    preferConst?: boolean
+    /**
+     * specify indentation for the generated default export — defaults to '\t'
+     * @default '\t'
+     */
+    indent?: string
   }
+  const plugin: RollupPluginImpl<Options>
+  export default plugin
+}
+declare module 'rollup-plugin-sourcemaps' {
+  const plugin: RollupPluginImpl
+  export default plugin
+}
+declare module 'rollup-plugin-node-resolve' {
+  const plugin: RollupPluginImpl
+  export default plugin
+}
+declare module 'rollup-plugin-commonjs' {
+  const plugin: RollupPluginImpl
+  export default plugin
+}
+declare module 'rollup-plugin-replace' {
+  const plugin: RollupPluginImpl
+  export default plugin
+}
+declare module 'rollup-plugin-uglify' {
+  const uglify: RollupPluginImpl
+  export { uglify }
+}
+declare module 'rollup-plugin-terser' {
+  const terser: RollupPluginImpl
+  export { terser }
+}
 
-  export const getIfUtils: WebpackConfigUtils.GetIfUtils
-  export const removeEmpty: WebpackConfigUtils.RemoveEmpty
+// =====================
+// missing library types
+// =====================
+declare module '@commitlint/core' {
+  interface Config {
+    extends: string[]
+  }
+}
+declare module 'sort-object-keys' {
+  const sortPackageJson: <T extends {}>(
+    object: T,
+    sortWith?: (...args: any[]) => any
+  ) => T
+  export = sortPackageJson
 }

config/helpers.js

@@ -0,0 +1,59 @@
+module.exports = {
+  camelCaseToDash,
+  dashToCamelCase,
+  toUpperCase,
+  pascalCase,
+  normalizePackageName,
+  getOutputFileName,
+}
+
+/**
+ *
+ * @param {string} myStr
+ */
+function camelCaseToDash(myStr) {
+  return myStr.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+/**
+ *
+ * @param {string} myStr
+ */
+function dashToCamelCase(myStr) {
+  return myStr.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
+}
+
+/**
+ *
+ * @param {string} myStr
+ */
+function toUpperCase(myStr) {
+  return `${myStr.charAt(0).toUpperCase()}${myStr.substr(1)}`
+}
+
+/**
+ *
+ * @param {string} myStr
+ */
+function pascalCase(myStr) {
+  return toUpperCase(dashToCamelCase(myStr))
+}
+
+/**
+ *
+ * @param {string} rawPackageName
+ */
+function normalizePackageName(rawPackageName) {
+  const scopeEnd = rawPackageName.indexOf('/') + 1
+
+  return rawPackageName.substring(scopeEnd)
+}
+
+/**
+ *
+ * @param {string} fileName
+ * @param {boolean?} isProd
+ */
+function getOutputFileName(fileName, isProd = false) {
+  return isProd ? fileName.replace(/\.js$/, '.min.js') : fileName
+}

config/jest.config.js

@@ -1,30 +1,14 @@
-// @ts-check
-
-const { defaults } = require('jest-config')
-
-/**
- * @type {import('./types').TsJestConfig}
- */
-const tsJestConfig = {
-  skipBabel: true,
-}
-
 /**
  * @type {Partial<jest.InitialOptions>}
  */
 const config = {
+  preset: 'ts-jest',
   rootDir: '..',
-  transform: {
-    '^.+\\.(ts|tsx)$': 'ts-jest',
-  },
   testMatch: [
-    '<rootDir>/src/**/__tests__/**/*.(spec|test).ts?(x)',
+    '<rootDir>/src/**/__tests__/**/?(*.)+(spec|test).ts?(x)',
     '<rootDir>/src/**/?(*.)+(spec|test).ts?(x)',
   ],
-  moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],
-  globals: {
-    'ts-jest': tsJestConfig,
-  },
+  testPathIgnorePatterns: ['dist'],
   coverageThreshold: {
     global: {
       branches: 80,

config/rollup.config.js

@@ -0,0 +1,126 @@
+import { resolve } from 'path'
+import sourceMaps from 'rollup-plugin-sourcemaps'
+import nodeResolve from 'rollup-plugin-node-resolve'
+import json from 'rollup-plugin-json'
+import commonjs from 'rollup-plugin-commonjs'
+import replace from 'rollup-plugin-replace'
+import { uglify } from 'rollup-plugin-uglify'
+import { terser } from 'rollup-plugin-terser'
+import { getIfUtils, removeEmpty } from 'webpack-config-utils'
+
+import pkg from '../package.json'
+const {
+  pascalCase,
+  normalizePackageName,
+  getOutputFileName,
+} = require('./helpers')
+
+/**
+ * @typedef {import('./types').RollupConfig} Config
+ */
+/**
+ * @typedef {import('./types').RollupPlugin} Plugin
+ */
+
+const env = process.env.NODE_ENV || 'development'
+const { ifProduction } = getIfUtils(env)
+
+const LIB_NAME = pascalCase(normalizePackageName(pkg.name))
+const ROOT = resolve(__dirname, '..')
+const DIST = resolve(ROOT, 'dist')
+
+/**
+ * Object literals are open-ended for js checking, so we need to be explicit
+ * @type {{entry:{esm5: string, esm2015: string},bundles:string}}
+ */
+const PATHS = {
+  entry: {
+    esm5: resolve(DIST, 'esm5'),
+    esm2015: resolve(DIST, 'esm2015'),
+  },
+  bundles: resolve(DIST, 'bundles'),
+}
+
+/**
+ * @type {string[]}
+ */
+const external = Object.keys(pkg.peerDependencies) || []
+
+/**
+ *  @type {Plugin[]}
+ */
+const plugins = /** @type {Plugin[]} */ ([
+  // Allow json resolution
+  json(),
+
+  // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
+  commonjs(),
+
+  // Allow node_modules resolution, so you can use 'external' to control
+  // which external modules to include in the bundle
+  // https://github.com/rollup/rollup-plugin-node-resolve#usage
+  nodeResolve(),
+
+  // Resolve source maps to the original source
+  sourceMaps(),
+
+  // properly set process.env.NODE_ENV within `./environment.ts`
+  replace({
+    exclude: 'node_modules/**',
+    'process.env.NODE_ENV': JSON.stringify(env),
+  }),
+])
+
+/**
+ * @type {Config}
+ */
+const CommonConfig = {
+  input: {},
+  output: {},
+  inlineDynamicImports: true,
+  // Indicate here external modules you don't wanna include in your bundle (i.e.: 'lodash')
+  external,
+}
+
+/**
+ * @type {Config}
+ */
+const UMDconfig = {
+  ...CommonConfig,
+  input: resolve(PATHS.entry.esm5, 'index.js'),
+  output: {
+    file: getOutputFileName(
+      resolve(PATHS.bundles, 'index.umd.js'),
+      ifProduction()
+    ),
+    format: 'umd',
+    name: LIB_NAME,
+    sourcemap: true,
+  },
+  plugins: removeEmpty(
+    /** @type {Plugin[]} */ ([...plugins, ifProduction(uglify())])
+  ),
+}
+
+/**
+ * @type {Config}
+ */
+const FESMconfig = {
+  ...CommonConfig,
+  input: resolve(PATHS.entry.esm2015, 'index.js'),
+  output: [
+    {
+      file: getOutputFileName(
+        resolve(PATHS.bundles, 'index.esm.js'),
+        ifProduction()
+      ),
+      format: 'es',
+      sourcemap: true,
+    },
+  ],
+  plugins: removeEmpty(
+    /** @type {Plugin[]} */ ([...plugins, ifProduction(terser())])
+  ),
+}
+
+export default [UMDconfig, FESMconfig]

config/tsconfig.json

@@ -1,12 +1,16 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
-    "strict": true,
-    "allowJs": true,
     "target": "es2017",
     "module": "commonjs",
-    "moduleResolution": "node",
-    "resolveJsonModule":true,
+    "allowJs": true,
+    "checkJs": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
     "noEmit": true,
-    "skipLibCheck": true
-  }
+    "importHelpers": false
+  },
+  "include": [
+    "."
+  ]
 }