Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Feat/shell script formatter #79#80

Open
farhanmallik05 wants to merge 3 commits into
betterbugs:develop from
farhanmallik05:feat/shell-script-formatter-79
Open

Feat/shell script formatter #79 #80
farhanmallik05 wants to merge 3 commits into
betterbugs:develop from
farhanmallik05:feat/shell-script-formatter-79

Conversation

@farhanmallik05

@farhanmallik05 farhanmallik05 commented Mar 10, 2026

Copy link
Copy Markdown

Description

This PR introduces a new development tool: Shell Script Formatter. It uses a WebAssembly (WASM) implementation (@wasm-fmt/shfmt) to offer professional, customizable formatting for Bash and .sh scripts directly in the browser.

Key Features:

  • WASM Formatting Engine: Utilizes @wasm-fmt/shfmt for standard, predictable formatting.
  • Customizable Options: Users can adjust indent size, toggle tabs, set binary operators on the next line, adjust switch case depth, and more.
  • Fallback Heuristic Formatter: Included a custom Regex-based fallback formatter to act as a resilient backup if the WASM module fails to load.
  • Integrated Linter: Built a custom basic linter that parses the script and displays warnings for common ShellCheck pitfalls:
    • Unquoted variables (SC2086)
    • Legacy backtick subshells (SC2006)
    • Unsafe cd without || exit (SC2164)
    • Dangerous rm -rf usage with variables (SC2115)
    • Variable injection in printf (SC2059)
    • Missing Shebang check (SC1008)
  • Monaco Editor Integration: Provides full syntax highlighting for the input and output.

Changes Included:

  • Added app/components/developmentToolsComponent/shellFormatter.tsx.
  • Registered the new tool in app/libs/constants.tsx and app/libs/developmentToolsConstant.tsx.
  • Updated next.config.js to enable Webpack asyncWebAssembly.
  • Added @wasm-fmt/shfmt to package.json.

Testing

  • Verified WASM initialization loop logic.
  • Tested formatting parameters (tabs vs. spaces).
  • Verified linter rules capture bad syntax successfully.
  • Verified copy and download functionalities.

@SyedFahad7 SyedFahad7 self-requested a review March 11, 2026 21:30

@SyedFahad7 SyedFahad7 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR - I reviewed pr-80 in depth.

Blocking issue

  1. Build is currently failing due to incorrect WASM init usage in shellFormatter.tsx.
  • npm run build fails with:
    • Type error: This expression is not callable ... mod.default()
  • Location: app/components/developmentToolsComponent/shellFormatter.tsx around the mod.default() call in the format handler.
  • This needs to be fixed before merge.

Functional review notes

  1. Binary ops toggle is wired in the WASM path, but not in fallback behavior.
  • In WASM format call, binaryNextLine is passed and works for multiline &&/||.
  • In heuristic fallback, binaryNextLine is not implemented, so behavior is inconsistent when WASM fails.
  1. Fallback formatter can be semantically risky for shell scripts.
  • Fallback currently trims each line and re-indents heuristically.
  • For edge cases (e.g., heredocs/case bodies/complex nested constructs), this may alter script meaning or intended content.
  1. Linting is custom heuristic, not ShellCheck integration.
  • Warnings render correctly in the UI, but detection logic is regex-based and can produce false positives/negatives.
  • Suggest clarifying wording as "ShellCheck-inspired checks" rather than implying full ShellCheck parity.

UI/behavior checks

  • Format, Copy, Download, Clear button flow is implemented correctly.
  • Output editor is read-only.
  • No command execution path found; formatting/linting are string transformations only (good safety posture).

Requested changes before approval

  1. Fix the WASM initialization/type error so npm run build passes.
  2. Make fallback behavior safer (or disable fallback for unsupported cases) to avoid semantic drift.
  3. Either:
    • implement binaryNextLine in fallback too, or
    • disable/hide that option when fallback is active.
  4. Keep docs/tool description explicit that linting is heuristic, not full ShellCheck.

Please push an update and I’ll re-review quickly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@SyedFahad7 SyedFahad7 SyedFahad7 requested changes

Requested changes must be addressed to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

AltStyle によって変換されたページ (->オリジナル) /