@@ -11,3 +11,5 @@ export function PageTwo() {
);
}
+
+export default PageTwo;
diff --git a/packages/create-plugin/templates/app/src/pages/index.tsx b/packages/create-plugin/templates/app/src/pages/index.tsx
deleted file mode 100644
index 519092d2e..000000000
--- a/packages/create-plugin/templates/app/src/pages/index.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-export { PageFour } from './PageFour';
-export { PageOne } from './PageOne';
-export { PageThree } from './PageThree';
-export { PageTwo } from './PageTwo';
diff --git a/packages/create-plugin/templates/common/.config/jest-setup.js b/packages/create-plugin/templates/common/.config/jest-setup.js
index d0629b471..74832e34f 100644
--- a/packages/create-plugin/templates/common/.config/jest-setup.js
+++ b/packages/create-plugin/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 = () => {};
diff --git a/packages/create-plugin/templates/scenes-app/src/components/App/App.tsx b/packages/create-plugin/templates/scenes-app/src/components/App/App.tsx
index f79f7335a..567acdfe1 100644
--- a/packages/create-plugin/templates/scenes-app/src/components/App/App.tsx
+++ b/packages/create-plugin/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
{
- render() {
- return (
-
-
-
- );
- }
+function App(props: AppRootProps) {
+ return (
+
+
+
+ );
}
+
+export default App;
diff --git a/packages/create-plugin/templates/scenes-app/src/components/App/index.tsx b/packages/create-plugin/templates/scenes-app/src/components/App/index.tsx
deleted file mode 100644
index ac7ba3b3a..000000000
--- a/packages/create-plugin/templates/scenes-app/src/components/App/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './App';
diff --git a/packages/create-plugin/templates/scenes-app/src/components/AppConfig/AppConfig.tsx b/packages/create-plugin/templates/scenes-app/src/components/AppConfig/AppConfig.tsx
index 5d324ffd9..fe3bedc44 100644
--- a/packages/create-plugin/templates/scenes-app/src/components/AppConfig/AppConfig.tsx
+++ b/packages/create-plugin/templates/scenes-app/src/components/AppConfig/AppConfig.tsx
@@ -22,9 +22,9 @@ type State = {
apiKey: string;
};
-interface Props extends PluginConfigPageProps> {}
+export interface AppConfigProps extends PluginConfigPageProps> {}
-export const AppConfig = ({ plugin }: Props) => {
+const AppConfig = ({ plugin }: AppConfigProps) => {
const s = useStyles2(getStyles);
const { enabled, pinned, jsonData } = plugin.meta;
const [state, setState] = useState({
@@ -114,6 +114,8 @@ export const AppConfig = ({ plugin }: Props) => {
);
};
+export default AppConfig;
+
const getStyles = (theme: GrafanaTheme2) => ({
colorWeak: css`
color: ${theme.colors.text.secondary};
diff --git a/packages/create-plugin/templates/scenes-app/src/components/AppConfig/index.tsx b/packages/create-plugin/templates/scenes-app/src/components/AppConfig/index.tsx
deleted file mode 100644
index 1dba18f08..000000000
--- a/packages/create-plugin/templates/scenes-app/src/components/AppConfig/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './AppConfig';
diff --git a/packages/create-plugin/templates/scenes-app/src/components/Routes/Routes.tsx b/packages/create-plugin/templates/scenes-app/src/components/Routes/Routes.tsx
index 017753e04..5a18a78e3 100644
--- a/packages/create-plugin/templates/scenes-app/src/components/Routes/Routes.tsx
+++ b/packages/create-plugin/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 = () => {
-
+
);
diff --git a/packages/create-plugin/templates/scenes-app/src/components/Routes/index.tsx b/packages/create-plugin/templates/scenes-app/src/components/Routes/index.tsx
deleted file mode 100644
index 2f80a5cca..000000000
--- a/packages/create-plugin/templates/scenes-app/src/components/Routes/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Routes';
diff --git a/packages/create-plugin/templates/scenes-app/src/module.ts b/packages/create-plugin/templates/scenes-app/src/module.ts
deleted file mode 100644
index 319808b1b..000000000
--- a/packages/create-plugin/templates/scenes-app/src/module.ts
+++ /dev/null
@@ -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',
-});
diff --git a/packages/create-plugin/templates/scenes-app/src/module.tsx b/packages/create-plugin/templates/scenes-app/src/module.tsx
new file mode 100644
index 000000000..33fb72bd2
--- /dev/null
+++ b/packages/create-plugin/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) => (
+ }>
+
+
+);
+
+const AppConfig = (props: AppConfigProps) => (
+ }>
+
+
+);
+
+export const plugin = new AppPlugin<{}>().setRootPage(App).addConfigPage({
+ title: 'Configuration',
+ icon: 'cog',
+ body: AppConfig,
+ id: 'configuration',
+});
diff --git a/packages/create-plugin/templates/scenes-app/src/pages/HelloWorld/HelloWorld.tsx b/packages/create-plugin/templates/scenes-app/src/pages/HelloWorld/HelloWorld.tsx
index 8ef918630..27feac3dd 100644
--- a/packages/create-plugin/templates/scenes-app/src/pages/HelloWorld/HelloWorld.tsx
+++ b/packages/create-plugin/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 ;
};
+
+export default HelloWorld;
diff --git a/packages/create-plugin/templates/scenes-app/src/pages/HelloWorld/index.tsx b/packages/create-plugin/templates/scenes-app/src/pages/HelloWorld/index.tsx
deleted file mode 100644
index c7bdf54e1..000000000
--- a/packages/create-plugin/templates/scenes-app/src/pages/HelloWorld/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './HelloWorld';
diff --git a/packages/create-plugin/templates/scenes-app/src/pages/Home/Home.tsx b/packages/create-plugin/templates/scenes-app/src/pages/Home/Home.tsx
index b5680b162..c00ce8950 100644
--- a/packages/create-plugin/templates/scenes-app/src/pages/Home/Home.tsx
+++ b/packages/create-plugin/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;
diff --git a/packages/create-plugin/templates/scenes-app/src/pages/Home/index.tsx b/packages/create-plugin/templates/scenes-app/src/pages/Home/index.tsx
deleted file mode 100644
index 6fd0b5ba7..000000000
--- a/packages/create-plugin/templates/scenes-app/src/pages/Home/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Home';
diff --git a/packages/create-plugin/templates/scenes-app/src/pages/WithDrilldown/WithDrilldown.tsx b/packages/create-plugin/templates/scenes-app/src/pages/WithDrilldown/WithDrilldown.tsx
index 594db1c3e..579faf84d 100644
--- a/packages/create-plugin/templates/scenes-app/src/pages/WithDrilldown/WithDrilldown.tsx
+++ b/packages/create-plugin/templates/scenes-app/src/pages/WithDrilldown/WithDrilldown.tsx
@@ -93,8 +93,10 @@ const getDrilldownsAppScene = () => {
});
};
-export const WithDrilldown = () => {
+const WithDrilldown = () => {
const scene = useMemo(() => getDrilldownsAppScene(), []);
return ;
};
+
+export default WithDrilldown;
diff --git a/packages/create-plugin/templates/scenes-app/src/pages/WithDrilldown/index.tsx b/packages/create-plugin/templates/scenes-app/src/pages/WithDrilldown/index.tsx
deleted file mode 100644
index 8c16fb721..000000000
--- a/packages/create-plugin/templates/scenes-app/src/pages/WithDrilldown/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './WithDrilldown';
diff --git a/packages/create-plugin/templates/scenes-app/src/pages/WithTabs/WithTabs.tsx b/packages/create-plugin/templates/scenes-app/src/pages/WithTabs/WithTabs.tsx
index a1b06a72d..bdd36351c 100644
--- a/packages/create-plugin/templates/scenes-app/src/pages/WithTabs/WithTabs.tsx
+++ b/packages/create-plugin/templates/scenes-app/src/pages/WithTabs/WithTabs.tsx
@@ -38,8 +38,10 @@ const getScene = () =>
],
});
-export const PageWithTabs = () => {
+const PageWithTabs = () => {
const scene = useMemo(() => getScene(), []);
return ;
};
+
+export default PageWithTabs;
diff --git a/packages/create-plugin/templates/scenes-app/src/pages/WithTabs/index.tsx b/packages/create-plugin/templates/scenes-app/src/pages/WithTabs/index.tsx
deleted file mode 100644
index ff1788ad5..000000000
--- a/packages/create-plugin/templates/scenes-app/src/pages/WithTabs/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './WithTabs';