How to use the global.document.getElementById function in global

/* eslint-disable no-console */
import { document } from 'global';
import { useEffect } from '@storybook/client-api';

const root = document && document.getElementById('root');

export const createDecorator = () => (options: any) => (storyFn: () => any) => {
  useEffect(() => {
    if (root != null) {
      console.log('story was rendered');
      return () => {
        console.log('story was removed');
      };
    }
    return undefined;
  }, [root, options]);

  return storyFn();
};

export const withDecorator = createDecorator();

import { document } from 'global';
import ReactDOM from 'react-dom';
import { render, register } from '@storybook/renderer-react';

import { RenderMainArgs } from './types';

register(true);

const rootEl = document ? document.getElementById('root') : null;

export default async function renderMain({
  storyFn,
  selectedKind,
  selectedStory,
  showMain,
  forceRender,
}: RenderMainArgs) {
  const element = storyFn();

  // We need to unmount the existing set of components in the DOM node.
  // Otherwise, React may not recreate instances for every story run.
  // This could leads to issues like below:
  // https://github.com/storybookjs/react-storybook/issues/81
  // But forceRender means that it's the same story, so we want too keep the state in that case.
  if (!forceRender) {

import { document } from 'global';
import { DebugConfiguration } from '@aurelia/debug';
import { JitHtmlBrowserConfiguration } from '@aurelia/jit-html-browser';
import { Aurelia, INode, CustomElement, CustomElementType, IViewModel } from '@aurelia/runtime';
import { Registration, Constructable } from '@aurelia/kernel';
import { RenderMainArgs } from './types';
import { Component } from './decorators';
import { generateKnobsFor } from '.';

const host = document.getElementById('root'); // the root iframe provided by storybook
let previousAurelia: Aurelia;
export default async function render({
  storyFn,
  selectedKind,
  selectedStory,
  showMain,
  showError,
}: RenderMainArgs) {
  const element = storyFn();

  if (!element) {
    showError({
      title: `Expecting an Aurelia component from the story: "${selectedStory}" of "${selectedKind}".`,
      description: `
        Did you forget to return the Aurelia component from the story?
        Use "() => ({ template: '' })" when defining the story.

revision,
        kind,
        name,
        viewMode,
      });
      return;
    }

    if (!forceRender && previousKind && previousStory) {
      addons.getChannel().emit(Events.STORY_CHANGED, id);
    }

    if (viewMode === 'docs') {
      const NoDocs = () =&gt; <div style="{{">No docs found</div>;
      const StoryDocs = (parameters &amp;&amp; parameters.docs) || NoDocs;
      ReactDOM.render(, document.getElementById('root'));
    } else if (!viewMode || viewMode === 'story') {
      if (getDecorated) {
        render(renderContext);
        addons.getChannel().emit(Events.STORY_RENDERED, id);
      } else {
        showNopreview();
        addons.getChannel().emit(Events.STORY_MISSING, id);
      }
    }

    previousRevision = revision;
    previousKind = kind;
    previousStory = name;
    previousViewMode = viewMode;

    if (!forceRender) {

const DefaultCompatWrapper = Wrapper ? Wrapper.default || Wrapper : undefined;

  if (!DefaultCompatComponent) {
    showError({
      title: `Expecting a Svelte component from the story: "${selectedStory}" of "${selectedKind}".`,
      description: stripIndents`
        Did you forget to return the Svelte component configuration from the story?
        Use "() => ({ Component: YourComponent, data: {} })"
        when defining the story.
      `,
    });

    return;
  }

  const target = document.getElementById('root');

  target.innerHTML = '';

  mountView({
    Component: DefaultCompatComponent,
    target,
    props,
    on,
    Wrapper: DefaultCompatWrapper,
    WrapperData,
  });

  showMain();
}

function showErrorDisplay({ message, stack }) {
  document.getElementById('error-message').textContent = message;
  document.getElementById('error-stack').textContent = stack;

  document.body.classList.remove(classes.MAIN);
  document.body.classList.remove(classes.NOPREVIEW);
  document.body.classList.add(classes.ERROR);
}

padding: 0,
                  flex: 1,
                  width: 'auto',
                }}
              >
                
              
            
          )}
        
      
    );
  }
}

ReactDOM.render(, document.getElementById('root'));

function getOrCreate(id: string, style: Partial): HTMLDivElement {
  const elementOnDom = document.getElementById(id);

  if (elementOnDom) {
    return elementOnDom;
  }

  const element = document.createElement('div') as HTMLDivElement;
  element.setAttribute('id', id);
  Object.assign(element.style, style);

  return element;
}

configure = (options = ViewportTool.defaultOptions) => {
    this.iframe = document.getElementById(storybookIframe);
    const viewports = getViewports(options.viewports);
    const defaultViewport = getDefaultViewport(viewports, options.defaultViewport);

    this.setState(
      {
        defaultViewport,
        viewport: defaultViewport,
        viewports: viewportsTransformer(viewports),
      },
      this.updateIframe
    );
  };

const getElement = () => {
  const storyRoot = document.getElementById('story-root');

  if (storyRoot) {
    return storyRoot.children;
  }
  return document.getElementById('root');
};