@teambit/mdx 1.0.220 → 1.0.222

package/dist/{preview-1712200750105.js → preview-1712373348227.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.mdx_mdx@1.0.220/dist/mdx.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.mdx_mdx@1.0.220/dist/mdx.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.mdx_mdx@1.0.222/dist/mdx.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.mdx_mdx@1.0.222/dist/mdx.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

package/index.ts

@@ -0,0 +1,8 @@
+import { MDXAspect } from './mdx.aspect';
+
+export default MDXAspect;
+export type { MDXMain } from './mdx.main.runtime';
+export type { MDXCompilerOpts } from './mdx.compiler';
+export { MdxEnv } from './mdx.env';
+
+export { MDXAspect };

package/mdx.aspect.ts

@@ -0,0 +1,7 @@
+import { Aspect } from '@teambit/harmony';
+
+export const MDXAspect = Aspect.create({
+  id: 'teambit.mdx/mdx',
+});
+
+export default MDXAspect;

package/mdx.compiler.ts

@@ -0,0 +1,137 @@
+import { join } from 'path';
+import { outputFileSync } from 'fs-extra';
+import { Compiler, TranspileFileOutput, TranspileFileParams } from '@teambit/compiler';
+import { BuiltTaskResult, BuildContext } from '@teambit/builder';
+import { compileSync as mdxCompileSync } from '@teambit/mdx.compilers.mdx-transpiler';
+import minimatch from 'minimatch';
+import { transpileFileContent as babelTranspileFileContent } from '@teambit/compilation.modules.babel-compiler';
+import type { TransformOptions } from '@babel/core';
+
+export type MDXCompilerOpts = {
+  ignoredExtensions?: string[];
+  ignoredPatterns?: string[];
+  babelTransformOptions?: TransformOptions;
+};
+export class MDXCompiler implements Compiler {
+  displayName = 'MDX';
+
+  shouldCopyNonSupportedFiles = true;
+
+  distDir = 'dist';
+
+  constructor(readonly id: string, readonly config: MDXCompilerOpts) {}
+
+  displayConfig() {
+    return JSON.stringify(this.config, null, 2);
+  }
+
+  getDistDir() {
+    return this.distDir;
+  }
+
+  transpileFile(fileContent: string, options: TranspileFileParams): TranspileFileOutput {
+    const afterMdxCompile = mdxCompileSync(fileContent, {
+      filepath: options.filePath,
+      // this compiler is not indented to compile according to the bit flavour.
+      bitFlavour: false,
+    });
+    const filePathAfterMdxCompile = this.replaceFileExtToJs(options.filePath);
+    const afterBabelCompile = babelTranspileFileContent(
+      afterMdxCompile.contents,
+      {
+        rootDir: options.componentDir,
+        filePath: filePathAfterMdxCompile,
+      },
+      this.config.babelTransformOptions || {}
+    );
+
+    return afterBabelCompile;
+  }
+
+  /**
+   * compile components inside isolated capsules. this being used during tag for the release.
+   * meaning, the final package of the component has the dists generated by this method.
+   */
+  async build(context: BuildContext): Promise<BuiltTaskResult> {
+    const capsules = context.capsuleNetwork.seedersCapsules;
+    const componentsResults = capsules.map((capsule) => {
+      const srcFiles = capsule.component.filesystem.files.filter((file) => {
+        return this.isFileSupported(file.relative);
+      });
+
+      const errors = srcFiles.map((srcFile) => {
+        try {
+          const transpiled = this.transpileFile(srcFile.contents.toString('utf-8'), {
+            filePath: this.replaceFileExtToJs(srcFile.relative),
+            componentDir: capsule.path,
+          });
+
+          if (!transpiled) {
+            return undefined;
+          }
+
+          outputFileSync(
+            join(capsule.path, this.getDistPathBySrcPath(transpiled[0].outputPath)),
+            transpiled[0].outputText
+          );
+          if (transpiled.length > 1) {
+            outputFileSync(join(capsule.path, this.distDir, transpiled[1].outputPath), transpiled[1].outputText);
+          }
+          return undefined;
+        } catch (err: any) {
+          return err;
+        }
+      });
+
+      return {
+        errors: errors.filter((err) => !!err),
+        component: capsule.component,
+      };
+    });
+
+    return {
+      componentsResults,
+      artifacts: [
+        {
+          name: 'dist',
+          globPatterns: [`${this.distDir}/**`],
+        },
+      ],
+    };
+  }
+
+  /**
+   * given a source file, return its parallel in the dists. e.g. "index.ts" => "dist/index.js"
+   * both, the return path and the given path are relative paths.
+   */
+  getDistPathBySrcPath(srcPath: string): string {
+    const fileWithNewExt = this.replaceFileExtToJs(srcPath);
+    return join(this.distDir, fileWithNewExt);
+  }
+
+  private replaceFileExtToJs(srcPath: string): string {
+    let fileWithNewExt = srcPath;
+    if (this.isFileSupported(srcPath)) {
+      fileWithNewExt = srcPath.replace('.mdx', '.mdx.js');
+    }
+    return fileWithNewExt;
+  }
+
+  /**
+   * only supported files matching get compiled. others, are copied to the dist dir.
+   */
+  isFileSupported(filePath: string): boolean {
+    const ignoredExtensions = this.config.ignoredExtensions ?? [];
+    const ignoredExt = ignoredExtensions.find((ext) => filePath.endsWith(ext));
+    const ignoredPatterns = this.config.ignoredPatterns ?? [];
+    const ignoredPattern = ignoredPatterns.find((pattern) => minimatch(filePath, pattern));
+    return !ignoredExt && !ignoredPattern && (filePath.endsWith('.mdx') || filePath.endsWith('.md'));
+  }
+
+  /**
+   * returns the version of the current compiler instance (e.g. '4.0.1').
+   */
+  version(): string {
+    return '';
+  }
+}

package/mdx.detector.spec.ts

@@ -0,0 +1,26 @@
+import { expect } from 'chai';
+import { MDXDependencyDetector } from './mdx.detector';
+
+describe('MDXDependencyDetector', () => {
+  function expectDependencies(src: string, expectedDeps: string[]) {
+    expect(new MDXDependencyDetector(['mdx']).detect(src)).to.deep.equal(expectedDeps);
+  }
+  describe('detect', () => {
+    it('should correctly detect default import', () => {
+      const src = 'import x from "y";';
+      expectDependencies(src, ['y']);
+    });
+    it('should correctly detect star import', () => {
+      const src = 'import * as y from "y";';
+      expectDependencies(src, ['y']);
+    });
+    it('should correctly detect named import', () => {
+      const src = 'import { x } from "y";';
+      expectDependencies(src, ['y']);
+    });
+    it('should correctly detect import with no identifier', () => {
+      const src = 'import "y";';
+      expectDependencies(src, ['y']);
+    });
+  });
+});

package/mdx.detector.ts

@@ -0,0 +1,21 @@
+import { DependencyDetector, FileContext } from '@teambit/dependency-resolver';
+import { compileSync } from '@teambit/mdx.compilers.mdx-transpiler';
+
+export class MDXDependencyDetector implements DependencyDetector {
+  constructor(private supportedExtensions: string[]) {}
+
+  isSupported(context: FileContext): boolean {
+    return this.supportedExtensions.includes(context.ext);
+  }
+
+  detect(source: string): string[] {
+    const output = compileSync(source);
+    const imports = output.getImportSpecifiers();
+    if (!imports) return [];
+    const files: string[] = imports.map((importSpec) => {
+      return importSpec.fromModule;
+    });
+
+    return files;
+  }
+}

package/mdx.doc-reader.ts

@@ -0,0 +1,18 @@
+import { DocReader, Doc } from '@teambit/docs';
+import { compile } from '@teambit/mdx.compilers.mdx-transpiler';
+
+export class MDXDocReader implements DocReader {
+  constructor(private extensions: string[]) {}
+
+  async read(path: string, contents: Buffer) {
+    const output = await compile(contents.toString('utf-8'), { filepath: path });
+    const metadata = output.getMetadata();
+
+    const doc = Doc.from(path, metadata);
+    return doc;
+  }
+
+  isFormatSupported(format: string) {
+    return this.extensions.includes(format);
+  }
+}

package/mdx.env.ts

@@ -0,0 +1,7 @@
+import { Environment } from '@teambit/envs';
+
+export const MdxEnvType = 'mdx';
+
+export class MdxEnv implements Environment {
+  // TODO: add the env here properly.
+}

package/mdx.main.runtime.ts

@@ -0,0 +1,142 @@
+import { Harmony } from '@teambit/harmony';
+import { BabelCompiler } from '@teambit/compilation.babel-compiler';
+import { TypescriptConfigMutator } from '@teambit/typescript.modules.ts-config-mutator';
+import { TsConfigTransformer } from '@teambit/typescript';
+import { MainRuntime } from '@teambit/cli';
+import { CompilerAspect, CompilerMain } from '@teambit/compiler';
+import { DependencyResolverAspect, DependencyResolverMain } from '@teambit/dependency-resolver';
+import { DocsAspect, DocsMain } from '@teambit/docs';
+import { ComponentID } from '@teambit/component-id';
+import { LoggerAspect, LoggerMain } from '@teambit/logger';
+import { WorkerAspect, WorkerMain } from '@teambit/worker';
+import { EnvContext, EnvsAspect, EnvsMain } from '@teambit/envs';
+import { MultiCompilerAspect, MultiCompilerMain } from '@teambit/multi-compiler';
+import { ReactAspect, ReactEnv, ReactMain } from '@teambit/react';
+import { GeneratorAspect, GeneratorMain } from '@teambit/generator';
+import { MDXAspect } from './mdx.aspect';
+import { MDXCompiler, MDXCompilerOpts } from './mdx.compiler';
+import { MDXDependencyDetector } from './mdx.detector';
+import { MDXDocReader } from './mdx.doc-reader';
+import { getTemplates } from './mdx.templates';
+import { babelConfig } from './babel/babel.config';
+
+export type MDXConfig = {
+  /**
+   * list of file extensions to consider as MDX files.
+   */
+  extensions: string[];
+};
+
+export class MDXMain {
+  icon() {
+    return 'https://static.bit.dev/extensions-icons/mdx-icon-small.svg';
+  }
+
+  /**
+   * create an instance of the MDX compiler.
+   */
+  createCompiler(opts: MDXCompilerOpts = {}) {
+    const mdxCompiler = new MDXCompiler(MDXAspect.id, opts);
+    return mdxCompiler;
+  }
+
+  _mdxEnv: ReactEnv;
+  get mdxEnv() {
+    return this._mdxEnv;
+  }
+  private set mdxEnv(value: ReactEnv) {
+    this._mdxEnv = value;
+  }
+
+  static runtime = MainRuntime;
+
+  static dependencies = [
+    DocsAspect,
+    DependencyResolverAspect,
+    ReactAspect,
+    EnvsAspect,
+    MultiCompilerAspect,
+    CompilerAspect,
+    GeneratorAspect,
+    LoggerAspect,
+    WorkerAspect,
+  ];
+
+  static defaultConfig = {
+    extensions: ['.md', '.mdx'],
+  };
+
+  static async provider(
+    [docs, depResolver, react, envs, multiCompiler, compiler, generator, loggerAspect, workerMain]: [
+      DocsMain,
+      DependencyResolverMain,
+      ReactMain,
+      EnvsMain,
+      MultiCompilerMain,
+      CompilerMain,
+      GeneratorMain,
+      LoggerMain,
+      WorkerMain
+    ],
+    config: MDXConfig,
+    slots,
+    harmony: Harmony
+  ) {
+    const mdx = new MDXMain();
+    const tsTransformer: TsConfigTransformer = (tsconfig: TypescriptConfigMutator) => {
+      // set the shouldCopyNonSupportedFiles to false since we don't want ts to copy the .mdx file to the dist folder (it will conflict with the .mdx.js file created by the mdx compiler)
+      tsconfig.setCompileJs(false).setCompileJsx(false).setShouldCopyNonSupportedFiles(false);
+      return tsconfig;
+    };
+    const tsCompiler = react.env.getCompiler([tsTransformer]);
+    const logger = loggerAspect.createLogger(MDXAspect.id);
+
+    const babelCompiler = BabelCompiler.create(
+      {
+        babelTransformOptions: babelConfig,
+        // set the shouldCopyNonSupportedFiles to false since we don't want babel to copy the .mdx file to the dist
+        // folder (it will conflict with the .mdx.js file created by the mdx compiler)
+        shouldCopyNonSupportedFiles: false,
+      },
+      { logger }
+    );
+
+    const mdxCompiler = multiCompiler.createCompiler(
+      [
+        babelCompiler,
+        mdx.createCompiler({ ignoredPatterns: docs.getPatterns(), babelTransformOptions: babelConfig }),
+        tsCompiler,
+      ],
+      {}
+    );
+    const mdxEnv = envs.compose(react.reactEnv, [
+      react.overrideCompiler(mdxCompiler),
+      react.overrideDependencies({
+        dependencies: {
+          '@teambit/mdx.ui.mdx-scope-context': '1.0.0',
+          '@mdx-js/react': '1.6.22',
+        },
+      }),
+      react.overrideCompilerTasks([compiler.createTask('MDXCompiler', mdxCompiler)]),
+      envs.override({
+        __getDescriptor: async () => {
+          return {
+            type: 'mdx',
+          };
+        },
+      }),
+    ]);
+    envs.registerEnv(mdxEnv);
+    depResolver.registerDetector(new MDXDependencyDetector(config.extensions));
+    docs.registerDocReader(new MDXDocReader(config.extensions));
+    if (generator) {
+      const envContext = new EnvContext(ComponentID.fromString(ReactAspect.id), loggerAspect, workerMain, harmony);
+      generator.registerComponentTemplate(getTemplates(envContext));
+    }
+
+    mdx.mdxEnv = mdxEnv as ReactEnv;
+    return mdx;
+  }
+}
+
+MDXAspect.addRuntime(MDXMain);

package/mdx.templates.ts

@@ -0,0 +1,13 @@
+import { MdxComponentTemplate, MdxEnvTemplate } from '@teambit/mdx.generator.mdx-templates';
+import { EnvContext } from '@teambit/envs';
+import { ComponentTemplate, TemplateList } from '@teambit/generator';
+
+const templateListHandler = TemplateList.from([
+  MdxComponentTemplate.from({ env: 'teambit.mdx/mdx-env' }),
+  MdxEnvTemplate.from({}),
+]);
+
+export function getTemplates(envContext: EnvContext): ComponentTemplate[] {
+  const templateList = templateListHandler(envContext);
+  return templateList.compute();
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/mdx",
-  "version": "1.0.220",
+  "version": "1.0.222",
   "homepage": "https://bit.cloud/teambit/mdx/mdx",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.mdx",
     "name": "mdx",
-    "version": "1.0.220"
+    "version": "1.0.222"
   },
   "dependencies": {
     "@babel/core": "7.19.6",
@@ -27,23 +27,23 @@
     "@teambit/component-id": "1.2.0",
     "@teambit/mdx.generator.mdx-templates": "1.0.10",
     "@teambit/design.ui.empty-box": "0.0.363",
-    "@teambit/builder": "1.0.220",
+    "@teambit/builder": "1.0.222",
     "@teambit/compilation.modules.babel-compiler": "0.0.139",
-    "@teambit/compiler": "1.0.220",
-    "@teambit/dependency-resolver": "1.0.220",
-    "@teambit/docs": "1.0.220",
-    "@teambit/envs": "1.0.220",
-    "@teambit/cli": "0.0.858",
-    "@teambit/generator": "1.0.221",
-    "@teambit/logger": "0.0.951",
-    "@teambit/multi-compiler": "1.0.220",
-    "@teambit/react": "1.0.220",
+    "@teambit/compiler": "1.0.222",
+    "@teambit/dependency-resolver": "1.0.222",
+    "@teambit/docs": "1.0.222",
+    "@teambit/envs": "1.0.222",
+    "@teambit/cli": "0.0.859",
+    "@teambit/generator": "1.0.223",
+    "@teambit/logger": "0.0.952",
+    "@teambit/multi-compiler": "1.0.222",
+    "@teambit/react": "1.0.222",
     "@teambit/typescript.modules.ts-config-mutator": "0.0.83",
-    "@teambit/typescript": "1.0.220",
-    "@teambit/worker": "0.0.1162",
-    "@teambit/compositions": "1.0.220",
-    "@teambit/tester": "1.0.220",
-    "@teambit/ui": "1.0.220"
+    "@teambit/typescript": "1.0.222",
+    "@teambit/worker": "0.0.1163",
+    "@teambit/compositions": "1.0.222",
+    "@teambit/tester": "1.0.222",
+    "@teambit/ui": "1.0.222"
   },
   "devDependencies": {
     "@types/fs-extra": "9.0.7",