npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@avensia-oss/ts-transform-hoist-objects-in-props

v0.0.5

Published

A TypeScript custom transformer that hoists object literal in JSX props

Downloads

78

Readme

ts-transform-hoist-objects-in-props

A TypeScript custom transformer that hoists object literals and functions that are passed to JSX props. The use case it tries to solve first and foremost is passing style objects to CSS-in-JS components such as Glitz and Emotion, like <MyComp css={{background: 'red'}} />, but it will hoist any object literal or function prop that it finds and determines to be hoistable.

What it actually does

Let's say that you have a component like this:

export default () => <MyComp css={{ background: 'red' }} />;

Each time this component renders the object literal in the css prop will be recreated, and the Comp cannot use object equality to bail out of rendering again, even though we pass exactly the same data again. The CSS-in-JS lib could of course use React.memo(), but you typically have lots of styled components and doing that extra comparision is probably about as expensive as just rendering it again. So it could actually be more costly to add React.memo() here. And React.memo() doesn't bail on rendering for cases like this:

export default () => <MyComp css={{ background: 'red', color: theme => (theme === 'dark' ? 'black' : 'white') }} />;

Since we pass a function that will also be recreated on each render, and React.memo() won't be able to bail.

This transformer will transform the code from this:

export default () => <MyComp css={{ background: 'red', color: theme => (theme === 'dark' ? 'black' : 'white') }} />;

To this:

export default () => <MyComp css={__$hoisted_o0} />;
const __$hoisted_o0 = { background: 'red', color: theme => (theme === 'dark' ? 'black' : 'white') };

This means that we only declare the object once, and that object gets reused on each render. That has a positive (albeit small) impact on memory since we're allocating less objects, but it also means that the component can bail quickly on rendering since it's very cheap to compare objects by reference.

Other props than for styling

This transform works well for any object literals in props, but it's specifically designed for CSS-in-JS. Since it hoists function props as well as object literal props it might help you with callback props, but only in a few cases. It will optimize this case:

  render() {
    return <Comp onClick={someValue => importedFunction(someValue)} />;
  }

Since it can determine that all values used in the function can be hoisted. But most such callback props look more like this:

  render() {
    return <Comp onClick={someValue => this.someMethod(someValue)} />;
  }

And this case can't be hoisted since this won't be available in the top level scope. Trying to hoist such props is possible, but it's not the goal of this transform.

Trade-offs

This transform intentionally hoists things that aren't 100% static values. If an object literal contains an imported variable it will still be hoisted, since we assume that the imported value won't ever change. If it ever changes it should be sent as a prop and not as an imported variable. Imported variables are quite common for shared constants, and those are safe to hoist.

If you pass a function in the object literal the transform is quite smart in how it determines if the object can be hoisted. It checks all parameters to the function, and then checks all variables that you use in the function. If you use any variables that are not parameters, imported or declared at the top level of the module the object will not be hoisted. You can see this behavior in the tests.

Other useful transform

If you find this transform useful you might want to use these ones as well: https://github.com/avensia-oss/

Installation

yarn add @avensia-oss/ts-transform-hoist-objects-in-props

Usage with webpack

Unfortunately TypeScript doesn't let you specifiy custom transformers in tsconfig.json. If you're using ts-loader with webpack you can specify it like this: https://github.com/TypeStrong/ts-loader#getcustomtransformers-----before-transformerfactory-after-transformerfactory--

The default export of this module is a function which expects a ts.Program an returns a transformer function. Your config should look something like this:

const hoistObjectsInPropsTransform = require('@avensia-oss/ts-transform-hoist-objects-in-props');

return {
  ...
  options: {
    getCustomTransformers: (program) => ({
      before: [hoistObjectsInPropsTransform(program, {
        /**
         * This regex lets you filter which props you want to run the transformation on. It should be safe to
         * run it on any props that contain object literals, but if you want to white list or black list props
         * this lets you do that.
         */
        propRegex: /.*/,
      })]
    })
  }
  ...
};