@promoboxx/react-scripts-vite 0.1.21 → 0.1.24

package/README.md

@@ -8,6 +8,7 @@ An almost drop-in replacement for react-scripts, but based on Vite.
 - TypeScript `paths`
 - TypeScript type checking
 - ESLint linting
+- PWA support
 - `process.env`
 - Vitest
 
@@ -35,6 +36,57 @@ Put this in `src/react-scripts-vite.d.ts`:
 /// <reference types="@promoboxx/react-scripts-vite/dist/client" />
 ```
 
+## Customization
+
+`react-scripts-vite` exports both a `viteConfig` function and an `pluginOptions` object. The `pluginOptions` object lets you customize the included plugins. And if you'd like to add your own plugins, or change any of the vite config, you're free to do so.
+
+### Changing included plugin options
+
+```typescript
+import { viteConfig, pluginOptions } from '@promoboxx/react-scripts-vite'
+
+// Setting one of the properties to `false` turns off the plugin entirely.
+// Not sure why you would want to though.
+pluginOptions.react = false
+pluginOptions.pwa = {
+  registerType: 'autoUpdate',
+}
+
+export default viteConfig
+```
+
+### Changing included vite config
+
+```typescript
+import { defineConfig } from 'vite'
+import { viteConfig, pluginOptions } from '@promoboxx/react-scripts-vite'
+
+// Disable SVGR.
+pluginOptions.svgr = false
+// Change PWA config.
+pluginOptions.pwa = {
+  registerType: 'autoUpdate',
+}
+
+export default defineConfig(async (env) => {
+  // await is needed so the type isn't `UserConfig | Promise<UserConfig>`
+  const config = await viteConfig(env)
+
+  return {
+    ...config,
+    plugins: [
+      // Add whatever plugins you want.
+      YourVitePlugin(),
+    ].concat(config.plugins),
+    build: {
+      ...config.build,
+      // Turn off sourcemaps.
+      sourcemap: false,
+    },
+  }
+})
+```
+
 ## Migrating from react-scripts
 
 Should be very straightforward. For application code, everything should be supported out of the box.
@@ -47,7 +99,7 @@ Vite expects your `index.html` to live at the root directory, not in `public/`
 mv public/index.html ./
 ```
 
-Remove any references to `%PUBLIC_URL%`. Passing `--base /some/sub/dir/` to `build` will get you the same result.
+Remove any references to `%PUBLIC_URL%`, vite correctly sets the base path for you.
 
 ### Sass
 

package/dist/cli.js

@@ -1,5 +1,16 @@
 #!/usr/bin/env node
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -14,22 +25,27 @@ var child_process_1 = require("child_process");
 function main(command, args) {
     switch (command) {
         case 'start':
-            spawnAndExit('./node_modules/.bin/vite', args);
+            spawnAndExit('./node_modules/.bin/vite', args, {
+                NODE_ENV: 'development',
+            });
             break;
         case 'test':
-            spawnAndExit('./node_modules/.bin/vitest', args);
+            spawnAndExit('./node_modules/.bin/vitest', args, { NODE_ENV: 'test' });
             break;
         case 'build':
-            spawnAndExit('./node_modules/.bin/vite', __spreadArray(['build'], args, true));
+            spawnAndExit('./node_modules/.bin/vite', __spreadArray(['build'], args, true), {
+                NODE_ENV: 'production',
+            });
             break;
         default:
             throw new Error("Unknown command: ".concat(command));
     }
 }
-function spawnAndExit(command, args) {
+function spawnAndExit(command, args, env) {
     if (args === void 0) { args = []; }
     var child = (0, child_process_1.spawn)(command, args, {
         stdio: 'inherit',
+        env: __assign(__assign({}, process.env), env),
         // shell: true,
     });
     child.on('exit', function (code) {

package/dist/client.d.ts

@@ -1,3 +1,38 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
 /// <reference types="vitest/globals" />
+
+// https://github.com/antfu/vite-plugin-pwa/blob/951311fa811b8cee98ea5530522961f64645cd75/client.d.ts
+declare module 'virtual:pwa-register' {
+  export type RegisterSWOptions = {
+    immediate?: boolean
+    onNeedRefresh?: () => void
+    onOfflineReady?: () => void
+    onRegistered?: (registration: ServiceWorkerRegistration | undefined) => void
+    onRegisterError?: (error: any) => void
+  }
+
+  export function registerSW(
+    options?: RegisterSWOptions,
+  ): (reloadPage?: boolean) => Promise<void>
+}
+
+// https://github.com/antfu/vite-plugin-pwa/blob/951311fa811b8cee98ea5530522961f64645cd75/client.d.ts
+declare module 'virtual:pwa-register/react' {
+  // @ts-ignore ignore when react is not installed
+  import { Dispatch, SetStateAction } from 'react'
+
+  export type RegisterSWOptions = {
+    immediate?: boolean
+    onNeedRefresh?: () => void
+    onOfflineReady?: () => void
+    onRegistered?: (registration: ServiceWorkerRegistration | undefined) => void
+    onRegisterError?: (error: any) => void
+  }
+
+  export function useRegisterSW(options?: RegisterSWOptions): {
+    needRefresh: [boolean, Dispatch<SetStateAction<boolean>>]
+    offlineReady: [boolean, Dispatch<SetStateAction<boolean>>]
+    updateServiceWorker: (reloadPage?: boolean) => Promise<void>
+  }
+}

package/dist/index.d.ts

@@ -1 +1 @@
-export { default as viteConfig } from './viteConfig';
+export { default as viteConfig, pluginOptions } from './viteConfig';

package/dist/index.js

@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.viteConfig = void 0;
+exports.pluginOptions = exports.viteConfig = void 0;
 var viteConfig_1 = require("./viteConfig");
 Object.defineProperty(exports, "viteConfig", { enumerable: true, get: function () { return __importDefault(viteConfig_1).default; } });
+Object.defineProperty(exports, "pluginOptions", { enumerable: true, get: function () { return viteConfig_1.pluginOptions; } });
 //# sourceMappingURL=index.js.map

package/dist/viteConfig.d.ts

@@ -1,2 +1,18 @@
-declare const _default: import("vitest/dist/config").UserConfig;
-export default _default;
+import react from '@vitejs/plugin-react';
+import { UserConfigFn } from 'vite';
+import pluginChecker from 'vite-plugin-checker';
+import envCompatible from 'vite-plugin-env-compatible';
+import { VitePWA } from 'vite-plugin-pwa';
+import svgr from 'vite-plugin-svgr';
+import tsconfigPaths from 'vite-tsconfig-paths';
+interface ReactScriptsViteOptions {
+    react?: false | Parameters<typeof react>[0];
+    svgr?: false | Parameters<typeof svgr>[0];
+    envCompatible?: false | Parameters<typeof envCompatible>[0];
+    tsconfigPaths?: false | Parameters<typeof tsconfigPaths>[0];
+    pwa?: false | Parameters<typeof VitePWA>[0];
+    checker: false | Parameters<typeof pluginChecker>[0];
+}
+export declare const pluginOptions: ReactScriptsViteOptions;
+declare const viteConfig: UserConfigFn;
+export default viteConfig;

package/dist/viteConfig.js

@@ -3,43 +3,83 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.pluginOptions = void 0;
+var fs_1 = __importDefault(require("fs"));
 var plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
 var vite_plugin_checker_1 = __importDefault(require("vite-plugin-checker"));
 var vite_plugin_env_compatible_1 = __importDefault(require("vite-plugin-env-compatible"));
+var vite_plugin_pwa_1 = require("vite-plugin-pwa");
 var vite_plugin_svgr_1 = __importDefault(require("vite-plugin-svgr"));
 var vite_tsconfig_paths_1 = __importDefault(require("vite-tsconfig-paths"));
-var config_1 = require("vitest/config");
-exports.default = (0, config_1.defineConfig)({
+var ENV_PREFIX = 'REACT_APP_';
+exports.pluginOptions = {
+    checker: {
+        eslint: process.env.DISABLE_ESLINT_PLUGIN === 'true'
+            ? undefined
+            : {
+                lintCommand: "eslint --max-warnings=".concat(process.env.CI === 'true' ? 0 : -1, " \"./src/**/*.{ts,tsx,js,jsx,mjs,cjs}\""),
+            },
+        typescript: process.env.TSC_COMPILE_ON_ERROR !== 'true',
+        enableBuild: true,
+    },
+    envCompatible: {
+        prefix: ENV_PREFIX,
+    },
+    react: {
+        fastRefresh: process.env.FAST_REFRESH !== 'false',
+        jsxRuntime: process.env.DISABLE_NEW_JSX_TRANSFORM === 'true' ? 'classic' : undefined,
+    },
+};
+var viteConfig = function () { return ({
+    base: process.env.PUBLIC_URL,
+    // TODO This doesn't really fit in with pluginOptions.
+    envPrefix: ENV_PREFIX,
     build: {
-        outDir: 'build',
-        sourcemap: true,
+        outDir: process.env.BUILD_PATH || 'build',
+        sourcemap: process.env.GENERATE_SOURCEMAP !== 'false',
+        assetsInlineLimit: process.env.IMAGE_INLINE_SIZE_LIMIT
+            ? Number(process.env.IMAGE_INLINE_SIZE_LIMIT)
+            : 10000,
     },
     plugins: [
         // React specific.
-        (0, plugin_react_1.default)(),
-        (0, vite_plugin_svgr_1.default)(),
+        exports.pluginOptions.react === false ? null : (0, plugin_react_1.default)(exports.pluginOptions.react),
+        exports.pluginOptions.svgr === false ? null : (0, vite_plugin_svgr_1.default)(exports.pluginOptions.svgr),
         // import.meta.env -> process.env
-        (0, vite_plugin_env_compatible_1.default)(),
+        exports.pluginOptions.envCompatible === false
+            ? null
+            : (0, vite_plugin_env_compatible_1.default)(exports.pluginOptions.envCompatible),
         // Support TypeScript paths.
-        (0, vite_tsconfig_paths_1.default)(),
+        exports.pluginOptions.tsconfigPaths === false
+            ? null
+            : (0, vite_tsconfig_paths_1.default)(exports.pluginOptions.tsconfigPaths),
+        // PWA.
+        exports.pluginOptions.pwa === false ? null : (0, vite_plugin_pwa_1.VitePWA)(exports.pluginOptions.pwa),
         // Check for issues.
-        process.env.NODE_ENV !== 'test' &&
-            (0, vite_plugin_checker_1.default)({
-                eslint: {
-                    lintCommand: "eslint --max-warnings=".concat(process.env.CI === 'true' ? 0 : -1, " \"./src/**/*.{ts,tsx,js,jsx,mjs,cjs}\""),
-                },
-                typescript: true,
-                enableBuild: true,
-            }),
+        process.env.NODE_ENV === 'test' || exports.pluginOptions.checker === false
+            ? null
+            : (0, vite_plugin_checker_1.default)(exports.pluginOptions.checker),
     ],
     server: {
         open: true,
-        host: '0.0.0.0',
+        host: process.env.HOST || '0.0.0.0',
+        port: process.env.PORT ? Number(process.env.PORT) : 3000,
+        https: process.env.HTTPS === 'true'
+            ? {
+                cert: process.env.SSL_CRT_FILE
+                    ? fs_1.default.readFileSync(process.env.SSL_CRT_FILE)
+                    : undefined,
+                key: process.env.SSL_KEY_FILE
+                    ? fs_1.default.readFileSync(process.env.SSL_KEY_FILE)
+                    : undefined,
+            }
+            : undefined,
     },
     test: {
         globals: true,
         environment: 'jsdom',
         setupFiles: './src/test/setup.ts',
     },
-});
+}); };
+exports.default = viteConfig;
 //# sourceMappingURL=viteConfig.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promoboxx/react-scripts-vite",
-  "version": "0.1.21",
+  "version": "0.1.24",
   "description": "",
   "main": "dist/index.js",
   "keywords": [],
@@ -25,6 +25,7 @@
     "vite": "^2.8.4",
     "vite-plugin-checker": "^0.4.2",
     "vite-plugin-env-compatible": "^1.1.1",
+    "vite-plugin-pwa": "^0.11.13",
     "vite-plugin-svgr": "^1.0.1",
     "vite-tsconfig-paths": "^3.4.1",
     "vitest": "^0.5.5"