hippofish/CONTRIBUTING.md

Contribution guide

We're glad you're interested in contributing Firefish! In this document you will find the information you need to contribute to the project.

Translation (i18n)

Firefish uses Weblate for translation and internationalization management.

If your language is not listed in Weblate, please open an issue.

You can contribute without knowing how to code by helping translate here:

Issues

Before creating an issue, please check the following:

• To avoid duplication, please search for similar issues before creating a new issue.
• Do not use Issues to ask questions or troubleshooting.
  • Issues should only be used to feature requests, suggestions, and bug tracking.
  • Please ask questions or troubleshooting in the Matrix room.

Warning

Do not close issues that are about to be resolved. It should remain open until a commit that actually resolves it is merged.

Before implementation

When you want to add a feature or fix a bug, first have the design and policy reviewed in an Issue (if it is not there, please make one). Without this step, there is a high possibility that the MR will not be merged even if it is implemented.

At this point, you also need to clarify the goals of the MR you will create, and make sure that the other members of the team are aware of them. MRs that do not have a clear set of do's and don'ts tend to be bloated and difficult to review.

Also, when you start implementation, assign yourself to the Issue (if you cannot do it yourself, ask another member to assign you). By expressing your intention to work the Issue, you can prevent conflicts in the work.

Well-known branches

• The main branch is tracking the latest release and used for production purposes.
• The develop branch is where we work for the next release.
  • When you create a MR, basically target it to this branch. But create a different branch
• The l10n_develop branch is reserved for localization management.
• feature/* branches are reserved for the development of a specific feature

Creating a merge request (MR)

Thank you for your MR! Before creating a MR, please check the following:

• If possible, prefix the title with a keyword that identifies the type of this MR, as shown below.
  • fix / refactor / feat / enhance / perf / chore etc. You are also welcome to use gitmoji. This is important as we use these to A) easier read the git history and B) generate our changelog. Without propper prefixing it is possible that your MR is rejected.
  • Also, make sure that the granularity of this MR is appropriate. Please do not include more than one type of change or interest in a single MR.
• If there is an Issue which will be resolved by this MR, please include a reference to the Issue in the text. Good examples include Closing: #21 or Resolves: #21
• Check if there are any documents that need to be created or updated due to this change.
  • For example, you need to update docs/api-change.md if the MR includes API changes.
• If you have added a feature or fixed a bug, please add a test case if possible.
• Please make sure that formatting, tests and Lint are passed in advance.
  • You can run it with pnpm run format, pnpm run test and pnpm run lint. See more info
• If this MR includes UI changes, please attach a screenshot in the text.

Thanks for your cooperation 🤗

Reviewers guide

Be willing to comment on the good points and not just the things you want fixed 💯

Review perspective

• Scope
  • Are the goals of the MR clear?
  • Is the granularity of the MR appropriate?
• Security
  • Does merging this MR create a vulnerability?
• Performance
  • Will merging this MR cause unexpected performance degradation?
  • Is there a more efficient way?
• Testing
  • Does the test ensure the expected behavior?
  • Are there any omissions or gaps?
  • Does it check for anomalies?

Preparing the development environment

1. Install the following software

• nodejs
• rustup
• cargo
• sea-orm-cli
• podman
• podman-compose

2. Copy the config file

cp .config/dev.example.yml .config/default.yml

3. Start postgres/redis containers

pnpm run dev:up

4. Build Firefish

pnpm install
pnpm run build:debug
pnpm run migrate

5. Start Firefish on your localhost

pnpm run start

You can use the following commands to initialize the database:

pnpm run dev:init
pnpm run migrate

Make sure to clear your browser local storage after initializing the dev instance.

Deploy (SOON)

The /deploy command by issue comment can be used to deploy the contents of a MR to the preview environment.

/deploy sha=<commit hash>

An actual domain will be assigned so you can test the federation.

THE FOLLOWING IS OUTDATED:

Merge

Release

Release Instructions

1. Commit version changes in the develop branch (package.json)
2. Create a release PR.
   • Into master from develop branch.
   • The title must be in the format Release: x.y.z.
     • x.y.z is the new version you are trying to release.
3. Deploy and perform a simple QA check. Also verify that the tests passed.
4. Merge it.
5. Create a release of GitHub
   • The target branch must be master
   • The tag name must be the version

Development

During development, it is useful to use the pnpm run dev command. This command monitors the server-side and client-side source files and automatically builds them if they are modified. In addition, it will also automatically start the Firefish server process.

Testing

• Test codes are located in /test.

Run test

Create a config file.

cp test/test.yml .config/

Prepare DB/Redis for testing.

docker-compose -f test/docker-compose.yml up

Alternatively, prepare an empty (data can be erased) DB and edit .config/test.yml.

Run all test.

yarn test

Run specify test

TS_NODE_FILES=true TS_NODE_TRANSPILE_ONLY=true TS_NODE_PROJECT="./test/tsconfig.json" pnpx mocha test/foo.ts --require ts-node/register

Vue

Firefish uses Vue(v3) as its front-end framework.

• Use TypeScript.
• When creating a new component, please use the Composition API (with setup syntax and ref syntax) instead of the Options API.
  • Some of the existing components are implemented in the Options API, but it is an old implementation. Refactors that migrate those components to the Composition API are also welcome.

nirax

niraxは、Misskeyで使用しているオリジナルのフロントエンドルーティングシステムです。 vue-routerから影響を多大に受けているので、まずはvue-routerについて学ぶことをお勧めします。

ルート定義

ルート定義は、以下の形式のオブジェクトの配列です。

{
	name?: string;
	path: string;
	component: Component;
	query?: Record<string, string>;
	loginRequired?: boolean;
	hash?: string;
	globalCacheKey?: string;
	children?: RouteDef[];
}

Warning

現状、ルートは定義された順に評価されます。 たとえば、/foo/:idルート定義の次に/foo/barルート定義がされていた場合、後者がマッチすることはありません。

複数のルーター

vue-routerとの最大の違いは、niraxは複数のルーターが存在することを許可している点です。 これにより、アプリ内ウィンドウでブラウザとは個別にルーティングすることなどが可能になります。

Notes

How to resolve conflictions occurred at yarn.lock?

Just execute yarn to fix it.

INSERTするときにはsaveではなくinsertを使用する

#6441

placeholder

SQLをクエリビルダで組み立てる際、使用するプレースホルダは重複してはならない 例えば

query.andWhere(new Brackets(qb => {
	for (const type of ps.fileType) {
		qb.orWhere(`:type = ANY(note.attachedFileTypes)`, { type: type });
	}
}));

と書くと、ループ中でtypeというプレースホルダが複数回使われてしまいおかしくなる だから次のようにする必要がある

query.andWhere(new Brackets(qb => {
	for (const type of ps.fileType) {
		const i = ps.fileType.indexOf(type);
		qb.orWhere(`:type${i} = ANY(note.attachedFileTypes)`, { [`type${i}`]: type });
	}
}));

Not null in TypeORM

const foo = await Foos.findOne({
	bar: Not(null)
});

のようなクエリ(barがnullではない)は期待通りに動作しない。 次のようにします:

const foo = await Foos.findOne({
	bar: Not(IsNull())
});

null in SQL

SQLを発行する際、パラメータがnullになる可能性のある場合はSQL文を出し分けなければならない 例えば

query.where('file.folderId = :folderId', { folderId: ps.folderId });

という処理で、ps.folderIdがnullだと結果的にfile.folderId = nullのようなクエリが発行されてしまい、これは正しいSQLではないので期待した結果が得られない だから次のようにする必要がある

if (ps.folderId) {
	query.where('file.folderId = :folderId', { folderId: ps.folderId });
} else {
	query.where('file.folderId IS NULL');
}

[] in SQL

SQLを発行する際、INのパラメータが[](空の配列)になる可能性のある場合はSQL文を出し分けなければならない 例えば

const users = await Users.find({
	id: In(userIds)
});

という処理で、userIdsが[]だと結果的にuser.id IN ()のようなクエリが発行されてしまい、これは正しいSQLではないので期待した結果が得られない だから次のようにする必要がある

const users = userIds.length > 0 ? await Users.find({
	id: In(userIds)
}) : [];

配列のインデックス in SQL

SQLでは配列のインデックスは1始まり。 [a, b, c]の aにアクセスしたいなら[0]ではなく[1]と書く

null IN

nullが含まれる可能性のあるカラムにINするときは、そのままだとおかしくなるのでORなどでnullのハンドリングをしよう。

undefinedにご用心

MongoDBの時とは違い、findOneでレコードを取得する時に対象レコードが存在しない場合 undefined が返ってくるので注意。 MongoDBはnullで返してきてたので、その感覚でif (x === null)とか書くとバグる。代わりにif (x == null)と書いてください

Migration作成方法

packages/backendで:

pnpm dlx typeorm migration:generate -d ormconfig.js -o <migration name>

• 生成後、ファイルをmigration下に移してください
• 作成されたスクリプトは不必要な変更を含むため除去してください

コネクションにはmarkRawせよ

Vueのコンポーネントのdataオプションとしてmisskey.jsのコネクションを設定するとき、必ずmarkRawでラップしてください。インスタンスが不必要にリアクティブ化されることで、misskey.js内の処理で不具合が発生するとともに、パフォーマンス上の問題にも繋がる。なお、Composition APIを使う場合はこの限りではない(リアクティブ化はマニュアルなため)。

JSONのimportに気を付けよう

TypeScriptでjsonをimportすると、tscでコンパイルするときにそのjsonファイルも一緒にdistディレクトリに吐き出されてしまう。この挙動により、意図せずファイルの書き換えが発生することがあるので、jsonをimportするときは書き換えられても良いものかどうか確認すること。書き換えされて欲しくない場合は、importで読み込むのではなく、fs.readFileSyncなどの関数を使って読み込むようにすればよい。

コンポーネントのスタイル定義でmarginを持たせない

コンポーネント自身がmarginを設定するのは問題の元となることはよく知られている marginはそのコンポーネントを使う側が設定する

その他

HTMLのクラス名で follow という単語は使わない

広告ブロッカーで誤ってブロックされる