title labels description
MDX Compiler
compiler
mdx
node
비트 MDX 형식 컴파일러.

'json-formatter-js'에서 JSONFormatter 가져오기; import { compileSync, compile } from './mdx-compiler';

MDX 컴파일러를 사용하면 Bit-flavored MDX 파일을 컴파일할 수 있습니다. 여기에는 출력 코드에서 Bit의 주요 속성(Bit 맛 MDX의 일부임)을 구문 분석하고 제거하는 작업이 포함됩니다. 그 외에도 MDX 컴파일러는 전체 JSX 트리(MDX 파일에서 생성)를 래핑하여 가져온 모든 모듈을 라이브 플레이그라운드의 모든 인스턴스에서 사용할 수 있도록 하는 React 컨텍스트 공급자를 만듭니다. 다음은 비트 맛 MDX의 예입니다.

---
displayName: Simple component
description: This is a very simple component description.
labels: ['first', 'component']
---

import { compileSync } from './mdx-compiler';

# 마크다운 제목

This is a Bit flavoured MDX file.

compileSync example

컴파일러는 MDX를 JSX로 변환합니다. 트랜스파일된 출력이 있는 객체를 반환합니다. bitFlavourtrue 로 설정하여 가져온 모든 모듈을 라이브 플레이그라운드 구성 요소에 사용할 수 있도록 하는 React Provider로 트랜스파일된 출력을 래핑합니다.

() => {
  const mdxInput = `
  ---
  title: MDX Compiler
  labels: ['compiler', 'mdx', 'node']
  description: Bit MDX format compiler.
  ---

  import { compileSync } from './mdx-compiler';

  The MDX compiler enables the compilation of Bit-flavoured MDX files. That includes parsing-out and removing Bit's frontmatter properties (which are part of the Bit flavored MDX) from the output code.
  In addition to that, the MDX compiler creates a React context provider that wraps the entire JSX tree (produced by the MDX file) to make all imported modules available to be used by all instances of the live playground.
  This is an example of Bit flavoured MDX:

  # A markdown title
  `;
  const result = compileSync(mdxInput, {
    bitFlavour: true,
  });
  const dataContent = new JSONFormatter(result, 2);
  return (
    <div>
      <div
        ref={(nodeElement) => {
          nodeElement && nodeElement.replaceWith(dataContent.render());
        }}
      />
    </div>
  );
};

비동기 컴파일 예제

컴파일 기능은 비동기식으로도 사용할 수 있습니다.

async function foo() {
  const mdxInput = `
  ---
  title: MDX Compiler
  labels: ['compiler', 'mdx', 'node']
  description: Bit MDX format compiler.
  ---

  import { compile } from './mdx-compiler';

  The MDX compiler enables the compilation of Bit-flavoured MDX files. That includes parsing-out and removing Bit's frontmatter properties (which are part of the Bit flavored MDX) from the output code.
  In addition to that, the MDX compiler creates a React context provider that wraps the entire JSX tree (produced by the MDX file) to make all imported modules available to be used by all instances of the live playground.
  This is an example of Bit flavoured MDX:

  # A markdown title
  `;
  const result = await compile(mdxInput, {
    bitFlavour: true,
  });
  const dataContent = new JSONFormatter(result, 2);
  return (
    <div>
      <div
        ref={(nodeElement) => {
          nodeElement && nodeElement.replaceWith(dataContent.render());
        }}
      />
    </div>
  );
}