実験機能リファレンス

このページは実験機能とVue RFC の実験機能の詳細を補う詳細リファレンスです。 フラグをどこで解決するか、変更にどの検証が必要か、低レベル API のどの項目が解決済みの真偽値を受け取るかを確認できます。

設定を渡す場所

設定を判断する責任がある、できるだけ上位の入口を使ってください。 プロジェクト設定は Vize の設定を読み込むツール向けです。 プラグインに直接渡すオプションは、個々の Vite プラグインに適用します。 ネイティブコンパイラの項目を直接使うのは、プロジェクトの設定方針をすでに解決した統合です。

フラグごとの契約

RFC #831 も他の RFC フラグと同じ形式で有効化します。 ただし、対象はパーサーとツールの処理だけです。属性の近くにある // 注釈を保持しますが、ランタイムのコメントは出力しません。

ネイティブ API の設定項目

通常のアプリケーションでは experimentals を設定してください。 設定を自前で解決する低レベルの統合では、ネイティブコンパイラの項目を直接指定できます。

import {
  compile,
  compileSfc,
  compileSfcBatchWithResults,
  compileVapor,
  parseTemplate,
} from "@vizejs/native";

compile(templateSource, {
  experimentalInTagComments: true,
  experimentalPatternedTemplate: true,
  experimentalSelfComponent: true,
  experimentalServerScript: true,
  componentName: "TreeNode",
});

compileVapor(templateSource, {
  experimentalInTagComments: true,
  experimentalPatternedTemplate: true,
  experimentalSelfComponent: true,
  componentName: "TreeNode",
});

parseTemplate(templateSource, {
  experimentalInTagComments: true,
});

compileSfc(sfcSource, {
  filename: "TreeNode.vue",
  experimentalInTagComments: true,
  experimentalPatternedTemplate: true,
  experimentalSelfComponent: true,
  experimentalStrictSlotChildren: true,
  experimentalServerScript: true,
});

compileSfcBatchWithResults(files, {
  experimentalInTagComments: true,
  experimentalPatternedTemplate: true,
  experimentalSelfComponent: true,
  experimentalStrictSlotChildren: true,
  experimentalServerScript: true,
});

これらの項目は解決済みの真偽値を受け取ります。別名、{} の設定オブジェクト、共通設定の優先順位は解釈しません。 呼び出し元がそれらの解決ルールを管理する、統合の境界で使ってください。

設定例

意図した動作を検証できる、最小限のフラグだけを有効にします。 無関係な RFC の設定を、一つのプロジェクト用スイッチにまとめないでください。 機能が安定版の compiler またはツールのオプションに移るまでは、共通設定で実験フラグを既定で有効にしません。

共通設定で、一つの RFC 提案だけを有効にする例:

import { defineConfig } from "vize";

export default defineConfig({
  experimentals: {
    inTagComment: true,
  },
});

共通設定では有効にしたまま、一時的に特定のプラグインだけ無効にする例:

import { defineConfig } from "vite";
import vize from "@vizejs/vite-plugin";

export default defineConfig({
  plugins: [
    vize({
      experimentals: {
        inTagComment: false,
        patternedTemplate: null,
      },
    }),
  ],
});

設定の解決を済ませた低レベルの統合:

compile(templateSource, {
  experimentalInTagComments: resolvedExperimentals.inTagComments,
  experimentalPatternedTemplate: resolvedExperimentals.patternedTemplate,
});

ネイティブ API の呼び出しには、intagComment のような互換性のための別名や、{} のような設定オブジェクトを渡しません。 コンパイラを呼ぶ前に解決してください。

拒否される例

patternedTemplate は構造が不正な場合、処理を拒否します。

<template v-match="status"></template>

<template v-match="status">
  <p v-when:ready="'ready'">Ready</p>
  <p v-when.once="'ready'">Ready again</p>
</template>

inTagComment は、属性に別の式の文法を追加する機能ではありません。

<template>
  <LegacySelect :label="'// this is an attribute value, not an in-tag comment'" />

  <LegacySelect
    :// not a directive argument comment
    selected-id="abc"
  />
</template>

スロットの子要素の個数

RFC #734 の戻り値の形は、TypeScript で子要素の個数を表す契約として保持します。

実装の検証範囲

リリース前の確認

リリースノートに実験機能への対応を記載する前に、出荷する API やコマンドで以下を確認します。

• 公開設定のキーとネイティブ API の直接指定項目が、既定では無効になることを検証している。
• 別名は、推奨名ではなく互換性のために受け付ける名前として記載している。
• Vite プラグインに直接渡す値で、共通設定を有効化でき、明示的に無効化もできる。
• false、null、true、{} が、記載された有効・無効の意味を維持している。
• vapor や jsxVapor のような出力先の代替フラグより、安定版の compiler オプションが優先される。
• RFC の例に、有効な例と、フラグ無効時または不正な構造に対する診断例の両方がある。
• patterned-template のエディターナビゲーションや、動的コンポーネントの strict slot 対応など、未対応の動作を明記している。