Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
66 lines (58 sloc) 2.08 KB
extends ../docs-base
block doc
h1 Using components
p.
This is how a basic application in fig looks like:
include ../../examples/simplest-app
p.
Below is a brief explanation of what each part of the application
does, see the #[a(href='/docs/api') API reference] for more detailed
documentation.
h3 app.js
p.
The entry file of the fig application, sets the initial state,
registers necessary components and finally mounts the app to the DOM.
.nest
p.
#[b= "fig()"] returns a new fig instance
p.
#[b app.use(component)] registers a component.
p.
#[b app.state] is an object containing your app's data. It should be
set once, and include all object keys that your app will use.
p.
#[b app.mount(#el, componentName)] replaces the specified element
#[b #el] with a #[i root component] of the given #[b componentName].
h3 Component.fig
p.
Contains the one component used by this particular application,
uses #[a(href='https://pugjs.org') pug's] indented syntax. Note that
only the #[b template] tag is required, you don't have to specify the
other tags.
.nest
p.
#[b label] sets the component's default name. If not provided, it is
generated by figify from the filename - converting
PascalCase names to kebab-case.
p.
#[b template] contains pug markup which renders with locals
which are set in #[b script]
p.
#[b style] contents are dumbly appended to the head of your page
inside an ordinary style tag, with no preprocessing. You can style
components with normal css outside of the component file, this is only
provided as a convenience.
p.
#[b script] must export a function, which is evaluated every time
fig attempts to render the component. The function should accept the
following parameters:
.nest
p.
#[b view] object is passed to the #[b template]
p.
#[b opts] is either the #[b app.state] object if
the component is the #[b root component], otherwise contains the opts
passed to the nested component.
p.
#[b emit] is a function which can be used to emit events to the
app's event bus.