react app adapt - portlet configuration variable

[0xAnakin]

Issue type (mark with x)

• 🤔 Question
• 🐛 Bug report
• 🎁 Feature request
• 🤷‍♀️ Other

liferay-js:adapt react app issue with index.js entryPoint / variables

Desired behavior:
Have access to the configuration portlet variable at least

Current behavior:
After liferay-js adapt I added my portlet in a page, but altho there is no error I would like to access the portlet configuration but there isn't any. Also I have created a configuration.json file inside features directory.

Other information (environment, versions etc):

npm: v6.14.6
node: v10.22.1

npm ls --depth=0 -g

+-- generator-liferay-js@2.22.1
+-- generator-liferay-theme@10.0.1
+-- gulp@4.0.2
+-- npm@6.14.6
`-- yo@3.1.1

Is there any way to have access to the configuration variable in a react project after liferay-js:adapt? is it a bug or what?

Source provided in Liferay help center ticket https://help.liferay.com/hc/requests/37048

[izaera]

Sadly this is not supported and won't be. This is because the portlet bootstrapping process depends very much on the underlying framework and we (the JS Toolkit I mean) don't have control over it so we cannot guarantee that we will be able to support this feature in time.

Also, adaptation was intended as a way to run code that was not Liferay specific. When Liferay features are needed it is recommended to switch to non-adapted projects, i.e., real Liferay specific projects for the framework of choice (React, Angular, Vue, ...) instead of using the frameworks' development tools which will always create some friction, given that they are designed with a SPA in mind, not a Liferay portlet.

[izaera]

I'm closing this as replied. Feel free to reopen it if you need more info or want to discuss anything 👍 .

[freddi301]

Adapted create-react-app with typescript works placing inside index.tsx.
(Be aware maintainers specified several times that this is not guaranteed to work)

declare var _LIFERAY_PARAMS_: {
  configuration: {
    system: Record<string, string>;
    portletInstance: Record<string, string>;
  };
  contextPath: string;
  portletElementId: string;
  portletNamespace: string;
};

const debounceMs =
  Number(_LIFERAY_PARAMS_.configuration.portletInstance.debounceMs) ?? 300;
const minLetters =
  Number(_LIFERAY_PARAMS_.configuration.portletInstance.minLetters) ?? 3;
  
const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <App debounceMs={debounceMs} minLetters={minLetters} />
  </React.StrictMode>
);

[0xAnakin]

Have you tested this out without typescript?

[0xAnakin]

Ok this seems to work in typescript here is my code:

index.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

declare var _LIFERAY_PARAMS_: {
  configuration: {
    system: Record<string, string>;
    portletInstance: Record<string, string>;
  };
  contextPath: string;
  portletElementId: string;
  portletNamespace: string;
};

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App params={_LIFERAY_PARAMS_} />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.tzx:

import React from 'react';
import logo from './logo.svg';
import './App.css';


class App extends React.Component<any>{

  componentDidMount(): void {
    console.log('mount params:', this.props.params);
  }

  public render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }

}

export default App;

Now my question is (which is silly) how do you make this work if you don't use Typescript?

[izaera]

This

declare var _LIFERAY_PARAMS_: {
  configuration: {
    system: Record<string, string>;
    portletInstance: Record<string, string>;
  };
  contextPath: string;
  portletElementId: string;
  portletNamespace: string;
};

implies a global variable named _LIFERAY_PARAMS_ exists in the scope. So I would say: just access that global variable from your pure JS code.

One caveat, though you probably know it already: that _LIFERAY_PARAMS_ is the way Liferay uses to pass your code the values but it is totally an implementation detail so it could break in future versions without anyone warning you.

In any case I admit the implementation is stable enough as to make the trade-off (using an unsupported thing vs the functionality you get) positive...

[0xAnakin]

Well I did try to access that variable @izaera, and in a pure js app but it was not defined... is there any case you can provide a source example in pure js in case I'm missing something?

[izaera]

is there any case you can provide a source example in pure js in case I'm missing something

Nope, bc being that an unsupported operation, we don't provide any examples that use that pattern...