Migrate to esm

.github/workflows/main.yml

@@ -1,20 +1,12 @@
 on: push
 
 jobs:
-  build-check-and-lint:
-    runs-on: ubuntu-latest
-
+  build-lint-test:
+    runs-on: ubuntu-22.04
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
-
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 18.x
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Build, check, and lint
-        run: npm run build-check-and-lint
+          node-version-file: .node-version
+      - run: npm install
+      - run: npm run build-lint-test

.gitignore

@@ -1,5 +1,6 @@
+.packagehash
+.yalc/
 dist/
 node_modules/
 package/
 temp/
-.yalc/

.node-version

@@ -1 +1 @@
-18.15.0
+22.17.1

.vscode/settings.json

@@ -5,13 +5,15 @@
     "Heaslip",
     "loadingprogressindicatorprops",
     "nprogress",
+    "packagehash",
     "rushstack",
     "tsdoc",
     "Unmemoized",
-    "unscoped"
+    "unscoped",
+    "yalc"
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.formatOnSave": false,
   "editor.tabSize": 2,
@@ -37,8 +39,7 @@
     "dist/**/*": true,
     "docs/**/*": true,
     "LICENSE": true,
-    "package-lock.json": true,
-    "types/**/*": true
+    "package-lock.json": true
   },
   "typescript.preferences.importModuleSpecifier": "relative",
   "typescript.preferences.importModuleSpecifierEnding": "minimal",

api-extractor.json

@@ -3,6 +3,22 @@
  */
 {
   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
-  "extends": "@asl-19/shared-package-configs/api-extractor.json",
-  "mainEntryPointFilePath": "<projectFolder>/dist/esm/index.d.ts"
+  "mainEntryPointFilePath": "<projectFolder>/dist/index.d.ts",
+  "apiReport": {
+    "enabled": true,
+    "reportFolder": "<projectFolder>/api-extractor"
+  },
+  "compiler": {
+    "tsconfigFilePath": "tsconfig-dist.json"
+  },
+  "docModel": {
+    "enabled": true,
+    "apiJsonFilePath": "<projectFolder>/api-extractor/react-loading-progress-indicator.api.json"
+  },
+  "dtsRollup": {
+    "enabled": false
+  },
+  "tsdocMetadata": {
+    "enabled": false
+  }
 }

api-extractor/react-loading-progress-indicator.api.json

@@ -1,7 +1,7 @@
 {
   "metadata": {
     "toolPackage": "@microsoft/api-extractor",
-    "toolVersion": "7.34.4",
+    "toolVersion": "7.52.10",
     "schemaVersion": 1011,
     "oldestForwardsCompatibleVersion": 1001,
     "tsdocConfig": {
@@ -200,7 +200,7 @@
               "text": ">"
             }
           ],
-          "fileUrlPath": "src/components/LoadingProgressIndicator.tsx",
+          "fileUrlPath": "dist/components/LoadingProgressIndicator.d.ts",
           "isReadonly": true,
           "releaseTag": "Public",
           "name": "LoadingProgressIndicator",
@@ -210,66 +210,35 @@
           }
         },
         {
-          "kind": "Interface",
-          "canonicalReference": "@asl-19/react-loading-progress-indicator!LoadingProgressIndicatorGetStyleFunction:interface",
+          "kind": "TypeAlias",
+          "canonicalReference": "@asl-19/react-loading-progress-indicator!LoadingProgressIndicatorGetStyleFunction:type",
           "docComment": "/**\n * Function returning loading indicator styles.\n *\n * @remarks\n *\n * Called with attrs argument containing config and state values:\n *\n * - {@link LoadingProgressIndicatorProps.color | color}\n *\n * - {@link LoadingProgressIndicatorProps.direction | direction}\n *\n * - {@link LoadingProgressIndicatorProps.fadeAnimationDuration | fadeAnimationDuration}\n *\n * - {@link LoadingProgressIndicatorProps.growAnimationDuration | growAnimationDuration}\n *\n * - isVisible (boolean)\n *\n * - progress (number 0 and 1)\n *\n * Function definition should be outside of render function or wrapped in useCallback to prevent unnecessary re-renders.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
-              "text": "interface LoadingProgressIndicatorGetStyleFunction "
+              "text": "type LoadingProgressIndicatorGetStyleFunction = "
+            },
+            {
+              "kind": "Content",
+              "text": "(attrs: {\n    color: string;\n    direction: \"ltr\" | \"rtl\";\n    fadeAnimationDuration: number;\n    growAnimationDuration: number;\n    isVisible: boolean;\n    progress: number;\n}) => "
+            },
+            {
+              "kind": "Reference",
+              "text": "CSSProperties",
+              "canonicalReference": "@types/react!React.CSSProperties:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
             }
           ],
-          "fileUrlPath": "src/types/LoadingProgressIndicatorGetStyleFunction.ts",
+          "fileUrlPath": "dist/types/LoadingProgressIndicatorGetStyleFunction.d.ts",
           "releaseTag": "Public",
           "name": "LoadingProgressIndicatorGetStyleFunction",
-          "preserveMemberOrder": false,
-          "members": [
-            {
-              "kind": "CallSignature",
-              "canonicalReference": "@asl-19/react-loading-progress-indicator!LoadingProgressIndicatorGetStyleFunction:call(1)",
-              "docComment": "",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "(attrs: "
-                },
-                {
-                  "kind": "Content",
-                  "text": "{\n        color: string;\n        direction: \"ltr\" | \"rtl\";\n        fadeAnimationDuration: number;\n        growAnimationDuration: number;\n        isVisible: boolean;\n        progress: number;\n    }"
-                },
-                {
-                  "kind": "Content",
-                  "text": "): "
-                },
-                {
-                  "kind": "Reference",
-                  "text": "CSSProperties",
-                  "canonicalReference": "@types/react!React.CSSProperties:interface"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "returnTypeTokenRange": {
-                "startIndex": 3,
-                "endIndex": 4
-              },
-              "releaseTag": "Public",
-              "overloadIndex": 1,
-              "parameters": [
-                {
-                  "parameterName": "attrs",
-                  "parameterTypeTokenRange": {
-                    "startIndex": 1,
-                    "endIndex": 2
-                  },
-                  "isOptional": false
-                }
-              ]
-            }
-          ],
-          "extendsTokenRanges": []
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 3
+          }
         },
         {
           "kind": "Interface",
@@ -281,7 +250,7 @@
               "text": "interface LoadingProgressIndicatorProps "
             }
           ],
-          "fileUrlPath": "src/types/LoadingProgressIndicatorProps.ts",
+          "fileUrlPath": "dist/types/LoadingProgressIndicatorProps.d.ts",
           "releaseTag": "Public",
           "name": "LoadingProgressIndicatorProps",
           "preserveMemberOrder": false,
@@ -379,7 +348,7 @@
                 {
                   "kind": "Reference",
                   "text": "LoadingProgressIndicatorGetStyleFunction",
-                  "canonicalReference": "@asl-19/react-loading-progress-indicator!LoadingProgressIndicatorGetStyleFunction:interface"
+                  "canonicalReference": "@asl-19/react-loading-progress-indicator!LoadingProgressIndicatorGetStyleFunction:type"
                 },
                 {
                   "kind": "Content",
@@ -460,7 +429,7 @@
                 },
                 {
                   "kind": "Content",
-                  "text": "string | number"
+                  "text": "number | string"
                 },
                 {
                   "kind": "Content",

api-extractor/react-loading-progress-indicator.api.md

@@ -12,17 +12,14 @@ const LoadingProgressIndicator: FC<LoadingProgressIndicatorProps>;
 export default LoadingProgressIndicator;
 
 // @public
-export interface LoadingProgressIndicatorGetStyleFunction {
-    // (undocumented)
-    (attrs: {
-        color: string;
-        direction: "ltr" | "rtl";
-        fadeAnimationDuration: number;
-        growAnimationDuration: number;
-        isVisible: boolean;
-        progress: number;
-    }): CSSProperties;
-}
+export type LoadingProgressIndicatorGetStyleFunction = (attrs: {
+    color: string;
+    direction: "ltr" | "rtl";
+    fadeAnimationDuration: number;
+    growAnimationDuration: number;
+    isVisible: boolean;
+    progress: number;
+}) => CSSProperties;
 
 // @public
 export interface LoadingProgressIndicatorProps {
@@ -32,7 +29,7 @@ export interface LoadingProgressIndicatorProps {
     getStyle?: LoadingProgressIndicatorGetStyleFunction;
     growAnimationDuration?: number;
     isLoading: boolean;
-    key: string | number;
+    key: number | string;
     label: string;
     shouldBeVisibleBeforeFirstTick?: boolean;
     tickDuration?: number;

docs/index.md

@@ -6,7 +6,27 @@
 
 ## Packages
 
-|  Package | Description |
-|  --- | --- |
-|  [@asl-19/react-loading-progress-indicator](./react-loading-progress-indicator.md) | React loading progress indicator component. |
+<table><thead><tr><th>
+
+Package
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[@asl-19/react-loading-progress-indicator](./react-loading-progress-indicator.md)
+
+
+</td><td>
+
+React loading progress indicator component.
+
+
+</td></tr>
+</tbody></table>
 

docs/react-loading-progress-indicator.loadingprogressindicatorgetstylefunction.md

@@ -2,14 +2,21 @@
 
 [Home](./index.md) > [@asl-19/react-loading-progress-indicator](./react-loading-progress-indicator.md) > [LoadingProgressIndicatorGetStyleFunction](./react-loading-progress-indicator.loadingprogressindicatorgetstylefunction.md)
 
-## LoadingProgressIndicatorGetStyleFunction interface
+## LoadingProgressIndicatorGetStyleFunction type
 
 Function returning loading indicator styles.
 
 **Signature:**
 
 ```typescript
-interface LoadingProgressIndicatorGetStyleFunction 
+type LoadingProgressIndicatorGetStyleFunction = (attrs: {
+    color: string;
+    direction: "ltr" | "rtl";
+    fadeAnimationDuration: number;
+    growAnimationDuration: number;
+    isVisible: boolean;
+    progress: number;
+}) => CSSProperties;
 ```
 
 ## Remarks

docs/react-loading-progress-indicator.loadingprogressindicatorprops.key.md

@@ -9,7 +9,7 @@ Unique key representing this loading event.
 **Signature:**
 
 ```typescript
-key: string | number;
+key: number | string;
 ```
 
 ## Remarks