Add source

Author: ianschmitz

.eslintrc.json

@@ -0,0 +1,69 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "project": "./tsconfig.json",
+        "sourceType": "module"
+    },
+    "plugins": ["@typescript-eslint", "import", "react"],
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es2017": true,
+        "node": true,
+        "jest": true
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier",
+        "prettier/@typescript-eslint"
+    ],
+    "rules": {
+        "@typescript-eslint/explicit-function-return-type": [
+            "warn",
+            {
+                "allowExpressions": true
+            }
+        ],
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-floating-promises": "warn",
+        "@typescript-eslint/no-use-before-define": [
+            "warn",
+            {
+                "functions": false,
+                "classes": false,
+                "variables": false,
+                "typedefs": false
+            }
+        ],
+        "@typescript-eslint/no-unused-vars": [
+            "warn",
+            {
+                "args": "none",
+                "ignoreRestSiblings": true
+            }
+        ],
+        "import/order": "warn",
+        "no-console": "warn"
+    },
+    "overrides": [
+        {
+            "files": ["**/*.test.ts?(x)"],
+            "rules": {
+                // Disable rules that are lower value in tests
+                "@typescript-eslint/explicit-function-return-type": "off",
+                "@typescript-eslint/no-non-null-assertion": "off"
+            }
+        }
+    ]
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+lib/

.prettierrc

@@ -0,0 +1,4 @@
+{
+    "tabWidth": 4,
+    "trailingComma": "es5"
+}

.vscode/launch.json

@@ -0,0 +1,22 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Debug Jest Tests",
+            "type": "node",
+            "request": "launch",
+            "runtimeArgs": [
+                "--inspect-brk",
+                "${workspaceRoot}/node_modules/.bin/jest",
+                "--runInBand",
+                "--watch"
+            ],
+            "console": "integratedTerminal",
+            "internalConsoleOptions": "neverOpen",
+            "port": 9229
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "eslint.validate": [
+        "javascript",
+        "javascriptreact",
+        { "language": "typescript", "autoFix": true },
+        { "language": "typescriptreact", "autoFix": true }
+    ]
+}

README.md

@@ -1 +1,60 @@
-# react-lazy-with-preload
+`react-lazy-with-preload` wraps the `React.lazy()` API and adds the ability to preload the component before it is rendered for the first time.
+
+## Install
+
+```sh
+npm install react-lazy-with-preload
+```
+
+## Usage
+
+**Before:**
+
+```js
+import { lazy, Suspense } from "react";
+const OtherComponent = lazy(() => import("./OtherComponent"));
+```
+
+**After:**
+
+```js
+import { Suspense } from "react";
+import lazy from "react-lazy-with-preload";
+const OtherComponent = lazy(() => import("./OtherComponent"));
+
+// ...
+OtherComponent.preload();
+```
+
+For more information about React code-splitting, `React.lazy` and `React.Suspense`, see https://reactjs.org/docs/code-splitting.html.
+
+## Example
+
+To preload a component before it is rendered for the first time, the component that is returned from `lazy()` has a `preload` function attached that you can invoke.
+
+For example, if you need to load a component when a button is pressed, you could start preloading the component when the user hovers over the button:
+
+```js
+function SomeComponent() {
+    const { showOtherComponent, setshowOtherComponent } = useState(false);
+
+    return (
+        <div>
+            <Suspense fallback={<div>Loading...</div>}>
+                {showOtherComponent && <OtherComponent />}
+            </Suspense>
+            <button
+                onClick={() => setshowOtherComponent(true)}
+                // This component will be needed soon. Let's preload it!
+                onMouseOver={() => OtherComponent.preload()}
+            >
+                Click me to render OtherComponent
+            </button>
+        </div>
+    );
+}
+```
+
+## Acknowledgements
+
+Inspired by the preload behavior of [react-loadable](https://github.com/jamiebuilds/react-loadable).

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    presets: [
+        ["@babel/preset-env", { targets: { node: "current" } }],
+        "@babel/preset-react",
+        "@babel/preset-typescript",
+    ],
+};

jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    // Automatically clear mock calls and instances between every test
+    clearMocks: true,
+    roots: ["<rootDir>/src/"],
+    watchPlugins: [
+        "jest-watch-typeahead/filename",
+        "jest-watch-typeahead/testname",
+    ],
+};