package vue-ppx
Install
Dune Dependency
Authors
Maintainers
Sources
md5=2f7195496033d04f40dd1e0f206822f9
sha512=d68bb17fe8cf87579e3b34842bdd9b7b6e7aa0b6ca6aa390c900464a5d96e2c124b86d4e1d0780da065d7e2599b5d0beef1fcc7890709a447a9fd7522bf9efaf
Description
Published: 23 Jan 2023
README
vue-ppx
vue-ppx
is a preprocessor to build vue.js applications in js_of_ocaml
Providing arguments
data To provide a data argument use:
let%data (message: Js_of_ocaml.Js.js_string Js_of_ocaml.Js.t) = Js_of_ocaml.Js.string "Hello, world!"
The constraint on the expression allows to constraint the type when you use this field in methods, computed or other arguments.
method In the same way:
let%meth print this (name: Js_of_ocaml.Js.js_string Js_of_ocaml.Js.t) =
Format.printf "Hi %s!\n%s" (Js_of_ocaml.Js.to_string name) (Js_of_ocaml.Js.to_string this##.message)
The first argument this
is bound to the vue instance and allows to use the data/methods/computed and other.
computed
let%comp reversed_message this : Js_of_ocaml.Js.js_string Js_of_ocaml.Js.t =
Js_of_ocaml.Js.string @@
String.mapi (fun i _c -> String.get s (String.length s - i - 1)) @@
Js_of_ocaml.Js.to_string this##.message
watch
let%watch message _this new_ old =
Format.printf "message changed to %s" @@ Js_of_ocaml.Js.to_string new_
Constraints are added to ensure new_ and old are of the same type and if the property watched is constrained in you data or props, the type will be constrained in the same way
props For components you can give you external props using:
let%prop (prop1 : int) = { dft=3 }
In the record given, you can provide the default prop (default
/dft
), a validator (validator
), a javascript constructor (cons
/type
) and if the prop is required (req
/required
). The constraint will be used in some cases to provide a javascript constructor and set the required flag (if it's not required and no default is provided, use a constraint with Js_of_ocaml.Js.optdef
). If there is no options in the record, you can use a unit expression.
For data, methods, computed, watch and props, the argument or exit types can be automaticall converted from or to js_of_ocaml using ppx_deriving_jsoo using the [@conv]
(or [@@conv]
) attribute. If the global conv
option is used (cf. further), a local [@noconv]
can be used to ignore the conversion for this binding.
template For component also the template can be provided using:
{%%template|
<div>
<input v-model="message" placeholder="message"></input>
<button @click="print('John')">print</button>
{{ message }}
</div>
|}
If you want the template to be compiled into a render function at the compilation, use:
{%%render|
...
|}
Templates can also be compiled into render function when using the environment variable VUE_COMPILE=1
. The default compiler is provided in the library ($OPAM_SWITCH_PREFIX/bin/vue-compiler
) but another one can be provided using VUE_COMPILER=binary.exe
.
Instantiating a component
To instantiate a component, use:
[%%comp { components=[ C1; C2.component ]; debug; plugins=[Ezjs_min.Unsafe.global##._MyPlugin]; modules=[Foo, Foo_jsoo]; conv }]
It will create a value component
with the arguments given in the same structure (in the same module). The components
option allows to register the components C1.component
and C2.component
locally for this component. The debug option will print out the expression of this componennt.
The
plugins
option will set the plugins for the applicationThe
conv
option will try to convert all types (for data, props, methods, ...) given to or from js_of_ocaml using ppx_deriving_jsoo.The
modules
option makes the correspondance between a module and its counterpart where the convert functions are (for example for the typeFoo.t
when the functions of conversion areFoo_jsoo.jsoo_conv
as used in ppx_deriving_jsoo.
Instantiating the application
To instantiate the application, use:
[%%app { components=[ C0 ]; mount="app42"; debug; conv; unhide; export }]
It will create a value _app
with the arguments given in the same structure, with the components registered globally.
The
mount
option will also mount the application on the element with the id"app42"
usingVue.mount ~id:"app42" _app
(the default id is"app"
).The
unhide
option will set the element with id"app-loading"
todisplay=none
and the element with the id"app"
todisplay=block
.The
export
option will export the app object to the window (window.app
).plugins
,conv
andmodules
can also be used for the root application.
Using the instance
In method or computed or watch arguments you can use the component instance $data
, $props
, $el
, $options
, $parent
, $root
, $slots
, $refs
, $attrs
using: [%data]
, [%props]
, ... You can also use the instance functions:
$emit
:
let%meth f this = [%emit "myevent" this arg1]
$forceUpdate
: with[%update]
$nextTick
:
let%meth f this =
[%next this (fun this -> ...)]
Dependencies (4)
- ezjs_min
-
ppx_deriving_jsoo
>= "0.3"
-
dune
>= "3.6"
-
ocaml
>= "4.13"
Dev Dependencies (1)
-
odoc
with-doc
Used by
None
Conflicts
None