Legacy

Legacy packages

@eqiunor/fusion-api and @eqiunor/fusion-components do not work well with @equinor/fusion-framework, since they are tightly couple with the Project Portal.
When using the @equinor/fusion-framework-cli, these packages will not work at all!

Inter opt

During a grace period and for easing into the framework, applications (only works in Project Portal) can provide a render method to access the framework

import { registerApp as registerLegacy } from '@equinor/fusion';
import { createLegacyApp } from '@equinor/fusion-framework-react-app';

const AppComponent: React.ComponentType = () => { ... }

registerLegacy(
  'my-app', 
  {
    /** note when providing render, application must handle routing */
    render: createComponent(AppComponent, (configurator) => {...}),
    AppComponent,
  }
);

A portal might use this functionality for render legacy applications see LegacyFusionWrapper

React Router 5

For some apps, replacing react-router is a daunting task.
With this method the app will initialize modules and consume the framework.

• 
• 

Legacy router

import { createBrowserHistory } from 'history';
import { useObservableSubscription } from '@equinor/fusion-observable/react';
import { type NavigationModule } from '@equinor/fusion-framework-module-navigation';

/** this is only needed if your code uses `useHistory` from '@equinor/fusion'  */
import { HistoryContext } from '@equinor/fusion';

/**
 * Create a legacy history object and connect to framework navigation 
 */ 
const useLegacyHistory = () => {
    const navigation = useAppModule<NavigationModule>('navigation');
    const history = useMemo(() => {
            return createBrowserHistory({basename: navigation.navigator.basename});
        }, 
        [createBrowserHistory, navigation]
    );

    /** observe changes of framework navigation */
    useObservableSubscription(navigation, useCallback((next) => {
            /** stringify path, don't trust path`s are compatible */
            history.replace([
                next.path.pathname, 
                next.path.hash, 
                next.path.search
            ].join(''));
        }, [history])
    );

    return history;
}
export const LegacyRouter = (props: {children: React.ReactNode}) => {
    const history = useLegacyHistory();
    return (
      <HistoryContext.Provider value={{ history }}>
          <BrowserRouter>
              <Router history={history}>
                  {props.children}
              </Router>
          </BrowserRouter>
      </HistoryContext.Provider>
    );
}

Register app

import { registerApp } from '@equinor/fusion';
import { createComponent } from '@equinor/fusion-framework-react-app';
import { enableNavigation } from '@equinor/fusion-framework-module-navigation';

import { App } from './App';
import { LegacyRouter } from './LegacyRouter';

export const renderApp = createComponent(
  <LegacyRouter>
    <App />
  </LegacyRouter>, 
  (configurator, { env }) => {
    enableNavigation(configurator, env.basename);
  }
);

registerApp('my-app', { App, render });