HOC and v1.0.0 release

[hartzis]

• propose turning this into a HOC pattern ✅
  • (options) => (WrapComponent) => WrappedWithAsyncScript
  • it's so close to being this pattern all ready and is more conducive with community standards. ie. recompose
  • example from this comment and his re-write in fork
• propose cutting a v1.0.0 with the above HOC pattern and current options
  • react-async-script has been a solid choice in the react community for years with a solid API

TODO:

• PR for "standard" HOC pattern
  • Hoc pattern, test fixes and clean-ups #34
• drop dev support for NODE 4/5/6/7. No longer LTS. 6 is only maintenance.
  • update travis node versions to LTS #36
• drop option exposeFuncs and use hoist-non-react-statics
  • Hoist non react statics #35
• use forwardRef - work started
  • sets peer dep to "react": ">= 16.3.0"
  • React forward ref #37
• update readme with migration to 1.0.0 section
  • Add migration notes in README #40
• test release candidate with react-google-recaptcha - v1.0.0 release react-google-recaptcha#91
  • Looking good 👍 - Example: https://codesandbox.io/s/1y4zzjq37l

[dozoisch]

@hartzis Oh yeah I love this HOC pattern! I'm down.

[hartzis]

@dozoisch Thoughts on adding forwardRef functionality with the 1.0.0 release?

• https://reactjs.org/docs/forwarding-refs.html#note-for-component-library-maintainers
• would require peer dep of "react": ">= 16.3.0"
  • would then make react-google-recaptcha@1.0.0 also peer dep on "react": ">= 16.3.0"

hrmm.... 🤔 , i'm slightly torn on this one.

how often and what use cases do you see that users need access to the wrapped components ref instance? it could clean up a bit of react-google-recaptcha's api?

[hartzis]

@dozoisch Thoughts on dropping exposeFuncs option in favor of hoist-non-react-statics. The standard for copying static methods for HOCs - https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over

• cleans up api
• more a standard HOC pattern
  • react-redux usage

[dozoisch]

Ref:
I'm a bit hesitant because of the requirement for 16.3. Although, making it 1.0 does kind of allow us to require people that update to have more recent versions of react. Not totally about how often people need this unfortunately.

Hoist-non:
Yah hoist-non-react-statics would be nice! I wanted to change that for the longest time but never got around to it. I feel like 1.0 is a good timing for this 👍

[hartzis]

I did some research today and read a few package authors that are trying to stay up with reacts evoIving and growing api and community by adopting new features like `forwardRef.

I like the idea of moving the package forward with react too and using the forwardRef api.

The package is still very stable for previous versions of the package and we should continue to link users to previous versions in the readme.

[dozoisch]

Alright! Sounds good :)

[hartzis]

@dozoisch based on the discussion and confusion in #38 any ideas on how to possibly make it flow better for knowing when a script has/is loaded? i'm starting to question if a HOC is even the right approach.

Examples of other patterns not using a HOC:

children as a function:

<AsyncScriptLoader url="www.example.com/js.js" globalName="thing">
  {({ loaded, thing }) => (
    loaded && <ComponentThatNeedsScript thing={thing} />
  )}
</AsyncScriptLoader>

Just callback based:

<AsyncScriptLoader
  url="www.example.com/js.js"
  asyncScriptOnLoad={() => this.setState({loaded: true})} >
    this.state.loaded && <ComponentThatNeedsScript thing={thing} />
</AsyncScriptLoader>

or doesn't have to wrap

<AsyncScriptLoader
  url="www.example.com/js.js"
  asyncScriptOnLoad={() => this.setState({loaded: true})} />
{this.state.loaded && <ComponentThatNeedsScript thing={thing} />}

AsyncScriptLoader conditionally renders its children itself based on whether or not the script has loaded?

... thinking of others...

[hartzis]

i apologize for the above post if it caused you grief.. lol. I took a walk tonight and started thinking more and i do like the HOC pattern best i think.

I'm curious on your thoughts of having the HOC pass some predefined prop(s) to its wrapped component?

• scriptLoaded - boolean: if the script has finished loading or not
• scriptLoading - boolean: if the script is currently loading
• scriptError - string: if present a string value describing the error

Any/All/None of the above sound interesting/useful?

[hartzis]

i'd like to get a v1.0.0-rc1 release candidate out there soonish so i can start using in codesandbox and maybe get a react-google-recaptcha release candidate v1.0.0 out using this release candidate 😸