@teambit/bundler 0.0.568 → 0.0.572

package/dev-server.service.tsx

@@ -0,0 +1,150 @@
+import { EnvService, ExecutionContext, EnvDefinition } from '@teambit/envs';
+import { PubsubMain } from '@teambit/pubsub';
+import { flatten } from 'lodash';
+import React from 'react';
+import { Text, Newline } from 'ink';
+import highlight from 'cli-highlight';
+import { BrowserRuntimeSlot } from './bundler.main.runtime';
+import { ComponentServer } from './component-server';
+import { dedupEnvs } from './dedup-envs';
+import { DevServer } from './dev-server';
+import { DevServerContext } from './dev-server-context';
+import { getEntry } from './get-entry';
+
+export type DevServerServiceOptions = { dedicatedEnvDevServers?: string[] };
+
+export type DevServerDescriptor = {
+  /**
+   * id of the dev server (e.g. jest/mocha)
+   */
+  id: string;
+
+  /**
+   * display name of the dev server (e.g. Jest / Mocha)
+   */
+  displayName: string;
+
+  /**
+   * icon of the configured dev server.
+   */
+  icon: string;
+
+  /**
+   * string containing the config for display.
+   */
+  config: string;
+
+  version?: string;
+};
+
+export class DevServerService implements EnvService<ComponentServer, DevServerDescriptor> {
+  name = 'dev server';
+
+  constructor(
+    /**
+     * browser runtime slot
+     */
+    private pubsub: PubsubMain,
+
+    /**
+     * browser runtime slot
+     */
+    private runtimeSlot: BrowserRuntimeSlot
+  ) {}
+
+  async render(env: EnvDefinition, context: ExecutionContext[]) {
+    const descriptor = await this.getDescriptor(env, context);
+    return (
+      <Text key={descriptor?.id}>
+        <Text color="cyan">configured dev server: </Text>
+        <Text>
+          {descriptor?.id} ({descriptor?.displayName} @ {descriptor?.version})
+        </Text>
+        <Newline />
+        <Text underline color="cyan">
+          dev server config:
+        </Text>
+        <Newline />
+        <Text>
+          {/* refactor a separate component which highlights for cli */}
+          {highlight(descriptor?.config || '', { language: 'javascript', ignoreIllegals: true })}
+        </Text>
+        <Newline />
+      </Text>
+    );
+  }
+
+  async getDescriptor(
+    environment: EnvDefinition,
+    context?: ExecutionContext[]
+  ): Promise<DevServerDescriptor | undefined> {
+    if (!environment.env.getDevServer || !context) return undefined;
+    const mergedContext = await this.buildContext(context[0], []);
+    const devServer: DevServer = environment.env.getDevServer(mergedContext);
+
+    return {
+      id: devServer.id || '',
+      displayName: devServer.displayName || '',
+      icon: devServer.icon || '',
+      config: devServer.displayConfig ? devServer.displayConfig() : '',
+      version: devServer.version ? devServer.version() : '?',
+    };
+  }
+
+  // async run(context: ExecutionContext): Promise<ComponentServer[]> {
+  //   const devServerContext = await this.buildContext(context);
+  //   const devServer: DevServer = context.env.getDevServer(devServerContext);
+  //   const port = await selectPort();
+  //   // TODO: refactor to replace with a component server instance.
+  //   return new ComponentServer(this.pubsub, context, port, devServer);
+  // }
+
+  async runOnce(
+    contexts: ExecutionContext[],
+    { dedicatedEnvDevServers }: DevServerServiceOptions
+  ): Promise<ComponentServer[]> {
+    const groupedEnvs = dedupEnvs(contexts, dedicatedEnvDevServers);
+
+    const servers = await Promise.all(
+      Object.entries(groupedEnvs).map(async ([id, contextList]) => {
+        const mainContext = contextList.find((context) => context.envDefinition.id === id) || contextList[0];
+        const additionalContexts = contextList.filter((context) => context.envDefinition.id !== id);
+
+        const devServerContext = await this.buildContext(mainContext, additionalContexts);
+        const devServer: DevServer = await devServerContext.envRuntime.env.getDevServer(devServerContext);
+
+        return new ComponentServer(this.pubsub, devServerContext, [3300, 3400], devServer);
+      })
+    );
+
+    return servers;
+  }
+
+  mergeContext() {}
+
+  private getComponentsFromContexts(contexts: ExecutionContext[]) {
+    return flatten(
+      contexts.map((context) => {
+        return context.components;
+      })
+    );
+  }
+
+  /**
+   * builds the execution context for the dev server.
+   */
+  private async buildContext(
+    context: ExecutionContext,
+    additionalContexts: ExecutionContext[] = []
+  ): Promise<DevServerContext> {
+    context.relatedContexts = additionalContexts.map((ctx) => ctx.envDefinition.id);
+    context.components = context.components.concat(this.getComponentsFromContexts(additionalContexts));
+
+    return Object.assign(context, {
+      entry: await getEntry(context, this.runtimeSlot),
+      // don't start with a leading "/" because it generates errors on Windows
+      rootPath: `preview/${context.envRuntime.id}`,
+      publicPath: `/public`,
+    });
+  }
+}

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

@@ -0,0 +1,20 @@
+/* eslint-disable max-classes-per-file */
+
+import { BitBaseEvent } from '@teambit/pubsub';
+
+class ComponentsServerStartedEventData {
+  constructor(readonly componentsServer, readonly context, readonly hostname, readonly port) {}
+}
+
+export class ComponentsServerStartedEvent extends BitBaseEvent<ComponentsServerStartedEventData> {
+  static readonly TYPE = 'components-server-started';
+
+  constructor(readonly timestamp, readonly componentsServer, readonly context, readonly hostname, readonly port) {
+    super(
+      ComponentsServerStartedEvent.TYPE,
+      '0.0.1',
+      timestamp,
+      new ComponentsServerStartedEventData(componentsServer, context, hostname, port)
+    );
+  }
+}

package/events/index.ts

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

package/exceptions/bind-error.ts

@@ -0,0 +1 @@
+export class BindError extends Error {}

package/exceptions/index.ts

@@ -0,0 +1 @@
+export { BindError } from './bind-error';

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/bundler",
-  "version": "0.0.568",
+  "version": "0.0.572",
   "homepage": "https://bit.dev/teambit/compilation/bundler",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compilation",
     "name": "bundler",
-    "version": "0.0.568"
+    "version": "0.0.572"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
@@ -15,13 +15,13 @@
     "lodash": "4.17.21",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
-    "@teambit/envs": "0.0.568",
-    "@teambit/cli": "0.0.394",
-    "@teambit/component": "0.0.568",
-    "@teambit/graphql": "0.0.568",
-    "@teambit/pubsub": "0.0.568",
-    "@teambit/builder": "0.0.568",
-    "@teambit/toolbox.network.get-port": "0.0.98"
+    "@teambit/envs": "0.0.572",
+    "@teambit/cli": "0.0.395",
+    "@teambit/component": "0.0.572",
+    "@teambit/graphql": "0.0.572",
+    "@teambit/pubsub": "0.0.572",
+    "@teambit/builder": "0.0.572",
+    "@teambit/toolbox.network.get-port": "0.0.99"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",
@@ -34,7 +34,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"
   },
@@ -62,27 +62,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/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;
+}