wasm

README

GOBL.js (WASM)

This folder contains the files necessary to execute the GOBL client library in your web browser. The core library is written in Go, and compiled to WebAssembly. The file gobl.js provides a thin JavaScript wrapper around the compiled WebAssembly running in a web worker.

To execute a simple demo of the GOBL library in your browser, you will need to:

1. Install Go (1.17 or newer)
2. From this directory, execute the command ./build.sh which will compile the WASM target and start a bare web server.
3. In your browser, navigate to http://localhost:9999/
4. Open the JavaScript console in your browser to see the test output.

---

Running The GOBL.js Playground

Development

To start the local server via browser-sync, including hot reloading (no browser refresh required to see changes):

npm run dev

To start the interactive cyprus.io browser test runner. You must have a server running (npm run dev or npm run start for prod). This interactive UI runs tests against whichever server you have running. (Note: the Lighthouse performance tests will fail against the development server, because performance is much slower there.):

npm run test

To run the testing suite as it would run on a ci server, against the production build:

npm run ci

To run the code formatting checking tools eslint (and prettier):

npm run check-formatting

Production

For deployment, build the project and serve it on a simple http server.

npm start

Packages

Motivation	Package
development HTTP server, with hot reloading	browser-sync
production HTTP Server	http-server
Test runner	Cypress (note: we're just using the free and open source runner, not the paid/hosted product)
Application performance tool	Lighthouse
Standardized Code Formatting (syntax gotchas, etc)	ESLint
Standardized Code formatting (for cypress test code)	eslint-plugin-cypress
Standardized Code Formatting (indentation, etc)	Prettier
Getting eslint and prettier to play well together (avoiding conflicting rules)	eslint-config-prettier
Running prettier rules as part of eslint	eslint-plugin-prettier
For CI, wait for the server to start before running tests	wait-on
Keeping performance/accessibility in check via Lighthouse	cypress-audit which uses lighthouse-ci
CSS Library	Tailwind CSS

Recommended Text Editor Extensions

• Prettier, to auto-format files (reads the project .prettierrc.json file) list of editor plugins
• ESLint, to auto-format files (reads the project .eslintrc.json file) list of editor plugins
• MarkdownLint, to call out common markdown mistakes (reads the project .markdownlint.json). list of editor plugins
• A Tailwind CSS editor plugin, to do css class autocompletion from this library.

Notes

• We're using tailwindcss via a CDN for now to try it out. If we decide to stick with it, we should add it in via a css build tool (like postcss) instead of using the CDN directly.
• For now everything (dev, prod, testing) uses port 8080. If/when that gets in the way of anything, we can set it up to use a different port for dev/testing vs prod.