How to use the @stencil/core.Build.isBrowser function in @stencil/core

To help you get started, we’ve selected a few @stencil/core examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github TeamHive / app-starter / libs / ui / src / components / icon / icon.tsx View on Github external
loadIcon() {
        if (Build.isBrowser && this.isVisible) {
            const url = getUrl(this);
            if (url) {
                getSvgContent(url)
                    .then(svgContent => this.svgContent = svgContent);
            }
        }

        if (!this.ariaLabel) {
            const label = getName(this.name);
            // user did not provide a label
            // come up with the label based on the icon name
            if (label) {
                this.ariaLabel = label
                    .replace('ios-', '')
                    .replace('md-', '')
                    .replace(/\-/g, ' ');
github ionic-team / ionicons / src / components / icon / icon.tsx View on Github external
private waitUntilVisible(el: HTMLElement, rootMargin: string, cb: () => void) {
    if (Build.isBrowser && this.lazy && typeof window !== 'undefined' && (window as any).IntersectionObserver) {
      const io = this.io = new (window as any).IntersectionObserver((data: IntersectionObserverEntry[]) => {
        if (data[0].isIntersecting) {
          io.disconnect();
          this.io = undefined;
          cb();
        }
      }, { rootMargin });

      io.observe(el);

    } else {
      // browser doesn't support IntersectionObserver
      // so just fallback to always show it
      cb();
    }
  }
github Esri / calcite-components / src / components / calcite-switch / calcite-switch.tsx View on Github external
private setupProxyInput() {
    // check for a proxy input
    this.inputProxy = this.el.querySelector("input");

    // if the user didn't pass a proxy input create one for them
    if (!this.inputProxy) {
      this.inputProxy = document.createElement("input");
      this.inputProxy.type = "checkbox";
      this.syncProxyInputToThis();
      this.el.appendChild(this.inputProxy);
    }

    this.syncThisToProxyInput();
    if (Build.isBrowser) {
      this.observer = new MutationObserver(this.syncThisToProxyInput);
      this.observer.observe(this.inputProxy, { attributes: true });
    }
  }
github sean-perkins / fitness-dashboard-prototype / libs / ui / src / components / icon / icon.tsx View on Github external
private waitUntilVisible(el: HTMLElement, rootMargin: string, cb: () => void) {
        if (Build.isBrowser && this.lazy && typeof window !== 'undefined' && (window as any).IntersectionObserver) {
            const io = this.io = new (window as any).IntersectionObserver((data: IntersectionObserverEntry[]) => {
                if (data[0].isIntersecting) {
                    io.disconnect();
                    this.io = undefined;
                    cb();
                }
            }, { rootMargin });

            io.observe(el);

        } else {
            // browser doesn't support IntersectionObserver
            // so just fallback to always show it
            cb();
        }
    }
github ionic-team / stencil / test / karma / test-prerender / global / util.ts View on Github external
export function printLifecycle(cmp: string, lifecycle: string) {
  const elm = document.createElement('div');

  if (Build.isBrowser) {
    const output = document.getElementById(`client-${lifecycle}`);
    elm.textContent = `${cmp} client ${lifecycle}`;
    output.appendChild(elm);

  } else {
    const output = document.getElementById(`server-${lifecycle}`);
    elm.textContent = `${cmp} server ${lifecycle}`;
    output.appendChild(elm);
  }

}
github deckgo / deckdeckgo / remote / src / app / app-root.tsx View on Github external
async componentDidLoad() {
        await this.timerService.restart();

        if (Build.isBrowser) {
            await this.accelerometerService.init();
        }
    }
github ionic-team / ionic / core / src / components / app / app.tsx View on Github external
componentDidLoad() {
    if (Build.isBrowser) {
      rIC(() => {
        const isHybrid = isPlatform(window, 'hybrid');
        if (!config.getBoolean('_testing')) {
          import('../../utils/tap-click').then(module => module.startTapClick(config));
        }
        if (config.getBoolean('statusTap', isHybrid)) {
          import('../../utils/status-tap').then(module => module.startStatusTap());
        }
        if (config.getBoolean('inputShims', needInputShims())) {
          import('../../utils/input-shims/input-shims').then(module => module.startInputShims(config));
        }
        if (config.getBoolean('hardwareBackButton', isHybrid)) {
          import('../../utils/hardware-back-button').then(module => module.startHardwareBackButton());
        }
        import('../../utils/focus-visible').then(module => module.startFocusVisible());
      });
github Esri / calcite-components / src / components / calcite-button / calcite-button.tsx View on Github external
componentWillLoad() {
    if (Build.isBrowser) {
      this.hasText = this.el.textContent.length > 0;
      const elType = this.el.getAttribute("type");
      this.type = this.childEl === "button" && elType ? elType : "submit";
    }
  }
github sean-perkins / fitness-dashboard-prototype / libs / ui / src / components / icon / icon.tsx View on Github external
render() {
        const style = {};
        if (this.color) {
            style['--color'] = `var(--app-color-${this.color})`;
        }
        return (
            {(
                (Build.isBrowser && this.svgContent)
                    ? <div class="icon-inner"></div>
                    : <div class="icon-inner"></div>
            )}
            
        );
    }
}
github openforge / OPENFORGE.IO / src / components / app-blog-content / app-blog-content.tsx View on Github external
componentDidLoad() {
    if (Build.isBrowser) {
      this.handleIcons();
      window.addEventListener('resize', this.handleIcons);
    }
  }