@teambit/ui 0.0.650 → 0.0.651

package/{__preview-1645068215823.js → __preview-1645365357220.js}

@@ -1 +1 @@
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.ui-foundation_ui@0.0.650/dist/ui.docs.md')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.ui-foundation_ui@0.0.651/dist/ui.docs.md')]

package/dist/ui-server.js

@@ -260,7 +260,8 @@ class UIServer {
     const proxServer = _httpProxy().default.createProxyServer();
 
     proxServer.on('error', e => this.logger.error(e.message));
-    const proxyEntries = await this.getProxyFromPlugins();
+    const proxyEntries = await this.getProxyFromPlugins(); // TODO - should use https://github.com/chimurai/http-proxy-middleware
+
     server.on('upgrade', function (req, socket, head) {
       const entry = proxyEntries.find(proxy => proxy.context.some(item => item === req.url));
       if (!entry) return;

package/dist/ui-server.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ui-server.ts"],"names":["UIServer","constructor","graphql","expressExtension","ui","uiRoot","uiRootExtension","logger","publicDir","plugins","Promise","resolve","setReady","getName","name","port","_port","host","fullUrl","buildOptions","getDevConfig","aspects","resolveAspects","UIRuntime","path","generateRoot","whenReady","all","startPromise","map","x","start","portRange","app","createApp","root","server","createServer","configureProxy","use","express","static","index","Port","getPortFromRange","setupServerSideRendering","listen","info","getPluginsComponents","plugin","render","ssr","ssrMiddleware","title","warn","get","debug","proxServer","httpProxy","createProxyServer","on","e","error","message","proxyEntries","getProxyFromPlugins","req","socket","head","entry","find","proxy","context","some","item","url","ws","target","forEach","route","res","web","originalUrl","dev","devServerPort","selectPort","expressAppPort","config","compiler","devServerConfig","getDevServerConfig","devServer","WebpackDevServer","proxiesByPlugin","getProxy","gqlProxies","changeOrigin","concat","appPort","gqlPort","devServerConf","create","props","startPlugins"],"mappings":"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","sourcesContent":["import { flatten } from 'lodash';\nimport { ExpressMain } from '@teambit/express';\nimport { GraphqlMain } from '@teambit/graphql';\nimport { Logger } from '@teambit/logger';\nimport express, { Express } from 'express';\nimport fallback from 'express-history-api-fallback';\nimport { Port } from '@teambit/toolbox.network.get-port';\nimport { Server } from 'http';\nimport httpProxy from 'http-proxy';\nimport { join } from 'path';\nimport webpack from 'webpack';\nimport WebpackDevServer, { Configuration as WdsConfiguration } from 'webpack-dev-server';\nimport { createSsrMiddleware } from './ssr-middleware';\nimport { StartPlugin } from './start-plugin';\nimport { ProxyEntry, UIRoot } from './ui-root';\nimport { UIRuntime } from './ui.aspect';\nimport { UiMain } from './ui.main.runtime';\n\nimport { devConfig } from './webpack/webpack.dev.config';\n\nexport type UIServerProps = {\n  graphql: GraphqlMain;\n  express: ExpressMain;\n  ui: UiMain;\n  uiRoot: UIRoot;\n  uiRootExtension: string;\n  logger: Logger;\n  publicDir: string;\n  startPlugins: StartPlugin[];\n};\n\nexport type StartOptions = {\n  /**\n   * port range for the UI server to bind. default is a port range of 4000-4200.\n   */\n  portRange?: number[] | number;\n};\n\nexport class UIServer {\n  constructor(\n    private graphql: GraphqlMain,\n    private expressExtension: ExpressMain,\n    private ui: UiMain,\n    private uiRoot: UIRoot,\n    private uiRootExtension: string,\n    private logger: Logger,\n    private publicDir: string,\n    private plugins: StartPlugin[]\n  ) {}\n\n  getName() {\n    return this.uiRoot.name;\n  }\n\n  private _port = 0;\n\n  get port() {\n    return this._port;\n  }\n\n  /** the hostname for the server to listen at. Currently statically 'localhost' */\n  get host() {\n    return 'localhost';\n  }\n\n  /** the server listens at this url */\n  get fullUrl() {\n    const port = this.port !== 80 ? `:${this.port}` : '';\n    return `http://${this.host}${port}`;\n  }\n\n  get buildOptions() {\n    return this.uiRoot.buildOptions;\n  }\n\n  /**\n   * get the webpack configuration of the UI server.\n   */\n  async getDevConfig() {\n    const aspects = await this.uiRoot.resolveAspects(UIRuntime.name);\n\n    return devConfig(this.uiRoot.path, [await this.ui.generateRoot(aspects, this.uiRootExtension)], this.uiRoot.name);\n  }\n\n  private setReady: () => void;\n  private startPromise = new Promise<void>((resolve) => (this.setReady = resolve));\n  get whenReady() {\n    return Promise.all([this.startPromise, ...this.plugins.map((x) => x?.whenReady)]);\n  }\n\n  /**\n   * start a UI server.\n   */\n  async start({ portRange }: StartOptions = {}) {\n    const app = this.expressExtension.createApp();\n    const publicDir = `/${this.publicDir}`;\n    const root = join(this.uiRoot.path, publicDir);\n    const server = await this.graphql.createServer({ app });\n\n    // set up proxy, for things like preview, e.g. '/preview/teambit.react/react'\n    await this.configureProxy(app, server);\n\n    // pass through files from public /folder:\n    // setting `index: false` so index.html will be served by the fallback() middleware\n    app.use(express.static(root, { index: false }));\n\n    const port = await Port.getPortFromRange(portRange || [3100, 3200]);\n\n    await this.setupServerSideRendering({ root, port, app });\n\n    // in any and all other cases, serve index.html.\n    // No any other endpoints past this will execute\n    app.use(fallback('index.html', { root }));\n\n    server.listen(port);\n    this._port = port;\n\n    // important: we use the string of the following message for the http.e2e.ts. if you change the message,\n    // please make sure you change the `HTTP_SERVER_READY_MSG` const.\n    this.logger.info(`UI server of ${this.uiRootExtension} is listening to port ${port}`);\n\n    this.setReady();\n  }\n\n  getPluginsComponents() {\n    return this.plugins.map((plugin) => plugin.render);\n  }\n\n  private async setupServerSideRendering({ root, port, app }: { root: string; port: number; app: Express }) {\n    if (!this.buildOptions?.ssr) return;\n\n    const ssrMiddleware = await createSsrMiddleware({\n      root,\n      port,\n      title: this.uiRoot.name,\n      logger: this.logger,\n    });\n\n    if (!ssrMiddleware) {\n      this.logger.warn('[ssr] middleware failed setup');\n      return;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n    app.get('*', ssrMiddleware);\n    this.logger.debug('[ssr] serving for \"*\"');\n  }\n\n  private async configureProxy(app: Express, server: Server) {\n    const proxServer = httpProxy.createProxyServer();\n    proxServer.on('error', (e) => this.logger.error(e.message));\n    const proxyEntries = await this.getProxyFromPlugins();\n    server.on('upgrade', function (req, socket, head) {\n      const entry = proxyEntries.find((proxy) => proxy.context.some((item) => item === req.url));\n      if (!entry) return;\n      proxServer.ws(req, socket, head, {\n        target: entry.target,\n      });\n    });\n\n    proxyEntries.forEach((entry) => {\n      entry.context.forEach((route) => {\n        app.use(`${route}/*`, (req, res) => {\n          proxServer.web(req, res, { ...entry, target: `${entry.target}/${req.originalUrl}` });\n        });\n      });\n    });\n  }\n\n  /**\n   * start a UI dev server.\n   */\n  async dev({ portRange }: StartOptions = {}) {\n    const devServerPort = await this.selectPort(portRange);\n    await this.start({ portRange: [4100, 4200] });\n    const expressAppPort = this._port;\n\n    const config = await this.getDevConfig();\n    const compiler = webpack(config);\n    const devServerConfig = await this.getDevServerConfig(devServerPort, expressAppPort, config.devServer);\n    // @ts-ignore in the capsules it throws an error about compatibilities issues between webpack.compiler and webpackDevServer/webpack/compiler\n    const devServer = new WebpackDevServer(devServerConfig, compiler);\n\n    await devServer.start();\n    this._port = devServerPort;\n    return devServer;\n  }\n\n  private async selectPort(portRange?: number[] | number) {\n    return Port.getPortFromRange(portRange || [3100, 3200]);\n  }\n\n  private async getProxyFromPlugins(): Promise<ProxyEntry[]> {\n    const proxiesByPlugin = this.plugins.map((plugin) => {\n      return plugin.getProxy ? plugin.getProxy() : [];\n    });\n\n    return flatten(await Promise.all(proxiesByPlugin));\n  }\n\n  private async getProxy(port = 4000) {\n    const proxyEntries = await this.getProxyFromPlugins();\n\n    const gqlProxies: ProxyEntry[] = [\n      {\n        context: ['/graphql', '/api'],\n        target: `http://${this.host}:${port}`,\n        changeOrigin: true,\n      },\n      {\n        context: ['/subscriptions'],\n        target: `ws://${this.host}:${port}`,\n        ws: true,\n      },\n    ];\n\n    return gqlProxies.concat(proxyEntries);\n  }\n\n  private async getDevServerConfig(\n    appPort: number,\n    gqlPort: number,\n    config?: WdsConfiguration\n  ): Promise<WdsConfiguration> {\n    const proxy = await this.getProxy(gqlPort);\n    const devServerConf = { ...config, proxy, port: appPort };\n\n    return devServerConf;\n  }\n\n  static create(props: UIServerProps) {\n    return new UIServer(\n      props.graphql,\n      props.express,\n      props.ui,\n      props.uiRoot,\n      props.uiRootExtension,\n      props.logger,\n      props.publicDir,\n      props.startPlugins\n    );\n  }\n}\n"]}
+{"version":3,"sources":["ui-server.ts"],"names":["UIServer","constructor","graphql","expressExtension","ui","uiRoot","uiRootExtension","logger","publicDir","plugins","Promise","resolve","setReady","getName","name","port","_port","host","fullUrl","buildOptions","getDevConfig","aspects","resolveAspects","UIRuntime","path","generateRoot","whenReady","all","startPromise","map","x","start","portRange","app","createApp","root","server","createServer","configureProxy","use","express","static","index","Port","getPortFromRange","setupServerSideRendering","listen","info","getPluginsComponents","plugin","render","ssr","ssrMiddleware","title","warn","get","debug","proxServer","httpProxy","createProxyServer","on","e","error","message","proxyEntries","getProxyFromPlugins","req","socket","head","entry","find","proxy","context","some","item","url","ws","target","forEach","route","res","web","originalUrl","dev","devServerPort","selectPort","expressAppPort","config","compiler","devServerConfig","getDevServerConfig","devServer","WebpackDevServer","proxiesByPlugin","getProxy","gqlProxies","changeOrigin","concat","appPort","gqlPort","devServerConf","create","props","startPlugins"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAIA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;;;;;AAoBO,MAAMA,QAAN,CAAe;AACpBC,EAAAA,WAAW,CACDC,OADC,EAEDC,gBAFC,EAGDC,EAHC,EAIDC,MAJC,EAKDC,eALC,EAMDC,MANC,EAODC,SAPC,EAQDC,OARC,EAST;AAAA,SARQP,OAQR,GARQA,OAQR;AAAA,SAPQC,gBAOR,GAPQA,gBAOR;AAAA,SANQC,EAMR,GANQA,EAMR;AAAA,SALQC,MAKR,GALQA,MAKR;AAAA,SAJQC,eAIR,GAJQA,eAIR;AAAA,SAHQC,MAGR,GAHQA,MAGR;AAAA,SAFQC,SAER,GAFQA,SAER;AAAA,SADQC,OACR,GADQA,OACR;AAAA,mDAMc,CANd;AAAA;AAAA,0DAqCqB,IAAIC,OAAJ,CAAmBC,OAAD,IAAc,KAAKC,QAAL,GAAgBD,OAAhD,CArCrB;AAAE;;AAEJE,EAAAA,OAAO,GAAG;AACR,WAAO,KAAKR,MAAL,CAAYS,IAAnB;AACD;;AAIO,MAAJC,IAAI,GAAG;AACT,WAAO,KAAKC,KAAZ;AACD;AAED;;;AACQ,MAAJC,IAAI,GAAG;AACT,WAAO,WAAP;AACD;AAED;;;AACW,MAAPC,OAAO,GAAG;AACZ,UAAMH,IAAI,GAAG,KAAKA,IAAL,KAAc,EAAd,GAAoB,IAAG,KAAKA,IAAK,EAAjC,GAAqC,EAAlD;AACA,WAAQ,UAAS,KAAKE,IAAK,GAAEF,IAAK,EAAlC;AACD;;AAEe,MAAZI,YAAY,GAAG;AACjB,WAAO,KAAKd,MAAL,CAAYc,YAAnB;AACD;AAED;AACF;AACA;;;AACoB,QAAZC,YAAY,GAAG;AACnB,UAAMC,OAAO,GAAG,MAAM,KAAKhB,MAAL,CAAYiB,cAAZ,CAA2BC,gBAAUT,IAArC,CAAtB;AAEA,WAAO,6BAAU,KAAKT,MAAL,CAAYmB,IAAtB,EAA4B,CAAC,MAAM,KAAKpB,EAAL,CAAQqB,YAAR,CAAqBJ,OAArB,EAA8B,KAAKf,eAAnC,CAAP,CAA5B,EAAyF,KAAKD,MAAL,CAAYS,IAArG,CAAP;AACD;;AAIY,MAATY,SAAS,GAAG;AACd,WAAOhB,OAAO,CAACiB,GAAR,CAAY,CAAC,KAAKC,YAAN,EAAoB,GAAG,KAAKnB,OAAL,CAAaoB,GAAb,CAAkBC,CAAD,IAAOA,CAAP,aAAOA,CAAP,uBAAOA,CAAC,CAAEJ,SAA3B,CAAvB,CAAZ,CAAP;AACD;AAED;AACF;AACA;;;AACa,QAALK,KAAK,CAAC;AAAEC,IAAAA;AAAF,MAA8B,EAA/B,EAAmC;AAC5C,UAAMC,GAAG,GAAG,KAAK9B,gBAAL,CAAsB+B,SAAtB,EAAZ;AACA,UAAM1B,SAAS,GAAI,IAAG,KAAKA,SAAU,EAArC;AACA,UAAM2B,IAAI,GAAG,kBAAK,KAAK9B,MAAL,CAAYmB,IAAjB,EAAuBhB,SAAvB,CAAb;AACA,UAAM4B,MAAM,GAAG,MAAM,KAAKlC,OAAL,CAAamC,YAAb,CAA0B;AAAEJ,MAAAA;AAAF,KAA1B,CAArB,CAJ4C,CAM5C;;AACA,UAAM,KAAKK,cAAL,CAAoBL,GAApB,EAAyBG,MAAzB,CAAN,CAP4C,CAS5C;AACA;;AACAH,IAAAA,GAAG,CAACM,GAAJ,CAAQC,mBAAQC,MAAR,CAAeN,IAAf,EAAqB;AAAEO,MAAAA,KAAK,EAAE;AAAT,KAArB,CAAR;AAEA,UAAM3B,IAAI,GAAG,MAAM4B,uBAAKC,gBAAL,CAAsBZ,SAAS,IAAI,CAAC,IAAD,EAAO,IAAP,CAAnC,CAAnB;AAEA,UAAM,KAAKa,wBAAL,CAA8B;AAAEV,MAAAA,IAAF;AAAQpB,MAAAA,IAAR;AAAckB,MAAAA;AAAd,KAA9B,CAAN,CAf4C,CAiB5C;AACA;;AACAA,IAAAA,GAAG,CAACM,GAAJ,CAAQ,0CAAS,YAAT,EAAuB;AAAEJ,MAAAA;AAAF,KAAvB,CAAR;AAEAC,IAAAA,MAAM,CAACU,MAAP,CAAc/B,IAAd;AACA,SAAKC,KAAL,GAAaD,IAAb,CAtB4C,CAwB5C;AACA;;AACA,SAAKR,MAAL,CAAYwC,IAAZ,CAAkB,gBAAe,KAAKzC,eAAgB,yBAAwBS,IAAK,EAAnF;AAEA,SAAKH,QAAL;AACD;;AAEDoC,EAAAA,oBAAoB,GAAG;AACrB,WAAO,KAAKvC,OAAL,CAAaoB,GAAb,CAAkBoB,MAAD,IAAYA,MAAM,CAACC,MAApC,CAAP;AACD;;AAEqC,QAAxBL,wBAAwB,CAAC;AAAEV,IAAAA,IAAF;AAAQpB,IAAAA,IAAR;AAAckB,IAAAA;AAAd,GAAD,EAAoE;AAAA;;AACxG,QAAI,wBAAC,KAAKd,YAAN,+CAAC,mBAAmBgC,GAApB,CAAJ,EAA6B;AAE7B,UAAMC,aAAa,GAAG,MAAM,0CAAoB;AAC9CjB,MAAAA,IAD8C;AAE9CpB,MAAAA,IAF8C;AAG9CsC,MAAAA,KAAK,EAAE,KAAKhD,MAAL,CAAYS,IAH2B;AAI9CP,MAAAA,MAAM,EAAE,KAAKA;AAJiC,KAApB,CAA5B;;AAOA,QAAI,CAAC6C,aAAL,EAAoB;AAClB,WAAK7C,MAAL,CAAY+C,IAAZ,CAAiB,+BAAjB;AACA;AACD,KAbuG,CAexG;;;AACArB,IAAAA,GAAG,CAACsB,GAAJ,CAAQ,GAAR,EAAaH,aAAb;AACA,SAAK7C,MAAL,CAAYiD,KAAZ,CAAkB,uBAAlB;AACD;;AAE2B,QAAdlB,cAAc,CAACL,GAAD,EAAeG,MAAf,EAA+B;AACzD,UAAMqB,UAAU,GAAGC,qBAAUC,iBAAV,EAAnB;;AACAF,IAAAA,UAAU,CAACG,EAAX,CAAc,OAAd,EAAwBC,CAAD,IAAO,KAAKtD,MAAL,CAAYuD,KAAZ,CAAkBD,CAAC,CAACE,OAApB,CAA9B;AACA,UAAMC,YAAY,GAAG,MAAM,KAAKC,mBAAL,EAA3B,CAHyD,CAKzD;;AACA7B,IAAAA,MAAM,CAACwB,EAAP,CAAU,SAAV,EAAqB,UAAUM,GAAV,EAAeC,MAAf,EAAuBC,IAAvB,EAA6B;AAChD,YAAMC,KAAK,GAAGL,YAAY,CAACM,IAAb,CAAmBC,KAAD,IAAWA,KAAK,CAACC,OAAN,CAAcC,IAAd,CAAoBC,IAAD,IAAUA,IAAI,KAAKR,GAAG,CAACS,GAA1C,CAA7B,CAAd;AACA,UAAI,CAACN,KAAL,EAAY;AACZZ,MAAAA,UAAU,CAACmB,EAAX,CAAcV,GAAd,EAAmBC,MAAnB,EAA2BC,IAA3B,EAAiC;AAC/BS,QAAAA,MAAM,EAAER,KAAK,CAACQ;AADiB,OAAjC;AAGD,KAND;AAQAb,IAAAA,YAAY,CAACc,OAAb,CAAsBT,KAAD,IAAW;AAC9BA,MAAAA,KAAK,CAACG,OAAN,CAAcM,OAAd,CAAuBC,KAAD,IAAW;AAC/B9C,QAAAA,GAAG,CAACM,GAAJ,CAAS,GAAEwC,KAAM,IAAjB,EAAsB,CAACb,GAAD,EAAMc,GAAN,KAAc;AAClCvB,UAAAA,UAAU,CAACwB,GAAX,CAAef,GAAf,EAAoBc,GAApB,kCAA8BX,KAA9B;AAAqCQ,YAAAA,MAAM,EAAG,GAAER,KAAK,CAACQ,MAAO,IAAGX,GAAG,CAACgB,WAAY;AAAhF;AACD,SAFD;AAGD,OAJD;AAKD,KAND;AAOD;AAED;AACF;AACA;;;AACW,QAAHC,GAAG,CAAC;AAAEnD,IAAAA;AAAF,MAA8B,EAA/B,EAAmC;AAC1C,UAAMoD,aAAa,GAAG,MAAM,KAAKC,UAAL,CAAgBrD,SAAhB,CAA5B;AACA,UAAM,KAAKD,KAAL,CAAW;AAAEC,MAAAA,SAAS,EAAE,CAAC,IAAD,EAAO,IAAP;AAAb,KAAX,CAAN;AACA,UAAMsD,cAAc,GAAG,KAAKtE,KAA5B;AAEA,UAAMuE,MAAM,GAAG,MAAM,KAAKnE,YAAL,EAArB;AACA,UAAMoE,QAAQ,GAAG,wBAAQD,MAAR,CAAjB;AACA,UAAME,eAAe,GAAG,MAAM,KAAKC,kBAAL,CAAwBN,aAAxB,EAAuCE,cAAvC,EAAuDC,MAAM,CAACI,SAA9D,CAA9B,CAP0C,CAQ1C;;AACA,UAAMA,SAAS,GAAG,KAAIC,2BAAJ,EAAqBH,eAArB,EAAsCD,QAAtC,CAAlB;AAEA,UAAMG,SAAS,CAAC5D,KAAV,EAAN;AACA,SAAKf,KAAL,GAAaoE,aAAb;AACA,WAAOO,SAAP;AACD;;AAEuB,QAAVN,UAAU,CAACrD,SAAD,EAAgC;AACtD,WAAOW,uBAAKC,gBAAL,CAAsBZ,SAAS,IAAI,CAAC,IAAD,EAAO,IAAP,CAAnC,CAAP;AACD;;AAEgC,QAAnBiC,mBAAmB,GAA0B;AACzD,UAAM4B,eAAe,GAAG,KAAKpF,OAAL,CAAaoB,GAAb,CAAkBoB,MAAD,IAAY;AACnD,aAAOA,MAAM,CAAC6C,QAAP,GAAkB7C,MAAM,CAAC6C,QAAP,EAAlB,GAAsC,EAA7C;AACD,KAFuB,CAAxB;AAIA,WAAO,uBAAQ,MAAMpF,OAAO,CAACiB,GAAR,CAAYkE,eAAZ,CAAd,CAAP;AACD;;AAEqB,QAARC,QAAQ,CAAC/E,IAAI,GAAG,IAAR,EAAc;AAClC,UAAMiD,YAAY,GAAG,MAAM,KAAKC,mBAAL,EAA3B;AAEA,UAAM8B,UAAwB,GAAG,CAC/B;AACEvB,MAAAA,OAAO,EAAE,CAAC,UAAD,EAAa,MAAb,CADX;AAEEK,MAAAA,MAAM,EAAG,UAAS,KAAK5D,IAAK,IAAGF,IAAK,EAFtC;AAGEiF,MAAAA,YAAY,EAAE;AAHhB,KAD+B,EAM/B;AACExB,MAAAA,OAAO,EAAE,CAAC,gBAAD,CADX;AAEEK,MAAAA,MAAM,EAAG,QAAO,KAAK5D,IAAK,IAAGF,IAAK,EAFpC;AAGE6D,MAAAA,EAAE,EAAE;AAHN,KAN+B,CAAjC;AAaA,WAAOmB,UAAU,CAACE,MAAX,CAAkBjC,YAAlB,CAAP;AACD;;AAE+B,QAAlB0B,kBAAkB,CAC9BQ,OAD8B,EAE9BC,OAF8B,EAG9BZ,MAH8B,EAIH;AAC3B,UAAMhB,KAAK,GAAG,MAAM,KAAKuB,QAAL,CAAcK,OAAd,CAApB;;AACA,UAAMC,aAAa,mCAAQb,MAAR;AAAgBhB,MAAAA,KAAhB;AAAuBxD,MAAAA,IAAI,EAAEmF;AAA7B,MAAnB;;AAEA,WAAOE,aAAP;AACD;;AAEY,SAANC,MAAM,CAACC,KAAD,EAAuB;AAClC,WAAO,IAAItG,QAAJ,CACLsG,KAAK,CAACpG,OADD,EAELoG,KAAK,CAAC9D,OAFD,EAGL8D,KAAK,CAAClG,EAHD,EAILkG,KAAK,CAACjG,MAJD,EAKLiG,KAAK,CAAChG,eALD,EAMLgG,KAAK,CAAC/F,MAND,EAOL+F,KAAK,CAAC9F,SAPD,EAQL8F,KAAK,CAACC,YARD,CAAP;AAUD;;AA7MmB","sourcesContent":["import { flatten } from 'lodash';\nimport { ExpressMain } from '@teambit/express';\nimport { GraphqlMain } from '@teambit/graphql';\nimport { Logger } from '@teambit/logger';\nimport express, { Express } from 'express';\nimport fallback from 'express-history-api-fallback';\nimport { Port } from '@teambit/toolbox.network.get-port';\nimport { Server } from 'http';\nimport httpProxy from 'http-proxy';\nimport { join } from 'path';\nimport webpack from 'webpack';\nimport WebpackDevServer, { Configuration as WdsConfiguration } from 'webpack-dev-server';\nimport { createSsrMiddleware } from './ssr-middleware';\nimport { StartPlugin } from './start-plugin';\nimport { ProxyEntry, UIRoot } from './ui-root';\nimport { UIRuntime } from './ui.aspect';\nimport { UiMain } from './ui.main.runtime';\n\nimport { devConfig } from './webpack/webpack.dev.config';\n\nexport type UIServerProps = {\n  graphql: GraphqlMain;\n  express: ExpressMain;\n  ui: UiMain;\n  uiRoot: UIRoot;\n  uiRootExtension: string;\n  logger: Logger;\n  publicDir: string;\n  startPlugins: StartPlugin[];\n};\n\nexport type StartOptions = {\n  /**\n   * port range for the UI server to bind. default is a port range of 4000-4200.\n   */\n  portRange?: number[] | number;\n};\n\nexport class UIServer {\n  constructor(\n    private graphql: GraphqlMain,\n    private expressExtension: ExpressMain,\n    private ui: UiMain,\n    private uiRoot: UIRoot,\n    private uiRootExtension: string,\n    private logger: Logger,\n    private publicDir: string,\n    private plugins: StartPlugin[]\n  ) {}\n\n  getName() {\n    return this.uiRoot.name;\n  }\n\n  private _port = 0;\n\n  get port() {\n    return this._port;\n  }\n\n  /** the hostname for the server to listen at. Currently statically 'localhost' */\n  get host() {\n    return 'localhost';\n  }\n\n  /** the server listens at this url */\n  get fullUrl() {\n    const port = this.port !== 80 ? `:${this.port}` : '';\n    return `http://${this.host}${port}`;\n  }\n\n  get buildOptions() {\n    return this.uiRoot.buildOptions;\n  }\n\n  /**\n   * get the webpack configuration of the UI server.\n   */\n  async getDevConfig() {\n    const aspects = await this.uiRoot.resolveAspects(UIRuntime.name);\n\n    return devConfig(this.uiRoot.path, [await this.ui.generateRoot(aspects, this.uiRootExtension)], this.uiRoot.name);\n  }\n\n  private setReady: () => void;\n  private startPromise = new Promise<void>((resolve) => (this.setReady = resolve));\n  get whenReady() {\n    return Promise.all([this.startPromise, ...this.plugins.map((x) => x?.whenReady)]);\n  }\n\n  /**\n   * start a UI server.\n   */\n  async start({ portRange }: StartOptions = {}) {\n    const app = this.expressExtension.createApp();\n    const publicDir = `/${this.publicDir}`;\n    const root = join(this.uiRoot.path, publicDir);\n    const server = await this.graphql.createServer({ app });\n\n    // set up proxy, for things like preview, e.g. '/preview/teambit.react/react'\n    await this.configureProxy(app, server);\n\n    // pass through files from public /folder:\n    // setting `index: false` so index.html will be served by the fallback() middleware\n    app.use(express.static(root, { index: false }));\n\n    const port = await Port.getPortFromRange(portRange || [3100, 3200]);\n\n    await this.setupServerSideRendering({ root, port, app });\n\n    // in any and all other cases, serve index.html.\n    // No any other endpoints past this will execute\n    app.use(fallback('index.html', { root }));\n\n    server.listen(port);\n    this._port = port;\n\n    // important: we use the string of the following message for the http.e2e.ts. if you change the message,\n    // please make sure you change the `HTTP_SERVER_READY_MSG` const.\n    this.logger.info(`UI server of ${this.uiRootExtension} is listening to port ${port}`);\n\n    this.setReady();\n  }\n\n  getPluginsComponents() {\n    return this.plugins.map((plugin) => plugin.render);\n  }\n\n  private async setupServerSideRendering({ root, port, app }: { root: string; port: number; app: Express }) {\n    if (!this.buildOptions?.ssr) return;\n\n    const ssrMiddleware = await createSsrMiddleware({\n      root,\n      port,\n      title: this.uiRoot.name,\n      logger: this.logger,\n    });\n\n    if (!ssrMiddleware) {\n      this.logger.warn('[ssr] middleware failed setup');\n      return;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n    app.get('*', ssrMiddleware);\n    this.logger.debug('[ssr] serving for \"*\"');\n  }\n\n  private async configureProxy(app: Express, server: Server) {\n    const proxServer = httpProxy.createProxyServer();\n    proxServer.on('error', (e) => this.logger.error(e.message));\n    const proxyEntries = await this.getProxyFromPlugins();\n\n    // TODO - should use https://github.com/chimurai/http-proxy-middleware\n    server.on('upgrade', function (req, socket, head) {\n      const entry = proxyEntries.find((proxy) => proxy.context.some((item) => item === req.url));\n      if (!entry) return;\n      proxServer.ws(req, socket, head, {\n        target: entry.target,\n      });\n    });\n\n    proxyEntries.forEach((entry) => {\n      entry.context.forEach((route) => {\n        app.use(`${route}/*`, (req, res) => {\n          proxServer.web(req, res, { ...entry, target: `${entry.target}/${req.originalUrl}` });\n        });\n      });\n    });\n  }\n\n  /**\n   * start a UI dev server.\n   */\n  async dev({ portRange }: StartOptions = {}) {\n    const devServerPort = await this.selectPort(portRange);\n    await this.start({ portRange: [4100, 4200] });\n    const expressAppPort = this._port;\n\n    const config = await this.getDevConfig();\n    const compiler = webpack(config);\n    const devServerConfig = await this.getDevServerConfig(devServerPort, expressAppPort, config.devServer);\n    // @ts-ignore in the capsules it throws an error about compatibilities issues between webpack.compiler and webpackDevServer/webpack/compiler\n    const devServer = new WebpackDevServer(devServerConfig, compiler);\n\n    await devServer.start();\n    this._port = devServerPort;\n    return devServer;\n  }\n\n  private async selectPort(portRange?: number[] | number) {\n    return Port.getPortFromRange(portRange || [3100, 3200]);\n  }\n\n  private async getProxyFromPlugins(): Promise<ProxyEntry[]> {\n    const proxiesByPlugin = this.plugins.map((plugin) => {\n      return plugin.getProxy ? plugin.getProxy() : [];\n    });\n\n    return flatten(await Promise.all(proxiesByPlugin));\n  }\n\n  private async getProxy(port = 4000) {\n    const proxyEntries = await this.getProxyFromPlugins();\n\n    const gqlProxies: ProxyEntry[] = [\n      {\n        context: ['/graphql', '/api'],\n        target: `http://${this.host}:${port}`,\n        changeOrigin: true,\n      },\n      {\n        context: ['/subscriptions'],\n        target: `ws://${this.host}:${port}`,\n        ws: true,\n      },\n    ];\n\n    return gqlProxies.concat(proxyEntries);\n  }\n\n  private async getDevServerConfig(\n    appPort: number,\n    gqlPort: number,\n    config?: WdsConfiguration\n  ): Promise<WdsConfiguration> {\n    const proxy = await this.getProxy(gqlPort);\n    const devServerConf = { ...config, proxy, port: appPort };\n\n    return devServerConf;\n  }\n\n  static create(props: UIServerProps) {\n    return new UIServer(\n      props.graphql,\n      props.express,\n      props.ui,\n      props.uiRoot,\n      props.uiRootExtension,\n      props.logger,\n      props.publicDir,\n      props.startPlugins\n    );\n  }\n}\n"]}

package/dist/ui.ui.runtime.d.ts

@@ -49,7 +49,8 @@ export declare class UiUI {
      */
     registerContext<T>(context: ComponentType<ContextProps<T>>): void;
     registerRoot(uiRoot: UIRootFactory): void;
-    registerRenderHooks<T, Y>(hooks: RenderPlugins<T, Y>): void;
+    registerRenderHooks<T, Y>(plugins: RenderPlugins<T, Y>): void;
+    private getLifecyclePlugins;
     private getRoot;
     static slots: ((registerFn: () => string) => SlotRegistry<React.ReactNode>)[];
     static dependencies: import("@teambit/harmony").Aspect[];

package/dist/ui.ui.runtime.js

@@ -6,8 +6,6 @@ require("core-js/modules/es.array.iterator.js");
 
 require("core-js/modules/es.promise.js");
 
-require("core-js/modules/es.regexp.exec.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -125,30 +123,23 @@ class UiUI {
     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 routes = this.router.renderRoutes(uiRoot.routes);
     const hudItems = this.hudSlot.values();
-    const lifecycleHooks = this.renderPluginsSlot.toArray();
-    const reactSsr = new (_reactSsr().ReactSSR)(lifecycleHooks);
+    const lifecyclePlugins = this.getLifecyclePlugins();
+    const reactSsr = new (_reactSsr().ReactSSR)(lifecyclePlugins);
     await reactSsr.renderBrowser( /*#__PURE__*/_react().default.createElement(_clientContext().ClientContext, null, hudItems, routes));
   }
   /** render dehydrated server-side */
 
 
   async renderSsr(rootExtension, ssrContent) {
-    var _ssrContent$browser;
-
     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: ssrContent === null || ssrContent === void 0 ? void 0 : (_ssrContent$browser = ssrContent.browser) === null || _ssrContent$browser === void 0 ? void 0 : _ssrContent$browser.location.url
-    });
+    const routes = this.router.renderRoutes(uiRoot.routes);
     const hudItems = this.hudSlot.values();
-    const lifecycleHooks = this.renderPluginsSlot.toArray();
-    const reactSsr = new (_reactSsr().ReactSSR)(lifecycleHooks);
+    const lifecyclePlugins = this.getLifecyclePlugins();
+    const reactSsr = new (_reactSsr().ReactSSR)(lifecyclePlugins);
     const fullHtml = await reactSsr.renderServer( /*#__PURE__*/_react().default.createElement(_clientContext().ClientContext, null, hudItems, routes), ssrContent);
     return fullHtml;
   }
@@ -169,8 +160,15 @@ class UiUI {
     return this.uiRootSlot.register(uiRoot);
   }
 
-  registerRenderHooks(hooks) {
-    return this.renderPluginsSlot.register(hooks);
+  registerRenderHooks(plugins) {
+    return this.renderPluginsSlot.register(plugins);
+  }
+
+  getLifecyclePlugins() {
+    const lifecyclePlugins = this.renderPluginsSlot.toArray(); // react-router should register its plugin, when we can reverse it's dependency to depend on Ui
+
+    lifecyclePlugins.unshift([_reactRouter().ReactRouterAspect.id, this.router.renderPlugin]);
+    return lifecyclePlugins;
   }
 
   getRoot(rootExtension) {

package/dist/ui.ui.runtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ui.ui.runtime.tsx"],"names":["UiUI","constructor","router","uiRootSlot","hudSlot","renderPluginsSlot","element","register","render","rootExtension","rootFactory","getRoot","Error","uiRoot","initialLocation","window","location","pathname","search","hash","routes","renderRoutes","hudItems","values","lifecycleHooks","toArray","reactSsr","ReactSSR","renderBrowser","renderSsr","ssrContent","browser","url","fullHtml","renderServer","registerContext","context","reactContext","registerRoot","registerRenderHooks","hooks","get","provider","GraphqlUi","config","renderLifecycleSlot","uiUi","renderPlugins","Slot","withType","GraphqlAspect","ReactRouterAspect","UIRuntime","UIAspect","addRuntime"],"mappings":"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","sourcesContent":["import type { GraphqlUI } from '@teambit/graphql';\nimport { GraphqlAspect } from '@teambit/graphql';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport type { ReactRouterUI } from '@teambit/react-router';\nimport { ReactRouterAspect } from '@teambit/react-router';\n\nimport React, { ReactNode, ComponentType } from 'react';\n\nimport { UIRootFactory } from './ui-root.ui';\nimport { UIAspect, UIRuntime } from './ui.aspect';\nimport { ClientContext } from './ui/client-context';\nimport type { SsrContent } from './react-ssr/ssr-content';\nimport { ContextProps, RenderPlugins } from './react-ssr/render-lifecycle';\nimport { ReactSSR } from './react-ssr/react-ssr';\n\ntype HudSlot = SlotRegistry<ReactNode>;\ntype RenderPluginsSlot = SlotRegistry<RenderPlugins>;\ntype UIRootRegistry = SlotRegistry<UIRootFactory>;\n\n/**\n * extension\n */\nexport class UiUI {\n  constructor(\n    /**\n     * react-router extension.\n     */\n    private router: ReactRouterUI,\n    /**\n     * ui root registry.\n     */\n    private uiRootSlot: UIRootRegistry,\n    /** slot for overlay ui elements */\n    private hudSlot: HudSlot,\n    /** hooks into the ssr render process */\n    private renderPluginsSlot: RenderPluginsSlot\n  ) {}\n\n  /** render and rehydrate client-side */\n  async render(rootExtension: string): Promise<void> {\n    const rootFactory = this.getRoot(rootExtension);\n    if (!rootFactory) throw new Error(`root: ${rootExtension} was not found`);\n    const uiRoot = rootFactory();\n    const initialLocation = `${window.location.pathname}${window.location.search}${window.location.hash}`;\n    const routes = this.router.renderRoutes(uiRoot.routes, { initialLocation });\n    const hudItems = this.hudSlot.values();\n    const lifecycleHooks = this.renderPluginsSlot.toArray();\n\n    const reactSsr = new ReactSSR(lifecycleHooks);\n    await reactSsr.renderBrowser(\n      <ClientContext>\n        {hudItems}\n        {routes}\n      </ClientContext>\n    );\n  }\n\n  /** render dehydrated server-side */\n  async renderSsr(rootExtension: string, ssrContent: SsrContent): Promise<string> {\n    const rootFactory = this.getRoot(rootExtension);\n    if (!rootFactory) throw new Error(`root: ${rootExtension} was not found`);\n\n    const uiRoot = rootFactory();\n    const routes = this.router.renderRoutes(uiRoot.routes, { initialLocation: ssrContent?.browser?.location.url });\n    const hudItems = this.hudSlot.values();\n\n    const lifecycleHooks = this.renderPluginsSlot.toArray();\n\n    const reactSsr = new ReactSSR(lifecycleHooks);\n    const fullHtml = await reactSsr.renderServer(\n      <ClientContext>\n        {hudItems}\n        {routes}\n      </ClientContext>,\n      ssrContent\n    );\n\n    return fullHtml;\n  }\n\n  /** adds elements to the Heads Up Display */\n  registerHudItem = (element: ReactNode) => {\n    this.hudSlot.register(element);\n  };\n\n  /**\n   * adds global context at the ui root\n   * @deprecated replace with `.registerRenderHooks({ reactContext })`.\n   */\n  registerContext<T>(context: ComponentType<ContextProps<T>>) {\n    this.renderPluginsSlot.register({\n      reactContext: context,\n    });\n  }\n\n  registerRoot(uiRoot: UIRootFactory) {\n    return this.uiRootSlot.register(uiRoot);\n  }\n\n  registerRenderHooks<T, Y>(hooks: RenderPlugins<T, Y>) {\n    return this.renderPluginsSlot.register(hooks);\n  }\n\n  private getRoot(rootExtension: string) {\n    return this.uiRootSlot.get(rootExtension);\n  }\n\n  static slots = [Slot.withType<UIRootFactory>(), Slot.withType<ReactNode>(), Slot.withType<RenderPlugins>()];\n\n  static dependencies = [GraphqlAspect, ReactRouterAspect];\n\n  static runtime = UIRuntime;\n\n  static async provider(\n    [GraphqlUi, router]: [GraphqlUI, ReactRouterUI],\n    config,\n    [uiRootSlot, hudSlot, renderLifecycleSlot]: [UIRootRegistry, HudSlot, RenderPluginsSlot]\n  ) {\n    const uiUi = new UiUI(router, uiRootSlot, hudSlot, renderLifecycleSlot);\n\n    uiUi.registerRenderHooks(GraphqlUi.renderPlugins);\n\n    return uiUi;\n  }\n}\n\nUIAspect.addRuntime(UiUI);\n"]}
+{"version":3,"sources":["ui.ui.runtime.tsx"],"names":["UiUI","constructor","router","uiRootSlot","hudSlot","renderPluginsSlot","element","register","render","rootExtension","rootFactory","getRoot","Error","uiRoot","routes","renderRoutes","hudItems","values","lifecyclePlugins","getLifecyclePlugins","reactSsr","ReactSSR","renderBrowser","renderSsr","ssrContent","fullHtml","renderServer","registerContext","context","reactContext","registerRoot","registerRenderHooks","plugins","toArray","unshift","ReactRouterAspect","id","renderPlugin","get","provider","GraphqlUi","config","renderLifecycleSlot","uiUi","renderPlugins","Slot","withType","GraphqlAspect","UIRuntime","UIAspect","addRuntime"],"mappings":"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","sourcesContent":["import type { GraphqlUI } from '@teambit/graphql';\nimport { GraphqlAspect } from '@teambit/graphql';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport type { ReactRouterUI } from '@teambit/react-router';\nimport { ReactRouterAspect } from '@teambit/react-router';\n\nimport React, { ReactNode, ComponentType } from 'react';\n\nimport { UIRootFactory } from './ui-root.ui';\nimport { UIAspect, UIRuntime } from './ui.aspect';\nimport { ClientContext } from './ui/client-context';\nimport type { SsrContent } from './react-ssr/ssr-content';\nimport { ContextProps, RenderPlugins } from './react-ssr/render-lifecycle';\nimport { ReactSSR } from './react-ssr/react-ssr';\n\ntype HudSlot = SlotRegistry<ReactNode>;\ntype RenderPluginsSlot = SlotRegistry<RenderPlugins>;\ntype UIRootRegistry = SlotRegistry<UIRootFactory>;\n\n/**\n * extension\n */\nexport class UiUI {\n  constructor(\n    /**\n     * react-router extension.\n     */\n    private router: ReactRouterUI,\n    /**\n     * ui root registry.\n     */\n    private uiRootSlot: UIRootRegistry,\n    /** slot for overlay ui elements */\n    private hudSlot: HudSlot,\n    /** hooks into the ssr render process */\n    private renderPluginsSlot: RenderPluginsSlot\n  ) {}\n\n  /** render and rehydrate client-side */\n  async render(rootExtension: string): Promise<void> {\n    const rootFactory = this.getRoot(rootExtension);\n    if (!rootFactory) throw new Error(`root: ${rootExtension} was not found`);\n    const uiRoot = rootFactory();\n    const routes = this.router.renderRoutes(uiRoot.routes);\n    const hudItems = this.hudSlot.values();\n    const lifecyclePlugins = this.getLifecyclePlugins();\n\n    const reactSsr = new ReactSSR(lifecyclePlugins);\n    await reactSsr.renderBrowser(\n      <ClientContext>\n        {hudItems}\n        {routes}\n      </ClientContext>\n    );\n  }\n\n  /** render dehydrated server-side */\n  async renderSsr(rootExtension: string, ssrContent: SsrContent): Promise<string> {\n    const rootFactory = this.getRoot(rootExtension);\n    if (!rootFactory) throw new Error(`root: ${rootExtension} was not found`);\n\n    const uiRoot = rootFactory();\n    const routes = this.router.renderRoutes(uiRoot.routes);\n    const hudItems = this.hudSlot.values();\n    const lifecyclePlugins = this.getLifecyclePlugins();\n\n    const reactSsr = new ReactSSR(lifecyclePlugins);\n    const fullHtml = await reactSsr.renderServer(\n      <ClientContext>\n        {hudItems}\n        {routes}\n      </ClientContext>,\n      ssrContent\n    );\n\n    return fullHtml;\n  }\n\n  /** adds elements to the Heads Up Display */\n  registerHudItem = (element: ReactNode) => {\n    this.hudSlot.register(element);\n  };\n\n  /**\n   * adds global context at the ui root\n   * @deprecated replace with `.registerRenderHooks({ reactContext })`.\n   */\n  registerContext<T>(context: ComponentType<ContextProps<T>>) {\n    this.renderPluginsSlot.register({\n      reactContext: context,\n    });\n  }\n\n  registerRoot(uiRoot: UIRootFactory) {\n    return this.uiRootSlot.register(uiRoot);\n  }\n\n  registerRenderHooks<T, Y>(plugins: RenderPlugins<T, Y>) {\n    return this.renderPluginsSlot.register(plugins);\n  }\n\n  private getLifecyclePlugins() {\n    const lifecyclePlugins = this.renderPluginsSlot.toArray();\n    // react-router should register its plugin, when we can reverse it's dependency to depend on Ui\n    lifecyclePlugins.unshift([ReactRouterAspect.id, this.router.renderPlugin]);\n\n    return lifecyclePlugins;\n  }\n\n  private getRoot(rootExtension: string) {\n    return this.uiRootSlot.get(rootExtension);\n  }\n\n  static slots = [Slot.withType<UIRootFactory>(), Slot.withType<ReactNode>(), Slot.withType<RenderPlugins>()];\n\n  static dependencies = [GraphqlAspect, ReactRouterAspect];\n\n  static runtime = UIRuntime;\n\n  static async provider(\n    [GraphqlUi, router]: [GraphqlUI, ReactRouterUI],\n    config,\n    [uiRootSlot, hudSlot, renderLifecycleSlot]: [UIRootRegistry, HudSlot, RenderPluginsSlot]\n  ) {\n    const uiUi = new UiUI(router, uiRootSlot, hudSlot, renderLifecycleSlot);\n\n    uiUi.registerRenderHooks(GraphqlUi.renderPlugins);\n\n    return uiUi;\n  }\n}\n\nUIAspect.addRuntime(UiUI);\n"]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/ui",
-  "version": "0.0.650",
+  "version": "0.0.651",
   "homepage": "https://bit.dev/teambit/ui-foundation/ui",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "ui",
-    "version": "0.0.650"
+    "version": "0.0.651"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -54,28 +54,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.650",
-    "@teambit/toolbox.path.to-windows-compatible-path": "0.0.482",
-    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.486",
-    "@teambit/logger": "0.0.534",
-    "@teambit/cli": "0.0.444",
-    "@teambit/ui-foundation.cli.ui-server-console": "0.0.489",
-    "@teambit/bundler": "0.0.650",
-    "@teambit/component": "0.0.650",
-    "@teambit/express": "0.0.538",
-    "@teambit/graphql": "0.0.650",
-    "@teambit/toolbox.network.get-port": "0.0.112",
-    "@teambit/aspect": "0.0.650",
-    "@teambit/cache": "0.0.534",
-    "@teambit/pubsub": "0.0.650",
-    "@teambit/react-router": "0.0.650",
-    "@teambit/ui-foundation.ui.rendering.html": "0.0.68",
+    "@teambit/aspect-loader": "0.0.651",
+    "@teambit/toolbox.path.to-windows-compatible-path": "0.0.483",
+    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.487",
+    "@teambit/logger": "0.0.535",
+    "@teambit/cli": "0.0.445",
+    "@teambit/ui-foundation.cli.ui-server-console": "0.0.490",
+    "@teambit/bundler": "0.0.651",
+    "@teambit/component": "0.0.651",
+    "@teambit/express": "0.0.539",
+    "@teambit/graphql": "0.0.651",
+    "@teambit/toolbox.network.get-port": "0.0.113",
+    "@teambit/aspect": "0.0.651",
+    "@teambit/cache": "0.0.535",
+    "@teambit/pubsub": "0.0.651",
+    "@teambit/react-router": "0.0.651",
+    "@teambit/ui-foundation.ui.rendering.html": "0.0.69",
     "@teambit/design.theme.icons-font": "1.0.8",
     "@teambit/design.ui.tooltip": "0.0.352",
-    "@teambit/ui-foundation.ui.global-loader": "0.0.485",
-    "@teambit/webpack.modules.generate-style-loaders": "0.0.102",
-    "@teambit/webpack.modules.style-regexps": "0.0.131",
-    "@teambit/webpack": "0.0.650"
+    "@teambit/ui-foundation.ui.global-loader": "0.0.486",
+    "@teambit/webpack.modules.generate-style-loaders": "0.0.103",
+    "@teambit/webpack.modules.style-regexps": "0.0.132",
+    "@teambit/webpack": "0.0.651"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",
@@ -91,13 +91,13 @@
     "@types/mini-css-extract-plugin": "2.2.0",
     "@types/postcss-normalize": "9.0.1",
     "@types/node": "12.20.4",
-    "@types/mocha": "5.2.7",
+    "@types/mocha": "9.1.0",
     "@types/testing-library__jest-dom": "5.9.5",
     "@types/jest": "^26.0.0"
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.222",
+    "@teambit/legacy": "1.0.223",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -133,7 +133,7 @@
         "@teambit/legacy": "-",
         "@types/postcss-normalize": "9.0.1",
         "@types/node": "12.20.4",
-        "@types/mocha": "5.2.7",
+        "@types/mocha": "9.1.0",
         "@types/testing-library__jest-dom": "5.9.5",
         "@types/jest": "^26.0.0",
         "@types/react-dom": "^17.0.5",
@@ -142,7 +142,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.222",
+        "@teambit/legacy": "1.0.223",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/ui.ui.runtime.tsx

@@ -41,12 +41,11 @@ export class UiUI {
     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 routes = this.router.renderRoutes(uiRoot.routes);
     const hudItems = this.hudSlot.values();
-    const lifecycleHooks = this.renderPluginsSlot.toArray();
+    const lifecyclePlugins = this.getLifecyclePlugins();
 
-    const reactSsr = new ReactSSR(lifecycleHooks);
+    const reactSsr = new ReactSSR(lifecyclePlugins);
     await reactSsr.renderBrowser(
       <ClientContext>
         {hudItems}
@@ -61,12 +60,11 @@ export class UiUI {
     if (!rootFactory) throw new Error(`root: ${rootExtension} was not found`);
 
     const uiRoot = rootFactory();
-    const routes = this.router.renderRoutes(uiRoot.routes, { initialLocation: ssrContent?.browser?.location.url });
+    const routes = this.router.renderRoutes(uiRoot.routes);
     const hudItems = this.hudSlot.values();
+    const lifecyclePlugins = this.getLifecyclePlugins();
 
-    const lifecycleHooks = this.renderPluginsSlot.toArray();
-
-    const reactSsr = new ReactSSR(lifecycleHooks);
+    const reactSsr = new ReactSSR(lifecyclePlugins);
     const fullHtml = await reactSsr.renderServer(
       <ClientContext>
         {hudItems}
@@ -97,8 +95,16 @@ export class UiUI {
     return this.uiRootSlot.register(uiRoot);
   }
 
-  registerRenderHooks<T, Y>(hooks: RenderPlugins<T, Y>) {
-    return this.renderPluginsSlot.register(hooks);
+  registerRenderHooks<T, Y>(plugins: RenderPlugins<T, Y>) {
+    return this.renderPluginsSlot.register(plugins);
+  }
+
+  private getLifecyclePlugins() {
+    const lifecyclePlugins = this.renderPluginsSlot.toArray();
+    // react-router should register its plugin, when we can reverse it's dependency to depend on Ui
+    lifecyclePlugins.unshift([ReactRouterAspect.id, this.router.renderPlugin]);
+
+    return lifecyclePlugins;
   }
 
   private getRoot(rootExtension: string) {