README Updates and dev-utils changes

Updated the readmes to include the UMD and css gzipped sizes

Updated the dev-utils to use constant flags for easier refactoring down
the road.

Updated the dev-utils to work a bit nicer for the base react-md package.

README.md

@@ -14,6 +14,8 @@ Create an accessible React application with the
   to implement a different theme for your React application
 - [Full documentation](https://react-md.dev) - All the remaining documentation
   along with every single guide, API Reference, and examples
+- [Library Size](#library-size) - The UMD bundle size for the entire `react-md`
+  library and sizes for some of the pre-built css files.
 
 ### Highlights/Features
 
@@ -134,27 +136,28 @@ components from react-md. It is generally recommended to update your base
 -  );
 -}
 +import {
-+  AppSizeListener,
-+  NestedDialogContextProvider,
-+  InteractionModeListener,
-+  StatesConfig,
++  Configuration,
++  Layout,
++  useLayoutNavigation,
 +  Text,
 +  Button,
 +} from 'react-md';
 +import './App.scss';
 +
++// see @react-md/layout package for info on the main navigation
++const routes = {};
 +function App() {
 +  return (
-+    <AppSizeListener>
-+      <NestedDialogContextProvider>
-+        <InteractionModeListener>
-+          <StatesConfig>
-+            <Text type="headline-4">Hello, world!</Text>
-+            <Button theme="primary">Example button</Button>
-+          </StatesConfig>
-+        </InteractionModeListener>
-+      </NestedDialogContextProvider>
-+    </AppSizeListener>
++    <Configuration>
++      <Layout
++        {...useLayoutNavigation(routes, pathname)}
++        appBarTitle="My App"
++        navHeaderTitle="My App"
++      >
++        <Text type="headline-4">Hello, world!</Text>
++        <Button theme="primary">Example button</Button>
++      </Layout>
++    </Configuration>
 +  );
 +}
 
@@ -164,6 +167,27 @@ export default App;
 More information can be found on the documentation site's page
 [about creating projects](https://react-md.dev/getting-started/installation)
 
+## Library Size
+
+The base `react-md` package (non-scoped) is the only package that also provides
+pre-built css themes and a UMD bundle. If you are interested in seeing what an
+estimated size for this library, check out the results below:
+
+```sh
+$ yarn workspace react-md build --clean --umd --themes
+
+The gzipped file sizes are:
+- dist/css/react-md.indigo-pink-200-dark.min.css 65 B
+- dist/css/react-md.indigo-pink-200-light.min.css 66 B
+- dist/css/react-md.light_blue-deep_orange-200-light.min.css 74 B
+- dist/css/react-md.light_blue-deep_orange-700-dark.min.css 75 B
+- dist/css/react-md.purple-pink-200-dark.min.css 65 B
+- dist/css/react-md.purple-pink-200-light.min.css 66 B
+- dist/css/react-md.teal-pink-200-dark.min.css 63 B
+- dist/css/react-md.teal-pink-200-light.min.css 64 B
+- dist/umd/react-md.production.min.js 55 B
+```
+
 ## Contributing
 
 Please read the [contributing guidelines](./.github/CONTRIBUTING.md) if you

packages/dev-utils/src/build.ts

@@ -14,6 +14,7 @@ export interface BuildConfig {
   updateOnly: boolean;
   umdOnly: boolean;
   stylesOnly: boolean;
+  themes: boolean;
   themesOnly: boolean;
   scriptsOnly: boolean;
   variablesOnly: boolean;
@@ -27,6 +28,7 @@ const DEFAULT_CONFIG: BuildConfig = {
   updateOnly: false,
   umdOnly: false,
   stylesOnly: false,
+  themes: false,
   themesOnly: false,
   scriptsOnly: false,
   variablesOnly: false,
@@ -40,6 +42,7 @@ async function runBuild({
   update,
   updateOnly,
   stylesOnly,
+  themes,
   themesOnly,
   scriptsOnly,
   variablesOnly,
@@ -48,9 +51,13 @@ async function runBuild({
     await time(runClean, "clean");
   }
 
-  if (themesOnly) {
+  if (themes || themesOnly) {
+    // styles are required for this to work.
+    await time(() => styles(css), "styles");
     await time(generateThemeStyles, "generate theme styles");
-    return;
+    if (themesOnly) {
+      return;
+    }
   }
 
   if (variablesOnly) {
@@ -66,7 +73,7 @@ async function runBuild({
     }
   }
 
-  if ((!umdOnly && !scriptsOnly) || stylesOnly) {
+  if (!themes && ((!umdOnly && !scriptsOnly) || stylesOnly)) {
     await time(() => styles(css), "styles");
   }
 
@@ -104,6 +111,7 @@ export default async function build(
       "updateOnly",
       "umdOnly",
       "stylesOnly",
+      "themes",
       "themesOnly",
       "variablesOnly",
     ]),

packages/dev-utils/src/cli.ts

@@ -1,19 +1,38 @@
 #!/usr/bin/env node
 
 import commander from "commander";
-
 import loglevel from "loglevel";
+
 import build, { BuildConfig } from "./build";
 import clean from "./clean";
-import markdownTOC from "./markdownTOC";
 import copyReadmes from "./copyReadmes";
+import {
+  CLEAN,
+  CLEAN_ONLY,
+  CSS,
+  DEBUG,
+  EMPTY,
+  GZIP,
+  LOOKUPS_ONLY,
+  NO_CLEAN,
+  SCRIPTS_ONLY,
+  SILENT,
+  STAGED,
+  STYLES_ONLY,
+  THEMES,
+  THEMES_ONLY,
+  UMD,
+  UMD_ONLY,
+  UPDATE,
+  UPDATE_ONLY,
+  VARIABLES_ONLY,
+} from "./flags";
+import markdownTOC from "./markdownTOC";
 import sandbox from "./sandbox";
 import sassdoc from "./sassdoc";
 
 const argv = process.argv.slice(2);
 
-const DEBUG = "--debug";
-const SILENT = "--silent";
 if (argv.includes(DEBUG)) {
   loglevel.setLevel("debug");
 } else if (argv.includes(SILENT)) {
@@ -36,32 +55,36 @@ createCommand("clean [dirs...]").action((dirs: string[]) => {
 });
 
 createCommand("build [options...]")
-  .option("--clean", "Boolean if the clean command should be run before build.")
+  .option(CLEAN, "Boolean if the clean command should be run before build.")
   .option(
-    "--styles-only",
+    STYLES_ONLY,
     "Only copies the scss files into the dist directory and compiles any styles.scss files to css"
   )
   .option(
-    "--scripts-only",
+    SCRIPTS_ONLY,
     "Only compiles the typescript files to ES Modules, CommonJS, and UMD."
   )
-  .option("--umd-only", "Only compiles the UMD build.")
-  .option("--umd", "Updates the build process to include the UMD build.")
+  .option(UMD, "Updates the build process to include the UMD build.")
+  .option(UMD_ONLY, "Only compiles the UMD build.")
   .option(
-    "--variables-only",
+    VARIABLES_ONLY,
     "Only creates updates the `src/scssVariables.ts` file"
   )
   .option(
-    "--gzip-size",
+    GZIP,
     "Always logs the gzip size instead of requiring the verbose flag to be enabled."
   )
   .option(
-    "--css",
+    CSS,
     "Update the build to also compile the base .css files for a package."
   )
-  .option("--themes-only", "Only build the react-md theme files.")
-  .option("--update", "Update all the shared files.")
-  .option("--update-only", "Update all the shared files only.")
+  .option(
+    THEMES,
+    "Update the build to also create the main theme files in the react-md base package"
+  )
+  .option(THEMES_ONLY, "Only build the react-md theme files.")
+  .option(UPDATE, "Update all the shared files.")
+  .option(UPDATE_ONLY, "Update all the shared files only.")
   .action((_, program: BuildConfig) => {
     build(program);
   });
@@ -78,22 +101,22 @@ createCommand("sandbox [components...]")
       "so that dynamic code sandboxes and inline code can be used."
   )
   .option(
-    "--clean",
+    CLEAN,
     "This will clean all the sandboxes before running the sandbox command"
   )
-  .option("--clean-only", "This will only clean all the existing Sandbox files")
+  .option(CLEAN_ONLY, "This will only clean all the existing Sandbox files")
   .option(
-    "--lookups-only",
+    LOOKUPS_ONLY,
     "This will only the command to update the sandboxes.ts file in the demos folder."
   )
   .option(
     // want this option so that the Json files don't need to be stored in git and the app can
     // run immediately for new users
-    "--empty",
+    EMPTY,
     "Creates an empty version of all the sandboxes that do not exist yet."
   )
   .option(
-    "--staged",
+    STAGED,
     "This will update the command to work with `lint-staged` to dynamically update only the required sandboxes"
   )
   .action(
@@ -113,7 +136,7 @@ createCommand("sandbox [components...]")
 
 createCommand("sassdoc")
   .option(
-    "--no-clean",
+    NO_CLEAN,
     "Boolean if the temp styles directory should not be cleaned up after this script is run"
   )
   .action(({ clean }: { clean: boolean }) => {

packages/dev-utils/src/flags.ts

@@ -0,0 +1,24 @@
+// logging flags
+export const DEBUG = "--debug";
+export const SILENT = "--silent";
+
+// optional build additions
+export const UMD = "--umd";
+export const CSS = "--css";
+export const GZIP = "--gzip";
+export const CLEAN = "--clean";
+export const UPDATE = "--update";
+export const EMPTY = "--empty";
+export const STAGED = "--staged";
+export const NO_CLEAN = "--no-clean";
+export const THEMES = "--themes";
+
+// filter build to only one type
+export const UMD_ONLY = "--umd-only";
+export const VARIABLES_ONLY = "--variables-only";
+export const STYLES_ONLY = "--styles-only";
+export const SCRIPTS_ONLY = "--scripts-only";
+export const THEMES_ONLY = "--themes-only";
+export const UPDATE_ONLY = "--update-only";
+export const CLEAN_ONLY = "--clean-only";
+export const LOOKUPS_ONLY = "--lookups-only";

packages/dev-utils/src/styles.ts

@@ -28,6 +28,7 @@ import {
   printSizes,
   time,
 } from "./utils";
+import { UMD } from "./flags";
 
 let loggedOnce = false;
 
@@ -261,6 +262,8 @@ export async function generateThemeStyles(): Promise<void> {
     "generating themes"
   );
 
-  const themeFiles = await glob("dist/css/*.min.css");
-  printSizes(themeFiles);
+  if (!process.argv.includes(UMD)) {
+    const themeFiles = await glob("dist/css/*.min.css");
+    printSizes(themeFiles);
+  }
 }

packages/dev-utils/src/utils.ts

@@ -1,26 +1,27 @@
+import { ExecOptions, execSync } from "child_process";
+import filesize from "filesize";
 import fs from "fs-extra";
-import path from "path";
-import { promisify } from "util";
-import { execSync, ExecOptions } from "child_process";
 import nodeGlob from "glob";
-import now from "performance-now";
-import prettyMS from "pretty-ms";
 import gzipSize from "gzip-size";
-import filesize from "filesize";
-import prettier from "prettier";
 import log from "loglevel";
+import path from "path";
+import now from "performance-now";
+import prettier from "prettier";
+import prettyMS from "pretty-ms";
+import { promisify } from "util";
 
+import { GZIP, UMD } from "./flags";
 import {
-  packageJson,
-  types,
   dist,
-  src,
   es,
   lib,
+  packageJson,
   packagesRoot,
-  tsConfigESModule,
+  src,
   tsConfigCommonJS,
+  tsConfigESModule,
   tsConfigVariables,
+  types,
 } from "./paths";
 
 const readDir = promisify(fs.readdir);
@@ -342,7 +343,10 @@ export function printSizes(
     return;
   }
 
-  const logger = process.argv.includes("--gzip-size") ? log.info : log.debug;
+  const logger =
+    process.argv.includes(GZIP) || process.argv.includes(UMD)
+      ? log.info
+      : log.debug;
 
   logger(message);
   logger(list(filePaths.map(fp => getFileSize(fp))));

packages/react-md/README.md

@@ -82,3 +82,24 @@ import { Button } from "@react-md/button";
 import { Layout, Configuration } from "@react-md/layout";
 import { Text } from "@react-md/typography";
 ```
+
+## Library Size
+
+This is is the only package that actually generates "default" `.css` files for a
+few themes as well as a UMD build. If you are interested in this library's size,
+check out the `build` results:
+
+```sh
+$ yarn build --clean --umd --themes
+
+The gzipped file sizes are:
+- dist/css/react-md.indigo-pink-200-dark.min.css 65 B
+- dist/css/react-md.indigo-pink-200-light.min.css 66 B
+- dist/css/react-md.light_blue-deep_orange-200-light.min.css 74 B
+- dist/css/react-md.light_blue-deep_orange-700-dark.min.css 75 B
+- dist/css/react-md.purple-pink-200-dark.min.css 65 B
+- dist/css/react-md.purple-pink-200-light.min.css 66 B
+- dist/css/react-md.teal-pink-200-dark.min.css 63 B
+- dist/css/react-md.teal-pink-200-light.min.css 64 B
+- dist/umd/react-md.production.min.js 55 B
+```