Dom - A Go API for different Web APIs for WebAssembly target

Overview

Go DOM binding (and more) for WebAssembly

This library provides a Go API for different Web APIs for WebAssembly target.

It's in an active development, but an API will be carefully versioned to avoid breaking users. Use Go dependency management tools to lock a specific version.

More information about Go's WebAssembly support can be found on Go's WebAssembly wiki page.

Features:

  • Better JS API (wrappers for syscall/js)
  • Basic DOM manipulation, styles, events
  • Input elements
  • SVG elements and transforms
  • LocalStorage and SessionStorage
  • Extension APIs (tested on Chrome):
    • Native Messaging
    • Bookmarks
    • Tabs
  • net-like library for WebSockets
    • Tested with gRPC
  • wasm-server for fast prototyping

Quickstart

Pull the library and install wasm-server (optional):

go get -u github.com/dennwc/dom
go install github.com/dennwc/dom/cmd/wasm-server

Run an example app:

cd $GOPATH/src/github.com/dennwc/dom
wasm-server

Check result: http://localhost:8080/

The source code is recompiled on each page refresh, so feel free to experiment!

Similar Projects

Editor Configuration

If you are using Visual Studio Code, you can use workspace settings to configure the environment variables for the go tools.

Your settings.json file should look something like this:

{
    "go.toolsEnvVars": { "GOARCH": "wasm", "GOOS": "js" }
}
Issues
  • Change method signature to js.Class(class string, path ...string)

    Change method signature to js.Class(class string, path ...string)

    Both JavaScript and TypeScript allow access to global objects via dotted notation. At the same time, many libraries wrap their objects, classes and methods to avoid adding them to the global namespace.

    Allowing dotted notation in js.Get() would simplify accessing wrapped types and would automatically supplement both js.Class() and js.New(). The following code works:

    mdc := js.Get("mdc")
    chips := mdc.Get("chips")
    chipset := chips.Get("MDCChipSet")
    chipsetEl := dom.Doc.CreateElement("div")
    chipsetEl.SetAttribute("class", "mdc-chip-set")
    chipset.Call("attachTo", chipsetEl)
    

    But this code is much simpler to write and has the added benefit of using the js.Class() caching:

    chipset := chips.Class("mdc.chips.MDCChipSet")
    chipsetEl := dom.Doc.CreateElement("div")
    chipsetEl.SetAttribute("class", "mdc-chip-set")
    chipset.Call("attachTo", chipsetEl)
    
    good first issue 
    opened by smoyer64 5
  • Getting an element value ?

    Getting an element value ?

    Trying to do the same thing as this issue => #6 but I think I still miss something ? In my situation, I have input fields inside a form, can you provide a way to manipulate forms ? I noticed that looping over the nodeList we got more elements than the actual form ? Any insight on that ?

    form := dom.Doc.GetElementById("custom_form")
    btn := dom.Doc.GetElementById("btn")
    t := document.Call("getElementById", "target")
    logger := log.New((*writer)(&t), "", log.LstdFlags)
    
    btn.AddEventListener("click", func(_ dom.Event) {
    	nodes := form.ChildNodes()
    	for _, element := range nodes {
    		logger.Print("ID: " + string(element.Id()) + " Value: " + string(element.JSValue().Get("value").String()))
    	}
    })
    
    opened by HarishHary 3
  • Build strings breaks godoc

    Build strings breaks godoc

    It is useful to be able to read the documentation on godoc.

    https://godoc.org/github.com/dennwc/dom

    Unfortunately the build strings in this project hide the code from the godoc system, which presumably wants to build for linux.

    //+build wasm,js
    

    This doesn't seem to be an issue for other projects. Do we really need the build strings?

    https://godoc.org/honnef.co/go/js/dom

    bug 
    opened by miketonks 3
  • error when following instructions in README

    error when following instructions in README

    I followed the instructions in the readme and I got this error(?)

    element.go:6:2: build constraints exclude all Go files in /usr/local/Cellar/go/1.11.4/libexec/src/syscall/js
    

    when running go get -u github.com/dennwc/dom

    this is my first attempt at playing with wasm so IDK if something in my environment is off. does GOOS or GOARCH need to be set for any of these commands?

    question 
    opened by jeffwillette 3
  • Getting element values?

    Getting element values?

    How does one get element values with this package?

    I tried calling myElement.GetAttribute("value"), but that ended up returning an empty value, rather than the value of my input field.

    Is this something that needs additional implementation? Happy to PR something if that's the case.

    question 
    opened by alvid-the-bot 3
  • Cannot make it to work with go modules

    Cannot make it to work with go modules

    Hello, quick note: I'm go newbie and I've never encountered similar error with other go packages. I'm trying to use this package using go modules (go.mod). Unfortunately, it seems like only color.go file is visible. Here are my project files:

    go.mod:

    module goasmf
    
    go 1.12
    
    require github.com/dennwc/dom v0.3.0
    

    main.go:

    package goasmf
    
    import (
        "fmt"
        "github.com/dennwc/dom"
    )
    
    func main() {
        println("Testing WebAsm!")
        var color dom.Color = "red"
        dom.GetWindow()
    }
    

    go build output:

    tomek$ go build
    # goasmf
    ./main.go:13:2: undefined: dom.GetWindow
    

    Working without modules and downloading dependency using go get -t github.com/dennwc/dom works fine, though

    question 
    opened by Kerrex 2
  • go 1.12 breaking changes

    go 1.12 breaking changes

    As detailed here: https://golang.org/doc/go1.12#syscall/js

    The changes made to syscall/js have now broken certain parts of the library.

    I'd like to know wether or not this is something you are working on. If not, I'm happy to start looking into it and helping out where able.

    question 
    opened by ladydascalie 2
  • Confusion regarding the Get & Set functions for js.go

    Confusion regarding the Get & Set functions for js.go

    Hi! I saw Value{global} being used and global being used for the get & set function. Are they interchangeable?

    // Get is a shorthand for Global().Get().
    func Get(name string, path ...string) Value {
    	return Value{global}.Get(name, path...)
    }
    
    // Set is a shorthand for Global().Set().
    func Set(name string, v interface{}) {
    	global.Set(name, toJS(v))
    }
    
    opened by jarkyll 2
  • Possibly add instructions for getting autocomplete working in vscode?

    Possibly add instructions for getting autocomplete working in vscode?

    After a little struggle I was able to get autocomplete working in VS code by setting some workspace level environment variables. I'm not sure how well known that is. Do you think it is worth adding to the README in this project?

    I will gladly open a PR, but if you don't think this is the right place that is understandable.

    help wanted 
    opened by DonMcNamara 2
  • Add NodeType() function to NodeBase type

    Add NodeType() function to NodeBase type

    Needed to properly iterate over just child elements as desired in #38.

    See https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType for enumerated node types.

    good first issue 
    opened by smoyer64 1
  • Avoid non-json content conflict in storage on cmd/app/main.go

    Avoid non-json content conflict in storage on cmd/app/main.go

    Ensure that cmd/app/main.go uses a prefix in storage to avoid conflict with non-json content

    Closes #36

    Signed-off-by: Ricardo Seriani [email protected]

    opened by ricardoseriani 1
  • Is this project dead?

    Is this project dead?

    There are now two forks on Github that have on-going maintenance while there's not really any activity here ... should I switch to one of the maintained projects? As you've seen from my previous PRs, I'm not afraid to help with this project but you'd need to be around to at least merge (or reject) the PRs.

    opened by smoyer64 5
  • Improve WebSocket API

    Improve WebSocket API

    The net.Conn interface doesn't match how WebSockets work as it's not a stream oriented protocol.

    See https://github.com/golang/go/issues/18152#issuecomment-264322154 and https://github.com/gopherjs/websocket/issues/29

    I think it'd be a good idea to recommend my library instead to avoid duplicate work. It supports compiling to Wasm and provides a more semantically appropriate API (while also providing a net.Conn adapter) or the API in this library should be changed.

    opened by nhooyr 0
  • compile failure with go 1.13

    compile failure with go 1.13

    If compiling with Go 1.13, a compiling error comes up:

    github.com/dennwc/dom/js

    ../../../../go/pkg/mod/github.com/dennwc/[email protected]/js/bytes.go:20:2: undefined: js.TypedArray ../../../../go/pkg/mod/github.com/dennwc/[email protected]/js/bytes.go:30:7: undefined: js.TypedArrayOf

    The change log (https://golang.org/doc/go1.13#syscall/js) states that the types have been changed: "TypedArrayOf has been replaced by CopyBytesToGo and CopyBytesToJS for copying bytes between a byte slice and a Uint8Array."

    bug 
    opened by torbenschinke 2
  • Simplify signatures in js.go

    Simplify signatures in js.go

    In PR #41 I talked about simplifying the signatures of several methods in js.go but rejected that as I thought it would be a breaking change. Since then, I've realized that because the first parameter is the same type as the second variadic parameter, the change is not in fact breaking and simplifies the signature of the end-user API.

    I'd suggest that the following three method signatures be changed below:

    • From Get(name string, path ...string) to Get(name ...string
    • From Class(class string, path ...string) to Class(class ...string)
    • From (v Value) Get(name string, path ...string) to (v Value) Get(name ...string)

    The change to the Class method slightly simplifies the key generation but otherwise the code is pretty much the same. The main benefit is that, having a single parameter, it makes more sense when a nested class is specified. Consider Class("mdc", "chips", "MDCChipSet") as described in my previous example - with the original signature, the class parameter would contain mdc but the actual class (MDCChipSet) being loaded would be the second element of the path slice. With the revised signature, the elements make sense in the order they're provided.

    I do realize this is a completely cosmetic change but wanted to present the idea prior to the library reaching 1.0. If it sounds reasonable, I've got a branch I used to test that this could be done simply - assign this to me and I'll clean up that branch and submit a PR.

    question 
    opened by smoyer64 2
Releases(v0.3.0)
  • v0.3.0(Mar 16, 2019)

    New features

    • Support for Go 1.12 and synchronous callbacks.
    • Introduced HTMLElement.
    • Implemented most missing functions and properties for Element.
    • Window.Open and SetLocation.
    • Separate functions for loading JS and CSS files in require package.

    Fixes, tests and gelpers

    • Added Chrome-based tests for WebSockets.
    • Fix race condition on getting a dial error for WS.
    • Added js.Error constructor.
    Source code(tar.gz)
    Source code(zip)
  • v0.2.1(Nov 14, 2018)

    New features

    • Support loading external JS and CSS files to DOM.

    Fixes and helpers

    • Allow getting multiple values in a chain: v.Get("a", "b", "c").
    • Expose Call on the package level.
    • Allow any value in Set (similar to Call).
    • Special case for getting Object and Array classes.
    • Add build tags to webrtc package.
    • Element constructors can be called on the package level.
    • Exposed head element.
    Source code(tar.gz)
    Source code(zip)
  • v0.2.0(Oct 14, 2018)

    New features

    • Support for promises
    • Support JSON encoding and decoding of js.Value
    • Experimental WebRTC support

    wasm-server

    • Allow specifying apps folder
    • Automatically load current exec script
    • Use Go compiler from GOROOT

    Fixes and helpers

    • Add a helper for async callbacks
    • WS: fix server error handling
    • WS: rewrite client code
    • Valid function now checks for zero Value
    Source code(tar.gz)
    Source code(zip)
  • v0.1.0(Sep 27, 2018)

    Initial release

    • Better JS API (wrappers for syscall/js)
    • Basic DOM manipulation, styles, events
    • Input elements
    • SVG elements and transforms
    • LocalStorage and SessionStorage
    • Extension APIs (tested on Chrome):
      • Native Messaging
      • Bookmarks
      • Tabs
    • net-like library for WebSockets
      • Tested with gRPC
    • wasm-server for fast prototyping
    Source code(tar.gz)
    Source code(zip)
Owner
Denys Smirnov
Denys Smirnov
DOM library for Go and WASM

Go DOM binding (and more) for WebAssembly This library provides a Go API for different Web APIs for WebAssembly target. It's in an active development,

Denys Smirnov 455 Jun 16, 2022
A package to build progressive web apps with Go programming language and WebAssembly.

Go-app is a package for building progressive web apps (PWA) with the Go programming language (Golang) and WebAssembly (Wasm). Shaping a UI is done by

Maxence Charriere 6.2k Jul 1, 2022
A package to build progressive web apps with Go programming language and WebAssembly.

Go-app is a package for building progressive web apps (PWA) with the Go programming language (Golang) and WebAssembly (Wasm). Shaping a UI is done by

Maxence Charriere 6.2k Jun 26, 2022
Golang-WASM provides a simple idiomatic, and comprehensive API and bindings for working with WebAssembly for Go and JavaScript developers

A bridge and bindings for JS DOM API with Go WebAssembly. Written by Team Ortix - Hamza Ali and Chan Wen Xu. GOOS=js GOARCH=wasm go get -u github.com/

TeamOrtix 71 Jun 23, 2022
Go compiler for small places. Microcontrollers, WebAssembly, and command-line tools. Based on LLVM.

TinyGo - Go compiler for small places TinyGo is a Go compiler intended for use in small places such as microcontrollers, WebAssembly (Wasm), and comma

TinyGo 11k Jun 30, 2022
WebAssembly interop between Go and JS values.

vert Package vert provides WebAssembly interop between Go and JS values. Install GOOS=js GOARCH=wasm go get github.com/norunners/vert Examples Hello W

null 73 Jun 22, 2022
WebAssembly for Proxies (Golang host implementation)

WebAssembly for Proxies (GoLang host implementation) The GoLang implementation for proxy-wasm, enabling developer to run proxy-wasm extensions in Go.

MOSN 37 May 28, 2022
πŸΉπŸ•ΈοΈ WebAssembly runtime for Go

Wasmer Go Website β€’ Docs β€’ Slack Channel A complete and mature WebAssembly runtime for Go based on Wasmer. Features Easy to use: The wasmer API mimics

Wasmer 2.1k Jun 23, 2022
πŸΉπŸ•ΈοΈ WebAssembly runtime for Go

Wasmer Go Website β€’ Docs β€’ Slack Channel A complete and mature WebAssembly runtime for Go based on Wasmer. Features Easy to use: The wasmer API mimics

Wasmer 2.1k Jul 1, 2022
Vugu: A modern UI library for Go+WebAssembly (experimental)

Vugu: A modern UI library for Go+WebAssembly (experimental)

Vugu 4.4k Jun 22, 2022
WebAssembly runtime for wasmer-go

gowasmer When compiling Go to WebAssembly, the Go compiler assumes the WebAssembly is going to run in a JavaScript environment. Hence a wasm_exec.js f

mattn 87 Jun 18, 2022
A template project to demonstrate how to run WebAssembly functions as sidecar microservices in dapr

Live Demo 1. Introduction DAPR is a portable, event-driven runtime that makes it easy for any developer to build resilient, stateless and stateful app

Second State 121 Jun 21, 2022
Tiny, blazing fast WebAssembly compute

Sat, the tiny WebAssembly compute module Sat (as in satellite) is an experiment, and isn't ready for production use. Please try it out and give feedba

Suborbital 278 Jul 2, 2022
WebAssembly Lightweight Javascript Framework in Go (AngularJS Inspired)

Tango Lightweight WASM HTML / Javascript Framework Intro WebAssembly is nice, Go on the web is nice, so I ported Tangu to Go and WebAssembly. Tangu is

enimatek 4 Jun 8, 2022
Running a Command line tool written in Go on browser with WebAssembly

Running a command line tool written in Go on browser with WebAssembly This repo contains code/assets from the article Files: . β”œβ”€β”€ article.md

wcchoi 79 Apr 5, 2022
This library provides WebAssembly capability for goja Javascript engine

This module provides WebAssembly functions into goja javascript engine.

YC-L 1 Jan 10, 2022
A Brainfuck to WebAssembly compiler written in Go.

brainfuck2wasm A Brainfuck to WebAssembly compiler written in Go. I am writing this compiler for a Medium article. When I complete the compiler, I'll

Luke I. Wilson 2 Jun 6, 2022
wazero: the zero dependency WebAssembly runtime for Go developers

wazero: the zero dependency WebAssembly runtime for Go developers WebAssembly is a way to safely run code compiled in other languages. Runtimes execut

Tetrate Labs 1.6k Jun 22, 2022
Framework for building distributed services with Web Assembly

Tarmac Framework for building distributed services with Web Assembly Tarmac is a unique framework designed for the next generation of distributed syst

Benjamin Cane 192 Jun 26, 2022