JSSアプリをJSS 22.3にアップグレードする

Angularアプリのアップデート

AngularアプリをJSS 22.3にアップグレードするには、複数の変更が必要です。このプロセスのステップ1から6は以下のようにまとめられます:

• JssContextServiceとそれに関するすべての参照を更新します。なぜなら、一部のsitecore-jss-angularコンポーネントはアプリケーションの状態に依存しているからです。
• SSR用の辞書データ取得時のパフォーマンス向上のためにi18nの初期化を更新すること。

Angularアプリケーションの更新:

1. src/app/jss-context.service.tsでは、以下のことを行ってください。

   • 以下のインポートステートメントを確認してください:

     import { LayoutServiceData } from '@sitecore-jss/sitecore-jss-angular';

   • その文を次の文に置き換えてください。

     import { LayoutServiceData, JssStateService } from '@sitecore-jss/sitecore-jss-angular';

   • インポートBehaviorSubjectを削除してください。

   • 以下の項目を削除してください:

     state: BehaviorSubject;

   • 以下のget文を追加し、示すようにコンストラクタを置き換えます。

     get state() { return this.stateService.state; } get stateValue() { return this.stateService.getStateValue(); } constructor(protected transferState: TransferState, protected layoutService: JssLayoutService, protected stateService: JssStateService) { }

   • すべてのthis.state.nextインスタンスをthis.stateService.setStateに置き換えます。

   • すべてのthis.state.valueインスタンスをthis.stateService.getStateValue()に置き換えます。

2. src/app/jss-context.server-side.service.tsでは、以下のことを行ってください。

   • 以下のインポートステートメントを追加してください:

     import { JssStateService } from '@sitecore-jss/sitecore-jss-angular';

   • インポートJssDataFetcherServiceを削除してください。

   • コンストラクタを修正して、JssStateServiceを渡してベースクラスに伝播させます。例えば:

     constructor( protected transferState: TransferState, protected layoutService: JssLayoutService, protected stateService: JssStateService, // this initial state from sitecore is injected by server.bundle for "integrated" mode @Inject('JSS_SERVER_LAYOUT_DATA') private serverToSsrState: JssState ) { super(transferState, layoutService, stateService); }

3. app.module.tsでは、HttpClientインポート文を削除してください。

   以下はJSS 22.3に適した更新ファイルの例です:

   TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: (transferState: TransferState) => new JssTranslationClientLoaderService(new JssTranslationLoaderService(), transferState), deps: TransferState, }, }),

4. app.server.module.tsでは、TransferStateをインポートします。

   以下はJSS 22.3に適した更新ファイルの例です:

   import { NgModule, TransferState } from "@angular/core";

   TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: ( ssrViewBag: { key: string: unknown; dictionary: { key: string: string }; }, transferState: TransferState ) => new JssTranslationServerLoaderService(ssrViewBag, transferState), deps: 'JSS_SERVER_VIEWBAG', TransferState, }, }),

5. app/i18n/jss-translation-server-loader.service.tsでは、以下のことを行ってください。

   • TransferStateを注射してください。
   • データdictionarytransferStateに設定されていることを確認してください。

   以下はJSS 22.3に適した更新ファイルの例です:

   import { Inject, Injectable, makeStateKey, StateKey, TransferState, } from "@angular/core"; import { DictionaryPhrases } from "@sitecore-jss/sitecore-jss-angular"; ...

   export const dictionaryStateKey: StateKey = makeStateKey( 'dictionary' );

   export class JssTranslationServerLoaderService implements TranslateLoader { constructor( @Inject('JSS_SERVER_VIEWBAG') private serverViewBag: { key: string: unknown; dictionary: DictionaryPhrases }, private transferState: TransferState ) {}

   getTranslation(_lang: string) { const dictionary = this.serverViewBag.dictionary;

   this.transferState.set(dictionaryStateKey, dictionary); ... } }

6. app/i18n/jss-translation-client-loader.service.tsでは、以下のことを行ってください。

   • TransferStateを注射してください。
   • transferStateで辞書データを確認し、サーバーから提供されている場合は利用してください。

   以下はJSS 22.3に適した更新ファイルの例です:

   import { dictionaryStateKey } from './jss-translation-server-loader.service'; import { Injectable, TransferState } from '@angular/core'; import { TranslateLoader } from '@ngx-translate/core'; import { DictionaryPhrases } from '@sitecore-jss/sitecore-jss-angular'; import { EMPTY, Observable, of } from 'rxjs'; import { JssTranslationLoaderService } from './jss-translation-loader.service'; import { dictionaryStateKey } from './jss-translation-server-loader.service';

   @Injectable() export class JssTranslationClientLoaderService implements TranslateLoader { constructor( private fallbackLoader: JssTranslationLoaderService, private transferState: TransferState ) {}

   getTranslation(lang: string): Observable { const dictionary = this.transferState.get(dictionaryStateKey, null);

   if (dictionary) { return of(dictionary); } ... } }

7. ルート .gitignoreファイルに .angular用のルールを追加してください。まだ追加していなければ。

8. もしまだであれば、src/environments/.gitignoreの内容を以下のものに置き換えてください。

   * !.gitignore

9. package.json年に、以下の更新devDependencies:

   "@types/node": "~22.9.0", "@typescript-eslint/eslint-plugin": "^8.14.0", "@typescript-eslint/parser": "^8.14.0", ... "typescript": "~5.4.0",

10. src/tsconfig.app.jsonでは、compilerOptionsから以下のものを削除します:

    "types":

11. src/tsconfig.server.jsonのためにステップ10を繰り返します。

12. tsconfig.jsonでは、の上に "types": "node" を加えtypeRootsのように:

    ... "types": "node", "typeRoots": "node_modules/@types", ...

13. configを分割して新しいプラグインアーキテクチャにgenerate-component-factory移行したいなら、以下のことをしてください:

    • Angularテンプレートからプラグインファイルをアプリの/scripts/configディレクトリにコピー/scripts/generate-component-factory。
    • scripts/bootstrap.tsファイルにインポート./scripts/configと./generate-component-factoryしてください。
    • Angularテンプレートから scripts/generate-plugins.ts ファイルをコピーし、 bootstrap.ts ファイルにインポートします。

    以下はJSS 22.3に適した更新されたbootstrap.tsファイルの例です:

    /*    PLUGINS GENERATION */ require("./generate-plugins");

    /*   CONFIG GENERATION */ require("./generate-config");

    /*   COMPONENT FACTORY GENERATION */ require("./generate-component-factory");

14. アプリケーションのJSSパッケージを更新し、依存関係をインストールしてください。

Reactアプリの更新

Reactアプリケーションを更新するには:

• .eslintrcの場合、ecmaVersionを13に設定します。以下の例に示されています。

  "ecmaFeatures": { "jsx": true }, "ecmaVersion": 13, "babelOptions": { "presets": "@babel/preset-react" }

アプリの更新Vue.js

Vue.js申請を更新するには:

1. package.jsonでは、以下の依存関係は不要となり、削除可能です。

   • @vue/server-renderer
   • @vue/compiler-sfc

2. 以下のパッケージを記載されたバージョンに更新してください:

   表2。

   パッケージ

   新バージョン

   vue

   ^3.5.12

   @vue/apollo-option

   ^4.0.0

   @vue/apollo-ssr

   ^4.0.0

3. アプリケーションのJSSパッケージを更新し、依存関係をインストールしてください。

NodeのヘッドレスSSR Experience Edgeアプリを更新してください

Node headless SSR Experience Edgeアプリのアップデート:

• 以下のパッケージを記載されたバージョンに更新してください:

  表3。

  パッケージ

  新バージョン

  @types/node

  ^22.9.0

  typescript

  ~5.6.3

NodeのヘッドレスSSRプロキシアプリを更新してください

NodeのヘッドレスSSRプロキシアプリを更新するには:

• 以下のパッケージを記載されたバージョンに更新してください:

  表4。

  パッケージ

  新バージョン

  @types/node

  ^22.9.0

  typescript

  ~5.6.3

アプリケーション依存関係の更新

アップグレードしたアプリケーションを正しく動作させるには、依存関係を更新する必要があります。

依存関係を更新するには:

1. 既存のアプリケーションのpackage.jsonファイルで、すべての @sitecore-jssパッケージをバージョン ~22.3に更新してください。

2. 以下のコマンドで依存関係をインストールします:

   npm install