wb-flow

Appearance

/wbToWBC — Command Hub ​

/wbToWBC transforms standard Vue/JS code into the WBC (Web Component) format used by the wb-core engine. It analyzes the source component's structure — props, data, methods, lifecycle hooks — and maps them to WBC declarative primitives, preserving behavior while adapting the implementation to the @wbc-ui2 ecosystem. It is the only Vue-specific command in the suite.

🎯 Strategic Position ​

/wbToWBC is the bridge between standard Vue and the WBC ecosystem. Every other command in the suite works with any codebase — this one is specialized for component migration. Use it when moving existing components into @wbc-ui2; do not use it to create new components from scratch.

  • Migrating a component — convert .vue to WBC format.
  • After a framework change — adapt loader and plugin config.
  • Before validation — run /wbValid on the output.

🛠️ Operating Modes ​

ModeTriggerOutput
Convert/wbToWBC <component.vue>WBC component with auto-detected framework, behavior preserved

✅ What a useful conversion contains ​

A useful conversion includes at minimum:

  1. Framework auto-detection — correctly identified source framework.
  2. Behavior preservation — props, data, methods, and lifecycle hooks mapped faithfully.
  3. Loader and plugin configuration generated for the target bundler.
  4. Optimization config applied for the target environment.

🚫 What it cannot do ​

Not thisUse instead
Validate the result/wbValid
Audit conversion quality/wbAudit

It also only converts existing components — it does not create new ones from scratch.

📚 Reading Order ​

  1. ELI5 — the one-paragraph mental model.
  2. Practical — step-by-step walkthrough on a real project.
  3. Expert — architecture, edge cases, and when NOT to use.
  4. Examples — annotated transcripts (Part 1, Part 2).
  5. Exhaustive simulation · Live demo.
  • wbToWBC.md — the command reference this hub orients you around.
  • /wbValid — validate the conversion output.
  • /wbAudit — scored quality assessment of the result.

Quick Reference ​

bash
/wbToWBC src/MyComponent.vue            # convert a Vue component to WBC

/wbToWBC <file> --snap=<label>           # pin output to .wb/snaps/

← Home · Commands · Install | wb-flow on npm · flow.wbc-ui.com · wi-bg.com