Nightingale Posing Mischievously
    Have ideas to improve npm?Join in the discussion! »

    eslint-plugin-ssr-friendly

    1.0.5 • Public • Published

    eslint-plugin-ssr-friendly

    ESLint plugin that detects incorrect use of DOM globals in order to properly do SSR and in general share code between client-side JS and Node.js modules.

    npm version

    Installation

    npm i --dev eslint-plugin-ssr-friendly

    Then add these to your eslintrc configuration:

    {
      "plugins": ["ssr-friendly"],
      "extends": ["plugin:ssr-friendly/recommended"]
    }

    Rules

    no-dom-globals-in-module-scope

    Disallow use of DOM globals in module and global scope, as this will break any import/require in a NodeJS environment.

    To fix it, wrap it in a function that will call when on client-side.

    Please note that we can't detect if you're still calling this function without properly checking upfront if typeof window !== "undefined".

    Not allowed

    const retina = devicePixelRatio > 2;

    Allowed

    const isRetina = () => devicePixelRatio >= 2;

    no-dom-globals-in-constructor

    Disallow use of DOM globals in class constructors, as this will break SSR if you're instantiating this class as singleton or you're rendering this component.

    To fix it, move this statement in a initOnBrowser() like-method or componentDidMount() if you're using React.

    Please note that we can't detect if you're still calling this function in your constructor without properly checking upfront if typeof window !== "undefined".

    Not allowed

    class myClass {
      constructor() {
        document.title = "Otto";
      }
    }

    Allowed

    class myClass {
      componentDidMount() {
        document.title = "Otto";
      }
    }

    no-dom-globals-in-react-cc-render

    Disallow use of DOM globals in render() method of a React class-component, as this will break SSR if you're rendering this component.

    To fix it, move this statement to componentDidMount()

    Please note that we can't detect if you're still calling this function in your constructor without properly checking upfront if typeof window !== "undefined".

    Not allowed

    class Header extends React.Component {
      render() {
        const width = window.innerWidth;
        return <div style={{ width }} />;
      }
    }

    Allowed

    class Header extends React.Component {
      componentDidMount() {
        this.setState({ width: window.innerWidth });
      }
      render() {
        return <div style={{ width }} />;
      }
    }

    no-dom-globals-in-react-fc

    Disallow use of DOM globals in the render-cycle of a React FC, as this will break SSR if you're rendering this component.

    To fix it, move this statement into a useEffect())

    Not allowed

    const Header = () => {
      window.addEventListener("resize", () => {});
      return <div />;
    };

    Allowed

    const Header = () => {
      useEffect(() => {
        window.addEventListener("resize", () => {});
      }, []);
      return <div />;
    };

    Install

    npm i eslint-plugin-ssr-friendly

    DownloadsWeekly Downloads

    1,759

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    10.4 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar