Feat/shell script formatter #79

[farhanmallik05]

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]

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

2. 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.

3. 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.

4. 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.