Merge pull request #4569 from JedWatson/gwyneplaine/replace-ert

remove ert from docs and replace with magical-types

.gitignore

@@ -41,3 +41,5 @@ package-lock.json
 
 # Notes
 .NOTES.md
+
+magical-types

docs/PropTypes/Async.ts

@@ -1,10 +1 @@
-// import { Component } from 'react';
-//
-// import { AsyncProps } from 'react-select/src/Async';
-// import { GroupBase, OptionBase } from 'react-select';
-//
-// export default class Select<
-//   Option extends OptionBase,
-//   IsMulti extends boolean,
-//   Group extends GroupBase<Option>
-// > extends Component<AsyncProps<Option, IsMulti, Group>> {}
+export { AsyncAdditionalProps } from 'react-select/src/useAsync';

docs/PropTypes/Creatable.ts

@@ -1,10 +1 @@
-// import { Component } from 'react';
-//
-// import { CreatableProps } from 'react-select/src/Creatable';
-// import { GroupBase, OptionBase } from 'react-select';
-//
-// export default class Select<
-//   Option extends OptionBase,
-//   IsMulti extends boolean,
-//   Group extends GroupBase<Option>
-// > extends Component<CreatableProps<Option, IsMulti, Group>> {}
+export { CreatableAdditionalProps } from 'react-select/src/useCreatable';

docs/PropTypes/Select.ts

@@ -1,12 +1,10 @@
-// import { Component } from 'react';
-//
-// import { Props, defaultProps } from 'react-select/src/Select';
-// import { GroupBase, OptionBase } from 'react-select';
-//
-// export default class Select<
-//   Option extends OptionBase,
-//   IsMulti extends boolean,
-//   Group extends GroupBase<Option>
-// > extends Component<Props<Option, IsMulti, Group>> {
-//   defaultProps = defaultProps;
-// }
+import { Component } from 'react';
+
+import { Props, defaultProps } from 'react-select/src/Select';
+import { GroupBase, OptionBase } from 'react-select';
+
+export default class Select extends Component<
+  Props<OptionBase, boolean, GroupBase<OptionBase>>
+> {
+  defaultProps = defaultProps;
+}

docs/PropTypes/stateManager.ts

@@ -1,10 +1 @@
-// import { Component } from 'react';
-//
-// import { StateManagerProps } from 'react-select/src/stateManager';
-// import { GroupBase, OptionBase } from 'react-select';
-//
-// export default class StateManager<
-//   Option extends OptionBase,
-//   IsMulti extends boolean,
-//   Group extends GroupBase<Option>
-// > extends Component<StateManagerProps<Option, IsMulti, Group>> {}
+export { StateManagerAdditionalProps } from 'react-select/src/useStateManager';

docs/generate-magical-types/generate/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "dist/generate-magical-types.cjs.js",
+  "preconstruct": {
+    "source": "../src/generate"
+  }
+}

docs/generate-magical-types/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@react-select/generate-magical-types",
+  "main": "dist/generate-magical-types.cjs.js",
+  "//": "these deps aren't real, they're just to appease preconstruct",
+  "dependencies": {
+    "@babel/runtime": "*",
+    "@magical-types/convert-type": "*",
+    "@magical-types/serialization": "*",
+    "ts-morph": "*",
+    "fs-extra": "*",
+    "flatted": "*"
+  },
+  "preconstruct": {
+    "entrypoints": [
+      "generate",
+      "serialize"
+    ]
+  }
+}

docs/generate-magical-types/serialize/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "dist/generate-magical-types.cjs.js",
+  "preconstruct": {
+    "source": "../src/serialize"
+  }
+}

docs/generate-magical-types/src/generate.ts

@@ -0,0 +1,117 @@
+import path from 'path';
+
+// @ts-ignore
+import fs from 'fs-extra';
+import * as flatted from 'flatted';
+import { Project } from 'ts-morph';
+import { MagicalNode } from '@magical-types/types';
+import { convertType, getPropTypesType } from '@magical-types/convert-type';
+
+type MagicalNodesForPackage = Record<
+  string,
+  { type: 'component' | 'other'; node: MagicalNode }
+>;
+
+export type MagicalNodes = Record<string, MagicalNodesForPackage>;
+
+if (process.env.NODE_ENV === 'test') {
+  fs.outputFileSync(
+    path.join(__dirname, '..', 'dist', 'magical-types.json'),
+    flatted.stringify({})
+  );
+} else {
+  const OTHERFILES: string[] = ['stateManager', 'Async', 'Creatable'];
+  const getOtherProps = (obj: MagicalNodes) => {
+    OTHERFILES.forEach((name: string) => {
+      let pkgExports: MagicalNodesForPackage = {};
+      obj[`${name}`] = pkgExports;
+      let sourceFile = project.getSourceFile(
+        path.join(__dirname, '../../Proptypes', `${name}.ts`)
+      );
+      if (!sourceFile) {
+        sourceFile = project.getSourceFile(
+          path.join(__dirname, '../../Proptypes', `${name}.tsx`)
+        );
+      }
+      if (!sourceFile) {
+        throw new Error(`source file not found for ${name}`);
+      }
+      resolveTypes({ sourceFile, item: name, pkgExports });
+    });
+  };
+
+  const resolveTypes = ({
+    sourceFile,
+    item,
+    pkgExports,
+  }: {
+    sourceFile: any;
+    item: string;
+    pkgExports: MagicalNodesForPackage;
+  }) => {
+    let exportedDeclarations = sourceFile.getExportedDeclarations();
+    for (const [exportName, declaration] of exportedDeclarations) {
+      if (declaration.length) {
+        let type = declaration[0].getType().compilerType;
+        let typeKind: 'component' | 'other' = 'other';
+        console.log(`about to convert ${exportName} from ${item}`);
+        if (exportName[0].toUpperCase() === exportName[0]) {
+          try {
+            type = getPropTypesType(type);
+            typeKind = 'component';
+          } catch (err) {}
+        }
+        pkgExports[exportName] = {
+          node: convertType(type, []),
+          type: typeKind,
+        };
+        console.log('converted');
+      }
+    }
+  };
+
+  let project = new Project({
+    addFilesFromTsConfig: true,
+    tsConfigFilePath: path.resolve(__dirname, '../../../tsconfig.json'),
+  });
+  console.log('done');
+  let pkgDir = path.resolve(__dirname, '../../../packages');
+  let pkgs = fs
+    .readdirSync(pkgDir, {
+      withFileTypes: true,
+    })
+    .filter(
+      // @ts-ignore
+      (x) =>
+        x.isDirectory() &&
+        fs.existsSync(path.join(pkgDir, path.join(x.name), 'package.json'))
+    )
+    // @ts-ignore
+    .map((x) => x.name);
+
+  let obj: MagicalNodes = {};
+
+  for (const item of pkgs) {
+    let pkgExports: MagicalNodesForPackage = {};
+    obj[`${item}`] = pkgExports;
+    let sourceFile = project.getSourceFile(
+      path.join(pkgDir, item, 'src', 'index.tsx')
+    );
+    if (!sourceFile) {
+      sourceFile = project.getSourceFile(
+        path.join(pkgDir, item, 'src', 'index.ts')
+      );
+    }
+    if (!sourceFile) {
+      throw new Error(`source file not found for ${item}`);
+    }
+    resolveTypes({ sourceFile, item, pkgExports });
+  }
+
+  getOtherProps(obj);
+
+  fs.outputFileSync(
+    path.join(__dirname, '..', 'dist', 'magical-types.json'),
+    flatted.stringify(obj)
+  );
+}

docs/generate-magical-types/src/serialize.ts

@@ -0,0 +1,93 @@
+import path from 'path';
+
+// @ts-ignore
+import fs from 'fs-extra';
+import * as flatted from 'flatted';
+import { MagicalNode } from '@magical-types/types';
+import {
+  chunkNodes,
+  serializeNodes,
+} from '@magical-types/serialization/serialize';
+
+import { MagicalNodeMetadata, MagicalNodes } from './types';
+
+const allTypes: MagicalNodes = flatted.parse(
+  fs.readFileSync(
+    path.join(__dirname, '..', 'dist', 'magical-types.json'),
+    'utf8'
+  )
+);
+
+const magicalTypesDir = path.resolve(__dirname, '..', '..', 'magical-types');
+
+fs.removeSync(magicalTypesDir);
+
+fs.ensureDirSync(magicalTypesDir);
+
+let rootNodes: MagicalNode[] = [];
+
+for (const pkgName in allTypes) {
+  for (const exportName in allTypes[pkgName]) {
+    rootNodes.push(allTypes[pkgName][exportName].node);
+  }
+}
+
+console.log('serializing nodes');
+const serializationResult = serializeNodes(rootNodes);
+console.log('done');
+
+console.log('chunking nodes');
+const chunkedNodes = chunkNodes(serializationResult);
+console.log('done');
+
+let outputPaths = chunkedNodes.map((x, index) =>
+  path.join(
+    magicalTypesDir,
+    `magical-types-${index}-${Math.random().toString(36)}.json`
+  )
+);
+
+let outputUrlSegments = outputPaths.map(
+  (filepath) => `/magical-types/${path.basename(filepath)}`
+);
+let manifestOutputPath = path.resolve(
+  magicalTypesDir,
+  'magical-types-manifest.json'
+);
+
+const metadataWithIndexes: MagicalNodeMetadata = {};
+
+for (const pkgName in allTypes) {
+  metadataWithIndexes[pkgName] = {};
+  for (const exportName in allTypes[pkgName]) {
+    if (serializationResult.nodesMeta.has(allTypes[pkgName][exportName].node)) {
+      metadataWithIndexes[pkgName][exportName] = {
+        type: allTypes[pkgName][exportName].type,
+        index: serializationResult.nodesMeta.get(
+          allTypes[pkgName][exportName].node
+        )!.index,
+      };
+    }
+  }
+}
+
+(async () => {
+  console.log('writing output');
+  await Promise.all([
+    fs.writeFile(
+      manifestOutputPath,
+      JSON.stringify({
+        paths: outputUrlSegments,
+        types: metadataWithIndexes,
+      })
+    ),
+    ...outputPaths.map((filepath, index) =>
+      fs.writeFile(filepath, JSON.stringify(chunkedNodes[index]))
+    ),
+  ]);
+
+  console.log('done');
+})().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

docs/generate-magical-types/src/types.ts

@@ -0,0 +1,18 @@
+import { MagicalNode, MagicalNodeIndex } from '@magical-types/types';
+
+export type MagicalNodeMetadata = Record<
+  string,
+  Record<string, MagicalNodeRecord>
+>;
+
+export type MagicalNodeRecord = {
+  type: 'component' | 'other';
+  index: MagicalNodeIndex;
+};
+
+export type MagicalNodesForPackage = Record<
+  string,
+  { type: 'component' | 'other'; node: MagicalNode }
+>;
+
+export type MagicalNodes = Record<string, MagicalNodesForPackage>;

docs/markdown/store.ts

@@ -10,6 +10,7 @@ class HeadingStore {
   headings: { [key: string]: Data[] } = {};
 
   add(key: string, data: Data) {
+    console.log('add being called with', data.label);
     if (!this.headings[location.pathname]) {
       this.headings[location.pathname] = [];
     }

docs/package.json

@@ -2,6 +2,7 @@
   "name": "@react-select/docs",
   "private": true,
   "version": "3.1.0",
+  "main": "dist/docs.cjs.js",
   "author": "Jed Watson",
   "license": "MIT",
   "dependencies": {
@@ -19,6 +20,10 @@
     "@babel/runtime": "^7.12.0",
     "@emotion/babel-plugin": "^11.0.0",
     "@emotion/react": "^11.1.1",
+    "@magical-types/convert-type": "^0.1.4",
+    "@magical-types/pretty": "^0.3.5",
+    "@magical-types/serialization": "^0.2.1",
+    "@magical-types/types": "^0.1.2",
     "@types/chroma-js": "^1.4.3",
     "@types/copy-webpack-plugin": "^5.0.2",
     "@types/html-webpack-plugin": "^3.2.4",
@@ -37,14 +42,14 @@
     "@types/webpack": "^4.41.26",
     "@types/webpack-dev-server": "^3.11.1",
     "babel-loader": "^8.0.0",
+    "babel-plugin-macros": "^3.0.1",
     "chroma-js": "^1.3.6",
     "chrono-node": "^2.1.11",
     "codesandboxer": "^0.1.1",
     "copy-webpack-plugin": "^5.0.3",
     "cross-env": "^5.1.3",
     "css-loader": "^0.28.7",
     "dotenv": "^8.2.0",
-    "extract-react-types-loader": "^0.3.0",
     "fork-ts-checker-webpack-plugin": "^6.1.0",
     "html-webpack-plugin": "^3.2.0",
     "moment": "^2.20.1",
@@ -70,7 +75,9 @@
     "webpack-dev-server": "^3.3.1"
   },
   "scripts": {
-    "start": "cross-env FORCE_EXTRACT_REACT_TYPES=true webpack-dev-server --progress",
-    "build:docs": "rimraf docs/dist && cross-env FORCE_EXTRACT_REACT_TYPES=true webpack --progress -p"
+    "site-prebuild": "node ./generate-magical-types/generate && node ./generate-magical-types/serialize",
+    "start": "yarn site-prebuild && webpack-dev-server --progress",
+    "start:test": "NODE_ENV=test yarn site-prebuild && webpack-dev-server --progress",
+    "build:docs": "rimraf docs/dist && yarn site-prebuild && webpack --progress -p"
   }
 }