@teambit/ui 0.0.553 → 0.0.557

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

package/create-root.ts

@@ -1,94 +0,0 @@
-import { AspectDefinition } from '@teambit/aspect-loader';
-import { toWindowsCompatiblePath } from '@teambit/toolbox.path.to-windows-compatible-path';
-import { camelCase } from 'lodash';
-import { parse } from 'path';
-
-import { UIAspect } from './ui.aspect';
-
-export async function createRoot(
-  aspectDefs: AspectDefinition[],
-  rootExtensionName?: string,
-  rootAspect = UIAspect.id,
-  runtime = 'ui',
-  config = {}
-) {
-  const rootId = rootExtensionName ? `'${rootExtensionName}'` : '';
-  const identifiers = getIdentifiers(aspectDefs, 'Aspect');
-
-  const idSetters = getIdSetters(aspectDefs, 'Aspect');
-
-  return `
-${createImports(aspectDefs)}
-
-const isBrowser = typeof window !== "undefined";
-const config = JSON.parse('${toWindowsCompatiblePath(JSON.stringify(config))}');
-${idSetters.join('\n')}
-
-export function render(...props){
-  return Harmony.load([${identifiers.join(', ')}], '${runtime}', config)
-    .then((harmony) => {
-      return harmony
-      .run()
-      .then(() => {
-        const rootExtension = harmony.get('${rootAspect}');
-
-        if (isBrowser) {
-          return rootExtension.render(${rootId}, ...props);
-        } else {
-          return rootExtension.renderSsr(${rootId}, ...props);
-        }
-      })
-      .catch((err) => {
-        throw err;
-      });
-    });
-}
-
-if (isBrowser) render();
-`;
-}
-
-function createImports(aspectDefs: AspectDefinition[]) {
-  const defs = aspectDefs.filter((def) => def.runtimePath);
-
-  return `import { Harmony } from '@teambit/harmony';
-${getImportStatements(aspectDefs, 'aspectPath', 'Aspect')}
-${getImportStatements(defs, 'runtimePath', 'Runtime')}`;
-}
-
-function getImportStatements(aspectDefs: AspectDefinition[], pathProp: string, suffix: string): string {
-  return aspectDefs
-    .map(
-      (aspectDef) =>
-        `import ${getIdentifier(aspectDef, suffix)} from '${toWindowsCompatiblePath(aspectDef[pathProp])}';`
-    )
-    .join('\n');
-}
-
-function getIdentifiers(aspectDefs: AspectDefinition[], suffix: string): string[] {
-  return aspectDefs.map((aspectDef) => `${getIdentifier(aspectDef, suffix)}`);
-}
-
-function getIdSetters(defs: AspectDefinition[], suffix: string) {
-  return defs
-    .map((def) => {
-      if (!def.getId) return undefined;
-      return `${getIdentifier(def, suffix)}.id = '${def.getId}';`;
-    })
-    .filter((val) => !!val);
-}
-
-function getIdentifier(aspectDef: AspectDefinition, suffix: string): string {
-  if (!aspectDef.component && !aspectDef.local) {
-    return getCoreIdentifier(aspectDef.aspectPath, suffix);
-  }
-  return getRegularAspectIdentifier(aspectDef, suffix);
-}
-
-function getRegularAspectIdentifier(aspectDef: AspectDefinition, suffix: string): string {
-  return camelCase(`${parse(aspectDef.aspectPath).base.replace(/\./, '__').replace('@', '__')}${suffix}`);
-}
-
-function getCoreIdentifier(path: string, suffix: string): string {
-  return camelCase(`${parse(path).name.split('.')[0]}${suffix}`);
-}

package/events/index.ts

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

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

@@ -1,14 +0,0 @@
-/* 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

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

package/exceptions/unknown-build-error.ts

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

package/exceptions/unknown-ui.ts

@@ -1,9 +0,0 @@
-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/index.ts

@@ -1,18 +0,0 @@
-import { UIAspect, UIRuntime } from './ui.aspect';
-
-export * from './events';
-export { UIRoot, PostStartOptions, ProxyEntry } from './ui-root';
-export type { UiMain, PreStartOpts } from './ui.main.runtime';
-export type { UiUI, ContextProps } from './ui.ui.runtime';
-export { StartPlugin, StartPluginOptions } from './start-plugin';
-export type { RenderLifecycle } from './render-lifecycle';
-export { UIRootUI, UIRootFactory } from './ui-root.ui';
-export type { UIServer } from './ui-server';
-export { UIAspect, UIRuntime };
-export type { BrowserData } from './ssr/request-browser';
-export default UIAspect;
-
-// using `useDataQuery` from this package is deprecated, use `@teambit/ui-foundation.ui.hooks.use-data-query` directly
-export { DataQueryResult, useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-// temporary. TODO: fix this
-export { useMutation } from '@apollo/client';

package/open-browser.ts

@@ -1,128 +0,0 @@
-import { execSync } from 'child_process';
-import chalk from 'chalk';
-import spawn from 'cross-spawn';
-import open from 'open';
-import { Logger } from '@teambit/logger';
-
-export class OpenBrowser {
-  constructor(private logger: Logger) {}
-  OSX_CHROME = 'google chrome';
-
-  Actions = Object.freeze({
-    NONE: 0,
-    BROWSER: 1,
-    SCRIPT: 2,
-  });
-
-  /**
-   * 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) {
-    const { action, value, args } = this.getBrowserEnv();
-    switch (action) {
-      case this.Actions.NONE:
-        // Special case: BROWSER="none" will prevent opening completely.
-        return false;
-      case this.Actions.SCRIPT:
-        return this.executeNodeScript(value, url);
-      case this.Actions.BROWSER:
-        return this.startBrowserProcess(value, url, args);
-      default:
-        throw new Error('Not implemented.');
-    }
-  }
-
-  private getBrowserEnv() {
-    // Attempt to honor this environment variable.
-    // It is specific to the operating system.
-    // See https://github.com/sindresorhus/open#app for documentation.
-    const value = process.env.BROWSER;
-    const args = process.env.BROWSER_ARGS ? process.env.BROWSER_ARGS.split(' ') : [];
-    let action;
-    if (!value) {
-      // Default.
-      action = this.Actions.BROWSER;
-    } else if (value.toLowerCase().endsWith('.js')) {
-      action = this.Actions.SCRIPT;
-    } else if (value.toLowerCase() === 'none') {
-      action = this.Actions.NONE;
-    } else {
-      action = this.Actions.BROWSER;
-    }
-    return { action, value, args };
-  }
-
-  private executeNodeScript(scriptPath, url) {
-    const extraArgs = process.argv.slice(2);
-    const child = spawn(process.execPath, [scriptPath, ...extraArgs, url], {
-      stdio: 'inherit',
-    });
-    child.on('close', (code) => {
-      if (code !== 0) {
-        this.logger.info(chalk.red('The script specified as BROWSER environment variable failed.'));
-        this.logger.info(`${chalk.cyan(scriptPath)} exited with code ${code}.`);
-      }
-    });
-    return true;
-  }
-
-  private startBrowserProcess(browser: any, url: string, args: any) {
-    // If we're on OS X, the user hasn't specifically
-    // requested a different browser, we can try opening
-    // Chrome with AppleScript. This lets us reuse an
-    // existing tab when possible instead of creating a new one.
-    const shouldTryOpenChromiumWithAppleScript =
-      process.platform === 'darwin' && (typeof browser !== 'string' || browser === this.OSX_CHROME);
-
-    if (shouldTryOpenChromiumWithAppleScript) {
-      // Will use the first open browser found from list
-      const supportedChromiumBrowsers = [
-        'Google Chrome Canary',
-        'Google Chrome',
-        'Microsoft Edge',
-        'Brave Browser',
-        'Vivaldi',
-        'Chromium',
-      ];
-
-      for (const chromiumBrowser of supportedChromiumBrowsers) {
-        try {
-          // Try our best to reuse existing tab
-          // on OSX Chromium-based browser with AppleScript
-          execSync(`ps cax | grep "${chromiumBrowser}"`);
-          execSync(`osascript openChrome.applescript "${encodeURI(url)}" "${chromiumBrowser}"`, {
-            cwd: __dirname,
-            stdio: 'ignore',
-          });
-          return true;
-        } catch (err: any) {
-          // Ignore errors.
-        }
-      }
-    }
-
-    // Another special case: on OS X, check if BROWSER has been set to "open".
-    // In this case, instead of passing `open` to `opn` (which won't work),
-    // just ignore it (thus ensuring the intended behavior, i.e. opening the system browser):
-    // https://github.com/facebook/create-react-app/pull/1690#issuecomment-283518768
-    if (process.platform === 'darwin' && browser === 'open') {
-      browser = undefined;
-    }
-
-    // If there are arguments, they must be passed as array with the browser
-    if (typeof browser === 'string' && args.length > 0) {
-      browser = [browser].concat(args);
-    }
-
-    // Fallback to open
-    // (It will always open new tab)
-    try {
-      const options = { app: browser, wait: false, url: true };
-      open(url, options).catch(() => {}); // Prevent `unhandledRejection` error.
-      return true;
-    } catch (err: any) {
-      return false;
-    }
-  }
-}

package/render-lifecycle.tsx

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

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

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

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

@@ -1,9 +0,0 @@
-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-plugin.ts

@@ -1,25 +0,0 @@
-import { ComponentType } from 'react';
-import { ProxyEntry } from './ui-root';
-
-export 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>;
-}