Attach static methods of wrapped component to loadable component

Attach static methods of wrapped component to loadable component

c1.mjs

import * as React from 'react'
const createElement = React.default.createElement
const Component = React.default.Component

export default class c1 extends Component {
  constructor( props ){
    super( props )
  }
  render(){
    return createElement( 'p', {}, 'hello' )
  }
  static async preloadDataState( parameters ){
    debugger
  }
}

main.mjs

import * as React from 'react'
const createElement = React.default.createElement

import * as LoadableComponents from 'loadable-components'
const loadable = LoadableComponents.default.default

import * as LoadableComponentsServer from 'loadable-components/server'
const getLoadableState = LoadableComponentsServer.default.getLoadableState

const c1 = loadable( () => import( /* webpackChunkName: "main.c1" */ './c1.mjs' ), {
  modules: [ './c1.mjs' ],
} )

const composition = createElement( c1 )

getLoadableState( composition ).then( ls => {
  console.log( c1.Component.preloadDataState )
} )

output:

[AsyncFunction: preloadDataState]

Suggestion: attach static methods or fields directly to loadable component ( c1 ): preloadDataState method available by c1.preloadDataState instead of c1.Component.preloadDataState

[gregberge]

Loadable Components is not design to work with “statical” approach. I recommend you to use “react-navi” for this kind of approach.

[davidfurlong]

how can i get my static component.serverApiNames in server side.

this seems to be possible now - if you know which Loadable component is loading via a route match (react router or otherwise)

you can do

const loadedComponent = await (component as DefaultImportedComponent<any>).load();
loadedComponent?.default?.accessYourStaticPropName