no-restricted-globals - HubSpot docs

The no-restricted-globals rule prevents usage of browser globals that are not available in the sandboxed web worker environment.

Rule details

This rule blocks usage of the following globals:

importScripts(): a worker function that doesn’t work in the UI extensions environment.
addEventListener() / removeEventListener(): global event listeners don’t work for DOM events.
location: not available in workers.
history: not available in workers.

Instead of the above browser globals, use the following UI extension alternatives:

Restricted Global	Alternative	Purpose
`importScripts('script.js')`	`import { module } from './script.js'`	Use ES modules instead.
`addEventListener('click', handler)`	`<Button onClick={handler}>`	Use React component event props.
`location`	`context`	Access location information through context.
`history`	`<Link>` or `actions.openIframeModal()`	Navigate using the Link component or actions.

Examples

importScripts()

Instead of using importScripts():

// Incorrect
importScripts('helper.js');
window.importScripts('worker-script.js');
self.importScripts('lib.js');

Use ES modules:

import { helperFunction } from './helper.js';
import { Logger } from './lib.js';

const result = helperFunction();

Event listeners

Instead of using global event listeners:

// Incorrect
addEventListener('click', handleClick);
window.addEventListener('load', handleLoad);
removeEventListener('click', handleClick);

Use React component event props:

import { Button, Input } from '@hubspot/ui-extensions';

const Extension = () => {
  const handleClick = () => {
    console.log('Button clicked');
  };

  const handleChange = (value) => {
    console.log('Input changed:', value);
  };

  return (
    <>
      <Button onClick={handleClick}>Click Me</Button>
      <Input onChange={handleChange} />
    </>
  );
};

location and history

Instead of accessing location or history:

// Incorrect
const path = location.pathname;
const url = window.location.href;

history.pushState({}, '', '/new-path');
history.back();

Use context for location information:

import { Text, hubspot } from '@hubspot/ui-extensions';

const Extension = ({ context }) => {
  const currentLocation = context.location;
  const portalId = context.portal.id;

  return (
    <Text>
      Current path: {currentLocation} in portal {portalId}
    </Text>
  );
};

hubspot.extend(({ context }) => <Extension context={context} />);

Use actions and <Link> for navigation:

import { Button, Link, hubspot } from '@hubspot/ui-extensions';

const Extension = ({ actions }) => {
  const navigate = () => {
    actions.openIframeModal({ url: 'https://example.com' });
  };

  return (
    <>
      <Button onClick={navigate}>View Site</Button>
      <Link href="https://example.com">Click to Navigate</Link>
    </>
  );
};

hubspot.extend(({ actions }) => <Extension actions={actions} />);

Local variables

Local variables with these names are allowed:

// These are allowed because they're local variables, not global objects
const location = { pathname: '/custom' };
const history = { push: (path) => console.log(path) };

function parseLocation(location) {
  return location.href;
}

​Rule details

​Examples

​importScripts()

​Event listeners

​location and history

​Local variables

​Related resources