fix(react): component types extend React.HTMLAttributes

Author: manucorporat

package-lock.json

@@ -5,7 +5,7 @@
     "build": "lerna run build"
   },
   "devDependencies": {
-    "@stencil/core": "^1.0.0-beta.5",
+    "@stencil/core": "^1.8.1",
     "lerna": "^3.13.1"
   }
 }

package.json

@@ -33,6 +33,9 @@
   "bugs": {
     "url": "https://github.com/ionic-team/stencil-ds-plugins/issues"
   },
+  "peerDependencies": {
+    "@stencil/core": ">=1.8.0"
+  },
   "devDependencies": {
     "@types/jest": "^24.0.11",
     "@types/react": "^16.7.0",

packages/react-output-target/package.json

@@ -1,22 +1,16 @@
 import React from 'react';
 import ReactDom from 'react-dom';
 
-import { ReactProps } from './ReactProps';
 import {
   attachEventProps,
   createForwardRef,
   dashToPascalCase,
   isCoveredByReact,
 } from './utils/index';
 
-interface IonicReactInternalProps<ElementType> {
+interface IonicReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
   forwardedRef?: React.Ref<ElementType>;
-  children?: React.ReactNode;
-  href?: string;
-  target?: string;
-  style?: string;
   ref?: React.Ref<any>;
-  className?: string;
 }
 
 export const createReactComponent = <PropType, ElementType>(tagName: string) => {
@@ -62,5 +56,5 @@ export const createReactComponent = <PropType, ElementType>(tagName: string) =>
       return displayName;
     }
   };
-  return createForwardRef<PropType & ReactProps, ElementType>(ReactComponent, displayName);
+  return createForwardRef<PropType, ElementType>(ReactComponent, displayName);
 };

packages/react-output-target/react-component-lib/ReactProps.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { generateUniqueId } from './utils/index';
 import { attachEventProps } from './utils/attachEventProps';
 
 interface LoadingElement {
@@ -23,11 +22,9 @@ export function createControllerComponent<
 
   return class ReactControllerComponent extends React.Component<Props> {
     controller?: LoadingElementType;
-    id: string;
 
     constructor(props: Props) {
       super(props);
-      this.id = generateUniqueId();
     }
 
     static get displayName() {

packages/react-output-target/react-component-lib/createComponent.tsx

@@ -7,23 +7,12 @@ export const dashToPascalCase = (str: string) =>
     .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
     .join('');
 
-export const generateUniqueId = () => {
-  return (
-    [1e7].toString() +
-    -(1e3).toString() +
-    -(4e3).toString() +
-    -(8e3).toString() +
-    -(1e11).toString()
-  ).replace(/[018]/g, (c: any) => {
-    const random = crypto.getRandomValues(new Uint8Array(1)) as Uint8Array;
-    return (c ^ (random[0] & (15 >> (c / 4)))).toString(16);
-  });
-};
+export interface ReactProps {
+  class?: string;
+  style?: {[key: string]: any };
+}
 
-export type IonicReactExternalProps<PropType, ElementType> = PropType & {
-  ref?: React.RefObject<ElementType>;
-  children?: React.ReactNode;
-};
+export type IonicReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & ReactProps;
 
 export const createForwardRef = <PropType, ElementType>(
   ReactComponent: any,

packages/react-output-target/react-component-lib/createControllerComponent.tsx

@@ -1,6 +1,6 @@
 import path from 'path';
 import { OutputTargetReact } from './types';
-import { dashToPascalCase, readPackageJson, relativeImport, sortBy, normalizePath } from './utils';
+import { dashToPascalCase, normalizePath, readPackageJson, relativeImport, sortBy } from './utils';
 import { CompilerCtx, ComponentCompilerMeta, Config } from '@stencil/core/internal';
 
 export async function reactProxyOutput(
@@ -33,7 +33,8 @@ async function generateProxies(
   const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
   const componentsTypeFile = relativeImport(outputTarget.proxiesFile, dtsFilePath, '.d.ts');
 
-  const imports = `/* tslint:disable */
+  const imports = `/* eslint-disable */
+/* tslint:disable */
 /* auto-generated react proxies */
 import { createReactComponent } from './react-component-lib';\n`;
 
@@ -67,7 +68,7 @@ function createComponentDefinition(cmpMeta: ComponentCompilerMeta) {
   const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
 
   return [
-    `export const ${tagNameAsPascal} = createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}, HTML${tagNameAsPascal}Element>('${
+    `export const ${tagNameAsPascal} = /*@__PURE__*/createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}, HTML${tagNameAsPascal}Element>('${
       cmpMeta.tagName
     }');`,
   ];
@@ -79,15 +80,13 @@ async function copyResources(config: Config, outputTarget: OutputTargetReact) {
   }
   const srcDirectory = path.join(__dirname, '..', 'react-component-lib');
   const destDirectory = path.join(path.dirname(outputTarget.proxiesFile), 'react-component-lib');
-  const resourcesFilesToCopy = await config.sys.glob('**/*.*', { cwd: srcDirectory });
-
-  return config.sys.copy(
-    resourcesFilesToCopy.map(rf => ({
-      src: path.join(srcDirectory, '../react-component-lib/', rf),
-      dest: path.join(destDirectory, rf),
-      warn: false,
-    })),
-  );
+
+  return config.sys.copy([{
+    src: srcDirectory,
+    dest: destDirectory,
+    keepDirStructure: true,
+    warn: false,
+  }], '');
 }
 
 export const GENERATED_DTS = 'components.d.ts';