@teambit/ui 0.0.568 → 0.0.569

package/compose.tsx

@@ -0,0 +1,27 @@
+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)}
+    </>
+  );
+}

package/events/index.ts

@@ -0,0 +1 @@
+export * from './ui-server-started-event';

package/events/ui-server-started-event.ts

@@ -0,0 +1,14 @@
+/* eslint-disable max-classes-per-file */
+import { BitBaseEvent } from '@teambit/pubsub';
+
+class UiServerStartedEventData {
+  constructor(readonly targetHost, readonly targetPort, readonly uiRoot) {}
+}
+
+export class UiServerStartedEvent extends BitBaseEvent<UiServerStartedEventData> {
+  static readonly TYPE = 'ui-server-started';
+
+  constructor(readonly timestamp, readonly targetHost, readonly targetPort, readonly uiRoot) {
+    super(UiServerStartedEvent.TYPE, '0.0.1', timestamp, new UiServerStartedEventData(targetHost, targetPort, uiRoot));
+  }
+}

package/exceptions/index.ts

@@ -0,0 +1,2 @@
+export { UnknownUI } from './unknown-ui';
+export { UnknownBuildError } from './unknown-build-error';

package/exceptions/unknown-build-error.ts

@@ -0,0 +1,5 @@
+export class UnknownBuildError extends Error {
+  constructor() {
+    super('unknown UI build error');
+  }
+}

package/exceptions/unknown-ui.ts

@@ -0,0 +1,9 @@
+export class UnknownUI extends Error {
+  constructor(readonly uiRoot: string = '', readonly available?: string[]) {
+    super();
+  }
+
+  toString() {
+    return `Unknown UI root: "${this.uiRoot}". Available ui roots are: [${this.available?.join(', ')}]`;
+  }
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/ui",
-  "version": "0.0.568",
+  "version": "0.0.569",
   "homepage": "https://bit.dev/teambit/ui-foundation/ui",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "ui",
-    "version": "0.0.568"
+    "version": "0.0.569"
   },
   "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.568",
-    "@teambit/toolbox.path.to-windows-compatible-path": "0.0.468",
-    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.472",
-    "@teambit/logger": "0.0.480",
-    "@teambit/cli": "0.0.394",
-    "@teambit/ui-foundation.cli.ui-server-console": "0.0.473",
-    "@teambit/bundler": "0.0.568",
-    "@teambit/component": "0.0.568",
-    "@teambit/express": "0.0.484",
-    "@teambit/graphql": "0.0.568",
-    "@teambit/toolbox.network.get-port": "0.0.98",
-    "@teambit/aspect": "0.0.568",
-    "@teambit/cache": "0.0.480",
-    "@teambit/pubsub": "0.0.568",
-    "@teambit/react-router": "0.0.568",
-    "@teambit/ui-foundation.ui.rendering.html": "0.0.54",
+    "@teambit/aspect-loader": "0.0.569",
+    "@teambit/toolbox.path.to-windows-compatible-path": "0.0.469",
+    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.473",
+    "@teambit/logger": "0.0.481",
+    "@teambit/cli": "0.0.395",
+    "@teambit/ui-foundation.cli.ui-server-console": "0.0.474",
+    "@teambit/bundler": "0.0.569",
+    "@teambit/component": "0.0.569",
+    "@teambit/express": "0.0.485",
+    "@teambit/graphql": "0.0.569",
+    "@teambit/toolbox.network.get-port": "0.0.99",
+    "@teambit/aspect": "0.0.569",
+    "@teambit/cache": "0.0.481",
+    "@teambit/pubsub": "0.0.569",
+    "@teambit/react-router": "0.0.569",
+    "@teambit/ui-foundation.ui.rendering.html": "0.0.55",
     "@teambit/design.theme.icons-font": "1.0.2",
     "@teambit/design.ui.tooltip": "0.0.352",
-    "@teambit/ui-foundation.ui.global-loader": "0.0.471",
-    "@teambit/webpack.modules.generate-style-loaders": "0.0.88",
-    "@teambit/webpack.modules.style-regexps": "0.0.117",
-    "@teambit/webpack": "0.0.568"
+    "@teambit/ui-foundation.ui.global-loader": "0.0.472",
+    "@teambit/webpack.modules.generate-style-loaders": "0.0.89",
+    "@teambit/webpack.modules.style-regexps": "0.0.118",
+    "@teambit/webpack": "0.0.569"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -96,7 +96,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.180",
+    "@teambit/legacy": "1.0.181",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -141,27 +141,12 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.180",
+        "@teambit/legacy": "1.0.181",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
-  "files": [
-    "dist",
-    "!dist/tsconfig.tsbuildinfo",
-    "**/*.md",
-    "**/*.mdx",
-    "**/*.js",
-    "**/*.json",
-    "**/*.sass",
-    "**/*.scss",
-    "**/*.less",
-    "**/*.css",
-    "**/*.css",
-    "**/*.jpeg",
-    "**/*.gif"
-  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

package/render-lifecycle.tsx

@@ -0,0 +1,56 @@
+import { ReactNode, ComponentType } from 'react';
+import { BrowserData } from './ssr/request-browser';
+import { RequestServer } from './ssr/request-server';
+import { ContextProps } from './ui.ui.runtime';
+
+export 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/ssr/render-middleware.ts

@@ -0,0 +1,129 @@
+import type { Assets } from '@teambit/ui-foundation.ui.rendering.html';
+import { Request, Response, NextFunction } from 'express';
+import path from 'path';
+import * as fs from 'fs-extra';
+import type { Logger } from '@teambit/logger';
+import { requestToObj } from './request-browser';
+import { SsrContent } from './ssr-content';
+
+const denyList = /^\/favicon.ico$/;
+
+type ssrRenderProps = {
+  root: string;
+  port: number;
+  title: string;
+  logger: Logger;
+};
+
+type ManifestFile = {
+  files?: Record<string, string>;
+  entrypoints?: string[];
+};
+
+export async function createSsrMiddleware({ root, port, title, logger }: ssrRenderProps) {
+  const runtime = await loadRuntime(root, { logger });
+  if (!runtime) return undefined;
+
+  const { render } = runtime;
+  const assets = { ...runtime.assets, title };
+
+  return async function serverRenderMiddleware(req: Request, res: Response, next: NextFunction) {
+    const { query, url } = req;
+
+    const browser = requestToObj(req, port);
+
+    if (denyList.test(url)) {
+      logger.debug(`[ssr] skipping static denyList file ${url}`);
+      next();
+      return;
+    }
+
+    if (query.rendering === 'client') {
+      logger.debug(`[ssr] skipping ${url}`);
+      next();
+      return;
+    }
+
+    logger.debug(`[ssr] ${req.method} ${url}`);
+    const server = { port, request: req, response: res };
+    const props: SsrContent = { assets, browser, server };
+
+    try {
+      const rendered = await render(props);
+      res.set('Cache-Control', 'no-cache');
+      res.send(rendered);
+      logger.debug(`[ssr] success '${url}'`);
+    } catch (e: any) {
+      logger.error(`[ssr] failed at '${url}'`, e);
+      next();
+    }
+  };
+}
+
+async function loadRuntime(root: string, { logger }: { logger: Logger }) {
+  let render: (...arg: any[]) => any;
+  let assets: Assets | undefined;
+
+  try {
+    const entryFilepath = path.join(root, 'ssr', 'index.js');
+    if (!fs.existsSync(entryFilepath)) {
+      logger.warn(`[ssr] - Skipping setup - failed finding ssr bundle at "${entryFilepath}"`);
+      return undefined;
+    }
+
+    const manifestFilepath = path.join(root, 'asset-manifest.json');
+    if (!fs.existsSync(manifestFilepath)) {
+      logger.warn('[ssr] - Skipping setup (cannot find asset manifest file)');
+      return undefined;
+    }
+
+    assets = await parseManifest(manifestFilepath);
+    if (!assets) {
+      logger.warn('[ssr] - Skipping setup (failed parsing assets manifest)');
+      return undefined;
+    }
+
+    const imported = await import(entryFilepath);
+    render = imported?.render;
+
+    if (!render || typeof render !== 'function') {
+      logger.warn('[ssr] - index file does not export a render() function. Skipping setup.');
+      return undefined;
+    }
+  } catch (e: any) {
+    logger.error(e);
+    return undefined;
+  }
+
+  return {
+    render,
+    assets,
+  };
+}
+
+async function parseManifest(filepath: string, logger?: Logger) {
+  try {
+    const file = await fs.readFile(filepath);
+    logger?.debug('[ssr] - ✓ aread manifest file');
+    const contents = file.toString();
+    const parsed: ManifestFile = JSON.parse(contents);
+    logger?.debug('[ssr] - ✓ prased manifest file', parsed);
+    const assets = getAssets(parsed);
+    logger?.debug('[ssr] - ✓ extracted data from manifest file', assets);
+
+    return assets;
+  } catch (e: any) {
+    logger?.error('[ssr] - error parsing asset manifest', e);
+    process.exit();
+    return undefined;
+  }
+}
+
+function getAssets(manifest: ManifestFile) {
+  const assets: Assets = { css: [], js: [] };
+
+  assets.css = manifest.entrypoints?.filter((x) => x.endsWith('css')).map((x) => path.join('/', x));
+  assets.js = manifest.entrypoints?.filter((x) => x.endsWith('js')).map((x) => path.join('/', x));
+
+  return assets;
+}

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