mix xenia.gen.component (Xenia v0.1.1)

Copy Markdown View Source

Generates a component for a JavaScript library: the adapter that drives the library, and a typed HEEx tag for it.

$ mix xenia.gen.component chart data:map title:string --events click
* creating assets/js/chart_adapter.js
* creating lib/my_app_web/components/chart.ex

Then it prints the one line to add to app.js. The adapter is a working placeholder that shows the props it receives; replace its body with your library (see the "Wrapping a library" guide).

Props are name:type pairs, with the types of Phoenix's attr: string, integer, float, boolean, atom, list, map or any. Each --events name becomes an on_<name> attribute.

Co-located

$ mix xenia.gen.component chart data:map --colocated

writes nothing, and prints the declaration and the <script :type={Phoenix.LiveView.ColocatedHook}> to paste into the one module that uses the component, usually a page. The adapter then lives in that module, and app.js doesn't change. Generators don't edit your modules, so it is printed rather than inserted.

Options

  • --events - comma-separated event names, like click,change
  • --colocated - print a co-located version instead of writing files
  • --module - the tag's module, MyAppWeb.Components.Chart by default
  • --web-module and --web-path - MyAppWeb and lib/my_app_web by default
  • --force - overwrite existing files