@teambit/preview 1.0.465 → 1.0.467

package/dist/generate-preview.cmd.d.ts

@@ -0,0 +1,32 @@
+import { Command, CommandOptions } from '@teambit/cli';
+import type { PreviewMain } from './preview.main.runtime';
+import { EnvsExecutionResult } from '@teambit/envs';
+type GeneratePreviewArgs = [userPattern: string];
+type GeneratePreviewFlags = {
+    name: string;
+};
+export declare class GeneratePreviewCmd implements Command {
+    /**
+     * access to the extension instance.
+     */
+    private preview;
+    name: string;
+    description: string;
+    arguments: {
+        name: string;
+        description: string;
+    }[];
+    group: string;
+    options: CommandOptions;
+    private: boolean;
+    constructor(
+    /**
+     * access to the extension instance.
+     */
+    preview: PreviewMain);
+    report([userPattern]: GeneratePreviewArgs, { name }: GeneratePreviewFlags): Promise<string>;
+    formatOutput(res: EnvsExecutionResult<{
+        [id: string]: string;
+    }>): string;
+}
+export {};

package/dist/generate-preview.cmd.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GeneratePreviewCmd = void 0;
+function _padRight() {
+  const data = _interopRequireDefault(require("pad-right"));
+  _padRight = function () {
+    return data;
+  };
+  return data;
+}
+function _constants() {
+  const data = require("@teambit/legacy/dist/constants");
+  _constants = function () {
+    return data;
+  };
+  return data;
+}
+function _chalk() {
+  const data = _interopRequireDefault(require("chalk"));
+  _chalk = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+class GeneratePreviewCmd {
+  constructor(
+  /**
+   * access to the extension instance.
+   */
+  preview) {
+    this.preview = preview;
+    _defineProperty(this, "name", 'generate-preview [component-pattern]');
+    _defineProperty(this, "description", 'generate preview bundle for components');
+    _defineProperty(this, "arguments", [{
+      name: 'component-pattern',
+      description: _constants().COMPONENT_PATTERN_HELP
+    }]);
+    _defineProperty(this, "group", 'development');
+    _defineProperty(this, "options", [['n', 'name <name>', 'name for the preview']]);
+    _defineProperty(this, "private", true);
+  }
+  async report([userPattern], {
+    name
+  }) {
+    const res = await this.preview.generateComponentPreview(userPattern, name);
+    const formattedOutput = this.formatOutput(res);
+    return _chalk().default.green(`previews generated successfully in:\n${formattedOutput}`);
+  }
+  formatOutput(res) {
+    const merged = res.results.reduce((acc, result) => {
+      acc = _objectSpread(_objectSpread({}, acc), result.data);
+      return acc;
+    }, {});
+    const rows = Object.entries(merged).map(([id, previewPath]) => {
+      const keyPadded = (0, _padRight().default)(id, 20, ' ');
+      return _chalk().default.green(`${keyPadded} - ${previewPath}`);
+    });
+    return rows.join('\n');
+  }
+}
+exports.GeneratePreviewCmd = GeneratePreviewCmd;
+
+//# sourceMappingURL=generate-preview.cmd.js.map

package/dist/generate-preview.cmd.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_padRight","data","_interopRequireDefault","require","_constants","_chalk","e","__esModule","default","ownKeys","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_toPropertyKey","value","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","GeneratePreviewCmd","constructor","preview","name","description","COMPONENT_PATTERN_HELP","report","userPattern","res","generateComponentPreview","formattedOutput","formatOutput","chalk","green","merged","results","reduce","acc","result","rows","entries","map","id","previewPath","keyPadded","padRight","join","exports"],"sources":["generate-preview.cmd.tsx"],"sourcesContent":["import padRight from 'pad-right';\nimport { Command, CommandOptions } from '@teambit/cli';\nimport { COMPONENT_PATTERN_HELP } from '@teambit/legacy/dist/constants';\nimport chalk from 'chalk';\nimport type { PreviewMain } from './preview.main.runtime';\nimport { EnvsExecutionResult } from '@teambit/envs';\n\ntype GeneratePreviewArgs = [userPattern: string];\ntype GeneratePreviewFlags = {\n  name: string;\n};\n\nexport class GeneratePreviewCmd implements Command {\n  name = 'generate-preview [component-pattern]';\n  description = 'generate preview bundle for components';\n  arguments = [\n    {\n      name: 'component-pattern',\n      description: COMPONENT_PATTERN_HELP,\n    },\n  ];\n  group = 'development';\n  options = [['n', 'name <name>', 'name for the preview']] as CommandOptions;\n  private = true;\n\n  constructor(\n    /**\n     * access to the extension instance.\n     */\n    private preview: PreviewMain\n  ) {}\n\n  async report([userPattern]: GeneratePreviewArgs, { name }: GeneratePreviewFlags) {\n    const res = await this.preview.generateComponentPreview(userPattern, name);\n    const formattedOutput = this.formatOutput(res);\n    return chalk.green(`previews generated successfully in:\\n${formattedOutput}`);\n  }\n\n  formatOutput(res: EnvsExecutionResult<{ [id: string]: string }>) {\n    const merged = res.results.reduce((acc, result) => {\n      acc = { ...acc, ...result.data };\n      return acc;\n    }, {});\n    const rows = Object.entries(merged).map(([id, previewPath]) => {\n      const keyPadded = padRight(id, 20, ' ');\n      return chalk.green(`${keyPadded} - ${previewPath}`);\n    });\n    return rows.join('\\n');\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/{preview-1731900045011.js → preview-1731986398447.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.preview_preview@1.0.465/dist/preview.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.preview_preview@1.0.465/dist/preview.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.preview_preview@1.0.467/dist/preview.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.preview_preview@1.0.467/dist/preview.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

package/dist/preview.main.runtime.d.ts

@@ -1,8 +1,9 @@
 import type { BuilderMain } from '@teambit/builder';
 import { Asset, BundlerMain } from '@teambit/bundler';
 import { PubsubMain } from '@teambit/pubsub';
+import type { CLIMain } from '@teambit/cli';
 import { Component, ComponentMain, ComponentMap, ComponentID, ResolveAspectsOptions } from '@teambit/component';
-import type { EnvsMain, PreviewEnv } from '@teambit/envs';
+import type { EnvsExecutionResult, EnvsMain, ExecutionContext, PreviewEnv } from '@teambit/envs';
 import { SlotRegistry, Harmony } from '@teambit/harmony';
 import { UiMain, UIRoot } from '@teambit/ui';
 import { CacheMain } from '@teambit/cache';
@@ -11,6 +12,7 @@ import type { AspectDefinition, AspectLoaderMain } from '@teambit/aspect-loader'
 import { Workspace } from '@teambit/workspace';
 import { LoggerMain, Logger } from '@teambit/logger';
 import type { DependencyResolverMain } from '@teambit/dependency-resolver';
+import { ExpressMain } from '@teambit/express';
 import { WatcherMain } from '@teambit/watcher';
 import { GraphqlMain } from '@teambit/graphql';
 import { ScopeMain } from '@teambit/scope';
@@ -118,6 +120,7 @@ export declare class PreviewMain {
     private workspace;
     private logger;
     private dependencyResolver;
+    private express;
     constructor(
     /**
      * harmony context.
@@ -126,7 +129,8 @@ export declare class PreviewMain {
     /**
      * slot for preview definitions.
      */
-    previewSlot: PreviewDefinitionRegistry, ui: UiMain, cache: CacheMain, envs: EnvsMain, componentAspect: ComponentMain, pkg: PkgMain, aspectLoader: AspectLoaderMain, config: PreviewConfig, bundlingStrategySlot: BundlingStrategySlot, builder: BuilderMain, workspace: Workspace | undefined, logger: Logger, dependencyResolver: DependencyResolverMain);
+    previewSlot: PreviewDefinitionRegistry, ui: UiMain, cache: CacheMain, envs: EnvsMain, componentAspect: ComponentMain, pkg: PkgMain, aspectLoader: AspectLoaderMain, config: PreviewConfig, bundlingStrategySlot: BundlingStrategySlot, builder: BuilderMain, workspace: Workspace | undefined, logger: Logger, dependencyResolver: DependencyResolverMain, express: ExpressMain);
+    private previewService;
     get tempFolder(): string;
     getComponentBundleSize(component: Component): ComponentPreviewSize | undefined;
     getPreview(component: Component): Promise<PreviewArtifact | undefined>;
@@ -164,6 +168,12 @@ export declare class PreviewMain {
     doesEnvUseNameParam(envComponent: Component): boolean;
     private calculateIncludeOnlyOverview;
     private calculateUseNameParam;
+    generateComponentPreview(componentPattern: string, name: string): Promise<EnvsExecutionResult<{
+        [id: string]: string;
+    }>>;
+    serveLocalPreview({ port }: {
+        port: number;
+    }): Promise<number>;
     /**
      * Calculate preview data on component load
      * @param component
@@ -286,7 +296,7 @@ export declare class PreviewMain {
     private executionRefs;
     private getPreviewTarget;
     private writePreviewEntry;
-    private updateLinkFiles;
+    updateLinkFiles(previews: PreviewDefinition[], components: Component[] | undefined, context: ExecutionContext): Promise<string[]>;
     writePreviewRuntime(context: {
         components: Component[];
     }, aspectsIdsToNotFilterOut?: string[]): Promise<string>;
@@ -324,7 +334,7 @@ export declare class PreviewMain {
         disabled: boolean;
         onlyOverview: boolean;
     };
-    static provider([bundler, builder, componentExtension, uiMain, cache, envs, workspace, pkg, pubsub, aspectLoader, loggerMain, dependencyResolver, graphql, watcher, scope,]: [
+    static provider([bundler, builder, componentExtension, uiMain, cache, envs, workspace, pkg, pubsub, aspectLoader, loggerMain, dependencyResolver, graphql, watcher, scope, cli, express,]: [
         BundlerMain,
         BuilderMain,
         ComponentMain,
@@ -339,6 +349,8 @@ export declare class PreviewMain {
         DependencyResolverMain,
         GraphqlMain,
         WatcherMain,
-        ScopeMain
+        ScopeMain,
+        CLIMain,
+        ExpressMain
     ], config: PreviewConfig, [previewSlot, bundlingStrategySlot]: [PreviewDefinitionRegistry, BundlingStrategySlot], harmony: Harmony): Promise<PreviewMain>;
 }

package/dist/preview.main.runtime.js

@@ -144,6 +144,13 @@ function _dependencyResolver() {
   };
   return data;
 }
+function _express() {
+  const data = require("@teambit/express");
+  _express = function () {
+    return data;
+  };
+  return data;
+}
 function _component2() {
   const data = require("@teambit/component.sources");
   _component2 = function () {
@@ -305,6 +312,20 @@ function _preBundleUtils() {
   };
   return data;
 }
+function _generatePreview() {
+  const data = require("./generate-preview.cmd");
+  _generatePreview = function () {
+    return data;
+  };
+  return data;
+}
+function _servePreview() {
+  const data = require("./serve-preview.cmd");
+  _servePreview = function () {
+    return data;
+  };
+  return data;
+}
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -338,7 +359,7 @@ class PreviewMain {
   /**
    * slot for preview definitions.
    */
-  previewSlot, ui, cache, envs, componentAspect, pkg, aspectLoader, config, bundlingStrategySlot, builder, workspace, logger, dependencyResolver) {
+  previewSlot, ui, cache, envs, componentAspect, pkg, aspectLoader, config, bundlingStrategySlot, builder, workspace, logger, dependencyResolver, express) {
     this.harmony = harmony;
     this.previewSlot = previewSlot;
     this.ui = ui;
@@ -353,6 +374,8 @@ class PreviewMain {
     this.workspace = workspace;
     this.logger = logger;
     this.dependencyResolver = dependencyResolver;
+    this.express = express;
+    _defineProperty(this, "previewService", void 0);
     _defineProperty(this, "writeHash", new Map());
     _defineProperty(this, "timestamp", Date.now());
     _defineProperty(this, "executionRefs", new Map());
@@ -369,7 +392,8 @@ class PreviewMain {
 
       // add / remove / etc
       updater(executionRef);
-      await this.updateLinkFiles(executionRef.currentComponents, executionRef.executionCtx);
+      const previews = this.previewSlot.values();
+      await this.updateLinkFiles(previews, executionRef.currentComponents, executionRef.executionCtx);
       return noopResult;
     });
     _defineProperty(this, "handleComponentRemoval", cId => {
@@ -465,6 +489,88 @@ class PreviewMain {
     const envComponent = await this.envs.getEnvComponent(component);
     return this.doesEnvUseNameParam(envComponent);
   }
+  async generateComponentPreview(componentPattern, name) {
+    const componentIds = componentPattern ? await this.workspace?.idsByPattern(componentPattern, true) : this.workspace?.listIds();
+    if (!componentIds) {
+      throw new (_bitError().BitError)(`unable to find components by the pattern: ${componentPattern}`);
+    }
+    const components = await this.workspace?.getMany(componentIds);
+    if (!components) {
+      throw new (_bitError().BitError)(`unable to find components by the pattern: ${componentPattern}`);
+    }
+    const envsRuntime = await this.envs.createEnvironment(components);
+    const previewResults = await envsRuntime.run(this.previewService, {
+      name
+    });
+    return previewResults;
+  }
+  async serveLocalPreview({
+    port
+  }) {
+    const app = this.express.createApp();
+    const getDir = async (comp, msg) => {
+      const componentPreviewIndex = await this.previewService.readComponentsPreview(msg);
+      const componentPreviewFolder = componentPreviewIndex[comp];
+      const envPreviewDir = this.previewService.getEnvLocalPreviewDir(msg, componentPreviewFolder);
+      if (!componentPreviewFolder) {
+        return undefined;
+      }
+      const publicDir = (0, _path().join)(envPreviewDir, 'public');
+      return publicDir;
+    };
+
+    // const dynamicRouteRegex = '/?[^/@]+(/[^~]*)?';
+    // readonly route = `/:componentId(${this.dynamicRouteRegex})/~aspect${this.registerRoute.route}`;
+    // app.use(`/:message/:componentId(${dynamicRouteRegex})`, async (req, res, next) => {
+
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    app.use(`/:message/:componentId(*)`, async (req, res, next) => {
+      // const comp = req.query.comp as string;
+      // const msg = req.query.message as string;
+      let comp = req.params.componentId;
+      const msg = req.params.message;
+      // Check if the folderName is provided
+      if (!comp) {
+        return res.status(400).send('Please specify a comp.');
+      }
+      if (!msg) {
+        return res.status(400).send('Please specify a message.');
+      }
+      if (comp.endsWith('/')) {
+        comp = comp.slice(0, -1);
+      }
+      let filePath;
+      if (comp.endsWith('.js') || comp.endsWith('.css') || comp.endsWith('.map')) {
+        const splitted = comp.split('/');
+        filePath = splitted.pop();
+        comp = splitted.join('/');
+      }
+      const publicDir = await getDir(comp, msg);
+      if (!publicDir) {
+        return res.status(404).send('Folder not found.');
+      }
+      if (filePath) {
+        const file = (0, _path().join)(publicDir, filePath);
+        if (!(0, _fsExtra().existsSync)(file)) {
+          return res.status(404).send('File not found.');
+        }
+        return res.sendFile(file);
+      }
+
+      // Serve files from the specified folder
+      this.express.static(publicDir)(req, res, next);
+    });
+    const server = await app.listen(port);
+    return new Promise((resolve, reject) => {
+      server.on('error', err => {
+        reject(err);
+      });
+      server.on('listening', () => {
+        this.logger.consoleSuccess(`Bit preview server is listening on port ${port}`);
+        resolve(port);
+      });
+    });
+  }
 
   /**
    * Calculate preview data on component load
@@ -814,7 +920,8 @@ class PreviewMain {
       this.executionRefs.set(ctxId, new (_executionRef().ExecutionRef)(context));
     });
     const previewRuntime = await this.writePreviewEntry(context);
-    const linkFiles = await this.updateLinkFiles(context.components, context);
+    const previews = this.previewSlot.values();
+    const linkFiles = await this.updateLinkFiles(previews, context.components, context);
     return [...linkFiles, previewRuntime];
   }
   async writePreviewEntry(context, aspectsIdsToNotFilterOut = []) {
@@ -850,8 +957,7 @@ class PreviewMain {
     const previewRuntime = await (0, _preBundle().generateBundlePreviewEntry)(name, bundlePath, this.harmony.config.toObject());
     return previewRuntime;
   }
-  updateLinkFiles(components = [], context) {
-    const previews = this.previewSlot.values();
+  updateLinkFiles(previews, components = [], context) {
     const paths = previews.map(async previewDef => {
       const defaultTemplatePath = await previewDef.renderTemplatePathByEnv?.(context.env);
       const visitedEnvs = new Set();
@@ -937,7 +1043,7 @@ class PreviewMain {
     return filtered;
   }
   getDefaultStrategies() {
-    return [new (_strategies().EnvBundlingStrategy)(this, this.pkg, this.dependencyResolver), new (_strategies().ComponentBundlingStrategy)(this, this.pkg, this.dependencyResolver, this.logger)];
+    return [new (_strategies().EnvBundlingStrategy)(this, this.pkg, this.dependencyResolver), new (_strategies().ComponentBundlingStrategy)(this, this.dependencyResolver, this.logger)];
   }
   getEnvPreviewConfig(env) {
     const config = env?.getPreviewConfig && typeof env?.getPreviewConfig === 'function' ? env?.getPreviewConfig() : {};
@@ -976,10 +1082,11 @@ class PreviewMain {
   }
   static async provider(
   // eslint-disable-next-line max-len
-  [bundler, builder, componentExtension, uiMain, cache, envs, workspace, pkg, pubsub, aspectLoader, loggerMain, dependencyResolver, graphql, watcher, scope], config, [previewSlot, bundlingStrategySlot], harmony) {
+  [bundler, builder, componentExtension, uiMain, cache, envs, workspace, pkg, pubsub, aspectLoader, loggerMain, dependencyResolver, graphql, watcher, scope, cli, express], config, [previewSlot, bundlingStrategySlot], harmony) {
     const logger = loggerMain.createLogger(_preview().PreviewAspect.id);
     // app.registerApp(new PreviewApp());
-    const preview = new PreviewMain(harmony, previewSlot, uiMain, cache, envs, componentExtension, pkg, aspectLoader, config, bundlingStrategySlot, builder, workspace, logger, dependencyResolver);
+    const preview = new PreviewMain(harmony, previewSlot, uiMain, cache, envs, componentExtension, pkg, aspectLoader, config, bundlingStrategySlot, builder, workspace, logger, dependencyResolver, express);
+    cli.register(new (_generatePreview().GeneratePreviewCmd)(preview), new (_servePreview().ServePreviewCmd)(preview));
     if (workspace) uiMain.registerStartPlugin(new (_preview4().PreviewStartPlugin)(workspace, bundler, uiMain, pubsub, logger, watcher));
     componentExtension.registerRoute([new (_preview2().PreviewRoute)(preview, logger), new (_componentPreview().ComponentPreviewRoute)(preview, logger),
     // @ts-ignore
@@ -999,7 +1106,9 @@ class PreviewMain {
     if (scope) {
       scope.registerOnCompAspectReCalc(c => preview.calcPreviewData(c));
     }
-    envs.registerService(new (_preview6().PreviewService)());
+    const previewService = new (_preview6().PreviewService)(preview, logger, dependencyResolver, scope);
+    envs.registerService(previewService);
+    preview.previewService = previewService;
     graphql.register((0, _preview5().previewSchema)(preview));
     return preview;
   }
@@ -1007,7 +1116,7 @@ class PreviewMain {
 exports.PreviewMain = PreviewMain;
 _defineProperty(PreviewMain, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType()]);
 _defineProperty(PreviewMain, "runtime", _cli().MainRuntime);
-_defineProperty(PreviewMain, "dependencies", [_bundler().BundlerAspect, _builder().BuilderAspect, _component().ComponentAspect, _ui().UIAspect, _cache().CacheAspect, _envs().EnvsAspect, _workspace().WorkspaceAspect, _pkg().PkgAspect, _pubsub().PubsubAspect, _aspectLoader().AspectLoaderAspect, _logger().LoggerAspect, _dependencyResolver().DependencyResolverAspect, _graphql().GraphqlAspect, _watcher().WatcherAspect, _scope().ScopeAspect]);
+_defineProperty(PreviewMain, "dependencies", [_bundler().BundlerAspect, _builder().BuilderAspect, _component().ComponentAspect, _ui().UIAspect, _cache().CacheAspect, _envs().EnvsAspect, _workspace().WorkspaceAspect, _pkg().PkgAspect, _pubsub().PubsubAspect, _aspectLoader().AspectLoaderAspect, _logger().LoggerAspect, _dependencyResolver().DependencyResolverAspect, _graphql().GraphqlAspect, _watcher().WatcherAspect, _scope().ScopeAspect, _cli().CLIAspect, _express().ExpressAspect]);
 _defineProperty(PreviewMain, "defaultConfig", {
   disabled: false,
   onlyOverview: false