今週、Starchart でいくつかのメンテナンス作業を行いました。このプロジェクトはしばらく作業されていないため、依存関係を更新しようとしています。

開発空間 / スターチャート

カスタムドメインと証明書を管理するためのセルフサービスツール

スターチャート

Starchart を使用すると、Seneca 開発者コミュニティは、費用をかけたり、個人情報を提供したりすることなく、独自のカスタムサブドメインと SSL 証明書を簡単に作成および管理できます。

Starchart の実行については、導入ガイドを参照してください。開発情報については、貢献ガイドを参照してください。技術的な背景、計画、初期設計の詳細については、wiki を参照してください。

はじめに

インターネットは進化しており、以前は難しかったことが簡単になりました。たとえば、以前は独自の Web サイトをホストするには、サーバー管理、オペレーティングシステム、ネットワーキングなどの知識が必要でした。現在、多くの開発者は、リモートサーバーにまったく触れることなく、GitHub Pages などの (無料) クラウドサービスを選択して、個人用 Web サイトやプロジェクト Web サイトをホストしています。 Vercel、Netlify、または AWS。

インターネットのセキュリティモデルも進化しています。たとえば、ブラウザベンダーはあらゆる場所で HTTPS を採用しています。これは、クライアントとサーバー間の証明書ベースの暗号化を有効にするため、セキュリティに優れています。ただし、同様に…

GitHub で表示

計画は CI ワークフローを修正することでしたが、先週壊れていることが判明しました:

Image description

しかし、私が修正を考える前に、以前の開発者の 1 人である Eakam が問題を解決しました。原因は単に Playwright が古いだけだったことが判明しました。

プレイライトを 1.49.1 にバンプする #772

イーカム1007 投稿日: 2025 年 1 月 18 日

Playwright のインストールが CI (E2E テスト) で失敗します。 Playwright のバージョンをバンピングすると、この問題が修正されるはずです。

参照: Installation error log

GitHub で表示

私は、もっと取り組むべきことを見つけてそれを補う必要があると感じ、より多くの依存関係を更新することが素晴らしい出発点になると考えました。

プロジェクトは 2 年間開発されていなかったため、古いパッケージに起因するセキュリティ上の脆弱性が多数ありました。それらのほとんどは npm Audit fix で修正できました。

@remix-run/eslint-config と @remix-run/react に重大な変更をもたらす修正がさらにいくつかあったため、それらを手動で修正しました。

アップデートの 1 つ (同時に更新したので確実なことは言えませんが、/react に賭けています) により、型チェックエラーが発生しました。理由は [@remix-run/react].useNavigation( ).formData のタイプは未定義になる可能性があります。オプションのチェーンで固定しました。

// Before
const isLoading =
  navigation.state === 'submitting' &&
  Number(navigation.formData.get('id')) === dnsRecord.id;

// After
const isLoading =
  navigation.state === 'submitting' &&
  Number(navigation.formData?.get('id')) === dnsRecord.id;

ログイン後にコピー

私が加えた他の変更は、ポップアップされたいくつかの lint エラーに関係していました (この時点で、ESLint 拡張機能がオフになっていることに気づきましたが、CI では一度も発生しなかったため、これらの警告はアップデートに伴って発生したと確信しています)過去に)。

1 つのファイルで同じモジュールを複数回インポートする例:

// Before
import { getCertificateByUsername } from '~/models/certificate.server';
import { deleteCertificateById } from '~/models/certificate.server';
import { isAdmin } from '~/models/user.server';
import { getUserByUsername } from '~/models/user.server';

// After
import { getCertificateByUsername, deleteCertificateById } from '~/models/certificate.server';
import { isAdmin, getUserByUsername } from '~/models/user.server';

ログイン後にコピー

const が優先される場合は let を使用します。

// Before
let date = val.toLocaleDateString('en-US', {

// After
const date = val.toLocaleDateString('en-US', {

ログイン後にコピー

今までこれらをキャッチできなかったのには驚きました。

また、ESLint 拡張機能をオンにすると、リンターエラーが約 900 件発生したため、少し驚きました。 ESLint が Playwright によって生成された出力をリントしていたことが原因であることがわかりました。そこで、/playwright-report を .eslintignore.

に追加しました。

これが、このスプリントでの私のメンテナンス作業の合計です。最終的に 30 件の重大なセキュリティ問題を修正したので、悪くはありません。

依存関係を更新する #775

ウダイラナ 投稿日: 2025 年 1 月 18 日

多数のセキュリティ脆弱性を修正する必要があります。

変更点

[x] 依存関係をバンプします
[x] /playwright-report を .eslintignore に追加します
[x] タイプチェックとリンターのエラーを修正

GitHub で表示

また、Dependabot を再アクティブ化し、vitest のマイナーバージョンをいくつか変更しました。セキュリティの脆弱性を手動で調査してパッチを適用する必要がなくなるのは素晴らしいことです。

その他のニュースとして、Mattermost への私のプルリクエストの 1 つがついにマージされました!

[GH-29548] `tokens_store.go` で SELECT * を避ける #29558

ウダイラナ 投稿日: 2024 年 12 月 10 日

概要

この PR:

token_store.go 内の SQL クエリを SQLBuilder を使用するように切り替えます
TokenStore への SELECT クエリ内の列を明示的に定義します。
一般的なクエリをコンストラクターに因数分解します。

チケットリンク

#29548 を修正

スクリーンショット

リリースノート

// Before
const isLoading =
  navigation.state === 'submitting' &&
  Number(navigation.formData.get('id')) === dnsRecord.id;

// After
const isLoading =
  navigation.state === 'submitting' &&
  Number(navigation.formData?.get('id')) === dnsRecord.id;

ログイン後にコピー

GitHub で表示

少し前に承認されましたが、メインにマージされるまでに数週間かかりました。

その間、私は別の PR に取り組んでいます。いくつかの変更をするよう求められ、再レビューを待っています。

[MM-53650] 絵文字レンダリングを無効にする設定を Web アプリに追加します #29414

ウダイラナ 投稿日: 2024 年 11 月 28 日

概要

このプルリクエストは、絵文字 (:D) を絵文字 (?) としてレンダリングすることを切り替えるユーザー設定を Web アプリに追加します。

設定は、components/user_settings/display/render_emoticons_as_emoji/ にコンポーネントとして追加され、components/user_settings/display/user_settings_display.tsx にインポートされます。

新しいコンポーネントのレンダリングを支援するために、components/user_settings/advanced/user_settings_advanced.tsx から取得した renderOnOffLabel() 関数を user_settings_display.tsx に追加しました。

設定は、savePreferences() アクションを使用してユーザー設定として保存されます。

環境設定の定数を utils/constants.tsx と webapp/channels/src/packages/mattermost-redux/src/constants/preferences.ts に追加しました。

この設定を実際に使用するために、値を prop として受け取るようにコンポーネント/post_markdown を変更しました。そのために getBool() を使用し、デフォルト値を設定に追加しました。 post_markdown は、この値をオプションオブジェクトの Markdown に渡し、さらに utils/text_formatting.tsx に渡し、最後に新しく追加されたパラメーターとして emoticons.tsx に値を渡します。 emoticons.tsx は値が true かどうかを確認し、true であれば絵文字を絵文字に変換します。

影響を受けるテストを更新し、新しいコンポーネントの単体テストを作成しました。英語の翻訳ファイルも更新しました。

QA テストの手順

ユーザー設定に移動します。
「ディスプレイ」カテゴリに移動します。
「絵文字を絵文字として自動表示する」というセクションを見つけて、「編集」をクリックします。
設定を切り替えて、[保存] をクリックします。
現在のユーザーと他のユーザーが送信したメッセージの絵文字レンダリングは、クライアント側の設定で切り替える必要があります。

チケットリンク

修正 (部分的) https://github.com/mattermost/mattermost/issues/26504 Jira https://mattermost.atlassian.net/browse/MM-53650

注意問題とチケットでは、モバイルアプリへのこの機能の追加についても説明していますが、この PR では説明していません。

スクリーンショット

before	after

リリースノート

// Before
const isLoading =
  navigation.state === 'submitting' &&
  Number(navigation.formData.get('id')) === dnsRecord.id;

// After
const isLoading =
  navigation.state === 'submitting' &&
  Number(navigation.formData?.get('id')) === dnsRecord.id;

ログイン後にコピー

GitHub で表示

この PR の作業は興味深いものでした。なぜなら、最初にこの PR を送信したときは、自分の変更点さえ完全に理解していなかったのでです。長い間離れていた後、レビューからのフィードバックを利用して再びこの作品に取り組むことで、新鮮な視点からこの作品を見て、より深く理解することができました。

Mattermost アプリは、「設定」と「構成」の両方からユーザー設定状態を取得します。参照するようアドバイスされた既存の設定の 1 つを模倣して両方に設定を追加しましたが、「config」はサーバーレベルの設定用であり、この新しい設定はクライアント側のオプションであることが判明しました。レビューのおかげで、自分がどこで間違っていたのかを理解することができました。実際には、必要だと思っていたよりも小さな変更で終わりました。

全体的に見て、かなり生産的な一週間だったと思います。

以上が時代遅れのプロジェクトを復活させるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。