feat(ts): convert Template component to TypeScript (#4703)

Author: Yannick Croissant

src/components/Template/Template.js src/components/Template/Template.tsx

@@ -1,20 +1,42 @@
 /** @jsx h */
 
 import { h, Component } from 'preact';
-import PropTypes from 'prop-types';
 import { renderTemplate, isEqual } from '../../lib/utils';
+import { PreparedTemplateProps } from '../../lib/utils/prepareTemplateProps';
+import { Templates } from '../../types';
 
-class Template extends Component {
-  shouldComponentUpdate(nextProps) {
+const defaultProps = {
+  data: {},
+  rootTagName: 'div',
+  useCustomCompileOptions: {},
+  templates: {},
+  templatesConfig: {},
+};
+
+type TemplateProps = {
+  data?: Record<string, any>;
+  rootProps?: Record<string, any>;
+  rootTagName?: keyof h.JSX.IntrinsicElements;
+  templateKey: string;
+  bindEvent?: (...args: any[]) => string;
+} & PreparedTemplateProps<Templates> &
+  Readonly<typeof defaultProps>;
+
+// @TODO: Template should be a generic and receive TData to pass to Templates (to avoid TTemplateData to be set as `any`)
+class Template extends Component<TemplateProps> {
+  public static readonly defaultProps = defaultProps;
+
+  public shouldComponentUpdate(nextProps: TemplateProps) {
     return (
       !isEqual(this.props.data, nextProps.data) ||
       this.props.templateKey !== nextProps.templateKey ||
       !isEqual(this.props.rootProps, nextProps.rootProps)
     );
   }
 
-  render() {
+  public render() {
     const RootTagName = this.props.rootTagName;
+
     const useCustomCompileOptions = this.props.useCustomCompileOptions[
       this.props.templateKey
     ];
@@ -46,39 +68,4 @@ class Template extends Component {
   }
 }
 
-Template.propTypes = {
-  data: PropTypes.object,
-  rootProps: PropTypes.object,
-  rootTagName: PropTypes.string,
-  templateKey: PropTypes.string,
-  templates: PropTypes.objectOf(
-    PropTypes.oneOfType([PropTypes.string, PropTypes.func])
-  ),
-  templatesConfig: PropTypes.shape({
-    helpers: PropTypes.objectOf(PropTypes.func),
-    // https://github.com/twitter/hogan.js/#compilation-options
-    compileOptions: PropTypes.shape({
-      asString: PropTypes.bool,
-      sectionTags: PropTypes.arrayOf(
-        PropTypes.shape({
-          o: PropTypes.string,
-          c: PropTypes.string,
-        })
-      ),
-      delimiters: PropTypes.string,
-      disableLambda: PropTypes.bool,
-    }),
-  }),
-  useCustomCompileOptions: PropTypes.objectOf(PropTypes.bool),
-  bindEvent: PropTypes.func,
-};
-
-Template.defaultProps = {
-  data: {},
-  rootTagName: 'div',
-  useCustomCompileOptions: {},
-  templates: {},
-  templatesConfig: {},
-};
-
 export default Template;

src/components/Template/__tests__/Template-test.js src/components/Template/__tests__/Template-test.tsx

@@ -3,14 +3,15 @@
 import { h } from 'preact';
 import Template from '../Template';
 import { mount, shallow } from 'enzyme';
+import { ReactElementLike } from 'prop-types';
 
 function getProps({
   templates = { test: '' },
   data = {},
   templateKey = 'test',
   rootProps = {},
   useCustomCompileOptions = {},
-  templatesConfig = { helper: {}, compileOptions: {} },
+  templatesConfig = { helpers: {}, compileOptions: {} },
   ...props
 }) {
   return {
@@ -30,16 +31,16 @@ describe('Template', () => {
       templates: { test: 'it configures compilation <%options%>' },
       data: { options: 'delimiters' },
       useCustomCompileOptions: { test: true },
-      templatesConfig: { compileOptions: { delimiters: '<% %>' } },
+      templatesConfig: { helpers: {}, compileOptions: { delimiters: '<% %>' } },
     });
-    const wrapper = mount(<Template {...props} />);
+    const wrapper = mount((<Template {...props} />) as ReactElementLike);
 
     expect(wrapper).toMatchSnapshot();
   });
 
   it('can configure custom rootTagName', () => {
     const props = getProps({ rootTagName: 'span' });
-    const wrapper = mount(<Template {...props} />);
+    const wrapper = mount((<Template {...props} />) as ReactElementLike);
 
     expect(wrapper).toMatchSnapshot();
   });
@@ -50,25 +51,19 @@ describe('Template', () => {
     const props = getProps({
       rootProps: { className: 'className', onClick },
     });
-    const wrapper = mount(<Template {...props} />);
+    const wrapper = mount((<Template {...props} />) as ReactElementLike);
 
     expect(wrapper).toMatchSnapshot();
   });
 
   describe('shouldComponentUpdate', () => {
-    let container;
-
-    beforeEach(() => {
-      container = document.createElement('div');
-    });
-
     it('does not call render when no change in data', () => {
       const props = getProps({
         data: {
           items: [],
         },
       });
-      const wrapper = shallow(<Template {...props} />, container);
+      const wrapper = shallow((<Template {...props} />) as ReactElementLike);
       const onRender = jest.spyOn(wrapper.instance(), 'render');
 
       wrapper.setProps({ data: { items: [] } });
@@ -82,7 +77,7 @@ describe('Template', () => {
           items: [],
         },
       });
-      const wrapper = shallow(<Template {...props} />, container);
+      const wrapper = shallow((<Template {...props} />) as ReactElementLike);
       const onRender = jest.spyOn(wrapper.instance(), 'render');
 
       wrapper.setProps({ data: { items: [1] } });
@@ -92,7 +87,7 @@ describe('Template', () => {
 
     it('calls render when templateKey changes', () => {
       const props = getProps({});
-      const wrapper = shallow(<Template {...props} />, container);
+      const wrapper = shallow((<Template {...props} />) as ReactElementLike);
       const onRender = jest.spyOn(wrapper.instance(), 'render');
 
       wrapper.setProps({
@@ -107,7 +102,7 @@ describe('Template', () => {
 
     it('calls render when rootProps changes', () => {
       const props = getProps({});
-      const wrapper = shallow(<Template {...props} />, container);
+      const wrapper = shallow((<Template {...props} />) as ReactElementLike);
       const onRender = jest.spyOn(wrapper.instance(), 'render');
 
       wrapper.setProps({
@@ -125,7 +120,7 @@ describe('Template', () => {
           className: 'initialClassName',
         },
       });
-      const wrapper = shallow(<Template {...props} />, container);
+      const wrapper = shallow((<Template {...props} />) as ReactElementLike);
       const onRender = jest.spyOn(wrapper.instance(), 'render');
 
       wrapper.setProps({

src/components/Template/__tests__/__snapshots__/Template-test.js.snap src/components/Template/__tests__/__snapshots__/Template-test.tsx.snap

@@ -1,10 +1,21 @@
 import uniq from './uniq';
-import { Template } from '../../types';
+import { Templates } from '../../types';
 
-type TemplatesConfig = Record<string, unknown>;
-
-type Templates = {
-  [key: string]: Template<any>;
+type TemplatesConfig = {
+  helpers?: Record<
+    string,
+    (text: string, render: (value: any) => string) => string
+  >;
+  // https://github.com/twitter/hogan.js/#compilation-options
+  compileOptions?: {
+    asString?: boolean;
+    sectionTags?: Array<{
+      o?: string;
+      c?: string;
+    }>;
+    delimiters?: string;
+    disableLambda?: boolean;
+  };
 };
 
 export type PreparedTemplateProps<TTemplates extends Templates> = {

src/lib/utils/prepareTemplateProps.ts

@@ -548,3 +548,7 @@ export type UnknownWidgetFactory = WidgetFactory<any, any, any>;
 export type TemplateWithBindEvent<TTemplateData = void> =
   | string
   | ((data: TTemplateData, bindEvent: BindEventForHits) => string);
+
+export type Templates = {
+  [key: string]: Template<any> | TemplateWithBindEvent<any> | undefined;
+};