@teambit/ui 0.0.551 → 0.0.556

package/dist/compose.d.ts

@@ -2,8 +2,13 @@ import { ReactNode, ComponentType } from 'react';
 declare type ComponentTuple<T = any> = [Component: ComponentType<T>, props?: T];
 export declare type Wrapper<T = any> = ComponentType<T> | ComponentTuple<T>;
 interface Props<T = any> {
+    /** Compose these components. Can be a ReactComponent, or a [ReactComponent, Props] tuple */
     components: Wrapper<T>[];
     children?: ReactNode;
 }
+/**
+ * A react Component composer. equivalent to `(n+1) => <a[n+1]> <Compose(a[n]) /> </a[n+1]>`.
+ * Component can be a React Component, or a `[Component, { ...props }]` tuple.
+ */
 export declare function Compose(props: Props): JSX.Element;
 export {};

package/dist/open-browser.d.ts

@@ -8,6 +8,10 @@ export declare class OpenBrowser {
         BROWSER: number;
         SCRIPT: number;
     }>;
+    /**
+     * Reads the BROWSER environment variable and decides what to do with it. Returns
+     * true if it opened a browser or ran a node.js script, otherwise false.
+     */
     open(url: string): boolean;
     private getBrowserEnv;
     private executeNodeScript;

package/dist/render-lifecycle.d.ts

@@ -3,19 +3,50 @@ import { BrowserData } from './ssr/request-browser';
 import { RequestServer } from './ssr/request-server';
 import { ContextProps } from './ui.ui.runtime';
 export declare type RenderLifecycle<RenderCtx = any, Serialized = any> = {
+    /**
+     * Initialize a context state for this specific rendering.
+     * Context state will only be available to the current Aspect, in the other hooks, as well as a prop to the react context component.
+     */
     serverInit?: (state: {
         browser?: BrowserData;
         server?: RequestServer;
     }) => RenderCtx | void | undefined | Promise<RenderCtx | void | undefined>;
+    /**
+     * Executes before running ReactDOM.renderToString(). Return value will replace the existing context state.
+     */
     onBeforeRender?: (ctx: RenderCtx, app: ReactNode) => RenderCtx | void | undefined | Promise<RenderCtx | void | undefined>;
+    /**
+     * Produce html assets. Runs after the body is rendered, and before rendering the final html.
+     * @returns
+     * json: will be rendered to the dom as a `<script type="json"/>`.
+     * More assets will be available in the future.
+     */
     serialize?: (ctx: RenderCtx, app: ReactNode) => {
         json: string;
     } | Promise<{
         json: string;
     }> | undefined;
+    /**
+     * Converts serialized data from raw string back to structured data.
+     * @example deserialize: (data) => { const parsed = JSON.parse(data); return { analytics: new AnalyticsService(parsed); } }
+     */
     deserialize?: (data?: string) => Serialized;
+    /**
+     * Initialize the context state for client side rendering.
+     * Context state will only be available to the current Aspect, in the other hooks, as well as a prop to the react context component.
+     */
     browserInit?: (deserializedData: Serialized) => RenderCtx | void | undefined | Promise<RenderCtx | void | undefined>;
+    /**
+     * Executes before running ReactDOM.hydrate() (or .render() in case server side rendering is skipped). Receives the context produced by `deserialize()`
+     */
     onBeforeHydrate?: (context: RenderCtx, app: ReactNode) => RenderCtx | void | undefined | Promise<RenderCtx | void | undefined>;
+    /**
+     * Executes after browser rendering is complete. Receives context from the previous steps.
+     * @example onHydrate: (ref, { analytics }) => { analytics.reportPageView() }
+     */
     onHydrate?: (context: RenderCtx, ref: HTMLElement | null) => void;
+    /**
+     * Wraps dom with a context. Will receive render context, produced by `onBeforeRender()` (at server-side) or `deserialize()` (at the browser)
+     */
     reactContext?: ComponentType<ContextProps<RenderCtx>>;
 };

package/dist/ssr/request-browser.d.ts

@@ -10,17 +10,52 @@ export declare type BrowserData = {
         headers: IncomingHttpHeaders;
         body: any;
     };
+    /**
+     * isomorphic location object, resembling the browser's window.location
+     */
     location: {
+        /** hostname + port
+         * @example localhost:3000
+         */
         host: string;
+        /**
+         * @example localhost
+         */
         hostname: string;
+        /** full url
+         * @example http://localhost:3000/components?q=button
+         */
         href: string;
+        /** full url without query
+         * @example http://localhost:3000/components
+         */
         origin: string;
+        /**
+         * @example /component
+         */
         pathname: string;
+        /**
+         * @example 3000
+         */
         port: number;
+        /**
+         * @example http
+         */
         protocol: string;
+        /**
+         * parsed search params
+         * @example { one: 1, two: [2,3]}
+         */
         query: ParsedQuery;
+        /**
+         * full resource path, including query, without hostname
+         * @example /components?q=button
+         */
         url: string;
     };
     cookie?: string;
 };
+/**
+ * extract relevant information from Express request.
+ */
 export declare function requestToObj(req: Request, port: number): BrowserData;

package/dist/ssr/request-server.d.ts

@@ -1,4 +1,7 @@
 import type { Request, Response } from 'express';
+/**
+ * Represents the server configuration for the current request
+ */
 export declare type RequestServer = {
     port: number;
     request: Request;

package/dist/start-plugin.d.ts

@@ -1,12 +1,19 @@
 import { ComponentType } from 'react';
 import { ProxyEntry } from './ui-root';
 export declare type StartPluginOptions = {
+    /**
+     * indicates whether the start in on verbose mode.
+     */
     verbose?: boolean;
+    /**
+     * component pattern it applies on.
+     */
     pattern?: string;
 };
 export interface StartPlugin {
     initiate(startOptions: StartPluginOptions): void;
     getProxy?(): ProxyEntry[];
     render: ComponentType;
+    /** promise that resolves when the plugin completed initiation */
     readonly whenReady: Promise<void>;
 }

package/dist/start.cmd.d.ts

@@ -12,6 +12,9 @@ declare type StartFlags = {
     skipCompilation: boolean;
 };
 export declare class StartCmd implements Command {
+    /**
+     * access to the extension instance.
+     */
     private ui;
     private logger;
     name: string;
@@ -20,7 +23,11 @@ export declare class StartCmd implements Command {
     group: string;
     shortDescription: string;
     options: CommandOptions;
-    constructor(ui: UiMain, logger: Logger);
+    constructor(
+    /**
+     * access to the extension instance.
+     */
+    ui: UiMain, logger: Logger);
     render([uiRootName, userPattern]: StartArgs, { dev, port, rebuild, verbose, noBrowser, skipCompilation }: StartFlags): Promise<React.ReactElement>;
 }
 export {};

package/dist/ui-build.cmd.d.ts

@@ -1,6 +1,9 @@
 import { Command } from '@teambit/cli';
 import { UiMain } from './ui.main.runtime';
 export declare class UIBuildCmd implements Command {
+    /**
+     * access to the extension instance.
+     */
     private ui;
     name: string;
     description: string;
@@ -8,6 +11,10 @@ export declare class UIBuildCmd implements Command {
     group: string;
     shortDescription: string;
     options: never[];
-    constructor(ui: UiMain);
+    constructor(
+    /**
+     * access to the extension instance.
+     */
+    ui: UiMain);
     report([type]: [string]): Promise<string>;
 }

package/dist/ui-root.d.ts

@@ -3,21 +3,45 @@ import { ComponentDir } from '@teambit/bundler';
 import { Component } from '@teambit/component';
 import { ProxyConfigArrayItem } from 'webpack-dev-server';
 export interface UIRoot extends ComponentDir {
+    /**
+     * unique name of the ui.
+     */
     name: string;
+    /**
+     * path of the ui root.
+     */
     path: string;
+    /**
+     * name of the UI root config file.
+     */
     configFile: string;
     buildOptions?: {
         ssr?: boolean;
         launchBrowserOnStart?: boolean;
     };
+    /**
+     * resolve all aspects in the UI root.
+     */
     resolveAspects(runtimeName: string): Promise<AspectDefinition[]>;
+    /**
+     * resolve components from a given pattern.
+     */
     resolvePattern?(pattern: string): Promise<Component[]>;
+    /**
+     * listener for when the dev server starts. can be used for running the watcher.
+     */
     postStart?(options: PostStartOptions): Promise<void>;
+    /**
+     * determine whether UI should get a priority.
+     */
     priority?: boolean;
 }
 export declare type ProxyEntry = ProxyConfigArrayItem & {
     context: string[];
 };
 export declare type PostStartOptions = {
+    /**
+     * pattern for selecting components in the container.
+     */
     pattern?: string;
 };

package/dist/ui-server.d.ts

@@ -17,6 +17,9 @@ export declare type UIServerProps = {
     startPlugins: StartPlugin[];
 };
 export declare type StartOptions = {
+    /**
+     * port range for the UI server to bind. default is a port range of 4000-4200.
+     */
     portRange?: number[] | number;
 };
 export declare class UIServer {
@@ -32,20 +35,31 @@ export declare class UIServer {
     getName(): string;
     private _port;
     get port(): number;
+    /** the hostname for the server to listen at. Currently statically 'localhost' */
     get host(): string;
+    /** the server listens at this url */
     get fullUrl(): string;
     get buildOptions(): {
         ssr?: boolean | undefined;
         launchBrowserOnStart?: boolean | undefined;
     } | undefined;
+    /**
+     * get the webpack configuration of the UI server.
+     */
     getDevConfig(): Promise<import("@teambit/webpack").WebpackConfigWithDevServer>;
     private setReady;
     private startPromise;
     get whenReady(): Promise<void[]>;
+    /**
+     * start a UI server.
+     */
     start({ portRange }?: StartOptions): Promise<void>;
     getPluginsComponents(): import("react").ComponentType<{}>[];
     private setupServerSideRendering;
     private configureProxy;
+    /**
+     * start a UI dev server.
+     */
     dev({ portRange }?: StartOptions): Promise<WebpackDevServer>;
     private selectPort;
     private getProxyFromPlugins;

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

@@ -28,58 +28,198 @@ export declare type OnStartSlot = SlotRegistry<OnStart>;
 export declare type PublicDirOverwriteSlot = SlotRegistry<PublicDirOverwrite>;
 export declare type BuildMethodOverwriteSlot = SlotRegistry<BuildMethodOverwrite>;
 export declare type UIConfig = {
+    /**
+     * port for the UI root to use.
+     */
     port?: number;
+    /**
+     * port range for the UI root to use.
+     */
     portRange: [number, number];
+    /**
+     * host for the UI root
+     */
     host: string;
+    /**
+     * directory in workspace to use for public assets.
+     * always relative to the workspace root directory.
+     */
     publicDir: string;
+    /** the url to display when server is listening. Note that bit does not provide proxying to this url */
     publicUrl?: string;
 };
 export declare type RuntimeOptions = {
+    /**
+     * determine whether to initiate on verbose mode.
+     */
     verbose?: boolean;
+    /**
+     * name of the UI root to load.
+     */
     uiRootName?: string;
+    /**
+     * component selector pattern to load.
+     */
     pattern?: string;
+    /**
+     * determine whether to start a dev server (defaults to false).
+     */
     dev?: boolean;
+    /**
+     * port of the config.
+     */
     port?: number;
+    /**
+     * determine whether to rebuild the UI before start.
+     */
     rebuild?: boolean;
 };
 export declare class UiMain {
+    /**
+     * Pubsub extension.
+     */
     private pubsub;
     private config;
+    /**
+     * graphql extension.
+     */
     private graphql;
+    /**
+     * slot registry of ui roots.
+     */
     private uiRootSlot;
+    /**
+     * express extension.
+     */
     private express;
+    /**
+     * pre-start slot
+     */
     private preStartSlot;
+    /**
+     * on start slot
+     */
     private onStartSlot;
+    /**
+     * Overwrite the public dir Slot
+     */
     private publicDirOverwriteSlot;
+    /**
+     * Overwrite the build ui method
+     */
     private buildMethodOverwriteSlot;
+    /**
+     * component extension.
+     */
     private componentExtension;
+    /**
+     * ui logger instance.
+     */
     private cache;
+    /**
+     * ui logger instance.
+     */
     private logger;
     private harmony;
     private startPluginSlot;
-    constructor(pubsub: PubsubMain, config: UIConfig, graphql: GraphqlMain, uiRootSlot: UIRootRegistry, express: ExpressMain, preStartSlot: PreStartSlot, onStartSlot: OnStartSlot, publicDirOverwriteSlot: PublicDirOverwriteSlot, buildMethodOverwriteSlot: BuildMethodOverwriteSlot, componentExtension: ComponentMain, cache: CacheMain, logger: Logger, harmony: Harmony, startPluginSlot: StartPluginSlot);
+    constructor(
+    /**
+     * Pubsub extension.
+     */
+    pubsub: PubsubMain, config: UIConfig, 
+    /**
+     * graphql extension.
+     */
+    graphql: GraphqlMain, 
+    /**
+     * slot registry of ui roots.
+     */
+    uiRootSlot: UIRootRegistry, 
+    /**
+     * express extension.
+     */
+    express: ExpressMain, 
+    /**
+     * pre-start slot
+     */
+    preStartSlot: PreStartSlot, 
+    /**
+     * on start slot
+     */
+    onStartSlot: OnStartSlot, 
+    /**
+     * Overwrite the public dir Slot
+     */
+    publicDirOverwriteSlot: PublicDirOverwriteSlot, 
+    /**
+     * Overwrite the build ui method
+     */
+    buildMethodOverwriteSlot: BuildMethodOverwriteSlot, 
+    /**
+     * component extension.
+     */
+    componentExtension: ComponentMain, 
+    /**
+     * ui logger instance.
+     */
+    cache: CacheMain, 
+    /**
+     * ui logger instance.
+     */
+    logger: Logger, harmony: Harmony, startPluginSlot: StartPluginSlot);
     publicDir(uiRoot: UIRoot): Promise<string>;
     private getUiByName;
+    /**
+     * create a build of the given UI root.
+     */
     build(uiRootName?: string): Promise<webpack.MultiStats | undefined>;
     registerStartPlugin(startPlugin: StartPlugin): this;
     private initiatePlugins;
+    /**
+     * create a Bit UI runtime.
+     */
     createRuntime({ uiRootName, pattern, dev, port, rebuild, verbose }: RuntimeOptions): Promise<UIServer>;
     private addSignalListener;
     getPort(port?: number): Promise<number>;
+    /**
+     * Events
+     */
     private createUiServerStartedEvent;
+    /**
+     * pre-start events are triggered and *completed* before the webserver started.
+     * (the promise is awaited)
+     */
     registerPreStart(preStartFn: PreStart): void;
+    /**
+     * bind to ui server start event.
+     */
     registerOnStart(onStartFn: OnStart): this;
+    /**
+     * overwrite the build ui function
+     */
     registerBuildUIOverwrite(fn: BuildMethodOverwrite): this;
+    /**
+     * overwrite the build ui function
+     */
     registerPublicDirOverwrite(fn: PublicDirOverwrite): this;
     private getOverwriteBuildFn;
     private getOverwritePublic;
     invokePreStart(preStartOpts: PreStartOpts): Promise<void>;
     invokeOnStart(): Promise<ComponentType[]>;
+    /**
+     * register a UI slot.
+     */
     registerUiRoot(uiRoot: UIRoot): void;
+    /**
+     * get a UI runtime instance.
+     */
     getUi(uiRootName?: string): [string, UIRoot] | undefined;
     getUiName(uiRootName?: string): string | undefined;
     private possibleUis;
     createLink(aspectDefs: AspectDefinition[], rootExtensionName: string): Promise<string>;
+    /**
+     * generate the root file of the UI runtime.
+     */
     generateRoot(aspectDefs: AspectDefinition[], rootExtensionName: string, runtimeName?: string, rootAspect?: string): Promise<string>;
     private selectPort;
     private buildUI;

package/dist/ui.ui.runtime.d.ts

@@ -12,15 +12,45 @@ export declare type ContextProps<T = any> = {
 declare type HudSlot = SlotRegistry<ReactNode>;
 declare type renderLifecycleSlot = SlotRegistry<RenderLifecycle>;
 declare type UIRootRegistry = SlotRegistry<UIRootFactory>;
+/**
+ * extension
+ */
 export declare class UiUI {
+    /**
+     * react-router extension.
+     */
     private router;
+    /**
+     * ui root registry.
+     */
     private uiRootSlot;
+    /** slot for overlay ui elements */
     private hudSlot;
+    /** hooks into the ssr render process */
     private lifecycleSlot;
-    constructor(router: ReactRouterUI, uiRootSlot: UIRootRegistry, hudSlot: HudSlot, lifecycleSlot: renderLifecycleSlot);
+    constructor(
+    /**
+     * react-router extension.
+     */
+    router: ReactRouterUI, 
+    /**
+     * ui root registry.
+     */
+    uiRootSlot: UIRootRegistry, 
+    /** slot for overlay ui elements */
+    hudSlot: HudSlot, 
+    /** hooks into the ssr render process */
+    lifecycleSlot: renderLifecycleSlot);
+    /** render and rehydrate client-side */
     render(rootExtension: string): Promise<void>;
+    /** render dehydrated server-side */
     renderSsr(rootExtension: string, { assets, browser, server }?: SsrContent): Promise<string>;
+    /** adds elements to the Heads Up Display */
     registerHudItem: (element: ReactNode) => void;
+    /**
+     * adds global context at the ui root
+     * @deprecated replace with `.registerRenderHooks({ reactContext })`.
+     */
     registerContext<T>(context: ComponentType<ContextProps<T>>): void;
     registerRoot(uiRoot: UIRootFactory): void;
     registerRenderHooks<T, Y>(hooks: RenderLifecycle<T, Y>): void;

package/dist/webpack/html.d.ts

@@ -1 +1,2 @@
+/** fallback html template for the main UI, in case ssr is not active */
 export declare function html(title: string, withDevTools?: boolean): () => string;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/ui",
-  "version": "0.0.551",
+  "version": "0.0.556",
   "homepage": "https://bit.dev/teambit/ui-foundation/ui",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "ui",
-    "version": "0.0.551"
+    "version": "0.0.556"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -53,28 +53,28 @@
     "@teambit/base-ui.loaders.loader-ribbon": "1.0.0",
     "@teambit/base-ui.theme.fonts.roboto": "1.0.0",
     "@teambit/base-ui.theme.theme-provider": "1.0.1",
-    "@teambit/aspect-loader": "0.0.551",
-    "@teambit/toolbox.path.to-windows-compatible-path": "0.0.456",
-    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.460",
-    "@teambit/logger": "0.0.467",
-    "@teambit/cli": "0.0.382",
-    "@teambit/ui-foundation.cli.ui-server-console": "0.0.461",
-    "@teambit/bundler": "0.0.551",
-    "@teambit/component": "0.0.551",
-    "@teambit/express": "0.0.471",
-    "@teambit/graphql": "0.0.551",
-    "@teambit/toolbox.network.get-port": "0.0.86",
-    "@teambit/aspect": "0.0.551",
-    "@teambit/cache": "0.0.467",
-    "@teambit/pubsub": "0.0.551",
-    "@teambit/react-router": "0.0.551",
-    "@teambit/ui-foundation.ui.rendering.html": "0.0.42",
+    "@teambit/aspect-loader": "0.0.556",
+    "@teambit/toolbox.path.to-windows-compatible-path": "0.0.461",
+    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.465",
+    "@teambit/logger": "0.0.472",
+    "@teambit/cli": "0.0.387",
+    "@teambit/ui-foundation.cli.ui-server-console": "0.0.466",
+    "@teambit/bundler": "0.0.556",
+    "@teambit/component": "0.0.556",
+    "@teambit/express": "0.0.476",
+    "@teambit/graphql": "0.0.556",
+    "@teambit/toolbox.network.get-port": "0.0.91",
+    "@teambit/aspect": "0.0.556",
+    "@teambit/cache": "0.0.472",
+    "@teambit/pubsub": "0.0.556",
+    "@teambit/react-router": "0.0.556",
+    "@teambit/ui-foundation.ui.rendering.html": "0.0.47",
     "@teambit/design.theme.icons-font": "1.0.2",
     "@teambit/design.ui.tooltip": "0.0.352",
-    "@teambit/ui-foundation.ui.global-loader": "0.0.459",
-    "@teambit/webpack.modules.generate-style-loaders": "0.0.76",
-    "@teambit/webpack.modules.style-regexps": "0.0.105",
-    "@teambit/webpack": "0.0.551"
+    "@teambit/ui-foundation.ui.global-loader": "0.0.464",
+    "@teambit/webpack.modules.generate-style-loaders": "0.0.81",
+    "@teambit/webpack.modules.style-regexps": "0.0.110",
+    "@teambit/webpack": "0.0.556"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -96,7 +96,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.169",
+    "@teambit/legacy": "1.0.173",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -141,11 +141,17 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.169",
+        "@teambit/legacy": "1.0.173",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
+  "files": [
+    "dist",
+    "!dist/tsconfig.tsbuildinfo",
+    "README.md",
+    "README.mdx"
+  ],
   "private": false
 }

package/compose.tsx

@@ -1,27 +0,0 @@
-import React, { ReactNode, ComponentType } from 'react';
-
-type ComponentTuple<T = any> = [Component: ComponentType<T>, props?: T];
-export type Wrapper<T = any> = ComponentType<T> | ComponentTuple<T>;
-interface Props<T = any> {
-  /** Compose these components. Can be a ReactComponent, or a [ReactComponent, Props] tuple */
-  components: Wrapper<T>[];
-  children?: ReactNode;
-}
-
-/**
- * A react Component composer. equivalent to `(n+1) => <a[n+1]> <Compose(a[n]) /> </a[n+1]>`.
- * Component can be a React Component, or a `[Component, { ...props }]` tuple.
- */
-export function Compose(props: Props) {
-  const { components = [], children } = props;
-
-  const arrayified: ComponentTuple[] = components.map((tuple) => (Array.isArray(tuple) ? tuple : [tuple, undefined]));
-
-  return (
-    <>
-      {arrayified.reduceRight((acc, [Comp, forwardProps]) => {
-        return <Comp {...forwardProps}>{acc}</Comp>;
-      }, children)}
-    </>
-  );
-}