react-cosmos 6.0.0-alpha.11 → 6.0.0-alpha.13

package/config.schema.json

@@ -65,6 +65,10 @@
       },
       "uniqueItems": true
     },
+    "lazy": {
+      "description": "Dynamically import fixture and decorator modules as they are loaded. When false all fixture and decorator modules are imported statically and bundled together. [default: false]",
+      "type": "boolean"
+    },
     "userDepsFilePath": {
       "description": "Where to generate a file that contains a map to all fixtures and other Cosmos-related user modules. Only used in setups where Cosmos can't piggyback on the user's build (eg. React Native setups). [default: \"cosmos.userdeps.js\"]",
       "type": "string",
@@ -83,11 +87,11 @@
       "type": "number"
     },
     "https": {
-      "description": "Server will be served over HTTPS",
+      "description": "Server will be served over HTTPS.",
       "type": "boolean"
     },
     "httpsOptions": {
-      "description": "Additional options for HTTPS server",
+      "description": "Additional options for HTTPS server.",
       "type": "object",
       "additionalProperties": false,
       "properties": {

package/dist/cosmosConfig/createCosmosConfig.js

@@ -15,6 +15,7 @@ export function createCosmosConfig(rootDir, cosmosConfigInput = {}) {
         https: getHttps(cosmosConfigInput),
         httpsOptions: getHttpsOptions(cosmosConfigInput, rootDir),
         ignore: getIgnore(cosmosConfigInput),
+        lazy: getLazy(cosmosConfigInput),
         port: getPort(cosmosConfigInput),
         portRetries: getPortRetries(cosmosConfigInput),
         plugins: getPlugins(cosmosConfigInput, rootDir),
@@ -97,3 +98,11 @@ function getDomConfig(cosmosConfigInput) {
         containerQuerySelector,
     };
 }
+function getLazy(cosmosConfigInput) {
+    const cliArgs = getCliArgs();
+    if (typeof cliArgs.lazy === 'boolean') {
+        return cliArgs.lazy;
+    }
+    const { lazy = false } = cosmosConfigInput;
+    return lazy;
+}

package/dist/cosmosConfig/types.d.ts

@@ -17,6 +17,7 @@ export type CosmosConfig = {
     https: boolean;
     httpsOptions: null | HttpsOptions;
     ignore: string[];
+    lazy: boolean;
     port: number;
     portRetries: number;
     plugins: string[];

package/dist/testHelpers/mockYargs.js

@@ -3,6 +3,7 @@
 jest.mock('yargs/yargs', () => {
     let argv = {};
     const yargs = () => ({
+        boolean: () => yargs(),
         parseSync: () => argv,
     });
     yargs.__mockArgsv = (newArgv) => {

package/dist/userDeps/generateUserDepsModule.js

@@ -1,4 +1,5 @@
 import { findUserModulePaths } from './findUserModulePaths.js';
+import { userDepsLazyTemplate } from './userDepsLazyTemplate.js';
 import { userDepsTemplate } from './userDepsTemplate.js';
 export function generateUserDepsModule({ cosmosConfig, rendererConfig, relativeToDir, }) {
     const { rootDir, fixturesDir, fixtureFileSuffix, globalImports, ignore } = cosmosConfig;
@@ -8,7 +9,8 @@ export function generateUserDepsModule({ cosmosConfig, rendererConfig, relativeT
         fixtureFileSuffix,
         ignore,
     });
-    return userDepsTemplate({
+    const template = cosmosConfig.lazy ? userDepsLazyTemplate : userDepsTemplate;
+    return template({
         globalImports,
         fixturePaths,
         decoratorPaths,

package/dist/userDeps/getUserModules.d.ts

@@ -1,8 +1,8 @@
-import { ReactDecorators, ReactFixtureExports } from 'react-cosmos-core';
+import { ByPath, ReactDecorator, ReactFixtureExport } from 'react-cosmos-core';
 import { CosmosConfig } from '../cosmosConfig/types.js';
 type UserModules = {
-    fixtures: ReactFixtureExports;
-    decorators: ReactDecorators;
+    fixtures: ByPath<ReactFixtureExport>;
+    decorators: ByPath<ReactDecorator>;
 };
 export declare function getUserModules({ rootDir, fixturesDir, fixtureFileSuffix, ignore, }: CosmosConfig): UserModules;
 export {};

package/dist/userDeps/userDepsLazyTemplate.d.ts

@@ -0,0 +1,2 @@
+import { UserDepsTemplateArgs } from './userDepsShared.js';
+export declare function userDepsLazyTemplate({ globalImports, fixturePaths, decoratorPaths, rendererConfig, rootDir, relativeToDir, }: UserDepsTemplateArgs): string;

package/dist/userDeps/userDepsLazyTemplate.js

@@ -0,0 +1,37 @@
+import { userDepsImportMap, userDepsImportPath, } from './userDepsShared.js';
+export function userDepsLazyTemplate({ globalImports, fixturePaths, decoratorPaths, rendererConfig, rootDir, relativeToDir, }) {
+    const fixtures = userDepsImportMap(fixturePaths, rootDir, relativeToDir);
+    const fixtureKeys = Object.keys(fixtures);
+    const decorators = userDepsImportMap(decoratorPaths, rootDir, relativeToDir);
+    const decoratorKeys = Object.keys(decorators);
+    return `
+// This file is automatically generated by Cosmos. Add it to .gitignore and
+// only edit if you know what you're doing.
+
+// Keeping global imports here is superior to making them bundle entry points
+// because this way they become hot-reloadable.
+${globalImports
+        .map(p => `import '${userDepsImportPath(p, relativeToDir)}';`)
+        .join(`\n`)}
+
+export const rendererConfig = ${JSON.stringify(rendererConfig, null, 2)};
+
+const fixtures = {
+${fixtureKeys
+        .map(k => `  '${k}': { getModule: () => import('${fixtures[k]}') }`)
+        .join(`,\n`)}
+};
+
+const decorators = {
+${decoratorKeys
+        .map(k => `  '${k}': { getModule: () => import('${decorators[k]}') }`)
+        .join(`,\n`)}
+};
+
+export const moduleWrappers = {
+  lazy: true,
+  fixtures,
+  decorators,
+};
+`.trimStart();
+}

package/dist/userDeps/userDepsShared.d.ts

@@ -0,0 +1,11 @@
+import { Json } from './shared.js';
+export type UserDepsTemplateArgs = {
+    globalImports: string[];
+    fixturePaths: string[];
+    decoratorPaths: string[];
+    rendererConfig: Json;
+    rootDir: string;
+    relativeToDir: string | null;
+};
+export declare function userDepsImportMap(paths: string[], rootDir: string, relativeToDir: string | null): Record<string, string>;
+export declare function userDepsImportPath(filePath: string, relativeToDir: string | null): string;

package/dist/userDeps/userDepsShared.js

@@ -0,0 +1,13 @@
+import path from 'path';
+import { slash } from '../utils/slash.js';
+export function userDepsImportMap(paths, rootDir, relativeToDir) {
+    return paths.reduce((acc, p) => ({
+        ...acc,
+        [slash(path.relative(rootDir, p))]: userDepsImportPath(p, relativeToDir),
+    }), {});
+}
+export function userDepsImportPath(filePath, relativeToDir) {
+    return slash(relativeToDir
+        ? `.${path.sep}${path.relative(relativeToDir, filePath)}`
+        : filePath);
+}

package/dist/userDeps/userDepsTemplate.d.ts

@@ -1,11 +1,2 @@
-import { Json } from './shared.js';
-type Args = {
-    globalImports: string[];
-    fixturePaths: string[];
-    decoratorPaths: string[];
-    rendererConfig: Json;
-    rootDir: string;
-    relativeToDir: string | null;
-};
-export declare function userDepsTemplate({ globalImports, fixturePaths, decoratorPaths, rendererConfig, rootDir, relativeToDir, }: Args): string;
-export {};
+import { UserDepsTemplateArgs } from './userDepsShared.js';
+export declare function userDepsTemplate({ globalImports, fixturePaths, decoratorPaths, rendererConfig, rootDir, relativeToDir, }: UserDepsTemplateArgs): string;

package/dist/userDeps/userDepsTemplate.js

@@ -1,9 +1,8 @@
-import path from 'path';
-import { slash } from '../utils/slash.js';
+import { userDepsImportMap, userDepsImportPath, } from './userDepsShared.js';
 export function userDepsTemplate({ globalImports, fixturePaths, decoratorPaths, rendererConfig, rootDir, relativeToDir, }) {
-    const fixtures = createImportMap(fixturePaths, rootDir, relativeToDir);
+    const fixtures = userDepsImportMap(fixturePaths, rootDir, relativeToDir);
     const fixtureKeys = Object.keys(fixtures);
-    const decorators = createImportMap(decoratorPaths, rootDir, relativeToDir);
+    const decorators = userDepsImportMap(decoratorPaths, rootDir, relativeToDir);
     const decoratorKeys = Object.keys(decorators);
     return `
 // This file is automatically generated by Cosmos. Add it to .gitignore and
@@ -12,7 +11,7 @@ export function userDepsTemplate({ globalImports, fixturePaths, decoratorPaths,
 // Keeping global imports here is superior to making them bundle entry points
 // because this way they become hot-reloadable.
 ${globalImports
-        .map(p => `import '${resolveImportPath(p, relativeToDir)}';`)
+        .map(p => `import '${userDepsImportPath(p, relativeToDir)}';`)
         .join(`\n`)}
 
 ${fixtureKeys
@@ -25,25 +24,22 @@ ${decoratorKeys
 
 export const rendererConfig = ${JSON.stringify(rendererConfig, null, 2)};
 
-export const fixtures = {
+const fixtures = {
 ${fixtureKeys
-        .map((k, i) => `  '${k}': { module: { default: fixture${i} } }`)
+        .map((k, i) => ` '${k}': { module: { default: fixture${i} } }`)
         .join(`,\n`)}
 };
 
-export const decorators = {
-${decoratorKeys.map((k, i) => `  '${k}': decorator${i}`).join(`,\n`)}
+const decorators = {
+${decoratorKeys
+        .map((k, i) => ` '${k}': { module: { default: decorator${i} } }`)
+        .join(`,\n`)}
+};
+
+export const moduleWrappers = {
+  lazy: false,
+  fixtures,
+  decorators,
 };
 `.trimStart();
 }
-function createImportMap(paths, rootDir, relativeToDir) {
-    return paths.reduce((acc, p) => ({
-        ...acc,
-        [slash(path.relative(rootDir, p))]: resolveImportPath(p, relativeToDir),
-    }), {});
-}
-function resolveImportPath(filePath, relativeToDir) {
-    return slash(relativeToDir
-        ? `.${path.sep}${path.relative(relativeToDir, filePath)}`
-        : filePath);
-}

package/dist/utils/cli.d.ts

@@ -1,5 +1,6 @@
 export declare function getCliArgs(): {
     [x: string]: unknown;
+    lazy: boolean | undefined;
     _: (string | number)[];
     $0: string;
 };

package/dist/utils/cli.js

@@ -1,4 +1,4 @@
 import yargs from 'yargs/yargs';
 export function getCliArgs() {
-    return yargs(process.argv.slice(2)).parseSync();
+    return yargs(process.argv.slice(2)).boolean('lazy').parseSync();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cosmos",
-  "version": "6.0.0-alpha.11",
+  "version": "6.0.0-alpha.13",
   "description": "Sandbox for developing and testing UI components in isolation",
   "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos",
   "license": "MIT",
@@ -17,8 +17,8 @@
     "open": "^8.4.2",
     "pem": "^1.14.6",
     "pkg-up": "^4.0.0",
-    "react-cosmos-core": "^6.0.0-alpha.11",
-    "react-cosmos-ui": "^6.0.0-alpha.11",
+    "react-cosmos-core": "6.0.0-alpha.13",
+    "react-cosmos-ui": "6.0.0-alpha.13",
     "ws": "^8.12.1",
     "yargs": "^17.7.1"
   },
@@ -27,5 +27,5 @@
     "cosmos-export": "./bin/cosmos-export.js",
     "cosmos-native": "./bin/cosmos-native.js"
   },
-  "gitHead": "8e9d1e52749388f471f6ec848a8c904ec8b89f67"
+  "gitHead": "cf95e67ce942f6a242f023ecebe45d6916d5b753"
 }