Intro

hvue is a GopherJS and wasm wrapper
for the Vue Javascript framework.

This (the “master” branch)
is the go/wasm + GopherJS version. It uses
gopherwasm to provide a compatability
layer between go/wasm and GopherJS. go/wasm is patterned on GopherJS, but
doesn’t have all of its capabilities and language-specific “magic”. In
particular, go/wasm doesn’t have GopherJS’s “dual struct/object” magic, which
allows you to embed a js.Object in a struct, define struct fields with
js:"jsName" tags, and have the compiler automatically change references to
those fields into references to fields in the inner js.Object. So to access a
JavaScript object in go/wasm, you have to use a “naked” js.Value and either use
thing.Get("jsField") (and related functions) everywhere (ew) or write access
functions (less ew). You can also write GopherJS in the same style, and
gopherwasm creates a compatability layer so the go/wasm style compiles under
GopherJS.

The GopherJS-only version is tagged as
v1, and also as
gopherjs.

The wasm branch still exists,
because I shared it pretty widely, and I want those links to keep working for a
while.

So if you want to use the go/wasm code, and/or also use this exact code in
GopherJS, use this branch. If you want the GopherJS-only code, use the
v1 or
gopherjs branch. Click
on over to the README in that branch for installation instructions. They may
need modification, since they still date to when hvue’s “master” branch was
GopherJS-only.

Install

Install Go 1.11

See https://golang.org/dl/.

Install hvue

(Side note: If you skipped it, please make sure you’ve read the Intro above
about the difference between this (the go/wasm + GopherJS code), and previous
GopherJS-only versions.)

cd path/to/github.com # in your $GOPATH
mkdir huckridgesw
cd huckridgesw
git clone git@github.com:HuckRidgeSW/hvue.git

Examples & Demos

Overview

Generally speaking, the
examples follow the
examples in the Vue guide. Some don’t, because
the Guide has changed since I wrote the examples. But most of them do.

01-introduction
has examples from the Vue Introduction page.

02-lifecycle
demos Vue lifecycle hooks
but does not correspond to any specific example on that page.

03-computed-basic
and 04-computed-with-setter
have examples from Computed Properties and Watchers.

And so on. Links are in the code.

Running the examples

GopherJS

cd path/to/github.com/huckridgesw/hvue
echo "var hvue_wasm = false;" > examples/maybe_wasm.js
gopherjs serve github.com/huckridgesw/hvue # listens on 8080

and then

• http://localhost:8080/examples/01-introduction/
• http://localhost:8080/examples/02-lifecycle/
• http://localhost:8080/examples/ for more

WASM

cd path/to/github.com/huckridgesw/hvue
echo "var hvue_wasm = true;" > examples/maybe_wasm.js
go run examples/server/main.go # Listens on 8081
cd examples/??-???? # some examples directory
GOARCH=wasm GOOS=js go build -o ${PWD##*/}.wasm main.go # compile wasm

and then

• http://localhost:8081/examples/01-introduction/
• http://localhost:8081/examples/02-lifecycle/
• http://localhost:8081/examples/ for more

Remember to recompile after any changes. There’s no facility yet to auto-build
(a-la gopherjs build -w or gopherjs serve).

Switching from GopherJS to WASM and back

• Do the appropriate "echo "var hvue_wasm = ?;" > examples/maybe_wasm.js.
  (See above.)
• Be sure to do “shift-cmd-R” (Chrome, macOS; other browsers / OSes will vary)
  to reload without using the cache, to get the new maybe_wasm.js and/or new
  wasm. (Actually I’m not sure you need that to get new wasm, since it’s
  loaded via an explicit fetch() call, but it’s probably not a bad idea.)
  Alternatively, in Chrome you can open the developer console, go to the
  network tab, and check “disable cache”. (AIUI only works while said console
  window is open.)

GoDoc

http://godoc.org/github.com/HuckRidgeSW/hvue