frintjs/frint

frint-router-react: Support rendering already registered Apps by name

Open

#373 opened on Nov 14, 2017

View on GitHub
 (0 comments) (2 reactions) (0 assignees)JavaScript (746 stars) (37 forks)batch import
featurehelp wanted

Description

Currently

Along with Components, we also support rendering Apps with <Route>:

import { Route } from 'frint-router-react';

import MyApp from './apps/MyApp';

function MyComponent() {
  return (
    <div>
      <Route path="/about" app={MyApp} />
    </div>
  );
}

Whenever the route is active, it handles instantiating the App and then rendering it. And when the route is not active and unmounted, it will destroy the App instance.

Proposed feature

FrintJS allows Child Apps to be registered:

window.app.registerApp(MyApp);

This instantiates the App and keeps it in the local registry.

We can re-use the same instance in routing too if needed:

import { Route } from 'frint-router-react';

function MyComponent() {
  return (
    <div>
      <Route path="/about" app="MyApp" />
    </div>
  );
}

Instead of supporting only classes for app, we can also additionally support strings (App names). This way, routes can be enabled to render the same App's instance and they don't need to instantiated/destroyed every time the Route becomes active.

It gives developers a choice based on their needs.

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic React knowledgefamiliarity with FrintJS app registration
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Examine the Route component in frint router react to see how the `app` prop is currently used. Look for the instantiation logic (likely in componentDidMount or similar). Check the FrintJS core to understand how apps are registered and retrieved by name (the registry). Propose a change to support a string `app` prop that looks up the registered app instance instead of instantiating a new one. Also consider lifecycle: the route should not destroy/recreate the app if it's already registered. Review any existing tests for Route to ensure backwards compatibility.