@grafana/create-plugin 5.3.8-canary.1080.86cb597.0 → 5.3.8

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v5.3.8 (Thu Sep 05 2024)
+
+#### 🐛 Bug Fix
+
+- Create Plugin: Code split scaffolded apps [#1072](https://github.com/grafana/plugin-tools/pull/1072) ([@jackw](https://github.com/jackw))
+
+#### Authors: 1
+
+- Jack Westbrook ([@jackw](https://github.com/jackw))
+
+---
+
 # v5.3.7 (Fri Aug 30 2024)
 
 #### 🐛 Bug Fix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "5.3.8-canary.1080.86cb597.0",
+  "version": "5.3.8",
   "repository": {
     "directory": "packages/create-plugin",
     "url": "https://github.com/grafana/plugin-tools"
@@ -87,5 +87,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "86cb5973144e4be53b365c72da54aadee3fe44f4"
+  "gitHead": "cdc6abf8bf0cb3210e1f5433e6d4cd011d74e816"
 }

package/templates/app/src/components/App/App.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { AppRootProps, PluginType } from '@grafana/data';
 import { render, screen } from '@testing-library/react';
-import { App } from './App';
+import App from './App';
 
 describe('Components/App', () => {
   let props: AppRootProps;
@@ -25,13 +25,13 @@ describe('Components/App', () => {
     } as unknown as AppRootProps;
   });
 
-  test('renders without an error"', () => {
+  test('renders without an error"', async () => {
     render(
       <BrowserRouter>
         <App {...props} />
       </BrowserRouter>
     );
 
-    expect(screen.queryByText(/this is page one./i)).toBeInTheDocument();
+    expect(await screen.findByText(/this is page one./i)).toBeInTheDocument();
   });
 });

package/templates/app/src/components/App/App.tsx

@@ -2,19 +2,24 @@ import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { AppRootProps } from '@grafana/data';
 import { ROUTES } from '../../constants';
-import { PageFour, PageOne, PageThree, PageTwo } from '../../pages';
+const PageOne = React.lazy(() => import('../../pages/PageOne'));
+const PageTwo = React.lazy(() => import('../../pages/PageTwo'));
+const PageThree = React.lazy(() => import('../../pages/PageThree'));
+const PageFour = React.lazy(() => import('../../pages/PageFour'));
 
-export function App(props: AppRootProps) {
+function App(props: AppRootProps) {
   return (
-      <Routes>
-        <Route path={ROUTES.Two} element={<PageTwo />} />
-        <Route path={`${ROUTES.Three}/:id?`} element={<PageThree />} />
+    <Routes>
+      <Route path={ROUTES.Two} element={<PageTwo />} />
+      <Route path={`${ROUTES.Three}/:id?`} element={<PageThree />} />
 
-        {/* Full-width page (this page will have no side navigation) */}
-        <Route path={ROUTES.Four} element={<PageFour />} />
+      {/* Full-width page (this page will have no side navigation) */}
+      <Route path={ROUTES.Four} element={<PageFour />} />
 
-        {/* Default page */}
-        <Route path="*" element={<PageOne />} />
-      </Routes>
+      {/* Default page */}
+      <Route path="*" element={<PageOne />} />
+    </Routes>
   );
 }
+
+export default App;

package/templates/app/src/components/AppConfig/AppConfig.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PluginType } from '@grafana/data';
-import { AppConfig, AppConfigProps } from './AppConfig';
+import AppConfig, { AppConfigProps } from './AppConfig';
 import { testIds } from 'components/testIds';
 
 describe('Components/AppConfig', () => {

package/templates/app/src/components/AppConfig/AppConfig.tsx

@@ -21,7 +21,7 @@ type State = {
 
 export interface AppConfigProps extends PluginConfigPageProps<AppPluginMeta<AppPluginSettings>> {}
 
-export const AppConfig = ({ plugin }: AppConfigProps) => {
+const AppConfig = ({ plugin }: AppConfigProps) => {
   const s = useStyles2(getStyles);
   const { enabled, pinned, jsonData, secureJsonFields } = plugin.meta;
   const [state, setState] = useState<State>({
@@ -110,6 +110,8 @@ export const AppConfig = ({ plugin }: AppConfigProps) => {
   );
 };
 
+export default AppConfig;
+
 const getStyles = (theme: GrafanaTheme2) => ({
   colorWeak: css`
     color: ${theme.colors.text.secondary};

package/templates/app/src/module.tsx

@@ -0,0 +1,26 @@
+import React, { Suspense, lazy } from 'react';
+import { AppPlugin, type AppRootProps } from '@grafana/data';
+import { LoadingPlaceholder } from '@grafana/ui';
+import type { AppConfigProps } from './components/AppConfig/AppConfig';
+
+const LazyApp = lazy(() => import('./components/App/App'));
+const LazyAppConfig = lazy(() => import('./components/AppConfig/AppConfig'));
+
+const App = (props: AppRootProps) => (
+  <Suspense fallback={<LoadingPlaceholder text="" />}>
+    <LazyApp {...props} />
+  </Suspense>
+);
+
+const AppConfig = (props: AppConfigProps) => (
+  <Suspense fallback={<LoadingPlaceholder text="" />}>
+    <LazyAppConfig {...props} />
+  </Suspense>
+);
+
+export const plugin = new AppPlugin<{}>().setRootPage(App).addConfigPage({
+  title: 'Configuration',
+  icon: 'cog',
+  body: AppConfig,
+  id: 'configuration',
+});

package/templates/app/src/pages/PageFour.tsx

@@ -7,7 +7,7 @@ import { prefixRoute } from '../utils/utils.routing';
 import { testIds } from '../components/testIds';
 import { PluginPage } from '@grafana/runtime';
 
-export function PageFour() {
+function PageFour() {
   const s = useStyles2(getStyles);
 
   return (
@@ -24,6 +24,8 @@ export function PageFour() {
   );
 }
 
+export default PageFour;
+
 const getStyles = (theme: GrafanaTheme2) => ({
   page: css`
     padding: ${theme.spacing(3)};

package/templates/app/src/pages/PageOne.tsx

@@ -7,7 +7,7 @@ import { ROUTES } from '../constants';
 import { testIds } from '../components/testIds';
 import { PluginPage } from '@grafana/runtime';
 
-export function PageOne() {
+function PageOne() {
   const s = useStyles2(getStyles);
 
   return (
@@ -24,6 +24,8 @@ export function PageOne() {
   );
 }
 
+export default PageOne;
+
 const getStyles = (theme: GrafanaTheme2) => ({
   marginTop: css`
     margin-top: ${theme.spacing(2)};

package/templates/app/src/pages/PageThree.tsx

@@ -8,7 +8,7 @@ import { ROUTES } from '../constants';
 import { testIds } from '../components/testIds';
 import { PluginPage } from '@grafana/runtime';
 
-export function PageThree() {
+function PageThree() {
   const s = useStyles2(getStyles);
   const { id } = useParams<{ id: string }>();
 
@@ -39,6 +39,8 @@ export function PageThree() {
   );
 }
 
+export default PageThree;
+
 const getStyles = (theme: GrafanaTheme2) => ({
   link: css`
     color: ${theme.colors.text.link};

package/templates/app/src/pages/PageTwo.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { testIds } from '../components/testIds';
 import { PluginPage } from '@grafana/runtime';
 
-export function PageTwo() {
+function PageTwo() {
   return (
     <PluginPage>
       <div data-testid={testIds.pageTwo.container}>
@@ -11,3 +11,5 @@ export function PageTwo() {
     </PluginPage>
   );
 }
+
+export default PageTwo;

package/templates/common/.config/jest-setup.js

@@ -7,13 +7,13 @@
 
 import '@testing-library/jest-dom';
 import { TextEncoder, TextDecoder } from 'util';
-                                                                                                          
+
 Object.assign(global, { TextDecoder, TextEncoder });
 
 // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
 Object.defineProperty(global, 'matchMedia', {
   writable: true,
-  value: jest.fn().mockImplementation((query) => ({
+  value: (query) => ({
     matches: false,
     media: query,
     onchange: null,
@@ -22,7 +22,7 @@ Object.defineProperty(global, 'matchMedia', {
     addEventListener: jest.fn(),
     removeEventListener: jest.fn(),
     dispatchEvent: jest.fn(),
-  })),
+  }),
 });
 
 HTMLCanvasElement.prototype.getContext = () => {};

package/templates/common/_package.json

@@ -69,7 +69,7 @@
     "@grafana/runtime": "^11.2.0",
     "@grafana/ui": "^11.2.0",
     "@grafana/schema": "^10.4.0",{{#if_eq pluginType "scenesapp"}}
-    "@grafana/scenes": "^5.11.1",{{/if_eq}}
+    "@grafana/scenes": "^5.10.1",{{/if_eq}}
     "react": "18.2.0",
     "react-dom": "18.2.0",{{#if isAppType}}
     "react-router-dom": "^{{ reactRouterVersion }}",

package/templates/scenes-app/src/components/App/App.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { AppRootProps } from '@grafana/data';
 import { PluginPropsContext } from '../../utils/utils.plugin';
-import { Routes } from '../Routes';
+import { Routes } from '../Routes/Routes';
 
-export class App extends React.PureComponent<AppRootProps> {
-  render() {
-    return (
-      <PluginPropsContext.Provider value={this.props}>
-        <Routes />
-      </PluginPropsContext.Provider>
-    );
-  }
+function App(props: AppRootProps) {
+  return (
+    <PluginPropsContext.Provider value={props}>
+      <Routes />
+    </PluginPropsContext.Provider>
+  );
 }
+
+export default App;

package/templates/scenes-app/src/components/AppConfig/AppConfig.tsx

@@ -22,9 +22,9 @@ type State = {
   apiKey: string;
 };
 
-interface Props extends PluginConfigPageProps<AppPluginMeta<JsonData>> {}
+export interface AppConfigProps extends PluginConfigPageProps<AppPluginMeta<JsonData>> {}
 
-export const AppConfig = ({ plugin }: Props) => {
+const AppConfig = ({ plugin }: AppConfigProps) => {
   const s = useStyles2(getStyles);
   const { enabled, pinned, jsonData } = plugin.meta;
   const [state, setState] = useState<State>({
@@ -114,6 +114,8 @@ export const AppConfig = ({ plugin }: Props) => {
   );
 };
 
+export default AppConfig;
+
 const getStyles = (theme: GrafanaTheme2) => ({
   colorWeak: css`
     color: ${theme.colors.text.secondary};

package/templates/scenes-app/src/components/Routes/Routes.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
-import { HomePage } from '../../pages/Home';
-import { PageWithTabs } from '../../pages/WithTabs';
-import { WithDrilldown } from '../../pages/WithDrilldown';
 import { prefixRoute } from '../../utils/utils.routing';
 import { ROUTES } from '../../constants';
-import { HelloWorldPluginPage } from '../../pages/HelloWorld';
+const HomePage = React.lazy(() => import('../../pages/Home/Home'));
+const PageWithTabs = React.lazy(() => import('../../pages/WithTabs/WithTabs'));
+const WithDrilldown = React.lazy(() => import('../../pages/WithDrilldown/WithDrilldown'));
+const HelloWorld = React.lazy(() => import('../../pages/HelloWorld/HelloWorld'));
 
 export const Routes = () => {
   return (
@@ -13,7 +13,7 @@ export const Routes = () => {
       <Route path={prefixRoute(`${ROUTES.WithTabs}`)} component={PageWithTabs} />
       <Route path={prefixRoute(`${ROUTES.WithDrilldown}`)} component={WithDrilldown} />
       <Route path={prefixRoute(`${ROUTES.Home}`)} component={HomePage} />
-      <Route path={prefixRoute(`${ROUTES.HelloWorld}`)} component={HelloWorldPluginPage} />
+      <Route path={prefixRoute(`${ROUTES.HelloWorld}`)} component={HelloWorld} />
       <Redirect to={prefixRoute(ROUTES.Home)} />
     </Switch>
   );

package/templates/scenes-app/src/module.tsx

@@ -0,0 +1,26 @@
+import React, { Suspense, lazy } from 'react';
+import { AppPlugin, type AppRootProps } from '@grafana/data';
+import { LoadingPlaceholder } from '@grafana/ui';
+import type { AppConfigProps } from './components/AppConfig/AppConfig';
+
+const LazyApp = lazy(() => import('./components/App/App'));
+const LazyAppConfig = lazy(() => import('./components/AppConfig/AppConfig'));
+
+const App = (props: AppRootProps) => (
+  <Suspense fallback={<LoadingPlaceholder text="" />}>
+    <LazyApp {...props} />
+  </Suspense>
+);
+
+const AppConfig = (props: AppConfigProps) => (
+  <Suspense fallback={<LoadingPlaceholder text="" />}>
+    <LazyAppConfig {...props} />
+  </Suspense>
+);
+
+export const plugin = new AppPlugin<{}>().setRootPage(App).addConfigPage({
+  title: 'Configuration',
+  icon: 'cog',
+  body: AppConfig,
+  id: 'configuration',
+});

package/templates/scenes-app/src/pages/HelloWorld/HelloWorld.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { getScene } from './helloWorldScene';
 
-export const HelloWorldPluginPage = () => {
+const HelloWorld = () => {
   const scene = getScene();
 
   return <scene.Component model={scene} />;
 };
+
+export default HelloWorld;

package/templates/scenes-app/src/pages/Home/Home.tsx

@@ -22,7 +22,8 @@ const getScene = () => {
     ],
   });
 };
-export const HomePage = () => {
+
+const HomePage = () => {
   const scene = useMemo(() => getScene(), []);
 
   return (
@@ -47,3 +48,5 @@ export const HomePage = () => {
     </>
   );
 };
+
+export default HomePage;

package/templates/scenes-app/src/pages/WithDrilldown/WithDrilldown.tsx

@@ -93,8 +93,10 @@ const getDrilldownsAppScene = () => {
   });
 };
 
-export const WithDrilldown = () => {
+const WithDrilldown = () => {
   const scene = useMemo(() => getDrilldownsAppScene(), []);
 
   return <scene.Component model={scene} />;
 };
+
+export default WithDrilldown;

package/templates/scenes-app/src/pages/WithTabs/WithTabs.tsx

@@ -38,8 +38,10 @@ const getScene = () =>
     ],
   });
 
-export const PageWithTabs = () => {
+const PageWithTabs = () => {
   const scene = useMemo(() => getScene(), []);
 
   return <scene.Component model={scene} />;
 };
+
+export default PageWithTabs;

package/templates/app/src/components/App/index.tsx

@@ -1 +0,0 @@
-export * from './App';

package/templates/app/src/components/AppConfig/index.tsx

@@ -1 +0,0 @@
-export * from './AppConfig';

package/templates/app/src/module.ts

@@ -1,10 +0,0 @@
-import { AppPlugin } from '@grafana/data';
-import { App } from './components/App';
-import { AppConfig } from './components/AppConfig';
-
-export const plugin = new AppPlugin<{}>().setRootPage(App).addConfigPage({
-  title: 'Configuration',
-  icon: 'cog',
-  body: AppConfig,
-  id: 'configuration',
-});

package/templates/app/src/pages/index.tsx

@@ -1,4 +0,0 @@
-export { PageFour } from './PageFour';
-export { PageOne } from './PageOne';
-export { PageThree } from './PageThree';
-export { PageTwo } from './PageTwo';

package/templates/scenes-app/src/components/App/index.tsx

@@ -1 +0,0 @@
-export * from './App';

package/templates/scenes-app/src/components/AppConfig/index.tsx

@@ -1 +0,0 @@
-export * from './AppConfig';

package/templates/scenes-app/src/components/Routes/index.tsx

@@ -1 +0,0 @@
-export * from './Routes';

package/templates/scenes-app/src/module.ts

@@ -1,10 +0,0 @@
-import { AppPlugin } from '@grafana/data';
-import { App } from './components/App';
-import { AppConfig } from './components/AppConfig';
-
-export const plugin = new AppPlugin<{}>().setRootPage(App).addConfigPage({
-  title: 'Configuration',
-  icon: 'cog',
-  body: AppConfig,
-  id: 'configuration',
-});

package/templates/scenes-app/src/pages/HelloWorld/index.tsx

@@ -1 +0,0 @@
-export * from './HelloWorld';

package/templates/scenes-app/src/pages/Home/index.tsx

@@ -1 +0,0 @@
-export * from './Home';

package/templates/scenes-app/src/pages/WithDrilldown/index.tsx

@@ -1 +0,0 @@
-export * from './WithDrilldown';

package/templates/scenes-app/src/pages/WithTabs/index.tsx

@@ -1 +0,0 @@
-export * from './WithTabs';