GomaPulse

Installation ​

@gomagaming/* packages are published as scoped private packages on npmjs.com. Access is controlled by a per-client npm token issued by Goma Gaming. This page walks through getting set up.

Try it live ​

Before installing anything, open the Playground: a working sandbox that mounts the same @gomagaming/* widget source you'll install. Toggle the widget rail to mount one or several widgets, edit their config in the inspector's Form / JSON tabs, then click Share setup in the TopBar to capture a ?s=… URL that round-trips the same state on any machine. The Snippet tab outputs vanilla / React / Vue 3 embed code with your chosen config inlined: copy that snippet straight into the install steps below.

The playground tracks the same widget source that ships to npm at every release, so if a widget renders cleanly there it'll render cleanly in your app once the install steps below are done.

What you need ​

  • An npm automation token issued to your team. Ask your Goma Gaming contact; tokens are bound to a specific organization.
  • Node 22 or newer.
  • Any modern bundler that respects peerDependencies (Vite, webpack, Rollup, esbuild, all fine).
  • Vue 3, Pinia, vue-router, vue-i18n, and @vueuse/core already installed at the host-app level (these are peer dependencies of the widgets, your bundler dedupes them across however many widgets you install).

1. Configure .npmrc ​

Create or edit .npmrc in your project root:

//registry.npmjs.org/:_authToken=${NPM_TOKEN}
@gomagaming:registry=https://registry.npmjs.org/

Set the NPM_TOKEN environment variable to the token you were issued:

bash
export NPM_TOKEN=<your-token>

Do not commit your token. Use ${NPM_TOKEN} interpolation as shown above so the literal token never appears in your repo. Most CI systems support setting NPM_TOKEN as a secret.

If you skip this step, npm install @gomagaming/... fails with:

npm error code E401
npm error 401 Unauthorized - GET https://registry.npmjs.org/@gomagaming%2fevents-horizontal - Unable to authenticate, your authentication token seems to be invalid.

(The exact wording may vary by npm version.)

2. Install the widgets ​

Pick the widgets you need:

bash
npm install @gomagaming/events-horizontal
npm install @gomagaming/sports-navigation-horizontal
npm install @gomagaming/sports-navigation-dialog
npm install @gomagaming/betslip-floating
npm install @gomagaming/betslip-sidebar
npm install @gomagaming/game-details

You should see @gomagaming/core and @gomagaming/sports-domain appear in your node_modules/ as transitive dependencies: these are the shared spine that gets deduplicated across all @gomagaming/* widgets you install.

If you have not already added the peer deps:

bash
npm install vue pinia vue-router vue-i18n @vueuse/core

For widgets that talk to a live WAMP feed, also install:

bash
npm install autobahn-browser

Check each widget's docs page for its specific peer requirements.

3. Embed in vanilla HTML ​

html
<goma-events-horizontal id="ev"></goma-events-horizontal>
<script type="module">
  import '@gomagaming/events-horizontal'

  document.getElementById('ev').config = {
    apiBaseUrl: 'https://api.example.com',
    locale: 'en',
  }
</script>

The static import is evaluated before the rest of the module body, so the element is already defined by the time config is assigned. Loading the widgets from the CDN instead reverses that: the loader imports the widget modules asynchronously, so your script usually runs while the element is still undefined. That is handled (the assignment is replayed once the element upgrades), but it behaved differently on release sets at 0.34.0 and earlier; see Setting a property before the widget's definition has loaded.

4. Embed in React 18 ​

Custom elements work in React 18+. Use a ref to set the config property (since it's an object, not a string attribute):

jsx
import { useEffect, useRef } from 'react'
import '@gomagaming/events-horizontal'

function MyEventsWidget({ config }) {
  const ref = useRef(null)
  useEffect(() => {
    if (ref.current) ref.current.config = config
  }, [config])
  return <goma-events-horizontal ref={ref} />
}

Bundler dedup ​

When you install several widgets, your bundler sees Vue listed as a peerDependency of each one and collapses it down to a single shared copy in your final bundle. This is the load-bearing reason the widgets are split into multiple packages instead of one giant bundle: paying customers who use one widget pay only for that widget's code, and customers who use many widgets share the runtime once.

Verify dedup in DevTools → Network tab: a single vue.runtime.*.js, a single pinia.*.js, a single autobahn.min-*.js. Multiple copies indicate your bundler isn't dedup-ing: make sure Vue, Pinia, vue-router, vue-i18n, and @vueuse/core are top-level dependencies in your package.json.

Every sports widget bundle externalises its peer dependencies (vue, pinia, vue-router, vue-i18n, @vueuse/core, autobahn-browser, swiper) and the workspace libraries (@gomagaming/core, @gomagaming/sports-domain), so your bundler resolves each of those once across all the widgets you install.

Stay current: versions before 0.2.0 did not externalise peer deps and are deprecated on npm. Always install the latest published version.

Reference ​