wip

Author: armandabric

package.json

@@ -10,14 +10,15 @@
   "scripts": {
     "build": "rollup -c",
     "prebuild": "rm -rf dist/",
+    "build:esm": "tsc --module esnext --outDir lib/esm",
+    "build:cjs": "tsc --module commonjs --outDir lib/cjs",
     "lint": "eslint --ext ts --ext tsx src/",
     "lint:fix": "yarn run lint -- --fix",
     "prettier:fix": "prettier --write \"**/*.{ts,tsx,js,json}\"",
     "test": "jest",
     "test:watch": "jest --watch",
     "release": "./release.sh",
-    "smoke": "node tests/smoke/run",
-    "ts:progress": "tsc > tserrors.txt"
+    "smoke": "node tests/smoke/run"
   },
   "author": {
     "name": "Algolia, Inc.",
@@ -31,6 +32,7 @@
     "@babel/preset-env": "7.15.6",
     "@babel/preset-react": "7.14.5",
     "@babel/preset-typescript": "^7.15.0",
+    "@rollup/plugin-typescript": "^8.2.5",
     "@types/enzyme": "^3.10.9",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^27.0.2",

rollup.config.js

@@ -2,15 +2,19 @@ import babel from 'rollup-plugin-babel';
 import resolve from 'rollup-plugin-node-resolve';
 import builtins from 'rollup-plugin-node-builtins';
 import globals from 'rollup-plugin-node-globals';
+import typescript from '@rollup/plugin-typescript';
 import pkg from './package.json';
 
 const extractExternals = () => [
   ...Object.keys(pkg.dependencies || {}),
   ...Object.keys(pkg.peerDependencies || {}),
 ];
 
-export default {
-  input: 'src/index.js',
+/**
+ * @type {import('rollup').RollupOptions}
+ */
+const config = {
+  input: 'src/index.ts',
   output: [
     {
       file: pkg.main,
@@ -25,19 +29,22 @@ export default {
   ],
   external: extractExternals(),
   plugins: [
-    babel({
-      babelrc: false,
-      exclude: 'node_modules/**',
-      presets: [
-        '@babel/preset-env',
-        '@babel/preset-react',
-        '@babel/preset-typescript',
-      ],
-    }),
+    typescript(),
+    // babel({
+    //   babelrc: false,
+    //   exclude: 'node_modules/**',
+    //   presets: [
+    //     '@babel/preset-env',
+    //     '@babel/preset-react',
+    //     '@babel/preset-typescript',
+    //   ],
+    // }),
     resolve({
       mainFields: ['module', 'main', 'jsnext', 'browser'],
     }),
     globals(),
     builtins(),
   ],
 };
+
+export default config;

src/index.spec.tsx

@@ -2,8 +2,13 @@
  * @jest-environment jsdom
  */
 
+/* eslint-disable react/prefer-stateless-function */
+/* eslint-disable react/jsx-curly-brace-presence */
+/* eslint-disable max-classes-per-file */
 /* eslint-disable react/no-string-refs */
 /* eslint-disable react/prop-types */
+/* eslint-disable prefer-arrow-callback */
+/* eslint-disable react/destructuring-assignment */
 
 import React, { Fragment, Component } from 'react';
 import { render, screen } from '@testing-library/react';
@@ -802,6 +807,7 @@ describe('reactElementToJSXString(ReactElement)', () => {
   it('reactElementToJSXString(<TestComponent />, { useBooleanShorthandSyntax: false })', () => {
     expect(
       reactElementToJSXString(
+        // eslint-disable-next-line react/jsx-boolean-value
         <TestComponent testTrue={true} testFalse={false} />,
         {
           useBooleanShorthandSyntax: false,

src/parser/parseReactElement.ts

@@ -1,5 +1,4 @@
-import type { ReactElement, ReactNode } from 'react';
-import React, { Fragment } from 'react';
+import React, { Fragment, ReactElement, ReactNode } from 'react';
 import {
   ForwardRef,
   isContextConsumer,
@@ -104,7 +103,7 @@ const onlyMeaningfulChildren = (children: ReactNode): boolean =>
   children !== '';
 
 const filterProps = (
-  originalProps: Record<string, any>,
+  originalProps: Record<string, unknown>,
   cb: (propsValue: any, propsName: string) => boolean
 ): Record<string, any> => {
   const filteredProps: Record<string, any> = {};
@@ -137,6 +136,7 @@ const parseReactElement = (
   }
 
   const displayName = displayNameFn(element);
+  // @ts-expect-error: flow to TS
   const props = filterProps(element.props, noChildren);
 
   const key = element.key;
@@ -148,9 +148,11 @@ const parseReactElement = (
 
   // @ts-expect-error: flow to TS
   const defaultProps = filterProps(element.type.defaultProps || {}, noChildren);
+  // @ts-expect-error: flow to TS
   const children = React.Children.toArray(element.props.children)
     .filter(onlyMeaningfulChildren)
-    .map((child: ReactElement<any>) => parseReactElement(child, options));
+    // @ts-expect-error: flow to TS
+    .map((child: ReactNode) => parseReactElement(child, options));
 
   if (supportFragment && element.type === Fragment) {
     return createReactFragmentTreeNode(key, children);

tsconfig.json

@@ -22,7 +22,7 @@
     // "composite": true,                           /* Enable project compilation */
     // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
     // "removeComments": true,                      /* Do not emit comments to output. */
-    "noEmit": true /* Do not emit outputs. */,
+    // "noEmit": true,                              /* Do not emit outputs. */
     // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
     // "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
     // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
@@ -46,7 +46,7 @@
     // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
 
     /* Module Resolution Options */
-    // "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
     // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
     // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */