Correcting package.json exports

.eslintrc.js

@@ -29,12 +29,7 @@ module.exports = {
     },
   },
   extends: baseExtends,
-  ignorePatterns: [
-    "dist/**/*",
-    "jest.config*",
-    "useScriptLoader/index.d.ts",
-    "scriptloader-support/index.d.ts",
-  ],
+  ignorePatterns: ["dist/**/*", "module/**/*", "jest.config*"],
   env: { es6: true },
   parserOptions: { ecmaVersion: 2021, sourceType: "module" },
   overrides: [

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 dist
+module
 npm-debug.log
 .DS_Store
 release/github-prerelease

jest.config.ts

@@ -12,6 +12,7 @@ export default {
   // The glob patterns Jest uses to detect test files
   testRegex: ["/test/.*\\.(test|spec)\\.[jt]sx?"],
 
+  testEnvironment: "jsdom",
   // This configuration shows the Jest to the options so one can be passed to the testEnvironment
   testEnvironmentOptions: {
     resources: "usable",

module-tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "es6",
+    "target": "es6",
+    "outDir": "./module"
+  }
+}

package.json

@@ -2,20 +2,29 @@
   "name": "scriptloader-component",
   "version": "1.5.4",
   "description": "A React Component for reacting to scripts loading.",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "main": "module/index.js",
+  "exports": {
+    ".": {
+      "require": "dist/index.js",
+      "default": "module/index.js"
+    },
+    "./*": {
+      "require": "dist/*.js",
+      "default": "module/*.js"
+    }
+  },
   "files": [
     "dist",
+    "module",
     "src",
     "scriptloader-support",
     "useScriptLoader"
   ],
   "scripts": {
     "test": "eslint --quiet . && tsc --noEmit --project ./tsconfig.json && jest",
-    "build": "npm run build:base && npm run build:useScriptLoader && npm run build:scriptloader-support",
-    "build:base": "tsc --project ./tsconfig.json",
-    "build:useScriptLoader": "tsc --project ./useScriptLoader/tsconfig.json",
-    "build:scriptloader-support": "tsc --project ./scriptloader-support/tsconfig.json",
+    "build": "npm run build:dist && npm run build:module",
+    "build:dist": "tsc --project ./tsconfig.json",
+    "build:module": "tsc --project ./module-tsconfig.json",
     "prepack": "npm run build"
   },
   "repository": {
@@ -53,25 +62,25 @@
     "react": ">=16"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/preset-env": "^7.12.7",
-    "@babel/preset-react": "^7.12.7",
-    "@babel/preset-typescript": "^7.12.7",
+    "@babel/core": "^7.20.5",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@semantic-release/changelog": "^5.0.1",
-    "@semantic-release/commit-analyzer": "^8.0.1",
-    "@semantic-release/git": "^9.0.0",
-    "@semantic-release/github": "^7.2.0",
-    "@semantic-release/npm": "^7.0.8",
-    "@semantic-release/release-notes-generator": "^9.0.1",
-    "@testing-library/jest-dom": "^5.11.6",
+    "@semantic-release/changelog": "^6.0.2",
+    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^8.0.7",
+    "@semantic-release/npm": "^9.0.1",
+    "@semantic-release/release-notes-generator": "^10.0.3",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/node": "^14.14.9",
     "@types/react": "^18.0.18",
-    "@typescript-eslint/eslint-plugin": "^4.8.2",
-    "@typescript-eslint/parser": "^4.8.2",
-    "babel-jest": "^26.6.3",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "babel-jest": "^29.3.1",
     "commitlint-config-eslint": "^1.0.0",
     "conventional-changelog-eslint": "^3.0.9",
     "debug": "^4.3.1",
@@ -83,18 +92,18 @@
     "fs-extra": "^9.0.1",
     "husky": "^4.3.0",
     "issue-parser": "^6.0.0",
-    "jest": "^26.6.3",
-    "jest-environment-jsdom": "^26.6.2",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^10.5.2",
     "lodash": "^4.17.20",
-    "msw": "^0.22.3",
+    "msw": "^0.49.1",
     "octokit": "^1.0.0-hello-world",
     "p-filter": "^2.1.0",
     "prettier": "^2.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "semantic-release": "^17.3.0",
-    "ts-node": "^9.0.0",
+    "semantic-release": "^19.0.5",
+    "ts-node": "^10.9.1",
     "typescript": "^4.1.3"
   }
 }

src/ScriptLoader.tsx

@@ -0,0 +1,89 @@
+import React, { useCallback, useContext, useMemo, createContext } from "react";
+import useScriptLoader from "./hooks/useScriptLoader";
+import useSafeState from "./hooks/useSafeState";
+
+export interface ScriptLoaderFunction extends React.FC<ScriptLoaderProps> {
+  Success: typeof Success;
+  Failed: typeof Failed;
+  Loading: typeof Loading;
+}
+
+type ScriptLoaderStatus = "loading" | "succeeded" | "failed";
+
+interface ScriptLoaderContextShape {
+  loaderStatus: ScriptLoaderStatus;
+}
+
+const ScriptLoaderContext = createContext<ScriptLoaderContextShape>({
+  loaderStatus: "loading",
+});
+
+const noop = () => {
+  //intentionally empty
+};
+
+export interface ScriptLoaderProps {
+  source: string;
+  onError?: (err: ErrorEvent) => void;
+  onSuccess?: () => void;
+  children?: React.ReactNode;
+}
+
+const ScriptLoader: ScriptLoaderFunction = ({
+  source,
+  onSuccess = noop,
+  onError = noop,
+  ...props
+}) => {
+  const [isSucceeded, setIsSucceeded] = useSafeState(false);
+  const [isFailed, setIsFailed] = useSafeState(false);
+  const loaderStatus = useMemo<ScriptLoaderStatus>(() => {
+    if (isSucceeded) return "succeeded";
+    if (isFailed) return "failed";
+    return "loading";
+  }, [isSucceeded, isFailed]);
+
+  const onLoaderSuccess = useCallback(() => {
+    setIsSucceeded(true);
+    setIsFailed(false);
+    onSuccess();
+  }, [onSuccess, setIsSucceeded, setIsFailed]);
+
+  const onLoaderFailure = useCallback(
+    (err: ErrorEvent) => {
+      setIsFailed(true);
+      setIsSucceeded(false);
+      onError(err);
+    },
+    [onError, setIsSucceeded, setIsFailed]
+  );
+
+  useScriptLoader({
+    source,
+    onSuccess: onLoaderSuccess,
+    onFailure: onLoaderFailure,
+  });
+
+  return <ScriptLoaderContext.Provider value={{ loaderStatus }} {...props} />;
+};
+
+const Success: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const { loaderStatus } = useContext(ScriptLoaderContext);
+  return loaderStatus === "succeeded" ? <>{children}</> : <></>;
+};
+
+const Failed: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const { loaderStatus } = useContext(ScriptLoaderContext);
+  return loaderStatus === "failed" ? <>{children}</> : <></>;
+};
+
+const Loading: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const { loaderStatus } = useContext(ScriptLoaderContext);
+  return loaderStatus === "loading" ? <>{children}</> : <></>;
+};
+
+ScriptLoader.Success = Success;
+ScriptLoader.Failed = Failed;
+ScriptLoader.Loading = Loading;
+
+export default ScriptLoader;

src/index.tsx

@@ -1,89 +1,6 @@
-import React, { useCallback, useContext, useMemo, createContext } from "react";
-import useScriptLoader from "./hooks/useScriptLoader";
-import useSafeState from "./hooks/useSafeState";
-
-export interface ScriptLoaderFunction extends React.FC<ScriptLoaderProps> {
-  Success: typeof Success;
-  Failed: typeof Failed;
-  Loading: typeof Loading;
-}
-
-type ScriptLoaderStatus = "loading" | "succeeded" | "failed";
-
-interface ScriptLoaderContextShape {
-  loaderStatus: ScriptLoaderStatus;
-}
-
-const ScriptLoaderContext = createContext<ScriptLoaderContextShape>({
-  loaderStatus: "loading",
-});
-
-const noop = () => {
-  //intentionally empty
-};
-
-export interface ScriptLoaderProps {
-  source: string;
-  onError?: (err: ErrorEvent) => void;
-  onSuccess?: () => void;
-  children: React.ReactNode;
-}
-
-const ScriptLoader: ScriptLoaderFunction = ({
-  source,
-  onSuccess = noop,
-  onError = noop,
-  ...props
-}) => {
-  const [isSucceeded, setIsSucceeded] = useSafeState(false);
-  const [isFailed, setIsFailed] = useSafeState(false);
-  const loaderStatus = useMemo<ScriptLoaderStatus>(() => {
-    if (isSucceeded) return "succeeded";
-    if (isFailed) return "failed";
-    return "loading";
-  }, [isSucceeded, isFailed]);
-
-  const onLoaderSuccess = useCallback(() => {
-    setIsSucceeded(true);
-    setIsFailed(false);
-    onSuccess();
-  }, [onSuccess, setIsSucceeded, setIsFailed]);
-
-  const onLoaderFailure = useCallback(
-    (err: ErrorEvent) => {
-      setIsFailed(true);
-      setIsSucceeded(false);
-      onError(err);
-    },
-    [onError, setIsSucceeded, setIsFailed]
-  );
-
-  useScriptLoader({
-    source,
-    onSuccess: onLoaderSuccess,
-    onFailure: onLoaderFailure,
-  });
-
-  return <ScriptLoaderContext.Provider value={{ loaderStatus }} {...props} />;
-};
-
-const Success: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const { loaderStatus } = useContext(ScriptLoaderContext);
-  return loaderStatus === "succeeded" ? <>{children}</> : <></>;
-};
-
-const Failed: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const { loaderStatus } = useContext(ScriptLoaderContext);
-  return loaderStatus === "failed" ? <>{children}</> : <></>;
-};
-
-const Loading: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const { loaderStatus } = useContext(ScriptLoaderContext);
-  return loaderStatus === "loading" ? <>{children}</> : <></>;
-};
-
-ScriptLoader.Success = Success;
-ScriptLoader.Failed = Failed;
-ScriptLoader.Loading = Loading;
+import ScriptLoader from "./ScriptLoader";
+export { ScriptLoaderProps } from "./ScriptLoader";
+export { default as useScriptLoader } from "./hooks/useScriptLoader";
+export { waitForScript } from "./scriptloader-support";
 
 export default ScriptLoader;

src/scriptloader-support.ts

@@ -0,0 +1 @@
+export * from "./scriptloader-support/index";

src/useScriptLoader.ts

@@ -0,0 +1 @@
+export * from "./hooks/useScriptLoader";