Create templates based on the Data and Api type of a widget

[agubler]

Type: feature

The following has been addressed in the PR:

• There is a related issue
• All code has been formatted with prettier as per the readme code style guidelines
• Unit or Functional tests are included in the PR

Description:

Widgets can prescribe the the shape of data required for a resource and the API itself. Currently it's really cumbersome to create a template based on the requirements of a resource widget. It requires the user to know the interface of both the data and the API and recreate the typings or import these interfaces/types from somewhere provided by the author. The widget is actually already "stamped" with these types so it would reduce friction significantly to enable users to pass a resource widget to the template factory and the factory infer the data type and resource API.

This is one approach that infers these types based on the generics passed to the ResourceProperties API, meaning that all forms of template are supported by passing the a resource widget.

interface ExampleResourceDataType {
    foo: string;
    bar: string;
}

interface ExampleResourceApi {
    scan: (id: string) => void;
}

const resource = createResourceMiddleware<ExampleResourceDataType, ExampleResourceApi>();
const factory = create({ resource });

const ExampleResourceWidget = factory(() => '');

// Previously would need to know to import the data type interface and api interface or manually recreate the types
import { ExampleResourceDataType, ExampleResourceApi } from './example/widget';
import { createResourceTemplate } from '@dojo/framework/core/middleware/resource';

const template = createResourceTemplate<ExampleResourceDataType, ExampleResourceApi>({
    idKey: 'foo',
    scan: (id) => {
         // do something with the id
    } 
});

// Using the widget to stamp the types on the template
import { ExampleResourceWidget } from './example/widget';
import { createResourceTemplate } from '@dojo/framework/core/middleware/resource';

const template = createResourceTemplate(ExampleResourceWidget, {
    idKey: 'foo',
    scan: (id) => {
         // do something with the id
    } 
});

Note: To correctly infer all the types for the APIs and the api properties requires an bump the minimum supported version of TypeScript from 3.4.5 to 3.5.3.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1cad718:

Sandbox	Source
dojo/dojo-codesandbox-template	Configuration

[codecov]

Codecov Report

Merging #889 (1cad718) into master (0ffee72) will increase coverage by 0.01%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master     #889      +/-   ##
==========================================
+ Coverage   94.53%   94.54%   +0.01%     
==========================================
  Files         127      127              
  Lines        8120     8121       +1     
  Branches     1895     1896       +1     
==========================================
+ Hits         7676     7678       +2     
+ Misses        444      443       -1     

Impacted Files	Coverage Δ
src/core/middleware/resources.ts	95.89% <100.00%> (+<0.01%)	⬆️
src/testing/renderer.ts	97.32% <100.00%> (ø)
src/core/util.ts	99.00% <0.00%> (+1.00%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0ffee72...1cad718. Read the comment docs.