make: Add make targets for formatting and linting frontend code.

This adds linting and formatting of frontend code when running `make lint`, `make format`, or any of the variations.

I am adding this because I didn't know how to check the code and so I had to wait for CI to fail, which I found irritating.

In order to make this reasonable, I factored out `make` targets for building *frontend/node_modules*, so I could depend on them.

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8463
GitOrigin-RevId: 71882ec90490efbf87d428d08eaec2ae849a0a36
This commit is contained in:
Samir Talwar 2023-03-23 16:14:39 +01:00 committed by hasura-bot
parent 14fcaafa43
commit 17855bf65a
4 changed files with 57 additions and 11 deletions

View File

@ -9,6 +9,7 @@ help:
include ./scripts/make/build.mk
include ./scripts/make/ci.mk
include ./scripts/make/frontend.mk
include ./scripts/make/ghcid.mk
include ./scripts/make/legacy-tests.mk
include ./scripts/make/lint.mk

View File

@ -9,11 +9,6 @@ GENERATED_CABAL_FILES = $(foreach package_file,$(PACKAGE_YAML_FILES),$(wildcard
build-all: $(GENERATED_CABAL_FILES)
cabal build all --enable-tests --enable-benchmarks
.PHONY: build-console-assets
## build-console-assets
build-console-assets:
cd frontend && npm install && npm run server-build:ce
.PHONY: build
## build: build non-pro graphql executable
build: $(GENERATED_CABAL_FILES)

12
scripts/make/frontend.mk Normal file
View File

@ -0,0 +1,12 @@
.PHONY: build-console-assets
## build-console-assets
build-console-assets: frontend/node_modules
cd frontend && npm run server-build:ce
# Install node_modules if package-lock.json changes
frontend/node_modules: frontend/package-lock.json
cd frontend && npm install && touch node_modules
# Cleanly install node_modules if package.json changes
frontend/package-lock.json: frontend/package.json
cd frontend && npm ci

View File

@ -83,17 +83,41 @@ check-format-nix:
echo "$(NIX_FMT) is not installed; skipping"; \
fi
.PHONY: format-frontend
## format-frontend: auto-format all frontend code
format-frontend: frontend/node_modules
@echo 'running nx format:write'
cd frontend && npm run format:write:all
.PHONY: format-frontend-changed
## format-frontend-changed: auto-format all frontend code (changed files only)
format-frontend-changed: frontend/node_modules
@echo 'running nx format:write'
cd frontend && npm run format:write
.PHONY: check-format-frontend
## check-format-frontend: check frontend code
check-format-frontend: frontend/node_modules
@echo 'running nx format:check'
cd frontend && npx nx format:check
.PHONY: check-format-frontend-changed
## check-format-frontend-changed: check frontend code (changed files only)
check-format-frontend-changed: frontend/node_modules
@echo 'running nx format:check'
cd frontend && npx nx format:check --base=origin/main
.PHONY: format
format: format-hs format-nix
format: format-hs format-nix format-frontend
.PHONY: format-changed
format-changed: format-hs-changed format-nix
format-changed: format-hs-changed format-nix format-frontend-changed
.PHONY: check-format
check-format: check-format-hs check-format-nix
check-format: check-format-hs check-format-nix check-format-frontend
.PHONY: check-format-changed
check-format-changed: check-format-hs-changed check-format-nix
check-format-changed: check-format-hs-changed check-format-nix check-format-frontend-changed
.PHONY: lint-hs
## lint-hs: lint Haskell code using `hlint`
@ -135,8 +159,22 @@ lint-shell-changed:
$(SHELLCHECK) $(CHANGED_SHELL_FILES); \
fi
.PHONY: lint-frontend
## lint-frontend: lint all frontend code
lint-frontend: frontend/node_modules
@echo 'running nx lint'
cd frontend && npm run lint
.PHONY: lint-frontend-changed
## lint-frontend-changed: lint all frontend code
lint-frontend-changed: frontend/node_modules
@echo 'running nx lint'
cd frontend && npx nx affected --target=lint --fix --parallel=3
.PHONY: lint
lint: lint-hs lint-shell check-format
## lint: run all lint commands, and check formatting
lint: lint-hs lint-shell lint-frontend check-format
.PHONY: lint-changed
lint-changed: lint-hs-changed lint-shell-changed check-format-changed
## lint: run all lint commands, and check formatting (changed files only)
lint-changed: lint-hs-changed lint-shell-changed lint-frontend-changed check-format-changed