feat: Provider React mocks loader component

A simple component that supplies two props; `enabled` and `loader`. The
`enabled` prop is used to enable mocks based on something like an
environment variable. The `loader` is a function that should return the
dynamic import which starts the worker. E.g.;
`loader={() => import("./mocks").then(({ worker }) => worker.start())}`

The motivation behind is that you don't want your mock code to end up in
your production build.

libs/react-loader/.eslintrc.json

@@ -0,0 +1,30 @@
+{
+  "extends": ["../../.eslintrc.base.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "ignoredFiles": ["{projectRoot}/vite.config.{js,ts,mjs,mts}"]
+          }
+        ]
+      }
+    }
+  ]
+}

libs/react-loader/README.md

@@ -0,0 +1,3 @@
+# @dynamic-msw/dashboard-core
+
+Documentation can be found here: [dynamic-msw](https://github.com/dynamicmsw/dynamic-msw/tree/main?tab=readme-ov-file#dynamic-mock-service-worker)

libs/react-loader/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@dynamic-msw/react-loader",
+  "version": "0.0.1",
+  "license": "MIT",
+  "dependencies": {
+    "react": "18.2.0"
+  },
+  "main": "./index.js",
+  "module": "./index.mjs",
+  "typings": "./index.d.ts"
+}

libs/react-loader/project.json

@@ -0,0 +1,30 @@
+{
+  "name": "react-loader",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/react-loader/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/react-loader",
+        "main": "libs/react-loader/src/index.ts",
+        "tsConfig": "libs/react-loader/tsconfig.lib.json",
+        "assets": ["libs/react-loader/*.md"]
+      }
+    },
+    "publish": {
+      "command": "node tools/scripts/publish.mjs dynamic-msw {args.ver} {args.tag}",
+      "dependsOn": ["build"]
+    },
+    "can-publish": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npx can-npm-publish",
+        "cwd": "{projectRoot}"
+      }
+    }
+  },
+  "tags": []
+}

libs/react-loader/src/MocksLoader.tsx

@@ -0,0 +1,44 @@
+import { type PropsWithChildren, useEffect, useState } from 'react';
+
+export type MocksLoaderProps = PropsWithChildren<{
+  enable: boolean;
+  loader: () => Promise<unknown>;
+}>;
+
+export default function MocksLoader({
+  children,
+  enable,
+  loader,
+}: MocksLoaderProps) {
+  const [isLoading, setIsLoading] = useState(!enable);
+
+  useEffect(() => {
+    if (enable) {
+      setIsLoading(true);
+      loader().then(() => {
+        setIsLoading(false);
+      });
+    }
+  }, [enable, loader]);
+
+  if (!isLoading) return children;
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        background: 'rgba(255,255,255,.8)',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 99999,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <h2>Loading Mock Service Worker...</h2>
+    </div>
+  );
+}

libs/react-loader/src/index.ts

@@ -0,0 +1 @@
+export { type MocksLoaderProps, default as MocksLoader } from './MocksLoader';

libs/react-loader/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/react-loader/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node", "vite/client"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["vite.config.mts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

libs/react-loader/tsconfig.spec.json

@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.mts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

libs/react-loader/vite.config.mts

@@ -0,0 +1,58 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+import externalizeAllDependencies from '../../tools/helpers/externalizeAllDependencies';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/libs/react-loader',
+
+  plugins: [
+    nxViteTsPaths(),
+    dts({
+      entryRoot: 'src',
+      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
+      skipDiagnostics: true,
+    }),
+    viteStaticCopy({
+      targets: [
+        {
+          src: 'README.md',
+          dest: '',
+        },
+      ],
+    }),
+  ],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: '../../dist/libs/react-loader',
+    reportCompressedSize: true,
+    minify: false,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'react-loader',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: [...externalizeAllDependencies(__dirname)],
+    },
+  },
+});

nx.json

@@ -101,7 +101,9 @@
       "inputs": [
         "default",
         "storybook",
-        { "runtime": "echo $VITE_STORYBOOK_PUBLIC_PATH" }
+        {
+          "runtime": "echo $VITE_STORYBOOK_PUBLIC_PATH"
+        }
       ]
     },
     "@nx/storybook:serve": {

tsconfig.base.json

@@ -20,6 +20,7 @@
       "@dynamic-msw/core": ["libs/core/src/index.ts"],
       "@dynamic-msw/dashboard-button": ["libs/dashboard-button/src/index.ts"],
       "@dynamic-msw/dashboard-core": ["libs/dashboard-core/src/index.ts"],
+      "@dynamic-msw/react-loader": ["libs/react-loader/src/index.ts"],
       "dynamic-msw": ["libs/dynamic-msw/src/index.ts"]
     }
   },