# 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:
- Install Go (1.22 or newer)
- From this directory, execute the command
./build.shwhich will compile the WASM target and start a bare web server. - In your browser, navigate to
http://localhost:9999/ - 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.jsonfile) list of editor plugins - ESLint, to auto-format files (reads the project
.eslintrc.jsonfile) 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.