Wizly

Wizly automatically post‑processes HTML generated by Magic xpa Web Client. Using powerful, configurable regex rules, it fixes structural and quality issues and lets you switch to other UI frameworks if you prefer. Transformations run right after generation when you trigger Wizly, or automatically for new files when autoTransformOnCreate is enabled; you don’t need to manually edit the generated HTML, which saves time and yields consistent, maintainable output.

Wizly is a VS Code extension that uses a project configuration file. You can export .vswizly.js and keep it in version control so the whole team applies the same rules.

✨ Features

• Regex‑based HTML post‑processing
• Shared project config via .vswizly.js (version‑controlled)
• Auto‑transform on file creation (autoTransformOnCreate)
• Optional info toast (autoTransformToast)
• Transform tag to avoid re‑processing
• Commands: Transform current file, Transform uncommitted files, Export default config
• Works with another editor: keep VS Code open with autoTransformOnCreate: true; new .html files in the workspace transform automatically.
• Compatibility: Requires VS Code 1.103.0+

Bundled Default Rules

The bundled default rules adjust Magic‑generated HTML in several ways to improve structure, framework compatibility, and maintainability:

• Rebuild the base to use a <form> instead of a <div>
• Replace non‑input <label> elements with <span> (Magic puts default text in <label>, which is not per HTML guidelines)
• Remove <div> elements that break Material Design components
• Remove wrapper <div> elements around form controls
• Remove mat-card wrapper for subforms
• Change <div> with inline flex row styling to Bootstrap classes
• Replace visibility inline style with Bootstrap d-none classes (note: display: none does not preserve element height, visibility: hidden does)

Tables:

• Change mat-table (flex layout) to native HTML <table> to support better column behavior and row/col‑span capabilities
• Remove classes container_border and table_row from the table
• Use formgroup on <tr> instead of in each <td> (needs extra testing)

🚀 Usage

Shortcuts

Use Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS) to open the command palette and type "Wizly".

Commands

• Wizly: Transform Current File — transform the active file
• Wizly: Transform All Uncommitted Files — transform files changed in Git
• Wizly: Export Default Rules to .vswizly.js — writes a starter .vswizly.js at the workspace root for team‑sharing (fails if the file exists)

Creating Custom Rules

Edit the project config file directly to tailor transformations for your codebase.

Use a versioned .vswizly.js at the workspace root to share rules across your team. Changes are automatically reloaded. If the file is missing, Wizly uses built‑in defaults.

1. Run Wizly: Export Default Rules to .vswizly.js
2. Open the file in the project root
3. Add, modify, or disable rules as needed
4. Save — changes are picked up automatically

See docs/rules.md for advanced rule fields, rationale, and tips. For full before/after samples, see examples/.

⚙️ Configuration

Optional Auto Transform Settings

Use a single project config to enable optional features:

module.exports = {
  autoTransformOnCreate: true,
  autoTransformToast: true, // show an info toast per new file
  transformTag: {
    enable: true,
    dateFormat: "YYYY-MM-DD",
    timeFormat: "HH:mm",
    template: "Changed by Wizly on {date} at {time}"
  },
  rules: [ /* ... */ ]
};

Prettier Integration

Wizly uses Prettier to format HTML after applying regex rules.

• Bundled Prettier: the extension ships its own Prettier package, so users don’t need to install anything.
• Prefer workspace Prettier: if your project has prettier installed, Wizly will prefer that workspace version.
• Respect workspace config: Wizly reads your Prettier configuration (.prettierrc, prettier.config.*, or package.json prettier field) via resolveConfig and applies it. Team settings take precedence over the defaults.
• VS Code Prettier extension: the separate “Prettier” editor extension is not required for Wizly. Wizly uses its own Prettier module, but still follows your project configuration.

Known Limitations

• Regex is not well‑suited for deeply nested or recursive HTML structures. Prefer narrow, targeted patterns and consider splitting complex transforms into multiple rules.

Rules execute in order (top to bottom). Later rules run on the output of earlier rules, so order matters. Place broader patterns first and more specific ones after to get the desired result.

Optional Transform Tag

Add a tag at the top of transformed files to avoid re‑processing and provide an audit trail. Placeholders {date} and {time} are supported; see the configuration example above.

🎯 Example

See examples/ for full before/after sample.

ℹ️ How Replace Works

See docs/rules.md for details on the EOF marker, named groups, and regex flags.

🛠️ Development

Development Requirements

• Node.js 16+

Note: End users installing the extension do not need Node.js. Runtime compatibility is governed by engines.vscode in package.json (currently ^1.103.0).

📝 Changelog

See CHANGELOG.md for the full release history.

🤝 Contributing

Feedback and ideas are welcome via Issues: https://github.com/SybrenVanZon/wizly-plugin/issues

Credits

• Built for Magic xpa Web Client workflows.
• Author: Sybren van Zon — Magic xpa & Angular · Wizly author & maintainer.

Disclaimer

This extension is not affiliated with or endorsed by Magic xpa or Magic Software Enterprises. All trademarks are the property of their respective owners.

📄 License

MIT License — see LICENSE file for details.