@patternfly/documentation-framework 2.0.0-alpha.3 → 2.0.0-alpha.30

package/scripts/tsDocgen.js

@@ -1,28 +1,28 @@
-const fs = require('fs');
-const reactDocgen = require('react-docgen');
-const ts = require('typescript');
+const fs = require("fs");
+const reactDocgen = require("react-docgen");
+const ts = require("typescript");
 
 const annotations = [
   {
     regex: /@deprecated/,
-    name: 'deprecated',
-    type: 'Boolean'
+    name: "deprecated",
+    type: "Boolean",
   },
   {
     regex: /@hide/,
-    name: 'hide',
-    type: 'Boolean'
+    name: "hide",
+    type: "Boolean",
   },
   {
     regex: /@beta/,
-    name: 'beta',
-    type: 'Boolean'
+    name: "beta",
+    type: "Boolean",
   },
   {
     regex: /@propType\s+(.*)/,
-    name: 'type',
-    type: 'String'
-  }
+    name: "type",
+    type: "String",
+  },
 ];
 
 function addAnnotations(prop) {
@@ -30,12 +30,12 @@ function addAnnotations(prop) {
     annotations.forEach(({ regex, name }) => {
       const match = prop.description.match(regex);
       if (match) {
-        prop.description = prop.description.replace(regex, '').trim();
+        prop.description = prop.description.replace(regex, "").trim();
         if (name) {
           prop[name] = match[2] || match[1] || true;
         }
       }
-    })
+    });
   }
 
   return prop;
@@ -55,74 +55,101 @@ function getComponentMetadata(filename, sourceText) {
     // console.warn(`No component found in ${filename}:`, err);
   }
 
-  return (parsedComponents || []).filter(parsed => parsed && parsed.displayName);
+  return (parsedComponents || []).filter(
+    (parsed) => parsed && parsed.displayName
+  );
 }
 
-function getInterfaceMetadata(filename, sourceText) {
-  const ast = ts.createSourceFile(
+const getNodeText = (node, sourceText) => {
+  if (!node || !node.pos || !node.end) {
+    return undefined;
+  }
+
+  return sourceText.substring(node.pos, node.end).trim();
+};
+
+const buildJsDocProps = (nodes, sourceText) =>
+  nodes?.reduce((acc, member) => {
+    const name =
+      (member.name && member.name.escapedText) ||
+      (member.parameters &&
+        `[${getNodeText(member.parameters[0], sourceText)}]`) ||
+      "Unknown";
+    acc[name] = {
+      description: member.jsDoc
+        ? member.jsDoc.map((doc) => doc.comment).join("\n")
+        : null,
+      required: member.questionToken === undefined,
+      type: {
+        raw: getNodeText(member.type, sourceText).trim(),
+      },
+    };
+    return acc;
+  }, {});
+
+const getSourceFileStatements = (filename, sourceText) => {
+  const { statements } = ts.createSourceFile(
     filename,
     sourceText,
     ts.ScriptTarget.Latest // languageVersion
   );
-  
-  function getText(node) {
-    if (!node || !node.pos || !node.end) {
-      return undefined;
-    }
-    return sourceText.substring(node.pos, node.end).trim();
-  }
 
-  const interfaces = [];
-  
-  ast.statements
-    .filter(statement => statement.kind === ts.SyntaxKind.InterfaceDeclaration)
-    .forEach(statement => {
-      const props = statement.members.reduce((acc, member) => {
-        const name = (member.name && member.name.escapedText)
-          || (member.parameters && `[${getText(member.parameters[0])}]`)
-          || 'Unknown';
-        acc[name] = {
-          description: member.jsDoc
-            ? member.jsDoc.map(doc => doc.comment).join('\n')
-            : null,
-          required: member.questionToken === undefined,
-          type: {
-            raw: getText(member.type).trim()
+  return statements;
+};
+
+const getInterfaceMetadata = (filename, sourceText) =>
+  getSourceFileStatements(filename, sourceText).reduce(
+    (metaDataAcc, statement) => {
+      if (statement.kind === ts.SyntaxKind.InterfaceDeclaration) {
+        metaDataAcc.push({
+          displayName: statement.name.escapedText,
+          description: statement.jsDoc?.map((doc) => doc.comment).join("\n"),
+          props: buildJsDocProps(statement.members, sourceText),
+        });
+      }
+
+      return metaDataAcc;
+    },
+    []
+  );
+
+const getTypeAliasMetadata = (filename, sourceText) =>
+  getSourceFileStatements(filename, sourceText).reduce(
+    (metaDataAcc, statement) => {
+      if (statement.kind === ts.SyntaxKind.TypeAliasDeclaration) {
+        const props = statement.type.types?.reduce((propAcc, type) => {
+          if (type.members) {
+            propAcc.push(buildJsDocProps(type.members, sourceText));
           }
-        };
-        return acc;
-      }, {});
-
-      interfaces.push({
-        displayName: statement.name.escapedText,
-        description: statement.jsDoc
-            ? statement.jsDoc.map(doc => doc.comment).join('\n')
-            : null,
-        props
-      });
-    });
-  return interfaces;
-}
+
+          return propAcc;
+        }, []);
+
+        metaDataAcc.push({
+          props,
+          displayName: statement.name.escapedText,
+          description: statement.jsDoc?.map((doc) => doc.comment).join("\n"),
+        });
+      }
+
+      return metaDataAcc;
+    },
+    []
+  );
 
 function normalizeProp([
   name,
-  {
-    required,
-    annotatedType,
-    type,
-    tsType,
-    description,
-    defaultValue
-  }
+  { required, annotatedType, type, tsType, description, defaultValue },
 ]) {
   const res = {
     name,
-    type: annotatedType
-      || (type && type.name)
-      || (type && (type.raw || type.name))
-      || (tsType && (tsType.raw || tsType.name))
-      || 'No type info',
-    description
+    type:
+      annotatedType ||
+      (type && type.name) ||
+      (type && (type.raw || type.name)) ||
+      (tsType && (tsType.raw || tsType.name)) ||
+      "No type info",
+    description,
   };
   if (required) {
     res.required = true;
@@ -134,45 +161,46 @@ function normalizeProp([
   return res;
 }
 
-function getDescription(parsed, ) {
-
-}
-
 function tsDocgen(file) {
-  const sourceText = fs.readFileSync(file, 'utf8');
+  const sourceText = fs.readFileSync(file, "utf8");
   const componentMeta = getComponentMetadata(file, sourceText); // Array of components with props
   const interfaceMeta = getInterfaceMetadata(file, sourceText); // Array of interfaces with props
-  const interfaceMetaMap = interfaceMeta.reduce(function(target, interface) {
-    target[interface.displayName] = interface;
+  const typeAliasMeta = getTypeAliasMetadata(file, sourceText); // Array of type aliases with props
+  const propsMetaMap = [...interfaceMeta, ...typeAliasMeta].reduce(function (
+    target,
+    interfaceOrTypeAlias
+  ) {
+    target[interfaceOrTypeAlias.displayName] = interfaceOrTypeAlias;
     return target;
-  }, {})
+  },
+  {});
 
-  // Go through each component and check if they have an interface with a jsDoc description
+  // Go through each component and check if they have an interface or type alias with a jsDoc description
   // If so copy it over (fix for https://github.com/patternfly/patternfly-react/issues/7612)
-  componentMeta.forEach(c => {
+  componentMeta.forEach((c) => {
     if (c.description) {
       return c;
     }
-    const interface = `${c.displayName}Props`;
-    if (interfaceMetaMap[interface] && interfaceMetaMap[interface].description) {
-      c.description = interfaceMetaMap[interface].description;
+
+    const propsName = `${c.displayName}Props`;
+    if (propsMetaMap[propsName]?.description) {
+      c.description = propsMetaMap[propsName].description;
     }
-  })
+  });
 
-  return componentMeta
-    .concat(interfaceMeta)
-    .map(parsed => ({
+  return [...componentMeta, ...interfaceMeta, ...typeAliasMeta].map(
+    (parsed) => ({
       name: parsed.displayName,
-      description: parsed.description || '',
+      description: parsed.description || "",
       props: Object.entries(parsed.props || {})
         .map(normalizeProp)
         .map(addAnnotations)
-        .filter(prop => !prop.hide)
-        .sort((p1, p2) => p1.name.localeCompare(p2.name))
-    }));
+        .filter((prop) => !prop.hide)
+        .sort((p1, p2) => p1.name.localeCompare(p2.name)),
+    })
+  );
 }
 
 module.exports = {
-  tsDocgen
+  tsDocgen,
 };
-

package/scripts/typeDocGen.js

@@ -0,0 +1,209 @@
+const TypeDoc = require("typedoc");
+const path = require("path");
+
+/** Compiles variable types if a type is generic. */
+function getVariableType(typeArguments) {
+  if (!typeArguments || typeArguments.length === 0) {
+    return "";
+  }
+
+  const typeArgs = typeArguments.map((type) => getType(type));
+
+  return (
+    typeArgs.reduce((acc, type) => acc + type + ", ", "<").slice(0, -2) + ">"
+  );
+}
+
+/** compiles key/value pairs of a Type or Interface. */
+function getPropertyTypes(properties) {
+  const formattedProperties = properties.reduce((acc, property) => {
+    const { flags, name, type } = property;
+    const formattedName = flags.isOptional ? name + "?" : name;
+    return `${acc}${formattedName}: ${getType(type)}; `;
+  }, "");
+
+  return `{ ${formattedProperties} }`;
+}
+
+/** Compiles the subtypes of a tuple. */
+function getTupleTypes(tupleElements) {
+  const [firstType, secondType] = tupleElements.map((element) =>
+    getType(element)
+  );
+  return `[${firstType}, ${secondType}]`;
+}
+
+/** Compiles the different subtypes of a union or intersection. */
+function getJoinedTypes(types, joinChar) {
+  const joinedTypes = types.map((type) => getType(type));
+  return joinedTypes
+    .reduce((acc, type) => `${acc} ${joinChar} ${type}`, "")
+    .slice(2);
+}
+
+/** Return the type of a reflection.
+ * For anything that has, or can have, multiple subtypes (i.e. variable types in a generic, properties in an interface,
+ * several types in a union, callbacks, etc.) it will recursively navigate the parsed type info as needed to resolve
+ * all relevant subtypes.
+ */
+function getType(reflection) {
+  switch (reflection.type) {
+    case "intrinsic":
+    case "reference":
+      return reflection.name + getVariableType(reflection.typeArguments);
+    case "union":
+      return getJoinedTypes(reflection.types, "|");
+    case "reflection":
+      const { signatures, children } = reflection.declaration;
+      if (signatures) {
+        return getFunctionDocumentation(signatures[0]).type;
+      } else if (children) {
+        return getPropertyTypes(children);
+      } else {
+        return "Props";
+      }
+    case "array":
+      return reflection.elementType.name + "[]";
+    case "tuple":
+      return getTupleTypes(reflection.elements);
+    case "intersection":
+      return getJoinedTypes(reflection.types, "&");
+    case "literal":
+      return reflection.value;
+  }
+}
+
+/** Compiles information about the parameters of a function.
+ * Includes the name, default value, type, and whether it is optional.
+ */
+function getParamInfo(parameters = []) {
+  return parameters.map((parameter) => {
+    const { name, defaultValue, type, flags } = parameter;
+    return {
+      name,
+      default: defaultValue,
+      type: getType(type),
+      optional: flags.isOptional,
+    };
+  });
+}
+
+/** Formats call signature for a function. */
+function formatFunctionType(parameters, returnType) {
+  const annotatedParams = parameters.map((parameter) => {
+    const { name, type, optional } = parameter;
+
+    return [optional ? name + "?" : name, type];
+  });
+
+  const formattedParams = annotatedParams
+    .reduce((acc, param) => `${acc}, ${param[0]}: ${param[1]}`, "")
+    .slice(2);
+
+  return `(${formattedParams}) => ${returnType}`;
+}
+
+/** Primary entry point for gathering type information from a typedoc function reflection. */
+function getFunctionDocumentation(callSignatureReflection) {
+  const { type, parameters, comment } = callSignatureReflection;
+  const params = getParamInfo(parameters);
+
+  const returnType = type?.name || getType(type);
+
+  return {
+    params,
+    returnType,
+    type: formatFunctionType(params, returnType),
+    description: comment?.shortText,
+  };
+}
+
+/** Parses the source for a package using TypeDoc. */
+function typeDocGen(entryPoint, tsconfigLocation) {
+  const app = new TypeDoc.Application();
+  app.options.addReader(new TypeDoc.TSConfigReader());
+  app.bootstrap({
+    // typedoc options here
+    entryPointStrategy: "expand",
+    entryPoints: [entryPoint],
+    tsconfig: tsconfigLocation,
+  });
+
+  // this non-standard reflection creation allows us to ignore any type errors in a package
+  const project = app.converter.convert(app.getEntryPoints() ?? []);
+
+  // if something caused project conversion to fail log an error
+  if (project) {
+    return project;
+  } else {
+    console.error("Something went wrong during typedoc project conversion");
+    return {};
+  }
+}
+
+/** Takes package information and returns an object with all tsdoc standard format info about the functions in it.
+ * 
+ * The object has file names as keys, with values being an additional object which has the function names in that file
+ * as keys and the information about that function as the value, also in object form.
+ * Information includes the name of the file in which it's defined, the parameters, description, default values and
+ * type information.
+ *
+ * Example structure:
+ * {
+ *   "components/component.tsx": {
+ *     "boolToString": {
+ *       "description": "Converts a boolean to a string",
+ *       "params": [
+ *         {
+ *           "default": false,
+ *           "name": "booleanValue",
+ *           "optional": true,
+ *           "type": "boolean",
+ *         },
+ *       ],
+ *       "returnType": "string",
+ *       "type": "(booleanValue?: boolean) => string",
+ *     },
+ *   },
+ * }
+ */
+function getPackageFunctionDocumentation(
+  packageName,
+  pathToRoot = "dist/js/index.js",
+  srcPath = "src",
+  tsconfigPath = "tsconfig.json"
+) {
+  const packageRoot = require.resolve(packageName).replace(pathToRoot, "");
+  const entry = path.relative(process.cwd(), path.join(packageRoot, srcPath));
+  const configLocation = path.relative(
+    process.cwd(),
+    path.join(packageRoot, tsconfigPath)
+  );
+
+  const packageReflection = typeDocGen(entry, configLocation);
+
+  // 64 corresponds with functions, see all reflection kinds here: https://typedoc.org/api/enums/Models.ReflectionKind-1.html
+  const functionReflections = packageReflection.getReflectionsByKind(64);
+
+  const functionsMap = functionReflections.reduce((acc, functionReflection) => {
+    const { name, sources, signatures } = functionReflection;
+
+    const sourceFile = sources[0].fileName;
+    const shortSourceFile = sourceFile.replace(
+      `${packageName}/${srcPath}/`,
+      ""
+    );
+    const obj = getFunctionDocumentation(signatures[0]);
+
+    if (acc[shortSourceFile]) {
+      acc[shortSourceFile] = { ...acc[shortSourceFile], [name]: obj };
+    } else {
+      acc[shortSourceFile] = { [name]: obj };
+    }
+    return acc;
+  }, {});
+
+  return functionsMap;
+}
+
+module.exports = { getPackageFunctionDocumentation };

package/scripts/webpack/webpack.base.config.js

@@ -8,6 +8,7 @@ module.exports = (_env, argv) => {
   const {
     pathPrefix = '',
     mode,
+    googleAnalyticsID = false,
     algolia = {},
     hasGdprBanner = false,
     hasFooter = false,
@@ -27,7 +28,8 @@ module.exports = (_env, argv) => {
     output: {
       publicPath: isProd ? `${pathPrefix}/` : '/',
       pathinfo: false, // https://webpack.js.org/guides/build-performance/#output-without-path-info,
-      hashDigestLength: 8
+      hashDigestLength: 8,
+      clean: true, // Clean the output directory before emit.
     },
     amd: false, // We don't use any AMD modules, helps performance
     mode: isProd ? 'production' : 'development',
@@ -39,9 +41,12 @@ module.exports = (_env, argv) => {
           include: [
             path.resolve(process.cwd(), 'src'),
             path.resolve(process.cwd(), 'patternfly-docs'),
+            path.resolve(process.cwd(), 'examples'),
             path.resolve(__dirname, '../..'), // Temporarily compile theme using webpack for development
             /react-[\w-]+\/src\/.*\/examples/,
             /react-[\w-]+\\src\\.*\\examples/, // fix for Windows
+            /react-[\w-]+\/patternfly-docs\/.*\/examples/, //fixes for extensions
+            /react-[\w-]+\\patternfly-docs\\.*\\examples/,
           ].concat(includePaths.map(path => new RegExp(path))),
           exclude: [
             path.resolve(__dirname, '../../node_modules'), // Temporarily compile theme using webpack for development
@@ -82,35 +87,28 @@ module.exports = (_env, argv) => {
         },
         {
           test: /\.(gif|svg)$/,
-          use: {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[contenthash].[ext]',
-              outputPath: 'images/'
-            },
+          type: 'asset/resource',
+          dependency: { not: ['url'] },
+          generator: {
+            filename: 'images/[hash][ext][query]'
           }
         },
         {
           test: /\.(pdf)$/,
-          use: {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[contenthash].[ext]',
-            }
+          type: 'asset/resource',
+          dependency: { not: ['url'] },
+          generator: {
+            filename: '[hash][ext][query]'
           }
         },
         {
           test: /.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
-          use: [
-            {
-              loader: 'file-loader',
-              options: {
-                name: '[name].[ext]',
-                outputPath: 'fonts/'
-              }
-            }
-          ]
-        }
+          type: 'asset/resource',
+          dependency: { not: ['url'] },
+          generator: {
+            filename: 'fonts/[name][ext][query]'
+          }
+        },
       ]
     },
     resolve: {
@@ -118,21 +116,29 @@ module.exports = (_env, argv) => {
       alias: {
         'client-styles': path.resolve(process.cwd(), 'patternfly-docs/patternfly-docs.css.js'),
         './routes-client': path.resolve(process.cwd(), 'patternfly-docs/patternfly-docs.routes.js'),
-        './routes-generated': path.resolve(process.cwd(), 'patternfly-docs/generated/index.js')
+        './routes-generated': path.resolve(process.cwd(), 'patternfly-docs/generated/index.js'),
+        process: "process/browser"
       },
       modules: [
         'node_modules',
         ...module.paths,
-      ]
+      ],
+      fallback: {
+        "path": require.resolve("path-browserify")
+      },
     },
     // Use this module's node_modules first (for use in Core/React workspaces)
     resolveLoader: {
       modules: module.paths,
     },
     plugins: [
+      new webpack.ProvidePlugin({
+        process: 'process/browser',
+      }),
       new webpack.DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify(mode),
         'process.env.pathPrefix': JSON.stringify(isProd ? pathPrefix : ''),
+        'process.env.googleAnalyticsID': JSON.stringify(isProd ? googleAnalyticsID : ''),
         'process.env.algolia': JSON.stringify(algolia),
         'process.env.hasGdprBanner': JSON.stringify(hasGdprBanner),
         'process.env.hasFooter': JSON.stringify(hasFooter),
@@ -143,20 +149,16 @@ module.exports = (_env, argv) => {
         'process.env.sideNavItems': JSON.stringify(sideNavItems),
         'process.env.topNavItems': JSON.stringify(topNavItems),
         'process.env.prnum': JSON.stringify(process.env.CIRCLE_PR_NUMBER || process.env.PR_NUMBER || ''),
-        'process.env.prurl': JSON.stringify(process.env.CIRCLE_PULL_REQUEST || ''),
+        'process.env.prurl': JSON.stringify(process.env.CIRCLE_PULL_REQUEST || '')
       }),
       new CopyWebpackPlugin({
         patterns: [
           { from: path.join(__dirname, '../../assets'), to: 'assets' }
         ]
       }),
-      new MonacoWebpackPlugin(),
-      ...(isProd
-        ? [
-          new CleanWebpackPlugin()
-        ]
-        : []
-      )
+      new MonacoWebpackPlugin({
+        globalAPI: true,
+      })
     ],
     stats: 'minimal'
   };

package/scripts/webpack/webpack.client.config.js

@@ -5,6 +5,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
+const webpack = require('webpack');
 const baseConfig = require('./webpack.base.config');
 const { getHtmlWebpackPlugins } = require('./getHtmlWebpackPlugins');
 
@@ -23,18 +24,20 @@ const reactJSRegex = /react-([^\\/]*)[\\/]dist[\\/].*\.js$/
 
 const clientConfig = async (env, argv) => {
   const isProd = argv.mode === 'production';
-
   return {
     output: {
       path: argv.output ? path.resolve(argv.output) : path.resolve('public'),
-      filename: '[name].[hash].bundle.js'
+      filename: '[name].[contenthash].bundle.js'
     },
     devServer: {
       hot: true,
       historyApiFallback: true,
+      compress: true,
       port: argv.port,
-      clientLogLevel: 'info',
-      stats: 'minimal'
+      client: {
+        logging: 'info',
+      },
+      static: {}
     },
     optimization: {
       splitChunks: {
@@ -71,10 +74,7 @@ const clientConfig = async (env, argv) => {
       },
       minimize: isProd ? true : false,
       minimizer: [
-        new TerserPlugin({
-          cache: path.join(process.cwd(), '.cache/terser'),
-          ...(process.env.CI ? { parallel: 2 } : {})
-        }),
+        new TerserPlugin(),
       ],
       runtimeChunk: 'single',
     },
@@ -113,6 +113,9 @@ const clientConfig = async (env, argv) => {
       ]
     },
     plugins: [
+      new webpack.DefinePlugin({
+        'process.env.PRERENDER': false,
+      }),
       new MiniCssExtractPlugin(!isProd ? {} : {
         filename: '[name].[contenthash].css',
         chunkFilename: '[name].[contenthash].css',