Migrate to esm

.github/workflows/main.yml

@@ -9,3 +9,4 @@ jobs:
         with:
           node-version-file: .node-version
       - run: npm install
+      - run: npm run build-lint-test

.node-version

@@ -1 +1 @@
-20.17.0
+22.17.1

.prettierignore

@@ -2,4 +2,3 @@ api-extractor/**/*
 dist/**/*
 docs/**/*
 temp/**/*
-types/**/*

.vscode/settings.json

@@ -1,10 +1,20 @@
 {
-  "cSpell.words": ["heaslip", "rushstack", "tsdoc", "unscoped", "yalc"],
+  "cSpell.words": [
+    "heaslip",
+    "packagehash",
+    "rushstack",
+    "tsdoc",
+    "unscoped",
+    "yalc"
+  ],
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
   "eslint.enable": true,
-  "eslint.validate": ["javascript", "typescript"],
+  "eslint.validate": [
+    "javascript",
+    "typescript"
+  ],
   "files.associations": {
     "api-extractor.json": "jsonc"
   },
@@ -33,7 +43,7 @@
     "CHANGELOG": true,
     "docs/**/*": true,
     "LICENSE": true,
-    "types/**/*": true
+    "package-lock.json": true
   },
   "testing.openTesting": "neverOpen",
   "testing.automaticallyOpenTestResults": "neverOpen",

README.markdown

@@ -17,14 +17,14 @@ This package is developed with Node.js 18 (the active LTS [release](https://node
 In this folder:
 
 ```sh
-# Watch src and build into dist/cjs and dist/esm on change
+# Watch src and build into dist on change
 npm run dev
 ```
 
 If you add a new function or making a change to the arguments of an existing function (without this TypeScript won’t be aware of the changes, and the `build-lint-test` script will fail):
 
 ```sh
-# Update api-extractor/* (metadata about code generated by api-extractor), docs/* (Markdown documentation generated by api-documenter using api-extractor metadata) and types/react-dom-utils.d.ts (types generated by api-extractor)
+# Update api-extractor/* (metadata about code generated by api-extractor) and docs/* (Markdown documentation generated by api-documenter using api-extractor metadata)
 npm run api-extractor-update
 ```
 

api-extractor.json

@@ -3,5 +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/index.d.ts",
+  "apiReport": {
+    "enabled": true,
+    "reportFolder": "<projectFolder>/api-extractor"
+  },
+  "compiler": {
+    "tsconfigFilePath": "tsconfig-dist.json"
+  },
+  "docModel": {
+    "enabled": true,
+    "apiJsonFilePath": "<projectFolder>/api-extractor/react-dom-utils.api.json"
+  },
+  "dtsRollup": {
+    "enabled": false
+  },
+  "tsdocMetadata": {
+    "enabled": false
+  }
 }

api-extractor/react-dom-utils.api.json

@@ -1,7 +1,7 @@
 {
   "metadata": {
     "toolPackage": "@microsoft/api-extractor",
-    "toolVersion": "7.47.8",
+    "toolVersion": "7.52.10",
     "schemaVersion": 1011,
     "oldestForwardsCompatibleVersion": 1001,
     "tsdocConfig": {
@@ -175,7 +175,7 @@
         {
           "kind": "TypeAlias",
           "canonicalReference": "@asl-19/react-dom-utils!FormState:type",
-          "docComment": "/**\n * {@link useFormStateAndFocusManagement} state\n */\n",
+          "docComment": "/**\n * {@link useFormStateAndFocusManagement} state\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -199,7 +199,7 @@
               "text": ";"
             }
           ],
-          "fileUrlPath": "src/FormState.ts",
+          "fileUrlPath": "dist/FormState.d.ts",
           "releaseTag": "Public",
           "name": "FormState",
           "typeTokenRange": {
@@ -210,7 +210,7 @@
         {
           "kind": "TypeAlias",
           "canonicalReference": "@asl-19/react-dom-utils!StylableFC:type",
-          "docComment": "/**\n * React FunctionComponent that takes an optional className prop.\n *\n * @remarks\n *\n * The className prop is used for styling the component instance’s top-level element (which should have `className={className}`) from the outside.\n */\n",
+          "docComment": "/**\n * React FunctionComponent that takes an optional className prop.\n *\n * @remarks\n *\n * The className prop is used for styling the component instance’s top-level element (which should have `className={className}`) from the outside.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -238,7 +238,7 @@
               "text": ";"
             }
           ],
-          "fileUrlPath": "src/StylableFC.ts",
+          "fileUrlPath": "dist/StylableFC.d.ts",
           "releaseTag": "Public",
           "name": "StylableFC",
           "typeParameters": [
@@ -273,7 +273,7 @@
               "text": "void"
             }
           ],
-          "fileUrlPath": "src/useAddHydratedClassName.ts",
+          "fileUrlPath": "dist/useAddHydratedClassName.d.ts",
           "returnTypeTokenRange": {
             "startIndex": 1,
             "endIndex": 2
@@ -297,7 +297,7 @@
               "text": "void"
             }
           ],
-          "fileUrlPath": "src/useDynamicFocusOutlines.ts",
+          "fileUrlPath": "dist/useDynamicFocusOutlines.d.ts",
           "returnTypeTokenRange": {
             "startIndex": 1,
             "endIndex": 2
@@ -348,7 +348,7 @@
               "text": " | null>>"
             }
           ],
-          "fileUrlPath": "src/useFocusElementAfterRender.ts",
+          "fileUrlPath": "dist/useFocusElementAfterRender.d.ts",
           "returnTypeTokenRange": {
             "startIndex": 1,
             "endIndex": 8
@@ -395,7 +395,7 @@
             },
             {
               "kind": "Content",
-              "text": ">;\n    errorMessagesListRef: import(\"react\")."
+              "text": " | null>;\n    errorMessagesListRef: import(\"react\")."
             },
             {
               "kind": "Reference",
@@ -413,7 +413,7 @@
             },
             {
               "kind": "Content",
-              "text": ">;\n    formState: "
+              "text": " | null>;\n    formState: "
             },
             {
               "kind": "Reference",
@@ -452,7 +452,7 @@
               "text": ">>;\n}"
             }
           ],
-          "fileUrlPath": "src/useFormStateAndFocusManagement.ts",
+          "fileUrlPath": "dist/useFormStateAndFocusManagement.d.ts",
           "returnTypeTokenRange": {
             "startIndex": 3,
             "endIndex": 20
@@ -520,7 +520,7 @@
               "text": "void"
             }
           ],
-          "fileUrlPath": "src/useOnClickOutside.ts",
+          "fileUrlPath": "dist/useOnClickOutside.d.ts",
           "returnTypeTokenRange": {
             "startIndex": 9,
             "endIndex": 10

api-extractor/react-dom-utils.api.md

@@ -39,8 +39,8 @@ export const useFocusElementAfterRender: () => Dispatch<SetStateAction<HTMLEleme
 export const useFormStateAndFocusManagement: ({ disableFocusManagement, }?: {
     disableFocusManagement?: boolean;
 }) => {
-    confirmationMessageElementRef: RefObject<HTMLParagraphElement>;
-    errorMessagesListRef: RefObject<HTMLUListElement>;
+    confirmationMessageElementRef: RefObject<HTMLParagraphElement | null>;
+    errorMessagesListRef: RefObject<HTMLUListElement | null>;
     formState: FormState;
     setFormState: Dispatch<SetStateAction<FormState>>;
 };

docs/index.md

@@ -29,3 +29,4 @@ Shared ReactDOM utility functions and types for ASL19 projects.
 
 </td></tr>
 </tbody></table>
+

docs/react-dom-utils.md

@@ -118,3 +118,4 @@ React FunctionComponent that takes an optional className prop.
 
 </td></tr>
 </tbody></table>
+

docs/react-dom-utils.useformstateandfocusmanagement.md

@@ -12,8 +12,8 @@ Hook for storing [FormState](./react-dom-utils.formstate.md) and manipulating fo
 useFormStateAndFocusManagement: ({ disableFocusManagement, }?: {
     disableFocusManagement?: boolean;
 }) => {
-    confirmationMessageElementRef: import("react").RefObject<HTMLParagraphElement>;
-    errorMessagesListRef: import("react").RefObject<HTMLUListElement>;
+    confirmationMessageElementRef: import("react").RefObject<HTMLParagraphElement | null>;
+    errorMessagesListRef: import("react").RefObject<HTMLUListElement | null>;
     formState: FormState;
     setFormState: import("react").Dispatch<import("react").SetStateAction<FormState>>;
 }
@@ -54,9 +54,10 @@ _(Optional)_
 
 </td></tr>
 </tbody></table>
+
 **Returns:**
 
-{ confirmationMessageElementRef: import("react").RefObject&lt;HTMLParagraphElement&gt;; errorMessagesListRef: import("react").RefObject&lt;HTMLUListElement&gt;; formState: [FormState](./react-dom-utils.formstate.md)<!-- -->; setFormState: import("react").Dispatch&lt;import("react").SetStateAction&lt;[FormState](./react-dom-utils.formstate.md)<!-- -->&gt;&gt;; }
+{ confirmationMessageElementRef: import("react").RefObject&lt;HTMLParagraphElement \| null&gt;; errorMessagesListRef: import("react").RefObject&lt;HTMLUListElement \| null&gt;; formState: [FormState](./react-dom-utils.formstate.md)<!-- -->; setFormState: import("react").Dispatch&lt;import("react").SetStateAction&lt;[FormState](./react-dom-utils.formstate.md)<!-- -->&gt;&gt;; }
 
 ## Remarks
 

docs/react-dom-utils.useonclickoutside.md

@@ -49,6 +49,7 @@ Description
 
 </td></tr>
 </tbody></table>
+
 **Returns:**
 
 void

eslint.config.js

@@ -0,0 +1,22 @@
+import asl19 from "@asl-19/eslint-config";
+import { defineConfig } from "eslint/config";
+
+const typedAsl19 = /** @type {import("@asl-19/eslint-config")["default"]} */ (
+  asl19
+);
+
+const eslintConfig = defineConfig([
+  { ignores: ["dist/", ".yalc/"] },
+  {
+    extends: [
+      typedAsl19.base, // (for all projects)
+      typedAsl19.typescript, // (for TypeScript projects)
+    ],
+    rules: {
+      // https://github.com/eslint-community/eslint-plugin-security/issues/21
+      "security/detect-object-injection": "off",
+    },
+  },
+]);
+
+export default eslintConfig;