@teambit/ui 0.0.553 → 0.0.557

package/start.cmd.tsx

@@ -1,93 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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.module.scss

@@ -1,4 +0,0 @@
-.loader {
-  position: fixed;
-  z-index: 20;
-}

package/ui/client-context.tsx

@@ -1,28 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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-root.ui.ts

@@ -1,7 +0,0 @@
-import { RouteProps } from 'react-router-dom';
-
-export type UIRootUI = {
-  routes: RouteProps[];
-};
-
-export type UIRootFactory = () => UIRootUI;

package/ui-server.ts

@@ -1,249 +0,0 @@
-import { flatten } from 'lodash';
-import { ExpressMain } from '@teambit/express';
-import { GraphqlMain } from '@teambit/graphql';
-import { Logger } from '@teambit/logger';
-import express, { Express } from 'express';
-import fallback from 'express-history-api-fallback';
-import { Port } from '@teambit/toolbox.network.get-port';
-import { Server } from 'http';
-import httpProxy from 'http-proxy';
-import { join } from 'path';
-import webpack from 'webpack';
-import WebpackDevServer, { Configuration as WdsConfiguration } from 'webpack-dev-server';
-import { createSsrMiddleware } from './ssr/render-middleware';
-import { StartPlugin } from './start-plugin';
-import { ProxyEntry, UIRoot } from './ui-root';
-import { UIRuntime } from './ui.aspect';
-import { UiMain } from './ui.main.runtime';
-
-import { devConfig } from './webpack/webpack.dev.config';
-
-export type UIServerProps = {
-  graphql: GraphqlMain;
-  express: ExpressMain;
-  ui: UiMain;
-  uiRoot: UIRoot;
-  uiRootExtension: string;
-  logger: Logger;
-  publicDir: string;
-  startPlugins: StartPlugin[];
-};
-
-export type StartOptions = {
-  /**
-   * port range for the UI server to bind. default is a port range of 4000-4200.
-   */
-  portRange?: number[] | number;
-};
-
-export class UIServer {
-  constructor(
-    private graphql: GraphqlMain,
-    private expressExtension: ExpressMain,
-    private ui: UiMain,
-    private uiRoot: UIRoot,
-    private uiRootExtension: string,
-    private logger: Logger,
-    private publicDir: string,
-    private plugins: StartPlugin[]
-  ) {}
-
-  getName() {
-    return this.uiRoot.name;
-  }
-
-  private _port = 0;
-
-  get port() {
-    return this._port;
-  }
-
-  /** the hostname for the server to listen at. Currently statically 'localhost' */
-  get host() {
-    return 'localhost';
-  }
-
-  /** the server listens at this url */
-  get fullUrl() {
-    const port = this.port !== 80 ? `:${this.port}` : '';
-    return `http://${this.host}${port}`;
-  }
-
-  get buildOptions() {
-    return this.uiRoot.buildOptions;
-  }
-
-  /**
-   * get the webpack configuration of the UI server.
-   */
-  async getDevConfig() {
-    const aspects = await this.uiRoot.resolveAspects(UIRuntime.name);
-    const aspectsPaths = aspects.map((aspect) => aspect.aspectPath);
-
-    return devConfig(
-      this.uiRoot.path,
-      [await this.ui.generateRoot(aspects, this.uiRootExtension)],
-      this.uiRoot.name,
-      aspectsPaths
-    );
-  }
-
-  private setReady: () => void;
-  private startPromise = new Promise<void>((resolve) => (this.setReady = resolve));
-  get whenReady() {
-    return Promise.all([this.startPromise, ...this.plugins.map((x) => x?.whenReady)]);
-  }
-
-  /**
-   * start a UI server.
-   */
-  async start({ portRange }: StartOptions = {}) {
-    const app = this.expressExtension.createApp();
-    const publicDir = `/${this.publicDir}`;
-    const root = join(this.uiRoot.path, publicDir);
-    const server = await this.graphql.createServer({ app });
-
-    // set up proxy, for things like preview, e.g. '/preview/teambit.react/react'
-    await this.configureProxy(app, server);
-
-    // pass through files from public /folder:
-    // setting `index: false` so index.html will be served by the fallback() middleware
-    app.use(express.static(root, { index: false }));
-
-    const port = await Port.getPortFromRange(portRange || [3100, 3200]);
-
-    await this.setupServerSideRendering({ root, port, app });
-
-    // in any and all other cases, serve index.html.
-    // No any other endpoints past this will execute
-    app.use(fallback('index.html', { root }));
-
-    server.listen(port);
-    this._port = port;
-
-    // important: we use the string of the following message for the http.e2e.ts. if you change the message,
-    // please make sure you change the `HTTP_SERVER_READY_MSG` const.
-    this.logger.info(`UI server of ${this.uiRootExtension} is listening to port ${port}`);
-
-    this.setReady();
-  }
-
-  getPluginsComponents() {
-    return this.plugins.map((plugin) => plugin.render);
-  }
-
-  private async setupServerSideRendering({ root, port, app }: { root: string; port: number; app: Express }) {
-    if (!this.buildOptions?.ssr) return;
-
-    const ssrMiddleware = await createSsrMiddleware({
-      root,
-      port,
-      title: this.uiRoot.name,
-      logger: this.logger,
-    });
-
-    if (!ssrMiddleware) {
-      this.logger.warn('[ssr] middleware failed setup');
-      return;
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    app.get('*', ssrMiddleware);
-    this.logger.debug('[ssr] serving for "*"');
-  }
-
-  private async configureProxy(app: Express, server: Server) {
-    const proxServer = httpProxy.createProxyServer();
-    proxServer.on('error', (e) => this.logger.error(e.message));
-    const proxyEntries = await this.getProxyFromPlugins();
-    server.on('upgrade', function (req, socket, head) {
-      const entry = proxyEntries.find((proxy) => proxy.context.some((item) => item === req.url));
-      if (!entry) return;
-      proxServer.ws(req, socket, head, {
-        target: entry.target,
-      });
-    });
-
-    proxyEntries.forEach((entry) => {
-      entry.context.forEach((route) => {
-        app.use(`${route}/*`, (req, res) => {
-          proxServer.web(req, res, { ...entry, target: `${entry.target}/${req.originalUrl}` });
-        });
-      });
-    });
-  }
-
-  /**
-   * start a UI dev server.
-   */
-  async dev({ portRange }: StartOptions = {}) {
-    const devServerPort = await this.selectPort(portRange);
-    await this.start({ portRange: [4100, 4200] });
-    const expressAppPort = this._port;
-
-    const config = await this.getDevConfig();
-    const compiler = webpack(config);
-    const devServerConfig = await this.getDevServerConfig(devServerPort, expressAppPort, config.devServer);
-    // @ts-ignore in the capsules it throws an error about compatibilities issues between webpack.compiler and webpackDevServer/webpack/compiler
-    const devServer = new WebpackDevServer(devServerConfig, compiler);
-    
-    await devServer.start();
-    this._port = devServerPort;
-    return devServer;
-  }
-
-  private async selectPort(portRange?: number[] | number) {
-    return Port.getPortFromRange(portRange || [3100, 3200]);
-  }
-
-  private async getProxyFromPlugins(): Promise<ProxyEntry[]> {
-    const proxiesByPlugin = this.plugins.map((plugin) => {
-      return plugin.getProxy ? plugin.getProxy() : [];
-    });
-
-    return flatten(await Promise.all(proxiesByPlugin));
-  }
-
-  private async getProxy(port = 4000) {
-    const proxyEntries = await this.getProxyFromPlugins();
-
-    const gqlProxies: ProxyEntry[] = [
-      {
-        context: ['/graphql', '/api'],
-        target: `http://${this.host}:${port}`,
-        changeOrigin: true,
-      },
-      {
-        context: ['/subscriptions'],
-        target: `ws://${this.host}:${port}`,
-        ws: true,
-      },
-    ];
-
-    return gqlProxies.concat(proxyEntries);
-  }
-
-  private async getDevServerConfig(
-    appPort: number,
-    gqlPort: number,
-    config?: WdsConfiguration
-  ): Promise<WdsConfiguration> {
-    const proxy = await this.getProxy(gqlPort);
-    const devServerConf = { ...config, proxy, port: appPort };
-
-    return devServerConf;
-  }
-
-  static create(props: UIServerProps) {
-    return new UIServer(
-      props.graphql,
-      props.express,
-      props.ui,
-      props.uiRoot,
-      props.uiRootExtension,
-      props.logger,
-      props.publicDir,
-      props.startPlugins
-    );
-  }
-}

package/ui.aspect.ts

@@ -1,10 +0,0 @@
-import { Aspect, RuntimeDefinition } from '@teambit/harmony';
-
-export const UIRuntime = new RuntimeDefinition('ui');
-
-export const UIAspect = Aspect.create({
-  id: 'teambit.ui-foundation/ui',
-  declareRuntime: UIRuntime,
-});
-
-export default UIAspect;

package/ui.cli.rt.tsx

@@ -1,10 +0,0 @@
-// 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.docs.md

@@ -1,118 +0,0 @@
-## Server-side rendering
-
-Server side rendering (or SSR) is done in the following form:
-
-```tsx
-/** at server: */
-const dom = ReactDom.renderToString(<MountPoint>{app}</MountPoint>);
-const assets = { headers, scripts, ... };
-const html = ReactDom.renderStaticMarkup(<Html assets={assets}/>);
-Html.fillContent(html, dom);
-send(html);
-
-/** at client: */
-ReactDom.render(app, mountPoint);
- // or .hydrate()
-```
-
-We can then enrich the page with hooks:
-
-```tsx
-/** at server: */
-let context = hooks.serverInit();
-const app = (
-	<hooks.reactContext value={context}>
-		<App />
-	</hooks.reactContext>
-);
-
-context = hooks.onBeforeRender(app, context);
-const dom = ...
-
-const assets = hooks.serialize(context);
-const html = ...
-send(html);
-
-/** at client: */
-const parsed = hooks.deserialize();
-const context = hooks.browserInit(parsed);
-const app = (
-	<hooks.reactContext value={context}>
-		<App />
-	</hooks.reactContext>
-)
-
-hooks.onBeforeHydrate(app, context);
-
-const ref = ReactDom.render(app, mountPoint);
-
-hooks.onHydrate(ref, context);
-```
-
-The rendering flow will ensure that the rendering Context will be unique per request, and separate between aspects.
-
-### Hiding elements before JS execution
-
-Certain items look bad in the static HTML, and only get decent after JS executes. Tooltips are a notable example. They take up space in the DOM and only hide once their react code runs.  
-For these cases, use the convenience class `--ssr-hidden`. Add this to any misbehaving elements, and it will hide them using `display: none` until reactDom.render() is complete.
-
-### .rehydrate vs .render()
-
-.rehydrate() attach a React virtual dom to a mount point, without asserting the virtual-dom matches the actual dom.  
-.render() updates the mount point to match the react virtual dom.
-
-On paper, `.rehydrate()` should be the preferred option, with better performance.  
-In practice, `.render()` is backward compatible to React 15, and will know to "hydrate" according to the `data-reactroot` attribute on the mount point, with similar performance, and without revalidating the DOM.  
-ReactDOM will also show warnings in dev mode about mismatch between ssr dom and the client side dom.
-
-### Best practices
-
-- Use ReactContext instead of trying to mutate `App`.
-- Use existing context object.
-- Do not use other Aspects' context object.
-- Try to keep process symmetrical between server and client;
-
-#### Example: Server side GraphQL
-
-Graphql adds extra instructions to pre-fetch queries on the server:
-
-```tsx
- // .registerRenderHooks() ?
-.registerRenderLifecycle({
-	serverInit: ({ browser }) => {
-		const { cookie } = browser;
-		return { client: new Client(GQL_INTERNAL, { cookie }) };
-	},
-	beforeRender: ({ client }, app) => {
-		await getDataFromTree(app);
-	},
-	serialize: ({ client }, app) => {
-		return { json: JSON.stringify(client.extract()) };
-	},
-	deserialize: (raw) => {
-		return { state: JSON.parse(raw) };
-	},
-	browserInit: ({ state }) => {
-		return { client: new GraphqlClient(GQL_EXTERNAL, { cache: state })}
-	},
-	ReactContext: ({state, children}) =>
-		<GqlContext client={state.client}>{children}</GqlContext>
-});
-```
-
-#### Example: Server side Styled-components
-
-StyledComponents extracts css from page, and adds it to the `<head/>`:
-
-```tsx
-.registerRenderLifecycle({
-	init: () => {
-		return { sheet: new ServerStyleSheet() };
-	},
-	serialize: (app, { sheet }) => {
-		return { styles: sheet.getStyleTags() };
-	};
-	ReactContext: ({state, children}) =>
-		<StyleSheetManager sheet={state.sheet}>{children}</StyleSheetManager>
-});
-```