React fizz config DOM legacy

一、作用

二、导出类型

1. 渲染状态

export type RenderState = {
  // Keep this in sync with ReactFizzConfigDOM
  // 保持此与 ReactFizzConfigDOM 同步
  placeholderPrefix: PrecomputedChunk;
  segmentPrefix: PrecomputedChunk;
  boundaryPrefix: PrecomputedChunk;
  startInlineScript: PrecomputedChunk;
  startInlineStyle: PrecomputedChunk;
  preamble: PreambleState;
  externalRuntimeScript: null | any;
  bootstrapChunks: Array<Chunk | PrecomputedChunk>;
  importMapChunks: Array<Chunk | PrecomputedChunk>;
  onHeaders: void | ((headers: HeadersDescriptor) => void);
  headers: null | {
    preconnects: string;
    fontPreloads: string;
    highImagePreloads: string;
    remainingCapacity: number;
  };
  resets: BaseRenderState['resets'];
  charsetChunks: Array<Chunk | PrecomputedChunk>;
  viewportChunks: Array<Chunk | PrecomputedChunk>;
  hoistableChunks: Array<Chunk | PrecomputedChunk>;
  preconnects: Set<Resource>;
  fontPreloads: Set<Resource>;
  highImagePreloads: Set<Resource>;
  // usedImagePreloads: Set<Resource>,
  styles: Map<string, StyleQueue>;
  bootstrapScripts: Set<Resource>;
  scripts: Set<Resource>;
  bulkPreloads: Set<Resource>;
  preloads: {
    images: Map<string, Resource>;
    stylesheets: Map<string, Resource>;
    scripts: Map<string, Resource>;
    moduleScripts: Map<string, Resource>;
  };
  nonce: {
    script: string | void;
    style: string | void;
  };
  stylesToHoist: boolean;
  // This is an extra field for the legacy renderer
  // 这是为旧版渲染器准备的额外字段
  generateStaticMarkup: boolean;
};

2. 转导

直接从 ReactFizzConfigDOM 转导了部分类型

export type {
  ResumableState,
  HoistableState,
  PreambleState,
  FormatContext,
} from './ReactFizzConfigDOM';

3. 过渡状态

export type TransitionStatus = FormStatus;

三、导出常量

1. 是否为主渲染器

备注

源码中 44 行

export const isPrimaryRenderer = false;

2. 文档类型块

备注

源码中 142 - 143 行

• stringToPrecomputedChunk() 由 ReactServerStreamConfig#stringToPrecomputedChunk 实现

// this chunk is empty on purpose because we do not want to emit the DOCTYPE in legacy mode
// 这个块是有意留空的，因为我们不想在旧模式下输出 DOCTYPE
export const doctypeChunk: PrecomputedChunk = stringToPrecomputedChunk('');

3. 非未完成过渡

备注

源码中 338 行

export const NotPendingTransition: TransitionStatus = NotPending;

四、创建渲染状态

备注

• createRenderStateImpl() 由 ReactFizzConfigDOM#createRenderStateImpl 实现

export function createRenderState(
  resumableState: ResumableState,
  generateStaticMarkup: boolean,
): RenderState {
  const renderState = createRenderStateImpl(
    resumableState,
    undefined,
    undefined,
    undefined,
    undefined,
    undefined,
  );
  return {
    // Keep this in sync with ReactFizzConfigDOM
    // 保持此与 ReactFizzConfigDOM 同步
    placeholderPrefix: renderState.placeholderPrefix,
    segmentPrefix: renderState.segmentPrefix,
    boundaryPrefix: renderState.boundaryPrefix,
    startInlineScript: renderState.startInlineScript,
    startInlineStyle: renderState.startInlineStyle,
    preamble: renderState.preamble,
    externalRuntimeScript: renderState.externalRuntimeScript,
    bootstrapChunks: renderState.bootstrapChunks,
    importMapChunks: renderState.importMapChunks,
    onHeaders: renderState.onHeaders,
    headers: renderState.headers,
    resets: renderState.resets,
    charsetChunks: renderState.charsetChunks,
    viewportChunks: renderState.viewportChunks,
    hoistableChunks: renderState.hoistableChunks,
    preconnects: renderState.preconnects,
    fontPreloads: renderState.fontPreloads,
    highImagePreloads: renderState.highImagePreloads,
    // usedImagePreloads: renderState.usedImagePreloads,
    styles: renderState.styles,
    bootstrapScripts: renderState.bootstrapScripts,
    scripts: renderState.scripts,
    bulkPreloads: renderState.bulkPreloads,
    preloads: renderState.preloads,
    nonce: renderState.nonce,
    stylesToHoist: renderState.stylesToHoist,

    // This is an extra field for the legacy renderer
    // 这是为旧版渲染器准备的额外字段
    generateStaticMarkup,
  };
}

五、由实现转导

直接从 ReactFIzzCONfigDOM 导出了若干方法

export {
  getChildFormatContext,
  getSuspenseFallbackFormatContext,
  getSuspenseContentFormatContext,
  makeId,
  pushStartInstance,
  pushEndInstance,
  pushFormStateMarkerIsMatching,
  pushFormStateMarkerIsNotMatching,
  writeStartSegment,
  writeEndSegment,
  writeCompletedSegmentInstruction,
  writeCompletedBoundaryInstruction,
  writeClientRenderBoundaryInstruction,
  writeStartPendingSuspenseBoundary,
  writeEndPendingSuspenseBoundary,
  writeHoistablesForBoundary,
  writePlaceholder,
  writeCompletedRoot,
  createRootFormatContext,
  createResumableState,
  createPreambleState,
  createHoistableState,
  writePreambleEnd,
  writeHoistables,
  writePostamble,
  hoistHoistables,
  resetResumableState,
  completeResumableState,
  emitEarlyPreloads,
  supportsClientAPIs,
  hoistPreambleState,
  isPreambleReady,
  isPreambleContext,
} from './ReactFizzConfigDOM';

六、获取视图过渡格式上下文

export function getViewTransitionFormatContext(
  resumableState: ResumableState,
  parentContext: FormatContext,
  update: void | null | 'none' | 'auto' | string,
  enter: void | null | 'none' | 'auto' | string,
  exit: void | null | 'none' | 'auto' | string,
  share: void | null | 'none' | 'auto' | string,
  name: void | null | 'auto' | string,
  // 名称或自动生成的唯一名称
  autoName: string, // name or an autogenerated unique name
): FormatContext {
  // ViewTransition reveals are not supported in legacy renders.
  // ViewTransition 显示在旧版渲染中不受支持。
  return parentContext;
}

七、可以有前言

export function canHavePreamble(formatContext: FormatContext): boolean {
  return false;
}

八、推送文本实例

备注

• stringToChunk() 由 ReactServerStreamConfig#stringToChunk 实现
• escapeTextForBrowser() 由 escapeTextForBrowser 实现
• pushTextInstanceImpl() 由 ReactFizzConfigDOM#pushTextInstanceImpl 实现

export function pushTextInstance(
  target: Array<Chunk | PrecomputedChunk>,
  text: string,
  renderState: RenderState,
  textEmbedded: boolean,
): boolean {
  if (renderState.generateStaticMarkup) {
    target.push(stringToChunk(escapeTextForBrowser(text)));
    return false;
  } else {
    return pushTextInstanceImpl(target, text, renderState, textEmbedded);
  }
}

九、推送段落结尾

备注

• pushSegmentFinaleImpl() 由 ReactFizzConfigDOM#pushSegmentFinaleImpl 实现

export function pushSegmentFinale(
  target: Array<Chunk | PrecomputedChunk>,
  renderState: RenderState,
  lastPushedText: boolean,
  textEmbedded: boolean,
): void {
  if (renderState.generateStaticMarkup) {
    return;
  } else {
    return pushSegmentFinaleImpl(
      target,
      renderState,
      lastPushedText,
      textEmbedded,
    );
  }
}

十、启动活动边界

备注

• pushStartActivityBoundaryImpl() 由 ReactFizzConfigDOM#pushStartActivityBoundaryImpl 实现

export function pushStartActivityBoundary(
  target: Array<Chunk | PrecomputedChunk>,
  renderState: RenderState,
): void {
  if (renderState.generateStaticMarkup) {
    // A completed boundary is done and doesn't need a representation in the HTML
    // if we're not going to be hydrating it.
    // 一个完成的边界已完成，如果我们不打算对其进行 hydration，则不需要在 HTML 中表示它。
    return;
  }
  pushStartActivityBoundaryImpl(target, renderState);
}

十一、推送结束活动边界

备注

• pushEndActivityBoundaryImpl() 由 ReactFizzConfigDOM#pushEndActivityBoundaryImpl 实现

export function pushEndActivityBoundary(
  target: Array<Chunk | PrecomputedChunk>,
  renderState: RenderState,
): void {
  if (renderState.generateStaticMarkup) {
    return;
  }
  pushEndActivityBoundaryImpl(target, renderState);
}

十二、写开始完成挂起边界

备注

• writeStartCompletedSuspenseBoundaryImpl() 由 ReactFizzConfigDOM#writeStartCompletedSuspenseBoundaryImpl 实现

export function writeStartCompletedSuspenseBoundary(
  destination: Destination,
  renderState: RenderState,
): boolean {
  if (renderState.generateStaticMarkup) {
    // A completed boundary is done and doesn't need a representation in the HTML
    // if we're not going to be hydrating it.
    // 一个完成的边界已完成，如果我们不打算对其进行 hydration，则不需要在 HTML 中表示它
    return true;
  }
  return writeStartCompletedSuspenseBoundaryImpl(destination, renderState);
}

十三、编写启动客户端渲染的挂起边界

备注

• writeStartClientRenderedSuspenseBoundaryImpl() 由 ReactFizzConfigDOM#writeStartClientRenderedSuspenseBoundaryImpl 实现

export function writeStartClientRenderedSuspenseBoundary(
  destination: Destination,
  renderState: RenderState,
  // flushing these error arguments are not currently supported in this legacy streaming format.
  // 刷新这些错误参数当前在这个传统流格式中不被支持。
  errorDigest: ?string,
  errorMessage: ?string,
  errorStack: ?string,
  errorComponentStack: ?string,
): boolean {
  if (renderState.generateStaticMarkup) {
    // A client rendered boundary is done and doesn't need a representation in the HTML
    // since we'll never hydrate it. This is arguably an error in static generation.
    // 客户端渲染的边界已完成，并且不需要在 HTML 中表示
    // 因为我们永远不会对其进行 hydration。这可以说是静态生成中的一个错误。
    return true;
  }
  return writeStartClientRenderedSuspenseBoundaryImpl(
    destination,
    renderState,
    errorDigest,
    errorMessage,
    errorStack,
    errorComponentStack,
  );
}

十四、写结束已完成的挂起边界

备注

• writeEndCompletedSuspenseBoundaryImpl() 由 ReactFizzConfigDOM#writeEndCompletedSuspenseBoundaryImpl 实现

export function writeEndCompletedSuspenseBoundary(
  destination: Destination,
  renderState: RenderState,
): boolean {
  if (renderState.generateStaticMarkup) {
    return true;
  }
  return writeEndCompletedSuspenseBoundaryImpl(destination, renderState);
}

十五、写结束客户端渲染的挂起边界

备注

• writeEndClientRenderedSuspenseBoundaryImpl() 由 ReactFizzConfigDOM#writeEndClientRenderedSuspenseBoundaryImpl 实现

export function writeEndClientRenderedSuspenseBoundary(
  destination: Destination,
  renderState: RenderState,
): boolean {
  if (renderState.generateStaticMarkup) {
    return true;
  }
  return writeEndClientRenderedSuspenseBoundaryImpl(destination, renderState);
}

十六、写入前言开始

备注

• writePreambleStartImpl() 由 ReactFizzConfigDOM#writePreambleStartImpl 实现

export function writePreambleStart(
  destination: Destination,
  resumableState: ResumableState,
  renderState: RenderState,
  skipBlockingShell: boolean,
): void {
  return writePreambleStartImpl(
    destination,
    resumableState,
    renderState,
    // 跳过阻塞外壳
    true, // skipBlockingShell
  );
}

十七、有挂起内容

export function hasSuspenseyContent(
  hoistableState: HoistableState,
  flushingInShell: boolean,
): boolean {
  // Never outline.
  // 永远不要概述。
  return false;
}