@teambit/ui 0.0.566 → 0.0.570

package/ssr/request-browser.ts

@@ -0,0 +1,86 @@
+import type { IncomingHttpHeaders } from 'http';
+import type { Request } from 'express';
+
+export type ParsedQuery = { [key: string]: undefined | string | string[] | ParsedQuery | ParsedQuery[] };
+
+export type BrowserData = {
+  connection: {
+    secure: boolean;
+    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 function requestToObj(req: Request, port: number) {
+  // apparently port is not readily available in request.
+
+  const browser: BrowserData = {
+    connection: {
+      secure: req.secure,
+      headers: req.headers,
+      body: req.body,
+    },
+    // trying to match to browser.location
+    location: {
+      host: `${req.hostname}:${port}`,
+      hostname: req.hostname,
+      href: `${req.protocol}://${req.hostname}:${port}${req.url}`,
+      origin: `${req.protocol}://${req.hostname}:${port}`,
+      pathname: req.path,
+      port,
+      protocol: `${req.protocol}:`,
+      query: req.query,
+      url: req.url,
+    },
+    cookie: req.header('Cookie'),
+  };
+
+  return browser;
+}

package/ssr/request-server.ts

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

package/ssr/ssr-content.ts

@@ -0,0 +1,9 @@
+import type { Assets } from '@teambit/ui-foundation.ui.rendering.html';
+import { BrowserData } from './request-browser';
+import { RequestServer } from './request-server';
+
+export type SsrContent = {
+  assets?: Assets;
+  browser?: BrowserData;
+  server?: RequestServer;
+};

package/start.cmd.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import open from 'open';
+import { Command, CommandOptions } from '@teambit/cli';
+import { Logger } from '@teambit/logger';
+import { UIServerConsole } from '@teambit/ui-foundation.cli.ui-server-console';
+import type { UiMain } from './ui.main.runtime';
+
+type StartArgs = [uiName: string, userPattern: string];
+type StartFlags = {
+  dev: boolean;
+  port: string;
+  rebuild: boolean;
+  verbose: boolean;
+  noBrowser: boolean;
+  skipCompilation: boolean;
+};
+
+export class StartCmd implements Command {
+  name = 'start [type] [pattern]';
+  description = 'Start a dev environment for a workspace or a specific component';
+  alias = 'c';
+  group = 'development';
+  shortDescription = '';
+  options = [
+    ['d', 'dev', 'start UI server in dev mode.'],
+    ['p', 'port [number]', 'port of the UI server.'],
+    ['r', 'rebuild', 'rebuild the UI'],
+    ['v', 'verbose', 'showing verbose output for inspection and prints stack trace'],
+    ['', 'no-browser', 'do not automatically open browser when ready'],
+    ['', 'skip-compilation', 'skip the auto-compilation before starting the web-server'],
+  ] as CommandOptions;
+
+  constructor(
+    /**
+     * access to the extension instance.
+     */
+    private ui: UiMain,
+
+    private logger: Logger
+  ) {}
+
+  // async report([uiRootName, userPattern]: StartArgs, { dev, port, rebuild, verbose }: StartFlags): Promise<string> {
+  //   this.logger.off();
+  //   const pattern = userPattern && userPattern.toString();
+
+  //   const uiServer = await this.ui.createRuntime({
+  //     uiRootName,
+  //     pattern,
+  //     dev,
+  //     port: port ? parseInt(port) : undefined,
+  //     rebuild,
+  //     verbose,
+  //   });
+
+  //   return `Bit server has started on port ${uiServer.port}`;
+  // }
+
+  async render(
+    [uiRootName, userPattern]: StartArgs,
+    { dev, port, rebuild, verbose, noBrowser, skipCompilation }: StartFlags
+  ): Promise<React.ReactElement> {
+    this.logger.off();
+    const appName = this.ui.getUiName(uiRootName);
+    await this.ui.invokePreStart({ skipCompilation });
+    const uiServer = this.ui.createRuntime({
+      uiRootName,
+      pattern: userPattern,
+      dev,
+      port: +port,
+      rebuild,
+      verbose,
+    });
+
+    if (!noBrowser) {
+      uiServer
+        .then(async (server) => {
+          if (!server.buildOptions?.launchBrowserOnStart) return undefined;
+
+          await server.whenReady;
+
+          return open(this.ui.publicUrl || server.fullUrl);
+        })
+        .catch((error) => this.logger.error(error));
+    }
+
+    // DO NOT CHANGE THIS - this meant to be an async hook.
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this.ui.invokeOnStart();
+    this.ui.clearConsole();
+
+    return <UIServerConsole appName={appName} futureUiServer={uiServer} url={this.ui.publicUrl} />;
+  }
+}

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}

package/ui/client-context.tsx

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react';
+import { Theme } from '@teambit/base-ui.theme.theme-provider';
+import { IconFont } from '@teambit/design.theme.icons-font';
+import { LoaderRibbon } from '@teambit/base-ui.loaders.loader-ribbon';
+import { Roboto } from '@teambit/base-ui.theme.fonts.roboto';
+import { TooltipMountPoint } from '@teambit/design.ui.tooltip';
+
+import { LoaderContext, useLoaderApi } from '@teambit/ui-foundation.ui.global-loader';
+import styles from './client-context.module.scss';
+
+export function ClientContext({ children }: { children: ReactNode }) {
+  const [loaderApi, isLoading] = useLoaderApi();
+
+  return (
+    <React.StrictMode>
+      {/* TODO - try moving LoaderContext to contextSlot, and LoaderRibbon to hudSlot */}
+      <LoaderContext.Provider value={loaderApi}>
+        <IconFont query="q76y7n" />
+        <Theme>
+          <Roboto />
+          <LoaderRibbon active={isLoading} className={styles.loader} />
+          {children}
+          <TooltipMountPoint />
+        </Theme>
+      </LoaderContext.Provider>
+    </React.StrictMode>
+  );
+}

package/ui-build.cmd.tsx

@@ -0,0 +1,27 @@
+import { Command } from '@teambit/cli';
+import { UnknownBuildError } from './exceptions';
+
+import { UiMain } from './ui.main.runtime';
+
+export class UIBuildCmd implements Command {
+  name = 'ui-build [type]';
+  description = 'build production assets for deployment.';
+  alias = 'c';
+  group = 'development';
+  shortDescription = '';
+  options = [];
+
+  constructor(
+    /**
+     * access to the extension instance.
+     */
+    private ui: UiMain
+  ) {}
+
+  async report([type]: [string]): Promise<string> {
+    // teambit.workspace/variants should be the one to take care of component patterns.
+    const stats = await this.ui.build(type);
+    if (!stats) throw new UnknownBuildError();
+    return stats.toString();
+  }
+}

package/ui-root.tsx

@@ -0,0 +1,59 @@
+import { AspectDefinition } from '@teambit/aspect-loader';
+import { ComponentDir } from '@teambit/bundler';
+import { Component } from '@teambit/component';
+import { ProxyConfigArrayItem } from 'webpack-dev-server';
+
+// TODO: remove this extends "ComponentDir", this should be part of the workspace alone since scope
+// would never have componentDir and as it has nothing to do with `UIRoot`.
+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 type ProxyEntry = ProxyConfigArrayItem & {
+  context: string[]; // limit type to simplify our code. (not required)
+};
+
+export type PostStartOptions = {
+  /**
+   * pattern for selecting components in the container.
+   */
+  pattern?: string;
+};

package/ui.cli.rt.tsx

@@ -0,0 +1,10 @@
+// import { CLIExtension } from '../cli';
+// import { StartCmd } from './start.cmd';
+// import { Workspace } from '../workspace';
+// import { GraphQLExtension } from '../graphql';
+
+// export default ([cli, envs, workspace, graphql]: [CLIExtension, Environments, Workspace, GraphQLExtension]) => {
+//     // const ui = new UIExtension(envs, graphql);
+//     cli.register(new StartCmd(ui, workspace));
+//     // return ui;
+//   }

package/ui.ui.runtime.tsx

@@ -0,0 +1,277 @@
+import type { GraphqlUI } from '@teambit/graphql';
+import { GraphqlAspect } from '@teambit/graphql';
+import { Slot, SlotRegistry } from '@teambit/harmony';
+import type { ReactRouterUI } from '@teambit/react-router';
+import { ReactRouterAspect } from '@teambit/react-router';
+import { Html, MountPoint, mountPointId, ssrCleanup, Assets } from '@teambit/ui-foundation.ui.rendering.html';
+
+import { merge } from 'webpack-merge';
+import React, { ReactNode, ComponentType } from 'react';
+import ReactDOM from 'react-dom';
+import ReactDOMServer from 'react-dom/server';
+import compact from 'lodash.compact';
+
+import { Compose, Wrapper } from './compose';
+import { UIRootFactory } from './ui-root.ui';
+import { UIAspect, UIRuntime } from './ui.aspect';
+import { ClientContext } from './ui/client-context';
+import type { SsrContent } from './ssr/ssr-content';
+import type { RequestServer } from './ssr/request-server';
+import type { BrowserData } from './ssr/request-browser';
+import { RenderLifecycle } from './render-lifecycle';
+
+export type ContextProps<T = any> = { renderCtx?: T; children: ReactNode };
+
+type HudSlot = SlotRegistry<ReactNode>;
+type renderLifecycleSlot = SlotRegistry<RenderLifecycle>;
+type UIRootRegistry = SlotRegistry<UIRootFactory>;
+
+/**
+ * extension
+ */
+export class UiUI {
+  constructor(
+    /**
+     * react-router extension.
+     */
+    private router: ReactRouterUI,
+    /**
+     * ui root registry.
+     */
+    private uiRootSlot: UIRootRegistry,
+    /** slot for overlay ui elements */
+    private hudSlot: HudSlot,
+    /** hooks into the ssr render process */
+    private lifecycleSlot: renderLifecycleSlot
+  ) {}
+
+  /** render and rehydrate client-side */
+  async render(rootExtension: string): Promise<void> {
+    const rootFactory = this.getRoot(rootExtension);
+    if (!rootFactory) throw new Error(`root: ${rootExtension} was not found`);
+    const uiRoot = rootFactory();
+    const initialLocation = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+    const routes = this.router.renderRoutes(uiRoot.routes, { initialLocation });
+    const hudItems = this.hudSlot.values();
+    const lifecycleHooks = this.lifecycleSlot.toArray();
+
+    // TODO - extract the logic from here down as reusable ssr machine
+    const deserializedState = await this.deserialize(lifecycleHooks);
+    let renderContexts = await this.triggerBrowserInit(lifecycleHooks, deserializedState);
+    const reactContexts = this.getReactContexts(lifecycleHooks, renderContexts);
+
+    const app = (
+      <Compose components={reactContexts}>
+        <ClientContext>
+          {hudItems}
+          {routes}
+        </ClientContext>
+      </Compose>
+    );
+
+    renderContexts = await this.triggerBeforeHydrateHook(renderContexts, lifecycleHooks, app);
+
+    const mountPoint = document.getElementById(mountPointId);
+    // .render() already runs `.hydrate()` behind the scenes.
+    // in the future, we may want to replace it with .hydrate()
+    ReactDOM.render(app, mountPoint);
+
+    await this.triggerHydrateHook(renderContexts, lifecycleHooks, mountPoint);
+
+    // remove ssr only styles
+    ssrCleanup();
+  }
+
+  /** render dehydrated server-side */
+  async renderSsr(rootExtension: string, { assets, browser, server }: SsrContent = {}): Promise<string> {
+    const rootFactory = this.getRoot(rootExtension);
+    if (!rootFactory) throw new Error(`root: ${rootExtension} was not found`);
+
+    const uiRoot = rootFactory();
+    const routes = this.router.renderRoutes(uiRoot.routes, { initialLocation: browser?.location.url });
+    const hudItems = this.hudSlot.values();
+
+    // create array once to keep consistent indexes
+    const lifecycleHooks = this.lifecycleSlot.toArray();
+
+    // TODO - extract the logic from here down as reusable ssr machine
+    // (1) init
+    let renderContexts = await this.triggerServerInit(lifecycleHooks, browser, server);
+    const reactContexts = this.getReactContexts(lifecycleHooks, renderContexts);
+
+    // (2) make (virtual) dom
+    const app = (
+      <MountPoint>
+        <Compose components={reactContexts}>
+          <ClientContext>
+            {hudItems}
+            {routes}
+          </ClientContext>
+        </Compose>
+      </MountPoint>
+    );
+
+    // (3) render
+    renderContexts = await this.onBeforeRender(renderContexts, lifecycleHooks, app);
+
+    const renderedApp = ReactDOMServer.renderToString(app);
+
+    // (3) render html-template
+    const realtimeAssets = await this.serialize(lifecycleHooks, renderContexts, app);
+    // @ts-ignore // TODO upgrade 'webpack-merge'
+    const totalAssets = merge(assets, realtimeAssets) as Assets;
+
+    const html = <Html assets={totalAssets} withDevTools fullHeight ssr />;
+    const renderedHtml = `<!DOCTYPE html>${ReactDOMServer.renderToStaticMarkup(html)}`;
+    const fullHtml = Html.fillContent(renderedHtml, renderedApp);
+
+    // (4) serve
+    return fullHtml;
+  }
+
+  /** adds elements to the Heads Up Display */
+  registerHudItem = (element: ReactNode) => {
+    this.hudSlot.register(element);
+  };
+
+  /**
+   * adds global context at the ui root
+   * @deprecated replace with `.registerRenderHooks({ reactContext })`.
+   */
+  registerContext<T>(context: ComponentType<ContextProps<T>>) {
+    this.lifecycleSlot.register({
+      reactContext: context,
+    });
+  }
+
+  registerRoot(uiRoot: UIRootFactory) {
+    return this.uiRootSlot.register(uiRoot);
+  }
+
+  registerRenderHooks<T, Y>(hooks: RenderLifecycle<T, Y>) {
+    return this.lifecycleSlot.register(hooks);
+  }
+
+  private triggerBrowserInit(lifecycleHooks: [string, RenderLifecycle<any, any>][], deserializedState: any[]) {
+    return Promise.all(lifecycleHooks.map(([, hooks], idx) => hooks.browserInit?.(deserializedState[idx])));
+  }
+
+  private triggerServerInit(
+    lifecycleHooks: [string, RenderLifecycle<any, any>][],
+    browser?: BrowserData,
+    server?: RequestServer
+  ) {
+    return Promise.all(lifecycleHooks.map(([, hooks]) => hooks.serverInit?.({ browser, server })));
+  }
+
+  private getReactContexts(lifecycleHooks: [string, RenderLifecycle<any>][], renderContexts: any[]): Wrapper[] {
+    return compact(
+      lifecycleHooks.map(([, hooks], idx) => {
+        const renderCtx = renderContexts[idx];
+        const props = { renderCtx };
+        return hooks.reactContext ? [hooks.reactContext, props] : undefined;
+      })
+    );
+  }
+
+  private async onBeforeRender(
+    renderContexts: any[],
+    lifecycleHooks: [string, RenderLifecycle<any>][],
+    app: JSX.Element
+  ) {
+    await Promise.all(
+      lifecycleHooks.map(async ([, hooks], idx) => {
+        const ctx = renderContexts[idx];
+        const nextCtx = await hooks.onBeforeRender?.(ctx, app);
+        return nextCtx || ctx;
+      })
+    );
+    return renderContexts;
+  }
+
+  private triggerBeforeHydrateHook(
+    renderContexts: any[],
+    lifecycleHooks: [string, RenderLifecycle<any>][],
+    app: JSX.Element
+  ) {
+    return Promise.all(
+      lifecycleHooks.map(async ([, hooks], idx) => {
+        const ctx = renderContexts[idx];
+        const nextCtx = await hooks.onBeforeHydrate?.(ctx, app);
+        return nextCtx || ctx;
+      })
+    );
+  }
+
+  private async triggerHydrateHook(
+    renderContexts: any[],
+    lifecycleHooks: [string, RenderLifecycle<any, any>][],
+    mountPoint: HTMLElement | null
+  ) {
+    await Promise.all(lifecycleHooks.map(([, hooks], idx) => hooks.onHydrate?.(renderContexts[idx], mountPoint)));
+  }
+
+  private async serialize(
+    lifecycleHooks: [string, RenderLifecycle][],
+    renderContexts: any[],
+    app: ReactNode
+  ): Promise<Assets> {
+    const json = {};
+
+    await Promise.all(
+      lifecycleHooks.map(async ([key, hooks], idx) => {
+        const renderCtx = renderContexts[idx];
+        const result = await hooks.serialize?.(renderCtx, app);
+
+        if (!result) return;
+        if (result.json) json[key] = result.json;
+      })
+    );
+
+    // more assets will be available in the future
+    return { json };
+  }
+
+  private async deserialize(lifecycleHooks: [string, RenderLifecycle][]) {
+    const rawAssets = Html.popAssets();
+
+    const deserialized = await Promise.all(
+      lifecycleHooks.map(async ([key, hooks]) => {
+        try {
+          const raw = rawAssets.get(key);
+          return hooks.deserialize?.(raw);
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error(`failed deserializing server state for aspect ${key}`, e);
+          return undefined;
+        }
+      })
+    );
+
+    return deserialized;
+  }
+
+  private getRoot(rootExtension: string) {
+    return this.uiRootSlot.get(rootExtension);
+  }
+
+  static slots = [Slot.withType<UIRootFactory>(), Slot.withType<ReactNode>(), Slot.withType<RenderLifecycle>()];
+
+  static dependencies = [GraphqlAspect, ReactRouterAspect];
+
+  static runtime = UIRuntime;
+
+  static async provider(
+    [GraphqlUi, router]: [GraphqlUI, ReactRouterUI],
+    config,
+    [uiRootSlot, hudSlot, renderLifecycleSlot]: [UIRootRegistry, HudSlot, renderLifecycleSlot]
+  ) {
+    const uiUi = new UiUI(router, uiRootSlot, hudSlot, renderLifecycleSlot);
+
+    uiUi.registerRenderHooks(GraphqlUi.renderHooks);
+
+    return uiUi;
+  }
+}
+
+UIAspect.addRuntime(UiUI);