@teambit/ui 0.0.568 → 0.0.569

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);

package/webpack/html.ts

@@ -0,0 +1,24 @@
+/** fallback html template for the main UI, in case ssr is not active */
+export function html(title: string, withDevTools?: boolean) {
+  return () => `
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>${title}</title>
+      <script>
+      // Allow to use react dev-tools inside the examples
+      ${
+        withDevTools
+          ? ''
+          : 'try { window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__; } catch {}'
+      }
+      </script>
+    </head>
+    <body>
+      <div id="root"></div>
+    </body>
+  </html>  
+  `;
+}

package/webpack/postcss.config.ts

@@ -0,0 +1,22 @@
+// import postcssFlexbugsFixes from 'postcss-flexbugs-fixes';
+
+export const postCssConfig = {
+  // Necessary for external CSS imports to work
+  // https://github.com/facebook/create-react-app/issues/2677
+  ident: 'postcss',
+  plugins: [
+    // eslint-disable-next-line global-require
+    require.resolve('postcss-flexbugs-fixes'),
+    // eslint-disable-next-line global-require
+    require('postcss-preset-env')({
+      autoprefixer: {
+        flexbox: 'no-2009',
+      },
+      stage: 3,
+    }),
+    // Adds PostCSS Normalize as the reset css with default options,
+    // so that it honors browserslist config in package.json
+    // which in turn let's users customize the target behavior as per their needs.
+    require.resolve('postcss-normalize'),
+  ],
+};